From 3843a9bee7493c4f9374a6de661aa70dbfa9f105 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=90=E1=85=A2=E1=84=8C=E1=85=A2=E1=84=8B=E1=85=A7?=
 =?UTF-8?q?=E1=86=BC?= <tjy970721@gmail.com>
Date: Sun, 19 Jun 2022 03:17:36 +0900
Subject: [PATCH 001/106] fix: Switch Animation In Safari

---
 packages/react/src/switch/switch.styles.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/switch/switch.styles.ts b/packages/react/src/switch/switch.styles.ts
index 24a159afe7..458a3fdc22 100644
--- a/packages/react/src/switch/switch.styles.ts
+++ b/packages/react/src/switch/switch.styles.ts
@@ -127,10 +127,10 @@ export const StyledSwitchCircle = styled('span', {
   size: 'calc($$switchHeight * 0.7)',
   jc: 'center',
   ai: 'center',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  left: 'calc($$switchWidth / 15)',
-  transition: 'left 0.25s ease, width 0.2s ease',
+  top: 'calc(50% - $$switchHeight * 0.35)',
+  left: '0',
+  transform: 'translateX(calc($$switchWidth / 15))',
+  transition: 'transform 0.25s ease, width 0.2s ease',
   bg: '$background',
   br: '$pill',
   '& svg': {
@@ -162,7 +162,8 @@ export const StyledSwitch = styled(
         true: {
           bg: '$$switchColor',
           [`& ${StyledSwitchCircle}`]: {
-            left: 'calc(100% - ($$switchWidth / 15) - $$switchHeight * 0.7)'
+            transform:
+              'translateX(calc($$switchWidth - $$switchWidth / 15 - 100%))'
           },
           '&:hover:not(&:active)': {
             bg: '$$switchColorHover'
@@ -177,7 +178,8 @@ export const StyledSwitch = styled(
             borderColor: '$$switchColor'
           },
           [`& ${StyledSwitchCircle}`]: {
-            left: 'calc(($$switchWidth / 15) - ($$switchBorderW / 2))',
+            transform:
+              'translateX(calc(($$switchWidth / 15) - ($$switchBorderW / 2)))',
             bg: '$accents2'
           }
         }
@@ -248,7 +250,7 @@ export const StyledSwitch = styled(
         css: {
           '&:active': {
             [`& ${StyledSwitchCircle}`]: {
-              left: 'calc($$switchWidth / 7.5)'
+              transform: 'translateX(calc($$switchWidth / 7.5))'
             }
           }
         }
@@ -260,7 +262,8 @@ export const StyledSwitch = styled(
         css: {
           '&:active': {
             [`& ${StyledSwitchCircle}`]: {
-              left: 'calc(100% - ($$switchWidth / 5) - $$switchHeight * 0.7)'
+              transform:
+                'translateX(calc($$switchWidth - $$switchWidth / 7.5 - 100%))'
             }
           }
         }

From 709b18d7e3dd1a2e153009f54222e9d99860a706 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 18 Jun 2022 23:17:06 -0300
Subject: [PATCH 002/106] refactor(react-theme): new sizes added, some
 fontSizes/linHeights renamed, text component now partially support fontsize
 tokens

---
 apps/docs/content/docs/components/text.mdx    |  35 +++--
 .../docs/content/docs/theme/default-theme.mdx | 123 ++++++++++--------
 packages/react/src/avatar/avatar.styles.ts    |   2 +-
 .../react/src/css-baseline/css-baseline.tsx   |   6 +-
 packages/react/src/table/table-pagination.tsx |   7 +-
 .../__snapshots__/index.test.tsx.snap         |  14 +-
 packages/react/src/text/child.tsx             |  47 +++----
 packages/react/src/text/text.tsx              |  61 +++------
 .../__snapshots__/index.test.tsx.snap         |   4 +-
 packages/react/src/theme/common.ts            |  47 ++++---
 packages/react/src/theme/stitches.config.ts   |  19 +++
 11 files changed, 187 insertions(+), 178 deletions(-)

diff --git a/apps/docs/content/docs/components/text.mdx b/apps/docs/content/docs/components/text.mdx
index 9757bdd65e..509f65b8c0 100644
--- a/apps/docs/content/docs/components/text.mdx
+++ b/apps/docs/content/docs/components/text.mdx
@@ -67,24 +67,23 @@ import { Text } from '@nextui-org/react';
 
 #### Text Props
 
-| Attribute      | Type                    | Accepted values                    | Description                           | Default   |
-| -------------- | ----------------------- | ---------------------------------- | ------------------------------------- | --------- |
-| **h1 - h6**    | `boolean`                       | -                                  | Component name                        | `false`   |
-| **small**      | `boolean`                       | -                                  | Component name                        | `false`   |
-| **span**       | `boolean`                       | -                                  | Component name                        | `false`   |
-| **del**        | `boolean`                       | -                                  | Component name                        | `false`   |
-| **i**          | `boolean`                       | -                                  | Component name                        | `false`   |
-| **em**         | `boolean`                       | -                                  | Component name                        | `false`   |
-| **b**          | `boolean`                       | -                                  | Component name                        | `false`   |
-| **blockquote** | `boolean`                       | -                                  | Component name                        | `false`   |
-| **transform**  | `TextTransform`                 | [TextTransforms](#text-transforms) | text-transform prop                   | `none`    |
-| **size**       | `string` `number`               | -                                  | Text size                             | `inherit` |
-| **margin**     | `string` `number`               | -                                  | Text margin                           | `inherit` |
-| **color**      | `SimpleColors` `string`         | [SimpleColors](#simple-colors)     | Text color                            | `default` |
-| **weight**     | `TextWeights`                   | [TextWeights](#text-weights)       | Text weight                           | `noset`   |
-| **css**        | `Stitches.CSS`                  | -                                  | Override Default CSS style            | -         |
-| **as**         | `keyof JSX.IntrinsicElements`   | -                                  | Changes which tag component outputs   | `p`       |
-| ...            | `HTMLAttributes`                | `'id', 'className', ...`           | native props                          | -         |
+| Attribute      | Type                          | Accepted values                    | Description                         | Default   |
+| -------------- | ----------------------------- | ---------------------------------- | ----------------------------------- | --------- |
+| **h1 - h6**    | `boolean`                     | -                                  | Component name                      | `false`   |
+| **small**      | `boolean`                     | -                                  | Component name                      | `false`   |
+| **span**       | `boolean`                     | -                                  | Component name                      | `false`   |
+| **del**        | `boolean`                     | -                                  | Component name                      | `false`   |
+| **i**          | `boolean`                     | -                                  | Component name                      | `false`   |
+| **em**         | `boolean`                     | -                                  | Component name                      | `false`   |
+| **b**          | `boolean`                     | -                                  | Component name                      | `false`   |
+| **blockquote** | `boolean`                     | -                                  | Component name                      | `false`   |
+| **transform**  | `TextTransform`               | [TextTransforms](#text-transforms) | text-transform prop                 | `none`    |
+| **size**       | `string` `number`             | -                                  | Text size                           | `inherit` |
+| **color**      | `SimpleColors` `string`       | [SimpleColors](#simple-colors)     | Text color                          | `default` |
+| **weight**     | `TextWeights`                 | [TextWeights](#text-weights)       | Text weight                         | `noset`   |
+| **css**        | `Stitches.CSS`                | -                                  | Override Default CSS style          | -         |
+| **as**         | `keyof JSX.IntrinsicElements` | -                                  | Changes which tag component outputs | `p`       |
+| ...            | `HTMLAttributes`              | `'id', 'className', ...`           | native props                        | -         |
 
 <Spacer y={2} />
 
diff --git a/apps/docs/content/docs/theme/default-theme.mdx b/apps/docs/content/docs/theme/default-theme.mdx
index 6ada998339..afb67b6aa2 100644
--- a/apps/docs/content/docs/theme/default-theme.mdx
+++ b/apps/docs/content/docs/theme/default-theme.mdx
@@ -321,14 +321,14 @@ export default {
     md: '1rem', /* 16px */
     lg: '1.125rem', /* 18px */
     xl: '1.25rem', /* 20px */
-    xl2: '1.5rem', /* 24px */
-    xl3: '1.875rem', /* 30px */
-    xl4: '2.25rem', /* 36px */
-    xl5: '3rem', /* 48px */
-    xl6: '3.75rem', /* 60px */
-    xl7: '4.5rem', /* 72px */
-    xl8: '6rem', /* 96px */
-    xl9: '8rem', /* 128px */
+    '2xl': '1.5rem', /* 24px */
+    '3xl': '1.875rem', /* 30px */
+    '4xl': '2.25rem', /* 36px */
+    '5xl': '3rem', /* 48px */
+    '6xl': '3.75rem', /* 60px */
+    '7xl': '4.5rem', /* 72px */
+    '8xl': '6rem', /* 96px */
+    '9xl': '8rem', /* 128px */
   }
   ...
 };
@@ -373,14 +373,14 @@ export default {
     md: 1.5, /* 24px */
     lg: 1.75, /* 28px */
     xl: 1.75, /* 28px */
-    xl2: 2, /* 32px */
-    xl3: 2.25, /* 36px */
-    xl4: 2.5, /* 40px */
-    xl5: 1,
-    xl6: 1,
-    xl7: 1,
-    xl8: 1,
-    xl9: 1
+    '2xl': 2, /* 32px */
+    '3xl': 2.25, /* 36px */
+    '4xl': 2.5, /* 40px */
+    '5xl': 1, /* 16px */
+    '6xl': 1, /* 16px */
+    '7xl': 1, /* 16px */
+    '8xl': 1, /* 16px */
+    '9xl': 1 /* 16px */
   }
   ...
 };
@@ -429,9 +429,11 @@ export default {
     base: '14px',
     lg: '14px', // preferred value by NextUI components
     xl: '18px',
+    '2xl': '24px',
+    '3xl': '32px',
     squared: '33%',
     rounded: '50%',
-    pill: '9999px'
+    pill: '9999px',
   }
   ...
 };
@@ -483,6 +485,19 @@ export default {
     md: '1rem',
     lg: '1.375rem',
     xl: '2.25rem',
+    '2xl': '3rem',
+    '3xl': '5rem',
+    '4xl': '10rem',
+    '5xl': '14rem',
+    '6xl': '18rem',
+    '7xl': '24rem',
+    '8xl': '32rem',
+    '9xl': '40rem',
+    min: 'min-content',
+    max: 'max-content',
+    fit: 'fit-content',
+    screen: '100vw',
+    full: '100%',
     px: '1px',
     1: '0.125rem',
     2: '0.25rem',
@@ -524,43 +539,43 @@ export default {
 
 <Spacer y={2} />
 
-| Name    | Space    | Pixels | <Spacer x={10} />                                          |
-| ------- | -------- | ------ | ---------------------------------------------------------- |
-| 0       | 0rem     | 0px    | <Progress squared color="primary" value={0} max={384} />   |
-| px      | 1px      | 1px    | <Progress squared color="primary" value={1} max={384} />   |
-| 1       | 0.125rem | 2px    | <Progress squared color="primary" value={2} max={384} />   |
-| 2       | 0.25rem  | 4px    | <Progress squared color="primary" value={4} max={384} />   |
-| 3       | 0.375rem | 6px    | <Progress squared color="primary" value={6} max={384} />   |
-| 4 (xs)  | 0.5rem   | 8px    | <Progress squared color="primary" value={8} max={384} />   |
-| 5       | 0.625rem | 10px   | <Progress squared color="primary" value={10} max={384} />  |
-| 6 (sm)  | 0.75rem  | 12px   | <Progress squared color="primary" value={12} max={384} />  |
-| 7       | 0.875rem | 14px   | <Progress squared color="primary" value={14} max={384} />  |
-| 8 (md)  | 1rem     | 16px   | <Progress squared color="primary" value={16} max={384} />  |
-| 9 (lg)  | 1.25rem  | 20px   | <Progress squared color="primary" value={20} max={384} />  |
-| 10      | 1.5rem   | 24px   | <Progress squared color="primary" value={24} max={384} />  |
-| 11      | 1.75rem  | 28px   | <Progress squared color="primary" value={28} max={384} />  |
-| 12      | 2rem     | 32px   | <Progress squared color="primary" value={32} max={384} />  |
-| 13 (xl) | 2.25rem  | 36px   | <Progress squared color="primary" value={36} max={384} />  |
-| 14      | 2.5rem   | 40px   | <Progress squared color="primary" value={40} max={384} />  |
-| 15      | 2.75rem  | 44px   | <Progress squared color="primary" value={44} max={384} />  |
-| 16      | 3rem     | 48px   | <Progress squared color="primary" value={48} max={384} />  |
-| 17      | 3.75rem  | 60px   | <Progress squared color="primary" value={60} max={384} />  |
-| 18      | 4rem     | 64px   | <Progress squared color="primary" value={64} max={384} />  |
-| 20      | 5rem     | 80px   | <Progress squared color="primary" value={80} max={384} />  |
-| 24      | 6rem     | 96px   | <Progress squared color="primary" value={96} max={384} />  |
-| 28      | 7rem     | 112px  | <Progress squared color="primary" value={112} max={384} /> |
-| 32      | 8rem     | 128px  | <Progress squared color="primary" value={128} max={384} /> |
-| 36      | 9rem     | 144px  | <Progress squared color="primary" value={144} max={384} /> |
-| 40      | 10rem    | 160px  | <Progress squared color="primary" value={160} max={384} /> |
-| 44      | 11rem    | 176px  | <Progress squared color="primary" value={176} max={384} /> |
-| 48      | 12rem    | 192px  | <Progress squared color="primary" value={192} max={384} /> |
-| 52      | 13rem    | 208px  | <Progress squared color="primary" value={208} max={384} /> |
-| 56      | 14rem    | 224px  | <Progress squared color="primary" value={224} max={384} /> |
-| 60      | 15rem    | 240px  | <Progress squared color="primary" value={240} max={384} /> |
-| 64      | 16rem    | 256px  | <Progress squared color="primary" value={256} max={384} /> |
-| 72      | 18rem    | 288px  | <Progress squared color="primary" value={288} max={384} /> |
-| 80      | 20rem    | 320px  | <Progress squared color="primary" value={320} max={384} /> |
-| 96      | 24rem    | 384px  | <Progress squared color="primary" value={384} max={384} /> |
+| Name     | Space    | Pixels | <Spacer x={10} />                                          |
+| -------- | -------- | ------ | ---------------------------------------------------------- |
+| 0        | 0rem     | 0px    | <Progress squared color="primary" value={0} max={384} />   |
+| px       | 1px      | 1px    | <Progress squared color="primary" value={1} max={384} />   |
+| 1        | 0.125rem | 2px    | <Progress squared color="primary" value={2} max={384} />   |
+| 2        | 0.25rem  | 4px    | <Progress squared color="primary" value={4} max={384} />   |
+| 3        | 0.375rem | 6px    | <Progress squared color="primary" value={6} max={384} />   |
+| 4 (xs)   | 0.5rem   | 8px    | <Progress squared color="primary" value={8} max={384} />   |
+| 5        | 0.625rem | 10px   | <Progress squared color="primary" value={10} max={384} />  |
+| 6 (sm)   | 0.75rem  | 12px   | <Progress squared color="primary" value={12} max={384} />  |
+| 7        | 0.875rem | 14px   | <Progress squared color="primary" value={14} max={384} />  |
+| 8 (md)   | 1rem     | 16px   | <Progress squared color="primary" value={16} max={384} />  |
+| 9 (lg)   | 1.25rem  | 20px   | <Progress squared color="primary" value={20} max={384} />  |
+| 10       | 1.5rem   | 24px   | <Progress squared color="primary" value={24} max={384} />  |
+| 11       | 1.75rem  | 28px   | <Progress squared color="primary" value={28} max={384} />  |
+| 12       | 2rem     | 32px   | <Progress squared color="primary" value={32} max={384} />  |
+| 13 (xl)  | 2.25rem  | 36px   | <Progress squared color="primary" value={36} max={384} />  |
+| 14       | 2.5rem   | 40px   | <Progress squared color="primary" value={40} max={384} />  |
+| 15       | 2.75rem  | 44px   | <Progress squared color="primary" value={44} max={384} />  |
+| 16 (2xl) | 3rem     | 48px   | <Progress squared color="primary" value={48} max={384} />  |
+| 17       | 3.75rem  | 60px   | <Progress squared color="primary" value={60} max={384} />  |
+| 18       | 4rem     | 64px   | <Progress squared color="primary" value={64} max={384} />  |
+| 20 (3xl) | 5rem     | 80px   | <Progress squared color="primary" value={80} max={384} />  |
+| 24       | 6rem     | 96px   | <Progress squared color="primary" value={96} max={384} />  |
+| 28       | 7rem     | 112px  | <Progress squared color="primary" value={112} max={384} /> |
+| 32       | 8rem     | 128px  | <Progress squared color="primary" value={128} max={384} /> |
+| 36       | 9rem     | 144px  | <Progress squared color="primary" value={144} max={384} /> |
+| 40 (4xl) | 10rem    | 160px  | <Progress squared color="primary" value={160} max={384} /> |
+| 44       | 11rem    | 176px  | <Progress squared color="primary" value={176} max={384} /> |
+| 48       | 12rem    | 192px  | <Progress squared color="primary" value={192} max={384} /> |
+| 52       | 13rem    | 208px  | <Progress squared color="primary" value={208} max={384} /> |
+| 56 (5xl) | 14rem    | 224px  | <Progress squared color="primary" value={224} max={384} /> |
+| 60       | 15rem    | 240px  | <Progress squared color="primary" value={240} max={384} /> |
+| 64       | 16rem    | 256px  | <Progress squared color="primary" value={256} max={384} /> |
+| 72 (6xl) | 18rem    | 288px  | <Progress squared color="primary" value={288} max={384} /> |
+| 80       | 20rem    | 320px  | <Progress squared color="primary" value={320} max={384} /> |
+| 96 (7xl) | 24rem    | 384px  | <Progress squared color="primary" value={384} max={384} /> |
 
 <Spacer y={2} />
 
diff --git a/packages/react/src/avatar/avatar.styles.ts b/packages/react/src/avatar/avatar.styles.ts
index dc4df79c6a..ccbcd00b25 100644
--- a/packages/react/src/avatar/avatar.styles.ts
+++ b/packages/react/src/avatar/avatar.styles.ts
@@ -175,7 +175,7 @@ export const StyledAvatar = styled(
           $$avatarXl: '$space$18',
           sizeMin: '$$avatarXl',
           '.nextui-avatar-text': {
-            fontSize: '$xl2'
+            fontSize: '$2xl'
           }
         }
       },
diff --git a/packages/react/src/css-baseline/css-baseline.tsx b/packages/react/src/css-baseline/css-baseline.tsx
index b0bffc298f..e0bffb04d4 100644
--- a/packages/react/src/css-baseline/css-baseline.tsx
+++ b/packages/react/src/css-baseline/css-baseline.tsx
@@ -86,18 +86,18 @@ const globalStyles = globalCss({
   },
   h1: {
     letterSpacing: '$tighter',
-    fontSize: '$xl5',
+    fontSize: '$5xl',
     lineHeight: '$md',
     fontWeight: '$bold'
   },
   h2: {
     letterSpacing: '$tighter',
-    fontSize: '$xl4',
+    fontSize: '$4xl',
     fontWeight: '$semibold'
   },
   h3: {
     letterSpacing: '$tighter',
-    fontSize: '$xl2',
+    fontSize: '$2xl',
     fontWeight: '$semibold'
   },
   h4: {
diff --git a/packages/react/src/table/table-pagination.tsx b/packages/react/src/table/table-pagination.tsx
index 95a5441cad..00851e0dab 100644
--- a/packages/react/src/table/table-pagination.tsx
+++ b/packages/react/src/table/table-pagination.tsx
@@ -12,11 +12,14 @@ interface Props {
   onPageChange?: PaginationProps['onChange'];
 }
 
-type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+type NativeAttrs = Omit<
+  React.HTMLAttributes<unknown>,
+  keyof Props | 'onChange'
+>;
 
 export type TablePaginationProps = Props &
   NativeAttrs &
-  Omit<Partial<PaginationProps>, 'onChage'> & { css?: CSS };
+  Omit<Partial<PaginationProps>, 'onChange'> & { css?: CSS };
 
 const TablePagination: React.FC<TablePaginationProps> = ({
   align,
diff --git a/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap
index 454f2acdda..3fc7651ebe 100644
--- a/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Text should be able to specify the size of text 1`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ifxceqH-css\\">test-value</p>"`;
+exports[`Text should be able to specify the size of text 1`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-iketldG-css\\">test-value</p>"`;
 
-exports[`Text should be able to specify the size of text 2`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ibQZWfr-css\\">test-value</p>"`;
+exports[`Text should be able to specify the size of text 2`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ihhCyyy-css\\">test-value</p>"`;
 
-exports[`Text should render P element in the default 1`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</p>"`;
+exports[`Text should render P element in the default 1`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p>"`;
 
-exports[`Text should render default color when type missing 1`] = `"<p type=\\"unknow\\" class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</p>"`;
+exports[`Text should render default color when type missing 1`] = `"<p type=\\"unknow\\" class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p>"`;
 
-exports[`Text should work with different styles 1`] = `"<div><p class=\\"nextui-c-PJLV nextui-c-PJLV-ichZEZp-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-ijZadaI-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-igAiflV-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-idfSJVT-css\\">test-value</p></div>"`;
+exports[`Text should work with different styles 1`] = `"<div><p class=\\"nextui-c-PJLV nextui-c-PJLV-ifLlHwE-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-igwcrxd-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-ikQkqxQ-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-ibKSEie-css\\">test-value</p></div>"`;
 
-exports[`Text the combined style should be rendered 1`] = `"<b class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\"><del class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</del></b>"`;
+exports[`Text the combined style should be rendered 1`] = `"<b class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\"><del class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</del></b>"`;
 
-exports[`Text the specified element should be rendered 1`] = `"<div><h1 class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</h1><h2 class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</h2><h3 class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</h3><h4 class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</h4><h5 class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</h5><h6 class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</h6><p class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</p><small class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</small><span class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</span><del class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</del><i class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</i><em class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</em><b class=\\"nextui-c-PJLV nextui-c-PJLV-ijXuRFq-css\\">test-value</b></div>"`;
+exports[`Text the specified element should be rendered 1`] = `"<div><h1 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h1><h2 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h2><h3 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h3><h4 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h4><h5 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h5><h6 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h6><p class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p><small class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</small><span class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</span><del class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</del><i class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</i><em class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</em><b class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</b></div>"`;
diff --git a/packages/react/src/text/child.tsx b/packages/react/src/text/child.tsx
index 7c779188aa..5ba05c2d3b 100644
--- a/packages/react/src/text/child.tsx
+++ b/packages/react/src/text/child.tsx
@@ -1,45 +1,36 @@
 import React, { useMemo, ReactNode } from 'react';
-import withDefaults from '../utils/with-defaults';
-import { CSS } from '../theme/stitches.config';
+import { CSS, FontSizes, baseTheme } from '../theme/stitches.config';
 import { SimpleColors, TextTransforms } from '../utils/prop-types';
 import { isNormalColor } from '../utils/color';
 import { ReactRef } from '../utils/refs';
 import { useDOMRef } from '../utils/dom';
-import { __DEV__ } from '../utils/assertion';
 import { StyledText, TextVariantsProps } from './text.styles';
+import { __DEV__ } from '../utils/assertion';
 
 type As = keyof JSX.IntrinsicElements | React.ComponentType<any>;
+type FontSize = number | string | keyof FontSizes;
 
 export interface Props {
   tag: keyof JSX.IntrinsicElements;
   children?: ReactNode;
   color?: SimpleColors | string;
-  size?: string | number;
-  margin?: string | number;
+  size?: FontSize;
   transform?: TextTransforms;
   css?: CSS;
   as?: As;
 }
 
-const defaultProps = {
-  color: 'default' as SimpleColors | string
-};
-
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type TextChildProps = Props &
-  typeof defaultProps &
-  NativeAttrs &
-  TextVariantsProps;
+export type TextChildProps = Props & NativeAttrs & TextVariantsProps;
 
 export const TextChild = React.forwardRef(
   (props: TextChildProps, ref: ReactRef<HTMLElement>) => {
     const {
       children,
       tag,
-      color: userColor,
+      color: userColor = 'default',
       transform,
-      margin: marginProp,
       size,
       css,
       ...otherProps
@@ -47,6 +38,15 @@ export const TextChild = React.forwardRef(
 
     const domRef = useDOMRef(ref);
 
+    const fontSize = useMemo<FontSize>(() => {
+      if (!size) return 'inherit';
+      if (typeof size === 'number') return `${size}px`;
+      if (baseTheme.theme.fontSizes?.[size as keyof FontSizes]) {
+        return `$${size}`;
+      }
+      return size;
+    }, [size]);
+
     const color = useMemo(() => {
       if (isNormalColor(userColor)) {
         switch (userColor) {
@@ -59,18 +59,6 @@ export const TextChild = React.forwardRef(
       return userColor;
     }, [userColor]);
 
-    const fontSize = useMemo<string>(() => {
-      if (!size) return 'inherit';
-      if (typeof size === 'number') return `${size}px`;
-      return size;
-    }, [size]);
-
-    const margin = useMemo<string>(() => {
-      if (!marginProp) return 'inherit';
-      if (typeof marginProp === 'number') return `${size}px`;
-      return marginProp;
-    }, [marginProp]);
-
     return (
       <StyledText
         ref={domRef}
@@ -78,7 +66,6 @@ export const TextChild = React.forwardRef(
         css={{
           color,
           fontSize: size ? fontSize : '',
-          margin,
           tt: transform,
           ...(css as any)
         }}
@@ -96,6 +83,4 @@ if (__DEV__) {
 
 TextChild.toString = () => '.nextui-text-child';
 
-const MemoTextChild = React.memo(TextChild);
-
-export default withDefaults(MemoTextChild, defaultProps);
+export default React.memo(TextChild);
diff --git a/packages/react/src/text/text.tsx b/packages/react/src/text/text.tsx
index 96fd0217f7..9e1514dde7 100644
--- a/packages/react/src/text/text.tsx
+++ b/packages/react/src/text/text.tsx
@@ -1,6 +1,5 @@
 import React, { ReactNode, useMemo } from 'react';
-import withDefaults from '../utils/with-defaults';
-import { SimpleColors, TextTransforms } from '../utils/prop-types';
+import { TextTransforms } from '../utils/prop-types';
 import { ReactRef } from '../utils/refs';
 import { useDOMRef } from '../utils/dom';
 import { __DEV__ } from '../utils/assertion';
@@ -22,35 +21,13 @@ interface Props {
   del?: boolean;
   em?: boolean;
   blockquote?: boolean;
-  size?: string | number;
-  margin?: string | number;
-  color?: SimpleColors | string;
 }
 
-const defaultProps = {
-  h1: false,
-  h2: false,
-  h3: false,
-  h4: false,
-  h5: false,
-  h6: false,
-  b: false,
-  small: false,
-  transform: 'none' as TextTransforms,
-  i: false,
-  span: false,
-  del: false,
-  em: false,
-  blockquote: false,
-  color: 'default' as SimpleColors | string
-};
-
 type ElementMap = { [key in keyof JSX.IntrinsicElements]?: boolean };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
 export type TextProps = Props &
-  typeof defaultProps &
   NativeAttrs &
   Omit<TextChildProps, keyof Props | 'tag'>;
 
@@ -59,7 +36,7 @@ type TextRenderableElements = Array<keyof JSX.IntrinsicElements>;
 const getModifierChild = (
   tags: TextRenderableElements,
   children: ReactNode,
-  size?: string | number,
+  size?: TextChildProps['size'],
   transform?: TextTransforms
 ) => {
   if (!tags.length) return children;
@@ -74,22 +51,21 @@ const getModifierChild = (
 export const Text = React.forwardRef(
   (props: TextProps, ref: ReactRef<HTMLElement>) => {
     const {
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      b,
-      small,
-      i,
-      span,
-      del,
-      em,
-      blockquote,
-      transform,
+      h1 = false,
+      h2 = false,
+      h3 = false,
+      h4 = false,
+      h5 = false,
+      h6 = false,
+      b = false,
+      small = false,
+      i = false,
+      span = false,
+      del = false,
+      em = false,
+      blockquote = false,
+      transform = 'none',
       size,
-      margin,
       children,
       ...otherProps
     } = props;
@@ -138,7 +114,6 @@ export const Text = React.forwardRef(
         ref={domRef}
         transform={transform}
         tag={tag}
-        margin={margin}
         size={size}
         {...otherProps}
       >
@@ -154,6 +129,4 @@ if (__DEV__) {
 
 Text.toString = () => '.nextui-text';
 
-const MemoText = React.memo(Text);
-
-export default withDefaults(MemoText, defaultProps);
+export default React.memo(Text);
diff --git a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
index b10d6fb8ab..1f9f40f469 100644
--- a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Textarea should render correctly 1`] = `"<div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"placeholder\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria9695956609-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`Textarea should render correctly 1`] = `"<div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"placeholder\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
 
-exports[`Textarea should work with different styles 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria9695956609-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria9695956609-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Textarea should work with different styles 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/theme/common.ts b/packages/react/src/theme/common.ts
index 39f3115557..2aedae0225 100644
--- a/packages/react/src/theme/common.ts
+++ b/packages/react/src/theme/common.ts
@@ -13,14 +13,14 @@ export const defaultTokens = {
     md: '1rem',
     lg: '1.125rem',
     xl: '1.25rem',
-    xl2: '1.5rem',
-    xl3: '1.875rem',
-    xl4: '2.25rem',
-    xl5: '3rem',
-    xl6: '3.75rem',
-    xl7: '4.5rem',
-    xl8: '6rem',
-    xl9: '8rem'
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+    '5xl': '3rem',
+    '6xl': '3.75rem',
+    '7xl': '4.5rem',
+    '8xl': '6rem',
+    '9xl': '8rem'
   },
   fontWeights: {
     hairline: 100,
@@ -40,14 +40,14 @@ export const defaultTokens = {
     md: 1.5,
     lg: 1.75,
     xl: 1.75,
-    xl2: 2,
-    xl3: 2.25,
-    xl4: 2.5,
-    xl5: 1,
-    xl6: 1,
-    xl7: 1,
-    xl8: 1,
-    xl9: 1
+    '2xl': 2,
+    '3xl': 2.25,
+    '4xl': 2.5,
+    '5xl': 1,
+    '6xl': 1,
+    '7xl': 1,
+    '8xl': 1,
+    '9xl': 1
   },
   letterSpacings: {
     tighter: '-0.05em',
@@ -64,6 +64,19 @@ export const defaultTokens = {
     md: '1rem',
     lg: '1.25rem',
     xl: '2.25rem',
+    '2xl': '3rem',
+    '3xl': '5rem',
+    '4xl': '10rem',
+    '5xl': '14rem',
+    '6xl': '18rem',
+    '7xl': '24rem',
+    '8xl': '32rem',
+    '9xl': '40rem',
+    min: 'min-content',
+    max: 'max-content',
+    fit: 'fit-content',
+    screen: '100vw',
+    full: '100%',
     px: '1px',
     1: '0.125rem',
     2: '0.25rem',
@@ -106,6 +119,8 @@ export const defaultTokens = {
     base: '14px',
     lg: '14px',
     xl: '18px',
+    '2xl': '24px',
+    '3xl': '32px',
     squared: '33%',
     rounded: '50%',
     pill: '9999px'
diff --git a/packages/react/src/theme/stitches.config.ts b/packages/react/src/theme/stitches.config.ts
index d77de0c7d6..05172233d6 100644
--- a/packages/react/src/theme/stitches.config.ts
+++ b/packages/react/src/theme/stitches.config.ts
@@ -35,6 +35,7 @@ export const keyframes = stitches.keyframes;
 export const getCssText = stitches.getCssText;
 export const theme = stitches.theme;
 export const config = stitches.config;
+export const baseTheme = commonTheme;
 
 export const createTheme = ({ type, theme, className }: Theme) => {
   if (!type) {
@@ -46,6 +47,24 @@ export const createTheme = ({ type, theme, className }: Theme) => {
   );
 };
 
+// stitches types
 export type VariantProps<T> = Stitches.VariantProps<T>;
+export type PropertyValue<T extends keyof Stitches.CSSProperties> =
+  Stitches.PropertyValue<T>;
+export type CSSProperties = Stitches.CSSProperties;
 export type CSS = Stitches.CSS<typeof config>;
 export type StitchesTheme = typeof theme;
+
+// common theme types
+export type Spaces = typeof commonTheme.theme['space'];
+export type FontSizes = typeof commonTheme.theme['fontSizes'];
+export type Fonts = typeof commonTheme.theme['fonts'];
+export type FontWeights = typeof commonTheme.theme['fontWeights'];
+export type LineHeights = typeof commonTheme.theme['lineHeights'];
+export type LetterSpacings = typeof commonTheme.theme['letterSpacings'];
+export type Colors = typeof commonTheme.theme['colors'];
+export type Radii = typeof commonTheme.theme['radii'];
+export type zIndices = typeof commonTheme.theme['zIndices'];
+export type BorderWeights = typeof commonTheme.theme['borderWeights'];
+export type Tranistions = typeof commonTheme.theme['transitions'];
+export type Breakpoints = typeof commonTheme.theme['breakpoints'];

From fd7fd0c4c998a0aed62a0072ec7a506cc99e65fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=90=E1=85=A2=E1=84=8C=E1=85=A2=E1=84=8B=E1=85=A7?=
 =?UTF-8?q?=E1=86=BC?= <tjy970721@gmail.com>
Date: Sun, 19 Jun 2022 14:19:57 +0900
Subject: [PATCH 003/106] fix: variants -> css selector

---
 packages/react/src/switch/switch.styles.ts | 78 ++++++++++++----------
 packages/react/src/switch/switch.tsx       |  1 +
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/packages/react/src/switch/switch.styles.ts b/packages/react/src/switch/switch.styles.ts
index 458a3fdc22..ff59031807 100644
--- a/packages/react/src/switch/switch.styles.ts
+++ b/packages/react/src/switch/switch.styles.ts
@@ -119,8 +119,6 @@ export const StyledSwitchContainer = styled('label', {
   }
 });
 
-export const StyledSwitchInput = styled('input', {}, sharedVisuallyHidden);
-
 export const StyledSwitchCircle = styled('span', {
   position: 'absolute',
   display: 'flex',
@@ -129,7 +127,6 @@ export const StyledSwitchCircle = styled('span', {
   ai: 'center',
   top: 'calc(50% - $$switchHeight * 0.35)',
   left: '0',
-  transform: 'translateX(calc($$switchWidth / 15))',
   transition: 'transform 0.25s ease, width 0.2s ease',
   bg: '$background',
   br: '$pill',
@@ -161,10 +158,6 @@ export const StyledSwitch = styled(
       checked: {
         true: {
           bg: '$$switchColor',
-          [`& ${StyledSwitchCircle}`]: {
-            transform:
-              'translateX(calc($$switchWidth - $$switchWidth / 15 - 100%))'
-          },
           '&:hover:not(&:active)': {
             bg: '$$switchColorHover'
           }
@@ -178,8 +171,6 @@ export const StyledSwitch = styled(
             borderColor: '$$switchColor'
           },
           [`& ${StyledSwitchCircle}`]: {
-            transform:
-              'translateX(calc(($$switchWidth / 15) - ($$switchBorderW / 2)))',
             bg: '$accents2'
           }
         }
@@ -243,31 +234,6 @@ export const StyledSwitch = styled(
           normalShadowVar: '$$switchColorShadow'
         }
       },
-      // animated && !checked
-      {
-        animated: true,
-        checked: false,
-        css: {
-          '&:active': {
-            [`& ${StyledSwitchCircle}`]: {
-              transform: 'translateX(calc($$switchWidth / 7.5))'
-            }
-          }
-        }
-      },
-      // animated && checked
-      {
-        animated: true,
-        checked: true,
-        css: {
-          '&:active': {
-            [`& ${StyledSwitchCircle}`]: {
-              transform:
-                'translateX(calc($$switchWidth - $$switchWidth / 7.5 - 100%))'
-            }
-          }
-        }
-      },
       // checked && bordered
       {
         checked: true,
@@ -279,7 +245,6 @@ export const StyledSwitch = styled(
             borderColor: 'transparent'
           },
           [`& ${StyledSwitchCircle}`]: {
-            left: 'calc(100% - ($$switchWidth / 15) - $$switchHeight * 0.7 + ($$switchBorderW / 2))',
             bg: '$background'
           }
         }
@@ -289,6 +254,49 @@ export const StyledSwitch = styled(
   sharedFocus
 );
 
+export const StyledSwitchInput = styled(
+  'input',
+  {
+    [`& + ${StyledSwitch} > ${StyledSwitchCircle}`]: {
+      transform: 'translateX(calc($$switchWidth / 15))'
+    },
+    [`&:checked + ${StyledSwitch} > ${StyledSwitchCircle}`]: {
+      transform:
+        'translateX(calc($$switchWidth - $$switchWidth / 15 - $$switchHeight * 0.7))'
+    },
+    [`& + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
+      transform: 'translateX(calc($$switchWidth / 7.5))'
+    },
+    [`&:checked + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
+      transform:
+        'translateX(calc($$switchWidth - $$switchWidth / 7.5 - $$switchWidth / 10 - $$switchHeight * 0.7))'
+    },
+    variants: {
+      bordered: {
+        true: {
+          [`& + ${StyledSwitch} > ${StyledSwitchCircle}`]: {
+            transform:
+              'translateX(calc($$switchWidth / 15 - $$switchBorderW / 2))'
+          },
+          [`&:checked + ${StyledSwitch} > ${StyledSwitchCircle}`]: {
+            transform:
+              'translateX(calc($$switchWidth - $$switchWidth / 15 - $$switchBorderW * 1.5 - $$switchHeight * 0.7))'
+          },
+          [`& + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
+            transform:
+              'translateX(calc($$switchWidth / 7.5 - $$switchBorderW / 2))'
+          },
+          [`&:checked + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
+            transform:
+              'translateX(calc($$switchWidth - $$switchWidth / 7.5 - $$switchWidth / 10 - $$switchBorderW * 1.5 - $$switchHeight * 0.7))'
+          }
+        }
+      }
+    }
+  },
+  sharedVisuallyHidden
+);
+
 // types
 export type SwitchVariantsProps = VariantProps<typeof StyledSwitch>;
 export type SwitchContainerVariantsProps = VariantProps<
diff --git a/packages/react/src/switch/switch.tsx b/packages/react/src/switch/switch.tsx
index 1209a77776..e69188f460 100644
--- a/packages/react/src/switch/switch.tsx
+++ b/packages/react/src/switch/switch.tsx
@@ -140,6 +140,7 @@ const Switch: React.FC<SwitchProps> = ({
         className={clsx(`${preClass}-input`)}
         data-state={getState}
         disabled={disabled}
+        bordered={bordered}
         checked={selfChecked}
         onChange={changeHandle}
       />

From aaf7cbd2294e566a8b180d9eda561b7f0533be72 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 19 Jun 2022 12:38:08 -0300
Subject: [PATCH 004/106] refactor(root): eslint config and files changed

---
 .eslintignore                                 |   1 +
 .eslintrc.json                                | 108 +--
 .prettierrc                                   |  12 +-
 package.json                                  |   6 +-
 packages/react/package.json                   |   1 -
 .../react/src/avatar/__tests__/group.test.tsx |  51 +-
 .../react/src/avatar/__tests__/index.test.tsx |  58 +-
 .../react/src/avatar/avatar-group.styles.ts   |  55 +-
 packages/react/src/avatar/avatar-group.tsx    |  28 +-
 packages/react/src/avatar/avatar.stories.tsx  | 172 ++--
 packages/react/src/avatar/avatar.styles.ts    | 384 ++++----
 packages/react/src/avatar/avatar.tsx          | 168 ++--
 packages/react/src/avatar/index.ts            |  14 +-
 .../react/src/backdrop/backdrop.styles.ts     | 185 ++--
 packages/react/src/backdrop/backdrop.tsx      |  88 +-
 packages/react/src/backdrop/index.ts          |  12 +-
 .../react/src/button/__tests__/group.test.tsx |  46 +-
 .../react/src/button/__tests__/icon.test.tsx  |  20 +-
 .../react/src/button/__tests__/index.test.tsx |  80 +-
 .../react/src/button/button-group-context.ts  |   8 +-
 .../react/src/button/button-group.stories.tsx |  32 +-
 .../react/src/button/button-group.styles.ts   | 124 ++-
 packages/react/src/button/button-group.tsx    |  50 +-
 packages/react/src/button/button-icon.tsx     | 101 +-
 packages/react/src/button/button.stories.tsx  | 105 +-
 packages/react/src/button/button.styles.ts    | 875 +++++++++--------
 packages/react/src/button/button.tsx          | 156 ++-
 packages/react/src/button/index.ts            |  20 +-
 packages/react/src/button/utils.tsx           |  55 +-
 .../react/src/card/__tests__/footer.test.tsx  |  22 +-
 .../react/src/card/__tests__/index.test.tsx   |  39 +-
 packages/react/src/card/card.stories.tsx      | 475 ++++-----
 packages/react/src/card/card.styles.ts        | 188 ++--
 packages/react/src/card/card.tsx              |  55 +-
 packages/react/src/card/index.ts              |  22 +-
 packages/react/src/card/use-card.ts           |  63 +-
 .../src/checkbox/__tests__/group.test.tsx     |  67 +-
 .../src/checkbox/__tests__/index.test.tsx     |  76 +-
 .../react/src/checkbox/checkbox-context.ts    |   9 +-
 .../react/src/checkbox/checkbox-group.tsx     |  51 +-
 .../react/src/checkbox/checkbox.stories.tsx   | 159 ++-
 .../react/src/checkbox/checkbox.styles.ts     | 749 +++++++--------
 packages/react/src/checkbox/checkbox.tsx      | 104 +-
 packages/react/src/checkbox/index.ts          |  16 +-
 .../react/src/checkbox/use-checkbox-group.ts  |  41 +-
 packages/react/src/checkbox/use-checkbox.ts   |  63 +-
 .../react/src/code/__tests__/index.test.tsx   |  31 +-
 packages/react/src/code/code.styles.ts        |  10 +-
 packages/react/src/code/code.tsx              |  23 +-
 packages/react/src/code/index.ts              |   8 +-
 .../react/src/col/__tests__/index.test.tsx    |  35 +-
 packages/react/src/col/col.styles.ts          |  12 +-
 packages/react/src/col/col.tsx                |  21 +-
 packages/react/src/col/index.ts               |   8 +-
 .../src/collapse/__tests__/group.test.tsx     |  92 +-
 .../src/collapse/__tests__/index.test.tsx     | 136 ++-
 .../react/src/collapse/collapse-context.ts    |   7 +-
 .../react/src/collapse/collapse-group.tsx     |  43 +-
 packages/react/src/collapse/collapse-icon.tsx |  27 +-
 .../react/src/collapse/collapse.stories.tsx   | 404 ++++----
 .../react/src/collapse/collapse.styles.ts     | 277 +++---
 packages/react/src/collapse/collapse.tsx      | 131 ++-
 packages/react/src/collapse/index.ts          |  16 +-
 .../react/src/container/container.styles.ts   |  44 +-
 packages/react/src/container/container.tsx    |  44 +-
 packages/react/src/container/index.ts         |   8 +-
 .../react/src/css-baseline/css-baseline.tsx   | 351 +++----
 packages/react/src/css-baseline/index.ts      |   2 +-
 .../src/divider/__tests__/index.test.tsx      |  32 +-
 packages/react/src/divider/divider.styles.ts  |  78 +-
 packages/react/src/divider/divider.tsx        |  45 +-
 packages/react/src/divider/index.ts           |  11 +-
 .../src/dropdown/__tests__/index.test.tsx     | 146 +--
 .../src/dropdown/base/dropdown-item-base.tsx  |  15 +-
 .../react/src/dropdown/dropdown-button.tsx    |  46 +-
 .../react/src/dropdown/dropdown-context.tsx   |  16 +-
 packages/react/src/dropdown/dropdown-icon.tsx |  21 +-
 packages/react/src/dropdown/dropdown-item.tsx | 197 ++--
 packages/react/src/dropdown/dropdown-menu.tsx |  73 +-
 .../react/src/dropdown/dropdown-section.tsx   |  71 +-
 .../react/src/dropdown/dropdown-trigger.tsx   |  31 +-
 packages/react/src/dropdown/dropdown-types.ts |  21 +-
 .../react/src/dropdown/dropdown.stories.tsx   | 200 ++--
 .../react/src/dropdown/dropdown.styles.ts     | 458 +++++----
 packages/react/src/dropdown/dropdown.tsx      |  36 +-
 packages/react/src/dropdown/index.ts          |  31 +-
 packages/react/src/dropdown/use-dropdown.ts   |  36 +-
 .../react/src/grid/__tests__/index.test.tsx   |  67 +-
 packages/react/src/grid/grid-container.tsx    |  91 +-
 packages/react/src/grid/grid-item.tsx         | 109 +--
 packages/react/src/grid/grid.stories.tsx      |  40 +-
 packages/react/src/grid/grid.styles.ts        |  14 +-
 packages/react/src/grid/grid.tsx              |  30 +-
 packages/react/src/grid/index.ts              |  17 +-
 .../react/src/image/__tests__/index.test.tsx  |  85 +-
 packages/react/src/image/image.skeleton.tsx   |  35 +-
 packages/react/src/image/image.stories.tsx    |  61 +-
 packages/react/src/image/image.styles.ts      |  64 +-
 packages/react/src/image/image.tsx            | 267 +++--
 packages/react/src/image/index.ts             |  14 +-
 packages/react/src/index.ts                   | 192 ++--
 .../react/src/input/__tests__/index.test.tsx  | 143 +--
 .../src/input/__tests__/password.test.tsx     |  33 +-
 .../src/input/__tests__/use-input.test.tsx    |  38 +-
 packages/react/src/input/index.ts             |  21 +-
 packages/react/src/input/input-password.tsx   |  41 +-
 packages/react/src/input/input-props.ts       |  36 +-
 packages/react/src/input/input.stories.tsx    | 216 ++---
 packages/react/src/input/input.styles.ts      | 909 +++++++++---------
 packages/react/src/input/input.tsx            | 255 +++--
 packages/react/src/input/password-icon.tsx    |  18 +-
 .../react/src/link/__tests__/index.test.tsx   |  36 +-
 packages/react/src/link/icon.tsx              |  19 +-
 packages/react/src/link/index.ts              |   8 +-
 packages/react/src/link/link.stories.tsx      |  42 +-
 packages/react/src/link/link.styles.ts        | 146 +--
 packages/react/src/link/link.tsx              |  29 +-
 .../src/loading/__tests__/index.test.tsx      |  58 +-
 packages/react/src/loading/index.ts           |  16 +-
 .../react/src/loading/loading.stories.tsx     |  38 +-
 packages/react/src/loading/loading.styles.ts  | 548 ++++++-----
 packages/react/src/loading/loading.tsx        |  42 +-
 packages/react/src/loading/spinner.tsx        |  31 +-
 .../react/src/modal/__tests__/index.test.tsx  |  94 +-
 .../src/modal/__tests__/use-modal.test.tsx    |  30 +-
 packages/react/src/modal/index.ts             |  24 +-
 packages/react/src/modal/modal-body.tsx       |  32 +-
 .../react/src/modal/modal-close-button.tsx    |  30 +-
 packages/react/src/modal/modal-context.ts     |   5 +-
 packages/react/src/modal/modal-footer.tsx     |  43 +-
 packages/react/src/modal/modal-header.tsx     |  43 +-
 packages/react/src/modal/modal-wrapper.tsx    |  78 +-
 packages/react/src/modal/modal.stories.tsx    | 814 +++++++---------
 packages/react/src/modal/modal.styles.ts      | 268 +++---
 packages/react/src/modal/modal.tsx            |  80 +-
 packages/react/src/modal/use-modal.ts         |  15 +-
 .../pagination/__tests__/pagination.test.tsx  |  12 +-
 packages/react/src/pagination/index.ts        |  16 +-
 .../src/pagination/pagination-ellipsis.tsx    |  47 +-
 .../src/pagination/pagination-highlight.tsx   |  52 +-
 .../react/src/pagination/pagination-icon.tsx  |  30 +-
 .../react/src/pagination/pagination-item.tsx  |  65 +-
 .../src/pagination/pagination.stories.tsx     |  58 +-
 .../react/src/pagination/pagination.styles.ts | 409 ++++----
 packages/react/src/pagination/pagination.tsx  |  98 +-
 .../src/popover/__tests__/index.test.tsx      |  68 +-
 packages/react/src/popover/index.ts           |  12 +-
 .../react/src/popover/popover-content.tsx     |  96 +-
 packages/react/src/popover/popover-context.ts |  16 +-
 .../react/src/popover/popover-trigger.tsx     |  49 +-
 .../react/src/popover/popover.stories.tsx     |  50 +-
 packages/react/src/popover/popover.styles.ts  | 138 ++-
 packages/react/src/popover/popover.tsx        |  51 +-
 packages/react/src/popover/use-popover.ts     |  70 +-
 packages/react/src/popover/utils.ts           |  93 +-
 .../src/progress/__tests__/index.test.tsx     |  98 +-
 packages/react/src/progress/index.ts          |   8 +-
 .../react/src/progress/progress.stories.tsx   |  56 +-
 .../react/src/progress/progress.styles.ts     | 164 ++--
 packages/react/src/progress/progress.tsx      |  78 +-
 .../react/src/radio/__tests__/index.test.tsx  | 173 ++--
 packages/react/src/radio/index.ts             |  12 +-
 packages/react/src/radio/radio-context.ts     |  18 +-
 packages/react/src/radio/radio-group.tsx      |  48 +-
 packages/react/src/radio/radio.stories.tsx    | 123 +--
 packages/react/src/radio/radio.styles.ts      | 343 ++++---
 packages/react/src/radio/radio.tsx            | 216 ++---
 packages/react/src/radio/use-radio-group.ts   |  33 +-
 packages/react/src/radio/use-radio.ts         |  51 +-
 .../react/src/row/__tests__/index.test.tsx    |  50 +-
 packages/react/src/row/index.ts               |   8 +-
 packages/react/src/row/row.stories.tsx        |  22 +-
 packages/react/src/row/row.styles.ts          |  20 +-
 packages/react/src/row/row.tsx                |  22 +-
 .../src/snippet/__tests__/index.test.tsx      |  76 +-
 packages/react/src/snippet/index.ts           |  10 +-
 packages/react/src/snippet/snippet-icon.tsx   |  26 +-
 packages/react/src/snippet/snippet.styles.ts  | 162 ++--
 packages/react/src/snippet/snippet.tsx        |  87 +-
 .../react/src/spacer/__tests__/index.test.tsx |  25 +-
 packages/react/src/spacer/index.ts            |   8 +-
 packages/react/src/spacer/spacer.stories.tsx  |  37 +-
 packages/react/src/spacer/spacer.styles.ts    |  18 +-
 packages/react/src/spacer/spacer.tsx          |  30 +-
 .../react/src/switch/__tests__/index.test.tsx | 115 +--
 packages/react/src/switch/index.ts            |  13 +-
 packages/react/src/switch/switch.stories.tsx  |  54 +-
 packages/react/src/switch/switch.styles.ts    | 334 ++++---
 packages/react/src/switch/switch.tsx          |  81 +-
 .../react/src/table/__tests__/index.test.tsx  | 186 ++--
 packages/react/src/table/base/index.ts        |  10 +-
 packages/react/src/table/base/table-body.tsx  |   9 +-
 packages/react/src/table/base/table-cell.tsx  |   9 +-
 .../react/src/table/base/table-column.tsx     |  14 +-
 .../react/src/table/base/table-header.tsx     |   8 +-
 packages/react/src/table/base/table-row.tsx   |   9 +-
 packages/react/src/table/index.ts             |  40 +-
 packages/react/src/table/table-body.tsx       | 114 +--
 packages/react/src/table/table-cell.tsx       |  50 +-
 .../react/src/table/table-checkbox-cell.tsx   |  67 +-
 .../react/src/table/table-column-header.tsx   | 111 +--
 packages/react/src/table/table-context.tsx    |  54 +-
 packages/react/src/table/table-footer.tsx     |  27 +-
 packages/react/src/table/table-header-row.tsx |  79 +-
 packages/react/src/table/table-pagination.tsx |  40 +-
 packages/react/src/table/table-row-group.tsx  |  29 +-
 packages/react/src/table/table-row.tsx        |  56 +-
 .../src/table/table-select-all-checkbox.tsx   |  71 +-
 packages/react/src/table/table-sort-icon.tsx  |  38 +-
 packages/react/src/table/table.stories.tsx    | 499 +++++-----
 packages/react/src/table/table.styles.ts      | 605 ++++++------
 packages/react/src/table/table.tsx            | 142 ++-
 packages/react/src/table/utils.ts             |  22 +-
 .../react/src/text/__tests__/index.test.tsx   |  64 +-
 packages/react/src/text/child.tsx             | 116 ++-
 packages/react/src/text/index.ts              |   6 +-
 packages/react/src/text/text.stories.tsx      |  33 +-
 packages/react/src/text/text.styles.ts        |  28 +-
 packages/react/src/text/text.tsx              | 168 ++--
 .../src/textarea/__tests__/index.test.tsx     |  72 +-
 packages/react/src/textarea/index.ts          |   4 +-
 .../react/src/textarea/textarea.stories.tsx   |  90 +-
 packages/react/src/textarea/textarea.tsx      |  83 +-
 packages/react/src/textarea/utils.ts          | 111 +--
 packages/react/src/theme/colors/blue.ts       |  40 +-
 packages/react/src/theme/colors/cyan.ts       |  40 +-
 packages/react/src/theme/colors/gray.ts       |  40 +-
 packages/react/src/theme/colors/green.ts      |  40 +-
 packages/react/src/theme/colors/index.ts      |  16 +-
 packages/react/src/theme/colors/pink.ts       |  40 +-
 packages/react/src/theme/colors/purple.ts     |  40 +-
 packages/react/src/theme/colors/red.ts        |  40 +-
 packages/react/src/theme/colors/yellow.ts     |  40 +-
 packages/react/src/theme/common.ts            | 734 +++++++-------
 packages/react/src/theme/dark-theme.ts        |  96 +-
 packages/react/src/theme/index.ts             |   8 +-
 packages/react/src/theme/light-theme.ts       |  40 +-
 packages/react/src/theme/shared-css.ts        |  62 +-
 packages/react/src/theme/stitches.config.ts   |  61 +-
 packages/react/src/theme/theme-context.ts     |   9 +-
 packages/react/src/theme/theme-provider.tsx   |  54 +-
 packages/react/src/theme/types.ts             |  41 +-
 packages/react/src/theme/utils.ts             | 121 ++-
 .../react/src/tooltip/__test__/index.test.tsx | 115 +--
 packages/react/src/tooltip/index.ts           |  15 +-
 packages/react/src/tooltip/placement.ts       | 162 ++--
 .../react/src/tooltip/tooltip-content.tsx     | 114 +--
 .../react/src/tooltip/tooltip.stories.tsx     | 108 +--
 packages/react/src/tooltip/tooltip.styles.ts  | 188 ++--
 packages/react/src/tooltip/tooltip.tsx        |  62 +-
 .../__tests__/body-scroll.test.tsx            | 137 +--
 packages/react/src/use-body-scroll/index.ts   |   4 +-
 .../src/use-body-scroll/use-body-scroll.ts    |  31 +-
 .../react/src/use-click-anywhere/index.ts     |   2 +-
 .../use-click-anywhere/use-click-anywhere.ts  |   7 +-
 .../__tests__/click-away.test.tsx             |  26 +-
 packages/react/src/use-click-away/index.ts    |   2 +-
 .../src/use-click-away/use-click-away.ts      |  10 +-
 .../__tests__/clipboard.test.tsx              |  50 +-
 packages/react/src/use-clipboard/index.ts     |   4 +-
 .../react/src/use-clipboard/use-clipboard.ts  |  30 +-
 .../__tests__/current-state.test.tsx          |  53 +-
 packages/react/src/use-current-state/index.ts |   2 +-
 .../use-current-state/use-current-state.ts    |  29 +-
 packages/react/src/use-drip/index.ts          |   2 +-
 packages/react/src/use-drip/use-drip.ts       |   9 +-
 .../use-input/__tests__/use-input.test.tsx    |  68 +-
 packages/react/src/use-input/index.ts         |   2 +-
 packages/react/src/use-input/use-input.ts     |   9 +-
 packages/react/src/use-keyboard/codes.ts      |   4 +-
 packages/react/src/use-keyboard/helper.ts     |  29 +-
 packages/react/src/use-keyboard/index.ts      |  10 +-
 .../react/src/use-keyboard/use-keyboard.ts    |  50 +-
 .../__tests__/use-pagination.test.tsx         |  60 +-
 packages/react/src/use-pagination/index.ts    |  35 +-
 packages/react/src/use-portal/index.ts        |   2 +-
 packages/react/src/use-portal/use-portal.ts   |  19 +-
 packages/react/src/use-real-shape/index.ts    |   2 +-
 .../src/use-real-shape/use-real-shape.ts      |  31 +-
 packages/react/src/use-resize/index.ts        |   2 +-
 packages/react/src/use-resize/use-resize.ts   |  13 +-
 packages/react/src/use-ssr/index.ts           |   2 +-
 packages/react/src/use-ssr/use-ssr.ts         |   9 +-
 packages/react/src/use-theme/index.ts         |   2 +-
 packages/react/src/use-theme/use-theme.ts     |  10 +-
 packages/react/src/use-warning/index.ts       |   2 +-
 packages/react/src/use-warning/use-warning.ts |   9 +-
 .../react/src/user/__tests__/index.test.tsx   |  43 +-
 packages/react/src/user/index.ts              |  15 +-
 packages/react/src/user/user-link.tsx         |  30 +-
 packages/react/src/user/user.stories.tsx      |  19 +-
 packages/react/src/user/user.styles.ts        |  78 +-
 packages/react/src/user/user.tsx              | 184 ++--
 packages/react/src/utils/animations.ts        |  44 +-
 packages/react/src/utils/assertion.ts         |  20 +-
 packages/react/src/utils/checkmark.tsx        |  53 +-
 packages/react/src/utils/clear-icon.tsx       |  32 +-
 packages/react/src/utils/clsx.ts              |  16 +-
 packages/react/src/utils/collections.ts       |  48 +-
 packages/react/src/utils/color.ts             |  83 +-
 packages/react/src/utils/console.ts           |  17 +
 packages/react/src/utils/context.ts           |  15 +-
 packages/react/src/utils/css-transition.ts    |  38 +-
 packages/react/src/utils/deep-merge.js        |   8 +-
 packages/react/src/utils/dom.ts               | 102 +-
 packages/react/src/utils/drip.tsx             |  74 +-
 packages/react/src/utils/expand.tsx           |  37 +-
 packages/react/src/utils/icons.tsx            | 449 +++------
 packages/react/src/utils/numbers.ts           |   3 +-
 packages/react/src/utils/object.ts            |  29 +-
 packages/react/src/utils/prop-types.ts        | 303 +++---
 packages/react/src/utils/react.ts             |   7 +-
 packages/react/src/utils/refs.ts              |  11 +-
 packages/react/src/utils/strings.ts           |   4 +-
 packages/react/src/utils/with-defaults.ts     |   8 +-
 tsconfig.json                                 |   3 +
 yarn.lock                                     |  75 +-
 317 files changed, 12465 insertions(+), 13463 deletions(-)
 create mode 100644 packages/react/src/utils/console.ts
 create mode 100644 tsconfig.json

diff --git a/.eslintignore b/.eslintignore
index 547c236843..a81ee2c9b4 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -7,3 +7,4 @@ public/*
 scripts/*
 tests/*
 *.config.js
+.DS_Store
diff --git a/.eslintrc.json b/.eslintrc.json
index bf1a8b6dc9..3290ff3edc 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,89 +1,79 @@
 {
-  "plugins": ["prettier", "@typescript-eslint", "jsx-a11y"],
-  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier", "plugin:jsx-a11y/recommended"],
-  "parser": "@typescript-eslint/parser",
-  "globals": {
-    "JSX": true
-  },
   "env": {
-    "browser": true,
-    "amd": true,
-    "node": true,
-    "jest": true
+    "browser": false,
+    "es2021": true,
+    "node": true
   },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "plugins": ["react", "prettier", "import", "@typescript-eslint", "jsx-a11y"],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
-    }
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
   },
   "settings": {
     "react": {
-      "pragma": "React",
       "version": "detect"
-    },
-    "import/resolver": {
-      "typescript": {
-        "alwaysTryTypes": true
-      }
     }
   },
   "rules": {
-    "object-curly-spacing": ["warn", "always"],
-    "no-unused-vars": [
+    "no-console": "warn",
+    "react/prop-types": "off",
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "prettier/prettier": [
       "warn",
       {
-        "vars": "all",
-        "args": "none"
+        "printWidth": 100,
+        "trailingComma": "all",
+        "tabWidth": 2,
+        "semi": true,
+        "singleQuote": false,
+        "bracketSpacing": false,
+        "arrowParens": "always",
+        "endOfLine":"auto"
       }
     ],
-    "jsx-a11y/no-static-element-interactions": ["warn"],
-    "jsx-a11y/click-events-have-key-events": ["warn"],
     "@typescript-eslint/no-unused-vars": [
       "warn",
       {
-        "vars": "all",
-        "args": "none"
+        "args": "after-used",
+        "ignoreRestSiblings": false,
+        "argsIgnorePattern": "^_.*?$"
       }
     ],
-    "@typescript-eslint/no-explicit-any": [
+    "import/order": ["warn", {
+      "groups": ["type", "builtin", "object", "external", "internal", "parent", "sibling", "index"],
+      "pathGroups": [{
+        "pattern": "~/**",
+        "group": "external",
+        "position": "after"
+      }],
+      "newlines-between": "always"
+    }],
+    "react/self-closing-comp": "warn",
+    "react/jsx-sort-props": [
       "warn",
       {
-        "ignoreRestArgs": true
+        "callbacksLast": true,
+        "shorthandFirst": true,
+        "noSortAlphabetically": false,
+        "reservedFirst": true
       }
     ],
-    "max-len": [
+    "padding-line-between-statements": [
       "warn",
-      {
-        "code": 80,
-        "ignoreStrings": true,
-        "ignoreTemplateLiterals": true,
-        "ignoreComments": true
-      }
-    ],
-    "no-plusplus": [
-      "error",
-      {
-        "allowForLoopAfterthoughts": true
-      }
-    ],
-    "react/jsx-key": "error",
-    "react/jsx-props-no-spreading": "off",
-    "import/prefer-default-export": "off",
-    "react/jsx-boolean-value": "off",
-    "react/prop-types": "off",
-    "react/no-unescaped-entities": "off",
-    "react/jsx-one-expression-per-line": "off",
-    "react/jsx-wrap-multilines": "off",
-    "react/destructuring-assignment": "off",
-    "@typescript-eslint/comma-dangle": [
-      "error",
-      {
-        "arrays": "only-multiline",
-        "objects": "only-multiline",
-        "imports": "only-multiline",
-        "exports": "only-multiline",
-        "functions": "never"
-      }
+      {"blankLine": "always", "prev": "*", "next": "return"},
+      {"blankLine": "always", "prev": ["const", "let", "var"], "next": "*"},
+      {"blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"]}
     ]
   }
 }
diff --git a/.prettierrc b/.prettierrc
index c45da9d8e8..b33506fafc 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,10 @@
 {
-  "printWidth": 80,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "tabWidth": 2
+  "printWidth": 100,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "bracketSpacing": false,
+  "arrowParens": "always",
+  "endOfLine": "auto"
 }
diff --git a/package.json b/package.json
index e898a890a2..76c55787e8 100644
--- a/package.json
+++ b/package.json
@@ -65,12 +65,14 @@
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-flowtype": "^5.7.1",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "graceful-fs": "^4.2.6",
     "http-server": "^0.12.3",
     "lerna": "^4.0.0",
diff --git a/packages/react/package.json b/packages/react/package.json
index 331f649103..19e617ae4e 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -122,7 +122,6 @@
     "cherry-pick": "^0.5.0",
     "css-mediaquery": "^0.1.2",
     "enzyme": "^3.11.0",
-    "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-react": "^7.24.0",
     "execa": "^5.1.1",
     "fs-extra": "^10.0.0",
diff --git a/packages/react/src/avatar/__tests__/group.test.tsx b/packages/react/src/avatar/__tests__/group.test.tsx
index d1d1efb009..b659de02b6 100644
--- a/packages/react/src/avatar/__tests__/group.test.tsx
+++ b/packages/react/src/avatar/__tests__/group.test.tsx
@@ -1,63 +1,68 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { render } from '@testing-library/react';
-import Avatar from '../index';
+import React from "react";
+import {mount, shallow} from "enzyme";
+import {render} from "@testing-library/react";
 
-describe('AvatarGroup', () => {
-  it('should render correctly', () => {
+import Avatar from "../index";
+
+describe("AvatarGroup", () => {
+  it("should render correctly", () => {
     const pictureUsers = [
-      'https://i.pravatar.cc/300?u=a042581f4e29026705d',
-      'https://i.pravatar.cc/300?u=a042581f4e29026706d',
-      'https://i.pravatar.cc/300?u=a042581f4e29026707d',
-      'https://i.pravatar.cc/300?u=a042581f4e29026709d',
-      'https://i.pravatar.cc/300?u=a042581f4f29026709d'
+      "https://i.pravatar.cc/300?u=a042581f4e29026705d",
+      "https://i.pravatar.cc/300?u=a042581f4e29026706d",
+      "https://i.pravatar.cc/300?u=a042581f4e29026707d",
+      "https://i.pravatar.cc/300?u=a042581f4e29026709d",
+      "https://i.pravatar.cc/300?u=a042581f4f29026709d",
     ];
-    const nameUsers = ['Junior', 'Jane', 'W', 'John'];
+    const nameUsers = ["Junior", "Jane", "W", "John"];
     const wrapper = mount(
       <Avatar.Group animated>
         {pictureUsers.map((url, index) => (
-          <Avatar key={index} src={url} bordered stacked />
+          <Avatar key={index} bordered stacked src={url} />
         ))}
-      </Avatar.Group>
+      </Avatar.Group>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
     const rendered = render(
       <Avatar.Group animated={false}>
         {nameUsers.map((name, index) => (
-          <Avatar key={index} text={name} bordered stacked />
+          <Avatar key={index} bordered stacked text={name} />
         ))}
-      </Avatar.Group>
+      </Avatar.Group>,
     );
+
     expect(rendered).toMatchSnapshot();
   });
 
-  it('group component should render all children', () => {
+  it("group component should render all children", () => {
     const group = render(
       <Avatar.Group>
         <Avatar data-testid="avatar-test" text="1" />
         <Avatar data-testid="avatar-test" text="2" />
-      </Avatar.Group>
+      </Avatar.Group>,
     );
 
-    const avatars = group.getAllByTestId('avatar-test');
+    const avatars = group.getAllByTestId("avatar-test");
 
     expect(avatars).toHaveLength(2);
   });
 
-  it('should stacked when avatars are in a group', () => {
+  it("should stacked when avatars are in a group", () => {
     const group = render(
       <Avatar.Group>
         <Avatar text="1" />
         <Avatar text="2" />
-      </Avatar.Group>
+      </Avatar.Group>,
     );
+
     expect(group).toMatchSnapshot();
   });
 
-  it('should show count in group', () => {
+  it("should show count in group", () => {
     const count = 20;
     const group = shallow(<Avatar.Group count={count} />);
-    const text = group.find('.nextui-avatar-group-count').text();
+    const text = group.find(".nextui-avatar-group-count").text();
+
     expect(text).toContain(count);
   });
 });
diff --git a/packages/react/src/avatar/__tests__/index.test.tsx b/packages/react/src/avatar/__tests__/index.test.tsx
index f6597b0c5c..001ebd8196 100644
--- a/packages/react/src/avatar/__tests__/index.test.tsx
+++ b/packages/react/src/avatar/__tests__/index.test.tsx
@@ -1,31 +1,34 @@
-import React from 'react';
-import { mount, render, shallow } from 'enzyme';
-import Avatar from '../index';
+import React from "react";
+import {mount, render, shallow} from "enzyme";
+
+import Avatar from "../index";
 
 interface IconProps {
   className?: string;
 }
 
-const Icon: React.FC<IconProps> = ({ className = '' }) => (
-  <svg className={className} />
-);
+const Icon: React.FC<IconProps> = ({className = ""}) => <svg className={className} />;
 
-describe('Avatar', () => {
-  it('should support square and circle', () => {
+describe("Avatar", () => {
+  it("should support square and circle", () => {
     const circle = shallow(<Avatar />);
+
     expect(() => circle.unmount()).not.toThrow();
     const square = shallow(<Avatar squared />);
+
     expect(() => square.unmount()).not.toThrow();
   });
 
-  it('should render text element', () => {
+  it("should render text element", () => {
     const imageAvatar = render(<Avatar />);
+
     expect(imageAvatar).toMatchSnapshot();
     const textAvatar = render(<Avatar text="text" />);
+
     expect(textAvatar).toMatchSnapshot();
   });
 
-  it('should work with different colors', () => {
+  it("should work with different colors", () => {
     const wrapper = mount(
       <div>
         <Avatar color="primary" />
@@ -33,50 +36,57 @@ describe('Avatar', () => {
         <Avatar color="success" />
         <Avatar color="warning" />
         <Avatar color="error" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with a gradient color', () => {
+  it("should work with a gradient color", () => {
     const wrapper = mount(<Avatar color="gradient" />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with pointer', () => {
+  it("should work with pointer", () => {
     const wrapper = mount(<Avatar pointer />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with zoomed', () => {
+  it("should work with zoomed", () => {
     const wrapper = mount(<Avatar zoomed />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render correctly with an icon', () => {
+  it("should render correctly with an icon", () => {
     const wrapper = mount(<Avatar icon={<Icon />} />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should omit long chars automatically', () => {
+  it("should omit long chars automatically", () => {
     const avatar = mount(<Avatar text="loremipsumtextlarge" />);
-    const text = avatar.find('.nextui-avatar-text').text();
+    const text = avatar.find(".nextui-avatar-text").text();
+
     expect(text.length).toBeLessThan(4);
   });
 
-  it('stacked should be work', () => {
+  it("stacked should be work", () => {
     const avatar = shallow(
-      <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026705d" stacked />
+      <Avatar stacked src="https://i.pravatar.cc/300?u=a042581f4e29026705d" />,
     );
+
     expect(() => avatar.unmount()).not.toThrow();
   });
 
-  it('should work correctly with different sizes', () => {
+  it("should work correctly with different sizes", () => {
     const wrapper = mount(
       <div>
         <Avatar size="xs" />
@@ -84,14 +94,16 @@ describe('Avatar', () => {
         <Avatar size="md" />
         <Avatar size="lg" />
         <Avatar size="xl" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render component of a specified size', () => {
-    const avatar = render(<Avatar css={{ size: 20 }} />);
+  it("should render component of a specified size", () => {
+    const avatar = render(<Avatar css={{size: 20}} />);
+
     expect(avatar).toMatchSnapshot();
   });
 });
diff --git a/packages/react/src/avatar/avatar-group.styles.ts b/packages/react/src/avatar/avatar-group.styles.ts
index 3d1cd0c96e..aa295bd2b1 100644
--- a/packages/react/src/avatar/avatar-group.styles.ts
+++ b/packages/react/src/avatar/avatar-group.styles.ts
@@ -1,43 +1,44 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import Avatar from './avatar.styles';
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledAvatarGroupCount = styled('span', {
-  fontSize: '$xs',
-  display: 'inline-flex',
-  alignItems: 'center',
-  marginLeft: '$3',
-  color: '$text'
+import Avatar from "./avatar.styles";
+
+export const StyledAvatarGroupCount = styled("span", {
+  fontSize: "$xs",
+  display: "inline-flex",
+  alignItems: "center",
+  marginLeft: "$3",
+  color: "$text",
 });
 
-export const StyledAvatarGroup = styled('div', {
-  dflex: 'center',
-  height: 'auto',
-  width: 'max-content',
-  '@motion': {
-    transition: 'none'
+export const StyledAvatarGroup = styled("div", {
+  dflex: "center",
+  height: "auto",
+  width: "max-content",
+  "@motion": {
+    transition: "none",
   },
   [`& ${Avatar}`]: {
-    marginLeft: '-$space$5',
-    transition: '$default',
-    '.only-text-avatar': {
-      boxShadow: '$xs'
-    }
+    marginLeft: "-$space$5",
+    transition: "$default",
+    ".only-text-avatar": {
+      boxShadow: "$xs",
+    },
   },
-  '.only-text-avatar': {
-    boxShadow: '$xs'
+  ".only-text-avatar": {
+    boxShadow: "$xs",
   },
   variants: {
     animated: {
       true: {
         [`& ${Avatar}:hover`]: {
-          transform: 'translate(-$space$5)'
-        }
-      }
-    }
+          transform: "translate(-$space$5)",
+        },
+      },
+    },
   },
   defaultVariants: {
-    animated: true
-  }
+    animated: true,
+  },
 });
 
 export type AvatarGroupVariants = VariantProps<typeof StyledAvatarGroup>;
diff --git a/packages/react/src/avatar/avatar-group.tsx b/packages/react/src/avatar/avatar-group.tsx
index 67fd019f01..c563b2fedc 100644
--- a/packages/react/src/avatar/avatar-group.tsx
+++ b/packages/react/src/avatar/avatar-group.tsx
@@ -1,12 +1,14 @@
-import React, { ReactNode } from 'react';
-import { CSS } from '../theme/stitches.config';
-import { ReactRef } from '../utils/refs';
-import { useDOMRef } from '../utils/dom';
-import { __DEV__ } from '../utils/assertion';
+import React, {ReactNode} from "react";
+
+import {CSS} from "../theme/stitches.config";
+import {ReactRef} from "../utils/refs";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+
 import StyledAvatarGroup, {
   StyledAvatarGroupCount,
-  AvatarGroupVariants
-} from './avatar-group.styles';
+  AvatarGroupVariants,
+} from "./avatar-group.styles";
 
 interface Props {
   count?: number;
@@ -16,13 +18,11 @@ interface Props {
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type AvatarGroupProps = Props &
-  NativeAttrs &
-  AvatarGroupVariants & { css?: CSS };
+export type AvatarGroupProps = Props & NativeAttrs & AvatarGroupVariants & {css?: CSS};
 
 export const AvatarGroup = React.forwardRef(
   (props: AvatarGroupProps, ref: ReactRef<HTMLDivElement>) => {
-    const { count, children, ...otherProps } = props;
+    const {count, children, ...otherProps} = props;
 
     const domRef = useDOMRef(ref);
 
@@ -36,13 +36,13 @@ export const AvatarGroup = React.forwardRef(
         )}
       </StyledAvatarGroup>
     );
-  }
+  },
 );
 
 if (__DEV__) {
-  AvatarGroup.displayName = 'NextUI.AvatarGroup';
+  AvatarGroup.displayName = "NextUI.AvatarGroup";
 }
 
-AvatarGroup.toString = () => '.nextui-avatar-group';
+AvatarGroup.toString = () => ".nextui-avatar-group";
 
 export default AvatarGroup;
diff --git a/packages/react/src/avatar/avatar.stories.tsx b/packages/react/src/avatar/avatar.stories.tsx
index aad1c67773..433efe2324 100644
--- a/packages/react/src/avatar/avatar.stories.tsx
+++ b/packages/react/src/avatar/avatar.stories.tsx
@@ -1,32 +1,34 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Avatar from './index';
-import Spacer from '../spacer';
-import { Lock, User, VolumeUp, Camera, Activity } from '../utils/icons';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import Spacer from "../spacer";
+import {Lock, User, VolumeUp, Camera, Activity} from "../utils/icons";
+
+import Avatar from "./index";
 
 export default {
-  title: 'Display/Avatar',
-  component: Avatar
+  title: "Display/Avatar",
+  component: Avatar,
 } as Meta;
 
-const nameUsers = ['Junior', 'Jane', 'W', 'John', 'JR'];
+const nameUsers = ["Junior", "Jane", "W", "John", "JR"];
 const pictureUsers = [
-  'https://i.pravatar.cc/300?u=a042581f4e29026705d',
-  'https://i.pravatar.cc/300?u=a042581f4e29026706d',
-  'https://i.pravatar.cc/300?u=a042581f4e29026707d',
-  'https://i.pravatar.cc/300?u=a042581f4e29026709d',
-  'https://i.pravatar.cc/300?u=a042581f4f29026709d'
+  "https://i.pravatar.cc/300?u=a042581f4e29026705d",
+  "https://i.pravatar.cc/300?u=a042581f4e29026706d",
+  "https://i.pravatar.cc/300?u=a042581f4e29026707d",
+  "https://i.pravatar.cc/300?u=a042581f4e29026709d",
+  "https://i.pravatar.cc/300?u=a042581f4f29026709d",
 ];
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Container = ({ children }: any) => (
+const Container = ({children}: any) => (
   <div
     style={{
-      display: 'flex',
-      justifyContent: 'space-between',
-      flexWrap: 'wrap',
-      width: '100%',
-      maxWidth: `${children.length * 45}px`
+      display: "flex",
+      justifyContent: "space-between",
+      flexWrap: "wrap",
+      width: "100%",
+      maxWidth: `${children.length * 45}px`,
     }}
   >
     {children}
@@ -41,9 +43,9 @@ export const Default = () => {
       <Avatar text={nameUsers[0]} />
       <Avatar pointer src={pictureUsers[1]} />
       <Avatar text={nameUsers[1]} />
-      <Avatar src={pictureUsers[3]} squared />
-      <Avatar text={nameUsers[3]} squared />
-      <Avatar src={pictureUsers[4]} squared />
+      <Avatar squared src={pictureUsers[3]} />
+      <Avatar squared text={nameUsers[3]} />
+      <Avatar squared src={pictureUsers[4]} />
     </>
   );
 };
@@ -52,27 +54,27 @@ export const Colors = () => {
   return (
     <>
       <Container>
-        <Avatar color="primary" bordered pointer src={pictureUsers[0]} />
-        <Avatar color="secondary" bordered pointer src={pictureUsers[1]} />
-        <Avatar color="success" bordered src={pictureUsers[2]} squared />
-        <Avatar color="warning" bordered src={pictureUsers[3]} squared />
-        <Avatar color="error" bordered src={pictureUsers[4]} squared />
-        <Avatar color="gradient" bordered src={pictureUsers[1]} squared />
+        <Avatar bordered pointer color="primary" src={pictureUsers[0]} />
+        <Avatar bordered pointer color="secondary" src={pictureUsers[1]} />
+        <Avatar bordered squared color="success" src={pictureUsers[2]} />
+        <Avatar bordered squared color="warning" src={pictureUsers[3]} />
+        <Avatar bordered squared color="error" src={pictureUsers[4]} />
+        <Avatar bordered squared color="gradient" src={pictureUsers[1]} />
         <Avatar
           bordered
-          src={pictureUsers[2]}
-          css={{ '.nextui-avatar-bg': { bg: '#ff4ecd' } }}
           squared
+          css={{".nextui-avatar-bg": {bg: "#ff4ecd"}}}
+          src={pictureUsers[2]}
         />
       </Container>
       <Spacer y={2} />
       <Container>
-        <Avatar text={nameUsers[0]} color="primary" pointer />
-        <Avatar text={nameUsers[1]} color="secondary" pointer />
-        <Avatar text={nameUsers[2]} color="success" squared />
-        <Avatar text={nameUsers[3]} color="warning" squared />
-        <Avatar text={nameUsers[0]} color="error" squared />
-        <Avatar text={nameUsers[2]} color="gradient" squared />
+        <Avatar pointer color="primary" text={nameUsers[0]} />
+        <Avatar pointer color="secondary" text={nameUsers[1]} />
+        <Avatar squared color="success" text={nameUsers[2]} />
+        <Avatar squared color="warning" text={nameUsers[3]} />
+        <Avatar squared color="error" text={nameUsers[0]} />
+        <Avatar squared color="gradient" text={nameUsers[2]} />
       </Container>
     </>
   );
@@ -82,13 +84,7 @@ export const Bordered = () => {
   return (
     <Container>
       {pictureUsers.map((url, index) => (
-        <Avatar
-          key={index}
-          squared={index % 2 > 0}
-          bordered
-          pointer
-          src={url}
-        />
+        <Avatar key={index} bordered pointer squared={index % 2 > 0} src={url} />
       ))}
     </Container>
   );
@@ -97,48 +93,12 @@ export const Bordered = () => {
 export const BorderWeights = () => {
   return (
     <Container>
-      <Avatar
-        color="primary"
-        borderWeight="light"
-        bordered
-        pointer
-        src={pictureUsers[0]}
-      />
-      <Avatar
-        borderWeight="normal"
-        color="secondary"
-        bordered
-        pointer
-        src={pictureUsers[1]}
-      />
-      <Avatar
-        color="success"
-        borderWeight="bold"
-        bordered
-        src={pictureUsers[2]}
-        squared
-      />
-      <Avatar
-        color="warning"
-        bordered
-        borderWeight="extrabold"
-        src={pictureUsers[3]}
-        squared
-      />
-      <Avatar
-        color="error"
-        borderWeight="black"
-        bordered
-        src={pictureUsers[4]}
-        squared
-      />
-      <Avatar
-        borderWeight="black"
-        color="gradient"
-        bordered
-        src={pictureUsers[1]}
-        squared
-      />
+      <Avatar bordered pointer borderWeight="light" color="primary" src={pictureUsers[0]} />
+      <Avatar bordered pointer borderWeight="normal" color="secondary" src={pictureUsers[1]} />
+      <Avatar bordered squared borderWeight="bold" color="success" src={pictureUsers[2]} />
+      <Avatar bordered squared borderWeight="extrabold" color="warning" src={pictureUsers[3]} />
+      <Avatar bordered squared borderWeight="black" color="error" src={pictureUsers[4]} />
+      <Avatar bordered squared borderWeight="black" color="gradient" src={pictureUsers[1]} />
     </Container>
   );
 };
@@ -147,25 +107,25 @@ export const Sizes = () => {
   return (
     <div
       style={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column'
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
       }}
     >
       <Container>
-        <Avatar src={pictureUsers[0]} size="xs" />
-        <Avatar src={pictureUsers[1]} size="sm" />
-        <Avatar src={pictureUsers[2]} size="md" />
-        <Avatar src={pictureUsers[3]} size="lg" />
-        <Avatar src={pictureUsers[4]} size="xl" />
+        <Avatar size="xs" src={pictureUsers[0]} />
+        <Avatar size="sm" src={pictureUsers[1]} />
+        <Avatar size="md" src={pictureUsers[2]} />
+        <Avatar size="lg" src={pictureUsers[3]} />
+        <Avatar size="xl" src={pictureUsers[4]} />
       </Container>
       <Spacer />
       <Container>
-        <Avatar squared text={nameUsers[4]} size="xs" />
-        <Avatar squared text={nameUsers[1]} size="sm" />
-        <Avatar squared text={nameUsers[2]} size="md" />
-        <Avatar squared text={nameUsers[3]} size="lg" />
-        <Avatar squared text={nameUsers[0]} size="xl" />
+        <Avatar squared size="xs" text={nameUsers[4]} />
+        <Avatar squared size="sm" text={nameUsers[1]} />
+        <Avatar squared size="md" text={nameUsers[2]} />
+        <Avatar squared size="lg" text={nameUsers[3]} />
+        <Avatar squared size="xl" text={nameUsers[0]} />
       </Container>
     </div>
   );
@@ -175,7 +135,7 @@ export const Zoomed = () => {
   return (
     <Container>
       {pictureUsers.map((url, index) => (
-        <Avatar key={index} size="md" zoomed bordered pointer src={url} />
+        <Avatar key={index} bordered pointer zoomed size="md" src={url} />
       ))}
     </Container>
   );
@@ -184,11 +144,11 @@ export const Zoomed = () => {
 export const Icons = () => {
   return (
     <Container>
-      <Avatar squared icon={<Lock size={20} fill="currentColor" />} />
-      <Avatar squared icon={<Camera size={20} fill="currentColor" />} />
-      <Avatar squared icon={<User size={20} fill="currentColor" />} />
-      <Avatar squared icon={<VolumeUp size={20} fill="currentColor" />} />
-      <Avatar squared icon={<Activity size={20} fill="currentColor" />} />
+      <Avatar squared icon={<Lock fill="currentColor" size={20} />} />
+      <Avatar squared icon={<Camera fill="currentColor" size={20} />} />
+      <Avatar squared icon={<User fill="currentColor" size={20} />} />
+      <Avatar squared icon={<VolumeUp fill="currentColor" size={20} />} />
+      <Avatar squared icon={<Activity fill="currentColor" size={20} />} />
     </Container>
   );
 };
@@ -198,13 +158,13 @@ export const Group = () => {
     <Container>
       <Avatar.Group count={12}>
         {pictureUsers.map((url, index) => (
-          <Avatar key={index} src={url} bordered stacked />
+          <Avatar key={index} bordered stacked src={url} />
         ))}
       </Avatar.Group>
       <Spacer y={2} />
       <Avatar.Group count={12}>
         {nameUsers.map((name, index) => (
-          <Avatar key={index} text={name} bordered stacked />
+          <Avatar key={index} bordered stacked text={name} />
         ))}
       </Avatar.Group>
       <Spacer y={2} />
diff --git a/packages/react/src/avatar/avatar.styles.ts b/packages/react/src/avatar/avatar.styles.ts
index ccbcd00b25..97b43a3dc0 100644
--- a/packages/react/src/avatar/avatar.styles.ts
+++ b/packages/react/src/avatar/avatar.styles.ts
@@ -1,314 +1,314 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import { cssFocusVisible, sharedDialogPopup } from '../theme/shared-css';
+import {styled, VariantProps} from "../theme/stitches.config";
+import {cssFocusVisible, sharedDialogPopup} from "../theme/shared-css";
 
 export const StyledAvatar = styled(
-  'span',
+  "span",
   {
-    dflex: 'center',
-    position: 'relative',
-    zIndex: '$1',
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-    verticalAlign: 'top',
-    cursor: 'auto',
-    transition: 'transform 250ms ease 0ms, box-shadow 0.25s ease 0s',
-    '.nextui-avatar-bg': {
-      position: 'absolute',
+    dflex: "center",
+    position: "relative",
+    zIndex: "$1",
+    boxSizing: "border-box",
+    overflow: "hidden",
+    verticalAlign: "top",
+    cursor: "auto",
+    transition: "transform 250ms ease 0ms, box-shadow 0.25s ease 0s",
+    ".nextui-avatar-bg": {
+      position: "absolute",
       top: 0,
       left: 0,
       right: 0,
       bottom: 0,
-      zIndex: '$2',
-      transition: '$avatar',
-      size: '100%'
+      zIndex: "$2",
+      transition: "$avatar",
+      size: "100%",
     },
-    '&:hover .nextui-avatar-bg': {
-      boxShadow: ' inset 0 0 40px 0 rgb(0 0 0 / 14%)'
+    "&:hover .nextui-avatar-bg": {
+      boxShadow: " inset 0 0 40px 0 rgb(0 0 0 / 14%)",
     },
-    '.nextui-avatar-img': {
+    ".nextui-avatar-img": {
       opacity: 0,
-      zIndex: '$3',
-      display: 'flex',
-      bg: '$background',
-      transition: 'transform 250ms ease 0ms, opacity 200ms ease-in 0ms',
-      width: '100%',
-      height: '100%',
-      objectFit: 'cover'
+      zIndex: "$3",
+      display: "flex",
+      bg: "$background",
+      transition: "transform 250ms ease 0ms, opacity 200ms ease-in 0ms",
+      width: "100%",
+      height: "100%",
+      objectFit: "cover",
     },
     '&[data-state="ready"] .nextui-avatar-img': {
-      opacity: 1
+      opacity: 1,
     },
-    '.nextui-avatar-icon': {
-      display: 'flex',
-      position: 'absolute',
-      left: '50%',
-      top: '50%',
-      ta: 'center',
-      zIndex: '$2',
-      transform: 'translate(-50%, -50%)',
-      whiteSpace: 'nowrap',
-      us: 'none'
+    ".nextui-avatar-icon": {
+      display: "flex",
+      position: "absolute",
+      left: "50%",
+      top: "50%",
+      ta: "center",
+      zIndex: "$2",
+      transform: "translate(-50%, -50%)",
+      whiteSpace: "nowrap",
+      us: "none",
     },
-    '.nextui-avatar-text': {
-      position: 'absolute',
-      zIndex: '$2',
-      left: '50%',
-      top: '50%',
-      ta: 'center',
-      color: '$text',
-      fontWeight: '$medium',
-      transform: 'translate(-50%, -50%) scale(0.65)',
-      whiteSpace: 'nowrap',
-      us: 'none'
+    ".nextui-avatar-text": {
+      position: "absolute",
+      zIndex: "$2",
+      left: "50%",
+      top: "50%",
+      ta: "center",
+      color: "$text",
+      fontWeight: "$medium",
+      transform: "translate(-50%, -50%) scale(0.65)",
+      whiteSpace: "nowrap",
+      us: "none",
     },
-    '@motion': {
-      transition: 'none',
-      '.nextui-avatar-bg, .nextui-avatar-img': {
-        transition: 'none'
-      }
+    "@motion": {
+      transition: "none",
+      ".nextui-avatar-bg, .nextui-avatar-img": {
+        transition: "none",
+      },
     },
     variants: {
       color: {
         default: {
-          '.nextui-avatar-bg': {
-            bg: '$accents2'
-          }
+          ".nextui-avatar-bg": {
+            bg: "$accents2",
+          },
         },
         primary: {
-          '.nextui-avatar-bg': {
-            bg: '$primary'
-          }
+          ".nextui-avatar-bg": {
+            bg: "$primary",
+          },
         },
         secondary: {
-          '.nextui-avatar-bg': {
-            bg: '$secondary'
-          }
+          ".nextui-avatar-bg": {
+            bg: "$secondary",
+          },
         },
         success: {
-          '.nextui-avatar-bg': {
-            bg: '$success'
-          }
+          ".nextui-avatar-bg": {
+            bg: "$success",
+          },
         },
         warning: {
-          '.nextui-avatar-bg': {
-            bg: '$warning'
-          }
+          ".nextui-avatar-bg": {
+            bg: "$warning",
+          },
         },
         error: {
-          '.nextui-avatar-bg': {
-            bg: '$error'
-          }
+          ".nextui-avatar-bg": {
+            bg: "$error",
+          },
         },
         gradient: {
-          '.nextui-avatar-bg': {
-            bg: '$gradient'
-          }
-        }
+          ".nextui-avatar-bg": {
+            bg: "$gradient",
+          },
+        },
       },
       textColor: {
         default: {
-          '.nextui-avatar-text': {
-            color: '$text'
-          }
+          ".nextui-avatar-text": {
+            color: "$text",
+          },
         },
         white: {
-          '.nextui-avatar-text': {
-            color: '$white'
-          }
+          ".nextui-avatar-text": {
+            color: "$white",
+          },
         },
         primary: {
-          '.nextui-avatar-text': {
-            color: '$primary'
-          }
+          ".nextui-avatar-text": {
+            color: "$primary",
+          },
         },
         secondary: {
-          '.nextui-avatar-text': {
-            color: '$secondary'
-          }
+          ".nextui-avatar-text": {
+            color: "$secondary",
+          },
         },
         success: {
-          '.nextui-avatar-text': {
-            color: '$success'
-          }
+          ".nextui-avatar-text": {
+            color: "$success",
+          },
         },
         warning: {
-          '.nextui-avatar-text': {
-            color: '$warning'
-          }
+          ".nextui-avatar-text": {
+            color: "$warning",
+          },
         },
         error: {
-          '.nextui-avatar-text': {
-            color: '$error'
-          }
-        }
+          ".nextui-avatar-text": {
+            color: "$error",
+          },
+        },
       },
       size: {
         xs: {
-          $$avatarXs: '$space$9',
-          sizeMin: '$$avatarXs',
-          '.nextui-avatar-text': {
-            fontSize: '$sm'
-          }
+          $$avatarXs: "$space$9",
+          sizeMin: "$$avatarXs",
+          ".nextui-avatar-text": {
+            fontSize: "$sm",
+          },
         },
         sm: {
-          $$avatarSm: '$space$11',
-          sizeMin: '$$avatarSm',
-          '.nextui-avatar-text': {
-            fontSize: '$md'
-          }
+          $$avatarSm: "$space$11",
+          sizeMin: "$$avatarSm",
+          ".nextui-avatar-text": {
+            fontSize: "$md",
+          },
         },
         md: {
-          $$avatarMd: '$space$14',
-          sizeMin: '$$avatarMd',
-          '.nextui-avatar-text': {
-            fontSize: '$lg'
-          }
+          $$avatarMd: "$space$14",
+          sizeMin: "$$avatarMd",
+          ".nextui-avatar-text": {
+            fontSize: "$lg",
+          },
         },
         lg: {
-          $$avatarLg: '$space$16',
-          sizeMin: '$$avatarLg',
-          '.nextui-avatar-text': {
-            fontSize: '$xl'
-          }
+          $$avatarLg: "$space$16",
+          sizeMin: "$$avatarLg",
+          ".nextui-avatar-text": {
+            fontSize: "$xl",
+          },
         },
         xl: {
-          $$avatarXl: '$space$18',
-          sizeMin: '$$avatarXl',
-          '.nextui-avatar-text': {
-            fontSize: '$2xl'
-          }
-        }
+          $$avatarXl: "$space$18",
+          sizeMin: "$$avatarXl",
+          ".nextui-avatar-text": {
+            fontSize: "$2xl",
+          },
+        },
       },
       borderWeight: {
         light: {
-          '.nextui-avatar-img': {
-            borderWidth: '$light'
-          }
+          ".nextui-avatar-img": {
+            borderWidth: "$light",
+          },
         },
         normal: {
-          '.nextui-avatar-img': {
-            borderWidth: '$normal'
-          }
+          ".nextui-avatar-img": {
+            borderWidth: "$normal",
+          },
         },
         bold: {
-          '.nextui-avatar-img': {
-            borderWidth: '$normal'
-          }
+          ".nextui-avatar-img": {
+            borderWidth: "$normal",
+          },
         },
         extrabold: {
-          '.nextui-avatar-img': {
-            borderWidth: '$normal'
-          }
+          ".nextui-avatar-img": {
+            borderWidth: "$normal",
+          },
         },
         black: {
-          '.nextui-avatar-img': {
-            borderWidth: '$normal'
-          }
-        }
+          ".nextui-avatar-img": {
+            borderWidth: "$normal",
+          },
+        },
       },
       bordered: {
         true: {
-          '&:hover:not(.only-text-avatar) .nextui-avatar-bg': {
-            opacity: '0.6'
+          "&:hover:not(.only-text-avatar) .nextui-avatar-bg": {
+            opacity: "0.6",
+          },
+          ".nextui-avatar-img": {
+            borderStyle: "solid",
+            borderColor: "$background",
           },
-          '.nextui-avatar-img': {
-            borderStyle: 'solid',
-            borderColor: '$background'
-          }
-        }
+        },
       },
       stacked: {
         true: {
-          ml: '-$5'
-        }
+          ml: "-$5",
+        },
       },
       pointer: {
         true: {
-          cursor: 'pointer'
-        }
+          cursor: "pointer",
+        },
       },
       rounded: {
         true: {
-          borderRadius: '$rounded',
-          '.nextui-avatar-img': {
-            borderRadius: '$rounded'
-          }
-        }
+          borderRadius: "$rounded",
+          ".nextui-avatar-img": {
+            borderRadius: "$rounded",
+          },
+        },
       },
       squared: {
         true: {
-          borderRadius: '$squared',
-          '.nextui-avatar-img': {
-            borderRadius: '$squared'
-          }
-        }
+          borderRadius: "$squared",
+          ".nextui-avatar-img": {
+            borderRadius: "$squared",
+          },
+        },
       },
       zoomed: {
         true: {
-          '&:hover .nextui-avatar-img': {
-            transform: 'scale(1.125)'
-          }
-        }
-      }
+          "&:hover .nextui-avatar-img": {
+            transform: "scale(1.125)",
+          },
+        },
+      },
     },
     compoundVariants: [
       // bordered / borderWeight
       {
         bordered: true,
-        borderWeight: 'light',
+        borderWeight: "light",
         css: {
-          padding: 'calc($1/2)'
-        }
+          padding: "calc($1/2)",
+        },
       },
       {
         bordered: true,
-        borderWeight: 'normal',
+        borderWeight: "normal",
         css: {
-          padding: '$1'
-        }
+          padding: "$1",
+        },
       },
       {
         bordered: true,
-        borderWeight: 'bold',
+        borderWeight: "bold",
         css: {
-          padding: 'calc($2/1.5)'
-        }
+          padding: "calc($2/1.5)",
+        },
       },
       {
         bordered: true,
-        borderWeight: 'extrabold',
+        borderWeight: "extrabold",
         css: {
-          padding: '$2'
-        }
+          padding: "$2",
+        },
       },
       {
         bordered: true,
-        borderWeight: 'black',
+        borderWeight: "black",
         css: {
-          padding: 'calc($3/1.5)'
-        }
+          padding: "calc($3/1.5)",
+        },
       },
       {
         rounded: true,
         squared: true,
         css: {
-          borderRadius: '$squared',
-          '.nextui-avatar-img': {
-            borderRadius: '$squared'
-          }
-        }
-      }
+          borderRadius: "$squared",
+          ".nextui-avatar-img": {
+            borderRadius: "$squared",
+          },
+        },
+      },
     ],
     defaultVariants: {
-      size: 'md',
+      size: "md",
       rounded: true,
-      color: 'default',
-      textColor: 'default',
-      borderWeight: 'normal'
-    }
+      color: "default",
+      textColor: "default",
+      borderWeight: "normal",
+    },
   },
   cssFocusVisible,
-  sharedDialogPopup
+  sharedDialogPopup,
 );
 
 export type AvatarVariantsProps = VariantProps<typeof StyledAvatar>;
diff --git a/packages/react/src/avatar/avatar.tsx b/packages/react/src/avatar/avatar.tsx
index 8d569bc1e1..cce3aec688 100644
--- a/packages/react/src/avatar/avatar.tsx
+++ b/packages/react/src/avatar/avatar.tsx
@@ -1,14 +1,17 @@
-import React, { useMemo, useState, useRef, useEffect } from 'react';
-import { useFocusRing } from '@react-aria/focus';
-import type { FocusRingAria } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import AvatarGroup from './avatar-group';
-import { CSS } from '../theme/stitches.config';
-import { ReactRef } from '../utils/refs';
-import { useDOMRef } from '../utils/dom';
-import { __DEV__ } from '../utils/assertion';
-import StyledAvatar, { AvatarVariantsProps } from './avatar.styles';
-import clsx from '../utils/clsx';
+import type {FocusRingAria} from "@react-aria/focus";
+
+import {useFocusRing} from "@react-aria/focus";
+import React, {useMemo, useState, useRef, useEffect} from "react";
+import {mergeProps} from "@react-aria/utils";
+
+import {CSS} from "../theme/stitches.config";
+import {ReactRef} from "../utils/refs";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+import clsx from "../utils/clsx";
+
+import StyledAvatar, {AvatarVariantsProps} from "./avatar.styles";
+import AvatarGroup from "./avatar-group";
 
 interface Props {
   text?: string;
@@ -21,12 +24,10 @@ interface Props {
 
 type NativeAttrs = Omit<
   Partial<React.ImgHTMLAttributes<unknown> & React.HTMLAttributes<unknown>>,
-  keyof Props | 'sizes'
+  keyof Props | "sizes"
 >;
 
-export type AvatarProps = Props &
-  AvatarVariantsProps &
-  NativeAttrs & { css?: CSS };
+export type AvatarProps = Props & AvatarVariantsProps & NativeAttrs & {css?: CSS};
 
 interface IFocusRingAria extends FocusRingAria {
   focusProps: Omit<React.HTMLAttributes<HTMLElement>, keyof AvatarProps>;
@@ -34,86 +35,83 @@ interface IFocusRingAria extends FocusRingAria {
 
 const safeText = (text: string): string => {
   if (text?.length <= 4) return text;
+
   return text?.slice(0, 3);
 };
 
-export const Avatar = React.forwardRef(
-  (props: AvatarProps, ref: ReactRef<HTMLSpanElement>) => {
-    const { as, src, css, text, icon, alt, className, ...otherProps } = props;
-
-    const domRef = useDOMRef(ref);
-
-    const showText = !src;
-    const [ready, setReady] = useState(false);
-
-    const imgRef = useRef<HTMLImageElement>(null);
-
-    const { isFocusVisible, focusProps }: IFocusRingAria = useFocusRing();
-
-    useEffect(() => {
-      imgRef?.current?.complete && setReady(true);
-    }, []);
-
-    const getState = useMemo(() => {
-      return !ready && src ? 'loading' : 'ready';
-    }, [src, ready]);
-
-    return (
-      <StyledAvatar
-        ref={domRef}
-        as={as}
-        {...mergeProps(otherProps, focusProps)}
-        className={clsx(
-          {
-            'only-text-avatar': showText
-          },
-          className
-        )}
-        data-state={getState}
-        isFocusVisible={isFocusVisible}
-        css={mergeProps(
-          as === 'button'
-            ? {
-                // reset button styles
-                appearance: 'none',
-                outline: 'none',
-                border: 'none',
-                cursor: 'pointer'
-              }
-            : {},
-          css as any
-        )}
-      >
-        <span className="nextui-avatar-bg" />
-        {!showText && (
-          <img
-            ref={imgRef}
-            className={clsx('nextui-avatar-img', `nextui-avatar--${getState}`, {
-              'nextui-avatar-ready': ready
-            })}
-            src={src}
-            alt={alt}
-            data-state={getState}
-            onLoad={() => setReady(true)}
-          />
-        )}
-        {showText && !icon && text && (
-          <span className="nextui-avatar-text">{safeText(text)}</span>
-        )}
-        {icon && <span className="nextui-avatar-icon">{icon}</span>}
-      </StyledAvatar>
-    );
-  }
-);
+export const Avatar = React.forwardRef((props: AvatarProps, ref: ReactRef<HTMLSpanElement>) => {
+  const {as, src, css, text, icon, alt, className, ...otherProps} = props;
+
+  const domRef = useDOMRef(ref);
+
+  const showText = !src;
+  const [ready, setReady] = useState(false);
+
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  const {isFocusVisible, focusProps}: IFocusRingAria = useFocusRing();
+
+  useEffect(() => {
+    imgRef?.current?.complete && setReady(true);
+  }, []);
+
+  const getState = useMemo(() => {
+    return !ready && src ? "loading" : "ready";
+  }, [src, ready]);
+
+  return (
+    <StyledAvatar
+      ref={domRef}
+      as={as}
+      {...mergeProps(otherProps, focusProps)}
+      className={clsx(
+        {
+          "only-text-avatar": showText,
+        },
+        className,
+      )}
+      css={mergeProps(
+        as === "button"
+          ? {
+              // reset button styles
+              appearance: "none",
+              outline: "none",
+              border: "none",
+              cursor: "pointer",
+            }
+          : {},
+        css as any,
+      )}
+      data-state={getState}
+      isFocusVisible={isFocusVisible}
+    >
+      <span className="nextui-avatar-bg" />
+      {!showText && (
+        <img
+          ref={imgRef}
+          alt={alt}
+          className={clsx("nextui-avatar-img", `nextui-avatar--${getState}`, {
+            "nextui-avatar-ready": ready,
+          })}
+          data-state={getState}
+          src={src}
+          onLoad={() => setReady(true)}
+        />
+      )}
+      {showText && !icon && text && <span className="nextui-avatar-text">{safeText(text)}</span>}
+      {icon && <span className="nextui-avatar-icon">{icon}</span>}
+    </StyledAvatar>
+  );
+});
 
 type AvatarComponent<P = {}> = React.NamedExoticComponent<P> & {
   Group: typeof AvatarGroup;
 };
 
 if (__DEV__) {
-  Avatar.displayName = 'NextUI.Avatar';
+  Avatar.displayName = "NextUI.Avatar";
 }
 
-Avatar.toString = () => '.nextui-avatar';
+Avatar.toString = () => ".nextui-avatar";
 
 export default Avatar as AvatarComponent<AvatarProps>;
diff --git a/packages/react/src/avatar/index.ts b/packages/react/src/avatar/index.ts
index ccd662a528..a80c21b534 100644
--- a/packages/react/src/avatar/index.ts
+++ b/packages/react/src/avatar/index.ts
@@ -1,12 +1,12 @@
-import Avatar from './avatar';
-import AvatarGroup from './avatar-group';
+import Avatar from "./avatar";
+import AvatarGroup from "./avatar-group";
 
-export type { AvatarProps } from './avatar';
-export type { AvatarGroupProps } from './avatar-group';
+export type {AvatarProps} from "./avatar";
+export type {AvatarGroupProps} from "./avatar-group";
 
-export { StyledAvatar } from './avatar.styles';
-export { StyledAvatarGroup } from './avatar-group.styles';
-export { StyledAvatarGroupCount } from './avatar-group.styles';
+export {StyledAvatar} from "./avatar.styles";
+export {StyledAvatarGroup} from "./avatar-group.styles";
+export {StyledAvatarGroupCount} from "./avatar-group.styles";
 
 Avatar.Group = AvatarGroup;
 
diff --git a/packages/react/src/backdrop/backdrop.styles.ts b/packages/react/src/backdrop/backdrop.styles.ts
index 078144db63..9b1526cc94 100644
--- a/packages/react/src/backdrop/backdrop.styles.ts
+++ b/packages/react/src/backdrop/backdrop.styles.ts
@@ -1,151 +1,150 @@
-import { styled, keyframes, VariantProps } from '../theme/stitches.config';
+import {styled, keyframes, VariantProps} from "../theme/stitches.config";
 
 const appearanceIn = keyframes({
-  '0%': {
-    opacity: 0
+  "0%": {
+    opacity: 0,
   },
-  '60%': {
-    opacity: 0.75
+  "60%": {
+    opacity: 0.75,
+  },
+  "100%": {
+    opacity: 1,
   },
-  '100%': {
-    opacity: 1
-  }
 });
 
-export const StyledBackdropContent = styled('div', {
-  position: 'relative',
-  display: 'inline-block',
-  zIndex: '$max',
-  outline: 'none',
-  width: '100%',
-  margin: '$9 auto',
-  verticalAlign: 'middle',
-  '@sm': {
-    width: '90%',
-    maxWidth: '90%'
+export const StyledBackdropContent = styled("div", {
+  position: "relative",
+  display: "inline-block",
+  zIndex: "$max",
+  outline: "none",
+  width: "100%",
+  margin: "$9 auto",
+  verticalAlign: "middle",
+  "@sm": {
+    width: "90%",
+    maxWidth: "90%",
   },
   variants: {
     animated: {
       true: {
-        '&': {
+        "&": {
           animationName: appearanceIn,
-          animationDuration: '200ms',
-          animationTimingFunction: 'ease-in',
-          animationDirection: 'normal'
-        }
+          animationDuration: "200ms",
+          animationTimingFunction: "ease-in",
+          animationDirection: "normal",
+        },
       },
       false: {
-        transition: 'none'
-      }
-    }
-  }
+        transition: "none",
+      },
+    },
+  },
 });
 
-export const StyledBackdropLayer = styled('div', {
-  position: 'fixed',
+export const StyledBackdropLayer = styled("div", {
+  position: "fixed",
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  size: '100%',
-  pe: 'none',
-  zIndex: '$max',
-  '@motion': {
-    transition: 'none'
+  size: "100%",
+  pe: "none",
+  zIndex: "$max",
+  "@motion": {
+    transition: "none",
   },
   variants: {
     blur: {
       true: {
-        bg: '$black',
-        opacity: '$$backdropOpacity',
-        transition: 'opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
-        '@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))':
-          {
-            opacity: 1,
-            transition: 'background 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
-            backdropFilter: 'saturate(180%) blur(20px)',
-            bg: 'rgba(0, 0, 0, 0.1)'
-          }
+        bg: "$black",
+        opacity: "$$backdropOpacity",
+        transition: "opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1)",
+        "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
+          opacity: 1,
+          transition: "background 0.35s cubic-bezier(0.4, 0, 0.2, 1)",
+          backdropFilter: "saturate(180%) blur(20px)",
+          bg: "rgba(0, 0, 0, 0.1)",
+        },
       },
       false: {
-        bg: '$black',
-        opacity: '$$backdropOpacity',
-        transition: 'opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1)'
-      }
+        bg: "$black",
+        opacity: "$$backdropOpacity",
+        transition: "opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1)",
+      },
     },
     animated: {
       false: {
-        transition: 'none'
-      }
-    }
-  }
+        transition: "none",
+      },
+    },
+  },
 });
 
-export const StyledBackdrop = styled('div', {
-  position: 'fixed',
+export const StyledBackdrop = styled("div", {
+  position: "fixed",
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  overflow: 'auto',
-  zIndex: '$max',
-  WebkitOverflowScrolling: 'touch',
-  boxSizing: 'border-box',
-  textAlign: 'center',
-  '&:before': {
-    content: '',
-    display: 'inline-block',
+  overflow: "auto",
+  zIndex: "$max",
+  WebkitOverflowScrolling: "touch",
+  boxSizing: "border-box",
+  textAlign: "center",
+  "&:before": {
+    content: "",
+    display: "inline-block",
     width: 0,
-    height: '100%',
-    verticalAlign: 'middle'
+    height: "100%",
+    verticalAlign: "middle",
   },
-  '.nextui-backdrop-wrapper-enter .nextui-backdrop-layer-default': {
-    opacity: 0
+  ".nextui-backdrop-wrapper-enter .nextui-backdrop-layer-default": {
+    opacity: 0,
   },
-  '.nextui-backdrop-wrapper-enter-active .nextui-backdrop-layer-default': {
-    opacity: '$$backdropOpacity'
+  ".nextui-backdrop-wrapper-enter-active .nextui-backdrop-layer-default": {
+    opacity: "$$backdropOpacity",
   },
 
-  '.nextui-backdrop-wrapper-leave .nextui-backdrop-layer-default': {
-    opacity: '$$backdropOpacity'
+  ".nextui-backdrop-wrapper-leave .nextui-backdrop-layer-default": {
+    opacity: "$$backdropOpacity",
   },
-  '.nextui-backdrop-wrapper-leave-active .nextui-backdrop-layer-default': {
-    opacity: 0
+  ".nextui-backdrop-wrapper-leave-active .nextui-backdrop-layer-default": {
+    opacity: 0,
   },
 
-  '.nextui-backdrop-wrapper-enter .nextui-backdrop-layer-blur': {
-    bg: 'rgba(0, 0, 0, 0.1)'
+  ".nextui-backdrop-wrapper-enter .nextui-backdrop-layer-blur": {
+    bg: "rgba(0, 0, 0, 0.1)",
   },
-  '.nextui-backdrop-wrapper-enter-active .nextui-backdrop-layer-blur': {
-    bg: 'rgba(0, 0, 0, 0.4)'
+  ".nextui-backdrop-wrapper-enter-active .nextui-backdrop-layer-blur": {
+    bg: "rgba(0, 0, 0, 0.4)",
   },
 
-  '.nextui-backdrop-wrapper-leave .nextui-backdrop-layer-blur': {
-    bg: 'rgba(0, 0, 0, 0.4)'
+  ".nextui-backdrop-wrapper-leave .nextui-backdrop-layer-blur": {
+    bg: "rgba(0, 0, 0, 0.4)",
   },
-  '.nextui-backdrop-wrapper-leave-active .nextui-backdrop-layer-blur': {
-    bg: 'rgba(0, 0, 0, 0.1)'
+  ".nextui-backdrop-wrapper-leave-active .nextui-backdrop-layer-blur": {
+    bg: "rgba(0, 0, 0, 0.1)",
   },
   variants: {
     fullScreen: {
       true: {
-        display: 'inline-flex',
-        overflow: 'hidden',
+        display: "inline-flex",
+        overflow: "hidden",
         [`& ${StyledBackdropContent}`]: {
-          width: '100vw',
-          maxWidth: '100vw',
-          height: '100vh',
-          margin: 0
+          width: "100vw",
+          maxWidth: "100vw",
+          height: "100vh",
+          margin: 0,
         },
         [`& ${StyledBackdropLayer}`]: {
-          display: 'none'
-        }
-      }
-    }
+          display: "none",
+        },
+      },
+    },
   },
   defaultVariants: {
-    fullScreen: false
-  }
+    fullScreen: false,
+  },
 });
 
 export type BackdropVariantsProps = VariantProps<typeof StyledBackdrop>;
diff --git a/packages/react/src/backdrop/backdrop.tsx b/packages/react/src/backdrop/backdrop.tsx
index b46fa19105..6b47796c39 100644
--- a/packages/react/src/backdrop/backdrop.tsx
+++ b/packages/react/src/backdrop/backdrop.tsx
@@ -1,18 +1,20 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { MouseEvent, useCallback, useMemo } from 'react';
-import withDefaults from '../utils/with-defaults';
-import CSSTransition from '../utils/css-transition';
-import { CSS } from '../theme/stitches.config';
-import useCurrentState from '../use-current-state';
-import cslx from '../utils/clsx';
-import useKeyboard, { KeyCode } from '../use-keyboard';
+import React, {MouseEvent, useCallback, useMemo} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import CSSTransition from "../utils/css-transition";
+import {CSS} from "../theme/stitches.config";
+import useCurrentState from "../use-current-state";
+import cslx from "../utils/clsx";
+import useKeyboard, {KeyCode} from "../use-keyboard";
+import {__DEV__} from "../utils/assertion";
+
 import {
   StyledBackdrop,
   StyledBackdropLayer,
   StyledBackdropContent,
-  BackdropVariantsProps
-} from './backdrop.styles';
-import { __DEV__ } from '../utils/assertion';
+  BackdropVariantsProps,
+} from "./backdrop.styles";
 
 interface Props {
   onClick?: (event: MouseEvent<HTMLElement>) => void;
@@ -35,17 +37,14 @@ const defaultProps = {
   animated: true,
   preventDefault: true,
   opacity: 0.5,
-  className: ''
+  className: "",
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type BackdropProps = Props &
-  typeof defaultProps &
-  NativeAttrs &
-  BackdropVariantsProps;
+export type BackdropProps = Props & typeof defaultProps & NativeAttrs & BackdropVariantsProps;
 
-const preClass = 'nextui-backdrop';
+const preClass = "nextui-backdrop";
 
 const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
   ({
@@ -62,18 +61,14 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
     css,
     ...props
   }) => {
-    const [, setIsContentMouseDown, IsContentMouseDownRef] =
-      useCurrentState(false);
+    const [, setIsContentMouseDown, IsContentMouseDownRef] = useCurrentState(false);
     const clickHandler = (event: MouseEvent<HTMLElement>) => {
       if (IsContentMouseDownRef.current) return;
       onClick && onClick(event);
     };
-    const childrenClickHandler = useCallback(
-      (event: MouseEvent<HTMLElement>) => {
-        event.stopPropagation();
-      },
-      []
-    );
+    const childrenClickHandler = useCallback((event: MouseEvent<HTMLElement>) => {
+      event.stopPropagation();
+    }, []);
     const mouseUpHandler = () => {
       if (!IsContentMouseDownRef.current) return;
       const timer = setTimeout(() => {
@@ -82,70 +77,71 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
       }, 0);
     };
 
-    const { bindings } = useKeyboard(
+    const {bindings} = useKeyboard(
       (ev: React.KeyboardEvent | KeyboardEvent) => {
         onKeyPress && onKeyPress(ev);
       },
       [KeyCode.Escape, KeyCode.Space],
       {
         disableGlobalEvent: true,
-        preventDefault
-      }
+        preventDefault,
+      },
     );
 
     const getState = useMemo(() => {
-      return visible ? 'open' : 'closed';
+      return visible ? "open" : "closed";
     }, [visible]);
 
     const renderChildren = useMemo(() => {
       return (
         <StyledBackdrop
-          tabIndex={-1}
-          role="button"
           aria-hidden={true}
-          data-state={getState}
-          onClick={clickHandler}
-          onMouseUp={mouseUpHandler}
+          className={cslx(preClass, `${preClass}--${getState}`, className)}
           css={{
             $$backdropOpacity: opacity,
-            ...(css as any)
+            ...(css as any),
           }}
-          className={cslx(preClass, `${preClass}--${getState}`, className)}
+          data-state={getState}
+          role="button"
+          tabIndex={-1}
+          onClick={clickHandler}
+          onMouseUp={mouseUpHandler}
           {...bindings}
           {...props}
         >
           <StyledBackdropLayer
+            animated={animated}
+            blur={blur}
             className={cslx(
               `${preClass}-layer`,
-              blur ? `${preClass}-layer-blur` : `${preClass}-layer-default`
+              blur ? `${preClass}-layer-blur` : `${preClass}-layer-default`,
             )}
-            animated={animated}
-            blur={blur}
           />
           <StyledBackdropContent
             animated={animated}
             className={`${preClass}-content`}
-            onClick={childrenClickHandler}
             css={{
-              maxWidth
+              maxWidth,
             }}
+            onClick={childrenClickHandler}
             onMouseDown={() => setIsContentMouseDown(true)}
           >
             {children}
           </StyledBackdropContent>
         </StyledBackdrop>
       );
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [children]);
 
     return (
       <>
         {animated ? (
           <CSSTransition
-            name={`${preClass}-wrapper`}
-            visible={visible}
+            clearTime={150}
             enterTime={20}
             leaveTime={20}
-            clearTime={150}
+            name={`${preClass}-wrapper`}
+            visible={visible}
           >
             {renderChildren}
           </CSSTransition>
@@ -154,13 +150,13 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
         ) : null}
       </>
     );
-  }
+  },
 );
 
 if (__DEV__) {
-  Backdrop.displayName = 'NextUI.Backdrop';
+  Backdrop.displayName = "NextUI.Backdrop";
 }
 
-Backdrop.toString = () => '.nextui-backdrop';
+Backdrop.toString = () => ".nextui-backdrop";
 
 export default withDefaults(Backdrop, defaultProps);
diff --git a/packages/react/src/backdrop/index.ts b/packages/react/src/backdrop/index.ts
index 4ca8ee0f9c..d20e6b4ef2 100644
--- a/packages/react/src/backdrop/index.ts
+++ b/packages/react/src/backdrop/index.ts
@@ -1,11 +1,7 @@
-import Backdrop from './backdrop';
+import Backdrop from "./backdrop";
 
-export type { BackdropProps } from './backdrop';
-export {
-  StyledBackdropContent,
-  StyledBackdropLayer,
-  StyledBackdrop
-} from './backdrop.styles';
-export type { BackdropVariantsProps } from './backdrop.styles';
+export type {BackdropProps} from "./backdrop";
+export {StyledBackdropContent, StyledBackdropLayer, StyledBackdrop} from "./backdrop.styles";
+export type {BackdropVariantsProps} from "./backdrop.styles";
 
 export default Backdrop;
diff --git a/packages/react/src/button/__tests__/group.test.tsx b/packages/react/src/button/__tests__/group.test.tsx
index 845d3ee447..633f936055 100644
--- a/packages/react/src/button/__tests__/group.test.tsx
+++ b/packages/react/src/button/__tests__/group.test.tsx
@@ -1,57 +1,62 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Button from '../index';
-import { nativeEvent } from '../../../tests/utils';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('ButtonGroup', () => {
-  it('should render correctly', () => {
+import Button from "../index";
+import {nativeEvent} from "../../../tests/utils";
+
+describe("ButtonGroup", () => {
+  it("should render correctly", () => {
     const wrapper = mount(
       <Button.Group>
         <Button>action</Button>
-      </Button.Group>
+      </Button.Group>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('props should be passed to each button', () => {
+  it("props should be passed to each button", () => {
     const wrapper = mount(
-      <Button.Group size="xs" color="success">
+      <Button.Group color="success" size="xs">
         <Button>action</Button>
-      </Button.Group>
+      </Button.Group>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
-    wrapper.setProps({ flat: true });
+    wrapper.setProps({flat: true});
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should ignore events when group disabled', () => {
+  it("should ignore events when group disabled", () => {
     const handler = jest.fn();
     const wrapper = mount(
       <Button.Group>
         <Button onClick={handler}>action</Button>
-      </Button.Group>
+      </Button.Group>,
     );
-    wrapper.find('button').simulate('click', nativeEvent);
+
+    wrapper.find("button").simulate("click", nativeEvent);
     expect(handler).toHaveBeenCalledTimes(1);
-    wrapper.setProps({ disabled: true });
-    wrapper.find('button').simulate('click', nativeEvent);
+    wrapper.setProps({disabled: true});
+    wrapper.find("button").simulate("click", nativeEvent);
     expect(handler).toHaveBeenCalledTimes(1);
   });
 
-  it('buttons should be displayed vertically', () => {
+  it("buttons should be displayed vertically", () => {
     const wrapper = mount(
       <Button.Group vertical>
         <Button>action1</Button>
         <Button>action2</Button>
-      </Button.Group>
+      </Button.Group>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render different variants', () => {
+  it("should render different variants", () => {
     const wrapper = mount(
       <Button.Group>
         <Button flat>button</Button>
@@ -69,8 +74,9 @@ describe('ButtonGroup', () => {
         <Button shadow>button</Button>
         <Button auto>button</Button>
         <Button animated={false}>button</Button>
-      </Button.Group>
+      </Button.Group>,
     );
+
     expect(wrapper).toMatchSnapshot();
     expect(<Button>button</Button>).toMatchSnapshot();
   });
diff --git a/packages/react/src/button/__tests__/icon.test.tsx b/packages/react/src/button/__tests__/icon.test.tsx
index f947550eef..4f77f53738 100644
--- a/packages/react/src/button/__tests__/icon.test.tsx
+++ b/packages/react/src/button/__tests__/icon.test.tsx
@@ -1,25 +1,29 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Button from '../index';
+import React from "react";
+import {mount} from "enzyme";
+
+import Button from "../index";
 
 const Icon: React.FC<unknown> = () => <svg />;
 
-describe('ButtonIcon', () => {
-  it('should render correctly', () => {
+describe("ButtonIcon", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Button icon={<Icon />}>action</Button>);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with right', () => {
+  it("should work with right", () => {
     const wrapper = mount(<Button iconRight={<Icon />}>action</Button>);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work without text', () => {
+  it("should work without text", () => {
     const wrapper = mount(<Button iconRight={<Icon />} />);
-    const text = wrapper.find('.nextui-button-text');
+    const text = wrapper.find(".nextui-button-text");
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(text.length).toBe(0);
   });
diff --git a/packages/react/src/button/__tests__/index.test.tsx b/packages/react/src/button/__tests__/index.test.tsx
index 5d948a050d..1b91b0ca89 100644
--- a/packages/react/src/button/__tests__/index.test.tsx
+++ b/packages/react/src/button/__tests__/index.test.tsx
@@ -1,15 +1,17 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Button from '../index';
-import userEvent from '@testing-library/user-event';
+import React from "react";
+import {mount} from "enzyme";
+import userEvent from "@testing-library/user-event";
 
-describe('Button', () => {
-  it('should render correctly', () => {
+import Button from "../index";
+
+describe("Button", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Button>Button</Button>);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support all colors', () => {
+  it("should support all colors", () => {
     const wrapper = mount(
       <div>
         <Button color="primary" />
@@ -18,12 +20,13 @@ describe('Button', () => {
         <Button color="warning" />
         <Button color="error" />
         <Button color="gradient" />
-      </div>
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support all sizes', () => {
+  it("should support all sizes", () => {
     const wrapper = mount(
       <div>
         <Button size="xs" />
@@ -31,26 +34,28 @@ describe('Button', () => {
         <Button size="md" />
         <Button size="lg" />
         <Button size="xl" />
-      </div>
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render different text', () => {
+  it("should render different text", () => {
     const wrapper = mount(<Button>button</Button>);
-    expect(wrapper.text()).toContain('button');
+
+    expect(wrapper.text()).toContain("button");
 
     wrapper.setProps({
-      children: <span>Hello</span>
+      children: <span>Hello</span>,
     });
-    expect(wrapper.text()).toContain('Hello');
+    expect(wrapper.text()).toContain("Hello");
   });
 
-  it('should render empty button correctly', () => {
+  it("should render empty button correctly", () => {
     expect(<Button />).toMatchSnapshot();
   });
 
-  it('should render different variants', () => {
+  it("should render different variants", () => {
     const wrapper = mount(
       <div>
         <Button flat>button</Button>
@@ -70,51 +75,58 @@ describe('Button', () => {
         <Button bordered>button</Button>
         <Button auto>button</Button>
         <Button animated={false}>button</Button>
-      </div>
+      </div>,
     );
+
     expect(wrapper).toMatchSnapshot();
     expect(<Button>button</Button>).toMatchSnapshot();
   });
 
-  it('ref should be forwarded', () => {
+  it("ref should be forwarded", () => {
     const ref = React.createRef<HTMLButtonElement>();
     const wrapper = mount(<Button ref={ref}>action</Button>);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should trigger callback function', () => {
+  it("should trigger callback function", () => {
     const WrapperButton = () => {
-      const [state, setState] = React.useState<string>('state1');
-      return <Button onClick={() => setState('state2')}>{state}</Button>;
+      const [state, setState] = React.useState<string>("state1");
+
+      return <Button onClick={() => setState("state2")}>{state}</Button>;
     };
     const wrapper = mount(<WrapperButton />);
-    expect(wrapper.text()).toContain('state1');
 
-    wrapper.simulate('click');
-    userEvent.click(wrapper.find('button').getDOMNode());
-    expect(wrapper.text()).toContain('state2');
+    expect(wrapper.text()).toContain("state1");
+
+    wrapper.simulate("click");
+    userEvent.click(wrapper.find("button").getDOMNode());
+    expect(wrapper.text()).toContain("state2");
   });
 
-  it('should ignore events when disabled', () => {
+  it("should ignore events when disabled", () => {
     const WrapperButton = () => {
-      const [state, setState] = React.useState<string>('state1');
+      const [state, setState] = React.useState<string>("state1");
+
       return (
-        <Button disabled onClick={() => setState('state2')}>
+        <Button disabled onClick={() => setState("state2")}>
           {state}
         </Button>
       );
     };
     const wrapper = mount(<WrapperButton />);
-    expect(wrapper.text()).toContain('state1');
 
-    userEvent.click(wrapper.find('button').getDOMNode());
-    expect(wrapper.text()).toContain('state1');
-    expect(wrapper.text()).not.toContain('state2');
+    expect(wrapper.text()).toContain("state1");
+
+    userEvent.click(wrapper.find("button").getDOMNode());
+    expect(wrapper.text()).toContain("state1");
+    expect(wrapper.text()).not.toContain("state2");
   });
 
-  it('should remove expired events', () => {
+  it("should remove expired events", () => {
     const wrapper = mount(<Button>button</Button>);
-    userEvent.click(wrapper.find('button').getDOMNode());
+
+    userEvent.click(wrapper.find("button").getDOMNode());
     expect(() => wrapper.unmount()).not.toThrow();
   });
 });
diff --git a/packages/react/src/button/button-group-context.ts b/packages/react/src/button/button-group-context.ts
index 97d8b2a9e0..dce0071096 100644
--- a/packages/react/src/button/button-group-context.ts
+++ b/packages/react/src/button/button-group-context.ts
@@ -1,5 +1,6 @@
-import React from 'react';
-import { NormalSizes, NormalColors, NormalWeights } from '../utils/prop-types';
+import React from "react";
+
+import {NormalSizes, NormalColors, NormalWeights} from "../utils/prop-types";
 
 export interface ButtonGroupConfig {
   size?: NormalSizes;
@@ -23,8 +24,7 @@ const defaultContext = {
   disabled: false,
 };
 
-export const ButtonGroupContext =
-  React.createContext<ButtonGroupConfig>(defaultContext);
+export const ButtonGroupContext = React.createContext<ButtonGroupConfig>(defaultContext);
 
 export const useButtonGroupContext = (): ButtonGroupConfig =>
   React.useContext<ButtonGroupConfig>(ButtonGroupContext);
diff --git a/packages/react/src/button/button-group.stories.tsx b/packages/react/src/button/button-group.stories.tsx
index f776bab6f1..7206134b47 100644
--- a/packages/react/src/button/button-group.stories.tsx
+++ b/packages/react/src/button/button-group.stories.tsx
@@ -1,18 +1,20 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Button from './index';
-import { Grid } from '../index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Grid} from "../index";
+
+import Button from "./index";
 
 export default {
-  title: 'General/ButtonGroup',
+  title: "General/ButtonGroup",
   component: Button,
   decorators: [
     (Story) => (
-      <Grid.Container gap={2} justify="center" direction="column">
+      <Grid.Container direction="column" gap={2} justify="center">
         <Story />
       </Grid.Container>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
 export const Default = () => (
@@ -48,17 +50,17 @@ export const Variants = () => (
       <Button>Two</Button>
       <Button disabled>Three</Button>
     </Button.Group>
-    <Button.Group color="primary" bordered>
+    <Button.Group bordered color="primary">
       <Button disabled>Action1</Button>
       <Button>Action2</Button>
       <Button>Action3</Button>
     </Button.Group>
-    <Button.Group color="gradient" bordered>
+    <Button.Group bordered color="gradient">
       <Button disabled>Action1</Button>
       <Button>Action2</Button>
       <Button>Action3</Button>
     </Button.Group>
-    <Button.Group color="warning" flat>
+    <Button.Group flat color="warning">
       <Button>Action1</Button>
       <Button disabled>Action2</Button>
       <Button>Action2</Button>
@@ -68,12 +70,12 @@ export const Variants = () => (
       <Button>Two</Button>
       <Button>Three</Button>
     </Button.Group>
-    <Button.Group color="secondary" light>
+    <Button.Group light color="secondary">
       <Button>One</Button>
       <Button disabled>Two</Button>
       <Button>Three</Button>
     </Button.Group>
-    <Button.Group color="gradient" ghost>
+    <Button.Group ghost color="gradient">
       <Button>One</Button>
       <Button disabled>Two</Button>
       <Button>Three</Button>
@@ -112,7 +114,7 @@ export const Sizes = () => (
 
 export const Vertical = () => (
   <>
-    <Button.Group size="sm" vertical>
+    <Button.Group vertical size="sm">
       <Button>One</Button>
       <Button>Two</Button>
       <Button>Three</Button>
@@ -123,7 +125,7 @@ export const Vertical = () => (
 
 export const Disabled = () => (
   <>
-    <Button.Group size="sm" disabled>
+    <Button.Group disabled size="sm">
       <Button>One</Button>
       <Button>Two</Button>
       <Button>Three</Button>
diff --git a/packages/react/src/button/button-group.styles.ts b/packages/react/src/button/button-group.styles.ts
index 61bdbe6b6f..1bcd8a45f8 100644
--- a/packages/react/src/button/button-group.styles.ts
+++ b/packages/react/src/button/button-group.styles.ts
@@ -1,80 +1,81 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import StyledButton from './button.styles';
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledButtonGroup = styled('div', {
-  display: 'inline-flex',
-  margin: '$3',
-  backgroundColor: 'transparent',
-  height: 'min-content',
+import StyledButton from "./button.styles";
+
+export const StyledButtonGroup = styled("div", {
+  display: "inline-flex",
+  margin: "$3",
+  backgroundColor: "transparent",
+  height: "min-content",
   [`& ${StyledButton}`]: {
-    '.nextui-button-text': {
-      top: 0
-    }
+    ".nextui-button-text": {
+      top: 0,
+    },
   },
   variants: {
     vertical: {
       true: {
-        fd: 'column',
+        fd: "column",
         [`& ${StyledButton}`]: {
-          '&:not(:first-child)': {
+          "&:not(:first-child)": {
             btlr: 0, // top-left
-            btrr: 0 // top-right
+            btrr: 0, // top-right
           },
-          '&:not(:last-child)': {
+          "&:not(:last-child)": {
             bblr: 0,
-            bbrr: 0
-          }
-        }
+            bbrr: 0,
+          },
+        },
       },
       false: {
-        fd: 'row',
+        fd: "row",
         [`& ${StyledButton}`]: {
-          '&:not(:first-child)': {
+          "&:not(:first-child)": {
             btlr: 0, // top-left
-            bblr: 0 // bottom-left
+            bblr: 0, // bottom-left
           },
-          '&:not(:last-child)': {
+          "&:not(:last-child)": {
             btrr: 0, // top-right
-            bbrr: 0 // bottom-right
-          }
-        }
-      }
+            bbrr: 0, // bottom-right
+          },
+        },
+      },
     },
     size: {
       xs: {
-        br: '$xs'
+        br: "$xs",
       },
       sm: {
-        br: '$sm'
+        br: "$sm",
       },
       md: {
-        br: '$md'
+        br: "$md",
       },
       lg: {
-        br: '$base'
+        br: "$base",
       },
       xl: {
-        br: '$xl'
-      }
+        br: "$xl",
+      },
     },
     rounded: {
       true: {
-        br: '$pill'
-      }
+        br: "$pill",
+      },
     },
     bordered: {
       true: {
-        bg: 'transparent'
-      }
+        bg: "transparent",
+      },
     },
     gradient: {
       true: {
-        pl: 0
-      }
-    }
+        pl: 0,
+      },
+    },
   },
   defaultVariants: {
-    vertical: false
+    vertical: false,
   },
   compoundVariants: [
     // bordered / vertical:true
@@ -83,12 +84,12 @@ export const StyledButtonGroup = styled('div', {
       vertical: true,
       css: {
         [`& ${StyledButton}`]: {
-          '&:not(:last-child)': {
-            borderBottom: 'none',
-            paddingBottom: '0'
-          }
-        }
-      }
+          "&:not(:last-child)": {
+            borderBottom: "none",
+            paddingBottom: "0",
+          },
+        },
+      },
     },
     // bordered / vertical:false
     {
@@ -96,11 +97,11 @@ export const StyledButtonGroup = styled('div', {
       vertical: false,
       css: {
         [`& ${StyledButton}`]: {
-          '&:not(:first-child)': {
-            borderLeft: 'none'
-          }
-        }
-      }
+          "&:not(:first-child)": {
+            borderLeft: "none",
+          },
+        },
+      },
     },
     // bordered & vertical:false & gradient
     {
@@ -109,21 +110,18 @@ export const StyledButtonGroup = styled('div', {
       gradient: true,
       css: {
         [`& ${StyledButton}`]: {
-          '&:not(:last-child)&:not(:first-child)': {
-            pl: 0
+          "&:not(:last-child)&:not(:first-child)": {
+            pl: 0,
+          },
+          "&:last-child": {
+            pl: 0,
           },
-          '&:last-child': {
-            pl: 0
-          }
-        }
-      }
-    }
-  ]
+        },
+      },
+    },
+  ],
 });
 
-export type ButtonGroupVariantsProps = Omit<
-  VariantProps<typeof StyledButtonGroup>,
-  'gradient'
->;
+export type ButtonGroupVariantsProps = Omit<VariantProps<typeof StyledButtonGroup>, "gradient">;
 
 export default StyledButtonGroup;
diff --git a/packages/react/src/button/button-group.tsx b/packages/react/src/button/button-group.tsx
index eadca65e9d..f646e3b20e 100644
--- a/packages/react/src/button/button-group.tsx
+++ b/packages/react/src/button/button-group.tsx
@@ -1,11 +1,11 @@
-import React, { useMemo } from 'react';
-import withDefaults from '../utils/with-defaults';
-import { CSS } from '../theme/stitches.config';
-import { NormalSizes, NormalColors, NormalWeights } from '../utils/prop-types';
-import { ButtonGroupContext, ButtonGroupConfig } from './button-group-context';
-import StyledButtonGroup, {
-  ButtonGroupVariantsProps
-} from './button-group.styles';
+import React, {useMemo} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {CSS} from "../theme/stitches.config";
+import {NormalSizes, NormalColors, NormalWeights} from "../utils/prop-types";
+
+import {ButtonGroupContext, ButtonGroupConfig} from "./button-group-context";
+import StyledButtonGroup, {ButtonGroupVariantsProps} from "./button-group.styles";
 
 interface Props {
   disabled?: boolean;
@@ -24,9 +24,9 @@ interface Props {
 }
 
 const defaultProps = {
-  borderWeight: 'normal' as NormalWeights | undefined,
-  size: 'md' as NormalSizes,
-  color: 'default' as NormalColors
+  borderWeight: "normal" as NormalWeights | undefined,
+  size: "md" as NormalSizes,
+  color: "default" as NormalColors,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -34,11 +34,9 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export type ButtonGroupProps = Props &
   ButtonGroupVariantsProps &
   NativeAttrs &
-  typeof defaultProps & { css?: CSS };
+  typeof defaultProps & {css?: CSS};
 
-const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = (
-  groupProps
-) => {
+const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = (groupProps) => {
   const {
     disabled,
     size,
@@ -72,28 +70,18 @@ const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = (
       animated,
       rounded,
       ripple,
-      isButtonGroup: true
+      isButtonGroup: true,
     }),
-    [
-      disabled,
-      animated,
-      size,
-      ripple,
-      color,
-      bordered,
-      light,
-      ghost,
-      flat,
-      borderWeight
-    ]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [disabled, animated, size, ripple, color, bordered, light, ghost, flat, borderWeight],
   );
 
   return (
     <ButtonGroupContext.Provider value={initialValue}>
       <StyledButtonGroup
-        size={size}
         bordered={bordered || ghost}
-        gradient={groupProps.color === 'gradient'}
+        gradient={groupProps.color === "gradient"}
+        size={size}
         {...props}
       >
         {children}
@@ -102,7 +90,7 @@ const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = (
   );
 };
 
-ButtonGroup.toString = () => '.nextui-button-group';
+ButtonGroup.toString = () => ".nextui-button-group";
 
 const MemoButtonGroup = React.memo(ButtonGroup);
 
diff --git a/packages/react/src/button/button-icon.tsx b/packages/react/src/button/button-icon.tsx
index b0dc7aaf3b..2fffcf3166 100644
--- a/packages/react/src/button/button-icon.tsx
+++ b/packages/react/src/button/button-icon.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
-import { styled, VariantProps, CSS } from '../theme/stitches.config';
-import withDefaults from '../utils/with-defaults';
-import clsx from '../utils/clsx';
+import React from "react";
+
+import {styled, VariantProps, CSS} from "../theme/stitches.config";
+import withDefaults from "../utils/with-defaults";
+import clsx from "../utils/clsx";
 
 interface Props {
   isRight?: boolean;
@@ -10,44 +11,44 @@ interface Props {
 }
 
 const defaultProps = {
-  className: ''
+  className: "",
 };
 
-export const StyledButtonIcon = styled('span', {
-  dflex: 'center',
-  position: 'absolute',
-  left: '$$buttonPadding',
-  right: 'auto',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  color: 'inherit',
-  zIndex: '$1',
-  '& svg': {
-    background: 'transparent'
+export const StyledButtonIcon = styled("span", {
+  dflex: "center",
+  position: "absolute",
+  left: "$$buttonPadding",
+  right: "auto",
+  top: "50%",
+  transform: "translateY(-50%)",
+  color: "inherit",
+  zIndex: "$1",
+  "& svg": {
+    background: "transparent",
   },
   variants: {
     isAuto: {
       true: {
-        position: 'relative',
-        transform: 'none',
-        top: '0%'
-      }
+        position: "relative",
+        transform: "none",
+        top: "0%",
+      },
     },
     isRight: {
       true: {
-        right: '$$buttonPadding',
-        left: 'auto'
-      }
+        right: "$$buttonPadding",
+        left: "auto",
+      },
     },
     isSingle: {
       true: {
-        position: 'static',
-        transform: 'none'
-      }
+        position: "static",
+        transform: "none",
+      },
     },
     isGradientButtonBorder: {
-      true: {}
-    }
+      true: {},
+    },
   },
   compoundVariants: [
     // isAuto && isRight
@@ -57,10 +58,10 @@ export const StyledButtonIcon = styled('span', {
       isSingle: false,
       css: {
         order: 2,
-        ml: 'calc($$buttonPadding / 2)',
-        right: '0%',
-        left: '0%'
-      }
+        ml: "calc($$buttonPadding / 2)",
+        right: "0%",
+        left: "0%",
+      },
     },
     // isAuto && !isRight
     {
@@ -69,26 +70,26 @@ export const StyledButtonIcon = styled('span', {
       isSingle: false,
       css: {
         order: 0,
-        mr: 'calc($$buttonPadding / 2)',
-        right: '0%',
-        left: '0%'
-      }
+        mr: "calc($$buttonPadding / 2)",
+        right: "0%",
+        left: "0%",
+      },
     },
     // isSingle && isRight
     {
       isSingle: true,
       isRight: false,
       css: {
-        ml: 0
-      }
+        ml: 0,
+      },
     },
     // isSingle && !isRight
     {
       isSingle: true,
       isRight: true,
       css: {
-        mr: 0
-      }
+        mr: 0,
+      },
     },
     // isSingle && !isRight && hasButttonBorder
     {
@@ -96,10 +97,10 @@ export const StyledButtonIcon = styled('span', {
       isRight: false,
       isGradientButtonBorder: true,
       css: {
-        mr: 'calc($$buttonPadding / 2)'
-      }
-    }
-  ]
+        mr: "calc($$buttonPadding / 2)",
+      },
+    },
+  ],
 });
 
 type ButtonIconVariants = VariantProps<typeof StyledButtonIcon>;
@@ -119,15 +120,15 @@ const ButtonIcon: React.FC<React.PropsWithChildren<ButtonIconProps>> = ({
   return (
     <StyledButtonIcon
       className={clsx(
-        'nextui-button-icon',
+        "nextui-button-icon",
         {
-          'nextui-button-icon-right': props.isRight,
-          'nextui-button-icon-single': props.isSingle
+          "nextui-button-icon-right": props.isRight,
+          "nextui-button-icon-single": props.isSingle,
         },
-        className
+        className,
       )}
       css={{
-        ...(css as any)
+        ...(css as any),
       }}
       {...props}
     >
@@ -136,7 +137,7 @@ const ButtonIcon: React.FC<React.PropsWithChildren<ButtonIconProps>> = ({
   );
 };
 
-ButtonIcon.toString = () => '.nextui-button-icon';
+ButtonIcon.toString = () => ".nextui-button-icon";
 
 const MemoButtonIcon = React.memo(ButtonIcon);
 
diff --git a/packages/react/src/button/button.stories.tsx b/packages/react/src/button/button.stories.tsx
index d26a268a30..eeefed9d05 100644
--- a/packages/react/src/button/button.stories.tsx
+++ b/packages/react/src/button/button.stories.tsx
@@ -1,19 +1,21 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Button from './index';
-import { Spacer, Grid, Loading } from '../index';
-import { Lock, Notification, User, Camera, Activity } from '../utils/icons';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Spacer, Grid, Loading} from "../index";
+import {Lock, Notification, User, Camera, Activity} from "../utils/icons";
+
+import Button from "./index";
 
 export default {
-  title: 'General/Button',
+  title: "General/Button",
   component: Button,
   decorators: [
     (Story) => (
       <div style={{}}>
         <Story />
       </div>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
 export const Default = () => <Button>Action</Button>;
@@ -47,28 +49,28 @@ export const Sizes = () => (
 export const Loadings = () => (
   <Grid.Container gap={2}>
     <Grid>
-      <Button auto disabled color="primary" css={{ px: '$13' }}>
+      <Button auto disabled color="primary" css={{px: "$13"}}>
         <Loading color="currentColor" size="sm" />
       </Button>
     </Grid>
     <Grid>
-      <Button auto disabled color="secondary" css={{ px: '$13' }}>
-        <Loading type="spinner" color="currentColor" size="sm" />
+      <Button auto disabled color="secondary" css={{px: "$13"}}>
+        <Loading color="currentColor" size="sm" type="spinner" />
       </Button>
     </Grid>
     <Grid>
-      <Button auto disabled color="success" css={{ px: '$13' }}>
-        <Loading type="points" color="currentColor" size="sm" />
+      <Button auto disabled color="success" css={{px: "$13"}}>
+        <Loading color="currentColor" size="sm" type="points" />
       </Button>
     </Grid>
     <Grid>
-      <Button auto disabled color="warning" css={{ px: '$13' }}>
-        <Loading type="points-opacity" color="currentColor" size="sm" />
+      <Button auto disabled color="warning" css={{px: "$13"}}>
+        <Loading color="currentColor" size="sm" type="points-opacity" />
       </Button>
     </Grid>
     <Grid>
-      <Button auto disabled color="error" css={{ px: '$13' }}>
-        <Loading type="spinner" color="currentColor" size="sm" />
+      <Button auto disabled color="error" css={{px: "$13"}}>
+        <Loading color="currentColor" size="sm" type="spinner" />
       </Button>
     </Grid>
   </Grid.Container>
@@ -93,23 +95,23 @@ export const Colors = () => (
 
 export const Ghost = () => (
   <>
-    <Button color="primary" ghost>
+    <Button ghost color="primary">
       Primary
     </Button>
     <Spacer y={0.5} />
-    <Button color="secondary" ghost>
+    <Button ghost color="secondary">
       Secondary
     </Button>
     <Spacer y={0.5} />
-    <Button color="success" ghost>
+    <Button ghost color="success">
       Success
     </Button>
     <Spacer y={0.5} />
-    <Button color="warning" ghost>
+    <Button ghost color="warning">
       Warning
     </Button>
     <Spacer y={0.5} />
-    <Button color="error" ghost>
+    <Button ghost color="error">
       Error
     </Button>
     <Spacer y={0.5} />
@@ -152,27 +154,27 @@ export const Shadow = () => (
 
 export const Bordered = () => (
   <>
-    <Button color="primary" bordered>
+    <Button bordered color="primary">
       Primary
     </Button>
     <Spacer y={0.5} />
-    <Button color="secondary" bordered>
+    <Button bordered color="secondary">
       Secondary
     </Button>
     <Spacer y={0.5} />
-    <Button color="success" bordered>
+    <Button bordered color="success">
       Success
     </Button>
     <Spacer y={0.5} />
-    <Button color="warning" bordered>
+    <Button bordered color="warning">
       Warning
     </Button>
     <Spacer y={0.5} />
-    <Button color="error" bordered>
+    <Button bordered color="error">
       Error
     </Button>
     <Spacer y={0.5} />
-    <Button color="gradient" bordered>
+    <Button bordered color="gradient">
       Gradient
     </Button>
   </>
@@ -180,23 +182,23 @@ export const Bordered = () => (
 
 export const Flat = () => (
   <>
-    <Button color="primary" flat>
+    <Button flat color="primary">
       Primary
     </Button>
     <Spacer y={0.5} />
-    <Button color="secondary" flat>
+    <Button flat color="secondary">
       Secondary
     </Button>
     <Spacer y={0.5} />
-    <Button color="success" flat>
+    <Button flat color="success">
       Success
     </Button>
     <Spacer y={0.5} />
-    <Button color="warning" flat>
+    <Button flat color="warning">
       Warning
     </Button>
     <Spacer y={0.5} />
-    <Button color="error" flat>
+    <Button flat color="error">
       Error
     </Button>
   </>
@@ -204,27 +206,27 @@ export const Flat = () => (
 
 export const Rounded = () => (
   <>
-    <Button color="primary" rounded>
+    <Button rounded color="primary">
       Primary
     </Button>
     <Spacer y={0.5} />
-    <Button color="secondary" rounded>
+    <Button rounded color="secondary">
       Secondary
     </Button>
     <Spacer y={0.5} />
-    <Button color="success" rounded>
+    <Button rounded color="success">
       Success
     </Button>
     <Spacer y={0.5} />
-    <Button color="warning" rounded>
+    <Button rounded color="warning">
       Warning
     </Button>
     <Spacer y={0.5} />
-    <Button color="error" rounded>
+    <Button rounded color="error">
       Error
     </Button>
     <Spacer y={0.5} />
-    <Button color="gradient" rounded>
+    <Button rounded color="gradient">
       Action
     </Button>
   </>
@@ -234,23 +236,23 @@ export const Light = () => (
   <>
     <Button light>Default</Button>
     <Spacer y={0.5} />
-    <Button color="primary" light>
+    <Button light color="primary">
       Primary
     </Button>
     <Spacer y={0.5} />
-    <Button color="secondary" light>
+    <Button light color="secondary">
       Secondary
     </Button>
     <Spacer y={0.5} />
-    <Button color="success" light>
+    <Button light color="success">
       Success
     </Button>
     <Spacer y={0.5} />
-    <Button color="warning" light>
+    <Button light color="warning">
       Warning
     </Button>
     <Spacer y={0.5} />
-    <Button color="error" light>
+    <Button light color="error">
       Error
     </Button>
   </>
@@ -265,28 +267,23 @@ export const Icons = () => {
         Right Icon
       </Button>
       <Spacer y={0.5} />
-      <Button
-        auto
-        bordered
-        color="gradient"
-        icon={<Camera fill="currentColor" />}
-      >
+      <Button auto bordered color="gradient" icon={<Camera fill="currentColor" />}>
         Left Icon
       </Button>
       <Spacer y={0.5} />
-      <Button icon={<Lock fill="currentColor" />} color="success">
+      <Button color="success" icon={<Lock fill="currentColor" />}>
         Lock
       </Button>
       <Spacer y={0.5} />
-      <Button icon={<Notification fill="currentColor" />} color="secondary">
+      <Button color="secondary" icon={<Notification fill="currentColor" />}>
         Notifications
       </Button>
       <Spacer y={0.5} />
-      <Button icon={<User fill="currentColor" />} color="error" flat>
+      <Button flat color="error" icon={<User fill="currentColor" />}>
         Delete User
       </Button>
       <Spacer y={0.5} />
-      <Button icon={<User fill="currentColor" />} disabled>
+      <Button disabled icon={<User fill="currentColor" />}>
         Delete User
       </Button>
     </>
diff --git a/packages/react/src/button/button.styles.ts b/packages/react/src/button/button.styles.ts
index 9dfe5acd11..e7966ea052 100644
--- a/packages/react/src/button/button.styles.ts
+++ b/packages/react/src/button/button.styles.ts
@@ -1,215 +1,215 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import { cssFocusVisible, sharedDialogPopup } from '../theme/shared-css';
-import { StyledDrip } from '../utils/drip';
+import {styled, VariantProps} from "../theme/stitches.config";
+import {cssFocusVisible, sharedDialogPopup} from "../theme/shared-css";
+import {StyledDrip} from "../utils/drip";
 
 export const StyledButton = styled(
-  'button',
+  "button",
   {
-    $$buttonBorderRadius: '$radii$md',
+    $$buttonBorderRadius: "$radii$md",
     $$buttonPressedScale: 0.97,
-    dflex: 'center',
-    appearance: 'none',
-    boxSizing: 'border-box',
-    fontWeight: '$medium',
-    us: 'none',
-    lineHeight: '$sm',
-    ta: 'center',
-    whiteSpace: 'nowrap',
-    transition: '$button',
-    position: 'relative',
-    overflow: 'hidden',
-    border: 'none',
-    cursor: 'pointer',
-    pe: 'auto',
+    dflex: "center",
+    appearance: "none",
+    boxSizing: "border-box",
+    fontWeight: "$medium",
+    us: "none",
+    lineHeight: "$sm",
+    ta: "center",
+    whiteSpace: "nowrap",
+    transition: "$button",
+    position: "relative",
+    overflow: "hidden",
+    border: "none",
+    cursor: "pointer",
+    pe: "auto",
     p: 0,
-    br: '$$buttonBorderRadius',
-    '@motion': {
-      transition: 'none'
+    br: "$$buttonBorderRadius",
+    "@motion": {
+      transition: "none",
     },
-    '.nextui-button-text': {
-      dflex: 'center',
-      zIndex: '$2',
-      'p, pre, div': {
-        margin: 0
-      }
+    ".nextui-button-text": {
+      dflex: "center",
+      zIndex: "$2",
+      "p, pre, div": {
+        margin: 0,
+      },
     },
     [`& ${StyledDrip}`]: {
-      zIndex: '$1',
-      '.nextui-drip-filler': {
+      zIndex: "$1",
+      ".nextui-drip-filler": {
         opacity: 0.25,
-        fill: '$accents2'
-      }
+        fill: "$accents2",
+      },
     },
     variants: {
       bordered: {
         true: {
-          bg: 'transparent',
-          borderStyle: 'solid',
-          color: '$text'
-        }
+          bg: "transparent",
+          borderStyle: "solid",
+          color: "$text",
+        },
       },
       ghost: {
-        true: {}
+        true: {},
       },
       color: {
         default: {
-          bg: '$primary',
-          color: '$primarySolidContrast'
+          bg: "$primary",
+          color: "$primarySolidContrast",
         },
         primary: {
-          bg: '$primary',
-          color: '$primarySolidContrast'
+          bg: "$primary",
+          color: "$primarySolidContrast",
         },
         secondary: {
-          bg: '$secondary',
-          color: '$secondarySolidContrast'
+          bg: "$secondary",
+          color: "$secondarySolidContrast",
         },
         success: {
-          bg: '$success',
-          color: '$successSolidContrast'
+          bg: "$success",
+          color: "$successSolidContrast",
         },
         warning: {
-          bg: '$warning',
-          color: '$warningSolidContrast'
+          bg: "$warning",
+          color: "$warningSolidContrast",
         },
         error: {
-          bg: '$error',
-          color: '$errorSolidContrast'
+          bg: "$error",
+          color: "$errorSolidContrast",
         },
         gradient: {
-          bg: '$gradient',
-          color: '$primarySolidContrast'
-        }
+          bg: "$gradient",
+          color: "$primarySolidContrast",
+        },
       },
       size: {
         xs: {
-          $$buttonPadding: '$space$3',
-          $$buttonBorderRadius: '$radii$xs',
-          $$buttonHeight: '$space$10',
-          px: '$3',
-          height: '$$buttonHeight',
-          lh: '$space$10',
-          width: 'auto',
-          minWidth: '$20',
-          fontSize: '$xs'
+          $$buttonPadding: "$space$3",
+          $$buttonBorderRadius: "$radii$xs",
+          $$buttonHeight: "$space$10",
+          px: "$3",
+          height: "$$buttonHeight",
+          lh: "$space$10",
+          width: "auto",
+          minWidth: "$20",
+          fontSize: "$xs",
         },
         sm: {
-          $$buttonPadding: '$space$5',
-          $$buttonBorderRadius: '$radii$sm',
-          $$buttonHeight: '$space$12',
-          px: '$5',
-          height: '$$buttonHeight',
-          lh: '$space$14',
-          width: 'auto',
-          minWidth: '$36',
-          fontSize: '$sm'
+          $$buttonPadding: "$space$5",
+          $$buttonBorderRadius: "$radii$sm",
+          $$buttonHeight: "$space$12",
+          px: "$5",
+          height: "$$buttonHeight",
+          lh: "$space$14",
+          width: "auto",
+          minWidth: "$36",
+          fontSize: "$sm",
         },
         md: {
-          $$buttonPadding: '$space$7',
-          $$buttonBorderRadius: '$radii$md',
-          $$buttonHeight: '$space$14',
-          px: '$7',
-          height: '$$buttonHeight',
-          lh: '$space$14',
-          width: 'auto',
-          minWidth: '$48',
-          fontSize: '$sm'
+          $$buttonPadding: "$space$7",
+          $$buttonBorderRadius: "$radii$md",
+          $$buttonHeight: "$space$14",
+          px: "$7",
+          height: "$$buttonHeight",
+          lh: "$space$14",
+          width: "auto",
+          minWidth: "$48",
+          fontSize: "$sm",
         },
         lg: {
-          $$buttonPadding: '$space$9',
-          $$buttonBorderRadius: '$radii$base',
-          $$buttonHeight: '$space$16',
-          px: '$9',
-          height: '$$buttonHeight',
-          lh: '$space$15',
-          width: 'auto',
-          minWidth: '$60',
-          fontSize: '$md'
+          $$buttonPadding: "$space$9",
+          $$buttonBorderRadius: "$radii$base",
+          $$buttonHeight: "$space$16",
+          px: "$9",
+          height: "$$buttonHeight",
+          lh: "$space$15",
+          width: "auto",
+          minWidth: "$60",
+          fontSize: "$md",
         },
         xl: {
-          $$buttonPadding: '$space$10',
-          $$buttonBorderRadius: '$radii$xl',
-          $$buttonHeight: '$space$18',
-          px: '$10',
-          height: '$$buttonHeight',
-          lh: '$space$17',
-          width: 'auto',
-          minWidth: '$72',
-          fontSize: '$lg'
-        }
+          $$buttonPadding: "$space$10",
+          $$buttonBorderRadius: "$radii$xl",
+          $$buttonHeight: "$space$18",
+          px: "$10",
+          height: "$$buttonHeight",
+          lh: "$space$17",
+          width: "auto",
+          minWidth: "$72",
+          fontSize: "$lg",
+        },
       },
       borderWeight: {
         light: {
-          bw: '$light',
-          $$buttonBorderWeight: '$borderWeights$light'
+          bw: "$light",
+          $$buttonBorderWeight: "$borderWeights$light",
         },
         normal: {
-          bw: '$normal',
-          $$buttonBorderWeight: '$borderWeights$normal'
+          bw: "$normal",
+          $$buttonBorderWeight: "$borderWeights$normal",
         },
         bold: {
-          bw: '$bold',
-          $$buttonBorderWeight: '$borderWeights$bold'
+          bw: "$bold",
+          $$buttonBorderWeight: "$borderWeights$bold",
         },
         extrabold: {
-          bw: '$extrabold',
-          $$buttonBorderWeight: '$borderWeights$extrabold'
+          bw: "$extrabold",
+          $$buttonBorderWeight: "$borderWeights$extrabold",
         },
         black: {
-          bw: '$black',
-          $$buttonBorderWeight: '$borderWeights$black'
-        }
+          bw: "$black",
+          $$buttonBorderWeight: "$borderWeights$black",
+        },
       },
       flat: {
         true: {
-          color: '$text'
-        }
+          color: "$text",
+        },
       },
       light: {
         true: {
-          bg: 'transparent',
+          bg: "transparent",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.8,
-              fill: '$accents2'
-            }
-          }
-        }
+              fill: "$accents2",
+            },
+          },
+        },
       },
       shadow: {
         true: {
-          bs: '$sm'
-        }
+          bs: "$sm",
+        },
       },
       animated: {
         false: {
-          transition: 'none'
-        }
+          transition: "none",
+        },
       },
       auto: {
         true: {
-          width: 'auto',
-          minWidth: 'min-content'
-        }
+          width: "auto",
+          minWidth: "min-content",
+        },
       },
       rounded: {
         true: {
-          $$buttonBorderRadius: '$radii$pill'
-        }
+          $$buttonBorderRadius: "$radii$pill",
+        },
       },
       isPressed: {
-        true: {}
+        true: {},
       },
       isHovered: {
-        true: {}
+        true: {},
       },
       isChildLess: {
         true: {
           p: 0,
-          width: '$$buttonHeight',
-          height: '$$buttonHeight'
-        }
-      }
+          width: "$$buttonHeight",
+          height: "$$buttonHeight",
+        },
+      },
     },
     compoundVariants: [
       // isPressed && animated
@@ -217,610 +217,609 @@ export const StyledButton = styled(
         isPressed: true,
         animated: true,
         css: {
-          transform: 'scale($$buttonPressedScale)'
-        }
+          transform: "scale($$buttonPressedScale)",
+        },
       },
       // size / auto / isChildLess
       {
         auto: true,
         isChildLess: false,
-        size: 'xs',
+        size: "xs",
         css: {
-          px: '$5',
-          minWidth: 'min-content'
-        }
+          px: "$5",
+          minWidth: "min-content",
+        },
       },
       {
         auto: true,
         isChildLess: false,
-        size: 'sm',
+        size: "sm",
         css: {
-          px: '$8',
-          minWidth: 'min-content'
-        }
+          px: "$8",
+          minWidth: "min-content",
+        },
       },
       {
         auto: true,
         isChildLess: false,
-        size: 'md',
+        size: "md",
         css: {
-          px: '$9',
-          minWidth: 'min-content'
-        }
+          px: "$9",
+          minWidth: "min-content",
+        },
       },
       {
         auto: true,
         isChildLess: false,
-        size: 'lg',
+        size: "lg",
         css: {
-          px: '$10',
-          minWidth: 'min-content'
-        }
+          px: "$10",
+          minWidth: "min-content",
+        },
       },
       {
         auto: true,
         isChildLess: false,
-        size: 'xl',
+        size: "xl",
         css: {
-          px: '$11',
-          minWidth: 'min-content'
-        }
+          px: "$11",
+          minWidth: "min-content",
+        },
       },
       // shadow / color
       {
         shadow: true,
-        color: 'default',
+        color: "default",
         css: {
-          normalShadow: '$primaryShadow'
-        }
+          normalShadow: "$primaryShadow",
+        },
       },
       {
         shadow: true,
-        color: 'primary',
+        color: "primary",
         css: {
-          normalShadow: '$primaryShadow'
-        }
+          normalShadow: "$primaryShadow",
+        },
       },
       {
         shadow: true,
-        color: 'secondary',
+        color: "secondary",
         css: {
-          normalShadow: '$secondaryShadow'
-        }
+          normalShadow: "$secondaryShadow",
+        },
       },
       {
         shadow: true,
-        color: 'warning',
+        color: "warning",
         css: {
-          normalShadow: '$warningShadow'
-        }
+          normalShadow: "$warningShadow",
+        },
       },
       {
         shadow: true,
-        color: 'success',
+        color: "success",
         css: {
-          normalShadow: '$successShadow'
-        }
+          normalShadow: "$successShadow",
+        },
       },
       {
         shadow: true,
-        color: 'error',
+        color: "error",
         css: {
-          normalShadow: '$errorShadow'
-        }
+          normalShadow: "$errorShadow",
+        },
       },
       {
         shadow: true,
-        color: 'gradient',
+        color: "gradient",
         css: {
-          normalShadow: '$primaryShadow'
-        }
+          normalShadow: "$primaryShadow",
+        },
       },
       // light / color
       {
         light: true,
-        color: 'default',
+        color: "default",
         css: {
-          bg: 'transparent',
-          color: '$text',
+          bg: "transparent",
+          color: "$text",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.8,
-              fill: '$primaryLightActive'
-            }
-          }
-        }
+              fill: "$primaryLightActive",
+            },
+          },
+        },
       },
       {
         light: true,
-        color: 'primary',
+        color: "primary",
         css: {
-          bg: 'transparent',
-          color: '$primary',
+          bg: "transparent",
+          color: "$primary",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.8,
-              fill: '$primaryLightActive'
-            }
-          }
-        }
+              fill: "$primaryLightActive",
+            },
+          },
+        },
       },
       {
         light: true,
-        color: 'secondary',
+        color: "secondary",
         css: {
-          bg: 'transparent',
-          color: '$secondary',
+          bg: "transparent",
+          color: "$secondary",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.8,
-              fill: '$secondaryLightActive'
-            }
-          }
-        }
+              fill: "$secondaryLightActive",
+            },
+          },
+        },
       },
       {
         light: true,
-        color: 'warning',
+        color: "warning",
         css: {
-          bg: 'transparent',
-          color: '$warning',
+          bg: "transparent",
+          color: "$warning",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.8,
-              fill: '$warningLightActive'
-            }
-          }
-        }
+              fill: "$warningLightActive",
+            },
+          },
+        },
       },
       {
         light: true,
-        color: 'success',
+        color: "success",
         css: {
-          bg: 'transparent',
-          color: '$success',
+          bg: "transparent",
+          color: "$success",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.8,
-              fill: '$successLightActive'
-            }
-          }
-        }
+              fill: "$successLightActive",
+            },
+          },
+        },
       },
       {
         light: true,
-        color: 'error',
+        color: "error",
         css: {
-          bg: 'transparent',
-          color: '$error',
+          bg: "transparent",
+          color: "$error",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.8,
-              fill: '$errorLightActive'
-            }
-          }
-        }
+              fill: "$errorLightActive",
+            },
+          },
+        },
       },
       // bordered / color
       {
         bordered: true,
-        color: 'default',
+        color: "default",
         css: {
-          bg: 'transparent',
-          borderColor: '$primary',
-          color: '$primary',
+          bg: "transparent",
+          borderColor: "$primary",
+          color: "$primary",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
-              fill: '$primary'
-            }
-          }
-        }
+            ".nextui-drip-filler": {
+              fill: "$primary",
+            },
+          },
+        },
       },
       {
         bordered: true,
-        color: 'primary',
+        color: "primary",
         css: {
-          bg: 'transparent',
-          borderColor: '$primary',
-          color: '$primary',
+          bg: "transparent",
+          borderColor: "$primary",
+          color: "$primary",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
-              fill: '$primary'
-            }
-          }
-        }
+            ".nextui-drip-filler": {
+              fill: "$primary",
+            },
+          },
+        },
       },
       {
         bordered: true,
-        color: 'secondary',
+        color: "secondary",
         css: {
-          bg: 'transparent',
-          borderColor: '$secondary',
-          color: '$secondary',
+          bg: "transparent",
+          borderColor: "$secondary",
+          color: "$secondary",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
-              fill: '$secondary'
-            }
-          }
-        }
+            ".nextui-drip-filler": {
+              fill: "$secondary",
+            },
+          },
+        },
       },
       {
         bordered: true,
-        color: 'success',
+        color: "success",
         css: {
-          bg: 'transparent',
-          borderColor: '$success',
-          color: '$success',
+          bg: "transparent",
+          borderColor: "$success",
+          color: "$success",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
-              fill: '$success'
-            }
-          }
-        }
+            ".nextui-drip-filler": {
+              fill: "$success",
+            },
+          },
+        },
       },
       {
         bordered: true,
-        color: 'warning',
+        color: "warning",
         css: {
-          bg: 'transparent',
-          borderColor: '$warning',
-          color: '$warning',
+          bg: "transparent",
+          borderColor: "$warning",
+          color: "$warning",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
-              fill: '$warning'
-            }
-          }
-        }
+            ".nextui-drip-filler": {
+              fill: "$warning",
+            },
+          },
+        },
       },
       {
         bordered: true,
-        color: 'error',
+        color: "error",
         css: {
-          bg: 'transparent',
-          borderColor: '$error',
-          color: '$error',
+          bg: "transparent",
+          borderColor: "$error",
+          color: "$error",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
-              fill: '$error'
-            }
-          }
-        }
+            ".nextui-drip-filler": {
+              fill: "$error",
+            },
+          },
+        },
       },
       {
         bordered: true,
-        color: 'gradient',
-        css: {
-          bg: 'transparent',
-          color: '$text',
-          padding: '$$buttonBorderWeight',
-          bgClip: 'content-box, border-box',
-          borderColor: '$primary',
-          backgroundImage:
-            'linear-gradient($background, $background), $gradient',
-          border: 'none',
+        color: "gradient",
+        css: {
+          bg: "transparent",
+          color: "$text",
+          padding: "$$buttonBorderWeight",
+          bgClip: "content-box, border-box",
+          borderColor: "$primary",
+          backgroundImage: "linear-gradient($background, $background), $gradient",
+          border: "none",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
-              fill: '$secondary'
-            }
-          }
-        }
+            ".nextui-drip-filler": {
+              fill: "$secondary",
+            },
+          },
+        },
       },
       // ghost / color && isHovered
       {
         ghost: true,
         isHovered: true,
-        color: 'default',
+        color: "default",
         css: {
-          bg: '$primary',
-          color: '$primarySolidContrast'
-        }
+          bg: "$primary",
+          color: "$primarySolidContrast",
+        },
       },
       {
         ghost: true,
         isHovered: true,
-        color: 'primary',
+        color: "primary",
         css: {
-          bg: '$primary',
-          color: '$primarySolidContrast'
-        }
+          bg: "$primary",
+          color: "$primarySolidContrast",
+        },
       },
       {
         ghost: true,
         isHovered: true,
-        color: 'secondary',
+        color: "secondary",
         css: {
-          bg: '$secondary',
-          color: '$secondarySolidContrast'
-        }
+          bg: "$secondary",
+          color: "$secondarySolidContrast",
+        },
       },
       {
         ghost: true,
         isHovered: true,
-        color: 'success',
+        color: "success",
         css: {
-          bg: '$success',
-          color: '$successSolidContrast'
-        }
+          bg: "$success",
+          color: "$successSolidContrast",
+        },
       },
       {
         ghost: true,
         isHovered: true,
-        color: 'warning',
+        color: "warning",
         css: {
-          bg: '$warning',
-          color: '$warningSolidContrast'
-        }
+          bg: "$warning",
+          color: "$warningSolidContrast",
+        },
       },
       {
         ghost: true,
         isHovered: true,
-        color: 'error',
+        color: "error",
         css: {
-          bg: '$error',
-          color: '$errorSolidContrast'
-        }
+          bg: "$error",
+          color: "$errorSolidContrast",
+        },
       },
       {
         ghost: true,
-        color: 'gradient',
+        color: "gradient",
         isHovered: true,
         css: {
-          bg: '$gradient',
-          color: '$white'
-        }
+          bg: "$gradient",
+          color: "$white",
+        },
       },
       // flat / color
       {
         flat: true,
-        color: 'default',
+        color: "default",
         css: {
-          bg: '$primaryLight',
-          color: '$primaryLightContrast',
+          bg: "$primaryLight",
+          color: "$primaryLightContrast",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.4,
-              fill: '$primary'
-            }
-          }
-        }
+              fill: "$primary",
+            },
+          },
+        },
       },
       {
         flat: true,
-        color: 'primary',
+        color: "primary",
         css: {
-          bg: '$primaryLight',
-          color: '$primaryLightContrast',
+          bg: "$primaryLight",
+          color: "$primaryLightContrast",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.4,
-              fill: '$primary'
-            }
-          }
-        }
+              fill: "$primary",
+            },
+          },
+        },
       },
       {
         flat: true,
-        color: 'secondary',
+        color: "secondary",
         css: {
-          bg: '$secondaryLight',
-          color: '$secondaryLightContrast',
+          bg: "$secondaryLight",
+          color: "$secondaryLightContrast",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.4,
-              fill: '$secondary'
-            }
-          }
-        }
+              fill: "$secondary",
+            },
+          },
+        },
       },
       {
         flat: true,
-        color: 'success',
+        color: "success",
         css: {
-          bg: '$successLight',
-          color: '$successLightContrast',
+          bg: "$successLight",
+          color: "$successLightContrast",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.4,
-              fill: '$success'
-            }
-          }
-        }
+              fill: "$success",
+            },
+          },
+        },
       },
       {
         flat: true,
-        color: 'warning',
+        color: "warning",
         css: {
-          bg: '$warningLight',
-          color: '$warningLightContrast',
+          bg: "$warningLight",
+          color: "$warningLightContrast",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.4,
-              fill: '$warning'
-            }
-          }
-        }
+              fill: "$warning",
+            },
+          },
+        },
       },
       {
         flat: true,
-        color: 'error',
+        color: "error",
         css: {
-          bg: '$errorLight',
-          color: '$errorLightContrast',
+          bg: "$errorLight",
+          color: "$errorLightContrast",
           [`& ${StyledDrip}`]: {
-            '.nextui-drip-filler': {
+            ".nextui-drip-filler": {
               opacity: 0.4,
-              fill: '$error'
-            }
-          }
-        }
+              fill: "$error",
+            },
+          },
+        },
       },
       // flat / isHovered / color
       {
         flat: true,
         isHovered: true,
-        color: 'default',
+        color: "default",
         css: {
-          bg: '$primaryLightHover'
-        }
+          bg: "$primaryLightHover",
+        },
       },
       {
         flat: true,
         isHovered: true,
-        color: 'primary',
+        color: "primary",
         css: {
-          bg: '$primaryLightHover'
-        }
+          bg: "$primaryLightHover",
+        },
       },
       {
         flat: true,
         isHovered: true,
-        color: 'secondary',
+        color: "secondary",
         css: {
-          bg: '$secondaryLightHover'
-        }
+          bg: "$secondaryLightHover",
+        },
       },
       {
         flat: true,
         isHovered: true,
-        color: 'success',
+        color: "success",
         css: {
-          bg: '$successLightHover'
-        }
+          bg: "$successLightHover",
+        },
       },
       {
         flat: true,
         isHovered: true,
-        color: 'warning',
+        color: "warning",
         css: {
-          bg: '$warningLightHover'
-        }
+          bg: "$warningLightHover",
+        },
       },
       {
         flat: true,
         isHovered: true,
-        color: 'error',
+        color: "error",
         css: {
-          bg: '$errorLightHover'
-        }
+          bg: "$errorLightHover",
+        },
       },
       // flat / isPressed / color
       {
         flat: true,
         isPressed: true,
-        color: 'default',
+        color: "default",
         css: {
-          bg: '$primaryLightActive'
-        }
+          bg: "$primaryLightActive",
+        },
       },
       {
         flat: true,
         isPressed: true,
-        color: 'primary',
+        color: "primary",
         css: {
-          bg: '$primaryLightActive'
-        }
+          bg: "$primaryLightActive",
+        },
       },
       {
         flat: true,
         isPressed: true,
-        color: 'secondary',
+        color: "secondary",
         css: {
-          bg: '$secondaryLightActive'
-        }
+          bg: "$secondaryLightActive",
+        },
       },
       {
         flat: true,
         isPressed: true,
-        color: 'success',
+        color: "success",
         css: {
-          bg: '$successLightActive'
-        }
+          bg: "$successLightActive",
+        },
       },
       {
         flat: true,
         isPressed: true,
-        color: 'warning',
+        color: "warning",
         css: {
-          bg: '$warningLightActive'
-        }
+          bg: "$warningLightActive",
+        },
       },
       {
         flat: true,
         isPressed: true,
-        color: 'error',
+        color: "error",
         css: {
-          bg: '$errorLightActive'
-        }
+          bg: "$errorLightActive",
+        },
       },
       // auto / gradient-color / bordered
       {
         auto: true,
-        color: 'gradient',
+        color: "gradient",
         bordered: true,
         css: {
-          '.nextui-button-text': {
-            px: '$$buttonPadding'
+          ".nextui-button-text": {
+            px: "$$buttonPadding",
+          },
+          ".nextui-button-icon": {
+            ml: "$$buttonPadding",
           },
-          '.nextui-button-icon': {
-            ml: '$$buttonPadding'
+          ".nextui-button-icon-right": {
+            mr: "$$buttonPadding",
           },
-          '.nextui-button-icon-right': {
-            mr: '$$buttonPadding'
+          ".nextui-button-text-left": {
+            pl: 0,
           },
-          '.nextui-button-text-left': {
-            pl: 0
+          ".nextui-button-text-right": {
+            pr: 0,
           },
-          '.nextui-button-text-right': {
-            pr: 0
-          }
-        }
+        },
       },
       // rounded && size
       {
         rounded: true,
-        size: 'xs',
+        size: "xs",
         css: {
-          br: '$pill'
-        }
+          br: "$pill",
+        },
       },
       {
         rounded: true,
-        size: 'sm',
+        size: "sm",
         css: {
-          br: '$pill'
-        }
+          br: "$pill",
+        },
       },
       {
         rounded: true,
-        size: 'md',
+        size: "md",
         css: {
-          br: '$pill'
-        }
+          br: "$pill",
+        },
       },
       {
         rounded: true,
-        size: 'lg',
+        size: "lg",
         css: {
-          br: '$pill'
-        }
+          br: "$pill",
+        },
       },
       {
         rounded: true,
-        size: 'xl',
+        size: "xl",
         css: {
-          br: '$pill'
-        }
-      }
+          br: "$pill",
+        },
+      },
     ],
     defaultVariants: {
-      color: 'default',
-      borderWeight: 'normal',
+      color: "default",
+      borderWeight: "normal",
       animated: true,
-      size: 'md'
-    }
+      size: "md",
+    },
   },
   cssFocusVisible,
-  sharedDialogPopup
+  sharedDialogPopup,
 );
 
 export type ButtonVariantsProps = VariantProps<typeof StyledButton>;
diff --git a/packages/react/src/button/button.tsx b/packages/react/src/button/button.tsx
index 6477a75324..61cf41c372 100644
--- a/packages/react/src/button/button.tsx
+++ b/packages/react/src/button/button.tsx
@@ -1,29 +1,28 @@
-import React, { useMemo, PropsWithoutRef, RefAttributes } from 'react';
-import { useFocusRing } from '@react-aria/focus';
-import { useButton } from '@react-aria/button';
-import { useHover } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
-import type {
-  PressEvents,
-  PressEvent,
-  FocusableProps
-} from '@react-types/shared';
-import type { AriaButtonProps } from '@react-types/button';
-import type { FocusRingAria } from '@react-aria/focus';
-import useWarning from '../use-warning';
-import ButtonDrip from '../utils/drip';
-import { CSS } from '../theme/stitches.config';
-import { NormalColors } from '../utils/prop-types';
-import { filterPropsWithGroup, getCssColors } from './utils';
-import { useButtonGroupContext } from './button-group-context';
-import ButtonGroup from './button-group';
-import ButtonIcon from './button-icon';
-import clsx from '../utils/clsx';
-import useDrip from '../use-drip';
-import StyledButton, { ButtonVariantsProps } from './button.styles';
-import withDefaults from '../utils/with-defaults';
-import { useDOMRef } from '../utils/dom';
-import { __DEV__ } from '../utils/assertion';
+import type {PressEvents, PressEvent, FocusableProps} from "@react-types/shared";
+import type {AriaButtonProps} from "@react-types/button";
+import type {FocusRingAria} from "@react-aria/focus";
+
+import React, {useMemo, PropsWithoutRef, RefAttributes} from "react";
+import {useFocusRing} from "@react-aria/focus";
+import {useButton} from "@react-aria/button";
+import {useHover} from "@react-aria/interactions";
+import {mergeProps} from "@react-aria/utils";
+
+import {warn} from "../utils/console";
+import ButtonDrip from "../utils/drip";
+import {CSS} from "../theme/stitches.config";
+import {NormalColors} from "../utils/prop-types";
+import clsx from "../utils/clsx";
+import useDrip from "../use-drip";
+import withDefaults from "../utils/with-defaults";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+
+import {filterPropsWithGroup, getCssColors} from "./utils";
+import {useButtonGroupContext} from "./button-group-context";
+import ButtonGroup from "./button-group";
+import ButtonIcon from "./button-icon";
+import StyledButton, {ButtonVariantsProps} from "./button.styles";
 
 export interface Props extends PressEvents, FocusableProps, AriaButtonProps {
   light?: boolean;
@@ -54,8 +53,8 @@ const defaultProps = {
   disabled: false,
   autoFocus: false,
   auto: false,
-  className: '',
-  type: 'button'
+  className: "",
+  type: "button",
 };
 
 type NativeAttrs = Omit<React.ButtonHTMLAttributes<unknown>, keyof Props>;
@@ -66,7 +65,7 @@ interface IFocusRingAria extends FocusRingAria {
 
 export type ButtonProps = Props &
   NativeAttrs &
-  Omit<ButtonVariantsProps, 'isPressed' | 'isHovered' | 'isChildLess'> & {
+  Omit<ButtonVariantsProps, "isPressed" | "isHovered" | "isChildLess"> & {
     css?: CSS;
   };
 
@@ -85,7 +84,7 @@ const Button = React.forwardRef(
       onPressUp,
       ...btnProps
     }: ButtonProps,
-    ref: React.Ref<HTMLButtonElement | null>
+    ref: React.Ref<HTMLButtonElement | null>,
   ) => {
     const groupConfig = useButtonGroupContext();
     const filteredProps = filterPropsWithGroup(btnProps, groupConfig);
@@ -110,9 +109,7 @@ const Button = React.forwardRef(
       ...props
     } = filteredProps;
 
-    const handleDrip = (
-      e: React.MouseEvent<HTMLButtonElement> | PressEvent
-    ) => {
+    const handleDrip = (e: React.MouseEvent<HTMLButtonElement> | PressEvent) => {
       if (animated && ripple && buttonRef.current) {
         onDripClickHandler(e);
       }
@@ -124,7 +121,7 @@ const Button = React.forwardRef(
     };
 
     const handlePress = (e: PressEvent) => {
-      if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
+      if (e.pointerType === "keyboard" || e.pointerType === "virtual") {
         handleDrip(e);
         // TODO: take this out and deprecate onClick function for next release (only use the @react-aria/button impl)
         onClick?.(e as any);
@@ -133,7 +130,7 @@ const Button = React.forwardRef(
     };
 
     const buttonRef = useDOMRef(ref);
-    const { buttonProps, isPressed } = useButton(
+    const {buttonProps, isPressed} = useButton(
       {
         ...btnProps,
         onClick: handleClick,
@@ -143,97 +140,85 @@ const Button = React.forwardRef(
         onPressStart,
         onPressEnd,
         onPressChange,
-        onPressUp
+        onPressUp,
       } as AriaButtonProps,
-      buttonRef
+      buttonRef,
     );
 
-    const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
-    const { isFocused, isFocusVisible, focusProps }: IFocusRingAria =
-      useFocusRing({ autoFocus });
+    const {hoverProps, isHovered} = useHover({isDisabled: disabled});
+    const {isFocused, isFocusVisible, focusProps}: IFocusRingAria = useFocusRing({autoFocus});
 
-    const { onClick: onDripClickHandler, ...dripBindings } = useDrip(
-      false,
-      buttonRef
-    );
+    const {onClick: onDripClickHandler, ...dripBindings} = useDrip(false, buttonRef);
 
     /* eslint-enable @typescript-eslint/no-unused-vars */
-    if (__DEV__ && filteredProps.color === 'gradient' && (flat || light)) {
-      useWarning(
-        'Using the gradient color on flat and light buttons will have no effect.'
-      );
+    if (__DEV__ && filteredProps.color === "gradient" && (flat || light)) {
+      warn("Using the gradient color on flat and light buttons will have no effect.");
     }
     const hasIcon = icon || iconRight;
     const isChildLess = React.Children.count(children) === 0;
     const isRight = Boolean(iconRight);
 
     const getState = useMemo(() => {
-      if (isPressed) return 'pressed';
-      if (isHovered) return 'hovered';
-      return disabled ? 'disabled' : 'ready';
+      if (isPressed) return "pressed";
+      if (isHovered) return "hovered";
+
+      return disabled ? "disabled" : "ready";
     }, [disabled, isHovered, isPressed]);
 
     const getIconCss = useMemo<any>(() => {
       if (isRight) return iconRightCss;
+
       return iconLeftCss;
     }, [isRight, iconRightCss, iconLeftCss]);
 
     return (
       <StyledButton
-        as={as}
         ref={buttonRef}
-        borderWeight={borderWeight}
+        animated={animated}
+        as={as}
         auto={auto}
-        flat={flat}
-        light={light}
-        ghost={ghost}
+        borderWeight={borderWeight}
         bordered={bordered || ghost}
-        data-state={getState}
-        animated={animated}
-        isChildLess={isChildLess}
-        isPressed={isPressed}
-        isHovered={isHovered || (ghost && isFocused)}
-        isFocusVisible={isFocusVisible && !disabled}
-        className={clsx(
-          'nextui-button',
-          `nextui-button--${getState}`,
-          className
-        )}
+        className={clsx("nextui-button", `nextui-button--${getState}`, className)}
         css={{
           ...(css as any),
-          ...cssColors
+          ...cssColors,
         }}
+        data-state={getState}
+        flat={flat}
+        ghost={ghost}
+        isChildLess={isChildLess}
+        isFocusVisible={isFocusVisible && !disabled}
+        isHovered={isHovered || (ghost && isFocused)}
+        isPressed={isPressed}
+        light={light}
         {...mergeProps(buttonProps, focusProps, hoverProps, props)}
       >
         {React.Children.count(children) === 0 ? (
           <ButtonIcon
             isSingle
+            css={getIconCss}
             isAuto={auto}
+            isGradientButtonBorder={props.color === "gradient" && (bordered || ghost)}
             isRight={isRight}
-            css={getIconCss}
-            isGradientButtonBorder={
-              props.color === 'gradient' && (bordered || ghost)
-            }
           >
             {hasIcon}
           </ButtonIcon>
         ) : hasIcon ? (
           <>
             <ButtonIcon
-              isSingle={false}
+              css={getIconCss}
               isAuto={auto}
+              isGradientButtonBorder={props.color === "gradient" && (bordered || ghost)}
               isRight={isRight}
-              css={getIconCss}
-              isGradientButtonBorder={
-                props.color === 'gradient' && (bordered || ghost)
-              }
+              isSingle={false}
             >
               {hasIcon}
             </ButtonIcon>
             <div
-              className={clsx('nextui-button-text', {
-                'nextui-button-text-right': isRight,
-                'nextui-button-text-left': !isRight
+              className={clsx("nextui-button-text", {
+                "nextui-button-text-right": isRight,
+                "nextui-button-text-left": !isRight,
               })}
             >
               {children}
@@ -245,7 +230,7 @@ const Button = React.forwardRef(
         <ButtonDrip color="white" {...dripBindings} />
       </StyledButton>
     );
-  }
+  },
 );
 
 type ButtonComponent<T, P = {}> = React.ForwardRefExoticComponent<
@@ -255,12 +240,9 @@ type ButtonComponent<T, P = {}> = React.ForwardRefExoticComponent<
 };
 
 if (__DEV__) {
-  Button.displayName = 'NextUI.Button';
+  Button.displayName = "NextUI.Button";
 }
 
-Button.toString = () => '.nextui-button';
+Button.toString = () => ".nextui-button";
 
-export default withDefaults(Button, defaultProps) as ButtonComponent<
-  HTMLElement,
-  ButtonProps
->;
+export default withDefaults(Button, defaultProps) as ButtonComponent<HTMLElement, ButtonProps>;
diff --git a/packages/react/src/button/index.ts b/packages/react/src/button/index.ts
index fcac57e8bd..46a9d65fd7 100644
--- a/packages/react/src/button/index.ts
+++ b/packages/react/src/button/index.ts
@@ -1,15 +1,15 @@
-import Button from './button';
-import ButtonGroup from './button-group';
+import Button from "./button";
+import ButtonGroup from "./button-group";
 
-export type { ButtonProps } from './button';
-export type { ButtonGroupProps } from './button-group';
-export type { ButtonIconProps } from './button-icon';
+export type {ButtonProps} from "./button";
+export type {ButtonGroupProps} from "./button-group";
+export type {ButtonIconProps} from "./button-icon";
 
-export { StyledButton } from './button.styles';
-export type { ButtonVariantsProps } from './button.styles';
-export { StyledButtonGroup } from './button-group.styles';
-export type { ButtonGroupVariantsProps } from './button-group.styles';
-export { StyledButtonIcon } from './button-icon';
+export {StyledButton} from "./button.styles";
+export type {ButtonVariantsProps} from "./button.styles";
+export {StyledButtonGroup} from "./button-group.styles";
+export type {ButtonGroupVariantsProps} from "./button-group.styles";
+export {StyledButtonIcon} from "./button-icon";
 
 Button.Group = ButtonGroup;
 
diff --git a/packages/react/src/button/utils.tsx b/packages/react/src/button/utils.tsx
index 5406ba2620..0e442ec6f6 100644
--- a/packages/react/src/button/utils.tsx
+++ b/packages/react/src/button/utils.tsx
@@ -1,12 +1,14 @@
-import React from 'react';
-import { ButtonProps } from './button';
-import { ButtonGroupConfig } from './button-group-context';
+import React from "react";
+
+import {ButtonProps} from "./button";
+import {ButtonGroupConfig} from "./button-group-context";
 
 export const filterPropsWithGroup = (
   props: React.PropsWithChildren<ButtonProps>,
-  config: ButtonGroupConfig
+  config: ButtonGroupConfig,
 ): ButtonProps => {
   if (!config.isButtonGroup) return props;
+
   return {
     ...props,
     auto: true,
@@ -21,58 +23,55 @@ export const filterPropsWithGroup = (
     light: config.light ?? props.light,
     size: config.size ?? props.size,
     color: config.color ?? props.color,
-    disabled: config.disabled ?? props.disabled
+    disabled: config.disabled ?? props.disabled,
   };
 };
 
 export const getCssColors = (props: React.PropsWithChildren<ButtonProps>) => {
   if (!props.disabled) {
-    if (
-      props.auto &&
-      props.color === 'gradient' &&
-      (props.bordered || props.ghost)
-    ) {
+    if (props.auto && props.color === "gradient" && (props.bordered || props.ghost)) {
       return {
-        px: '$$buttonBorderWeight',
-        py: '$$buttonBorderWeight'
+        px: "$$buttonBorderWeight",
+        py: "$$buttonBorderWeight",
       };
     }
+
     return {};
   }
   const defaultDisabledCss = {
-    bg: '$accents1',
-    color: '$accents7',
-    transform: 'none',
-    boxShadow: 'none',
-    pe: 'none'
+    bg: "$accents1",
+    color: "$accents7",
+    transform: "none",
+    boxShadow: "none",
+    pe: "none",
   };
 
   if (!props.bordered && !props.flat && !props.ghost && !props.light) {
     return defaultDisabledCss;
   }
-  if (props.color === 'gradient' && (props.bordered || props.ghost)) {
+  if (props.color === "gradient" && (props.bordered || props.ghost)) {
     return {
-      color: '$accents4',
+      color: "$accents4",
       backgroundImage:
-        'linear-gradient($background, $background), linear-gradient($accents2, $accents2)',
-      transform: 'none',
-      boxShadow: 'none',
-      pe: 'none',
-      pl: '$$buttonBorderWeight',
-      pr: '$$buttonBorderWeight'
+        "linear-gradient($background, $background), linear-gradient($accents2, $accents2)",
+      transform: "none",
+      boxShadow: "none",
+      pe: "none",
+      pl: "$$buttonBorderWeight",
+      pr: "$$buttonBorderWeight",
     };
   }
   if (props.bordered || props.ghost || props.light) {
     return {
       ...defaultDisabledCss,
-      bg: 'transparent',
-      borderColor: '$accents4'
+      bg: "transparent",
+      borderColor: "$accents4",
     };
   }
   if (props.flat) {
     return {
       ...defaultDisabledCss,
-      bg: '$accents1'
+      bg: "$accents1",
     };
   }
 
diff --git a/packages/react/src/card/__tests__/footer.test.tsx b/packages/react/src/card/__tests__/footer.test.tsx
index 6ee289a99b..357045693f 100644
--- a/packages/react/src/card/__tests__/footer.test.tsx
+++ b/packages/react/src/card/__tests__/footer.test.tsx
@@ -1,25 +1,29 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Card from '../index';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('Card Footer', () => {
-  it('should render correctly', () => {
+import Card from "../index";
+
+describe("Card Footer", () => {
+  it("should render correctly", () => {
     const wrapper = mount(
       <Card>
         <p>card</p>
         <Card.Footer>footer</Card.Footer>
-      </Card>
+      </Card>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work properly when use alone', () => {
+  it("should work properly when use alone", () => {
     const wrapper = mount(<Card.Footer>footer</Card.Footer>);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with disable-auto-margin', () => {
-    const wrapper = mount(<Card.Footer css={{ m: 0 }}>footer</Card.Footer>);
+  it("should work with disable-auto-margin", () => {
+    const wrapper = mount(<Card.Footer css={{m: 0}}>footer</Card.Footer>);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 });
diff --git a/packages/react/src/card/__tests__/index.test.tsx b/packages/react/src/card/__tests__/index.test.tsx
index 7b5e804951..abca228144 100644
--- a/packages/react/src/card/__tests__/index.test.tsx
+++ b/packages/react/src/card/__tests__/index.test.tsx
@@ -1,41 +1,46 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Card from '../index';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('Card', () => {
-  it('should render correctly', () => {
+import Card from "../index";
+
+describe("Card", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Card>card</Card>);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support hoverable', () => {
+  it("should support hoverable", () => {
     const wrapper = mount(
       <div>
         <Card isHoverable>card</Card>
-      </div>
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support clikable', () => {
+  it("should support clikable", () => {
     const wrapper = mount(
       <div>
         <Card isPressable>card</Card>
-      </div>
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support custom css', () => {
+  it("should support custom css", () => {
     const wrapper = mount(
       <div>
-        <Card css={{ bg: '$red400' }}>card</Card>
-      </div>
+        <Card css={{bg: "$red400"}}>card</Card>
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support card types', () => {
+  it("should support card types", () => {
     const wrapper = mount(
       <div>
         <Card color="default">card</Card>
@@ -44,19 +49,21 @@ describe('Card', () => {
         <Card color="secondary">card</Card>
         <Card color="warning">card</Card>
         <Card color="gradient">card</Card>
-      </div>
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render correctly when nested', () => {
+  it("should render correctly when nested", () => {
     const wrapper = mount(
       <Card>
         <Card>
           <Card>card</Card>
         </Card>
-      </Card>
+      </Card>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 });
diff --git a/packages/react/src/card/card.stories.tsx b/packages/react/src/card/card.stories.tsx
index 195c77b48b..72ab260297 100644
--- a/packages/react/src/card/card.stories.tsx
+++ b/packages/react/src/card/card.stories.tsx
@@ -1,33 +1,24 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Card from './index';
-import { styled } from '../theme/stitches.config';
-import {
-  Row,
-  Col,
-  Link,
-  Text,
-  Code,
-  Button,
-  Grid,
-  Checkbox,
-  Spacer,
-  Input
-} from '../index';
-import AppleEvent from '../../assets/apple-event.jpeg';
-import Homepods from '../../assets/homepod.jpeg';
-import Relaxing from '../../assets/relaxing.jpeg';
-import BreathingApp from '../../assets/breathing-app-icon.jpeg';
-import { Mail, Password } from '../utils/icons';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {styled} from "../theme/stitches.config";
+import {Row, Col, Link, Text, Code, Button, Grid, Checkbox, Spacer, Input} from "../index";
+import AppleEvent from "../../assets/apple-event.jpeg";
+import Homepods from "../../assets/homepod.jpeg";
+import Relaxing from "../../assets/relaxing.jpeg";
+import BreathingApp from "../../assets/breathing-app-icon.jpeg";
+import {Mail, Password} from "../utils/icons";
+
+import Card from "./index";
 
 export default {
-  title: 'Surfaces/Card',
-  component: Card
+  title: "Surfaces/Card",
+  component: Card,
 } as Meta;
 
 export const Default = () => (
-  <Card css={{ w: '400px' }}>
-    <Card.Body css={{ py: '$lg' }}>
+  <Card css={{w: "400px"}}>
+    <Card.Body css={{py: "$lg"}}>
       <Text>A basic card</Text>
     </Card.Body>
   </Card>
@@ -62,37 +53,30 @@ export const Variants = () => (
 export const WithFooter = () => (
   <Grid.Container gap={2}>
     <Grid xs={4}>
-      <Card css={{ p: '$6' }}>
+      <Card css={{p: "$6"}}>
         <Card.Header>
           <img
             alt="nextui logo"
+            height="34px"
             src="https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
             width="34px"
-            height="34px"
           />
-          <Grid.Container css={{ pl: '$6' }}>
+          <Grid.Container css={{pl: "$6"}}>
             <Grid xs={12}>
-              <Text h4 css={{ lineHeight: '$xs' }}>
+              <Text h4 css={{lineHeight: "$xs"}}>
                 Next UI
               </Text>
             </Grid>
             <Grid xs={12}>
-              <Text css={{ color: '$accents8' }}>nextui.org</Text>
+              <Text css={{color: "$accents8"}}>nextui.org</Text>
             </Grid>
           </Grid.Container>
         </Card.Header>
-        <Card.Body css={{ py: '$2' }}>
-          <Text>
-            Make beautiful websites regardless of your design experience.
-          </Text>
+        <Card.Body css={{py: "$2"}}>
+          <Text>Make beautiful websites regardless of your design experience.</Text>
         </Card.Body>
         <Card.Footer>
-          <Link
-            icon
-            color="primary"
-            target="_blank"
-            href="https://github.com/nextui-org/nextui"
-          >
+          <Link icon color="primary" href="https://github.com/nextui-org/nextui" target="_blank">
             Visit source code on GitHub.
           </Link>
         </Card.Footer>
@@ -105,15 +89,10 @@ export const AbsImageWithHeader = () => {
   return (
     <Grid.Container gap={1} justify="center">
       <Grid>
-        <Card css={{ w: '330px' }}>
-          <Card.Header css={{ position: 'absolute', top: 5, zIndex: 1 }}>
+        <Card css={{w: "330px"}}>
+          <Card.Header css={{position: "absolute", top: 5, zIndex: 1}}>
             <Col>
-              <Text
-                size={12}
-                weight="bold"
-                transform="uppercase"
-                color="#ffffffAA"
-              >
+              <Text color="#ffffffAA" size={12} transform="uppercase" weight="bold">
                 What to watch
               </Text>
               <Text h3 color="white">
@@ -122,12 +101,12 @@ export const AbsImageWithHeader = () => {
             </Col>
           </Card.Header>
           <Card.Image
+            alt="Apple event background"
             autoResize={false}
-            src={AppleEvent}
             height={440}
+            src={AppleEvent}
+            style={{objectFit: "cover"}}
             width="100%"
-            alt="Apple event background"
-            style={{ objectFit: 'cover' }}
           />
         </Card>
       </Grid>
@@ -139,35 +118,30 @@ export const AbsImgWithHeaderFooter = () => {
   return (
     <Grid.Container gap={2} justify="center">
       <Grid>
-        <Card css={{ w: '330px', bg: '$gray50' }}>
-          <Card.Header css={{ position: 'absolute', top: 5, zIndex: 1 }}>
+        <Card css={{w: "330px", bg: "$gray50"}}>
+          <Card.Header css={{position: "absolute", top: 5, zIndex: 1}}>
             <Col>
-              <Text
-                size={12}
-                weight="bold"
-                transform="uppercase"
-                color="#9E9E9E"
-              >
+              <Text color="#9E9E9E" size={12} transform="uppercase" weight="bold">
                 New
               </Text>
               <Text h2 color="black">
                 HomePod mini
               </Text>
-              <Text size={14} style={{ paddingRight: '10px' }}>
-                Room-filling sound, Intelligent assistant. Smart home control.
-                Works seamlessly with iPhone. Check it out
+              <Text size={14} style={{paddingRight: "10px"}}>
+                Room-filling sound, Intelligent assistant. Smart home control. Works seamlessly with
+                iPhone. Check it out
               </Text>
             </Col>
           </Card.Header>
           <Card.Image
+            alt="Apple homedpods background"
             autoResize={false}
-            src={Homepods}
             height={440}
+            src={Homepods}
+            style={{objectFit: "cover", paddingTop: "100px"}}
             width="100%"
-            alt="Apple homedpods background"
-            style={{ objectFit: 'cover', paddingTop: '100px' }}
           />
-          <Card.Footer css={{ m: 0 }}>
+          <Card.Footer css={{m: 0}}>
             <Row>
               <Col>
                 <Text size={12}>Available soon.</Text>
@@ -175,8 +149,8 @@ export const AbsImgWithHeaderFooter = () => {
               </Col>
               <Col>
                 <Row justify="flex-end">
-                  <Button flat auto rounded>
-                    <Text size={12} weight="bold" transform="uppercase">
+                  <Button auto flat rounded>
+                    <Text size={12} transform="uppercase" weight="bold">
                       Notify Me
                     </Text>
                   </Button>
@@ -187,15 +161,10 @@ export const AbsImgWithHeaderFooter = () => {
         </Card>
       </Grid>
       <Grid>
-        <Card css={{ w: '630px' }}>
-          <Card.Header css={{ position: 'absolute', top: 5, zIndex: 1 }}>
+        <Card css={{w: "630px"}}>
+          <Card.Header css={{position: "absolute", top: 5, zIndex: 1}}>
             <Col>
-              <Text
-                size={12}
-                weight="bold"
-                transform="uppercase"
-                color="#9E9E9E"
-              >
+              <Text color="#9E9E9E" size={12} transform="uppercase" weight="bold">
                 Your day your way
               </Text>
               <Text h3 color="white">
@@ -204,21 +173,21 @@ export const AbsImgWithHeaderFooter = () => {
             </Col>
           </Card.Header>
           <Card.Image
+            alt="Apple homedpods background"
             autoResize={false}
-            src={Relaxing}
             height={440}
+            src={Relaxing}
+            style={{objectFit: "cover"}}
             width="100%"
-            alt="Apple homedpods background"
-            style={{ objectFit: 'cover' }}
           />
           <Card.Footer
             isBlurred
             css={{
-              position: 'absolute',
-              bgBlur: '#0f111466',
-              borderTop: '$borderWeights$light solid $gray500',
+              position: "absolute",
+              bgBlur: "#0f111466",
+              borderTop: "$borderWeights$light solid $gray500",
               bottom: 0,
-              zIndex: 1
+              zIndex: 1,
             }}
           >
             <Row>
@@ -226,12 +195,12 @@ export const AbsImgWithHeaderFooter = () => {
                 <Row>
                   <Col span={3}>
                     <Card.Image
+                      alt="Breathing app icon"
                       autoResize={false}
-                      src={BreathingApp}
-                      style={{ background: 'black' }}
                       height={40}
+                      src={BreathingApp}
+                      style={{background: "black"}}
                       width={40}
-                      alt="Breathing app icon"
                     />
                   </Col>
                   <Col>
@@ -239,20 +208,15 @@ export const AbsImgWithHeaderFooter = () => {
                       Breathing App
                     </Text>
                     <Text color="#d1d1d1" size={12}>
-                      Get a good night's sleep.
+                      Get a good night&apos;s sleep.
                     </Text>
                   </Col>
                 </Row>
               </Col>
               <Col>
                 <Row justify="flex-end">
-                  <Button
-                    flat
-                    auto
-                    rounded
-                    css={{ color: '#94f9f0', bg: '#94f9f026' }}
-                  >
-                    <Text size={12} weight="bold" transform="uppercase">
+                  <Button auto flat rounded css={{color: "#94f9f0", bg: "#94f9f026"}}>
+                    <Text size={12} transform="uppercase" weight="bold">
                       Get App
                     </Text>
                   </Button>
@@ -268,16 +232,11 @@ export const AbsImgWithHeaderFooter = () => {
 
 export const CoverImage = () => (
   <Grid.Container gap={2} justify="center">
-    <Grid xs={12} sm={4}>
+    <Grid sm={4} xs={12}>
       <Card>
-        <Card.Header css={{ position: 'absolute', zIndex: 1, top: 5 }}>
+        <Card.Header css={{position: "absolute", zIndex: 1, top: 5}}>
           <Col>
-            <Text
-              size={12}
-              weight="bold"
-              transform="uppercase"
-              color="#ffffffAA"
-            >
+            <Text color="#ffffffAA" size={12} transform="uppercase" weight="bold">
               What to watch
             </Text>
             <Text h4 color="white">
@@ -286,24 +245,19 @@ export const CoverImage = () => (
           </Col>
         </Card.Header>
         <Card.Image
-          src="https://nextui.org/images/card-example-4.jpeg"
+          alt="Card image background"
+          height={340}
           objectFit="cover"
+          src="https://nextui.org/images/card-example-4.jpeg"
           width="100%"
-          height={340}
-          alt="Card image background"
         />
       </Card>
     </Grid>
-    <Grid xs={12} sm={4}>
-      <Card css={{ w: '100%' }}>
-        <Card.Header css={{ position: 'absolute', zIndex: 1, top: 5 }}>
+    <Grid sm={4} xs={12}>
+      <Card css={{w: "100%"}}>
+        <Card.Header css={{position: "absolute", zIndex: 1, top: 5}}>
           <Col>
-            <Text
-              size={12}
-              weight="bold"
-              transform="uppercase"
-              color="#ffffffAA"
-            >
+            <Text color="#ffffffAA" size={12} transform="uppercase" weight="bold">
               Plant a tree
             </Text>
             <Text h4 color="white">
@@ -312,24 +266,19 @@ export const CoverImage = () => (
           </Col>
         </Card.Header>
         <Card.Image
-          src="https://nextui.org/images/card-example-3.jpeg"
-          width="100%"
+          alt="Card image background"
           height={340}
           objectFit="cover"
-          alt="Card image background"
+          src="https://nextui.org/images/card-example-3.jpeg"
+          width="100%"
         />
       </Card>
     </Grid>
-    <Grid xs={12} sm={4}>
-      <Card css={{ bg: '$black', w: '100%' }}>
-        <Card.Header css={{ position: 'absolute', zIndex: 1, top: 5 }}>
+    <Grid sm={4} xs={12}>
+      <Card css={{bg: "$black", w: "100%"}}>
+        <Card.Header css={{position: "absolute", zIndex: 1, top: 5}}>
           <Col>
-            <Text
-              size={12}
-              weight="bold"
-              transform="uppercase"
-              color="#ffffffAA"
-            >
+            <Text color="#ffffffAA" size={12} transform="uppercase" weight="bold">
               Supercharged
             </Text>
             <Text h4 color="white">
@@ -338,24 +287,19 @@ export const CoverImage = () => (
           </Col>
         </Card.Header>
         <Card.Image
-          src="https://nextui.org/images/card-example-2.jpeg"
-          width="100%"
+          alt="Card image background"
           height={340}
           objectFit="cover"
-          alt="Card image background"
+          src="https://nextui.org/images/card-example-2.jpeg"
+          width="100%"
         />
       </Card>
     </Grid>
-    <Grid xs={12} sm={5}>
-      <Card css={{ w: '100%', h: '400px' }}>
-        <Card.Header css={{ position: 'absolute', zIndex: 1, top: 5 }}>
+    <Grid sm={5} xs={12}>
+      <Card css={{w: "100%", h: "400px"}}>
+        <Card.Header css={{position: "absolute", zIndex: 1, top: 5}}>
           <Col>
-            <Text
-              size={12}
-              weight="bold"
-              transform="uppercase"
-              color="#ffffffAA"
-            >
+            <Text color="#ffffffAA" size={12} transform="uppercase" weight="bold">
               New
             </Text>
             <Text h3 color="black">
@@ -363,23 +307,23 @@ export const CoverImage = () => (
             </Text>
           </Col>
         </Card.Header>
-        <Card.Body css={{ p: 0 }}>
+        <Card.Body css={{p: 0}}>
           <Card.Image
-            src="https://nextui.org/images/card-example-6.jpeg"
-            width="100%"
+            alt="Card example background"
             height="100%"
             objectFit="cover"
-            alt="Card example background"
+            src="https://nextui.org/images/card-example-6.jpeg"
+            width="100%"
           />
         </Card.Body>
         <Card.Footer
           isBlurred
           css={{
-            position: 'absolute',
-            bgBlur: '#ffffff66',
-            borderTop: '$borderWeights$light solid rgba(255, 255, 255, 0.2)',
+            position: "absolute",
+            bgBlur: "#ffffff66",
+            borderTop: "$borderWeights$light solid rgba(255, 255, 255, 0.2)",
             bottom: 0,
-            zIndex: 1
+            zIndex: 1,
           }}
         >
           <Row>
@@ -393,13 +337,8 @@ export const CoverImage = () => (
             </Col>
             <Col>
               <Row justify="flex-end">
-                <Button flat auto rounded color="secondary">
-                  <Text
-                    css={{ color: 'inherit' }}
-                    size={12}
-                    weight="bold"
-                    transform="uppercase"
-                  >
+                <Button auto flat rounded color="secondary">
+                  <Text css={{color: "inherit"}} size={12} transform="uppercase" weight="bold">
                     Notify Me
                   </Text>
                 </Button>
@@ -409,11 +348,11 @@ export const CoverImage = () => (
         </Card.Footer>
       </Card>
     </Grid>
-    <Grid xs={12} sm={7}>
-      <Card css={{ w: '100%', h: '400px' }}>
-        <Card.Header css={{ position: 'absolute', zIndex: 1, top: 5 }}>
+    <Grid sm={7} xs={12}>
+      <Card css={{w: "100%", h: "400px"}}>
+        <Card.Header css={{position: "absolute", zIndex: 1, top: 5}}>
           <Col>
-            <Text size={12} weight="bold" transform="uppercase" color="#9E9E9E">
+            <Text color="#9E9E9E" size={12} transform="uppercase" weight="bold">
               Your day your way
             </Text>
             <Text h3 color="white">
@@ -421,23 +360,23 @@ export const CoverImage = () => (
             </Text>
           </Col>
         </Card.Header>
-        <Card.Body css={{ p: 0 }}>
+        <Card.Body css={{p: 0}}>
           <Card.Image
-            src="https://nextui.org/images/card-example-5.jpeg"
+            alt="Relaxing app background"
+            height="100%"
             objectFit="cover"
+            src="https://nextui.org/images/card-example-5.jpeg"
             width="100%"
-            height="100%"
-            alt="Relaxing app background"
           />
         </Card.Body>
         <Card.Footer
           isBlurred
           css={{
-            position: 'absolute',
-            bgBlur: '#0f111466',
-            borderTop: '$borderWeights$light solid $gray700',
+            position: "absolute",
+            bgBlur: "#0f111466",
+            borderTop: "$borderWeights$light solid $gray700",
             bottom: 0,
-            zIndex: 1
+            zIndex: 1,
           }}
         >
           <Row>
@@ -445,11 +384,11 @@ export const CoverImage = () => (
               <Row>
                 <Col span={3}>
                   <Card.Image
-                    src="https://nextui.org/images/breathing-app-icon.jpeg"
-                    css={{ bg: 'black', br: '50%' }}
+                    alt="Breathing app icon"
+                    css={{bg: "black", br: "50%"}}
                     height={40}
+                    src="https://nextui.org/images/breathing-app-icon.jpeg"
                     width={40}
-                    alt="Breathing app icon"
                   />
                 </Col>
                 <Col>
@@ -457,25 +396,15 @@ export const CoverImage = () => (
                     Breathing App
                   </Text>
                   <Text color="#d1d1d1" size={12}>
-                    Get a good night's sleep.
+                    Get a good night&apos;s sleep.
                   </Text>
                 </Col>
               </Row>
             </Col>
             <Col>
               <Row justify="flex-end">
-                <Button
-                  flat
-                  auto
-                  rounded
-                  css={{ color: '#94f9f0', bg: '#94f9f026' }}
-                >
-                  <Text
-                    css={{ color: 'inherit' }}
-                    size={12}
-                    weight="bold"
-                    transform="uppercase"
-                  >
+                <Button auto flat rounded css={{color: "#94f9f0", bg: "#94f9f026"}}>
+                  <Text css={{color: "inherit"}} size={12} transform="uppercase" weight="bold">
                     Get App
                   </Text>
                 </Button>
@@ -491,67 +420,65 @@ export const CoverImage = () => (
 export const PrimaryAction = () => {
   const list = [
     {
-      title: 'Orange',
-      img: '/images/fruit-1.jpeg',
-      price: '$5.50'
+      title: "Orange",
+      img: "/images/fruit-1.jpeg",
+      price: "$5.50",
     },
     {
-      title: 'Tangerine',
-      img: '/images/fruit-2.jpeg',
-      price: '$3.00'
+      title: "Tangerine",
+      img: "/images/fruit-2.jpeg",
+      price: "$3.00",
     },
     {
-      title: 'Raspberry',
-      img: '/images/fruit-3.jpeg',
-      price: '$10.00'
+      title: "Raspberry",
+      img: "/images/fruit-3.jpeg",
+      price: "$10.00",
     },
     {
-      title: 'Lemon',
-      img: '/images/fruit-4.jpeg',
-      price: '$5.30'
+      title: "Lemon",
+      img: "/images/fruit-4.jpeg",
+      price: "$5.30",
     },
     {
-      title: 'Advocato',
-      img: '/images/fruit-5.jpeg',
-      price: '$15.70'
+      title: "Advocato",
+      img: "/images/fruit-5.jpeg",
+      price: "$15.70",
     },
     {
-      title: 'Lemon 2',
-      img: '/images/fruit-6.jpeg',
-      price: '$8.00'
+      title: "Lemon 2",
+      img: "/images/fruit-6.jpeg",
+      price: "$8.00",
     },
     {
-      title: 'Banana',
-      img: '/images/fruit-7.jpeg',
-      price: '$7.50'
+      title: "Banana",
+      img: "/images/fruit-7.jpeg",
+      price: "$7.50",
     },
     {
-      title: 'Watermelon',
-      img: '/images/fruit-8.jpeg',
-      price: '$12.20'
-    }
+      title: "Watermelon",
+      img: "/images/fruit-8.jpeg",
+      price: "$12.20",
+    },
   ];
 
   return (
     <Grid.Container gap={2} justify="flex-start">
       {list.map((item, index) => (
-        <Grid xs={6} sm={3} key={index}>
+        <Grid key={index} sm={3} xs={6}>
           <Card isPressable>
-            <Card.Body css={{ p: 0 }}>
+            <Card.Body css={{p: 0}}>
               <Card.Image
-                src={'https://nextui.org' + item.img}
+                alt={item.title}
+                height={140}
                 objectFit="cover"
+                src={"https://nextui.org" + item.img}
                 width="100%"
-                height={140}
-                alt={item.title}
               />
             </Card.Body>
-            <Card.Footer css={{ justifyItems: 'flex-start' }}>
-              <Row wrap="wrap" justify="space-between">
+            <Card.Footer css={{justifyItems: "flex-start"}}>
+              <Row justify="space-between" wrap="wrap">
                 <Text b>{item.title}</Text>
-                <Text css={{ color: '$accents7', fontWeight: '$semibold' }}>
-                  {item.price}
-                </Text>
+                <Text css={{color: "$accents7", fontWeight: "$semibold"}}>{item.price}</Text>
               </Row>
             </Card.Footer>
           </Card>
@@ -564,59 +491,55 @@ export const PrimaryAction = () => {
 export const CenterImgWithHeader = () => {
   const list = [
     {
-      title: 'Mac',
-      img: require('../../assets/mac.png')
+      title: "Mac",
+      img: require("../../assets/mac.png"),
     },
     {
-      title: 'iPhone',
-      img: require('../../assets/iphone.png')
+      title: "iPhone",
+      img: require("../../assets/iphone.png"),
     },
     {
-      title: 'iPad',
-      img: require('../../assets/ipad.png')
+      title: "iPad",
+      img: require("../../assets/ipad.png"),
     },
     {
-      title: 'Apple Watch',
-      img: require('../../assets/apple-watch.png')
+      title: "Apple Watch",
+      img: require("../../assets/apple-watch.png"),
     },
     {
-      title: 'AirPods',
-      img: require('../../assets/airpods.png')
+      title: "AirPods",
+      img: require("../../assets/airpods.png"),
     },
     {
-      title: 'AirTag',
-      img: require('../../assets/airtag.png')
+      title: "AirTag",
+      img: require("../../assets/airtag.png"),
     },
     {
-      title: 'Apple TV',
-      img: require('../../assets/appletv.png')
+      title: "Apple TV",
+      img: require("../../assets/appletv.png"),
     },
     {
-      title: 'HomePod mini',
-      img: require('../../assets/homepod-mini.png')
+      title: "HomePod mini",
+      img: require("../../assets/homepod-mini.png"),
     },
     {
-      title: 'Accessories',
-      img: require('../../assets/accessories.png')
-    }
+      title: "Accessories",
+      img: require("../../assets/accessories.png"),
+    },
   ];
+
   return (
     <Grid.Container gap={2} justify="center">
       {list.map((item, index) => (
         <Grid key={index}>
-          <Card isHoverable isPressable css={{ w: '200px', h: '220px' }}>
-            <Card.Header css={{ p: 0 }}>
-              <Text h5 style={{ paddingLeft: '24px', paddingTop: '10px' }}>
+          <Card isHoverable isPressable css={{w: "200px", h: "220px"}}>
+            <Card.Header css={{p: 0}}>
+              <Text h5 style={{paddingLeft: "24px", paddingTop: "10px"}}>
                 {item.title}
               </Text>
             </Card.Header>
-            <Card.Body css={{ h: '100%', jc: 'center' }}>
-              <Card.Image
-                autoResize={false}
-                src={item.img}
-                width={180}
-                alt={item.title}
-              />
+            <Card.Body css={{h: "100%", jc: "center"}}>
+              <Card.Image alt={item.title} autoResize={false} src={item.img} width={180} />
             </Card.Body>
           </Card>
         </Grid>
@@ -626,20 +549,18 @@ export const CenterImgWithHeader = () => {
 };
 
 export const WithDivider = () => (
-  <Card css={{ w: '400px' }}>
+  <Card css={{w: "400px"}}>
     <Card.Header>
       <Text b>Description</Text>
     </Card.Header>
     <Card.Divider />
     <Card.Body>
-      <Text>
-        The Object constructor creates an object wrapper for the given value.
-      </Text>
+      <Text>The Object constructor creates an object wrapper for the given value.</Text>
     </Card.Body>
     <Card.Divider />
     <Card.Footer>
       <Text>
-        When called in a non-constructor context, Object behaves identically to{' '}
+        When called in a non-constructor context, Object behaves identically to{" "}
         <Code>new Object()</Code>.
       </Text>
     </Card.Footer>
@@ -647,33 +568,33 @@ export const WithDivider = () => (
 );
 
 export const Shadows = () => {
-  const Box = styled('div', {
-    size: '120px',
-    dflex: 'center',
-    bg: '$backgroundContrast',
-    br: '$md'
+  const Box = styled("div", {
+    size: "120px",
+    dflex: "center",
+    bg: "$backgroundContrast",
+    br: "$md",
   });
 
-  const shadows = ['$xs', '$sm', '$md', '$lg', '$xl'];
+  const shadows = ["$xs", "$sm", "$md", "$lg", "$xl"];
 
   return (
-    <Grid.Container justify="center" gap={3}>
-      <Grid xs={12} justify="center">
+    <Grid.Container gap={3} justify="center">
+      <Grid justify="center" xs={12}>
         <Text b>Drop shadows</Text>
       </Grid>
       {shadows.map((shadow, index) => (
-        <Grid key={`${shadow}_${index}`} xs={6} sm={2}>
-          <Box css={{ dropShadow: shadow }}>
+        <Grid key={`${shadow}_${index}`} sm={2} xs={6}>
+          <Box css={{dropShadow: shadow}}>
             <Text>Shadow: {shadow}</Text>
           </Box>
         </Grid>
       ))}
-      <Grid xs={12} justify="center">
+      <Grid justify="center" xs={12}>
         <Text b>Box shadows</Text>
       </Grid>
       {shadows.map((shadow, index) => (
-        <Grid key={`${shadow}_${index}`} xs={6} sm={2}>
-          <Box css={{ boxShadow: shadow }}>
+        <Grid key={`${shadow}_${index}`} sm={2} xs={6}>
+          <Box css={{boxShadow: shadow}}>
             <Text>Shadow: {shadow}</Text>
           </Box>
         </Grid>
@@ -684,8 +605,8 @@ export const Shadows = () => {
 
 export const withForm = () => {
   return (
-    <Card css={{ mw: '400px' }}>
-      <Card.Header css={{ justifyContent: 'center' }}>
+    <Card css={{mw: "400px"}}>
+      <Card.Header css={{justifyContent: "center"}}>
         <Text size={18}>
           Welcome to&nbsp;
           <Text b size={18}>
@@ -693,40 +614,40 @@ export const withForm = () => {
           </Text>
         </Text>
       </Card.Header>
-      <Card.Body css={{ px: '$10', pt: '$1', ov: 'visible' }}>
+      <Card.Body css={{px: "$10", pt: "$1", ov: "visible"}}>
         <Input
-          clearable
           bordered
+          clearable
           fullWidth
-          size="lg"
           color="primary"
-          placeholder="Email"
           contentLeft={<Mail fill="currentColor" />}
+          placeholder="Email"
+          size="lg"
         />
         <Spacer y={0.5} />
         <Input
-          clearable
           bordered
+          clearable
           fullWidth
-          size="lg"
           color="primary"
-          placeholder="Password"
           contentLeft={<Password />}
+          placeholder="Password"
+          size="lg"
         />
         <Spacer y={0.5} />
-        <Row justify="space-between" align="center">
+        <Row align="center" justify="space-between">
           <Checkbox>
-            <Text size={14} css={{ color: '$accents8' }}>
+            <Text css={{color: "$accents8"}} size={14}>
               Remember me
             </Text>
           </Checkbox>
-          <Link href="#" css={{ color: '$link', fontSize: '$sm' }}>
+          <Link css={{color: "$link", fontSize: "$sm"}} href="#">
             Forgot password?
           </Link>
         </Row>
       </Card.Body>
-      <Card.Footer css={{ pt: 0 }}>
-        <Grid.Container justify="flex-end" gap={1}>
+      <Card.Footer css={{pt: 0}}>
+        <Grid.Container gap={1} justify="flex-end">
           <Grid>
             <Button auto flat>
               Sign Up
diff --git a/packages/react/src/card/card.styles.ts b/packages/react/src/card/card.styles.ts
index 886e0e88e6..e79c07a1aa 100644
--- a/packages/react/src/card/card.styles.ts
+++ b/packages/react/src/card/card.styles.ts
@@ -1,106 +1,106 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import { StyledDrip } from '../utils/drip';
-import { cssNoBlurriness, cssFocusVisible } from '../theme/shared-css';
+import {styled, VariantProps} from "../theme/stitches.config";
+import {StyledDrip} from "../utils/drip";
+import {cssNoBlurriness, cssFocusVisible} from "../theme/shared-css";
 
-export const StyledCardBody = styled('div', {
-  d: 'flex',
-  w: '100%',
-  h: 'auto',
-  flex: '1 1 auto',
-  fd: 'column',
-  jc: 'inherit',
-  ai: 'inherit',
-  ac: 'inherit',
-  py: '$lg',
-  px: '$sm',
-  oy: 'auto',
-  position: 'relative',
-  ta: 'left'
+export const StyledCardBody = styled("div", {
+  d: "flex",
+  w: "100%",
+  h: "auto",
+  flex: "1 1 auto",
+  fd: "column",
+  jc: "inherit",
+  ai: "inherit",
+  ac: "inherit",
+  py: "$lg",
+  px: "$sm",
+  oy: "auto",
+  position: "relative",
+  ta: "left",
 });
 
 export const StyledCard = styled(
-  'div',
+  "div",
   {
-    $$cardColor: '$colors$backgroundContrast',
-    $$cardTextColor: '$colors$text',
+    $$cardColor: "$colors$backgroundContrast",
+    $$cardTextColor: "$colors$text",
     m: 0,
     p: 0,
-    br: '$lg',
-    bg: '$$cardColor',
-    color: '$$cardTextColor',
-    position: 'relative',
-    display: 'flex',
-    overflow: 'hidden',
-    fd: 'column',
-    width: '100%',
-    height: 'auto',
-    boxSizing: 'border-box',
-    '@motion': {
-      transition: 'none'
+    br: "$lg",
+    bg: "$$cardColor",
+    color: "$$cardTextColor",
+    position: "relative",
+    display: "flex",
+    overflow: "hidden",
+    fd: "column",
+    width: "100%",
+    height: "auto",
+    boxSizing: "border-box",
+    "@motion": {
+      transition: "none",
     },
-    '.nextui-image': {
-      width: '100%'
+    ".nextui-image": {
+      width: "100%",
     },
     [`& ${StyledDrip}`]: {
-      zIndex: '$1',
-      '.nextui-drip-filler': {
+      zIndex: "$1",
+      ".nextui-drip-filler": {
         opacity: 0.25,
-        fill: '$accents6'
-      }
+        fill: "$accents6",
+      },
     },
     variants: {
       variant: {
         flat: {
-          bg: '$accents0'
+          bg: "$accents0",
         },
         shadow: {
-          dropShadow: '$lg'
+          dropShadow: "$lg",
         },
         bordered: {
-          borderStyle: 'solid',
-          borderColor: '$border'
-        }
+          borderStyle: "solid",
+          borderColor: "$border",
+        },
       },
       borderWeight: {
         light: {
-          bw: '$light'
+          bw: "$light",
         },
         normal: {
-          bw: '$normal'
+          bw: "$normal",
         },
         bold: {
-          bw: '$bold'
+          bw: "$bold",
         },
         extrabold: {
-          bw: '$extrabold'
+          bw: "$extrabold",
         },
         black: {
-          bw: '$black'
-        }
+          bw: "$black",
+        },
       },
       disableAnimation: {
         true: {
-          transition: 'none'
+          transition: "none",
         },
         false: {
-          transition: '$card'
-        }
+          transition: "$card",
+        },
       },
       isPressable: {
         true: {
-          cursor: 'pointer',
-          us: 'none',
-          WebkitTapHighlightColor: 'transparent'
-        }
+          cursor: "pointer",
+          us: "none",
+          WebkitTapHighlightColor: "transparent",
+        },
       },
       isPressed: {
-        true: {}
+        true: {},
       },
       isHovered: {
         true: {
-          dropShadow: '$lg'
-        }
-      }
+          dropShadow: "$lg",
+        },
+      },
     },
     compoundVariants: [
       //  isPreseed && !disableAnimation
@@ -108,61 +108,61 @@ export const StyledCard = styled(
         isPressed: true,
         disableAnimation: false,
         css: {
-          transform: 'scale(0.97)'
-        }
+          transform: "scale(0.97)",
+        },
       },
       // isHovered && !disableAnimation
       {
         isHovered: true,
         disableAnimation: false,
         css: {
-          transform: 'translateY(-2px)'
-        }
+          transform: "translateY(-2px)",
+        },
       },
       // isHovered && variant === 'shadow'
       {
         isHovered: true,
-        variant: 'shadow',
+        variant: "shadow",
         css: {
-          dropShadow: '$xl'
-        }
-      }
-    ]
+          dropShadow: "$xl",
+        },
+      },
+    ],
   },
   cssNoBlurriness,
-  cssFocusVisible
+  cssFocusVisible,
 );
 
-export const StyledCardHeader = styled('div', {
-  w: '100%',
-  display: 'flex',
+export const StyledCardHeader = styled("div", {
+  w: "100%",
+  display: "flex",
   flexShrink: 0,
-  zIndex: '$1',
-  jc: 'flex-start',
-  ai: 'center',
-  overflow: 'hidden',
-  color: 'inherit',
-  p: '$sm'
+  zIndex: "$1",
+  jc: "flex-start",
+  ai: "center",
+  overflow: "hidden",
+  color: "inherit",
+  p: "$sm",
 });
 
-export const StyledCardFooter = styled('div', {
-  w: '100%',
-  h: 'auto',
-  p: '$sm',
-  d: 'flex',
-  ai: 'center',
-  overflow: 'hidden',
-  color: 'inherit',
-  bblr: '$lg',
-  bbrr: '$lg',
+export const StyledCardFooter = styled("div", {
+  w: "100%",
+  h: "auto",
+  p: "$sm",
+  d: "flex",
+  ai: "center",
+  overflow: "hidden",
+  color: "inherit",
+  bblr: "$lg",
+  bbrr: "$lg",
   variants: {
     isBlurred: {
       true: {
-        bf: 'saturate(180%) blur(10px)',
-        bg: '$$cardColor'
-      }
-    }
-  }
+        bf: "saturate(180%) blur(10px)",
+        bg: "$$cardColor",
+      },
+    },
+  },
 });
 
 // types
diff --git a/packages/react/src/card/card.tsx b/packages/react/src/card/card.tsx
index 47d1913e41..3c97cdab87 100644
--- a/packages/react/src/card/card.tsx
+++ b/packages/react/src/card/card.tsx
@@ -1,28 +1,31 @@
-import React, { PropsWithoutRef, RefAttributes } from 'react';
-import type { ReactNode } from 'react';
-import Drip from '../utils/drip';
-import { CSS } from '../theme/stitches.config';
-import { useCard } from './use-card';
-import type { UseCardProps } from './use-card';
-import { Image, Divider } from '../index';
+import type {ReactNode} from "react";
+import type {UseCardProps} from "./use-card";
+
+import React, {PropsWithoutRef, RefAttributes} from "react";
+
+import Drip from "../utils/drip";
+import {CSS} from "../theme/stitches.config";
+import {Image, Divider} from "../index";
+import {__DEV__} from "../utils/assertion";
+
+import {useCard} from "./use-card";
 import {
   StyledCard,
   StyledCardHeader as CardHeader,
   StyledCardFooter as CardFooter,
-  StyledCardBody as CardBody
-} from './card.styles';
-import { __DEV__ } from '../utils/assertion';
+  StyledCardBody as CardBody,
+} from "./card.styles";
 
-interface Props extends Omit<UseCardProps, 'ref'> {
+interface Props extends Omit<UseCardProps, "ref"> {
   children: ReactNode | ReactNode[];
   as?: keyof JSX.IntrinsicElements;
 }
 
-export type CardProps = Props & { css?: CSS };
+export type CardProps = Props & {css?: CSS};
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ ...cardProps }, ref: React.Ref<HTMLDivElement | null>) => {
-    const { as, css, children, ...otherProps } = cardProps;
+  ({...cardProps}, ref: React.Ref<HTMLDivElement | null>) => {
+    const {as, css, children, ...otherProps} = cardProps;
 
     const {
       cardRef,
@@ -35,32 +38,30 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
       borderWeight,
       isHovered,
       getCardProps,
-      dripBindings
-    } = useCard({ ...otherProps, ref });
+      dripBindings,
+    } = useCard({...otherProps, ref});
 
     return (
       <StyledCard
         ref={cardRef}
         as={as}
-        css={css as any}
-        variant={variant}
-        role={isPressable ? 'button' : 'section'}
         borderWeight={borderWeight}
+        css={css as any}
         disableAnimation={disableAnimation}
+        isFocusVisible={isFocusVisible}
+        isHovered={isHovered}
         isPressable={isPressable}
         isPressed={isPressed}
-        isHovered={isHovered}
+        role={isPressable ? "button" : "section"}
         tabIndex={isPressable ? 0 : -1}
-        isFocusVisible={isFocusVisible}
+        variant={variant}
         {...getCardProps()}
       >
-        {isPressable && !disableAnimation && !disableRipple && (
-          <Drip {...dripBindings} />
-        )}
+        {isPressable && !disableAnimation && !disableRipple && <Drip {...dripBindings} />}
         {children}
       </StyledCard>
     );
-  }
+  },
 );
 
 type CardComponent<T, P = {}> = React.ForwardRefExoticComponent<
@@ -74,9 +75,9 @@ type CardComponent<T, P = {}> = React.ForwardRefExoticComponent<
 };
 
 if (__DEV__) {
-  Card.displayName = 'NextUI.Card';
+  Card.displayName = "NextUI.Card";
 }
 
-Card.toString = () => '.nextui-card';
+Card.toString = () => ".nextui-card";
 
 export default Card as CardComponent<HTMLDivElement, CardProps>;
diff --git a/packages/react/src/card/index.ts b/packages/react/src/card/index.ts
index 22818c465f..c35321c23f 100644
--- a/packages/react/src/card/index.ts
+++ b/packages/react/src/card/index.ts
@@ -1,21 +1,17 @@
-import Card from './card';
+import Image from "../image";
+import Divider from "../divider";
+
+import Card from "./card";
 import {
   StyledCardHeader as CardHeader,
   StyledCardFooter as CardFooter,
-  StyledCardBody as CardBody
-} from './card.styles';
-import Image from '../image';
-import Divider from '../divider';
+  StyledCardBody as CardBody,
+} from "./card.styles";
 
-export type { CardProps } from './card';
+export type {CardProps} from "./card";
 
-export {
-  StyledCard,
-  StyledCardHeader,
-  StyledCardFooter,
-  StyledCardBody
-} from './card.styles';
-export type { CardFooterVariantsProps, CardVariantsProps } from './card.styles';
+export {StyledCard, StyledCardHeader, StyledCardFooter, StyledCardBody} from "./card.styles";
+export type {CardFooterVariantsProps, CardVariantsProps} from "./card.styles";
 
 Card.Header = CardHeader;
 Card.Body = CardBody;
diff --git a/packages/react/src/card/use-card.ts b/packages/react/src/card/use-card.ts
index 0b7a26a204..4c01d4931d 100644
--- a/packages/react/src/card/use-card.ts
+++ b/packages/react/src/card/use-card.ts
@@ -1,18 +1,16 @@
-import React, { useCallback } from 'react';
-import { useFocusRing } from '@react-aria/focus';
-import type {
-  PressEvents,
-  PressEvent,
-  FocusableProps
-} from '@react-types/shared';
-import { mergeProps } from '@react-aria/utils';
-import type { FocusRingAria } from '@react-aria/focus';
-import { usePress } from '@react-aria/interactions';
-import { useHover } from '@react-aria/interactions';
-import type { ReactRef } from './../utils/refs';
-import type { NormalWeights, CardVariants } from './../utils/prop-types';
-import useDrip from '../use-drip';
-import { useDOMRef } from '../utils/dom';
+import type {PressEvents, PressEvent, FocusableProps} from "@react-types/shared";
+import type {FocusRingAria} from "@react-aria/focus";
+import type {ReactRef} from "./../utils/refs";
+import type {NormalWeights, CardVariants} from "./../utils/prop-types";
+
+import React, {useCallback} from "react";
+import {useFocusRing} from "@react-aria/focus";
+import {mergeProps} from "@react-aria/utils";
+import {usePress} from "@react-aria/interactions";
+import {useHover} from "@react-aria/interactions";
+
+import useDrip from "../use-drip";
+import {useDOMRef} from "../utils/dom";
 
 interface Props extends PressEvents, FocusableProps {
   ref: ReactRef<HTMLDivElement | null>;
@@ -31,7 +29,7 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export type UseCardProps = Props & NativeAttrs;
 
 interface IFocusRingAria extends FocusRingAria {
-  focusProps: Omit<React.HTMLAttributes<HTMLElement>, 'css'>;
+  focusProps: Omit<React.HTMLAttributes<HTMLElement>, "css">;
 }
 
 /**
@@ -42,9 +40,9 @@ export const useCard = (props: UseCardProps) => {
     ref,
     disableAnimation = false,
     disableRipple = false,
-    variant = 'shadow',
+    variant = "shadow",
     isHoverable = false,
-    borderWeight = 'light',
+    borderWeight = "light",
     isPressable = false,
     onClick,
     onPress,
@@ -55,10 +53,7 @@ export const useCard = (props: UseCardProps) => {
 
   const cardRef = useDOMRef<HTMLDivElement>(ref);
 
-  const { onClick: onDripClickHandler, ...dripBindings } = useDrip(
-    false,
-    cardRef
-  );
+  const {onClick: onDripClickHandler, ...dripBindings} = useDrip(false, cardRef);
 
   const handleDrip = (e: React.MouseEvent<HTMLButtonElement> | PressEvent) => {
     if (!disableAnimation && !disableRipple && cardRef.current) {
@@ -75,7 +70,7 @@ export const useCard = (props: UseCardProps) => {
   };
 
   const handlePress = (e: PressEvent) => {
-    if (e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
+    if (e.pointerType === "keyboard" || e.pointerType === "virtual") {
       handleDrip(e);
       // TODO: take this out and deprecate onClick function for next release (only use the @react-aria/button impl)
       onClick?.(e as any);
@@ -83,20 +78,20 @@ export const useCard = (props: UseCardProps) => {
     onPress?.(e);
   };
 
-  const { isPressed, pressProps } = usePress({
+  const {isPressed, pressProps} = usePress({
     isDisabled: !isPressable,
     onPress: handlePress,
     allowTextSelectionOnPress,
-    ...otherProps
+    ...otherProps,
   });
 
-  const { hoverProps, isHovered } = useHover({
+  const {hoverProps, isHovered} = useHover({
     isDisabled: !isHoverable,
-    ...otherProps
+    ...otherProps,
   });
 
-  const { isFocusVisible, focusProps }: IFocusRingAria = useFocusRing({
-    autoFocus
+  const {isFocusVisible, focusProps}: IFocusRingAria = useFocusRing({
+    autoFocus,
   });
 
   pressProps.onClick = handleClick;
@@ -105,14 +100,14 @@ export const useCard = (props: UseCardProps) => {
     (props = {}) => {
       return {
         ...mergeProps(
-          isPressable ? { ...pressProps, ...focusProps } : {},
+          isPressable ? {...pressProps, ...focusProps} : {},
           isHoverable ? hoverProps : {},
           otherProps,
-          props
-        )
+          props,
+        ),
       };
     },
-    [isPressable, isHoverable, pressProps, focusProps, hoverProps, otherProps]
+    [isPressable, isHoverable, pressProps, focusProps, hoverProps, otherProps],
   );
 
   return {
@@ -127,7 +122,7 @@ export const useCard = (props: UseCardProps) => {
     dripBindings,
     onDripClickHandler,
     isFocusVisible,
-    getCardProps
+    getCardProps,
   };
 };
 
diff --git a/packages/react/src/checkbox/__tests__/group.test.tsx b/packages/react/src/checkbox/__tests__/group.test.tsx
index ed4cfd0dc8..1f4a7cdab8 100644
--- a/packages/react/src/checkbox/__tests__/group.test.tsx
+++ b/packages/react/src/checkbox/__tests__/group.test.tsx
@@ -1,100 +1,105 @@
-import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-import Checkbox from '../index';
-import userEvent from '@testing-library/user-event';
+import React from "react";
+import {mount, ReactWrapper} from "enzyme";
+import userEvent from "@testing-library/user-event";
+
+import Checkbox from "../index";
 
 const getCheckboxElement = (wrapper: ReactWrapper) => {
-  return wrapper.find('input');
+  return wrapper.find("input");
 };
 
-describe('Checkbox Group', () => {
-  it('should render correctly', () => {
+describe("Checkbox Group", () => {
+  it("should render correctly", () => {
     const wrapper = mount(
       <Checkbox.Group defaultValue={[]} label="Select cities">
         <Checkbox value="sydney">Sydney</Checkbox>
         <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
-      </Checkbox.Group>
+      </Checkbox.Group>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work correctly with different sizes', () => {
+  it("should work correctly with different sizes", () => {
     const wrapper = mount(
       <div>
-        <Checkbox.Group
-          defaultValue={[]}
-          aria-label="Single city xs size"
-          size="xs"
-        >
+        <Checkbox.Group aria-label="Single city xs size" defaultValue={[]} size="xs">
           <Checkbox value="sydney">Sydney</Checkbox>
         </Checkbox.Group>
-        <Checkbox.Group value={[]} aria-label="Single city sm size" size="sm">
+        <Checkbox.Group aria-label="Single city sm size" size="sm" value={[]}>
           <Checkbox value="sydney">Sydney</Checkbox>
         </Checkbox.Group>
-        <Checkbox.Group value={[]} aria-label="Single city md size" size="md">
+        <Checkbox.Group aria-label="Single city md size" size="md" value={[]}>
           <Checkbox value="sydney">Sydney</Checkbox>
         </Checkbox.Group>
-        <Checkbox.Group value={[]} aria-label="Single city lg size" size="lg">
+        <Checkbox.Group aria-label="Single city lg size" size="lg" value={[]}>
           <Checkbox value="sydney">Sydney</Checkbox>
         </Checkbox.Group>
-      </div>
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work correctly with initial value', () => {
+  it("should work correctly with initial value", () => {
     let wrapper = mount(
-      <Checkbox.Group label="Select cities" defaultValue={['sydney']}>
+      <Checkbox.Group defaultValue={["sydney"]} label="Select cities">
         <Checkbox value="sydney">Sydney</Checkbox>
         <Checkbox value="beijing">BeiJing</Checkbox>
-      </Checkbox.Group>
+      </Checkbox.Group>,
     );
     const sydney = getCheckboxElement(wrapper).at(0).getDOMNode();
+
     expect((sydney as HTMLInputElement).checked).toBeTruthy();
     const beijing = getCheckboxElement(wrapper).at(1).getDOMNode();
+
     expect((beijing as HTMLInputElement).checked).not.toBeTruthy();
   });
 
-  it('should change value after click', () => {
-    let value = ['sydney'];
+  it("should change value after click", () => {
+    let value = ["sydney"];
     const wrapper = mount(
       <Checkbox.Group
+        defaultValue={["sydney"]}
         label="Select cities"
-        defaultValue={['sydney']}
         onChange={(val) => (value = val)}
       >
         <Checkbox value="sydney">Sydney</Checkbox>
         <Checkbox value="beijing">BeiJing</Checkbox>
-      </Checkbox.Group>
+      </Checkbox.Group>,
     );
     const sydney = getCheckboxElement(wrapper).at(0);
+
     userEvent.click(sydney.getDOMNode());
     expect(value.length).toBe(0);
 
     const beijing = getCheckboxElement(wrapper).at(1);
+
     userEvent.click(beijing.getDOMNode());
-    expect(value).toEqual(expect.arrayContaining(['beijing']));
+    expect(value).toEqual(expect.arrayContaining(["beijing"]));
   });
 
-  it('should ignore events when disabled', () => {
-    let value = ['sydney'];
+  it("should ignore events when disabled", () => {
+    let value = ["sydney"];
     const wrapper = mount(
       <Checkbox.Group
         isDisabled
+        defaultValue={["sydney"]}
         label="Select cities"
-        defaultValue={['sydney']}
         onChange={(val) => (value = val)}
       >
         <Checkbox value="sydney">Sydney</Checkbox>
         <Checkbox value="beijing">BeiJing</Checkbox>
-      </Checkbox.Group>
+      </Checkbox.Group>,
     );
     const sydney = getCheckboxElement(wrapper).at(0);
+
     userEvent.click(sydney.getDOMNode());
     expect(value.length).not.toBe(0);
 
     const beijing = getCheckboxElement(wrapper).at(1);
+
     userEvent.click(beijing.getDOMNode());
-    expect(value).not.toEqual(expect.arrayContaining(['beijing']));
+    expect(value).not.toEqual(expect.arrayContaining(["beijing"]));
   });
 });
diff --git a/packages/react/src/checkbox/__tests__/index.test.tsx b/packages/react/src/checkbox/__tests__/index.test.tsx
index dd30d4d473..77cceaf16e 100644
--- a/packages/react/src/checkbox/__tests__/index.test.tsx
+++ b/packages/react/src/checkbox/__tests__/index.test.tsx
@@ -1,30 +1,29 @@
-import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-import userEvent from '@testing-library/user-event';
-import Checkbox from '../index';
+import React from "react";
+import {mount, ReactWrapper} from "enzyme";
+import userEvent from "@testing-library/user-event";
+
+import Checkbox from "../index";
 
 const getCheckboxElement = (wrapper: ReactWrapper) => {
-  return wrapper.find('input');
+  return wrapper.find("input");
 };
 
 const expectCheckboxIsChecked = (wrapper: ReactWrapper, value: boolean) => {
   expect(getCheckboxElement(wrapper).props().checked).toBe(value);
 };
 
-const expectCheckboxToHaveARIAChecked = (
-  wrapper: ReactWrapper,
-  value: boolean
-) => {
-  expect(getCheckboxElement(wrapper).props()['aria-checked']).toBe(value);
+const expectCheckboxToHaveARIAChecked = (wrapper: ReactWrapper, value: boolean) => {
+  expect(getCheckboxElement(wrapper).props()["aria-checked"]).toBe(value);
 };
 
-describe('Checkbox', () => {
-  it('should render correctly', () => {
+describe("Checkbox", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Checkbox isSelected={true}>Buenos Aires</Checkbox>);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work correctly with different sizes', () => {
+  it("should work correctly with different sizes", () => {
     const wrapper = mount(
       <div>
         <Checkbox size="xs">mini</Checkbox>
@@ -32,13 +31,15 @@ describe('Checkbox', () => {
         <Checkbox size="md">medium</Checkbox>
         <Checkbox size="lg">large</Checkbox>
         <Checkbox size="xl">xlarge</Checkbox>
-      </div>
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work correctly with initial value', () => {
+  it("should work correctly with initial value", () => {
     let wrapper = mount(<Checkbox isSelected={true}>Buenos Aires</Checkbox>);
+
     expectCheckboxIsChecked(wrapper, true);
 
     wrapper = mount(<Checkbox isSelected={false}>Buenos Aires</Checkbox>);
@@ -53,71 +54,68 @@ describe('Checkbox', () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should change value after click', () => {
+  it("should change value after click", () => {
     const Wrapper = () => {
-      const [state, setState] = React.useState<string>('state1');
+      const [state, setState] = React.useState<string>("state1");
 
       return (
-        <Checkbox isSelected onChange={() => setState('state2')}>
+        <Checkbox isSelected onChange={() => setState("state2")}>
           {state}
         </Checkbox>
       );
     };
     const wrapper = mount(<Wrapper />);
     const input = getCheckboxElement(wrapper);
+
     userEvent.click(input.getDOMNode());
-    expect(wrapper.find('.nextui-checkbox-text').at(0).text()).toContain(
-      'state2'
-    );
+    expect(wrapper.find(".nextui-checkbox-text").at(0).text()).toContain("state2");
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should ignore events when disabled', () => {
+  it("should ignore events when disabled", () => {
     const Wrapper = () => {
-      const [state, setState] = React.useState<string>('state1');
+      const [state, setState] = React.useState<string>("state1");
 
       return (
-        <Checkbox isDisabled onChange={() => setState('state2')}>
+        <Checkbox isDisabled onChange={() => setState("state2")}>
           {state}
         </Checkbox>
       );
     };
     const wrapper = mount(<Wrapper />);
     const input = getCheckboxElement(wrapper);
+
     userEvent.click(input.getDOMNode());
-    expect(wrapper.find('.nextui-checkbox-text').at(0).text()).toContain(
-      'state1'
-    );
+    expect(wrapper.find(".nextui-checkbox-text").at(0).text()).toContain("state1");
     expectCheckboxIsChecked(wrapper, false);
     expectCheckboxToHaveARIAChecked(wrapper, false);
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work correctly with indeterminate value', () => {
+  it("should work correctly with indeterminate value", () => {
     let wrapper = mount(
-      <Checkbox isSelected isIndeterminate>
+      <Checkbox isIndeterminate isSelected>
         Buenos Aires
-      </Checkbox>
+      </Checkbox>,
     );
 
-    expect(getCheckboxElement(wrapper).props()['aria-checked']).toBe('mixed');
+    expect(getCheckboxElement(wrapper).props()["aria-checked"]).toBe("mixed");
 
     wrapper = mount(<Checkbox isIndeterminate={false}>Buenos Aires</Checkbox>);
-    expect(getCheckboxElement(wrapper).props()['aria-checked']).toBe(false);
+    expect(getCheckboxElement(wrapper).props()["aria-checked"]).toBe(false);
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work correctly with line-through value', () => {
+  it("should work correctly with line-through value", () => {
     let wrapper = mount(<Checkbox lineThrough>Buenos Aires</Checkbox>);
-    let icon = wrapper.find('.nextui-checkbox-text').at(0).getDOMNode();
-    expect((icon as HTMLInputElement).className).toContain('lineThrough-true');
+    let icon = wrapper.find(".nextui-checkbox-text").at(0).getDOMNode();
+
+    expect((icon as HTMLInputElement).className).toContain("lineThrough-true");
 
     wrapper = mount(<Checkbox lineThrough={false}>Buenos Aires</Checkbox>);
-    icon = wrapper.find('.nextui-checkbox-text').at(0).getDOMNode();
-    expect((icon as HTMLInputElement).className).not.toContain(
-      'lineThrough-true'
-    );
+    icon = wrapper.find(".nextui-checkbox-text").at(0).getDOMNode();
+    expect((icon as HTMLInputElement).className).not.toContain("lineThrough-true");
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
diff --git a/packages/react/src/checkbox/checkbox-context.ts b/packages/react/src/checkbox/checkbox-context.ts
index 08124a6f77..d773756917 100644
--- a/packages/react/src/checkbox/checkbox-context.ts
+++ b/packages/react/src/checkbox/checkbox-context.ts
@@ -1,8 +1,9 @@
-import { createContext } from '../utils/context';
-import { UseCheckboxGroupReturn } from './use-checkbox-group';
+import {createContext} from "../utils/context";
+
+import {UseCheckboxGroupReturn} from "./use-checkbox-group";
 
 export const [CheckboxGroupProvider, useCheckboxGroupContext] =
   createContext<UseCheckboxGroupReturn>({
-    name: 'CheckboxGroupContext',
-    strict: false
+    name: "CheckboxGroupContext",
+    strict: false,
   });
diff --git a/packages/react/src/checkbox/checkbox-group.tsx b/packages/react/src/checkbox/checkbox-group.tsx
index ca69022f68..b5bcadc761 100644
--- a/packages/react/src/checkbox/checkbox-group.tsx
+++ b/packages/react/src/checkbox/checkbox-group.tsx
@@ -1,13 +1,12 @@
-import React from 'react';
-import clsx from '../utils/clsx';
-import { useDOMRef } from '../utils/dom';
-import { __DEV__ } from '../utils/assertion';
-import { CheckboxGroupProvider } from './checkbox-context';
-import { useCheckboxGroup, UseCheckboxGroupProps } from './use-checkbox-group';
-import {
-  StyledCheckboxGroup,
-  StyledCheckboxGroupContainer
-} from './checkbox.styles';
+import React from "react";
+
+import clsx from "../utils/clsx";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+
+import {CheckboxGroupProvider} from "./checkbox-context";
+import {useCheckboxGroup, UseCheckboxGroupProps} from "./use-checkbox-group";
+import {StyledCheckboxGroup, StyledCheckboxGroupContainer} from "./checkbox.styles";
 
 interface Props extends UseCheckboxGroupProps {
   children: React.ReactNode;
@@ -19,9 +18,9 @@ export type CheckboxGroupProps = Props;
 
 const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
   (props: CheckboxGroupProps, ref: React.Ref<HTMLDivElement | null>) => {
-    const { children, className, as, label, ...otherProps } = props;
+    const {children, className, as, label, ...otherProps} = props;
 
-    const { css, ...context } = useCheckboxGroup({ ...otherProps, label });
+    const {css, ...context} = useCheckboxGroup({...otherProps, label});
 
     const domRef = useDOMRef(ref);
 
@@ -29,32 +28,27 @@ const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
       <StyledCheckboxGroup
         ref={domRef}
         {...context.groupProps}
-        className={clsx('nextui-checkbox-group', className)}
-        size={context.size}
-        isDisabled={context.groupState.isDisabled}
         as={as}
+        className={clsx("nextui-checkbox-group", className)}
         css={css}
+        isDisabled={context.groupState.isDisabled}
+        size={context.size}
       >
         {label && (
-          <label
-            className="nextui-checkbox-group-label"
-            {...context.labelProps}
-          >
+          <label className="nextui-checkbox-group-label" {...context.labelProps}>
             {label}
           </label>
         )}
         <StyledCheckboxGroupContainer
           className="nextui-checkbox-group-items"
+          isRow={context.orientation === "horizontal"}
           role="presentation"
-          isRow={context.orientation === 'horizontal'}
         >
-          <CheckboxGroupProvider value={context}>
-            {children}
-          </CheckboxGroupProvider>
+          <CheckboxGroupProvider value={context}>{children}</CheckboxGroupProvider>
         </StyledCheckboxGroupContainer>
       </StyledCheckboxGroup>
     );
-  }
+  },
 );
 
 type CheckboxGroupComponent<T, P = {}> = React.ForwardRefExoticComponent<
@@ -62,12 +56,9 @@ type CheckboxGroupComponent<T, P = {}> = React.ForwardRefExoticComponent<
 >;
 
 if (__DEV__) {
-  CheckboxGroup.displayName = 'NextUI.CheckboxGroup';
+  CheckboxGroup.displayName = "NextUI.CheckboxGroup";
 }
 
-CheckboxGroup.toString = () => '.nextui-checkbox-group';
+CheckboxGroup.toString = () => ".nextui-checkbox-group";
 
-export default CheckboxGroup as CheckboxGroupComponent<
-  HTMLDivElement,
-  CheckboxGroupProps
->;
+export default CheckboxGroup as CheckboxGroupComponent<HTMLDivElement, CheckboxGroupProps>;
diff --git a/packages/react/src/checkbox/checkbox.stories.tsx b/packages/react/src/checkbox/checkbox.stories.tsx
index f7f7b24836..f11ec34962 100644
--- a/packages/react/src/checkbox/checkbox.stories.tsx
+++ b/packages/react/src/checkbox/checkbox.stories.tsx
@@ -1,88 +1,73 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Checkbox from './index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import Checkbox from "./index";
 
 const argTypes = {
   color: {
-    name: 'color',
-    type: { name: 'string', required: false },
+    name: "color",
+    type: {name: "string", required: false},
     control: {
-      type: 'radio',
-      options: [
-        'default',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'error'
-      ]
-    }
+      type: "radio",
+      options: ["default", "primary", "secondary", "success", "warning", "error"],
+    },
   },
   labelColor: {
-    name: 'labelColor',
-    type: { name: 'string', required: false },
+    name: "labelColor",
+    type: {name: "string", required: false},
     control: {
-      type: 'radio',
-      options: [
-        'default',
-        'primary',
-        'secondary',
-        'success',
-        'warning',
-        'error'
-      ]
-    }
+      type: "radio",
+      options: ["default", "primary", "secondary", "success", "warning", "error"],
+    },
   },
   size: {
-    name: 'size',
+    name: "size",
     control: {
-      type: 'radio',
-      options: ['md', 'xs', 'sm', 'lg', 'xl']
-    }
+      type: "radio",
+      options: ["md", "xs", "sm", "lg", "xl"],
+    },
   },
   isDisabled: {
-    name: 'isDisabled',
-    type: { name: 'boolean', required: false },
+    name: "isDisabled",
+    type: {name: "boolean", required: false},
     control: {
-      type: 'boolean'
-    }
-  }
+      type: "boolean",
+    },
+  },
 };
 
 export default {
-  title: 'Inputs/Checkbox',
+  title: "Inputs/Checkbox",
   component: Checkbox,
-  argTypes
+  argTypes,
 } as Meta;
 
 export const Default = () => {
   return (
-    <Checkbox size="md" color="default" labelColor="default">
+    <Checkbox color="default" labelColor="default" size="md">
       Option
     </Checkbox>
   );
 };
 
 export const Label = () => {
-  return (
-    <Checkbox size="md" color="default" labelColor="default" label="Option" />
-  );
+  return <Checkbox color="default" label="Option" labelColor="default" size="md" />;
 };
 
 export const Disabled = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
+  <div style={{display: "flex", flexDirection: "column"}}>
     <Checkbox defaultSelected size="xl">
       Enabled
     </Checkbox>
     <br />
-    <Checkbox isDisabled defaultSelected size="xl">
+    <Checkbox defaultSelected isDisabled size="xl">
       Disabled
     </Checkbox>
   </div>
 );
 
 export const Sizes = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
+  <div style={{display: "flex", flexDirection: "column"}}>
     <Checkbox defaultSelected size="xs">
       mini
     </Checkbox>
@@ -106,72 +91,72 @@ export const Sizes = () => (
 );
 
 export const Colors = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
-    <Checkbox color="primary" defaultSelected>
+  <div style={{display: "flex", flexDirection: "column"}}>
+    <Checkbox defaultSelected color="primary">
       Primary
     </Checkbox>
     <br />
-    <Checkbox color="secondary" defaultSelected>
+    <Checkbox defaultSelected color="secondary">
       Secondary
     </Checkbox>
     <br />
-    <Checkbox color="success" defaultSelected>
+    <Checkbox defaultSelected color="success">
       Success
     </Checkbox>
     <br />
-    <Checkbox color="warning" defaultSelected>
+    <Checkbox defaultSelected color="warning">
       Warning
     </Checkbox>
     <br />
-    <Checkbox color="error" defaultSelected>
+    <Checkbox defaultSelected color="error">
       Error
     </Checkbox>
   </div>
 );
 
 export const LabelColors = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
-    <Checkbox color="primary" labelColor="primary" defaultSelected>
+  <div style={{display: "flex", flexDirection: "column"}}>
+    <Checkbox defaultSelected color="primary" labelColor="primary">
       Primary
     </Checkbox>
     <br />
-    <Checkbox color="secondary" labelColor="secondary" defaultSelected>
+    <Checkbox defaultSelected color="secondary" labelColor="secondary">
       Secondary
     </Checkbox>
     <br />
-    <Checkbox color="success" labelColor="success" defaultSelected>
+    <Checkbox defaultSelected color="success" labelColor="success">
       Success
     </Checkbox>
     <br />
-    <Checkbox color="warning" labelColor="warning" defaultSelected>
+    <Checkbox defaultSelected color="warning" labelColor="warning">
       Warning
     </Checkbox>
     <br />
-    <Checkbox color="error" labelColor="error" defaultSelected>
+    <Checkbox defaultSelected color="error" labelColor="error">
       Error
     </Checkbox>
   </div>
 );
 
 export const Rounded = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
-    <Checkbox isRounded color="primary" defaultSelected>
+  <div style={{display: "flex", flexDirection: "column"}}>
+    <Checkbox defaultSelected isRounded color="primary">
       Primary
     </Checkbox>
     <br />
-    <Checkbox isRounded color="secondary" defaultSelected>
+    <Checkbox defaultSelected isRounded color="secondary">
       Secondary
     </Checkbox>
     <br />
-    <Checkbox isRounded color="success" defaultSelected>
+    <Checkbox defaultSelected isRounded color="success">
       Success
     </Checkbox>
     <br />
-    <Checkbox isRounded color="warning" defaultSelected>
+    <Checkbox defaultSelected isRounded color="warning">
       Warning
     </Checkbox>
     <br />
-    <Checkbox isRounded color="error" defaultSelected>
+    <Checkbox defaultSelected isRounded color="error">
       Error
     </Checkbox>
   </div>
@@ -179,7 +164,7 @@ export const Rounded = () => (
 
 export const Indeterminate = () => {
   return (
-    <Checkbox size="lg" color="primary" defaultSelected isIndeterminate>
+    <Checkbox defaultSelected isIndeterminate color="primary" size="lg">
       Option
     </Checkbox>
   );
@@ -187,7 +172,7 @@ export const Indeterminate = () => {
 
 export const LineThrough = () => {
   return (
-    <Checkbox size="lg" color="primary" defaultSelected lineThrough>
+    <Checkbox defaultSelected lineThrough color="primary" size="lg">
       Option
     </Checkbox>
   );
@@ -196,38 +181,37 @@ export const LineThrough = () => {
 export const Controlled = () => {
   const [selected, setSelected] = React.useState<boolean>(true);
 
-  const [groupSelected, setGroupSelected] = React.useState<string[]>([
-    'buenos-aires',
-    'sydney'
-  ]);
+  const [groupSelected, setGroupSelected] = React.useState<string[]>(["buenos-aires", "sydney"]);
 
   React.useEffect(() => {
-    console.log('Checkbox ', selected);
+    // eslint-disable-next-line no-console
+    console.log("Checkbox ", selected);
   }, [selected]);
 
   React.useEffect(() => {
-    console.log('CheckboxGroup ', groupSelected);
+    // eslint-disable-next-line no-console
+    console.log("CheckboxGroup ", groupSelected);
   }, [groupSelected]);
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'row', gap: 200 }}>
+    <div style={{display: "flex", flexDirection: "row", gap: 200}}>
       <Checkbox color="success" isSelected={selected} onChange={setSelected}>
         Subscribe (controlled)
       </Checkbox>
       <Checkbox.Group
         color="warning"
-        labelColor="primary"
         label="Select cities"
+        labelColor="primary"
         value={groupSelected}
         onChange={setGroupSelected}
       >
-        <Checkbox value="buenos-aires" color="primary">
+        <Checkbox color="primary" value="buenos-aires">
           Buenos Aires
         </Checkbox>
-        <Checkbox value="sydney" labelColor="warning">
+        <Checkbox labelColor="warning" value="sydney">
           Sydney
         </Checkbox>
-        <Checkbox value="london" labelColor="error">
+        <Checkbox labelColor="error" value="london">
           London
         </Checkbox>
         <Checkbox value="tokyo">Tokyo</Checkbox>
@@ -238,12 +222,12 @@ export const Controlled = () => {
 
 export const NoAnimated = () => {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <Checkbox size="md" disableAnimation={true} defaultSelected>
+    <div style={{display: "flex", flexDirection: "column"}}>
+      <Checkbox defaultSelected disableAnimation={true} size="md">
         Option
       </Checkbox>
       <br />
-      <Checkbox size="md" disableAnimation={true} lineThrough defaultSelected>
+      <Checkbox defaultSelected lineThrough disableAnimation={true} size="md">
         Option
       </Checkbox>
     </div>
@@ -251,23 +235,24 @@ export const NoAnimated = () => {
 };
 
 export const Group = () => {
+  // eslint-disable-next-line no-console
   const handleGroupChange = (value: string[]) => console.log(value);
 
   return (
     <Checkbox.Group
       color="warning"
-      labelColor="primary"
+      defaultValue={["buenos-aires"]}
       label="Select cities"
-      defaultValue={['buenos-aires']}
+      labelColor="primary"
       onChange={handleGroupChange}
     >
-      <Checkbox value="buenos-aires" color="primary">
+      <Checkbox color="primary" value="buenos-aires">
         Buenos Aires
       </Checkbox>
-      <Checkbox value="sydney" labelColor="warning">
+      <Checkbox labelColor="warning" value="sydney">
         Sydney
       </Checkbox>
-      <Checkbox value="london" labelColor="error" isDisabled>
+      <Checkbox isDisabled labelColor="error" value="london">
         London
       </Checkbox>
       <Checkbox value="tokyo">Tokyo</Checkbox>
@@ -278,11 +263,11 @@ export const Group = () => {
 export const GroupRow = () => (
   <Checkbox.Group
     color="warning"
-    orientation="horizontal"
+    defaultValue={["1"]}
     label="Select cities"
-    defaultValue={['1']}
+    orientation="horizontal"
   >
-    <Checkbox value="1" color="primary">
+    <Checkbox color="primary" value="1">
       Buenos Aires
     </Checkbox>
     <Checkbox value="2">Sydney</Checkbox>
diff --git a/packages/react/src/checkbox/checkbox.styles.ts b/packages/react/src/checkbox/checkbox.styles.ts
index 37853f75c0..6fa89300a7 100644
--- a/packages/react/src/checkbox/checkbox.styles.ts
+++ b/packages/react/src/checkbox/checkbox.styles.ts
@@ -1,100 +1,101 @@
-import { styled } from '../theme/stitches.config';
-import { cssFocusVisible } from '../theme/shared-css';
-import type { VariantProps } from '../theme/stitches.config';
+import type {VariantProps} from "../theme/stitches.config";
 
-export const StyledCheckboxLabel = styled('label', {
-  d: 'inline-flex',
-  jc: 'flex-start',
-  ai: 'center',
-  position: 'relative',
-  w: 'auto',
-  cursor: 'pointer',
-  zIndex: '$1',
+import {styled} from "../theme/stitches.config";
+import {cssFocusVisible} from "../theme/shared-css";
+
+export const StyledCheckboxLabel = styled("label", {
+  d: "inline-flex",
+  jc: "flex-start",
+  ai: "center",
+  position: "relative",
+  w: "auto",
+  cursor: "pointer",
+  zIndex: "$1",
   opacity: 1,
-  transition: 'opacity 0.25s ease',
-  $$checkboxBorderColor: '$colors$border',
-  '@motion': {
-    transition: 'none'
+  transition: "opacity 0.25s ease",
+  $$checkboxBorderColor: "$colors$border",
+  "@motion": {
+    transition: "none",
   },
   variants: {
     size: {
       xs: {
-        $$checkboxSize: '$space$7'
+        $$checkboxSize: "$space$7",
       },
       sm: {
-        $$checkboxSize: '$space$8'
+        $$checkboxSize: "$space$8",
       },
       md: {
-        $$checkboxSize: '$space$9'
+        $$checkboxSize: "$space$9",
       },
       lg: {
-        $$checkboxSize: '$space$10'
+        $$checkboxSize: "$space$10",
       },
       xl: {
-        $$checkboxSize: '$space$11'
-      }
+        $$checkboxSize: "$space$11",
+      },
     },
     isDisabled: {
       true: {
         opacity: 0.75,
-        cursor: 'not-allowed'
-      }
+        cursor: "not-allowed",
+      },
     },
     disableAnimation: {
       true: {
-        transition: 'none'
-      }
-    }
+        transition: "none",
+      },
+    },
   },
   defaultVariants: {
-    size: 'md'
-  }
+    size: "md",
+  },
 });
 
-export const StyledIconCheckFirstLine = styled('div', {
-  content: '',
-  background: 'transparent',
-  position: 'absolute',
-  width: '8px',
-  height: '1px',
-  br: '5px',
-  zIndex: '$1',
-  bottom: '0px',
-  '&:after': {
-    content: '',
-    position: 'absolute',
-    left: '0px',
-    width: '0%',
-    height: '2px',
-    background: '$white',
-    br: '5px 0px 0px 5px'
+export const StyledIconCheckFirstLine = styled("div", {
+  content: "",
+  background: "transparent",
+  position: "absolute",
+  width: "8px",
+  height: "1px",
+  br: "5px",
+  zIndex: "$1",
+  bottom: "0px",
+  "&:after": {
+    content: "",
+    position: "absolute",
+    left: "0px",
+    width: "0%",
+    height: "2px",
+    background: "$white",
+    br: "5px 0px 0px 5px",
   },
-  '@motion': {
-    '&:after': {
-      transition: 'none'
-    }
+  "@motion": {
+    "&:after": {
+      transition: "none",
+    },
   },
   variants: {
     isIndeterminate: {
       true: {
-        display: 'none'
-      }
+        display: "none",
+      },
     },
     isChecked: {
       true: {
-        '&:after': {
-          width: '100%',
-          transition: 'width 0.25s ease 0.1s'
-        }
-      }
+        "&:after": {
+          width: "100%",
+          transition: "width 0.25s ease 0.1s",
+        },
+      },
     },
     disableAnimation: {
       true: {
-        '&:after': {
-          transition: 'none'
-        }
-      }
-    }
+        "&:after": {
+          transition: "none",
+        },
+      },
+    },
   },
   compoundVariants: [
     // checked && disableAnimation
@@ -102,60 +103,60 @@ export const StyledIconCheckFirstLine = styled('div', {
       isChecked: true,
       disableAnimation: true,
       css: {
-        '&:after': {
-          transition: 'none'
-        }
-      }
-    }
-  ]
+        "&:after": {
+          transition: "none",
+        },
+      },
+    },
+  ],
 });
 
-export const StyledIconCheckSecondLine = styled('div', {
-  content: '',
-  position: 'absolute',
-  h: '13px',
-  br: '5px',
-  bottom: '0',
-  right: '0',
-  zIndex: '$1',
-  background: 'transparent',
-  width: '2px',
-  '&:after': {
-    content: '',
-    position: 'absolute',
-    width: '2px',
-    height: '0%',
-    background: '$white',
-    left: '0px',
-    bottom: '0px',
-    br: '5px 5px 0px 0px'
+export const StyledIconCheckSecondLine = styled("div", {
+  content: "",
+  position: "absolute",
+  h: "13px",
+  br: "5px",
+  bottom: "0",
+  right: "0",
+  zIndex: "$1",
+  background: "transparent",
+  width: "2px",
+  "&:after": {
+    content: "",
+    position: "absolute",
+    width: "2px",
+    height: "0%",
+    background: "$white",
+    left: "0px",
+    bottom: "0px",
+    br: "5px 5px 0px 0px",
   },
-  '@motion': {
-    '&:after': {
-      transition: 'none'
-    }
+  "@motion": {
+    "&:after": {
+      transition: "none",
+    },
   },
   variants: {
     isIndeterminate: {
       true: {
-        display: 'none'
-      }
+        display: "none",
+      },
     },
     isChecked: {
       true: {
-        '&:after': {
-          height: '100%',
-          transition: 'height 0.2s ease 0.3s'
-        }
-      }
+        "&:after": {
+          height: "100%",
+          transition: "height 0.2s ease 0.3s",
+        },
+      },
     },
     disableAnimation: {
       true: {
-        '&:after': {
-          transition: 'none'
-        }
-      }
-    }
+        "&:after": {
+          transition: "none",
+        },
+      },
+    },
   },
   compoundVariants: [
     // checked && disableAnimation
@@ -163,285 +164,285 @@ export const StyledIconCheckSecondLine = styled('div', {
       isChecked: true,
       disableAnimation: true,
       css: {
-        '&:after': {
-          transition: 'none'
-        }
-      }
-    }
-  ]
+        "&:after": {
+          transition: "none",
+        },
+      },
+    },
+  ],
 });
 
-export const StyledIconCheck = styled('i', {
-  size: '$$checkboxSize',
-  dflex: 'center',
-  br: 'inherit',
+export const StyledIconCheck = styled("i", {
+  size: "$$checkboxSize",
+  dflex: "center",
+  br: "inherit",
   opacity: 0,
-  zIndex: '$2',
-  transition: 'transform 0.35s ease',
-  '&:after': {
-    content: '',
+  zIndex: "$2",
+  transition: "transform 0.35s ease",
+  "&:after": {
+    content: "",
     opacity: 0,
-    position: 'relative',
-    width: '10px',
-    height: '2px',
-    br: '1px',
-    background: '$white',
-    display: 'block'
+    position: "relative",
+    width: "10px",
+    height: "2px",
+    br: "1px",
+    background: "$white",
+    display: "block",
   },
-  '@motion': {
-    transition: 'none',
-    '&:after': {
-      transition: 'none'
-    }
+  "@motion": {
+    transition: "none",
+    "&:after": {
+      transition: "none",
+    },
   },
   variants: {
     isIndeterminate: {
       true: {
         opacity: 1,
-        transform: 'rotate(0deg)',
-        width: 'auto',
-        height: 'auto',
-        margin: '0px',
-        '&:after': {
-          opacity: 1
-        }
+        transform: "rotate(0deg)",
+        width: "auto",
+        height: "auto",
+        margin: "0px",
+        "&:after": {
+          opacity: 1,
+        },
       },
       false: {
-        width: '8px',
-        height: '14px',
-        display: 'block',
-        position: 'relative',
-        marginTop: '-4px'
-      }
+        width: "8px",
+        height: "14px",
+        display: "block",
+        position: "relative",
+        marginTop: "-4px",
+      },
     },
     size: {
       xs: {
-        marginTop: '-2px',
-        transform: 'rotate(45deg) scale(0.5)'
+        marginTop: "-2px",
+        transform: "rotate(45deg) scale(0.5)",
       },
       sm: {
-        marginTop: '-2px',
-        transform: 'rotate(45deg) scale(0.5)'
+        marginTop: "-2px",
+        transform: "rotate(45deg) scale(0.5)",
       },
       md: {
-        transform: 'rotate(45deg) scale(0.8)'
+        transform: "rotate(45deg) scale(0.8)",
       },
       lg: {
-        transform: 'rotate(45deg)'
+        transform: "rotate(45deg)",
       },
       xl: {
-        transform: 'rotate(45deg)'
-      }
+        transform: "rotate(45deg)",
+      },
     },
     isChecked: {
       true: {
-        opacity: 1
-      }
+        opacity: 1,
+      },
     },
     disableAnimation: {
       true: {
-        transition: 'none',
-        '&:after': {
-          transition: 'none'
-        }
-      }
-    }
+        transition: "none",
+        "&:after": {
+          transition: "none",
+        },
+      },
+    },
   },
   compoundVariants: [
     // isIndeterminate && xs size
     {
       isIndeterminate: true,
-      size: 'xs',
+      size: "xs",
       css: {
-        scale: '0.5'
-      }
+        scale: "0.5",
+      },
     },
     // isIndeterminate && sm size
     {
       isIndeterminate: true,
-      size: 'sm',
+      size: "sm",
       css: {
-        scale: '0.5'
-      }
+        scale: "0.5",
+      },
     },
     // isIndeterminate && md size
     {
       isIndeterminate: true,
-      size: 'md',
+      size: "md",
       css: {
-        scale: '0.8'
-      }
+        scale: "0.8",
+      },
     },
     // isIndeterminate && lg size
     {
       isIndeterminate: true,
-      size: 'lg',
+      size: "lg",
       css: {
-        transform: 'none'
-      }
+        transform: "none",
+      },
     },
     // isIndeterminate && xl size
     {
       isIndeterminate: true,
-      size: 'lg',
+      size: "lg",
       css: {
-        transform: 'none'
-      }
-    }
-  ]
+        transform: "none",
+      },
+    },
+  ],
 });
 
-export const StyledCheckboxMask = styled('div', {
+export const StyledCheckboxMask = styled("div", {
   $$checkboxMaskTransition:
-    'transform 0.25s ease 0s, opacity 0.25s ease 0s, background 0.25s ease 0s, border-color 0.25s ease 0s',
-  size: '100%',
-  position: 'absolute',
-  pe: 'none',
-  boxSizing: 'border-box',
-  dflex: 'center',
-  zIndex: '-$1',
-  br: 'inherit',
-  color: '$$checkboxBorderColor',
-  '&:before': {
-    content: '',
-    position: 'absolute',
-    top: '0px',
-    left: '0px',
-    size: '100%',
-    br: 'inherit',
-    transition: '$$checkboxMaskTransition',
-    zIndex: '-$1',
-    border: '$borderWeights$normal solid currentColor',
-    boxSizing: 'border-box'
+    "transform 0.25s ease 0s, opacity 0.25s ease 0s, background 0.25s ease 0s, border-color 0.25s ease 0s",
+  size: "100%",
+  position: "absolute",
+  pe: "none",
+  boxSizing: "border-box",
+  dflex: "center",
+  zIndex: "-$1",
+  br: "inherit",
+  color: "$$checkboxBorderColor",
+  "&:before": {
+    content: "",
+    position: "absolute",
+    top: "0px",
+    left: "0px",
+    size: "100%",
+    br: "inherit",
+    transition: "$$checkboxMaskTransition",
+    zIndex: "-$1",
+    border: "$borderWeights$normal solid currentColor",
+    boxSizing: "border-box",
   },
-  '&:after': {
-    content: '',
-    position: 'absolute',
-    top: '0px',
-    left: '0px',
-    size: '100%',
-    bg: '$$checkboxColor',
+  "&:after": {
+    content: "",
+    position: "absolute",
+    top: "0px",
+    left: "0px",
+    size: "100%",
+    bg: "$$checkboxColor",
     scale: 0.5,
-    br: 'inherit',
+    br: "inherit",
     opacity: 0,
-    transition: '$$checkboxMaskTransition',
-    zIndex: '-$1'
+    transition: "$$checkboxMaskTransition",
+    zIndex: "-$1",
   },
-  '@motion': {
-    '&:before': {
-      transition: 'none'
+  "@motion": {
+    "&:before": {
+      transition: "none",
+    },
+    "&:after": {
+      transition: "none",
     },
-    '&:after': {
-      transition: 'none'
-    }
   },
   variants: {
     isChecked: {
       true: {
-        '&:before': {
+        "&:before": {
           opacity: 0,
-          scale: 1.2
+          scale: 1.2,
         },
-        '&:after': {
+        "&:after": {
           opacity: 1,
-          scale: 1
-        }
-      }
+          scale: 1,
+        },
+      },
     },
     isIndeterminate: {
       true: {
-        '&:before': {
+        "&:before": {
           opacity: 0,
-          scale: 1.2
+          scale: 1.2,
         },
-        '&:after': {
+        "&:after": {
           opacity: 1,
-          scale: 1
-        }
-      }
+          scale: 1,
+        },
+      },
     },
     disableAnimation: {
       true: {
-        '&:before': {
-          transition: 'none'
-        },
-        '&:after': {
-          transition: 'none'
-        }
-      }
-    }
-  }
+        "&:before": {
+          transition: "none",
+        },
+        "&:after": {
+          transition: "none",
+        },
+      },
+    },
+  },
 });
 
-export const StyledCheckboxText = styled('span', {
-  position: 'relative',
-  dflex: 'center',
-  color: '$text',
+export const StyledCheckboxText = styled("span", {
+  position: "relative",
+  dflex: "center",
+  color: "$text",
   opacity: 1,
-  pl: 'calc($$checkboxSize * 0.57)',
-  ln: '$$checkboxSize',
-  fontSize: '$$checkboxSize',
-  us: 'none',
-  transition: 'opacity 0.25s ease 0s',
-  '@motion': {
-    transition: 'none',
-    '&:before': {
-      transition: 'none'
-    }
+  pl: "calc($$checkboxSize * 0.57)",
+  ln: "$$checkboxSize",
+  fontSize: "$$checkboxSize",
+  us: "none",
+  transition: "opacity 0.25s ease 0s",
+  "@motion": {
+    transition: "none",
+    "&:before": {
+      transition: "none",
+    },
   },
   variants: {
     color: {
       default: {
-        color: '$text'
+        color: "$text",
       },
       primary: {
-        color: '$primary'
+        color: "$primary",
       },
       secondary: {
-        color: '$secondary'
+        color: "$secondary",
       },
       success: {
-        color: '$success'
+        color: "$success",
       },
       warning: {
-        color: '$warning'
+        color: "$warning",
       },
       error: {
-        color: '$error'
-      }
+        color: "$error",
+      },
     },
     lineThrough: {
       true: {
-        '&:before': {
-          content: '',
-          position: 'absolute',
-          width: '0px',
-          height: '2px',
-          background: '$text',
-          transition: 'width 0.25s ease 0s'
-        }
-      }
+        "&:before": {
+          content: "",
+          position: "absolute",
+          width: "0px",
+          height: "2px",
+          background: "$text",
+          transition: "width 0.25s ease 0s",
+        },
+      },
     },
     isChecked: {
       true: {
-        '&:before': {
-          opacity: 0.8
-        }
-      }
+        "&:before": {
+          opacity: 0.8,
+        },
+      },
     },
     isDisabled: {
       true: {
-        color: '$accents5'
-      }
+        color: "$accents5",
+      },
     },
     disableAnimation: {
       true: {
-        transition: 'none',
-        '&:before': {
-          transition: 'none'
-        }
-      }
-    }
+        transition: "none",
+        "&:before": {
+          transition: "none",
+        },
+      },
+    },
   },
   compoundVariants: [
     {
@@ -449,188 +450,178 @@ export const StyledCheckboxText = styled('span', {
       isChecked: true,
       css: {
         opacity: 0.6,
-        '&:before': {
-          w: 'calc(100% - 10px)'
-        }
-      }
-    }
-  ]
+        "&:before": {
+          w: "calc(100% - 10px)",
+        },
+      },
+    },
+  ],
 });
 
 export const StyledCheckboxContainer = styled(
-  'div',
+  "div",
   {
-    br: '$squared',
-    position: 'relative',
-    sizeMin: '$$checkboxSize',
-    transition: 'box-shadow 0.25s ease',
-    zIndex: '$1',
-    '.nextui-checkbox-input': {
-      position: 'absolute',
-      width: '100%',
-      height: '100%',
-      top: '0px',
-      left: '0px',
-      margin: '0px',
-      padding: '0px',
+    br: "$squared",
+    position: "relative",
+    sizeMin: "$$checkboxSize",
+    transition: "box-shadow 0.25s ease",
+    zIndex: "$1",
+    ".nextui-checkbox-input": {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      top: "0px",
+      left: "0px",
+      margin: "0px",
+      padding: "0px",
       opacity: 0,
-      zIndex: '$1',
-      cursor: 'pointer',
-      '&:disabled': {
-        cursor: 'not-allowed'
-      }
+      zIndex: "$1",
+      cursor: "pointer",
+      "&:disabled": {
+        cursor: "not-allowed",
+      },
     },
-    '@motion': {
-      transition: 'none'
+    "@motion": {
+      transition: "none",
     },
     variants: {
       color: {
         default: {
-          $$checkboxColor: '$colors$primary',
-          $$checkboxColorHover: '$colors$primarySolidHover'
+          $$checkboxColor: "$colors$primary",
+          $$checkboxColorHover: "$colors$primarySolidHover",
         },
         primary: {
-          $$checkboxColor: '$colors$primary',
-          $$checkboxColorHover: '$colors$primarySolidHover'
+          $$checkboxColor: "$colors$primary",
+          $$checkboxColorHover: "$colors$primarySolidHover",
         },
         secondary: {
-          $$checkboxColor: '$colors$secondary',
-          $$checkboxColorHover: '$colors$secondarySolidHover'
+          $$checkboxColor: "$colors$secondary",
+          $$checkboxColorHover: "$colors$secondarySolidHover",
         },
         success: {
-          $$checkboxColor: '$colors$success',
-          $$checkboxColorHover: '$colors$successSolidHover'
+          $$checkboxColor: "$colors$success",
+          $$checkboxColorHover: "$colors$successSolidHover",
         },
         warning: {
-          $$checkboxColor: '$colors$warning',
-          $$checkboxColorHover: '$colors$warningSolidHover'
+          $$checkboxColor: "$colors$warning",
+          $$checkboxColorHover: "$colors$warningSolidHover",
         },
         error: {
-          $$checkboxColor: '$colors$error',
-          $$checkboxColorHover: '$colors$errorSolidHover'
+          $$checkboxColor: "$colors$error",
+          $$checkboxColorHover: "$colors$errorSolidHover",
         },
         gradient: {
-          $$checkboxColor: '$colors$gradient',
-          $$checkboxColorHover: '$colors$gradient'
-        }
+          $$checkboxColor: "$colors$gradient",
+          $$checkboxColorHover: "$colors$gradient",
+        },
       },
       isRounded: {
         true: {
-          br: '$pill'
-        }
+          br: "$pill",
+        },
       },
       isDisabled: {
         true: {
           opacity: 0.4,
-          cursor: 'not-allowed'
-        }
+          cursor: "not-allowed",
+        },
       },
       disableAnimation: {
         true: {
-          transition: 'none'
-        }
+          transition: "none",
+        },
       },
       isHovered: {
         true: {
           [`& ${StyledCheckboxMask}:before`]: {
-            bg: '$$checkboxBorderColor',
-            border: '2px solid transparent'
+            bg: "$$checkboxBorderColor",
+            border: "2px solid transparent",
           },
           [`& ${StyledCheckboxMask}:after`]: {
-            bg: '$$checkboxColorHover'
-          }
-        }
-      }
+            bg: "$$checkboxColorHover",
+          },
+        },
+      },
     },
     defaultVariants: {
-      color: 'default'
-    }
+      color: "default",
+    },
   },
-  cssFocusVisible
+  cssFocusVisible,
 );
 
-export const StyledCheckboxGroup = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  '& .nextui-checkbox-group-label': {
-    d: 'block',
-    fontWeight: '$normal',
-    fontSize: 'calc($$checkboxSize * 0.8)',
-    color: '$accents7',
-    mb: '$3'
+export const StyledCheckboxGroup = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  "& .nextui-checkbox-group-label": {
+    d: "block",
+    fontWeight: "$normal",
+    fontSize: "calc($$checkboxSize * 0.8)",
+    color: "$accents7",
+    mb: "$3",
   },
   variants: {
     size: {
       xs: {
-        $$checkboxSize: '$space$7'
+        $$checkboxSize: "$space$7",
       },
       sm: {
-        $$checkboxSize: '$space$8'
+        $$checkboxSize: "$space$8",
       },
       md: {
-        $$checkboxSize: '$space$9'
+        $$checkboxSize: "$space$9",
       },
       lg: {
-        $$checkboxSize: '$space$10'
+        $$checkboxSize: "$space$10",
       },
       xl: {
-        $$checkboxSize: '$space$11'
-      }
+        $$checkboxSize: "$space$11",
+      },
     },
     isDisabled: {
       true: {
-        '& .nextui-checkbox-group-label': {
-          color: '$accents5'
-        }
-      }
-    }
-  }
+        "& .nextui-checkbox-group-label": {
+          color: "$accents5",
+        },
+      },
+    },
+  },
 });
 
-export const StyledCheckboxGroupContainer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
+export const StyledCheckboxGroupContainer = styled("div", {
+  display: "flex",
+  flexDirection: "column",
   variants: {
     isRow: {
       true: {
-        flexDirection: 'row',
+        flexDirection: "row",
         mt: 0,
         [`& ${StyledCheckboxLabel}`]: {
-          mr: '$$checkboxSize'
-        }
+          mr: "$$checkboxSize",
+        },
       },
       false: {
         mr: 0,
-        flexDirection: 'column',
+        flexDirection: "column",
         [`& ${StyledCheckboxLabel}:not(:first-child)`]: {
-          mt: '$$checkboxSize'
-        }
-      }
-    }
+          mt: "$$checkboxSize",
+        },
+      },
+    },
   },
   defaultVariants: {
-    isRow: false
-  }
+    isRow: false,
+  },
 });
 
 // types
-export type CheckboxGroupVariantsProps = VariantProps<
-  typeof StyledCheckboxGroup
->;
+export type CheckboxGroupVariantsProps = VariantProps<typeof StyledCheckboxGroup>;
 export type CheckboxTextVariantsProps = VariantProps<typeof StyledCheckboxText>;
 export type CheckboxMaskVariantsProps = VariantProps<typeof StyledCheckboxMask>;
-export type CheckboxIconCheckVariantsProps = VariantProps<
-  typeof StyledIconCheck
->;
-export type CheckboxIconCheckFirstLineVariantsProps = VariantProps<
-  typeof StyledIconCheckFirstLine
->;
+export type CheckboxIconCheckVariantsProps = VariantProps<typeof StyledIconCheck>;
+export type CheckboxIconCheckFirstLineVariantsProps = VariantProps<typeof StyledIconCheckFirstLine>;
 export type CheckboxIconCheckSecondLineVariantsProps = VariantProps<
   typeof StyledIconCheckSecondLine
 >;
-export type CheckboxLabelVariantsProps = VariantProps<
-  typeof StyledCheckboxLabel
->;
-export type CheckboxContainerVariantsProps = VariantProps<
-  typeof StyledCheckboxContainer
->;
+export type CheckboxLabelVariantsProps = VariantProps<typeof StyledCheckboxLabel>;
+export type CheckboxContainerVariantsProps = VariantProps<typeof StyledCheckboxContainer>;
diff --git a/packages/react/src/checkbox/checkbox.tsx b/packages/react/src/checkbox/checkbox.tsx
index 3b044b14bd..67611f16e1 100644
--- a/packages/react/src/checkbox/checkbox.tsx
+++ b/packages/react/src/checkbox/checkbox.tsx
@@ -1,18 +1,21 @@
-import React, { useMemo } from 'react';
-import { mergeProps } from '@react-aria/utils';
-import { useFocusRing } from '@react-aria/focus';
-import { useHover } from '@react-aria/interactions';
-import { usePress } from '@react-aria/interactions';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import type { FocusRingAria } from '@react-aria/focus';
-import type { FocusableRef } from '@react-types/shared';
-import type { PressResult } from '@react-aria/interactions';
-import type { CSS } from '../theme/stitches.config';
-import clsx from '../utils/clsx';
-import { __DEV__ } from '../utils/assertion';
-import { useFocusableRef } from '../utils/dom';
-import { useCheckbox, UseCheckboxProps } from './use-checkbox';
-import CheckboxGroup from './checkbox-group';
+import type {FocusRingAria} from "@react-aria/focus";
+import type {FocusableRef} from "@react-types/shared";
+import type {PressResult} from "@react-aria/interactions";
+import type {CSS} from "../theme/stitches.config";
+
+import React, {useMemo} from "react";
+import {mergeProps} from "@react-aria/utils";
+import {useFocusRing} from "@react-aria/focus";
+import {useHover} from "@react-aria/interactions";
+import {usePress} from "@react-aria/interactions";
+import {VisuallyHidden} from "@react-aria/visually-hidden";
+
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+import {useFocusableRef} from "../utils/dom";
+
+import {useCheckbox, UseCheckboxProps} from "./use-checkbox";
+import CheckboxGroup from "./checkbox-group";
 import {
   StyledCheckboxLabel,
   StyledCheckboxContainer,
@@ -20,8 +23,8 @@ import {
   StyledIconCheck,
   StyledIconCheckFirstLine,
   StyledIconCheckSecondLine,
-  StyledCheckboxText
-} from './checkbox.styles';
+  StyledCheckboxText,
+} from "./checkbox.styles";
 
 interface Props extends UseCheckboxProps {
   label?: string;
@@ -32,7 +35,7 @@ interface Props extends UseCheckboxProps {
 
 type NativeAttrs = Omit<React.LabelHTMLAttributes<unknown>, keyof Props>;
 
-export type CheckboxProps = NativeAttrs & Props & { css?: CSS };
+export type CheckboxProps = NativeAttrs & Props & {css?: CSS};
 
 interface IFocusRingAria extends FocusRingAria {
   focusProps: Omit<React.HTMLAttributes<HTMLElement>, keyof CheckboxProps>;
@@ -44,7 +47,7 @@ interface IPressResult extends PressResult {
 
 const Checkbox = React.forwardRef<HTMLLabelElement, CheckboxProps>(
   (props: CheckboxProps, ref: React.Ref<HTMLLabelElement | null>) => {
-    const { className, as, css, children, label, ...otherProps } = props;
+    const {className, as, css, children, label, ...otherProps} = props;
 
     const {
       size,
@@ -55,59 +58,56 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckboxProps>(
       disableAnimation,
       isIndeterminate,
       inputRef,
-      inputProps
-    } = useCheckbox({ ...otherProps, children: children ?? label });
+      inputProps,
+    } = useCheckbox({...otherProps, children: children ?? label});
 
     const domRef = useFocusableRef<HTMLLabelElement>(
       ref as FocusableRef<HTMLLabelElement>,
-      inputRef
+      inputRef,
     );
 
-    const { hoverProps, isHovered } = useHover({
-      isDisabled: inputProps.disabled
+    const {hoverProps, isHovered} = useHover({
+      isDisabled: inputProps.disabled,
     });
 
     // TODO: Event's propagation wasn't stopped https://github.com/adobe/react-spectrum/issues/2383
-    const { pressProps }: IPressResult = usePress({
-      isDisabled: inputProps.disabled
+    const {pressProps}: IPressResult = usePress({
+      isDisabled: inputProps.disabled,
     });
 
-    const { focusProps, isFocusVisible }: IFocusRingAria = useFocusRing({
-      autoFocus: inputProps.autoFocus
+    const {focusProps, isFocusVisible}: IFocusRingAria = useFocusRing({
+      autoFocus: inputProps.autoFocus,
     });
 
     const checkboxState = useMemo(() => {
-      if (isHovered) return 'hovered';
+      if (isHovered) return "hovered";
+
       return isIndeterminate && inputProps.checked
-        ? 'mixed'
+        ? "mixed"
         : inputProps.checked
-        ? 'checked'
-        : 'uncheked';
+        ? "checked"
+        : "uncheked";
     }, [isHovered, isIndeterminate, inputProps.checked]);
 
     return (
       <StyledCheckboxLabel
         ref={domRef}
         {...mergeProps(hoverProps, pressProps)}
-        className={clsx(
-          'nextui-checkbox-label',
-          `nextui-checkbox--${checkboxState}`,
-          className
-        )}
         as={as}
+        className={clsx("nextui-checkbox-label", `nextui-checkbox--${checkboxState}`, className)}
         css={css}
-        size={size}
-        isDisabled={inputProps.disabled}
         disableAnimation={disableAnimation}
+        isDisabled={inputProps.disabled}
+        size={size}
       >
         <StyledCheckboxContainer
           className="nextui-checkbox-container"
           color={color}
-          isRounded={isRounded}
-          isHovered={isHovered}
+          disableAnimation={disableAnimation}
           isDisabled={inputProps.disabled}
           isFocusVisible={isFocusVisible}
-          disableAnimation={disableAnimation}
+          isHovered={isHovered}
+          isRounded={isRounded}
           {...focusProps}
         >
           <VisuallyHidden>
@@ -119,28 +119,28 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckboxProps>(
           </VisuallyHidden>
           <StyledCheckboxMask
             className="nextui-checkbox-mask"
+            disableAnimation={disableAnimation}
             isChecked={inputProps.checked}
             isIndeterminate={isIndeterminate}
-            disableAnimation={disableAnimation}
           >
             <StyledIconCheck
               className="nextui-icon-check"
-              size={size}
+              disableAnimation={disableAnimation}
               isChecked={inputProps.checked}
               isIndeterminate={isIndeterminate}
-              disableAnimation={disableAnimation}
+              size={size}
             >
               <StyledIconCheckFirstLine
                 className="nextui-icon-check-line1"
+                disableAnimation={disableAnimation}
                 isChecked={inputProps.checked}
                 isIndeterminate={isIndeterminate}
-                disableAnimation={disableAnimation}
               />
               <StyledIconCheckSecondLine
                 className="nextui-icon-check-line2"
+                disableAnimation={disableAnimation}
                 isChecked={inputProps.checked}
                 isIndeterminate={isIndeterminate}
-                disableAnimation={disableAnimation}
               />
             </StyledIconCheck>
           </StyledCheckboxMask>
@@ -149,17 +149,17 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckboxProps>(
           <StyledCheckboxText
             className="nextui-checkbox-text"
             color={labelColor}
-            lineThrough={lineThrough}
+            disableAnimation={disableAnimation}
             isChecked={inputProps.checked}
             isDisabled={inputProps.disabled}
-            disableAnimation={disableAnimation}
+            lineThrough={lineThrough}
           >
             {children || label}
           </StyledCheckboxText>
         )}
       </StyledCheckboxLabel>
     );
-  }
+  },
 );
 
 type CheckboxComponent<T, P = {}> = React.ForwardRefExoticComponent<
@@ -169,9 +169,9 @@ type CheckboxComponent<T, P = {}> = React.ForwardRefExoticComponent<
 };
 
 if (__DEV__) {
-  Checkbox.displayName = 'NextUI.Checkbox';
+  Checkbox.displayName = "NextUI.Checkbox";
 }
 
-Checkbox.toString = () => '.nextui-checkbox';
+Checkbox.toString = () => ".nextui-checkbox";
 
 export default Checkbox as CheckboxComponent<HTMLLabelElement, CheckboxProps>;
diff --git a/packages/react/src/checkbox/index.ts b/packages/react/src/checkbox/index.ts
index e11915faac..391b6db95d 100644
--- a/packages/react/src/checkbox/index.ts
+++ b/packages/react/src/checkbox/index.ts
@@ -1,8 +1,8 @@
-import Checkbox from './checkbox';
-import CheckboxGroup from './checkbox-group';
+import Checkbox from "./checkbox";
+import CheckboxGroup from "./checkbox-group";
 
-export type { CheckboxProps } from './checkbox';
-export type { CheckboxGroupProps } from './checkbox-group';
+export type {CheckboxProps} from "./checkbox";
+export type {CheckboxGroupProps} from "./checkbox-group";
 
 Checkbox.Group = CheckboxGroup;
 
@@ -15,8 +15,8 @@ export {
   StyledIconCheck,
   StyledCheckboxMask,
   StyledCheckboxText,
-  StyledCheckboxGroup
-} from './checkbox.styles';
+  StyledCheckboxGroup,
+} from "./checkbox.styles";
 export type {
   CheckboxGroupVariantsProps,
   CheckboxTextVariantsProps,
@@ -25,7 +25,7 @@ export type {
   CheckboxIconCheckFirstLineVariantsProps,
   CheckboxIconCheckSecondLineVariantsProps,
   CheckboxLabelVariantsProps,
-  CheckboxContainerVariantsProps
-} from './checkbox.styles';
+  CheckboxContainerVariantsProps,
+} from "./checkbox.styles";
 
 export default Checkbox;
diff --git a/packages/react/src/checkbox/use-checkbox-group.ts b/packages/react/src/checkbox/use-checkbox-group.ts
index d6c2e8fd58..2f1d192ebd 100644
--- a/packages/react/src/checkbox/use-checkbox-group.ts
+++ b/packages/react/src/checkbox/use-checkbox-group.ts
@@ -1,14 +1,11 @@
-import React from 'react';
-import { useCheckboxGroupState } from '@react-stately/checkbox';
-import { useCheckboxGroup as useReactAriaCheckboxGroup } from '@react-aria/checkbox';
-import type { AriaCheckboxGroupProps } from '@react-types/checkbox';
-import type { Orientation } from '@react-types/shared';
-import type { CSS } from '../theme/stitches.config';
-import type {
-  NormalSizes,
-  NormalColors,
-  SimpleColors
-} from '../utils/prop-types';
+import type {AriaCheckboxGroupProps} from "@react-types/checkbox";
+import type {Orientation} from "@react-types/shared";
+import type {CSS} from "../theme/stitches.config";
+import type {NormalSizes, NormalColors, SimpleColors} from "../utils/prop-types";
+
+import {useCheckboxGroup as useReactAriaCheckboxGroup} from "@react-aria/checkbox";
+import {useCheckboxGroupState} from "@react-stately/checkbox";
+import React from "react";
 
 interface Props extends AriaCheckboxGroupProps {
   size?: NormalSizes;
@@ -19,27 +16,24 @@ interface Props extends AriaCheckboxGroupProps {
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type UseCheckboxGroupProps = Props & NativeAttrs & { css?: CSS };
+export type UseCheckboxGroupProps = Props & NativeAttrs & {css?: CSS};
 
 /**
  * @internal
  */
 export const useCheckboxGroup = (props: UseCheckboxGroupProps = {}) => {
   const {
-    size = 'md',
-    color = 'default',
-    labelColor = 'default',
-    orientation = 'vertical',
+    size = "md",
+    color = "default",
+    labelColor = "default",
+    orientation = "vertical",
     css,
     ...otherProps
   } = props;
 
   const groupState = useCheckboxGroupState(otherProps);
 
-  const { labelProps, groupProps } = useReactAriaCheckboxGroup(
-    otherProps,
-    groupState
-  );
+  const {labelProps, groupProps} = useReactAriaCheckboxGroup(otherProps, groupState);
 
   return {
     css,
@@ -49,11 +43,8 @@ export const useCheckboxGroup = (props: UseCheckboxGroupProps = {}) => {
     labelColor,
     groupState,
     labelProps,
-    groupProps
+    groupProps,
   };
 };
 
-export type UseCheckboxGroupReturn = Omit<
-  ReturnType<typeof useCheckboxGroup>,
-  'css'
->;
+export type UseCheckboxGroupReturn = Omit<ReturnType<typeof useCheckboxGroup>, "css">;
diff --git a/packages/react/src/checkbox/use-checkbox.ts b/packages/react/src/checkbox/use-checkbox.ts
index a3ae140075..da2932ff47 100644
--- a/packages/react/src/checkbox/use-checkbox.ts
+++ b/packages/react/src/checkbox/use-checkbox.ts
@@ -1,17 +1,16 @@
-import { useMemo, useRef } from 'react';
-import { useToggleState } from '@react-stately/toggle';
-import type { AriaCheckboxProps } from '@react-types/checkbox';
+import type {AriaCheckboxProps} from "@react-types/checkbox";
+import type {NormalSizes, NormalColors, SimpleColors} from "../utils/prop-types";
+
+import {useMemo, useRef} from "react";
+import {useToggleState} from "@react-stately/toggle";
 import {
   useCheckbox as useReactAriaCheckbox,
-  useCheckboxGroupItem as useReactAriaCheckboxGroupItem
-} from '@react-aria/checkbox';
-import { __DEV__ } from '../utils/assertion';
-import { useCheckboxGroupContext } from './checkbox-context';
-import type {
-  NormalSizes,
-  NormalColors,
-  SimpleColors
-} from '../utils/prop-types';
+  useCheckboxGroupItem as useReactAriaCheckboxGroupItem,
+} from "@react-aria/checkbox";
+
+import {__DEV__} from "../utils/assertion";
+
+import {useCheckboxGroupContext} from "./checkbox-context";
 
 export interface UseCheckboxProps extends AriaCheckboxProps {
   isRounded?: boolean;
@@ -29,9 +28,9 @@ export const useCheckbox = (props: UseCheckboxProps) => {
   const groupContext = useCheckboxGroupContext();
 
   const {
-    size = groupContext?.size ?? 'md',
-    color = groupContext?.color ?? 'default',
-    labelColor = groupContext?.labelColor ?? 'default',
+    size = groupContext?.size ?? "md",
+    color = groupContext?.color ?? "default",
+    labelColor = groupContext?.labelColor ?? "default",
     lineThrough,
     isRounded = false,
     disableAnimation = false,
@@ -41,12 +40,15 @@ export const useCheckbox = (props: UseCheckboxProps) => {
 
   if (groupContext && __DEV__) {
     const warningMessage =
-      'The Checkbox.Group is being used, `%s` will be ignored. Use the `%s` of the Checkbox.Group instead.';
-    if ('isSelected' in otherProps) {
-      console.warn(warningMessage, 'isSelected', 'value');
+      "The Checkbox.Group is being used, `%s` will be ignored. Use the `%s` of the Checkbox.Group instead.";
+
+    if ("isSelected" in otherProps) {
+      // eslint-disable-next-line no-console
+      console.warn(warningMessage, "isSelected", "value");
     }
-    if ('defaultSelected' in otherProps) {
-      console.warn(warningMessage, 'defaultSelected', 'defaultValue');
+    if ("defaultSelected" in otherProps) {
+      // eslint-disable-next-line no-console
+      console.warn(warningMessage, "defaultSelected", "defaultValue");
     }
   }
 
@@ -56,25 +58,22 @@ export const useCheckbox = (props: UseCheckboxProps) => {
     return {
       ...otherProps,
       isIndeterminate,
-      value: otherProps.value ?? '',
-      isRequired: otherProps.isRequired ?? false
+      value: otherProps.value ?? "",
+      isRequired: otherProps.isRequired ?? false,
     };
   }, [isIndeterminate, otherProps]);
 
-  const { inputProps } = groupContext
-    ? useReactAriaCheckboxGroupItem(
+  const {inputProps} = groupContext
+    ? // eslint-disable-next-line
+      useReactAriaCheckboxGroupItem(
         {
           ...ariaCheckboxProps,
-          validationState: otherProps.validationState
+          validationState: otherProps.validationState,
         },
         groupContext.groupState,
-        inputRef
+        inputRef,
       )
-    : useReactAriaCheckbox(
-        ariaCheckboxProps,
-        useToggleState(ariaCheckboxProps),
-        inputRef
-      );
+    : useReactAriaCheckbox(ariaCheckboxProps, useToggleState(ariaCheckboxProps), inputRef); // eslint-disable-line
 
   return {
     size,
@@ -85,7 +84,7 @@ export const useCheckbox = (props: UseCheckboxProps) => {
     disableAnimation,
     isIndeterminate,
     inputRef,
-    inputProps
+    inputProps,
   };
 };
 
diff --git a/packages/react/src/code/__tests__/index.test.tsx b/packages/react/src/code/__tests__/index.test.tsx
index 39695e5150..629ec5f803 100644
--- a/packages/react/src/code/__tests__/index.test.tsx
+++ b/packages/react/src/code/__tests__/index.test.tsx
@@ -1,31 +1,36 @@
-import React from 'react';
-import { mount, render } from 'enzyme';
-import Code from '../index';
+import React from "react";
+import {mount, render} from "enzyme";
 
-describe('Code', () => {
-  it('should render correctly', () => {
+import Code from "../index";
+
+describe("Code", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Code>code</Code>);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support block mode', () => {
+  it("should support block mode", () => {
     const wrapper = render(<Code block>code</Code>);
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should repspond to changed by width', () => {
+  it("should repspond to changed by width", () => {
     const wrapper = render(
-      <Code block css={{ w: '50%' }}>
+      <Code block css={{w: "50%"}}>
         code
-      </Code>
+      </Code>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render pre element only in block mode', () => {
+  it("should render pre element only in block mode", () => {
     const wrapper = mount(<Code>code</Code>);
-    expect(wrapper.find('pre').length).toBe(0);
-    wrapper.setProps({ block: true });
-    expect(wrapper.find('pre').length).not.toBe(0);
+
+    expect(wrapper.find("pre").length).toBe(0);
+    wrapper.setProps({block: true});
+    expect(wrapper.find("pre").length).not.toBe(0);
   });
 });
diff --git a/packages/react/src/code/code.styles.ts b/packages/react/src/code/code.styles.ts
index 4a794684a8..711eee04b5 100644
--- a/packages/react/src/code/code.styles.ts
+++ b/packages/react/src/code/code.styles.ts
@@ -1,10 +1,10 @@
-import { styled, VariantProps } from '../theme/stitches.config';
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledCode = styled('code', {});
+export const StyledCode = styled("code", {});
 
-export const StyledPre = styled('pre', {
-  width: 'initial',
-  mw: '100'
+export const StyledPre = styled("pre", {
+  width: "initial",
+  mw: "100",
 });
 
 export type CodeVariantsProps = VariantProps<typeof StyledCode>;
diff --git a/packages/react/src/code/code.tsx b/packages/react/src/code/code.tsx
index 208df09c91..211439ded6 100644
--- a/packages/react/src/code/code.tsx
+++ b/packages/react/src/code/code.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
-import withDefaults from '../utils/with-defaults';
-import { CSS } from '../theme/stitches.config';
-import { StyledCode, StyledPre, CodeVariantsProps } from './code.styles';
+import React from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {CSS} from "../theme/stitches.config";
+
+import {StyledCode, StyledPre, CodeVariantsProps} from "./code.styles";
 
 interface Props {
   block?: boolean;
@@ -9,18 +11,15 @@ interface Props {
 }
 
 const defaultProps = {
-  block: false
+  block: false,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
-export type CodeProps = Props & NativeAttrs & CodeVariantsProps & { css?: CSS };
+export type CodeProps = Props & NativeAttrs & CodeVariantsProps & {css?: CSS};
 
-const Code: React.FC<React.PropsWithChildren<CodeProps>> = ({
-  block,
-  children,
-  ...props
-}) => {
+const Code: React.FC<React.PropsWithChildren<CodeProps>> = ({block, children, ...props}) => {
   if (!block) return <StyledCode {...props}>{children}</StyledCode>;
+
   return (
     <StyledPre {...props}>
       <StyledCode>{children}</StyledCode>
@@ -28,7 +27,7 @@ const Code: React.FC<React.PropsWithChildren<CodeProps>> = ({
   );
 };
 
-Code.toString = () => '.nextui-code';
+Code.toString = () => ".nextui-code";
 
 const MemoCode = React.memo(Code);
 
diff --git a/packages/react/src/code/index.ts b/packages/react/src/code/index.ts
index 05c93c41e0..c7818c1649 100644
--- a/packages/react/src/code/index.ts
+++ b/packages/react/src/code/index.ts
@@ -1,7 +1,7 @@
-import Code from './code';
-export type { CodeProps } from './code';
+import Code from "./code";
+export type {CodeProps} from "./code";
 
-export { StyledPre, StyledCode } from './code.styles';
-export type { CodeVariantsProps } from './code.styles';
+export {StyledPre, StyledCode} from "./code.styles";
+export type {CodeVariantsProps} from "./code.styles";
 
 export default Code;
diff --git a/packages/react/src/col/__tests__/index.test.tsx b/packages/react/src/col/__tests__/index.test.tsx
index 47dfabf5d7..9f518fb203 100644
--- a/packages/react/src/col/__tests__/index.test.tsx
+++ b/packages/react/src/col/__tests__/index.test.tsx
@@ -1,49 +1,54 @@
-import React from 'react';
-import { mount, render } from 'enzyme';
-import Col from '../index';
+import React from "react";
+import {mount, render} from "enzyme";
 
-describe('Col', () => {
-  it('should render correctly', () => {
+import Col from "../index";
+
+describe("Col", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Col>col</Col>);
+
     expect(wrapper).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with span and offset', () => {
+  it("should work with span and offset", () => {
     const wrapper = render(
       <div>
         <Col span={2}>col</Col>
-        <Col span={2} offset={2}>
+        <Col offset={2} span={2}>
           col
         </Col>
-      </div>
+      </div>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render correctly when nested', () => {
+  it("should render correctly when nested", () => {
     const wrapper = mount(
       <Col>
         <Col>
           <Col />
           col
         </Col>
-      </Col>
+      </Col>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render different components', () => {
+  it("should render different components", () => {
     let wrapper = mount(<Col as="p" />);
-    expect(wrapper.find('p').length).not.toBe(0);
+
+    expect(wrapper.find("p").length).not.toBe(0);
 
     wrapper = mount(<Col as="details" />);
-    expect(wrapper.find('details').length).not.toBe(0);
+    expect(wrapper.find("details").length).not.toBe(0);
 
     wrapper = mount(<Col as="h1" />);
-    expect(wrapper.find('h1').length).not.toBe(0);
+    expect(wrapper.find("h1").length).not.toBe(0);
 
     wrapper = mount(<Col as="div" />);
-    expect(wrapper.find('div').length).not.toBe(0);
+    expect(wrapper.find("div").length).not.toBe(0);
   });
 });
diff --git a/packages/react/src/col/col.styles.ts b/packages/react/src/col/col.styles.ts
index bae2fd5951..41c8a73130 100644
--- a/packages/react/src/col/col.styles.ts
+++ b/packages/react/src/col/col.styles.ts
@@ -1,10 +1,10 @@
-import { styled, VariantProps } from '../theme/stitches.config';
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledCol = styled('div', {
-  float: 'left',
-  boxSizing: 'border-box',
-  pl: 'calc($$rowGap / 2)',
-  pr: 'calc($$rowGap / 2)'
+export const StyledCol = styled("div", {
+  float: "left",
+  boxSizing: "border-box",
+  pl: "calc($$rowGap / 2)",
+  pr: "calc($$rowGap / 2)",
 });
 
 export type ColVariantsProps = VariantProps<typeof StyledCol>;
diff --git a/packages/react/src/col/col.tsx b/packages/react/src/col/col.tsx
index 4c2b0adc6f..d17fc53910 100644
--- a/packages/react/src/col/col.tsx
+++ b/packages/react/src/col/col.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
-import withDefaults from '../utils/with-defaults';
-import StyledCol, { ColVariantsProps } from './col.styles';
-import { CSS } from '../theme/stitches.config';
+import React from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {CSS} from "../theme/stitches.config";
+
+import StyledCol, {ColVariantsProps} from "./col.styles";
 
 interface Props {
   span?: number;
@@ -12,15 +14,12 @@ interface Props {
 
 const defaultProps = {
   span: 12,
-  offset: 0
+  offset: 0,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type ColProps = Props &
-  typeof defaultProps &
-  ColVariantsProps &
-  NativeAttrs;
+export type ColProps = Props & typeof defaultProps & ColVariantsProps & NativeAttrs;
 
 const Col: React.FC<React.PropsWithChildren<ColProps>> = ({
   children,
@@ -34,7 +33,7 @@ const Col: React.FC<React.PropsWithChildren<ColProps>> = ({
       css={{
         width: `${(100 / 12) * span}%`,
         marginLeft: `${(100 / 12) * offset}%`,
-        ...(css as any)
+        ...(css as any),
       }}
       {...props}
     >
@@ -43,7 +42,7 @@ const Col: React.FC<React.PropsWithChildren<ColProps>> = ({
   );
 };
 
-Col.toString = () => '.nextui-column';
+Col.toString = () => ".nextui-column";
 
 const MemoCol = React.memo(Col);
 
diff --git a/packages/react/src/col/index.ts b/packages/react/src/col/index.ts
index 0d9c0f9b5a..889b9cf16b 100644
--- a/packages/react/src/col/index.ts
+++ b/packages/react/src/col/index.ts
@@ -1,7 +1,7 @@
-import Col from './col';
-export type { ColProps } from './col';
+import Col from "./col";
+export type {ColProps} from "./col";
 
-export { StyledCol } from './col.styles';
-export type { ColVariantsProps } from './col.styles';
+export {StyledCol} from "./col.styles";
+export type {ColVariantsProps} from "./col.styles";
 
 export default Col;
diff --git a/packages/react/src/collapse/__tests__/group.test.tsx b/packages/react/src/collapse/__tests__/group.test.tsx
index 63d23f0c4d..988d5a1369 100644
--- a/packages/react/src/collapse/__tests__/group.test.tsx
+++ b/packages/react/src/collapse/__tests__/group.test.tsx
@@ -1,63 +1,64 @@
-import React from 'react';
-import { mount, render, ReactWrapper } from 'enzyme';
-import Collapse from '../index';
-import { updateWrapper } from 'tests/utils';
+import React from "react";
+import {mount, render, ReactWrapper} from "enzyme";
+import {updateWrapper} from "tests/utils";
+
+import Collapse from "../index";
 
 const getCollapseElement = (wrapper: ReactWrapper, className: string) => {
-  return wrapper.find(className).at(0).find('.nextui-collapse-view').at(0);
+  return wrapper.find(className).at(0).find(".nextui-collapse-view").at(0);
 };
 
 const expectCollapseToHaveARIAExpanded = (
   wrapper: ReactWrapper,
   className: string,
-  value: boolean
+  value: boolean,
 ) => {
-  expect(getCollapseElement(wrapper, className).props()['aria-expanded']).toBe(
-    value
-  );
+  expect(getCollapseElement(wrapper, className).props()["aria-expanded"]).toBe(value);
 };
 
-describe('Collapse Group', () => {
-  it('should render correctly', () => {
+describe("Collapse Group", () => {
+  it("should render correctly", () => {
     const wrapper = mount(
       <Collapse.Group>
         <Collapse title="title1">content1</Collapse>
         <Collapse title="title2">content2</Collapse>
-      </Collapse.Group>
+      </Collapse.Group>,
     );
 
     expect(wrapper).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should be no errors when children are missing', () => {
-    const wrapper = mount(<Collapse.Group></Collapse.Group>);
+  it("should be no errors when children are missing", () => {
+    const wrapper = mount(<Collapse.Group />);
 
     expect(wrapper).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work without accordion', () => {
+  it("should work without accordion", () => {
     const wrapper = render(
       <Collapse.Group accordion={false}>
         <Collapse title="title1">content1</Collapse>
         <Collapse title="title2">content2</Collapse>
-      </Collapse.Group>
+      </Collapse.Group>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should work with bordered', () => {
+  it("should work with bordered", () => {
     const wrapper = render(
       <Collapse.Group bordered={true}>
         <Collapse title="title1">content1</Collapse>
         <Collapse title="title2">content2</Collapse>
-      </Collapse.Group>
+      </Collapse.Group>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should be display all when without accordion', async () => {
+  it("should be display all when without accordion", async () => {
     const wrapper = mount(
       <Collapse.Group accordion={false}>
         <Collapse className="test-collapse-1" title="title1">
@@ -66,30 +67,30 @@ describe('Collapse Group', () => {
         <Collapse className="test-collapse-2" title="title2">
           content2
         </Collapse>
-      </Collapse.Group>
+      </Collapse.Group>,
     );
 
-    const view1 = getCollapseElement(wrapper, '.test-collapse-1');
-    const view2 = getCollapseElement(wrapper, '.test-collapse-2');
+    const view1 = getCollapseElement(wrapper, ".test-collapse-1");
+    const view2 = getCollapseElement(wrapper, ".test-collapse-2");
 
-    view1.at(0).simulate('click');
-    view2.at(0).simulate('click');
+    view1.at(0).simulate("click");
+    view2.at(0).simulate("click");
 
     await updateWrapper(wrapper, 300);
 
-    expectCollapseToHaveARIAExpanded(wrapper, '.test-collapse-1', true);
-    expectCollapseToHaveARIAExpanded(wrapper, '.test-collapse-2', true);
+    expectCollapseToHaveARIAExpanded(wrapper, ".test-collapse-1", true);
+    expectCollapseToHaveARIAExpanded(wrapper, ".test-collapse-2", true);
 
-    view1.at(0).simulate('click');
-    view2.at(0).simulate('click');
+    view1.at(0).simulate("click");
+    view2.at(0).simulate("click");
 
     await updateWrapper(wrapper, 300);
 
-    expectCollapseToHaveARIAExpanded(wrapper, '.test-collapse-1', false);
-    expectCollapseToHaveARIAExpanded(wrapper, '.test-collapse-2', false);
+    expectCollapseToHaveARIAExpanded(wrapper, ".test-collapse-1", false);
+    expectCollapseToHaveARIAExpanded(wrapper, ".test-collapse-2", false);
   });
 
-  it('should be display one when is in accordion mode', async () => {
+  it("should be display one when is in accordion mode", async () => {
     const wrapper = mount(
       <Collapse.Group>
         <Collapse className="test-collapse-1" title="title1">
@@ -98,28 +99,26 @@ describe('Collapse Group', () => {
         <Collapse className="test-collapse-2" title="title2">
           content2
         </Collapse>
-      </Collapse.Group>
+      </Collapse.Group>,
     );
 
-    const view2 = getCollapseElement(wrapper, '.test-collapse-2');
+    const view2 = getCollapseElement(wrapper, ".test-collapse-2");
 
-    view2.at(0).simulate('click');
+    view2.at(0).simulate("click");
     await updateWrapper(wrapper, 300);
 
-    expectCollapseToHaveARIAExpanded(wrapper, '.test-collapse-1', false);
-    expectCollapseToHaveARIAExpanded(wrapper, '.test-collapse-2', true);
+    expectCollapseToHaveARIAExpanded(wrapper, ".test-collapse-1", false);
+    expectCollapseToHaveARIAExpanded(wrapper, ".test-collapse-2", true);
   });
 
-  it('should trigger event when collapse changed', () => {
+  it("should trigger event when collapse changed", () => {
     let index = 0;
     let value = false;
 
-    const callback = jest
-      .fn()
-      .mockImplementation((idx: number | undefined, val: boolean) => {
-        index = idx || 0;
-        value = val;
-      });
+    const callback = jest.fn().mockImplementation((idx: number | undefined, val: boolean) => {
+      index = idx || 0;
+      value = val;
+    });
 
     const wrapper = mount(
       <Collapse.Group onChange={callback}>
@@ -128,10 +127,11 @@ describe('Collapse Group', () => {
         <Collapse className="test-collapse" title="title2">
           content3
         </Collapse>
-      </Collapse.Group>
+      </Collapse.Group>,
     );
-    const view = getCollapseElement(wrapper, '.test-collapse');
-    view.at(0).simulate('click');
+    const view = getCollapseElement(wrapper, ".test-collapse");
+
+    view.at(0).simulate("click");
 
     expect(callback).toHaveBeenCalled();
     expect(index).toBe(3);
diff --git a/packages/react/src/collapse/__tests__/index.test.tsx b/packages/react/src/collapse/__tests__/index.test.tsx
index e1fc892cdd..e2ed27239c 100644
--- a/packages/react/src/collapse/__tests__/index.test.tsx
+++ b/packages/react/src/collapse/__tests__/index.test.tsx
@@ -1,172 +1,170 @@
-import React from 'react';
-import { mount, render } from 'enzyme';
-import Collapse from '../index';
-import { updateWrapper } from 'tests/utils';
+import React from "react";
+import {mount, render} from "enzyme";
+import {updateWrapper} from "tests/utils";
 
-describe('Collapse', () => {
-  it('should render correctly', () => {
+import Collapse from "../index";
+
+describe("Collapse", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Collapse title="title">content</Collapse>);
+
     expect(wrapper).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with content title', () => {
+  it("should work with content title", () => {
     const wrapper = render(
       <div>
-        <Collapse title="title" subtitle="subtitle">
+        <Collapse subtitle="subtitle" title="title">
           content
         </Collapse>
-        <Collapse title={<h1>title</h1>} subtitle="subtitle" shadow>
+        <Collapse shadow subtitle="subtitle" title={<h1>title</h1>}>
           content
         </Collapse>
-      </div>
+      </div>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should work without divider', () => {
+  it("should work without divider", () => {
     const wrapper = render(
       <div>
         <Collapse divider={false} title="title">
           content
         </Collapse>
-      </div>
+      </div>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should work with content subtitle and shadow', () => {
+  it("should work with content subtitle and shadow", () => {
     const wrapper = render(
       <div>
-        <Collapse title="title" subtitle="subtitle">
+        <Collapse subtitle="subtitle" title="title">
           content
         </Collapse>
-        <Collapse title="title" subtitle={<h1>subtitle</h1>} shadow>
+        <Collapse shadow subtitle={<h1>subtitle</h1>} title="title">
           content
         </Collapse>
-      </div>
+      </div>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it.skip('should work with initial visible', () => {
+  it.skip("should work with initial visible", () => {
     const wrapper = render(
       <div>
-        <Collapse title="title" subtitle="subtitle">
+        <Collapse subtitle="subtitle" title="title">
           content
         </Collapse>
-        <Collapse title="title" expanded>
+        <Collapse expanded title="title">
           content
         </Collapse>
-      </div>
+      </div>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should switch visibility with expanded prop', async () => {
+  it("should switch visibility with expanded prop", async () => {
     const wrapper = mount(
-      <Collapse title="title" subtitle="subtitle">
+      <Collapse subtitle="subtitle" title="title">
         content
-      </Collapse>
+      </Collapse>,
     );
 
-    wrapper.setProps({ expanded: true });
+    wrapper.setProps({expanded: true});
     await updateWrapper(wrapper, 300);
 
     expect(wrapper).toMatchSnapshot();
 
-    wrapper.setProps({ expanded: false });
+    wrapper.setProps({expanded: false});
     await updateWrapper(wrapper, 300);
 
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should throw error when title missing', () => {
+  it("should throw error when title missing", () => {
     const Component = Collapse as any;
-    let errorMessage = '';
-    const errorSpy = jest
-      .spyOn(console, 'error')
-      .mockImplementation((msg) => (errorMessage = msg));
+    let errorMessage = "";
+    const errorSpy = jest.spyOn(console, "error").mockImplementation((msg) => (errorMessage = msg));
 
     mount(<Component subtitle="subtitle">content</Component>);
-    expect(errorMessage.toLowerCase()).not.toEqual('');
+    expect(errorMessage.toLowerCase()).not.toEqual("");
     errorSpy.mockRestore();
   });
 
-  it('should expand when title clicked', async () => {
+  it("should expand when title clicked", async () => {
     const wrapper = mount(<Collapse title="title">content</Collapse>);
-    wrapper.find('.nextui-collapse-view').at(0).simulate('click');
+
+    wrapper.find(".nextui-collapse-view").at(0).simulate("click");
     await updateWrapper(wrapper, 300);
-    expect(wrapper.find('.nextui-expand-content').length).not.toBe(0);
+    expect(wrapper.find(".nextui-expand-content").length).not.toBe(0);
   });
 
-  it('should work without animation', async () => {
+  it("should work without animation", async () => {
     const wrapper = mount(
-      <Collapse title="title" animated={false}>
+      <Collapse animated={false} title="title">
         content
-      </Collapse>
+      </Collapse>,
     );
-    wrapper.find('.nextui-collapse-view').at(0).simulate('click');
+
+    wrapper.find(".nextui-collapse-view").at(0).simulate("click");
     await updateWrapper(wrapper, 300);
-    expect(wrapper.find('.nextui-expand-content').length).not.toBe(0);
+    expect(wrapper.find(".nextui-expand-content").length).not.toBe(0);
   });
 
-  it('should be work with content', () => {
+  it("should be work with content", () => {
     const wrapper = mount(
       <div>
-        <Collapse
-          title="Content left test"
-          contentLeft={<span id="test-icon">test-icon</span>}
-        />
-      </div>
+        <Collapse contentLeft={<span id="test-icon">test-icon</span>} title="Content left test" />
+      </div>,
     );
-    expect(wrapper.find('#test-icon').at(0)).not.toBeNull();
+
+    expect(wrapper.find("#test-icon").at(0)).not.toBeNull();
   });
 
-  it('should be work with a custom arrow icon', () => {
+  it("should be work with a custom arrow icon", () => {
     const wrapper = mount(
       <div>
-        <Collapse
-          title="Content left test"
-          arrowIcon={<span id="test-icon">test-icon</span>}
-        />
-      </div>
+        <Collapse arrowIcon={<span id="test-icon">test-icon</span>} title="Content left test" />
+      </div>,
     );
-    expect(wrapper.find('#test-icon').at(0)).not.toBeNull();
+
+    expect(wrapper.find("#test-icon").at(0)).not.toBeNull();
   });
 
-  it('should be work without arrow icon', () => {
+  it("should be work without arrow icon", () => {
     const wrapper = mount(
       <div>
         <Collapse
-          title="Content left test"
-          showArrow={false}
           arrowIcon={<span id="test-icon">test-icon</span>}
+          showArrow={false}
+          title="Content left test"
         />
-      </div>
+      </div>,
     );
-    expect(wrapper.find('#test-icon').length).toBe(0);
+
+    expect(wrapper.find("#test-icon").length).toBe(0);
   });
 
-  it('should trigger event when collapse changed', () => {
+  it("should trigger event when collapse changed", () => {
     let value = false;
 
     const callback = jest
       .fn()
       .mockImplementation(
-        (
-          _: React.MouseEvent<HTMLDivElement, MouseEvent>,
-          __: number | undefined,
-          val: boolean
-        ) => {
+        (_: React.MouseEvent<HTMLDivElement, MouseEvent>, __: number | undefined, val: boolean) => {
           value = val;
-        }
+        },
       );
 
-    const wrapper = mount(
-      <Collapse title="Changed test" onChange={callback} />
-    );
-    wrapper.find('.nextui-collapse-view').at(0).simulate('click');
+    const wrapper = mount(<Collapse title="Changed test" onChange={callback} />);
+
+    wrapper.find(".nextui-collapse-view").at(0).simulate("click");
 
     expect(callback).toHaveBeenCalled();
     expect(value).toBe(true);
diff --git a/packages/react/src/collapse/collapse-context.ts b/packages/react/src/collapse/collapse-context.ts
index b45ceb085f..5413ef1b32 100644
--- a/packages/react/src/collapse/collapse-context.ts
+++ b/packages/react/src/collapse/collapse-context.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 export interface CollapseConfig {
   values: Array<number>;
@@ -8,11 +8,10 @@ export interface CollapseConfig {
 }
 
 const defaultContext = {
-  values: []
+  values: [],
 };
 
-export const CollapseContext =
-  React.createContext<CollapseConfig>(defaultContext);
+export const CollapseContext = React.createContext<CollapseConfig>(defaultContext);
 
 export const useCollapseContext = (): CollapseConfig =>
   React.useContext<CollapseConfig>(CollapseContext);
diff --git a/packages/react/src/collapse/collapse-group.tsx b/packages/react/src/collapse/collapse-group.tsx
index b7b4f0e0f3..a586350c82 100644
--- a/packages/react/src/collapse/collapse-group.tsx
+++ b/packages/react/src/collapse/collapse-group.tsx
@@ -1,15 +1,13 @@
-import React, { useMemo } from 'react';
-import withDefaults from '../utils/with-defaults';
-import { CollapseContext, CollapseConfig } from './collapse-context';
-import useCurrentState from '../use-current-state';
-import { setChildrenIndex } from '../utils/collections';
-import { CSS } from '../theme/stitches.config';
-
-import {
-  StyledCollapseGroup,
-  CollapseGroupVariantsProps
-} from './collapse.styles';
-import Collapse from './collapse';
+import React, {useMemo} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import useCurrentState from "../use-current-state";
+import {setChildrenIndex} from "../utils/collections";
+import {CSS} from "../theme/stitches.config";
+
+import {CollapseContext, CollapseConfig} from "./collapse-context";
+import {StyledCollapseGroup, CollapseGroupVariantsProps} from "./collapse.styles";
+import Collapse from "./collapse";
 
 interface Props {
   accordion?: boolean;
@@ -20,14 +18,12 @@ interface Props {
 }
 
 const defaultProps = {
-  accordion: true
+  accordion: true,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type CollapseGroupProps = Props &
-  NativeAttrs &
-  CollapseGroupVariantsProps & { css?: CSS };
+export type CollapseGroupProps = Props & NativeAttrs & CollapseGroupVariantsProps & {css?: CSS};
 
 const CollapseGroup: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
   children,
@@ -41,9 +37,11 @@ const CollapseGroup: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
 
   const updateValues = (currentIndex: number, nextState: boolean) => {
     const hasChild = stateRef.current.find((val) => val === currentIndex);
+
     onChange && onChange(currentIndex, nextState);
     if (accordion) {
       if (nextState) return setState([currentIndex]);
+
       return setState([]);
     }
     if (nextState) {
@@ -51,6 +49,7 @@ const CollapseGroup: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
       // If the user incorrectly set the state, Group component should ignore it.
       /* istanbul ignore if */
       if (hasChild) return;
+
       return setState([...stateRef.current, currentIndex]);
     }
     setState(stateRef.current.filter((item) => item !== currentIndex));
@@ -61,15 +60,13 @@ const CollapseGroup: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
       values: state,
       updateValues,
       divider,
-      animated
+      animated,
     }),
-    [state.join(',')]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.join(",")],
   );
 
-  const hasIndexChildren = useMemo(
-    () => setChildrenIndex(children, [Collapse]),
-    [children]
-  );
+  const hasIndexChildren = useMemo(() => setChildrenIndex(children, [Collapse]), [children]);
 
   return (
     <CollapseContext.Provider value={initialValue}>
@@ -78,6 +75,6 @@ const CollapseGroup: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
   );
 };
 
-CollapseGroup.toString = () => '.nextui-collapse-group';
+CollapseGroup.toString = () => ".nextui-collapse-group";
 
 export default withDefaults(CollapseGroup, defaultProps);
diff --git a/packages/react/src/collapse/collapse-icon.tsx b/packages/react/src/collapse/collapse-icon.tsx
index 2398597374..db504e5908 100644
--- a/packages/react/src/collapse/collapse-icon.tsx
+++ b/packages/react/src/collapse/collapse-icon.tsx
@@ -1,33 +1,26 @@
-import React from 'react';
-import {
-  StyledCollapseIcon,
-  CollapseIconVariantsProps
-} from './collapse.styles';
+import React from "react";
 
-const CollapseIcon: React.FC<CollapseIconVariantsProps> = ({ ...props }) => {
+import {StyledCollapseIcon, CollapseIconVariantsProps} from "./collapse.styles";
+
+const CollapseIcon: React.FC<CollapseIconVariantsProps> = ({...props}) => {
   return (
     <StyledCollapseIcon
-      role="presentation"
-      focusable="false"
       className="nextui-collapse-icon"
-      width="20"
-      height="20"
       fill="none"
+      focusable="false"
+      height="20"
+      role="presentation"
       viewBox="0 0 24 24"
+      width="20"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <path
-        d="M15.5 19l-7-7 7-7"
-        strokeWidth={1.5}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+      <path d="M15.5 19l-7-7 7-7" strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} />
     </StyledCollapseIcon>
   );
 };
 
-CollapseIcon.toString = () => '.nextui-collapse-icon';
+CollapseIcon.toString = () => ".nextui-collapse-icon";
 
 const MemoCollapseIcon = React.memo(CollapseIcon);
 
diff --git a/packages/react/src/collapse/collapse.stories.tsx b/packages/react/src/collapse/collapse.stories.tsx
index 735bdea9b8..bfe83072bd 100644
--- a/packages/react/src/collapse/collapse.stories.tsx
+++ b/packages/react/src/collapse/collapse.stories.tsx
@@ -1,88 +1,83 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { Grid, Text, Input } from '../index';
-import Collapse from './index';
-import useTheme from '../use-theme';
-import { Minus, Plus, User, Mail, Activity } from '../utils/icons';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Grid, Text, Input} from "../index";
+import useTheme from "../use-theme";
+import {Minus, Plus, User, Mail, Activity} from "../utils/icons";
+
+import Collapse from "./index";
 
 export default {
-  title: 'Surfaces/Collapse',
+  title: "Surfaces/Collapse",
   component: Collapse,
   decorators: [
     (Story) => (
-      <Grid.Container gap={1} justify="center" direction="column">
+      <Grid.Container direction="column" gap={1} justify="center">
         <Grid xs={6}>
           <Story />
         </Grid>
       </Grid.Container>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
 export const Default = () => (
-  <Collapse.Group onChange={(index, value) => console.log({ index, value })}>
+  <Collapse.Group onChange={(index, value) => console.log({index, value})}>
     <Collapse title={<h3>Option 1</h3>}>
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option B">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option C">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option D">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
   </Collapse.Group>
 );
 
 export const WithInput = () => (
-  <Collapse.Group onChange={(index, value) => console.log({ index, value })}>
+  <Collapse.Group onChange={(index, value) => console.log({index, value})}>
     <Collapse title={<h3>Option 1</h3>}>
       <Input />
     </Collapse>
     <Collapse title="Option B">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option C">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option D">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
   </Collapse.Group>
@@ -92,34 +87,30 @@ export const NoAccordion = () => (
   <Collapse.Group accordion={false}>
     <Collapse title="Option A">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option B">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option C">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option D">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
   </Collapse.Group>
@@ -127,20 +118,18 @@ export const NoAccordion = () => (
 
 export const Expanded = () => (
   <Collapse.Group>
-    <Collapse title="Option A" expanded>
+    <Collapse expanded title="Option A">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option B">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
   </Collapse.Group>
@@ -148,27 +137,25 @@ export const Expanded = () => (
 
 export const Subtitle = () => (
   <Collapse.Group>
-    <Collapse title="Option A" subtitle="More description about Option A">
+    <Collapse subtitle="More description about Option A" title="Option A">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse
-      title="Option B"
       subtitle={
         <>
           More description about <Text b>Option B</Text>
         </>
       }
+      title="Option B"
     >
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
   </Collapse.Group>
@@ -177,16 +164,11 @@ export const Subtitle = () => (
 export const Shadow = () => (
   <Grid.Container gap={2} xs={12}>
     <Grid xs={12}>
-      <Collapse
-        shadow
-        title="Option A"
-        subtitle="More description about Option A"
-      >
+      <Collapse shadow subtitle="More description about Option A" title="Option A">
         <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </Text>
       </Collapse>
     </Grid>
@@ -194,35 +176,31 @@ export const Shadow = () => (
       <Collapse.Group shadow>
         <Collapse title="Option A">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
 
         <Collapse title="Option B">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
         <Collapse title="Option C">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
         <Collapse title="Option D">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
       </Collapse.Group>
@@ -233,16 +211,11 @@ export const Shadow = () => (
 export const Bordered = () => (
   <Grid.Container gap={2} xs={12}>
     <Grid xs={12}>
-      <Collapse
-        bordered
-        title="Option A"
-        subtitle="More description about Option A"
-      >
+      <Collapse bordered subtitle="More description about Option A" title="Option A">
         <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </Text>
       </Collapse>
     </Grid>
@@ -250,34 +223,30 @@ export const Bordered = () => (
       <Collapse.Group bordered>
         <Collapse title="Option A">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
         <Collapse title="Option B">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
         <Collapse title="Option C">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
         <Collapse title="Option D">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
       </Collapse.Group>
@@ -291,34 +260,30 @@ export const Splitted = () => (
       <Collapse.Group splitted>
         <Collapse title="Option A">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
         <Collapse title="Option B">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
         <Collapse title="Option C">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
         <Collapse title="Option D">
           <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </Text>
         </Collapse>
       </Collapse.Group>
@@ -328,42 +293,34 @@ export const Splitted = () => (
 
 export const ContentLeft = () => {
   const theme = useTheme();
+
   return (
     <Grid.Container gap={2} xs={12}>
       <Grid xs={12}>
         <Collapse.Group shadow>
-          <Collapse
-            title="User details"
-            contentLeft={<User theme={theme} fill="currentColor" />}
-          >
+          <Collapse contentLeft={<User fill="currentColor" theme={theme} />} title="User details">
             <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             </Text>
           </Collapse>
 
-          <Collapse
-            title="Notifications"
-            contentLeft={<Mail theme={theme} fill="currentColor" />}
-          >
+          <Collapse contentLeft={<Mail fill="currentColor" theme={theme} />} title="Notifications">
             <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             </Text>
           </Collapse>
           <Collapse
+            contentLeft={<Activity fill="currentColor" theme={theme} />}
             title="User activity"
-            contentLeft={<Activity theme={theme} fill="currentColor" />}
           >
             <Text>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-              enim ad minim veniam, quis nostrud exercitation ullamco laboris
-              nisi ut aliquip ex ea commodo consequat.
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             </Text>
           </Collapse>
         </Collapse.Group>
@@ -376,34 +333,30 @@ export const NoDivider = () => (
   <Collapse.Group shadow divider={false}>
     <Collapse title="Option A">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option B">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option C">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option D">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
   </Collapse.Group>
@@ -413,34 +366,30 @@ export const Disabled = () => (
   <Collapse.Group shadow divider={false}>
     <Collapse title="Option A">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option B">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
-    <Collapse disabled title="Option C" subtitle="Disabled option">
+    <Collapse disabled subtitle="Disabled option" title="Option C">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
     <Collapse title="Option D">
       <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
       </Text>
     </Collapse>
   </Collapse.Group>
@@ -448,38 +397,35 @@ export const Disabled = () => (
 
 export const CustomArrow = () => {
   const theme = useTheme();
+
   return (
     <Collapse.Group shadow>
-      <Collapse title="Option A" arrowIcon={<Plus theme={theme} />}>
+      <Collapse arrowIcon={<Plus theme={theme} />} title="Option A">
         <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </Text>
       </Collapse>
-      <Collapse title="Option B" arrowIcon={<Minus theme={theme} />}>
+      <Collapse arrowIcon={<Minus theme={theme} />} title="Option B">
         <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </Text>
       </Collapse>
-      <Collapse disabled title="Option C" subtitle="Disabled option">
+      <Collapse disabled subtitle="Disabled option" title="Option C">
         <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </Text>
       </Collapse>
       <Collapse title="Option D">
         <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </Text>
       </Collapse>
     </Collapse.Group>
@@ -491,34 +437,30 @@ export const NoAnimated = () => {
     <Collapse.Group shadow animated={false}>
       <Collapse title="Option A">
         <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </Text>
       </Collapse>
       <Collapse title="Option B">
         <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </Text>
       </Collapse>
-      <Collapse disabled title="Option C" subtitle="Disabled option">
+      <Collapse disabled subtitle="Disabled option" title="Option C">
         <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </Text>
       </Collapse>
       <Collapse title="Option D">
         <Text>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </Text>
       </Collapse>
     </Collapse.Group>
diff --git a/packages/react/src/collapse/collapse.styles.ts b/packages/react/src/collapse/collapse.styles.ts
index 7c2341b930..be3467eb3e 100644
--- a/packages/react/src/collapse/collapse.styles.ts
+++ b/packages/react/src/collapse/collapse.styles.ts
@@ -1,239 +1,234 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import { sharedFocus, cssFocusVisible } from '../theme/shared-css';
+import {styled, VariantProps} from "../theme/stitches.config";
+import {sharedFocus, cssFocusVisible} from "../theme/shared-css";
 
 export const StyledCollapse = styled(
-  'div',
+  "div",
   {
-    transition: '$default',
-    '.nextui-collapse-title-content': {
-      w: '100%',
-      'h1,h2,h3,h4,h5,h6,p,span,b': {
-        margin: 0
-      }
+    transition: "$default",
+    ".nextui-collapse-title-content": {
+      w: "100%",
+      "h1,h2,h3,h4,h5,h6,p,span,b": {
+        margin: 0,
+      },
     },
-    '.nextui-collapse-title-container': {
-      d: 'flex',
-      jc: 'space-between',
-      ai: 'center'
+    ".nextui-collapse-title-container": {
+      d: "flex",
+      jc: "space-between",
+      ai: "center",
     },
-    '.nextui-collapse-title': {
-      color: '$foreground'
+    ".nextui-collapse-title": {
+      color: "$foreground",
     },
-    '.nextui-collapse-subtitle': {
-      color: '$accents7',
+    ".nextui-collapse-subtitle": {
+      color: "$accents7",
       margin: 0,
-      '*': {
-        margin: 0
-      }
+      "*": {
+        margin: 0,
+      },
     },
-    '.nextui-collapse-title-content-left': {
-      mr: '$sm'
+    ".nextui-collapse-title-content-left": {
+      mr: "$sm",
     },
-    '.nextui-collapse-title-content-left, .nextui-collapse-title-content-right':
-      {
-        d: 'flex',
-        ai: 'center'
-      },
-    '@motion': {
-      transition: 'none',
-      '.nextui-collapse-title-content-right ': {
+    ".nextui-collapse-title-content-left, .nextui-collapse-title-content-right": {
+      d: "flex",
+      ai: "center",
+    },
+    "@motion": {
+      transition: "none",
+      ".nextui-collapse-title-content-right ": {
         svg: {
-          transition: 'none'
-        }
-      }
+          transition: "none",
+        },
+      },
     },
     variants: {
       shadow: {
         true: {
-          border: 'none',
-          boxShadow: '$md',
-          br: '$lg',
-          p: '0 $lg',
-          bg: '$backgroundContrast'
-        }
+          border: "none",
+          boxShadow: "$md",
+          br: "$lg",
+          p: "0 $lg",
+          bg: "$backgroundContrast",
+        },
       },
       borderWeight: {
         light: {
-          $$collapseBorderWidth: '$borderWeights$light'
+          $$collapseBorderWidth: "$borderWeights$light",
         },
         normal: {
-          $$collapseBorderWidth: '$borderWeights$normal'
+          $$collapseBorderWidth: "$borderWeights$normal",
         },
         bold: {
-          $$collapseBorderWidth: '$borderWeights$bold'
+          $$collapseBorderWidth: "$borderWeights$bold",
         },
         extrabold: {
-          $$collapseBorderWidth: '$borderWeights$extrabold'
+          $$collapseBorderWidth: "$borderWeights$extrabold",
         },
         black: {
-          $$collapseBorderWidth: '$borderWeights$black'
-        }
+          $$collapseBorderWidth: "$borderWeights$black",
+        },
       },
       divider: {
         true: {
-          borderTop: '$$collapseBorderWidth solid $border',
-          borderBottom: '$$collapseBorderWidth solid $border'
-        }
+          borderTop: "$$collapseBorderWidth solid $border",
+          borderBottom: "$$collapseBorderWidth solid $border",
+        },
       },
       bordered: {
         true: {
-          br: '$lg',
-          p: '0 $lg',
-          border: '$$collapseBorderWidth solid $border'
-        }
+          br: "$lg",
+          p: "0 $lg",
+          border: "$$collapseBorderWidth solid $border",
+        },
       },
       animated: {
         true: {
-          '.nextui-collapse-title-content-right ': {
+          ".nextui-collapse-title-content-right ": {
             svg: {
-              transition: 'transform 200ms ease'
-            }
-          }
+              transition: "transform 200ms ease",
+            },
+          },
         },
         false: {
-          transition: 'none'
-        }
+          transition: "none",
+        },
       },
       visible: {
         true: {
-          '.nextui-collapse-title-content-right ': {
+          ".nextui-collapse-title-content-right ": {
             svg: {
-              transform: 'rotateZ(-90deg)'
-            }
-          }
+              transform: "rotateZ(-90deg)",
+            },
+          },
         },
         false: {
-          '.nextui-collapse-title-content-right': {
+          ".nextui-collapse-title-content-right": {
             svg: {
-              transform: 'rotateZ(0deg)'
-            }
-          }
-        }
-      }
+              transform: "rotateZ(0deg)",
+            },
+          },
+        },
+      },
     },
     defaultVariants: {
-      borderWeight: 'light'
-    }
+      borderWeight: "light",
+    },
   },
-  sharedFocus
+  sharedFocus,
 );
 
 export const StyledCollapseView = styled(
-  'div',
+  "div",
   {
-    w: '100%',
-    d: 'block',
-    ta: 'left',
-    bg: 'transparent',
-    border: 'none',
-    cursor: 'pointer',
-    outline: 'none',
-    padding: '$lg 0',
+    w: "100%",
+    d: "block",
+    ta: "left",
+    bg: "transparent",
+    border: "none",
+    cursor: "pointer",
+    outline: "none",
+    padding: "$lg 0",
     variants: {
       disabled: {
         true: {
-          cursor: 'not-allowed',
-          '.nextui-collapse-title, .nextui-collapse-subtitle': {
-            opacity: 0.5
-          }
-        }
-      }
-    }
+          cursor: "not-allowed",
+          ".nextui-collapse-title, .nextui-collapse-subtitle": {
+            opacity: 0.5,
+          },
+        },
+      },
+    },
   },
-  cssFocusVisible
+  cssFocusVisible,
 );
 
-export const StyledCollapseContent = styled('div', {
-  fontSize: '$base',
-  lineHeight: '$lg',
-  pb: '$lg',
-  '*:first-child': {
-    mt: 0
+export const StyledCollapseContent = styled("div", {
+  fontSize: "$base",
+  lineHeight: "$lg",
+  pb: "$lg",
+  "*:first-child": {
+    mt: 0,
+  },
+  "*:last-child": {
+    mb: 0,
   },
-  '*:last-child': {
-    mb: 0
-  }
 });
 
-export const StyledCollapseIcon = styled('svg', {
+export const StyledCollapseIcon = styled("svg", {
   path: {
-    stroke: '$accents7'
-  }
+    stroke: "$accents7",
+  },
 });
 
-export const StyledCollapseGroup = styled('div', {
-  width: 'auto',
-  padding: '0 $sm',
-  'div + div': {
-    borderTop: 'none'
+export const StyledCollapseGroup = styled("div", {
+  width: "auto",
+  padding: "0 $sm",
+  "div + div": {
+    borderTop: "none",
   },
   [`& ${StyledCollapse}:first-child`]: {
-    borderTop: 'none'
+    borderTop: "none",
   },
   [`& ${StyledCollapse}:last-child`]: {
-    borderBottom: 'none'
+    borderBottom: "none",
   },
   variants: {
     borderWeight: {
       light: {
-        $$collapseGroupBorderWidth: '$borderWeights$light'
+        $$collapseGroupBorderWidth: "$borderWeights$light",
       },
       normal: {
-        $$collapseGroupBorderWidth: '$borderWeights$normal'
+        $$collapseGroupBorderWidth: "$borderWeights$normal",
       },
       bold: {
-        $$collapseGroupBorderWidth: '$borderWeights$bold'
+        $$collapseGroupBorderWidth: "$borderWeights$bold",
       },
       extrabold: {
-        $$collapseGroupBorderWidth: '$borderWeights$extrabold'
+        $$collapseGroupBorderWidth: "$borderWeights$extrabold",
       },
       black: {
-        $$collapseGroupBorderWidth: '$borderWeights$black'
-      }
+        $$collapseGroupBorderWidth: "$borderWeights$black",
+      },
     },
     shadow: {
       true: {
-        br: '$lg',
-        border: 'none',
-        boxShadow: '$md',
-        p: '0 $lg',
-        bg: '$backgroundContrast'
-      }
+        br: "$lg",
+        border: "none",
+        boxShadow: "$md",
+        p: "0 $lg",
+        bg: "$backgroundContrast",
+      },
     },
     bordered: {
       true: {
-        br: '$lg',
-        p: '0 $lg',
-        border: '$$collapseGroupBorderWidth solid $border'
-      }
+        br: "$lg",
+        p: "0 $lg",
+        border: "$$collapseGroupBorderWidth solid $border",
+      },
     },
     splitted: {
       true: {
         [`& ${StyledCollapse}`]: {
-          br: '$lg',
-          border: 'none',
-          bg: '$backgroundContrast',
-          boxShadow: '$md',
-          p: '0 $lg',
-          margin: '$md 0'
-        }
-      }
-    }
+          br: "$lg",
+          border: "none",
+          bg: "$backgroundContrast",
+          boxShadow: "$md",
+          p: "0 $lg",
+          margin: "$md 0",
+        },
+      },
+    },
   },
   defaultVariants: {
-    borderWeight: 'light',
+    borderWeight: "light",
     shadow: false,
     bordered: false,
-    splitted: false
-  }
+    splitted: false,
+  },
 });
 
 export type CollapseVariantsProps = VariantProps<typeof StyledCollapse>;
 export type CollapseViewVariantsProps = VariantProps<typeof StyledCollapseView>;
-export type CollapseContentVariantsProps = VariantProps<
-  typeof StyledCollapseContent
->;
+export type CollapseContentVariantsProps = VariantProps<typeof StyledCollapseContent>;
 export type CollapseIconVariantsProps = VariantProps<typeof StyledCollapseIcon>;
-export type CollapseGroupVariantsProps = VariantProps<
-  typeof StyledCollapseGroup
->;
+export type CollapseGroupVariantsProps = VariantProps<typeof StyledCollapseGroup>;
diff --git a/packages/react/src/collapse/collapse.tsx b/packages/react/src/collapse/collapse.tsx
index 023a31986f..cc41c1e31c 100644
--- a/packages/react/src/collapse/collapse.tsx
+++ b/packages/react/src/collapse/collapse.tsx
@@ -1,22 +1,24 @@
-import React, { useEffect, useMemo } from 'react';
-import { useFocusRing } from '@react-aria/focus';
-import CollapseIcon from './collapse-icon';
-import Expand from '../utils/expand';
-import { useCollapseContext } from './collapse-context';
-import useCurrentState from '../use-current-state';
-import CollapseGroup from './collapse-group';
-import useWarning from '../use-warning';
-import { useId } from '@react-aria/utils';
-import { CSS } from '../theme/stitches.config';
-import useKeyboard, { KeyCode } from '../use-keyboard';
+import React, {useEffect, useMemo} from "react";
+import {useFocusRing} from "@react-aria/focus";
+import {useId} from "@react-aria/utils";
+
+import {warn} from "../utils/console";
+import useCurrentState from "../use-current-state";
+import Expand from "../utils/expand";
+import {CSS} from "../theme/stitches.config";
+import useKeyboard, {KeyCode} from "../use-keyboard";
+import clsx from "../utils/clsx";
+import withDefaults from "../utils/with-defaults";
+
+import CollapseGroup from "./collapse-group";
+import {useCollapseContext} from "./collapse-context";
 import {
   StyledCollapse,
   StyledCollapseView,
   CollapseVariantsProps,
-  StyledCollapseContent
-} from './collapse.styles';
-import clsx from '../utils/clsx';
-import withDefaults from '../utils/with-defaults';
+  StyledCollapseContent,
+} from "./collapse.styles";
+import CollapseIcon from "./collapse-icon";
 
 interface Props {
   title: React.ReactNode | string;
@@ -35,7 +37,7 @@ interface Props {
   onChange?: (
     event: React.MouseEvent<HTMLDivElement, MouseEvent>,
     index?: number | undefined,
-    value?: boolean
+    value?: boolean,
   ) => void;
   as?: keyof JSX.IntrinsicElements;
 }
@@ -48,7 +50,7 @@ const defaultProps = {
   animated: true,
   disabled: false,
   preventDefault: true,
-  expanded: false
+  expanded: false,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -56,9 +58,9 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export type CollapseProps = Props &
   typeof defaultProps &
   CollapseVariantsProps &
-  NativeAttrs & { css?: CSS };
+  NativeAttrs & {css?: CSS};
 
-const preClass = 'nextui-collapse';
+const preClass = "nextui-collapse";
 
 const Collapse: React.FC<React.PropsWithChildren<CollapseProps>> = ({
   children,
@@ -86,41 +88,42 @@ const Collapse: React.FC<React.PropsWithChildren<CollapseProps>> = ({
     values,
     divider: groupDivider,
     animated: groupAnimated,
-    updateValues
+    updateValues,
   } = useCollapseContext();
 
   const {
     isFocusVisible,
-    focusProps
+    focusProps,
   }: {
     isFocusVisible: boolean;
-    focusProps: Omit<
-      React.HTMLAttributes<HTMLButtonElement>,
-      keyof CollapseProps
-    >;
+    focusProps: Omit<React.HTMLAttributes<HTMLButtonElement>, keyof CollapseProps>;
   } = useFocusRing();
 
   if (!title) {
-    useWarning('"title" is required.', 'Collapse');
+    warn('"title" is required.', "Collapse");
   }
 
   useEffect(() => {
     if (visible !== expanded) {
       setVisible(expanded);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [expanded]);
 
   useEffect(() => {
     if (!values.length) return;
     const isActive = !!values.find((item) => item === index);
+
     setVisible(isActive);
-  }, [values.join(',')]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values.join(",")]);
 
   const ariaLabelledById = useId();
   const ariaControlId = useId();
 
   const arrowComponent = useMemo(() => {
     if (!showArrow) return null;
+
     return arrowIcon ? arrowIcon : <CollapseIcon />;
   }, [arrowIcon, showArrow]);
 
@@ -130,87 +133,74 @@ const Collapse: React.FC<React.PropsWithChildren<CollapseProps>> = ({
     return groupAnimated === undefined ? animatedProp : groupAnimated;
   }, [groupAnimated, animatedProp]);
 
-  const handleChange = (
-    event: React.MouseEvent<HTMLDivElement, MouseEvent>
-  ) => {
+  const handleChange = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (disabled) return;
     const next = !visibleRef.current;
+
     setVisible(next);
     updateValues && updateValues(index, next);
     onChange && onChange(event, index, next);
   };
 
-  const { bindings } = useKeyboard(
+  const {bindings} = useKeyboard(
     (event: any) => {
       handleChange(event);
     },
     [KeyCode.Enter, KeyCode.Space],
     {
       disableGlobalEvent: true,
-      preventDefault
-    }
+      preventDefault,
+    },
   );
 
   const getState = useMemo(() => {
-    return visible ? 'open' : 'closed';
+    return visible ? "open" : "closed";
   }, [visible]);
 
   return (
     <StyledCollapse
-      tabIndex={-1}
-      shadow={shadow}
-      bordered={bordered}
       animated={animated}
-      divider={withDivider}
       borderWeight={borderWeight}
-      visible={visible}
-      data-state={getState}
+      bordered={bordered}
       className={clsx(className, preClass, `${preClass}--${getState}`)}
+      data-state={getState}
+      divider={withDivider}
+      shadow={shadow}
+      tabIndex={-1}
+      visible={visible}
       {...props}
     >
       <StyledCollapseView
-        role="button"
-        tabIndex={disabled ? -1 : 0}
-        id={ariaLabelledById}
+        aria-controls={ariaControlId}
+        aria-disabled={disabled}
+        aria-expanded={visible}
         className={`${preClass}-view`}
         data-state={getState}
         disabled={disabled}
-        aria-disabled={disabled}
-        aria-expanded={visible}
-        aria-controls={ariaControlId}
+        id={ariaLabelledById}
         isFocusVisible={isFocusVisible}
+        role="button"
+        tabIndex={disabled ? -1 : 0}
         onClick={handleChange}
         {...focusProps}
         {...bindings}
       >
         <div className={clsx(`${preClass}-title-container`)}>
-          {contentLeft && (
-            <div className={`${preClass}-title-content-left`}>
-              {contentLeft}
-            </div>
-          )}
+          {contentLeft && <div className={`${preClass}-title-content-left`}>{contentLeft}</div>}
           <div className={`${preClass}-title-content`}>
-            {React.isValidElement(title) ? (
-              title
-            ) : (
-              <h3 className={`${preClass}-title`}>{title}</h3>
-            )}
-            {subtitle && (
-              <div className={`${preClass}-subtitle`}>{subtitle}</div>
-            )}
-          </div>
-          <div className={`${preClass}-title-content-right`}>
-            {arrowComponent}
+            {React.isValidElement(title) ? title : <h3 className={`${preClass}-title`}>{title}</h3>}
+            {subtitle && <div className={`${preClass}-subtitle`}>{subtitle}</div>}
           </div>
+          <div className={`${preClass}-title-content-right`}>{arrowComponent}</div>
         </div>
       </StyledCollapseView>
-      <Expand isExpanded={visible} animated={animated}>
+      <Expand animated={animated} isExpanded={visible}>
         <StyledCollapseContent
-          role="region"
-          tabIndex={-1}
-          id={ariaControlId}
           aria-labelledby={ariaLabelledById}
           className={`${preClass}-content`}
+          id={ariaControlId}
+          role="region"
+          tabIndex={-1}
         >
           {children}
         </StyledCollapseContent>
@@ -219,7 +209,7 @@ const Collapse: React.FC<React.PropsWithChildren<CollapseProps>> = ({
   );
 };
 
-Collapse.toString = () => '.nextui-collapse';
+Collapse.toString = () => ".nextui-collapse";
 
 type CollapseComponent<P = {}> = React.FC<P> & {
   Group: typeof CollapseGroup;
@@ -228,9 +218,6 @@ type CollapseComponent<P = {}> = React.FC<P> & {
 type ComponentProps = Partial<typeof defaultProps> &
   Omit<Props, keyof typeof defaultProps> &
   CollapseVariantsProps &
-  NativeAttrs & { css?: CSS };
+  NativeAttrs & {css?: CSS};
 
-export default withDefaults(
-  Collapse,
-  defaultProps
-) as CollapseComponent<ComponentProps>;
+export default withDefaults(Collapse, defaultProps) as CollapseComponent<ComponentProps>;
diff --git a/packages/react/src/collapse/index.ts b/packages/react/src/collapse/index.ts
index ac267ba3b5..01ad1fa05b 100644
--- a/packages/react/src/collapse/index.ts
+++ b/packages/react/src/collapse/index.ts
@@ -1,8 +1,8 @@
-import Collapse from './collapse';
-import CollapseGroup from './collapse-group';
+import Collapse from "./collapse";
+import CollapseGroup from "./collapse-group";
 
-export type { CollapseProps } from './collapse';
-export type { CollapseGroupProps } from './collapse-group';
+export type {CollapseProps} from "./collapse";
+export type {CollapseGroupProps} from "./collapse-group";
 
 Collapse.Group = CollapseGroup;
 
@@ -12,14 +12,14 @@ export {
   StyledCollapseView,
   StyledCollapseContent,
   StyledCollapseIcon,
-  StyledCollapseGroup
-} from './collapse.styles';
+  StyledCollapseGroup,
+} from "./collapse.styles";
 export type {
   CollapseVariantsProps,
   CollapseViewVariantsProps,
   CollapseContentVariantsProps,
   CollapseIconVariantsProps,
-  CollapseGroupVariantsProps
-} from './collapse.styles';
+  CollapseGroupVariantsProps,
+} from "./collapse.styles";
 
 export default Collapse;
diff --git a/packages/react/src/container/container.styles.ts b/packages/react/src/container/container.styles.ts
index 397636bf95..4e2af0edc9 100644
--- a/packages/react/src/container/container.styles.ts
+++ b/packages/react/src/container/container.styles.ts
@@ -1,39 +1,39 @@
-import { styled, VariantProps } from '../theme/stitches.config';
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledContainer = styled('div', {
-  w: '100%',
-  mr: 'auto',
-  ml: 'auto',
+export const StyledContainer = styled("div", {
+  w: "100%",
+  mr: "auto",
+  ml: "auto",
   variants: {
     fluid: {
       true: {
-        maxWidth: '100%'
-      }
+        maxWidth: "100%",
+      },
     },
     responsive: {
       true: {
-        '@xs': {
-          maxWidth: '$breakpoints$xs'
+        "@xs": {
+          maxWidth: "$breakpoints$xs",
         },
-        '@sm': {
-          maxWidth: '$breakpoints$sm'
+        "@sm": {
+          maxWidth: "$breakpoints$sm",
         },
-        '@md': {
-          maxWidth: '$breakpoints$md'
+        "@md": {
+          maxWidth: "$breakpoints$md",
         },
-        '@lg': {
-          maxWidth: '$breakpoints$lg'
+        "@lg": {
+          maxWidth: "$breakpoints$lg",
         },
-        '@xl': {
-          maxWidth: '$breakpoints$xl'
-        }
-      }
-    }
+        "@xl": {
+          maxWidth: "$breakpoints$xl",
+        },
+      },
+    },
   },
   defaultVariants: {
     fluid: false,
-    responsive: true
-  }
+    responsive: true,
+  },
 });
 
 export type ContainerVariantsProps = VariantProps<typeof StyledContainer>;
diff --git a/packages/react/src/container/container.tsx b/packages/react/src/container/container.tsx
index 873098f5af..7d9af72569 100644
--- a/packages/react/src/container/container.tsx
+++ b/packages/react/src/container/container.tsx
@@ -1,14 +1,9 @@
-import React, { useMemo } from 'react';
-import { CSS } from '../theme/stitches.config';
-import {
-  Wrap,
-  Display,
-  Justify,
-  Direction,
-  AlignItems,
-  AlignContent
-} from '../utils/prop-types';
-import StyledContainer from './container.styles';
+import React, {useMemo} from "react";
+
+import {CSS} from "../theme/stitches.config";
+import {Wrap, Display, Justify, Direction, AlignItems, AlignContent} from "../utils/prop-types";
+
+import StyledContainer from "./container.styles";
 
 interface Props {
   gap?: number;
@@ -38,9 +33,9 @@ const defaultProps = {
   xl: false,
   responsive: true,
   fluid: false,
-  wrap: 'wrap' as Wrap,
-  as: 'div' as keyof JSX.IntrinsicElements,
-  display: 'block' as Display
+  wrap: "wrap" as Wrap,
+  as: "div" as keyof JSX.IntrinsicElements,
+  display: "block" as Display,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -72,16 +67,18 @@ const Container: React.FC<React.PropsWithChildren<ContainerProps>> = ({
   }, [gap]);
 
   const getMaxWidth = () => {
-    if (xs) return '$breakpoints$xs';
-    if (sm) return '$breakpoints$sm';
-    if (md) return '$breakpoints$md';
-    if (lg) return '$breakpoints$lg';
-    if (xl) return '$breakpoints$xl';
-    return '';
+    if (xs) return "$breakpoints$xs";
+    if (sm) return "$breakpoints$sm";
+    if (md) return "$breakpoints$md";
+    if (lg) return "$breakpoints$lg";
+    if (xl) return "$breakpoints$xl";
+
+    return "";
   };
 
   return (
     <StyledContainer
+      as={as}
       css={{
         px: gapUnit,
         maxWidth: getMaxWidth(),
@@ -91,11 +88,10 @@ const Container: React.FC<React.PropsWithChildren<ContainerProps>> = ({
         display: display,
         justifyContent: justify,
         flexDirection: direction,
-        ...(css as any)
+        ...(css as any),
       }}
-      responsive={responsive}
       fluid={fluid}
-      as={as}
+      responsive={responsive}
       {...props}
     >
       {children}
@@ -103,7 +99,7 @@ const Container: React.FC<React.PropsWithChildren<ContainerProps>> = ({
   );
 };
 
-Container.toString = () => '.nextui-container';
+Container.toString = () => ".nextui-container";
 
 type ComponentProps = Omit<Props, keyof typeof defaultProps> &
   Partial<typeof defaultProps> &
diff --git a/packages/react/src/container/index.ts b/packages/react/src/container/index.ts
index e2e5897341..6a94103253 100644
--- a/packages/react/src/container/index.ts
+++ b/packages/react/src/container/index.ts
@@ -1,8 +1,8 @@
-import Container from './container';
+import Container from "./container";
 
-export type { ContainerProps } from './container';
+export type {ContainerProps} from "./container";
 
-export { StyledContainer } from './container.styles';
-export type { ContainerVariantsProps } from './container.styles';
+export {StyledContainer} from "./container.styles";
+export type {ContainerVariantsProps} from "./container.styles";
 
 export default Container;
diff --git a/packages/react/src/css-baseline/css-baseline.tsx b/packages/react/src/css-baseline/css-baseline.tsx
index e0bffb04d4..1828b72dd0 100644
--- a/packages/react/src/css-baseline/css-baseline.tsx
+++ b/packages/react/src/css-baseline/css-baseline.tsx
@@ -1,245 +1,245 @@
-import React from 'react';
-import { globalCss, getCssText } from '../theme/stitches.config';
+import React from "react";
+
+import {globalCss, getCssText} from "../theme/stitches.config";
 
 const globalStyles = globalCss({
-  '*, *:before, *:after': {
-    boxSizing: 'border-box',
-    textRendering: 'geometricPrecision',
-    WebkitTapHighlightColor: 'transparent'
+  "*, *:before, *:after": {
+    boxSizing: "border-box",
+    textRendering: "geometricPrecision",
+    WebkitTapHighlightColor: "transparent",
   },
   html: {
-    fontSize: '$base'
+    fontSize: "$base",
   },
   body: {
     margin: 0,
     padding: 0,
-    minHeight: '100%',
-    position: 'relative',
-    overflowX: 'hidden',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-    textRendering: 'optimizeLegibility',
-    fontSize: '$base',
-    lineHeight: '$md',
-    fontFamily: '$sans'
-  },
-  'html, body': {
-    backgroundColor: '$background',
-    color: '$text'
-  },
-  'p, small': {
-    color: 'inherit',
-    letterSpacing: '$tighter',
-    fontWeight: '$normal',
-    fontFamily: '$sans'
+    minHeight: "100%",
+    position: "relative",
+    overflowX: "hidden",
+    WebkitFontSmoothing: "antialiased",
+    MozOsxFontSmoothing: "grayscale",
+    textRendering: "optimizeLegibility",
+    fontSize: "$base",
+    lineHeight: "$md",
+    fontFamily: "$sans",
+  },
+  "html, body": {
+    backgroundColor: "$background",
+    color: "$text",
+  },
+  "p, small": {
+    color: "inherit",
+    letterSpacing: "$tighter",
+    fontWeight: "$normal",
+    fontFamily: "$sans",
   },
   p: {
-    fontSize: '$base',
-    lineHeight: '$lg'
+    fontSize: "$base",
+    lineHeight: "$lg",
   },
   small: {
     margin: 0,
-    lineHeight: '$xs',
-    fontSize: '$xs'
+    lineHeight: "$xs",
+    fontSize: "$xs",
   },
   b: {
-    fontWeight: '$semibold'
+    fontWeight: "$semibold",
   },
   span: {
-    fontSize: 'inherit',
-    color: 'inherit',
-    fontWeight: 'inherit'
+    fontSize: "inherit",
+    color: "inherit",
+    fontWeight: "inherit",
   },
   img: {
-    maxWidth: '100%'
+    maxWidth: "100%",
   },
   a: {
-    cursor: 'pointer',
-    fontSize: 'inherit',
-    WebkitTouchCallout: 'none',
-    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-    WebkitBoxAlign: 'center',
-    alignItems: 'center',
-    color: '$link',
-    textDecoration: 'none'
-  },
-  'a:hover': {
-    textDecoration: 'none'
-  },
-  'ul,ol': {
+    cursor: "pointer",
+    fontSize: "inherit",
+    WebkitTouchCallout: "none",
+    WebkitTapHighlightColor: "rgba(0, 0, 0, 0)",
+    WebkitBoxAlign: "center",
+    alignItems: "center",
+    color: "$link",
+    textDecoration: "none",
+  },
+  "a:hover": {
+    textDecoration: "none",
+  },
+  "ul,ol": {
     padding: 0,
-    listStyleType: 'none',
-    margin: '$sm $sm $sm $lg',
-    color: '$foreground'
+    listStyleType: "none",
+    margin: "$sm $sm $sm $lg",
+    color: "$foreground",
   },
   ol: {
-    listStyleType: 'decimal'
+    listStyleType: "decimal",
   },
   li: {
-    marginBottom: '$5',
-    fontSize: '$base',
-    lineHeight: '$lg'
+    marginBottom: "$5",
+    fontSize: "$base",
+    lineHeight: "$lg",
   },
-  'h1,h2,h3,h4,h5,h6': {
-    color: 'inherit',
-    margin: '0 0 $5 0'
+  "h1,h2,h3,h4,h5,h6": {
+    color: "inherit",
+    margin: "0 0 $5 0",
   },
   h1: {
-    letterSpacing: '$tighter',
-    fontSize: '$5xl',
-    lineHeight: '$md',
-    fontWeight: '$bold'
+    letterSpacing: "$tighter",
+    fontSize: "$5xl",
+    lineHeight: "$md",
+    fontWeight: "$bold",
   },
   h2: {
-    letterSpacing: '$tighter',
-    fontSize: '$4xl',
-    fontWeight: '$semibold'
+    letterSpacing: "$tighter",
+    fontSize: "$4xl",
+    fontWeight: "$semibold",
   },
   h3: {
-    letterSpacing: '$tighter',
-    fontSize: '$2xl',
-    fontWeight: '$semibold'
+    letterSpacing: "$tighter",
+    fontSize: "$2xl",
+    fontWeight: "$semibold",
   },
   h4: {
-    letterSpacing: '$tighter',
-    fontSize: '$xl',
-    fontWeight: '$semibold'
+    letterSpacing: "$tighter",
+    fontSize: "$xl",
+    fontWeight: "$semibold",
   },
   h5: {
-    letterSpacing: '$tight',
-    fontSize: '$md',
-    fontWeight: '$semibold'
+    letterSpacing: "$tight",
+    fontSize: "$md",
+    fontWeight: "$semibold",
   },
   h6: {
-    letterSpacing: '$tight',
-    fontSize: '$sm',
-    fontWeight: '$semibold'
-  },
-  'button, input, select,textarea': {
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    lineHeight: 'inherit',
-    color: 'inherit',
-    margin: 0
+    letterSpacing: "$tight",
+    fontSize: "$sm",
+    fontWeight: "$semibold",
+  },
+  "button, input, select,textarea": {
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    lineHeight: "inherit",
+    color: "inherit",
+    margin: 0,
   },
-  'button:focus, input:focus, select:focus, textarea:focus': {
-    outline: 'none'
+  "button:focus, input:focus, select:focus, textarea:focus": {
+    outline: "none",
   },
   code: {
-    color: '$code',
-    padding: '$1 $2',
-    borderRadius: '$xs',
-    bg: '$codeLight',
-    fontFamily: '$mono',
-    fontSize: '$sm',
-    whiteSpace: 'pre-wrap',
-    transition: 'opacity 0.25s ease 0s'
-  },
-  'code:hover': {
-    opacity: 0.8
+    color: "$code",
+    padding: "$1 $2",
+    borderRadius: "$xs",
+    bg: "$codeLight",
+    fontFamily: "$mono",
+    fontSize: "$sm",
+    whiteSpace: "pre-wrap",
+    transition: "opacity 0.25s ease 0s",
+  },
+  "code:hover": {
+    opacity: 0.8,
   },
   pre: {
-    overflow: 'auto',
-    whiteSpace: 'pre',
-    textAlign: 'left',
-    fontSize: '$sm',
-    borderRadius: '$lg',
-    padding: '$md $lg',
-    margin: '$lg 0 ',
-    fontFamily: '$mono',
-    lineHeight: '$md',
-    webkitOverflowScrolling: 'touch'
-  },
-  'pre code': {
-    color: '$foreground',
-    fontSize: '$sm',
-    lineHeight: '$sm',
-    whiteSpace: 'pre'
-  },
-  'pre code:before,pre code:after': {
-    display: 'none'
-  },
-  'pre p': {
-    margin: 0
-  },
-  'pre::-webkit-scrollbar': {
-    display: 'none',
+    overflow: "auto",
+    whiteSpace: "pre",
+    textAlign: "left",
+    fontSize: "$sm",
+    borderRadius: "$lg",
+    padding: "$md $lg",
+    margin: "$lg 0 ",
+    fontFamily: "$mono",
+    lineHeight: "$md",
+    webkitOverflowScrolling: "touch",
+  },
+  "pre code": {
+    color: "$foreground",
+    fontSize: "$sm",
+    lineHeight: "$sm",
+    whiteSpace: "pre",
+  },
+  "pre code:before,pre code:after": {
+    display: "none",
+  },
+  "pre p": {
+    margin: 0,
+  },
+  "pre::-webkit-scrollbar": {
+    display: "none",
     width: 0,
     height: 0,
-    background: 'transparent'
+    background: "transparent",
   },
   hr: {
-    background: '$border',
-    borderColor: 'transparent',
-    borderWidth: '0px',
-    borderStyle: 'none',
-    height: '1px'
+    background: "$border",
+    borderColor: "transparent",
+    borderWidth: "0px",
+    borderStyle: "none",
+    height: "1px",
   },
   details: {
-    backgroundColor: '$accents1',
-    border: 'none'
+    backgroundColor: "$accents1",
+    border: "none",
   },
-  'details:focus, details:hover, details:active': {
-    outline: 'none'
+  "details:focus, details:hover, details:active": {
+    outline: "none",
   },
   summary: {
-    cursor: 'pointer',
-    userSelect: 'none',
-    listStyle: 'none',
-    outline: 'none'
+    cursor: "pointer",
+    userSelect: "none",
+    listStyle: "none",
+    outline: "none",
   },
-  'summary::-webkit-details-marker, summary::before': {
-    display: 'none'
+  "summary::-webkit-details-marker, summary::before": {
+    display: "none",
   },
-  'summary::-moz-list-bullet': {
-    fontSize: 0
+  "summary::-moz-list-bullet": {
+    fontSize: 0,
   },
-  'summary:focus, summary:hover, summary:active': {
-    outline: 'none',
-    listStyle: 'none'
+  "summary:focus, summary:hover, summary:active": {
+    outline: "none",
+    listStyle: "none",
   },
-  '::selection': {
-    backgroundColor: '$selection'
+  "::selection": {
+    backgroundColor: "$selection",
   },
   blockquote: {
-    padding: '$md $lg',
-    color: '$accents7',
-    backgroundColor: '$accents0',
-    borderRadius: '$lg',
-    margin: '$10 0'
+    padding: "$md $lg",
+    color: "$accents7",
+    backgroundColor: "$accents0",
+    borderRadius: "$lg",
+    margin: "$10 0",
   },
-  'blockquote *:first-child': {
-    marginTop: 0
+  "blockquote *:first-child": {
+    marginTop: 0,
   },
-  'blockquote *:last-child': {
-    marginBottom: 0
+  "blockquote *:last-child": {
+    marginBottom: 0,
   },
   kbd: {
-    width: 'fit-content',
-    textAlign: 'center',
-    display: 'inline-block',
-    color: '$accents8',
-    bg: '$accents0',
-    border: '1px solid $border',
-    boxShadow: '0 0 1px 0 rgb(0 0 0 / 14%)',
-    fontFamily: '$sans',
-    borderRadius: '5px',
-    padding: '$1 $3',
-    mx: '$1',
-    lineHeight: '$sm',
-    fontSize: '$sm'
-  },
-  'kbd + kbd': {
-    ml: '$2'
-  }
+    width: "fit-content",
+    textAlign: "center",
+    display: "inline-block",
+    color: "$accents8",
+    bg: "$accents0",
+    border: "1px solid $border",
+    boxShadow: "0 0 1px 0 rgb(0 0 0 / 14%)",
+    fontFamily: "$sans",
+    borderRadius: "5px",
+    padding: "$1 $3",
+    mx: "$1",
+    lineHeight: "$sm",
+    fontSize: "$sm",
+  },
+  "kbd + kbd": {
+    ml: "$2",
+  },
 });
 
-const flushCSS = () => (
-  <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
-);
+const flushCSS = () => <style dangerouslySetInnerHTML={{__html: getCssText()}} id="stitches" />;
 
-const CssBaseline: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
+const CssBaseline: React.FC<React.PropsWithChildren<{}>> = ({children}) => {
   globalStyles();
+
   return <React.Fragment>{children}</React.Fragment>;
 };
 
@@ -250,6 +250,7 @@ type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
 const MemoCssBaseline = React.memo(CssBaseline) as MemoCssBaselineComponent<
   React.PropsWithChildren<{}>
 >;
+
 MemoCssBaseline.flush = flushCSS;
 
 export default MemoCssBaseline;
diff --git a/packages/react/src/css-baseline/index.ts b/packages/react/src/css-baseline/index.ts
index a1e13d7ecd..77616f8794 100644
--- a/packages/react/src/css-baseline/index.ts
+++ b/packages/react/src/css-baseline/index.ts
@@ -1 +1 @@
-export { default } from './css-baseline';
+export {default} from "./css-baseline";
diff --git a/packages/react/src/divider/__tests__/index.test.tsx b/packages/react/src/divider/__tests__/index.test.tsx
index 7a50171891..e7fca24097 100644
--- a/packages/react/src/divider/__tests__/index.test.tsx
+++ b/packages/react/src/divider/__tests__/index.test.tsx
@@ -1,35 +1,39 @@
-import React from 'react';
-import { mount, render } from 'enzyme';
-import Divider from '../index';
+import React from "react";
+import {mount, render} from "enzyme";
 
-describe('Divider', () => {
-  it('should render correctly', () => {
+import Divider from "../index";
+
+describe("Divider", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Divider />);
+
     expect(wrapper).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with x and y', () => {
+  it("should work with x and y", () => {
     const wrapper = render(
       <div>
         <Divider x={3} />
         <Divider y={3} />
-      </div>
+      </div>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should work with type', () => {
+  it("should work with type", () => {
     const wrapper = render(
       <div>
         <Divider color="secondary" />
         <Divider color="warning" />
-      </div>
+      </div>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should work with align and volume', () => {
+  it("should work with align and volume", () => {
     const wrapper = render(
       <div>
         <Divider align="start">start</Divider>
@@ -38,18 +42,20 @@ describe('Divider', () => {
         <Divider align="start" height={2}>
           start
         </Divider>
-      </div>
+      </div>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should support float', () => {
+  it("should support float", () => {
     const wrapper = mount(
       <div>
         <Divider x={1.1} y={2.5} />
         <Divider height={2.5} />
-      </div>
+      </div>,
     );
+
     expect(wrapper).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
diff --git a/packages/react/src/divider/divider.styles.ts b/packages/react/src/divider/divider.styles.ts
index 089fd1d750..a4863311c9 100644
--- a/packages/react/src/divider/divider.styles.ts
+++ b/packages/react/src/divider/divider.styles.ts
@@ -1,73 +1,73 @@
-import { styled, VariantProps } from '../theme/stitches.config';
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledDivider = styled('div', {
-  width: '100%',
-  maxWidth: '100%',
-  position: 'relative',
+export const StyledDivider = styled("div", {
+  width: "100%",
+  maxWidth: "100%",
+  position: "relative",
   variants: {
     color: {
       default: {
-        bg: '$border'
+        bg: "$border",
       },
       primary: {
-        bg: '$primary'
+        bg: "$primary",
       },
       secondary: {
-        bg: '$secondary'
+        bg: "$secondary",
       },
       success: {
-        bg: '$success'
+        bg: "$success",
       },
       warning: {
-        bg: '$warning'
+        bg: "$warning",
       },
       error: {
-        bg: '$error'
-      }
-    }
+        bg: "$error",
+      },
+    },
   },
   defaultVariants: {
-    color: 'default'
-  }
+    color: "default",
+  },
 });
 
-export const StyledDividerText = styled('span', {
-  position: 'absolute',
-  left: '50%',
-  top: '50%',
-  minHeight: '100%',
-  display: 'inline-flex',
-  jc: 'center',
-  ai: 'center',
-  transform: 'translate(-50%, -50%)',
-  padding: '0 $lg',
-  fontSize: '$base',
-  fontWeight: 'bold',
-  textTransform: 'capitalize',
-  backgroundColor: '$background',
-  zIndex: '$1',
+export const StyledDividerText = styled("span", {
+  position: "absolute",
+  left: "50%",
+  top: "50%",
+  minHeight: "100%",
+  display: "inline-flex",
+  jc: "center",
+  ai: "center",
+  transform: "translate(-50%, -50%)",
+  padding: "0 $lg",
+  fontSize: "$base",
+  fontWeight: "bold",
+  textTransform: "capitalize",
+  backgroundColor: "$background",
+  zIndex: "$1",
   variants: {
     color: {
       default: {
-        color: '$text'
+        color: "$text",
       },
       primary: {
-        color: '$primary'
+        color: "$primary",
       },
       secondary: {
-        color: '$secondary'
+        color: "$secondary",
       },
       success: {
-        color: '$success'
+        color: "$success",
       },
       warning: {
-        color: '$warning'
+        color: "$warning",
       },
       error: {
-        color: '$error'
-      }
-    }
-  }
+        color: "$error",
+      },
+    },
+  },
 });
 
 export type DividerVariantsProps = VariantProps<typeof StyledDivider>;
diff --git a/packages/react/src/divider/divider.tsx b/packages/react/src/divider/divider.tsx
index 6131450078..de860111e6 100644
--- a/packages/react/src/divider/divider.tsx
+++ b/packages/react/src/divider/divider.tsx
@@ -1,13 +1,11 @@
-import React, { useMemo } from 'react';
-import withDefaults from '../utils/with-defaults';
-import { DividerAlign, SimpleColors } from '../utils/prop-types';
-import { getMargin } from '../utils/dimensions';
-import { CSS } from '../theme/stitches.config';
-import {
-  StyledDivider,
-  StyledDividerText,
-  DividerVariantsProps
-} from './divider.styles';
+import React, {useMemo} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {DividerAlign, SimpleColors} from "../utils/prop-types";
+import {getMargin} from "../utils/dimensions";
+import {CSS} from "../theme/stitches.config";
+
+import {StyledDivider, StyledDividerText, DividerVariantsProps} from "./divider.styles";
 
 interface Props {
   x?: number;
@@ -23,7 +21,7 @@ const defaultProps = {
   x: 0,
   y: 0,
   height: 1,
-  align: 'center' as DividerAlign
+  align: "center" as DividerAlign,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -40,14 +38,15 @@ const Divider: React.FC<React.PropsWithChildren<DividerProps>> = ({
   ...props
 }) => {
   const alignCss = useMemo(() => {
-    if (!align || align === 'center') return '';
-    if (align === 'left' || align === 'start') {
-      return { transform: 'translateY(-50%)', left: '7%' };
+    if (!align || align === "center") return "";
+    if (align === "left" || align === "start") {
+      return {transform: "translateY(-50%)", left: "7%"};
     }
+
     return {
-      transform: 'translateY(-50%)',
-      left: 'auto',
-      right: '7%'
+      transform: "translateY(-50%)",
+      left: "auto",
+      right: "7%",
     };
   }, [align]);
 
@@ -56,20 +55,16 @@ const Divider: React.FC<React.PropsWithChildren<DividerProps>> = ({
 
   return (
     <StyledDivider
-      role="separator"
       css={{
         margin: `${top} ${left}`,
         height: `calc(${height} * 1px)`,
-        ...(css as any)
+        ...(css as any),
       }}
+      role="separator"
       {...props}
     >
       {children && (
-        <StyledDividerText
-          css={{ ...alignCss }}
-          color={textColor}
-          className="nextui-divider-text"
-        >
+        <StyledDividerText className="nextui-divider-text" color={textColor} css={{...alignCss}}>
           {children}
         </StyledDividerText>
       )}
@@ -77,7 +72,7 @@ const Divider: React.FC<React.PropsWithChildren<DividerProps>> = ({
   );
 };
 
-Divider.toString = () => '.nextui-divider';
+Divider.toString = () => ".nextui-divider";
 
 const MemoDivider = React.memo(Divider);
 
diff --git a/packages/react/src/divider/index.ts b/packages/react/src/divider/index.ts
index b0427645c2..a00aaacb20 100644
--- a/packages/react/src/divider/index.ts
+++ b/packages/react/src/divider/index.ts
@@ -1,11 +1,8 @@
-import Divider from './divider';
+import Divider from "./divider";
 
-export type { DividerProps } from './divider';
+export type {DividerProps} from "./divider";
 
-export { StyledDivider, StyledDividerText } from './divider.styles';
-export type {
-  DividerVariantsProps,
-  DividerTextVariantsProps
-} from './divider.styles';
+export {StyledDivider, StyledDividerText} from "./divider.styles";
+export type {DividerVariantsProps, DividerTextVariantsProps} from "./divider.styles";
 
 export default Divider;
diff --git a/packages/react/src/dropdown/__tests__/index.test.tsx b/packages/react/src/dropdown/__tests__/index.test.tsx
index 7a00cc0195..c58a09f2b5 100644
--- a/packages/react/src/dropdown/__tests__/index.test.tsx
+++ b/packages/react/src/dropdown/__tests__/index.test.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Dropdown from '../index';
+import React from "react";
+import {render} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
-describe('Dropdown', () => {
-  it('should render correctly (static)', () => {
+import Dropdown from "../index";
+
+describe("Dropdown", () => {
+  it("should render correctly (static)", () => {
     const wrapper = render(
       <Dropdown>
         <Dropdown.Button>Trigger</Dropdown.Button>
@@ -16,33 +17,33 @@ describe('Dropdown', () => {
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
-      </Dropdown>
+      </Dropdown>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render correctly (dynamic)', () => {
+  it("should render correctly (dynamic)", () => {
     const menuItems = [
-      { key: 'new', name: 'New File' },
-      { key: 'copy', name: 'Copy Link' },
-      { key: 'edit', name: 'Edit File' },
-      { key: 'delete', name: 'Delete File' }
+      {key: "new", name: "New File"},
+      {key: "copy", name: "Copy Link"},
+      {key: "edit", name: "Edit File"},
+      {key: "delete", name: "Delete File"},
     ];
 
     const wrapper = render(
       <Dropdown>
         <Dropdown.Button>Trigger</Dropdown.Button>
         <Dropdown.Menu aria-label="Actions" items={menuItems}>
-          {(item: any) => (
-            <Dropdown.Item key={item.key}>{item.name}</Dropdown.Item>
-          )}
+          {(item: any) => <Dropdown.Item key={item.key}>{item.name}</Dropdown.Item>}
         </Dropdown.Menu>
-      </Dropdown>
+      </Dropdown>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render correctly with section (static)', () => {
+  it("should render correctly with section (static)", () => {
     const wrapper = render(
       <Dropdown>
         <Dropdown.Button>Trigger</Dropdown.Button>
@@ -58,25 +59,26 @@ describe('Dropdown', () => {
             </Dropdown.Item>
           </Dropdown.Section>
         </Dropdown.Menu>
-      </Dropdown>
+      </Dropdown>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render correctly with section (dynamic)', () => {
+  it("should render correctly with section (dynamic)", () => {
     const menuItems = [
       {
-        title: 'Actions',
+        title: "Actions",
         children: [
-          { key: 'new', name: 'New File' },
-          { key: 'copy', name: 'Copy Link' },
-          { key: 'edit', name: 'Edit File' }
-        ]
+          {key: "new", name: "New File"},
+          {key: "copy", name: "Copy Link"},
+          {key: "edit", name: "Edit File"},
+        ],
       },
       {
-        title: 'Danger Zone',
-        children: [{ key: 'delete', name: 'Delete File' }]
-      }
+        title: "Danger Zone",
+        children: [{key: "delete", name: "Delete File"}],
+      },
     ];
 
     const wrapper = render(
@@ -85,23 +87,21 @@ describe('Dropdown', () => {
         <Dropdown.Menu aria-label="Actions" items={menuItems}>
           {(section: any) => (
             <Dropdown.Section
-              title={section.title}
-              items={section.children}
               aria-label={section.title}
+              items={section.children}
+              title={section.title}
             >
-              {(item: any) => (
-                <Dropdown.Item key={item.key}>{item.name}</Dropdown.Item>
-              )}
+              {(item: any) => <Dropdown.Item key={item.key}>{item.name}</Dropdown.Item>}
             </Dropdown.Section>
           )}
         </Dropdown.Menu>
-      </Dropdown>
+      </Dropdown>,
     );
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with single selection (controlled)', () => {
+  it("should work with single selection (controlled)", () => {
     let onOpenChange = jest.fn();
     let onSelectionChange = jest.fn();
 
@@ -120,22 +120,23 @@ describe('Dropdown', () => {
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
-      </Dropdown>
+      </Dropdown>,
     );
 
-    let triggerButton = wrapper.getByTestId('trigger-test');
+    let triggerButton = wrapper.getByTestId("trigger-test");
 
     expect(onOpenChange).toBeCalledTimes(0);
 
     userEvent.click(triggerButton);
 
-    let menu = wrapper.getByRole('menu');
+    let menu = wrapper.getByRole("menu");
+
     expect(menu).toBeTruthy();
 
     // validates if the menu has the triggerButton id as aria-labelledby
-    expect(menu.getAttribute('aria-labelledby')).toBe(triggerButton.id);
+    expect(menu.getAttribute("aria-labelledby")).toBe(triggerButton.id);
 
-    let menuItems = wrapper.getAllByRole('menuitemradio');
+    let menuItems = wrapper.getAllByRole("menuitemradio");
 
     expect(menuItems.length).toBe(4);
 
@@ -145,10 +146,10 @@ describe('Dropdown', () => {
     expect(onOpenChange).toBeCalled();
 
     // check if the menu is closed
-    expect(wrapper.queryByRole('menu')).toBeNull();
+    expect(wrapper.queryByRole("menu")).toBeNull();
   });
 
-  it('should work with multiple selection (controlled)', () => {
+  it("should work with multiple selection (controlled)", () => {
     let onOpenChange = jest.fn();
     let onSelectionChange = jest.fn();
 
@@ -167,22 +168,23 @@ describe('Dropdown', () => {
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
-      </Dropdown>
+      </Dropdown>,
     );
 
-    let triggerButton = wrapper.getByTestId('trigger-test');
+    let triggerButton = wrapper.getByTestId("trigger-test");
 
     expect(onOpenChange).toBeCalledTimes(0);
 
     userEvent.click(triggerButton);
 
-    let menu = wrapper.getByRole('menu');
+    let menu = wrapper.getByRole("menu");
+
     expect(menu).toBeTruthy();
 
     // validates if the menu has the triggerButton id as aria-labelledby
-    expect(menu.getAttribute('aria-labelledby')).toBe(triggerButton.id);
+    expect(menu.getAttribute("aria-labelledby")).toBe(triggerButton.id);
 
-    let menuItems = wrapper.getAllByRole('menuitemcheckbox');
+    let menuItems = wrapper.getAllByRole("menuitemcheckbox");
 
     expect(menuItems.length).toBe(4);
 
@@ -192,18 +194,14 @@ describe('Dropdown', () => {
     expect(onOpenChange).toBeCalled();
 
     // check if the menu is not closed
-    expect(wrapper.queryByRole('menu')).not.toBeNull();
+    expect(wrapper.queryByRole("menu")).not.toBeNull();
   });
 
-  it('should show checkmarks if selectionMode is single and has a selected item', () => {
+  it("should show checkmarks if selectionMode is single and has a selected item", () => {
     const wrapper = render(
       <Dropdown isOpen>
         <Dropdown.Button data-testid="trigger-test">Trigger</Dropdown.Button>
-        <Dropdown.Menu
-          aria-label="Actions"
-          selectionMode="single"
-          selectedKeys={['new']}
-        >
+        <Dropdown.Menu aria-label="Actions" selectedKeys={["new"]} selectionMode="single">
           <Dropdown.Item key="new">New file</Dropdown.Item>
           <Dropdown.Item key="copy">Copy link</Dropdown.Item>
           <Dropdown.Item key="edit">Edit file</Dropdown.Item>
@@ -211,21 +209,22 @@ describe('Dropdown', () => {
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
-      </Dropdown>
+      </Dropdown>,
     );
 
-    let checkmark = wrapper.getByRole('img');
+    let checkmark = wrapper.getByRole("img");
+
     expect(checkmark).not.toBeNull();
   });
 
-  it('should show multiple checkmarks if selectionMode is multiple and has selected items', () => {
+  it("should show multiple checkmarks if selectionMode is multiple and has selected items", () => {
     const wrapper = render(
       <Dropdown isOpen>
         <Dropdown.Button data-testid="trigger-test">Trigger</Dropdown.Button>
         <Dropdown.Menu
           aria-label="Actions"
+          selectedKeys={["new", "copy", "edit"]}
           selectionMode="multiple"
-          selectedKeys={['new', 'copy', 'edit']}
         >
           <Dropdown.Item key="new">New file</Dropdown.Item>
           <Dropdown.Item key="copy">Copy link</Dropdown.Item>
@@ -234,19 +233,20 @@ describe('Dropdown', () => {
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
-      </Dropdown>
+      </Dropdown>,
     );
 
-    let checkmark = wrapper.getAllByRole('img');
+    let checkmark = wrapper.getAllByRole("img");
+
     expect(checkmark).not.toBeNull();
     expect(checkmark.length).toBe(3);
   });
 
-  it('should not show checkmarks if selectionMode not defined', () => {
+  it("should not show checkmarks if selectionMode not defined", () => {
     const wrapper = render(
       <Dropdown>
         <Dropdown.Button>Trigger</Dropdown.Button>
-        <Dropdown.Menu aria-label="Actions" selectedKeys={['new']}>
+        <Dropdown.Menu aria-label="Actions" selectedKeys={["new"]}>
           <Dropdown.Item key="new">New file</Dropdown.Item>
           <Dropdown.Item key="copy">Copy link</Dropdown.Item>
           <Dropdown.Item key="edit">Edit file</Dropdown.Item>
@@ -254,19 +254,20 @@ describe('Dropdown', () => {
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
-      </Dropdown>
+      </Dropdown>,
     );
 
-    let checkmark = wrapper.queryByRole('img');
+    let checkmark = wrapper.queryByRole("img");
+
     expect(checkmark).toBeNull();
   });
 
-  it('should not open on disabled button', () => {
+  it("should not open on disabled button", () => {
     let onOpenChange = jest.fn();
 
     const wrapper = render(
       <Dropdown>
-        <Dropdown.Button data-testid="trigger-test" disabled>
+        <Dropdown.Button disabled data-testid="trigger-test">
           Trigger
         </Dropdown.Button>
         <Dropdown.Menu aria-label="Actions">
@@ -277,18 +278,19 @@ describe('Dropdown', () => {
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
-      </Dropdown>
+      </Dropdown>,
     );
-    let triggerButton = wrapper.getByTestId('trigger-test');
+    let triggerButton = wrapper.getByTestId("trigger-test");
 
     userEvent.click(triggerButton);
 
-    let menu = wrapper.queryByRole('menu');
+    let menu = wrapper.queryByRole("menu");
+
     expect(menu).toBeNull();
     expect(onOpenChange).toBeCalledTimes(0);
   });
 
-  it('should not select on disabled item', () => {
+  it("should not select on disabled item", () => {
     let onSelectionChange = jest.fn();
 
     const wrapper = render(
@@ -296,7 +298,7 @@ describe('Dropdown', () => {
         <Dropdown.Button data-testid="trigger-test">Trigger</Dropdown.Button>
         <Dropdown.Menu
           aria-label="Actions"
-          disabledKeys={['new']}
+          disabledKeys={["new"]}
           onSelectionChange={onSelectionChange}
         >
           <Dropdown.Item key="new">New file</Dropdown.Item>
@@ -306,10 +308,10 @@ describe('Dropdown', () => {
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
-      </Dropdown>
+      </Dropdown>,
     );
 
-    let menuItems = wrapper.getAllByRole('menuitem');
+    let menuItems = wrapper.getAllByRole("menuitem");
 
     expect(menuItems.length).toBe(4);
 
diff --git a/packages/react/src/dropdown/base/dropdown-item-base.tsx b/packages/react/src/dropdown/base/dropdown-item-base.tsx
index 313dc1e89d..0fdd42ec2a 100644
--- a/packages/react/src/dropdown/base/dropdown-item-base.tsx
+++ b/packages/react/src/dropdown/base/dropdown-item-base.tsx
@@ -1,12 +1,9 @@
-import { ReactNode } from 'react';
-import { Item } from '@react-stately/collections';
-import { ItemProps } from '@react-types/shared';
-import {
-  SimpleColors,
-  NormalWeights,
-  DropdownVariants
-} from '../../utils/prop-types';
-import { CSS } from '../../theme/stitches.config';
+import {ReactNode} from "react";
+import {Item} from "@react-stately/collections";
+import {ItemProps} from "@react-types/shared";
+
+import {SimpleColors, NormalWeights, DropdownVariants} from "../../utils/prop-types";
+import {CSS} from "../../theme/stitches.config";
 
 export type DropdownItemBaseProps<T = object> = ItemProps<T> & {
   as?: keyof JSX.IntrinsicElements;
diff --git a/packages/react/src/dropdown/dropdown-button.tsx b/packages/react/src/dropdown/dropdown-button.tsx
index 3cd6200612..91a2b58e9d 100644
--- a/packages/react/src/dropdown/dropdown-button.tsx
+++ b/packages/react/src/dropdown/dropdown-button.tsx
@@ -1,11 +1,13 @@
-import React, { useMemo, RefAttributes, PropsWithoutRef } from 'react';
-import { Button, ButtonProps } from '../index';
-import DropdownTrigger from './dropdown-trigger';
-import { useDropdownContext } from './dropdown-context';
-import DropdownIcon from './dropdown-icon';
-import { useDOMRef } from '../utils/dom';
-import { __DEV__ } from '../utils/assertion';
-import clsx from '../utils/clsx';
+import React, {useMemo, RefAttributes, PropsWithoutRef} from "react";
+
+import {Button, ButtonProps} from "../index";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+import clsx from "../utils/clsx";
+
+import DropdownTrigger from "./dropdown-trigger";
+import {useDropdownContext} from "./dropdown-context";
+import DropdownIcon from "./dropdown-icon";
 
 export type DropdownButtonProps = ButtonProps;
 
@@ -21,30 +23,27 @@ const DropdownButton = React.forwardRef(
       ...otherProps
     } = props;
 
-    const { disableAnimation } = useDropdownContext();
+    const {disableAnimation} = useDropdownContext();
 
     const buttonRef = useDOMRef(ref);
 
     const getIconRight = useMemo(() => {
-      return iconRight || <DropdownIcon size={14} fill="currentColor" />;
+      return iconRight || <DropdownIcon fill="currentColor" size={14} />;
     }, [iconRight]);
 
-    const isAnimated = useMemo(
-      () => animated || !disableAnimation,
-      [animated, disableAnimation]
-    );
+    const isAnimated = useMemo(() => animated || !disableAnimation, [animated, disableAnimation]);
 
     return (
       <DropdownTrigger>
         <Button
           ref={buttonRef}
+          animated={isAnimated}
           auto={auto}
-          className={clsx('nextui-dropdown-button', className)}
+          className={clsx("nextui-dropdown-button", className)}
           iconRight={getIconRight}
-          animated={isAnimated}
           iconRightCss={{
-            mt: '$1',
-            ...iconRightCss
+            mt: "$1",
+            ...iconRightCss,
           }}
           {...otherProps}
         >
@@ -52,20 +51,17 @@ const DropdownButton = React.forwardRef(
         </Button>
       </DropdownTrigger>
     );
-  }
+  },
 );
 
 if (__DEV__) {
-  DropdownButton.displayName = 'NextUI.DropdownButton';
+  DropdownButton.displayName = "NextUI.DropdownButton";
 }
 
 type DropdownButtonComponent<T, P = {}> = React.ForwardRefExoticComponent<
   PropsWithoutRef<P> & RefAttributes<T>
 > & {};
 
-DropdownButton.toString = () => '.nextui-dropdown-button';
+DropdownButton.toString = () => ".nextui-dropdown-button";
 
-export default DropdownButton as DropdownButtonComponent<
-  HTMLButtonElement,
-  DropdownButtonProps
->;
+export default DropdownButton as DropdownButtonComponent<HTMLButtonElement, DropdownButtonProps>;
diff --git a/packages/react/src/dropdown/dropdown-context.tsx b/packages/react/src/dropdown/dropdown-context.tsx
index f747d71e08..4d6e61925e 100644
--- a/packages/react/src/dropdown/dropdown-context.tsx
+++ b/packages/react/src/dropdown/dropdown-context.tsx
@@ -1,9 +1,9 @@
-import { createContext } from '../utils/context';
-import { UseDropdownReturn } from './use-dropdown';
+import {createContext} from "../utils/context";
 
-export const [DropdownProvider, useDropdownContext] =
-  createContext<UseDropdownReturn>({
-    name: 'DropdownContext',
-    errorMessage:
-      'useDropdownContext: `context` is undefined. Seems you forgot to wrap all popover components within `<Dropdown />`'
-  });
+import {UseDropdownReturn} from "./use-dropdown";
+
+export const [DropdownProvider, useDropdownContext] = createContext<UseDropdownReturn>({
+  name: "DropdownContext",
+  errorMessage:
+    "useDropdownContext: `context` is undefined. Seems you forgot to wrap all popover components within `<Dropdown />`",
+});
diff --git a/packages/react/src/dropdown/dropdown-icon.tsx b/packages/react/src/dropdown/dropdown-icon.tsx
index e2dfb2bed5..a0052a4b37 100644
--- a/packages/react/src/dropdown/dropdown-icon.tsx
+++ b/packages/react/src/dropdown/dropdown-icon.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
-import { __DEV__ } from '../utils/assertion';
+import React from "react";
+
+import {__DEV__} from "../utils/assertion";
 
 export interface DropdownIconProps {
   fill?: string;
@@ -8,19 +9,13 @@ export interface DropdownIconProps {
   width?: string | number;
 }
 
-const DropdownIcon: React.FC<DropdownIconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+const DropdownIcon: React.FC<DropdownIconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
@@ -33,9 +28,9 @@ const DropdownIcon: React.FC<DropdownIconProps> = ({
 };
 
 if (__DEV__) {
-  DropdownIcon.displayName = 'NextUI.DropdownIcon';
+  DropdownIcon.displayName = "NextUI.DropdownIcon";
 }
 
-DropdownIcon.toString = () => '.nextui-dropdown-icon';
+DropdownIcon.toString = () => ".nextui-dropdown-icon";
 
 export default DropdownIcon;
diff --git a/packages/react/src/dropdown/dropdown-item.tsx b/packages/react/src/dropdown/dropdown-item.tsx
index 15d46a7dbf..519fd05d5c 100644
--- a/packages/react/src/dropdown/dropdown-item.tsx
+++ b/packages/react/src/dropdown/dropdown-item.tsx
@@ -1,30 +1,29 @@
-import React, { ReactNode, Key, useRef, useMemo } from 'react';
-import { Node } from '@react-types/shared';
-import { mergeProps } from '@react-aria/utils';
-import { TreeState } from '@react-stately/tree';
-import { useFocusRing } from '@react-aria/focus';
-import type { FocusableProps } from '@react-types/shared';
-import { useHover, usePress } from '@react-aria/interactions';
-import { useMenuItem } from '@react-aria/menu';
-import { CSS } from '../theme/stitches.config';
-import type {
-  SimpleColors,
-  NormalWeights,
-  DropdownVariants
-} from '../utils/prop-types';
-import Checkmark from '../utils/checkmark';
-import type { IFocusRingAria, IMenuItemAria } from './dropdown-types';
-import { useDropdownContext } from './dropdown-context';
+import type {FocusableProps} from "@react-types/shared";
+import type {SimpleColors, NormalWeights, DropdownVariants} from "../utils/prop-types";
+import type {IFocusRingAria, IMenuItemAria} from "./dropdown-types";
+
+import React, {ReactNode, Key, useRef, useMemo} from "react";
+import {Node} from "@react-types/shared";
+import {mergeProps} from "@react-aria/utils";
+import {TreeState} from "@react-stately/tree";
+import {useFocusRing} from "@react-aria/focus";
+import {useHover, usePress} from "@react-aria/interactions";
+import {useMenuItem} from "@react-aria/menu";
+
+import {CSS} from "../theme/stitches.config";
+import Checkmark from "../utils/checkmark";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+
+import {useDropdownContext} from "./dropdown-context";
 import {
   StyledDropdownItem,
   StyledDropdownItemKbd,
   StyledDropdownItemContent,
   StyledDropdownItemIconWrapper,
   StyledDropdownItemContentWrapper,
-  StyledDropdownItemDescription
-} from './dropdown.styles';
-import clsx from '../utils/clsx';
-import { __DEV__ } from '../utils/assertion';
+  StyledDropdownItemDescription,
+} from "./dropdown.styles";
 
 interface Props<T> extends FocusableProps {
   item: Node<T>;
@@ -44,8 +43,7 @@ interface Props<T> extends FocusableProps {
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props<object>>;
 
-export type DropdownItemProps<T = object> = Props<T> &
-  NativeAttrs & { css?: CSS };
+export type DropdownItemProps<T = object> = Props<T> & NativeAttrs & {css?: CSS};
 
 const DropdownItem = <T extends object>({
   as,
@@ -62,13 +60,12 @@ const DropdownItem = <T extends object>({
   isVirtualized,
   withDivider,
   dividerWeight,
+  className,
   onAction,
-  className
 }: DropdownItemProps<T>) => {
-  const { onClose, closeOnSelect, disableAnimation, borderWeight } =
-    useDropdownContext();
+  const {onClose, closeOnSelect, disableAnimation, borderWeight} = useDropdownContext();
 
-  const { rendered, key } = item;
+  const {rendered, key} = item;
 
   const isSelected = state.selectionManager.isSelected(key);
   const isFocused = state.selectionManager.focusedKey === item.key;
@@ -76,107 +73,98 @@ const DropdownItem = <T extends object>({
 
   const ref = useRef<HTMLLIElement>(null);
 
-  const { pressProps, isPressed } = usePress({
+  const {pressProps, isPressed} = usePress({
     ref,
-    isDisabled
+    isDisabled,
   });
 
-  const { isFocusVisible, focusProps }: IFocusRingAria = useFocusRing({
-    autoFocus
+  const {isFocusVisible, focusProps}: IFocusRingAria = useFocusRing({
+    autoFocus,
   });
 
-  const { hoverProps, isHovered } = useHover({ isDisabled });
-
-  const isSelectable =
-    state.selectionManager.selectionMode !== 'none' && !isDisabled;
-
-  const {
-    menuItemProps,
-    labelProps,
-    descriptionProps,
-    keyboardShortcutProps
-  }: IMenuItemAria = useMenuItem(
-    {
-      key,
-      onClose,
-      isSelected,
-      isDisabled,
-      'aria-label': item['aria-label'],
-      closeOnSelect,
-      isVirtualized,
-      onAction
-    },
-    state,
-    ref
-  );
+  const {hoverProps, isHovered} = useHover({isDisabled});
+
+  const isSelectable = state.selectionManager.selectionMode !== "none" && !isDisabled;
+
+  const {menuItemProps, labelProps, descriptionProps, keyboardShortcutProps}: IMenuItemAria =
+    useMenuItem(
+      {
+        key,
+        onClose,
+        isSelected,
+        isDisabled,
+        "aria-label": item["aria-label"],
+        closeOnSelect,
+        isVirtualized,
+        onAction,
+      },
+      state,
+      ref,
+    );
 
   const getState = useMemo(() => {
-    if (isHovered) return 'hovered';
-    if (isSelected) return 'selected';
-    if (isPressed) return 'pressed';
-    return isDisabled ? 'disabled' : 'ready';
+    if (isHovered) return "hovered";
+    if (isSelected) return "selected";
+    if (isPressed) return "pressed";
+
+    return isDisabled ? "disabled" : "ready";
   }, [isSelected, isDisabled, isHovered, isPressed]);
 
   const getTextColor = useMemo(() => {
     if (item.props.textColor) {
       return item.props.textColor;
     }
-    if (item.props.color && textColor === 'default') {
+    if (item.props.color && textColor === "default") {
       return item.props.color;
     }
+
     return textColor;
   }, [textColor, item.props.color, item.props.textColor]);
 
   const withDescription = useMemo(
     () => description || item.props.description,
-    [description, item.props.description]
+    [description, item.props.description],
   );
 
-  const withCommand = useMemo(
-    () => command || item.props.command,
-    [command, item.props.command]
-  );
+  const withCommand = useMemo(() => command || item.props.command, [command, item.props.command]);
 
-  const withIcon = useMemo(
-    () => icon || item.props.icon,
-    [icon, item.props.icon]
-  );
+  const withIcon = useMemo(() => icon || item.props.icon, [icon, item.props.icon]);
 
   return (
     <StyledDropdownItem
       ref={ref}
       {...mergeProps(menuItemProps, hoverProps, pressProps, focusProps)}
       as={item.props.as || as}
-      css={{ ...mergeProps(css, item.props.css) }}
-      data-state={getState}
+      className={clsx(
+        "nextui-dropdown-item",
+        {
+          "is-disabled": isDisabled,
+          "is-selected": isSelected,
+          "is-selectable": isSelectable,
+          "is-hovered": isHovered,
+          "is-focused": isFocused,
+          "is-pressed": isPressed,
+        },
+        className,
+        item.props.className,
+      )}
       color={item.props.color || color}
-      variant={item.props.variant || variant}
-      textColor={getTextColor}
-      isFocused={isFocused}
+      css={{...mergeProps(css, item.props.css)}}
+      data-state={getState}
+      disableAnimation={disableAnimation}
+      dividerWeight={dividerWeight || item.props.dividerWeight || borderWeight}
+      isDisabled={isDisabled}
       isFocusVisible={isFocusVisible}
-      shouldShowOutline={isFocusVisible && variant === 'shadow'}
+      isFocused={isFocused}
       isHovered={isHovered}
-      isSelected={isSelected}
-      isDisabled={isDisabled}
       isPressed={isPressed}
       isSelectable={isSelectable}
-      withDivider={withDivider || item.props.withDivider}
+      isSelected={isSelected}
+      shouldShowOutline={isFocusVisible && variant === "shadow"}
+      textColor={getTextColor}
+      variant={item.props.variant || variant}
       withDescription={!!withDescription}
-      dividerWeight={dividerWeight || item.props.dividerWeight || borderWeight}
-      disableAnimation={disableAnimation}
-      className={clsx(
-        'nextui-dropdown-item',
-        {
-          'is-disabled': isDisabled,
-          'is-selected': isSelected,
-          'is-selectable': isSelectable,
-          'is-hovered': isHovered,
-          'is-focused': isFocused,
-          'is-pressed': isPressed
-        },
-        className,
-        item.props.className
-      )}
+      withDivider={withDivider || item.props.withDivider}
     >
       {withIcon && (
         <StyledDropdownItemIconWrapper className="nextui-dropdown-item-icon-wrapper">
@@ -185,42 +173,33 @@ const DropdownItem = <T extends object>({
       )}
       {withDescription ? (
         <StyledDropdownItemContentWrapper>
-          <StyledDropdownItemContent
-            className="nextui-dropdown-item-content"
-            {...labelProps}
-          >
+          <StyledDropdownItemContent className="nextui-dropdown-item-content" {...labelProps}>
             {rendered}
           </StyledDropdownItemContent>
           <StyledDropdownItemDescription
             className="nextui-dropdown-item-description"
-            hasIcon={!!withIcon}
             hasCommand={!!withCommand}
+            hasIcon={!!withIcon}
             {...descriptionProps}
           >
             {withDescription}
           </StyledDropdownItemDescription>
         </StyledDropdownItemContentWrapper>
       ) : (
-        <StyledDropdownItemContent
-          className="nextui-dropdown-item-content"
-          {...labelProps}
-        >
+        <StyledDropdownItemContent className="nextui-dropdown-item-content" {...labelProps}>
           {rendered}
         </StyledDropdownItemContent>
       )}
 
       {withCommand && (
-        <StyledDropdownItemKbd
-          className="nextui-dropdown-item-command"
-          {...keyboardShortcutProps}
-        >
+        <StyledDropdownItemKbd className="nextui-dropdown-item-command" {...keyboardShortcutProps}>
           {withCommand}
         </StyledDropdownItemKbd>
       )}
       {isSelected && (
         <Checkmark
           css={{
-            ml: '$4'
+            ml: "$4",
           }}
         />
       )}
@@ -229,8 +208,8 @@ const DropdownItem = <T extends object>({
 };
 
 if (__DEV__) {
-  DropdownItem.displayName = 'NextUI.DropdownItem';
+  DropdownItem.displayName = "NextUI.DropdownItem";
 }
-DropdownItem.toString = () => '.nextui-dropdown-item';
+DropdownItem.toString = () => ".nextui-dropdown-item";
 
 export default DropdownItem;
diff --git a/packages/react/src/dropdown/dropdown-menu.tsx b/packages/react/src/dropdown/dropdown-menu.tsx
index 78f9a303ea..218ecec5ef 100644
--- a/packages/react/src/dropdown/dropdown-menu.tsx
+++ b/packages/react/src/dropdown/dropdown-menu.tsx
@@ -1,18 +1,21 @@
-import React, { RefAttributes, PropsWithoutRef } from 'react';
-import { DOMProps, AriaLabelingProps } from '@react-types/shared';
-import { AriaMenuProps } from '@react-types/menu';
-import { useMenu } from '@react-aria/menu';
-import { useTreeState } from '@react-stately/tree';
-import { mergeProps } from '@react-aria/utils';
-import { useDOMRef, useSyncRef } from '../utils/dom';
-import { CSS } from '../theme/stitches.config';
-import { useDropdownContext } from './dropdown-context';
-import DropdownSection from './dropdown-section';
-import DropdownItem from './dropdown-item';
-import { StyledDropdownMenu } from './dropdown.styles';
-import type { SimpleColors, DropdownVariants } from '../utils/prop-types';
-import clsx from '../utils/clsx';
-import { __DEV__ } from '../utils/assertion';
+import type {SimpleColors, DropdownVariants} from "../utils/prop-types";
+
+import React, {RefAttributes, PropsWithoutRef} from "react";
+import {DOMProps, AriaLabelingProps} from "@react-types/shared";
+import {AriaMenuProps} from "@react-types/menu";
+import {useMenu} from "@react-aria/menu";
+import {useTreeState} from "@react-stately/tree";
+import {mergeProps} from "@react-aria/utils";
+
+import {useDOMRef, useSyncRef} from "../utils/dom";
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+
+import {useDropdownContext} from "./dropdown-context";
+import DropdownSection from "./dropdown-section";
+import DropdownItem from "./dropdown-item";
+import {StyledDropdownMenu} from "./dropdown.styles";
 
 interface Props<T> extends AriaMenuProps<T>, DOMProps, AriaLabelingProps {
   as?: keyof JSX.IntrinsicElements;
@@ -35,28 +38,27 @@ interface Props<T> extends AriaMenuProps<T>, DOMProps, AriaLabelingProps {
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props<object>>;
 
-export type DropdownMenuProps<T = object> = Props<T> &
-  NativeAttrs & { css?: CSS };
+export type DropdownMenuProps<T = object> = Props<T> & NativeAttrs & {css?: CSS};
 
 const DropdownMenu = React.forwardRef(
   (props: DropdownMenuProps, ref: React.Ref<HTMLUListElement | null>) => {
     const {
       css = {},
       as,
-      color = 'default',
-      textColor = 'default',
-      variant = 'flat',
+      color = "default",
+      textColor = "default",
+      variant = "flat",
       ...otherProps
     } = props;
 
     const context = useDropdownContext();
     const completeProps = {
-      ...mergeProps(context, otherProps)
+      ...mergeProps(context, otherProps),
     };
     const domRef = useDOMRef(ref);
 
     const state = useTreeState(completeProps);
-    const { menuProps } = useMenu(completeProps, state, domRef);
+    const {menuProps} = useMenu(completeProps, state, domRef);
 
     useSyncRef(context, domRef);
 
@@ -64,56 +66,55 @@ const DropdownMenu = React.forwardRef(
       <StyledDropdownMenu
         ref={domRef}
         as={as}
-        css={{ ...(css as any) }}
-        className={clsx('nextui-dropdown-menu', props.className)}
+        className={clsx("nextui-dropdown-menu", props.className)}
+        css={{...(css as any)}}
         {...menuProps}
       >
         {[...state.collection].map((item) => {
-          if (item.type === 'section') {
+          if (item.type === "section") {
             return (
               <DropdownSection
                 key={item.key}
+                color={color}
                 item={item}
                 state={state}
-                onAction={completeProps.onAction}
-                color={color}
                 textColor={textColor}
                 variant={variant}
+                onAction={completeProps.onAction}
               />
             );
           }
           let dropdownItem = (
             <DropdownItem
               key={item.key}
+              color={color}
               item={item}
               state={state}
-              onAction={completeProps.onAction}
-              color={color}
               textColor={textColor}
               variant={variant}
+              onAction={completeProps.onAction}
             />
           );
+
           if (item.wrapper) {
             dropdownItem = item.wrapper(dropdownItem);
           }
+
           return dropdownItem;
         })}
       </StyledDropdownMenu>
     );
-  }
+  },
 );
 
 if (__DEV__) {
-  DropdownMenu.displayName = 'NextUI.DropdownMenu';
+  DropdownMenu.displayName = "NextUI.DropdownMenu";
 }
 
 type DropdownComponent<T, P = {}> = React.ForwardRefExoticComponent<
   PropsWithoutRef<P> & RefAttributes<T>
 >;
 
-DropdownMenu.toString = () => '.nextui-dropdown-menu';
+DropdownMenu.toString = () => ".nextui-dropdown-menu";
 
-export default DropdownMenu as DropdownComponent<
-  HTMLUListElement,
-  DropdownMenuProps
->;
+export default DropdownMenu as DropdownComponent<HTMLUListElement, DropdownMenuProps>;
diff --git a/packages/react/src/dropdown/dropdown-section.tsx b/packages/react/src/dropdown/dropdown-section.tsx
index 08ec22daa6..8650a75f5f 100644
--- a/packages/react/src/dropdown/dropdown-section.tsx
+++ b/packages/react/src/dropdown/dropdown-section.tsx
@@ -1,20 +1,23 @@
-import React, { Fragment, Key } from 'react';
-import type { TreeState } from '@react-stately/tree';
-import type { Node } from '@react-types/shared';
-import { mergeProps } from '@react-aria/utils';
-import { useMenuSection } from '@react-aria/menu';
-import DropdownItem from './dropdown-item';
-import type { CSS } from '../theme/stitches.config';
-import type { SimpleColors, DropdownVariants } from '../utils/prop-types';
-import Divider from '../divider';
-import clsx from '../utils/clsx';
+import type {TreeState} from "@react-stately/tree";
+import type {Node} from "@react-types/shared";
+import type {CSS} from "../theme/stitches.config";
+import type {SimpleColors, DropdownVariants} from "../utils/prop-types";
+import type {IMenuSectionAria} from "./dropdown-types";
+
+import {useMenuSection} from "@react-aria/menu";
+import {mergeProps} from "@react-aria/utils";
+import React, {Fragment, Key} from "react";
+
+import clsx from "../utils/clsx";
+import Divider from "../divider";
+import {__DEV__} from "../utils/assertion";
+
 import {
   StyledDropdownSection,
   StyledDropdownSectionWrapper,
-  StyledDropdownSectionTitle
-} from './dropdown.styles';
-import type { IMenuSectionAria } from './dropdown-types';
-import { __DEV__ } from '../utils/assertion';
+  StyledDropdownSectionTitle,
+} from "./dropdown.styles";
+import DropdownItem from "./dropdown-item";
 
 interface Props<T> {
   item: Node<T>;
@@ -48,58 +51,48 @@ const DropdownSection = <T extends object>(props: DropdownSectionProps<T>) => {
     variant,
     withDivider = true,
     className,
-    onAction
+    onAction,
   } = props;
 
-  const { itemProps, headingProps, groupProps }: IMenuSectionAria =
-    useMenuSection({
-      heading: item.rendered,
-      'aria-label': item['aria-label']
-    });
+  const {itemProps, headingProps, groupProps}: IMenuSectionAria = useMenuSection({
+    heading: item.rendered,
+    "aria-label": item["aria-label"],
+  });
 
   return (
     <Fragment>
       {item.key !== state.collection.getFirstKey() && withDivider && (
-        <Divider
-          as="li"
-          className="nextui-dropdown-section-divider"
-          css={{ my: '$2' }}
-        />
+        <Divider as="li" className="nextui-dropdown-section-divider" css={{my: "$2"}} />
       )}
-      <StyledDropdownSectionWrapper
-        {...itemProps}
-        className="nextui-dropdown-section-wrapper"
-      >
+      <StyledDropdownSectionWrapper {...itemProps} className="nextui-dropdown-section-wrapper">
         {item.rendered && (
-          <StyledDropdownSectionTitle
-            {...headingProps}
-            className="nextui-dropdown-section-title"
-          >
+          <StyledDropdownSectionTitle {...headingProps} className="nextui-dropdown-section-title">
             {item.rendered}
           </StyledDropdownSectionTitle>
         )}
         <StyledDropdownSection
           {...groupProps}
           as={item.props?.as || as}
-          css={{ ...mergeProps(css, item.props?.css) }}
-          className={clsx('nextui-dropdown-section', className)}
+          className={clsx("nextui-dropdown-section", className)}
+          css={{...mergeProps(css, item.props?.css)}}
         >
           {[...item.childNodes].map((node) => {
             let item = (
               <DropdownItem
                 key={node.key}
+                color={color}
                 item={node}
                 state={state}
-                onAction={onAction}
-                color={color}
                 textColor={textColor}
                 variant={variant}
+                onAction={onAction}
               />
             );
 
             if (node.wrapper) {
               item = node.wrapper(item);
             }
+
             return item;
           })}
         </StyledDropdownSection>
@@ -109,9 +102,9 @@ const DropdownSection = <T extends object>(props: DropdownSectionProps<T>) => {
 };
 
 if (__DEV__) {
-  DropdownSection.displayName = 'NextUI.DropdownSection';
+  DropdownSection.displayName = "NextUI.DropdownSection";
 }
 
-DropdownSection.toString = () => '.nextui-dropdown-section';
+DropdownSection.toString = () => ".nextui-dropdown-section";
 
 export default DropdownSection;
diff --git a/packages/react/src/dropdown/dropdown-trigger.tsx b/packages/react/src/dropdown/dropdown-trigger.tsx
index f95dbc0a20..ce86b138c4 100644
--- a/packages/react/src/dropdown/dropdown-trigger.tsx
+++ b/packages/react/src/dropdown/dropdown-trigger.tsx
@@ -1,8 +1,11 @@
-import React from 'react';
-import Popover from '../popover';
-import { useDropdownContext } from './dropdown-context';
-import type { ReactRef } from '../utils/refs';
-import { __DEV__ } from '../utils/assertion';
+import type {ReactRef} from "../utils/refs";
+
+import React from "react";
+
+import Popover from "../popover";
+import {__DEV__} from "../utils/assertion";
+
+import {useDropdownContext} from "./dropdown-context";
 
 /**
  * DropdownTrigger opens the popover's content. It must be an interactive element
@@ -10,22 +13,18 @@ import { __DEV__ } from '../utils/assertion';
  */
 const DropdownTrigger = React.forwardRef(
   (props: React.PropsWithChildren<{}>, _: ReactRef<HTMLElement>) => {
-    const { children, ...otherProps } = props;
-    const { getMenuTriggerProps } = useDropdownContext();
-
-    return (
-      <Popover.Trigger {...getMenuTriggerProps(otherProps)}>
-        {children}
-      </Popover.Trigger>
-    );
-  }
+    const {children, ...otherProps} = props;
+    const {getMenuTriggerProps} = useDropdownContext();
+
+    return <Popover.Trigger {...getMenuTriggerProps(otherProps)}>{children}</Popover.Trigger>;
+  },
 );
 
 if (__DEV__) {
-  DropdownTrigger.displayName = 'NextUI.DropdownTrigger';
+  DropdownTrigger.displayName = "NextUI.DropdownTrigger";
 }
 
-DropdownTrigger.toString = () => '.nextui-dropdown-trigger';
+DropdownTrigger.toString = () => ".nextui-dropdown-trigger";
 
 type DropdownTriggerComponent<T, P = {}> = React.ForwardRefExoticComponent<
   React.PropsWithoutRef<P> & React.RefAttributes<T>
diff --git a/packages/react/src/dropdown/dropdown-types.ts b/packages/react/src/dropdown/dropdown-types.ts
index 515209e481..ede9a59cd5 100644
--- a/packages/react/src/dropdown/dropdown-types.ts
+++ b/packages/react/src/dropdown/dropdown-types.ts
@@ -1,28 +1,29 @@
-import type { HTMLAttributes } from 'react';
-import { useMenuItem, useMenuSection } from '@react-aria/menu';
-import type { FocusRingAria } from '@react-aria/focus';
+import type {HTMLAttributes} from "react";
+import type {FocusRingAria} from "@react-aria/focus";
+
+import {useMenuItem, useMenuSection} from "@react-aria/menu";
 
 export type MenuItemAria = ReturnType<typeof useMenuItem>;
 export type MenuSectionAria = ReturnType<typeof useMenuSection>;
 
 export interface IFocusRingAria extends FocusRingAria {
-  focusProps: Omit<HTMLAttributes<HTMLElement>, 'css'>;
+  focusProps: Omit<HTMLAttributes<HTMLElement>, "css">;
 }
 
 export interface IMenuItemAria extends MenuItemAria {
   /** Props for the main text element inside the menu item. */
-  labelProps: Omit<HTMLAttributes<HTMLElement>, 'css'>;
+  labelProps: Omit<HTMLAttributes<HTMLElement>, "css">;
   /** Props for the description text element inside the menu item, if any. */
-  descriptionProps: Omit<HTMLAttributes<HTMLElement>, 'css'>;
+  descriptionProps: Omit<HTMLAttributes<HTMLElement>, "css">;
   /** Props for the keyboard shortcut text element inside the item, if any. */
-  keyboardShortcutProps: Omit<HTMLAttributes<HTMLElement>, 'css'>;
+  keyboardShortcutProps: Omit<HTMLAttributes<HTMLElement>, "css">;
 }
 
 export interface IMenuSectionAria extends MenuSectionAria {
   /** Props for the wrapper list item. */
-  itemProps: Omit<HTMLAttributes<HTMLElement>, 'css'>;
+  itemProps: Omit<HTMLAttributes<HTMLElement>, "css">;
   /** Props for the heading element, if any. */
-  headingProps: Omit<HTMLAttributes<HTMLElement>, 'css'>;
+  headingProps: Omit<HTMLAttributes<HTMLElement>, "css">;
   /** Props for the group element. */
-  groupProps: Omit<HTMLAttributes<HTMLElement>, 'css'>;
+  groupProps: Omit<HTMLAttributes<HTMLElement>, "css">;
 }
diff --git a/packages/react/src/dropdown/dropdown.stories.tsx b/packages/react/src/dropdown/dropdown.stories.tsx
index e725bbe615..c1bc9254cc 100644
--- a/packages/react/src/dropdown/dropdown.stories.tsx
+++ b/packages/react/src/dropdown/dropdown.stories.tsx
@@ -1,17 +1,14 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { Button, Grid, Text, Avatar, User } from '../index';
-import {
-  AddNoteBulk,
-  CopyDocumentBulk,
-  DeleteDocumentBulk,
-  EditDocumentBulk
-} from '../utils/icons';
-import Dropdown from './index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Button, Grid, Text, Avatar, User} from "../index";
+import {AddNoteBulk, CopyDocumentBulk, DeleteDocumentBulk, EditDocumentBulk} from "../utils/icons";
+
+import Dropdown from "./index";
 
 export default {
-  title: 'General/Dropdown',
-  component: Dropdown
+  title: "General/Dropdown",
+  component: Dropdown,
 } as Meta;
 
 export const Default = () => (
@@ -39,7 +36,7 @@ export const WithDivider = () => (
       <Dropdown.Item key="new">New file</Dropdown.Item>
       <Dropdown.Item key="copy">Copy link</Dropdown.Item>
       <Dropdown.Item key="edit">Edit file</Dropdown.Item>
-      <Dropdown.Item key="delete" color="error" withDivider>
+      <Dropdown.Item key="delete" withDivider color="error">
         Delete file
       </Dropdown.Item>
     </Dropdown.Menu>
@@ -53,7 +50,7 @@ export const WithChevron = () => (
       <Dropdown.Item key="new">New file</Dropdown.Item>
       <Dropdown.Item key="copy">Copy link</Dropdown.Item>
       <Dropdown.Item key="edit">Edit file</Dropdown.Item>
-      <Dropdown.Item key="delete" color="error" withDivider>
+      <Dropdown.Item key="delete" withDivider color="error">
         Delete file
       </Dropdown.Item>
     </Dropdown.Menu>
@@ -61,13 +58,13 @@ export const WithChevron = () => (
 );
 
 export const Bordered = () => (
-  <Dropdown isBordered disableShadow>
+  <Dropdown disableShadow isBordered>
     <Dropdown.Button>Trigger</Dropdown.Button>
     <Dropdown.Menu aria-label="Actions" onAction={alert}>
       <Dropdown.Item key="new">New file</Dropdown.Item>
       <Dropdown.Item key="copy">Copy link</Dropdown.Item>
       <Dropdown.Item key="edit">Edit file</Dropdown.Item>
-      <Dropdown.Item key="delete" color="error" withDivider>
+      <Dropdown.Item key="delete" withDivider color="error">
         Delete file
       </Dropdown.Item>
     </Dropdown.Menu>
@@ -76,19 +73,19 @@ export const Bordered = () => (
 
 export const DisabledKeys = () => (
   <Dropdown>
-    <Dropdown.Button color="secondary" flat>
+    <Dropdown.Button flat color="secondary">
       Trigger
     </Dropdown.Button>
     <Dropdown.Menu
-      color="secondary"
       aria-label="Actions"
+      color="secondary"
+      disabledKeys={["edit", "delete"]}
       onAction={alert}
-      disabledKeys={['edit', 'delete']}
     >
       <Dropdown.Item key="new">New file</Dropdown.Item>
       <Dropdown.Item key="copy">Copy link</Dropdown.Item>
       <Dropdown.Item key="edit">Edit file</Dropdown.Item>
-      <Dropdown.Item key="delete" color="error" withDivider>
+      <Dropdown.Item key="delete" withDivider color="error">
         Delete file
       </Dropdown.Item>
     </Dropdown.Menu>
@@ -104,7 +101,7 @@ export const Variants = () => (
           <Dropdown.Item key="new">New file</Dropdown.Item>
           <Dropdown.Item key="copy">Copy link</Dropdown.Item>
           <Dropdown.Item key="edit">Edit file</Dropdown.Item>
-          <Dropdown.Item key="delete" color="error" withDivider>
+          <Dropdown.Item key="delete" withDivider color="error">
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
@@ -113,16 +110,11 @@ export const Variants = () => (
     <Grid>
       <Dropdown>
         <Dropdown.Button color="primary">Solid</Dropdown.Button>
-        <Dropdown.Menu
-          color="primary"
-          variant="solid"
-          aria-label="Actions"
-          onAction={alert}
-        >
+        <Dropdown.Menu aria-label="Actions" color="primary" variant="solid" onAction={alert}>
           <Dropdown.Item key="new">New file</Dropdown.Item>
           <Dropdown.Item key="copy">Copy link</Dropdown.Item>
           <Dropdown.Item key="edit">Edit file</Dropdown.Item>
-          <Dropdown.Item key="delete" color="error" withDivider>
+          <Dropdown.Item key="delete" withDivider color="error">
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
@@ -130,19 +122,14 @@ export const Variants = () => (
     </Grid>
     <Grid>
       <Dropdown>
-        <Dropdown.Button color="primary" shadow>
+        <Dropdown.Button shadow color="primary">
           Shadow
         </Dropdown.Button>
-        <Dropdown.Menu
-          color="primary"
-          variant="shadow"
-          aria-label="Actions"
-          onAction={alert}
-        >
+        <Dropdown.Menu aria-label="Actions" color="primary" variant="shadow" onAction={alert}>
           <Dropdown.Item key="new">New file</Dropdown.Item>
           <Dropdown.Item key="copy">Copy link</Dropdown.Item>
           <Dropdown.Item key="edit">Edit file</Dropdown.Item>
-          <Dropdown.Item key="delete" color="error" withDivider>
+          <Dropdown.Item key="delete" withDivider color="error">
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
@@ -150,19 +137,14 @@ export const Variants = () => (
     </Grid>
     <Grid>
       <Dropdown>
-        <Dropdown.Button color="primary" light>
+        <Dropdown.Button light color="primary">
           Light
         </Dropdown.Button>
-        <Dropdown.Menu
-          color="primary"
-          variant="light"
-          aria-label="Actions"
-          onAction={alert}
-        >
+        <Dropdown.Menu aria-label="Actions" color="primary" variant="light" onAction={alert}>
           <Dropdown.Item key="new">New file</Dropdown.Item>
           <Dropdown.Item key="copy">Copy link</Dropdown.Item>
           <Dropdown.Item key="edit">Edit file</Dropdown.Item>
-          <Dropdown.Item key="delete" color="error" withDivider>
+          <Dropdown.Item key="delete" withDivider color="error">
             Delete file
           </Dropdown.Item>
         </Dropdown.Menu>
@@ -172,26 +154,24 @@ export const Variants = () => (
 );
 
 export const SingleSelection = () => {
-  const [selected, setSelected] = React.useState<string | Set<React.Key>>(
-    new Set(['text'])
-  );
+  const [selected, setSelected] = React.useState<string | Set<React.Key>>(new Set(["text"]));
 
   const selectedValue = React.useMemo(
-    () => Array.from(selected).join(', ').replaceAll('_', ' '),
-    [selected]
+    () => Array.from(selected).join(", ").replaceAll("_", " "),
+    [selected],
   );
 
   return (
     <Dropdown>
-      <Dropdown.Button flat color="secondary" css={{ tt: 'capitalize' }}>
+      <Dropdown.Button flat color="secondary" css={{tt: "capitalize"}}>
         {selectedValue}
       </Dropdown.Button>
       <Dropdown.Menu
+        disallowEmptySelection
         aria-label="Actions"
         color="secondary"
-        disallowEmptySelection
-        selectionMode="single"
         selectedKeys={selected}
+        selectionMode="single"
         onSelectionChange={setSelected}
       >
         <Dropdown.Item key="text">Text</Dropdown.Item>
@@ -205,26 +185,24 @@ export const SingleSelection = () => {
 };
 
 export const MultipleSelection = () => {
-  const [selected, setSelected] = React.useState<string | Set<React.Key>>(
-    new Set(['text'])
-  );
+  const [selected, setSelected] = React.useState<string | Set<React.Key>>(new Set(["text"]));
 
   const selectedValue = React.useMemo(
-    () => Array.from(selected).join(', ').replaceAll('_', ' '),
-    [selected]
+    () => Array.from(selected).join(", ").replaceAll("_", " "),
+    [selected],
   );
 
   return (
     <Dropdown>
-      <Dropdown.Button flat color="secondary" css={{ tt: 'capitalize' }}>
+      <Dropdown.Button flat color="secondary" css={{tt: "capitalize"}}>
         {selectedValue}
       </Dropdown.Button>
       <Dropdown.Menu
+        disallowEmptySelection
         aria-label="Actions"
         color="secondary"
-        disallowEmptySelection
-        selectionMode="multiple"
         selectedKeys={selected}
+        selectionMode="multiple"
         onSelectionChange={setSelected}
       >
         <Dropdown.Item key="text">Text</Dropdown.Item>
@@ -240,7 +218,7 @@ export const MultipleSelection = () => {
 export const WithCommand = () => (
   <Dropdown>
     <Dropdown.Button flat color="secondary" size="sm" />
-    <Dropdown.Menu color="secondary" aria-label="Actions" onAction={alert}>
+    <Dropdown.Menu aria-label="Actions" color="secondary" onAction={alert}>
       <Dropdown.Item key="new" command="⌘N">
         New file
       </Dropdown.Item>
@@ -250,7 +228,7 @@ export const WithCommand = () => (
       <Dropdown.Item key="edit" command="⌘⇧E">
         Edit file
       </Dropdown.Item>
-      <Dropdown.Item withDivider key="delete" color="error" command="⌘⇧D">
+      <Dropdown.Item key="delete" withDivider color="error" command="⌘⇧D">
         Delete file
       </Dropdown.Item>
     </Dropdown.Menu>
@@ -260,38 +238,34 @@ export const WithCommand = () => (
 export const WithIcon = () => (
   <Dropdown>
     <Dropdown.Button flat color="primary" size="sm" />
-    <Dropdown.Menu color="primary" aria-label="Actions" onAction={alert}>
+    <Dropdown.Menu aria-label="Actions" color="primary" onAction={alert}>
       <Dropdown.Item
         key="new"
         command="⌘N"
-        icon={<AddNoteBulk size={22} fill="var(--nextui-colors-primary)" />}
+        icon={<AddNoteBulk fill="var(--nextui-colors-primary)" size={22} />}
       >
         New file
       </Dropdown.Item>
       <Dropdown.Item
         key="copy"
         command="⌘C"
-        icon={
-          <CopyDocumentBulk size={22} fill="var(--nextui-colors-primary)" />
-        }
+        icon={<CopyDocumentBulk fill="var(--nextui-colors-primary)" size={22} />}
       >
         Copy link
       </Dropdown.Item>
       <Dropdown.Item
         key="edit"
         command="⌘⇧E"
-        icon={
-          <EditDocumentBulk size={22} fill="var(--nextui-colors-primary)" />
-        }
+        icon={<EditDocumentBulk fill="var(--nextui-colors-primary)" size={22} />}
       >
         Edit file
       </Dropdown.Item>
       <Dropdown.Item
-        withDivider
         key="delete"
+        withDivider
         color="error"
         command="⌘⇧D"
-        icon={<DeleteDocumentBulk size={22} fill="currentColor" />}
+        icon={<DeleteDocumentBulk fill="currentColor" size={22} />}
       >
         Delete file
       </Dropdown.Item>
@@ -302,12 +276,12 @@ export const WithIcon = () => (
 export const WithDescription = () => (
   <Dropdown>
     <Dropdown.Button flat color="secondary" size="sm" />
-    <Dropdown.Menu color="secondary" aria-label="Actions" onAction={alert}>
+    <Dropdown.Menu aria-label="Actions" color="secondary" onAction={alert}>
       <Dropdown.Item
         key="new"
         command="⌘N"
         description="Create a new file"
-        icon={<AddNoteBulk size={22} fill="var(--nextui-colors-secondary)" />}
+        icon={<AddNoteBulk fill="var(--nextui-colors-secondary)" size={22} />}
       >
         New file
       </Dropdown.Item>
@@ -315,9 +289,7 @@ export const WithDescription = () => (
         key="copy"
         command="⌘C"
         description="Copy the link"
-        icon={
-          <CopyDocumentBulk size={22} fill="var(--nextui-colors-secondary)" />
-        }
+        icon={<CopyDocumentBulk fill="var(--nextui-colors-secondary)" size={22} />}
       >
         Copy link
       </Dropdown.Item>
@@ -325,19 +297,17 @@ export const WithDescription = () => (
         key="edit"
         command="⌘⇧E"
         description="Edit the file"
-        icon={
-          <EditDocumentBulk size={22} fill="var(--nextui-colors-secondary)" />
-        }
+        icon={<EditDocumentBulk fill="var(--nextui-colors-secondary)" size={22} />}
       >
         Edit file
       </Dropdown.Item>
       <Dropdown.Item
-        withDivider
         key="delete"
+        withDivider
         color="error"
         command="⌘⇧D"
         description="Delete the file"
-        icon={<DeleteDocumentBulk size={22} fill="currentColor" />}
+        icon={<DeleteDocumentBulk fill="currentColor" size={22} />}
       >
         Delete file
       </Dropdown.Item>
@@ -348,13 +318,13 @@ export const WithDescription = () => (
 export const Sections = () => (
   <Dropdown>
     <Dropdown.Button flat color="secondary" size="sm" />
-    <Dropdown.Menu color="secondary" aria-label="Actions" onAction={alert}>
+    <Dropdown.Menu aria-label="Actions" color="secondary" onAction={alert}>
       <Dropdown.Section title="Actions">
         <Dropdown.Item
           key="new"
           command="⌘N"
           description="Create a new fil"
-          icon={<AddNoteBulk size={22} fill="var(--nextui-colors-secondary)" />}
+          icon={<AddNoteBulk fill="var(--nextui-colors-secondary)" size={22} />}
         >
           New file
         </Dropdown.Item>
@@ -362,9 +332,7 @@ export const Sections = () => (
           key="copy"
           command="⌘C"
           description="Copy the link"
-          icon={
-            <CopyDocumentBulk size={22} fill="var(--nextui-colors-secondary)" />
-          }
+          icon={<CopyDocumentBulk fill="var(--nextui-colors-secondary)" size={22} />}
         >
           Copy link
         </Dropdown.Item>
@@ -372,9 +340,7 @@ export const Sections = () => (
           key="edit"
           command="⌘⇧E"
           description="Edit the file"
-          icon={
-            <EditDocumentBulk size={22} fill="var(--nextui-colors-secondary)" />
-          }
+          icon={<EditDocumentBulk fill="var(--nextui-colors-secondary)" size={22} />}
         >
           Edit file
         </Dropdown.Item>
@@ -385,7 +351,7 @@ export const Sections = () => (
           color="error"
           command="⌘⇧D"
           description="Delete the file"
-          icon={<DeleteDocumentBulk size={22} fill="currentColor" />}
+          icon={<DeleteDocumentBulk fill="currentColor" size={22} />}
         >
           Delete file
         </Dropdown.Item>
@@ -395,28 +361,24 @@ export const Sections = () => (
 );
 
 export const CustomTrigger = () => (
-  <Grid.Container justify="center" gap={2}>
+  <Grid.Container gap={2} justify="center">
     <Grid>
       <Dropdown placement="bottom-right">
         <Dropdown.Trigger>
           <Avatar
             bordered
-            size="lg"
             as="button"
             color="secondary"
+            size="lg"
             src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
           />
         </Dropdown.Trigger>
-        <Dropdown.Menu
-          color="secondary"
-          aria-label="Avatar Actions"
-          onAction={alert}
-        >
-          <Dropdown.Item key="profile" css={{ height: '$18' }}>
-            <Text b color="inherit" css={{ d: 'flex' }}>
+        <Dropdown.Menu aria-label="Avatar Actions" color="secondary" onAction={alert}>
+          <Dropdown.Item key="profile" css={{height: "$18"}}>
+            <Text b color="inherit" css={{d: "flex"}}>
               Signed in as
             </Text>
-            <Text b color="inherit" css={{ d: 'flex' }}>
+            <Text b color="inherit" css={{d: "flex"}}>
               zoey@example.com
             </Text>
           </Dropdown.Item>
@@ -432,7 +394,7 @@ export const CustomTrigger = () => (
           <Dropdown.Item key="help_and_feedback" withDivider>
             Help & Feedback
           </Dropdown.Item>
-          <Dropdown.Item key="logout" color="error" withDivider>
+          <Dropdown.Item key="logout" withDivider color="error">
             Log Out
           </Dropdown.Item>
         </Dropdown.Menu>
@@ -444,23 +406,19 @@ export const CustomTrigger = () => (
           <User
             bordered
             as="button"
-            name="Zoey Lang"
+            color="primary"
             description="@zoey"
+            name="Zoey Lang"
             size="lg"
-            color="primary"
             src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
           />
         </Dropdown.Trigger>
-        <Dropdown.Menu
-          color="primary"
-          aria-label="User Actions"
-          onAction={alert}
-        >
-          <Dropdown.Item key="profile" css={{ height: '$18' }}>
-            <Text b color="inherit" css={{ d: 'flex' }}>
+        <Dropdown.Menu aria-label="User Actions" color="primary" onAction={alert}>
+          <Dropdown.Item key="profile" css={{height: "$18"}}>
+            <Text b color="inherit" css={{d: "flex"}}>
               Signed in as
             </Text>
-            <Text b color="inherit" css={{ d: 'flex' }}>
+            <Text b color="inherit" css={{d: "flex"}}>
               zoey@example.com
             </Text>
           </Dropdown.Item>
@@ -476,7 +434,7 @@ export const CustomTrigger = () => (
           <Dropdown.Item key="help_and_feedback" withDivider>
             Help & Feedback
           </Dropdown.Item>
-          <Dropdown.Item key="logout" color="error" withDivider>
+          <Dropdown.Item key="logout" withDivider color="error">
             Log Out
           </Dropdown.Item>
         </Dropdown.Menu>
@@ -488,12 +446,12 @@ export const CustomTrigger = () => (
 export const DisableAnimation = () => (
   <Dropdown disableAnimation>
     <Dropdown.Button flat color="secondary" size="sm" />
-    <Dropdown.Menu color="secondary" aria-label="Actions" onAction={alert}>
+    <Dropdown.Menu aria-label="Actions" color="secondary" onAction={alert}>
       <Dropdown.Item
         key="new"
         command="⌘N"
         description="Create a new file"
-        icon={<AddNoteBulk size={22} fill="var(--nextui-colors-secondary)" />}
+        icon={<AddNoteBulk fill="var(--nextui-colors-secondary)" size={22} />}
       >
         New file
       </Dropdown.Item>
@@ -501,9 +459,7 @@ export const DisableAnimation = () => (
         key="copy"
         command="⌘C"
         description="Copy the link"
-        icon={
-          <CopyDocumentBulk size={22} fill="var(--nextui-colors-secondary)" />
-        }
+        icon={<CopyDocumentBulk fill="var(--nextui-colors-secondary)" size={22} />}
       >
         Copy link
       </Dropdown.Item>
@@ -511,19 +467,17 @@ export const DisableAnimation = () => (
         key="edit"
         command="⌘⇧E"
         description="Edit the file"
-        icon={
-          <EditDocumentBulk size={22} fill="var(--nextui-colors-secondary)" />
-        }
+        icon={<EditDocumentBulk fill="var(--nextui-colors-secondary)" size={22} />}
       >
         Edit file
       </Dropdown.Item>
       <Dropdown.Item
-        withDivider
         key="delete"
+        withDivider
         color="error"
         command="⌘⇧D"
         description="Delete the file"
-        icon={<DeleteDocumentBulk size={22} fill="currentColor" />}
+        icon={<DeleteDocumentBulk fill="currentColor" size={22} />}
       >
         Delete file
       </Dropdown.Item>
diff --git a/packages/react/src/dropdown/dropdown.styles.ts b/packages/react/src/dropdown/dropdown.styles.ts
index 8015d45f05..6da1c22a23 100644
--- a/packages/react/src/dropdown/dropdown.styles.ts
+++ b/packages/react/src/dropdown/dropdown.styles.ts
@@ -1,65 +1,65 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import { cssFocusVisible } from '../theme/shared-css';
+import {styled, VariantProps} from "../theme/stitches.config";
+import {cssFocusVisible} from "../theme/shared-css";
 
-export const StyledDropdownMenu = styled('ul', {
-  $$dropdownItemHeight: '$space$13',
-  $$dropdownMenuPadding: '$space$4',
-  $$dropdownMenuWidth: '250px',
-  listStyle: 'none',
-  position: 'relative',
-  width: '$$dropdownMenuWidth',
-  p: '$$dropdownMenuPadding',
+export const StyledDropdownMenu = styled("ul", {
+  $$dropdownItemHeight: "$space$13",
+  $$dropdownMenuPadding: "$space$4",
+  $$dropdownMenuWidth: "250px",
+  listStyle: "none",
+  position: "relative",
+  width: "$$dropdownMenuWidth",
+  p: "$$dropdownMenuPadding",
   m: 0,
-  outline: 'none'
+  outline: "none",
 });
 
-export const StyledDropdownItemIconWrapper = styled('span', {
-  dflex: 'center',
+export const StyledDropdownItemIconWrapper = styled("span", {
+  dflex: "center",
   flexShrink: 0,
-  mr: '$4'
+  mr: "$4",
 });
 
-export const StyledDropdownItemKbd = styled('kbd', {
+export const StyledDropdownItemKbd = styled("kbd", {
   opacity: 0.8,
-  ml: '$4',
+  ml: "$4",
   mr: 0,
-  dflex: 'center',
-  color: '$$dropdownItemKeyboardColor',
-  fontSize: '$xs',
-  fontFamily: '$sans',
-  boxShadow: 'none',
-  bg: 'transparent',
-  transition: 'border 0.26s ease 0s'
+  dflex: "center",
+  color: "$$dropdownItemKeyboardColor",
+  fontSize: "$xs",
+  fontFamily: "$sans",
+  boxShadow: "none",
+  bg: "transparent",
+  transition: "border 0.26s ease 0s",
 });
 
-export const StyledDropdownItemContentWrapper = styled('div', {
-  d: 'flex',
-  flex: '1 1 0%',
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  lineHeight: 1.2
+export const StyledDropdownItemContentWrapper = styled("div", {
+  d: "flex",
+  flex: "1 1 0%",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  lineHeight: 1.2,
 });
 
-export const StyledDropdownItemContent = styled('span', {
-  flex: '1 1 0%'
+export const StyledDropdownItemContent = styled("span", {
+  flex: "1 1 0%",
 });
 
-export const StyledDropdownItemDescription = styled('span', {
-  fontSize: '$xs',
-  color: '$$dropdownItemDescriptionColor',
-  truncateText: 'calc($$dropdownMenuWidth * 0.9)',
-  transition: 'color 0.26s ease 0s',
+export const StyledDropdownItemDescription = styled("span", {
+  fontSize: "$xs",
+  color: "$$dropdownItemDescriptionColor",
+  truncateText: "calc($$dropdownMenuWidth * 0.9)",
+  transition: "color 0.26s ease 0s",
   variants: {
     hasIcon: {
       true: {
-        truncateText: 'calc($$dropdownMenuWidth * 0.7)'
-      }
+        truncateText: "calc($$dropdownMenuWidth * 0.7)",
+      },
     },
     hasCommand: {
       true: {
-        truncateText: 'calc($$dropdownMenuWidth * 0.7)'
-      }
-    }
+        truncateText: "calc($$dropdownMenuWidth * 0.7)",
+      },
+    },
   },
   compoundVariants: [
     // hasIcon && hasCommand
@@ -67,234 +67,234 @@ export const StyledDropdownItemDescription = styled('span', {
       hasIcon: true,
       hasCommand: true,
       css: {
-        truncateText: 'calc($$dropdownMenuWidth * 0.6)'
-      }
-    }
-  ]
+        truncateText: "calc($$dropdownMenuWidth * 0.6)",
+      },
+    },
+  ],
 });
 
 export const StyledDropdownItem = styled(
-  'li',
+  "li",
   {
     $$dropdownItemPressedScale: 0.97,
-    $$dropdownItemTextColor: '$colors$text',
-    $$dropdownItemBorderRadius: '$radii$sm',
-    $$dropdownItemKeyboardColor: '$colors$accents8',
-    $$dropdownItemDescriptionColor: '$colors$accents8',
-    dflex: 'center',
-    outline: 'none',
-    cursor: 'pointer',
-    justifyContent: 'space-between',
-    bg: 'transparent',
-    position: 'relative',
-    height: '$$dropdownItemHeight',
-    px: '$6',
-    br: '$$dropdownItemBorderRadius',
-    color: '$$dropdownItemTextColor',
+    $$dropdownItemTextColor: "$colors$text",
+    $$dropdownItemBorderRadius: "$radii$sm",
+    $$dropdownItemKeyboardColor: "$colors$accents8",
+    $$dropdownItemDescriptionColor: "$colors$accents8",
+    dflex: "center",
+    outline: "none",
+    cursor: "pointer",
+    justifyContent: "space-between",
+    bg: "transparent",
+    position: "relative",
+    height: "$$dropdownItemHeight",
+    px: "$6",
+    br: "$$dropdownItemBorderRadius",
+    color: "$$dropdownItemTextColor",
     mb: 0,
-    transition: '$dropdownItem',
+    transition: "$dropdownItem",
     /* Avoid blurriness */
-    transform: 'translateZ(0)',
-    backfaceVisibility: 'hidden',
-    $$dropdownItemShadow: '$colors$primaryShadow',
-    '@motion': {
-      transition: 'none',
+    transform: "translateZ(0)",
+    backfaceVisibility: "hidden",
+    $$dropdownItemShadow: "$colors$primaryShadow",
+    "@motion": {
+      transition: "none",
       [`& ${StyledDropdownItemKbd}`]: {
-        transition: 'none'
+        transition: "none",
       },
       [`& ${StyledDropdownItemDescription}`]: {
-        transition: 'none'
-      }
+        transition: "none",
+      },
     },
     variants: {
       color: {
         default: {
-          $$dropdownItemHoverBackground: '$colors$neutralLight',
-          $$dropdownItemHoverTextColor: '$colors$neutralLightContrast',
-          $$dropdownItemActiveBackground: '$colors$neutralLightActive',
-          $$dropdownItemSolidHoverBackground: '$colors$neutral',
-          $$dropdownItemSolidHoverTextColor: '$colors$neutralSolidContrast',
-          $$dropdownItemShadow: '$colors$neutralShadow',
-          $$dropdownItemHoverBorderColor: '$colors$neutralBorder'
+          $$dropdownItemHoverBackground: "$colors$neutralLight",
+          $$dropdownItemHoverTextColor: "$colors$neutralLightContrast",
+          $$dropdownItemActiveBackground: "$colors$neutralLightActive",
+          $$dropdownItemSolidHoverBackground: "$colors$neutral",
+          $$dropdownItemSolidHoverTextColor: "$colors$neutralSolidContrast",
+          $$dropdownItemShadow: "$colors$neutralShadow",
+          $$dropdownItemHoverBorderColor: "$colors$neutralBorder",
         },
         primary: {
-          $$dropdownItemHoverBackground: '$colors$primaryLight',
-          $$dropdownItemHoverTextColor: '$colors$primaryLightContrast',
-          $$dropdownItemActiveBackground: '$colors$primaryLightActive',
-          $$dropdownItemSolidHoverBackground: '$colors$primary',
-          $$dropdownItemSolidHoverTextColor: '$colors$primarySolidContrast',
-          $$dropdownItemShadow: '$colors$primaryShadow',
-          $$dropdownItemHoverBorderColor: '$colors$primaryBorder'
+          $$dropdownItemHoverBackground: "$colors$primaryLight",
+          $$dropdownItemHoverTextColor: "$colors$primaryLightContrast",
+          $$dropdownItemActiveBackground: "$colors$primaryLightActive",
+          $$dropdownItemSolidHoverBackground: "$colors$primary",
+          $$dropdownItemSolidHoverTextColor: "$colors$primarySolidContrast",
+          $$dropdownItemShadow: "$colors$primaryShadow",
+          $$dropdownItemHoverBorderColor: "$colors$primaryBorder",
         },
         secondary: {
-          $$dropdownItemHoverBackground: '$colors$secondaryLight',
-          $$dropdownItemHoverTextColor: '$colors$secondaryLightContrast',
-          $$dropdownItemActiveBackground: '$colors$secondaryLightActive',
-          $$dropdownItemSolidHoverBackground: '$colors$secondary',
-          $$dropdownItemSolidHoverTextColor: '$colors$secondarySolidContrast',
-          $$dropdownItemShadow: '$colors$secondaryShadow',
-          $$dropdownItemHoverBorderColor: '$colors$secondaryBorder'
+          $$dropdownItemHoverBackground: "$colors$secondaryLight",
+          $$dropdownItemHoverTextColor: "$colors$secondaryLightContrast",
+          $$dropdownItemActiveBackground: "$colors$secondaryLightActive",
+          $$dropdownItemSolidHoverBackground: "$colors$secondary",
+          $$dropdownItemSolidHoverTextColor: "$colors$secondarySolidContrast",
+          $$dropdownItemShadow: "$colors$secondaryShadow",
+          $$dropdownItemHoverBorderColor: "$colors$secondaryBorder",
         },
         success: {
-          $$dropdownItemHoverBackground: '$colors$successLight',
-          $$dropdownItemHoverTextColor: '$colors$successLightContrast',
-          $$dropdownItemActiveBackground: '$colors$successLightActive',
-          $$dropdownItemSolidHoverBackground: '$colors$success',
-          $$dropdownItemSolidHoverTextColor: '$colors$successSolidContrast',
-          $$dropdownItemShadow: '$colors$successShadow',
-          $$dropdownItemHoverBorderColor: '$colors$successBorder'
+          $$dropdownItemHoverBackground: "$colors$successLight",
+          $$dropdownItemHoverTextColor: "$colors$successLightContrast",
+          $$dropdownItemActiveBackground: "$colors$successLightActive",
+          $$dropdownItemSolidHoverBackground: "$colors$success",
+          $$dropdownItemSolidHoverTextColor: "$colors$successSolidContrast",
+          $$dropdownItemShadow: "$colors$successShadow",
+          $$dropdownItemHoverBorderColor: "$colors$successBorder",
         },
         warning: {
-          $$dropdownItemHoverBackground: '$colors$warningLight',
-          $$dropdownItemHoverTextColor: '$colors$warningLightContrast',
-          $$dropdownItemActiveBackground: '$colors$warningLightActive',
-          $$dropdownItemSolidHoverBackground: '$colors$warning',
-          $$dropdownItemSolidHoverTextColor: '$colors$warningSolidContrast',
-          $$dropdownItemShadow: '$colors$warningShadow',
-          $$dropdownItemHoverBorderColor: '$colors$warningBorder'
+          $$dropdownItemHoverBackground: "$colors$warningLight",
+          $$dropdownItemHoverTextColor: "$colors$warningLightContrast",
+          $$dropdownItemActiveBackground: "$colors$warningLightActive",
+          $$dropdownItemSolidHoverBackground: "$colors$warning",
+          $$dropdownItemSolidHoverTextColor: "$colors$warningSolidContrast",
+          $$dropdownItemShadow: "$colors$warningShadow",
+          $$dropdownItemHoverBorderColor: "$colors$warningBorder",
         },
         error: {
-          $$dropdownItemHoverBackground: '$colors$errorLight',
-          $$dropdownItemHoverTextColor: '$colors$errorLightContrast',
-          $$dropdownItemActiveBackground: '$colors$errorLightActive',
-          $$dropdownItemSolidHoverBackground: '$colors$error',
-          $$dropdownItemSolidHoverTextColor: '$colors$errorSolidContrast',
-          $$dropdownItemShadow: '$colors$errorShadow',
-          $$dropdownItemHoverBorderColor: '$colors$errorBorder'
-        }
+          $$dropdownItemHoverBackground: "$colors$errorLight",
+          $$dropdownItemHoverTextColor: "$colors$errorLightContrast",
+          $$dropdownItemActiveBackground: "$colors$errorLightActive",
+          $$dropdownItemSolidHoverBackground: "$colors$error",
+          $$dropdownItemSolidHoverTextColor: "$colors$errorSolidContrast",
+          $$dropdownItemShadow: "$colors$errorShadow",
+          $$dropdownItemHoverBorderColor: "$colors$errorBorder",
+        },
       },
       textColor: {
         default: {},
         primary: {
-          $$dropdownItemTextColor: '$colors$primaryLightContrast',
-          $$dropdownItemHoverTextColor: '$colors$primaryLightContrast'
+          $$dropdownItemTextColor: "$colors$primaryLightContrast",
+          $$dropdownItemHoverTextColor: "$colors$primaryLightContrast",
         },
         secondary: {
-          $$dropdownItemTextColor: '$colors$secondaryLightContrast',
-          $$dropdownItemHoverTextColor: '$colors$secondaryLightContrast'
+          $$dropdownItemTextColor: "$colors$secondaryLightContrast",
+          $$dropdownItemHoverTextColor: "$colors$secondaryLightContrast",
         },
         success: {
-          $$dropdownItemTextColor: '$colors$successLightContrast',
-          $$dropdownItemHoverTextColor: '$colors$successLightContrast'
+          $$dropdownItemTextColor: "$colors$successLightContrast",
+          $$dropdownItemHoverTextColor: "$colors$successLightContrast",
         },
         warning: {
-          $$dropdownItemTextColor: '$colors$warningLightContrast',
-          $$dropdownItemHoverTextColor: '$colors$warningLightContrast'
+          $$dropdownItemTextColor: "$colors$warningLightContrast",
+          $$dropdownItemHoverTextColor: "$colors$warningLightContrast",
         },
         error: {
-          $$dropdownItemTextColor: '$colors$errorLightContrast',
-          $$dropdownItemHoverTextColor: '$colors$errorLightContrast'
-        }
+          $$dropdownItemTextColor: "$colors$errorLightContrast",
+          $$dropdownItemHoverTextColor: "$colors$errorLightContrast",
+        },
       },
       variant: {
         flat: {
-          true: {}
+          true: {},
         },
         light: {
-          true: {}
+          true: {},
         },
         solid: {
-          true: {}
+          true: {},
         },
         shadow: {
-          true: {}
-        }
+          true: {},
+        },
       },
       isPressed: {
         true: {
-          bg: '$$dropdownItemActiveBackground'
-        }
+          bg: "$$dropdownItemActiveBackground",
+        },
       },
       isFocused: {
         true: {
-          bg: '$$dropdownItemHoverBackground',
-          color: '$$dropdownItemHoverTextColor',
+          bg: "$$dropdownItemHoverBackground",
+          color: "$$dropdownItemHoverTextColor",
           [`& ${StyledDropdownItemKbd}`]: {
-            color: '$$dropdownItemHoverTextColor',
-            borderColor: '$$dropdownItemHoverBorderColor'
+            color: "$$dropdownItemHoverTextColor",
+            borderColor: "$$dropdownItemHoverBorderColor",
           },
           [`& ${StyledDropdownItemDescription}`]: {
-            color: 'currentColor'
-          }
-        }
+            color: "currentColor",
+          },
+        },
       },
       isHovered: {
         true: {
-          bg: '$$dropdownItemHoverBackground',
-          color: '$$dropdownItemHoverTextColor',
+          bg: "$$dropdownItemHoverBackground",
+          color: "$$dropdownItemHoverTextColor",
           [`& ${StyledDropdownItemKbd}`]: {
-            color: '$$dropdownItemHoverTextColor',
-            borderColor: '$$dropdownItemHoverBorderColor'
+            color: "$$dropdownItemHoverTextColor",
+            borderColor: "$$dropdownItemHoverBorderColor",
           },
           [`& ${StyledDropdownItemDescription}`]: {
-            color: 'currentColor'
-          }
-        }
+            color: "currentColor",
+          },
+        },
       },
       shouldShowOutline: {
         true: {
-          outline: 'solid 2px $$dropdownItemActiveBackground'
-        }
+          outline: "solid 2px $$dropdownItemActiveBackground",
+        },
       },
       isSelected: {
-        true: {}
+        true: {},
       },
       isSelectable: {
-        true: {}
+        true: {},
       },
       isDisabled: {
         true: {
-          color: '$accents5',
-          cursor: 'default'
-        }
+          color: "$accents5",
+          cursor: "default",
+        },
       },
       withDescription: {
         true: {
-          height: 'calc($$dropdownItemHeight * 1.2)'
-        }
+          height: "calc($$dropdownItemHeight * 1.2)",
+        },
       },
       withDivider: {
         true: {
-          mt: '$6',
-          '&:before': {
+          mt: "$6",
+          "&:before": {
             content: '""',
-            position: 'absolute',
-            top: '-$3',
-            left: '-$$dropdownMenuPadding',
-            right: '-$$dropdownMenuPadding',
-            height: '$$dropdownItemBorderWeight',
-            bg: '$border'
-          }
-        }
+            position: "absolute",
+            top: "-$3",
+            left: "-$$dropdownMenuPadding",
+            right: "-$$dropdownMenuPadding",
+            height: "$$dropdownItemBorderWeight",
+            bg: "$border",
+          },
+        },
       },
       dividerWeight: {
         light: {
-          $$dropdownItemBorderWeight: '$borderWeights$light'
+          $$dropdownItemBorderWeight: "$borderWeights$light",
         },
         normal: {
-          $$dropdownItemBorderWeight: '$borderWeights$normal'
+          $$dropdownItemBorderWeight: "$borderWeights$normal",
         },
         bold: {
-          $$dropdownItemBorderWeight: '$borderWeights$bold'
+          $$dropdownItemBorderWeight: "$borderWeights$bold",
         },
         extrabold: {
-          $$dropdownItemBorderWeight: '$borderWeights$extrabold'
+          $$dropdownItemBorderWeight: "$borderWeights$extrabold",
         },
         black: {
-          $$dropdownItemBorderWeight: '$borderWeights$black'
-        }
+          $$dropdownItemBorderWeight: "$borderWeights$black",
+        },
       },
       disableAnimation: {
         true: {
-          transition: 'none',
+          transition: "none",
           [`& ${StyledDropdownItemKbd}`]: {
-            transition: 'none'
+            transition: "none",
           },
           [`& ${StyledDropdownItemDescription}`]: {
-            transition: 'none'
-          }
-        }
-      }
+            transition: "none",
+          },
+        },
+      },
     },
     compoundVariants: [
       // !disableAnimation && isPressed
@@ -302,113 +302,111 @@ export const StyledDropdownItem = styled(
         isPressed: true,
         disableAnimation: false,
         css: {
-          transform: 'scale($$dropdownItemPressedScale)'
-        }
+          transform: "scale($$dropdownItemPressedScale)",
+        },
       },
 
       // isHovered & variant === 'light'
       {
         isHovered: true,
-        variant: 'light',
+        variant: "light",
         css: {
-          bg: 'transparent'
-        }
+          bg: "transparent",
+        },
       },
       // isFocused & variant === 'light'
       {
         isFocused: true,
-        variant: 'light',
+        variant: "light",
         css: {
-          bg: 'transparent'
-        }
+          bg: "transparent",
+        },
       },
       // isHovered && variant === 'solid'
       {
         isHovered: true,
-        variant: 'solid',
+        variant: "solid",
         css: {
-          bg: '$$dropdownItemSolidHoverBackground',
-          color: '$$dropdownItemSolidHoverTextColor',
+          bg: "$$dropdownItemSolidHoverBackground",
+          color: "$$dropdownItemSolidHoverTextColor",
           [`& ${StyledDropdownItemKbd}`]: {
-            color: '$$dropdownItemSolidHoverTextColor'
-          }
-        }
+            color: "$$dropdownItemSolidHoverTextColor",
+          },
+        },
       },
       // isFocused && variant === 'solid'
       {
         isFocused: true,
-        variant: 'solid',
+        variant: "solid",
         css: {
-          bg: '$$dropdownItemSolidHoverBackground',
-          color: '$$dropdownItemSolidHoverTextColor',
+          bg: "$$dropdownItemSolidHoverBackground",
+          color: "$$dropdownItemSolidHoverTextColor",
           [`& ${StyledDropdownItemKbd}`]: {
-            color: '$$dropdownItemSolidHoverTextColor'
-          }
-        }
+            color: "$$dropdownItemSolidHoverTextColor",
+          },
+        },
       },
       // isHovered && variant === 'shadow'
       {
         isHovered: true,
-        variant: 'shadow',
+        variant: "shadow",
         css: {
-          bg: '$$dropdownItemSolidHoverBackground',
-          color: '$$dropdownItemSolidHoverTextColor',
+          bg: "$$dropdownItemSolidHoverBackground",
+          color: "$$dropdownItemSolidHoverTextColor",
           boxShadow: `0 3px 10px 0 $$dropdownItemShadow`,
           [`& ${StyledDropdownItemKbd}`]: {
-            color: '$$dropdownItemSolidHoverTextColor'
-          }
-        }
+            color: "$$dropdownItemSolidHoverTextColor",
+          },
+        },
       },
       // isFocused && variant === 'shadow'
       {
         isFocused: true,
-        variant: 'shadow',
+        variant: "shadow",
         css: {
-          bg: '$$dropdownItemSolidHoverBackground',
-          color: '$$dropdownItemSolidHoverTextColor',
+          bg: "$$dropdownItemSolidHoverBackground",
+          color: "$$dropdownItemSolidHoverTextColor",
           boxShadow: `0 3px 10px 0 $$dropdownItemShadow`,
           [`& ${StyledDropdownItemKbd}`]: {
-            color: '$$dropdownItemSolidHoverTextColor'
-          }
-        }
+            color: "$$dropdownItemSolidHoverTextColor",
+          },
+        },
       },
       // variant === 'flat' && color === 'default'
       {
-        variant: 'flat',
-        color: 'default',
+        variant: "flat",
+        color: "default",
         css: {
-          $$dropdownItemHoverTextColor: '$colors$foreground'
-        }
-      }
+          $$dropdownItemHoverTextColor: "$colors$foreground",
+        },
+      },
     ],
     defaultVariants: {
-      color: 'default',
-      textColor: 'default',
-      dividerWeight: 'light',
-      variant: 'flat'
-    }
+      color: "default",
+      textColor: "default",
+      dividerWeight: "light",
+      variant: "flat",
+    },
   },
-  cssFocusVisible
+  cssFocusVisible,
 );
 
-export const StyledDropdownSectionWrapper = styled('li', {
-  mb: 0
+export const StyledDropdownSectionWrapper = styled("li", {
+  mb: 0,
 });
 
-export const StyledDropdownSection = styled('ul', {
+export const StyledDropdownSection = styled("ul", {
   m: 0,
   p: 0,
-  listStyle: 'none'
+  listStyle: "none",
 });
 
-export const StyledDropdownSectionTitle = styled('span', {
-  fontWeight: '$medium',
-  fontSize: '$xs',
-  padding: '0 $4',
-  color: '$accents8'
+export const StyledDropdownSectionTitle = styled("span", {
+  fontWeight: "$medium",
+  fontSize: "$xs",
+  padding: "0 $4",
+  color: "$accents8",
 });
 
 export type DropdownItemVariantsProps = VariantProps<typeof StyledDropdownItem>;
-export type StyledDropdownItemDescriptionProps = VariantProps<
-  typeof StyledDropdownItemDescription
->;
+export type StyledDropdownItemDescriptionProps = VariantProps<typeof StyledDropdownItemDescription>;
diff --git a/packages/react/src/dropdown/dropdown.tsx b/packages/react/src/dropdown/dropdown.tsx
index f58a65fbd9..5299003f59 100644
--- a/packages/react/src/dropdown/dropdown.tsx
+++ b/packages/react/src/dropdown/dropdown.tsx
@@ -1,13 +1,15 @@
-import React, { ReactNode } from 'react';
-import { Section } from '@react-stately/collections';
-import DropdownItemBase from './base/dropdown-item-base';
-import Popover from '../popover';
-import { DropdownProvider } from './dropdown-context';
-import DropdownTrigger from './dropdown-trigger';
-import DropdownMenu from './dropdown-menu';
-import DropdownButton from './dropdown-button';
-import { useDropdown, UseDropdownProps } from './use-dropdown';
-import { __DEV__ } from '../utils/assertion';
+import React, {ReactNode} from "react";
+import {Section} from "@react-stately/collections";
+
+import Popover from "../popover";
+import {__DEV__} from "../utils/assertion";
+
+import DropdownItemBase from "./base/dropdown-item-base";
+import {DropdownProvider} from "./dropdown-context";
+import DropdownTrigger from "./dropdown-trigger";
+import DropdownMenu from "./dropdown-menu";
+import DropdownButton from "./dropdown-button";
+import {useDropdown, UseDropdownProps} from "./use-dropdown";
 
 interface Props extends UseDropdownProps {
   /**
@@ -20,7 +22,7 @@ interface Props extends UseDropdownProps {
 export type DropdownProps = Props;
 
 const Dropdown = (props: DropdownProps) => {
-  const { children, ...otherProps } = props;
+  const {children, ...otherProps} = props;
 
   const context = useDropdown(otherProps);
 
@@ -31,12 +33,12 @@ const Dropdown = (props: DropdownProps) => {
       <Popover
         ref={context.menuPopoverRef}
         {...context.popoverProps}
-        triggerRef={context.menuTriggerRef}
-        scrollRef={context.menuRef}
-        isOpen={context.state.isOpen}
-        onClose={context.state.close}
         borderWeight={context.borderWeight}
         disableAnimation={context.disableAnimation}
+        isOpen={context.state.isOpen}
+        scrollRef={context.menuRef}
+        triggerRef={context.menuTriggerRef}
+        onClose={context.state.close}
       >
         {menuTrigger}
         <Popover.Content>{menu}</Popover.Content>
@@ -46,7 +48,7 @@ const Dropdown = (props: DropdownProps) => {
 };
 
 if (__DEV__) {
-  Dropdown.displayName = 'NextUI.Dropdown';
+  Dropdown.displayName = "NextUI.Dropdown";
 }
 
 type DropdownComponent<P = {}> = React.FC<P> & {
@@ -57,6 +59,6 @@ type DropdownComponent<P = {}> = React.FC<P> & {
   Section: typeof Section;
 };
 
-Dropdown.toString = () => '.nextui-dropdown';
+Dropdown.toString = () => ".nextui-dropdown";
 
 export default Dropdown as DropdownComponent<DropdownProps>;
diff --git a/packages/react/src/dropdown/index.ts b/packages/react/src/dropdown/index.ts
index 92aa163df8..36e61be984 100644
--- a/packages/react/src/dropdown/index.ts
+++ b/packages/react/src/dropdown/index.ts
@@ -1,9 +1,10 @@
-import { Section } from '@react-stately/collections';
-import DropdownItemBase from './base/dropdown-item-base';
-import DropdownTrigger from './dropdown-trigger';
-import DropdownMenu from './dropdown-menu';
-import DropdownButton from './dropdown-button';
-import Dropdown from './dropdown';
+import {Section} from "@react-stately/collections";
+
+import DropdownItemBase from "./base/dropdown-item-base";
+import DropdownTrigger from "./dropdown-trigger";
+import DropdownMenu from "./dropdown-menu";
+import DropdownButton from "./dropdown-button";
+import Dropdown from "./dropdown";
 
 Dropdown.Trigger = DropdownTrigger;
 Dropdown.Button = DropdownButton;
@@ -22,19 +23,19 @@ export {
   StyledDropdownItemDescription,
   StyledDropdownSectionWrapper,
   StyledDropdownSection,
-  StyledDropdownSectionTitle
-} from './dropdown.styles';
+  StyledDropdownSectionTitle,
+} from "./dropdown.styles";
 
 // export types
 export type {
   DropdownItemVariantsProps,
-  StyledDropdownItemDescriptionProps
-} from './dropdown.styles';
+  StyledDropdownItemDescriptionProps,
+} from "./dropdown.styles";
 
-export type { DropdownProps } from './dropdown';
-export type { DropdownMenuProps } from './dropdown-menu';
-export type { DropdownItemProps } from './dropdown-item';
-export type { DropdownButtonProps } from './dropdown-button';
-export type { DropdownSectionProps } from './dropdown-section';
+export type {DropdownProps} from "./dropdown";
+export type {DropdownMenuProps} from "./dropdown-menu";
+export type {DropdownItemProps} from "./dropdown-item";
+export type {DropdownButtonProps} from "./dropdown-button";
+export type {DropdownSectionProps} from "./dropdown-section";
 
 export default Dropdown;
diff --git a/packages/react/src/dropdown/use-dropdown.ts b/packages/react/src/dropdown/use-dropdown.ts
index e9e3e03ccd..a54c7bcfba 100644
--- a/packages/react/src/dropdown/use-dropdown.ts
+++ b/packages/react/src/dropdown/use-dropdown.ts
@@ -1,13 +1,14 @@
-import { useRef, useCallback } from 'react';
-import { mergeProps } from '@react-aria/utils';
-import { MenuTriggerType } from '@react-types/menu';
-import { useMenuTrigger } from '@react-aria/menu';
-import { useMenuTriggerState } from '@react-stately/menu';
-import { mergeRefs } from '../utils/refs';
-import { PopoverProps } from '../popover';
+import {useRef, useCallback} from "react";
+import {mergeProps} from "@react-aria/utils";
+import {MenuTriggerType} from "@react-types/menu";
+import {useMenuTrigger} from "@react-aria/menu";
+import {useMenuTriggerState} from "@react-stately/menu";
 
-export interface UseDropdownProps extends Omit<PopoverProps, 'children'> {
-  type?: 'menu' | 'listbox';
+import {mergeRefs} from "../utils/refs";
+import {PopoverProps} from "../popover";
+
+export interface UseDropdownProps extends Omit<PopoverProps, "children"> {
+  type?: "menu" | "listbox";
   /**
    * Whether menu trigger is disabled.
    * @default false
@@ -31,8 +32,8 @@ export interface UseDropdownProps extends Omit<PopoverProps, 'children'> {
 export function useDropdown(props: UseDropdownProps = {}) {
   const {
     triggerRef: triggerRefProp,
-    type = 'menu',
-    trigger = 'press',
+    type = "menu",
+    trigger = "press",
     isDisabled = false,
     borderWeight,
     closeOnSelect,
@@ -47,10 +48,10 @@ export function useDropdown(props: UseDropdownProps = {}) {
 
   const state = useMenuTriggerState(props);
 
-  const { menuTriggerProps, menuProps } = useMenuTrigger(
-    { type, trigger, isDisabled },
+  const {menuTriggerProps, menuProps} = useMenuTrigger(
+    {type, trigger, isDisabled},
     state,
-    menuTriggerRef
+    menuTriggerRef,
   );
 
   const getMenuTriggerProps = useCallback(
@@ -58,12 +59,13 @@ export function useDropdown(props: UseDropdownProps = {}) {
       const realTriggerProps = triggerRefProp?.current
         ? mergeProps(menuTriggerProps, props)
         : mergeProps(props, menuTriggerProps);
+
       return {
         ...realTriggerProps,
-        ref: mergeRefs(triggerRef, _ref)
+        ref: mergeRefs(triggerRef, _ref),
       };
     },
-    [triggerRef, triggerRefProp, menuTriggerProps]
+    [triggerRef, triggerRefProp, menuTriggerProps],
   );
 
   return {
@@ -79,7 +81,7 @@ export function useDropdown(props: UseDropdownProps = {}) {
     menuPopoverRef,
     menuTriggerRef,
     closeOnSelect,
-    getMenuTriggerProps
+    getMenuTriggerProps,
   };
 }
 
diff --git a/packages/react/src/grid/__tests__/index.test.tsx b/packages/react/src/grid/__tests__/index.test.tsx
index d42b4d4338..3a094434f9 100644
--- a/packages/react/src/grid/__tests__/index.test.tsx
+++ b/packages/react/src/grid/__tests__/index.test.tsx
@@ -1,67 +1,65 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Grid from '../index';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('Grid', () => {
-  it('should render correctly', () => {
+import Grid from "../index";
+
+describe("Grid", () => {
+  it("should render correctly", () => {
     const wrapper = mount(
       <Grid.Container>
         <Grid>test</Grid>
         <Grid>test</Grid>
-      </Grid.Container>
+      </Grid.Container>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('all breakpoint values should be supported', () => {
+  it("all breakpoint values should be supported", () => {
     const wrapper = mount(
-      <Grid.Container xs={1} sm={2} md={3} lg={4} xl={5}>
-        <Grid xs={1} sm={2} md={3} lg={4} xl={5}>
+      <Grid.Container lg={4} md={3} sm={2} xl={5} xs={1}>
+        <Grid lg={4} md={3} sm={2} xl={5} xs={1}>
           test
         </Grid>
-      </Grid.Container>
+      </Grid.Container>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('css value should be passed through', () => {
+  it("css value should be passed through", () => {
     const wrapper = mount(
       <Grid.Container
-        justify="center"
-        alignItems="center"
         alignContent="center"
+        alignItems="center"
         direction="column"
+        justify="center"
         wrap="wrap"
       >
-        <Grid
-          justify="center"
-          alignItems="center"
-          alignContent="center"
-          direction="column"
-        >
+        <Grid alignContent="center" alignItems="center" direction="column" justify="center">
           test
         </Grid>
-      </Grid.Container>
+      </Grid.Container>,
     );
 
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('decimal spacing should be supported', () => {
+  it("decimal spacing should be supported", () => {
     const wrapper = mount(
       <Grid.Container gap={0.11123}>
         <Grid>test</Grid>
-      </Grid.Container>
+      </Grid.Container>,
     );
 
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('nested components should be supported', () => {
+  it("nested components should be supported", () => {
     const wrapper = mount(
       <Grid.Container>
         <Grid>test</Grid>
@@ -77,37 +75,36 @@ describe('Grid', () => {
           ,
         </Grid.Container>
         ,
-      </Grid.Container>
+      </Grid.Container>,
     );
 
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('there should be no responsive class when not set', () => {
+  it("there should be no responsive class when not set", () => {
     let wrapper = mount(<Grid.Container sm={2} />);
-    expect(wrapper.find('.nextui-grid-item').at(0).hasClass('sm')).toBeTruthy();
-    expect(
-      wrapper.find('.nextui-grid-item').at(0).hasClass('xs')
-    ).not.toBeTruthy();
+
+    expect(wrapper.find(".nextui-grid-item").at(0).hasClass("sm")).toBeTruthy();
+    expect(wrapper.find(".nextui-grid-item").at(0).hasClass("xs")).not.toBeTruthy();
     wrapper = mount(<Grid.Container />);
-    expect(
-      wrapper.find('.nextui-grid-item').at(0).hasClass('sm')
-    ).not.toBeTruthy();
+    expect(wrapper.find(".nextui-grid-item").at(0).hasClass("sm")).not.toBeTruthy();
   });
 
-  it('should work correctly when use alone', () => {
+  it("should work correctly when use alone", () => {
     const wrapper = mount(<Grid />);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work correctly when size exceeds', () => {
+  it("should work correctly when size exceeds", () => {
     const wrapper = mount(
       <Grid.Container>
         <Grid xs={13}>test</Grid>
         <Grid xs={-1}>test</Grid>
-      </Grid.Container>
+      </Grid.Container>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
diff --git a/packages/react/src/grid/grid-container.tsx b/packages/react/src/grid/grid-container.tsx
index 8490a84806..b9dd7c28de 100644
--- a/packages/react/src/grid/grid-container.tsx
+++ b/packages/react/src/grid/grid-container.tsx
@@ -1,9 +1,11 @@
-import React, { useMemo, RefAttributes, PropsWithoutRef } from 'react';
-import { CSS } from '../theme/stitches.config';
-import GridBasicItem, { GridItemProps } from './grid-item';
-import { Wrap } from '../utils/prop-types';
-import clsx from '../utils/clsx';
-import withDefaults from '../utils/with-defaults';
+import React, {useMemo, RefAttributes, PropsWithoutRef} from "react";
+
+import {CSS} from "../theme/stitches.config";
+import {Wrap} from "../utils/prop-types";
+import clsx from "../utils/clsx";
+import withDefaults from "../utils/with-defaults";
+
+import GridBasicItem, {GridItemProps} from "./grid-item";
 
 interface Props {
   gap?: number;
@@ -14,50 +16,47 @@ interface Props {
 
 const defaultProps = {
   gap: 0,
-  wrap: 'wrap' as Wrap,
-  className: ''
+  wrap: "wrap" as Wrap,
+  className: "",
 };
 
-export type GridContainerProps = Props &
-  Partial<typeof defaultProps> &
-  GridItemProps;
-
-const GridContainer = React.forwardRef<
-  HTMLDivElement,
-  React.PropsWithChildren<GridContainerProps>
->(({ gap, wrap, css, children, className, ...props }, ref) => {
-  const gapUnit = useMemo(() => {
-    return `calc(${gap} * $space$3)`;
-  }, [gap]);
-
-  return (
-    <GridBasicItem
-      ref={ref}
-      className={clsx('nextui-grid-container', className)}
-      css={{
-        $$gridGapUnit: gapUnit,
-        display: 'flex',
-        flexWrap: wrap,
-        boxSizing: 'border-box',
-        margin: 'calc(-1 * $$gridGapUnit)',
-        width: 'calc(100% + $$gridGapUnit * 2)',
-        ...(css as any)
-      }}
-      {...props}
-    >
-      {children}
-    </GridBasicItem>
-  );
-});
-
-GridContainer.displayName = 'NextUI.GridContainer';
-GridContainer.toString = () => '.nextui-grid-container';
+export type GridContainerProps = Props & Partial<typeof defaultProps> & GridItemProps;
+
+const GridContainer = React.forwardRef<HTMLDivElement, React.PropsWithChildren<GridContainerProps>>(
+  ({gap, wrap, css, children, className, ...props}, ref) => {
+    const gapUnit = useMemo(() => {
+      return `calc(${gap} * $space$3)`;
+    }, [gap]);
+
+    return (
+      <GridBasicItem
+        ref={ref}
+        className={clsx("nextui-grid-container", className)}
+        css={{
+          $$gridGapUnit: gapUnit,
+          display: "flex",
+          flexWrap: wrap,
+          boxSizing: "border-box",
+          margin: "calc(-1 * $$gridGapUnit)",
+          width: "calc(100% + $$gridGapUnit * 2)",
+          ...(css as any),
+        }}
+        {...props}
+      >
+        {children}
+      </GridBasicItem>
+    );
+  },
+);
+
+GridContainer.displayName = "NextUI.GridContainer";
+GridContainer.toString = () => ".nextui-grid-container";
 
 type GridContainerComponent<T, P = {}> = React.ForwardRefExoticComponent<
   PropsWithoutRef<P> & RefAttributes<T>
 >;
 
-export default withDefaults(
-  GridContainer,
-  defaultProps
-) as GridContainerComponent<HTMLDivElement, GridContainerProps>;
+export default withDefaults(GridContainer, defaultProps) as GridContainerComponent<
+  HTMLDivElement,
+  GridContainerProps
+>;
diff --git a/packages/react/src/grid/grid-item.tsx b/packages/react/src/grid/grid-item.tsx
index afb45a0a98..e09194fed1 100644
--- a/packages/react/src/grid/grid-item.tsx
+++ b/packages/react/src/grid/grid-item.tsx
@@ -1,15 +1,11 @@
-import React, { useMemo, RefAttributes, PropsWithoutRef } from 'react';
-import {
-  BreakpointsValue,
-  Justify,
-  Direction,
-  AlignItems,
-  AlignContent
-} from '../utils/prop-types';
-import { CSS } from '../theme/stitches.config';
-import { StyledGridItem, GridItemVariantProps } from './grid.styles';
-import clsx from '../utils/clsx';
-import withDefaults from '../utils/with-defaults';
+import React, {useMemo, RefAttributes, PropsWithoutRef} from "react";
+
+import {BreakpointsValue, Justify, Direction, AlignItems, AlignContent} from "../utils/prop-types";
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+import withDefaults from "../utils/with-defaults";
+
+import {StyledGridItem, GridItemVariantProps} from "./grid.styles";
 
 interface Props {
   xs?: BreakpointsValue;
@@ -32,7 +28,7 @@ const defaultProps = {
   md: false as BreakpointsValue,
   lg: false as BreakpointsValue,
   xl: false as BreakpointsValue,
-  className: ''
+  className: "",
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -43,29 +39,29 @@ export type GridItemProps = Props &
   GridItemVariantProps;
 
 const getItemLayout = (val?: BreakpointsValue): React.CSSProperties => {
-  const display = val === 0 ? 'none' : 'inherit';
-  if (typeof val === 'number') {
+  const display = val === 0 ? "none" : "inherit";
+
+  if (typeof val === "number") {
     const width = (100 / 12) * val;
-    const ratio = width > 100 ? '100%' : width < 0 ? '0' : `${width}%`;
+    const ratio = width > 100 ? "100%" : width < 0 ? "0" : `${width}%`;
+
     return {
       flexGrow: 0,
       display,
       maxWidth: ratio,
-      flexBasis: ratio
+      flexBasis: ratio,
     };
   }
+
   return {
     flexGrow: 1,
     display,
-    maxWidth: '100%',
-    flexBasis: '0'
+    maxWidth: "100%",
+    flexBasis: "0",
   };
 };
 
-const GridItem = React.forwardRef<
-  HTMLDivElement,
-  React.PropsWithChildren<GridItemProps>
->(
+const GridItem = React.forwardRef<HTMLDivElement, React.PropsWithChildren<GridItemProps>>(
   (
     {
       xs,
@@ -82,73 +78,74 @@ const GridItem = React.forwardRef<
       className,
       ...props
     },
-    ref
+    ref,
   ) => {
     const classes = useMemo(() => {
-      const breaks: { [key: string]: unknown } = {
+      const breaks: {[key: string]: unknown} = {
         xs,
         sm,
         md,
         lg,
-        xl
+        xl,
       };
       const classString = Object.keys(breaks).reduce((pre, name) => {
-        if (breaks[name] !== undefined && breaks[name] !== false)
-          return `${pre} ${name}`;
+        if (breaks[name] !== undefined && breaks[name] !== false) return `${pre} ${name}`;
+
         return pre;
-      }, '');
+      }, "");
+
       return classString.trim();
     }, [xs, sm, md, lg, xl]);
 
     return (
       <StyledGridItem
         ref={ref}
-        className={clsx('nextui-grid-item', classes, className)}
+        className={clsx("nextui-grid-item", classes, className)}
         css={{
           alignItems,
           alignContent,
           justifyContent: justify,
           flexDirection: direction,
-          '&.xs': {
-            ...getItemLayout(xs)
+          "&.xs": {
+            ...getItemLayout(xs),
           },
-          '@xsMax': {
-            '&.xs': {
-              ...getItemLayout(xs)
-            }
+          "@xsMax": {
+            "&.xs": {
+              ...getItemLayout(xs),
+            },
           },
-          '@sm': {
-            '&.sm': {
-              ...getItemLayout(sm)
-            }
+          "@sm": {
+            "&.sm": {
+              ...getItemLayout(sm),
+            },
           },
-          '@md': {
-            '&.md': {
-              ...getItemLayout(md)
-            }
+          "@md": {
+            "&.md": {
+              ...getItemLayout(md),
+            },
           },
-          '@lg': {
-            '&.lg': {
-              ...getItemLayout(lg)
-            }
+          "@lg": {
+            "&.lg": {
+              ...getItemLayout(lg),
+            },
           },
-          '@xl': {
-            '&.xl': {
-              ...getItemLayout(xl)
-            }
+          "@xl": {
+            "&.xl": {
+              ...getItemLayout(xl),
+            },
           },
-          ...(css as any)
+          ...(css as any),
         }}
         {...props}
       >
         {children}
       </StyledGridItem>
     );
-  }
+  },
 );
 
-GridItem.displayName = 'NextUI.GridItem';
-GridItem.toString = () => '.nextui-grid-item';
+GridItem.displayName = "NextUI.GridItem";
+GridItem.toString = () => ".nextui-grid-item";
 
 type GridItemComponent<T, P = {}> = React.ForwardRefExoticComponent<
   PropsWithoutRef<P> & RefAttributes<T>
diff --git a/packages/react/src/grid/grid.stories.tsx b/packages/react/src/grid/grid.stories.tsx
index ebf2665b2e..e2a6fd0e3a 100644
--- a/packages/react/src/grid/grid.stories.tsx
+++ b/packages/react/src/grid/grid.stories.tsx
@@ -1,31 +1,31 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Grid from './index';
-import { Card, Spacer } from '../index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Card, Spacer} from "../index";
+
+import Grid from "./index";
 
 export default {
-  title: 'Layout/Grid',
-  component: Grid
+  title: "Layout/Grid",
+  component: Grid,
 } as Meta;
 
 const MockItem = () => {
-  return (
-    <Card color="primary" shadow style={{ width: '100%', height: '100px' }} />
-  );
+  return <Card shadow color="primary" style={{width: "100%", height: "100px"}} />;
 };
 
 export const Default = () => (
   <Grid.Container gap={2} justify="center">
-    <Grid xs={6} sm={3}>
+    <Grid sm={3} xs={6}>
       <MockItem />
     </Grid>
-    <Grid xs={6} sm={3}>
+    <Grid sm={3} xs={6}>
       <MockItem />
     </Grid>
-    <Grid xs={6} sm={3}>
+    <Grid sm={3} xs={6}>
       <MockItem />
     </Grid>
-    <Grid xs={6} sm={3}>
+    <Grid sm={3} xs={6}>
       <MockItem />
     </Grid>
   </Grid.Container>
@@ -68,19 +68,19 @@ export const Fluid = () => (
 
 export const Responsive = () => (
   <Grid.Container gap={2} justify="center">
-    <Grid xs={12} md={6}>
+    <Grid md={6} xs={12}>
       <MockItem />
     </Grid>
-    <Grid xs={12} md={6}>
+    <Grid md={6} xs={12}>
       <MockItem />
     </Grid>
-    <Grid xs={6} md={3}>
+    <Grid md={3} xs={6}>
       <MockItem />
     </Grid>
-    <Grid xs={6} md={2}>
+    <Grid md={2} xs={6}>
       <MockItem />
     </Grid>
-    <Grid xs={6} md={3}>
+    <Grid md={3} xs={6}>
       <MockItem />
     </Grid>
   </Grid.Container>
@@ -88,10 +88,10 @@ export const Responsive = () => (
 
 export const HideElements = () => (
   <Grid.Container gap={2} justify="center">
-    <Grid xs={0} md={6}>
+    <Grid md={6} xs={0}>
       <MockItem />
     </Grid>
-    <Grid xs={0} md={6}>
+    <Grid md={6} xs={0}>
       <MockItem />
     </Grid>
     <Grid xs={12}>
diff --git a/packages/react/src/grid/grid.styles.ts b/packages/react/src/grid/grid.styles.ts
index 95a97b2c6f..bf3f161e01 100644
--- a/packages/react/src/grid/grid.styles.ts
+++ b/packages/react/src/grid/grid.styles.ts
@@ -1,14 +1,12 @@
-import { styled, VariantProps } from '../theme/stitches.config';
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledGridContainer = styled('div', {});
+export const StyledGridContainer = styled("div", {});
 
-export const StyledGridItem = styled('div', {
+export const StyledGridItem = styled("div", {
   margin: 0,
-  boxSizing: 'border-box',
-  padding: '$$gridGapUnit'
+  boxSizing: "border-box",
+  padding: "$$gridGapUnit",
 });
 
-export type GridContainerVariantProps = VariantProps<
-  typeof StyledGridContainer
->;
+export type GridContainerVariantProps = VariantProps<typeof StyledGridContainer>;
 export type GridItemVariantProps = VariantProps<typeof StyledGridItem>;
diff --git a/packages/react/src/grid/grid.tsx b/packages/react/src/grid/grid.tsx
index 2d5032bdc9..2e9292de50 100644
--- a/packages/react/src/grid/grid.tsx
+++ b/packages/react/src/grid/grid.tsx
@@ -1,22 +1,22 @@
-import React, { RefAttributes, PropsWithoutRef } from 'react';
-import GridContainer from './grid-container';
-import GridBasicItem, { GridItemProps } from './grid-item';
+import React, {RefAttributes, PropsWithoutRef} from "react";
+
+import GridContainer from "./grid-container";
+import GridBasicItem, {GridItemProps} from "./grid-item";
 
 export type GridProps = GridItemProps;
 
-const Grid = React.forwardRef<
-  HTMLDivElement,
-  React.PropsWithChildren<GridProps>
->(({ children, css, ...props }, ref) => {
-  return (
-    <GridBasicItem ref={ref} css={{ ...(css as any) }} {...props}>
-      {children}
-    </GridBasicItem>
-  );
-});
+const Grid = React.forwardRef<HTMLDivElement, React.PropsWithChildren<GridProps>>(
+  ({children, css, ...props}, ref) => {
+    return (
+      <GridBasicItem ref={ref} css={{...(css as any)}} {...props}>
+        {children}
+      </GridBasicItem>
+    );
+  },
+);
 
-Grid.displayName = 'NextUI.Grid';
-Grid.toString = () => '.nextui-grid';
+Grid.displayName = "NextUI.Grid";
+Grid.toString = () => ".nextui-grid";
 
 type GridComponent<T, P = {}> = React.ForwardRefExoticComponent<
   PropsWithoutRef<P> & RefAttributes<T>
diff --git a/packages/react/src/grid/index.ts b/packages/react/src/grid/index.ts
index f1990d1945..47b65aa6dc 100644
--- a/packages/react/src/grid/index.ts
+++ b/packages/react/src/grid/index.ts
@@ -1,15 +1,12 @@
-import Grid from './grid';
-import GridContainer from './grid-container';
+import Grid from "./grid";
+import GridContainer from "./grid-container";
 
-export type { GridItemProps } from './grid-item';
-export type { GridProps } from './grid';
-export type { GridContainerProps } from './grid-container';
+export type {GridItemProps} from "./grid-item";
+export type {GridProps} from "./grid";
+export type {GridContainerProps} from "./grid-container";
 
-export { StyledGridContainer, StyledGridItem } from './grid.styles';
-export type {
-  GridContainerVariantProps,
-  GridItemVariantProps
-} from './grid.styles';
+export {StyledGridContainer, StyledGridItem} from "./grid.styles";
+export type {GridContainerVariantProps, GridItemVariantProps} from "./grid.styles";
 
 Grid.Container = GridContainer;
 
diff --git a/packages/react/src/image/__tests__/index.test.tsx b/packages/react/src/image/__tests__/index.test.tsx
index d4f68b2fc5..4a1cde7b95 100644
--- a/packages/react/src/image/__tests__/index.test.tsx
+++ b/packages/react/src/image/__tests__/index.test.tsx
@@ -1,79 +1,72 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Image from '../index';
-import { updateWrapper } from '../../../tests/utils';
+import React from "react";
+import {mount} from "enzyme";
+
+import Image from "../index";
+import {updateWrapper} from "../../../tests/utils";
 
 const url =
-  'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA' +
-  'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +
-  '9TXL0Y4OHwAAAABJRU5ErkJggg==';
+  "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA" +
+  "AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO" +
+  "9TXL0Y4OHwAAAABJRU5ErkJggg==";
 
-describe('Image', () => {
-  it('should render correctly', async () => {
+describe("Image", () => {
+  it("should render correctly", async () => {
     let wrapper = mount(<Image src={url} />);
+
     expect(wrapper).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
 
-    wrapper = mount(<Image src={url} width={20} height={20} />);
-    wrapper.find('img').at(0).simulate('load');
+    wrapper = mount(<Image height={20} src={url} width={20} />);
+    wrapper.find("img").at(0).simulate("load");
     expect(wrapper).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
 
-    wrapper = mount(
-      <Image src={url} width={20} height={20} showSkeleton={false} />
-    );
-    wrapper.find('img').at(0).simulate('load');
+    wrapper = mount(<Image height={20} showSkeleton={false} src={url} width={20} />);
+    wrapper.find("img").at(0).simulate("load");
     expect(wrapper).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work correctly with skeleton', async () => {
-    let wrapper = mount(<Image src={url} width={20} height={20} />);
-    expect(wrapper.find('.nextui-image-skeleton').at(0).length).not.toBe(0);
+  it("should work correctly with skeleton", async () => {
+    let wrapper = mount(<Image height={20} src={url} width={20} />);
+
+    expect(wrapper.find(".nextui-image-skeleton").at(0).length).not.toBe(0);
 
-    wrapper = mount(<Image src={url} width={20} height={20} />);
-    wrapper.find('img').at(0).simulate('load');
+    wrapper = mount(<Image height={20} src={url} width={20} />);
+    wrapper.find("img").at(0).simulate("load");
     await updateWrapper(wrapper);
-    expect(wrapper.find('.nextui-image-skeleton').at(0).length).not.toBe(0);
+    expect(wrapper.find(".nextui-image-skeleton").at(0).length).not.toBe(0);
 
-    wrapper = mount(
-      <Image src={url} width={20} height={20} showSkeleton={false} />
-    );
-    expect(wrapper.find('.nextui-image-skeleton').length).toBe(0);
+    wrapper = mount(<Image height={20} showSkeleton={false} src={url} width={20} />);
+    expect(wrapper.find(".nextui-image-skeleton").length).toBe(0);
   });
 
-  it('should remove skeleton when timeout', async () => {
-    const animation = mount(
-      <Image src={url} width={20} height={20} maxDelay={100} />
-    );
+  it("should remove skeleton when timeout", async () => {
+    const animation = mount(<Image height={20} maxDelay={100} src={url} width={20} />);
     const NoAnimation = mount(
-      <Image
-        src={url}
-        width={20}
-        height={20}
-        maxDelay={100}
-        showSkeleton={false}
-      />
+      <Image height={20} maxDelay={100} showSkeleton={false} src={url} width={20} />,
     );
-    expect(animation.find('.nextui-image-skeleton').length).not.toBe(0);
+
+    expect(animation.find(".nextui-image-skeleton").length).not.toBe(0);
     await updateWrapper(animation, 300);
     await updateWrapper(NoAnimation, 300);
-    expect(animation.find('.nextui-image-skeleton').length).toBe(0);
-    expect(NoAnimation.find('.nextui-image-skeleton').length).toBe(0);
+    expect(animation.find(".nextui-image-skeleton").length).toBe(0);
+    expect(NoAnimation.find(".nextui-image-skeleton").length).toBe(0);
   });
 
-  it('should remove skeleton when image completed', async () => {
+  it("should remove skeleton when image completed", async () => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Object.defineProperty((global as any).Image.prototype, 'complete', {
+    Object.defineProperty((global as any).Image.prototype, "complete", {
       get() {
         return true;
-      }
+      },
     });
-    const wrapper = mount(<Image src={url} width={20} height={20} />);
-    const img = wrapper.find('img').at(0);
-    img.simulate('load');
+    const wrapper = mount(<Image height={20} src={url} width={20} />);
+    const img = wrapper.find("img").at(0);
+
+    img.simulate("load");
     await updateWrapper(wrapper);
     expect((img.getDOMNode() as HTMLImageElement).complete).toEqual(true);
-    expect(wrapper.find('.nextui-image-skeleton').length).toBe(0);
+    expect(wrapper.find(".nextui-image-skeleton").length).toBe(0);
   });
 });
diff --git a/packages/react/src/image/image.skeleton.tsx b/packages/react/src/image/image.skeleton.tsx
index 646871636f..fce6b93a74 100644
--- a/packages/react/src/image/image.skeleton.tsx
+++ b/packages/react/src/image/image.skeleton.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
-import withDefaults from '../utils/with-defaults';
-import { CSS } from '../theme/stitches.config';
-import {
-  StyledImageSkeleton,
-  ImageSkeletonVariantsProps
-} from './image.styles';
-import clsx from '../utils/clsx';
-import { __DEV__ } from '../utils/assertion';
+import React from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+
+import {StyledImageSkeleton, ImageSkeletonVariantsProps} from "./image.styles";
 
 interface Props {
   opacity: number;
@@ -17,29 +16,27 @@ interface Props {
 
 const defaultProps = {
   opacity: 0.5,
-  className: ''
+  className: "",
 };
 
-export type ImageSkeletonProps = Props &
-  typeof defaultProps &
-  ImageSkeletonVariantsProps;
+export type ImageSkeletonProps = Props & typeof defaultProps & ImageSkeletonVariantsProps;
 
 const ImageSkeleton: React.FC<ImageSkeletonProps> = React.memo(
-  ({ opacity, css, className, ...props }) => {
+  ({opacity, css, className, ...props}) => {
     return (
       <StyledImageSkeleton
-        css={{ opacity, ...(css as any) }}
-        className={clsx('nextui-image-skeleton', className)}
+        className={clsx("nextui-image-skeleton", className)}
+        css={{opacity, ...(css as any)}}
         {...props}
       />
     );
-  }
+  },
 );
 
 if (__DEV__) {
-  ImageSkeleton.displayName = 'NextUI.ImageSkeleton';
+  ImageSkeleton.displayName = "NextUI.ImageSkeleton";
 }
 
-ImageSkeleton.toString = () => '.nextui-image-skeleton';
+ImageSkeleton.toString = () => ".nextui-image-skeleton";
 
 export default withDefaults(ImageSkeleton, defaultProps);
diff --git a/packages/react/src/image/image.stories.tsx b/packages/react/src/image/image.stories.tsx
index f2338779c3..6d55c98cdc 100644
--- a/packages/react/src/image/image.stories.tsx
+++ b/packages/react/src/image/image.stories.tsx
@@ -1,55 +1,42 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { Grid } from '../index';
-import Image from './index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Grid} from "../index";
+
+import Image from "./index";
 
 export default {
-  title: 'Display/Image',
+  title: "Display/Image",
   component: Image,
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: '100%' }}>
+      <div style={{maxWidth: "100%"}}>
         <Story />
       </div>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
 export const Default = () => (
   <Image
-    width={320}
-    height={180}
-    src="https://github.com/nextui-org/nextui/blob/next/apps/docs/public/nextui-banner.jpeg?raw=true"
     alt="Default Image"
+    height={180}
     objectFit="cover"
+    src="https://github.com/nextui-org/nextui/blob/next/apps/docs/public/nextui-banner.jpeg?raw=true"
+    width={320}
   />
 );
 
 export const Sizes = () => (
   <Grid.Container gap={2}>
     <Grid>
-      <Image
-        src="http://placehold.jp/50x50.png"
-        alt="Default Image"
-        width={50}
-        height={50}
-      />
+      <Image alt="Default Image" height={50} src="http://placehold.jp/50x50.png" width={50} />
     </Grid>
     <Grid>
-      <Image
-        src="http://placehold.jp/100x100.png"
-        alt="Default Image"
-        width={100}
-        height={100}
-      />
+      <Image alt="Default Image" height={100} src="http://placehold.jp/100x100.png" width={100} />
     </Grid>
     <Grid>
-      <Image
-        src="http://placehold.jp/150x150.png"
-        alt="Default Image"
-        width={150}
-        height={150}
-      />
+      <Image alt="Default Image" height={150} src="http://placehold.jp/150x150.png" width={150} />
     </Grid>
   </Grid.Container>
 );
@@ -57,11 +44,11 @@ export const Sizes = () => (
 export const Skeleton = () => (
   <Image
     showSkeleton
-    width={320}
+    alt="Default Image"
     height={180}
     maxDelay={5000}
     src="http://www.deelay.me/5000/https://github.com/nextui-org/nextui/blob/next/apps/docs/public/nextui-banner.jpeg?raw=true"
-    alt="Default Image"
+    width={320}
   />
 );
 
@@ -69,20 +56,20 @@ export const ObjectFit = () => (
   <Grid.Container gap={2}>
     <Grid>
       <Image
-        width={320}
+        alt="Default Image"
         height={180}
-        src="https://github.com/nextui-org/nextui/blob/next/apps/docs/public/nextui-banner.jpeg?raw=true"
         objectFit="contain"
-        alt="Default Image"
+        src="https://github.com/nextui-org/nextui/blob/next/apps/docs/public/nextui-banner.jpeg?raw=true"
+        width={320}
       />
     </Grid>
     <Grid>
       <Image
-        width={320}
+        alt="Default Image"
         height={180}
-        src="https://github.com/nextui-org/nextui/blob/next/apps/docs/public/nextui-banner.jpeg?raw=true"
         objectFit="cover"
-        alt="Default Image"
+        src="https://github.com/nextui-org/nextui/blob/next/apps/docs/public/nextui-banner.jpeg?raw=true"
+        width={320}
       />
     </Grid>
   </Grid.Container>
diff --git a/packages/react/src/image/image.styles.ts b/packages/react/src/image/image.styles.ts
index fbced76be8..2caf4c698d 100644
--- a/packages/react/src/image/image.styles.ts
+++ b/packages/react/src/image/image.styles.ts
@@ -1,60 +1,56 @@
-import { keyframes, styled, VariantProps } from '../theme/stitches.config';
+import {keyframes, styled, VariantProps} from "../theme/stitches.config";
 
 const loading = keyframes({
-  '0%': {
-    backgroundPosition: '200% 0'
+  "0%": {
+    backgroundPosition: "200% 0",
   },
   to: {
-    backgroundPosition: '-200% 0'
-  }
+    backgroundPosition: "-200% 0",
+  },
 });
 
-export const StyledImageContainer = styled('div', {
+export const StyledImageContainer = styled("div", {
   opacity: 0,
-  margin: '0 auto',
-  position: 'relative',
-  overflow: 'hidden',
-  maxWidth: '100%',
-  transition: 'transform 250ms ease 0ms, opacity 200ms ease-in 0ms',
-  '@motion': {
-    transition: 'none'
+  margin: "0 auto",
+  position: "relative",
+  overflow: "hidden",
+  maxWidth: "100%",
+  transition: "transform 250ms ease 0ms, opacity 200ms ease-in 0ms",
+  "@motion": {
+    transition: "none",
   },
   variants: {
     ready: {
       true: {
-        opacity: 1
+        opacity: 1,
       },
       false: {
-        opacity: 0
-      }
-    }
-  }
+        opacity: 0,
+      },
+    },
+  },
 });
 
-export const StyledImage = styled('img', {
-  size: '100%',
-  display: 'block'
+export const StyledImage = styled("img", {
+  size: "100%",
+  display: "block",
 });
 
-export const StyledImageSkeleton = styled('div', {
-  position: 'absolute',
+export const StyledImageSkeleton = styled("div", {
+  position: "absolute",
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  size: '100%',
-  borderRadius: 'inherit',
+  size: "100%",
+  borderRadius: "inherit",
   backgroundImage:
-    'linear-gradient(270deg, $colors$accents1, $colors$accents2, $colors$accents2, $colors$accents1)',
-  backgroundSize: '400% 100%',
+    "linear-gradient(270deg, $colors$accents1, $colors$accents2, $colors$accents2, $colors$accents1)",
+  backgroundSize: "400% 100%",
   animation: `${loading} 5s ease-in-out infinite`,
-  transition: 'opacity 300ms ease-out'
+  transition: "opacity 300ms ease-out",
 });
 
-export type ImageContainerVariantProps = VariantProps<
-  typeof StyledImageContainer
->;
+export type ImageContainerVariantProps = VariantProps<typeof StyledImageContainer>;
 export type ImageVariantsProps = VariantProps<typeof StyledImage>;
-export type ImageSkeletonVariantsProps = VariantProps<
-  typeof StyledImageSkeleton
->;
+export type ImageSkeletonVariantsProps = VariantProps<typeof StyledImageSkeleton>;
diff --git a/packages/react/src/image/image.tsx b/packages/react/src/image/image.tsx
index 64b81e6e3a..491657ac39 100644
--- a/packages/react/src/image/image.tsx
+++ b/packages/react/src/image/image.tsx
@@ -1,20 +1,19 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import type { PropsWithoutRef, RefAttributes } from 'react';
-import { ObjectFit } from '../utils/prop-types';
-import ImageSkeleton from './image.skeleton';
-import useRealShape from '../use-real-shape';
-import useCurrentState from '../use-current-state';
-import useResize from '../use-resize';
-import { ReactRef } from '../utils/refs';
-import { useDOMRef } from '../utils/dom';
-import { __DEV__ } from '../utils/assertion';
-import { CSS } from '../theme/stitches.config';
-import {
-  StyledImage,
-  StyledImageContainer,
-  ImageContainerVariantProps
-} from './image.styles';
-import clsx from '../utils/clsx';
+import type {PropsWithoutRef, RefAttributes} from "react";
+
+import React, {useEffect, useMemo, useState} from "react";
+
+import {ObjectFit} from "../utils/prop-types";
+import useRealShape from "../use-real-shape";
+import useCurrentState from "../use-current-state";
+import useResize from "../use-resize";
+import {ReactRef} from "../utils/refs";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+
+import {StyledImage, StyledImageContainer, ImageContainerVariantProps} from "./image.styles";
+import ImageSkeleton from "./image.skeleton";
 
 interface Props {
   src: string;
@@ -33,141 +32,129 @@ type NativeAttrs = Omit<React.ImgHTMLAttributes<unknown>, keyof Props>;
 
 export type ImageProps = Props & NativeAttrs & ImageContainerVariantProps;
 
-export const Image = React.forwardRef(
-  (props: ImageProps, ref: ReactRef<HTMLImageElement>) => {
-    const {
-      src,
-      width,
-      height,
-      showSkeleton: showSkeletonProp = true,
-      className,
-      maxDelay = 3000,
-      autoResize = false,
-      objectFit = 'scale-down',
-      containerCss,
-      css,
-      ...otherProps
-    } = props;
-
-    const imageRef = useDOMRef(ref);
-
-    const [loading, setLoading] = useState<boolean>(true);
-    const [showSkeleton, setShowSkeleton] = useState<boolean>(showSkeletonProp);
-
-    const { w, h } = useMemo(() => {
-      return {
-        w: width ? (typeof width === 'number' ? `${width}px` : width) : 'auto',
-        h: height
-          ? typeof height === 'number'
-            ? `${height}px`
-            : height
-          : 'auto'
-      };
-    }, [width, height]);
-
-    const [zoomHeight, setZoomHeight, zoomHeightRef] =
-      useCurrentState<string>(h);
-    const [shape, updateShape] = useRealShape(imageRef);
-
-    const showAnimation = showSkeletonProp && !!width && !!height;
-
-    const onImageLoaded = () => {
-      setLoading(false);
+export const Image = React.forwardRef((props: ImageProps, ref: ReactRef<HTMLImageElement>) => {
+  const {
+    src,
+    width,
+    height,
+    showSkeleton: showSkeletonProp = true,
+    className,
+    maxDelay = 3000,
+    autoResize = false,
+    objectFit = "scale-down",
+    containerCss,
+    css,
+    ...otherProps
+  } = props;
+
+  const imageRef = useDOMRef(ref);
+
+  const [loading, setLoading] = useState<boolean>(true);
+  const [showSkeleton, setShowSkeleton] = useState<boolean>(showSkeletonProp);
+
+  const {w, h} = useMemo(() => {
+    return {
+      w: width ? (typeof width === "number" ? `${width}px` : width) : "auto",
+      h: height ? (typeof height === "number" ? `${height}px` : height) : "auto",
     };
+  }, [width, height]);
+
+  const [zoomHeight, setZoomHeight, zoomHeightRef] = useCurrentState<string>(h);
+  const [shape, updateShape] = useRealShape(imageRef);
+
+  const showAnimation = showSkeletonProp && !!width && !!height;
+
+  const onImageLoaded = () => {
+    setLoading(false);
+  };
 
-    useEffect(() => {
-      if (!imageRef.current) return;
-      if (imageRef.current.complete) {
-        setLoading(false);
+  useEffect(() => {
+    if (!imageRef.current) return;
+    if (imageRef.current.complete) {
+      setLoading(false);
+      setShowSkeleton(false);
+    }
+  });
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (showAnimation) {
         setShowSkeleton(false);
       }
-    });
-
-    useEffect(() => {
-      const timer = setTimeout(() => {
-        if (showAnimation) {
-          setShowSkeleton(false);
-        }
-        clearTimeout(timer);
-      }, maxDelay);
-      return () => clearTimeout(timer);
-    }, [loading]);
-
-    /**
-     * On mobile devices, the render witdth may be less than CSS width value.
-     * If the image is scaled, set the height manually.
-     * This is to ensure the aspect ratio of the image.
-     *
-     * If the image is auto width, ignore all.
-     */
-    useEffect(() => {
-      if (!autoResize) return;
-      const notLoaded = shape.width === 0;
-      const isAutoZoom = zoomHeightRef.current === 'auto';
-      if (notLoaded || !width || !height) return;
-      if (shape.width < width) {
-        !isAutoZoom && setZoomHeight('auto');
-      } else {
-        isAutoZoom && setZoomHeight(h);
-      }
-    }, [shape, width]);
-
-    useResize(() => {
-      if (!autoResize) return;
-      updateShape();
-    });
-
-    const getState = useMemo(() => {
-      return loading ? 'loading' : 'ready';
-    }, [loading]);
-
-    return (
-      <StyledImageContainer
-        className={clsx(
-          'nextui-image-container',
-          `nextui-image--${getState}`,
-          className
-        )}
-        data-state={getState}
-        ready={!loading || showSkeleton}
+      clearTimeout(timer);
+    }, maxDelay);
+
+    return () => clearTimeout(timer);
+  }, [loading]);
+
+  /**
+   * On mobile devices, the render witdth may be less than CSS width value.
+   * If the image is scaled, set the height manually.
+   * This is to ensure the aspect ratio of the image.
+   *
+   * If the image is auto width, ignore all.
+   */
+  useEffect(() => {
+    if (!autoResize) return;
+    const notLoaded = shape.width === 0;
+    const isAutoZoom = zoomHeightRef.current === "auto";
+
+    if (notLoaded || !width || !height) return;
+    if (shape.width < width) {
+      !isAutoZoom && setZoomHeight("auto");
+    } else {
+      isAutoZoom && setZoomHeight(h);
+    }
+  }, [shape, width]);
+
+  useResize(() => {
+    if (!autoResize) return;
+    updateShape();
+  });
+
+  const getState = useMemo(() => {
+    return loading ? "loading" : "ready";
+  }, [loading]);
+
+  return (
+    <StyledImageContainer
+      className={clsx("nextui-image-container", `nextui-image--${getState}`, className)}
+      css={{
+        width: w,
+        height: zoomHeight,
+        ...(containerCss as any),
+      }}
+      data-state={getState}
+      ready={!loading || showSkeleton}
+    >
+      {showSkeleton && <ImageSkeleton opacity={1} />}
+      <StyledImage
+        ref={imageRef}
+        alt={props.alt || ""}
+        className="nextui-image"
         css={{
-          width: w,
-          height: zoomHeight,
-          ...(containerCss as any)
+          objectFit,
+          ...(css as any),
         }}
-      >
-        {showSkeleton && <ImageSkeleton opacity={1} />}
-        <StyledImage
-          ref={imageRef}
-          className="nextui-image"
-          width={width}
-          height={height}
-          onLoad={onImageLoaded}
-          src={src}
-          data-state={getState}
-          alt={props.alt || ''}
-          css={{
-            objectFit,
-            ...(css as any)
-          }}
-          {...otherProps}
-        />
-      </StyledImageContainer>
-    );
-  }
-);
+        data-state={getState}
+        height={height}
+        src={src}
+        width={width}
+        onLoad={onImageLoaded}
+        {...otherProps}
+      />
+    </StyledImageContainer>
+  );
+});
 
 if (__DEV__) {
-  Image.displayName = 'NextUI.Image';
+  Image.displayName = "NextUI.Image";
 }
 
-Image.toString = () => '.nextui-image';
+Image.toString = () => ".nextui-image";
 
 type MemoImageComponent<T, P = {}> = React.ForwardRefExoticComponent<
   PropsWithoutRef<P> & RefAttributes<T>
 >;
 
-export default React.memo(Image) as MemoImageComponent<
-  HTMLImageElement,
-  ImageProps
->;
+export default React.memo(Image) as MemoImageComponent<HTMLImageElement, ImageProps>;
diff --git a/packages/react/src/image/index.ts b/packages/react/src/image/index.ts
index a4f41800ae..868fb7567c 100644
--- a/packages/react/src/image/index.ts
+++ b/packages/react/src/image/index.ts
@@ -1,17 +1,13 @@
-import Image from './image';
+import Image from "./image";
 
-export type { ImageProps } from './image';
+export type {ImageProps} from "./image";
 
-export {
-  StyledImageContainer,
-  StyledImage,
-  StyledImageSkeleton
-} from './image.styles';
+export {StyledImageContainer, StyledImage, StyledImageSkeleton} from "./image.styles";
 
 export type {
   ImageContainerVariantProps,
   ImageVariantsProps,
-  ImageSkeletonVariantsProps
-} from './image.styles';
+  ImageSkeletonVariantsProps,
+} from "./image.styles";
 
 export default Image;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index f274f2edd4..f02bb517b4 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,49 +1,43 @@
 //Utils
-export * from './utils/prop-types';
+export * from "./utils/prop-types";
 
 // Hooks
-export { default as useCurrentState } from './use-current-state';
-export { default as useRealShape } from './use-real-shape';
-export { default as useResize } from './use-resize';
-export { default as useTheme } from './use-theme';
-export { default as usePortal } from './use-portal';
-export { default as useSSR } from './use-ssr';
-export { default as useBodyScroll } from './use-body-scroll';
-export type { BodyScrollOptions } from './use-body-scroll';
-export { default as useClickAway } from './use-click-away';
-export { default as useClipboard } from './use-clipboard';
-export type { UseClipboardOptions, UseClipboardResult } from './use-clipboard';
-export { default as useClickAnywhere } from './use-click-anywhere';
-export { default as useInput } from './use-input';
-export { default as useKeyboard } from './use-keyboard';
-export { default as usePagination } from './use-pagination';
-export { default as useDrip } from './use-drip';
-export { default as Drip } from './utils/drip';
-export type { PaginationParams } from './use-pagination';
+export {default as useCurrentState} from "./use-current-state";
+export {default as useRealShape} from "./use-real-shape";
+export {default as useResize} from "./use-resize";
+export {default as useTheme} from "./use-theme";
+export {default as usePortal} from "./use-portal";
+export {default as useSSR} from "./use-ssr";
+export {default as useBodyScroll} from "./use-body-scroll";
+export type {BodyScrollOptions} from "./use-body-scroll";
+export {default as useClickAway} from "./use-click-away";
+export {default as useClipboard} from "./use-clipboard";
+export type {UseClipboardOptions, UseClipboardResult} from "./use-clipboard";
+export {default as useClickAnywhere} from "./use-click-anywhere";
+export {default as useInput} from "./use-input";
+export {default as useKeyboard} from "./use-keyboard";
+export {default as usePagination} from "./use-pagination";
+export {default as useDrip} from "./use-drip";
+export {default as Drip} from "./utils/drip";
+export type {PaginationParams} from "./use-pagination";
 export type {
   UseKeyboardHandler,
   KeyboardOptions,
   KeyboardResult,
-  UseKeyboard
-} from './use-keyboard';
-export { KeyMod, KeyCode } from './use-keyboard/codes';
-export { default as CssBaseline } from './css-baseline';
+  UseKeyboard,
+} from "./use-keyboard";
+export {KeyMod, KeyCode} from "./use-keyboard/codes";
+export {default as CssBaseline} from "./css-baseline";
 
 // Third party
-export { useAsyncList } from '@react-stately/data';
-export { useCollator } from '@react-aria/i18n';
+export {useAsyncList} from "@react-stately/data";
+export {useCollator} from "@react-aria/i18n";
 
 //Theme
-export { default as NextUIProvider } from './theme/theme-provider';
-export { changeTheme, getDocumentTheme, getTokenValue } from './theme/utils';
-export type { VariantProps, CSS } from './theme/stitches.config';
-export type {
-  Theme,
-  NextUITheme,
-  ThemeType,
-  CreateTheme,
-  NextUIThemeContext
-} from './theme/types';
+export {default as NextUIProvider} from "./theme/theme-provider";
+export {changeTheme, getDocumentTheme, getTokenValue} from "./theme/utils";
+export type {VariantProps, CSS} from "./theme/stitches.config";
+export type {Theme, NextUITheme, ThemeType, CreateTheme, NextUIThemeContext} from "./theme/types";
 export {
   styled,
   css,
@@ -54,98 +48,98 @@ export {
   keyframes,
   config,
   config as stitchesConfig,
-  theme as defaultTheme
-} from './theme/stitches.config';
-export * from './theme/shared-css';
-export * from './theme/colors';
+  theme as defaultTheme,
+} from "./theme/stitches.config";
+export * from "./theme/shared-css";
+export * from "./theme/colors";
 
 // Components
-export { default as Avatar } from './avatar';
-export * from './avatar';
+export {default as Avatar} from "./avatar";
+export * from "./avatar";
 
-export { default as Button } from './button';
-export * from './button';
+export {default as Button} from "./button";
+export * from "./button";
 
-export { default as Card } from './card';
-export * from './card';
+export {default as Card} from "./card";
+export * from "./card";
 
-export { default as Checkbox } from './checkbox';
-export * from './checkbox';
+export {default as Checkbox} from "./checkbox";
+export * from "./checkbox";
 
-export { default as Code } from './code';
-export * from './code';
+export {default as Code} from "./code";
+export * from "./code";
 
-export { default as Col } from './col';
-export * from './col';
+export {default as Col} from "./col";
+export * from "./col";
 
-export { default as Collapse } from './collapse';
-export * from './collapse';
+export {default as Collapse} from "./collapse";
+export * from "./collapse";
 
-export { default as Container } from './container';
-export * from './container';
+export {default as Container} from "./container";
+export * from "./container";
 
-export { default as Divider } from './divider';
-export * from './divider';
+export {default as Divider} from "./divider";
+export * from "./divider";
 
-export { default as Grid } from './grid';
-export * from './grid';
+export {default as Grid} from "./grid";
+export * from "./grid";
 
-export { default as Image } from './image';
-export * from './image';
+export {default as Image} from "./image";
+export * from "./image";
 
-export { default as Spacer } from './spacer';
-export * from './spacer';
+export {default as Spacer} from "./spacer";
+export * from "./spacer";
 
-export { default as Snippet } from './snippet';
-export * from './snippet';
+export {default as Snippet} from "./snippet";
+export * from "./snippet";
 
-export { default as Row } from './row';
-export * from './row';
+export {default as Row} from "./row";
+export * from "./row";
 
-export { default as Link } from './link';
-export * from './link';
+export {default as Link} from "./link";
+export * from "./link";
 
-export { default as Loading } from './loading';
-export * from './loading';
+export {default as Loading} from "./loading";
+export * from "./loading";
 
-export { default as Radio } from './radio';
-export * from './radio';
+export {default as Radio} from "./radio";
+export * from "./radio";
 
-export { default as Text } from './text';
-export * from './text';
+export {default as Text} from "./text";
+export * from "./text";
 
-export { default as Switch } from './switch';
-export * from './switch';
+export {default as Switch} from "./switch";
+export * from "./switch";
 
-export { default as Backdrop } from './backdrop';
-export * from './backdrop';
+export {default as Backdrop} from "./backdrop";
+export * from "./backdrop";
 
-export { default as User } from './user';
-export * from './user';
+export {default as User} from "./user";
+export * from "./user";
 
-export { default as Progress } from './progress';
-export * from './progress';
+export {default as Progress} from "./progress";
+export * from "./progress";
 
-export { default as Modal } from './modal';
-export * from './modal';
-export { default as useModal } from './modal/use-modal';
+export {default as Modal} from "./modal";
+export * from "./modal";
+export {default as useModal} from "./modal/use-modal";
 
-export { default as Pagination } from './pagination';
-export * from './pagination';
+export {default as Pagination} from "./pagination";
+export * from "./pagination";
 
-export { default as Tooltip } from './tooltip';
-export * from './tooltip';
+export {default as Tooltip} from "./tooltip";
+export * from "./tooltip";
 
-export { default as Input } from './input';
-export * from './input';
+export {default as Input} from "./input";
+export * from "./input";
 
-export { default as Textarea } from './textarea';
+export {default as Textarea} from "./textarea";
 
-export { default as Table } from './table';
-export * from './table';
+export {default as Table} from "./table";
+export * from "./table";
 
-export { default as Popover } from './popover';
-export * from './popover';
+export {default as Popover} from "./popover";
+export * from "./popover";
 
-export { default as Dropdown } from './dropdown';
-export * from './dropdown';
+export {default as Dropdown} from "./dropdown";
+export * from "./dropdown";
diff --git a/packages/react/src/input/__tests__/index.test.tsx b/packages/react/src/input/__tests__/index.test.tsx
index c3c978df25..a5709485fb 100644
--- a/packages/react/src/input/__tests__/index.test.tsx
+++ b/packages/react/src/input/__tests__/index.test.tsx
@@ -1,15 +1,17 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { Input } from '../../index';
-import { nativeEvent } from '../../../tests/utils';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('Input', () => {
-  it('should render correctly', () => {
+import {Input} from "../../index";
+import {nativeEvent} from "../../../tests/utils";
+
+describe("Input", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Input placeholder="placeholder" />);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with different sizes', () => {
+  it("should work with different sizes", () => {
     const wrapper = mount(
       <div>
         <Input size="xs" />
@@ -17,162 +19,165 @@ describe('Input', () => {
         <Input size="lg" />
         <Input size="xl" />
         <Input width="50%" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('should work with different status', () => {
+  it("should work with different status", () => {
     const wrapper = mount(
       <div>
         <Input color="secondary" />
         <Input color="success" />
         <Input color="warning" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('should be work with label', () => {
+  it("should be work with label", () => {
     const wrapper = mount(
       <div>
         <Input label="label" />
         <Input labelRight="label" />
         <Input labelLeft="label" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
   });
-  it('should be work with content', () => {
+  it("should be work with content", () => {
     const wrapper = mount(
       <div>
         <Input contentLeft={<span>test-icon</span>} />
         <Input contentRight={<span>test-icon</span>} />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('should set input from value', () => {
+  it("should set input from value", () => {
     let wrapper = mount(<Input initialValue="test" />);
-    let input = wrapper.find('input').getDOMNode() as HTMLInputElement;
-    expect(input.value).toEqual('test');
+    let input = wrapper.find("input").getDOMNode() as HTMLInputElement;
+
+    expect(input.value).toEqual("test");
 
     wrapper = mount(<Input value="test2" />);
-    input = wrapper.find('input').getDOMNode() as HTMLInputElement;
-    expect(input.value).toEqual('test2');
+    input = wrapper.find("input").getDOMNode() as HTMLInputElement;
+    expect(input.value).toEqual("test2");
 
-    wrapper.setProps({ value: 'test3' });
-    input = wrapper.find('input').getDOMNode() as HTMLInputElement;
-    expect(input.value).toEqual('test3');
+    wrapper.setProps({value: "test3"});
+    input = wrapper.find("input").getDOMNode() as HTMLInputElement;
+    expect(input.value).toEqual("test3");
   });
 
-  it('should trigger event when input changed', () => {
-    let value = '';
+  it("should trigger event when input changed", () => {
+    let value = "";
     const callback = jest
       .fn()
-      .mockImplementation(
-        (e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value)
-      );
+      .mockImplementation((e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value));
     const wrapper = mount(<Input onChange={callback} />);
+
     wrapper
-      .find('input')
+      .find("input")
       .at(0)
-      .simulate('change', { target: { value: 'test' } });
+      .simulate("change", {target: {value: "test"}});
     expect(callback).toHaveBeenCalled();
-    expect(value).toEqual('test');
+    expect(value).toEqual("test");
   });
 
-  it('should ignore event when input disabled', () => {
+  it("should ignore event when input disabled", () => {
     const callback = jest.fn();
-    const wrapper = mount(<Input onChange={callback} disabled />);
+    const wrapper = mount(<Input disabled onChange={callback} />);
+
     wrapper
-      .find('input')
+      .find("input")
       .at(0)
-      .simulate('change', { target: { value: 'test' } });
+      .simulate("change", {target: {value: "test"}});
     expect(callback).not.toHaveBeenCalled();
   });
 
-  it('should ignore event when input readonly', () => {
+  it("should ignore event when input readonly", () => {
     const callback = jest.fn();
-    const wrapper = mount(<Input onChange={callback} readOnly />);
+    const wrapper = mount(<Input readOnly onChange={callback} />);
+
     wrapper
-      .find('input')
+      .find("input")
       .at(0)
-      .simulate('change', { target: { value: 'test' } });
+      .simulate("change", {target: {value: "test"}});
     expect(callback).not.toHaveBeenCalled();
   });
 
-  it('should clear text', () => {
-    let value = '';
+  it("should clear text", () => {
+    let value = "";
     const callback = jest
       .fn()
-      .mockImplementation(
-        (e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value)
-      );
+      .mockImplementation((e: React.ChangeEvent<HTMLInputElement>) => (value = e.target.value));
     const clearHandler = jest.fn();
-    const wrapper = mount(
-      <Input onChange={callback} clearable onClearClick={clearHandler} />
-    );
+    const wrapper = mount(<Input clearable onChange={callback} onClearClick={clearHandler} />);
 
     wrapper
-      .find('input')
+      .find("input")
       .at(0)
-      .simulate('change', { target: { value: 'test' } });
+      .simulate("change", {target: {value: "test"}});
     expect(callback).toHaveBeenCalled();
-    expect(value).toEqual('test');
+    expect(value).toEqual("test");
 
-    wrapper
-      .find('.nextui-input-clear-button')
-      .at(0)
-      .simulate('click', nativeEvent);
+    wrapper.find(".nextui-input-clear-button").at(0).simulate("click", nativeEvent);
     expect(clearHandler).toHaveBeenCalled();
-    expect(value).toEqual('');
+    expect(value).toEqual("");
   });
 
-  it('should trigger focus correctly', () => {
+  it("should trigger focus correctly", () => {
     const focus = jest.fn();
     const blur = jest.fn();
-    const wrapper = mount(<Input onFocus={focus} onBlur={blur} />);
+    const wrapper = mount(<Input onBlur={blur} onFocus={focus} />);
+
+    const input = wrapper.find("input").at(0);
 
-    const input = wrapper.find('input').at(0);
-    input.simulate('focus');
+    input.simulate("focus");
     expect(focus).toHaveBeenCalled();
-    input.simulate('blur');
+    input.simulate("blur");
     expect(blur).toHaveBeenCalled();
   });
 
-  it('should trigger content event', () => {
+  it("should trigger content event", () => {
     const click = jest.fn();
     const wrapper = mount(
       <Input
+        contentClickable
         contentLeft={<span id="test-icon">icon</span>}
         onContentClick={click}
-        contentClickable
-      />
+      />,
     );
-    wrapper.find('#test-icon').simulate('click', nativeEvent);
+
+    wrapper.find("#test-icon").simulate("click", nativeEvent);
     expect(click).toHaveBeenCalled();
   });
 
-  it('should ignore content event when input is disabled', () => {
+  it("should ignore content event when input is disabled", () => {
     const click = jest.fn();
     const wrapper = mount(
       <Input
-        contentLeft={<span id="test-icon">icon</span>}
-        onContentClick={click}
         contentClickable
         disabled
-      />
+        contentLeft={<span id="test-icon">icon</span>}
+        onContentClick={click}
+      />,
     );
-    wrapper.find('#test-icon').simulate('click', nativeEvent);
+
+    wrapper.find("#test-icon").simulate("click", nativeEvent);
     expect(click).not.toHaveBeenCalled();
   });
 
   // check ref is available: https://github.com/geist-org/react/issues/189
-  it('should forward ref by default', () => {
+  it("should forward ref by default", () => {
     const ref = React.createRef<HTMLInputElement>();
     const wrapper = mount(<Input ref={ref} />);
+
     expect(ref.current).not.toBeNull();
     expect(() => wrapper.unmount()).not.toThrow();
   });
diff --git a/packages/react/src/input/__tests__/password.test.tsx b/packages/react/src/input/__tests__/password.test.tsx
index f5830b7836..600ae62a8d 100644
--- a/packages/react/src/input/__tests__/password.test.tsx
+++ b/packages/react/src/input/__tests__/password.test.tsx
@@ -1,26 +1,31 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { Input } from '../../index';
-import { nativeEvent } from '../../../tests/utils';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('InputPassword', () => {
-  it('should render correctly', () => {
+import {Input} from "../../index";
+import {nativeEvent} from "../../../tests/utils";
+
+describe("InputPassword", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Input.Password />);
-    const el = wrapper.find('input').getDOMNode() as HTMLInputElement;
-    expect(el.type).toEqual('password');
+    const el = wrapper.find("input").getDOMNode() as HTMLInputElement;
+
+    expect(el.type).toEqual("password");
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should toggle input type', () => {
+  it("should toggle input type", () => {
     const wrapper = mount(<Input.Password />);
-    wrapper.find('.nextui-input-content').at(0).simulate('click', nativeEvent);
-    const el = wrapper.find('input').getDOMNode() as HTMLInputElement;
-    expect(el.type).toEqual('text');
+
+    wrapper.find(".nextui-input-content").at(0).simulate("click", nativeEvent);
+    const el = wrapper.find("input").getDOMNode() as HTMLInputElement;
+
+    expect(el.type).toEqual("text");
   });
 
-  it('should hide toggle icon', () => {
+  it("should hide toggle icon", () => {
     const wrapper = mount(<Input.Password hideToggle />);
-    expect(wrapper.find('.nextui-input-content').at(0).length).toBe(0);
+
+    expect(wrapper.find(".nextui-input-content").at(0).length).toBe(0);
   });
 });
diff --git a/packages/react/src/input/__tests__/use-input.test.tsx b/packages/react/src/input/__tests__/use-input.test.tsx
index 4c4a3ab4fa..cb3259d0c3 100644
--- a/packages/react/src/input/__tests__/use-input.test.tsx
+++ b/packages/react/src/input/__tests__/use-input.test.tsx
@@ -1,31 +1,33 @@
-import React, { useEffect } from 'react';
-import { mount } from 'enzyme';
-import { Input } from '../../index';
-import useInput from '../../use-input';
-
-describe('UseInput', () => {
-  it('should follow change with use-input', () => {
-    const MockInput: React.FC<{ value?: string; resetValue?: boolean }> = ({
-      value,
-      resetValue,
-    }) => {
-      const { reset, setValue, bindings } = useInput('');
+import React, {useEffect} from "react";
+import {mount} from "enzyme";
+
+import {Input} from "../../index";
+import useInput from "../../use-input";
+
+describe("UseInput", () => {
+  it("should follow change with use-input", () => {
+    const MockInput: React.FC<{value?: string; resetValue?: boolean}> = ({value, resetValue}) => {
+      const {reset, setValue, bindings} = useInput("");
+
       useEffect(() => {
         if (value) setValue(value);
       }, [value]);
       useEffect(() => {
         if (resetValue) reset();
       }, [resetValue]);
+
       return <Input {...bindings} />;
     };
 
     const wrapper = mount(<MockInput />);
-    wrapper.setProps({ value: 'test' });
-    let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement;
-    expect(input.value).toEqual('test');
 
-    wrapper.setProps({ resetValue: true });
-    input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement;
-    expect(input.value).toEqual('');
+    wrapper.setProps({value: "test"});
+    let input = wrapper.find("input").at(0).getDOMNode() as HTMLInputElement;
+
+    expect(input.value).toEqual("test");
+
+    wrapper.setProps({resetValue: true});
+    input = wrapper.find("input").at(0).getDOMNode() as HTMLInputElement;
+    expect(input.value).toEqual("");
   });
 });
diff --git a/packages/react/src/input/index.ts b/packages/react/src/input/index.ts
index 9809c2039c..78a3958dc8 100644
--- a/packages/react/src/input/index.ts
+++ b/packages/react/src/input/index.ts
@@ -1,11 +1,12 @@
-import Input from './input';
-import Textarea from '../textarea';
-import InputPassword from './input-password';
+import Textarea from "../textarea";
 
-export type { FormElement } from './input-props';
+import Input from "./input";
+import InputPassword from "./input-password";
 
-export type { InputProps } from './input';
-export type { InputPasswordProps } from './input-password';
+export type {FormElement} from "./input-props";
+
+export type {InputProps} from "./input";
+export type {InputPasswordProps} from "./input-password";
 
 export {
   StyledInputMainContainer,
@@ -18,15 +19,15 @@ export {
   StyledInputLabel,
   StyledInputContent,
   StyledInputClearButton,
-  StyledInput
-} from './input.styles';
+  StyledInput,
+} from "./input.styles";
 
 export type {
   InputVariantsProps,
   InputBlockLabelVariantsProps,
   InputLabelVariantsProps,
-  InputContentVariantsProps
-} from './input.styles';
+  InputContentVariantsProps,
+} from "./input.styles";
 
 Input.Textarea = Textarea;
 Input.Password = InputPassword;
diff --git a/packages/react/src/input/input-password.tsx b/packages/react/src/input/input-password.tsx
index 8b08e01e36..ba61e9eb85 100644
--- a/packages/react/src/input/input-password.tsx
+++ b/packages/react/src/input/input-password.tsx
@@ -1,11 +1,13 @@
-import React, { useImperativeHandle, useMemo, useRef, useState } from 'react';
-import withDefaults from '../utils/with-defaults';
-import { Props, defaultProps } from './input-props';
-import { CSS } from '../theme/stitches.config';
-import PasswordIcon from './password-icon';
-import Input from './input';
-import clsx from '../utils/clsx';
-import { __DEV__ } from '../utils/assertion';
+import React, {useImperativeHandle, useMemo, useRef, useState} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+
+import {Props, defaultProps} from "./input-props";
+import PasswordIcon from "./password-icon";
+import Input from "./input";
 
 interface PasswordProps extends Props {
   hideToggle?: boolean;
@@ -17,24 +19,25 @@ const passwordDefaultProps = {
   ...defaultProps,
   hideToggle: false,
   visibleIcon: <PasswordIcon visible />,
-  hiddenIcon: <PasswordIcon visible={false} />
+  hiddenIcon: <PasswordIcon visible={false} />,
 };
 
 type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof PasswordProps>;
 export type InputPasswordProps = PasswordProps &
   typeof passwordDefaultProps &
-  NativeAttrs & { css?: CSS };
+  NativeAttrs & {css?: CSS};
 
 const InputPassword = React.forwardRef<
   HTMLInputElement,
   React.PropsWithChildren<InputPasswordProps>
 >(
   (
-    { hideToggle, visibleIcon, hiddenIcon, children, ...props },
-    ref: React.Ref<HTMLInputElement | null>
+    {hideToggle, visibleIcon, hiddenIcon, children, ...props},
+    ref: React.Ref<HTMLInputElement | null>,
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const [visible, setVisible] = useState<boolean>(false);
+
     useImperativeHandle(ref, () => inputRef.current);
 
     const iconClickHandler = () => {
@@ -45,15 +48,16 @@ const InputPassword = React.forwardRef<
       () => ({
         ...props,
         ref: inputRef,
-        className: clsx('nextui-input-password', props.className),
+        className: clsx("nextui-input-password", props.className),
         contentClickable: true,
         onContentClick: iconClickHandler,
-        type: visible ? 'text' : 'password'
+        type: visible ? "text" : "password",
       }),
-      [props, iconClickHandler, visible, inputRef]
+      [props, iconClickHandler, visible, inputRef],
     );
     const icon = useMemo(() => {
       if (hideToggle) return null;
+
       return visible ? visibleIcon : hiddenIcon;
     }, [hideToggle, visible, visibleIcon, hiddenIcon]);
 
@@ -62,12 +66,13 @@ const InputPassword = React.forwardRef<
         {children}
       </Input>
     );
-  }
+  },
 );
+
 if (__DEV__) {
-  InputPassword.displayName = 'NextUI.InputPassword';
+  InputPassword.displayName = "NextUI.InputPassword";
 }
 
-InputPassword.toString = () => '.nextui-input-password';
+InputPassword.toString = () => ".nextui-input-password";
 
 export default withDefaults(InputPassword, passwordDefaultProps);
diff --git a/packages/react/src/input/input-props.ts b/packages/react/src/input/input-props.ts
index 7e7d70e58c..25c65aa16b 100644
--- a/packages/react/src/input/input-props.ts
+++ b/packages/react/src/input/input-props.ts
@@ -1,17 +1,16 @@
-import React from 'react';
+import React from "react";
+
 import {
   NormalSizes,
   SimpleColors,
   ContentPosition,
   NormalWeights,
-  AsProp
-} from '../utils/prop-types';
+  AsProp,
+} from "../utils/prop-types";
 
 export type FormElement = HTMLInputElement | HTMLTextAreaElement;
 
-export interface Props
-  extends AsProp<'input' | 'textarea'>,
-    React.HTMLAttributes<FormElement> {
+export interface Props extends AsProp<"input" | "textarea">, React.HTMLAttributes<FormElement> {
   value?: string | ReadonlyArray<string> | number;
   fullWidth?: boolean;
   initialValue?: string;
@@ -46,10 +45,7 @@ export interface Props
   onClearClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   onFocus?: (e: React.FocusEvent<FormElement>) => void;
   onBlur?: (e: React.FocusEvent<FormElement>) => void;
-  onContentClick?: (
-    key: ContentPosition,
-    e: React.MouseEvent<HTMLDivElement>
-  ) => void;
+  onContentClick?: (key: ContentPosition, e: React.MouseEvent<HTMLDivElement>) => void;
   autoComplete?: string;
 }
 
@@ -67,14 +63,14 @@ export const defaultProps = {
   contentRightStyling: true,
   contentLeftStyling: true,
   required: false,
-  width: 'initial',
-  size: 'md' as NormalSizes,
-  color: 'default' as SimpleColors,
-  helperColor: 'default' as SimpleColors,
-  status: 'default' as SimpleColors,
-  borderWeight: 'normal' as NormalWeights,
-  autoComplete: 'off',
-  className: '',
-  placeholder: '',
-  initialValue: ''
+  width: "initial",
+  size: "md" as NormalSizes,
+  color: "default" as SimpleColors,
+  helperColor: "default" as SimpleColors,
+  status: "default" as SimpleColors,
+  borderWeight: "normal" as NormalWeights,
+  autoComplete: "off",
+  className: "",
+  placeholder: "",
+  initialValue: "",
 };
diff --git a/packages/react/src/input/input.stories.tsx b/packages/react/src/input/input.stories.tsx
index 6337f927de..82dc950d3c 100644
--- a/packages/react/src/input/input.stories.tsx
+++ b/packages/react/src/input/input.stories.tsx
@@ -1,34 +1,28 @@
-import React, { useEffect, useMemo } from 'react';
-import { Meta } from '@storybook/react';
-import Input from './index';
-import useInput from '../use-input';
-import { Text, Spacer, Button, Grid } from '../index';
-import {
-  Lock,
-  Unlock,
-  User,
-  Activity,
-  Notification,
-  Sun,
-  Moon
-} from '../utils/icons';
-import useTheme from '../use-theme';
+import React, {useEffect, useMemo} from "react";
+import {Meta} from "@storybook/react";
+
+import useInput from "../use-input";
+import {Text, Spacer, Button, Grid} from "../index";
+import {Lock, Unlock, User, Activity, Notification, Sun, Moon} from "../utils/icons";
+import useTheme from "../use-theme";
+
+import Input from "./index";
 
 export default {
-  title: 'General/Input',
+  title: "General/Input",
   component: Input,
   decorators: [
     (Story) => (
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column'
+          display: "flex",
+          flexDirection: "column",
         }}
       >
         <Story />
       </div>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
 export const Default = () => <Input label="Name" placeholder="Next UI" />;
@@ -37,15 +31,16 @@ export const FullWidth = () => <Input placeholder="Next UI" width="100%" />;
 
 export const Password = () => {
   const theme = useTheme();
+
   return (
     <>
       <Spacer y={1} />
-      <Input.Password labelPlaceholder="Password" initialValue="nextui123" />
+      <Input.Password initialValue="nextui123" labelPlaceholder="Password" />
       <Spacer y={1.5} />
       <Input.Password
+        hiddenIcon={<Lock fill="currentColor" theme={theme} />}
         labelPlaceholder="Custom icon"
-        visibleIcon={<Unlock theme={theme} fill="currentColor" />}
-        hiddenIcon={<Lock theme={theme} fill="currentColor" />}
+        visibleIcon={<Unlock fill="currentColor" theme={theme} />}
       />
     </>
   );
@@ -53,44 +48,45 @@ export const Password = () => {
 
 export const WithIcons = () => {
   const theme = useTheme();
+
   return (
     <>
       <Spacer y={1} />
       <Input
         clearable
+        contentLeft={<User fill="currentColor" theme={theme} />}
         labelPlaceholder="Icon left"
-        contentLeft={<User theme={theme} fill="currentColor" />}
       />
       <Spacer y={1.5} />
       <Input
         clearable
+        contentRight={<Activity fill="currentColor" theme={theme} />}
         labelPlaceholder="Icon right"
-        contentRight={<Activity theme={theme} fill="currentColor" />}
       />
       <Spacer y={1.5} />
       <Input
         clearable
-        status="success"
+        contentRight={<Notification fill="currentColor" theme={theme} />}
         labelPlaceholder="Icon left"
-        contentRight={<Notification theme={theme} fill="currentColor" />}
+        status="success"
       />
       <Spacer y={1.5} />
       <Input
         clearable
         underlined
         color="warning"
-        status="warning"
+        contentRight={<Sun filled fill="currentColor" theme={theme} />}
         labelPlaceholder="Icon left"
-        contentRight={<Sun theme={theme} filled fill="currentColor" />}
+        status="warning"
       />
       <Spacer y={1.5} />
       <Input
-        clearable
         bordered
+        clearable
         color="secondary"
-        status="secondary"
+        contentRight={<Moon filled fill="currentColor" theme={theme} />}
         labelPlaceholder="Icon left"
-        contentRight={<Moon theme={theme} filled fill="currentColor" />}
+        status="secondary"
       />
     </>
   );
@@ -113,17 +109,17 @@ export const ReadOnly = () => (
 
 export const Sizes = () => (
   <>
-    <Input size="xs" placeholder="Mini" />
+    <Input placeholder="Mini" size="xs" />
     <Spacer y={0.5} />
-    <Input size="sm" placeholder="Small" />
+    <Input placeholder="Small" size="sm" />
     <Spacer y={0.5} />
-    <Input size="md" placeholder="Medium" />
+    <Input placeholder="Medium" size="md" />
     <Spacer y={0.5} />
-    <Input size="lg" placeholder="Large" />
+    <Input placeholder="Large" size="lg" />
     <Spacer y={0.5} />
-    <Input size="xl" placeholder="xLarge" />
+    <Input placeholder="xLarge" size="xl" />
     <Spacer y={0.5} />
-    <Input width="50%" placeholder="Custom" />
+    <Input placeholder="Custom" width="50%" />
   </>
 );
 
@@ -147,71 +143,66 @@ export const NoShadow = () => (
     <Spacer y={1.5} />
     <Input labelPlaceholder="Default" shadow={false} />
     <Spacer y={1.5} />
-    <Input labelPlaceholder="Primary" status="primary" shadow={false} />
+    <Input labelPlaceholder="Primary" shadow={false} status="primary" />
     <Spacer y={1.5} />
-    <Input labelPlaceholder="Secondary" status="secondary" shadow={false} />
+    <Input labelPlaceholder="Secondary" shadow={false} status="secondary" />
     <Spacer y={1.5} />
-    <Input labelPlaceholder="Success" status="success" shadow={false} />
+    <Input labelPlaceholder="Success" shadow={false} status="success" />
     <Spacer y={1.5} />
-    <Input labelPlaceholder="Warning" status="warning" shadow={false} />
+    <Input labelPlaceholder="Warning" shadow={false} status="warning" />
     <Spacer y={1.5} />
-    <Input labelPlaceholder="Error" status="error" shadow={false} />
+    <Input labelPlaceholder="Error" shadow={false} status="error" />
   </>
 );
 
 export const NoAnimated = () => (
   <>
     <Spacer y={1.5} />
-    <Input labelPlaceholder="Default" animated={false} />
+    <Input animated={false} labelPlaceholder="Default" />
     <Spacer y={1.5} />
-    <Input
-      underlined
-      labelPlaceholder="Primary"
-      animated={false}
-      color="primary"
-    />
+    <Input underlined animated={false} color="primary" labelPlaceholder="Primary" />
     <Spacer y={1.5} />
-    <Input labelPlaceholder="Secondary" status="secondary" animated={false} />
+    <Input animated={false} labelPlaceholder="Secondary" status="secondary" />
     <Spacer y={1.5} />
-    <Input labelPlaceholder="Success" status="success" animated={false} />
+    <Input animated={false} labelPlaceholder="Success" status="success" />
     <Spacer y={1.5} />
-    <Input labelPlaceholder="Warning" status="warning" animated={false} />
+    <Input animated={false} labelPlaceholder="Warning" status="warning" />
     <Spacer y={1.5} />
-    <Input labelPlaceholder="Error" status="error" animated={false} />
+    <Input animated={false} labelPlaceholder="Error" status="error" />
   </>
 );
 
 export const Bordered = () => (
   <>
     <Spacer y={1.5} />
-    <Input bordered labelPlaceholder="Default" color="default" />
+    <Input bordered color="default" labelPlaceholder="Default" />
     <Spacer y={1.5} />
-    <Input bordered labelPlaceholder="Primary" color="primary" />
+    <Input bordered color="primary" labelPlaceholder="Primary" />
     <Spacer y={1.5} />
-    <Input bordered labelPlaceholder="Secondary" color="secondary" />
+    <Input bordered color="secondary" labelPlaceholder="Secondary" />
     <Spacer y={1.5} />
-    <Input bordered labelPlaceholder="Success" color="success" />
+    <Input bordered color="success" labelPlaceholder="Success" />
     <Spacer y={1.5} />
-    <Input bordered labelPlaceholder="Warning" color="warning" />
+    <Input bordered color="warning" labelPlaceholder="Warning" />
     <Spacer y={1.5} />
-    <Input bordered labelPlaceholder="Error" color="error" />
+    <Input bordered color="error" labelPlaceholder="Error" />
   </>
 );
 
 export const Underlined = () => (
   <>
     <Spacer y={1.5} />
-    <Input underlined labelPlaceholder="Default" color="default" />
+    <Input underlined color="default" labelPlaceholder="Default" />
     <Spacer y={1.5} />
-    <Input underlined labelPlaceholder="Primary" color="primary" />
+    <Input underlined color="primary" labelPlaceholder="Primary" />
     <Spacer y={1.5} />
-    <Input underlined labelPlaceholder="Secondary" color="secondary" />
+    <Input underlined color="secondary" labelPlaceholder="Secondary" />
     <Spacer y={1.5} />
-    <Input underlined labelPlaceholder="Success" color="success" />
+    <Input underlined color="success" labelPlaceholder="Success" />
     <Spacer y={1.5} />
-    <Input underlined labelPlaceholder="Warning" color="warning" />
+    <Input underlined color="warning" labelPlaceholder="Warning" />
     <Spacer y={1.5} />
-    <Input underlined labelPlaceholder="Error" color="error" />
+    <Input underlined color="error" labelPlaceholder="Error" />
   </>
 );
 
@@ -260,59 +251,39 @@ export const WithLabels = () => (
   <>
     <Input label="Name" placeholder="Enter your name" />
     <Spacer y={1.5} />
-    <Input labelPlaceholder="Label placeholder" color="primary" />
+    <Input color="primary" labelPlaceholder="Label placeholder" />
     <Spacer y={1.5} />
     <Input labelLeft="username" placeholder="Next UI" />
     <Spacer y={1.5} />
-    <Input
-      status="error"
-      labelRight=".com"
-      placeholder="https://github/nextui-org/nextui"
-    />
-    <Spacer y={1.5} />
-    <Input
-      status="primary"
-      underlined
-      labelLeft="username"
-      placeholder="Next UI"
-    />
-    <Spacer y={1.5} />
-    <Input
-      bordered
-      labelRight=".com"
-      placeholder="https://github/nextui-org/nextui"
-    />
-    <Spacer y={1.5} />
-    <Input
-      bordered
-      labelLeft="https://"
-      placeholder="github/nextui-org/nextui"
-    />
-    <Spacer y={1.5} />
-    <Input
-      bordered
-      labelLeft="https://"
-      labelRight=".org"
-      placeholder="nextui"
-    />
+    <Input labelRight=".com" placeholder="https://github/nextui-org/nextui" status="error" />
+    <Spacer y={1.5} />
+    <Input underlined labelLeft="username" placeholder="Next UI" status="primary" />
+    <Spacer y={1.5} />
+    <Input bordered labelRight=".com" placeholder="https://github/nextui-org/nextui" />
+    <Spacer y={1.5} />
+    <Input bordered labelLeft="https://" placeholder="github/nextui-org/nextui" />
+    <Spacer y={1.5} />
+    <Input bordered labelLeft="https://" labelRight=".org" placeholder="nextui" />
   </>
 );
 
 export const WithHelperText = () => {
-  const { value, reset, bindings } = useInput('');
+  const {value, reset, bindings} = useInput("");
 
   const validateEmail = (value: string) => {
     return /^\w+([\\.-]?\w+)*@\w+([\\.-]?\w+)*(\.\w{2,3})+$/.test(value);
   };
 
   const helperText = useMemo(() => {
-    if (!value) return '';
-    return !validateEmail(value) ? 'Enter a valid email' : 'Correct email';
+    if (!value) return "";
+
+    return !validateEmail(value) ? "Enter a valid email" : "Correct email";
   }, [value]);
 
   const helperColor = useMemo(() => {
-    if (!value) return 'default';
-    return !validateEmail(value) ? 'error' : 'success';
+    if (!value) return "default";
+
+    return !validateEmail(value) ? "error" : "success";
   }, [value]);
 
   return (
@@ -320,14 +291,14 @@ export const WithHelperText = () => {
       <Input
         {...bindings}
         clearable
-        shadow={false}
-        onClearClick={reset}
-        helperText={helperText}
         helperColor={helperColor}
-        status={helperColor}
-        type="email"
+        helperText={helperText}
         label="Email"
         placeholder="With regex validation"
+        shadow={false}
+        status={helperColor}
+        type="email"
+        onClearClick={reset}
       />
       <Spacer y={1.4} />
       <Input
@@ -340,57 +311,59 @@ export const WithHelperText = () => {
       <Input
         clearable
         color="error"
-        label="Error"
-        status="error"
-        helperText="Required"
         helperColor="error"
+        helperText="Required"
+        label="Error"
         placeholder="Enter something"
+        status="error"
       />
       <Spacer y={1.4} />
       <Input
         clearable
         color="success"
-        initialValue="getnextui"
         helperText="Excelent username"
-        type="test"
+        initialValue="getnextui"
         label="Username"
         placeholder="Enter your username"
+        type="test"
       />
       <Spacer y={1.4} />
       <Input
         clearable
         color="error"
         helperText="Required"
-        type="email"
         label="Email"
         placeholder="Enter your email"
+        type="email"
       />
       <Spacer y={1.4} />
       <Input
         clearable
         color="warning"
         helperText="Insecure password"
-        type="password"
         label="Password"
         placeholder="Enter your password"
+        type="password"
       />
       <Spacer y={1.4} />
       <Input.Password
         clearable
         color="warning"
-        initialValue="123"
         helperText="Insecure password"
-        type="password"
+        initialValue="123"
         label="Password"
         placeholder="Enter your password with eye"
+        type="password"
       />
     </>
   );
 };
 
 export const WithUseInput = () => {
-  const { value, setValue, reset, bindings } = useInput('NextUI');
+  const {value, setValue, reset, bindings} = useInput("NextUI");
+
   useEffect(() => console.log(value), [value]);
+
   return (
     <>
       <Input {...bindings} />
@@ -421,14 +394,11 @@ export const Uncontrolled = () => {
   const onClick = () => {
     if (inputRef.current) inputRef.current.value = Math.random().toString(32);
   };
+
   return (
     <>
       <Text>Update component in an uncontrolled way.</Text>
-      <Input
-        ref={inputRef}
-        initialValue="Hello"
-        onChange={(e) => console.log(e.target.value)}
-      />
+      <Input ref={inputRef} initialValue="Hello" onChange={(e) => console.log(e.target.value)} />
       <Spacer y={0.5} />
       <Button auto color="secondary" size="sm" onClick={onClick}>
         Set value
diff --git a/packages/react/src/input/input.styles.ts b/packages/react/src/input/input.styles.ts
index 11d0a30bfd..e646e5acf3 100644
--- a/packages/react/src/input/input.styles.ts
+++ b/packages/react/src/input/input.styles.ts
@@ -1,200 +1,200 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import { sharedVisuallyHidden } from '../theme/shared-css';
+import {styled, VariantProps} from "../theme/stitches.config";
+import {sharedVisuallyHidden} from "../theme/shared-css";
 
 const baseInputValues = {
-  $$inputColor: '$colors$accents0',
-  $$inputTextColor: '$colors$text',
-  $$inputPlaceholderColor: '$colors$accents6',
-  $$inputShadow: '$shadows$sm',
-  $$inputBorderColor: '$colors$border',
-  $$inputHoverBorderColor: '$colors$foreground',
-  $$inputLabelColor: '$$inputHoverBorderColor'
+  $$inputColor: "$colors$accents0",
+  $$inputTextColor: "$colors$text",
+  $$inputPlaceholderColor: "$colors$accents6",
+  $$inputShadow: "$shadows$sm",
+  $$inputBorderColor: "$colors$border",
+  $$inputHoverBorderColor: "$colors$foreground",
+  $$inputLabelColor: "$$inputHoverBorderColor",
 };
 
-export const StyledInputMainContainer = styled('div', {
+export const StyledInputMainContainer = styled("div", {
   ...baseInputValues,
-  display: 'inline-flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  position: 'relative',
-  boxSizing: 'border-box',
-  WebkitBoxAlign: 'center',
+  display: "inline-flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  position: "relative",
+  boxSizing: "border-box",
+  WebkitBoxAlign: "center",
   variants: {
     color: {
       default: {},
       primary: {
-        $$inputHoverBorderColor: '$colors$primary',
-        $$inputLabelColor: '$colors$primary'
+        $$inputHoverBorderColor: "$colors$primary",
+        $$inputLabelColor: "$colors$primary",
       },
       secondary: {
-        $$inputHoverBorderColor: '$colors$secondary',
-        $$inputLabelColor: '$colors$secondary'
+        $$inputHoverBorderColor: "$colors$secondary",
+        $$inputLabelColor: "$colors$secondary",
       },
       success: {
-        $$inputHoverBorderColor: '$colors$success',
-        $$inputLabelColor: '$colors$success'
+        $$inputHoverBorderColor: "$colors$success",
+        $$inputLabelColor: "$colors$success",
       },
       warning: {
-        $$inputHoverBorderColor: '$colors$warning',
-        $$inputLabelColor: '$colors$warning'
+        $$inputHoverBorderColor: "$colors$warning",
+        $$inputLabelColor: "$colors$warning",
       },
       error: {
-        $$inputHoverBorderColor: '$colors$error',
-        $$inputLabelColor: '$colors$error'
-      }
+        $$inputHoverBorderColor: "$colors$error",
+        $$inputLabelColor: "$colors$error",
+      },
     },
     status: {
       default: {},
       primary: {
-        $$inputColor: '$colors$primaryLight',
-        $$inputPlaceholderColor: '$colors$primaryLightContrast',
-        $$inputTextColor: '$colors$primaryLightContrast',
-        $$inputLabelColor: '$$inputTextColor',
-        $$inputHoverBorderColor: '$colors$primary'
+        $$inputColor: "$colors$primaryLight",
+        $$inputPlaceholderColor: "$colors$primaryLightContrast",
+        $$inputTextColor: "$colors$primaryLightContrast",
+        $$inputLabelColor: "$$inputTextColor",
+        $$inputHoverBorderColor: "$colors$primary",
       },
       secondary: {
-        $$inputColor: '$colors$secondaryLight',
-        $$inputPlaceholderColor: '$colors$secondaryLightContrast',
-        $$inputTextColor: '$colors$secondaryLightContrast',
-        $$inputLabelColor: '$$inputTextColor',
-        $$inputHoverBorderColor: '$colors$secondary'
+        $$inputColor: "$colors$secondaryLight",
+        $$inputPlaceholderColor: "$colors$secondaryLightContrast",
+        $$inputTextColor: "$colors$secondaryLightContrast",
+        $$inputLabelColor: "$$inputTextColor",
+        $$inputHoverBorderColor: "$colors$secondary",
       },
       success: {
-        $$inputColor: '$colors$successLight',
-        $$inputPlaceholderColor: '$colors$successLightContrast',
-        $$inputTextColor: '$colors$successLightContrast',
-        $$inputLabelColor: '$$inputTextColor',
-        $$inputHoverBorderColor: '$colors$success'
+        $$inputColor: "$colors$successLight",
+        $$inputPlaceholderColor: "$colors$successLightContrast",
+        $$inputTextColor: "$colors$successLightContrast",
+        $$inputLabelColor: "$$inputTextColor",
+        $$inputHoverBorderColor: "$colors$success",
       },
       warning: {
-        $$inputColor: '$colors$warningLight',
-        $$inputPlaceholderColor: '$colors$warningLightContrast',
-        $$inputTextColor: '$colors$warningLightContrast',
-        $$inputLabelColor: '$$inputTextColor',
-        $$inputHoverBorderColor: '$colors$warning'
+        $$inputColor: "$colors$warningLight",
+        $$inputPlaceholderColor: "$colors$warningLightContrast",
+        $$inputTextColor: "$colors$warningLightContrast",
+        $$inputLabelColor: "$$inputTextColor",
+        $$inputHoverBorderColor: "$colors$warning",
       },
       error: {
-        $$inputColor: '$colors$errorLight',
-        $$inputPlaceholderColor: '$colors$errorLightContrast',
-        $$inputTextColor: '$colors$errorLightContrast',
-        $$inputLabelColor: '$$inputTextColor',
-        $$inputHoverBorderColor: '$colors$error'
-      }
+        $$inputColor: "$colors$errorLight",
+        $$inputPlaceholderColor: "$colors$errorLightContrast",
+        $$inputTextColor: "$colors$errorLightContrast",
+        $$inputLabelColor: "$$inputTextColor",
+        $$inputHoverBorderColor: "$colors$error",
+      },
     },
     helperColor: {
       default: {
-        $$inputHelperColor: '$colors$text'
+        $$inputHelperColor: "$colors$text",
       },
       primary: {
-        $$inputHelperColor: '$colors$primary'
+        $$inputHelperColor: "$colors$primary",
       },
       secondary: {
-        $$inputHelperColor: '$colors$secondary'
+        $$inputHelperColor: "$colors$secondary",
       },
       success: {
-        $$inputHelperColor: '$colors$success'
+        $$inputHelperColor: "$colors$success",
       },
       warning: {
-        $$inputHelperColor: '$colors$warning'
+        $$inputHelperColor: "$colors$warning",
       },
       error: {
-        $$inputHelperColor: '$colors$error'
-      }
+        $$inputHelperColor: "$colors$error",
+      },
     },
     borderWeight: {
       light: {
-        $$inputBorderWeight: '$borderWeights$light'
+        $$inputBorderWeight: "$borderWeights$light",
       },
       normal: {
-        $$inputBorderWeight: '$borderWeights$normal'
+        $$inputBorderWeight: "$borderWeights$normal",
       },
       bold: {
-        $$inputBorderWeight: '$borderWeights$bold'
+        $$inputBorderWeight: "$borderWeights$bold",
       },
       extrabold: {
-        $$inputBorderWeight: '$borderWeights$extrabold'
+        $$inputBorderWeight: "$borderWeights$extrabold",
       },
       black: {
-        $$inputBorderWeight: '$borderWeights$black'
-      }
+        $$inputBorderWeight: "$borderWeights$black",
+      },
     },
     size: {
       xs: {
-        $$inputBorderRadius: '$space$3',
-        $$inputFontSize: '$fontSizes$xs',
-        $$inputHeightRatio: '1.2',
-        br: '$$inputBorderRadius'
+        $$inputBorderRadius: "$space$3",
+        $$inputFontSize: "$fontSizes$xs",
+        $$inputHeightRatio: "1.2",
+        br: "$$inputBorderRadius",
       },
       sm: {
-        $$inputBorderRadius: '$space$4',
-        $$inputFontSize: '$fontSizes$xs',
-        $$inputHeightRatio: '1.6',
-        br: '$$inputBorderRadius'
+        $$inputBorderRadius: "$space$4",
+        $$inputFontSize: "$fontSizes$xs",
+        $$inputHeightRatio: "1.6",
+        br: "$$inputBorderRadius",
       },
       md: {
-        $$inputBorderRadius: '$space$6',
-        $$inputFontSize: '$fontSizes$sm',
-        $$inputHeightRatio: '2',
-        br: '$$inputBorderRadius'
+        $$inputBorderRadius: "$space$6",
+        $$inputFontSize: "$fontSizes$sm",
+        $$inputHeightRatio: "2",
+        br: "$$inputBorderRadius",
       },
       lg: {
-        $$inputBorderRadius: '$space$7',
-        $$inputFontSize: '$fontSizes$md',
-        $$inputHeightRatio: '2.2',
-        br: '$$inputBorderRadius'
+        $$inputBorderRadius: "$space$7",
+        $$inputFontSize: "$fontSizes$md",
+        $$inputHeightRatio: "2.2",
+        br: "$$inputBorderRadius",
       },
       xl: {
-        $$inputBorderRadius: '$space$8',
-        $$inputFontSize: '$fontSizes$lg',
-        $$inputHeightRatio: '2.6',
-        br: '$$inputBorderRadius'
-      }
+        $$inputBorderRadius: "$space$8",
+        $$inputFontSize: "$fontSizes$lg",
+        $$inputHeightRatio: "2.6",
+        br: "$$inputBorderRadius",
+      },
     },
     rounded: {
       true: {
-        $$inputBorderRadius: '$radii$pill'
-      }
+        $$inputBorderRadius: "$radii$pill",
+      },
     },
     disabled: {
       true: {
-        $$inputColor: '$colors$accents1',
-        $$inputTextColor: '$colors$accents7',
-        $$inputPlaceholderColor: '$colors$accents7',
-        $$inputShadow: '$shadows$sm'
-      }
-    }
-  }
+        $$inputColor: "$colors$accents1",
+        $$inputTextColor: "$colors$accents7",
+        $$inputPlaceholderColor: "$colors$accents7",
+        $$inputShadow: "$shadows$sm",
+      },
+    },
+  },
 });
 
-export const StyledInputContainer = styled('div', {
-  width: '100%',
-  br: '$$inputBorderRadius',
-  '@motion': {
-    transition: 'none'
+export const StyledInputContainer = styled("div", {
+  width: "100%",
+  br: "$$inputBorderRadius",
+  "@motion": {
+    transition: "none",
   },
   variants: {
     isTextarea: {
       false: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        height: 'calc($$inputHeightRatio * $9)'
-      }
+        display: "inline-flex",
+        alignItems: "center",
+        height: "calc($$inputHeightRatio * $9)",
+      },
     },
     focused: {
-      true: {}
+      true: {},
     },
     isReadOnly: {
-      false: {}
+      false: {},
     },
-    underlined: { true: {} },
+    underlined: {true: {}},
     animated: {
       true: {
-        transition: '$default'
+        transition: "$default",
       },
       false: {
-        transition: 'none'
-      }
-    }
+        transition: "none",
+      },
+    },
   },
   compoundVariants: [
     {
@@ -202,8 +202,8 @@ export const StyledInputContainer = styled('div', {
       isReadOnly: false,
       underlined: true,
       css: {
-        transform: 'none'
-      }
+        transform: "none",
+      },
     },
     {
       // focused && animated && !isReadOnly && !underlined
@@ -212,190 +212,190 @@ export const StyledInputContainer = styled('div', {
       isReadOnly: false,
       underlined: false,
       css: {
-        transform: 'translateY(-$space$1)'
-      }
-    }
-  ]
+        transform: "translateY(-$space$1)",
+      },
+    },
+  ],
 });
 
-export const StyledInput = styled('input', {
+export const StyledInput = styled("input", {
   padding: 0,
-  fontSize: '$$inputFontSize',
-  bg: 'transparent',
-  border: 'none',
-  color: '$$inputTextColor',
+  fontSize: "$$inputFontSize",
+  bg: "transparent",
+  border: "none",
+  color: "$$inputTextColor",
   br: 0,
-  outline: 'none',
-  size: '100%',
+  outline: "none",
+  size: "100%",
   minWidth: 0,
-  WebkitAppearance: 'none',
-  '::placeholder': {
-    color: '$$inputPlaceholderColor',
-    transition: 'opacity 0.25s ease 0s',
-    MozTransition: 'opacity 0.25s ease 0s',
-    MsTransition: 'opacity 0.25s ease 0s',
-    WebkitTransition: 'opacity 0.25s ease 0s'
+  WebkitAppearance: "none",
+  "::placeholder": {
+    color: "$$inputPlaceholderColor",
+    transition: "opacity 0.25s ease 0s",
+    MozTransition: "opacity 0.25s ease 0s",
+    MsTransition: "opacity 0.25s ease 0s",
+    WebkitTransition: "opacity 0.25s ease 0s",
   },
-  '@motion': {
-    transition: 'none',
-    '&::placeholder': {
-      transition: 'none'
-    }
+  "@motion": {
+    transition: "none",
+    "&::placeholder": {
+      transition: "none",
+    },
   },
-  '&:disabled': {
-    pe: 'none',
-    color: '$accents4',
-    cursor: 'not-allowed'
+  "&:disabled": {
+    pe: "none",
+    color: "$accents4",
+    cursor: "not-allowed",
   },
   variants: {
     isTextarea: {
       true: {
-        boxShadow: 'none',
-        display: 'block',
-        size: '100%',
-        resize: 'none',
-        border: 'none',
-        outline: 'none'
-      }
+        boxShadow: "none",
+        display: "block",
+        size: "100%",
+        resize: "none",
+        border: "none",
+        outline: "none",
+      },
     },
     focused: {
       true: {
-        '&::placeholder': {
+        "&::placeholder": {
           opacity: 0,
-          transition: 'opacity 0.25s ease 0s'
-        }
-      }
+          transition: "opacity 0.25s ease 0s",
+        },
+      },
     },
     bordered: {
       true: {
-        padding: '0 $3'
-      }
+        padding: "0 $3",
+      },
     },
     rounded: {
       true: {
-        padding: '0 $3'
-      }
+        padding: "0 $3",
+      },
     },
     animated: {
       false: {
-        transition: 'none',
-        '::placeholder': {
-          transition: 'none'
-        }
-      }
+        transition: "none",
+        "::placeholder": {
+          transition: "none",
+        },
+      },
     },
     hasLeftContent: {
       true: {
-        ml: 0
-      }
+        ml: 0,
+      },
     },
     hasRightContent: {
       true: {
-        mr: 0
-      }
-    }
-  }
+        mr: 0,
+      },
+    },
+  },
 });
 
-export const StyledInputWrapper = styled('div', {
+export const StyledInputWrapper = styled("div", {
   flex: 1,
-  position: 'relative',
-  br: '$$inputBorderRadius',
-  bg: '$$inputColor',
-  display: 'inline-flex',
-  verticalAlign: 'middle',
-  alignItems: 'center',
-  userSelect: 'none',
-  '@motion': {
-    transition: 'none',
-    '&:before': {
-      transition: 'none'
-    },
-    '&:after': {
-      transition: 'none'
-    }
+  position: "relative",
+  br: "$$inputBorderRadius",
+  bg: "$$inputColor",
+  display: "inline-flex",
+  verticalAlign: "middle",
+  alignItems: "center",
+  userSelect: "none",
+  "@motion": {
+    transition: "none",
+    "&:before": {
+      transition: "none",
+    },
+    "&:after": {
+      transition: "none",
+    },
   },
   variants: {
     focused: {
-      true: {}
+      true: {},
     },
     isReadOnly: {
-      true: {}
+      true: {},
     },
     bordered: {
       true: {
-        bg: 'transparent',
-        border: 'none',
-        boxShadow: '0 0 0 $$inputBorderWeight $$inputBorderColor',
-        transition: 'box-shadow 0.25s ease'
-      }
+        bg: "transparent",
+        border: "none",
+        boxShadow: "0 0 0 $$inputBorderWeight $$inputBorderColor",
+        transition: "box-shadow 0.25s ease",
+      },
     },
     shadow: {
       true: {
-        transition: '$default'
-      }
+        transition: "$default",
+      },
     },
     disabled: {
       true: {
-        cursor: 'not-allowed'
-      }
+        cursor: "not-allowed",
+      },
     },
     underlined: {
       true: {
-        bg: 'transparent',
+        bg: "transparent",
         [`& ${StyledInput}`]: {
-          margin: '$2 $3'
+          margin: "$2 $3",
         },
-        '&:before': {
-          content: '',
-          position: 'absolute',
-          zIndex: '$2',
+        "&:before": {
+          content: "",
+          position: "absolute",
+          zIndex: "$2",
           width: 0,
           bottom: 0,
-          height: '$1',
-          left: '50%',
-          transform: 'translate(-50%)',
-          background: '$$inputHoverBorderColor',
-          transition: 'width 0.25s ease'
+          height: "$1",
+          left: "50%",
+          transform: "translate(-50%)",
+          background: "$$inputHoverBorderColor",
+          transition: "width 0.25s ease",
         },
-        '&:after': {
-          content: '',
-          position: 'absolute',
-          zIndex: '$1',
+        "&:after": {
+          content: "",
+          position: "absolute",
+          zIndex: "$1",
           bottom: 0,
-          width: '100%',
-          height: '$$inputBorderWeight',
-          bg: '$$inputBorderColor'
-        }
+          width: "100%",
+          height: "$$inputBorderWeight",
+          bg: "$$inputBorderColor",
+        },
       },
       false: {
         [`& ${StyledInput}`]: {
-          margin: '$2 $5'
-        }
-      }
+          margin: "$2 $5",
+        },
+      },
     },
     animated: {
       false: {
-        transition: 'none',
-        '&:before': {
-          transition: 'none'
+        transition: "none",
+        "&:before": {
+          transition: "none",
+        },
+        "&:after": {
+          transition: "none",
         },
-        '&:after': {
-          transition: 'none'
-        }
-      }
+      },
     },
     isTextarea: {
       true: {
-        boxSizing: 'border-box',
-        width: '100%',
-        maxWidth: '100%',
-        height: 'auto'
+        boxSizing: "border-box",
+        width: "100%",
+        maxWidth: "100%",
+        height: "auto",
       },
       false: {
-        height: '100%'
-      }
-    }
+        height: "100%",
+      },
+    },
   },
   compoundVariants: [
     {
@@ -403,18 +403,18 @@ export const StyledInputWrapper = styled('div', {
       bordered: true,
       underlined: true,
       css: {
-        boxShadow: '0 0 0 0px $$inputBorderColor'
-      }
+        boxShadow: "0 0 0 0px $$inputBorderColor",
+      },
     },
     {
       // focused && underlined
       focused: true,
       underlined: true,
       css: {
-        '&:before': {
-          width: '100%'
-        }
-      }
+        "&:before": {
+          width: "100%",
+        },
+      },
     },
     // focused && shadow && !readOnly
     {
@@ -423,8 +423,8 @@ export const StyledInputWrapper = styled('div', {
       isReadOnly: false,
       underlined: false,
       css: {
-        boxShadow: '$$inputShadow'
-      }
+        boxShadow: "$$inputShadow",
+      },
     },
     // focused && bordered && !readOnly && !underlined
     {
@@ -433,8 +433,8 @@ export const StyledInputWrapper = styled('div', {
       isReadOnly: false,
       underlined: false,
       css: {
-        boxShadow: '0 0 0 $$inputBorderWeight $$inputHoverBorderColor'
-      }
+        boxShadow: "0 0 0 $$inputBorderWeight $$inputHoverBorderColor",
+      },
     },
     //  bordered && !readOnly && !underlined
     {
@@ -442,10 +442,10 @@ export const StyledInputWrapper = styled('div', {
       isReadOnly: false,
       underlined: false,
       css: {
-        '&:hover': {
-          boxShadow: '0 0 0 $$inputBorderWeight $$inputHoverBorderColor'
-        }
-      }
+        "&:hover": {
+          boxShadow: "0 0 0 $$inputBorderWeight $$inputHoverBorderColor",
+        },
+      },
     },
     // isTextarea  && !underlined
     {
@@ -453,113 +453,113 @@ export const StyledInputWrapper = styled('div', {
       underlined: false,
       css: {
         [`& ${StyledInput}`]: {
-          margin: '$xs $sm'
-        }
-      }
-    }
-  ]
+          margin: "$xs $sm",
+        },
+      },
+    },
+  ],
 });
 
-export const StyledHelperTextContainer = styled('div', {
-  position: 'absolute',
+export const StyledHelperTextContainer = styled("div", {
+  position: "absolute",
   opacity: 0,
-  bottom: 'calc($$inputHeightRatio * -$space$5)',
-  '@motion': {
-    transition: 'none'
+  bottom: "calc($$inputHeightRatio * -$space$5)",
+  "@motion": {
+    transition: "none",
   },
   variants: {
     animated: {
       true: {
-        transition: 'opacity 0.25s ease'
+        transition: "opacity 0.25s ease",
       },
       false: {
-        transition: 'none'
-      }
+        transition: "none",
+      },
     },
     withValue: {
       true: {
-        opacity: 1
-      }
-    }
-  }
+        opacity: 1,
+      },
+    },
+  },
 });
 
-export const StyledHelperText = styled('p', {
-  margin: '$1 0 0 $5',
-  fontSize: '$space$5',
-  color: '$$inputHelperColor'
+export const StyledHelperText = styled("p", {
+  margin: "$1 0 0 $5",
+  fontSize: "$space$5",
+  color: "$$inputHelperColor",
 });
 
-export const StyledInputPlaceholder = styled('span', {}, sharedVisuallyHidden);
+export const StyledInputPlaceholder = styled("span", {}, sharedVisuallyHidden);
 
 /// Input accessories
-export const StyledInputBlockLabel = styled('label', {
-  d: 'block',
-  fontWeight: '$normal',
-  color: '$$inputLabelColor',
-  p: '0 0 0 $2',
-  mb: '$3',
-  fs: '$$inputFontSize',
-  lh: '$md',
-  WebkitTouchCallout: 'none' /* iOS Safari */,
-  WebkitUserSelect: 'none' /* Safari */,
-  KhtmlUserSelect: 'none' /* Konqueror HTML */,
-  MozUserSelect: 'none' /* Firefox */,
-  MsUserSelect: 'none' /* Internet Explorer/Edge */,
-  us: 'none' /* Non-prefixed version, currently supported by Chrome and Opera */,
-  '> *:first-child': {
-    marginTop: 0
+export const StyledInputBlockLabel = styled("label", {
+  d: "block",
+  fontWeight: "$normal",
+  color: "$$inputLabelColor",
+  p: "0 0 0 $2",
+  mb: "$3",
+  fs: "$$inputFontSize",
+  lh: "$md",
+  WebkitTouchCallout: "none" /* iOS Safari */,
+  WebkitUserSelect: "none" /* Safari */,
+  KhtmlUserSelect: "none" /* Konqueror HTML */,
+  MozUserSelect: "none" /* Firefox */,
+  MsUserSelect: "none" /* Internet Explorer/Edge */,
+  us: "none" /* Non-prefixed version, currently supported by Chrome and Opera */,
+  "> *:first-child": {
+    marginTop: 0,
   },
-  '> *:last-child': {
-    mb: 0
+  "> *:last-child": {
+    mb: 0,
   },
-  '@motion': {
-    transition: 'none'
+  "@motion": {
+    transition: "none",
   },
   variants: {
     rounded: {
       true: {
-        padding: '0 0 0 $3'
-      }
+        padding: "0 0 0 $3",
+      },
     },
     asPlaceholder: {
       true: {
-        position: 'absolute',
+        position: "absolute",
         padding: 0,
-        zIndex: '$1',
-        left: '$space$6',
-        top: '20%',
+        zIndex: "$1",
+        left: "$space$6",
+        top: "20%",
         mb: 0,
-        cursor: 'text',
-        color: '$$inputPlaceholderColor',
-        transition: 'left 0.25s ease 0s, color 0.25s ease 0s, top 0.25s ease 0s'
-      }
+        cursor: "text",
+        color: "$$inputPlaceholderColor",
+        transition: "left 0.25s ease 0s, color 0.25s ease 0s, top 0.25s ease 0s",
+      },
     },
     animated: {
       false: {
-        transition: 'none'
-      }
+        transition: "none",
+      },
     },
     focused: {
       true: {
-        color: '$$inputHoverBorderColor'
-      }
+        color: "$$inputHoverBorderColor",
+      },
     },
     underlined: {
-      true: {}
+      true: {},
     },
     withValue: {
-      true: {}
+      true: {},
     },
     isTextarea: {
-      true: {}
+      true: {},
     },
     bordered: {
-      true: {}
+      true: {},
     },
     hasContentLeft: {
-      true: {}
-    }
+      true: {},
+    },
   },
   compoundVariants: [
     // underlined && asPlaceholder
@@ -567,8 +567,8 @@ export const StyledInputBlockLabel = styled('label', {
       underlined: true,
       asPlaceholder: true,
       css: {
-        left: '$space$2'
-      }
+        left: "$space$2",
+      },
     },
     // asPlaceholder && focused && !underlined
     {
@@ -577,10 +577,10 @@ export const StyledInputBlockLabel = styled('label', {
       underlined: false,
       isTextarea: false,
       css: {
-        top: '-72%',
-        left: '$2',
-        cursor: 'inherit'
-      }
+        top: "-72%",
+        left: "$2",
+        cursor: "inherit",
+      },
     },
     // asPlaceholder && focused && underlined
     {
@@ -589,10 +589,10 @@ export const StyledInputBlockLabel = styled('label', {
       underlined: true,
       isTextarea: false,
       css: {
-        top: '-72%',
-        left: '0px',
-        cursor: 'inherit'
-      }
+        top: "-72%",
+        left: "0px",
+        cursor: "inherit",
+      },
     },
     // asPlaceholder && focused && withValue && !underlined
     {
@@ -601,11 +601,11 @@ export const StyledInputBlockLabel = styled('label', {
       underlined: false,
       isTextarea: false,
       css: {
-        color: '$$inputTextColor',
-        top: '-72%',
-        left: '$2',
-        cursor: 'inherit'
-      }
+        color: "$$inputTextColor",
+        top: "-72%",
+        left: "$2",
+        cursor: "inherit",
+      },
     },
     // asPlaceholder && focused && withValue && underlined
     {
@@ -614,27 +614,27 @@ export const StyledInputBlockLabel = styled('label', {
       underlined: true,
       isTextarea: false,
       css: {
-        color: '$$inputTextColor',
-        top: '-72%',
-        left: '0px',
-        cursor: 'inherit'
-      }
+        color: "$$inputTextColor",
+        top: "-72%",
+        left: "0px",
+        cursor: "inherit",
+      },
     },
     // asPlaceholder && isTextarea
     {
       asPlaceholder: true,
       isTextarea: true,
       css: {
-        top: '$5'
-      }
+        top: "$5",
+      },
     },
     // asPlaceholder && hasContentLeft
     {
       asPlaceholder: true,
       hasContentLeft: true,
       css: {
-        left: 'calc($space$6 + $$inputHeightRatio * $space$7)'
-      }
+        left: "calc($space$6 + $$inputHeightRatio * $space$7)",
+      },
     },
     // asPlaceholder && isTextarea && focused
     {
@@ -642,9 +642,9 @@ export const StyledInputBlockLabel = styled('label', {
       isTextarea: true,
       focused: true,
       css: {
-        top: 'calc(-$space$10 - $space$3)',
-        left: '$2'
-      }
+        top: "calc(-$space$10 - $space$3)",
+        left: "$2",
+      },
     },
     // asPlaceholder && isTextarea && withValue
     {
@@ -652,8 +652,8 @@ export const StyledInputBlockLabel = styled('label', {
       isTextarea: true,
       withValue: true,
       css: {
-        top: '-$11'
-      }
+        top: "-$11",
+      },
     },
     // focused && asPlaceholder && isTextarea && bordered
     {
@@ -662,60 +662,60 @@ export const StyledInputBlockLabel = styled('label', {
       isTextarea: true,
       bordered: true,
       css: {
-        top: '-$12'
-      }
-    }
+        top: "-$12",
+      },
+    },
   ],
   defaultVariants: {
-    asPlaceholder: false
-  }
+    asPlaceholder: false,
+  },
 });
 
-export const StyledInputLabel = styled('span', {
-  position: 'relative',
-  display: 'inline-flex',
-  width: 'initial',
-  height: '100%',
-  fontWeight: '$medium',
-  ai: 'center',
-  pe: 'none',
+export const StyledInputLabel = styled("span", {
+  position: "relative",
+  display: "inline-flex",
+  width: "initial",
+  height: "100%",
+  fontWeight: "$medium",
+  ai: "center",
+  pe: "none",
   margin: 0,
-  padding: '0 $sm',
-  color: '$$inputPlaceholderColor',
-  fontSize: '$$inputFontSize',
-  lineHeight: '$xs',
+  padding: "0 $sm",
+  color: "$$inputPlaceholderColor",
+  fontSize: "$$inputFontSize",
+  lineHeight: "$xs",
   variants: {
     isRight: {
       true: {
-        btrr: '$$inputBorderRadius',
-        bbrr: '$$inputBorderRadius'
+        btrr: "$$inputBorderRadius",
+        bbrr: "$$inputBorderRadius",
       },
       false: {
-        btlr: '$$inputBorderRadius',
-        bblr: '$$inputBorderRadius'
-      }
+        btlr: "$$inputBorderRadius",
+        bblr: "$$inputBorderRadius",
+      },
     },
     isDark: {
-      true: {}
+      true: {},
     },
     isDefaultStatus: {
-      true: {}
+      true: {},
     },
     underlined: {
       true: {
-        bg: 'transparent'
-      }
+        bg: "transparent",
+      },
     },
     bordered: {
       true: {
-        '&:after': {
-          display: 'none'
+        "&:after": {
+          display: "none",
         },
-        '&:before': {
-          display: 'none'
-        }
-      }
-    }
+        "&:before": {
+          display: "none",
+        },
+      },
+    },
   },
   compoundVariants: [
     // isRight && underlined
@@ -723,24 +723,24 @@ export const StyledInputLabel = styled('span', {
       isRight: true,
       underlined: true,
       css: {
-        borderLeftColor: '$$inputPlaceholderColor',
-        borderLeftStyle: 'solid',
-        marginLeft: '$2',
-        borderLeftWidth: 'calc($$inputBorderWeight / 2)',
-        height: '40%'
-      }
+        borderLeftColor: "$$inputPlaceholderColor",
+        borderLeftStyle: "solid",
+        marginLeft: "$2",
+        borderLeftWidth: "calc($$inputBorderWeight / 2)",
+        height: "40%",
+      },
     },
     // !isRight && underlined
     {
       isRight: false,
       underlined: true,
       css: {
-        borderRightColor: '$$inputPlaceholderColor',
-        borderRightStyle: 'solid',
-        marginRight: '$2',
-        borderRightWidth: 'calc($$inputBorderWeight / 1)',
-        height: '40%'
-      }
+        borderRightColor: "$$inputPlaceholderColor",
+        borderRightStyle: "solid",
+        marginRight: "$2",
+        borderRightWidth: "calc($$inputBorderWeight / 1)",
+        height: "40%",
+      },
     },
     // isDefaultStatus && !bordered && !underlined
     {
@@ -748,8 +748,8 @@ export const StyledInputLabel = styled('span', {
       bordered: false,
       underlined: false,
       css: {
-        bg: '$accents2'
-      }
+        bg: "$accents2",
+      },
     },
     // isDefaultStatus && !bordered && !underlined && isDark
     {
@@ -758,8 +758,8 @@ export const StyledInputLabel = styled('span', {
       underlined: false,
       isDark: true,
       css: {
-        color: '$accents6'
-      }
+        color: "$accents6",
+      },
     },
     // !isDefaultStatus && !bordered && !underlined
     {
@@ -767,129 +767,126 @@ export const StyledInputLabel = styled('span', {
       bordered: true,
       underlined: false,
       css: {
-        bg: '$$inputColor'
-      }
+        bg: "$$inputColor",
+      },
     },
     // bordered && isRight
     {
       bordered: true,
       isRight: true,
       css: {
-        peddingRight: '$sm',
-        paddingLeft: 0
-      }
+        peddingRight: "$sm",
+        paddingLeft: 0,
+      },
     },
     // bordered && !isRight
     {
       bordered: true,
       isRight: false,
       css: {
-        peddingLeft: '$sm',
-        paddingRight: 0
-      }
-    }
+        peddingLeft: "$sm",
+        paddingRight: 0,
+      },
+    },
   ],
   defaultVariants: {
-    isRight: false
-  }
+    isRight: false,
+  },
 });
 
-export const StyledInputContent = styled('span', {
+export const StyledInputContent = styled("span", {
   variants: {
     applyStyles: {
       true: {
-        display: 'flex',
-        boxSizing: 'content-box',
-        width: 'calc($$inputHeightRatio * $space$4)',
-        height: '100%',
-        alignItems: 'center',
-        verticalAlign: 'center',
+        display: "flex",
+        boxSizing: "content-box",
+        width: "calc($$inputHeightRatio * $space$4)",
+        height: "100%",
+        alignItems: "center",
+        verticalAlign: "center",
         margin: 0,
-        padding: '0 calc($$inputHeightRatio * $3)',
-        color: '$$inputTextColor',
-        lineHeight: '$xs',
-        position: 'relative',
-        cursor: 'default',
-        pe: 'none'
-      }
+        padding: "0 calc($$inputHeightRatio * $3)",
+        color: "$$inputTextColor",
+        lineHeight: "$xs",
+        position: "relative",
+        cursor: "default",
+        pe: "none",
+      },
     },
     clickable: {
       true: {
-        cursor: 'pointer',
-        pe: 'auto'
-      }
-    }
-  }
+        cursor: "pointer",
+        pe: "auto",
+      },
+    },
+  },
 });
 
-export const StyledInputClearButton = styled('button', {
-  position: 'absolute',
+export const StyledInputClearButton = styled("button", {
+  position: "absolute",
   right: 0,
   margin: 0,
-  d: 'inline-flex',
-  ai: 'center',
-  border: 'none',
-  bg: 'transparent',
-  width: 'auto',
-  height: 'auto',
-  cursor: 'pointer',
-  boxSizing: 'border-box',
-  transition:
-    'color 250ms ease 0s, transform 250ms ease 0s, opacity 250ms ease 0s',
-  color: '$$inputPlaceholderColor',
-  visibility: 'hidden',
-  transform: 'translateX(20%)',
+  d: "inline-flex",
+  ai: "center",
+  border: "none",
+  bg: "transparent",
+  width: "auto",
+  height: "auto",
+  cursor: "pointer",
+  boxSizing: "border-box",
+  transition: "color 250ms ease 0s, transform 250ms ease 0s, opacity 250ms ease 0s",
+  color: "$$inputPlaceholderColor",
+  visibility: "hidden",
+  transform: "translateX(20%)",
   opacity: 0,
-  '&:hover': {
-    opacity: 0.85
+  "&:hover": {
+    opacity: 0.85,
   },
   svg: {
-    color: 'currentColor',
-    size: 'calc($space$5 * $$inputHeightRatio)'
+    color: "currentColor",
+    size: "calc($space$5 * $$inputHeightRatio)",
   },
-  '@motion': {
-    transition: 'none'
+  "@motion": {
+    transition: "none",
   },
   variants: {
     visible: {
       true: {
-        visibility: 'visible',
-        transform: 'translateX(0)',
-        opacity: 1
-      }
+        visibility: "visible",
+        transform: "translateX(0)",
+        opacity: 1,
+      },
     },
     underlined: {
       true: {
-        padding: '0 $1'
-      }
+        padding: "0 $1",
+      },
     },
     animated: {
       false: {
-        transition: 'none'
-      }
+        transition: "none",
+      },
     },
     hasContentRight: {
       true: {
         padding: 0,
-        position: 'relative',
-        transform: 'translateX(30%)'
-      }
+        position: "relative",
+        transform: "translateX(30%)",
+      },
     },
     disabled: {
       true: {
-        cursor: 'not-allowed',
-        '&:hover': {
-          color: '$accents3'
-        }
-      }
-    }
-  }
+        cursor: "not-allowed",
+        "&:hover": {
+          color: "$accents3",
+        },
+      },
+    },
+  },
 });
 
 // types
 export type InputVariantsProps = VariantProps<typeof StyledInput>;
-export type InputBlockLabelVariantsProps = VariantProps<
-  typeof StyledInputBlockLabel
->;
+export type InputBlockLabelVariantsProps = VariantProps<typeof StyledInputBlockLabel>;
 export type InputLabelVariantsProps = VariantProps<typeof StyledInputLabel>;
 export type InputContentVariantsProps = VariantProps<typeof StyledInputContent>;
diff --git a/packages/react/src/input/input.tsx b/packages/react/src/input/input.tsx
index 0ab223a709..dbef7e344d 100644
--- a/packages/react/src/input/input.tsx
+++ b/packages/react/src/input/input.tsx
@@ -5,16 +5,19 @@ import React, {
   useImperativeHandle,
   useMemo,
   useRef,
-  useState
-} from 'react';
-import { useLabel } from '@react-aria/label';
-import { ContentPosition } from '../utils/prop-types';
-import { CSS } from '../theme/stitches.config';
-import Textarea from '../textarea';
-import InputPassword from './input-password';
-import { Props, FormElement, defaultProps } from './input-props';
-import useTheme from '../use-theme';
-import useWarning from '../use-warning';
+  useState,
+} from "react";
+import {useLabel} from "@react-aria/label";
+
+import {ContentPosition} from "../utils/prop-types";
+import {CSS} from "../theme/stitches.config";
+import Textarea from "../textarea";
+import useTheme from "../use-theme";
+import {warn} from "../utils/console";
+import ClearIcon from "../utils/clear-icon";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+
 import {
   StyledInput,
   StyledInputMainContainer,
@@ -26,34 +29,31 @@ import {
   StyledInputClearButton as InputClearButton,
   StyledInputBlockLabel as InputBlockLabel,
   StyledInputLabel as InputLabel,
-  StyledInputContent as InputContent
-} from './input.styles';
-import ClearIcon from '../utils/clear-icon';
-import clsx from '../utils/clsx';
-import { __DEV__ } from '../utils/assertion';
+  StyledInputContent as InputContent,
+} from "./input.styles";
+import {Props, FormElement, defaultProps} from "./input-props";
+import InputPassword from "./input-password";
 
 type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>;
-export type InputProps = Props &
-  typeof defaultProps &
-  NativeAttrs & { css?: CSS };
+export type InputProps = Props & typeof defaultProps & NativeAttrs & {css?: CSS};
 
 const simulateChangeEvent = (
   el: FormElement,
-  event: React.MouseEvent<HTMLButtonElement>
+  event: React.MouseEvent<HTMLButtonElement>,
 ): React.ChangeEvent<FormElement> => {
   return {
     ...event,
     target: el,
-    currentTarget: el
+    currentTarget: el,
   };
 };
 
-const preClass = 'nextui-input';
+const preClass = "nextui-input";
 
 const Input = React.forwardRef<FormElement, InputProps>(
   (
     {
-      as: Component = 'input',
+      as: Component = "input",
       label,
       labelPlaceholder,
       labelLeft,
@@ -93,7 +93,7 @@ const Input = React.forwardRef<FormElement, InputProps>(
       css,
       ...props
     },
-    ref: React.Ref<FormElement | null>
+    ref: React.Ref<FormElement | null>,
   ) => {
     const inputRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null);
 
@@ -102,35 +102,27 @@ const Input = React.forwardRef<FormElement, InputProps>(
     const [selfValue, setSelfValue] = useState<string>(initialValue);
     const [hover, setHover] = useState<boolean>(false);
 
-    const { isDark } = useTheme();
+    const {isDark} = useTheme();
 
     const isControlledComponent = useMemo(() => value !== undefined, [value]);
 
-    const inputLabel = useMemo(
-      () => label || labelPlaceholder,
-      [label, labelPlaceholder]
-    );
+    const inputLabel = useMemo(() => label || labelPlaceholder, [label, labelPlaceholder]);
 
     const inputPlaceholder = useMemo(
-      () => (labelPlaceholder ? '' : placeholder),
-      [placeholder, labelPlaceholder]
+      () => (labelPlaceholder ? "" : placeholder),
+      [placeholder, labelPlaceholder],
     );
 
     const width = useMemo(() => {
-      if (fullWidth) return '100%';
+      if (fullWidth) return "100%";
       if (widthProp) return widthProp;
-      return 'initial';
+
+      return "initial";
     }, [fullWidth, widthProp]);
 
     if (underlined && __DEV__) {
-      bordered &&
-        useWarning(
-          'Using underlined and bordered at the same time will have no effect.'
-        );
-      rounded &&
-        useWarning(
-          'Using underlined and rounded at the same time will have no effect.'
-        );
+      bordered && warn("Using underlined and bordered at the same time will have no effect.");
+      rounded && warn("Using underlined and rounded at the same time will have no effect.");
     }
 
     const changeHandler = (event: React.ChangeEvent<FormElement>) => {
@@ -144,13 +136,14 @@ const Input = React.forwardRef<FormElement, InputProps>(
       event.stopPropagation();
       event.nativeEvent.stopImmediatePropagation();
 
-      setSelfValue('');
+      setSelfValue("");
       onClearClick && onClearClick(event);
       /* istanbul ignore next */
       if (!inputRef.current) return;
 
       const changeEvent = simulateChangeEvent(inputRef.current, event);
-      changeEvent.target.value = '';
+
+      changeEvent.target.value = "";
       onChange && onChange(changeEvent);
       inputRef.current.focus();
     };
@@ -164,10 +157,7 @@ const Input = React.forwardRef<FormElement, InputProps>(
       onBlur && onBlur(e);
     };
 
-    const contentClickHandler = (
-      key: ContentPosition,
-      e: React.MouseEvent<HTMLDivElement>
-    ) => {
+    const contentClickHandler = (key: ContentPosition, e: React.MouseEvent<HTMLDivElement>) => {
       if (disabled) return;
       onContentClick && onContentClick(key, e);
     };
@@ -176,109 +166,102 @@ const Input = React.forwardRef<FormElement, InputProps>(
       if (isControlledComponent) {
         setSelfValue(value as string);
       }
-    });
+    }, [isControlledComponent, value]);
 
-    const isTextarea = useMemo(() => Component === 'textarea', [Component]);
+    const isTextarea = useMemo(() => Component === "textarea", [Component]);
 
     const controlledValue = isControlledComponent
-      ? { value: selfValue }
-      : { defaultValue: initialValue };
+      ? {value: selfValue}
+      : {defaultValue: initialValue};
 
     const inputProps = {
       ...props,
-      ...controlledValue
+      ...controlledValue,
     };
 
-    const { labelProps, fieldProps } = useLabel({
+    const {labelProps, fieldProps} = useLabel({
       ...inputProps,
-      label: inputLabel
+      label: inputLabel,
     });
 
     const getState = useMemo(() => {
       return hover
-        ? 'hover'
+        ? "hover"
         : disabled
-        ? 'disabled'
+        ? "disabled"
         : readOnly
-        ? 'read-only'
+        ? "read-only"
         : selfValue
-        ? 'with-value'
-        : 'normal';
+        ? "with-value"
+        : "normal";
     }, [hover, disabled, readOnly, selfValue]);
 
     return (
       <StyledInputMainContainer
-        color={color}
-        data-state={getState}
-        helperColor={helperColor}
         borderWeight={borderWeight}
-        status={status}
-        size={size}
-        rounded={rounded}
-        disabled={disabled}
+        className={clsx(`${preClass}-main-container`, `${preClass}-main-container--${getState}`)}
+        color={color}
         css={{
           width,
-          ...(css as any)
+          ...(css as any),
         }}
-        className={clsx(
-          `${preClass}-main-container`,
-          `${preClass}-main-container--${getState}`
-        )}
+        data-state={getState}
+        disabled={disabled}
+        helperColor={helperColor}
+        rounded={rounded}
+        size={size}
+        status={status}
       >
         {inputLabel && (
           <InputBlockLabel
-            id={labelProps.id}
+            animated={animated}
+            asPlaceholder={!!labelPlaceholder}
+            bordered={bordered}
             className={`${preClass}-block-label`}
+            focused={hover}
+            hasContentLeft={!!contentLeft}
             htmlFor={labelProps.htmlFor}
+            id={labelProps.id}
             isTextarea={isTextarea}
-            underlined={underlined}
-            animated={animated}
-            bordered={bordered}
             rounded={rounded}
-            hasContentLeft={!!contentLeft}
+            underlined={underlined}
             withValue={!!selfValue}
-            asPlaceholder={!!labelPlaceholder}
-            focused={hover}
           >
             {inputLabel}
           </InputBlockLabel>
         )}
         <StyledInputContainer
           animated={animated}
-          isTextarea={isTextarea}
-          underlined={underlined}
-          isReadOnly={readOnly}
-          focused={hover}
           className={clsx(
             `${preClass}-container`,
             `${preClass}-container--${getState}`,
             {
               [`${preClass}-container--input`]: !isTextarea,
               [`${preClass}-container--textarea`]: isTextarea,
-              [`${preClass}-container--read-only`]: readOnly
+              [`${preClass}-container--read-only`]: readOnly,
             },
-            className
+            className,
           )}
+          focused={hover}
+          isReadOnly={readOnly}
+          isTextarea={isTextarea}
+          underlined={underlined}
         >
           <StyledInputWrapper
-            as={inputLabel ? 'div' : 'label'}
             animated={animated}
+            as={inputLabel ? "div" : "label"}
             bordered={bordered}
-            shadow={shadow}
+            className={clsx(`${preClass}-wrapper`, `${preClass}-wrapper--${getState}`, {
+              [`${preClass}-wrapper--bordered`]: bordered,
+              [`${preClass}-wrapper--underlined`]: underlined,
+              [`${preClass}-wrapper--shadow`]: shadow,
+            })}
             disabled={disabled}
             focused={hover}
             isReadOnly={readOnly}
-            underlined={underlined}
             isTextarea={isTextarea}
-            className={clsx(
-              `${preClass}-wrapper`,
-              `${preClass}-wrapper--${getState}`,
-              {
-                [`${preClass}-wrapper--bordered`]: bordered,
-                [`${preClass}-wrapper--underlined`]: underlined,
-                [`${preClass}-wrapper--shadow`]: shadow
-              }
-            )}
+            shadow={shadow}
+            underlined={underlined}
           >
             {!inputLabel && placeholder && (
               <StyledInputPlaceholder className={`${preClass}-placeholder`}>
@@ -287,72 +270,67 @@ const Input = React.forwardRef<FormElement, InputProps>(
             )}
             {labelLeft && (
               <InputLabel
-                className={`${preClass}-label--left`}
-                isDefaultStatus={status === 'default'}
-                underlined={underlined}
                 bordered={bordered}
+                className={`${preClass}-label--left`}
                 isDark={isDark}
+                isDefaultStatus={status === "default"}
+                underlined={underlined}
               >
                 {labelLeft}
               </InputLabel>
             )}
             {contentLeft && (
               <InputContent
-                className={clsx(
-                  `${preClass}-content`,
-                  `${preClass}-content--left`
-                )}
                 applyStyles={contentLeftStyling}
+                className={clsx(`${preClass}-content`, `${preClass}-content--left`)}
                 clickable={contentClickable}
-                onClick={(e: React.MouseEvent<HTMLDivElement>) =>
-                  contentClickHandler('left', e)
-                }
+                onClick={(e: React.MouseEvent<HTMLDivElement>) => contentClickHandler("left", e)}
               >
                 {contentLeft}
               </InputContent>
             )}
             <StyledInput
-              type="text"
-              as={Component}
               ref={inputRef}
+              aria-multiline={isTextarea}
+              aria-placeholder={inputPlaceholder}
+              aria-readonly={readOnly}
+              aria-required={required}
+              as={Component}
+              autoComplete={autoComplete}
+              bordered={bordered}
               className={clsx({
                 [`${preClass}`]: !isTextarea,
                 [`${preClass}-textarea`]: isTextarea,
                 [`${preClass}-disabled`]: disabled,
                 [`${preClass}-rounded`]: rounded,
                 [`${preClass}-${preClass}-right-content`]: contentRight,
-                [`${preClass}-left-content`]: contentLeft
+                [`${preClass}-left-content`]: contentLeft,
               })}
-              isTextarea={isTextarea}
+              data-state={getState}
+              disabled={disabled}
               focused={hover}
-              bordered={bordered}
+              hasLeftContent={!!contentLeft}
+              hasRightContent={!!contentRight}
+              isTextarea={isTextarea}
               placeholder={inputPlaceholder}
-              disabled={disabled}
               readOnly={readOnly}
               required={required}
-              onFocus={focusHandler}
+              type="text"
               onBlur={blurHandler}
               onChange={changeHandler}
-              autoComplete={autoComplete}
-              hasLeftContent={!!contentLeft}
-              hasRightContent={!!contentRight}
-              data-state={getState}
-              aria-placeholder={inputPlaceholder}
-              aria-readonly={readOnly}
-              aria-required={required}
-              aria-multiline={isTextarea}
+              onFocus={focusHandler}
               {...inputProps}
               {...fieldProps}
             />
             {clearable && (
               <InputClearButton
-                type="button"
-                className={`${preClass}-clear-button`}
                 animated={animated}
+                className={`${preClass}-clear-button`}
+                disabled={disabled || readOnly}
+                hasContentRight={!!contentRight}
+                type="button"
                 underlined={underlined}
                 visible={Boolean(selfValue)}
-                hasContentRight={!!contentRight}
-                disabled={disabled || readOnly}
                 onClick={clearHandler}
               >
                 <ClearIcon fill="currentColor" />
@@ -360,27 +338,22 @@ const Input = React.forwardRef<FormElement, InputProps>(
             )}
             {contentRight && (
               <InputContent
-                className={clsx(
-                  `${preClass}-content`,
-                  `${preClass}-content--right`
-                )}
                 applyStyles={contentRightStyling}
+                className={clsx(`${preClass}-content`, `${preClass}-content--right`)}
                 clickable={contentClickable}
-                onClick={(e: React.MouseEvent<HTMLDivElement>) =>
-                  contentClickHandler('right', e)
-                }
+                onClick={(e: React.MouseEvent<HTMLDivElement>) => contentClickHandler("right", e)}
               >
                 {contentRight}
               </InputContent>
             )}
             {labelRight && (
               <InputLabel
-                className={`${preClass}-label--right`}
-                isDefaultStatus={status === 'default'}
-                underlined={underlined}
                 bordered={bordered}
-                isRight={true}
+                className={`${preClass}-label--right`}
                 isDark={isDark}
+                isDefaultStatus={status === "default"}
+                isRight={true}
+                underlined={underlined}
               >
                 {labelRight}
               </InputLabel>
@@ -392,14 +365,12 @@ const Input = React.forwardRef<FormElement, InputProps>(
           withValue={!!helperText}
         >
           {helperText && (
-            <StyledHelperText className={`${preClass}-helper-text`}>
-              {helperText}
-            </StyledHelperText>
+            <StyledHelperText className={`${preClass}-helper-text`}>{helperText}</StyledHelperText>
           )}
         </StyledHelperTextContainer>
       </StyledInputMainContainer>
     );
-  }
+  },
 );
 
 type InputComponent<T, P = {}> = React.ForwardRefExoticComponent<
@@ -411,12 +382,12 @@ type InputComponent<T, P = {}> = React.ForwardRefExoticComponent<
 
 type ComponentProps = Partial<typeof defaultProps> &
   Omit<Props, keyof typeof defaultProps> &
-  NativeAttrs & { css?: CSS };
+  NativeAttrs & {css?: CSS};
 
-Input.displayName = 'NextUI.Input';
+Input.displayName = "NextUI.Input";
 
 Input.defaultProps = defaultProps;
 
-Input.toString = () => '.nextui-input';
+Input.toString = () => ".nextui-input";
 
 export default Input as InputComponent<FormElement, ComponentProps>;
diff --git a/packages/react/src/input/password-icon.tsx b/packages/react/src/input/password-icon.tsx
index 23ce8da138..f51c6d97f8 100644
--- a/packages/react/src/input/password-icon.tsx
+++ b/packages/react/src/input/password-icon.tsx
@@ -1,23 +1,23 @@
-import React from 'react';
+import React from "react";
 
 interface Props {
   visible: boolean;
 }
 
-const PasswordIcon: React.FC<Props> = ({ visible }) => {
+const PasswordIcon: React.FC<Props> = ({visible}) => {
   return (
     <svg
-      viewBox="0 0 24 24"
-      width="16"
+      className="nextui-input-password-icon"
+      fill="none"
       height="16"
+      shapeRendering="geometricPrecision"
       stroke="currentColor"
-      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      fill="none"
-      className="nextui-input-password-icon"
-      shapeRendering="geometricPrecision"
-      style={{ color: 'currentColor' }}
+      strokeWidth="1.5"
+      style={{color: "currentColor"}}
+      viewBox="0 0 24 24"
+      width="16"
     >
       {!visible ? (
         <>
diff --git a/packages/react/src/link/__tests__/index.test.tsx b/packages/react/src/link/__tests__/index.test.tsx
index 7c3efb8544..8bfeeef43f 100644
--- a/packages/react/src/link/__tests__/index.test.tsx
+++ b/packages/react/src/link/__tests__/index.test.tsx
@@ -1,41 +1,44 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Link from '../index';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('Link', () => {
-  it('should render correctly', () => {
+import Link from "../index";
+
+describe("Link", () => {
+  it("should render correctly", () => {
     const wrapper = mount(
       <div>
         <Link href="https://nextui.org">link</Link>
-        <Link href="https://nextui.org" color="secondary">
+        <Link color="secondary" href="https://nextui.org">
           link
         </Link>
-        <Link href="https://nextui.org" color="success" icon>
+        <Link icon color="success" href="https://nextui.org">
           link
         </Link>
-        <Link href="https://nextui.org" underline>
+        <Link underline href="https://nextui.org">
           link
         </Link>
-        <Link href="https://nextui.org" block>
+        <Link block href="https://nextui.org">
           link
         </Link>
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should be no errors when href missing', () => {
-    const errorSpy = jest.spyOn(console, 'error');
+  it("should be no errors when href missing", () => {
+    const errorSpy = jest.spyOn(console, "error");
     const wrapper = mount(<Link />);
+
     expect(errorSpy).not.toHaveBeenCalled();
     expect(() => wrapper.unmount()).not.toThrow();
     errorSpy.mockRestore();
   });
 
-  it('should forward ref', () => {
+  it("should forward ref", () => {
     let ref = React.createRef<HTMLAnchorElement>();
-    const errorSpy = jest.spyOn(console, 'error');
+    const errorSpy = jest.spyOn(console, "error");
     const wrapper = mount(<Link ref={ref} />);
 
     expect(errorSpy).not.toHaveBeenCalled();
@@ -44,8 +47,9 @@ describe('Link', () => {
     errorSpy.mockRestore();
   });
 
-  it('an warning should be thrown when using the pure prop', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  it("an warning should be thrown when using the pure prop", () => {
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+
     mount(<Link pure />);
     expect(errorSpy).toHaveBeenCalled();
     errorSpy.mockRestore();
diff --git a/packages/react/src/link/icon.tsx b/packages/react/src/link/icon.tsx
index caf446214c..ad15e6541c 100644
--- a/packages/react/src/link/icon.tsx
+++ b/packages/react/src/link/icon.tsx
@@ -1,19 +1,20 @@
-import React from 'react';
-import { StyledLinkIcon } from './link.styles';
+import React from "react";
+
+import {StyledLinkIcon} from "./link.styles";
 
 export const LinkIcon: React.FC<{}> = () => {
   return (
     <StyledLinkIcon
-      viewBox="0 0 24 24"
-      width="1em"
+      className="nextui-link-icon"
+      fill="none"
       height="1em"
+      shapeRendering="geometricPrecision"
       stroke="currentColor"
-      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      fill="none"
-      shapeRendering="geometricPrecision"
-      className="nextui-link-icon"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="1em"
     >
       <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
       <path d="M15 3h6v6" />
@@ -22,6 +23,6 @@ export const LinkIcon: React.FC<{}> = () => {
   );
 };
 
-LinkIcon.toString = () => '.nextui-link-icon';
+LinkIcon.toString = () => ".nextui-link-icon";
 
 export default React.memo(LinkIcon);
diff --git a/packages/react/src/link/index.ts b/packages/react/src/link/index.ts
index d4b20fa777..bba4b3f957 100644
--- a/packages/react/src/link/index.ts
+++ b/packages/react/src/link/index.ts
@@ -1,7 +1,7 @@
-import Link from './link';
+import Link from "./link";
 
-export type { LinkProps } from './link';
-export type { LinkVariantsProps } from './link.styles';
-export { StyledLink, StyledLinkIcon } from './link.styles';
+export type {LinkProps} from "./link";
+export type {LinkVariantsProps} from "./link.styles";
+export {StyledLink, StyledLinkIcon} from "./link.styles";
 
 export default Link;
diff --git a/packages/react/src/link/link.stories.tsx b/packages/react/src/link/link.stories.tsx
index 1483e1f005..c946274f4a 100644
--- a/packages/react/src/link/link.stories.tsx
+++ b/packages/react/src/link/link.stories.tsx
@@ -1,27 +1,29 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Link from './link';
-import { Spacer, Text } from '../index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Spacer, Text} from "../index";
+
+import Link from "./link";
 
 export default {
-  title: 'Navigation/Link',
+  title: "Navigation/Link",
   component: Link,
   decorators: [
     (Story) => (
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'space-between',
-          flexWrap: 'wrap',
-          width: '100%',
-          maxWidth: '100%'
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          width: "100%",
+          maxWidth: "100%",
         }}
       >
         <Story />
       </div>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
 const text = `"First solve the problem. Then, write the code." - Jon Johnson.`;
@@ -29,7 +31,7 @@ const text = `"First solve the problem. Then, write the code." - Jon Johnson.`;
 export const Default = () => <Link href="#">{text}</Link>;
 
 export const Underline = () => (
-  <Link color="primary" underline>
+  <Link underline color="primary">
     {text}
   </Link>
 );
@@ -40,17 +42,17 @@ export const Variants = () => (
       <Link href="#">{text}</Link>
     </Text>
     <Text>
-      <Link href="#" color="secondary">
+      <Link color="secondary" href="#">
         {text}
       </Link>
     </Text>
     <Text>
-      <Link href="#" color="success">
+      <Link color="success" href="#">
         {text}
       </Link>
     </Text>
     <Text>
-      <Link href="#" color="error">
+      <Link color="error" href="#">
         {text}
       </Link>
     </Text>
@@ -59,18 +61,18 @@ export const Variants = () => (
 
 export const Icon = () => (
   <>
-    <Link href="#" icon>
+    <Link icon href="#">
       {text}
     </Link>
     <Spacer y={0.5} />
-    <Link href="#" icon color="primary">
+    <Link icon color="primary" href="#">
       {text}
     </Link>
   </>
 );
 
 export const Block = () => (
-  <Link href="#" block>
+  <Link block href="#">
     {text}
   </Link>
 );
diff --git a/packages/react/src/link/link.styles.ts b/packages/react/src/link/link.styles.ts
index f3352eb29f..5594b7bfe3 100644
--- a/packages/react/src/link/link.styles.ts
+++ b/packages/react/src/link/link.styles.ts
@@ -1,132 +1,132 @@
-import { theme, styled, VariantProps } from '../theme/stitches.config';
-import { addColorAlpha } from '../utils/color';
+import {theme, styled, VariantProps} from "../theme/stitches.config";
+import {addColorAlpha} from "../utils/color";
 
-export const StyledLinkIcon = styled('svg', {
-  ml: '$1',
-  as: 'center',
-  display: 'inline-flex',
-  color: 'currentColor'
+export const StyledLinkIcon = styled("svg", {
+  ml: "$1",
+  as: "center",
+  display: "inline-flex",
+  color: "currentColor",
 });
 
-export const StyledLink = styled('a', {
-  display: 'inline-flex',
-  alignItems: 'baseline',
-  lineHeight: 'inherit',
-  textDecoration: 'none',
-  width: 'fitContent',
-  backgroundImage: 'inherit',
-  backgroundColor: 'inherit',
-  backgroundClip: 'inherit',
-  WebkitTextFillColor: 'inherit',
-  '&:hover': {
-    opacity: 0.8
+export const StyledLink = styled("a", {
+  display: "inline-flex",
+  alignItems: "baseline",
+  lineHeight: "inherit",
+  textDecoration: "none",
+  width: "fitContent",
+  backgroundImage: "inherit",
+  backgroundColor: "inherit",
+  backgroundClip: "inherit",
+  WebkitTextFillColor: "inherit",
+  "&:hover": {
+    opacity: 0.8,
   },
-  '@motion': {
-    transition: 'none'
+  "@motion": {
+    transition: "none",
   },
   variants: {
     color: {
       default: {
-        color: '$link'
+        color: "$link",
       },
       text: {
-        color: '$text'
+        color: "$text",
       },
       primary: {
-        color: '$primary'
+        color: "$primary",
       },
       secondary: {
-        color: '$secondary'
+        color: "$secondary",
       },
       success: {
-        color: '$success'
+        color: "$success",
       },
       warning: {
-        color: '$warning'
+        color: "$warning",
       },
       error: {
-        color: '$error'
-      }
+        color: "$error",
+      },
     },
     underline: {
       true: {
-        '&:hover, &:active, &:focus': {
-          textDecoration: 'underline'
-        }
-      }
+        "&:hover, &:active, &:focus": {
+          textDecoration: "underline",
+        },
+      },
     },
     block: {
       true: {
-        padding: '$2 $4',
-        borderRadius: '$base'
-      }
+        padding: "$2 $4",
+        borderRadius: "$base",
+      },
     },
     animated: {
       true: {
-        transition: '$link'
-      }
-    }
+        transition: "$link",
+      },
+    },
   },
   compoundVariants: [
     {
-      color: 'default',
+      color: "default",
       block: true,
       css: {
-        '&:hover': {
-          backgroundColor: addColorAlpha(theme.colors?.link?.value, 0.2)
-        }
-      }
+        "&:hover": {
+          backgroundColor: addColorAlpha(theme.colors?.link?.value, 0.2),
+        },
+      },
     },
     {
-      color: 'primary',
+      color: "primary",
       block: true,
       css: {
-        '&:hover': {
-          backgroundColor: '$primaryLight'
-        }
-      }
+        "&:hover": {
+          backgroundColor: "$primaryLight",
+        },
+      },
     },
     {
-      color: 'secondary',
+      color: "secondary",
       block: true,
       css: {
-        '&:hover': {
-          backgroundColor: '$secondaryLight'
-        }
-      }
+        "&:hover": {
+          backgroundColor: "$secondaryLight",
+        },
+      },
     },
     {
-      color: 'success',
+      color: "success",
       block: true,
       css: {
-        '&:hover': {
-          backgroundColor: '$successLight'
-        }
-      }
+        "&:hover": {
+          backgroundColor: "$successLight",
+        },
+      },
     },
     {
-      color: 'warning',
+      color: "warning",
       block: true,
       css: {
-        '&:hover': {
-          backgroundColor: '$warningLight'
-        }
-      }
+        "&:hover": {
+          backgroundColor: "$warningLight",
+        },
+      },
     },
     {
-      color: 'error',
+      color: "error",
       block: true,
       css: {
-        '&:hover': {
-          backgroundColor: '$errorLight'
-        }
-      }
-    }
+        "&:hover": {
+          backgroundColor: "$errorLight",
+        },
+      },
+    },
   ],
   defaultVariants: {
-    color: 'default',
-    animated: true
-  }
+    color: "default",
+    animated: true,
+  },
 });
 
 export type LinkVariantsProps = VariantProps<typeof StyledLink>;
diff --git a/packages/react/src/link/link.tsx b/packages/react/src/link/link.tsx
index 756055f1e9..345324c205 100644
--- a/packages/react/src/link/link.tsx
+++ b/packages/react/src/link/link.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
-import withDefaults from '../utils/with-defaults';
-import LinkIcon from './icon';
-import { CSS } from '../theme/stitches.config';
-import StyledLink, { LinkVariantsProps } from './link.styles';
-import { __DEV__ } from '../utils/assertion';
+import React from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {CSS} from "../theme/stitches.config";
+import {__DEV__} from "../utils/assertion";
+
+import LinkIcon from "./icon";
+import StyledLink, {LinkVariantsProps} from "./link.styles";
 
 export interface Props {
   icon?: boolean;
@@ -11,31 +13,28 @@ export interface Props {
 }
 
 const defaultProps = {
-  icon: false
+  icon: false,
 };
 
 type NativeAttrs = Omit<React.AnchorHTMLAttributes<unknown>, keyof Props>;
 
-export type LinkProps = Props &
-  typeof defaultProps &
-  NativeAttrs &
-  LinkVariantsProps & { css?: CSS };
+export type LinkProps = Props & typeof defaultProps & NativeAttrs & LinkVariantsProps & {css?: CSS};
 
 const Link = React.forwardRef<React.ElementRef<typeof StyledLink>, LinkProps>(
-  ({ children, icon, ...props }, forwardedRef) => (
+  ({children, icon, ...props}, forwardedRef) => (
     <StyledLink {...props} ref={forwardedRef}>
       <>
         {children}
         {icon && <LinkIcon />}
       </>
     </StyledLink>
-  )
+  ),
 );
 
 if (__DEV__) {
-  Link.displayName = 'NextUI.Link';
+  Link.displayName = "NextUI.Link";
 }
 
-Link.toString = () => '.nextui-link';
+Link.toString = () => ".nextui-link";
 
 export default withDefaults(Link, defaultProps);
diff --git a/packages/react/src/loading/__tests__/index.test.tsx b/packages/react/src/loading/__tests__/index.test.tsx
index 2cbe002c84..0c053d38ee 100644
--- a/packages/react/src/loading/__tests__/index.test.tsx
+++ b/packages/react/src/loading/__tests__/index.test.tsx
@@ -1,36 +1,35 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Loading from '../index';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('Loading', () => {
-  it('should render correctly', () => {
+import Loading from "../index";
+
+describe("Loading", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Loading />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).toMatchSnapshot();
   });
 
-  it('should render with default aria-label', () => {
+  it("should render with default aria-label", () => {
     const wrapper = mount(<Loading />);
-    expect(wrapper.find('.nextui-loading').at(0).prop('aria-label')).toEqual(
-      'Loading'
-    );
+
+    expect(wrapper.find(".nextui-loading").at(0).prop("aria-label")).toEqual("Loading");
   });
 
-  it('should render with default aria-label for spinner', () => {
+  it("should render with default aria-label for spinner", () => {
     const wrapper = mount(<Loading type="spinner" />);
-    expect(
-      wrapper.find('.nextui-spinner-container').at(0).prop('aria-label')
-    ).toEqual('Loading');
+
+    expect(wrapper.find(".nextui-spinner-container").at(0).prop("aria-label")).toEqual("Loading");
   });
 
-  it('should work with children', () => {
+  it("should work with children", () => {
     const wrapper = mount(<Loading>Loading</Loading>);
-    expect(wrapper.find('.nextui-loading-label').at(0).text()).toContain(
-      'Loading'
-    );
+
+    expect(wrapper.find(".nextui-loading-label").at(0).text()).toContain("Loading");
   });
 
-  it('should work with different colors', () => {
+  it("should work with different colors", () => {
     const wrapper = mount(
       <div>
         <Loading color="primary" />
@@ -38,13 +37,14 @@ describe('Loading', () => {
         <Loading color="secondary" />
         <Loading color="warning" />
         <Loading color="error" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).toMatchSnapshot();
   });
 
-  it('should work with different text colors', () => {
+  it("should work with different text colors", () => {
     const wrapper = mount(
       <div>
         <Loading textColor="primary" />
@@ -52,13 +52,14 @@ describe('Loading', () => {
         <Loading textColor="secondary" />
         <Loading textColor="warning" />
         <Loading textColor="error" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).toMatchSnapshot();
   });
 
-  it('should work with different sizes', () => {
+  it("should work with different sizes", () => {
     const wrapper = mount(
       <div>
         <Loading size="xs" />
@@ -66,13 +67,14 @@ describe('Loading', () => {
         <Loading size="md" />
         <Loading size="lg" />
         <Loading size="xl" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).toMatchSnapshot();
   });
 
-  it('should work with different types', () => {
+  it("should work with different types", () => {
     const wrapper = mount(
       <div>
         <Loading type="default" />
@@ -80,14 +82,16 @@ describe('Loading', () => {
         <Loading type="points" />
         <Loading type="points-opacity" />
         <Loading type="gradient" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).toMatchSnapshot();
   });
 
-  it('should work with text in spinner type', () => {
+  it("should work with text in spinner type", () => {
     const wrapper = mount(<Loading type="spinner">Spinner</Loading>);
-    expect(wrapper.find('.nextui-spinner').at(0).text()).toContain('Spinner');
+
+    expect(wrapper.find(".nextui-spinner").at(0).text()).toContain("Spinner");
   });
 });
diff --git a/packages/react/src/loading/index.ts b/packages/react/src/loading/index.ts
index 1931727cba..f275e1309e 100644
--- a/packages/react/src/loading/index.ts
+++ b/packages/react/src/loading/index.ts
@@ -1,7 +1,7 @@
-import Loading from './loading';
+import Loading from "./loading";
 
-export type { LoadingProps } from './loading';
-export type { SpinnerProps } from './spinner';
+export type {LoadingProps} from "./loading";
+export type {SpinnerProps} from "./spinner";
 
 // export styled components
 export {
@@ -10,16 +10,16 @@ export {
   StyledSpinner,
   StyledSpinnerSpan,
   StyledLoading,
-  StyledLoadingLabel
-} from './loading.styles';
+  StyledLoadingLabel,
+} from "./loading.styles";
 
 export type {
   LoadingContainerVariantsProps,
   LoadingVariantsProps,
   SpinnerVariantsProps,
   SpinnerContainerVariantsProps,
-  LoadingLabelVariantsProps
-} from './loading.styles';
+  LoadingLabelVariantsProps,
+} from "./loading.styles";
 
-export { default as Spinner } from './spinner';
+export {default as Spinner} from "./spinner";
 export default Loading;
diff --git a/packages/react/src/loading/loading.stories.tsx b/packages/react/src/loading/loading.stories.tsx
index cd9ad515a8..d6eff0eba7 100644
--- a/packages/react/src/loading/loading.stories.tsx
+++ b/packages/react/src/loading/loading.stories.tsx
@@ -1,24 +1,26 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Loading from './index';
-import { Spacer } from '../index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Spacer} from "../index";
+
+import Loading from "./index";
 
 export default {
-  title: 'Feedback/Loading',
-  component: Loading
+  title: "Feedback/Loading",
+  component: Loading,
 } as Meta;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Container = ({ children }: any) => (
+const Container = ({children}: any) => (
   <div
     style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-between',
-      alignItems: 'flex-start',
-      marginLeft: '1rem',
-      width: '100%',
-      maxWidth: '340px'
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      marginLeft: "1rem",
+      width: "100%",
+      maxWidth: "340px",
     }}
   >
     {children}
@@ -95,19 +97,19 @@ export const Types = () => (
   <Container>
     <Loading type="default">default</Loading>
     <Spacer y={2} />
-    <Loading type="spinner" size="lg">
+    <Loading size="lg" type="spinner">
       spinner
     </Loading>
     <Spacer y={2} />
-    <Loading type="points" style={{ marginLeft: '-0.5rem' }}>
+    <Loading style={{marginLeft: "-0.5rem"}} type="points">
       points
     </Loading>
     <Spacer y={2} />
-    <Loading style={{ marginLeft: '-0.5rem' }} type="points-opacity">
+    <Loading style={{marginLeft: "-0.5rem"}} type="points-opacity">
       points-opacity
     </Loading>
     <Spacer y={2} />
-    <Loading type="gradient" style={{ marginLeft: '-0.5rem' }}>
+    <Loading style={{marginLeft: "-0.5rem"}} type="gradient">
       gradient
     </Loading>
   </Container>
diff --git a/packages/react/src/loading/loading.styles.ts b/packages/react/src/loading/loading.styles.ts
index 8e67e1e7a8..80287d51a7 100644
--- a/packages/react/src/loading/loading.styles.ts
+++ b/packages/react/src/loading/loading.styles.ts
@@ -1,463 +1,459 @@
-import { styled, keyframes, VariantProps } from '../theme/stitches.config';
+import {styled, keyframes, VariantProps} from "../theme/stitches.config";
 
 const loadingBlink = keyframes({
-  '0%': {
-    opacity: '0.2'
+  "0%": {
+    opacity: "0.2",
   },
-  '20%': {
-    opacity: 1
+  "20%": {
+    opacity: 1,
+  },
+  "100%": {
+    opacity: "0.2",
   },
-  '100%': {
-    opacity: '0.2'
-  }
 });
 
 const rotate = keyframes({
-  '0%': {
-    transform: 'rotate(0deg)'
+  "0%": {
+    transform: "rotate(0deg)",
+  },
+  "100%": {
+    transform: "rotate(360deg)",
   },
-  '100%': {
-    transform: 'rotate(360deg)'
-  }
 });
 
 const points = keyframes({
-  '0%': {
-    transform: 'translate(0px, 0px)'
+  "0%": {
+    transform: "translate(0px, 0px)",
+  },
+  "50%": {
+    transform: "translate(0, calc(-$$loadingSize * 1.4))",
   },
-  '50%': {
-    transform: 'translate(0, calc(-$$loadingSize * 1.4))'
+  "100%": {
+    transform: "translate(0px, 0px)",
   },
-  '100%': {
-    transform: 'translate(0px, 0px)'
-  }
 });
 
 const spinner = keyframes({
-  '0%': {
-    opacity: 1
+  "0%": {
+    opacity: 1,
+  },
+  "100%": {
+    opacity: 0.15,
   },
-  '100%': {
-    opacity: 0.15
-  }
 });
 
-export const StyledLoadingContainer = styled('div', {
-  d: 'inline-flex',
-  fd: 'column',
-  ai: 'center',
-  position: 'relative',
+export const StyledLoadingContainer = styled("div", {
+  d: "inline-flex",
+  fd: "column",
+  ai: "center",
+  position: "relative",
   variants: {
     color: {
       currentColor: {
-        $$loadingColor: 'currentColor'
+        $$loadingColor: "currentColor",
       },
       white: {
-        $$loadingColor: '$colors$white'
+        $$loadingColor: "$colors$white",
       },
       default: {
-        $$loadingColor: '$colors$primary'
+        $$loadingColor: "$colors$primary",
       },
       primary: {
-        $$loadingColor: '$colors$primary'
+        $$loadingColor: "$colors$primary",
       },
       secondary: {
-        $$loadingColor: '$colors$secondary'
+        $$loadingColor: "$colors$secondary",
       },
       success: {
-        $$loadingColor: '$colors$success'
+        $$loadingColor: "$colors$success",
       },
       warning: {
-        $$loadingColor: '$colors$warning'
+        $$loadingColor: "$colors$warning",
       },
       error: {
-        $$loadingColor: '$colors$error'
-      }
+        $$loadingColor: "$colors$error",
+      },
     },
     textColor: {
       white: {
-        $$loadingTextColor: '$colors$white'
+        $$loadingTextColor: "$colors$white",
       },
       default: {
-        $$loadingTextColor: '$colors$text'
+        $$loadingTextColor: "$colors$text",
       },
       primary: {
-        $$loadingTextColor: '$colors$primary'
+        $$loadingTextColor: "$colors$primary",
       },
       secondary: {
-        $$loadingTextColor: '$colors$secondary'
+        $$loadingTextColor: "$colors$secondary",
       },
       success: {
-        $$loadingTextColor: '$colors$success'
+        $$loadingTextColor: "$colors$success",
       },
       warning: {
-        $$loadingTextColor: '$colors$warning'
+        $$loadingTextColor: "$colors$warning",
       },
       error: {
-        $$loadingTextColor: '$colors$error'
-      }
-    }
+        $$loadingTextColor: "$colors$error",
+      },
+    },
   },
   defaultVariants: {
-    color: 'default',
-    textColor: 'default'
-  }
+    color: "default",
+    textColor: "default",
+  },
 });
 
-export const StyledSpinnerContainer = styled('div', {
-  size: '100%',
-  position: 'relative',
-  left: '50%',
-  top: '50%'
+export const StyledSpinnerContainer = styled("div", {
+  size: "100%",
+  position: "relative",
+  left: "50%",
+  top: "50%",
 });
 
-export const StyledSpinner = styled('div', {
-  d: 'flex',
-  fd: 'column',
-  jc: 'center',
-  ai: 'center',
-  position: 'relative',
+export const StyledSpinner = styled("div", {
+  d: "flex",
+  fd: "column",
+  jc: "center",
+  ai: "center",
+  position: "relative",
   variants: {
     size: {
       xs: {
-        size: '$6'
+        size: "$6",
       },
       sm: {
-        size: '$8'
+        size: "$8",
       },
       md: {
-        size: '$9'
+        size: "$9",
       },
       lg: {
-        size: '$11'
+        size: "$11",
       },
       xl: {
-        size: '$12'
-      }
-    }
-  }
+        size: "$12",
+      },
+    },
+  },
 });
 
-export const StyledSpinnerSpan = styled('span', {
-  bg: '$$loadingColor',
-  position: 'absolute',
-  top: '-3.9%',
-  width: '24%',
-  height: '8%',
-  left: '-10%',
-  br: '$lg',
+export const StyledSpinnerSpan = styled("span", {
+  bg: "$$loadingColor",
+  position: "absolute",
+  top: "-3.9%",
+  width: "24%",
+  height: "8%",
+  left: "-10%",
+  br: "$lg",
   animation: `${spinner} 1.2s linear 0s infinite normal none running`,
-  '&:nth-child(1)': {
-    animationDelay: '-1.2s',
-    transform: 'rotate(0deg) translate(146%)'
+  "&:nth-child(1)": {
+    animationDelay: "-1.2s",
+    transform: "rotate(0deg) translate(146%)",
   },
-  '&:nth-child(2)': {
-    animationDelay: '-1.1s',
-    transform: 'rotate(30deg) translate(146%)'
+  "&:nth-child(2)": {
+    animationDelay: "-1.1s",
+    transform: "rotate(30deg) translate(146%)",
   },
-  '&:nth-child(3)': {
-    animationDelay: '-1s',
-    transform: 'rotate(60deg) translate(146%)'
+  "&:nth-child(3)": {
+    animationDelay: "-1s",
+    transform: "rotate(60deg) translate(146%)",
   },
-  '&:nth-child(4)': {
-    animationDelay: '-0.9s',
-    transform: 'rotate(90deg) translate(146%)'
+  "&:nth-child(4)": {
+    animationDelay: "-0.9s",
+    transform: "rotate(90deg) translate(146%)",
   },
 
-  '&:nth-child(5)': {
-    animationDelay: '-0.8s',
-    transform: 'rotate(120deg) translate(146%)'
+  "&:nth-child(5)": {
+    animationDelay: "-0.8s",
+    transform: "rotate(120deg) translate(146%)",
   },
-  '&:nth-child(6)': {
-    animationDelay: '-0.7s',
-    transform: 'rotate(150deg) translate(146%)'
+  "&:nth-child(6)": {
+    animationDelay: "-0.7s",
+    transform: "rotate(150deg) translate(146%)",
   },
 
-  '&:nth-child(7)': {
-    animationDelay: '-0.6s',
-    transform: 'rotate(180deg) translate(146%)'
+  "&:nth-child(7)": {
+    animationDelay: "-0.6s",
+    transform: "rotate(180deg) translate(146%)",
+  },
+  "&:nth-child(8)": {
+    animationDelay: "-0.5s",
+    transform: "rotate(210deg) translate(146%)",
   },
-  '&:nth-child(8)': {
-    animationDelay: '-0.5s',
-    transform: 'rotate(210deg) translate(146%)'
+  "&:nth-child(9)": {
+    animationDelay: "-0.4s",
+    transform: "rotate(240deg) translate(146%)",
   },
-  '&:nth-child(9)': {
-    animationDelay: '-0.4s',
-    transform: 'rotate(240deg) translate(146%)'
+  "&:nth-child(10)": {
+    animationDelay: "-0.3s",
+    transform: "rotate(270deg) translate(146%)",
   },
-  '&:nth-child(10)': {
-    animationDelay: '-0.3s',
-    transform: 'rotate(270deg) translate(146%)'
+  "&:nth-child(11)": {
+    animationDelay: "-0.2s",
+    transform: "rotate(300deg) translate(146%)",
   },
-  '&:nth-child(11)': {
-    animationDelay: '-0.2s',
-    transform: 'rotate(300deg) translate(146%)'
+  "&:nth-child(12)": {
+    animationDelay: "-0.1s",
+    transform: "rotate(330deg) translate(146%)",
   },
-  '&:nth-child(12)': {
-    animationDelay: '-0.1s',
-    transform: 'rotate(330deg) translate(146%)'
-  }
 });
 
-export const StyledLoading = styled('span', {
-  position: 'absolute',
+export const StyledLoading = styled("span", {
+  position: "absolute",
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  size: '100%',
-  dflex: 'center',
-  bgColor: 'transparent',
-  us: 'none',
+  size: "100%",
+  dflex: "center",
+  bgColor: "transparent",
+  us: "none",
   variants: {
     size: {
       xs: {
-        $$loadingSize: '$space$8',
-        $$loadingBorder: '$space$1'
+        $$loadingSize: "$space$8",
+        $$loadingBorder: "$space$1",
       },
       sm: {
-        $$loadingSize: '$space$10',
-        $$loadingBorder: '$space$1'
+        $$loadingSize: "$space$10",
+        $$loadingBorder: "$space$1",
       },
       md: {
-        $$loadingSize: '$space$12',
-        $$loadingBorder: 'calc($space$1 * 1.5)'
+        $$loadingSize: "$space$12",
+        $$loadingBorder: "calc($space$1 * 1.5)",
       },
       lg: {
-        $$loadingSize: '$space$15',
-        $$loadingBorder: '$space$2'
+        $$loadingSize: "$space$15",
+        $$loadingBorder: "$space$2",
       },
       xl: {
-        $$loadingSize: '$space$18',
-        $$loadingBorder: '$space$3'
-      }
+        $$loadingSize: "$space$18",
+        $$loadingBorder: "$space$3",
+      },
     },
     type: {
       default: {
-        d: 'flex',
-        br: '$rounded',
-        position: 'relative',
-        size: '$$loadingSize',
+        d: "flex",
+        br: "$rounded",
+        position: "relative",
+        size: "$$loadingSize",
         i: {
-          top: '0px',
-          size: '100%',
-          position: 'absolute',
-          br: 'inherit'
+          top: "0px",
+          size: "100%",
+          position: "absolute",
+          br: "inherit",
         },
-        '._1': {
-          border: '$$loadingBorder solid $$loadingColor',
-          borderTop: '$$loadingBorder solid transparent',
-          borderLeft: '$$loadingBorder solid transparent',
-          borderRight: '$$loadingBorder solid transparent',
-          animation: `${rotate} 0.8s ease infinite`
+        "._1": {
+          border: "$$loadingBorder solid $$loadingColor",
+          borderTop: "$$loadingBorder solid transparent",
+          borderLeft: "$$loadingBorder solid transparent",
+          borderRight: "$$loadingBorder solid transparent",
+          animation: `${rotate} 0.8s ease infinite`,
         },
-        '._2': {
-          border: '$$loadingBorder dotted $$loadingColor',
-          borderTop: '$$loadingBorder solid transparent',
-          borderLeft: '$$loadingBorder solid transparent',
-          borderRight: '$$loadingBorder solid transparent',
+        "._2": {
+          border: "$$loadingBorder dotted $$loadingColor",
+          borderTop: "$$loadingBorder solid transparent",
+          borderLeft: "$$loadingBorder solid transparent",
+          borderRight: "$$loadingBorder solid transparent",
           animation: `${rotate} 0.8s linear infinite`,
-          opacity: 0.5
+          opacity: 0.5,
+        },
+        "._3": {
+          display: "none",
         },
-        '._3': {
-          display: 'none'
-        }
       },
       points: {
-        d: 'flex',
-        position: 'relative',
-        transform: 'translate(0, calc($$loadingSize * 0.6))',
+        d: "flex",
+        position: "relative",
+        transform: "translate(0, calc($$loadingSize * 0.6))",
         i: {
-          size: '$$loadingSize',
-          margin: '0 3px',
-          bg: '$$loadingColor'
+          size: "$$loadingSize",
+          margin: "0 3px",
+          bg: "$$loadingColor",
         },
-        '._1': {
-          br: '$rounded',
-          animation: `${points} 0.75s ease infinite`
+        "._1": {
+          br: "$rounded",
+          animation: `${points} 0.75s ease infinite`,
         },
-        '._2': {
-          br: '$rounded',
-          animation: `${points} 0.75s ease infinite 0.25s`
+        "._2": {
+          br: "$rounded",
+          animation: `${points} 0.75s ease infinite 0.25s`,
         },
-        '._3': {
-          br: '$rounded',
-          animation: `${points} 0.75s ease infinite 0.5s`
-        }
-      },
-      'points-opacity': {
-        d: 'flex',
-        position: 'relative',
+        "._3": {
+          br: "$rounded",
+          animation: `${points} 0.75s ease infinite 0.5s`,
+        },
+      },
+      "points-opacity": {
+        d: "flex",
+        position: "relative",
         i: {
-          display: 'inline-block',
-          size: '$$loadingSize',
-          br: '$rounded',
-          bg: '$$loadingColor',
-          margin: '0 1px',
-          animation: `${loadingBlink} 1.4s infinite both`
+          display: "inline-block",
+          size: "$$loadingSize",
+          br: "$rounded",
+          bg: "$$loadingColor",
+          margin: "0 1px",
+          animation: `${loadingBlink} 1.4s infinite both`,
         },
-        '._2': {
-          animationDelay: '0.2s'
+        "._2": {
+          animationDelay: "0.2s",
+        },
+        "._3": {
+          animationDelay: "0.4s",
         },
-        '._3': {
-          animationDelay: '0.4s'
-        }
       },
       spinner: {},
       gradient: {
-        display: 'flex',
-        position: 'relative',
-        size: '$$loadingSize',
-        '._1': {
-          position: 'absolute',
-          size: '100%',
-          border: '0px',
+        display: "flex",
+        position: "relative",
+        size: "$$loadingSize",
+        "._1": {
+          position: "absolute",
+          size: "100%",
+          border: "0px",
           animation: `${rotate} 1s linear infinite`,
-          top: '0px',
-          br: '$rounded',
-          bg: 'linear-gradient(0deg, $background 33%,$$loadingColor 100%)'
+          top: "0px",
+          br: "$rounded",
+          bg: "linear-gradient(0deg, $background 33%,$$loadingColor 100%)",
+        },
+        "._2": {
+          top: "2px",
+          position: "absolute",
+          size: "calc(100% - 4px)",
+          border: "0px",
+          bg: "$background",
+          br: "$rounded",
         },
-        '._2': {
-          top: '2px',
-          position: 'absolute',
-          size: 'calc(100% - 4px)',
-          border: '0px',
-          bg: '$background',
-          br: '$rounded'
+        "._3": {
+          display: "none",
         },
-        '._3': {
-          display: 'none'
-        }
-      }
-    }
+      },
+    },
   },
   compoundVariants: [
     // points-opacity & xs size
     {
-      size: 'xs',
-      type: 'points-opacity',
+      size: "xs",
+      type: "points-opacity",
       css: {
-        $$loadingSize: '$space$1'
-      }
+        $$loadingSize: "$space$1",
+      },
     },
     // points-opacity & sm size
     {
-      size: 'sm',
-      type: 'points-opacity',
+      size: "sm",
+      type: "points-opacity",
       css: {
-        $$loadingSize: '$space$2'
-      }
+        $$loadingSize: "$space$2",
+      },
     },
     // points-opacity & md size
     {
-      size: 'md',
-      type: 'points-opacity',
+      size: "md",
+      type: "points-opacity",
       css: {
-        $$loadingSize: '$space$3'
-      }
+        $$loadingSize: "$space$3",
+      },
     },
     // points-opacity & lg size
     {
-      size: 'lg',
-      type: 'points-opacity',
+      size: "lg",
+      type: "points-opacity",
       css: {
-        $$loadingSize: '$space$4'
-      }
+        $$loadingSize: "$space$4",
+      },
     },
     // points-opacity & xl size
     {
-      size: 'xl',
-      type: 'points-opacity',
+      size: "xl",
+      type: "points-opacity",
       css: {
-        $$loadingSize: '$space$5'
-      }
+        $$loadingSize: "$space$5",
+      },
     },
     // points & xs size
     {
-      size: 'xs',
-      type: 'points',
+      size: "xs",
+      type: "points",
       css: {
-        $$loadingSize: '$space$1'
-      }
+        $$loadingSize: "$space$1",
+      },
     },
     // points & sm size
     {
-      size: 'sm',
-      type: 'points',
+      size: "sm",
+      type: "points",
       css: {
-        $$loadingSize: '$space$2'
-      }
+        $$loadingSize: "$space$2",
+      },
     },
     // points & md size
     {
-      size: 'md',
-      type: 'points',
+      size: "md",
+      type: "points",
       css: {
-        $$loadingSize: '$space$3'
-      }
+        $$loadingSize: "$space$3",
+      },
     },
     // points & lg size
     {
-      size: 'lg',
-      type: 'points',
+      size: "lg",
+      type: "points",
       css: {
-        $$loadingSize: '$space$4'
-      }
+        $$loadingSize: "$space$4",
+      },
     },
     // points & xl size
     {
-      size: 'xl',
-      type: 'points',
+      size: "xl",
+      type: "points",
       css: {
-        $$loadingSize: '$space$5'
-      }
-    }
+        $$loadingSize: "$space$5",
+      },
+    },
   ],
   defaultVariants: {
-    type: 'default'
-  }
+    type: "default",
+  },
 });
 
-export const StyledLoadingLabel = styled('label', {
-  mt: '$1',
-  color: '$$loadingTextColor',
-  fontSize: '$$loadingSize',
-  '*': {
-    margin: 0
+export const StyledLoadingLabel = styled("label", {
+  mt: "$1",
+  color: "$$loadingTextColor",
+  fontSize: "$$loadingSize",
+  "*": {
+    margin: 0,
   },
   variants: {
     size: {
       xs: {
-        fontSize: '$space$5',
-        marginTop: '$2'
+        fontSize: "$space$5",
+        marginTop: "$2",
       },
       sm: {
-        fontSize: '$space$6',
-        marginTop: '$3'
+        fontSize: "$space$6",
+        marginTop: "$3",
       },
       md: {
-        fontSize: '$base',
-        marginTop: '$4'
+        fontSize: "$base",
+        marginTop: "$4",
       },
       lg: {
-        fontSize: '$space$10',
-        marginTop: '$4'
+        fontSize: "$space$10",
+        marginTop: "$4",
       },
       xl: {
-        fontSize: '$space$11',
-        marginTop: '$5'
-      }
-    }
-  }
+        fontSize: "$space$11",
+        marginTop: "$5",
+      },
+    },
+  },
 });
 
-export type LoadingContainerVariantsProps = VariantProps<
-  typeof StyledLoadingContainer
->;
+export type LoadingContainerVariantsProps = VariantProps<typeof StyledLoadingContainer>;
 
 export type LoadingVariantsProps = VariantProps<typeof StyledLoading>;
 export type SpinnerVariantsProps = VariantProps<typeof StyledSpinner>;
-export type SpinnerContainerVariantsProps = VariantProps<
-  typeof StyledSpinnerContainer
->;
+export type SpinnerContainerVariantsProps = VariantProps<typeof StyledSpinnerContainer>;
 export type LoadingLabelVariantsProps = VariantProps<typeof StyledLoadingLabel>;
diff --git a/packages/react/src/loading/loading.tsx b/packages/react/src/loading/loading.tsx
index cb4c9d8317..b7426f5b34 100644
--- a/packages/react/src/loading/loading.tsx
+++ b/packages/react/src/loading/loading.tsx
@@ -1,14 +1,16 @@
-import React, { useMemo } from 'react';
-import withDefaults from '../utils/with-defaults';
-import { NormalSizes, NormalLoaders } from '../utils/prop-types';
-import { CSS } from '../theme/stitches.config';
+import React, {useMemo} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {NormalSizes, NormalLoaders} from "../utils/prop-types";
+import {CSS} from "../theme/stitches.config";
+
 import {
   StyledLoadingContainer,
   StyledLoading,
   StyledLoadingLabel,
-  LoadingContainerVariantsProps
-} from './loading.styles';
-import Spinner from './spinner';
+  LoadingContainerVariantsProps,
+} from "./loading.styles";
+import Spinner from "./spinner";
 
 interface Props {
   size?: NormalSizes;
@@ -19,8 +21,8 @@ interface Props {
 }
 
 const defaultProps = {
-  size: 'md' as NormalSizes,
-  type: 'default' as NormalLoaders
+  size: "md" as NormalSizes,
+  type: "default" as NormalLoaders,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -28,9 +30,9 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export type LoadingProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  LoadingContainerVariantsProps & { css?: CSS };
+  LoadingContainerVariantsProps & {css?: CSS};
 
-const preClass = 'nextui-loading';
+const preClass = "nextui-loading";
 
 const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = ({
   children,
@@ -40,34 +42,34 @@ const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = ({
   type,
   ...props
 }) => {
-  const ariaLabel = children ? '' : 'Loading';
+  const ariaLabel = children ? "" : "Loading";
 
   const loadingGradientCSS = useMemo(() => {
-    return type === 'gradient' ? { '._2': { bg: gradientBackground } } : {};
+    return type === "gradient" ? {"._2": {bg: gradientBackground}} : {};
   }, [type]);
 
   return (
     <StyledLoadingContainer {...props}>
-      {type === 'spinner' ? (
+      {type === "spinner" ? (
         <Spinner size={size}>{children}</Spinner>
       ) : (
         <>
           <StyledLoading
-            className={`${preClass} ${preClass}-${type}`}
-            type={type}
-            size={size}
             aria-label={ariaLabel}
+            className={`${preClass} ${preClass}-${type}`}
             css={{
               ...(loadingCss as any),
-              ...loadingGradientCSS
+              ...loadingGradientCSS,
             }}
+            size={size}
+            type={type}
           >
             <i className="_1" />
             <i className="_2" />
             <i className="_3" />
           </StyledLoading>
           {children && (
-            <StyledLoadingLabel size={size} className={`${preClass}-label`}>
+            <StyledLoadingLabel className={`${preClass}-label`} size={size}>
               {children}
             </StyledLoadingLabel>
           )}
@@ -77,7 +79,7 @@ const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = ({
   );
 };
 
-Loading.toString = () => '.nextui-loading';
+Loading.toString = () => ".nextui-loading";
 
 const MemoLoading = React.memo(Loading);
 
diff --git a/packages/react/src/loading/spinner.tsx b/packages/react/src/loading/spinner.tsx
index c9a698fde6..97d943bfce 100644
--- a/packages/react/src/loading/spinner.tsx
+++ b/packages/react/src/loading/spinner.tsx
@@ -1,14 +1,16 @@
-import React from 'react';
-import { NormalSizes, SimpleColors } from '../utils/prop-types';
-import { CSS } from '../theme/stitches.config';
+import React from "react";
+
+import {NormalSizes, SimpleColors} from "../utils/prop-types";
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+
 import {
   StyledSpinner,
   StyledSpinnerContainer,
   StyledSpinnerSpan,
   StyledLoadingLabel,
-  SpinnerVariantsProps
-} from './loading.styles';
-import clsx from '../utils/clsx';
+  SpinnerVariantsProps,
+} from "./loading.styles";
 
 interface Props {
   size?: NormalSizes;
@@ -19,9 +21,7 @@ interface Props {
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
-export type SpinnerProps = Props &
-  NativeAttrs &
-  SpinnerVariantsProps & { css?: CSS };
+export type SpinnerProps = Props & NativeAttrs & SpinnerVariantsProps & {css?: CSS};
 
 const Spinner: React.FC<React.PropsWithChildren<SpinnerProps>> = ({
   children,
@@ -35,25 +35,22 @@ const Spinner: React.FC<React.PropsWithChildren<SpinnerProps>> = ({
     ? children?.length > 1 && children[0] !== undefined
     : children !== undefined;
 
-  const ariaLabel = children && isValidChildren ? '' : 'Loading';
+  const ariaLabel = children && isValidChildren ? "" : "Loading";
 
   return (
     <StyledSpinner
-      className={clsx('nextui-spinner', className)}
+      className={clsx("nextui-spinner", className)}
       color={color}
       size={size}
       {...props}
     >
-      <StyledSpinnerContainer
-        className="nextui-spinner-container"
-        aria-label={ariaLabel}
-      >
+      <StyledSpinnerContainer aria-label={ariaLabel} className="nextui-spinner-container">
         {[...new Array(12)].map((_, index) => (
           <StyledSpinnerSpan key={`nextui-spinner-${index}`} />
         ))}
       </StyledSpinnerContainer>
       {children && (
-        <StyledLoadingLabel size={size} color={textColor}>
+        <StyledLoadingLabel color={textColor} size={size}>
           {children}
         </StyledLoadingLabel>
       )}
@@ -61,6 +58,6 @@ const Spinner: React.FC<React.PropsWithChildren<SpinnerProps>> = ({
   );
 };
 
-Spinner.toString = () => '.nextui-spinner';
+Spinner.toString = () => ".nextui-spinner";
 
 export default Spinner;
diff --git a/packages/react/src/modal/__tests__/index.test.tsx b/packages/react/src/modal/__tests__/index.test.tsx
index 560128af94..10899e989b 100644
--- a/packages/react/src/modal/__tests__/index.test.tsx
+++ b/packages/react/src/modal/__tests__/index.test.tsx
@@ -1,19 +1,21 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Modal from '../index';
-import { nativeEvent, updateWrapper } from 'tests/utils';
-import { expectModalIsClosed, expectModalIsOpened } from './use-modal.test';
-import userEvent from '@testing-library/user-event';
-import { act } from 'react-dom/test-utils';
+import React from "react";
+import {mount} from "enzyme";
+import {nativeEvent, updateWrapper} from "tests/utils";
+import userEvent from "@testing-library/user-event";
+import {act} from "react-dom/test-utils";
+
+import Modal from "../index";
+
+import {expectModalIsClosed, expectModalIsOpened} from "./use-modal.test";
 
 const TabEvent = {
-  key: 'TAB',
+  key: "TAB",
   keyCode: 9,
-  which: 9
+  which: 9,
 };
 
-describe('Modal', () => {
-  it('should render correctly', () => {
+describe("Modal", () => {
+  it("should render correctly", () => {
     const wrapper = mount(
       <Modal open={true}>
         <Modal.Header>Modal</Modal.Header>
@@ -21,94 +23,92 @@ describe('Modal', () => {
           <p>Some content contained within the modal.</p>
         </Modal.Body>
         <Modal.Footer>Cancel</Modal.Footer>
-      </Modal>
+      </Modal>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should trigger event when modal changed', async () => {
+  it("should trigger event when modal changed", async () => {
     const openHandler = jest.fn();
     const closeHandler = jest.fn();
     const wrapper = mount(
-      <Modal onOpen={openHandler} onClose={closeHandler}>
+      <Modal onClose={closeHandler} onOpen={openHandler}>
         <Modal.Header>Modal</Modal.Header>
-      </Modal>
+      </Modal>,
     );
+
     expectModalIsClosed(wrapper);
-    wrapper.setProps({ open: true });
+    wrapper.setProps({open: true});
     await updateWrapper(wrapper, 350);
     expectModalIsOpened(wrapper);
     expect(openHandler).toHaveBeenCalled();
 
-    wrapper.find('.nextui-backdrop').at(0).simulate('click', nativeEvent);
+    wrapper.find(".nextui-backdrop").at(0).simulate("click", nativeEvent);
     await updateWrapper(wrapper, 500);
     expectModalIsClosed(wrapper);
     expect(closeHandler).toHaveBeenCalled();
   });
-  it('should disable backdrop event', async () => {
+  it("should disable backdrop event", async () => {
     const closeHandler = jest.fn();
     const wrapper = mount(
-      <Modal open={true} preventClose onClose={closeHandler}>
+      <Modal preventClose open={true} onClose={closeHandler}>
         <Modal.Header>Modal</Modal.Header>
         <Modal.Footer>Submit</Modal.Footer>
-      </Modal>
+      </Modal>,
     );
-    wrapper.find('.nextui-backdrop').at(0).simulate('click', nativeEvent);
+
+    wrapper.find(".nextui-backdrop").at(0).simulate("click", nativeEvent);
     await updateWrapper(wrapper, 500);
     expectModalIsOpened(wrapper);
     expect(closeHandler).not.toHaveBeenCalled();
   });
-  it('customization should be supported', () => {
+  it("customization should be supported", () => {
     const wrapper = mount(
-      <Modal open={true} width="100px" className="test-class">
+      <Modal className="test-class" open={true} width="100px">
         <Modal.Header>Modal</Modal.Header>
-      </Modal>
+      </Modal>,
     );
-    const html = wrapper.find('.nextui-modal').at(0).html();
-    expect(html).toContain('test-class');
+    const html = wrapper.find(".nextui-modal").at(0).html();
+
+    expect(html).toContain("test-class");
     expect(() => wrapper.unmount()).not.toThrow();
   });
-  it('focus should only be switched within modal', () => {
+  it("focus should only be switched within modal", () => {
     const wrapper = mount(
-      <Modal open={true} width="100px" className="test-class">
+      <Modal className="test-class" open={true} width="100px">
         <Modal.Header>Modal</Modal.Header>
-      </Modal>
+      </Modal>,
     );
-    const tabStart = wrapper
-      .find('.nextui-modal-hide-tab')
-      .at(0)
-      .at(0)
-      .getDOMNode();
-    const tabEnd = wrapper
-      .find('.nextui-modal-hide-tab')
-      .at(2)
-      .at(0)
-      .getDOMNode();
-    const eventElement = wrapper.find('.nextui-modal').at(0);
+    const tabStart = wrapper.find(".nextui-modal-hide-tab").at(0).at(0).getDOMNode();
+    const tabEnd = wrapper.find(".nextui-modal-hide-tab").at(2).at(0).getDOMNode();
+    const eventElement = wrapper.find(".nextui-modal").at(0);
+
     expect(document.activeElement).toBe(tabStart);
     act(() => {
-      eventElement.simulate('keydown', {
+      eventElement.simulate("keydown", {
         ...TabEvent,
-        shiftKey: true
+        shiftKey: true,
       });
     });
     expect(document.activeElement).toBe(tabEnd);
     act(() => {
-      eventElement.simulate('keydown', {
+      eventElement.simulate("keydown", {
         ...TabEvent,
-        shiftKey: false
+        shiftKey: false,
       });
     });
     expect(document.activeElement).toBe(tabStart);
   });
-  it('should close modal when keyboard event is triggered', async () => {
+  it("should close modal when keyboard event is triggered", async () => {
     const wrapper = mount(
       <Modal open={true}>
         <Modal.Header>Modal</Modal.Header>
-      </Modal>
+      </Modal>,
     );
+
     expectModalIsOpened(wrapper);
-    userEvent.keyboard('{esc}');
+    userEvent.keyboard("{esc}");
     await updateWrapper(wrapper, 500);
     expectModalIsClosed(wrapper);
   });
diff --git a/packages/react/src/modal/__tests__/use-modal.test.tsx b/packages/react/src/modal/__tests__/use-modal.test.tsx
index 9c5c384697..dab8785647 100644
--- a/packages/react/src/modal/__tests__/use-modal.test.tsx
+++ b/packages/react/src/modal/__tests__/use-modal.test.tsx
@@ -1,24 +1,27 @@
-import React, { useEffect } from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-import Modal from '../index';
-import useModal from '../use-modal';
-import { updateWrapper } from '../../../tests/utils';
+import React, {useEffect} from "react";
+import {mount, ReactWrapper} from "enzyme";
+
+import Modal from "../index";
+import useModal from "../use-modal";
+import {updateWrapper} from "../../../tests/utils";
 
 export const expectModalIsOpened = (wrapper: ReactWrapper) => {
-  expect(wrapper.find('.nextui-backdrop-content').at(0).length).not.toBe(0);
+  expect(wrapper.find(".nextui-backdrop-content").at(0).length).not.toBe(0);
 };
 
 export const expectModalIsClosed = (wrapper: ReactWrapper) => {
-  expect(wrapper.find('.nextui-backdrop-content').at(0).length).toBe(0);
+  expect(wrapper.find(".nextui-backdrop-content").at(0).length).toBe(0);
 };
 
-describe('UseModal', () => {
-  it('should follow change with use-modal', async () => {
-    const MockModal: React.FC<{ show?: boolean }> = ({ show }) => {
-      const { setVisible, bindings } = useModal();
+describe("UseModal", () => {
+  it("should follow change with use-modal", async () => {
+    const MockModal: React.FC<{show?: boolean}> = ({show}) => {
+      const {setVisible, bindings} = useModal();
+
       useEffect(() => {
         if (show !== undefined) setVisible(show);
       }, [show]);
+
       return (
         <Modal {...bindings}>
           <Modal.Header>Modal</Modal.Header>
@@ -27,11 +30,12 @@ describe('UseModal', () => {
     };
 
     const wrapper = mount(<MockModal />);
-    wrapper.setProps({ show: true });
+
+    wrapper.setProps({show: true});
     await updateWrapper(wrapper, 300);
     expectModalIsOpened(wrapper);
 
-    wrapper.setProps({ show: false });
+    wrapper.setProps({show: false});
     await updateWrapper(wrapper, 500);
     expectModalIsClosed(wrapper);
   });
diff --git a/packages/react/src/modal/index.ts b/packages/react/src/modal/index.ts
index 89a184c48d..15c985f895 100644
--- a/packages/react/src/modal/index.ts
+++ b/packages/react/src/modal/index.ts
@@ -1,16 +1,16 @@
-import Modal from './modal';
-import ModalHeader from './modal-header';
-import ModalBody from './modal-body';
-import ModalFooter from './modal-footer';
+import Modal from "./modal";
+import ModalHeader from "./modal-header";
+import ModalBody from "./modal-body";
+import ModalFooter from "./modal-footer";
 
 Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 
-export type { ModalProps } from './modal';
-export type { ModalHeaderProps } from './modal-header';
-export type { ModalBodyProps } from './modal-body';
-export type { ModalFooterProps } from './modal-footer';
+export type {ModalProps} from "./modal";
+export type {ModalHeaderProps} from "./modal-header";
+export type {ModalBodyProps} from "./modal-body";
+export type {ModalFooterProps} from "./modal-footer";
 
 export {
   StyledModalHideTab,
@@ -18,14 +18,14 @@ export {
   StyledModalHeader,
   StyledModalBody,
   StyledModalFooter,
-  StyledModal
-} from './modal.styles';
+  StyledModal,
+} from "./modal.styles";
 export type {
   ModalVariantsProps,
   ModalCloseButtonVariantsProps,
   ModalBodyVariantsProps,
   ModalHeaderVariantsProps,
-  ModalFooterVariantsProps
-} from './modal.styles';
+  ModalFooterVariantsProps,
+} from "./modal.styles";
 
 export default Modal;
diff --git a/packages/react/src/modal/modal-body.tsx b/packages/react/src/modal/modal-body.tsx
index 74c48a2511..f1dd83a91d 100644
--- a/packages/react/src/modal/modal-body.tsx
+++ b/packages/react/src/modal/modal-body.tsx
@@ -1,9 +1,11 @@
-import React, { useContext, useMemo } from 'react';
-import withDefaults from '../utils/with-defaults';
-import { ModalContext } from './modal-context';
-import { CSS } from '../theme/stitches.config';
-import { StyledModalBody, ModalBodyVariantsProps } from './modal.styles';
-import cslx from '../utils/clsx';
+import React, {useContext, useMemo} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {CSS} from "../theme/stitches.config";
+import cslx from "../utils/clsx";
+
+import {ModalContext} from "./modal-context";
+import {StyledModalBody, ModalBodyVariantsProps} from "./modal.styles";
 
 interface Props {
   className?: string;
@@ -12,8 +14,8 @@ interface Props {
 }
 
 const defaultProps = {
-  className: '',
-  autoMargin: true
+  className: "",
+  autoMargin: true,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLElement>, keyof Props>;
@@ -21,9 +23,9 @@ type NativeAttrs = Omit<React.HTMLAttributes<HTMLElement>, keyof Props>;
 export type ModalBodyProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  ModalBodyVariantsProps & { css?: CSS };
+  ModalBodyVariantsProps & {css?: CSS};
 
-const preClass = 'nextui-modal-body';
+const preClass = "nextui-modal-body";
 
 const ModalBody: React.FC<ModalBodyProps> = ({
   className,
@@ -31,7 +33,7 @@ const ModalBody: React.FC<ModalBodyProps> = ({
   autoMargin: autoMarginProp,
   ...props
 }) => {
-  const { autoMargin: autoMarginContext, noPadding } = useContext(ModalContext);
+  const {autoMargin: autoMarginContext, noPadding} = useContext(ModalContext);
 
   const autoMargin = useMemo(() => {
     return autoMarginContext !== undefined ? autoMarginContext : autoMarginProp;
@@ -39,15 +41,15 @@ const ModalBody: React.FC<ModalBodyProps> = ({
 
   return (
     <StyledModalBody
+      autoMargin={autoMargin}
       className={cslx(
         preClass,
         {
           [`${preClass}-auto-margin`]: autoMargin,
-          [`${preClass}-no-padding`]: noPadding
+          [`${preClass}-no-padding`]: noPadding,
         },
-        className
+        className,
       )}
-      autoMargin={autoMargin}
       noPadding={noPadding}
       {...props}
     >
@@ -56,7 +58,7 @@ const ModalBody: React.FC<ModalBodyProps> = ({
   );
 };
 
-ModalBody.toString = () => '.nextui-modal-body';
+ModalBody.toString = () => ".nextui-modal-body";
 
 const MemoModalBody = React.memo(ModalBody);
 
diff --git a/packages/react/src/modal/modal-close-button.tsx b/packages/react/src/modal/modal-close-button.tsx
index a25807c233..65cb99bc04 100644
--- a/packages/react/src/modal/modal-close-button.tsx
+++ b/packages/react/src/modal/modal-close-button.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
-import ClearIcon from '../utils/clear-icon';
-import { CSS } from '../theme/stitches.config';
-import {
-  StyledModalCloseButton,
-  ModalCloseButtonVariantsProps
-} from './modal.styles';
+import React from "react";
+
+import ClearIcon from "../utils/clear-icon";
+import {CSS} from "../theme/stitches.config";
+
+import {StyledModalCloseButton, ModalCloseButtonVariantsProps} from "./modal.styles";
 
 interface Props {
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -15,12 +14,9 @@ type NativeAttrs = Omit<React.ButtonHTMLAttributes<unknown>, keyof Props>;
 
 export type ModalCloseButtonProps = Props &
   NativeAttrs &
-  ModalCloseButtonVariantsProps & { css?: CSS };
+  ModalCloseButtonVariantsProps & {css?: CSS};
 
-const ModalCloseButton: React.FC<ModalCloseButtonProps> = ({
-  onClick,
-  ...props
-}) => {
+const ModalCloseButton: React.FC<ModalCloseButtonProps> = ({onClick, ...props}) => {
   const clickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     event.stopPropagation();
@@ -30,24 +26,24 @@ const ModalCloseButton: React.FC<ModalCloseButtonProps> = ({
 
   return (
     <StyledModalCloseButton
+      aria-label="Close"
+      className="nextui-modal-close-icon"
       type="button"
       onClick={clickHandler}
-      className="nextui-modal-close-icon"
-      aria-label="Close"
       {...props}
     >
       <ClearIcon
         plain
-        size={18}
+        aria-hidden={true}
         className="nextui-modal-close-icon-svg"
         fill="currentColor"
-        aria-hidden={true}
+        size={18}
       />
     </StyledModalCloseButton>
   );
 };
 
-ModalCloseButton.toString = () => '.nextui-modal-close-icon';
+ModalCloseButton.toString = () => ".nextui-modal-close-icon";
 
 const MemoModalCloseButton = React.memo(ModalCloseButton);
 
diff --git a/packages/react/src/modal/modal-context.ts b/packages/react/src/modal/modal-context.ts
index a5aa6f653e..73620c0354 100644
--- a/packages/react/src/modal/modal-context.ts
+++ b/packages/react/src/modal/modal-context.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 export interface ModalConfig {
   autoMargin?: boolean;
@@ -10,5 +10,4 @@ const defaultContext = {};
 
 export const ModalContext = React.createContext<ModalConfig>(defaultContext);
 
-export const useModalContext = (): ModalConfig =>
-  React.useContext<ModalConfig>(ModalContext);
+export const useModalContext = (): ModalConfig => React.useContext<ModalConfig>(ModalContext);
diff --git a/packages/react/src/modal/modal-footer.tsx b/packages/react/src/modal/modal-footer.tsx
index 4448f58035..37d984c21f 100644
--- a/packages/react/src/modal/modal-footer.tsx
+++ b/packages/react/src/modal/modal-footer.tsx
@@ -1,10 +1,12 @@
-import React, { useMemo, useContext } from 'react';
-import withDefaults from '../utils/with-defaults';
-import { ModalContext } from './modal-context';
-import { Justify } from '../utils/prop-types';
-import { CSS } from '../theme/stitches.config';
-import { StyledModalFooter, ModalFooterVariantsProps } from './modal.styles';
-import cslx from '../utils/clsx';
+import React, {useMemo, useContext} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {Justify} from "../utils/prop-types";
+import {CSS} from "../theme/stitches.config";
+import cslx from "../utils/clsx";
+
+import {StyledModalFooter, ModalFooterVariantsProps} from "./modal.styles";
+import {ModalContext} from "./modal-context";
 
 interface Props {
   className?: string;
@@ -15,18 +17,15 @@ interface Props {
 }
 
 const defaultProps = {
-  className: '',
-  justify: 'flex-end' as Justify,
-  autoMargin: true
+  className: "",
+  justify: "flex-end" as Justify,
+  autoMargin: true,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
-export type ModalFooterProps = Props &
-  typeof defaultProps &
-  NativeAttrs &
-  ModalFooterVariantsProps;
+export type ModalFooterProps = Props & typeof defaultProps & NativeAttrs & ModalFooterVariantsProps;
 
-const preClass = 'nextui-modal-footer';
+const preClass = "nextui-modal-footer";
 
 const ModalFooter: React.FC<React.PropsWithChildren<ModalFooterProps>> = ({
   children,
@@ -36,7 +35,7 @@ const ModalFooter: React.FC<React.PropsWithChildren<ModalFooterProps>> = ({
   css,
   ...props
 }) => {
-  const { autoMargin: autoMarginContext, noPadding } = useContext(ModalContext);
+  const {autoMargin: autoMarginContext, noPadding} = useContext(ModalContext);
 
   const autoMargin = useMemo(() => {
     return autoMarginContext !== undefined ? autoMarginContext : autoMarginProp;
@@ -44,20 +43,20 @@ const ModalFooter: React.FC<React.PropsWithChildren<ModalFooterProps>> = ({
 
   return (
     <StyledModalFooter
+      autoMargin={autoMargin}
       className={cslx(
         preClass,
         {
           [`${preClass}-auto-margin`]: autoMargin,
-          [`${preClass}-no-padding`]: noPadding
+          [`${preClass}-no-padding`]: noPadding,
         },
-        className
+        className,
       )}
-      noPadding={noPadding}
-      autoMargin={autoMargin}
       css={{
         justifyContent: justify,
-        ...(css as any)
+        ...(css as any),
       }}
+      noPadding={noPadding}
       {...props}
     >
       {children}
@@ -65,7 +64,7 @@ const ModalFooter: React.FC<React.PropsWithChildren<ModalFooterProps>> = ({
   );
 };
 
-ModalFooter.toString = () => '.nextui-modal-footer';
+ModalFooter.toString = () => ".nextui-modal-footer";
 
 const MemoModalFooter = React.memo(ModalFooter);
 
diff --git a/packages/react/src/modal/modal-header.tsx b/packages/react/src/modal/modal-header.tsx
index 0065047489..26244615c4 100644
--- a/packages/react/src/modal/modal-header.tsx
+++ b/packages/react/src/modal/modal-header.tsx
@@ -1,10 +1,12 @@
-import React, { useContext, useMemo } from 'react';
-import withDefaults from '../utils/with-defaults';
-import { ModalContext } from './modal-context';
-import { Justify } from '../utils/prop-types';
-import { CSS } from '../theme/stitches.config';
-import { StyledModalHeader, ModalHeaderVariantsProps } from './modal.styles';
-import cslx from '../utils/clsx';
+import React, {useContext, useMemo} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {Justify} from "../utils/prop-types";
+import {CSS} from "../theme/stitches.config";
+import cslx from "../utils/clsx";
+
+import {StyledModalHeader, ModalHeaderVariantsProps} from "./modal.styles";
+import {ModalContext} from "./modal-context";
 
 interface Props {
   className?: string;
@@ -15,19 +17,16 @@ interface Props {
 }
 
 const defaultProps = {
-  className: '',
-  justify: 'center' as Justify,
-  autoMargin: true
+  className: "",
+  justify: "center" as Justify,
+  autoMargin: true,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type ModalHeaderProps = Props &
-  typeof defaultProps &
-  NativeAttrs &
-  ModalHeaderVariantsProps;
+export type ModalHeaderProps = Props & typeof defaultProps & NativeAttrs & ModalHeaderVariantsProps;
 
-const preClass = 'nextui-modal-header';
+const preClass = "nextui-modal-header";
 
 const ModalHeader: React.FC<React.PropsWithChildren<ModalHeaderProps>> = ({
   children,
@@ -37,7 +36,7 @@ const ModalHeader: React.FC<React.PropsWithChildren<ModalHeaderProps>> = ({
   css,
   ...props
 }) => {
-  const { autoMargin: autoMarginContext, noPadding } = useContext(ModalContext);
+  const {autoMargin: autoMarginContext, noPadding} = useContext(ModalContext);
 
   const autoMargin = useMemo(() => {
     return autoMarginContext !== undefined ? autoMarginContext : autoMarginProp;
@@ -45,20 +44,20 @@ const ModalHeader: React.FC<React.PropsWithChildren<ModalHeaderProps>> = ({
 
   return (
     <StyledModalHeader
+      autoMargin={autoMargin}
       className={cslx(
         preClass,
         {
           [`${preClass}-auto-margin`]: autoMargin,
-          [`${preClass}-no-padding`]: noPadding
+          [`${preClass}-no-padding`]: noPadding,
         },
-        className
+        className,
       )}
-      noPadding={noPadding}
-      autoMargin={autoMargin}
       css={{
         justifyContent: justify,
-        ...(css as any)
+        ...(css as any),
       }}
+      noPadding={noPadding}
       {...props}
     >
       {children}
@@ -66,7 +65,7 @@ const ModalHeader: React.FC<React.PropsWithChildren<ModalHeaderProps>> = ({
   );
 };
 
-ModalHeader.toString = () => '.nextui-modal-header';
+ModalHeader.toString = () => ".nextui-modal-header";
 
 const MemoModalHeader = React.memo(ModalHeader);
 
diff --git a/packages/react/src/modal/modal-wrapper.tsx b/packages/react/src/modal/modal-wrapper.tsx
index 8883f2ba30..8468139217 100644
--- a/packages/react/src/modal/modal-wrapper.tsx
+++ b/packages/react/src/modal/modal-wrapper.tsx
@@ -1,16 +1,14 @@
-import React, { useEffect, useRef, useMemo, useState } from 'react';
-import withDefaults from '../utils/with-defaults';
-import CSSTransition from '../utils/css-transition';
-import { isChildElement } from '../utils/collections';
-import { CSS } from '../theme/stitches.config';
-import ModalCloseButton from './modal-close-button';
-import { KeyCode } from '../use-keyboard';
-import {
-  StyledModal,
-  StyledModalHideTab,
-  ModalVariantsProps
-} from './modal.styles';
-import cslx from '../utils/clsx';
+import React, {useEffect, useRef, useMemo, useState} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import CSSTransition from "../utils/css-transition";
+import {isChildElement} from "../utils/collections";
+import {CSS} from "../theme/stitches.config";
+import {KeyCode} from "../use-keyboard";
+import cslx from "../utils/clsx";
+
+import ModalCloseButton from "./modal-close-button";
+import {StyledModal, StyledModalHideTab, ModalVariantsProps} from "./modal.styles";
 
 interface Props {
   visible?: boolean;
@@ -25,18 +23,16 @@ interface Props {
 }
 
 const defaultProps = {
-  className: '',
+  className: "",
   visible: false,
-  rebound: false
+  rebound: false,
 };
 
 type NativeAttrs = Omit<React.DialogHTMLAttributes<unknown>, keyof Props>;
 
-export type ModalWrapperProps = Props &
-  NativeAttrs &
-  ModalVariantsProps & { css?: CSS };
+export type ModalWrapperProps = Props & NativeAttrs & ModalVariantsProps & {css?: CSS};
 
-const preClass = 'nextui-modal';
+const preClass = "nextui-modal";
 
 const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
   className,
@@ -60,6 +56,7 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
       setRendered(true);
       clearTimeout(timer);
     }, 300);
+
     return () => clearTimeout(timer);
   }, []);
 
@@ -67,14 +64,17 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
     if (!visible) return;
     const activeElement = document.activeElement;
     const isChild = isChildElement(modalContent.current, activeElement);
+
     if (isChild) return;
     tabStart.current && tabStart.current.focus();
   }, [visible]);
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     const isTabDown = event.keyCode === KeyCode.Tab;
+
     if (!visible || !isTabDown) return;
     const activeElement = document.activeElement;
+
     if (event.shiftKey) {
       if (activeElement === tabStart.current) {
         tabEnd.current && tabEnd.current.focus();
@@ -91,21 +91,15 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
   };
 
   const getState = useMemo(() => {
-    return visible ? 'open' : 'closed';
+    return visible ? "open" : "closed";
   }, [visible]);
 
   const renderChildren = useMemo(() => {
     return (
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
       <StyledModal
-        role="dialog"
-        tabIndex={-1}
-        aria-modal={visible}
         ref={modalContent}
-        data-state={getState}
-        fullScreen={fullScreen}
-        scroll={scroll}
-        closeButton={closeButton}
+        aria-modal={visible}
         className={cslx(
           preClass,
           `${preClass}--${getState}`,
@@ -113,28 +107,34 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
             [`${preClass}-fullscreen`]: fullScreen,
             [`${preClass}-with-close-button`]: closeButton,
             [`${preClass}-rebound`]: rebound,
-            [`${preClass}-rendered`]: rendered
+            [`${preClass}-rendered`]: rendered,
           },
-          className
+          className,
         )}
+        closeButton={closeButton}
+        data-state={getState}
+        fullScreen={fullScreen}
+        role="dialog"
+        scroll={scroll}
+        tabIndex={-1}
         {...props}
         onKeyDown={onKeyDown}
       >
         <StyledModalHideTab
+          ref={tabStart}
+          aria-hidden="true"
+          className={`${preClass}-hide-tab`}
           role="button"
           tabIndex={0}
-          className={`${preClass}-hide-tab`}
-          aria-hidden="true"
-          ref={tabStart}
         />
         {closeButton && <ModalCloseButton onClick={handleClose} />}
         {children}
         <StyledModalHideTab
+          ref={tabEnd}
+          aria-hidden="true"
+          className={`${preClass}-hide-tab`}
           role="button"
           tabIndex={0}
-          className={`${preClass}-hide-tab`}
-          aria-hidden="true"
-          ref={tabEnd}
         />
       </StyledModal>
     );
@@ -144,11 +144,11 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
     <>
       {animated ? (
         <CSSTransition
-          name={`${preClass}-wrapper`}
-          visible={visible}
+          clearTime={300}
           enterTime={20}
           leaveTime={20}
-          clearTime={300}
+          name={`${preClass}-wrapper`}
+          visible={visible}
         >
           {renderChildren}
         </CSSTransition>
@@ -159,6 +159,6 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
   );
 };
 
-ModalWrapper.toString = () => '.nextui-modal-wrapper';
+ModalWrapper.toString = () => ".nextui-modal-wrapper";
 
 export default withDefaults(ModalWrapper, defaultProps);
diff --git a/packages/react/src/modal/modal.stories.tsx b/packages/react/src/modal/modal.stories.tsx
index 07ee9fdf97..8171597289 100644
--- a/packages/react/src/modal/modal.stories.tsx
+++ b/packages/react/src/modal/modal.stories.tsx
@@ -1,29 +1,32 @@
-import React, { useState } from 'react';
-import { Meta } from '@storybook/react';
-import Modal from './index';
-import Button from '../button';
-import Text from '../text';
-import Input from '../input';
-import Checkbox from '../checkbox';
-import Row from '../row';
-import useModal from './use-modal';
-import { Mail, Password } from '../utils/icons';
+import React, {useState} from "react";
+import {Meta} from "@storybook/react";
+
+import Button from "../button";
+import Text from "../text";
+import Input from "../input";
+import Checkbox from "../checkbox";
+import Row from "../row";
+import {Mail, Password} from "../utils/icons";
+
+import useModal from "./use-modal";
+
+import Modal from "./index";
 
 export default {
-  title: 'Feedback/Modal',
+  title: "Feedback/Modal",
   component: Modal,
   decorators: [
     (Story) => (
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column'
+          display: "flex",
+          flexDirection: "column",
         }}
       >
         <Story />
       </div>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
 export const Default = () => {
@@ -32,7 +35,7 @@ export const Default = () => {
 
   const closeHandler = () => {
     setVisible(false);
-    console.log('closed');
+    console.log("closed");
   };
 
   return (
@@ -40,11 +43,7 @@ export const Default = () => {
       <Button auto onClick={handler}>
         Show Modal
       </Button>
-      <Modal
-        open={visible}
-        onClose={closeHandler}
-        aria-labelledby="modal-title"
-      >
+      <Modal aria-labelledby="modal-title" open={visible} onClose={closeHandler}>
         <Modal.Header>
           <Text id="modal-title" size={18}>
             Welcome to&nbsp;
@@ -56,30 +55,30 @@ export const Default = () => {
 
         <Modal.Body>
           <Input
-            clearable
             bordered
+            clearable
             fullWidth
             color="primary"
-            size="lg"
-            placeholder="Email"
             contentLeft={<Mail />}
+            placeholder="Email"
+            size="lg"
           />
           <Input
-            clearable
             bordered
+            clearable
             fullWidth
             color="primary"
-            size="lg"
-            placeholder="Password"
             contentLeft={<Password />}
+            placeholder="Password"
+            size="lg"
           />
           <Row justify="space-between">
             <Checkbox>
-              <Text size={14} css={{ color: '$text' }}>
+              <Text css={{color: "$text"}} size={14}>
                 Remember me
               </Text>
             </Checkbox>
-            <Text size={14} css={{ color: '$accents4' }}>
+            <Text css={{color: "$accents4"}} size={14}>
               Forgot password?
             </Text>
           </Row>
@@ -104,19 +103,16 @@ export const WithCloseButton = () => {
 
   const closeHandler = () => {
     setVisible(false);
-    console.log('closed');
+    // eslint-disable-next-line no-console
+    console.log("closed");
   };
+
   return (
     <div>
       <Button auto onClick={handler}>
         Show Modal
       </Button>
-      <Modal
-        closeButton
-        aria-labelledby="modal-title"
-        open={visible}
-        onClose={closeHandler}
-      >
+      <Modal closeButton aria-labelledby="modal-title" open={visible} onClose={closeHandler}>
         <Modal.Header>
           <Text id="modal-title" size={18}>
             Welcome to&nbsp;
@@ -128,30 +124,30 @@ export const WithCloseButton = () => {
 
         <Modal.Body>
           <Input
-            clearable
             bordered
+            clearable
             fullWidth
             color="primary"
-            size="lg"
-            placeholder="Email"
             contentLeft={<Mail fill="currentColor" />}
+            placeholder="Email"
+            size="lg"
           />
           <Input
-            clearable
             bordered
+            clearable
             fullWidth
             color="primary"
-            size="lg"
-            placeholder="Password"
             contentLeft={<Password fill="currentColor" />}
+            placeholder="Password"
+            size="lg"
           />
           <Row justify="space-between">
             <Checkbox>
-              <Text size={14} css={{ color: '$text' }}>
+              <Text css={{color: "$text"}} size={14}>
                 Remember me
               </Text>
             </Checkbox>
-            <Text size={14} css={{ color: '$accents4' }}>
+            <Text css={{color: "$accents4"}} size={14}>
               Forgot password?
             </Text>
           </Row>
@@ -171,7 +167,7 @@ export const WithCloseButton = () => {
 };
 
 export const WithUseModal = () => {
-  const { setVisible, bindings } = useModal();
+  const {setVisible, bindings} = useModal();
 
   return (
     <div>
@@ -190,30 +186,30 @@ export const WithUseModal = () => {
 
         <Modal.Body>
           <Input
-            clearable
             bordered
+            clearable
             fullWidth
             color="primary"
-            size="lg"
-            placeholder="Email"
             contentLeft={<Mail fill="currentColor" />}
+            placeholder="Email"
+            size="lg"
           />
           <Input
-            clearable
             bordered
+            clearable
             fullWidth
             color="primary"
-            size="lg"
-            placeholder="Password"
             contentLeft={<Password fill="currentColor" />}
+            placeholder="Password"
+            size="lg"
           />
           <Row justify="space-between">
             <Checkbox>
-              <Text size={14} css={{ color: '$text' }}>
+              <Text css={{color: "$text"}} size={14}>
                 Remember me
               </Text>
             </Checkbox>
-            <Text size={14} css={{ color: '$accents4' }}>
+            <Text css={{color: "$accents4"}} size={14}>
               Forgot password?
             </Text>
           </Row>
@@ -233,14 +229,14 @@ export const WithUseModal = () => {
 };
 
 export const NoAnimated = () => {
-  const { setVisible, bindings } = useModal();
+  const {setVisible, bindings} = useModal();
 
   return (
     <div>
       <Button auto color="secondary" onClick={() => setVisible(true)}>
         Show Modal
       </Button>
-      <Modal aria-labelledby="modal-title" animated={false} {...bindings}>
+      <Modal animated={false} aria-labelledby="modal-title" {...bindings}>
         <Modal.Header>
           <Text id="modal-title" size={18}>
             Welcome to&nbsp;
@@ -252,30 +248,30 @@ export const NoAnimated = () => {
 
         <Modal.Body>
           <Input
-            clearable
             bordered
+            clearable
             fullWidth
             color="primary"
-            size="lg"
-            placeholder="Email"
             contentLeft={<Mail fill="currentColor" />}
+            placeholder="Email"
+            size="lg"
           />
           <Input
-            clearable
             bordered
+            clearable
             fullWidth
             color="primary"
-            size="lg"
-            placeholder="Password"
             contentLeft={<Password fill="currentColor" />}
+            placeholder="Password"
+            size="lg"
           />
           <Row justify="space-between">
             <Checkbox>
-              <Text size={14} css={{ color: '$text' }}>
+              <Text css={{color: "$text"}} size={14}>
                 Remember me
               </Text>
             </Checkbox>
-            <Text size={14} css={{ color: '$accents4' }}>
+            <Text css={{color: "$accents4"}} size={14}>
               Forgot password?
             </Text>
           </Row>
@@ -295,7 +291,7 @@ export const NoAnimated = () => {
 };
 
 export const LargeContent = () => {
-  const { setVisible, bindings } = useModal();
+  const {setVisible, bindings} = useModal();
 
   return (
     <div>
@@ -304,9 +300,9 @@ export const LargeContent = () => {
       </Button>
       <Modal
         scroll
-        width="40%"
-        aria-labelledby="modal-title"
         aria-describedby="modal-description"
+        aria-labelledby="modal-title"
+        width="40%"
         {...bindings}
       >
         <Modal.Header>
@@ -317,190 +313,146 @@ export const LargeContent = () => {
 
         <Modal.Body>
           <Text id="modal-description">
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
           </Text>
         </Modal.Body>
 
@@ -509,7 +461,7 @@ export const LargeContent = () => {
             Close
           </Button>
           <Button auto onClick={() => setVisible(false)}>
-            I'm agree
+            I&apos;m agree
           </Button>
         </Modal.Footer>
       </Modal>
@@ -518,7 +470,7 @@ export const LargeContent = () => {
 };
 
 export const FullScreen = () => {
-  const { setVisible, bindings } = useModal();
+  const {setVisible, bindings} = useModal();
 
   return (
     <div>
@@ -526,12 +478,12 @@ export const FullScreen = () => {
         Show Modal
       </Button>
       <Modal
-        scroll
         closeButton
         fullScreen
-        width="40%"
-        aria-labelledby="modal-title"
+        scroll
         aria-describedby="modal-description"
+        aria-labelledby="modal-title"
+        width="40%"
         {...bindings}
       >
         <Modal.Header>
@@ -542,190 +494,146 @@ export const FullScreen = () => {
 
         <Modal.Body>
           <Text id="modal-description">
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et. Cras mattis consectetur purus sit amet
-            fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
-            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
-            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
-            ac consectetur ac, vestibulum at eros. Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et. Cras mattis consectetur
-            purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
-            egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
-            nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis
+            consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
+            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent
+            commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus
+            sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi
+            leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna,
+            vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum.
+            Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
+            consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl
+            consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
+            dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
+            vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
           </Text>
         </Modal.Body>
 
@@ -734,7 +642,7 @@ export const FullScreen = () => {
             Close
           </Button>
           <Button auto onClick={() => setVisible(false)}>
-            I'm agree
+            I&apos;m agree
           </Button>
         </Modal.Footer>
       </Modal>
@@ -747,20 +655,16 @@ export const Blur = () => {
   const handler = () => setVisible(true);
   const closeHandler = () => {
     setVisible(false);
-    console.log('closed');
+    // eslint-disable-next-line no-console
+    console.log("closed");
   };
+
   return (
     <div>
-      <Button auto color="warning" shadow onClick={handler}>
+      <Button auto shadow color="warning" onClick={handler}>
         Open modal
       </Button>
-      <Modal
-        closeButton
-        blur
-        aria-labelledby="modal-title"
-        open={visible}
-        onClose={closeHandler}
-      >
+      <Modal blur closeButton aria-labelledby="modal-title" open={visible} onClose={closeHandler}>
         <Modal.Header>
           <Text id="modal-title" size={18}>
             Welcome to
@@ -771,22 +675,22 @@ export const Blur = () => {
         </Modal.Header>
         <Modal.Body>
           <Input
-            clearable
             bordered
+            clearable
             fullWidth
             color="primary"
-            size="lg"
-            placeholder="Email"
             contentLeft={<Mail fill="currentColor" />}
+            placeholder="Email"
+            size="lg"
           />
           <Input
-            clearable
             bordered
+            clearable
             fullWidth
             color="primary"
-            size="lg"
-            placeholder="Password"
             contentLeft={<Password fill="currentColor" />}
+            placeholder="Password"
+            size="lg"
           />
           <Row justify="space-between">
             <Checkbox>
diff --git a/packages/react/src/modal/modal.styles.ts b/packages/react/src/modal/modal.styles.ts
index 0c68aee0db..6eef8ff377 100644
--- a/packages/react/src/modal/modal.styles.ts
+++ b/packages/react/src/modal/modal.styles.ts
@@ -1,202 +1,198 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import {
-  reboundAnimation,
-  appearanceIn,
-  appearanceOut
-} from '../utils/animations';
-import { sharedFocus } from '../theme/shared-css';
+import {styled, VariantProps} from "../theme/stitches.config";
+import {reboundAnimation, appearanceIn, appearanceOut} from "../utils/animations";
+import {sharedFocus} from "../theme/shared-css";
 
-export const StyledModalHideTab = styled('div', {
-  outline: 'none',
-  overflow: 'hidden',
+export const StyledModalHideTab = styled("div", {
+  outline: "none",
+  overflow: "hidden",
   width: 0,
   height: 0,
-  opacity: 0
+  opacity: 0,
 });
 
 export const StyledModalCloseButton = styled(
-  'button',
+  "button",
   {
-    position: 'absolute',
-    background: 'transparent',
-    border: 'none',
-    zIndex: '$1',
-    top: '$space$3',
-    right: '$space$2',
+    position: "absolute",
+    background: "transparent",
+    border: "none",
+    zIndex: "$1",
+    top: "$space$3",
+    right: "$space$2",
     margin: 0,
-    d: 'inline-flex',
-    ai: 'center',
-    height: 'auto',
-    cursor: 'pointer',
-    boxSizing: 'border-box',
-    transition: '$default',
-    padding: 'calc($space$sm * 0.5)',
-    color: '$accents4',
-    br: '$space$5',
+    d: "inline-flex",
+    ai: "center",
+    height: "auto",
+    cursor: "pointer",
+    boxSizing: "border-box",
+    transition: "$default",
+    padding: "calc($space$sm * 0.5)",
+    color: "$accents4",
+    br: "$space$5",
     svg: {
-      color: 'currentColor'
+      color: "currentColor",
     },
-    '&:hover': {
+    "&:hover": {
       svg: {
-        opacity: 0.8
-      }
+        opacity: 0.8,
+      },
     },
     variants: {
       disabled: {
         true: {
-          cursor: 'not-allowed'
-        }
-      }
-    }
+          cursor: "not-allowed",
+        },
+      },
+    },
   },
-  sharedFocus
+  sharedFocus,
 );
 
-export const StyledModalHeader = styled('div', {
-  display: 'flex',
+export const StyledModalHeader = styled("div", {
+  display: "flex",
   flexShrink: 0,
-  ai: 'center',
-  ov: 'hidden',
-  color: 'inherit',
-  padding: '$sm $10',
-  fs: '$xs',
+  ai: "center",
+  ov: "hidden",
+  color: "inherit",
+  padding: "$sm $10",
+  fs: "$xs",
   variants: {
     noPadding: {
       true: {
-        padding: 0
-      }
+        padding: 0,
+      },
     },
     autoMargin: {
       true: {
-        '> *:first-child': {
-          mt: 0
+        "> *:first-child": {
+          mt: 0,
+        },
+        "> *:last-child": {
+          mb: 0,
         },
-        '> *:last-child': {
-          mb: 0
-        }
-      }
-    }
-  }
+      },
+    },
+  },
 });
 
-export const StyledModalBody = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  flex: '1 1 auto',
-  padding: '$sm $10',
-  oy: 'auto',
-  position: 'relative',
-  ta: 'left',
+export const StyledModalBody = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  flex: "1 1 auto",
+  padding: "$sm $10",
+  oy: "auto",
+  position: "relative",
+  ta: "left",
   variants: {
     noPadding: {
       true: {
         flex: 1,
-        padding: 0
-      }
+        padding: 0,
+      },
     },
     autoMargin: {
       true: {
-        '> *:first-child': {
-          mt: 0
+        "> *:first-child": {
+          mt: 0,
+        },
+        "> *": {
+          mb: "$8",
         },
-        '> *': {
-          mb: '$8'
+        "> *:last-child": {
+          mb: 0,
         },
-        '> *:last-child': {
-          mb: 0
-        }
-      }
-    }
-  }
+      },
+    },
+  },
 });
 
-export const StyledModalFooter = styled('div', {
-  d: 'flex',
-  flexWrap: 'wrap',
+export const StyledModalFooter = styled("div", {
+  d: "flex",
+  flexWrap: "wrap",
   flexShrink: 0,
-  overflow: 'hidden',
-  color: 'inherit',
-  ai: 'center',
-  fs: '$xs',
-  padding: '$sm $lg',
+  overflow: "hidden",
+  color: "inherit",
+  ai: "center",
+  fs: "$xs",
+  padding: "$sm $lg",
   variants: {
     noPadding: {
       true: {
-        padding: 0
-      }
+        padding: 0,
+      },
     },
     autoMargin: {
       true: {
-        '> *': {
-          m: '$2'
-        }
-      }
-    }
-  }
+        "> *": {
+          m: "$2",
+        },
+      },
+    },
+  },
 });
 
-export const StyledModal = styled('section', {
-  maxWidth: '100%',
-  verticalAlign: 'middle',
-  overflow: 'hidden',
-  height: 'fit-content(20em)',
-  maxHeight: 'inherit',
-  display: 'flex',
-  outline: 'none',
-  flexDirection: 'column',
-  position: 'relative',
-  boxSizing: 'border-box',
-  color: '$foreground',
-  br: '$lg',
-  boxShadow: '$lg',
-  bg: '$backgroundContrast',
-  animationFillMode: 'forwards',
+export const StyledModal = styled("section", {
+  maxWidth: "100%",
+  verticalAlign: "middle",
+  overflow: "hidden",
+  height: "fit-content(20em)",
+  maxHeight: "inherit",
+  display: "flex",
+  outline: "none",
+  flexDirection: "column",
+  position: "relative",
+  boxSizing: "border-box",
+  color: "$foreground",
+  br: "$lg",
+  boxShadow: "$lg",
+  bg: "$backgroundContrast",
+  animationFillMode: "forwards",
 
-  '@motion': {
-    transition: 'none'
+  "@motion": {
+    transition: "none",
   },
 
-  '&.nextui-modal-wrapper-enter:not(.nextui-modal-rendered)': {
+  "&.nextui-modal-wrapper-enter:not(.nextui-modal-rendered)": {
     animationName: appearanceIn,
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-in',
-    animationDirection: 'normal'
+    animationDuration: "200ms",
+    animationTimingFunction: "ease-in",
+    animationDirection: "normal",
   },
-  '&.nextui-modal-wrapper-leave': {
+  "&.nextui-modal-wrapper-leave": {
     animationName: appearanceOut,
-    animationDuration: '50ms',
-    animationTimingFunction: 'ease-out'
+    animationDuration: "50ms",
+    animationTimingFunction: "ease-out",
   },
   variants: {
     fullScreen: {
       true: {
-        size: '100%',
-        maxHeight: '100%'
+        size: "100%",
+        maxHeight: "100%",
       },
       false: {
-        '&.nextui-modal-rebound': {
-          animationDuration: '250ms',
+        "&.nextui-modal-rebound": {
+          animationDuration: "250ms",
           animationName: reboundAnimation,
-          animationTimingFunction: 'ease',
-          animationFillMode: 'forwards'
-        }
-      }
+          animationTimingFunction: "ease",
+          animationFillMode: "forwards",
+        },
+      },
     },
     scroll: {
       true: {
-        maxHeight: 'calc(100vh - 200px)'
-      }
+        maxHeight: "calc(100vh - 200px)",
+      },
     },
     closeButton: {
       true: {
-        paddingTop: '$lg',
+        paddingTop: "$lg",
         [`& ${StyledModalCloseButton}`]: {
           svg: {
-            size: '$10'
-          }
-        }
-      }
-    }
+            size: "$10",
+          },
+        },
+      },
+    },
   },
   compoundVariants: [
     {
@@ -204,16 +200,14 @@ export const StyledModal = styled('section', {
       scroll: true,
       fullScreen: true,
       css: {
-        maxHeight: '100%'
-      }
-    }
-  ]
+        maxHeight: "100%",
+      },
+    },
+  ],
 });
 
 export type ModalVariantsProps = VariantProps<typeof StyledModal>;
-export type ModalCloseButtonVariantsProps = VariantProps<
-  typeof StyledModalCloseButton
->;
+export type ModalCloseButtonVariantsProps = VariantProps<typeof StyledModalCloseButton>;
 export type ModalBodyVariantsProps = VariantProps<typeof StyledModalBody>;
 export type ModalHeaderVariantsProps = VariantProps<typeof StyledModalHeader>;
 export type ModalFooterVariantsProps = VariantProps<typeof StyledModalFooter>;
diff --git a/packages/react/src/modal/modal.tsx b/packages/react/src/modal/modal.tsx
index 0704efa408..c72fdba91c 100644
--- a/packages/react/src/modal/modal.tsx
+++ b/packages/react/src/modal/modal.tsx
@@ -1,17 +1,19 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { createPortal } from 'react-dom';
-import usePortal from '../use-portal';
-import ModalWrapper from './modal-wrapper';
-import ModalBody from './modal-body';
-import ModalHeader from './modal-header';
-import ModalFooter from './modal-footer';
-import Backdrop from '../backdrop';
-import { ModalConfig, ModalContext } from './modal-context';
-import useBodyScroll from '../use-body-scroll';
-import useCurrentState from '../use-current-state';
-import useKeyboard, { KeyCode } from '../use-keyboard';
-import { ModalWrapperProps } from './modal-wrapper';
-import { __DEV__ } from '../utils/assertion';
+import React, {useEffect, useMemo, useState} from "react";
+import {createPortal} from "react-dom";
+
+import usePortal from "../use-portal";
+import Backdrop from "../backdrop";
+import useBodyScroll from "../use-body-scroll";
+import useCurrentState from "../use-current-state";
+import useKeyboard, {KeyCode} from "../use-keyboard";
+import {__DEV__} from "../utils/assertion";
+
+import ModalWrapper from "./modal-wrapper";
+import ModalBody from "./modal-body";
+import ModalHeader from "./modal-header";
+import ModalFooter from "./modal-footer";
+import {ModalConfig, ModalContext} from "./modal-context";
+import {ModalWrapperProps} from "./modal-wrapper";
 
 interface Props {
   open?: boolean;
@@ -30,23 +32,20 @@ interface Props {
 }
 
 const defaultProps = {
-  width: '400px',
-  className: '',
+  width: "400px",
+  className: "",
   preventClose: false,
   fullScreen: false,
   closeButton: false,
   animated: true,
   blur: false,
   scroll: false,
-  noPadding: false
+  noPadding: false,
 };
 
 type NativeAttrs = Omit<React.DialogHTMLAttributes<unknown>, keyof Props>;
 
-export type ModalProps = Props &
-  NativeAttrs &
-  Partial<typeof defaultProps> &
-  ModalWrapperProps;
+export type ModalProps = Props & NativeAttrs & Partial<typeof defaultProps> & ModalWrapperProps;
 
 const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
   children,
@@ -63,8 +62,8 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
   noPadding,
   ...props
 }) => {
-  const portal = usePortal('modal');
-  const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true });
+  const portal = usePortal("modal");
+  const [, setBodyHidden] = useBodyScroll(null, {scrollLayer: true});
   const [visible, setVisible, visibleRef] = useCurrentState<boolean>(false);
   const [rebound, setRebound] = useState(false);
 
@@ -94,10 +93,11 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
     }, 300);
   };
 
-  const { bindings } = useKeyboard(
+  const {bindings} = useKeyboard(
     () => {
       if (preventClose) {
         toggleRebound();
+
         return;
       }
       closeModal();
@@ -105,13 +105,14 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
     KeyCode.Escape,
     {
       disableGlobalEvent: true,
-      preventDefault: true
-    }
+      preventDefault: true,
+    },
   );
 
   const closeFromBackdrop = () => {
     if (preventClose) {
       toggleRebound();
+
       return;
     }
     closeModal();
@@ -121,37 +122,38 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
     () => ({
       close: closeModal,
       autoMargin,
-      noPadding
+      noPadding,
     }),
-    []
+    [],
   );
 
   if (!portal) return null;
+
   return createPortal(
     <ModalContext.Provider value={modalConfig}>
       <Backdrop
-        onClick={closeFromBackdrop}
-        visible={visible}
-        maxWidth={wrapperWidth}
-        fullScreen={fullScreen}
-        blur={blur}
         animated={animated}
+        blur={blur}
+        fullScreen={fullScreen}
+        maxWidth={wrapperWidth}
+        visible={visible}
+        onClick={closeFromBackdrop}
         {...bindings}
       >
         <ModalWrapper
-          visible={visible}
-          onCloseButtonClick={closeModal}
+          animated={animated}
           className={className}
           fullScreen={fullScreen}
           rebound={rebound}
-          animated={animated}
+          visible={visible}
+          onCloseButtonClick={closeModal}
           {...props}
         >
           {children}
         </ModalWrapper>
       </Backdrop>
     </ModalContext.Provider>,
-    portal
+    portal,
   );
 };
 
@@ -162,10 +164,10 @@ type ModalComponent<P = {}> = React.FC<P> & {
 };
 
 if (__DEV__) {
-  Modal.displayName = 'NextUI.Modal';
+  Modal.displayName = "NextUI.Modal";
 }
 
-Modal.toString = () => '.nextui-modal';
+Modal.toString = () => ".nextui-modal";
 
 Modal.defaultProps = defaultProps;
 
diff --git a/packages/react/src/modal/use-modal.ts b/packages/react/src/modal/use-modal.ts
index 0aa3f16cd9..75077a0db1 100644
--- a/packages/react/src/modal/use-modal.ts
+++ b/packages/react/src/modal/use-modal.ts
@@ -1,8 +1,9 @@
-import { Dispatch, MutableRefObject, SetStateAction } from 'react';
-import useCurrentState from '../use-current-state';
+import {Dispatch, MutableRefObject, SetStateAction} from "react";
+
+import useCurrentState from "../use-current-state";
 
 const useModal = (
-  initialVisible: boolean = false
+  initialVisible: boolean = false,
 ): {
   visible: boolean;
   setVisible: Dispatch<SetStateAction<boolean>>;
@@ -12,9 +13,7 @@ const useModal = (
     onClose: () => void;
   };
 } => {
-  const [visible, setVisible, currentRef] = useCurrentState<boolean>(
-    initialVisible
-  );
+  const [visible, setVisible, currentRef] = useCurrentState<boolean>(initialVisible);
 
   return {
     visible,
@@ -22,8 +21,8 @@ const useModal = (
     currentRef,
     bindings: {
       open: visible,
-      onClose: () => setVisible(false)
-    }
+      onClose: () => setVisible(false),
+    },
   };
 };
 
diff --git a/packages/react/src/pagination/__tests__/pagination.test.tsx b/packages/react/src/pagination/__tests__/pagination.test.tsx
index 5882401d70..b645feb679 100644
--- a/packages/react/src/pagination/__tests__/pagination.test.tsx
+++ b/packages/react/src/pagination/__tests__/pagination.test.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Pagination from '../pagination';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('Pagination', () => {
-  it('should render correctly', () => {
+import Pagination from "../pagination";
+
+describe("Pagination", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Pagination />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
diff --git a/packages/react/src/pagination/index.ts b/packages/react/src/pagination/index.ts
index cd89af0fca..13abacdcc7 100644
--- a/packages/react/src/pagination/index.ts
+++ b/packages/react/src/pagination/index.ts
@@ -1,8 +1,8 @@
-import Pagination from './pagination';
+import Pagination from "./pagination";
 
-export type { PaginationProps } from './pagination';
-export type { PaginationItemProps } from './pagination-item';
-export type { PaginationHighlightProps } from './pagination-highlight';
+export type {PaginationProps} from "./pagination";
+export type {PaginationItemProps} from "./pagination-item";
+export type {PaginationHighlightProps} from "./pagination-highlight";
 
 export {
   StyledPaginationEllipsis,
@@ -10,13 +10,13 @@ export {
   StyledPaginationItemContent,
   StyledPaginationItem,
   StyledPaginationHighlight,
-  StyledPagination
-} from './pagination.styles';
+  StyledPagination,
+} from "./pagination.styles";
 
 export type {
   PaginationVariantsProps,
   PaginationItemVariantsProps,
-  PaginationHighlightVariantsProps
-} from './pagination.styles';
+  PaginationHighlightVariantsProps,
+} from "./pagination.styles";
 
 export default Pagination;
diff --git a/packages/react/src/pagination/pagination-ellipsis.tsx b/packages/react/src/pagination/pagination-ellipsis.tsx
index 035bf6bfaa..b8963fe721 100644
--- a/packages/react/src/pagination/pagination-ellipsis.tsx
+++ b/packages/react/src/pagination/pagination-ellipsis.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
-import PaginationItem from './pagination-item';
-import { StyledPaginationEllipsis } from './pagination.styles';
+import React, {useState} from "react";
+
+import PaginationItem from "./pagination-item";
+import {StyledPaginationEllipsis} from "./pagination.styles";
 
 interface Props {
   value?: string | number;
@@ -17,52 +18,52 @@ const PaginationEllipsis: React.FC<Props> = ({
   onlyDots,
   animated,
   bordered,
-  onClick
+  onClick,
 }) => {
   const [showMore, setShowMore] = useState(false);
 
   return (
     <PaginationItem
-      value={value}
-      onlyDots={onlyDots}
       animated={animated}
       bordered={bordered}
+      onlyDots={onlyDots}
+      value={value}
       onClick={(e) => onClick && onClick(e)}
       onMouseEnter={() => setShowMore(true)}
       onMouseLeave={() => setShowMore(false)}
     >
       {showMore ? (
         <StyledPaginationEllipsis
-          role="presentation"
+          className="nextui-pagination-ellipsis"
+          fill="none"
           focusable="false"
-          viewBox="0 0 24 24"
+          isBefore={isBefore}
+          isEllipsis={true}
+          role="presentation"
+          shapeRendering="geometricPrecision"
           stroke="currentColor"
-          strokeWidth="1.5"
           strokeLinecap="round"
           strokeLinejoin="round"
-          fill="none"
-          shapeRendering="geometricPrecision"
-          className="nextui-pagination-ellipsis"
-          isEllipsis={true}
-          isBefore={isBefore}
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
         >
           <path d="M13 17l5-5-5-5" />
           <path d="M6 17l5-5-5-5" />
         </StyledPaginationEllipsis>
       ) : (
         <StyledPaginationEllipsis
-          viewBox="0 0 24 24"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
           fill="none"
-          shapeRendering="geometricPrecision"
-          isEllipsis={false}
           isBefore={isBefore}
+          isEllipsis={false}
+          shapeRendering="geometricPrecision"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
         >
-          <circle cx="12" cy="12" r="1" fill="currentColor" />
-          <circle cx="19" cy="12" r="1" fill="currentColor" />
-          <circle cx="5" cy="12" r="1" fill="currentColor" />
+          <circle cx="12" cy="12" fill="currentColor" r="1" />
+          <circle cx="19" cy="12" fill="currentColor" r="1" />
+          <circle cx="5" cy="12" fill="currentColor" r="1" />
         </StyledPaginationEllipsis>
       )}
     </PaginationItem>
diff --git a/packages/react/src/pagination/pagination-highlight.tsx b/packages/react/src/pagination/pagination-highlight.tsx
index 11305ac07e..3b0f382ddf 100644
--- a/packages/react/src/pagination/pagination-highlight.tsx
+++ b/packages/react/src/pagination/pagination-highlight.tsx
@@ -1,11 +1,10 @@
-import React, { useMemo, useEffect, useState } from 'react';
-import clsx from '../utils/clsx';
-import { CSS } from '../theme/stitches.config';
-import {
-  StyledPaginationHighlight,
-  PaginationHighlightVariantsProps
-} from './pagination.styles';
-import { mergeProps } from '@react-aria/utils';
+import React, {useMemo, useEffect, useState} from "react";
+import {mergeProps} from "@react-aria/utils";
+
+import clsx from "../utils/clsx";
+import {CSS} from "../theme/stitches.config";
+
+import {StyledPaginationHighlight, PaginationHighlightVariantsProps} from "./pagination.styles";
 
 interface Props {
   active: number;
@@ -18,11 +17,9 @@ interface Props {
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type PaginationHighlightProps = Props &
-  NativeAttrs &
-  PaginationHighlightVariantsProps;
+export type PaginationHighlightProps = Props & NativeAttrs & PaginationHighlightVariantsProps;
 
-const preClass = 'nextui-pagination-highlight';
+const preClass = "nextui-pagination-highlight";
 
 const PaginationHighlight: React.FC<PaginationHighlightProps> = ({
   active,
@@ -33,14 +30,14 @@ const PaginationHighlight: React.FC<PaginationHighlightProps> = ({
   ...props
 }) => {
   const [selfActive, setSelfActive] = useState(active);
-  const [moveClassName, setMoveClassName] = useState('');
+  const [moveClassName, setMoveClassName] = useState("");
 
   useEffect(() => {
     if (active !== selfActive) {
       setSelfActive(active);
       setMoveClassName(`${preClass}--moving`);
       const timer = setTimeout(() => {
-        setMoveClassName('');
+        setMoveClassName("");
         clearTimeout(timer);
       }, 350);
     }
@@ -50,17 +47,13 @@ const PaginationHighlight: React.FC<PaginationHighlightProps> = ({
     () =>
       noMargin
         ? `var(--nextui--paginationSize) * ${selfActive}`
-        : `var(--nextui--paginationSize) * ${selfActive} + ${
-            selfActive * 4 + 2
-          }px`,
-    [selfActive, noMargin]
+        : `var(--nextui--paginationSize) * ${selfActive} + ${selfActive * 4 + 2}px`,
+    [selfActive, noMargin],
   );
 
   return (
     <StyledPaginationHighlight
       aria-hidden={true}
-      shadow={shadow}
-      rounded={rounded}
       className={clsx(
         preClass,
         moveClassName,
@@ -68,24 +61,23 @@ const PaginationHighlight: React.FC<PaginationHighlightProps> = ({
           [`${preClass}--rounded`]: rounded,
           [`${preClass}--active`]: active,
           [`${preClass}--no-margin`]: noMargin,
-          [`${preClass}--shadow`]: shadow
+          [`${preClass}--shadow`]: shadow,
         },
-        props.className
-      )}
-      noMargin={noMargin}
-      style={mergeProps(
-        { '--nextui--paginationLeft': `calc(${leftValue})` },
-        props?.style || {}
+        props.className,
       )}
       css={{
-        left: 'var(--nextui--paginationLeft)',
-        ...(css as any)
+        left: "var(--nextui--paginationLeft)",
+        ...(css as any),
       }}
+      noMargin={noMargin}
+      rounded={rounded}
+      shadow={shadow}
+      style={mergeProps({"--nextui--paginationLeft": `calc(${leftValue})`}, props?.style || {})}
       {...props}
     />
   );
 };
 
-PaginationHighlight.toString = () => '.nextui-pagination-highlight';
+PaginationHighlight.toString = () => ".nextui-pagination-highlight";
 
 export default PaginationHighlight;
diff --git a/packages/react/src/pagination/pagination-icon.tsx b/packages/react/src/pagination/pagination-icon.tsx
index df56f60986..b32df7cdaa 100644
--- a/packages/react/src/pagination/pagination-icon.tsx
+++ b/packages/react/src/pagination/pagination-icon.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
-import PaginationItem from './pagination-item';
-import { StyledPaginationIcon } from './pagination.styles';
-import { CSS } from '../theme/stitches.config';
+import React from "react";
+
+import {CSS} from "../theme/stitches.config";
+
+import PaginationItem from "./pagination-item";
+import {StyledPaginationIcon} from "./pagination.styles";
 
 interface Props {
   isPrev?: boolean;
@@ -14,7 +16,7 @@ interface Props {
 
 type NativeAttrs = Omit<React.SVGAttributes<unknown>, keyof Props>;
 
-export type PaginationIconProps = Props & NativeAttrs & { css?: CSS };
+export type PaginationIconProps = Props & NativeAttrs & {css?: CSS};
 
 const PaginationIcon: React.FC<PaginationIconProps> = ({
   isPrev,
@@ -28,36 +30,36 @@ const PaginationIcon: React.FC<PaginationIconProps> = ({
   return (
     <PaginationItem
       preserveContent
-      value={isPrev ? '<' : '>'}
-      bordered={bordered}
       animated={animated}
-      onlyDots={onlyDots}
+      bordered={bordered}
       disabled={disabled}
+      onlyDots={onlyDots}
+      value={isPrev ? "<" : ">"}
       onClick={(e) => onClick && onClick(e)}
     >
       <StyledPaginationIcon
-        role="presentation"
+        className="nextui-pagination-icon"
+        fill="none"
         focusable="false"
+        isPrev={isPrev}
+        role="presentation"
         viewBox="0 0 24 24"
-        fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        className="nextui-pagination-icon"
-        isPrev={isPrev}
         {...props}
       >
         <path
           d="M15.5 19l-7-7 7-7"
           stroke="currentColor"
-          strokeWidth={1.5}
           strokeLinecap="round"
           strokeLinejoin="round"
+          strokeWidth={1.5}
         />
       </StyledPaginationIcon>
     </PaginationItem>
   );
 };
 
-PaginationIcon.toString = () => '.nextui-pagination-icon';
+PaginationIcon.toString = () => ".nextui-pagination-icon";
 
 const MemoPaginationIcon = React.memo(PaginationIcon);
 
diff --git a/packages/react/src/pagination/pagination-item.tsx b/packages/react/src/pagination/pagination-item.tsx
index 253c74c21e..402adedb72 100644
--- a/packages/react/src/pagination/pagination-item.tsx
+++ b/packages/react/src/pagination/pagination-item.tsx
@@ -1,13 +1,15 @@
-import React, { useMemo } from 'react';
-import { DOTS } from '../use-pagination';
-import clsx from '../utils/clsx';
-import withDefaults from '../utils/with-defaults';
-import { CSS } from '../theme/stitches.config';
+import React, {useMemo} from "react";
+
+import {DOTS} from "../use-pagination";
+import clsx from "../utils/clsx";
+import withDefaults from "../utils/with-defaults";
+import {CSS} from "../theme/stitches.config";
+
 import {
   StyledPaginationItem,
   StyledPaginationItemContent,
-  PaginationItemVariantsProps
-} from './pagination.styles';
+  PaginationItemVariantsProps,
+} from "./pagination.styles";
 
 interface Props {
   active?: boolean;
@@ -22,22 +24,22 @@ interface Props {
 }
 
 const defaultProps = {
-  preserveContent: false
+  preserveContent: false,
 };
 
 const getItemAriaLabel = (page?: string | number) => {
   if (!page) return;
   switch (page) {
     case DOTS:
-      return 'dots element';
-    case '<':
-      return 'previous page button';
-    case '>':
-      return 'next page button';
-    case 'first':
-      return 'first page button';
-    case 'last':
-      return 'last page button';
+      return "dots element";
+    case "<":
+      return "previous page button";
+    case ">":
+      return "next page button";
+    case "first":
+      return "first page button";
+    case "last":
+      return "last page button";
     default:
       return `${page} item`;
   }
@@ -45,15 +47,11 @@ const getItemAriaLabel = (page?: string | number) => {
 
 type NativeAttrs = Omit<React.ButtonHTMLAttributes<unknown>, keyof Props>;
 
-export type PaginationItemProps = Props &
-  NativeAttrs &
-  PaginationItemVariantsProps & { css?: CSS };
+export type PaginationItemProps = Props & NativeAttrs & PaginationItemVariantsProps & {css?: CSS};
 
-const preClass = 'nextui-pagination-item';
+const preClass = "nextui-pagination-item";
 
-const PaginationItem: React.FC<
-  React.PropsWithChildren<PaginationItemProps>
-> = ({
+const PaginationItem: React.FC<React.PropsWithChildren<PaginationItemProps>> = ({
   active,
   value,
   children,
@@ -66,9 +64,8 @@ const PaginationItem: React.FC<
   ...props
 }) => {
   const ariaLabel = useMemo(
-    () =>
-      active ? `${getItemAriaLabel(value)} active` : getItemAriaLabel(value),
-    [value, active]
+    () => (active ? `${getItemAriaLabel(value)} active` : getItemAriaLabel(value)),
+    [value, active],
   );
 
   const clickHandler = (event: React.MouseEvent) => {
@@ -78,23 +75,23 @@ const PaginationItem: React.FC<
 
   return (
     <StyledPaginationItem
+      active={active}
+      animated={animated}
+      aria-label={ariaLabel}
+      bordered={bordered}
       className={clsx(preClass, {
         [`${preClass}-active`]: active,
         [`${preClass}-animated`]: animated,
         [`${preClass}-disabled`]: disabled,
         [`${preClass}-bordered`]: bordered,
         [`${preClass}-only-dots`]: onlyDots,
-        [`${preClass}-preserve-content`]: preserveContent
+        [`${preClass}-preserve-content`]: preserveContent,
       })}
-      animated={animated}
-      active={active}
       disabled={disabled}
-      bordered={bordered}
       onlyDots={onlyDots}
       preserveContent={preserveContent}
-      onClick={clickHandler}
-      aria-label={ariaLabel}
       tabIndex={disabled ? -1 : 0}
+      onClick={clickHandler}
       {...props}
     >
       <StyledPaginationItemContent className={`${preClass}-content`}>
@@ -104,6 +101,6 @@ const PaginationItem: React.FC<
   );
 };
 
-PaginationItem.toString = () => '.nextui-pagination-item';
+PaginationItem.toString = () => ".nextui-pagination-item";
 
 export default withDefaults(PaginationItem, defaultProps);
diff --git a/packages/react/src/pagination/pagination.stories.tsx b/packages/react/src/pagination/pagination.stories.tsx
index 3a36788d6c..dbb0b9be4e 100644
--- a/packages/react/src/pagination/pagination.stories.tsx
+++ b/packages/react/src/pagination/pagination.stories.tsx
@@ -1,21 +1,23 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Pagination from './pagination';
-import { Grid } from '../index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Grid} from "../index";
+
+import Pagination from "./pagination";
 
 export default {
-  title: 'Navigation/Pagination',
+  title: "Navigation/Pagination",
   component: Pagination,
   decorators: [
     (Story) => (
       <Grid.Container gap={2} sm={12}>
         <Story />
       </Grid.Container>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
-export const Default = () => <Pagination total={20} initialPage={1} />;
+export const Default = () => <Pagination initialPage={1} total={20} />;
 
 export const Colors = () => (
   <>
@@ -49,13 +51,13 @@ export const Sizes = () => (
       <Pagination size="sm" total={5} />
     </Grid>
     <Grid xs={12}>
-      <Pagination size="md" total={10} initialPage={6} />
+      <Pagination initialPage={6} size="md" total={10} />
     </Grid>
     <Grid xs={12}>
-      <Pagination size="lg" total={10} initialPage={6} />
+      <Pagination initialPage={6} size="lg" total={10} />
     </Grid>
     <Grid xs={12}>
-      <Pagination size="xl" total={30} initialPage={6} />
+      <Pagination initialPage={6} size="xl" total={30} />
     </Grid>
   </>
 );
@@ -69,13 +71,13 @@ export const Rounded = () => (
       <Pagination rounded size="sm" total={5} />
     </Grid>
     <Grid xs={12}>
-      <Pagination rounded size="md" total={10} initialPage={6} />
+      <Pagination rounded initialPage={6} size="md" total={10} />
     </Grid>
     <Grid xs={12}>
-      <Pagination rounded size="lg" total={10} initialPage={6} />
+      <Pagination rounded initialPage={6} size="lg" total={10} />
     </Grid>
     <Grid xs={12}>
-      <Pagination rounded size="xl" total={30} initialPage={6} />
+      <Pagination rounded initialPage={6} size="xl" total={30} />
     </Grid>
   </>
 );
@@ -83,10 +85,10 @@ export const Rounded = () => (
 export const Bordered = () => (
   <>
     <Grid xs={12}>
-      <Pagination bordered total={20} initialPage={1} />
+      <Pagination bordered initialPage={1} total={20} />
     </Grid>
     <Grid xs={12}>
-      <Pagination rounded bordered total={20} initialPage={1} />
+      <Pagination bordered rounded initialPage={1} total={20} />
     </Grid>
   </>
 );
@@ -117,19 +119,19 @@ export const Shadow = () => (
 export const OnlyDots = () => (
   <>
     <Grid xs={12}>
-      <Pagination color="primary" onlyDots size="xs" total={10} />
+      <Pagination onlyDots color="primary" size="xs" total={10} />
     </Grid>
     <Grid xs={12}>
-      <Pagination shadow color="secondary" onlyDots size="sm" total={10} />
+      <Pagination onlyDots shadow color="secondary" size="sm" total={10} />
     </Grid>
     <Grid xs={12}>
-      <Pagination color="success" onlyDots size="md" total={10} />
+      <Pagination onlyDots color="success" size="md" total={10} />
     </Grid>
     <Grid xs={12}>
-      <Pagination shadow color="warning" onlyDots size="lg" total={10} />
+      <Pagination onlyDots shadow color="warning" size="lg" total={10} />
     </Grid>
     <Grid xs={12}>
-      <Pagination color="error" onlyDots size="xl" total={10} />
+      <Pagination onlyDots color="error" size="xl" total={10} />
     </Grid>
   </>
 );
@@ -137,7 +139,7 @@ export const OnlyDots = () => (
 export const Loop = () => (
   <>
     <Grid xs={12}>
-      <Pagination loop total={6} initialPage={1} />
+      <Pagination loop initialPage={1} total={6} />
     </Grid>
   </>
 );
@@ -145,7 +147,7 @@ export const Loop = () => (
 export const NoMargin = () => (
   <>
     <Grid xs={12}>
-      <Pagination shadow noMargin color="secondary" total={6} initialPage={1} />
+      <Pagination noMargin shadow color="secondary" initialPage={1} total={6} />
     </Grid>
   </>
 );
@@ -153,13 +155,7 @@ export const NoMargin = () => (
 export const NoControls = () => (
   <>
     <Grid xs={12}>
-      <Pagination
-        shadow
-        controls={false}
-        color="success"
-        total={20}
-        initialPage={1}
-      />
+      <Pagination shadow color="success" controls={false} initialPage={1} total={20} />
     </Grid>
   </>
 );
@@ -167,7 +163,7 @@ export const NoControls = () => (
 export const NoAnimated = () => (
   <>
     <Grid xs={12}>
-      <Pagination animated={false} total={6} initialPage={1} />
+      <Pagination animated={false} initialPage={1} total={6} />
     </Grid>
   </>
 );
diff --git a/packages/react/src/pagination/pagination.styles.ts b/packages/react/src/pagination/pagination.styles.ts
index 38ebfed626..9c47afae6f 100644
--- a/packages/react/src/pagination/pagination.styles.ts
+++ b/packages/react/src/pagination/pagination.styles.ts
@@ -1,30 +1,30 @@
-import { styled, VariantProps, keyframes } from '../theme/stitches.config';
-import { sharedFocus } from '../theme/shared-css';
+import {styled, VariantProps, keyframes} from "../theme/stitches.config";
+import {sharedFocus} from "../theme/shared-css";
 
 const paginationAnimation = keyframes({
-  '0%': {
-    transform: 'scale(1)'
+  "0%": {
+    transform: "scale(1)",
   },
-  '60%': {
-    transform: 'scale($$paginationScaleTransform)'
+  "60%": {
+    transform: "scale($$paginationScaleTransform)",
+  },
+  "100%": {
+    transform: "scale(1)",
   },
-  '100%': {
-    transform: 'scale(1)'
-  }
 });
 
-export const StyledPaginationEllipsis = styled('svg', {
-  color: 'currentColor',
-  stroke: 'currentColor',
+export const StyledPaginationEllipsis = styled("svg", {
+  color: "currentColor",
+  stroke: "currentColor",
   variants: {
     isEllipsis: {
       true: {
-        transform: '0deg'
-      }
+        transform: "0deg",
+      },
     },
     isBefore: {
-      true: {}
-    }
+      true: {},
+    },
   },
   compoundVariants: [
     {
@@ -32,107 +32,106 @@ export const StyledPaginationEllipsis = styled('svg', {
       isEllipsis: true,
       isBefore: true,
       css: {
-        transform: 'rotate(180deg)'
-      }
-    }
-  ]
+        transform: "rotate(180deg)",
+      },
+    },
+  ],
 });
 
-export const StyledPaginationIcon = styled('svg', {
-  transform: 'rotate(180deg)',
+export const StyledPaginationIcon = styled("svg", {
+  transform: "rotate(180deg)",
   variants: {
     isPrev: {
       true: {
-        transform: 'rotate(0deg)'
-      }
-    }
-  }
+        transform: "rotate(0deg)",
+      },
+    },
+  },
 });
 
-export const StyledPaginationItemContent = styled('span', {
-  position: 'relative',
-  display: 'inline-flex',
-  alignItems: 'center',
+export const StyledPaginationItemContent = styled("span", {
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
   top: 0,
   left: 0,
-  zIndex: '$2'
+  zIndex: "$2",
 });
 
 export const StyledPaginationItem = styled(
-  'button',
+  "button",
   {
-    border: 'none',
-    position: 'relative',
-    display: 'inline-flex',
-    margin: '0 $$paginationItemMargin',
-    ai: 'center',
-    jc: 'center',
+    border: "none",
+    position: "relative",
+    display: "inline-flex",
+    margin: "0 $$paginationItemMargin",
+    ai: "center",
+    jc: "center",
     padding: 0,
-    boxSizing: 'border-box',
-    tt: 'capitalize',
-    us: 'none',
-    whiteSpace: 'nowrap',
-    ta: 'center',
-    verticalAlign: 'middle',
-    bs: 'none',
-    outline: 'none',
-    height: '$$paginationSize',
-    minWidth: '$$paginationSize',
-    fs: 'inherit',
-    cursor: 'pointer',
-    br: '$$paginationItemRadius',
-    color: '$text',
-    bg: '$accents0',
-    '@motion': {
-      transition: 'none'
+    boxSizing: "border-box",
+    tt: "capitalize",
+    us: "none",
+    whiteSpace: "nowrap",
+    ta: "center",
+    verticalAlign: "middle",
+    bs: "none",
+    outline: "none",
+    height: "$$paginationSize",
+    minWidth: "$$paginationSize",
+    fs: "inherit",
+    cursor: "pointer",
+    br: "$$paginationItemRadius",
+    color: "$text",
+    bg: "$accents0",
+    "@motion": {
+      transition: "none",
     },
-    '&:hover': {
-      bg: '$accents1'
+    "&:hover": {
+      bg: "$accents1",
     },
     [`& ${StyledPaginationIcon}`]: {
-      size: '$$paginationFontSize'
+      size: "$$paginationFontSize",
     },
     [`& ${StyledPaginationEllipsis}`]: {
-      size: '$$paginationFontSize'
+      size: "$$paginationFontSize",
     },
     variants: {
       active: {
         true: {
-          fontWeight: '$bold',
-          cursor: 'default',
-          boxShadow: '$sm',
+          fontWeight: "$bold",
+          cursor: "default",
+          boxShadow: "$sm",
           [`& ${StyledPaginationItemContent}`]: {
-            color: '$white'
-          }
-        }
+            color: "$white",
+          },
+        },
       },
       disabled: {
         true: {
-          color: '$accents5',
-          cursor: 'not-allowed'
-        }
+          color: "$accents5",
+          cursor: "not-allowed",
+        },
       },
       bordered: {
         true: {
-          bg: 'transparent',
-          border: '$$paginationItemBorderWeight solid $accents2'
-        }
+          bg: "transparent",
+          border: "$$paginationItemBorderWeight solid $accents2",
+        },
       },
       onlyDots: {
-        true: {}
+        true: {},
       },
       preserveContent: {
-        true: {}
+        true: {},
       },
       animated: {
         true: {
-          transition:
-            'transform 0.25s ease 0s, background 0.25s ease 0s, box-shadow 0.25s ease 0s'
+          transition: "transform 0.25s ease 0s, background 0.25s ease 0s, box-shadow 0.25s ease 0s",
         },
         false: {
-          transition: 'none'
-        }
-      }
+          transition: "none",
+        },
+      },
     },
     compoundVariants: [
       // onlyDots && !preserveContent
@@ -141,9 +140,9 @@ export const StyledPaginationItem = styled(
         preserveContent: false,
         css: {
           [`& ${StyledPaginationItemContent}`]: {
-            display: 'none'
-          }
-        }
+            display: "none",
+          },
+        },
       },
       // animated && !disabled && !active
       {
@@ -151,66 +150,66 @@ export const StyledPaginationItem = styled(
         disabled: false,
         active: false,
         css: {
-          '&:active': {
-            transform: 'scale($$paginationScaleTransform)',
-            fs: 'calc($$paginationFontSize * 0.9)'
-          }
-        }
-      }
-    ]
+          "&:active": {
+            transform: "scale($$paginationScaleTransform)",
+            fs: "calc($$paginationFontSize * 0.9)",
+          },
+        },
+      },
+    ],
   },
-  sharedFocus
+  sharedFocus,
 );
 
-export const StyledPaginationHighlight = styled('div', {
-  position: 'absolute',
-  contain: 'strict',
-  top: '0px',
-  zIndex: '$1',
-  bg: '$$paginationColor',
-  br: '$$paginationItemRadius',
-  height: '$$paginationSize',
-  minWidth: '$$paginationSize',
+export const StyledPaginationHighlight = styled("div", {
+  position: "absolute",
+  contain: "strict",
+  top: "0px",
+  zIndex: "$1",
+  bg: "$$paginationColor",
+  br: "$$paginationItemRadius",
+  height: "$$paginationSize",
+  minWidth: "$$paginationSize",
   animationName: `${paginationAnimation}`,
-  animationDirection: 'normal',
-  '&.nextui-pagination-highlight--moving': {
-    transform: 'scale($$paginationScaleTransform)'
+  animationDirection: "normal",
+  "&.nextui-pagination-highlight--moving": {
+    transform: "scale($$paginationScaleTransform)",
   },
-  '@motion': {
-    transition: 'none',
-    '&.nextui-pagination-highlight--moving': {
-      transform: 'scale(1)'
-    }
+  "@motion": {
+    transition: "none",
+    "&.nextui-pagination-highlight--moving": {
+      transform: "scale(1)",
+    },
   },
   variants: {
     animated: {
       true: {
-        animationDuration: '350ms',
-        animationTimingFunction: 'ease',
-        transition: 'left 350ms ease 0s, transform 300ms ease 0s'
+        animationDuration: "350ms",
+        animationTimingFunction: "ease",
+        transition: "left 350ms ease 0s, transform 300ms ease 0s",
       },
       false: {
-        animationDuration: 'none',
-        animationTimingFunction: 'none',
-        transition: 'none',
-        '&.nextui-pagination-highlight--moving': {
-          transform: 'scale(1)'
-        }
-      }
+        animationDuration: "none",
+        animationTimingFunction: "none",
+        transition: "none",
+        "&.nextui-pagination-highlight--moving": {
+          transform: "scale(1)",
+        },
+      },
     },
     noMargin: {
       true: {
-        br: '$squared'
-      }
+        br: "$squared",
+      },
     },
     rounded: {
-      true: {}
+      true: {},
     },
     shadow: {
       true: {
-        normalShadowVar: '$$paginationShadowColor'
-      }
-    }
+        normalShadowVar: "$$paginationShadowColor",
+      },
+    },
   },
   compoundVariants: [
     {
@@ -218,133 +217,133 @@ export const StyledPaginationHighlight = styled('div', {
       rounded: true,
       noMargin: true,
       css: {
-        br: '$pill'
-      }
-    }
-  ]
+        br: "$pill",
+      },
+    },
+  ],
 });
 
-export const StyledPagination = styled('nav', {
+export const StyledPagination = styled("nav", {
   m: 0,
   p: 0,
-  d: 'inline-flex',
-  position: 'relative',
-  fontVariant: 'tabular-nums',
-  fontFeatureSettings: 'tnum',
+  d: "inline-flex",
+  position: "relative",
+  fontVariant: "tabular-nums",
+  fontFeatureSettings: "tnum",
   variants: {
     color: {
       default: {
-        $$paginationColor: '$colors$primary',
-        $$paginationShadowColor: '$colors$primaryShadow'
+        $$paginationColor: "$colors$primary",
+        $$paginationShadowColor: "$colors$primaryShadow",
       },
       primary: {
-        $$paginationColor: '$colors$primary',
-        $$paginationShadowColor: '$colors$primaryShadow'
+        $$paginationColor: "$colors$primary",
+        $$paginationShadowColor: "$colors$primaryShadow",
       },
       secondary: {
-        $$paginationColor: '$colors$secondary',
-        $$paginationShadowColor: '$colors$secondaryShadow'
+        $$paginationColor: "$colors$secondary",
+        $$paginationShadowColor: "$colors$secondaryShadow",
       },
       success: {
-        $$paginationColor: '$colors$success',
-        $$paginationShadowColor: '$colors$successShadow'
+        $$paginationColor: "$colors$success",
+        $$paginationShadowColor: "$colors$successShadow",
       },
       warning: {
-        $$paginationColor: '$colors$warning',
-        $$paginationShadowColor: '$colors$warningShadow'
+        $$paginationColor: "$colors$warning",
+        $$paginationShadowColor: "$colors$warningShadow",
       },
       error: {
-        $$paginationColor: '$colors$error',
-        $$paginationShadowColor: '$colors$errorShadow'
+        $$paginationColor: "$colors$error",
+        $$paginationShadowColor: "$colors$errorShadow",
       },
       gradient: {
-        $$paginationColor: '$colors$gradient',
-        $$paginationShadowColor: '$colors$primaryShadow'
-      }
+        $$paginationColor: "$colors$gradient",
+        $$paginationShadowColor: "$colors$primaryShadow",
+      },
     },
     size: {
       xs: {
-        $$paginationWidth: '$space$10',
-        $$paginationFontSize: '$space$5',
-        fs: '$$paginationFontSize'
+        $$paginationWidth: "$space$10",
+        $$paginationFontSize: "$space$5",
+        fs: "$$paginationFontSize",
       },
       sm: {
-        $$paginationWidth: '$space$12',
-        $$paginationFontSize: '$space$6',
-        fs: '$$paginationFontSize'
+        $$paginationWidth: "$space$12",
+        $$paginationFontSize: "$space$6",
+        fs: "$$paginationFontSize",
       },
       md: {
-        $$paginationWidth: '$space$13',
-        $$paginationFontSize: '$space$7',
-        fs: '$$paginationFontSize'
+        $$paginationWidth: "$space$13",
+        $$paginationFontSize: "$space$7",
+        fs: "$$paginationFontSize",
       },
       lg: {
-        $$paginationWidth: '$space$14',
-        $$paginationFontSize: '$space$8',
-        fs: '$$paginationFontSize'
+        $$paginationWidth: "$space$14",
+        $$paginationFontSize: "$space$8",
+        fs: "$$paginationFontSize",
       },
       xl: {
-        $$paginationWidth: '$space$15',
-        $$paginationFontSize: '$space$9',
-        fs: '$$paginationFontSize'
-      }
+        $$paginationWidth: "$space$15",
+        $$paginationFontSize: "$space$9",
+        fs: "$$paginationFontSize",
+      },
     },
     borderWeight: {
       light: {
-        $$paginationItemBorderWeight: '$borderWeights$light'
+        $$paginationItemBorderWeight: "$borderWeights$light",
       },
       normal: {
-        $$paginationItemBorderWeight: '$borderWeights$normal'
+        $$paginationItemBorderWeight: "$borderWeights$normal",
       },
       bold: {
-        $$paginationItemBorderWeight: '$borderWeights$bold'
+        $$paginationItemBorderWeight: "$borderWeights$bold",
       },
       extrabold: {
-        $$paginationItemBorderWeight: '$borderWeights$extrabold'
+        $$paginationItemBorderWeight: "$borderWeights$extrabold",
       },
       black: {
-        $$paginationItemBorderWeight: '$borderWeights$black'
-      }
+        $$paginationItemBorderWeight: "$borderWeights$black",
+      },
     },
     bordered: {
-      true: {}
+      true: {},
     },
     onlyDots: {
       true: {
-        $$paginationSize: 'calc($$paginationWidth / 2)',
-        $$paginationItemRadius: '$radii$pill',
-        $$paginationScaleTransform: 1.05
+        $$paginationSize: "calc($$paginationWidth / 2)",
+        $$paginationItemRadius: "$radii$pill",
+        $$paginationScaleTransform: 1.05,
       },
       false: {
-        $$paginationSize: '$$paginationWidth',
-        $$paginationScaleTransform: 1.1
-      }
+        $$paginationSize: "$$paginationWidth",
+        $$paginationScaleTransform: 1.1,
+      },
     },
     rounded: {
       true: {
-        $$paginationItemRadius: '$radii$pill'
+        $$paginationItemRadius: "$radii$pill",
       },
       false: {
-        $$paginationItemRadius: '$radii$squared'
-      }
+        $$paginationItemRadius: "$radii$squared",
+      },
     },
     noMargin: {
       true: {
-        $$paginationItemRadius: '0px',
-        $$paginationItemMargin: '0',
+        $$paginationItemRadius: "0px",
+        $$paginationItemMargin: "0",
         [`& ${StyledPaginationItem}:first-of-type`]: {
-          btlr: '$squared',
-          bblr: '$squared'
+          btlr: "$squared",
+          bblr: "$squared",
         },
         [`& ${StyledPaginationItem}:last-of-type`]: {
-          btrr: '$squared',
-          bbrr: '$squared'
-        }
+          btrr: "$squared",
+          bbrr: "$squared",
+        },
       },
       false: {
-        $$paginationItemMargin: '$space$1'
-      }
-    }
+        $$paginationItemMargin: "$space$1",
+      },
+    },
   },
   compoundVariants: [
     {
@@ -353,41 +352,37 @@ export const StyledPagination = styled('nav', {
       noMargin: true,
       css: {
         [`& ${StyledPaginationItem}:not(:last-child)`]: {
-          borderRight: 0
-        }
-      }
+          borderRight: 0,
+        },
+      },
     },
     {
       // noMargin && rounded
       noMargin: true,
       rounded: true,
       css: {
-        $$paginationItemRadius: '0px'
-      }
+        $$paginationItemRadius: "0px",
+      },
     },
     {
       // !rounded && noMargin
       rounded: false,
       noMargin: true,
       css: {
-        $$paginationItemRadius: '0px'
-      }
-    }
+        $$paginationItemRadius: "0px",
+      },
+    },
   ],
   defaultVariants: {
-    color: 'default',
-    size: 'md',
-    borderWeight: 'normal',
+    color: "default",
+    size: "md",
+    borderWeight: "normal",
     onlyDots: false,
     noMargin: false,
-    rounded: false
-  }
+    rounded: false,
+  },
 });
 
 export type PaginationVariantsProps = VariantProps<typeof StyledPagination>;
-export type PaginationItemVariantsProps = VariantProps<
-  typeof StyledPaginationItem
->;
-export type PaginationHighlightVariantsProps = VariantProps<
-  typeof StyledPaginationHighlight
->;
+export type PaginationItemVariantsProps = VariantProps<typeof StyledPaginationItem>;
+export type PaginationHighlightVariantsProps = VariantProps<typeof StyledPaginationHighlight>;
diff --git a/packages/react/src/pagination/pagination.tsx b/packages/react/src/pagination/pagination.tsx
index f5d88a98d4..01124d9955 100644
--- a/packages/react/src/pagination/pagination.tsx
+++ b/packages/react/src/pagination/pagination.tsx
@@ -1,13 +1,15 @@
-import React, { useCallback } from 'react';
-import usePagination, { DOTS, PaginationItemParam } from '../use-pagination';
-import { CSS } from '../theme/stitches.config';
-import PaginationItem from './pagination-item';
-import PaginationEllipsis from './pagination-ellipsis';
-import PaginationIcon from './pagination-icon';
-import PaginationHighlight from './pagination-highlight';
-import { StyledPagination, PaginationVariantsProps } from './pagination.styles';
-import { __DEV__ } from '../utils/assertion';
-import clsx from '../utils/clsx';
+import React, {useCallback} from "react";
+
+import usePagination, {DOTS, PaginationItemParam} from "../use-pagination";
+import {CSS} from "../theme/stitches.config";
+import {__DEV__} from "../utils/assertion";
+import clsx from "../utils/clsx";
+
+import PaginationItem from "./pagination-item";
+import PaginationEllipsis from "./pagination-ellipsis";
+import PaginationIcon from "./pagination-icon";
+import PaginationHighlight from "./pagination-highlight";
+import {StyledPagination, PaginationVariantsProps} from "./pagination.styles";
 
 interface Props {
   page?: number;
@@ -41,7 +43,7 @@ const defaultProps = {
   animated: true,
   onlyDots: false,
   noMargin: false,
-  rounded: false
+  rounded: false,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -49,9 +51,9 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export type PaginationProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  PaginationVariantsProps & { css?: CSS };
+  PaginationVariantsProps & {css?: CSS};
 
-const preClass = 'nextui-pagination';
+const preClass = "nextui-pagination";
 
 const Pagination: React.FC<React.PropsWithChildren<PaginationProps>> = ({
   page,
@@ -71,60 +73,59 @@ const Pagination: React.FC<React.PropsWithChildren<PaginationProps>> = ({
   rounded,
   ...props
 }) => {
-  const { range, active, setPage, previous, next, first, last } = usePagination(
-    {
-      page,
-      initialPage,
-      siblings: onlyDots ? 10 : siblings,
-      boundaries: onlyDots ? 10 : boundaries,
-      total,
-      onChange
-    }
-  );
+  const {range, active, setPage, previous, next, first, last} = usePagination({
+    page,
+    initialPage,
+    siblings: onlyDots ? 10 : siblings,
+    boundaries: onlyDots ? 10 : boundaries,
+    total,
+    onChange,
+  });
 
   const renderItem = useCallback(
     (value: PaginationItemParam, index: number) => {
       if (value === DOTS) {
         const isBefore = index < range.indexOf(active);
+
         return (
           <PaginationEllipsis
             key={`${preClass}-item-${value}-${index}`}
-            value={value}
-            bordered={bordered}
             animated={animated}
+            bordered={bordered}
             isBefore={isBefore}
             onlyDots={onlyDots}
+            value={value}
             onClick={() =>
               isBefore
                 ? setPage(active - dotsJump >= 1 ? active - dotsJump : 1)
-                : setPage(
-                    active + dotsJump <= total ? active + dotsJump : total
-                  )
+                : setPage(active + dotsJump <= total ? active + dotsJump : total)
             }
           />
         );
       }
+
       return (
         <PaginationItem
           key={`${preClass}-item-${value}-${index}`}
-          value={value}
+          active={value === active}
           animated={animated}
           bordered={bordered}
-          active={value === active}
-          onClick={() => value !== active && setPage(value)}
           onlyDots={onlyDots}
+          value={value}
+          onClick={() => value !== active && setPage(value)}
         >
           {value}
         </PaginationItem>
       );
     },
-    [total, onlyDots, active, bordered, animated]
+    [total, onlyDots, active, bordered, animated],
   );
 
   const handleNext = () => {
     if (loop && active === total) {
       return first();
     }
+
     return next();
   };
 
@@ -132,48 +133,49 @@ const Pagination: React.FC<React.PropsWithChildren<PaginationProps>> = ({
     if (loop && active === 1) {
       return last();
     }
+
     return previous();
   };
 
   return (
     <StyledPagination
-      noMargin={noMargin}
       bordered={bordered}
-      rounded={rounded}
-      onlyDots={onlyDots}
       className={clsx(preClass, {
         [`${preClass}--no-margin`]: noMargin,
         [`${preClass}--bordered`]: bordered,
         [`${preClass}--shadow`]: shadow,
-        [`${preClass}--rounded`]: rounded
+        [`${preClass}--rounded`]: rounded,
       })}
+      noMargin={noMargin}
+      onlyDots={onlyDots}
+      rounded={rounded}
       {...props}
     >
       {controls && (
         <PaginationIcon
           isPrev
-          bordered={bordered}
           animated={animated}
+          bordered={bordered}
+          disabled={!loop && active === 1}
           onlyDots={onlyDots}
           onClick={handlePrevious}
-          disabled={!loop && active === 1}
         />
       )}
       <PaginationHighlight
-        noMargin={noMargin}
+        active={controls ? range.indexOf(active) + 1 : range.indexOf(active)}
         animated={animated}
-        shadow={shadow}
+        noMargin={noMargin}
         rounded={rounded}
-        active={controls ? range.indexOf(active) + 1 : range.indexOf(active)}
+        shadow={shadow}
       />
       {range.map(renderItem)}
       {controls && (
         <PaginationIcon
-          bordered={bordered}
           animated={animated}
+          bordered={bordered}
+          disabled={!loop && active === total}
           onlyDots={onlyDots}
           onClick={handleNext}
-          disabled={!loop && active === total}
         />
       )}
     </StyledPagination>
@@ -185,16 +187,14 @@ type MemoPaginationComponent<P = {}> = React.NamedExoticComponent<P>;
 type ComponentProps = Partial<typeof defaultProps> &
   Omit<Props, keyof typeof defaultProps> &
   NativeAttrs &
-  PaginationVariantsProps & { css?: CSS };
+  PaginationVariantsProps & {css?: CSS};
 
 Pagination.defaultProps = defaultProps;
 
 if (__DEV__) {
-  Pagination.displayName = 'NextUI.Pagination';
+  Pagination.displayName = "NextUI.Pagination";
 }
 
-Pagination.toString = () => '.nextui-pagination';
+Pagination.toString = () => ".nextui-pagination";
 
-export default React.memo(
-  Pagination
-) as MemoPaginationComponent<ComponentProps>;
+export default React.memo(Pagination) as MemoPaginationComponent<ComponentProps>;
diff --git a/packages/react/src/popover/__tests__/index.test.tsx b/packages/react/src/popover/__tests__/index.test.tsx
index e14d01abc3..3b559fbde6 100644
--- a/packages/react/src/popover/__tests__/index.test.tsx
+++ b/packages/react/src/popover/__tests__/index.test.tsx
@@ -1,12 +1,13 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Button from '../../button';
-import { fireEvent, render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Popover from '../index';
-
-describe('Popover', () => {
-  it('should render correctly', () => {
+import React from "react";
+import {mount} from "enzyme";
+import {fireEvent, render} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import Button from "../../button";
+import Popover from "../index";
+
+describe("Popover", () => {
+  it("should render correctly", () => {
     const wrapper = mount(
       <Popover>
         <Popover.Trigger>
@@ -15,12 +16,13 @@ describe('Popover', () => {
         <Popover.Content>
           <p>This is the content of the popover.</p>
         </Popover.Content>
-      </Popover>
+      </Popover>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should hide the popover when clicking outside', () => {
+  it("should hide the popover when clicking outside", () => {
     const onClose = jest.fn();
 
     const wrapper = render(
@@ -31,16 +33,16 @@ describe('Popover', () => {
         <Popover.Content>
           <p>This is the content of the popover.</p>
         </Popover.Content>
-      </Popover>
+      </Popover>,
     );
 
-    const trigger = wrapper.getByTestId('trigger-test');
+    const trigger = wrapper.getByTestId("trigger-test");
 
     userEvent.click(trigger);
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it('should hide the popover when pressing the escape key', () => {
+  it("should hide the popover when pressing the escape key", () => {
     const onClose = jest.fn();
 
     const wrapper = render(
@@ -51,76 +53,76 @@ describe('Popover', () => {
         <Popover.Content data-testid="content-test">
           <p>This is the content of the popover.</p>
         </Popover.Content>
-      </Popover>
+      </Popover>,
     );
 
-    const content = wrapper.getByTestId('content-test');
+    const content = wrapper.getByTestId("content-test");
 
-    fireEvent.keyDown(content, { key: 'Escape' });
+    fireEvent.keyDown(content, {key: "Escape"});
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it('should still hide the popover when pressing the escape key if isDismissable is false', () => {
+  it("should still hide the popover when pressing the escape key if isDismissable is false", () => {
     const onClose = jest.fn();
 
     const wrapper = render(
-      <Popover isOpen onClose={onClose} isDismissable={false}>
+      <Popover isOpen isDismissable={false} onClose={onClose}>
         <Popover.Trigger>
           <button>Open popover</button>
         </Popover.Trigger>
         <Popover.Content data-testid="content-test">
           <p>This is the content of the popover.</p>
         </Popover.Content>
-      </Popover>
+      </Popover>,
     );
 
-    const content = wrapper.getByTestId('content-test');
+    const content = wrapper.getByTestId("content-test");
 
-    fireEvent.keyDown(content, { key: 'Escape' });
+    fireEvent.keyDown(content, {key: "Escape"});
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it('should not hide the popover when clicking outside if isDismissable is false', () => {
+  it("should not hide the popover when clicking outside if isDismissable is false", () => {
     const onClose = jest.fn();
 
     const wrapper = render(
-      <Popover isOpen onClose={onClose} isDismissable={false}>
+      <Popover isOpen isDismissable={false} onClose={onClose}>
         <Popover.Trigger>
           <button data-testid="trigger-test">Open popover</button>
         </Popover.Trigger>
         <Popover.Content>
           <p>This is the content of the popover.</p>
         </Popover.Content>
-      </Popover>
+      </Popover>,
     );
 
-    const trigger = wrapper.getByTestId('trigger-test');
+    const trigger = wrapper.getByTestId("trigger-test");
 
     userEvent.click(trigger);
     expect(onClose).toHaveBeenCalledTimes(0);
   });
 
-  it('should hide the popover on blur when shouldCloseOnBlur is true', () => {
+  it("should hide the popover on blur when shouldCloseOnBlur is true", () => {
     const onClose = jest.fn();
 
     const wrapper = render(
-      <Popover isOpen onClose={onClose} shouldCloseOnBlur>
+      <Popover isOpen shouldCloseOnBlur onClose={onClose}>
         <Popover.Trigger>
           <button>Open popover</button>
         </Popover.Trigger>
         <Popover.Content data-testid="content-test">
           <p>This is the content of the popover.</p>
         </Popover.Content>
-      </Popover>
+      </Popover>,
     );
 
-    const content = wrapper.getByTestId('content-test');
+    const content = wrapper.getByTestId("content-test");
 
     fireEvent.blur(content);
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it('should work with NextUI button', () => {
+  it("should work with NextUI button", () => {
     const onClose = jest.fn();
 
     const wrapper = render(
@@ -131,10 +133,10 @@ describe('Popover', () => {
         <Popover.Content>
           <p>This is the content of the popover.</p>
         </Popover.Content>
-      </Popover>
+      </Popover>,
     );
 
-    const trigger = wrapper.getByTestId('trigger-test');
+    const trigger = wrapper.getByTestId("trigger-test");
 
     userEvent.click(trigger);
     expect(onClose).toHaveBeenCalledTimes(1);
diff --git a/packages/react/src/popover/index.ts b/packages/react/src/popover/index.ts
index dba9672a14..3c5b0b9f61 100644
--- a/packages/react/src/popover/index.ts
+++ b/packages/react/src/popover/index.ts
@@ -1,10 +1,10 @@
-import Popover from './popover';
-import PopoverTrigger from './popover-trigger';
-import PopoverContent from './popover-content';
+import Popover from "./popover";
+import PopoverTrigger from "./popover-trigger";
+import PopoverContent from "./popover-content";
 
-export type { PopoverProps } from './popover';
-export type { PopoverPlacement } from './utils';
-export { StyledPopoverContent as StyledPopoverContent } from './popover.styles';
+export type {PopoverProps} from "./popover";
+export type {PopoverPlacement} from "./utils";
+export {StyledPopoverContent as StyledPopoverContent} from "./popover.styles";
 
 Popover.Content = PopoverContent;
 Popover.Trigger = PopoverTrigger;
diff --git a/packages/react/src/popover/popover-content.tsx b/packages/react/src/popover/popover-content.tsx
index 7d2529e9cb..0104347aec 100644
--- a/packages/react/src/popover/popover-content.tsx
+++ b/packages/react/src/popover/popover-content.tsx
@@ -1,20 +1,22 @@
-import React, { ReactNode } from 'react';
-import { useModal, useOverlay, DismissButton } from '@react-aria/overlays';
-import { useDialog } from '@react-aria/dialog';
-import { FocusScope, useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import { CSS } from '../theme/stitches.config';
-import CSSTransition from '../utils/css-transition';
-import { __DEV__ } from '../utils/assertion';
-import { mergeRefs, ReactRef } from '../utils/refs';
+import React, {ReactNode} from "react";
+import {useModal, useOverlay, DismissButton} from "@react-aria/overlays";
+import {useDialog} from "@react-aria/dialog";
+import {FocusScope, useFocusRing} from "@react-aria/focus";
+import {mergeProps} from "@react-aria/utils";
+
+import {CSS} from "../theme/stitches.config";
+import CSSTransition from "../utils/css-transition";
+import {__DEV__} from "../utils/assertion";
+import {mergeRefs, ReactRef} from "../utils/refs";
+import clsx from "../utils/clsx";
+
 import {
   StyledPopoverContentContainer,
   StyledPopoverContent,
-  PopoverContentVariantsProps
-} from './popover.styles';
-import { usePopoverContext } from './popover-context';
-import { getTransformOrigin } from './utils';
-import clsx from '../utils/clsx';
+  PopoverContentVariantsProps,
+} from "./popover.styles";
+import {usePopoverContext} from "./popover-context";
+import {getTransformOrigin} from "./utils";
 
 interface Props {
   children: ReactNode;
@@ -23,13 +25,11 @@ interface Props {
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type PopoverContentProps = Props &
-  NativeAttrs &
-  PopoverContentVariantsProps & { css?: CSS };
+export type PopoverContentProps = Props & NativeAttrs & PopoverContentVariantsProps & {css?: CSS};
 
 const PopoverContent = React.forwardRef(
   (props: PopoverContentProps, ref: ReactRef<HTMLDivElement>) => {
-    const { children, as, css, className, ...otherProps } = props;
+    const {children, as, css, className, ...otherProps} = props;
 
     const {
       state,
@@ -46,64 +46,53 @@ const PopoverContent = React.forwardRef(
       borderWeight,
       onClose,
       onEntered,
-      onExited
+      onExited,
     } = usePopoverContext();
 
     const transformOrigin = getTransformOrigin(placement);
 
     // Hide content outside the modal from screen readers.
-    const { modalProps } = useModal({ isDisabled: true });
+    const {modalProps} = useModal({isDisabled: true});
 
-    const { dialogProps } = useDialog(
+    const {dialogProps} = useDialog(
       {
-        role: 'dialog'
+        role: "dialog",
       },
-      overlayRef
+      overlayRef,
     );
 
-    const { overlayProps } = useOverlay(
+    const {overlayProps} = useOverlay(
       {
         onClose,
         isOpen: state.isOpen,
         isDismissable: isDismissable && state.isOpen,
         shouldCloseOnBlur,
         isKeyboardDismissDisabled,
-        shouldCloseOnInteractOutside
+        shouldCloseOnInteractOutside,
       },
-      overlayRef
+      overlayRef,
     );
 
-    const completeProps = mergeProps(
-      { isBordered, disableShadow, borderWeight },
-      otherProps
-    );
+    const completeProps = mergeProps({isBordered, disableShadow, borderWeight}, otherProps);
 
-    const { isFocusVisible, focusProps } = useFocusRing();
+    const {isFocusVisible, focusProps} = useFocusRing();
 
     const contents = (
       <StyledPopoverContentContainer
         ref={mergeRefs(overlayRef, ref)}
         {...getPopoverProps(
-          mergeProps(
-            overlayProps,
-            modalProps,
-            dialogProps,
-            focusProps,
-            completeProps
-          )
+          mergeProps(overlayProps, modalProps, dialogProps, focusProps, completeProps),
         )}
-        className={clsx('nextui-popover-content-container', className)}
-        isFocusVisible={isFocusVisible}
         as={as}
+        className={clsx("nextui-popover-content-container", className)}
         css={{
           transformOrigin,
-          ...(css as any)
+          ...(css as any),
         }}
+        isFocusVisible={isFocusVisible}
       >
         <DismissButton onDismiss={onClose} />
-        <StyledPopoverContent className="nextui-popover-content">
-          {children}
-        </StyledPopoverContent>
+        <StyledPopoverContent className="nextui-popover-content">{children}</StyledPopoverContent>
         <DismissButton onDismiss={onClose} />
       </StyledPopoverContentContainer>
     );
@@ -113,13 +102,13 @@ const PopoverContent = React.forwardRef(
         {!disableAnimation ? (
           <FocusScope restoreFocus>
             <CSSTransition
-              visible={state.isOpen}
-              name="nextui-popover-content"
+              clearTime={300}
               enterTime={20}
               leaveTime={60}
-              clearTime={300}
-              onExited={onExited}
+              name="nextui-popover-content"
+              visible={state.isOpen}
               onEntered={onEntered}
+              onExited={onExited}
             >
               {contents}
             </CSSTransition>
@@ -129,20 +118,17 @@ const PopoverContent = React.forwardRef(
         ) : null}
       </>
     );
-  }
+  },
 );
 
 if (__DEV__) {
-  PopoverContent.displayName = 'NextUI.PopoverContent';
+  PopoverContent.displayName = "NextUI.PopoverContent";
 }
 
-PopoverContent.toString = () => '.nextui-popover-content';
+PopoverContent.toString = () => ".nextui-popover-content";
 
 type PopoverContentComponent<T, P = {}> = React.ForwardRefExoticComponent<
   React.PropsWithoutRef<P> & React.RefAttributes<T>
 >;
 
-export default PopoverContent as PopoverContentComponent<
-  HTMLDivElement,
-  PopoverContentProps
->;
+export default PopoverContent as PopoverContentComponent<HTMLDivElement, PopoverContentProps>;
diff --git a/packages/react/src/popover/popover-context.ts b/packages/react/src/popover/popover-context.ts
index 17c531592a..8f01c496d3 100644
--- a/packages/react/src/popover/popover-context.ts
+++ b/packages/react/src/popover/popover-context.ts
@@ -1,9 +1,9 @@
-import { createContext } from '../utils/context';
-import { UsePopoverReturn } from './use-popover';
+import {createContext} from "../utils/context";
 
-export const [PopoverProvider, usePopoverContext] =
-  createContext<UsePopoverReturn>({
-    name: 'PopoverContext',
-    errorMessage:
-      'usePopoverContext: `context` is undefined. Seems you forgot to wrap all popover components within `<Popover />`'
-  });
+import {UsePopoverReturn} from "./use-popover";
+
+export const [PopoverProvider, usePopoverContext] = createContext<UsePopoverReturn>({
+  name: "PopoverContext",
+  errorMessage:
+    "usePopoverContext: `context` is undefined. Seems you forgot to wrap all popover components within `<Popover />`",
+});
diff --git a/packages/react/src/popover/popover-trigger.tsx b/packages/react/src/popover/popover-trigger.tsx
index 8366c20c34..c2c308a778 100644
--- a/packages/react/src/popover/popover-trigger.tsx
+++ b/packages/react/src/popover/popover-trigger.tsx
@@ -1,11 +1,14 @@
-import * as React from 'react';
-import { useButton } from '@react-aria/button';
-import { mergeProps } from '@react-aria/utils';
-import { usePopoverContext } from './popover-context';
-import { pickChild } from '../utils/collections';
-import { Button } from '../index';
-import type { ReactRef } from '../utils/refs';
-import { __DEV__ } from '../utils/assertion';
+import type {ReactRef} from "../utils/refs";
+
+import * as React from "react";
+import {useButton} from "@react-aria/button";
+import {mergeProps} from "@react-aria/utils";
+
+import {pickChild} from "../utils/collections";
+import {Button} from "../index";
+import {__DEV__} from "../utils/assertion";
+
+import {usePopoverContext} from "./popover-context";
 
 /**
  * PopoverTrigger opens the popover's content. It must be an interactive element
@@ -13,17 +16,17 @@ import { __DEV__ } from '../utils/assertion';
  */
 const PopoverTrigger = React.forwardRef(
   (props: React.PropsWithChildren<{}>, _: ReactRef<HTMLElement>) => {
-    const { state, triggerRef, getTriggerProps } = usePopoverContext();
-    const { children, ...otherProps } = props;
+    const {state, triggerRef, getTriggerProps} = usePopoverContext();
+    const {children, ...otherProps} = props;
 
     const onPress = () => state.open();
 
-    const { buttonProps } = useButton(
+    const {buttonProps} = useButton(
       {
         onPress,
-        ...otherProps
+        ...otherProps,
       },
-      triggerRef
+      triggerRef,
     );
 
     // enforce a single child
@@ -36,27 +39,21 @@ const PopoverTrigger = React.forwardRef(
     return React.cloneElement(
       child,
       getTriggerProps(
-        mergeProps(
-          child.props,
-          hasNextUIButton ? { onPress, ...otherProps } : buttonProps
-        ),
-        child.ref
-      )
+        mergeProps(child.props, hasNextUIButton ? {onPress, ...otherProps} : buttonProps),
+        child.ref,
+      ),
     );
-  }
+  },
 );
 
 if (__DEV__) {
-  PopoverTrigger.displayName = 'NextUI.PopoverTrigger';
+  PopoverTrigger.displayName = "NextUI.PopoverTrigger";
 }
 
-PopoverTrigger.toString = () => '.nextui-popover-trigger';
+PopoverTrigger.toString = () => ".nextui-popover-trigger";
 
 type PopoverTriggerComponent<T, P = {}> = React.ForwardRefExoticComponent<
   React.PropsWithoutRef<P> & React.RefAttributes<T>
 >;
 
-export default PopoverTrigger as PopoverTriggerComponent<
-  HTMLElement,
-  React.PropsWithChildren<{}>
->;
+export default PopoverTrigger as PopoverTriggerComponent<HTMLElement, React.PropsWithChildren<{}>>;
diff --git a/packages/react/src/popover/popover.stories.tsx b/packages/react/src/popover/popover.stories.tsx
index be3253275f..919e6aaa04 100644
--- a/packages/react/src/popover/popover.stories.tsx
+++ b/packages/react/src/popover/popover.stories.tsx
@@ -1,37 +1,39 @@
-import * as React from 'react';
-import { Meta } from '@storybook/react';
-import { Text, Grid, Button } from '../index';
-import Popover, { PopoverPlacement } from './index';
+import * as React from "react";
+import {Meta} from "@storybook/react";
+
+import {Text, Grid, Button} from "../index";
+
+import Popover, {PopoverPlacement} from "./index";
 
 export default {
-  title: 'Display/Popover',
-  component: Popover
+  title: "Display/Popover",
+  component: Popover,
 } as Meta;
 
 const placements = [
-  'bottom',
-  'bottom-left',
-  'bottom-right',
-  'top',
-  'top-left',
-  'top-right',
-  'left',
-  'left-top',
-  'left-bottom',
-  'right',
-  'right-top',
-  'right-bottom'
+  "bottom",
+  "bottom-left",
+  "bottom-right",
+  "top",
+  "top-left",
+  "top-right",
+  "left",
+  "left-top",
+  "left-bottom",
+  "right",
+  "right-top",
+  "right-bottom",
 ];
 
 export const Default = () => (
-  <Grid.Container justify="center" gap={2} css={{ maxW: '600px' }}>
+  <Grid.Container css={{maxW: "600px"}} gap={2} justify="center">
     <Grid>
       <Popover placement="top">
         <Popover.Trigger>
           <Button auto>Open popover</Button>
         </Popover.Trigger>
         <Popover.Content>
-          <Text css={{ p: '$10' }}>This is the content of the popover.</Text>
+          <Text css={{p: "$10"}}>This is the content of the popover.</Text>
         </Popover.Content>
       </Popover>
     </Grid>
@@ -39,7 +41,7 @@ export const Default = () => (
 );
 
 export const Placements = () => (
-  <Grid.Container justify="center" gap={2} css={{ maxW: '600px' }}>
+  <Grid.Container css={{maxW: "600px"}} gap={2} justify="center">
     {placements.map((placement: PopoverPlacement) => (
       <Grid key={placement}>
         <Popover placement={placement}>
@@ -47,7 +49,7 @@ export const Placements = () => (
             <Button auto>{placement}</Button>
           </Popover.Trigger>
           <Popover.Content>
-            <Text css={{ p: '$10' }}>This is the content of the popover.</Text>
+            <Text css={{p: "$10"}}>This is the content of the popover.</Text>
           </Popover.Content>
         </Popover>
       </Grid>
@@ -56,7 +58,7 @@ export const Placements = () => (
 );
 
 export const DisableAnimation = () => (
-  <Grid.Container justify="center" gap={2} css={{ maxW: '600px' }}>
+  <Grid.Container css={{maxW: "600px"}} gap={2} justify="center">
     <Grid>
       <Popover disableAnimation placement="top">
         <Popover.Trigger>
@@ -65,7 +67,7 @@ export const DisableAnimation = () => (
           </Button>
         </Popover.Trigger>
         <Popover.Content>
-          <Text css={{ p: '$10' }}>This is the content of the popover.</Text>
+          <Text css={{p: "$10"}}>This is the content of the popover.</Text>
         </Popover.Content>
       </Popover>
     </Grid>
diff --git a/packages/react/src/popover/popover.styles.ts b/packages/react/src/popover/popover.styles.ts
index 9378681d39..0a92735b4d 100644
--- a/packages/react/src/popover/popover.styles.ts
+++ b/packages/react/src/popover/popover.styles.ts
@@ -1,126 +1,124 @@
-import { styled, keyframes, VariantProps } from '../theme/stitches.config';
-import { cssFocusVisible } from '../theme/shared-css';
+import {styled, keyframes, VariantProps} from "../theme/stitches.config";
+import {cssFocusVisible} from "../theme/shared-css";
 
 export const appearanceIn = keyframes({
-  '0%': {
+  "0%": {
     opacity: 0,
-    transform: 'scale(0.95)'
+    transform: "scale(0.95)",
   },
-  '60%': {
+  "60%": {
     opacity: 0.75,
-    transform: 'scale(1.05)'
+    transform: "scale(1.05)",
   },
-  '100%': {
+  "100%": {
     opacity: 1,
-    transform: 'scale(1)'
-  }
+    transform: "scale(1)",
+  },
 });
 
 export const appearanceOut = keyframes({
-  '0%': {
+  "0%": {
     opacity: 1,
-    transform: 'scale(1)'
+    transform: "scale(1)",
   },
-  '100%': {
+  "100%": {
     opacity: 0,
-    transform: 'scale(0.5)'
-  }
+    transform: "scale(0.5)",
+  },
 });
 
 export const StyledPopoverContentContainer = styled(
-  'div',
+  "div",
   {
     /* variables */
-    $$popoverMinWidth: '$space$13',
-    $$popoverMinHeight: '$space$13',
-    $$popoverBorderRadius: '$radii$lg',
-    $$popoverBackground: '$colors$backgroundContrast',
-    $$popoverBoxShadow: '$shadows$md',
-    $$popoverBorderColor: '$colors$border',
+    $$popoverMinWidth: "$space$13",
+    $$popoverMinHeight: "$space$13",
+    $$popoverBorderRadius: "$radii$lg",
+    $$popoverBackground: "$colors$backgroundContrast",
+    $$popoverBoxShadow: "$shadows$md",
+    $$popoverBorderColor: "$colors$border",
 
-    boxShadow: '$$popoverBoxShadow',
-    outline: 'none' /* Hide focus outline */,
-    overflow: 'hidden auto',
-    bg: '$$popoverBackground',
+    boxShadow: "$$popoverBoxShadow",
+    outline: "none" /* Hide focus outline */,
+    overflow: "hidden auto",
+    bg: "$$popoverBackground",
     /* Be a flexbox to allow a full sized content area that scrolls */
-    display: 'inline-flex',
-    flexDirection: 'column',
-    boxSizing: 'border-box',
+    display: "inline-flex",
+    flexDirection: "column",
+    boxSizing: "border-box",
 
-    minWidth: '$$popoverMinWidth',
-    minHeight: '$$popoverMinHeight',
-    maxWidth: 'calc(100% - $$popoverMinWidth)',
-    maxHeight: 'calc(100% - $$popoverMinWidth)',
+    minWidth: "$$popoverMinWidth",
+    minHeight: "$$popoverMinHeight",
+    maxWidth: "calc(100% - $$popoverMinWidth)",
+    maxHeight: "calc(100% - $$popoverMinWidth)",
 
-    borderRadius: '$$popoverBorderRadius',
+    borderRadius: "$$popoverBorderRadius",
 
-    animationFillMode: 'forwards',
-    willChange: 'transform, opacity',
+    animationFillMode: "forwards",
+    willChange: "transform, opacity",
 
-    '@motion': {
-      transition: 'none'
+    "@motion": {
+      transition: "none",
     },
 
-    '&.nextui-popover-content-enter': {
+    "&.nextui-popover-content-enter": {
       animationName: appearanceIn,
-      animationTimingFunction: 'ease-out',
-      animationDirection: 'normal',
-      animationDuration: '250ms'
+      animationTimingFunction: "ease-out",
+      animationDirection: "normal",
+      animationDuration: "250ms",
     },
-    '&.nextui-popover-content-leave': {
+    "&.nextui-popover-content-leave": {
       animationName: appearanceOut,
-      animationTimingFunction: 'ease-in',
-      animationDuration: '60ms'
+      animationTimingFunction: "ease-in",
+      animationDuration: "60ms",
     },
     variants: {
       disableShadow: {
         true: {
-          boxShadow: 'none'
-        }
+          boxShadow: "none",
+        },
       },
       isBordered: {
         true: {
-          borderStyle: 'solid',
-          borderColor: '$$popoverBorderColor'
-        }
+          borderStyle: "solid",
+          borderColor: "$$popoverBorderColor",
+        },
       },
       borderWeight: {
         light: {
-          bw: '$light',
-          $$popoverBorderWeight: '$borderWeights$light'
+          bw: "$light",
+          $$popoverBorderWeight: "$borderWeights$light",
         },
         normal: {
-          bw: '$normal',
-          $$popoverBorderWeight: '$borderWeights$normal'
+          bw: "$normal",
+          $$popoverBorderWeight: "$borderWeights$normal",
         },
         bold: {
-          bw: '$bold',
-          $$popoverBorderWeight: '$borderWeights$bold'
+          bw: "$bold",
+          $$popoverBorderWeight: "$borderWeights$bold",
         },
         extrabold: {
-          bw: '$extrabold',
-          $$popoverBorderWeight: '$borderWeights$extrabold'
+          bw: "$extrabold",
+          $$popoverBorderWeight: "$borderWeights$extrabold",
         },
         black: {
-          bw: '$black',
-          $$popoverBorderWeight: '$borderWeights$black'
-        }
-      }
+          bw: "$black",
+          $$popoverBorderWeight: "$borderWeights$black",
+        },
+      },
     },
     defaultVariants: {
       isBordered: false,
-      borderWeight: 'light'
-    }
+      borderWeight: "light",
+    },
   },
-  cssFocusVisible
+  cssFocusVisible,
 );
 
-export const StyledPopoverContent = styled('div', {
+export const StyledPopoverContent = styled("div", {
   /* Avoid blurriness */
-  transform: 'translateZ(0)',
-  backfaceVisibility: 'hidden'
+  transform: "translateZ(0)",
+  backfaceVisibility: "hidden",
 });
 
-export type PopoverContentVariantsProps = VariantProps<
-  typeof StyledPopoverContentContainer
->;
+export type PopoverContentVariantsProps = VariantProps<typeof StyledPopoverContentContainer>;
diff --git a/packages/react/src/popover/popover.tsx b/packages/react/src/popover/popover.tsx
index c4be42af05..580b7fa86d 100644
--- a/packages/react/src/popover/popover.tsx
+++ b/packages/react/src/popover/popover.tsx
@@ -1,15 +1,12 @@
-import React, {
-  RefObject,
-  ReactNode,
-  RefAttributes,
-  PropsWithoutRef
-} from 'react';
-import { OverlayContainer } from '@react-aria/overlays';
-import { usePopover, UsePopoverProps } from './use-popover';
-import { PopoverProvider } from './popover-context';
-import PopoverTrigger from './popover-trigger';
-import PopoverContent from './popover-content';
-import { __DEV__ } from '../utils/assertion';
+import React, {RefObject, ReactNode, RefAttributes, PropsWithoutRef} from "react";
+import {OverlayContainer} from "@react-aria/overlays";
+
+import {__DEV__} from "../utils/assertion";
+
+import {usePopover, UsePopoverProps} from "./use-popover";
+import {PopoverProvider} from "./popover-context";
+import PopoverTrigger from "./popover-trigger";
+import PopoverContent from "./popover-content";
 
 export interface PopoverProps extends UsePopoverProps {
   /**
@@ -19,29 +16,27 @@ export interface PopoverProps extends UsePopoverProps {
   children: ReactNode[];
 }
 
-const Popover = React.forwardRef(
-  (props: PopoverProps, ref: RefObject<HTMLElement>) => {
-    const { children, ...otherProps } = props;
-    const context = usePopover({ ref, ...otherProps });
+const Popover = React.forwardRef((props: PopoverProps, ref: RefObject<HTMLElement>) => {
+  const {children, ...otherProps} = props;
+  const context = usePopover({ref, ...otherProps});
 
-    const [trigger, content] = React.Children.toArray(children);
+  const [trigger, content] = React.Children.toArray(children);
 
-    const mountOverlay = context.state.isOpen || !context.exited;
+  const mountOverlay = context.state.isOpen || !context.exited;
 
-    return (
-      <PopoverProvider value={context}>
-        {trigger}
-        {mountOverlay && <OverlayContainer>{content}</OverlayContainer>}
-      </PopoverProvider>
-    );
-  }
-);
+  return (
+    <PopoverProvider value={context}>
+      {trigger}
+      {mountOverlay && <OverlayContainer>{content}</OverlayContainer>}
+    </PopoverProvider>
+  );
+});
 
 if (__DEV__) {
-  Popover.displayName = 'NextUI.Popover';
+  Popover.displayName = "NextUI.Popover";
 }
 
-Popover.toString = () => '.nextui-popover';
+Popover.toString = () => ".nextui-popover";
 
 type PopoverComponent<T, P = {}> = React.ForwardRefExoticComponent<
   PropsWithoutRef<P> & RefAttributes<T>
diff --git a/packages/react/src/popover/use-popover.ts b/packages/react/src/popover/use-popover.ts
index 6d9a3620b3..ae271dc2dc 100644
--- a/packages/react/src/popover/use-popover.ts
+++ b/packages/react/src/popover/use-popover.ts
@@ -1,16 +1,17 @@
-import { useRef, useMemo, useState, useCallback } from 'react';
-import type { RefObject } from 'react';
-import { OverlayTriggerProps } from '@react-types/overlays';
-import { mergeProps } from '@react-aria/utils';
-import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
-import { useOverlayTriggerState } from '@react-stately/overlays';
-import { mergeRefs } from '../utils/refs';
-import { PopoverPlacement, getAriaPlacement } from './utils';
-import { PopoverContentVariantsProps } from './popover.styles';
-
-export interface UsePopoverProps
-  extends OverlayTriggerProps,
-    PopoverContentVariantsProps {
+import type {RefObject} from "react";
+
+import {useRef, useMemo, useState, useCallback} from "react";
+import {OverlayTriggerProps} from "@react-types/overlays";
+import {mergeProps} from "@react-aria/utils";
+import {useOverlayPosition, useOverlayTrigger} from "@react-aria/overlays";
+import {useOverlayTriggerState} from "@react-stately/overlays";
+
+import {mergeRefs} from "../utils/refs";
+
+import {PopoverPlacement, getAriaPlacement} from "./utils";
+import {PopoverContentVariantsProps} from "./popover.styles";
+
+export interface UsePopoverProps extends OverlayTriggerProps, PopoverContentVariantsProps {
   ref?: RefObject<HTMLElement>;
   /**
    * The ref for the element which the overlay positions itself with respect to.
@@ -42,7 +43,7 @@ export interface UsePopoverProps
   /**
    * Type of overlay that is opened by the trigger.
    */
-  triggerType?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid';
+  triggerType?: "dialog" | "menu" | "listbox" | "tree" | "grid";
   /**
    * Whether the popover is animated.
    */
@@ -79,14 +80,14 @@ export function usePopover(props: UsePopoverProps = {}) {
     disableShadow,
     shouldFlip = true,
     offset = 12,
-    placement = 'bottom',
+    placement = "bottom",
     onClose,
-    triggerType = 'dialog',
+    triggerType = "dialog",
     isDismissable = true,
     shouldCloseOnBlur = false,
     isKeyboardDismissDisabled = false,
     disableAnimation = false,
-    shouldCloseOnInteractOutside
+    shouldCloseOnInteractOutside,
   } = props;
 
   const domRef = useRef<HTMLElement>(null);
@@ -98,14 +99,15 @@ export function usePopover(props: UsePopoverProps = {}) {
   const state = useOverlayTriggerState({
     isOpen,
     defaultOpen,
-    onOpenChange
+    onOpenChange,
   });
 
   const [exited, setExited] = useState(!state.isOpen);
 
   const getState = useMemo(() => {
-    if (state.isOpen) return 'open';
-    return 'closed';
+    if (state.isOpen) return "open";
+
+    return "closed";
   }, [state.isOpen]);
 
   const handleClose = useCallback(() => {
@@ -121,25 +123,18 @@ export function usePopover(props: UsePopoverProps = {}) {
     setExited(true);
   }, []);
 
-  const { triggerProps, overlayProps } = useOverlayTrigger(
-    { type: triggerType },
-    state,
-    triggerRef
-  );
+  const {triggerProps, overlayProps} = useOverlayTrigger({type: triggerType}, state, triggerRef);
 
-  const overlayPlacement = useMemo(
-    () => getAriaPlacement(placement),
-    [placement]
-  );
+  const overlayPlacement = useMemo(() => getAriaPlacement(placement), [placement]);
 
-  const { overlayProps: positionProps } = useOverlayPosition({
+  const {overlayProps: positionProps} = useOverlayPosition({
     isOpen: state.isOpen,
     targetRef: triggerRef,
     scrollRef,
     placement: overlayPlacement,
     overlayRef,
     shouldFlip,
-    offset
+    offset,
   });
 
   const getTriggerProps = useCallback(
@@ -147,12 +142,13 @@ export function usePopover(props: UsePopoverProps = {}) {
       const realTriggerProps = triggerRefProp?.current
         ? mergeProps(triggerProps, props)
         : mergeProps(props, triggerProps);
+
       return {
         ...realTriggerProps,
-        ref: mergeRefs(triggerRef, _ref)
+        ref: mergeRefs(triggerRef, _ref),
       };
     },
-    [triggerRef, triggerRefProp, triggerProps]
+    [triggerRef, triggerRefProp, triggerProps],
   );
 
   const getPopoverProps = useCallback(
@@ -161,11 +157,11 @@ export function usePopover(props: UsePopoverProps = {}) {
         ...props,
         ...overlayProps,
         ...positionProps,
-        'data-state': getState,
-        'data-placement': placement
+        "data-state": getState,
+        "data-placement": placement,
       };
     },
-    [getState, positionProps, overlayProps, placement]
+    [getState, positionProps, overlayProps, placement],
   );
 
   return {
@@ -190,7 +186,7 @@ export function usePopover(props: UsePopoverProps = {}) {
     overlayProps,
     positionProps,
     getTriggerProps,
-    getPopoverProps
+    getPopoverProps,
   };
 }
 
diff --git a/packages/react/src/popover/utils.ts b/packages/react/src/popover/utils.ts
index 924792cf5f..6fe21d61e9 100644
--- a/packages/react/src/popover/utils.ts
+++ b/packages/react/src/popover/utils.ts
@@ -1,70 +1,73 @@
-import { Placement, PlacementAxis } from '@react-types/overlays';
+import {Placement, PlacementAxis} from "@react-types/overlays";
 
 export type PopoverPlacement =
-  | 'bottom'
-  | 'bottom-left'
-  | 'bottom-right'
-  | 'top'
-  | 'top-left'
-  | 'top-right'
-  | 'left'
-  | 'left-top'
-  | 'left-bottom'
-  | 'right'
-  | 'right-top'
-  | 'right-bottom';
+  | "bottom"
+  | "bottom-left"
+  | "bottom-right"
+  | "top"
+  | "top-left"
+  | "top-right"
+  | "left"
+  | "left-top"
+  | "left-bottom"
+  | "right"
+  | "right-top"
+  | "right-bottom";
 
 export const getAriaPlacement = (placement?: PopoverPlacement) => {
   if (!placement) {
-    return 'bottom' as Placement;
+    return "bottom" as Placement;
   }
-  return placement.replace('-', ' ') as Placement;
+
+  return placement.replace("-", " ") as Placement;
 };
 
 export const getPopoverPlacementFromAxis = (placementAxis?: PlacementAxis) => {
   if (!placementAxis) {
-    return 'bottom';
+    return "bottom";
   }
-  return placementAxis.replace('-', ' ') as PopoverPlacement;
+
+  return placementAxis.replace("-", " ") as PopoverPlacement;
 };
 
 export const getPopoverPlacement = (ariaPlacement?: Placement) => {
   if (!ariaPlacement) {
-    return 'bottom' as Placement;
+    return "bottom" as Placement;
   }
-  return ariaPlacement.replace(' ', '-') as PopoverPlacement;
+
+  return ariaPlacement.replace(" ", "-") as PopoverPlacement;
 };
 
 export const getTransformOrigin = (placement?: PopoverPlacement) => {
   if (!placement) {
-    return 'bottom' as Placement;
+    return "bottom" as Placement;
   }
   switch (placement) {
-    case 'bottom':
-      return 'top center';
-    case 'top':
-      return 'bottom center';
-    case 'left':
-      return 'right center';
-    case 'right':
-      return 'left center';
-    case 'bottom-left':
-      return 'top left';
-    case 'bottom-right':
-      return 'top right';
-    case 'top-left':
-      return 'bottom left';
-    case 'top-right':
-      return 'bottom right';
-    case 'left-top':
-      return 'right top';
-    case 'left-bottom':
-      return 'right bottom';
-    case 'right-top':
-      return 'left top';
-    case 'right-bottom':
-      return 'left bottom';
+    case "bottom":
+      return "top center";
+    case "top":
+      return "bottom center";
+    case "left":
+      return "right center";
+    case "right":
+      return "left center";
+    case "bottom-left":
+      return "top left";
+    case "bottom-right":
+      return "top right";
+    case "top-left":
+      return "bottom left";
+    case "top-right":
+      return "bottom right";
+    case "left-top":
+      return "right top";
+    case "left-bottom":
+      return "right bottom";
+    case "right-top":
+      return "left top";
+    case "right-bottom":
+      return "left bottom";
     default:
-      return 'top center';
+      return "top center";
   }
 };
diff --git a/packages/react/src/progress/__tests__/index.test.tsx b/packages/react/src/progress/__tests__/index.test.tsx
index 942027b613..103b2298af 100644
--- a/packages/react/src/progress/__tests__/index.test.tsx
+++ b/packages/react/src/progress/__tests__/index.test.tsx
@@ -1,93 +1,103 @@
-import { mount } from 'enzyme';
-import React from 'react';
-import Progress from '../progress';
+import {mount} from "enzyme";
+import React from "react";
 
-describe('Progress', () => {
-  it('should render correctly', () => {
+import Progress from "../progress";
+
+describe("Progress", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Progress value={50} />);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support all colors', () => {
+  it("should support all colors", () => {
     const wrapper = mount(
       <div>
-        <Progress value={45} color="primary" />
-        <Progress value={45} color="secondary" />
-        <Progress value={45} color="success" />
-        <Progress value={45} color="warning" />
-        <Progress value={45} color="error" />
-        <Progress value={45} color="gradient" />
-      </div>
+        <Progress color="primary" value={45} />
+        <Progress color="secondary" value={45} />
+        <Progress color="success" value={45} />
+        <Progress color="warning" value={45} />
+        <Progress color="error" value={45} />
+        <Progress color="gradient" value={45} />
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support all status colors', () => {
+  it("should support all status colors", () => {
     const wrapper = mount(
       <div>
-        <Progress value={45} color="primary" status="primary" />
-        <Progress value={45} color="secondary" status="secondary" />
-        <Progress value={45} color="success" status="success" />
-        <Progress value={45} color="warning" status="warning" />
-        <Progress value={45} color="error" status="error" />
-      </div>
+        <Progress color="primary" status="primary" value={45} />
+        <Progress color="secondary" status="secondary" value={45} />
+        <Progress color="success" status="success" value={45} />
+        <Progress color="warning" status="warning" value={45} />
+        <Progress color="error" status="error" value={45} />
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should show different progress by maximum', () => {
+  it("should show different progress by maximum", () => {
     const wrapper = mount(
       <div>
-        <Progress value={59} max={60} />
-        <Progress value={21} max={50} />
-      </div>
+        <Progress max={60} value={59} />
+        <Progress max={50} value={21} />
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support shadow', () => {
+  it("should support shadow", () => {
     const wrapper = mount(
       <div>
-        <Progress shadow value={59} max={60} />
-        <Progress shadow value={21} max={50} />
-      </div>
+        <Progress shadow max={60} value={59} />
+        <Progress shadow max={50} value={21} />
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support indeterminated', () => {
+  it("should support indeterminated", () => {
     const wrapper = mount(
       <div>
-        <Progress indeterminated value={59} max={60} />
-        <Progress indeterminated value={21} max={50} />
-      </div>
+        <Progress indeterminated max={60} value={59} />
+        <Progress indeterminated max={50} value={21} />
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support no animated', () => {
+  it("should support no animated", () => {
     const wrapper = mount(
       <div>
-        <Progress animated={false} value={59} max={60} />
-        <Progress animated={false} value={21} max={50} />
-      </div>
+        <Progress animated={false} max={60} value={59} />
+        <Progress animated={false} max={50} value={21} />
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should ignore a value under the minimum', () => {
+  it("should ignore a value under the minimum", () => {
     const value = 10;
     const minValue = 20;
-    const wrapper = mount(<Progress value={value} min={minValue} max={60} />);
-    const props = wrapper.find('.nextui-progress-bar').at(0).props();
-    expect(() => props['aria-valuenow'] === minValue).toBeTruthy();
+    const wrapper = mount(<Progress max={60} min={minValue} value={value} />);
+    const props = wrapper.find(".nextui-progress-bar").at(0).props();
+
+    expect(() => props["aria-valuenow"] === minValue).toBeTruthy();
   });
 
-  it('should ignore a value above the max', () => {
+  it("should ignore a value above the max", () => {
     const value = 30;
     const maxValue = 20;
-    const wrapper = mount(<Progress value={value} min={0} max={maxValue} />);
-    const props = wrapper.find('.nextui-progress-bar').at(0).props();
-    expect(() => props['aria-valuenow'] === maxValue).toBeTruthy();
+    const wrapper = mount(<Progress max={maxValue} min={0} value={value} />);
+    const props = wrapper.find(".nextui-progress-bar").at(0).props();
+
+    expect(() => props["aria-valuenow"] === maxValue).toBeTruthy();
   });
 });
diff --git a/packages/react/src/progress/index.ts b/packages/react/src/progress/index.ts
index 1413cfed55..04adef11b0 100644
--- a/packages/react/src/progress/index.ts
+++ b/packages/react/src/progress/index.ts
@@ -1,8 +1,8 @@
-import Progress from './progress';
+import Progress from "./progress";
 
-export type { ProgressProps } from './progress';
+export type {ProgressProps} from "./progress";
 
-export { StyledProgress, StyledProgressBar } from './progress.styles';
-export type { ProgressVariantsProps } from './progress.styles';
+export {StyledProgress, StyledProgressBar} from "./progress.styles";
+export type {ProgressVariantsProps} from "./progress.styles";
 
 export default Progress;
diff --git a/packages/react/src/progress/progress.stories.tsx b/packages/react/src/progress/progress.stories.tsx
index c33ab37bba..f6baf09b7d 100644
--- a/packages/react/src/progress/progress.stories.tsx
+++ b/packages/react/src/progress/progress.stories.tsx
@@ -1,18 +1,20 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Progress from './index';
-import { Spacer, Grid } from '../index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Spacer, Grid} from "../index";
+
+import Progress from "./index";
 
 export default {
-  title: 'General/Progress',
+  title: "General/Progress",
   component: Progress,
   decorators: [
     (Story) => (
       <Grid.Container xs={4}>
         <Story />
       </Grid.Container>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
 export const Default = () => {
@@ -21,17 +23,17 @@ export const Default = () => {
 
 export const Colors = () => (
   <>
-    <Progress value={50} color="primary" />
+    <Progress color="primary" value={50} />
     <Spacer y={0.5} />
-    <Progress value={30} color="secondary" />
+    <Progress color="secondary" value={30} />
     <Spacer y={0.5} />
-    <Progress value={70} color="success" />
+    <Progress color="success" value={70} />
     <Spacer y={0.5} />
-    <Progress value={90} color="warning" />
+    <Progress color="warning" value={90} />
     <Spacer y={0.5} />
-    <Progress value={30} color="error" />
+    <Progress color="error" value={30} />
     <Spacer y={0.5} />
-    <Progress value={70} color="gradient" />
+    <Progress color="gradient" value={70} />
   </>
 );
 
@@ -51,36 +53,36 @@ export const Sizes = () => (
 
 export const Status = () => (
   <>
-    <Progress value={50} color="primary" status="primary" />
+    <Progress color="primary" status="primary" value={50} />
     <Spacer y={0.5} />
-    <Progress value={30} color="secondary" status="secondary" />
+    <Progress color="secondary" status="secondary" value={30} />
     <Spacer y={0.5} />
-    <Progress value={70} color="success" status="success" />
+    <Progress color="success" status="success" value={70} />
     <Spacer y={0.5} />
-    <Progress value={90} color="warning" status="warning" />
+    <Progress color="warning" status="warning" value={90} />
     <Spacer y={0.5} />
-    <Progress value={10} color="error" status="error" />
+    <Progress color="error" status="error" value={10} />
   </>
 );
 
 export const Shadow = () => (
   <>
-    <Progress shadow value={50} color="primary" status="primary" />
+    <Progress shadow color="primary" status="primary" value={50} />
     <Spacer y={0.5} />
-    <Progress shadow value={30} color="secondary" status="secondary" />
+    <Progress shadow color="secondary" status="secondary" value={30} />
     <Spacer y={0.5} />
-    <Progress shadow value={70} color="success" status="success" />
+    <Progress shadow color="success" status="success" value={70} />
     <Spacer y={0.5} />
-    <Progress shadow value={90} color="warning" status="warning" />
+    <Progress shadow color="warning" status="warning" value={90} />
     <Spacer y={0.5} />
-    <Progress shadow value={10} color="error" status="error" />
+    <Progress shadow color="error" status="error" value={10} />
   </>
 );
 
 export const Striped = () => {
   return (
     <>
-      <Progress striped value={200} max={250} />
+      <Progress striped max={250} value={200} />
       <Spacer y={0.5} />
       <Progress striped value={45} />
       <Spacer y={0.5} />
@@ -92,7 +94,7 @@ export const Striped = () => {
 export const Squared = () => {
   return (
     <>
-      <Progress squared value={200} max={250} />
+      <Progress squared max={250} value={200} />
       <Spacer y={0.5} />
       <Progress squared value={45} />
       <Spacer y={0.5} />
@@ -104,7 +106,7 @@ export const Squared = () => {
 export const indeterminated = () => {
   return (
     <>
-      <Progress indeterminated value={50} color="primary" />
+      <Progress indeterminated color="primary" value={50} />
     </>
   );
 };
@@ -112,7 +114,7 @@ export const indeterminated = () => {
 export const NoAnimated = () => {
   return (
     <>
-      <Progress animated={false} value={200} max={250} />
+      <Progress animated={false} max={250} value={200} />
       <Spacer y={0.5} />
       <Progress animated={false} value={45} />
       <Spacer y={0.5} />
diff --git a/packages/react/src/progress/progress.styles.ts b/packages/react/src/progress/progress.styles.ts
index 97a35e7d87..f01472b54a 100644
--- a/packages/react/src/progress/progress.styles.ts
+++ b/packages/react/src/progress/progress.styles.ts
@@ -1,160 +1,160 @@
-import { styled, keyframes, VariantProps } from '../theme/stitches.config';
+import {styled, keyframes, VariantProps} from "../theme/stitches.config";
 
 const indeterminateAnimation = keyframes({
-  '0%': {
-    left: '-40%'
+  "0%": {
+    left: "-40%",
+  },
+  "100%": {
+    left: "100%",
   },
-  '100%': {
-    left: '100%'
-  }
 });
 
-export const StyledProgress = styled('div', {
+export const StyledProgress = styled("div", {
   margin: 0,
   padding: 0,
-  width: '100%',
-  position: 'relative',
-  overflow: 'visible',
+  width: "100%",
+  position: "relative",
+  overflow: "visible",
   variants: {
     color: {
       default: {
-        $$progressColor: '$colors$primary',
-        $$progressShadowColor: '$colors$primaryShadow'
+        $$progressColor: "$colors$primary",
+        $$progressShadowColor: "$colors$primaryShadow",
       },
       primary: {
-        $$progressColor: '$colors$primary',
-        $$progressShadowColor: '$colors$primaryShadow'
+        $$progressColor: "$colors$primary",
+        $$progressShadowColor: "$colors$primaryShadow",
       },
       secondary: {
-        $$progressColor: '$colors$secondary',
-        $$progressShadowColor: '$colors$secondaryShadow'
+        $$progressColor: "$colors$secondary",
+        $$progressShadowColor: "$colors$secondaryShadow",
       },
       success: {
-        $$progressColor: '$colors$success',
-        $$progressShadowColor: '$colors$successShadow'
+        $$progressColor: "$colors$success",
+        $$progressShadowColor: "$colors$successShadow",
       },
       warning: {
-        $$progressColor: '$colors$warning',
-        $$progressShadowColor: '$colors$warningShadow'
+        $$progressColor: "$colors$warning",
+        $$progressShadowColor: "$colors$warningShadow",
       },
       error: {
-        $$progressColor: '$colors$error',
-        $$progressShadowColor: '$colors$errorShadow'
+        $$progressColor: "$colors$error",
+        $$progressShadowColor: "$colors$errorShadow",
       },
       gradient: {
-        $$progressColor: '$colors$gradient',
-        $$progressShadowColor: '$colors$primaryShadow'
-      }
+        $$progressColor: "$colors$gradient",
+        $$progressShadowColor: "$colors$primaryShadow",
+      },
     },
     status: {
       default: {
-        bg: '$accents2'
+        bg: "$accents2",
       },
       primary: {
-        bg: '$primaryLight'
+        bg: "$primaryLight",
       },
       secondary: {
-        bg: '$secondaryLight'
+        bg: "$secondaryLight",
       },
       success: {
-        bg: '$successLight'
+        bg: "$successLight",
       },
       warning: {
-        bg: '$warningLight'
+        bg: "$warningLight",
       },
       error: {
-        bg: '$errorLight'
-      }
+        bg: "$errorLight",
+      },
     },
     size: {
       xs: {
-        $$progressHeight: '$space$2',
-        height: '$$progressHeight',
-        br: '$$progressHeight'
+        $$progressHeight: "$space$2",
+        height: "$$progressHeight",
+        br: "$$progressHeight",
       },
       sm: {
-        $$progressHeight: '$space$4',
-        height: '$$progressHeight',
-        br: '$$progressHeight'
+        $$progressHeight: "$space$4",
+        height: "$$progressHeight",
+        br: "$$progressHeight",
       },
       md: {
-        $$progressHeight: '$space$8',
-        height: '$$progressHeight',
-        br: '$$progressHeight'
+        $$progressHeight: "$space$8",
+        height: "$$progressHeight",
+        br: "$$progressHeight",
       },
       lg: {
-        $$progressHeight: '$space$10',
-        height: '$$progressHeight',
-        br: '$$progressHeight'
+        $$progressHeight: "$space$10",
+        height: "$$progressHeight",
+        br: "$$progressHeight",
       },
       xl: {
-        $$progressHeight: '$space$11',
-        height: '$$progressHeight',
-        br: '$$progressHeight'
-      }
+        $$progressHeight: "$space$11",
+        height: "$$progressHeight",
+        br: "$$progressHeight",
+      },
     },
     indeterminated: {
       true: {
-        overflow: 'hidden'
-      }
+        overflow: "hidden",
+      },
     },
     squared: {
       true: {
-        br: 'calc($$progressHeight * 0.25)'
-      }
-    }
+        br: "calc($$progressHeight * 0.25)",
+      },
+    },
   },
   defaultVariants: {
-    color: 'default',
-    status: 'default',
-    size: 'md'
-  }
+    color: "default",
+    status: "default",
+    size: "md",
+  },
 });
 
-export const StyledProgressBar = styled('div', {
+export const StyledProgressBar = styled("div", {
   margin: 0,
   padding: 0,
   width: 0,
   opacity: 0,
-  height: '100%',
-  minWidth: 'inherit',
-  bg: '$$progressColor',
-  br: 'inherit',
-  transition: 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
-  '@motion': {
-    transition: 'none'
+  height: "100%",
+  minWidth: "inherit",
+  bg: "$$progressColor",
+  br: "inherit",
+  transition: "width 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+  "@motion": {
+    transition: "none",
   },
   variants: {
     animated: {
       false: {
-        transition: 'none'
-      }
+        transition: "none",
+      },
     },
     shadow: {
       true: {
-        normalShadowVar: '$$progressShadowColor'
-      }
+        normalShadowVar: "$$progressShadowColor",
+      },
     },
     striped: {
       true: {
         backgroundImage:
-          'linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent)',
-        backgroundSize: '$space$lg $space$lg'
-      }
+          "linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent)",
+        backgroundSize: "$space$lg $space$lg",
+      },
     },
     indeterminated: {
       true: {
-        position: 'absolute',
-        width: '0%',
+        position: "absolute",
+        width: "0%",
         transitionProperty:
-          'background-color, width, left, border-color,opacity, shadow, transform',
-        transitionDuration: '300ms',
-        willChange: 'left',
-        minWidth: '50%',
-        animation: `1s ease 0s infinite normal none running ${indeterminateAnimation}`
-      }
-    }
-  }
+          "background-color, width, left, border-color,opacity, shadow, transform",
+        transitionDuration: "300ms",
+        willChange: "left",
+        minWidth: "50%",
+        animation: `1s ease 0s infinite normal none running ${indeterminateAnimation}`,
+      },
+    },
+  },
 });
 
 export type ProgressVariantsProps = VariantProps<typeof StyledProgress>;
diff --git a/packages/react/src/progress/progress.tsx b/packages/react/src/progress/progress.tsx
index ac8dd81b20..43746f643a 100644
--- a/packages/react/src/progress/progress.tsx
+++ b/packages/react/src/progress/progress.tsx
@@ -1,15 +1,13 @@
-import React, { useMemo } from 'react';
-import CSSTransition from '../utils/css-transition';
-import withDefaults from '../utils/with-defaults';
-import { valueToPercent } from '../utils/numbers';
-import { CSS } from '../theme/stitches.config';
-import {
-  StyledProgress,
-  StyledProgressBar,
-  ProgressVariantsProps
-} from './progress.styles';
-import clsx from '../utils/clsx';
-import { __DEV__ } from '../utils/assertion';
+import React, {useMemo} from "react";
+
+import CSSTransition from "../utils/css-transition";
+import withDefaults from "../utils/with-defaults";
+import {valueToPercent} from "../utils/numbers";
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+
+import {StyledProgress, StyledProgressBar, ProgressVariantsProps} from "./progress.styles";
 
 interface Props {
   value: number;
@@ -30,22 +28,17 @@ const defaultProps = {
   indeterminated: false,
   value: 0,
   min: 0,
-  max: 100
+  max: 100,
 };
 
 type NativeAttrs = Omit<
-  Partial<
-    React.ProgressHTMLAttributes<unknown> & React.HTMLAttributes<unknown>
-  >,
+  Partial<React.ProgressHTMLAttributes<unknown> & React.HTMLAttributes<unknown>>,
   keyof Props
 >;
 
-export type ProgressProps = Props &
-  typeof defaultProps &
-  NativeAttrs &
-  ProgressVariantsProps;
+export type ProgressProps = Props & typeof defaultProps & NativeAttrs & ProgressVariantsProps;
 
-const preClass = 'nextui-progress';
+const preClass = "nextui-progress";
 
 const Progress: React.FC<ProgressProps> = ({
   value: valueProp,
@@ -60,49 +53,46 @@ const Progress: React.FC<ProgressProps> = ({
 }) => {
   const value = useMemo(
     () => (valueProp > max ? max : valueProp < min ? min : valueProp),
-    [valueProp, min, max]
+    [valueProp, min, max],
   );
 
-  const percent = useMemo(
-    () => valueToPercent(value, min, max),
-    [value, min, max]
-  );
+  const percent = useMemo(() => valueToPercent(value, min, max), [value, min, max]);
 
   return (
     <StyledProgress
-      role="progressbar"
-      indeterminated={indeterminated}
       css={{
-        'nextui-progress-wrapper-enter': {
-          opacity: 0
+        "nextui-progress-wrapper-enter": {
+          opacity: 0,
         },
-        '.nextui-progress-wrapper-enter-active': {
+        ".nextui-progress-wrapper-enter-active": {
           opacity: 1,
-          width: `${percent}%`
+          width: `${percent}%`,
         },
-        ...(css as any)
+        ...(css as any),
       }}
+      indeterminated={indeterminated}
+      role="progressbar"
       {...props}
     >
       <CSSTransition
         visible
-        name={`${preClass}-wrapper`}
+        clearTime={300}
         enterTime={10}
         leaveTime={20}
-        clearTime={300}
+        name={`${preClass}-wrapper`}
       >
         <StyledProgressBar
+          animated={animated}
+          aria-valuemax={max}
+          aria-valuemin={min}
+          aria-valuenow={value}
           className={clsx(`${preClass}-bar`, {
             [`${preClass}-striped`]: striped,
-            [`${preClass}-indeterminated`]: indeterminated
+            [`${preClass}-indeterminated`]: indeterminated,
           })}
-          aria-valuenow={value}
-          aria-valuemin={min}
-          aria-valuemax={max}
-          striped={striped}
-          animated={animated}
-          shadow={shadow}
           indeterminated={indeterminated}
+          shadow={shadow}
+          striped={striped}
           {...props}
         />
       </CSSTransition>
@@ -111,10 +101,10 @@ const Progress: React.FC<ProgressProps> = ({
 };
 
 if (__DEV__) {
-  Progress.displayName = 'NextUI.Progress';
+  Progress.displayName = "NextUI.Progress";
 }
 
-Progress.toString = () => '.nextui-progress';
+Progress.toString = () => ".nextui-progress";
 
 const MemoProgress = React.memo(Progress);
 
diff --git a/packages/react/src/radio/__tests__/index.test.tsx b/packages/react/src/radio/__tests__/index.test.tsx
index 3ff83fd056..4a261f5bf9 100644
--- a/packages/react/src/radio/__tests__/index.test.tsx
+++ b/packages/react/src/radio/__tests__/index.test.tsx
@@ -1,223 +1,230 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import userEvent from '@testing-library/user-event';
-import { nativeEvent } from '../../../tests/utils';
-import Radio from '../index';
-import type { ReactWrapper } from 'enzyme';
+import type {ReactWrapper} from "enzyme";
+
+import React from "react";
+import {mount} from "enzyme";
+import userEvent from "@testing-library/user-event";
+
+import {nativeEvent} from "../../../tests/utils";
+import Radio from "../index";
 
 const getRadioElement = (wrapper: ReactWrapper) => {
-  return wrapper.find('input');
+  return wrapper.find("input");
 };
 
 const expectRadioIsChecked = (wrapper: ReactWrapper, value: boolean) => {
   expect(getRadioElement(wrapper).props().checked).toBe(value);
 };
 
-describe('Radio', () => {
-  it('should render correctly', () => {
+describe("Radio", () => {
+  it("should render correctly", () => {
     const wrapper = mount(
       <div>
         <Radio.Group label="Options">
           <Radio value="1">Option 1</Radio>
         </Radio.Group>
-        <Radio.Group label="Options" defaultValue="1" orientation="horizontal">
+        <Radio.Group defaultValue="1" label="Options" orientation="horizontal">
           <Radio value="1">1</Radio>
           <Radio value="2">2</Radio>
         </Radio.Group>
-      </div>
+      </div>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support circle and square', () => {
+  it("should support circle and square", () => {
     const circle = mount(
       <Radio.Group label="Options">
         <Radio value="1">Option 1</Radio>
-      </Radio.Group>
+      </Radio.Group>,
     );
-    const circleDOM = circle.find('.nextui-radio-label').at(0).getDOMNode();
-    expect(circleDOM.className).toContain('isSquared-false');
+    const circleDOM = circle.find(".nextui-radio-label").at(0).getDOMNode();
+
+    expect(circleDOM.className).toContain("isSquared-false");
     expect(() => circle.unmount()).not.toThrow();
     const square = mount(
       <Radio.Group label="Options">
-        <Radio value="1" isSquared>
+        <Radio isSquared value="1">
           Option 1
         </Radio>
-      </Radio.Group>
+      </Radio.Group>,
     );
-    const squareDOM = square.find('.nextui-radio-label').at(0).getDOMNode();
-    expect(squareDOM.className).toContain('isSquared-true');
+    const squareDOM = square.find(".nextui-radio-label").at(0).getDOMNode();
+
+    expect(squareDOM.className).toContain("isSquared-true");
     expect(() => square.unmount()).not.toThrow();
   });
 
-  it('should work correctly with different sizes', () => {
+  it("should work correctly with different sizes", () => {
     const wrapper = mount(
       <Radio.Group label="Options">
-        <Radio value="xs" size="xs">
+        <Radio size="xs" value="xs">
           mini
         </Radio>
-        <Radio value="sm" size="sm">
+        <Radio size="sm" value="sm">
           small
         </Radio>
-        <Radio value="md" size="md">
+        <Radio size="md" value="md">
           medium
         </Radio>
-        <Radio value="lg" size="lg">
+        <Radio size="lg" value="lg">
           large
         </Radio>
-        <Radio value="xl" size="xl">
+        <Radio size="xl" value="xl">
           xlarge
         </Radio>
-      </Radio.Group>
+      </Radio.Group>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with different colors', () => {
+  it("should work with different colors", () => {
     const wrapper = mount(
       <Radio.Group label="Options">
-        <Radio value="primary" color="primary" label="primary" />
-        <Radio value="secondary" color="secondary" label="secondary" />
-        <Radio value="success" color="success" label="success" />
-        <Radio value="warning" color="warning" label="warning" />
-        <Radio value="error" color="error" label="error" />
-      </Radio.Group>
+        <Radio color="primary" label="primary" value="primary" />
+        <Radio color="secondary" label="secondary" value="secondary" />
+        <Radio color="success" label="success" value="success" />
+        <Radio color="warning" label="warning" value="warning" />
+        <Radio color="error" label="error" value="error" />
+      </Radio.Group>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with different textColors', () => {
+  it("should work with different textColors", () => {
     const wrapper = mount(
       <Radio.Group label="Options">
-        <Radio value="primary" labelColor="primary" label="primary" />
-        <Radio value="secondary" labelColor="secondary" label="secondary" />
-        <Radio value="success" labelColor="success" label="success" />
-        <Radio value="warning" labelColor="warning" label="warning" />
-        <Radio value="error" labelColor="error" label="error" />
-      </Radio.Group>
+        <Radio label="primary" labelColor="primary" value="primary" />
+        <Radio label="secondary" labelColor="secondary" value="secondary" />
+        <Radio label="success" labelColor="success" value="success" />
+        <Radio label="warning" labelColor="warning" value="warning" />
+        <Radio label="error" labelColor="error" value="error" />
+      </Radio.Group>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support react-node in description', () => {
+  it("should support react-node in description", () => {
     const wrapper = mount(
       <Radio.Group label="Options">
         <Radio value="1">Option 1</Radio>
-        <Radio value="2" description="Description for Option2">
+        <Radio description="Description for Option2" value="2">
           Option 2
         </Radio>
         <Radio
-          value="3"
           description={
             <p>
               <b>Description</b> for Option3
             </p>
           }
+          value="3"
         >
           Option 3
         </Radio>
-      </Radio.Group>
+      </Radio.Group>,
     );
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render correctly with value prop', () => {
-    let value = '1';
+  it("should render correctly with value prop", () => {
+    let value = "1";
     const wrapper = mount(
-      <Radio.Group
-        label="Options"
-        defaultValue="2"
-        onChange={(val) => (value = val)}
-      >
+      <Radio.Group defaultValue="2" label="Options" onChange={(val) => (value = val)}>
         <Radio value="1">Option 1</Radio>
         <Radio value="2">Option 2</Radio>
-      </Radio.Group>
+      </Radio.Group>,
     );
-    const option1DOM = getRadioElement(wrapper)
-      .at(0)
-      .getDOMNode() as HTMLInputElement;
-    const option2DOM = getRadioElement(wrapper)
-      .at(1)
-      .getDOMNode() as HTMLInputElement;
+    const option1DOM = getRadioElement(wrapper).at(0).getDOMNode() as HTMLInputElement;
+    const option2DOM = getRadioElement(wrapper).at(1).getDOMNode() as HTMLInputElement;
+
     userEvent.click(option1DOM);
-    expect(value).toEqual('1');
+    expect(value).toEqual("1");
     expect(option1DOM.checked).toEqual(true);
     expect(option2DOM.checked).toEqual(false);
     userEvent.click(option2DOM);
-    expect(value).toEqual('2');
+    expect(value).toEqual("2");
     expect(option1DOM.checked).toEqual(false);
     expect(option2DOM.checked).toEqual(true);
   });
 
-  it('should trigger events', () => {
-    let value = '';
+  it("should trigger events", () => {
+    let value = "";
     const changeHandler = jest.fn().mockImplementation((val) => (value = val));
     const wrapper = mount(
       <Radio.Group label="Options" onChange={changeHandler}>
         <Radio value="1">Option 1</Radio>
         <Radio value="2">Option 2</Radio>
-      </Radio.Group>
+      </Radio.Group>,
     );
+
     wrapper
-      .find('input')
+      .find("input")
       .at(0)
-      .simulate('change', {
+      .simulate("change", {
         ...nativeEvent,
-        target: { checked: true }
+        target: {checked: true},
       });
     expect(changeHandler).toHaveBeenCalled();
-    expect(value).toEqual('1');
+    expect(value).toEqual("1");
     changeHandler.mockRestore();
   });
 
-  it('should ignore events when disabled', () => {
+  it("should ignore events when disabled", () => {
     const changeHandler = jest.fn();
     const wrapper = mount(
-      <Radio.Group label="Options" onChange={changeHandler} isDisabled>
+      <Radio.Group isDisabled label="Options" onChange={changeHandler}>
         <Radio value="1">Option 1</Radio>
-      </Radio.Group>
+      </Radio.Group>,
     );
+
     wrapper
-      .find('input')
+      .find("input")
       .at(0)
-      .simulate('change', {
+      .simulate("change", {
         ...nativeEvent,
-        target: { checked: true }
+        target: {checked: true},
       });
     expect(changeHandler).not.toHaveBeenCalled();
     changeHandler.mockRestore();
   });
 
-  it('should render correctly with default-value', () => {
+  it("should render correctly with default-value", () => {
     const wrapper = mount(
-      <Radio.Group label="Options" defaultValue="1">
+      <Radio.Group defaultValue="1" label="Options">
         <Radio value="1">Option 1</Radio>
-      </Radio.Group>
+      </Radio.Group>,
     );
+
     expectRadioIsChecked(wrapper, true);
   });
 
-  it('should be warning when value unset', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  it("should be warning when value unset", () => {
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+
     mount(
       <Radio.Group label="Options">
         <Radio>Option 1</Radio>
         <Radio value="2">Option 2</Radio>
-      </Radio.Group>
+      </Radio.Group>,
     );
     expect(errorSpy).toHaveBeenCalled();
     errorSpy.mockRestore();
   });
 
-  it('should be warning when checked is set', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  it("should be warning when checked is set", () => {
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+
     mount(
       <Radio.Group label="Options">
-        <Radio value="1" checked>
+        <Radio checked value="1">
           Option 1
         </Radio>
         <Radio value="2">Option 2</Radio>
-      </Radio.Group>
+      </Radio.Group>,
     );
     expect(errorSpy).toHaveBeenCalled();
     errorSpy.mockRestore();
diff --git a/packages/react/src/radio/index.ts b/packages/react/src/radio/index.ts
index 9656a4f506..18b4d5731b 100644
--- a/packages/react/src/radio/index.ts
+++ b/packages/react/src/radio/index.ts
@@ -1,5 +1,5 @@
-import Radio from './radio';
-import RadioGroup from './radio-group';
+import Radio from "./radio";
+import RadioGroup from "./radio-group";
 
 Radio.Group = RadioGroup;
 
@@ -10,8 +10,8 @@ export {
   StyledRadioContainer,
   StyledRadioDescription,
   StyledRadioGroup,
-  StyledRadioGroupContainer
-} from './radio.styles';
+  StyledRadioGroupContainer,
+} from "./radio.styles";
 export type {
   RadioLabelVariantsProps,
   RadioTexVariantsProps,
@@ -19,7 +19,7 @@ export type {
   RadioContainerVariantsProps,
   RadioDescriptionVariantsProps,
   RadioGroupVariantsProps,
-  RadioGroupContainerVariantsProps
-} from './radio.styles';
+  RadioGroupContainerVariantsProps,
+} from "./radio.styles";
 
 export default Radio;
diff --git a/packages/react/src/radio/radio-context.ts b/packages/react/src/radio/radio-context.ts
index 98bd6d0335..e2143c94d2 100644
--- a/packages/react/src/radio/radio-context.ts
+++ b/packages/react/src/radio/radio-context.ts
@@ -1,10 +1,10 @@
-import { createContext } from '../utils/context';
-import type { UseRadioGroupReturn } from './use-radio-group';
+import type {UseRadioGroupReturn} from "./use-radio-group";
 
-export const [RadioGroupProvider, useRadioGroupContext] =
-  createContext<UseRadioGroupReturn>({
-    name: 'RadioGroupContext',
-    strict: true,
-    errorMessage:
-      'useRadioGroupContext: `context` is undefined. Seems you forgot to wrap all checkbox components within `<Radio.Group />`'
-  });
+import {createContext} from "../utils/context";
+
+export const [RadioGroupProvider, useRadioGroupContext] = createContext<UseRadioGroupReturn>({
+  name: "RadioGroupContext",
+  strict: true,
+  errorMessage:
+    "useRadioGroupContext: `context` is undefined. Seems you forgot to wrap all checkbox components within `<Radio.Group />`",
+});
diff --git a/packages/react/src/radio/radio-group.tsx b/packages/react/src/radio/radio-group.tsx
index 99e8fabeea..e56e31b84f 100644
--- a/packages/react/src/radio/radio-group.tsx
+++ b/packages/react/src/radio/radio-group.tsx
@@ -1,17 +1,16 @@
-import React from 'react';
-import clsx from '../utils/clsx';
-import { useDOMRef } from '../utils/dom';
-import { useRadioGroup } from './use-radio-group';
-import { RadioGroupProvider } from './radio-context';
-import {
-  StyledRadioGroup,
-  StyledRadioGroupContainer,
-  StyledRadioGroupLabel
-} from './radio.styles';
-import type { ReactRef } from '../utils/refs';
-import type { CSS } from '../theme/stitches.config';
-import type { UseRadioGroupProps } from './use-radio-group';
-import { __DEV__ } from '../utils/assertion';
+import type {ReactRef} from "../utils/refs";
+import type {CSS} from "../theme/stitches.config";
+import type {UseRadioGroupProps} from "./use-radio-group";
+
+import React from "react";
+
+import clsx from "../utils/clsx";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+
+import {useRadioGroup} from "./use-radio-group";
+import {RadioGroupProvider} from "./radio-context";
+import {StyledRadioGroup, StyledRadioGroupContainer, StyledRadioGroupLabel} from "./radio.styles";
 
 interface Props extends UseRadioGroupProps {
   className?: string;
@@ -19,49 +18,46 @@ interface Props extends UseRadioGroupProps {
   as?: keyof JSX.IntrinsicElements;
 }
 
-export type RadioGroupProps = Props & { css?: CSS };
+export type RadioGroupProps = Props & {css?: CSS};
 
 export const RadioGroup = React.forwardRef(
   (props: RadioGroupProps, ref: ReactRef<HTMLDivElement>) => {
-    const { as, css, className, children, label, ...otherProps } = props;
+    const {as, css, className, children, label, ...otherProps} = props;
 
-    const context = useRadioGroup({ ...otherProps, label });
+    const context = useRadioGroup({...otherProps, label});
 
     const domRef = useDOMRef(ref);
 
     return (
       <StyledRadioGroup
         ref={domRef}
-        className={clsx('nextui-radio-group', className)}
         as={as}
+        className={clsx("nextui-radio-group", className)}
         css={css as any}
         size={context.size}
         {...context.radioGroupProps}
       >
         {label && (
-          <StyledRadioGroupLabel
-            className="nextui-radio-group-label"
-            {...context.labelProps}
-          >
+          <StyledRadioGroupLabel className="nextui-radio-group-label" {...context.labelProps}>
             {label}
           </StyledRadioGroupLabel>
         )}
         <StyledRadioGroupContainer
           className="nextui-radio-group-items"
+          isRow={context.orientation === "horizontal"}
           role="presentation"
-          isRow={context.orientation === 'horizontal'}
         >
           <RadioGroupProvider value={context}>{children}</RadioGroupProvider>
         </StyledRadioGroupContainer>
       </StyledRadioGroup>
     );
-  }
+  },
 );
 
 if (__DEV__) {
-  RadioGroup.displayName = 'NextUI.RadioGroup';
+  RadioGroup.displayName = "NextUI.RadioGroup";
 }
 
-RadioGroup.toString = () => '.nextui-radio-group';
+RadioGroup.toString = () => ".nextui-radio-group";
 
 export default RadioGroup;
diff --git a/packages/react/src/radio/radio.stories.tsx b/packages/react/src/radio/radio.stories.tsx
index 3bb3158323..47f2e07739 100644
--- a/packages/react/src/radio/radio.stories.tsx
+++ b/packages/react/src/radio/radio.stories.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Radio from './index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import Radio from "./index";
 
 export default {
-  title: 'Inputs/Radio',
+  title: "Inputs/Radio",
   component: Radio,
-  onChange: { action: 'changed' }
+  onChange: {action: "changed"},
 } as Meta;
 
 export const Default = () => (
@@ -18,8 +19,8 @@ export const Default = () => (
 );
 
 export const Disabled = () => (
-  <Radio.Group label="Options" defaultValue="A" isDisabled>
-    <Radio value="A" description="Description for Option A">
+  <Radio.Group isDisabled defaultValue="A" label="Options">
+    <Radio description="Description for Option A" value="A">
       Option A
     </Radio>
     <Radio value="B">Option B</Radio>
@@ -30,38 +31,38 @@ export const Disabled = () => (
 
 export const Sizes = () => {
   return (
-    <div style={{ display: 'flex', flexDirection: 'row', gap: 200 }}>
-      <Radio.Group label="Sizes" defaultValue="md">
-        <Radio value="xs" size="xs">
+    <div style={{display: "flex", flexDirection: "row", gap: 200}}>
+      <Radio.Group defaultValue="md" label="Sizes">
+        <Radio size="xs" value="xs">
           mini
         </Radio>
-        <Radio value="sm" size="sm">
+        <Radio size="sm" value="sm">
           small
         </Radio>
-        <Radio value="md" size="md">
+        <Radio size="md" value="md">
           medium
         </Radio>
-        <Radio value="lg" size="lg">
+        <Radio size="lg" value="lg">
           large
         </Radio>
-        <Radio value="xl" size="xl">
+        <Radio size="xl" value="xl">
           xlarge
         </Radio>
       </Radio.Group>
-      <Radio.Group label="Sizes" defaultValue="md">
-        <Radio value="xs" size="xs" description="Description for Option mini">
+      <Radio.Group defaultValue="md" label="Sizes">
+        <Radio description="Description for Option mini" size="xs" value="xs">
           mini
         </Radio>
-        <Radio value="sm" size="sm" description="Description for Option small">
+        <Radio description="Description for Option small" size="sm" value="sm">
           small
         </Radio>
-        <Radio value="md" size="md" description="Description for Option medium">
+        <Radio description="Description for Option medium" size="md" value="md">
           medium
         </Radio>
-        <Radio value="lg" size="lg" description="Description for Option large">
+        <Radio description="Description for Option large" size="lg" value="lg">
           large
         </Radio>
-        <Radio value="xl" size="xl" description="Description for Option xlarge">
+        <Radio description="Description for Option xlarge" size="xl" value="xl">
           xlarge
         </Radio>
       </Radio.Group>
@@ -71,20 +72,20 @@ export const Sizes = () => {
 
 export const Colors = () => {
   return (
-    <Radio.Group label="Colors" defaultValue="primary">
-      <Radio value="primary" color="primary">
+    <Radio.Group defaultValue="primary" label="Colors">
+      <Radio color="primary" value="primary">
         primary
       </Radio>
-      <Radio value="secondary" color="secondary">
+      <Radio color="secondary" value="secondary">
         secondary
       </Radio>
-      <Radio value="success" color="success">
+      <Radio color="success" value="success">
         success
       </Radio>
-      <Radio value="warning" color="warning">
+      <Radio color="warning" value="warning">
         warning
       </Radio>
-      <Radio value="error" color="error">
+      <Radio color="error" value="error">
         error
       </Radio>
     </Radio.Group>
@@ -93,20 +94,20 @@ export const Colors = () => {
 
 export const LabelColors = () => {
   return (
-    <Radio.Group label="Label colors" defaultValue="primary">
-      <Radio value="primary" color="primary" labelColor="primary">
+    <Radio.Group defaultValue="primary" label="Label colors">
+      <Radio color="primary" labelColor="primary" value="primary">
         primary
       </Radio>
-      <Radio value="secondary" color="secondary" labelColor="secondary">
+      <Radio color="secondary" labelColor="secondary" value="secondary">
         secondary
       </Radio>
-      <Radio value="success" color="success" labelColor="success">
+      <Radio color="success" labelColor="success" value="success">
         success
       </Radio>
-      <Radio value="warning" color="warning" labelColor="warning">
+      <Radio color="warning" labelColor="warning" value="warning">
         warning
       </Radio>
-      <Radio value="error" color="error" labelColor="error">
+      <Radio color="error" labelColor="error" value="error">
         error
       </Radio>
     </Radio.Group>
@@ -114,75 +115,75 @@ export const LabelColors = () => {
 };
 
 export const Squared = () => (
-  <Radio.Group label="Options" defaultValue="A">
-    <Radio value="A" isSquared>
+  <Radio.Group defaultValue="A" label="Options">
+    <Radio isSquared value="A">
       Option A
     </Radio>
-    <Radio value="B" isSquared>
+    <Radio isSquared value="B">
       Option B
     </Radio>
-    <Radio value="C" isSquared>
+    <Radio isSquared value="C">
       Option C
     </Radio>
-    <Radio value="D" isSquared>
+    <Radio isSquared value="D">
       Option D
     </Radio>
   </Radio.Group>
 );
 
 export const Description = () => (
-  <Radio.Group label="Options" defaultValue="A">
-    <Radio value="A" description="Description for Option A">
+  <Radio.Group defaultValue="A" label="Options">
+    <Radio description="Description for Option A" value="A">
       Option A
     </Radio>
-    <Radio value="B" description="Description for Option B">
+    <Radio description="Description for Option B" value="B">
       Option B
     </Radio>
-    <Radio value="C" description="Description for Option C">
+    <Radio description="Description for Option C" value="C">
       Option C
     </Radio>
-    <Radio value="D" description="Description for Option D">
+    <Radio description="Description for Option D" value="D">
       Option D
     </Radio>
   </Radio.Group>
 );
 
 export const Invalid = () => (
-  <Radio.Group label="Options" defaultValue="A" validationState="invalid">
-    <Radio value="A" description="Description for Option A">
+  <Radio.Group defaultValue="A" label="Options" validationState="invalid">
+    <Radio description="Description for Option A" value="A">
       Option A
     </Radio>
-    <Radio value="B" description="Description for Option B">
+    <Radio description="Description for Option B" value="B">
       Option B
     </Radio>
-    <Radio value="C" description="Description for Option C">
+    <Radio description="Description for Option C" value="C">
       Option C
     </Radio>
-    <Radio value="D" description="Description for Option D">
+    <Radio description="Description for Option D" value="D">
       Option D
     </Radio>
   </Radio.Group>
 );
 
 export const Row = () => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: 100 }}>
-    <Radio.Group label="Options" defaultValue="A" orientation="horizontal">
+  <div style={{display: "flex", flexDirection: "column", gap: 100}}>
+    <Radio.Group defaultValue="A" label="Options" orientation="horizontal">
       <Radio value="A">Option A</Radio>
       <Radio value="B">Option B</Radio>
       <Radio value="C">Option C</Radio>
       <Radio value="D">Option D</Radio>
     </Radio.Group>
-    <Radio.Group label="Options" defaultValue="A" orientation="horizontal">
-      <Radio value="A" description="Description for Option A">
+    <Radio.Group defaultValue="A" label="Options" orientation="horizontal">
+      <Radio description="Description for Option A" value="A">
         Option A
       </Radio>
-      <Radio value="B" description="Description for Option B">
+      <Radio description="Description for Option B" value="B">
         Option B
       </Radio>
-      <Radio value="C" description="Description for Option C">
+      <Radio description="Description for Option C" value="C">
         Option C
       </Radio>
-      <Radio value="D" description="Description for Option D">
+      <Radio description="Description for Option D" value="D">
         Option D
       </Radio>
     </Radio.Group>
@@ -190,10 +191,10 @@ export const Row = () => (
 );
 
 export const Controlled = () => {
-  const [checked, setChecked] = React.useState<string>('london');
+  const [checked, setChecked] = React.useState<string>("london");
 
   React.useEffect(() => {
-    console.log('checked:', checked);
+    console.log("checked:", checked);
   }, [checked]);
 
   return (
@@ -208,17 +209,17 @@ export const Controlled = () => {
 
 export const DisableAnimation = () => {
   return (
-    <Radio.Group label="Options" defaultValue="A">
-      <Radio value="A" disableAnimation>
+    <Radio.Group defaultValue="A" label="Options">
+      <Radio disableAnimation value="A">
         Option A
       </Radio>
-      <Radio value="B" disableAnimation>
+      <Radio disableAnimation value="B">
         Option B
       </Radio>
-      <Radio value="C" disableAnimation>
+      <Radio disableAnimation value="C">
         Option C
       </Radio>
-      <Radio value="D" disableAnimation>
+      <Radio disableAnimation value="D">
         Option D
       </Radio>
     </Radio.Group>
diff --git a/packages/react/src/radio/radio.styles.ts b/packages/react/src/radio/radio.styles.ts
index a53b84146b..42ce214bc7 100644
--- a/packages/react/src/radio/radio.styles.ts
+++ b/packages/react/src/radio/radio.styles.ts
@@ -1,187 +1,188 @@
-import { styled } from '../theme/stitches.config';
-import type { VariantProps } from '../theme/stitches.config';
-import { cssFocusVisible } from '../theme/shared-css';
+import type {VariantProps} from "../theme/stitches.config";
 
-export const StyledRadioText = styled('span', {
-  fontSize: '$$radioSize',
-  us: 'none',
-  d: 'inline-flex',
-  ai: 'center',
+import {styled} from "../theme/stitches.config";
+import {cssFocusVisible} from "../theme/shared-css";
+
+export const StyledRadioText = styled("span", {
+  fontSize: "$$radioSize",
+  us: "none",
+  d: "inline-flex",
+  ai: "center",
   variants: {
     color: {
       default: {
-        color: '$text'
+        color: "$text",
       },
       primary: {
-        color: '$primary'
+        color: "$primary",
       },
       secondary: {
-        color: '$secondary'
+        color: "$secondary",
       },
       success: {
-        color: '$success'
+        color: "$success",
       },
       warning: {
-        color: '$warning'
+        color: "$warning",
       },
       error: {
-        color: '$error'
-      }
+        color: "$error",
+      },
     },
     isDisabled: {
       true: {
-        color: '$accents5'
-      }
+        color: "$accents5",
+      },
     },
     isInvalid: {
       true: {
-        color: '$error'
-      }
-    }
-  }
+        color: "$error",
+      },
+    },
+  },
 });
 
 export const StyledRadioPoint = styled(
-  'span',
+  "span",
   {
-    size: '$$radioSize',
-    br: '$$radioRadii',
-    position: 'relative',
-    d: 'inline-block',
-    mr: 'calc($$radioSize * 0.375)',
-    '&:after': {
-      content: '',
-      d: 'block',
-      position: 'absolute',
-      size: '$$radioSize',
-      br: '$$radioRadii',
-      boxSizing: 'border-box',
-      border: '2px solid $border'
-    }
+    size: "$$radioSize",
+    br: "$$radioRadii",
+    position: "relative",
+    d: "inline-block",
+    mr: "calc($$radioSize * 0.375)",
+    "&:after": {
+      content: "",
+      d: "block",
+      position: "absolute",
+      size: "$$radioSize",
+      br: "$$radioRadii",
+      boxSizing: "border-box",
+      border: "2px solid $border",
+    },
   },
-  cssFocusVisible
+  cssFocusVisible,
 );
 
-export const StyledRadioLabel = styled('label', {
-  d: 'flex',
-  w: 'initial',
-  ai: 'flex-start',
-  position: 'relative',
-  fd: 'column',
-  jc: 'flex-start',
-  cursor: 'pointer',
-  '@motion': {
+export const StyledRadioLabel = styled("label", {
+  d: "flex",
+  w: "initial",
+  ai: "flex-start",
+  position: "relative",
+  fd: "column",
+  jc: "flex-start",
+  cursor: "pointer",
+  "@motion": {
     [`& ${StyledRadioPoint}`]: {
-      transition: 'none',
-      '&:after': {
-        transition: 'none'
-      }
-    }
+      transition: "none",
+      "&:after": {
+        transition: "none",
+      },
+    },
   },
   variants: {
     color: {
       default: {
-        $$radioColor: '$colors$primary',
-        $$radioColorHover: '$colors$primarySolidHover'
+        $$radioColor: "$colors$primary",
+        $$radioColorHover: "$colors$primarySolidHover",
       },
       primary: {
-        $$radioColor: '$colors$primary',
-        $$radioColorHover: '$colors$primarySolidHover'
+        $$radioColor: "$colors$primary",
+        $$radioColorHover: "$colors$primarySolidHover",
       },
       secondary: {
-        $$radioColor: '$colors$secondary',
-        $$radioColorHover: '$colors$secondarySolidHover'
+        $$radioColor: "$colors$secondary",
+        $$radioColorHover: "$colors$secondarySolidHover",
       },
       success: {
-        $$radioColor: '$colors$success',
-        $$radioColorHover: '$colors$successSolidHover'
+        $$radioColor: "$colors$success",
+        $$radioColorHover: "$colors$successSolidHover",
       },
       warning: {
-        $$radioColor: '$colors$warning',
-        $$radioColorHover: '$colors$warningSolidHover'
+        $$radioColor: "$colors$warning",
+        $$radioColorHover: "$colors$warningSolidHover",
       },
       error: {
-        $$radioColor: '$colors$error',
-        $$radioColorHover: '$colors$errorSolidHover'
-      }
+        $$radioColor: "$colors$error",
+        $$radioColorHover: "$colors$errorSolidHover",
+      },
     },
     size: {
       xs: {
-        $$radioSize: '$space$7'
+        $$radioSize: "$space$7",
       },
       sm: {
-        $$radioSize: '$space$8'
+        $$radioSize: "$space$8",
       },
       md: {
-        $$radioSize: '$space$9'
+        $$radioSize: "$space$9",
       },
       lg: {
-        $$radioSize: '$space$10'
+        $$radioSize: "$space$10",
       },
       xl: {
-        $$radioSize: '$space$11'
-      }
+        $$radioSize: "$space$11",
+      },
     },
     isHovered: {
-      true: {}
+      true: {},
     },
     isInvalid: {
       true: {
-        $$radioColor: '$colors$error',
-        $$radioColorHover: '$colors$errorSolidHover',
+        $$radioColor: "$colors$error",
+        $$radioColorHover: "$colors$errorSolidHover",
         [`& ${StyledRadioPoint}`]: {
-          '&:after': {
-            borderColor: '$colors$error'
-          }
-        }
-      }
+          "&:after": {
+            borderColor: "$colors$error",
+          },
+        },
+      },
     },
     isDisabled: {
       true: {
-        cursor: 'not-allowed',
-        $$radioColor: '$colors$accents4'
-      }
+        cursor: "not-allowed",
+        $$radioColor: "$colors$accents4",
+      },
     },
     isSquared: {
       true: {
-        $$radioRadii: '$radii$squared'
+        $$radioRadii: "$radii$squared",
       },
       false: {
-        $$radioRadii: '$radii$rounded'
-      }
+        $$radioRadii: "$radii$rounded",
+      },
     },
     isChecked: {
       true: {
         [`& ${StyledRadioPoint}`]: {
-          '&:after': {
-            border: 'calc($$radioSize * 0.34) solid $$radioColor'
-          }
-        }
-      }
+          "&:after": {
+            border: "calc($$radioSize * 0.34) solid $$radioColor",
+          },
+        },
+      },
     },
     disableAnimation: {
       true: {
         [`& ${StyledRadioPoint}`]: {
-          transition: 'none',
-          '&:after': {
-            transition: 'none'
-          }
-        }
+          transition: "none",
+          "&:after": {
+            transition: "none",
+          },
+        },
       },
       false: {
         [`& ${StyledRadioPoint}`]: {
-          transition: '$default',
-          '&:after': {
-            transition: '$default'
-          }
-        }
-      }
-    }
+          transition: "$default",
+          "&:after": {
+            transition: "$default",
+          },
+        },
+      },
+    },
   },
   defaultVariants: {
-    size: 'md',
+    size: "md",
     isSquared: false,
-    disableAnimation: false
+    disableAnimation: false,
   },
   compoundVariants: [
     // isChecked && isHovered
@@ -190,11 +191,11 @@ export const StyledRadioLabel = styled('label', {
       isHovered: true,
       css: {
         [`& ${StyledRadioPoint}`]: {
-          '&:after': {
-            border: 'calc($$radioSize * 0.34) solid $$radioColorHover'
-          }
-        }
-      }
+          "&:after": {
+            border: "calc($$radioSize * 0.34) solid $$radioColorHover",
+          },
+        },
+      },
     },
     // isChecked && isDisabled & isHovered
     {
@@ -203,11 +204,11 @@ export const StyledRadioLabel = styled('label', {
       isHovered: true,
       css: {
         [`& ${StyledRadioPoint}`]: {
-          '&:after': {
-            border: 'calc($$radioSize * 0.34) solid $$radioColor'
-          }
-        }
-      }
+          "&:after": {
+            border: "calc($$radioSize * 0.34) solid $$radioColor",
+          },
+        },
+      },
     },
     // !isChecked && !isDisabled && isHovered
     {
@@ -216,99 +217,99 @@ export const StyledRadioLabel = styled('label', {
       isHovered: true,
       css: {
         [`& ${StyledRadioPoint}`]: {
-          bg: '$border'
-        }
-      }
-    }
-  ]
+          bg: "$border",
+        },
+      },
+    },
+  ],
 });
 
-export const StyledRadioDescription = styled('span', {
-  color: '$accents7',
-  fontSize: 'calc($$radioSize * 0.85)',
-  paddingLeft: 'calc($$radioSize + $$radioSize * 0.375)',
+export const StyledRadioDescription = styled("span", {
+  color: "$accents7",
+  fontSize: "calc($$radioSize * 0.85)",
+  paddingLeft: "calc($$radioSize + $$radioSize * 0.375)",
   variants: {
     isInvalid: {
       true: {
-        color: '$red500'
-      }
+        color: "$red500",
+      },
     },
     isDisabled: {
       true: {
-        color: '$accents5'
-      }
-    }
-  }
+        color: "$accents5",
+      },
+    },
+  },
 });
 
-export const StyledRadioContainer = styled('div', {
-  w: 'initial',
-  position: 'relative',
-  d: 'flex',
-  fd: 'row',
-  ai: 'center',
-  jc: 'flex-start'
+export const StyledRadioContainer = styled("div", {
+  w: "initial",
+  position: "relative",
+  d: "flex",
+  fd: "row",
+  ai: "center",
+  jc: "flex-start",
 });
 
-export const StyledRadioGroupLabel = styled('label', {
-  d: 'block',
-  fontWeight: '$normal',
-  fontSize: 'calc($$checkboxSize * 0.9)',
-  color: '$accents8',
-  mb: '$3'
+export const StyledRadioGroupLabel = styled("label", {
+  d: "block",
+  fontWeight: "$normal",
+  fontSize: "calc($$checkboxSize * 0.9)",
+  color: "$accents8",
+  mb: "$3",
 });
 
-export const StyledRadioGroup = styled('div', {
+export const StyledRadioGroup = styled("div", {
   border: 0,
   margin: 0,
   padding: 0,
-  display: 'flex',
-  fd: 'column',
+  display: "flex",
+  fd: "column",
   variants: {
     size: {
       xs: {
-        $$radioGroupGap: '$space$7'
+        $$radioGroupGap: "$space$7",
       },
       sm: {
-        $$radioGroupGap: '$space$8'
+        $$radioGroupGap: "$space$8",
       },
       md: {
-        $$radioGroupGap: '$space$9'
+        $$radioGroupGap: "$space$9",
       },
       lg: {
-        $$radioGroupGap: '$space$10'
+        $$radioGroupGap: "$space$10",
       },
       xl: {
-        $$radioGroupGap: '$space$11'
-      }
-    }
-  }
+        $$radioGroupGap: "$space$11",
+      },
+    },
+  },
 });
 
-export const StyledRadioGroupContainer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
+export const StyledRadioGroupContainer = styled("div", {
+  display: "flex",
+  flexDirection: "column",
   variants: {
     isRow: {
       true: {
         mt: 0,
-        flexDirection: 'row',
+        flexDirection: "row",
         [`& ${StyledRadioLabel}:not(:last-child)`]: {
-          mr: '$$radioSize'
-        }
+          mr: "$$radioSize",
+        },
       },
       false: {
         mr: 0,
-        flexDirection: 'column',
+        flexDirection: "column",
         [`& ${StyledRadioLabel}:not(:first-child)`]: {
-          mt: '$$radioSize'
-        }
-      }
-    }
+          mt: "$$radioSize",
+        },
+      },
+    },
   },
   defaultVariants: {
-    isRow: false
-  }
+    isRow: false,
+  },
 });
 
 // types
@@ -316,12 +317,6 @@ export type RadioLabelVariantsProps = VariantProps<typeof StyledRadioLabel>;
 export type RadioTexVariantsProps = VariantProps<typeof StyledRadioText>;
 export type RadioPointVariantsProps = VariantProps<typeof StyledRadioPoint>;
 export type RadioGroupVariantsProps = VariantProps<typeof StyledRadioGroup>;
-export type RadioContainerVariantsProps = VariantProps<
-  typeof StyledRadioContainer
->;
-export type RadioGroupContainerVariantsProps = VariantProps<
-  typeof StyledRadioGroupContainer
->;
-export type RadioDescriptionVariantsProps = VariantProps<
-  typeof StyledRadioDescription
->;
+export type RadioContainerVariantsProps = VariantProps<typeof StyledRadioContainer>;
+export type RadioGroupContainerVariantsProps = VariantProps<typeof StyledRadioGroupContainer>;
+export type RadioDescriptionVariantsProps = VariantProps<typeof StyledRadioDescription>;
diff --git a/packages/react/src/radio/radio.tsx b/packages/react/src/radio/radio.tsx
index 04c0ed0038..672e4ba8d6 100644
--- a/packages/react/src/radio/radio.tsx
+++ b/packages/react/src/radio/radio.tsx
@@ -1,24 +1,27 @@
-import React, { useMemo, ReactNode } from 'react';
-import { mergeProps } from '@react-aria/utils';
-import { useFocusRing } from '@react-aria/focus';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import clsx from '../utils/clsx';
-import { __DEV__ } from '../utils/assertion';
-import { useFocusableRef } from '../utils/dom';
-import RadioGroup from './radio-group';
-import { useRadio } from './use-radio';
+import type {FocusRingAria} from "@react-aria/focus";
+import type {FocusableRef} from "@react-types/shared";
+import type {ReactRef} from "../utils/refs";
+import type {CSS} from "../theme/stitches.config";
+import type {UseRadioProps} from "./use-radio";
+
+import React, {useMemo, ReactNode} from "react";
+import {mergeProps} from "@react-aria/utils";
+import {useFocusRing} from "@react-aria/focus";
+import {VisuallyHidden} from "@react-aria/visually-hidden";
+
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+import {useFocusableRef} from "../utils/dom";
+
+import RadioGroup from "./radio-group";
+import {useRadio} from "./use-radio";
 import {
   StyledRadioText,
   StyledRadioPoint,
   StyledRadioLabel,
   StyledRadioDescription,
-  StyledRadioContainer
-} from './radio.styles';
-import type { FocusRingAria } from '@react-aria/focus';
-import type { FocusableRef } from '@react-types/shared';
-import type { ReactRef } from '../utils/refs';
-import type { CSS } from '../theme/stitches.config';
-import type { UseRadioProps } from './use-radio';
+  StyledRadioContainer,
+} from "./radio.styles";
 
 interface Props extends UseRadioProps {
   label?: string;
@@ -28,104 +31,95 @@ interface Props extends UseRadioProps {
   as?: keyof JSX.IntrinsicElements;
 }
 
-export type RadioProps = Props & { css?: CSS };
+export type RadioProps = Props & {css?: CSS};
 
 interface IFocusRingAria extends FocusRingAria {
   focusProps: Omit<React.HTMLAttributes<HTMLElement>, keyof RadioProps>;
 }
 
-export const Radio = React.forwardRef(
-  (props: RadioProps, ref: ReactRef<HTMLInputElement>) => {
-    const { className, as, css, children, label, description, ...otherProps } =
-      props;
-
-    const {
-      size,
-      color,
-      inputRef,
-      labelColor,
-      isHovered,
-      isSquared,
-      isInvalid,
-      isDisabled,
-      autoFocus,
-      disableAnimation,
-      hoverProps,
-      inputProps
-    } = useRadio({ ...otherProps, children: children ?? label });
-
-    const domRef = useFocusableRef<HTMLLabelElement>(
-      ref as FocusableRef<HTMLLabelElement>,
-      inputRef
-    );
-
-    const { focusProps, isFocusVisible }: IFocusRingAria = useFocusRing({
-      autoFocus
-    });
-
-    const radioState = useMemo(() => {
-      if (isHovered) return 'is-hovered';
-      if (isDisabled) return 'is-disabled';
-      return inputProps.checked ? 'checked' : 'uncheked';
-    }, [isDisabled, inputProps.checked, isHovered]);
-
-    return (
-      <StyledRadioLabel
-        ref={domRef}
-        {...hoverProps}
-        className={clsx(
-          'nextui-radio-label',
-          `nextui-radio--${radioState}`,
-          className
-        )}
-        as={as}
-        css={css as any}
-        size={size}
-        color={color}
-        data-state={radioState}
-        isSquared={isSquared}
-        isHovered={isHovered}
-        isInvalid={isInvalid}
-        isChecked={inputProps.checked}
-        isDisabled={isDisabled}
-        disableAnimation={disableAnimation}
-      >
-        <StyledRadioContainer className="nextui-radio-container">
-          <StyledRadioPoint
-            className="nextui-radio-point"
-            isFocusVisible={isFocusVisible}
-            {...focusProps}
-          >
-            <VisuallyHidden>
-              <input
-                ref={inputRef}
-                className="nextui-radio-input"
-                {...mergeProps(inputProps, focusProps)}
-              />
-            </VisuallyHidden>
-          </StyledRadioPoint>
-          <StyledRadioText
-            color={labelColor}
-            isInvalid={isInvalid}
-            isDisabled={isDisabled}
-            className="nextui-radio-label"
-          >
-            {children}
-          </StyledRadioText>
-        </StyledRadioContainer>
-        {description && (
-          <StyledRadioDescription
-            className="nextui-radio-description"
-            isInvalid={isInvalid}
-            isDisabled={isDisabled}
-          >
-            {description}
-          </StyledRadioDescription>
-        )}
-      </StyledRadioLabel>
-    );
-  }
-);
+export const Radio = React.forwardRef((props: RadioProps, ref: ReactRef<HTMLInputElement>) => {
+  const {className, as, css, children, label, description, ...otherProps} = props;
+
+  const {
+    size,
+    color,
+    inputRef,
+    labelColor,
+    isHovered,
+    isSquared,
+    isInvalid,
+    isDisabled,
+    autoFocus,
+    disableAnimation,
+    hoverProps,
+    inputProps,
+  } = useRadio({...otherProps, children: children ?? label});
+
+  const domRef = useFocusableRef<HTMLLabelElement>(ref as FocusableRef<HTMLLabelElement>, inputRef);
+
+  const {focusProps, isFocusVisible}: IFocusRingAria = useFocusRing({
+    autoFocus,
+  });
+
+  const radioState = useMemo(() => {
+    if (isHovered) return "is-hovered";
+    if (isDisabled) return "is-disabled";
+
+    return inputProps.checked ? "checked" : "uncheked";
+  }, [isDisabled, inputProps.checked, isHovered]);
+
+  return (
+    <StyledRadioLabel
+      ref={domRef}
+      {...hoverProps}
+      as={as}
+      className={clsx("nextui-radio-label", `nextui-radio--${radioState}`, className)}
+      color={color}
+      css={css as any}
+      data-state={radioState}
+      disableAnimation={disableAnimation}
+      isChecked={inputProps.checked}
+      isDisabled={isDisabled}
+      isHovered={isHovered}
+      isInvalid={isInvalid}
+      isSquared={isSquared}
+      size={size}
+    >
+      <StyledRadioContainer className="nextui-radio-container">
+        <StyledRadioPoint
+          className="nextui-radio-point"
+          isFocusVisible={isFocusVisible}
+          {...focusProps}
+        >
+          <VisuallyHidden>
+            <input
+              ref={inputRef}
+              className="nextui-radio-input"
+              {...mergeProps(inputProps, focusProps)}
+            />
+          </VisuallyHidden>
+        </StyledRadioPoint>
+        <StyledRadioText
+          className="nextui-radio-label"
+          color={labelColor}
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+        >
+          {children}
+        </StyledRadioText>
+      </StyledRadioContainer>
+      {description && (
+        <StyledRadioDescription
+          className="nextui-radio-description"
+          isDisabled={isDisabled}
+          isInvalid={isInvalid}
+        >
+          {description}
+        </StyledRadioDescription>
+      )}
+    </StyledRadioLabel>
+  );
+});
 
 type RadioComponent<T, P = {}> = React.ForwardRefExoticComponent<
   React.PropsWithoutRef<P> & React.RefAttributes<T>
@@ -134,9 +128,9 @@ type RadioComponent<T, P = {}> = React.ForwardRefExoticComponent<
 };
 
 if (__DEV__) {
-  Radio.displayName = 'NextUI.Radio';
+  Radio.displayName = "NextUI.Radio";
 }
 
-Radio.toString = () => '.nextui-radio';
+Radio.toString = () => ".nextui-radio";
 
 export default Radio as RadioComponent<HTMLLabelElement, RadioProps>;
diff --git a/packages/react/src/radio/use-radio-group.ts b/packages/react/src/radio/use-radio-group.ts
index b52ef4b9e4..4a27af3a82 100644
--- a/packages/react/src/radio/use-radio-group.ts
+++ b/packages/react/src/radio/use-radio-group.ts
@@ -1,8 +1,9 @@
-import React, { useMemo, HTMLAttributes } from 'react';
-import { useRadioGroupState } from '@react-stately/radio';
-import { useRadioGroup as useReactAriaRadioGroup } from '@react-aria/radio';
-import type { AriaRadioGroupProps } from '@react-types/radio';
-import type { NormalSizes, SimpleColors } from '../utils/prop-types';
+import type {AriaRadioGroupProps} from "@react-types/radio";
+import type {NormalSizes, SimpleColors} from "../utils/prop-types";
+
+import React, {useMemo, HTMLAttributes} from "react";
+import {useRadioGroupState} from "@react-stately/radio";
+import {useRadioGroup as useReactAriaRadioGroup} from "@react-aria/radio";
 
 interface Props extends AriaRadioGroupProps {
   size?: NormalSizes;
@@ -16,9 +17,9 @@ export type UseRadioGroupProps = Props & NativeAttrs;
 
 interface IRadioGroupAria {
   /** Props for the radio group wrapper element. */
-  radioGroupProps: Omit<HTMLAttributes<HTMLElement>, 'css'>;
+  radioGroupProps: Omit<HTMLAttributes<HTMLElement>, "css">;
   /** Props for the radio group's visible label (if any). */
-  labelProps: Omit<HTMLAttributes<HTMLElement>, 'css'>;
+  labelProps: Omit<HTMLAttributes<HTMLElement>, "css">;
 }
 
 /**
@@ -26,10 +27,10 @@ interface IRadioGroupAria {
  */
 export const useRadioGroup = (props: UseRadioGroupProps) => {
   const {
-    size = 'md',
-    color = 'default',
-    labelColor = 'default',
-    orientation = 'vertical',
+    size = "md",
+    color = "default",
+    labelColor = "default",
+    orientation = "vertical",
     isRequired,
     validationState,
     ...otherProps
@@ -38,14 +39,16 @@ export const useRadioGroup = (props: UseRadioGroupProps) => {
   const otherPropsWithOrientation = useMemo<AriaRadioGroupProps>(() => {
     return {
       ...otherProps,
-      orientation
+      orientation,
     };
   }, [otherProps]);
 
   const radioGroupState = useRadioGroupState(otherPropsWithOrientation);
 
-  const { radioGroupProps, labelProps }: IRadioGroupAria =
-    useReactAriaRadioGroup(otherPropsWithOrientation, radioGroupState);
+  const {radioGroupProps, labelProps}: IRadioGroupAria = useReactAriaRadioGroup(
+    otherPropsWithOrientation,
+    radioGroupState,
+  );
 
   return {
     size,
@@ -56,7 +59,7 @@ export const useRadioGroup = (props: UseRadioGroupProps) => {
     validationState,
     radioGroupState,
     radioGroupProps,
-    labelProps
+    labelProps,
   };
 };
 
diff --git a/packages/react/src/radio/use-radio.ts b/packages/react/src/radio/use-radio.ts
index e094b9b23f..1cc6eb67b1 100644
--- a/packages/react/src/radio/use-radio.ts
+++ b/packages/react/src/radio/use-radio.ts
@@ -1,11 +1,14 @@
-import React, { useRef, useMemo } from 'react';
-import { useRadio as useReactAriaRadio } from '@react-aria/radio';
-import { useHover } from '@react-aria/interactions';
-import useWarning from '../use-warning';
-import { __DEV__ } from '../utils/assertion';
-import { useRadioGroupContext } from './radio-context';
-import type { AriaRadioProps } from '@react-types/radio';
-import type { NormalSizes, SimpleColors } from '../utils/prop-types';
+import type {AriaRadioProps} from "@react-types/radio";
+import type {NormalSizes, SimpleColors} from "../utils/prop-types";
+
+import React, {useRef, useMemo} from "react";
+import {useRadio as useReactAriaRadio} from "@react-aria/radio";
+import {useHover} from "@react-aria/interactions";
+
+import {warn} from "../utils/console";
+import {__DEV__} from "../utils/assertion";
+
+import {useRadioGroupContext} from "./radio-context";
 
 interface Props extends AriaRadioProps {
   isSquared?: boolean;
@@ -26,9 +29,9 @@ export const useRadio = (props: UseRadioProps) => {
   const groupContext = useRadioGroupContext();
 
   const {
-    size = groupContext.size ?? 'md',
-    color = groupContext.color ?? 'default',
-    labelColor = groupContext.labelColor ?? 'default',
+    size = groupContext.size ?? "md",
+    color = groupContext.color ?? "default",
+    labelColor = groupContext.labelColor ?? "default",
     autoFocus,
     isSquared = false,
     disableAnimation = false,
@@ -37,34 +40,24 @@ export const useRadio = (props: UseRadioProps) => {
 
   if (groupContext && __DEV__) {
     if (otherProps.checked !== undefined) {
-      useWarning('Remove props "checked" if in the Radio.Group.', 'Radio');
+      warn('Remove props "checked" if in the Radio.Group.', "Radio");
     }
     if (otherProps.value === undefined) {
-      useWarning(
-        'Props "value" must be defined if in the Radio.Group.',
-        'Radio'
-      );
+      warn('Props "value" must be defined if in the Radio.Group.', "Radio");
     }
   }
 
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const { inputProps } = useReactAriaRadio(
-    otherProps,
-    groupContext.radioGroupState,
-    inputRef
-  );
+  const {inputProps} = useReactAriaRadio(otherProps, groupContext.radioGroupState, inputRef);
 
-  const isDisabled = useMemo(
-    () => inputProps.disabled ?? false,
-    [inputProps.disabled]
-  );
+  const isDisabled = useMemo(() => inputProps.disabled ?? false, [inputProps.disabled]);
 
-  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const {hoverProps, isHovered} = useHover({isDisabled});
 
   const isInvalid = useMemo(
-    () => groupContext.validationState === 'invalid',
-    [groupContext.validationState]
+    () => groupContext.validationState === "invalid",
+    [groupContext.validationState],
   );
 
   return {
@@ -79,7 +72,7 @@ export const useRadio = (props: UseRadioProps) => {
     isSquared,
     disableAnimation,
     inputProps,
-    hoverProps
+    hoverProps,
   };
 };
 
diff --git a/packages/react/src/row/__tests__/index.test.tsx b/packages/react/src/row/__tests__/index.test.tsx
index f8ec188b8e..a216725905 100644
--- a/packages/react/src/row/__tests__/index.test.tsx
+++ b/packages/react/src/row/__tests__/index.test.tsx
@@ -1,33 +1,36 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { Row, Col } from '../../index';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('Row', () => {
-  it('should render correctly', () => {
+import {Row, Col} from "../../index";
+
+describe("Row", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Row>row</Row>);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should be render different components', () => {
+  it("should be render different components", () => {
     const wrapper = mount(<Row>row</Row>);
-    wrapper.setProps({ as: 'div' });
-    expect(wrapper.find('div').length).not.toBe(0);
 
-    wrapper.setProps({ as: 'nav' });
-    expect(wrapper.find('nav').length).not.toBe(0);
+    wrapper.setProps({as: "div"});
+    expect(wrapper.find("div").length).not.toBe(0);
+
+    wrapper.setProps({as: "nav"});
+    expect(wrapper.find("nav").length).not.toBe(0);
 
-    wrapper.setProps({ as: 'span' });
-    expect(wrapper.find('span').length).not.toBe(0);
+    wrapper.setProps({as: "span"});
+    expect(wrapper.find("span").length).not.toBe(0);
 
-    wrapper.setProps({ as: 'p' });
-    expect(wrapper.find('p').length).not.toBe(0);
+    wrapper.setProps({as: "p"});
+    expect(wrapper.find("p").length).not.toBe(0);
 
-    wrapper.setProps({ as: 'details' });
-    expect(wrapper.find('details').length).not.toBe(0);
+    wrapper.setProps({as: "details"});
+    expect(wrapper.find("details").length).not.toBe(0);
   });
 
-  it('the children should be aligned correctly', () => {
+  it("the children should be aligned correctly", () => {
     const wrapper = mount(
       <div>
         <Row justify="flex-end">
@@ -51,13 +54,14 @@ describe('Row', () => {
         <Row align="flex-end">
           <Col />
         </Row>
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('the children should have the correct spacing', () => {
+  it("the children should have the correct spacing", () => {
     const wrapper = mount(
       <div>
         <Row gap={1}>
@@ -69,13 +73,14 @@ describe('Row', () => {
         <Row gap={10}>
           <Col />
         </Row>
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with nested', () => {
+  it("should work with nested", () => {
     const wrapper = mount(
       <Row>
         <Row>
@@ -85,8 +90,9 @@ describe('Row', () => {
             </Col>
           </Row>
         </Row>
-      </Row>
+      </Row>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
diff --git a/packages/react/src/row/index.ts b/packages/react/src/row/index.ts
index a694a207ec..1d2077c3e5 100644
--- a/packages/react/src/row/index.ts
+++ b/packages/react/src/row/index.ts
@@ -1,7 +1,7 @@
-import Row from './row';
-export type { RowProps } from './row';
+import Row from "./row";
+export type {RowProps} from "./row";
 
-export { StyledRow } from './row.styles';
-export type { RowVariantsProps } from './row.styles';
+export {StyledRow} from "./row.styles";
+export type {RowVariantsProps} from "./row.styles";
 
 export default Row;
diff --git a/packages/react/src/row/row.stories.tsx b/packages/react/src/row/row.stories.tsx
index 1b655d2974..1ffde02092 100644
--- a/packages/react/src/row/row.stories.tsx
+++ b/packages/react/src/row/row.stories.tsx
@@ -1,24 +1,24 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Row from './index';
-import { Card, Grid, Spacer } from '../index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Card, Grid, Spacer} from "../index";
+
+import Row from "./index";
 
 export default {
-  title: 'Layout/Row',
+  title: "Layout/Row",
   component: Row,
   decorators: [
     (Story) => (
-      <Grid.Container justify="center" direction="column">
+      <Grid.Container direction="column" justify="center">
         <Story />
       </Grid.Container>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
 const MockItem = () => {
-  return (
-    <Card color="primary" shadow style={{ width: '100%', height: '40px' }} />
-  );
+  return <Card shadow color="primary" style={{width: "100%", height: "40px"}} />;
 };
 
 export const Default = () => (
diff --git a/packages/react/src/row/row.styles.ts b/packages/react/src/row/row.styles.ts
index d614cc057e..4518fee8c1 100644
--- a/packages/react/src/row/row.styles.ts
+++ b/packages/react/src/row/row.styles.ts
@@ -1,19 +1,19 @@
-import { styled, VariantProps } from '../theme/stitches.config';
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledRow = styled('div', {
-  display: 'flex',
-  position: 'relative',
-  boxSizing: 'border-box',
+export const StyledRow = styled("div", {
+  display: "flex",
+  position: "relative",
+  boxSizing: "border-box",
   variants: {
     fluid: {
       true: {
-        width: '100%'
-      }
-    }
+        width: "100%",
+      },
+    },
   },
   defaultVariants: {
-    fluid: true
-  }
+    fluid: true,
+  },
 });
 
 export type RowVariantsProps = VariantProps<typeof StyledRow>;
diff --git a/packages/react/src/row/row.tsx b/packages/react/src/row/row.tsx
index 2dd4247373..89eb280bbe 100644
--- a/packages/react/src/row/row.tsx
+++ b/packages/react/src/row/row.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
-import withDefaults from '../utils/with-defaults';
-import { CSS } from '../theme/stitches.config';
-import { Justify, AlignItems, Wrap } from '../utils/prop-types';
-import StyledRow, { RowVariantsProps } from './row.styles';
+import React from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {CSS} from "../theme/stitches.config";
+import {Justify, AlignItems, Wrap} from "../utils/prop-types";
+
+import StyledRow, {RowVariantsProps} from "./row.styles";
 
 interface Props {
   gap?: number;
@@ -15,9 +17,9 @@ interface Props {
 
 const defaultProps = {
   gap: 0,
-  wrap: 'nowrap' as Wrap,
-  justify: 'flex-start' as Justify,
-  align: 'flex-start' as AlignItems
+  wrap: "nowrap" as Wrap,
+  justify: "flex-start" as Justify,
+  align: "flex-start" as AlignItems,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -42,7 +44,7 @@ const Row: React.FC<React.PropsWithChildren<RowProps>> = ({
         marginRight: `calc(${gap} * $space$lg / 2)`,
         justifyContent: justify,
         alignItems: align,
-        ...(css as any)
+        ...(css as any),
       }}
       {...props}
     >
@@ -51,7 +53,7 @@ const Row: React.FC<React.PropsWithChildren<RowProps>> = ({
   );
 };
 
-Row.toString = () => '.nextui-row';
+Row.toString = () => ".nextui-row";
 
 const MemoRow = React.memo(Row);
 
diff --git a/packages/react/src/snippet/__tests__/index.test.tsx b/packages/react/src/snippet/__tests__/index.test.tsx
index 46bce17627..e624ede46b 100644
--- a/packages/react/src/snippet/__tests__/index.test.tsx
+++ b/packages/react/src/snippet/__tests__/index.test.tsx
@@ -1,96 +1,106 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Snippet from '../index';
+import React from "react";
+import {mount} from "enzyme";
 
-const command = 'yarn add @nextui-org/react';
-const multiLine = ['cd project', 'now'];
+import Snippet from "../index";
 
-describe('Snippet', () => {
+const command = "yarn add @nextui-org/react";
+const multiLine = ["cd project", "now"];
+
+describe("Snippet", () => {
   beforeAll(() => {
     window.getSelection = jest.fn().mockImplementation(() => ({
       removeAllRanges: jest.fn(),
-      addRange: jest.fn()
+      addRange: jest.fn(),
     }));
     document.createRange = jest.fn().mockImplementation(() => ({
-      selectNode: jest.fn()
+      selectNode: jest.fn(),
     }));
   });
 
-  it('should render correctly', () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Snippet text={command} />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with multi-line', () => {
+  it("should work with multi-line", () => {
     const wrapper = mount(<Snippet text={multiLine} />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with different styles', () => {
+  it("should work with different styles", () => {
     const wrapper = mount(
       <div>
         <Snippet text={command} />
-        <Snippet text={command} filled />
-        <Snippet text={command} color="secondary" />
-        <Snippet text={command} color="success" filled />
-      </div>
+        <Snippet filled text={command} />
+        <Snippet color="secondary" text={command} />
+        <Snippet filled color="success" text={command} />
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('text should be copied', () => {
+  it("text should be copied", () => {
     document.execCommand = jest.fn();
     const wrapper = mount(<Snippet text={command} />);
-    wrapper.find('.nextui-snippet-copy-button').at(0).simulate('click');
+
+    wrapper.find(".nextui-snippet-copy-button").at(0).simulate("click");
     expect(document.execCommand).toHaveBeenCalled();
     (document.execCommand as jest.Mock).mockRestore();
   });
 
-  it('multi-line commands should be copied', () => {
+  it("multi-line commands should be copied", () => {
     document.execCommand = jest.fn();
     const wrapper = mount(<Snippet text={multiLine} />);
-    wrapper.find('.nextui-snippet-copy-button').at(0).simulate('click');
+
+    wrapper.find(".nextui-snippet-copy-button").at(0).simulate("click");
     expect(document.execCommand).toHaveBeenCalled();
     (document.execCommand as jest.Mock).mockRestore();
   });
 
-  it('child commands should be copied', () => {
+  it("child commands should be copied", () => {
     document.execCommand = jest.fn();
     const wrapper = mount(<Snippet>{command}</Snippet>);
-    wrapper.find('.nextui-snippet-copy-button').at(0).simulate('click');
+
+    wrapper.find(".nextui-snippet-copy-button").at(0).simulate("click");
     expect(document.execCommand).toHaveBeenCalled();
     (document.execCommand as jest.Mock).mockRestore();
   });
 
-  it('should disable copy function', () => {
-    const wrapper = mount(<Snippet text={command} copy="prevent" />);
-    expect(wrapper.find('.nextui-snippet-copy-button').length).toBe(0);
+  it("should disable copy function", () => {
+    const wrapper = mount(<Snippet copy="prevent" text={command} />);
+
+    expect(wrapper.find(".nextui-snippet-copy-button").length).toBe(0);
   });
 
-  it('should work with custom symbol', () => {
-    const wrapper = mount(<Snippet text={command} symbol=">" />);
+  it("should work with custom symbol", () => {
+    const wrapper = mount(<Snippet symbol=">" text={command} />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
 
-    const emptySymbolWrapper = mount(<Snippet text={command} symbol=" " />);
+    const emptySymbolWrapper = mount(<Snippet symbol=" " text={command} />);
+
     expect(emptySymbolWrapper.html()).toMatchSnapshot();
 
-    const emptySymbolWrapper2 = mount(<Snippet text={command} symbol="" />);
+    const emptySymbolWrapper2 = mount(<Snippet symbol="" text={command} />);
+
     expect(emptySymbolWrapper2.html()).toEqual(emptySymbolWrapper.html());
 
     expect(() => emptySymbolWrapper.unmount()).not.toThrow();
     expect(() => emptySymbolWrapper2.unmount()).not.toThrow();
   });
 
-  it('should work with custom toast', () => {
+  it("should work with custom toast", () => {
     document.execCommand = jest.fn();
-    const wrapper = mount(
-      <Snippet text={command} tooltipCopiedText="Code copied!" />
-    );
-    wrapper.find('.nextui-snippet-copy-button').at(0).simulate('click');
+    const wrapper = mount(<Snippet text={command} tooltipCopiedText="Code copied!" />);
+
+    wrapper.find(".nextui-snippet-copy-button").at(0).simulate("click");
     expect(document.execCommand).toHaveBeenCalled();
     (document.execCommand as jest.Mock).mockRestore();
   });
diff --git a/packages/react/src/snippet/index.ts b/packages/react/src/snippet/index.ts
index 5440866bc2..1daf268873 100644
--- a/packages/react/src/snippet/index.ts
+++ b/packages/react/src/snippet/index.ts
@@ -1,12 +1,12 @@
-import Snippet from './snippet';
+import Snippet from "./snippet";
 
-export type { SnippetProps } from './snippet';
-export type { SnippetPreVariantsProps } from './snippet.styles';
+export type {SnippetProps} from "./snippet";
+export type {SnippetPreVariantsProps} from "./snippet.styles";
 
 export {
   StyledSnippetPre,
   StyledSnippetCopyButton,
-  StyledSnippetCopyButtonIcon
-} from './snippet.styles';
+  StyledSnippetCopyButtonIcon,
+} from "./snippet.styles";
 
 export default Snippet;
diff --git a/packages/react/src/snippet/snippet-icon.tsx b/packages/react/src/snippet/snippet-icon.tsx
index 3466508fce..1eba5e5f95 100644
--- a/packages/react/src/snippet/snippet-icon.tsx
+++ b/packages/react/src/snippet/snippet-icon.tsx
@@ -1,7 +1,9 @@
-import * as React from 'react';
-import withDefaults from '../utils/with-defaults';
-import { StyledSnippetCopyButtonIcon } from './snippet.styles';
-import { CSS } from '../theme/stitches.config';
+import * as React from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {CSS} from "../theme/stitches.config";
+
+import {StyledSnippetCopyButtonIcon} from "./snippet.styles";
 
 interface Props {
   width?: number;
@@ -12,33 +14,31 @@ interface Props {
 
 const defaultProps = {
   width: 18,
-  height: 18
+  height: 18,
 };
 
 type NativeAttrs = Omit<React.SVGProps<SVGSVGElement>, keyof Props>;
 
-export type CategoryProps = Props &
-  typeof defaultProps &
-  NativeAttrs & { css?: CSS };
+export type CategoryProps = Props & typeof defaultProps & NativeAttrs & {css?: CSS};
 
-const Copy: React.FC<Props> = ({ size, fill, width, height, ...props }) => {
+const Copy: React.FC<Props> = ({size, fill, width, height, ...props}) => {
   return (
     <StyledSnippetCopyButtonIcon
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width}
       height={size || height}
       viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fill={fill}
         d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z"
+        fill={fill}
       />
     </StyledSnippetCopyButtonIcon>
   );
 };
 
-Copy.toString = () => '.nextui-snippet-copy-icon';
+Copy.toString = () => ".nextui-snippet-copy-icon";
 
 const MemoCopy = React.memo(Copy);
 
diff --git a/packages/react/src/snippet/snippet.styles.ts b/packages/react/src/snippet/snippet.styles.ts
index b4d866529d..18673624d3 100644
--- a/packages/react/src/snippet/snippet.styles.ts
+++ b/packages/react/src/snippet/snippet.styles.ts
@@ -1,142 +1,142 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import { sharedFocus } from '../theme/shared-css';
+import {styled, VariantProps} from "../theme/stitches.config";
+import {sharedFocus} from "../theme/shared-css";
 
-export const StyledSnippet = styled('div', {
-  display: 'flex',
-  position: 'relative',
-  width: 'initial',
-  maxWidth: '100%',
-  padding: 'calc($space$lg * 0.75) $space$lg',
-  br: '$lg',
-  bg: '$background',
+export const StyledSnippet = styled("div", {
+  display: "flex",
+  position: "relative",
+  width: "initial",
+  maxWidth: "100%",
+  padding: "calc($space$lg * 0.75) $space$lg",
+  br: "$lg",
+  bg: "$background",
   variants: {
     color: {
       default: {
-        $$snippetBorderColor: '$border',
-        $$snippetBgColor: '$background',
-        color: '$text'
+        $$snippetBorderColor: "$border",
+        $$snippetBgColor: "$background",
+        color: "$text",
       },
       primary: {
-        $$snippetBorderColor: '$border',
-        $$snippetBgColor: '$primary',
-        color: '$text'
+        $$snippetBorderColor: "$border",
+        $$snippetBgColor: "$primary",
+        color: "$text",
       },
       success: {
-        $$snippetBorderColor: '$success',
-        $$snippetBgColor: '$background',
-        color: '$success'
+        $$snippetBorderColor: "$success",
+        $$snippetBgColor: "$background",
+        color: "$success",
       },
       warning: {
-        $$snippetBorderColor: '$warning',
-        $$snippetBgColor: '$background',
-        color: '$warning'
+        $$snippetBorderColor: "$warning",
+        $$snippetBgColor: "$background",
+        color: "$warning",
       },
       error: {
-        $$snippetBorderColor: '$error',
-        $$snippetBgColor: '$background',
-        color: '$error'
+        $$snippetBorderColor: "$error",
+        $$snippetBgColor: "$background",
+        color: "$error",
       },
       secondary: {
-        $$snippetBorderColor: '$secondary',
-        $$snippetBgColor: '$background',
-        color: '$secondary'
+        $$snippetBorderColor: "$secondary",
+        $$snippetBgColor: "$background",
+        color: "$secondary",
       },
       invert: {
-        $$snippetBorderColor: '$foreground',
-        $$snippetBgColor: '$foreground',
-        color: '$background'
-      }
+        $$snippetBorderColor: "$foreground",
+        $$snippetBgColor: "$foreground",
+        color: "$background",
+      },
     },
     borderWeight: {
       light: {
-        $$borderWeight: '$light'
+        $$borderWeight: "$light",
       },
       normal: {
-        $$borderWeight: '$normal'
+        $$borderWeight: "$normal",
       },
       bold: {
-        $$borderWeight: '$bold'
+        $$borderWeight: "$bold",
       },
       extrabold: {
-        $$borderWeight: '$extrabold'
+        $$borderWeight: "$extrabold",
       },
       black: {
-        $$borderWeight: '$black'
-      }
+        $$borderWeight: "$black",
+      },
     },
     bordered: {
       true: {
-        border: '$$borderWeight solid $$snippetBorderColor'
-      }
+        border: "$$borderWeight solid $$snippetBorderColor",
+      },
     },
     filled: {
       true: {
-        backgroundColor: '$$snippetBgColor'
-      }
-    }
+        backgroundColor: "$$snippetBgColor",
+      },
+    },
   },
   defaultVariants: {
-    color: 'default',
-    borderWeight: 'normal',
-    filled: false
-  }
+    color: "default",
+    borderWeight: "normal",
+    filled: false,
+  },
 });
 
-export const StyledSnippetPre = styled('pre', {
+export const StyledSnippetPre = styled("pre", {
   margin: 0,
   padding: 0,
-  border: 'none',
+  border: "none",
   br: 0,
-  bgColor: 'transparent',
-  color: 'inherit',
-  fontSize: '$sm',
-  '*': {
+  bgColor: "transparent",
+  color: "inherit",
+  fontSize: "$sm",
+  "*": {
     margin: 0,
     padding: 0,
-    fontSize: 'inherit',
-    color: 'inherit'
+    fontSize: "inherit",
+    color: "inherit",
   },
   variants: {
     withCopyButton: {
       true: {
-        width: 'calc(100% - 2 * $lg)'
+        width: "calc(100% - 2 * $lg)",
       },
       false: {
-        width: '100%'
-      }
-    }
-  }
+        width: "100%",
+      },
+    },
+  },
 });
 
-export const StyledSnippetCopyButtonIcon = styled('svg', {});
+export const StyledSnippetCopyButtonIcon = styled("svg", {});
 
 export const StyledSnippetCopyButton = styled(
-  'button',
+  "button",
   {
-    display: 'inline-flex',
-    jc: 'center',
-    border: 'none',
-    ai: 'flex-start',
-    bg: 'transparent',
-    width: 'calc(2 * $space$lg)',
-    br: '$xs',
-    color: 'inherit',
-    transition: 'opacity 0.2s ease 0s',
-    cursor: 'pointer',
-    us: 'none',
-    '@motion': {
-      transition: 'none'
+    display: "inline-flex",
+    jc: "center",
+    border: "none",
+    ai: "flex-start",
+    bg: "transparent",
+    width: "calc(2 * $space$lg)",
+    br: "$xs",
+    color: "inherit",
+    transition: "opacity 0.2s ease 0s",
+    cursor: "pointer",
+    us: "none",
+    "@motion": {
+      transition: "none",
     },
-    '&:hover': {
-      opacity: '0.7'
+    "&:hover": {
+      opacity: "0.7",
     },
     [`& ${StyledSnippetCopyButtonIcon}`]: {
       path: {
-        fill: '$accents6'
-      }
-    }
+        fill: "$accents6",
+      },
+    },
   },
-  sharedFocus
+  sharedFocus,
 );
 
 export type SnippetVariantsProps = VariantProps<typeof StyledSnippet>;
diff --git a/packages/react/src/snippet/snippet.tsx b/packages/react/src/snippet/snippet.tsx
index b1d4e04ec5..fefc83cdc7 100644
--- a/packages/react/src/snippet/snippet.tsx
+++ b/packages/react/src/snippet/snippet.tsx
@@ -1,17 +1,19 @@
-import React, { useMemo, useState, useRef } from 'react';
-import Tooltip from '../tooltip';
-import withDefaults from '../utils/with-defaults';
-import { CopyTypes, TooltipColors } from '../utils/prop-types';
-import { CSS } from '../theme/stitches.config';
-import SnippetIcon from './snippet-icon';
-import useClipboard from '../use-clipboard';
+import React, {useMemo, useState, useRef} from "react";
+
+import Tooltip from "../tooltip";
+import withDefaults from "../utils/with-defaults";
+import {CopyTypes, TooltipColors} from "../utils/prop-types";
+import {CSS} from "../theme/stitches.config";
+import useClipboard from "../use-clipboard";
+import {__DEV__} from "../utils/assertion";
+
+import SnippetIcon from "./snippet-icon";
 import {
   StyledSnippet,
   StyledSnippetPre,
   StyledSnippetCopyButton,
-  SnippetVariantsProps
-} from './snippet.styles';
-import { __DEV__ } from '../utils/assertion';
+  SnippetVariantsProps,
+} from "./snippet.styles";
 
 interface Props {
   text?: string | string[];
@@ -25,12 +27,12 @@ interface Props {
 }
 
 const defaultProps = {
-  symbol: '$',
+  symbol: "$",
   showTooltip: true,
-  copy: 'default' as CopyTypes,
-  tooltipColor: 'default' as TooltipColors | string,
-  tooltipCopyText: 'Copy',
-  tooltipCopiedText: 'Copied'
+  copy: "default" as CopyTypes,
+  tooltipColor: "default" as TooltipColors | string,
+  tooltipCopyText: "Copy",
+  tooltipCopiedText: "Copied",
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -38,13 +40,14 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export type SnippetProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  SnippetVariantsProps & { css?: CSS };
+  SnippetVariantsProps & {css?: CSS};
 
 const textArrayToString = (text: string[]): string => {
   return text.reduce((pre, current) => {
     if (!current) return pre;
+
     return pre ? `${pre}\n${current}` : current;
-  }, '');
+  }, "");
 };
 
 const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = ({
@@ -61,28 +64,30 @@ const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = ({
 }) => {
   const [copied, setCopied] = useState(false);
 
-  const { copy } = useClipboard();
+  const {copy} = useClipboard();
   const ref = useRef<HTMLPreElement>(null);
   const isMultiLine = text && Array.isArray(text);
 
-  const showCopyIcon = useMemo(() => copyType !== 'prevent', [copyType]);
+  const showCopyIcon = useMemo(() => copyType !== "prevent", [copyType]);
 
   const childText = useMemo<string | undefined | null>(() => {
     if (isMultiLine) return textArrayToString(text as string[]);
     if (!children) return text as string;
-    if (!ref.current) return '';
+    if (!ref.current) return "";
+
     return ref.current.textContent;
   }, [ref.current, children, text]);
 
   const symbolBefore = useMemo(() => {
     const str = symbol.trim();
-    return str ? `${str} ` : '';
+
+    return str ? `${str} ` : "";
   }, [symbol]);
 
   const clickHandler = () => {
     if (!childText || !showCopyIcon) return;
     copy(childText);
-    if (copyType === 'slient') return;
+    if (copyType === "slient") return;
     setCopied(true);
   };
 
@@ -97,33 +102,33 @@ const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = ({
       {isMultiLine ? (
         (text as string[]).map((t, index) => (
           <StyledSnippetPre
+            key={`${index}-${t}`}
+            className="nextui-snippet-pre"
             css={{
-              '&:before': {
+              "&:before": {
                 content: symbolBefore,
-                us: 'none'
-              }
+                us: "none",
+              },
             }}
-            className="nextui-snippet-pre"
-            key={`${index}-${t}`}
           >
             {t}
           </StyledSnippetPre>
         ))
       ) : (
         <StyledSnippetPre
+          ref={ref}
+          className="nextui-snippet-pre"
           css={{
-            '&:before': {
+            "&:before": {
               content: symbolBefore,
-              us: 'none'
-            }
+              us: "none",
+            },
           }}
-          className="nextui-snippet-pre"
-          ref={ref}
         >
           {children || text}
         </StyledSnippetPre>
       )}
-      {showCopyIcon && copyType !== 'slient' ? (
+      {showCopyIcon && copyType !== "slient" ? (
         <Tooltip
           hideArrow
           rounded
@@ -131,19 +136,13 @@ const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = ({
           content={copied ? tooltipCopiedText : tooltipCopyText}
           onVisibleChange={handleTooltipVisibleChange}
         >
-          <StyledSnippetCopyButton
-            className="nextui-snippet-copy-button"
-            onClick={clickHandler}
-          >
+          <StyledSnippetCopyButton className="nextui-snippet-copy-button" onClick={clickHandler}>
             <SnippetIcon />
           </StyledSnippetCopyButton>
         </Tooltip>
       ) : (
-        copyType !== 'prevent' && (
-          <StyledSnippetCopyButton
-            className="nextui-snippet-copy-button"
-            onClick={clickHandler}
-          >
+        copyType !== "prevent" && (
+          <StyledSnippetCopyButton className="nextui-snippet-copy-button" onClick={clickHandler}>
             <SnippetIcon />
           </StyledSnippetCopyButton>
         )
@@ -153,10 +152,10 @@ const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = ({
 };
 
 if (__DEV__) {
-  Snippet.displayName = 'NextUI.Snippet';
+  Snippet.displayName = "NextUI.Snippet";
 }
 
-Snippet.toString = () => '.nextui-snippet';
+Snippet.toString = () => ".nextui-snippet";
 
 const MemoSnippet = React.memo(Snippet);
 
diff --git a/packages/react/src/spacer/__tests__/index.test.tsx b/packages/react/src/spacer/__tests__/index.test.tsx
index 6b0f6381a1..92d336a7be 100644
--- a/packages/react/src/spacer/__tests__/index.test.tsx
+++ b/packages/react/src/spacer/__tests__/index.test.tsx
@@ -1,42 +1,47 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Spacer from '../index';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('Spacer', () => {
-  it('should render correctly', () => {
+import Spacer from "../index";
+
+describe("Spacer", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Spacer />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support x and y', () => {
+  it("should support x and y", () => {
     const wrapper = mount(
       <div>
         <Spacer x={5} />
         <Spacer x={15} />
         <Spacer y={15} />
         <Spacer y={2} />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with float', () => {
+  it("should work with float", () => {
     const wrapper = mount(
       <div>
         <Spacer x={2.2} />
         <Spacer x={1.5} />
         <Spacer y={0.1} />
         <Spacer y={1.8} />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with inline mode', () => {
+  it("should work with inline mode", () => {
     const wrapper = mount(<Spacer inline />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
diff --git a/packages/react/src/spacer/index.ts b/packages/react/src/spacer/index.ts
index 85bfbc6122..c324fcfc2c 100644
--- a/packages/react/src/spacer/index.ts
+++ b/packages/react/src/spacer/index.ts
@@ -1,7 +1,7 @@
-import Spacer from './spacer';
-export type { SpacerProps } from './spacer';
+import Spacer from "./spacer";
+export type {SpacerProps} from "./spacer";
 
-export { StyledSpacer } from './spacer.styles';
-export type { SpacerVariantsProps } from './spacer.styles';
+export {StyledSpacer} from "./spacer.styles";
+export type {SpacerVariantsProps} from "./spacer.styles";
 
 export default Spacer;
diff --git a/packages/react/src/spacer/spacer.stories.tsx b/packages/react/src/spacer/spacer.stories.tsx
index fceab5b72f..a56d09496b 100644
--- a/packages/react/src/spacer/spacer.stories.tsx
+++ b/packages/react/src/spacer/spacer.stories.tsx
@@ -1,23 +1,25 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Spacer from './index';
-import useTheme from '../use-theme';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import useTheme from "../use-theme";
+
+import Spacer from "./index";
 
 export default {
-  title: 'Layout/Spacer',
-  component: Spacer
+  title: "Layout/Spacer",
+  component: Spacer,
 } as Meta;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Container = ({ children, vertical }: any) => (
+const Container = ({children, vertical}: any) => (
   <div
     style={{
-      display: 'flex',
-      flexDirection: vertical ? 'column' : 'row',
-      justifyContent: 'space-between',
-      width: '100%',
-      maxWidth: '50%',
-      minWidth: '50%'
+      display: "flex",
+      flexDirection: vertical ? "column" : "row",
+      justifyContent: "space-between",
+      width: "100%",
+      maxWidth: "50%",
+      minWidth: "50%",
     }}
   >
     {children}
@@ -25,14 +27,15 @@ const Container = ({ children, vertical }: any) => (
 );
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const SpacerContainer = ({ children }: any) => {
-  const { theme } = useTheme();
+const SpacerContainer = ({children}: any) => {
+  const {theme} = useTheme();
+
   return (
     <div
       style={{
-        width: '100%',
+        width: "100%",
         background: theme?.colors.primary.value,
-        borderRadius: '8px'
+        borderRadius: "8px",
       }}
     >
       {children}
diff --git a/packages/react/src/spacer/spacer.styles.ts b/packages/react/src/spacer/spacer.styles.ts
index 43f56db2f6..4479a2cbc6 100644
--- a/packages/react/src/spacer/spacer.styles.ts
+++ b/packages/react/src/spacer/spacer.styles.ts
@@ -1,20 +1,20 @@
-import { styled, VariantProps } from '../theme/stitches.config';
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledSpacer = styled('span', {
-  size: '1px',
+export const StyledSpacer = styled("span", {
+  size: "1px",
   variants: {
     inline: {
       true: {
-        display: 'inline-block'
+        display: "inline-block",
       },
       false: {
-        display: 'block'
-      }
-    }
+        display: "block",
+      },
+    },
   },
   defaultVariants: {
-    inline: false
-  }
+    inline: false,
+  },
 });
 
 export type SpacerVariantsProps = VariantProps<typeof StyledSpacer>;
diff --git a/packages/react/src/spacer/spacer.tsx b/packages/react/src/spacer/spacer.tsx
index 80ab74dc32..d9c7b5cac6 100644
--- a/packages/react/src/spacer/spacer.tsx
+++ b/packages/react/src/spacer/spacer.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
-import withDefaults from '../utils/with-defaults';
-import { getMargin } from '../utils/dimensions';
-import { CSS } from '../theme/stitches.config';
-import { StyledSpacer, SpacerVariantsProps } from './spacer.styles';
+import React from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {getMargin} from "../utils/dimensions";
+import {CSS} from "../theme/stitches.config";
+
+import {StyledSpacer, SpacerVariantsProps} from "./spacer.styles";
 
 interface Props {
   x?: number;
@@ -13,33 +15,31 @@ interface Props {
 
 const defaultProps = {
   x: 1,
-  y: 1
+  y: 1,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type SpacerProps = Props &
-  typeof defaultProps &
-  NativeAttrs &
-  SpacerVariantsProps;
+export type SpacerProps = Props & typeof defaultProps & NativeAttrs & SpacerVariantsProps;
 
-const Spacer: React.FC<SpacerProps> = ({ x, y, inline, css, ...props }) => {
+const Spacer: React.FC<SpacerProps> = ({x, y, inline, css, ...props}) => {
   const marginLeft = getMargin(x);
   const marginTop = getMargin(y);
+
   return (
     <StyledSpacer
+      aria-hidden="true"
       css={{
         marginLeft: `${marginLeft} !important`,
         marginTop: `${marginTop} !important`,
-        ...(css as any)
+        ...(css as any),
       }}
-      aria-hidden="true"
       {...props}
-    ></StyledSpacer>
+    />
   );
 };
 
-Spacer.toString = () => '.nextui-spacer';
+Spacer.toString = () => ".nextui-spacer";
 
 const MemoSpacer = React.memo(Spacer);
 
diff --git a/packages/react/src/switch/__tests__/index.test.tsx b/packages/react/src/switch/__tests__/index.test.tsx
index eceb29e471..3b177aff4d 100644
--- a/packages/react/src/switch/__tests__/index.test.tsx
+++ b/packages/react/src/switch/__tests__/index.test.tsx
@@ -1,114 +1,114 @@
-import React from 'react';
-import { mount, shallow, ReactWrapper } from 'enzyme';
-import Switch from '../index';
-import { nativeEvent, updateWrapper } from '../../../tests/utils';
+import React from "react";
+import {mount, shallow, ReactWrapper} from "enzyme";
+
+import Switch from "../index";
+import {nativeEvent, updateWrapper} from "../../../tests/utils";
 
 interface IconProps {
   className?: string;
 }
 
-const Icon: React.FC<IconProps> = ({ className = '' }) => (
-  <svg className={className} />
-);
+const Icon: React.FC<IconProps> = ({className = ""}) => <svg className={className} />;
 
 const expectSwitchIsChecked = (wrapper: ReactWrapper) => {
-  expect(wrapper.find('.nextui-switch-checked').at(0).length).not.toBe(0);
+  expect(wrapper.find(".nextui-switch-checked").at(0).length).not.toBe(0);
 };
 
 const expectSwitchIsUnChecked = (wrapper: ReactWrapper) => {
-  expect(wrapper.find('.nextui-switch-checked').at(0).length).toBe(0);
+  expect(wrapper.find(".nextui-switch-checked").at(0).length).toBe(0);
 };
 
 const getSwitchElement = (wrapper: ReactWrapper) => {
   return wrapper.find('[role="switch"]').at(0);
 };
 
-const expectSwitchToHaveARIAChecked = (
-  wrapper: ReactWrapper,
-  value: boolean
-) => {
-  expect(getSwitchElement(wrapper).props()['aria-checked']).toBe(value);
+const expectSwitchToHaveARIAChecked = (wrapper: ReactWrapper, value: boolean) => {
+  expect(getSwitchElement(wrapper).props()["aria-checked"]).toBe(value);
 };
 
-const expectSwitchToHaveARIADisabled = (
-  wrapper: ReactWrapper,
-  value: boolean
-) => {
-  expect(getSwitchElement(wrapper).props()['aria-disabled']).toBe(value);
+const expectSwitchToHaveARIADisabled = (wrapper: ReactWrapper, value: boolean) => {
+  expect(getSwitchElement(wrapper).props()["aria-disabled"]).toBe(value);
 };
 
-describe('Switch', () => {
-  it('should render correctly', () => {
+describe("Switch", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Switch />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support square and circle', () => {
+  it("should support square and circle", () => {
     const circle = shallow(<Switch />);
+
     expect(() => circle.unmount()).not.toThrow();
     const square = shallow(<Switch squared />);
+
     expect(() => square.unmount()).not.toThrow();
   });
 
-  it('should render correctly with an icon', () => {
+  it("should render correctly with an icon", () => {
     const wrapper = mount(<Switch icon={<Icon />} />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render correctly with an iconOn', () => {
+  it("should render correctly with an iconOn", () => {
     const wrapper = mount(<Switch iconOn={<Icon />} />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render correctly with an iconOff', () => {
+  it("should render correctly with an iconOff", () => {
     const wrapper = mount(<Switch iconOff={<Icon />} />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render correctly with both icons on/off', () => {
-    const wrapper = mount(<Switch iconOn={<Icon />} iconOff={<Icon />} />);
+  it("should render correctly with both icons on/off", () => {
+    const wrapper = mount(<Switch iconOff={<Icon />} iconOn={<Icon />} />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should trigger events when switch changed and change icons on/off', async () => {
+  it("should trigger events when switch changed and change icons on/off", async () => {
     const wrapper = mount(
       <Switch
-        initialChecked={false}
-        iconOn={<Icon className="icon-on" />}
         iconOff={<Icon className="icon-off" />}
-      />
+        iconOn={<Icon className="icon-on" />}
+        initialChecked={false}
+      />,
     );
 
-    let icon = wrapper.find('.icon-off').at(0).getDOMNode() as SVGSVGElement;
+    let icon = wrapper.find(".icon-off").at(0).getDOMNode() as SVGSVGElement;
+
     expect(icon).not.toBeNull();
 
-    wrapper.find('input').simulate('change', {
+    wrapper.find("input").simulate("change", {
       ...nativeEvent,
-      target: { checked: true }
+      target: {checked: true},
     });
     await updateWrapper(wrapper);
     expectSwitchIsChecked(wrapper);
 
-    icon = wrapper.find('.icon-on').at(0).getDOMNode() as SVGSVGElement;
+    icon = wrapper.find(".icon-on").at(0).getDOMNode() as SVGSVGElement;
     expect(icon).not.toBeNull();
   });
 
-  it('should throw error when icon is left over', () => {
-    let errorMessage = '';
-    const errorSpy = jest
-      .spyOn(console, 'error')
-      .mockImplementation((msg) => (errorMessage = msg));
+  it("should throw error when icon is left over", () => {
+    let errorMessage = "";
+    const errorSpy = jest.spyOn(console, "error").mockImplementation((msg) => (errorMessage = msg));
+
     mount(<Switch icon={<Icon />} iconOn={<Icon />} />);
     expect(errorMessage).toContain('Remove props "icon"');
     errorSpy.mockRestore();
   });
 
-  it('should work with different colors', () => {
+  it("should work with different colors", () => {
     const wrapper = mount(
       <div>
         <Switch color="primary" />
@@ -116,13 +116,14 @@ describe('Switch', () => {
         <Switch color="success" />
         <Switch color="warning" />
         <Switch color="error" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with different sizes', () => {
+  it("should work with different sizes", () => {
     const wrapper = mount(
       <div>
         <Switch size="xs" />
@@ -130,38 +131,38 @@ describe('Switch', () => {
         <Switch size="md" />
         <Switch size="lg" />
         <Switch size="xl" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should set switch follow checked prop', async () => {
+  it("should set switch follow checked prop", async () => {
     const wrapper = mount(<Switch initialChecked={true} />);
+
     expectSwitchIsChecked(wrapper);
     expectSwitchToHaveARIAChecked(wrapper, true);
 
-    wrapper.setProps({ checked: false });
+    wrapper.setProps({checked: false});
     await updateWrapper(wrapper);
     expectSwitchIsUnChecked(wrapper);
     expectSwitchToHaveARIAChecked(wrapper, false);
 
-    wrapper.setProps({ checked: true });
+    wrapper.setProps({checked: true});
     await updateWrapper(wrapper);
     expectSwitchIsChecked(wrapper);
     expectSwitchToHaveARIAChecked(wrapper, true);
   });
 
-  it('should trigger events when switch changed', async () => {
+  it("should trigger events when switch changed", async () => {
     let checked = false;
-    const changeHandler = jest
-      .fn()
-      .mockImplementation((e) => (checked = e.target.checked));
+    const changeHandler = jest.fn().mockImplementation((e) => (checked = e.target.checked));
     const wrapper = mount(<Switch onChange={changeHandler} />);
 
-    wrapper.find('input').simulate('change', {
+    wrapper.find("input").simulate("change", {
       ...nativeEvent,
-      target: { checked: true }
+      target: {checked: true},
     });
     await updateWrapper(wrapper);
     expectSwitchIsChecked(wrapper);
@@ -171,15 +172,15 @@ describe('Switch', () => {
     expect(checked).toEqual(true);
   });
 
-  it('should ignore events when switch disabled', async () => {
+  it("should ignore events when switch disabled", async () => {
     const changeHandler = jest.fn();
-    const wrapper = mount(<Switch onChange={changeHandler} disabled />);
+    const wrapper = mount(<Switch disabled onChange={changeHandler} />);
 
     expectSwitchToHaveARIADisabled(wrapper, true);
 
-    wrapper.find('input').simulate('change', {
+    wrapper.find("input").simulate("change", {
       ...nativeEvent,
-      target: { checked: true }
+      target: {checked: true},
     });
     await updateWrapper(wrapper);
     expectSwitchIsUnChecked(wrapper);
diff --git a/packages/react/src/switch/index.ts b/packages/react/src/switch/index.ts
index 94d840c7d2..74c2d7661e 100644
--- a/packages/react/src/switch/index.ts
+++ b/packages/react/src/switch/index.ts
@@ -1,15 +1,12 @@
-import Switch from './switch';
+import Switch from "./switch";
 
-export type { SwitchProps, SwitchEvent } from './switch';
+export type {SwitchProps, SwitchEvent} from "./switch";
 export {
   StyledSwitchContainer,
   StyledSwitchInput,
   StyledSwitchCircle,
-  StyledSwitch
-} from './switch.styles';
-export type {
-  SwitchVariantsProps,
-  SwitchContainerVariantsProps
-} from './switch.styles';
+  StyledSwitch,
+} from "./switch.styles";
+export type {SwitchVariantsProps, SwitchContainerVariantsProps} from "./switch.styles";
 
 export default Switch;
diff --git a/packages/react/src/switch/switch.stories.tsx b/packages/react/src/switch/switch.stories.tsx
index dbc010ba2a..df73b84ada 100644
--- a/packages/react/src/switch/switch.stories.tsx
+++ b/packages/react/src/switch/switch.stories.tsx
@@ -1,16 +1,18 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Switch from './index';
-import { Moon, Sun, Lock, Notification } from '../utils/icons';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Moon, Sun, Lock, Notification} from "../utils/icons";
+
+import Switch from "./index";
 
 export default {
-  title: 'Inputs/Switch',
+  title: "Inputs/Switch",
   component: Switch,
-  onChange: { action: 'changed' }
+  onChange: {action: "changed"},
 } as Meta;
 
 export const Default = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
+  <div style={{display: "flex", flexDirection: "column"}}>
     <Switch />
     <br />
     <Switch initialChecked />
@@ -18,31 +20,31 @@ export const Default = () => (
 );
 
 export const Colors = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
-    <Switch color="primary" checked={true}>
+  <div style={{display: "flex", flexDirection: "column"}}>
+    <Switch checked={true} color="primary">
       Primary
     </Switch>
     <br />
-    <Switch color="secondary" checked={true}>
+    <Switch checked={true} color="secondary">
       Secondary
     </Switch>
     <br />
-    <Switch color="success" checked={true}>
+    <Switch checked={true} color="success">
       Success
     </Switch>
     <br />
-    <Switch color="warning" checked={true}>
+    <Switch checked={true} color="warning">
       Warning
     </Switch>
     <br />
-    <Switch color="error" checked={true}>
+    <Switch checked={true} color="error">
       Error
     </Switch>
   </div>
 );
 
 export const Sizes = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
+  <div style={{display: "flex", flexDirection: "column"}}>
     <Switch initialChecked size="xs" />
     <br />
     <Switch size="sm" />
@@ -56,43 +58,43 @@ export const Sizes = () => (
 );
 
 export const Squared = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
-    <Switch squared color="primary" checked={true}>
+  <div style={{display: "flex", flexDirection: "column"}}>
+    <Switch squared checked={true} color="primary">
       Primary
     </Switch>
     <br />
-    <Switch squared color="secondary" checked={true}>
+    <Switch squared checked={true} color="secondary">
       Secondary
     </Switch>
     <br />
-    <Switch squared color="success" checked={true}>
+    <Switch squared checked={true} color="success">
       Success
     </Switch>
     <br />
-    <Switch squared color="warning" checked={true}>
+    <Switch squared checked={true} color="warning">
       Warning
     </Switch>
     <br />
-    <Switch squared color="error" checked={true}>
+    <Switch squared checked={true} color="error">
       Error
     </Switch>
   </div>
 );
 
 export const Disabled = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
+  <div style={{display: "flex", flexDirection: "column"}}>
     <Switch disabled />
     <br />
-    <Switch initialChecked disabled />
+    <Switch disabled initialChecked />
   </div>
 );
 
 export const Icons = () => {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <Switch size="xl" icon={<Lock />} />
-      <Switch size="xl" icon={<Notification />} />
-      <Switch size="xl" iconOn={<Sun />} iconOff={<Moon />} />
+    <div style={{display: "flex", flexDirection: "column"}}>
+      <Switch icon={<Lock />} size="xl" />
+      <Switch icon={<Notification />} size="xl" />
+      <Switch iconOff={<Moon />} iconOn={<Sun />} size="xl" />
     </div>
   );
 };
diff --git a/packages/react/src/switch/switch.styles.ts b/packages/react/src/switch/switch.styles.ts
index 24a159afe7..929b4bc008 100644
--- a/packages/react/src/switch/switch.styles.ts
+++ b/packages/react/src/switch/switch.styles.ts
@@ -1,222 +1,222 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import { sharedFocus, sharedVisuallyHidden } from '../theme/shared-css';
+import {styled, VariantProps} from "../theme/stitches.config";
+import {sharedFocus, sharedVisuallyHidden} from "../theme/shared-css";
 
-export const StyledSwitchContainer = styled('label', {
-  WebkitTapHighlightColor: 'transparent',
-  d: 'inline-block',
-  verticalAlign: 'center',
-  whiteSpace: 'nowrap',
-  us: 'none',
-  transition: '$default',
-  padding: '$1 0',
-  position: 'relative',
-  cursor: 'pointer',
-  '@motion': {
-    transition: 'none'
+export const StyledSwitchContainer = styled("label", {
+  WebkitTapHighlightColor: "transparent",
+  d: "inline-block",
+  verticalAlign: "center",
+  whiteSpace: "nowrap",
+  us: "none",
+  transition: "$default",
+  padding: "$1 0",
+  position: "relative",
+  cursor: "pointer",
+  "@motion": {
+    transition: "none",
   },
   variants: {
     color: {
       default: {
-        $$switchColor: '$colors$primary',
-        $$switchColorShadow: '$colors$primaryShadow',
-        $$switchColorHover: '$colors$primarySolidHover'
+        $$switchColor: "$colors$primary",
+        $$switchColorShadow: "$colors$primaryShadow",
+        $$switchColorHover: "$colors$primarySolidHover",
       },
       primary: {
-        $$switchColor: '$colors$primary',
-        $$switchColorShadow: '$colors$primaryShadow',
-        $$switchColorHover: '$colors$primarySolidHover'
+        $$switchColor: "$colors$primary",
+        $$switchColorShadow: "$colors$primaryShadow",
+        $$switchColorHover: "$colors$primarySolidHover",
       },
       secondary: {
-        $$switchColor: '$colors$secondary',
-        $$switchColorShadow: '$colors$secondaryShadow',
-        $$switchColorHover: '$colors$secondarySolidHover'
+        $$switchColor: "$colors$secondary",
+        $$switchColorShadow: "$colors$secondaryShadow",
+        $$switchColorHover: "$colors$secondarySolidHover",
       },
       success: {
-        $$switchColor: '$colors$success',
-        $$switchColorShadow: '$colors$successShadow',
-        $$switchColorHover: '$colors$successSolidHover'
+        $$switchColor: "$colors$success",
+        $$switchColorShadow: "$colors$successShadow",
+        $$switchColorHover: "$colors$successSolidHover",
       },
       warning: {
-        $$switchColor: '$colors$warning',
-        $$switchColorShadow: '$colors$warningShadow',
-        $$switchColorHover: '$colors$warningSolidHover'
+        $$switchColor: "$colors$warning",
+        $$switchColorShadow: "$colors$warningShadow",
+        $$switchColorHover: "$colors$warningSolidHover",
       },
       error: {
-        $$switchColor: '$colors$error',
-        $$switchColorShadow: '$colors$errorShadow',
-        $$switchColorHover: '$colors$errorSolidHover'
-      }
+        $$switchColor: "$colors$error",
+        $$switchColorShadow: "$colors$errorShadow",
+        $$switchColorHover: "$colors$errorSolidHover",
+      },
     },
     size: {
       xs: {
-        $$switchWidth: '$space$12',
-        $$switchHeight: '$space$9',
-        width: ' $$switchWidth',
-        maxWidth: '$$switchWidth',
-        height: '$$switchHeight'
+        $$switchWidth: "$space$12",
+        $$switchHeight: "$space$9",
+        width: " $$switchWidth",
+        maxWidth: "$$switchWidth",
+        height: "$$switchHeight",
       },
       sm: {
-        $$switchWidth: '$space$14',
-        $$switchHeight: '$space$10',
-        width: '$$switchWidth',
-        maxWidth: '$$switchWidth',
-        height: '$$switchHeight'
+        $$switchWidth: "$space$14",
+        $$switchHeight: "$space$10",
+        width: "$$switchWidth",
+        maxWidth: "$$switchWidth",
+        height: "$$switchHeight",
       },
       md: {
-        $$switchWidth: '$space$15',
-        $$switchHeight: '$space$11',
-        width: '$$switchWidth',
-        maxWidth: '$$switchWidth',
-        height: '$$switchHeight'
+        $$switchWidth: "$space$15",
+        $$switchHeight: "$space$11",
+        width: "$$switchWidth",
+        maxWidth: "$$switchWidth",
+        height: "$$switchHeight",
       },
       lg: {
-        $$switchWidth: '$space$17',
-        $$switchHeight: '$space$12',
-        width: '$$switchWidth',
-        maxWidth: '$$switchWidth',
-        height: '$$switchHeight'
+        $$switchWidth: "$space$17",
+        $$switchHeight: "$space$12",
+        width: "$$switchWidth",
+        maxWidth: "$$switchWidth",
+        height: "$$switchHeight",
       },
       xl: {
-        $$switchWidth: '$space$18',
-        $$switchHeight: '$space$13',
-        width: '$$switchWidth',
-        maxWidth: '$$switchWidth',
-        height: '$$switchHeight'
-      }
+        $$switchWidth: "$space$18",
+        $$switchHeight: "$space$13",
+        width: "$$switchWidth",
+        maxWidth: "$$switchWidth",
+        height: "$$switchHeight",
+      },
     },
     borderWeight: {
       light: {
-        $$switchBorderW: '$borderWeights$light'
+        $$switchBorderW: "$borderWeights$light",
       },
       normal: {
-        $$switchBorderW: '$borderWeights$normal'
+        $$switchBorderW: "$borderWeights$normal",
       },
       bold: {
-        $$switchBorderW: '$borderWeights$bold'
+        $$switchBorderW: "$borderWeights$bold",
       },
       extrabold: {
-        $$switchBorderW: '$borderWeights$extrabold'
+        $$switchBorderW: "$borderWeights$extrabold",
       },
       black: {
-        $$switchBorderW: '$borderWeights$black'
-      }
+        $$switchBorderW: "$borderWeights$black",
+      },
     },
     disabled: {
       true: {
-        cursor: 'not-allowed'
-      }
+        cursor: "not-allowed",
+      },
     },
     animated: {
       false: {
-        transition: 'none'
-      }
-    }
+        transition: "none",
+      },
+    },
   },
   defaultVariants: {
-    color: 'default',
-    size: 'md',
-    borderWeight: 'normal'
-  }
+    color: "default",
+    size: "md",
+    borderWeight: "normal",
+  },
 });
 
-export const StyledSwitchInput = styled('input', {}, sharedVisuallyHidden);
+export const StyledSwitchInput = styled("input", {}, sharedVisuallyHidden);
 
-export const StyledSwitchCircle = styled('span', {
-  position: 'absolute',
-  display: 'flex',
-  size: 'calc($$switchHeight * 0.7)',
-  jc: 'center',
-  ai: 'center',
-  top: '50%',
-  transform: 'translateY(-50%)',
-  left: 'calc($$switchWidth / 15)',
-  transition: 'left 0.25s ease, width 0.2s ease',
-  bg: '$background',
-  br: '$pill',
-  '& svg': {
-    bg: 'transparent',
-    size: 'calc($$switchHeight * 0.44)'
+export const StyledSwitchCircle = styled("span", {
+  position: "absolute",
+  display: "flex",
+  size: "calc($$switchHeight * 0.7)",
+  jc: "center",
+  ai: "center",
+  top: "50%",
+  transform: "translateY(-50%)",
+  left: "calc($$switchWidth / 15)",
+  transition: "left 0.25s ease, width 0.2s ease",
+  bg: "$background",
+  br: "$pill",
+  "& svg": {
+    bg: "transparent",
+    size: "calc($$switchHeight * 0.44)",
+  },
+  "@motion": {
+    transition: "none",
   },
-  '@motion': {
-    transition: 'none'
-  }
 });
 
 export const StyledSwitch = styled(
-  'div',
+  "div",
   {
     opacity: 1,
-    width: '$$switchWidth',
-    height: '$$switchHeight',
-    transition: '$default',
-    position: 'relative',
-    overflow: 'hidden',
+    width: "$$switchWidth",
+    height: "$$switchHeight",
+    transition: "$default",
+    position: "relative",
+    overflow: "hidden",
     padding: 0,
-    br: '$pill',
-    bg: '$accents2',
-    '@motion': {
-      transition: 'none'
+    br: "$pill",
+    bg: "$accents2",
+    "@motion": {
+      transition: "none",
     },
     variants: {
       checked: {
         true: {
-          bg: '$$switchColor',
+          bg: "$$switchColor",
           [`& ${StyledSwitchCircle}`]: {
-            left: 'calc(100% - ($$switchWidth / 15) - $$switchHeight * 0.7)'
+            left: "calc(100% - ($$switchWidth / 15) - $$switchHeight * 0.7)",
           },
-          '&:hover:not(&:active)': {
-            bg: '$$switchColorHover'
-          }
-        }
+          "&:hover:not(&:active)": {
+            bg: "$$switchColorHover",
+          },
+        },
       },
       bordered: {
         true: {
-          bg: 'transparent',
-          border: '$$switchBorderW solid $border',
-          '&:hover': {
-            borderColor: '$$switchColor'
+          bg: "transparent",
+          border: "$$switchBorderW solid $border",
+          "&:hover": {
+            borderColor: "$$switchColor",
           },
           [`& ${StyledSwitchCircle}`]: {
-            left: 'calc(($$switchWidth / 15) - ($$switchBorderW / 2))',
-            bg: '$accents2'
-          }
-        }
+            left: "calc(($$switchWidth / 15) - ($$switchBorderW / 2))",
+            bg: "$accents2",
+          },
+        },
       },
       squared: {
         true: {
-          br: '2px',
+          br: "2px",
           [`& ${StyledSwitchCircle}`]: {
-            br: '2px'
-          }
-        }
+            br: "2px",
+          },
+        },
       },
       shadow: {
-        true: {}
+        true: {},
       },
       disabled: {
         true: {
-          borderColor: '$accents2',
-          bg: '$accents2',
+          borderColor: "$accents2",
+          bg: "$accents2",
           [`& ${StyledSwitchCircle}`]: {
-            bg: '$accents4'
-          }
-        }
+            bg: "$accents4",
+          },
+        },
       },
       animated: {
         true: {
-          '&:active': {
+          "&:active": {
             [`& ${StyledSwitchCircle}`]: {
-              width: 'calc($$switchHeight * 0.7 + ($$switchWidth / 10))'
-            }
-          }
+              width: "calc($$switchHeight * 0.7 + ($$switchWidth / 10))",
+            },
+          },
         },
         false: {
-          transition: 'none',
+          transition: "none",
           [`& ${StyledSwitchCircle}`]: {
-            transition: 'none'
-          }
-        }
-      }
+            transition: "none",
+          },
+        },
+      },
     },
     compoundVariants: [
       {
@@ -224,70 +224,68 @@ export const StyledSwitch = styled(
         checked: true,
         disabled: true,
         css: {
-          bg: '$accents3',
+          bg: "$accents3",
           [`& ${StyledSwitchCircle}`]: {
-            bg: '$accents0'
+            bg: "$accents0",
+          },
+          "&:hover:not(&:active)": {
+            bg: "$accents4",
           },
-          '&:hover:not(&:active)': {
-            bg: '$accents4'
-          }
-        }
+        },
       },
       // shadow && checked
       {
         shadow: true,
         checked: true,
         css: {
-          normalShadowVar: '$$switchColorShadow'
-        }
+          normalShadowVar: "$$switchColorShadow",
+        },
       },
       // animated && !checked
       {
         animated: true,
         checked: false,
         css: {
-          '&:active': {
+          "&:active": {
             [`& ${StyledSwitchCircle}`]: {
-              left: 'calc($$switchWidth / 7.5)'
-            }
-          }
-        }
+              left: "calc($$switchWidth / 7.5)",
+            },
+          },
+        },
       },
       // animated && checked
       {
         animated: true,
         checked: true,
         css: {
-          '&:active': {
+          "&:active": {
             [`& ${StyledSwitchCircle}`]: {
-              left: 'calc(100% - ($$switchWidth / 5) - $$switchHeight * 0.7)'
-            }
-          }
-        }
+              left: "calc(100% - ($$switchWidth / 5) - $$switchHeight * 0.7)",
+            },
+          },
+        },
       },
       // checked && bordered
       {
         checked: true,
         bordered: true,
         css: {
-          bg: '$$switchColor',
-          border: '$$switchBorderW solid transparent',
-          '&:hover:not(&:active)': {
-            borderColor: 'transparent'
+          bg: "$$switchColor",
+          border: "$$switchBorderW solid transparent",
+          "&:hover:not(&:active)": {
+            borderColor: "transparent",
           },
           [`& ${StyledSwitchCircle}`]: {
-            left: 'calc(100% - ($$switchWidth / 15) - $$switchHeight * 0.7 + ($$switchBorderW / 2))',
-            bg: '$background'
-          }
-        }
-      }
-    ]
+            left: "calc(100% - ($$switchWidth / 15) - $$switchHeight * 0.7 + ($$switchBorderW / 2))",
+            bg: "$background",
+          },
+        },
+      },
+    ],
   },
-  sharedFocus
+  sharedFocus,
 );
 
 // types
 export type SwitchVariantsProps = VariantProps<typeof StyledSwitch>;
-export type SwitchContainerVariantsProps = VariantProps<
-  typeof StyledSwitchContainer
->;
+export type SwitchContainerVariantsProps = VariantProps<typeof StyledSwitchContainer>;
diff --git a/packages/react/src/switch/switch.tsx b/packages/react/src/switch/switch.tsx
index 1209a77776..a9ac2f07e5 100644
--- a/packages/react/src/switch/switch.tsx
+++ b/packages/react/src/switch/switch.tsx
@@ -1,17 +1,19 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import withDefaults from '../utils/with-defaults';
-import useWarning from '../use-warning';
-import useKeyboard, { KeyCode } from '../use-keyboard';
-import { CSS } from '../theme/stitches.config';
+import React, {useCallback, useEffect, useMemo, useState} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import {warn} from "../utils/console";
+import useKeyboard, {KeyCode} from "../use-keyboard";
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+
 import {
   StyledSwitch,
   StyledSwitchContainer,
   StyledSwitchInput,
   StyledSwitchCircle,
-  SwitchContainerVariantsProps
-} from './switch.styles';
-import clsx from '../utils/clsx';
-import { __DEV__ } from '../utils/assertion';
+  SwitchContainerVariantsProps,
+} from "./switch.styles";
 
 interface SwitchEventTarget {
   checked: boolean;
@@ -47,16 +49,16 @@ const defaultProps = {
   squared: false,
   animated: true,
   preventDefault: true,
-  initialChecked: false
+  initialChecked: false,
 };
 
 type NativeAttrs = Omit<React.LabelHTMLAttributes<unknown>, keyof Props>;
 export type SwitchProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  SwitchContainerVariantsProps & { css?: CSS };
+  SwitchContainerVariantsProps & {css?: CSS};
 
-const preClass = 'nextui-switch';
+const preClass = "nextui-switch";
 
 const Switch: React.FC<SwitchProps> = ({
   initialChecked,
@@ -76,7 +78,7 @@ const Switch: React.FC<SwitchProps> = ({
   const [selfChecked, setSelfChecked] = useState<boolean>(initialChecked);
 
   if (icon && __DEV__ && (iconOn || iconOff)) {
-    useWarning('Remove props "icon" if iconOn or iconOff exists.', 'Switch');
+    warn('Remove props "icon" if iconOn or iconOff exists.', "Switch");
   }
 
   const changeHandle = useCallback(
@@ -84,37 +86,39 @@ const Switch: React.FC<SwitchProps> = ({
       if (disabled) return;
       const selfEvent: SwitchEvent = {
         target: {
-          checked: !selfChecked
+          checked: !selfChecked,
         },
         stopPropagation: ev.stopPropagation,
         preventDefault: ev.preventDefault,
-        nativeEvent: ev
+        nativeEvent: ev,
       };
 
       setSelfChecked(!selfChecked);
       onChange && onChange(selfEvent);
     },
-    [disabled, selfChecked, onChange]
+    [disabled, selfChecked, onChange],
   );
 
-  const { bindings } = useKeyboard(
+  const {bindings} = useKeyboard(
     (event: any) => {
       changeHandle(event);
     },
     [KeyCode.Enter, KeyCode.Space],
     {
       disableGlobalEvent: true,
-      preventDefault
-    }
+      preventDefault,
+    },
   );
 
   const circleIcon = useMemo(() => {
     const hasIcon = icon || iconOn || iconOff;
     const hasIconOn = Boolean(iconOn);
     const hasIconOff = Boolean(iconOff);
+
     if (!hasIcon) return null;
     if (hasIconOn && selfChecked) return iconOn;
     if (hasIconOff && !selfChecked) return iconOff;
+
     return hasIcon;
   }, [selfChecked, icon, iconOn, iconOff]);
 
@@ -124,52 +128,45 @@ const Switch: React.FC<SwitchProps> = ({
   }, [checked]);
 
   const getState = useMemo(() => {
-    return selfChecked ? 'checked' : 'unchecked';
+    return selfChecked ? "checked" : "unchecked";
   }, [selfChecked]);
 
   return (
-    <StyledSwitchContainer
-      data-state={getState}
-      disabled={disabled}
-      animated={animated}
-      {...props}
-    >
+    <StyledSwitchContainer animated={animated} data-state={getState} disabled={disabled} {...props}>
       <StyledSwitchInput
-        tabIndex={-1}
-        type="checkbox"
+        checked={selfChecked}
         className={clsx(`${preClass}-input`)}
         data-state={getState}
         disabled={disabled}
-        checked={selfChecked}
+        tabIndex={-1}
+        type="checkbox"
         onChange={changeHandle}
       />
       <StyledSwitch
-        role="switch"
-        tabIndex={disabled ? -1 : 0}
-        checked={selfChecked}
+        animated={animated}
         aria-checked={selfChecked}
         aria-disabled={disabled}
-        animated={animated}
-        disabled={disabled}
-        squared={squared}
         bordered={bordered}
-        shadow={shadow}
-        data-state={getState}
+        checked={selfChecked}
         className={clsx(preClass, `${preClass}--${getState}`, {
           [`${preClass}-checked`]: selfChecked,
-          [`${preClass}-disabled`]: disabled
+          [`${preClass}-disabled`]: disabled,
         })}
+        data-state={getState}
+        disabled={disabled}
+        role="switch"
+        shadow={shadow}
+        squared={squared}
+        tabIndex={disabled ? -1 : 0}
         {...bindings}
       >
-        <StyledSwitchCircle className={`${preClass}-circle`}>
-          {circleIcon}
-        </StyledSwitchCircle>
+        <StyledSwitchCircle className={`${preClass}-circle`}>{circleIcon}</StyledSwitchCircle>
       </StyledSwitch>
     </StyledSwitchContainer>
   );
 };
 
-Switch.toString = () => '.nextui-switch';
+Switch.toString = () => ".nextui-switch";
 
 const MemoSwitch = React.memo(Switch);
 
diff --git a/packages/react/src/table/__tests__/index.test.tsx b/packages/react/src/table/__tests__/index.test.tsx
index ef8bf77639..a492e5a945 100644
--- a/packages/react/src/table/__tests__/index.test.tsx
+++ b/packages/react/src/table/__tests__/index.test.tsx
@@ -1,22 +1,23 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Table from '../index';
+import React from "react";
+import {mount} from "enzyme";
+
+import Table from "../index";
 
 const STITCHES_FACTOR = 2;
 
 const columns = [
-  { name: 'Foo', key: 'foo' },
-  { name: 'Bar', key: 'bar' },
-  { name: 'Baz', key: 'baz' }
+  {name: "Foo", key: "foo"},
+  {name: "Bar", key: "bar"},
+  {name: "Baz", key: "baz"},
 ];
 
 let items = [
-  { test: 'Test 1', foo: 'Foo 1', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1' },
-  { test: 'Test 2', foo: 'Foo 2', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2' }
+  {test: "Test 1", foo: "Foo 1", bar: "Bar 1", yay: "Yay 1", baz: "Baz 1"},
+  {test: "Test 2", foo: "Foo 2", bar: "Bar 2", yay: "Yay 2", baz: "Baz 2"},
 ];
 
-describe('Table', () => {
-  it('should render correctly', () => {
+describe("Table", () => {
+  it("should render correctly", () => {
     const wrapper = mount(
       <Table aria-label="Test example table">
         <Table.Header>
@@ -31,13 +32,14 @@ describe('Table', () => {
             <Table.Cell>6/7/2020</Table.Cell>
           </Table.Row>
         </Table.Body>
-      </Table>
+      </Table>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render a static table', () => {
+  it("should render a static table", () => {
     const wrapper = mount(
       <Table aria-label="Static Table">
         <Table.Header>
@@ -52,45 +54,48 @@ describe('Table', () => {
             <Table.Cell>Baz 1</Table.Cell>
           </Table.Row>
         </Table.Body>
-      </Table>
+      </Table>,
     );
 
     const table = wrapper.find('[role="grid"]').at(0);
-    expect(table.props()['aria-label']).toBe('Static Table');
+
+    expect(table.props()["aria-label"]).toBe("Static Table");
     expect(table.find('[role="rowgroup"]').at(0).length).not.toBeNull();
     expect(table.find('[role="rowgroup"]').at(1).length).not.toBeNull();
 
     // get all headers
     const headers = table.find('[role="columnheader"]');
+
     expect(headers.length).toBe(3 * STITCHES_FACTOR); // is multiplied by 2 because of the stitches components
 
     headers.forEach((header) => {
-      expect(header.props()['aria-sort']).toBeFalsy();
-      expect(header.props()['aria-describedby']).toBeFalsy();
+      expect(header.props()["aria-sort"]).toBeFalsy();
+      expect(header.props()["aria-describedby"]).toBeFalsy();
     });
 
-    expect(headers.at(0 * STITCHES_FACTOR).text()).toBe('Foo');
-    expect(headers.at(1 * STITCHES_FACTOR).text()).toBe('Bar');
-    expect(headers.at(2 * STITCHES_FACTOR).text()).toBe('Baz');
+    expect(headers.at(0 * STITCHES_FACTOR).text()).toBe("Foo");
+    expect(headers.at(1 * STITCHES_FACTOR).text()).toBe("Bar");
+    expect(headers.at(2 * STITCHES_FACTOR).text()).toBe("Baz");
 
-    const bodyRowGroup = table
-      .find('[role="rowgroup"]')
-      .at(1 * STITCHES_FACTOR);
+    const bodyRowGroup = table.find('[role="rowgroup"]').at(1 * STITCHES_FACTOR);
 
     // get all rows
     const rows = bodyRowGroup.find('[role="row"]');
+
     expect(rows.length).toBe(2);
 
     // get body first cell (rowheader)
     const bodyFirstCell = rows.at(0).find('[role="rowheader"]').at(0);
-    expect(bodyFirstCell.text()).toBe('Foo 1');
+
+    expect(bodyFirstCell.text()).toBe("Foo 1");
 
     // get all cells
     const cells = rows.at(0).find('[role="gridcell"]');
+
     expect(cells.length).toBe(2 * STITCHES_FACTOR);
   });
 
-  it('should render a table with selection', () => {
+  it("should render a table with selection", () => {
     const wrapper = mount(
       <Table aria-label="Table with selection" selectionMode="multiple">
         <Table.Header>
@@ -105,34 +110,37 @@ describe('Table', () => {
             <Table.Cell>Baz 1</Table.Cell>
           </Table.Row>
         </Table.Body>
-      </Table>
+      </Table>,
     );
 
     const table = wrapper.find('[role="grid"]').at(0);
-    expect(table.props()['aria-label']).toBe('Table with selection');
-    expect(table.props()['aria-multiselectable']).toBe('true');
 
-    const bodyRowGroup = table
-      .find('[role="rowgroup"]')
-      .at(1 * STITCHES_FACTOR);
+    expect(table.props()["aria-label"]).toBe("Table with selection");
+    expect(table.props()["aria-multiselectable"]).toBe("true");
+
+    const bodyRowGroup = table.find('[role="rowgroup"]').at(1 * STITCHES_FACTOR);
 
     // select all checkbox
     let checkbox = table.find('[type="checkbox"]').at(0);
-    expect(checkbox.props()['aria-label']).toBe('Select All');
+
+    expect(checkbox.props()["aria-label"]).toBe("Select All");
 
     // get all rows
     const rows = bodyRowGroup.find('[role="row"]');
+
     expect(rows.length).toBe(1 * STITCHES_FACTOR);
 
     // get body first cell (rowheader)
     const bodyFirstCell = rows.at(0).find('[role="rowheader"]').at(0);
-    expect(bodyFirstCell.text()).toBe('Foo 1');
+
+    expect(bodyFirstCell.text()).toBe("Foo 1");
 
     const firstRowCheckbox = rows.at(0).find('[type="checkbox"]').at(0);
-    expect(firstRowCheckbox.props()['aria-label']).toBe('Select');
+
+    expect(firstRowCheckbox.props()["aria-label"]).toBe("Select");
   });
 
-  it('should render dynamic table', () => {
+  it("should render dynamic table", () => {
     const wrapper = mount(
       <Table aria-label="Dynamic Table">
         <Table.Header columns={columns}>
@@ -147,30 +155,32 @@ describe('Table', () => {
             </Table.Row>
           )}
         </Table.Body>
-      </Table>
+      </Table>,
     );
 
     const table = wrapper.find('[role="grid"]').at(0);
-    expect(table.props()['aria-label']).toBe('Dynamic Table');
 
-    const bodyRowGroup = table
-      .find('[role="rowgroup"]')
-      .at(1 * STITCHES_FACTOR);
+    expect(table.props()["aria-label"]).toBe("Dynamic Table");
+
+    const bodyRowGroup = table.find('[role="rowgroup"]').at(1 * STITCHES_FACTOR);
 
     // get all rows
     const rows = bodyRowGroup.find('[role="row"]');
+
     expect(rows.length).toBe(2 * STITCHES_FACTOR);
 
     // get body first cell (rowheader)
     const bodyFirstCell = rows.at(0).find('[role="rowheader"]').at(0);
-    expect(bodyFirstCell.text()).toBe('Test 1');
+
+    expect(bodyFirstCell.text()).toBe("Test 1");
 
     // get all cells
     const cells = rows.at(0).find('[role="gridcell"]');
+
     expect(cells.length).toBe(2 * STITCHES_FACTOR);
   });
 
-  it('should render a dynamic table with selection', () => {
+  it("should render a dynamic table with selection", () => {
     const wrapper = mount(
       <Table aria-label="Dynamic Table with selection" selectionMode="multiple">
         <Table.Header columns={columns}>
@@ -185,34 +195,37 @@ describe('Table', () => {
             </Table.Row>
           )}
         </Table.Body>
-      </Table>
+      </Table>,
     );
 
     const table = wrapper.find('[role="grid"]').at(0);
-    expect(table.props()['aria-label']).toBe('Dynamic Table with selection');
-    expect(table.props()['aria-multiselectable']).toBe('true');
 
-    const bodyRowGroup = table
-      .find('[role="rowgroup"]')
-      .at(1 * STITCHES_FACTOR);
+    expect(table.props()["aria-label"]).toBe("Dynamic Table with selection");
+    expect(table.props()["aria-multiselectable"]).toBe("true");
+
+    const bodyRowGroup = table.find('[role="rowgroup"]').at(1 * STITCHES_FACTOR);
 
     // select all checkbox
     let checkbox = table.find('[type="checkbox"]').at(0);
-    expect(checkbox.props()['aria-label']).toBe('Select All');
+
+    expect(checkbox.props()["aria-label"]).toBe("Select All");
 
     // get all rows
     const rows = bodyRowGroup.find('[role="row"]');
+
     expect(rows.length).toBe(2 * STITCHES_FACTOR);
 
     // get body first cell (rowheader)
     const bodyFirstCell = rows.at(0).find('[role="rowheader"]').at(0);
-    expect(bodyFirstCell.text()).toBe('Test 1');
+
+    expect(bodyFirstCell.text()).toBe("Test 1");
 
     const firstRowCheckbox = rows.at(0).find('[type="checkbox"]').at(0);
-    expect(firstRowCheckbox.props()['aria-label']).toBe('Select');
+
+    expect(firstRowCheckbox.props()["aria-label"]).toBe("Select");
   });
 
-  it('should render a static table correctly with sorting', () => {
+  it("should render a static table correctly with sorting", () => {
     const wrapper = mount(
       <Table aria-label="Test sorting table">
         <Table.Header>
@@ -227,40 +240,45 @@ describe('Table', () => {
             <Table.Cell>6/7/2020</Table.Cell>
           </Table.Row>
         </Table.Body>
-      </Table>
+      </Table>,
     );
 
     const table = wrapper.find('[role="grid"]').at(0);
-    expect(table.props()['aria-label']).toBe('Test sorting table');
+
+    expect(table.props()["aria-label"]).toBe("Test sorting table");
 
     // get column headers
     const columnHeaders = table.find('[role="columnheader"]');
+
     expect(columnHeaders.length).toBe(3 * STITCHES_FACTOR);
 
     // check first column header
     const firstColumnHeader = columnHeaders.at(0 * STITCHES_FACTOR);
-    expect(firstColumnHeader.text()).toBe('NAME');
-    expect(firstColumnHeader.props()['aria-sort']).toBeFalsy();
+
+    expect(firstColumnHeader.text()).toBe("NAME");
+    expect(firstColumnHeader.props()["aria-sort"]).toBeFalsy();
 
     // check second column header
     const secondColumnHeader = columnHeaders.at(1 * STITCHES_FACTOR);
-    expect(secondColumnHeader.text()).toBe('TYPE');
-    expect(secondColumnHeader.props()['aria-sort']).toBe('none');
+
+    expect(secondColumnHeader.text()).toBe("TYPE");
+    expect(secondColumnHeader.props()["aria-sort"]).toBe("none");
 
     // check third column header
     const thirdColumnHeader = columnHeaders.at(2 * STITCHES_FACTOR);
-    expect(thirdColumnHeader.text()).toBe('DATE MODIFIED');
-    expect(thirdColumnHeader.props()['aria-sort']).toBe('none');
+
+    expect(thirdColumnHeader.text()).toBe("DATE MODIFIED");
+    expect(thirdColumnHeader.props()["aria-sort"]).toBe("none");
 
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should set the proper aria-sort on an ascending sorted column header', () => {
+  it("should set the proper aria-sort on an ascending sorted column header", () => {
     const wrapper = mount(
       <Table
         aria-label="Test sorting table"
-        sortDescriptor={{ column: 'type', direction: 'ascending' }}
+        sortDescriptor={{column: "type", direction: "ascending"}}
       >
         <Table.Header>
           <Table.Column key="name">NAME</Table.Column>
@@ -278,37 +296,42 @@ describe('Table', () => {
             <Table.Cell>6/7/2020</Table.Cell>
           </Table.Row>
         </Table.Body>
-      </Table>
+      </Table>,
     );
 
     const table = wrapper.find('[role="grid"]').at(0);
-    expect(table.props()['aria-label']).toBe('Test sorting table');
+
+    expect(table.props()["aria-label"]).toBe("Test sorting table");
 
     // get column headers
     const columnHeaders = table.find('[role="columnheader"]');
+
     expect(columnHeaders.length).toBe(3 * STITCHES_FACTOR);
 
     // check first column header
     const firstColumnHeader = columnHeaders.at(0 * STITCHES_FACTOR);
-    expect(firstColumnHeader.text()).toBe('NAME');
-    expect(firstColumnHeader.props()['aria-sort']).toBeFalsy();
+
+    expect(firstColumnHeader.text()).toBe("NAME");
+    expect(firstColumnHeader.props()["aria-sort"]).toBeFalsy();
 
     // check second column header
     const secondColumnHeader = columnHeaders.at(1 * STITCHES_FACTOR);
-    expect(secondColumnHeader.text()).toBe('TYPE');
-    expect(secondColumnHeader.props()['aria-sort']).toBe('ascending');
+
+    expect(secondColumnHeader.text()).toBe("TYPE");
+    expect(secondColumnHeader.props()["aria-sort"]).toBe("ascending");
 
     // check third column header
     const thirdColumnHeader = columnHeaders.at(2 * STITCHES_FACTOR);
-    expect(thirdColumnHeader.text()).toBe('DATE MODIFIED');
-    expect(thirdColumnHeader.props()['aria-sort']).toBe('none');
+
+    expect(thirdColumnHeader.text()).toBe("DATE MODIFIED");
+    expect(thirdColumnHeader.props()["aria-sort"]).toBe("none");
   });
 
-  it('should set the proper aria-sort on an descending sorted column header', () => {
+  it("should set the proper aria-sort on an descending sorted column header", () => {
     const wrapper = mount(
       <Table
         aria-label="Test sorting table"
-        sortDescriptor={{ column: 'type', direction: 'descending' }}
+        sortDescriptor={{column: "type", direction: "descending"}}
       >
         <Table.Header>
           <Table.Column key="name">NAME</Table.Column>
@@ -326,29 +349,34 @@ describe('Table', () => {
             <Table.Cell>6/7/2020</Table.Cell>
           </Table.Row>
         </Table.Body>
-      </Table>
+      </Table>,
     );
 
     const table = wrapper.find('[role="grid"]').at(0);
-    expect(table.props()['aria-label']).toBe('Test sorting table');
+
+    expect(table.props()["aria-label"]).toBe("Test sorting table");
 
     // get column headers
     const columnHeaders = table.find('[role="columnheader"]');
+
     expect(columnHeaders.length).toBe(3 * STITCHES_FACTOR);
 
     // check first column header
     const firstColumnHeader = columnHeaders.at(0 * STITCHES_FACTOR);
-    expect(firstColumnHeader.text()).toBe('NAME');
-    expect(firstColumnHeader.props()['aria-sort']).toBeFalsy();
+
+    expect(firstColumnHeader.text()).toBe("NAME");
+    expect(firstColumnHeader.props()["aria-sort"]).toBeFalsy();
 
     // check second column header
     const secondColumnHeader = columnHeaders.at(1 * STITCHES_FACTOR);
-    expect(secondColumnHeader.text()).toBe('TYPE');
-    expect(secondColumnHeader.props()['aria-sort']).toBe('descending');
+
+    expect(secondColumnHeader.text()).toBe("TYPE");
+    expect(secondColumnHeader.props()["aria-sort"]).toBe("descending");
 
     // check third column header
     const thirdColumnHeader = columnHeaders.at(2 * STITCHES_FACTOR);
-    expect(thirdColumnHeader.text()).toBe('DATE MODIFIED');
-    expect(thirdColumnHeader.props()['aria-sort']).toBe('none');
+
+    expect(thirdColumnHeader.text()).toBe("DATE MODIFIED");
+    expect(thirdColumnHeader.props()["aria-sort"]).toBe("none");
   });
 });
diff --git a/packages/react/src/table/base/index.ts b/packages/react/src/table/base/index.ts
index 6a5e1225c9..323856bc23 100644
--- a/packages/react/src/table/base/index.ts
+++ b/packages/react/src/table/base/index.ts
@@ -1,5 +1,5 @@
-export { default as TableBody } from './table-body';
-export { default as TableCell } from './table-cell';
-export { default as TableColumn } from './table-column';
-export { default as TableHeader } from './table-header';
-export { default as TableRow } from './table-row';
+export {default as TableBody} from "./table-body";
+export {default as TableCell} from "./table-cell";
+export {default as TableColumn} from "./table-column";
+export {default as TableHeader} from "./table-header";
+export {default as TableRow} from "./table-row";
diff --git a/packages/react/src/table/base/table-body.tsx b/packages/react/src/table/base/table-body.tsx
index 64c61b535e..26ba442e48 100644
--- a/packages/react/src/table/base/table-body.tsx
+++ b/packages/react/src/table/base/table-body.tsx
@@ -1,8 +1,9 @@
-import { TableBody as TableBodyBase } from '@react-stately/table';
-import { TableBodyProps as TableBodyBaseProps } from '@react-types/table';
-import { CSS } from '../../theme/stitches.config';
+import {TableBody as TableBodyBase} from "@react-stately/table";
+import {TableBodyProps as TableBodyBaseProps} from "@react-types/table";
 
-export type TableBodyProps<T> = TableBodyBaseProps<T> & { css?: CSS };
+import {CSS} from "../../theme/stitches.config";
+
+export type TableBodyProps<T> = TableBodyBaseProps<T> & {css?: CSS};
 
 // Override TS for Body to support NextUI specific props.
 const TableBody = TableBodyBase as <T>(props: TableBodyProps<T>) => JSX.Element;
diff --git a/packages/react/src/table/base/table-cell.tsx b/packages/react/src/table/base/table-cell.tsx
index 82718dc17d..330145984f 100644
--- a/packages/react/src/table/base/table-cell.tsx
+++ b/packages/react/src/table/base/table-cell.tsx
@@ -1,8 +1,9 @@
-import { Cell as TableCellBase } from '@react-stately/table';
-import { CellProps as TableCellBaseProps } from '@react-types/table';
-import { CSS } from '../../theme/stitches.config';
+import {Cell as TableCellBase} from "@react-stately/table";
+import {CellProps as TableCellBaseProps} from "@react-types/table";
 
-export type TableCellProps = TableCellBaseProps & { css?: CSS };
+import {CSS} from "../../theme/stitches.config";
+
+export type TableCellProps = TableCellBaseProps & {css?: CSS};
 
 // Override TS for Cell to support NextUI specific props.
 const TableCell = TableCellBase as (props: TableCellProps) => JSX.Element;
diff --git a/packages/react/src/table/base/table-column.tsx b/packages/react/src/table/base/table-column.tsx
index b34c33e888..d670c96756 100644
--- a/packages/react/src/table/base/table-column.tsx
+++ b/packages/react/src/table/base/table-column.tsx
@@ -1,11 +1,9 @@
-import { Column } from '@react-stately/table';
-import { SpectrumColumnProps } from '@react-types/table';
-import { CSS } from '../../theme/stitches.config';
-
-export type TableColumnProps<T> = Omit<
-  SpectrumColumnProps<T>,
-  'showDivider'
-> & { css?: CSS };
+import {Column} from "@react-stately/table";
+import {SpectrumColumnProps} from "@react-types/table";
+
+import {CSS} from "../../theme/stitches.config";
+
+export type TableColumnProps<T> = Omit<SpectrumColumnProps<T>, "showDivider"> & {css?: CSS};
 
 // Override TS for Column to support NextUI specific props.
 const TableColumn = Column as <T>(props: TableColumnProps<T>) => JSX.Element;
diff --git a/packages/react/src/table/base/table-header.tsx b/packages/react/src/table/base/table-header.tsx
index 3ba4546927..940f179365 100644
--- a/packages/react/src/table/base/table-header.tsx
+++ b/packages/react/src/table/base/table-header.tsx
@@ -1,8 +1,6 @@
-import { TableHeader as TableHeaderBase } from '@react-stately/table';
-import { TableHeaderProps } from '@react-types/table';
+import {TableHeader as TableHeaderBase} from "@react-stately/table";
+import {TableHeaderProps} from "@react-types/table";
 
-const TableHeader = TableHeaderBase as <T>(
-  props: TableHeaderProps<T>
-) => JSX.Element;
+const TableHeader = TableHeaderBase as <T>(props: TableHeaderProps<T>) => JSX.Element;
 
 export default TableHeader;
diff --git a/packages/react/src/table/base/table-row.tsx b/packages/react/src/table/base/table-row.tsx
index 6ada0a0df6..ec113c3097 100644
--- a/packages/react/src/table/base/table-row.tsx
+++ b/packages/react/src/table/base/table-row.tsx
@@ -1,8 +1,9 @@
-import { Row as TableRowBase } from '@react-stately/table';
-import { RowProps as TableRowBaseProps } from '@react-types/table';
-import { CSS } from '../../theme/stitches.config';
+import {Row as TableRowBase} from "@react-stately/table";
+import {RowProps as TableRowBaseProps} from "@react-types/table";
 
-export type TableRowProps = TableRowBaseProps & { css?: CSS };
+import {CSS} from "../../theme/stitches.config";
+
+export type TableRowProps = TableRowBaseProps & {css?: CSS};
 
 // Override TS for TableRow to support NextUI specific props.
 const TableRow = TableRowBase as (props: TableRowProps) => JSX.Element;
diff --git a/packages/react/src/table/index.ts b/packages/react/src/table/index.ts
index cf18852fac..9ce9f58b4d 100644
--- a/packages/react/src/table/index.ts
+++ b/packages/react/src/table/index.ts
@@ -1,38 +1,26 @@
-import Table from './table';
-import TablePagination from './table-pagination';
+import Table from "./table";
+import TablePagination from "./table-pagination";
+import {TableBody, TableColumn, TableRow, TableCell, TableHeader} from "./base";
 
-import {
-  TableBody,
-  TableColumn,
-  TableRow,
-  TableCell,
-  TableHeader
-} from './base';
+export type {SortDescriptor} from "@react-types/shared";
 
-export type { SortDescriptor } from '@react-types/shared';
-
-export {
-  StyledTable,
-  StyledTableRow,
-  StyledTableCell,
-  StyledTableHeaderCell
-} from './table.styles';
+export {StyledTable, StyledTableRow, StyledTableCell, StyledTableHeaderCell} from "./table.styles";
 
 export type {
   TableVariantsProps,
   TableColumnHeaderVariantsProps,
   TableCellVariantsProps,
   StyledTableRowGroup,
-  StyledTableHeaderRow
-} from './table.styles';
+  StyledTableHeaderRow,
+} from "./table.styles";
 
-export type { TableProps } from './table';
-export type { TablePaginationProps } from './table-pagination';
-export type { TableBodyProps } from './table-body';
-export type { TableHeaderRowProps } from './table-header-row';
-export type { TableRowProps } from './table-row';
-export type { TableCellProps } from './table-cell';
-export type { TableFooterProps } from './table-footer';
+export type {TableProps} from "./table";
+export type {TablePaginationProps} from "./table-pagination";
+export type {TableBodyProps} from "./table-body";
+export type {TableHeaderRowProps} from "./table-header-row";
+export type {TableRowProps} from "./table-row";
+export type {TableCellProps} from "./table-cell";
+export type {TableFooterProps} from "./table-footer";
 
 Table.Cell = TableCell;
 Table.Column = TableColumn;
diff --git a/packages/react/src/table/table-body.tsx b/packages/react/src/table/table-body.tsx
index abe2411e53..07614bcc0d 100644
--- a/packages/react/src/table/table-body.tsx
+++ b/packages/react/src/table/table-body.tsx
@@ -1,21 +1,19 @@
-import React, { useMemo } from 'react';
-import { CSS } from '../theme/stitches.config';
-import { TableCollection } from '@react-types/table';
-import {
-  TableVariantsProps,
-  StyledBaseTableCell,
-  StyledTableLoadingRow
-} from './table.styles';
-import { TableState } from '@react-stately/table';
-import { mergeProps } from '@react-aria/utils';
-import TableRowGroup from './table-row-group';
-import TableRow from './table-row';
-import TableCell from './table-cell';
-import TableCheckboxCell from './table-checkbox-cell';
-import { useTableContext } from './table-context';
-import { isInfinityScroll } from './utils';
-import { Loading, LoadingProps } from '../index';
-import clsx from '../utils/clsx';
+import React, {useMemo} from "react";
+import {TableCollection} from "@react-types/table";
+import {TableState} from "@react-stately/table";
+import {mergeProps} from "@react-aria/utils";
+
+import {CSS} from "../theme/stitches.config";
+import {Loading, LoadingProps} from "../index";
+import clsx from "../utils/clsx";
+
+import {TableVariantsProps, StyledBaseTableCell, StyledTableLoadingRow} from "./table.styles";
+import TableRowGroup from "./table-row-group";
+import TableRow from "./table-row";
+import TableCell from "./table-cell";
+import TableCheckboxCell from "./table-checkbox-cell";
+import {useTableContext} from "./table-context";
+import {isInfinityScroll} from "./utils";
 
 interface Props<T> {
   state: TableState<T>;
@@ -23,14 +21,13 @@ interface Props<T> {
   animated?: boolean;
   hideLoading?: boolean;
   hasPagination?: boolean;
-  color?: TableVariantsProps['color'];
+  color?: TableVariantsProps["color"];
   as?: keyof JSX.IntrinsicElements;
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props<any>>;
 
-export type TableBodyProps<T = unknown> = Props<T> &
-  NativeAttrs & { css?: CSS };
+export type TableBodyProps<T = unknown> = Props<T> & NativeAttrs & {css?: CSS};
 
 // TODO: Remove this once we have a better way to pass it from the parent
 const SCROLL_OFFSET = 40;
@@ -45,49 +42,47 @@ const TableBody: React.FC<React.PropsWithChildren<TableBodyProps>> = ({
   hideLoading,
   ...props
 }) => {
-  const { currentPage, rowsPerPage } = useTableContext();
+  const {currentPage, rowsPerPage} = useTableContext();
 
-  const infinityScroll = useMemo(
-    () => isInfinityScroll(collection),
-    [collection.body.props]
-  );
+  const infinityScroll = useMemo(() => isInfinityScroll(collection), [collection.body.props]);
 
   const isLoading =
-    collection.body?.props?.loadingState === 'loading' ||
-    collection.body?.props?.loadingState === 'loadingMore';
+    collection.body?.props?.loadingState === "loading" ||
+    collection.body?.props?.loadingState === "loadingMore";
 
   const rows = useMemo(() => {
     const data = [...collection.body.childNodes];
+
     if (!hasPagination) {
       return data;
     }
-    return data?.slice(
-      (currentPage - 1) * rowsPerPage,
-      currentPage * rowsPerPage
-    );
+
+    return data?.slice((currentPage - 1) * rowsPerPage, currentPage * rowsPerPage);
   }, [hasPagination, collection, currentPage, rowsPerPage]);
 
   const completeSpaces = useMemo(() => {
     const rowsCount = rows.length;
+
     if (rowsCount >= rowsPerPage && !infinityScroll) {
       return null;
     }
+
     return (
-      <tr role="row" className="nextui-table-hidden-row" aria-hidden="true">
+      <tr aria-hidden="true" className="nextui-table-hidden-row" role="row">
         <StyledBaseTableCell
           aria-hidden="true"
           colSpan={collection.columnCount}
+          css={{
+            height: "var(--nextui--tableBodyEmptySpaceHeight)",
+          }}
           style={mergeProps(
             {
-              '--nextui--tableBodyEmptySpaceHeight': infinityScroll
-                ? 'var(--nextui-space-10)'
-                : `calc(${rowsPerPage - rowsCount} * var(--nextui-space-14))`
+              "--nextui--tableBodyEmptySpaceHeight": infinityScroll
+                ? "var(--nextui-space-10)"
+                : `calc(${rowsPerPage - rowsCount} * var(--nextui-space-14))`,
             },
-            props?.style || {}
+            props?.style || {},
           )}
-          css={{
-            height: 'var(--nextui--tableBodyEmptySpaceHeight)'
-          }}
         />
       </tr>
     );
@@ -100,8 +95,7 @@ const TableBody: React.FC<React.PropsWithChildren<TableBodyProps>> = ({
     }
     const element = e.target;
     const isAtBottom =
-      element.scrollHeight - (element.scrollTop + SCROLL_OFFSET) <=
-      element.clientHeight;
+      element.scrollHeight - (element.scrollTop + SCROLL_OFFSET) <= element.clientHeight;
 
     if (isAtBottom && !isLoading) {
       collection.body?.props?.onLoadMore?.();
@@ -111,15 +105,15 @@ const TableBody: React.FC<React.PropsWithChildren<TableBodyProps>> = ({
   return (
     <TableRowGroup
       as="tbody"
-      className={clsx('nextui-table-body', props.className)}
-      isInfinityScroll={infinityScroll}
-      onScroll={handleScroll}
+      className={clsx("nextui-table-body", props.className)}
       css={{
-        pb: '$10',
-        position: 'relative',
+        pb: "$10",
+        position: "relative",
         ...(props.css as any),
-        ...(collection.body?.props?.css as any)
+        ...(collection.body?.props?.css as any),
       }}
+      isInfinityScroll={infinityScroll}
+      onScroll={handleScroll}
       {...props}
     >
       {children}
@@ -127,37 +121,35 @@ const TableBody: React.FC<React.PropsWithChildren<TableBodyProps>> = ({
         if (!row.hasChildNodes) {
           return null;
         }
+
         return (
           <TableRow key={row?.key} aria-hidden="false" item={row} state={state}>
             {[...row.childNodes].map((cell) =>
               cell?.props?.isSelectionCell ? (
                 <TableCheckboxCell
                   key={cell?.key}
+                  animated={animated}
                   cell={cell}
-                  state={state}
                   color={color}
-                  animated={animated}
+                  state={state}
                 />
               ) : (
                 <TableCell key={cell?.key} cell={cell} state={state} />
-              )
+              ),
             )}
           </TableRow>
         );
       })}
       {!hideLoading && isLoading && (
         <StyledTableLoadingRow
-          role="row"
-          className="nextui-table-hidden-row"
           aria-hidden="true"
-          isAtEnd={rows.length > 0}
+          className="nextui-table-hidden-row"
           isAbsolute={!infinityScroll}
+          isAtEnd={rows.length > 0}
+          role="row"
         >
-          <StyledBaseTableCell
-            aria-hidden="true"
-            colSpan={collection.columnCount}
-          >
-            <Loading color={color as LoadingProps['color']} />
+          <StyledBaseTableCell aria-hidden="true" colSpan={collection.columnCount}>
+            <Loading color={color as LoadingProps["color"]} />
           </StyledBaseTableCell>
         </StyledTableLoadingRow>
       )}
@@ -166,8 +158,8 @@ const TableBody: React.FC<React.PropsWithChildren<TableBodyProps>> = ({
   );
 };
 
-TableBody.displayName = 'NextUI.TableBody';
+TableBody.displayName = "NextUI.TableBody";
 
-TableBody.toString = () => '.nextui-table-body';
+TableBody.toString = () => ".nextui-table-body";
 
 export default TableBody;
diff --git a/packages/react/src/table/table-cell.tsx b/packages/react/src/table/table-cell.tsx
index 9f961e777b..47f4568966 100644
--- a/packages/react/src/table/table-cell.tsx
+++ b/packages/react/src/table/table-cell.tsx
@@ -1,14 +1,16 @@
-import React, { useRef, useImperativeHandle } from 'react';
-import { CSS } from '../theme/stitches.config';
-import { useTableCell } from '@react-aria/table';
-import { StyledTableCell } from './table.styles';
-import { GridNode } from '@react-types/grid';
-import { TableState } from '@react-stately/table';
-import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import clsx from '../utils/clsx';
-
-type CellProps<T> = GridNode<T> & { rendered: React.ReactNode };
+import React, {useRef, useImperativeHandle} from "react";
+import {useTableCell} from "@react-aria/table";
+import {GridNode} from "@react-types/grid";
+import {TableState} from "@react-stately/table";
+import {useFocusRing} from "@react-aria/focus";
+import {mergeProps} from "@react-aria/utils";
+
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+
+import {StyledTableCell} from "./table.styles";
+
+type CellProps<T> = GridNode<T> & {rendered: React.ReactNode};
 
 interface Props<T> {
   cell: CellProps<T>;
@@ -18,42 +20,38 @@ interface Props<T> {
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props<any>>;
 
-export type TableCellProps<T = unknown> = Props<T> &
-  NativeAttrs & { css?: CSS };
+export type TableCellProps<T = unknown> = Props<T> & NativeAttrs & {css?: CSS};
 
 const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
-  ({ cell, state, ...props }, ref: React.Ref<HTMLTableCellElement | null>) => {
+  ({cell, state, ...props}, ref: React.Ref<HTMLTableCellElement | null>) => {
     const tableCellRef = useRef<HTMLTableCellElement | null>(null);
 
     useImperativeHandle(ref, () => tableCellRef?.current);
 
     const {
-      gridCellProps
+      gridCellProps,
     }: {
-      gridCellProps: Omit<
-        React.HTMLAttributes<unknown>,
-        keyof TableCellProps<unknown>
-      >;
-    } = useTableCell({ node: cell }, state, tableCellRef);
+      gridCellProps: Omit<React.HTMLAttributes<unknown>, keyof TableCellProps<unknown>>;
+    } = useTableCell({node: cell}, state, tableCellRef);
 
-    const { isFocusVisible, focusProps } = useFocusRing();
+    const {isFocusVisible, focusProps} = useFocusRing();
 
     return (
       <StyledTableCell
         ref={tableCellRef}
-        isFocusVisible={isFocusVisible}
-        className={clsx('nextui-table-cell', props.className)}
+        className={clsx("nextui-table-cell", props.className)}
         css={cell.props.css}
+        isFocusVisible={isFocusVisible}
         {...mergeProps(gridCellProps, focusProps, props)}
       >
         {cell.rendered}
       </StyledTableCell>
     );
-  }
+  },
 );
 
-TableCell.displayName = 'NextUI.TableCell';
+TableCell.displayName = "NextUI.TableCell";
 
-TableCell.toString = () => '.nextui-table-cell';
+TableCell.toString = () => ".nextui-table-cell";
 
 export default TableCell;
diff --git a/packages/react/src/table/table-checkbox-cell.tsx b/packages/react/src/table/table-checkbox-cell.tsx
index 2ce3cf6101..218a0aa5fd 100644
--- a/packages/react/src/table/table-checkbox-cell.tsx
+++ b/packages/react/src/table/table-checkbox-cell.tsx
@@ -1,76 +1,65 @@
-import React, { useRef, useImperativeHandle } from 'react';
-import { CSS } from '../theme/stitches.config';
-import { useTableCell, useTableSelectionCheckbox } from '@react-aria/table';
-import { GridNode } from '@react-types/grid';
-import { TableState } from '@react-stately/table';
-import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import Checkbox, { CheckboxProps } from '../checkbox';
-import { StyledTableCell, TableVariantsProps } from './table.styles';
-import clsx from '../utils/clsx';
+import React, {useRef, useImperativeHandle} from "react";
+import {useTableCell, useTableSelectionCheckbox} from "@react-aria/table";
+import {GridNode} from "@react-types/grid";
+import {TableState} from "@react-stately/table";
+import {useFocusRing} from "@react-aria/focus";
+import {mergeProps} from "@react-aria/utils";
 
-type CellProps<T> = GridNode<T> & { parentKey?: React.Key };
+import {CSS} from "../theme/stitches.config";
+import Checkbox, {CheckboxProps} from "../checkbox";
+import clsx from "../utils/clsx";
+
+import {StyledTableCell, TableVariantsProps} from "./table.styles";
+
+type CellProps<T> = GridNode<T> & {parentKey?: React.Key};
 
 interface Props<T> {
   cell: CellProps<T>;
   state: TableState<T>;
-  color?: TableVariantsProps['color'];
+  color?: TableVariantsProps["color"];
   animated?: boolean;
   as?: keyof JSX.IntrinsicElements;
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props<any>>;
 
-export type TableCheckboxCellProps<T = unknown> = Props<T> &
-  NativeAttrs & { css?: CSS };
+export type TableCheckboxCellProps<T = unknown> = Props<T> & NativeAttrs & {css?: CSS};
 
-const TableCheckboxCell = React.forwardRef<
-  HTMLTableCellElement,
-  TableCheckboxCellProps
->(
-  (
-    { cell, state, color, animated, ...props },
-    ref: React.Ref<HTMLTableCellElement | null>
-  ) => {
+const TableCheckboxCell = React.forwardRef<HTMLTableCellElement, TableCheckboxCellProps>(
+  ({cell, state, color, animated, ...props}, ref: React.Ref<HTMLTableCellElement | null>) => {
     const tableCellRef = useRef<HTMLTableCellElement | null>(null);
 
     useImperativeHandle(ref, () => tableCellRef?.current);
 
     const {
-      gridCellProps
+      gridCellProps,
     }: {
-      gridCellProps: Omit<
-        React.HTMLAttributes<unknown>,
-        keyof TableCheckboxCellProps<unknown>
-      >;
-    } = useTableCell({ node: cell }, state, tableCellRef);
+      gridCellProps: Omit<React.HTMLAttributes<unknown>, keyof TableCheckboxCellProps<unknown>>;
+    } = useTableCell({node: cell}, state, tableCellRef);
 
-    const { checkboxProps } = useTableSelectionCheckbox(
-      { key: cell?.parentKey || cell.key },
-      state
-    );
-    const { isFocusVisible, focusProps } = useFocusRing();
+    const {checkboxProps} = useTableSelectionCheckbox({key: cell?.parentKey || cell.key}, state);
+    const {isFocusVisible, focusProps} = useFocusRing();
 
     return (
       <StyledTableCell
         ref={tableCellRef}
+        className={clsx("nextui-table-checkbox-cell", props.className)}
         isFocusVisible={isFocusVisible}
-        className={clsx('nextui-table-checkbox-cell', props.className)}
         {...mergeProps(gridCellProps, focusProps, props)}
       >
         <Checkbox
           {...checkboxProps}
-          color={color as CheckboxProps['color']}
+          color={color as CheckboxProps["color"]}
+          css={{display: "inherit"}}
           disableAnimation={!animated}
-          css={{ display: 'inherit' }}
         />
       </StyledTableCell>
     );
-  }
+  },
 );
 
-TableCheckboxCell.displayName = 'NextUI.TableCheckboxCell';
+TableCheckboxCell.displayName = "NextUI.TableCheckboxCell";
 
-TableCheckboxCell.toString = () => '.nextui-table-checkbox-cell';
+TableCheckboxCell.toString = () => ".nextui-table-checkbox-cell";
 
 export default TableCheckboxCell;
diff --git a/packages/react/src/table/table-column-header.tsx b/packages/react/src/table/table-column-header.tsx
index f5207d8deb..d9c08befc2 100644
--- a/packages/react/src/table/table-column-header.tsx
+++ b/packages/react/src/table/table-column-header.tsx
@@ -1,17 +1,16 @@
-import React, { useRef, useImperativeHandle } from 'react';
-import { CSS } from '../theme/stitches.config';
-import { useTableColumnHeader } from '@react-aria/table';
-import {
-  StyledTableColumnHeader,
-  TableColumnHeaderVariantsProps
-} from './table.styles';
-import { GridNode } from '@react-types/grid';
-import { TableState } from '@react-stately/table';
-import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import TableSortIcon, { ICON_SIZE } from './table-sort-icon';
-import clsx from '../utils/clsx';
+import React, {useRef, useImperativeHandle} from "react";
+import {useTableColumnHeader} from "@react-aria/table";
+import {GridNode} from "@react-types/grid";
+import {TableState} from "@react-stately/table";
+import {useFocusRing} from "@react-aria/focus";
+import {mergeProps} from "@react-aria/utils";
+import {VisuallyHidden} from "@react-aria/visually-hidden";
+
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+
+import TableSortIcon, {ICON_SIZE} from "./table-sort-icon";
+import {StyledTableColumnHeader, TableColumnHeaderVariantsProps} from "./table.styles";
 
 interface Props<T> {
   column: GridNode<T>;
@@ -23,58 +22,50 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props<any>>;
 
 export type TableColumnHeaderProps<T = unknown> = Props<T> &
   TableColumnHeaderVariantsProps &
-  NativeAttrs & { css?: CSS };
+  NativeAttrs & {css?: CSS};
 
-const TableColumnHeader = React.forwardRef<
-  HTMLTableRowElement,
-  TableColumnHeaderProps
->(({ column, state, ...props }, ref: React.Ref<HTMLTableRowElement | null>) => {
-  const tableColumnHeaderRef = useRef<HTMLTableRowElement | null>(null);
+const TableColumnHeader = React.forwardRef<HTMLTableRowElement, TableColumnHeaderProps>(
+  ({column, state, ...props}, ref: React.Ref<HTMLTableRowElement | null>) => {
+    const tableColumnHeaderRef = useRef<HTMLTableRowElement | null>(null);
 
-  useImperativeHandle(ref, () => tableColumnHeaderRef?.current);
+    useImperativeHandle(ref, () => tableColumnHeaderRef?.current);
 
-  const {
-    columnHeaderProps
-  }: {
-    columnHeaderProps: Omit<
-      React.HTMLAttributes<unknown>,
-      keyof TableColumnHeaderProps<unknown>
-    >;
-  } = useTableColumnHeader({ node: column }, state, tableColumnHeaderRef);
+    const {
+      columnHeaderProps,
+    }: {
+      columnHeaderProps: Omit<React.HTMLAttributes<unknown>, keyof TableColumnHeaderProps<unknown>>;
+    } = useTableColumnHeader({node: column}, state, tableColumnHeaderRef);
 
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const { hideHeader, ...columnProps } = column.props;
+    const {isFocusVisible, focusProps} = useFocusRing();
+    const {hideHeader, ...columnProps} = column.props;
 
-  return (
-    <StyledTableColumnHeader
-      ref={tableColumnHeaderRef}
-      isFocusVisible={isFocusVisible}
-      colSpan={column.colspan}
-      className={clsx('nextui-table-column-header', props.className)}
-      {...mergeProps(props, columnHeaderProps, focusProps, columnProps)}
-    >
-      {hideHeader ? (
-        <VisuallyHidden>{column.rendered}</VisuallyHidden>
-      ) : (
-        column.rendered
-      )}
-      {columnProps.allowsSorting && (
-        <TableSortIcon
-          visible={state.sortDescriptor?.column === column.key}
-          ascending={state.sortDescriptor?.direction === 'ascending'}
-          css={{
-            position: 'absolute',
-            m: '0 $2',
-            bottom: `calc(50% - ${ICON_SIZE / 2}px)`
-          }}
-        />
-      )}
-    </StyledTableColumnHeader>
-  );
-});
+    return (
+      <StyledTableColumnHeader
+        ref={tableColumnHeaderRef}
+        className={clsx("nextui-table-column-header", props.className)}
+        colSpan={column.colspan}
+        isFocusVisible={isFocusVisible}
+        {...mergeProps(props, columnHeaderProps, focusProps, columnProps)}
+      >
+        {hideHeader ? <VisuallyHidden>{column.rendered}</VisuallyHidden> : column.rendered}
+        {columnProps.allowsSorting && (
+          <TableSortIcon
+            ascending={state.sortDescriptor?.direction === "ascending"}
+            css={{
+              position: "absolute",
+              m: "0 $2",
+              bottom: `calc(50% - ${ICON_SIZE / 2}px)`,
+            }}
+            visible={state.sortDescriptor?.column === column.key}
+          />
+        )}
+      </StyledTableColumnHeader>
+    );
+  },
+);
 
-TableColumnHeader.displayName = 'NextUI.TableColumnHeader';
+TableColumnHeader.displayName = "NextUI.TableColumnHeader";
 
-TableColumnHeader.toString = () => '.nextui-table-column-header';
+TableColumnHeader.toString = () => ".nextui-table-column-header";
 
 export default TableColumnHeader;
diff --git a/packages/react/src/table/table-context.tsx b/packages/react/src/table/table-context.tsx
index 56e5a39cf8..6268f51bc7 100644
--- a/packages/react/src/table/table-context.tsx
+++ b/packages/react/src/table/table-context.tsx
@@ -1,12 +1,14 @@
-import React from 'react';
-import { TableCollection } from '@react-types/table';
-import { NormalAlignment } from '../utils/prop-types';
-import { TableVariantsProps } from './table.styles';
+import React from "react";
+import {TableCollection} from "@react-types/table";
+
+import {NormalAlignment} from "../utils/prop-types";
+
+import {TableVariantsProps} from "./table.styles";
 
 export interface TableConfig {
   rowsPerPage: number;
   currentPage: number;
-  color?: TableVariantsProps['color'];
+  color?: TableVariantsProps["color"];
   animated?: boolean;
   footerAlign?: NormalAlignment;
   collection?: TableCollection<any>;
@@ -15,50 +17,40 @@ export interface TableConfig {
   setCollection?: (value: TableCollection<any>) => void;
   setRowsPerPage?: (value: number) => void;
   setCurrentPage?: (value: number) => void;
-  setColor?: (value: TableVariantsProps['color']) => void;
+  setColor?: (value: TableVariantsProps["color"]) => void;
 }
 
 const defaultContext = {
-  footerAlign: 'end' as NormalAlignment,
+  footerAlign: "end" as NormalAlignment,
   rowsPerPage: 0,
   currentPage: 1,
-  animated: true
+  animated: true,
 };
 
 export const TableContext = React.createContext<TableConfig>(defaultContext);
 
-export const useTableContext = (): TableConfig =>
-  React.useContext<TableConfig>(TableContext);
+export const useTableContext = (): TableConfig => React.useContext<TableConfig>(TableContext);
 
 export type ProviderProps = {
   children: React.ReactNode;
   defaultValues?: Partial<TableConfig>;
 };
 
-const Provider: React.FC<React.PropsWithChildren<ProviderProps>> = ({
-  children,
-  defaultValues
-}) => {
+const Provider: React.FC<React.PropsWithChildren<ProviderProps>> = ({children, defaultValues}) => {
   const [footerAlign, setFooterAlign] = React.useState(
-    defaultValues?.footerAlign || defaultContext.footerAlign
+    defaultValues?.footerAlign || defaultContext.footerAlign,
   );
   const [animated, setAnimated] = React.useState(
-    defaultValues?.animated === undefined
-      ? defaultContext.animated
-      : defaultValues?.animated
+    defaultValues?.animated === undefined ? defaultContext.animated : defaultValues?.animated,
   );
   const [collection, setCollection] = React.useState(defaultValues?.collection);
   const [rowsPerPage, setRowsPerPage] = React.useState(
     defaultValues?.rowsPerPage === undefined
       ? defaultContext.rowsPerPage
-      : defaultValues?.rowsPerPage
-  );
-  const [currentPage, setCurrentPage] = React.useState(
-    defaultContext.currentPage
-  );
-  const [color, setColor] = React.useState<TableVariantsProps['color']>(
-    defaultValues?.color
+      : defaultValues?.rowsPerPage,
   );
+  const [currentPage, setCurrentPage] = React.useState(defaultContext.currentPage);
+  const [color, setColor] = React.useState<TableVariantsProps["color"]>(defaultValues?.color);
 
   const providerValue = React.useMemo<TableConfig>(
     () => ({
@@ -73,16 +65,12 @@ const Provider: React.FC<React.PropsWithChildren<ProviderProps>> = ({
       setAnimated,
       setRowsPerPage,
       setColor,
-      setCurrentPage
+      setCurrentPage,
     }),
-    [animated, color, collection, footerAlign, rowsPerPage, currentPage]
+    [animated, color, collection, footerAlign, rowsPerPage, currentPage],
   );
 
-  return (
-    <TableContext.Provider value={providerValue}>
-      {children}
-    </TableContext.Provider>
-  );
+  return <TableContext.Provider value={providerValue}>{children}</TableContext.Provider>;
 };
 
-export default { Provider, Consumer: TableContext.Consumer };
+export default {Provider, Consumer: TableContext.Consumer};
diff --git a/packages/react/src/table/table-footer.tsx b/packages/react/src/table/table-footer.tsx
index 8dd8e40b06..1ffed6802b 100644
--- a/packages/react/src/table/table-footer.tsx
+++ b/packages/react/src/table/table-footer.tsx
@@ -1,30 +1,31 @@
-import React, { useRef, useImperativeHandle } from 'react';
-import { CSS } from '../theme/stitches.config';
-import { useTableContext } from './table-context';
-import { StyledTableFooter, TableFooterVatiantsProps } from './table.styles';
-import clsx from '../utils/clsx';
+import React, {useRef, useImperativeHandle} from "react";
+
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+
+import {useTableContext} from "./table-context";
+import {StyledTableFooter, TableFooterVatiantsProps} from "./table.styles";
 
 type NativeAttrs = React.HTMLAttributes<unknown>;
 
-export type TableFooterProps = NativeAttrs &
-  TableFooterVatiantsProps & { css?: CSS };
+export type TableFooterProps = NativeAttrs & TableFooterVatiantsProps & {css?: CSS};
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
   React.PropsWithChildren<TableFooterProps>
->(({ children, ...props }, ref: React.Ref<HTMLTableSectionElement | null>) => {
+>(({children, ...props}, ref: React.Ref<HTMLTableSectionElement | null>) => {
   const tableFooterRef = useRef<HTMLTableSectionElement | null>(null);
 
   useImperativeHandle(ref, () => tableFooterRef?.current);
 
-  const { footerAlign } = useTableContext();
+  const {footerAlign} = useTableContext();
 
   return (
     <StyledTableFooter
       ref={tableFooterRef}
-      role="rowgroup"
       align={props.align || footerAlign}
-      className={clsx('nextui-table-footer', props.className)}
+      className={clsx("nextui-table-footer", props.className)}
+      role="rowgroup"
       {...props}
     >
       {children}
@@ -32,8 +33,8 @@ const TableFooter = React.forwardRef<
   );
 });
 
-TableFooter.displayName = 'NextUI.TableFooter';
+TableFooter.displayName = "NextUI.TableFooter";
 
-TableFooter.toString = () => '.nextui-table-footer';
+TableFooter.toString = () => ".nextui-table-footer";
 
 export default TableFooter;
diff --git a/packages/react/src/table/table-header-row.tsx b/packages/react/src/table/table-header-row.tsx
index 71c7f28037..ecee20ae30 100644
--- a/packages/react/src/table/table-header-row.tsx
+++ b/packages/react/src/table/table-header-row.tsx
@@ -1,10 +1,12 @@
-import React, { useRef, useImperativeHandle } from 'react';
-import { CSS } from '../theme/stitches.config';
-import { useTableHeaderRow } from '@react-aria/table';
-import { StyledTableHeaderRow } from './table.styles';
-import { GridNode } from '@react-types/grid';
-import { TableState } from '@react-stately/table';
-import clsx from '../utils/clsx';
+import React, {useRef, useImperativeHandle} from "react";
+import {useTableHeaderRow} from "@react-aria/table";
+import {GridNode} from "@react-types/grid";
+import {TableState} from "@react-stately/table";
+
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+
+import {StyledTableHeaderRow} from "./table.styles";
 
 interface Props<T> {
   item: GridNode<T>;
@@ -14,45 +16,36 @@ interface Props<T> {
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props<any>>;
 
-export type TableHeaderRowProps<T = unknown> = Props<T> &
-  NativeAttrs & { css?: CSS };
+export type TableHeaderRowProps<T = unknown> = Props<T> & NativeAttrs & {css?: CSS};
 
 const TableHeaderRow = React.forwardRef<
   HTMLTableRowElement,
   React.PropsWithChildren<TableHeaderRowProps>
->(
-  (
-    { children, item, state, ...props },
-    ref: React.Ref<HTMLTableRowElement | null>
-  ) => {
-    const tableHeaderRowRef = useRef<HTMLTableRowElement | null>(null);
-
-    useImperativeHandle(ref, () => tableHeaderRowRef?.current);
-
-    const {
-      rowProps
-    }: {
-      rowProps: Omit<
-        React.HTMLAttributes<unknown>,
-        keyof TableHeaderRowProps<unknown>
-      >;
-    } = useTableHeaderRow({ node: item }, state, tableHeaderRowRef);
-
-    return (
-      <StyledTableHeaderRow
-        ref={tableHeaderRowRef}
-        className={clsx('nextui-table-header-row', props.className)}
-        {...props}
-        {...rowProps}
-      >
-        {children}
-      </StyledTableHeaderRow>
-    );
-  }
-);
-
-TableHeaderRow.displayName = 'NextUI.TableHeaderRow';
-
-TableHeaderRow.toString = () => '.nextui-table-header-row';
+>(({children, item, state, ...props}, ref: React.Ref<HTMLTableRowElement | null>) => {
+  const tableHeaderRowRef = useRef<HTMLTableRowElement | null>(null);
+
+  useImperativeHandle(ref, () => tableHeaderRowRef?.current);
+
+  const {
+    rowProps,
+  }: {
+    rowProps: Omit<React.HTMLAttributes<unknown>, keyof TableHeaderRowProps<unknown>>;
+  } = useTableHeaderRow({node: item}, state, tableHeaderRowRef);
+
+  return (
+    <StyledTableHeaderRow
+      ref={tableHeaderRowRef}
+      className={clsx("nextui-table-header-row", props.className)}
+      {...props}
+      {...rowProps}
+    >
+      {children}
+    </StyledTableHeaderRow>
+  );
+});
+
+TableHeaderRow.displayName = "NextUI.TableHeaderRow";
+
+TableHeaderRow.toString = () => ".nextui-table-header-row";
 
 export default TableHeaderRow;
diff --git a/packages/react/src/table/table-pagination.tsx b/packages/react/src/table/table-pagination.tsx
index 00851e0dab..e8d1044559 100644
--- a/packages/react/src/table/table-pagination.tsx
+++ b/packages/react/src/table/table-pagination.tsx
@@ -1,25 +1,24 @@
-import React, { useMemo } from 'react';
-import { CSS } from '../theme/stitches.config';
-import { Pagination, PaginationProps } from '../index';
-import { NormalAlignment } from '../utils/prop-types';
-import { useTableContext } from './table-context';
-import clsx from '../utils/clsx';
+import React, {useMemo} from "react";
+
+import {CSS} from "../theme/stitches.config";
+import {Pagination, PaginationProps} from "../index";
+import {NormalAlignment} from "../utils/prop-types";
+import clsx from "../utils/clsx";
+
+import {useTableContext} from "./table-context";
 
 interface Props {
   animated?: boolean;
   rowsPerPage?: number;
   align?: NormalAlignment;
-  onPageChange?: PaginationProps['onChange'];
+  onPageChange?: PaginationProps["onChange"];
 }
 
-type NativeAttrs = Omit<
-  React.HTMLAttributes<unknown>,
-  keyof Props | 'onChange'
->;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props | "onChange">;
 
 export type TablePaginationProps = Props &
   NativeAttrs &
-  Omit<Partial<PaginationProps>, 'onChange'> & { css?: CSS };
+  Omit<Partial<PaginationProps>, "onChange"> & {css?: CSS};
 
 const TablePagination: React.FC<TablePaginationProps> = ({
   align,
@@ -35,7 +34,7 @@ const TablePagination: React.FC<TablePaginationProps> = ({
     rowsPerPage,
     setFooterAlign,
     setRowsPerPage,
-    setCurrentPage
+    setCurrentPage,
   } = useTableContext();
 
   React.useEffect(() => {
@@ -56,26 +55,25 @@ const TablePagination: React.FC<TablePaginationProps> = ({
   };
 
   const totalPagination = useMemo(() => {
-    const rowsCount = collection?.body
-      ? [...collection?.body?.childNodes].length
-      : 0;
+    const rowsCount = collection?.body ? [...collection?.body?.childNodes].length : 0;
+
     return rowsPerPage > 0 ? Math.ceil(rowsCount / rowsPerPage) : 1;
   }, [collection, rowsPerPage]);
 
   return (
     <Pagination
-      total={totalPagination}
       animated={animated}
+      className={clsx("nextui-table-pagination", props.className)}
+      color={props.color || (color as PaginationProps["color"])}
+      total={totalPagination}
       onChange={handlePageChanged}
-      color={props.color || (color as PaginationProps['color'])}
-      className={clsx('nextui-table-pagination', props.className)}
       {...props}
     />
   );
 };
 
-TablePagination.displayName = 'NextUI.TablePagination';
+TablePagination.displayName = "NextUI.TablePagination";
 
-TablePagination.toString = () => '.nextui-table-pagination';
+TablePagination.toString = () => ".nextui-table-pagination";
 
 export default TablePagination;
diff --git a/packages/react/src/table/table-row-group.tsx b/packages/react/src/table/table-row-group.tsx
index 43e5cb2f42..d9148486b4 100644
--- a/packages/react/src/table/table-row-group.tsx
+++ b/packages/react/src/table/table-row-group.tsx
@@ -1,40 +1,37 @@
-import React from 'react';
-import { CSS } from '../theme/stitches.config';
-import { useTableRowGroup } from '@react-aria/table';
-import { StyledTableRowGroup, TableRowGroupVariants } from './table.styles';
-import withDefaults from '../utils/with-defaults';
-import clsx from '../utils/clsx';
+import React from "react";
+import {useTableRowGroup} from "@react-aria/table";
+
+import {CSS} from "../theme/stitches.config";
+import withDefaults from "../utils/with-defaults";
+import clsx from "../utils/clsx";
+
+import {StyledTableRowGroup, TableRowGroupVariants} from "./table.styles";
 
 interface Props {
   as?: keyof JSX.IntrinsicElements;
 }
 
 const defaultProps = {
-  as: 'thead'
+  as: "thead",
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type TableRowGroupProps = Props &
-  TableRowGroupVariants &
-  NativeAttrs & { css?: CSS };
+export type TableRowGroupProps = Props & TableRowGroupVariants & NativeAttrs & {css?: CSS};
 
 const TableRowGroup: React.FC<React.PropsWithChildren<TableRowGroupProps>> = ({
   children,
   ...props
 }) => {
   const {
-    rowGroupProps
+    rowGroupProps,
   }: {
-    rowGroupProps: Omit<
-      React.HTMLAttributes<unknown>,
-      keyof TableRowGroupProps
-    >;
+    rowGroupProps: Omit<React.HTMLAttributes<unknown>, keyof TableRowGroupProps>;
   } = useTableRowGroup();
 
   return (
     <StyledTableRowGroup
-      className={clsx('nextui-table-row-group', props.className)}
+      className={clsx("nextui-table-row-group", props.className)}
       {...props}
       {...rowGroupProps}
     >
diff --git a/packages/react/src/table/table-row.tsx b/packages/react/src/table/table-row.tsx
index 857a22fc65..b051eaa7d3 100644
--- a/packages/react/src/table/table-row.tsx
+++ b/packages/react/src/table/table-row.tsx
@@ -1,12 +1,14 @@
-import React, { useRef, useImperativeHandle } from 'react';
-import { CSS } from '../theme/stitches.config';
-import { useTableRow } from '@react-aria/table';
-import { StyledTableRow } from './table.styles';
-import { GridNode } from '@react-types/grid';
-import { TableState } from '@react-stately/table';
-import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import clsx from '../utils/clsx';
+import React, {useRef, useImperativeHandle} from "react";
+import {useTableRow} from "@react-aria/table";
+import {GridNode} from "@react-types/grid";
+import {TableState} from "@react-stately/table";
+import {useFocusRing} from "@react-aria/focus";
+import {mergeProps} from "@react-aria/utils";
+
+import {CSS} from "../theme/stitches.config";
+import clsx from "../utils/clsx";
+
+import {StyledTableRow} from "./table.styles";
 
 interface Props<T> {
   item: GridNode<T>;
@@ -16,50 +18,44 @@ interface Props<T> {
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props<any>>;
 
-export type TableRowProps<T = unknown> = Props<T> & NativeAttrs & { css?: CSS };
+export type TableRowProps<T = unknown> = Props<T> & NativeAttrs & {css?: CSS};
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.PropsWithChildren<TableRowProps>
->(
-  (
-    { children, item, state, ...props },
-    ref: React.Ref<HTMLTableRowElement | null>
-  ) => {
+const TableRow = React.forwardRef<HTMLTableRowElement, React.PropsWithChildren<TableRowProps>>(
+  ({children, item, state, ...props}, ref: React.Ref<HTMLTableRowElement | null>) => {
     const tableRowRef = useRef<HTMLTableRowElement | null>(null);
 
     useImperativeHandle(ref, () => tableRowRef?.current);
 
-    const { rowProps } = useTableRow({ node: item }, state, tableRowRef);
+    const {rowProps} = useTableRow({node: item}, state, tableRowRef);
 
-    const { isFocusVisible, focusProps } = useFocusRing();
+    const {isFocusVisible, focusProps} = useFocusRing();
     const isDisabled = state.disabledKeys.has(item.key);
 
     return (
       <StyledTableRow
         ref={tableRowRef}
-        isFocusVisible={isFocusVisible}
-        isSelected={!!rowProps['aria-selected']}
-        isDisabled={isDisabled}
         className={clsx(
-          'nextui-table-row',
+          "nextui-table-row",
           {
-            'nextui-table-row--selected': rowProps['aria-selected'],
-            'nextui-table-row--disabled': isDisabled
+            "nextui-table-row--selected": rowProps["aria-selected"],
+            "nextui-table-row--disabled": isDisabled,
           },
-          props.className
+          props.className,
         )}
         css={item.props.css}
+        isDisabled={isDisabled}
+        isFocusVisible={isFocusVisible}
+        isSelected={!!rowProps["aria-selected"]}
         {...mergeProps(rowProps, focusProps, props)}
       >
         {children}
       </StyledTableRow>
     );
-  }
+  },
 );
 
-TableRow.displayName = 'NextUI.TableRow';
+TableRow.displayName = "NextUI.TableRow";
 
-TableRow.toString = () => '.nextui-table-row';
+TableRow.toString = () => ".nextui-table-row";
 
 export default TableRow;
diff --git a/packages/react/src/table/table-select-all-checkbox.tsx b/packages/react/src/table/table-select-all-checkbox.tsx
index 502a8b1bfd..2f4f111a3d 100644
--- a/packages/react/src/table/table-select-all-checkbox.tsx
+++ b/packages/react/src/table/table-select-all-checkbox.tsx
@@ -1,85 +1,76 @@
-import React, { useRef, useImperativeHandle } from 'react';
-import { CSS } from '../theme/stitches.config';
-import {
-  useTableColumnHeader,
-  useTableSelectAllCheckbox
-} from '@react-aria/table';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { GridNode } from '@react-types/grid';
-import { TableState } from '@react-stately/table';
-import { useFocusRing } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import Checkbox, { CheckboxProps } from '../checkbox';
-import { StyledTableHeaderCell, TableVariantsProps } from './table.styles';
-import clsx from '../utils/clsx';
+import React, {useRef, useImperativeHandle} from "react";
+import {useTableColumnHeader, useTableSelectAllCheckbox} from "@react-aria/table";
+import {VisuallyHidden} from "@react-aria/visually-hidden";
+import {GridNode} from "@react-types/grid";
+import {TableState} from "@react-stately/table";
+import {useFocusRing} from "@react-aria/focus";
+import {mergeProps} from "@react-aria/utils";
+
+import {CSS} from "../theme/stitches.config";
+import Checkbox, {CheckboxProps} from "../checkbox";
+import clsx from "../utils/clsx";
+
+import {StyledTableHeaderCell, TableVariantsProps} from "./table.styles";
 
 interface Props<T> {
   column: GridNode<T>;
   state: TableState<T>;
-  color?: TableVariantsProps['color'];
+  color?: TableVariantsProps["color"];
   animated?: boolean;
   as?: keyof JSX.IntrinsicElements;
 }
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props<any>>;
 
-export type TableSelectAllCheckboxProps<T = unknown> = Props<T> &
-  NativeAttrs & { css?: CSS };
+export type TableSelectAllCheckboxProps<T = unknown> = Props<T> & NativeAttrs & {css?: CSS};
 
-const TableSelectAllCheckbox = React.forwardRef<
-  HTMLTableCellElement,
-  TableSelectAllCheckboxProps
->(
-  (
-    { column, state, color, animated, ...props },
-    ref: React.Ref<HTMLTableCellElement | null>
-  ) => {
+const TableSelectAllCheckbox = React.forwardRef<HTMLTableCellElement, TableSelectAllCheckboxProps>(
+  ({column, state, color, animated, ...props}, ref: React.Ref<HTMLTableCellElement | null>) => {
     const tableCellRef = useRef<HTMLTableCellElement | null>(null);
 
     useImperativeHandle(ref, () => tableCellRef?.current);
 
-    const isSingleSelectionMode =
-      state.selectionManager.selectionMode === 'single';
+    const isSingleSelectionMode = state.selectionManager.selectionMode === "single";
 
     const {
-      columnHeaderProps
+      columnHeaderProps,
     }: {
       columnHeaderProps: Omit<
         React.HTMLAttributes<unknown>,
         keyof TableSelectAllCheckboxProps<unknown>
       >;
-    } = useTableColumnHeader({ node: column }, state, tableCellRef);
+    } = useTableColumnHeader({node: column}, state, tableCellRef);
 
-    const { checkboxProps } = useTableSelectAllCheckbox(state);
-    const { isFocusVisible, focusProps } = useFocusRing();
+    const {checkboxProps} = useTableSelectAllCheckbox(state);
+    const {isFocusVisible, focusProps} = useFocusRing();
 
     return (
       <StyledTableHeaderCell
         ref={tableCellRef}
+        className={clsx("nextui-table-select-all-checkbox", props.className)}
         isFocusVisible={isFocusVisible}
-        className={clsx('nextui-table-select-all-checkbox', props.className)}
         {...mergeProps(columnHeaderProps, focusProps, props)}
       >
         {isSingleSelectionMode ? (
-          <VisuallyHidden>{checkboxProps['aria-label']}</VisuallyHidden>
+          <VisuallyHidden>{checkboxProps["aria-label"]}</VisuallyHidden>
         ) : (
           <Checkbox
             {...checkboxProps}
-            color={color as CheckboxProps['color']}
-            disableAnimation={!animated}
+            color={color as CheckboxProps["color"]}
             css={{
-              display: 'inherit',
-              $$checkboxBorderColor: '$colors$accents3'
+              display: "inherit",
+              $$checkboxBorderColor: "$colors$accents3",
             }}
+            disableAnimation={!animated}
           />
         )}
       </StyledTableHeaderCell>
     );
-  }
+  },
 );
 
-TableSelectAllCheckbox.displayName = 'NextUI.TableSelectAllCheckbox';
+TableSelectAllCheckbox.displayName = "NextUI.TableSelectAllCheckbox";
 
-TableSelectAllCheckbox.toString = () => '.nextui-table-select-all-checkbox';
+TableSelectAllCheckbox.toString = () => ".nextui-table-select-all-checkbox";
 
 export default TableSelectAllCheckbox;
diff --git a/packages/react/src/table/table-sort-icon.tsx b/packages/react/src/table/table-sort-icon.tsx
index b5dcdf81f5..7936617c86 100644
--- a/packages/react/src/table/table-sort-icon.tsx
+++ b/packages/react/src/table/table-sort-icon.tsx
@@ -1,47 +1,45 @@
-import React from 'react';
-import { styled, VariantProps, CSS } from '../theme/stitches.config';
+import React from "react";
 
-const StyledSortIcon = styled('svg', {
+import {styled, VariantProps, CSS} from "../theme/stitches.config";
+
+const StyledSortIcon = styled("svg", {
   opacity: 0,
-  transition: '$default',
+  transition: "$default",
   path: {
-    fill: '$$tableRowTextColor'
+    fill: "$$tableRowTextColor",
   },
   variants: {
     visible: {
       true: {
-        opacity: 1
-      }
+        opacity: 1,
+      },
     },
     ascending: {
       true: {
-        transform: 'rotate(180deg)'
-      }
-    }
-  }
+        transform: "rotate(180deg)",
+      },
+    },
+  },
 });
 
 type SortIconVariants = VariantProps<typeof StyledSortIcon>;
 
-type NativeAttrs = Omit<
-  React.SVGAttributes<SVGElement>,
-  keyof SortIconVariants
->;
+type NativeAttrs = Omit<React.SVGAttributes<SVGElement>, keyof SortIconVariants>;
 
-export type TableSortIconProps = SortIconVariants & NativeAttrs & { css?: CSS };
+export type TableSortIconProps = SortIconVariants & NativeAttrs & {css?: CSS};
 
 export const ICON_SIZE = 22;
 
 const TableSortIcon: React.FC<TableSortIconProps> = (props) => (
   <StyledSortIcon
-    role="presentation"
     aria-hidden="true"
-    focusable="false"
     className="nextui-table-sort-icon"
-    width={ICON_SIZE}
+    fill="none"
+    focusable="false"
     height={ICON_SIZE}
+    role="presentation"
     viewBox="0 0 24 24"
-    fill="none"
+    width={ICON_SIZE}
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
diff --git a/packages/react/src/table/table.stories.tsx b/packages/react/src/table/table.stories.tsx
index 9889b71feb..059fa69100 100644
--- a/packages/react/src/table/table.stories.tsx
+++ b/packages/react/src/table/table.stories.tsx
@@ -1,88 +1,81 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Table, { TableProps, SortDescriptor } from './index';
-import { getKeyValue } from '../utils/object';
-import {
-  User,
-  Text,
-  Col,
-  Row,
-  Tooltip,
-  styled,
-  useAsyncList,
-  useCollator
-} from '../index';
-import { Eye, Edit, Delete } from '../utils/icons';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {getKeyValue} from "../utils/object";
+import {User, Text, Col, Row, Tooltip, styled, useAsyncList, useCollator} from "../index";
+import {Eye, Edit, Delete} from "../utils/icons";
+
+import Table, {TableProps, SortDescriptor} from "./index";
 
 export default {
-  title: 'Display/Table',
+  title: "Display/Table",
   component: Table,
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: '100%' }}>
+      <div style={{maxWidth: "100%"}}>
         <Story />
       </div>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
-const StyledBadge = styled('span', {
-  display: 'inline-block',
-  textTransform: 'uppercase',
-  padding: '$2 $3',
-  margin: '0 2px',
-  fontSize: '10px',
-  fontWeight: '$bold',
-  borderRadius: '14px',
-  letterSpacing: '0.6px',
+const StyledBadge = styled("span", {
+  display: "inline-block",
+  textTransform: "uppercase",
+  padding: "$2 $3",
+  margin: "0 2px",
+  fontSize: "10px",
+  fontWeight: "$bold",
+  borderRadius: "14px",
+  letterSpacing: "0.6px",
   lineHeight: 1,
-  boxShadow: '1px 2px 5px 0px rgb(0 0 0 / 5%)',
-  alignItems: 'center',
-  alignSelf: 'center',
-  color: '$white',
+  boxShadow: "1px 2px 5px 0px rgb(0 0 0 / 5%)",
+  alignItems: "center",
+  alignSelf: "center",
+  color: "$white",
   variants: {
     type: {
       active: {
-        bg: '$successLight',
-        color: '$success'
+        bg: "$successLight",
+        color: "$success",
       },
       paused: {
-        bg: '$errorLight',
-        color: '$error'
+        bg: "$errorLight",
+        color: "$error",
       },
       vacation: {
-        bg: '$warningLight',
-        color: '$warning'
-      }
-    }
+        bg: "$warningLight",
+        color: "$warning",
+      },
+    },
   },
   defaultVariants: {
-    type: 'active'
-  }
+    type: "active",
+  },
 });
 
-const IconButton = styled('button', {
-  dflex: 'center',
-  border: 'none',
-  outline: 'none',
-  cursor: 'pointer',
-  padding: '0',
-  margin: '0',
-  bg: 'transparent',
-  transition: '$default',
-  '&:hover': {
-    opacity: '0.8'
+const IconButton = styled("button", {
+  dflex: "center",
+  border: "none",
+  outline: "none",
+  cursor: "pointer",
+  padding: "0",
+  margin: "0",
+  bg: "transparent",
+  transition: "$default",
+  "&:hover": {
+    opacity: "0.8",
+  },
+  "&:active": {
+    opacity: "0.6",
   },
-  '&:active': {
-    opacity: '0.6'
-  }
 });
 
 const rows = [
-  { id: 1, name: 'Games', date: '6/7/2020', type: 'File folder' },
-  { id: 2, name: 'Program Files', date: '4/7/2021', type: 'File folder' },
-  { id: 3, name: 'bootmgr', date: '11/20/2010', type: 'System file' },
-  { id: 4, name: 'log.txt', date: '1/18/2016', type: 'Text Document' }
+  {id: 1, name: "Games", date: "6/7/2020", type: "File folder"},
+  {id: 2, name: "Program Files", date: "4/7/2021", type: "File folder"},
+  {id: 3, name: "bootmgr", date: "11/20/2010", type: "System file"},
+  {id: 4, name: "log.txt", date: "1/18/2016", type: "Text Document"},
 ];
 
 // duplicate rows
@@ -90,70 +83,70 @@ const paginatedRows = [
   ...rows,
   {
     id: 5,
-    name: 'Games',
-    date: '6/7/2020',
-    type: 'File folder'
+    name: "Games",
+    date: "6/7/2020",
+    type: "File folder",
   },
   {
     id: 6,
-    name: 'Program Files',
-    date: '4/7/2021',
-    type: 'File folder'
+    name: "Program Files",
+    date: "4/7/2021",
+    type: "File folder",
   },
   {
     id: 7,
-    name: 'bootmgr',
-    date: '11/20/2010',
-    type: 'System file'
+    name: "bootmgr",
+    date: "11/20/2010",
+    type: "System file",
   },
   {
     id: 8,
-    name: 'Games',
-    date: '6/7/2020',
-    type: 'File folder'
+    name: "Games",
+    date: "6/7/2020",
+    type: "File folder",
   },
   {
     id: 9,
-    name: 'Program Files',
-    date: '4/7/2021',
-    type: 'File folder'
+    name: "Program Files",
+    date: "4/7/2021",
+    type: "File folder",
   },
   {
     id: 10,
-    name: 'bootmgr',
-    date: '11/20/2010',
-    type: 'System file'
+    name: "bootmgr",
+    date: "11/20/2010",
+    type: "System file",
   },
   {
     id: 11,
-    name: 'bootmgr',
-    date: '11/20/2010',
-    type: 'System file'
+    name: "bootmgr",
+    date: "11/20/2010",
+    type: "System file",
   },
   {
     id: 12,
-    name: 'Games',
-    date: '6/7/2020',
-    type: 'File folder'
-  }
+    name: "Games",
+    date: "6/7/2020",
+    type: "File folder",
+  },
 ];
 
 const columns = [
-  { name: 'Name', uid: 'name' },
-  { name: 'Type', uid: 'type' },
-  { name: 'Date Modified', uid: 'date' }
+  {name: "Name", uid: "name"},
+  {name: "Type", uid: "type"},
+  {name: "Date Modified", uid: "date"},
 ];
 
-const BaseTable = (props: Omit<TableProps, 'children'>) => {
+const BaseTable = (props: Omit<TableProps, "children">) => {
   return (
     <Table
       aria-label="Example static collection table"
       css={{
-        height: 'auto',
-        minWidth: '620px',
-        '@xsMax': {
-          minWidth: '100%'
-        }
+        height: "auto",
+        minWidth: "620px",
+        "@xsMax": {
+          minWidth: "100%",
+        },
       }}
       {...props}
     >
@@ -197,25 +190,21 @@ export const Dynamic = () => {
     <Table
       aria-label="Example table with dynamic content"
       css={{
-        height: 'auto',
-        minWidth: '620px',
-        '@xsMax': {
-          minWidth: '100%'
-        }
+        height: "auto",
+        minWidth: "620px",
+        "@xsMax": {
+          minWidth: "100%",
+        },
       }}
       selectionMode="multiple"
     >
       <Table.Header columns={columns}>
-        {(column) => (
-          <Table.Column key={column.uid}>{column.name}</Table.Column>
-        )}
+        {(column) => <Table.Column key={column.uid}>{column.name}</Table.Column>}
       </Table.Header>
       <Table.Body items={rows}>
         {(item) => (
           <Table.Row>
-            {(columnKey) => (
-              <Table.Cell>{getKeyValue(item, columnKey)}</Table.Cell>
-            )}
+            {(columnKey) => <Table.Cell>{getKeyValue(item, columnKey)}</Table.Cell>}
           </Table.Row>
         )}
       </Table.Body>
@@ -232,113 +221,82 @@ export const SingleSelection = () => {
 };
 
 export const MultipleSelection = () => {
-  return <BaseTable selectionMode="multiple" color="secondary" />;
+  return <BaseTable color="secondary" selectionMode="multiple" />;
 };
 
 export const Striped = () => {
-  return <BaseTable selectionMode="multiple" striped />;
+  return <BaseTable striped selectionMode="multiple" />;
 };
 
 export const Compact = () => {
-  return <BaseTable selectionMode="multiple" compact />;
+  return <BaseTable compact selectionMode="multiple" />;
 };
 
 export const NoShadow = () => {
-  return (
-    <BaseTable
-      sticked
-      shadow={false}
-      selectionMode="multiple"
-      color="secondary"
-    />
-  );
+  return <BaseTable sticked color="secondary" selectionMode="multiple" shadow={false} />;
 };
 
 export const Lined = () => {
-  return (
-    <BaseTable
-      lined
-      headerLined
-      shadow={false}
-      selectionMode="multiple"
-      color="secondary"
-    />
-  );
+  return <BaseTable headerLined lined color="secondary" selectionMode="multiple" shadow={false} />;
 };
 
 export const Bordered = () => {
-  return (
-    <BaseTable
-      bordered
-      sticked
-      shadow={false}
-      selectionMode="multiple"
-      color="secondary"
-    />
-  );
+  return <BaseTable bordered sticked color="secondary" selectionMode="multiple" shadow={false} />;
 };
 
 export const DisabledKeys = () => {
   return (
-    <BaseTable
-      shadow={false}
-      disabledKeys={['2']}
-      selectionMode="multiple"
-      color="secondary"
-    />
+    <BaseTable color="secondary" disabledKeys={["2"]} selectionMode="multiple" shadow={false} />
   );
 };
 
 export const DisallowEmptySelection = () => {
   return (
     <BaseTable
-      shadow={false}
-      defaultSelectedKeys={['2']}
       disallowEmptySelection
-      selectionMode="multiple"
       color="secondary"
+      defaultSelectedKeys={["2"]}
+      selectionMode="multiple"
+      shadow={false}
     />
   );
 };
 
 export const Sortable = () => {
-  let collator = useCollator({ numeric: true });
+  let collator = useCollator({numeric: true});
 
   let list = useAsyncList({
-    async load({ signal }) {
+    async load({signal}) {
       let res = await fetch(`https://swapi.py4e.com/api/people/?search`, {
-        signal
+        signal,
       });
       let json = await res.json();
+
       return {
-        items: json.results
+        items: json.results,
       };
     },
-    async sort({
-      items,
-      sortDescriptor
-    }: {
-      items: any[];
-      sortDescriptor: SortDescriptor;
-    }) {
+    async sort({items, sortDescriptor}: {items: any[]; sortDescriptor: SortDescriptor}) {
       return {
         items: items.sort((a, b) => {
           let first = a[sortDescriptor.column];
           let second = b[sortDescriptor.column];
           let cmp = collator.compare(first, second);
-          if (sortDescriptor.direction === 'descending') {
+
+          if (sortDescriptor.direction === "descending") {
             cmp *= -1;
           }
+
           return cmp;
-        })
+        }),
       };
-    }
+    },
   });
 
   return (
     <Table
       aria-label="Example static collection table"
-      css={{ width: '640px', height: 'calc($space$14 * 10)' }}
+      css={{width: "640px", height: "calc($space$14 * 10)"}}
       sortDescriptor={list.sortDescriptor}
       onSortChange={list.sort}
     >
@@ -359,9 +317,7 @@ export const Sortable = () => {
       <Table.Body items={list.items} loadingState={list.loadingState}>
         {(item: any) => (
           <Table.Row key={item.name}>
-            {(columnKey) => (
-              <Table.Cell>{getKeyValue(item, columnKey)}</Table.Cell>
-            )}
+            {(columnKey) => <Table.Cell>{getKeyValue(item, columnKey)}</Table.Cell>}
           </Table.Row>
         )}
       </Table.Body>
@@ -373,24 +329,21 @@ export const Pagination = () => {
   return (
     <Table
       bordered
-      shadow={false}
       aria-label="Example table with dynamic content"
+      color="secondary"
       css={{
-        minWidth: '620px',
-        height: 'auto',
-        '@xsMax': {
-          minWidth: '100%'
-        }
+        minWidth: "620px",
+        height: "auto",
+        "@xsMax": {
+          minWidth: "100%",
+        },
       }}
       selectionMode="multiple"
-      color="secondary"
+      shadow={false}
     >
       <Table.Header columns={columns}>
         {(column) => (
-          <Table.Column
-            key={column.uid}
-            align={column.uid === 'date' ? 'end' : 'start'}
-          >
+          <Table.Column key={column.uid} align={column.uid === "date" ? "end" : "start"}>
             {column.name}
           </Table.Column>
         )}
@@ -398,18 +351,16 @@ export const Pagination = () => {
       <Table.Body items={paginatedRows}>
         {(item) => (
           <Table.Row>
-            {(columnKey) => (
-              <Table.Cell>{getKeyValue(item, columnKey)}</Table.Cell>
-            )}
+            {(columnKey) => <Table.Cell>{getKeyValue(item, columnKey)}</Table.Cell>}
           </Table.Row>
         )}
       </Table.Body>
       <Table.Pagination
-        shadow
         noMargin
+        shadow
         align="center"
         rowsPerPage={3}
-        onPageChange={(page) => console.log({ page })}
+        onPageChange={(page) => console.log({page})}
       />
     </Table>
   );
@@ -417,10 +368,10 @@ export const Pagination = () => {
 
 export const InfinityPagination = () => {
   let scopedColumns = [
-    { name: 'Name', uid: 'name' },
-    { name: 'Height', uid: 'height' },
-    { name: 'Mass', uid: 'mass' },
-    { name: 'Birth Year', uid: 'birth_year' }
+    {name: "Name", uid: "name"},
+    {name: "Height", uid: "height"},
+    {name: "Mass", uid: "mass"},
+    {name: "Birth Year", uid: "birth_year"},
   ];
 
   // // fetch people from swapi
@@ -445,48 +396,38 @@ export const InfinityPagination = () => {
   // };
 
   let list = useAsyncList({
-    async load({ signal, cursor }) {
+    async load({signal, cursor}) {
       if (cursor) {
         // write this /^http:\/\//i using RegExp
-        const regex = '/^http:///i';
-        cursor = cursor.replace(regex, 'https://');
+        const regex = "/^http:///i";
+
+        cursor = cursor.replace(regex, "https://");
       }
 
-      let res = await fetch(
-        cursor || 'https://swapi.py4e.com/api/people/?search=',
-        { signal }
-      );
+      let res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
       let json = await res.json();
 
       return {
         items: json.results,
-        cursor: json.next
+        cursor: json.next,
       };
-    }
+    },
   });
 
   return (
     <Table
       bordered
-      shadow={false}
       aria-label="Example table with dynamic content & infinity pagination"
-      css={{ width: '640px', height: 'calc($space$14 * 10)' }}
       color="secondary"
+      css={{width: "640px", height: "calc($space$14 * 10)"}}
+      shadow={false}
     >
       <Table.Header columns={scopedColumns}>
-        {(column) => (
-          <Table.Column key={column.uid}>{column.name}</Table.Column>
-        )}
+        {(column) => <Table.Column key={column.uid}>{column.name}</Table.Column>}
       </Table.Header>
-      <Table.Body
-        items={list.items}
-        loadingState={list.loadingState}
-        onLoadMore={list.loadMore}
-      >
+      <Table.Body items={list.items} loadingState={list.loadingState} onLoadMore={list.loadMore}>
         {(item: any) => (
-          <Table.Row key={item.name}>
-            {(key) => <Table.Cell>{item[key]}</Table.Cell>}
-          </Table.Row>
+          <Table.Row key={item.name}>{(key) => <Table.Cell>{item[key]}</Table.Cell>}</Table.Row>
         )}
       </Table.Body>
     </Table>
@@ -500,141 +441,133 @@ export const CustomCells = () => {
     email?: string;
     role?: string;
     team?: string;
-    status: 'active' | 'paused' | 'vacation';
-    meta?: { [key: string]: any };
+    status: "active" | "paused" | "vacation";
+    meta?: {[key: string]: any};
   };
 
   let customColumns = [
-    { name: 'NAME', uid: 'name' },
-    { name: 'ROLE', uid: 'role' },
-    { name: 'STATUS', uid: 'status' },
-    { name: 'ACTIONS', uid: 'actions' }
+    {name: "NAME", uid: "name"},
+    {name: "ROLE", uid: "role"},
+    {name: "STATUS", uid: "status"},
+    {name: "ACTIONS", uid: "actions"},
   ];
 
   const users: UserType[] = [
     {
       id: 1,
-      name: 'Tony Reichert',
-      role: 'CEO',
-      team: 'Management',
-      status: 'active',
+      name: "Tony Reichert",
+      role: "CEO",
+      team: "Management",
+      status: "active",
       meta: {
-        age: '29',
-        avatar: 'https://i.pravatar.cc/150?u=a042581f4e29026024d',
-        email: 'tony.reichert@example.com'
-      }
+        age: "29",
+        avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+        email: "tony.reichert@example.com",
+      },
     },
     {
       id: 2,
-      name: 'Zoey Lang',
-      role: 'Technical Lead',
-      team: 'Development',
-      status: 'paused',
+      name: "Zoey Lang",
+      role: "Technical Lead",
+      team: "Development",
+      status: "paused",
       meta: {
-        age: '25',
-        avatar: 'https://i.pravatar.cc/150?u=a042581f4e29026704d',
-        email: 'zoey.lang@example.com'
-      }
+        age: "25",
+        avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+        email: "zoey.lang@example.com",
+      },
     },
     {
       id: 3,
-      name: 'Jane Fisher',
-      role: 'Senior Developer',
-      team: 'Development',
-      status: 'active',
+      name: "Jane Fisher",
+      role: "Senior Developer",
+      team: "Development",
+      status: "active",
       meta: {
-        age: '22',
-        avatar: 'https://i.pravatar.cc/150?u=a04258114e29026702d',
-        email: 'jane.fisher@example.com'
-      }
+        age: "22",
+        avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+        email: "jane.fisher@example.com",
+      },
     },
     {
       id: 4,
-      name: 'William Howard',
-      role: 'Community Manager',
-      team: 'Marketing',
-      status: 'vacation',
+      name: "William Howard",
+      role: "Community Manager",
+      team: "Marketing",
+      status: "vacation",
       meta: {
-        age: '28',
-        avatar: 'https://i.pravatar.cc/150?u=a048581f4e29026701d',
-        email: 'william.howard@example.com'
-      }
+        age: "28",
+        avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
+        email: "william.howard@example.com",
+      },
     },
     {
       id: 5,
-      name: 'Kristen Copper',
-      role: 'Sales Manager',
-      team: 'Sales',
-      status: 'active',
+      name: "Kristen Copper",
+      role: "Sales Manager",
+      team: "Sales",
+      status: "active",
       meta: {
-        age: '24',
-        avatar: 'https://i.pravatar.cc/150?u=a092581d4ef9026700d',
-        email: 'kristen.cooper@example.com'
-      }
-    }
+        age: "24",
+        avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
+        email: "kristen.cooper@example.com",
+      },
+    },
   ];
 
   const renderCell = (user: UserType, columnKey: React.Key) => {
     const cellValue = user[columnKey];
+
     switch (columnKey) {
-      case 'name':
+      case "name":
         return (
-          <User
-            squared
-            src={user?.meta?.avatar}
-            name={cellValue}
-            css={{ p: 0 }}
-          >
+          <User squared css={{p: 0}} name={cellValue} src={user?.meta?.avatar}>
             {user?.meta?.email}
           </User>
         );
-      case 'role':
+      case "role":
         return (
           <Col>
             <Row>
-              <Text b size={14} css={{ tt: 'capitalize' }}>
+              <Text b css={{tt: "capitalize"}} size={14}>
                 {cellValue}
               </Text>
             </Row>
             <Row>
-              <Text b size={13} css={{ tt: 'capitalize', color: '$accents3' }}>
+              <Text b css={{tt: "capitalize", color: "$accents3"}} size={13}>
                 {user?.team}
               </Text>
             </Row>
           </Col>
         );
-      case 'status':
+      case "status":
         return <StyledBadge type={user?.status}>{cellValue}</StyledBadge>;
 
-      case 'actions':
+      case "actions":
         return (
-          <Row justify="center" align="center">
-            <Col css={{ d: 'flex' }}>
+          <Row align="center" justify="center">
+            <Col css={{d: "flex"}}>
               <Tooltip content="Details">
-                <IconButton
-                  onClick={() => console.log(`View user ${user?.id}`)}
-                >
-                  <Eye size={20} fill="#979797" />
+                <IconButton onClick={() => console.log(`View user ${user?.id}`)}>
+                  <Eye fill="#979797" size={20} />
                 </IconButton>
               </Tooltip>
             </Col>
-            <Col css={{ d: 'flex' }}>
+            <Col css={{d: "flex"}}>
               <Tooltip content="Edit user">
-                <IconButton
-                  onClick={() => console.log(`edit user ${user?.id}`)}
-                >
-                  <Edit size={20} fill="#979797" />
+                <IconButton onClick={() => console.log(`edit user ${user?.id}`)}>
+                  <Edit fill="#979797" size={20} />
                 </IconButton>
               </Tooltip>
             </Col>
-            <Col css={{ d: 'flex' }}>
+            <Col css={{d: "flex"}}>
               <Tooltip
-                content="Delete user"
                 color="error"
+                content="Delete user"
                 onClick={() => console.log(`Delete user ${user?.id}`)}
               >
                 <IconButton>
-                  <Delete size={20} fill="#FF0080" />
+                  <Delete fill="#FF0080" size={20} />
                 </IconButton>
               </Tooltip>
             </Col>
@@ -648,15 +581,15 @@ export const CustomCells = () => {
   return (
     <Table
       aria-label="Example custom cells info table"
-      css={{ height: 'auto', minWidth: '740px' }}
+      css={{height: "auto", minWidth: "740px"}}
       selectionMode="none"
     >
       <Table.Header columns={customColumns}>
         {(column) => (
           <Table.Column
             key={column.uid}
-            hideHeader={column.uid === 'actions'}
-            align={column.uid === 'actions' ? 'center' : 'start'}
+            align={column.uid === "actions" ? "center" : "start"}
+            hideHeader={column.uid === "actions"}
           >
             {column.name}
           </Table.Column>
@@ -665,9 +598,7 @@ export const CustomCells = () => {
       <Table.Body items={users}>
         {(item: UserType) => (
           <Table.Row>
-            {(columnKey) => (
-              <Table.Cell>{renderCell(item, columnKey)}</Table.Cell>
-            )}
+            {(columnKey) => <Table.Cell>{renderCell(item, columnKey)}</Table.Cell>}
           </Table.Row>
         )}
       </Table.Body>
@@ -676,7 +607,5 @@ export const CustomCells = () => {
 };
 
 export const NoAnimated = () => {
-  return (
-    <BaseTable animated={false} selectionMode="multiple" color="secondary" />
-  );
+  return <BaseTable animated={false} color="secondary" selectionMode="multiple" />;
 };
diff --git a/packages/react/src/table/table.styles.ts b/packages/react/src/table/table.styles.ts
index 4ca378602f..200427e0f7 100644
--- a/packages/react/src/table/table.styles.ts
+++ b/packages/react/src/table/table.styles.ts
@@ -1,65 +1,65 @@
-import { styled, VariantProps } from '../theme/stitches.config';
-import { cssFocusVisible } from '../theme/shared-css';
+import {styled, VariantProps} from "../theme/stitches.config";
+import {cssFocusVisible} from "../theme/shared-css";
 
-export const StyledTableHeaderRow = styled('tr', {
-  ov: 'visible'
+export const StyledTableHeaderRow = styled("tr", {
+  ov: "visible",
 });
 
 export const StyledTableColumnHeader = styled(
-  'th',
+  "th",
   {
-    height: '$14',
-    cursor: 'default',
-    bg: '$accents0',
-    color: '$accents7',
-    fontSize: '$xs',
-    textAlign: 'left',
-    position: 'relative',
-    '@motion': {
-      transition: 'none'
-    },
-    '&:first-child': {
-      pl: '$8',
-      br: '$md 0 0 $md'
-    },
-    '&:last-child': {
-      pr: '$8',
-      br: '0 $md $md 0'
+    height: "$14",
+    cursor: "default",
+    bg: "$accents0",
+    color: "$accents7",
+    fontSize: "$xs",
+    textAlign: "left",
+    position: "relative",
+    "@motion": {
+      transition: "none",
+    },
+    "&:first-child": {
+      pl: "$8",
+      br: "$md 0 0 $md",
+    },
+    "&:last-child": {
+      pr: "$8",
+      br: "0 $md $md 0",
     },
     variants: {
       align: {
         start: {
-          textAlign: 'left'
+          textAlign: "left",
         },
         center: {
-          textAlign: 'center'
+          textAlign: "center",
         },
         end: {
-          textAlign: 'right'
-        }
+          textAlign: "right",
+        },
       },
       animated: {
         false: {
-          transition: 'none'
-        }
+          transition: "none",
+        },
       },
       allowsSorting: {
         true: {
-          transition: 'background 0.25s ease 0s, color 0.25s ease 0s',
-          cursor: 'pointer',
-          '@motion': {
-            transition: 'none'
+          transition: "background 0.25s ease 0s, color 0.25s ease 0s",
+          cursor: "pointer",
+          "@motion": {
+            transition: "none",
+          },
+          "&:hover": {
+            color: "$accents8",
+            bg: "$accents1",
           },
-          '&:hover': {
-            color: '$accents8',
-            bg: '$accents1'
-          }
-        }
-      }
+        },
+      },
     },
     defaultVariants: {
-      align: 'left',
-      animated: true
+      align: "left",
+      animated: true,
     },
     compoundVariants: [
       // !animated & allowsSorting
@@ -67,373 +67,370 @@ export const StyledTableColumnHeader = styled(
         animated: false,
         allowsSorting: true,
         css: {
-          transition: 'none'
-        }
-      }
-    ]
+          transition: "none",
+        },
+      },
+    ],
   },
-  cssFocusVisible
+  cssFocusVisible,
 );
 
-export const StyledTableHeaderCell = styled(
-  StyledTableColumnHeader,
-  cssFocusVisible
-);
+export const StyledTableHeaderCell = styled(StyledTableColumnHeader, cssFocusVisible);
 
-export const StyledTableFooter = styled('tfoot', {
-  height: '$14',
+export const StyledTableFooter = styled("tfoot", {
+  height: "$14",
   variants: {
     align: {
       start: {
-        textAlign: 'left'
+        textAlign: "left",
       },
       center: {
-        textAlign: 'center'
+        textAlign: "center",
       },
       end: {
-        textAlign: 'right'
-      }
-    }
+        textAlign: "right",
+      },
+    },
   },
   defaultVariants: {
-    align: 'right'
-  }
+    align: "right",
+  },
 });
 
-export const StyledBaseTableCell = styled('td', {});
+export const StyledBaseTableCell = styled("td", {});
 
 export const StyledTableCell = styled(
   StyledBaseTableCell,
   {
-    position: 'relative',
-    userSelect: 'none',
-    py: '$5',
-    pr: '$5',
-    zIndex: '$2',
-    ov: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    '&:first-child': {
-      pl: '$8'
-    },
-    '&:last-child': {
-      pr: '$8'
-    },
-    '&:before': {
-      zIndex: '-$1',
-      transition: 'background 0.25s ease 0s, opacity 0.25s ease 0s',
+    position: "relative",
+    userSelect: "none",
+    py: "$5",
+    pr: "$5",
+    zIndex: "$2",
+    ov: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    "&:first-child": {
+      pl: "$8",
+    },
+    "&:last-child": {
+      pr: "$8",
+    },
+    "&:before": {
+      zIndex: "-$1",
+      transition: "background 0.25s ease 0s, opacity 0.25s ease 0s",
       content: '""',
-      position: 'absolute',
-      size: '100%',
+      position: "absolute",
+      size: "100%",
       top: 0,
       left: 0,
       opacity: 0,
-      transform: 'translateZ(0)',
-      backfaceVisibility: 'hidden'
+      transform: "translateZ(0)",
+      backfaceVisibility: "hidden",
     },
     variants: {
       align: {
         start: {
-          textAlign: 'left'
+          textAlign: "left",
         },
         center: {
-          textAlign: 'center'
+          textAlign: "center",
         },
         end: {
-          textAlign: 'right'
-        }
-      }
-    }
+          textAlign: "right",
+        },
+      },
+    },
   },
-  cssFocusVisible
+  cssFocusVisible,
 );
 
 export const StyledTableRow = styled(
-  'tr',
+  "tr",
   {
-    ov: 'visible',
-    color: '$text',
+    ov: "visible",
+    color: "$text",
     variants: {
       isDisabled: {
         true: {
-          color: '$accents3',
-          pointerEvents: 'none',
-          cursor: 'not-allowed'
-        }
+          color: "$accents3",
+          pointerEvents: "none",
+          cursor: "not-allowed",
+        },
       },
       isSelected: {
         true: {
-          color: '$$tableRowTextColor',
+          color: "$$tableRowTextColor",
           [`& ${StyledTableCell}:before`]: {
             opacity: 1,
-            bg: '$$tableRowColor'
-          }
-        }
-      }
-    }
+            bg: "$$tableRowColor",
+          },
+        },
+      },
+    },
   },
-  cssFocusVisible
+  cssFocusVisible,
 );
 
-export const StyledTableRowGroup = styled('thead', {
+export const StyledTableRowGroup = styled("thead", {
   variants: {
     isFixed: {
       true: {
-        display: 'table',
-        width: '100%',
-        tableLayout: 'fixed'
-      }
+        display: "table",
+        width: "100%",
+        tableLayout: "fixed",
+      },
     },
     isInfinityScroll: {
       true: {
-        display: 'block',
-        height: '100%',
-        overflow: 'auto',
+        display: "block",
+        height: "100%",
+        overflow: "auto",
         [`& ${StyledTableRow}`]: {
-          display: 'table',
-          width: '100%',
-          tableLayout: 'fixed'
-        }
-      }
-    }
+          display: "table",
+          width: "100%",
+          tableLayout: "fixed",
+        },
+      },
+    },
   },
   defaultVariants: {
-    isInfinityScroll: false
-  }
+    isInfinityScroll: false,
+  },
 });
 
-export const StyledTableLoadingRow = styled('tr', {
-  width: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: 'calc(100% - $space$14)',
+export const StyledTableLoadingRow = styled("tr", {
+  width: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "calc(100% - $space$14)",
   variants: {
     isAtEnd: {
       true: {
-        height: '$space$18'
-      }
+        height: "$space$18",
+      },
     },
     isAbsolute: {
       true: {
-        position: 'absolute',
-        left: '0',
-        top: '$10'
-      }
-    }
-  }
+        position: "absolute",
+        left: "0",
+        top: "$10",
+      },
+    },
+  },
 });
 
-export const StyledTable = styled('table', {
-  borderCollapse: 'separate',
+export const StyledTable = styled("table", {
+  borderCollapse: "separate",
   borderSpacing: 0,
-  width: '100%',
-  p: '$md $sm',
-  '@motion': {
+  width: "100%",
+  p: "$md $sm",
+  "@motion": {
     [`& ${StyledTableCell}:before`]: {
-      transition: 'none'
-    }
+      transition: "none",
+    },
   },
   variants: {
     animated: {
       false: {
         [`& ${StyledTableCell}:before`]: {
-          transition: 'none'
-        }
-      }
+          transition: "none",
+        },
+      },
     },
     color: {
       primary: {
-        $$tableRowColor: '$colors$primaryLight',
-        $$tableRowTextColor: '$colors$primaryLightContrast'
+        $$tableRowColor: "$colors$primaryLight",
+        $$tableRowTextColor: "$colors$primaryLightContrast",
       },
       secondary: {
-        $$tableRowColor: '$colors$secondaryLight',
-        $$tableRowTextColor: '$colors$secondaryLightContrast'
+        $$tableRowColor: "$colors$secondaryLight",
+        $$tableRowTextColor: "$colors$secondaryLightContrast",
       },
       success: {
-        $$tableRowColor: '$colors$successLight',
-        $$tableRowTextColor: '$colors$successLightContrast'
+        $$tableRowColor: "$colors$successLight",
+        $$tableRowTextColor: "$colors$successLightContrast",
       },
       warning: {
-        $$tableRowColor: '$colors$warningLight',
-        $$tableRowTextColor: '$colors$warningLightContrast'
+        $$tableRowColor: "$colors$warningLight",
+        $$tableRowTextColor: "$colors$warningLightContrast",
       },
       error: {
-        $$tableRowColor: '$colors$errorLight',
-        $$tableRowTextColor: '$colors$errorLightContrast'
-      }
+        $$tableRowColor: "$colors$errorLight",
+        $$tableRowTextColor: "$colors$errorLightContrast",
+      },
     },
     striped: {
       true: {
         [`& ${StyledTableRow}[aria-selected=false]:nth-child(even)`]: {
           [`& ${StyledTableCell}`]: {
-            bg: '$accents0'
-          }
+            bg: "$accents0",
+          },
         },
         [`& ${StyledTableRow}:nth-child(even)`]: {
           [`& ${StyledTableCell}:first-child`]: {
-            br: '$lg 0 0 $lg'
+            br: "$lg 0 0 $lg",
           },
           [`& ${StyledTableCell}:last-child`]: {
-            br: '0 $lg $lg 0'
-          }
-        }
-      }
+            br: "0 $lg $lg 0",
+          },
+        },
+      },
     },
     sticked: {
       true: {
         p: 0,
         [`& ${StyledTableColumnHeader}:first-child`]: {
-          br: '$lg 0 0 0'
+          br: "$lg 0 0 0",
         },
         [`& ${StyledTableColumnHeader}:last-child`]: {
-          br: '0 $lg 0 0'
-        }
-      }
+          br: "0 $lg 0 0",
+        },
+      },
     },
     lineWeight: {
       light: {
-        $$tableLineWeight: '$borderWeights$light'
+        $$tableLineWeight: "$borderWeights$light",
       },
       normal: {
-        $$tableLineWeight: '$borderWeights$normal'
+        $$tableLineWeight: "$borderWeights$normal",
       },
       bold: {
-        $$tableLineWeight: '$borderWeights$bold'
+        $$tableLineWeight: "$borderWeights$bold",
       },
       extrabold: {
-        $$tableLineWeight: '$borderWeights$extrabold'
+        $$tableLineWeight: "$borderWeights$extrabold",
       },
       black: {
-        $$tableLineWeight: '$borderWeights$black'
-      }
+        $$tableLineWeight: "$borderWeights$black",
+      },
     },
     headerLined: {
       true: {
         [`& ${StyledTableColumnHeader}`]: {
-          position: 'relative',
-          bg: 'transparent',
-          '&:after': {
-            content: '',
-            position: 'absolute',
+          position: "relative",
+          bg: "transparent",
+          "&:after": {
+            content: "",
+            position: "absolute",
             left: 0,
             right: 0,
             bottom: 0,
-            height: 'calc($$tableLineWeight * 1.5)',
-            bg: '$accents1'
+            height: "calc($$tableLineWeight * 1.5)",
+            bg: "$accents1",
           },
-          '&:first-child': {
-            ml: '$12',
-            br: '0',
-            '&:after': {
-              left: '$space$md'
-            }
+          "&:first-child": {
+            ml: "$12",
+            br: "0",
+            "&:after": {
+              left: "$space$md",
+            },
           },
-          '&:last-child': {
-            br: '0',
-            '&:after': {
-              right: '$space$md'
-            }
-          }
-        }
-      }
+          "&:last-child": {
+            br: "0",
+            "&:after": {
+              right: "$space$md",
+            },
+          },
+        },
+      },
     },
     lined: {
       true: {
         [`& ${StyledTableRow}:not(:last-child)`]: {
-          position: 'relative',
+          position: "relative",
           [`& ${StyledTableCell}:after`]: {
-            content: '',
-            position: 'absolute',
+            content: "",
+            position: "absolute",
             bottom: 0,
             left: 0,
             right: 0,
-            height: '$$tableLineWeight',
-            bg: '$border'
+            height: "$$tableLineWeight",
+            bg: "$border",
           },
           [`& ${StyledTableCell}:first-child`]: {
-            '&:after': {
-              left: '$space$md'
-            }
+            "&:after": {
+              left: "$space$md",
+            },
           },
           [`& ${StyledTableCell}:last-child`]: {
-            '&:after': {
-              right: '$space$md'
-            }
-          }
+            "&:after": {
+              right: "$space$md",
+            },
+          },
         },
         [`& ${StyledTableRow}[aria-selected=true]:not(last-child)`]: {
           [`& ${StyledTableCell}:after`]: {
-            bg: '$$tableRowTextColor',
-            opacity: 0.3
-          }
-        }
-      }
+            bg: "$$tableRowTextColor",
+            opacity: 0.3,
+          },
+        },
+      },
     },
     fixed: {
       true: {
-        tableLayout: 'fixed'
-      }
+        tableLayout: "fixed",
+      },
     },
     hoverable: {
       true: {
         [`& ${StyledTableCell}:first-child`]: {
-          br: '$md 0 0 $md'
+          br: "$md 0 0 $md",
         },
         [`& ${StyledTableCell}:last-child`]: {
-          br: '0 $md $md 0'
+          br: "0 $md $md 0",
         },
         [`& ${StyledTableRow}`]: {
-          cursor: 'pointer'
+          cursor: "pointer",
         },
         [`& ${StyledTableRow}[aria-selected=false]`]: {
-          '&:hover': {
+          "&:hover": {
             [`& ${StyledTableCell}:before`]: {
               opacity: 1,
-              bg: '$accents0'
-            }
-          }
+              bg: "$accents0",
+            },
+          },
         },
         [`& ${StyledTableRow}[aria-selected=true]`]: {
-          '&:hover': {
+          "&:hover": {
             [`& ${StyledTableCell}:before`]: {
-              opacity: 0.8
-            }
-          }
-        }
+              opacity: 0.8,
+            },
+          },
+        },
       },
       false: {
         [`& ${StyledTableCell}`]: {
-          userSelect: 'all'
-        }
-      }
+          userSelect: "all",
+        },
+      },
     },
     isMultiple: {
-      true: {}
+      true: {},
     },
     hasPagination: {
-      true: {}
+      true: {},
     },
     shadow: {
-      true: {}
+      true: {},
     },
     compact: {
       true: {
         [`& ${StyledTableCell}`]: {
-          py: '$1'
+          py: "$1",
         },
         [`& ${StyledTableColumnHeader}`]: {
-          height: '$12',
-          '&:first-child': {
-            br: '$sm 0 0 $sm'
+          height: "$12",
+          "&:first-child": {
+            br: "$sm 0 0 $sm",
           },
-          '&:last-child': {
-            br: '0 $sm $sm 0'
-          }
-        }
-      }
-    }
+          "&:last-child": {
+            br: "0 $sm $sm 0",
+          },
+        },
+      },
+    },
   },
   compoundVariants: [
     // isMultiple && hoverable
@@ -443,29 +440,29 @@ export const StyledTable = styled('table', {
       css: {
         [`& ${StyledTableRow}:not(:first-child):not(:last-child)`]: {
           [`& ${StyledTableCell}:first-child`]: {
-            br: 0
+            br: 0,
           },
           [`& ${StyledTableCell}:last-child`]: {
-            br: 0
-          }
+            br: 0,
+          },
         },
         [`& ${StyledTableRow}:first-child`]: {
           [`& ${StyledTableCell}:first-child`]: {
-            br: '$md 0 0 0'
+            br: "$md 0 0 0",
           },
           [`& ${StyledTableCell}:last-child`]: {
-            br: '0 $md 0 0'
-          }
+            br: "0 $md 0 0",
+          },
         },
         [`& ${StyledTableRow}:last-child`]: {
           [`& ${StyledTableCell}:first-child`]: {
-            br: '0 0 0 $md'
+            br: "0 0 0 $md",
           },
           [`& ${StyledTableCell}:last-child`]: {
-            br: '0 0 $md 0'
-          }
-        }
-      }
+            br: "0 0 $md 0",
+          },
+        },
+      },
     },
     // isMultiple && hoverable && sticked
     {
@@ -475,29 +472,29 @@ export const StyledTable = styled('table', {
       css: {
         [`& ${StyledTableRow}:first-child`]: {
           [`& ${StyledTableCell}:first-child`]: {
-            br: '0'
+            br: "0",
           },
           [`& ${StyledTableCell}:last-child`]: {
-            br: '0'
-          }
-        }
-      }
+            br: "0",
+          },
+        },
+      },
     },
     // compact && shadow
     {
       compact: true,
       shadow: true,
       css: {
-        p: '$md $sm'
-      }
+        p: "$md $sm",
+      },
     },
     // compact && sticked
     {
       compact: true,
       sticked: true,
       css: {
-        p: 0
-      }
+        p: 0,
+      },
     },
     // sticked && !isMultiple && hoverable && !hasPagination
     {
@@ -508,18 +505,18 @@ export const StyledTable = styled('table', {
       css: {
         [`& ${StyledTableRow}:not(:last-child)`]: {
           [`& ${StyledTableCell}`]: {
-            br: '0'
-          }
+            br: "0",
+          },
         },
         [`& ${StyledTableRow}:last-child`]: {
           [`& ${StyledTableCell}:first-child`]: {
-            br: '0 0 0 $md'
+            br: "0 0 0 $md",
           },
           [`& ${StyledTableCell}:last-child`]: {
-            br: '0 0 $md 0'
-          }
-        }
-      }
+            br: "0 0 $md 0",
+          },
+        },
+      },
     },
     // sticked && !isMultiple && hoverable && hasPagination
     {
@@ -530,18 +527,18 @@ export const StyledTable = styled('table', {
       css: {
         [`& ${StyledTableRow}`]: {
           [`& ${StyledTableCell}`]: {
-            br: '0'
-          }
-        }
-      }
+            br: "0",
+          },
+        },
+      },
     },
     // sticked && hasPagination
     {
       sticked: true,
       hasPagination: true,
       css: {
-        pb: '$5'
-      }
+        pb: "$5",
+      },
     },
     // sticked && hasPagination && isMultiple && hoverable
     {
@@ -552,74 +549,70 @@ export const StyledTable = styled('table', {
       css: {
         [`& ${StyledTableRow}:last-child`]: {
           [`& ${StyledTableCell}:first-child`]: {
-            br: '0'
+            br: "0",
           },
           [`& ${StyledTableCell}:last-child`]: {
-            br: '0'
-          }
-        }
-      }
-    }
+            br: "0",
+          },
+        },
+      },
+    },
   ],
   defaultVariants: {
     sticked: false,
-    color: 'primary',
-    lineWeight: 'light'
-  }
+    color: "primary",
+    lineWeight: "light",
+  },
 });
 
-export const StyledTableContainer = styled('div', {
-  display: 'flex',
-  flexDirection: 'column',
-  br: '$xl',
-  overflowX: 'auto',
-  overflowY: 'hidden',
+export const StyledTableContainer = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  br: "$xl",
+  overflowX: "auto",
+  overflowY: "hidden",
   variants: {
     shadow: {
       true: {
-        bs: '$md'
-      }
+        bs: "$md",
+      },
     },
     bordered: {
       true: {
-        borderStyle: 'solid',
-        borderColor: '$border'
+        borderStyle: "solid",
+        borderColor: "$border",
       },
       false: {
-        bw: 0
-      }
+        bw: 0,
+      },
     },
     borderWeight: {
       light: {
-        bw: '$light'
+        bw: "$light",
       },
       normal: {
-        bw: '$normal'
+        bw: "$normal",
       },
       bold: {
-        bw: '$bold'
+        bw: "$bold",
       },
       extrabold: {
-        bw: '$extrabold'
+        bw: "$extrabold",
       },
       black: {
-        bw: '$black'
-      }
-    }
+        bw: "$black",
+      },
+    },
   },
   defaultVariants: {
     shadow: true,
-    borderWeight: 'normal'
-  }
+    borderWeight: "normal",
+  },
 });
 
 export type TableVariantsProps = VariantProps<typeof StyledTable>;
-export type TableContainerVariantsProps = VariantProps<
-  typeof StyledTableContainer
->;
+export type TableContainerVariantsProps = VariantProps<typeof StyledTableContainer>;
 export type TableCellVariantsProps = VariantProps<typeof StyledTableCell>;
-export type TableColumnHeaderVariantsProps = VariantProps<
-  typeof StyledTableColumnHeader
->;
+export type TableColumnHeaderVariantsProps = VariantProps<typeof StyledTableColumnHeader>;
 export type TableFooterVatiantsProps = VariantProps<typeof StyledTableFooter>;
 export type TableRowGroupVariants = VariantProps<typeof StyledTableRowGroup>;
diff --git a/packages/react/src/table/table.tsx b/packages/react/src/table/table.tsx
index a8b9199659..10832c294e 100644
--- a/packages/react/src/table/table.tsx
+++ b/packages/react/src/table/table.tsx
@@ -1,48 +1,37 @@
-import React, {
-  useImperativeHandle,
-  useRef,
-  RefAttributes,
-  PropsWithoutRef
-} from 'react';
-import { useTable } from '@react-aria/table';
-
-import { useTableState, TableStateProps } from '@react-stately/table';
-
-import {
-  SelectionMode,
-  SelectionBehavior,
-  CollectionChildren
-} from '@react-types/shared';
-
-import { Spacer } from '../index';
-import { CSS } from '../theme/stitches.config';
-import TableRowGroup from './table-row-group';
-import TableColumnHeader from './table-column-header';
-import TableHeaderRow from './table-header-row';
-import TableSelectAllCheckbox from './table-select-all-checkbox';
+import React, {useImperativeHandle, useRef, RefAttributes, PropsWithoutRef} from "react";
+import {useTable} from "@react-aria/table";
+import {useTableState, TableStateProps} from "@react-stately/table";
+import {SelectionMode, SelectionBehavior, CollectionChildren} from "@react-types/shared";
+
+import {Spacer} from "../index";
+import {CSS} from "../theme/stitches.config";
+import {pickSingleChild} from "../utils/collections";
+import {excludedTableProps} from "../utils/prop-types";
+import withDefaults from "../utils/with-defaults";
+import clsx from "../utils/clsx";
+
+import TableRowGroup from "./table-row-group";
+import TableColumnHeader from "./table-column-header";
+import TableHeaderRow from "./table-header-row";
+import TableSelectAllCheckbox from "./table-select-all-checkbox";
 import {
   TableColumn as TableColumnBase,
   TableCell as TableCellBase,
   TableRow as TableRowBase,
   TableBody as TableBodyBase,
-  TableHeader as TableHeaderBase
-} from './base';
-
-import TablePagination from './table-pagination';
-import TableFooter from './table-footer';
-import TableBody from './table-body';
-import { pickSingleChild } from '../utils/collections';
+  TableHeader as TableHeaderBase,
+} from "./base";
+import TablePagination from "./table-pagination";
+import TableFooter from "./table-footer";
+import TableBody from "./table-body";
 import {
   StyledTable,
   StyledTableContainer,
   TableVariantsProps,
-  TableContainerVariantsProps
-} from './table.styles';
-import TableContext, { TableConfig } from './table-context';
-import { excludedTableProps } from '../utils/prop-types';
-import { isInfinityScroll, hasPaginationChild } from './utils';
-import withDefaults from '../utils/with-defaults';
-import clsx from '../utils/clsx';
+  TableContainerVariantsProps,
+} from "./table.styles";
+import TableContext, {TableConfig} from "./table-context";
+import {isInfinityScroll, hasPaginationChild} from "./utils";
 
 interface Props<T> extends TableStateProps<T> {
   selectionMode?: SelectionMode;
@@ -52,21 +41,18 @@ interface Props<T> extends TableStateProps<T> {
   as?: keyof JSX.IntrinsicElements;
 }
 
-type NativeAttrs = Omit<
-  React.TableHTMLAttributes<unknown>,
-  keyof Props<object>
->;
+type NativeAttrs = Omit<React.TableHTMLAttributes<unknown>, keyof Props<object>>;
 
 export type TableProps<T = object> = Props<T> &
   NativeAttrs &
-  Omit<TableVariantsProps, 'isMultiple' | 'shadow' | 'hasPagination'> &
-  TableContainerVariantsProps & { css?: CSS; containerCss?: CSS };
+  Omit<TableVariantsProps, "isMultiple" | "shadow" | "hasPagination"> &
+  TableContainerVariantsProps & {css?: CSS; containerCss?: CSS};
 
 const defaultProps = {
   animated: true,
   hideLoading: false,
-  selectionMode: 'none',
-  selectionBehavior: 'toggle'
+  selectionMode: "none",
+  selectionBehavior: "toggle",
 };
 
 const Table = React.forwardRef<HTMLTableElement, TableProps>(
@@ -89,10 +75,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
       CollectionChildren<any>
     >(children, TablePagination);
 
-    const { hasPagination, rowsPerPage } = hasPaginationChild(
-      children,
-      TablePagination
-    );
+    const {hasPagination, rowsPerPage} = hasPaginationChild(children, TablePagination);
 
     const state = useTableState({
       ...tableProps,
@@ -100,7 +83,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
       showSelectionCheckboxes:
         tableProps.showSelectionCheckboxes !== undefined
           ? tableProps.showSelectionCheckboxes
-          : selectionMode === 'multiple' && selectionBehavior !== 'replace'
+          : selectionMode === "multiple" && selectionBehavior !== "replace",
     });
 
     // clean table props
@@ -115,9 +98,9 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
 
     useImperativeHandle(ref, () => tableRef?.current);
 
-    const { collection } = state;
+    const {collection} = state;
     const {
-      gridProps
+      gridProps,
     }: {
       gridProps: Omit<React.HTMLAttributes<unknown>, keyof TableProps<unknown>>;
     } = useTable(tableProps, state, tableRef);
@@ -127,80 +110,70 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
         collection,
         color,
         animated,
-        rowsPerPage
+        rowsPerPage,
       };
     }, [collection, animated, color, rowsPerPage]);
 
     return (
       <TableContext.Provider defaultValues={initialValues}>
         <StyledTableContainer
-          shadow={shadow}
           borderWeight={borderWeight}
           bordered={bordered}
           className="nextui-table-container"
-          css={{ ...(containerCss as any) }}
+          css={{...(containerCss as any)}}
+          shadow={shadow}
         >
           <StyledTable
             ref={tableRef}
-            color={color}
-            shadow={shadow}
             animated={animated}
-            hoverable={selectionMode !== 'none' || props.hoverable}
-            isMultiple={selectionMode === 'multiple'}
+            className={clsx("nextui-table", props.className)}
+            color={color}
             hasPagination={hasPagination}
-            className={clsx('nextui-table', props.className)}
+            hoverable={selectionMode !== "none" || props.hoverable}
+            isMultiple={selectionMode === "multiple"}
+            shadow={shadow}
             {...gridProps}
             {...props}
           >
             <TableRowGroup as="thead" isFixed={isInfinityScroll(collection)}>
               {collection.headerRows.map((headerRow) => (
-                <TableHeaderRow
-                  key={headerRow?.key}
-                  item={headerRow}
-                  state={state}
-                >
+                <TableHeaderRow key={headerRow?.key} item={headerRow} state={state}>
                   {[...headerRow.childNodes].map((column) =>
                     column?.props?.isSelectionCell ? (
                       <TableSelectAllCheckbox
                         key={column?.key}
+                        animated={animated}
+                        color={color}
                         column={column}
                         state={state}
-                        color={color}
-                        animated={animated}
                       />
                     ) : (
                       <TableColumnHeader
                         key={column?.key}
+                        animated={animated}
                         column={column}
                         state={state}
-                        animated={animated}
                       />
-                    )
+                    ),
                   )}
                 </TableHeaderRow>
               ))}
-              {!props.sticked && (
-                <Spacer as="tr" className="nextui-table-hidden-row" y={0.4} />
-              )}
+              {!props.sticked && <Spacer as="tr" className="nextui-table-hidden-row" y={0.4} />}
             </TableRowGroup>
             <TableBody
-              state={state}
-              color={color}
-              collection={collection}
               animated={animated}
+              collection={collection}
+              color={color}
               hasPagination={hasPagination}
               hideLoading={hideLoading}
+              state={state}
             />
 
             {hasPagination && (
               <TableFooter>
                 <Spacer as="tr" className="nextui-table-hidden-row" y={0.6} />
                 <tr role="row">
-                  <th
-                    tabIndex={-1}
-                    role="columnheader"
-                    colSpan={collection.columnCount}
-                  >
+                  <th colSpan={collection.columnCount} role="columnheader" tabIndex={-1}>
                     {paginationChildren}
                   </th>
                 </tr>
@@ -210,7 +183,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
         </StyledTableContainer>
       </TableContext.Provider>
     );
-  }
+  },
 );
 
 type TableComponent<T, P = {}> = React.ForwardRefExoticComponent<
@@ -224,10 +197,7 @@ type TableComponent<T, P = {}> = React.ForwardRefExoticComponent<
   Pagination: typeof TablePagination;
 };
 
-Table.displayName = 'NextUI.Table';
-Table.toString = () => '.nextui-table';
+Table.displayName = "NextUI.Table";
+Table.toString = () => ".nextui-table";
 
-export default withDefaults(Table, defaultProps) as TableComponent<
-  HTMLTableElement,
-  TableProps
->;
+export default withDefaults(Table, defaultProps) as TableComponent<HTMLTableElement, TableProps>;
diff --git a/packages/react/src/table/utils.ts b/packages/react/src/table/utils.ts
index 82ae7e77b0..ab543a9255 100644
--- a/packages/react/src/table/utils.ts
+++ b/packages/react/src/table/utils.ts
@@ -1,26 +1,26 @@
-import React, { ReactNode } from 'react';
-import { TableCollection } from '@react-types/table';
+import React, {ReactNode} from "react";
+import {TableCollection} from "@react-types/table";
 
 export const hasPaginationChild = (
   children: ReactNode | undefined,
-  child: React.ElementType
-): { hasPagination: boolean; rowsPerPage: number } => {
+  child: React.ElementType,
+): {hasPagination: boolean; rowsPerPage: number} => {
   const pagination = React.Children.toArray(children).find(
-    (item) => React.isValidElement(item) && item.type === child
+    (item) => React.isValidElement(item) && item.type === child,
   );
+
   if (React.isValidElement(pagination)) {
     return {
       hasPagination: true,
-      rowsPerPage: pagination?.props?.rowsPerPage || 0
+      rowsPerPage: pagination?.props?.rowsPerPage || 0,
     };
   }
-  return { hasPagination: false, rowsPerPage: 0 };
+
+  return {hasPagination: false, rowsPerPage: 0};
 };
 
 export const isInfinityScroll = (collection: TableCollection<unknown>) => {
   const bodyProps = collection.body?.props;
-  return (
-    bodyProps?.loadingState !== undefined &&
-    typeof bodyProps?.onLoadMore === 'function'
-  );
+
+  return bodyProps?.loadingState !== undefined && typeof bodyProps?.onLoadMore === "function";
 };
diff --git a/packages/react/src/text/__tests__/index.test.tsx b/packages/react/src/text/__tests__/index.test.tsx
index 5f5fd50adf..c57c7d1a91 100644
--- a/packages/react/src/text/__tests__/index.test.tsx
+++ b/packages/react/src/text/__tests__/index.test.tsx
@@ -1,80 +1,88 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Text from '../index';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('Text', () => {
-  it('should render P element in the default', () => {
+import Text from "../index";
+
+describe("Text", () => {
+  it("should render P element in the default", () => {
     const wrapper = mount(<Text>test-value</Text>);
-    expect(wrapper.find('p')).not.toBe(0);
+
+    expect(wrapper.find("p")).not.toBe(0);
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with different styles', () => {
+  it("should work with different styles", () => {
     const wrapper = mount(
       <div>
         <Text color="secondary">test-value</Text>
         <Text color="success">test-value</Text>
         <Text color="warning">test-value</Text>
         <Text color="error">test-value</Text>
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('the specified element should be rendered', () => {
+  it("the specified element should be rendered", () => {
     const elements = [
-      'h1',
-      'h2',
-      'h3',
-      'h4',
-      'h5',
-      'h6',
-      'p',
-      'small',
-      'span',
-      'del',
-      'i',
-      'em',
-      'b'
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "p",
+      "small",
+      "span",
+      "del",
+      "i",
+      "em",
+      "b",
     ];
     const wrapper = mount(
       <div>
         {elements.map((el, index) => {
-          const prop = { [el]: true };
+          const prop = {[el]: true};
+
           return (
             <Text {...prop} key={`${el}-${index}`}>
               test-value
             </Text>
           );
         })}
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('the combined style should be rendered', () => {
+  it("the combined style should be rendered", () => {
     const wrapper = mount(
       <Text b del>
         test-value
-      </Text>
+      </Text>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should render default color when type missing', () => {
+  it("should render default color when type missing", () => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const Mock = Text as any;
     const wrapper = mount(<Mock type="unknow">test-value</Mock>);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should be able to specify the size of text', () => {
+  it("should be able to specify the size of text", () => {
     let wrapper = mount(<Text size={14}>test-value</Text>);
+
     expect(wrapper.html()).toMatchSnapshot();
 
     wrapper = mount(<Text size="12rem">test-value</Text>);
diff --git a/packages/react/src/text/child.tsx b/packages/react/src/text/child.tsx
index 5ba05c2d3b..7292ff0751 100644
--- a/packages/react/src/text/child.tsx
+++ b/packages/react/src/text/child.tsx
@@ -1,11 +1,13 @@
-import React, { useMemo, ReactNode } from 'react';
-import { CSS, FontSizes, baseTheme } from '../theme/stitches.config';
-import { SimpleColors, TextTransforms } from '../utils/prop-types';
-import { isNormalColor } from '../utils/color';
-import { ReactRef } from '../utils/refs';
-import { useDOMRef } from '../utils/dom';
-import { StyledText, TextVariantsProps } from './text.styles';
-import { __DEV__ } from '../utils/assertion';
+import React, {useMemo, ReactNode} from "react";
+
+import {CSS, FontSizes, baseTheme} from "../theme/stitches.config";
+import {SimpleColors, TextTransforms} from "../utils/prop-types";
+import {isNormalColor} from "../utils/color";
+import {ReactRef} from "../utils/refs";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+
+import {StyledText, TextVariantsProps} from "./text.styles";
 
 type As = keyof JSX.IntrinsicElements | React.ComponentType<any>;
 type FontSize = number | string | keyof FontSizes;
@@ -24,63 +26,55 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
 export type TextChildProps = Props & NativeAttrs & TextVariantsProps;
 
-export const TextChild = React.forwardRef(
-  (props: TextChildProps, ref: ReactRef<HTMLElement>) => {
-    const {
-      children,
-      tag,
-      color: userColor = 'default',
-      transform,
-      size,
-      css,
-      ...otherProps
-    } = props;
-
-    const domRef = useDOMRef(ref);
-
-    const fontSize = useMemo<FontSize>(() => {
-      if (!size) return 'inherit';
-      if (typeof size === 'number') return `${size}px`;
-      if (baseTheme.theme.fontSizes?.[size as keyof FontSizes]) {
-        return `$${size}`;
-      }
-      return size;
-    }, [size]);
-
-    const color = useMemo(() => {
-      if (isNormalColor(userColor)) {
-        switch (userColor) {
-          case 'default':
-            return '$text';
-          default:
-            return `$${userColor}`;
-        }
+export const TextChild = React.forwardRef((props: TextChildProps, ref: ReactRef<HTMLElement>) => {
+  const {children, tag, color: userColor = "default", transform, size, css, ...otherProps} = props;
+
+  const domRef = useDOMRef(ref);
+
+  const fontSize = useMemo<FontSize>(() => {
+    if (!size) return "inherit";
+    if (typeof size === "number") return `${size}px`;
+    if (baseTheme.theme.fontSizes?.[size as keyof FontSizes]) {
+      return `$${size}`;
+    }
+
+    return size;
+  }, [size]);
+
+  const color = useMemo(() => {
+    if (isNormalColor(userColor)) {
+      switch (userColor) {
+        case "default":
+          return "$text";
+        default:
+          return `$${userColor}`;
       }
-      return userColor;
-    }, [userColor]);
-
-    return (
-      <StyledText
-        ref={domRef}
-        as={tag}
-        css={{
-          color,
-          fontSize: size ? fontSize : '',
-          tt: transform,
-          ...(css as any)
-        }}
-        {...otherProps}
-      >
-        {children}
-      </StyledText>
-    );
-  }
-);
+    }
+
+    return userColor;
+  }, [userColor]);
+
+  return (
+    <StyledText
+      ref={domRef}
+      as={tag}
+      css={{
+        color,
+        fontSize: size ? fontSize : "",
+        tt: transform,
+        ...(css as any),
+      }}
+      {...otherProps}
+    >
+      {children}
+    </StyledText>
+  );
+});
 
 if (__DEV__) {
-  TextChild.displayName = 'NextUI.TextChild';
+  TextChild.displayName = "NextUI.TextChild";
 }
 
-TextChild.toString = () => '.nextui-text-child';
+TextChild.toString = () => ".nextui-text-child";
 
 export default React.memo(TextChild);
diff --git a/packages/react/src/text/index.ts b/packages/react/src/text/index.ts
index 421dad7c1a..52d3c5d360 100644
--- a/packages/react/src/text/index.ts
+++ b/packages/react/src/text/index.ts
@@ -1,6 +1,6 @@
-import Text from './text';
-export type { TextProps } from './text';
+import Text from "./text";
+export type {TextProps} from "./text";
 
-export { StyledText } from './text.styles';
+export {StyledText} from "./text.styles";
 
 export default Text;
diff --git a/packages/react/src/text/text.stories.tsx b/packages/react/src/text/text.stories.tsx
index 0320ea9057..c59635edb8 100644
--- a/packages/react/src/text/text.stories.tsx
+++ b/packages/react/src/text/text.stories.tsx
@@ -1,22 +1,23 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import Text from './text';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import Text from "./text";
 
 export default {
-  title: 'General/Typography',
+  title: "General/Typography",
   component: Text,
   decorators: [
     (Story) => (
-      <div style={{ maxWidth: '50%' }}>
+      <div style={{maxWidth: "50%"}}>
         <Story />
       </div>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
-const shortText = 'Almost before we knew it, we had left the ground.';
+const shortText = "Almost before we knew it, we had left the ground.";
 const largeText =
-  'NextUI gives you the best developer experience with all the features you need for building beautiful and modern websites and applications.';
+  "NextUI gives you the best developer experience with all the features you need for building beautiful and modern websites and applications.";
 
 export const Headings = () => {
   return (
@@ -36,16 +37,16 @@ export const Gradient = () => (
     <Text
       h1
       css={{
-        textGradient: '45deg, $blue600 0%, $cyan600 100%'
+        textGradient: "45deg, $blue600 0%, $cyan600 100%",
       }}
       weight="bold"
     >
-      Let's
+      Let&apos;s
     </Text>
     <Text
       h1
       css={{
-        textGradient: '45deg, $pink600 0%, $red600 100%'
+        textGradient: "45deg, $pink600 0%, $red600 100%",
       }}
       weight="bold"
     >
@@ -54,7 +55,7 @@ export const Gradient = () => (
     <Text
       h1
       css={{
-        textGradient: '45deg, $yellow600 0%, $red600 100%'
+        textGradient: "45deg, $yellow600 0%, $red600 100%",
       }}
       weight="bold"
     >
@@ -85,7 +86,7 @@ export const Colors = () => (
 export const Small = () => (
   <Text>
     <Text small>{largeText}</Text>
-    <Text small i>
+    <Text i small>
       {largeText}
     </Text>
   </Text>
@@ -111,10 +112,10 @@ export const Composed = () => (
   <>
     <Text weight="hairline">{largeText}</Text>
     <Text>
-      <Text small del>
+      <Text del small>
         {shortText}
       </Text>
-      <Text small b>
+      <Text b small>
         {shortText}
       </Text>
     </Text>
diff --git a/packages/react/src/text/text.styles.ts b/packages/react/src/text/text.styles.ts
index f355a675a6..c9592e4024 100644
--- a/packages/react/src/text/text.styles.ts
+++ b/packages/react/src/text/text.styles.ts
@@ -1,37 +1,37 @@
-import { styled, VariantProps } from '../theme/stitches.config';
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledText = styled('p', {
+export const StyledText = styled("p", {
   variants: {
     weight: {
       hairline: {
-        fontWeight: '$hairline'
+        fontWeight: "$hairline",
       },
       thin: {
-        fontWeight: '$thin'
+        fontWeight: "$thin",
       },
       light: {
-        fontWeight: '$light'
+        fontWeight: "$light",
       },
       normal: {
-        fontWeight: '$normal'
+        fontWeight: "$normal",
       },
       medium: {
-        fontWeight: '$medium'
+        fontWeight: "$medium",
       },
       semibold: {
-        fontWeight: '$semibold'
+        fontWeight: "$semibold",
       },
       bold: {
-        fontWeight: '$bold'
+        fontWeight: "$bold",
       },
       extrabold: {
-        fontWeight: '$extrabold'
+        fontWeight: "$extrabold",
       },
       black: {
-        fontWeight: '$black'
-      }
-    }
-  }
+        fontWeight: "$black",
+      },
+    },
+  },
 });
 
 export type TextVariantsProps = VariantProps<typeof StyledText>;
diff --git a/packages/react/src/text/text.tsx b/packages/react/src/text/text.tsx
index 9e1514dde7..cb4400c0fe 100644
--- a/packages/react/src/text/text.tsx
+++ b/packages/react/src/text/text.tsx
@@ -1,9 +1,11 @@
-import React, { ReactNode, useMemo } from 'react';
-import { TextTransforms } from '../utils/prop-types';
-import { ReactRef } from '../utils/refs';
-import { useDOMRef } from '../utils/dom';
-import { __DEV__ } from '../utils/assertion';
-import TextChild, { TextChildProps } from './child';
+import React, {ReactNode, useMemo} from "react";
+
+import {TextTransforms} from "../utils/prop-types";
+import {ReactRef} from "../utils/refs";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+
+import TextChild, {TextChildProps} from "./child";
 
 interface Props {
   children?: ReactNode;
@@ -23,110 +25,98 @@ interface Props {
   blockquote?: boolean;
 }
 
-type ElementMap = { [key in keyof JSX.IntrinsicElements]?: boolean };
+type ElementMap = {[key in keyof JSX.IntrinsicElements]?: boolean};
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
-export type TextProps = Props &
-  NativeAttrs &
-  Omit<TextChildProps, keyof Props | 'tag'>;
+export type TextProps = Props & NativeAttrs & Omit<TextChildProps, keyof Props | "tag">;
 
 type TextRenderableElements = Array<keyof JSX.IntrinsicElements>;
 
 const getModifierChild = (
   tags: TextRenderableElements,
   children: ReactNode,
-  size?: TextChildProps['size'],
-  transform?: TextTransforms
+  size?: TextChildProps["size"],
+  transform?: TextTransforms,
 ) => {
   if (!tags.length) return children;
   const nextTag = tags.slice(1, tags.length);
+
   return (
-    <TextChild tag={tags[0]} size={size} transform={transform}>
+    <TextChild size={size} tag={tags[0]} transform={transform}>
       {getModifierChild(nextTag, children, size)}
     </TextChild>
   );
 };
 
-export const Text = React.forwardRef(
-  (props: TextProps, ref: ReactRef<HTMLElement>) => {
-    const {
-      h1 = false,
-      h2 = false,
-      h3 = false,
-      h4 = false,
-      h5 = false,
-      h6 = false,
-      b = false,
-      small = false,
-      i = false,
-      span = false,
-      del = false,
-      em = false,
-      blockquote = false,
-      transform = 'none',
-      size,
-      children,
-      ...otherProps
-    } = props;
-
-    const domRef = useDOMRef(ref);
-
-    const elements: ElementMap = { h1, h2, h3, h4, h5, h6, blockquote };
-    const inlineElements: ElementMap = { span, small, b, em, i, del };
-    const names = Object.keys(elements).filter(
-      (name: keyof JSX.IntrinsicElements) => elements[name]
-    ) as TextRenderableElements;
-    const inlineNames = Object.keys(inlineElements).filter(
-      (name: keyof JSX.IntrinsicElements) => inlineElements[name]
-    ) as TextRenderableElements;
-    /**
-     *  Render element "p" only if no element is found.
-     *  If there is only one modifier, just rendered one modifier element
-     *  e.g.
-     *    <Text /> => <p />
-     *    <Text em /> => <em />
-     *    <Text b em /> => <b><em>children</em></b>
-     */
-
-    const tag = useMemo(() => {
-      if (names[0]) return names[0];
-      if (inlineNames[0]) return inlineNames[0];
-      return 'p' as keyof JSX.IntrinsicElements;
-    }, [names, inlineNames]);
-
-    const renderableChildElements = inlineNames.filter(
-      (name: keyof JSX.IntrinsicElements) => name !== tag
-    ) as TextRenderableElements;
-
-    const modifers = useMemo(() => {
-      if (!renderableChildElements.length) return children;
-      return getModifierChild(
-        renderableChildElements,
-        children,
-        size,
-        transform
-      );
-    }, [renderableChildElements, children, size, transform]);
-
-    return (
-      <TextChild
-        ref={domRef}
-        transform={transform}
-        tag={tag}
-        size={size}
-        {...otherProps}
-      >
-        {modifers}
-      </TextChild>
-    );
-  }
-);
+export const Text = React.forwardRef((props: TextProps, ref: ReactRef<HTMLElement>) => {
+  const {
+    h1 = false,
+    h2 = false,
+    h3 = false,
+    h4 = false,
+    h5 = false,
+    h6 = false,
+    b = false,
+    small = false,
+    i = false,
+    span = false,
+    del = false,
+    em = false,
+    blockquote = false,
+    transform = "none",
+    size,
+    children,
+    ...otherProps
+  } = props;
+
+  const domRef = useDOMRef(ref);
+
+  const elements: ElementMap = {h1, h2, h3, h4, h5, h6, blockquote};
+  const inlineElements: ElementMap = {span, small, b, em, i, del};
+  const names = Object.keys(elements).filter(
+    (name: keyof JSX.IntrinsicElements) => elements[name],
+  ) as TextRenderableElements;
+  const inlineNames = Object.keys(inlineElements).filter(
+    (name: keyof JSX.IntrinsicElements) => inlineElements[name],
+  ) as TextRenderableElements;
+  /**
+   *  Render element "p" only if no element is found.
+   *  If there is only one modifier, just rendered one modifier element
+   *  e.g.
+   *    <Text /> => <p />
+   *    <Text em /> => <em />
+   *    <Text b em /> => <b><em>children</em></b>
+   */
+
+  const tag = useMemo(() => {
+    if (names[0]) return names[0];
+    if (inlineNames[0]) return inlineNames[0];
+
+    return "p" as keyof JSX.IntrinsicElements;
+  }, [names, inlineNames]);
+
+  const renderableChildElements = inlineNames.filter(
+    (name: keyof JSX.IntrinsicElements) => name !== tag,
+  ) as TextRenderableElements;
+
+  const modifers = useMemo(() => {
+    if (!renderableChildElements.length) return children;
+
+    return getModifierChild(renderableChildElements, children, size, transform);
+  }, [renderableChildElements, children, size, transform]);
+
+  return (
+    <TextChild ref={domRef} size={size} tag={tag} transform={transform} {...otherProps}>
+      {modifers}
+    </TextChild>
+  );
+});
 
 if (__DEV__) {
-  Text.displayName = 'NextUI.Text';
+  Text.displayName = "NextUI.Text";
 }
 
-Text.toString = () => '.nextui-text';
+Text.toString = () => ".nextui-text";
 
 export default React.memo(Text);
diff --git a/packages/react/src/textarea/__tests__/index.test.tsx b/packages/react/src/textarea/__tests__/index.test.tsx
index b152524550..0a285d3358 100644
--- a/packages/react/src/textarea/__tests__/index.test.tsx
+++ b/packages/react/src/textarea/__tests__/index.test.tsx
@@ -1,77 +1,73 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import Textarea from '../textarea';
-import { nativeEvent } from '../../../tests/utils';
+import React from "react";
+import {mount} from "enzyme";
 
-describe('Textarea', () => {
-  it('should render correctly', () => {
+import Textarea from "../textarea";
+import {nativeEvent} from "../../../tests/utils";
+
+describe("Textarea", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<Textarea placeholder="placeholder" />);
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should work with different styles', () => {
+  it("should work with different styles", () => {
     const wrapper = mount(
       <div>
         <Textarea color="secondary" />
         <Textarea width="20%" />
-      </div>
+      </div>,
     );
+
     expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should set textarea from value', () => {
+  it("should set textarea from value", () => {
     const wrapper = mount(<Textarea initialValue="test-value" />);
-    let el = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
-    expect(el.value).toEqual('test-value');
+    let el = wrapper.find("textarea").getDOMNode() as HTMLTextAreaElement;
+
+    expect(el.value).toEqual("test-value");
 
-    wrapper.setProps({ value: 'test-value2' });
-    el = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
-    expect(el.value).toEqual('test-value2');
+    wrapper.setProps({value: "test-value2"});
+    el = wrapper.find("textarea").getDOMNode() as HTMLTextAreaElement;
+    expect(el.value).toEqual("test-value2");
   });
 
-  it('should trigger events when textarea changed', () => {
-    let value = '';
-    const handler = jest
-      .fn()
-      .mockImplementation((e) => (value = e.target.value));
+  it("should trigger events when textarea changed", () => {
+    let value = "";
+    const handler = jest.fn().mockImplementation((e) => (value = e.target.value));
     const wrapper = mount(<Textarea onChange={handler} />);
-    wrapper
-      .find('textarea')
-      .simulate('change', { target: { value: 'test-value' } });
+
+    wrapper.find("textarea").simulate("change", {target: {value: "test-value"}});
     expect(handler).toHaveBeenCalled();
-    expect(value).toEqual('test-value');
+    expect(value).toEqual("test-value");
     handler.mockRestore();
   });
 
-  it('should ignore events when disabled or readonly', () => {
+  it("should ignore events when disabled or readonly", () => {
     const handler = jest.fn();
-    const wrapper = mount(<Textarea onChange={handler} disabled />);
-    wrapper
-      .find('textarea')
-      .simulate('change', { target: { value: 'test-value' } });
+    const wrapper = mount(<Textarea disabled onChange={handler} />);
+
+    wrapper.find("textarea").simulate("change", {target: {value: "test-value"}});
     expect(handler).not.toHaveBeenCalled();
 
-    wrapper.setProps({ disabled: false, readOnly: true });
-    wrapper
-      .find('textarea')
-      .simulate('change', { target: { value: 'test-value2' } });
+    wrapper.setProps({disabled: false, readOnly: true});
+    wrapper.find("textarea").simulate("change", {target: {value: "test-value2"}});
     expect(handler).not.toHaveBeenCalled();
     handler.mockRestore();
   });
 
-  it('should pass through blur event', () => {
+  it("should pass through blur event", () => {
     const blurHandler = jest.fn();
     const focusHandler = jest.fn();
-    const wrapper = mount(
-      <Textarea onBlur={blurHandler} onFocus={focusHandler} />
-    );
+    const wrapper = mount(<Textarea onBlur={blurHandler} onFocus={focusHandler} />);
 
-    wrapper.find('textarea').simulate('focus', nativeEvent);
+    wrapper.find("textarea").simulate("focus", nativeEvent);
     expect(focusHandler).toHaveBeenCalled();
 
-    wrapper.find('textarea').simulate('blur', nativeEvent);
+    wrapper.find("textarea").simulate("blur", nativeEvent);
     expect(blurHandler).toHaveBeenCalled();
   });
 });
diff --git a/packages/react/src/textarea/index.ts b/packages/react/src/textarea/index.ts
index 6ef0fd9217..30b45ec69f 100644
--- a/packages/react/src/textarea/index.ts
+++ b/packages/react/src/textarea/index.ts
@@ -1,5 +1,5 @@
-import Textarea from './textarea';
+import Textarea from "./textarea";
 
-export type { TextareaProps } from './textarea';
+export type {TextareaProps} from "./textarea";
 
 export default Textarea;
diff --git a/packages/react/src/textarea/textarea.stories.tsx b/packages/react/src/textarea/textarea.stories.tsx
index f12e41ed7f..9ab765eb27 100644
--- a/packages/react/src/textarea/textarea.stories.tsx
+++ b/packages/react/src/textarea/textarea.stories.tsx
@@ -1,36 +1,35 @@
-import React, { useEffect } from 'react';
-import { Meta } from '@storybook/react';
-import useInput from '../use-input';
-import Textarea from './index';
-import Spacer from '../spacer';
-import Grid from '../grid';
-import Button from '../button';
-import Text from '../text';
+import React, {useEffect} from "react";
+import {Meta} from "@storybook/react";
+
+import useInput from "../use-input";
+import Spacer from "../spacer";
+import Grid from "../grid";
+import Button from "../button";
+import Text from "../text";
+
+import Textarea from "./index";
 
 export default {
-  title: 'General/Textarea',
+  title: "General/Textarea",
   component: Textarea,
   decorators: [
     (Story) => (
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          padding: '20px'
+          display: "flex",
+          flexDirection: "column",
+          padding: "20px",
         }}
       >
         <Story />
       </div>
-    )
-  ]
+    ),
+  ],
 } as Meta;
 
 export const Default = () => (
   <>
-    <Textarea
-      label="Write your thoughts"
-      placeholder="Enter your amazing thoughts."
-    />
+    <Textarea label="Write your thoughts" placeholder="Enter your amazing thoughts." />
     <Spacer y={1.5} />
     <Textarea labelPlaceholder="Write your thoughts" />
   </>
@@ -38,19 +37,13 @@ export const Default = () => (
 
 export const Rows = () => (
   <>
-    <Textarea
-      label="Write your thoughts"
-      placeholder="Enter your amazing thoughts."
-    />
+    <Textarea label="Write your thoughts" placeholder="Enter your amazing thoughts." />
   </>
 );
 
 export const labelPlaceholder = () => (
   <>
-    <Textarea
-      label="Write your thoughts"
-      placeholder="Enter your amazing thoughts."
-    />
+    <Textarea label="Write your thoughts" placeholder="Enter your amazing thoughts." />
     <Spacer y={2} />
     <Textarea labelPlaceholder="Write your thoughts" />
   </>
@@ -60,11 +53,7 @@ export const Types = () => (
   <>
     <Textarea label="Default" placeholder="Default Textarea" />
     <Spacer y={2} />
-    <Textarea
-      underlined
-      color="primary"
-      labelPlaceholder="Underlined Textarea"
-    />
+    <Textarea underlined color="primary" labelPlaceholder="Underlined Textarea" />
     <Spacer y={2} />
     <Textarea bordered color="secondary" labelPlaceholder="Bordered Textarea" />
   </>
@@ -73,12 +62,7 @@ export const Types = () => (
 export const Disabled = () => {
   return (
     <>
-      <Textarea
-        disabled
-        label="Name"
-        helperText="Disabled"
-        placeholder="Enter your name"
-      />
+      <Textarea disabled helperText="Disabled" label="Name" placeholder="Enter your name" />
     </>
   );
 };
@@ -88,8 +72,8 @@ export const ReadOnly = () => {
     <>
       <Textarea
         readOnly
-        label="Read only Text"
         initialValue="Almost before we knew it, we had left the ground."
+        label="Read only Text"
       />
     </>
   );
@@ -98,61 +82,59 @@ export const ReadOnly = () => {
 export const WithHelperText = () => {
   return (
     <>
-      <Textarea
-        label="Name"
-        helperText="Please enter your name"
-        placeholder="Enter your name"
-      />
+      <Textarea helperText="Please enter your name" label="Name" placeholder="Enter your name" />
       <Spacer y={1.4} />
       <Textarea
-        status="error"
         helperColor="error"
         helperText="Required"
         label="Error"
         placeholder="Enter something"
+        status="error"
       />
       <Spacer y={1.4} />
       <Textarea
-        status="success"
         helperColor="success"
-        initialValue="getnextui"
         helperText="Excelent username"
+        initialValue="getnextui"
         label="Username"
         placeholder="Enter your username"
+        status="success"
       />
       <Spacer y={1.4} />
       <Textarea
         color="error"
-        status="error"
         helperColor="error"
         helperText="Required"
         label="Email"
         placeholder="Enter your email"
+        status="error"
       />
       <Spacer y={1.4} />
       <Textarea
-        status="warning"
         helperColor="warning"
         helperText="Insecure password"
         label="Password"
         placeholder="Enter your password"
+        status="warning"
       />
       <Spacer y={1.4} />
       <Textarea
         helperColor="warning"
-        status="warning"
-        initialValue="123"
         helperText="Insecure password"
+        initialValue="123"
         label="Password"
         placeholder="Enter your password"
+        status="warning"
       />
     </>
   );
 };
 
 export const WithUseInput = () => {
-  const { value, setValue, reset, bindings } = useInput('NextUI');
+  const {value, setValue, reset, bindings} = useInput("NextUI");
+
   useEffect(() => console.log(value), [value]);
+
   return (
     <>
       <Textarea {...bindings} />
@@ -181,13 +163,13 @@ export const WithUseInput = () => {
 export const Uncontrolled = () => {
   const textareaRef = React.useRef<HTMLTextAreaElement>(null);
   const onClick = () => {
-    if (textareaRef.current)
-      textareaRef.current.value = Math.random().toString(32);
+    if (textareaRef.current) textareaRef.current.value = Math.random().toString(32);
   };
+
   return (
     <>
       <Text>Update component in an uncontrolled way.</Text>
-      <Grid.Container gap={1} direction="column">
+      <Grid.Container direction="column" gap={1}>
         <Textarea
           ref={textareaRef}
           initialValue="Hello"
diff --git a/packages/react/src/textarea/textarea.tsx b/packages/react/src/textarea/textarea.tsx
index ac5a46910f..8ee76ed520 100644
--- a/packages/react/src/textarea/textarea.tsx
+++ b/packages/react/src/textarea/textarea.tsx
@@ -1,16 +1,15 @@
-import React, { useRef, useImperativeHandle, useLayoutEffect } from 'react';
-import withDefaults from '../utils/with-defaults';
-import Input from '../input';
-import useResize from '../use-resize';
-import useWarning from '../use-warning';
-import { Props as InputProps } from '../input/input-props';
-import {
-  excludedInputPropsForTextarea,
-  ExcludedInputProps
-} from '../utils/prop-types';
-import { CSS } from '../theme/stitches.config';
-import { __DEV__ } from '../utils/assertion';
-import { calculateNodeHeight, SizingData, getSizingData } from './utils';
+import React, {useRef, useImperativeHandle, useLayoutEffect} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import Input from "../input";
+import useResize from "../use-resize";
+import {warn} from "../utils/console";
+import {Props as InputProps} from "../input/input-props";
+import {excludedInputPropsForTextarea, ExcludedInputProps} from "../utils/prop-types";
+import {CSS} from "../theme/stitches.config";
+import {__DEV__} from "../utils/assertion";
+
+import {calculateNodeHeight, SizingData, getSizingData} from "./utils";
 
 export type TextareaHeightChangeMeta = {
   rowHeight: number;
@@ -31,20 +30,14 @@ const defaultProps = {
   minRows: 3,
   maxRows: 6,
   cacheMeasurements: true,
-  initialValue: ''
+  initialValue: "",
 };
 
-type NativeAttrs = Omit<
-  React.TextareaHTMLAttributes<any>,
-  keyof Props | keyof InputProps
->;
+type NativeAttrs = Omit<React.TextareaHTMLAttributes<any>, keyof Props | keyof InputProps>;
 
 type BaseAttrs = Omit<InputProps, ExcludedInputProps>;
 
-export type TextareaProps = Props &
-  typeof defaultProps &
-  NativeAttrs &
-  BaseAttrs & { css?: CSS };
+export type TextareaProps = Props & typeof defaultProps & NativeAttrs & BaseAttrs & {css?: CSS};
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (textareaProps, ref: React.Ref<HTMLTextAreaElement | null>) => {
@@ -52,16 +45,8 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     const heightRef = React.useRef<number>(0);
     const measurementsCacheRef = React.useRef<SizingData>();
 
-    const {
-      cacheMeasurements,
-      rows,
-      maxRows,
-      minRows,
-      onChange,
-      onHeightChange,
-      css,
-      ...props
-    } = textareaProps;
+    const {cacheMeasurements, rows, maxRows, minRows, onChange, onHeightChange, css, ...props} =
+      textareaProps;
 
     Object.keys(props).forEach((propNameKey: any) => {
       if (excludedInputPropsForTextarea.indexOf(propNameKey) > -1) {
@@ -73,15 +58,11 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     const isControlled = props.value !== undefined;
 
     if (__DEV__ && props.style) {
-      if ('maxHeight' in props.style) {
-        useWarning(
-          'Using `style.maxHeight` for <Textarea/> is not supported. Please use `maxRows`.'
-        );
+      if ("maxHeight" in props.style) {
+        warn("Using `style.maxHeight` for <Textarea/> is not supported. Please use `maxRows`.");
       }
-      if ('minHeight' in props.style) {
-        useWarning(
-          'Using `style.minHeight` for <Textarea/> is not supported. Please use `minRows`.'
-        );
+      if ("minHeight" in props.style) {
+        warn("Using `style.minHeight` for <Textarea/> is not supported. Please use `minRows`.");
       }
     }
 
@@ -102,15 +83,15 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 
       const [height, rowHeight] = calculateNodeHeight(
         nodeSizingData,
-        node.value || node.placeholder || 'x',
+        node.value || node.placeholder || "x",
         rows || minRows,
-        rows || maxRows
+        rows || maxRows,
       );
 
       if (heightRef.current !== height) {
         heightRef.current = height;
-        node.style.setProperty('height', `${height}px`, 'important');
-        onHeightChange && onHeightChange(height, { rowHeight });
+        node.style.setProperty("height", `${height}px`, "important");
+        onHeightChange && onHeightChange(height, {rowHeight});
       }
     };
 
@@ -121,27 +102,29 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       onChange && onChange(event);
     };
 
-    if (typeof document !== 'undefined') {
+    if (typeof document !== "undefined") {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       useLayoutEffect(resizeTextarea);
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       useResize(resizeTextarea);
     }
 
     return (
       <Input
-        as="textarea"
         ref={textareaRef}
+        as="textarea"
+        css={{...(css as any)}}
         onChange={handleChange}
-        css={{ ...(css as any) }}
         {...props}
       />
     );
-  }
+  },
 );
 
 if (__DEV__) {
-  Textarea.displayName = 'NextUI.Textarea';
+  Textarea.displayName = "NextUI.Textarea";
 }
 
-Textarea.toString = () => '.nextui-textarea';
+Textarea.toString = () => ".nextui-textarea";
 
 export default withDefaults(Textarea, defaultProps);
diff --git a/packages/react/src/textarea/utils.ts b/packages/react/src/textarea/utils.ts
index 813f5e47b9..c11040cab5 100644
--- a/packages/react/src/textarea/utils.ts
+++ b/packages/react/src/textarea/utils.ts
@@ -1,45 +1,42 @@
-import { pick } from '../utils/collections';
+import {pick} from "../utils/collections";
 
 const SIZING_STYLE = [
-  'borderBottomWidth',
-  'borderLeftWidth',
-  'borderRightWidth',
-  'borderTopWidth',
-  'boxSizing',
-  'fontFamily',
-  'fontSize',
-  'fontStyle',
-  'fontWeight',
-  'letterSpacing',
-  'lineHeight',
-  'paddingBottom',
-  'paddingLeft',
-  'paddingRight',
-  'paddingTop',
-  'tabSize',
-  'textIndent',
-  'textRendering',
-  'textTransform',
-  'width',
-  'wordBreak',
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderRightWidth",
+  "borderTopWidth",
+  "boxSizing",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontWeight",
+  "letterSpacing",
+  "lineHeight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingTop",
+  "tabSize",
+  "textIndent",
+  "textRendering",
+  "textTransform",
+  "width",
+  "wordBreak",
 ] as const;
 
 const HIDDEN_TEXTAREA_STYLE = {
-  'min-height': '0',
-  'max-height': 'none',
-  height: '0',
-  visibility: 'hidden',
-  overflow: 'hidden',
-  position: 'absolute',
-  'z-index': '-1000',
-  top: '0',
-  right: '0',
+  "min-height": "0",
+  "max-height": "none",
+  height: "0",
+  visibility: "hidden",
+  overflow: "hidden",
+  position: "absolute",
+  "z-index": "-1000",
+  top: "0",
+  right: "0",
 } as const;
 
-type SizingProps = Extract<
-  typeof SIZING_STYLE[number],
-  keyof CSSStyleDeclaration
->;
+type SizingProps = Extract<typeof SIZING_STYLE[number], keyof CSSStyleDeclaration>;
 
 type SizingStyle = Pick<CSSStyleDeclaration, SizingProps>;
 
@@ -50,16 +47,14 @@ export type SizingData = {
 };
 
 const isIE =
-  typeof document !== 'undefined'
-    ? !!(document.documentElement as any).currentStyle
-    : false;
+  typeof document !== "undefined" ? !!(document.documentElement as any).currentStyle : false;
 
 export const forceHiddenStyles = (node: HTMLElement) => {
   Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {
     node.style.setProperty(
       key,
       HIDDEN_TEXTAREA_STYLE[key as keyof typeof HIDDEN_TEXTAREA_STYLE],
-      'important'
+      "important",
     );
   });
 };
@@ -72,32 +67,29 @@ export const getSizingData = (node: HTMLElement): SizingData | null => {
   }
 
   const sizingStyle = pick(SIZING_STYLE as unknown as SizingProps[], style);
-  const { boxSizing } = sizingStyle;
+  const {boxSizing} = sizingStyle;
 
   // probably node is detached from DOM, can't read computed dimensions
-  if (boxSizing === '') {
+  if (boxSizing === "") {
     return null;
   }
 
   // IE (Edge has already correct behaviour) returns content width as computed width
   // so we need to add manually padding and border widths
-  if (isIE && boxSizing === 'border-box') {
+  if (isIE && boxSizing === "border-box") {
     sizingStyle.width =
       parseFloat(sizingStyle.width!) +
       parseFloat(sizingStyle.borderRightWidth!) +
       parseFloat(sizingStyle.borderLeftWidth!) +
       parseFloat(sizingStyle.paddingRight!) +
       parseFloat(sizingStyle.paddingLeft!) +
-      'px';
+      "px";
   }
 
-  const paddingSize =
-    parseFloat(sizingStyle.paddingBottom!) +
-    parseFloat(sizingStyle.paddingTop!);
+  const paddingSize = parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!);
 
   const borderSize =
-    parseFloat(sizingStyle.borderBottomWidth!) +
-    parseFloat(sizingStyle.borderTopWidth!);
+    parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!);
 
   return {
     sizingStyle,
@@ -116,7 +108,7 @@ let hiddenTextarea: HTMLTextAreaElement | null = null;
 const getHeight = (node: HTMLElement, sizingData: SizingData): number => {
   const height = node.scrollHeight;
 
-  if (sizingData.sizingStyle.boxSizing === 'border-box') {
+  if (sizingData.sizingStyle.boxSizing === "border-box") {
     // border-box: add border, since height = content + padding + border
     return height + sizingData.borderSize;
   }
@@ -129,12 +121,12 @@ export const calculateNodeHeight = (
   sizingData: SizingData,
   value: string,
   minRows = 1,
-  maxRows = Infinity
+  maxRows = Infinity,
 ): CalculatedNodeHeights => {
   if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement('textarea');
-    hiddenTextarea.setAttribute('tabindex', '-1');
-    hiddenTextarea.setAttribute('aria-hidden', 'true');
+    hiddenTextarea = document.createElement("textarea");
+    hiddenTextarea.setAttribute("tabindex", "-1");
+    hiddenTextarea.setAttribute("aria-hidden", "true");
     forceHiddenStyles(hiddenTextarea);
   }
 
@@ -142,11 +134,12 @@ export const calculateNodeHeight = (
     document.body.appendChild(hiddenTextarea);
   }
 
-  const { paddingSize, borderSize, sizingStyle } = sizingData;
-  const { boxSizing } = sizingStyle;
+  const {paddingSize, borderSize, sizingStyle} = sizingData;
+  const {boxSizing} = sizingStyle;
 
   Object.keys(sizingStyle).forEach((_key) => {
     const key = _key as keyof typeof sizingStyle;
+
     hiddenTextarea!.style[key] = sizingStyle[key] as any;
   });
 
@@ -156,17 +149,19 @@ export const calculateNodeHeight = (
   let height = getHeight(hiddenTextarea, sizingData);
 
   // measure height of a textarea with a single row
-  hiddenTextarea.value = 'x';
+  hiddenTextarea.value = "x";
   const rowHeight = hiddenTextarea.scrollHeight - paddingSize;
 
   let minHeight = rowHeight * minRows;
-  if (boxSizing === 'border-box') {
+
+  if (boxSizing === "border-box") {
     minHeight = minHeight + paddingSize + borderSize;
   }
   height = Math.max(minHeight, height);
 
   let maxHeight = rowHeight * maxRows;
-  if (boxSizing === 'border-box') {
+
+  if (boxSizing === "border-box") {
     maxHeight = maxHeight + paddingSize + borderSize;
   }
   height = Math.min(maxHeight, height);
diff --git a/packages/react/src/theme/colors/blue.ts b/packages/react/src/theme/colors/blue.ts
index 20285d24ae..688c45bfe1 100644
--- a/packages/react/src/theme/colors/blue.ts
+++ b/packages/react/src/theme/colors/blue.ts
@@ -1,25 +1,25 @@
 export const blue = {
-  blue50: '#EDF5FF',
-  blue100: '#E1EFFF',
-  blue200: '#CEE4FE',
-  blue300: '#B7D5F8',
-  blue400: '#96C1F2',
-  blue500: '#5EA2EF',
-  blue600: '#0072F5',
-  blue700: '#005FCC',
-  blue800: '#004799',
-  blue900: '#00254D'
+  blue50: "#EDF5FF",
+  blue100: "#E1EFFF",
+  blue200: "#CEE4FE",
+  blue300: "#B7D5F8",
+  blue400: "#96C1F2",
+  blue500: "#5EA2EF",
+  blue600: "#0072F5",
+  blue700: "#005FCC",
+  blue800: "#004799",
+  blue900: "#00254D",
 };
 
 export const blueDark = {
-  blue50: '#10253E',
-  blue100: '#102C4C',
-  blue200: '#0F3158',
-  blue300: '#0D3868',
-  blue400: '#0A4281',
-  blue500: '#0952A5',
-  blue600: '#0072F5',
-  blue700: '#3694FF',
-  blue800: '#3694FF',
-  blue900: '#EAF4FF'
+  blue50: "#10253E",
+  blue100: "#102C4C",
+  blue200: "#0F3158",
+  blue300: "#0D3868",
+  blue400: "#0A4281",
+  blue500: "#0952A5",
+  blue600: "#0072F5",
+  blue700: "#3694FF",
+  blue800: "#3694FF",
+  blue900: "#EAF4FF",
 };
diff --git a/packages/react/src/theme/colors/cyan.ts b/packages/react/src/theme/colors/cyan.ts
index 54400b0747..fe60dd14e1 100644
--- a/packages/react/src/theme/colors/cyan.ts
+++ b/packages/react/src/theme/colors/cyan.ts
@@ -1,25 +1,25 @@
 export const cyan = {
-  cyan50: '#F0FCFF',
-  cyan100: '#E6FAFE',
-  cyan200: '#D7F8FE',
-  cyan300: '#C3F4FD',
-  cyan400: '#A5EEFD',
-  cyan500: '#7EE7FC',
-  cyan600: '#06B7DB',
-  cyan700: '#09AACD',
-  cyan800: '#0E8AAA',
-  cyan900: '#053B48'
+  cyan50: "#F0FCFF",
+  cyan100: "#E6FAFE",
+  cyan200: "#D7F8FE",
+  cyan300: "#C3F4FD",
+  cyan400: "#A5EEFD",
+  cyan500: "#7EE7FC",
+  cyan600: "#06B7DB",
+  cyan700: "#09AACD",
+  cyan800: "#0E8AAA",
+  cyan900: "#053B48",
 };
 
 export const cyanDark = {
-  cyan50: '#012A32',
-  cyan100: '#023A46',
-  cyan200: '#024B5A',
-  cyan300: '#036072',
-  cyan400: '#037086',
-  cyan500: '#048EA9',
-  cyan600: '#06B7DB',
-  cyan700: '#33D9FA',
-  cyan800: '#6FE4FB',
-  cyan900: '#EBFBFE'
+  cyan50: "#012A32",
+  cyan100: "#023A46",
+  cyan200: "#024B5A",
+  cyan300: "#036072",
+  cyan400: "#037086",
+  cyan500: "#048EA9",
+  cyan600: "#06B7DB",
+  cyan700: "#33D9FA",
+  cyan800: "#6FE4FB",
+  cyan900: "#EBFBFE",
 };
diff --git a/packages/react/src/theme/colors/gray.ts b/packages/react/src/theme/colors/gray.ts
index 417141fc4f..0fc482cfd8 100644
--- a/packages/react/src/theme/colors/gray.ts
+++ b/packages/react/src/theme/colors/gray.ts
@@ -1,25 +1,25 @@
 export const gray = {
-  gray50: '#F1F3F5',
-  gray100: '#ECEEF0',
-  gray200: '#E6E8EB',
-  gray300: '#DFE3E6',
-  gray400: '#D7DBDF',
-  gray500: '#C1C8CD',
-  gray600: '#889096',
-  gray700: '#7E868C',
-  gray800: '#687076',
-  gray900: '#11181C'
+  gray50: "#F1F3F5",
+  gray100: "#ECEEF0",
+  gray200: "#E6E8EB",
+  gray300: "#DFE3E6",
+  gray400: "#D7DBDF",
+  gray500: "#C1C8CD",
+  gray600: "#889096",
+  gray700: "#7E868C",
+  gray800: "#687076",
+  gray900: "#11181C",
 };
 
 export const grayDark = {
-  gray50: '#16181A',
-  gray100: '#26292B',
-  gray200: '#2B2F31',
-  gray300: '#313538',
-  gray400: '#3A3F42',
-  gray500: '#4C5155',
-  gray600: '#697177',
-  gray700: '#787F85',
-  gray800: '#9BA1A6',
-  gray900: '#ECEDEE'
+  gray50: "#16181A",
+  gray100: "#26292B",
+  gray200: "#2B2F31",
+  gray300: "#313538",
+  gray400: "#3A3F42",
+  gray500: "#4C5155",
+  gray600: "#697177",
+  gray700: "#787F85",
+  gray800: "#9BA1A6",
+  gray900: "#ECEDEE",
 };
diff --git a/packages/react/src/theme/colors/green.ts b/packages/react/src/theme/colors/green.ts
index a8500a5822..a44b858b1a 100644
--- a/packages/react/src/theme/colors/green.ts
+++ b/packages/react/src/theme/colors/green.ts
@@ -1,25 +1,25 @@
 export const green = {
-  green50: '#F1FDF7',
-  green100: '#E8FCF1',
-  green200: '#DAFBE8',
-  green300: '#C8F9DD',
-  green400: '#ADF5CC',
-  green500: '#88F1B6',
-  green600: '#17C964',
-  green700: '#13A452',
-  green800: '#108944',
-  green900: '#06371B'
+  green50: "#F1FDF7",
+  green100: "#E8FCF1",
+  green200: "#DAFBE8",
+  green300: "#C8F9DD",
+  green400: "#ADF5CC",
+  green500: "#88F1B6",
+  green600: "#17C964",
+  green700: "#13A452",
+  green800: "#108944",
+  green900: "#06371B",
 };
 
 export const greenDark = {
-  green50: '#042F14',
-  green100: '#06381B',
-  green200: '#074A24',
-  green300: '#0A6130',
-  green400: '#0B7439',
-  green500: '#0F9549',
-  green600: '#17C964',
-  green700: '#41EC8B',
-  green800: '#78F2AD',
-  green900: '#ECFDF4'
+  green50: "#042F14",
+  green100: "#06381B",
+  green200: "#074A24",
+  green300: "#0A6130",
+  green400: "#0B7439",
+  green500: "#0F9549",
+  green600: "#17C964",
+  green700: "#41EC8B",
+  green800: "#78F2AD",
+  green900: "#ECFDF4",
 };
diff --git a/packages/react/src/theme/colors/index.ts b/packages/react/src/theme/colors/index.ts
index ebb3e31844..0e69e50e2b 100644
--- a/packages/react/src/theme/colors/index.ts
+++ b/packages/react/src/theme/colors/index.ts
@@ -1,8 +1,8 @@
-export * from './blue';
-export * from './purple';
-export * from './green';
-export * from './yellow';
-export * from './red';
-export * from './cyan';
-export * from './pink';
-export * from './gray';
+export * from "./blue";
+export * from "./purple";
+export * from "./green";
+export * from "./yellow";
+export * from "./red";
+export * from "./cyan";
+export * from "./pink";
+export * from "./gray";
diff --git a/packages/react/src/theme/colors/pink.ts b/packages/react/src/theme/colors/pink.ts
index f16e130873..25d71f2375 100644
--- a/packages/react/src/theme/colors/pink.ts
+++ b/packages/react/src/theme/colors/pink.ts
@@ -1,25 +1,25 @@
 export const pink = {
-  pink50: '#FFF0FB',
-  pink100: '#FFE5F8',
-  pink200: '#FFD6F3',
-  pink300: '#FFC2EE',
-  pink400: '#FFA3E5',
-  pink500: '#FF7AD9',
-  pink600: '#FF4ECD',
-  pink700: '#D6009A',
-  pink800: '#B80084',
-  pink900: '#4D0037'
+  pink50: "#FFF0FB",
+  pink100: "#FFE5F8",
+  pink200: "#FFD6F3",
+  pink300: "#FFC2EE",
+  pink400: "#FFA3E5",
+  pink500: "#FF7AD9",
+  pink600: "#FF4ECD",
+  pink700: "#D6009A",
+  pink800: "#B80084",
+  pink900: "#4D0037",
 };
 
 export const pinkDark = {
-  pink50: '#330025',
-  pink100: '#470033',
-  pink200: '#5C0042',
-  pink300: '#750054',
-  pink400: '#8A0063',
-  pink500: '#AD007C',
-  pink600: '#FF4ECD',
-  pink700: '#FF2EC4',
-  pink800: '#FF6BD5',
-  pink900: '#FFEBF9'
+  pink50: "#330025",
+  pink100: "#470033",
+  pink200: "#5C0042",
+  pink300: "#750054",
+  pink400: "#8A0063",
+  pink500: "#AD007C",
+  pink600: "#FF4ECD",
+  pink700: "#FF2EC4",
+  pink800: "#FF6BD5",
+  pink900: "#FFEBF9",
 };
diff --git a/packages/react/src/theme/colors/purple.ts b/packages/react/src/theme/colors/purple.ts
index 2d4e3d5832..be6d27d7b3 100644
--- a/packages/react/src/theme/colors/purple.ts
+++ b/packages/react/src/theme/colors/purple.ts
@@ -1,25 +1,25 @@
 export const purple = {
-  purple50: '#F7F2FD',
-  purple100: '#F1E8FB',
-  purple200: '#EADCF8',
-  purple300: '#E0CBF5',
-  purple400: '#D1B1F0',
-  purple500: '#BC8EE9',
-  purple600: '#7828C8',
-  purple700: '#6622AA',
-  purple800: '#4D1980',
-  purple900: '#290E44'
+  purple50: "#F7F2FD",
+  purple100: "#F1E8FB",
+  purple200: "#EADCF8",
+  purple300: "#E0CBF5",
+  purple400: "#D1B1F0",
+  purple500: "#BC8EE9",
+  purple600: "#7828C8",
+  purple700: "#6622AA",
+  purple800: "#4D1980",
+  purple900: "#290E44",
 };
 
 export const purpleDark = {
-  purple50: '#1F0A33',
-  purple100: '#240C3C',
-  purple200: '#2E0F4D',
-  purple300: '#3B1362',
-  purple400: '#451773',
-  purple500: '#571D91',
-  purple600: '#7828C8',
-  purple700: '#9750DD',
-  purple800: '#B583E7',
-  purple900: '#F7ECFC'
+  purple50: "#1F0A33",
+  purple100: "#240C3C",
+  purple200: "#2E0F4D",
+  purple300: "#3B1362",
+  purple400: "#451773",
+  purple500: "#571D91",
+  purple600: "#7828C8",
+  purple700: "#9750DD",
+  purple800: "#B583E7",
+  purple900: "#F7ECFC",
 };
diff --git a/packages/react/src/theme/colors/red.ts b/packages/react/src/theme/colors/red.ts
index dd9adce828..110a10e48c 100644
--- a/packages/react/src/theme/colors/red.ts
+++ b/packages/react/src/theme/colors/red.ts
@@ -1,25 +1,25 @@
 export const red = {
-  red50: '#FEF0F5',
-  red100: '#FEE7EF',
-  red200: '#FDD8E5',
-  red300: '#FCC5D8',
-  red400: '#FAA8C5',
-  red500: '#F881AB',
-  red600: '#F31260',
-  red700: '#B80A47',
-  red800: '#910838',
-  red900: '#4E041E'
+  red50: "#FEF0F5",
+  red100: "#FEE7EF",
+  red200: "#FDD8E5",
+  red300: "#FCC5D8",
+  red400: "#FAA8C5",
+  red500: "#F881AB",
+  red600: "#F31260",
+  red700: "#B80A47",
+  red800: "#910838",
+  red900: "#4E041E",
 };
 
 export const redDark = {
-  red50: '#300313',
-  red100: '#300313',
-  red200: '#44041A',
-  red300: '#5C0523',
-  red400: '#6F062B',
-  red500: '#910838',
-  red600: '#F31260',
-  red700: '#F4256D',
-  red800: '#F75F94',
-  red900: '#FDD8E5'
+  red50: "#300313",
+  red100: "#300313",
+  red200: "#44041A",
+  red300: "#5C0523",
+  red400: "#6F062B",
+  red500: "#910838",
+  red600: "#F31260",
+  red700: "#F4256D",
+  red800: "#F75F94",
+  red900: "#FDD8E5",
 };
diff --git a/packages/react/src/theme/colors/yellow.ts b/packages/react/src/theme/colors/yellow.ts
index acafe538b6..75cd1f1996 100644
--- a/packages/react/src/theme/colors/yellow.ts
+++ b/packages/react/src/theme/colors/yellow.ts
@@ -1,25 +1,25 @@
 export const yellow = {
-  yellow50: '#FEF9F0',
-  yellow100: '#FEF5E7',
-  yellow200: '#FDEFD8',
-  yellow300: '#FCE7C5',
-  yellow400: '#FBDBA7',
-  yellow500: '#F9CB80',
-  yellow600: '#F5A524',
-  yellow700: '#B97509',
-  yellow800: '#925D07',
-  yellow900: '#4E3104'
+  yellow50: "#FEF9F0",
+  yellow100: "#FEF5E7",
+  yellow200: "#FDEFD8",
+  yellow300: "#FCE7C5",
+  yellow400: "#FBDBA7",
+  yellow500: "#F9CB80",
+  yellow600: "#F5A524",
+  yellow700: "#B97509",
+  yellow800: "#925D07",
+  yellow900: "#4E3104",
 };
 
 export const yellowDark = {
-  yellow50: '#3A2503',
-  yellow100: '#442B03',
-  yellow200: '#583804',
-  yellow300: '#704705',
-  yellow400: '#845306',
-  yellow500: '#A66908',
-  yellow600: '#F5A524',
-  yellow700: '#F6AD37',
-  yellow800: '#F8C572',
-  yellow900: '#FEF7EC'
+  yellow50: "#3A2503",
+  yellow100: "#442B03",
+  yellow200: "#583804",
+  yellow300: "#704705",
+  yellow400: "#845306",
+  yellow500: "#A66908",
+  yellow600: "#F5A524",
+  yellow700: "#F6AD37",
+  yellow800: "#F8C572",
+  yellow900: "#FEF7EC",
 };
diff --git a/packages/react/src/theme/common.ts b/packages/react/src/theme/common.ts
index 2aedae0225..04d3a11852 100644
--- a/packages/react/src/theme/common.ts
+++ b/packages/react/src/theme/common.ts
@@ -1,26 +1,27 @@
-import { defaultThemeMap as defaultStitchesThemeMap } from '@stitches/react';
-import type * as Stitches from '@stitches/react';
+import type * as Stitches from "@stitches/react";
+
+import {defaultThemeMap as defaultStitchesThemeMap} from "@stitches/react";
 
 export const defaultTokens = {
   fonts: {
     sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI','Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans','Helvetica Neue', sans-serif;",
-    mono: "Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono','Courier New', monospace;"
+    mono: "Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono','Courier New', monospace;",
   },
   fontSizes: {
-    xs: '0.75rem',
-    sm: '0.875rem',
-    base: '1rem',
-    md: '1rem',
-    lg: '1.125rem',
-    xl: '1.25rem',
-    '2xl': '1.5rem',
-    '3xl': '1.875rem',
-    '4xl': '2.25rem',
-    '5xl': '3rem',
-    '6xl': '3.75rem',
-    '7xl': '4.5rem',
-    '8xl': '6rem',
-    '9xl': '8rem'
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem",
+    "7xl": "4.5rem",
+    "8xl": "6rem",
+    "9xl": "8rem",
   },
   fontWeights: {
     hairline: 100,
@@ -31,7 +32,7 @@ export const defaultTokens = {
     semibold: 600,
     bold: 700,
     extrabold: 800,
-    black: 900
+    black: 900,
   },
   lineHeights: {
     xs: 1,
@@ -40,215 +41,214 @@ export const defaultTokens = {
     md: 1.5,
     lg: 1.75,
     xl: 1.75,
-    '2xl': 2,
-    '3xl': 2.25,
-    '4xl': 2.5,
-    '5xl': 1,
-    '6xl': 1,
-    '7xl': 1,
-    '8xl': 1,
-    '9xl': 1
+    "2xl": 2,
+    "3xl": 2.25,
+    "4xl": 2.5,
+    "5xl": 1,
+    "6xl": 1,
+    "7xl": 1,
+    "8xl": 1,
+    "9xl": 1,
   },
   letterSpacings: {
-    tighter: '-0.05em',
-    tight: '-0.025em',
-    normal: '0',
-    wide: '0.025em',
-    wider: '0.05em',
-    widest: '0.1em'
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
   },
   space: {
-    0: '0rem',
-    xs: '0.5rem',
-    sm: '0.75rem',
-    md: '1rem',
-    lg: '1.25rem',
-    xl: '2.25rem',
-    '2xl': '3rem',
-    '3xl': '5rem',
-    '4xl': '10rem',
-    '5xl': '14rem',
-    '6xl': '18rem',
-    '7xl': '24rem',
-    '8xl': '32rem',
-    '9xl': '40rem',
-    min: 'min-content',
-    max: 'max-content',
-    fit: 'fit-content',
-    screen: '100vw',
-    full: '100%',
-    px: '1px',
-    1: '0.125rem',
-    2: '0.25rem',
-    3: '0.375rem',
-    4: '0.5rem',
-    5: '0.625rem',
-    6: '0.75rem',
-    7: '0.875rem',
-    8: '1rem',
-    9: '1.25rem',
-    10: '1.5rem',
-    11: '1.75rem',
-    12: '2rem',
-    13: '2.25rem',
-    14: '2.5rem',
-    15: '2.75rem',
-    16: '3rem',
-    17: '3.5rem',
-    18: '4rem',
-    20: '5rem',
-    24: '6rem',
-    28: '7rem',
-    32: '8rem',
-    36: '9rem',
-    40: '10rem',
-    44: '11rem',
-    48: '12rem',
-    52: '13rem',
-    56: '14rem',
-    60: '15rem',
-    64: '16rem',
-    72: '18rem',
-    80: '20rem',
-    96: '24rem'
+    0: "0rem",
+    xs: "0.5rem",
+    sm: "0.75rem",
+    md: "1rem",
+    lg: "1.25rem",
+    xl: "2.25rem",
+    "2xl": "3rem",
+    "3xl": "5rem",
+    "4xl": "10rem",
+    "5xl": "14rem",
+    "6xl": "18rem",
+    "7xl": "24rem",
+    "8xl": "32rem",
+    "9xl": "40rem",
+    min: "min-content",
+    max: "max-content",
+    fit: "fit-content",
+    screen: "100vw",
+    full: "100%",
+    px: "1px",
+    1: "0.125rem",
+    2: "0.25rem",
+    3: "0.375rem",
+    4: "0.5rem",
+    5: "0.625rem",
+    6: "0.75rem",
+    7: "0.875rem",
+    8: "1rem",
+    9: "1.25rem",
+    10: "1.5rem",
+    11: "1.75rem",
+    12: "2rem",
+    13: "2.25rem",
+    14: "2.5rem",
+    15: "2.75rem",
+    16: "3rem",
+    17: "3.5rem",
+    18: "4rem",
+    20: "5rem",
+    24: "6rem",
+    28: "7rem",
+    32: "8rem",
+    36: "9rem",
+    40: "10rem",
+    44: "11rem",
+    48: "12rem",
+    52: "13rem",
+    56: "14rem",
+    60: "15rem",
+    64: "16rem",
+    72: "18rem",
+    80: "20rem",
+    96: "24rem",
   },
   radii: {
-    xs: '7px',
-    sm: '9px',
-    md: '12px',
-    base: '14px',
-    lg: '14px',
-    xl: '18px',
-    '2xl': '24px',
-    '3xl': '32px',
-    squared: '33%',
-    rounded: '50%',
-    pill: '9999px'
+    xs: "7px",
+    sm: "9px",
+    md: "12px",
+    base: "14px",
+    lg: "14px",
+    xl: "18px",
+    "2xl": "24px",
+    "3xl": "32px",
+    squared: "33%",
+    rounded: "50%",
+    pill: "9999px",
   },
   zIndices: {
-    1: '100',
-    2: '200',
-    3: '300',
-    4: '400',
-    5: '500',
-    10: '1000',
-    max: '9999'
+    1: "100",
+    2: "200",
+    3: "300",
+    4: "400",
+    5: "500",
+    10: "1000",
+    max: "9999",
   },
   borderWeights: {
-    light: '1px',
-    normal: '2px',
-    bold: '3px',
-    extrabold: '4px',
-    black: '5px'
+    light: "1px",
+    normal: "2px",
+    bold: "3px",
+    extrabold: "4px",
+    black: "5px",
   },
   transitions: {
-    default: 'all 250ms ease',
+    default: "all 250ms ease",
     button:
-      'background 0.25s ease 0s, color 0.25s ease 0s, border-color 0.25s ease 0s, box-shadow 0.25s ease 0s, transform 0.25s ease 0s, opacity 0.25s ease 0s',
-    avatar: 'box-shadow 0.25s ease 0s, opacity 0.25s ease 0s',
-    link: 'opacity 0.25s ease 0s, background 0.25s ease 0s',
-    card: 'transform 0.25s ease 0s, filter 0.25s ease 0s, box-shadow 0.25s ease 0s',
+      "background 0.25s ease 0s, color 0.25s ease 0s, border-color 0.25s ease 0s, box-shadow 0.25s ease 0s, transform 0.25s ease 0s, opacity 0.25s ease 0s",
+    avatar: "box-shadow 0.25s ease 0s, opacity 0.25s ease 0s",
+    link: "opacity 0.25s ease 0s, background 0.25s ease 0s",
+    card: "transform 0.25s ease 0s, filter 0.25s ease 0s, box-shadow 0.25s ease 0s",
     dropdownItem:
-      'background 0.25s ease, transform 0.25s ease, color 0.15s ease, box-shadow 0.25s ease 0s'
+      "background 0.25s ease, transform 0.25s ease, color 0.15s ease, box-shadow 0.25s ease 0s",
   },
   breakpoints: {
-    xs: '650px',
-    sm: '960px',
-    md: '1280px',
-    lg: '1400px',
-    xl: '1920px'
-  }
+    xs: "650px",
+    sm: "960px",
+    md: "1280px",
+    lg: "1400px",
+    xl: "1920px",
+  },
 };
 
 export const defaultColors = {
   // generic colors
-  white: '#ffffff',
-  black: '#000000',
+  white: "#ffffff",
+  black: "#000000",
 
   // brand colors
-  primaryLight: '$blue200',
-  primaryLightHover: '$blue300',
-  primaryLightActive: '$blue400',
-  primaryLightContrast: '$blue600',
-  primary: '$blue600',
-  primaryBorder: '$blue500',
-  primaryBorderHover: '$blue600',
-  primarySolidHover: '$blue700',
-  primarySolidContrast: '$white',
-  primaryShadow: '$blue500',
+  primaryLight: "$blue200",
+  primaryLightHover: "$blue300",
+  primaryLightActive: "$blue400",
+  primaryLightContrast: "$blue600",
+  primary: "$blue600",
+  primaryBorder: "$blue500",
+  primaryBorderHover: "$blue600",
+  primarySolidHover: "$blue700",
+  primarySolidContrast: "$white",
+  primaryShadow: "$blue500",
 
-  secondaryLight: '$purple200',
-  secondaryLightHover: '$purple300',
-  secondaryLightActive: '$purple400',
-  secondaryLightContrast: '$purple600',
-  secondary: '$purple600',
-  secondaryBorder: '$purple500',
-  secondaryBorderHover: '$purple600',
-  secondarySolidHover: '$purple700',
-  secondarySolidContrast: '$white',
-  secondaryShadow: '$purple500',
+  secondaryLight: "$purple200",
+  secondaryLightHover: "$purple300",
+  secondaryLightActive: "$purple400",
+  secondaryLightContrast: "$purple600",
+  secondary: "$purple600",
+  secondaryBorder: "$purple500",
+  secondaryBorderHover: "$purple600",
+  secondarySolidHover: "$purple700",
+  secondarySolidContrast: "$white",
+  secondaryShadow: "$purple500",
 
-  successLight: '$green200',
-  successLightHover: '$green300',
-  successLightActive: '$green400',
-  successLightContrast: '$green700',
-  success: '$green600',
-  successBorder: '$green500',
-  successBorderHover: '$green600',
-  successSolidHover: '$green700',
-  successSolidContrast: '$white',
-  successShadow: '$green500',
+  successLight: "$green200",
+  successLightHover: "$green300",
+  successLightActive: "$green400",
+  successLightContrast: "$green700",
+  success: "$green600",
+  successBorder: "$green500",
+  successBorderHover: "$green600",
+  successSolidHover: "$green700",
+  successSolidContrast: "$white",
+  successShadow: "$green500",
 
-  warningLight: '$yellow200',
-  warningLightHover: '$yellow300',
-  warningLightActive: '$yellow400',
-  warningLightContrast: '$yellow700',
-  warning: '$yellow600',
-  warningBorder: '$yellow500',
-  warningBorderHover: '$yellow600',
-  warningSolidHover: '$yellow700',
-  warningSolidContrast: '$white',
-  warningShadow: '$yellow500',
+  warningLight: "$yellow200",
+  warningLightHover: "$yellow300",
+  warningLightActive: "$yellow400",
+  warningLightContrast: "$yellow700",
+  warning: "$yellow600",
+  warningBorder: "$yellow500",
+  warningBorderHover: "$yellow600",
+  warningSolidHover: "$yellow700",
+  warningSolidContrast: "$white",
+  warningShadow: "$yellow500",
 
-  errorLight: '$red200',
-  errorLightHover: '$red300',
-  errorLightActive: '$red400',
-  errorLightContrast: '$red600',
-  error: '$red600',
-  errorBorder: '$red500',
-  errorBorderHover: '$red600',
-  errorSolidHover: '$red700',
-  errorSolidContrast: '$white',
-  errorShadow: '$red500',
+  errorLight: "$red200",
+  errorLightHover: "$red300",
+  errorLightActive: "$red400",
+  errorLightContrast: "$red600",
+  error: "$red600",
+  errorBorder: "$red500",
+  errorBorderHover: "$red600",
+  errorSolidHover: "$red700",
+  errorSolidContrast: "$white",
+  errorShadow: "$red500",
 
-  neutralLight: '$gray100',
-  neutralLightHover: '$gray200',
-  neutralLightActive: '$gray300',
-  neutralLightContrast: '$gray800',
-  neutral: '$gray600',
-  neutralBorder: '$gray400',
-  neutralBorderHover: '$gray500',
-  neutralSolidHover: '$gray600',
-  neutralSolidContrast: '$white',
-  neutralShadow: '$gray400',
+  neutralLight: "$gray100",
+  neutralLightHover: "$gray200",
+  neutralLightActive: "$gray300",
+  neutralLightContrast: "$gray800",
+  neutral: "$gray600",
+  neutralBorder: "$gray400",
+  neutralBorderHover: "$gray500",
+  neutralSolidHover: "$gray600",
+  neutralSolidContrast: "$white",
+  neutralShadow: "$gray400",
 
-  gradient:
-    'linear-gradient(112deg, $cyan600 -63.59%, $pink600 -20.3%, $blue600 70.46%)',
+  gradient: "linear-gradient(112deg, $cyan600 -63.59%, $pink600 -20.3%, $blue600 70.46%)",
 
   // accents
-  accents0: '$gray50',
-  accents1: '$gray100',
-  accents2: '$gray200',
-  accents3: '$gray300',
-  accents4: '$gray400',
-  accents5: '$gray500',
-  accents6: '$gray600',
-  accents7: '$gray700',
-  accents8: '$gray800',
-  accents9: '$gray900',
+  accents0: "$gray50",
+  accents1: "$gray100",
+  accents2: "$gray200",
+  accents3: "$gray300",
+  accents4: "$gray400",
+  accents5: "$gray500",
+  accents6: "$gray600",
+  accents7: "$gray700",
+  accents8: "$gray800",
+  accents9: "$gray900",
 
   // misc
-  border: '$gray300'
+  border: "$gray300",
 };
 
 export const defaultMedia = {
@@ -262,279 +262,279 @@ export const defaultMedia = {
   mdMax: `(max-width: ${defaultTokens.breakpoints.md})`,
   lgMax: `(max-width: ${defaultTokens.breakpoints.lg})`,
   xlMax: `(max-width: ${defaultTokens.breakpoints.xl})`,
-  motion: '(prefers-reduced-motion: reduce)',
-  safari: 'not all and (min-resolution:.001dpcm)',
-  hover: '(any-hover: hover)',
-  dark: '(prefers-color-scheme: dark)',
-  light: '(prefers-color-scheme: light)'
+  motion: "(prefers-reduced-motion: reduce)",
+  safari: "not all and (min-resolution:.001dpcm)",
+  hover: "(any-hover: hover)",
+  dark: "(prefers-color-scheme: dark)",
+  light: "(prefers-color-scheme: light)",
 };
 
 export const defaultUtils = {
-  p: (value: Stitches.PropertyValue<'padding'>) => ({
-    padding: value
+  p: (value: Stitches.PropertyValue<"padding">) => ({
+    padding: value,
   }),
-  pt: (value: Stitches.PropertyValue<'paddingTop'>) => ({
-    paddingTop: value
+  pt: (value: Stitches.PropertyValue<"paddingTop">) => ({
+    paddingTop: value,
   }),
-  pr: (value: Stitches.PropertyValue<'paddingRight'>) => ({
-    paddingRight: value
+  pr: (value: Stitches.PropertyValue<"paddingRight">) => ({
+    paddingRight: value,
   }),
-  pb: (value: Stitches.PropertyValue<'paddingBottom'>) => ({
-    paddingBottom: value
+  pb: (value: Stitches.PropertyValue<"paddingBottom">) => ({
+    paddingBottom: value,
   }),
-  pl: (value: Stitches.PropertyValue<'paddingLeft'>) => ({
-    paddingLeft: value
+  pl: (value: Stitches.PropertyValue<"paddingLeft">) => ({
+    paddingLeft: value,
   }),
-  px: (value: Stitches.PropertyValue<'paddingLeft'>) => ({
+  px: (value: Stitches.PropertyValue<"paddingLeft">) => ({
     paddingLeft: value,
-    paddingRight: value
+    paddingRight: value,
   }),
-  py: (value: Stitches.PropertyValue<'paddingTop'>) => ({
+  py: (value: Stitches.PropertyValue<"paddingTop">) => ({
     paddingTop: value,
-    paddingBottom: value
+    paddingBottom: value,
   }),
-  m: (value: Stitches.PropertyValue<'margin'>) => ({
-    margin: value
+  m: (value: Stitches.PropertyValue<"margin">) => ({
+    margin: value,
   }),
-  mt: (value: Stitches.PropertyValue<'marginTop'>) => ({
-    marginTop: value
+  mt: (value: Stitches.PropertyValue<"marginTop">) => ({
+    marginTop: value,
   }),
-  mr: (value: Stitches.PropertyValue<'marginRight'>) => ({
-    marginRight: value
+  mr: (value: Stitches.PropertyValue<"marginRight">) => ({
+    marginRight: value,
   }),
-  mb: (value: Stitches.PropertyValue<'marginBottom'>) => ({
-    marginBottom: value
+  mb: (value: Stitches.PropertyValue<"marginBottom">) => ({
+    marginBottom: value,
   }),
-  ml: (value: Stitches.PropertyValue<'marginLeft'>) => ({
-    marginLeft: value
+  ml: (value: Stitches.PropertyValue<"marginLeft">) => ({
+    marginLeft: value,
   }),
-  mx: (value: Stitches.PropertyValue<'marginLeft'>) => ({
+  mx: (value: Stitches.PropertyValue<"marginLeft">) => ({
     marginLeft: value,
-    marginRight: value
+    marginRight: value,
   }),
-  my: (value: Stitches.PropertyValue<'marginTop'>) => ({
+  my: (value: Stitches.PropertyValue<"marginTop">) => ({
     marginTop: value,
-    marginBottom: value
+    marginBottom: value,
   }),
-  ta: (value: Stitches.PropertyValue<'textAlign'>) => ({
-    textAlign: value
+  ta: (value: Stitches.PropertyValue<"textAlign">) => ({
+    textAlign: value,
   }),
-  tt: (value: Stitches.PropertyValue<'textTransform'>) => ({
-    textTransform: value
+  tt: (value: Stitches.PropertyValue<"textTransform">) => ({
+    textTransform: value,
   }),
-  to: (value: Stitches.PropertyValue<'textOverflow'>) => ({
-    textOverflow: value
+  to: (value: Stitches.PropertyValue<"textOverflow">) => ({
+    textOverflow: value,
   }),
-  d: (value: Stitches.PropertyValue<'display'>) => ({ display: value }),
-  dflex: (value: Stitches.PropertyValue<'alignItems'>) => ({
-    display: 'flex',
+  d: (value: Stitches.PropertyValue<"display">) => ({display: value}),
+  dflex: (value: Stitches.PropertyValue<"alignItems">) => ({
+    display: "flex",
     alignItems: value,
-    justifyContent: value
+    justifyContent: value,
   }),
-  fd: (value: Stitches.PropertyValue<'flexDirection'>) => ({
-    flexDirection: value
+  fd: (value: Stitches.PropertyValue<"flexDirection">) => ({
+    flexDirection: value,
   }),
-  fw: (value: Stitches.PropertyValue<'flexWrap'>) => ({ flexWrap: value }),
-  ai: (value: Stitches.PropertyValue<'alignItems'>) => ({
-    alignItems: value
+  fw: (value: Stitches.PropertyValue<"flexWrap">) => ({flexWrap: value}),
+  ai: (value: Stitches.PropertyValue<"alignItems">) => ({
+    alignItems: value,
   }),
-  ac: (value: Stitches.PropertyValue<'alignContent'>) => ({
-    alignContent: value
+  ac: (value: Stitches.PropertyValue<"alignContent">) => ({
+    alignContent: value,
   }),
-  jc: (value: Stitches.PropertyValue<'justifyContent'>) => ({
-    justifyContent: value
+  jc: (value: Stitches.PropertyValue<"justifyContent">) => ({
+    justifyContent: value,
   }),
-  as: (value: Stitches.PropertyValue<'alignSelf'>) => ({
-    alignSelf: value
+  as: (value: Stitches.PropertyValue<"alignSelf">) => ({
+    alignSelf: value,
   }),
-  fg: (value: Stitches.PropertyValue<'flexGrow'>) => ({ flexGrow: value }),
-  fs: (value: Stitches.PropertyValue<'fontSize'>) => ({
-    fontSize: value
+  fg: (value: Stitches.PropertyValue<"flexGrow">) => ({flexGrow: value}),
+  fs: (value: Stitches.PropertyValue<"fontSize">) => ({
+    fontSize: value,
   }),
-  fb: (value: Stitches.PropertyValue<'flexBasis'>) => ({
-    flexBasis: value
+  fb: (value: Stitches.PropertyValue<"flexBasis">) => ({
+    flexBasis: value,
   }),
-  bc: (value: Stitches.PropertyValue<'backgroundColor'>) => ({
-    backgroundColor: value
+  bc: (value: Stitches.PropertyValue<"backgroundColor">) => ({
+    backgroundColor: value,
   }),
-  bf: (value: Stitches.PropertyValue<'backdropFilter'>) => ({
-    backdropFilter: value
+  bf: (value: Stitches.PropertyValue<"backdropFilter">) => ({
+    backdropFilter: value,
   }),
-  bg: (value: Stitches.PropertyValue<'backgroundColor'>) => ({
-    background: value
+  bg: (value: Stitches.PropertyValue<"backgroundColor">) => ({
+    background: value,
   }),
-  bgBlur: (value: Stitches.PropertyValue<'backgroundColor'>) => ({
-    bf: 'saturate(180%) blur(10px)',
-    bg: value
+  bgBlur: (value: Stitches.PropertyValue<"backgroundColor">) => ({
+    bf: "saturate(180%) blur(10px)",
+    bg: value,
   }),
-  bgColor: (value: Stitches.PropertyValue<'backgroundColor'>) => ({
-    backgroundColor: value
+  bgColor: (value: Stitches.PropertyValue<"backgroundColor">) => ({
+    backgroundColor: value,
   }),
-  backgroundClip: (value: Stitches.PropertyValue<'backgroundClip'>) => ({
+  backgroundClip: (value: Stitches.PropertyValue<"backgroundClip">) => ({
     WebkitBackgroundClip: value,
-    backgroundClip: value
+    backgroundClip: value,
   }),
-  bgClip: (value: Stitches.PropertyValue<'backgroundClip'>) => ({
+  bgClip: (value: Stitches.PropertyValue<"backgroundClip">) => ({
     WebkitBackgroundClip: value,
-    backgroundClip: value
+    backgroundClip: value,
   }),
-  br: (value: Stitches.PropertyValue<'borderRadius'>) => ({
-    borderRadius: value
+  br: (value: Stitches.PropertyValue<"borderRadius">) => ({
+    borderRadius: value,
   }),
-  bw: (value: Stitches.PropertyValue<'borderWidth'>) => ({
-    borderWidth: value
+  bw: (value: Stitches.PropertyValue<"borderWidth">) => ({
+    borderWidth: value,
   }),
-  btrr: (value: Stitches.PropertyValue<'borderTopRightRadius'>) => ({
-    borderTopRightRadius: value
+  btrr: (value: Stitches.PropertyValue<"borderTopRightRadius">) => ({
+    borderTopRightRadius: value,
   }),
-  bbrr: (value: Stitches.PropertyValue<'borderBottomRightRadius'>) => ({
-    borderBottomRightRadius: value
+  bbrr: (value: Stitches.PropertyValue<"borderBottomRightRadius">) => ({
+    borderBottomRightRadius: value,
   }),
-  bblr: (value: Stitches.PropertyValue<'borderBottomLeftRadius'>) => ({
-    borderBottomLeftRadius: value
+  bblr: (value: Stitches.PropertyValue<"borderBottomLeftRadius">) => ({
+    borderBottomLeftRadius: value,
   }),
-  btlr: (value: Stitches.PropertyValue<'borderTopLeftRadius'>) => ({
-    borderTopLeftRadius: value
+  btlr: (value: Stitches.PropertyValue<"borderTopLeftRadius">) => ({
+    borderTopLeftRadius: value,
   }),
-  bs: (value: Stitches.PropertyValue<'boxShadow'>) => ({
-    boxShadow: value
+  bs: (value: Stitches.PropertyValue<"boxShadow">) => ({
+    boxShadow: value,
   }),
-  ds: (value: Stitches.PropertyValue<'boxShadow'>) => ({
-    dropShadow: value
+  ds: (value: Stitches.PropertyValue<"boxShadow">) => ({
+    dropShadow: value,
   }),
-  shadow: (value: Stitches.PropertyValue<'boxShadow'>) => ({
-    boxShadow: value
+  shadow: (value: Stitches.PropertyValue<"boxShadow">) => ({
+    boxShadow: value,
   }),
-  dshadow: (value: Stitches.PropertyValue<'boxShadow'>) => ({
-    dropShadow: value
+  dshadow: (value: Stitches.PropertyValue<"boxShadow">) => ({
+    dropShadow: value,
   }),
-  dropShadow: (value: Stitches.PropertyValue<'boxShadow'>) => ({
-    filter: `$dropShadows${value}`
+  dropShadow: (value: Stitches.PropertyValue<"boxShadow">) => ({
+    filter: `$dropShadows${value}`,
   }),
-  normalShadow: (value: Stitches.PropertyValue<'backgroundColor'>) => ({
-    boxShadow: `0 4px 14px 0 $colors${value}`
+  normalShadow: (value: Stitches.PropertyValue<"backgroundColor">) => ({
+    boxShadow: `0 4px 14px 0 $colors${value}`,
   }),
-  normalShadowVar: (value: Stitches.PropertyValue<'backgroundColor'>) => ({
-    boxShadow: `0 4px 14px 0 ${value}`
+  normalShadowVar: (value: Stitches.PropertyValue<"backgroundColor">) => ({
+    boxShadow: `0 4px 14px 0 ${value}`,
   }),
-  lh: (value: Stitches.PropertyValue<'lineHeight'>) => ({
-    lineHeight: value
+  lh: (value: Stitches.PropertyValue<"lineHeight">) => ({
+    lineHeight: value,
   }),
-  ov: (value: Stitches.PropertyValue<'overflow'>) => ({ overflow: value }),
-  ox: (value: Stitches.PropertyValue<'overflowX'>) => ({
-    overflowX: value
+  ov: (value: Stitches.PropertyValue<"overflow">) => ({overflow: value}),
+  ox: (value: Stitches.PropertyValue<"overflowX">) => ({
+    overflowX: value,
   }),
-  oy: (value: Stitches.PropertyValue<'overflowY'>) => ({
-    overflowY: value
+  oy: (value: Stitches.PropertyValue<"overflowY">) => ({
+    overflowY: value,
   }),
-  pe: (value: Stitches.PropertyValue<'pointerEvents'>) => ({
-    pointerEvents: value
+  pe: (value: Stitches.PropertyValue<"pointerEvents">) => ({
+    pointerEvents: value,
   }),
-  events: (value: Stitches.PropertyValue<'pointerEvents'>) => ({
-    pointerEvents: value
+  events: (value: Stitches.PropertyValue<"pointerEvents">) => ({
+    pointerEvents: value,
   }),
-  us: (value: Stitches.PropertyValue<'userSelect'>) => ({
+  us: (value: Stitches.PropertyValue<"userSelect">) => ({
     WebkitUserSelect: value,
-    userSelect: value
+    userSelect: value,
   }),
-  userSelect: (value: Stitches.PropertyValue<'userSelect'>) => ({
+  userSelect: (value: Stitches.PropertyValue<"userSelect">) => ({
     WebkitUserSelect: value,
-    userSelect: value
+    userSelect: value,
   }),
-  w: (value: Stitches.PropertyValue<'width'>) => ({ width: value }),
-  h: (value: Stitches.PropertyValue<'height'>) => ({ height: value }),
-  mw: (value: Stitches.PropertyValue<'maxWidth'>) => ({ maxWidth: value }),
-  maxW: (value: Stitches.PropertyValue<'maxWidth'>) => ({
-    maxWidth: value
+  w: (value: Stitches.PropertyValue<"width">) => ({width: value}),
+  h: (value: Stitches.PropertyValue<"height">) => ({height: value}),
+  mw: (value: Stitches.PropertyValue<"maxWidth">) => ({maxWidth: value}),
+  maxW: (value: Stitches.PropertyValue<"maxWidth">) => ({
+    maxWidth: value,
   }),
-  mh: (value: Stitches.PropertyValue<'maxHeight'>) => ({
-    maxHeight: value
+  mh: (value: Stitches.PropertyValue<"maxHeight">) => ({
+    maxHeight: value,
   }),
-  maxH: (value: Stitches.PropertyValue<'maxHeight'>) => ({
-    maxHeight: value
+  maxH: (value: Stitches.PropertyValue<"maxHeight">) => ({
+    maxHeight: value,
   }),
-  size: (value: Stitches.PropertyValue<'width'>) => ({
+  size: (value: Stitches.PropertyValue<"width">) => ({
     width: value,
-    height: value
+    height: value,
   }),
-  minSize: (value: Stitches.PropertyValue<'width'>) => ({
+  minSize: (value: Stitches.PropertyValue<"width">) => ({
     minWidth: value,
     minHeight: value,
     width: value,
-    height: value
+    height: value,
   }),
-  sizeMin: (value: Stitches.PropertyValue<'width'>) => ({
+  sizeMin: (value: Stitches.PropertyValue<"width">) => ({
     minWidth: value,
     minHeight: value,
     width: value,
-    height: value
+    height: value,
   }),
-  maxSize: (value: Stitches.PropertyValue<'width'>) => ({
+  maxSize: (value: Stitches.PropertyValue<"width">) => ({
     maxWidth: value,
-    maxHeight: value
+    maxHeight: value,
   }),
-  sizeMax: (value: Stitches.PropertyValue<'width'>) => ({
+  sizeMax: (value: Stitches.PropertyValue<"width">) => ({
     maxWidth: value,
-    maxHeight: value
+    maxHeight: value,
   }),
-  appearance: (value: Stitches.PropertyValue<'appearance'>) => ({
+  appearance: (value: Stitches.PropertyValue<"appearance">) => ({
     WebkitAppearance: value,
-    appearance: value
+    appearance: value,
   }),
-  scale: (value: Stitches.PropertyValue<'scale'>) => ({
-    transform: `scale(${value})`
+  scale: (value: Stitches.PropertyValue<"scale">) => ({
+    transform: `scale(${value})`,
   }),
-  linearGradient: (value: Stitches.PropertyValue<'backgroundImage'>) => ({
-    backgroundImage: `linear-gradient(${value})`
+  linearGradient: (value: Stitches.PropertyValue<"backgroundImage">) => ({
+    backgroundImage: `linear-gradient(${value})`,
   }),
-  tdl: (value: Stitches.PropertyValue<'textDecorationLine'>) => ({
-    textDecorationLine: value
+  tdl: (value: Stitches.PropertyValue<"textDecorationLine">) => ({
+    textDecorationLine: value,
   }),
-  truncateText: (value: Stitches.PropertyValue<'width'>) => ({
+  truncateText: (value: Stitches.PropertyValue<"width">) => ({
     maxWidth: value,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
   }),
-  textGradient: (value: Stitches.PropertyValue<'backgroundImage'>) => ({
+  textGradient: (value: Stitches.PropertyValue<"backgroundImage">) => ({
     backgroundImage: `linear-gradient(${value})`,
-    WebkitBackgroundClip: 'text',
-    WebkitTextFillColor: 'transparent',
-    '&::selection': {
-      WebkitTextFillColor: '$colors$text'
-    }
-  })
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    "&::selection": {
+      WebkitTextFillColor: "$colors$text",
+    },
+  }),
 };
 
 export const defaultThemeMap = {
   ...defaultStitchesThemeMap,
-  width: 'space',
-  height: 'space',
-  minWidth: 'space',
-  maxWidth: 'space',
-  minHeight: 'space',
-  maxHeight: 'space',
-  flexBasis: 'space',
-  gridTemplateColumns: 'space',
-  gridTemplateRows: 'space',
-  blockSize: 'space',
-  minBlockSize: 'space',
-  maxBlockSize: 'space',
-  inlineSize: 'space',
-  minInlineSize: 'space',
-  maxInlineSize: 'space',
-  borderWidth: 'borderWeights'
+  width: "space",
+  height: "space",
+  minWidth: "space",
+  maxWidth: "space",
+  minHeight: "space",
+  maxHeight: "space",
+  flexBasis: "space",
+  gridTemplateColumns: "space",
+  gridTemplateRows: "space",
+  blockSize: "space",
+  minBlockSize: "space",
+  maxBlockSize: "space",
+  inlineSize: "space",
+  minInlineSize: "space",
+  maxInlineSize: "space",
+  borderWidth: "borderWeights",
 };
 
 export default {
-  prefix: 'nextui',
+  prefix: "nextui",
   theme: {
     ...defaultTokens,
     colors: defaultColors,
     shadows: {},
-    dropShadows: {}
+    dropShadows: {},
   },
   media: defaultMedia,
   utils: defaultUtils,
-  themeMap: defaultThemeMap
+  themeMap: defaultThemeMap,
 };
diff --git a/packages/react/src/theme/dark-theme.ts b/packages/react/src/theme/dark-theme.ts
index 7560a0f8b6..be1e626712 100644
--- a/packages/react/src/theme/dark-theme.ts
+++ b/packages/react/src/theme/dark-theme.ts
@@ -6,15 +6,15 @@ import {
   redDark,
   cyanDark,
   pinkDark,
-  grayDark
-} from './colors';
+  grayDark,
+} from "./colors";
 
 export default {
   colors: {
     // background
-    background: '$black',
-    foreground: '$white',
-    backgroundContrast: '$accents0',
+    background: "$black",
+    foreground: "$white",
+    backgroundContrast: "$accents0",
 
     //semantic colors
     ...blueDark,
@@ -27,58 +27,58 @@ export default {
     ...grayDark,
 
     // brand colors
-    primaryLight: '$blue50',
-    primaryLightHover: '$blue100',
-    primaryLightActive: '$blue200',
-    primaryLightContrast: '$blue600',
+    primaryLight: "$blue50",
+    primaryLightHover: "$blue100",
+    primaryLightActive: "$blue200",
+    primaryLightContrast: "$blue600",
 
-    secondaryLight: '$purple50',
-    secondaryLightHover: '$purple100',
-    secondaryLightActive: '$purple200',
-    secondaryLightContrast: '$purple800',
-    secondary: '$purple700',
-    secondaryBorder: '$purple500',
-    secondaryBorderHover: '$purple600',
-    secondarySolidHover: '$purple700',
-    secondaryShadow: '$purple500',
+    secondaryLight: "$purple50",
+    secondaryLightHover: "$purple100",
+    secondaryLightActive: "$purple200",
+    secondaryLightContrast: "$purple800",
+    secondary: "$purple700",
+    secondaryBorder: "$purple500",
+    secondaryBorderHover: "$purple600",
+    secondarySolidHover: "$purple700",
+    secondaryShadow: "$purple500",
 
-    successLight: '$green50',
-    successLightHover: '$green100',
-    successLightActive: '$green200',
+    successLight: "$green50",
+    successLightHover: "$green100",
+    successLightActive: "$green200",
 
-    warningLight: '$yellow50',
-    warningLightHover: '$yellow100',
-    warningLightActive: '$yellow200',
+    warningLight: "$yellow50",
+    warningLightHover: "$yellow100",
+    warningLightActive: "$yellow200",
 
-    errorLight: '$red50',
-    errorLightHover: '$red100',
-    errorLightActive: '$red200',
-    errorLightContrast: '$red700',
+    errorLight: "$red50",
+    errorLightHover: "$red100",
+    errorLightActive: "$red200",
+    errorLightContrast: "$red700",
 
-    neutralLight: '$gray200',
-    neutralLightHover: '$gray300',
-    neutralLightActive: '$gray400',
-    neutralSolidContrast: '$white',
+    neutralLight: "$gray200",
+    neutralLightHover: "$gray300",
+    neutralLightActive: "$gray400",
+    neutralSolidContrast: "$white",
 
     // misc
-    text: '$gray900',
-    link: '$blue700',
-    codeLight: '$cyan50',
-    code: '$cyan600',
-    selection: '$pink800'
+    text: "$gray900",
+    link: "$blue700",
+    codeLight: "$cyan50",
+    code: "$cyan600",
+    selection: "$pink800",
   },
   shadows: {
-    xs: '0 2px 8px 1px rgb(0 0 0 / 0.07), 0 1px 1px -1px rgb(0 0 0 / 0.04)',
-    sm: '0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)',
-    md: '0 12px 20px 6px rgb(0 0 0 / 0.08)',
-    lg: '0 12px 34px 6px rgb(0 0 0 / 0.18)',
-    xl: '0 25px 65px 0px rgb(0 0 0 / 0.35)'
+    xs: "0 2px 8px 1px rgb(0 0 0 / 0.07), 0 1px 1px -1px rgb(0 0 0 / 0.04)",
+    sm: "0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)",
+    md: "0 12px 20px 6px rgb(0 0 0 / 0.08)",
+    lg: "0 12px 34px 6px rgb(0 0 0 / 0.18)",
+    xl: "0 25px 65px 0px rgb(0 0 0 / 0.35)",
   },
   dropShadows: {
-    xs: 'drop-shadow(0 2px 4px rgb(0 0 0 / 0.07)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.04))',
-    sm: 'drop-shadow(0 2px 8px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.04))',
-    md: 'drop-shadow(0 4px 12px rgb(0 0 0 / 0.08)) drop-shadow(0 20px 8px rgb(0 0 0 / 0.04))',
-    lg: 'drop-shadow(0 12px 24px rgb(0 0 0 / 0.15)) drop-shadow(0 12px 14px rgb(0 0 0 / 0.1))',
-    xl: 'drop-shadow(0 25px 34px rgb(0 0 0 / 0.35))'
-  }
+    xs: "drop-shadow(0 2px 4px rgb(0 0 0 / 0.07)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.04))",
+    sm: "drop-shadow(0 2px 8px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.04))",
+    md: "drop-shadow(0 4px 12px rgb(0 0 0 / 0.08)) drop-shadow(0 20px 8px rgb(0 0 0 / 0.04))",
+    lg: "drop-shadow(0 12px 24px rgb(0 0 0 / 0.15)) drop-shadow(0 12px 14px rgb(0 0 0 / 0.1))",
+    xl: "drop-shadow(0 25px 34px rgb(0 0 0 / 0.35))",
+  },
 };
diff --git a/packages/react/src/theme/index.ts b/packages/react/src/theme/index.ts
index 2f262a0a9d..ac4762f76d 100644
--- a/packages/react/src/theme/index.ts
+++ b/packages/react/src/theme/index.ts
@@ -1,4 +1,4 @@
-export * from './types';
-export * from './stitches.config';
-export * from './colors';
-export { default as NextUIProvider } from './theme-provider';
+export * from "./types";
+export * from "./stitches.config";
+export * from "./colors";
+export {default as NextUIProvider} from "./theme-provider";
diff --git a/packages/react/src/theme/light-theme.ts b/packages/react/src/theme/light-theme.ts
index 0f2fa32402..f654055a25 100644
--- a/packages/react/src/theme/light-theme.ts
+++ b/packages/react/src/theme/light-theme.ts
@@ -1,11 +1,11 @@
-import { blue, purple, green, yellow, red, cyan, pink, gray } from './colors';
+import {blue, purple, green, yellow, red, cyan, pink, gray} from "./colors";
 
 export default {
   colors: {
     // background colors
-    background: '$white',
-    foreground: '$black',
-    backgroundContrast: '$white',
+    background: "$white",
+    foreground: "$black",
+    backgroundContrast: "$white",
 
     //semantic colors
     ...blue,
@@ -18,24 +18,24 @@ export default {
     ...gray,
 
     // misc
-    text: '$gray900',
-    link: '$blue600',
-    codeLight: '$pink100',
-    code: '$pink600',
-    selection: '$blue200'
+    text: "$gray900",
+    link: "$blue600",
+    codeLight: "$pink100",
+    code: "$pink600",
+    selection: "$blue200",
   },
   shadows: {
-    xs: '0 2px 8px 1px rgb(104 112 118 / 0.07), 0 1px 1px -1px rgb(104 112 118 / 0.04)',
-    sm: '0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)',
-    md: '0 12px 20px 6px rgb(104 112 118 / 0.08)',
-    lg: '0 12px 34px 6px rgb(104 112 118 / 0.18)',
-    xl: '0 25px 65px 0px rgb(104 112 118 / 0.35)'
+    xs: "0 2px 8px 1px rgb(104 112 118 / 0.07), 0 1px 1px -1px rgb(104 112 118 / 0.04)",
+    sm: "0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)",
+    md: "0 12px 20px 6px rgb(104 112 118 / 0.08)",
+    lg: "0 12px 34px 6px rgb(104 112 118 / 0.18)",
+    xl: "0 25px 65px 0px rgb(104 112 118 / 0.35)",
   },
   dropShadows: {
-    xs: 'drop-shadow(0 2px 4px rgb(104 112 118 / 0.07)) drop-shadow(0 1px 1px rgb(104 112 118 / 0.04))',
-    sm: 'drop-shadow(0 2px 8px rgb(104 112 118 / 0.07)) drop-shadow(0 2px 4px rgb(104 112 118 / 0.04))',
-    md: 'drop-shadow(0 4px 12px rgb(104 112 118 / 0.08)) drop-shadow(0 20px 8px rgb(104 112 118 / 0.04))',
-    lg: 'drop-shadow(0 12px 24px rgb(104 112 118 / 0.15)) drop-shadow(0 12px 14px rgb(104 112 118 / 0.1))',
-    xl: 'drop-shadow(0 25px 34px rgb(104 112 118 / 0.35))'
-  }
+    xs: "drop-shadow(0 2px 4px rgb(104 112 118 / 0.07)) drop-shadow(0 1px 1px rgb(104 112 118 / 0.04))",
+    sm: "drop-shadow(0 2px 8px rgb(104 112 118 / 0.07)) drop-shadow(0 2px 4px rgb(104 112 118 / 0.04))",
+    md: "drop-shadow(0 4px 12px rgb(104 112 118 / 0.08)) drop-shadow(0 20px 8px rgb(104 112 118 / 0.04))",
+    lg: "drop-shadow(0 12px 24px rgb(104 112 118 / 0.15)) drop-shadow(0 12px 14px rgb(104 112 118 / 0.1))",
+    xl: "drop-shadow(0 25px 34px rgb(104 112 118 / 0.35))",
+  },
 };
diff --git a/packages/react/src/theme/shared-css.ts b/packages/react/src/theme/shared-css.ts
index 7ba9ec2883..aad27ff478 100644
--- a/packages/react/src/theme/shared-css.ts
+++ b/packages/react/src/theme/shared-css.ts
@@ -1,57 +1,57 @@
-import { css } from './stitches.config';
+import {css} from "./stitches.config";
 
 export const sharedFocus = css({
-  WebkitTapHighlightColor: 'transparent',
-  '&:focus:not(&:focus-visible)': {
-    boxShadow: 'none'
+  WebkitTapHighlightColor: "transparent",
+  "&:focus:not(&:focus-visible)": {
+    boxShadow: "none",
   },
-  '&:focus': {
-    outline: 'none',
-    boxShadow: '0 0 0 2px $colors$background, 0 0 0 4px $colors$primary'
+  "&:focus": {
+    outline: "none",
+    boxShadow: "0 0 0 2px $colors$background, 0 0 0 4px $colors$primary",
+  },
+  "@safari": {
+    WebkitTapHighlightColor: "transparent",
+    outline: "none",
   },
-  '@safari': {
-    WebkitTapHighlightColor: 'transparent',
-    outline: 'none'
-  }
 });
 
 export const cssFocusVisible = css({
   variants: {
     isFocusVisible: {
       true: {
-        outline: 'transparent solid 2px',
-        outlineOffset: '2px',
-        boxShadow: '0 0 0 2px $colors$background, 0 0 0 4px $colors$primary'
+        outline: "transparent solid 2px",
+        outlineOffset: "2px",
+        boxShadow: "0 0 0 2px $colors$background, 0 0 0 4px $colors$primary",
       },
       false: {
-        outline: 'none'
-      }
-    }
-  }
+        outline: "none",
+      },
+    },
+  },
 });
 
 export const cssNoBlurriness = css({
   /* Avoid blurriness */
-  transform: 'translateZ(0)',
-  backfaceVisibility: 'hidden'
+  transform: "translateZ(0)",
+  backfaceVisibility: "hidden",
 });
 
 export const sharedVisuallyHidden = css({
-  border: '0px',
-  clip: 'rect(0px, 0px, 0px, 0px)',
-  height: '1px',
-  width: '1px',
-  margin: '-1px',
-  padding: '0px',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  position: 'absolute'
+  border: "0px",
+  clip: "rect(0px, 0px, 0px, 0px)",
+  height: "1px",
+  width: "1px",
+  margin: "-1px",
+  padding: "0px",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  position: "absolute",
 });
 
 export const sharedDialogPopup = css({
   // for dropdown triggers
   '&[aria-haspopup="true"]&[aria-expanded="true"]': {
     opacity: 0.7,
-    transform: 'scale(0.97)'
-  }
+    transform: "scale(0.97)",
+  },
 });
diff --git a/packages/react/src/theme/stitches.config.ts b/packages/react/src/theme/stitches.config.ts
index 05172233d6..021101b428 100644
--- a/packages/react/src/theme/stitches.config.ts
+++ b/packages/react/src/theme/stitches.config.ts
@@ -1,10 +1,13 @@
-import { createStitches } from '@stitches/react';
-import type * as Stitches from '@stitches/react';
-import commonTheme from './common';
-import lightTheme from './light-theme';
-import darkTheme from './dark-theme';
-import deepMerge from '../utils/deep-merge';
-import { Theme, BaseTheme } from './types';
+import type * as Stitches from "@stitches/react";
+
+import {createStitches} from "@stitches/react";
+
+import deepMerge from "../utils/deep-merge";
+
+import commonTheme from "./common";
+import lightTheme from "./light-theme";
+import darkTheme from "./dark-theme";
+import {Theme, BaseTheme} from "./types";
 
 export const getStitchesTheme = (targetTheme: BaseTheme): BaseTheme => {
   return deepMerge(targetTheme, commonTheme.theme);
@@ -15,16 +18,16 @@ const stitches = createStitches({
   theme: {
     ...commonTheme.theme,
     shadows: {
-      ...lightTheme.shadows
+      ...lightTheme.shadows,
     },
     dropShadows: {
-      ...lightTheme.dropShadows
+      ...lightTheme.dropShadows,
     },
     colors: {
       ...commonTheme.theme.colors,
-      ...lightTheme.colors
-    }
-  }
+      ...lightTheme.colors,
+    },
+  },
 });
 
 export const createThemeBase = stitches.createTheme;
@@ -37,34 +40,34 @@ export const theme = stitches.theme;
 export const config = stitches.config;
 export const baseTheme = commonTheme;
 
-export const createTheme = ({ type, theme, className }: Theme) => {
+export const createTheme = ({type, theme, className}: Theme) => {
   if (!type) {
-    throw new Error('Theme type is required');
+    throw new Error("Theme type is required");
   }
+
   return createThemeBase(
     className || `${type}-theme`,
-    deepMerge(type === 'dark' ? darkTheme : lightTheme, theme)
+    deepMerge(type === "dark" ? darkTheme : lightTheme, theme),
   );
 };
 
 // stitches types
 export type VariantProps<T> = Stitches.VariantProps<T>;
-export type PropertyValue<T extends keyof Stitches.CSSProperties> =
-  Stitches.PropertyValue<T>;
+export type PropertyValue<T extends keyof Stitches.CSSProperties> = Stitches.PropertyValue<T>;
 export type CSSProperties = Stitches.CSSProperties;
 export type CSS = Stitches.CSS<typeof config>;
 export type StitchesTheme = typeof theme;
 
 // common theme types
-export type Spaces = typeof commonTheme.theme['space'];
-export type FontSizes = typeof commonTheme.theme['fontSizes'];
-export type Fonts = typeof commonTheme.theme['fonts'];
-export type FontWeights = typeof commonTheme.theme['fontWeights'];
-export type LineHeights = typeof commonTheme.theme['lineHeights'];
-export type LetterSpacings = typeof commonTheme.theme['letterSpacings'];
-export type Colors = typeof commonTheme.theme['colors'];
-export type Radii = typeof commonTheme.theme['radii'];
-export type zIndices = typeof commonTheme.theme['zIndices'];
-export type BorderWeights = typeof commonTheme.theme['borderWeights'];
-export type Tranistions = typeof commonTheme.theme['transitions'];
-export type Breakpoints = typeof commonTheme.theme['breakpoints'];
+export type Spaces = typeof commonTheme.theme["space"];
+export type FontSizes = typeof commonTheme.theme["fontSizes"];
+export type Fonts = typeof commonTheme.theme["fonts"];
+export type FontWeights = typeof commonTheme.theme["fontWeights"];
+export type LineHeights = typeof commonTheme.theme["lineHeights"];
+export type LetterSpacings = typeof commonTheme.theme["letterSpacings"];
+export type Colors = typeof commonTheme.theme["colors"];
+export type Radii = typeof commonTheme.theme["radii"];
+export type zIndices = typeof commonTheme.theme["zIndices"];
+export type BorderWeights = typeof commonTheme.theme["borderWeights"];
+export type Tranistions = typeof commonTheme.theme["transitions"];
+export type Breakpoints = typeof commonTheme.theme["breakpoints"];
diff --git a/packages/react/src/theme/theme-context.ts b/packages/react/src/theme/theme-context.ts
index feb493da19..e64428f90b 100644
--- a/packages/react/src/theme/theme-context.ts
+++ b/packages/react/src/theme/theme-context.ts
@@ -1,11 +1,12 @@
-import React from 'react';
-import { theme } from './stitches.config';
-import { NextUIThemeContext } from './types';
+import React from "react";
+
+import {theme} from "./stitches.config";
+import {NextUIThemeContext} from "./types";
 
 export const defaultContext: NextUIThemeContext = {
   isDark: false,
   theme,
-  type: 'light'
+  type: "light",
 };
 
 const ThemeContext: React.Context<NextUIThemeContext> =
diff --git a/packages/react/src/theme/theme-provider.tsx b/packages/react/src/theme/theme-provider.tsx
index ffadf33071..c455c090ab 100644
--- a/packages/react/src/theme/theme-provider.tsx
+++ b/packages/react/src/theme/theme-provider.tsx
@@ -1,19 +1,16 @@
-import React, { PropsWithChildren, useState, useMemo, useEffect } from 'react';
-import { SSRProvider } from '@react-aria/ssr';
-import { OverlayProvider } from '@react-aria/overlays';
-import CssBaseline from '../css-baseline';
-import ThemeContext, { defaultContext } from './theme-context';
-import withDefaults from '../utils/with-defaults';
-import { CreateTheme, NextUIThemeContext, ThemeType } from './types';
-import deepMerge from '../utils/deep-merge';
-import { copyObject } from '../utils/object';
-import {
-  changeTheme,
-  getThemeName,
-  getDocumentCSSTokens,
-  getDocumentTheme
-} from './utils';
-import useSSR from '../use-ssr';
+import React, {PropsWithChildren, useState, useMemo, useEffect} from "react";
+import {SSRProvider} from "@react-aria/ssr";
+import {OverlayProvider} from "@react-aria/overlays";
+
+import CssBaseline from "../css-baseline";
+import withDefaults from "../utils/with-defaults";
+import deepMerge from "../utils/deep-merge";
+import {copyObject} from "../utils/object";
+import useSSR from "../use-ssr";
+
+import {changeTheme, getThemeName, getDocumentCSSTokens, getDocumentTheme} from "./utils";
+import {CreateTheme, NextUIThemeContext, ThemeType} from "./types";
+import ThemeContext, {defaultContext} from "./theme-context";
 
 export interface Props {
   theme?: CreateTheme;
@@ -21,7 +18,7 @@ export interface Props {
 }
 
 const defaultProps = {
-  disableBaseline: false
+  disableBaseline: false,
 };
 
 export type ThemeProviderProps = Props & typeof defaultProps;
@@ -29,13 +26,11 @@ export type ThemeProviderProps = Props & typeof defaultProps;
 const ThemeProvider: React.FC<PropsWithChildren<ThemeProviderProps>> = ({
   theme: userTheme,
   disableBaseline,
-  children
+  children,
 }) => {
-  const { isBrowser } = useSSR();
+  const {isBrowser} = useSSR();
 
-  const [currentTheme, setCurrentTheme] = useState<ThemeType | string>(
-    defaultContext.type
-  );
+  const [currentTheme, setCurrentTheme] = useState<ThemeType | string>(defaultContext.type);
 
   const changeCurrentTheme = (type: ThemeType | string) => {
     setCurrentTheme((ct) => (ct !== type ? type : ct));
@@ -43,6 +38,7 @@ const ThemeProvider: React.FC<PropsWithChildren<ThemeProviderProps>> = ({
 
   const changeTypeBaseEl = (el: HTMLElement) => {
     const themeValue = getDocumentTheme(el);
+
     themeValue && changeCurrentTheme(themeValue);
   };
 
@@ -50,10 +46,11 @@ const ThemeProvider: React.FC<PropsWithChildren<ThemeProviderProps>> = ({
     const themeTokens = isBrowser ? getDocumentCSSTokens() : {};
     const theme = deepMerge(copyObject(defaultContext.theme), themeTokens);
     const themeName = getThemeName(currentTheme);
+
     return {
       theme,
       type: themeName,
-      isDark: themeName === 'dark'
+      isDark: themeName === "dark",
     };
   }, [currentTheme, isBrowser]);
 
@@ -62,12 +59,9 @@ const ThemeProvider: React.FC<PropsWithChildren<ThemeProviderProps>> = ({
     changeTypeBaseEl(document?.documentElement);
 
     const observer = new MutationObserver((mutation) => {
-      if (
-        mutation &&
-        mutation.length > 0 &&
-        mutation[0]?.target.nodeName === 'BODY'
-      ) {
+      if (mutation && mutation.length > 0 && mutation[0]?.target.nodeName === "BODY") {
         const documentTheme = document?.body?.dataset?.theme;
+
         documentTheme && changeCurrentTheme(documentTheme);
       } else {
         changeTypeBaseEl(document?.documentElement);
@@ -76,12 +70,12 @@ const ThemeProvider: React.FC<PropsWithChildren<ThemeProviderProps>> = ({
 
     observer.observe(document?.documentElement, {
       attributes: true,
-      attributeFilter: ['data-theme', 'style']
+      attributeFilter: ["data-theme", "style"],
     });
 
     observer.observe(document?.body, {
       attributes: true,
-      attributeFilter: ['data-theme', 'style']
+      attributeFilter: ["data-theme", "style"],
     });
 
     return () => observer.disconnect();
diff --git a/packages/react/src/theme/types.ts b/packages/react/src/theme/types.ts
index d8af6d364b..e4f4466145 100644
--- a/packages/react/src/theme/types.ts
+++ b/packages/react/src/theme/types.ts
@@ -1,30 +1,27 @@
-import { StitchesTheme, createThemeBase } from './stitches.config';
-import commonTheme from './common';
+import {StitchesTheme, createThemeBase} from "./stitches.config";
+import commonTheme from "./common";
 
 /** Configuration Interface */
 declare namespace ConfigType {
   /** Theme interface. */
   export type Theme<T = {}> = {
-    fonts?: { [token in number | string]: boolean | number | string };
-    fontSizes?: { [token in number | string]: boolean | number | string };
-    fontWeights?: { [token in number | string]: boolean | number | string };
-    lineHeights?: { [token in number | string]: boolean | number | string };
-    letterSpacings?: { [token in number | string]: boolean | number | string };
-    space?: { [token in number | string]: boolean | number | string };
-    radii?: { [token in number | string]: boolean | number | string };
-    zIndices?: { [token in number | string]: boolean | number | string };
-    borderWeights?: { [token in number | string]: boolean | number | string };
-    colors?: { [token in number | string]: boolean | number | string };
-    shadows?: { [token in number | string]: boolean | number | string };
-    dropShadows?: { [token in number | string]: boolean | number | string };
-    transitions?: { [token in number | string]: boolean | number | string };
-    breakpoints?: { [token in number | string]: boolean | number | string };
+    fonts?: {[token in number | string]: boolean | number | string};
+    fontSizes?: {[token in number | string]: boolean | number | string};
+    fontWeights?: {[token in number | string]: boolean | number | string};
+    lineHeights?: {[token in number | string]: boolean | number | string};
+    letterSpacings?: {[token in number | string]: boolean | number | string};
+    space?: {[token in number | string]: boolean | number | string};
+    radii?: {[token in number | string]: boolean | number | string};
+    zIndices?: {[token in number | string]: boolean | number | string};
+    borderWeights?: {[token in number | string]: boolean | number | string};
+    colors?: {[token in number | string]: boolean | number | string};
+    shadows?: {[token in number | string]: boolean | number | string};
+    dropShadows?: {[token in number | string]: boolean | number | string};
+    transitions?: {[token in number | string]: boolean | number | string};
+    breakpoints?: {[token in number | string]: boolean | number | string};
   } & {
     [Scale in keyof T]: {
-      [Token in keyof T[Scale]]: T[Scale][Token] extends
-        | boolean
-        | number
-        | string
+      [Token in keyof T[Scale]]: T[Scale][Token] extends boolean | number | string
         ? T[Scale][Token]
         : boolean | number | string;
     };
@@ -33,10 +30,10 @@ declare namespace ConfigType {
 
 export type BaseTheme = ConfigType.Theme;
 export type NextUITheme = StitchesTheme;
-export type ThemeType = 'dark' | 'light';
+export type ThemeType = "dark" | "light";
 export type CreateTheme = ReturnType<typeof createThemeBase>;
 
-export type TokenKeyName = keyof typeof commonTheme['theme'];
+export type TokenKeyName = keyof typeof commonTheme["theme"];
 
 export interface TokenValue {
   token: number | string;
diff --git a/packages/react/src/theme/utils.ts b/packages/react/src/theme/utils.ts
index 47460130bc..aedf829833 100644
--- a/packages/react/src/theme/utils.ts
+++ b/packages/react/src/theme/utils.ts
@@ -1,24 +1,24 @@
-import commonTheme from './common';
-import defaultTheme from './light-theme';
-import { ThemeType, TokenValue, TokenKeyName } from './types';
-import clsx from '../utils/clsx';
+import clsx from "../utils/clsx";
+
+import commonTheme from "./common";
+import defaultTheme from "./light-theme";
+import {ThemeType, TokenValue, TokenKeyName} from "./types";
 
 export const getTokenValue = (token: TokenKeyName, tokenName: string) => {
-  if (!document || !token) return '';
+  if (!document || !token) return "";
   let docStyle = getComputedStyle(document.documentElement);
   const tokenKey = `--${commonTheme.prefix}-${token}-${tokenName}`;
   const tokenValue = docStyle.getPropertyValue(tokenKey);
-  if (tokenValue && tokenValue.includes('var')) {
+
+  if (tokenValue && tokenValue.includes("var")) {
     getTokenValue(token, tokenValue);
   }
+
   return tokenValue;
 };
 
 export const getDocumentCSSTokens = () => {
-  const colorKeys = [
-    ...Object.keys(commonTheme.theme.colors),
-    ...Object.keys(defaultTheme.colors)
-  ];
+  const colorKeys = [...Object.keys(commonTheme.theme.colors), ...Object.keys(defaultTheme.colors)];
 
   const shadowKeys = Object.keys(defaultTheme.shadows);
 
@@ -30,41 +30,39 @@ export const getDocumentCSSTokens = () => {
    *    value: "var(--nextui-colors-gray100)"
    * }
    */
-  const colorTokens = colorKeys.reduce(
-    (acc: { [key in string]?: TokenValue }, crr: string) => {
-      const color = getTokenValue('colors', crr);
-      if (color) {
-        acc[crr] = {
-          prefix: commonTheme.prefix,
-          scale: 'colors',
-          token: crr,
-          value: color
-        };
-      }
-      return acc;
-    },
-    {}
-  );
-
-  const shadowTokens = shadowKeys.reduce(
-    (acc: { [key in string]?: TokenValue }, crr: string) => {
-      const shadow = getTokenValue('shadows', crr);
-      if (shadow) {
-        acc[crr] = {
-          prefix: commonTheme.prefix,
-          scale: 'shadows',
-          token: crr,
-          value: shadow
-        };
-      }
-      return acc;
-    },
-    {}
-  );
+  const colorTokens = colorKeys.reduce((acc: {[key in string]?: TokenValue}, crr: string) => {
+    const color = getTokenValue("colors", crr);
+
+    if (color) {
+      acc[crr] = {
+        prefix: commonTheme.prefix,
+        scale: "colors",
+        token: crr,
+        value: color,
+      };
+    }
+
+    return acc;
+  }, {});
+
+  const shadowTokens = shadowKeys.reduce((acc: {[key in string]?: TokenValue}, crr: string) => {
+    const shadow = getTokenValue("shadows", crr);
+
+    if (shadow) {
+      acc[crr] = {
+        prefix: commonTheme.prefix,
+        scale: "shadows",
+        token: crr,
+        value: shadow,
+      };
+    }
+
+    return acc;
+  }, {});
 
   return {
     colors: colorTokens,
-    shadows: shadowTokens
+    shadows: shadowTokens,
   };
 };
 
@@ -74,25 +72,26 @@ export const getDocumentCSSTokens = () => {
 export const getDocumentTheme = (el: HTMLElement) => {
   const styleAttrValues =
     el
-      ?.getAttribute('style')
-      ?.split(';')
+      ?.getAttribute("style")
+      ?.split(";")
       .map((el) => el.trim())
-      .filter((el) => el.includes('color-scheme')) || [];
+      .filter((el) => el.includes("color-scheme")) || [];
 
   const colorScheme =
     styleAttrValues.length > 0
-      ? styleAttrValues[0].replace('color-scheme: ', '').replace(';', '')
-      : '';
+      ? styleAttrValues[0].replace("color-scheme: ", "").replace(";", "")
+      : "";
 
-  const documentTheme = el?.getAttribute('data-theme');
+  const documentTheme = el?.getAttribute("data-theme");
 
   return documentTheme || colorScheme;
 };
 
 export const getThemeName = (theme: ThemeType | string) => {
-  if (typeof theme === 'string') {
-    return theme?.includes('-theme') ? theme?.replace('-theme', '') : theme;
+  if (typeof theme === "string") {
+    return theme?.includes("-theme") ? theme?.replace("-theme", "") : theme;
   }
+
   return theme;
 };
 
@@ -102,21 +101,17 @@ export const changeTheme = (theme: ThemeType | string) => {
 
   const prevClasses =
     el
-      ?.getAttribute('class')
-      ?.split(' ')
-      .filter(
-        (cls) =>
-          !cls.includes('theme') &&
-          !cls.includes('light') &&
-          !cls.includes('dark')
-      ) || [];
+      ?.getAttribute("class")
+      ?.split(" ")
+      .filter((cls) => !cls.includes("theme") && !cls.includes("light") && !cls.includes("dark")) ||
+    [];
   const prevStyles =
     el
-      ?.getAttribute('style')
-      ?.split(';')
-      .filter((stl) => !stl.includes('color-scheme') && stl.length)
+      ?.getAttribute("style")
+      ?.split(";")
+      .filter((stl) => !stl.includes("color-scheme") && stl.length)
       .map((el) => `${el};`) || [];
 
-  el?.setAttribute('class', clsx(prevClasses, `${getThemeName(theme)}-theme`));
-  el?.setAttribute('style', clsx(prevStyles, `color-scheme: ${theme};`));
+  el?.setAttribute("class", clsx(prevClasses, `${getThemeName(theme)}-theme`));
+  el?.setAttribute("style", clsx(prevStyles, `color-scheme: ${theme};`));
 };
diff --git a/packages/react/src/tooltip/__test__/index.test.tsx b/packages/react/src/tooltip/__test__/index.test.tsx
index 6ac7593cb2..4925b8ce0a 100644
--- a/packages/react/src/tooltip/__test__/index.test.tsx
+++ b/packages/react/src/tooltip/__test__/index.test.tsx
@@ -1,105 +1,95 @@
-import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-import { Button, Tooltip } from '../../index';
-import { nativeEvent, updateWrapper } from 'tests/utils';
-import { act } from 'react-dom/test-utils';
+import React from "react";
+import {mount, ReactWrapper} from "enzyme";
+import {nativeEvent, updateWrapper} from "tests/utils";
+import {act} from "react-dom/test-utils";
+
+import {Button, Tooltip} from "../../index";
 
 const expectTooltipIsShow = (wrapper: ReactWrapper) => {
-  expect(wrapper.find('.nextui-tooltip').length).not.toBe(0);
-  expect(wrapper.find('.nextui-tooltip').at(0).prop('role')).toEqual('tooltip');
+  expect(wrapper.find(".nextui-tooltip").length).not.toBe(0);
+  expect(wrapper.find(".nextui-tooltip").at(0).prop("role")).toEqual("tooltip");
 };
 
 const expectTooltipIsHidden = (wrapper: ReactWrapper) => {
-  expect(wrapper.find('.nextui-tooltip').at(0).length).toBe(0);
+  expect(wrapper.find(".nextui-tooltip").at(0).length).toBe(0);
 };
 
-describe('Tooltip', () => {
-  it('should render correctly', async () => {
+describe("Tooltip", () => {
+  it("should render correctly", async () => {
     const wrapper = mount(
-      <Tooltip content={<p className="test-content">custom-content</p>}>
-        some tips
-      </Tooltip>
+      <Tooltip content={<p className="test-content">custom-content</p>}>some tips</Tooltip>,
     );
 
     expectTooltipIsHidden(wrapper);
 
-    wrapper
-      .find('.nextui-tooltip-button')
-      .at(0)
-      .simulate('mouseEnter', nativeEvent);
+    wrapper.find(".nextui-tooltip-button").at(0).simulate("mouseEnter", nativeEvent);
 
     await updateWrapper(wrapper, 150);
 
-    wrapper.find('.test-content').at(0).simulate('click', nativeEvent);
+    wrapper.find(".test-content").at(0).simulate("click", nativeEvent);
     expectTooltipIsShow(wrapper);
 
     await updateWrapper(wrapper, 150);
-    wrapper
-      .find('.nextui-tooltip-button')
-      .at(0)
-      .simulate('mouseLeave', nativeEvent);
+    wrapper.find(".nextui-tooltip-button").at(0).simulate("mouseLeave", nativeEvent);
 
     await updateWrapper(wrapper, 150);
     expectTooltipIsHidden(wrapper);
   });
 
-  it('should render text when hover it', async () => {
+  it("should render text when hover it", async () => {
     const wrapper = mount(
       <div>
         <Tooltip content="some text">some tips</Tooltip>
-      </div>
+      </div>,
     );
-    wrapper
-      .find('.nextui-tooltip-button')
-      .at(0)
-      .simulate('mouseEnter', nativeEvent);
+
+    wrapper.find(".nextui-tooltip-button").at(0).simulate("mouseEnter", nativeEvent);
     await updateWrapper(wrapper, 150);
     expectTooltipIsShow(wrapper);
 
-    wrapper
-      .find('.nextui-tooltip-button')
-      .at(0)
-      .simulate('mouseLeave', nativeEvent);
+    wrapper.find(".nextui-tooltip-button").at(0).simulate("mouseLeave", nativeEvent);
     await updateWrapper(wrapper, 150);
     expectTooltipIsHidden(wrapper);
   });
 
-  it('should render text when focus it', async () => {
+  it("should render text when focus it", async () => {
     const wrapper = mount(
       <div>
         <Tooltip content="some text">some tips</Tooltip>
-      </div>
+      </div>,
     );
-    wrapper.find('.nextui-tooltip-button').at(0).simulate('focus', nativeEvent);
+
+    wrapper.find(".nextui-tooltip-button").at(0).simulate("focus", nativeEvent);
     await updateWrapper(wrapper, 150);
     expectTooltipIsShow(wrapper);
 
-    wrapper.find('.nextui-tooltip-button').at(0).simulate('blur', nativeEvent);
+    wrapper.find(".nextui-tooltip-button").at(0).simulate("blur", nativeEvent);
     await updateWrapper(wrapper, 150);
     expectTooltipIsHidden(wrapper);
   });
 
-  it('should render react-node when click it', async () => {
+  it("should render react-node when click it", async () => {
     const wrapper = mount(
       <Tooltip content={<p id="test">custom-content</p>} trigger="click">
         <span>click me</span>
-      </Tooltip>
+      </Tooltip>,
     );
-    wrapper.find('.nextui-tooltip-button').at(0).simulate('click', nativeEvent);
+
+    wrapper.find(".nextui-tooltip-button").at(0).simulate("click", nativeEvent);
     await updateWrapper(wrapper, 150);
     expectTooltipIsShow(wrapper);
 
-    const testNode = wrapper.find('#test').at(0);
+    const testNode = wrapper.find("#test").at(0);
 
     expect(testNode.length).not.toBe(0);
-    expect(testNode.text()).toContain('custom-content');
+    expect(testNode.text()).toContain("custom-content");
     act(() => {
       document.body.dispatchEvent(
-        new MouseEvent('click', {
+        new MouseEvent("click", {
           view: window,
           bubbles: true,
-          cancelable: true
-        })
+          cancelable: true,
+        }),
       );
     });
 
@@ -107,55 +97,54 @@ describe('Tooltip', () => {
     expectTooltipIsHidden(wrapper);
   });
 
-  it('should render inner components', async () => {
+  it("should render inner components", async () => {
     const wrapper = mount(
       <Tooltip content="some text">
-        <Button auto size="sm" id="test">
+        <Button auto id="test" size="sm">
           button
         </Button>
-      </Tooltip>
+      </Tooltip>,
     );
-    expect(wrapper.find('#test').length).not.toBe(0);
+
+    expect(wrapper.find("#test").length).not.toBe(0);
   });
 
-  it('should render correctly by visible', async () => {
+  it("should render correctly by visible", async () => {
     const wrapper = mount(
       <div>
-        <Tooltip
-          content={<p id="visible">custom-content</p>}
-          visible={true}
-          placement="rightEnd"
-        >
+        <Tooltip content={<p id="visible">custom-content</p>} placement="rightEnd" visible={true}>
           some tips
         </Tooltip>
-      </div>
+      </div>,
     );
 
     await updateWrapper(wrapper, 150);
-    expect(wrapper.find('#visible').length).toBe(1);
+    expect(wrapper.find("#visible").length).toBe(1);
   });
 
-  it('should render correctly by using wrong placement', async () => {
+  it("should render correctly by using wrong placement", async () => {
     const wrapper = mount(
       <div>
         <Tooltip
           content={<p id="initial-visible">custom-content</p>}
           initialVisible={true}
-          placement={'test' as any}
+          placement={"test" as any}
         >
           some tips
         </Tooltip>
-      </div>
+      </div>,
     );
-    expect(wrapper.find('#initial-visible').length).toBe(1);
+
+    expect(wrapper.find("#initial-visible").length).toBe(1);
   });
 
-  it('should not render when no content present', async () => {
+  it("should not render when no content present", async () => {
     const wrapper = mount(
       <div>
         <Tooltip content="">some tips</Tooltip>
-      </div>
+      </div>,
     );
-    expect(wrapper.find('#visible').length).toBe(0);
+
+    expect(wrapper.find("#visible").length).toBe(0);
   });
 });
diff --git a/packages/react/src/tooltip/index.ts b/packages/react/src/tooltip/index.ts
index 41efcbc511..52ce0c72e5 100644
--- a/packages/react/src/tooltip/index.ts
+++ b/packages/react/src/tooltip/index.ts
@@ -1,18 +1,15 @@
-import Tooltip from './tooltip';
+import Tooltip from "./tooltip";
 
-export type { TooltipProps } from './tooltip';
-export type { TooltipContentProps } from './tooltip-content';
+export type {TooltipProps} from "./tooltip";
+export type {TooltipContentProps} from "./tooltip-content";
 
 export {
   StyledTooltipTrigger,
   StyledTooltipArrow,
   StyledTooltipContent,
-  StyledTooltip
-} from './tooltip.styles';
+  StyledTooltip,
+} from "./tooltip.styles";
 
-export type {
-  TooltipTriggerVariantsProps,
-  TooltipContentVariantsProps
-} from './tooltip.styles';
+export type {TooltipTriggerVariantsProps, TooltipContentVariantsProps} from "./tooltip.styles";
 
 export default Tooltip;
diff --git a/packages/react/src/tooltip/placement.ts b/packages/react/src/tooltip/placement.ts
index 21d6287e96..7c27cf1927 100644
--- a/packages/react/src/tooltip/placement.ts
+++ b/packages/react/src/tooltip/placement.ts
@@ -1,5 +1,6 @@
-import { Placement } from '../utils/prop-types';
-import { MutableRefObject } from 'react';
+import {MutableRefObject} from "react";
+
+import {Placement} from "../utils/prop-types";
 
 interface ParentDomRect {
   top: number;
@@ -25,14 +26,13 @@ const defaultRect: ReactiveDomReact = {
   right: -1000,
   bottom: -1000,
   width: 0,
-  height: 0
+  height: 0,
 };
 
-export const getRect = (
-  ref: MutableRefObject<HTMLElement | null>
-): ReactiveDomReact => {
+export const getRect = (ref: MutableRefObject<HTMLElement | null>): ReactiveDomReact => {
   if (!ref || !ref.current) return defaultRect;
   const rect = ref.current.getBoundingClientRect();
+
   return {
     ...rect,
     width: rect.width || rect.right - rect.left,
@@ -40,7 +40,7 @@ export const getRect = (
     top: rect.top + document.documentElement.scrollTop,
     bottom: rect.bottom + document.documentElement.scrollTop,
     left: rect.left + document.documentElement.scrollLeft,
-    right: rect.right + document.documentElement.scrollLeft
+    right: rect.right + document.documentElement.scrollLeft,
   };
 };
 
@@ -51,9 +51,9 @@ export interface TooltipPlacement {
 }
 
 export const defaultTooltipPlacement = {
-  top: '-1000px',
-  left: '-1000px',
-  transform: 'none'
+  top: "-1000px",
+  left: "-1000px",
+  transform: "none",
 };
 
 export interface TooltipIconPlacement {
@@ -67,162 +67,160 @@ export interface TooltipIconPlacement {
 export const getPlacement = (
   placement: Placement,
   rect: ParentDomRect,
-  offset: number
+  offset: number,
 ): TooltipPlacement => {
-  const placements: { [key in Placement]: TooltipPlacement } = {
+  const placements: {[key in Placement]: TooltipPlacement} = {
     top: {
       top: `${rect.top - offset}px`,
       left: `${rect.left + rect.width / 2}px`,
-      transform: 'translate(-50%, -100%)'
+      transform: "translate(-50%, -100%)",
     },
     topStart: {
       top: `${rect.top - offset}px`,
       left: `${rect.left}px`,
-      transform: 'translate(0, -100%)'
+      transform: "translate(0, -100%)",
     },
     topEnd: {
       top: `${rect.top - offset}px`,
       left: `${rect.left + rect.width}px`,
-      transform: 'translate(-100%, -100%)'
+      transform: "translate(-100%, -100%)",
     },
     bottom: {
       top: `${rect.bottom + offset}px`,
       left: `${rect.left + rect.width / 2}px`,
-      transform: 'translate(-50%, 0)'
+      transform: "translate(-50%, 0)",
     },
     bottomStart: {
       top: `${rect.bottom + offset}px`,
       left: `${rect.left}px`,
-      transform: 'translate(0, 0)'
+      transform: "translate(0, 0)",
     },
     bottomEnd: {
       top: `${rect.bottom + offset}px`,
       left: `${rect.left + rect.width}px`,
-      transform: 'translate(-100%, 0)'
+      transform: "translate(-100%, 0)",
     },
     left: {
       top: `${rect.top + rect.height / 2}px`,
       left: `${rect.left - offset}px`,
-      transform: 'translate(-100%, -50%)'
+      transform: "translate(-100%, -50%)",
     },
     leftStart: {
       top: `${rect.top}px`,
       left: `${rect.left - offset}px`,
-      transform: 'translate(-100%, 0)'
+      transform: "translate(-100%, 0)",
     },
     leftEnd: {
       top: `${rect.top + rect.height}px`,
       left: `${rect.left - offset}px`,
-      transform: 'translate(-100%, -100%)'
+      transform: "translate(-100%, -100%)",
     },
     right: {
       top: `${rect.top + rect.height / 2}px`,
       left: `${rect.right + offset}px`,
-      transform: 'translate(0, -50%)'
+      transform: "translate(0, -50%)",
     },
     rightStart: {
       top: `${rect.top}px`,
       left: `${rect.right + offset}px`,
-      transform: 'translate(0, 0)'
+      transform: "translate(0, 0)",
     },
     rightEnd: {
       top: `${rect.top + rect.height}px`,
       left: `${rect.right + offset}px`,
-      transform: 'translate(0, -100%)'
-    }
+      transform: "translate(0, -100%)",
+    },
   };
+
   return placements[placement] || (placements.top as TooltipPlacement);
 };
 
-export const getIconPlacement = (
-  placement: Placement,
-  offset: number
-): TooltipIconPlacement => {
-  const placements: { [key in Placement]?: TooltipIconPlacement } = {
+export const getIconPlacement = (placement: Placement, offset: number): TooltipIconPlacement => {
+  const placements: {[key in Placement]?: TooltipIconPlacement} = {
     top: {
-      top: 'auto',
-      right: 'auto',
-      left: '50%',
-      bottom: '0px',
-      transform: 'translate(-50%, 100%) rotate(45deg)'
+      top: "auto",
+      right: "auto",
+      left: "50%",
+      bottom: "0px",
+      transform: "translate(-50%, 100%) rotate(45deg)",
     },
     topStart: {
-      top: 'auto',
-      right: 'auto',
-      left: '8%',
-      bottom: '0px',
-      transform: 'translate(8%, 100%) rotate(45deg)'
+      top: "auto",
+      right: "auto",
+      left: "8%",
+      bottom: "0px",
+      transform: "translate(8%, 100%) rotate(45deg)",
     },
     topEnd: {
-      top: 'auto',
-      right: '8%',
-      left: 'auto',
-      bottom: '0px',
-      transform: 'translate(8%, 100%) rotate(45deg)'
+      top: "auto",
+      right: "8%",
+      left: "auto",
+      bottom: "0px",
+      transform: "translate(8%, 100%) rotate(45deg)",
     },
     bottom: {
       top: `0px`,
-      right: 'auto',
-      left: '50%',
-      bottom: 'auto',
-      transform: 'translate(-50%, -100%) rotate(225deg)'
+      right: "auto",
+      left: "50%",
+      bottom: "auto",
+      transform: "translate(-50%, -100%) rotate(225deg)",
     },
     bottomStart: {
       top: `0px`,
-      right: 'auto',
-      left: '8%',
-      bottom: 'auto',
-      transform: 'translate(8%, -100%) rotate(225deg)'
+      right: "auto",
+      left: "8%",
+      bottom: "auto",
+      transform: "translate(8%, -100%) rotate(225deg)",
     },
     bottomEnd: {
       top: `0px`,
-      right: '8%',
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(8%, -100%) rotate(225deg)'
+      right: "8%",
+      left: "auto",
+      bottom: "auto",
+      transform: "translate(8%, -100%) rotate(225deg)",
     },
     left: {
-      top: '50%',
+      top: "50%",
       right: `-${offset - 1}px`,
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(100%, -50%) rotate(-45deg)'
+      left: "auto",
+      bottom: "auto",
+      transform: "translate(100%, -50%) rotate(-45deg)",
     },
     leftStart: {
-      top: 'calc(15% + 1px)',
+      top: "calc(15% + 1px)",
       right: `-${offset - 1}px`,
-      left: 'auto',
-      bottom: 'auto',
-      transform: 'translate(100%, 0) rotate(-45deg)'
+      left: "auto",
+      bottom: "auto",
+      transform: "translate(100%, 0) rotate(-45deg)",
     },
     leftEnd: {
-      top: 'auto',
+      top: "auto",
       right: `-${offset - 1}px`,
-      left: 'auto',
-      bottom: 'calc(15% + 1px)',
-      transform: 'translate(100%, 0) rotate(-45deg)'
+      left: "auto",
+      bottom: "calc(15% + 1px)",
+      transform: "translate(100%, 0) rotate(-45deg)",
     },
     right: {
-      top: '50%',
-      right: 'auto',
+      top: "50%",
+      right: "auto",
       left: `-${offset - 1}px`,
-      bottom: 'auto',
-      transform: 'translate(-100%, -50%) rotate(135deg)'
+      bottom: "auto",
+      transform: "translate(-100%, -50%) rotate(135deg)",
     },
     rightStart: {
-      top: 'calc(15% + 1px)',
-      right: 'auto',
+      top: "calc(15% + 1px)",
+      right: "auto",
       left: `-${offset - 1}px`,
-      bottom: 'auto',
-      transform: 'translate(-100%, 0) rotate(135deg)'
+      bottom: "auto",
+      transform: "translate(-100%, 0) rotate(135deg)",
     },
     rightEnd: {
-      top: 'auto',
-      right: 'auto',
+      top: "auto",
+      right: "auto",
       left: `-${offset - 1}px`,
-      bottom: 'calc(15% + 1px)',
-      transform: 'translate(-100%, 0) rotate(135deg)'
-    }
+      bottom: "calc(15% + 1px)",
+      transform: "translate(-100%, 0) rotate(135deg)",
+    },
   };
 
   return placements[placement] || (placements.top as TooltipIconPlacement);
diff --git a/packages/react/src/tooltip/tooltip-content.tsx b/packages/react/src/tooltip/tooltip-content.tsx
index d332e5a26f..8066d78ba6 100644
--- a/packages/react/src/tooltip/tooltip-content.tsx
+++ b/packages/react/src/tooltip/tooltip-content.tsx
@@ -1,32 +1,28 @@
-import React, {
-  MutableRefObject,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
-import { createPortal } from 'react-dom';
-import usePortal from '../use-portal';
-import useResize from '../use-resize';
-import CSSTransition from '../utils/css-transition';
-import useClickAnyWhere from '../use-click-anywhere';
+import React, {MutableRefObject, useEffect, useMemo, useRef, useState} from "react";
+import {createPortal} from "react-dom";
+
+import usePortal from "../use-portal";
+import useResize from "../use-resize";
+import CSSTransition from "../utils/css-transition";
+import useClickAnyWhere from "../use-click-anywhere";
+import {CSS} from "../theme/stitches.config";
+import {Placement} from "../utils/prop-types";
+import clsx from "../utils/clsx";
+import withDefaults from "../utils/with-defaults";
+
+import {
+  StyledTooltipContent,
+  StyledTooltip,
+  StyledTooltipArrow,
+  TooltipContentVariantsProps,
+} from "./tooltip.styles";
 import {
   getRect,
   getPlacement,
   TooltipPlacement,
   defaultTooltipPlacement,
-  getIconPlacement
-} from './placement';
-import { CSS } from '../theme/stitches.config';
-import { Placement } from '../utils/prop-types';
-import clsx from '../utils/clsx';
-import {
-  StyledTooltipContent,
-  StyledTooltip,
-  StyledTooltipArrow,
-  TooltipContentVariantsProps
-} from './tooltip.styles';
-import withDefaults from '../utils/with-defaults';
+  getIconPlacement,
+} from "./placement";
 
 interface Props {
   placement?: Placement;
@@ -41,33 +37,29 @@ interface Props {
 }
 
 const defaultProps = {
-  placement: 'top' as Placement,
+  placement: "top" as Placement,
   offset: 12,
-  className: ''
+  className: "",
 };
 
-export type TooltipContentProps = Props &
-  typeof defaultProps &
-  TooltipContentVariantsProps;
+export type TooltipContentProps = Props & typeof defaultProps & TooltipContentVariantsProps;
 
-const preClass = 'nextui-tooltip';
+const preClass = "nextui-tooltip";
 
-const TooltipContent: React.FC<
-  React.PropsWithChildren<TooltipContentProps>
-> = ({
+const TooltipContent: React.FC<React.PropsWithChildren<TooltipContentProps>> = ({
   children,
   parent,
   visible,
   offset,
   placement,
-  rounded,
+  rounded: _rounded,
   animated,
   className,
   hideArrow,
   css,
   ...props
 }) => {
-  const el = usePortal('tooltip');
+  const el = usePortal("tooltip");
   const selfRef = useRef<HTMLDivElement>(null);
   const [rect, setRect] = useState<TooltipPlacement>(defaultTooltipPlacement);
 
@@ -75,67 +67,63 @@ const TooltipContent: React.FC<
 
   const updateRect = () => {
     const pos = getPlacement(placement, getRect(parent), offset);
+
     setRect(pos);
   };
-
-  const { transform, top, left, right, bottom } = useMemo(
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const {transform, top, left, right, bottom} = useMemo(
     () => getIconPlacement(placement, 5),
-    [placement]
+    [placement],
   );
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useResize(updateRect);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useClickAnyWhere(() => updateRect());
-
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     updateRect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
   const preventHandler = (event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
   };
-
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const getState = useMemo(() => {
-    return visible ? 'open' : 'closed';
+    return visible ? "open" : "closed";
   }, [visible]);
 
   if (!el) return null;
+
   return createPortal(
-    <CSSTransition
-      name={`${preClass}-wrapper`}
-      visible={visible}
-      enterTime={20}
-      leaveTime={20}
-    >
+    <CSSTransition enterTime={20} leaveTime={20} name={`${preClass}-wrapper`} visible={visible}>
       <StyledTooltipContent
-        className={clsx(
-          `${preClass}-content`,
-          `${preClass}--${getState}`,
-          className
-        )}
-        data-state={getState}
         ref={selfRef}
-        onClick={preventHandler}
         animated={animated}
+        className={clsx(`${preClass}-content`, `${preClass}--${getState}`, className)}
         css={{
           left: rect.left,
           top: `calc(${rect.top} + 6px)`,
           transform: rect.transform,
           [`&.${preClass}-wrapper-enter-active`]: {
             opacity: 1,
-            top: rect.top
+            top: rect.top,
           },
-          ...(css as any)
+          ...(css as any),
         }}
+        data-state={getState}
+        onClick={preventHandler}
         {...props}
       >
         <StyledTooltip
-          role="tooltip"
-          data-state={getState}
-          hideArrow={hideArrow}
           className={clsx(preClass, {
-            [`${preClass}--with-arrow`]: !hideArrow
+            [`${preClass}--with-arrow`]: !hideArrow,
           })}
+          data-state={getState}
+          hideArrow={hideArrow}
+          role="tooltip"
         >
           <StyledTooltipArrow
             className={`${preClass}-arrow`}
@@ -144,17 +132,17 @@ const TooltipContent: React.FC<
               top,
               right,
               bottom,
-              transform
+              transform,
             }}
           />
           {children}
         </StyledTooltip>
       </StyledTooltipContent>
     </CSSTransition>,
-    el
+    el,
   );
 };
 
-TooltipContent.toString = () => '.nextui-tooltip-content';
+TooltipContent.toString = () => ".nextui-tooltip-content";
 
 export default withDefaults(TooltipContent, defaultProps);
diff --git a/packages/react/src/tooltip/tooltip.stories.tsx b/packages/react/src/tooltip/tooltip.stories.tsx
index 5b0970d751..452d2fdaae 100644
--- a/packages/react/src/tooltip/tooltip.stories.tsx
+++ b/packages/react/src/tooltip/tooltip.stories.tsx
@@ -1,23 +1,24 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { Tooltip, Button, Code, Spacer, Grid } from '../index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Tooltip, Button, Code, Spacer, Grid} from "../index";
 
 export default {
-  title: 'Display/Tooltip',
-  component: Tooltip
+  title: "Display/Tooltip",
+  component: Tooltip,
 } as Meta;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Container = ({ children }: any) => (
+const Container = ({children}: any) => (
   <div
     style={{
-      display: 'flex',
-      justifyContent: 'space-between',
-      flexWrap: 'wrap',
-      width: '100%',
-      position: 'absolute',
+      display: "flex",
+      justifyContent: "space-between",
+      flexWrap: "wrap",
+      width: "100%",
+      position: "absolute",
       left: 100,
-      top: 80
+      top: 80,
     }}
   >
     {children}
@@ -27,7 +28,7 @@ const Container = ({ children }: any) => (
 export const Default = () => {
   return (
     <Container>
-      <Tooltip content={'Developers love Next.js'}>
+      <Tooltip content={"Developers love Next.js"}>
         <Button auto flat>
           Do hover here
         </Button>
@@ -39,7 +40,7 @@ export const Default = () => {
 export const Rounded = () => {
   return (
     <Container>
-      <Tooltip content={'Developers love Next.js'} rounded color="primary">
+      <Tooltip rounded color="primary" content={"Developers love Next.js"}>
         <Button auto flat>
           Do hover here
         </Button>
@@ -53,43 +54,43 @@ export const Colors = () => {
     <Container>
       <div>
         <Tooltip content="Developers love Next.js">
-          <Button light auto>
+          <Button auto light>
             Default
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
-        <Tooltip content="Developers love Next.js" color="invert">
-          <Button flat auto>
+        <Tooltip color="invert" content="Developers love Next.js">
+          <Button auto flat>
             Invert
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
-        <Tooltip content="Developers love Next.js" color="primary">
-          <Button flat auto>
+        <Tooltip color="primary" content="Developers love Next.js">
+          <Button auto flat>
             Primary
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
-        <Tooltip content="Developers love Next.js" color="secondary">
-          <Button flat auto color="secondary">
+        <Tooltip color="secondary" content="Developers love Next.js">
+          <Button auto flat color="secondary">
             Secondary
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
-        <Tooltip content="Developers love Next.js" color="success">
-          <Button flat auto color="success">
+        <Tooltip color="success" content="Developers love Next.js">
+          <Button auto flat color="success">
             Success
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
-        <Tooltip content="Developers love Next.js" color="warning">
-          <Button flat auto color="warning">
+        <Tooltip color="warning" content="Developers love Next.js">
+          <Button auto flat color="warning">
             Warning
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
-        <Tooltip content="Developers love Next.js" color="error">
-          <Button flat auto color="error">
+        <Tooltip color="error" content="Developers love Next.js">
+          <Button auto flat color="error">
             Error
           </Button>
         </Tooltip>
@@ -103,43 +104,43 @@ export const TextColors = () => {
     <Container>
       <div>
         <Tooltip content="Developers love Next.js">
-          <Button light auto>
+          <Button auto light>
             Default
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
-        <Tooltip content="Developers love Next.js" color="invert">
-          <Button flat auto>
+        <Tooltip color="invert" content="Developers love Next.js">
+          <Button auto flat>
             Invert
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
         <Tooltip content="Developers love Next.js" contentColor="primary">
-          <Button flat auto>
+          <Button auto flat>
             Primary
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
         <Tooltip content="Developers love Next.js" contentColor="secondary">
-          <Button flat auto color="secondary">
+          <Button auto flat color="secondary">
             Secondary
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
         <Tooltip content="Developers love Next.js" contentColor="success">
-          <Button flat auto color="success">
+          <Button auto flat color="success">
             Success
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
         <Tooltip content="Developers love Next.js" contentColor="warning">
-          <Button flat auto color="warning">
+          <Button auto flat color="warning">
             Warning
           </Button>
         </Tooltip>
         <Spacer inline x={1.5} />
         <Tooltip content="Developers love Next.js" contentColor="error">
-          <Button flat auto color="error">
+          <Button auto flat color="error">
             Error
           </Button>
         </Tooltip>
@@ -149,16 +150,17 @@ export const TextColors = () => {
 };
 
 export const Placements = () => {
-  const text = 'Developers love Next.js and NextUI';
+  const text = "Developers love Next.js and NextUI";
+
   return (
     <Container>
-      <Grid.Container gap={1.5} justify="center" alignContent="center">
-        <Grid xs={4} justify="flex-end">
+      <Grid.Container alignContent="center" gap={1.5} justify="center">
+        <Grid justify="flex-end" xs={4}>
           <Tooltip color="primary" content={text} placement="topStart">
             topStart
           </Tooltip>
         </Grid>
-        <Grid xs={4} justify="center">
+        <Grid justify="center" xs={4}>
           <Tooltip color="primary" content={text} placement="top">
             top
           </Tooltip>
@@ -168,7 +170,7 @@ export const Placements = () => {
             topEnd
           </Tooltip>
         </Grid>
-        <Grid xs={3} justify="flex-end">
+        <Grid justify="flex-end" xs={3}>
           <Tooltip color="primary" content={text} placement="leftStart">
             leftStart
           </Tooltip>
@@ -179,7 +181,7 @@ export const Placements = () => {
             rightStart
           </Tooltip>
         </Grid>
-        <Grid xs={3} justify="flex-end">
+        <Grid justify="flex-end" xs={3}>
           <Tooltip color="primary" content={text} placement="left">
             left
           </Tooltip>
@@ -190,7 +192,7 @@ export const Placements = () => {
             right
           </Tooltip>
         </Grid>
-        <Grid xs={3} justify="flex-end">
+        <Grid justify="flex-end" xs={3}>
           <Tooltip color="primary" content={text} placement="leftEnd">
             leftEnd
           </Tooltip>
@@ -201,12 +203,12 @@ export const Placements = () => {
             rightEnd
           </Tooltip>
         </Grid>
-        <Grid xs={4} justify="flex-end">
+        <Grid justify="flex-end" xs={4}>
           <Tooltip color="primary" content={text} placement="bottomStart">
             bottomStart
           </Tooltip>
         </Grid>
-        <Grid xs={4} justify="center">
+        <Grid justify="center" xs={4}>
           <Tooltip color="primary" content={text} placement="bottom">
             bottom
           </Tooltip>
@@ -224,11 +226,7 @@ export const Placements = () => {
 export const Trigger = () => {
   return (
     <Container>
-      <Tooltip
-        content={'Developers love Next.js'}
-        trigger="click"
-        color="primary"
-      >
+      <Tooltip color="primary" content={"Developers love Next.js"} trigger="click">
         <Button auto flat>
           Click me
         </Button>
@@ -240,7 +238,7 @@ export const Trigger = () => {
 export const WithComponents = () => {
   return (
     <Container>
-      <Tooltip content={'Developers love Next.js'}>
+      <Tooltip content={"Developers love Next.js"}>
         <Button auto>Button</Button>
       </Tooltip>
     </Container>
@@ -250,7 +248,7 @@ export const WithComponents = () => {
 export const HideArrow = () => {
   return (
     <Container>
-      <Tooltip content={'Developers love Next.js'} color="primary" hideArrow>
+      <Tooltip hideArrow color="primary" content={"Developers love Next.js"}>
         <Button auto flat>
           Click me
         </Button>
@@ -262,11 +260,7 @@ export const HideArrow = () => {
 export const NoShadow = () => {
   return (
     <Container>
-      <Tooltip
-        content={'Developers love Next.js'}
-        color="primary"
-        shadow={false}
-      >
+      <Tooltip color="primary" content={"Developers love Next.js"} shadow={false}>
         <Button auto flat>
           Click me
         </Button>
@@ -294,7 +288,7 @@ export const CustomContent = () => {
 export const WithoutContent = () => {
   return (
     <Container>
-      <Tooltip content="" color="primary">
+      <Tooltip color="primary" content="">
         <Button auto flat>
           Do hover here
         </Button>
diff --git a/packages/react/src/tooltip/tooltip.styles.ts b/packages/react/src/tooltip/tooltip.styles.ts
index addb8b1292..c4e96ff119 100644
--- a/packages/react/src/tooltip/tooltip.styles.ts
+++ b/packages/react/src/tooltip/tooltip.styles.ts
@@ -1,176 +1,172 @@
-import { styled, VariantProps } from '../theme/stitches.config';
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledTooltipTrigger = styled('div', {
-  width: 'max-content',
-  display: 'inherit'
+export const StyledTooltipTrigger = styled("div", {
+  width: "max-content",
+  display: "inherit",
 });
 
-export const StyledTooltipArrow = styled('span', {
-  display: 'none',
-  content: '',
-  size: '$5',
-  zIndex: '-2',
-  background: '$$tooltipColor',
-  br: '0px 0px 2px 0px',
-  position: 'absolute'
+export const StyledTooltipArrow = styled("span", {
+  display: "none",
+  content: "",
+  size: "$5",
+  zIndex: "-2",
+  background: "$$tooltipColor",
+  br: "0px 0px 2px 0px",
+  position: "absolute",
 });
 
-export const StyledTooltip = styled('div', {
-  position: 'relative',
-  fs: '$sm',
+export const StyledTooltip = styled("div", {
+  position: "relative",
+  fs: "$sm",
   padding: 0,
   variants: {
     hideArrow: {
       false: {
         [`& ${StyledTooltipArrow}`]: {
-          display: 'block'
-        }
-      }
-    }
-  }
+          display: "block",
+        },
+      },
+    },
+  },
 });
 
-export const StyledTooltipContent = styled('div', {
-  position: 'absolute',
-  width: 'auto',
-  padding: '$3 $sm',
+export const StyledTooltipContent = styled("div", {
+  position: "absolute",
+  width: "auto",
+  padding: "$3 $sm",
   opacity: 0,
-  zIndex: '$10',
-  br: '$lg',
-  '@motion': {
-    transition: 'none'
+  zIndex: "$10",
+  br: "$lg",
+  "@motion": {
+    transition: "none",
   },
   variants: {
     color: {
       default: {
-        $$tooltipColor: '$colors$background',
-        bg: '$$tooltipColor'
+        $$tooltipColor: "$colors$background",
+        bg: "$$tooltipColor",
       },
       primary: {
-        $$tooltipColor: '$colors$primary',
-        bg: '$$tooltipColor'
+        $$tooltipColor: "$colors$primary",
+        bg: "$$tooltipColor",
       },
       secondary: {
-        $$tooltipColor: '$colors$secondary',
-        bg: '$$tooltipColor'
+        $$tooltipColor: "$colors$secondary",
+        bg: "$$tooltipColor",
       },
       success: {
-        $$tooltipColor: '$colors$success',
-        bg: '$$tooltipColor'
+        $$tooltipColor: "$colors$success",
+        bg: "$$tooltipColor",
       },
       warning: {
-        $$tooltipColor: '$colors$warning',
-        bg: '$$tooltipColor'
+        $$tooltipColor: "$colors$warning",
+        bg: "$$tooltipColor",
       },
       error: {
-        $$tooltipColor: '$colors$error',
-        bg: '$$tooltipColor'
+        $$tooltipColor: "$colors$error",
+        bg: "$$tooltipColor",
       },
       invert: {
-        $$tooltipColor: '$colors$foreground',
-        bg: '$$tooltipColor'
-      }
+        $$tooltipColor: "$colors$foreground",
+        bg: "$$tooltipColor",
+      },
     },
     contentColor: {
       default: {
-        $$tooltipTextColor: '$colors$text',
-        color: '$$tooltipTextColor'
+        $$tooltipTextColor: "$colors$text",
+        color: "$$tooltipTextColor",
       },
       primary: {
-        $$tooltipTextColor: '$colors$primary',
-        color: '$$tooltipTextColor'
+        $$tooltipTextColor: "$colors$primary",
+        color: "$$tooltipTextColor",
       },
       secondary: {
-        $$tooltipTextColor: '$colors$secondary',
-        color: '$$tooltipTextColor'
+        $$tooltipTextColor: "$colors$secondary",
+        color: "$$tooltipTextColor",
       },
       success: {
-        $$tooltipTextColor: '$colors$success',
-        color: '$$tooltipTextColor'
+        $$tooltipTextColor: "$colors$success",
+        color: "$$tooltipTextColor",
       },
       warning: {
-        $$tooltipTextColor: '$colors$warning',
-        color: '$$tooltipTextColor'
+        $$tooltipTextColor: "$colors$warning",
+        color: "$$tooltipTextColor",
       },
       error: {
-        $$tooltipTextColor: '$colors$error',
-        color: '$$tooltipTextColor'
+        $$tooltipTextColor: "$colors$error",
+        color: "$$tooltipTextColor",
       },
       invert: {
-        $$tooltipTextColor: '$colors$invert',
-        color: '$$tooltipTextColor'
-      }
+        $$tooltipTextColor: "$colors$invert",
+        color: "$$tooltipTextColor",
+      },
     },
     rounded: {
       true: {
-        br: '$pill'
-      }
+        br: "$pill",
+      },
     },
     shadow: {
       true: {
-        bs: '$md'
-      }
+        bs: "$md",
+      },
     },
     animated: {
       true: {
-        transition: 'opacity 0.25s ease 0s, top 0.25s ease 0s'
+        transition: "opacity 0.25s ease 0s, top 0.25s ease 0s",
       },
       false: {
-        transition: 'none'
-      }
-    }
+        transition: "none",
+      },
+    },
   },
   compoundVariants: [
     // color='primary' && contentColor='default'
     {
-      color: 'primary',
-      contentColor: 'default',
+      color: "primary",
+      contentColor: "default",
       css: {
-        $$tooltipTextColor: '$colors$white'
-      }
+        $$tooltipTextColor: "$colors$white",
+      },
     },
     // color='secondary' && contentColor='default'
     {
-      color: 'secondary',
-      contentColor: 'default',
+      color: "secondary",
+      contentColor: "default",
       css: {
-        $$tooltipTextColor: '$colors$white'
-      }
+        $$tooltipTextColor: "$colors$white",
+      },
     },
     // color='success' && contentColor='default'
     {
-      color: 'success',
-      contentColor: 'default',
+      color: "success",
+      contentColor: "default",
       css: {
-        $$tooltipTextColor: '$colors$white'
-      }
+        $$tooltipTextColor: "$colors$white",
+      },
     },
     // color='error' && contentColor='default'
     {
-      color: 'error',
-      contentColor: 'default',
+      color: "error",
+      contentColor: "default",
       css: {
-        $$tooltipTextColor: '$colors$white'
-      }
+        $$tooltipTextColor: "$colors$white",
+      },
     },
     // color='invert' && contentColor='default'
     {
-      color: 'invert',
-      contentColor: 'default',
+      color: "invert",
+      contentColor: "default",
       css: {
-        $$tooltipTextColor: '$colors$background'
-      }
-    }
+        $$tooltipTextColor: "$colors$background",
+      },
+    },
   ],
   defaultVariants: {
-    color: 'default',
-    contentColor: 'default'
-  }
+    color: "default",
+    contentColor: "default",
+  },
 });
 
-export type TooltipTriggerVariantsProps = VariantProps<
-  typeof StyledTooltipTrigger
->;
-export type TooltipContentVariantsProps = VariantProps<
-  typeof StyledTooltipContent
->;
+export type TooltipTriggerVariantsProps = VariantProps<typeof StyledTooltipTrigger>;
+export type TooltipContentVariantsProps = VariantProps<typeof StyledTooltipContent>;
diff --git a/packages/react/src/tooltip/tooltip.tsx b/packages/react/src/tooltip/tooltip.tsx
index e17d445fed..f7ebfb4027 100644
--- a/packages/react/src/tooltip/tooltip.tsx
+++ b/packages/react/src/tooltip/tooltip.tsx
@@ -1,15 +1,14 @@
-import React, { useEffect, useRef, useState } from 'react';
-import withDefaults from '../utils/with-defaults';
-import TooltipContent from './tooltip-content';
-import useClickAway from '../use-click-away';
-import { Placement } from '../utils/prop-types';
-import { CSS } from '../theme/stitches.config';
-import { TriggerTypes } from '../utils/prop-types';
-import { TooltipContentProps } from './tooltip-content';
-import {
-  StyledTooltipTrigger,
-  TooltipContentVariantsProps
-} from './tooltip.styles';
+import React, {useEffect, useRef, useState} from "react";
+
+import withDefaults from "../utils/with-defaults";
+import useClickAway from "../use-click-away";
+import {Placement} from "../utils/prop-types";
+import {CSS} from "../theme/stitches.config";
+import {TriggerTypes} from "../utils/prop-types";
+
+import TooltipContent from "./tooltip-content";
+import {TooltipContentProps} from "./tooltip-content";
+import {StyledTooltipTrigger, TooltipContentVariantsProps} from "./tooltip.styles";
 
 export type TooltipOnVisibleChange = (visible: boolean) => void;
 
@@ -42,12 +41,12 @@ const defaultProps = {
   shadow: true,
   rounded: false,
   keepMounted: false,
-  trigger: 'hover' as TriggerTypes,
+  trigger: "hover" as TriggerTypes,
   enterDelay: 0,
   leaveDelay: 0,
-  className: '',
-  portalClassName: '',
-  onVisibleChange: (() => {}) as TooltipOnVisibleChange
+  className: "",
+  portalClassName: "",
+  onVisibleChange: (() => {}) as TooltipOnVisibleChange,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
@@ -55,8 +54,8 @@ type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
 export type TooltipProps = Props &
   typeof defaultProps &
   NativeAttrs &
-  Pick<TooltipContentVariantsProps, 'color' | 'contentColor'> &
-  Pick<TooltipContentProps, 'css'>;
+  Pick<TooltipContentVariantsProps, "color" | "contentColor"> &
+  Pick<TooltipContentProps, "css">;
 
 const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   children,
@@ -99,7 +98,7 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
     contentColor,
     hideArrow,
     parent: ref,
-    className: portalClassName
+    className: portalClassName,
   };
 
   const changeVisible = (nextState: boolean) => {
@@ -112,27 +111,26 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
       onVisibleChange(nextState);
       clear();
     };
+
     clear();
     if (nextState) {
       timer.current = window.setTimeout(() => handler(true), enterDelay);
+
       return;
     }
     timer.current = window.setTimeout(() => handler(false), leaveDelay);
   };
 
   const mouseEventHandler = (next: boolean) => {
-    trigger === 'hover' && changeVisible(next);
+    trigger === "hover" && changeVisible(next);
   };
 
   const clickEventHandler = () => {
-    trigger === 'click' && changeVisible(!visible);
+    trigger === "click" && changeVisible(!visible);
     onClick?.();
   };
 
-  useClickAway(
-    ref,
-    () => trigger === 'click' && !keepMounted && changeVisible(false)
-  );
+  useClickAway(ref, () => trigger === "click" && !keepMounted && changeVisible(false));
 
   useEffect(() => {
     if (customVisible === undefined) return;
@@ -142,18 +140,18 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   return (
     <StyledTooltipTrigger
       ref={ref}
+      className={`nextui-tooltip-button ${className}`}
+      css={{
+        ...(triggerCss as any),
+      }}
       role="button"
       tabIndex={-1}
-      className={`nextui-tooltip-button ${className}`}
+      onBlur={() => mouseEventHandler(false)}
       onClick={clickEventHandler}
+      onFocus={() => mouseEventHandler(true)}
       onKeyUp={() => mouseEventHandler(true)}
       onMouseEnter={() => mouseEventHandler(true)}
       onMouseLeave={() => mouseEventHandler(false)}
-      onFocus={() => mouseEventHandler(true)}
-      onBlur={() => mouseEventHandler(false)}
-      css={{
-        ...(triggerCss as any)
-      }}
       {...props}
     >
       {children}
@@ -162,6 +160,6 @@ const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
   );
 };
 
-Tooltip.toString = () => '.nextui-tooltip';
+Tooltip.toString = () => ".nextui-tooltip";
 
 export default withDefaults(Tooltip, defaultProps);
diff --git a/packages/react/src/use-body-scroll/__tests__/body-scroll.test.tsx b/packages/react/src/use-body-scroll/__tests__/body-scroll.test.tsx
index be3eed7bcb..2c48aeb291 100644
--- a/packages/react/src/use-body-scroll/__tests__/body-scroll.test.tsx
+++ b/packages/react/src/use-body-scroll/__tests__/body-scroll.test.tsx
@@ -1,140 +1,151 @@
 /* eslint-disable no-undef */
-import React, { RefObject } from 'react';
-import useBodyScroll from '../index';
-import { act, renderHook } from '@testing-library/react-hooks';
+import React, {RefObject} from "react";
+import {act, renderHook} from "@testing-library/react-hooks";
 
-describe('UseBodyScroll', () => {
-  it('should work correctly', () => {
+import useBodyScroll from "../index";
+
+describe("UseBodyScroll", () => {
+  it("should work correctly", () => {
     const ref = React.createRef<HTMLDivElement>();
-    (ref as any).current = document.createElement('div');
-    const { result } = renderHook(() => useBodyScroll(ref));
+
+    (ref as any).current = document.createElement("div");
+    const {result} = renderHook(() => useBodyScroll(ref));
     const [hidden, setHidden] = result.current;
+
     expect(hidden).toBe(false);
 
     act(() => setHidden(true));
     expect(result.current[0]).toBe(true);
   });
 
-  it('should set overflow', () => {
+  it("should set overflow", () => {
     const ref = React.createRef<HTMLDivElement>();
-    (ref as any).current = document.createElement('div');
+
+    (ref as any).current = document.createElement("div");
     const el = ref.current as HTMLDivElement;
-    const { result } = renderHook(() => useBodyScroll(ref));
+    const {result} = renderHook(() => useBodyScroll(ref));
 
     act(() => result.current[1](true));
-    expect(el.style.overflow).toEqual('hidden');
+    expect(el.style.overflow).toEqual("hidden");
 
     act(() => result.current[1](false));
-    expect(el.style.overflow).toEqual('');
+    expect(el.style.overflow).toEqual("");
   });
 
-  it('the last value of overflow should be recovered after setHidden', () => {
+  it("the last value of overflow should be recovered after setHidden", () => {
     const ref = React.createRef<HTMLDivElement>();
-    const div = document.createElement('div');
-    div.style.overflow = 'scroll';
+    const div = document.createElement("div");
+
+    div.style.overflow = "scroll";
     (ref as any).current = div;
     const el = ref.current as HTMLDivElement;
-    const { result } = renderHook(() => useBodyScroll(ref));
-    expect(el.style.overflow).toEqual('scroll');
+    const {result} = renderHook(() => useBodyScroll(ref));
+
+    expect(el.style.overflow).toEqual("scroll");
 
     act(() => result.current[1](true));
-    expect(el.style.overflow).toEqual('hidden');
+    expect(el.style.overflow).toEqual("hidden");
 
     act(() => result.current[1](false));
-    expect(el.style.overflow).toEqual('scroll');
+    expect(el.style.overflow).toEqual("scroll");
   });
 
-  it('should work correctly with multiple element', () => {
+  it("should work correctly with multiple element", () => {
     const ref = React.createRef<HTMLDivElement>();
-    (ref as any).current = document.createElement('div');
+
+    (ref as any).current = document.createElement("div");
     const el = ref.current as HTMLDivElement;
-    const { result } = renderHook(() => useBodyScroll(ref));
+    const {result} = renderHook(() => useBodyScroll(ref));
 
     const ref2 = React.createRef<HTMLDivElement>();
-    (ref2 as any).current = document.createElement('div');
+
+    (ref2 as any).current = document.createElement("div");
     const el2 = ref2.current as HTMLDivElement;
-    const { result: result2 } = renderHook(() => useBodyScroll(ref2));
+    const {result: result2} = renderHook(() => useBodyScroll(ref2));
 
     act(() => result.current[1](true));
     act(() => result2.current[1](true));
-    expect(el.style.overflow).toEqual('hidden');
-    expect(el2.style.overflow).toEqual('hidden');
+    expect(el.style.overflow).toEqual("hidden");
+    expect(el2.style.overflow).toEqual("hidden");
 
     act(() => result.current[1](false));
     act(() => result2.current[1](false));
-    expect(el.style.overflow).toEqual('');
-    expect(el2.style.overflow).toEqual('');
+    expect(el.style.overflow).toEqual("");
+    expect(el2.style.overflow).toEqual("");
   });
 
-  it('should work correctly with iOS', () => {
-    Object.defineProperty(window.navigator, 'platform', {
-      value: '',
-      writable: true
+  it("should work correctly with iOS", () => {
+    Object.defineProperty(window.navigator, "platform", {
+      value: "",
+      writable: true,
     });
-    (window.navigator as any).platform = 'iPhone';
-    const event = { preventDefault: jest.fn() };
+    (window.navigator as any).platform = "iPhone";
+    const event = {preventDefault: jest.fn()};
 
     const ref = React.createRef<HTMLDivElement>();
-    (ref as any).current = document.createElement('div');
+
+    (ref as any).current = document.createElement("div");
     const el = ref.current as HTMLDivElement;
-    const { result } = renderHook(() => useBodyScroll(ref));
+    const {result} = renderHook(() => useBodyScroll(ref));
 
     act(() => result.current[1](true));
-    const touchEvent = new TouchEvent('touchmove', event as EventInit);
+    const touchEvent = new TouchEvent("touchmove", event as EventInit);
     const MockEvent = Object.assign(touchEvent, event);
+
     document.dispatchEvent(MockEvent);
 
-    expect(el.style.overflow).not.toEqual('hidden');
+    expect(el.style.overflow).not.toEqual("hidden");
     expect(event.preventDefault).toHaveBeenCalled();
 
     // Touch events with multiple fingers do nothing
     document.dispatchEvent(
-      new TouchEvent('touchmove', {
-        touches: [{}, {}, {}] as Array<Touch>
-      })
+      new TouchEvent("touchmove", {
+        touches: [{}, {}, {}] as Array<Touch>,
+      }),
     );
     expect(event.preventDefault).toHaveBeenCalledTimes(1);
 
     act(() => result.current[1](false));
-    (window.navigator as any).platform = '';
+    (window.navigator as any).platform = "";
   });
 
-  it('should work correctly with options', () => {
-    Object.defineProperty(window.navigator, 'platform', {
-      value: '',
-      writable: true
+  it("should work correctly with options", () => {
+    Object.defineProperty(window.navigator, "platform", {
+      value: "",
+      writable: true,
     });
-    (window.navigator as any).platform = 'iPhone';
-    const event = { preventDefault: jest.fn() };
+    (window.navigator as any).platform = "iPhone";
+    const event = {preventDefault: jest.fn()};
 
     const ref = React.createRef<HTMLDivElement>();
-    (ref as any).current = document.createElement('div');
+
+    (ref as any).current = document.createElement("div");
     const el = ref.current as HTMLDivElement;
-    const { result } = renderHook(() =>
-      useBodyScroll(ref, { scrollLayer: true })
-    );
+    const {result} = renderHook(() => useBodyScroll(ref, {scrollLayer: true}));
 
     act(() => result.current[1](true));
-    const touchEvent = new TouchEvent('touchmove', event as EventInit);
+    const touchEvent = new TouchEvent("touchmove", event as EventInit);
     const MockEvent = Object.assign(touchEvent, event);
+
     document.dispatchEvent(MockEvent);
 
-    expect(el.style.overflow).toEqual('hidden');
+    expect(el.style.overflow).toEqual("hidden");
     expect(event.preventDefault).not.toHaveBeenCalled();
     act(() => result.current[1](false));
-    (window.navigator as any).platform = '';
+    (window.navigator as any).platform = "";
   });
 
-  it('should work correctly when set element repeatedly', () => {
+  it("should work correctly when set element repeatedly", () => {
     let _ref: RefObject<HTMLDivElement> | null = null;
     const ref = React.createRef<HTMLDivElement>();
-    (ref as any).current = document.createElement('div');
+
+    (ref as any).current = document.createElement("div");
     _ref = ref;
     const el = ref.current as HTMLDivElement;
-    const { result, rerender } = renderHook(() => useBodyScroll(_ref));
+    const {result, rerender} = renderHook(() => useBodyScroll(_ref));
 
     act(() => result.current[1](true));
-    expect(el.style.overflow).toEqual('hidden');
+    expect(el.style.overflow).toEqual("hidden");
 
     // Force tigger rerender at the same value
     _ref = React.createRef<HTMLDivElement>();
@@ -143,13 +154,13 @@ describe('UseBodyScroll', () => {
     _ref = ref;
     rerender();
     act(() => result.current[1](true));
-    expect(el.style.overflow).toEqual('hidden');
+    expect(el.style.overflow).toEqual("hidden");
   });
 
-  it('should set body when missing all params', () => {
-    const { result } = renderHook(() => useBodyScroll());
+  it("should set body when missing all params", () => {
+    const {result} = renderHook(() => useBodyScroll());
 
     act(() => result.current[1](true));
-    expect(document.body.style.overflow).toEqual('hidden');
+    expect(document.body.style.overflow).toEqual("hidden");
   });
 });
diff --git a/packages/react/src/use-body-scroll/index.ts b/packages/react/src/use-body-scroll/index.ts
index d6c6fb47b3..fd13d0609f 100644
--- a/packages/react/src/use-body-scroll/index.ts
+++ b/packages/react/src/use-body-scroll/index.ts
@@ -1,4 +1,4 @@
-import useBodyScroll from './use-body-scroll';
+import useBodyScroll from "./use-body-scroll";
 
-export type { BodyScrollOptions } from './use-body-scroll';
+export type {BodyScrollOptions} from "./use-body-scroll";
 export default useBodyScroll;
diff --git a/packages/react/src/use-body-scroll/use-body-scroll.ts b/packages/react/src/use-body-scroll/use-body-scroll.ts
index 981a21dd7e..90fc97fefe 100644
--- a/packages/react/src/use-body-scroll/use-body-scroll.ts
+++ b/packages/react/src/use-body-scroll/use-body-scroll.ts
@@ -1,11 +1,4 @@
-import {
-  Dispatch,
-  RefObject,
-  SetStateAction,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import {Dispatch, RefObject, SetStateAction, useEffect, useRef, useState} from "react";
 
 export type ElementStackItem = {
   last: string;
@@ -23,23 +16,27 @@ const elementStack = new Map<HTMLElement, ElementStackItem>();
 
 const isIos = () => {
   /* istanbul ignore next */
-  if (typeof window === 'undefined' || !window.navigator) return false;
+  if (typeof window === "undefined" || !window.navigator) return false;
+
   return /iP(ad|hone|od)/.test(window.navigator.platform);
 };
 
 const touchHandler = (event: TouchEvent): boolean => {
   if (event.touches && event.touches.length > 1) return true;
   event.preventDefault();
+
   return false;
 };
 
 const useBodyScroll = (
   elementRef?: RefObject<HTMLElement> | null,
-  options?: BodyScrollOptions
+  options?: BodyScrollOptions,
 ): [boolean, Dispatch<SetStateAction<boolean>>] => {
   /* istanbul ignore next */
-  if (typeof document === 'undefined') return [false, (t: boolean) => t];
+  if (typeof document === "undefined") return [false, (t: boolean) => t];
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const elRef = elementRef || useRef<HTMLElement>(document.body);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [hidden, setHidden] = useState<boolean>(false);
   const safeOptions = {
     ...defaultOptions,
@@ -49,24 +46,28 @@ const useBodyScroll = (
   // don't prevent touch event when layer contain scroll
   const isIosWithCustom = () => {
     if (safeOptions.scrollLayer) return false;
+
     return isIos();
   };
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     if (!elRef || !elRef.current) return;
     const lastOverflow = elRef.current.style.overflow;
+
     if (hidden) {
       if (elementStack.has(elRef.current)) return;
       if (!isIosWithCustom()) {
-        elRef.current.style.overflow = 'hidden';
+        elRef.current.style.overflow = "hidden";
       } else {
-        document.addEventListener('touchmove', touchHandler, {
+        document.addEventListener("touchmove", touchHandler, {
           passive: false,
         });
       }
       elementStack.set(elRef.current, {
         last: lastOverflow,
       });
+
       return;
     }
 
@@ -74,11 +75,13 @@ const useBodyScroll = (
     if (!elementStack.has(elRef.current)) return;
     if (!isIosWithCustom()) {
       const store = elementStack.get(elRef.current) as ElementStackItem;
+
       elRef.current.style.overflow = store.last;
     } else {
-      document.removeEventListener('touchmove', touchHandler);
+      document.removeEventListener("touchmove", touchHandler);
     }
     elementStack.delete(elRef.current);
+    //  eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hidden, elRef]);
 
   return [hidden, setHidden];
diff --git a/packages/react/src/use-click-anywhere/index.ts b/packages/react/src/use-click-anywhere/index.ts
index ba4334c249..be7a48d3ea 100644
--- a/packages/react/src/use-click-anywhere/index.ts
+++ b/packages/react/src/use-click-anywhere/index.ts
@@ -1,3 +1,3 @@
-import useClickAnyWhere from './use-click-anywhere';
+import useClickAnyWhere from "./use-click-anywhere";
 
 export default useClickAnyWhere;
diff --git a/packages/react/src/use-click-anywhere/use-click-anywhere.ts b/packages/react/src/use-click-anywhere/use-click-anywhere.ts
index d72c9ae0d9..4fc8b7ad5b 100644
--- a/packages/react/src/use-click-anywhere/use-click-anywhere.ts
+++ b/packages/react/src/use-click-anywhere/use-click-anywhere.ts
@@ -1,11 +1,12 @@
-import { useEffect } from 'react';
+import {useEffect} from "react";
 
 const useClickAnyWhere = (handler: (event: Event) => void) => {
   useEffect(() => {
     const callback = (event: Event) => handler(event);
 
-    document.addEventListener('click', callback);
-    return () => document.removeEventListener('click', callback);
+    document.addEventListener("click", callback);
+
+    return () => document.removeEventListener("click", callback);
   }, [handler]);
 };
 
diff --git a/packages/react/src/use-click-away/__tests__/click-away.test.tsx b/packages/react/src/use-click-away/__tests__/click-away.test.tsx
index 36afebd569..d3666d446d 100644
--- a/packages/react/src/use-click-away/__tests__/click-away.test.tsx
+++ b/packages/react/src/use-click-away/__tests__/click-away.test.tsx
@@ -1,23 +1,26 @@
-import React from 'react';
-import { renderHook } from '@testing-library/react-hooks';
-import useClickAway from '../index';
+import React from "react";
+import {renderHook} from "@testing-library/react-hooks";
+
+import useClickAway from "../index";
 
 const simulateNativeClick = (el: Element) => {
   el.dispatchEvent(
-    new MouseEvent('click', {
+    new MouseEvent("click", {
       view: window,
       bubbles: true,
-      cancelable: true
-    })
+      cancelable: true,
+    }),
   );
 };
 
-describe('UseClickAway', () => {
-  it('should work correctly', () => {
+describe("UseClickAway", () => {
+  it("should work correctly", () => {
     const handler = jest.fn();
     const ref = React.createRef<HTMLDivElement>();
-    (ref as any).current = document.createElement('div');
+
+    (ref as any).current = document.createElement("div");
     const el = ref.current as HTMLDivElement;
+
     document.body.appendChild(el);
     renderHook(() => useClickAway(ref, handler));
 
@@ -27,9 +30,10 @@ describe('UseClickAway', () => {
     expect(handler).toHaveBeenCalled();
   });
 
-  it('should no errors when element missing', () => {
-    const errorSpy = jest.spyOn(console, 'error');
+  it("should no errors when element missing", () => {
+    const errorSpy = jest.spyOn(console, "error");
     const ref = React.createRef<HTMLDivElement>();
+
     renderHook(() => useClickAway(ref, () => {}));
 
     expect(errorSpy).not.toHaveBeenCalled();
diff --git a/packages/react/src/use-click-away/index.ts b/packages/react/src/use-click-away/index.ts
index d731fb4967..317db6253c 100644
--- a/packages/react/src/use-click-away/index.ts
+++ b/packages/react/src/use-click-away/index.ts
@@ -1,3 +1,3 @@
-import useClickAway from './use-click-away';
+import useClickAway from "./use-click-away";
 
 export default useClickAway;
diff --git a/packages/react/src/use-click-away/use-click-away.ts b/packages/react/src/use-click-away/use-click-away.ts
index df1aa1f1b0..e915c6cc51 100644
--- a/packages/react/src/use-click-away/use-click-away.ts
+++ b/packages/react/src/use-click-away/use-click-away.ts
@@ -1,18 +1,20 @@
-import { MutableRefObject, useEffect } from 'react';
+import {MutableRefObject, useEffect} from "react";
 
 const useClickAway = (
   ref: MutableRefObject<HTMLElement | null>,
-  handler: (event: Event) => void
+  handler: (event: Event) => void,
 ) => {
   useEffect(() => {
     const callback = (event: Event) => {
       const el = ref.current;
+
       if (!event || !el || el.contains((event as any).target)) return;
       handler(event);
     };
 
-    document.addEventListener('click', callback);
-    return () => document.removeEventListener('click', callback);
+    document.addEventListener("click", callback);
+
+    return () => document.removeEventListener("click", callback);
   }, [ref, handler]);
 };
 
diff --git a/packages/react/src/use-clipboard/__tests__/clipboard.test.tsx b/packages/react/src/use-clipboard/__tests__/clipboard.test.tsx
index 982067a70f..bc2a7a4391 100644
--- a/packages/react/src/use-clipboard/__tests__/clipboard.test.tsx
+++ b/packages/react/src/use-clipboard/__tests__/clipboard.test.tsx
@@ -1,54 +1,62 @@
-import useClipboard from '../index';
-import { renderHook } from '@testing-library/react-hooks';
+import {renderHook} from "@testing-library/react-hooks";
 
-describe('UseClipboard', () => {
+import useClipboard from "../index";
+
+describe("UseClipboard", () => {
   beforeAll(() => {
     window.getSelection = jest.fn().mockImplementation(() => ({
       removeAllRanges: jest.fn(),
-      addRange: jest.fn()
+      addRange: jest.fn(),
     }));
     document.createRange = jest.fn().mockImplementation(() => ({
-      selectNode: jest.fn()
+      selectNode: jest.fn(),
     }));
   });
 
-  it('should work correctly', () => {
+  it("should work correctly", () => {
     document.execCommand = jest.fn();
-    const { result } = renderHook(() => useClipboard());
-    result.current.copy('test');
+    const {result} = renderHook(() => useClipboard());
+
+    result.current.copy("test");
     expect(document.execCommand).toHaveBeenCalled();
     (document.execCommand as jest.Mock).mockClear();
   });
 
-  it('should capture copy erros', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  it("should capture copy erros", () => {
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+
     document.execCommand = jest.fn().mockImplementation(() => {
-      throw new Error('test');
+      throw new Error("test");
     });
-    const { result } = renderHook(() => useClipboard());
-    result.current.copy('space speace breaks $@#');
+    const {result} = renderHook(() => useClipboard());
+
+    result.current.copy("space speace breaks $@#");
 
     expect(errorSpy).toHaveBeenCalled();
     (document.execCommand as jest.Mock).mockClear();
     errorSpy.mockRestore();
   });
 
-  it('should work correctly without text', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  it("should work correctly without text", () => {
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+
     document.execCommand = jest.fn();
-    const { result } = renderHook(() => useClipboard());
-    result.current.copy('');
+    const {result} = renderHook(() => useClipboard());
+
+    result.current.copy("");
     expect(errorSpy).not.toHaveBeenCalled();
     (document.execCommand as jest.Mock).mockClear();
     errorSpy.mockRestore();
   });
 
-  it('should not throw errors when the browser does not support', () => {
+  it("should not throw errors when the browser does not support", () => {
     window.getSelection = jest.fn().mockImplementation(() => undefined);
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const errorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
+
     document.execCommand = jest.fn();
-    const { result } = renderHook(() => useClipboard());
-    result.current.copy('test');
+    const {result} = renderHook(() => useClipboard());
+
+    result.current.copy("test");
     expect(errorSpy).not.toHaveBeenCalled();
     (document.execCommand as jest.Mock).mockClear();
     (window.getSelection as jest.Mock).mockClear();
diff --git a/packages/react/src/use-clipboard/index.ts b/packages/react/src/use-clipboard/index.ts
index a394e320c0..6f85845e92 100644
--- a/packages/react/src/use-clipboard/index.ts
+++ b/packages/react/src/use-clipboard/index.ts
@@ -1,5 +1,5 @@
-import useClipboard from './use-clipboard';
+import useClipboard from "./use-clipboard";
 
-export type { UseClipboardOptions, UseClipboardResult } from './use-clipboard';
+export type {UseClipboardOptions, UseClipboardResult} from "./use-clipboard";
 
 export default useClipboard;
diff --git a/packages/react/src/use-clipboard/use-clipboard.ts b/packages/react/src/use-clipboard/use-clipboard.ts
index c8dd8a5941..3bf760e68f 100644
--- a/packages/react/src/use-clipboard/use-clipboard.ts
+++ b/packages/react/src/use-clipboard/use-clipboard.ts
@@ -1,7 +1,8 @@
-import { useCallback } from 'react';
-import usePortal from '../use-portal';
-import useWarning from '../use-warning';
-import { __DEV__ } from '../utils/assertion';
+import {useCallback} from "react";
+
+import usePortal from "../use-portal";
+import {warn} from "../utils/console";
+import {__DEV__} from "../utils/assertion";
 
 export type UseClipboardOptions = {
   onError: Function;
@@ -12,35 +13,35 @@ export type UseClipboardResult = {
 };
 
 const defaultOptions: UseClipboardOptions = {
-  onError: () => __DEV__ && useWarning('Failed to copy.', 'use-clipboard'),
+  onError: () => __DEV__ && warn("Failed to copy.", "use-clipboard"),
 };
 
-const useClipboard = (
-  options: UseClipboardOptions = defaultOptions
-): UseClipboardResult => {
-  const el = usePortal('clipboard');
+const useClipboard = (options: UseClipboardOptions = defaultOptions): UseClipboardResult => {
+  const el = usePortal("clipboard");
 
   const copyText = (el: HTMLElement | null, text: string) => {
     if (!el || !text) return;
     const selection = window.getSelection();
+
     if (!selection) return;
 
-    el.style.whiteSpace = 'pre';
+    el.style.whiteSpace = "pre";
     el.textContent = text;
 
     const range = window.document.createRange();
+
     selection.removeAllRanges();
     range.selectNode(el);
     selection.addRange(range);
     try {
-      window.document.execCommand('copy');
+      window.document.execCommand("copy");
     } catch (e) {
       options.onError && options.onError();
     }
 
     selection.removeAllRanges();
     if (el) {
-      el.textContent = '';
+      el.textContent = "";
     }
   };
 
@@ -48,10 +49,11 @@ const useClipboard = (
     (text: string) => {
       copyText(el, text);
     },
-    [el]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [el],
   );
 
-  return { copy };
+  return {copy};
 };
 
 export default useClipboard;
diff --git a/packages/react/src/use-current-state/__tests__/current-state.test.tsx b/packages/react/src/use-current-state/__tests__/current-state.test.tsx
index cf84e707ba..9e2f10edc8 100644
--- a/packages/react/src/use-current-state/__tests__/current-state.test.tsx
+++ b/packages/react/src/use-current-state/__tests__/current-state.test.tsx
@@ -1,28 +1,32 @@
-import React, { useEffect } from 'react';
-import { mount } from 'enzyme';
-import useCurrentState from '../index';
-import { renderHook, act } from '@testing-library/react-hooks';
-
-describe('UseCurrentState', () => {
-  it('should work correctly', () => {
-    const { result } = renderHook(() => useCurrentState(''));
-    expect(result.current[0]).toEqual('');
-
-    act(() => result.current[1]('test'));
-    expect(result.current[0]).toEqual('test');
-    expect(result.current[2].current).toEqual('test');
+import React, {useEffect} from "react";
+import {mount} from "enzyme";
+import {renderHook, act} from "@testing-library/react-hooks";
+
+import useCurrentState from "../index";
+
+describe("UseCurrentState", () => {
+  it("should work correctly", () => {
+    const {result} = renderHook(() => useCurrentState(""));
+
+    expect(result.current[0]).toEqual("");
+
+    act(() => result.current[1]("test"));
+    expect(result.current[0]).toEqual("test");
+    expect(result.current[2].current).toEqual("test");
   });
 
-  it('functional initial mode should be supported', () => {
-    const { result } = renderHook(() => useCurrentState(() => 1 + 1));
+  it("functional initial mode should be supported", () => {
+    const {result} = renderHook(() => useCurrentState(() => 1 + 1));
+
     expect(result.current[0]).toEqual(2);
     act(() => result.current[1](0));
     expect(result.current[0]).toEqual(0);
     expect(result.current[2].current).toEqual(0);
   });
 
-  it('functional update mode should be supported', () => {
-    const { result } = renderHook(() => useCurrentState(0));
+  it("functional update mode should be supported", () => {
+    const {result} = renderHook(() => useCurrentState(0));
+
     expect(result.current[0]).toEqual(0);
 
     act(() => result.current[1]((pre) => pre + 10));
@@ -30,24 +34,27 @@ describe('UseCurrentState', () => {
     expect(result.current[2].current).toEqual(10);
   });
 
-  it('only ref should track latest value', () => {
+  it("only ref should track latest value", () => {
     const Mock: React.FC<unknown> = () => {
-      const [state, setState, stateRef] = useCurrentState('');
+      const [state, setState, stateRef] = useCurrentState("");
+
       useEffect(() => {
         return () => {
           setTimeout(() => {
-            expect(state).not.toEqual('test2');
-            expect(stateRef.current).toEqual('test2');
+            expect(state).not.toEqual("test2");
+            expect(stateRef.current).toEqual("test2");
           }, 0);
         };
       }, []);
       useEffect(() => {
-        setState('test');
-        setState('test2');
+        setState("test");
+        setState("test2");
       }, []);
+
       return <span />;
     };
     const wrapper = mount(<Mock />);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 });
diff --git a/packages/react/src/use-current-state/index.ts b/packages/react/src/use-current-state/index.ts
index 9e07d531a9..e23901fa49 100644
--- a/packages/react/src/use-current-state/index.ts
+++ b/packages/react/src/use-current-state/index.ts
@@ -1,3 +1,3 @@
-import useCurrentState from './use-current-state';
+import useCurrentState from "./use-current-state";
 
 export default useCurrentState;
diff --git a/packages/react/src/use-current-state/use-current-state.ts b/packages/react/src/use-current-state/use-current-state.ts
index de57953ab6..2f7674b562 100644
--- a/packages/react/src/use-current-state/use-current-state.ts
+++ b/packages/react/src/use-current-state/use-current-state.ts
@@ -1,25 +1,10 @@
-import {
-  Dispatch,
-  MutableRefObject,
-  SetStateAction,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import {Dispatch, MutableRefObject, SetStateAction, useEffect, useRef, useState} from "react";
 
-export type CurrentStateType<S> = [
-  S,
-  Dispatch<SetStateAction<S>>,
-  MutableRefObject<S>
-];
+export type CurrentStateType<S> = [S, Dispatch<SetStateAction<S>>, MutableRefObject<S>];
 
-const useCurrentState = <S>(
-  initialState: S | (() => S)
-): CurrentStateType<S> => {
+const useCurrentState = <S>(initialState: S | (() => S)): CurrentStateType<S> => {
   const [state, setState] = useState<S>(() => {
-    return typeof initialState === 'function'
-      ? (initialState as () => S)()
-      : initialState;
+    return typeof initialState === "function" ? (initialState as () => S)() : initialState;
   });
   const ref = useRef<S>(initialState as S);
 
@@ -28,10 +13,8 @@ const useCurrentState = <S>(
   }, [state]);
 
   const setValue = (val: SetStateAction<S>) => {
-    const result =
-      typeof val === 'function'
-        ? (val as (prevState: S) => S)(ref.current)
-        : val;
+    const result = typeof val === "function" ? (val as (prevState: S) => S)(ref.current) : val;
+
     ref.current = result;
     setState(result);
   };
diff --git a/packages/react/src/use-drip/index.ts b/packages/react/src/use-drip/index.ts
index 41d9f30aa7..c7a72b7509 100644
--- a/packages/react/src/use-drip/index.ts
+++ b/packages/react/src/use-drip/index.ts
@@ -1,3 +1,3 @@
-import useDrip from './use-drip';
+import useDrip from "./use-drip";
 
 export default useDrip;
diff --git a/packages/react/src/use-drip/use-drip.ts b/packages/react/src/use-drip/use-drip.ts
index 90d2464d69..9b20542310 100644
--- a/packages/react/src/use-drip/use-drip.ts
+++ b/packages/react/src/use-drip/use-drip.ts
@@ -1,9 +1,9 @@
-import { PressEvent } from '@react-types/shared';
-import React, { useState } from 'react';
+import {PressEvent} from "@react-types/shared";
+import React, {useState} from "react";
 
 const useDrip = (
   initialValue: boolean = false,
-  ref: React.RefObject<HTMLElement>
+  ref: React.RefObject<HTMLElement>,
 ): {
   visible: boolean;
   x: number;
@@ -24,6 +24,7 @@ const useDrip = (
   const clickHandler = (event: React.MouseEvent<HTMLElement>) => {
     if (!ref.current) return;
     const rect = ref.current.getBoundingClientRect();
+
     setDripVisible(true);
     setDripX(event.clientX - rect.left);
     setDripY(event.clientY - rect.top);
@@ -34,7 +35,7 @@ const useDrip = (
     x: dripX,
     y: dripY,
     onClick: clickHandler,
-    onCompleted: dripCompletedHandle
+    onCompleted: dripCompletedHandle,
   };
 };
 
diff --git a/packages/react/src/use-input/__tests__/use-input.test.tsx b/packages/react/src/use-input/__tests__/use-input.test.tsx
index c7f21d014d..527ae8358d 100644
--- a/packages/react/src/use-input/__tests__/use-input.test.tsx
+++ b/packages/react/src/use-input/__tests__/use-input.test.tsx
@@ -1,67 +1,71 @@
-import React, { useEffect } from 'react';
-import { mount } from 'enzyme';
-import useInput from '../index';
-import Input from '../../input';
+import React, {useEffect} from "react";
+import {mount} from "enzyme";
 
-describe('UseInput', () => {
-  it('should follow change with use-input 1', () => {
-    let log = '';
+import useInput from "../index";
+import Input from "../../input";
 
-    const logSpy = jest
-      .spyOn(console, 'log')
-      .mockImplementation((msg) => (log = msg));
+describe("UseInput", () => {
+  it("should follow change with use-input 1", () => {
+    let log = "";
 
-    const MockInput: React.FC<{ propValue?: string }> = ({ propValue }) => {
-      const { value, setValue, bindings } = useInput('');
+    const logSpy = jest.spyOn(console, "log").mockImplementation((msg) => (log = msg));
+
+    const MockInput: React.FC<{propValue?: string}> = ({propValue}) => {
+      const {value, setValue, bindings} = useInput("");
 
       useEffect(() => {
         if (propValue) setValue(propValue);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [propValue]);
 
       useEffect(() => {
+        // eslint-disable-next-line no-console
         if (value) console.log(value);
       }, [value]);
+
       return <Input {...bindings} />;
     };
 
     const wrapper = mount(<MockInput />);
-    wrapper.setProps({ propValue: 'test' });
-    const input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement;
 
-    expect(input.value).toEqual('test');
-    expect(log).toContain('test');
+    wrapper.setProps({propValue: "test"});
+    const input = wrapper.find("input").at(0).getDOMNode() as HTMLInputElement;
 
-    log = '';
+    expect(input.value).toEqual("test");
+    expect(log).toContain("test");
+
+    log = "";
     wrapper
-      .find('input')
+      .find("input")
       .at(0)
-      .simulate('change', { target: { value: 'test-change' } });
-    expect(log).toContain('test-change');
+      .simulate("change", {target: {value: "test-change"}});
+    expect(log).toContain("test-change");
     logSpy.mockRestore();
   });
 
-  it('should follow change with use-input 2', () => {
-    const MockInput: React.FC<{ value?: string; resetValue?: boolean }> = ({
-      value,
-      resetValue
-    }) => {
-      const { reset, setValue, bindings } = useInput('');
+  it("should follow change with use-input 2", () => {
+    const MockInput: React.FC<{value?: string; resetValue?: boolean}> = ({value, resetValue}) => {
+      const {reset, setValue, bindings} = useInput("");
+
       useEffect(() => {
         if (value) setValue(value);
       }, [value]);
       useEffect(() => {
         if (resetValue) reset();
       }, [resetValue]);
+
       return <Input {...bindings} />;
     };
 
     const wrapper = mount(<MockInput />);
-    wrapper.setProps({ value: 'test' });
-    let input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement;
-    expect(input.value).toEqual('test');
 
-    wrapper.setProps({ resetValue: true });
-    input = wrapper.find('input').at(0).getDOMNode() as HTMLInputElement;
-    expect(input.value).toEqual('');
+    wrapper.setProps({value: "test"});
+    let input = wrapper.find("input").at(0).getDOMNode() as HTMLInputElement;
+
+    expect(input.value).toEqual("test");
+
+    wrapper.setProps({resetValue: true});
+    input = wrapper.find("input").at(0).getDOMNode() as HTMLInputElement;
+    expect(input.value).toEqual("");
   });
 });
diff --git a/packages/react/src/use-input/index.ts b/packages/react/src/use-input/index.ts
index bfd743fd05..ea84199819 100644
--- a/packages/react/src/use-input/index.ts
+++ b/packages/react/src/use-input/index.ts
@@ -1,3 +1,3 @@
-import useInput from './use-input';
+import useInput from "./use-input";
 
 export default useInput;
diff --git a/packages/react/src/use-input/use-input.ts b/packages/react/src/use-input/use-input.ts
index c82fafc18f..f0893baacf 100644
--- a/packages/react/src/use-input/use-input.ts
+++ b/packages/react/src/use-input/use-input.ts
@@ -1,12 +1,13 @@
-import React, { Dispatch, MutableRefObject, SetStateAction } from 'react';
-import useCurrentState from '../use-current-state';
+import React, {Dispatch, MutableRefObject, SetStateAction} from "react";
+
+import useCurrentState from "../use-current-state";
 
 export type BindingsChangeTarget =
   | React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   | string;
 
 const useInput = (
-  initialValue: string
+  initialValue: string,
 ): {
   value: string;
   setValue: Dispatch<SetStateAction<string>>;
@@ -27,7 +28,7 @@ const useInput = (
     bindings: {
       value,
       onChange: (event: BindingsChangeTarget) => {
-        if (typeof event === 'object' && event.target) {
+        if (typeof event === "object" && event.target) {
           setValue(event.target.value);
         } else {
           setValue(event as string);
diff --git a/packages/react/src/use-keyboard/codes.ts b/packages/react/src/use-keyboard/codes.ts
index 84486bba4a..8b37949ea6 100644
--- a/packages/react/src/use-keyboard/codes.ts
+++ b/packages/react/src/use-keyboard/codes.ts
@@ -83,12 +83,12 @@ export const KeyCode = {
   Equal: 187,
   Minus: 189,
   Backquote: 192,
-  Backslash: 220
+  Backslash: 220,
 };
 
 export const KeyMod = {
   CtrlCmd: (1 << 11) >>> 0,
   Shift: (1 << 10) >>> 0,
   Alt: (1 << 9) >>> 0,
-  WinCtrl: (1 << 8) >>> 0
+  WinCtrl: (1 << 8) >>> 0,
 };
diff --git a/packages/react/src/use-keyboard/helper.ts b/packages/react/src/use-keyboard/helper.ts
index 383804a6b7..bb7db70c3e 100644
--- a/packages/react/src/use-keyboard/helper.ts
+++ b/packages/react/src/use-keyboard/helper.ts
@@ -1,33 +1,30 @@
-import { getKeyValue } from '../utils/object';
-import { isMac } from '../utils/collections';
-import { KeyMod } from './codes';
+import {getKeyValue} from "../utils/object";
+import {isMac} from "../utils/collections";
+
+import {KeyMod} from "./codes";
 
 /* istanbul ignore next */
-export const getCtrlKeysByPlatform = (): Record<
-  string,
-  'metaKey' | 'ctrlKey'
-> => {
+export const getCtrlKeysByPlatform = (): Record<string, "metaKey" | "ctrlKey"> => {
   return {
-    CtrlCmd: isMac() ? 'metaKey' : 'ctrlKey',
-    WinCtrl: isMac() ? 'ctrlKey' : 'metaKey'
+    CtrlCmd: isMac() ? "metaKey" : "ctrlKey",
+    WinCtrl: isMac() ? "ctrlKey" : "metaKey",
   };
 };
 
-export const getActiveModMap = (
-  bindings: number[]
-): Record<keyof typeof KeyMod, boolean> => {
-  const modBindings = bindings.filter(
-    (item: number) => !!getKeyValue(KeyMod, item)
-  );
+export const getActiveModMap = (bindings: number[]): Record<keyof typeof KeyMod, boolean> => {
+  const modBindings = bindings.filter((item: number) => !!getKeyValue(KeyMod, item));
   const activeModMap: Record<keyof typeof KeyMod, boolean> = {
     CtrlCmd: false,
     Shift: false,
     Alt: false,
-    WinCtrl: false
+    WinCtrl: false,
   };
+
   modBindings.forEach((code) => {
     const modKey = getKeyValue(KeyMod, code) as keyof typeof KeyMod;
+
     activeModMap[modKey] = true;
   });
+
   return activeModMap;
 };
diff --git a/packages/react/src/use-keyboard/index.ts b/packages/react/src/use-keyboard/index.ts
index df4b1692d6..c127526677 100644
--- a/packages/react/src/use-keyboard/index.ts
+++ b/packages/react/src/use-keyboard/index.ts
@@ -1,13 +1,13 @@
-import useKeyboard from './use-keyboard';
-import { KeyMod, KeyCode } from './codes';
+import useKeyboard from "./use-keyboard";
+import {KeyMod, KeyCode} from "./codes";
 
-export { KeyMod, KeyCode };
+export {KeyMod, KeyCode};
 
 export type {
   UseKeyboardHandler,
   KeyboardOptions,
   KeyboardResult,
-  UseKeyboard
-} from './use-keyboard';
+  UseKeyboard,
+} from "./use-keyboard";
 
 export default useKeyboard;
diff --git a/packages/react/src/use-keyboard/use-keyboard.ts b/packages/react/src/use-keyboard/use-keyboard.ts
index 27c9194bda..e0579dfa72 100644
--- a/packages/react/src/use-keyboard/use-keyboard.ts
+++ b/packages/react/src/use-keyboard/use-keyboard.ts
@@ -1,14 +1,16 @@
-import { KeyMod } from './codes';
-import React, { useEffect } from 'react';
-import { getActiveModMap, getCtrlKeysByPlatform } from './helper';
-import { getKeyValue } from '../utils/object';
+import React, {useEffect} from "react";
+
+import {getKeyValue} from "../utils/object";
+
+import {KeyMod} from "./codes";
+import {getActiveModMap, getCtrlKeysByPlatform} from "./helper";
 
 export type KeyboardOptions = {
   disableGlobalEvent?: boolean;
   stopPropagation?: boolean;
   preventDefault?: boolean;
   capture?: boolean;
-  event?: 'keydown' | 'keypress' | 'keyup';
+  event?: "keydown" | "keypress" | "keyup";
 };
 
 export type KeyboardResult = {
@@ -22,32 +24,26 @@ export type KeyboardResult = {
   };
 };
 
-export type UseKeyboardHandler = (
-  event: React.KeyboardEvent | KeyboardEvent
-) => void;
+export type UseKeyboardHandler = (event: React.KeyboardEvent | KeyboardEvent) => void;
 
 export type UseKeyboard = (
   handler: UseKeyboardHandler,
   keyBindings: Array<number> | number,
-  options?: KeyboardOptions
+  options?: KeyboardOptions,
 ) => KeyboardResult;
 
 const useKeyboard: UseKeyboard = (handler, keyBindings, options = {}) => {
-  const bindings = Array.isArray(keyBindings)
-    ? (keyBindings as number[])
-    : [keyBindings];
+  const bindings = Array.isArray(keyBindings) ? (keyBindings as number[]) : [keyBindings];
   const {
     disableGlobalEvent = false,
     capture = false,
     stopPropagation = false,
     preventDefault = false,
-    event = 'keydown'
+    event = "keydown",
   } = options;
   const activeModMap = getActiveModMap(bindings);
-  const keyCodes = bindings.filter(
-    (item: number) => !getKeyValue(KeyMod, item)
-  );
-  const { CtrlCmd, WinCtrl } = getCtrlKeysByPlatform();
+  const keyCodes = bindings.filter((item: number) => !getKeyValue(KeyMod, item));
+  const {CtrlCmd, WinCtrl} = getCtrlKeysByPlatform();
 
   const eventHandler = (event: React.KeyboardEvent | KeyboardEvent) => {
     if (activeModMap.Shift && !event.shiftKey) return;
@@ -68,29 +64,31 @@ const useKeyboard: UseKeyboard = (handler, keyBindings, options = {}) => {
     if (!disableGlobalEvent) {
       document.addEventListener(event, eventHandler);
     }
+
     return () => {
       document.removeEventListener(event, eventHandler);
     };
   }, [disableGlobalEvent]);
 
   const elementBindingHandler = (
-    elementEventType: 'keydown' | 'keypress' | 'keyup',
-    isCapture: boolean = false
+    elementEventType: "keydown" | "keypress" | "keyup",
+    isCapture: boolean = false,
   ) => {
     if (elementEventType !== event) return () => {};
     if (isCapture !== capture) return () => {};
+
     return (e: React.KeyboardEvent) => eventHandler(e);
   };
 
   return {
     bindings: {
-      onKeyDown: elementBindingHandler('keydown'),
-      onKeyDownCapture: elementBindingHandler('keydown', true),
-      onKeyPress: elementBindingHandler('keypress'),
-      onKeyPressCapture: elementBindingHandler('keypress', true),
-      onKeyUp: elementBindingHandler('keyup'),
-      onKeyUpCapture: elementBindingHandler('keyup', true)
-    }
+      onKeyDown: elementBindingHandler("keydown"),
+      onKeyDownCapture: elementBindingHandler("keydown", true),
+      onKeyPress: elementBindingHandler("keypress"),
+      onKeyPressCapture: elementBindingHandler("keypress", true),
+      onKeyUp: elementBindingHandler("keyup"),
+      onKeyUpCapture: elementBindingHandler("keyup", true),
+    },
   };
 };
 
diff --git a/packages/react/src/use-pagination/__tests__/use-pagination.test.tsx b/packages/react/src/use-pagination/__tests__/use-pagination.test.tsx
index 5ec1147ec2..8775357c35 100644
--- a/packages/react/src/use-pagination/__tests__/use-pagination.test.tsx
+++ b/packages/react/src/use-pagination/__tests__/use-pagination.test.tsx
@@ -1,9 +1,10 @@
-import { renderHook, act } from '@testing-library/react-hooks';
-import usePagination from '../index';
+import {renderHook, act} from "@testing-library/react-hooks";
 
-describe('UsePagination', () => {
-  it('setPage function sets active page', () => {
-    const { result } = renderHook(() => usePagination({ total: 10 }));
+import usePagination from "../index";
+
+describe("UsePagination", () => {
+  it("setPage function sets active page", () => {
+    const {result} = renderHook(() => usePagination({total: 10}));
 
     act(() => result.current.setPage(5));
     expect(result.current.active).toBe(5);
@@ -15,14 +16,15 @@ describe('UsePagination', () => {
     expect(result.current.active).toBe(1);
   });
 
-  it('returns correct initial state', () => {
-    const { result } = renderHook(() => usePagination({ total: 10 }));
-    expect(result.current.range).toStrictEqual([1, 2, 3, 4, 5, 'dots', 10]);
+  it("returns correct initial state", () => {
+    const {result} = renderHook(() => usePagination({total: 10}));
+
+    expect(result.current.range).toStrictEqual([1, 2, 3, 4, 5, "dots", 10]);
     expect(result.current.active).toBe(1);
   });
 
-  it('does not change range length between page changes', () => {
-    const { result } = renderHook(() => usePagination({ total: 10 }));
+  it("does not change range length between page changes", () => {
+    const {result} = renderHook(() => usePagination({total: 10}));
 
     [...new Array(10).fill(null)].forEach(() => {
       expect(result.current.range.length).toBe(7);
@@ -30,42 +32,30 @@ describe('UsePagination', () => {
     });
   });
 
-  it('returns correct initial state with custom parameters', () => {
-    const { result } = renderHook(() =>
+  it("returns correct initial state with custom parameters", () => {
+    const {result} = renderHook(() =>
       usePagination({
         total: 20,
         siblings: 2,
         boundaries: 2,
-        initialPage: 7
-      })
+        initialPage: 7,
+      }),
     );
 
-    expect(result.current.range).toStrictEqual([
-      1,
-      2,
-      'dots',
-      5,
-      6,
-      7,
-      8,
-      9,
-      'dots',
-      19,
-      20
-    ]);
+    expect(result.current.range).toStrictEqual([1, 2, "dots", 5, 6, 7, 8, 9, "dots", 19, 20]);
     expect(result.current.active).toBe(7);
   });
 
-  it('calls onChange correctly with active page', () => {
+  it("calls onChange correctly with active page", () => {
     const spy = jest.fn();
-    const { result } = renderHook(() =>
+    const {result} = renderHook(() =>
       usePagination({
         onChange: spy,
         total: 20,
         siblings: 2,
         boundaries: 2,
-        initialPage: 7
-      })
+        initialPage: 7,
+      }),
     );
 
     act(() => result.current.next());
@@ -74,14 +64,14 @@ describe('UsePagination', () => {
     expect(spy).toBeCalledWith(8);
   });
 
-  it('does not change range length between page changes with custom parameters', () => {
-    const { result } = renderHook(() =>
+  it("does not change range length between page changes with custom parameters", () => {
+    const {result} = renderHook(() =>
       usePagination({
         total: 20,
         siblings: 2,
         boundaries: 2,
-        initialPage: 7
-      })
+        initialPage: 7,
+      }),
     );
 
     [...new Array(20).fill(null)].forEach(() => {
diff --git a/packages/react/src/use-pagination/index.ts b/packages/react/src/use-pagination/index.ts
index b295361f56..c7fc85daca 100644
--- a/packages/react/src/use-pagination/index.ts
+++ b/packages/react/src/use-pagination/index.ts
@@ -1,7 +1,8 @@
-import { useMemo, useCallback, useState, useEffect } from 'react';
-import { range } from '../utils/numbers';
+import {useMemo, useCallback, useState, useEffect} from "react";
 
-export const DOTS = 'dots';
+import {range} from "../utils/numbers";
+
+export const DOTS = "dots";
 
 export interface PaginationParams {
   total: number;
@@ -20,7 +21,7 @@ const usePagination = ({
   siblings = 1,
   boundaries = 1,
   initialPage = 1,
-  onChange
+  onChange,
 }: PaginationParams) => {
   const [activePage, setActivePage] = useState(page || initialPage);
 
@@ -45,7 +46,7 @@ const usePagination = ({
         onChangeActivePage(pageNumber);
       }
     },
-    [total]
+    [total],
   );
 
   const next = () => setPage(activePage + 1);
@@ -55,14 +56,12 @@ const usePagination = ({
 
   const paginationRange = useMemo((): PaginationItemParam[] => {
     const totalPageNumbers = siblings * 2 + 3 + boundaries * 2;
+
     if (totalPageNumbers >= total) {
       return range(1, total);
     }
     const leftSiblingIndex = Math.max(activePage - siblings, boundaries);
-    const rightSiblingIndex = Math.min(
-      activePage + siblings,
-      total - boundaries
-    );
+    const rightSiblingIndex = Math.min(activePage + siblings, total - boundaries);
 
     /*
      * We do not want to show dots if there is only one position left
@@ -74,20 +73,14 @@ const usePagination = ({
 
     if (!shouldShowLeftDots && shouldShowRightDots) {
       const leftItemCount = siblings * 2 + boundaries + 2;
-      return [
-        ...range(1, leftItemCount),
-        DOTS,
-        ...range(total - (boundaries - 1), total)
-      ];
+
+      return [...range(1, leftItemCount), DOTS, ...range(total - (boundaries - 1), total)];
     }
 
     if (shouldShowLeftDots && !shouldShowRightDots) {
       const rightItemCount = boundaries + 1 + 2 * siblings;
-      return [
-        ...range(1, boundaries),
-        DOTS,
-        ...range(total - rightItemCount, total)
-      ];
+
+      return [...range(1, boundaries), DOTS, ...range(total - rightItemCount, total)];
     }
 
     return [
@@ -95,7 +88,7 @@ const usePagination = ({
       DOTS,
       ...range(leftSiblingIndex, rightSiblingIndex),
       DOTS,
-      ...range(total - boundaries + 1, total)
+      ...range(total - boundaries + 1, total),
     ];
   }, [total, siblings, activePage]);
 
@@ -106,7 +99,7 @@ const usePagination = ({
     next,
     previous,
     first,
-    last
+    last,
   };
 };
 
diff --git a/packages/react/src/use-portal/index.ts b/packages/react/src/use-portal/index.ts
index 8387a62bcc..b83365e704 100644
--- a/packages/react/src/use-portal/index.ts
+++ b/packages/react/src/use-portal/index.ts
@@ -1,3 +1,3 @@
-import usePortal from './use-portal';
+import usePortal from "./use-portal";
 
 export default usePortal;
diff --git a/packages/react/src/use-portal/use-portal.ts b/packages/react/src/use-portal/use-portal.ts
index 4a12aaf22d..85531ec14f 100644
--- a/packages/react/src/use-portal/use-portal.ts
+++ b/packages/react/src/use-portal/use-portal.ts
@@ -1,21 +1,24 @@
-import { useEffect, useState } from 'react';
-import useSSR from '../use-ssr';
-import { getId } from '../utils/collections';
+import {useEffect, useState} from "react";
+
+import useSSR from "../use-ssr";
+import {getId} from "../utils/collections";
 
 const createElement = (id: string): HTMLElement => {
-  const el = document.createElement('div');
-  el.setAttribute('id', id);
+  const el = document.createElement("div");
+
+  el.setAttribute("id", id);
+
   return el;
 };
 
 const usePortal = (
   selectId: string = getId(),
-  getContainer?: () => HTMLElement | null
+  getContainer?: () => HTMLElement | null,
 ): HTMLElement | null => {
   const id = `nextui-${selectId}`;
-  const { isBrowser } = useSSR();
+  const {isBrowser} = useSSR();
   const [elSnapshot, setElSnapshot] = useState<HTMLElement | null>(
-    isBrowser ? createElement(id) : null
+    isBrowser ? createElement(id) : null,
   );
 
   useEffect(() => {
diff --git a/packages/react/src/use-real-shape/index.ts b/packages/react/src/use-real-shape/index.ts
index c27ea2b91c..e2f335f789 100644
--- a/packages/react/src/use-real-shape/index.ts
+++ b/packages/react/src/use-real-shape/index.ts
@@ -1,3 +1,3 @@
-import useRealShape from './use-real-shape';
+import useRealShape from "./use-real-shape";
 
 export default useRealShape;
diff --git a/packages/react/src/use-real-shape/use-real-shape.ts b/packages/react/src/use-real-shape/use-real-shape.ts
index af5bcd16d4..15f465b1e3 100644
--- a/packages/react/src/use-real-shape/use-real-shape.ts
+++ b/packages/react/src/use-real-shape/use-real-shape.ts
@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useState } from 'react';
+import {MutableRefObject, useEffect, useState} from "react";
 
 export type ShapeType = {
   width: number;
@@ -7,41 +7,42 @@ export type ShapeType = {
 
 const getCSSStyleVal = (str: string, parentNum: number) => {
   if (!str) return 0;
-  const strVal = str.includes('px')
-    ? +str.split('px')[0]
-    : str.includes('%')
-    ? +str.split('%')[0] * parentNum * 0.01
+  const strVal = str.includes("px")
+    ? +str.split("px")[0]
+    : str.includes("%")
+    ? +str.split("%")[0] * parentNum * 0.01
     : str;
 
   return Number.isNaN(+strVal) ? 0 : +strVal;
 };
 
 export const getRealShape = (el: HTMLElement | null): ShapeType => {
-  const defaultShape: ShapeType = { width: 0, height: 0 };
-  if (!el || typeof window === 'undefined') return defaultShape;
+  const defaultShape: ShapeType = {width: 0, height: 0};
+
+  if (!el || typeof window === "undefined") return defaultShape;
 
   const rect = el.getBoundingClientRect();
-  const { width, height } = window.getComputedStyle(el);
+  const {width, height} = window.getComputedStyle(el);
 
   return {
     width: getCSSStyleVal(`${width}`, rect.width),
-    height: getCSSStyleVal(`${height}`, rect.height)
+    height: getCSSStyleVal(`${height}`, rect.height),
   };
 };
 
 export type ShapeResult = [ShapeType, () => void];
 
-const useRealShape = <T extends HTMLElement>(
-  ref: MutableRefObject<T | null>
-): ShapeResult => {
+const useRealShape = <T extends HTMLElement>(ref: MutableRefObject<T | null>): ShapeResult => {
   const [state, setState] = useState<ShapeType>({
     width: 0,
-    height: 0
+    height: 0,
   });
   const update = () => {
-    const { width, height } = getRealShape(ref.current);
-    setState({ width, height });
+    const {width, height} = getRealShape(ref.current);
+
+    setState({width, height});
   };
+
   useEffect(() => update(), [ref.current]);
 
   return [state, update];
diff --git a/packages/react/src/use-resize/index.ts b/packages/react/src/use-resize/index.ts
index 994ea1a5db..d3e3b849d4 100644
--- a/packages/react/src/use-resize/index.ts
+++ b/packages/react/src/use-resize/index.ts
@@ -1,3 +1,3 @@
-import useResize from './use-resize';
+import useResize from "./use-resize";
 
 export default useResize;
diff --git a/packages/react/src/use-resize/use-resize.ts b/packages/react/src/use-resize/use-resize.ts
index a8f91a287f..4ed8085888 100644
--- a/packages/react/src/use-resize/use-resize.ts
+++ b/packages/react/src/use-resize/use-resize.ts
@@ -1,16 +1,15 @@
-import { useEffect } from 'react';
+import {useEffect} from "react";
 
-const useResize = (
-  callback: Function,
-  immediatelyInvoke: boolean = true
-): void => {
+const useResize = (callback: Function, immediatelyInvoke: boolean = true): void => {
   useEffect(() => {
     const fn = () => callback();
+
     if (immediatelyInvoke) {
       fn();
     }
-    window.addEventListener('resize', fn);
-    return () => window.removeEventListener('resize', fn);
+    window.addEventListener("resize", fn);
+
+    return () => window.removeEventListener("resize", fn);
   }, []);
 };
 
diff --git a/packages/react/src/use-ssr/index.ts b/packages/react/src/use-ssr/index.ts
index a8547f8616..29e9e887a9 100644
--- a/packages/react/src/use-ssr/index.ts
+++ b/packages/react/src/use-ssr/index.ts
@@ -1,3 +1,3 @@
-import useSSR from './use-ssr';
+import useSSR from "./use-ssr";
 
 export default useSSR;
diff --git a/packages/react/src/use-ssr/use-ssr.ts b/packages/react/src/use-ssr/use-ssr.ts
index 2cda094f4b..25819f7ce8 100644
--- a/packages/react/src/use-ssr/use-ssr.ts
+++ b/packages/react/src/use-ssr/use-ssr.ts
@@ -1,11 +1,7 @@
-import { useEffect, useState } from 'react';
+import {useEffect, useState} from "react";
 
 const isBrowser = (): boolean => {
-  return Boolean(
-    typeof window !== 'undefined' &&
-      window.document &&
-      window.document.createElement
-  );
+  return Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
 };
 
 export type SSRState = {
@@ -15,6 +11,7 @@ export type SSRState = {
 
 const useSSR = (): SSRState => {
   const [browser, setBrowser] = useState<boolean>(false);
+
   useEffect(() => {
     setBrowser(isBrowser());
   }, []);
diff --git a/packages/react/src/use-theme/index.ts b/packages/react/src/use-theme/index.ts
index a799caf067..bba2886087 100644
--- a/packages/react/src/use-theme/index.ts
+++ b/packages/react/src/use-theme/index.ts
@@ -1,3 +1,3 @@
-import useTheme from './use-theme';
+import useTheme from "./use-theme";
 
 export default useTheme;
diff --git a/packages/react/src/use-theme/use-theme.ts b/packages/react/src/use-theme/use-theme.ts
index e8f2998fbc..513b528b11 100644
--- a/packages/react/src/use-theme/use-theme.ts
+++ b/packages/react/src/use-theme/use-theme.ts
@@ -1,8 +1,8 @@
-import React from 'react';
-import ThemeContext from '../theme/theme-context';
-import { NextUIThemeContext } from '../theme/types';
+import React from "react";
 
-const useTheme = (): NextUIThemeContext =>
-  React.useContext<NextUIThemeContext>(ThemeContext);
+import ThemeContext from "../theme/theme-context";
+import {NextUIThemeContext} from "../theme/types";
+
+const useTheme = (): NextUIThemeContext => React.useContext<NextUIThemeContext>(ThemeContext);
 
 export default useTheme;
diff --git a/packages/react/src/use-warning/index.ts b/packages/react/src/use-warning/index.ts
index 72b643871c..75ba1ace47 100644
--- a/packages/react/src/use-warning/index.ts
+++ b/packages/react/src/use-warning/index.ts
@@ -1,3 +1,3 @@
-import useWarning from './use-warning';
+import useWarning from "./use-warning";
 
 export default useWarning;
diff --git a/packages/react/src/use-warning/use-warning.ts b/packages/react/src/use-warning/use-warning.ts
index 9ff82a8a95..287622b20f 100644
--- a/packages/react/src/use-warning/use-warning.ts
+++ b/packages/react/src/use-warning/use-warning.ts
@@ -1,13 +1,14 @@
-const warningStack: { [key: string]: boolean } = {};
+const warningStack: {[key: string]: boolean} = {};
 
 const useWarning = (message: string, component?: string) => {
-  const tag = component ? ` [${component}]` : ' ';
+  const tag = component ? ` [${component}]` : " ";
   const log = `[Next UI]${tag}: ${message}`;
-  if (typeof console === 'undefined') return;
+
+  if (typeof console === "undefined") return;
   if (warningStack[log]) return;
   warningStack[log] = true;
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (process.env.NODE_ENV !== "production") {
     return console.error(log);
   }
   console.warn(log);
diff --git a/packages/react/src/user/__tests__/index.test.tsx b/packages/react/src/user/__tests__/index.test.tsx
index a0a34edd4c..ca479c66eb 100644
--- a/packages/react/src/user/__tests__/index.test.tsx
+++ b/packages/react/src/user/__tests__/index.test.tsx
@@ -1,49 +1,52 @@
-import React from 'react';
-import { mount, render } from 'enzyme';
-import User from '../index';
+import React from "react";
+import {mount, render} from "enzyme";
 
-describe(' User', () => {
-  it('should render correctly', () => {
+import User from "../index";
+
+describe(" User", () => {
+  it("should render correctly", () => {
     const wrapper = mount(<User name="Junior" />);
+
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it('should support image and text', () => {
+  it("should support image and text", () => {
     const wrapper = render(
       <div>
         <User name="Junior" text="Junior" />
-        <User
-          name="Junior Garcia"
-          src="https://avatars.githubusercontent.com/u/30373425?v=4"
-        />
-      </div>
+        <User name="Junior Garcia" src="https://avatars.githubusercontent.com/u/30373425?v=4" />
+      </div>,
     );
+
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render description correctly', () => {
+  it("should render description correctly", () => {
     const wrapper = mount(<User name="Junior">description</User>);
-    expect(wrapper.text().toLowerCase()).toContain('description');
+
+    expect(wrapper.text().toLowerCase()).toContain("description");
   });
 
-  it('should render link on user.link', () => {
+  it("should render link on user.link", () => {
     const wrapper = mount(
       <User name="Junior">
         <User.Link href="https://twitter.com/jrgarciadev">twitter</User.Link>
-      </User>
+      </User>,
     );
-    const link = wrapper.find('a');
+    const link = wrapper.find("a");
+
     expect(link.length).not.toBe(0);
   });
 
-  it('should pass alt attribute', () => {
+  it("should pass alt attribute", () => {
     const wrapper = mount(
       <User
+        altText="Junior"
         name="Junior"
         src="https://avatars.githubusercontent.com/u/30373425?v=4"
-        altText="Junior"
-      />
+      />,
     );
-    expect(wrapper.find('img').prop('alt')).toEqual('Junior');
+
+    expect(wrapper.find("img").prop("alt")).toEqual("Junior");
   });
 });
diff --git a/packages/react/src/user/index.ts b/packages/react/src/user/index.ts
index 25a96bdddc..3338581047 100644
--- a/packages/react/src/user/index.ts
+++ b/packages/react/src/user/index.ts
@@ -1,16 +1,11 @@
-import User from './user';
-import UserLink from './user-link';
+import User from "./user";
+import UserLink from "./user-link";
 
 User.Link = UserLink;
 
-export type { UserProps } from './user';
-export type { UserLinkProps } from './user-link';
+export type {UserProps} from "./user";
+export type {UserLinkProps} from "./user-link";
 
-export {
-  StyledUser,
-  StyledUserInfo,
-  StyledUserName,
-  StyledUserDesc
-} from './user.styles';
+export {StyledUser, StyledUserInfo, StyledUserName, StyledUserDesc} from "./user.styles";
 
 export default User;
diff --git a/packages/react/src/user/user-link.tsx b/packages/react/src/user/user-link.tsx
index f890b0b64a..d18fd224eb 100644
--- a/packages/react/src/user/user-link.tsx
+++ b/packages/react/src/user/user-link.tsx
@@ -1,21 +1,23 @@
-import React from 'react';
-import Link from '../link';
-import clsx from '../utils/clsx';
-import { __DEV__ } from '../utils/assertion';
-import type { LinkProps } from '../link';
+import type {LinkProps} from "../link";
+
+import React from "react";
+
+import Link from "../link";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
 
 interface Props {
   children?: React.ReactNode;
 }
 
-export type UserLinkProps = Props & Omit<LinkProps, 'icon'>;
+export type UserLinkProps = Props & Omit<LinkProps, "icon">;
 
 const UserLink = React.forwardRef<HTMLAnchorElement, UserLinkProps>(
   (props: UserLinkProps, ref: React.Ref<HTMLAnchorElement>) => {
     const {
-      rel = 'noopener',
-      color = 'primary',
-      target = '_blank',
+      rel = "noopener",
+      color = "primary",
+      target = "_blank",
       className,
       children,
       ...otherProps
@@ -24,23 +26,23 @@ const UserLink = React.forwardRef<HTMLAnchorElement, UserLinkProps>(
     return (
       <Link
         ref={ref}
-        rel={rel}
+        className={clsx("nextui-user-link", className)}
         color={color}
+        rel={rel}
         target={target}
-        className={clsx('nextui-user-link', className)}
         {...otherProps}
       >
         {children}
       </Link>
     );
-  }
+  },
 );
 
 if (__DEV__) {
-  UserLink.displayName = 'NextUI.UserLink';
+  UserLink.displayName = "NextUI.UserLink";
 }
 
-UserLink.toString = () => '.nextui-user-link';
+UserLink.toString = () => ".nextui-user-link";
 
 const MemoUserLink = React.memo(UserLink);
 
diff --git a/packages/react/src/user/user.stories.tsx b/packages/react/src/user/user.stories.tsx
index 0555d3d467..a25be9e6d7 100644
--- a/packages/react/src/user/user.stories.tsx
+++ b/packages/react/src/user/user.stories.tsx
@@ -1,25 +1,26 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import User from './index';
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import User from "./index";
 
 export default {
-  title: 'Display/User',
-  component: User
+  title: "Display/User",
+  component: User,
 } as Meta;
 
-const url = 'https://avatars.githubusercontent.com/u/30373425?v=4';
+const url = "https://avatars.githubusercontent.com/u/30373425?v=4";
 
-export const Default = () => <User squared src={url} name="Junior García" />;
+export const Default = () => <User squared name="Junior García" src={url} />;
 
 export const Description = () => (
-  <User squared src={url} name="Junior García">
+  <User squared name="Junior García" src={url}>
     Software Developer
   </User>
 );
 
 export const Link = () => {
   return (
-    <User squared src={url} name="Junior García">
+    <User squared name="Junior García" src={url}>
       <User.Link href="https://twitter.com/jrgarciadev">@jrgarciadev</User.Link>
     </User>
   );
diff --git a/packages/react/src/user/user.styles.ts b/packages/react/src/user/user.styles.ts
index 46c0fb5e60..10c7068cce 100644
--- a/packages/react/src/user/user.styles.ts
+++ b/packages/react/src/user/user.styles.ts
@@ -1,55 +1,51 @@
-import { styled } from '../theme/stitches.config';
-import {
-  cssFocusVisible,
-  sharedDialogPopup,
-  cssNoBlurriness
-} from '../theme/shared-css';
+import {styled} from "../theme/stitches.config";
+import {cssFocusVisible, sharedDialogPopup, cssNoBlurriness} from "../theme/shared-css";
 
 export const StyledUser = styled(
-  'div',
+  "div",
   {
-    d: 'inline-flex',
-    p: '0 $sm',
-    jc: 'center',
-    ai: 'center',
-    w: 'max-content',
-    maxWidth: '100%',
-    transition: 'transform 250ms ease 0ms, box-shadow 0.25s ease 0s',
-    '@motion': {
-      transition: 'none'
-    }
+    d: "inline-flex",
+    p: "0 $sm",
+    jc: "center",
+    ai: "center",
+    w: "max-content",
+    maxWidth: "100%",
+    transition: "transform 250ms ease 0ms, box-shadow 0.25s ease 0s",
+    "@motion": {
+      transition: "none",
+    },
   },
   cssFocusVisible,
   cssNoBlurriness,
-  sharedDialogPopup
+  sharedDialogPopup,
 );
 
-export const StyledUserInfo = styled('div', {
-  ml: '$sm',
-  d: 'inline-flex',
-  fd: 'column',
-  alignItems: 'flex-start',
-  whiteSpace: 'nowrap'
+export const StyledUserInfo = styled("div", {
+  ml: "$sm",
+  d: "inline-flex",
+  fd: "column",
+  alignItems: "flex-start",
+  whiteSpace: "nowrap",
 });
 
-export const StyledUserName = styled('span', {
-  fontSize: '$sm',
-  color: '$text',
-  lh: '$sm',
-  tt: 'capitalize',
-  fontWeight: '$medium',
-  maxW: '$60',
-  to: 'ellipsis', // text overflow
-  ov: 'hidden' // overflow
+export const StyledUserName = styled("span", {
+  fontSize: "$sm",
+  color: "$text",
+  lh: "$sm",
+  tt: "capitalize",
+  fontWeight: "$medium",
+  maxW: "$60",
+  to: "ellipsis", // text overflow
+  ov: "hidden", // overflow
 });
 
-export const StyledUserDesc = styled('span', {
-  fontSize: '$xs',
-  color: '$accents7',
-  '*:first-child': {
-    mt: 0
+export const StyledUserDesc = styled("span", {
+  fontSize: "$xs",
+  color: "$accents7",
+  "*:first-child": {
+    mt: 0,
+  },
+  "*:last-child": {
+    mb: 0,
   },
-  '*:last-child': {
-    mb: 0
-  }
 });
diff --git a/packages/react/src/user/user.tsx b/packages/react/src/user/user.tsx
index 09b9379a4c..b50c1f366c 100644
--- a/packages/react/src/user/user.tsx
+++ b/packages/react/src/user/user.tsx
@@ -1,20 +1,18 @@
-import React, { ReactNode } from 'react';
-import { Avatar } from '../index';
-import { useFocusRing } from '@react-aria/focus';
-import type { FocusRingAria } from '@react-aria/focus';
-import { mergeProps } from '@react-aria/utils';
-import UserLink from './user-link';
-import { NormalColors, NormalSizes } from '../utils/prop-types';
-import { CSS } from '../theme/stitches.config';
-import { ReactRef } from '../utils/refs';
-import { useDOMRef } from '../utils/dom';
-import { __DEV__ } from '../utils/assertion';
-import {
-  StyledUser,
-  StyledUserInfo,
-  StyledUserName,
-  StyledUserDesc
-} from './user.styles';
+import type {FocusRingAria} from "@react-aria/focus";
+
+import {useFocusRing} from "@react-aria/focus";
+import React, {ReactNode} from "react";
+import {mergeProps} from "@react-aria/utils";
+
+import {Avatar} from "../index";
+import {NormalColors, NormalSizes} from "../utils/prop-types";
+import {CSS} from "../theme/stitches.config";
+import {ReactRef} from "../utils/refs";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+
+import UserLink from "./user-link";
+import {StyledUser, StyledUserInfo, StyledUserName, StyledUserDesc} from "./user.styles";
 
 interface Props {
   name: ReactNode | string;
@@ -33,103 +31,97 @@ interface Props {
 }
 
 const defaultProps = {
-  size: 'lg',
+  size: "lg",
   squared: false,
-  bordered: false
+  bordered: false,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
-export type UserProps = Props &
-  typeof defaultProps &
-  NativeAttrs & { css?: CSS };
+export type UserProps = Props & typeof defaultProps & NativeAttrs & {css?: CSS};
 
 interface IFocusRingAria extends FocusRingAria {
   focusProps: Omit<React.HTMLAttributes<HTMLElement>, keyof UserProps>;
 }
 
-const preClass = 'nextui-user';
-
-export const User = React.forwardRef(
-  (props: UserProps, ref: ReactRef<HTMLDivElement>) => {
-    const {
-      as,
-      css,
-      src,
-      text,
-      name,
-      children,
-      altText,
-      color,
-      squared,
-      bordered,
-      size,
-      description,
-      zoomed,
-      pointer,
-      ...otherProps
-    } = props;
-
-    const domRef = useDOMRef(ref);
-
-    const { isFocusVisible, focusProps }: IFocusRingAria = useFocusRing();
-
-    return (
-      <StyledUser
-        ref={domRef}
-        as={as}
-        {...mergeProps(otherProps, focusProps)}
-        css={mergeProps(
-          as === 'button'
-            ? {
-                borderRadius: '$xs',
-                // reset button styles
-                background: 'none',
-                appearance: 'none',
-                p: 0,
-                m: 0,
-                outline: 'none',
-                border: 'none',
-                cursor: 'pointer'
-              }
-            : {},
-          css as any
-        )}
-        isFocusVisible={isFocusVisible}
-      >
-        <Avatar
-          className={`${preClass}-avatar`}
-          src={src}
-          color={color}
-          squared={squared}
-          zoomed={zoomed}
-          pointer={pointer}
-          bordered={bordered}
-          text={text}
-          size={size}
-          alt={altText}
-        />
-        <StyledUserInfo className={`${preClass}-info`}>
-          <StyledUserName className={`${preClass}-name`}>{name}</StyledUserName>
-          <StyledUserDesc className={`${preClass}-desc`}>
-            {description || children}
-          </StyledUserDesc>
-        </StyledUserInfo>
-      </StyledUser>
-    );
-  }
-);
+const preClass = "nextui-user";
+
+export const User = React.forwardRef((props: UserProps, ref: ReactRef<HTMLDivElement>) => {
+  const {
+    as,
+    css,
+    src,
+    text,
+    name,
+    children,
+    altText,
+    color,
+    squared,
+    bordered,
+    size,
+    description,
+    zoomed,
+    pointer,
+    ...otherProps
+  } = props;
+
+  const domRef = useDOMRef(ref);
+
+  const {isFocusVisible, focusProps}: IFocusRingAria = useFocusRing();
+
+  return (
+    <StyledUser
+      ref={domRef}
+      as={as}
+      {...mergeProps(otherProps, focusProps)}
+      css={mergeProps(
+        as === "button"
+          ? {
+              borderRadius: "$xs",
+              // reset button styles
+              background: "none",
+              appearance: "none",
+              p: 0,
+              m: 0,
+              outline: "none",
+              border: "none",
+              cursor: "pointer",
+            }
+          : {},
+        css as any,
+      )}
+      isFocusVisible={isFocusVisible}
+    >
+      <Avatar
+        alt={altText}
+        bordered={bordered}
+        className={`${preClass}-avatar`}
+        color={color}
+        pointer={pointer}
+        size={size}
+        squared={squared}
+        src={src}
+        text={text}
+        zoomed={zoomed}
+      />
+      <StyledUserInfo className={`${preClass}-info`}>
+        <StyledUserName className={`${preClass}-name`}>{name}</StyledUserName>
+        <StyledUserDesc className={`${preClass}-desc`}>{description || children}</StyledUserDesc>
+      </StyledUserInfo>
+    </StyledUser>
+  );
+});
 
 if (__DEV__) {
-  User.displayName = 'NextUI.User';
+  User.displayName = "NextUI.User";
 }
 
-User.toString = () => '.nextui-user';
+User.toString = () => ".nextui-user";
 
 type UserComponent<P = {}> = React.NamedExoticComponent<P> & {
   Link: typeof UserLink;
 };
 type ComponentProps = Partial<typeof defaultProps> &
   Omit<Props, keyof typeof defaultProps> &
-  NativeAttrs & { css?: CSS };
+  NativeAttrs & {css?: CSS};
 
 export default User as UserComponent<ComponentProps>;
diff --git a/packages/react/src/utils/animations.ts b/packages/react/src/utils/animations.ts
index 57a6c88374..6845dc0e3c 100644
--- a/packages/react/src/utils/animations.ts
+++ b/packages/react/src/utils/animations.ts
@@ -1,42 +1,42 @@
-import { keyframes } from '../theme/stitches.config';
+import {keyframes} from "../theme/stitches.config";
 
 export const reboundAnimation = keyframes({
-  '0%': {
-    transform: 'scale(0.95)'
+  "0%": {
+    transform: "scale(0.95)",
   },
-  '40%': {
-    transform: 'scale(1.02)'
+  "40%": {
+    transform: "scale(1.02)",
   },
-  '80%': {
-    transform: 'scale(0.98)'
+  "80%": {
+    transform: "scale(0.98)",
+  },
+  "100%": {
+    transform: "scale(1)",
   },
-  '100%': {
-    transform: 'scale(1)'
-  }
 });
 
 export const appearanceIn = keyframes({
-  '0%': {
+  "0%": {
     opacity: 0,
-    transform: 'scale(0.95)'
+    transform: "scale(0.95)",
   },
-  '60%': {
+  "60%": {
     opacity: 0.75,
-    transform: 'scale(1.02)'
+    transform: "scale(1.02)",
   },
-  '100%': {
+  "100%": {
     opacity: 1,
-    transform: 'scale(1)'
-  }
+    transform: "scale(1)",
+  },
 });
 
 export const appearanceOut = keyframes({
-  '0%': {
+  "0%": {
     opacity: 1,
-    transform: 'scale(1)'
+    transform: "scale(1)",
   },
-  '100%': {
+  "100%": {
     opacity: 0,
-    transform: 'scale(0.95)'
-  }
+    transform: "scale(0.95)",
+  },
 });
diff --git a/packages/react/src/utils/assertion.ts b/packages/react/src/utils/assertion.ts
index 5b2bfec36e..32ac268d56 100644
--- a/packages/react/src/utils/assertion.ts
+++ b/packages/react/src/utils/assertion.ts
@@ -1,6 +1,6 @@
-export const __DEV__ = process.env.NODE_ENV !== 'production';
+export const __DEV__ = process.env.NODE_ENV !== "production";
 
-export const __TEST__ = process.env.NODE_ENV === 'test';
+export const __TEST__ = process.env.NODE_ENV === "test";
 
 export type Dict<T = any> = Record<string, T>;
 
@@ -14,11 +14,8 @@ export function isEmptyArray(value: any) {
 
 export function isObject(value: any): value is Dict {
   const type = typeof value;
-  return (
-    value != null &&
-    (type === 'object' || type === 'function') &&
-    !isArray(value)
-  );
+
+  return value != null && (type === "object" || type === "function") && !isArray(value);
 }
 
 export function isEmptyObject(value: any) {
@@ -29,13 +26,12 @@ export function isEmptyObject(value: any) {
 export function isEmpty(value: any): boolean {
   if (isArray(value)) return isEmptyArray(value);
   if (isObject(value)) return isEmptyObject(value);
-  if (value == null || value === '') return true;
+  if (value == null || value === "") return true;
+
   return false;
 }
 
 // Function assertions
-export function isFunction<T extends Function = Function>(
-  value: any
-): value is T {
-  return typeof value === 'function';
+export function isFunction<T extends Function = Function>(value: any): value is T {
+  return typeof value === "function";
 }
diff --git a/packages/react/src/utils/checkmark.tsx b/packages/react/src/utils/checkmark.tsx
index 7a80f6d8db..bc0b73ec9f 100644
--- a/packages/react/src/utils/checkmark.tsx
+++ b/packages/react/src/utils/checkmark.tsx
@@ -1,8 +1,11 @@
-import React, { HTMLAttributes } from 'react';
-import { styled, keyframes } from '../theme/stitches.config';
-import type { CSS } from '../theme/stitches.config';
-import clsx from './clsx';
-import { __DEV__ } from './assertion';
+import type {CSS} from "../theme/stitches.config";
+
+import React, {HTMLAttributes} from "react";
+
+import {styled, keyframes} from "../theme/stitches.config";
+
+import clsx from "./clsx";
+import {__DEV__} from "./assertion";
 
 interface Props {
   css?: CSS;
@@ -19,19 +22,19 @@ type NativeAttrs = Omit<HTMLAttributes<HTMLElement>, keyof Props>;
 export type CheckmarkProps = Props & NativeAttrs;
 
 export const stroke = keyframes({
-  '100%': {
-    strokeDashoffset: 0
-  }
+  "100%": {
+    strokeDashoffset: 0,
+  },
 });
 
-const StyledCheckmark = styled('svg', {
-  d: 'block',
+const StyledCheckmark = styled("svg", {
+  d: "block",
   path: {
-    transformOrigin: '50% 50%',
+    transformOrigin: "50% 50%",
     strokeDasharray: 48,
     strokeDashoffset: 48,
-    animation: `${stroke} .25s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards`
-  }
+    animation: `${stroke} .25s cubic-bezier(0.650, 0.000, 0.450, 1.000) forwards`,
+  },
 });
 
 const Checkmark: React.FC<CheckmarkProps> = (props) => {
@@ -40,34 +43,30 @@ const Checkmark: React.FC<CheckmarkProps> = (props) => {
     height = 24,
     size,
     strokeWidth = 3,
-    fill = 'currentColor',
+    fill = "currentColor",
     css,
-    className
+    className,
   } = props;
+
   return (
     <StyledCheckmark
+      className={clsx("nextui-checkmark", className)}
+      css={{...(css as any)}}
+      height={size || height}
       role="img"
+      viewBox="0 0 52 52"
       width={size || width}
-      height={size || height}
-      className={clsx('nextui-checkmark', className)}
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 52 52"
-      css={{ ...(css as any) }}
     >
-      <path
-        stroke={fill}
-        strokeWidth={strokeWidth}
-        fill="none"
-        d="M14.1 27.2l7.1 7.2 16.7-16.8"
-      />
+      <path d="M14.1 27.2l7.1 7.2 16.7-16.8" fill="none" stroke={fill} strokeWidth={strokeWidth} />
     </StyledCheckmark>
   );
 };
 
 if (__DEV__) {
-  Checkmark.displayName = 'NextUI.Checkmark';
+  Checkmark.displayName = "NextUI.Checkmark";
 }
 
-Checkmark.toString = () => '.nextui-checkmark';
+Checkmark.toString = () => ".nextui-checkmark";
 
 export default Checkmark;
diff --git a/packages/react/src/utils/clear-icon.tsx b/packages/react/src/utils/clear-icon.tsx
index d4897643d1..c524ab645f 100644
--- a/packages/react/src/utils/clear-icon.tsx
+++ b/packages/react/src/utils/clear-icon.tsx
@@ -1,5 +1,6 @@
-import * as React from 'react';
-import withDefaults from './with-defaults';
+import * as React from "react";
+
+import withDefaults from "./with-defaults";
 
 interface Props {
   width?: number;
@@ -14,42 +15,35 @@ const defaultProps = {
   width: 24,
   height: 24,
   plain: false,
-  className: ''
+  className: "",
 };
 
-const Close: React.FC<Props> = ({
-  size,
-  fill,
-  plain,
-  width,
-  height,
-  className,
-  ...props
-}) => {
+const Close: React.FC<Props> = ({size, fill, plain, width, height, className, ...props}) => {
   if (plain) {
     return (
       <svg
-        width={size || width}
-        height={size || height}
-        viewBox="0 0 24 24"
+        className={className}
         fill="none"
+        height={size || height}
         stroke={fill}
-        strokeWidth={2}
         strokeLinecap="round"
         strokeLinejoin="round"
-        className={className}
+        strokeWidth={2}
+        viewBox="0 0 24 24"
+        width={size || width}
         {...props}
       >
         <path d="M18 6L6 18M6 6l12 12" />
       </svg>
     );
   }
+
   return (
     <svg
-      width={size || width}
+      className={className}
       height={size || height}
       viewBox="0 0 24 24"
-      className={className}
+      width={size || width}
       {...props}
     >
       <path
diff --git a/packages/react/src/utils/clsx.ts b/packages/react/src/utils/clsx.ts
index 29b9d162ed..812be7872d 100644
--- a/packages/react/src/utils/clsx.ts
+++ b/packages/react/src/utils/clsx.ts
@@ -3,16 +3,16 @@
 function toVal(mix: any) {
   var k,
     y,
-    str = '';
+    str = "";
 
-  if (typeof mix === 'string' || typeof mix === 'number') {
+  if (typeof mix === "string" || typeof mix === "number") {
     str += mix;
-  } else if (typeof mix === 'object') {
+  } else if (typeof mix === "object") {
     if (Array.isArray(mix)) {
       for (k = 0; k < mix.length; k++) {
         if (mix[k]) {
           if ((y = toVal(mix[k]))) {
-            str && (str += ' ');
+            str && (str += " ");
             str += y;
           }
         }
@@ -20,7 +20,7 @@ function toVal(mix: any) {
     } else {
       for (k in mix) {
         if (mix[k]) {
-          str && (str += ' ');
+          str && (str += " ");
           str += k;
         }
       }
@@ -34,14 +34,16 @@ export default function (...args: any[]) {
   var i = 0,
     tmp,
     x,
-    str = '';
+    str = "";
+
   while (i < args.length) {
     if ((tmp = args[i++])) {
       if ((x = toVal(tmp))) {
-        str && (str += ' ');
+        str && (str += " ");
         str += x;
       }
     }
   }
+
   return str;
 }
diff --git a/packages/react/src/utils/collections.ts b/packages/react/src/utils/collections.ts
index 1598f46ed6..a2a81d6bf9 100644
--- a/packages/react/src/utils/collections.ts
+++ b/packages/react/src/utils/collections.ts
@@ -1,41 +1,42 @@
-import React, { ReactNode } from 'react';
+import React, {ReactNode} from "react";
 
 export const getId = () => {
   return Math.random().toString(32).slice(2, 10);
 };
 
-export const hasChild = (
-  children: ReactNode | undefined,
-  child: React.ElementType
-): boolean => {
+export const hasChild = (children: ReactNode | undefined, child: React.ElementType): boolean => {
   const types = React.Children.map(children, (item) => {
     if (!React.isValidElement(item)) return null;
+
     return item.type;
   });
 
   return (types || []).includes(child);
 };
 
-export const pick = <Obj extends { [key: string]: any }, Key extends keyof Obj>(
+export const pick = <Obj extends {[key: string]: any}, Key extends keyof Obj>(
   props: Key[],
-  obj: Obj
+  obj: Obj,
 ): Pick<Obj, Key> =>
   props.reduce((acc, prop) => {
     acc[prop] = obj[prop];
+
     return acc;
   }, {} as Pick<Obj, Key>);
 
 export const pickChild = <T = ReactNode>(
   children: ReactNode | undefined,
-  targetChild: React.ElementType
+  targetChild: React.ElementType,
 ): [T | ReactNode | undefined, ReactNode[] | undefined] => {
   let target: ReactNode[] = [];
   const withoutTargetChildren = React.Children.map(children, (item) => {
     if (!React.isValidElement(item)) return item;
     if (item.type === targetChild) {
       target.push(item);
+
       return null;
     }
+
     return item;
   });
 
@@ -46,7 +47,7 @@ export const pickChild = <T = ReactNode>(
 
 export const pickSingleChild = <T = ReactNode>(
   children: ReactNode | undefined,
-  targetChild: React.ElementType
+  targetChild: React.ElementType,
 ): [T, ReactNode | null] => {
   const [withoutTargetChildren, target] = pickChild<T>(children, targetChild);
   let targetChildren: ReactNode = null;
@@ -60,56 +61,53 @@ export const pickSingleChild = <T = ReactNode>(
 
 export const isChildElement = (
   parent: Element | null | undefined,
-  child: Element | null | undefined
+  child: Element | null | undefined,
 ): boolean => {
   if (!parent || !child) return false;
   // eslint-disable-next-line no-undef
   let node: (Node & ParentNode) | null = child;
+
   while (node) {
     if (node === parent) return true;
     node = node.parentNode;
   }
+
   return false;
 };
 
 export const isBrowser = (): boolean => {
-  return Boolean(
-    typeof window !== 'undefined' &&
-      window.document &&
-      window.document.createElement
-  );
+  return Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
 };
 
 export const isMac = (): boolean => {
   if (!isBrowser()) return false;
-  return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
+  return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
 };
 
 export const setChildrenIndex = (
   children: ReactNode | undefined,
-  targetComponents: Array<React.ElementType> = []
+  targetComponents: Array<React.ElementType> = [],
 ): ReactNode | undefined => {
   if (React.Children.count(children) === 0) return [];
   const allowAll = targetComponents.length === 0;
-  const clone = (child: React.ReactElement, props = {}) =>
-    React.cloneElement(child, props);
+  const clone = (child: React.ReactElement, props = {}) => React.cloneElement(child, props);
   let index = 0;
 
   return React.Children.map(children, (item) => {
     if (!React.isValidElement(item)) return item;
     index = index + 1;
-    if (allowAll) return clone(item, { index });
+    if (allowAll) return clone(item, {index});
 
     const isAllowed = targetComponents.find((child) => child === item.type);
-    if (isAllowed) return clone(item, { index });
+
+    if (isAllowed) return clone(item, {index});
     index = index - 1;
+
     return item;
   });
 };
 
 export const flattenArray = (arr: any[]): any[] => {
-  return arr.reduce(
-    (acc, val) => acc.concat(Array.isArray(val) ? flattenArray(val) : val),
-    []
-  );
+  return arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flattenArray(val) : val), []);
 };
diff --git a/packages/react/src/utils/color.ts b/packages/react/src/utils/color.ts
index d28f99564d..5cc14b396e 100644
--- a/packages/react/src/utils/color.ts
+++ b/packages/react/src/utils/color.ts
@@ -1,19 +1,17 @@
-import { normalColors, simpleColors } from './prop-types';
+import {normalColors, simpleColors} from "./prop-types";
 
 export const getCssVar = (name: string) => {
-  if (typeof document !== 'undefined' || !name) {
-    const property = isCssVar(name)
-      ? name.replace('var(', '').replace(')', '')
-      : `--${name}`;
-    return getComputedStyle(document.documentElement).getPropertyValue(
-      property
-    );
+  if (typeof document !== "undefined" || !name) {
+    const property = isCssVar(name) ? name.replace("var(", "").replace(")", "") : `--${name}`;
+
+    return getComputedStyle(document.documentElement).getPropertyValue(property);
   }
-  return '';
+
+  return "";
 };
 
 export const isCssVar = (property: string) => {
-  return property && property?.indexOf('var(') === 0 ? true : false;
+  return property && property?.indexOf("var(") === 0 ? true : false;
 };
 
 /**
@@ -24,6 +22,7 @@ export const isCssVar = (property: string) => {
  */
 export const isHex = (str: string): boolean => {
   const exp = /#[a-fA-F0-9]{3,6}/g;
+
   return exp.test(str);
 };
 
@@ -37,27 +36,31 @@ export const hexToRGBA = (hex: string, alpha: number = 1): string => {
   let r: string | number = 0,
     g: string | number = 0,
     b: string | number = 0;
+
   // 3 digits
   if (hex.length == 4) {
-    r = '0x' + hex[1] + hex[1];
-    g = '0x' + hex[2] + hex[2];
-    b = '0x' + hex[3] + hex[3];
+    r = "0x" + hex[1] + hex[1];
+    g = "0x" + hex[2] + hex[2];
+    b = "0x" + hex[3] + hex[3];
     // 6 digits
   } else if (hex.length == 7) {
-    r = '0x' + hex[1] + hex[2];
-    g = '0x' + hex[3] + hex[4];
-    b = '0x' + hex[5] + hex[6];
+    r = "0x" + hex[1] + hex[2];
+    g = "0x" + hex[3] + hex[4];
+    b = "0x" + hex[5] + hex[6];
   }
+
   return `rgba(${+r}, ${+g},${+b},${alpha})`;
 };
 
 export const isNormalColor = (color: string): boolean => {
   let found = normalColors.find((el) => el === color);
+
   return found !== undefined && found !== null;
 };
 
 export const isSimpleColor = (color: string): boolean => {
   let found = simpleColors.find((el) => el === color);
+
   return found !== undefined && found !== null;
 };
 
@@ -68,59 +71,60 @@ export const isSimpleColor = (color: string): boolean => {
  */
 export const isColor = (strColor: string) => {
   let s = new Option().style;
+
   s.color = strColor;
+
   return s.color == strColor;
 };
 
 export const hexToRgb = (color: string): [number, number, number] => {
   const fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  const full = color.replace(
-    fullReg,
-    (_, r, g, b) => `${r}${r}${g}${g}${b}${b}`
-  );
+  const full = color.replace(fullReg, (_, r, g, b) => `${r}${r}${g}${g}${b}${b}`);
   const values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
+
   if (!values) {
     throw new Error(`Next UI: Unsupported ${color} color.`);
   }
+
   return [
     Number.parseInt(values[1], 16),
     Number.parseInt(values[2], 16),
-    Number.parseInt(values[3], 16)
+    Number.parseInt(values[3], 16),
   ];
 };
 
-export const hexFromString = (
-  str: string,
-  defaultColor: string = '',
-  returnLast = false
-) => {
+export const hexFromString = (str: string, defaultColor: string = "", returnLast = false) => {
   const fullReg = /#[a-fA-F0-9]{6}|#[a-fA-F0-9]{3}$/g;
   const hexCodes = str.match(fullReg);
+
   if (hexCodes && hexCodes.length > 0) {
     return returnLast ? hexCodes[hexCodes.length - 1] : hexCodes;
   }
+
   return defaultColor;
 };
 
 export const colorToRgbValues = (colorProp: string) => {
   const color = isCssVar(colorProp) ? getCssVar(colorProp) : colorProp;
 
-  if (color.charAt(0) === '#') return hexToRgb(color);
+  if (color.charAt(0) === "#") return hexToRgb(color);
 
-  const safeColor = color.replace(/ /g, '');
+  const safeColor = color.replace(/ /g, "");
   const colorType = color.substr(0, 4);
 
   const regArray = safeColor.match(/\((.+)\)/);
-  if (!colorType.startsWith('rgb') || !regArray) {
+
+  if (!colorType.startsWith("rgb") || !regArray) {
     throw new Error(`Next UI: Only support ["RGB", "RGBA", "HEX"] color.`);
   }
 
-  return regArray[1].split(',').map((str) => Number.parseFloat(str));
+  return regArray[1].split(",").map((str) => Number.parseFloat(str));
 };
 
 export const addColorAlpha = (colorProp?: string, alpha: number = 1) => {
-  if (!colorProp) return '';
+  if (!colorProp) return "";
   const color = isCssVar(colorProp) ? getCssVar(colorProp) : colorProp;
+
   if (isHex(color)) {
     return hexToRGBA(color, alpha);
   } else if (!/^#|rgb|RGB/.test(color)) {
@@ -128,19 +132,21 @@ export const addColorAlpha = (colorProp?: string, alpha: number = 1) => {
   }
   const [r, g, b] = colorToRgbValues(color);
   const safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
+
   return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`;
 };
 
 function padZero(str: string, len?: number): string {
   len = len || 2;
-  var zeros = new Array(len).join('0');
+  var zeros = new Array(len).join("0");
+
   return (zeros + str).slice(-len);
 }
 
 export const invertHex = (hexProp: string, smooth = true) => {
   let hex = isCssVar(hexProp) ? getCssVar(hexProp) : hexProp;
 
-  if (hex.indexOf('#') === 0) {
+  if (hex.indexOf("#") === 0) {
     hex = hex.slice(1);
   }
   // convert 3-digit hex to 6-digits.
@@ -153,19 +159,16 @@ export const invertHex = (hexProp: string, smooth = true) => {
   let r = parseInt(hex.slice(0, 2), 16),
     g = parseInt(hex.slice(2, 4), 16),
     b = parseInt(hex.slice(4, 6), 16);
+
   if (smooth) {
     // http://stackoverflow.com/a/3943023/112731
-    return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF';
+    return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "#000000" : "#FFFFFF";
   }
   // invert color components
   r = 255 - r;
   g = 255 - g;
   b = 255 - b;
+
   // pad each with zeros and return
-  return (
-    '#' +
-    padZero(r.toString(16)) +
-    padZero(g.toString(16)) +
-    padZero(b.toString(16))
-  );
+  return "#" + padZero(r.toString(16)) + padZero(g.toString(16)) + padZero(b.toString(16));
 };
diff --git a/packages/react/src/utils/console.ts b/packages/react/src/utils/console.ts
new file mode 100644
index 0000000000..a9518500f0
--- /dev/null
+++ b/packages/react/src/utils/console.ts
@@ -0,0 +1,17 @@
+const warningStack: {[key: string]: boolean} = {};
+
+export const warn = (message: string, component?: string) => {
+  const tag = component ? ` [${component}]` : " ";
+  const log = `[Next UI]${tag}: ${message}`;
+
+  if (typeof console === "undefined") return;
+  if (warningStack[log]) return;
+  warningStack[log] = true;
+
+  if (process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line no-console
+    return console.error(log);
+  }
+  // eslint-disable-next-line no-console
+  console.warn(log);
+};
diff --git a/packages/react/src/utils/context.ts b/packages/react/src/utils/context.ts
index f1a10e87ea..26f393a7c2 100644
--- a/packages/react/src/utils/context.ts
+++ b/packages/react/src/utils/context.ts
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface CreateContextOptions {
   /**
@@ -26,8 +26,8 @@ type CreateContextReturn<T> = [React.Provider<T>, () => T, React.Context<T>];
 export function createContext<ContextType>(options: CreateContextOptions = {}) {
   const {
     strict = true,
-    errorMessage = 'useContext: `context` is undefined. Seems you forgot to wrap component within the Provider',
-    name
+    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
+    name,
   } = options;
 
   const Context = React.createContext<ContextType | undefined>(undefined);
@@ -39,7 +39,8 @@ export function createContext<ContextType>(options: CreateContextOptions = {}) {
 
     if (!context && strict) {
       const error = new Error(errorMessage);
-      error.name = 'ContextError';
+
+      error.name = "ContextError";
       Error.captureStackTrace?.(error, useContext);
       throw error;
     }
@@ -47,9 +48,5 @@ export function createContext<ContextType>(options: CreateContextOptions = {}) {
     return context;
   }
 
-  return [
-    Context.Provider,
-    useContext,
-    Context
-  ] as CreateContextReturn<ContextType>;
+  return [Context.Provider, useContext, Context] as CreateContextReturn<ContextType>;
 }
diff --git a/packages/react/src/utils/css-transition.ts b/packages/react/src/utils/css-transition.ts
index 2a2b21c5ec..1730e71047 100644
--- a/packages/react/src/utils/css-transition.ts
+++ b/packages/react/src/utils/css-transition.ts
@@ -1,6 +1,7 @@
-import React, { useEffect, useState } from 'react';
-import withDefaults from './with-defaults';
-import clsx from './clsx';
+import React, {useEffect, useState} from "react";
+
+import withDefaults from "./with-defaults";
+import clsx from "./clsx";
 
 interface Props {
   visible?: boolean;
@@ -19,8 +20,8 @@ const defaultProps = {
   enterTime: 60,
   leaveTime: 60,
   clearTime: 60,
-  className: '',
-  name: 'transition'
+  className: "",
+  name: "transition",
 };
 
 export type CSSTransitionProps = Props & typeof defaultProps;
@@ -38,11 +39,11 @@ const CSSTransition: React.FC<React.PropsWithChildren<CSSTransitionProps>> = ({
   onEntered,
   ...props
 }) => {
-  const [classes, setClasses] = useState<string>('');
+  const [classes, setClasses] = useState<string>("");
   const [renderable, setRenderable] = useState<boolean>(visible);
 
   useEffect(() => {
-    const statusClassName = visible ? 'enter' : 'leave';
+    const statusClassName = visible ? "enter" : "leave";
     const time = visible ? enterTime : leaveTime;
 
     if (visible && !renderable) {
@@ -53,10 +54,8 @@ const CSSTransition: React.FC<React.PropsWithChildren<CSSTransitionProps>> = ({
 
     // set class to active
     const timer = setTimeout(() => {
-      setClasses(
-        `${name}-${statusClassName} ${name}-${statusClassName}-active`
-      );
-      if (statusClassName === 'leave') {
+      setClasses(`${name}-${statusClassName} ${name}-${statusClassName}-active`);
+      if (statusClassName === "leave") {
         onExited?.();
       } else {
         onEntered?.();
@@ -67,7 +66,7 @@ const CSSTransition: React.FC<React.PropsWithChildren<CSSTransitionProps>> = ({
     // remove classess when animation over
     const clearClassesTimer = setTimeout(() => {
       if (!visible) {
-        setClasses('');
+        setClasses("");
         setRenderable(false);
       }
       clearTimeout(clearClassesTimer);
@@ -84,11 +83,10 @@ const CSSTransition: React.FC<React.PropsWithChildren<CSSTransitionProps>> = ({
     if (!childrenRef?.current) {
       return;
     }
-    const classesArr = classes.split(' ');
-    const refClassesArr = childrenRef.current.className.split(' ');
-    const newRefClassesArr = refClassesArr.filter(
-      (item) => !item.includes(name)
-    );
+    const classesArr = classes.split(" ");
+    const refClassesArr = childrenRef.current.className.split(" ");
+    const newRefClassesArr = refClassesArr.filter((item) => !item.includes(name));
+
     childrenRef.current.className = clsx(newRefClassesArr, classesArr);
   }, [childrenRef, classes]);
 
@@ -96,11 +94,7 @@ const CSSTransition: React.FC<React.PropsWithChildren<CSSTransitionProps>> = ({
 
   return React.cloneElement(children, {
     ...props,
-    className: clsx(
-      children.props.className,
-      className,
-      !childrenRef?.current ? classes : ''
-    )
+    className: clsx(children.props.className, className, !childrenRef?.current ? classes : ""),
   });
 };
 
diff --git a/packages/react/src/utils/deep-merge.js b/packages/react/src/utils/deep-merge.js
index 520f8948f6..08270181c3 100644
--- a/packages/react/src/utils/deep-merge.js
+++ b/packages/react/src/utils/deep-merge.js
@@ -2,17 +2,18 @@ export default function deepMerge(result) {
   var stack = Array.prototype.slice.call(arguments, 1);
   var item;
   var key;
+
   while (stack.length) {
     item = stack.shift();
     for (key in item) {
       // eslint-disable-next-line no-prototype-builtins
       if (item.hasOwnProperty(key)) {
         if (
-          typeof result[key] === 'object' &&
+          typeof result[key] === "object" &&
           result[key] &&
-          Object.prototype.toString.call(result[key]) !== '[object Array]'
+          Object.prototype.toString.call(result[key]) !== "[object Array]"
         ) {
-          if (typeof item[key] === 'object' && item[key] !== null) {
+          if (typeof item[key] === "object" && item[key] !== null) {
             result[key] = deepMerge({}, result[key], item[key]);
           } else {
             result[key] = item[key];
@@ -23,5 +24,6 @@ export default function deepMerge(result) {
       }
     }
   }
+
   return result;
 }
diff --git a/packages/react/src/utils/dom.ts b/packages/react/src/utils/dom.ts
index 5b78b7c253..bc46fb9ec2 100644
--- a/packages/react/src/utils/dom.ts
+++ b/packages/react/src/utils/dom.ts
@@ -1,74 +1,65 @@
-import {
-  DOMRefValue,
-  FocusableRef,
-  FocusableRefValue
-} from '@react-types/shared';
+import {DOMRefValue, FocusableRef, FocusableRefValue} from "@react-types/shared";
 import {
   Ref,
   RefObject,
   MutableRefObject,
   useImperativeHandle,
   useLayoutEffect,
-  useRef
-} from 'react';
+  useRef,
+} from "react";
 
 export function canUseDOM(): boolean {
-  return !!(
-    typeof window !== 'undefined' &&
-    window.document &&
-    window.document.createElement
-  );
+  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
 }
 
 export const isBrowser = canUseDOM();
 
 function getUserAgentBrowser(navigator: Navigator) {
-  const { userAgent: ua, vendor } = navigator;
+  const {userAgent: ua, vendor} = navigator;
   const android = /(android)/i.test(ua);
 
   switch (true) {
     case /CriOS/.test(ua):
-      return 'Chrome for iOS';
+      return "Chrome for iOS";
     case /Edg\//.test(ua):
-      return 'Edge';
+      return "Edge";
     case android && /Silk\//.test(ua):
-      return 'Silk';
+      return "Silk";
     case /Chrome/.test(ua) && /Google Inc/.test(vendor):
-      return 'Chrome';
+      return "Chrome";
     case /Firefox\/\d+\.\d+$/.test(ua):
-      return 'Firefox';
+      return "Firefox";
     case android:
-      return 'AOSP';
+      return "AOSP";
     case /MSIE|Trident/.test(ua):
-      return 'IE';
+      return "IE";
     case /Safari/.test(navigator.userAgent) && /Apple Computer/.test(ua):
-      return 'Safari';
+      return "Safari";
     case /AppleWebKit/.test(ua):
-      return 'WebKit';
+      return "WebKit";
     default:
       return null;
   }
 }
 
-export type UserAgentBrowser = NonNullable<
-  ReturnType<typeof getUserAgentBrowser>
->;
+export type UserAgentBrowser = NonNullable<ReturnType<typeof getUserAgentBrowser>>;
 
 function getUserAgentOS(navigator: Navigator) {
-  const { userAgent: ua, platform } = navigator;
+  const {userAgent: ua, platform} = navigator;
+
   switch (true) {
     case /Android/.test(ua):
-      return 'Android';
+      return "Android";
     case /iPhone|iPad|iPod/.test(platform):
-      return 'iOS';
+      return "iOS";
     case /Win/.test(platform):
-      return 'Windows';
+      return "Windows";
     case /Mac/.test(platform):
-      return 'Mac';
+      return "Mac";
     case /CrOS/.test(ua):
-      return 'Chrome OS';
+      return "Chrome OS";
     case /Firefox/.test(ua):
-      return 'Firefox OS';
+      return "Firefox OS";
     default:
       return null;
   }
@@ -77,48 +68,45 @@ function getUserAgentOS(navigator: Navigator) {
 export type UserAgentOS = NonNullable<ReturnType<typeof getUserAgentOS>>;
 
 export function detectDeviceType(navigator: Navigator) {
-  const { userAgent: ua } = navigator;
-  if (/(tablet)|(iPad)|(Nexus 9)/i.test(ua)) return 'tablet';
-  if (/(mobi)/i.test(ua)) return 'phone';
-  return 'desktop';
+  const {userAgent: ua} = navigator;
+
+  if (/(tablet)|(iPad)|(Nexus 9)/i.test(ua)) return "tablet";
+  if (/(mobi)/i.test(ua)) return "phone";
+
+  return "desktop";
 }
 
-export type UserAgentDeviceType = NonNullable<
-  ReturnType<typeof detectDeviceType>
->;
+export type UserAgentDeviceType = NonNullable<ReturnType<typeof detectDeviceType>>;
 
 export function detectOS(os: UserAgentOS) {
   if (!isBrowser) return false;
+
   return getUserAgentOS(window.navigator) === os;
 }
 
 export function detectBrowser(browser: UserAgentBrowser) {
   if (!isBrowser) return false;
+
   return getUserAgentBrowser(window.navigator) === browser;
 }
 
 export function detectTouch() {
   if (!isBrowser) return false;
-  return (
-    window.ontouchstart === null &&
-    window.ontouchmove === null &&
-    window.ontouchend === null
-  );
+
+  return window.ontouchstart === null && window.ontouchmove === null && window.ontouchend === null;
 }
 
-export function createDOMRef<T extends HTMLElement = HTMLElement>(
-  ref: RefObject<T>
-) {
+export function createDOMRef<T extends HTMLElement = HTMLElement>(ref: RefObject<T>) {
   return {
     UNSAFE_getDOMNode() {
       return ref.current;
-    }
+    },
   } as DOMRefValue<T>;
 }
 
 export function createFocusableRef<T extends HTMLElement = HTMLElement>(
   domRef: RefObject<T>,
-  focusableRef: RefObject<HTMLElement> = domRef
+  focusableRef: RefObject<HTMLElement> = domRef,
 ): FocusableRefValue<T> {
   return {
     ...createDOMRef(domRef),
@@ -126,24 +114,28 @@ export function createFocusableRef<T extends HTMLElement = HTMLElement>(
       if (focusableRef.current) {
         focusableRef.current.focus();
       }
-    }
+    },
   };
 }
 
 export function useDOMRef<T extends HTMLElement = HTMLElement>(
-  ref: RefObject<T | null> | Ref<T | null>
+  ref: RefObject<T | null> | Ref<T | null>,
 ) {
   const domRef = useRef<T>(null);
+
   useImperativeHandle(ref, () => domRef.current);
+
   return domRef;
 }
 
 export function useFocusableRef<T extends HTMLElement = HTMLElement>(
   ref: FocusableRef<T>,
-  focusableRef?: RefObject<HTMLElement>
+  focusableRef?: RefObject<HTMLElement>,
 ): RefObject<T> {
   const domRef = useRef<T>(null);
+
   useImperativeHandle(ref, () => createFocusableRef(domRef, focusableRef));
+
   return domRef;
 }
 
@@ -152,13 +144,11 @@ export interface ContextValue<T> {
 }
 
 // Syncs ref from context with ref passed to hook
-export function useSyncRef<T>(
-  context: ContextValue<T | null>,
-  ref: RefObject<T>
-) {
+export function useSyncRef<T>(context: ContextValue<T | null>, ref: RefObject<T>) {
   useLayoutEffect(() => {
     if (context && context.ref && ref && ref.current) {
       context.ref.current = ref.current;
+
       return () => {
         if (context.ref?.current) {
           context.ref.current = null;
diff --git a/packages/react/src/utils/drip.tsx b/packages/react/src/utils/drip.tsx
index adf40f0db8..01abad7d03 100644
--- a/packages/react/src/utils/drip.tsx
+++ b/packages/react/src/utils/drip.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect, useRef } from 'react';
-import { styled, keyframes, VariantProps } from '../theme/stitches.config';
-import withDefaults from '../utils/with-defaults';
-import clsx from '../utils/clsx';
+import React, {useEffect, useRef} from "react";
+
+import {styled, keyframes, VariantProps} from "../theme/stitches.config";
+import withDefaults from "../utils/with-defaults";
+import clsx from "../utils/clsx";
 
 interface Props {
   visible: boolean;
@@ -16,79 +17,68 @@ const defaultProps = {
   visible: false,
   x: 0,
   y: 0,
-  className: ''
+  className: "",
 };
 
 const expand = keyframes({
-  '0%': {
+  "0%": {
     opacity: 0,
-    transform: 'scale(0.25)'
+    transform: "scale(0.25)",
+  },
+  "30%": {
+    opacity: 1,
   },
-  '30%': {
-    opacity: 1
+  "80%": {
+    opacity: 0.5,
   },
-  '80%': {
-    opacity: 0.5
+  "100%": {
+    transform: "scale(28)",
+    opacity: 0,
   },
-  '100%': {
-    transform: 'scale(28)',
-    opacity: 0
-  }
 });
 
-export const StyledDrip = styled('div', {
-  position: 'absolute',
+export const StyledDrip = styled("div", {
+  position: "absolute",
   left: 0,
   right: 0,
   top: 0,
   bottom: 0,
-  '& svg': {
-    position: 'absolute',
+  "& svg": {
+    position: "absolute",
     animation: `350ms linear ${expand}`,
-    animationFillMode: 'forwards',
-    width: '$md',
-    height: '$md'
-  }
+    animationFillMode: "forwards",
+    width: "$md",
+    height: "$md",
+  },
 });
 
 type DripVariants = VariantProps<typeof StyledDrip>;
 
 export type DripProps = Props & typeof defaultProps & DripVariants;
 
-const Drip: React.FC<DripProps> = ({
-  visible,
-  x,
-  y,
-  color,
-  onCompleted,
-  className,
-  ...props
-}) => {
+const Drip: React.FC<DripProps> = ({visible, x, y, color, onCompleted, className, ...props}) => {
   const dripRef = useRef<HTMLDivElement>(null);
   const top = Number.isNaN(+y) ? 0 : y - 10;
   const left = Number.isNaN(+x) ? 0 : x - 10;
 
   useEffect(() => {
     if (!dripRef.current) return;
-    dripRef.current.addEventListener('animationend', onCompleted);
+    dripRef.current.addEventListener("animationend", onCompleted);
+
     return () => {
       if (!dripRef.current) return;
-      dripRef.current.removeEventListener('animationend', onCompleted);
+      dripRef.current.removeEventListener("animationend", onCompleted);
     };
   });
 
   if (!visible) return null;
 
   return (
-    <StyledDrip
-      ref={dripRef}
-      className={clsx('nextui-drip', className)}
-      {...props}
-    >
-      <svg width="20" height="20" viewBox="0 0 20 20" style={{ top, left }}>
-        <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+    <StyledDrip ref={dripRef} className={clsx("nextui-drip", className)} {...props}>
+      <svg height="20" style={{top, left}} viewBox="0 0 20 20" width="20">
+        <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
           <g className="nextui-drip-filler" fill={color}>
-            <rect width="100%" height="100%" rx="10" />
+            <rect height="100%" rx="10" width="100%" />
           </g>
         </g>
       </svg>
diff --git a/packages/react/src/utils/expand.tsx b/packages/react/src/utils/expand.tsx
index f792b039d2..b22dd07a6d 100644
--- a/packages/react/src/utils/expand.tsx
+++ b/packages/react/src/utils/expand.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { styled, CSS } from '../theme/stitches.config';
-import withDefaults from '../utils/with-defaults';
-import useRealShape from '../use-real-shape';
+import React, {useEffect, useRef, useState} from "react";
+
+import {styled, CSS} from "../theme/stitches.config";
+import withDefaults from "../utils/with-defaults";
+import useRealShape from "../use-real-shape";
 
 interface Props {
   isExpanded?: boolean;
@@ -13,22 +14,22 @@ interface Props {
 const defaultProps = {
   isExpanded: false,
   animated: true,
-  delay: 200
+  delay: 200,
 };
 
-const StyledExpand = styled('div', {
+const StyledExpand = styled("div", {
   p: 0,
   m: 0,
   h: 0,
   opacity: 0,
-  overflow: 'hidden',
+  overflow: "hidden",
   variants: {
     expanded: {
       true: {
-        opacity: 1
-      }
-    }
-  }
+        opacity: 1,
+      },
+    },
+  },
 });
 
 export type ExpandProps = Props & typeof defaultProps;
@@ -38,9 +39,9 @@ const Expand: React.FC<React.PropsWithChildren<ExpandProps>> = ({
   delay,
   animated,
   css,
-  children
+  children,
 }) => {
-  const [height, setHeight] = useState<string>(isExpanded ? 'auto' : '0');
+  const [height, setHeight] = useState<string>(isExpanded ? "auto" : "0");
   const [selfExpanded, setSelfExpanded] = useState<boolean>(isExpanded);
   const contentRef = useRef<HTMLDivElement>(null);
   const entryTimer = useRef<number>();
@@ -68,7 +69,7 @@ const Expand: React.FC<React.PropsWithChildren<ExpandProps>> = ({
     // Reset height after animation
     if (isExpanded) {
       resetTimer.current = window.setTimeout(() => {
-        setHeight('auto');
+        setHeight("auto");
         clearTimeout(resetTimer.current);
       }, delay);
     } else {
@@ -86,15 +87,15 @@ const Expand: React.FC<React.PropsWithChildren<ExpandProps>> = ({
 
   return (
     <StyledExpand
-      expanded={selfExpanded}
       css={{
-        height: selfExpanded ? height : '0',
+        height: selfExpanded ? height : "0",
         transition: animated
           ? `height ${delay}ms ease 0ms,
     opacity ${delay * 1.5}ms ease 0ms;`
-          : 'none',
-        ...(css as any)
+          : "none",
+        ...(css as any),
       }}
+      expanded={selfExpanded}
     >
       <div ref={contentRef} className="nextui-expand-content">
         {children}
diff --git a/packages/react/src/utils/icons.tsx b/packages/react/src/utils/icons.tsx
index 63c0b6fada..666fb6d647 100644
--- a/packages/react/src/utils/icons.tsx
+++ b/packages/react/src/utils/icons.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
-import { NextUITheme } from '../theme/index';
+import React from "react";
+
+import {NextUITheme} from "../theme/index";
 
 interface IconProps {
   theme?: NextUITheme;
@@ -11,51 +12,38 @@ interface IconProps {
   label?: string;
 }
 
-export const Sun: React.FC<IconProps> = ({
-  theme,
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+export const Sun: React.FC<IconProps> = ({fill, filled, size, height, width, ...props}) => {
   if (filled) {
     return (
       <svg
+        height={size || height || 24}
         viewBox="0 0 512 512"
         width={size || width || 24}
-        height={size || height || 24}
         {...props}
       >
         <path
-          fill={fill}
           d="M256 118a22 22 0 01-22-22V48a22 22 0 0144 0v48a22 22 0 01-22 22zM256 486a22 22 0 01-22-22v-48a22 22 0 0144 0v48a22 22 0 01-22 22zM369.14 164.86a22 22 0 01-15.56-37.55l33.94-33.94a22 22 0 0131.11 31.11l-33.94 33.94a21.93 21.93 0 01-15.55 6.44zM108.92 425.08a22 22 0 01-15.55-37.56l33.94-33.94a22 22 0 1131.11 31.11l-33.94 33.94a21.94 21.94 0 01-15.56 6.45zM464 278h-48a22 22 0 010-44h48a22 22 0 010 44zM96 278H48a22 22 0 010-44h48a22 22 0 010 44zM403.08 425.08a21.94 21.94 0 01-15.56-6.45l-33.94-33.94a22 22 0 0131.11-31.11l33.94 33.94a22 22 0 01-15.55 37.56zM142.86 164.86a21.89 21.89 0 01-15.55-6.44l-33.94-33.94a22 22 0 0131.11-31.11l33.94 33.94a22 22 0 01-15.56 37.55zM256 358a102 102 0 11102-102 102.12 102.12 0 01-102 102z"
+          fill={fill}
         />
       </svg>
     );
   }
+
   return (
-    <svg
-      viewBox="0 0 512 512"
-      width={size || width || 24}
-      height={size || height || 24}
-      {...props}
-    >
+    <svg height={size || height || 24} viewBox="0 0 512 512" width={size || width || 24} {...props}>
       <path
+        d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
         fill="none"
         stroke={fill}
         strokeLinecap="round"
         strokeMiterlimit={10}
         strokeWidth={32}
-        d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
       />
       <circle
         cx={256}
         cy={256}
-        r={80}
         fill="none"
+        r={80}
         stroke={fill}
         strokeLinecap="round"
         strokeMiterlimit={10}
@@ -65,28 +53,10 @@ export const Sun: React.FC<IconProps> = ({
   );
 };
 
-export const Mail: React.FC<IconProps> = ({
-  theme,
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const Mail: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      {...props}
-    >
-      <g
-        fill="none"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      >
+    <svg height={size || height || 24} viewBox="0 0 24 24" width={size || width || 24} {...props}>
+      <g fill="none" stroke={fill} strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}>
         <path d="M12 20.5H7c-3 0-5-1.5-5-5v-7c0-3.5 2-5 5-5h10c3 0 5 1.5 5 5v3" />
         <path d="M17 9l-3.13 2.5a3.166 3.166 0 01-3.75 0L7 9M19.21 14.77l-3.539 3.54a1.232 1.232 0 00-.3.59l-.19 1.35a.635.635 0 00.76.76l1.35-.19a1.189 1.189 0 00.59-.3l3.54-3.54a1.365 1.365 0 000-2.22 1.361 1.361 0 00-2.211.01zM18.7 15.28a3.185 3.185 0 002.22 2.22" />
       </g>
@@ -94,38 +64,25 @@ export const Mail: React.FC<IconProps> = ({
   );
 };
 
-export const Moon: React.FC<IconProps> = ({
-  theme,
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+export const Moon: React.FC<IconProps> = ({fill, filled, size, height, width, ...props}) => {
   if (filled) {
     return (
       <svg
+        height={size || height || 24}
         viewBox="0 0 512 512"
         width={size || width || 24}
-        height={size || height || 24}
         {...props}
       >
         <path
-          fill={fill}
           d="M152.62 126.77c0-33 4.85-66.35 17.23-94.77C87.54 67.83 32 151.89 32 247.38 32 375.85 136.15 480 264.62 480c95.49 0 179.55-55.54 215.38-137.85-28.42 12.38-61.8 17.23-94.77 17.23-128.47 0-232.61-104.14-232.61-232.61z"
+          fill={fill}
         />
       </svg>
     );
   }
+
   return (
-    <svg
-      viewBox="0 0 512 512"
-      width={size || width || 24}
-      height={size || height || 24}
-      {...props}
-    >
+    <svg height={size || height || 24} viewBox="0 0 512 512" width={size || width || 24} {...props}>
       <path
         d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
         fill="none"
@@ -138,133 +95,105 @@ export const Moon: React.FC<IconProps> = ({
   );
 };
 
-export const Lock: React.FC<IconProps> = ({
-  theme,
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+export const Lock: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   const color = fill;
+
   return (
     <svg
       data-name="Iconly/Curved/Lock"
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g transform="translate(3.5 2)">
         <path
           d="M9.121,6.653V4.5A4.561,4.561,0,0,0,0,4.484V6.653"
-          transform="translate(3.85 0.75)"
           fill="none"
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeMiterlimit="10"
           strokeWidth={1.5}
+          transform="translate(3.85 0.75)"
         />
         <path
           d="M.5,0V2.221"
-          transform="translate(7.91 12.156)"
           fill="none"
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeMiterlimit="10"
           strokeWidth={1.5}
+          transform="translate(7.91 12.156)"
         />
         <path
           d="M7.66,0C1.915,0,0,1.568,0,6.271s1.915,6.272,7.66,6.272,7.661-1.568,7.661-6.272S13.4,0,7.66,0Z"
-          transform="translate(0.75 6.824)"
           fill="none"
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeMiterlimit="10"
           strokeWidth={1.5}
+          transform="translate(0.75 6.824)"
         />
       </g>
     </svg>
   );
 };
 
-export const Unlock: React.FC<IconProps> = ({
-  theme,
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+export const Unlock: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   const color = fill;
+
   return (
     <svg
       data-name="Iconly/Curved/Lock"
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g transform="translate(3.5 2)">
         <path
           d="M8.927,3.237A4.562,4.562,0,0,0,0,4.484V6.653"
-          transform="translate(3.849 0.75)"
           fill="none"
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeMiterlimit="10"
           strokeWidth={1.5}
+          transform="translate(3.849 0.75)"
         />
         <path
           d="M.5,0V2.221"
-          transform="translate(7.91 12.156)"
           fill="none"
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeMiterlimit="10"
           strokeWidth={1.5}
+          transform="translate(7.91 12.156)"
         />
         <path
           d="M7.66,0C1.915,0,0,1.568,0,6.271s1.915,6.272,7.66,6.272,7.661-1.568,7.661-6.272S13.406,0,7.66,0Z"
-          transform="translate(0.75 6.824)"
           fill="none"
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeMiterlimit="10"
           strokeWidth={1.5}
+          transform="translate(0.75 6.824)"
         />
       </g>
     </svg>
   );
 };
 
-export const Password: React.FC<IconProps> = ({
-  theme,
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const Password: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      {...props}
-    >
+    <svg height={size || height || 24} viewBox="0 0 24 24" width={size || width || 24} {...props}>
       <g fill={fill}>
         <path d="M18.75 8v2.1a12.984 12.984 0 00-1.5-.1V8c0-3.15-.89-5.25-5.25-5.25S6.75 4.85 6.75 8v2a12.984 12.984 0 00-1.5.1V8c0-2.9.7-6.75 6.75-6.75S18.75 5.1 18.75 8z" />
         <path d="M18.75 10.1a12.984 12.984 0 00-1.5-.1H6.75a12.984 12.984 0 00-1.5.1C2.7 10.41 2 11.66 2 15v2c0 4 1 5 5 5h10c4 0 5-1 5-5v-2c0-3.34-.7-4.59-3.25-4.9zM8.71 16.71A1.052 1.052 0 018 17a1 1 0 01-.38-.08 1.032 1.032 0 01-.33-.21A1.052 1.052 0 017 16a1 1 0 01.08-.38 1.155 1.155 0 01.21-.33 1.032 1.032 0 01.33-.21 1 1 0 011.09.21 1.155 1.155 0 01.21.33A1 1 0 019 16a1.052 1.052 0 01-.29.71zm4.21-.33a1.155 1.155 0 01-.21.33A1.052 1.052 0 0112 17a1.033 1.033 0 01-.71-.29 1.155 1.155 0 01-.21-.33A1 1 0 0111 16a1.033 1.033 0 01.29-.71 1.047 1.047 0 011.42 0A1.033 1.033 0 0113 16a1 1 0 01-.08.38zm3.79.33a1.014 1.014 0 01-1.42 0 1.014 1.014 0 010-1.42 1.047 1.047 0 011.42 0c.04.05.08.1.12.16a.556.556 0 01.09.17.636.636 0 01.06.18 1.5 1.5 0 01.02.2 1.052 1.052 0 01-.29.71z" />
@@ -273,52 +202,34 @@ export const Password: React.FC<IconProps> = ({
   );
 };
 
-export const Notification: React.FC<IconProps> = ({
-  theme,
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+export const Notification: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
         fill={fill}
+        fillRule="evenodd"
       />
     </svg>
   );
 };
 
-export const User: React.FC<IconProps> = ({
-  theme,
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+export const User: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
       data-name="Iconly/Curved/Profile"
-      xmlns="http://www.w3.org/2000/svg"
+      height={size || height || 24}
       viewBox="0 0 24 24"
       width={size || width || 24}
-      height={size || height || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g
@@ -330,93 +241,63 @@ export const User: React.FC<IconProps> = ({
         strokeWidth={1.5}
       >
         <path
-          data-name="Stroke 1"
           d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
+          data-name="Stroke 1"
         />
-        <path
-          data-name="Stroke 3"
-          d="M11.837 11.174a4.372 4.372 0 10-.031 0z"
-        />
+        <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
       </g>
     </svg>
   );
 };
 
-export const VolumeUp: React.FC<IconProps> = ({
-  theme,
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+export const VolumeUp: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      height={size || height || 24}
       viewBox="0 0 24 24"
       width={size || width || 24}
-      height={size || height || 24}
-      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M13.357 6.45c-.05-.486-.103-.99-.232-1.494C12.775 3.752 11.801 3 10.758 3c-.582-.002-1.318.356-1.736.72l-3.46 2.897h-1.81c-1.333 0-2.404 1.027-2.607 2.51-.172 1.424-.214 4.11 0 5.677.186 1.567 1.21 2.579 2.607 2.579h1.81l3.527 2.94c.362.315 1 .676 1.588.676l.105.001c1.063 0 2-.78 2.35-1.98.133-.509.18-.985.224-1.445l.001-.008.047-.459c.18-1.487.18-8.739 0-10.215l-.047-.442zm4.05.045a.907.907 0 00-1.279-.237.957.957 0 00-.228 1.308c.802 1.182 1.243 2.756 1.243 4.434 0 1.677-.441 3.252-1.243 4.434a.956.956 0 00.23 1.308.905.905 0 001.277-.237c1.012-1.492 1.571-3.447 1.571-5.505s-.559-4.013-1.571-5.505zM19.29 3.22a.905.905 0 011.277.236C22.136 5.767 23 8.802 23 12c0 3.2-.864 6.234-2.433 8.544a.902.902 0 01-1.276.236.957.957 0 01-.23-1.308c1.356-1.999 2.104-4.653 2.104-7.472 0-2.818-.748-5.472-2.105-7.471a.958.958 0 01.23-1.308z"
         fill={fill}
+        fillRule="evenodd"
       />
     </svg>
   );
 };
 
-export const Camera: React.FC<IconProps> = ({
-  theme,
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+export const Camera: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
         fill={fill}
+        fillRule="evenodd"
       />
     </svg>
   );
 };
 
-export const Activity: React.FC<IconProps> = ({
-  theme,
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+export const Activity: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
       data-name="Iconly/Curved/Activity"
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g
@@ -435,29 +316,16 @@ export const Activity: React.FC<IconProps> = ({
   );
 };
 
-export const Plus: React.FC<IconProps> = ({
-  theme,
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const Plus: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g
-        fill="none"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      >
+      <g fill="none" stroke={fill} strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}>
         <path d="M6 12h12" />
         <path d="M12 18V6" />
       </g>
@@ -465,20 +333,13 @@ export const Plus: React.FC<IconProps> = ({
   );
 };
 
-export const Minus: React.FC<IconProps> = ({
-  theme,
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const Minus: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
@@ -493,180 +354,150 @@ export const Minus: React.FC<IconProps> = ({
   );
 };
 
-export const Eye: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const Eye: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 20 20"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M12.9833 10C12.9833 11.65 11.65 12.9833 10 12.9833C8.35 12.9833 7.01666 11.65 7.01666 10C7.01666 8.35 8.35 7.01666 10 7.01666C11.65 7.01666 12.9833 8.35 12.9833 10Z"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
       <path
         d="M9.99999 16.8916C12.9417 16.8916 15.6833 15.1583 17.5917 12.1583C18.3417 10.9833 18.3417 9.00831 17.5917 7.83331C15.6833 4.83331 12.9417 3.09998 9.99999 3.09998C7.05833 3.09998 4.31666 4.83331 2.40833 7.83331C1.65833 9.00831 1.65833 10.9833 2.40833 12.1583C4.31666 15.1583 7.05833 16.8916 9.99999 16.8916Z"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
     </svg>
   );
 };
 
-export const Edit: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const Edit: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 20 20"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M11.05 3.00002L4.20835 10.2417C3.95002 10.5167 3.70002 11.0584 3.65002 11.4334L3.34169 14.1334C3.23335 15.1084 3.93335 15.775 4.90002 15.6084L7.58335 15.15C7.95835 15.0834 8.48335 14.8084 8.74168 14.525L15.5834 7.28335C16.7667 6.03335 17.3 4.60835 15.4583 2.86668C13.625 1.14168 12.2334 1.75002 11.05 3.00002Z"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M9.90833 4.20831C10.2667 6.50831 12.1333 8.26665 14.45 8.49998"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M2.5 18.3333H17.5"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
     </svg>
   );
 };
 
-export const Delete: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const Delete: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 20 20"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M17.5 4.98332C14.725 4.70832 11.9333 4.56665 9.15 4.56665C7.5 4.56665 5.85 4.64998 4.2 4.81665L2.5 4.98332"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
       <path
         d="M7.08331 4.14169L7.26665 3.05002C7.39998 2.25835 7.49998 1.66669 8.90831 1.66669H11.0916C12.5 1.66669 12.6083 2.29169 12.7333 3.05835L12.9166 4.14169"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
       <path
         d="M15.7084 7.61664L15.1667 16.0083C15.075 17.3166 15 18.3333 12.675 18.3333H7.32502C5.00002 18.3333 4.92502 17.3166 4.83335 16.0083L4.29169 7.61664"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
       <path
         d="M8.60834 13.75H11.3833"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
       <path
         d="M7.91669 10.4167H12.0834"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
     </svg>
   );
 };
 
-export const ChevronDown: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const ChevronDown: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
     </svg>
   );
 };
 
-export const ChevronDownBold: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const ChevronDownBold: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
@@ -678,101 +509,89 @@ export const ChevronDownBold: React.FC<IconProps> = ({
   );
 };
 
-export const NewFile: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const NewFile: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M8 2V5"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M16 2V5"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M21 8.5V13.63C20.11 12.92 18.98 12.5 17.75 12.5C16.52 12.5 15.37 12.93 14.47 13.66C13.26 14.61 12.5 16.1 12.5 17.75C12.5 18.73 12.78 19.67 13.26 20.45C13.63 21.06 14.11 21.59 14.68 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M7 11H13"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M7 16H9.62"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M23 17.75C23 18.73 22.72 19.67 22.24 20.45C21.96 20.93 21.61 21.35 21.2 21.69C20.28 22.51 19.08 23 17.75 23C16.6 23 15.54 22.63 14.68 22C14.11 21.59 13.63 21.06 13.26 20.45C12.78 19.67 12.5 18.73 12.5 17.75C12.5 16.1 13.26 14.61 14.47 13.66C15.37 12.93 16.52 12.5 17.75 12.5C18.98 12.5 20.11 12.92 21 13.63C22.22 14.59 23 16.08 23 17.75Z"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M17.75 20.25C17.75 18.87 18.87 17.75 20.25 17.75C18.87 17.75 17.75 16.63 17.75 15.25C17.75 16.63 16.63 17.75 15.25 17.75C16.63 17.75 17.75 18.87 17.75 20.25Z"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
     </svg>
   );
 };
 
-export const AddNoteBulk: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const AddNoteBulk: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        opacity={0.4}
         d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
         fill={fill}
+        opacity={0.4}
       />
       <path
         d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
@@ -782,26 +601,20 @@ export const AddNoteBulk: React.FC<IconProps> = ({
   );
 };
 
-export const CopyDocumentBulk: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const CopyDocumentBulk: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        opacity={0.4}
         d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
         fill={fill}
+        opacity={0.4}
       />
       <path
         d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
@@ -815,26 +628,20 @@ export const CopyDocumentBulk: React.FC<IconProps> = ({
   );
 };
 
-export const EditDocumentBulk: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const EditDocumentBulk: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        opacity={0.4}
         d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
         fill={fill}
+        opacity={0.4}
       />
       <path
         d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
@@ -844,19 +651,13 @@ export const EditDocumentBulk: React.FC<IconProps> = ({
   );
 };
 
-export const DeleteDocumentBulk: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
+export const DeleteDocumentBulk: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
@@ -865,15 +666,15 @@ export const DeleteDocumentBulk: React.FC<IconProps> = ({
         fill={fill}
       />
       <path
-        opacity={0.399}
         d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
         fill={fill}
+        opacity={0.399}
       />
       <path
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
         fill={fill}
+        fillRule="evenodd"
       />
     </svg>
   );
diff --git a/packages/react/src/utils/numbers.ts b/packages/react/src/utils/numbers.ts
index 6f857089a4..dc3e4c1134 100644
--- a/packages/react/src/utils/numbers.ts
+++ b/packages/react/src/utils/numbers.ts
@@ -11,5 +11,6 @@ export function valueToPercent(value: number, min: number, max: number) {
 
 export function range(start: number, end: number) {
   const length = end - start + 1;
-  return Array.from({ length }, (_, index) => index + start);
+
+  return Array.from({length}, (_, index) => index + start);
 }
diff --git a/packages/react/src/utils/object.ts b/packages/react/src/utils/object.ts
index dbbae4bb09..1772a90c4c 100644
--- a/packages/react/src/utils/object.ts
+++ b/packages/react/src/utils/object.ts
@@ -1,34 +1,32 @@
-import { Key } from 'react';
+import {Key} from "react";
 
-export const isObject = (target: unknown) =>
-  target && typeof target === 'object';
+export const isObject = (target: unknown) => target && typeof target === "object";
 
 export interface MergeObject {
   [key: string]: any;
 }
 
-export const renameProp = (
-  oldProp: string,
-  newProp: string,
-  { [oldProp]: old, ...others }
-) => ({
+export const renameProp = (oldProp: string, newProp: string, {[oldProp]: old, ...others}) => ({
   [newProp]: old,
-  ...others
+  ...others,
 });
 
 // copy an object without reference
 export const copyObject = (obj: any) => {
   if (!isObject(obj)) return obj;
   if (obj instanceof Array) return [...obj];
-  return { ...obj };
+
+  return {...obj};
 };
 
 // copy an object omit some keys
 export const omitObject = (obj: any, omitKeys: string[]) => {
   if (!isObject(obj)) return obj;
   if (obj instanceof Array) return [...obj];
-  const newObj = { ...obj };
+  const newObj = {...obj};
+
   omitKeys.forEach((key) => newObj[key] && delete newObj[key]);
+
   return newObj;
 };
 
@@ -36,29 +34,34 @@ export const omitObject = (obj: any, omitKeys: string[]) => {
 export const cleanObject = (obj: any) => {
   if (!isObject(obj)) return obj;
   if (obj instanceof Array) return [...obj];
-  const newObj = { ...obj };
+  const newObj = {...obj};
+
   Object.keys(newObj).forEach((key) => {
     if (newObj[key] === undefined || newObj[key] === null) {
       delete newObj[key];
     }
   });
+
   return newObj;
 };
 
 export const cleanObjectKeys = (obj: any, keys: string[] = []) => {
   if (!isObject(obj)) return obj;
   if (obj instanceof Array) return [...obj];
-  const newObj = { ...obj };
+  const newObj = {...obj};
+
   keys.forEach((key) => {
     if (newObj[key]) {
       delete newObj[key];
     }
   });
+
   return newObj;
 };
 
 export const getKeyValue = (obj: any, key: Key) => {
   if (!isObject(obj)) return obj;
   if (obj instanceof Array) return [...obj];
+
   return obj[key];
 };
diff --git a/packages/react/src/utils/prop-types.ts b/packages/react/src/utils/prop-types.ts
index 3fa20d4b87..e02d668d44 100644
--- a/packages/react/src/utils/prop-types.ts
+++ b/packages/react/src/utils/prop-types.ts
@@ -1,234 +1,209 @@
-import { ElementType } from 'react';
+import {ElementType} from "react";
 
 export const tuple = <T extends string[]>(...args: T) => args;
 
-const normalSizes = tuple('xs', 'sm', 'md', 'lg', 'xl');
+const normalSizes = tuple("xs", "sm", "md", "lg", "xl");
 
 export const normalColors = tuple(
-  'default',
-  'primary',
-  'secondary',
-  'success',
-  'warning',
-  'error',
-  'gradient'
+  "default",
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "error",
+  "gradient",
 );
 
-export const simpleColors = tuple(
-  'default',
-  'primary',
-  'secondary',
-  'success',
-  'warning',
-  'error'
-);
+export const simpleColors = tuple("default", "primary", "secondary", "success", "warning", "error");
 
 export const extendedColors = tuple(
-  'default',
-  'primary',
-  'secondary',
-  'success',
-  'warning',
-  'error',
-  'invert',
-  'gradient'
+  "default",
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "error",
+  "invert",
+  "gradient",
 );
 
 export const extendedColorsNoGradient = tuple(
-  'default',
-  'primary',
-  'secondary',
-  'success',
-  'warning',
-  'error',
-  'invert'
+  "default",
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "error",
+  "invert",
 );
 
 export const extraColors = tuple(
-  'default',
-  'primary',
-  'secondary',
-  'success',
-  'warning',
-  'error',
-  'dark',
-  'lite',
-  'alert',
-  'purple',
-  'violet',
-  'gradient',
-  'cyan'
+  "default",
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "error",
+  "dark",
+  "lite",
+  "alert",
+  "purple",
+  "violet",
+  "gradient",
+  "cyan",
 );
 
-export const normalLoaders = tuple(
-  'default',
-  'points',
-  'points-opacity',
-  'gradient',
-  'spinner'
-);
+export const normalLoaders = tuple("default", "points", "points-opacity", "gradient", "spinner");
 
-export const normalWeights = tuple(
-  'light',
-  'normal',
-  'bold',
-  'extrabold',
-  'black'
-);
+export const normalWeights = tuple("light", "normal", "bold", "extrabold", "black");
 
 export const textWeights = tuple(
   /* Keyword values */
-  'normal',
-  'bold',
+  "normal",
+  "bold",
   /* Keyword values relative to the parent */
-  'lighter',
-  'bolder',
+  "lighter",
+  "bolder",
   /* Global values */
-  'inherit',
-  'initial',
-  'revert',
-  'unset'
+  "inherit",
+  "initial",
+  "revert",
+  "unset",
 );
 
 export const textTransforms = tuple(
   /* Keyword values */
-  'none',
-  'capitalize',
-  'uppercase',
-  'lowercase',
-  'full-width',
-  'full-size-kana',
+  "none",
+  "capitalize",
+  "uppercase",
+  "lowercase",
+  "full-width",
+  "full-size-kana",
   /* Global values */
-  'inherit',
-  'initial',
-  'revert',
-  'unset'
+  "inherit",
+  "initial",
+  "revert",
+  "unset",
 );
 
-const copyTypes = tuple('default', 'slient', 'prevent');
+const copyTypes = tuple("default", "slient", "prevent");
 
-const triggerTypes = tuple('hover', 'click');
+const triggerTypes = tuple("hover", "click");
 
 const placement = tuple(
-  'top',
-  'topStart',
-  'topEnd',
-  'left',
-  'leftStart',
-  'leftEnd',
-  'bottom',
-  'bottomStart',
-  'bottomEnd',
-  'right',
-  'rightStart',
-  'rightEnd'
+  "top",
+  "topStart",
+  "topEnd",
+  "left",
+  "leftStart",
+  "leftEnd",
+  "bottom",
+  "bottomStart",
+  "bottomEnd",
+  "right",
+  "rightStart",
+  "rightEnd",
 );
 
 const position = tuple(
-  'static',
-  'relative',
-  'absolute',
-  'fixed',
-  'sticky',
+  "static",
+  "relative",
+  "absolute",
+  "fixed",
+  "sticky",
   /* Global values */
-  'inherit',
-  'initial',
-  'revert',
-  'unset'
+  "inherit",
+  "initial",
+  "revert",
+  "unset",
 );
 
 const objectFit = tuple(
-  'contain',
-  'cover',
-  'fill',
-  'none',
-  'scale-down',
+  "contain",
+  "cover",
+  "fill",
+  "none",
+  "scale-down",
   /* Global values */
-  'inherit',
-  'initial',
-  'revert',
-  'unset'
+  "inherit",
+  "initial",
+  "revert",
+  "unset",
 );
 
-const dividerAlign = tuple('start', 'center', 'end', 'left', 'right');
+const dividerAlign = tuple("start", "center", "end", "left", "right");
 
 const justify = tuple(
-  'flex-start',
-  'center',
-  'flex-end',
-  'space-between',
-  'space-around',
-  'space-evenly'
+  "flex-start",
+  "center",
+  "flex-end",
+  "space-between",
+  "space-around",
+  "space-evenly",
 );
 
-const alignItems = tuple(
-  'flex-start',
-  'flex-end',
-  'center',
-  'stretch',
-  'baseline'
-);
+const alignItems = tuple("flex-start", "flex-end", "center", "stretch", "baseline");
 
 const alignContent = tuple(
-  'stretch',
-  'center',
-  'flex-start',
-  'flex-end',
-  'space-between',
-  'space-around'
+  "stretch",
+  "center",
+  "flex-start",
+  "flex-end",
+  "space-between",
+  "space-around",
 );
 
-const direction = tuple('row', 'row-reverse', 'column', 'column-reverse');
+const direction = tuple("row", "row-reverse", "column", "column-reverse");
 
-const wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
+const wrap = tuple("nowrap", "wrap", "wrap-reverse");
 
 const display = tuple(
-  'flex',
-  'block',
-  'grid',
-  'inline',
-  'inline-block',
-  'inline-flex',
-  'inline-grid'
+  "flex",
+  "block",
+  "grid",
+  "inline",
+  "inline-block",
+  "inline-flex",
+  "inline-grid",
 );
 
-const contentPosition = tuple('left', 'right');
+const contentPosition = tuple("left", "right");
 
-const normalAlignments = tuple('start', 'center', 'end');
+const normalAlignments = tuple("start", "center", "end");
 
 export const excludedInputPropsForTextarea = tuple(
-  'clearable',
-  'as',
-  'rounded',
-  'labelLeft',
-  'labelRight',
-  'contentLeft',
-  'contentRight',
-  'contentClickable',
-  'contentLeftStyling',
-  'contentRightStyling',
-  'onContentClick',
-  'onClearClick',
-  'css'
+  "clearable",
+  "as",
+  "rounded",
+  "labelLeft",
+  "labelRight",
+  "contentLeft",
+  "contentRight",
+  "contentClickable",
+  "contentLeftStyling",
+  "contentRightStyling",
+  "onContentClick",
+  "onClearClick",
+  "css",
 );
 
 export const excludedTableProps = tuple(
-  'items',
-  'disabledKeys',
-  'allowDuplicateSelectionEvents',
-  'disallowEmptySelection',
-  'defaultSelectedKeys',
-  'sortDescriptor',
-  'onSortChange'
+  "items",
+  "disabledKeys",
+  "allowDuplicateSelectionEvents",
+  "disallowEmptySelection",
+  "defaultSelectedKeys",
+  "sortDescriptor",
+  "onSortChange",
 );
 
-const selectionBehavior = tuple('toggle', 'replace');
+const selectionBehavior = tuple("toggle", "replace");
 
-const selectionMode = tuple('none', 'single', 'multiple');
+const selectionMode = tuple("none", "single", "multiple");
 
-const dropdownVariants = tuple('flat', 'light', 'solid', 'shadow');
+const dropdownVariants = tuple("flat", "light", "solid", "shadow");
 
-const cardVariants = tuple('flat', 'bordered', 'shadow');
+const cardVariants = tuple("flat", "bordered", "shadow");
 
 export type Display = typeof display[number];
 
diff --git a/packages/react/src/utils/react.ts b/packages/react/src/utils/react.ts
index 4b0ebb3a74..d4ab834753 100644
--- a/packages/react/src/utils/react.ts
+++ b/packages/react/src/utils/react.ts
@@ -1,16 +1,17 @@
-import * as React from 'react';
+import * as React from "react";
 
 export function getValidChildren(children: React.ReactNode) {
   return React.Children.toArray(children).filter((child) =>
-    React.isValidElement(child)
+    React.isValidElement(child),
   ) as React.ReactElement[];
 }
 
 export function addChildrenClass(children: React.ReactNode, className: string) {
   const validChildren = getValidChildren(children);
+
   return validChildren.map((child) => {
     return React.cloneElement(child, {
-      className: `${child.props.className} ${className}`
+      className: `${child.props.className} ${className}`,
     });
   });
 }
diff --git a/packages/react/src/utils/refs.ts b/packages/react/src/utils/refs.ts
index e218a48f35..6e964f04a9 100644
--- a/packages/react/src/utils/refs.ts
+++ b/packages/react/src/utils/refs.ts
@@ -1,10 +1,8 @@
-import * as React from 'react';
-import { isFunction } from './assertion';
+import * as React from "react";
 
-export type ReactRef<T> =
-  | React.Ref<T>
-  | React.RefObject<T>
-  | React.MutableRefObject<T>;
+import {isFunction} from "./assertion";
+
+export type ReactRef<T> = React.Ref<T> | React.RefObject<T> | React.MutableRefObject<T>;
 
 /**
  * Assigns a value to a ref function or object
@@ -17,6 +15,7 @@ export function assignRef<T = any>(ref: ReactRef<T> | undefined, value: T) {
 
   if (isFunction(ref)) {
     ref(value);
+
     return;
   }
 
diff --git a/packages/react/src/utils/strings.ts b/packages/react/src/utils/strings.ts
index 832fd8b8da..7672c2c007 100644
--- a/packages/react/src/utils/strings.ts
+++ b/packages/react/src/utils/strings.ts
@@ -1,7 +1,7 @@
 export const kebabCase = (text: string) => {
   return text
-    ?.replace?.(/([a-z])([A-Z])/g, '$1-$2')
-    ?.replace?.(/\s+/g, '-')
+    ?.replace?.(/([a-z])([A-Z])/g, "$1-$2")
+    ?.replace?.(/\s+/g, "-")
     .toLowerCase?.();
 };
 
diff --git a/packages/react/src/utils/with-defaults.ts b/packages/react/src/utils/with-defaults.ts
index 3ef56b7b4e..b91d13130c 100644
--- a/packages/react/src/utils/with-defaults.ts
+++ b/packages/react/src/utils/with-defaults.ts
@@ -1,11 +1,9 @@
-import React from 'react';
+import React from "react";
 
-const withDefaults = <P, DP>(
-  component: React.ComponentType<P>,
-  defaultProps: DP
-) => {
+const withDefaults = <P, DP>(component: React.ComponentType<P>, defaultProps: DP) => {
   type Props = Partial<DP> & Omit<P, keyof DP>;
   component.defaultProps = defaultProps;
+
   return component as React.ComponentType<Props>;
 };
 
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..162b53870c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.base.json",
+}
diff --git a/yarn.lock b/yarn.lock
index d79fc46f5f..47c2e100b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9338,7 +9338,7 @@ eslint-loader@^4.0.2:
     object-hash "^2.0.3"
     schema-utils "^2.6.5"
 
-eslint-module-utils@^2.7.2:
+eslint-module-utils@^2.7.2, eslint-module-utils@^2.7.3:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
   integrity sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==
@@ -9346,6 +9346,14 @@ eslint-module-utils@^2.7.2:
     debug "^3.2.7"
     find-up "^2.1.0"
 
+eslint-plugin-es@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz#75a7cdfdccddc0589934aeeb384175f221c57893"
+  integrity sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==
+  dependencies:
+    eslint-utils "^2.0.0"
+    regexpp "^3.0.0"
+
 eslint-plugin-flowtype@^5.7.1:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.10.0.tgz#7764cc63940f215bf3f0bd2d9a1293b2b9b2b4bb"
@@ -9354,7 +9362,7 @@ eslint-plugin-flowtype@^5.7.1:
     lodash "^4.17.15"
     string-natural-compare "^3.0.1"
 
-eslint-plugin-import@^2.22.1, eslint-plugin-import@^2.23.4:
+eslint-plugin-import@^2.22.1:
   version "2.25.4"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz#322f3f916a4e9e991ac7af32032c25ce313209f1"
   integrity sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==
@@ -9373,6 +9381,25 @@ eslint-plugin-import@^2.22.1, eslint-plugin-import@^2.23.4:
     resolve "^1.20.0"
     tsconfig-paths "^3.12.0"
 
+eslint-plugin-import@^2.26.0:
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
+  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
+  dependencies:
+    array-includes "^3.1.4"
+    array.prototype.flat "^1.2.5"
+    debug "^2.6.9"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-module-utils "^2.7.3"
+    has "^1.0.3"
+    is-core-module "^2.8.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.values "^1.1.5"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
+
 eslint-plugin-jest@^24.3.6:
   version "24.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.7.0.tgz#206ac0833841e59e375170b15f8d0955219c4889"
@@ -9398,6 +9425,18 @@ eslint-plugin-jsx-a11y@^6.4.1:
     language-tags "^1.0.5"
     minimatch "^3.0.4"
 
+eslint-plugin-node@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz#c95544416ee4ada26740a30474eefc5402dc671d"
+  integrity sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==
+  dependencies:
+    eslint-plugin-es "^3.0.0"
+    eslint-utils "^2.0.0"
+    ignore "^5.1.1"
+    minimatch "^3.0.4"
+    resolve "^1.10.1"
+    semver "^6.1.0"
+
 eslint-plugin-prettier@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
@@ -9405,11 +9444,21 @@ eslint-plugin-prettier@^4.0.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-plugin-promise@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.0.0.tgz#017652c07c9816413a41e11c30adc42c3d55ff18"
+  integrity sha512-7GPezalm5Bfi/E22PnQxDWH2iW9GTvAlUNTztemeHb6c1BniSyoeTrM87JkC0wYdi6aQrZX9p2qEiAno8aTcbw==
+
 eslint-plugin-react-hooks@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
   integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
 
+eslint-plugin-react-hooks@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
 eslint-plugin-react@^7.23.1, eslint-plugin-react@^7.23.2, eslint-plugin-react@^7.24.0:
   version "7.29.4"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz#4717de5227f55f3801a5fd51a16a4fa22b5914d2"
@@ -11326,7 +11375,7 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-ignore@^5.1.2, ignore@^5.1.8, ignore@^5.2.0:
+ignore@^5.1.1, ignore@^5.1.2, ignore@^5.1.8, ignore@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
@@ -11615,6 +11664,13 @@ is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.8.0, is-core-mod
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
+  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
+  dependencies:
+    has "^1.0.3"
+
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -16123,7 +16179,7 @@ regexpp@^2.0.1:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
   integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
 
-regexpp@^3.1.0:
+regexpp@^3.0.0, regexpp@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
@@ -16466,6 +16522,15 @@ resolve@^1.1.6, resolve@^1.10.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.18
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.10.1:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
@@ -16718,7 +16783,7 @@ semver@7.x, semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^
   dependencies:
     lru-cache "^6.0.0"
 
-semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
+semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==

From 5f1c7bb5dea81b3c506e213ecf584f8cde51ecab Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 19 Jun 2022 12:39:27 -0300
Subject: [PATCH 005/106] chore(react-hooks): use warning removed

---
 packages/react/src/use-warning/index.ts       |  3 ---
 packages/react/src/use-warning/use-warning.ts | 17 -----------------
 2 files changed, 20 deletions(-)
 delete mode 100644 packages/react/src/use-warning/index.ts
 delete mode 100644 packages/react/src/use-warning/use-warning.ts

diff --git a/packages/react/src/use-warning/index.ts b/packages/react/src/use-warning/index.ts
deleted file mode 100644
index 75ba1ace47..0000000000
--- a/packages/react/src/use-warning/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import useWarning from "./use-warning";
-
-export default useWarning;
diff --git a/packages/react/src/use-warning/use-warning.ts b/packages/react/src/use-warning/use-warning.ts
deleted file mode 100644
index 287622b20f..0000000000
--- a/packages/react/src/use-warning/use-warning.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-const warningStack: {[key: string]: boolean} = {};
-
-const useWarning = (message: string, component?: string) => {
-  const tag = component ? ` [${component}]` : " ";
-  const log = `[Next UI]${tag}: ${message}`;
-
-  if (typeof console === "undefined") return;
-  if (warningStack[log]) return;
-  warningStack[log] = true;
-
-  if (process.env.NODE_ENV !== "production") {
-    return console.error(log);
-  }
-  console.warn(log);
-};
-
-export default useWarning;

From 22063859660eb220742de4e54228eb0edb4eca1a Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 19 Jun 2022 17:32:11 -0300
Subject: [PATCH 006/106] refactor(root): new eslint config implemented on
 react package

---
 .editorconfig                                 | 25 ++--------
 .eslintrc.json                                | 45 +++++++++++++-----
 .prettierignore                               | 12 -----
 .prettierrc                                   | 10 ----
 .vscode/settings.json                         | 12 ++++-
 packages/react/.eslintrc.json                 | 47 +++++++++----------
 .../__snapshots__/index.test.tsx.snap         | 24 +++++++---
 packages/react/src/backdrop/backdrop.tsx      |  1 -
 .../__snapshots__/group.test.tsx.snap         | 16 +++++--
 .../__snapshots__/icon.test.tsx.snap          | 12 +++--
 packages/react/src/button/button-group.tsx    |  1 -
 .../react/src/collapse/collapse-group.tsx     |  1 -
 packages/react/src/collapse/collapse.tsx      |  2 -
 .../__snapshots__/index.test.tsx.snap         | 24 +++++++---
 .../__snapshots__/index.test.tsx.snap         | 16 +++++--
 .../__snapshots__/password.test.tsx.snap      |  4 +-
 .../__snapshots__/index.test.tsx.snap         |  4 +-
 .../__snapshots__/index.test.tsx.snap         | 20 ++++++--
 .../__snapshots__/pagination.test.tsx.snap    |  4 +-
 .../__snapshots__/index.test.tsx.snap         | 16 +++++--
 .../__snapshots__/index.test.tsx.snap         | 20 ++++++--
 .../__snapshots__/index.test.tsx.snap         | 16 +++++--
 .../__snapshots__/index.test.tsx.snap         | 28 ++++++++---
 .../__snapshots__/index.test.tsx.snap         |  8 +++-
 packages/react/src/table/table.stories.tsx    | 18 +++++--
 .../__snapshots__/index.test.tsx.snap         | 28 ++++++++---
 .../__snapshots__/index.test.tsx.snap         |  8 +++-
 .../react/src/textarea/textarea.stories.tsx   |  3 +-
 .../react/src/tooltip/tooltip-content.tsx     |  1 -
 .../src/use-body-scroll/use-body-scroll.ts    |  1 -
 .../react/src/use-clipboard/use-clipboard.ts  |  1 -
 .../use-input/__tests__/use-input.test.tsx    |  1 -
 packages/react/src/utils/drip.tsx             | 10 ++--
 packages/react/src/utils/types.d.ts           |  6 +--
 34 files changed, 278 insertions(+), 167 deletions(-)
 delete mode 100644 .prettierignore
 delete mode 100644 .prettierrc

diff --git a/.editorconfig b/.editorconfig
index fec26ab1f1..0e2c3142ad 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,28 +1,9 @@
 root = true
 
-[*.js]
-[*.jsx]
-[*.ts]
-[*.tsx]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
+[*]
 insert_final_newline = true
-
-[*.json]
-indent_style = space
-indent_size = 2
-end_of_line = lf
 charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = false
-
-[*.md]
 indent_style = space
 indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = false
-insert_final_newline = false
+trim_trailing_whitespace = true
+max_line_length = 80
diff --git a/.eslintrc.json b/.eslintrc.json
index 3290ff3edc..f18a0b1182 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -29,6 +29,7 @@
     "react/prop-types": "off",
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
+    "react-hooks/exhaustive-deps": "off",
     "prettier/prettier": [
       "warn",
       {
@@ -39,7 +40,7 @@
         "singleQuote": false,
         "bracketSpacing": false,
         "arrowParens": "always",
-        "endOfLine":"auto"
+        "endOfLine": "auto"
       }
     ],
     "@typescript-eslint/no-unused-vars": [
@@ -50,15 +51,29 @@
         "argsIgnorePattern": "^_.*?$"
       }
     ],
-    "import/order": ["warn", {
-      "groups": ["type", "builtin", "object", "external", "internal", "parent", "sibling", "index"],
-      "pathGroups": [{
-        "pattern": "~/**",
-        "group": "external",
-        "position": "after"
-      }],
-      "newlines-between": "always"
-    }],
+    "import/order": [
+      "warn",
+      {
+        "groups": [
+          "type",
+          "builtin",
+          "object",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "~/**",
+            "group": "external",
+            "position": "after"
+          }
+        ],
+        "newlines-between": "always"
+      }
+    ],
     "react/self-closing-comp": "warn",
     "react/jsx-sort-props": [
       "warn",
@@ -71,9 +86,13 @@
     ],
     "padding-line-between-statements": [
       "warn",
-      {"blankLine": "always", "prev": "*", "next": "return"},
-      {"blankLine": "always", "prev": ["const", "let", "var"], "next": "*"},
-      {"blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"]}
+      { "blankLine": "always", "prev": "*", "next": "return" },
+      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
+      {
+        "blankLine": "any",
+        "prev": ["const", "let", "var"],
+        "next": ["const", "let", "var"]
+      }
     ]
   }
 }
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index 77fe8faf27..0000000000
--- a/.prettierignore
+++ /dev/null
@@ -1,12 +0,0 @@
-.github
-.next
-.now
-.circleci
-dist
-coverage
-public
-esm
-*.json
-*.d.ts
-*.yml
-*.snap
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index b33506fafc..0000000000
--- a/.prettierrc
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "printWidth": 100,
-  "trailingComma": "all",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": false,
-  "bracketSpacing": false,
-  "arrowParens": "always",
-  "endOfLine": "auto"
-}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6cdb059bdc..f3eff70e4d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,14 @@
 {
-  "eslint.workingDirectories": ["./apps/docs", "./packages/react", "./packages/storybook"],
+  "eslint.workingDirectories": [
+    "./apps/docs",
+    "./packages/react",
+    "./packages/storybook"
+  ],
   "editor.tabSize": 2,
   "editor.insertSpaces": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }
diff --git a/packages/react/.eslintrc.json b/packages/react/.eslintrc.json
index b01e7cf7f6..54c13bf0a2 100644
--- a/packages/react/.eslintrc.json
+++ b/packages/react/.eslintrc.json
@@ -1,27 +1,26 @@
 {
-    "extends": ["../../.eslintrc.json"],
-    "ignorePatterns": ["!**/*"],
-    "overrides": [
-      {
-        "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-        "parserOptions": {
-          "project": ["./tsconfig.json"],
-          "ecmaFeatures": {
-            "jsx": true
-          }
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "parserOptions": {
+        "project": ["./tsconfig.json"],
+        "ecmaFeatures": {
+          "jsx": true
         }
-      },
-      {
-        "files": ["*.ts", "*.tsx"],
-        "rules": {
-            "react/jsx-uses-react": "off",
-            "react/react-in-jsx-scope": "off"
-        }
-      },
-      {
-        "files": ["*.js", "*.jsx"],
-        "rules": {}
       }
-    ]
-  }
-  
\ No newline at end of file
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "react/jsx-uses-react": "off",
+        "react/react-in-jsx-scope": "off"
+      }
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
index 38c1e2b730..d194501ed3 100644
--- a/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
@@ -136,7 +136,9 @@ LoadedCheerio {
 }
 `;
 
-exports[`Avatar should render correctly with an icon 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span><span class=\\"nextui-avatar-icon\\"><svg class=\\"\\"></svg></span></span>"`;
+exports[
+  `Avatar should render correctly with an icon 1`
+] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span><span class=\\"nextui-avatar-icon\\"><svg class=\\"\\"></svg></span></span>"`;
 
 exports[`Avatar should render text element 1`] = `
 LoadedCheerio {
@@ -478,12 +480,22 @@ LoadedCheerio {
 }
 `;
 
-exports[`Avatar should work correctly with different sizes 1`] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-jROyhw-size-xs nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-bHlgBq-size-sm nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-lmZTtQ-size-lg nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-dVCMrw-size-xl nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
+exports[
+  `Avatar should work correctly with different sizes 1`
+] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-jROyhw-size-xs nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-bHlgBq-size-sm nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-lmZTtQ-size-lg nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-dVCMrw-size-xl nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
 
-exports[`Avatar should work with a gradient color 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-lcNuyd-color-gradient nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[
+  `Avatar should work with a gradient color 1`
+] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-lcNuyd-color-gradient nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
 
-exports[`Avatar should work with different colors 1`] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eeabkr-color-primary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-jzyGMN-color-secondary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-fJMMFA-color-success nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eCIbjl-color-warning nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-gYTGZH-color-error nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
+exports[
+  `Avatar should work with different colors 1`
+] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eeabkr-color-primary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-jzyGMN-color-secondary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-fJMMFA-color-success nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eCIbjl-color-warning nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-gYTGZH-color-error nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
 
-exports[`Avatar should work with pointer 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-gsmDXe-pointer-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[
+  `Avatar should work with pointer 1`
+] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-gsmDXe-pointer-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
 
-exports[`Avatar should work with zoomed 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-OUZAS-zoomed-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[
+  `Avatar should work with zoomed 1`
+] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-OUZAS-zoomed-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
diff --git a/packages/react/src/backdrop/backdrop.tsx b/packages/react/src/backdrop/backdrop.tsx
index 6b47796c39..1358ced208 100644
--- a/packages/react/src/backdrop/backdrop.tsx
+++ b/packages/react/src/backdrop/backdrop.tsx
@@ -130,7 +130,6 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
           </StyledBackdropContent>
         </StyledBackdrop>
       );
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [children]);
 
     return (
diff --git a/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
index 0422207b91..8d0a39b7b1 100644
--- a/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
@@ -1,12 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ButtonGroup buttons should be displayed vertically 1`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-gwxfIo-vertical-true nextui-c-UqICV-gimGqK-size-md\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action1</span></button><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action2</span></button></div>"`;
+exports[
+  `ButtonGroup buttons should be displayed vertically 1`
+] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-gwxfIo-vertical-true nextui-c-UqICV-gimGqK-size-md\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action1</span></button><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action2</span></button></div>"`;
 
-exports[`ButtonGroup props should be passed to each button 1`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-iAoIqM-size-xs\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[
+  `ButtonGroup props should be passed to each button 1`
+] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-iAoIqM-size-xs\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
-exports[`ButtonGroup props should be passed to each button 2`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-iAoIqM-size-xs\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-cyFBRX-flat-true nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-iWjDFM-gmvfdi-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[
+  `ButtonGroup props should be passed to each button 2`
+] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-iAoIqM-size-xs\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-cyFBRX-flat-true nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-iWjDFM-gmvfdi-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
-exports[`ButtonGroup should render correctly 1`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-gimGqK-size-md\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[
+  `ButtonGroup should render correctly 1`
+] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-gimGqK-size-md\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
 exports[`ButtonGroup should render different variants 1`] = `ReactWrapper {}`;
 
diff --git a/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap b/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
index 9ff43ec312..894b9f6bd7 100644
--- a/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
+++ b/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ButtonIcon should render correctly 1`] = `"<button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-iPJLV-css nextui-button-icon\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-left\\">action</div></button>"`;
+exports[
+  `ButtonIcon should render correctly 1`
+] = `"<button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-iPJLV-css nextui-button-icon\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-left\\">action</div></button>"`;
 
-exports[`ButtonIcon should work with right 1`] = `"<button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-right\\">action</div></button>"`;
+exports[
+  `ButtonIcon should work with right 1`
+] = `"<button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-right\\">action</div></button>"`;
 
-exports[`ButtonIcon should work without text 1`] = `"<button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-bQrkqa-isChildLess-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iyYGWO-isSingle-true nextui-c-bDGMeb-bVsTEo-cv nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right nextui-button-icon-single\\"><svg></svg></span></button>"`;
+exports[
+  `ButtonIcon should work without text 1`
+] = `"<button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-bQrkqa-isChildLess-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iyYGWO-isSingle-true nextui-c-bDGMeb-bVsTEo-cv nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right nextui-button-icon-single\\"><svg></svg></span></button>"`;
diff --git a/packages/react/src/button/button-group.tsx b/packages/react/src/button/button-group.tsx
index f646e3b20e..b8ea2f045a 100644
--- a/packages/react/src/button/button-group.tsx
+++ b/packages/react/src/button/button-group.tsx
@@ -72,7 +72,6 @@ const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = (groupP
       ripple,
       isButtonGroup: true,
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [disabled, animated, size, ripple, color, bordered, light, ghost, flat, borderWeight],
   );
 
diff --git a/packages/react/src/collapse/collapse-group.tsx b/packages/react/src/collapse/collapse-group.tsx
index a586350c82..ed3d61354d 100644
--- a/packages/react/src/collapse/collapse-group.tsx
+++ b/packages/react/src/collapse/collapse-group.tsx
@@ -62,7 +62,6 @@ const CollapseGroup: React.FC<React.PropsWithChildren<CollapseGroupProps>> = ({
       divider,
       animated,
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.join(",")],
   );
 
diff --git a/packages/react/src/collapse/collapse.tsx b/packages/react/src/collapse/collapse.tsx
index cc41c1e31c..30589670af 100644
--- a/packages/react/src/collapse/collapse.tsx
+++ b/packages/react/src/collapse/collapse.tsx
@@ -107,7 +107,6 @@ const Collapse: React.FC<React.PropsWithChildren<CollapseProps>> = ({
     if (visible !== expanded) {
       setVisible(expanded);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [expanded]);
 
   useEffect(() => {
@@ -115,7 +114,6 @@ const Collapse: React.FC<React.PropsWithChildren<CollapseProps>> = ({
     const isActive = !!values.find((item) => item === index);
 
     setVisible(isActive);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [values.join(",")]);
 
   const ariaLabelledById = useId();
diff --git a/packages/react/src/grid/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/grid/__tests__/__snapshots__/index.test.tsx.snap
index db677fd49b..c7a28519a8 100644
--- a/packages/react/src/grid/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/grid/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,13 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Grid all breakpoint values should be supported 1`] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-icgwmtB-css nextui-grid-item xs sm md lg xl nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-iddATLy-css nextui-grid-item xs sm md lg xl\\">test</div></div>"`;
+exports[
+  `Grid all breakpoint values should be supported 1`
+] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-icgwmtB-css nextui-grid-item xs sm md lg xl nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-iddATLy-css nextui-grid-item xs sm md lg xl\\">test</div></div>"`;
 
-exports[`Grid css value should be passed through 1`] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ibomLZK-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-idTBjfx-css nextui-grid-item\\">test</div></div>"`;
+exports[
+  `Grid css value should be passed through 1`
+] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ibomLZK-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-idTBjfx-css nextui-grid-item\\">test</div></div>"`;
 
-exports[`Grid decimal spacing should be supported 1`] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ikiOHGz-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div></div>"`;
+exports[
+  `Grid decimal spacing should be supported 1`
+] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ikiOHGz-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div></div>"`;
 
-exports[`Grid nested components should be supported 1`] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div></div>,</div>,</div>,</div>"`;
+exports[
+  `Grid nested components should be supported 1`
+] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div></div>,</div>,</div>,</div>"`;
 
-exports[`Grid should render correctly 1`] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div></div>"`;
+exports[
+  `Grid should render correctly 1`
+] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-igNCIse-css nextui-grid-item\\">test</div></div>"`;
 
-exports[`Grid should work correctly when size exceeds 1`] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-icxokNG-css nextui-grid-item xs\\">test</div><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ieSqvQu-css nextui-grid-item xs\\">test</div></div>"`;
+exports[
+  `Grid should work correctly when size exceeds 1`
+] = `"<div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ijDEIix-css nextui-grid-item nextui-grid-container\\"><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-icxokNG-css nextui-grid-item xs\\">test</div><div class=\\"nextui-c-kRHeuF nextui-c-kRHeuF-ieSqvQu-css nextui-grid-item xs\\">test</div></div>"`;
diff --git a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
index 5b329c9a1d..7f806c2124 100644
--- a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Input should be work with content 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[
+  `Input should be work with content 1`
+] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should be work with label 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><label id=\\"react-aria6583427695-20\\" class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria6583427695-19\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-19\\" aria-labelledby=\\"react-aria6583427695-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[
+  `Input should be work with label 1`
+] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><label id=\\"react-aria6583427695-20\\" class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria6583427695-19\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-19\\" aria-labelledby=\\"react-aria6583427695-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different sizes 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[
+  `Input should work with different sizes 1`
+] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different status 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[
+  `Input should work with different status 1`
+] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
index ebe393869d..f2a3c68345 100644
--- a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InputPassword should render correctly 1`] = `"<div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"password\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria2967626641-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg viewBox=\\"0 0 24 24\\" width=\\"16\\" height=\\"16\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" class=\\"nextui-input-password-icon\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[
+  `InputPassword should render correctly 1`
+] = `"<div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"password\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria2967626641-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg viewBox=\\"0 0 24 24\\" width=\\"16\\" height=\\"16\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" class=\\"nextui-input-password-icon\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
diff --git a/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap
index 08e8313f57..2702be444e 100644
--- a/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Link should render correctly 1`] = `"<div><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-krgohU-color-secondary nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-byQUqd-color-success nextui-c-gUrcXm-iFdQKc-animated-true\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" class=\\"nextui-c-hdKjck nextui-link-icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg></a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-cSuHME-underline-true nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-eIcaMf-block-true nextui-c-gUrcXm-iFdQKc-animated-true nextui-c-gUrcXm-bhXeQK-cv\\">link</a></div>"`;
+exports[
+  `Link should render correctly 1`
+] = `"<div><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-krgohU-color-secondary nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-byQUqd-color-success nextui-c-gUrcXm-iFdQKc-animated-true\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" class=\\"nextui-c-hdKjck nextui-link-icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg></a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-cSuHME-underline-true nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-eIcaMf-block-true nextui-c-gUrcXm-iFdQKc-animated-true nextui-c-gUrcXm-bhXeQK-cv\\">link</a></div>"`;
diff --git a/packages/react/src/loading/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/loading/__tests__/__snapshots__/index.test.tsx.snap
index 48bcff6674..1f88601a1d 100644
--- a/packages/react/src/loading/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/loading/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,21 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loading should render correctly 1`] = `"<div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div>"`;
+exports[
+  `Loading should render correctly 1`
+] = `"<div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div>"`;
 
 exports[`Loading should render correctly 2`] = `[Function]`;
 
-exports[`Loading should work with different colors 1`] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-primary nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-bdkpVZ-color-success nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-erOfwU-color-secondary nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-eVEedQ-color-warning nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-dGjLsC-color-error nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
+exports[
+  `Loading should work with different colors 1`
+] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-primary nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-bdkpVZ-color-success nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-erOfwU-color-secondary nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-eVEedQ-color-warning nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-dGjLsC-color-error nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
 
 exports[`Loading should work with different colors 2`] = `[Function]`;
 
-exports[`Loading should work with different sizes 1`] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-bboDzR-size-xs nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-eWttbs-size-sm nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-eWTJwO-size-lg nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-fYAaIu-size-xl nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
+exports[
+  `Loading should work with different sizes 1`
+] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-bboDzR-size-xs nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-eWttbs-size-sm nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-eWTJwO-size-lg nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-fYAaIu-size-xl nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
 
 exports[`Loading should work with different sizes 2`] = `[Function]`;
 
-exports[`Loading should work with different text colors 1`] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-jjYXKD-textColor-primary\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-lgCEhg-textColor-success\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-iQizOB-textColor-secondary\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fgUECR-textColor-warning\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-jYiaFD-textColor-error\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
+exports[
+  `Loading should work with different text colors 1`
+] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-jjYXKD-textColor-primary\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-lgCEhg-textColor-success\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-iQizOB-textColor-secondary\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fgUECR-textColor-warning\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-jYiaFD-textColor-error\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
 
 exports[`Loading should work with different text colors 2`] = `[Function]`;
 
-exports[`Loading should work with different types 1`] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><div class=\\"nextui-c-fpphdg nextui-c-fpphdg-fPWnWX-size-md nextui-spinner\\"><div class=\\"nextui-c-jTKaZN nextui-spinner-container\\" aria-label=\\"Loading\\"><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span></div></div></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-cGhcKQ-type-points nextui-c-chTLhx-dhbJvz-cv nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-points\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-heRREU-type-points-opacity nextui-c-chTLhx-dhbJvz-cv nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-points-opacity\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-mBJPy-type-gradient nextui-c-chTLhx-icvvata-css nextui-loading nextui-loading-gradient\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
+exports[
+  `Loading should work with different types 1`
+] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><div class=\\"nextui-c-fpphdg nextui-c-fpphdg-fPWnWX-size-md nextui-spinner\\"><div class=\\"nextui-c-jTKaZN nextui-spinner-container\\" aria-label=\\"Loading\\"><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span></div></div></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-cGhcKQ-type-points nextui-c-chTLhx-dhbJvz-cv nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-points\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-heRREU-type-points-opacity nextui-c-chTLhx-dhbJvz-cv nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-points-opacity\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-mBJPy-type-gradient nextui-c-chTLhx-icvvata-css nextui-loading nextui-loading-gradient\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
 
 exports[`Loading should work with different types 2`] = `[Function]`;
diff --git a/packages/react/src/pagination/__tests__/__snapshots__/pagination.test.tsx.snap b/packages/react/src/pagination/__tests__/__snapshots__/pagination.test.tsx.snap
index b78a044661..0b229afef4 100644
--- a/packages/react/src/pagination/__tests__/__snapshots__/pagination.test.tsx.snap
+++ b/packages/react/src/pagination/__tests__/__snapshots__/pagination.test.tsx.snap
@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Pagination should render correctly 1`] = `"<nav class=\\"nextui-c-eKVPvf nextui-c-eKVPvf-iBFhCV-color-default nextui-c-eKVPvf-UECOZ-size-md nextui-c-eKVPvf-iTJsWG-borderWeight-normal nextui-c-eKVPvf-ibzOHM-onlyDots-false nextui-c-eKVPvf-bNGYLg-rounded-false nextui-c-eKVPvf-QbeIJ-noMargin-false nextui-pagination\\"><button class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-gZRAkC-disabled-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-animated nextui-pagination-item-disabled nextui-pagination-item-preserve-content\\" aria-label=\\"previous page button\\" tabindex=\\"-1\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\"><svg role=\\"presentation\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-eKuzCY nextui-c-eKuzCY-xROYZ-isPrev-true nextui-pagination-icon\\"><path d=\\"M15.5 19l-7-7 7-7\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></path></svg></span></button><div aria-hidden=\\"true\\" class=\\"nextui-c-cAbbLF nextui-c-cAbbLF-QIzBs-animated-true nextui-c-cAbbLF-ikgtVxo-css nextui-pagination-highlight nextui-pagination-highlight--active\\" style=\\"--nextui--paginationLeft: calc(var(--nextui--paginationSize) * 1 + 6px);\\"></div><button class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-dZWCtT-active-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-active nextui-pagination-item-animated\\" aria-label=\\"1 item active\\" tabindex=\\"0\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\">1</span></button><button class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-gZRAkC-disabled-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-animated nextui-pagination-item-disabled nextui-pagination-item-preserve-content\\" aria-label=\\"next page button\\" tabindex=\\"-1\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\"><svg role=\\"presentation\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-eKuzCY nextui-pagination-icon\\"><path d=\\"M15.5 19l-7-7 7-7\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></path></svg></span></button></nav>"`;
+exports[
+  `Pagination should render correctly 1`
+] = `"<nav class=\\"nextui-c-eKVPvf nextui-c-eKVPvf-iBFhCV-color-default nextui-c-eKVPvf-UECOZ-size-md nextui-c-eKVPvf-iTJsWG-borderWeight-normal nextui-c-eKVPvf-ibzOHM-onlyDots-false nextui-c-eKVPvf-bNGYLg-rounded-false nextui-c-eKVPvf-QbeIJ-noMargin-false nextui-pagination\\"><button class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-gZRAkC-disabled-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-animated nextui-pagination-item-disabled nextui-pagination-item-preserve-content\\" aria-label=\\"previous page button\\" tabindex=\\"-1\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\"><svg role=\\"presentation\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-eKuzCY nextui-c-eKuzCY-xROYZ-isPrev-true nextui-pagination-icon\\"><path d=\\"M15.5 19l-7-7 7-7\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></path></svg></span></button><div aria-hidden=\\"true\\" class=\\"nextui-c-cAbbLF nextui-c-cAbbLF-QIzBs-animated-true nextui-c-cAbbLF-ikgtVxo-css nextui-pagination-highlight nextui-pagination-highlight--active\\" style=\\"--nextui--paginationLeft: calc(var(--nextui--paginationSize) * 1 + 6px);\\"></div><button class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-dZWCtT-active-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-active nextui-pagination-item-animated\\" aria-label=\\"1 item active\\" tabindex=\\"0\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\">1</span></button><button class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-gZRAkC-disabled-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-animated nextui-pagination-item-disabled nextui-pagination-item-preserve-content\\" aria-label=\\"next page button\\" tabindex=\\"-1\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\"><svg role=\\"presentation\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-eKuzCY nextui-pagination-icon\\"><path d=\\"M15.5 19l-7-7 7-7\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></path></svg></span></button></nav>"`;
diff --git a/packages/react/src/row/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/row/__tests__/__snapshots__/index.test.tsx.snap
index fae301a03f..382da80b4d 100644
--- a/packages/react/src/row/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/row/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Row should render correctly 1`] = `"<div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\">row</div>"`;
+exports[
+  `Row should render correctly 1`
+] = `"<div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\">row</div>"`;
 
-exports[`Row should work with nested 1`] = `"<div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\"><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\"><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\">row</div></div></div></div></div>"`;
+exports[
+  `Row should work with nested 1`
+] = `"<div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\"><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\"><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\">row</div></div></div></div></div>"`;
 
-exports[`Row the children should be aligned correctly 1`] = `"<div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-iipPaye-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-iiPCojg-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-icEZgMd-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-igmUkpg-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-ilailYI-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-ibEUQES-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div></div>"`;
+exports[
+  `Row the children should be aligned correctly 1`
+] = `"<div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-iipPaye-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-iiPCojg-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-icEZgMd-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-igmUkpg-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-idIWWzx-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-ilailYI-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-ibEUQES-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div></div>"`;
 
-exports[`Row the children should have the correct spacing 1`] = `"<div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-ieLOVho-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-igSdzKj-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-ifliOBE-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div></div>"`;
+exports[
+  `Row the children should have the correct spacing 1`
+] = `"<div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-ieLOVho-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-igSdzKj-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div><div class=\\"nextui-c-dfbgCO nextui-c-dfbgCO-fGHEql-fluid-true nextui-c-dfbgCO-ifliOBE-css\\"><div class=\\"nextui-c-cMTZRp nextui-c-cMTZRp-ijmTDtb-css\\"></div></div></div>"`;
diff --git a/packages/react/src/snippet/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/snippet/__tests__/__snapshots__/index.test.tsx.snap
index 0407e6faf8..e168a9b6ac 100644
--- a/packages/react/src/snippet/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/snippet/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,11 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Snippet should render correctly 1`] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
+exports[
+  `Snippet should render correctly 1`
+] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
 
-exports[`Snippet should work with custom symbol 1`] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-iglrZwL-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
+exports[
+  `Snippet should work with custom symbol 1`
+] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-iglrZwL-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
 
-exports[`Snippet should work with custom symbol 2`] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-idPaJqJ-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
+exports[
+  `Snippet should work with custom symbol 2`
+] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-idPaJqJ-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
 
-exports[`Snippet should work with different styles 1`] = `"<div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal nextui-c-eaXwRa-kyNZHt-filled-true\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-fFVmgV-color-secondary nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-ifKsbt-color-success nextui-c-eaXwRa-csvrTU-borderWeight-normal nextui-c-eaXwRa-kyNZHt-filled-true\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div></div>"`;
+exports[
+  `Snippet should work with different styles 1`
+] = `"<div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal nextui-c-eaXwRa-kyNZHt-filled-true\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-fFVmgV-color-secondary nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-ifKsbt-color-success nextui-c-eaXwRa-csvrTU-borderWeight-normal nextui-c-eaXwRa-kyNZHt-filled-true\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div></div>"`;
 
-exports[`Snippet should work with multi-line 1`] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">cd project</pre><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">now</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
+exports[
+  `Snippet should work with multi-line 1`
+] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">cd project</pre><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">now</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
diff --git a/packages/react/src/spacer/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/spacer/__tests__/__snapshots__/index.test.tsx.snap
index b256b11a41..e2d9f051dd 100644
--- a/packages/react/src/spacer/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/spacer/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Spacer should render correctly 1`] = `"<span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-igvLppd-css\\"></span>"`;
+exports[
+  `Spacer should render correctly 1`
+] = `"<span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-igvLppd-css\\"></span>"`;
 
-exports[`Spacer should support x and y 1`] = `"<div><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-igcelEw-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-ikIxlN-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-ikrYZet-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-iijuxSl-css\\"></span></div>"`;
+exports[
+  `Spacer should support x and y 1`
+] = `"<div><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-igcelEw-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-ikIxlN-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-ikrYZet-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-iijuxSl-css\\"></span></div>"`;
 
-exports[`Spacer should work with float 1`] = `"<div><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-iiYlDcV-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-ijmOPbz-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-iclhgNO-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-ihWKbA-css\\"></span></div>"`;
+exports[
+  `Spacer should work with float 1`
+] = `"<div><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-iiYlDcV-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-ijmOPbz-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-iclhgNO-css\\"></span><span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-ihWKbA-css\\"></span></div>"`;
 
-exports[`Spacer should work with inline mode 1`] = `"<span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-igvLppd-css\\"></span>"`;
+exports[
+  `Spacer should work with inline mode 1`
+] = `"<span aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-igvLppd-css\\"></span>"`;
diff --git a/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
index 3fe29a68d5..954364219c 100644
--- a/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,15 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Switch should render correctly 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label>"`;
+exports[
+  `Switch should render correctly 1`
+] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label>"`;
 
-exports[`Switch should render correctly with an icon 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[
+  `Switch should render correctly with an icon 1`
+] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should render correctly with an iconOff 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[
+  `Switch should render correctly with an iconOff 1`
+] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should render correctly with an iconOn 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[
+  `Switch should render correctly with an iconOn 1`
+] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should render correctly with both icons on/off 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[
+  `Switch should render correctly with both icons on/off 1`
+] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should work with different colors 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-primary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-cMYjfR-color-secondary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-eTwznY-color-success nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-jTdYRZ-color-warning nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-dlOPhH-color-error nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
+exports[
+  `Switch should work with different colors 1`
+] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-primary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-cMYjfR-color-secondary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-eTwznY-color-success nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-jTdYRZ-color-warning nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-dlOPhH-color-error nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
 
-exports[`Switch should work with different sizes 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-dAsftq-size-xs nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-gPEQiI-size-sm nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-lcjiCZ-size-lg nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-elYIjz-size-xl nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
+exports[
+  `Switch should work with different sizes 1`
+] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-dAsftq-size-xs nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-gPEQiI-size-sm nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-lcjiCZ-size-lg nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-elYIjz-size-xl nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
diff --git a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
index 6b7e4dfb20..d18344aa60 100644
--- a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria3340202833-14\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria3340202833-14-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria3340202833-14-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria3340202833-14-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria3340202833-14-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria3340202833-14-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[
+  `Table should render a static table correctly with sorting 1`
+] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria3340202833-14\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria3340202833-14-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria3340202833-14-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria3340202833-14-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria3340202833-14-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria3340202833-14-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
 
-exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria3340202833-1\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria3340202833-1-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria3340202833-1-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria3340202833-1-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria3340202833-1-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria3340202833-1-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[
+  `Table should render correctly 1`
+] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria3340202833-1\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria3340202833-1-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria3340202833-1-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria3340202833-1-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria3340202833-1-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria3340202833-1-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
diff --git a/packages/react/src/table/table.stories.tsx b/packages/react/src/table/table.stories.tsx
index 059fa69100..0655e33007 100644
--- a/packages/react/src/table/table.stories.tsx
+++ b/packages/react/src/table/table.stories.tsx
@@ -360,7 +360,7 @@ export const Pagination = () => {
         shadow
         align="center"
         rowsPerPage={3}
-        onPageChange={(page) => console.log({page})}
+        onPageChange={(page) => console.log({page})} // eslint-disable-line no-console
       />
     </Table>
   );
@@ -548,14 +548,24 @@ export const CustomCells = () => {
           <Row align="center" justify="center">
             <Col css={{d: "flex"}}>
               <Tooltip content="Details">
-                <IconButton onClick={() => console.log(`View user ${user?.id}`)}>
+                <IconButton
+                  onClick={() => {
+                    // eslint-disable-next-line no-console
+                    console.log(`View user ${user?.id}`);
+                  }}
+                >
                   <Eye fill="#979797" size={20} />
                 </IconButton>
               </Tooltip>
             </Col>
             <Col css={{d: "flex"}}>
               <Tooltip content="Edit user">
-                <IconButton onClick={() => console.log(`edit user ${user?.id}`)}>
+                <IconButton
+                  onClick={() => {
+                    // eslint-disable-next-line no-console
+                    console.log(`edit user ${user?.id}`);
+                  }}
+                >
                   <Edit fill="#979797" size={20} />
                 </IconButton>
               </Tooltip>
@@ -564,7 +574,7 @@ export const CustomCells = () => {
               <Tooltip
                 color="error"
                 content="Delete user"
-                onClick={() => console.log(`Delete user ${user?.id}`)}
+                onClick={() => console.log(`Delete user ${user?.id}`)} // eslint-disable-line no-console
               >
                 <IconButton>
                   <Delete fill="#FF0080" size={20} />
diff --git a/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap
index 3fc7651ebe..93106276e9 100644
--- a/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,15 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Text should be able to specify the size of text 1`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-iketldG-css\\">test-value</p>"`;
+exports[
+  `Text should be able to specify the size of text 1`
+] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-iketldG-css\\">test-value</p>"`;
 
-exports[`Text should be able to specify the size of text 2`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ihhCyyy-css\\">test-value</p>"`;
+exports[
+  `Text should be able to specify the size of text 2`
+] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ihhCyyy-css\\">test-value</p>"`;
 
-exports[`Text should render P element in the default 1`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p>"`;
+exports[
+  `Text should render P element in the default 1`
+] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p>"`;
 
-exports[`Text should render default color when type missing 1`] = `"<p type=\\"unknow\\" class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p>"`;
+exports[
+  `Text should render default color when type missing 1`
+] = `"<p type=\\"unknow\\" class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p>"`;
 
-exports[`Text should work with different styles 1`] = `"<div><p class=\\"nextui-c-PJLV nextui-c-PJLV-ifLlHwE-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-igwcrxd-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-ikQkqxQ-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-ibKSEie-css\\">test-value</p></div>"`;
+exports[
+  `Text should work with different styles 1`
+] = `"<div><p class=\\"nextui-c-PJLV nextui-c-PJLV-ifLlHwE-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-igwcrxd-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-ikQkqxQ-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-ibKSEie-css\\">test-value</p></div>"`;
 
-exports[`Text the combined style should be rendered 1`] = `"<b class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\"><del class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</del></b>"`;
+exports[
+  `Text the combined style should be rendered 1`
+] = `"<b class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\"><del class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</del></b>"`;
 
-exports[`Text the specified element should be rendered 1`] = `"<div><h1 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h1><h2 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h2><h3 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h3><h4 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h4><h5 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h5><h6 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h6><p class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p><small class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</small><span class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</span><del class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</del><i class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</i><em class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</em><b class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</b></div>"`;
+exports[
+  `Text the specified element should be rendered 1`
+] = `"<div><h1 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h1><h2 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h2><h3 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h3><h4 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h4><h5 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h5><h6 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h6><p class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p><small class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</small><span class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</span><del class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</del><i class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</i><em class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</em><b class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</b></div>"`;
diff --git a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
index 1f9f40f469..2aaac37223 100644
--- a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Textarea should render correctly 1`] = `"<div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"placeholder\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[
+  `Textarea should render correctly 1`
+] = `"<div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"placeholder\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
 
-exports[`Textarea should work with different styles 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[
+  `Textarea should work with different styles 1`
+] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/textarea/textarea.stories.tsx b/packages/react/src/textarea/textarea.stories.tsx
index 9ab765eb27..548273cffd 100644
--- a/packages/react/src/textarea/textarea.stories.tsx
+++ b/packages/react/src/textarea/textarea.stories.tsx
@@ -133,6 +133,7 @@ export const WithHelperText = () => {
 export const WithUseInput = () => {
   const {value, setValue, reset, bindings} = useInput("NextUI");
 
+  // eslint-disable-next-line no-console
   useEffect(() => console.log(value), [value]);
 
   return (
@@ -173,7 +174,7 @@ export const Uncontrolled = () => {
         <Textarea
           ref={textareaRef}
           initialValue="Hello"
-          onChange={(e) => console.log(e.target.value)}
+          onChange={(e) => console.log(e.target.value)} // eslint-disable-line no-console
         />
         <Spacer y={0.5} />
         <Grid>
diff --git a/packages/react/src/tooltip/tooltip-content.tsx b/packages/react/src/tooltip/tooltip-content.tsx
index 8066d78ba6..7abd698059 100644
--- a/packages/react/src/tooltip/tooltip-content.tsx
+++ b/packages/react/src/tooltip/tooltip-content.tsx
@@ -83,7 +83,6 @@ const TooltipContent: React.FC<React.PropsWithChildren<TooltipContentProps>> = (
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {
     updateRect();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
   const preventHandler = (event: React.MouseEvent<HTMLDivElement>) => {
diff --git a/packages/react/src/use-body-scroll/use-body-scroll.ts b/packages/react/src/use-body-scroll/use-body-scroll.ts
index 90fc97fefe..d8a57cc275 100644
--- a/packages/react/src/use-body-scroll/use-body-scroll.ts
+++ b/packages/react/src/use-body-scroll/use-body-scroll.ts
@@ -81,7 +81,6 @@ const useBodyScroll = (
       document.removeEventListener("touchmove", touchHandler);
     }
     elementStack.delete(elRef.current);
-    //  eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hidden, elRef]);
 
   return [hidden, setHidden];
diff --git a/packages/react/src/use-clipboard/use-clipboard.ts b/packages/react/src/use-clipboard/use-clipboard.ts
index 3bf760e68f..d559a55849 100644
--- a/packages/react/src/use-clipboard/use-clipboard.ts
+++ b/packages/react/src/use-clipboard/use-clipboard.ts
@@ -49,7 +49,6 @@ const useClipboard = (options: UseClipboardOptions = defaultOptions): UseClipboa
     (text: string) => {
       copyText(el, text);
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [el],
   );
 
diff --git a/packages/react/src/use-input/__tests__/use-input.test.tsx b/packages/react/src/use-input/__tests__/use-input.test.tsx
index 527ae8358d..77a82366b1 100644
--- a/packages/react/src/use-input/__tests__/use-input.test.tsx
+++ b/packages/react/src/use-input/__tests__/use-input.test.tsx
@@ -15,7 +15,6 @@ describe("UseInput", () => {
 
       useEffect(() => {
         if (propValue) setValue(propValue);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
       }, [propValue]);
 
       useEffect(() => {
diff --git a/packages/react/src/utils/drip.tsx b/packages/react/src/utils/drip.tsx
index 01abad7d03..2f81ee2d2f 100644
--- a/packages/react/src/utils/drip.tsx
+++ b/packages/react/src/utils/drip.tsx
@@ -62,12 +62,14 @@ const Drip: React.FC<DripProps> = ({visible, x, y, color, onCompleted, className
   const left = Number.isNaN(+x) ? 0 : x - 10;
 
   useEffect(() => {
-    if (!dripRef.current) return;
-    dripRef.current.addEventListener("animationend", onCompleted);
+    let drip = dripRef.current;
+
+    if (!drip) return;
+    drip.addEventListener("animationend", onCompleted);
 
     return () => {
-      if (!dripRef.current) return;
-      dripRef.current.removeEventListener("animationend", onCompleted);
+      if (!drip) return;
+      drip.removeEventListener("animationend", onCompleted);
     };
   });
 
diff --git a/packages/react/src/utils/types.d.ts b/packages/react/src/utils/types.d.ts
index 161455bce3..9c37e34ce2 100644
--- a/packages/react/src/utils/types.d.ts
+++ b/packages/react/src/utils/types.d.ts
@@ -1,5 +1,3 @@
 export type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends 
-    Record<string, unknown> ? DeepPartial<T[P]> : T[P]
-}
-  
\ No newline at end of file
+  [P in keyof T]?: T[P] extends Record<string, unknown> ? DeepPartial<T[P]> : T[P];
+};

From 54261880bb31f0f14ddc461e9d4cf4e20c6f5b40 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 19 Jun 2022 17:43:49 -0300
Subject: [PATCH 007/106] refactor(docs-root): new eslint config implemented

---
 .eslintignore                                 |   1 +
 .eslintrc.json                                |   2 +
 apps/docs/src/components/anchor/index.tsx     |  19 +-
 .../docs/src/components/badge/badge.styles.ts | 120 ++---
 apps/docs/src/components/badge/index.tsx      |  14 +-
 .../docs/src/components/blockholder/index.tsx |  23 +-
 apps/docs/src/components/carbon-ad/index.tsx  |  41 +-
 .../src/components/code-demo/code-block.tsx   | 208 ++++-----
 .../src/components/code-demo/code-demo.tsx    |  42 +-
 apps/docs/src/components/code-demo/index.ts   |   8 +-
 apps/docs/src/components/code-demo/pre.tsx    | 286 ++++++------
 apps/docs/src/components/codeblock/index.tsx  | 125 +++--
 .../src/components/community/community.tsx    |  85 ++--
 apps/docs/src/components/community/index.ts   |   2 +-
 apps/docs/src/components/community/styles.ts  |  26 +-
 .../src/components/css-transition/index.tsx   |  19 +-
 .../src/components/dots-container/index.tsx   |  17 +-
 .../features-grid/features-grid.tsx           |  36 +-
 .../src/components/features-grid/index.tsx    |   4 +-
 .../src/components/features-grid/styles.ts    |  40 +-
 apps/docs/src/components/fixed/index.tsx      |  32 +-
 apps/docs/src/components/heading/index.tsx    |  11 +-
 apps/docs/src/components/hero/components.tsx  | 312 +++++++------
 apps/docs/src/components/hero/index.tsx       | 164 ++++---
 apps/docs/src/components/hero/styles.ts       |  46 +-
 .../src/components/home/built-in-stitches.tsx | 183 ++++----
 apps/docs/src/components/home/comparation.tsx |  64 +--
 .../src/components/home/custom-themes.tsx     | 117 +++--
 .../src/components/home/customization.tsx     | 100 ++--
 apps/docs/src/components/home/dark-mode.tsx   | 151 +++---
 apps/docs/src/components/home/index.ts        |  14 +-
 .../components/home/last-but-not-least.tsx    |  18 +-
 apps/docs/src/components/icons/activity.tsx   |  24 +-
 apps/docs/src/components/icons/anchor.tsx     |  32 +-
 apps/docs/src/components/icons/arrow-left.tsx |  16 +-
 .../docs/src/components/icons/arrow-right.tsx |  10 +-
 apps/docs/src/components/icons/bug.tsx        |  14 +-
 apps/docs/src/components/icons/camera.tsx     |  26 +-
 .../src/components/icons/chevron-left.tsx     |  22 +-
 .../src/components/icons/chevron-right.tsx    |  14 +-
 apps/docs/src/components/icons/close.tsx      |  13 +-
 .../src/components/icons/code-document.tsx    |  34 +-
 apps/docs/src/components/icons/copy.tsx       |  12 +-
 apps/docs/src/components/icons/devices.tsx    |  20 +-
 apps/docs/src/components/icons/discord.tsx    |  17 +-
 apps/docs/src/components/icons/flash.tsx      |  18 +-
 apps/docs/src/components/icons/forward5s.tsx  |  23 +-
 .../src/components/icons/gaming-console.tsx   |  26 +-
 apps/docs/src/components/icons/github.tsx     |  25 +-
 apps/docs/src/components/icons/hash.tsx       |  28 +-
 apps/docs/src/components/icons/heart.tsx      |  21 +-
 apps/docs/src/components/icons/home.tsx       |  24 +-
 apps/docs/src/components/icons/html-logo.tsx  |  22 +-
 apps/docs/src/components/icons/index.ts       | 116 ++---
 apps/docs/src/components/icons/javascript.tsx |  15 +-
 apps/docs/src/components/icons/lock.tsx       |  33 +-
 apps/docs/src/components/icons/magic.tsx      |  16 +-
 apps/docs/src/components/icons/mail.tsx       |  19 +-
 apps/docs/src/components/icons/map-icons.tsx  |  19 +-
 apps/docs/src/components/icons/maximize.tsx   |  18 +-
 .../src/components/icons/microphone-off.tsx   |  35 +-
 apps/docs/src/components/icons/microphone.tsx |  43 +-
 apps/docs/src/components/icons/minus.tsx      |  22 +-
 apps/docs/src/components/icons/moon.tsx       |  23 +-
 apps/docs/src/components/icons/next-track.tsx |  23 +-
 .../docs/src/components/icons/nextjs-logo.tsx |  18 +-
 apps/docs/src/components/icons/note.tsx       |  22 +-
 .../src/components/icons/notification.tsx     |  16 +-
 apps/docs/src/components/icons/palette.tsx    |  23 +-
 apps/docs/src/components/icons/password.tsx   |  25 +-
 apps/docs/src/components/icons/play.tsx       |  23 +-
 apps/docs/src/components/icons/plus.tsx       |  16 +-
 .../src/components/icons/previous-track.tsx   |  13 +-
 apps/docs/src/components/icons/rewind5s.tsx   |  23 +-
 .../src/components/icons/round-pointer.tsx    |  18 +-
 .../components/icons/search-by-algolia.tsx    |  26 +-
 apps/docs/src/components/icons/search.tsx     |  15 +-
 apps/docs/src/components/icons/send.tsx       |  16 +-
 apps/docs/src/components/icons/server.tsx     |  16 +-
 apps/docs/src/components/icons/star.tsx       |  19 +-
 apps/docs/src/components/icons/sun.tsx        |  41 +-
 apps/docs/src/components/icons/tag-user.tsx   |  20 +-
 apps/docs/src/components/icons/twitter.tsx    |  17 +-
 apps/docs/src/components/icons/typescript.tsx |  15 +-
 apps/docs/src/components/icons/unlock.tsx     |  30 +-
 apps/docs/src/components/icons/user.tsx       |  31 +-
 apps/docs/src/components/icons/vercel.tsx     |  23 +-
 apps/docs/src/components/icons/video-off.tsx  |  37 +-
 apps/docs/src/components/icons/video.tsx      |  37 +-
 apps/docs/src/components/icons/volume-up.tsx  |  32 +-
 .../src/components/image-browser/index.tsx    | 386 +++++++---------
 apps/docs/src/components/index.ts             |  80 ++--
 .../src/components/install-banner/index.ts    |   2 +-
 .../install-banner/install-banner.tsx         | 120 ++---
 apps/docs/src/components/kbar/index.tsx       |  42 +-
 apps/docs/src/components/kbar/option.tsx      |  69 ++-
 apps/docs/src/components/kbar/results.tsx     |  88 ++--
 apps/docs/src/components/kbar/search.tsx      |  21 +-
 apps/docs/src/components/kbar/styles.ts       |  18 +-
 apps/docs/src/components/kbar/types.ts        |   8 +-
 apps/docs/src/components/keyboard/index.tsx   |  45 +-
 apps/docs/src/components/logo/index.tsx       |  51 ++-
 apps/docs/src/components/looper-bg/index.tsx  | 428 +++++++++---------
 apps/docs/src/components/mdx/index.tsx        |  76 ++--
 .../docs/src/components/menu-toggle/index.tsx |  13 +-
 .../components/mobile-navigation/index.tsx    |  36 +-
 apps/docs/src/components/nav-link/index.tsx   |  74 +--
 .../src/components/notify-banner/index.ts     |   2 +-
 .../notify-banner/notify-banner.tsx           |  33 +-
 .../src/components/notify-banner/styles.ts    |  72 +--
 apps/docs/src/components/page-nav/index.tsx   |  50 +-
 apps/docs/src/components/palette/index.tsx    |  70 ++-
 apps/docs/src/components/palette/item.tsx     |  95 ++--
 .../src/components/playground/code-theme.ts   | 186 ++++----
 .../components/playground/dynamic-live.tsx    |  99 ++--
 .../docs/src/components/playground/editor.tsx |  81 ++--
 apps/docs/src/components/playground/index.ts  |   2 +-
 .../src/components/playground/playground.tsx  |  96 ++--
 apps/docs/src/components/playground/title.tsx |  18 +-
 apps/docs/src/components/playground/utils.ts  |  27 +-
 apps/docs/src/components/primitives/index.ts  | 178 ++++----
 .../components/sandpack/bugreport-button.tsx  |  43 +-
 .../src/components/sandpack/code-viewer.tsx   |  66 ++-
 .../components/sandpack/codesanbox-button.tsx |  34 +-
 .../src/components/sandpack/copy-button.tsx   |  27 +-
 apps/docs/src/components/sandpack/index.ts    |   9 +-
 .../components/sandpack/language-selector.tsx |  27 +-
 apps/docs/src/components/sandpack/preview.tsx |  65 ++-
 .../components/sandpack/refresh-button.tsx    |  19 +-
 .../components/sandpack/sandpack.styles.ts    |   6 +-
 .../docs/src/components/sandpack/sandpack.tsx | 135 +++---
 apps/docs/src/components/sandpack/styles.ts   |  68 +--
 apps/docs/src/components/sandpack/themes.ts   |  50 +-
 apps/docs/src/components/sandpack/types.ts    |   4 +-
 apps/docs/src/components/sandpack/utils.ts    |  91 ++--
 .../src/components/search/autocomplete.tsx    | 199 ++++----
 apps/docs/src/components/search/index.ts      |   2 +-
 apps/docs/src/components/search/input.tsx     |  27 +-
 .../src/components/search/instant-search.tsx  |  20 +-
 .../docs/src/components/search/suggestion.tsx |  37 +-
 apps/docs/src/components/sidebar/category.tsx |  53 +--
 apps/docs/src/components/sidebar/index.tsx    | 155 +++----
 apps/docs/src/components/sidebar/post.tsx     |  31 +-
 .../src/components/table-of-content/index.tsx |  31 +-
 .../templates/custom-button/index.tsx         |  79 ++--
 .../templates/delete-user/index.tsx           |  18 +-
 .../templates/example-block/index.tsx         |  17 +-
 apps/docs/src/components/templates/index.ts   |  14 +-
 .../src/components/templates/player/index.ts  |   2 +-
 .../components/templates/player/player.tsx    |  98 ++--
 .../templates/send-button/index.tsx           |  15 +-
 .../templates/shop-card/animations.ts         |  68 +--
 .../templates/shop-card/content.tsx           |  65 +--
 .../components/templates/shop-card/index.ts   |   2 +-
 .../templates/shop-card/shop-card.tsx         | 135 +++---
 .../components/templates/shop-card/styles.ts  | 424 ++++++++---------
 .../components/templates/shop-card/themes.ts  |  90 ++--
 .../templates/user-twitter-card/index.tsx     |  91 ++--
 .../src/components/theme-switch/index.tsx     |  22 +-
 .../src/components/theme-toggle/index.tsx     |  51 ++-
 .../src/components/vercel-callout/index.ts    |   2 +-
 .../vercel-callout/vercel-callout.tsx         |  34 +-
 apps/docs/src/hooks/use-docs-route.ts         |  22 +-
 apps/docs/src/hooks/use-dom-clean.ts          |   6 +-
 apps/docs/src/hooks/use-is-mounted.ts         |   4 +-
 apps/docs/src/hooks/use-local-storage.ts      |  13 +-
 apps/docs/src/hooks/use-media-query.ts        |   3 +-
 apps/docs/src/hooks/use-portal.ts             |  20 +-
 apps/docs/src/hooks/use-scroll-spy.ts         |  16 +-
 apps/docs/src/hooks/use-ssr.ts                |   9 +-
 apps/docs/src/layouts/default.tsx             |  45 +-
 apps/docs/src/layouts/docs.tsx                | 169 +++----
 apps/docs/src/layouts/footer.tsx              |  34 +-
 apps/docs/src/layouts/header.tsx              |  83 ++--
 apps/docs/src/layouts/navbar.tsx              | 351 +++++++-------
 apps/docs/src/layouts/styles.ts               |  51 +--
 apps/docs/src/lib/constants.ts                |   4 +-
 apps/docs/src/lib/docs/config.ts              |   6 +-
 apps/docs/src/lib/docs/page.ts                |  37 +-
 apps/docs/src/lib/docs/utils.ts               |  11 +-
 apps/docs/src/lib/get-algolia.ts              |  10 +-
 apps/docs/src/lib/github/api.ts               |  13 +-
 apps/docs/src/lib/github/constants.ts         |   8 +-
 apps/docs/src/lib/github/raw.ts               |   6 +-
 apps/docs/src/lib/github/utils.ts             |   6 +-
 apps/docs/src/lib/kbar-actions.ts             | 120 +++--
 apps/docs/src/lib/rehype-highlight-line.js    |  49 +-
 apps/docs/src/lib/rehype-highlight-word.js    |  16 +-
 apps/docs/src/lib/router-events.js            |  11 +-
 apps/docs/src/lib/types.ts                    |  10 +-
 apps/docs/src/pages/_app.tsx                  |  67 +--
 apps/docs/src/pages/_document.tsx             |  18 +-
 apps/docs/src/pages/docs/[[...slug]].tsx      | 109 ++---
 apps/docs/src/pages/index.tsx                 |  54 +--
 apps/docs/src/styles/globalStyles.ts          |  87 ++--
 apps/docs/src/theme/shared.ts                 |  68 +--
 apps/docs/src/utils/animations.ts             |  44 +-
 apps/docs/src/utils/fs-utils.ts               |   4 +-
 apps/docs/src/utils/get-headings.ts           |   7 +-
 apps/docs/src/utils/index.ts                  |  89 ++--
 apps/docs/src/utils/links.ts                  |   3 +-
 apps/docs/src/utils/scripts.ts                |   8 +-
 apps/docs/src/utils/types.d.ts                |   5 -
 apps/docs/src/utils/types.ts                  |   5 -
 apps/docs/src/utils/with-defaults.ts          |   8 +-
 packages/react/src/utils/types.d.ts           |   3 -
 206 files changed, 4812 insertions(+), 5617 deletions(-)
 delete mode 100644 apps/docs/src/utils/types.d.ts
 delete mode 100644 apps/docs/src/utils/types.ts
 delete mode 100644 packages/react/src/utils/types.d.ts

diff --git a/.eslintignore b/.eslintignore
index a81ee2c9b4..6af1042cb8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,5 +1,6 @@
 .now/*
 .next/*
+*.css
 examples/*
 dist/*
 esm/*
diff --git a/.eslintrc.json b/.eslintrc.json
index f18a0b1182..b27b37a4fd 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -30,6 +30,8 @@
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
     "react-hooks/exhaustive-deps": "off",
+    "jsx-a11y/click-events-have-key-events": "warn",
+    "jsx-a11y/interactive-supports-focus": "warn",
     "prettier/prettier": [
       "warn",
       {
diff --git a/apps/docs/src/components/anchor/index.tsx b/apps/docs/src/components/anchor/index.tsx
index 238e6ee3d7..c8d008e082 100644
--- a/apps/docs/src/components/anchor/index.tsx
+++ b/apps/docs/src/components/anchor/index.tsx
@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Link, useTheme } from '@nextui-org/react';
-import { Anchor } from '../icons';
+import React, {useEffect, useRef, useState} from "react";
+import {Link, useTheme} from "@nextui-org/react";
+
+import {Anchor} from "../icons";
 
 export interface Props {
   pure?: boolean;
@@ -8,14 +9,12 @@ export interface Props {
 
 export const virtualAnchorEncode = (text?: string) => {
   if (!text) return undefined;
-  return text.toLowerCase().replace(/ /g, '-');
+
+  return text.toLowerCase().replace(/ /g, "-");
 };
 
-const VirtualAnchor: React.FC<React.PropsWithChildren<Props>> = ({
-  children,
-  pure
-}) => {
-  const { theme } = useTheme();
+const VirtualAnchor: React.FC<React.PropsWithChildren<Props>> = ({children, pure}) => {
+  const {theme} = useTheme();
   const ref = useRef<HTMLAnchorElement>(null);
   const [id, setId] = useState<string | undefined>();
 
@@ -25,7 +24,7 @@ const VirtualAnchor: React.FC<React.PropsWithChildren<Props>> = ({
   }, [ref.current]);
 
   return (
-    <span className="parent" ref={ref}>
+    <span ref={ref} className="parent">
       <Link href={`#${id}`}>{children}</Link>
       <span className="virtual" id={id} />
       {!pure && (
diff --git a/apps/docs/src/components/badge/badge.styles.ts b/apps/docs/src/components/badge/badge.styles.ts
index 47ed87d986..01915c580e 100644
--- a/apps/docs/src/components/badge/badge.styles.ts
+++ b/apps/docs/src/components/badge/badge.styles.ts
@@ -1,115 +1,115 @@
-import { styled, VariantProps } from '@nextui-org/react';
+import {styled, VariantProps} from "@nextui-org/react";
 
-export const StyledBadge = styled('span', {
-  display: 'inline-block',
-  textTransform: 'uppercase',
-  padding: '5px 5px',
-  margin: '0 2px',
-  fontSize: '10px',
-  fontWeight: '800',
-  borderRadius: '14px',
-  letterSpacing: '0.6px',
+export const StyledBadge = styled("span", {
+  display: "inline-block",
+  textTransform: "uppercase",
+  padding: "5px 5px",
+  margin: "0 2px",
+  fontSize: "10px",
+  fontWeight: "800",
+  borderRadius: "14px",
+  letterSpacing: "0.6px",
   lineHeight: 1,
-  textShadow: '0 1px 1px rgba(0, 0, 0, 0.16)',
-  boxShadow: '1px 2px 5px 0px rgb(0 0 0 / 10%)',
-  alignItems: 'center',
-  alignSelf: 'center',
-  color: '$white',
+  textShadow: "0 1px 1px rgba(0, 0, 0, 0.16)",
+  boxShadow: "1px 2px 5px 0px rgb(0 0 0 / 10%)",
+  alignItems: "center",
+  alignSelf: "center",
+  color: "$white",
   variants: {
     type: {
       default: {
-        bg: '$primaryLight',
-        color: '$primary'
+        bg: "$primaryLight",
+        color: "$primary",
       },
       primary: {
-        bg: '$primaryLight',
-        color: '$primary'
+        bg: "$primaryLight",
+        color: "$primary",
       },
       secondary: {
-        bg: '$secondaryLight',
-        color: '$secondary'
+        bg: "$secondaryLight",
+        color: "$secondary",
       },
       warning: {
-        bg: '$warningLight',
-        color: '$warning'
+        bg: "$warningLight",
+        color: "$warning",
       },
       success: {
-        bg: '$successLight',
-        color: '$success'
+        bg: "$successLight",
+        color: "$success",
       },
       error: {
-        bg: '$errorLight',
-        color: '$error'
+        bg: "$errorLight",
+        color: "$error",
       },
       disabled: {
-        fontSize: '9px',
-        color: '$accents8',
-        bg: '$accents0'
-      }
+        fontSize: "9px",
+        color: "$accents8",
+        bg: "$accents0",
+      },
     },
     solid: {
-      true: {}
-    }
+      true: {},
+    },
   },
   defaultVariants: {
-    type: 'default'
+    type: "default",
   },
   compoundVariants: [
     // solid: true && type: 'default'
     {
-      type: 'default',
+      type: "default",
       solid: true,
       css: {
-        bg: '$primary',
-        color: '$white'
-      }
+        bg: "$primary",
+        color: "$white",
+      },
     },
     // solid: true && type: 'primary'
     {
-      type: 'primary',
+      type: "primary",
       solid: true,
       css: {
-        bg: '$primary',
-        color: '$white'
-      }
+        bg: "$primary",
+        color: "$white",
+      },
     },
     // solid: true && type: 'secondary'
     {
-      type: 'secondary',
+      type: "secondary",
       solid: true,
       css: {
-        bg: '$secondary',
-        color: '$white'
-      }
+        bg: "$secondary",
+        color: "$white",
+      },
     },
     // solid: true && type: 'warning'
     {
-      type: 'warning',
+      type: "warning",
       solid: true,
       css: {
-        bg: '$warning',
-        color: '$white'
-      }
+        bg: "$warning",
+        color: "$white",
+      },
     },
     // solid: true && type: 'success'
     {
-      type: 'success',
+      type: "success",
       solid: true,
       css: {
-        bg: '$success',
-        color: '$white'
-      }
+        bg: "$success",
+        color: "$white",
+      },
     },
     // solid: true && type: 'error'
     {
-      type: 'error',
+      type: "error",
       solid: true,
       css: {
-        bg: '$error',
-        color: '$white'
-      }
-    }
-  ]
+        bg: "$error",
+        color: "$white",
+      },
+    },
+  ],
 });
 
 export type BadgeVariantsProps = VariantProps<typeof StyledBadge>;
diff --git a/apps/docs/src/components/badge/index.tsx b/apps/docs/src/components/badge/index.tsx
index 422c236c6c..364d685258 100644
--- a/apps/docs/src/components/badge/index.tsx
+++ b/apps/docs/src/components/badge/index.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
-import { StyledBadge, BadgeVariantsProps } from './badge.styles';
-import { CSS } from '@nextui-org/react';
+import React from "react";
+import {CSS} from "@nextui-org/react";
+
+import {StyledBadge, BadgeVariantsProps} from "./badge.styles";
 
 interface Props {
   className?: string;
@@ -8,12 +9,9 @@ interface Props {
 
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
 
-type BadgeProps = Props & NativeAttrs & BadgeVariantsProps & { css?: CSS };
+type BadgeProps = Props & NativeAttrs & BadgeVariantsProps & {css?: CSS};
 
-const Badge: React.FC<React.PropsWithChildren<BadgeProps>> = ({
-  children,
-  ...props
-}) => {
+const Badge: React.FC<React.PropsWithChildren<BadgeProps>> = ({children, ...props}) => {
   return <StyledBadge {...props}>{children}</StyledBadge>;
 };
 
diff --git a/apps/docs/src/components/blockholder/index.tsx b/apps/docs/src/components/blockholder/index.tsx
index 2146bdbb35..157953166e 100644
--- a/apps/docs/src/components/blockholder/index.tsx
+++ b/apps/docs/src/components/blockholder/index.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
-import withDefaults from '../../utils/with-defaults';
+import React from "react";
+
+import withDefaults from "../../utils/with-defaults";
 
 export interface Props {
   className?: string;
@@ -9,21 +10,15 @@ export interface Props {
 }
 
 const defaultProps = {
-  className: '',
-  width: '100%',
-  height: '100%',
-  alt: 'block placeholder'
+  className: "",
+  width: "100%",
+  height: "100%",
+  alt: "block placeholder",
 };
 
-const PlaceholderBlock: React.FC<Props> = ({
-  className,
-  width,
-  height,
-  alt,
-  ...props
-}) => {
+const PlaceholderBlock: React.FC<Props> = ({className, width, height, alt, ...props}) => {
   return (
-    <div className={className} style={{ width, height }} {...props}>
+    <div className={className} style={{width, height}} {...props}>
       <img
         alt={alt}
         src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
diff --git a/apps/docs/src/components/carbon-ad/index.tsx b/apps/docs/src/components/carbon-ad/index.tsx
index 951259cf79..31879a9afc 100644
--- a/apps/docs/src/components/carbon-ad/index.tsx
+++ b/apps/docs/src/components/carbon-ad/index.tsx
@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react';
-import { loadScript } from '@utils/scripts';
-import { useTheme } from '@nextui-org/react';
-import { isProd } from '@utils/index';
-import useIsMounted from '@hooks/use-is-mounted';
+import React, {useEffect} from "react";
+import {loadScript} from "@utils/scripts";
+import {useTheme} from "@nextui-org/react";
+import {isProd} from "@utils/index";
+import useIsMounted from "@hooks/use-is-mounted";
 
 const CarbonAd: React.FC<unknown> = () => {
   const ref = React.useRef(null);
-  const { theme, isDark } = useTheme();
+  const {theme, isDark} = useTheme();
   const isMounted = useIsMounted();
 
   useEffect(() => {
@@ -17,11 +17,13 @@ const CarbonAd: React.FC<unknown> = () => {
       isMounted &&
       setTimeout(() => {
         const script = loadScript(
-          'https://cdn.carbonads.com/carbon.js?serve=CESIC53Y&placement=nextuiorg',
-          ref.current
+          "https://cdn.carbonads.com/carbon.js?serve=CESIC53Y&placement=nextuiorg",
+          ref.current,
         );
-        script.id = '_carbonads_js';
+
+        script.id = "_carbonads_js";
       });
+
     return () => {
       load && clearTimeout(load);
     };
@@ -31,8 +33,8 @@ const CarbonAd: React.FC<unknown> = () => {
 
   return (
     <div className="carbon-ad-container">
-      <span id="carbon-ad" ref={ref}>
-        <style jsx global>
+      <span ref={ref} id="carbon-ad">
+        <style global jsx>
           {`
             .carbon-ad-container {
               min-height: 132px;
@@ -51,7 +53,7 @@ const CarbonAd: React.FC<unknown> = () => {
               width: 100%;
               z-index: 100;
               border-radius: ${theme?.radii?.lg?.value};
-              background-color: ${!isDark ? '#363449' : '#111'};
+              background-color: ${!isDark ? "#363449" : "#111"};
               box-shadow: 0px 5px 20px -5px rgb(0 0 0 / 20%);
             }
             #carbonads a {
@@ -60,9 +62,7 @@ const CarbonAd: React.FC<unknown> = () => {
               transition: color 0.25s ease;
             }
             #carbonads a:hover {
-              color: ${!isDark
-                ? theme?.colors?.accents3?.value
-                : theme?.colors?.accents7?.value};
+              color: ${!isDark ? theme?.colors?.accents3?.value : theme?.colors?.accents7?.value};
             }
             #carbonads span {
               width: 100%;
@@ -92,9 +92,7 @@ const CarbonAd: React.FC<unknown> = () => {
               display: block;
               font-size: 1rem;
               width: 100%;
-              color: ${!isDark
-                ? theme?.colors?.accents2?.value
-                : theme?.colors?.accents6?.value};
+              color: ${!isDark ? theme?.colors?.accents2?.value : theme?.colors?.accents6?.value};
               padding-left: ${theme?.space?.md?.value};
               padding-right: ${theme?.space?.md?.value};
             }
@@ -106,9 +104,7 @@ const CarbonAd: React.FC<unknown> = () => {
               bottom: 0;
               right: 0;
               padding: 10px 0;
-              color: ${!isDark
-                ? theme?.colors?.accents1?.value
-                : theme?.colors?.accents4?.value};
+              color: ${!isDark ? theme?.colors?.accents1?.value : theme?.colors?.accents4?.value};
               text-transform: uppercase;
               letter-space: .value 0.5px;
               font-weight: 600;
@@ -116,8 +112,7 @@ const CarbonAd: React.FC<unknown> = () => {
               line-height: 0;
               transition: all 0.25 ease;
             }
-            @media only screen and (max-width: ${theme?.breakpoints?.xs
-                .value}) {
+            @media only screen and (max-width: ${theme?.breakpoints?.xs.value}) {
               #carbonads .carbon-text {
                 font-size: 0.9rem;
               }
diff --git a/apps/docs/src/components/code-demo/code-block.tsx b/apps/docs/src/components/code-demo/code-block.tsx
index 08cfadea77..2164a0f80c 100644
--- a/apps/docs/src/components/code-demo/code-block.tsx
+++ b/apps/docs/src/components/code-demo/code-block.tsx
@@ -1,18 +1,20 @@
 // Inspired by https://github.dev/modulz/stitches-site code demo
-import React from 'react';
-import refractor from 'refractor/core';
-import js from 'refractor/lang/javascript';
-import jsx from 'refractor/lang/jsx';
-import bash from 'refractor/lang/bash';
-import css from 'refractor/lang/css';
-import diff from 'refractor/lang/diff';
-import hastToHtml from 'hast-util-to-html';
-import rangeParser from 'parse-numeric-range';
-import highlightLine from '@lib/rehype-highlight-line';
-import highlightWord from '@lib/rehype-highlight-word';
-import { Box } from '../primitives';
-import { Pre } from './pre';
-import { styled } from '@nextui-org/react';
+import React from "react";
+import refractor from "refractor/core";
+import js from "refractor/lang/javascript";
+import jsx from "refractor/lang/jsx";
+import bash from "refractor/lang/bash";
+import css from "refractor/lang/css";
+import diff from "refractor/lang/diff";
+import hastToHtml from "hast-util-to-html";
+import rangeParser from "parse-numeric-range";
+import highlightLine from "@lib/rehype-highlight-line";
+import highlightWord from "@lib/rehype-highlight-word";
+import {styled} from "@nextui-org/react";
+
+import {Box} from "../primitives";
+
+import {Pre} from "./pre";
 
 refractor.register(js);
 refractor.register(jsx);
@@ -20,33 +22,33 @@ refractor.register(bash);
 refractor.register(css);
 refractor.register(diff);
 
-type PreProps = Omit<React.ComponentProps<typeof Pre>, 'css'>;
+type PreProps = Omit<React.ComponentProps<typeof Pre>, "css">;
 
 const WindowIcon = styled(Box, {
-  size: '$6',
-  br: '$pill',
-  mr: '$4',
+  size: "$6",
+  br: "$pill",
+  mr: "$4",
   variants: {
     color: {
       red: {
-        bg: '$red600'
+        bg: "$red600",
       },
       green: {
-        bg: '$green600'
+        bg: "$green600",
       },
       yellow: {
-        bg: '$yellow600'
-      }
-    }
-  }
+        bg: "$yellow600",
+      },
+    },
+  },
 });
 
 type CodeBlockProps = PreProps & {
-  language: 'js' | 'jsx' | 'bash' | 'css' | 'diff';
+  language: "js" | "jsx" | "bash" | "css" | "diff";
   value?: string;
   line?: string;
   css?: any;
-  mode?: 'static' | 'typewriter';
+  mode?: "static" | "typewriter";
   showLineNumbers?: boolean;
   showWindowIcons?: boolean;
 };
@@ -60,6 +62,7 @@ function getTextNodes(node: any) {
   if (!node.hasChildNodes()) return;
 
   const childNodes = node.childNodes;
+
   for (let i = 0; i < childNodes.length; i++) {
     if (childNodes[i].nodeType == Node.TEXT_NODE) {
       childTextNodes.push(childNodes[i]);
@@ -79,27 +82,27 @@ function wrapEachCharacter(textNode: any, tag: string, count: number) {
   const text = textNode.nodeValue;
   const parent = textNode.parentNode;
 
-  const characters = text.split('');
+  const characters = text.split("");
+
   characters.forEach(function (character: any, letterIndex: any) {
     const delay = (count + letterIndex) * 50;
     var element = document.createElement(tag);
     var characterNode = document.createTextNode(character);
+
     element.appendChild(characterNode);
-    element.style.opacity = '0';
+    element.style.opacity = "0";
     element.style.transition = `all ease 0ms ${delay}ms`;
 
     parent.insertBefore(element, textNode);
 
     // skip a couple of frames to trigger transition
-    requestAnimationFrame(() =>
-      requestAnimationFrame(() => (element.style.opacity = '1'))
-    );
+    requestAnimationFrame(() => requestAnimationFrame(() => (element.style.opacity = "1")));
   });
 
   parent.removeChild(textNode);
 }
 
-function CodeTypewriter({ value, className, css, ...props }: any) {
+function CodeTypewriter({value, className, css, ...props}: any) {
   const wrapperRef = React.useRef(null);
 
   React.useEffect(() => {
@@ -109,11 +112,12 @@ function CodeTypewriter({ value, className, css, ...props }: any) {
       var allTextNodes = getTextNodes(wrapper);
 
       let count = 0;
+
       allTextNodes?.forEach((textNode) => {
-        wrapEachCharacter(textNode, 'span', count);
+        wrapEachCharacter(textNode, "span", count);
         count = count + textNode.nodeValue.length;
       });
-      wrapper.style.opacity = '1';
+      wrapper.style.opacity = "1";
     }
 
     return () => (wrapper.innerHTML = value);
@@ -123,88 +127,76 @@ function CodeTypewriter({ value, className, css, ...props }: any) {
     <Pre className={className} css={css} {...props}>
       <code
         ref={wrapperRef}
-        style={{ opacity: 0 }}
         className={className}
-        dangerouslySetInnerHTML={{ __html: value }}
+        dangerouslySetInnerHTML={{__html: value}}
+        style={{opacity: 0}}
       />
     </Pre>
   );
 }
 
-const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>(
-  (_props, forwardedRef) => {
-    const {
-      language,
-      value,
-      line = '0',
-      className = '',
-      mode,
-      css,
-      showLineNumbers,
-      showWindowIcons,
-      ...props
-    } = _props;
-
-    let result: any = refractor.highlight(value || '', language);
-
-    result = highlightLine(result, rangeParser(line));
-
-    result = highlightWord(result);
-
-    // convert to html
-    result = hastToHtml(result);
-
-    // TODO reset theme
-
-    const classes = `language-${language} ${className}`;
-
-    if (mode === 'typewriter') {
-      return (
-        <CodeTypewriter
-          className={classes}
-          css={css}
-          value={result}
-          {...props}
-        />
-      );
-    }
+const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forwardedRef) => {
+  const {
+    language,
+    value,
+    line = "0",
+    className = "",
+    mode,
+    css,
+    showLineNumbers,
+    showWindowIcons,
+    ...props
+  } = _props;
+
+  let result: any = refractor.highlight(value || "", language);
+
+  result = highlightLine(result, rangeParser(line));
 
-    return (
-      <Pre
-        ref={forwardedRef}
-        className={classes}
-        css={{ pt: showWindowIcons ? 0 : '$8', ...css }}
-        data-line-numbers={showLineNumbers}
-        {...props}
-      >
-        {showWindowIcons && (
-          <Box
-            css={{
-              dflex: 'flex-start',
-              alignItems: 'center',
-              px: '$2',
-              pt: '$5',
-              pb: '$4',
-              zIndex: '$2',
-              position: 'sticky',
-              background: '$codeBackground',
-              top: 0
-            }}
-          >
-            <WindowIcon color="red" />
-            <WindowIcon color="yellow" />
-            <WindowIcon color="green" />
-          </Box>
-        )}
-        <code
-          className={classes}
-          dangerouslySetInnerHTML={{ __html: result }}
-        />
-      </Pre>
-    );
+  result = highlightWord(result);
+
+  // convert to html
+  result = hastToHtml(result);
+
+  // TODO reset theme
+
+  const classes = `language-${language} ${className}`;
+
+  if (mode === "typewriter") {
+    return <CodeTypewriter className={classes} css={css} value={result} {...props} />;
   }
-);
 
-CodeBlock.displayName = 'NextUI - CodeBlock';
+  return (
+    <Pre
+      ref={forwardedRef}
+      className={classes}
+      css={{pt: showWindowIcons ? 0 : "$8", ...css}}
+      data-line-numbers={showLineNumbers}
+      {...props}
+    >
+      {showWindowIcons && (
+        <Box
+          css={{
+            dflex: "flex-start",
+            alignItems: "center",
+            px: "$2",
+            pt: "$5",
+            pb: "$4",
+            zIndex: "$2",
+            position: "sticky",
+            background: "$codeBackground",
+            top: 0,
+          }}
+        >
+          <WindowIcon color="red" />
+          <WindowIcon color="yellow" />
+          <WindowIcon color="green" />
+        </Box>
+      )}
+      <code className={classes} dangerouslySetInnerHTML={{__html: result}} />
+    </Pre>
+  );
+});
+
+CodeBlock.displayName = "NextUI - CodeBlock";
 
 export default CodeBlock;
diff --git a/apps/docs/src/components/code-demo/code-demo.tsx b/apps/docs/src/components/code-demo/code-demo.tsx
index 6c1a847aec..5574bb83d3 100644
--- a/apps/docs/src/components/code-demo/code-demo.tsx
+++ b/apps/docs/src/components/code-demo/code-demo.tsx
@@ -1,47 +1,48 @@
 // Inspired by https://github.dev/modulz/stitches-site code demo
-import React from 'react';
-import rangeParser from 'parse-numeric-range';
-import CodeBlock from './code-block';
+import React from "react";
+import rangeParser from "parse-numeric-range";
+
+import CodeBlock from "./code-block";
 
 type CodeDemoProps = React.ComponentProps<typeof CodeBlock>;
 
-const CodeDemo: React.FC<CodeDemoProps> = ({ css, line, ...props }) => {
+const CodeDemo: React.FC<CodeDemoProps> = ({css, line, ...props}) => {
   const wrapperRef = React.useRef<HTMLPreElement>(null);
 
   React.useEffect(() => {
     const pre = wrapperRef.current;
+
     if (!pre) return;
 
     const PADDING = 15;
-    let codeInner = pre.querySelector('code') ?? null;
+    let codeInner = pre.querySelector("code") ?? null;
     const codeBlockHeight = pre.clientHeight - PADDING * 2;
 
-    const lines = pre.querySelectorAll<HTMLElement>('.highlight-line');
+    const lines = pre.querySelectorAll<HTMLElement>(".highlight-line");
 
     if (!line) {
       lines.forEach((line) => {
-        line.classList.remove('off');
+        line.classList.remove("off");
       });
 
       if (codeInner) {
         codeInner.style.transform = `translate3d(0, 0, 0)`;
       }
+
       return;
     }
 
     const linesToHighlight = rangeParser(line);
 
     const firstLineNumber = Math.max(0, linesToHighlight[0] - 1);
-    const lastLineNumber = Math.min(
-      lines.length - 1,
-      [...linesToHighlight].reverse()[0] - 1
-    );
+    const lastLineNumber = Math.min(lines.length - 1, [...linesToHighlight].reverse()[0] - 1);
     const firstLine = lines[firstLineNumber];
     const lastLine = lines[lastLineNumber];
 
     // Prevent errors in case the right line doesnt exist
     if (!firstLine || !lastLine) {
       console.warn(`CodeDemo: Error finding the right line`);
+
       return;
     }
 
@@ -59,6 +60,7 @@ const CodeDemo: React.FC<CodeDemoProps> = ({ css, line, ...props }) => {
       translateY = 0;
     } else if (codeFits && lastLineIsBelow) {
       const dist = firstLine.offsetTop - (codeBlockHeight - linesHeight) / 2;
+
       translateY = dist > maxDistance ? maxDistance : dist;
     } else {
       translateY = firstLine.offsetTop;
@@ -68,16 +70,14 @@ const CodeDemo: React.FC<CodeDemoProps> = ({ css, line, ...props }) => {
       const lineIndex = i + 1;
 
       if (linesToHighlight.includes(lineIndex)) {
-        line.setAttribute('data-highlighted', 'true');
+        line.setAttribute("data-highlighted", "true");
       } else {
-        line.setAttribute('data-highlighted', 'false');
+        line.setAttribute("data-highlighted", "false");
       }
     });
 
     requestAnimationFrame(
-      () =>
-        codeInner &&
-        (codeInner.style.transform = `translate3d(0, ${-translateY}px, 0)`)
+      () => codeInner && (codeInner.style.transform = `translate3d(0, ${-translateY}px, 0)`),
     );
   }, [line]);
 
@@ -86,13 +86,13 @@ const CodeDemo: React.FC<CodeDemoProps> = ({ css, line, ...props }) => {
       ref={wrapperRef}
       {...props}
       css={{
-        overflowY: 'hidden',
+        overflowY: "hidden",
         ...css,
         code: {
-          willChange: 'transform',
-          transition: 'transform 200ms ease-in-out',
-          ...css?.code
-        }
+          willChange: "transform",
+          transition: "transform 200ms ease-in-out",
+          ...css?.code,
+        },
       }}
     />
   );
diff --git a/apps/docs/src/components/code-demo/index.ts b/apps/docs/src/components/code-demo/index.ts
index b0b78c172f..3f94cd89df 100644
--- a/apps/docs/src/components/code-demo/index.ts
+++ b/apps/docs/src/components/code-demo/index.ts
@@ -1,5 +1,5 @@
-import CodeDemo from './code-demo';
-import CodeBlock from './code-block';
-import { Pre } from './pre';
+import CodeDemo from "./code-demo";
+import CodeBlock from "./code-block";
+import {Pre} from "./pre";
 
-export { CodeDemo, CodeBlock as CodeDemoBlock, Pre as DemoPre };
+export {CodeDemo, CodeBlock as CodeDemoBlock, Pre as DemoPre};
diff --git a/apps/docs/src/components/code-demo/pre.tsx b/apps/docs/src/components/code-demo/pre.tsx
index 5ef8ed2da4..3ad2ce3371 100644
--- a/apps/docs/src/components/code-demo/pre.tsx
+++ b/apps/docs/src/components/code-demo/pre.tsx
@@ -1,200 +1,194 @@
-import { styled } from '@nextui-org/react';
-import makeCodeTheme, { getCodeThemeColors } from '../playground/code-theme';
+import {styled} from "@nextui-org/react";
+
+import makeCodeTheme, {getCodeThemeColors} from "../playground/code-theme";
 
 const codeTheme = makeCodeTheme();
-const {
-  stringColor,
-  functionColor,
-  punctuationColor,
-  primitiveColor,
-  classnameColor
-} = getCodeThemeColors();
-
-export const Pre = styled('pre', {
+const {stringColor, functionColor, punctuationColor, primitiveColor, classnameColor} =
+  getCodeThemeColors();
+
+export const Pre = styled("pre", {
   $$background: codeTheme.plain.backgroundColor,
   $$text: codeTheme.plain.color,
-  $$outline: '$shadows$md',
+  $$outline: "$shadows$md",
   $$syntax1: functionColor?.style.color,
   $$syntax2: stringColor?.style.color,
   $$syntax3: primitiveColor?.style.color,
-  $$syntax4: '$colors$yellow600',
+  $$syntax4: "$colors$yellow600",
   $$syntax5: classnameColor?.style.color,
-  $$syntax6: '$colors$yellow600',
+  $$syntax6: "$colors$yellow600",
   $$comment: punctuationColor?.style.color,
-  $$removed: '$colors$red300',
-  $$added: '$colors$green300',
-  $$lineNumbers: '$colors$gray700',
-  $$fadedLines: '$colors$gray600',
-  $$highlightedWord1Bg: '$colors$purple500',
-  $$highlightedWord1BgActive: '$colors$purple600',
-  $$highlightedWord1Text: '$colors$purple800',
-  $$highlightedWord2Bg: '$colors$red100',
-  $$highlightedWord2BgActive: '$colors$red500',
-  $$highlightedWord2Text: '$colors$red200',
-  $$highlightedWord3Bg: '$colors$green300',
-  $$highlightedWord3BgActive: '$colors$green500',
-  $$highlightedWord3Text: '$colors$green100',
-
-  boxSizing: 'border-box',
-  borderRadius: '$lg',
-  padding: '$8',
-  overflow: 'auto',
-  fontFamily: '$mono',
-  fontSize: '$sm',
-  lineHeight: '21px',
-  whiteSpace: 'pre',
-  position: 'relative',
-  backgroundColor: '$$background',
-  color: '$$text',
-  boxShadow: '$$outline',
-  width: '100%',
-
-  '& > code': {
-    color: 'inherit',
-    fontSize: 'inherit',
-    background: 'inherit',
-    display: 'block',
-    transition: 'none',
-    '&:hover': {
-      opacity: 1
-    }
-  },
-
-  '.token.parameter': {
-    color: '$$text'
-  },
-
-  '.token.tag, .token.selector, .token.selector .class, .token.function': {
-    color: '$$syntax1'
-  },
-
-  '.token.script.language-javascript': {
-    color: '$$text'
-  },
-
-  '.token.class-name': {
-    color: '$$syntax5'
-  },
-
-  '.token.attr-value, .token.class, .token.string, .token.number, .token.unit, .token.color':
-    {
-      color: '$$syntax2'
+  $$removed: "$colors$red300",
+  $$added: "$colors$green300",
+  $$lineNumbers: "$colors$gray700",
+  $$fadedLines: "$colors$gray600",
+  $$highlightedWord1Bg: "$colors$purple500",
+  $$highlightedWord1BgActive: "$colors$purple600",
+  $$highlightedWord1Text: "$colors$purple800",
+  $$highlightedWord2Bg: "$colors$red100",
+  $$highlightedWord2BgActive: "$colors$red500",
+  $$highlightedWord2Text: "$colors$red200",
+  $$highlightedWord3Bg: "$colors$green300",
+  $$highlightedWord3BgActive: "$colors$green500",
+  $$highlightedWord3Text: "$colors$green100",
+
+  boxSizing: "border-box",
+  borderRadius: "$lg",
+  padding: "$8",
+  overflow: "auto",
+  fontFamily: "$mono",
+  fontSize: "$sm",
+  lineHeight: "21px",
+  whiteSpace: "pre",
+  position: "relative",
+  backgroundColor: "$$background",
+  color: "$$text",
+  boxShadow: "$$outline",
+  width: "100%",
+
+  "& > code": {
+    color: "inherit",
+    fontSize: "inherit",
+    background: "inherit",
+    display: "block",
+    transition: "none",
+    "&:hover": {
+      opacity: 1,
     },
+  },
 
-  '.token.keyword, .token.rule, .token.operator, .token.pseudo-class, .token.important':
-    {
-      color: '$$syntax3'
-    },
-  '.token.attr-name': {
-    color: '$$syntax6'
+  ".token.parameter": {
+    color: "$$text",
   },
-  '.token.punctuation, .token.module, .token.property': {
-    color: '$$syntax4'
+
+  ".token.tag, .token.selector, .token.selector .class, .token.function": {
+    color: "$$syntax1",
   },
 
-  '.token.comment': {
-    color: '$$comment'
+  ".token.script.language-javascript": {
+    color: "$$text",
   },
 
-  '.token.atapply .token:not(.rule):not(.important)': {
-    color: 'inherit'
+  ".token.class-name": {
+    color: "$$syntax5",
+  },
+
+  ".token.attr-value, .token.class, .token.string, .token.number, .token.unit, .token.color": {
+    color: "$$syntax2",
+  },
+
+  ".token.keyword, .token.rule, .token.operator, .token.pseudo-class, .token.important": {
+    color: "$$syntax3",
+  },
+  ".token.attr-name": {
+    color: "$$syntax6",
+  },
+  ".token.punctuation, .token.module, .token.property": {
+    color: "$$syntax4",
   },
 
-  '.language-shell .token:not(.comment)': {
-    color: 'inherit'
+  ".token.comment": {
+    color: "$$comment",
   },
 
-  '.language-css .token.function': {
-    color: 'inherit'
+  ".token.atapply .token:not(.rule):not(.important)": {
+    color: "inherit",
   },
 
-  '.token.deleted:not(.prefix), .token.inserted:not(.prefix)': {
-    display: 'block',
-    px: '$4',
-    mx: '-20px'
+  ".language-shell .token:not(.comment)": {
+    color: "inherit",
   },
 
-  '.token.deleted:not(.prefix)': {
-    color: '$$removed'
+  ".language-css .token.function": {
+    color: "inherit",
   },
 
-  '.token.inserted:not(.prefix)': {
-    color: '$$added'
+  ".token.deleted:not(.prefix), .token.inserted:not(.prefix)": {
+    display: "block",
+    px: "$4",
+    mx: "-20px",
   },
 
-  '.token.deleted.prefix, .token.inserted.prefix': {
-    userSelect: 'none'
+  ".token.deleted:not(.prefix)": {
+    color: "$$removed",
+  },
+
+  ".token.inserted:not(.prefix)": {
+    color: "$$added",
+  },
+
+  ".token.deleted.prefix, .token.inserted.prefix": {
+    userSelect: "none",
   },
 
   // Styles for highlighted word
-  '.highlight-word': {
-    $$bgAndShadow: '$$highlightedWord1Bg',
-    $$xOffset: '1px',
-    color: '$$highlightedWord1Text',
-    backgroundColor: '$$bgAndShadow',
-    display: 'inline-block',
-    boxShadow: '$$xOffset 0 0 0 $$bgAndShadow, -$$xOffset 0 0 0 $$bgAndShadow',
+  ".highlight-word": {
+    $$bgAndShadow: "$$highlightedWord1Bg",
+    $$xOffset: "1px",
+    color: "$$highlightedWord1Text",
+    backgroundColor: "$$bgAndShadow",
+    display: "inline-block",
+    boxShadow: "$$xOffset 0 0 0 $$bgAndShadow, -$$xOffset 0 0 0 $$bgAndShadow",
 
     // reset the color for tokens inside highlighted words
-    '.token': {
-      color: 'inherit'
+    ".token": {
+      color: "inherit",
     },
 
-    '&.on': {
-      $$bgAndShadow: '$$highlightedWord1BgActive',
-      transition: 'all 100ms ease',
-      cursor: 'pointer'
-    }
+    "&.on": {
+      $$bgAndShadow: "$$highlightedWord1BgActive",
+      transition: "all 100ms ease",
+      cursor: "pointer",
+    },
   },
 
-  '.token.deleted .highlight-word': {
-    $$bgAndShadow: '$$highlightedWord2Bg',
-    color: '$$highlightedWord2Text',
+  ".token.deleted .highlight-word": {
+    $$bgAndShadow: "$$highlightedWord2Bg",
+    color: "$$highlightedWord2Text",
 
-    '&.on': {
-      $$bgAndShadow: '$$highlightedWord2BgActive'
-    }
+    "&.on": {
+      $$bgAndShadow: "$$highlightedWord2BgActive",
+    },
   },
 
-  '.token.inserted .highlight-word': {
-    $$bgAndShadow: '$$highlightedWord3Bg',
-    color: '$$highlightedWord3Text',
+  ".token.inserted .highlight-word": {
+    $$bgAndShadow: "$$highlightedWord3Bg",
+    color: "$$highlightedWord3Text",
 
-    '&.on': {
-      $$bgAndShadow: '$$highlightedWord3BgActive'
-    }
+    "&.on": {
+      $$bgAndShadow: "$$highlightedWord3BgActive",
+    },
   },
 
   // Line numbers
-  '&[data-line-numbers=true]': {
-    '.highlight-line': {
-      position: 'relative',
-      paddingLeft: '$9',
-
-      '&::before': {
-        content: 'attr(data-line)',
-        position: 'absolute',
+  "&[data-line-numbers=true]": {
+    ".highlight-line": {
+      position: "relative",
+      paddingLeft: "$9",
+
+      "&::before": {
+        content: "attr(data-line)",
+        position: "absolute",
         left: -5,
         top: 0,
-        color: '$$lineNumbers'
-      }
-    }
+        color: "$$lineNumbers",
+      },
+    },
   },
 
   // Styles for highlighted lines
-  '.highlight-line': {
-    '&, *': {
-      transition: 'color 150ms ease'
+  ".highlight-line": {
+    "&, *": {
+      transition: "color 150ms ease",
+    },
+    "&[data-highlighted=false]": {
+      "&, *": {
+        color: "$$fadedLines !important",
+      },
     },
-    '&[data-highlighted=false]': {
-      '&, *': {
-        color: '$$fadedLines !important'
-      }
-    }
   },
 
   // Typewriter styles
-  '.typewriter': {
-    opacity: 0
-  }
+  ".typewriter": {
+    opacity: 0,
+  },
 });
diff --git a/apps/docs/src/components/codeblock/index.tsx b/apps/docs/src/components/codeblock/index.tsx
index fb21041a43..e3537b3414 100644
--- a/apps/docs/src/components/codeblock/index.tsx
+++ b/apps/docs/src/components/codeblock/index.tsx
@@ -1,107 +1,84 @@
-import * as React from 'react';
-import {
-  Snippet,
-  StyledSnippetPre,
-  globalCss,
-  StyledSnippetCopyButton
-} from '@nextui-org/react';
-import makeCodeTheme from '../playground/code-theme';
+import * as React from "react";
+import {Snippet, StyledSnippetPre, globalCss, StyledSnippetCopyButton} from "@nextui-org/react";
+
+import makeCodeTheme from "../playground/code-theme";
 
 const globalStyles = globalCss({
   pre: {
     border: 0,
-    padding: 0
-  }
+    padding: 0,
+  },
 });
 
-const Codeblock: React.FC<React.PropsWithChildren<unknown>> = ({
-  children
-}) => {
+const Codeblock: React.FC<React.PropsWithChildren<unknown>> = ({children}) => {
   const codeTheme = makeCodeTheme();
-  const stringColor = codeTheme.styles.find((style) =>
-    style.types.includes('string')
-  );
-  const punctuationColor = codeTheme.styles.find((style) =>
-    style.types.includes('punctuation')
-  );
-  const numberColor = codeTheme.styles.find((style) =>
-    style.types.includes('number')
-  );
-  const textColor = codeTheme.styles.find((style) =>
-    style.types.includes('text')
-  );
-  const selectorColor = codeTheme.styles.find((style) =>
-    style.types.includes('selector')
-  );
-  const commentColor = codeTheme.styles.find((style) =>
-    style.types.includes('comment')
-  );
-  const classnameColor = codeTheme.styles.find((style) =>
-    style.types.includes('tag')
-  );
-  const attrColor = codeTheme.styles.find((style) =>
-    style.types.includes('attr-name')
-  );
-  const functionColor = codeTheme.styles.find((style) =>
-    style.types.includes('function')
-  );
+  const stringColor = codeTheme.styles.find((style) => style.types.includes("string"));
+  const punctuationColor = codeTheme.styles.find((style) => style.types.includes("punctuation"));
+  const numberColor = codeTheme.styles.find((style) => style.types.includes("number"));
+  const textColor = codeTheme.styles.find((style) => style.types.includes("text"));
+  const selectorColor = codeTheme.styles.find((style) => style.types.includes("selector"));
+  const commentColor = codeTheme.styles.find((style) => style.types.includes("comment"));
+  const classnameColor = codeTheme.styles.find((style) => style.types.includes("tag"));
+  const attrColor = codeTheme.styles.find((style) => style.types.includes("attr-name"));
+  const functionColor = codeTheme.styles.find((style) => style.types.includes("function"));
 
   globalStyles();
+
   return (
     <Snippet
       css={{
         bg: codeTheme.plain.backgroundColor,
-        boxShadow: '0px 5px 20px -5px rgb(0 0 0 / 20%)',
+        boxShadow: "0px 5px 20px -5px rgb(0 0 0 / 20%)",
         [`& ${StyledSnippetPre}`]: {
-          border: '0px',
-          padding: '0px',
-          width: '100%',
-          overflow: 'scroll',
+          border: "0px",
+          padding: "0px",
+          width: "100%",
+          overflow: "scroll",
           color: textColor?.style.color,
-          borderRadius: '0px',
-          '.token.string': {
-            color: stringColor?.style.color
+          borderRadius: "0px",
+          ".token.string": {
+            color: stringColor?.style.color,
           },
-          '.token.builtin': {
-            color: classnameColor?.style.color
+          ".token.builtin": {
+            color: classnameColor?.style.color,
           },
-          '.token.punctuation': {
-            color: punctuationColor?.style.color
+          ".token.punctuation": {
+            color: punctuationColor?.style.color,
           },
-          '.token.number': {
-            color: numberColor?.style.color
+          ".token.number": {
+            color: numberColor?.style.color,
           },
-          '.token.class-name': {
-            color: classnameColor?.style.color
+          ".token.class-name": {
+            color: classnameColor?.style.color,
           },
-          '.token.comment': {
-            color: commentColor?.style.color
+          ".token.comment": {
+            color: commentColor?.style.color,
           },
-          '.token.plain-text': {
-            color: textColor?.style.color
+          ".token.plain-text": {
+            color: textColor?.style.color,
           },
-          '.token.module, .token.keyword': {
-            color: '#c678dd'
+          ".token.module, .token.keyword": {
+            color: "#c678dd",
           },
-          '.token.function': {
-            color: functionColor?.style.color
+          ".token.function": {
+            color: functionColor?.style.color,
           },
-          '.token.tag': {
-            color: selectorColor?.style.color
+          ".token.tag": {
+            color: selectorColor?.style.color,
           },
-          '.token.attr-name': {
-            color: attrColor?.style.color
+          ".token.attr-name": {
+            color: attrColor?.style.color,
+          },
+          ".token.language-javascript": {
+            color: numberColor?.style.color,
           },
-          '.token.language-javascript': {
-            color: numberColor?.style.color
-          }
         },
         [`& ${StyledSnippetCopyButton}`]: {
           bg: codeTheme.plain.backgroundColor,
           path: {
-            fill: '$colors$codeCopyIconColor'
-          }
-        }
+            fill: "$colors$codeCopyIconColor",
+          },
+        },
       }}
       symbol=""
     >
diff --git a/apps/docs/src/components/community/community.tsx b/apps/docs/src/components/community/community.tsx
index 2ecea24e52..d8dd2c82a0 100644
--- a/apps/docs/src/components/community/community.tsx
+++ b/apps/docs/src/components/community/community.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
-import dynamic from 'next/dynamic';
-import { Grid, Text, Row, Spacer } from '@nextui-org/react';
-import { StyledCommunityCard } from './styles';
-import { Twitter, Discord, Github } from '@components';
-import { Title, Subtitle } from '@primitives';
-import withDefaults from '@utils/with-defaults';
+import React from "react";
+import dynamic from "next/dynamic";
+import {Grid, Text, Row, Spacer} from "@nextui-org/react";
+import {Twitter, Discord, Github} from "@components";
+import {Title, Subtitle} from "@primitives";
+import withDefaults from "@utils/with-defaults";
+
+import {StyledCommunityCard} from "./styles";
 
 export interface CommunityProps {
   twitter?: string;
@@ -13,90 +14,76 @@ export interface CommunityProps {
 }
 
 const defaultProps = {
-  twitter: 'https://twitter.com/getnextui',
-  github: 'https://github.com/nextui-org/nextui',
-  discord: 'https://discord.gg/9b6yyZKmH4'
+  twitter: "https://twitter.com/getnextui",
+  github: "https://github.com/nextui-org/nextui",
+  discord: "https://discord.gg/9b6yyZKmH4",
 };
 
-const DynamicLopperBG = dynamic(() => import('../looper-bg'), {
-  ssr: false
+const DynamicLopperBG = dynamic(() => import("../looper-bg"), {
+  ssr: false,
 });
 
-const Community: React.FC<CommunityProps> = ({ twitter, github, discord }) => {
+const Community: React.FC<CommunityProps> = ({twitter, github, discord}) => {
   return (
-    <Grid.Container justify="center" gap={2} css={{ position: 'relative' }}>
-      <Grid xs={12} direction="column" css={{ mb: '$10' }}>
+    <Grid.Container css={{position: "relative"}} gap={2} justify="center">
+      <Grid css={{mb: "$10"}} direction="column" xs={12}>
         <Row justify="center">
-          <Title css={{ textAlign: 'center' }}>Community</Title>
+          <Title css={{textAlign: "center"}}>Community</Title>
         </Row>
         <Row justify="center">
-          <Subtitle css={{ textAlign: 'center' }}>
+          <Subtitle css={{textAlign: "center"}}>
             Get involved in our community. Everyone is welcome!
           </Subtitle>
         </Row>
       </Grid>
-      <Grid xs={12} sm={6} md={3} justify="center">
-        <StyledCommunityCard
-          href={twitter}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Row justify="flex-start" align="center">
+      <Grid justify="center" md={3} sm={6} xs={12}>
+        <StyledCommunityCard href={twitter} rel="noopener noreferrer" target="_blank">
+          <Row align="center" justify="flex-start">
             <Twitter fill="#00ACEE" size={30} />
             <Spacer x={0.4} />
             <Text h5>Twitter</Text>
           </Row>
           <Spacer y={0.5} />
-          <Row justify="flex-start" align="center">
-            <Text css={{ color: '$accents8', textAlign: 'left' }}>
+          <Row align="center" justify="flex-start">
+            <Text css={{color: "$accents8", textAlign: "left"}}>
               For announcements, tips and general information.
             </Text>
           </Row>
         </StyledCommunityCard>
       </Grid>
-      <Grid xs={12} sm={6} md={3} justify="center">
-        <StyledCommunityCard
-          href={discord}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Row justify="flex-start" align="center">
+      <Grid justify="center" md={3} sm={6} xs={12}>
+        <StyledCommunityCard href={discord} rel="noopener noreferrer" target="_blank">
+          <Row align="center" justify="flex-start">
             <Discord fill="#7289DA" size={30} />
             <Spacer x={0.4} />
             <Text h5>Discord</Text>
           </Row>
           <Spacer y={0.5} />
-          <Row justify="flex-start" align="center">
-            <Text css={{ color: '$accents8' }}>
+          <Row align="center" justify="flex-start">
+            <Text css={{color: "$accents8"}}>
               To get involved in the community, ask questions and share tips.
             </Text>
           </Row>
         </StyledCommunityCard>
       </Grid>
-      <Grid xs={12} sm={6} md={3} justify="center">
-        <StyledCommunityCard
-          href={github}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Row justify="flex-start" align="center">
+      <Grid justify="center" md={3} sm={6} xs={12}>
+        <StyledCommunityCard href={github} rel="noopener noreferrer" target="_blank">
+          <Row align="center" justify="flex-start">
             <Github className="github-icon" fill="#E7E7E7" size={30} />
             <Spacer x={0.4} />
             <Text h5>GitHub</Text>
           </Row>
           <Spacer y={0.5} />
-          <Row justify="flex-start" align="center">
-            <Text css={{ color: '$accents8' }}>
-              For issues, feature requests and contribute.
-            </Text>
+          <Row align="center" justify="flex-start">
+            <Text css={{color: "$accents8"}}>For issues, feature requests and contribute.</Text>
           </Row>
         </StyledCommunityCard>
       </Grid>
       <DynamicLopperBG
         css={{
-          zIndex: '-$1',
-          position: 'absolute',
-          transform: 'translate(5%, -70%)'
+          zIndex: "-$1",
+          position: "absolute",
+          transform: "translate(5%, -70%)",
         }}
       />
     </Grid.Container>
diff --git a/apps/docs/src/components/community/index.ts b/apps/docs/src/components/community/index.ts
index e16d7f7a0b..2d08041e7b 100644
--- a/apps/docs/src/components/community/index.ts
+++ b/apps/docs/src/components/community/index.ts
@@ -1,3 +1,3 @@
-import Community from './community';
+import Community from "./community";
 
 export default Community;
diff --git a/apps/docs/src/components/community/styles.ts b/apps/docs/src/components/community/styles.ts
index ad8e8731a0..f880a391da 100644
--- a/apps/docs/src/components/community/styles.ts
+++ b/apps/docs/src/components/community/styles.ts
@@ -1,17 +1,17 @@
-import { styled } from '@nextui-org/react';
-import { StyledCardBlur } from '@primitives';
-import { lightTheme } from '@theme/shared';
+import {styled} from "@nextui-org/react";
+import {StyledCardBlur} from "@primitives";
+import {lightTheme} from "@theme/shared";
 
-export const StyledCommunityCard = styled('a', StyledCardBlur, {
-  width: '100%',
-  minHeight: '140px',
-  transition: '$default',
+export const StyledCommunityCard = styled("a", StyledCardBlur, {
+  width: "100%",
+  minHeight: "140px",
+  transition: "$default",
   [`.${lightTheme} &`]: {
-    '& .github-icon > path': {
-      fill: '#343434'
-    }
+    "& .github-icon > path": {
+      fill: "#343434",
+    },
+  },
+  "&:hover": {
+    opacity: 0.8,
   },
-  '&:hover': {
-    opacity: 0.8
-  }
 });
diff --git a/apps/docs/src/components/css-transition/index.tsx b/apps/docs/src/components/css-transition/index.tsx
index 9a1ee29efd..1125efb9df 100644
--- a/apps/docs/src/components/css-transition/index.tsx
+++ b/apps/docs/src/components/css-transition/index.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import withDefaults from '@utils/with-defaults';
+import React, {useEffect, useState} from "react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   visible?: boolean;
@@ -15,8 +15,8 @@ const defaultProps = {
   enterTime: 60,
   leaveTime: 60,
   clearTime: 60,
-  className: '',
-  name: 'transition',
+  className: "",
+  name: "transition",
 };
 
 export type CSSTransitionProps = Props & typeof defaultProps;
@@ -31,12 +31,13 @@ const CSSTransition: React.FC<React.PropsWithChildren<CSSTransitionProps>> = ({
   name,
   ...props
 }) => {
-  const [classes, setClasses] = useState<string>('');
+  const [classes, setClasses] = useState<string>("");
   const [renderable, setRenderable] = useState<boolean>(visible);
 
   useEffect(() => {
-    const statusClassName = visible ? 'enter' : 'leave';
+    const statusClassName = visible ? "enter" : "leave";
     const time = visible ? enterTime : leaveTime;
+
     if (visible && !renderable) {
       setRenderable(true);
     }
@@ -45,16 +46,14 @@ const CSSTransition: React.FC<React.PropsWithChildren<CSSTransitionProps>> = ({
 
     // set class to active
     const timer = setTimeout(() => {
-      setClasses(
-        `${name}-${statusClassName} ${name}-${statusClassName}-active`
-      );
+      setClasses(`${name}-${statusClassName} ${name}-${statusClassName}-active`);
       clearTimeout(timer);
     }, time);
 
     // remove classess when animation over
     const clearClassesTimer = setTimeout(() => {
       if (!visible) {
-        setClasses('');
+        setClasses("");
         setRenderable(false);
       }
       clearTimeout(clearClassesTimer);
diff --git a/apps/docs/src/components/dots-container/index.tsx b/apps/docs/src/components/dots-container/index.tsx
index 71a759348b..5ed2d9cd11 100644
--- a/apps/docs/src/components/dots-container/index.tsx
+++ b/apps/docs/src/components/dots-container/index.tsx
@@ -1,10 +1,9 @@
-import * as React from 'react';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+const DotsContainer: React.FC<React.PropsWithChildren<unknown>> = ({children}) => {
+  const {theme} = useTheme();
 
-const DotsContainer: React.FC<React.PropsWithChildren<unknown>> = ({
-  children
-}) => {
-  const { theme } = useTheme();
   return (
     <div className="wrapper">
       {children}
@@ -21,11 +20,7 @@ const DotsContainer: React.FC<React.PropsWithChildren<unknown>> = ({
                 transparent 1%
               )
               50%,
-            linear-gradient(
-                ${theme?.colors?.background?.value} 21px,
-                transparent 1%
-              )
-              50%,
+            linear-gradient(${theme?.colors?.background?.value} 21px, transparent 1%) 50%,
             ${theme?.colors?.accents2?.value};
           background-size: var(--dot-space) var(--dot-space);
         }
diff --git a/apps/docs/src/components/features-grid/features-grid.tsx b/apps/docs/src/components/features-grid/features-grid.tsx
index f83dd00958..7b0929fec7 100644
--- a/apps/docs/src/components/features-grid/features-grid.tsx
+++ b/apps/docs/src/components/features-grid/features-grid.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
-import { Grid, GridProps, Text, Row, CSS } from '@nextui-org/react';
-import { FeatureItem } from './styles';
-import withDefaults from '@utils/with-defaults';
-import { useRouter } from 'next/router';
+import React from "react";
+import {Grid, GridProps, Text, Row, CSS} from "@nextui-org/react";
+import withDefaults from "@utils/with-defaults";
+import {useRouter} from "next/router";
+
+import {FeatureItem} from "./styles";
 
 export interface Feature {
   title: string;
@@ -13,9 +14,9 @@ export interface Feature {
 
 interface Props {
   features: Feature[];
-  xs?: GridProps['xs'];
-  sm?: GridProps['sm'];
-  lg?: GridProps['lg'];
+  xs?: GridProps["xs"];
+  sm?: GridProps["sm"];
+  lg?: GridProps["lg"];
   css?: CSS;
   itemCss?: CSS;
 }
@@ -25,7 +26,7 @@ export type FeaturesGridProps = Props & GridProps;
 const defaultProps = {
   xs: 12,
   sm: 4,
-  lg: 3
+  lg: 3,
 };
 
 const FeaturesGrid: React.FC<FeaturesGridProps> = ({
@@ -43,9 +44,9 @@ const FeaturesGrid: React.FC<FeaturesGridProps> = ({
   };
 
   return (
-    <Grid.Container gap={2} css={{ px: 0, ...(css as any) }} {...props}>
+    <Grid.Container css={{px: 0, ...(css as any)}} gap={2} {...props}>
       {features.map((feat, index) => (
-        <Grid key={`${feat.title}_${index}`} xs={xs} sm={sm} lg={lg}>
+        <Grid key={`${feat.title}_${index}`} lg={lg} sm={sm} xs={xs}>
           <FeatureItem
             clickable={!!feat.href}
             css={itemCss}
@@ -57,19 +58,16 @@ const FeaturesGrid: React.FC<FeaturesGridProps> = ({
                 className="feature-title"
                 css={{
                   my: 0,
-                  fontSize: '1.1rem',
-                  fontWeight: '$semibold',
-                  ml: '$4'
+                  fontSize: "1.1rem",
+                  fontWeight: "$semibold",
+                  ml: "$4",
                 }}
               >
                 {feat.title}
               </Text>
             </Row>
-            <Row align="center" css={{ px: '$2', pt: '$4', pb: '$2' }}>
-              <Text
-                className="feature-description"
-                css={{ color: '$accents8' }}
-              >
+            <Row align="center" css={{px: "$2", pt: "$4", pb: "$2"}}>
+              <Text className="feature-description" css={{color: "$accents8"}}>
                 {feat.description}
               </Text>
             </Row>
diff --git a/apps/docs/src/components/features-grid/index.tsx b/apps/docs/src/components/features-grid/index.tsx
index 4f474925c9..2e2205bdb0 100644
--- a/apps/docs/src/components/features-grid/index.tsx
+++ b/apps/docs/src/components/features-grid/index.tsx
@@ -1,5 +1,5 @@
-import FeaturesGrid from './features-grid';
+import FeaturesGrid from "./features-grid";
 
-export type { Feature, FeaturesGridProps } from './features-grid';
+export type {Feature, FeaturesGridProps} from "./features-grid";
 
 export default FeaturesGrid;
diff --git a/apps/docs/src/components/features-grid/styles.ts b/apps/docs/src/components/features-grid/styles.ts
index 6694d96b13..f475d526b0 100644
--- a/apps/docs/src/components/features-grid/styles.ts
+++ b/apps/docs/src/components/features-grid/styles.ts
@@ -1,29 +1,29 @@
-import { Grid, styled } from '@nextui-org/react';
-import { lightTheme } from '@theme/shared';
-import { StyledCardBlur } from '@primitives';
+import {Grid, styled} from "@nextui-org/react";
+import {lightTheme} from "@theme/shared";
+import {StyledCardBlur} from "@primitives";
 
 export const FeatureItem = styled(Grid, StyledCardBlur, {
-  transition: '$default',
-  minWidth: '100%',
-  '& .icon-wrapper': {
-    dflex: 'center',
-    background: 'rgb(42,22,60)',
-    br: '$pill',
-    p: '$4'
+  transition: "$default",
+  minWidth: "100%",
+  "& .icon-wrapper": {
+    dflex: "center",
+    background: "rgb(42,22,60)",
+    br: "$pill",
+    p: "$4",
   },
   [`.${lightTheme} &`]: {
-    '& .icon-wrapper': {
-      background: '$pink100'
-    }
+    "& .icon-wrapper": {
+      background: "$pink100",
+    },
   },
   variants: {
     clickable: {
       true: {
-        cursor: 'pointer',
-        '&:hover': {
-          opacity: 0.8
-        }
-      }
-    }
-  }
+        cursor: "pointer",
+        "&:hover": {
+          opacity: 0.8,
+        },
+      },
+    },
+  },
 });
diff --git a/apps/docs/src/components/fixed/index.tsx b/apps/docs/src/components/fixed/index.tsx
index 23ec3915f5..a1946bab86 100644
--- a/apps/docs/src/components/fixed/index.tsx
+++ b/apps/docs/src/components/fixed/index.tsx
@@ -1,7 +1,7 @@
-import * as React from 'react';
-import cn from 'classnames';
-import withDefaults from '@utils/with-defaults';
-import { styled, CSS } from '@nextui-org/react';
+import * as React from "react";
+import cn from "classnames";
+import withDefaults from "@utils/with-defaults";
+import {styled, CSS} from "@nextui-org/react";
 
 export interface FixedProps {
   offset?: number;
@@ -13,20 +13,20 @@ export interface FixedProps {
 const defaultProps = {
   offset: 0,
   shadow: false,
-  className: ''
+  className: "",
 };
 
-const StyledFixed = styled('div', {
-  background: 'transparent',
-  position: 'fixed',
-  zIndex: '$max',
+const StyledFixed = styled("div", {
+  background: "transparent",
+  position: "fixed",
+  zIndex: "$max",
   variants: {
     shadow: {
       true: {
-        bs: '$sm'
-      }
-    }
-  }
+        bs: "$sm",
+      },
+    },
+  },
 });
 
 const Fixed: React.FC<React.PropsWithChildren<FixedProps>> = ({
@@ -34,12 +34,12 @@ const Fixed: React.FC<React.PropsWithChildren<FixedProps>> = ({
   children,
   shadow,
   className,
-  css
+  css,
 }) => {
   return (
     <StyledFixed
-      css={{ ...(css as any), top: offset || 0 }}
-      className={cn(className, { shadow })}
+      className={cn(className, {shadow})}
+      css={{...(css as any), top: offset || 0}}
       shadow={shadow}
     >
       {children}
diff --git a/apps/docs/src/components/heading/index.tsx b/apps/docs/src/components/heading/index.tsx
index d6a240b7c2..2627342e96 100644
--- a/apps/docs/src/components/heading/index.tsx
+++ b/apps/docs/src/components/heading/index.tsx
@@ -1,22 +1,19 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
 
 export interface Props {
   title: string;
 }
 
 const defaultProps = {
-  title: 'Heading',
+  title: "Heading",
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
 export type HeadingProps = Props & typeof defaultProps & NativeAttrs;
 
-const Heading: React.FC<React.PropsWithChildren<HeadingProps>> = ({
-  title,
-  children,
-}) => {
+const Heading: React.FC<React.PropsWithChildren<HeadingProps>> = ({title, children}) => {
   return (
     <div className="heading">
       <h4>{title}</h4>
diff --git a/apps/docs/src/components/hero/components.tsx b/apps/docs/src/components/hero/components.tsx
index be658f93f7..8e74de6e9e 100644
--- a/apps/docs/src/components/hero/components.tsx
+++ b/apps/docs/src/components/hero/components.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, {useEffect} from "react";
 import {
   Input,
   Card,
@@ -11,21 +11,21 @@ import {
   Pagination,
   Tooltip,
   Button,
-  StyledButton
-} from '@nextui-org/react';
-import { useRouter } from 'next/router';
-import { levitating } from '@utils/animations';
-import { Logo, UserTwitterCard, ThemeSwitch } from '@components';
-import { useIsMobile } from '@hooks/use-media-query';
-import { darkTheme } from '@theme/shared';
+  StyledButton,
+} from "@nextui-org/react";
+import {useRouter} from "next/router";
+import {levitating} from "@utils/animations";
+import {Logo, UserTwitterCard, ThemeSwitch} from "@components";
+import {useIsMobile} from "@hooks/use-media-query";
+import {darkTheme} from "@theme/shared";
 
-const StyledContainer = styled('div', {
-  dflex: 'center',
-  position: 'absolute',
-  zIndex: '$max',
-  '@xsMax': {
-    display: 'none'
-  }
+const StyledContainer = styled("div", {
+  dflex: "center",
+  position: "absolute",
+  zIndex: "$max",
+  "@xsMax": {
+    display: "none",
+  },
 });
 
 const HeroComponents = () => {
@@ -34,7 +34,8 @@ const HeroComponents = () => {
 
   useEffect(() => {
     if (isMobile) {
-      const element = document.getElementById('nextui-tooltip');
+      const element = document.getElementById("nextui-tooltip");
+
       if (element) {
         element.remove();
       }
@@ -46,73 +47,73 @@ const HeroComponents = () => {
       <Input
         bordered
         clearable
-        labelPlaceholder="Input"
         color="secondary"
-        initialValue="NextUI"
         css={{
-          position: 'absolute',
-          top: '-200px',
-          right: '-100px',
-          $$inputBorderColor: '$colors$secondary',
-          animation: `${levitating} 10s ease infinite`
+          position: "absolute",
+          top: "-200px",
+          right: "-100px",
+          $$inputBorderColor: "$colors$secondary",
+          animation: `${levitating} 10s ease infinite`,
         }}
+        initialValue="NextUI"
+        labelPlaceholder="Input"
       />
       <ThemeSwitch
         css={{
-          color: '$black',
-          position: 'absolute',
-          top: '-170%',
-          right: '-120%',
+          color: "$black",
+          position: "absolute",
+          top: "-170%",
+          right: "-120%",
           animation: `${levitating} 13s ease infinite 1s reverse`,
-          '.nextui-switch-circle': {
-            bg: '$white'
-          }
+          ".nextui-switch-circle": {
+            bg: "$white",
+          },
         }}
       />
       <UserTwitterCard
-        avatarUrl="/avatars/avatar-3.png"
         avatarProps={{
           squared: false,
-          color: 'default',
+          color: "default",
           css: {
-            '.nextui-avatar-img': {
-              borderColor: '#FF1CF7'
-            }
-          }
+            ".nextui-avatar-img": {
+              borderColor: "#FF1CF7",
+            },
+          },
         }}
+        avatarUrl="/avatars/avatar-3.png"
         css={{
-          position: 'relative',
-          cursor: 'pointer',
-          top: '-120px',
-          left: '100px',
-          px: '$8',
-          mw: '280px',
+          position: "relative",
+          cursor: "pointer",
+          top: "-120px",
+          left: "100px",
+          px: "$8",
+          mw: "280px",
           animation: `${levitating} 12s ease infinite`,
-          backgroundColor: '$cardBackground',
-          boxShadow: '$sm'
+          backgroundColor: "$cardBackground",
+          boxShadow: "$sm",
         }}
       />
       <Grid
         css={{
-          position: 'absolute',
-          bottom: '-20px',
-          left: '200px',
-          animation: `${levitating} 14s ease infinite`
+          position: "absolute",
+          bottom: "-20px",
+          left: "200px",
+          animation: `${levitating} 14s ease infinite`,
         }}
       >
         <Tooltip
-          keepMounted
           initialVisible
-          content={'Developers love Next.js'}
-          offset={50}
+          keepMounted
           color="secondary"
-          trigger="click"
+          content={"Developers love Next.js"}
           css={{
             animation: `${levitating} 14s ease infinite 0.1s`,
-            marginLeft: '-80px',
-            marginTop: '$2',
-            transform: 'translate(0, 0)'
+            marginLeft: "-80px",
+            marginTop: "$2",
+            transform: "translate(0, 0)",
           }}
+          offset={50}
+          trigger="click"
         >
           <Button auto bordered borderWeight="bold" color="primary" size="sm">
             Tooltip
@@ -122,70 +123,65 @@ const HeroComponents = () => {
       <Card
         css={{
           p: 0,
-          w: '120px',
-          h: '120px',
-          position: 'absolute',
-          right: '-240px',
-          top: '-300px',
-          animation: `${levitating} 13s ease infinite 1s`
+          w: "120px",
+          h: "120px",
+          position: "absolute",
+          right: "-240px",
+          top: "-300px",
+          animation: `${levitating} 13s ease infinite 1s`,
         }}
       >
-        <Card.Header css={{ position: 'absolute', zIndex: 1, top: -5 }}>
+        <Card.Header css={{position: "absolute", zIndex: 1, top: -5}}>
           <Col>
-            <Text
-              size={10}
-              weight="bold"
-              transform="uppercase"
-              color="#ffffffAA"
-            >
+            <Text color="#ffffffAA" size={10} transform="uppercase" weight="bold">
               New
             </Text>
           </Col>
         </Card.Header>
-        <Card.Body css={{ p: 0 }}>
+        <Card.Body css={{p: 0}}>
           <Card.Image
-            src="/images/card-example-6.jpeg"
-            height={400}
-            objectFit="cover"
-            width="100%"
             alt="Card example background"
             css={{
-              width: '100%',
-              transform: 'translateY(-30%)',
-              height: '150%'
+              width: "100%",
+              transform: "translateY(-30%)",
+              height: "150%",
             }}
+            height={400}
+            objectFit="cover"
+            src="/images/card-example-6.jpeg"
+            width="100%"
           />
         </Card.Body>
         <Card.Footer
           css={{
-            position: 'absolute',
-            bf: 'saturate(180%) blur(10px)',
-            bg: '$backgroundBlur',
-            maxHeight: '$space$12',
-            borderTop: '$borderWeights$light solid rgba(255, 255, 255, 0.2)',
-            px: '$6',
-            bottom: '0px',
-            zIndex: '$max'
+            position: "absolute",
+            bf: "saturate(180%) blur(10px)",
+            bg: "$backgroundBlur",
+            maxHeight: "$space$12",
+            borderTop: "$borderWeights$light solid rgba(255, 255, 255, 0.2)",
+            px: "$6",
+            bottom: "0px",
+            zIndex: "$max",
           }}
         >
           <Row justify="space-between">
             <Text
               color="#fff"
-              size={12}
               css={{
-                fontWeight: '$semibold',
-                textShadow: '0 2px 2px rgba(0,0,0,0.3)'
+                fontWeight: "$semibold",
+                textShadow: "0 2px 2px rgba(0,0,0,0.3)",
               }}
+              size={12}
             >
               Camera
             </Text>
             <Text
               color="#fff"
-              size={12}
               css={{
-                fontWeight: '$semibold',
-                textShadow: '0 2px 2px rgba(0,0,0,0.3)'
+                fontWeight: "$semibold",
+                textShadow: "0 2px 2px rgba(0,0,0,0.3)",
               }}
+              size={12}
             >
               $525
             </Text>
@@ -194,22 +190,22 @@ const HeroComponents = () => {
       </Card>
       <Button.Group
         bordered
-        size="sm"
-        color="gradient"
         borderWeight="bold"
+        color="gradient"
         css={{
-          position: 'absolute',
-          top: '-160px',
-          left: '180%',
+          position: "absolute",
+          top: "-160px",
+          left: "180%",
           animation: `${levitating} 16s ease infinite`,
           [`& ${StyledButton}`]: {
-            '&:not(:last-child)&:not(:first-child)': {
+            "&:not(:last-child)&:not(:first-child)": {
               pl: 0,
-              py: 'calc($space$1 + 1px)',
-              filter: 'hue-rotate(-45deg)'
-            }
-          }
+              py: "calc($space$1 + 1px)",
+              filter: "hue-rotate(-45deg)",
+            },
+          },
         }}
+        size="sm"
       >
         <Button>Fast</Button>
         <Button>Modern</Button>
@@ -217,51 +213,51 @@ const HeroComponents = () => {
       </Button.Group>
       <Grid
         css={{
-          position: 'absolute',
-          size: '100px',
-          cursor: 'pointer',
-          top: '-110px',
-          right: '-220px',
-          dflex: 'center',
+          position: "absolute",
+          size: "100px",
+          cursor: "pointer",
+          top: "-110px",
+          right: "-220px",
+          dflex: "center",
           animation: `${levitating} 18s ease infinite`,
-          backgroundColor: '$cardBackground',
-          boxShadow: '$sm',
-          borderRadius: '$lg'
+          backgroundColor: "$cardBackground",
+          boxShadow: "$sm",
+          borderRadius: "$lg",
         }}
         onClick={() => {
-          router.push('/docs/guide/getting-started');
+          router.push("/docs/guide/getting-started");
         }}
       >
         <Logo small size={60} />
       </Grid>
       <Pagination
         noMargin
-        shadow
         rounded
-        size="md"
-        total={10}
-        initialPage={6}
+        shadow
         css={{
-          position: 'absolute',
-          top: '-80px',
-          right: '-190%',
-          animation: `${levitating} 20s ease infinite 2s`
+          position: "absolute",
+          top: "-80px",
+          right: "-190%",
+          animation: `${levitating} 20s ease infinite 2s`,
         }}
+        initialPage={6}
+        size="md"
+        total={10}
       />
       <Grid
         css={{
-          position: 'absolute',
-          zIndex: '$3',
-          size: '80px',
-          top: '-20px',
-          right: '-120%',
-          display: 'flex',
+          position: "absolute",
+          zIndex: "$3",
+          size: "80px",
+          top: "-20px",
+          right: "-120%",
+          display: "flex",
           animation: `${levitating} 23s ease infinite`,
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: '$cardBackground',
-          boxShadow: '$sm',
-          borderRadius: '$lg'
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "$cardBackground",
+          boxShadow: "$sm",
+          borderRadius: "$lg",
         }}
       >
         <Loading size="lg" />
@@ -269,65 +265,65 @@ const HeroComponents = () => {
       <Card
         css={{
           p: 0,
-          w: '200px',
-          h: '200px',
-          zIndex: '$2',
-          position: 'absolute',
-          right: '-95%',
-          top: '40px',
-          animation: `${levitating} 18s ease infinite 1s`
+          w: "200px",
+          h: "200px",
+          zIndex: "$2",
+          position: "absolute",
+          right: "-95%",
+          top: "40px",
+          animation: `${levitating} 18s ease infinite 1s`,
         }}
       >
-        <Card.Body css={{ p: 0 }}>
+        <Card.Body css={{p: 0}}>
           <Card.Image
-            src="/images/hero-card.png"
-            objectFit="cover"
+            alt="Hero Card background"
             height={400}
+            objectFit="cover"
+            src="/images/hero-card.png"
             width="100%"
-            alt="Hero Card background"
           />
         </Card.Body>
         <Card.Footer
           isBlurred
           css={{
-            position: 'absolute',
-            bf: 'saturate(180%) blur(10px)',
-            bg: '$backgroundBlur',
-            px: '$6',
-            py: '$4',
-            borderTop: '$borderWeights$light solid rgba(255, 255, 255, 0.2)',
+            position: "absolute",
+            bf: "saturate(180%) blur(10px)",
+            bg: "$backgroundBlur",
+            px: "$6",
+            py: "$4",
+            borderTop: "$borderWeights$light solid rgba(255, 255, 255, 0.2)",
             bottom: 0,
-            zIndex: 1
+            zIndex: 1,
           }}
         >
           <Row align="center">
             <Col>
               <Text
-                size={12}
                 css={{
-                  textShadow: '0 2px 2px rgba(0,0,0,0.3)',
-                  color: '$white'
+                  textShadow: "0 2px 2px rgba(0,0,0,0.3)",
+                  color: "$white",
                 }}
+                size={12}
               >
                 Available soon.
               </Text>
             </Col>
             <Col>
-              <Row justify="flex-end" align="center">
+              <Row align="center" justify="flex-end">
                 <Button
                   auto
                   rounded
                   color="secondary"
-                  size="sm"
                   css={{
-                    px: '$4',
-                    height: '$space$10',
-                    color: '$white',
+                    px: "$4",
+                    height: "$space$10",
+                    color: "$white",
                     [`.${darkTheme} &`]: {
-                      bg: '$purple900',
-                      color: '$purple300'
-                    }
+                      bg: "$purple900",
+                      color: "$purple300",
+                    },
                   }}
+                  size="sm"
                 >
                   Notify Me
                 </Button>
diff --git a/apps/docs/src/components/hero/index.tsx b/apps/docs/src/components/hero/index.tsx
index 4bba1a744d..aef2a0affd 100644
--- a/apps/docs/src/components/hero/index.tsx
+++ b/apps/docs/src/components/hero/index.tsx
@@ -1,83 +1,74 @@
-import React from 'react';
-import { useRouter } from 'next/router';
-import dynamic from 'next/dynamic';
-import {
-  Container,
-  Row,
-  Col,
-  Spacer,
-  Button,
-  Grid,
-  Snippet
-} from '@nextui-org/react';
-import { StyledTitle, StyledGradientTitle, StyledSubtitle } from './styles';
+import React from "react";
+import {useRouter} from "next/router";
+import dynamic from "next/dynamic";
+import {Container, Row, Col, Spacer, Button, Grid, Snippet} from "@nextui-org/react";
 
-const DynamicLopperBG = dynamic(() => import('../looper-bg'), {
-  ssr: true
+import {StyledTitle, StyledGradientTitle, StyledSubtitle} from "./styles";
+
+const DynamicLopperBG = dynamic(() => import("../looper-bg"), {
+  ssr: true,
 });
 
-const DynamicHeroComponents = dynamic(() => import('./components'), {
-  ssr: true
+const DynamicHeroComponents = dynamic(() => import("./components"), {
+  ssr: true,
 });
 
 const Hero: React.FC = () => {
   const router = useRouter();
 
   const handleGetStartedClick = () => {
-    router.push('docs/guide/getting-started');
+    router.push("docs/guide/getting-started");
   };
 
   return (
     <Container
-      lg={true}
-      className="hero__container"
-      display="flex"
       alignItems="center"
-      justify="space-between"
-      wrap="nowrap"
-      gap={0}
       as="section"
+      className="hero__container"
       css={{
-        position: 'relative',
-        height: 'calc(84vh - 76px)',
-        '@xsMax': {
-          height: 'calc(100vh - 64px)'
-        }
+        position: "relative",
+        height: "calc(84vh - 76px)",
+        "@xsMax": {
+          height: "calc(100vh - 64px)",
+        },
       }}
+      display="flex"
+      gap={0}
+      justify="space-between"
+      lg={true}
+      wrap="nowrap"
     >
       <Row
-        className="hero__content"
         align="center"
-        wrap="wrap"
+        className="hero__content"
         css={{
-          zIndex: '$2',
-          '@mdMax': {
-            mt: '80px',
-            p: '0 8px'
+          zIndex: "$2",
+          "@mdMax": {
+            mt: "80px",
+            p: "0 8px",
+          },
+          "@xsMax": {
+            mt: "0px",
           },
-          '@xsMax': {
-            mt: '0px'
-          }
         }}
+        wrap="wrap"
       >
         <Col
           className="hero__left-container"
           css={{
-            position: 'relative',
-            zIndex: '$2',
-            '@md': {
-              width: '50%'
+            position: "relative",
+            zIndex: "$2",
+            "@md": {
+              width: "50%",
+            },
+            "@mdMax": {
+              width: "100%",
             },
-            '@mdMax': {
-              width: '100%'
-            }
           }}
         >
-          <StyledTitle css={{ mb: 0 }}>Make&nbsp;</StyledTitle>
-          <StyledGradientTitle css={{ mb: 0 }}>
-            beautiful&nbsp;
-          </StyledGradientTitle>
-          <StyledTitle css={{ mb: 0, '@xsMax': { d: 'inline-block' } }}>
+          <StyledTitle css={{mb: 0}}>Make&nbsp;</StyledTitle>
+          <StyledGradientTitle css={{mb: 0}}>beautiful&nbsp;</StyledGradientTitle>
+          <StyledTitle css={{mb: 0, "@xsMax": {d: "inline-block"}}}>
             websites regardless of your design experience.
           </StyledTitle>
 
@@ -86,53 +77,52 @@ const Hero: React.FC = () => {
           </StyledSubtitle>
           <Spacer y={1.5} />
           <Grid.Container
-            gap={0}
             alignItems="center"
             css={{
-              '@md': {
-                mt: '$lg'
-              }
+              "@md": {
+                mt: "$lg",
+              },
             }}
+            gap={0}
           >
-            <Grid xs={12} sm={3}>
+            <Grid sm={3} xs={12}>
               <Button
                 auto
                 rounded
                 className="hero__get-started-button"
-                size="lg"
-                onClick={handleGetStartedClick}
                 css={{
-                  maxHeight: '$space$14',
-                  '@xsMax': {
-                    width: '100%',
-                    marginBottom: '$8'
-                  }
+                  maxHeight: "$space$14",
+                  "@xsMax": {
+                    width: "100%",
+                    marginBottom: "$8",
+                  },
                 }}
+                size="lg"
+                onClick={handleGetStartedClick}
               >
                 Get Started
               </Button>
             </Grid>
-            <Grid xs={12} sm={9}>
+            <Grid sm={9} xs={12}>
               <Snippet
                 className="hero__snippet"
-                tooltipColor="primary"
                 css={{
-                  borderRadius: '$pill',
-                  height: '$space$14',
+                  borderRadius: "$pill",
+                  height: "$space$14",
                   py: 0,
-                  transition: 'opacity 0.3s ease-in-out',
-                  dflex: 'center',
-                  boxShadow: '$sm',
-                  bg: '$backgroundContrast',
-                  '@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))':
-                    {
-                      bf: 'saturate(180%) blur(10px)',
-                      bg: '$backgroundBlur'
-                    },
-                  '@xsMax': {
-                    width: '100%'
-                  }
+                  transition: "opacity 0.3s ease-in-out",
+                  dflex: "center",
+                  boxShadow: "$sm",
+                  bg: "$backgroundContrast",
+                  "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
+                    bf: "saturate(180%) blur(10px)",
+                    bg: "$backgroundBlur",
+                  },
+                  "@xsMax": {
+                    width: "100%",
+                  },
                 }}
+                tooltipColor="primary"
               >
                 npm install @nextui-org/react
               </Snippet>
@@ -140,24 +130,24 @@ const Hero: React.FC = () => {
           </Grid.Container>
         </Col>
         <Col
-          span={6}
           className="hero__right-container"
           css={{
-            position: 'relative',
-            height: '100%',
-            '@mdMax': {
-              display: 'none'
-            }
+            position: "relative",
+            height: "100%",
+            "@mdMax": {
+              display: "none",
+            },
           }}
+          span={6}
         >
           <DynamicHeroComponents />
         </Col>
       </Row>
       <DynamicLopperBG
         css={{
-          zIndex: '0',
-          position: 'absolute',
-          transform: 'translate(10%, 5%)'
+          zIndex: "0",
+          position: "absolute",
+          transform: "translate(10%, 5%)",
         }}
       />
     </Container>
diff --git a/apps/docs/src/components/hero/styles.ts b/apps/docs/src/components/hero/styles.ts
index 7c3269e651..b8f982ed88 100644
--- a/apps/docs/src/components/hero/styles.ts
+++ b/apps/docs/src/components/hero/styles.ts
@@ -1,31 +1,31 @@
-import { styled } from '@nextui-org/react';
+import {styled} from "@nextui-org/react";
 
-export const StyledTitle = styled('h1', {
-  display: 'inline',
-  fontWeight: '$bold',
-  color: '$text',
-  lh: '1.2',
-  fs: '2.5rem',
-  '@sm': {
-    fs: '3rem'
+export const StyledTitle = styled("h1", {
+  display: "inline",
+  fontWeight: "$bold",
+  color: "$text",
+  lh: "1.2",
+  fs: "2.5rem",
+  "@sm": {
+    fs: "3rem",
+  },
+  "@lg": {
+    fs: "3.5rem",
   },
-  '@lg': {
-    fs: '3.5rem'
-  }
 });
 
 export const StyledGradientTitle = styled(StyledTitle, {
-  textGradient: '180deg, #FF1CF7 25%, #b249f8 100%',
-  '&::selection': {
-    WebkitTextFillColor: '$colors$text'
-  }
+  textGradient: "180deg, #FF1CF7 25%, #b249f8 100%",
+  "&::selection": {
+    WebkitTextFillColor: "$colors$text",
+  },
 });
 
-export const StyledSubtitle = styled('p', {
-  pl: '$1',
-  fs: '$xl',
-  width: '100%',
-  display: 'inline-flex',
-  fontWeight: '$medium',
-  color: '$accents7'
+export const StyledSubtitle = styled("p", {
+  pl: "$1",
+  fs: "$xl",
+  width: "100%",
+  display: "inline-flex",
+  fontWeight: "$medium",
+  color: "$accents7",
 });
diff --git a/apps/docs/src/components/home/built-in-stitches.tsx b/apps/docs/src/components/home/built-in-stitches.tsx
index a8846d4189..ef88369317 100644
--- a/apps/docs/src/components/home/built-in-stitches.tsx
+++ b/apps/docs/src/components/home/built-in-stitches.tsx
@@ -1,42 +1,34 @@
-import * as React from 'react';
-import NextLink from 'next/link';
-import { InView } from 'react-intersection-observer';
-import cn from 'classnames';
-import { Section, Title, Subtitle, BlockLink, Box } from '@primitives';
-import {
-  Grid,
-  Row,
-  Col,
-  Link,
-  Text,
-  Collapse,
-  Spacer
-} from '@nextui-org/react';
-import landingContent from '@content/landing';
-import { CodeDemo, Blockholder } from '@components';
+import * as React from "react";
+import NextLink from "next/link";
+import {InView} from "react-intersection-observer";
+import cn from "classnames";
+import {Section, Title, Subtitle, BlockLink, Box} from "@primitives";
+import {Grid, Row, Col, Link, Text, Collapse, Spacer} from "@nextui-org/react";
+import landingContent from "@content/landing";
+import {CodeDemo, Blockholder} from "@components";
 
 const items = [
   {
-    id: 'property_shorthands',
-    title: 'Property shorthands',
+    id: "property_shorthands",
+    title: "Property shorthands",
     description:
-      'Using a shorthand property, you can write more concise and more readable CSS, saving time and energy.',
-    lines: '2-9'
+      "Using a shorthand property, you can write more concise and more readable CSS, saving time and energy.",
+    lines: "2-9",
   },
   {
-    id: 'property_bundles',
-    title: 'Property bundles',
+    id: "property_bundles",
+    title: "Property bundles",
     description:
-      'Property bundles are CSS properties that let you set the values of multiple other CSS properties simultaneously.',
-    lines: '11-26'
+      "Property bundles are CSS properties that let you set the values of multiple other CSS properties simultaneously.",
+    lines: "11-26",
   },
   {
-    id: 'simplify_syntax',
-    title: 'Simplify syntax',
+    id: "simplify_syntax",
+    title: "Simplify syntax",
     description:
-      'NextUI provides a set of out of the box Stitches utilities that simplify CSS syntax.',
-    lines: '29-48'
-  }
+      "NextUI provides a set of out of the box Stitches utilities that simplify CSS syntax.",
+    lines: "29-48",
+  },
 ];
 
 const BuiltInStitchesSection = () => {
@@ -49,21 +41,21 @@ const BuiltInStitchesSection = () => {
 
   return (
     <InView as="section" className="inview-section" onChange={setIsVisible}>
-      <Spacer y={10} css={{ '@xsMax': { mt: '$16' } }} />
-      <Section css={{ position: 'relative' }}>
+      <Spacer css={{"@xsMax": {mt: "$16"}}} y={10} />
+      <Section css={{position: "relative"}}>
         <Box
           css={{
-            position: 'absolute',
+            position: "absolute",
             top: 0,
-            left: '-10%',
-            zIndex: '-$1',
-            '@xsMax': {
-              top: '20%',
-              left: '-90%'
-            }
+            left: "-10%",
+            zIndex: "-$1",
+            "@xsMax": {
+              top: "20%",
+              left: "-90%",
+            },
           }}
         >
-          <img src="/stitches-gradient.svg" alt="theming background" />
+          <img alt="theming background" src="/stitches-gradient.svg" />
         </Box>
         <Row justify="flex-start">
           <Title>Built-in Stitches</Title>
@@ -74,72 +66,71 @@ const BuiltInStitchesSection = () => {
         <Subtitle>
           NextUI provides a set of out of the box&nbsp;
           <Link
+            css={{color: "#FF1CF7"}}
             href="https://stitches.dev/"
             rel="noreferer noopener"
             target="_blank"
-            css={{ color: '#FF1CF7' }}
           >
             Stitches
           </Link>
-          &nbsp;utilities for speeding up your workflow by abbreviating CSS
-          properties, grouping multiple CSS properties together, or simplifying
-          a tricky syntax.
+          &nbsp;utilities for speeding up your workflow by abbreviating CSS properties, grouping
+          multiple CSS properties together, or simplifying a tricky syntax.
         </Subtitle>
         <Grid.Container gap={2}>
           <Grid
-            xs={12}
-            sm={6}
             css={{
               pl: 0,
-              '@xsMax': {
-                pr: '0'
-              }
+              "@xsMax": {
+                pr: "0",
+              },
             }}
+            sm={6}
+            xs={12}
           >
             <Col>
               <Collapse.Group accordion onChange={handleChange}>
-                {items.map(({ id, title, description }) => (
+                {items.map(({id, title, description}) => (
                   <Collapse
                     key={id}
-                    title={title}
-                    showArrow={false}
-                    className={cn({ active: activeItem.id === id })}
-                    expanded={id === items[0].id}
+                    className={cn({active: activeItem.id === id})}
                     css={{
-                      br: '$lg',
-                      border: 'none',
-                      p: '0 $lg',
-                      margin: '$md 0',
-                      '& .nextui-collapse-title': {
-                        color: '$accents4',
-                        fontSize: '1.7rem',
-                        transition: 'color 0.2s ease-in-out'
+                      br: "$lg",
+                      border: "none",
+                      p: "0 $lg",
+                      margin: "$md 0",
+                      "& .nextui-collapse-title": {
+                        color: "$accents4",
+                        fontSize: "1.7rem",
+                        transition: "color 0.2s ease-in-out",
                       },
-                      '&.active': {
-                        bf: 'saturate(180%) blur(14px)',
-                        bg: 'rgba(255, 255, 255, 0.05)',
-                        boxShadow: '$md'
+                      "&.active": {
+                        bf: "saturate(180%) blur(14px)",
+                        bg: "rgba(255, 255, 255, 0.05)",
+                        boxShadow: "$md",
                       },
-                      '&.active .nextui-collapse-view': {
-                        pb: 0
+                      "&.active .nextui-collapse-view": {
+                        pb: 0,
                       },
-                      '&.active .nextui-collapse-title': {
-                        color: '$text'
+                      "&.active .nextui-collapse-title": {
+                        color: "$text",
+                      },
+                      "&:hover": {
+                        "&:not(.active) .nextui-collapse-title": {
+                          color: "$accents7",
+                        },
                       },
-                      '&:hover': {
-                        '&:not(.active) .nextui-collapse-title': {
-                          color: '$accents7'
-                        }
-                      }
                     }}
+                    expanded={id === items[0].id}
+                    showArrow={false}
+                    title={title}
                   >
                     <Text
                       css={{
-                        fs: '1.4rem',
-                        color: '$accents6',
-                        '@xsMax': {
-                          fs: '1rem'
-                        }
+                        fs: "1.4rem",
+                        color: "$accents6",
+                        "@xsMax": {
+                          fs: "1rem",
+                        },
                       }}
                     >
                       {description}
@@ -153,37 +144,37 @@ const BuiltInStitchesSection = () => {
             </Col>
           </Grid>
           <Grid
-            xs={12}
-            sm={6}
             css={{
               pr: 0,
-              mt: '$9',
-              '@mdMax': {
-                pl: '0'
+              mt: "$9",
+              "@mdMax": {
+                pl: "0",
+              },
+              "@xsMax": {
+                mt: "$18",
               },
-              '@xsMax': {
-                mt: '$18'
-              }
             }}
+            sm={6}
+            xs={12}
           >
             <Col
               css={{
-                dflex: 'center',
-                fd: 'column',
-                ai: 'flex-start',
-                h: '100%',
-                mt: '-10%'
+                dflex: "center",
+                fd: "column",
+                ai: "flex-start",
+                h: "100%",
+                mt: "-10%",
               }}
             >
               {isVisible ? (
                 <CodeDemo
                   showWindowIcons
-                  language="jsx"
-                  value={landingContent.stitchesUtilitiesCode}
-                  line={activeItem.lines}
                   css={{
-                    maxHeight: 420
+                    maxHeight: 420,
                   }}
+                  language="jsx"
+                  line={activeItem.lines}
+                  value={landingContent.stitchesUtilitiesCode}
                 />
               ) : (
                 <Blockholder height="420px" />
diff --git a/apps/docs/src/components/home/comparation.tsx b/apps/docs/src/components/home/comparation.tsx
index 8ff544404e..4c5446438f 100644
--- a/apps/docs/src/components/home/comparation.tsx
+++ b/apps/docs/src/components/home/comparation.tsx
@@ -1,16 +1,17 @@
-import React, { useState } from 'react';
-import { Section, Title, Subtitle } from '@primitives';
-import { InView } from 'react-intersection-observer';
-import { Grid, Row, Col, Spacer, Text } from '@nextui-org/react';
-import landingContent from '@content/landing';
-import { CodeDemoBlock, Blockholder } from '@components';
+import React, {useState} from "react";
+import {Section, Title, Subtitle} from "@primitives";
+import {InView} from "react-intersection-observer";
+import {Grid, Row, Col, Spacer, Text} from "@nextui-org/react";
+import landingContent from "@content/landing";
+import {CodeDemoBlock, Blockholder} from "@components";
 
 const ComparationSection = () => {
   const [isVisible, setIsVisible] = useState(false);
+
   return (
     <InView as="section" className="inview-section" onChange={setIsVisible}>
-      <Spacer y={10} css={{ '@xsMax': { mt: '$14' } }} />
-      <Section css={{ zIndex: '$10' }}>
+      <Spacer css={{"@xsMax": {mt: "$14"}}} y={10} />
+      <Section css={{zIndex: "$10"}}>
         <Row justify="flex-start">
           <Title>Do</Title>
           <Spacer x={0.5} />
@@ -22,27 +23,26 @@ const ComparationSection = () => {
           <Title color="warning">less code.</Title>
         </Row>
         <Subtitle>
-          NextUI components have been created with the Developer's experience
+          NextUI components have been created with the Developer&apos;s experience
           <br />
-          in mind, avoiding having to import multiple components to display just
-          one.
+          in mind, avoiding having to import multiple components to display just one.
         </Subtitle>
         <Grid.Container gap={1.5}>
           <Grid
-            xs={12}
-            sm={6}
             css={{
               pl: 0,
-              '@xsMax': {
-                pr: '0'
-              }
+              "@xsMax": {
+                pr: "0",
+              },
             }}
+            sm={6}
+            xs={12}
           >
             <Col
               css={{
-                dflex: 'center',
-                fd: 'column',
-                h: '100%'
+                dflex: "center",
+                fd: "column",
+                h: "100%",
               }}
             >
               {!isVisible ? (
@@ -50,41 +50,41 @@ const ComparationSection = () => {
               ) : (
                 <CodeDemoBlock
                   showWindowIcons
-                  language="jsx"
-                  value={landingContent.comparativeCode.nextui}
                   css={{
-                    minHeight: 340
+                    minHeight: 340,
                   }}
+                  language="jsx"
+                  value={landingContent.comparativeCode.nextui}
                 />
               )}
-              <Text css={{ color: '$text', fontSize: '$xl' }}>NextUI</Text>
+              <Text css={{color: "$text", fontSize: "$xl"}}>NextUI</Text>
             </Col>
           </Grid>
           <Grid
-            xs={12}
-            sm={6}
             css={{
               pr: 0,
-              '@xsMax': {
-                pl: '0'
-              }
+              "@xsMax": {
+                pl: "0",
+              },
             }}
+            sm={6}
+            xs={12}
           >
-            <Col css={{ dflex: 'center', fd: 'column', h: '100%' }}>
+            <Col css={{dflex: "center", fd: "column", h: "100%"}}>
               {!isVisible ? (
                 <Blockholder height="380px" />
               ) : (
                 <CodeDemoBlock
                   showWindowIcons
-                  language="jsx"
                   css={{
                     height: 340,
-                    boxShadow: 'none'
+                    boxShadow: "none",
                   }}
+                  language="jsx"
                   value={landingContent.comparativeCode.others}
                 />
               )}
-              <Text css={{ color: '$accents6', fontSize: '$xl' }}>Others</Text>
+              <Text css={{color: "$accents6", fontSize: "$xl"}}>Others</Text>
             </Col>
           </Grid>
         </Grid.Container>
diff --git a/apps/docs/src/components/home/custom-themes.tsx b/apps/docs/src/components/home/custom-themes.tsx
index 8c412aadc4..25dac4e333 100644
--- a/apps/docs/src/components/home/custom-themes.tsx
+++ b/apps/docs/src/components/home/custom-themes.tsx
@@ -1,61 +1,61 @@
 /* eslint-disable no-unused-vars */
-import React, { useState } from 'react';
-import NextLink from 'next/link';
-import { Box, Section, Title, Subtitle, BlockLink } from '@primitives';
-import { InView } from 'react-intersection-observer';
-import { Grid, Row, Col, Spacer } from '@nextui-org/react';
-import { darkTheme } from '@theme/shared';
-import landingContent from '@content/landing';
-import { Blockholder, ShopCard, CodeDemo } from '@components';
-import { useTheme } from 'next-themes';
-import { get } from 'lodash';
+import React, {useState} from "react";
+import NextLink from "next/link";
+import {Box, Section, Title, Subtitle, BlockLink} from "@primitives";
+import {InView} from "react-intersection-observer";
+import {Grid, Row, Col, Spacer} from "@nextui-org/react";
+import {darkTheme} from "@theme/shared";
+import landingContent from "@content/landing";
+import {Blockholder, ShopCard, CodeDemo} from "@components";
+import {useTheme} from "next-themes";
+import {get} from "lodash";
 
 const codeHighlights = {
-  nextui: '3-11',
-  modern: '22-37',
-  elegant: '54-72',
-  retro: '93-107'
+  nextui: "3-11",
+  modern: "22-37",
+  elegant: "54-72",
+  retro: "93-107",
 };
 
 const darkCodeHighlights = {
-  nextui: '10-21',
-  modern: '38-53',
-  elegant: '73-91',
-  retro: '109-124'
+  nextui: "10-21",
+  modern: "38-53",
+  elegant: "73-91",
+  retro: "109-124",
 };
 
 const CustomThemesSection = () => {
-  const [activeHighlight, setActiveHighlight] = useState('nextui');
+  const [activeHighlight, setActiveHighlight] = useState("nextui");
   const [isVisible, setIsVisible] = useState(false);
 
-  const { theme } = useTheme();
-  const isDark = theme === 'dark';
+  const {theme} = useTheme();
+  const isDark = theme === "dark";
 
   return (
     <InView as="section" className="inview-section" onChange={setIsVisible}>
-      <Spacer y={10} css={{ '@xsMax': { mt: '$32' } }} />
-      <Section css={{ position: 'relative' }}>
+      <Spacer css={{"@xsMax": {mt: "$32"}}} y={10} />
+      <Section css={{position: "relative"}}>
         <Box
           css={{
-            position: 'absolute',
-            top: '-25%',
-            right: '-30%',
-            zIndex: '-$1',
+            position: "absolute",
+            top: "-25%",
+            right: "-30%",
+            zIndex: "-$1",
             [`.${darkTheme} &`]: {
               right: 0,
-              left: '-30%',
-              '@xsMax': {
-                top: '15%',
-                left: '10% !important'
-              }
+              left: "-30%",
+              "@xsMax": {
+                top: "15%",
+                left: "10% !important",
+              },
+            },
+            "@xsMax": {
+              top: "5%",
+              right: "-40% !important",
             },
-            '@xsMax': {
-              top: '5%',
-              right: '-40% !important'
-            }
           }}
         >
-          <img src="/theming-gradient.svg" alt="theming background" />
+          <img alt="theming background" src="/theming-gradient.svg" />
         </Box>
         <Row justify="flex-start">
           <Title>Apply your own</Title>
@@ -65,19 +65,19 @@ const CustomThemesSection = () => {
           <Title>decisions.</Title>
         </Row>
         <Subtitle>
-          NextUI provides a simple way to customize the default themes, you can
-          change the colors, fonts, breakpoints and everything you need.
+          NextUI provides a simple way to customize the default themes, you can change the colors,
+          fonts, breakpoints and everything you need.
         </Subtitle>
         <Grid.Container gap={2}>
           <Grid
-            xs={12}
-            sm={6}
             css={{
               pl: 0,
-              '@xsMax': {
-                pr: '0'
-              }
+              "@xsMax": {
+                pr: "0",
+              },
             }}
+            sm={6}
+            xs={12}
           >
             <Col>
               <ShopCard onChangeTheme={setActiveHighlight} />
@@ -87,35 +87,32 @@ const CustomThemesSection = () => {
             </Col>
           </Grid>
           <Grid
-            xs={12}
-            sm={6}
             css={{
               pr: 0,
-              '@mdMax': {
-                pl: '0'
-              }
+              "@mdMax": {
+                pl: "0",
+              },
             }}
+            sm={6}
+            xs={12}
           >
             <Col
               css={{
-                dflex: 'center',
-                fd: 'column',
-                ai: 'flex-start',
-                h: '100%'
+                dflex: "center",
+                fd: "column",
+                ai: "flex-start",
+                h: "100%",
               }}
             >
               {isVisible ? (
                 <CodeDemo
                   showWindowIcons
-                  line={get(
-                    isDark ? darkCodeHighlights : codeHighlights,
-                    activeHighlight
-                  )}
-                  language="jsx"
-                  value={landingContent.themingCode}
                   css={{
-                    maxHeight: 350
+                    maxHeight: 350,
                   }}
+                  language="jsx"
+                  line={get(isDark ? darkCodeHighlights : codeHighlights, activeHighlight)}
+                  value={landingContent.themingCode}
                 />
               ) : (
                 <Blockholder height="350px" />
diff --git a/apps/docs/src/components/home/customization.tsx b/apps/docs/src/components/home/customization.tsx
index 8592d73507..6a75670067 100644
--- a/apps/docs/src/components/home/customization.tsx
+++ b/apps/docs/src/components/home/customization.tsx
@@ -1,34 +1,32 @@
-import React, { useState } from 'react';
-import NextLink from 'next/link';
-import { InView } from 'react-intersection-observer';
-import { Box, Section, Title, Subtitle, BlockLink } from '@primitives';
-import { Grid, Row, Col, Link, Spacer } from '@nextui-org/react';
-import landingContent from '@content/landing';
-import { darkTheme } from '@theme/shared';
-import { CodeDemoBlock, CustomButton, Blockholder } from '@components';
+import React, {useState} from "react";
+import NextLink from "next/link";
+import {InView} from "react-intersection-observer";
+import {Box, Section, Title, Subtitle, BlockLink} from "@primitives";
+import {Grid, Row, Col, Link, Spacer} from "@nextui-org/react";
+import landingContent from "@content/landing";
+import {darkTheme} from "@theme/shared";
+import {CodeDemoBlock, CustomButton, Blockholder} from "@components";
 
 const CustomizationSection = () => {
   const [isVisible, setIsVisible] = useState(false);
+
   return (
     <InView as="section" className="inview-section" onChange={setIsVisible}>
-      <Spacer y={10} css={{ '@xsMax': { mt: '$14' } }} />
-      <Section css={{ position: 'relative' }}>
+      <Spacer css={{"@xsMax": {mt: "$14"}}} y={10} />
+      <Section css={{position: "relative"}}>
         <Box
           css={{
-            position: 'absolute',
-            top: '-30%',
-            right: '-35%',
-            zIndex: '-$1',
+            position: "absolute",
+            top: "-30%",
+            right: "-35%",
+            zIndex: "-$1",
             [`.${darkTheme} &`]: {
-              top: '-30%',
-              left: '-35%'
-            }
+              top: "-30%",
+              left: "-35%",
+            },
           }}
         >
-          <img
-            src="/customization-gradient.svg"
-            alt="customization background"
-          />
+          <img alt="customization background" src="/customization-gradient.svg" />
         </Box>
         <Row justify="flex-start">
           <Title>Customization made</Title>
@@ -37,55 +35,53 @@ const CustomizationSection = () => {
           <Title color="green">easy.</Title>
         </Row>
         <Subtitle>
-          Thanks to NextUI is built on top of the amazing CSS-in-JS
-          library&nbsp;
+          Thanks to NextUI is built on top of the amazing CSS-in-JS library&nbsp;
           <Link
+            css={{color: "$green600"}}
             href="https://stitches.dev/"
             rel="noreferer noopener"
             target="_blank"
-            css={{ color: '$green600' }}
           >
             Stitches
           </Link>
-          , you can customize any components in several ways eather using
-          the&nbsp;
+          , you can customize any components in several ways eather using the&nbsp;
           <NextLink href="/docs/theme/override-styles#using-the-css-prop">
-            <Link css={{ color: '$green600' }}>css&nbsp;</Link>
+            <Link css={{color: "$green600"}}>css&nbsp;</Link>
           </NextLink>
           prop,&nbsp;
           <NextLink href="/docs/theme/override-styles#using-the-styled-function">
-            <Link css={{ color: '$green600' }}>styled&nbsp;</Link>
+            <Link css={{color: "$green600"}}>styled&nbsp;</Link>
           </NextLink>
           function or native CSS selectors.
         </Subtitle>
         <Grid.Container gap={2}>
           <Grid
-            xs={12}
-            sm={6}
             css={{
               pl: 0,
-              '@xsMax': {
-                pr: '0'
-              }
+              "@xsMax": {
+                pr: "0",
+              },
             }}
+            sm={6}
+            xs={12}
           >
             <Col
               css={{
-                dflex: 'center',
-                fd: 'column',
-                ai: 'flex-start',
-                h: '100%'
+                dflex: "center",
+                fd: "column",
+                ai: "flex-start",
+                h: "100%",
               }}
             >
               {isVisible ? (
                 <CodeDemoBlock
                   showWindowIcons
-                  language="jsx"
-                  value={landingContent.customizationCode}
                   css={{
                     maxHeight: 320,
-                    bs: '$lg'
+                    bs: "$lg",
                   }}
+                  language="jsx"
+                  value={landingContent.customizationCode}
                 />
               ) : (
                 <Blockholder height="360px" />
@@ -96,24 +92,24 @@ const CustomizationSection = () => {
             </Col>
           </Grid>
           <Grid
-            xs={12}
-            sm={6}
             css={{
               pr: 0,
-              mt: '$9',
-              '@mdMax': {
-                pl: '0'
-              }
+              mt: "$9",
+              "@mdMax": {
+                pl: "0",
+              },
             }}
+            sm={6}
+            xs={12}
           >
-            <Box css={{ size: '100%', height: 320 }}>
+            <Box css={{size: "100%", height: 320}}>
               <Col
                 css={{
-                  dflex: 'center',
-                  fd: 'column',
-                  height: '100%',
-                  br: '$lg',
-                  bg: 'linear-gradient(to right, #4ade80, #06b6d4)'
+                  dflex: "center",
+                  fd: "column",
+                  height: "100%",
+                  br: "$lg",
+                  bg: "linear-gradient(to right, #4ade80, #06b6d4)",
                 }}
               >
                 <CustomButton />
diff --git a/apps/docs/src/components/home/dark-mode.tsx b/apps/docs/src/components/home/dark-mode.tsx
index 5862e667eb..5670a00015 100644
--- a/apps/docs/src/components/home/dark-mode.tsx
+++ b/apps/docs/src/components/home/dark-mode.tsx
@@ -1,56 +1,57 @@
-import React, { useState } from 'react';
-import cn from 'classnames';
-import { InView } from 'react-intersection-observer';
-import NextLink from 'next/link';
-import { Box, Section, Title, Subtitle, BlockLink } from '@primitives';
-import { Switch, Grid, Row, Col, Spacer, createTheme } from '@nextui-org/react';
-import landingContent from '@content/landing';
-import { darkTheme, lightTheme } from '@theme/shared';
-import { CodeDemoBlock, Player, Blockholder } from '@components';
-import { Moon, Sun } from '../icons';
+import React, {useState} from "react";
+import cn from "classnames";
+import {InView} from "react-intersection-observer";
+import NextLink from "next/link";
+import {Box, Section, Title, Subtitle, BlockLink} from "@primitives";
+import {Switch, Grid, Row, Col, Spacer, createTheme} from "@nextui-org/react";
+import landingContent from "@content/landing";
+import {darkTheme, lightTheme} from "@theme/shared";
+import {CodeDemoBlock, Player, Blockholder} from "@components";
+
+import {Moon, Sun} from "../icons";
 
 const playerDarkTheme = createTheme({
-  type: 'dark',
-  className: 'player-dark-theme'
+  type: "dark",
+  className: "player-dark-theme",
 });
 const playerLightTheme = createTheme({
-  type: 'light',
-  className: 'player-light-theme'
+  type: "light",
+  className: "player-light-theme",
 });
 
 const DarkModeSection = () => {
-  const [activeTheme, setActiveTheme] = useState('dark');
+  const [activeTheme, setActiveTheme] = useState("dark");
   const [isVisible, setIsVisible] = useState(false);
 
   const handleToggleTheme = () => {
-    setActiveTheme(activeTheme === 'dark' ? 'light' : 'dark');
+    setActiveTheme(activeTheme === "dark" ? "light" : "dark");
   };
 
   return (
     <InView as="section" className="inview-section" onChange={setIsVisible}>
-      <Spacer y={10} css={{ '@xsMax': { mt: '$14' } }} />
-      <Section css={{ position: 'relative', zIndex: '$10' }}>
+      <Spacer css={{"@xsMax": {mt: "$14"}}} y={10} />
+      <Section css={{position: "relative", zIndex: "$10"}}>
         <Box
           css={{
-            position: 'absolute',
-            top: '-25%',
-            left: '-20%',
-            zIndex: '-$1',
+            position: "absolute",
+            top: "-25%",
+            left: "-20%",
+            zIndex: "-$1",
             [`.${darkTheme} &`]: {
-              left: '30%',
-              right: '-30%',
-              '@xsMax': {
-                right: '-50%'
-              }
+              left: "30%",
+              right: "-30%",
+              "@xsMax": {
+                right: "-50%",
+              },
+            },
+            "@xsMax": {
+              top: "10%",
+              right: "-50%",
+              left: "0",
             },
-            '@xsMax': {
-              top: '10%',
-              right: '-50%',
-              left: '0'
-            }
           }}
         >
-          <img src="/dark-mode-gradient.svg" alt="dark mode background" />
+          <img alt="dark mode background" src="/dark-mode-gradient.svg" />
         </Box>
         <Row justify="flex-start">
           <Title>Dark mode</Title>
@@ -61,61 +62,57 @@ const DarkModeSection = () => {
           <Title color="violet">effortless.</Title>
         </Row>
         <Subtitle>
-          NextUI comes with a fully well-scaled default dark theme that you can
-          apply to your application with just a few lines of code.
+          NextUI comes with a fully well-scaled default dark theme that you can apply to your
+          application with just a few lines of code.
         </Subtitle>
         <Grid.Container gap={2}>
           <Grid
-            xs={12}
-            sm={6}
             css={{
               pl: 0,
-              '@xsMax': {
-                pr: '0'
-              }
+              "@xsMax": {
+                pr: "0",
+              },
             }}
+            sm={6}
+            xs={12}
           >
-            <Col css={{ d: 'flex', fd: 'column', ai: 'flex-start', pt: '$4' }}>
+            <Col css={{d: "flex", fd: "column", ai: "flex-start", pt: "$4"}}>
               <Spacer y={0.2} />
               <Switch
-                size="xl"
-                checked={activeTheme === 'dark'}
-                iconOn={<Moon filled />}
-                iconOff={<Sun filled />}
-                onChange={handleToggleTheme}
+                checked={activeTheme === "dark"}
                 css={{
-                  $$switchColorHover:
-                    'linear-gradient(180deg, #FF1CF7 25%, #b249f8 100%)',
-                  '& .nextui-switch': {
-                    bg: '$$switchColorHover'
+                  $$switchColorHover: "linear-gradient(180deg, #FF1CF7 25%, #b249f8 100%)",
+                  "& .nextui-switch": {
+                    bg: "$$switchColorHover",
+                  },
+                  "& .nextui-switch-circle": {
+                    bg: "#FFD1ED",
+                    color: "#9F0EB7",
                   },
-                  '& .nextui-switch-circle': {
-                    bg: '#FFD1ED',
-                    color: '#9F0EB7'
-                  }
                 }}
+                iconOff={<Sun filled />}
+                iconOn={<Moon filled />}
+                size="xl"
+                onChange={handleToggleTheme}
               />
 
               <Spacer y={1} />
               <Player
-                className={cn(
-                  activeTheme === 'dark' ? playerDarkTheme : playerLightTheme,
-                  {
-                    'is-dark': activeTheme === 'dark',
-                    'is-light': activeTheme === 'light'
-                  }
-                )}
+                className={cn(activeTheme === "dark" ? playerDarkTheme : playerLightTheme, {
+                  "is-dark": activeTheme === "dark",
+                  "is-light": activeTheme === "light",
+                })}
                 css={{
                   [`.${darkTheme} &`]: {
-                    '&.is-light': {
-                      $$cardColor: '$colors$white'
-                    }
+                    "&.is-light": {
+                      $$cardColor: "$colors$white",
+                    },
                   },
                   [`.${lightTheme} &`]: {
-                    '&.is-dark': {
-                      $$cardColor: '#363449'
-                    }
-                  }
+                    "&.is-dark": {
+                      $$cardColor: "#363449",
+                    },
+                  },
                 }}
               />
               <NextLink href="/docs/theme/dark-mode">
@@ -124,25 +121,25 @@ const DarkModeSection = () => {
             </Col>
           </Grid>
           <Grid
-            xs={12}
-            sm={6}
             css={{
               pr: 0,
-              '@xsMax': {
-                pl: '0'
-              }
+              "@xsMax": {
+                pl: "0",
+              },
             }}
+            sm={6}
+            xs={12}
           >
-            <Col css={{ dflex: 'center', h: '100%' }}>
+            <Col css={{dflex: "center", h: "100%"}}>
               {isVisible ? (
                 <CodeDemoBlock
                   showWindowIcons
-                  language="jsx"
-                  value={landingContent.darkModeCode}
                   css={{
                     minHeight: 300,
-                    boxShadow: 'none'
+                    boxShadow: "none",
                   }}
+                  language="jsx"
+                  value={landingContent.darkModeCode}
                 />
               ) : (
                 <Blockholder height="475px" />
diff --git a/apps/docs/src/components/home/index.ts b/apps/docs/src/components/home/index.ts
index f8576ed697..f1fa6be58a 100644
--- a/apps/docs/src/components/home/index.ts
+++ b/apps/docs/src/components/home/index.ts
@@ -1,9 +1,9 @@
-import CustomThemesSection from './custom-themes';
-import ComparationSection from './comparation';
-import CustomizationSection from './customization';
-import DarkModeSection from './dark-mode';
-import BuiltInStitchesSection from './built-in-stitches';
-import LastButNotLeastSection from './last-but-not-least';
+import CustomThemesSection from "./custom-themes";
+import ComparationSection from "./comparation";
+import CustomizationSection from "./customization";
+import DarkModeSection from "./dark-mode";
+import BuiltInStitchesSection from "./built-in-stitches";
+import LastButNotLeastSection from "./last-but-not-least";
 
 export {
   CustomThemesSection,
@@ -11,5 +11,5 @@ export {
   CustomizationSection,
   DarkModeSection,
   BuiltInStitchesSection,
-  LastButNotLeastSection
+  LastButNotLeastSection,
 };
diff --git a/apps/docs/src/components/home/last-but-not-least.tsx b/apps/docs/src/components/home/last-but-not-least.tsx
index 29c0bcb74d..d9ab15b134 100644
--- a/apps/docs/src/components/home/last-but-not-least.tsx
+++ b/apps/docs/src/components/home/last-but-not-least.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import { Section, Title, Subtitle } from '@primitives';
-import { Row, Spacer } from '@nextui-org/react';
-import landingContent from '@content/landing';
-import { FeaturesGrid } from '@components';
+import React from "react";
+import {Section, Title, Subtitle} from "@primitives";
+import {Row, Spacer} from "@nextui-org/react";
+import landingContent from "@content/landing";
+import {FeaturesGrid} from "@components";
 
 const LastButNotLeastSection = () => {
   return (
-    <Section css={{ zIndex: '$10' }}>
-      <Spacer y={6} css={{ '@xsMax': { mt: '$14' } }} />
+    <Section css={{zIndex: "$10"}}>
+      <Spacer css={{"@xsMax": {mt: "$14"}}} y={6} />
       <Row justify="center">
         <Title>Last&nbsp;</Title>
         <Title color="warning">but&nbsp;</Title>
@@ -17,9 +17,7 @@ const LastButNotLeastSection = () => {
         <Title color="pink">least.</Title>
       </Row>
       <Row justify="center">
-        <Subtitle css={{ textAlign: 'center' }}>
-          A fully-featured React UI library.
-        </Subtitle>
+        <Subtitle css={{textAlign: "center"}}>A fully-featured React UI library.</Subtitle>
       </Row>
       <FeaturesGrid features={landingContent.fullFeatures} />
     </Section>
diff --git a/apps/docs/src/components/icons/activity.tsx b/apps/docs/src/components/icons/activity.tsx
index b86ad2d285..242e0752fb 100644
--- a/apps/docs/src/components/icons/activity.tsx
+++ b/apps/docs/src/components/icons/activity.tsx
@@ -1,24 +1,18 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const Activity: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+  const {theme} = useTheme();
 
-const Activity: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  const { theme } = useTheme();
   return (
     <svg
       data-name="Iconly/Curved/Activity"
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g
diff --git a/apps/docs/src/components/icons/anchor.tsx b/apps/docs/src/components/icons/anchor.tsx
index 8e4b28ea69..36a71b178e 100644
--- a/apps/docs/src/components/icons/anchor.tsx
+++ b/apps/docs/src/components/icons/anchor.tsx
@@ -1,33 +1,27 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const Anchor: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+  const {theme} = useTheme();
 
-const Anchor: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  const { theme } = useTheme();
   return (
     <svg
+      fill={fill || theme?.colors?.foreground?.value}
+      height={size || height || 24}
       viewBox="0 0 24 24"
       width={size || width || 24}
-      height={size || height || 24}
-      fill={fill || theme?.colors?.foreground?.value}
       {...props}
     >
       <path
-        fill={fill || theme?.colors?.foreground?.value}
         d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
-      ></path>
-      <path
         fill={fill || theme?.colors?.foreground?.value}
+      />
+      <path
         d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
-      ></path>
+        fill={fill || theme?.colors?.foreground?.value}
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/arrow-left.tsx b/apps/docs/src/components/icons/arrow-left.tsx
index 2f7cefc913..1c1685507e 100644
--- a/apps/docs/src/components/icons/arrow-left.tsx
+++ b/apps/docs/src/components/icons/arrow-left.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,28 +7,22 @@ export interface Props {
   size?: number;
 }
 
-const ArrowLeft: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const ArrowLeft: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M15.5 19l-7-7 7-7"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/arrow-right.tsx b/apps/docs/src/components/icons/arrow-right.tsx
index 8d411a3e2c..ef6ed9958f 100644
--- a/apps/docs/src/components/icons/arrow-right.tsx
+++ b/apps/docs/src/components/icons/arrow-right.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -18,20 +18,20 @@ const ArrowRight: React.FC<Props> = ({
 }) => {
   return (
     <svg
-      width={size || width}
-      height={size || height}
       className={className}
-      viewBox="0 0 24 24"
       fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M8.5 5l7 7-7 7"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/bug.tsx b/apps/docs/src/components/icons/bug.tsx
index 0629956d9d..9219a1f685 100644
--- a/apps/docs/src/components/icons/bug.tsx
+++ b/apps/docs/src/components/icons/bug.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   width?: number;
@@ -13,19 +13,19 @@ const defaultProps = {
   height: 24,
 };
 
-const Bug: React.FC<Props> = ({ size, fill, width, height, ...props }) => {
+const Bug: React.FC<Props> = ({size, fill, width, height, ...props}) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width}
       height={size || height}
       viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fill={fill}
         d="M16.895,6.519l2.813-2.812l-1.414-1.414l-2.846,2.846c-0.233-0.166-0.473-0.321-0.723-0.454 c-1.723-0.91-3.726-0.911-5.45,0c-0.25,0.132-0.488,0.287-0.722,0.453L5.707,2.293L4.293,3.707l2.813,2.812 C6.53,7.242,6.08,8.079,5.756,9H2v2h2.307C4.242,11.495,4.2,11.997,4.2,12.5c0,0.507,0.042,1.013,0.107,1.511H2v2h2.753 c0.013,0.039,0.021,0.08,0.034,0.118c0.188,0.555,0.421,1.093,0.695,1.6c0.044,0.081,0.095,0.155,0.141,0.234l-2.33,2.33 l1.414,1.414l2.11-2.111c0.235,0.254,0.478,0.498,0.736,0.716c0.418,0.354,0.867,0.657,1.332,0.903 c0.479,0.253,0.982,0.449,1.496,0.58C10.911,21.931,11.455,22,12,22s1.089-0.069,1.618-0.204c0.514-0.131,1.017-0.327,1.496-0.58 c0.465-0.246,0.914-0.55,1.333-0.904c0.258-0.218,0.5-0.462,0.734-0.716l2.111,2.111l1.414-1.414l-2.33-2.33 c0.047-0.08,0.098-0.155,0.142-0.236c0.273-0.505,0.507-1.043,0.694-1.599c0.013-0.039,0.021-0.079,0.034-0.118H22v-2h-2.308 c0.065-0.499,0.107-1.004,0.107-1.511c0-0.503-0.042-1.005-0.106-1.5H22V9h-3.756C17.92,8.079,17.47,7.242,16.895,6.519z M8.681,7.748c0.445-0.558,0.96-0.993,1.528-1.294c1.141-0.603,2.442-0.602,3.581,0c0.569,0.301,1.084,0.736,1.53,1.295 c0.299,0.373,0.54,0.8,0.753,1.251H7.927C8.141,8.549,8.381,8.121,8.681,7.748z M17.8,12.5c0,0.522-0.042,1.044-0.126,1.553 c-0.079,0.49-0.199,0.973-0.355,1.436c-0.151,0.449-0.34,0.882-0.559,1.288c-0.217,0.399-0.463,0.772-0.733,1.11 c-0.267,0.333-0.56,0.636-0.869,0.898c-0.31,0.261-0.639,0.484-0.979,0.664s-0.695,0.317-1.057,0.41 c-0.04,0.01-0.082,0.014-0.122,0.023V14h-2v5.881c-0.04-0.009-0.082-0.013-0.122-0.023c-0.361-0.093-0.717-0.23-1.057-0.41 s-0.669-0.403-0.978-0.664c-0.311-0.263-0.604-0.565-0.871-0.899c-0.27-0.337-0.516-0.71-0.731-1.108 c-0.22-0.407-0.408-0.84-0.56-1.289c-0.156-0.463-0.276-0.946-0.356-1.438C6.242,13.544,6.2,13.022,6.2,12.5 c0-0.505,0.041-1.009,0.119-1.5h11.361C17.759,11.491,17.8,11.995,17.8,12.5z"
-      ></path>
+        fill={fill}
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/camera.tsx b/apps/docs/src/components/icons/camera.tsx
index f6c078ab9f..218d5be37b 100644
--- a/apps/docs/src/components/icons/camera.tsx
+++ b/apps/docs/src/components/icons/camera.tsx
@@ -1,31 +1,25 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const Camera: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+  const {theme} = useTheme();
 
-const Camera: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  const { theme } = useTheme();
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
         fill={fill || theme?.colors?.accents3?.value}
+        fillRule="evenodd"
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/chevron-left.tsx b/apps/docs/src/components/icons/chevron-left.tsx
index f78e708a04..cfd52c3281 100644
--- a/apps/docs/src/components/icons/chevron-left.tsx
+++ b/apps/docs/src/components/icons/chevron-left.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,28 +7,16 @@ export interface Props {
   size?: number;
 }
 
-const ChevronLeft: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const ChevronLeft: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width}
       height={size || height}
       viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g
-        fill="none"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      >
+      <g fill="none" stroke={fill} strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}>
         <path d="M9.57 5.93L3.5 12l6.07 6.07" />
         <path d="M20.5 12H3.67" />
       </g>
diff --git a/apps/docs/src/components/icons/chevron-right.tsx b/apps/docs/src/components/icons/chevron-right.tsx
index 729483788e..c090847eb9 100644
--- a/apps/docs/src/components/icons/chevron-right.tsx
+++ b/apps/docs/src/components/icons/chevron-right.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -8,19 +8,13 @@ export interface Props {
   className?: string;
 }
 
-const ChevronRight: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const ChevronRight: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width}
       height={size || height}
       viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g
diff --git a/apps/docs/src/components/icons/close.tsx b/apps/docs/src/components/icons/close.tsx
index 81dbc0400a..7552882673 100644
--- a/apps/docs/src/components/icons/close.tsx
+++ b/apps/docs/src/components/icons/close.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   width?: number;
@@ -13,14 +13,9 @@ const defaultProps = {
   height: 24,
 };
 
-const Close: React.FC<Props> = ({ size, fill, width, height, ...props }) => {
+const Close: React.FC<Props> = ({size, fill, width, height, ...props}) => {
   return (
-    <svg
-      width={size || width}
-      height={size || height}
-      viewBox="0 0 24 24"
-      {...props}
-    >
+    <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
       <path
         d="M12 2a10 10 0 1010 10A10.016 10.016 0 0012 2zm3.36 12.3a.754.754 0 010 1.06.748.748 0 01-1.06 0l-2.3-2.3-2.3 2.3a.748.748 0 01-1.06 0 .754.754 0 010-1.06l2.3-2.3-2.3-2.3A.75.75 0 019.7 8.64l2.3 2.3 2.3-2.3a.75.75 0 011.06 1.06l-2.3 2.3z"
         fill={fill}
diff --git a/apps/docs/src/components/icons/code-document.tsx b/apps/docs/src/components/icons/code-document.tsx
index c06d0b45ee..28a9efbce7 100644
--- a/apps/docs/src/components/icons/code-document.tsx
+++ b/apps/docs/src/components/icons/code-document.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   width?: number;
@@ -12,25 +12,13 @@ interface Props {
 const defaultProps = {
   width: 24,
   height: 24,
-  filled: true
+  filled: true,
 };
 
-const CodeDocument: React.FC<Props> = ({
-  size,
-  fill,
-  width,
-  height,
-  filled,
-  ...props
-}) => {
+const CodeDocument: React.FC<Props> = ({size, fill, width, height, filled, ...props}) => {
   if (filled) {
     return (
-      <svg
-        width={size || width}
-        height={size || height}
-        viewBox="0 0 24 24"
-        {...props}
-      >
+      <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
         <g fill={fill}>
           <path d="M16 2H8C4.5 2 3 4 3 7v4.47a.492.492 0 00.66.47 6.45 6.45 0 013.64-.31 6.486 6.486 0 014.31 9.62.5.5 0 00.43.75H16c3.5 0 5-2 5-5V7c0-3-1.5-5-5-5zm2.5 7.25h-2a2.748 2.748 0 01-2.75-2.75v-2a.75.75 0 011.5 0v2a1.25 1.25 0 001.25 1.25h2a.75.75 0 010 1.5z" />
           <path d="M6 13a5 5 0 105 5 5 5 0 00-5-5zm-.84 6.27a.658.658 0 010 .92.652.652 0 01-.92 0l-1.73-1.73a.658.658 0 010-.92l1.73-1.73a.651.651 0 01.92.92L3.89 18zm4.32-.81l-1.73 1.73a.652.652 0 01-.92 0 .658.658 0 010-.92L8.11 18l-1.27-1.27a.651.651 0 01.92-.92l1.73 1.73a.668.668 0 01-.01.92z" />
@@ -41,28 +29,28 @@ const CodeDocument: React.FC<Props> = ({
 
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M21 7v10c0 3-1.5 5-5 5H8c-3.5 0-5-2-5-5V7c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5Z"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M14.5 4.5v2c0 1.1.9 2 2 2h2M10 13l-2 2 2 2M14 13l2 2-2 2"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/copy.tsx b/apps/docs/src/components/icons/copy.tsx
index 125e78b460..f35f5683f5 100644
--- a/apps/docs/src/components/icons/copy.tsx
+++ b/apps/docs/src/components/icons/copy.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   width?: number;
@@ -13,18 +13,18 @@ const defaultProps = {
   height: 24,
 };
 
-const Copy: React.FC<Props> = ({ size, fill, width, height, ...props }) => {
+const Copy: React.FC<Props> = ({size, fill, width, height, ...props}) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width}
       height={size || height}
       viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fill={fill}
         d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z"
+        fill={fill}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/devices.tsx b/apps/docs/src/components/icons/devices.tsx
index d812a56fed..550010598f 100644
--- a/apps/docs/src/components/icons/devices.tsx
+++ b/apps/docs/src/components/icons/devices.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,42 +7,36 @@ export interface Props {
   size?: number;
 }
 
-const Devices: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const Devices: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M10 16.95H6.21c-3.37 0-4.21-.84-4.21-4.21v-6c0-3.37.84-4.21 4.21-4.21h10.53c3.37 0 4.21.84 4.21 4.21M10 21.47v-4.52M2 12.95h8M6.74 21.47H10"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
       <path
         d="M22 12.8v5.71c0 2.37-.59 2.96-2.96 2.96h-3.55c-2.37 0-2.96-.59-2.96-2.96V12.8c0-2.37.59-2.96 2.96-2.96h3.55c2.37 0 2.96.59 2.96 2.96Z"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
       <path
         d="M17.244 18.25h.01"
         stroke={fill}
-        strokeWidth={2}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={2}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/discord.tsx b/apps/docs/src/components/icons/discord.tsx
index 497800e16d..db52f9b605 100644
--- a/apps/docs/src/components/icons/discord.tsx
+++ b/apps/docs/src/components/icons/discord.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   width?: number;
@@ -13,18 +13,13 @@ const defaultProps = {
   height: 24,
 };
 
-const Discord: React.FC<Props> = ({ size, fill, width, height, ...props }) => {
+const Discord: React.FC<Props> = ({size, fill, width, height, ...props}) => {
   return (
-    <svg
-      width={size || width}
-      height={size || height}
-      viewBox="0 0 24 24"
-      {...props}
-    >
+    <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
       <path
-        fill={fill}
         d="M14.82 4.26a10.14 10.14 0 0 0-.53 1.1 14.66 14.66 0 0 0-4.58 0 10.14 10.14 0 0 0-.53-1.1 16 16 0 0 0-4.13 1.3 17.33 17.33 0 0 0-3 11.59 16.6 16.6 0 0 0 5.07 2.59A12.89 12.89 0 0 0 8.23 18a9.65 9.65 0 0 1-1.71-.83 3.39 3.39 0 0 0 .42-.33 11.66 11.66 0 0 0 10.12 0q.21.18.42.33a10.84 10.84 0 0 1-1.71.84 12.41 12.41 0 0 0 1.08 1.78 16.44 16.44 0 0 0 5.06-2.59 17.22 17.22 0 0 0-3-11.59 16.09 16.09 0 0 0-4.09-1.35zM8.68 14.81a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.93 1.93 0 0 1 1.8 2 1.93 1.93 0 0 1-1.8 2zm6.64 0a1.94 1.94 0 0 1-1.8-2 1.93 1.93 0 0 1 1.8-2 1.92 1.92 0 0 1 1.8 2 1.92 1.92 0 0 1-1.8 2z"
-      ></path>
+        fill={fill}
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/flash.tsx b/apps/docs/src/components/icons/flash.tsx
index c2e5d5762b..4ab5313bf4 100644
--- a/apps/docs/src/components/icons/flash.tsx
+++ b/apps/docs/src/components/icons/flash.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,29 +7,23 @@ export interface Props {
   size?: number;
 }
 
-const Flash: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const Flash: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M6.09 13.28h3.09v7.2c0 1.68.91 2.02 2.02.76l7.57-8.6c.93-1.05.54-1.92-.87-1.92h-3.09v-7.2c0-1.68-.91-2.02-2.02-.76l-7.57 8.6c-.92 1.06-.53 1.92.87 1.92Z"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/forward5s.tsx b/apps/docs/src/components/icons/forward5s.tsx
index a6e2628968..7db3e92d5a 100644
--- a/apps/docs/src/components/icons/forward5s.tsx
+++ b/apps/docs/src/components/icons/forward5s.tsx
@@ -1,26 +1,19 @@
-import * as React from 'react';
-import { IconProps, Icon } from './index';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
+
+import {IconProps, Icon} from "./index";
 
 const defualtProps = {
-  fill: 'currentColor'
+  fill: "currentColor",
 };
 
-const Rewind5s: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+const Rewind5s: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
   return (
     <Icon
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
diff --git a/apps/docs/src/components/icons/gaming-console.tsx b/apps/docs/src/components/icons/gaming-console.tsx
index 0abfea5f55..9a45f76595 100644
--- a/apps/docs/src/components/icons/gaming-console.tsx
+++ b/apps/docs/src/components/icons/gaming-console.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,45 +7,39 @@ export interface Props {
   size?: number;
 }
 
-const GamingConsole: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const GamingConsole: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M21 7v10c0 3-1.5 5-5 5H8c-3.5 0-5-2-5-5V7c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5Z"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M16.25 11h-8.5C6.79 11 6 10.21 6 9.25v-2.5C6 5.79 6.79 5 7.75 5h8.5c.96 0 1.75.79 1.75 1.75v2.5c0 .96-.79 1.75-1.75 1.75ZM10.3 15.28 8 17.58M8.03 15.31l2.3 2.3"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M16.49 15.33h.02M14.49 17.5v-.02"
         stroke={fill}
-        strokeWidth={2}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={2}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/github.tsx b/apps/docs/src/components/icons/github.tsx
index 3247331b21..a4e257aecd 100644
--- a/apps/docs/src/components/icons/github.tsx
+++ b/apps/docs/src/components/icons/github.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   width?: number;
@@ -12,31 +12,24 @@ interface Props {
 const defaultProps = {
   width: 24,
   height: 24,
-  className: ''
+  className: "",
 };
 
-const Github: React.FC<Props> = ({
-  size,
-  fill,
-  width,
-  height,
-  className,
-  ...props
-}) => {
+const Github: React.FC<Props> = ({size, fill, width, height, className, ...props}) => {
   return (
     <svg
-      width={size || width}
+      className={className}
       height={size || height}
       viewBox="0 0 24 24"
-      className={className}
+      width={size || width}
       {...props}
     >
       <path
-        fill={fill}
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"
-      ></path>
+        fill={fill}
+        fillRule="evenodd"
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/hash.tsx b/apps/docs/src/components/icons/hash.tsx
index 57f52501ea..b7feb757dc 100644
--- a/apps/docs/src/components/icons/hash.tsx
+++ b/apps/docs/src/components/icons/hash.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   width?: number;
@@ -13,58 +13,48 @@ const defaultProps = {
   height: 24,
 };
 
-const Hash: React.FC<Props> = ({ size, fill, width, height, ...props }) => {
+const Hash: React.FC<Props> = ({size, fill, width, height, ...props}) => {
   return (
-    <svg
-      width={size || width}
-      height={size || height}
-      viewBox="0 0 24 24"
-      {...props}
-    >
+    <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
       <g transform="translate(-684 -252)">
         <g id="hashtag">
           <path
             d="M2,0,0,18"
-            transform="translate(692 255)"
             fill="none"
             stroke={fill}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="1.5"
+            transform="translate(692 255)"
           />
           <path
             d="M2,0,0,18"
-            transform="translate(698 255)"
             fill="none"
             stroke={fill}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="1.5"
+            transform="translate(698 255)"
           />
           <path
             d="M0,0H18"
-            transform="translate(687.5 261)"
             fill="none"
             stroke={fill}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="1.5"
+            transform="translate(687.5 261)"
           />
           <path
             d="M0,0H18"
-            transform="translate(686.5 267)"
             fill="none"
             stroke={fill}
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="1.5"
+            transform="translate(686.5 267)"
           />
-          <path
-            d="M0,0H24V24H0Z"
-            transform="translate(684 252)"
-            fill="none"
-            opacity="0"
-          />
+          <path d="M0,0H24V24H0Z" fill="none" opacity="0" transform="translate(684 252)" />
         </g>
       </g>
     </svg>
diff --git a/apps/docs/src/components/icons/heart.tsx b/apps/docs/src/components/icons/heart.tsx
index 7e5d2f1add..2933ccc9e8 100644
--- a/apps/docs/src/components/icons/heart.tsx
+++ b/apps/docs/src/components/icons/heart.tsx
@@ -1,30 +1,23 @@
-import * as React from 'react';
-import { IconProps, Icon } from './index';
+import * as React from "react";
 
-const Heart: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+import {IconProps, Icon} from "./index";
+
+const Heart: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
   return (
     <Icon
-      width={size || width || 24}
+      fill={filled ? fill : "none"}
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill={filled ? fill : 'none'}
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
     </Icon>
   );
diff --git a/apps/docs/src/components/icons/home.tsx b/apps/docs/src/components/icons/home.tsx
index d0411eb7ce..31344dae0e 100644
--- a/apps/docs/src/components/icons/home.tsx
+++ b/apps/docs/src/components/icons/home.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,30 +7,18 @@ export interface Props {
   size?: number;
 }
 
-const Home: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const Home: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width}
       height={size || height}
       viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g
-        fill="none"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      >
+      <g fill="none" stroke={fill} strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}>
         <path d="M9.02 2.84l-5.39 4.2A4.759 4.759 0 002 10.36v7.41a4.225 4.225 0 004.21 4.22h11.58A4.223 4.223 0 0022 17.78V10.5a4.723 4.723 0 00-1.8-3.45l-6.18-4.333a4.487 4.487 0 00-5 .123z" />
-        <path data-name="Vector" d="M12 17.99v-3" />
+        <path d="M12 17.99v-3" data-name="Vector" />
       </g>
     </svg>
   );
diff --git a/apps/docs/src/components/icons/html-logo.tsx b/apps/docs/src/components/icons/html-logo.tsx
index bcd751e377..0516146186 100644
--- a/apps/docs/src/components/icons/html-logo.tsx
+++ b/apps/docs/src/components/icons/html-logo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,37 +7,31 @@ export interface Props {
   size?: number;
 }
 
-const HtmlLogo: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const HtmlLogo: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M4.1 2h15.8c.6 0 1.1.5 1 1.1l-1.8 16.2c0 .4-.3.7-.7.9l-6.1 1.7c-.2.1-.4.1-.5 0l-6.1-1.7c-.4-.1-.7-.4-.7-.9L3.1 3.1c0-.6.4-1.1 1-1.1Z"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M16.2 6.8H7.8l.4 4.4h7.6l-.6 5-3.4 1-3.6-1v-2"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/index.ts b/apps/docs/src/components/icons/index.ts
index 320abaadd1..8ddc1fac36 100644
--- a/apps/docs/src/components/icons/index.ts
+++ b/apps/docs/src/components/icons/index.ts
@@ -1,4 +1,4 @@
-import { styled, CSS } from '@nextui-org/react';
+import {styled, CSS} from "@nextui-org/react";
 
 export interface IconProps {
   fill?: string;
@@ -12,61 +12,61 @@ export interface IconProps {
   css?: CSS;
 }
 
-export const Icon = styled('svg', {});
+export const Icon = styled("svg", {});
 
-export { default as Home } from './home';
-export { default as Anchor } from './anchor';
-export { default as Activity } from './activity';
-export { default as Camera } from './camera';
-export { default as ChevronLeft } from './chevron-left';
-export { default as ChevronRight } from './chevron-right';
-export { default as ArrowLeft } from './arrow-left';
-export { default as ArrowRight } from './arrow-right';
-export { default as Copy } from './copy';
-export { default as Lock } from './lock';
-export { default as Unlock } from './unlock';
-export { default as Moon } from './moon';
-export { default as Notification } from './notification';
-export { default as Sun } from './sun';
-export { default as UserIcon } from './user';
-export { default as VolumeUp } from './volume-up';
-export { default as Heart } from './heart';
-export { default as Bug } from './bug';
-export { default as Microphone } from './microphone';
-export { default as MicrophoneOff } from './microphone-off';
-export { default as Video } from './video';
-export { default as VideoOff } from './video-off';
-export { default as Search } from './search';
-export { default as Hash } from './hash';
-export { default as CodeDocument } from './code-document';
-export { default as SearchByAlgolia } from './search-by-algolia';
-export { default as Close } from './close';
-export { default as Twitter } from './twitter';
-export { default as Discord } from './discord';
-export { default as Github } from './github';
-export { default as Send } from './send';
-export { default as Mail } from './mail';
-export { default as Password } from './password';
-export { default as Palette } from './palette';
-export { default as Note } from './note';
-export { default as Plus } from './plus';
-export { default as Minus } from './minus';
-export { default as Magic } from './magic';
-export { default as Flash } from './flash';
-export { default as Devices } from './devices';
-export { default as Play } from './play';
-export { default as Rewind5s } from './rewind5s';
-export { default as Forward5s } from './forward5s';
-export { default as NextTrack } from './next-track';
-export { default as PreviousTrack } from './previous-track';
-export { default as GamingConsole } from './gaming-console';
-export { default as Star } from './star';
-export { default as Server } from './server';
-export { default as TagUser } from './tag-user';
-export { default as RoundPointer } from './round-pointer';
-export { default as Maximize } from './maximize';
-export { default as HtmlLogo } from './html-logo';
-export { default as NextJsLogo } from './nextjs-logo';
-export { default as VercelLogo } from './vercel';
-export { default as TypescriptLogo } from './typescript';
-export { default as JavascriptLogo } from './javascript';
+export {default as Home} from "./home";
+export {default as Anchor} from "./anchor";
+export {default as Activity} from "./activity";
+export {default as Camera} from "./camera";
+export {default as ChevronLeft} from "./chevron-left";
+export {default as ChevronRight} from "./chevron-right";
+export {default as ArrowLeft} from "./arrow-left";
+export {default as ArrowRight} from "./arrow-right";
+export {default as Copy} from "./copy";
+export {default as Lock} from "./lock";
+export {default as Unlock} from "./unlock";
+export {default as Moon} from "./moon";
+export {default as Notification} from "./notification";
+export {default as Sun} from "./sun";
+export {default as UserIcon} from "./user";
+export {default as VolumeUp} from "./volume-up";
+export {default as Heart} from "./heart";
+export {default as Bug} from "./bug";
+export {default as Microphone} from "./microphone";
+export {default as MicrophoneOff} from "./microphone-off";
+export {default as Video} from "./video";
+export {default as VideoOff} from "./video-off";
+export {default as Search} from "./search";
+export {default as Hash} from "./hash";
+export {default as CodeDocument} from "./code-document";
+export {default as SearchByAlgolia} from "./search-by-algolia";
+export {default as Close} from "./close";
+export {default as Twitter} from "./twitter";
+export {default as Discord} from "./discord";
+export {default as Github} from "./github";
+export {default as Send} from "./send";
+export {default as Mail} from "./mail";
+export {default as Password} from "./password";
+export {default as Palette} from "./palette";
+export {default as Note} from "./note";
+export {default as Plus} from "./plus";
+export {default as Minus} from "./minus";
+export {default as Magic} from "./magic";
+export {default as Flash} from "./flash";
+export {default as Devices} from "./devices";
+export {default as Play} from "./play";
+export {default as Rewind5s} from "./rewind5s";
+export {default as Forward5s} from "./forward5s";
+export {default as NextTrack} from "./next-track";
+export {default as PreviousTrack} from "./previous-track";
+export {default as GamingConsole} from "./gaming-console";
+export {default as Star} from "./star";
+export {default as Server} from "./server";
+export {default as TagUser} from "./tag-user";
+export {default as RoundPointer} from "./round-pointer";
+export {default as Maximize} from "./maximize";
+export {default as HtmlLogo} from "./html-logo";
+export {default as NextJsLogo} from "./nextjs-logo";
+export {default as VercelLogo} from "./vercel";
+export {default as TypescriptLogo} from "./typescript";
+export {default as JavascriptLogo} from "./javascript";
diff --git a/apps/docs/src/components/icons/javascript.tsx b/apps/docs/src/components/icons/javascript.tsx
index fc9024118d..57d9014734 100644
--- a/apps/docs/src/components/icons/javascript.tsx
+++ b/apps/docs/src/components/icons/javascript.tsx
@@ -1,8 +1,9 @@
-import * as React from 'react';
-import { IconProps } from './index';
+import * as React from "react";
+
+import {IconProps} from "./index";
 
 const Javascript: React.FC<IconProps> = ({
-  fill = 'currentColor',
+  fill = "currentColor",
   size,
   height,
   width,
@@ -10,14 +11,14 @@ const Javascript: React.FC<IconProps> = ({
 }) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
+      fill={fill}
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill={fill}
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z"></path>
+      <path d="M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z" />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/lock.tsx b/apps/docs/src/components/icons/lock.tsx
index a950a07abc..f9c7be10dc 100644
--- a/apps/docs/src/components/icons/lock.tsx
+++ b/apps/docs/src/components/icons/lock.tsx
@@ -1,24 +1,18 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const Lock: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+  const {theme} = useTheme();
 
-const Lock: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  const { theme } = useTheme();
   return (
     <svg
       data-name="Iconly/Curved/Lock"
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g
@@ -29,14 +23,11 @@ const Lock: React.FC<IconProps> = ({
         strokeMiterlimit={10}
         strokeWidth={1.5}
       >
+        <path d="M16.471 9.403V7.25a4.561 4.561 0 00-9.121-.016v2.169" data-name="Stroke 1" />
+        <path d="M11.91 14.156v2.221" data-name="Stroke 3" />
         <path
-          data-name="Stroke 1"
-          d="M16.471 9.403V7.25a4.561 4.561 0 00-9.121-.016v2.169"
-        />
-        <path data-name="Stroke 3" d="M11.91 14.156v2.221" />
-        <path
-          data-name="Stroke 5"
           d="M11.91 8.824c-5.745 0-7.66 1.568-7.66 6.271s1.915 6.272 7.66 6.272 7.661-1.568 7.661-6.272-1.921-6.271-7.661-6.271z"
+          data-name="Stroke 5"
         />
       </g>
     </svg>
diff --git a/apps/docs/src/components/icons/magic.tsx b/apps/docs/src/components/icons/magic.tsx
index 2ccad9a048..8fe55e842f 100644
--- a/apps/docs/src/components/icons/magic.tsx
+++ b/apps/docs/src/components/icons/magic.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,28 +7,22 @@ export interface Props {
   size?: number;
 }
 
-const Magic: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const Magic: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M3.5 20.5c.83.83 2.17.83 3 0l13-13c.83-.83.83-2.17 0-3-.83-.83-2.17-.83-3 0l-13 13c-.83.83-.83 2.17 0 3ZM18.01 8.99l-3-3"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
       <path
         d="M8.5 2.44 10 2l-.44 1.5L10 5l-1.5-.44L7 5l.44-1.5L7 2l1.5.44ZM4.5 8.44 6 8l-.44 1.5L6 11l-1.5-.44L3 11l.44-1.5L3 8l1.5.44ZM19.5 13.44 21 13l-.44 1.5L21 16l-1.5-.44L18 16l.44-1.5L18 13l1.5.44Z"
diff --git a/apps/docs/src/components/icons/mail.tsx b/apps/docs/src/components/icons/mail.tsx
index e7d8ac6131..b1fba6f5a7 100644
--- a/apps/docs/src/components/icons/mail.tsx
+++ b/apps/docs/src/components/icons/mail.tsx
@@ -1,16 +1,13 @@
-import React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const Mail: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
+  const {theme} = useTheme();
 
-const Mail: React.FC<IconProps> = ({ fill, size, height, width, ...props }) => {
-  const { theme } = useTheme();
   return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      {...props}
-    >
+    <svg height={size || height || 24} viewBox="0 0 24 24" width={size || width || 24} {...props}>
       <g
         fill="none"
         stroke={fill || theme?.colors?.text?.value}
diff --git a/apps/docs/src/components/icons/map-icons.tsx b/apps/docs/src/components/icons/map-icons.tsx
index d08ea5dc4e..5a02f0b4e8 100644
--- a/apps/docs/src/components/icons/map-icons.tsx
+++ b/apps/docs/src/components/icons/map-icons.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
-import * as IconPack from './index';
+import React from "react";
+
+import * as IconPack from "./index";
 
 export interface GenericIconProps extends IconPack.IconProps {
   name: string;
 }
 
-const icons: { [key: string]: any } = {
+const icons: {[key: string]: any} = {
   home: IconPack.Home,
   note: IconPack.Note,
   twitter: IconPack.Twitter,
@@ -14,17 +15,19 @@ const icons: { [key: string]: any } = {
   palette: IconPack.Palette,
   moon: IconPack.Moon,
   sun: IconPack.Sun,
-  'arrow-left': IconPack.ArrowLeft,
-  'arrow-right': IconPack.ArrowRight,
-  'chevron-left': IconPack.ChevronLeft,
-  'chevron-right': IconPack.ChevronRight
+  "arrow-left": IconPack.ArrowLeft,
+  "arrow-right": IconPack.ArrowRight,
+  "chevron-left": IconPack.ChevronLeft,
+  "chevron-right": IconPack.ChevronRight,
 };
 
-const Iconly: React.FC<GenericIconProps> = ({ name, ...props }) => {
+const Iconly: React.FC<GenericIconProps> = ({name, ...props}) => {
   const Icon = icons[name];
+
   if (!Icon) {
     throw new Error(`Icon '${name}' doesn't exists in the icons folder`);
   }
+
   return <Icon {...props} />;
 };
 
diff --git a/apps/docs/src/components/icons/maximize.tsx b/apps/docs/src/components/icons/maximize.tsx
index dad1c69559..a3f20eb12c 100644
--- a/apps/docs/src/components/icons/maximize.tsx
+++ b/apps/docs/src/components/icons/maximize.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,35 +7,29 @@ export interface Props {
   size?: number;
 }
 
-const Maximize: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const Maximize: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7ZM18 6 6 18"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
       <path
         d="M18 10V6h-4M6 14v4h4"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/microphone-off.tsx b/apps/docs/src/components/icons/microphone-off.tsx
index 7a5bff0c0c..49a9259354 100644
--- a/apps/docs/src/components/icons/microphone-off.tsx
+++ b/apps/docs/src/components/icons/microphone-off.tsx
@@ -1,6 +1,7 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
 
 const MicrophoneOff: React.FC<IconProps> = ({
   fill,
@@ -11,43 +12,45 @@ const MicrophoneOff: React.FC<IconProps> = ({
   label,
   ...props
 }) => {
-  const { theme } = useTheme();
+  const {theme} = useTheme();
+
   if (filled) {
     return (
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={size || width}
         height={size || height}
         viewBox="0 0 24 24"
+        width={size || width}
+        xmlns="http://www.w3.org/2000/svg"
         {...props}
       >
         <path
-          fill={fill || theme?.colors?.foreground?.value}
           d="M21.707 20.293l-3.4-3.4C19.362 15.54 20 13.846 20 12h-2c0 1.293-.419 2.487-1.119 3.467l-1.449-1.45C15.785 13.424 16 12.74 16 12V6c0-2.217-1.785-4.021-3.979-4.021-.07 0-.14.009-.209.025C9.693 2.104 8 3.857 8 6v.586L3.707 2.293 2.293 3.707l18 18L21.707 20.293zM6 12H4c0 4.072 3.06 7.436 7 7.931V22h2v-2.069c.789-.099 1.54-.318 2.241-.63l-1.549-1.548C13.155 17.911 12.588 18 12 18 8.691 18 6 15.309 6 12z"
-        ></path>
-        <path
           fill={fill || theme?.colors?.foreground?.value}
+        />
+        <path
           d="M8.007,12.067c0.036,2.151,1.775,3.89,3.926,3.926L8.007,12.067z"
-        ></path>
+          fill={fill || theme?.colors?.foreground?.value}
+        />
       </svg>
     );
   }
+
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width}
       height={size || height}
       viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fill={fill || theme?.colors?.foreground?.value}
         d="M21.707 20.293l-3.388-3.388C19.368 15.553 20 13.861 20 12.021h-2c0 1.289-.415 2.478-1.109 3.456l-1.452-1.452C15.787 13.434 16 12.755 16 12.021v-6C16 3.804 14.215 2 12.021 2c-.07 0-.14.009-.209.025C9.693 2.124 8 3.878 8 6.021v.565L3.707 2.293 2.293 3.707l18 18L21.707 20.293zM10 6.021c0-1.103.897-2 2-2 .054 0 .109-.005.164-.015C13.188 4.08 14 4.956 14 6.021v6c0 .172-.029.335-.071.494L10 8.586V6.021zM6 12.021H5 4c0 4.072 3.06 7.436 7 7.931v2.069h2v-2.07c.778-.099 1.524-.305 2.218-.611l-1.558-1.558c-.527.152-1.083.239-1.66.239C8.691 18.021 6 15.329 6 12.021z"
-      ></path>
-      <path
         fill={fill || theme?.colors?.foreground?.value}
+      />
+      <path
         d="M8.011,12.132c0.06,2.115,1.762,3.817,3.877,3.877L8.011,12.132z"
-      ></path>
+        fill={fill || theme?.colors?.foreground?.value}
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/microphone.tsx b/apps/docs/src/components/icons/microphone.tsx
index 2a9ba9557d..9aae6b77c1 100644
--- a/apps/docs/src/components/icons/microphone.tsx
+++ b/apps/docs/src/components/icons/microphone.tsx
@@ -1,53 +1,48 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const Microphone: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+  const {theme} = useTheme();
 
-const Microphone: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  const { theme } = useTheme();
   if (filled) {
     return (
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={size || width}
         height={size || height}
         viewBox="0 0 24 24"
+        width={size || width}
+        xmlns="http://www.w3.org/2000/svg"
         {...props}
       >
         <path
-          fill={fill || theme?.colors?.foreground?.value}
           d="M12,16c2.206,0,4-1.794,4-4V6c0-2.217-1.785-4.021-3.979-4.021c-0.069,0-0.14,0.009-0.209,0.025C9.693,2.104,8,3.857,8,6v6 C8,14.206,9.794,16,12,16z"
+          fill={fill || theme?.colors?.foreground?.value}
         />
         <path
-          fill={fill || theme?.colors?.foreground?.value}
           d="M11,19.931V22h2v-2.069c3.939-0.495,7-3.858,7-7.931h-2c0,3.309-2.691,6-6,6s-6-2.691-6-6H4 C4,16.072,7.061,19.436,11,19.931z"
-        ></path>
+          fill={fill || theme?.colors?.foreground?.value}
+        />
       </svg>
     );
   }
+
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width}
       height={size || height}
       viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fill={fill || theme?.colors?.foreground?.value}
         d="M16,12V6c0-2.217-1.785-4.021-3.979-4.021c-0.069,0-0.14,0.009-0.209,0.025C9.693,2.104,8,3.857,8,6v6c0,2.206,1.794,4,4,4 S16,14.206,16,12z M10,12V6c0-1.103,0.897-2,2-2c0.055,0,0.109-0.005,0.163-0.015C13.188,4.06,14,4.935,14,6v6c0,1.103-0.897,2-2,2 S10,13.103,10,12z"
-      ></path>
-      <path
         fill={fill || theme?.colors?.foreground?.value}
+      />
+      <path
         d="M6,12H4c0,4.072,3.061,7.436,7,7.931V22h2v-2.069c3.939-0.495,7-3.858,7-7.931h-2c0,3.309-2.691,6-6,6S6,15.309,6,12z"
-      ></path>
+        fill={fill || theme?.colors?.foreground?.value}
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/minus.tsx b/apps/docs/src/components/icons/minus.tsx
index 7fb758b333..3dc9b0e9e9 100644
--- a/apps/docs/src/components/icons/minus.tsx
+++ b/apps/docs/src/components/icons/minus.tsx
@@ -1,21 +1,17 @@
-import React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const Minus: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
+  const {theme} = useTheme();
 
-const Minus: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  const { theme } = useTheme();
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
diff --git a/apps/docs/src/components/icons/moon.tsx b/apps/docs/src/components/icons/moon.tsx
index 21114577c9..f7ee0d38d0 100644
--- a/apps/docs/src/components/icons/moon.tsx
+++ b/apps/docs/src/components/icons/moon.tsx
@@ -1,8 +1,9 @@
-import * as React from 'react';
-import { IconProps } from './index';
+import * as React from "react";
+
+import {IconProps} from "./index";
 
 const Moon: React.FC<IconProps> = ({
-  fill = 'currentColor',
+  fill = "currentColor",
   filled,
   size,
   height,
@@ -12,12 +13,7 @@ const Moon: React.FC<IconProps> = ({
 }) => {
   if (filled) {
     return (
-      <svg
-        width={size || width || 24}
-        height={size || height || 24}
-        viewBox="0 0 24 24"
-        {...props}
-      >
+      <svg height={size || height || 24} viewBox="0 0 24 24" width={size || width || 24} {...props}>
         <path
           d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
           fill={fill}
@@ -25,18 +21,19 @@ const Moon: React.FC<IconProps> = ({
       </svg>
     );
   }
+
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fill={fill}
         d="M20.742,13.045c-0.677,0.18-1.376,0.271-2.077,0.271c-2.135,0-4.14-0.83-5.646-2.336c-2.008-2.008-2.799-4.967-2.064-7.723 c0.092-0.345-0.007-0.713-0.259-0.965C10.444,2.04,10.077,1.938,9.73,2.034C8.028,2.489,6.476,3.382,5.241,4.616 c-3.898,3.898-3.898,10.243,0,14.143c1.889,1.889,4.401,2.93,7.072,2.93c2.671,0,5.182-1.04,7.07-2.929 c1.236-1.237,2.13-2.791,2.583-4.491c0.092-0.345-0.008-0.713-0.26-0.965C21.454,13.051,21.085,12.951,20.742,13.045z M17.97,17.346c-1.511,1.511-3.52,2.343-5.656,2.343c-2.137,0-4.146-0.833-5.658-2.344c-3.118-3.119-3.118-8.195,0-11.314 c0.602-0.602,1.298-1.102,2.06-1.483c-0.222,2.885,0.814,5.772,2.89,7.848c2.068,2.069,4.927,3.12,7.848,2.891 C19.072,16.046,18.571,16.743,17.97,17.346z"
-      ></path>
+        fill={fill}
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/next-track.tsx b/apps/docs/src/components/icons/next-track.tsx
index 1dbbd77582..96d4d3facf 100644
--- a/apps/docs/src/components/icons/next-track.tsx
+++ b/apps/docs/src/components/icons/next-track.tsx
@@ -1,26 +1,19 @@
-import * as React from 'react';
-import { IconProps, Icon } from './index';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
+
+import {IconProps, Icon} from "./index";
 
 const defaultProps = {
-  fill: 'currentColor'
+  fill: "currentColor",
 };
 
-const NextTrack: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+const NextTrack: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
   return (
     <Icon
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
diff --git a/apps/docs/src/components/icons/nextjs-logo.tsx b/apps/docs/src/components/icons/nextjs-logo.tsx
index ba2a7ba461..f0f5e08adc 100644
--- a/apps/docs/src/components/icons/nextjs-logo.tsx
+++ b/apps/docs/src/components/icons/nextjs-logo.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,25 +7,19 @@ export interface Props {
   size?: number;
 }
 
-const NextJS: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const NextJS: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
-      height={size || height}
-      xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
+      height={size || height}
       viewBox="0 0 256 256"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fill={fill}
         d="M119.617.069c-.55.05-2.302.225-3.879.35-36.36 3.278-70.419 22.894-91.99 53.044-12.012 16.764-19.694 35.78-22.597 55.922C.125 116.415 0 118.492 0 128.025c0 9.533.125 11.61 1.151 18.64 6.957 48.065 41.165 88.449 87.56 103.411 8.309 2.678 17.067 4.504 27.027 5.605 3.879.425 20.645.425 24.524 0 17.192-1.902 31.756-6.155 46.12-13.486 2.202-1.126 2.628-1.426 2.327-1.677-.2-.15-9.584-12.735-20.845-27.948l-20.47-27.648-25.65-37.956c-14.114-20.868-25.725-37.932-25.825-37.932-.1-.025-.2 16.84-.25 37.431-.076 36.055-.1 37.506-.551 38.357-.65 1.226-1.151 1.727-2.202 2.277-.801.4-1.502.475-5.28.475h-4.33l-1.15-.725a4.679 4.679 0 0 1-1.677-1.827l-.526-1.126.05-50.166.075-50.192.776-.976c.4-.525 1.251-1.2 1.852-1.526 1.026-.5 1.426-.55 5.755-.55 5.105 0 5.956.2 7.282 1.651.376.4 14.264 21.318 30.88 46.514 16.617 25.195 39.34 59.599 50.5 76.488l20.27 30.7 1.026-.675c9.084-5.905 18.693-14.312 26.3-23.07 16.191-18.59 26.626-41.258 30.13-65.428 1.026-7.031 1.151-9.108 1.151-18.64 0-9.534-.125-11.61-1.151-18.641-6.957-48.065-41.165-88.449-87.56-103.411-8.184-2.652-16.892-4.479-26.652-5.58-2.402-.25-18.943-.525-21.02-.325zm52.401 77.414c1.201.6 2.177 1.752 2.527 2.953.2.65.25 14.562.2 45.913l-.074 44.987-7.933-12.16-7.958-12.16v-32.702c0-21.143.1-33.028.25-33.603.4-1.401 1.277-2.502 2.478-3.153 1.026-.525 1.401-.575 5.33-.575 3.704 0 4.354.05 5.18.5z"
+        fill={fill}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/note.tsx b/apps/docs/src/components/icons/note.tsx
index dd635238d8..71967dce71 100644
--- a/apps/docs/src/components/icons/note.tsx
+++ b/apps/docs/src/components/icons/note.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,28 +7,16 @@ export interface Props {
   size?: number;
 }
 
-const Note: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const Note: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width}
       height={size || height}
       viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <g
-        fill="none"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      >
+      <g fill="none" stroke={fill} strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}>
         <path d="M8 2v3" />
         <path d="M16 2v3M7 13h8M7 17h5M16 3.5c3.33.18 5 1.45 5 6.15v6.18c0 4.12-1 6.18-6 6.18H9c-5 0-6-2.06-6-6.18V9.65c0-4.7 1.67-5.96 5-6.15z" />
       </g>
diff --git a/apps/docs/src/components/icons/notification.tsx b/apps/docs/src/components/icons/notification.tsx
index f4c9e8ce3d..80f73e3d1d 100644
--- a/apps/docs/src/components/icons/notification.tsx
+++ b/apps/docs/src/components/icons/notification.tsx
@@ -1,6 +1,7 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
 
 const Notification: React.FC<IconProps> = ({
   fill,
@@ -11,21 +12,22 @@ const Notification: React.FC<IconProps> = ({
   label,
   ...props
 }) => {
-  const { theme } = useTheme();
+  const {theme} = useTheme();
+
   return (
     <svg
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fillRule="evenodd"
         clipRule="evenodd"
         d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
         fill={fill || theme?.colors?.foreground?.value}
+        fillRule="evenodd"
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/palette.tsx b/apps/docs/src/components/icons/palette.tsx
index c4219d61e9..a3716ffc83 100644
--- a/apps/docs/src/components/icons/palette.tsx
+++ b/apps/docs/src/components/icons/palette.tsx
@@ -1,22 +1,17 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const Palette: React.FC<IconProps> = ({fill, size, height, width, label, ...props}) => {
+  const {theme} = useTheme();
 
-const Palette: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  const { theme } = useTheme();
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g
diff --git a/apps/docs/src/components/icons/password.tsx b/apps/docs/src/components/icons/password.tsx
index cc5deff69c..84147e404b 100644
--- a/apps/docs/src/components/icons/password.tsx
+++ b/apps/docs/src/components/icons/password.tsx
@@ -1,22 +1,13 @@
-import React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const Password: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
+  const {theme} = useTheme();
 
-const Password: React.FC<IconProps> = ({
-  fill,
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  const { theme } = useTheme();
   return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      {...props}
-    >
+    <svg height={size || height || 24} viewBox="0 0 24 24" width={size || width || 24} {...props}>
       <g fill={fill || theme?.colors?.text?.value}>
         <path d="M18.75 8v2.1a12.984 12.984 0 00-1.5-.1V8c0-3.15-.89-5.25-5.25-5.25S6.75 4.85 6.75 8v2a12.984 12.984 0 00-1.5.1V8c0-2.9.7-6.75 6.75-6.75S18.75 5.1 18.75 8z" />
         <path d="M18.75 10.1a12.984 12.984 0 00-1.5-.1H6.75a12.984 12.984 0 00-1.5.1C2.7 10.41 2 11.66 2 15v2c0 4 1 5 5 5h10c4 0 5-1 5-5v-2c0-3.34-.7-4.59-3.25-4.9zM8.71 16.71A1.052 1.052 0 018 17a1 1 0 01-.38-.08 1.032 1.032 0 01-.33-.21A1.052 1.052 0 017 16a1 1 0 01.08-.38 1.155 1.155 0 01.21-.33 1.032 1.032 0 01.33-.21 1 1 0 011.09.21 1.155 1.155 0 01.21.33A1 1 0 019 16a1.052 1.052 0 01-.29.71zm4.21-.33a1.155 1.155 0 01-.21.33A1.052 1.052 0 0112 17a1.033 1.033 0 01-.71-.29 1.155 1.155 0 01-.21-.33A1 1 0 0111 16a1.033 1.033 0 01.29-.71 1.047 1.047 0 011.42 0A1.033 1.033 0 0113 16a1 1 0 01-.08.38zm3.79.33a1.014 1.014 0 01-1.42 0 1.014 1.014 0 010-1.42 1.047 1.047 0 011.42 0c.04.05.08.1.12.16a.556.556 0 01.09.17.636.636 0 01.06.18 1.5 1.5 0 01.02.2 1.052 1.052 0 01-.29.71z" />
diff --git a/apps/docs/src/components/icons/play.tsx b/apps/docs/src/components/icons/play.tsx
index 2813ec678c..112dcf6260 100644
--- a/apps/docs/src/components/icons/play.tsx
+++ b/apps/docs/src/components/icons/play.tsx
@@ -1,26 +1,19 @@
-import * as React from 'react';
-import { IconProps, Icon } from './index';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
+
+import {IconProps, Icon} from "./index";
 
 const defaultProps = {
-  fill: '#ffffff'
+  fill: "#ffffff",
 };
 
-const Play: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+const Play: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
   return (
     <Icon
-      width={size || width || 16}
+      fill={filled ? fill : "none"}
       height={size || height || 19}
       viewBox="0 0 14.71 17.33"
-      fill={filled ? fill : 'none'}
+      width={size || width || 16}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
diff --git a/apps/docs/src/components/icons/plus.tsx b/apps/docs/src/components/icons/plus.tsx
index eb8678c26f..2c1bc62df1 100644
--- a/apps/docs/src/components/icons/plus.tsx
+++ b/apps/docs/src/components/icons/plus.tsx
@@ -1,15 +1,17 @@
-import React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const Plus: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
+  const {theme} = useTheme();
 
-const Plus: React.FC<IconProps> = ({ fill, size, height, width, ...props }) => {
-  const { theme } = useTheme();
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g
diff --git a/apps/docs/src/components/icons/previous-track.tsx b/apps/docs/src/components/icons/previous-track.tsx
index c8e845956c..b55d7c066d 100644
--- a/apps/docs/src/components/icons/previous-track.tsx
+++ b/apps/docs/src/components/icons/previous-track.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react';
-import { IconProps, Icon } from './index';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
+
+import {IconProps, Icon} from "./index";
 
 const defaultProps = {
-  fill: 'currentColor'
+  fill: "currentColor",
 };
 
 const PreviousTrack: React.FC<IconProps> = ({
@@ -17,10 +18,10 @@ const PreviousTrack: React.FC<IconProps> = ({
 }) => {
   return (
     <Icon
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
diff --git a/apps/docs/src/components/icons/rewind5s.tsx b/apps/docs/src/components/icons/rewind5s.tsx
index 63efcddbc8..c6043dfe69 100644
--- a/apps/docs/src/components/icons/rewind5s.tsx
+++ b/apps/docs/src/components/icons/rewind5s.tsx
@@ -1,26 +1,19 @@
-import * as React from 'react';
-import { IconProps, Icon } from './index';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
+
+import {IconProps, Icon} from "./index";
 
 const defualtProps = {
-  fill: 'currentColor'
+  fill: "currentColor",
 };
 
-const Rewind5s: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+const Rewind5s: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
   return (
     <Icon
-      width={size || width || 24}
+      fill="none"
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width || 24}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
diff --git a/apps/docs/src/components/icons/round-pointer.tsx b/apps/docs/src/components/icons/round-pointer.tsx
index 62155ca49e..6959d75ce9 100644
--- a/apps/docs/src/components/icons/round-pointer.tsx
+++ b/apps/docs/src/components/icons/round-pointer.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,35 +7,29 @@ export interface Props {
   size?: number;
 }
 
-const RoundPointer: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const RoundPointer: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="m20.96 17.84-1.63.55c-.45.15-.81.5-.96.96l-.55 1.63c-.47 1.41-2.45 1.38-2.89-.03L13.08 15c-.36-1.18.73-2.28 1.9-1.91l5.96 1.85c1.4.44 1.42 2.43.02 2.9Z"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
       <path
         d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12s4.48 10 10 10"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/search-by-algolia.tsx b/apps/docs/src/components/icons/search-by-algolia.tsx
index ad6c7a68c7..596f21bfa9 100644
--- a/apps/docs/src/components/icons/search-by-algolia.tsx
+++ b/apps/docs/src/components/icons/search-by-algolia.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
+import {useTheme} from "@nextui-org/react";
 
 interface Props {
   width?: number;
@@ -10,31 +10,27 @@ interface Props {
 
 const defaultProps = {
   width: 84.14,
-  height: 11.404
+  height: 11.404,
 };
 
-const SearchByAlgolia: React.FC<Props> = ({
-  fill,
-  width,
-  height,
-  ...props
-}) => {
-  const { theme } = useTheme();
+const SearchByAlgolia: React.FC<Props> = ({fill, width, height, ...props}) => {
+  const {theme} = useTheme();
+
   return (
-    <svg width={width} height={height} viewBox="0 0 84.14 11.404" {...props}>
+    <svg height={height} viewBox="0 0 84.14 11.404" width={width} {...props}>
       <path
-        data-name="Path 53"
         d="M39.52 0h8.4a1.5 1.5 0 011.5 1.5v8.4a1.5 1.5 0 01-1.5 1.5h-8.4a1.5 1.5 0 01-1.5-1.5V1.498a1.5 1.5 0 011.5-1.5zm21.23 9.045a1.96 1.96 0 01-2.22-2.083V.211L59.88 0v6.71c0 .163 0 1.194.87 1.2v1.135zm-5.491-1.1a5.219 5.219 0 00.939-.065V6.499a3.206 3.206 0 00-.8-.1 2.886 2.886 0 00-.454.035 1.366 1.366 0 00-.412.121.737.737 0 00-.295.249.472.472 0 00-.111.332.649.649 0 00.312.623 1.583 1.583 0 00.818.183zm-.118-4.911a3.334 3.334 0 011.129.166 1.8 1.8 0 01.731.463 1.8 1.8 0 01.385.751 3.46 3.46 0 01.117.937v3.48q-.47.093-.946.159a9.824 9.824 0 01-1.424.094 4.351 4.351 0 01-.959-.1 2.026 2.026 0 01-.745-.322 1.562 1.562 0 01-.481-.574 2.178 2.178 0 01-.174-.913 1.432 1.432 0 01.194-.772 1.64 1.64 0 01.53-.56 2.28 2.28 0 01.776-.311 4.455 4.455 0 01.921-.094 4.254 4.254 0 011 .121v-.226a1.674 1.674 0 00-.056-.442.952.952 0 00-.194-.37.9.9 0 00-.367-.25 1.6 1.6 0 00-.579-.1 4.938 4.938 0 00-.856.083 3.916 3.916 0 00-.638.155l-.163-1.11a5.294 5.294 0 01.748-.177 5.559 5.559 0 011.049-.09zm26.755 4.87a5.2 5.2 0 00.939-.066V6.462a3.213 3.213 0 00-.8-.1 2.884 2.884 0 00-.454.035 1.367 1.367 0 00-.412.121.739.739 0 00-.295.249.472.472 0 00-.11.332.649.649 0 00.311.623 1.562 1.562 0 00.818.183zm-.114-4.908a3.335 3.335 0 011.129.166 1.813 1.813 0 01.731.463 1.825 1.825 0 01.384.751 3.443 3.443 0 01.118.938v3.478c-.208.045-.523.1-.946.159a9.828 9.828 0 01-1.424.093 4.321 4.321 0 01-.959-.1 2.026 2.026 0 01-.745-.321 1.562 1.562 0 01-.481-.574 2.179 2.179 0 01-.174-.913 1.429 1.429 0 01.194-.772 1.641 1.641 0 01.53-.56 2.29 2.29 0 01.776-.311 4.456 4.456 0 011.393-.066 3.993 3.993 0 01.526.094v-.222a1.67 1.67 0 00-.055-.443.948.948 0 00-.194-.37.9.9 0 00-.367-.249 1.6 1.6 0 00-.579-.1 4.938 4.938 0 00-.856.083 3.923 3.923 0 00-.638.155l-.163-1.11a5.379 5.379 0 01.748-.176 5.889 5.889 0 011.049-.09zm-4.067-.643a.82.82 0 11.825-.82.823.823 0 01-.829.82zm.682 6.693h-1.361v-5.84l1.362-.214v6.052zm-2.386 0a1.96 1.96 0 01-2.225-2.084V.211l1.355-.215v6.71c0 .163 0 1.194.87 1.2v1.139zm-4.4-2.988a2.374 2.374 0 00-.378-1.411 1.325 1.325 0 00-2.092 0 2.381 2.381 0 00-.371 1.411 2.111 2.111 0 00.375 1.331 1.319 1.319 0 002.092 0 2.121 2.121 0 00.374-1.331zm1.386 0a3.281 3.281 0 01-.2 1.18 2.8 2.8 0 01-.571.965 2.524 2.524 0 01-.887.619 3.613 3.613 0 01-1.147.228 3.54 3.54 0 01-1.14-.228 2.58 2.58 0 01-.883-.619 2.852 2.852 0 01-.576-.965 3.212 3.212 0 01-.208-1.18 3.7 3.7 0 01.2-1.27 2.812 2.812 0 01.582-.958 2.6 2.6 0 01.886-.616A2.875 2.875 0 0170.183 3a2.951 2.951 0 011.132.214 2.471 2.471 0 01.887.616 2.857 2.857 0 01.575.958 3.544 3.544 0 01.218 1.27zm-10.195 0a2.416 2.416 0 00.374 1.459 1.273 1.273 0 00.967.395 2.064 2.064 0 00.61-.09 1.7 1.7 0 00.464-.211V4.248a5.3 5.3 0 00-.894-.114 1.352 1.352 0 00-1.129.508 2.4 2.4 0 00-.391 1.411zm3.765 2.67a2.6 2.6 0 01-.711 2.027 3.162 3.162 0 01-2.175.643 9.335 9.335 0 01-1.691-.2l.218-1.072a8.291 8.291 0 001.493.132 1.66 1.66 0 001.164-.332 1.3 1.3 0 00.346-.986v-.228a4.085 4.085 0 01-.53.2 2.62 2.62 0 01-.755.1 2.83 2.83 0 01-1.022-.177 2.129 2.129 0 01-.793-.519 2.361 2.361 0 01-.515-.854 4.988 4.988 0 01-.184-1.4 4.243 4.243 0 01.194-1.3 2.49 2.49 0 01.572-.909 2.633 2.633 0 01.911-.588 3.344 3.344 0 011.229-.231 7.358 7.358 0 011.24.121 9.925 9.925 0 011 .21v5.359z"
+        data-name="Path 53"
         fill={fill}
       />
       <path
-        data-name="Path 54"
         d="M3.061 2.901v.824a2.264 2.264 0 00-1.228-.339 1.11 1.11 0 00-.7.2.628.628 0 00-.254.521.619.619 0 00.25.516 3.762 3.762 0 00.767.42c.226.1.4.18.529.251a3.565 3.565 0 01.436.295 1.174 1.174 0 01.363.453 1.462 1.462 0 01.116.6 1.376 1.376 0 01-.508 1.131 2.028 2.028 0 01-1.317.412 2.894 2.894 0 01-1.483-.344v-.865a2.4 2.4 0 001.478.477 1.1 1.1 0 00.7-.206.688.688 0 00.258-.57.607.607 0 00-.153-.4 1.1 1.1 0 00-.328-.276q-.178-.093-.533-.255l-.295-.135q-.141-.069-.278-.145a2.164 2.164 0 01-.287-.178q-.12-.1-.23-.2a.879.879 0 01-.2-.258 2.24 2.24 0 01-.113-.3 1.292 1.292 0 01-.053-.376 1.332 1.332 0 01.505-1.1 2.022 2.022 0 011.3-.4 2.777 2.777 0 011.258.247zm3.781 2.888v-.145a1.145 1.145 0 00-.251-.731.838.838 0 00-.67-.271.941.941 0 00-.7.3 1.441 1.441 0 00-.363.852zm.509 1.412v.711a2.4 2.4 0 01-1.2.258 1.957 1.957 0 01-2.076-2.074 2.2 2.2 0 01.517-1.547 1.71 1.71 0 011.316-.562 1.628 1.628 0 011.244.489 1.981 1.981 0 01.461 1.409 3.071 3.071 0 01-.049.525H4.875a1.2 1.2 0 00.453.816 1.5 1.5 0 00.937.282 1.851 1.851 0 001.086-.307zm3.344-.9h-.614a1.107 1.107 0 00-.683.177.548.548 0 00-.23.453.571.571 0 00.177.444.745.745 0 00.517.162.841.841 0 00.61-.215.742.742 0 00.223-.561v-.46zm-2.06-1.288v-.767a2.515 2.515 0 011.26-.274 1.4 1.4 0 011.607 1.559v2.6h-.784v-.484a1.19 1.19 0 01-1.107.516 1.3 1.3 0 01-.933-.335 1.129 1.129 0 01-.351-.853 1.072 1.072 0 01.448-.915 2.064 2.064 0 011.244-.328h.678v-.231a.892.892 0 00-.2-.634.89.89 0 00-.67-.214 2.06 2.06 0 00-1.187.363zm4.725-.977v.719a1.079 1.079 0 011.075-.759 1.449 1.449 0 01.25.024v.775a.954.954 0 00-.38-.072.81.81 0 00-.678.363 1.422 1.422 0 00-.267.864v2.181h-.791v-4.1h.791zm2.536 2.065a1.526 1.526 0 00.38 1.022 1.308 1.308 0 001.018.4 1.658 1.658 0 00.905-.267v.711a1.908 1.908 0 01-1.01.242 2.015 2.015 0 01-1.534-.606 2.112 2.112 0 01-.574-1.511 2.142 2.142 0 01.577-1.506 2.022 2.022 0 011.563-.626 2.119 2.119 0 01.977.226v.727a1.641 1.641 0 00-.9-.251 1.345 1.345 0 00-1.022.4 1.441 1.441 0 00-.38 1.039zm4.007-3.68v2.318a1.272 1.272 0 011.272-.759 1.285 1.285 0 01.961.372 1.415 1.415 0 01.363 1.034v2.745h-.792V5.547a.919.919 0 00-.214-.65.732.732 0 00-.562-.23.988.988 0 00-.714.307 1.265 1.265 0 00-.311.937v2.22h-.791v-5.71h.791zm7.572 5.073a.938.938 0 00.759-.384 1.537 1.537 0 00.307-.99 1.651 1.651 0 00-.307-1.07.967.967 0 00-.784-.376 1.038 1.038 0 00-.755.339 1.429 1.429 0 00-.335 1.042 1.565 1.565 0 00.323 1.082 1.027 1.027 0 00.791.356zm-1.11-5.073v2.238A1.387 1.387 0 0127.6 3.98a1.587 1.587 0 011.269.582 2.305 2.305 0 01.492 1.539 2.351 2.351 0 01-.468 1.474 1.532 1.532 0 01-1.284.61 1.382 1.382 0 01-1.244-.678v.622h-.8V2.421zm5.016 5.621l-1.632-4.006h.88l.509 1.332.637 1.733q.073-.243.582-1.729l.46-1.332h.84l-1.478 3.982q-.59 1.575-1.8 1.574a1.478 1.478 0 01-.372-.04v-.678a1.143 1.143 0 00.275.032 1.127 1.127 0 001.099-.868z"
+        data-name="Path 54"
         fill={fill}
       />
       <path
-        data-name="Path 55"
         d="M44.907 2.542v-.387a.5.5 0 00-.5-.495h-1.149a.5.5 0 00-.5.495v.4a.069.069 0 00.087.066 3.608 3.608 0 011-.142 3.662 3.662 0 01.97.131.067.067 0 00.092-.068m-3.163.511l-.2-.2a.5.5 0 00-.7 0l-.235.235a.493.493 0 000 .7l.194.194a.07.07 0 00.1-.007 3.809 3.809 0 01.378-.442 3.553 3.553 0 01.447-.38.067.067 0 00.01-.1m2.106 1.242V5.99a.067.067 0 00.1.059l1.5-.778a.068.068 0 00.028-.093 1.871 1.871 0 00-1.559-.945.068.068 0 00-.069.066m0 4.074a2.269 2.269 0 112.273-2.268 2.273 2.273 0 01-2.273 2.268m0-5.493a3.22 3.22 0 102.281.941 3.222 3.222 0 00-2.281-.941"
+        data-name="Path 55"
         fill={theme?.colors?.white?.value}
       />
     </svg>
diff --git a/apps/docs/src/components/icons/search.tsx b/apps/docs/src/components/icons/search.tsx
index c54546b240..1903a2025f 100644
--- a/apps/docs/src/components/icons/search.tsx
+++ b/apps/docs/src/components/icons/search.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   width?: number;
@@ -11,17 +11,12 @@ interface Props {
 
 const defaultProps = {
   width: 24,
-  height: 24
+  height: 24,
 };
 
-const Search: React.FC<Props> = ({ size, fill, width, height, ...props }) => {
+const Search: React.FC<Props> = ({size, fill, width, height, ...props}) => {
   return (
-    <svg
-      width={size || width}
-      height={size || height}
-      viewBox="0 0 24 24"
-      {...props}
-    >
+    <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
       <g fill={fill}>
         <path d="M21 11.5A9.5 9.5 0 1111.5 2a9.5 9.5 0 019.5 9.5z" />
         <path d="M21.299 21.999a.7.7 0 01-.49-.2l-1.862-1.86a.706.706 0 010-.992.706.706 0 01.99 0l1.86 1.86a.706.706 0 010 .99.738.738 0 01-.498.202z" />
diff --git a/apps/docs/src/components/icons/send.tsx b/apps/docs/src/components/icons/send.tsx
index 85c06fe8fa..76f248fa9c 100644
--- a/apps/docs/src/components/icons/send.tsx
+++ b/apps/docs/src/components/icons/send.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
 
 const Send: React.FC<IconProps> = ({
   fill,
@@ -12,16 +13,17 @@ const Send: React.FC<IconProps> = ({
   className,
   ...props
 }) => {
-  const { theme } = useTheme();
+  const {theme} = useTheme();
   const color = fill || theme?.colors?.accents3?.value;
+
   return (
     <svg
+      className={className}
       data-name="Iconly/Curved/Lock"
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
-      className={className}
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g transform="translate(2 2)">
diff --git a/apps/docs/src/components/icons/server.tsx b/apps/docs/src/components/icons/server.tsx
index d227a5ae40..27a46ac88f 100644
--- a/apps/docs/src/components/icons/server.tsx
+++ b/apps/docs/src/components/icons/server.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,28 +7,22 @@ export interface Props {
   size?: number;
 }
 
-const Server: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const Server: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M19.32 10H4.69c-1.48 0-2.68-1.21-2.68-2.68V4.69c0-1.48 1.21-2.68 2.68-2.68h14.63C20.8 2.01 22 3.22 22 4.69v2.63C22 8.79 20.79 10 19.32 10ZM19.32 22H4.69c-1.48 0-2.68-1.21-2.68-2.68v-2.63c0-1.48 1.21-2.68 2.68-2.68h14.63c1.48 0 2.68 1.21 2.68 2.68v2.63c0 1.47-1.21 2.68-2.68 2.68ZM6 5v2M10 5v2M6 17v2M10 17v2M14 6h4M14 18h4"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/star.tsx b/apps/docs/src/components/icons/star.tsx
index 8c01059cd3..19fc3efbde 100644
--- a/apps/docs/src/components/icons/star.tsx
+++ b/apps/docs/src/components/icons/star.tsx
@@ -1,28 +1,23 @@
-import * as React from 'react';
-import { IconProps } from './index';
+import * as React from "react";
 
-const Star: React.FC<IconProps> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+import {IconProps} from "./index";
+
+const Star: React.FC<IconProps> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="m10.297 2.632 1.32 2.64c.18.368.66.72 1.065.788l2.393.397c1.53.255 1.89 1.365.787 2.46l-1.86 1.86c-.315.316-.487.923-.39 1.358l.533 2.303c.42 1.822-.548 2.527-2.16 1.574l-2.243-1.327c-.405-.24-1.072-.24-1.485 0l-2.242 1.327c-1.605.953-2.58.24-2.16-1.575l.532-2.302c.098-.435-.075-1.043-.39-1.357l-1.86-1.86c-1.095-1.096-.742-2.206.788-2.46l2.392-.398c.398-.068.878-.42 1.058-.788l1.32-2.64c.72-1.432 1.89-1.432 2.602 0Z"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/sun.tsx b/apps/docs/src/components/icons/sun.tsx
index e33f6216c7..d997e385be 100644
--- a/apps/docs/src/components/icons/sun.tsx
+++ b/apps/docs/src/components/icons/sun.tsx
@@ -1,8 +1,9 @@
-import * as React from 'react';
-import { IconProps } from './index';
+import * as React from "react";
+
+import {IconProps} from "./index";
 
 const Sun: React.FC<IconProps> = ({
-  fill = 'currentColor',
+  fill = "currentColor",
   filled,
   size,
   height,
@@ -12,12 +13,7 @@ const Sun: React.FC<IconProps> = ({
 }) => {
   if (filled) {
     return (
-      <svg
-        width={size || width || 24}
-        height={size || height || 24}
-        viewBox="0 0 24 24"
-        {...props}
-      >
+      <svg height={size || height || 24} viewBox="0 0 24 24" width={size || width || 24} {...props}>
         <g fill={fill}>
           <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
           <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
@@ -25,38 +21,35 @@ const Sun: React.FC<IconProps> = ({
       </svg>
     );
   }
+
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fill={fill}
         d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19H12.998V22H10.998zM10.998 2H12.998V5H10.998zM1.998 11H4.998V13H1.998zM18.998 11H21.998V13H18.998z"
-      ></path>
+        fill={fill}
+      />
       <path
+        d="M4.487 17.01H7.487V19.01H4.487z"
         fill={fill}
         transform="rotate(-45.017 5.986 18.01)"
-        d="M4.487 17.01H7.487V19.01H4.487z"
-      ></path>
+      />
       <path
-        fill={fill}
-        transform="rotate(-45.001 18.008 5.99)"
         d="M16.508 4.99H19.509V6.99H16.508z"
-      ></path>
-      <path
         fill={fill}
-        transform="rotate(-134.983 5.988 5.99)"
-        d="M4.487 4.99H7.487V6.99H4.487z"
-      ></path>
+        transform="rotate(-45.001 18.008 5.99)"
+      />
+      <path d="M4.487 4.99H7.487V6.99H4.487z" fill={fill} transform="rotate(-134.983 5.988 5.99)" />
       <path
+        d="M17.008 16.51H19.008V19.511000000000003H17.008z"
         fill={fill}
         transform="rotate(134.999 18.008 18.01)"
-        d="M17.008 16.51H19.008V19.511000000000003H17.008z"
-      ></path>
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/tag-user.tsx b/apps/docs/src/components/icons/tag-user.tsx
index eab1a410cd..d0fad16f12 100644
--- a/apps/docs/src/components/icons/tag-user.tsx
+++ b/apps/docs/src/components/icons/tag-user.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export interface Props {
   fill?: string;
@@ -7,36 +7,30 @@ export interface Props {
   size?: number;
 }
 
-const TagUser: React.FC<Props> = ({
-  fill,
-  size,
-  width = 24,
-  height = 24,
-  ...props
-}) => {
+const TagUser: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
   return (
     <svg
-      width={size || width}
+      fill="none"
       height={size || height}
       viewBox="0 0 24 24"
-      fill="none"
+      width={size || width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
         d="M18 18.86h-.76c-.8 0-1.56.31-2.12.87l-1.71 1.69c-.78.77-2.05.77-2.83 0l-1.71-1.69c-.56-.56-1.33-.87-2.12-.87H6c-1.66 0-3-1.33-3-2.97V4.98c0-1.64 1.34-2.97 3-2.97h12c1.66 0 3 1.33 3 2.97v10.91c0 1.63-1.34 2.97-3 2.97Z"
         stroke={fill}
-        strokeWidth={1.5}
-        strokeMiterlimit={10}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
       />
       <path
         d="M12 10a2.33 2.33 0 1 0 0-4.66A2.33 2.33 0 0 0 12 10ZM16 15.66c0-1.8-1.79-3.26-4-3.26s-4 1.46-4 3.26"
         stroke={fill}
-        strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"
+        strokeWidth={1.5}
       />
     </svg>
   );
diff --git a/apps/docs/src/components/icons/twitter.tsx b/apps/docs/src/components/icons/twitter.tsx
index 3b22f6847e..6eea802cd8 100644
--- a/apps/docs/src/components/icons/twitter.tsx
+++ b/apps/docs/src/components/icons/twitter.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   width?: number;
@@ -13,18 +13,13 @@ const defaultProps = {
   height: 24,
 };
 
-const Twitter: React.FC<Props> = ({ size, fill, width, height, ...props }) => {
+const Twitter: React.FC<Props> = ({size, fill, width, height, ...props}) => {
   return (
-    <svg
-      width={size || width}
-      height={size || height}
-      viewBox="0 0 24 24"
-      {...props}
-    >
+    <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
       <path
-        fill={fill}
         d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"
-      ></path>
+        fill={fill}
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/typescript.tsx b/apps/docs/src/components/icons/typescript.tsx
index 3aa0f5ee94..2e85748ecb 100644
--- a/apps/docs/src/components/icons/typescript.tsx
+++ b/apps/docs/src/components/icons/typescript.tsx
@@ -1,8 +1,9 @@
-import * as React from 'react';
-import { IconProps } from './index';
+import * as React from "react";
+
+import {IconProps} from "./index";
 
 const Typescript: React.FC<IconProps> = ({
-  fill = 'currentColor',
+  fill = "currentColor",
   size,
   height,
   width,
@@ -10,14 +11,14 @@ const Typescript: React.FC<IconProps> = ({
 }) => {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
+      fill={fill}
       height={size || height || 24}
       viewBox="0 0 24 24"
-      fill={fill}
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <path d="M3,3H21V21H3V3M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86M13,11.25H8V12.75H9.5V20H11.25V12.75H13V11.25Z"></path>
+      <path d="M3,3H21V21H3V3M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86M13,11.25H8V12.75H9.5V20H11.25V12.75H13V11.25Z" />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/unlock.tsx b/apps/docs/src/components/icons/unlock.tsx
index 6acb8a6e3b..52f169a067 100644
--- a/apps/docs/src/components/icons/unlock.tsx
+++ b/apps/docs/src/components/icons/unlock.tsx
@@ -1,57 +1,51 @@
-import React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import React from "react";
+import {useTheme} from "@nextui-org/react";
 
-const Unlock: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  const { theme } = useTheme();
+import {IconProps} from "./index";
+
+const Unlock: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+  const {theme} = useTheme();
   const color = fill || theme?.colors?.accents3?.value;
+
   return (
     <svg
       data-name="Iconly/Curved/Lock"
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width || 24}
       height={size || height || 24}
       viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g transform="translate(3.5 2)">
         <path
           d="M8.927,3.237A4.562,4.562,0,0,0,0,4.484V6.653"
-          transform="translate(3.849 0.75)"
           fill="none"
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeMiterlimit="10"
           strokeWidth={1.5}
+          transform="translate(3.849 0.75)"
         />
         <path
           d="M.5,0V2.221"
-          transform="translate(7.91 12.156)"
           fill="none"
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeMiterlimit="10"
           strokeWidth={1.5}
+          transform="translate(7.91 12.156)"
         />
         <path
           d="M7.66,0C1.915,0,0,1.568,0,6.271s1.915,6.272,7.66,6.272,7.661-1.568,7.661-6.272S13.406,0,7.66,0Z"
-          transform="translate(0.75 6.824)"
           fill="none"
           stroke={color}
           strokeLinecap="round"
           strokeLinejoin="round"
           strokeMiterlimit="10"
           strokeWidth={1.5}
+          transform="translate(0.75 6.824)"
         />
       </g>
     </svg>
diff --git a/apps/docs/src/components/icons/user.tsx b/apps/docs/src/components/icons/user.tsx
index f788f5256b..2bc76504df 100644
--- a/apps/docs/src/components/icons/user.tsx
+++ b/apps/docs/src/components/icons/user.tsx
@@ -1,24 +1,18 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const User: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+  const {theme} = useTheme();
 
-const User: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  const { theme } = useTheme();
   return (
     <svg
       data-name="Iconly/Curved/Profile"
-      xmlns="http://www.w3.org/2000/svg"
+      height={size || height || 24}
       viewBox="0 0 24 24"
       width={size || width || 24}
-      height={size || height || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <g
@@ -30,13 +24,10 @@ const User: React.FC<IconProps> = ({
         strokeWidth={1.5}
       >
         <path
-          data-name="Stroke 1"
           d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
+          data-name="Stroke 1"
         />
-        <path
-          data-name="Stroke 3"
-          d="M11.837 11.174a4.372 4.372 0 10-.031 0z"
-        />
+        <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
       </g>
     </svg>
   );
diff --git a/apps/docs/src/components/icons/vercel.tsx b/apps/docs/src/components/icons/vercel.tsx
index ebe68b530e..8ccab76d4f 100644
--- a/apps/docs/src/components/icons/vercel.tsx
+++ b/apps/docs/src/components/icons/vercel.tsx
@@ -1,6 +1,7 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
-import { Icon } from './index';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
+
+import {Icon} from "./index";
 
 interface Props {
   width?: number;
@@ -11,23 +12,17 @@ interface Props {
 
 const defaultProps = {
   height: 44,
-  fill: 'currentColor',
-  className: ''
+  fill: "currentColor",
+  className: "",
 };
 
-const Vercel: React.FC<Props> = ({
-  fill,
-  width,
-  height,
-  className,
-  ...props
-}) => {
+const Vercel: React.FC<Props> = ({fill, width, height, className, ...props}) => {
   return (
     <Icon
-      width={width}
+      fill="none"
       height={height}
       viewBox="0 0 4438 1000"
-      fill="none"
+      width={width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
diff --git a/apps/docs/src/components/icons/video-off.tsx b/apps/docs/src/components/icons/video-off.tsx
index 9954d959cd..a9a2006b50 100644
--- a/apps/docs/src/components/icons/video-off.tsx
+++ b/apps/docs/src/components/icons/video-off.tsx
@@ -1,45 +1,40 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const VideoOff: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+  const {theme} = useTheme();
 
-const VideoOff: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  const { theme } = useTheme();
   if (filled) {
     return (
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={size || width}
         height={size || height}
         viewBox="0 0 24 24"
+        width={size || width}
+        xmlns="http://www.w3.org/2000/svg"
         {...props}
       >
         <path
-          fill={fill || theme?.colors?.foreground?.value}
           d="M4 19h10.879L2.145 6.265C2.054 6.493 2 6.74 2 7v10C2 18.103 2.897 19 4 19zM18 7c0-1.103-.897-2-2-2H6.414L3.707 2.293 2.293 3.707l18 18 1.414-1.414L18 16.586v-2.919L22 17V7l-4 3.333V7z"
-        ></path>
+          fill={fill || theme?.colors?.foreground?.value}
+        />
       </svg>
     );
   }
+
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width}
       height={size || height}
       viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fill={fill || theme?.colors?.foreground?.value}
         d="M18 7c0-1.103-.897-2-2-2H6.414L3.707 2.293 2.293 3.707l18 18 1.414-1.414L18 16.586v-2.919L22 17V7l-4 3.333V7zM16 14.586L8.414 7H16V14.586zM4 19h10.879l-2-2H4V8.121L2.145 6.265C2.054 6.493 2 6.74 2 7v10C2 18.103 2.897 19 4 19z"
-      ></path>
+        fill={fill || theme?.colors?.foreground?.value}
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/video.tsx b/apps/docs/src/components/icons/video.tsx
index 706c68f202..4ee3aa2532 100644
--- a/apps/docs/src/components/icons/video.tsx
+++ b/apps/docs/src/components/icons/video.tsx
@@ -1,45 +1,40 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const Video: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+  const {theme} = useTheme();
 
-const Video: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  const { theme } = useTheme();
   if (filled) {
     return (
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={size || width}
         height={size || height}
         viewBox="0 0 24 24"
+        width={size || width}
+        xmlns="http://www.w3.org/2000/svg"
         {...props}
       >
         <path
-          fill={fill || theme?.colors?.foreground?.value}
           d="M18,7c0-1.103-0.897-2-2-2H4C2.897,5,2,5.897,2,7v10c0,1.103,0.897,2,2,2h12c1.103,0,2-0.897,2-2v-3.333L22,17V7l-4,3.333 V7z"
-        ></path>
+          fill={fill || theme?.colors?.foreground?.value}
+        />
       </svg>
     );
   }
+
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size || width}
       height={size || height}
       viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fill={fill || theme?.colors?.foreground?.value}
         d="M18,7c0-1.103-0.897-2-2-2H4C2.897,5,2,5.897,2,7v10c0,1.103,0.897,2,2,2h12c1.103,0,2-0.897,2-2v-3.333L22,17V7l-4,3.333 V7z M16.002,17H4V7h12l0.001,4.999L16,12l0.001,0.001L16.002,17z"
-      ></path>
+        fill={fill || theme?.colors?.foreground?.value}
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/icons/volume-up.tsx b/apps/docs/src/components/icons/volume-up.tsx
index 84e84f2579..50fa53264c 100644
--- a/apps/docs/src/components/icons/volume-up.tsx
+++ b/apps/docs/src/components/icons/volume-up.tsx
@@ -1,33 +1,27 @@
-import * as React from 'react';
-import { IconProps } from './index';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {IconProps} from "./index";
+
+const VolumeUp: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+  const {theme} = useTheme();
 
-const VolumeUp: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  const { theme } = useTheme();
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
+      height={size || height || 24}
       viewBox="0 0 24 24"
       width={size || width || 24}
-      height={size || height || 24}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        fill={fill || theme?.colors?.foreground?.value}
         d="M16,21c3.527-1.547,5.999-4.909,5.999-9S19.527,4.547,16,3v2c2.387,1.386,3.999,4.047,3.999,7S18.387,17.614,16,19V21z"
-      ></path>
-      <path
         fill={fill || theme?.colors?.foreground?.value}
+      />
+      <path
         d="M16 7v10c1.225-1.1 2-3.229 2-5S17.225 8.1 16 7zM4 17h2.697L14 21.868V2.132L6.697 7H4C2.897 7 2 7.897 2 9v6C2 16.103 2.897 17 4 17z"
-      ></path>
+        fill={fill || theme?.colors?.foreground?.value}
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/components/image-browser/index.tsx b/apps/docs/src/components/image-browser/index.tsx
index b0d428a235..80b6c31b4b 100644
--- a/apps/docs/src/components/image-browser/index.tsx
+++ b/apps/docs/src/components/image-browser/index.tsx
@@ -1,8 +1,9 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
-import { useTheme } from '@nextui-org/react';
-import useIsMounted from '@hooks/use-is-mounted';
-import Blockholder from '../blockholder';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
+import {useTheme} from "@nextui-org/react";
+import useIsMounted from "@hooks/use-is-mounted";
+
+import Blockholder from "../blockholder";
 
 interface Props {
   width?: number;
@@ -13,76 +14,73 @@ interface Props {
 const defaultProps = {
   width: 721,
   height: 424,
-  className: ''
+  className: "",
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
 export type ImageBrowserProps = Props & typeof defaultProps & NativeAttrs;
 
-const ImageBrowser: React.FC<Props> = ({
-  width,
-  height,
-  className,
-  ...props
-}) => {
+const ImageBrowser: React.FC<Props> = ({width, height, className, ...props}) => {
   const isMounted = useIsMounted();
-  const { isDark } = useTheme();
-  const { firstWindow, secondWindow } = React.useMemo(() => {
+  const {isDark} = useTheme();
+  const {firstWindow, secondWindow} = React.useMemo(() => {
     if (isDark) {
       return {
         firstWindow: {
-          logo: '#fff',
-          logoText: '#000',
-          bg: '#171717',
-          bar: '#111',
-          miniBar: '#444',
-          elements: '#444',
-          elements2: '#333'
+          logo: "#fff",
+          logoText: "#000",
+          bg: "#171717",
+          bar: "#111",
+          miniBar: "#444",
+          elements: "#444",
+          elements2: "#333",
         },
         secondWindow: {
-          logo: '#000',
-          logoText: '#fff',
-          bg: '#eaeaea',
-          bar: '#d2d2d2',
-          miniBar: '#c1c1c1',
-          elements: '#c1c1c1',
-          elements2: '#999'
-        }
+          logo: "#000",
+          logoText: "#fff",
+          bg: "#eaeaea",
+          bar: "#d2d2d2",
+          miniBar: "#c1c1c1",
+          elements: "#c1c1c1",
+          elements2: "#999",
+        },
       };
     }
+
     return {
       firstWindow: {
-        logo: '#000',
-        logoText: '#fff',
-        bg: '#eaeaea',
-        bar: '#d2d2d2',
-        miniBar: '#c1c1c1',
-        elements: '#c1c1c1',
-        elements2: '#999'
+        logo: "#000",
+        logoText: "#fff",
+        bg: "#eaeaea",
+        bar: "#d2d2d2",
+        miniBar: "#c1c1c1",
+        elements: "#c1c1c1",
+        elements2: "#999",
       },
       secondWindow: {
-        logo: '#fff',
-        logoText: '#000',
-        bg: '#171717',
-        bar: '#111',
-        miniBar: '#444',
-        elements: '#444',
-        elements2: '#333'
-      }
+        logo: "#fff",
+        logoText: "#000",
+        bg: "#171717",
+        bar: "#111",
+        miniBar: "#444",
+        elements: "#444",
+        elements2: "#333",
+      },
     };
   }, [isDark]);
 
   if (!isMounted) {
     return <Blockholder alt="browser decoration image" />;
   }
+
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
       className={`image-browser-svg ${className}`}
+      height={height}
       viewBox="0 0 1048 608"
+      width={width}
+      xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <defs>
@@ -116,613 +114,583 @@ const ImageBrowser: React.FC<Props> = ({
       <g id="prefix__Group_26" transform="translate(-1072 -228)">
         <g id="prefix__front-square" transform="translate(144 -166)">
           <path
-            id="prefix__Rectangle_48"
             className="prefix__cls-2"
             d="M0 0h870v395a15 15 0 01-15 15H15a15 15 0 01-15-15V0z"
+            id="prefix__Rectangle_48"
             transform="translate(1106 448)"
           />
           <g id="prefix__Component_1_3" transform="translate(1106 394)">
             <path
-              id="prefix__Rectangle_23"
               d="M15 0h840a15 15 0 0115 15v40H0V15A15 15 0 0115 0z"
               fill={secondWindow.bar}
+              id="prefix__Rectangle_23"
             />
             <circle
-              id="prefix__Ellipse_1"
               className="prefix__cls-3"
               cx={8.5}
               cy={8.5}
+              id="prefix__Ellipse_1"
               r={8.5}
               transform="translate(28 19)"
             />
             <circle
-              id="prefix__Ellipse_2"
               className="prefix__cls-4"
               cx={8.5}
               cy={8.5}
+              id="prefix__Ellipse_2"
               r={8.5}
               transform="translate(62 19)"
             />
             <circle
-              id="prefix__Ellipse_3"
               className="prefix__cls-5"
               cx={8.5}
               cy={8.5}
+              id="prefix__Ellipse_3"
               r={8.5}
               transform="translate(96 19)"
             />
             <path
-              id="prefix__Path_7"
               d="M8.5 0h265a8.5 8.5 0 010 17H8.5a8.5 8.5 0 010-17z"
-              transform="translate(294 19)"
               fill={secondWindow.miniBar}
+              id="prefix__Path_7"
+              transform="translate(294 19)"
             />
           </g>
           <rect
-            id="prefix__Rectangle_32"
             className="prefix__cls-7"
-            width={384}
             height={22}
+            id="prefix__Rectangle_32"
             rx={11}
             transform="translate(1346 483)"
+            width={384}
           />
           <g id="prefix__Group_22" transform="translate(1146 553)">
-            <circle
-              id="prefix__Ellipse_4"
-              className="prefix__cls-8"
-              cx={8.5}
-              cy={8.5}
-              r={8.5}
-            />
+            <circle className="prefix__cls-8" cx={8.5} cy={8.5} id="prefix__Ellipse_4" r={8.5} />
             <rect
-              id="prefix__Rectangle_34"
               className="prefix__cls-9"
-              width={65}
               height={17}
+              id="prefix__Rectangle_34"
               rx={8.5}
               transform="translate(34)"
+              width={65}
             />
           </g>
           <g id="prefix__Group_19" transform="translate(1146 729)">
             <rect
-              id="prefix__Rectangle_30"
               className="prefix__cls-9"
-              width={82}
               height={17}
+              id="prefix__Rectangle_30"
               rx={8.5}
               transform="translate(34)"
+              width={82}
             />
-            <circle
-              id="prefix__Ellipse_7"
-              className="prefix__cls-8"
-              cx={8.5}
-              cy={8.5}
-              r={8.5}
-            />
+            <circle className="prefix__cls-8" cx={8.5} cy={8.5} id="prefix__Ellipse_7" r={8.5} />
           </g>
           <g id="prefix__Group_21" transform="translate(1146 597)">
             <rect
-              id="prefix__Rectangle_28"
               className="prefix__cls-9"
-              width={100}
               height={17}
+              id="prefix__Rectangle_28"
               rx={8.5}
               transform="translate(34)"
+              width={100}
             />
-            <circle
-              id="prefix__Ellipse_5"
-              className="prefix__cls-8"
-              cx={8.5}
-              cy={8.5}
-              r={8.5}
-            />
+            <circle className="prefix__cls-8" cx={8.5} cy={8.5} id="prefix__Ellipse_5" r={8.5} />
           </g>
           <g id="prefix__Group_20" transform="translate(1146 641)">
             <rect
-              id="prefix__Rectangle_29"
               className="prefix__cls-9"
-              width={65}
               height={17}
+              id="prefix__Rectangle_29"
               rx={8.5}
               transform="translate(34)"
+              width={65}
             />
-            <circle
-              id="prefix__Ellipse_6"
-              className="prefix__cls-8"
-              cx={8.5}
-              cy={8.5}
-              r={8.5}
-            />
+            <circle className="prefix__cls-8" cx={8.5} cy={8.5} id="prefix__Ellipse_6" r={8.5} />
           </g>
           <g id="prefix__Group_23" transform="translate(1146 685)">
             <rect
-              id="prefix__Rectangle_29-2"
               className="prefix__cls-9"
-              width={47}
               height={17}
+              id="prefix__Rectangle_29-2"
               rx={8.5}
               transform="translate(34)"
+              width={47}
             />
-            <circle
-              id="prefix__Ellipse_6-2"
-              className="prefix__cls-8"
-              cx={8.5}
-              cy={8.5}
-              r={8.5}
-            />
+            <circle className="prefix__cls-8" cx={8.5} cy={8.5} id="prefix__Ellipse_6-2" r={8.5} />
           </g>
           <g id="prefix__Group_15" transform="translate(1745.941 553)">
             <rect
-              id="prefix__Rectangle_33"
               className="prefix__cls-20"
-              width={184}
               height={83}
+              id="prefix__Rectangle_33"
               rx={15}
               transform="translate(.059)"
+              width={184}
             />
             <rect
-              id="prefix__Rectangle_41"
               className="prefix__cls-21"
-              width={52}
               height={48}
+              id="prefix__Rectangle_41"
               rx={7}
               transform="translate(17.059 18)"
+              width={52}
             />
             <path
-              id="prefix__Rectangle_42"
               className="prefix__cls-10"
-              transform="translate(84.059 18)"
               d="M0 0h54v9H0z"
+              id="prefix__Rectangle_42"
+              transform="translate(84.059 18)"
             />
             <path
-              id="prefix__Rectangle_44"
               className="prefix__cls-11"
-              transform="translate(84.059 37)"
               d="M0 0h43v9H0z"
+              id="prefix__Rectangle_44"
+              transform="translate(84.059 37)"
             />
             <path
-              id="prefix__Rectangle_43"
               className="prefix__cls-10"
-              transform="translate(84.059 54)"
               d="M0 0h81v8H0z"
+              id="prefix__Rectangle_43"
+              transform="translate(84.059 54)"
             />
           </g>
           <g id="prefix__Group_16" transform="translate(1745.941 663.435)">
             <rect
-              id="prefix__Rectangle_33-2"
               className="prefix__cls-20"
-              width={184}
               height={83}
+              id="prefix__Rectangle_33-2"
               rx={15}
               transform="translate(.059 -.435)"
+              width={184}
             />
             <rect
-              id="prefix__Rectangle_41-2"
               className="prefix__cls-21"
-              width={52}
               height={48}
+              id="prefix__Rectangle_41-2"
               rx={7}
               transform="translate(17.059 17.565)"
+              width={52}
             />
             <path
-              id="prefix__Rectangle_42-2"
               className="prefix__cls-10"
-              transform="translate(84.059 17.565)"
               d="M0 0h54v9H0z"
+              id="prefix__Rectangle_42-2"
+              transform="translate(84.059 17.565)"
             />
             <path
-              id="prefix__Rectangle_44-2"
               className="prefix__cls-11"
-              transform="translate(84.059 36.565)"
               d="M0 0h43v9H0z"
+              id="prefix__Rectangle_44-2"
+              transform="translate(84.059 36.565)"
             />
             <path
-              id="prefix__Rectangle_43-2"
               className="prefix__cls-10"
-              transform="translate(84.059 56.565)"
               d="M0 0h81v9H0z"
+              id="prefix__Rectangle_43-2"
+              transform="translate(84.059 56.565)"
             />
           </g>
           <g id="prefix__Big_card">
             <rect
-              id="prefix__Rectangle_31"
               className="prefix__cls-10"
-              width={384}
               height={226}
+              id="prefix__Rectangle_31"
               rx={15}
               transform="translate(1346 553)"
+              width={384}
             />
             <rect
-              id="prefix__Rectangle_40"
               className="prefix__cls-9"
-              width={332}
               height={87}
+              id="prefix__Rectangle_40"
               rx={7}
               transform="translate(1372 635)"
+              width={332}
             />
             <rect
-              id="prefix__Rectangle_36"
               className="prefix__cls-8"
-              width={56}
               height={21}
+              id="prefix__Rectangle_36"
               rx={6}
               transform="translate(1648 738)"
+              width={56}
             />
             <path
-              id="prefix__Rectangle_37"
               className="prefix__cls-10"
-              transform="translate(1581 745)"
               d="M0 0h42v8H0z"
+              id="prefix__Rectangle_37"
+              transform="translate(1581 745)"
             />
             <path
-              id="prefix__Rectangle_39"
               className="prefix__cls-9"
-              transform="translate(1372 602)"
               d="M0 0h170v8H0z"
+              id="prefix__Rectangle_39"
+              transform="translate(1372 602)"
             />
             <path
-              id="prefix__Rectangle_38"
               className="prefix__cls-9"
-              transform="translate(1372 584)"
               d="M0 0h113v8H0z"
+              id="prefix__Rectangle_38"
+              transform="translate(1372 584)"
             />
           </g>
           <circle
-            id="prefix__Ellipse_8"
             className="prefix__cls-12"
             cx={17}
             cy={17}
+            id="prefix__Ellipse_8"
             r={17}
             transform="translate(1896 482)"
           />
           <circle
-            id="prefix__Ellipse_9"
             className="prefix__cls-7"
             cx={8.5}
             cy={8.5}
+            id="prefix__Ellipse_9"
             r={8.5}
             transform="translate(1858 491)"
           />
           <circle
-            id="prefix__Ellipse_10"
             className="prefix__cls-20"
             cx={8.5}
             cy={8.5}
+            id="prefix__Ellipse_10"
             r={8.5}
             transform="translate(1827 491)"
           />
           <circle
-            id="prefix__Ellipse_11"
             className="prefix__cls-20"
             cx={8.5}
             cy={8.5}
+            id="prefix__Ellipse_11"
             r={8.5}
             transform="translate(1796 491)"
           />
           <g id="prefix__Group_25" transform="translate(371.382 130.382)">
             <rect
-              id="prefix__Rectangle_1"
               className="prefix__cls-53"
-              width={43}
               height={43}
+              id="prefix__Rectangle_1"
               rx={11}
               transform="translate(772.618 352.618)"
+              width={43}
             />
             <path
-              id="prefix__Path_2"
               className="prefix__cls-33"
               d="M33.3-159.273h1.66v12.063a6.366 6.366 0 01-.872 3.323 6.192 6.192 0 01-2.424 2.3 7.459 7.459 0 01-3.607.841 7.434 7.434 0 01-3.6-.845 6.226 6.226 0 01-2.429-2.3 6.343 6.343 0 01-.872-3.318v-12.063h1.664v11.947a5.107 5.107 0 00.649 2.584 4.64 4.64 0 001.828 1.784 5.635 5.635 0 002.762.649 5.66 5.66 0 002.767-.649 4.6 4.6 0 001.828-1.784 5.135 5.135 0 00.645-2.584zm8.166 0v18.218H39.8v-18.218z"
+              id="prefix__Path_2"
               transform="translate(763.081 524.487)"
             />
           </g>
           <path
-            id="prefix__Rectangle_37-2"
             className="prefix__cls-13"
-            transform="translate(1581 745)"
             d="M0 0h42v8H0z"
+            id="prefix__Rectangle_37-2"
+            transform="translate(1581 745)"
           />
         </g>
         <g id="prefix__Group_17" transform="translate(20 -86)">
           <g id="prefix__front-square-2" transform="translate(-54 55)">
             <path
-              id="prefix__Rectangle_3"
               className="prefix__cls-1"
               d="M0 0h870v403a15 15 0 01-15 15H15a15 15 0 01-15-15V0z"
+              id="prefix__Rectangle_3"
               transform="translate(1106 448)"
             />
             <g id="prefix__Group_2" transform="translate(373 130)">
               <rect
-                id="prefix__Rectangle_1-2"
-                width={43}
+                className="prefix__cls-23"
                 height={43}
+                id="prefix__Rectangle_1-2"
                 rx={11}
-                className="prefix__cls-23"
                 transform="translate(773 353)"
+                width={43}
               />
               <path
-                id="prefix__Path_2-2"
-                d="M33.267-159.273h1.659v12.033a6.351 6.351 0 01-.87 3.315 6.177 6.177 0 01-2.418 2.3 7.441 7.441 0 01-3.6.839 7.416 7.416 0 01-3.594-.843 6.211 6.211 0 01-2.423-2.3 6.328 6.328 0 01-.87-3.31v-12.033h1.659v11.918a5.1 5.1 0 00.648 2.578A4.629 4.629 0 0025.284-143a5.621 5.621 0 002.755.648A5.647 5.647 0 0030.8-143a4.591 4.591 0 001.824-1.779 5.123 5.123 0 00.643-2.578zm8.147 0v18.173h-1.66v-18.174z"
                 className="prefix__cls-73"
+                d="M33.267-159.273h1.659v12.033a6.351 6.351 0 01-.87 3.315 6.177 6.177 0 01-2.418 2.3 7.441 7.441 0 01-3.6.839 7.416 7.416 0 01-3.594-.843 6.211 6.211 0 01-2.423-2.3 6.328 6.328 0 01-.87-3.31v-12.033h1.659v11.918a5.1 5.1 0 00.648 2.578A4.629 4.629 0 0025.284-143a5.621 5.621 0 002.755.648A5.647 5.647 0 0030.8-143a4.591 4.591 0 001.824-1.779 5.123 5.123 0 00.643-2.578zm8.147 0v18.173h-1.66v-18.174z"
+                id="prefix__Path_2-2"
                 transform="translate(763.161 524.565)"
               />
             </g>
             <g id="prefix__Component_1_1" transform="translate(1106 394)">
               <path
-                id="prefix__Rectangle_23-2"
                 d="M15 0h840a15 15 0 0115 15v40H0V15A15 15 0 0115 0z"
                 fill={firstWindow.bar}
+                id="prefix__Rectangle_23-2"
               />
               <circle
-                id="prefix__Ellipse_1-2"
                 className="prefix__cls-3"
                 cx={8.5}
                 cy={8.5}
+                id="prefix__Ellipse_1-2"
                 r={8.5}
                 transform="translate(28 19)"
               />
               <circle
-                id="prefix__Ellipse_2-2"
                 className="prefix__cls-4"
                 cx={8.5}
                 cy={8.5}
+                id="prefix__Ellipse_2-2"
                 r={8.5}
                 transform="translate(62 19)"
               />
               <circle
-                id="prefix__Ellipse_3-2"
                 className="prefix__cls-5"
                 cx={8.5}
                 cy={8.5}
+                id="prefix__Ellipse_3-2"
                 r={8.5}
                 transform="translate(96 19)"
               />
               <rect
-                id="prefix__Rectangle_24"
                 className="prefix__cls-15"
-                width={282}
                 height={17}
+                id="prefix__Rectangle_24"
                 rx={8.5}
                 transform="translate(294 19)"
+                width={282}
               />
             </g>
             <rect
-              id="prefix__Rectangle_32-2"
               className="prefix__cls-15"
-              width={384}
               height={22}
+              id="prefix__Rectangle_32-2"
               rx={11}
               transform="translate(1346 483)"
+              width={384}
             />
             <g id="prefix__Group_22-2" transform="translate(1146 553)">
               <circle
-                id="prefix__Ellipse_4-2"
                 className="prefix__cls-8"
                 cx={8.5}
                 cy={8.5}
+                id="prefix__Ellipse_4-2"
                 r={8.5}
               />
               <rect
-                id="prefix__Rectangle_34-2"
                 className="prefix__cls-15"
-                width={65}
                 height={17}
+                id="prefix__Rectangle_34-2"
                 rx={8.5}
                 transform="translate(34)"
+                width={65}
               />
             </g>
             <g id="prefix__Group_19-2" transform="translate(1146 729)">
               <rect
-                id="prefix__Rectangle_30-2"
                 className="prefix__cls-15"
-                width={82}
                 height={17}
+                id="prefix__Rectangle_30-2"
                 rx={8.5}
                 transform="translate(34)"
+                width={82}
               />
               <circle
-                id="prefix__Ellipse_7-2"
                 className="prefix__cls-8"
                 cx={8.5}
                 cy={8.5}
+                id="prefix__Ellipse_7-2"
                 r={8.5}
               />
             </g>
             <g id="prefix__Group_21-2" transform="translate(1146 597)">
               <rect
-                id="prefix__Rectangle_28-2"
                 className="prefix__cls-15"
-                width={100}
                 height={17}
+                id="prefix__Rectangle_28-2"
                 rx={8.5}
                 transform="translate(34)"
+                width={100}
               />
               <circle
-                id="prefix__Ellipse_5-2"
                 className="prefix__cls-8"
                 cx={8.5}
                 cy={8.5}
+                id="prefix__Ellipse_5-2"
                 r={8.5}
               />
             </g>
             <g id="prefix__Group_20-2" transform="translate(1146 641)">
               <rect
-                id="prefix__Rectangle_29-3"
                 className="prefix__cls-15"
-                width={65}
                 height={17}
+                id="prefix__Rectangle_29-3"
                 rx={8.5}
                 transform="translate(34)"
+                width={65}
               />
               <circle
-                id="prefix__Ellipse_6-3"
                 className="prefix__cls-8"
                 cx={8.5}
                 cy={8.5}
+                id="prefix__Ellipse_6-3"
                 r={8.5}
               />
             </g>
             <g id="prefix__Group_23-2" transform="translate(1146 685)">
               <rect
-                id="prefix__Rectangle_29-4"
                 className="prefix__cls-15"
-                width={47}
                 height={17}
+                id="prefix__Rectangle_29-4"
                 rx={8.5}
                 transform="translate(34)"
+                width={47}
               />
               <circle
-                id="prefix__Ellipse_6-4"
                 className="prefix__cls-8"
                 cx={8.5}
                 cy={8.5}
+                id="prefix__Ellipse_6-4"
                 r={8.5}
               />
             </g>
             <g id="prefix__Group_15-2" transform="translate(1745.941 553)">
               <rect
-                id="prefix__Rectangle_33-3"
                 className="prefix__cls-15"
-                width={184}
                 height={83}
+                id="prefix__Rectangle_33-3"
                 rx={15}
                 transform="translate(.059)"
+                width={184}
               />
               <rect
-                id="prefix__Rectangle_41-3"
                 className="prefix__cls-9"
-                width={52}
                 height={48}
+                id="prefix__Rectangle_41-3"
                 rx={7}
                 transform="translate(17.059 18)"
+                width={52}
               />
               <path
-                id="prefix__Rectangle_42-3"
                 className="prefix__cls-10"
-                transform="translate(84.059 18)"
                 d="M0 0h54v9H0z"
+                id="prefix__Rectangle_42-3"
+                transform="translate(84.059 18)"
               />
               <path
-                id="prefix__Rectangle_44-3"
                 className="prefix__cls-9"
-                transform="translate(84.059 37)"
                 d="M0 0h43v9H0z"
+                id="prefix__Rectangle_44-3"
+                transform="translate(84.059 37)"
               />
               <path
-                id="prefix__Rectangle_43-3"
                 className="prefix__cls-10"
-                transform="translate(84.059 54)"
                 d="M0 0h81v8H0z"
+                id="prefix__Rectangle_43-3"
+                transform="translate(84.059 54)"
               />
             </g>
             <g id="prefix__Group_16-2" transform="translate(1745.941 663.435)">
               <rect
-                id="prefix__Rectangle_33-4"
                 className="prefix__cls-15"
-                width={184}
                 height={83}
+                id="prefix__Rectangle_33-4"
                 rx={15}
                 transform="translate(.059 -.435)"
+                width={184}
               />
               <rect
-                id="prefix__Rectangle_41-4"
                 className="prefix__cls-9"
-                width={52}
                 height={48}
+                id="prefix__Rectangle_41-4"
                 rx={7}
                 transform="translate(17.059 17.565)"
+                width={52}
               />
               <path
-                id="prefix__Rectangle_42-4"
                 className="prefix__cls-10"
-                transform="translate(84.059 17.565)"
                 d="M0 0h54v9H0z"
+                id="prefix__Rectangle_42-4"
+                transform="translate(84.059 17.565)"
               />
               <path
-                id="prefix__Rectangle_44-4"
                 className="prefix__cls-9"
-                transform="translate(84.059 36.565)"
                 d="M0 0h43v9H0z"
+                id="prefix__Rectangle_44-4"
+                transform="translate(84.059 36.565)"
               />
               <path
-                id="prefix__Rectangle_43-4"
                 className="prefix__cls-10"
-                transform="translate(84.059 56.565)"
                 d="M0 0h81v9H0z"
+                id="prefix__Rectangle_43-4"
+                transform="translate(84.059 56.565)"
               />
             </g>
             <g id="prefix__Big_card-2">
               <rect
-                id="prefix__Rectangle_31-2"
                 className="prefix__cls-15"
-                width={384}
                 height={226}
+                id="prefix__Rectangle_31-2"
                 rx={15}
                 transform="translate(1346 553)"
+                width={384}
               />
               <rect
-                id="prefix__Rectangle_40-2"
                 className="prefix__cls-9"
-                width={332}
                 height={87}
+                id="prefix__Rectangle_40-2"
                 rx={7}
                 transform="translate(1372 635)"
+                width={332}
               />
               <rect
-                id="prefix__Rectangle_36-2"
                 className="prefix__cls-8"
-                width={56}
                 height={21}
+                id="prefix__Rectangle_36-2"
                 rx={6}
                 transform="translate(1648 738)"
+                width={56}
               />
               <path
-                id="prefix__Rectangle_37-3"
                 className="prefix__cls-10"
-                transform="translate(1581 745)"
                 d="M0 0h42v8H0z"
+                id="prefix__Rectangle_37-3"
+                transform="translate(1581 745)"
               />
               <path
-                id="prefix__Rectangle_39-2"
                 className="prefix__cls-11"
-                transform="translate(1372 602)"
                 d="M0 0h170v8H0z"
+                id="prefix__Rectangle_39-2"
+                transform="translate(1372 602)"
               />
               <path
-                id="prefix__Rectangle_38-2"
                 className="prefix__cls-10"
-                transform="translate(1372 584)"
                 d="M0 0h113v8H0z"
+                id="prefix__Rectangle_38-2"
+                transform="translate(1372 584)"
               />
             </g>
             <circle
-              id="prefix__Ellipse_8-2"
               className="prefix__cls-12"
               cx={17}
               cy={17}
+              id="prefix__Ellipse_8-2"
               r={17}
               transform="translate(1896 482)"
             />
             <circle
-              id="prefix__Ellipse_9-2"
               className="prefix__cls-15"
               cx={8.5}
               cy={8.5}
+              id="prefix__Ellipse_9-2"
               r={8.5}
               transform="translate(1858 491)"
             />
             <circle
-              id="prefix__Ellipse_10-2"
               className="prefix__cls-15"
               cx={8.5}
               cy={8.5}
+              id="prefix__Ellipse_10-2"
               r={8.5}
               transform="translate(1827 491)"
             />
             <circle
-              id="prefix__Ellipse_11-2"
               className="prefix__cls-15"
               cx={8.5}
               cy={8.5}
+              id="prefix__Ellipse_11-2"
               r={8.5}
               transform="translate(1796 491)"
             />
@@ -734,9 +702,7 @@ const ImageBrowser: React.FC<Props> = ({
           .image-browser-svg {
             position: relative;
             z-index: 20;
-            filter: drop-shadow(
-              10px 0px 60px rgb(${isDark ? '121 40 202' : '0 0 0'} / 20%)
-            );
+            filter: drop-shadow(10px 0px 60px rgb(${isDark ? "121 40 202" : "0 0 0"} / 20%));
           }
         `}
       </style>
diff --git a/apps/docs/src/components/index.ts b/apps/docs/src/components/index.ts
index 2517af1ed7..6d60093d16 100644
--- a/apps/docs/src/components/index.ts
+++ b/apps/docs/src/components/index.ts
@@ -1,41 +1,41 @@
-export * from './search';
-export * from './icons';
-export * from './templates';
-export * from './primitives';
-export * from './home';
-export * from './code-demo';
+export * from "./search";
+export * from "./icons";
+export * from "./templates";
+export * from "./primitives";
+export * from "./home";
+export * from "./code-demo";
 
-export { default as Logo } from './logo';
-export { default as Hero } from './hero';
-export { default as ImageBrowser } from './image-browser';
-export { default as Sidebar } from './sidebar';
-export { default as NavLink } from './nav-link';
-export { default as Playground } from './playground';
-export { default as Anchor } from './anchor';
-export { default as MDXComponents } from './mdx';
-export { default as TableOfContent } from './table-of-content';
-export { default as Fixed } from './fixed';
-export { default as PageNav } from './page-nav';
-export { default as DotsContainer } from './dots-container';
-export { default as Palette } from './palette';
-export { default as CssTransition } from './css-transition';
-export { default as MenuToggle } from './menu-toggle';
-export { default as MobileNavigation } from './mobile-navigation';
-export { default as Badge } from './badge';
-export { default as Heading } from './heading';
-export { default as Keyboard } from './keyboard';
-export { default as ExampleBlock } from './templates/example-block';
-export { default as ThemeToggle } from './theme-toggle';
-export { default as ThemeSwitch } from './theme-switch';
-export { default as KBar } from './kbar';
-export { default as Blockholder } from './blockholder';
-export { default as LooperBG } from './looper-bg';
-export { default as FeaturesGrid } from './features-grid';
-export type { Feature as FeatureType } from './features-grid';
-export { default as Codeblock } from './codeblock';
-export { default as Community } from './community';
-export { default as InstallBanner } from './install-banner';
-export { default as VercelCallout } from './vercel-callout';
-export { default as NotifyBanner } from './notify-banner';
-export { default as SandpackEditor } from './sandpack';
-export * from './sandpack';
+export {default as Logo} from "./logo";
+export {default as Hero} from "./hero";
+export {default as ImageBrowser} from "./image-browser";
+export {default as Sidebar} from "./sidebar";
+export {default as NavLink} from "./nav-link";
+export {default as Playground} from "./playground";
+export {default as Anchor} from "./anchor";
+export {default as MDXComponents} from "./mdx";
+export {default as TableOfContent} from "./table-of-content";
+export {default as Fixed} from "./fixed";
+export {default as PageNav} from "./page-nav";
+export {default as DotsContainer} from "./dots-container";
+export {default as Palette} from "./palette";
+export {default as CssTransition} from "./css-transition";
+export {default as MenuToggle} from "./menu-toggle";
+export {default as MobileNavigation} from "./mobile-navigation";
+export {default as Badge} from "./badge";
+export {default as Heading} from "./heading";
+export {default as Keyboard} from "./keyboard";
+export {default as ExampleBlock} from "./templates/example-block";
+export {default as ThemeToggle} from "./theme-toggle";
+export {default as ThemeSwitch} from "./theme-switch";
+export {default as KBar} from "./kbar";
+export {default as Blockholder} from "./blockholder";
+export {default as LooperBG} from "./looper-bg";
+export {default as FeaturesGrid} from "./features-grid";
+export type {Feature as FeatureType} from "./features-grid";
+export {default as Codeblock} from "./codeblock";
+export {default as Community} from "./community";
+export {default as InstallBanner} from "./install-banner";
+export {default as VercelCallout} from "./vercel-callout";
+export {default as NotifyBanner} from "./notify-banner";
+export {default as SandpackEditor} from "./sandpack";
+export * from "./sandpack";
diff --git a/apps/docs/src/components/install-banner/index.ts b/apps/docs/src/components/install-banner/index.ts
index 23ce72a897..a383172dc9 100644
--- a/apps/docs/src/components/install-banner/index.ts
+++ b/apps/docs/src/components/install-banner/index.ts
@@ -1,3 +1,3 @@
-import InstallBanner from './install-banner';
+import InstallBanner from "./install-banner";
 
 export default InstallBanner;
diff --git a/apps/docs/src/components/install-banner/install-banner.tsx b/apps/docs/src/components/install-banner/install-banner.tsx
index 4472ee774a..cec90fd6fc 100644
--- a/apps/docs/src/components/install-banner/install-banner.tsx
+++ b/apps/docs/src/components/install-banner/install-banner.tsx
@@ -1,31 +1,31 @@
-import React from 'react';
-import { useRouter } from 'next/router';
-import { FeaturesGrid, Note, NextJsLogo } from '@components';
-import { Button, Container, Grid, Snippet } from '@nextui-org/react';
-import { StyledCardBlur, Title, Subtitle } from '@primitives';
+import React from "react";
+import {useRouter} from "next/router";
+import {FeaturesGrid, Note, NextJsLogo} from "@components";
+import {Button, Container, Grid, Snippet} from "@nextui-org/react";
+import {StyledCardBlur, Title, Subtitle} from "@primitives";
 
 const bannerSuggestions = [
   {
-    title: 'Getting Started',
+    title: "Getting Started",
     description:
-      'NextUI allows you make beautiful, modern, and fast websites/applications regardless of your design experience.',
+      "NextUI allows you make beautiful, modern, and fast websites/applications regardless of your design experience.",
     icon: <Note fill="#FF4ECD" />,
-    href: '/docs/guide/getting-started'
+    href: "/docs/guide/getting-started",
   },
   {
-    title: 'NextUI + Next.js',
+    title: "NextUI + Next.js",
     description:
-      'NextUI is totally compatible with Next.js you just need to customize the _app.jsx entry file to load the provider.',
+      "NextUI is totally compatible with Next.js you just need to customize the _app.jsx entry file to load the provider.",
     icon: <NextJsLogo fill="#FF4ECD" />,
-    href: '/docs/guide/nextui-plus-nextjs'
-  }
+    href: "/docs/guide/nextui-plus-nextjs",
+  },
 ];
 
 const InstallBanner: React.FC = () => {
   const router = useRouter();
 
   const handleGetStartedClick = () => {
-    router.push('docs/guide/getting-started');
+    router.push("docs/guide/getting-started");
   };
 
   return (
@@ -33,16 +33,16 @@ const InstallBanner: React.FC = () => {
       css={{
         br: 0,
         p: 0,
-        dflex: 'center',
-        width: '100vw',
-        position: 'relative',
-        left: '50%',
-        right: '50%',
-        ml: '-50vw',
-        mr: '-50vw',
-        border: '1.5px solid $border',
-        borderLeftColor: 'transparent',
-        borderRightColor: 'transparent'
+        dflex: "center",
+        width: "100vw",
+        position: "relative",
+        left: "50%",
+        right: "50%",
+        ml: "-50vw",
+        mr: "-50vw",
+        border: "1.5px solid $border",
+        borderLeftColor: "transparent",
+        borderRightColor: "transparent",
       }}
     >
       <Container
@@ -50,79 +50,79 @@ const InstallBanner: React.FC = () => {
         css={{
           ml: 0,
           mr: 0,
-          py: '$8',
-          '@xsMax': {
-            px: '$4'
-          }
+          py: "$8",
+          "@xsMax": {
+            px: "$4",
+          },
         }}
       >
         <Grid.Container gap={2}>
-          <Grid xs={12} md={6} direction="column" justify="center">
-            <Title css={{ fontSize: '2.4rem' }}>Let's make the Web</Title>
-            <Title color="violet" css={{ fontSize: '2.4rem' }}>
+          <Grid direction="column" justify="center" md={6} xs={12}>
+            <Title css={{fontSize: "2.4rem"}}>Let&apos;s make the Web</Title>
+            <Title color="violet" css={{fontSize: "2.4rem"}}>
               Prettier
             </Title>
             <Subtitle
               css={{
-                my: '$2',
-                fs: '1.2rem',
-                maxW: '100%',
-                '@xsMax': {
-                  my: '$8'
-                }
+                my: "$2",
+                fs: "1.2rem",
+                maxW: "100%",
+                "@xsMax": {
+                  my: "$8",
+                },
               }}
             >
-              Try it for yourself, and share with us what you've built!
+              Try it for yourself, and share with us what you&apos;ve built!
             </Subtitle>
-            <Grid.Container xs={12} alignItems="center">
-              <Grid xs={12} sm={2.5}>
+            <Grid.Container alignItems="center" xs={12}>
+              <Grid sm={2.5} xs={12}>
                 <Button
                   auto
                   rounded
                   color="secondary"
                   css={{
-                    '@xsMax': {
-                      width: '100%',
-                      mb: '$6'
-                    }
+                    "@xsMax": {
+                      width: "100%",
+                      mb: "$6",
+                    },
                   }}
                   onClick={handleGetStartedClick}
                 >
                   Get started
                 </Button>
               </Grid>
-              <Grid xs={12} sm={9.5}>
+              <Grid sm={9.5} xs={12}>
                 <Snippet
                   className="hero__snippet"
-                  tooltipColor="secondary"
                   css={{
-                    borderRadius: '$pill',
-                    height: '$space$14',
+                    borderRadius: "$pill",
+                    height: "$space$14",
                     py: 0,
-                    transition: 'opacity 0.3s ease-in-out',
-                    dflex: 'center',
-                    boxShadow: '$sm',
-                    bf: 'saturate(180%) blur(10px)',
-                    bg: '$backgroundBlur',
-                    '@xsMax': {
-                      width: '100%'
-                    }
+                    transition: "opacity 0.3s ease-in-out",
+                    dflex: "center",
+                    boxShadow: "$sm",
+                    bf: "saturate(180%) blur(10px)",
+                    bg: "$backgroundBlur",
+                    "@xsMax": {
+                      width: "100%",
+                    },
                   }}
+                  tooltipColor="secondary"
                 >
                   npm install @nextui-org/react
                 </Snippet>
               </Grid>
             </Grid.Container>
           </Grid>
-          <Grid xs={12} md={6} css={{ py: '$10' }}>
+          <Grid css={{py: "$10"}} md={6} xs={12}>
             <FeaturesGrid
-              xs={12}
-              sm={6}
-              lg={6}
               features={bannerSuggestions}
               itemCss={{
-                bg: 'rgba(255, 255, 255, 0)'
+                bg: "rgba(255, 255, 255, 0)",
               }}
+              lg={6}
+              sm={6}
+              xs={12}
             />
           </Grid>
         </Grid.Container>
diff --git a/apps/docs/src/components/kbar/index.tsx b/apps/docs/src/components/kbar/index.tsx
index 2838bc0cb0..18d2d8e497 100644
--- a/apps/docs/src/components/kbar/index.tsx
+++ b/apps/docs/src/components/kbar/index.tsx
@@ -1,43 +1,29 @@
-import React from 'react';
-import { useTheme, Backdrop } from '@nextui-org/react';
-import {
-  KBarPortal,
-  KBarPositioner,
-  KBarAnimator,
-  VisualState,
-  useKBar
-} from 'kbar';
-import KBarOption from './option';
-import KBarSearch from './search';
-import KBarResults from './results';
-import generateStyles from './styles';
-import { Action, ResultHandlers, ResultState } from './types';
+import React from "react";
+import {useTheme, Backdrop} from "@nextui-org/react";
+import {KBarPortal, KBarPositioner, KBarAnimator, VisualState, useKBar} from "kbar";
+
+import KBarOption from "./option";
+import KBarSearch from "./search";
+import KBarResults from "./results";
+import generateStyles from "./styles";
+import {Action, ResultHandlers, ResultState} from "./types";
 
 const KBar: React.FC<unknown> = () => {
-  const { theme } = useTheme();
+  const {theme} = useTheme();
   const styles = generateStyles(theme);
-  const { visible } = useKBar((state) => ({
-    visible: state.visualState !== VisualState.hidden
+  const {visible} = useKBar((state) => ({
+    visible: state.visualState !== VisualState.hidden,
   }));
 
   return (
     <KBarPortal>
-      <Backdrop
-        blur
-        className="backdrop"
-        visible={visible}
-        maxWidth={styles.container.maxWidth}
-      >
+      <Backdrop blur className="backdrop" maxWidth={styles.container.maxWidth} visible={visible}>
         <KBarPositioner>
           <KBarAnimator style={styles.container}>
             <KBarSearch placeholder="What do you need?" />
             <KBarResults
               style={styles.result}
-              onRender={(
-                action: Action,
-                handlers: ResultHandlers,
-                state: ResultState
-              ) => (
+              onRender={(action: Action, handlers: ResultHandlers, state: ResultState) => (
                 <KBarOption action={action} handlers={handlers} state={state} />
               )}
             />
diff --git a/apps/docs/src/components/kbar/option.tsx b/apps/docs/src/components/kbar/option.tsx
index 3f7d063db5..449d9a5ec6 100644
--- a/apps/docs/src/components/kbar/option.tsx
+++ b/apps/docs/src/components/kbar/option.tsx
@@ -1,12 +1,14 @@
-import React, { useCallback } from 'react';
-import cn from 'classnames';
-import Image from 'next/image';
-import { useTheme } from '@nextui-org/react';
-import { addColorAlpha } from '@utils/index';
-import Keyboard from '../keyboard';
-import Icon from '../icons/map-icons';
-import { isEmpty } from 'lodash';
-import { Action, ResultHandlers, ResultState } from './types';
+import React, {useCallback} from "react";
+import cn from "classnames";
+import Image from "next/image";
+import {useTheme} from "@nextui-org/react";
+import {addColorAlpha} from "@utils/index";
+import {isEmpty} from "lodash";
+
+import Keyboard from "../keyboard";
+import Icon from "../icons/map-icons";
+
+import {Action, ResultHandlers, ResultState} from "./types";
 
 interface Props {
   action: Action;
@@ -14,10 +16,10 @@ interface Props {
   state: ResultState;
 }
 
-const KBarOption: React.FC<Props> = ({ action, handlers, state }) => {
+const KBarOption: React.FC<Props> = ({action, handlers, state}) => {
   const ownRef = React.useRef<HTMLLIElement>(null);
   const active = state.index === state.activeIndex;
-  const { theme, isDark } = useTheme();
+  const {theme, isDark} = useTheme();
 
   React.useEffect(() => {
     if (active) {
@@ -26,16 +28,17 @@ const KBarOption: React.FC<Props> = ({ action, handlers, state }) => {
       window.requestAnimationFrame(() =>
         window.requestAnimationFrame(() => {
           const element = ownRef.current;
+
           if (!element) {
             return;
           }
           // @ts-ignore
           element.scrollIntoView({
-            block: 'nearest',
-            behavior: 'smooth',
-            inline: 'start'
+            block: "nearest",
+            behavior: "smooth",
+            inline: "start",
           });
-        })
+        }),
       );
     }
   }, [active]);
@@ -45,61 +48,45 @@ const KBarOption: React.FC<Props> = ({ action, handlers, state }) => {
       return (
         <div className="option-icon">
           <Icon
-            fill={
-              active
-                ? theme?.colors?.accents5?.value
-                : theme?.colors?.accents3?.value
-            }
+            fill={active ? theme?.colors?.accents5?.value : theme?.colors?.accents3?.value}
             name="arrow-right"
           />
         </div>
       );
     }
-    if (
-      action.icon &&
-      typeof action.icon === 'string' &&
-      action.icon.includes('.svg')
-    ) {
+    if (action.icon && typeof action.icon === "string" && action.icon.includes(".svg")) {
       return (
         <div className="option-icon">
           <Image
-            width={24}
-            height={24}
-            src={action.icon?.replace(
-              '.svg',
-              isDark ? '-dark.svg' : '-light.svg'
-            )}
             alt={`${action.name} icon`}
+            height={24}
+            src={action.icon?.replace(".svg", isDark ? "-dark.svg" : "-light.svg")}
+            width={24}
           />
         </div>
       );
-    } else if (action.icon && typeof action.icon === 'string') {
+    } else if (action.icon && typeof action.icon === "string") {
       return (
         <div className="option-icon">
           <Icon
-            fill={
-              active
-                ? theme?.colors?.accents5?.value
-                : theme?.colors?.accents3?.value
-            }
+            fill={active ? theme?.colors?.accents5?.value : theme?.colors?.accents3?.value}
             name={action.icon}
           />
         </div>
       );
     }
+
     return <div className="option-icon">{action.icon}</div>;
   }, [active, isDark]);
 
   return (
     <li ref={ownRef} className="kbar-option" {...handlers}>
-      <div className={cn('option-container', { active })}>
+      <div className={cn("option-container", {active})}>
         <div className="option-left-container">
           {renderIcon()}
           <div className="option-text-container">
             <span className="option-text-title">{action.name}</span>
-            {action.subtitle && (
-              <span className="option-text-subtitle">{action.subtitle}</span>
-            )}
+            {action.subtitle && <span className="option-text-subtitle">{action.subtitle}</span>}
           </div>
         </div>
         <div className="option-right-container">
diff --git a/apps/docs/src/components/kbar/results.tsx b/apps/docs/src/components/kbar/results.tsx
index 69bf5e6beb..fefaa23ec7 100644
--- a/apps/docs/src/components/kbar/results.tsx
+++ b/apps/docs/src/components/kbar/results.tsx
@@ -1,30 +1,28 @@
-import * as React from 'react';
-import cn from 'classnames';
-import { matchSorter } from 'match-sorter';
-import { VisualState, useKBar } from 'kbar';
-import { groupBy, isEmpty } from 'lodash';
-import { useTheme } from '@nextui-org/react';
-import { Action, ResultState, KBarResultsProps, ResultHandlers } from './types';
+import * as React from "react";
+import cn from "classnames";
+import {matchSorter} from "match-sorter";
+import {VisualState, useKBar} from "kbar";
+import {groupBy, isEmpty} from "lodash";
+import {useTheme} from "@nextui-org/react";
+
+import {Action, ResultState, KBarResultsProps, ResultHandlers} from "./types";
 
 function useMatches(term: string, actions: Action[]) {
   // TODO: we can throttle this if needed
   return React.useMemo(
-    () =>
-      term.trim() === ''
-        ? actions
-        : matchSorter(actions, term, { keys: ['keywords', 'name'] }),
-    [term, actions]
+    () => (term.trim() === "" ? actions : matchSorter(actions, term, {keys: ["keywords", "name"]})),
+    [term, actions],
   );
 }
 
 export default function KBarResults(props: KBarResultsProps) {
-  const { search, actions, currentRootActionId, query } = useKBar((state) => ({
+  const {search, actions, currentRootActionId, query} = useKBar((state) => ({
     search: state.searchQuery,
     currentRootActionId: state.currentRootActionId,
-    actions: state.actions
+    actions: state.actions,
   }));
 
-  const { theme } = useTheme();
+  const {theme} = useTheme();
 
   // Store reference to a list of all actions
   const actionsList = React.useMemo(
@@ -32,7 +30,7 @@ export default function KBarResults(props: KBarResultsProps) {
       Object.keys(actions).map((key) => {
         return actions[key];
       }),
-    [actions]
+    [actions],
   );
 
   const currActions = React.useMemo(() => {
@@ -41,6 +39,7 @@ export default function KBarResults(props: KBarResultsProps) {
         if (!curr.parent) {
           acc[curr.id] = curr;
         }
+
         return acc;
       }, {});
     }
@@ -50,15 +49,16 @@ export default function KBarResults(props: KBarResultsProps) {
 
     if (!children) {
       return {
-        [root.id]: root
+        [root.id]: root,
       };
     }
 
     return {
       ...children.reduce((acc: any, actionId) => {
         acc[actionId] = actions[actionId];
+
         return acc;
-      }, {})
+      }, {}),
     };
   }, [actions, actionsList, currentRootActionId]);
 
@@ -66,9 +66,10 @@ export default function KBarResults(props: KBarResultsProps) {
     () =>
       Object.keys(currActions).map((key) => {
         const action = currActions[key];
+
         return action;
       }) as Action[],
-    [currActions]
+    [currActions],
   );
 
   const matches = useMatches(search, filteredList);
@@ -96,7 +97,7 @@ export default function KBarResults(props: KBarResultsProps) {
   React.useEffect(() => {
     function handleKeyDown(event: KeyboardEvent) {
       event.stopPropagation();
-      if (event.key === 'ArrowDown' || (event.ctrlKey && event.key === 'j')) {
+      if (event.key === "ArrowDown" || (event.ctrlKey && event.key === "j")) {
         event.preventDefault();
         setActiveIndex((index) => {
           if (index >= matches.length - 1) {
@@ -107,7 +108,7 @@ export default function KBarResults(props: KBarResultsProps) {
         });
       }
 
-      if (event.key === 'ArrowUp' || (event.ctrlKey && event.key === 'k')) {
+      if (event.key === "ArrowUp" || (event.ctrlKey && event.key === "k")) {
         event.preventDefault();
         setActiveIndex((index) => {
           if (index === 0) {
@@ -117,13 +118,14 @@ export default function KBarResults(props: KBarResultsProps) {
           }
         });
       }
-      if (event.key === 'Enter') {
+      if (event.key === "Enter") {
         event.preventDefault();
         select();
       }
     }
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => window.removeEventListener("keydown", handleKeyDown);
   }, [matches, select, activeIndex]);
 
   // Reset focused index when searching & updated results.
@@ -131,49 +133,46 @@ export default function KBarResults(props: KBarResultsProps) {
     setActiveIndex(0);
   }, [filteredList.length, search]);
 
-  const groupedMatches = groupBy(matches, 'section');
+  const groupedMatches = groupBy(matches, "section");
 
   const renderAction = (action: any, index: number) => {
     const handlers: ResultHandlers = {
       onClick: select,
       onPointerDown: () => setActiveIndex(index),
-      onMouseEnter: () => setActiveIndex(index)
+      onMouseEnter: () => setActiveIndex(index),
     };
     const state: ResultState = {
       activeIndex,
-      index
+      index,
     };
+
     if (props.onRender) {
       // Implicitly add a `key` so the user won't have to.
       return React.cloneElement(props.onRender(action, handlers, state), {
-        key: action.id
+        key: action.id,
       });
     }
+
     return (
-      <DefaultResultWrapper
-        key={action.id}
-        isActive={activeIndex === index}
-        {...handlers}
-      >
+      <DefaultResultWrapper key={action.id} isActive={activeIndex === index} {...handlers}>
         {action.name}
       </DefaultResultWrapper>
     );
   };
   let idx = -1;
+
   return (
-    <div className={cn('kbar-section', props.className)} style={props.style}>
+    <div className={cn("kbar-section", props.className)} style={props.style}>
       {!isEmpty(groupedMatches)
         ? Object.keys(groupedMatches).map((section, sectionIndex) => {
             return (
-              <ul
-                key={`${section}_${sectionIndex}`}
-                className="kbar-section-list"
-              >
-                {section && section !== 'undefined' ? (
+              <ul key={`${section}_${sectionIndex}`} className="kbar-section-list">
+                {section && section !== "undefined" ? (
                   <b className="kbar-section-list__title">{section}</b>
                 ) : null}
                 {groupedMatches[section].map((action) => {
                   idx = idx + 1;
+
                   return renderAction(action, idx);
                 })}
               </ul>
@@ -203,11 +202,7 @@ export default function KBarResults(props: KBarResultsProps) {
 }
 
 // Separate component to ensure we can scrollTo active elements properly.
-const DefaultResultWrapper: React.FC<{ isActive: boolean }> = ({
-  isActive,
-  children,
-  ...rest
-}) => {
+const DefaultResultWrapper: React.FC<{isActive: boolean}> = ({isActive, children, ...rest}) => {
   const ownRef = React.useRef<HTMLUListElement>(null);
 
   React.useEffect(() => {
@@ -217,11 +212,12 @@ const DefaultResultWrapper: React.FC<{ isActive: boolean }> = ({
       window.requestAnimationFrame(() =>
         window.requestAnimationFrame(() => {
           const element = ownRef.current;
+
           if (!element) {
             return;
           }
-          element.scrollIntoView({ block: 'nearest' });
-        })
+          element.scrollIntoView({block: "nearest"});
+        }),
       );
     }
   }, [isActive]);
diff --git a/apps/docs/src/components/kbar/search.tsx b/apps/docs/src/components/kbar/search.tsx
index 22e468fa3d..406d30f61e 100644
--- a/apps/docs/src/components/kbar/search.tsx
+++ b/apps/docs/src/components/kbar/search.tsx
@@ -1,21 +1,19 @@
-import * as React from 'react';
-import { useKBar } from 'kbar';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useKBar} from "kbar";
+import {useTheme} from "@nextui-org/react";
 
-export default function KBarSearch(
-  props: React.InputHTMLAttributes<HTMLInputElement>
-) {
-  const { query, search, actions, currentRootActionId } = useKBar((state) => ({
+export default function KBarSearch(props: React.InputHTMLAttributes<HTMLInputElement>) {
+  const {query, search, actions, currentRootActionId} = useKBar((state) => ({
     search: state.searchQuery,
     currentRootActionId: state.currentRootActionId,
-    actions: state.actions
+    actions: state.actions,
   }));
 
-  const { theme } = useTheme();
+  const {theme} = useTheme();
   const ownRef = React.useRef<HTMLInputElement>(null);
 
   React.useEffect(() => {
-    query.setSearch('');
+    query.setSearch("");
     ownRef.current?.focus();
   }, [currentRootActionId, query]);
 
@@ -30,8 +28,9 @@ export default function KBarSearch(
           query.setSearch(event.target.value);
         }}
         onKeyDown={(event) => {
-          if (currentRootActionId && !search && event.key === 'Backspace') {
+          if (currentRootActionId && !search && event.key === "Backspace") {
             const parent = actions[currentRootActionId].parent;
+
             query.setCurrentRootAction(parent);
           }
         }}
diff --git a/apps/docs/src/components/kbar/styles.ts b/apps/docs/src/components/kbar/styles.ts
index 04e858016d..b1b064fca2 100644
--- a/apps/docs/src/components/kbar/styles.ts
+++ b/apps/docs/src/components/kbar/styles.ts
@@ -1,20 +1,20 @@
-import { NextUITheme } from '@nextui-org/react';
+import {NextUITheme} from "@nextui-org/react";
 
 export default function generateStyles(theme?: NextUITheme) {
   return {
     container: {
-      maxWidth: '500px',
-      width: '100%',
+      maxWidth: "500px",
+      width: "100%",
       background: theme?.colors?.accents1?.value,
       color: theme?.colors?.text?.value,
-      borderRadius: '8px',
-      overflow: 'hidden',
-      boxShadow: theme?.shadows?.md?.value
+      borderRadius: "8px",
+      overflow: "hidden",
+      boxShadow: theme?.shadows?.md?.value,
     },
     result: {
       maxHeight: 400,
-      paddingBottom: '8px',
-      overflow: 'auto'
-    }
+      paddingBottom: "8px",
+      overflow: "auto",
+    },
   };
 }
diff --git a/apps/docs/src/components/kbar/types.ts b/apps/docs/src/components/kbar/types.ts
index 8d06c5ed3f..f1a40fe972 100644
--- a/apps/docs/src/components/kbar/types.ts
+++ b/apps/docs/src/components/kbar/types.ts
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, CSSProperties } from 'react';
+import {ReactElement, ReactNode, CSSProperties} from "react";
 
 export type ActionId = string;
 
@@ -28,9 +28,5 @@ export interface ResultState {
 export interface KBarResultsProps {
   style?: CSSProperties;
   className?: string;
-  onRender?: (
-    action: Action,
-    handlers: ResultHandlers,
-    state: ResultState
-  ) => ReactElement;
+  onRender?: (action: Action, handlers: ResultHandlers, state: ResultState) => ReactElement;
 }
diff --git a/apps/docs/src/components/keyboard/index.tsx b/apps/docs/src/components/keyboard/index.tsx
index d542fd06ec..ccb9261719 100644
--- a/apps/docs/src/components/keyboard/index.tsx
+++ b/apps/docs/src/components/keyboard/index.tsx
@@ -1,7 +1,7 @@
-import React, { useMemo } from 'react';
-import withDefaults from '@utils/with-defaults';
-import { NextUITheme, useTheme } from '@nextui-org/react';
-import { addColorAlpha } from '@utils/index';
+import React, {useMemo} from "react";
+import withDefaults from "@utils/with-defaults";
+import {NextUITheme, useTheme} from "@nextui-org/react";
+import {addColorAlpha} from "@utils/index";
 
 interface Props {
   command?: boolean;
@@ -19,7 +19,7 @@ const defaultProps = {
   option: false,
   ctrl: false,
   small: false,
-  className: ''
+  className: "",
 };
 
 type NativeAttrs = Omit<React.KeygenHTMLAttributes<unknown>, keyof Props>;
@@ -35,13 +35,14 @@ const getLayout = (small: boolean, theme?: NextUITheme): CustomLayout => {
   if (small)
     return {
       padding: 0,
-      fontSize: '.75rem',
-      minWidth: theme ? theme?.space?.lg?.value : 'initial'
+      fontSize: ".75rem",
+      minWidth: theme ? theme?.space?.lg?.value : "initial",
     };
+
   return {
-    padding: theme ? theme?.space[2]?.value : '0.25rem',
-    fontSize: '0.875rem',
-    minWidth: `calc(1.5 * ${theme?.space?.lg})`
+    padding: theme ? theme?.space[2]?.value : "0.25rem",
+    fontSize: "0.875rem",
+    minWidth: `calc(1.5 * ${theme?.space?.lg})`,
   };
 };
 
@@ -56,15 +57,15 @@ const Keyboard: React.FC<React.PropsWithChildren<KeyboardProps>> = ({
   onClick,
   ...props
 }) => {
-  const { theme, isDark } = useTheme();
+  const {theme, isDark} = useTheme();
 
-  const { padding, fontSize, minWidth } = useMemo<CustomLayout>(
+  const {padding, fontSize, minWidth} = useMemo<CustomLayout>(
     () => getLayout(small, theme),
-    [small, theme]
+    [small, theme],
   );
 
   return (
-    <kbd className={className} onClick={onClick} {...props}>
+    <kbd className={className} role="button" onClick={onClick} {...props}>
       {command && <span>⌘</span>}
       {shift && <span>⇧</span>}
       {option && <span>⌥</span>}
@@ -76,19 +77,13 @@ const Keyboard: React.FC<React.PropsWithChildren<KeyboardProps>> = ({
           line-height: 2em;
           text-align: center;
           display: inline-block;
-          cursor: ${onClick ? 'pointer' : 'default'};
+          cursor: ${onClick ? "pointer" : "default"};
           color: ${addColorAlpha(theme?.colors?.text?.value, 0.6)};
-          background-color: ${addColorAlpha(
-            theme?.colors?.background?.value,
-            0.8
-          )};
+          background-color: ${addColorAlpha(theme?.colors?.background?.value, 0.8)};
           border: ${isDark
-            ? `1px solid ${addColorAlpha(
-                theme?.colors?.foreground?.value,
-                0.2
-              )}`
-            : 'none'};
-          box-shadow: ${isDark ? 'none' : '0 0 2px 0 rgb(0 0 0 / 14%)'};
+            ? `1px solid ${addColorAlpha(theme?.colors?.foreground?.value, 0.2)}`
+            : "none"};
+          box-shadow: ${isDark ? "none" : "0 0 2px 0 rgb(0 0 0 / 14%)"};
           font-family: ${theme?.fonts?.sans?.value};
           border-radius: 6px;
           padding: 0 ${padding};
diff --git a/apps/docs/src/components/logo/index.tsx b/apps/docs/src/components/logo/index.tsx
index 8e27cb58e2..642e49b10a 100644
--- a/apps/docs/src/components/logo/index.tsx
+++ b/apps/docs/src/components/logo/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { CSS, styled } from '@nextui-org/react';
+import React from "react";
+import {CSS, styled} from "@nextui-org/react";
 
 export interface LogoProps {
   auto?: boolean;
@@ -13,32 +13,32 @@ export interface LogoProps {
   css?: CSS;
 }
 
-const StyledSmallLogo = styled('svg', {
-  '& path': { fill: '$foreground' },
+const StyledSmallLogo = styled("svg", {
+  "& path": {fill: "$foreground"},
   variants: {
     auto: {
       true: {
-        display: 'none',
-        '@mdMax': {
-          display: 'block'
-        }
-      }
-    }
-  }
+        display: "none",
+        "@mdMax": {
+          display: "block",
+        },
+      },
+    },
+  },
 });
 
-const StyledLargeLogo = styled('svg', {
-  display: 'block',
-  '& path': { fill: '$foreground' },
+const StyledLargeLogo = styled("svg", {
+  display: "block",
+  "& path": {fill: "$foreground"},
   variants: {
     auto: {
       true: {
-        '@mdMax': {
-          display: 'none'
-        }
-      }
-    }
-  }
+        "@mdMax": {
+          display: "none",
+        },
+      },
+    },
+  },
 });
 
 const Logo: React.FC<LogoProps> = ({
@@ -54,12 +54,12 @@ const Logo: React.FC<LogoProps> = ({
 }) => {
   const Small = () => (
     <StyledSmallLogo
+      auto={auto}
       className="logo__small"
-      width={width || size || 25}
+      css={css}
       height={height || size || 25}
       viewBox="0 0 43 43"
-      auto={auto}
-      css={css}
+      width={width || size || 25}
       {...props}
     >
       <path d="M32 43H11a10.928 10.928 0 01-7.778-3.222A10.928 10.928 0 010 32V11a10.928 10.928 0 013.222-7.778A10.928 10.928 0 0111 0h21a10.929 10.929 0 017.779 3.222A10.927 10.927 0 0143 11v21a10.927 10.927 0 01-3.222 7.778A10.929 10.929 0 0132 43zM11.314 12.293v12.033a6.35 6.35 0 00.87 3.31 6.243 6.243 0 002.422 2.3 7.458 7.458 0 003.595.843 7.474 7.474 0 003.6-.839 6.2 6.2 0 002.418-2.3 6.381 6.381 0 00.869-3.315V12.292h-1.659V24.21a5.149 5.149 0 01-.643 2.578 4.6 4.6 0 01-1.824 1.779 5.668 5.668 0 01-2.759.648 5.646 5.646 0 01-2.756-.648 4.64 4.64 0 01-1.823-1.779 5.116 5.116 0 01-.648-2.578V12.292zm18.6 0v18.175h1.66V12.293z" />
@@ -68,11 +68,11 @@ const Logo: React.FC<LogoProps> = ({
 
   const Large = () => (
     <StyledLargeLogo
+      auto={auto}
       className="logo__large"
-      width={100}
       height={24.48}
       viewBox="0 0 100 24.48"
-      auto={auto}
+      width={100}
       {...props}
     >
       <path d="M18.745 0v24.069h-2.139L2.386 3.914h-.188v20.155H0V0h2.127l14.267 20.179h.188V0zm13.256 24.445a7.934 7.934 0 01-4.371-1.181 7.79 7.79 0 01-2.85-3.279 11.069 11.069 0 01-1-4.836 11.2 11.2 0 011-4.848 8.1 8.1 0 012.785-3.326 7.175 7.175 0 014.119-1.2 7.689 7.689 0 012.832.535 7.042 7.042 0 012.45 1.634 7.836 7.836 0 011.722 2.756 11.015 11.015 0 01.635 3.931v1.034h-12.1V13.82h9.963a6.882 6.882 0 00-.7-3.132 5.55 5.55 0 00-1.939-2.2 5.11 5.11 0 00-2.862-.811 5.121 5.121 0 00-3.02.917 6.251 6.251 0 00-2.039 2.421 7.513 7.513 0 00-.746 3.291v1.1a8.822 8.822 0 00.746 3.755 5.751 5.751 0 002.124 2.487 5.9 5.9 0 003.255.881 5.873 5.873 0 002.251-.4 4.843 4.843 0 001.634-1.075 4.729 4.729 0 001-1.487l1.986.646a5.885 5.885 0 01-1.346 2.1 6.889 6.889 0 01-2.327 1.545 8.251 8.251 0 01-3.202.587zm12.74-18.428l4.654 7.7 4.654-7.7h2.433l-5.806 9.026 5.806 9.026H54.05l-4.654-7.451-4.655 7.451H42.32l5.735-9.026-5.735-9.026zm23.246 0v1.822h-8.615V6.017zm-5.923-4.325h2.1v17.664a3.414 3.414 0 00.388 1.769 2.159 2.159 0 001.011.9 3.363 3.363 0 001.328.264 4.045 4.045 0 00.705-.053q.294-.053.517-.112l.447 1.892a5.433 5.433 0 01-.752.217 5.162 5.162 0 01-1.1.1 5.1 5.1 0 01-2.215-.505 4.337 4.337 0 01-1.743-1.499 4.3 4.3 0 01-.682-2.48zM89.211 0h2.2v15.936a8.411 8.411 0 01-1.152 4.389 8.18 8.18 0 01-3.2 3.044 9.854 9.854 0 01-4.77 1.111 9.82 9.82 0 01-4.76-1.116 8.225 8.225 0 01-3.208-3.044 8.379 8.379 0 01-1.152-4.384V0h2.2v15.783a6.747 6.747 0 00.858 3.414 6.13 6.13 0 002.415 2.356 7.444 7.444 0 003.649.858 7.478 7.478 0 003.655-.858 6.08 6.08 0 002.413-2.353 6.784 6.784 0 00.852-3.414zM100 0v24.069h-2.2V0z" />
@@ -91,6 +91,7 @@ const Logo: React.FC<LogoProps> = ({
   if (small) {
     return <Small />;
   }
+
   return <Large />;
 };
 
diff --git a/apps/docs/src/components/looper-bg/index.tsx b/apps/docs/src/components/looper-bg/index.tsx
index f6e3e484e9..a01d89746b 100644
--- a/apps/docs/src/components/looper-bg/index.tsx
+++ b/apps/docs/src/components/looper-bg/index.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { styled, CSS } from '@nextui-org/react';
-import withDefaults from '@utils/with-defaults';
+import React from "react";
+import {styled, CSS} from "@nextui-org/react";
+import withDefaults from "@utils/with-defaults";
 
 export interface Props {
   width?: number;
@@ -11,493 +11,493 @@ export interface Props {
 
 const defaultProps = {
   width: 1371,
-  height: 1352
+  height: 1352,
 };
 
-const StyledSvg = styled('svg', {});
+const StyledSvg = styled("svg", {});
 
-const LooperBG: React.FC<Props> = ({ width, height, ...props }) => {
+const LooperBG: React.FC<Props> = ({width, height, ...props}) => {
   return (
     <StyledSvg
-      width={width}
+      fill="none"
       height={height}
       viewBox="0 0 1371 1352"
-      fill="none"
+      width={width}
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        opacity={0.0144928}
         d="M1892.3 1135.79L2050.33 851.108C2053.28 845.808 2054.01 839.56 2052.37 833.724L1926.31 384.994C1925.02 380.404 1922.34 376.329 1918.63 373.331L1601.23 116.627C1594.51 111.191 1585.31 109.983 1577.41 113.498L1318.02 228.99C1310.12 232.506 1304.86 240.152 1304.4 248.784L1282.79 656.427C1282.54 661.188 1283.77 665.909 1286.32 669.938L1535.44 1063.87C1538.68 1069 1543.82 1072.63 1549.72 1073.99L1867.03 1147.04C1877.02 1149.34 1887.32 1144.75 1892.3 1135.79Z"
+        opacity={0.0144928}
         stroke="url(#paint0_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.0289855}
         d="M1843 1148.95L2014.92 875.181C2018.15 870.04 2019.21 863.831 2017.88 857.908L1916.64 407.325C1915.59 402.66 1913.12 398.437 1909.56 395.244L1608.27 125.038C1601.85 119.274 1592.73 117.594 1584.68 120.688L1321.17 221.84C1313.11 224.934 1307.46 232.28 1306.54 240.863L1263.45 643.264C1262.94 648.018 1263.92 652.813 1266.26 656.981L1492.53 1059.57C1495.5 1064.86 1500.45 1068.77 1506.29 1070.43L1817.23 1158.84C1827.07 1161.64 1837.57 1157.61 1843 1148.95Z"
+        opacity={0.0289855}
         stroke="url(#paint1_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.0434783}
         d="M1793.61 1160.53L1978.7 898.343C1982.21 893.376 1983.61 887.222 1982.59 881.228L1906.01 430.15C1905.21 425.422 1902.95 421.062 1899.54 417.682L1614.92 134.949C1608.8 128.873 1599.8 126.728 1591.6 129.392L1324.76 216.093C1316.56 218.757 1310.54 225.783 1309.16 234.293L1245.08 630.329C1244.32 635.064 1245.05 639.919 1247.18 644.217L1450.36 1054.16C1453.06 1059.61 1457.81 1063.76 1463.56 1065.72L1767.42 1169.04C1777.07 1172.32 1787.73 1168.86 1793.61 1160.53Z"
+        opacity={0.0434783}
         stroke="url(#paint2_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.057971}
         d="M1744.22 1170.54L1941.74 920.558C1945.52 915.781 1947.25 909.701 1946.55 903.653L1894.4 453.414C1893.84 448.635 1891.8 444.15 1888.57 440.59L1621.08 146.324C1615.28 139.953 1606.42 137.35 1598.1 139.578L1328.73 211.758C1320.41 213.987 1314.03 220.673 1312.2 229.086L1227.68 617.673C1226.66 622.375 1227.14 627.278 1229.05 631.694L1409 1047.69C1411.42 1053.28 1415.96 1057.68 1421.61 1059.93L1717.67 1177.66C1727.12 1181.41 1737.91 1178.52 1744.22 1170.54Z"
+        opacity={0.057971}
         stroke="url(#paint3_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.0724638}
         d="M1694.9 1179L1904.1 941.798C1908.13 937.224 1910.18 931.236 1909.8 925.149L1881.78 477.06C1881.48 472.244 1879.67 467.644 1876.61 463.912L1626.68 159.124C1621.23 152.475 1612.52 149.423 1604.11 151.21L1332.98 208.842C1324.57 210.63 1317.85 216.959 1315.58 225.25L1211.22 605.345C1209.94 609.999 1210.16 614.937 1211.85 619.46L1368.5 1040.21C1370.63 1045.92 1374.94 1050.56 1380.49 1053.09L1668.08 1184.71C1677.3 1188.92 1688.19 1186.61 1694.9 1179Z"
+        opacity={0.0724638}
         stroke="url(#paint4_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.0869565}
         d="M1645.75 1185.93L1865.82 962.033C1870.1 957.678 1872.48 951.798 1872.42 945.69L1868.16 501.032C1868.11 496.191 1866.54 491.487 1863.66 487.592L1631.65 173.304C1626.55 166.397 1618.03 162.904 1609.55 164.248L1337.43 207.347C1328.95 208.69 1321.93 214.645 1319.21 222.79L1195.68 593.391C1194.15 597.984 1194.1 602.943 1195.56 607.562L1328.91 1031.77C1330.74 1037.6 1334.82 1042.46 1340.23 1045.28L1618.73 1190.21C1627.7 1194.88 1638.66 1193.14 1645.75 1185.93Z"
+        opacity={0.0869565}
         stroke="url(#paint5_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.101449}
         d="M1596.84 1191.35L1826.98 981.242C1831.49 977.117 1834.18 971.363 1834.45 965.252L1853.51 525.272C1853.72 520.419 1852.39 515.624 1849.71 511.575L1635.92 188.819C1631.19 181.671 1622.87 177.75 1614.34 178.646L1342.02 207.268C1333.49 208.164 1326.17 213.729 1323.03 221.705L1181.02 581.857C1179.24 586.375 1178.93 591.342 1180.15 596.045L1290.27 1022.45C1291.8 1028.37 1295.63 1033.44 1300.91 1036.53L1569.7 1194.2C1578.39 1199.3 1589.4 1198.15 1596.84 1191.35Z"
+        opacity={0.101449}
         stroke="url(#paint6_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.115942}
         d="M1548.26 1195.28L1787.62 999.402C1792.36 995.522 1795.36 989.91 1795.95 983.812L1837.83 549.722C1838.3 544.871 1837.22 539.997 1834.74 535.803L1639.43 205.616C1635.07 198.247 1626.98 193.909 1618.43 194.357L1346.66 208.6C1338.11 209.048 1330.52 214.208 1326.95 221.992L1167.23 570.786C1165.2 575.216 1164.63 580.177 1165.6 584.952L1252.63 1012.29C1253.85 1018.29 1257.42 1023.56 1262.54 1026.92L1521.07 1196.71C1529.47 1202.23 1540.48 1201.65 1548.26 1195.28Z"
+        opacity={0.115942}
         stroke="url(#paint7_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.130435}
         d="M1500.08 1197.77L1747.81 1016.5C1752.76 1012.87 1756.06 1007.42 1756.98 1001.35L1821.12 574.324C1821.85 569.489 1821.01 564.548 1818.74 560.219L1642.09 223.641C1638.12 216.071 1630.28 211.33 1621.73 211.33L1351.27 211.33C1342.72 211.33 1334.88 216.071 1330.91 223.641L1154.26 560.219C1151.99 564.548 1151.15 569.489 1151.88 574.324L1216.02 1001.35C1216.94 1007.42 1220.24 1012.87 1225.19 1016.5L1472.92 1197.77C1481.01 1203.69 1491.99 1203.69 1500.08 1197.77Z"
+        opacity={0.130435}
         stroke="url(#paint8_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.144928}
         d="M1452.38 1198.85L1707.62 1032.52C1712.77 1029.16 1716.36 1023.88 1717.59 1017.86L1803.37 599.022C1804.35 594.216 1803.78 589.221 1801.72 584.767L1643.87 242.837C1640.29 235.087 1632.71 229.956 1624.19 229.509L1355.78 215.442C1347.26 214.996 1339.19 219.307 1334.82 226.641L1142.09 550.198C1139.58 554.412 1138.48 559.319 1138.96 564.202L1180.49 989.712C1181.08 995.83 1184.11 1001.45 1188.88 1005.33L1425.32 1197.43C1433.08 1203.73 1444.01 1204.3 1452.38 1198.85Z"
+        opacity={0.144928}
         stroke="url(#paint9_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.15942}
         d="M1405.24 1198.55L1667.09 1047.44C1672.42 1044.37 1676.3 1039.28 1677.85 1033.32L1784.58 623.758C1785.83 618.995 1785.51 613.959 1783.67 609.391L1644.69 263.143C1641.51 255.233 1634.22 249.728 1625.75 248.837L1360.12 220.918C1351.64 220.027 1343.37 223.897 1338.62 230.974L1130.68 540.758C1127.94 544.846 1126.58 549.705 1126.8 554.623L1146.05 977.429C1146.33 983.579 1149.06 989.36 1153.64 993.478L1378.35 1195.73C1385.76 1202.39 1396.61 1203.53 1405.24 1198.55Z"
+        opacity={0.15942}
         stroke="url(#paint10_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.173913}
         d="M1358.71 1196.93L1626.3 1061.28C1631.8 1058.49 1635.95 1053.61 1637.82 1047.73L1764.77 648.476C1766.27 643.768 1766.21 638.704 1764.6 634.032L1644.5 284.496C1641.74 276.448 1634.76 270.584 1626.35 269.253L1364.21 227.734C1355.8 226.402 1347.35 229.821 1342.23 236.621L1120 531.937C1117.03 535.884 1115.41 540.682 1115.38 545.622L1112.74 964.568C1112.7 970.735 1115.14 976.659 1119.51 981.01L1332.08 1192.71C1339.12 1199.72 1349.85 1201.42 1358.71 1196.93Z"
+        opacity={0.173913}
         stroke="url(#paint11_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.188406}
         d="M1312.87 1194.03L1585.3 1074.01C1590.95 1071.52 1595.36 1066.86 1597.54 1061.08L1743.93 673.118C1745.68 668.48 1745.89 663.401 1744.52 658.637L1643.27 306.83C1640.92 298.665 1634.26 292.46 1625.95 290.694L1367.98 235.861C1359.67 234.095 1351.06 237.054 1345.59 243.557L1110 523.767C1106.81 527.561 1104.93 532.285 1104.65 537.233L1080.58 951.2C1080.22 957.366 1082.36 963.417 1086.51 967.991L1286.57 1188.44C1293.22 1195.77 1303.81 1198.02 1312.87 1194.03Z"
+        opacity={0.188406}
         stroke="url(#paint12_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.202899}
         d="M1267.78 1189.9L1544.15 1085.65C1549.94 1083.46 1554.6 1079.04 1557.09 1073.37L1722.09 697.63C1724.09 693.075 1724.56 687.994 1723.42 683.15L1640.93 330.077C1639 321.816 1632.68 315.289 1624.49 313.093L1371.37 245.27C1363.17 243.074 1354.43 245.567 1348.63 251.756L1100.65 516.279C1097.25 519.909 1095.12 524.544 1094.57 529.488L1049.59 937.391C1048.91 943.541 1050.74 949.704 1054.66 954.49L1241.88 1182.96C1248.13 1190.59 1258.55 1193.38 1267.78 1189.9Z"
+        opacity={0.202899}
         stroke="url(#paint13_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.217391}
         d="M1223.51 1184.59L1502.92 1096.19C1508.82 1094.32 1513.73 1090.14 1516.52 1084.61L1699.24 721.958C1701.49 717.499 1702.23 712.43 1701.34 707.517L1637.45 354.167C1635.95 345.833 1629.98 339.002 1621.93 336.385L1374.3 255.925C1366.25 253.308 1357.41 255.329 1351.29 261.186L1091.91 509.503C1088.31 512.956 1085.92 517.488 1085.12 522.416L1019.79 923.211C1018.79 929.327 1020.3 935.588 1023.98 940.573L1198.07 1176.33C1203.91 1184.24 1214.13 1187.56 1223.51 1184.59Z"
+        opacity={0.217391}
         stroke="url(#paint14_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.231884}
         d="M1180.1 1178.17L1461.65 1105.64C1467.66 1104.09 1472.79 1100.18 1475.88 1094.79L1675.42 746.048C1677.91 741.698 1678.91 736.655 1678.27 731.684L1632.8 379.028C1631.72 370.643 1626.13 363.527 1618.23 360.497L1376.72 267.789C1368.83 264.759 1359.91 266.304 1353.49 271.812L1083.73 503.463C1079.93 506.728 1077.3 511.145 1076.24 516.043L991.176 908.728C989.862 914.796 991.056 921.137 994.488 926.31L1155.19 1168.61C1160.61 1176.78 1170.61 1180.61 1180.1 1178.17Z"
+        opacity={0.231884}
         stroke="url(#paint15_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.246377}
         d="M1137.61 1170.69L1420.42 1114.01C1426.52 1112.79 1431.86 1109.15 1435.23 1103.92L1650.64 769.848C1653.37 765.621 1654.63 760.616 1654.24 755.601L1626.94 404.588C1626.29 396.173 1621.08 388.793 1613.37 385.36L1378.57 280.821C1370.86 277.388 1361.89 278.454 1355.2 283.598L1076.08 498.185C1072.09 501.251 1069.21 505.54 1067.9 510.394L963.77 894.014C962.141 900.015 963.011 906.421 966.183 911.77L1113.3 1159.87C1118.29 1168.27 1128.03 1172.61 1137.61 1170.69Z"
+        opacity={0.246377}
         stroke="url(#paint16_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.26087}
         d="M1096.08 1162.21L1379.27 1121.31C1385.44 1120.42 1390.98 1117.07 1394.63 1112.02L1624.92 793.308C1627.88 789.216 1629.41 784.263 1629.27 779.216L1619.85 430.772C1619.62 422.349 1614.8 414.725 1607.3 410.9L1379.78 294.977C1372.28 291.152 1363.28 291.737 1356.33 296.504L1068.89 493.69C1064.73 496.546 1061.62 500.693 1060.05 505.491L937.569 879.136C935.629 885.056 936.173 891.509 939.076 897.021L1072.45 1150.16C1076.98 1158.78 1086.45 1163.6 1096.08 1162.21Z"
+        opacity={0.26087}
         stroke="url(#paint17_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.275362}
         d="M1055.57 1152.8L1338.27 1127.57C1344.49 1127.01 1350.21 1123.95 1354.13 1119.1L1598.29 816.379C1601.47 812.433 1603.26 807.547 1603.38 802.48L1611.49 457.503C1611.69 449.095 1607.28 441.25 1600 437.044L1380.31 310.21C1373.03 306.004 1364.03 306.11 1356.85 310.485L1062.14 489.995C1057.82 492.632 1054.48 496.625 1052.65 501.354L912.574 864.164C910.326 869.986 910.541 876.471 913.168 882.132L1032.67 1139.57C1036.75 1148.37 1045.91 1153.66 1055.57 1152.8Z"
+        opacity={0.275362}
         stroke="url(#paint18_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.289855}
         d="M1016.12 1142.52L1297.47 1132.78C1303.71 1132.57 1309.6 1129.82 1313.78 1125.17L1570.78 839.013C1574.18 835.227 1576.23 830.42 1576.6 825.345L1601.86 484.708C1602.48 476.336 1598.49 468.29 1591.45 463.718L1380.11 326.47C1373.06 321.898 1364.09 321.525 1356.7 325.497L1055.78 487.118C1051.3 489.526 1047.74 493.353 1045.66 497.999L888.779 849.166C886.229 854.875 886.113 861.375 888.456 867.171L993.998 1128.16C997.621 1137.11 1006.46 1142.85 1016.12 1142.52Z"
+        opacity={0.289855}
         stroke="url(#paint19_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.304348}
         d="M977.75 1131.44L1256.91 1136.99C1263.17 1137.12 1269.21 1134.68 1273.64 1130.25L1542.41 861.166C1546.02 857.551 1548.33 852.837 1548.96 847.767L1590.93 512.308C1591.97 503.993 1588.41 495.771 1581.63 490.845L1379.11 343.708C1372.33 338.782 1363.41 337.933 1355.83 341.492L1049.76 485.073C1045.13 487.243 1041.36 490.891 1039.04 495.442L866.177 834.211C863.33 839.79 862.882 846.289 864.935 852.206L956.478 1115.99C959.635 1125.08 968.123 1131.25 977.75 1131.44Z"
+        opacity={0.304348}
         stroke="url(#paint20_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.318841}
         d="M940.505 1119.64L1216.65 1140.21C1222.91 1140.68 1229.09 1138.57 1233.75 1134.37L1513.22 882.793C1517.04 879.361 1519.59 874.752 1520.49 869.701L1578.71 540.227C1580.16 531.991 1577.03 523.614 1570.53 518.351L1377.29 361.867C1370.79 356.604 1361.95 355.284 1354.19 358.42L1044.02 483.87C1039.27 485.793 1035.29 489.251 1032.73 493.694L844.754 819.365C841.617 824.8 840.837 831.28 842.594 837.303L920.134 1103.14C922.82 1112.35 930.939 1118.92 940.505 1119.64Z"
+        opacity={0.318841}
         stroke="url(#paint21_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.333333}
         d="M904.412 1107.17L1176.75 1142.47C1182.98 1143.28 1189.28 1141.5 1194.17 1137.55L1483.25 903.853C1487.26 900.615 1490.06 896.126 1491.21 891.105L1565.17 568.39C1567.04 560.253 1564.35 551.745 1558.14 546.159L1374.6 380.894C1368.39 375.308 1359.65 373.522 1351.75 376.227L1038.54 483.517C1033.66 485.186 1029.49 488.443 1026.69 492.766L824.495 804.694C821.076 809.969 819.964 816.413 821.42 822.529L884.993 1089.69C887.205 1098.98 894.935 1105.94 904.412 1107.17Z"
+        opacity={0.333333}
         stroke="url(#paint22_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.347826}
         d="M869.493 1094.12L1137.24 1143.8C1143.44 1144.94 1149.83 1143.5 1154.93 1139.81L1452.53 924.308C1456.72 921.274 1459.76 916.916 1461.17 911.939L1550.33 596.718C1552.6 588.701 1550.35 580.085 1544.46 574.195L1371 400.729C1365.1 394.838 1356.49 392.593 1348.47 394.861L1033.25 484.022C1028.27 485.43 1023.92 488.474 1020.88 492.664L805.38 790.261C801.686 795.362 800.246 801.754 801.394 807.947L851.075 1075.7C852.811 1085.06 860.134 1092.38 869.493 1094.12Z"
+        opacity={0.347826}
         stroke="url(#paint23_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.362319}
         d="M835.768 1080.54L1098.18 1144.22C1104.31 1145.71 1110.79 1144.61 1116.08 1141.19L1421.09 944.119C1425.45 941.3 1428.74 937.087 1430.4 932.166L1534.18 625.137C1536.84 617.261 1535.05 608.561 1529.49 602.382L1366.45 421.315C1360.89 415.136 1352.42 412.441 1344.31 414.265L1028.12 485.386C1023.05 486.526 1018.52 489.348 1015.26 493.393L787.386 776.13C783.426 781.043 781.659 787.366 782.498 793.62L818.396 1061.25C819.656 1070.65 826.554 1078.31 835.768 1080.54Z"
+        opacity={0.362319}
         stroke="url(#paint24_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.376812}
         d="M803.253 1066.53L1059.6 1143.78C1065.65 1145.6 1072.19 1144.85 1077.68 1141.71L1388.99 963.254C1393.51 960.659 1397.02 956.603 1398.94 951.751L1516.74 653.573C1519.79 645.856 1518.44 637.096 1513.22 630.648L1360.93 442.59C1355.71 436.142 1347.42 433.006 1339.24 434.384L1023.09 487.612C1017.94 488.478 1013.25 491.068 1009.77 494.956L770.486 762.361C766.27 767.072 764.18 773.31 764.705 779.61L786.969 1046.42C787.754 1055.83 794.211 1063.8 803.253 1066.53Z"
+        opacity={0.376812}
         stroke="url(#paint25_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.391304}
         d="M771.959 1052.14L1021.55 1142.5C1027.51 1144.66 1034.09 1144.26 1039.74 1141.41L1356.25 981.679C1360.93 979.318 1364.66 975.431 1366.83 970.66L1498.01 681.95C1501.43 674.412 1500.54 665.615 1495.67 658.917L1354.42 464.494C1349.55 457.795 1341.46 454.23 1333.23 455.157L1018.12 490.697C1012.91 491.285 1008.06 493.632 1004.37 497.352L754.651 749.013C750.19 753.509 747.78 759.646 747.99 765.977L756.801 1031.28C757.113 1040.68 763.116 1048.94 771.959 1052.14Z"
+        opacity={0.391304}
         stroke="url(#paint26_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.405797}
         d="M741.893 1037.45L984.066 1140.43C989.906 1142.91 996.513 1142.87 1002.32 1140.32L1322.94 999.366C1327.75 997.247 1331.7 993.54 1334.12 988.863L1478.01 710.198C1481.8 702.857 1481.36 694.047 1476.86 687.118L1346.88 486.963C1342.38 480.034 1334.51 476.051 1326.26 476.528L1013.16 494.638C1007.91 494.942 1002.92 497.039 999.02 500.579L739.848 736.143C735.152 740.412 732.428 746.431 732.321 752.776L727.897 1015.9C727.739 1025.26 733.275 1033.79 741.893 1037.45Z"
+        opacity={0.405797}
         stroke="url(#paint27_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.42029}
         d="M713.058 1022.53L947.183 1137.6C952.89 1140.41 959.503 1140.72 965.452 1138.48L1289.08 1016.29C1294.03 1014.42 1298.18 1010.9 1300.84 1006.33L1456.76 738.244C1460.91 731.118 1460.92 722.32 1456.8 715.181L1338.3 509.936C1334.18 502.797 1326.55 498.409 1318.31 498.436L1008.17 499.427C1002.89 499.444 997.766 501.282 993.675 504.632L726.041 723.805C721.121 727.834 718.089 733.72 717.665 740.065L700.254 1000.36C699.631 1009.66 704.689 1018.42 713.058 1022.53Z"
+        opacity={0.42029}
         stroke="url(#paint28_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.434783}
         d="M685.452 1007.46L910.935 1134.06C916.491 1137.18 923.092 1137.85 929.164 1135.92L1254.73 1032.42C1259.79 1030.81 1264.14 1027.5 1267.04 1023.04L1434.29 766.021C1438.78 759.127 1439.24 750.363 1435.51 743.034L1328.66 533.348C1324.93 526.019 1317.57 521.243 1309.35 520.82L1003.11 505.056C997.805 504.783 992.569 506.355 988.291 509.504L713.191 712.052C708.06 715.83 704.726 721.567 703.984 727.895L673.868 984.728C672.787 993.949 677.356 1002.92 685.452 1007.46Z"
+        opacity={0.434783}
         stroke="url(#paint29_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.449275}
         d="M659.069 992.303L875.354 1129.84C880.741 1133.27 887.31 1134.3 893.489 1132.69L1219.93 1047.74C1225.1 1046.39 1229.63 1043.29 1232.77 1038.97L1410.62 793.46C1415.44 786.815 1416.34 778.108 1413.01 770.612L1317.96 557.136C1314.62 549.64 1307.55 544.489 1299.39 543.62L997.926 511.514C992.619 510.948 987.28 512.247 982.825 515.186L701.256 700.933C695.927 704.449 692.299 710.021 691.24 716.317L648.73 969.08C647.197 978.196 651.27 987.343 659.069 992.303Z"
+        opacity={0.449275}
         stroke="url(#paint30_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.463768}
         d="M633.902 977.128L840.467 1125C845.669 1128.72 852.187 1130.11 858.455 1128.83L1184.74 1062.23C1189.99 1061.15 1194.71 1058.28 1198.07 1054.1L1385.79 820.497C1390.92 814.116 1392.26 805.49 1389.33 797.847L1306.18 581.237C1303.25 573.594 1296.47 568.087 1288.39 566.776L992.579 518.786C987.285 517.928 981.858 518.946 977.235 521.664L690.194 690.494C684.679 693.738 680.765 699.131 679.391 705.379L624.826 953.486C622.85 962.473 626.42 971.772 633.902 977.128Z"
+        opacity={0.463768}
         stroke="url(#paint31_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.478261}
         d="M609.935 962.006L806.3 1119.56C811.3 1123.58 817.748 1125.32 824.088 1124.37L1149.19 1075.87C1154.52 1075.07 1159.41 1072.43 1162.99 1068.41L1359.82 847.07C1365.25 840.967 1367.03 832.445 1364.51 824.678L1293.32 605.587C1290.8 597.82 1284.35 591.974 1276.37 590.226L987.027 526.858C981.763 525.705 976.261 526.438 971.482 528.927L679.956 680.78C674.271 683.741 670.079 688.941 668.392 695.126L602.14 938.014C599.729 946.85 602.791 956.274 609.935 962.006Z"
+        opacity={0.478261}
         stroke="url(#paint32_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.492754}
         d="M587.152 947.002L772.877 1113.59C777.659 1117.88 784.017 1119.97 790.412 1119.37L1113.35 1088.65C1118.74 1088.14 1123.78 1085.74 1127.58 1081.88L1332.77 873.117C1338.48 867.308 1340.69 858.911 1338.58 851.042L1279.38 630.123C1277.28 622.254 1271.16 616.088 1263.31 613.912L981.231 535.712C976.012 534.265 970.45 534.707 965.524 536.958L670.495 671.831C664.653 674.501 660.194 679.494 658.197 685.599L580.649 922.732C577.816 931.396 580.367 940.916 587.152 947.002Z"
+        opacity={0.492754}
         stroke="url(#paint33_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.507246}
         d="M565.533 932.184L740.217 1107.12C744.766 1111.68 751.015 1114.12 757.447 1113.85L1077.26 1100.57C1082.7 1100.34 1087.88 1098.2 1091.88 1094.51L1304.66 898.583C1310.64 893.079 1313.27 884.83 1311.58 876.882L1264.37 654.783C1262.68 646.835 1256.92 640.368 1249.22 637.771L975.151 545.328C969.993 543.588 964.385 543.734 959.325 545.74L661.761 663.684C655.776 666.056 651.06 670.827 648.757 676.839L560.33 907.705C557.085 916.177 559.123 925.764 565.533 932.184Z"
+        opacity={0.507246}
         stroke="url(#paint34_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.521739}
         d="M545.053 917.613L708.338 1100.21C712.639 1105.02 718.761 1107.8 725.211 1107.88L1040.96 1111.61C1046.44 1111.67 1051.75 1109.79 1055.95 1106.28L1275.54 923.413C1281.77 918.227 1284.81 910.146 1283.54 902.141L1248.28 679.506C1247.01 671.501 1241.63 664.755 1234.1 661.747L968.748 555.683C963.668 553.652 958.029 553.499 952.846 555.251L653.701 656.375C647.589 658.441 642.627 662.978 640.023 668.881L541.154 892.998C537.51 901.257 539.035 910.884 545.053 917.613Z"
+        opacity={0.521739}
         stroke="url(#paint35_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.536232}
         d="M525.683 903.351L677.255 1092.89C681.292 1097.94 687.268 1101.06 693.72 1101.48L1004.52 1121.77C1010.01 1122.12 1015.45 1120.5 1019.84 1117.2L1245.47 947.555C1251.93 942.698 1255.37 934.806 1254.52 926.768L1231.13 704.231C1230.29 696.193 1225.29 689.188 1217.96 685.78L961.988 566.755C957 564.436 951.347 563.981 946.053 565.473L646.26 649.935C640.038 651.688 634.84 655.979 631.941 661.757L523.089 878.671C519.061 886.698 520.074 896.336 525.683 903.351Z"
+        opacity={0.536232}
         stroke="url(#paint36_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.550725}
         d="M507.394 889.457L646.979 1085.22C650.74 1090.5 656.552 1093.94 662.985 1094.71L967.979 1131.04C973.47 1131.69 979.013 1130.35 983.592 1127.25L1214.49 970.962C1221.16 966.444 1224.99 958.761 1224.56 950.711L1212.94 728.9C1212.52 720.85 1207.91 713.609 1200.8 709.813L954.834 578.518C949.956 575.914 944.303 575.155 938.91 576.379L639.385 644.391C633.067 645.826 627.647 649.859 624.458 655.498L506.101 864.783C501.702 872.56 502.206 882.182 507.394 889.457Z"
+        opacity={0.550725}
         stroke="url(#paint37_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.565217}
         d="M490.151 875.989L617.519 1077.25C620.991 1082.74 626.621 1086.5 633.018 1087.61L931.387 1139.43C936.864 1140.38 942.501 1139.32 947.255 1136.43L1182.65 993.588C1189.52 989.418 1193.71 981.963 1193.71 973.925V753.454C1193.71 745.416 1189.52 737.961 1182.65 733.791L947.255 590.945C942.501 588.061 936.864 586.996 931.387 587.947L633.018 639.769C626.621 640.88 620.991 644.643 617.519 650.13L490.151 851.39C485.397 858.901 485.397 868.478 490.151 875.989Z"
+        opacity={0.565217}
         stroke="url(#paint38_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.57971}
         d="M473.917 863L588.882 1069.02C592.053 1074.7 597.483 1078.77 603.826 1080.23L894.794 1146.95C900.243 1148.2 905.961 1147.42 910.878 1144.76L1150 1015.39C1157.05 1011.58 1161.61 1004.37 1162.03 996.367L1173.48 777.838C1173.9 769.834 1170.12 762.189 1163.51 757.66L939.218 604.008C934.606 600.848 929 599.477 923.45 600.15L627.103 636.089C620.642 636.872 614.816 640.356 611.069 645.676L475.198 838.547C470.107 845.774 469.608 855.28 473.917 863Z"
+        opacity={0.57971}
         stroke="url(#paint39_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.594203}
         d="M458.651 850.542L561.072 1060.57C563.93 1066.44 569.144 1070.81 575.414 1072.6L858.249 1153.59C863.655 1155.14 869.439 1154.65 874.511 1152.22L1116.61 1036.34C1123.82 1032.89 1128.72 1025.94 1129.56 1018L1152.26 801.997C1153.09 794.05 1149.74 786.239 1143.41 781.365L930.694 617.676C926.238 614.247 920.681 612.569 915.072 612.959L621.579 633.369C615.073 633.821 609.064 637.015 605.049 642.155L461.199 826.302C455.786 833.231 454.798 842.64 458.651 850.542Z"
+        opacity={0.594203}
         stroke="url(#paint40_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.608696}
         d="M444.313 838.664L534.089 1051.97C536.625 1057.99 541.604 1062.65 547.783 1064.79L821.802 1159.37C827.147 1161.21 832.985 1161.03 838.2 1158.84L1082.53 1056.39C1089.88 1053.31 1095.11 1046.64 1096.36 1038.78L1130.07 825.88C1131.32 818.011 1128.41 810.058 1122.37 804.857L921.656 631.918C917.372 628.227 911.878 626.244 906.224 626.346L616.39 631.623C609.854 631.742 603.678 634.637 599.404 639.583L448.108 814.705C442.392 821.321 440.921 830.605 444.313 838.664Z"
+        opacity={0.608696}
         stroke="url(#paint41_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.623188}
         d="M430.857 827.41L507.932 1043.24C510.135 1049.41 514.865 1054.35 520.935 1056.82L785.498 1164.3C790.768 1166.44 796.644 1166.55 801.992 1164.61L1047.82 1075.52C1055.29 1072.81 1060.83 1066.44 1062.48 1058.67L1106.96 849.435C1108.61 841.666 1106.14 833.596 1100.42 828.086L912.077 646.702C907.98 642.756 902.566 640.469 896.881 640.281L611.475 630.863C604.927 630.646 598.597 633.233 594.075 637.974L435.875 803.799C429.875 810.089 427.933 819.224 430.857 827.41Z"
+        opacity={0.623188}
         stroke="url(#paint42_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.637681}
         d="M418.235 816.824L482.596 1034.45C484.458 1040.75 488.924 1045.95 494.866 1048.74L749.385 1168.39C754.563 1170.83 760.463 1171.24 765.933 1169.56L1012.54 1093.69C1020.11 1091.36 1025.95 1085.31 1028 1077.66L1082.94 872.614C1084.99 864.968 1082.96 856.805 1077.57 851.005L901.935 661.994C898.04 657.802 892.722 655.213 887.02 654.732L606.775 631.094C600.231 630.542 593.764 632.813 589.002 637.335L424.452 793.625C418.186 799.576 415.785 808.537 418.235 816.824Z"
+        opacity={0.637681}
         stroke="url(#paint43_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.652174}
         d="M406.4 806.945L458.075 1025.63C459.588 1032.04 463.774 1037.49 469.572 1040.6L713.507 1171.67C718.578 1174.39 724.488 1175.12 730.067 1173.7L976.757 1110.89C984.404 1108.95 990.519 1103.22 992.957 1095.71L1058.05 895.373C1060.49 887.869 1058.91 879.639 1053.87 873.569L891.207 677.759C887.528 673.33 882.322 670.442 876.617 669.666L602.231 632.32C595.709 631.432 589.119 633.382 584.129 637.674L413.784 784.22C407.272 789.822 404.425 798.586 406.4 806.945Z"
+        opacity={0.652174}
         stroke="url(#paint44_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.666667}
         d="M395.3 797.809L434.359 1016.83C435.517 1023.32 439.409 1029.01 445.045 1032.44L677.909 1174.14C682.858 1177.16 688.761 1178.19 694.439 1177.04L940.526 1127.1C948.233 1125.54 954.607 1120.15 957.425 1112.8L1032.33 917.668C1035.15 910.327 1034.02 902.054 1029.34 895.735L879.874 693.962C876.426 689.306 871.347 686.124 865.654 685.051L597.784 634.542C591.3 633.32 584.604 634.94 579.397 638.992L403.818 775.62C397.081 780.862 393.801 789.405 395.3 797.809Z"
+        opacity={0.666667}
         stroke="url(#paint45_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.681159}
         d="M384.883 789.449L411.437 1008.09C412.235 1014.65 415.819 1020.56 421.276 1024.29L642.633 1175.84C647.444 1179.14 653.326 1180.48 659.09 1179.6L903.913 1142.3C911.661 1141.12 918.274 1136.08 921.461 1128.92L1005.82 939.458C1009 932.299 1008.33 924.01 1004.02 917.463L867.918 710.566C864.714 705.695 859.779 702.223 854.112 700.851L593.374 637.757C586.946 636.201 580.16 637.488 574.748 641.288L394.498 767.853C387.556 772.728 383.86 781.028 384.883 789.449Z"
+        opacity={0.681159}
         stroke="url(#paint46_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.695652}
         d="M375.095 781.894L389.295 999.453C389.727 1006.07 392.992 1012.18 398.253 1016.21L607.72 1176.79C612.377 1180.36 618.223 1182.01 624.061 1181.41L866.982 1156.48C874.75 1155.69 881.583 1151 885.127 1144.05L978.544 960.705C982.089 953.748 981.862 945.467 977.941 938.715L855.323 727.535C852.377 722.46 847.601 718.703 841.975 717.034L588.944 641.957C582.589 640.071 575.729 641.019 570.123 644.558L385.768 760.948C378.641 765.447 374.546 773.484 375.095 781.894Z"
+        opacity={0.695652}
         stroke="url(#paint47_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.710145}
         d="M365.882 775.17L367.917 990.962C367.98 997.607 370.914 1003.9 375.963 1008.22L573.21 1177C577.699 1180.84 583.493 1182.81 589.392 1182.49L829.796 1169.64C837.565 1169.22 844.597 1164.91 848.487 1158.17L950.56 981.375C954.45 974.637 954.67 966.39 951.146 959.455L842.077 744.831C839.401 739.564 834.801 735.529 829.231 733.563L584.437 647.132C578.171 644.92 571.254 645.526 565.468 648.794L377.569 754.927C370.279 759.045 365.803 766.798 365.882 775.17Z"
+        opacity={0.710145}
         stroke="url(#paint48_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.724638}
         d="M357.187 769.299L347.285 982.654C346.976 989.308 349.567 995.77 354.389 1000.37L539.141 1176.52C543.446 1180.62 549.173 1182.9 555.12 1182.87L792.419 1181.76C800.169 1181.73 807.38 1177.79 811.601 1171.29L921.906 1001.43C926.127 994.934 926.79 986.746 923.671 979.651L828.168 762.416C825.775 756.971 821.365 752.665 815.865 750.402L579.796 653.27C573.635 650.736 566.679 650.996 560.725 653.985L369.843 749.81C362.411 753.541 357.572 760.993 357.187 769.299Z"
+        opacity={0.724638}
         stroke="url(#paint49_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.73913}
         d="M348.954 764.3L327.378 974.569C326.696 981.212 328.935 987.823 333.513 992.685L505.549 1175.37C509.654 1179.73 515.299 1182.31 521.282 1182.58L754.914 1192.85C762.626 1193.19 769.994 1189.64 774.532 1183.4L892.625 1020.85C897.163 1014.61 898.264 1006.5 895.559 999.273L813.588 780.252C811.489 774.643 807.284 770.074 801.869 767.517L574.966 660.354C568.927 657.502 561.948 657.415 555.84 660.117L362.531 745.613C354.979 748.953 349.797 756.086 348.954 764.3Z"
+        opacity={0.73913}
         stroke="url(#paint50_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.753623}
         d="M341.126 760.188L308.174 966.741C307.119 973.352 308.997 980.094 313.318 985.208L472.466 1173.58C476.359 1178.18 481.905 1181.08 487.911 1181.64L717.343 1202.92C724.998 1203.63 732.503 1200.47 737.342 1194.49L862.765 1039.61C867.604 1033.63 869.136 1025.64 866.85 1018.29L798.328 798.302C796.535 792.543 792.551 787.72 787.235 784.87L569.893 668.364C563.993 665.201 557.008 664.766 550.76 667.172L355.572 742.349C347.922 745.295 342.418 752.092 341.126 760.188Z"
+        opacity={0.753623}
         stroke="url(#paint51_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.768116}
         d="M333.646 756.975L289.649 959.206C288.222 965.764 289.731 972.618 293.78 977.971L439.927 1171.18C443.592 1176.03 449.024 1179.23 455.039 1180.08L679.767 1211.97C687.348 1213.04 694.967 1210.28 700.091 1204.59L832.371 1057.67C837.495 1051.98 839.45 1044.12 837.588 1036.69L782.385 816.526C780.908 810.633 777.159 805.565 771.958 802.426L564.526 677.277C558.78 673.81 551.806 673.025 545.433 675.13L348.908 740.024C341.18 742.576 335.376 749.022 333.646 756.975Z"
+        opacity={0.768116}
         stroke="url(#paint52_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.782609}
         d="M326.456 754.669L271.778 951.997C269.982 958.481 271.114 965.427 274.878 971.004L407.959 1168.22C411.383 1173.3 416.686 1176.79 422.697 1177.95L642.249 1220.01C649.737 1221.44 657.449 1219.07 662.84 1213.68L801.492 1075.03C806.883 1069.64 809.252 1061.93 807.817 1054.44L765.756 834.887C764.605 828.876 761.105 823.572 756.032 820.149L558.814 687.068C553.237 683.304 546.291 682.171 539.807 683.968L342.479 738.646C334.695 740.802 328.613 746.885 326.456 754.669Z"
+        opacity={0.782609}
         stroke="url(#paint53_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.797101}
         d="M319.499 753.274L254.534 945.144C252.371 951.533 253.121 958.55 256.587 964.337L376.592 1164.73C379.76 1170.02 384.92 1173.82 390.913 1175.27L604.847 1227.05C612.224 1228.84 620.007 1226.87 625.648 1221.79L770.175 1091.66C775.816 1086.58 778.587 1079.04 777.583 1071.52L748.441 853.346C747.624 847.234 744.388 841.706 739.458 838.002L552.708 697.708C547.315 693.657 540.415 692.177 533.835 693.66L336.225 738.213C328.407 739.976 322.069 745.682 319.499 753.274Z"
+        opacity={0.797101}
         stroke="url(#paint54_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.811594}
         d="M312.718 752.792L237.888 938.677C235.362 944.95 235.726 952.017 238.882 957.999L345.85 1160.74C348.75 1166.24 353.75 1170.33 359.712 1172.08L567.619 1233.12C574.868 1235.25 582.701 1233.69 588.573 1228.93L738.47 1107.55C744.341 1102.79 747.503 1095.46 746.928 1087.92L730.44 871.867C729.967 865.671 727.007 859.93 722.234 855.951L546.163 709.167C540.968 704.837 534.131 703.012 527.47 704.178L330.089 738.725C322.256 740.096 315.687 745.416 312.718 752.792Z"
+        opacity={0.811594}
         stroke="url(#paint55_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.826087}
         d="M306.057 753.22L221.81 932.622C218.928 938.759 218.901 945.855 221.735 952.014L315.756 1156.3C318.375 1161.99 323.201 1166.36 329.119 1168.41L530.622 1238.24C537.727 1240.71 545.588 1239.54 551.672 1235.12L706.424 1122.68C712.508 1118.26 716.047 1111.15 715.901 1103.63L711.758 890.411C711.636 884.149 708.966 878.207 704.364 873.959L539.132 721.412C534.15 716.813 527.393 714.646 520.666 715.49L324.011 740.176C316.186 741.158 309.409 746.081 306.057 753.22Z"
+        opacity={0.826087}
         stroke="url(#paint56_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.84058}
         d="M299.46 754.553L206.269 927.004C203.037 932.985 202.616 940.088 205.12 946.409L286.332 1151.44C288.657 1157.31 293.294 1161.97 299.154 1164.32L493.91 1242.43C500.856 1245.22 508.723 1244.45 514.999 1240.38L674.088 1137.06C680.364 1132.99 684.265 1126.11 684.545 1118.63L692.399 908.942C692.636 902.633 690.268 896.503 685.851 891.991L531.575 734.406C526.82 729.548 520.159 727.043 513.381 727.563L317.935 742.555C310.137 743.153 303.178 747.673 299.46 754.553Z"
+        opacity={0.84058}
         stroke="url(#paint57_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.855072}
         d="M292.872 756.782L191.233 921.847C187.66 927.65 186.844 934.74 189.007 941.203L257.596 1146.21C259.616 1152.25 264.048 1157.18 269.837 1159.83L457.537 1245.72C464.308 1248.82 472.159 1248.45 478.608 1244.73L641.51 1150.67C647.959 1146.95 652.206 1140.34 652.908 1132.92L672.373 927.424C672.973 921.086 670.919 914.783 666.701 910.015L523.453 748.111C518.936 743.006 512.389 740.168 505.576 740.361L311.806 745.85C304.056 746.07 296.938 750.18 292.872 756.782Z"
+        opacity={0.855072}
         stroke="url(#paint58_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.869565}
         d="M286.241 759.894L176.67 917.17C172.763 922.777 171.553 929.831 173.366 936.419L229.562 1140.65C231.266 1146.84 235.479 1152.04 241.184 1154.98L421.553 1248.14C428.134 1251.54 435.949 1251.56 442.549 1248.2L608.739 1163.52C615.339 1160.16 619.915 1153.82 621.034 1146.5L651.687 945.822C652.656 939.475 650.928 933.012 646.921 927.995L514.727 762.487C510.462 757.148 504.044 753.981 497.211 753.846L305.568 750.046C297.885 749.894 290.633 753.589 286.241 759.894Z"
+        opacity={0.869565}
         stroke="url(#paint59_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.884058}
         d="M279.513 763.875L162.544 912.993C158.316 918.384 156.711 925.379 158.166 932.075L202.246 1134.8C203.622 1141.13 207.602 1146.58 213.209 1149.83L386.006 1249.72C392.384 1253.41 400.142 1253.82 406.872 1250.82L575.823 1175.6C582.553 1172.61 587.44 1166.57 588.968 1159.36L630.353 964.101C631.695 957.766 630.305 951.158 626.523 945.9L505.363 777.493C501.361 771.931 495.089 768.443 488.253 767.978L299.17 755.123C291.572 754.606 284.212 757.883 279.513 763.875Z"
+        opacity={0.884058}
         stroke="url(#paint60_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.898551}
         d="M272.637 768.705L148.823 909.331C144.284 914.487 142.286 921.403 143.378 928.185L175.657 1128.7C176.696 1135.16 180.429 1140.86 185.925 1144.39L350.942 1250.51C357.104 1254.47 364.785 1255.26 371.624 1252.63L542.808 1186.92C549.648 1184.3 554.827 1178.57 556.755 1171.5L608.384 982.228C610.103 975.924 609.06 969.186 605.515 963.697L495.33 793.084C491.603 787.313 485.491 783.51 478.668 782.716L292.559 761.058C285.066 760.186 277.622 763.044 272.637 768.705Z"
+        opacity={0.898551}
         stroke="url(#paint61_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.913043}
         d="M265.566 774.365L135.471 906.199C130.633 911.102 128.247 917.916 128.969 924.766L149.805 1122.41C150.496 1128.96 153.969 1134.91 159.341 1138.73L316.403 1250.53C322.337 1254.75 329.921 1255.91 336.848 1253.66L509.743 1197.49C516.67 1195.24 522.121 1189.84 524.439 1182.93L585.794 1000.17C587.893 993.918 587.208 987.067 583.912 981.356L484.599 809.215C481.157 803.248 475.222 799.139 468.426 798.016L285.686 767.827C278.316 766.61 270.813 769.048 265.566 774.365Z"
+        opacity={0.913043}
         stroke="url(#paint62_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.927536}
         d="M258.252 780.829L122.453 903.609C117.33 908.241 114.56 914.93 114.907 921.828L124.695 1115.95C125.03 1122.6 128.228 1128.77 133.463 1132.88L282.432 1249.83C288.127 1254.3 295.594 1255.83 302.587 1253.95L476.671 1207.31C483.664 1205.43 489.367 1200.38 492.064 1193.66L562.601 1017.89C565.08 1011.72 564.762 1004.77 561.728 998.846L473.144 825.839C469.996 819.691 464.253 815.284 457.5 813.834L278.505 775.402C271.274 773.85 263.737 775.869 258.252 780.829Z"
+        opacity={0.927536}
         stroke="url(#paint63_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.942029}
         d="M250.648 788.072L109.733 901.571C104.34 905.915 101.191 912.458 101.161 919.383L100.33 1109.38C100.301 1116.1 103.211 1122.49 108.297 1126.88L249.065 1248.45C254.51 1253.15 261.842 1255.04 268.879 1253.54L443.639 1216.4C450.676 1214.9 456.608 1210.2 459.67 1203.69L538.822 1035.37C541.681 1029.29 541.739 1022.26 538.979 1016.14L460.942 842.909C458.098 836.595 452.56 831.898 445.866 830.124L270.97 783.753C263.895 781.877 256.349 783.481 250.648 788.072Z"
+        opacity={0.942029}
         stroke="url(#paint64_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.956522}
         d="M242.713 796.065L97.2767 900.091C91.629 904.131 88.1086 910.506 87.6976 917.437L76.7116 1102.73C76.31 1109.51 78.9201 1116.11 83.8436 1120.78L216.336 1246.44C221.522 1251.36 228.701 1253.59 235.762 1252.47L410.688 1224.77C417.748 1223.65 423.887 1219.31 427.3 1213.03L514.476 1052.58C517.715 1046.61 518.156 1039.52 515.681 1033.21L447.974 860.375C445.441 853.91 440.123 848.935 433.503 846.838L263.039 792.846C256.135 790.659 248.604 791.852 242.713 796.065Z"
+        opacity={0.956522}
         stroke="url(#paint65_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.971014}
         d="M234.406 804.776L85.0473 899.176C79.162 902.895 75.2784 909.081 74.4852 915.998L53.8381 1096.06C53.0572 1102.87 55.3543 1109.67 60.1034 1114.61L184.278 1243.85C189.197 1248.97 196.205 1251.53 203.267 1250.79L377.861 1232.44C384.922 1231.7 391.245 1227.73 394.992 1221.7L489.583 1069.47C493.201 1063.65 494.034 1056.52 491.854 1050.02L434.221 878.188C432.007 871.587 426.923 866.344 420.392 863.93L254.671 802.646C247.953 800.161 240.461 800.949 234.406 804.776Z"
+        opacity={0.971014}
         stroke="url(#paint66_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
       />
       <path
-        opacity={0.985507}
         d="M225.687 814.171L73.0102 898.827C66.905 902.213 62.6677 908.187 61.492 915.069L31.7056 1089.4C30.5392 1096.23 32.5111 1103.22 37.0736 1108.43L152.918 1240.72C157.563 1246.02 164.384 1248.9 171.425 1248.53L345.197 1239.43C352.238 1239.06 358.721 1235.48 362.786 1229.72L464.168 1086.04C468.16 1080.38 469.391 1073.23 467.517 1066.56L419.672 896.297C417.783 889.577 412.944 884.078 406.519 881.349L245.83 813.115C239.311 810.347 231.88 810.737 225.687 814.171Z"
+        opacity={0.985507}
         stroke="url(#paint67_linear_413_99)"
         strokeOpacity={0.2}
         strokeWidth={4}
@@ -510,760 +510,760 @@ const LooperBG: React.FC<Props> = ({ width, height, ...props }) => {
       />
       <defs>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint0_linear_413_99"
           x1={1884.92}
-          y1={1153.21}
           x2={1406.8}
+          y1={1153.21}
           y2={79.352}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint1_linear_413_99"
           x1={1834.72}
-          y1={1165.9}
           x2={1417.18}
+          y1={1165.9}
           y2={78.1689}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint2_linear_413_99"
           x1={1784.47}
-          y1={1176.95}
           x2={1427.63}
+          y1={1176.95}
           y2={78.732}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint3_linear_413_99"
           x1={1734.24}
-          y1={1186.4}
           x2={1438.06}
+          y1={1186.4}
           y2={81.0285}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint4_linear_413_99"
           x1={1684.12}
-          y1={1194.25}
           x2={1448.35}
+          y1={1194.25}
           y2={85.0403}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint5_linear_413_99"
           x1={1634.21}
-          y1={1200.52}
           x2={1458.44}
+          y1={1200.52}
           y2={90.744}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint6_linear_413_99"
           x1={1584.58}
-          y1={1205.25}
           x2={1468.21}
+          y1={1205.25}
           y2={98.1118}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint7_linear_413_99"
           x1={1535.32}
-          y1={1208.46}
           x2={1477.6}
+          y1={1208.46}
           y2={107.11}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint8_linear_413_99"
           x1={1486.5}
-          y1={1210.19}
           x2={1486.5}
+          y1={1210.19}
           y2={117.702}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint9_linear_413_99"
           x1={1438.21}
-          y1={1210.48}
           x2={1494.84}
+          y1={1210.48}
           y2={129.846}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint10_linear_413_99"
           x1={1390.51}
-          y1={1209.36}
           x2={1502.54}
+          y1={1209.36}
           y2={143.494}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint11_linear_413_99"
           x1={1343.48}
-          y1={1206.89}
           x2={1509.52}
+          y1={1206.89}
           y2={158.597}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint12_linear_413_99"
           x1={1297.19}
-          y1={1203.12}
           x2={1515.71}
+          y1={1203.12}
           y2={175.101}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint13_linear_413_99"
           x1={1251.7}
-          y1={1198.1}
           x2={1521.03}
+          y1={1198.1}
           y2={192.947}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint14_linear_413_99"
           x1={1207.07}
-          y1={1191.89}
           x2={1525.43}
+          y1={1191.89}
           y2={212.075}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint15_linear_413_99"
           x1={1163.36}
-          y1={1184.54}
           x2={1528.85}
+          y1={1184.54}
           y2={232.421}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint16_linear_413_99"
           x1={1120.62}
-          y1={1176.13}
           x2={1531.22}
+          y1={1176.13}
           y2={253.917}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint17_linear_413_99"
           x1={1078.9}
-          y1={1166.71}
           x2={1532.49}
+          y1={1166.71}
           y2={276.494}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint18_linear_413_99"
           x1={1038.25}
-          y1={1156.35}
           x2={1532.62}
+          y1={1156.35}
           y2={300.079}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint19_linear_413_99"
           x1={998.703}
-          y1={1145.12}
           x2={1531.56}
+          y1={1145.12}
           y2={324.599}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint20_linear_413_99"
           x1={960.298}
-          y1={1133.1}
           x2={1529.27}
+          y1={1133.1}
           y2={349.978}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint21_linear_413_99"
           x1={923.069}
-          y1={1120.34}
           x2={1525.71}
+          y1={1120.34}
           y2={376.138}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint22_linear_413_99"
           x1={887.042}
-          y1={1106.94}
           x2={1520.87}
+          y1={1106.94}
           y2={403.001}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint23_linear_413_99"
           x1={852.241}
-          y1={1092.95}
           x2={1514.7}
+          y1={1092.95}
           y2={430.487}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint24_linear_413_99"
           x1={818.686}
-          y1={1078.46}
           x2={1507.2}
+          y1={1078.46}
           y2={458.515}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint25_linear_413_99"
           x1={786.39}
-          y1={1063.53}
           x2={1498.34}
+          y1={1063.53}
           y2={487.006}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint26_linear_413_99"
           x1={755.364}
-          y1={1048.26}
           x2={1488.12}
+          y1={1048.26}
           y2={515.879}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint27_linear_413_99"
           x1={725.614}
-          y1={1032.7}
           x2={1476.53}
+          y1={1032.7}
           y2={545.052}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint28_linear_413_99"
           x1={697.14}
-          y1={1016.94}
           x2={1463.56}
+          y1={1016.94}
           y2={574.446}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint29_linear_413_99"
           x1={669.941}
-          y1={1001.05}
           x2={1449.23}
+          y1={1001.05}
           y2={603.981}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint30_linear_413_99"
           x1={644.008}
-          y1={985.096}
           x2={1433.53}
+          y1={985.096}
           y2={633.579}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint31_linear_413_99"
           x1={619.332}
-          y1={969.158}
           x2={1416.48}
+          y1={969.158}
           y2={663.161}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint32_linear_413_99"
           x1={595.896}
-          y1={953.305}
           x2={1398.1}
+          y1={953.305}
           y2={692.653}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint33_linear_413_99"
           x1={573.681}
-          y1={937.606}
           x2={1378.41}
+          y1={937.606}
           y2={721.98}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint34_linear_413_99"
           x1={552.664}
-          y1={922.127}
           x2={1357.42}
+          y1={922.127}
           y2={751.07}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint35_linear_413_99"
           x1={532.82}
-          y1={906.934}
           x2={1335.18}
+          y1={906.934}
           y2={779.852}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint36_linear_413_99"
           x1={514.117}
-          y1={892.09}
           x2={1311.71}
+          y1={892.09}
           y2={808.26}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint37_linear_413_99"
           x1={496.523}
-          y1={877.656}
           x2={1287.05}
+          y1={877.656}
           y2={836.226}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint38_linear_413_99"
           x1={480}
-          y1={863.69}
           x2={1261.24}
+          y1={863.69}
           y2={863.69}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint39_linear_413_99"
           x1={464.509}
-          y1={850.247}
           x2={1234.32}
+          y1={850.247}
           y2={890.591}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint40_linear_413_99"
           x1={450.008}
-          y1={837.38}
           x2={1206.33}
+          y1={837.38}
           y2={916.873}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint41_linear_413_99"
           x1={436.451}
-          y1={825.139}
           x2={1177.33}
+          y1={825.139}
           y2={942.482}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint42_linear_413_99"
           x1={423.79}
-          y1={813.569}
           x2={1147.36}
+          y1={813.569}
           y2={967.369}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint43_linear_413_99"
           x1={411.977}
-          y1={802.715}
           x2={1116.49}
+          y1={802.715}
           y2={991.488}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint44_linear_413_99"
           x1={400.959}
-          y1={792.615}
           x2={1084.76}
+          y1={792.615}
           y2={1014.79}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint45_linear_413_99"
           x1={390.682}
-          y1={783.307}
           x2={1052.23}
+          y1={783.307}
           y2={1037.25}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint46_linear_413_99"
           x1={381.092}
-          y1={774.823}
           x2={1018.96}
+          y1={774.823}
           y2={1058.82}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint47_linear_413_99"
           x1={372.131}
-          y1={767.192}
           x2={985.021}
+          y1={767.192}
           y2={1079.47}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint48_linear_413_99"
           x1={363.743}
-          y1={760.44}
           x2={950.464}
+          y1={760.44}
           y2={1099.18}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint49_linear_413_99"
           x1={355.867}
-          y1={754.588}
           x2={915.355}
+          y1={754.588}
           y2={1117.92}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint50_linear_413_99"
           x1={348.446}
-          y1={749.656}
           x2={879.758}
+          y1={749.656}
           y2={1135.68}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint51_linear_413_99"
           x1={341.419}
-          y1={745.656}
           x2={843.737}
+          y1={745.656}
           y2={1152.43}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint52_linear_413_99"
           x1={334.726}
-          y1={742.601}
           x2={807.357}
+          y1={742.601}
           y2={1168.16}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint53_linear_413_99"
           x1={328.307}
-          y1={740.497}
           x2={770.682}
+          y1={740.497}
           y2={1182.87}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint54_linear_413_99"
           x1={322.103}
-          y1={739.347}
           x2={733.777}
+          y1={739.347}
           y2={1196.56}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint55_linear_413_99"
           x1={316.053}
-          y1={739.152}
           x2={696.705}
+          y1={739.152}
           y2={1209.22}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint56_linear_413_99"
           x1={310.1}
-          y1={739.906}
           x2={659.531}
+          y1={739.906}
           y2={1220.86}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint57_linear_413_99"
           x1={304.184}
-          y1={741.604}
           x2={622.315}
+          y1={741.604}
           y2={1231.48}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint58_linear_413_99"
           x1={298.25}
-          y1={744.234}
           x2={585.119}
+          y1={744.234}
           y2={1241.1}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint59_linear_413_99"
           x1={292.242}
-          y1={747.781}
           x2={548.003}
+          y1={747.781}
           y2={1249.74}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint60_linear_413_99"
           x1={286.105}
-          y1={752.23}
           x2={511.025}
+          y1={752.23}
           y2={1257.41}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint61_linear_413_99"
           x1={279.787}
-          y1={757.558}
           x2={474.242}
+          y1={757.558}
           y2={1264.13}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint62_linear_413_99"
           x1={273.237}
-          y1={763.744}
           x2={437.708}
+          y1={763.744}
           y2={1269.93}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint63_linear_413_99"
           x1={266.407}
-          y1={770.759}
           x2={401.475}
+          y1={770.759}
           y2={1274.84}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint64_linear_413_99"
           x1={259.25}
-          y1={778.576}
           x2={365.594}
+          y1={778.576}
           y2={1278.89}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint65_linear_413_99"
           x1={251.721}
-          y1={787.163}
           x2={330.112}
+          y1={787.163}
           y2={1282.11}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint66_linear_413_99"
           x1={243.779}
-          y1={796.485}
           x2={295.075}
+          y1={796.485}
           y2={1284.53}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint67_linear_413_99"
           x1={235.384}
-          y1={806.507}
           x2={260.524}
+          y1={806.507}
           y2={1286.21}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
         </linearGradient>
         <linearGradient
+          gradientUnits="userSpaceOnUse"
           id="paint68_linear_413_99"
           x1={226.5}
-          y1={817.19}
           x2={226.5}
+          y1={817.19}
           y2={1287.18}
-          gradientUnits="userSpaceOnUse"
         >
           <stop stopColor="#FF1CF7" />
           <stop offset={1} stopColor="#00F0FF" stopOpacity={0.2} />
diff --git a/apps/docs/src/components/mdx/index.tsx b/apps/docs/src/components/mdx/index.tsx
index fe4f8beb58..edef1f3c59 100644
--- a/apps/docs/src/components/mdx/index.tsx
+++ b/apps/docs/src/components/mdx/index.tsx
@@ -1,15 +1,16 @@
 /* eslint-disable react/display-name */
-import * as React from 'react';
-import Playground from '../playground';
-import Codeblock from '../codeblock';
-import CarbonAd from '../carbon-ad';
-import * as Icons from '../icons';
-import { styled, useTheme } from '@nextui-org/react';
-import { Anchor } from '@components';
-import Block from '../templates/example-block';
-import cn from 'classnames';
+import * as React from "react";
+import {styled, useTheme} from "@nextui-org/react";
+import {Anchor} from "@components";
+import cn from "classnames";
 
-const Table: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
+import Playground from "../playground";
+import Codeblock from "../codeblock";
+import CarbonAd from "../carbon-ad";
+import * as Icons from "../icons";
+import Block from "../templates/example-block";
+
+const Table: React.FC<React.PropsWithChildren<unknown>> = ({children}) => {
   return (
     <div className="docs-table-container">
       <table className="docs-table">{children}</table>
@@ -27,8 +28,9 @@ const Table: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
     </div>
   );
 };
-const Thead: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const { theme } = useTheme();
+const Thead: React.FC<React.PropsWithChildren<unknown>> = ({children}) => {
+  const {theme} = useTheme();
+
   return (
     <thead className="docs-thead">
       {children}
@@ -46,22 +48,21 @@ const Thead: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
         }
         :global(.docs-thead th:nth-child(1)) {
           padding-left: 1rem;
-          border-radius: ${theme?.radii?.lg?.value} 0 0
-            ${theme?.radii?.lg?.value};
+          border-radius: ${theme?.radii?.lg?.value} 0 0 ${theme?.radii?.lg?.value};
         }
         :global(.docs-thead th:last-child) {
-          border-radius: 0 ${theme?.radii?.lg?.value} ${theme?.radii?.lg?.value}
-            0;
+          border-radius: 0 ${theme?.radii?.lg?.value} ${theme?.radii?.lg?.value} 0;
         }
       `}</style>
     </thead>
   );
 };
-const Trow: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
+const Trow: React.FC<React.PropsWithChildren<unknown>> = ({children}) => {
   return <tr className="docs-tr">{children}</tr>;
 };
-const Tcol: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const { theme } = useTheme();
+const Tcol: React.FC<React.PropsWithChildren<unknown>> = ({children}) => {
+  const {theme} = useTheme();
+
   return (
     <td className="docs-col">
       {children}
@@ -77,30 +78,25 @@ const Tcol: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
     </td>
   );
 };
+
 export interface LinkedHeadingProps {
   as: keyof JSX.IntrinsicElements;
   linked?: boolean;
 }
 
-const LinkedHeading: React.FC<LinkedHeadingProps> = ({
-  as,
-  linked = true,
-  ...props
-}) => {
+const LinkedHeading: React.FC<LinkedHeadingProps> = ({as, linked = true, ...props}) => {
   const Component = as;
+
   return (
-    <Component
-      className={cn({ 'linked-heading': linked })}
-      data-name={props.children}
-      {...props}
-    >
+    <Component className={cn({"linked-heading": linked})} data-name={props.children} {...props}>
       {linked ? <Anchor>{props.children}</Anchor> : <>{props.children}</>}
     </Component>
   );
 };
 
-const List: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  const { theme } = useTheme();
+const List: React.FC<React.PropsWithChildren<unknown>> = ({children}) => {
+  const {theme} = useTheme();
+
   return (
     <ul className="mdx-ul">
       {children}
@@ -119,8 +115,8 @@ const List: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
 };
 
 // @ts-ignore
-const Paragraph = styled('p', {
-  fontSize: '1.125rem'
+const Paragraph = styled("p", {
+  fontSize: "1.125rem",
 });
 
 const MDXComponents = {
@@ -128,15 +124,9 @@ const MDXComponents = {
   h1: (props: React.DetailsHTMLAttributes<unknown>) => (
     <LinkedHeading as="h1" linked={false} {...props} />
   ),
-  h2: (props: React.DetailsHTMLAttributes<unknown>) => (
-    <LinkedHeading as="h2" {...props} />
-  ),
-  h3: (props: React.DetailsHTMLAttributes<unknown>) => (
-    <LinkedHeading as="h3" {...props} />
-  ),
-  h4: (props: React.DetailsHTMLAttributes<unknown>) => (
-    <LinkedHeading as="h4" {...props} />
-  ),
+  h2: (props: React.DetailsHTMLAttributes<unknown>) => <LinkedHeading as="h2" {...props} />,
+  h3: (props: React.DetailsHTMLAttributes<unknown>) => <LinkedHeading as="h3" {...props} />,
+  h4: (props: React.DetailsHTMLAttributes<unknown>) => <LinkedHeading as="h4" {...props} />,
   p: Paragraph,
   table: Table,
   thead: Thead,
@@ -146,7 +136,7 @@ const MDXComponents = {
   CarbonAd,
   code: Codeblock,
   ul: List,
-  Block
+  Block,
 };
 
 export default MDXComponents;
diff --git a/apps/docs/src/components/menu-toggle/index.tsx b/apps/docs/src/components/menu-toggle/index.tsx
index 5f8c2210a1..bdd06ff642 100644
--- a/apps/docs/src/components/menu-toggle/index.tsx
+++ b/apps/docs/src/components/menu-toggle/index.tsx
@@ -1,16 +1,17 @@
-import * as React from 'react';
-import { useTheme } from '@nextui-org/react';
+import * as React from "react";
+import {useTheme} from "@nextui-org/react";
 
 export interface MenuToggleProps {
   expanded: boolean;
 }
 
-const MenuToggle: React.FC<MenuToggleProps> = ({ expanded }) => {
-  const { theme } = useTheme();
+const MenuToggle: React.FC<MenuToggleProps> = ({expanded}) => {
+  const {theme} = useTheme();
+
   return (
     <div
-      className={`wrap ${expanded ? 'expanded' : ''}`}
-      aria-label={`${expanded ? 'close menu' : 'open menu'}`}
+      aria-label={`${expanded ? "close menu" : "open menu"}`}
+      className={`wrap ${expanded ? "expanded" : ""}`}
     >
       <div className="line top" />
       <div className="line bottom" />
diff --git a/apps/docs/src/components/mobile-navigation/index.tsx b/apps/docs/src/components/mobile-navigation/index.tsx
index 411b6931d2..a653060b15 100644
--- a/apps/docs/src/components/mobile-navigation/index.tsx
+++ b/apps/docs/src/components/mobile-navigation/index.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { usePortal } from '@nextui-org/react';
-import cn from 'classnames';
-import withDefaults from '@utils/with-defaults';
-import { Route } from '@lib/docs/page';
-import { createPortal } from 'react-dom';
-import { Sidebar } from '@components';
+import React from "react";
+import {usePortal} from "@nextui-org/react";
+import cn from "classnames";
+import withDefaults from "@utils/with-defaults";
+import {Route} from "@lib/docs/page";
+import {createPortal} from "react-dom";
+import {Sidebar} from "@components";
 
 interface Props {
   opened: boolean;
@@ -16,17 +16,11 @@ interface Props {
 
 const defaultProps = {
   opened: false,
-  detached: false
+  detached: false,
 };
 
-const MobileNavigation: React.FC<Props> = ({
-  opened,
-  detached,
-  hasNotify,
-  routes,
-  onClose
-}) => {
-  const portal = usePortal('mobile-navigation');
+const MobileNavigation: React.FC<Props> = ({opened, detached, hasNotify, routes, onClose}) => {
+  const portal = usePortal("mobile-navigation");
 
   const handlePostClick = () => {
     onClose && onClose();
@@ -35,10 +29,10 @@ const MobileNavigation: React.FC<Props> = ({
   return portal
     ? createPortal(
         <nav
-          className={cn('mobile-navigation__container', {
+          className={cn("mobile-navigation__container", {
             opened,
             detached,
-            hasNotify
+            hasNotify,
           })}
         >
           <div className="mobile-navigation__wrapper">
@@ -78,9 +72,7 @@ const MobileNavigation: React.FC<Props> = ({
               min-height: 100%;
               background: var(--nextui-colors-background);
             }
-            @supports (
-              (-webkit-backdrop-filter: none) or (backdrop-filter: none)
-            ) {
+            @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
               .mobile-navigation__wrapper {
                 background: var(--nextui-colors-menuBackground);
                 backdrop-filter: saturate(180%) blur(10px);
@@ -109,7 +101,7 @@ const MobileNavigation: React.FC<Props> = ({
             }
           `}</style>
         </nav>,
-        portal
+        portal,
       )
     : null;
 };
diff --git a/apps/docs/src/components/nav-link/index.tsx b/apps/docs/src/components/nav-link/index.tsx
index db930fffc3..1cd3d235d4 100644
--- a/apps/docs/src/components/nav-link/index.tsx
+++ b/apps/docs/src/components/nav-link/index.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import NextLink from 'next/link';
-import { useRouter } from 'next/router';
-import { Link, styled } from '@nextui-org/react';
+import React from "react";
+import NextLink from "next/link";
+import {useRouter} from "next/router";
+import {Link, styled} from "@nextui-org/react";
 
 export interface Props {
   href: string;
@@ -15,10 +15,10 @@ export interface Props {
 }
 
 const defaultProps = {
-  href: '',
-  pathname: '',
-  title: '',
-  selected: false
+  href: "",
+  pathname: "",
+  title: "",
+  selected: false,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -26,36 +26,36 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export type NavLinkProps = Props & typeof defaultProps & NativeAttrs;
 
 const BaseLink = styled(Link, {
-  d: 'flex',
-  textDecoration: 'none',
-  '@smMax': {
+  d: "flex",
+  textDecoration: "none",
+  "@smMax": {
     pt: 0,
     pl: 0,
     pb: 0,
-    d: 'flex',
-    ai: 'center'
+    d: "flex",
+    ai: "center",
   },
-  '&:active': {
-    opacity: 0.7
+  "&:active": {
+    opacity: 0.7,
   },
   variants: {
     selected: {
       true: {
-        boxSizing: 'border-box',
-        fontWeight: '$semibold',
-        '@smMax': {
-          borderLeft: 'none',
-          paddingLeft: 0
-        }
-      }
+        boxSizing: "border-box",
+        fontWeight: "$semibold",
+        "@smMax": {
+          borderLeft: "none",
+          paddingLeft: 0,
+        },
+      },
     },
     disabled: {
       true: {
-        cursor: 'not-allowed',
-        pe: 'none'
-      }
-    }
-  }
+        cursor: "not-allowed",
+        pe: "none",
+      },
+    },
+  },
 });
 
 const NavLink: React.FC<NavLinkProps> = ({
@@ -65,7 +65,7 @@ const NavLink: React.FC<NavLinkProps> = ({
   color,
   selected,
   comingSoon,
-  onClick
+  onClick,
 }) => {
   const router = useRouter();
   const onlyHashChange = pathname === router.pathname;
@@ -73,12 +73,12 @@ const NavLink: React.FC<NavLinkProps> = ({
   if (onlyHashChange) {
     return (
       <BaseLink
-        href={pathname}
-        selected={selected}
-        disabled={comingSoon}
         css={{
-          color: color ? color : 'inherit'
+          color: color ? color : "inherit",
         }}
+        disabled={comingSoon}
+        href={pathname}
+        selected={selected}
       >
         {title}
       </BaseLink>
@@ -86,15 +86,15 @@ const NavLink: React.FC<NavLinkProps> = ({
   }
 
   return (
-    <NextLink href={!comingSoon ? pathname || href : ''}>
+    <NextLink href={!comingSoon ? pathname || href : ""}>
       <BaseLink
+        css={{
+          color: color ? color : "inherit",
+        }}
+        disabled={comingSoon}
         href={pathname}
         selected={selected}
-        disabled={comingSoon}
         onClick={(e: any) => !comingSoon && onClick && onClick(e)}
-        css={{
-          color: color ? color : 'inherit'
-        }}
       >
         {title}
       </BaseLink>
diff --git a/apps/docs/src/components/notify-banner/index.ts b/apps/docs/src/components/notify-banner/index.ts
index 6be67cf5a7..7921c9df20 100644
--- a/apps/docs/src/components/notify-banner/index.ts
+++ b/apps/docs/src/components/notify-banner/index.ts
@@ -1,3 +1,3 @@
-import NotifyBanner from './notify-banner';
+import NotifyBanner from "./notify-banner";
 
 export default NotifyBanner;
diff --git a/apps/docs/src/components/notify-banner/notify-banner.tsx b/apps/docs/src/components/notify-banner/notify-banner.tsx
index 254e40c72a..69fc414889 100644
--- a/apps/docs/src/components/notify-banner/notify-banner.tsx
+++ b/apps/docs/src/components/notify-banner/notify-banner.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react';
-import NextLink from 'next/link';
-import { Badge } from '@components';
-import { Text, Spacer } from '@nextui-org/react';
-import { ChevronRight } from '@components';
-import { StyledNotifyBanner, StyledContent, StyledImg } from './styles';
+import * as React from "react";
+import NextLink from "next/link";
+import {Badge} from "@components";
+import {Text, Spacer} from "@nextui-org/react";
+import {ChevronRight} from "@components";
+
+import {StyledNotifyBanner, StyledContent, StyledImg} from "./styles";
 
 interface Props {
   text: string;
@@ -12,24 +13,24 @@ interface Props {
 }
 
 const NotifyBanner: React.FC<Props> = (props) => {
-  const { showBadge = true, text, href = '#' } = props;
+  const {showBadge = true, text, href = "#"} = props;
 
   return (
     <StyledNotifyBanner>
       <StyledImg
-        src="/notify-gradient.svg"
-        className="notify-gradient"
         alt="gradient blue background"
+        className="notify-gradient"
         css={{
-          position: 'absolute',
+          position: "absolute",
           opacity: 0.7,
           zIndex: -1,
-          left: '0%'
+          left: "0%",
         }}
+        src="/notify-gradient.svg"
       />
       {showBadge && (
         <Badge solid>
-          <span role="img" aria-label="notify-emoji">
+          <span aria-label="notify-emoji" role="img">
             🚀
           </span>
           &nbsp;&nbsp;New
@@ -38,15 +39,11 @@ const NotifyBanner: React.FC<Props> = (props) => {
       <NextLink href={href}>
         <StyledContent>
           <Spacer x={0.2} />
-          <Text b size={15} css={{ color: 'currentColor' }}>
+          <Text b css={{color: "currentColor"}} size={15}>
             {text}
           </Text>
           <Spacer x={0.2} />
-          <ChevronRight
-            size={20}
-            className="chevron-right-icon"
-            fill="currentColor"
-          />
+          <ChevronRight className="chevron-right-icon" fill="currentColor" size={20} />
         </StyledContent>
       </NextLink>
     </StyledNotifyBanner>
diff --git a/apps/docs/src/components/notify-banner/styles.ts b/apps/docs/src/components/notify-banner/styles.ts
index 72733cbc85..1d1cf994c4 100644
--- a/apps/docs/src/components/notify-banner/styles.ts
+++ b/apps/docs/src/components/notify-banner/styles.ts
@@ -1,47 +1,47 @@
-import { styled } from '@nextui-org/react';
-import { StyledCardBlur } from '@primitives';
-import { lightTheme } from '@theme/shared';
+import {styled} from "@nextui-org/react";
+import {StyledCardBlur} from "@primitives";
+import {lightTheme} from "@theme/shared";
 
 export const StyledNotifyBanner = styled(StyledCardBlur, {
-  dflex: 'center',
-  fd: 'row',
+  dflex: "center",
+  fd: "row",
   p: 0,
   br: 0,
-  position: 'relative',
-  zIndex: '$1',
-  height: '40px',
-  color: '$text',
-  width: '100%',
-  border: '1.5px solid $border',
-  borderTopColor: 'transparent',
-  borderLeftColor: 'transparent',
-  borderRightColor: 'transparent',
+  position: "relative",
+  zIndex: "$1",
+  height: "40px",
+  color: "$text",
+  width: "100%",
+  border: "1.5px solid $border",
+  borderTopColor: "transparent",
+  borderLeftColor: "transparent",
+  borderRightColor: "transparent",
   [`.${lightTheme} &`]: {
-    '& .notify-gradient': {
-      display: 'none'
-    }
-  }
+    "& .notify-gradient": {
+      display: "none",
+    },
+  },
 });
 
-export const StyledContent = styled('a', {
-  display: 'flex',
-  position: 'relative',
-  zIndex: '$10',
-  fd: 'row',
-  alignItems: 'center',
-  textDecoration: 'none',
-  color: '$text',
-  cursor: 'pointer',
-  transition: '$default',
-  '& .chevron-right-icon': {
-    transition: 'transform cubic-bezier(0.4, 0, 0.2, 1) 0.2s'
+export const StyledContent = styled("a", {
+  display: "flex",
+  position: "relative",
+  zIndex: "$10",
+  fd: "row",
+  alignItems: "center",
+  textDecoration: "none",
+  color: "$text",
+  cursor: "pointer",
+  transition: "$default",
+  "& .chevron-right-icon": {
+    transition: "transform cubic-bezier(0.4, 0, 0.2, 1) 0.2s",
   },
-  '&:hover': {
+  "&:hover": {
     opacity: 0.8,
-    '& .chevron-right-icon': {
-      transform: 'translateX(2px)'
-    }
-  }
+    "& .chevron-right-icon": {
+      transform: "translateX(2px)",
+    },
+  },
 });
 
-export const StyledImg = styled('img', {});
+export const StyledImg = styled("img", {});
diff --git a/apps/docs/src/components/page-nav/index.tsx b/apps/docs/src/components/page-nav/index.tsx
index ed3eb191dd..0a2cc21717 100644
--- a/apps/docs/src/components/page-nav/index.tsx
+++ b/apps/docs/src/components/page-nav/index.tsx
@@ -1,10 +1,11 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
-import { Route, addTagToSlug } from '@lib/docs/page';
-import NextLink from 'next/link';
-import { useTheme, styled, Container, Link } from '@nextui-org/react';
-import { ArrowRight, ArrowLeft } from '../icons';
-import { removeFromLast } from '@utils/index';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
+import {Route, addTagToSlug} from "@lib/docs/page";
+import NextLink from "next/link";
+import {useTheme, styled, Container, Link} from "@nextui-org/react";
+import {removeFromLast} from "@utils/index";
+
+import {ArrowRight, ArrowLeft} from "../icons";
 
 export interface PageNavProps {
   tag?: string;
@@ -15,30 +16,29 @@ export interface PageNavProps {
 const defaultProps = {};
 
 const StyledLink = styled(Link, {
-  '&.page-nav__link': {
-    d: 'flex',
-    ai: 'center',
-    color: '$text',
-    '&:hover': {
-      bg: '$accents2'
-    }
-  }
+  "&.page-nav__link": {
+    d: "flex",
+    ai: "center",
+    color: "$text",
+    "&:hover": {
+      bg: "$accents2",
+    },
+  },
 });
 
-const PageNav: React.FC<PageNavProps> = ({ tag, prevRoute, nextRoute }) => {
-  const { theme } = useTheme();
+const PageNav: React.FC<PageNavProps> = ({tag, prevRoute, nextRoute}) => {
+  const {theme} = useTheme();
+
   return (
     <Container
-      display="flex"
-      justify="space-between"
       className="page-nav"
-      css={{ py: '12%' }}
+      css={{py: "12%"}}
+      display="flex"
       gap={0}
+      justify="space-between"
     >
       {prevRoute ? (
-        <NextLink
-          href={addTagToSlug(removeFromLast(prevRoute.path || '', '.'), tag)}
-        >
+        <NextLink href={addTagToSlug(removeFromLast(prevRoute.path || "", "."), tag)}>
           <StyledLink block className="page-nav__link">
             <ArrowLeft fill={theme?.colors?.primary?.value} size={20} />
             {prevRoute.title}
@@ -48,9 +48,7 @@ const PageNav: React.FC<PageNavProps> = ({ tag, prevRoute, nextRoute }) => {
         <span />
       )}
       {nextRoute && (
-        <NextLink
-          href={addTagToSlug(removeFromLast(nextRoute.path || '', '.'), tag)}
-        >
+        <NextLink href={addTagToSlug(removeFromLast(nextRoute.path || "", "."), tag)}>
           <StyledLink block className="page-nav__link">
             {nextRoute.title}
             <ArrowRight fill={theme?.colors?.primary?.value} size={20} />
diff --git a/apps/docs/src/components/palette/index.tsx b/apps/docs/src/components/palette/index.tsx
index 39f74d8657..4f2fddd493 100644
--- a/apps/docs/src/components/palette/index.tsx
+++ b/apps/docs/src/components/palette/index.tsx
@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
-import { Grid, Text, getTokenValue, useTheme } from '@nextui-org/react';
-import { toNumber } from 'lodash';
-import Item from './item';
+import React, {useMemo} from "react";
+import {Grid, Text, getTokenValue, useTheme} from "@nextui-org/react";
+import {toNumber} from "lodash";
+
+import Item from "./item";
 
 export interface Props {
   colors: string[] | string[][];
@@ -20,18 +21,18 @@ type MappedColor = {
   colors: Color[];
 };
 
-const reverseColors: { [key in string]: string } = {
-  background: '$foreground',
-  foreground: '$background',
-  text: '$background',
-  border: '$text',
-  white: '$black',
-  black: '$white',
-  backgroundContrast: '$foreground'
+const reverseColors: {[key in string]: string} = {
+  background: "$foreground",
+  foreground: "$background",
+  text: "$background",
+  border: "$text",
+  white: "$black",
+  black: "$white",
+  backgroundContrast: "$foreground",
 };
 
 const getColorTitle = (color: string) => {
-  return color.replace(/[0-9]/g, '');
+  return color.replace(/[0-9]/g, "");
 };
 
 const getColorNumber = (color: string) => {
@@ -39,7 +40,8 @@ const getColorNumber = (color: string) => {
   if (!color.match(/[0-9]/g)) {
     return -1; // brand colors
   }
-  return toNumber(color.replace(/[^0-9]/g, ''));
+
+  return toNumber(color.replace(/[^0-9]/g, ""));
 };
 
 const mapColors = (colors: string[]): Color[] => {
@@ -51,8 +53,8 @@ const mapColors = (colors: string[]): Color[] => {
     const reverseColor = reverseColors[color];
 
     const textColor = isBrand
-      ? color === 'gradient'
-        ? '$white'
+      ? color === "gradient"
+        ? "$white"
         : `$${color}SolidContrast`
       : (isAccent && num <= 5) || (isBase && num <= 500)
       ? `$${colors[colors.length - 1]}`
@@ -61,9 +63,9 @@ const mapColors = (colors: string[]): Color[] => {
     return {
       name: color,
       value: `$${color}`,
-      hexColor: getTokenValue('colors', color),
+      hexColor: getTokenValue("colors", color),
       number: num,
-      textColor: reverseColor || textColor
+      textColor: reverseColor || textColor,
     };
   });
 };
@@ -72,20 +74,18 @@ const mapMatrixColors = (colors: string[][]): MappedColor[] => {
   return colors.map((row, i) => {
     return {
       title: getColorTitle(row[i]),
-      colors: mapColors(row)
+      colors: mapColors(row),
     };
   });
 };
 
-const Palette: React.FC<Props> = ({ colors }) => {
-  const { isDark } = useTheme();
+const Palette: React.FC<Props> = ({colors}) => {
+  const {isDark} = useTheme();
 
   const isMatrix = Array.isArray(colors[0]);
 
   const mappedColors = useMemo(() => {
-    return isMatrix
-      ? mapMatrixColors(colors as string[][])
-      : mapColors(colors as string[]);
+    return isMatrix ? mapMatrixColors(colors as string[][]) : mapColors(colors as string[]);
   }, [isMatrix, colors, isDark]);
 
   if (isMatrix) {
@@ -94,22 +94,20 @@ const Palette: React.FC<Props> = ({ colors }) => {
         {mappedColors.map((row: any, i: number) => (
           <Grid.Container
             key={`${row.title}-${i}`}
-            wrap="wrap"
             className="palette-colors-row"
-            css={{ mb: '$8', position: 'relative' }}
+            css={{mb: "$8", position: "relative"}}
+            wrap="wrap"
           >
-            <Grid xs={12} className="palette-colors-title" css={{ my: '$2' }}>
-              <Text css={{ fontWeight: '$semibold', tt: 'capitalize' }}>
-                {row.title}
-              </Text>
+            <Grid className="palette-colors-title" css={{my: "$2"}} xs={12}>
+              <Text css={{fontWeight: "$semibold", tt: "capitalize"}}>{row.title}</Text>
             </Grid>
             {row.colors.map((color: Color, j: number) => (
-              <Grid className="palette-colors-col" key={i * j}>
+              <Grid key={i * j} className="palette-colors-col">
                 <Item
-                  title={color.name}
                   color={color.value}
-                  textColor={color.textColor}
                   hexColor={color.hexColor}
+                  textColor={color.textColor}
+                  title={color.name}
                 />
               </Grid>
             ))}
@@ -123,17 +121,17 @@ const Palette: React.FC<Props> = ({ colors }) => {
     <Grid.Container
       className="palette"
       css={{
-        marginBottom: '$sm'
+        marginBottom: "$sm",
       }}
     >
       {mappedColors?.map((color: any, i) => {
         return (
           <Item
             key={i}
-            title={color.name}
             color={color.value}
-            textColor={color.textColor}
             hexColor={color.hexColor}
+            textColor={color.textColor}
+            title={color.name}
           />
         );
       })}
diff --git a/apps/docs/src/components/palette/item.tsx b/apps/docs/src/components/palette/item.tsx
index 605f6b2da8..db499f8abb 100644
--- a/apps/docs/src/components/palette/item.tsx
+++ b/apps/docs/src/components/palette/item.tsx
@@ -1,12 +1,6 @@
-import React from 'react';
-import cn from 'classnames';
-import {
-  Grid,
-  Text,
-  Tooltip,
-  GridProps,
-  useClipboard
-} from '@nextui-org/react';
+import React from "react";
+import cn from "classnames";
+import {Grid, Text, Tooltip, GridProps, useClipboard} from "@nextui-org/react";
 
 interface Props {
   color: string;
@@ -18,46 +12,39 @@ interface Props {
 
 export type ItemProps = Props & GridProps;
 
-const Item: React.FC<ItemProps> = ({
-  color,
-  title,
-  inverted,
-  textColor,
-  hexColor,
-  ...props
-}) => {
-  const isGradient = color.includes('gradient');
+const Item: React.FC<ItemProps> = ({color, title, inverted, textColor, hexColor, ...props}) => {
+  const isGradient = color.includes("gradient");
 
-  const { copy } = useClipboard();
+  const {copy} = useClipboard();
 
   const renderItem = () => {
     return (
       <Grid
-        className={cn('color', {
-          'is-gradient': isGradient
+        className={cn("color", {
+          "is-gradient": isGradient,
         })}
         css={{
-          size: '100px',
-          px: '$5',
-          dflex: 'center',
-          marginBottom: '20px',
-          flexDirection: 'column',
-          transition: '$default',
-          cursor: 'pointer',
+          size: "100px",
+          px: "$5",
+          dflex: "center",
+          marginBottom: "20px",
+          flexDirection: "column",
+          transition: "$default",
+          cursor: "pointer",
           background: color,
-          marginRight: '10px',
-          br: '$lg',
-          '.text': {
-            fontSize: '$xs',
-            wordBreak: 'break-all',
-            textAlign: 'center'
+          marginRight: "10px",
+          br: "$lg",
+          ".text": {
+            fontSize: "$xs",
+            wordBreak: "break-all",
+            textAlign: "center",
           },
-          '&:hover': {
-            transform: 'translateY(5px)'
+          "&:hover": {
+            transform: "translateY(5px)",
+          },
+          "@smMax": {
+            size: "80px",
           },
-          '@smMax': {
-            size: '80px'
-          }
         }}
         {...props}
       >
@@ -66,11 +53,11 @@ const Item: React.FC<ItemProps> = ({
             className="text"
             css={{
               m: 0,
-              fontWeight: '$semibold',
+              fontWeight: "$semibold",
               color: textColor,
-              '@smMax': {
-                fontSize: '$xs'
-              }
+              "@smMax": {
+                fontSize: "$xs",
+              },
             }}
           >
             {title}
@@ -81,11 +68,11 @@ const Item: React.FC<ItemProps> = ({
               className="text"
               css={{
                 m: 0,
-                fontWeight: '$semibold',
+                fontWeight: "$semibold",
                 color: textColor,
-                '@smMax': {
-                  fontSize: '$xs'
-                }
+                "@smMax": {
+                  fontSize: "$xs",
+                },
               }}
             >
               {title}
@@ -94,11 +81,11 @@ const Item: React.FC<ItemProps> = ({
               className="hex-text"
               css={{
                 m: 0,
-                fontSize: '$xs',
+                fontSize: "$xs",
                 color: textColor,
                 opacity: 0.8,
-                tt: 'uppercase',
-                fontWeight: '$bold'
+                tt: "uppercase",
+                fontWeight: "$bold",
               }}
             >
               {hexColor}
@@ -112,15 +99,11 @@ const Item: React.FC<ItemProps> = ({
   return (
     <>
       {isGradient ? (
-        <Tooltip trigger="click" title="Gradient" content={hexColor}>
+        <Tooltip content={hexColor} title="Gradient" trigger="click">
           <>{renderItem()}</>
         </Tooltip>
       ) : (
-        <Tooltip
-          trigger="click"
-          content="Copied!"
-          onClick={() => copy(hexColor.trim())}
-        >
+        <Tooltip content="Copied!" trigger="click" onClick={() => copy(hexColor.trim())}>
           <>{renderItem()}</>
         </Tooltip>
       )}
diff --git a/apps/docs/src/components/playground/code-theme.ts b/apps/docs/src/components/playground/code-theme.ts
index fa8c9c8661..60b315c925 100644
--- a/apps/docs/src/components/playground/code-theme.ts
+++ b/apps/docs/src/components/playground/code-theme.ts
@@ -1,163 +1,143 @@
-import { PrismTheme } from 'prism-react-renderer';
-import { green } from '@nextui-org/react';
+import {PrismTheme} from "prism-react-renderer";
+import {green} from "@nextui-org/react";
 
 const makeCodeTheme = (): PrismTheme => ({
   plain: {
-    backgroundColor: 'var(--nextui-colors-codeBackground)',
-    color: '#F4F4F4',
-    fontWeight: '500',
-    fontStyle: 'normal',
-    fontFamily: '$mono',
-    fontSize: '$xs',
-    textRendering: 'geometricPrecision'
+    backgroundColor: "var(--nextui-colors-codeBackground)",
+    color: "#F4F4F4",
+    fontWeight: "500",
+    fontStyle: "normal",
+    fontFamily: "$mono",
+    fontSize: "$xs",
+    textRendering: "geometricPrecision",
   },
   styles: [
     {
-      types: ['comment', 'prolog', 'doctype', 'cdata'],
+      types: ["comment", "prolog", "doctype", "cdata"],
       style: {
-        color: 'var(--nextui-colors-codeComment)'
-      }
+        color: "var(--nextui-colors-codeComment)",
+      },
     },
     {
-      types: ['symbol', 'text'],
+      types: ["symbol", "text"],
       style: {
-        color: 'var(--nextui-colors-white)'
-      }
+        color: "var(--nextui-colors-white)",
+      },
     },
     {
-      types: ['punctuation'],
+      types: ["punctuation"],
       style: {
-        color: green.green200
-      }
+        color: green.green200,
+      },
     },
     {
-      types: ['function'],
+      types: ["function"],
       style: {
-        color: '#61AFEF'
-      }
+        color: "#61AFEF",
+      },
     },
     {
-      types: ['namespace'],
+      types: ["namespace"],
       style: {
-        opacity: 1
-      }
+        opacity: 1,
+      },
     },
     {
-      types: ['tag', 'operator', 'number'],
+      types: ["tag", "operator", "number"],
       style: {
-        color: '#E5C07B'
-      }
+        color: "#E5C07B",
+      },
     },
     {
-      types: ['property', 'function'],
+      types: ["property", "function"],
       style: {
-        color: 'var(--nextui-colors-success)'
-      }
+        color: "var(--nextui-colors-success)",
+      },
     },
     {
-      types: ['tag-id', 'selector', 'atrule-id'],
+      types: ["tag-id", "selector", "atrule-id"],
       style: {
-        color: '#E06C75'
-      }
+        color: "#E06C75",
+      },
     },
     {
-      types: ['attr-name'],
+      types: ["attr-name"],
       style: {
-        color: 'var(--nextui-colors-yellow600)'
-      }
+        color: "var(--nextui-colors-yellow600)",
+      },
     },
     {
       types: [
-        'boolean',
-        'string',
-        'entity',
-        'url',
-        'attr-value',
-        'keyword',
-        'control',
-        'directive',
-        'unit',
-        'statement',
-        'regex',
-        'at-rule',
-        'placeholder',
-        'variable'
+        "boolean",
+        "string",
+        "entity",
+        "url",
+        "attr-value",
+        "keyword",
+        "control",
+        "directive",
+        "unit",
+        "statement",
+        "regex",
+        "at-rule",
+        "placeholder",
+        "variable",
       ],
       style: {
-        color: '#98C379'
-      }
+        color: "#98C379",
+      },
     },
     {
-      types: ['deleted'],
+      types: ["deleted"],
       style: {
-        textDecorationLine: 'line-through'
-      }
+        textDecorationLine: "line-through",
+      },
     },
     {
-      types: ['language-javascript', 'script'],
+      types: ["language-javascript", "script"],
       style: {
-        color: 'var(--nextui-colors-success)'
-      }
+        color: "var(--nextui-colors-success)",
+      },
     },
     {
-      types: ['inserted'],
+      types: ["inserted"],
       style: {
-        textDecorationLine: 'underline'
-      }
+        textDecorationLine: "underline",
+      },
     },
     {
-      types: ['italic'],
+      types: ["italic"],
       style: {
-        fontStyle: 'italic'
-      }
+        fontStyle: "italic",
+      },
     },
     {
-      types: ['important', 'bold'],
+      types: ["important", "bold"],
       style: {
-        fontWeight: 'bold'
-      }
+        fontWeight: "bold",
+      },
     },
     {
-      types: ['important', 'primitive'],
+      types: ["important", "primitive"],
       style: {
-        color: '#c678dd'
-      }
-    }
-  ]
+        color: "#c678dd",
+      },
+    },
+  ],
 });
 
 export const getCodeThemeColors = () => {
   const codeTheme = makeCodeTheme();
-  const stringColor = codeTheme.styles.find((style) =>
-    style.types.includes('string')
-  );
-  const punctuationColor = codeTheme.styles.find((style) =>
-    style.types.includes('punctuation')
-  );
-  const numberColor = codeTheme.styles.find((style) =>
-    style.types.includes('number')
-  );
-  const textColor = codeTheme.styles.find((style) =>
-    style.types.includes('text')
-  );
-  const selectorColor = codeTheme.styles.find((style) =>
-    style.types.includes('selector')
-  );
-  const commentColor = codeTheme.styles.find((style) =>
-    style.types.includes('comment')
-  );
-  const classnameColor = codeTheme.styles.find((style) =>
-    style.types.includes('tag')
-  );
-  const attrColor = codeTheme.styles.find((style) =>
-    style.types.includes('attr-name')
-  );
-  const functionColor = codeTheme.styles.find((style) =>
-    style.types.includes('function')
-  );
-  const primitiveColor = codeTheme.styles.find((style) =>
-    style.types.includes('primitive')
-  );
+  const stringColor = codeTheme.styles.find((style) => style.types.includes("string"));
+  const punctuationColor = codeTheme.styles.find((style) => style.types.includes("punctuation"));
+  const numberColor = codeTheme.styles.find((style) => style.types.includes("number"));
+  const textColor = codeTheme.styles.find((style) => style.types.includes("text"));
+  const selectorColor = codeTheme.styles.find((style) => style.types.includes("selector"));
+  const commentColor = codeTheme.styles.find((style) => style.types.includes("comment"));
+  const classnameColor = codeTheme.styles.find((style) => style.types.includes("tag"));
+  const attrColor = codeTheme.styles.find((style) => style.types.includes("attr-name"));
+  const functionColor = codeTheme.styles.find((style) => style.types.includes("function"));
+  const primitiveColor = codeTheme.styles.find((style) => style.types.includes("primitive"));
 
   return {
     ...codeTheme.plain,
@@ -170,7 +150,7 @@ export const getCodeThemeColors = () => {
     classnameColor,
     attrColor,
     functionColor,
-    primitiveColor
+    primitiveColor,
   };
 };
 
diff --git a/apps/docs/src/components/playground/dynamic-live.tsx b/apps/docs/src/components/playground/dynamic-live.tsx
index 9c4c38ff0a..eba1a86416 100644
--- a/apps/docs/src/components/playground/dynamic-live.tsx
+++ b/apps/docs/src/components/playground/dynamic-live.tsx
@@ -1,66 +1,68 @@
-import React from 'react';
-import { LivePreview, LiveProvider, LiveError } from 'react-live';
-import makeCodeTheme from './code-theme';
-import Editor from './editor';
-import NextLink from 'next/link';
-import Palette from '../palette';
-import * as TemplateComponents from '../templates';
-import { useMediaQuery } from '@hooks/use-media-query';
-import { validateEmail } from '@utils/index';
-import withDefaults from '@utils/with-defaults';
-import { Box } from '@primitives';
-import * as Components from '@nextui-org/react';
-import * as Icons from '../icons';
+import React from "react";
+import {LivePreview, LiveProvider, LiveError} from "react-live";
+import NextLink from "next/link";
+import {useMediaQuery} from "@hooks/use-media-query";
+import {validateEmail} from "@utils/index";
+import withDefaults from "@utils/with-defaults";
+import {Box} from "@primitives";
+import * as Components from "@nextui-org/react";
+
+import * as TemplateComponents from "../templates";
+import Palette from "../palette";
+import * as Icons from "../icons";
+
+import Editor from "./editor";
+import makeCodeTheme from "./code-theme";
 
 export interface Props {
   code: string;
   showEditor?: boolean;
   noInline?: boolean;
   initialEditorOpen?: boolean;
-  overflow?: 'auto' | 'visible' | 'hidden';
+  overflow?: "auto" | "visible" | "hidden";
 }
 
 const defaultProps = {
-  showEditor: true
+  showEditor: true,
 };
 
 const StyledWrapper = Components.styled(Box, {
-  width: '100%',
-  padding: '$10',
-  marginLeft: '-$sm',
-  display: 'flex',
-  flexWrap: 'wrap',
-  color: '$text',
-  flexDirection: 'column',
-  background: 'transparent',
-  '& > div': {
-    width: '100%'
+  width: "100%",
+  padding: "$10",
+  marginLeft: "-$sm",
+  display: "flex",
+  flexWrap: "wrap",
+  color: "$text",
+  flexDirection: "column",
+  background: "transparent",
+  "& > div": {
+    width: "100%",
   },
-  '@xsMax': {
-    p: '$5'
+  "@xsMax": {
+    p: "$5",
   },
   variants: {
     overflow: {
       visible: {
-        overflowX: 'visible'
+        overflowX: "visible",
       },
       hidden: {
-        overflowX: 'hidden'
+        overflowX: "hidden",
       },
       auto: {
-        overflowX: 'auto'
-      }
+        overflowX: "auto",
+      },
     },
     noInline: {
       true: {
-        pb: '$10',
-        ml: 0
-      }
-    }
+        pb: "$10",
+        ml: 0,
+      },
+    },
   },
   defaultVariants: {
-    overflow: 'hidden'
-  }
+    overflow: "hidden",
+  },
 });
 
 export const scope = {
@@ -70,35 +72,26 @@ export const scope = {
   NextLink,
   Palette,
   useMediaQuery,
-  validateEmail
+  validateEmail,
 };
 
-const DynamicLive: React.FC<Props & { css?: Components.CSS }> = ({
+const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
   code,
   showEditor,
   initialEditorOpen,
   noInline,
   overflow,
-  css
+  css,
 }) => {
   const codeTheme = makeCodeTheme();
+
   return (
-    <LiveProvider
-      noInline={noInline}
-      code={code}
-      scope={scope}
-      theme={codeTheme}
-    >
-      <StyledWrapper
-        className="wrapper"
-        overflow={overflow}
-        noInline={noInline}
-        css={css}
-      >
+    <LiveProvider code={code} noInline={noInline} scope={scope} theme={codeTheme}>
+      <StyledWrapper className="wrapper" css={css} noInline={noInline} overflow={overflow}>
         <LivePreview />
         <LiveError />
       </StyledWrapper>
-      {showEditor && <Editor initialOpen={initialEditorOpen} code={code} />}
+      {showEditor && <Editor code={code} initialOpen={initialEditorOpen} />}
     </LiveProvider>
   );
 };
diff --git a/apps/docs/src/components/playground/editor.tsx b/apps/docs/src/components/playground/editor.tsx
index 42a7f9c3f7..fd7ee18818 100644
--- a/apps/docs/src/components/playground/editor.tsx
+++ b/apps/docs/src/components/playground/editor.tsx
@@ -1,33 +1,34 @@
-import React, { useState } from 'react';
-import { useRouter } from 'next/router';
-import { LiveEditor } from 'react-live';
-import { useTheme, Row, Col, Tooltip, useClipboard } from '@nextui-org/react';
-import { capitalize, join } from 'lodash';
-import CopyIcon from '../icons/copy';
-import BugIcon from '../icons/bug';
-import RightIcon from '../icons/arrow-right';
-import { ISSUE_REPORT_URL } from '../../lib/github/constants';
+import React, {useState} from "react";
+import {useRouter} from "next/router";
+import {LiveEditor} from "react-live";
+import {useTheme, Row, Col, Tooltip, useClipboard} from "@nextui-org/react";
+import {capitalize, join} from "lodash";
+
+import CopyIcon from "../icons/copy";
+import BugIcon from "../icons/bug";
+import RightIcon from "../icons/arrow-right";
+import {ISSUE_REPORT_URL} from "../../lib/github/constants";
 
 export interface Props {
   initialOpen?: boolean;
   code: string;
 }
 
-const Editor: React.FC<Props> = ({ initialOpen, code }) => {
-  const { theme, isDark } = useTheme();
+const Editor: React.FC<Props> = ({initialOpen, code}) => {
+  const {theme, isDark} = useTheme();
   const [visible, setVisible] = useState(initialOpen);
   const [copied, setCopied] = useState(false);
 
   const router = useRouter();
 
-  const { copy } = useClipboard();
+  const {copy} = useClipboard();
 
-  const slug = router.query.slug || '';
+  const slug = router.query.slug || "";
 
   const componentTitle = Array.isArray(slug)
     ? join(
         slug.map((s) => capitalize(s)),
-        '/'
+        "/",
       )
     : capitalize(slug);
 
@@ -54,10 +55,10 @@ const Editor: React.FC<Props> = ({ initialOpen, code }) => {
     event.stopPropagation();
     event.preventDefault();
 
-    Object.assign(document.createElement('a'), {
-      target: '_blank',
-      rel: 'noopener noreferrer',
-      href: `${ISSUE_REPORT_URL}${componentTitle}`
+    Object.assign(document.createElement("a"), {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: `${ISSUE_REPORT_URL}${componentTitle}`,
     }).click();
   };
 
@@ -65,20 +66,12 @@ const Editor: React.FC<Props> = ({ initialOpen, code }) => {
     <div className="editor">
       <details open={visible}>
         <summary onClick={clickHandler}>
-          <Row
-            justify="space-between"
-            align="center"
-            style={{ height: '100%', width: '100%' }}
-          >
+          <Row align="center" justify="space-between" style={{height: "100%", width: "100%"}}>
             <Col className="action left-side">
               <span className="arrow">
                 <RightIcon
+                  fill={!isDark ? theme?.colors?.accents2?.value : theme?.colors?.accents8?.value}
                   size={16}
-                  fill={
-                    !isDark
-                      ? theme?.colors?.accents2?.value
-                      : theme?.colors?.accents8?.value
-                  }
                 />
               </span>
               <span className="title">Live Editor</span>
@@ -88,42 +81,30 @@ const Editor: React.FC<Props> = ({ initialOpen, code }) => {
                 <Tooltip
                   hideArrow
                   className="action-tooltip"
-                  content={copied ? 'Copied!' : 'Copy'}
+                  content={copied ? "Copied!" : "Copy"}
                   onVisibleChange={handleTooltipVisibleChange}
                 >
-                  <span
-                    className="icon"
-                    onClick={copyHandler}
-                    title="Copy Code"
-                  >
+                  <span className="icon" role="button" title="Copy Code" onClick={copyHandler}>
                     <CopyIcon
                       fill={
-                        !isDark
-                          ? theme?.colors?.accents2?.value
-                          : theme?.colors?.accents5?.value
+                        !isDark ? theme?.colors?.accents2?.value : theme?.colors?.accents5?.value
                       }
                       size={18}
                     />
                   </span>
                 </Tooltip>
-                <Tooltip
-                  hideArrow
-                  className="action-tooltip"
-                  content="Report a bug"
-                >
+                <Tooltip hideArrow className="action-tooltip" content="Report a bug">
                   <a
                     className="icon"
-                    title="Report a bug"
+                    href={`${ISSUE_REPORT_URL}${componentTitle}`}
                     rel="noopener noreferrer"
                     target="_blank"
+                    title="Report a bug"
                     onClick={linkHandler}
-                    href={`${ISSUE_REPORT_URL}${componentTitle}`}
                   >
                     <BugIcon
                       fill={
-                        !isDark
-                          ? theme?.colors?.accents2?.value
-                          : theme?.colors?.accents5?.value
+                        !isDark ? theme?.colors?.accents2?.value : theme?.colors?.accents5?.value
                       }
                       size={18}
                     />
@@ -150,7 +131,7 @@ const Editor: React.FC<Props> = ({ initialOpen, code }) => {
           transition: all 0.2s ease;
           overflow: hidden;
           border-radius: ${theme?.radii?.lg?.value};
-          background-color: ${!isDark ? '#363449' : '#111'};
+          background-color: ${!isDark ? "#363449" : "#111"};
           box-shadow: 0px 5px 20px -5px rgb(0 0 0 / 20%);
         }
         details[open] :global(.right-side) {
@@ -164,9 +145,7 @@ const Editor: React.FC<Props> = ({ initialOpen, code }) => {
           justify-content: space-between;
           align-items: center;
           padding: 0 ${theme?.space?.lg?.value};
-          color: ${!isDark
-            ? theme?.colors?.accents2?.value
-            : theme?.colors?.accents5?.value};
+          color: ${!isDark ? theme?.colors?.accents2?.value : theme?.colors?.accents5?.value};
           height: 2.875rem;
           list-style: none;
           user-select: none;
diff --git a/apps/docs/src/components/playground/index.ts b/apps/docs/src/components/playground/index.ts
index c4f6ff3fbf..1ab7ae7209 100644
--- a/apps/docs/src/components/playground/index.ts
+++ b/apps/docs/src/components/playground/index.ts
@@ -1,3 +1,3 @@
-import Playground from './playground';
+import Playground from "./playground";
 
 export default Playground;
diff --git a/apps/docs/src/components/playground/playground.tsx b/apps/docs/src/components/playground/playground.tsx
index c80a87312c..3d948db350 100644
--- a/apps/docs/src/components/playground/playground.tsx
+++ b/apps/docs/src/components/playground/playground.tsx
@@ -1,37 +1,34 @@
-import React from 'react';
-import dynamic from 'next/dynamic';
-import { Loading } from '@nextui-org/react';
-import withDefaults from '@utils/with-defaults';
-import {
-  SandpackFiles,
-  SandpackPredefinedTemplate,
-  SandpackHighlightedLines
-} from '@components';
-import { Box } from '@primitives';
-import Title from './title';
-import { isEmpty } from 'lodash';
-import LiveCode, { scope } from './dynamic-live';
-import { transformCode, joinCode, getFileName } from './utils';
-import { FileCode } from './types';
-
-const DynamicLive = dynamic(() => import('./dynamic-live'), {
+import React from "react";
+import dynamic from "next/dynamic";
+import {Loading} from "@nextui-org/react";
+import withDefaults from "@utils/with-defaults";
+import {SandpackFiles, SandpackPredefinedTemplate, SandpackHighlightedLines} from "@components";
+import {Box} from "@primitives";
+import {isEmpty} from "lodash";
+
+import Title from "./title";
+import LiveCode, {scope} from "./dynamic-live";
+import {transformCode, joinCode, getFileName} from "./utils";
+import {FileCode} from "./types";
+
+const DynamicLive = dynamic(() => import("./dynamic-live"), {
   ssr: false,
   // eslint-disable-next-line react/display-name
   loading: () => (
-    <div style={{ padding: '20pt 0' }}>
+    <div style={{padding: "20pt 0"}}>
       <Loading type="spinner" />
     </div>
-  )
+  ),
 });
 
-const DynamicSandpack = dynamic(() => import('../sandpack'), {
+const DynamicSandpack = dynamic(() => import("../sandpack"), {
   ssr: false,
   // eslint-disable-next-line react/display-name
   loading: () => (
-    <div style={{ padding: '20pt 0' }}>
+    <div style={{padding: "20pt 0"}}>
       <Loading type="spinner" />
     </div>
-  )
+  ),
 });
 
 interface Props {
@@ -40,7 +37,7 @@ interface Props {
   showEditor?: boolean;
   showSandpackPreview?: boolean;
   initialEditorOpen?: boolean;
-  overflow?: 'auto' | 'visible' | 'hidden';
+  overflow?: "auto" | "visible" | "hidden";
   files?: SandpackFiles;
   template?: SandpackPredefinedTemplate;
   highlightedLines?: SandpackHighlightedLines;
@@ -48,15 +45,15 @@ interface Props {
 }
 
 const defaultProps = {
-  desc: '',
-  title: '',
-  code: '',
+  desc: "",
+  title: "",
+  code: "",
   files: {},
   showEditor: true,
   showSandpackPreview: false,
   initialEditorOpen: false,
-  overflow: 'visible',
-  bindings: {}
+  overflow: "visible",
+  bindings: {},
 };
 
 export type PlaygroundProps = Props & typeof defaultProps;
@@ -70,7 +67,7 @@ const Playground: React.FC<PlaygroundProps> = ({
   showSandpackPreview,
   files,
   overflow,
-  desc
+  desc,
 }) => {
   const isSanpackEditor = !isEmpty(files);
 
@@ -84,10 +81,11 @@ const Playground: React.FC<PlaygroundProps> = ({
     const scopeKeys = Object.keys(scope);
     // convert scopeKeys to string values
     const scopeValues = scopeKeys.map((key) => {
-      return { [key]: `${key}` };
+      return {[key]: `${key}`};
     });
+
     // add 'React' to scopeValues
-    scopeValues.push({ React: 'React' });
+    scopeValues.push({React: "React"});
     // convert scopeValues to object
     const imports = Object.assign({}, ...scopeValues);
 
@@ -95,6 +93,7 @@ const Playground: React.FC<PlaygroundProps> = ({
     if (Object.keys(files).length === 1) {
       // get first item from files
       const file = Object.values(files)[0] as string;
+
       code = transformCode(file, imports);
     }
     // else if multiple files
@@ -102,20 +101,17 @@ const Playground: React.FC<PlaygroundProps> = ({
       // get files with its code
       Object.entries(files).forEach(([fileName, fileCode]) => {
         //only files with .js can processes by react-live
-        if (!fileName.includes('.js')) {
+        if (!fileName.includes(".js")) {
           return;
         }
 
         const componentName = getFileName(fileName);
-        const transformedCode = transformCode(
-          fileCode as string,
-          imports,
-          componentName
-        );
+        const transformedCode = transformCode(fileCode as string, imports, componentName);
+
         // add to filesCode
         filesCode.push({
           fileName,
-          code: transformedCode
+          code: transformedCode,
         });
       });
 
@@ -127,6 +123,7 @@ const Playground: React.FC<PlaygroundProps> = ({
         if (b.code.includes(getFileName(a.fileName))) {
           return -1;
         }
+
         return 0;
       });
 
@@ -134,38 +131,33 @@ const Playground: React.FC<PlaygroundProps> = ({
     }
   }
 
-  noInline = code.includes('render');
+  noInline = code.includes("render");
 
   return (
     <>
-      {(title || desc) && <Title title={title} desc={desc} />}
+      {(title || desc) && <Title desc={desc} title={title} />}
       <Box
         className="playground"
         css={{
-          w: '100%',
-          mb: '$xl',
-          ov: 'auto'
+          w: "100%",
+          mb: "$xl",
+          ov: "auto",
         }}
       >
         {isSanpackEditor ? (
           <DynamicSandpack
             files={files}
-            showPreview={showSandpackPreview}
             highlightedLines={highlightedLines}
+            showPreview={showSandpackPreview}
           >
-            <LiveCode
-              noInline={noInline}
-              showEditor={false}
-              code={code}
-              overflow={overflow}
-            />
+            <LiveCode code={code} noInline={noInline} overflow={overflow} showEditor={false} />
           </DynamicSandpack>
         ) : (
           <DynamicLive
-            showEditor={showEditor}
-            initialEditorOpen={initialEditorOpen}
             code={code}
+            initialEditorOpen={initialEditorOpen}
             overflow={overflow}
+            showEditor={showEditor}
           />
         )}
       </Box>
diff --git a/apps/docs/src/components/playground/title.tsx b/apps/docs/src/components/playground/title.tsx
index 01e42f9ca5..cff24ba603 100644
--- a/apps/docs/src/components/playground/title.tsx
+++ b/apps/docs/src/components/playground/title.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import withDefaults from '@utils/with-defaults';
-import { Anchor } from '@components';
-import ReactMarkdown from 'react-markdown';
-import { kebabCase, isString } from 'lodash';
+import React from "react";
+import withDefaults from "@utils/with-defaults";
+import {Anchor} from "@components";
+import ReactMarkdown from "react-markdown";
+import {kebabCase, isString} from "lodash";
 
 interface Props {
   title: React.ReactNode | string;
@@ -10,18 +10,18 @@ interface Props {
 }
 
 const defaultProps = {
-  desc: ''
+  desc: "",
 };
 
 export type TitleProps = Props & typeof defaultProps;
 
-const Title: React.FC<TitleProps> = ({ title, desc }) => {
+const Title: React.FC<TitleProps> = ({title, desc}) => {
   return (
     <>
       <h3
-        id={`${isString(title) && kebabCase(title)}`}
-        data-name={title}
         className="linked-heading"
+        data-name={title}
+        id={`${isString(title) && kebabCase(title)}`}
       >
         <Anchor>{title}</Anchor>
       </h3>
diff --git a/apps/docs/src/components/playground/utils.ts b/apps/docs/src/components/playground/utils.ts
index 7473331c4c..3dc89e2b22 100644
--- a/apps/docs/src/components/playground/utils.ts
+++ b/apps/docs/src/components/playground/utils.ts
@@ -1,25 +1,26 @@
-import { get } from 'lodash';
-import { FileCode } from './types';
+import {get} from "lodash";
+
+import {FileCode} from "./types";
 
 const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm;
 
 const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/;
 
-export const transformCode = (code: string, imports = {}, compName = 'App') => {
+export const transformCode = (code: string, imports = {}, compName = "App") => {
   let cleanedCode = code
     .replace(importRegex, (match) => {
       // get component name from the match ex. "import { Table } from '@nextui-org/react'"
-      const componentName = match.match(/\w+/g)?.[1] || '';
+      const componentName = match.match(/\w+/g)?.[1] || "";
       const matchingImport = get(imports, componentName);
 
       if (matchingImport) {
         // remove the matching import
-        return '';
+        return "";
       }
 
       // if match includes './' or '../' then remove it
-      if (match.includes('./') || match.includes('../')) {
-        return '';
+      if (match.includes("./") || match.includes("../")) {
+        return "";
       }
 
       return match;
@@ -28,25 +29,27 @@ export const transformCode = (code: string, imports = {}, compName = 'App') => {
       // replace match with const Name = () => (
       return `const ${compName} = () => {`;
     })
-    .replace('export', '');
+    .replace("export", "");
 
   // add render(<App/>) to cleanedClode if has const App = () => {
   if (cleanedCode.includes(`const App = () => {`)) {
     cleanedCode = `${cleanedCode}\nrender(<${compName}/>);`;
   }
   // delete comments from the code
-  cleanedCode = cleanedCode.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '');
+  cleanedCode = cleanedCode.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, "");
+
   return cleanedCode;
 };
 
 export const joinCode = (filesCode: FileCode[]) => {
   // join all the code
-  const code = filesCode.reduce((acc, { code }) => {
+  const code = filesCode.reduce((acc, {code}) => {
     return `${acc}${code}`;
-  }, '');
+  }, "");
+
   return code;
 };
 
 export const getFileName = (filePath: string) => {
-  return filePath?.split('.')?.[0]?.replace(/\W/g, '');
+  return filePath?.split(".")?.[0]?.replace(/\W/g, "");
 };
diff --git a/apps/docs/src/components/primitives/index.ts b/apps/docs/src/components/primitives/index.ts
index f80bc80024..34a1311e07 100644
--- a/apps/docs/src/components/primitives/index.ts
+++ b/apps/docs/src/components/primitives/index.ts
@@ -1,138 +1,138 @@
-import { styled, Link } from '@nextui-org/react';
+import {styled, Link} from "@nextui-org/react";
 
-export const Title = styled('h1', {
-  display: 'inline',
-  fontWeight: '$bold',
-  color: '$text',
-  lh: '1.2',
-  fs: '2.5rem',
+export const Title = styled("h1", {
+  display: "inline",
+  fontWeight: "$bold",
+  color: "$text",
+  lh: "1.2",
+  fs: "2.5rem",
   mb: 0,
-  '@sm': {
-    fs: '3rem'
+  "@sm": {
+    fs: "3rem",
   },
-  '@lg': {
-    fs: '3.5rem'
+  "@lg": {
+    fs: "3.5rem",
   },
-  '&::selection': {
-    WebkitTextFillColor: '$colors$text'
+  "&::selection": {
+    WebkitTextFillColor: "$colors$text",
   },
   variants: {
     color: {
       violet: {
-        textGradient: '180deg, #FF1CF7 25%, #b249f8 100%'
+        textGradient: "180deg, #FF1CF7 25%, #b249f8 100%",
       },
       warning: {
-        textGradient: '180deg, #f36534 25%, #F69F27 100%'
+        textGradient: "180deg, #f36534 25%, #F69F27 100%",
       },
       blue: {
-        textGradient: '180deg, #5EA2EF 25%, #0072F5 100%'
+        textGradient: "180deg, #5EA2EF 25%, #0072F5 100%",
       },
       cyan: {
-        textGradient: '180deg, #00b7fa 25%, #01cfea 100%'
+        textGradient: "180deg, #00b7fa 25%, #01cfea 100%",
       },
       green: {
-        textGradient: '180deg, #6FEE8D 25%, #17c964 100%'
+        textGradient: "180deg, #6FEE8D 25%, #17c964 100%",
       },
       pink: {
-        textGradient: '180deg, #FF4ECD 25%, #F21361 100%'
-      }
+        textGradient: "180deg, #FF4ECD 25%, #F21361 100%",
+      },
     },
     fullWidth: {
       true: {
-        display: 'block',
-        width: '100%'
-      }
-    }
-  }
+        display: "block",
+        width: "100%",
+      },
+    },
+  },
 });
 
-export const Subtitle = styled('p', {
-  pl: '$1',
-  fs: '$xl',
-  fontWeight: '$medium',
-  color: '$accents7',
-  display: 'block',
-  mw: '100%',
-  width: '100%',
-  '@sm': {
-    mw: '50%'
-  }
+export const Subtitle = styled("p", {
+  pl: "$1",
+  fs: "$xl",
+  fontWeight: "$medium",
+  color: "$accents7",
+  display: "block",
+  mw: "100%",
+  width: "100%",
+  "@sm": {
+    mw: "50%",
+  },
 });
 
-export const Section = styled('section', {
-  zIndex: '$2',
-  width: '100%'
+export const Section = styled("section", {
+  zIndex: "$2",
+  width: "100%",
 });
 
-export const Box = styled('div', {
+export const Box = styled("div", {
   // Reset
-  boxSizing: 'border-box'
+  boxSizing: "border-box",
 });
 
 export const BlockLink = styled(Link, {
-  mt: '$12',
-  py: '$2',
-  px: '$6',
-  br: '$pill',
-  bg: '$blockLinkBackground',
-  fontSize: '$xs',
-  color: '$blockLinkColor',
-  fontWeight: '$medium',
-  '&:hover': {
-    bg: '$blockLinkHoverBackground'
+  mt: "$12",
+  py: "$2",
+  px: "$6",
+  br: "$pill",
+  bg: "$blockLinkBackground",
+  fontSize: "$xs",
+  color: "$blockLinkColor",
+  fontWeight: "$medium",
+  "&:hover": {
+    bg: "$blockLinkHoverBackground",
   },
   variants: {
     color: {
       default: {
-        color: '$blockLinkColor'
+        color: "$blockLinkColor",
       },
       green: {
-        color: '$green800',
-        bg: '$green100',
-        '&:hover': {
-          bg: '$green300'
-        }
+        color: "$green800",
+        bg: "$green100",
+        "&:hover": {
+          bg: "$green300",
+        },
       },
       pink: {
-        color: '$pink600',
-        bg: '$pink100',
-        '&:hover': {
-          bg: '$pink300'
-        }
+        color: "$pink600",
+        bg: "$pink100",
+        "&:hover": {
+          bg: "$pink300",
+        },
       },
       violet: {
-        color: '$purple600',
-        bg: '$purple100',
-        '&:hover': {
-          bg: '$purple300'
-        }
+        color: "$purple600",
+        bg: "$purple100",
+        "&:hover": {
+          bg: "$purple300",
+        },
       },
       blue: {
-        color: '$blue700',
-        bg: '$blue100',
-        '&:hover': {
-          bg: '$blue300'
-        }
-      }
-    }
+        color: "$blue700",
+        bg: "$blue100",
+        "&:hover": {
+          bg: "$blue300",
+        },
+      },
+    },
   },
   defaultVariants: {
-    color: 'default'
-  }
+    color: "default",
+  },
 });
 
-export const StyledCardBlur = styled('div', {
-  background: '$accents1',
-  boxShadow: '$sm',
-  borderRadius: '$lg',
-  display: 'flex',
-  flexDirection: 'column',
-  p: '$8',
-  bg: '$backgroundContrast',
-  '@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))': {
-    bf: 'saturate(180%) blur(14px)',
-    bg: 'rgba(255, 255, 255, 0.05)'
-  }
+export const StyledCardBlur = styled("div", {
+  background: "$accents1",
+  boxShadow: "$sm",
+  borderRadius: "$lg",
+  display: "flex",
+  flexDirection: "column",
+  p: "$8",
+  bg: "$backgroundContrast",
+  "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
+    bf: "saturate(180%) blur(14px)",
+    bg: "rgba(255, 255, 255, 0.05)",
+  },
 });
 
-export const StyledImg = styled('img', {});
+export const StyledImg = styled("img", {});
diff --git a/apps/docs/src/components/sandpack/bugreport-button.tsx b/apps/docs/src/components/sandpack/bugreport-button.tsx
index 8a4d999e10..24ff3658d4 100644
--- a/apps/docs/src/components/sandpack/bugreport-button.tsx
+++ b/apps/docs/src/components/sandpack/bugreport-button.tsx
@@ -1,30 +1,31 @@
-import React from 'react';
-import { useRouter } from 'next/router';
-import { capitalize, join } from 'lodash';
-import { Tooltip } from '@nextui-org/react';
-import { Box } from '@primitives';
-import BugIcon from '../icons/bug';
-import { ISSUE_REPORT_URL } from '../../lib/github/constants';
+import React from "react";
+import {useRouter} from "next/router";
+import {capitalize, join} from "lodash";
+import {Tooltip} from "@nextui-org/react";
+import {Box} from "@primitives";
+
+import BugIcon from "../icons/bug";
+import {ISSUE_REPORT_URL} from "../../lib/github/constants";
 
 const BugReportButton = () => {
   const router = useRouter();
 
-  const slug = router.query.slug || '';
+  const slug = router.query.slug || "";
 
   const componentTitle = Array.isArray(slug)
     ? join(
         slug.map((s) => capitalize(s)),
-        '/'
+        "/",
       )
     : capitalize(slug);
   const linkHandler = (event: React.MouseEvent) => {
     event.stopPropagation();
     event.preventDefault();
 
-    Object.assign(document.createElement('a'), {
-      target: '_blank',
-      rel: 'noopener noreferrer',
-      href: `${ISSUE_REPORT_URL}${componentTitle}`
+    Object.assign(document.createElement("a"), {
+      target: "_blank",
+      rel: "noopener noreferrer",
+      href: `${ISSUE_REPORT_URL}${componentTitle}`,
     }).click();
   };
 
@@ -33,22 +34,22 @@ const BugReportButton = () => {
       hideArrow
       content="Report a bug"
       triggerCss={{
-        cursor: 'pointer',
-        ml: '$2',
-        '&:hover': {
-          opacity: 0.8
-        }
+        cursor: "pointer",
+        ml: "$2",
+        "&:hover": {
+          opacity: 0.8,
+        },
       }}
     >
       <Box
         as="a"
-        title="Report a bug"
+        href={`${ISSUE_REPORT_URL}${componentTitle}`}
         rel="noopener noreferrer"
         target="_blank"
+        title="Report a bug"
         onClick={linkHandler}
-        href={`${ISSUE_REPORT_URL}${componentTitle}`}
       >
-        <BugIcon size={20} fill="var(--nextui-colors-codeCopyIconColor)" />
+        <BugIcon fill="var(--nextui-colors-codeCopyIconColor)" size={20} />
       </Box>
     </Tooltip>
   );
diff --git a/apps/docs/src/components/sandpack/code-viewer.tsx b/apps/docs/src/components/sandpack/code-viewer.tsx
index 727df9fc5e..6c770a91d7 100644
--- a/apps/docs/src/components/sandpack/code-viewer.tsx
+++ b/apps/docs/src/components/sandpack/code-viewer.tsx
@@ -1,17 +1,19 @@
-import * as React from 'react';
+import type {SandpackInitMode} from "@codesandbox/sandpack-react";
+
+import * as React from "react";
 import {
   FileTabs,
   CodeEditor,
   useSandpack,
   useActiveCode,
-  SandpackStack
-} from '@codesandbox/sandpack-react';
-import type { SandpackInitMode } from '@codesandbox/sandpack-react';
-import scrollIntoView from 'scroll-into-view-if-needed';
-import { Decorators } from './types';
-import { getId } from '@utils/collections';
-import { Box } from '@primitives';
-import { StyledShoreMoreButton } from './styles';
+  SandpackStack,
+} from "@codesandbox/sandpack-react";
+import scrollIntoView from "scroll-into-view-if-needed";
+import {getId} from "@utils/collections";
+import {Box} from "@primitives";
+
+import {Decorators} from "./types";
+import {StyledShoreMoreButton} from "./styles";
 
 export interface CodeViewerProps {
   showTabs?: boolean;
@@ -37,29 +39,21 @@ export interface CodeViewerProps {
  */
 const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
   (
-    {
-      showTabs,
-      code: propCode,
-      decorators,
-      initMode,
-      showLineNumbers,
-      wrapContent,
-      containerRef
-    },
-    ref
+    {showTabs, code: propCode, decorators, initMode, showLineNumbers, wrapContent, containerRef},
+    ref,
   ) => {
-    const { sandpack } = useSandpack();
-    const { code } = useActiveCode();
+    const {sandpack} = useSandpack();
+    const {code} = useActiveCode();
 
-    const { activePath } = sandpack;
+    const {activePath} = sandpack;
     const [isExpanded, setIsExpanded] = React.useState(false);
     // hack to make sure we re-render the code editor and chenge current file
     // TODO: open an issue on sandpack-react
     const [internalKey, setInternalKey] = React.useState(getId());
-    const lineCountRef = React.useRef<{ [key: string]: number }>({});
+    const lineCountRef = React.useRef<{[key: string]: number}>({});
 
     if (!lineCountRef.current[activePath]) {
-      lineCountRef.current[activePath] = code.split('\n').length;
+      lineCountRef.current[activePath] = code.split("\n").length;
     }
 
     const shouldShowTabs = showTabs ?? sandpack.openPaths.length > 1;
@@ -69,7 +63,7 @@ const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
 
     React.useEffect(() => {
       if (containerRef && containerRef?.current !== null && isExpandable) {
-        containerRef.current.style.height = '350px';
+        containerRef.current.style.height = "350px";
       }
     }, [containerRef]);
 
@@ -79,17 +73,19 @@ const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
 
     const handleExpand = () => {
       const nextIsExpanded = !isExpanded;
+
       setIsExpanded(nextIsExpanded);
       if (containerRef && containerRef?.current !== null) {
         const container = containerRef?.current;
+
         if (nextIsExpanded) {
-          container.style.height = 'auto';
+          container.style.height = "auto";
         } else {
-          container.style.height = '350px';
+          container.style.height = "350px";
           scrollIntoView(container, {
-            behavior: 'smooth',
-            scrollMode: 'if-needed',
-            block: 'center'
+            behavior: "smooth",
+            scrollMode: "if-needed",
+            block: "center",
           });
         }
       }
@@ -99,9 +95,9 @@ const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
       <SandpackStack>
         {shouldShowTabs ? <FileTabs /> : null}
         <CodeEditor
-          readOnly
           key={internalKey}
           ref={ref}
+          readOnly
           code={propCode || code}
           decorators={decorators}
           filePath={sandpack.activePath}
@@ -111,17 +107,17 @@ const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
           wrapContent={wrapContent}
         />
         {isExpandable && (
-          <Box css={{ py: '$3', pl: 'var(--sp-space-4)' }}>
+          <Box css={{py: "$3", pl: "var(--sp-space-4)"}}>
             <StyledShoreMoreButton onClick={handleExpand}>
-              {isExpanded ? 'Show less' : 'Show more'}
+              {isExpanded ? "Show less" : "Show more"}
             </StyledShoreMoreButton>
           </Box>
         )}
       </SandpackStack>
     );
-  }
+  },
 );
 
-SandpackCodeViewer.displayName = 'SandpackCodeViewer';
+SandpackCodeViewer.displayName = "SandpackCodeViewer";
 
 export default SandpackCodeViewer;
diff --git a/apps/docs/src/components/sandpack/codesanbox-button.tsx b/apps/docs/src/components/sandpack/codesanbox-button.tsx
index 3644201527..a6d778914f 100644
--- a/apps/docs/src/components/sandpack/codesanbox-button.tsx
+++ b/apps/docs/src/components/sandpack/codesanbox-button.tsx
@@ -1,16 +1,10 @@
-import React from 'react';
-import { UnstyledOpenInCodeSandboxButton } from '@codesandbox/sandpack-react';
-import { Tooltip } from '@nextui-org/react';
-import { Box } from '@primitives';
+import React from "react";
+import {UnstyledOpenInCodeSandboxButton} from "@codesandbox/sandpack-react";
+import {Tooltip} from "@nextui-org/react";
+import {Box} from "@primitives";
 
 export const CSBIcon = (): React.ReactElement => (
-  <svg
-    fill="none"
-    height="24"
-    width="24"
-    viewBox="0 0 18 18"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg fill="none" height="24" viewBox="0 0 18 18" width="24" xmlns="http://www.w3.org/2000/svg">
     <path d="M3.24284 5.11427L8.63639 2.17808C8.92945 2.01854 9.28432 2.02264 9.57361 2.18889L14.7726 5.17673C15.011 5.3137 15.1579 5.56762 15.1579 5.84251V12.1884C15.1579 12.4639 15.0103 12.7183 14.7711 12.8551L9.38463 15.9346C9.1466 16.0707 8.85406 16.0696 8.61711 15.9316L3.22361 12.7912C2.9874 12.6537 2.8421 12.4009 2.8421 12.1276V5.7887C2.8421 5.50747 2.99584 5.24873 3.24284 5.11427Z" />
     <path
       clipRule="evenodd"
@@ -33,23 +27,23 @@ const CodeSandboxButton = () => {
       hideArrow
       content="Open in CodeSandbox"
       triggerCss={{
-        cursor: 'pointer',
-        ml: '$2',
-        '&:hover': {
-          opacity: 0.8
-        }
+        cursor: "pointer",
+        ml: "$2",
+        "&:hover": {
+          opacity: 0.8,
+        },
       }}
     >
       <Box as="span" title="Open in CodeSandbox">
         <UnstyledOpenInCodeSandboxButton
           style={{
             // reset button styles
-            background: 'none',
-            border: 'none',
+            background: "none",
+            border: "none",
             padding: 0,
             margin: 0,
-            outline: 'none',
-            cursor: 'pointer'
+            outline: "none",
+            cursor: "pointer",
           }}
         >
           <CSBIcon />
diff --git a/apps/docs/src/components/sandpack/copy-button.tsx b/apps/docs/src/components/sandpack/copy-button.tsx
index 68d358aa5b..2c9dcf9ac9 100644
--- a/apps/docs/src/components/sandpack/copy-button.tsx
+++ b/apps/docs/src/components/sandpack/copy-button.tsx
@@ -1,20 +1,21 @@
-import React, { useState } from 'react';
-import { useSandpack } from '@codesandbox/sandpack-react';
-import { Tooltip, useClipboard } from '@nextui-org/react';
-import { Copy as CopyIcon } from '@components';
-import { Box } from '@primitives';
+import React, {useState} from "react";
+import {useSandpack} from "@codesandbox/sandpack-react";
+import {Tooltip, useClipboard} from "@nextui-org/react";
+import {Copy as CopyIcon} from "@components";
+import {Box} from "@primitives";
 
 const CopyButton = () => {
-  const { copy } = useClipboard();
+  const {copy} = useClipboard();
   const [copied, setCopied] = useState(false);
 
-  const { sandpack } = useSandpack();
+  const {sandpack} = useSandpack();
 
   const copyHandler = (event: React.MouseEvent) => {
     event.stopPropagation();
     event.preventDefault();
     setCopied(true);
     const code = sandpack.files[sandpack.activePath].code;
+
     copy(code);
   };
 
@@ -28,13 +29,13 @@ const CopyButton = () => {
     <Tooltip
       hideArrow
       className="action-tooltip"
-      content={copied ? 'Copied!' : 'Copy'}
+      content={copied ? "Copied!" : "Copy"}
       triggerCss={{
-        cursor: 'pointer',
-        ml: '$3',
-        '&:hover': {
-          opacity: 0.8
-        }
+        cursor: "pointer",
+        ml: "$3",
+        "&:hover": {
+          opacity: 0.8,
+        },
       }}
       onVisibleChange={handleTooltipVisibleChange}
     >
diff --git a/apps/docs/src/components/sandpack/index.ts b/apps/docs/src/components/sandpack/index.ts
index 9068d989ce..5dc1f28f6f 100644
--- a/apps/docs/src/components/sandpack/index.ts
+++ b/apps/docs/src/components/sandpack/index.ts
@@ -1,9 +1,6 @@
-import Sandpack from './sandpack';
-export type {
-  SandpackFiles,
-  SandpackPredefinedTemplate
-} from '@codesandbox/sandpack-react';
+import Sandpack from "./sandpack";
+export type {SandpackFiles, SandpackPredefinedTemplate} from "@codesandbox/sandpack-react";
 
-export type { HighlightedLines as SandpackHighlightedLines } from './types';
+export type {HighlightedLines as SandpackHighlightedLines} from "./types";
 
 export default Sandpack;
diff --git a/apps/docs/src/components/sandpack/language-selector.tsx b/apps/docs/src/components/sandpack/language-selector.tsx
index 50b35045be..563a5ec5bd 100644
--- a/apps/docs/src/components/sandpack/language-selector.tsx
+++ b/apps/docs/src/components/sandpack/language-selector.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
-import cn from 'classnames';
-import { SandpackPredefinedTemplate } from '@codesandbox/sandpack-react';
-import { TypescriptLogo, JavascriptLogo } from '@components';
-import { StyledPlaygroundButtons, StyledLanguageButton } from './styles';
+import React from "react";
+import cn from "classnames";
+import {SandpackPredefinedTemplate} from "@codesandbox/sandpack-react";
+import {TypescriptLogo, JavascriptLogo} from "@components";
+
+import {StyledPlaygroundButtons, StyledLanguageButton} from "./styles";
 
 interface Props {
   template: SandpackPredefinedTemplate;
@@ -11,12 +12,10 @@ interface Props {
 
 export type LanguageSelectorProps = Props;
 
-const LanguageSelector: React.FC<LanguageSelectorProps> = ({
-  template,
-  onChange
-}) => {
+const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onChange}) => {
   const handleToggle = () => {
-    const newTemplate = template === 'react' ? 'react-ts' : 'react';
+    const newTemplate = template === "react" ? "react-ts" : "react";
+
     onChange?.(newTemplate);
   };
 
@@ -24,15 +23,15 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
     <StyledPlaygroundButtons bottom>
       <StyledLanguageButton onClick={handleToggle}>
         <JavascriptLogo
-          className={cn('sp-language-icon', {
-            'sp-language-icon--selected': template === 'react'
+          className={cn("sp-language-icon", {
+            "sp-language-icon--selected": template === "react",
           })}
         />
       </StyledLanguageButton>
       <StyledLanguageButton onClick={handleToggle}>
         <TypescriptLogo
-          className={cn('sp-language-icon', {
-            'sp-language-icon--selected': template === 'react-ts'
+          className={cn("sp-language-icon", {
+            "sp-language-icon--selected": template === "react-ts",
           })}
         />
       </StyledLanguageButton>
diff --git a/apps/docs/src/components/sandpack/preview.tsx b/apps/docs/src/components/sandpack/preview.tsx
index 2132c87c21..c3bee63408 100644
--- a/apps/docs/src/components/sandpack/preview.tsx
+++ b/apps/docs/src/components/sandpack/preview.tsx
@@ -1,24 +1,20 @@
-import * as React from 'react';
-import { useClasser } from '@code-hike/classer';
-import cn from 'classnames';
+import * as React from "react";
+import {useClasser} from "@code-hike/classer";
+import cn from "classnames";
 import {
   LoadingOverlay,
   SandpackStack,
   Navigator,
   useSandpack,
   OpenInCodeSandboxButton,
-  ErrorOverlay
-} from '@codesandbox/sandpack-react';
-import {
-  ViewportOrientation,
-  ViewportSize,
-  computeViewportSize,
-  generateRandomId
-} from './utils';
-import { useTheme } from '@nextui-org/react';
-import { RefreshButton } from './refresh-button';
-import { StyledPreviewIframe } from './sandpack.styles';
-import { darkTheme, lightTheme } from '@theme/shared';
+  ErrorOverlay,
+} from "@codesandbox/sandpack-react";
+import {useTheme} from "@nextui-org/react";
+import {darkTheme, lightTheme} from "@theme/shared";
+
+import {ViewportOrientation, ViewportSize, computeViewportSize, generateRandomId} from "./utils";
+import {RefreshButton} from "./refresh-button";
+import {StyledPreviewIframe} from "./sandpack.styles";
 
 export interface PreviewProps {
   customStyle?: React.CSSProperties;
@@ -39,26 +35,25 @@ export const Preview = ({
   showRefreshButton = true,
   showOpenInCodeSandbox = true,
   showSandpackErrorOverlay = true,
-  viewportSize = 'auto',
-  viewportOrientation = 'portrait'
+  viewportSize = "auto",
+  viewportOrientation = "portrait",
 }: PreviewProps): JSX.Element => {
-  const { sandpack, listen } = useSandpack();
-  const [iframeComputedHeight, setComputedAutoHeight] =
-    React.useState<number | null>(null);
+  const {sandpack, listen} = useSandpack();
+  const [iframeComputedHeight, setComputedAutoHeight] = React.useState<number | null>(null);
   const {
     status,
     registerBundler,
     unregisterBundler,
     errorScreenRegisteredRef,
     openInCSBRegisteredRef,
-    loadingScreenRegisteredRef
+    loadingScreenRegisteredRef,
   } = sandpack;
 
-  const c = useClasser('sp');
+  const c = useClasser("sp");
   const clientId = React.useRef<string>(generateRandomId());
   const iframeRef = React.useRef<HTMLIFrameElement | null>(null);
 
-  const { isDark } = useTheme();
+  const {isDark} = useTheme();
 
   // SandpackPreview immediately registers the custom screens/components so the bundler does not render any of them
   openInCSBRegisteredRef.current = true;
@@ -73,7 +68,7 @@ export const Preview = ({
     registerBundler(iframeElement, clientIdValue);
 
     const unsubscribe = listen((message) => {
-      if (message.type === 'resize') {
+      if (message.type === "resize") {
         setComputedAutoHeight(message.height);
       }
     }, clientIdValue);
@@ -86,6 +81,7 @@ export const Preview = ({
 
   React.useEffect(() => {
     const iframeElement = iframeRef.current;
+
     if (!iframeElement) {
       return;
     }
@@ -117,35 +113,28 @@ export const Preview = ({
     <SandpackStack
       customStyle={{
         ...customStyle,
-        ...viewportStyle
+        ...viewportStyle,
       }}
     >
-      {showNavigator ? (
-        <Navigator clientId={clientId.current} onURLChange={handleNewURL} />
-      ) : null}
+      {showNavigator ? <Navigator clientId={clientId.current} onURLChange={handleNewURL} /> : null}
 
-      <div className={c('preview-container')}>
+      <div className={c("preview-container")}>
         <StyledPreviewIframe
           ref={iframeRef}
-          className={cn(
-            'sp-preview-iframe',
-            isDark ? darkTheme.className : lightTheme.className
-          )}
+          className={cn("sp-preview-iframe", isDark ? darkTheme.className : lightTheme.className)}
           style={{
             // set height based on the content only in auto mode
             // and when the computed height was returned by the bundler
             height:
-              viewportSize === 'auto' && iframeComputedHeight
-                ? iframeComputedHeight
-                : undefined
+              viewportSize === "auto" && iframeComputedHeight ? iframeComputedHeight : undefined,
           }}
           title="Sandpack Preview"
         />
 
         {showSandpackErrorOverlay ? <ErrorOverlay /> : null}
 
-        <div className={c('preview-actions')}>
-          {!showNavigator && showRefreshButton && status === 'running' ? (
+        <div className={c("preview-actions")}>
+          {!showNavigator && showRefreshButton && status === "running" ? (
             <RefreshButton clientId={clientId.current} />
           ) : null}
 
diff --git a/apps/docs/src/components/sandpack/refresh-button.tsx b/apps/docs/src/components/sandpack/refresh-button.tsx
index 1e82c64f0f..feb0a9e087 100644
--- a/apps/docs/src/components/sandpack/refresh-button.tsx
+++ b/apps/docs/src/components/sandpack/refresh-button.tsx
@@ -1,7 +1,6 @@
-import { useClasser } from '@code-hike/classer';
-import * as React from 'react';
-
-import { useSandpackNavigation } from '@codesandbox/sandpack-react';
+import {useClasser} from "@code-hike/classer";
+import * as React from "react";
+import {useSandpackNavigation} from "@codesandbox/sandpack-react";
 
 export const RefreshIcon = (): React.ReactElement => (
   <svg
@@ -26,18 +25,16 @@ interface RefreshButtonProps {
 /**
  * @category Components
  */
-export const RefreshButton = ({
-  clientId
-}: RefreshButtonProps): JSX.Element => {
-  const { refresh } = useSandpackNavigation(clientId);
-  const c = useClasser('sp');
+export const RefreshButton = ({clientId}: RefreshButtonProps): JSX.Element => {
+  const {refresh} = useSandpackNavigation(clientId);
+  const c = useClasser("sp");
 
   return (
     <button
-      className={c('button', 'icon-standalone')}
-      onClick={refresh}
+      className={c("button", "icon-standalone")}
       title="Refresh Sandpack"
       type="button"
+      onClick={refresh}
     >
       <RefreshIcon />
     </button>
diff --git a/apps/docs/src/components/sandpack/sandpack.styles.ts b/apps/docs/src/components/sandpack/sandpack.styles.ts
index 09292bcba1..bb8681e76b 100644
--- a/apps/docs/src/components/sandpack/sandpack.styles.ts
+++ b/apps/docs/src/components/sandpack/sandpack.styles.ts
@@ -1,5 +1,5 @@
-import { styled } from '@nextui-org/react';
+import {styled} from "@nextui-org/react";
 
-export const StyledPreviewIframe = styled('iframe', {
-  bg: '$background'
+export const StyledPreviewIframe = styled("iframe", {
+  bg: "$background",
 });
diff --git a/apps/docs/src/components/sandpack/sandpack.tsx b/apps/docs/src/components/sandpack/sandpack.tsx
index 259e6d7d04..142b1edde7 100644
--- a/apps/docs/src/components/sandpack/sandpack.tsx
+++ b/apps/docs/src/components/sandpack/sandpack.tsx
@@ -1,24 +1,25 @@
-import React, { useMemo, useRef } from 'react';
+import React, {useMemo, useRef} from "react";
 import {
   SandpackProvider,
   SandpackLayout,
   SandpackFiles,
   SandpackPredefinedTemplate,
-  SandpackPreview
-} from '@codesandbox/sandpack-react';
-import { Grid } from '@nextui-org/react';
-import withDefaults from '@utils/with-defaults';
-import useLocalStorage from '@hooks/use-local-storage';
-import { getHighlightedLines, getFileName } from './utils';
-import CopyButton from './copy-button';
-import { entry } from './entry';
-import { nextuiTheme } from './themes';
-import CodeSandboxButton from './codesanbox-button';
-import BugReportButton from './bugreport-button';
-import { StyledPlaygroundButtons } from './styles';
-import LanguageSelector from './language-selector';
-import { HighlightedLines } from './types';
-import CodeViewer from './code-viewer';
+  SandpackPreview,
+} from "@codesandbox/sandpack-react";
+import {Grid} from "@nextui-org/react";
+import withDefaults from "@utils/with-defaults";
+import useLocalStorage from "@hooks/use-local-storage";
+
+import {getHighlightedLines, getFileName} from "./utils";
+import CopyButton from "./copy-button";
+import {entry} from "./entry";
+import {nextuiTheme} from "./themes";
+import CodeSandboxButton from "./codesanbox-button";
+import BugReportButton from "./bugreport-button";
+import {StyledPlaygroundButtons} from "./styles";
+import LanguageSelector from "./language-selector";
+import {HighlightedLines} from "./types";
+import CodeViewer from "./code-viewer";
 
 interface Props {
   files?: SandpackFiles;
@@ -38,7 +39,7 @@ const defaultProps = {
   showOpenInCodeSandbox: true,
   showReportBug: true,
   showCopyCode: true,
-  template: 'react'
+  template: "react",
 };
 
 export type SandpackProps = Props & typeof defaultProps;
@@ -52,38 +53,37 @@ const Sandpack: React.FC<React.PropsWithChildren<SandpackProps>> = ({
   showReportBug,
   showOpenInCodeSandbox,
   showCopyCode,
-  template
+  template,
 }) => {
   // once the user select a template we store it in local storage
-  const [currentTemplate, setCurrentTemplate] =
-    useLocalStorage<SandpackPredefinedTemplate>('currentTemplate', template);
+  const [currentTemplate, setCurrentTemplate] = useLocalStorage<SandpackPredefinedTemplate>(
+    "currentTemplate",
+    template,
+  );
 
   const editorContainerRef = useRef<HTMLDivElement>(null);
 
   const hasTypescript = Object.keys(files).some(
-    (file) => file.includes('.ts') || file.includes('.tsx')
+    (file) => file.includes(".ts") || file.includes(".tsx"),
   );
 
   const decorators = getHighlightedLines(highlightedLines, currentTemplate);
 
   const sandpackTemplate = useMemo(
-    () =>
-      currentTemplate === 'react-ts' && hasTypescript
-        ? currentTemplate
-        : 'react',
-    [currentTemplate, hasTypescript]
+    () => (currentTemplate === "react-ts" && hasTypescript ? currentTemplate : "react"),
+    [currentTemplate, hasTypescript],
   );
 
   // map current template to its mime type
   const mimeType = useMemo(
-    () => (sandpackTemplate === 'react-ts' ? '.ts' : '.js'),
-    [sandpackTemplate]
+    () => (sandpackTemplate === "react-ts" ? ".ts" : ".js"),
+    [sandpackTemplate],
   );
 
   // get entry file by current template
   const entryFile = useMemo(
-    () => (sandpackTemplate === 'react-ts' ? '/index.tsx' : '/index.js'),
-    [sandpackTemplate]
+    () => (sandpackTemplate === "react-ts" ? "/index.tsx" : "/index.js"),
+    [sandpackTemplate],
   );
 
   // filter files by current template
@@ -92,6 +92,7 @@ const Sandpack: React.FC<React.PropsWithChildren<SandpackProps>> = ({
       // @ts-ignore
       acc[key] = files[key];
     }
+
     return acc;
   }, {});
 
@@ -102,89 +103,86 @@ const Sandpack: React.FC<React.PropsWithChildren<SandpackProps>> = ({
       const bFile = files[b] as string;
       const aName = getFileName(a);
       const bName = getFileName(b);
+
       if (aFile?.includes(bName)) {
         return -1;
       }
       if (bFile.includes(aName)) {
         return 1;
       }
+
       return 0;
     })
     .reduce((acc, key) => {
       return {
         ...acc,
-        [key]: files[key]
+        [key]: files[key],
       };
     }, {});
 
   return (
     <SandpackProvider
       skipEval
-      template={sandpackTemplate}
       customSetup={{
         files: {
           ...sortedFiles,
           [entryFile]: {
             code: entry,
-            hidden: true
-          }
+            hidden: true,
+          },
         },
         entry: entryFile,
         dependencies: {
-          '@nextui-org/react': 'latest'
-        }
+          "@nextui-org/react": "latest",
+        },
       }}
+      template={sandpackTemplate}
     >
       <SandpackLayout
-        theme={nextuiTheme}
         style={{
           // @ts-ignore
-          '--sp-border-radius': 'var(--nextui-radii-lg)',
-          '--sp-colors-fg-inactive': 'transparent'
+          "--sp-border-radius": "var(--nextui-radii-lg)",
+          "--sp-colors-fg-inactive": "transparent",
         }}
+        theme={nextuiTheme}
       >
-        <Grid.Container css={{ maxWidth: '100%' }}>
+        <Grid.Container css={{maxWidth: "100%"}}>
           <Grid
-            xs={12}
             css={{
-              height: showPreview ? '350px' : 'auto'
+              height: showPreview ? "350px" : "auto",
             }}
+            xs={12}
           >
             {showPreview ? <SandpackPreview /> : children}
           </Grid>
           <Grid
             ref={editorContainerRef}
-            xs={12}
             css={{
-              maxHeight: 'auto',
-              position: 'relative',
-              '.sp-playground-buttons': {
-                opacity: 0
+              maxHeight: "auto",
+              position: "relative",
+              ".sp-playground-buttons": {
+                opacity: 0,
+              },
+              "&:hover": {
+                ".sp-playground-buttons": {
+                  opacity: 1,
+                },
               },
-              '&:hover': {
-                '.sp-playground-buttons': {
-                  opacity: 1
-                }
+              ".sp-stack": {
+                background: "var(--sp-colors-bg-default)",
+                borderRadius: "$lg",
+                overflowX: "auto",
               },
-              '.sp-stack': {
-                background: 'var(--sp-colors-bg-default)',
-                borderRadius: '$lg',
-                overflowX: 'auto'
+              ".sp-cm": {
+                p: "var(--sp-space-4)",
               },
-              '.sp-cm': {
-                p: 'var(--sp-space-4)'
+              ".cm-scroller::-webkit-scrollbar": {
+                width: "0px",
               },
-              '.cm-scroller::-webkit-scrollbar': {
-                width: '0px'
-              }
             }}
+            xs={12}
           >
-            {showEditor && (
-              <CodeViewer
-                containerRef={editorContainerRef}
-                decorators={decorators}
-              />
-            )}
+            {showEditor && <CodeViewer containerRef={editorContainerRef} decorators={decorators} />}
             <StyledPlaygroundButtons className="sp-playground-buttons">
               {showReportBug && <BugReportButton />}
               {showCopyCode && <CopyButton />}
@@ -192,10 +190,7 @@ const Sandpack: React.FC<React.PropsWithChildren<SandpackProps>> = ({
             </StyledPlaygroundButtons>
 
             {hasTypescript && sandpackTemplate && (
-              <LanguageSelector
-                template={sandpackTemplate}
-                onChange={setCurrentTemplate}
-              />
+              <LanguageSelector template={sandpackTemplate} onChange={setCurrentTemplate} />
             )}
           </Grid>
         </Grid.Container>
diff --git a/apps/docs/src/components/sandpack/styles.ts b/apps/docs/src/components/sandpack/styles.ts
index f2ecf1aedf..6ecf21fb00 100644
--- a/apps/docs/src/components/sandpack/styles.ts
+++ b/apps/docs/src/components/sandpack/styles.ts
@@ -1,49 +1,49 @@
-import { styled } from '@nextui-org/react';
+import {styled} from "@nextui-org/react";
 
-export const StyledPlaygroundButtons = styled('div', {
-  transition: '$default',
-  position: 'absolute',
-  right: '$4',
-  top: '$7',
-  d: 'flex',
-  jc: 'center',
-  ai: 'center',
-  '.sp-language-icon': {
-    transition: '$default',
-    fill: 'var(--sp-colors-fg-default)',
-    ml: '$2',
-    '&:hover': {
-      opacity: 0.8
-    }
+export const StyledPlaygroundButtons = styled("div", {
+  transition: "$default",
+  position: "absolute",
+  right: "$4",
+  top: "$7",
+  d: "flex",
+  jc: "center",
+  ai: "center",
+  ".sp-language-icon": {
+    transition: "$default",
+    fill: "var(--sp-colors-fg-default)",
+    ml: "$2",
+    "&:hover": {
+      opacity: 0.8,
+    },
   },
-  '.sp-language-icon--selected': {
-    fill: 'var(--sp-colors-fg-active)'
+  ".sp-language-icon--selected": {
+    fill: "var(--sp-colors-fg-active)",
   },
   variants: {
     bottom: {
       true: {
-        top: 'auto',
-        right: '$5',
-        bottom: '$7'
-      }
-    }
-  }
+        top: "auto",
+        right: "$5",
+        bottom: "$7",
+      },
+    },
+  },
 });
 
-export const StyledLanguageButton = styled('button', {
+export const StyledLanguageButton = styled("button", {
   // reset styles
   m: 0,
   p: 0,
-  bg: 'transparent',
-  border: 'none',
-  outline: 'none',
-  cursor: 'pointer'
+  bg: "transparent",
+  border: "none",
+  outline: "none",
+  cursor: "pointer",
 });
 
 export const StyledShoreMoreButton = styled(StyledLanguageButton, {
-  color: 'var(--sp-colors-fg-default)',
-  transition: '$default',
-  '&:hover': {
-    color: 'var(--sp-colors-fg-active)'
-  }
+  color: "var(--sp-colors-fg-default)",
+  transition: "$default",
+  "&:hover": {
+    color: "var(--sp-colors-fg-active)",
+  },
 });
diff --git a/apps/docs/src/components/sandpack/themes.ts b/apps/docs/src/components/sandpack/themes.ts
index 2a21b304fb..14e87b8194 100644
--- a/apps/docs/src/components/sandpack/themes.ts
+++ b/apps/docs/src/components/sandpack/themes.ts
@@ -1,35 +1,35 @@
-import { SandpackTheme } from '@codesandbox/sandpack-react';
+import {SandpackTheme} from "@codesandbox/sandpack-react";
 
 export const nextuiTheme: SandpackTheme = {
   palette: {
-    activeText: '#F4F4F4',
-    defaultText: 'var(--nextui-colors-codeComment)',
-    inactiveText: '#e4e7eb',
-    activeBackground: '#A258DF2b',
-    defaultBackground: 'var(--nextui-colors-codeBackground)',
-    inputBackground: '#ffffff',
-    accent: '#A258DF',
-    errorBackground: '#ffcdca',
-    errorForeground: '#811e18'
+    activeText: "#F4F4F4",
+    defaultText: "var(--nextui-colors-codeComment)",
+    inactiveText: "#e4e7eb",
+    activeBackground: "#A258DF2b",
+    defaultBackground: "var(--nextui-colors-codeBackground)",
+    inputBackground: "#ffffff",
+    accent: "#A258DF",
+    errorBackground: "#ffcdca",
+    errorForeground: "#811e18",
   },
   syntax: {
-    plain: '#F4F4F4',
+    plain: "#F4F4F4",
     comment: {
-      color: 'var(--nextui-colors-codeComment)',
-      fontStyle: 'italic'
+      color: "var(--nextui-colors-codeComment)",
+      fontStyle: "italic",
     },
-    keyword: '#c678dd',
-    tag: '#E5C07B',
-    punctuation: '#F4F4F4',
-    definition: '#F4F4F4',
-    property: '#F4F4F4',
-    static: 'var(--nextui-colors-yellow600)',
-    string: '#98C379'
+    keyword: "#c678dd",
+    tag: "#E5C07B",
+    punctuation: "#F4F4F4",
+    definition: "#F4F4F4",
+    property: "#F4F4F4",
+    static: "var(--nextui-colors-yellow600)",
+    string: "#98C379",
   },
   typography: {
-    bodyFont: 'var(--nextui-fonts-sans)',
-    monoFont: 'var(--nextui-fonts-mono)',
-    fontSize: '14px',
-    lineHeight: '1.4'
-  }
+    bodyFont: "var(--nextui-fonts-sans)",
+    monoFont: "var(--nextui-fonts-mono)",
+    fontSize: "14px",
+    lineHeight: "1.4",
+  },
 };
diff --git a/apps/docs/src/components/sandpack/types.ts b/apps/docs/src/components/sandpack/types.ts
index c1010c144e..c60f768641 100644
--- a/apps/docs/src/components/sandpack/types.ts
+++ b/apps/docs/src/components/sandpack/types.ts
@@ -1,4 +1,4 @@
-import { SandpackPredefinedTemplate } from '@codesandbox/sandpack-react';
+import {SandpackPredefinedTemplate} from "@codesandbox/sandpack-react";
 
 export type HighlightedLines =
   | string
@@ -6,7 +6,7 @@ export type HighlightedLines =
       [key in SandpackPredefinedTemplate]?: string;
     };
 
-export type Language = 'typescript' | 'javascript';
+export type Language = "typescript" | "javascript";
 
 export type HighlightedLine = {
   start?: number | string;
diff --git a/apps/docs/src/components/sandpack/utils.ts b/apps/docs/src/components/sandpack/utils.ts
index 339c527415..1fde9441f3 100644
--- a/apps/docs/src/components/sandpack/utils.ts
+++ b/apps/docs/src/components/sandpack/utils.ts
@@ -1,67 +1,55 @@
-import { SandpackPredefinedTemplate } from '@components';
-import { HighlightedLines, HighlightedLine } from './types';
-
-export type ViewportSizePreset =
-  | 'iPhone X'
-  | 'Pixel 2'
-  | 'iPad'
-  | 'Moto G4'
-  | 'Surface Duo';
-
-export type ViewportSize =
-  | ViewportSizePreset
-  | 'auto'
-  | { width: number; height: number };
-
-export type ViewportOrientation = 'portrait' | 'landscape';
-
-const VIEWPORT_SIZE_PRESET_MAP: Record<
-  ViewportSizePreset,
-  { x: number; y: number }
-> = {
-  'iPhone X': { x: 375, y: 812 },
-  iPad: { x: 768, y: 1024 },
-  'Pixel 2': { x: 411, y: 731 },
-  'Moto G4': { x: 360, y: 640 },
-  'Surface Duo': { x: 540, y: 720 }
+import {SandpackPredefinedTemplate} from "@components";
+
+import {HighlightedLines, HighlightedLine} from "./types";
+
+export type ViewportSizePreset = "iPhone X" | "Pixel 2" | "iPad" | "Moto G4" | "Surface Duo";
+
+export type ViewportSize = ViewportSizePreset | "auto" | {width: number; height: number};
+
+export type ViewportOrientation = "portrait" | "landscape";
+
+const VIEWPORT_SIZE_PRESET_MAP: Record<ViewportSizePreset, {x: number; y: number}> = {
+  "iPhone X": {x: 375, y: 812},
+  iPad: {x: 768, y: 1024},
+  "Pixel 2": {x: 411, y: 731},
+  "Moto G4": {x: 360, y: 640},
+  "Surface Duo": {x: 540, y: 720},
 };
 
-export const generateRandomId = (): string =>
-  Math.floor(Math.random() * 10000).toString();
+export const generateRandomId = (): string => Math.floor(Math.random() * 10000).toString();
 
 export const computeViewportSize = (
   viewport: ViewportSize,
-  orientation: ViewportOrientation
-): { width?: number; height?: number } => {
-  if (viewport === 'auto') {
+  orientation: ViewportOrientation,
+): {width?: number; height?: number} => {
+  if (viewport === "auto") {
     return {};
   }
 
-  if (typeof viewport === 'string') {
-    const { x, y } = VIEWPORT_SIZE_PRESET_MAP[viewport];
-    return orientation === 'portrait'
-      ? { width: x, height: y }
-      : { width: y, height: x };
+  if (typeof viewport === "string") {
+    const {x, y} = VIEWPORT_SIZE_PRESET_MAP[viewport];
+
+    return orientation === "portrait" ? {width: x, height: y} : {width: y, height: x};
   }
 
   return viewport;
 };
 
 const getLines = (lines?: string): HighlightedLine => {
-  const [start, end] = lines?.includes('-') ? lines?.split('-') : [0, 0];
+  const [start, end] = lines?.includes("-") ? lines?.split("-") : [0, 0];
 
   const count = end ? parseInt(`${end}`, 10) - parseInt(`${start}`, 10) + 1 : 0;
 
   return {
     start,
     end,
-    count
+    count,
   };
 };
 
 export const getHighlightedLines = (
   highlightedLines?: HighlightedLines,
-  template?: SandpackPredefinedTemplate
+  template?: SandpackPredefinedTemplate,
 ) => {
   if (!highlightedLines) {
     return [];
@@ -73,24 +61,25 @@ export const getHighlightedLines = (
   if (Number.isInteger(Number(highlightedLines))) {
     return [
       {
-        className: 'sp-highlight',
-        line: Number(highlightedLines)
-      }
+        className: "sp-highlight",
+        line: Number(highlightedLines),
+      },
     ];
   }
 
-  if (typeof highlightedLines === 'string') {
+  if (typeof highlightedLines === "string") {
     lines = getLines(highlightedLines);
   }
 
-  if (typeof highlightedLines === 'object' && template) {
+  if (typeof highlightedLines === "object" && template) {
     const templateLines = highlightedLines[template];
+
     if (Number.isInteger(Number(templateLines))) {
       return [
         {
-          className: 'sp-highlight',
-          line: Number(templateLines)
-        }
+          className: "sp-highlight",
+          line: Number(templateLines),
+        },
       ];
     }
     lines = getLines(templateLines);
@@ -101,12 +90,12 @@ export const getHighlightedLines = (
   }
 
   // map linesCount to { className: 'sp-highlight', line: 1 }
-  return Array.from({ length: lines.count }, (_, i) => ({
-    className: 'sp-highlight',
-    line: parseInt(`${lines.start}`, 10) + i
+  return Array.from({length: lines.count}, (_, i) => ({
+    className: "sp-highlight",
+    line: parseInt(`${lines.start}`, 10) + i,
   }));
 };
 
 export const getFileName = (filePath: string) => {
-  return filePath?.split('.')?.[0]?.replace(/\W/g, '');
+  return filePath?.split(".")?.[0]?.replace(/\W/g, "");
 };
diff --git a/apps/docs/src/components/search/autocomplete.tsx b/apps/docs/src/components/search/autocomplete.tsx
index 22c1380f4f..7490408c5a 100644
--- a/apps/docs/src/components/search/autocomplete.tsx
+++ b/apps/docs/src/components/search/autocomplete.tsx
@@ -1,57 +1,56 @@
-import * as React from 'react';
-import { createPortal } from 'react-dom';
-import cn from 'classnames';
-import { isMacOs } from 'react-device-detect';
-import { useRouter } from 'next/router';
-import { useTheme, useBodyScroll, useClickAway } from '@nextui-org/react';
+import * as React from "react";
+import {createPortal} from "react-dom";
+import cn from "classnames";
+import {isMacOs} from "react-device-detect";
+import {useRouter} from "next/router";
+import {useTheme, useBodyScroll, useClickAway} from "@nextui-org/react";
 import AutoSuggest, {
   ChangeEvent,
   OnSuggestionSelected,
   RenderSuggestionsContainerParams,
-  RenderInputComponentProps
-} from 'react-autosuggest';
-import { useIsMobile } from '@hooks/use-media-query';
-import { SearchByAlgolia, Close } from '../icons';
-import { addColorAlpha } from '@utils/index';
-import {
-  connectAutoComplete,
-  connectStateResults
-} from 'react-instantsearch-dom';
-import { isEmpty } from 'lodash';
-import { AutocompleteProvided } from 'react-instantsearch-core';
-import Keyboard from '../keyboard';
-import Suggestion from './suggestion';
-import { VisualState, useKBar } from 'kbar';
-import Blockholder from '../blockholder';
-import useIsMounted from '@hooks/use-is-mounted';
-import usePortal from '@hooks/use-portal';
-import withDeaults from '@utils/with-defaults';
+  RenderInputComponentProps,
+} from "react-autosuggest";
+import {useIsMobile} from "@hooks/use-media-query";
+import {addColorAlpha} from "@utils/index";
+import {connectAutoComplete, connectStateResults} from "react-instantsearch-dom";
+import {isEmpty} from "lodash";
+import {AutocompleteProvided} from "react-instantsearch-core";
+import {VisualState, useKBar} from "kbar";
+import useIsMounted from "@hooks/use-is-mounted";
+import usePortal from "@hooks/use-portal";
+import withDeaults from "@utils/with-defaults";
+
+import Blockholder from "../blockholder";
+import Keyboard from "../keyboard";
+import {SearchByAlgolia, Close} from "../icons";
+
+import Suggestion from "./suggestion";
 
 interface Props extends AutocompleteProvided {
   offsetTop?: number;
 }
 
 const defaultProps = {
-  offsetTop: 0
+  offsetTop: 0,
 };
 
-const Autocomplete: React.FC<Props> = ({ hits, refine, offsetTop }) => {
-  const [value, setValue] = React.useState('');
+const Autocomplete: React.FC<Props> = ({hits, refine, offsetTop}) => {
+  const [value, setValue] = React.useState("");
   const [isFocused, setIsFocused] = React.useState(false);
-  const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true });
+  const [, setBodyHidden] = useBodyScroll(null, {scrollLayer: true});
   const router = useRouter();
 
-  const suggestionsPortal = usePortal('suggestions', () => {
-    return document?.getElementById('navbar-container');
+  const suggestionsPortal = usePortal("suggestions", () => {
+    return document?.getElementById("navbar-container");
   });
-  const noResultsPortal = usePortal('no-results', () => {
-    return document?.getElementById('navbar-container');
+  const noResultsPortal = usePortal("no-results", () => {
+    return document?.getElementById("navbar-container");
   });
 
-  const { theme, isDark, type: themeType } = useTheme();
+  const {theme, isDark, type: themeType} = useTheme();
   const isMobile = useIsMobile();
 
-  const { query } = useKBar();
+  const {query} = useKBar();
   const isMounted = useIsMounted();
 
   let inputRef = React.useRef<HTMLInputElement>(null);
@@ -64,18 +63,17 @@ const Autocomplete: React.FC<Props> = ({ hits, refine, offsetTop }) => {
   React.useEffect(() => {
     if (isMobile) {
       const isOpen = !isEmpty(
-        document.getElementsByClassName(
-          'react-autosuggest__suggestions-container--open'
-        )
+        document.getElementsByClassName("react-autosuggest__suggestions-container--open"),
       );
       const noResults = isEmpty(hits) && !isEmpty(value);
+
       setBodyHidden(isFocused && (isOpen || noResults));
     } else {
       setBodyHidden(false);
     }
   }, [hits, value, isFocused, isMobile]);
 
-  const onChange = (_: unknown, { newValue }: ChangeEvent) => {
+  const onChange = (_: unknown, {newValue}: ChangeEvent) => {
     setValue(newValue);
   };
 
@@ -83,20 +81,17 @@ const Autocomplete: React.FC<Props> = ({ hits, refine, offsetTop }) => {
     value,
     onChange,
     ref: inputRef,
-    type: 'search',
+    type: "search",
     onFocus: () => setIsFocused(true),
-    onBlur: () => setIsFocused(false)
+    onBlur: () => setIsFocused(false),
   };
 
-  const onSuggestionsFetchRequested = ({ value }: any) => {
+  const onSuggestionsFetchRequested = ({value}: any) => {
     refine(value);
   };
 
-  const onSuggestionSelected: OnSuggestionSelected<any> = (
-    _,
-    { suggestion, method }
-  ) => {
-    if (method === 'enter') {
+  const onSuggestionSelected: OnSuggestionSelected<any> = (_, {suggestion, method}) => {
+    if (method === "enter") {
       onClear();
       router.push(suggestion.url);
     }
@@ -104,14 +99,13 @@ const Autocomplete: React.FC<Props> = ({ hits, refine, offsetTop }) => {
 
   const getSuggestionValue = () => value;
 
-  const renderSuggestion = (
-    hit: any,
-    { isHighlighted }: { isHighlighted: boolean }
-  ) => <Suggestion highlighted={isHighlighted} hit={hit} />;
+  const renderSuggestion = (hit: any, {isHighlighted}: {isHighlighted: boolean}) => (
+    <Suggestion highlighted={isHighlighted} hit={hit} />
+  );
 
   const onClear = () => {
     refine();
-    setValue('');
+    setValue("");
     inputRef && inputRef?.current?.blur();
   };
 
@@ -119,7 +113,7 @@ const Autocomplete: React.FC<Props> = ({ hits, refine, offsetTop }) => {
     query.setVisualState((vs) =>
       [VisualState.animatingOut, VisualState.hidden].includes(vs)
         ? VisualState.animatingIn
-        : VisualState.animatingOut
+        : VisualState.animatingOut,
     );
   };
 
@@ -127,11 +121,7 @@ const Autocomplete: React.FC<Props> = ({ hits, refine, offsetTop }) => {
     (inputProps: RenderInputComponentProps) => {
       return (
         <label className="search__input-container">
-          <input
-            className="search__input"
-            {...inputProps}
-            placeholder="Search..."
-          />
+          <input className="search__input" {...inputProps} placeholder="Search..." />
           {!value ? (
             <span className="search__placeholder-container">
               <Keyboard
@@ -144,42 +134,42 @@ const Autocomplete: React.FC<Props> = ({ hits, refine, offsetTop }) => {
               </Keyboard>
             </span>
           ) : (
-            <span className="search__reset-container" onClick={onClear}>
-              <Close size={16} fill={theme?.colors?.accents6?.value} />
+            <span className="search__reset-container" role="button" onClick={onClear}>
+              <Close fill={theme?.colors?.accents6?.value} size={16} />
             </span>
           )}
         </label>
       );
     },
-    [value, themeType]
+    [value, themeType],
   );
 
   const renderSuggestionsContainer = ({
     containerProps,
-    children
+    children,
   }: RenderSuggestionsContainerParams) =>
     suggestionsPortal ? (
       createPortal(
         <div {...containerProps}>
           <a
+            className="react-autosuggest__suggestions-header"
             href="https://www.algolia.com/"
-            target="_blank"
             rel="noreferrer"
-            className="react-autosuggest__suggestions-header"
+            target="_blank"
           >
             <SearchByAlgolia fill={theme?.colors?.accents6?.value} />
           </a>
           {children}
         </div>,
-        suggestionsPortal
+        suggestionsPortal,
       )
     ) : (
       <div {...containerProps}>
         <a
+          className="react-autosuggest__suggestions-header"
           href="https://www.algolia.com/"
-          target="_blank"
           rel="noreferrer"
-          className="react-autosuggest__suggestions-header"
+          target="_blank"
         >
           <SearchByAlgolia fill={theme?.colors?.accents6?.value} />
         </a>
@@ -187,40 +177,33 @@ const Autocomplete: React.FC<Props> = ({ hits, refine, offsetTop }) => {
       </div>
     );
 
-  const NoResults = connectStateResults(
-    ({ searchState, searchResults, searching }) => {
-      const open =
-        searchState &&
-        searchState.query &&
-        !searching &&
-        searchResults &&
-        searchResults.nbHits === 0;
-      const NoResultsContainer = () => (
-        <div className="no-results">
-          <span>
-            No results for <span>"{value}"</span>
-          </span>
-          <br />
-          <span>Try again with a different keyword</span>
-        </div>
-      );
-      if (isMobile && open) {
-        if (!noResultsPortal) return null;
-        return createPortal(<NoResultsContainer />, noResultsPortal);
-      }
-      return open ? <NoResultsContainer /> : null;
+  const NoResults = connectStateResults(({searchState, searchResults, searching}) => {
+    const open =
+      searchState && searchState.query && !searching && searchResults && searchResults.nbHits === 0;
+    const NoResultsContainer = () => (
+      <div className="no-results">
+        <span>
+          No results for <span>&quot;{value}&quot;</span>
+        </span>
+        <br />
+        <span>Try again with a different keyword</span>
+      </div>
+    );
+
+    if (isMobile && open) {
+      if (!noResultsPortal) return null;
+
+      return createPortal(<NoResultsContainer />, noResultsPortal);
     }
-  );
+
+    return open ? <NoResultsContainer /> : null;
+  });
 
   if (!isMounted) {
     return (
       <>
-        <Blockholder
-          className="search__placeholder-block"
-          alt="search placeholder"
-          height="38px"
-        />
-        <style jsx global>{`
+        <Blockholder alt="search placeholder" className="search__placeholder-block" height="38px" />
+        <style global jsx>{`
           .search__placeholder-block {
             max-width: 200px;
           }
@@ -247,27 +230,27 @@ const Autocomplete: React.FC<Props> = ({ hits, refine, offsetTop }) => {
 
   return (
     <div
-      className={cn('search__container', {
+      className={cn("search__container", {
         focused: isFocused,
-        'has-value': !!value.length
+        "has-value": !!value.length,
       })}
     >
       <AutoSuggest
-        highlightFirstSuggestion={true}
-        onSuggestionsFetchRequested={onSuggestionsFetchRequested}
-        onSuggestionsClearRequested={onClear}
-        onSuggestionSelected={onSuggestionSelected}
         getSuggestionValue={getSuggestionValue}
-        renderSuggestion={renderSuggestion}
+        highlightFirstSuggestion={true}
+        inputProps={inputProps}
         renderInputComponent={renderInput}
+        renderSuggestion={renderSuggestion}
         renderSuggestionsContainer={renderSuggestionsContainer}
         suggestions={hits}
-        inputProps={inputProps}
+        onSuggestionSelected={onSuggestionSelected}
+        onSuggestionsClearRequested={onClear}
+        onSuggestionsFetchRequested={onSuggestionsFetchRequested}
       />
 
       <NoResults />
 
-      <style jsx global>
+      <style global jsx>
         {`
           .search__container {
             display: flex;
@@ -321,9 +304,7 @@ const Autocomplete: React.FC<Props> = ({ hits, refine, offsetTop }) => {
             align-items: center;
             z-index: 9999;
             background: ${addColorAlpha(theme?.colors?.background?.value, 0.7)};
-            box-shadow: ${isDark
-              ? '0px 5px 20px -5px rgba(0, 0, 0, 0.1)'
-              : 'none'};
+            box-shadow: ${isDark ? "0px 5px 20px -5px rgba(0, 0, 0, 0.1)" : "none"};
             border-radius: 8px;
           }
           .react-autosuggest__input {
@@ -369,9 +350,7 @@ const Autocomplete: React.FC<Props> = ({ hits, refine, offsetTop }) => {
           .no-results {
             background: var(--nextui-colors-accents0);
           }
-          @supports (
-            (-webkit-backdrop-filter: none) or (backdrop-filter: none)
-          ) {
+          @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
             .search__input-container,
             .react-autosuggest__suggestions-container,
             .no-results {
diff --git a/apps/docs/src/components/search/index.ts b/apps/docs/src/components/search/index.ts
index 87aed32e68..e532aa21f5 100644
--- a/apps/docs/src/components/search/index.ts
+++ b/apps/docs/src/components/search/index.ts
@@ -1 +1 @@
-export { default as SearchInput } from './instant-search';
+export {default as SearchInput} from "./instant-search";
diff --git a/apps/docs/src/components/search/input.tsx b/apps/docs/src/components/search/input.tsx
index d050f061df..b59d28baac 100644
--- a/apps/docs/src/components/search/input.tsx
+++ b/apps/docs/src/components/search/input.tsx
@@ -1,7 +1,8 @@
-import * as React from 'react';
-import { connectStateResults } from 'react-instantsearch-dom';
-import { useTheme, Loading } from '@nextui-org/react';
-import { Search, Close } from '../icons';
+import * as React from "react";
+import {connectStateResults} from "react-instantsearch-dom";
+import {useTheme, Loading} from "@nextui-org/react";
+
+import {Search, Close} from "../icons";
 
 export interface InputProps {
   value: string;
@@ -9,31 +10,27 @@ export interface InputProps {
   searching: boolean;
 }
 
-const Input: React.FC<InputProps> = ({
-  onClear,
-  value,
-  searching,
-  ...inputProps
-}) => {
-  const { theme } = useTheme();
+const Input: React.FC<InputProps> = ({onClear, value, searching, ...inputProps}) => {
+  const {theme} = useTheme();
+
   return (
     <div className="search__input-container">
       <input {...inputProps} value={value} />
       {!value ? (
         <span className="search__placeholder-container">
           <Search
-            size={16}
-            fill={theme?.colors?.accents8?.value}
             className="search__placeholder-icon"
+            fill={theme?.colors?.accents8?.value}
+            size={16}
           />
           <p className="search__placeholder-text">Search...</p>
         </span>
       ) : (
-        <span className="search__reset-container" onClick={() => onClear()}>
+        <span className="search__reset-container" role="button" onClick={() => onClear()}>
           {searching ? (
             <Loading size="xs" />
           ) : (
-            <Close size={16} fill={theme?.colors?.accents6?.value} />
+            <Close fill={theme?.colors?.accents6?.value} size={16} />
           )}
         </span>
       )}
diff --git a/apps/docs/src/components/search/instant-search.tsx b/apps/docs/src/components/search/instant-search.tsx
index eba157addf..4239128834 100644
--- a/apps/docs/src/components/search/instant-search.tsx
+++ b/apps/docs/src/components/search/instant-search.tsx
@@ -1,11 +1,9 @@
-import * as React from 'react';
-import {
-  InstantSearch as BaseInstantSearch,
-  Configure
-} from 'react-instantsearch-dom';
-import getAlgoliaClient from '@lib/get-algolia';
-import Autocomplete from './autocomplete';
-import { useIsMobile } from '@hooks/use-media-query';
+import * as React from "react";
+import {InstantSearch as BaseInstantSearch, Configure} from "react-instantsearch-dom";
+import getAlgoliaClient from "@lib/get-algolia";
+import {useIsMobile} from "@hooks/use-media-query";
+
+import Autocomplete from "./autocomplete";
 
 const searchClient = getAlgoliaClient();
 const INDEX_NAME = process.env.NEXT_PUBLIC_ALGOLIA_INDEX;
@@ -16,11 +14,9 @@ export interface Props {
 
 const InstantSearch: React.FC<Props> = (props) => {
   const isMobile = useIsMobile();
+
   return (
-    <BaseInstantSearch
-      indexName={INDEX_NAME || 'prod_docs'}
-      searchClient={searchClient}
-    >
+    <BaseInstantSearch indexName={INDEX_NAME || "prod_docs"} searchClient={searchClient}>
       <Configure hitsPerPage={isMobile ? 6 : 8} />
       <Autocomplete {...props} />
     </BaseInstantSearch>
diff --git a/apps/docs/src/components/search/suggestion.tsx b/apps/docs/src/components/search/suggestion.tsx
index 878b423c08..af00c818fa 100644
--- a/apps/docs/src/components/search/suggestion.tsx
+++ b/apps/docs/src/components/search/suggestion.tsx
@@ -1,38 +1,40 @@
-import * as React from 'react';
-import cn from 'classnames';
-import { Highlight } from 'react-instantsearch-dom';
-import NextLink from 'next/link';
-import { Hit } from 'react-instantsearch-core';
-import { useTheme } from '@nextui-org/react';
-import { CodeDocument, Hash, ArrowRight } from '../icons';
-import { addColorAlpha } from '@utils/index';
-import { includes } from 'lodash';
+import * as React from "react";
+import cn from "classnames";
+import {Highlight} from "react-instantsearch-dom";
+import NextLink from "next/link";
+import {Hit} from "react-instantsearch-core";
+import {useTheme} from "@nextui-org/react";
+import {addColorAlpha} from "@utils/index";
+import {includes} from "lodash";
+
+import {CodeDocument, Hash, ArrowRight} from "../icons";
 
 interface Props {
   hit: Hit;
   highlighted: boolean;
 }
 
-const Suggestion: React.FC<Props> = ({ hit, highlighted }) => {
-  const { theme } = useTheme();
+const Suggestion: React.FC<Props> = ({hit, highlighted}) => {
+  const {theme} = useTheme();
+
   return (
     <NextLink href={hit.url}>
-      <span className={cn('suggestion__container', { highlighted })}>
+      <span className={cn("suggestion__container", {highlighted})}>
         <div className="suggestion__icon-container">
-          {hit.type !== 'lvl1' || includes(hit.url, '#') ? (
+          {hit.type !== "lvl1" || includes(hit.url, "#") ? (
             <Hash fill={theme?.colors?.accents6?.value} />
           ) : (
             <CodeDocument fill={theme?.colors?.accents6?.value} />
           )}
         </div>
         <div className="suggestion__data-container">
-          {hit.type !== 'lvl1' && (
+          {hit.type !== "lvl1" && (
             <span className="suggestion__title">
-              <Highlight hit={hit} attribute="hierarchy.lvl1" tagName="mark" />
+              <Highlight attribute="hierarchy.lvl1" hit={hit} tagName="mark" />
             </span>
           )}
           <span className="suggestion__content">
-            <Highlight hit={hit} attribute="content" tagName="mark" />
+            <Highlight attribute="content" hit={hit} tagName="mark" />
           </span>
         </div>
         <div>
@@ -47,8 +49,7 @@ const Suggestion: React.FC<Props> = ({ hit, highlighted }) => {
               cursor: pointer;
               padding: 16px 8px;
               justify-content: space-between;
-              border-bottom: 1px solid
-                ${addColorAlpha(theme?.colors?.border?.value, 0.6)};
+              border-bottom: 1px solid ${addColorAlpha(theme?.colors?.border?.value, 0.6)};
               min-height: 68px;
               transition: all 0.2s ease;
             }
diff --git a/apps/docs/src/components/sidebar/category.tsx b/apps/docs/src/components/sidebar/category.tsx
index 5eef44f9f5..e0b10a8a1b 100644
--- a/apps/docs/src/components/sidebar/category.tsx
+++ b/apps/docs/src/components/sidebar/category.tsx
@@ -1,11 +1,12 @@
-import React, { useRef, useMemo, useState, useEffect } from 'react';
-import cn from 'classnames';
-import Image from 'next/image';
-import ArrowRight from '../icons/arrow-right';
-import withDefaults from '@utils/with-defaults';
-import { useTheme } from '@nextui-org/react';
-import { Route } from '@lib/docs/page';
-import { Badge } from '@components';
+import React, {useRef, useMemo, useState, useEffect} from "react";
+import cn from "classnames";
+import Image from "next/image";
+import withDefaults from "@utils/with-defaults";
+import {useTheme} from "@nextui-org/react";
+import {Route} from "@lib/docs/page";
+import {Badge} from "@components";
+
+import ArrowRight from "../icons/arrow-right";
 
 export interface Props {
   level: number;
@@ -22,7 +23,7 @@ const defaultProps = {
   level: 1,
   isMobile: false,
   selected: false,
-  opened: false
+  opened: false,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
@@ -38,10 +39,10 @@ const Category: React.FC<React.PropsWithChildren<CategoryProps>> = ({
   iconUrl,
   updated,
   opened,
-  children
+  children,
 }) => {
   const ref = useRef<HTMLDivElement>(null);
-  const { theme, isDark } = useTheme();
+  const {theme, isDark} = useTheme();
   const [toggle, setToggle] = useState<boolean>(selected || opened);
   const [shouldScroll, setShouldScroll] = useState<boolean>(false);
 
@@ -55,7 +56,7 @@ const Category: React.FC<React.PropsWithChildren<CategoryProps>> = ({
 
   const postsHeight = useMemo(
     () => routes.length * (isMobile ? 32 : 26) + margin * (routes.length - 1),
-    [routes, isMobile]
+    [routes, isMobile],
   );
 
   // If a category is selected indirectly, open it. This can happen when using the search input
@@ -69,9 +70,10 @@ const Category: React.FC<React.PropsWithChildren<CategoryProps>> = ({
   useEffect(() => {
     if (toggle && shouldScroll) {
       const content = document.querySelector(
-        isMobile ? '.docs-dropdown' : '.sidebar-content'
+        isMobile ? ".docs-dropdown" : ".sidebar-content",
       ) as HTMLDivElement;
       let height = 0;
+
       // 10 is added for better margin
       if (ref.current && content) {
         height = ref.current?.offsetTop - (isMobile ? 10 : content?.offsetTop);
@@ -82,33 +84,26 @@ const Category: React.FC<React.PropsWithChildren<CategoryProps>> = ({
   }, [toggle, shouldScroll, isMobile]);
 
   return (
-    <div
-      ref={ref}
-      className={cn('category', levelClass, { open: toggle, selected })}
-    >
-      <div className="label-container" onClick={toggleCategory}>
+    <div ref={ref} className={cn("category", levelClass, {open: toggle, selected})}>
+      <div className="label-container" role="button" onClick={toggleCategory}>
         {iconUrl && (
           <Image
-            width={24}
-            height={24}
-            className="category-image"
-            src={iconUrl.replace('.svg', isDark ? '-dark.svg' : '-light.svg')}
             alt={`${title} icon`}
+            className="category-image"
+            height={24}
+            src={iconUrl.replace(".svg", isDark ? "-dark.svg" : "-light.svg")}
+            width={24}
           />
         )}
         <span className="label noselect">{title}</span>
         <ArrowRight
           className="arrow-right"
-          width={14}
-          height={14}
           fill={theme?.colors?.accents8?.value}
+          height={14}
+          width={14}
         />
         {updated && (
-          <Badge
-            className="category__update-badge"
-            type="secondary"
-            css={{ ml: '$6' }}
-          >
+          <Badge className="category__update-badge" css={{ml: "$6"}} type="secondary">
             Updated
           </Badge>
         )}
diff --git a/apps/docs/src/components/sidebar/index.tsx b/apps/docs/src/components/sidebar/index.tsx
index 9195063ac0..b7b3b1c05a 100644
--- a/apps/docs/src/components/sidebar/index.tsx
+++ b/apps/docs/src/components/sidebar/index.tsx
@@ -1,12 +1,14 @@
-import * as React from 'react';
-import withDefaults from '@utils/with-defaults';
-import { Route, addTagToSlug } from '@lib/docs/page';
-import { removeFromLast } from '@utils/index';
-import { useIsMobile } from '@hooks/use-media-query';
-import { Heading } from '@components';
-import Category from './category';
-import Post from './post';
-import { NavLinkProps } from '../nav-link';
+import * as React from "react";
+import withDefaults from "@utils/with-defaults";
+import {Route, addTagToSlug} from "@lib/docs/page";
+import {removeFromLast} from "@utils/index";
+import {useIsMobile} from "@hooks/use-media-query";
+import {Heading} from "@components";
+
+import {NavLinkProps} from "../nav-link";
+
+import Category from "./category";
+import Post from "./post";
 
 export interface Props {
   routes?: Route[];
@@ -18,8 +20,8 @@ export interface Props {
 
 const defaultProps = {
   level: 1,
-  tag: '',
-  slug: ''
+  tag: "",
+  slug: "",
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -28,100 +30,83 @@ export type SidebarProps = Props & typeof defaultProps & NativeAttrs;
 
 function getCategoryPath(routes: Route[]): string {
   const route = routes.find((r) => r.path);
-  return route && route.path ? removeFromLast(route.path, '/') : '';
+
+  return route && route.path ? removeFromLast(route.path, "/") : "";
 }
 
-const Sidebar: React.FC<SidebarProps> = ({
-  routes,
-  level,
-  tag,
-  slug,
-  onPostClick
-}) => {
+const Sidebar: React.FC<SidebarProps> = ({routes, level, tag, slug, onPostClick}) => {
   const isMobile = useIsMobile();
+
   return (
     <>
-      {routes?.map(
-        ({
-          path,
-          title,
-          icon,
-          routes,
-          newPost,
-          comingSoon,
-          updated,
-          heading,
-          open
-        }) => {
-          if (routes) {
-            const pathname = getCategoryPath(routes);
-            const categorySelected = slug.startsWith(pathname);
-            const opened = categorySelected || isMobile ? false : open;
-
-            if (heading) {
-              return (
-                <Heading key={pathname} title={title}>
-                  <Sidebar
-                    routes={routes}
-                    level={level + 1}
-                    tag={tag}
-                    slug={slug}
-                    onPostClick={onPostClick}
-                  />
-                </Heading>
-              );
-            }
+      {routes?.map(({path, title, icon, routes, newPost, comingSoon, updated, heading, open}) => {
+        if (routes) {
+          const pathname = getCategoryPath(routes);
+          const categorySelected = slug.startsWith(pathname);
+          const opened = categorySelected || isMobile ? false : open;
 
+          if (heading) {
             return (
-              <Category
-                key={pathname}
-                routes={routes}
-                isMobile={isMobile}
-                iconUrl={icon}
-                level={level}
-                title={title}
-                selected={categorySelected}
-                opened={opened}
-                updated={updated}
-              >
+              <Heading key={pathname} title={title}>
                 <Sidebar
-                  routes={routes}
                   level={level + 1}
-                  tag={tag}
+                  routes={routes}
                   slug={slug}
+                  tag={tag}
                   onPostClick={onPostClick}
                 />
-              </Category>
+              </Heading>
             );
           }
-          const href = '/docs/[[...slug]]';
-          const pagePath: string | undefined =
-            path && removeFromLast(path, '.');
-          const pathname = pagePath && addTagToSlug(pagePath, tag);
-          const selected = pagePath && pagePath === slug;
-
-          const route = {
-            href,
-            path,
-            title,
-            pathname,
-            selected,
-            comingSoon,
-            updated,
-            newPost
-          } as NavLinkProps;
 
           return (
-            <Post
-              key={title}
+            <Category
+              key={pathname}
+              iconUrl={icon}
               isMobile={isMobile}
               level={level}
-              route={route}
-              onClick={() => onPostClick && onPostClick(route)}
-            />
+              opened={opened}
+              routes={routes}
+              selected={categorySelected}
+              title={title}
+              updated={updated}
+            >
+              <Sidebar
+                level={level + 1}
+                routes={routes}
+                slug={slug}
+                tag={tag}
+                onPostClick={onPostClick}
+              />
+            </Category>
           );
         }
-      )}
+        const href = "/docs/[[...slug]]";
+        const pagePath: string | undefined = path && removeFromLast(path, ".");
+        const pathname = pagePath && addTagToSlug(pagePath, tag);
+        const selected = pagePath && pagePath === slug;
+
+        const route = {
+          href,
+          path,
+          title,
+          pathname,
+          selected,
+          comingSoon,
+          updated,
+          newPost,
+        } as NavLinkProps;
+
+        return (
+          <Post
+            key={title}
+            isMobile={isMobile}
+            level={level}
+            route={route}
+            onClick={() => onPostClick && onPostClick(route)}
+          />
+        );
+      })}
     </>
   );
 };
diff --git a/apps/docs/src/components/sidebar/post.tsx b/apps/docs/src/components/sidebar/post.tsx
index 491755cf82..aedfc662ab 100644
--- a/apps/docs/src/components/sidebar/post.tsx
+++ b/apps/docs/src/components/sidebar/post.tsx
@@ -1,9 +1,10 @@
-import React, { useRef, useEffect, useMemo } from 'react';
-import cn from 'classnames';
-import NavLink, { NavLinkProps } from '../nav-link';
-import withDefaults from '@utils/with-defaults';
-import { Badge } from '@components';
-import { useTheme, Spacer } from '@nextui-org/react';
+import React, {useRef, useEffect, useMemo} from "react";
+import cn from "classnames";
+import withDefaults from "@utils/with-defaults";
+import {Badge} from "@components";
+import {useTheme, Spacer} from "@nextui-org/react";
+
+import NavLink, {NavLinkProps} from "../nav-link";
 
 export interface Props {
   level: number;
@@ -14,7 +15,7 @@ export interface Props {
 
 const defaultProps = {
   level: 1,
-  isMobile: false
+  isMobile: false,
 };
 
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
@@ -25,17 +26,15 @@ const Post: React.FC<React.PropsWithChildren<PostProps>> = ({
   isMobile,
   route,
   level = 1,
-  onClick
+  onClick,
 }) => {
   const selectedRef = useRef<HTMLDivElement>(null);
   const ref = route.selected ? selectedRef : null;
-  const { theme, isDark } = useTheme();
+  const {theme, isDark} = useTheme();
 
   useEffect(() => {
     if (ref && ref.current && !isMobile) {
-      const content = document.querySelector(
-        '.sidebar-content'
-      ) as HTMLDivElement;
+      const content = document.querySelector(".sidebar-content") as HTMLDivElement;
       // 32 is the top and bottom margin for `.link`
       const height = ref.current.offsetTop - 32;
 
@@ -48,14 +47,12 @@ const Post: React.FC<React.PropsWithChildren<PostProps>> = ({
   const linkColor = useMemo(() => {
     if (route.selected) return theme?.colors?.text?.value;
     if (route.comingSoon) return theme?.colors?.accents5?.value;
+
     return theme?.colors?.accents8?.value;
   }, [isDark, route.selected]);
 
   return (
-    <div
-      ref={ref}
-      className={cn('link', `level-${level}`, { disabled: route?.comingSoon })}
-    >
+    <div ref={ref} className={cn("link", `level-${level}`, {disabled: route?.comingSoon})}>
       <NavLink {...route} color={linkColor} onClick={onClick} />
       <Spacer inline x={0.2} />
       {route?.newPost && (
@@ -84,7 +81,7 @@ const Post: React.FC<React.PropsWithChildren<PostProps>> = ({
           cursor: not-allowed;
         }
         .link::before {
-          content: '';
+          content: "";
           flex-basis: 4px;
           flex-shrink: 0;
           display: block;
diff --git a/apps/docs/src/components/table-of-content/index.tsx b/apps/docs/src/components/table-of-content/index.tsx
index 3c110e79dd..1766af0f84 100644
--- a/apps/docs/src/components/table-of-content/index.tsx
+++ b/apps/docs/src/components/table-of-content/index.tsx
@@ -1,26 +1,23 @@
-import * as React from 'react';
-import cn from 'classnames';
-import { useScrollSpy } from '@hooks/use-scroll-spy';
-import { Heading } from '@utils/get-headings';
-import { useTheme } from '@nextui-org/react';
-import { useIsMobile } from '@hooks/use-media-query';
+import * as React from "react";
+import cn from "classnames";
+import {useScrollSpy} from "@hooks/use-scroll-spy";
+import {Heading} from "@utils/get-headings";
+import {useTheme} from "@nextui-org/react";
+import {useIsMobile} from "@hooks/use-media-query";
 
 interface TableOfContentProps {
   headings: Heading[];
 }
 
-const TableOfContent: React.FC<TableOfContentProps> = ({
-  headings,
-  ...props
-}) => {
+const TableOfContent: React.FC<TableOfContentProps> = ({headings, ...props}) => {
   const isMobile = useIsMobile();
   const activeId = useScrollSpy(
-    headings.map(({ id }) => `[id="${id}"]`),
+    headings.map(({id}) => `[id="${id}"]`),
     {
-      rootMargin: '0% 0% -80% 0%'
-    }
+      rootMargin: "0% 0% -80% 0%",
+    },
   );
-  const { theme } = useTheme();
+  const {theme} = useTheme();
 
   if (headings.length <= 0 || isMobile) return null;
 
@@ -31,8 +28,8 @@ const TableOfContent: React.FC<TableOfContentProps> = ({
         {headings.map((heading, i) => (
           <li
             key={i}
-            className={cn('list-item', {
-              active: activeId == heading.id
+            className={cn("list-item", {
+              active: activeId == heading.id,
             })}
           >
             <a href={`#${heading.id}`}>{heading.text}</a>
@@ -80,7 +77,7 @@ const TableOfContent: React.FC<TableOfContentProps> = ({
           font-weight: 500;
         }
         .list-item:after {
-          content: '';
+          content: "";
           position: absolute;
           top: 50%;
           right: auto;
diff --git a/apps/docs/src/components/templates/custom-button/index.tsx b/apps/docs/src/components/templates/custom-button/index.tsx
index 15f2c48732..33d7ff71ac 100644
--- a/apps/docs/src/components/templates/custom-button/index.tsx
+++ b/apps/docs/src/components/templates/custom-button/index.tsx
@@ -1,27 +1,22 @@
-import React from 'react';
-import { Button } from '@nextui-org/react';
-import confetti from 'canvas-confetti';
+import React from "react";
+import {Button} from "@nextui-org/react";
+import confetti from "canvas-confetti";
 
 const CustomButton = () => {
-  const handleConfetti = (
-    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
-  ) => {
-    const { currentTarget } = event;
-    const { clientWidth, clientHeight } = document.documentElement;
-    const {
-      y: targetY,
-      x: targetX,
-      width: targetWidth
-    } = currentTarget.getBoundingClientRect();
+  const handleConfetti = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    const {currentTarget} = event;
+    const {clientWidth, clientHeight} = document.documentElement;
+    const {y: targetY, x: targetX, width: targetWidth} = currentTarget.getBoundingClientRect();
     const targetCenterX = targetX + targetWidth / 2;
+
     confetti({
       zIndex: 999,
       particleCount: 100,
       spread: 70,
       origin: {
         y: targetY / clientHeight,
-        x: targetCenterX / clientWidth
-      }
+        x: targetCenterX / clientWidth,
+      },
     });
   };
 
@@ -29,39 +24,39 @@ const CustomButton = () => {
     <Button
       auto
       rounded
-      ripple={false}
-      onClick={handleConfetti}
       css={{
-        background: '$white',
-        fontWeight: '$semibold',
-        boxShadow: '$lg',
-        position: 'relative',
-        overflow: 'visible',
-        color: '#0F9549',
-        fontSize: '$lg',
-        px: '$18',
-        py: '$11',
-        '&:after': {
+        background: "$white",
+        fontWeight: "$semibold",
+        boxShadow: "$lg",
+        position: "relative",
+        overflow: "visible",
+        color: "#0F9549",
+        fontSize: "$lg",
+        px: "$18",
+        py: "$11",
+        "&:after": {
           content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '100%',
-          background: '$white',
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          background: "$white",
           opacity: 1,
-          borderRadius: '$pill',
-          transition: 'all 0.4s ease'
+          borderRadius: "$pill",
+          transition: "all 0.4s ease",
         },
-        '&:hover': {
-          transform: 'translateY(-5px)',
-          '&:after': {
-            transform: 'scaleX(1.5) scaleY(1.6)',
-            opacity: 0
-          }
+        "&:hover": {
+          transform: "translateY(-5px)",
+          "&:after": {
+            transform: "scaleX(1.5) scaleY(1.6)",
+            opacity: 0,
+          },
+        },
+        "&:active": {
+          transform: "translateY(-2px)",
         },
-        '&:active': {
-          transform: 'translateY(-2px)'
-        }
       }}
+      ripple={false}
+      onClick={handleConfetti}
     >
       Click me
     </Button>
diff --git a/apps/docs/src/components/templates/delete-user/index.tsx b/apps/docs/src/components/templates/delete-user/index.tsx
index 13a1f72ede..4dde1d2f36 100644
--- a/apps/docs/src/components/templates/delete-user/index.tsx
+++ b/apps/docs/src/components/templates/delete-user/index.tsx
@@ -1,28 +1,28 @@
-import React from 'react';
-import { useTheme, Text, Button, Grid, Row } from '@nextui-org/react';
+import React from "react";
+import {useTheme, Text, Button, Grid, Row} from "@nextui-org/react";
 
 const DeleteUser: React.FC = () => {
-  const { theme } = useTheme();
+  const {theme} = useTheme();
 
   return (
     <Grid.Container className="delete-user__container">
-      <Row justify="center" align="center">
+      <Row align="center" justify="center">
         <Text b>Confirm</Text>
       </Row>
       <Row>
         <Text>
-          Are you sure you want to delete this user ?, by doing this, you will
-          not be able to recover the data.
+          Are you sure you want to delete this user ?, by doing this, you will not be able to
+          recover the data.
         </Text>
       </Row>
-      <Grid.Container justify="space-between" alignContent="center">
+      <Grid.Container alignContent="center" justify="space-between">
         <Grid>
-          <Button size="sm" light>
+          <Button light size="sm">
             Cancel
           </Button>
         </Grid>
         <Grid>
-          <Button size="sm" shadow color="error">
+          <Button shadow color="error" size="sm">
             Delete
           </Button>
         </Grid>
diff --git a/apps/docs/src/components/templates/example-block/index.tsx b/apps/docs/src/components/templates/example-block/index.tsx
index 80ab8fff6b..7cf2da9a89 100644
--- a/apps/docs/src/components/templates/example-block/index.tsx
+++ b/apps/docs/src/components/templates/example-block/index.tsx
@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
-import { NextUITheme, useTheme } from '@nextui-org/react';
-import withDefaults from '@utils/with-defaults';
+import React, {useMemo} from "react";
+import {NextUITheme, useTheme} from "@nextui-org/react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   plain?: number | boolean;
@@ -12,21 +12,22 @@ interface Props {
 const defaultProps = {
   plain: false,
   height: 30,
-  radius: '10px'
+  radius: "10px",
 };
 
 export type ExampleBlockProps = Props & typeof defaultProps;
 
 const getBackground = (plain: number | boolean, theme?: NextUITheme) => {
-  if (typeof plain !== 'number') return theme?.colors?.primary?.value;
+  if (typeof plain !== "number") return theme?.colors?.primary?.value;
   const colors = [
     theme?.colors?.accents1?.value,
     theme?.colors?.accents2?.value,
     theme?.colors?.accents3?.value,
     theme?.colors?.accents4?.value,
     theme?.colors?.accents5?.value,
-    theme?.colors?.accents6?.value
+    theme?.colors?.accents6?.value,
   ];
+
   return colors[plain - 1] || theme?.colors?.primary?.value;
 };
 
@@ -38,9 +39,9 @@ const ExampleBlock: React.FC<React.PropsWithChildren<ExampleBlockProps>> = ({
   radius,
   ...props
 }) => {
-  const { theme } = useTheme();
+  const {theme} = useTheme();
   const blockWidth = useMemo(() => {
-    return width ? `${width}px` : '100%';
+    return width ? `${width}px` : "100%";
   }, [width]);
   const bg = useMemo(() => getBackground(plain, theme), [theme, plain]);
 
diff --git a/apps/docs/src/components/templates/index.ts b/apps/docs/src/components/templates/index.ts
index 98e9f2660d..669f2c6a63 100644
--- a/apps/docs/src/components/templates/index.ts
+++ b/apps/docs/src/components/templates/index.ts
@@ -1,7 +1,7 @@
-export { default as DeleteUser } from './delete-user';
-export { default as ExampleBlock } from './example-block';
-export { default as UserTwitterCard } from './user-twitter-card';
-export { default as SendButton } from './send-button';
-export { default as Player } from './player';
-export { default as CustomButton } from './custom-button';
-export { default as ShopCard } from './shop-card';
+export {default as DeleteUser} from "./delete-user";
+export {default as ExampleBlock} from "./example-block";
+export {default as UserTwitterCard} from "./user-twitter-card";
+export {default as SendButton} from "./send-button";
+export {default as Player} from "./player";
+export {default as CustomButton} from "./custom-button";
+export {default as ShopCard} from "./shop-card";
diff --git a/apps/docs/src/components/templates/player/index.ts b/apps/docs/src/components/templates/player/index.ts
index bac22ce4de..c0c89817fd 100644
--- a/apps/docs/src/components/templates/player/index.ts
+++ b/apps/docs/src/components/templates/player/index.ts
@@ -1,3 +1,3 @@
-import Player from './player';
+import Player from "./player";
 
 export default Player;
diff --git a/apps/docs/src/components/templates/player/player.tsx b/apps/docs/src/components/templates/player/player.tsx
index 9e793469f4..9dddb329a9 100644
--- a/apps/docs/src/components/templates/player/player.tsx
+++ b/apps/docs/src/components/templates/player/player.tsx
@@ -1,43 +1,21 @@
-import React from 'react';
-import {
-  Card,
-  Avatar,
-  Grid,
-  Text,
-  Row,
-  Progress,
-  StyledProgressBar,
-  CSS
-} from '@nextui-org/react';
-import {
-  Box,
-  Heart,
-  Play,
-  Rewind5s,
-  Forward5s,
-  NextTrack,
-  PreviousTrack
-} from '@components';
+import React from "react";
+import {Card, Avatar, Grid, Text, Row, Progress, StyledProgressBar, CSS} from "@nextui-org/react";
+import {Box, Heart, Play, Rewind5s, Forward5s, NextTrack, PreviousTrack} from "@components";
 
 export interface Props {
   className?: string;
   css?: CSS;
 }
 
-const Player: React.FC<Props> = ({ css, ...props }) => {
+const Player: React.FC<Props> = ({css, ...props}) => {
   const [liked, setLiked] = React.useState(false);
 
   return (
-    <Card css={{ p: '$6', mt: '$8', boxShadow: '$md', ...css }} {...props}>
-      <Card.Header css={{ d: 'flex', ai: 'center', py: '$8' }}>
+    <Card css={{p: "$6", mt: "$8", boxShadow: "$md", ...css}} {...props}>
+      <Card.Header css={{d: "flex", ai: "center", py: "$8"}}>
         <Grid.Container>
-          <Grid css={{ mr: '$8' }}>
-            <Avatar
-              squared
-              color="secondary"
-              size="xl"
-              src="/images/hero-card.png"
-            />
+          <Grid css={{mr: "$8"}}>
+            <Avatar squared color="secondary" size="xl" src="/images/hero-card.png" />
           </Grid>
           <Grid>
             <Row>
@@ -46,7 +24,7 @@ const Player: React.FC<Props> = ({ css, ...props }) => {
               </Text>
             </Row>
             <Row>
-              <Text b size={14} css={{ color: '$accents6' }}>
+              <Text b css={{color: "$accents6"}} size={14}>
                 12 Tracks
               </Text>
             </Row>
@@ -56,73 +34,73 @@ const Player: React.FC<Props> = ({ css, ...props }) => {
               </Text>
             </Row>
             <Heart
-              filled={liked}
-              fill="#FF4ECD"
-              onClick={() => setLiked(!liked)}
               css={{
-                cursor: 'pointer',
-                position: 'absolute',
-                top: '$9',
-                right: '$10'
+                cursor: "pointer",
+                position: "absolute",
+                top: "$9",
+                right: "$10",
               }}
+              fill="#FF4ECD"
+              filled={liked}
+              onClick={() => setLiked(!liked)}
             />
           </Grid>
         </Grid.Container>
       </Card.Header>
-      <Card.Body css={{ mt: '$5', py: '$8' }}>
+      <Card.Body css={{mt: "$5", py: "$8"}}>
         <Row>
           <Progress
-            value={30}
-            max={100}
-            size="sm"
             css={{
               [`& ${StyledProgressBar}`]: {
-                bg: '#FF4ECD'
-              }
+                bg: "#FF4ECD",
+              },
             }}
+            max={100}
+            size="sm"
+            value={30}
           />
         </Row>
-        <Row justify="space-between" css={{ py: '$6', px: '$1' }}>
-          <Text b size={14} css={{ color: '#FF4ECD' }}>
+        <Row css={{py: "$6", px: "$1"}} justify="space-between">
+          <Text b css={{color: "#FF4ECD"}} size={14}>
             13:36
           </Text>
-          <Text b size={14} css={{ color: '$accents6' }}>
+          <Text b css={{color: "$accents6"}} size={14}>
             35:01
           </Text>
         </Row>
       </Card.Body>
-      <Card.Footer css={{ pt: '$2', color: '$text', pb: '$8' }}>
-        <Row justify="space-between" align="center" css={{ mx: '$14' }}>
+      <Card.Footer css={{pt: "$2", color: "$text", pb: "$8"}}>
+        <Row align="center" css={{mx: "$14"}} justify="space-between">
           <Rewind5s
             css={{
-              cursor: 'pointer'
+              cursor: "pointer",
             }}
           />
           <PreviousTrack
             css={{
-              cursor: 'pointer'
+              cursor: "pointer",
             }}
           />
           <Box
             css={{
-              dflex: 'center',
-              bg: 'linear-gradient(180deg, #FF1CF7 25%, #b249f8 100%)',
-              size: '$16',
-              br: '$pill',
-              boxShadow: '$sm',
-              cursor: 'pointer'
+              dflex: "center",
+              bg: "linear-gradient(180deg, #FF1CF7 25%, #b249f8 100%)",
+              size: "$16",
+              br: "$pill",
+              boxShadow: "$sm",
+              cursor: "pointer",
             }}
           >
-            <Play css={{ ml: '$1' }} />
+            <Play css={{ml: "$1"}} />
           </Box>
           <NextTrack
             css={{
-              cursor: 'pointer'
+              cursor: "pointer",
             }}
           />
           <Forward5s
             css={{
-              cursor: 'pointer'
+              cursor: "pointer",
             }}
           />
         </Row>
diff --git a/apps/docs/src/components/templates/send-button/index.tsx b/apps/docs/src/components/templates/send-button/index.tsx
index 87df118ce9..c5ea471de4 100644
--- a/apps/docs/src/components/templates/send-button/index.tsx
+++ b/apps/docs/src/components/templates/send-button/index.tsx
@@ -1,21 +1,22 @@
-import React from 'react';
-import { useTheme } from '@nextui-org/react';
-import { Send } from '../../icons';
+import React from "react";
+import {useTheme} from "@nextui-org/react";
+
+import {Send} from "../../icons";
 
 interface Props {
   onClick: () => void;
 }
 
-const SendButton: React.FC<Props> = ({ onClick }) => {
-  const { theme } = useTheme();
+const SendButton: React.FC<Props> = ({onClick}) => {
+  const {theme} = useTheme();
 
   const handleClick = () => {
     onClick && onClick();
   };
 
   return (
-    <div className="send-button-container" onClick={handleClick}>
-      <Send fill="white" className="send-button__arrow-icon" />
+    <div className="send-button-container" role="button" onClick={handleClick}>
+      <Send className="send-button__arrow-icon" fill="white" />
       <style jsx>{`
         .send-button-container {
           width: 24px;
diff --git a/apps/docs/src/components/templates/shop-card/animations.ts b/apps/docs/src/components/templates/shop-card/animations.ts
index c65a3d566f..10c5515562 100644
--- a/apps/docs/src/components/templates/shop-card/animations.ts
+++ b/apps/docs/src/components/templates/shop-card/animations.ts
@@ -1,108 +1,108 @@
-import { AnimationProps } from 'framer-motion';
+import {AnimationProps} from "framer-motion";
 
-type Animations = { [key: string]: AnimationProps['animate'] };
+type Animations = {[key: string]: AnimationProps["animate"]};
 
 export default {
   nextui: {
     title: {
-      scale: 1
+      scale: 1,
     },
     subtitle: {
-      translateY: 0
+      translateY: 0,
     },
     price: {
       translateY: 0,
-      scale: 1
+      scale: 1,
     },
     oldPrice: {
-      translateY: 0
+      translateY: 0,
     },
     discount: {
       translateY: 0,
-      translateX: 0
+      translateX: 0,
     },
     productContainer: {
-      scale: 1
+      scale: 1,
     },
     productSizeButton: {
-      borderRadius: 8
-    }
+      borderRadius: 8,
+    },
   },
   modern: {
     title: {
-      fontSize: '24px'
+      fontSize: "24px",
     },
     subtitle: {
-      translateY: -5
+      translateY: -5,
     },
     price: {
       translateY: 4,
-      scale: 1.2
+      scale: 1.2,
     },
     oldPrice: {
       translateY: 4,
-      translateX: 5
+      translateX: 5,
     },
     discount: {
       marginLeft: 0,
       scale: 0.8,
       translateY: -20,
-      translateX: -120
+      translateX: -120,
     },
     productContainer: {
-      scale: 1.25
+      scale: 1.25,
     },
     productSizeButton: {
-      borderRadius: 20
-    }
+      borderRadius: 20,
+    },
   },
   elegant: {
     productContainer: {
       scale: 1.2,
-      borderRadius: '4px'
+      borderRadius: "4px",
     },
     price: {
-      scale: 1
+      scale: 1,
     },
     oldPrice: {
       scale: 0.9,
-      translateX: -10
+      translateX: -10,
     },
     discount: {
       scale: 0.8,
-      translateX: -10
+      translateX: -10,
     },
     productSizeButton: {
-      borderRadius: '4px'
-    }
+      borderRadius: "4px",
+    },
   },
   retro: {
     title: {
-      fontSize: '24px'
+      fontSize: "24px",
     },
     subtitle: {
-      translateY: -5
+      translateY: -5,
     },
     price: {
       translateY: 4,
-      scale: 1.2
+      scale: 1.2,
     },
     oldPrice: {
       scale: 0.8,
       translateY: -20,
-      translateX: -80
+      translateX: -80,
     },
     discount: {
       marginLeft: 0,
       scale: 0.7,
       translateY: -20,
-      translateX: -80
+      translateX: -80,
     },
     productContainer: {
-      borderRadius: '0px'
+      borderRadius: "0px",
     },
     productSizeButton: {
-      borderRadius: '0px'
-    }
-  }
-} as { nextui: Animations; modern: Animations };
+      borderRadius: "0px",
+    },
+  },
+} as {nextui: Animations; modern: Animations};
diff --git a/apps/docs/src/components/templates/shop-card/content.tsx b/apps/docs/src/components/templates/shop-card/content.tsx
index e0795f6460..5d52462f66 100644
--- a/apps/docs/src/components/templates/shop-card/content.tsx
+++ b/apps/docs/src/components/templates/shop-card/content.tsx
@@ -1,61 +1,62 @@
-import React from 'react';
-import { Palette, Magic, GamingConsole } from '../../icons';
-import { Logo } from '@components';
+import React from "react";
+import {Logo} from "@components";
+
+import {Palette, Magic, GamingConsole} from "../../icons";
 
 const themes = [
   {
-    id: 'nextui',
-    title: 'NextUI',
+    id: "nextui",
+    title: "NextUI",
     icon: () => (
       <Logo
         small
-        size={44}
         css={{
-          '& path': {
-            fill: 'currentColor'
-          }
+          "& path": {
+            fill: "currentColor",
+          },
         }}
+        size={44}
       />
-    )
+    ),
   },
   {
-    id: 'modern',
-    title: 'Modern',
-    icon: () => <Palette size={44} fill="currentColor" />
+    id: "modern",
+    title: "Modern",
+    icon: () => <Palette fill="currentColor" size={44} />,
   },
   {
-    id: 'elegant',
-    title: 'Elegant',
-    icon: () => <Magic size={44} fill="currentColor" />
+    id: "elegant",
+    title: "Elegant",
+    icon: () => <Magic fill="currentColor" size={44} />,
   },
   {
-    id: 'retro',
-    title: 'Retro',
-    icon: () => <GamingConsole size={44} fill="currentColor" />
-  }
+    id: "retro",
+    title: "Retro",
+    icon: () => <GamingConsole fill="currentColor" size={44} />,
+  },
 ];
 
 const sizes = [
   {
-    id: 'extra-small',
-    title: 'XS'
+    id: "extra-small",
+    title: "XS",
   },
   {
-    id: 'small',
-    title: 'S'
+    id: "small",
+    title: "S",
   },
   {
-    id: 'medium',
-    title: 'M'
+    id: "medium",
+    title: "M",
   },
   {
-    id: 'large',
-    title: 'L'
+    id: "large",
+    title: "L",
   },
   {
-    id: 'extra-large',
-    title: 'XL'
-  }
+    id: "extra-large",
+    title: "XL",
+  },
 ];
 
-export { themes, sizes };
+export {themes, sizes};
diff --git a/apps/docs/src/components/templates/shop-card/index.ts b/apps/docs/src/components/templates/shop-card/index.ts
index 465235ff8e..751f7c1690 100644
--- a/apps/docs/src/components/templates/shop-card/index.ts
+++ b/apps/docs/src/components/templates/shop-card/index.ts
@@ -1,3 +1,3 @@
-import ShopCard from './shop-card';
+import ShopCard from "./shop-card";
 
 export default ShopCard;
diff --git a/apps/docs/src/components/templates/shop-card/shop-card.tsx b/apps/docs/src/components/templates/shop-card/shop-card.tsx
index 59abfeb7fc..6c2b345b34 100644
--- a/apps/docs/src/components/templates/shop-card/shop-card.tsx
+++ b/apps/docs/src/components/templates/shop-card/shop-card.tsx
@@ -1,14 +1,9 @@
-import React, { useMemo } from 'react';
-import {
-  Card,
-  Col,
-  Grid,
-  Row,
-  Text,
-  Spacer,
-  useTheme
-} from '@nextui-org/react';
-import { Box } from '@components';
+import React, {useMemo} from "react";
+import {Card, Col, Grid, Row, Text, Spacer, useTheme} from "@nextui-org/react";
+import {Box} from "@components";
+import {get} from "lodash";
+import {motion} from "framer-motion";
+
 import {
   GridItem,
   TabText,
@@ -23,20 +18,18 @@ import {
   StyledPrice,
   StyledOldPrice,
   StyledDiscount,
-  StyledCard
-} from './styles';
-import { get } from 'lodash';
-import { themes, sizes } from './content';
-import { motion } from 'framer-motion';
-import framerAnimations from './animations';
+  StyledCard,
+} from "./styles";
+import {themes, sizes} from "./content";
+import framerAnimations from "./animations";
 import {
   lightModernTheme,
   darkModernTheme,
   lightElegantTheme,
   darkElegantTheme,
   lightRetroTheme,
-  darkRetroTheme
-} from './themes';
+  darkRetroTheme,
+} from "./themes";
 
 interface Props {
   onChangeTheme?: (theme: string) => void;
@@ -44,31 +37,28 @@ interface Props {
 
 const getActiveTheme = (id: string, isDark?: boolean) => {
   switch (id) {
-    case 'nextui':
+    case "nextui":
       return;
-    case 'modern':
+    case "modern":
       return isDark ? darkModernTheme : lightModernTheme;
-    case 'elegant':
+    case "elegant":
       return isDark ? darkElegantTheme : lightElegantTheme;
-    case 'retro':
+    case "retro":
       return isDark ? darkRetroTheme : lightRetroTheme;
     default:
       return;
   }
 };
 
-const ShopCard: React.FC<Props> = ({ onChangeTheme }) => {
+const ShopCard: React.FC<Props> = ({onChangeTheme}) => {
   const [activeTheme, setActiveTheme] = React.useState(themes[0].id);
   const [activeSize, setActiveSize] = React.useState(sizes[0].id);
   const [liked, setLiked] = React.useState(false);
-  const { isDark } = useTheme();
+  const {isDark} = useTheme();
 
   const animations = get(framerAnimations, activeTheme);
 
-  const theme = useMemo(
-    () => getActiveTheme(activeTheme, isDark),
-    [activeTheme, isDark]
-  );
+  const theme = useMemo(() => getActiveTheme(activeTheme, isDark), [activeTheme, isDark]);
 
   const handleChangeTheme = (id: string) => {
     setActiveTheme(id);
@@ -76,14 +66,14 @@ const ShopCard: React.FC<Props> = ({ onChangeTheme }) => {
   };
 
   return (
-    <Box className={theme} css={{ ov: 'visible' }}>
-      <Grid.Container gap={5} css={{ py: 0 }}>
-        {themes.map(({ id, title, icon }, index) => (
+    <Box className={theme} css={{ov: "visible"}}>
+      <Grid.Container css={{py: 0}} gap={5}>
+        {themes.map(({id, title, icon}, index) => (
           <GridItem
             key={`${id}-${index}`}
-            css={{ pl: 0, '@xs': { mr: '$10' } }}
-            onClick={() => handleChangeTheme(id)}
+            css={{pl: 0, "@xs": {mr: "$10"}}}
             selected={activeTheme === id}
+            onClick={() => handleChangeTheme(id)}
           >
             {icon()}
             <TabText>{title}</TabText>
@@ -92,87 +82,72 @@ const ShopCard: React.FC<Props> = ({ onChangeTheme }) => {
       </Grid.Container>
       <Spacer y={0.1} />
       <StyledCard>
-        <Card.Body css={{ px: '$8', position: 'relative', ov: 'visible' }}>
-          <StyledStar
-            size={30}
-            liked={liked}
-            onClick={() => setLiked(!liked)}
-          />
+        <Card.Body css={{px: "$8", position: "relative", ov: "visible"}}>
+          <StyledStar liked={liked} size={30} onClick={() => setLiked(!liked)} />
           <Grid.Container>
             <Grid
-              sm={4}
               css={{
-                '@smMax': {
-                  mr: '$10'
+                "@smMax": {
+                  mr: "$10",
+                },
+                "@xsMax": {
+                  width: "100%",
+                  mr: "0 !important",
                 },
-                '@xsMax': {
-                  width: '100%',
-                  mr: '0 !important'
-                }
               }}
+              sm={4}
             >
-              <ProductImageContainer
-                as={motion.div}
-                animate={animations.productContainer}
-              >
+              <ProductImageContainer animate={animations.productContainer} as={motion.div}>
                 <ProductImage src="/images/shoes-1.png" />
               </ProductImageContainer>
             </Grid>
             <Grid
-              sm={8}
               css={{
-                px: '$10',
-                position: 'relative',
-                zIndex: '$10',
-                '@xsMax': {
-                  py: '$8'
-                }
+                px: "$10",
+                position: "relative",
+                zIndex: "$10",
+                "@xsMax": {
+                  py: "$8",
+                },
               }}
+              sm={8}
             >
               <Col as="nav">
-                <StyledTitle as={motion.h4} animate={animations.title}>
+                <StyledTitle animate={animations.title} as={motion.h4}>
                   Nike Adapt BB 2.0
                 </StyledTitle>
-                <StyledSubtitle as={motion.p} animate={animations.subtitle}>
+                <StyledSubtitle animate={animations.subtitle} as={motion.p}>
                   Consistent, customized fit, game-changing.
                 </StyledSubtitle>
-                <Row css={{ py: '$4' }}>
-                  <StyledPrice as={motion.p} animate={animations.price}>
+                <Row css={{py: "$4"}}>
+                  <StyledPrice animate={animations.price} as={motion.p}>
                     $279.97
                   </StyledPrice>
-                  <StyledOldPrice as={motion.p} animate={animations.oldPrice}>
+                  <StyledOldPrice animate={animations.oldPrice} as={motion.p}>
                     $350
                   </StyledOldPrice>
-                  <StyledDiscount as={motion.p} animate={animations.discount}>
+                  <StyledDiscount animate={animations.discount} as={motion.p}>
                     20% off
                   </StyledDiscount>
                 </Row>
-                <Grid.Container gap={2} css={{ py: '$4' }}>
-                  {sizes.map(({ id, title }, index) => (
-                    <Grid
-                      key={`${id}-${index}`}
-                      css={{ pl: 0 }}
-                      onClick={() => setActiveSize(id)}
-                    >
+                <Grid.Container css={{py: "$4"}} gap={2}>
+                  {sizes.map(({id, title}, index) => (
+                    <Grid key={`${id}-${index}`} css={{pl: 0}} onClick={() => setActiveSize(id)}>
                       <ProductSize
+                        animate={animations.productSizeButton}
                         as={motion.div}
                         selected={activeSize === id}
-                        animate={animations.productSizeButton}
-                        transition={{ duration: 0.1 }}
+                        transition={{duration: 0.1}}
                       >
-                        <Text
-                          b
-                          size={14}
-                          css={{ textAlign: 'center', color: 'currentColor' }}
-                        >
+                        <Text b css={{textAlign: "center", color: "currentColor"}} size={14}>
                           {title}
                         </Text>
                       </ProductSize>
                     </Grid>
                   ))}
                 </Grid.Container>
-                <Row css={{ pt: '$4' }}>
-                  <BuyButton auto shadow={activeTheme === 'nextui'}>
+                <Row css={{pt: "$4"}}>
+                  <BuyButton auto shadow={activeTheme === "nextui"}>
                     Buy now
                   </BuyButton>
                   <Spacer x={0.5} />
diff --git a/apps/docs/src/components/templates/shop-card/styles.ts b/apps/docs/src/components/templates/shop-card/styles.ts
index 2fd69757db..e048109007 100644
--- a/apps/docs/src/components/templates/shop-card/styles.ts
+++ b/apps/docs/src/components/templates/shop-card/styles.ts
@@ -1,337 +1,339 @@
-import { styled, Grid, Button, Card } from '@nextui-org/react';
-import { darkTheme, lightTheme } from '@theme/shared';
+import {styled, Grid, Button, Card} from "@nextui-org/react";
+import {darkTheme, lightTheme} from "@theme/shared";
+
+import {Star} from "../../icons";
+
 import {
   lightModernTheme,
   lightElegantTheme,
   lightRetroTheme,
   darkModernTheme,
   darkElegantTheme,
-  darkRetroTheme
-} from './themes';
-import { Star } from '../../icons';
+  darkRetroTheme,
+} from "./themes";
 
 export const StyledCard = styled(Card, {
-  py: '$2',
-  mt: '$8',
-  boxShadow: '$md',
-  br: '35px',
-  ov: 'visible',
+  py: "$2",
+  mt: "$8",
+  boxShadow: "$md",
+  br: "35px",
+  ov: "visible",
   [`.${darkElegantTheme} &, .${lightElegantTheme} &`]: {
-    br: '4px'
+    br: "4px",
   },
   [`.${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-    br: '0px'
+    br: "0px",
   },
   [`.${lightRetroTheme} &`]: {
-    bg: '#F4E8D1'
+    bg: "#F4E8D1",
   },
   [`.${darkRetroTheme} &`]: {
-    bg: '#E1CA9E'
-  }
+    bg: "#E1CA9E",
+  },
 });
 
 export const GridItem = styled(Grid, {
-  d: 'flex',
-  fd: 'column',
-  justifyContent: 'center',
-  cursor: 'pointer',
-  transition: '$default',
-  '&:hover': {
-    opacity: 0.8
-  },
-  ai: 'center',
+  d: "flex",
+  fd: "column",
+  justifyContent: "center",
+  cursor: "pointer",
+  transition: "$default",
+  "&:hover": {
+    opacity: 0.8,
+  },
+  ai: "center",
   [`.${darkTheme} &`]: {
-    color: '#666'
+    color: "#666",
   },
   [`.${lightTheme} &`]: {
-    color: '#B0B0B0'
+    color: "#B0B0B0",
   },
   variants: {
     selected: {
       true: {
         [`.${darkTheme} &`]: {
-          color: '$primary'
+          color: "$primary",
         },
         [`.${lightTheme} &`]: {
-          color: '$primary'
-        }
-      }
-    }
-  }
+          color: "$primary",
+        },
+      },
+    },
+  },
 });
 
-export const TabText = styled('p', {
+export const TabText = styled("p", {
   m: 0,
-  mt: '$3',
-  fontSize: '$space$8',
-  fontWeight: '$semibold',
-  color: 'currentColor'
+  mt: "$3",
+  fontSize: "$space$8",
+  fontWeight: "$semibold",
+  color: "currentColor",
 });
 
-export const ProductImageContainer = styled('div', {
-  d: 'flex',
-  minHeight: '200px',
-  width: '200px',
-  br: '32px',
-  position: 'relative',
-  background: 'linear-gradient(135deg, #010187 0%,#18000E 100%)',
-  '@xsMax': {
-    width: '100%'
+export const ProductImageContainer = styled("div", {
+  d: "flex",
+  minHeight: "200px",
+  width: "200px",
+  br: "32px",
+  position: "relative",
+  background: "linear-gradient(135deg, #010187 0%,#18000E 100%)",
+  "@xsMax": {
+    width: "100%",
   },
   [`.${darkModernTheme} &, .${lightModernTheme} &, .${darkElegantTheme} &, .${lightElegantTheme} &`]:
     {
-      ml: '-$4',
-      transform: 'scale(1.2)',
-      background: 'linear-gradient(135deg, #870172 0%,#18000E 100%)',
-      boxShadow: '20px 30px 60px rgba(0, 0, 0, 0.15)',
-      '@xsMax': {
-        ml: '10%',
-        my: '$12',
-        width: '80%',
-        bs: '$md'
-      }
+      ml: "-$4",
+      transform: "scale(1.2)",
+      background: "linear-gradient(135deg, #870172 0%,#18000E 100%)",
+      boxShadow: "20px 30px 60px rgba(0, 0, 0, 0.15)",
+      "@xsMax": {
+        ml: "10%",
+        my: "$12",
+        width: "80%",
+        bs: "$md",
+      },
     },
   [`.${darkElegantTheme} &, .${lightElegantTheme} &`]: {
-    background: 'linear-gradient(135deg, #323232 0%,#000000 100%)'
+    background: "linear-gradient(135deg, #323232 0%,#000000 100%)",
   },
   [`.${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-    background: ' #FFD34E',
-    top: '5%',
-    left: '5%',
-    '@xsMax': {
-      width: '94%',
-      mb: '$8'
+    background: " #FFD34E",
+    top: "5%",
+    left: "5%",
+    "@xsMax": {
+      width: "94%",
+      mb: "$8",
+    },
+    "&:after": {
+      content: "",
+      position: "absolute",
+      top: "-5%",
+      left: "-5%",
+      size: "100%",
+      background: "linear-gradient(135deg, #FFD34E 0%,#EE457E 100%)",
     },
-    '&:after': {
-      content: '',
-      position: 'absolute',
-      top: '-5%',
-      left: '-5%',
-      size: '100%',
-      background: 'linear-gradient(135deg, #FFD34E 0%,#EE457E 100%)'
-    }
-  }
+  },
 });
 
-export const ProductImage = styled('img', {
-  minWidth: '200%',
-  position: 'absolute',
-  zIndex: '$10',
+export const ProductImage = styled("img", {
+  minWidth: "200%",
+  position: "absolute",
+  zIndex: "$10",
   top: 0,
-  left: '-45%',
-  '@xsMax': {
-    left: '0',
-    minWidth: '100%'
+  left: "-45%",
+  "@xsMax": {
+    left: "0",
+    minWidth: "100%",
   },
   [`.${darkModernTheme} &, .${lightModernTheme} &, .${darkElegantTheme} &, .${lightElegantTheme} &`]:
     {
-      top: '12%',
-      left: '-20%',
-      minWidth: '140%',
-      '@xsMax': {
-        top: '15%',
+      top: "12%",
+      left: "-20%",
+      minWidth: "140%",
+      "@xsMax": {
+        top: "15%",
         left: 0,
-        minWidth: '100%'
-      }
+        minWidth: "100%",
+      },
     },
   [`.${darkElegantTheme} &, .${lightElegantTheme} &`]: {
-    filter: 'saturate(0)'
+    filter: "saturate(0)",
   },
   [`.${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-    top: '-10%',
-    left: '-50%',
-    '@xsMax': {
-      top: '5%',
-      left: '-5%'
-    }
-  }
+    top: "-10%",
+    left: "-50%",
+    "@xsMax": {
+      top: "5%",
+      left: "-5%",
+    },
+  },
 });
 
-export const ProductSize = styled('div', {
-  color: '$text',
-  fontSize: '$xs',
-  dflex: 'center',
-  fontWeight: '$bold',
-  width: '30px',
-  height: '30px',
-  position: 'relative',
+export const ProductSize = styled("div", {
+  color: "$text",
+  fontSize: "$xs",
+  dflex: "center",
+  fontWeight: "$bold",
+  width: "30px",
+  height: "30px",
+  position: "relative",
   zIndex: 10,
-  borderRadius: '$sm',
-  cursor: 'pointer',
-  transition: 'background 0.3s ease 0s, border-radius 0.3s ease 0s',
+  borderRadius: "$sm",
+  cursor: "pointer",
+  transition: "background 0.3s ease 0s, border-radius 0.3s ease 0s",
   [`.${darkModernTheme} &, .${lightModernTheme} &`]: {
-    color: '#A258DF'
+    color: "#A258DF",
   },
   [`.${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-    color: '#333333'
+    color: "#333333",
   },
   variants: {
     selected: {
       true: {
-        background: '$primary',
-        color: '$white',
+        background: "$primary",
+        color: "$white",
         [`.${darkModernTheme} &, .${lightModernTheme} &`]: {
-          color: '$white'
+          color: "$white",
         },
         [`.${darkElegantTheme} &`]: {
-          color: '$black'
+          color: "$black",
         },
         [`.${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-          color: '$white',
-          bg: '$error'
-        }
-      }
-    }
-  }
+          color: "$white",
+          bg: "$error",
+        },
+      },
+    },
+  },
 });
 
 export const StyledStar = styled(Star, {
-  position: 'absolute',
-  top: '$6',
-  right: '$8',
-  zIndex: '$max',
-  cursor: 'pointer',
-  '@xsMax': {
-    top: '$11',
-    right: '$11'
-  },
-  '& path': {
-    stroke: '$accents4',
-    fill: 'transparent'
-  },
-  '&:hover': {
-    '& path': {
-      stroke: '$yellow700'
-    }
+  position: "absolute",
+  top: "$6",
+  right: "$8",
+  zIndex: "$max",
+  cursor: "pointer",
+  "@xsMax": {
+    top: "$11",
+    right: "$11",
+  },
+  "& path": {
+    stroke: "$accents4",
+    fill: "transparent",
+  },
+  "&:hover": {
+    "& path": {
+      stroke: "$yellow700",
+    },
   },
   [`.${darkModernTheme} &, .${lightModernTheme} &`]: {
-    top: '$4',
-    left: '$4',
-    '@xsMax': {
-      top: '$14',
-      left: '$14'
-    }
+    top: "$4",
+    left: "$4",
+    "@xsMax": {
+      top: "$14",
+      left: "$14",
+    },
   },
   [`.${darkElegantTheme} &, .${lightElegantTheme} &`]: {
-    top: '$4',
-    left: '28%',
-    '@xsMax': {
-      top: '$14',
-      left: '$14'
-    }
+    top: "$4",
+    left: "28%",
+    "@xsMax": {
+      top: "$14",
+      left: "$14",
+    },
   },
   [`.${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-    '@xsMax': {
-      top: '$10',
-      right: '$16',
-      '& path': {
-        stroke: 'rgba(255,255,255,0.5)'
-      }
-    }
+    "@xsMax": {
+      top: "$10",
+      right: "$16",
+      "& path": {
+        stroke: "rgba(255,255,255,0.5)",
+      },
+    },
   },
   variants: {
     liked: {
       true: {
-        '& path': {
-          fill: '$yellow600',
-          stroke: '$yellow600'
+        "& path": {
+          fill: "$yellow600",
+          stroke: "$yellow600",
+        },
+        "&:hover": {
+          "& path": {
+            fill: "$yellow600",
+          },
         },
-        '&:hover': {
-          '& path': {
-            fill: '$yellow600'
-          }
-        }
       },
       false: {
         [`.${darkModernTheme} &, .${lightModernTheme} &`]: {
-          '& path': {
-            stroke: '$gray300'
-          }
-        }
-      }
-    }
-  }
+          "& path": {
+            stroke: "$gray300",
+          },
+        },
+      },
+    },
+  },
 });
 
-const BaseText = styled('p', {
+const BaseText = styled("p", {
   p: 0,
   m: 0,
-  transformOrigin: 'left',
+  transformOrigin: "left",
   [`.${darkElegantTheme} &, .${lightElegantTheme} &`]: {
-    fontFamily: '$mono',
-    fontWeight: '$normal'
+    fontFamily: "$mono",
+    fontWeight: "$normal",
   },
   [`.${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-    textTransform: 'uppercase'
-  }
+    textTransform: "uppercase",
+  },
 });
 
 export const StyledTitle = styled(BaseText, {
-  transformOrigin: 'left',
+  transformOrigin: "left",
   [`.${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-    color: '$black'
-  }
+    color: "$black",
+  },
 });
 
 export const StyledSubtitle = styled(BaseText, {
-  color: '$accents7',
-  fontWeight: '$semibold',
-  fontSize: '$base',
+  color: "$accents7",
+  fontWeight: "$semibold",
+  fontSize: "$base",
   [`.${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-    fontSize: '$xs'
+    fontSize: "$xs",
   },
   [`.${darkRetroTheme} &`]: {
-    color: '$accents4'
-  }
+    color: "$accents4",
+  },
 });
 
 export const StyledPrice = styled(BaseText, {
-  fontSize: '18px',
-  fontWeight: '$bold',
+  fontSize: "18px",
+  fontWeight: "$bold",
   [`.${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-    color: '$black'
-  }
+    color: "$black",
+  },
 });
 
 export const StyledOldPrice = styled(BaseText, {
-  ml: '$8',
-  textDecorationLine: 'line-through',
-  fontWeight: '$semibold',
-  fontSize: '18px',
-  color: '$accents6',
+  ml: "$8",
+  textDecorationLine: "line-through",
+  fontWeight: "$semibold",
+  fontSize: "18px",
+  color: "$accents6",
   [`.${darkRetroTheme} &`]: {
-    color: '$accents5'
-  }
+    color: "$accents5",
+  },
 });
 
 export const StyledDiscount = styled(BaseText, {
-  ml: '$4',
-  color: '$success',
-  fontSize: '18px',
-  fontWeight: '$semibold',
+  ml: "$4",
+  color: "$success",
+  fontSize: "18px",
+  fontWeight: "$semibold",
   [`.${darkRetroTheme} &`]: {
-    color: '$accents5'
-  }
+    color: "$accents5",
+  },
 });
 
 export const BuyButton = styled(Button, {
-  ov: 'hidden',
-  tt: 'none',
-  transition: '$default',
+  ov: "hidden",
+  tt: "none",
+  transition: "$default",
   [`.${darkModernTheme} &, .${lightModernTheme} &`]: {
-    borderRadius: '$pill'
+    borderRadius: "$pill",
   },
   [`.${darkElegantTheme} &, .${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-    color: '$black'
+    color: "$black",
   },
   [`.${darkRetroTheme} &, .${lightRetroTheme} &`]: {
-    textTransform: 'uppercase',
-    fontWeight: '$bold'
-  }
+    textTransform: "uppercase",
+    fontWeight: "$bold",
+  },
 });
 
 export const AddToBagButton = styled(BuyButton, {
   [`.${darkElegantTheme} &`]: {
-    color: '$white'
-  }
+    color: "$white",
+  },
 });
diff --git a/apps/docs/src/components/templates/shop-card/themes.ts b/apps/docs/src/components/templates/shop-card/themes.ts
index 7e1e4121fc..e1f8c8508b 100644
--- a/apps/docs/src/components/templates/shop-card/themes.ts
+++ b/apps/docs/src/components/templates/shop-card/themes.ts
@@ -1,79 +1,79 @@
-import { createTheme } from '@nextui-org/react';
+import {createTheme} from "@nextui-org/react";
 
 export const lightModernTheme = createTheme({
-  type: 'light',
-  className: 'light-modern',
+  type: "light",
+  className: "light-modern",
   theme: {
     colors: {
-      primary: '#7928CA',
-      primaryLight: '#d9c2f0',
-      success: '#FF1CF7'
-    }
-  }
+      primary: "#7928CA",
+      primaryLight: "#d9c2f0",
+      success: "#FF1CF7",
+    },
+  },
 });
 
 export const darkModernTheme = createTheme({
-  type: 'dark',
-  className: 'dark-modern',
+  type: "dark",
+  className: "dark-modern",
   theme: {
     colors: {
-      primary: '#7928CA',
-      primaryLight: '#582A87',
-      success: '#FF1CF7'
-    }
-  }
+      primary: "#7928CA",
+      primaryLight: "#582A87",
+      success: "#FF1CF7",
+    },
+  },
 });
 
 export const lightElegantTheme = createTheme({
-  type: 'light',
-  className: 'light-elegant',
+  type: "light",
+  className: "light-elegant",
   theme: {
     colors: {
-      primary: '#000000',
-      primaryLight: '#AAAAAA',
-      success: '#a2a2a2'
+      primary: "#000000",
+      primaryLight: "#AAAAAA",
+      success: "#a2a2a2",
     },
     radii: {
-      md: '4px'
-    }
-  }
+      md: "4px",
+    },
+  },
 });
 
 export const darkElegantTheme = createTheme({
-  type: 'dark',
-  className: 'dark-elegant',
+  type: "dark",
+  className: "dark-elegant",
   theme: {
     colors: {
-      primary: '#ffffff',
-      primaryLight: '#222222',
-      success: '#a2a2a2'
+      primary: "#ffffff",
+      primaryLight: "#222222",
+      success: "#a2a2a2",
     },
     radii: {
-      md: '4px'
-    }
-  }
+      md: "4px",
+    },
+  },
 });
 
 export const lightRetroTheme = createTheme({
-  type: 'light',
-  className: 'light-retro',
+  type: "light",
+  className: "light-retro",
   theme: {
     colors: {
-      primary: '#FFD34E',
-      primaryLight: 'transparent',
-      error: '#EE457E'
-    }
-  }
+      primary: "#FFD34E",
+      primaryLight: "transparent",
+      error: "#EE457E",
+    },
+  },
 });
 
 export const darkRetroTheme = createTheme({
-  type: 'dark',
-  className: 'dark-retro',
+  type: "dark",
+  className: "dark-retro",
   theme: {
     colors: {
-      primary: '#FFD34E',
-      primaryLight: 'transparent',
-      error: '#EE457E'
-    }
-  }
+      primary: "#FFD34E",
+      primaryLight: "transparent",
+      error: "#EE457E",
+    },
+  },
 });
diff --git a/apps/docs/src/components/templates/user-twitter-card/index.tsx b/apps/docs/src/components/templates/user-twitter-card/index.tsx
index 682fbace81..f4c35f8ef4 100644
--- a/apps/docs/src/components/templates/user-twitter-card/index.tsx
+++ b/apps/docs/src/components/templates/user-twitter-card/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useState} from "react";
 import {
   useTheme,
   Avatar,
@@ -9,9 +9,9 @@ import {
   Button,
   Spacer,
   Grid,
-  CSS
-} from '@nextui-org/react';
-import withDefaults from '@utils/with-defaults';
+  CSS,
+} from "@nextui-org/react";
+import withDefaults from "@utils/with-defaults";
 
 interface Props {
   avatarUrl?: string;
@@ -20,10 +20,10 @@ interface Props {
 }
 
 const defaultProps = {
-  avatarUrl: '/avatars/avatar-2.png'
+  avatarUrl: "/avatars/avatar-2.png",
 };
 
-export type UserTwitterCardProps = Props & { css?: CSS };
+export type UserTwitterCardProps = Props & {css?: CSS};
 
 const UserTwitterCard: React.FC<UserTwitterCardProps> = ({
   avatarUrl,
@@ -32,43 +32,36 @@ const UserTwitterCard: React.FC<UserTwitterCardProps> = ({
   onClick,
   ...props
 }) => {
-  const { theme } = useTheme();
+  const {theme} = useTheme();
   const [following, setFollowing] = useState(false);
 
   return (
     <Grid.Container
       className="user-twitter-card__container"
       css={{
-        mw: '250px',
-        borderRadius: '$lg',
-        padding: '$sm',
-        ...(css as any)
+        mw: "250px",
+        borderRadius: "$lg",
+        padding: "$sm",
+        ...(css as any),
       }}
       onClick={onClick}
       {...props}
     >
-      <Row justify="space-between" align="center">
+      <Row align="center" justify="space-between">
         <Col span={3}>
-          <Avatar
-            size="lg"
-            src={avatarUrl}
-            color="gradient"
-            bordered
-            squared
-            {...avatarProps}
-          />
+          <Avatar bordered squared color="gradient" size="lg" src={avatarUrl} {...avatarProps} />
         </Col>
         <Col span={9}>
           <Row>
-            <Grid xs={12} direction="column">
-              <Text className="user-twitter-card__text" b size={15}>
+            <Grid direction="column" xs={12}>
+              <Text b className="user-twitter-card__text" size={15}>
                 Zoey Lang
               </Text>
               <Text
                 className="user-twitter-card__text"
-                size={14}
-                css={{ mt: '-$3' }}
                 color={theme?.colors?.accents7?.value}
+                css={{mt: "-$3"}}
+                size={14}
               >
                 @zoeylang
               </Text>
@@ -76,18 +69,18 @@ const UserTwitterCard: React.FC<UserTwitterCardProps> = ({
             <Button
               auto
               rounded
-              onClick={() => setFollowing(!following)}
+              bordered={following}
+              color="primary"
               css={{
-                maxHeight: '$space$12',
-                fs: '$xs',
-                fontWeight: '$semibold',
-                borderColor: following ? '$foreground' : '$primary',
-                color: following ? '$foreground' : '$white'
+                maxHeight: "$space$12",
+                fs: "$xs",
+                fontWeight: "$semibold",
+                borderColor: following ? "$foreground" : "$primary",
+                color: following ? "$foreground" : "$white",
               }}
-              color="primary"
-              bordered={following}
+              onClick={() => setFollowing(!following)}
             >
-              {following ? 'Unfollow' : 'Follow'}
+              {following ? "Unfollow" : "Follow"}
             </Button>
           </Row>
         </Col>
@@ -96,9 +89,9 @@ const UserTwitterCard: React.FC<UserTwitterCardProps> = ({
         <Grid xs={12}>
           <Text
             className="user-twitter-card__text"
-            size={14}
-            css={{ mt: '$1' }}
             color={theme?.colors?.accents6?.value}
+            css={{mt: "$1"}}
+            size={14}
           >
             Full-stack developer, @getnextui lover she/her 🎉
           </Text>
@@ -106,37 +99,19 @@ const UserTwitterCard: React.FC<UserTwitterCardProps> = ({
       </Grid.Container>
 
       <Grid.Container
+        alignContent="center"
         className="user-twitter-card__metrics-container"
         justify="flex-start"
-        alignContent="center"
       >
-        <Text
-          className="user-twitter-card__text"
-          size={14}
-          color={theme?.colors?.accents7?.value}
-        >
-          <Text
-            b
-            color="foreground"
-            className="user-twitter-card__text"
-            size={14}
-          >
+        <Text className="user-twitter-card__text" color={theme?.colors?.accents7?.value} size={14}>
+          <Text b className="user-twitter-card__text" color="foreground" size={14}>
             4
           </Text>
           &nbsp;Following
         </Text>
         <Spacer inline x={0.5} />
-        <Text
-          className="user-twitter-card__text"
-          size={14}
-          color={theme?.colors?.accents7?.value}
-        >
-          <Text
-            b
-            color="foreground"
-            className="user-twitter-card__text"
-            size={14}
-          >
+        <Text className="user-twitter-card__text" color={theme?.colors?.accents7?.value} size={14}>
+          <Text b className="user-twitter-card__text" color="foreground" size={14}>
             97.1K
           </Text>
           &nbsp;Followers
diff --git a/apps/docs/src/components/theme-switch/index.tsx b/apps/docs/src/components/theme-switch/index.tsx
index 667f69ecf0..44e7330103 100644
--- a/apps/docs/src/components/theme-switch/index.tsx
+++ b/apps/docs/src/components/theme-switch/index.tsx
@@ -1,25 +1,27 @@
-import React from 'react';
-import { Moon } from '../icons';
-import { Switch, SwitchProps, useTheme } from '@nextui-org/react';
-import { useTheme as useNextTheme } from 'next-themes';
+import React from "react";
+import {Switch, SwitchProps, useTheme} from "@nextui-org/react";
+import {useTheme as useNextTheme} from "next-themes";
 
-export const ThemeToggle: React.FC<Partial<SwitchProps>> = ({ ...props }) => {
+import {Moon} from "../icons";
+
+export const ThemeToggle: React.FC<Partial<SwitchProps>> = ({...props}) => {
   const [isSelfDark, setIsSelfDark] = React.useState(false);
 
-  const { setTheme } = useNextTheme();
-  const { isDark } = useTheme();
+  const {setTheme} = useNextTheme();
+  const {isDark} = useTheme();
 
   const handleToggleTheme = () => {
-    const nextTheme = isDark ? 'light' : 'dark';
-    setIsSelfDark(nextTheme === 'dark');
+    const nextTheme = isDark ? "light" : "dark";
+
+    setIsSelfDark(nextTheme === "dark");
     setTheme(nextTheme);
   };
 
   return (
     <Switch
-      size="xl"
       checked={isSelfDark || isDark}
       icon={<Moon filled />}
+      size="xl"
       onChange={handleToggleTheme}
       {...props}
     />
diff --git a/apps/docs/src/components/theme-toggle/index.tsx b/apps/docs/src/components/theme-toggle/index.tsx
index f9f70def8b..61709ab37b 100644
--- a/apps/docs/src/components/theme-toggle/index.tsx
+++ b/apps/docs/src/components/theme-toggle/index.tsx
@@ -1,53 +1,54 @@
-import React from 'react';
-import cn from 'classnames';
-import { Moon, Sun } from '../icons';
-import { CSS, styled, useTheme } from '@nextui-org/react';
-import { useTheme as useNextTheme } from 'next-themes';
-import Blockholder from '../blockholder';
-import useIsMounted from '@hooks/use-is-mounted';
+import React from "react";
+import cn from "classnames";
+import {CSS, styled, useTheme} from "@nextui-org/react";
+import {useTheme as useNextTheme} from "next-themes";
+import useIsMounted from "@hooks/use-is-mounted";
+
+import Blockholder from "../blockholder";
+import {Moon, Sun} from "../icons";
 
 interface Props {
   className?: string;
   css?: CSS;
 }
 
-const StyledButton = styled('button', {
-  dflex: 'center',
-  size: 'auto',
-  cursor: 'pointer',
-  background: 'transparent',
-  border: 'none',
+const StyledButton = styled("button", {
+  dflex: "center",
+  size: "auto",
+  cursor: "pointer",
+  background: "transparent",
+  border: "none",
   padding: 0,
-  '& .theme-selector-icon': {
-    color: '$colors$accents6'
+  "& .theme-selector-icon": {
+    color: "$colors$accents6",
+  },
+  "@xsMax": {
+    px: "$2",
   },
-  '@xsMax': {
-    px: '$2'
-  }
 });
 
-export const ThemeToggle: React.FC<Props> = ({ className, css }) => {
+export const ThemeToggle: React.FC<Props> = ({className, css}) => {
   const isMounted = useIsMounted();
-  const { setTheme } = useNextTheme();
-  const { isDark } = useTheme();
+  const {setTheme} = useNextTheme();
+  const {isDark} = useTheme();
 
   if (!isMounted) {
     return (
       // to avoid layout shift on initial render
-      <Blockholder alt="toggle theme placeholder" width="32px" height="20px" />
+      <Blockholder alt="toggle theme placeholder" height="20px" width="32px" />
     );
   }
 
   const handleToggleTheme = () => {
-    setTheme(isDark ? 'light' : 'dark');
+    setTheme(isDark ? "light" : "dark");
   };
 
   return (
     <StyledButton
       aria-label="toggle a light and dark color scheme"
-      className={cn('theme-selector-container', className)}
-      onClick={handleToggleTheme}
+      className={cn("theme-selector-container", className)}
       css={css}
+      onClick={handleToggleTheme}
     >
       {isDark ? (
         <Sun filled className="theme-selector-icon" size={20} />
diff --git a/apps/docs/src/components/vercel-callout/index.ts b/apps/docs/src/components/vercel-callout/index.ts
index 022bb4fee2..64b91e047b 100644
--- a/apps/docs/src/components/vercel-callout/index.ts
+++ b/apps/docs/src/components/vercel-callout/index.ts
@@ -1,3 +1,3 @@
-import VercelCallout from './vercel-callout';
+import VercelCallout from "./vercel-callout";
 
 export default VercelCallout;
diff --git a/apps/docs/src/components/vercel-callout/vercel-callout.tsx b/apps/docs/src/components/vercel-callout/vercel-callout.tsx
index d3cf2c616e..238d62c3da 100644
--- a/apps/docs/src/components/vercel-callout/vercel-callout.tsx
+++ b/apps/docs/src/components/vercel-callout/vercel-callout.tsx
@@ -1,30 +1,30 @@
-import React from 'react';
-import { VercelLogo } from '@components';
-import { Link, Text } from '@nextui-org/react';
-import { darkTheme, lightTheme } from '@theme/shared';
+import React from "react";
+import {VercelLogo} from "@components";
+import {Link, Text} from "@nextui-org/react";
+import {darkTheme, lightTheme} from "@theme/shared";
 
 const VercelCallout: React.FC<unknown> = () => {
   return (
     <Link
-      target="_blank"
-      rel="noopener noreferrer"
-      href="https://www.vercel.com?utm_source=nextui&utm_marketing=oss"
       css={{
-        mt: '$6',
-        d: 'flex',
-        jc: 'flex-end',
-        ai: 'center',
-        '& svg': {
+        mt: "$6",
+        d: "flex",
+        jc: "flex-end",
+        ai: "center",
+        "& svg": {
           [`.${darkTheme} &`]: {
-            color: '$white'
+            color: "$white",
           },
           [`.${lightTheme} &`]: {
-            color: '$black'
-          }
-        }
+            color: "$black",
+          },
+        },
       }}
+      href="https://www.vercel.com?utm_source=nextui&utm_marketing=oss"
+      rel="noopener noreferrer"
+      target="_blank"
     >
-      <Text b css={{ my: 0, mr: '$4' }}>
+      <Text b css={{my: 0, mr: "$4"}}>
         Sponsored by
       </Text>
       <VercelLogo height={18} />
diff --git a/apps/docs/src/hooks/use-docs-route.ts b/apps/docs/src/hooks/use-docs-route.ts
index 9d921668bc..944981e4c0 100644
--- a/apps/docs/src/hooks/use-docs-route.ts
+++ b/apps/docs/src/hooks/use-docs-route.ts
@@ -1,14 +1,16 @@
-import { Route, RouteContext } from '@lib/docs/page';
+import {Route, RouteContext} from "@lib/docs/page";
 
 const getRouteContext = (
   routes: Route[],
   currentRoute?: Route,
-  ctx: RouteContext = {}
+  ctx: RouteContext = {},
 ): RouteContext => {
   const path = currentRoute?.path;
-  const { parent } = ctx;
+  const {parent} = ctx;
+
   for (let i = 0; i < routes?.length; i += 1) {
     const route = routes[i];
+
     if (route.routes) {
       ctx.parent = route;
       ctx = getRouteContext(route.routes, currentRoute, ctx);
@@ -18,9 +20,7 @@ const getRouteContext = (
     if (!route.path) continue;
     if (ctx.route) {
       ctx.nextRoute =
-        parent && i === 0
-          ? { ...route, title: `${parent.title}: ${route.title}` }
-          : route;
+        parent && i === 0 ? {...route, title: `${parent.title}: ${route.title}`} : route;
 
       return ctx;
     }
@@ -29,17 +29,18 @@ const getRouteContext = (
         ...currentRoute,
         title:
           parent && !parent.heading
-            ? `${parent.title}: ${currentRoute?.title}` || ''
-            : currentRoute?.title || ''
+            ? `${parent.title}: ${currentRoute?.title}` || ""
+            : currentRoute?.title || "",
       };
       // Continue the loop until we know the next route
       continue;
     }
     ctx.prevRoute =
       parent && !parent.heading && !routes[i + 1]?.path
-        ? { ...route, title: `${parent.title}: ${route.title}` }
+        ? {...route, title: `${parent.title}: ${route.title}`}
         : route;
   }
+
   return ctx;
 };
 
@@ -49,9 +50,10 @@ const getRouteContext = (
 const useDocsRoute = (
   routes: Route[],
   currentRoute?: Route,
-  ctx: RouteContext = {}
+  ctx: RouteContext = {},
 ): RouteContext => {
   getRouteContext(routes, currentRoute, ctx);
+
   // The loop ended and the previous route was found, or nothing
   return ctx;
 };
diff --git a/apps/docs/src/hooks/use-dom-clean.ts b/apps/docs/src/hooks/use-dom-clean.ts
index 41eff8ddd4..5bae0d3393 100644
--- a/apps/docs/src/hooks/use-dom-clean.ts
+++ b/apps/docs/src/hooks/use-dom-clean.ts
@@ -1,9 +1,9 @@
-import { useEffect } from 'react';
+import {useEffect} from "react";
 
 const useDomClean = (): void => {
   useEffect(() => {
-    document.documentElement.removeAttribute('style');
-    document.body.removeAttribute('style');
+    document.documentElement.removeAttribute("style");
+    document.body.removeAttribute("style");
   }, []);
 };
 
diff --git a/apps/docs/src/hooks/use-is-mounted.ts b/apps/docs/src/hooks/use-is-mounted.ts
index 3b3bcb078b..d2a315afff 100644
--- a/apps/docs/src/hooks/use-is-mounted.ts
+++ b/apps/docs/src/hooks/use-is-mounted.ts
@@ -1,10 +1,12 @@
-import { useEffect, useState } from 'react';
+import {useEffect, useState} from "react";
 
 function useIsMounted() {
   const [isMounted, setIsMounted] = useState(false);
+
   useEffect(() => {
     setIsMounted(true);
   }, []);
+
   return isMounted;
 }
 
diff --git a/apps/docs/src/hooks/use-local-storage.ts b/apps/docs/src/hooks/use-local-storage.ts
index 8be68847fe..dd703adf76 100644
--- a/apps/docs/src/hooks/use-local-storage.ts
+++ b/apps/docs/src/hooks/use-local-storage.ts
@@ -1,21 +1,23 @@
-import { useState } from 'react';
+import {useState} from "react";
 
 // Hook
 function useLocalStorage<T>(key: string, initialValue: T) {
   // State to store our value
   // Pass initial state function to useState so logic is only executed once
   const [storedValue, setStoredValue] = useState<T>(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return initialValue;
     }
     try {
       // Get from local storage by key
       const item = window.localStorage.getItem(key);
+
       // Parse stored json or if none return initialValue
       return item ? JSON.parse(item) : initialValue;
     } catch (error) {
       // If error also return initialValue
       console.log(error);
+
       return initialValue;
     }
   });
@@ -24,12 +26,12 @@ function useLocalStorage<T>(key: string, initialValue: T) {
   const setValue = (value: T | ((val: T) => T)) => {
     try {
       // Allow value to be a function so we have same API as useState
-      const valueToStore =
-        value instanceof Function ? value(storedValue) : value;
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+
       // Save state
       setStoredValue(valueToStore);
       // Save to local storage
-      if (typeof window !== 'undefined') {
+      if (typeof window !== "undefined") {
         window.localStorage.setItem(key, JSON.stringify(valueToStore));
       }
     } catch (error) {
@@ -37,6 +39,7 @@ function useLocalStorage<T>(key: string, initialValue: T) {
       console.log(error);
     }
   };
+
   return [storedValue, setValue] as const;
 }
 
diff --git a/apps/docs/src/hooks/use-media-query.ts b/apps/docs/src/hooks/use-media-query.ts
index 9c43ade196..8e52c8c967 100644
--- a/apps/docs/src/hooks/use-media-query.ts
+++ b/apps/docs/src/hooks/use-media-query.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from 'react';
+import {useState, useCallback, useEffect} from "react";
 
 export const useMediaQuery = (width: number): boolean => {
   const [targetReached, setTargetReached] = useState(false);
@@ -13,6 +13,7 @@ export const useMediaQuery = (width: number): boolean => {
 
   useEffect(() => {
     const media = window.matchMedia(`(max-width: ${width}px)`);
+
     media.addListener(updateTarget);
 
     // Check on mount (callback is not called until a change occurs)
diff --git a/apps/docs/src/hooks/use-portal.ts b/apps/docs/src/hooks/use-portal.ts
index 37fa772933..7a8d63495f 100644
--- a/apps/docs/src/hooks/use-portal.ts
+++ b/apps/docs/src/hooks/use-portal.ts
@@ -1,21 +1,25 @@
-import { useEffect, useState } from 'react';
-import useSSR from './use-ssr';
-import { getId } from '../utils/collections';
+import {useEffect, useState} from "react";
+
+import {getId} from "../utils/collections";
+
+import useSSR from "./use-ssr";
 
 const createElement = (id: string): HTMLElement => {
-  const el = document.createElement('div');
-  el.setAttribute('id', id);
+  const el = document.createElement("div");
+
+  el.setAttribute("id", id);
+
   return el;
 };
 
 const usePortal = (
   selectId: string = getId(),
-  getContainer?: () => HTMLElement | null
+  getContainer?: () => HTMLElement | null,
 ): HTMLElement | null => {
   const id = `nextui-${selectId}`;
-  const { isBrowser } = useSSR();
+  const {isBrowser} = useSSR();
   const [elSnapshot, setElSnapshot] = useState<HTMLElement | null>(
-    isBrowser ? createElement(id) : null
+    isBrowser ? createElement(id) : null,
   );
 
   useEffect(() => {
diff --git a/apps/docs/src/hooks/use-scroll-spy.ts b/apps/docs/src/hooks/use-scroll-spy.ts
index cbe1717944..84e967c8bd 100644
--- a/apps/docs/src/hooks/use-scroll-spy.ts
+++ b/apps/docs/src/hooks/use-scroll-spy.ts
@@ -1,27 +1,25 @@
 /* eslint-disable no-undef */
-import * as React from 'react';
+import * as React from "react";
 
-export function useScrollSpy(
-  selectors: string[],
-  options?: IntersectionObserverInit
-) {
+export function useScrollSpy(selectors: string[], options?: IntersectionObserverInit) {
   const [activeId, setActiveId] = React.useState<string | null>();
   const observer = React.useRef<IntersectionObserver>();
+
   React.useEffect(() => {
-    const elements = selectors.map((selector) =>
-      document.querySelector(selector)
-    );
+    const elements = selectors.map((selector) => document.querySelector(selector));
+
     if (observer.current) {
       observer.current.disconnect();
     }
     observer.current = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
         if (entry?.isIntersecting) {
-          setActiveId(entry.target.getAttribute('id'));
+          setActiveId(entry.target.getAttribute("id"));
         }
       });
     }, options);
     elements.forEach((el) => el && observer.current?.observe(el));
+
     return () => observer.current?.disconnect();
   }, [selectors]);
 
diff --git a/apps/docs/src/hooks/use-ssr.ts b/apps/docs/src/hooks/use-ssr.ts
index 2cda094f4b..25819f7ce8 100644
--- a/apps/docs/src/hooks/use-ssr.ts
+++ b/apps/docs/src/hooks/use-ssr.ts
@@ -1,11 +1,7 @@
-import { useEffect, useState } from 'react';
+import {useEffect, useState} from "react";
 
 const isBrowser = (): boolean => {
-  return Boolean(
-    typeof window !== 'undefined' &&
-      window.document &&
-      window.document.createElement
-  );
+  return Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
 };
 
 export type SSRState = {
@@ -15,6 +11,7 @@ export type SSRState = {
 
 const useSSR = (): SSRState => {
   const [browser, setBrowser] = useState<boolean>(false);
+
   useEffect(() => {
     setBrowser(isBrowser());
   }, []);
diff --git a/apps/docs/src/layouts/default.tsx b/apps/docs/src/layouts/default.tsx
index c0e73ed461..fa1d7cecee 100644
--- a/apps/docs/src/layouts/default.tsx
+++ b/apps/docs/src/layouts/default.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
-import { Container } from '@nextui-org/react';
-import { NotifyBanner } from '@components';
-import { Route } from '@lib/docs/page';
-import Header from './header';
-import Footer from './footer';
-import Navbar from './navbar';
+import React from "react";
+import {Container} from "@nextui-org/react";
+import {NotifyBanner} from "@components";
+import {Route} from "@lib/docs/page";
+
+import Header from "./header";
+import Footer from "./footer";
+import Navbar from "./navbar";
 
 export interface Props {
   routes: Route[];
@@ -13,32 +14,26 @@ export interface Props {
   slug?: string;
 }
 
-const DefaultLayout: React.FC<React.PropsWithChildren<Props>> = ({
-  children,
-  routes
-}) => {
+const DefaultLayout: React.FC<React.PropsWithChildren<Props>> = ({children, routes}) => {
   return (
     <div id="app-container">
       <Header />
-      <NotifyBanner
-        text="Dropdown component"
-        href="/docs/components/dropdown"
-      />
-      <Navbar isHome hasNotify routes={routes} />
+      <NotifyBanner href="/docs/components/dropdown" text="Dropdown component" />
+      <Navbar hasNotify isHome routes={routes} />
       <Container
-        lg={true}
-        id="main-container"
-        display="flex"
-        as="main"
         alignContent="space-between"
+        as="main"
         className="main-container"
         css={{
-          position: 'relative',
-          minHeight: '100vh',
-          '@mdMax': {
-            overflowX: 'hidden'
-          }
+          position: "relative",
+          minHeight: "100vh",
+          "@mdMax": {
+            overflowX: "hidden",
+          },
         }}
+        display="flex"
+        id="main-container"
+        lg={true}
       >
         {children}
         <Footer />
diff --git a/apps/docs/src/layouts/docs.tsx b/apps/docs/src/layouts/docs.tsx
index fa555a58d9..9d97aa466e 100644
--- a/apps/docs/src/layouts/docs.tsx
+++ b/apps/docs/src/layouts/docs.tsx
@@ -1,20 +1,21 @@
-import React, { useState, useEffect } from 'react';
-import Navbar from './navbar';
-import Footer from './footer';
-import { Container, Row, Col } from '@nextui-org/react';
-import NextLink from 'next/link';
-import { Route } from '@lib/docs/page';
-import { Sidebar, TableOfContent } from '@components';
-import { Link } from '@nextui-org/react';
-import { Heading, getHeadings } from '@utils/get-headings';
-import { MetaProps } from '@lib/docs/meta';
-import Header from '@layouts/header';
-import { Fixed, PageNav } from '@components';
-import { REPO_NAME, GITHUB_URL } from '@lib/github/constants';
-import { TAG, CONTENT_PATH } from '@lib/docs/config';
-import { StyledImg } from '@primitives';
-import { darkTheme } from '@theme/shared';
-import { appears } from '@utils/animations';
+import React, {useState, useEffect} from "react";
+import {Container, Row, Col} from "@nextui-org/react";
+import NextLink from "next/link";
+import {Route} from "@lib/docs/page";
+import {Sidebar, TableOfContent} from "@components";
+import {Link} from "@nextui-org/react";
+import {Heading, getHeadings} from "@utils/get-headings";
+import {MetaProps} from "@lib/docs/meta";
+import Header from "@layouts/header";
+import {Fixed, PageNav} from "@components";
+import {REPO_NAME, GITHUB_URL} from "@lib/github/constants";
+import {TAG, CONTENT_PATH} from "@lib/docs/config";
+import {StyledImg} from "@primitives";
+import {darkTheme} from "@theme/shared";
+import {appears} from "@utils/animations";
+
+import Footer from "./footer";
+import Navbar from "./navbar";
 
 export interface Props {
   routes: Route[];
@@ -34,7 +35,7 @@ const DocsLayout: React.FC<React.PropsWithChildren<Props>> = ({
   currentRoute,
   tag,
   slug,
-  meta
+  meta,
 }) => {
   const [headings, setHeadings] = useState<Heading[]>([]);
 
@@ -48,70 +49,70 @@ const DocsLayout: React.FC<React.PropsWithChildren<Props>> = ({
     <div id="app-container">
       <Navbar routes={routes} />
       <Container
-        lg={true}
         as="main"
-        id="main-container"
         className="docs__container"
+        css={{position: "relative"}}
         display="flex"
-        css={{ position: 'relative' }}
+        id="main-container"
+        lg={true}
       >
         <Header {...meta} />
         <Row
           className="docs__content"
-          gap={0}
           css={{
-            '@lg': {
-              pt: '1rem'
-            }
+            "@lg": {
+              pt: "1rem",
+            },
           }}
+          gap={0}
         >
           <Col
             css={{
-              width: '32%',
-              display: 'none',
-              '@md': {
-                display: 'block'
-              }
+              width: "32%",
+              display: "none",
+              "@md": {
+                display: "block",
+              },
             }}
           >
             <Fixed
-              offset={92}
               className="docs__left-sidebar"
               css={{
-                maxHeight: 'calc(100vh - 4rem)',
-                overflow: 'auto',
-                zIndex: '$2',
-                pb: '$28',
-                '&::-webkit-scrollbar': {
-                  width: '0px'
-                }
+                maxHeight: "calc(100vh - 4rem)",
+                overflow: "auto",
+                zIndex: "$2",
+                pb: "$28",
+                "&::-webkit-scrollbar": {
+                  width: "0px",
+                },
               }}
+              offset={92}
             >
-              <Sidebar routes={routes} tag={tag} slug={slug} />
+              <Sidebar routes={routes} slug={slug} tag={tag} />
             </Fixed>
           </Col>
           <Col
             className="docs__center"
             css={{
-              zIndex: '$10',
-              maxWidth: '100%',
-              overflow: 'auto',
-              '@xsMax': {
-                p: 0
-              }
+              zIndex: "$10",
+              maxWidth: "100%",
+              overflow: "auto",
+              "@xsMax": {
+                p: 0,
+              },
             }}
           >
             {children}
-            <PageNav tag={tag} prevRoute={prevRoute} nextRoute={nextRoute} />
+            <PageNav nextRoute={nextRoute} prevRoute={prevRoute} tag={tag} />
             <footer>
               {tag ? (
-                <NextLink href={slug || ''}>
+                <NextLink href={slug || ""}>
                   <Link>
                     <small>Go to the live version of this page</small>
                   </Link>
                 </NextLink>
               ) : (
-                <a href={editUrl} target="_blank" rel="noopener noreferrer">
+                <a href={editUrl} rel="noopener noreferrer" target="_blank">
                   <small>Edit this page on GitHub</small>
                 </a>
               )}
@@ -119,72 +120,72 @@ const DocsLayout: React.FC<React.PropsWithChildren<Props>> = ({
           </Col>
           <Col
             css={{
-              width: '28%',
-              height: '100%',
-              display: 'none',
-              '@lg': {
-                display: 'block'
-              }
+              width: "28%",
+              height: "100%",
+              display: "none",
+              "@lg": {
+                display: "block",
+              },
             }}
           >
             <Fixed
-              offset={92}
               className="docs__right-sidebar"
               css={{
-                width: '100%',
-                zIndex: '$2',
-                pb: '$20',
-                '&::-webkit-scrollbar': {
-                  width: '0px'
-                }
+                width: "100%",
+                zIndex: "$2",
+                pb: "$20",
+                "&::-webkit-scrollbar": {
+                  width: "0px",
+                },
               }}
+              offset={92}
             >
               <TableOfContent headings={headings} />
             </Fixed>
           </Col>
           <StyledImg
-            className="docs__gradient-blue"
-            src="/gradient-left-dark.svg"
             alt="gradient blue background"
+            className="docs__gradient-blue"
             css={{
-              display: 'none',
+              display: "none",
               opacity: 0,
-              position: 'fixed',
-              zIndex: '$1',
-              bottom: '-50%',
-              left: '-10%',
-              right: '-50%',
+              position: "fixed",
+              zIndex: "$1",
+              bottom: "-50%",
+              left: "-10%",
+              right: "-50%",
               animation: `${appears} 200ms 100ms ease forwards`,
               [`.${darkTheme} &`]: {
-                display: 'block'
-              }
+                display: "block",
+              },
             }}
+            src="/gradient-left-dark.svg"
           />
           <StyledImg
-            className="docs__gradient-violet"
-            src="/gradient-right-dark.svg"
             alt="gradient violet background"
+            className="docs__gradient-violet"
             css={{
-              display: 'none',
+              display: "none",
               top: 0,
               opacity: 0,
-              position: 'fixed',
+              position: "fixed",
               animation: `${appears} 200ms 100ms ease forwards`,
-              '@lg': {
-                top: '-50%',
-                right: '-50%'
+              "@lg": {
+                top: "-50%",
+                right: "-50%",
               },
-              '@mdMax': {
-                top: '-35%',
-                right: '-45%'
+              "@mdMax": {
+                top: "-35%",
+                right: "-45%",
               },
               [`.${darkTheme} &`]: {
-                display: 'block'
-              }
+                display: "block",
+              },
             }}
+            src="/gradient-right-dark.svg"
           />
         </Row>
-        <Footer css={{ jc: 'flex-end' }} />
+        <Footer css={{jc: "flex-end"}} />
       </Container>
     </div>
   );
diff --git a/apps/docs/src/layouts/footer.tsx b/apps/docs/src/layouts/footer.tsx
index 6b3d505b29..031358e649 100644
--- a/apps/docs/src/layouts/footer.tsx
+++ b/apps/docs/src/layouts/footer.tsx
@@ -1,29 +1,29 @@
-import React from 'react';
-import { Container, Row, Text, Link, CSS } from '@nextui-org/react';
-import { VercelCallout } from '@components';
+import React from "react";
+import {Container, Row, Text, Link, CSS} from "@nextui-org/react";
+import {VercelCallout} from "@components";
 
 export interface Props {
   css?: CSS;
   containerCss?: CSS;
 }
 
-const Footer: React.FC<Props> = ({ css, containerCss }) => {
+const Footer: React.FC<Props> = ({css, containerCss}) => {
   // const year = new Date().getFullYear();
   return (
     <Container
       fluid
       className="footer__container"
-      gap={2}
       css={{
-        zIndex: '$1',
-        padding: '$md $sm',
-        '@xsMax': {
-          padding: '$sm $xs'
+        zIndex: "$1",
+        padding: "$md $sm",
+        "@xsMax": {
+          padding: "$sm $xs",
         },
-        ...containerCss
+        ...containerCss,
       }}
+      gap={2}
     >
-      <Row justify="center" css={css}>
+      <Row css={css} justify="center">
         {/* <Text
           span
           className="footer__copy"
@@ -42,11 +42,11 @@ const Footer: React.FC<Props> = ({ css, containerCss }) => {
           span
           className="footer__by"
           css={{
-            fontSize: '$xs',
-            color: '$accents7',
-            '@mdMax': {
-              fontSize: '$xs'
-            }
+            fontSize: "$xs",
+            color: "$accents7",
+            "@mdMax": {
+              fontSize: "$xs",
+            },
           }}
         >
           Created&nbsp;by&nbsp;
@@ -55,7 +55,7 @@ const Footer: React.FC<Props> = ({ css, containerCss }) => {
           </Link>
         </Text>
       </Row>
-      <Row justify="center" css={css}>
+      <Row css={css} justify="center">
         <VercelCallout />
       </Row>
     </Container>
diff --git a/apps/docs/src/layouts/header.tsx b/apps/docs/src/layouts/header.tsx
index dd4b372133..a97e9ef18f 100644
--- a/apps/docs/src/layouts/header.tsx
+++ b/apps/docs/src/layouts/header.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import Head from 'next/head';
-import withDefaults from '@utils/with-defaults';
-import { toCapitalize } from '@utils/index';
-import { TWITTER_USER_NAME, SITE_URL } from '@lib/constants';
-import { useTheme } from '@nextui-org/react';
+import React from "react";
+import Head from "next/head";
+import withDefaults from "@utils/with-defaults";
+import {toCapitalize} from "@utils/index";
+import {TWITTER_USER_NAME, SITE_URL} from "@lib/constants";
+import {useTheme} from "@nextui-org/react";
 
 export interface HeaderProps {
   title?: string;
@@ -13,8 +13,8 @@ export interface HeaderProps {
 }
 
 const defaultProps = {
-  description: 'Make beautiful websites regardless of your design experience.',
-  image: '/twitter-cards/nextui.jpeg'
+  description: "Make beautiful websites regardless of your design experience.",
+  image: "/twitter-cards/nextui.jpeg",
 };
 
 if (global.document) {
@@ -26,71 +26,50 @@ if (global.document) {
   }
 }
 
-const Header: React.FC<HeaderProps> = ({ title, description, image, url }) => {
-  const { theme, isDark } = useTheme();
+const Header: React.FC<HeaderProps> = ({title, description, image, url}) => {
+  const {theme, isDark} = useTheme();
+
+  let pageTitle = title ? `${toCapitalize(title)} | ` : "";
+
+  pageTitle += "NextUI - Beautiful, fast and modern React UI Library";
 
-  let pageTitle = title ? `${toCapitalize(title)} | ` : '';
-  pageTitle += 'NextUI - Beautiful, fast and modern React UI Library';
   return (
     <Head>
       <title>{pageTitle}</title>
-      <meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
-      <meta
-        name="twitter:card"
-        content={image ? 'summary_large_image' : 'summary'}
-      />
+      <meta content={`@${TWITTER_USER_NAME}`} name="twitter:site" />
+      <meta content={image ? "summary_large_image" : "summary"} name="twitter:card" />
       {image && (
         <meta
+          content={image.startsWith("https://") ? image : `${SITE_URL}${image}`}
           property="og:image"
-          content={image.startsWith('https://') ? image : `${SITE_URL}${image}`}
         />
       )}
-      <meta property="og:title" content={pageTitle} key="title" />
-      {url && <meta property="og:url" content={url} />}
-      <meta property="og:description" content={description} />
-      <meta name="description" content={description} />
+      <meta key="title" content={pageTitle} property="og:title" />
+      {url && <meta content={url} property="og:url" />}
+      <meta content={description} property="og:description" />
+      <meta content={description} name="description" />
       <meta
+        content={isDark ? theme?.colors?.black?.value : theme?.colors?.white?.value}
         name="msapplication-TileColor"
-        content={
-          isDark ? theme?.colors?.black?.value : theme?.colors?.white?.value
-        }
       />
       <meta
+        content={isDark ? theme?.colors?.black?.value : theme?.colors?.white?.value}
         name="theme-color"
-        content={
-          isDark ? theme?.colors?.black?.value : theme?.colors?.white?.value
-        }
       />
       <meta
-        name="viewport"
         key="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=5.0"
+        name="viewport"
       />
-      <link rel="icon" href="/favicon.ico" />
-      <link rel="manifest" href="/manifest.json" />
-      <link
-        rel="apple-touch-icon"
-        sizes="180x180"
-        href="/apple-touch-icon.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="32x32"
-        href="/favicon-32x32.png"
-      />
-      <link
-        rel="icon"
-        type="image/png"
-        sizes="16x16"
-        href="/favicon-16x16.png"
-      />
+      <link href="/favicon.ico" rel="icon" />
+      <link href="/manifest.json" rel="manifest" />
+      <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
+      <link href="/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
+      <link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
       <link
-        rel="mask-icon"
+        color={isDark ? theme?.colors?.black?.value : theme?.colors?.white?.value}
         href="/safari-pinned-tab.svg"
-        color={
-          isDark ? theme?.colors?.black?.value : theme?.colors?.white?.value
-        }
+        rel="mask-icon"
       />
     </Head>
   );
diff --git a/apps/docs/src/layouts/navbar.tsx b/apps/docs/src/layouts/navbar.tsx
index cb53d252da..f4e06dbd61 100644
--- a/apps/docs/src/layouts/navbar.tsx
+++ b/apps/docs/src/layouts/navbar.tsx
@@ -1,35 +1,20 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Logo,
-  MenuToggle,
-  Badge,
-  Twitter,
-  Discord,
-  Github,
-  ThemeToggle,
-  Heart
-} from '@components';
-import { Box } from '@primitives';
-import cn from 'classnames';
-import NextLink from 'next/link';
-import dynamic from 'next/dynamic';
-import {
-  Row,
-  Col,
-  Spacer,
-  Link,
-  Button,
-  useBodyScroll
-} from '@nextui-org/react';
-import { Route } from '@lib/docs/page';
-import { Container } from '@nextui-org/react';
-import { useRouter } from 'next/router';
-import { useMediaQuery } from '@hooks/use-media-query';
-import { isActive } from '@utils/links';
-import { includes } from 'lodash';
-import { StyledNavContainer, StyledNavMainContainer } from './styles';
-import { darkTheme } from '@theme/shared';
-import { pulse } from '@utils/animations';
+import React, {useState, useEffect} from "react";
+import {Logo, MenuToggle, Badge, Twitter, Discord, Github, ThemeToggle, Heart} from "@components";
+import {Box} from "@primitives";
+import cn from "classnames";
+import NextLink from "next/link";
+import dynamic from "next/dynamic";
+import {Row, Col, Spacer, Link, Button, useBodyScroll} from "@nextui-org/react";
+import {Route} from "@lib/docs/page";
+import {Container} from "@nextui-org/react";
+import {useRouter} from "next/router";
+import {useMediaQuery} from "@hooks/use-media-query";
+import {isActive} from "@utils/links";
+import {includes} from "lodash";
+import {darkTheme} from "@theme/shared";
+import {pulse} from "@utils/animations";
+
+import {StyledNavContainer, StyledNavMainContainer} from "./styles";
 
 export interface Props {
   routes?: Route[];
@@ -37,36 +22,29 @@ export interface Props {
   isHome?: boolean;
 }
 
-const MobileNavigation = dynamic(
-  () => import('../components/mobile-navigation'),
-  {
-    ssr: false
-  }
-);
+const MobileNavigation = dynamic(() => import("../components/mobile-navigation"), {
+  ssr: false,
+});
 
-const SearchInput = dynamic(
-  () => import('../components/search/instant-search'),
-  {
-    ssr: true
-  }
-);
+const SearchInput = dynamic(() => import("../components/search/instant-search"), {
+  ssr: true,
+});
 
-const Navbar: React.FC<Props> = ({ isHome, hasNotify, routes }) => {
+const Navbar: React.FC<Props> = ({isHome, hasNotify, routes}) => {
   const [expanded, setExpanded] = useState(false);
   const router = useRouter();
   const isMobile = useMediaQuery(960);
-  const [, setBodyHidden] = useBodyScroll(null, { scrollLayer: true });
+  const [, setBodyHidden] = useBodyScroll(null, {scrollLayer: true});
   const [scrollPosition, setScrollPosition] = useState(0);
 
   const detached = hasNotify ? scrollPosition > 30 : scrollPosition > 0;
 
   useEffect(() => {
-    setScrollPosition(
-      (typeof window !== 'undefined' && window.pageYOffset) || 0
-    );
-    window.addEventListener('scroll', onScroll.bind(this));
+    setScrollPosition((typeof window !== "undefined" && window.pageYOffset) || 0);
+    window.addEventListener("scroll", onScroll.bind(this));
+
     return () => {
-      window.removeEventListener('scroll', onScroll.bind(this));
+      window.removeEventListener("scroll", onScroll.bind(this));
     };
   }, []);
 
@@ -93,30 +71,24 @@ const Navbar: React.FC<Props> = ({ isHome, hasNotify, routes }) => {
   return (
     <StyledNavMainContainer id="navbar-container">
       <StyledNavContainer detached={detached} showBlur={showBlur}>
-        <Container
-          lg={true}
-          as="nav"
-          display="flex"
-          wrap="nowrap"
-          alignItems="center"
-        >
+        <Container alignItems="center" as="nav" display="flex" lg={true} wrap="nowrap">
           <Col
             className="navbar__logo-container"
             css={{
-              '@mdMax': {
-                width: '100%'
-              }
+              "@mdMax": {
+                width: "100%",
+              },
             }}
           >
-            <Row justify="flex-start" align="center">
+            <Row align="center" justify="flex-start">
               <NextLink href="/">
                 <Link href="/">
                   <Logo
                     auto
                     className="navbar__logo"
                     css={{
-                      cursor: 'pointer',
-                      transition: '$default'
+                      cursor: "pointer",
+                      transition: "$default",
                     }}
                   />
                 </Link>
@@ -125,10 +97,10 @@ const Navbar: React.FC<Props> = ({ isHome, hasNotify, routes }) => {
               <Badge
                 solid
                 css={{
-                  px: '$4',
-                  '@mdMax': {
-                    display: 'none'
-                  }
+                  px: "$4",
+                  "@mdMax": {
+                    display: "none",
+                  },
                 }}
                 type="secondary"
               >
@@ -136,27 +108,24 @@ const Navbar: React.FC<Props> = ({ isHome, hasNotify, routes }) => {
               </Badge>
             </Row>
           </Col>
-          <Col
-            className="navbar__resources-container"
-            css={{ '@mdMax': { d: 'none' } }}
-          >
-            <Row justify="center" align="center">
+          <Col className="navbar__resources-container" css={{"@mdMax": {d: "none"}}}>
+            <Row align="center" justify="center">
               <Spacer x={1} y={0} />
               <NextLink href="/docs/guide/getting-started">
                 <Link
-                  className={cn('navbar__link', {
+                  className={cn("navbar__link", {
                     active:
-                      isActive(router.pathname, '/docs/[[...slug]]') &&
-                      !includes(router.asPath, 'components')
+                      isActive(router.pathname, "/docs/[[...slug]]") &&
+                      !includes(router.asPath, "components"),
                   })}
-                  href="#"
                   css={{
-                    color: '$text',
-                    '&.active': {
-                      fontWeight: '600',
-                      color: '$primary'
-                    }
+                    color: "$text",
+                    "&.active": {
+                      fontWeight: "600",
+                      color: "$primary",
+                    },
                   }}
+                  href="#"
                 >
                   Docs
                 </Link>
@@ -165,17 +134,17 @@ const Navbar: React.FC<Props> = ({ isHome, hasNotify, routes }) => {
               <NextLink href="/docs/components/avatar">
                 <Link
                   aria-disabled
-                  className={cn('navbar__link', {
-                    active: includes(router.asPath, 'components')
+                  className={cn("navbar__link", {
+                    active: includes(router.asPath, "components"),
                   })}
-                  title="Components"
                   css={{
-                    color: '$text',
-                    '&.active': {
-                      fontWeight: '600',
-                      color: '$primary'
-                    }
+                    color: "$text",
+                    "&.active": {
+                      fontWeight: "600",
+                      color: "$primary",
+                    },
                   }}
+                  title="Components"
                 >
                   Components
                 </Link>
@@ -183,13 +152,13 @@ const Navbar: React.FC<Props> = ({ isHome, hasNotify, routes }) => {
               <Spacer x={1} y={0} />
               <Link
                 className="navbar__link"
-                target="_blank"
-                rel="noopener noreferrer"
-                href="https://github.com/nextui-org/nextui/discussions/new?category=feedback"
-                title="Leave your feedback"
                 css={{
-                  color: '$text'
+                  color: "$text",
                 }}
+                href="https://github.com/nextui-org/nextui/discussions/new?category=feedback"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="Leave your feedback"
               >
                 Feedback
               </Link>
@@ -197,97 +166,97 @@ const Navbar: React.FC<Props> = ({ isHome, hasNotify, routes }) => {
           </Col>
           <Col className="navbar__search-container">
             <Row
-              className="navbar__search-row"
-              justify="flex-end"
               align="center"
+              className="navbar__search-row"
               css={{
-                position: 'initial',
-                '@mdMax': {
-                  jc: 'center'
-                }
+                position: "initial",
+                "@mdMax": {
+                  jc: "center",
+                },
               }}
+              justify="flex-end"
             >
               <Row
-                className="navbar__social-icons-container"
-                justify="flex-end"
                 align="center"
-                gap={1}
+                className="navbar__social-icons-container"
                 css={{
-                  width: 'initial',
-                  '@mdMax': {
-                    d: 'none'
-                  }
+                  width: "initial",
+                  "@mdMax": {
+                    d: "none",
+                  },
                 }}
+                gap={1}
+                justify="flex-end"
               >
                 <Link
                   className="navbar__social-icon"
-                  href="https://twitter.com/getnextui"
-                  target="_blank"
-                  rel="noreferrer"
                   css={{
-                    m: '0 6px',
-                    '& svg': {
-                      transition: '$default'
+                    m: "0 6px",
+                    "& svg": {
+                      transition: "$default",
+                    },
+                    "&:hover": {
+                      "& svg": {
+                        opacity: 0.7,
+                      },
                     },
-                    '&:hover': {
-                      '& svg': {
-                        opacity: 0.7
-                      }
-                    }
                   }}
+                  href="https://twitter.com/getnextui"
+                  rel="noreferrer"
+                  target="_blank"
                 >
                   <Twitter size={24} />
                 </Link>
                 <Link
                   className="navbar__social-icon"
-                  href="https://discord.gg/9b6yyZKmH4"
-                  target="_blank"
-                  rel="noreferrer"
                   css={{
-                    m: '0 6px',
-                    '& svg': {
-                      transition: '$default'
+                    m: "0 6px",
+                    "& svg": {
+                      transition: "$default",
+                    },
+                    "&:hover": {
+                      "& svg": {
+                        opacity: 0.7,
+                      },
                     },
-                    '&:hover': {
-                      '& svg': {
-                        opacity: 0.7
-                      }
-                    }
                   }}
+                  href="https://discord.gg/9b6yyZKmH4"
+                  rel="noreferrer"
+                  target="_blank"
                 >
                   <Discord size={24} />
                 </Link>
                 <Link
                   className="navbar__social-icon"
-                  href="https://github.com/nextui-org/nextui"
-                  target="_blank"
-                  rel="noreferrer"
                   css={{
-                    m: '0 6px',
-                    '& svg': {
-                      transition: '$default'
+                    m: "0 6px",
+                    "& svg": {
+                      transition: "$default",
+                    },
+                    "&:hover": {
+                      "& svg": {
+                        opacity: 0.7,
+                      },
                     },
-                    '&:hover': {
-                      '& svg': {
-                        opacity: 0.7
-                      }
-                    }
                   }}
+                  href="https://github.com/nextui-org/nextui"
+                  rel="noreferrer"
+                  target="_blank"
                 >
                   <Github size={24} />
                 </Link>
                 <ThemeToggle
                   className="navbar__social-icon"
                   css={{
-                    m: '0 6px',
-                    '& svg': {
-                      transition: '$default'
+                    m: "0 6px",
+                    "& svg": {
+                      transition: "$default",
+                    },
+                    "&:hover": {
+                      "& svg": {
+                        opacity: 0.7,
+                      },
                     },
-                    '&:hover': {
-                      '& svg': {
-                        opacity: 0.7
-                      }
-                    }
                   }}
                 />
               </Row>
@@ -296,39 +265,36 @@ const Navbar: React.FC<Props> = ({ isHome, hasNotify, routes }) => {
               <Button
                 auto
                 as="a"
-                href="https://patreon.com/jrgarciadev"
-                target="_blank"
-                rel="noreferrer"
-                icon={
-                  <Heart filled size={20} fill="var(--nextui-colors-red600)" />
-                }
                 css={{
-                  bg: '$gray50',
-                  color: '$text',
-                  maxH: '38px',
-                  px: '$8',
-                  '@mdMax': {
-                    d: 'none'
+                  bg: "$gray50",
+                  color: "$text",
+                  maxH: "38px",
+                  px: "$8",
+                  "@mdMax": {
+                    d: "none",
                   },
-                  '& .nextui-button-icon': {
-                    mr: '$2'
+                  "& .nextui-button-icon": {
+                    mr: "$2",
                   },
-                  '& .nextui-button-icon svg': {
-                    transition: '$default'
+                  "& .nextui-button-icon svg": {
+                    transition: "$default",
                   },
-                  '&:hover': {
-                    '& .nextui-button-icon svg': {
-                      animation: `${pulse} 1s infinite`
-                    }
+                  "&:hover": {
+                    "& .nextui-button-icon svg": {
+                      animation: `${pulse} 1s infinite`,
+                    },
                   },
                   [`.${darkTheme} &`]: {
-                    bg: 'rgba(51, 51,51,0.7)',
-                    '@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))':
-                      {
-                        bf: 'saturate(180%) blur(14px)'
-                      }
-                  }
+                    bg: "rgba(51, 51,51,0.7)",
+                    "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
+                      bf: "saturate(180%) blur(14px)",
+                    },
+                  },
                 }}
+                href="https://patreon.com/jrgarciadev"
+                icon={<Heart filled fill="var(--nextui-colors-red600)" size={20} />}
+                rel="noreferrer"
+                target="_blank"
               >
                 Sponsor
               </Button>
@@ -337,38 +303,35 @@ const Navbar: React.FC<Props> = ({ isHome, hasNotify, routes }) => {
           <Col
             className="navbar__menu-container"
             css={{
-              size: '100%',
-              display: 'none',
-              '@mdMax': {
-                display: 'flex',
-                justifyContent: 'flex-end'
-              }
+              size: "100%",
+              display: "none",
+              "@mdMax": {
+                display: "flex",
+                justifyContent: "flex-end",
+              },
             }}
           >
-            <ThemeToggle
-              className="navbar__social-icon-mobile"
-              css={{ m: '0' }}
-            />
+            <ThemeToggle className="navbar__social-icon-mobile" css={{m: "0"}} />
             <Box
               className="navbar__menu-arrow noselect"
-              onClick={onToggleNavigation}
               css={{
-                height: '100%',
-                minHeight: '40px',
-                minWidth: '30px',
-                display: 'flex',
-                justifyContent: 'flex-end',
-                alignItems: 'center'
+                height: "100%",
+                minHeight: "40px",
+                minWidth: "30px",
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center",
               }}
+              onClick={onToggleNavigation}
             >
               <MenuToggle expanded={expanded} />
             </Box>
           </Col>
           <MobileNavigation
+            detached={detached}
             hasNotify={hasNotify}
-            routes={routes}
             opened={expanded}
-            detached={detached}
+            routes={routes}
             onClose={() => {
               setExpanded(false);
               setBodyHidden(false);
diff --git a/apps/docs/src/layouts/styles.ts b/apps/docs/src/layouts/styles.ts
index dfb5e867a7..7be8afdb4c 100644
--- a/apps/docs/src/layouts/styles.ts
+++ b/apps/docs/src/layouts/styles.ts
@@ -1,40 +1,39 @@
-import { styled } from '@nextui-org/react';
+import {styled} from "@nextui-org/react";
 
-export const StyledNavMainContainer = styled('nav', {
+export const StyledNavMainContainer = styled("nav", {
   top: 0,
-  height: '76px',
-  position: 'sticky',
-  background: 'transparent',
-  zIndex: '$max'
+  height: "76px",
+  position: "sticky",
+  background: "transparent",
+  zIndex: "$max",
 });
 
-export const StyledNavContainer = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  size: '100%',
-  '& .navbar__social-icon': {
-    fill: '$colors$accents6'
+export const StyledNavContainer = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  size: "100%",
+  "& .navbar__social-icon": {
+    fill: "$colors$accents6",
   },
   variants: {
     showBlur: {
       true: {
-        background: '$background',
-        '@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))':
-          {
-            background: '$headerBackground'
-          }
-      }
+        background: "$background",
+        "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
+          background: "$headerBackground",
+        },
+      },
     },
     detached: {
       true: {
-        backdropFilter: 'saturate(180%) blur(10px)',
-        boxShadow: '0px 5px 20px -5px rgba(2, 1, 1, 0.1)'
+        backdropFilter: "saturate(180%) blur(10px)",
+        boxShadow: "0px 5px 20px -5px rgba(2, 1, 1, 0.1)",
       },
       false: {
-        backdropFilter: 'none',
-        boxShadow: 'none',
-        background: 'transparent'
-      }
-    }
-  }
+        backdropFilter: "none",
+        boxShadow: "none",
+        background: "transparent",
+      },
+    },
+  },
 });
diff --git a/apps/docs/src/lib/constants.ts b/apps/docs/src/lib/constants.ts
index b99a54f9a8..2a19fa6882 100644
--- a/apps/docs/src/lib/constants.ts
+++ b/apps/docs/src/lib/constants.ts
@@ -1,2 +1,2 @@
-export const TWITTER_USER_NAME = 'getnextui';
-export const SITE_URL = 'https://nextui.org';
+export const TWITTER_USER_NAME = "getnextui";
+export const SITE_URL = "https://nextui.org";
diff --git a/apps/docs/src/lib/docs/config.ts b/apps/docs/src/lib/docs/config.ts
index 388caaae0a..c6984c911d 100644
--- a/apps/docs/src/lib/docs/config.ts
+++ b/apps/docs/src/lib/docs/config.ts
@@ -1,9 +1,9 @@
 // Tag to use if FORCE_TAG is enabled (only for production build)
-export const TAG = 'main'; // Github branch
+export const TAG = "main"; // Github branch
 
-export const CONTENT_PATH = '/apps/docs/content';
+export const CONTENT_PATH = "/apps/docs/content";
 
-export const ASSETS_PATH = '/apps/docs/public';
+export const ASSETS_PATH = "/apps/docs/public";
 
 // If a version different from the latest release is required, update TAG with the wanted
 // version and set this to `true`
diff --git a/apps/docs/src/lib/docs/page.ts b/apps/docs/src/lib/docs/page.ts
index a6e0af9342..a3f7667f4d 100644
--- a/apps/docs/src/lib/docs/page.ts
+++ b/apps/docs/src/lib/docs/page.ts
@@ -1,8 +1,9 @@
-import { TAG, FORCE_TAG, CONTENT_PATH, ASSETS_PATH } from './config';
-import { getLatestTag } from '@lib/github/api';
-import { getRawFileFromRepo, getRawAssetFromRepo } from '@lib/github/raw';
-import { isProd, removeFromLast } from '@utils/index';
-import localManifest from '@content/docs/manifest.json';
+import {getLatestTag} from "@lib/github/api";
+import {getRawFileFromRepo, getRawAssetFromRepo} from "@lib/github/raw";
+import {isProd, removeFromLast} from "@utils/index";
+import localManifest from "@content/docs/manifest.json";
+
+import {TAG, FORCE_TAG, CONTENT_PATH, ASSETS_PATH} from "./config";
 
 export interface Route {
   title: string;
@@ -27,17 +28,18 @@ export interface RouteContext {
 }
 
 export interface Carry {
-  params: { slug: any };
+  params: {slug: any};
 }
 
 export async function getCurrentTag(tag?: string) {
   if (tag) return tag;
   if (FORCE_TAG) return TAG;
+
   return getLatestTag();
 }
 
 export function addTagToSlug(slug: string, tag?: string) {
-  return tag ? slug.replace('/docs', `/docs/tag/${tag}`) : slug;
+  return tag ? slug.replace("/docs", `/docs/tag/${tag}`) : slug;
 }
 
 export async function fetchRawDoc(doc: string, tag: string) {
@@ -47,10 +49,8 @@ export async function fetchRawDoc(doc: string, tag: string) {
 export async function fetchDocsManifest(tag: string) {
   if (!isProd) return localManifest;
 
-  const res = await getRawFileFromRepo(
-    `${CONTENT_PATH}/docs/manifest.json`,
-    tag
-  );
+  const res = await getRawFileFromRepo(`${CONTENT_PATH}/docs/manifest.json`, tag);
+
   return JSON.parse(res);
 }
 
@@ -58,29 +58,24 @@ export function getRawAsset(doc: string, tag: string) {
   return getRawAssetFromRepo(`${ASSETS_PATH}${doc}`, tag);
 }
 
-export function findRouteByPath(
-  path: string,
-  routes: Route[]
-): Route | null | undefined {
+export function findRouteByPath(path: string, routes: Route[]): Route | null | undefined {
   for (const route of routes) {
-    if (route.path && removeFromLast(route.path, '.') === path) {
+    if (route.path && removeFromLast(route.path, ".") === path) {
       return route;
     }
     const childPath = route.routes ? findRouteByPath(path, route.routes) : null;
+
     if (childPath) return childPath;
   }
 }
 
-export function getPaths(
-  nextRoutes: Route[],
-  carry: Carry[] = [{ params: { slug: [] } }]
-) {
+export function getPaths(nextRoutes: Route[], carry: Carry[] = [{params: {slug: []}}]) {
   nextRoutes.forEach((route: Route) => {
     if (route.comingSoon) {
       return;
     }
     if (route.path) {
-      carry.push(removeFromLast(route.path, '.') as Carry);
+      carry.push(removeFromLast(route.path, ".") as Carry);
     } else if (route.routes) {
       getPaths(route.routes, carry);
     }
diff --git a/apps/docs/src/lib/docs/utils.ts b/apps/docs/src/lib/docs/utils.ts
index b4566a08e6..da40db9a0e 100644
--- a/apps/docs/src/lib/docs/utils.ts
+++ b/apps/docs/src/lib/docs/utils.ts
@@ -1,4 +1,4 @@
-import { ParsedUrlQuery } from 'querystring';
+import {ParsedUrlQuery} from "querystring";
 
 export type SlugParams = ParsedUrlQuery | undefined;
 
@@ -9,18 +9,19 @@ export interface SlugResponse {
 
 // Handle optional catch all route for `/docs`
 function getDocsSlug(slug: any): any {
-  return slug?.length ? slug : ['getting-started'];
+  return slug?.length ? slug : ["getting-started"];
 }
 
 export function getSlug(params: SlugParams): SlugResponse {
   // Handle optional catch all route for `/docs`
   const slug = getDocsSlug(params?.slug);
-  if (slug[0] === 'tag') {
+
+  if (slug[0] === "tag") {
     return {
-      slug: `/docs/${getDocsSlug(slug.slice(2)).join('/')}`,
+      slug: `/docs/${getDocsSlug(slug.slice(2)).join("/")}`,
       tag: slug[1],
     };
   }
 
-  return { slug: `/docs/${slug.join('/')}` };
+  return {slug: `/docs/${slug.join("/")}`};
 }
diff --git a/apps/docs/src/lib/get-algolia.ts b/apps/docs/src/lib/get-algolia.ts
index 671580878c..0e3fe3a27f 100644
--- a/apps/docs/src/lib/get-algolia.ts
+++ b/apps/docs/src/lib/get-algolia.ts
@@ -1,8 +1,8 @@
-import algoliasearch from 'algoliasearch/lite';
-import { SearchOptions, MultipleQueriesQuery } from '@algolia/client-search';
+import algoliasearch from "algoliasearch/lite";
+import {SearchOptions, MultipleQueriesQuery} from "@algolia/client-search";
 
-const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || '';
-const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '';
+const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || "";
+const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || "";
 
 interface Request {
   params: SearchOptions;
@@ -15,7 +15,7 @@ export default function getAlgoliaClient() {
 
   return {
     async search(requests: SearchRequest[]) {
-      if (requests.every(({ params: { query } }) => Boolean(query) === false)) {
+      if (requests.every(({params: {query}}) => Boolean(query) === false)) {
         return {
           results: requests.map(() => {
             return {
diff --git a/apps/docs/src/lib/github/api.ts b/apps/docs/src/lib/github/api.ts
index 4dd4986ac6..3656a4a3ea 100644
--- a/apps/docs/src/lib/github/api.ts
+++ b/apps/docs/src/lib/github/api.ts
@@ -1,16 +1,17 @@
-import { GITHUB_API_URL, REPO_NAME } from './constants';
-import { getError } from './utils';
+import {GITHUB_API_URL, REPO_NAME} from "./constants";
+import {getError} from "./utils";
 
 export async function getLatestTag() {
   let lastestTag: string;
-  const res = await fetch(
-    `${GITHUB_API_URL}/repos/${REPO_NAME}/releases/latest`
-  );
+  const res = await fetch(`${GITHUB_API_URL}/repos/${REPO_NAME}/releases/latest`);
+
   if (res.ok) {
     const data = await res.json();
+
     lastestTag = data.tag_name;
   } else {
-    throw await getError('GitHub latest tag fetch failed', res);
+    throw await getError("GitHub latest tag fetch failed", res);
   }
+
   return lastestTag;
 }
diff --git a/apps/docs/src/lib/github/constants.ts b/apps/docs/src/lib/github/constants.ts
index ee1c9dfc75..0536a72f20 100644
--- a/apps/docs/src/lib/github/constants.ts
+++ b/apps/docs/src/lib/github/constants.ts
@@ -1,9 +1,9 @@
-export const GITHUB_URL = 'https://github.com';
+export const GITHUB_URL = "https://github.com";
 
-export const GITHUB_API_URL = 'https://api.github.com';
+export const GITHUB_API_URL = "https://api.github.com";
 
-export const RAW_GITHUB_URL = 'https://raw.githubusercontent.com';
+export const RAW_GITHUB_URL = "https://raw.githubusercontent.com";
 
-export const REPO_NAME = 'nextui-org/nextui';
+export const REPO_NAME = "nextui-org/nextui";
 
 export const ISSUE_REPORT_URL = `${GITHUB_URL}/${REPO_NAME}/issues/new?assignees=&labels=bug&template=bug_report.yml&title=%5BBUG%5D+-+`;
diff --git a/apps/docs/src/lib/github/raw.ts b/apps/docs/src/lib/github/raw.ts
index 6e50dc540a..adbd0dc205 100644
--- a/apps/docs/src/lib/github/raw.ts
+++ b/apps/docs/src/lib/github/raw.ts
@@ -1,11 +1,11 @@
-import { RAW_GITHUB_URL, REPO_NAME } from './constants';
-import { getError } from './utils';
+import {RAW_GITHUB_URL, REPO_NAME} from "./constants";
+import {getError} from "./utils";
 
 export async function getRawFileFromGitHub(path: string) {
   const res = await fetch(RAW_GITHUB_URL + path);
 
   if (res.ok) return res.text();
-  throw await getError('GitHub raw download error', res);
+  throw await getError("GitHub raw download error", res);
 }
 
 export function getRawFileFromRepo(path: string, tag: string) {
diff --git a/apps/docs/src/lib/github/utils.ts b/apps/docs/src/lib/github/utils.ts
index 8198c6caf1..e0674d04cb 100644
--- a/apps/docs/src/lib/github/utils.ts
+++ b/apps/docs/src/lib/github/utils.ts
@@ -1,7 +1,7 @@
 export interface GithubError extends Error {
   url: string;
   status: number;
-  headers: Response['headers'];
+  headers: Response["headers"];
 }
 
 function getErrorText(res: Response) {
@@ -14,9 +14,7 @@ function getErrorText(res: Response) {
 
 export async function getError(msg: string, res: Response) {
   const errorText = await getErrorText(res);
-  const error = new Error(
-    `${msg} (${res.status}): ${errorText}`
-  ) as GithubError;
+  const error = new Error(`${msg} (${res.status}): ${errorText}`) as GithubError;
 
   error.url = res.url;
   error.status = res.status;
diff --git a/apps/docs/src/lib/kbar-actions.ts b/apps/docs/src/lib/kbar-actions.ts
index 0d7ff4e4c0..2d4afc0b06 100644
--- a/apps/docs/src/lib/kbar-actions.ts
+++ b/apps/docs/src/lib/kbar-actions.ts
@@ -1,32 +1,30 @@
-import { Action } from 'kbar';
-import { NextRouter } from 'next/router';
-import { Route } from '@lib/docs/page';
-import { getId } from '../utils/collections';
-import { removeFromLast } from '@utils/index';
-import { ThemeType, changeTheme } from '@nextui-org/react';
+import {Action} from "kbar";
+import {NextRouter} from "next/router";
+import {Route} from "@lib/docs/page";
+import {removeFromLast} from "@utils/index";
+import {ThemeType, changeTheme} from "@nextui-org/react";
+
+import {getId} from "../utils/collections";
 // data imported from manifest
-import docsManifest from '../../content/docs/manifest.json';
+import docsManifest from "../../content/docs/manifest.json";
 
 const docsActions: Action[] = [];
 
-const buildDocsActions = (
-  router: NextRouter,
-  routes: Route[],
-  parent?: string
-) => {
+const buildDocsActions = (router: NextRouter, routes: Route[], parent?: string) => {
   routes.forEach((route: Route) => {
     const routeId = getId();
-    const routePath: any = route.path ? removeFromLast(route.path, '.') : null;
+    const routePath: any = route.path ? removeFromLast(route.path, ".") : null;
     const action: Action = {
       id: routeId,
       name: route.title,
-      section: route.section || '',
+      section: route.section || "",
       parent: parent,
       shortcut: [],
       children: [],
-      keywords: route.keywords || '',
-      subtitle: route.subtitle || ''
+      keywords: route.keywords || "",
+      subtitle: route.subtitle || "",
     };
+
     if (routePath) {
       action.perform = () => {
         router.push(routePath);
@@ -50,10 +48,10 @@ const buildDocsActions = (
 };
 
 const handleExternalLink = (href: string) => {
-  Object.assign(document.createElement('a'), {
-    target: '_blank',
-    rel: 'noopener noreferrer',
-    href
+  Object.assign(document.createElement("a"), {
+    target: "_blank",
+    rel: "noopener noreferrer",
+    href,
   }).click();
 };
 
@@ -63,67 +61,67 @@ const handleChangeTheme = (theme: ThemeType) => {
 
 const getActions = (router: NextRouter): Action[] => {
   const routes = docsManifest.routes;
+
   buildDocsActions(router, routes);
 
   const staticActions: Action[] = [
     {
-      id: 'twitter',
-      name: 'Twitter',
-      subtitle: '@getnextui',
-      section: 'Social',
+      id: "twitter",
+      name: "Twitter",
+      subtitle: "@getnextui",
+      section: "Social",
       shortcut: [],
-      keywords: 'dm, twitter, contact',
-      icon: 'twitter',
-      perform: () => handleExternalLink('https://twitter.com/getnextui')
+      keywords: "dm, twitter, contact",
+      icon: "twitter",
+      perform: () => handleExternalLink("https://twitter.com/getnextui"),
     },
     {
-      id: 'discord',
-      name: 'Discord',
-      subtitle: 'Join us!',
-      section: 'Social',
+      id: "discord",
+      name: "Discord",
+      subtitle: "Join us!",
+      section: "Social",
       shortcut: [],
-      keywords: 'chat, community, join',
-      icon: 'discord',
-      perform: () => handleExternalLink('https://discord.gg/9b6yyZKmH4')
+      keywords: "chat, community, join",
+      icon: "discord",
+      perform: () => handleExternalLink("https://discord.gg/9b6yyZKmH4"),
     },
     {
-      id: 'github',
-      name: 'Github',
-      subtitle: 'nextui-org',
-      section: 'Social',
+      id: "github",
+      name: "Github",
+      subtitle: "nextui-org",
+      section: "Social",
       shortcut: [],
-      keywords: 'github, source code, open, code',
-      icon: 'github',
-      perform: () => handleExternalLink('https://github.com/nextui-org/nextui')
+      keywords: "github, source code, open, code",
+      icon: "github",
+      perform: () => handleExternalLink("https://github.com/nextui-org/nextui"),
     },
     {
-      id: 'changeTheme',
-      name: 'Change Theme',
-      section: 'General',
+      id: "changeTheme",
+      name: "Change Theme",
+      section: "General",
       shortcut: [],
-      keywords:
-        'background, change color, color, change theme, theme, dark, light',
-      icon: 'palette',
-      children: ['darkTheme', 'lightTheme']
+      keywords: "background, change color, color, change theme, theme, dark, light",
+      icon: "palette",
+      children: ["darkTheme", "lightTheme"],
     },
     {
-      id: 'darkTheme',
-      name: 'Dark',
-      parent: 'changeTheme',
-      keywords: 'dark',
-      icon: 'moon',
+      id: "darkTheme",
+      name: "Dark",
+      parent: "changeTheme",
+      keywords: "dark",
+      icon: "moon",
       shortcut: [],
-      perform: () => handleChangeTheme('dark')
+      perform: () => handleChangeTheme("dark"),
     },
     {
-      id: 'lightTheme',
-      name: 'Light',
-      parent: 'changeTheme',
-      keywords: 'light',
+      id: "lightTheme",
+      name: "Light",
+      parent: "changeTheme",
+      keywords: "light",
       shortcut: [],
-      icon: 'sun',
-      perform: () => handleChangeTheme('light')
-    }
+      icon: "sun",
+      perform: () => handleChangeTheme("light"),
+    },
   ];
 
   return [...docsActions, ...staticActions];
diff --git a/apps/docs/src/lib/rehype-highlight-line.js b/apps/docs/src/lib/rehype-highlight-line.js
index d4d271d902..9d58a8f210 100644
--- a/apps/docs/src/lib/rehype-highlight-line.js
+++ b/apps/docs/src/lib/rehype-highlight-line.js
@@ -1,60 +1,67 @@
 // Inspired by https://github.dev/modulz/stitches-site
 
-const hastToHtml = require('hast-util-to-html');
-const unified = require('unified');
-const parse = require('rehype-parse');
+const hastToHtml = require("hast-util-to-html");
+const unified = require("unified");
+const parse = require("rehype-parse");
 
 const lineNumberify = function lineNumberify(ast, lineNum = 1) {
   let lineNumber = lineNum;
+
   return ast.reduce(
     (result, node) => {
-      if (node.type === 'text') {
-        if (node.value.indexOf('\n') === -1) {
+      if (node.type === "text") {
+        if (node.value.indexOf("\n") === -1) {
           node.lineNumber = lineNumber;
           result.nodes.push(node);
+
           return result;
         }
 
-        const lines = node.value.split('\n');
+        const lines = node.value.split("\n");
+
         for (let i = 0; i < lines.length; i++) {
           // eslint-disable-next-line no-plusplus
           if (i !== 0) ++lineNumber;
           if (i === lines.length - 1 && lines[i].length === 0) continue;
           result.nodes.push({
-            type: 'text',
+            type: "text",
             value: i === lines.length - 1 ? lines[i] : `${lines[i]}\n`,
-            lineNumber: lineNumber
+            lineNumber: lineNumber,
           });
         }
 
         result.lineNumber = lineNumber;
+
         return result;
       }
 
       if (node.children) {
         node.lineNumber = lineNumber;
         const processed = lineNumberify(node.children, lineNumber);
+
         node.children = processed.nodes;
         result.lineNumber = processed.lineNumber;
         result.nodes.push(node);
+
         return result;
       }
 
       result.nodes.push(node);
+
       return result;
     },
-    { nodes: [], lineNumber: lineNumber }
+    {nodes: [], lineNumber: lineNumber},
   );
 };
 
 const wrapLines = function wrapLines(ast, linesToHighlight) {
-  const highlightAll =
-    linesToHighlight.length === 1 && linesToHighlight[0] === 0;
+  const highlightAll = linesToHighlight.length === 1 && linesToHighlight[0] === 0;
   const allLines = Array.from(new Set(ast.map((x) => x.lineNumber)));
   let i = 0;
   const wrapped = allLines.reduce((nodes, marker) => {
     const line = marker;
     const children = [];
+
     for (; i < ast.length; i++) {
       if (ast[i].lineNumber < line) {
         nodes.push(ast[i]);
@@ -72,16 +79,15 @@ const wrapLines = function wrapLines(ast, linesToHighlight) {
     }
 
     nodes.push({
-      type: 'element',
-      tagName: 'div',
+      type: "element",
+      tagName: "div",
       properties: {
         dataLine: line,
-        className: 'highlight-line',
-        dataHighlighted:
-          linesToHighlight.includes(line) || highlightAll ? 'true' : 'false'
+        className: "highlight-line",
+        dataHighlighted: linesToHighlight.includes(line) || highlightAll ? "true" : "false",
       },
       children: children,
-      lineNumber: line
+      lineNumber: line,
     });
 
     return nodes;
@@ -91,8 +97,7 @@ const wrapLines = function wrapLines(ast, linesToHighlight) {
 };
 
 // https://github.com/gatsbyjs/gatsby/pull/26161/files
-const MULTILINE_TOKEN_SPAN =
-  /<span class="token ([^"]+)">[^<]*\n[^<]*<\/span>/g;
+const MULTILINE_TOKEN_SPAN = /<span class="token ([^"]+)">[^<]*\n[^<]*<\/span>/g;
 
 const applyMultilineFix = function (ast) {
   // AST to HTML
@@ -100,13 +105,11 @@ const applyMultilineFix = function (ast) {
 
   // Fix JSX issue
   html = html.replace(MULTILINE_TOKEN_SPAN, (match, token) =>
-    match.replace(/\n/g, `</span>\n<span class="token ${token}">`)
+    match.replace(/\n/g, `</span>\n<span class="token ${token}">`),
   );
 
   // HTML to AST
-  const hast = unified()
-    .use(parse, { emitParseErrors: true, fragment: true })
-    .parse(html);
+  const hast = unified().use(parse, {emitParseErrors: true, fragment: true}).parse(html);
 
   return hast.children;
 };
diff --git a/apps/docs/src/lib/rehype-highlight-word.js b/apps/docs/src/lib/rehype-highlight-word.js
index 55c6c3b8ce..1629b74f8e 100644
--- a/apps/docs/src/lib/rehype-highlight-word.js
+++ b/apps/docs/src/lib/rehype-highlight-word.js
@@ -1,17 +1,13 @@
-const hastToHtml = require('hast-util-to-html');
-const unified = require('unified');
-const parse = require('rehype-parse');
+const hastToHtml = require("hast-util-to-html");
+const unified = require("unified");
+const parse = require("rehype-parse");
 
 const CALLOUT = /__(.*?)__/g;
 
 module.exports = (code) => {
   const html = hastToHtml(code);
-  const result = html.replace(
-    CALLOUT,
-    (_, text) => `<span class="highlight-word">${text}</span>`
-  );
-  const hast = unified()
-    .use(parse, { emitParseErrors: true, fragment: true })
-    .parse(result);
+  const result = html.replace(CALLOUT, (_, text) => `<span class="highlight-word">${text}</span>`);
+  const hast = unified().use(parse, {emitParseErrors: true, fragment: true}).parse(result);
+
   return hast.children;
 };
diff --git a/apps/docs/src/lib/router-events.js b/apps/docs/src/lib/router-events.js
index 26ea814a62..06183b94ab 100644
--- a/apps/docs/src/lib/router-events.js
+++ b/apps/docs/src/lib/router-events.js
@@ -1,17 +1,18 @@
-import mitt from 'mitt';
-import Router from 'next/router';
+import mitt from "mitt";
+import Router from "next/router";
 
 const emitter = mitt();
+
 export default emitter;
 
 Router.onRouteChangeStart = (url) => {
-  emitter.emit('routeChangeStart', url);
+  emitter.emit("routeChangeStart", url);
 };
 
 Router.onRouteChangeComplete = (...args) => {
-  emitter.emit('routeChangeComplete', ...args);
+  emitter.emit("routeChangeComplete", ...args);
 };
 
 Router.onRouteChangeError = (...args) => {
-  emitter.emit('routeChangeError', ...args);
+  emitter.emit("routeChangeError", ...args);
 };
diff --git a/apps/docs/src/lib/types.ts b/apps/docs/src/lib/types.ts
index 4a283d869a..9065994190 100644
--- a/apps/docs/src/lib/types.ts
+++ b/apps/docs/src/lib/types.ts
@@ -1,15 +1,11 @@
-import * as React from 'react';
-import { NextComponentType, NextPageContext } from 'next';
+import * as React from "react";
+import {NextComponentType, NextPageContext} from "next";
 
 export type ComponentLayout<P = {}> = React.NamedExoticComponent<P> & {
   Layout: React.FC;
 };
 
-export type NextComponent<P = {}> = NextComponentType<
-  NextPageContext,
-  unknown,
-  P
-> &
+export type NextComponent<P = {}> = NextComponentType<NextPageContext, unknown, P> &
   ComponentLayout;
 
 export type ReactFCLayout<P = {}> = React.FC<P> & {
diff --git a/apps/docs/src/pages/_app.tsx b/apps/docs/src/pages/_app.tsx
index 03dbbb8f02..f96e6e8cbe 100644
--- a/apps/docs/src/pages/_app.tsx
+++ b/apps/docs/src/pages/_app.tsx
@@ -1,26 +1,24 @@
-import React from 'react';
-import { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import { debounce } from 'lodash';
-import { NextRouter, Router, useRouter } from 'next/router';
-import { NextUIProvider } from '@nextui-org/react';
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-import NProgress from 'nprogress';
-import PlausibleProvider from 'next-plausible';
-import { AppInitialProps } from 'next/app';
-import { NextComponent } from '@lib/types';
-import generateKbarActions from '@lib/kbar-actions';
-import { KBarProvider } from 'kbar';
-import { lightTheme, darkTheme } from '../theme/shared';
-import { isProd } from '@utils/index';
-import RouterEvents from '@lib/router-events';
-import globalStyles from '../styles/globalStyles';
-import '../styles/sandpack.css';
+import React from "react";
+import {NextPage} from "next";
+import dynamic from "next/dynamic";
+import {debounce} from "lodash";
+import {NextRouter, Router, useRouter} from "next/router";
+import {NextUIProvider} from "@nextui-org/react";
+import {ThemeProvider as NextThemesProvider} from "next-themes";
+import NProgress from "nprogress";
+import PlausibleProvider from "next-plausible";
+import {AppInitialProps} from "next/app";
+import {NextComponent} from "@lib/types";
+import generateKbarActions from "@lib/kbar-actions";
+import {KBarProvider} from "kbar";
+import {isProd} from "@utils/index";
+import RouterEvents from "@lib/router-events";
 
-type AppPropsType<
-  R extends NextRouter = NextRouter,
-  P = {}
-> = AppInitialProps & {
+import {lightTheme, darkTheme} from "../theme/shared";
+import globalStyles from "../styles/globalStyles";
+import "../styles/sandpack.css";
+
+type AppPropsType<R extends NextRouter = NextRouter, P = {}> = AppInitialProps & {
   Component: NextComponent<P>;
   router: R;
   __N_SSG?: boolean;
@@ -29,35 +27,38 @@ type AppPropsType<
 
 type AppProps<P = {}> = AppPropsType<Router, P>;
 
-const KbarComponent = dynamic(() => import('../components/kbar'), {
-  ssr: false
+const KbarComponent = dynamic(() => import("../components/kbar"), {
+  ssr: false,
 });
 
-NProgress.configure({ parent: '#app-container' });
+NProgress.configure({parent: "#app-container"});
 
 const start = debounce(NProgress.start, 100);
-RouterEvents.on('routeChangeStart', start);
-RouterEvents.on('routeChangeComplete', (url) => {
+
+RouterEvents.on("routeChangeStart", start);
+RouterEvents.on("routeChangeComplete", (url) => {
   console.log(`Changed to URL: ${url}`);
   start.cancel();
   NProgress.done();
 });
-RouterEvents.on('routeChangeError', () => {
+RouterEvents.on("routeChangeError", () => {
   start.cancel();
   NProgress.done();
 });
 
-const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
+const Application: NextPage<AppProps<{}>> = ({Component, pageProps}) => {
   const router = useRouter();
   const kbarActions = generateKbarActions(router);
+
   globalStyles();
+
   return (
     <NextThemesProvider
-      defaultTheme="system"
       attribute="class"
+      defaultTheme="system"
       value={{
         light: lightTheme.className,
-        dark: darkTheme.className
+        dark: darkTheme.className,
       }}
     >
       <NextUIProvider>
@@ -67,8 +68,8 @@ const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
             options={{
               animations: {
                 enterMs: 250,
-                exitMs: 100
-              }
+                exitMs: 100,
+              },
             }}
           >
             <KbarComponent />
diff --git a/apps/docs/src/pages/_document.tsx b/apps/docs/src/pages/_document.tsx
index 3bf8dad163..153285acc2 100644
--- a/apps/docs/src/pages/_document.tsx
+++ b/apps/docs/src/pages/_document.tsx
@@ -1,13 +1,7 @@
-import React from 'react';
-import Document, {
-  Html,
-  Head,
-  Main,
-  NextScript,
-  DocumentContext
-} from 'next/document';
-import { CssBaseline } from '@nextui-org/react';
-import flush from 'styled-jsx/server';
+import React from "react";
+import Document, {Html, Head, Main, NextScript, DocumentContext} from "next/document";
+import {CssBaseline} from "@nextui-org/react";
+import flush from "styled-jsx/server";
 
 class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
@@ -16,14 +10,14 @@ class MyDocument extends Document {
 
     return {
       ...initialProps,
-      styles: React.Children.toArray([initialProps.styles, styledJSXStyles])
+      styles: React.Children.toArray([initialProps.styles, styledJSXStyles]),
     };
   }
   render() {
     return (
       <Html lang="en">
         <Head>{CssBaseline.flush()}</Head>
-        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link href="https://fonts.gstatic.com" rel="preconnect" />
         <link
           href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
           rel="stylesheet"
diff --git a/apps/docs/src/pages/docs/[[...slug]].tsx b/apps/docs/src/pages/docs/[[...slug]].tsx
index 7b2f90d2ce..93917dc357 100644
--- a/apps/docs/src/pages/docs/[[...slug]].tsx
+++ b/apps/docs/src/pages/docs/[[...slug]].tsx
@@ -1,19 +1,20 @@
 /* eslint-disable react/display-name */
-import * as React from 'react';
-import router, { useRouter } from 'next/router';
-import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
-import DocsLayout from '@layouts/docs';
-import * as Components from '@nextui-org/react';
-import { GetStaticProps, GetStaticPaths } from 'next';
-import { MetaProps } from '@lib/docs/meta';
-import useDocsRoute from '@hooks/use-docs-route';
-import { MDXComponents } from '@components';
-import matter from 'gray-matter';
-import { serialize } from 'next-mdx-remote/serialize';
-import { getSlug } from '@lib/docs/utils';
-import { Action, useRegisterActions } from 'kbar';
-import fs from 'fs';
-import path from 'path';
+import fs from "fs";
+import path from "path";
+
+import * as React from "react";
+import router, {useRouter} from "next/router";
+import {MDXRemote, MDXRemoteSerializeResult} from "next-mdx-remote";
+import DocsLayout from "@layouts/docs";
+import * as Components from "@nextui-org/react";
+import {GetStaticProps, GetStaticPaths} from "next";
+import {MetaProps} from "@lib/docs/meta";
+import useDocsRoute from "@hooks/use-docs-route";
+import {MDXComponents} from "@components";
+import matter from "gray-matter";
+import {serialize} from "next-mdx-remote/serialize";
+import {getSlug} from "@lib/docs/utils";
+import {Action, useRegisterActions} from "kbar";
 import {
   Route,
   getCurrentTag,
@@ -21,20 +22,20 @@ import {
   fetchRawDoc,
   findRouteByPath,
   getRawAsset,
-  getPaths
-} from '@lib/docs/page';
-import componentsContent from '@content/components';
-import { isProd } from '@utils/index';
-import { getId } from '@utils/collections';
+  getPaths,
+} from "@lib/docs/page";
+import componentsContent from "@content/components";
+import {isProd} from "@utils/index";
+import {getId} from "@utils/collections";
 
 const components = {
   ...Components,
-  ...MDXComponents
+  ...MDXComponents,
 };
 
 const scope = {
   // Markdown content
-  ...componentsContent
+  ...componentsContent,
 };
 
 interface Props {
@@ -44,39 +45,38 @@ interface Props {
   meta?: MetaProps;
 }
 
-const DocsPage: React.FC<Props> = ({ routes, currentRoute, source, meta }) => {
-  const { route, prevRoute, nextRoute } = useDocsRoute(routes, currentRoute);
-  const { query } = useRouter();
-  const { tag, slug } = getSlug(query);
+const DocsPage: React.FC<Props> = ({routes, currentRoute, source, meta}) => {
+  const {route, prevRoute, nextRoute} = useDocsRoute(routes, currentRoute);
+  const {query} = useRouter();
+  const {tag, slug} = getSlug(query);
 
   // kbar home action
   const homeAction: Action = React.useMemo(() => {
     return {
       id: getId(),
-      name: 'Go Home',
-      section: 'Scope',
-      icon: 'home',
+      name: "Go Home",
+      section: "Scope",
+      icon: "home",
       shortcut: [],
-      keywords: 'home, return, back, landing, page, init, initial',
+      keywords: "home, return, back, landing, page, init, initial",
       children: [],
-      perform: () => router.push('/')
+      perform: () => router.push("/"),
     };
   }, [routes]);
 
   useRegisterActions([homeAction].filter(Boolean));
+
   return (
     <DocsLayout
-      routes={routes}
       currentRoute={route}
-      prevRoute={prevRoute}
+      meta={meta}
       nextRoute={nextRoute}
-      tag={tag}
+      prevRoute={prevRoute}
+      routes={routes}
       slug={slug}
-      meta={meta}
+      tag={tag}
     >
-      {source && (
-        <MDXRemote {...source} components={components} scope={scope} />
-      )}
+      {source && <MDXRemote {...source} components={components} scope={scope} />}
     </DocsLayout>
   );
 };
@@ -85,11 +85,12 @@ export const getStaticPaths: GetStaticPaths = async () => {
   const tag = await getCurrentTag();
   const manifest = await fetchDocsManifest(tag);
   const paths = getPaths(manifest.routes);
-  return { paths, fallback: false };
+
+  return {paths, fallback: false};
 };
 
-export const getStaticProps: GetStaticProps = async ({ params }) => {
-  const { tag, slug } = getSlug(params);
+export const getStaticProps: GetStaticProps = async ({params}) => {
+  const {tag, slug} = getSlug(params);
   const currentTag = await getCurrentTag(tag);
   const manifest = await fetchDocsManifest(currentTag).catch((error) => {
     // If a manifest wasn't found for a custom tag, show a 404 instead
@@ -101,7 +102,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 
   if (!route) {
     return {
-      props: {}
+      props: {},
     };
   }
 
@@ -109,35 +110,35 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
 
   if (isProd) {
     const rawFileSource = await fetchRawDoc(route.path, currentTag);
-    const { content, data } = matter(rawFileSource);
+    const {content, data} = matter(rawFileSource);
+
     doc = content.toString();
     meta = data;
   } else {
     meta = null;
-    const folderPath = path.join(process.cwd(), 'content');
+    const folderPath = path.join(process.cwd(), "content");
     const filePath = path.join(folderPath, `${slug}.mdx`);
     const rawFileSource = fs.readFileSync(filePath);
-    const { content, data } = matter(rawFileSource);
+    const {content, data} = matter(rawFileSource);
+
     doc = content.toString();
     meta = data;
   }
   const mdxSource = await serialize(doc, {
     mdxOptions: {
-      remarkPlugins: [
-        require('remark-autolink-headings'),
-        require('remark-slug')
-      ],
-      rehypePlugins: [require('@mapbox/rehype-prism')]
-    }
+      remarkPlugins: [require("remark-autolink-headings"), require("remark-slug")],
+      rehypePlugins: [require("@mapbox/rehype-prism")],
+    },
   });
 
   const routes = manifest.routes.map((route: any) => {
     if (route.icon) {
       return {
         ...route,
-        icon: getRawAsset(route.icon, currentTag)
+        icon: getRawAsset(route.icon, currentTag),
       };
     }
+
     return route;
   });
 
@@ -146,8 +147,8 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
       routes,
       meta,
       source: mdxSource,
-      currentRoute: route
-    }
+      currentRoute: route,
+    },
   };
 };
 
diff --git a/apps/docs/src/pages/index.tsx b/apps/docs/src/pages/index.tsx
index e84b6fa42b..5634e8f179 100644
--- a/apps/docs/src/pages/index.tsx
+++ b/apps/docs/src/pages/index.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { GetStaticProps } from 'next';
-import router, { useRouter } from 'next/router';
+import React from "react";
+import {GetStaticProps} from "next";
+import router, {useRouter} from "next/router";
 import {
   FeaturesGrid,
   Hero,
@@ -12,46 +12,41 @@ import {
   DarkModeSection,
   CustomizationSection,
   BuiltInStitchesSection,
-  LastButNotLeastSection
-} from '@components';
-import landingContent from '@content/landing';
-import DefaultLayout from '@layouts/default';
-import { getSlug } from '@lib/docs/utils';
-import { Route, getCurrentTag, fetchDocsManifest } from '@lib/docs/page';
-import { Action, useRegisterActions } from 'kbar';
-import { Spacer } from '@nextui-org/react';
-import { getId } from '@utils/collections';
+  LastButNotLeastSection,
+} from "@components";
+import landingContent from "@content/landing";
+import DefaultLayout from "@layouts/default";
+import {getSlug} from "@lib/docs/utils";
+import {Route, getCurrentTag, fetchDocsManifest} from "@lib/docs/page";
+import {Action, useRegisterActions} from "kbar";
+import {Spacer} from "@nextui-org/react";
+import {getId} from "@utils/collections";
 
 interface Props {
   routes: Route[];
   currentRoute: Route;
 }
 
-const IndexPage: React.FC<Props> = ({ routes, currentRoute }) => {
-  const { query } = useRouter();
-  const { tag, slug } = getSlug(query);
+const IndexPage: React.FC<Props> = ({routes, currentRoute}) => {
+  const {query} = useRouter();
+  const {tag, slug} = getSlug(query);
 
   // kbar home action
   const homeAction: Action = React.useMemo(() => {
     return {
       id: getId(),
-      name: 'Getting started',
-      section: 'Scope',
+      name: "Getting started",
+      section: "Scope",
       shortcut: [],
-      keywords: 'help, docs, go, started, getting started, nextui',
-      perform: () => router.push('/docs/guide/getting-started')
+      keywords: "help, docs, go, started, getting started, nextui",
+      perform: () => router.push("/docs/guide/getting-started"),
     };
   }, [routes]);
 
   useRegisterActions([homeAction]);
 
   return (
-    <DefaultLayout
-      routes={routes}
-      currentRoute={currentRoute}
-      tag={tag}
-      slug={slug}
-    >
+    <DefaultLayout currentRoute={currentRoute} routes={routes} slug={slug} tag={tag}>
       {/* Hero */}
       <Hero />
       {/* Main features */}
@@ -65,8 +60,8 @@ const IndexPage: React.FC<Props> = ({ routes, currentRoute }) => {
       <BuiltInStitchesSection />
       <LastButNotLeastSection />
       {/* Installation banner */}
-      <Section css={{ zIndex: '$10' }}>
-        <Spacer y={6} css={{ '@xsMax': { mt: '$16' } }} />
+      <Section css={{zIndex: "$10"}}>
+        <Spacer css={{"@xsMax": {mt: "$16"}}} y={6} />
         <InstallBanner />
       </Section>
       <Spacer y={6} />
@@ -81,10 +76,11 @@ const IndexPage: React.FC<Props> = ({ routes, currentRoute }) => {
 export const getStaticProps: GetStaticProps = async () => {
   const tag = await getCurrentTag();
   const manifest = await fetchDocsManifest(tag);
+
   return {
     props: {
-      routes: manifest.routes
-    }
+      routes: manifest.routes,
+    },
   };
 };
 
diff --git a/apps/docs/src/styles/globalStyles.ts b/apps/docs/src/styles/globalStyles.ts
index 23b64afb29..1b10fe0051 100644
--- a/apps/docs/src/styles/globalStyles.ts
+++ b/apps/docs/src/styles/globalStyles.ts
@@ -1,66 +1,65 @@
-import { globalCss } from '@nextui-org/react';
+import {globalCss} from "@nextui-org/react";
 
 export default globalCss({
   html: {
-    scrollPaddingTop: '80px'
+    scrollPaddingTop: "80px",
   },
   // css baseline overrides
   blockquote: {
-    mb: '$14 !important',
-    '& p': {
-      fontSize: '1rem !important'
-    }
+    mb: "$14 !important",
+    "& p": {
+      fontSize: "1rem !important",
+    },
   },
   // home sections
-  '.inview-section': {
-    zIndex: '$2',
-    width: '100%'
+  ".inview-section": {
+    zIndex: "$2",
+    width: "100%",
   },
   // sandpack-react
-  '.sp-highlight': {
-    background: '$codeHighlight',
-    borderLeft: '2px solid $gray400'
+  ".sp-highlight": {
+    background: "$codeHighlight",
+    borderLeft: "2px solid $gray400",
   },
-  '.sp-tabs': {
-    border: 'none !important',
-    borderRadius: 'inherit',
+  ".sp-tabs": {
+    border: "none !important",
+    borderRadius: "inherit",
     button: {
-      cursor: 'pointer'
-    }
+      cursor: "pointer",
+    },
   },
-  '.sp-layout': {
-    border: 'none !important',
-    overflow: 'visible !important',
-    WebkitMaskImage: 'none !important',
-    background: 'transparent !important'
+  ".sp-layout": {
+    border: "none !important",
+    overflow: "visible !important",
+    WebkitMaskImage: "none !important",
+    background: "transparent !important",
   },
-  '.sp-pre-placeholder': {
-    background: 'transparent !important',
-    borderRadius: '0 !important'
+  ".sp-pre-placeholder": {
+    background: "transparent !important",
+    borderRadius: "0 !important",
   },
-  '#nprogress': {
-    pointerEvents: 'none'
+  "#nprogress": {
+    pointerEvents: "none",
   },
-  '#nprogress .bar': {
-    background: 'var(--nextui-colors-secondary)',
-    position: 'fixed',
-    zIndex: '999999',
+  "#nprogress .bar": {
+    background: "var(--nextui-colors-secondary)",
+    position: "fixed",
+    zIndex: "999999",
     top: 0,
     left: 0,
-    width: '100%',
-    height: '3px'
+    width: "100%",
+    height: "3px",
   },
   /* Fancy blur effect */
-  ' #nprogress .peg': {
-    display: 'block',
-    position: 'absolute',
-    right: '0px',
-    width: '100px',
-    height: '100%',
-    boxShadow:
-      '0 0 10px var(--nextui-colors-secondary), 0 0 5px var(--nextui-colors-secondary)',
+  " #nprogress .peg": {
+    display: "block",
+    position: "absolute",
+    right: "0px",
+    width: "100px",
+    height: "100%",
+    boxShadow: "0 0 10px var(--nextui-colors-secondary), 0 0 5px var(--nextui-colors-secondary)",
     opacity: 1,
-    WebkitTransform: 'rotate(3deg) translate(0px, -4px)',
-    transform: 'rotate(3deg) translate(0px, -4px)'
-  }
+    WebkitTransform: "rotate(3deg) translate(0px, -4px)",
+    transform: "rotate(3deg) translate(0px, -4px)",
+  },
 });
diff --git a/apps/docs/src/theme/shared.ts b/apps/docs/src/theme/shared.ts
index 61892b4387..d405f4d25e 100644
--- a/apps/docs/src/theme/shared.ts
+++ b/apps/docs/src/theme/shared.ts
@@ -1,50 +1,50 @@
-import { createTheme } from '@nextui-org/react';
+import {createTheme} from "@nextui-org/react";
 
 const fonts = {
   sans: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-  mono: 'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace'
+  mono: "Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace",
 };
 
 export const lightTheme = createTheme({
-  type: 'light',
-  className: 'nextui-docs-light',
+  type: "light",
+  className: "nextui-docs-light",
   theme: {
     fonts,
     colors: {
-      headerBackground: 'hsla(0,0%,100%,0.8)',
-      menuBackground: 'rgba(255, 255, 255, 0.5)',
-      headerIconColor: '$accents4',
-      codeBackground: '#363449',
-      codeComment: '$accents7',
-      codeCopyIconColor: '$accents2',
-      cardBackground: '$white',
-      codeHighlight: 'hsl(243, 16%, 30%)',
-      backgroundBlur: 'rgba(255, 255, 255, 0.3)',
-      blockLinkColor: '#FF1CF7',
-      blockLinkBackground: '$accents1',
-      blockLinkHoverBackground: '#FFD1ED'
-    }
-  }
+      headerBackground: "hsla(0,0%,100%,0.8)",
+      menuBackground: "rgba(255, 255, 255, 0.5)",
+      headerIconColor: "$accents4",
+      codeBackground: "#363449",
+      codeComment: "$accents7",
+      codeCopyIconColor: "$accents2",
+      cardBackground: "$white",
+      codeHighlight: "hsl(243, 16%, 30%)",
+      backgroundBlur: "rgba(255, 255, 255, 0.3)",
+      blockLinkColor: "#FF1CF7",
+      blockLinkBackground: "$accents1",
+      blockLinkHoverBackground: "#FFD1ED",
+    },
+  },
 });
 
 export const darkTheme = createTheme({
-  type: 'dark',
-  className: 'nextui-docs-dark',
+  type: "dark",
+  className: "nextui-docs-dark",
   theme: {
     fonts,
     colors: {
-      menuBackground: 'rgba(0,0,0,0.8)',
-      headerBackground: 'rgba(0,0,0,0.5)',
-      headerIconColor: '$accents8',
-      codeBackground: '#111111',
-      codeComment: '$accents6',
-      codeCopyIconColor: '$accents7',
-      codeHighlight: 'hsl(0, 0%, 15%)',
-      cardBackground: '$accents0',
-      backgroundBlur: 'rgba(255, 255, 255, 0.1)',
-      blockLinkColor: '#FFA4E3',
-      blockLinkBackground: '$accents1',
-      blockLinkHoverBackground: '#55057A'
-    }
-  }
+      menuBackground: "rgba(0,0,0,0.8)",
+      headerBackground: "rgba(0,0,0,0.5)",
+      headerIconColor: "$accents8",
+      codeBackground: "#111111",
+      codeComment: "$accents6",
+      codeCopyIconColor: "$accents7",
+      codeHighlight: "hsl(0, 0%, 15%)",
+      cardBackground: "$accents0",
+      backgroundBlur: "rgba(255, 255, 255, 0.1)",
+      blockLinkColor: "#FFA4E3",
+      blockLinkBackground: "$accents1",
+      blockLinkHoverBackground: "#55057A",
+    },
+  },
 });
diff --git a/apps/docs/src/utils/animations.ts b/apps/docs/src/utils/animations.ts
index 953fed9569..d9625f1157 100644
--- a/apps/docs/src/utils/animations.ts
+++ b/apps/docs/src/utils/animations.ts
@@ -1,40 +1,40 @@
-import { keyframes } from '@nextui-org/react';
+import {keyframes} from "@nextui-org/react";
 
 export const levitating = keyframes({
-  '0%': {
-    transform: 'translateY(0)'
+  "0%": {
+    transform: "translateY(0)",
   },
-  '30%': {
-    transform: 'translateY(-10px)'
+  "30%": {
+    transform: "translateY(-10px)",
   },
-  '50%': {
-    transform: 'translateY(4px)'
+  "50%": {
+    transform: "translateY(4px)",
   },
-  '70%': {
-    transform: 'translateY(-15px)'
+  "70%": {
+    transform: "translateY(-15px)",
+  },
+  "100%": {
+    transform: "translateY(0)",
   },
-  '100%': {
-    transform: 'translateY(0)'
-  }
 });
 
 export const appears = keyframes({
   from: {
-    opacity: 0
+    opacity: 0,
   },
   to: {
-    opacity: 1
-  }
+    opacity: 1,
+  },
 });
 
 export const pulse = keyframes({
-  '0%': {
-    transform: 'scale(1)'
+  "0%": {
+    transform: "scale(1)",
+  },
+  "50%": {
+    transform: "scale(1.2)",
   },
-  '50%': {
-    transform: 'scale(1.2)'
+  "100%": {
+    transform: "scale(1)",
   },
-  '100%': {
-    transform: 'scale(1)'
-  }
 });
diff --git a/apps/docs/src/utils/fs-utils.ts b/apps/docs/src/utils/fs-utils.ts
index 556b8a7ccc..989523b6d1 100644
--- a/apps/docs/src/utils/fs-utils.ts
+++ b/apps/docs/src/utils/fs-utils.ts
@@ -1,5 +1,5 @@
-import fs from 'fs';
-import { promisify } from 'util';
+import fs from "fs";
+import {promisify} from "util";
 
 export const readFile = promisify(fs.readFile);
 export const writeFile = promisify(fs.writeFile);
diff --git a/apps/docs/src/utils/get-headings.ts b/apps/docs/src/utils/get-headings.ts
index 7d2d5b2d5b..338bb5c5a9 100644
--- a/apps/docs/src/utils/get-headings.ts
+++ b/apps/docs/src/utils/get-headings.ts
@@ -4,13 +4,12 @@ export interface Heading {
 }
 
 export function getHeadings(): Heading[] {
-  const headings = document.getElementsByClassName(
-    'linked-heading'
-  ) as HTMLCollection;
+  const headings = document.getElementsByClassName("linked-heading") as HTMLCollection;
+
   return Array.from(headings).map((e: HTMLHtmlElement) => {
     return {
       id: e.id,
-      text: e.getAttribute('data-name'),
+      text: e.getAttribute("data-name"),
     };
   }) as Heading[];
 }
diff --git a/apps/docs/src/utils/index.ts b/apps/docs/src/utils/index.ts
index ede0dc32f8..b5c2c5688d 100644
--- a/apps/docs/src/utils/index.ts
+++ b/apps/docs/src/utils/index.ts
@@ -1,26 +1,26 @@
-import Router from 'next/router';
+import Router from "next/router";
 export const isBrowser = typeof window !== `undefined`;
 
 export const getCssVar = (name?: string) => {
-  if (typeof document !== 'undefined' || !name) {
-    const property = isCssVar(name)
-      ? name?.replace('var(', '').replace(')', '')
-      : `--${name}`;
-    if (!property) return '';
-    return getComputedStyle(document.documentElement).getPropertyValue(
-      property
-    );
+  if (typeof document !== "undefined" || !name) {
+    const property = isCssVar(name) ? name?.replace("var(", "").replace(")", "") : `--${name}`;
+
+    if (!property) return "";
+
+    return getComputedStyle(document.documentElement).getPropertyValue(property);
   }
-  return '';
+
+  return "";
 };
 
 export const isCssVar = (property?: string) => {
-  return property && property?.indexOf('var(') === 0 ? true : false;
+  return property && property?.indexOf("var(") === 0 ? true : false;
 };
 
 export const toCapitalize = (name: string) => {
   const [first, ...rest] = name;
-  return `${first.toUpperCase()}${rest.join('')}`;
+
+  return `${first.toUpperCase()}${rest.join("")}`;
 };
 
 export const validateEmail = (value: string) => {
@@ -35,47 +35,53 @@ export const validateEmail = (value: string) => {
  */
 export const isHex = (str: string): boolean => {
   const exp = /#[a-fA-F0-9]{3,6}/g;
+
   return exp.test(str);
 };
 
 export function removeFromLast<T>(path: string, key: string): string | T {
   const i = path.lastIndexOf(key);
+
   return i === -1 ? path : path.substring(0, i);
 }
 
 export function isFunction(fn: any): boolean {
-  return typeof fn === 'function';
+  return typeof fn === "function";
 }
 
 export const isPathActive = (href: string, exact = false): boolean => {
   if (!isBrowser) return false;
   if (exact) return Router.pathname === href;
+
   return Router.pathname.startsWith(href);
 };
 
 export const hexFromString = (
   str: string,
-  defaultColor: string = '',
-  returnLast = false
+  defaultColor: string = "",
+  returnLast = false,
 ): string | string[] => {
   const fullReg = /#[a-fA-F0-9]{6}|#[a-fA-F0-9]{3}$/g;
   const hexCodes = str.match(fullReg);
+
   if (hexCodes && hexCodes.length > 0) {
     return returnLast ? hexCodes[hexCodes.length - 1] : hexCodes;
   }
+
   return defaultColor;
 };
 
 function padZero(str: string, len?: number): string {
   len = len || 2;
-  var zeros = new Array(len).join('0');
+  var zeros = new Array(len).join("0");
+
   return (zeros + str).slice(-len);
 }
 
 export const invertHex = (hexProp: string, smooth = true) => {
   let hex = isCssVar(hexProp) ? getCssVar(hexProp) : hexProp;
 
-  if (hex.indexOf('#') === 0) {
+  if (hex.indexOf("#") === 0) {
     hex = hex.slice(1);
   }
   // convert 3-digit hex to 6-digits.
@@ -88,21 +94,18 @@ export const invertHex = (hexProp: string, smooth = true) => {
   let r = parseInt(hex.slice(0, 2), 16),
     g = parseInt(hex.slice(2, 4), 16),
     b = parseInt(hex.slice(4, 6), 16);
+
   if (smooth) {
     // http://stackoverflow.com/a/3943023/112731
-    return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF';
+    return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "#000000" : "#FFFFFF";
   }
   // invert color components
   r = 255 - r;
   g = 255 - g;
   b = 255 - b;
+
   // pad each with zeros and return
-  return (
-    '#' +
-    padZero(r.toString(16)) +
-    padZero(g.toString(16)) +
-    padZero(b.toString(16))
-  );
+  return "#" + padZero(r.toString(16)) + padZero(g.toString(16)) + padZero(b.toString(16));
 };
 
 /**
@@ -115,65 +118,71 @@ export const hexToRGBA = (hex: string, alpha: number = 1): string => {
   let r: string | number = 0,
     g: string | number = 0,
     b: string | number = 0;
+
   // 3 digits
   if (hex.length == 4) {
-    r = '0x' + hex[1] + hex[1];
-    g = '0x' + hex[2] + hex[2];
-    b = '0x' + hex[3] + hex[3];
+    r = "0x" + hex[1] + hex[1];
+    g = "0x" + hex[2] + hex[2];
+    b = "0x" + hex[3] + hex[3];
     // 6 digits
   } else if (hex.length == 7) {
-    r = '0x' + hex[1] + hex[2];
-    g = '0x' + hex[3] + hex[4];
-    b = '0x' + hex[5] + hex[6];
+    r = "0x" + hex[1] + hex[2];
+    g = "0x" + hex[3] + hex[4];
+    b = "0x" + hex[5] + hex[6];
   }
+
   return `rgba(${+r}, ${+g},${+b},${alpha})`;
 };
 
 export const hexToRgb = (color: string): [number, number, number] => {
   const fullReg = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  const full = color.replace(
-    fullReg,
-    (_, r, g, b) => `${r}${r}${g}${g}${b}${b}`
-  );
+  const full = color.replace(fullReg, (_, r, g, b) => `${r}${r}${g}${g}${b}${b}`);
   const values = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(full);
+
   if (!values) {
     throw new Error(`Next UI: Unsupported ${color} color.`);
   }
+
   return [
     Number.parseInt(values[1], 16),
     Number.parseInt(values[2], 16),
-    Number.parseInt(values[3], 16)
+    Number.parseInt(values[3], 16),
   ];
 };
 
 export const colorToRgbValues = (color: string) => {
-  if (color.charAt(0) === '#') return hexToRgb(color);
+  if (color.charAt(0) === "#") return hexToRgb(color);
 
-  const safeColor = color.replace(/ /g, '');
+  const safeColor = color.replace(/ /g, "");
   const colorType = color.substr(0, 4);
 
   const regArray = safeColor.match(/\((.+)\)/);
-  if (!colorType.startsWith('rgb') || !regArray) {
+
+  if (!colorType.startsWith("rgb") || !regArray) {
     throw new Error(`Next UI: Only support ["RGB", "RGBA", "HEX"] color.`);
   }
 
-  return regArray[1].split(',').map((str) => Number.parseFloat(str));
+  return regArray[1].split(",").map((str) => Number.parseFloat(str));
 };
 
 export const addColorAlpha = (colorProp?: string, alpha?: number) => {
   if (!colorProp) return colorProp;
   const color = isCssVar(colorProp) ? getCssVar(colorProp) : colorProp;
+
   if (isHex(color)) {
     return hexToRGBA(color, alpha);
   } else if (!/^#|rgb|RGB/.test(color)) {
     return color;
   }
   const [r, g, b] = colorToRgbValues(color);
+
   if (alpha) {
     const safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
+
     return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`;
   }
+
   return `rgb(${r}, ${g}, ${b})`;
 };
 
-export const isProd = process.env.NODE_ENV === 'production';
+export const isProd = process.env.NODE_ENV === "production";
diff --git a/apps/docs/src/utils/links.ts b/apps/docs/src/utils/links.ts
index 4ba78b2ab2..c52b24add5 100644
--- a/apps/docs/src/utils/links.ts
+++ b/apps/docs/src/utils/links.ts
@@ -1,2 +1 @@
-export const isActive = (pathname: string, href: string) =>
-  pathname && pathname.startsWith(href);
+export const isActive = (pathname: string, href: string) => pathname && pathname.startsWith(href);
diff --git a/apps/docs/src/utils/scripts.ts b/apps/docs/src/utils/scripts.ts
index 1cd4dffc55..00472f99af 100644
--- a/apps/docs/src/utils/scripts.ts
+++ b/apps/docs/src/utils/scripts.ts
@@ -1,14 +1,16 @@
 export const loadScript = (src: string, container: HTMLElement | null) => {
-  const script = document.createElement('script');
-  script.setAttribute('async', '');
+  const script = document.createElement("script");
+
+  script.setAttribute("async", "");
   script.src = src;
   container && container.appendChild(script);
+
   return script;
 };
 
 export const removeScript = (
   script: HTMLScriptElement | HTMLElement,
-  container: HTMLElement | null
+  container: HTMLElement | null,
 ) => {
   if (script.parentNode != container) return;
   container && container?.removeChild(script);
diff --git a/apps/docs/src/utils/types.d.ts b/apps/docs/src/utils/types.d.ts
deleted file mode 100644
index 4d4f6790ff..0000000000
--- a/apps/docs/src/utils/types.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type DeepPartial<T> = {
-    [P in keyof T]?: T[P] extends 
-    Record<string, unknown> ? DeepPartial<T[P]> : T[P]
-  }
-  
\ No newline at end of file
diff --git a/apps/docs/src/utils/types.ts b/apps/docs/src/utils/types.ts
deleted file mode 100644
index e94e1ae20b..0000000000
--- a/apps/docs/src/utils/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type DeepPartial<T> = {
-  [P in keyof T]?: T[P] extends Record<string, unknown>
-    ? DeepPartial<T[P]>
-    : T[P];
-};
diff --git a/apps/docs/src/utils/with-defaults.ts b/apps/docs/src/utils/with-defaults.ts
index 3ef56b7b4e..b91d13130c 100644
--- a/apps/docs/src/utils/with-defaults.ts
+++ b/apps/docs/src/utils/with-defaults.ts
@@ -1,11 +1,9 @@
-import React from 'react';
+import React from "react";
 
-const withDefaults = <P, DP>(
-  component: React.ComponentType<P>,
-  defaultProps: DP
-) => {
+const withDefaults = <P, DP>(component: React.ComponentType<P>, defaultProps: DP) => {
   type Props = Partial<DP> & Omit<P, keyof DP>;
   component.defaultProps = defaultProps;
+
   return component as React.ComponentType<Props>;
 };
 
diff --git a/packages/react/src/utils/types.d.ts b/packages/react/src/utils/types.d.ts
deleted file mode 100644
index 9c37e34ce2..0000000000
--- a/packages/react/src/utils/types.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type DeepPartial<T> = {
-  [P in keyof T]?: T[P] extends Record<string, unknown> ? DeepPartial<T[P]> : T[P];
-};

From aa9af006cc2173abe8978a0ae0eef98774e25849 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 19 Jun 2022 18:37:36 -0300
Subject: [PATCH 008/106] refactor(docs-content): eslint rules applied

---
 .../content/components/avatar/bordered.ts     |   4 +-
 apps/docs/content/components/avatar/color.ts  |   4 +-
 .../docs/content/components/avatar/default.ts |   4 +-
 apps/docs/content/components/avatar/group.ts  |   4 +-
 apps/docs/content/components/avatar/icon.ts   |  14 +-
 apps/docs/content/components/avatar/index.ts  |  18 +-
 apps/docs/content/components/avatar/size.ts   |   4 +-
 .../docs/content/components/avatar/squared.ts |   4 +-
 apps/docs/content/components/avatar/zoomed.ts |   4 +-
 .../components/button-group/default.ts        |   4 +-
 .../components/button-group/disabled.ts       |   4 +-
 .../content/components/button-group/index.ts  |  14 +-
 .../components/button-group/loading.ts        |   4 +-
 .../content/components/button-group/sizes.ts  |   4 +-
 .../components/button-group/variants.ts       |   4 +-
 .../components/button-group/vertical.ts       |   4 +-
 .../content/components/button/bordered.ts     |   4 +-
 apps/docs/content/components/button/color.ts  |   4 +-
 .../docs/content/components/button/default.ts |   4 +-
 .../content/components/button/disabled.ts     |   4 +-
 apps/docs/content/components/button/flat.ts   |   4 +-
 apps/docs/content/components/button/ghost.ts  |   4 +-
 apps/docs/content/components/button/icon.ts   |  14 +-
 apps/docs/content/components/button/light.ts  |   4 +-
 .../docs/content/components/button/loading.ts |   4 +-
 .../docs/content/components/button/rounded.ts |   4 +-
 apps/docs/content/components/button/shadow.ts |   4 +-
 apps/docs/content/components/button/sizes.ts  |   4 +-
 apps/docs/content/components/card/action.ts   |   4 +-
 apps/docs/content/components/card/cover.ts    |  14 +-
 apps/docs/content/components/card/default.ts  |   4 +-
 apps/docs/content/components/card/divider.ts  |   4 +-
 apps/docs/content/components/card/footer.ts   |   4 +-
 .../docs/content/components/card/hoverable.ts |   4 +-
 apps/docs/content/components/card/index.ts    |  18 +-
 .../docs/content/components/card/pressable.ts |   4 +-
 apps/docs/content/components/card/variants.ts |   4 +-
 .../components/checkbox-group/column.ts       |   4 +-
 .../controlled-vs-uncontrolled.ts             |   4 +-
 .../components/checkbox-group/events.ts       |   4 +-
 .../components/checkbox-group/index.ts        |  10 +-
 .../content/components/checkbox-group/row.ts  |   4 +-
 .../docs/content/components/checkbox/color.ts |   4 +-
 .../checkbox/controlled-vs-uncontrolled.ts    |   4 +-
 .../content/components/checkbox/default.ts    |   4 +-
 .../content/components/checkbox/disabled.ts   |   4 +-
 .../docs/content/components/checkbox/index.ts |  22 +-
 .../components/checkbox/interminate.ts        |   4 +-
 .../components/checkbox/label-color.ts        |   4 +-
 .../components/checkbox/line-through.ts       |   4 +-
 .../components/checkbox/no-animated.ts        |   4 +-
 .../content/components/checkbox/rounded.ts    |   4 +-
 apps/docs/content/components/checkbox/size.ts |   4 +-
 .../content/components/collapse/bordered.ts   |   4 +-
 .../components/collapse/content-left.ts       |   4 +-
 .../components/collapse/custom-arrow.ts       |  10 +-
 .../content/components/collapse/default.ts    |   4 +-
 .../content/components/collapse/disabled.ts   |   4 +-
 .../docs/content/components/collapse/index.ts |  26 +-
 .../components/collapse/initial-expanded.ts   |   4 +-
 .../components/collapse/no-accordion.ts       |   4 +-
 .../components/collapse/no-animated.ts        |   4 +-
 .../content/components/collapse/no-divider.ts |   4 +-
 .../content/components/collapse/shadow.ts     |   4 +-
 .../content/components/collapse/splitted.ts   |   4 +-
 .../components/collapse/with-subtitle.ts      |   4 +-
 .../components/container/autoLayout.ts        |   4 +-
 .../components/container/breakpoint.ts        |   4 +-
 .../content/components/container/default.ts   |   4 +-
 .../content/components/container/fluid.ts     |   4 +-
 .../content/components/container/index.ts     |  10 +-
 .../content/components/dropdown/command.ts    |   4 +-
 .../components/dropdown/custom-trigger.ts     |   4 +-
 .../components/dropdown/description.ts        |  12 +-
 .../components/dropdown/disable-animation.ts  |  12 +-
 .../components/dropdown/disabled-keys.ts      |   4 +-
 .../content/components/dropdown/dynamic.ts    |   4 +-
 apps/docs/content/components/dropdown/icon.ts |  12 +-
 .../docs/content/components/dropdown/index.ts |  28 +-
 .../components/dropdown/multiple-selection.ts |   4 +-
 .../content/components/dropdown/sections.ts   |  12 +-
 .../components/dropdown/single-selection.ts   |   4 +-
 .../content/components/dropdown/static.ts     |   4 +-
 .../content/components/dropdown/variants.ts   |   4 +-
 .../components/dropdown/with-divider.ts       |   4 +-
 .../docs/content/components/grid/autoWidth.ts |   4 +-
 apps/docs/content/components/grid/default.ts  |   4 +-
 apps/docs/content/components/grid/fluid.ts    |   4 +-
 .../content/components/grid/hideElement.ts    |   6 +-
 apps/docs/content/components/grid/index.ts    |  12 +-
 .../content/components/grid/responsive.ts     |   6 +-
 apps/docs/content/components/image/default.ts |   4 +-
 .../content/components/image/objectFit.ts     |   4 +-
 .../content/components/image/showSkeleton.ts  |   4 +-
 apps/docs/content/components/image/size.ts    |   4 +-
 apps/docs/content/components/index.ts         |  54 +--
 .../docs/content/components/input/LRLabels.ts |   5 +-
 .../docs/content/components/input/bordered.ts |   5 +-
 .../content/components/input/clearable.ts     |   4 +-
 apps/docs/content/components/input/content.ts |  10 +-
 apps/docs/content/components/input/default.ts |   4 +-
 .../docs/content/components/input/disabled.ts |   4 +-
 apps/docs/content/components/input/helper.ts  |   4 +-
 apps/docs/content/components/input/label.ts   |   4 +-
 .../components/input/labelPlaceholder.ts      |   4 +-
 .../content/components/input/noAnimated.ts    |   5 +-
 .../docs/content/components/input/password.ts |   8 +-
 apps/docs/content/components/input/rounded.ts |   5 +-
 apps/docs/content/components/input/shadow.ts  |   5 +-
 apps/docs/content/components/input/size.ts    |   5 +-
 apps/docs/content/components/input/status.ts  |   5 +-
 apps/docs/content/components/input/types.ts   |   5 +-
 .../content/components/input/underlined.ts    |   5 +-
 apps/docs/content/components/link/block.ts    |   4 +-
 apps/docs/content/components/link/color.ts    |   4 +-
 apps/docs/content/components/link/default.ts  |   4 +-
 apps/docs/content/components/link/icon.ts     |   4 +-
 apps/docs/content/components/link/nextLink.ts |   4 +-
 .../docs/content/components/link/variation.ts |   4 +-
 apps/docs/content/components/loading/color.ts |   5 +-
 .../content/components/loading/default.ts     |   4 +-
 apps/docs/content/components/loading/index.ts |  15 +-
 apps/docs/content/components/loading/size.ts  |   5 +-
 apps/docs/content/components/loading/text.ts  |   5 +-
 .../content/components/loading/textColor.ts   |   5 +-
 apps/docs/content/components/loading/types.ts |   5 +-
 .../components/modal/blurBackground.ts        |   8 +-
 apps/docs/content/components/modal/default.ts |   8 +-
 .../content/components/modal/fullscreen.ts    |   5 +-
 apps/docs/content/components/modal/index.ts   |  18 +-
 .../content/components/modal/largeContent.ts  |   5 +-
 .../content/components/modal/noAnimated.ts    |   8 +-
 .../content/components/modal/preventClose.ts  |   8 +-
 .../components/modal/withoutPadding.ts        |   4 +-
 .../content/components/pagination/bordered.ts |   4 +-
 .../components/pagination/boundaries.ts       |   4 +-
 .../content/components/pagination/color.ts    |   4 +-
 .../content/components/pagination/default.ts  |   5 +-
 .../content/components/pagination/dots.ts     |   4 +-
 .../content/components/pagination/index.ts    |  27 +-
 .../content/components/pagination/loop.ts     |   4 +-
 .../components/pagination/noAnimation.ts      |   4 +-
 .../content/components/pagination/noCtrl.ts   |   4 +-
 .../content/components/pagination/noMargin.ts |   4 +-
 .../content/components/pagination/rounded.ts  |   4 +-
 .../content/components/pagination/shadow.ts   |   4 +-
 .../content/components/pagination/sibling.ts  |   4 +-
 .../content/components/pagination/sizes.ts    |   4 +-
 .../content/components/popover/bordered.ts    |   4 +-
 .../popover/controlled-vs-uncontrolled.ts     |   4 +-
 .../components/popover/custom-content.ts      |   8 +-
 .../content/components/popover/default.ts     |   4 +-
 .../components/popover/disable-animation.ts   |   4 +-
 apps/docs/content/components/popover/index.ts |  14 +-
 .../content/components/popover/placements.ts  |   6 +-
 .../docs/content/components/progress/color.ts |   4 +-
 .../content/components/progress/default.ts    |   4 +-
 .../components/progress/indeterminated.ts     |   4 +-
 .../docs/content/components/progress/index.ts |  20 +-
 .../components/progress/noAnimation.ts        |   4 +-
 .../content/components/progress/shadow.ts     |   4 +-
 apps/docs/content/components/progress/size.ts |   4 +-
 .../content/components/progress/squared.ts    |   4 +-
 .../content/components/progress/status.ts     |   4 +-
 .../content/components/progress/striped.ts    |   4 +-
 apps/docs/content/components/radio/color.ts   |   4 +-
 .../radio/controlled-vs-uncontrolled.ts       |   4 +-
 apps/docs/content/components/radio/default.ts |   4 +-
 .../content/components/radio/description.ts   |   4 +-
 .../components/radio/disableAnimation.ts      |   4 +-
 .../docs/content/components/radio/disabled.ts |   4 +-
 apps/docs/content/components/radio/events.ts  |   4 +-
 apps/docs/content/components/radio/index.ts   |  26 +-
 apps/docs/content/components/radio/invalid.ts |   4 +-
 .../content/components/radio/labelColor.ts    |   4 +-
 apps/docs/content/components/radio/row.ts     |   4 +-
 apps/docs/content/components/radio/size.ts    |   4 +-
 apps/docs/content/components/radio/squared.ts |   4 +-
 .../content/components/spacer/horizontal.ts   |   4 +-
 apps/docs/content/components/spacer/index.ts  |   6 +-
 .../content/components/spacer/vertical.ts     |   4 +-
 .../content/components/switch/bordered.ts     |   4 +-
 apps/docs/content/components/switch/color.ts  |   4 +-
 .../docs/content/components/switch/default.ts |   4 +-
 .../content/components/switch/disabled.ts     |   4 +-
 apps/docs/content/components/switch/icon.ts   |  24 +-
 apps/docs/content/components/switch/index.ts  |  22 +-
 .../content/components/switch/initialCheck.ts |   4 +-
 .../content/components/switch/noAnimated.ts   |   8 +-
 apps/docs/content/components/switch/shadow.ts |   4 +-
 apps/docs/content/components/switch/size.ts   |   4 +-
 .../docs/content/components/switch/squared.ts |   4 +-
 .../docs/content/components/table/bordered.ts |   4 +-
 apps/docs/content/components/table/colors.ts  |   4 +-
 apps/docs/content/components/table/compact.ts |   4 +-
 .../content/components/table/custom-cells.ts  |  26 +-
 .../content/components/table/disabled-keys.ts |   4 +-
 .../table/disallow-empty-selection.ts         |   4 +-
 apps/docs/content/components/table/dynamic.ts |   4 +-
 apps/docs/content/components/table/index.ts   |  36 +-
 .../components/table/infinity-pagination.ts   |   4 +-
 apps/docs/content/components/table/lined.ts   |   4 +-
 .../components/table/multiple-selection.ts    |   4 +-
 .../content/components/table/no-animated.ts   |   4 +-
 .../content/components/table/pagination.ts    |   4 +-
 .../components/table/single-selection.ts      |   4 +-
 .../docs/content/components/table/sortable.ts |   4 +-
 apps/docs/content/components/table/static.ts  |   4 +-
 apps/docs/content/components/table/sticked.ts |   4 +-
 apps/docs/content/components/table/striped.ts |   4 +-
 .../content/components/text/blockquote.ts     |   5 +-
 apps/docs/content/components/text/color.ts    |   4 +-
 apps/docs/content/components/text/compose.ts  |   5 +-
 apps/docs/content/components/text/default.ts  |   4 +-
 apps/docs/content/components/text/gradient.ts |   4 +-
 apps/docs/content/components/text/index.ts    |  16 +-
 .../docs/content/components/text/paragraph.ts |   4 +-
 apps/docs/content/components/text/size.ts     |  17 +-
 apps/docs/content/components/text/small.ts    |   4 +-
 .../content/components/textarea/autosize.ts   |   4 +-
 .../textarea/controlledUncontrolled.ts        |   4 +-
 .../content/components/textarea/default.ts    |   4 +-
 .../content/components/textarea/disabled.ts   |   4 +-
 .../content/components/textarea/helper.ts     |   4 +-
 .../docs/content/components/textarea/index.ts |  16 +-
 .../content/components/textarea/status.ts     |   4 +-
 .../docs/content/components/textarea/types.ts |   4 +-
 apps/docs/content/components/tooltip/color.ts |   4 +-
 .../components/tooltip/customContent.ts       |   8 +-
 .../content/components/tooltip/default.ts     |   4 +-
 apps/docs/content/components/tooltip/index.ts |  18 +-
 .../content/components/tooltip/noArrow.ts     |   4 +-
 .../content/components/tooltip/placement.ts   |   4 +-
 .../content/components/tooltip/rounded.ts     |   4 +-
 .../content/components/tooltip/textColor.ts   |   4 +-
 .../content/components/tooltip/trigger.ts     |   4 +-
 apps/docs/content/components/user/border.ts   |   4 +-
 apps/docs/content/components/user/color.ts    |   4 +-
 apps/docs/content/components/user/default.ts  |   4 +-
 .../content/components/user/description.ts    |   4 +-
 apps/docs/content/components/user/index.ts    |  20 +-
 apps/docs/content/components/user/link.ts     |   4 +-
 apps/docs/content/components/user/pointer.ts  |   4 +-
 apps/docs/content/components/user/size.ts     |   4 +-
 apps/docs/content/components/user/squared.ts  |   4 +-
 apps/docs/content/components/user/zoomed.ts   |   4 +-
 apps/docs/content/docs/manifest.json          | 456 +++++++++---------
 apps/docs/content/landing/index.tsx           |  85 ++--
 248 files changed, 1025 insertions(+), 1060 deletions(-)

diff --git a/apps/docs/content/components/avatar/bordered.ts b/apps/docs/content/components/avatar/bordered.ts
index a465c02907..ed85af7316 100644
--- a/apps/docs/content/components/avatar/bordered.ts
+++ b/apps/docs/content/components/avatar/bordered.ts
@@ -56,9 +56,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/avatar/color.ts b/apps/docs/content/components/avatar/color.ts
index 1c7c55cb8f..cb5d5e3ad1 100644
--- a/apps/docs/content/components/avatar/color.ts
+++ b/apps/docs/content/components/avatar/color.ts
@@ -44,9 +44,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/avatar/default.ts b/apps/docs/content/components/avatar/default.ts
index 34b99fd0ad..e47a86cd9a 100644
--- a/apps/docs/content/components/avatar/default.ts
+++ b/apps/docs/content/components/avatar/default.ts
@@ -38,9 +38,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/avatar/group.ts b/apps/docs/content/components/avatar/group.ts
index aba2aeeeb1..0e2faf47a8 100644
--- a/apps/docs/content/components/avatar/group.ts
+++ b/apps/docs/content/components/avatar/group.ts
@@ -38,9 +38,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/avatar/icon.ts b/apps/docs/content/components/avatar/icon.ts
index 03685119fe..b39ba13b19 100644
--- a/apps/docs/content/components/avatar/icon.ts
+++ b/apps/docs/content/components/avatar/icon.ts
@@ -260,14 +260,14 @@ export default function App() {
 }`;
 
 const react = {
-  '/SunIcon.js': SunIcon,
-  '/MoonIcon.js': MoonIcon,
-  '/VideoIcon.js': VideoIcon,
-  '/VolumeUpIcon.js': VolumeUpIcon,
-  '/MicrophoneIcon.js': MicrophoneIcon,
-  '/App.js': AppJs
+  "/SunIcon.js": SunIcon,
+  "/MoonIcon.js": MoonIcon,
+  "/VideoIcon.js": VideoIcon,
+  "/VolumeUpIcon.js": VolumeUpIcon,
+  "/MicrophoneIcon.js": MicrophoneIcon,
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/avatar/index.ts b/apps/docs/content/components/avatar/index.ts
index e098e3bdbf..c43e3f2c0f 100644
--- a/apps/docs/content/components/avatar/index.ts
+++ b/apps/docs/content/components/avatar/index.ts
@@ -1,11 +1,11 @@
-import default_avatar from './default';
-import size from './size';
-import color from './color'; 
-import bordered from './bordered';
-import zoomed from './zoomed';
-import squared from './squared';
-import icon from './icon';
-import group from './group';
+import default_avatar from "./default";
+import size from "./size";
+import color from "./color";
+import bordered from "./bordered";
+import zoomed from "./zoomed";
+import squared from "./squared";
+import icon from "./icon";
+import group from "./group";
 
 export default {
   default_avatar,
@@ -15,5 +15,5 @@ export default {
   zoomed,
   squared,
   icon,
-  group
+  group,
 };
diff --git a/apps/docs/content/components/avatar/size.ts b/apps/docs/content/components/avatar/size.ts
index 85db8457bc..0f70f95db6 100644
--- a/apps/docs/content/components/avatar/size.ts
+++ b/apps/docs/content/components/avatar/size.ts
@@ -35,9 +35,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/avatar/squared.ts b/apps/docs/content/components/avatar/squared.ts
index 3c8eba4da0..b11d1cda60 100644
--- a/apps/docs/content/components/avatar/squared.ts
+++ b/apps/docs/content/components/avatar/squared.ts
@@ -62,9 +62,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/avatar/zoomed.ts b/apps/docs/content/components/avatar/zoomed.ts
index 8a1b1b85ab..9e82c24778 100644
--- a/apps/docs/content/components/avatar/zoomed.ts
+++ b/apps/docs/content/components/avatar/zoomed.ts
@@ -57,9 +57,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button-group/default.ts b/apps/docs/content/components/button-group/default.ts
index 2d69bb91b7..65df6fef99 100644
--- a/apps/docs/content/components/button-group/default.ts
+++ b/apps/docs/content/components/button-group/default.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button-group/disabled.ts b/apps/docs/content/components/button-group/disabled.ts
index 3ed363747e..3d4091b857 100644
--- a/apps/docs/content/components/button-group/disabled.ts
+++ b/apps/docs/content/components/button-group/disabled.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button-group/index.ts b/apps/docs/content/components/button-group/index.ts
index dad9e4d4bf..17d86f5671 100644
--- a/apps/docs/content/components/button-group/index.ts
+++ b/apps/docs/content/components/button-group/index.ts
@@ -1,9 +1,9 @@
-import defaultButtonGroup from './default';
-import disabledButtonGroup from './disabled';
-import loading from './loading';
-import sizes from './sizes';
-import vertical from './vertical';
-import variants from './variants';
+import defaultButtonGroup from "./default";
+import disabledButtonGroup from "./disabled";
+import loading from "./loading";
+import sizes from "./sizes";
+import vertical from "./vertical";
+import variants from "./variants";
 
 export default {
   defaultButtonGroup,
@@ -11,5 +11,5 @@ export default {
   loading,
   sizes,
   vertical,
-  variants
+  variants,
 };
diff --git a/apps/docs/content/components/button-group/loading.ts b/apps/docs/content/components/button-group/loading.ts
index 20f5510942..15a9b01f2f 100644
--- a/apps/docs/content/components/button-group/loading.ts
+++ b/apps/docs/content/components/button-group/loading.ts
@@ -19,9 +19,9 @@ export default function App() {
 `;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button-group/sizes.ts b/apps/docs/content/components/button-group/sizes.ts
index dbb68c4b8d..cca5c1c47e 100644
--- a/apps/docs/content/components/button-group/sizes.ts
+++ b/apps/docs/content/components/button-group/sizes.ts
@@ -44,9 +44,9 @@ export default function App() {
 `;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button-group/variants.ts b/apps/docs/content/components/button-group/variants.ts
index c2b031d502..78b6fcd2f7 100644
--- a/apps/docs/content/components/button-group/variants.ts
+++ b/apps/docs/content/components/button-group/variants.ts
@@ -44,9 +44,9 @@ export default function App() {
 `;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button-group/vertical.ts b/apps/docs/content/components/button-group/vertical.ts
index 4f28deabd5..15299fc540 100644
--- a/apps/docs/content/components/button-group/vertical.ts
+++ b/apps/docs/content/components/button-group/vertical.ts
@@ -39,9 +39,9 @@ export default function App() {
 `;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/bordered.ts b/apps/docs/content/components/button/bordered.ts
index 2facef0c3b..7c43d20bb3 100644
--- a/apps/docs/content/components/button/bordered.ts
+++ b/apps/docs/content/components/button/bordered.ts
@@ -38,9 +38,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/color.ts b/apps/docs/content/components/button/color.ts
index 756574e2bb..52eefedf12 100644
--- a/apps/docs/content/components/button/color.ts
+++ b/apps/docs/content/components/button/color.ts
@@ -38,9 +38,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/default.ts b/apps/docs/content/components/button/default.ts
index 30081d4be5..4d20937cd3 100644
--- a/apps/docs/content/components/button/default.ts
+++ b/apps/docs/content/components/button/default.ts
@@ -5,9 +5,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/disabled.ts b/apps/docs/content/components/button/disabled.ts
index bcd5683614..5cb2a6c7ae 100644
--- a/apps/docs/content/components/button/disabled.ts
+++ b/apps/docs/content/components/button/disabled.ts
@@ -5,9 +5,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/flat.ts b/apps/docs/content/components/button/flat.ts
index 439b7ccd43..27b88a320b 100644
--- a/apps/docs/content/components/button/flat.ts
+++ b/apps/docs/content/components/button/flat.ts
@@ -33,9 +33,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/ghost.ts b/apps/docs/content/components/button/ghost.ts
index a24c308e95..58d82572b4 100644
--- a/apps/docs/content/components/button/ghost.ts
+++ b/apps/docs/content/components/button/ghost.ts
@@ -38,9 +38,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/icon.ts b/apps/docs/content/components/button/icon.ts
index 17c10b11fe..dfc371635b 100644
--- a/apps/docs/content/components/button/icon.ts
+++ b/apps/docs/content/components/button/icon.ts
@@ -212,14 +212,14 @@ export default function App() {
 }`;
 
 const react = {
-  '/HeartIcon.js': HeartIcon,
-  '/CameraIcon.js': CameraIcon,
-  '/LockIcon.js': LockIcon,
-  '/NotificationIcon.js': NotificationIcon,
-  '/UserIcon.js': UserIcon,
-  '/App.js': AppJs
+  "/HeartIcon.js": HeartIcon,
+  "/CameraIcon.js": CameraIcon,
+  "/LockIcon.js": LockIcon,
+  "/NotificationIcon.js": NotificationIcon,
+  "/UserIcon.js": UserIcon,
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/light.ts b/apps/docs/content/components/button/light.ts
index f0a7f3db25..c4302654ac 100644
--- a/apps/docs/content/components/button/light.ts
+++ b/apps/docs/content/components/button/light.ts
@@ -33,9 +33,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/loading.ts b/apps/docs/content/components/button/loading.ts
index fd9a174ce1..8beca9aef3 100644
--- a/apps/docs/content/components/button/loading.ts
+++ b/apps/docs/content/components/button/loading.ts
@@ -27,9 +27,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/rounded.ts b/apps/docs/content/components/button/rounded.ts
index 5b1e8cfdff..3c878ef90e 100644
--- a/apps/docs/content/components/button/rounded.ts
+++ b/apps/docs/content/components/button/rounded.ts
@@ -38,9 +38,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/shadow.ts b/apps/docs/content/components/button/shadow.ts
index 46af59e0b2..a5a65318be 100644
--- a/apps/docs/content/components/button/shadow.ts
+++ b/apps/docs/content/components/button/shadow.ts
@@ -38,9 +38,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/button/sizes.ts b/apps/docs/content/components/button/sizes.ts
index 083c264800..a2656837bd 100644
--- a/apps/docs/content/components/button/sizes.ts
+++ b/apps/docs/content/components/button/sizes.ts
@@ -19,9 +19,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/card/action.ts b/apps/docs/content/components/card/action.ts
index e87db3db84..0661c90e14 100644
--- a/apps/docs/content/components/card/action.ts
+++ b/apps/docs/content/components/card/action.ts
@@ -74,9 +74,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/card/cover.ts b/apps/docs/content/components/card/cover.ts
index 8903abfb3f..8b11e2828e 100644
--- a/apps/docs/content/components/card/cover.ts
+++ b/apps/docs/content/components/card/cover.ts
@@ -240,14 +240,14 @@ export default function App() {
 }`;
 
 const react = {
-  '/Card1.js': Card1,
-  '/Card2.js': Card2,
-  '/Card3.js': Card3,
-  '/Card4.js': Card4,
-  '/Card5.js': Card5,
-  '/App.js': App
+  "/Card1.js": Card1,
+  "/Card2.js": Card2,
+  "/Card3.js": Card3,
+  "/Card4.js": Card4,
+  "/Card5.js": Card5,
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/card/default.ts b/apps/docs/content/components/card/default.ts
index 9e9aca5172..4d48f4a13a 100644
--- a/apps/docs/content/components/card/default.ts
+++ b/apps/docs/content/components/card/default.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/card/divider.ts b/apps/docs/content/components/card/divider.ts
index b7bef6af12..be6582920a 100644
--- a/apps/docs/content/components/card/divider.ts
+++ b/apps/docs/content/components/card/divider.ts
@@ -56,9 +56,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/card/footer.ts b/apps/docs/content/components/card/footer.ts
index 89ea171c57..a2f497fab9 100644
--- a/apps/docs/content/components/card/footer.ts
+++ b/apps/docs/content/components/card/footer.ts
@@ -41,9 +41,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/card/hoverable.ts b/apps/docs/content/components/card/hoverable.ts
index 209b1196c7..7ed8ab7cc1 100644
--- a/apps/docs/content/components/card/hoverable.ts
+++ b/apps/docs/content/components/card/hoverable.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/card/index.ts b/apps/docs/content/components/card/index.ts
index 434d216514..f4f0ba7360 100644
--- a/apps/docs/content/components/card/index.ts
+++ b/apps/docs/content/components/card/index.ts
@@ -1,11 +1,11 @@
-import defaultCard from './default';
-import variants from './variants';
-import hoverable from './hoverable';
-import pressable from './pressable';
-import divider from './divider';
-import cover from './cover';
-import action from './action';
-import footer from './footer';
+import defaultCard from "./default";
+import variants from "./variants";
+import hoverable from "./hoverable";
+import pressable from "./pressable";
+import divider from "./divider";
+import cover from "./cover";
+import action from "./action";
+import footer from "./footer";
 
 export default {
   defaultCard,
@@ -15,5 +15,5 @@ export default {
   divider,
   cover,
   action,
-  footer
+  footer,
 };
diff --git a/apps/docs/content/components/card/pressable.ts b/apps/docs/content/components/card/pressable.ts
index 25a81b7cbb..edcc1ed5d2 100644
--- a/apps/docs/content/components/card/pressable.ts
+++ b/apps/docs/content/components/card/pressable.ts
@@ -16,9 +16,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/card/variants.ts b/apps/docs/content/components/card/variants.ts
index 8349d8cdc5..100f02e113 100644
--- a/apps/docs/content/components/card/variants.ts
+++ b/apps/docs/content/components/card/variants.ts
@@ -29,9 +29,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox-group/column.ts b/apps/docs/content/components/checkbox-group/column.ts
index e2177f7d14..394ab7be7f 100644
--- a/apps/docs/content/components/checkbox-group/column.ts
+++ b/apps/docs/content/components/checkbox-group/column.ts
@@ -16,9 +16,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts b/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts
index 4fbd60cffa..3a7b19fd3f 100644
--- a/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts
+++ b/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts
@@ -33,9 +33,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox-group/events.ts b/apps/docs/content/components/checkbox-group/events.ts
index b92a919cdb..a3eff6bc9c 100644
--- a/apps/docs/content/components/checkbox-group/events.ts
+++ b/apps/docs/content/components/checkbox-group/events.ts
@@ -22,9 +22,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox-group/index.ts b/apps/docs/content/components/checkbox-group/index.ts
index e4b283bbe1..1a0d367a10 100644
--- a/apps/docs/content/components/checkbox-group/index.ts
+++ b/apps/docs/content/components/checkbox-group/index.ts
@@ -1,11 +1,11 @@
-import column from './column';
-import row from './row';
-import controlledVsUncontrolled from './controlled-vs-uncontrolled';
-import events from './events';
+import column from "./column";
+import row from "./row";
+import controlledVsUncontrolled from "./controlled-vs-uncontrolled";
+import events from "./events";
 
 export default {
   column,
   row,
   events,
-  controlledVsUncontrolled
+  controlledVsUncontrolled,
 };
diff --git a/apps/docs/content/components/checkbox-group/row.ts b/apps/docs/content/components/checkbox-group/row.ts
index df749be58e..98bdd617bb 100644
--- a/apps/docs/content/components/checkbox-group/row.ts
+++ b/apps/docs/content/components/checkbox-group/row.ts
@@ -17,9 +17,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox/color.ts b/apps/docs/content/components/checkbox/color.ts
index 1d3ee0a59e..078abdbb7b 100644
--- a/apps/docs/content/components/checkbox/color.ts
+++ b/apps/docs/content/components/checkbox/color.ts
@@ -31,9 +31,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts b/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts
index 28c734c99d..c186a0b7c1 100644
--- a/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts
+++ b/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts
@@ -16,9 +16,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox/default.ts b/apps/docs/content/components/checkbox/default.ts
index 918f86904e..337a479f75 100644
--- a/apps/docs/content/components/checkbox/default.ts
+++ b/apps/docs/content/components/checkbox/default.ts
@@ -5,9 +5,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox/disabled.ts b/apps/docs/content/components/checkbox/disabled.ts
index 50e821e3e7..c29f338ad7 100644
--- a/apps/docs/content/components/checkbox/disabled.ts
+++ b/apps/docs/content/components/checkbox/disabled.ts
@@ -9,9 +9,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox/index.ts b/apps/docs/content/components/checkbox/index.ts
index 4ee58630a8..22029ecb5a 100644
--- a/apps/docs/content/components/checkbox/index.ts
+++ b/apps/docs/content/components/checkbox/index.ts
@@ -1,13 +1,13 @@
-import default_checkbox from './default';
-import disabled from './disabled';
-import size from './size';
-import color from './color';
-import labelColor from './label-color';
-import rounded from './rounded';
-import interminate from './interminate';
-import noAnimation from './no-animated';
-import lineThrough from './line-through';
-import controlledVsUncontrolled from './controlled-vs-uncontrolled';
+import default_checkbox from "./default";
+import disabled from "./disabled";
+import size from "./size";
+import color from "./color";
+import labelColor from "./label-color";
+import rounded from "./rounded";
+import interminate from "./interminate";
+import noAnimation from "./no-animated";
+import lineThrough from "./line-through";
+import controlledVsUncontrolled from "./controlled-vs-uncontrolled";
 
 export default {
   default_checkbox,
@@ -19,5 +19,5 @@ export default {
   interminate,
   noAnimation,
   lineThrough,
-  controlledVsUncontrolled
+  controlledVsUncontrolled,
 };
diff --git a/apps/docs/content/components/checkbox/interminate.ts b/apps/docs/content/components/checkbox/interminate.ts
index bedbd5bf39..6df12e7067 100644
--- a/apps/docs/content/components/checkbox/interminate.ts
+++ b/apps/docs/content/components/checkbox/interminate.ts
@@ -9,9 +9,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox/label-color.ts b/apps/docs/content/components/checkbox/label-color.ts
index 4547ecb071..73fbe15a97 100644
--- a/apps/docs/content/components/checkbox/label-color.ts
+++ b/apps/docs/content/components/checkbox/label-color.ts
@@ -27,9 +27,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox/line-through.ts b/apps/docs/content/components/checkbox/line-through.ts
index 41f191e766..f43195f46f 100644
--- a/apps/docs/content/components/checkbox/line-through.ts
+++ b/apps/docs/content/components/checkbox/line-through.ts
@@ -9,9 +9,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox/no-animated.ts b/apps/docs/content/components/checkbox/no-animated.ts
index 08d99ee4b2..0f14bce90f 100644
--- a/apps/docs/content/components/checkbox/no-animated.ts
+++ b/apps/docs/content/components/checkbox/no-animated.ts
@@ -9,9 +9,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox/rounded.ts b/apps/docs/content/components/checkbox/rounded.ts
index 566eb3961b..b62352f2d9 100644
--- a/apps/docs/content/components/checkbox/rounded.ts
+++ b/apps/docs/content/components/checkbox/rounded.ts
@@ -9,9 +9,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/checkbox/size.ts b/apps/docs/content/components/checkbox/size.ts
index d26d33fde0..6a6bad6832 100644
--- a/apps/docs/content/components/checkbox/size.ts
+++ b/apps/docs/content/components/checkbox/size.ts
@@ -27,9 +27,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/bordered.ts b/apps/docs/content/components/collapse/bordered.ts
index e7cb87aadf..cf14e6ae42 100644
--- a/apps/docs/content/components/collapse/bordered.ts
+++ b/apps/docs/content/components/collapse/bordered.ts
@@ -50,9 +50,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/content-left.ts b/apps/docs/content/components/collapse/content-left.ts
index 68044a408b..9aadc3db17 100644
--- a/apps/docs/content/components/collapse/content-left.ts
+++ b/apps/docs/content/components/collapse/content-left.ts
@@ -76,9 +76,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/custom-arrow.ts b/apps/docs/content/components/collapse/custom-arrow.ts
index f7ff62c688..d872f8abd5 100644
--- a/apps/docs/content/components/collapse/custom-arrow.ts
+++ b/apps/docs/content/components/collapse/custom-arrow.ts
@@ -174,12 +174,12 @@ export default function App() {
 }`;
 
 const react = {
-  '/SunIcon.js': SunIcon,
-  '/MoonIcon.js': MoonIcon,
-  '/AnchorIcon.js': AnchorIcon,
-  '/App.js': AppJs
+  "/SunIcon.js": SunIcon,
+  "/MoonIcon.js": MoonIcon,
+  "/AnchorIcon.js": AnchorIcon,
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/default.ts b/apps/docs/content/components/collapse/default.ts
index 368597ccf9..9d168dee84 100644
--- a/apps/docs/content/components/collapse/default.ts
+++ b/apps/docs/content/components/collapse/default.ts
@@ -32,9 +32,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/disabled.ts b/apps/docs/content/components/collapse/disabled.ts
index 362a78340e..41281cee1a 100644
--- a/apps/docs/content/components/collapse/disabled.ts
+++ b/apps/docs/content/components/collapse/disabled.ts
@@ -36,9 +36,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/index.ts b/apps/docs/content/components/collapse/index.ts
index af914d4f99..94221b535e 100644
--- a/apps/docs/content/components/collapse/index.ts
+++ b/apps/docs/content/components/collapse/index.ts
@@ -1,15 +1,15 @@
-import defaultCollapse from './default';
-import noAccordion from './no-accordion';
-import initialExpanded from './initial-expanded';
-import withSubtitle from './with-subtitle';
-import shadow from './shadow';
-import bordered from './bordered';
-import splitted from './splitted';
-import customArrow from './custom-arrow';
-import contentLeft from './content-left';
-import noDivider from './no-divider';
-import disabled from './disabled';
-import noAnimated from './no-animated';
+import defaultCollapse from "./default";
+import noAccordion from "./no-accordion";
+import initialExpanded from "./initial-expanded";
+import withSubtitle from "./with-subtitle";
+import shadow from "./shadow";
+import bordered from "./bordered";
+import splitted from "./splitted";
+import customArrow from "./custom-arrow";
+import contentLeft from "./content-left";
+import noDivider from "./no-divider";
+import disabled from "./disabled";
+import noAnimated from "./no-animated";
 
 export default {
   defaultCollapse,
@@ -23,5 +23,5 @@ export default {
   contentLeft,
   noDivider,
   disabled,
-  noAnimated
+  noAnimated,
 };
diff --git a/apps/docs/content/components/collapse/initial-expanded.ts b/apps/docs/content/components/collapse/initial-expanded.ts
index 251391b7c3..782901ec46 100644
--- a/apps/docs/content/components/collapse/initial-expanded.ts
+++ b/apps/docs/content/components/collapse/initial-expanded.ts
@@ -32,9 +32,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/no-accordion.ts b/apps/docs/content/components/collapse/no-accordion.ts
index 49f66fbb00..36141d0869 100644
--- a/apps/docs/content/components/collapse/no-accordion.ts
+++ b/apps/docs/content/components/collapse/no-accordion.ts
@@ -32,9 +32,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/no-animated.ts b/apps/docs/content/components/collapse/no-animated.ts
index d44748424e..ab01818001 100644
--- a/apps/docs/content/components/collapse/no-animated.ts
+++ b/apps/docs/content/components/collapse/no-animated.ts
@@ -36,9 +36,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/no-divider.ts b/apps/docs/content/components/collapse/no-divider.ts
index d8c1500ac9..2d5b3ed26d 100644
--- a/apps/docs/content/components/collapse/no-divider.ts
+++ b/apps/docs/content/components/collapse/no-divider.ts
@@ -36,9 +36,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/shadow.ts b/apps/docs/content/components/collapse/shadow.ts
index 036e631614..c1697c7f86 100644
--- a/apps/docs/content/components/collapse/shadow.ts
+++ b/apps/docs/content/components/collapse/shadow.ts
@@ -50,9 +50,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/splitted.ts b/apps/docs/content/components/collapse/splitted.ts
index 55b217d1f8..85ff045fa6 100644
--- a/apps/docs/content/components/collapse/splitted.ts
+++ b/apps/docs/content/components/collapse/splitted.ts
@@ -36,9 +36,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/collapse/with-subtitle.ts b/apps/docs/content/components/collapse/with-subtitle.ts
index 187e4ee481..89018fe97a 100644
--- a/apps/docs/content/components/collapse/with-subtitle.ts
+++ b/apps/docs/content/components/collapse/with-subtitle.ts
@@ -31,9 +31,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/container/autoLayout.ts b/apps/docs/content/components/container/autoLayout.ts
index 42700fde6a..ead0d03fa0 100644
--- a/apps/docs/content/components/container/autoLayout.ts
+++ b/apps/docs/content/components/container/autoLayout.ts
@@ -57,9 +57,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/container/breakpoint.ts b/apps/docs/content/components/container/breakpoint.ts
index 28228d8611..4b87f23948 100644
--- a/apps/docs/content/components/container/breakpoint.ts
+++ b/apps/docs/content/components/container/breakpoint.ts
@@ -19,9 +19,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/container/default.ts b/apps/docs/content/components/container/default.ts
index 419b5b6825..d59e0cf31d 100644
--- a/apps/docs/content/components/container/default.ts
+++ b/apps/docs/content/components/container/default.ts
@@ -19,9 +19,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/container/fluid.ts b/apps/docs/content/components/container/fluid.ts
index 9928027cdf..5038f27092 100644
--- a/apps/docs/content/components/container/fluid.ts
+++ b/apps/docs/content/components/container/fluid.ts
@@ -19,9 +19,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/container/index.ts b/apps/docs/content/components/container/index.ts
index b5e9ac0d25..be51e2f849 100644
--- a/apps/docs/content/components/container/index.ts
+++ b/apps/docs/content/components/container/index.ts
@@ -1,11 +1,11 @@
-import default_container from './default';
-import fluid from './fluid';
-import breakpoint from './breakpoint';
-import autoLayout from './autoLayout';
+import default_container from "./default";
+import fluid from "./fluid";
+import breakpoint from "./breakpoint";
+import autoLayout from "./autoLayout";
 
 export default {
   default_container,
   fluid,
   breakpoint,
-  autoLayout
+  autoLayout,
 };
diff --git a/apps/docs/content/components/dropdown/command.ts b/apps/docs/content/components/dropdown/command.ts
index dd567cb22c..e85b2736e2 100644
--- a/apps/docs/content/components/dropdown/command.ts
+++ b/apps/docs/content/components/dropdown/command.ts
@@ -25,9 +25,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/custom-trigger.ts b/apps/docs/content/components/dropdown/custom-trigger.ts
index 5defdf517a..3d7bc6f0c4 100644
--- a/apps/docs/content/components/dropdown/custom-trigger.ts
+++ b/apps/docs/content/components/dropdown/custom-trigger.ts
@@ -86,9 +86,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/description.ts b/apps/docs/content/components/dropdown/description.ts
index da91b5fb56..f36b53eeb8 100644
--- a/apps/docs/content/components/dropdown/description.ts
+++ b/apps/docs/content/components/dropdown/description.ts
@@ -162,13 +162,13 @@ export default function App() {
 }`;
 
 const react = {
-  '/AddNoteIcon.js': AddNoteIcon,
-  '/CopyDocumentIcon.js': CopyDocumentIcon,
-  '/EditDocumentIcon.js': EditDocumentIcon,
-  '/DeleteDocumentIcon.js': DeleteDocumentIcon,
-  '/App.js': App
+  "/AddNoteIcon.js": AddNoteIcon,
+  "/CopyDocumentIcon.js": CopyDocumentIcon,
+  "/EditDocumentIcon.js": EditDocumentIcon,
+  "/DeleteDocumentIcon.js": DeleteDocumentIcon,
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/disable-animation.ts b/apps/docs/content/components/dropdown/disable-animation.ts
index c2b77b9276..61d853f026 100644
--- a/apps/docs/content/components/dropdown/disable-animation.ts
+++ b/apps/docs/content/components/dropdown/disable-animation.ts
@@ -177,13 +177,13 @@ export default function App() {
 }`;
 
 const react = {
-  '/AddNoteIcon.js': AddNoteIcon,
-  '/CopyDocumentIcon.js': CopyDocumentIcon,
-  '/EditDocumentIcon.js': EditDocumentIcon,
-  '/DeleteDocumentIcon.js': DeleteDocumentIcon,
-  '/App.js': App
+  "/AddNoteIcon.js": AddNoteIcon,
+  "/CopyDocumentIcon.js": CopyDocumentIcon,
+  "/EditDocumentIcon.js": EditDocumentIcon,
+  "/DeleteDocumentIcon.js": DeleteDocumentIcon,
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/disabled-keys.ts b/apps/docs/content/components/dropdown/disabled-keys.ts
index 915b20c87c..9a37b34771 100644
--- a/apps/docs/content/components/dropdown/disabled-keys.ts
+++ b/apps/docs/content/components/dropdown/disabled-keys.ts
@@ -20,9 +20,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/dynamic.ts b/apps/docs/content/components/dropdown/dynamic.ts
index d3dfe6bcd6..955c2d10d7 100644
--- a/apps/docs/content/components/dropdown/dynamic.ts
+++ b/apps/docs/content/components/dropdown/dynamic.ts
@@ -26,9 +26,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/icon.ts b/apps/docs/content/components/dropdown/icon.ts
index a49e69e06d..8848dd3aa6 100644
--- a/apps/docs/content/components/dropdown/icon.ts
+++ b/apps/docs/content/components/dropdown/icon.ts
@@ -158,13 +158,13 @@ export default function App() {
 }`;
 
 const react = {
-  '/AddNoteIcon.js': AddNoteIcon,
-  '/CopyDocumentIcon.js': CopyDocumentIcon,
-  '/EditDocumentIcon.js': EditDocumentIcon,
-  '/DeleteDocumentIcon.js': DeleteDocumentIcon,
-  '/App.js': App
+  "/AddNoteIcon.js": AddNoteIcon,
+  "/CopyDocumentIcon.js": CopyDocumentIcon,
+  "/EditDocumentIcon.js": EditDocumentIcon,
+  "/DeleteDocumentIcon.js": DeleteDocumentIcon,
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/index.ts b/apps/docs/content/components/dropdown/index.ts
index 01c5d271df..1d49384ff0 100644
--- a/apps/docs/content/components/dropdown/index.ts
+++ b/apps/docs/content/components/dropdown/index.ts
@@ -1,16 +1,16 @@
-import staticDropdown from './static';
-import dynamicDropdown from './dynamic';
-import withDivider from './with-divider';
-import disabledKeys from './disabled-keys';
-import variants from './variants';
-import singleSelection from './single-selection';
-import multipleSelection from './multiple-selection';
-import command from './command';
-import icon from './icon';
-import description from './description';
-import sections from './sections';
-import customTrigger from './custom-trigger';
-import disableAnimation from './disable-animation';
+import staticDropdown from "./static";
+import dynamicDropdown from "./dynamic";
+import withDivider from "./with-divider";
+import disabledKeys from "./disabled-keys";
+import variants from "./variants";
+import singleSelection from "./single-selection";
+import multipleSelection from "./multiple-selection";
+import command from "./command";
+import icon from "./icon";
+import description from "./description";
+import sections from "./sections";
+import customTrigger from "./custom-trigger";
+import disableAnimation from "./disable-animation";
 
 export default {
   staticDropdown,
@@ -25,5 +25,5 @@ export default {
   description,
   sections,
   customTrigger,
-  disableAnimation
+  disableAnimation,
 };
diff --git a/apps/docs/content/components/dropdown/multiple-selection.ts b/apps/docs/content/components/dropdown/multiple-selection.ts
index acc036b9a7..d48760e463 100644
--- a/apps/docs/content/components/dropdown/multiple-selection.ts
+++ b/apps/docs/content/components/dropdown/multiple-selection.ts
@@ -33,9 +33,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/sections.ts b/apps/docs/content/components/dropdown/sections.ts
index 2c556a6ddb..f80628a63a 100644
--- a/apps/docs/content/components/dropdown/sections.ts
+++ b/apps/docs/content/components/dropdown/sections.ts
@@ -177,13 +177,13 @@ export default function App() {
 }`;
 
 const react = {
-  '/AddNoteIcon.js': AddNoteIcon,
-  '/CopyDocumentIcon.js': CopyDocumentIcon,
-  '/EditDocumentIcon.js': EditDocumentIcon,
-  '/DeleteDocumentIcon.js': DeleteDocumentIcon,
-  '/App.js': App
+  "/AddNoteIcon.js": AddNoteIcon,
+  "/CopyDocumentIcon.js": CopyDocumentIcon,
+  "/EditDocumentIcon.js": EditDocumentIcon,
+  "/DeleteDocumentIcon.js": DeleteDocumentIcon,
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/single-selection.ts b/apps/docs/content/components/dropdown/single-selection.ts
index 2689def82b..51c86ba07d 100644
--- a/apps/docs/content/components/dropdown/single-selection.ts
+++ b/apps/docs/content/components/dropdown/single-selection.ts
@@ -33,9 +33,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/static.ts b/apps/docs/content/components/dropdown/static.ts
index 18b50933d0..fcd2a2a76b 100644
--- a/apps/docs/content/components/dropdown/static.ts
+++ b/apps/docs/content/components/dropdown/static.ts
@@ -17,9 +17,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/variants.ts b/apps/docs/content/components/dropdown/variants.ts
index 036ec73eed..4c531dc794 100644
--- a/apps/docs/content/components/dropdown/variants.ts
+++ b/apps/docs/content/components/dropdown/variants.ts
@@ -110,9 +110,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/dropdown/with-divider.ts b/apps/docs/content/components/dropdown/with-divider.ts
index db12fca710..a9b588348e 100644
--- a/apps/docs/content/components/dropdown/with-divider.ts
+++ b/apps/docs/content/components/dropdown/with-divider.ts
@@ -17,9 +17,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/grid/autoWidth.ts b/apps/docs/content/components/grid/autoWidth.ts
index 761efc6ed4..d97ede3fe9 100644
--- a/apps/docs/content/components/grid/autoWidth.ts
+++ b/apps/docs/content/components/grid/autoWidth.ts
@@ -40,9 +40,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/grid/default.ts b/apps/docs/content/components/grid/default.ts
index 756ed78a68..f139b1fc64 100644
--- a/apps/docs/content/components/grid/default.ts
+++ b/apps/docs/content/components/grid/default.ts
@@ -27,9 +27,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/grid/fluid.ts b/apps/docs/content/components/grid/fluid.ts
index c25f642151..f53dd00496 100644
--- a/apps/docs/content/components/grid/fluid.ts
+++ b/apps/docs/content/components/grid/fluid.ts
@@ -55,9 +55,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/grid/hideElement.ts b/apps/docs/content/components/grid/hideElement.ts
index 7b386a1236..758f321bbd 100644
--- a/apps/docs/content/components/grid/hideElement.ts
+++ b/apps/docs/content/components/grid/hideElement.ts
@@ -61,10 +61,10 @@ export default function App() {
 }`;
 
 const react = {
-  '/useMediaQuery.js': useMediaQuery,
-  '/App.js': AppJs
+  "/useMediaQuery.js": useMediaQuery,
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/grid/index.ts b/apps/docs/content/components/grid/index.ts
index a1a9a6d35c..0a4a0ba0be 100644
--- a/apps/docs/content/components/grid/index.ts
+++ b/apps/docs/content/components/grid/index.ts
@@ -1,13 +1,13 @@
-import default_grid from './default';
-import autoWidth from './autoWidth';
-import fluid from './fluid';
-import hideElement from './hideElement';
-import responsive from './responsive';
+import default_grid from "./default";
+import autoWidth from "./autoWidth";
+import fluid from "./fluid";
+import hideElement from "./hideElement";
+import responsive from "./responsive";
 
 export default {
   default_grid,
   autoWidth,
   fluid,
   hideElement,
-  responsive
+  responsive,
 };
diff --git a/apps/docs/content/components/grid/responsive.ts b/apps/docs/content/components/grid/responsive.ts
index 1d3dc3fd3d..bcf204af63 100644
--- a/apps/docs/content/components/grid/responsive.ts
+++ b/apps/docs/content/components/grid/responsive.ts
@@ -63,10 +63,10 @@ export default function App() {
 }`;
 
 const react = {
-  '/useMediaQuery.js': useMediaQuery,
-  '/App.js': AppJs
+  "/useMediaQuery.js": useMediaQuery,
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/image/default.ts b/apps/docs/content/components/image/default.ts
index 662ca32e4d..2e64d823de 100644
--- a/apps/docs/content/components/image/default.ts
+++ b/apps/docs/content/components/image/default.ts
@@ -13,9 +13,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/image/objectFit.ts b/apps/docs/content/components/image/objectFit.ts
index ec5ed7dfc8..95cf2c0c9a 100644
--- a/apps/docs/content/components/image/objectFit.ts
+++ b/apps/docs/content/components/image/objectFit.ts
@@ -35,9 +35,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/image/showSkeleton.ts b/apps/docs/content/components/image/showSkeleton.ts
index df203c4919..35fd435995 100644
--- a/apps/docs/content/components/image/showSkeleton.ts
+++ b/apps/docs/content/components/image/showSkeleton.ts
@@ -14,9 +14,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/image/size.ts b/apps/docs/content/components/image/size.ts
index f0581a2cb9..698def892e 100644
--- a/apps/docs/content/components/image/size.ts
+++ b/apps/docs/content/components/image/size.ts
@@ -40,9 +40,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/index.ts b/apps/docs/content/components/index.ts
index 6984008889..9795b06b7e 100644
--- a/apps/docs/content/components/index.ts
+++ b/apps/docs/content/components/index.ts
@@ -1,29 +1,29 @@
-import tableContent from './table';
-import UserContent from './user';
-import imageContent from './image';
-import avatarContent from './avatar';
-import buttonContent from './button';
-import buttonGrpContent from './button-group';
-import cardContent from './card';
-import paginationContent from './pagination';
-import collapseContent from './collapse';
-import inputContent from './input';
-import textareaContent from './textarea';
-import checkboxContent from './checkbox';
-import checkboxGroupContent from './checkbox-group';
-import radioContent from './radio';
-import progressContent from './progress';
-import tooltipContent from './tooltip';
-import modalContent from './modal';
-import loadingContent from './loading';
-import switchContent from './switch';
-import textContent from './text';
-import linkContent from './link';
-import containerContent from './container';
-import gridContent from './grid';
-import spacerContent from './spacer';
-import popoverContent from './popover';
-import dropdownContent from './dropdown';
+import tableContent from "./table";
+import UserContent from "./user";
+import imageContent from "./image";
+import avatarContent from "./avatar";
+import buttonContent from "./button";
+import buttonGrpContent from "./button-group";
+import cardContent from "./card";
+import paginationContent from "./pagination";
+import collapseContent from "./collapse";
+import inputContent from "./input";
+import textareaContent from "./textarea";
+import checkboxContent from "./checkbox";
+import checkboxGroupContent from "./checkbox-group";
+import radioContent from "./radio";
+import progressContent from "./progress";
+import tooltipContent from "./tooltip";
+import modalContent from "./modal";
+import loadingContent from "./loading";
+import switchContent from "./switch";
+import textContent from "./text";
+import linkContent from "./link";
+import containerContent from "./container";
+import gridContent from "./grid";
+import spacerContent from "./spacer";
+import popoverContent from "./popover";
+import dropdownContent from "./dropdown";
 
 export default {
   tableContent,
@@ -51,5 +51,5 @@ export default {
   gridContent,
   spacerContent,
   popoverContent,
-  dropdownContent
+  dropdownContent,
 };
diff --git a/apps/docs/content/components/input/LRLabels.ts b/apps/docs/content/components/input/LRLabels.ts
index 2708cba5e2..46924ec371 100644
--- a/apps/docs/content/components/input/LRLabels.ts
+++ b/apps/docs/content/components/input/LRLabels.ts
@@ -49,10 +49,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/input/bordered.ts b/apps/docs/content/components/input/bordered.ts
index 44a49a760d..47bc4957cf 100644
--- a/apps/docs/content/components/input/bordered.ts
+++ b/apps/docs/content/components/input/bordered.ts
@@ -44,10 +44,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/input/clearable.ts b/apps/docs/content/components/input/clearable.ts
index 2d25e934bd..fcb22b9a3b 100644
--- a/apps/docs/content/components/input/clearable.ts
+++ b/apps/docs/content/components/input/clearable.ts
@@ -18,9 +18,9 @@ export default function App() {
 `;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/input/content.ts b/apps/docs/content/components/input/content.ts
index 7fb26e8f17..9e998be2f9 100644
--- a/apps/docs/content/components/input/content.ts
+++ b/apps/docs/content/components/input/content.ts
@@ -169,12 +169,12 @@ export default function App() {
 }`;
 
 const react = {
-  '/SunIcon.js': SunIcon,
-  '/App.js': AppJs,
-  '/SendButton.js': SendButton,
-  '/SendIcon.js': SendIcon
+  "/SunIcon.js": SunIcon,
+  "/App.js": AppJs,
+  "/SendButton.js": SendButton,
+  "/SendIcon.js": SendIcon,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/input/default.ts b/apps/docs/content/components/input/default.ts
index f38e1f7ce2..b9c89297ac 100644
--- a/apps/docs/content/components/input/default.ts
+++ b/apps/docs/content/components/input/default.ts
@@ -5,9 +5,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/input/disabled.ts b/apps/docs/content/components/input/disabled.ts
index 3bd3d7b664..303387e1ce 100644
--- a/apps/docs/content/components/input/disabled.ts
+++ b/apps/docs/content/components/input/disabled.ts
@@ -12,9 +12,9 @@ export default function App() {
 `;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/input/helper.ts b/apps/docs/content/components/input/helper.ts
index 4711cab1d7..daef6c9209 100644
--- a/apps/docs/content/components/input/helper.ts
+++ b/apps/docs/content/components/input/helper.ts
@@ -92,9 +92,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/input/label.ts b/apps/docs/content/components/input/label.ts
index d6881e4e32..6435b83b02 100644
--- a/apps/docs/content/components/input/label.ts
+++ b/apps/docs/content/components/input/label.ts
@@ -6,9 +6,9 @@ export default function App() {
 `;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/input/labelPlaceholder.ts b/apps/docs/content/components/input/labelPlaceholder.ts
index f16888903d..020c61448c 100644
--- a/apps/docs/content/components/input/labelPlaceholder.ts
+++ b/apps/docs/content/components/input/labelPlaceholder.ts
@@ -6,9 +6,9 @@ export default function App() {
 `;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/input/noAnimated.ts b/apps/docs/content/components/input/noAnimated.ts
index 0747a2bbfc..36439fad41 100644
--- a/apps/docs/content/components/input/noAnimated.ts
+++ b/apps/docs/content/components/input/noAnimated.ts
@@ -27,10 +27,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/input/password.ts b/apps/docs/content/components/input/password.ts
index c82efcb79b..467246424a 100644
--- a/apps/docs/content/components/input/password.ts
+++ b/apps/docs/content/components/input/password.ts
@@ -115,11 +115,11 @@ export default function App() {
 }`;
 
 const react = {
-  '/UnLockIcon.js': UnLockIcon,
-  '/LockIcon.js': LockIcon,
-  '/App.js': AppJs
+  "/UnLockIcon.js": UnLockIcon,
+  "/LockIcon.js": LockIcon,
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/input/rounded.ts b/apps/docs/content/components/input/rounded.ts
index deba980d9a..568e9bd556 100644
--- a/apps/docs/content/components/input/rounded.ts
+++ b/apps/docs/content/components/input/rounded.ts
@@ -62,10 +62,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/input/shadow.ts b/apps/docs/content/components/input/shadow.ts
index 5b4d64c8fa..1004ef0f09 100644
--- a/apps/docs/content/components/input/shadow.ts
+++ b/apps/docs/content/components/input/shadow.ts
@@ -50,10 +50,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/input/size.ts b/apps/docs/content/components/input/size.ts
index 270baf42be..7ca043bae9 100644
--- a/apps/docs/content/components/input/size.ts
+++ b/apps/docs/content/components/input/size.ts
@@ -37,10 +37,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/input/status.ts b/apps/docs/content/components/input/status.ts
index ad8fd7a0b8..4289b02ca3 100644
--- a/apps/docs/content/components/input/status.ts
+++ b/apps/docs/content/components/input/status.ts
@@ -44,10 +44,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/input/types.ts b/apps/docs/content/components/input/types.ts
index 108e1cb179..903c479452 100644
--- a/apps/docs/content/components/input/types.ts
+++ b/apps/docs/content/components/input/types.ts
@@ -52,10 +52,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/input/underlined.ts b/apps/docs/content/components/input/underlined.ts
index 1aaf57cc9a..dbd163e027 100644
--- a/apps/docs/content/components/input/underlined.ts
+++ b/apps/docs/content/components/input/underlined.ts
@@ -50,10 +50,9 @@ export default function App() {
 `;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/link/block.ts b/apps/docs/content/components/link/block.ts
index 000a16dbdf..2cb87be437 100644
--- a/apps/docs/content/components/link/block.ts
+++ b/apps/docs/content/components/link/block.ts
@@ -31,9 +31,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/link/color.ts b/apps/docs/content/components/link/color.ts
index 072712f292..8f8a8a4b61 100644
--- a/apps/docs/content/components/link/color.ts
+++ b/apps/docs/content/components/link/color.ts
@@ -36,9 +36,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/link/default.ts b/apps/docs/content/components/link/default.ts
index c345c317b1..3b347640e7 100644
--- a/apps/docs/content/components/link/default.ts
+++ b/apps/docs/content/components/link/default.ts
@@ -9,9 +9,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/link/icon.ts b/apps/docs/content/components/link/icon.ts
index 98ca328144..2110797947 100644
--- a/apps/docs/content/components/link/icon.ts
+++ b/apps/docs/content/components/link/icon.ts
@@ -15,9 +15,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/link/nextLink.ts b/apps/docs/content/components/link/nextLink.ts
index 7410f16132..a84f8aec41 100644
--- a/apps/docs/content/components/link/nextLink.ts
+++ b/apps/docs/content/components/link/nextLink.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/link/variation.ts b/apps/docs/content/components/link/variation.ts
index bc70ca0059..e23cc60105 100644
--- a/apps/docs/content/components/link/variation.ts
+++ b/apps/docs/content/components/link/variation.ts
@@ -32,9 +32,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/loading/color.ts b/apps/docs/content/components/loading/color.ts
index 576fa58c8b..50e629334e 100644
--- a/apps/docs/content/components/loading/color.ts
+++ b/apps/docs/content/components/loading/color.ts
@@ -23,10 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/loading/default.ts b/apps/docs/content/components/loading/default.ts
index 1fced60941..354e6f3c5c 100644
--- a/apps/docs/content/components/loading/default.ts
+++ b/apps/docs/content/components/loading/default.ts
@@ -5,9 +5,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/loading/index.ts b/apps/docs/content/components/loading/index.ts
index 85216305c6..c43267a9d7 100644
--- a/apps/docs/content/components/loading/index.ts
+++ b/apps/docs/content/components/loading/index.ts
@@ -1,9 +1,9 @@
-import default_loading from './default';
-import text from './text';
-import size from './size';
-import types from './types';
-import color from './color';
-import textColor from './textColor';
+import default_loading from "./default";
+import text from "./text";
+import size from "./size";
+import types from "./types";
+import color from "./color";
+import textColor from "./textColor";
 
 export default {
   default_loading,
@@ -11,6 +11,5 @@ export default {
   size,
   types,
   color,
-  textColor
+  textColor,
 };
-
diff --git a/apps/docs/content/components/loading/size.ts b/apps/docs/content/components/loading/size.ts
index 5dda356484..200fb284c5 100644
--- a/apps/docs/content/components/loading/size.ts
+++ b/apps/docs/content/components/loading/size.ts
@@ -22,10 +22,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/loading/text.ts b/apps/docs/content/components/loading/text.ts
index 2b21f1c34b..a95954764f 100644
--- a/apps/docs/content/components/loading/text.ts
+++ b/apps/docs/content/components/loading/text.ts
@@ -5,10 +5,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/loading/textColor.ts b/apps/docs/content/components/loading/textColor.ts
index 378886b761..884fcaec15 100644
--- a/apps/docs/content/components/loading/textColor.ts
+++ b/apps/docs/content/components/loading/textColor.ts
@@ -33,10 +33,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/loading/types.ts b/apps/docs/content/components/loading/types.ts
index 75052c2dd0..a99e348939 100644
--- a/apps/docs/content/components/loading/types.ts
+++ b/apps/docs/content/components/loading/types.ts
@@ -23,10 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/modal/blurBackground.ts b/apps/docs/content/components/modal/blurBackground.ts
index cb0fd3bc7d..78cb0d234d 100644
--- a/apps/docs/content/components/modal/blurBackground.ts
+++ b/apps/docs/content/components/modal/blurBackground.ts
@@ -108,11 +108,11 @@ export default function App() {
 }`;
 
 const react = {
-  '/Password.js': Password,
-  '/Mail.js': Mail,
-  '/App.js': AppJs
+  "/Password.js": Password,
+  "/Mail.js": Mail,
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/modal/default.ts b/apps/docs/content/components/modal/default.ts
index 3d94e0c7fa..1354623e06 100644
--- a/apps/docs/content/components/modal/default.ts
+++ b/apps/docs/content/components/modal/default.ts
@@ -109,11 +109,11 @@ export default function App() {
 }`;
 
 const react = {
-  '/Password.js': Password,
-  '/Mail.js': Mail,
-  '/App.js': AppJs
+  "/Password.js": Password,
+  "/Mail.js": Mail,
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/modal/fullscreen.ts b/apps/docs/content/components/modal/fullscreen.ts
index 555594fe1b..2bb336e6e2 100644
--- a/apps/docs/content/components/modal/fullscreen.ts
+++ b/apps/docs/content/components/modal/fullscreen.ts
@@ -220,10 +220,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/modal/index.ts b/apps/docs/content/components/modal/index.ts
index ad6cc60cc4..39a2aad412 100644
--- a/apps/docs/content/components/modal/index.ts
+++ b/apps/docs/content/components/modal/index.ts
@@ -1,10 +1,10 @@
-import default_modal from './default';
-import largeContent from './largeContent';
-import fullscreen from './fullscreen';
-import withoutPadding from './withoutPadding';
-import blurBackground from './blurBackground';
-import preventClose from './preventClose';
-import noAnimated from './noAnimated';
+import default_modal from "./default";
+import largeContent from "./largeContent";
+import fullscreen from "./fullscreen";
+import withoutPadding from "./withoutPadding";
+import blurBackground from "./blurBackground";
+import preventClose from "./preventClose";
+import noAnimated from "./noAnimated";
 
 export default {
   default_modal,
@@ -13,7 +13,5 @@ export default {
   withoutPadding,
   blurBackground,
   preventClose,
-  noAnimated
-
+  noAnimated,
 };
-
diff --git a/apps/docs/content/components/modal/largeContent.ts b/apps/docs/content/components/modal/largeContent.ts
index 305f6d81fd..3730ab84a7 100644
--- a/apps/docs/content/components/modal/largeContent.ts
+++ b/apps/docs/content/components/modal/largeContent.ts
@@ -221,10 +221,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/modal/noAnimated.ts b/apps/docs/content/components/modal/noAnimated.ts
index 14fa5bd23e..7fabebe17c 100644
--- a/apps/docs/content/components/modal/noAnimated.ts
+++ b/apps/docs/content/components/modal/noAnimated.ts
@@ -108,11 +108,11 @@ export default function App() {
 }`;
 
 const react = {
-  '/Password.js': Password,
-  '/Mail.js': Mail,
-  '/App.js': AppJs
+  "/Password.js": Password,
+  "/Mail.js": Mail,
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/modal/preventClose.ts b/apps/docs/content/components/modal/preventClose.ts
index b34e14b76b..7e9f9d1eb7 100644
--- a/apps/docs/content/components/modal/preventClose.ts
+++ b/apps/docs/content/components/modal/preventClose.ts
@@ -108,11 +108,11 @@ export default function App() {
 }`;
 
 const react = {
-  '/Password.js': Password,
-  '/Mail.js': Mail,
-  '/App.js': AppJs
+  "/Password.js": Password,
+  "/Mail.js": Mail,
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/modal/withoutPadding.ts b/apps/docs/content/components/modal/withoutPadding.ts
index 5b21211587..f5db14ae6a 100644
--- a/apps/docs/content/components/modal/withoutPadding.ts
+++ b/apps/docs/content/components/modal/withoutPadding.ts
@@ -51,9 +51,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/bordered.ts b/apps/docs/content/components/pagination/bordered.ts
index 1059103d51..aa19a56270 100644
--- a/apps/docs/content/components/pagination/bordered.ts
+++ b/apps/docs/content/components/pagination/bordered.ts
@@ -14,9 +14,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/boundaries.ts b/apps/docs/content/components/pagination/boundaries.ts
index fbd5c1bc94..1f375f98ba 100644
--- a/apps/docs/content/components/pagination/boundaries.ts
+++ b/apps/docs/content/components/pagination/boundaries.ts
@@ -23,9 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/color.ts b/apps/docs/content/components/pagination/color.ts
index d59507a255..637ec50f50 100644
--- a/apps/docs/content/components/pagination/color.ts
+++ b/apps/docs/content/components/pagination/color.ts
@@ -39,9 +39,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/default.ts b/apps/docs/content/components/pagination/default.ts
index e64fe0a885..0d226db016 100644
--- a/apps/docs/content/components/pagination/default.ts
+++ b/apps/docs/content/components/pagination/default.ts
@@ -5,10 +5,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/pagination/dots.ts b/apps/docs/content/components/pagination/dots.ts
index e10bd68ca2..14251f7dcc 100644
--- a/apps/docs/content/components/pagination/dots.ts
+++ b/apps/docs/content/components/pagination/dots.ts
@@ -32,9 +32,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/index.ts b/apps/docs/content/components/pagination/index.ts
index 07ef97912f..2366a03fd2 100644
--- a/apps/docs/content/components/pagination/index.ts
+++ b/apps/docs/content/components/pagination/index.ts
@@ -1,15 +1,15 @@
-import default_pag from './default';
-import color from './color';
-import sizes from './sizes';
-import rounded from './rounded';
-import shadow from './shadow';
-import dots from './dots';
-import loop from './loop';
-import noMargin from './noMargin';
-import noCtrl from './noCtrl';
-import noAnimation from './noAnimation';
-import sibling from './sibling';
-import boundaries from './boundaries';
+import default_pag from "./default";
+import color from "./color";
+import sizes from "./sizes";
+import rounded from "./rounded";
+import shadow from "./shadow";
+import dots from "./dots";
+import loop from "./loop";
+import noMargin from "./noMargin";
+import noCtrl from "./noCtrl";
+import noAnimation from "./noAnimation";
+import sibling from "./sibling";
+import boundaries from "./boundaries";
 
 export default {
   default_pag,
@@ -23,6 +23,5 @@ export default {
   noCtrl,
   noAnimation,
   sibling,
-  boundaries
+  boundaries,
 };
-
diff --git a/apps/docs/content/components/pagination/loop.ts b/apps/docs/content/components/pagination/loop.ts
index 21f64f3528..3478cb3a0c 100644
--- a/apps/docs/content/components/pagination/loop.ts
+++ b/apps/docs/content/components/pagination/loop.ts
@@ -5,9 +5,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/noAnimation.ts b/apps/docs/content/components/pagination/noAnimation.ts
index 9b61972c27..c49f160b5e 100644
--- a/apps/docs/content/components/pagination/noAnimation.ts
+++ b/apps/docs/content/components/pagination/noAnimation.ts
@@ -5,9 +5,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/noCtrl.ts b/apps/docs/content/components/pagination/noCtrl.ts
index 99ee14d6c8..125d2b0258 100644
--- a/apps/docs/content/components/pagination/noCtrl.ts
+++ b/apps/docs/content/components/pagination/noCtrl.ts
@@ -20,9 +20,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/noMargin.ts b/apps/docs/content/components/pagination/noMargin.ts
index 86bc60d21b..10cc80ccb2 100644
--- a/apps/docs/content/components/pagination/noMargin.ts
+++ b/apps/docs/content/components/pagination/noMargin.ts
@@ -5,9 +5,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/rounded.ts b/apps/docs/content/components/pagination/rounded.ts
index 3fce6b9c33..70ff18b3f1 100644
--- a/apps/docs/content/components/pagination/rounded.ts
+++ b/apps/docs/content/components/pagination/rounded.ts
@@ -5,9 +5,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/shadow.ts b/apps/docs/content/components/pagination/shadow.ts
index 81f54fb161..002d6b8a79 100644
--- a/apps/docs/content/components/pagination/shadow.ts
+++ b/apps/docs/content/components/pagination/shadow.ts
@@ -32,9 +32,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/sibling.ts b/apps/docs/content/components/pagination/sibling.ts
index 255030e796..57e44732de 100644
--- a/apps/docs/content/components/pagination/sibling.ts
+++ b/apps/docs/content/components/pagination/sibling.ts
@@ -23,9 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/pagination/sizes.ts b/apps/docs/content/components/pagination/sizes.ts
index 9881f523e8..6c5ff185b5 100644
--- a/apps/docs/content/components/pagination/sizes.ts
+++ b/apps/docs/content/components/pagination/sizes.ts
@@ -32,9 +32,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/popover/bordered.ts b/apps/docs/content/components/popover/bordered.ts
index e5354c0bf6..b46fa1d0ed 100644
--- a/apps/docs/content/components/popover/bordered.ts
+++ b/apps/docs/content/components/popover/bordered.ts
@@ -14,9 +14,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts b/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts
index ac36109d4a..5e7ee38cf0 100644
--- a/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts
+++ b/apps/docs/content/components/popover/controlled-vs-uncontrolled.ts
@@ -31,9 +31,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/popover/custom-content.ts b/apps/docs/content/components/popover/custom-content.ts
index ab8093dadb..6a0c80290d 100644
--- a/apps/docs/content/components/popover/custom-content.ts
+++ b/apps/docs/content/components/popover/custom-content.ts
@@ -159,11 +159,11 @@ export default function App() {
 }`;
 
 const react = {
-  '/UserTwitterCard.js': UserTwitterCard,
-  '/DeleteUser.js': DeleteUser,
-  '/App.js': App
+  "/UserTwitterCard.js": UserTwitterCard,
+  "/DeleteUser.js": DeleteUser,
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/popover/default.ts b/apps/docs/content/components/popover/default.ts
index adc8d10351..f231ab03f8 100644
--- a/apps/docs/content/components/popover/default.ts
+++ b/apps/docs/content/components/popover/default.ts
@@ -14,9 +14,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/popover/disable-animation.ts b/apps/docs/content/components/popover/disable-animation.ts
index b2808f2d46..5f87225a9d 100644
--- a/apps/docs/content/components/popover/disable-animation.ts
+++ b/apps/docs/content/components/popover/disable-animation.ts
@@ -14,9 +14,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/popover/index.ts b/apps/docs/content/components/popover/index.ts
index 8a77f01e48..b50d27892b 100644
--- a/apps/docs/content/components/popover/index.ts
+++ b/apps/docs/content/components/popover/index.ts
@@ -1,9 +1,9 @@
-import defaultPopover from './default';
-import placements from './placements';
-import controlledVsUncontrolled from './controlled-vs-uncontrolled';
-import disableAnimation from './disable-animation';
-import customContent from './custom-content';
-import bordered from './bordered';
+import defaultPopover from "./default";
+import placements from "./placements";
+import controlledVsUncontrolled from "./controlled-vs-uncontrolled";
+import disableAnimation from "./disable-animation";
+import customContent from "./custom-content";
+import bordered from "./bordered";
 
 export default {
   defaultPopover,
@@ -11,5 +11,5 @@ export default {
   controlledVsUncontrolled,
   customContent,
   disableAnimation,
-  bordered
+  bordered,
 };
diff --git a/apps/docs/content/components/popover/placements.ts b/apps/docs/content/components/popover/placements.ts
index c488549558..f80274c308 100644
--- a/apps/docs/content/components/popover/placements.ts
+++ b/apps/docs/content/components/popover/placements.ts
@@ -75,14 +75,14 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': AppJs
+  "/App.js": AppJs,
 };
 
 const reactTs = {
-  '/App.tsx': AppTs
+  "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
-  ...reactTs
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/progress/color.ts b/apps/docs/content/components/progress/color.ts
index 5a1932f454..ca483dfefc 100644
--- a/apps/docs/content/components/progress/color.ts
+++ b/apps/docs/content/components/progress/color.ts
@@ -26,9 +26,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/progress/default.ts b/apps/docs/content/components/progress/default.ts
index b925466c2e..32b741c359 100644
--- a/apps/docs/content/components/progress/default.ts
+++ b/apps/docs/content/components/progress/default.ts
@@ -17,9 +17,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/progress/indeterminated.ts b/apps/docs/content/components/progress/indeterminated.ts
index ade7a7704c..a5ffeeb54c 100644
--- a/apps/docs/content/components/progress/indeterminated.ts
+++ b/apps/docs/content/components/progress/indeterminated.ts
@@ -16,9 +16,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/progress/index.ts b/apps/docs/content/components/progress/index.ts
index 4b4d6d2508..6f527d57da 100644
--- a/apps/docs/content/components/progress/index.ts
+++ b/apps/docs/content/components/progress/index.ts
@@ -1,12 +1,12 @@
-import default_progress from './default';
-import indeterminated_progress from './indeterminated';
-import color from './color';
-import size from './size';
-import status from './status';
-import shadow from './shadow';
-import striped from './striped';
-import squared from './squared';
-import noAnimation from './noAnimation';
+import default_progress from "./default";
+import indeterminated_progress from "./indeterminated";
+import color from "./color";
+import size from "./size";
+import status from "./status";
+import shadow from "./shadow";
+import striped from "./striped";
+import squared from "./squared";
+import noAnimation from "./noAnimation";
 
 export default {
   default_progress,
@@ -17,5 +17,5 @@ export default {
   shadow,
   striped,
   squared,
-  noAnimation
+  noAnimation,
 };
diff --git a/apps/docs/content/components/progress/noAnimation.ts b/apps/docs/content/components/progress/noAnimation.ts
index 32ad31cc11..792330b6a7 100644
--- a/apps/docs/content/components/progress/noAnimation.ts
+++ b/apps/docs/content/components/progress/noAnimation.ts
@@ -17,9 +17,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/progress/shadow.ts b/apps/docs/content/components/progress/shadow.ts
index af2d1b4a37..045bab2f6e 100644
--- a/apps/docs/content/components/progress/shadow.ts
+++ b/apps/docs/content/components/progress/shadow.ts
@@ -23,9 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/progress/size.ts b/apps/docs/content/components/progress/size.ts
index 2190b1f71f..fb86b5c9e0 100644
--- a/apps/docs/content/components/progress/size.ts
+++ b/apps/docs/content/components/progress/size.ts
@@ -23,9 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/progress/squared.ts b/apps/docs/content/components/progress/squared.ts
index 09e9738541..1a746b210c 100644
--- a/apps/docs/content/components/progress/squared.ts
+++ b/apps/docs/content/components/progress/squared.ts
@@ -17,9 +17,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/progress/status.ts b/apps/docs/content/components/progress/status.ts
index 2c1320a18c..7cf5a98f11 100644
--- a/apps/docs/content/components/progress/status.ts
+++ b/apps/docs/content/components/progress/status.ts
@@ -23,9 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/progress/striped.ts b/apps/docs/content/components/progress/striped.ts
index 0c17165f12..2ead88e360 100644
--- a/apps/docs/content/components/progress/striped.ts
+++ b/apps/docs/content/components/progress/striped.ts
@@ -17,9 +17,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/color.ts b/apps/docs/content/components/radio/color.ts
index 55e7f4efe2..b50b7de302 100644
--- a/apps/docs/content/components/radio/color.ts
+++ b/apps/docs/content/components/radio/color.ts
@@ -23,9 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts b/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts
index 9d950850c7..6f8128e741 100644
--- a/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts
+++ b/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts
@@ -32,9 +32,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/default.ts b/apps/docs/content/components/radio/default.ts
index 7ad88ab745..a82b17e481 100644
--- a/apps/docs/content/components/radio/default.ts
+++ b/apps/docs/content/components/radio/default.ts
@@ -12,9 +12,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/description.ts b/apps/docs/content/components/radio/description.ts
index 4b157527fa..077737ccde 100644
--- a/apps/docs/content/components/radio/description.ts
+++ b/apps/docs/content/components/radio/description.ts
@@ -17,9 +17,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/disableAnimation.ts b/apps/docs/content/components/radio/disableAnimation.ts
index d5da9a8bad..b53b8fcc58 100644
--- a/apps/docs/content/components/radio/disableAnimation.ts
+++ b/apps/docs/content/components/radio/disableAnimation.ts
@@ -12,9 +12,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/disabled.ts b/apps/docs/content/components/radio/disabled.ts
index bbe112f2e4..08778deaea 100644
--- a/apps/docs/content/components/radio/disabled.ts
+++ b/apps/docs/content/components/radio/disabled.ts
@@ -16,9 +16,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/events.ts b/apps/docs/content/components/radio/events.ts
index 4a2572b43f..9ee5369fc8 100644
--- a/apps/docs/content/components/radio/events.ts
+++ b/apps/docs/content/components/radio/events.ts
@@ -23,9 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/index.ts b/apps/docs/content/components/radio/index.ts
index 13275ee346..9a0b9a721a 100644
--- a/apps/docs/content/components/radio/index.ts
+++ b/apps/docs/content/components/radio/index.ts
@@ -1,15 +1,15 @@
-import default_radio from './default';
-import disabled from './disabled';
-import size from './size';
-import color from './color';
-import labelColor from './labelColor';
-import squared from './squared';
-import description from './description';
-import row from './row';
-import disableAnimation from './disableAnimation';
-import controlledVsUncontrolled from './controlled-vs-uncontrolled';
-import events from './events';
-import invalid from './invalid';
+import default_radio from "./default";
+import disabled from "./disabled";
+import size from "./size";
+import color from "./color";
+import labelColor from "./labelColor";
+import squared from "./squared";
+import description from "./description";
+import row from "./row";
+import disableAnimation from "./disableAnimation";
+import controlledVsUncontrolled from "./controlled-vs-uncontrolled";
+import events from "./events";
+import invalid from "./invalid";
 
 export default {
   default_radio,
@@ -23,5 +23,5 @@ export default {
   disableAnimation,
   controlledVsUncontrolled,
   invalid,
-  events
+  events,
 };
diff --git a/apps/docs/content/components/radio/invalid.ts b/apps/docs/content/components/radio/invalid.ts
index 18861c7932..5b30c1ba3d 100644
--- a/apps/docs/content/components/radio/invalid.ts
+++ b/apps/docs/content/components/radio/invalid.ts
@@ -20,9 +20,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/labelColor.ts b/apps/docs/content/components/radio/labelColor.ts
index 5dc97ff6e6..712eea892f 100644
--- a/apps/docs/content/components/radio/labelColor.ts
+++ b/apps/docs/content/components/radio/labelColor.ts
@@ -23,9 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/row.ts b/apps/docs/content/components/radio/row.ts
index aed518fc74..b6720c4be4 100644
--- a/apps/docs/content/components/radio/row.ts
+++ b/apps/docs/content/components/radio/row.ts
@@ -17,9 +17,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/size.ts b/apps/docs/content/components/radio/size.ts
index e6605393cc..7f8e859285 100644
--- a/apps/docs/content/components/radio/size.ts
+++ b/apps/docs/content/components/radio/size.ts
@@ -23,9 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/radio/squared.ts b/apps/docs/content/components/radio/squared.ts
index 8b3961fe8e..3dd2000908 100644
--- a/apps/docs/content/components/radio/squared.ts
+++ b/apps/docs/content/components/radio/squared.ts
@@ -20,9 +20,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/spacer/horizontal.ts b/apps/docs/content/components/spacer/horizontal.ts
index df80a0da58..8b638fced7 100644
--- a/apps/docs/content/components/spacer/horizontal.ts
+++ b/apps/docs/content/components/spacer/horizontal.ts
@@ -15,9 +15,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': AppJs
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/spacer/index.ts b/apps/docs/content/components/spacer/index.ts
index 54badd786d..9949fa6c72 100644
--- a/apps/docs/content/components/spacer/index.ts
+++ b/apps/docs/content/components/spacer/index.ts
@@ -1,7 +1,7 @@
-import vertical from './vertical';
-import horizontal from './horizontal'
+import vertical from "./vertical";
+import horizontal from "./horizontal";
 
 export default {
   vertical,
-  horizontal
+  horizontal,
 };
diff --git a/apps/docs/content/components/spacer/vertical.ts b/apps/docs/content/components/spacer/vertical.ts
index 4b8df027c2..a113da7d1a 100644
--- a/apps/docs/content/components/spacer/vertical.ts
+++ b/apps/docs/content/components/spacer/vertical.ts
@@ -26,9 +26,9 @@ export default function App() {
 `;
 
 const react = {
-  '/App.js': AppJs
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/switch/bordered.ts b/apps/docs/content/components/switch/bordered.ts
index 095d7262c0..57b39cb724 100644
--- a/apps/docs/content/components/switch/bordered.ts
+++ b/apps/docs/content/components/switch/bordered.ts
@@ -17,9 +17,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/switch/color.ts b/apps/docs/content/components/switch/color.ts
index d706593fe9..848345bf82 100644
--- a/apps/docs/content/components/switch/color.ts
+++ b/apps/docs/content/components/switch/color.ts
@@ -23,9 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/switch/default.ts b/apps/docs/content/components/switch/default.ts
index aa0798ce8b..0171e1913a 100644
--- a/apps/docs/content/components/switch/default.ts
+++ b/apps/docs/content/components/switch/default.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/switch/disabled.ts b/apps/docs/content/components/switch/disabled.ts
index d61cd2844c..bc0986b1bf 100644
--- a/apps/docs/content/components/switch/disabled.ts
+++ b/apps/docs/content/components/switch/disabled.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/switch/icon.ts b/apps/docs/content/components/switch/icon.ts
index 88881d13d2..190f1b3e73 100644
--- a/apps/docs/content/components/switch/icon.ts
+++ b/apps/docs/content/components/switch/icon.ts
@@ -1,4 +1,3 @@
-
 const SunIcon = `import { React } from '@nextui-org/react';\n
 
 export const SunIcon = ({
@@ -61,7 +60,6 @@ export const SunIcon = ({
   );
 };`;
 
-
 const MoonIcon = `import { React } from '@nextui-org/react';\n
 
 export const MoonIcon = ({
@@ -218,7 +216,7 @@ export const VolumeUpIcon = ({
       ></path>
     </svg>
   );
-};`; 
+};`;
 
 const NotificationIcon = `import { React } from '@nextui-org/react';\n
 
@@ -352,7 +350,6 @@ export const MicrophoneOffIcon = ({
   );
 };`;
 
-
 const AppJs = `import { Grid, Switch } from "@nextui-org/react";
 import { SunIcon } from './SunIcon';
 import { MoonIcon } from './MoonIcon';
@@ -413,18 +410,17 @@ export default function App() {
 }`;
 
 const react = {
-  '/SunIcon.js': SunIcon,
-  '/MoonIcon.js': MoonIcon,
-  '/VideoIcon.js': VideoIcon,
-  '/VolumeUpIcon.js': VolumeUpIcon,
-  '/MicrophoneIcon.js': MicrophoneIcon,
-  '/MicrophoneOffIcon.js': MicrophoneOffIcon,
-  '/NotificationIcon.js': NotificationIcon,
-  '/VideoOffIcon.js': VideoOffIcon,
-  '/App.js': AppJs
+  "/SunIcon.js": SunIcon,
+  "/MoonIcon.js": MoonIcon,
+  "/VideoIcon.js": VideoIcon,
+  "/VolumeUpIcon.js": VolumeUpIcon,
+  "/MicrophoneIcon.js": MicrophoneIcon,
+  "/MicrophoneOffIcon.js": MicrophoneOffIcon,
+  "/NotificationIcon.js": NotificationIcon,
+  "/VideoOffIcon.js": VideoOffIcon,
+  "/App.js": AppJs,
 };
 
-
 export default {
   ...react,
 };
diff --git a/apps/docs/content/components/switch/index.ts b/apps/docs/content/components/switch/index.ts
index 867a14198a..0515bf0dd5 100644
--- a/apps/docs/content/components/switch/index.ts
+++ b/apps/docs/content/components/switch/index.ts
@@ -1,13 +1,13 @@
-import default_switch from './default';
-import initialCheck from './initialCheck';
-import disabled from './disabled';
-import size from './size';
-import color from './color';
-import shadow from './shadow';
-import squared from './squared';
-import bordered from './bordered';
-import noAnimated from './noAnimated';
-import icon from './icon';
+import default_switch from "./default";
+import initialCheck from "./initialCheck";
+import disabled from "./disabled";
+import size from "./size";
+import color from "./color";
+import shadow from "./shadow";
+import squared from "./squared";
+import bordered from "./bordered";
+import noAnimated from "./noAnimated";
+import icon from "./icon";
 
 export default {
   default_switch,
@@ -19,5 +19,5 @@ export default {
   squared,
   bordered,
   noAnimated,
-  icon
+  icon,
 };
diff --git a/apps/docs/content/components/switch/initialCheck.ts b/apps/docs/content/components/switch/initialCheck.ts
index 2e22e73bbf..86b17f989e 100644
--- a/apps/docs/content/components/switch/initialCheck.ts
+++ b/apps/docs/content/components/switch/initialCheck.ts
@@ -6,9 +6,9 @@ export default function App() {
 `;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/switch/noAnimated.ts b/apps/docs/content/components/switch/noAnimated.ts
index 3f89ed611b..7cf89d70ab 100644
--- a/apps/docs/content/components/switch/noAnimated.ts
+++ b/apps/docs/content/components/switch/noAnimated.ts
@@ -11,13 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
-
-
-
diff --git a/apps/docs/content/components/switch/shadow.ts b/apps/docs/content/components/switch/shadow.ts
index 17f3cbb44a..343392ad72 100644
--- a/apps/docs/content/components/switch/shadow.ts
+++ b/apps/docs/content/components/switch/shadow.ts
@@ -23,9 +23,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/switch/size.ts b/apps/docs/content/components/switch/size.ts
index 60045347bf..3b08acd124 100644
--- a/apps/docs/content/components/switch/size.ts
+++ b/apps/docs/content/components/switch/size.ts
@@ -17,9 +17,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/switch/squared.ts b/apps/docs/content/components/switch/squared.ts
index a01283e8ea..3e4e552926 100644
--- a/apps/docs/content/components/switch/squared.ts
+++ b/apps/docs/content/components/switch/squared.ts
@@ -9,9 +9,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/bordered.ts b/apps/docs/content/components/table/bordered.ts
index caeedae8db..d344ec33e2 100644
--- a/apps/docs/content/components/table/bordered.ts
+++ b/apps/docs/content/components/table/bordered.ts
@@ -44,9 +44,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/colors.ts b/apps/docs/content/components/table/colors.ts
index c7fdac1780..7f06bcf752 100644
--- a/apps/docs/content/components/table/colors.ts
+++ b/apps/docs/content/components/table/colors.ts
@@ -94,9 +94,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/compact.ts b/apps/docs/content/components/table/compact.ts
index 3ed97e0eaf..1af3373da6 100644
--- a/apps/docs/content/components/table/compact.ts
+++ b/apps/docs/content/components/table/compact.ts
@@ -43,9 +43,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/custom-cells.ts b/apps/docs/content/components/table/custom-cells.ts
index 435493f9d7..27436cf2f0 100644
--- a/apps/docs/content/components/table/custom-cells.ts
+++ b/apps/docs/content/components/table/custom-cells.ts
@@ -679,24 +679,24 @@ export default function App() {
 }`;
 
 const react = {
-  '/StyledBadge.js': StyledBadge,
-  '/IconButton.js': IconButton,
-  '/EyeIcon.js': EyeIconJs,
-  '/EditIcon.js': EditIconJs,
-  '/DeleteIcon.js': DeleteIconJs,
-  '/App.js': AppJs
+  "/StyledBadge.js": StyledBadge,
+  "/IconButton.js": IconButton,
+  "/EyeIcon.js": EyeIconJs,
+  "/EditIcon.js": EditIconJs,
+  "/DeleteIcon.js": DeleteIconJs,
+  "/App.js": AppJs,
 };
 
 const reactTs = {
-  '/StyledBadge.tsx': StyledBadge,
-  '/IconButton.tsx': IconButton,
-  '/EyeIcon.tsx': EyeIconTs,
-  '/EditIcon.tsx': EditIconTs,
-  '/DeleteIcon.tsx': DeleteIconTs,
-  '/App.tsx': AppTs
+  "/StyledBadge.tsx": StyledBadge,
+  "/IconButton.tsx": IconButton,
+  "/EyeIcon.tsx": EyeIconTs,
+  "/EditIcon.tsx": EditIconTs,
+  "/DeleteIcon.tsx": DeleteIconTs,
+  "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
-  ...reactTs
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/table/disabled-keys.ts b/apps/docs/content/components/table/disabled-keys.ts
index e24f89fd06..8260d51018 100644
--- a/apps/docs/content/components/table/disabled-keys.ts
+++ b/apps/docs/content/components/table/disabled-keys.ts
@@ -43,9 +43,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/disallow-empty-selection.ts b/apps/docs/content/components/table/disallow-empty-selection.ts
index eb7e4eb43a..ca04a8b8bb 100644
--- a/apps/docs/content/components/table/disallow-empty-selection.ts
+++ b/apps/docs/content/components/table/disallow-empty-selection.ts
@@ -45,9 +45,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/dynamic.ts b/apps/docs/content/components/table/dynamic.ts
index e730e57a8d..fe2ca76d1a 100644
--- a/apps/docs/content/components/table/dynamic.ts
+++ b/apps/docs/content/components/table/dynamic.ts
@@ -66,9 +66,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/index.ts b/apps/docs/content/components/table/index.ts
index c3da8fbdbe..3695141da8 100644
--- a/apps/docs/content/components/table/index.ts
+++ b/apps/docs/content/components/table/index.ts
@@ -1,20 +1,20 @@
-import staticTable from './static';
-import dynamicTable from './dynamic';
-import customCellsTable from './custom-cells';
-import singleSelectionTable from './single-selection';
-import multipleSelectionTable from './multiple-selection';
-import colorsTable from './colors';
-import borderedTable from './bordered';
-import linedTable from './lined';
-import stickedTable from './sticked';
-import compactTable from './compact';
-import stripedTable from './striped';
-import paginationTable from './pagination';
-import infinityPaginationTable from './infinity-pagination';
-import sortableTable from './sortable';
-import disabledKeysTable from './disabled-keys';
-import disallowEmptySelectionTable from './disallow-empty-selection';
-import noAnimatedTable from './no-animated';
+import staticTable from "./static";
+import dynamicTable from "./dynamic";
+import customCellsTable from "./custom-cells";
+import singleSelectionTable from "./single-selection";
+import multipleSelectionTable from "./multiple-selection";
+import colorsTable from "./colors";
+import borderedTable from "./bordered";
+import linedTable from "./lined";
+import stickedTable from "./sticked";
+import compactTable from "./compact";
+import stripedTable from "./striped";
+import paginationTable from "./pagination";
+import infinityPaginationTable from "./infinity-pagination";
+import sortableTable from "./sortable";
+import disabledKeysTable from "./disabled-keys";
+import disallowEmptySelectionTable from "./disallow-empty-selection";
+import noAnimatedTable from "./no-animated";
 
 export default {
   staticTable,
@@ -33,5 +33,5 @@ export default {
   sortableTable,
   disabledKeysTable,
   disallowEmptySelectionTable,
-  noAnimatedTable
+  noAnimatedTable,
 };
diff --git a/apps/docs/content/components/table/infinity-pagination.ts b/apps/docs/content/components/table/infinity-pagination.ts
index 7b9dd25849..e42f687745 100644
--- a/apps/docs/content/components/table/infinity-pagination.ts
+++ b/apps/docs/content/components/table/infinity-pagination.ts
@@ -50,9 +50,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/lined.ts b/apps/docs/content/components/table/lined.ts
index 3769d68f93..b2e10313b9 100644
--- a/apps/docs/content/components/table/lined.ts
+++ b/apps/docs/content/components/table/lined.ts
@@ -45,9 +45,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/multiple-selection.ts b/apps/docs/content/components/table/multiple-selection.ts
index f56e125cbe..d592b69745 100644
--- a/apps/docs/content/components/table/multiple-selection.ts
+++ b/apps/docs/content/components/table/multiple-selection.ts
@@ -42,9 +42,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/no-animated.ts b/apps/docs/content/components/table/no-animated.ts
index fdedd31980..c0809a4074 100644
--- a/apps/docs/content/components/table/no-animated.ts
+++ b/apps/docs/content/components/table/no-animated.ts
@@ -44,9 +44,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/pagination.ts b/apps/docs/content/components/table/pagination.ts
index 9e08280570..565702b1db 100644
--- a/apps/docs/content/components/table/pagination.ts
+++ b/apps/docs/content/components/table/pagination.ts
@@ -72,9 +72,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/single-selection.ts b/apps/docs/content/components/table/single-selection.ts
index 6f95ed765e..e56d5fddbd 100644
--- a/apps/docs/content/components/table/single-selection.ts
+++ b/apps/docs/content/components/table/single-selection.ts
@@ -42,9 +42,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/sortable.ts b/apps/docs/content/components/table/sortable.ts
index e41254b0cc..432029041c 100644
--- a/apps/docs/content/components/table/sortable.ts
+++ b/apps/docs/content/components/table/sortable.ts
@@ -58,9 +58,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/static.ts b/apps/docs/content/components/table/static.ts
index 590d912c2e..5924d314c2 100644
--- a/apps/docs/content/components/table/static.ts
+++ b/apps/docs/content/components/table/static.ts
@@ -41,9 +41,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/sticked.ts b/apps/docs/content/components/table/sticked.ts
index 838540d0b4..2cb247008a 100644
--- a/apps/docs/content/components/table/sticked.ts
+++ b/apps/docs/content/components/table/sticked.ts
@@ -43,9 +43,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/table/striped.ts b/apps/docs/content/components/table/striped.ts
index 01f4a10ec8..c715dae38d 100644
--- a/apps/docs/content/components/table/striped.ts
+++ b/apps/docs/content/components/table/striped.ts
@@ -44,9 +44,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/text/blockquote.ts b/apps/docs/content/components/text/blockquote.ts
index ac018bb01f..b6639f131a 100644
--- a/apps/docs/content/components/text/blockquote.ts
+++ b/apps/docs/content/components/text/blockquote.ts
@@ -7,10 +7,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/text/color.ts b/apps/docs/content/components/text/color.ts
index 1658599f54..a6afe191d5 100644
--- a/apps/docs/content/components/text/color.ts
+++ b/apps/docs/content/components/text/color.ts
@@ -26,9 +26,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/text/compose.ts b/apps/docs/content/components/text/compose.ts
index dd9d118eee..b18fad436e 100644
--- a/apps/docs/content/components/text/compose.ts
+++ b/apps/docs/content/components/text/compose.ts
@@ -20,10 +20,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
diff --git a/apps/docs/content/components/text/default.ts b/apps/docs/content/components/text/default.ts
index 3ba61e342a..29e7fa257f 100644
--- a/apps/docs/content/components/text/default.ts
+++ b/apps/docs/content/components/text/default.ts
@@ -15,9 +15,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/text/gradient.ts b/apps/docs/content/components/text/gradient.ts
index b2d7b4b1bf..4d285d24ed 100644
--- a/apps/docs/content/components/text/gradient.ts
+++ b/apps/docs/content/components/text/gradient.ts
@@ -38,9 +38,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/text/index.ts b/apps/docs/content/components/text/index.ts
index 33e4a6b463..0e2de6e71a 100644
--- a/apps/docs/content/components/text/index.ts
+++ b/apps/docs/content/components/text/index.ts
@@ -1,10 +1,10 @@
-import default_text from './default';
-import gradient from './gradient';
-import paragraph from './paragraph';
-import blockquote from './blockquote';
-import color from './color';
-import size from './size';
-import compose from './compose';
+import default_text from "./default";
+import gradient from "./gradient";
+import paragraph from "./paragraph";
+import blockquote from "./blockquote";
+import color from "./color";
+import size from "./size";
+import compose from "./compose";
 
 export default {
   default_text,
@@ -13,5 +13,5 @@ export default {
   blockquote,
   color,
   size,
-  compose
+  compose,
 };
diff --git a/apps/docs/content/components/text/paragraph.ts b/apps/docs/content/components/text/paragraph.ts
index 86cd955e78..5039a61e91 100644
--- a/apps/docs/content/components/text/paragraph.ts
+++ b/apps/docs/content/components/text/paragraph.ts
@@ -12,9 +12,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/text/size.ts b/apps/docs/content/components/text/size.ts
index 17be3aaaf1..4301602fee 100644
--- a/apps/docs/content/components/text/size.ts
+++ b/apps/docs/content/components/text/size.ts
@@ -3,22 +3,19 @@ const App = `import { Text } from "@nextui-org/react";
 export default function App() {
   return (
     <>
-      <Text size={12}>Font Size: 12px;</Text>
-      <Text size={14}>Font Size: 14px;</Text>
-      <Text size="100%">Font Size: 100%;</Text>
-      <Text size="1.25rem">Font Size: 1.25rem;</Text>
-      <Text size="2em">Font Size: 2em;</Text>
+      <Text size="$xs">Font Size: xs</Text>
+      <Text size="$md">Font Size: md (base)</Text>
+      <Text size="$xl">Font Size: xl</Text>
+      <Text size="$2xl">Font Size: 2xl</Text>
+      <Text size="$3xl">Font Size: 3xl</Text>
     </>
   );
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
-
-
-
diff --git a/apps/docs/content/components/text/small.ts b/apps/docs/content/components/text/small.ts
index 71f44e8619..285756d6a6 100644
--- a/apps/docs/content/components/text/small.ts
+++ b/apps/docs/content/components/text/small.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/textarea/autosize.ts b/apps/docs/content/components/textarea/autosize.ts
index 3b9121653b..ead6d6392a 100644
--- a/apps/docs/content/components/textarea/autosize.ts
+++ b/apps/docs/content/components/textarea/autosize.ts
@@ -24,9 +24,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/textarea/controlledUncontrolled.ts b/apps/docs/content/components/textarea/controlledUncontrolled.ts
index b94a68891a..ca6890fac1 100644
--- a/apps/docs/content/components/textarea/controlledUncontrolled.ts
+++ b/apps/docs/content/components/textarea/controlledUncontrolled.ts
@@ -63,9 +63,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/textarea/default.ts b/apps/docs/content/components/textarea/default.ts
index 866a1ea7da..c87081430c 100644
--- a/apps/docs/content/components/textarea/default.ts
+++ b/apps/docs/content/components/textarea/default.ts
@@ -10,9 +10,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/textarea/disabled.ts b/apps/docs/content/components/textarea/disabled.ts
index 976c9c694f..8b18cd975e 100644
--- a/apps/docs/content/components/textarea/disabled.ts
+++ b/apps/docs/content/components/textarea/disabled.ts
@@ -15,9 +15,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/textarea/helper.ts b/apps/docs/content/components/textarea/helper.ts
index f960fd629b..29d66f90c4 100644
--- a/apps/docs/content/components/textarea/helper.ts
+++ b/apps/docs/content/components/textarea/helper.ts
@@ -36,9 +36,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/textarea/index.ts b/apps/docs/content/components/textarea/index.ts
index bda8e5e29f..9828302c60 100644
--- a/apps/docs/content/components/textarea/index.ts
+++ b/apps/docs/content/components/textarea/index.ts
@@ -1,10 +1,10 @@
-import default_textArea from './default';
-import disabled from './disabled';
-import autosize from './autosize';
-import types from './types';
-import status from './status';
-import helper from './helper';
-import controlledUncontrolled from './controlledUncontrolled';
+import default_textArea from "./default";
+import disabled from "./disabled";
+import autosize from "./autosize";
+import types from "./types";
+import status from "./status";
+import helper from "./helper";
+import controlledUncontrolled from "./controlledUncontrolled";
 
 export default {
   default_textArea,
@@ -13,5 +13,5 @@ export default {
   types,
   status,
   helper,
-  controlledUncontrolled
+  controlledUncontrolled,
 };
diff --git a/apps/docs/content/components/textarea/status.ts b/apps/docs/content/components/textarea/status.ts
index 43d6fd3cbe..5556e7e32c 100644
--- a/apps/docs/content/components/textarea/status.ts
+++ b/apps/docs/content/components/textarea/status.ts
@@ -26,9 +26,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/textarea/types.ts b/apps/docs/content/components/textarea/types.ts
index 30778f52f4..0ece62082a 100644
--- a/apps/docs/content/components/textarea/types.ts
+++ b/apps/docs/content/components/textarea/types.ts
@@ -25,9 +25,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/tooltip/color.ts b/apps/docs/content/components/tooltip/color.ts
index 974fd29124..6ad913cecf 100644
--- a/apps/docs/content/components/tooltip/color.ts
+++ b/apps/docs/content/components/tooltip/color.ts
@@ -57,9 +57,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/tooltip/customContent.ts b/apps/docs/content/components/tooltip/customContent.ts
index 3b167930ec..c2058c3491 100644
--- a/apps/docs/content/components/tooltip/customContent.ts
+++ b/apps/docs/content/components/tooltip/customContent.ts
@@ -179,11 +179,11 @@ export default function App() {
 }`;
 
 const react = {
-  '/UserTwitterCard.js': UserTwitterCard,
-  '/DeleteUser.js': DeleteUser,
-  '/App.js': AppJs
+  "/UserTwitterCard.js": UserTwitterCard,
+  "/DeleteUser.js": DeleteUser,
+  "/App.js": AppJs,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/tooltip/default.ts b/apps/docs/content/components/tooltip/default.ts
index 885b4f35c5..29afd20cea 100644
--- a/apps/docs/content/components/tooltip/default.ts
+++ b/apps/docs/content/components/tooltip/default.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/tooltip/index.ts b/apps/docs/content/components/tooltip/index.ts
index 7df6e85b80..4745e09374 100644
--- a/apps/docs/content/components/tooltip/index.ts
+++ b/apps/docs/content/components/tooltip/index.ts
@@ -1,11 +1,11 @@
-import default_tooltip from './default';
-import rounded from './rounded';
-import color from './color';
-import textColor from './textColor';
-import trigger from './trigger';
-import placement from './placement';
-import noArrow from './noArrow';
-import customContent from './customContent';
+import default_tooltip from "./default";
+import rounded from "./rounded";
+import color from "./color";
+import textColor from "./textColor";
+import trigger from "./trigger";
+import placement from "./placement";
+import noArrow from "./noArrow";
+import customContent from "./customContent";
 
 export default {
   default_tooltip,
@@ -15,5 +15,5 @@ export default {
   trigger,
   placement,
   noArrow,
-  customContent
+  customContent,
 };
diff --git a/apps/docs/content/components/tooltip/noArrow.ts b/apps/docs/content/components/tooltip/noArrow.ts
index 196d2768a9..a9dfce1cad 100644
--- a/apps/docs/content/components/tooltip/noArrow.ts
+++ b/apps/docs/content/components/tooltip/noArrow.ts
@@ -15,9 +15,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/tooltip/placement.ts b/apps/docs/content/components/tooltip/placement.ts
index bbccb73f0c..7844f7552c 100644
--- a/apps/docs/content/components/tooltip/placement.ts
+++ b/apps/docs/content/components/tooltip/placement.ts
@@ -143,9 +143,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/tooltip/rounded.ts b/apps/docs/content/components/tooltip/rounded.ts
index 8e8ef18c6b..50fea4241b 100644
--- a/apps/docs/content/components/tooltip/rounded.ts
+++ b/apps/docs/content/components/tooltip/rounded.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/tooltip/textColor.ts b/apps/docs/content/components/tooltip/textColor.ts
index d522bbfc28..8cbad65f52 100644
--- a/apps/docs/content/components/tooltip/textColor.ts
+++ b/apps/docs/content/components/tooltip/textColor.ts
@@ -70,9 +70,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/tooltip/trigger.ts b/apps/docs/content/components/tooltip/trigger.ts
index ba0a775189..047a8ba96b 100644
--- a/apps/docs/content/components/tooltip/trigger.ts
+++ b/apps/docs/content/components/tooltip/trigger.ts
@@ -30,9 +30,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/user/border.ts b/apps/docs/content/components/user/border.ts
index 0bf092f71f..9c5229766f 100644
--- a/apps/docs/content/components/user/border.ts
+++ b/apps/docs/content/components/user/border.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/user/color.ts b/apps/docs/content/components/user/color.ts
index ea8650edea..60c178d5e4 100644
--- a/apps/docs/content/components/user/color.ts
+++ b/apps/docs/content/components/user/color.ts
@@ -50,9 +50,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/user/default.ts b/apps/docs/content/components/user/default.ts
index 30bcbc8ef5..897cae76b2 100644
--- a/apps/docs/content/components/user/default.ts
+++ b/apps/docs/content/components/user/default.ts
@@ -10,9 +10,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/user/description.ts b/apps/docs/content/components/user/description.ts
index a2c706b4bf..e008dec5aa 100644
--- a/apps/docs/content/components/user/description.ts
+++ b/apps/docs/content/components/user/description.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/user/index.ts b/apps/docs/content/components/user/index.ts
index 3aacdae493..7ecb76f7cb 100644
--- a/apps/docs/content/components/user/index.ts
+++ b/apps/docs/content/components/user/index.ts
@@ -1,12 +1,12 @@
-import default_user from './default';
-import size from './size';
-import color from './color';
-import border from './border';
-import zoomed from './zoomed';
-import pointer from './pointer';
-import squared from './squared';
-import description from './description';
-import link from './link';
+import default_user from "./default";
+import size from "./size";
+import color from "./color";
+import border from "./border";
+import zoomed from "./zoomed";
+import pointer from "./pointer";
+import squared from "./squared";
+import description from "./description";
+import link from "./link";
 
 export default {
   default_user,
@@ -17,5 +17,5 @@ export default {
   pointer,
   squared,
   description,
-  link
+  link,
 };
diff --git a/apps/docs/content/components/user/link.ts b/apps/docs/content/components/user/link.ts
index 65551cb52a..75d515c3a4 100644
--- a/apps/docs/content/components/user/link.ts
+++ b/apps/docs/content/components/user/link.ts
@@ -12,9 +12,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/user/pointer.ts b/apps/docs/content/components/user/pointer.ts
index 07e21b82fb..b508895515 100644
--- a/apps/docs/content/components/user/pointer.ts
+++ b/apps/docs/content/components/user/pointer.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/user/size.ts b/apps/docs/content/components/user/size.ts
index c349c187e5..57a44f7fd6 100644
--- a/apps/docs/content/components/user/size.ts
+++ b/apps/docs/content/components/user/size.ts
@@ -37,9 +37,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/user/squared.ts b/apps/docs/content/components/user/squared.ts
index 60e1d36525..290c809156 100644
--- a/apps/docs/content/components/user/squared.ts
+++ b/apps/docs/content/components/user/squared.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/components/user/zoomed.ts b/apps/docs/content/components/user/zoomed.ts
index 90e31a5961..c74f007072 100644
--- a/apps/docs/content/components/user/zoomed.ts
+++ b/apps/docs/content/components/user/zoomed.ts
@@ -11,9 +11,9 @@ export default function App() {
 }`;
 
 const react = {
-  '/App.js': App
+  "/App.js": App,
 };
 
 export default {
-  ...react
+  ...react,
 };
diff --git a/apps/docs/content/docs/manifest.json b/apps/docs/content/docs/manifest.json
index ebabfb21df..f86899211e 100644
--- a/apps/docs/content/docs/manifest.json
+++ b/apps/docs/content/docs/manifest.json
@@ -1,231 +1,231 @@
 {
-    "routes": [
+  "routes": [
+    {
+      "title": "Documentation",
+      "keywords": "docs, doc, documentation, getting started, nextui",
+      "subtitle": "For an advanced search please use the search input",
+      "icon": "note",
+      "section": "Scope",
+      "heading": true,
+      "routes": [
         {
-            "title": "Documentation",
-            "keywords": "docs, doc, documentation, getting started, nextui",
-            "subtitle": "For an advanced search please use the search input",
-            "icon": "note",
-            "section": "Scope",
-            "heading": true,
-            "routes": [
-                {
-                    "title": "Guide",
-                    "open": true,
-                    "keywords": "guide, getting started, start, nextui",
-                    "icon": "/paper.svg",
-                    "routes": [
-                        {
-                            "title": "Getting Started",
-                            "keywords": "getting started, start, nextui",
-                            "path": "/docs/guide/getting-started.mdx"
-                        },
-                        {
-                            "title": "NextUI + Next.js",
-                            "keywords": "next, nextjs, nextui",
-                            "path": "/docs/guide/nextui-plus-nextjs.mdx"
-                        }
-                    ]
-                },
-                {
-                    "title": "Theme",
-                    "keywords": "themeable, theme, customize, palette",
-                    "icon": "/category.svg",
-                    "open": true,
-                    "routes": [
-                        {
-                            "title": "Default theme",
-                            "updated": true,
-                            "path": "/docs/theme/default-theme.mdx"
-                        },
-                        {
-                            "title": "Customize theme",
-                            "path": "/docs/theme/customize-theme.mdx"
-                        },
-                        {
-                            "title": "Dark mode",
-                            "path": "/docs/theme/dark-mode.mdx"
-                        },
-                        {
-                            "title": "Override styles",
-                            "path": "/docs/theme/override-styles.mdx"
-                        },
-                        {
-                            "title": "Typescript",
-                            "path": "/docs/theme/typescript.mdx"
-                        },
-                        {
-                            "title": "Utilities",
-                            "path": "/docs/theme/utilities.mdx"
-                        },
-                        {
-                            "title": "Media",
-                            "path": "/docs/theme/media.mdx"
-                        }
-                    ]
-                },
-                {
-                    "title": "Layout",
-                    "icon": "/layout.svg",
-                    "keywords": "layout, container, grid, spacer, flex",
-                    "open": true,
-                    "routes": [
-                        {
-                            "title": "Container",
-                            "keywords": "cont, container, flex, media query",
-                            "path": "/docs/layout/container.mdx"
-                        },
-                        {
-                            "title": "Grid",
-                            "keywords": "grid, container, media query",
-                            "path": "/docs/layout/grid.mdx"
-                        },
-                        {
-                            "title": "Spacer",
-                            "keywords": "space, spacer, gap",
-                            "path": "/docs/layout/spacer.mdx"
-                        }
-                    ]
-                },
-                {
-                    "title": "Components",
-                    "keywords": "components, btn, button, input, modal",
-                    "icon": "/components.svg",
-                    "open": true,
-                    "routes": [
-                        {
-                            "title": "Avatar",
-                            "keywords": "avatar, avatar group, group",
-                            "path": "/docs/components/avatar.mdx"
-                        },
-                        {
-                            "title": "Button",
-                            "keywords": "button, btn, buttons, action",
-                            "path": "/docs/components/button.mdx"
-                        },
-                        {
-                            "title": "Button Group",
-                            "keywords": "btn, button, btn group, button group, group",
-                            "path": "/docs/components/button-group.mdx"
-                        },
-                        {
-                            "title": "Card",
-                            "keywords": "card, content, action, media",
-                            "path": "/docs/components/card.mdx",
-                            "updated": true
-                        },
-                        {
-                            "title": "Pagination",
-                            "keywords": "pagination, paginate, table pagination, pages, navigate",
-                            "path": "/docs/components/pagination.mdx"
-                        },
-                        {
-                            "title": "Table",
-                            "keywords":"table, data table, grid, data grid",
-                            "path": "/docs/components/table.mdx"
-                        },
-                        {
-                            "title": "Collapse",
-                            "keywords": "collapse, accordion, expand, reveal",
-                            "path": "/docs/components/collapse.mdx"
-                        },
-                        {
-                            "title": "Input",
-                            "keywords": "text input, input, textarea",
-                            "path": "/docs/components/input.mdx"
-                        },
-                        {
-                            "title": "Autocomplete",
-                            "comingSoon": true
-                        },
-                        {
-                            "title": "Textarea",
-                            "keywords": "textarea, input, text input, large text input",
-                            "path": "/docs/components/textarea.mdx"
-                        },
-                        {
-                            "title": "Checkbox",
-                            "keywords": "check, radio, selectable, checkbox, box",
-                            "path": "/docs/components/checkbox.mdx"
-                        },
-                        {
-                            "title": "Checkbox Group",
-                            "keywords": "check, radio, selectable, checkbox, box, group, items",
-                            "path": "/docs/components/checkbox-group.mdx"
-                        },
-                        {
-                            "title": "Radio",
-                            "updated": true,
-                            "keywords": "check, radio, select",
-                            "path": "/docs/components/radio.mdx"
-                        },
-                        {
-                          "title": "Popover",
-                          "keywords": "popover, tooltip, tooltip, popover, popover",
-                          "path": "/docs/components/popover.mdx",
-                          "updated": true
-                        },
-                        {
-                          "title": "Tooltip",
-                          "keywords": "tool, popover, tooltip, hoverable",
-                          "path": "/docs/components/tooltip.mdx"
-                        },
-                        {
-                            "title": "Dropdown",
-                            "keywords": "dropdown, select, selectable, menu",
-                            "path": "/docs/components/dropdown.mdx",
-                            "newPost": true
-                        },
-                        {
-                            "title": "Progress",
-                            "keywords": "progress, bar, task, display, activity",
-                            "path": "/docs/components/progress.mdx"
-                        },
-                        {
-                          "title": "Select",
-                          "comingSoon": true
-                        },
-                        {
-                            "title": "Modal",
-                            "keywords": "modal, dialog, backdrop",
-                            "path": "/docs/components/modal.mdx"
-                        },
-                        {
-                            "title": "Loading",
-                            "keywords": "loading, spinner, loadable, progress",
-                            "path": "/docs/components/loading.mdx"
-                        },
-                        {
-                            "title": "Navbar",
-                            "comingSoon": true
-                        },
-                        {
-                            "title": "Switch",
-                            "keywords": "toggle, switch",
-                            "path": "/docs/components/switch.mdx"
-                        },
-                        {
-                            "title": "Text",
-                            "keywords": "text, txt, paragraph",
-                            "path": "/docs/components/text.mdx"
-                        },
-                        {
-                            "title": "Link",
-                            "keywords": "link, navigation, href, next link",
-                            "path": "/docs/components/link.mdx"
-                        },
-                        {
-                            "title": "User",
-                            "keywords": "User, avatar, name, initials",
-                            "path": "/docs/components/user.mdx"
-                        },
-                        {
-                            "title": "Image",
-                            "keywords": "Image, Next.js Image, image component",
-                            "path": "/docs/components/image.mdx"
-                        }
-                    ]
-                }
-            ]
+          "title": "Guide",
+          "open": true,
+          "keywords": "guide, getting started, start, nextui",
+          "icon": "/paper.svg",
+          "routes": [
+            {
+              "title": "Getting Started",
+              "keywords": "getting started, start, nextui",
+              "path": "/docs/guide/getting-started.mdx"
+            },
+            {
+              "title": "NextUI + Next.js",
+              "keywords": "next, nextjs, nextui",
+              "path": "/docs/guide/nextui-plus-nextjs.mdx"
+            }
+          ]
+        },
+        {
+          "title": "Theme",
+          "keywords": "themeable, theme, customize, palette",
+          "icon": "/category.svg",
+          "open": true,
+          "routes": [
+            {
+              "title": "Default theme",
+              "updated": true,
+              "path": "/docs/theme/default-theme.mdx"
+            },
+            {
+              "title": "Customize theme",
+              "path": "/docs/theme/customize-theme.mdx"
+            },
+            {
+              "title": "Dark mode",
+              "path": "/docs/theme/dark-mode.mdx"
+            },
+            {
+              "title": "Override styles",
+              "path": "/docs/theme/override-styles.mdx"
+            },
+            {
+              "title": "Typescript",
+              "path": "/docs/theme/typescript.mdx"
+            },
+            {
+              "title": "Utilities",
+              "path": "/docs/theme/utilities.mdx"
+            },
+            {
+              "title": "Media",
+              "path": "/docs/theme/media.mdx"
+            }
+          ]
+        },
+        {
+          "title": "Layout",
+          "icon": "/layout.svg",
+          "keywords": "layout, container, grid, spacer, flex",
+          "open": true,
+          "routes": [
+            {
+              "title": "Container",
+              "keywords": "cont, container, flex, media query",
+              "path": "/docs/layout/container.mdx"
+            },
+            {
+              "title": "Grid",
+              "keywords": "grid, container, media query",
+              "path": "/docs/layout/grid.mdx"
+            },
+            {
+              "title": "Spacer",
+              "keywords": "space, spacer, gap",
+              "path": "/docs/layout/spacer.mdx"
+            }
+          ]
+        },
+        {
+          "title": "Components",
+          "keywords": "components, btn, button, input, modal",
+          "icon": "/components.svg",
+          "open": true,
+          "routes": [
+            {
+              "title": "Avatar",
+              "keywords": "avatar, avatar group, group",
+              "path": "/docs/components/avatar.mdx"
+            },
+            {
+              "title": "Button",
+              "keywords": "button, btn, buttons, action",
+              "path": "/docs/components/button.mdx"
+            },
+            {
+              "title": "Button Group",
+              "keywords": "btn, button, btn group, button group, group",
+              "path": "/docs/components/button-group.mdx"
+            },
+            {
+              "title": "Card",
+              "keywords": "card, content, action, media",
+              "path": "/docs/components/card.mdx",
+              "updated": true
+            },
+            {
+              "title": "Pagination",
+              "keywords": "pagination, paginate, table pagination, pages, navigate",
+              "path": "/docs/components/pagination.mdx"
+            },
+            {
+              "title": "Table",
+              "keywords": "table, data table, grid, data grid",
+              "path": "/docs/components/table.mdx"
+            },
+            {
+              "title": "Collapse",
+              "keywords": "collapse, accordion, expand, reveal",
+              "path": "/docs/components/collapse.mdx"
+            },
+            {
+              "title": "Input",
+              "keywords": "text input, input, textarea",
+              "path": "/docs/components/input.mdx"
+            },
+            {
+              "title": "Autocomplete",
+              "comingSoon": true
+            },
+            {
+              "title": "Textarea",
+              "keywords": "textarea, input, text input, large text input",
+              "path": "/docs/components/textarea.mdx"
+            },
+            {
+              "title": "Checkbox",
+              "keywords": "check, radio, selectable, checkbox, box",
+              "path": "/docs/components/checkbox.mdx"
+            },
+            {
+              "title": "Checkbox Group",
+              "keywords": "check, radio, selectable, checkbox, box, group, items",
+              "path": "/docs/components/checkbox-group.mdx"
+            },
+            {
+              "title": "Radio",
+              "updated": true,
+              "keywords": "check, radio, select",
+              "path": "/docs/components/radio.mdx"
+            },
+            {
+              "title": "Popover",
+              "keywords": "popover, tooltip, tooltip, popover, popover",
+              "path": "/docs/components/popover.mdx",
+              "updated": true
+            },
+            {
+              "title": "Tooltip",
+              "keywords": "tool, popover, tooltip, hoverable",
+              "path": "/docs/components/tooltip.mdx"
+            },
+            {
+              "title": "Dropdown",
+              "keywords": "dropdown, select, selectable, menu",
+              "path": "/docs/components/dropdown.mdx",
+              "newPost": true
+            },
+            {
+              "title": "Progress",
+              "keywords": "progress, bar, task, display, activity",
+              "path": "/docs/components/progress.mdx"
+            },
+            {
+              "title": "Select",
+              "comingSoon": true
+            },
+            {
+              "title": "Modal",
+              "keywords": "modal, dialog, backdrop",
+              "path": "/docs/components/modal.mdx"
+            },
+            {
+              "title": "Loading",
+              "keywords": "loading, spinner, loadable, progress",
+              "path": "/docs/components/loading.mdx"
+            },
+            {
+              "title": "Navbar",
+              "comingSoon": true
+            },
+            {
+              "title": "Switch",
+              "keywords": "toggle, switch",
+              "path": "/docs/components/switch.mdx"
+            },
+            {
+              "title": "Text",
+              "keywords": "text, txt, paragraph",
+              "path": "/docs/components/text.mdx"
+            },
+            {
+              "title": "Link",
+              "keywords": "link, navigation, href, next link",
+              "path": "/docs/components/link.mdx"
+            },
+            {
+              "title": "User",
+              "keywords": "User, avatar, name, initials",
+              "path": "/docs/components/user.mdx"
+            },
+            {
+              "title": "Image",
+              "keywords": "Image, Next.js Image, image component",
+              "path": "/docs/components/image.mdx"
+            }
+          ]
         }
-    ]
-}
\ No newline at end of file
+      ]
+    }
+  ]
+}
diff --git a/apps/docs/content/landing/index.tsx b/apps/docs/content/landing/index.tsx
index 5df8b5fd6f..b4c34181c8 100644
--- a/apps/docs/content/landing/index.tsx
+++ b/apps/docs/content/landing/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 import {
   Moon,
   Magic,
@@ -9,85 +9,84 @@ import {
   RoundPointer,
   Maximize,
   CodeDocument,
-  HtmlLogo
-} from '@components';
+  HtmlLogo,
+} from "@components";
 
 export default {
   topFeatures: [
     {
-      title: 'Themeable',
+      title: "Themeable",
       description:
-        'Provides a simple way to customize default themes, you can change the colors, fonts, breakpoints and everything you need.',
-      icon: <Magic fill="#FF4ECD" />
+        "Provides a simple way to customize default themes, you can change the colors, fonts, breakpoints and everything you need.",
+      icon: <Magic fill="#FF4ECD" />,
     },
     {
-      title: 'Fast',
+      title: "Fast",
       description:
-        'Avoids unnecessary styles props at runtime, making it more performant than other UI libraries.',
-      icon: <Flash fill="#FF4ECD" />
+        "Avoids unnecessary styles props at runtime, making it more performant than other UI libraries.",
+      icon: <Flash fill="#FF4ECD" />,
     },
     {
-      title: 'Light & Dark UI',
+      title: "Light & Dark UI",
       description:
-        'Automatic dark mode recognition, NextUI automatically changes the theme when detects HTML theme prop changes.',
-      icon: <Moon fill="#FF4ECD" />
+        "Automatic dark mode recognition, NextUI automatically changes the theme when detects HTML theme prop changes.",
+      icon: <Moon fill="#FF4ECD" />,
     },
     {
-      title: 'Unique DX',
+      title: "Unique DX",
       description:
-        'NextUI is fully-typed to minimize the learning curve, and provide the best possible developer experience.',
-      icon: <Devices fill="#FF4ECD" />
-    }
+        "NextUI is fully-typed to minimize the learning curve, and provide the best possible developer experience.",
+      icon: <Devices fill="#FF4ECD" />,
+    },
   ],
   fullFeatures: [
     {
-      title: 'Server side render (SSR)',
+      title: "Server side render (SSR)",
       description:
-        'All NextUI components support cross-browser server-side rendering and provides a simple way to implement it in your project.',
-      icon: <Server fill="#FF4ECD" />
+        "All NextUI components support cross-browser server-side rendering and provides a simple way to implement it in your project.",
+      icon: <Server fill="#FF4ECD" />,
     },
     {
-      title: 'Accessible components',
+      title: "Accessible components",
       description:
-        'NextUI components follow the WAI-ARIA guidelines, provide keyboard support and sensible focus management.',
-      icon: <TagUser fill="#FF4ECD" />
+        "NextUI components follow the WAI-ARIA guidelines, provide keyboard support and sensible focus management.",
+      icon: <TagUser fill="#FF4ECD" />,
     },
     {
-      title: 'Focus interactions',
+      title: "Focus interactions",
       description:
-        'Focus ring will appear only when user navigates with keyboard or screen reader.',
-      icon: <RoundPointer fill="#FF4ECD" />
+        "Focus ring will appear only when user navigates with keyboard or screen reader.",
+      icon: <RoundPointer fill="#FF4ECD" />,
     },
     {
-      title: 'Built-in media queries',
+      title: "Built-in media queries",
       description:
-        'NextUI provides a set of common media queries that, along with Stitches breakpoints allow you create responsive layouts faster.',
-      icon: <Maximize fill="#FF4ECD" />
+        "NextUI provides a set of common media queries that, along with Stitches breakpoints allow you create responsive layouts faster.",
+      icon: <Maximize fill="#FF4ECD" />,
     },
     {
-      title: 'TypeScript based',
+      title: "TypeScript based",
       description:
-        'Build type safe applications, NextUI has a fully-typed API to minimize the learning curve, and help you build applications.',
-      icon: <CodeDocument filled={false} fill="#FF4ECD" />
+        "Build type safe applications, NextUI has a fully-typed API to minimize the learning curve, and help you build applications.",
+      icon: <CodeDocument fill="#FF4ECD" filled={false} />,
     },
     {
-      title: 'Override components tags',
-      description:
-        'A polymorphic `as` prop is included in all NextUI components.',
-      icon: <HtmlLogo fill="#FF4ECD" />
+      title: "Override components tags",
+      description: "A polymorphic `as` prop is included in all NextUI components.",
+      icon: <HtmlLogo fill="#FF4ECD" />,
     },
     {
-      title: 'Critical Path CSS',
+      title: "Critical Path CSS",
       description:
         "Since NextUI is based on Stitches, it only injects the styles which are actually used, so your users don't download unnecessary CSS.",
-      icon: <Flash fill="#FF4ECD" />
+      icon: <Flash fill="#FF4ECD" />,
     },
     {
-      title: 'Beautifully designed',
+      title: "Beautifully designed",
       description:
-        'NextUI components are unique and are not tied to any visual trend or design rule, which makes us unique and of course your projects as well.',
-      icon: <Magic fill="#FF4ECD" />
-    }
+        "NextUI components are unique and are not tied to any visual trend or design rule, which makes us unique and of course your projects as well.",
+      icon: <Magic fill="#FF4ECD" />,
+    },
   ],
   themingCode: `import { createTheme } from '@nextui-org/react';
 
@@ -283,7 +282,7 @@ const MyComponent = () => {
   );
 };
 
-export default MyComponent;`
+export default MyComponent;`,
   },
   darkModeCode: `// 1. Import createTheme
 import { createTheme, NextUIProvider } from "@nextui-org/react"
@@ -408,5 +407,5 @@ export default CustomButton;
     backgroundClip: value
   }),
 
-}`
+}`,
 };

From a2008f32c6cac0ce106b1065e167363c91d822ca Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 19 Jun 2022 18:38:09 -0300
Subject: [PATCH 009/106] feat(react-text): now users can use any of the
 fontSizes theme tokens on the size prop

---
 apps/docs/content/docs/components/text.mdx  |  2 +
 packages/react/src/text/child.tsx           | 47 ++++++++++++++-------
 packages/react/src/text/text.stories.tsx    | 10 ++---
 packages/react/src/theme/stitches.config.ts | 29 +++++++------
 4 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/apps/docs/content/docs/components/text.mdx b/apps/docs/content/docs/components/text.mdx
index 509f65b8c0..df7547d11d 100644
--- a/apps/docs/content/docs/components/text.mdx
+++ b/apps/docs/content/docs/components/text.mdx
@@ -53,6 +53,8 @@ import { Text } from '@nextui-org/react';
   files={textContent.size}
 />
 
+> **Note:** You can use any of the [theme font sizes](http://localhost:3000/docs/theme/default-theme#2.-font-sizes) included your own [custom font sizes](http://localhost:3000/docs/theme/customize-theme) (if you have).
+
 <Playground
   title="Compose"
   desc="Effect of multiple `Text` stacks"
diff --git a/packages/react/src/text/child.tsx b/packages/react/src/text/child.tsx
index 7292ff0751..b27f912fc7 100644
--- a/packages/react/src/text/child.tsx
+++ b/packages/react/src/text/child.tsx
@@ -1,7 +1,8 @@
+import type {CSS} from "../theme/stitches.config";
+import type {SimpleColors} from "../utils/prop-types";
+
 import React, {useMemo, ReactNode} from "react";
 
-import {CSS, FontSizes, baseTheme} from "../theme/stitches.config";
-import {SimpleColors, TextTransforms} from "../utils/prop-types";
 import {isNormalColor} from "../utils/color";
 import {ReactRef} from "../utils/refs";
 import {useDOMRef} from "../utils/dom";
@@ -10,14 +11,30 @@ import {__DEV__} from "../utils/assertion";
 import {StyledText, TextVariantsProps} from "./text.styles";
 
 type As = keyof JSX.IntrinsicElements | React.ComponentType<any>;
-type FontSize = number | string | keyof FontSizes;
+type FontSize = CSS["fontSize"];
 
 export interface Props {
   tag: keyof JSX.IntrinsicElements;
   children?: ReactNode;
   color?: SimpleColors | string;
+  /**
+   * The **`font-size`** CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative `<length>` units, such as `em`, `ex`, and so forth.
+   *
+   * **Syntax**: `<absolute-size> | <relative-size> | <length-percentage>`
+   *
+   * **Initial value**: `medium`
+   *
+   */
   size?: FontSize;
-  transform?: TextTransforms;
+  /**
+   * The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
+   *
+   * **Syntax**: `none | capitalize | uppercase | lowercase | full-width | full-size-kana`
+   *
+   * **Initial value**: `none`
+   *
+   */
+  transform?: CSS["textTransform"];
   css?: CSS;
   as?: As;
 }
@@ -27,20 +44,18 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export type TextChildProps = Props & NativeAttrs & TextVariantsProps;
 
 export const TextChild = React.forwardRef((props: TextChildProps, ref: ReactRef<HTMLElement>) => {
-  const {children, tag, color: userColor = "default", transform, size, css, ...otherProps} = props;
+  const {
+    children,
+    tag,
+    color: userColor = "default",
+    transform,
+    size: fontSize,
+    css,
+    ...otherProps
+  } = props;
 
   const domRef = useDOMRef(ref);
 
-  const fontSize = useMemo<FontSize>(() => {
-    if (!size) return "inherit";
-    if (typeof size === "number") return `${size}px`;
-    if (baseTheme.theme.fontSizes?.[size as keyof FontSizes]) {
-      return `$${size}`;
-    }
-
-    return size;
-  }, [size]);
-
   const color = useMemo(() => {
     if (isNormalColor(userColor)) {
       switch (userColor) {
@@ -60,7 +75,7 @@ export const TextChild = React.forwardRef((props: TextChildProps, ref: ReactRef<
       as={tag}
       css={{
         color,
-        fontSize: size ? fontSize : "",
+        fontSize,
         tt: transform,
         ...(css as any),
       }}
diff --git a/packages/react/src/text/text.stories.tsx b/packages/react/src/text/text.stories.tsx
index c59635edb8..fb9770bb61 100644
--- a/packages/react/src/text/text.stories.tsx
+++ b/packages/react/src/text/text.stories.tsx
@@ -100,11 +100,11 @@ export const Blockquote = () => (
 
 export const Sizes = () => (
   <>
-    <Text size={12}>Font Size: 12px;</Text>
-    <Text size={14}>Font Size: 14px;</Text>
-    <Text size="100%">Font Size: 100%;</Text>
-    <Text size="1.25rem">Font Size: 1.25rem;</Text>
-    <Text size="2em">Font Size: 2em;</Text>
+    <Text size="$xs">Font Size: xs;</Text>
+    <Text size="$md">Font Size: md (base);</Text>
+    <Text size="$xl">Font Size: xl;</Text>
+    <Text size="$2xl">Font Size: 2xl;</Text>
+    <Text size="$3xl">Font Size: 3xl;</Text>
   </>
 );
 
diff --git a/packages/react/src/theme/stitches.config.ts b/packages/react/src/theme/stitches.config.ts
index 021101b428..d78a4d4ff5 100644
--- a/packages/react/src/theme/stitches.config.ts
+++ b/packages/react/src/theme/stitches.config.ts
@@ -38,7 +38,6 @@ export const keyframes = stitches.keyframes;
 export const getCssText = stitches.getCssText;
 export const theme = stitches.theme;
 export const config = stitches.config;
-export const baseTheme = commonTheme;
 
 export const createTheme = ({type, theme, className}: Theme) => {
   if (!type) {
@@ -52,22 +51,24 @@ export const createTheme = ({type, theme, className}: Theme) => {
 };
 
 // stitches types
+export type StitchesConfig = typeof config;
 export type VariantProps<T> = Stitches.VariantProps<T>;
 export type PropertyValue<T extends keyof Stitches.CSSProperties> = Stitches.PropertyValue<T>;
+export type ScaleValue<T> = Stitches.ScaleValue<T>;
 export type CSSProperties = Stitches.CSSProperties;
-export type CSS = Stitches.CSS<typeof config>;
+export type CSS = Stitches.CSS<StitchesConfig>;
 export type StitchesTheme = typeof theme;
 
 // common theme types
-export type Spaces = typeof commonTheme.theme["space"];
-export type FontSizes = typeof commonTheme.theme["fontSizes"];
-export type Fonts = typeof commonTheme.theme["fonts"];
-export type FontWeights = typeof commonTheme.theme["fontWeights"];
-export type LineHeights = typeof commonTheme.theme["lineHeights"];
-export type LetterSpacings = typeof commonTheme.theme["letterSpacings"];
-export type Colors = typeof commonTheme.theme["colors"];
-export type Radii = typeof commonTheme.theme["radii"];
-export type zIndices = typeof commonTheme.theme["zIndices"];
-export type BorderWeights = typeof commonTheme.theme["borderWeights"];
-export type Tranistions = typeof commonTheme.theme["transitions"];
-export type Breakpoints = typeof commonTheme.theme["breakpoints"];
+export type Spaces = StitchesConfig["theme"]["space"];
+export type FontSizes = StitchesConfig["theme"]["fontSizes"];
+export type Fonts = StitchesConfig["theme"]["fonts"];
+export type FontWeights = StitchesConfig["theme"]["fontWeights"];
+export type LineHeights = StitchesConfig["theme"]["lineHeights"];
+export type LetterSpacings = StitchesConfig["theme"]["letterSpacings"];
+export type Colors = StitchesConfig["theme"]["colors"];
+export type Radii = StitchesConfig["theme"]["radii"];
+export type zIndices = StitchesConfig["theme"]["zIndices"];
+export type BorderWeights = StitchesConfig["theme"]["borderWeights"];
+export type Tranistions = StitchesConfig["theme"]["transitions"];
+export type Breakpoints = StitchesConfig["theme"]["breakpoints"];

From 0efbee975ee7de4b296698b71679e48928c81964 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 19 Jun 2022 18:42:06 -0300
Subject: [PATCH 010/106] fix(react-config): 'React' is declared but its value
 is never read"

---
 packages/react/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index cd893e099b..07870c8d9b 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -2,7 +2,7 @@
     "extends": "../../tsconfig.base.json",
     "compilerOptions": {
         "baseUrl": ".",
-        "jsx": "preserve",
+        "jsx": "react",
         "skipLibCheck": true,
         "moduleResolution": "node",
         "allowJs": true,

From 4401e4512b71f9f1cd17cfbc7f57ae9c6c1df712 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 19 Jun 2022 20:56:53 -0300
Subject: [PATCH 011/106] feat(docs-text): font size updated

---
 apps/docs/content/docs/components/text.mdx | 73 +++++++++++-----------
 1 file changed, 36 insertions(+), 37 deletions(-)

diff --git a/apps/docs/content/docs/components/text.mdx b/apps/docs/content/docs/components/text.mdx
index df7547d11d..34b8ddd8f3 100644
--- a/apps/docs/content/docs/components/text.mdx
+++ b/apps/docs/content/docs/components/text.mdx
@@ -1,6 +1,6 @@
 ---
-title: 'Text'
-description: 'Text component is the used to render text and paragraphs within an interface using well-defined typographic styles.'
+title: "Text"
+description: "Text component is the used to render text and paragraphs within an interface using well-defined typographic styles."
 url: https://nextui.org/docs/components/text
 ---
 
@@ -10,7 +10,7 @@ Text component is the used to render text and paragraphs within an interface usi
 It renders a `<p>` tag by default.
 
 ```jsx
-import { Text } from '@nextui-org/react';
+import { Text } from "@nextui-org/react";
 ```
 
 <CarbonAd />
@@ -53,7 +53,7 @@ import { Text } from '@nextui-org/react';
   files={textContent.size}
 />
 
-> **Note:** You can use any of the [theme font sizes](http://localhost:3000/docs/theme/default-theme#2.-font-sizes) included your own [custom font sizes](http://localhost:3000/docs/theme/customize-theme) (if you have).
+> **Note:** You can use any of the [theme font sizes](/docs/theme/default-theme#2.-font-sizes) included your own [custom font sizes](http://localhost:3000/docs/theme/customize-theme) (if you have).
 
 <Playground
   title="Compose"
@@ -69,23 +69,22 @@ import { Text } from '@nextui-org/react';
 
 #### Text Props
 
-| Attribute      | Type                          | Accepted values                    | Description                         | Default   |
-| -------------- | ----------------------------- | ---------------------------------- | ----------------------------------- | --------- |
-| **h1 - h6**    | `boolean`                     | -                                  | Component name                      | `false`   |
-| **small**      | `boolean`                     | -                                  | Component name                      | `false`   |
-| **span**       | `boolean`                     | -                                  | Component name                      | `false`   |
-| **del**        | `boolean`                     | -                                  | Component name                      | `false`   |
-| **i**          | `boolean`                     | -                                  | Component name                      | `false`   |
-| **em**         | `boolean`                     | -                                  | Component name                      | `false`   |
-| **b**          | `boolean`                     | -                                  | Component name                      | `false`   |
-| **blockquote** | `boolean`                     | -                                  | Component name                      | `false`   |
-| **transform**  | `TextTransform`               | [TextTransforms](#text-transforms) | text-transform prop                 | `none`    |
-| **size**       | `string` `number`             | -                                  | Text size                           | `inherit` |
-| **color**      | `SimpleColors` `string`       | [SimpleColors](#simple-colors)     | Text color                          | `default` |
-| **weight**     | `TextWeights`                 | [TextWeights](#text-weights)       | Text weight                         | `noset`   |
-| **css**        | `Stitches.CSS`                | -                                  | Override Default CSS style          | -         |
-| **as**         | `keyof JSX.IntrinsicElements` | -                                  | Changes which tag component outputs | `p`       |
-| ...            | `HTMLAttributes`              | `'id', 'className', ...`           | native props                        | -         |
+| Attribute      | Type                                                                  | Description                         | Default   |
+| -------------- | --------------------------------------------------------------------- | ----------------------------------- | --------- |
+| **h1 - h6**    | `boolean`                                                             | Component name                      | `false`   |
+| **small**      | `boolean`                                                             | Component name                      | `false`   |
+| **span**       | `boolean`                                                             | Component name                      | `false`   |
+| **del**        | `boolean`                                                             | Component name                      | `false`   |
+| **i**          | `boolean`                                                             | Component name                      | `false`   |
+| **em**         | `boolean`                                                             | Component name                      | `false`   |
+| **b**          | `boolean`                                                             | Component name                      | `false`   |
+| **blockquote** | `boolean`                                                             | Component name                      | `false`   |
+| **transform**  | [TextTransforms](#text-transforms)                                    | text-transform prop                 | `none`    |
+| **size**       | `string` `number` [FontSize](/docs/theme/default-theme#2-font-sizes) | Text size                           | `inherit` |
+| **color**      | [SimpleColors](#simple-colors) `string`                               | Text color                          | `default` |
+| **weight**     | [TextWeights](#text-weights)                                          | Text weight                         | `noset`   |
+| **css**        | `Stitches.CSS`                                                        | Override Default CSS style          | -         |
+| **as**         | `keyof JSX.IntrinsicElements`                                         | Changes which tag component outputs | `p`       |
 
 <Spacer y={2} />
 
@@ -98,29 +97,29 @@ import { Text } from '@nextui-org/react';
 ```ts
 type TextTransforms =
   /* Keyword values */
-  | 'none'
-  | 'capitalize'
-  | 'uppercase'
-  | 'lowercase'
-  | 'full-width'
-  | 'full-size-kana'
+  | "none"
+  | "capitalize"
+  | "uppercase"
+  | "lowercase"
+  | "full-width"
+  | "full-size-kana"
   /* Global values */
-  | 'inherit'
-  | 'initial'
-  | 'revert'
-  | 'unset';
+  | "inherit"
+  | "initial"
+  | "revert"
+  | "unset";
 ```
 
 #### Simple Colors
 
 ```ts
 type SimpleColors =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'error';
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error";
 ```
 
 #### Text Weights

From eb60d77b5fdc4610722f6a6e9ba232555ead1707 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 19 Jun 2022 21:02:40 -0300
Subject: [PATCH 012/106] chore(react-root): test passing

---
 .../__snapshots__/index.test.tsx.snap         |  24 +--
 .../__snapshots__/group.test.tsx.snap         |  16 +-
 .../__snapshots__/icon.test.tsx.snap          |  12 +-
 .../__snapshots__/group.test.tsx.snap         | 128 ++++++++--------
 .../__snapshots__/index.test.tsx.snap         | 144 +++++++++---------
 .../__snapshots__/index.test.tsx.snap         |  16 +-
 .../__snapshots__/password.test.tsx.snap      |   4 +-
 .../__snapshots__/index.test.tsx.snap         |   4 +-
 .../__snapshots__/index.test.tsx.snap         |  20 +--
 .../__snapshots__/pagination.test.tsx.snap    |   4 +-
 .../__snapshots__/index.test.tsx.snap         |  20 +--
 .../__snapshots__/index.test.tsx.snap         |  28 +---
 .../__snapshots__/index.test.tsx.snap         |   8 +-
 .../__snapshots__/index.test.tsx.snap         |  28 +---
 .../__snapshots__/index.test.tsx.snap         |   8 +-
 15 files changed, 184 insertions(+), 280 deletions(-)

diff --git a/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
index d194501ed3..a7c7208078 100644
--- a/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
@@ -136,9 +136,7 @@ LoadedCheerio {
 }
 `;
 
-exports[
-  `Avatar should render correctly with an icon 1`
-] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span><span class=\\"nextui-avatar-icon\\"><svg class=\\"\\"></svg></span></span>"`;
+exports[`Avatar should render correctly with an icon 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span><span class=\\"nextui-avatar-icon\\"><svg class=\\"\\"></svg></span></span>"`;
 
 exports[`Avatar should render text element 1`] = `
 LoadedCheerio {
@@ -480,22 +478,12 @@ LoadedCheerio {
 }
 `;
 
-exports[
-  `Avatar should work correctly with different sizes 1`
-] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-jROyhw-size-xs nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-bHlgBq-size-sm nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-lmZTtQ-size-lg nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-dVCMrw-size-xl nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
+exports[`Avatar should work correctly with different sizes 1`] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-jROyhw-size-xs nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-bHlgBq-size-sm nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-lmZTtQ-size-lg nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-ehDSPw-size-xl nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
 
-exports[
-  `Avatar should work with a gradient color 1`
-] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-lcNuyd-color-gradient nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with a gradient color 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-lcNuyd-color-gradient nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
 
-exports[
-  `Avatar should work with different colors 1`
-] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eeabkr-color-primary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-jzyGMN-color-secondary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-fJMMFA-color-success nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eCIbjl-color-warning nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-gYTGZH-color-error nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
+exports[`Avatar should work with different colors 1`] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eeabkr-color-primary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-jzyGMN-color-secondary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-fJMMFA-color-success nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eCIbjl-color-warning nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-gYTGZH-color-error nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
 
-exports[
-  `Avatar should work with pointer 1`
-] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-gsmDXe-pointer-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with pointer 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-gsmDXe-pointer-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
 
-exports[
-  `Avatar should work with zoomed 1`
-] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-OUZAS-zoomed-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with zoomed 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-OUZAS-zoomed-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
diff --git a/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
index 8d0a39b7b1..1ca3d7b48b 100644
--- a/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
@@ -1,20 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `ButtonGroup buttons should be displayed vertically 1`
-] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-gwxfIo-vertical-true nextui-c-UqICV-gimGqK-size-md\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action1</span></button><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action2</span></button></div>"`;
+exports[`ButtonGroup buttons should be displayed vertically 1`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-gwxfIo-vertical-true nextui-c-UqICV-gimGqK-size-md\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action1</span></button><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action2</span></button></div>"`;
 
-exports[
-  `ButtonGroup props should be passed to each button 1`
-] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-iAoIqM-size-xs\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[`ButtonGroup props should be passed to each button 1`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-iAoIqM-size-xs\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
-exports[
-  `ButtonGroup props should be passed to each button 2`
-] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-iAoIqM-size-xs\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-cyFBRX-flat-true nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-iWjDFM-gmvfdi-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[`ButtonGroup props should be passed to each button 2`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-iAoIqM-size-xs\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-cyFBRX-flat-true nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-iWjDFM-gmvfdi-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
-exports[
-  `ButtonGroup should render correctly 1`
-] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-gimGqK-size-md\\"><button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[`ButtonGroup should render correctly 1`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-gimGqK-size-md\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
 exports[`ButtonGroup should render different variants 1`] = `ReactWrapper {}`;
 
diff --git a/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap b/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
index 894b9f6bd7..f921608f67 100644
--- a/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
+++ b/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
@@ -1,13 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `ButtonIcon should render correctly 1`
-] = `"<button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-iPJLV-css nextui-button-icon\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-left\\">action</div></button>"`;
+exports[`ButtonIcon should render correctly 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-iPJLV-css nextui-button-icon\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-left\\">action</div></button>"`;
 
-exports[
-  `ButtonIcon should work with right 1`
-] = `"<button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-right\\">action</div></button>"`;
+exports[`ButtonIcon should work with right 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-right\\">action</div></button>"`;
 
-exports[
-  `ButtonIcon should work without text 1`
-] = `"<button data-state=\\"ready\\" class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-bQrkqa-isChildLess-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iyYGWO-isSingle-true nextui-c-bDGMeb-bVsTEo-cv nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right nextui-button-icon-single\\"><svg></svg></span></button>"`;
+exports[`ButtonIcon should work without text 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-bQrkqa-isChildLess-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iyYGWO-isSingle-true nextui-c-bDGMeb-bVsTEo-cv nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right nextui-button-icon-single\\"><svg></svg></span></button>"`;
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
index ab34acbd24..ffb670b986 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
@@ -20,12 +20,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria3846599965-10",
+              "aria-controls": "react-aria7113542553-10",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria3846599965-9",
+              "id": "react-aria7113542553-9",
               "role": "button",
               "tabindex": "0",
             },
@@ -324,9 +324,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria3846599965-9",
+                        "aria-labelledby": "react-aria7113542553-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria3846599965-10",
+                        "id": "react-aria7113542553-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -424,9 +424,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria3846599965-9",
+                      "aria-labelledby": "react-aria7113542553-9",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria3846599965-10",
+                      "id": "react-aria7113542553-10",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -481,12 +481,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria3846599965-10",
+                "aria-controls": "react-aria7113542553-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria3846599965-9",
+                "id": "react-aria7113542553-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -818,12 +818,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria3846599965-12",
+                "aria-controls": "react-aria7113542553-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria3846599965-11",
+                "id": "react-aria7113542553-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -1122,9 +1122,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria3846599965-11",
+                          "aria-labelledby": "react-aria7113542553-11",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria3846599965-12",
+                          "id": "react-aria7113542553-12",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -1222,9 +1222,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria3846599965-11",
+                        "aria-labelledby": "react-aria7113542553-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria3846599965-12",
+                        "id": "react-aria7113542553-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -1279,12 +1279,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria3846599965-12",
+                  "aria-controls": "react-aria7113542553-12",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria3846599965-11",
+                  "id": "react-aria7113542553-11",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -1645,12 +1645,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria3846599965-12",
+              "aria-controls": "react-aria7113542553-12",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria3846599965-11",
+              "id": "react-aria7113542553-11",
               "role": "button",
               "tabindex": "0",
             },
@@ -1949,9 +1949,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria3846599965-11",
+                        "aria-labelledby": "react-aria7113542553-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria3846599965-12",
+                        "id": "react-aria7113542553-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -2049,9 +2049,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria3846599965-11",
+                      "aria-labelledby": "react-aria7113542553-11",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria3846599965-12",
+                      "id": "react-aria7113542553-12",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -2106,12 +2106,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria3846599965-12",
+                "aria-controls": "react-aria7113542553-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria3846599965-11",
+                "id": "react-aria7113542553-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -2445,12 +2445,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria3846599965-10",
+                "aria-controls": "react-aria7113542553-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria3846599965-9",
+                "id": "react-aria7113542553-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -2749,9 +2749,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria3846599965-9",
+                          "aria-labelledby": "react-aria7113542553-9",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria3846599965-10",
+                          "id": "react-aria7113542553-10",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -2849,9 +2849,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria3846599965-9",
+                        "aria-labelledby": "react-aria7113542553-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria3846599965-10",
+                        "id": "react-aria7113542553-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -2906,12 +2906,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria3846599965-10",
+                  "aria-controls": "react-aria7113542553-10",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria3846599965-9",
+                  "id": "react-aria7113542553-9",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -3385,12 +3385,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria3846599965-6",
+              "aria-controls": "react-aria7113542553-6",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria3846599965-5",
+              "id": "react-aria7113542553-5",
               "role": "button",
               "tabindex": "0",
             },
@@ -3689,9 +3689,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria3846599965-5",
+                        "aria-labelledby": "react-aria7113542553-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria3846599965-6",
+                        "id": "react-aria7113542553-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -3789,9 +3789,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria3846599965-5",
+                      "aria-labelledby": "react-aria7113542553-5",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria3846599965-6",
+                      "id": "react-aria7113542553-6",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -3846,12 +3846,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria3846599965-6",
+                "aria-controls": "react-aria7113542553-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria3846599965-5",
+                "id": "react-aria7113542553-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -4183,12 +4183,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria3846599965-8",
+                "aria-controls": "react-aria7113542553-8",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria3846599965-7",
+                "id": "react-aria7113542553-7",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -4487,9 +4487,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria3846599965-7",
+                          "aria-labelledby": "react-aria7113542553-7",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria3846599965-8",
+                          "id": "react-aria7113542553-8",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -4587,9 +4587,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria3846599965-7",
+                        "aria-labelledby": "react-aria7113542553-7",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria3846599965-8",
+                        "id": "react-aria7113542553-8",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -4644,12 +4644,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria3846599965-8",
+                  "aria-controls": "react-aria7113542553-8",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria3846599965-7",
+                  "id": "react-aria7113542553-7",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -5010,12 +5010,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria3846599965-8",
+              "aria-controls": "react-aria7113542553-8",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria3846599965-7",
+              "id": "react-aria7113542553-7",
               "role": "button",
               "tabindex": "0",
             },
@@ -5314,9 +5314,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria3846599965-7",
+                        "aria-labelledby": "react-aria7113542553-7",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria3846599965-8",
+                        "id": "react-aria7113542553-8",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -5414,9 +5414,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria3846599965-7",
+                      "aria-labelledby": "react-aria7113542553-7",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria3846599965-8",
+                      "id": "react-aria7113542553-8",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -5471,12 +5471,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria3846599965-8",
+                "aria-controls": "react-aria7113542553-8",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria3846599965-7",
+                "id": "react-aria7113542553-7",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -5810,12 +5810,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria3846599965-6",
+                "aria-controls": "react-aria7113542553-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria3846599965-5",
+                "id": "react-aria7113542553-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -6114,9 +6114,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria3846599965-5",
+                          "aria-labelledby": "react-aria7113542553-5",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria3846599965-6",
+                          "id": "react-aria7113542553-6",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -6214,9 +6214,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria3846599965-5",
+                        "aria-labelledby": "react-aria7113542553-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria3846599965-6",
+                        "id": "react-aria7113542553-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -6271,12 +6271,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria3846599965-6",
+                  "aria-controls": "react-aria7113542553-6",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria3846599965-5",
+                  "id": "react-aria7113542553-5",
                   "role": "button",
                   "tabindex": "0",
                 },
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
index e418a94d09..75ad5bc94f 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
@@ -20,12 +20,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria6517797861-10",
+              "aria-controls": "react-aria7352880336-10",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria6517797861-9",
+              "id": "react-aria7352880336-9",
               "role": "button",
               "tabindex": "0",
             },
@@ -476,9 +476,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria6517797861-9",
+                        "aria-labelledby": "react-aria7352880336-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria6517797861-10",
+                        "id": "react-aria7352880336-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -576,9 +576,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria6517797861-9",
+                      "aria-labelledby": "react-aria7352880336-9",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria6517797861-10",
+                      "id": "react-aria7352880336-10",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -633,12 +633,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria6517797861-10",
+                "aria-controls": "react-aria7352880336-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria6517797861-9",
+                "id": "react-aria7352880336-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -1122,12 +1122,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria6517797861-12",
+                "aria-controls": "react-aria7352880336-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria6517797861-11",
+                "id": "react-aria7352880336-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -1630,9 +1630,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria6517797861-11",
+                          "aria-labelledby": "react-aria7352880336-11",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria6517797861-12",
+                          "id": "react-aria7352880336-12",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -1730,9 +1730,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria6517797861-11",
+                        "aria-labelledby": "react-aria7352880336-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria6517797861-12",
+                        "id": "react-aria7352880336-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -1787,12 +1787,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria6517797861-12",
+                  "aria-controls": "react-aria7352880336-12",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria6517797861-11",
+                  "id": "react-aria7352880336-11",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -2357,12 +2357,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria6517797861-12",
+              "aria-controls": "react-aria7352880336-12",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria6517797861-11",
+              "id": "react-aria7352880336-11",
               "role": "button",
               "tabindex": "0",
             },
@@ -2865,9 +2865,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria6517797861-11",
+                        "aria-labelledby": "react-aria7352880336-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria6517797861-12",
+                        "id": "react-aria7352880336-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -2965,9 +2965,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria6517797861-11",
+                      "aria-labelledby": "react-aria7352880336-11",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria6517797861-12",
+                      "id": "react-aria7352880336-12",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -3022,12 +3022,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria6517797861-12",
+                "aria-controls": "react-aria7352880336-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria6517797861-11",
+                "id": "react-aria7352880336-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -3565,12 +3565,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria6517797861-10",
+                "aria-controls": "react-aria7352880336-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria6517797861-9",
+                "id": "react-aria7352880336-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -4021,9 +4021,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria6517797861-9",
+                          "aria-labelledby": "react-aria7352880336-9",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria6517797861-10",
+                          "id": "react-aria7352880336-10",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -4121,9 +4121,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria6517797861-9",
+                        "aria-labelledby": "react-aria7352880336-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria6517797861-10",
+                        "id": "react-aria7352880336-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -4178,12 +4178,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria6517797861-10",
+                  "aria-controls": "react-aria7352880336-10",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria6517797861-9",
+                  "id": "react-aria7352880336-9",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -4803,12 +4803,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria6517797861-4",
+              "aria-controls": "react-aria7352880336-4",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria6517797861-3",
+              "id": "react-aria7352880336-3",
               "role": "button",
               "tabindex": "0",
             },
@@ -5259,9 +5259,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria6517797861-3",
+                        "aria-labelledby": "react-aria7352880336-3",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria6517797861-4",
+                        "id": "react-aria7352880336-4",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -5359,9 +5359,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria6517797861-3",
+                      "aria-labelledby": "react-aria7352880336-3",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria6517797861-4",
+                      "id": "react-aria7352880336-4",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -5416,12 +5416,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria6517797861-4",
+                "aria-controls": "react-aria7352880336-4",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria6517797861-3",
+                "id": "react-aria7352880336-3",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -5905,12 +5905,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria6517797861-6",
+                "aria-controls": "react-aria7352880336-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria6517797861-5",
+                "id": "react-aria7352880336-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -6337,9 +6337,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria6517797861-5",
+                          "aria-labelledby": "react-aria7352880336-5",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria6517797861-6",
+                          "id": "react-aria7352880336-6",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -6437,9 +6437,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria6517797861-5",
+                        "aria-labelledby": "react-aria7352880336-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria6517797861-6",
+                        "id": "react-aria7352880336-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -6494,12 +6494,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria6517797861-6",
+                  "aria-controls": "react-aria7352880336-6",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria6517797861-5",
+                  "id": "react-aria7352880336-5",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -6988,12 +6988,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria6517797861-6",
+              "aria-controls": "react-aria7352880336-6",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria6517797861-5",
+              "id": "react-aria7352880336-5",
               "role": "button",
               "tabindex": "0",
             },
@@ -7420,9 +7420,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria6517797861-5",
+                        "aria-labelledby": "react-aria7352880336-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria6517797861-6",
+                        "id": "react-aria7352880336-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -7520,9 +7520,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria6517797861-5",
+                      "aria-labelledby": "react-aria7352880336-5",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria6517797861-6",
+                      "id": "react-aria7352880336-6",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -7577,12 +7577,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria6517797861-6",
+                "aria-controls": "react-aria7352880336-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria6517797861-5",
+                "id": "react-aria7352880336-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -8044,12 +8044,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria6517797861-4",
+                "aria-controls": "react-aria7352880336-4",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria6517797861-3",
+                "id": "react-aria7352880336-3",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -8500,9 +8500,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria6517797861-3",
+                          "aria-labelledby": "react-aria7352880336-3",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria6517797861-4",
+                          "id": "react-aria7352880336-4",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -8600,9 +8600,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria6517797861-3",
+                        "aria-labelledby": "react-aria7352880336-3",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria6517797861-4",
+                        "id": "react-aria7352880336-4",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -8657,12 +8657,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria6517797861-4",
+                  "aria-controls": "react-aria7352880336-4",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria6517797861-3",
+                  "id": "react-aria7352880336-3",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -13249,12 +13249,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria6517797861-8",
+              "aria-controls": "react-aria7352880336-8",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria6517797861-7",
+              "id": "react-aria7352880336-7",
               "role": "button",
               "tabindex": "0",
             },
@@ -13553,9 +13553,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria6517797861-7",
+                        "aria-labelledby": "react-aria7352880336-7",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria6517797861-8",
+                        "id": "react-aria7352880336-8",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -13653,9 +13653,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria6517797861-7",
+                      "aria-labelledby": "react-aria7352880336-7",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria6517797861-8",
+                      "id": "react-aria7352880336-8",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -13710,12 +13710,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria6517797861-8",
+                "aria-controls": "react-aria7352880336-8",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria6517797861-7",
+                "id": "react-aria7352880336-7",
                 "role": "button",
                 "tabindex": "0",
               },
diff --git a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
index 7f806c2124..e012f38790 100644
--- a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,17 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `Input should be work with content 1`
-] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with content 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[
-  `Input should be work with label 1`
-] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><label id=\\"react-aria6583427695-20\\" class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria6583427695-19\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-19\\" aria-labelledby=\\"react-aria6583427695-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with label 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><label class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria5273465019-19\\" id=\\"react-aria5273465019-20\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-19\\" aria-labelledby=\\"react-aria5273465019-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[
-  `Input should work with different sizes 1`
-] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different sizes 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[
-  `Input should work with different status 1`
-] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria6583427695-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different status 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5273465019-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
index f2a3c68345..83d610e7c3 100644
--- a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
@@ -1,5 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `InputPassword should render correctly 1`
-] = `"<div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"password\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria2967626641-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg viewBox=\\"0 0 24 24\\" width=\\"16\\" height=\\"16\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" class=\\"nextui-input-password-icon\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`InputPassword should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"password\\" id=\\"react-aria3720036547-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg class=\\"nextui-input-password-icon\\" fill=\\"none\\" height=\\"16\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" style=\\"color: currentColor;\\" viewBox=\\"0 0 24 24\\" width=\\"16\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
diff --git a/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap
index 2702be444e..88e6c44143 100644
--- a/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `Link should render correctly 1`
-] = `"<div><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-krgohU-color-secondary nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-byQUqd-color-success nextui-c-gUrcXm-iFdQKc-animated-true\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" class=\\"nextui-c-hdKjck nextui-link-icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg></a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-cSuHME-underline-true nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-eIcaMf-block-true nextui-c-gUrcXm-iFdQKc-animated-true nextui-c-gUrcXm-bhXeQK-cv\\">link</a></div>"`;
+exports[`Link should render correctly 1`] = `"<div><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-krgohU-color-secondary nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-byQUqd-color-success nextui-c-gUrcXm-iFdQKc-animated-true\\">link<svg class=\\"nextui-c-hdKjck nextui-link-icon\\" fill=\\"none\\" height=\\"1em\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg></a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-cSuHME-underline-true nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-eIcaMf-block-true nextui-c-gUrcXm-iFdQKc-animated-true nextui-c-gUrcXm-bhXeQK-cv\\">link</a></div>"`;
diff --git a/packages/react/src/loading/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/loading/__tests__/__snapshots__/index.test.tsx.snap
index 1f88601a1d..bcff71ee3a 100644
--- a/packages/react/src/loading/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/loading/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,31 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `Loading should render correctly 1`
-] = `"<div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div>"`;
+exports[`Loading should render correctly 1`] = `"<div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div>"`;
 
 exports[`Loading should render correctly 2`] = `[Function]`;
 
-exports[
-  `Loading should work with different colors 1`
-] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-primary nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-bdkpVZ-color-success nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-erOfwU-color-secondary nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-eVEedQ-color-warning nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-dGjLsC-color-error nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
+exports[`Loading should work with different colors 1`] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-primary nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-bdkpVZ-color-success nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-erOfwU-color-secondary nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-eVEedQ-color-warning nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-dGjLsC-color-error nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
 
 exports[`Loading should work with different colors 2`] = `[Function]`;
 
-exports[
-  `Loading should work with different sizes 1`
-] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-bboDzR-size-xs nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-eWttbs-size-sm nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-eWTJwO-size-lg nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-fYAaIu-size-xl nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
+exports[`Loading should work with different sizes 1`] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-bboDzR-size-xs nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-eWttbs-size-sm nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-eWTJwO-size-lg nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-fYAaIu-size-xl nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
 
 exports[`Loading should work with different sizes 2`] = `[Function]`;
 
-exports[
-  `Loading should work with different text colors 1`
-] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-jjYXKD-textColor-primary\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-lgCEhg-textColor-success\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-iQizOB-textColor-secondary\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fgUECR-textColor-warning\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-jYiaFD-textColor-error\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
+exports[`Loading should work with different text colors 1`] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-jjYXKD-textColor-primary\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-lgCEhg-textColor-success\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-iQizOB-textColor-secondary\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fgUECR-textColor-warning\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-jYiaFD-textColor-error\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
 
 exports[`Loading should work with different text colors 2`] = `[Function]`;
 
-exports[
-  `Loading should work with different types 1`
-] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><div class=\\"nextui-c-fpphdg nextui-c-fpphdg-fPWnWX-size-md nextui-spinner\\"><div class=\\"nextui-c-jTKaZN nextui-spinner-container\\" aria-label=\\"Loading\\"><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span></div></div></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-cGhcKQ-type-points nextui-c-chTLhx-dhbJvz-cv nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-points\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-heRREU-type-points-opacity nextui-c-chTLhx-dhbJvz-cv nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-points-opacity\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-mBJPy-type-gradient nextui-c-chTLhx-icvvata-css nextui-loading nextui-loading-gradient\\" aria-label=\\"Loading\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
+exports[`Loading should work with different types 1`] = `"<div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-jJwoeB-type-default nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-default\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><div class=\\"nextui-c-fpphdg nextui-c-fpphdg-fPWnWX-size-md nextui-spinner\\"><div aria-label=\\"Loading\\" class=\\"nextui-c-jTKaZN nextui-spinner-container\\"><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span><span class=\\"nextui-c-jdsqRm\\"></span></div></div></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-cGhcKQ-type-points nextui-c-chTLhx-dhbJvz-cv nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-points\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-heRREU-type-points-opacity nextui-c-chTLhx-dhbJvz-cv nextui-c-chTLhx-iPJLV-css nextui-loading nextui-loading-points-opacity\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div><div class=\\"nextui-c-bOoPrE nextui-c-bOoPrE-iWdsRK-color-default nextui-c-bOoPrE-fQoxSm-textColor-default\\"><span aria-label=\\"Loading\\" class=\\"nextui-c-chTLhx nextui-c-chTLhx-cPGQpm-size-md nextui-c-chTLhx-mBJPy-type-gradient nextui-c-chTLhx-icvvata-css nextui-loading nextui-loading-gradient\\"><i class=\\"_1\\"></i><i class=\\"_2\\"></i><i class=\\"_3\\"></i></span></div></div>"`;
 
 exports[`Loading should work with different types 2`] = `[Function]`;
diff --git a/packages/react/src/pagination/__tests__/__snapshots__/pagination.test.tsx.snap b/packages/react/src/pagination/__tests__/__snapshots__/pagination.test.tsx.snap
index 0b229afef4..b5bab73590 100644
--- a/packages/react/src/pagination/__tests__/__snapshots__/pagination.test.tsx.snap
+++ b/packages/react/src/pagination/__tests__/__snapshots__/pagination.test.tsx.snap
@@ -1,5 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `Pagination should render correctly 1`
-] = `"<nav class=\\"nextui-c-eKVPvf nextui-c-eKVPvf-iBFhCV-color-default nextui-c-eKVPvf-UECOZ-size-md nextui-c-eKVPvf-iTJsWG-borderWeight-normal nextui-c-eKVPvf-ibzOHM-onlyDots-false nextui-c-eKVPvf-bNGYLg-rounded-false nextui-c-eKVPvf-QbeIJ-noMargin-false nextui-pagination\\"><button class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-gZRAkC-disabled-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-animated nextui-pagination-item-disabled nextui-pagination-item-preserve-content\\" aria-label=\\"previous page button\\" tabindex=\\"-1\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\"><svg role=\\"presentation\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-eKuzCY nextui-c-eKuzCY-xROYZ-isPrev-true nextui-pagination-icon\\"><path d=\\"M15.5 19l-7-7 7-7\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></path></svg></span></button><div aria-hidden=\\"true\\" class=\\"nextui-c-cAbbLF nextui-c-cAbbLF-QIzBs-animated-true nextui-c-cAbbLF-ikgtVxo-css nextui-pagination-highlight nextui-pagination-highlight--active\\" style=\\"--nextui--paginationLeft: calc(var(--nextui--paginationSize) * 1 + 6px);\\"></div><button class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-dZWCtT-active-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-active nextui-pagination-item-animated\\" aria-label=\\"1 item active\\" tabindex=\\"0\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\">1</span></button><button class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-gZRAkC-disabled-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-animated nextui-pagination-item-disabled nextui-pagination-item-preserve-content\\" aria-label=\\"next page button\\" tabindex=\\"-1\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\"><svg role=\\"presentation\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-eKuzCY nextui-pagination-icon\\"><path d=\\"M15.5 19l-7-7 7-7\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></path></svg></span></button></nav>"`;
+exports[`Pagination should render correctly 1`] = `"<nav class=\\"nextui-c-eKVPvf nextui-c-eKVPvf-iBFhCV-color-default nextui-c-eKVPvf-UECOZ-size-md nextui-c-eKVPvf-iTJsWG-borderWeight-normal nextui-c-eKVPvf-ibzOHM-onlyDots-false nextui-c-eKVPvf-bNGYLg-rounded-false nextui-c-eKVPvf-QbeIJ-noMargin-false nextui-pagination\\"><button aria-label=\\"previous page button\\" class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-gZRAkC-disabled-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-animated nextui-pagination-item-disabled nextui-pagination-item-preserve-content\\" tabindex=\\"-1\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\"><svg class=\\"nextui-c-eKuzCY nextui-c-eKuzCY-xROYZ-isPrev-true nextui-pagination-icon\\" fill=\\"none\\" focusable=\\"false\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M15.5 19l-7-7 7-7\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\"></path></svg></span></button><div aria-hidden=\\"true\\" class=\\"nextui-c-cAbbLF nextui-c-cAbbLF-QIzBs-animated-true nextui-c-cAbbLF-ikgtVxo-css nextui-pagination-highlight nextui-pagination-highlight--active\\" style=\\"--nextui--paginationLeft: calc(var(--nextui--paginationSize) * 1 + 6px);\\"></div><button aria-label=\\"1 item active\\" class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-dZWCtT-active-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-active nextui-pagination-item-animated\\" tabindex=\\"0\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\">1</span></button><button aria-label=\\"next page button\\" class=\\"nextui-c-cUthvm nextui-c-huiNHE nextui-c-cUthvm-gZRAkC-disabled-true nextui-c-cUthvm-SWDEj-animated-true nextui-pagination-item nextui-pagination-item-animated nextui-pagination-item-disabled nextui-pagination-item-preserve-content\\" tabindex=\\"-1\\"><span class=\\"nextui-c-fItrmj nextui-pagination-item-content\\"><svg class=\\"nextui-c-eKuzCY nextui-pagination-icon\\" fill=\\"none\\" focusable=\\"false\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M15.5 19l-7-7 7-7\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\"></path></svg></span></button></nav>"`;
diff --git a/packages/react/src/snippet/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/snippet/__tests__/__snapshots__/index.test.tsx.snap
index e168a9b6ac..7c8692a90e 100644
--- a/packages/react/src/snippet/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/snippet/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,21 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `Snippet should render correctly 1`
-] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
+exports[`Snippet should render correctly 1`] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\" role=\\"button\\" tabindex=\\"-1\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg height=\\"18\\" viewBox=\\"0 0 24 24\\" width=\\"18\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
 
-exports[
-  `Snippet should work with custom symbol 1`
-] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-iglrZwL-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
+exports[`Snippet should work with custom symbol 1`] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-iglrZwL-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\" role=\\"button\\" tabindex=\\"-1\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg height=\\"18\\" viewBox=\\"0 0 24 24\\" width=\\"18\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
 
-exports[
-  `Snippet should work with custom symbol 2`
-] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-idPaJqJ-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
+exports[`Snippet should work with custom symbol 2`] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-idPaJqJ-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\" role=\\"button\\" tabindex=\\"-1\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg height=\\"18\\" viewBox=\\"0 0 24 24\\" width=\\"18\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
 
-exports[
-  `Snippet should work with different styles 1`
-] = `"<div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal nextui-c-eaXwRa-kyNZHt-filled-true\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-fFVmgV-color-secondary nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-ifKsbt-color-success nextui-c-eaXwRa-csvrTU-borderWeight-normal nextui-c-eaXwRa-kyNZHt-filled-true\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div></div>"`;
+exports[`Snippet should work with different styles 1`] = `"<div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\" role=\\"button\\" tabindex=\\"-1\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg height=\\"18\\" viewBox=\\"0 0 24 24\\" width=\\"18\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal nextui-c-eaXwRa-kyNZHt-filled-true\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\" role=\\"button\\" tabindex=\\"-1\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg height=\\"18\\" viewBox=\\"0 0 24 24\\" width=\\"18\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-fFVmgV-color-secondary nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\" role=\\"button\\" tabindex=\\"-1\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg height=\\"18\\" viewBox=\\"0 0 24 24\\" width=\\"18\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div><div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-ifKsbt-color-success nextui-c-eaXwRa-csvrTU-borderWeight-normal nextui-c-eaXwRa-kyNZHt-filled-true\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">yarn add @nextui-org/react</pre><div class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\" role=\\"button\\" tabindex=\\"-1\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg height=\\"18\\" viewBox=\\"0 0 24 24\\" width=\\"18\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div></div>"`;
 
-exports[
-  `Snippet should work with multi-line 1`
-] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">cd project</pre><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">now</pre><div role=\\"button\\" tabindex=\\"-1\\" class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" viewBox=\\"0 0 24 24\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
+exports[`Snippet should work with multi-line 1`] = `"<div class=\\"nextui-c-eaXwRa nextui-c-eaXwRa-kPoUFQ-color-default nextui-c-eaXwRa-csvrTU-borderWeight-normal\\"><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">cd project</pre><pre class=\\"nextui-c-eVaCKy nextui-c-eVaCKy-ijvHxtl-css nextui-snippet-pre\\">now</pre><div class=\\"nextui-c-ftJsHY nextui-c-ftJsHY-iPJLV-css nextui-tooltip-button\\" role=\\"button\\" tabindex=\\"-1\\"><button class=\\"nextui-c-iYtvzS nextui-c-huiNHE nextui-snippet-copy-button\\"><svg height=\\"18\\" viewBox=\\"0 0 24 24\\" width=\\"18\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"nextui-c-PJLV\\"><path d=\\"M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z\\"></path></svg></button></div></div>"`;
diff --git a/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
index 954364219c..3dde1c3adf 100644
--- a/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,29 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `Switch should render correctly 1`
-] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label>"`;
+exports[`Switch should render correctly 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label>"`;
 
-exports[
-  `Switch should render correctly with an icon 1`
-] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with an icon 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[
-  `Switch should render correctly with an iconOff 1`
-] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with an iconOff 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[
-  `Switch should render correctly with an iconOn 1`
-] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with an iconOn 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[
-  `Switch should render correctly with both icons on/off 1`
-] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with both icons on/off 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[
-  `Switch should work with different colors 1`
-] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-primary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-cMYjfR-color-secondary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-eTwznY-color-success nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-jTdYRZ-color-warning nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-dlOPhH-color-error nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
+exports[`Switch should work with different colors 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-primary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-cMYjfR-color-secondary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-eTwznY-color-success nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-jTdYRZ-color-warning nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-dlOPhH-color-error nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
 
-exports[
-  `Switch should work with different sizes 1`
-] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-dAsftq-size-xs nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-gPEQiI-size-sm nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-lcjiCZ-size-lg nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-elYIjz-size-xl nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input tabindex=\\"-1\\" type=\\"checkbox\\" class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\"><div role=\\"switch\\" tabindex=\\"0\\" aria-checked=\\"false\\" aria-disabled=\\"false\\" data-state=\\"unchecked\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
+exports[`Switch should work with different sizes 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-dAsftq-size-xs nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-gPEQiI-size-sm nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-lcjiCZ-size-lg nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-elYIjz-size-xl nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
diff --git a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
index d18344aa60..8c7159960f 100644
--- a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `Table should render a static table correctly with sorting 1`
-] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria3340202833-14\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria3340202833-14-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria3340202833-14-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria3340202833-14-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria3340202833-14-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria3340202833-14-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria4686365264-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria4686365264-15-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria4686365264-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria4686365264-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria4686365264-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria4686365264-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
 
-exports[
-  `Table should render correctly 1`
-] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria3340202833-1\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria3340202833-1-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria3340202833-1-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria3340202833-1-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria3340202833-1-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria3340202833-1-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria4686365264-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria4686365264-2-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria4686365264-2-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria4686365264-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria4686365264-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria4686365264-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
diff --git a/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap
index 93106276e9..755da8ea65 100644
--- a/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/text/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,29 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `Text should be able to specify the size of text 1`
-] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-iketldG-css\\">test-value</p>"`;
+exports[`Text should be able to specify the size of text 1`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-iigqkie-css\\">test-value</p>"`;
 
-exports[
-  `Text should be able to specify the size of text 2`
-] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ihhCyyy-css\\">test-value</p>"`;
+exports[`Text should be able to specify the size of text 2`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ihhCyyy-css\\">test-value</p>"`;
 
-exports[
-  `Text should render P element in the default 1`
-] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p>"`;
+exports[`Text should render P element in the default 1`] = `"<p class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</p>"`;
 
-exports[
-  `Text should render default color when type missing 1`
-] = `"<p type=\\"unknow\\" class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p>"`;
+exports[`Text should render default color when type missing 1`] = `"<p type=\\"unknow\\" class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</p>"`;
 
-exports[
-  `Text should work with different styles 1`
-] = `"<div><p class=\\"nextui-c-PJLV nextui-c-PJLV-ifLlHwE-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-igwcrxd-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-ikQkqxQ-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-ibKSEie-css\\">test-value</p></div>"`;
+exports[`Text should work with different styles 1`] = `"<div><p class=\\"nextui-c-PJLV nextui-c-PJLV-ijyaHDY-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-ivujhd-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-itIuvs-css\\">test-value</p><p class=\\"nextui-c-PJLV nextui-c-PJLV-ifgDYHW-css\\">test-value</p></div>"`;
 
-exports[
-  `Text the combined style should be rendered 1`
-] = `"<b class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\"><del class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</del></b>"`;
+exports[`Text the combined style should be rendered 1`] = `"<b class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\"><del class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</del></b>"`;
 
-exports[
-  `Text the specified element should be rendered 1`
-] = `"<div><h1 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h1><h2 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h2><h3 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h3><h4 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h4><h5 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h5><h6 class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</h6><p class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</p><small class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</small><span class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</span><del class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</del><i class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</i><em class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</em><b class=\\"nextui-c-PJLV nextui-c-PJLV-ihNwWiH-css\\">test-value</b></div>"`;
+exports[`Text the specified element should be rendered 1`] = `"<div><h1 class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</h1><h2 class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</h2><h3 class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</h3><h4 class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</h4><h5 class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</h5><h6 class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</h6><p class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</p><small class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</small><span class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</span><del class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</del><i class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</i><em class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</em><b class=\\"nextui-c-PJLV nextui-c-PJLV-ijnlmIz-css\\">test-value</b></div>"`;
diff --git a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
index 2aaac37223..99d63a9912 100644
--- a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[
-  `Textarea should render correctly 1`
-] = `"<div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"placeholder\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`Textarea should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea aria-multiline=\\"true\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"placeholder\\" type=\\"text\\" id=\\"react-aria5241321829-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
 
-exports[
-  `Textarea should work with different styles 1`
-] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria433601529-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Textarea should work with different styles 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5241321829-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5241321829-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;

From b8f4c656fa4e6fed697c526ac6ff2c02d23e2e3a Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 2 Jul 2022 18:33:53 -0300
Subject: [PATCH 013/106] fix(react-card): box shadow applied intead of box
 shadow filter on safari

---
 packages/react/src/card/card.stories.tsx |  8 ++++++++
 packages/react/src/card/card.styles.ts   | 12 ++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/react/src/card/card.stories.tsx b/packages/react/src/card/card.stories.tsx
index 72ab260297..cf937d15c2 100644
--- a/packages/react/src/card/card.stories.tsx
+++ b/packages/react/src/card/card.stories.tsx
@@ -24,6 +24,14 @@ export const Default = () => (
   </Card>
 );
 
+export const Hoverable = () => (
+  <Card isHoverable css={{w: "400px"}} variant="bordered">
+    <Card.Body css={{py: "$lg"}}>
+      <Text>A basic card</Text>
+    </Card.Body>
+  </Card>
+);
+
 export const Variants = () => (
   <Grid.Container gap={2}>
     <Grid xs={4}>
diff --git a/packages/react/src/card/card.styles.ts b/packages/react/src/card/card.styles.ts
index e79c07a1aa..bc7156c7c9 100644
--- a/packages/react/src/card/card.styles.ts
+++ b/packages/react/src/card/card.styles.ts
@@ -55,6 +55,10 @@ export const StyledCard = styled(
         },
         shadow: {
           dropShadow: "$lg",
+          "@safari": {
+            boxShadow: "$lg",
+            dropShadow: "none",
+          },
         },
         bordered: {
           borderStyle: "solid",
@@ -99,6 +103,10 @@ export const StyledCard = styled(
       isHovered: {
         true: {
           dropShadow: "$lg",
+          "@safari": {
+            boxShadow: "$lg",
+            dropShadow: "none",
+          },
         },
       },
     },
@@ -125,6 +133,10 @@ export const StyledCard = styled(
         variant: "shadow",
         css: {
           dropShadow: "$xl",
+          "@safari": {
+            boxShadow: "$xl",
+            dropShadow: "none",
+          },
         },
       },
     ],

From bf8af946c61ef2e4e5ae40ca1909d7635eaed2aa Mon Sep 17 00:00:00 2001
From: Artem Shteltser <artem@karmanow.com>
Date: Sun, 3 Jul 2022 01:16:24 +0300
Subject: [PATCH 014/106] fix zIndex for dropdown item

---
 packages/react/src/dropdown/dropdown.styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/dropdown/dropdown.styles.ts b/packages/react/src/dropdown/dropdown.styles.ts
index 8015d45f05..685bf03f83 100644
--- a/packages/react/src/dropdown/dropdown.styles.ts
+++ b/packages/react/src/dropdown/dropdown.styles.ts
@@ -209,6 +209,7 @@ export const StyledDropdownItem = styled(
         true: {
           bg: '$$dropdownItemHoverBackground',
           color: '$$dropdownItemHoverTextColor',
+          zIndex: 1,
           [`& ${StyledDropdownItemKbd}`]: {
             color: '$$dropdownItemHoverTextColor',
             borderColor: '$$dropdownItemHoverBorderColor'

From 6a77bad19fa586ca837532921da3f95fdec45236 Mon Sep 17 00:00:00 2001
From: danielsimao <rui.daniel.simao@gmail.com>
Date: Fri, 24 Jun 2022 10:30:39 +0100
Subject: [PATCH 015/106] feat(react-container): add forwardRef

---
 packages/react/src/container/container.tsx | 136 ++++++++++++---------
 1 file changed, 77 insertions(+), 59 deletions(-)

diff --git a/packages/react/src/container/container.tsx b/packages/react/src/container/container.tsx
index 7d9af72569..3c4b6bddcb 100644
--- a/packages/react/src/container/container.tsx
+++ b/packages/react/src/container/container.tsx
@@ -1,7 +1,14 @@
-import React, {useMemo} from "react";
+import React, { useMemo } from "react";
 
-import {CSS} from "../theme/stitches.config";
-import {Wrap, Display, Justify, Direction, AlignItems, AlignContent} from "../utils/prop-types";
+import { CSS } from "../theme/stitches.config";
+import {
+  Wrap,
+  Display,
+  Justify,
+  Direction,
+  AlignItems,
+  AlignContent,
+} from "../utils/prop-types";
 
 import StyledContainer from "./container.styles";
 
@@ -42,62 +49,73 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
 export type ContainerProps = Props & typeof defaultProps & NativeAttrs;
 
-const Container: React.FC<React.PropsWithChildren<ContainerProps>> = ({
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  wrap,
-  gap,
-  as,
-  display,
-  justify,
-  direction,
-  alignItems,
-  alignContent,
-  children,
-  responsive,
-  fluid,
-  css,
-  ...props
-}) => {
-  const gapUnit = useMemo(() => {
-    return `calc(${gap} * $space$sm)`;
-  }, [gap]);
-
-  const getMaxWidth = () => {
-    if (xs) return "$breakpoints$xs";
-    if (sm) return "$breakpoints$sm";
-    if (md) return "$breakpoints$md";
-    if (lg) return "$breakpoints$lg";
-    if (xl) return "$breakpoints$xl";
-
-    return "";
-  };
-
-  return (
-    <StyledContainer
-      as={as}
-      css={{
-        px: gapUnit,
-        maxWidth: getMaxWidth(),
-        alignItems,
-        alignContent,
-        flexWrap: wrap,
-        display: display,
-        justifyContent: justify,
-        flexDirection: direction,
-        ...(css as any),
-      }}
-      fluid={fluid}
-      responsive={responsive}
-      {...props}
-    >
-      {children}
-    </StyledContainer>
-  );
-};
+const Container = React.forwardRef<
+  HTMLElement,
+  React.PropsWithChildren<ContainerProps>
+>(
+  (
+    {
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      wrap,
+      gap,
+      as,
+      display,
+      justify,
+      direction,
+      alignItems,
+      alignContent,
+      children,
+      responsive,
+      fluid,
+      css,
+      ...props
+    },
+    ref
+  ) => {
+    const gapUnit = useMemo(() => {
+      return `calc(${gap} * $space$sm)`;
+    }, [gap]);
+
+    const getMaxWidth = () => {
+      if (xs) return "$breakpoints$xs";
+      if (sm) return "$breakpoints$sm";
+      if (md) return "$breakpoints$md";
+      if (lg) return "$breakpoints$lg";
+      if (xl) return "$breakpoints$xl";
+
+      return "";
+    };
+
+    return (
+      <StyledContainer
+        ref={ref}
+        as={as}
+        css={{
+          px: gapUnit,
+          maxWidth: getMaxWidth(),
+          alignItems,
+          alignContent,
+          flexWrap: wrap,
+          display: display,
+          justifyContent: justify,
+          flexDirection: direction,
+          ...(css as any),
+        }}
+        fluid={fluid}
+        responsive={responsive}
+        {...props}
+      >
+        {children}
+      </StyledContainer>
+    );
+  }
+);
+
+Container.displayName = "NextUI.Container";
 
 Container.toString = () => ".nextui-container";
 

From 7ab40ed210c0f6467ef6e2e14f883f310f781f8d Mon Sep 17 00:00:00 2001
From: danielsimao <rui.daniel.simao@gmail.com>
Date: Tue, 28 Jun 2022 21:11:35 +0100
Subject: [PATCH 016/106] fix(react-container): code review

---
 packages/react/src/container/container.tsx | 124 ++++++++++-----------
 1 file changed, 62 insertions(+), 62 deletions(-)

diff --git a/packages/react/src/container/container.tsx b/packages/react/src/container/container.tsx
index 3c4b6bddcb..7c110fd6c5 100644
--- a/packages/react/src/container/container.tsx
+++ b/packages/react/src/container/container.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 
 import { CSS } from "../theme/stitches.config";
+import { useDOMRef } from "../utils/dom";
 import {
   Wrap,
   Display,
@@ -52,68 +53,67 @@ export type ContainerProps = Props & typeof defaultProps & NativeAttrs;
 const Container = React.forwardRef<
   HTMLElement,
   React.PropsWithChildren<ContainerProps>
->(
-  (
-    {
-      xs,
-      sm,
-      md,
-      lg,
-      xl,
-      wrap,
-      gap,
-      as,
-      display,
-      justify,
-      direction,
-      alignItems,
-      alignContent,
-      children,
-      responsive,
-      fluid,
-      css,
-      ...props
-    },
-    ref
-  ) => {
-    const gapUnit = useMemo(() => {
-      return `calc(${gap} * $space$sm)`;
-    }, [gap]);
-
-    const getMaxWidth = () => {
-      if (xs) return "$breakpoints$xs";
-      if (sm) return "$breakpoints$sm";
-      if (md) return "$breakpoints$md";
-      if (lg) return "$breakpoints$lg";
-      if (xl) return "$breakpoints$xl";
-
-      return "";
-    };
-
-    return (
-      <StyledContainer
-        ref={ref}
-        as={as}
-        css={{
-          px: gapUnit,
-          maxWidth: getMaxWidth(),
-          alignItems,
-          alignContent,
-          flexWrap: wrap,
-          display: display,
-          justifyContent: justify,
-          flexDirection: direction,
-          ...(css as any),
-        }}
-        fluid={fluid}
-        responsive={responsive}
-        {...props}
-      >
-        {children}
-      </StyledContainer>
-    );
-  }
-);
+>((containerProps, ref) => {
+  const {
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    wrap,
+    gap,
+    as,
+    display,
+    justify,
+    direction,
+    alignItems,
+    alignContent,
+    children,
+    responsive,
+    fluid,
+    css,
+    ...otherProps
+  } = containerProps;
+
+  const domRef = useDOMRef(ref);
+
+  const gapUnit = useMemo(() => {
+    return `calc(${gap} * $space$sm)`;
+  }, [gap]);
+
+  const getMaxWidth = () => {
+    if (xs) return "$breakpoints$xs";
+    if (sm) return "$breakpoints$sm";
+    if (md) return "$breakpoints$md";
+    if (lg) return "$breakpoints$lg";
+    if (xl) return "$breakpoints$xl";
+
+    return "";
+  };
+
+  return (
+    <StyledContainer
+      ref={domRef}
+      as={as}
+      css={{
+        px: gapUnit,
+        maxWidth: getMaxWidth(),
+        alignItems,
+        alignContent,
+        flexWrap: wrap,
+        display: display,
+        justifyContent: justify,
+        flexDirection: direction,
+        ...(css as any),
+      }}
+      fluid={fluid}
+      responsive={responsive}
+      {...otherProps}
+    >
+      {children}
+    </StyledContainer>
+  );
+});
 
 Container.displayName = "NextUI.Container";
 

From 4a607057c16314d105aa532ad5bef758e834e06a Mon Sep 17 00:00:00 2001
From: danielsimao <rui.daniel.simao@gmail.com>
Date: Wed, 22 Jun 2022 15:31:25 +0100
Subject: [PATCH 017/106] fix(react-table): react-stately props

---
 packages/react/src/table/table.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react/src/table/table.tsx b/packages/react/src/table/table.tsx
index 10832c294e..ed1a6b0fa2 100644
--- a/packages/react/src/table/table.tsx
+++ b/packages/react/src/table/table.tsx
@@ -68,6 +68,8 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
       borderWeight,
       bordered,
       containerCss,
+      onSelectionChange,
+      onSortChange,
       ...props
     } = tableProps;
 
@@ -79,6 +81,8 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
 
     const state = useTableState({
       ...tableProps,
+      onSelectionChange,
+      onSortChange,
       children: withoutPaginationChildren,
       showSelectionCheckboxes:
         tableProps.showSelectionCheckboxes !== undefined

From 77626ef4ad682d8ac2f2e237f1a9f587c8afd485 Mon Sep 17 00:00:00 2001
From: danielsimao <rui.daniel.simao@gmail.com>
Date: Thu, 23 Jun 2022 11:35:40 +0100
Subject: [PATCH 018/106] fix(react-table): code review

---
 packages/react/src/table/table.tsx     | 94 +++++++++++++++-----------
 packages/react/src/utils/prop-types.ts | 71 +++++++++++--------
 2 files changed, 99 insertions(+), 66 deletions(-)

diff --git a/packages/react/src/table/table.tsx b/packages/react/src/table/table.tsx
index ed1a6b0fa2..dda1e5bdce 100644
--- a/packages/react/src/table/table.tsx
+++ b/packages/react/src/table/table.tsx
@@ -1,12 +1,20 @@
-import React, {useImperativeHandle, useRef, RefAttributes, PropsWithoutRef} from "react";
-import {useTable} from "@react-aria/table";
-import {useTableState, TableStateProps} from "@react-stately/table";
-import {SelectionMode, SelectionBehavior, CollectionChildren} from "@react-types/shared";
-
-import {Spacer} from "../index";
-import {CSS} from "../theme/stitches.config";
-import {pickSingleChild} from "../utils/collections";
-import {excludedTableProps} from "../utils/prop-types";
+import React, {
+  useImperativeHandle,
+  useRef,
+  RefAttributes,
+  PropsWithoutRef,
+} from "react";
+import { useTable } from "@react-aria/table";
+import { useTableState, TableStateProps } from "@react-stately/table";
+import {
+  SelectionMode,
+  SelectionBehavior,
+  CollectionChildren,
+} from "@react-types/shared";
+
+import { Spacer } from "../index";
+import { CSS } from "../theme/stitches.config";
+import { pickSingleChild } from "../utils/collections";
 import withDefaults from "../utils/with-defaults";
 import clsx from "../utils/clsx";
 
@@ -30,8 +38,8 @@ import {
   TableVariantsProps,
   TableContainerVariantsProps,
 } from "./table.styles";
-import TableContext, {TableConfig} from "./table-context";
-import {isInfinityScroll, hasPaginationChild} from "./utils";
+import TableContext, { TableConfig } from "./table-context";
+import { isInfinityScroll, hasPaginationChild } from "./utils";
 
 interface Props<T> extends TableStateProps<T> {
   selectionMode?: SelectionMode;
@@ -41,12 +49,15 @@ interface Props<T> extends TableStateProps<T> {
   as?: keyof JSX.IntrinsicElements;
 }
 
-type NativeAttrs = Omit<React.TableHTMLAttributes<unknown>, keyof Props<object>>;
+type NativeAttrs = Omit<
+  React.TableHTMLAttributes<unknown>,
+  keyof Props<object>
+>;
 
 export type TableProps<T = object> = Props<T> &
   NativeAttrs &
   Omit<TableVariantsProps, "isMultiple" | "shadow" | "hasPagination"> &
-  TableContainerVariantsProps & {css?: CSS; containerCss?: CSS};
+  TableContainerVariantsProps & { css?: CSS; containerCss?: CSS };
 
 const defaultProps = {
   animated: true,
@@ -58,6 +69,7 @@ const defaultProps = {
 const Table = React.forwardRef<HTMLTableElement, TableProps>(
   (tableProps, ref: React.Ref<HTMLTableElement | null>) => {
     const {
+      css,
       selectionMode,
       selectionBehavior,
       hideLoading,
@@ -67,22 +79,23 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
       animated,
       borderWeight,
       bordered,
+      hoverable,
+      sticked,
       containerCss,
-      onSelectionChange,
-      onSortChange,
-      ...props
+      className,
     } = tableProps;
 
     const [withoutPaginationChildren, paginationChildren] = pickSingleChild<
       CollectionChildren<any>
     >(children, TablePagination);
 
-    const {hasPagination, rowsPerPage} = hasPaginationChild(children, TablePagination);
+    const { hasPagination, rowsPerPage } = hasPaginationChild(
+      children,
+      TablePagination
+    );
 
     const state = useTableState({
       ...tableProps,
-      onSelectionChange,
-      onSortChange,
       children: withoutPaginationChildren,
       showSelectionCheckboxes:
         tableProps.showSelectionCheckboxes !== undefined
@@ -90,19 +103,11 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
           : selectionMode === "multiple" && selectionBehavior !== "replace",
     });
 
-    // clean table props
-    Object.keys(props).forEach((propNameKey: any) => {
-      if (excludedTableProps.indexOf(propNameKey) > -1) {
-        // @ts-ignored
-        delete props[propNameKey];
-      }
-    });
-
     const tableRef = useRef<HTMLTableElement | null>(null);
 
     useImperativeHandle(ref, () => tableRef?.current);
 
-    const {collection} = state;
+    const { collection } = state;
     const {
       gridProps,
     }: {
@@ -124,24 +129,28 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
           borderWeight={borderWeight}
           bordered={bordered}
           className="nextui-table-container"
-          css={{...(containerCss as any)}}
+          css={{ ...(containerCss as any) }}
           shadow={shadow}
         >
           <StyledTable
             ref={tableRef}
             animated={animated}
-            className={clsx("nextui-table", props.className)}
+            className={clsx("nextui-table", className)}
             color={color}
+            css={css}
             hasPagination={hasPagination}
-            hoverable={selectionMode !== "none" || props.hoverable}
+            hoverable={selectionMode !== "none" || hoverable}
             isMultiple={selectionMode === "multiple"}
             shadow={shadow}
             {...gridProps}
-            {...props}
           >
             <TableRowGroup as="thead" isFixed={isInfinityScroll(collection)}>
               {collection.headerRows.map((headerRow) => (
-                <TableHeaderRow key={headerRow?.key} item={headerRow} state={state}>
+                <TableHeaderRow
+                  key={headerRow?.key}
+                  item={headerRow}
+                  state={state}
+                >
                   {[...headerRow.childNodes].map((column) =>
                     column?.props?.isSelectionCell ? (
                       <TableSelectAllCheckbox
@@ -158,11 +167,13 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
                         column={column}
                         state={state}
                       />
-                    ),
+                    )
                   )}
                 </TableHeaderRow>
               ))}
-              {!props.sticked && <Spacer as="tr" className="nextui-table-hidden-row" y={0.4} />}
+              {!sticked && (
+                <Spacer as="tr" className="nextui-table-hidden-row" y={0.4} />
+              )}
             </TableRowGroup>
             <TableBody
               animated={animated}
@@ -177,7 +188,11 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
               <TableFooter>
                 <Spacer as="tr" className="nextui-table-hidden-row" y={0.6} />
                 <tr role="row">
-                  <th colSpan={collection.columnCount} role="columnheader" tabIndex={-1}>
+                  <th
+                    colSpan={collection.columnCount}
+                    role="columnheader"
+                    tabIndex={-1}
+                  >
                     {paginationChildren}
                   </th>
                 </tr>
@@ -187,7 +202,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
         </StyledTableContainer>
       </TableContext.Provider>
     );
-  },
+  }
 );
 
 type TableComponent<T, P = {}> = React.ForwardRefExoticComponent<
@@ -204,4 +219,7 @@ type TableComponent<T, P = {}> = React.ForwardRefExoticComponent<
 Table.displayName = "NextUI.Table";
 Table.toString = () => ".nextui-table";
 
-export default withDefaults(Table, defaultProps) as TableComponent<HTMLTableElement, TableProps>;
+export default withDefaults(Table, defaultProps) as TableComponent<
+  HTMLTableElement,
+  TableProps
+>;
diff --git a/packages/react/src/utils/prop-types.ts b/packages/react/src/utils/prop-types.ts
index e02d668d44..9e428e8b7d 100644
--- a/packages/react/src/utils/prop-types.ts
+++ b/packages/react/src/utils/prop-types.ts
@@ -1,4 +1,4 @@
-import {ElementType} from "react";
+import { ElementType } from "react";
 
 export const tuple = <T extends string[]>(...args: T) => args;
 
@@ -11,10 +11,17 @@ export const normalColors = tuple(
   "success",
   "warning",
   "error",
-  "gradient",
+  "gradient"
 );
 
-export const simpleColors = tuple("default", "primary", "secondary", "success", "warning", "error");
+export const simpleColors = tuple(
+  "default",
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "error"
+);
 
 export const extendedColors = tuple(
   "default",
@@ -24,7 +31,7 @@ export const extendedColors = tuple(
   "warning",
   "error",
   "invert",
-  "gradient",
+  "gradient"
 );
 
 export const extendedColorsNoGradient = tuple(
@@ -34,7 +41,7 @@ export const extendedColorsNoGradient = tuple(
   "success",
   "warning",
   "error",
-  "invert",
+  "invert"
 );
 
 export const extraColors = tuple(
@@ -50,12 +57,24 @@ export const extraColors = tuple(
   "purple",
   "violet",
   "gradient",
-  "cyan",
+  "cyan"
 );
 
-export const normalLoaders = tuple("default", "points", "points-opacity", "gradient", "spinner");
+export const normalLoaders = tuple(
+  "default",
+  "points",
+  "points-opacity",
+  "gradient",
+  "spinner"
+);
 
-export const normalWeights = tuple("light", "normal", "bold", "extrabold", "black");
+export const normalWeights = tuple(
+  "light",
+  "normal",
+  "bold",
+  "extrabold",
+  "black"
+);
 
 export const textWeights = tuple(
   /* Keyword values */
@@ -68,7 +87,7 @@ export const textWeights = tuple(
   "inherit",
   "initial",
   "revert",
-  "unset",
+  "unset"
 );
 
 export const textTransforms = tuple(
@@ -83,7 +102,7 @@ export const textTransforms = tuple(
   "inherit",
   "initial",
   "revert",
-  "unset",
+  "unset"
 );
 
 const copyTypes = tuple("default", "slient", "prevent");
@@ -102,7 +121,7 @@ const placement = tuple(
   "bottomEnd",
   "right",
   "rightStart",
-  "rightEnd",
+  "rightEnd"
 );
 
 const position = tuple(
@@ -115,7 +134,7 @@ const position = tuple(
   "inherit",
   "initial",
   "revert",
-  "unset",
+  "unset"
 );
 
 const objectFit = tuple(
@@ -128,7 +147,7 @@ const objectFit = tuple(
   "inherit",
   "initial",
   "revert",
-  "unset",
+  "unset"
 );
 
 const dividerAlign = tuple("start", "center", "end", "left", "right");
@@ -139,10 +158,16 @@ const justify = tuple(
   "flex-end",
   "space-between",
   "space-around",
-  "space-evenly",
+  "space-evenly"
 );
 
-const alignItems = tuple("flex-start", "flex-end", "center", "stretch", "baseline");
+const alignItems = tuple(
+  "flex-start",
+  "flex-end",
+  "center",
+  "stretch",
+  "baseline"
+);
 
 const alignContent = tuple(
   "stretch",
@@ -150,7 +175,7 @@ const alignContent = tuple(
   "flex-start",
   "flex-end",
   "space-between",
-  "space-around",
+  "space-around"
 );
 
 const direction = tuple("row", "row-reverse", "column", "column-reverse");
@@ -164,7 +189,7 @@ const display = tuple(
   "inline",
   "inline-block",
   "inline-flex",
-  "inline-grid",
+  "inline-grid"
 );
 
 const contentPosition = tuple("left", "right");
@@ -184,17 +209,7 @@ export const excludedInputPropsForTextarea = tuple(
   "contentRightStyling",
   "onContentClick",
   "onClearClick",
-  "css",
-);
-
-export const excludedTableProps = tuple(
-  "items",
-  "disabledKeys",
-  "allowDuplicateSelectionEvents",
-  "disallowEmptySelection",
-  "defaultSelectedKeys",
-  "sortDescriptor",
-  "onSortChange",
+  "css"
 );
 
 const selectionBehavior = tuple("toggle", "replace");

From c0fa4f5e7b60b604ff7aac3db1652b2814c20613 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 3 Jul 2022 09:52:12 -0300
Subject: [PATCH 019/106] fix(react): apply new format to table file

---
 packages/react/src/table/table.tsx     | 70 ++++++++------------------
 packages/react/src/utils/prop-types.ts | 61 +++++++---------------
 2 files changed, 39 insertions(+), 92 deletions(-)

diff --git a/packages/react/src/table/table.tsx b/packages/react/src/table/table.tsx
index dda1e5bdce..8642b2d5f8 100644
--- a/packages/react/src/table/table.tsx
+++ b/packages/react/src/table/table.tsx
@@ -1,20 +1,11 @@
-import React, {
-  useImperativeHandle,
-  useRef,
-  RefAttributes,
-  PropsWithoutRef,
-} from "react";
-import { useTable } from "@react-aria/table";
-import { useTableState, TableStateProps } from "@react-stately/table";
-import {
-  SelectionMode,
-  SelectionBehavior,
-  CollectionChildren,
-} from "@react-types/shared";
-
-import { Spacer } from "../index";
-import { CSS } from "../theme/stitches.config";
-import { pickSingleChild } from "../utils/collections";
+import React, {useImperativeHandle, useRef, RefAttributes, PropsWithoutRef} from "react";
+import {useTable} from "@react-aria/table";
+import {useTableState, TableStateProps} from "@react-stately/table";
+import {SelectionMode, SelectionBehavior, CollectionChildren} from "@react-types/shared";
+
+import {Spacer} from "../index";
+import {CSS} from "../theme/stitches.config";
+import {pickSingleChild} from "../utils/collections";
 import withDefaults from "../utils/with-defaults";
 import clsx from "../utils/clsx";
 
@@ -38,8 +29,8 @@ import {
   TableVariantsProps,
   TableContainerVariantsProps,
 } from "./table.styles";
-import TableContext, { TableConfig } from "./table-context";
-import { isInfinityScroll, hasPaginationChild } from "./utils";
+import TableContext, {TableConfig} from "./table-context";
+import {isInfinityScroll, hasPaginationChild} from "./utils";
 
 interface Props<T> extends TableStateProps<T> {
   selectionMode?: SelectionMode;
@@ -49,15 +40,12 @@ interface Props<T> extends TableStateProps<T> {
   as?: keyof JSX.IntrinsicElements;
 }
 
-type NativeAttrs = Omit<
-  React.TableHTMLAttributes<unknown>,
-  keyof Props<object>
->;
+type NativeAttrs = Omit<React.TableHTMLAttributes<unknown>, keyof Props<object>>;
 
 export type TableProps<T = object> = Props<T> &
   NativeAttrs &
   Omit<TableVariantsProps, "isMultiple" | "shadow" | "hasPagination"> &
-  TableContainerVariantsProps & { css?: CSS; containerCss?: CSS };
+  TableContainerVariantsProps & {css?: CSS; containerCss?: CSS};
 
 const defaultProps = {
   animated: true,
@@ -89,10 +77,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
       CollectionChildren<any>
     >(children, TablePagination);
 
-    const { hasPagination, rowsPerPage } = hasPaginationChild(
-      children,
-      TablePagination
-    );
+    const {hasPagination, rowsPerPage} = hasPaginationChild(children, TablePagination);
 
     const state = useTableState({
       ...tableProps,
@@ -107,7 +92,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
 
     useImperativeHandle(ref, () => tableRef?.current);
 
-    const { collection } = state;
+    const {collection} = state;
     const {
       gridProps,
     }: {
@@ -129,7 +114,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
           borderWeight={borderWeight}
           bordered={bordered}
           className="nextui-table-container"
-          css={{ ...(containerCss as any) }}
+          css={{...(containerCss as any)}}
           shadow={shadow}
         >
           <StyledTable
@@ -146,11 +131,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
           >
             <TableRowGroup as="thead" isFixed={isInfinityScroll(collection)}>
               {collection.headerRows.map((headerRow) => (
-                <TableHeaderRow
-                  key={headerRow?.key}
-                  item={headerRow}
-                  state={state}
-                >
+                <TableHeaderRow key={headerRow?.key} item={headerRow} state={state}>
                   {[...headerRow.childNodes].map((column) =>
                     column?.props?.isSelectionCell ? (
                       <TableSelectAllCheckbox
@@ -167,13 +148,11 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
                         column={column}
                         state={state}
                       />
-                    )
+                    ),
                   )}
                 </TableHeaderRow>
               ))}
-              {!sticked && (
-                <Spacer as="tr" className="nextui-table-hidden-row" y={0.4} />
-              )}
+              {!sticked && <Spacer as="tr" className="nextui-table-hidden-row" y={0.4} />}
             </TableRowGroup>
             <TableBody
               animated={animated}
@@ -188,11 +167,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
               <TableFooter>
                 <Spacer as="tr" className="nextui-table-hidden-row" y={0.6} />
                 <tr role="row">
-                  <th
-                    colSpan={collection.columnCount}
-                    role="columnheader"
-                    tabIndex={-1}
-                  >
+                  <th colSpan={collection.columnCount} role="columnheader" tabIndex={-1}>
                     {paginationChildren}
                   </th>
                 </tr>
@@ -202,7 +177,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
         </StyledTableContainer>
       </TableContext.Provider>
     );
-  }
+  },
 );
 
 type TableComponent<T, P = {}> = React.ForwardRefExoticComponent<
@@ -219,7 +194,4 @@ type TableComponent<T, P = {}> = React.ForwardRefExoticComponent<
 Table.displayName = "NextUI.Table";
 Table.toString = () => ".nextui-table";
 
-export default withDefaults(Table, defaultProps) as TableComponent<
-  HTMLTableElement,
-  TableProps
->;
+export default withDefaults(Table, defaultProps) as TableComponent<HTMLTableElement, TableProps>;
diff --git a/packages/react/src/utils/prop-types.ts b/packages/react/src/utils/prop-types.ts
index 9e428e8b7d..faeb558e03 100644
--- a/packages/react/src/utils/prop-types.ts
+++ b/packages/react/src/utils/prop-types.ts
@@ -1,4 +1,4 @@
-import { ElementType } from "react";
+import {ElementType} from "react";
 
 export const tuple = <T extends string[]>(...args: T) => args;
 
@@ -11,17 +11,10 @@ export const normalColors = tuple(
   "success",
   "warning",
   "error",
-  "gradient"
+  "gradient",
 );
 
-export const simpleColors = tuple(
-  "default",
-  "primary",
-  "secondary",
-  "success",
-  "warning",
-  "error"
-);
+export const simpleColors = tuple("default", "primary", "secondary", "success", "warning", "error");
 
 export const extendedColors = tuple(
   "default",
@@ -31,7 +24,7 @@ export const extendedColors = tuple(
   "warning",
   "error",
   "invert",
-  "gradient"
+  "gradient",
 );
 
 export const extendedColorsNoGradient = tuple(
@@ -41,7 +34,7 @@ export const extendedColorsNoGradient = tuple(
   "success",
   "warning",
   "error",
-  "invert"
+  "invert",
 );
 
 export const extraColors = tuple(
@@ -57,24 +50,12 @@ export const extraColors = tuple(
   "purple",
   "violet",
   "gradient",
-  "cyan"
+  "cyan",
 );
 
-export const normalLoaders = tuple(
-  "default",
-  "points",
-  "points-opacity",
-  "gradient",
-  "spinner"
-);
+export const normalLoaders = tuple("default", "points", "points-opacity", "gradient", "spinner");
 
-export const normalWeights = tuple(
-  "light",
-  "normal",
-  "bold",
-  "extrabold",
-  "black"
-);
+export const normalWeights = tuple("light", "normal", "bold", "extrabold", "black");
 
 export const textWeights = tuple(
   /* Keyword values */
@@ -87,7 +68,7 @@ export const textWeights = tuple(
   "inherit",
   "initial",
   "revert",
-  "unset"
+  "unset",
 );
 
 export const textTransforms = tuple(
@@ -102,7 +83,7 @@ export const textTransforms = tuple(
   "inherit",
   "initial",
   "revert",
-  "unset"
+  "unset",
 );
 
 const copyTypes = tuple("default", "slient", "prevent");
@@ -121,7 +102,7 @@ const placement = tuple(
   "bottomEnd",
   "right",
   "rightStart",
-  "rightEnd"
+  "rightEnd",
 );
 
 const position = tuple(
@@ -134,7 +115,7 @@ const position = tuple(
   "inherit",
   "initial",
   "revert",
-  "unset"
+  "unset",
 );
 
 const objectFit = tuple(
@@ -147,7 +128,7 @@ const objectFit = tuple(
   "inherit",
   "initial",
   "revert",
-  "unset"
+  "unset",
 );
 
 const dividerAlign = tuple("start", "center", "end", "left", "right");
@@ -158,16 +139,10 @@ const justify = tuple(
   "flex-end",
   "space-between",
   "space-around",
-  "space-evenly"
+  "space-evenly",
 );
 
-const alignItems = tuple(
-  "flex-start",
-  "flex-end",
-  "center",
-  "stretch",
-  "baseline"
-);
+const alignItems = tuple("flex-start", "flex-end", "center", "stretch", "baseline");
 
 const alignContent = tuple(
   "stretch",
@@ -175,7 +150,7 @@ const alignContent = tuple(
   "flex-start",
   "flex-end",
   "space-between",
-  "space-around"
+  "space-around",
 );
 
 const direction = tuple("row", "row-reverse", "column", "column-reverse");
@@ -189,7 +164,7 @@ const display = tuple(
   "inline",
   "inline-block",
   "inline-flex",
-  "inline-grid"
+  "inline-grid",
 );
 
 const contentPosition = tuple("left", "right");
@@ -209,7 +184,7 @@ export const excludedInputPropsForTextarea = tuple(
   "contentRightStyling",
   "onContentClick",
   "onClearClick",
-  "css"
+  "css",
 );
 
 const selectionBehavior = tuple("toggle", "replace");

From 9e6361fc68bb6b5b62cf3115e97d23854469e28d Mon Sep 17 00:00:00 2001
From: Artem Shteltser <artem@karmanow.com>
Date: Sun, 3 Jul 2022 17:35:08 +0300
Subject: [PATCH 020/106] change zIndex

---
 packages/react/src/dropdown/dropdown.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/dropdown/dropdown.styles.ts b/packages/react/src/dropdown/dropdown.styles.ts
index 685bf03f83..c5ea895d1e 100644
--- a/packages/react/src/dropdown/dropdown.styles.ts
+++ b/packages/react/src/dropdown/dropdown.styles.ts
@@ -209,7 +209,7 @@ export const StyledDropdownItem = styled(
         true: {
           bg: '$$dropdownItemHoverBackground',
           color: '$$dropdownItemHoverTextColor',
-          zIndex: 1,
+          zIndex: '$1',
           [`& ${StyledDropdownItemKbd}`]: {
             color: '$$dropdownItemHoverTextColor',
             borderColor: '$$dropdownItemHoverBorderColor'

From 77b09ba70b1d95f5fe8c34ec2d516786645f4a74 Mon Sep 17 00:00:00 2001
From: Artem Shteltser <artem@karmanow.com>
Date: Sun, 3 Jul 2022 17:40:09 +0300
Subject: [PATCH 021/106] fix quotes

---
 packages/react/src/dropdown/dropdown.styles.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/dropdown/dropdown.styles.ts b/packages/react/src/dropdown/dropdown.styles.ts
index b40b068306..0555c01efc 100644
--- a/packages/react/src/dropdown/dropdown.styles.ts
+++ b/packages/react/src/dropdown/dropdown.styles.ts
@@ -207,9 +207,9 @@ export const StyledDropdownItem = styled(
       },
       isFocused: {
         true: {
-          bg: '$$dropdownItemHoverBackground',
-          color: '$$dropdownItemHoverTextColor',
-          zIndex: '$1',
+          bg: "$$dropdownItemHoverBackground",
+          color: "$$dropdownItemHoverTextColor",
+          zIndex: "$1",
           [`& ${StyledDropdownItemKbd}`]: {
             color: "$$dropdownItemHoverTextColor",
             borderColor: "$$dropdownItemHoverBorderColor",

From 4e5919a3965b295c38b08c6cf76eca4f2c50a090 Mon Sep 17 00:00:00 2001
From: danielsimao <rui.daniel.simao@gmail.com>
Date: Tue, 5 Jul 2022 15:34:16 +0100
Subject: [PATCH 022/106] fix(docs): Kbar change theme

---
 apps/docs/src/components/index.ts             |  1 +
 .../src/components/kbar-wrapper/index.tsx     | 29 +++++++++++++++++++
 apps/docs/src/lib/kbar-actions.ts             | 19 +++++++-----
 apps/docs/src/pages/_app.tsx                  | 23 ++-------------
 4 files changed, 44 insertions(+), 28 deletions(-)
 create mode 100644 apps/docs/src/components/kbar-wrapper/index.tsx

diff --git a/apps/docs/src/components/index.ts b/apps/docs/src/components/index.ts
index 2517af1ed7..985c097eca 100644
--- a/apps/docs/src/components/index.ts
+++ b/apps/docs/src/components/index.ts
@@ -28,6 +28,7 @@ export { default as ExampleBlock } from './templates/example-block';
 export { default as ThemeToggle } from './theme-toggle';
 export { default as ThemeSwitch } from './theme-switch';
 export { default as KBar } from './kbar';
+export { default as KBarWrapper } from './kbar-wrapper';
 export { default as Blockholder } from './blockholder';
 export { default as LooperBG } from './looper-bg';
 export { default as FeaturesGrid } from './features-grid';
diff --git a/apps/docs/src/components/kbar-wrapper/index.tsx b/apps/docs/src/components/kbar-wrapper/index.tsx
new file mode 100644
index 0000000000..60f5ebc9f1
--- /dev/null
+++ b/apps/docs/src/components/kbar-wrapper/index.tsx
@@ -0,0 +1,29 @@
+import { KBarProvider } from 'kbar';
+import dynamic from 'next/dynamic';
+import React from 'react';
+import useKbarActions from '@lib/kbar-actions';
+
+const KbarComponent = dynamic(() => import('../kbar'), {
+  ssr: false
+});
+
+const KBARWrapper: React.FC = ({ children }) => {
+  const kbarActions = useKbarActions();
+
+  return (
+    <KBarProvider
+      actions={kbarActions}
+      options={{
+        animations: {
+          enterMs: 250,
+          exitMs: 100
+        }
+      }}
+    >
+      <KbarComponent />
+      {children}
+    </KBarProvider>
+  );
+};
+
+export default KBARWrapper;
diff --git a/apps/docs/src/lib/kbar-actions.ts b/apps/docs/src/lib/kbar-actions.ts
index 0d7ff4e4c0..2893554b0f 100644
--- a/apps/docs/src/lib/kbar-actions.ts
+++ b/apps/docs/src/lib/kbar-actions.ts
@@ -1,9 +1,10 @@
 import { Action } from 'kbar';
-import { NextRouter } from 'next/router';
+import { NextRouter, useRouter } from 'next/router';
+import { ThemeType } from '@nextui-org/react';
+import { useTheme as useNextTheme } from 'next-themes';
 import { Route } from '@lib/docs/page';
 import { getId } from '../utils/collections';
 import { removeFromLast } from '@utils/index';
-import { ThemeType, changeTheme } from '@nextui-org/react';
 // data imported from manifest
 import docsManifest from '../../content/docs/manifest.json';
 
@@ -57,14 +58,16 @@ const handleExternalLink = (href: string) => {
   }).click();
 };
 
-const handleChangeTheme = (theme: ThemeType) => {
-  changeTheme(theme);
-};
-
-const getActions = (router: NextRouter): Action[] => {
+const useActions = (): Action[] => {
+  const router = useRouter();
+  const { setTheme } = useNextTheme();
   const routes = docsManifest.routes;
   buildDocsActions(router, routes);
 
+  const handleChangeTheme = (theme: ThemeType) => {
+    setTheme(theme);
+  };
+
   const staticActions: Action[] = [
     {
       id: 'twitter',
@@ -129,4 +132,4 @@ const getActions = (router: NextRouter): Action[] => {
   return [...docsActions, ...staticActions];
 };
 
-export default getActions;
+export default useActions;
diff --git a/apps/docs/src/pages/_app.tsx b/apps/docs/src/pages/_app.tsx
index 03dbbb8f02..30ae8a3548 100644
--- a/apps/docs/src/pages/_app.tsx
+++ b/apps/docs/src/pages/_app.tsx
@@ -1,21 +1,19 @@
 import React from 'react';
 import { NextPage } from 'next';
-import dynamic from 'next/dynamic';
 import { debounce } from 'lodash';
-import { NextRouter, Router, useRouter } from 'next/router';
+import { NextRouter, Router } from 'next/router';
 import { NextUIProvider } from '@nextui-org/react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import NProgress from 'nprogress';
 import PlausibleProvider from 'next-plausible';
 import { AppInitialProps } from 'next/app';
 import { NextComponent } from '@lib/types';
-import generateKbarActions from '@lib/kbar-actions';
-import { KBarProvider } from 'kbar';
 import { lightTheme, darkTheme } from '../theme/shared';
 import { isProd } from '@utils/index';
 import RouterEvents from '@lib/router-events';
 import globalStyles from '../styles/globalStyles';
 import '../styles/sandpack.css';
+import { KBarWrapper as KBarProvider } from '@components';
 
 type AppPropsType<
   R extends NextRouter = NextRouter,
@@ -29,10 +27,6 @@ type AppPropsType<
 
 type AppProps<P = {}> = AppPropsType<Router, P>;
 
-const KbarComponent = dynamic(() => import('../components/kbar'), {
-  ssr: false
-});
-
 NProgress.configure({ parent: '#app-container' });
 
 const start = debounce(NProgress.start, 100);
@@ -48,8 +42,6 @@ RouterEvents.on('routeChangeError', () => {
 });
 
 const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
-  const router = useRouter();
-  const kbarActions = generateKbarActions(router);
   globalStyles();
   return (
     <NextThemesProvider
@@ -62,16 +54,7 @@ const Application: NextPage<AppProps<{}>> = ({ Component, pageProps }) => {
     >
       <NextUIProvider>
         <PlausibleProvider domain="nextui.org" enabled={isProd}>
-          <KBarProvider
-            actions={kbarActions}
-            options={{
-              animations: {
-                enterMs: 250,
-                exitMs: 100
-              }
-            }}
-          >
-            <KbarComponent />
+          <KBarProvider>
             <Component {...pageProps} />
           </KBarProvider>
         </PlausibleProvider>

From 4bbc1b4bccfa2266f55a732eea6ad4c942555c85 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Wed, 6 Jul 2022 00:25:06 -0300
Subject: [PATCH 023/106] feat(react-badge): initial structure created,
 variants and styles

---
 .../react/src/badge/__tests__/index.test.tsx  |   0
 packages/react/src/badge/badge.stories.tsx    | 271 +++++++++++++++++
 packages/react/src/badge/badge.styles.ts      | 273 ++++++++++++++++++
 packages/react/src/badge/badge.tsx            |  68 +++++
 packages/react/src/badge/index.ts             |   3 +
 packages/react/src/utils/system.ts            |  66 +++++
 6 files changed, 681 insertions(+)
 create mode 100644 packages/react/src/badge/__tests__/index.test.tsx
 create mode 100644 packages/react/src/badge/badge.stories.tsx
 create mode 100644 packages/react/src/badge/badge.styles.ts
 create mode 100644 packages/react/src/badge/badge.tsx
 create mode 100644 packages/react/src/badge/index.ts
 create mode 100644 packages/react/src/utils/system.ts

diff --git a/packages/react/src/badge/__tests__/index.test.tsx b/packages/react/src/badge/__tests__/index.test.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/react/src/badge/badge.stories.tsx b/packages/react/src/badge/badge.stories.tsx
new file mode 100644
index 0000000000..7798f2d0a3
--- /dev/null
+++ b/packages/react/src/badge/badge.stories.tsx
@@ -0,0 +1,271 @@
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import {Col, Row, Spacer} from "../index";
+
+import Badge from "./index";
+
+export default {
+  title: "Display/Badge",
+  component: Badge,
+} as Meta;
+
+export const Default = () => <Badge>New</Badge>;
+
+export const Sizes = () => (
+  <Col css={{pl: "$6"}}>
+    <Row>
+      <Badge size="xs">New (xs)</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge size="sm">New (sm)</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge size="md">New (md)</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge size="lg">New (lg)</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge size="xl">New (xl)</Badge>
+    </Row>
+    <Spacer y={0.5} />
+  </Col>
+);
+
+export const Squared = () => (
+  <Col css={{pl: "$6"}}>
+    <Row>
+      <Badge isSquared size="xs">
+        New (xs)
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge isSquared size="sm">
+        New (sm)
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge isSquared size="md">
+        New (md)
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge isSquared size="lg">
+        New (lg)
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge isSquared size="xl">
+        New (xl)
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+  </Col>
+);
+
+export const Colors = () => (
+  <Col css={{pl: "$6"}}>
+    <Row>
+      <Badge>Neutral</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="primary">Primary</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="secondary">Secondary</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="success">Success</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="warning">Warning</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="error">Error</Badge>
+    </Row>
+  </Col>
+);
+
+export const EnableShadow = () => (
+  <Col css={{pl: "$6"}}>
+    <Row>
+      <Badge enableShadow>Neutral</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge enableShadow color="primary">
+        Primary
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge enableShadow color="secondary">
+        Secondary
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge enableShadow color="success">
+        Success
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge enableShadow color="warning">
+        Warning
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge enableShadow color="error">
+        Error
+      </Badge>
+    </Row>
+  </Col>
+);
+
+export const FlatVariant = () => (
+  <Col css={{pl: "$6"}}>
+    <Row>
+      <Badge variant="flat">Neutral</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="primary" variant="flat">
+        Primary
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="secondary" variant="flat">
+        Secondary
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="success" variant="flat">
+        Success
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="warning" variant="flat">
+        Warning
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="error" variant="flat">
+        Error
+      </Badge>
+    </Row>
+  </Col>
+);
+
+export const BorderedVariant = () => (
+  <Col css={{pl: "$6"}}>
+    <Row>
+      <Badge variant="bordered">Neutral</Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="primary" variant="bordered">
+        Primary
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="secondary" variant="bordered">
+        Secondary
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="success" variant="bordered">
+        Success
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="warning" variant="bordered">
+        Warning
+      </Badge>
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="error" variant="bordered">
+        Error
+      </Badge>
+    </Row>
+  </Col>
+);
+
+export const DotVariant = () => (
+  <Col css={{pl: "$6"}}>
+    <Row>
+      <Badge size="xl" variant="dot" />
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="primary" size="xl" variant="dot" />
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="secondary" size="xl" variant="dot" />
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="success" size="xl" variant="dot" />
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="warning" size="xl" variant="dot" />
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge color="error" size="xl" variant="dot" />
+    </Row>
+  </Col>
+);
+
+export const PointsVariant = () => (
+  <Col css={{pl: "$6"}}>
+    <Row>
+      <Badge isSquared size="xs" variant="points" />
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge isSquared color="primary" size="sm" variant="points" />
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge isSquared color="secondary" size="md" variant="points" />
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge isSquared color="success" size="lg" variant="points" />
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge isSquared color="warning" size="xl" variant="points" />
+    </Row>
+    <Spacer y={0.5} />
+    <Row>
+      <Badge isSquared color="error" size="xl" variant="points" />
+    </Row>
+  </Col>
+);
diff --git a/packages/react/src/badge/badge.styles.ts b/packages/react/src/badge/badge.styles.ts
new file mode 100644
index 0000000000..aa27b9bbf8
--- /dev/null
+++ b/packages/react/src/badge/badge.styles.ts
@@ -0,0 +1,273 @@
+import {styled, keyframes, VariantProps} from "../theme/stitches.config";
+
+const pointAnimation = keyframes({
+  "0%": {
+    opacity: 1,
+  },
+  "50%": {
+    opacity: "0.4",
+    transform: "scale(0.5)",
+  },
+  "100%": {
+    opacity: 1,
+  },
+});
+
+export const StyledBadge = styled("span", {
+  display: "inline-block",
+  whiteSpace: "nowrap",
+  verticalAlign: "middle",
+  bg: "$$badgeBackgroundColor",
+  color: "$$badgeTextColor",
+  fontWeight: "$semibold",
+  fontSize: "$$badgeFontSize",
+  variants: {
+    size: {
+      xs: {
+        p: "$1 $3",
+        $$badgeFontSize: "0.65rem",
+      },
+      sm: {
+        p: "$1 $4",
+        $$badgeFontSize: "$fontSizes$xs",
+      },
+      md: {
+        p: "$1 $5",
+        $$badgeFontSize: "$fontSizes$sm",
+      },
+      lg: {
+        p: "$1 $6",
+        $$badgeFontSize: "$fontSizes$lg",
+      },
+      xl: {
+        p: "$1 $7",
+        $$badgeFontSize: "$fontSizes$xl",
+      },
+    },
+    color: {
+      neutral: {
+        $$badgeBackgroundColor: "$colors$neutral",
+        $$badgeTextColor: "$colors$neutralSolidContrast",
+        $$badgeShadowColor: "$colors$neutralShadow",
+      },
+      primary: {
+        $$badgeBackgroundColor: "$colors$primary",
+        $$badgeTextColor: "$colors$primarySolidContrast",
+        $$badgeShadowColor: "$colors$primaryShadow",
+      },
+      secondary: {
+        $$badgeBackgroundColor: "$colors$secondary",
+        $$badgeTextColor: "$colors$secondarySolidContrast",
+        $$badgeShadowColor: "$colors$secondaryShadow",
+      },
+      success: {
+        $$badgeBackgroundColor: "$colors$success",
+        $$badgeTextColor: "$colors$successSolidContrast",
+        $$badgeShadowColor: "$colors$successShadow",
+      },
+      warning: {
+        $$badgeBackgroundColor: "$colors$warning",
+        $$badgeTextColor: "$colors$warningSolidContrast",
+        $$badgeShadowColor: "$colors$warningShadow",
+      },
+      error: {
+        $$badgeBackgroundColor: "$colors$error",
+        $$badgeTextColor: "$colors$errorSolidContrast",
+        $$badgeShadowColor: "$colors$errorShadow",
+      },
+    },
+    enableShadow: {
+      true: {
+        boxShadow: "0 2px 10px 0 $$badgeShadowColor",
+      },
+    },
+    isSquared: {
+      true: {
+        borderRadius: "calc($$badgeFontSize * 0.45)",
+      },
+      false: {
+        borderRadius: "$pill",
+      },
+    },
+    variant: {
+      default: {},
+      flat: {},
+      dot: {
+        dflex: "center",
+        minSize: "$$badgeFontSize",
+        boxSizing: "border-box",
+        border: "2px solid $colors$background",
+        p: 0,
+      },
+      points: {
+        p: "calc($$badgeFontSize * 0.4)",
+        boxSizing: "border-box",
+        border: "2px solid $colors$background",
+      },
+      bordered: {
+        $$badgeBackgroundColor: "$background",
+        bw: "$$badgeBorderWeight",
+        borderStyle: "solid",
+        borderColor: "$$badgeTextColor",
+      },
+    },
+    borderWeight: {
+      light: {
+        $$badgeBorderWeight: "$borderWeights$light",
+      },
+      normal: {
+        $$badgeBorderWeight: "$borderWeights$normal",
+      },
+      bold: {
+        $$badgeBorderWeight: "$borderWeights$bold",
+      },
+      extrabold: {
+        $$badgeBorderWeight: "$borderWeights$extrabold",
+      },
+      black: {
+        $$badgeBorderWeight: "$borderWeights$black",
+      },
+    },
+  },
+  compoundVariants: [
+    /***
+     * @variant flat
+     * @color {neutral, primary, secondary, success, warning, error}
+     */
+    // variant=flat && color=neutral
+    {
+      variant: "flat",
+      color: "neutral",
+      css: {
+        $$badgeBackgroundColor: "$colors$neutralLight",
+        $$badgeTextColor: "$colors$neutralLightContrast",
+      },
+    },
+    // variant=flat && color=primary
+    {
+      variant: "flat",
+      color: "primary",
+      css: {
+        $$badgeBackgroundColor: "$colors$primaryLight",
+        $$badgeTextColor: "$colors$primaryLightContrast",
+      },
+    },
+    // variant=flat && color=secondary
+    {
+      variant: "flat",
+      color: "secondary",
+      css: {
+        $$badgeBackgroundColor: "$colors$secondaryLight",
+        $$badgeTextColor: "$colors$secondaryLightContrast",
+      },
+    },
+    // variant=flat && color=success
+    {
+      variant: "flat",
+      color: "success",
+      css: {
+        $$badgeBackgroundColor: "$colors$successLight",
+        $$badgeTextColor: "$colors$successLightContrast",
+      },
+    },
+    // variant=flat && color=warning
+    {
+      variant: "flat",
+      color: "warning",
+      css: {
+        $$badgeBackgroundColor: "$colors$warningLight",
+        $$badgeTextColor: "$colors$warningLightContrast",
+      },
+    },
+    // variant=flat && color=error
+    {
+      variant: "flat",
+      color: "error",
+      css: {
+        $$badgeBackgroundColor: "$colors$errorLight",
+        $$badgeTextColor: "$colors$errorLightContrast",
+      },
+    },
+    /***
+     * @variant bordered
+     * @color {neutral, primary, secondary, success, warning, error}
+     */
+    // variant=bordered && color=neutral
+    {
+      variant: "bordered",
+      color: "neutral",
+      css: {
+        $$badgeTextColor: "$colors$neutral",
+      },
+    },
+    // variant=bordered && color=primary
+    {
+      variant: "bordered",
+      color: "primary",
+      css: {
+        $$badgeTextColor: "$colors$primary",
+      },
+    },
+    // variant=bordered && color=secondary
+    {
+      variant: "bordered",
+      color: "secondary",
+      css: {
+        $$badgeTextColor: "$colors$secondary",
+      },
+    },
+    // variant=bordered && color=success
+    {
+      variant: "bordered",
+      color: "success",
+      css: {
+        $$badgeTextColor: "$colors$success",
+      },
+    },
+    // variant=bordered && color=warning
+    {
+      variant: "bordered",
+      color: "warning",
+      css: {
+        $$badgeTextColor: "$colors$warning",
+      },
+    },
+    // variant=bordered && color=error
+    {
+      variant: "bordered",
+      color: "error",
+      css: {
+        $$badgeTextColor: "$colors$error",
+      },
+    },
+  ],
+  defaultVariants: {
+    size: "sm",
+    color: "neutral",
+    variant: "default",
+    borderWeight: "normal",
+    isSquared: false,
+  },
+});
+
+export const StyledBadgePoints = styled("div", {
+  position: "relative",
+  dflex: "center",
+  "& .nextui-badge-point": {
+    size: "calc($$badgeFontSize * 0.5)",
+    background: "$$badgeTextColor",
+    margin: "0 2px",
+    borderRadius: "$pill",
+    "&:nth-child(1)": {
+      animation: `${pointAnimation} 1.2s ease infinite`,
+    },
+    "&:nth-child(2)": {
+      animation: `${pointAnimation} 1.2s ease infinite 0.4s`,
+    },
+    "&:nth-child(3)": {
+      animation: `${pointAnimation} 1.2s ease infinite 0.8s`,
+    },
+  },
+});
+
+export type BadgeVariantsProps = VariantProps<typeof StyledBadge>;
diff --git a/packages/react/src/badge/badge.tsx b/packages/react/src/badge/badge.tsx
new file mode 100644
index 0000000000..48b5f48600
--- /dev/null
+++ b/packages/react/src/badge/badge.tsx
@@ -0,0 +1,68 @@
+import * as React from "react";
+
+import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import clsx from "../utils/clsx";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+
+import {StyledBadge, StyledBadgePoints, BadgeVariantsProps} from "./badge.styles";
+
+export type BadgePlacement = "bottom-left" | "bottom-right" | "top-left" | "top-right";
+
+interface Props extends Omit<HTMLNextUIProps<"span">, keyof BadgeVariantsProps> {
+  placement?: BadgePlacement;
+  isVisible?: boolean;
+  content?: string | number | React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export type BadgeProps = Props & BadgeVariantsProps;
+
+export const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
+  const {
+    children,
+    enableShadow = false,
+    placement = "top-right",
+    variant = "default",
+    className,
+    ...otherProps
+  } = props;
+
+  const domRef = useDOMRef(ref);
+
+  const badgeChildren = React.useMemo(() => {
+    if (variant === "dot") {
+      return null;
+    }
+
+    if (variant === "points") {
+      return (
+        <StyledBadgePoints className="nextui-badge-points">
+          <span className="nextui-badge-point" />
+          <span className="nextui-badge-point" />
+          <span className="nextui-badge-point" />
+        </StyledBadgePoints>
+      );
+    }
+
+    return children;
+  }, [variant, children]);
+
+  return (
+    <StyledBadge
+      ref={domRef}
+      className={clsx("nextui-badge", className)}
+      enableShadow={variant === "default" && enableShadow}
+      variant={variant}
+      {...otherProps}
+    >
+      {badgeChildren}
+    </StyledBadge>
+  );
+});
+
+if (__DEV__) {
+  Badge.displayName = "NextUI.Badge";
+}
+
+Badge.toString = () => ".nextui-badge";
diff --git a/packages/react/src/badge/index.ts b/packages/react/src/badge/index.ts
new file mode 100644
index 0000000000..b3a505ab7a
--- /dev/null
+++ b/packages/react/src/badge/index.ts
@@ -0,0 +1,3 @@
+import {Badge} from "./badge";
+
+export default Badge;
diff --git a/packages/react/src/utils/system.ts b/packages/react/src/utils/system.ts
new file mode 100644
index 0000000000..100a37b1cc
--- /dev/null
+++ b/packages/react/src/utils/system.ts
@@ -0,0 +1,66 @@
+/**
+ * Part of this code is taken from @chakra-ui/system
+ */
+
+import {forwardRef as baseForwardRef} from "react";
+
+import {CSS} from "../theme/stitches.config";
+
+export type As<Props = any> = React.ElementType<Props>;
+
+export type OmitCommonProps<Target, OmitAdditionalProps extends keyof any = never> = Omit<
+  Target,
+  "transition" | "as" | "color" | OmitAdditionalProps
+>;
+
+export type RightJoinProps<
+  SourceProps extends object = {},
+  OverrideProps extends object = {},
+> = OmitCommonProps<SourceProps, keyof OverrideProps> & OverrideProps;
+
+export type MergeWithAs<
+  ComponentProps extends object,
+  AsProps extends object,
+  AdditionalProps extends object = {},
+  AsComponent extends As = As,
+> = RightJoinProps<ComponentProps, AdditionalProps> &
+  RightJoinProps<AsProps, AdditionalProps> & {
+    as?: AsComponent;
+  };
+
+export type ComponentWithAs<Component extends As, Props extends object = {}> = {
+  <AsComponent extends As = Component>(
+    props: MergeWithAs<
+      React.ComponentProps<Component>,
+      React.ComponentProps<AsComponent>,
+      Props,
+      AsComponent
+    >,
+  ): JSX.Element;
+
+  displayName?: string;
+  propTypes?: React.WeakValidationMap<any>;
+  contextTypes?: React.ValidationMap<any>;
+  defaultProps?: Partial<any>;
+  id?: string;
+};
+
+/**
+ * Extract the props of a React element or component
+ */
+export type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
+  as?: As;
+};
+
+export type HTMLNextUIProps<T extends As> = Omit<PropsOf<T>, "ref"> & {as?: As; css?: CSS};
+
+export function forwardRef<Props extends object, Component extends As>(
+  component: React.ForwardRefRenderFunction<
+    any,
+    RightJoinProps<PropsOf<Component>, Props> & {
+      as?: As;
+    }
+  >,
+) {
+  return baseForwardRef(component) as unknown as ComponentWithAs<Component, Props>;
+}

From d4b5c3ab675d3039aaaaa06033b6e8f5b40f77be Mon Sep 17 00:00:00 2001
From: danielsimao <rui.daniel.simao@gmail.com>
Date: Wed, 6 Jul 2022 08:42:45 +0100
Subject: [PATCH 024/106] fix(docs): code review

---
 apps/docs/src/components/kbar-wrapper/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/docs/src/components/kbar-wrapper/index.tsx b/apps/docs/src/components/kbar-wrapper/index.tsx
index 60f5ebc9f1..0c24e7ce97 100644
--- a/apps/docs/src/components/kbar-wrapper/index.tsx
+++ b/apps/docs/src/components/kbar-wrapper/index.tsx
@@ -3,11 +3,15 @@ import dynamic from 'next/dynamic';
 import React from 'react';
 import useKbarActions from '@lib/kbar-actions';
 
+type KBARWrapperProps = {
+  children?: React.ReactNode;
+};
+
 const KbarComponent = dynamic(() => import('../kbar'), {
   ssr: false
 });
 
-const KBARWrapper: React.FC = ({ children }) => {
+const KBARWrapper: React.FC<KBARWrapperProps> = ({ children }) => {
   const kbarActions = useKbarActions();
 
   return (

From 8341431d923de56ff2f8fa0cdd9f305f197b0ae8 Mon Sep 17 00:00:00 2001
From: Paul Tiedtke <PaulTiedtke@web.de>
Date: Wed, 6 Jul 2022 13:14:33 +0200
Subject: [PATCH 025/106] fix(docs): wrong case in image props

---
 apps/docs/content/docs/components/image.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/content/docs/components/image.mdx b/apps/docs/content/docs/components/image.mdx
index 3f48dd121b..ff7085e2ba 100644
--- a/apps/docs/content/docs/components/image.mdx
+++ b/apps/docs/content/docs/components/image.mdx
@@ -58,7 +58,7 @@ import { Image } from '@nextui-org/react';
 | **height**       | `string`                       | Specifies Image Height                              | -            |
 | **maxDelay**     | `number`                       | Specifies how long Image Skeleton Renders Animation | `3000`       |
 | **className**    | `string`                       | Give Image A ClasName                               | -            |
-| **containerCSS** | `Stitches.CSS`                 | Override Default Image Contianer Style              | -            |
+| **containerCss** | `Stitches.CSS`                 | Override Default Image Contianer Style              | -            |
 | **css**          | `Stitches.CSS`                 | Override Default CSS style                          | -            |
 | **as**           | `keyof JSX.IntrinsicElements`  | Changes which tag component outputs                 | `img`        |
 | ...              | `ImageHTMLAttributes`          | Native props                                        | -            |

From cc98eef053e26c9452eb88b62f8ea2ac012ac63c Mon Sep 17 00:00:00 2001
From: benmneb <62878664+benmneb@users.noreply.github.com>
Date: Wed, 6 Jul 2022 13:20:08 +0000
Subject: [PATCH 026/106] Fix typos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💯
---
 apps/docs/content/docs/components/input.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx
index 886614417d..eeb0e973df 100644
--- a/apps/docs/content/docs/components/input.mdx
+++ b/apps/docs/content/docs/components/input.mdx
@@ -42,7 +42,7 @@ import { Input } from '@nextui-org/react';
 
 <Playground
   title="Label Placeholder"
-  desc="With the property `labelPlaceholder` the placeholder becomes a label with an great animation."
+  desc="With the property `labelPlaceholder` the placeholder becomes a label with a great animation."
   files={inputContent.labelPlaceholder}
 />
 
@@ -107,8 +107,8 @@ import { Input } from '@nextui-org/react';
 <Playground
   title="Content"
   desc="You can put any content at the begining or at the end of the `Input` with the properties `contentLeft` and `contentRight`.
-  Important: If you want the `Input` component change the icon colors according to the current `status` color 
-  you should use `currentColor` as the icon/svg color to allows ."
+  Important: If you want the `Input` component to change the icon colors according to the current `status` color 
+  you should use `currentColor` as the icon/svg color to allows."
   files={inputContent.content}
 />
 

From 4170c3bb271461bc759734875162048d3b30b586 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Wed, 6 Jul 2022 23:54:39 -0300
Subject: [PATCH 027/106] feat(badge): test passing, variants added, styles
 added

---
 packages/react/.babelrc.js                    |  44 ++--
 packages/react/.jest.config.js                |  23 --
 packages/react/jest.config.js                 |  23 ++
 packages/react/package.json                   |   5 +-
 .../react/src/badge/__tests__/index.test.tsx  |  59 +++++
 packages/react/src/badge/badge.animations.ts  | 118 +++++++++
 packages/react/src/badge/badge.stories.tsx    | 216 +++++++++++++++-
 packages/react/src/badge/badge.styles.ts      | 241 ++++++++++++++++--
 packages/react/src/badge/badge.tsx            |  93 +++++--
 .../__snapshots__/group.test.tsx.snap         | 128 +++++-----
 .../__snapshots__/index.test.tsx.snap         | 144 +++++------
 .../__snapshots__/index.test.tsx.snap         |   8 +-
 .../__snapshots__/password.test.tsx.snap      |   2 +-
 .../__snapshots__/index.test.tsx.snap         |   4 +-
 .../__snapshots__/index.test.tsx.snap         |   4 +-
 packages/react/tests/jest-setup.js            |   6 +
 packages/react/tests/setup.js                 |   4 -
 packages/react/tsconfig.json                  |  51 ++--
 yarn.lock                                     |  96 +------
 19 files changed, 903 insertions(+), 366 deletions(-)
 delete mode 100644 packages/react/.jest.config.js
 create mode 100644 packages/react/jest.config.js
 create mode 100644 packages/react/src/badge/badge.animations.ts
 create mode 100644 packages/react/tests/jest-setup.js
 delete mode 100644 packages/react/tests/setup.js

diff --git a/packages/react/.babelrc.js b/packages/react/.babelrc.js
index f44182a996..58e0c32c79 100644
--- a/packages/react/.babelrc.js
+++ b/packages/react/.babelrc.js
@@ -3,51 +3,49 @@ module.exports = (api) => {
 
   let dev = false;
   let modules;
+  let plugins;
 
   switch (env) {
-    case 'docs':
-    case 'test':
-    case 'dist-dev':
-    case 'development':
+    case "docs":
+    case "test":
+    case "dist-dev":
+    case "development":
       dev = true;
       modules = false;
       break;
-    case 'dist-prod':
-    case 'esm':
+    case "dist-prod":
+      plugins = ["@testing-library/babel-plugin-react"];
+    case "production":
+      plugins = ["@testing-library/babel-plugin-react"];
+    case "esm":
       modules = false;
       break;
-    case 'cjs':
+    case "cjs":
     default:
-      modules = 'commonjs';
+      modules = "commonjs";
   }
 
   const presets =
-    env !== 'test' && env !== 'development'
+    env !== "test" && env !== "development"
       ? [
           [
-            '@react-bootstrap',
+            "@react-bootstrap",
             {
               dev,
               modules,
-              removePropTypes: !dev
-            }
+              removePropTypes: !dev,
+            },
           ],
-          '@babel/preset-typescript'
+          "@babel/preset-typescript",
         ]
-      : ['@babel/preset-env', '@babel/react', '@babel/preset-typescript'];
-
-  const plugins = [];
+      : ["@babel/preset-env", "@babel/react", "@babel/preset-typescript"];
 
   return {
     presets,
     plugins,
     ignore:
-      env !== 'test' && env !== 'development'
-        ? [
-            /@babel[\\|/]runtime/,
-            /\.stories\.(js|ts|tsx)$/,
-            /\.test\.(js|ts|tsx)$/
-          ]
-        : []
+      env !== "test" && env !== "development"
+        ? [/@babel[\\|/]runtime/, /\.stories\.(js|ts|tsx)$/, /\.test\.(js|ts|tsx)$/]
+        : [],
   };
 };
diff --git a/packages/react/.jest.config.js b/packages/react/.jest.config.js
deleted file mode 100644
index d7a65c1df5..0000000000
--- a/packages/react/.jest.config.js
+++ /dev/null
@@ -1,23 +0,0 @@
-module.exports = {
-  verbose: true,
-  testEnvironment: 'jsdom',
-  setupFiles: ['./tests/setup.js'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  testPathIgnorePatterns: ['/dist/', '/lib/'],
-  transform: {
-    '^.+\\.[jt]sx?$': ['babel-jest', { configFile: './tests/.babelrc.js' }],
-  },
-  testRegex: '.*\\.test\\.(j|t)sx?$',
-  collectCoverageFrom: [
-    'src/**/*.{ts,tsx}',
-    '!src/**/styles.{ts,tsx}',
-    '!src/**/*stories.{ts,tsx}',
-    '!src/**/*types.{ts,tsx}',
-    '!src/styles/*',
-    '!src/index.ts',
-  ],
-  moduleNameMapper: {
-    'tests/(.*)$': '<rootDir>/tests/$1',
-    components: './src/index.ts',
-  },
-};
diff --git a/packages/react/jest.config.js b/packages/react/jest.config.js
new file mode 100644
index 0000000000..c16481b3b0
--- /dev/null
+++ b/packages/react/jest.config.js
@@ -0,0 +1,23 @@
+module.exports = {
+  verbose: true,
+  testEnvironment: "jsdom",
+  setupFiles: ["./tests/jest-setup.js"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  testPathIgnorePatterns: ["/dist/", "/lib/"],
+  transform: {
+    "^.+\\.[jt]sx?$": ["babel-jest", {configFile: "./tests/.babelrc.js"}],
+  },
+  testRegex: ".*\\.test\\.(j|t)sx?$",
+  collectCoverageFrom: [
+    "src/**/*.{ts,tsx}",
+    "!src/**/styles.{ts,tsx}",
+    "!src/**/*stories.{ts,tsx}",
+    "!src/**/*types.{ts,tsx}",
+    "!src/styles/*",
+    "!src/index.ts",
+  ],
+  moduleNameMapper: {
+    "tests/(.*)$": "<rootDir>/tests/$1",
+    components: "./src/index.ts",
+  },
+};
diff --git a/packages/react/package.json b/packages/react/package.json
index 19e617ae4e..7026539b6c 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -47,8 +47,8 @@
     "build:watch": "node ./scripts/build-watch.js",
     "dev": "yarn clear && yarn build:dev-types && yarn build:watch",
     "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
-    "test": "jest --config .jest.config.js --no-cache",
-    "test-update": "jest --config .jest.config.js --no-cache --update-snapshot",
+    "test": "jest --config jest.config.js --no-cache",
+    "test-update": "jest --config jest.config.js --no-cache --update-snapshot",
     "coverage": "yarn test --coverage",
     "coverage-update": "yarn test-update --coverage",
     "coverage:codecov": "yarn test --coverage && codecov"
@@ -101,7 +101,6 @@
     "@react-bootstrap/babel-preset": "^2.1.0",
     "@storybook/react": "^6.5.3",
     "@testing-library/dom": "^8.1.0",
-    "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.0",
     "@testing-library/user-event": "^13.2.0",
diff --git a/packages/react/src/badge/__tests__/index.test.tsx b/packages/react/src/badge/__tests__/index.test.tsx
index e69de29bb2..8b58aa8be8 100644
--- a/packages/react/src/badge/__tests__/index.test.tsx
+++ b/packages/react/src/badge/__tests__/index.test.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import {render, screen} from "@testing-library/react";
+
+import Badge from "../index";
+
+describe("Badge", () => {
+  it("should render correctly", () => {
+    const wrapper = render(<Badge>New</Badge>);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
+  it("should render children and content", () => {
+    const wrapper = render(
+      <Badge content={<span data-testid="badge-content" />}>
+        <span data-testid="badge-children">new</span>
+      </Badge>,
+    );
+
+    expect(wrapper.getByTestId("badge-content")).toBeTruthy();
+    expect(wrapper.getByTestId("badge-children")).toBeTruthy();
+  });
+
+  it("should not render children if variant is dot", () => {
+    const wrapper = render(
+      <Badge variant="dot">
+        <span data-testid="badge-children">new</span>
+      </Badge>,
+    );
+
+    expect(wrapper.queryAllByTestId("badge-children")).toHaveLength(0);
+  });
+
+  it("should not render children if variant is points", () => {
+    const wrapper = render(
+      <Badge variant="points">
+        <span data-testid="badge-children">new</span>
+      </Badge>,
+    );
+
+    expect(wrapper.queryAllByTestId("badge-children")).toHaveLength(0);
+  });
+
+  it("should have 3 points if variant is points", () => {
+    const wrapper = render(<Badge variant="points" />);
+
+    expect(wrapper.getAllByTestId("badge-point")).toHaveLength(3);
+  });
+
+  // it("should be invisible if invisible is true", () => {
+  //   const {container} = render(
+  //     <Badge invisible content={<span data-testid="badge-content" />} data-testid="badge-root">
+  //       <span data-testid="badge-children">new</span>
+  //     </Badge>,
+  //   );
+
+  //   expect(container.querySelectorAll(".nextui-badge")[0]).toHaveClass("nextui-badge--invisible");
+  // });
+});
diff --git a/packages/react/src/badge/badge.animations.ts b/packages/react/src/badge/badge.animations.ts
new file mode 100644
index 0000000000..e97c23cdf3
--- /dev/null
+++ b/packages/react/src/badge/badge.animations.ts
@@ -0,0 +1,118 @@
+import {keyframes} from "../theme/stitches.config";
+
+export const pointAnimation = keyframes({
+  "0%": {
+    opacity: 1,
+  },
+  "50%": {
+    opacity: "0.4",
+    transform: "scale(0.5)",
+  },
+  "100%": {
+    opacity: 1,
+  },
+});
+
+export const appearanceInTopRight = keyframes({
+  "0%": {
+    opacity: 0,
+    transform: "scale(0.2) translate(50%, -50%)",
+  },
+  "60%": {
+    opacity: 0.75,
+    transform: "scale(1.2) translate(50%, -50%)",
+  },
+  "100%": {
+    opacity: 1,
+    transform: "scale(1) translate(50%, -50%)",
+  },
+});
+
+export const appearanceOutTopRight = keyframes({
+  "0%": {
+    opacity: 1,
+    transform: "scale(1) translate(50%, -50%)",
+  },
+  "100%": {
+    opacity: 0,
+    transform: "scale(0.2) translate(50%, -50%)",
+  },
+});
+
+export const appearanceInTopLeft = keyframes({
+  "0%": {
+    opacity: 0,
+    transform: "scale(0.2) translate(-50%, -50%)",
+  },
+  "60%": {
+    opacity: 0.75,
+    transform: "scale(1.2) translate(-50%, -50%)",
+  },
+  "100%": {
+    opacity: 1,
+    transform: "scale(1) translate(-50%, -50%)",
+  },
+});
+
+export const appearanceOutTopLeft = keyframes({
+  "0%": {
+    opacity: 1,
+    transform: "scale(1) translate(-50%, -50%)",
+  },
+  "100%": {
+    opacity: 0,
+    transform: "scale(0.2) translate(-50%, -50%)",
+  },
+});
+
+export const appearanceInBottomRight = keyframes({
+  "0%": {
+    opacity: 0,
+    transform: "scale(0.2) translate(50%, 50%)",
+  },
+  "60%": {
+    opacity: 0.75,
+    transform: "scale(1.2) translate(50%, 50%)",
+  },
+  "100%": {
+    opacity: 1,
+    transform: "scale(1) translate(50%, 50%)",
+  },
+});
+
+export const appearanceOutBottomRight = keyframes({
+  "0%": {
+    opacity: 1,
+    transform: "scale(1) translate(50%, 50%)",
+  },
+  "100%": {
+    opacity: 0,
+    transform: "scale(0.2) translate(50%, 50%)",
+  },
+});
+
+export const appearanceInBottomLeft = keyframes({
+  "0%": {
+    opacity: 0,
+    transform: "scale(0.2) translate(-50%, 50%)",
+  },
+  "60%": {
+    opacity: 0.75,
+    transform: "scale(1.2) translate(-50%, 50%)",
+  },
+  "100%": {
+    opacity: 1,
+    transform: "scale(1) translate(-50%, 50%)",
+  },
+});
+
+export const appearanceOutBottomLeft = keyframes({
+  "0%": {
+    opacity: 1,
+    transform: "scale(1) translate(-50%, 50%)",
+  },
+  "100%": {
+    opacity: 0,
+    transform: "scale(0.2) translate(-50%, 50%)",
+  },
+});
diff --git a/packages/react/src/badge/badge.stories.tsx b/packages/react/src/badge/badge.stories.tsx
index 7798f2d0a3..bb46e48de1 100644
--- a/packages/react/src/badge/badge.stories.tsx
+++ b/packages/react/src/badge/badge.stories.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import {Meta} from "@storybook/react";
 
-import {Col, Row, Spacer} from "../index";
+import {Col, Row, Spacer, Grid, Avatar, Switch, Text} from "../index";
+import {Notification} from "../utils/icons";
 
 import Badge from "./index";
 
@@ -12,6 +13,201 @@ export default {
 
 export const Default = () => <Badge>New</Badge>;
 
+export const WithAvatar = () => (
+  <Grid.Container gap={1} justify="center">
+    <Grid>
+      <Badge color="error" content={5} size="sm">
+        <Avatar
+          bordered
+          pointer
+          squared
+          color="secondary"
+          size="lg"
+          src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
+        />
+      </Badge>
+    </Grid>
+    <Grid>
+      <Badge color="error" content={5} placement="bottom-right" shape="circle" size="sm">
+        <Avatar
+          bordered
+          pointer
+          color="secondary"
+          size="lg"
+          src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
+        />
+      </Badge>
+    </Grid>
+  </Grid.Container>
+);
+
+export const WithIcon = () => (
+  <Badge color="error" content={5} horizontalOffset={2} shape="circle">
+    <Notification fill="currentColor" size={30} />
+  </Badge>
+);
+
+export const WithContentIcon = () => (
+  <Badge
+    color="error"
+    content={<Notification fill="currentColor" size={12} />}
+    css={{p: "$2"}}
+    horizontalOffset={2}
+    shape="circle"
+  >
+    <Avatar
+      bordered
+      pointer
+      color="secondary"
+      size="lg"
+      src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
+    />
+  </Badge>
+);
+
+export const ToggleBadge = () => {
+  const [invisible, setInvisible] = React.useState(false);
+
+  return (
+    <Grid.Container alignItems="center" gap={2}>
+      <Grid>
+        <Badge color="error" content={5} invisible={invisible} placement="top-right" shape="circle">
+          <Notification fill="currentColor" size={30} />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Row align="center">
+          <Switch
+            initialChecked
+            css={{mr: "$2"}}
+            onChange={(ev) => setInvisible(!ev.target.checked)}
+          />
+          <Text>Show badge</Text>
+        </Row>
+      </Grid>
+    </Grid.Container>
+  );
+};
+
+export const WithContentPlacements = () => {
+  return (
+    <>
+      <Grid.Container gap={1} justify="center">
+        <Grid>
+          <Badge color="error" content={5} size="sm">
+            <Avatar
+              bordered
+              pointer
+              squared
+              color="secondary"
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
+            />
+          </Badge>
+        </Grid>
+        <Grid>
+          <Badge color="error" content={5} placement="bottom-right" size="sm">
+            <Avatar
+              bordered
+              pointer
+              squared
+              color="secondary"
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
+            />
+          </Badge>
+        </Grid>
+        <Grid>
+          <Badge color="error" content={5} placement="top-left" size="sm">
+            <Avatar
+              bordered
+              pointer
+              squared
+              color="secondary"
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+            />
+          </Badge>
+        </Grid>
+        <Grid>
+          <Badge color="error" content={5} placement="bottom-left" size="sm">
+            <Avatar
+              bordered
+              pointer
+              squared
+              color="secondary"
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e290267073"
+            />
+          </Badge>
+        </Grid>
+      </Grid.Container>
+      <Grid.Container gap={1} justify="center">
+        <Grid>
+          <Badge
+            invisible
+            color="primary"
+            content={5}
+            placement="bottom-right"
+            size="md"
+            variant="points"
+          >
+            <Avatar
+              bordered
+              pointer
+              color="primary"
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
+            />
+          </Badge>
+        </Grid>
+        <Grid>
+          <Badge
+            color="success"
+            content={5}
+            placement="bottom-right"
+            shape="circle"
+            size="md"
+            variant="dot"
+          >
+            <Avatar
+              bordered
+              pointer
+              color="success"
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
+            />
+          </Badge>
+        </Grid>
+        <Grid>
+          <Badge color="error" content={5} placement="top-left" size="sm">
+            <Avatar
+              bordered
+              pointer
+              squared
+              color="secondary"
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+            />
+          </Badge>
+        </Grid>
+        <Grid>
+          <Badge color="error" content={5} placement="bottom-left" size="sm">
+            <Avatar
+              bordered
+              pointer
+              squared
+              color="secondary"
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e290267073"
+            />
+          </Badge>
+        </Grid>
+      </Grid.Container>
+    </>
+  );
+};
+
 export const Sizes = () => (
   <Col css={{pl: "$6"}}>
     <Row>
@@ -103,35 +299,37 @@ export const Colors = () => (
 export const EnableShadow = () => (
   <Col css={{pl: "$6"}}>
     <Row>
-      <Badge enableShadow>Neutral</Badge>
+      <Badge disableOutline enableShadow>
+        Neutral
+      </Badge>
     </Row>
     <Spacer y={0.5} />
     <Row>
-      <Badge enableShadow color="primary">
+      <Badge disableOutline enableShadow color="primary">
         Primary
       </Badge>
     </Row>
     <Spacer y={0.5} />
     <Row>
-      <Badge enableShadow color="secondary">
+      <Badge disableOutline enableShadow color="secondary">
         Secondary
       </Badge>
     </Row>
     <Spacer y={0.5} />
     <Row>
-      <Badge enableShadow color="success">
+      <Badge disableOutline enableShadow color="success">
         Success
       </Badge>
     </Row>
     <Spacer y={0.5} />
     <Row>
-      <Badge enableShadow color="warning">
+      <Badge disableOutline enableShadow color="warning">
         Warning
       </Badge>
     </Row>
     <Spacer y={0.5} />
     <Row>
-      <Badge enableShadow color="error">
+      <Badge disableOutline enableShadow color="error">
         Error
       </Badge>
     </Row>
@@ -217,7 +415,9 @@ export const BorderedVariant = () => (
 export const DotVariant = () => (
   <Col css={{pl: "$6"}}>
     <Row>
-      <Badge size="xl" variant="dot" />
+      <Badge size="xl" variant="dot">
+        <span>new</span>
+      </Badge>
     </Row>
     <Spacer y={0.5} />
     <Row>
diff --git a/packages/react/src/badge/badge.styles.ts b/packages/react/src/badge/badge.styles.ts
index aa27b9bbf8..ba393eec72 100644
--- a/packages/react/src/badge/badge.styles.ts
+++ b/packages/react/src/badge/badge.styles.ts
@@ -1,19 +1,28 @@
-import {styled, keyframes, VariantProps} from "../theme/stitches.config";
+import {styled, VariantProps} from "../theme/stitches.config";
 
-const pointAnimation = keyframes({
-  "0%": {
-    opacity: 1,
-  },
-  "50%": {
-    opacity: "0.4",
-    transform: "scale(0.5)",
-  },
-  "100%": {
-    opacity: 1,
-  },
+import {
+  pointAnimation,
+  appearanceInTopRight,
+  appearanceOutTopRight,
+  appearanceInTopLeft,
+  appearanceOutTopLeft,
+  appearanceInBottomRight,
+  appearanceOutBottomRight,
+  appearanceInBottomLeft,
+  appearanceOutBottomLeft,
+} from "./badge.animations";
+
+export const StyledBadgeRoot = styled("span", {
+  d: "inline-flex",
+  flexShrink: 0,
+  verticalAlign: "middle",
+  position: "relative",
+  overflow: "visible",
 });
 
 export const StyledBadge = styled("span", {
+  $$badgePlacementHOffset: "0%",
+  $$badgePlacementVOffset: "0%",
   display: "inline-block",
   whiteSpace: "nowrap",
   verticalAlign: "middle",
@@ -21,29 +30,55 @@ export const StyledBadge = styled("span", {
   color: "$$badgeTextColor",
   fontWeight: "$semibold",
   fontSize: "$$badgeFontSize",
+  p: "$1 $$badgeHPadding",
+  "@motion": {
+    animation: "none",
+    transition: "none",
+    "&.nextui-badge--invisible": {
+      animation: "none",
+      transition: "none",
+    },
+  },
   variants: {
     size: {
       xs: {
-        p: "$1 $3",
+        $$badgeHPadding: "$space$3",
         $$badgeFontSize: "0.65rem",
       },
       sm: {
-        p: "$1 $4",
+        $$badgeHPadding: "$space$4",
         $$badgeFontSize: "$fontSizes$xs",
       },
       md: {
-        p: "$1 $5",
+        $$badgeHPadding: "$space$4",
         $$badgeFontSize: "$fontSizes$sm",
       },
       lg: {
-        p: "$1 $6",
+        $$badgeHPadding: "$space$5",
         $$badgeFontSize: "$fontSizes$lg",
       },
       xl: {
-        p: "$1 $7",
+        $$badgeHPadding: "$space$5",
         $$badgeFontSize: "$fontSizes$xl",
       },
     },
+    shape: {
+      circle: {},
+      rectangle: {},
+    },
+    asChild: {
+      true: {
+        zIndex: "$2",
+        dflex: "center",
+        position: "absolute",
+      },
+    },
+    isOneChar: {
+      true: {
+        size: "calc($$badgeFontSize + $$badgeHPadding)",
+        p: "calc($$badgeHPadding + 1px)",
+      },
+    },
     color: {
       neutral: {
         $$badgeBackgroundColor: "$colors$neutral",
@@ -89,23 +124,53 @@ export const StyledBadge = styled("span", {
         borderRadius: "$pill",
       },
     },
+    placement: {
+      "top-right": {
+        animation: `${appearanceInTopRight} 0.25s ease-out`,
+        "&.nextui-badge--invisible": {
+          opacity: 0,
+          animation: `${appearanceOutTopRight} 0.25s ease-in`,
+        },
+      },
+      "top-left": {
+        animation: `${appearanceInTopLeft} 0.25s ease-out`,
+        "&.nextui-badge--invisible": {
+          opacity: 0,
+          animation: `${appearanceOutTopLeft} 0.25s ease-in`,
+        },
+      },
+      "bottom-right": {
+        animation: `${appearanceInBottomRight} 0.25s ease-out`,
+        "&.nextui-badge--invisible": {
+          opacity: 0,
+          animation: `${appearanceOutBottomRight} 0.25s ease-in`,
+        },
+      },
+      "bottom-left": {
+        animation: `${appearanceInBottomLeft} 0.25s ease-out`,
+        "&.nextui-badge--invisible": {
+          opacity: 0,
+          animation: `${appearanceOutBottomLeft} 0.25s ease-in`,
+        },
+      },
+    },
     variant: {
       default: {},
       flat: {},
       dot: {
+        p: 0,
         dflex: "center",
         minSize: "$$badgeFontSize",
         boxSizing: "border-box",
-        border: "2px solid $colors$background",
-        p: 0,
       },
       points: {
         p: "calc($$badgeFontSize * 0.4)",
         boxSizing: "border-box",
-        border: "2px solid $colors$background",
+        $$badgePlacementHOffset: "calc($$badgeFontSize * 0.8)",
       },
       bordered: {
-        $$badgeBackgroundColor: "$background",
+        $$badgeBackgroundColor: "$colors$background",
+        bg: "$background",
         bw: "$$badgeBorderWeight",
         borderStyle: "solid",
         borderColor: "$$badgeTextColor",
@@ -128,6 +193,21 @@ export const StyledBadge = styled("span", {
         $$badgeBorderWeight: "$borderWeights$black",
       },
     },
+    disableOutline: {
+      false: {
+        border: "2px solid $colors$background",
+      },
+    },
+    disableAnimation: {
+      true: {
+        animation: "none",
+        transition: "none",
+        "&.nextui-badge--invisible": {
+          animation: "none",
+          transition: "none",
+        },
+      },
+    },
   },
   compoundVariants: [
     /***
@@ -240,12 +320,129 @@ export const StyledBadge = styled("span", {
         $$badgeTextColor: "$colors$error",
       },
     },
+    /***
+     * @asChild true
+     * @shape {rectangle, circle}
+     * @placement {top-right, top-left, bottom-right, bottom-left}
+     */
+    // placement=top-right && shape=rectangle
+    {
+      asChild: true,
+      shape: "rectangle",
+      placement: "top-right",
+      css: {
+        top: "calc(5% + $$badgePlacementVOffset)",
+        right: "calc(5% + $$badgePlacementHOffset)",
+        transform: "scale(1) translate(50%, -50%)",
+        transformOrigin: "100% 0%",
+      },
+    },
+    // placement=top-left && shape=rectangle
+    {
+      asChild: true,
+      shape: "rectangle",
+      placement: "top-left",
+      css: {
+        top: "calc(5% + $$badgePlacementVOffset)",
+        left: "calc(5% + $$badgePlacementHOffset)",
+        transform: "scale(1) translate(-50%, -50%)",
+        transformOrigin: "0% 0%",
+      },
+    },
+    // placement=bottom-right && shape=rectangle
+    {
+      asChild: true,
+      shape: "rectangle",
+      placement: "bottom-right",
+      css: {
+        bottom: "calc(5% + $$badgePlacementVOffset)",
+        right: "calc(5% + $$badgePlacementHOffset)",
+        transform: "scale(1) translate(50%, 50%)",
+        transformOrigin: "100% 100%",
+      },
+    },
+    // placement=bottom-left && shape=rectangle
+    {
+      asChild: true,
+      shape: "rectangle",
+      placement: "bottom-left",
+      css: {
+        bottom: "calc(5% + $$badgePlacementVOffset)",
+        left: "calc(5% + $$badgePlacementHOffset)",
+        transform: "scale(1) translate(-50%, 50%)",
+        transformOrigin: "0% 100%",
+      },
+    },
+    // placement=top-right && shape=circle
+    {
+      asChild: true,
+      shape: "circle",
+      placement: "top-right",
+      css: {
+        top: "calc(14% + $$badgePlacementVOffset)",
+        right: "calc(14% + $$badgePlacementHOffset)",
+        transform: "scale(1) translate(50%, -50%)",
+        transformOrigin: "100% 0%",
+      },
+    },
+    // placement=top-left && shape=circle
+    {
+      asChild: true,
+      shape: "circle",
+      placement: "top-left",
+      css: {
+        top: "calc(14% + $$badgePlacementVOffset)",
+        left: "calc(14% + $$badgePlacementHOffset)",
+        transform: "scale(1) translate(-50%, -50%)",
+        transformOrigin: "0% 0%",
+      },
+    },
+    // placement=bottom-right && shape=circle
+    {
+      asChild: true,
+      shape: "circle",
+      placement: "bottom-right",
+      css: {
+        bottom: "calc(14% + $$badgePlacementVOffset)",
+        right: "calc(14% + $$badgePlacementHOffset)",
+        transform: "scale(1) translate(50%, 50%)",
+        transformOrigin: "100% 100%",
+      },
+    },
+    // placement=bottom-left && shape=circle
+    {
+      asChild: true,
+      shape: "circle",
+      placement: "bottom-left",
+      css: {
+        bottom: "calc(14% + $$badgePlacementVOffset)",
+        left: "calc(14% + $$badgePlacementHOffset)",
+        transform: "scale(1) translate(-50%, 50%)",
+        transformOrigin: "0% 100%",
+      },
+    },
+    /**
+     * @variant dot
+     * @shape rectangle
+     */
+    {
+      variant: "dot",
+      shape: "rectangle",
+      css: {
+        $$badgePlacementHOffset: "calc($$badgeFontSize * 0.2)",
+        $$badgePlacementVOffset: "calc($$badgeFontSize * 0.1)",
+      },
+    },
   ],
   defaultVariants: {
     size: "sm",
     color: "neutral",
     variant: "default",
     borderWeight: "normal",
+    placement: "top-right",
+    shape: "rectangle",
+    enableShadow: false,
+    disableOutline: false,
     isSquared: false,
   },
 });
@@ -254,7 +451,7 @@ export const StyledBadgePoints = styled("div", {
   position: "relative",
   dflex: "center",
   "& .nextui-badge-point": {
-    size: "calc($$badgeFontSize * 0.5)",
+    size: "calc($$badgeFontSize * 0.3)",
     background: "$$badgeTextColor",
     margin: "0 2px",
     borderRadius: "$pill",
diff --git a/packages/react/src/badge/badge.tsx b/packages/react/src/badge/badge.tsx
index 48b5f48600..a02ab0d14c 100644
--- a/packages/react/src/badge/badge.tsx
+++ b/packages/react/src/badge/badge.tsx
@@ -5,31 +5,38 @@ import clsx from "../utils/clsx";
 import {useDOMRef} from "../utils/dom";
 import {__DEV__} from "../utils/assertion";
 
-import {StyledBadge, StyledBadgePoints, BadgeVariantsProps} from "./badge.styles";
-
-export type BadgePlacement = "bottom-left" | "bottom-right" | "top-left" | "top-right";
+import {StyledBadge, StyledBadgePoints, StyledBadgeRoot, BadgeVariantsProps} from "./badge.styles";
 
 interface Props extends Omit<HTMLNextUIProps<"span">, keyof BadgeVariantsProps> {
-  placement?: BadgePlacement;
-  isVisible?: boolean;
+  invisible?: boolean;
   content?: string | number | React.ReactNode;
+  verticalOffset?: number;
+  horizontalOffset?: number;
   children?: React.ReactNode;
 }
 
-export type BadgeProps = Props & BadgeVariantsProps;
+export type BadgeProps = Props & Omit<BadgeVariantsProps, "asChild" | "isOneChar">;
 
 export const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
   const {
+    css,
     children,
-    enableShadow = false,
+    content,
+    invisible = false,
+    disableOutline,
     placement = "top-right",
     variant = "default",
+    verticalOffset,
+    horizontalOffset,
+    disableAnimation = false,
     className,
     ...otherProps
   } = props;
 
   const domRef = useDOMRef(ref);
 
+  const asChild = content !== undefined && !!children;
+
   const badgeChildren = React.useMemo(() => {
     if (variant === "dot") {
       return null;
@@ -38,26 +45,70 @@ export const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
     if (variant === "points") {
       return (
         <StyledBadgePoints className="nextui-badge-points">
-          <span className="nextui-badge-point" />
-          <span className="nextui-badge-point" />
-          <span className="nextui-badge-point" />
+          <span className="nextui-badge-point" data-testid="badge-point" />
+          <span className="nextui-badge-point" data-testid="badge-point" />
+          <span className="nextui-badge-point" data-testid="badge-point" />
         </StyledBadgePoints>
       );
     }
 
-    return children;
-  }, [variant, children]);
+    return asChild ? content : children;
+  }, [variant, asChild, content, children]);
+
+  const isOneChar = React.useMemo(() => {
+    if (asChild && content && variant !== "points" && variant !== "dot") {
+      return String(content)?.length === 1;
+    }
+    if (children && typeof children === "string") {
+      return children.length === 1;
+    }
+
+    return false;
+  }, [asChild, children, variant, content]);
+
+  const badgeCss = React.useMemo(() => {
+    if (verticalOffset && horizontalOffset) {
+      return {
+        $$badgePlacementHOffset: `${horizontalOffset}px`,
+        $$badgePlacementVOffset: `${verticalOffset}px`,
+        ...css,
+      };
+    }
+    if (verticalOffset) {
+      return {
+        $$badgePlacementVOffset: `${verticalOffset}px`,
+        ...css,
+      };
+    }
+    if (horizontalOffset) {
+      return {
+        $$badgePlacementHOffset: `${horizontalOffset}px`,
+        ...css,
+      };
+    }
+
+    return css;
+  }, [verticalOffset, horizontalOffset, css]);
 
   return (
-    <StyledBadge
-      ref={domRef}
-      className={clsx("nextui-badge", className)}
-      enableShadow={variant === "default" && enableShadow}
-      variant={variant}
-      {...otherProps}
-    >
-      {badgeChildren}
-    </StyledBadge>
+    <StyledBadgeRoot ref={domRef} className={clsx("nextui-badge-root", className)}>
+      {asChild && children}
+      <StyledBadge
+        asChild={asChild}
+        className={clsx("nextui-badge", {
+          "nextui-badge--invisible": invisible,
+        })}
+        css={badgeCss}
+        disableAnimation={disableAnimation || !asChild}
+        disableOutline={variant === "bordered" || disableOutline}
+        isOneChar={isOneChar}
+        placement={placement}
+        variant={variant}
+        {...otherProps}
+      >
+        {badgeChildren}
+      </StyledBadge>
+    </StyledBadgeRoot>
   );
 });
 
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
index 8a9a7f7c64..99556bc5be 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
@@ -20,12 +20,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria4869397505-10",
+              "aria-controls": "react-aria9350437168-10",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria4869397505-9",
+              "id": "react-aria9350437168-9",
               "role": "button",
               "tabindex": "0",
             },
@@ -324,9 +324,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria4869397505-9",
+                        "aria-labelledby": "react-aria9350437168-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria4869397505-10",
+                        "id": "react-aria9350437168-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -424,9 +424,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria4869397505-9",
+                      "aria-labelledby": "react-aria9350437168-9",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria4869397505-10",
+                      "id": "react-aria9350437168-10",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -481,12 +481,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria4869397505-10",
+                "aria-controls": "react-aria9350437168-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria4869397505-9",
+                "id": "react-aria9350437168-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -818,12 +818,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria4869397505-12",
+                "aria-controls": "react-aria9350437168-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria4869397505-11",
+                "id": "react-aria9350437168-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -1122,9 +1122,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria4869397505-11",
+                          "aria-labelledby": "react-aria9350437168-11",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria4869397505-12",
+                          "id": "react-aria9350437168-12",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -1222,9 +1222,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria4869397505-11",
+                        "aria-labelledby": "react-aria9350437168-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria4869397505-12",
+                        "id": "react-aria9350437168-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -1279,12 +1279,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria4869397505-12",
+                  "aria-controls": "react-aria9350437168-12",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria4869397505-11",
+                  "id": "react-aria9350437168-11",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -1645,12 +1645,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria4869397505-12",
+              "aria-controls": "react-aria9350437168-12",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria4869397505-11",
+              "id": "react-aria9350437168-11",
               "role": "button",
               "tabindex": "0",
             },
@@ -1949,9 +1949,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria4869397505-11",
+                        "aria-labelledby": "react-aria9350437168-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria4869397505-12",
+                        "id": "react-aria9350437168-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -2049,9 +2049,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria4869397505-11",
+                      "aria-labelledby": "react-aria9350437168-11",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria4869397505-12",
+                      "id": "react-aria9350437168-12",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -2106,12 +2106,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria4869397505-12",
+                "aria-controls": "react-aria9350437168-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria4869397505-11",
+                "id": "react-aria9350437168-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -2445,12 +2445,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria4869397505-10",
+                "aria-controls": "react-aria9350437168-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria4869397505-9",
+                "id": "react-aria9350437168-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -2749,9 +2749,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria4869397505-9",
+                          "aria-labelledby": "react-aria9350437168-9",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria4869397505-10",
+                          "id": "react-aria9350437168-10",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -2849,9 +2849,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria4869397505-9",
+                        "aria-labelledby": "react-aria9350437168-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria4869397505-10",
+                        "id": "react-aria9350437168-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -2906,12 +2906,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria4869397505-10",
+                  "aria-controls": "react-aria9350437168-10",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria4869397505-9",
+                  "id": "react-aria9350437168-9",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -3385,12 +3385,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria4869397505-6",
+              "aria-controls": "react-aria9350437168-6",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria4869397505-5",
+              "id": "react-aria9350437168-5",
               "role": "button",
               "tabindex": "0",
             },
@@ -3689,9 +3689,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria4869397505-5",
+                        "aria-labelledby": "react-aria9350437168-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria4869397505-6",
+                        "id": "react-aria9350437168-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -3789,9 +3789,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria4869397505-5",
+                      "aria-labelledby": "react-aria9350437168-5",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria4869397505-6",
+                      "id": "react-aria9350437168-6",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -3846,12 +3846,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria4869397505-6",
+                "aria-controls": "react-aria9350437168-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria4869397505-5",
+                "id": "react-aria9350437168-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -4183,12 +4183,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria4869397505-8",
+                "aria-controls": "react-aria9350437168-8",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria4869397505-7",
+                "id": "react-aria9350437168-7",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -4487,9 +4487,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria4869397505-7",
+                          "aria-labelledby": "react-aria9350437168-7",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria4869397505-8",
+                          "id": "react-aria9350437168-8",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -4587,9 +4587,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria4869397505-7",
+                        "aria-labelledby": "react-aria9350437168-7",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria4869397505-8",
+                        "id": "react-aria9350437168-8",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -4644,12 +4644,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria4869397505-8",
+                  "aria-controls": "react-aria9350437168-8",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria4869397505-7",
+                  "id": "react-aria9350437168-7",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -5010,12 +5010,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria4869397505-8",
+              "aria-controls": "react-aria9350437168-8",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria4869397505-7",
+              "id": "react-aria9350437168-7",
               "role": "button",
               "tabindex": "0",
             },
@@ -5314,9 +5314,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria4869397505-7",
+                        "aria-labelledby": "react-aria9350437168-7",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria4869397505-8",
+                        "id": "react-aria9350437168-8",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -5414,9 +5414,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria4869397505-7",
+                      "aria-labelledby": "react-aria9350437168-7",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria4869397505-8",
+                      "id": "react-aria9350437168-8",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -5471,12 +5471,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria4869397505-8",
+                "aria-controls": "react-aria9350437168-8",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria4869397505-7",
+                "id": "react-aria9350437168-7",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -5810,12 +5810,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria4869397505-6",
+                "aria-controls": "react-aria9350437168-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria4869397505-5",
+                "id": "react-aria9350437168-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -6114,9 +6114,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria4869397505-5",
+                          "aria-labelledby": "react-aria9350437168-5",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria4869397505-6",
+                          "id": "react-aria9350437168-6",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -6214,9 +6214,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria4869397505-5",
+                        "aria-labelledby": "react-aria9350437168-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria4869397505-6",
+                        "id": "react-aria9350437168-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -6271,12 +6271,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria4869397505-6",
+                  "aria-controls": "react-aria9350437168-6",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria4869397505-5",
+                  "id": "react-aria9350437168-5",
                   "role": "button",
                   "tabindex": "0",
                 },
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
index 83f9edcb18..3d6a0a45f4 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
@@ -20,12 +20,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria5654713355-10",
+              "aria-controls": "react-aria7585738573-10",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria5654713355-9",
+              "id": "react-aria7585738573-9",
               "role": "button",
               "tabindex": "0",
             },
@@ -476,9 +476,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria5654713355-9",
+                        "aria-labelledby": "react-aria7585738573-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria5654713355-10",
+                        "id": "react-aria7585738573-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -576,9 +576,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria5654713355-9",
+                      "aria-labelledby": "react-aria7585738573-9",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria5654713355-10",
+                      "id": "react-aria7585738573-10",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -633,12 +633,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria5654713355-10",
+                "aria-controls": "react-aria7585738573-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria5654713355-9",
+                "id": "react-aria7585738573-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -1122,12 +1122,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria5654713355-12",
+                "aria-controls": "react-aria7585738573-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria5654713355-11",
+                "id": "react-aria7585738573-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -1630,9 +1630,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria5654713355-11",
+                          "aria-labelledby": "react-aria7585738573-11",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria5654713355-12",
+                          "id": "react-aria7585738573-12",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -1730,9 +1730,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria5654713355-11",
+                        "aria-labelledby": "react-aria7585738573-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria5654713355-12",
+                        "id": "react-aria7585738573-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -1787,12 +1787,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria5654713355-12",
+                  "aria-controls": "react-aria7585738573-12",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria5654713355-11",
+                  "id": "react-aria7585738573-11",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -2357,12 +2357,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria5654713355-12",
+              "aria-controls": "react-aria7585738573-12",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria5654713355-11",
+              "id": "react-aria7585738573-11",
               "role": "button",
               "tabindex": "0",
             },
@@ -2865,9 +2865,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria5654713355-11",
+                        "aria-labelledby": "react-aria7585738573-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria5654713355-12",
+                        "id": "react-aria7585738573-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -2965,9 +2965,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria5654713355-11",
+                      "aria-labelledby": "react-aria7585738573-11",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria5654713355-12",
+                      "id": "react-aria7585738573-12",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -3022,12 +3022,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria5654713355-12",
+                "aria-controls": "react-aria7585738573-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria5654713355-11",
+                "id": "react-aria7585738573-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -3565,12 +3565,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria5654713355-10",
+                "aria-controls": "react-aria7585738573-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria5654713355-9",
+                "id": "react-aria7585738573-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -4021,9 +4021,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria5654713355-9",
+                          "aria-labelledby": "react-aria7585738573-9",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria5654713355-10",
+                          "id": "react-aria7585738573-10",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -4121,9 +4121,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria5654713355-9",
+                        "aria-labelledby": "react-aria7585738573-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria5654713355-10",
+                        "id": "react-aria7585738573-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -4178,12 +4178,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria5654713355-10",
+                  "aria-controls": "react-aria7585738573-10",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria5654713355-9",
+                  "id": "react-aria7585738573-9",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -4803,12 +4803,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria5654713355-4",
+              "aria-controls": "react-aria7585738573-4",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria5654713355-3",
+              "id": "react-aria7585738573-3",
               "role": "button",
               "tabindex": "0",
             },
@@ -5259,9 +5259,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria5654713355-3",
+                        "aria-labelledby": "react-aria7585738573-3",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria5654713355-4",
+                        "id": "react-aria7585738573-4",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -5359,9 +5359,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria5654713355-3",
+                      "aria-labelledby": "react-aria7585738573-3",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria5654713355-4",
+                      "id": "react-aria7585738573-4",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -5416,12 +5416,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria5654713355-4",
+                "aria-controls": "react-aria7585738573-4",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria5654713355-3",
+                "id": "react-aria7585738573-3",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -5905,12 +5905,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria5654713355-6",
+                "aria-controls": "react-aria7585738573-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria5654713355-5",
+                "id": "react-aria7585738573-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -6337,9 +6337,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria5654713355-5",
+                          "aria-labelledby": "react-aria7585738573-5",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria5654713355-6",
+                          "id": "react-aria7585738573-6",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -6437,9 +6437,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria5654713355-5",
+                        "aria-labelledby": "react-aria7585738573-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria5654713355-6",
+                        "id": "react-aria7585738573-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -6494,12 +6494,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria5654713355-6",
+                  "aria-controls": "react-aria7585738573-6",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria5654713355-5",
+                  "id": "react-aria7585738573-5",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -6988,12 +6988,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria5654713355-6",
+              "aria-controls": "react-aria7585738573-6",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria5654713355-5",
+              "id": "react-aria7585738573-5",
               "role": "button",
               "tabindex": "0",
             },
@@ -7420,9 +7420,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria5654713355-5",
+                        "aria-labelledby": "react-aria7585738573-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria5654713355-6",
+                        "id": "react-aria7585738573-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -7520,9 +7520,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria5654713355-5",
+                      "aria-labelledby": "react-aria7585738573-5",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria5654713355-6",
+                      "id": "react-aria7585738573-6",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -7577,12 +7577,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria5654713355-6",
+                "aria-controls": "react-aria7585738573-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria5654713355-5",
+                "id": "react-aria7585738573-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -8044,12 +8044,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria5654713355-4",
+                "aria-controls": "react-aria7585738573-4",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria5654713355-3",
+                "id": "react-aria7585738573-3",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -8500,9 +8500,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria5654713355-3",
+                          "aria-labelledby": "react-aria7585738573-3",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria5654713355-4",
+                          "id": "react-aria7585738573-4",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -8600,9 +8600,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria5654713355-3",
+                        "aria-labelledby": "react-aria7585738573-3",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria5654713355-4",
+                        "id": "react-aria7585738573-4",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -8657,12 +8657,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria5654713355-4",
+                  "aria-controls": "react-aria7585738573-4",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria5654713355-3",
+                  "id": "react-aria7585738573-3",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -13249,12 +13249,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria5654713355-8",
+              "aria-controls": "react-aria7585738573-8",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria5654713355-7",
+              "id": "react-aria7585738573-7",
               "role": "button",
               "tabindex": "0",
             },
@@ -13553,9 +13553,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria5654713355-7",
+                        "aria-labelledby": "react-aria7585738573-7",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria5654713355-8",
+                        "id": "react-aria7585738573-8",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -13653,9 +13653,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria5654713355-7",
+                      "aria-labelledby": "react-aria7585738573-7",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria5654713355-8",
+                      "id": "react-aria7585738573-8",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -13710,12 +13710,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria5654713355-8",
+                "aria-controls": "react-aria7585738573-8",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria5654713355-7",
+                "id": "react-aria7585738573-7",
                 "role": "button",
                 "tabindex": "0",
               },
diff --git a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
index 0216291dc6..35f2c9f621 100644
--- a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Input should be work with content 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with content 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should be work with label 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><label id=\\"react-aria806948066-20\\" class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria806948066-19\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-19\\" aria-labelledby=\\"react-aria806948066-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with label 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><label class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria8378558130-19\\" id=\\"react-aria8378558130-20\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-19\\" aria-labelledby=\\"react-aria8378558130-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different sizes 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different sizes 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different status 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"text\\" class=\\"nextui-c-jeuecp nextui-input\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria806948066-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different status 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
index 68979bda20..2e8b46339c 100644
--- a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InputPassword should render correctly 1`] = `"<div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input type=\\"password\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"false\\" id=\\"react-aria5508318060-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg viewBox=\\"0 0 24 24\\" width=\\"16\\" height=\\"16\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" class=\\"nextui-input-password-icon\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentColor;\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`InputPassword should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"password\\" id=\\"react-aria2004819011-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg class=\\"nextui-input-password-icon\\" fill=\\"none\\" height=\\"16\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" style=\\"color: currentColor;\\" viewBox=\\"0 0 24 24\\" width=\\"16\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
diff --git a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
index 8c6dbbe03d..8f7fbb2fe8 100644
--- a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria3671739032-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria3671739032-15-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria3671739032-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria3671739032-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg role=\\"presentation\\" aria-hidden=\\"true\\" focusable=\\"false\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" width=\\"22\\" height=\\"22\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria3671739032-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria3671739032-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria7384475654-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria7384475654-15-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria7384475654-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria7384475654-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria7384475654-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria7384475654-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
 
-exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria3671739032-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria3671739032-2-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria3671739032-2-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria3671739032-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria3671739032-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria3671739032-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria7384475654-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria7384475654-2-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria7384475654-2-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria7384475654-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria7384475654-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria7384475654-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
diff --git a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
index e7b4b5e098..0e2309a88f 100644
--- a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Textarea should render correctly 1`] = `"<div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"placeholder\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria7775033966-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`Textarea should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea aria-multiline=\\"true\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"placeholder\\" type=\\"text\\" id=\\"react-aria6302143503-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
 
-exports[`Textarea should work with different styles 1`] = `"<div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria7775033966-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div data-state=\\"normal\\" class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea type=\\"text\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" placeholder=\\"\\" autocomplete=\\"off\\" data-state=\\"normal\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" aria-multiline=\\"true\\" id=\\"react-aria7775033966-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Textarea should work with different styles 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria6302143503-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria6302143503-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/tests/jest-setup.js b/packages/react/tests/jest-setup.js
new file mode 100644
index 0000000000..7b66fe1604
--- /dev/null
+++ b/packages/react/tests/jest-setup.js
@@ -0,0 +1,6 @@
+// @ts-ignore
+const enzyme = require("enzyme");
+const Adapter = require("@wojtekmaj/enzyme-adapter-react-17");
+
+enzyme.configure({adapter: new Adapter()});
+
diff --git a/packages/react/tests/setup.js b/packages/react/tests/setup.js
deleted file mode 100644
index 3c53b62552..0000000000
--- a/packages/react/tests/setup.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const enzyme = require('enzyme');
-const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
-
-enzyme.configure({ adapter: new Adapter() });
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 07870c8d9b..ad5bf117cb 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -1,25 +1,28 @@
 {
-    "extends": "../../tsconfig.base.json",
-    "compilerOptions": {
-        "baseUrl": ".",
-        "jsx": "react",
-        "skipLibCheck": true,
-        "moduleResolution": "node",
-        "allowJs": true,
-        "allowSyntheticDefaultImports": true,
-        "types": ["node", "jest"],
-        "strict": false,
-        "forceConsistentCasingInFileNames": true,
-        "noEmit": true,
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "target": "es6",
-        "module": "esnext",
-        "typeRoots": [
-            "../../node_modules/@types",
-            "./typings"
-        ]
-    },
-    "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"],
-    "exclude": ["node_modules", "storybook-static", "dist", "lib"],
-}
\ No newline at end of file
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "jsx": "react",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "types": ["node", "jest"],
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "target": "es6",
+    "module": "esnext",
+    "typeRoots": ["../../node_modules/@types", "./typings"]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
+    "next-env.d.ts"
+  ],
+  "exclude": ["node_modules", "storybook-static", "dist", "lib"]
+}
diff --git a/yarn.lock b/yarn.lock
index 47c2e100b0..309ebe6c9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1274,7 +1274,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
   version "7.17.8"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
   integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
@@ -5104,21 +5104,6 @@
     lz-string "^1.4.4"
     pretty-format "^27.0.2"
 
-"@testing-library/jest-dom@^5.14.1":
-  version "5.16.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.3.tgz#b76851a909586113c20486f1679ffb4d8ec27bfa"
-  integrity sha512-u5DfKj4wfSt6akfndfu1eG06jsdyA/IUrlX2n3pyq5UXgXMhXY+NJb8eNK/7pqPWAhCKsCGWDdDO0zKMKAYkEA==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    "@types/testing-library__jest-dom" "^5.9.1"
-    aria-query "^5.0.0"
-    chalk "^3.0.0"
-    css "^3.0.0"
-    css.escape "^1.5.1"
-    dom-accessibility-api "^0.5.6"
-    lodash "^4.17.15"
-    redent "^3.0.0"
-
 "@testing-library/react-hooks@^7.0.0":
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-7.0.2.tgz#3388d07f562d91e7f2431a4a21b5186062ecfee0"
@@ -5328,14 +5313,6 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@*":
-  version "27.4.1"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.4.1.tgz#185cbe2926eaaf9662d340cc02e548ce9e11ab6d"
-  integrity sha512-23iPJADSmicDVrWk+HT58LMJtzLAnB2AgIzplQuq/bSrGaxCrlvRFjGbXmamnnk/mAmCdLStiGqggu28ocUyiw==
-  dependencies:
-    jest-matcher-utils "^27.0.0"
-    pretty-format "^27.0.0"
-
 "@types/jest@^26.0.22":
   version "26.0.24"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.24.tgz#943d11976b16739185913a1936e0de0c4a7d595a"
@@ -5560,13 +5537,6 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310"
   integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==
 
-"@types/testing-library__jest-dom@^5.9.1":
-  version "5.14.3"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz#ee6c7ffe9f8595882ee7bda8af33ae7b8789ef17"
-  integrity sha512-oKZe+Mf4ioWlMuzVBaXQ9WDnEm1+umLx0InILg+yvZVBBDmzV5KfZyLrCvadtWcx8+916jLmHafcmqqffl+iIw==
-  dependencies:
-    "@types/jest" "*"
-
 "@types/uglify-js@*":
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.13.1.tgz#5e889e9e81e94245c75b6450600e1c5ea2878aea"
@@ -7437,14 +7407,6 @@ chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
@@ -8359,20 +8321,6 @@ css-what@^5.0.1, css-what@^5.1.0:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
   integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
 
-css.escape@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
-  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
-
-css@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
-  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
-  dependencies:
-    inherits "^2.0.4"
-    source-map "^0.6.1"
-    source-map-resolve "^0.6.0"
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -8680,11 +8628,6 @@ diff-sequences@^26.6.2:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
   integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
 
-diff-sequences@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
-  integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
-
 diff@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
@@ -8737,7 +8680,7 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
+dom-accessibility-api@^0.5.9:
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.13.tgz#102ee5f25eacce09bdf1cfa5a298f86da473be4b"
   integrity sha512-R305kwb5CcMDIpSHUnLyIAp7SrSPBx6F0VfQFB3M75xVMHhXJJIdePYgbPPh1o57vCHNu5QztokWUPsLjWzFqw==
@@ -12184,16 +12127,6 @@ jest-diff@^26.0.0, jest-diff@^26.6.2:
     jest-get-type "^26.3.0"
     pretty-format "^26.6.2"
 
-jest-diff@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.5.1.tgz#a07f5011ac9e6643cf8a95a462b7b1ecf6680def"
-  integrity sha512-m0NvkX55LDt9T4mctTEgnZk3fmEg3NRYutvMPWM/0iPnkFj2wIeF45O1718cMSOFO1vINkqmxqD8vE37uTEbqw==
-  dependencies:
-    chalk "^4.0.0"
-    diff-sequences "^27.5.1"
-    jest-get-type "^27.5.1"
-    pretty-format "^27.5.1"
-
 jest-docblock@^26.0.0:
   version "26.0.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
@@ -12242,11 +12175,6 @@ jest-get-type@^26.3.0:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
   integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
 
-jest-get-type@^27.5.1:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
-  integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
-
 jest-haste-map@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
@@ -12310,16 +12238,6 @@ jest-matcher-utils@^26.6.2:
     jest-get-type "^26.3.0"
     pretty-format "^26.6.2"
 
-jest-matcher-utils@^27.0.0:
-  version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab"
-  integrity sha512-z2uTx/T6LBaCoNWNFWwChLBKYxTMcGBRjAt+2SbP929/Fflb9aa5LGma654Rz8z9HLxsrUaYzxE9T/EFIL/PAw==
-  dependencies:
-    chalk "^4.0.0"
-    jest-diff "^27.5.1"
-    jest-get-type "^27.5.1"
-    pretty-format "^27.5.1"
-
 jest-message-util@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
@@ -15341,7 +15259,7 @@ pretty-format@^26.0.0, pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
-pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.5.1:
+pretty-format@^27.0.2:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
   integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
@@ -17106,14 +17024,6 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-resolve@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
-  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-
 source-map-support@^0.5.16, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"

From dc25a5629be29c598ded3e1971aa4943e8e4c246 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 9 Jul 2022 16:00:31 -0300
Subject: [PATCH 028/106] feat(react-badge): badge component almost done

---
 apps/docs/content/components/avatar/icon.ts   |  20 +-
 apps/docs/content/components/badge/a11y.ts    |  62 ++++++
 .../docs/content/components/badge/bordered.ts |  44 ++++
 apps/docs/content/components/badge/colors.ts  |  34 +++
 .../components/badge/content-offset.ts        |  79 +++++++
 .../components/badge/content-placements.ts    |  60 ++++++
 .../content/components/badge/content-shape.ts |  35 ++++
 .../components/badge/content-visibility.ts    | 115 +++++++++++
 apps/docs/content/components/badge/content.ts | 160 +++++++++++++++
 apps/docs/content/components/badge/default.ts |  13 ++
 .../components/badge/disable-outline.ts       |  36 ++++
 apps/docs/content/components/badge/dot.ts     |  40 ++++
 apps/docs/content/components/badge/flat.ts    |  44 ++++
 apps/docs/content/components/badge/index.ts   |  35 ++++
 apps/docs/content/components/badge/points.ts  |  34 +++
 apps/docs/content/components/badge/shadow.ts  |  46 +++++
 apps/docs/content/components/badge/sizes.ts   |  82 ++++++++
 apps/docs/content/components/badge/squared.ts |  44 ++++
 apps/docs/content/components/button/icon.ts   |  32 +--
 .../components/collapse/custom-arrow.ts       |  18 +-
 .../components/dropdown/description.ts        |  16 +-
 .../components/dropdown/disable-animation.ts  |  16 +-
 apps/docs/content/components/dropdown/icon.ts |  16 +-
 .../content/components/dropdown/sections.ts   |  16 +-
 apps/docs/content/components/index.ts         |   2 +
 .../docs/content/components/input/password.ts |   8 +-
 apps/docs/content/components/switch/icon.ts   |  32 +--
 .../content/components/table/custom-cells.ts  |  18 +-
 apps/docs/content/docs/components/badge.mdx   | 143 +++++++++++++
 apps/docs/content/docs/manifest.json          |  17 +-
 apps/docs/src/components/playground/title.tsx |   1 +
 apps/docs/src/components/sandpack/themes.ts   |   4 +-
 apps/docs/src/styles/sandpack.css             |   1 +
 packages/react/.babelrc.js                    |  11 +-
 packages/react/package.json                   |   1 +
 packages/react/src/avatar/avatar.styles.ts    |  19 +-
 .../react/src/badge/__tests__/index.test.tsx  |  26 ++-
 packages/react/src/badge/badge.stories.tsx    | 194 ++++++++++++++----
 packages/react/src/badge/badge.styles.ts      | 120 ++++++++---
 packages/react/src/badge/badge.tsx            |  45 ++--
 packages/react/src/badge/index.ts             |   7 +
 .../react/src/css-baseline/css-baseline.tsx   |   5 +-
 packages/react/src/index.ts                   |   3 +
 packages/react/src/utils/icons.tsx            |  36 ++++
 yarn.lock                                     |   5 +
 45 files changed, 1539 insertions(+), 256 deletions(-)
 create mode 100644 apps/docs/content/components/badge/a11y.ts
 create mode 100644 apps/docs/content/components/badge/bordered.ts
 create mode 100644 apps/docs/content/components/badge/colors.ts
 create mode 100644 apps/docs/content/components/badge/content-offset.ts
 create mode 100644 apps/docs/content/components/badge/content-placements.ts
 create mode 100644 apps/docs/content/components/badge/content-shape.ts
 create mode 100644 apps/docs/content/components/badge/content-visibility.ts
 create mode 100644 apps/docs/content/components/badge/content.ts
 create mode 100644 apps/docs/content/components/badge/default.ts
 create mode 100644 apps/docs/content/components/badge/disable-outline.ts
 create mode 100644 apps/docs/content/components/badge/dot.ts
 create mode 100644 apps/docs/content/components/badge/flat.ts
 create mode 100644 apps/docs/content/components/badge/index.ts
 create mode 100644 apps/docs/content/components/badge/points.ts
 create mode 100644 apps/docs/content/components/badge/shadow.ts
 create mode 100644 apps/docs/content/components/badge/sizes.ts
 create mode 100644 apps/docs/content/components/badge/squared.ts
 create mode 100644 apps/docs/content/docs/components/badge.mdx

diff --git a/apps/docs/content/components/avatar/icon.ts b/apps/docs/content/components/avatar/icon.ts
index b39ba13b19..d2a408cd3d 100644
--- a/apps/docs/content/components/avatar/icon.ts
+++ b/apps/docs/content/components/avatar/icon.ts
@@ -1,6 +1,4 @@
-const SunIcon = `import { React } from '@nextui-org/react';\n
-
-export const SunIcon = ({
+const SunIcon = `export const SunIcon = ({
   fill = "currentColor",
   filled,
   size,
@@ -60,9 +58,7 @@ export const SunIcon = ({
   );
 };`;
 
-const MoonIcon = `import { React } from '@nextui-org/react';\n
-
-export const MoonIcon = ({
+const MoonIcon = `export const MoonIcon = ({
   fill = "currentColor",
   filled,
   size,
@@ -102,9 +98,7 @@ export const MoonIcon = ({
   );
 };`;
 
-const VideoIcon = `import { React } from '@nextui-org/react';\n
-
-export const VideoIcon = ({
+const VideoIcon = `export const VideoIcon = ({
   fill = "currentColor",
   filled,
   size,
@@ -145,9 +139,7 @@ export const VideoIcon = ({
   );
 };`;
 
-const VolumeUpIcon = `import { React } from '@nextui-org/react';\n
-
-export const VolumeUpIcon = ({
+const VolumeUpIcon = `export const VolumeUpIcon = ({
   fill = "currentColor",
   filled,
   size,
@@ -176,9 +168,7 @@ export const VolumeUpIcon = ({
   );
 };`;
 
-const MicrophoneIcon = `import { React } from '@nextui-org/react';\n
-
-export const MicrophoneIcon = ({
+const MicrophoneIcon = `export const MicrophoneIcon = ({
   fill = "currentColor",
   filled,
   size,
diff --git a/apps/docs/content/components/badge/a11y.ts b/apps/docs/content/components/badge/a11y.ts
new file mode 100644
index 0000000000..b7953d4430
--- /dev/null
+++ b/apps/docs/content/components/badge/a11y.ts
@@ -0,0 +1,62 @@
+const NotificationIcon = `export const NotificationIcon = ({
+  fill = "currentColor",
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      width={size || width || 24}
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M19.3399 14.49L18.3399 12.83C18.1299 12.46 17.9399 11.76 17.9399 11.35V8.82C17.9399 6.47 16.5599 4.44 14.5699 3.49C14.0499 2.57 13.0899 2 11.9899 2C10.8999 2 9.91994 2.59 9.39994 3.52C7.44994 4.49 6.09994 6.5 6.09994 8.82V11.35C6.09994 11.76 5.90994 12.46 5.69994 12.82L4.68994 14.49C4.28994 15.16 4.19994 15.9 4.44994 16.58C4.68994 17.25 5.25994 17.77 5.99994 18.02C7.93994 18.68 9.97994 19 12.0199 19C14.0599 19 16.0999 18.68 18.0399 18.03C18.7399 17.8 19.2799 17.27 19.5399 16.58C19.7999 15.89 19.7299 15.13 19.3399 14.49Z"
+        fill={fill}
+      />
+      <path
+        d="M14.8297 20.01C14.4097 21.17 13.2997 22 11.9997 22C11.2097 22 10.4297 21.68 9.87969 21.11C9.55969 20.81 9.31969 20.41 9.17969 20C9.30969 20.02 9.43969 20.03 9.57969 20.05C9.80969 20.08 10.0497 20.11 10.2897 20.13C10.8597 20.18 11.4397 20.21 12.0197 20.21C12.5897 20.21 13.1597 20.18 13.7197 20.13C13.9297 20.11 14.1397 20.1 14.3397 20.07C14.4997 20.05 14.6597 20.03 14.8297 20.01Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};`;
+
+const App = `import { Badge, Grid, styled } from "@nextui-org/react";
+import { CartIcon } from "./CartIcon";
+
+const StyledButton = styled("button", {
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  '&:active': {
+    opacity: 0.8,
+  }
+});
+
+export default function App() {
+  return (
+    <Grid.Container alignItems="center" gap={2}>
+      <Grid>
+        <StyledButton aria-label="more than 99 notifications">
+          <Badge color="error" content="99+" shape="circle">
+            <NotificationIcon fill="currentColor" size={30} />
+          </Badge>
+        </StyledButton>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+  "/NotificationIcon.js": NotificationIcon,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/bordered.ts b/apps/docs/content/components/badge/bordered.ts
new file mode 100644
index 0000000000..524897686a
--- /dev/null
+++ b/apps/docs/content/components/badge/bordered.ts
@@ -0,0 +1,44 @@
+const App = `import { Badge, Grid } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Badge variant="bordered">Neutral</Badge>
+      </Grid>
+      <Grid>
+        <Badge color="primary" variant="bordered">
+          Primary
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="secondary" variant="bordered">
+          Secondary
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="success" variant="bordered">
+          Success
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="warning" variant="bordered">
+          Warning
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" variant="bordered">
+          Error
+        </Badge>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/colors.ts b/apps/docs/content/components/badge/colors.ts
new file mode 100644
index 0000000000..16ecaa010a
--- /dev/null
+++ b/apps/docs/content/components/badge/colors.ts
@@ -0,0 +1,34 @@
+const App = `import { Badge, Grid } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Badge>Neutral</Badge>
+      </Grid>
+      <Grid>
+        <Badge color="primary">Primary</Badge>
+      </Grid>
+      <Grid>
+        <Badge color="secondary">Secondary</Badge>
+      </Grid>
+      <Grid>
+        <Badge color="success">Success</Badge>
+      </Grid>
+      <Grid>
+        <Badge color="warning">Warning</Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error">Error</Badge>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/content-offset.ts b/apps/docs/content/components/badge/content-offset.ts
new file mode 100644
index 0000000000..138f9d7c28
--- /dev/null
+++ b/apps/docs/content/components/badge/content-offset.ts
@@ -0,0 +1,79 @@
+const CheckIcon = `export const CheckIcon = ({
+  fill = "currentColor",
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      width={size || width || 18}
+      height={size || height || 18}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.75 11.9999L10.58 14.8299L16.25 9.16992"
+        stroke={fill}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};`;
+
+const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
+import { CheckIcon } from "./CheckIcon";
+
+export default function App() {
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Badge
+          color="success"
+          shape="rectangle"
+          content={<CheckIcon width={24} height={24} />}
+          css={{ p: "0" }}
+          horizontalOffset="45%"
+          verticalOffset="45%"
+        >
+          <Avatar
+            squared
+            bordered
+            size="lg"
+            color="success"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267073"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge
+          content={<CheckIcon />}
+          css={{ p: 0 }}
+          shape="circle"
+          placement="bottom-right"
+          horizontalOffset="35%"
+          verticalOffset="-10%"
+          size="xs"
+        >
+          <Avatar
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+          />
+        </Badge>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+  "/CheckIcon.js": CheckIcon,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/content-placements.ts b/apps/docs/content/components/badge/content-placements.ts
new file mode 100644
index 0000000000..ca2dbd60ef
--- /dev/null
+++ b/apps/docs/content/components/badge/content-placements.ts
@@ -0,0 +1,60 @@
+const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Badge color="error" content={5}>
+          <Avatar
+            bordered
+            squared
+            color="primary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content={5} placement="bottom-right">
+          <Avatar
+            bordered
+            squared
+            color="primary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content={5} placement="top-left">
+          <Avatar
+            bordered
+            squared
+            color="primary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content={5} placement="bottom-left">
+          <Avatar
+            bordered
+            squared
+            color="primary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267073"
+          />
+        </Badge>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/content-shape.ts b/apps/docs/content/components/badge/content-shape.ts
new file mode 100644
index 0000000000..beda4a7707
--- /dev/null
+++ b/apps/docs/content/components/badge/content-shape.ts
@@ -0,0 +1,35 @@
+const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Badge color="error" content={5} shape="rectangle">
+          <Avatar
+            squared
+            color="primary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content={5} shape="circle">
+          <Avatar
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267073"
+          />
+        </Badge>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/content-visibility.ts b/apps/docs/content/components/badge/content-visibility.ts
new file mode 100644
index 0000000000..4615dc1d5b
--- /dev/null
+++ b/apps/docs/content/components/badge/content-visibility.ts
@@ -0,0 +1,115 @@
+const NotificationIcon = `export const NotificationIcon = ({
+  fill = "currentColor",
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      width={size || width || 24}
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M19.3399 14.49L18.3399 12.83C18.1299 12.46 17.9399 11.76 17.9399 11.35V8.82C17.9399 6.47 16.5599 4.44 14.5699 3.49C14.0499 2.57 13.0899 2 11.9899 2C10.8999 2 9.91994 2.59 9.39994 3.52C7.44994 4.49 6.09994 6.5 6.09994 8.82V11.35C6.09994 11.76 5.90994 12.46 5.69994 12.82L4.68994 14.49C4.28994 15.16 4.19994 15.9 4.44994 16.58C4.68994 17.25 5.25994 17.77 5.99994 18.02C7.93994 18.68 9.97994 19 12.0199 19C14.0599 19 16.0999 18.68 18.0399 18.03C18.7399 17.8 19.2799 17.27 19.5399 16.58C19.7999 15.89 19.7299 15.13 19.3399 14.49Z"
+        fill={fill}
+      />
+      <path
+        d="M14.8297 20.01C14.4097 21.17 13.2997 22 11.9997 22C11.2097 22 10.4297 21.68 9.87969 21.11C9.55969 20.81 9.31969 20.41 9.17969 20C9.30969 20.02 9.43969 20.03 9.57969 20.05C9.80969 20.08 10.0497 20.11 10.2897 20.13C10.8597 20.18 11.4397 20.21 12.0197 20.21C12.5897 20.21 13.1597 20.18 13.7197 20.13C13.9297 20.11 14.1397 20.1 14.3397 20.07C14.4997 20.05 14.6597 20.03 14.8297 20.01Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};`;
+
+const CartIcon = `export const CartIcon = ({
+  fill = "currentColor",
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      width={size || width || 24}
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16.25 22.5C17.2165 22.5 18 21.7165 18 20.75C18 19.7835 17.2165 19 16.25 19C15.2835 19 14.5 19.7835 14.5 20.75C14.5 21.7165 15.2835 22.5 16.25 22.5Z"
+        fill={fill}
+      />
+      <path
+        d="M8.25 22.5C9.2165 22.5 10 21.7165 10 20.75C10 19.7835 9.2165 19 8.25 19C7.2835 19 6.5 19.7835 6.5 20.75C6.5 21.7165 7.2835 22.5 8.25 22.5Z"
+        fill={fill}
+      />
+      <path
+        d="M4.84 3.94L4.64 6.39C4.6 6.86 4.97 7.25 5.44 7.25H20.75C21.17 7.25 21.52 6.93 21.55 6.51C21.68 4.74 20.33 3.3 18.56 3.3H6.27C6.17 2.86 5.97 2.44 5.66 2.09C5.16 1.56 4.46 1.25 3.74 1.25H2C1.59 1.25 1.25 1.59 1.25 2C1.25 2.41 1.59 2.75 2 2.75H3.74C4.05 2.75 4.34 2.88 4.55 3.1C4.76 3.33 4.86 3.63 4.84 3.94Z"
+        fill={fill}
+      />
+      <path
+        d="M20.5101 8.75H5.17005C4.75005 8.75 4.41005 9.07 4.37005 9.48L4.01005 13.83C3.87005 15.54 5.21005 17 6.92005 17H18.0401C19.5401 17 20.8601 15.77 20.9701 14.27L21.3001 9.6C21.3401 9.14 20.9801 8.75 20.5101 8.75Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};`;
+
+const App = `import { Badge, Grid } from "@nextui-org/react";
+import { NotificationIcon } from './NotificationIcon';
+import { CartIcon } from './CartIcon';
+
+export default function App() {
+  const [isInvisible, setIsInvisible] = React.useState(false);
+
+  return (
+    <Grid.Container alignItems="center" gap={2}>
+      <Grid>
+        <Badge
+          color="error"
+          content={5}
+          isInvisible={isInvisible}
+          shape="circle"
+        >
+          <NotificationIcon fill="currentColor" size={30} />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge
+          color="error"
+          content="9+"
+          isInvisible={isInvisible}
+          shape="circle"
+        >
+          <CartIcon fill="currentColor" size={30} />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Row align="center">
+          <Switch
+            initialChecked
+            onChange={(ev) => setIsInvisible(!ev.target.checked)}
+          />
+          <Text css={{ ml: "$3" }}>Show badge</Text>
+        </Row>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+  "/NotificationIcon.js": NotificationIcon,
+  "/CartIcon.js": CartIcon,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/content.ts b/apps/docs/content/components/badge/content.ts
new file mode 100644
index 0000000000..c766109e62
--- /dev/null
+++ b/apps/docs/content/components/badge/content.ts
@@ -0,0 +1,160 @@
+const CheckIcon = `export const CheckIcon = ({
+  fill = "currentColor",
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      width={size || width || 18}
+      height={size || height || 18}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.75 11.9999L10.58 14.8299L16.25 9.16992"
+        stroke={fill}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};`;
+
+const NotificationIcon = `export const NotificationIcon = ({
+  fill = "currentColor",
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      width={size || width || 24}
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M19.3399 14.49L18.3399 12.83C18.1299 12.46 17.9399 11.76 17.9399 11.35V8.82C17.9399 6.47 16.5599 4.44 14.5699 3.49C14.0499 2.57 13.0899 2 11.9899 2C10.8999 2 9.91994 2.59 9.39994 3.52C7.44994 4.49 6.09994 6.5 6.09994 8.82V11.35C6.09994 11.76 5.90994 12.46 5.69994 12.82L4.68994 14.49C4.28994 15.16 4.19994 15.9 4.44994 16.58C4.68994 17.25 5.25994 17.77 5.99994 18.02C7.93994 18.68 9.97994 19 12.0199 19C14.0599 19 16.0999 18.68 18.0399 18.03C18.7399 17.8 19.2799 17.27 19.5399 16.58C19.7999 15.89 19.7299 15.13 19.3399 14.49Z"
+        fill={fill}
+      />
+      <path
+        d="M14.8297 20.01C14.4097 21.17 13.2997 22 11.9997 22C11.2097 22 10.4297 21.68 9.87969 21.11C9.55969 20.81 9.31969 20.41 9.17969 20C9.30969 20.02 9.43969 20.03 9.57969 20.05C9.80969 20.08 10.0497 20.11 10.2897 20.13C10.8597 20.18 11.4397 20.21 12.0197 20.21C12.5897 20.21 13.1597 20.18 13.7197 20.13C13.9297 20.11 14.1397 20.1 14.3397 20.07C14.4997 20.05 14.6597 20.03 14.8297 20.01Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};`;
+
+const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
+import { NotificationIcon } from './NotificationIcon"
+import { CheckIcon } from "./CheckIcon";
+
+export default function App() {
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Badge color="error" content={5}>
+          <Avatar
+            bordered
+            squared
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge
+          content=""
+          color="success"
+          placement="bottom-right"
+          shape="circle"
+          variant="dot"
+          size="md"
+        >
+          <Avatar
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge
+          content=""
+          isSquared
+          color="primary"
+          placement="bottom-right"
+          variant="points"
+          size="md"
+        >
+          <Avatar
+            squared
+            size="lg"
+            src="https://i.pravatar.cc/150?u=a04258114e29026702d"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge content="new" color="error" placement="top-right" size="xs">
+          <Avatar
+            bordered
+            squared
+            size="lg"
+            color="error"
+            src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge
+          content={<CheckIcon />}
+          color="success"
+          css={{ p: 0 }}
+          placement="bottom-right"
+          size="xs"
+        >
+          <Avatar
+            bordered
+            squared
+            size="lg"
+            color="success"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge
+          content={<NotificationIcon fill="currentColor" size={12} />}
+          css={{p: "$2"}}
+          color="error"
+          placement="top-right"
+          shape="circle"
+          size="md"
+        >
+          <Avatar
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e29026704f"
+          />
+        </Badge>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+  "/CheckIcon.js": CheckIcon,
+  "/NotificationIcon.js": NotificationIcon,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/default.ts b/apps/docs/content/components/badge/default.ts
new file mode 100644
index 0000000000..f07f6e7c87
--- /dev/null
+++ b/apps/docs/content/components/badge/default.ts
@@ -0,0 +1,13 @@
+const App = `import { Badge } from "@nextui-org/react";
+
+export default function App() {
+  return <Badge>DEFAULT</Badge>;
+}`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/disable-outline.ts b/apps/docs/content/components/badge/disable-outline.ts
new file mode 100644
index 0000000000..8679e37c1f
--- /dev/null
+++ b/apps/docs/content/components/badge/disable-outline.ts
@@ -0,0 +1,36 @@
+const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Badge color="error" content={5} shape="rectangle" size="md">
+          <Avatar
+            squared
+            color="primary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge disableOutline color="error" content={5} shape="circle" size="md">
+          <Avatar
+            squared
+            color="primary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+          />
+        </Badge>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/dot.ts b/apps/docs/content/components/badge/dot.ts
new file mode 100644
index 0000000000..9f1640adf9
--- /dev/null
+++ b/apps/docs/content/components/badge/dot.ts
@@ -0,0 +1,40 @@
+const App = `import { Badge, Text, Grid } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Grid.Container gap={0.5}>
+      <Grid xs={12} alignItems="center">
+        <Badge variant="dot" />
+        <Text css={{ ml: "$2" }}>Default</Text>
+      </Grid>
+      <Grid xs={12} alignItems="center">
+        <Badge color="primary" variant="dot" />
+        <Text css={{ ml: "$2" }}>Primary</Text>
+      </Grid>
+      <Grid xs={12} alignItems="center">
+        <Badge color="secondary" variant="dot" />
+        <Text css={{ ml: "$2" }}>Secondary</Text>
+      </Grid>
+      <Grid xs={12} alignItems="center">
+        <Badge color="success" variant="dot" />
+        <Text css={{ ml: "$2" }}>Success</Text>
+      </Grid>
+      <Grid xs={12} alignItems="center">
+        <Badge color="warning" variant="dot" />
+        <Text css={{ ml: "$2" }}>Warning</Text>
+      </Grid>
+      <Grid xs={12} alignItems="center">
+        <Badge color="error" variant="dot" />
+        <Text css={{ ml: "$2" }}>Error</Text>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/flat.ts b/apps/docs/content/components/badge/flat.ts
new file mode 100644
index 0000000000..684e023d7c
--- /dev/null
+++ b/apps/docs/content/components/badge/flat.ts
@@ -0,0 +1,44 @@
+const App = `import { Badge, Grid } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Badge variant="flat">Neutral</Badge>
+      </Grid>
+      <Grid>
+        <Badge color="primary" variant="flat">
+          Primary
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="secondary" variant="flat">
+          Secondary
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="success" variant="flat">
+          Success
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="warning" variant="flat">
+          Warning
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" variant="flat">
+          Error
+        </Badge>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/index.ts b/apps/docs/content/components/badge/index.ts
new file mode 100644
index 0000000000..d0eec823c1
--- /dev/null
+++ b/apps/docs/content/components/badge/index.ts
@@ -0,0 +1,35 @@
+import defaultBadge from "./default";
+import sizesBadge from "./sizes";
+import colorsBadge from "./colors";
+import shadowBadge from "./shadow";
+import dotBadge from "./dot";
+import pointsBadge from "./points";
+import borderedBadge from "./bordered";
+import flatBadge from "./flat";
+import squaredBadge from "./squared";
+import contentBadge from "./content";
+import contentPlacementsBadge from "./content-placements";
+import contentShapeBadge from "./content-shape";
+import contentVisibilityBadge from "./content-visibility";
+import contentOffset from "./content-offset";
+import disableOutline from "./disable-outline";
+import a11y from "./a11y";
+
+export default {
+  defaultBadge,
+  sizesBadge,
+  colorsBadge,
+  shadowBadge,
+  dotBadge,
+  pointsBadge,
+  borderedBadge,
+  flatBadge,
+  squaredBadge,
+  contentBadge,
+  contentPlacementsBadge,
+  contentShapeBadge,
+  contentVisibilityBadge,
+  contentOffset,
+  disableOutline,
+  a11y,
+};
diff --git a/apps/docs/content/components/badge/points.ts b/apps/docs/content/components/badge/points.ts
new file mode 100644
index 0000000000..e2f097d081
--- /dev/null
+++ b/apps/docs/content/components/badge/points.ts
@@ -0,0 +1,34 @@
+const App = `import { Badge, Grid } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Badge variant="points" />
+      </Grid>
+      <Grid>
+        <Badge color="primary" variant="points" />
+      </Grid>
+      <Grid>
+        <Badge color="secondary" variant="points" />
+      </Grid>
+      <Grid>
+        <Badge color="success" variant="points" />
+      </Grid>
+      <Grid>
+        <Badge color="warning" variant="points" />
+      </Grid>
+      <Grid>
+        <Badge color="error" variant="points" />
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/shadow.ts b/apps/docs/content/components/badge/shadow.ts
new file mode 100644
index 0000000000..789e9218ec
--- /dev/null
+++ b/apps/docs/content/components/badge/shadow.ts
@@ -0,0 +1,46 @@
+const App = `import { Badge, Grid } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Badge enableShadow disableOutline>
+          Neutral
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge enableShadow disableOutline color="primary">
+          Primary
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge enableShadow disableOutline color="secondary">
+          Secondary
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge enableShadow disableOutline color="success">
+          Success
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge enableShadow disableOutline color="warning">
+          Warning
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge enableShadow disableOutline color="error">
+          Error
+        </Badge>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/sizes.ts b/apps/docs/content/components/badge/sizes.ts
new file mode 100644
index 0000000000..8fb7a76f5c
--- /dev/null
+++ b/apps/docs/content/components/badge/sizes.ts
@@ -0,0 +1,82 @@
+const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Grid.Container>
+      <Grid.Container alignItems="center" gap={1}>
+        <Grid>
+          <Badge size="xs">New (xs)</Badge>
+        </Grid>
+        <Grid>
+          <Badge size="sm">New (sm)</Badge>
+        </Grid>
+        <Grid>
+          <Badge size="md">New (md)</Badge>
+        </Grid>
+        <Grid>
+          <Badge size="lg">New (lg)</Badge>
+        </Grid>
+        <Grid>
+          <Badge size="xl">New (xl)</Badge>
+        </Grid>
+      </Grid.Container>
+      <Spacer y={0.5} />
+      <Grid.Container gap={1}>
+        <Grid>
+          <Badge disableOutline content="xs" size="xs">
+            <Avatar
+              squared
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
+            />
+          </Badge>
+        </Grid>
+        <Grid>
+          <Badge disableOutline content="sm" size="sm">
+            <Avatar
+              squared
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
+            />
+          </Badge>
+        </Grid>
+        <Grid>
+          <Badge disableOutline content="md" size="md">
+            <Avatar
+              squared
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+            />
+          </Badge>
+        </Grid>
+        <Grid>
+          <Badge disableOutline content="lg" size="lg">
+            <Avatar
+              squared
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e290267073"
+            />
+          </Badge>
+        </Grid>
+        <Grid>
+          <Badge disableOutline content="xl" size="xl">
+            <Avatar
+              squared
+              size="lg"
+              src="https://i.pravatar.cc/300?u=a042581f4e290267071"
+            />
+          </Badge>
+        </Grid>
+      </Grid.Container>
+    </Grid.Container>
+  );
+}
+`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/badge/squared.ts b/apps/docs/content/components/badge/squared.ts
new file mode 100644
index 0000000000..d13dcc2768
--- /dev/null
+++ b/apps/docs/content/components/badge/squared.ts
@@ -0,0 +1,44 @@
+const App = `import { Badge, Grid } from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Grid.Container gap={2}>
+      <Grid>
+        <Badge isSquared>Neutral</Badge>
+      </Grid>
+      <Grid>
+        <Badge isSquared color="primary" variant="bordered">
+          Primary
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge isSquared color="secondary" variant="flat">
+          Secondary
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge isSquared color="success">
+          Success
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge isSquared color="warning" variant="bordered">
+          Warning
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge isSquared color="error" variant="flat">
+          Error
+        </Badge>
+      </Grid>
+    </Grid.Container>
+  );
+}`;
+
+const react = {
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/button/icon.ts b/apps/docs/content/components/button/icon.ts
index dfc371635b..e8dc61169b 100644
--- a/apps/docs/content/components/button/icon.ts
+++ b/apps/docs/content/components/button/icon.ts
@@ -1,6 +1,4 @@
-const HeartIcon = `import { React } from '@nextui-org/react';\n
-
-export const HeartIcon = ({
+const HeartIcon = `export const HeartIcon = ({
   fill = 'currentColor',
   filled,
   size,
@@ -27,11 +25,9 @@ export const HeartIcon = ({
       />
     </svg>
   );
-}`;
-
-const CameraIcon = `import { React } from '@nextui-org/react';\n
+};`;
 
-export const CameraIcon = ({
+const CameraIcon = `export const CameraIcon = ({
   fill = 'currentColor',
   filled,
   size,
@@ -57,11 +53,9 @@ export const CameraIcon = ({
       />
     </svg>
   );
-}`;
-
-const LockIcon = `import { React } from '@nextui-org/react';\n
+};`;
 
-export const LockIcon = ({
+const LockIcon = `export const LockIcon = ({
   fill = 'currentColor',
   filled,
   size,
@@ -99,11 +93,9 @@ export const LockIcon = ({
       </g>
     </svg>
   );
-}`;
+};`;
 
-const NotificationIcon = `import { React } from '@nextui-org/react';\n
-
-export const NotificationIcon = ({
+const NotificationIcon = `export const NotificationIcon = ({
   fill = 'currentColor',
   filled,
   size,
@@ -129,11 +121,9 @@ export const NotificationIcon = ({
       />
     </svg>
   );
-}`;
-
-const UserIcon = `import { React } from '@nextui-org/react';\n
+};`;
 
-export const UserIcon = ({
+const UserIcon = `export const UserIcon = ({
   fill = 'currentColor',
   filled,
   size,
@@ -172,7 +162,7 @@ export const UserIcon = ({
   );
 }`;
 
-const AppJs = `import { Button,Spacer } from '@nextui-org/react';
+const AppJs = `import { Button, Spacer } from '@nextui-org/react';
 import { HeartIcon } from './HeartIcon';
 import { CameraIcon } from './CameraIcon';
 import { LockIcon } from './LockIcon';
@@ -212,12 +202,12 @@ export default function App() {
 }`;
 
 const react = {
+  "/App.js": AppJs,
   "/HeartIcon.js": HeartIcon,
   "/CameraIcon.js": CameraIcon,
   "/LockIcon.js": LockIcon,
   "/NotificationIcon.js": NotificationIcon,
   "/UserIcon.js": UserIcon,
-  "/App.js": AppJs,
 };
 
 export default {
diff --git a/apps/docs/content/components/collapse/custom-arrow.ts b/apps/docs/content/components/collapse/custom-arrow.ts
index d872f8abd5..30893e0ea5 100644
--- a/apps/docs/content/components/collapse/custom-arrow.ts
+++ b/apps/docs/content/components/collapse/custom-arrow.ts
@@ -1,6 +1,4 @@
-const SunIcon = `import { React } from '@nextui-org/react';
-
-export const SunIcon = ({
+const SunIcon = `export const SunIcon = ({
   fill = 'currentColor',
   filled,
   size,
@@ -58,11 +56,9 @@ export const SunIcon = ({
       ></path>
     </svg>
   );
-}`;
-
-const MoonIcon = `import { React } from '@nextui-org/react';
+};`;
 
-export const MoonIcon = ({
+const MoonIcon = `export const MoonIcon = ({
   fill = 'currentColor',
   filled,
   size,
@@ -100,11 +96,9 @@ export const MoonIcon = ({
       ></path>
     </svg>
   );
-}`;
-
-const AnchorIcon = `import { React } from '@nextui-org/react';
+};`;
 
-export const AnchorIcon = ({
+const AnchorIcon = `export const AnchorIcon = ({
   fill = 'currentColor',
   filled,
   size,
@@ -131,7 +125,7 @@ export const AnchorIcon = ({
       ></path>
     </svg>
   );
-}`;
+};`;
 
 const AppJs = `import { Collapse,Text,Grid } from '@nextui-org/react';
 import { SunIcon } from './SunIcon';
diff --git a/apps/docs/content/components/dropdown/description.ts b/apps/docs/content/components/dropdown/description.ts
index f36b53eeb8..d82635e526 100644
--- a/apps/docs/content/components/dropdown/description.ts
+++ b/apps/docs/content/components/dropdown/description.ts
@@ -1,6 +1,4 @@
-const AddNoteIcon = `import { React } from "@nextui-org/react";
-
-export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
+const AddNoteIcon = `export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,9 +20,7 @@ export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const CopyDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const CopyDocumentIcon = `export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -50,9 +46,7 @@ export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const EditDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const EditDocumentIcon = `export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -74,9 +68,7 @@ export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const DeleteDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const DeleteDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const DeleteDocumentIcon = `export const DeleteDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/docs/content/components/dropdown/disable-animation.ts b/apps/docs/content/components/dropdown/disable-animation.ts
index 61d853f026..251a566cd2 100644
--- a/apps/docs/content/components/dropdown/disable-animation.ts
+++ b/apps/docs/content/components/dropdown/disable-animation.ts
@@ -1,6 +1,4 @@
-const AddNoteIcon = `import { React } from "@nextui-org/react";
-
-export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
+const AddNoteIcon = `export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,9 +20,7 @@ export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const CopyDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const CopyDocumentIcon = `export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -50,9 +46,7 @@ export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const EditDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const EditDocumentIcon = `export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -74,9 +68,7 @@ export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const DeleteDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const DeleteDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const DeleteDocumentIcon = `export const DeleteDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/docs/content/components/dropdown/icon.ts b/apps/docs/content/components/dropdown/icon.ts
index 8848dd3aa6..c3938c7735 100644
--- a/apps/docs/content/components/dropdown/icon.ts
+++ b/apps/docs/content/components/dropdown/icon.ts
@@ -1,6 +1,4 @@
-const AddNoteIcon = `import { React } from "@nextui-org/react";
-
-export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
+const AddNoteIcon = `export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,9 +20,7 @@ export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const CopyDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const CopyDocumentIcon = `export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -50,9 +46,7 @@ export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const EditDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const EditDocumentIcon = `export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -74,9 +68,7 @@ export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const DeleteDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const DeleteDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const DeleteDocumentIcon = `export const DeleteDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/docs/content/components/dropdown/sections.ts b/apps/docs/content/components/dropdown/sections.ts
index f80628a63a..07b7d83729 100644
--- a/apps/docs/content/components/dropdown/sections.ts
+++ b/apps/docs/content/components/dropdown/sections.ts
@@ -1,6 +1,4 @@
-const AddNoteIcon = `import { React } from "@nextui-org/react";
-
-export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
+const AddNoteIcon = `export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -22,9 +20,7 @@ export const AddNoteIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const CopyDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const CopyDocumentIcon = `export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -50,9 +46,7 @@ export const CopyDocumentIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const EditDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const EditDocumentIcon = `export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -74,9 +68,7 @@ export const EditDocumentIcon = ({ fill, size, height, width, ...props }) => {
   );
 };`;
 
-const DeleteDocumentIcon = `import { React } from "@nextui-org/react";
-
-export const DeleteDocumentIcon = ({ fill, size, height, width, ...props }) => {
+const DeleteDocumentIcon = `export const DeleteDocumentIcon = ({ fill, size, height, width, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/docs/content/components/index.ts b/apps/docs/content/components/index.ts
index 9795b06b7e..6ec5d281a5 100644
--- a/apps/docs/content/components/index.ts
+++ b/apps/docs/content/components/index.ts
@@ -24,6 +24,7 @@ import gridContent from "./grid";
 import spacerContent from "./spacer";
 import popoverContent from "./popover";
 import dropdownContent from "./dropdown";
+import badgeContent from "./badge";
 
 export default {
   tableContent,
@@ -52,4 +53,5 @@ export default {
   spacerContent,
   popoverContent,
   dropdownContent,
+  badgeContent,
 };
diff --git a/apps/docs/content/components/input/password.ts b/apps/docs/content/components/input/password.ts
index 467246424a..94fb88c018 100644
--- a/apps/docs/content/components/input/password.ts
+++ b/apps/docs/content/components/input/password.ts
@@ -1,6 +1,4 @@
-const LockIcon = `import { React } from '@nextui-org/react';
-
-export const LockIcon = ({
+const LockIcon = `export const LockIcon = ({
   fill,
   filled,
   size,
@@ -40,9 +38,7 @@ export const LockIcon = ({
   );
 };`;
 
-const UnLockIcon = `import { React } from "@nextui-org/react";
-
-export const UnLockIcon = ({
+const UnLockIcon = `export const UnLockIcon = ({
   fill,
   filled,
   size,
diff --git a/apps/docs/content/components/switch/icon.ts b/apps/docs/content/components/switch/icon.ts
index 190f1b3e73..9e271b919e 100644
--- a/apps/docs/content/components/switch/icon.ts
+++ b/apps/docs/content/components/switch/icon.ts
@@ -1,6 +1,4 @@
-const SunIcon = `import { React } from '@nextui-org/react';\n
-
-export const SunIcon = ({
+const SunIcon = `export const SunIcon = ({
   fill = "currentColor",
   filled,
   size,
@@ -60,9 +58,7 @@ export const SunIcon = ({
   );
 };`;
 
-const MoonIcon = `import { React } from '@nextui-org/react';\n
-
-export const MoonIcon = ({
+const MoonIcon = `export const MoonIcon = ({
   fill = "currentColor",
   filled,
   size,
@@ -102,9 +98,7 @@ export const MoonIcon = ({
   );
 };`;
 
-const VideoIcon = `import { React } from '@nextui-org/react';\n
-
-export const VideoIcon = ({
+const VideoIcon = `export const VideoIcon = ({
   fill = "currentColor",
   filled,
   size,
@@ -145,9 +139,7 @@ export const VideoIcon = ({
   );
 };`;
 
-const VideoOffIcon = `import { React } from '@nextui-org/react';\n
-
-export const VideoOffIcon = ({
+const VideoOffIcon = `export const VideoOffIcon = ({
   fill = "currentColor",
   filled,
   size,
@@ -188,9 +180,7 @@ export const VideoOffIcon = ({
   );
 };`;
 
-const VolumeUpIcon = `import { React } from '@nextui-org/react';\n
-
-export const VolumeUpIcon = ({
+const VolumeUpIcon = `export const VolumeUpIcon = ({
   fill = "currentColor",
   size,
   height,
@@ -218,9 +208,7 @@ export const VolumeUpIcon = ({
   );
 };`;
 
-const NotificationIcon = `import { React } from '@nextui-org/react';\n
-
-export const NotificationIcon = ({
+const NotificationIcon = `export const NotificationIcon = ({
   fill = "currentColor",
   filled,
   size,
@@ -248,9 +236,7 @@ export const NotificationIcon = ({
   );
 };`;
 
-const MicrophoneIcon = `import { React } from '@nextui-org/react';\n
-
-export const MicrophoneIcon = ({
+const MicrophoneIcon = `export const MicrophoneIcon = ({
  fill = "currentColor",
   filled,
   size,
@@ -299,9 +285,7 @@ export const MicrophoneIcon = ({
   );
 };`;
 
-const MicrophoneOffIcon = `import { React } from '@nextui-org/react';\n
-
-export const MicrophoneOffIcon = ({
+const MicrophoneOffIcon = `export const MicrophoneOffIcon = ({
   fill = "currentColor",
   filled,
   size,
diff --git a/apps/docs/content/components/table/custom-cells.ts b/apps/docs/content/components/table/custom-cells.ts
index 27436cf2f0..90ebff99c3 100644
--- a/apps/docs/content/components/table/custom-cells.ts
+++ b/apps/docs/content/components/table/custom-cells.ts
@@ -54,8 +54,7 @@ export const IconButton = styled('button', {
   }
 });`;
 
-const EyeIconTs = `import { React } from '@nextui-org/react';\n
-type IconProps = {
+const EyeIconTs = `type IconProps = {
   fill?: string;
   size?: string | number;
   height?: string | number;
@@ -96,8 +95,7 @@ export const EyeIcon: React.FC<IconProps> = ({
   );
 };`;
 
-const EditIconTs = `import { React } from '@nextui-org/react';\n
-type IconProps = {
+const EditIconTs = `type IconProps = {
   fill?: string;
   size?: string | number;
   height?: string | number;
@@ -148,8 +146,7 @@ export const EditIcon: React.FC<IconProps> = ({
   );
 };`;
 
-const DeleteIconTs = `import { React } from '@nextui-org/react';\n
-type IconProps = {
+const DeleteIconTs = `type IconProps = {
   fill?: string;
   size?: string | number;
   height?: string | number;
@@ -211,8 +208,7 @@ export const DeleteIcon: React.FC<IconProps> = ({
   );
 };`;
 
-const EyeIconJs = `import { React } from '@nextui-org/react';\n
-export const EyeIcon = ({
+const EyeIconJs = `export const EyeIcon = ({
   fill,
   size,
   height,
@@ -246,8 +242,7 @@ export const EyeIcon = ({
   );
 };`;
 
-const EditIconJs = `import { React } from '@nextui-org/react';\n
-export const EditIcon = ({
+const EditIconJs = `export const EditIcon = ({
   fill,
   size,
   height,
@@ -291,8 +286,7 @@ export const EditIcon = ({
   );
 };`;
 
-const DeleteIconJs = `import { React } from '@nextui-org/react';\n
-export const DeleteIcon = ({
+const DeleteIconJs = `export const DeleteIcon = ({
   fill,
   size,
   height,
diff --git a/apps/docs/content/docs/components/badge.mdx b/apps/docs/content/docs/components/badge.mdx
new file mode 100644
index 0000000000..a8e83a9f1a
--- /dev/null
+++ b/apps/docs/content/docs/components/badge.mdx
@@ -0,0 +1,143 @@
+---
+title: 'Badge'
+description: 'Badges are used as a small numerical value or status descriptor for UI elements.'
+url: https://nextui.org/docs/components/badge
+---
+
+# Badge
+
+Badges are used as a small numerical value or status descriptor for UI elements.
+
+```jsx
+import { Badge } from '@nextui-org/react';
+```
+
+<CarbonAd />
+
+<Spacer y={2} />
+
+<Playground
+  title="Default"
+  desc="Badge with default styles, used in standalone when `content` is empty."
+  files={badgeContent.defaultBadge}
+/>
+
+<Playground
+  title="Sizes"
+  desc="Use `size` prop to change the size of the badge."
+  files={badgeContent.sizesBadge}
+/>
+
+<Playground
+  title="Colors"
+  desc="We preset a series of colorful Badge styles for use in different situations."
+  files={badgeContent.colorsBadge}
+/>
+
+<Playground
+  title="Shadow"
+  desc="Use `enableShadow` prop to add a shadow to the badge."
+  files={badgeContent.shadowBadge}
+/>
+
+<Playground
+  title="Dot"
+  desc="Use the `dot` variant to create a dot badge. Useful for indicating a status or showing a notification that there is new content."
+  files={badgeContent.dotBadge}
+/>
+
+<Playground
+  title="Points"
+  desc="Use the `points` variant to create a badge with a points animation. Useful for indicating a writing or loading status."
+  files={badgeContent.pointsBadge}
+/>
+
+<Playground
+  title="Bordered"
+  desc="Use the `bordered` variant to create a badge with a border and an empty background."
+  files={badgeContent.borderedBadge}
+/>
+
+<Playground
+  title="Flat"
+  desc="Use the `flat` variant to create a badge with a flat background that contrasts with the text based on the selected color. [Leran more about the color palette](/docs/theme/default-theme#understanding-the-base-scale)."
+  files={badgeContent.flatBadge}
+/>
+
+<Playground
+  title="Squared"
+  desc="Use the `isSquared` prop to create a badge with squared corners."
+  files={badgeContent.squaredBadge}
+/>
+
+<Playground
+  title="Content"
+  desc="If you pass the `content` prop, the badge will be rendered relative to its children."
+  files={badgeContent.contentBadge}
+/>
+
+<Playground
+  title="Content Placements"
+  desc="Use the `placement` prop to change the placement of the badge content. The default placement is `top-right`."
+  files={badgeContent.contentPlacementsBadge}
+/>
+
+<Playground
+  title="Content Shape"
+  desc="Use the `shape` prop to place the badge content relative to the corner of the children element. The default shape is `rectangle`."
+  files={badgeContent.contentShapeBadge}
+/>
+
+<Playground
+  title="Content Visibility"
+  desc="The visibility of badges can be controlled using the `isInvisible` prop."
+  files={badgeContent.contentVisibilityBadge}
+/>
+
+
+<Playground
+  title="Content Offset"
+  desc="You can use the `verticalOffset` and `horizontalOffset` props to adjust the position of the badge content. The default offset is `5%` for rectangles and `15%` for circles."
+  files={badgeContent.contentOffset}
+/>
+
+<Playground
+  title="Disable Outline"
+  desc="Use the `disableOutline` prop to remove the outline from the badge. The default outline is `2px` with a `solid` background color."
+  files={badgeContent.disableOutline}
+/>
+
+
+<Playground
+  title="Accessibility"
+  desc="You shouldn't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with `aria-label`."
+  files={badgeContent.a11y}
+/>
+
+<Spacer y={3} />
+
+### APIs
+
+<Spacer y={2} />
+
+#### Badge Props
+
+| Attribute         | Type                                                   | Description                                                                                              | Default |
+| ----------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ------- |
+| **children\***    | `ReactNode[]`                                          | The content of the dropdown. It's usually the `Dropdown.Trigger`, `Dropdown.Button` and `Dropdown.Menu`. | -       |
+| **type**          | [TriggerType](#trigger-type)                           | The type of dropdown menu that the dropdown trigger opens.                                               | `menu`  |
+| **trigger**       | [MenuTriggerType](#menu-trigger-type)                  | How the dropdown menu is triggered.                                                                      | `press` |
+| **closeOnSelect** | `boolean`                                              | Whether the dropdown menu closes when a selection is made.                                               | `true`  |
+| **isDisabled**    | `boolean`                                              | Whether dropdown trigger is disabled.                                                                    | `false` |
+| **PopoverProps**  | [PopoverProps](/docs/components/popover#popover-props) | Since dropdown is based on the `Popover` you can use any of the `Popover` props.                         | -       |
+
+
+---
+
+<Spacer y={2} />
+
+### Badge types
+
+<Spacer y={1} />
+
+
diff --git a/apps/docs/content/docs/manifest.json b/apps/docs/content/docs/manifest.json
index f86899211e..7333a256a5 100644
--- a/apps/docs/content/docs/manifest.json
+++ b/apps/docs/content/docs/manifest.json
@@ -34,7 +34,6 @@
           "routes": [
             {
               "title": "Default theme",
-              "updated": true,
               "path": "/docs/theme/default-theme.mdx"
             },
             {
@@ -110,8 +109,7 @@
             {
               "title": "Card",
               "keywords": "card, content, action, media",
-              "path": "/docs/components/card.mdx",
-              "updated": true
+              "path": "/docs/components/card.mdx"
             },
             {
               "title": "Pagination",
@@ -154,15 +152,13 @@
             },
             {
               "title": "Radio",
-              "updated": true,
               "keywords": "check, radio, select",
               "path": "/docs/components/radio.mdx"
             },
             {
               "title": "Popover",
               "keywords": "popover, tooltip, tooltip, popover, popover",
-              "path": "/docs/components/popover.mdx",
-              "updated": true
+              "path": "/docs/components/popover.mdx"
             },
             {
               "title": "Tooltip",
@@ -172,14 +168,19 @@
             {
               "title": "Dropdown",
               "keywords": "dropdown, select, selectable, menu",
-              "path": "/docs/components/dropdown.mdx",
-              "newPost": true
+              "path": "/docs/components/dropdown.mdx"
             },
             {
               "title": "Progress",
               "keywords": "progress, bar, task, display, activity",
               "path": "/docs/components/progress.mdx"
             },
+            {
+              "title": "Badge",
+              "keywords": "badge, status, display, count, highlight",
+              "path": "/docs/components/badge.mdx",
+              "newPost": true
+            },
             {
               "title": "Select",
               "comingSoon": true
diff --git a/apps/docs/src/components/playground/title.tsx b/apps/docs/src/components/playground/title.tsx
index cff24ba603..9fe5d65f4f 100644
--- a/apps/docs/src/components/playground/title.tsx
+++ b/apps/docs/src/components/playground/title.tsx
@@ -39,6 +39,7 @@ const Title: React.FC<TitleProps> = ({title, desc}) => {
         }
         :global(.react-markdown p) {
           font-size: 1.125rem;
+          margin-block-start: 1rem;
         }
         h3 > :global(code),
         h3 > :global(pre) {
diff --git a/apps/docs/src/components/sandpack/themes.ts b/apps/docs/src/components/sandpack/themes.ts
index 14e87b8194..33fe6555a3 100644
--- a/apps/docs/src/components/sandpack/themes.ts
+++ b/apps/docs/src/components/sandpack/themes.ts
@@ -29,7 +29,7 @@ export const nextuiTheme: SandpackTheme = {
   typography: {
     bodyFont: "var(--nextui-fonts-sans)",
     monoFont: "var(--nextui-fonts-mono)",
-    fontSize: "14px",
-    lineHeight: "1.4",
+    fontSize: "var(--nextui-fontSizes-sm)",
+    lineHeight: "var(--nextui-lineHeights-sm)",
   },
 };
diff --git a/apps/docs/src/styles/sandpack.css b/apps/docs/src/styles/sandpack.css
index 689e0cd37e..5e59b9644a 100644
--- a/apps/docs/src/styles/sandpack.css
+++ b/apps/docs/src/styles/sandpack.css
@@ -28,6 +28,7 @@
   all: initial;
   font-size: var(--sp-font-size);
   font-family: var(--sp-font-body);
+  line-height: var(--nextui-lineHeights-md);
   display: block;
   box-sizing: border-box;
   text-rendering: optimizeLegibility;
diff --git a/packages/react/.babelrc.js b/packages/react/.babelrc.js
index 58e0c32c79..2247c44e20 100644
--- a/packages/react/.babelrc.js
+++ b/packages/react/.babelrc.js
@@ -1,6 +1,13 @@
 module.exports = (api) => {
   const env = api.env();
 
+  const removePropsPlugin = [
+    "react-remove-properties",
+    {
+      properties: ["data-testid"],
+    },
+  ];
+
   let dev = false;
   let modules;
   let plugins;
@@ -14,9 +21,9 @@ module.exports = (api) => {
       modules = false;
       break;
     case "dist-prod":
-      plugins = ["@testing-library/babel-plugin-react"];
+      plugins = [removePropsPlugin];
     case "production":
-      plugins = ["@testing-library/babel-plugin-react"];
+      plugins = [removePropsPlugin];
     case "esm":
       modules = false;
       break;
diff --git a/packages/react/package.json b/packages/react/package.json
index 7026539b6c..e262b9d775 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -116,6 +116,7 @@
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-optimize-clsx": "^2.6.2",
+    "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "chalk": "^4.1.2",
     "cherry-pick": "^0.5.0",
diff --git a/packages/react/src/avatar/avatar.styles.ts b/packages/react/src/avatar/avatar.styles.ts
index 97b43a3dc0..cdb67aada4 100644
--- a/packages/react/src/avatar/avatar.styles.ts
+++ b/packages/react/src/avatar/avatar.styles.ts
@@ -22,9 +22,6 @@ export const StyledAvatar = styled(
       transition: "$avatar",
       size: "100%",
     },
-    "&:hover .nextui-avatar-bg": {
-      boxShadow: " inset 0 0 40px 0 rgb(0 0 0 / 14%)",
-    },
     ".nextui-avatar-img": {
       opacity: 0,
       zIndex: "$3",
@@ -208,9 +205,6 @@ export const StyledAvatar = styled(
       },
       bordered: {
         true: {
-          "&:hover:not(.only-text-avatar) .nextui-avatar-bg": {
-            opacity: "0.6",
-          },
           ".nextui-avatar-img": {
             borderStyle: "solid",
             borderColor: "$background",
@@ -225,6 +219,9 @@ export const StyledAvatar = styled(
       pointer: {
         true: {
           cursor: "pointer",
+          "&:hover .nextui-avatar-bg": {
+            boxShadow: "inset 0 0 40px 0 rgb(0 0 0 / 14%)",
+          },
         },
       },
       rounded: {
@@ -298,6 +295,16 @@ export const StyledAvatar = styled(
           },
         },
       },
+      // bordered && pointer
+      {
+        bordered: true,
+        pointer: true,
+        css: {
+          "&:hover:not(.only-text-avatar) .nextui-avatar-bg": {
+            opacity: "0.7",
+          },
+        },
+      },
     ],
     defaultVariants: {
       size: "md",
diff --git a/packages/react/src/badge/__tests__/index.test.tsx b/packages/react/src/badge/__tests__/index.test.tsx
index 8b58aa8be8..8b4ab5ed66 100644
--- a/packages/react/src/badge/__tests__/index.test.tsx
+++ b/packages/react/src/badge/__tests__/index.test.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import {render, screen} from "@testing-library/react";
+import {mount} from "enzyme";
+import {render} from "@testing-library/react";
 
 import Badge from "../index";
 
@@ -10,6 +11,13 @@ describe("Badge", () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
+  it("ref should be forwarded", () => {
+    const ref = React.createRef<HTMLSpanElement>();
+    const wrapper = mount(<Badge ref={ref}>action</Badge>);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
   it("should render children and content", () => {
     const wrapper = render(
       <Badge content={<span data-testid="badge-content" />}>
@@ -47,13 +55,13 @@ describe("Badge", () => {
     expect(wrapper.getAllByTestId("badge-point")).toHaveLength(3);
   });
 
-  // it("should be invisible if invisible is true", () => {
-  //   const {container} = render(
-  //     <Badge invisible content={<span data-testid="badge-content" />} data-testid="badge-root">
-  //       <span data-testid="badge-children">new</span>
-  //     </Badge>,
-  //   );
+  it("should be invisible if invisible is true", () => {
+    const wrapper = mount(
+      <Badge isInvisible content={<span data-testid="badge-content" />} data-testid="badge-root">
+        <span data-testid="badge-children">new</span>
+      </Badge>,
+    );
 
-  //   expect(container.querySelectorAll(".nextui-badge")[0]).toHaveClass("nextui-badge--invisible");
-  // });
+    expect(wrapper.find(".nextui-badge--is-invisible").at(0)).toHaveLength(1);
+  });
 });
diff --git a/packages/react/src/badge/badge.stories.tsx b/packages/react/src/badge/badge.stories.tsx
index bb46e48de1..9f8c9b5bae 100644
--- a/packages/react/src/badge/badge.stories.tsx
+++ b/packages/react/src/badge/badge.stories.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import {Meta} from "@storybook/react";
 
 import {Col, Row, Spacer, Grid, Avatar, Switch, Text} from "../index";
-import {Notification} from "../utils/icons";
+import {Notification, CartIcon} from "../utils/icons";
 
 import Badge from "./index";
 
@@ -11,7 +11,7 @@ export default {
   component: Badge,
 } as Meta;
 
-export const Default = () => <Badge>New</Badge>;
+export const Default = () => <Badge>Default</Badge>;
 
 export const WithAvatar = () => (
   <Grid.Container gap={1} justify="center">
@@ -66,23 +66,24 @@ export const WithContentIcon = () => (
 );
 
 export const ToggleBadge = () => {
-  const [invisible, setInvisible] = React.useState(false);
+  const [isInvisible, setIsInvisible] = React.useState(false);
 
   return (
     <Grid.Container alignItems="center" gap={2}>
       <Grid>
-        <Badge color="error" content={5} invisible={invisible} placement="top-right" shape="circle">
+        <Badge color="error" content={5} isInvisible={isInvisible} shape="circle">
           <Notification fill="currentColor" size={30} />
         </Badge>
       </Grid>
+      <Grid>
+        <Badge color="error" content={50} isInvisible={isInvisible} shape="circle">
+          <CartIcon fill="currentColor" size={30} />
+        </Badge>
+      </Grid>
       <Grid>
         <Row align="center">
-          <Switch
-            initialChecked
-            css={{mr: "$2"}}
-            onChange={(ev) => setInvisible(!ev.target.checked)}
-          />
-          <Text>Show badge</Text>
+          <Switch initialChecked onChange={(ev) => setIsInvisible(!ev.target.checked)} />
+          <Text css={{ml: "$3"}}>Show badge</Text>
         </Row>
       </Grid>
     </Grid.Container>
@@ -94,7 +95,7 @@ export const WithContentPlacements = () => {
     <>
       <Grid.Container gap={1} justify="center">
         <Grid>
-          <Badge color="error" content={5} size="sm">
+          <Badge color="error" content={5} size="xs">
             <Avatar
               bordered
               pointer
@@ -106,7 +107,7 @@ export const WithContentPlacements = () => {
           </Badge>
         </Grid>
         <Grid>
-          <Badge color="error" content={5} placement="bottom-right" size="sm">
+          <Badge color="error" content={5} placement="bottom-right" size="md">
             <Avatar
               bordered
               pointer
@@ -145,7 +146,7 @@ export const WithContentPlacements = () => {
       <Grid.Container gap={1} justify="center">
         <Grid>
           <Badge
-            invisible
+            isInvisible
             color="primary"
             content={5}
             placement="bottom-right"
@@ -209,28 +210,151 @@ export const WithContentPlacements = () => {
 };
 
 export const Sizes = () => (
-  <Col css={{pl: "$6"}}>
-    <Row>
-      <Badge size="xs">New (xs)</Badge>
-    </Row>
-    <Spacer y={0.5} />
-    <Row>
-      <Badge size="sm">New (sm)</Badge>
-    </Row>
-    <Spacer y={0.5} />
-    <Row>
-      <Badge size="md">New (md)</Badge>
-    </Row>
-    <Spacer y={0.5} />
-    <Row>
-      <Badge size="lg">New (lg)</Badge>
-    </Row>
-    <Spacer y={0.5} />
-    <Row>
-      <Badge size="xl">New (xl)</Badge>
-    </Row>
-    <Spacer y={0.5} />
-  </Col>
+  <Grid.Container>
+    <Grid.Container alignItems="center" gap={1} justify="center">
+      <Grid>
+        <Badge size="xs">New (xs)</Badge>
+      </Grid>
+      <Grid>
+        <Badge size="sm">New (sm)</Badge>
+      </Grid>
+      <Grid>
+        <Badge size="md">New (md)</Badge>
+      </Grid>
+      <Grid>
+        <Badge size="lg">New (lg)</Badge>
+      </Grid>
+      <Grid>
+        <Badge size="xl">New (xl)</Badge>
+      </Grid>
+    </Grid.Container>
+    <Spacer y={1} />
+    <Grid.Container gap={1} justify="center">
+      <Grid>
+        <Badge color="error" content="xs" size="xs">
+          <Avatar
+            bordered
+            pointer
+            squared
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content="sm" size="sm">
+          <Avatar
+            bordered
+            pointer
+            squared
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content="md" size="md">
+          <Avatar
+            bordered
+            pointer
+            squared
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content="lg" size="lg">
+          <Avatar
+            bordered
+            pointer
+            squared
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267073"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content="xl" size="xl">
+          <Avatar
+            bordered
+            pointer
+            squared
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267071"
+          />
+        </Badge>
+      </Grid>
+    </Grid.Container>
+    <Spacer y={1} />
+    <Grid.Container gap={2} justify="center">
+      <Grid>
+        <Badge color="error" content="999+" size="xs">
+          <Avatar
+            bordered
+            pointer
+            squared
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content="999+" size="sm">
+          <Avatar
+            bordered
+            pointer
+            squared
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content="999+" size="md">
+          <Avatar
+            bordered
+            pointer
+            squared
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content="999+" size="lg">
+          <Avatar
+            bordered
+            pointer
+            squared
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267073"
+          />
+        </Badge>
+      </Grid>
+      <Grid>
+        <Badge color="error" content="999+" size="xl">
+          <Avatar
+            bordered
+            pointer
+            squared
+            color="secondary"
+            size="lg"
+            src="https://i.pravatar.cc/300?u=a042581f4e290267071"
+          />
+        </Badge>
+      </Grid>
+    </Grid.Container>
+  </Grid.Container>
 );
 
 export const Squared = () => (
diff --git a/packages/react/src/badge/badge.styles.ts b/packages/react/src/badge/badge.styles.ts
index ba393eec72..9c0892777b 100644
--- a/packages/react/src/badge/badge.styles.ts
+++ b/packages/react/src/badge/badge.styles.ts
@@ -23,18 +23,17 @@ export const StyledBadgeRoot = styled("span", {
 export const StyledBadge = styled("span", {
   $$badgePlacementHOffset: "0%",
   $$badgePlacementVOffset: "0%",
-  display: "inline-block",
+  dflex: "center",
   whiteSpace: "nowrap",
-  verticalAlign: "middle",
   bg: "$$badgeBackgroundColor",
   color: "$$badgeTextColor",
-  fontWeight: "$semibold",
+  fontWeight: "$bold",
   fontSize: "$$badgeFontSize",
-  p: "$1 $$badgeHPadding",
+  p: "$$badgeVPadding $$badgeHPadding",
   "@motion": {
     animation: "none",
     transition: "none",
-    "&.nextui-badge--invisible": {
+    "&.nextui-badge--is-invisible": {
       animation: "none",
       transition: "none",
     },
@@ -42,23 +41,28 @@ export const StyledBadge = styled("span", {
   variants: {
     size: {
       xs: {
+        $$badgeVPadding: "$space$2",
         $$badgeHPadding: "$space$3",
         $$badgeFontSize: "0.65rem",
       },
       sm: {
+        $$badgeVPadding: "$space$2",
         $$badgeHPadding: "$space$4",
-        $$badgeFontSize: "$fontSizes$xs",
+        $$badgeFontSize: "0.7rem",
       },
       md: {
-        $$badgeHPadding: "$space$4",
-        $$badgeFontSize: "$fontSizes$sm",
+        $$badgeVPadding: "$space$2",
+        $$badgeHPadding: "$space$5",
+        $$badgeFontSize: "$fontSizes$xs",
       },
       lg: {
-        $$badgeHPadding: "$space$5",
-        $$badgeFontSize: "$fontSizes$lg",
+        $$badgeVPadding: "$space$2",
+        $$badgeHPadding: "$space$6",
+        $$badgeFontSize: "$fontSizes$base",
       },
       xl: {
-        $$badgeHPadding: "$space$5",
+        $$badgeVPadding: "$space$2",
+        $$badgeHPadding: "$space$6",
         $$badgeFontSize: "$fontSizes$xl",
       },
     },
@@ -69,15 +73,11 @@ export const StyledBadge = styled("span", {
     asChild: {
       true: {
         zIndex: "$2",
-        dflex: "center",
         position: "absolute",
       },
     },
     isOneChar: {
-      true: {
-        size: "calc($$badgeFontSize + $$badgeHPadding)",
-        p: "calc($$badgeHPadding + 1px)",
-      },
+      true: {},
     },
     color: {
       neutral: {
@@ -127,30 +127,30 @@ export const StyledBadge = styled("span", {
     placement: {
       "top-right": {
         animation: `${appearanceInTopRight} 0.25s ease-out`,
-        "&.nextui-badge--invisible": {
+        "&.nextui-badge--is-invisible": {
           opacity: 0,
-          animation: `${appearanceOutTopRight} 0.25s ease-in`,
+          animation: `${appearanceOutTopRight} 0.2s ease-in`,
         },
       },
       "top-left": {
         animation: `${appearanceInTopLeft} 0.25s ease-out`,
-        "&.nextui-badge--invisible": {
+        "&.nextui-badge--is-invisible": {
           opacity: 0,
-          animation: `${appearanceOutTopLeft} 0.25s ease-in`,
+          animation: `${appearanceOutTopLeft} 0.2s ease-in`,
         },
       },
       "bottom-right": {
         animation: `${appearanceInBottomRight} 0.25s ease-out`,
-        "&.nextui-badge--invisible": {
+        "&.nextui-badge--is-invisible": {
           opacity: 0,
-          animation: `${appearanceOutBottomRight} 0.25s ease-in`,
+          animation: `${appearanceOutBottomRight} 0.2s ease-in`,
         },
       },
       "bottom-left": {
         animation: `${appearanceInBottomLeft} 0.25s ease-out`,
-        "&.nextui-badge--invisible": {
+        "&.nextui-badge--is-invisible": {
           opacity: 0,
-          animation: `${appearanceOutBottomLeft} 0.25s ease-in`,
+          animation: `${appearanceOutBottomLeft} 0.2s ease-in`,
         },
       },
     },
@@ -202,7 +202,7 @@ export const StyledBadge = styled("span", {
       true: {
         animation: "none",
         transition: "none",
-        "&.nextui-badge--invisible": {
+        "&.nextui-badge--is-invisible": {
           animation: "none",
           transition: "none",
         },
@@ -379,8 +379,8 @@ export const StyledBadge = styled("span", {
       shape: "circle",
       placement: "top-right",
       css: {
-        top: "calc(14% + $$badgePlacementVOffset)",
-        right: "calc(14% + $$badgePlacementHOffset)",
+        top: "calc(15% + $$badgePlacementVOffset)",
+        right: "calc(15% + $$badgePlacementHOffset)",
         transform: "scale(1) translate(50%, -50%)",
         transformOrigin: "100% 0%",
       },
@@ -391,8 +391,8 @@ export const StyledBadge = styled("span", {
       shape: "circle",
       placement: "top-left",
       css: {
-        top: "calc(14% + $$badgePlacementVOffset)",
-        left: "calc(14% + $$badgePlacementHOffset)",
+        top: "calc(15% + $$badgePlacementVOffset)",
+        left: "calc(15% + $$badgePlacementHOffset)",
         transform: "scale(1) translate(-50%, -50%)",
         transformOrigin: "0% 0%",
       },
@@ -403,8 +403,8 @@ export const StyledBadge = styled("span", {
       shape: "circle",
       placement: "bottom-right",
       css: {
-        bottom: "calc(14% + $$badgePlacementVOffset)",
-        right: "calc(14% + $$badgePlacementHOffset)",
+        bottom: "calc(15% + $$badgePlacementVOffset)",
+        right: "calc(15% + $$badgePlacementHOffset)",
         transform: "scale(1) translate(50%, 50%)",
         transformOrigin: "100% 100%",
       },
@@ -415,8 +415,8 @@ export const StyledBadge = styled("span", {
       shape: "circle",
       placement: "bottom-left",
       css: {
-        bottom: "calc(14% + $$badgePlacementVOffset)",
-        left: "calc(14% + $$badgePlacementHOffset)",
+        bottom: "calc(15% + $$badgePlacementVOffset)",
+        left: "calc(15% + $$badgePlacementHOffset)",
         transform: "scale(1) translate(-50%, 50%)",
         transformOrigin: "0% 100%",
       },
@@ -433,9 +433,61 @@ export const StyledBadge = styled("span", {
         $$badgePlacementVOffset: "calc($$badgeFontSize * 0.1)",
       },
     },
+    /**
+     * @isOneChar {true, false}
+     * @asChild {true, false}
+     */
+    {
+      isOneChar: true,
+      asChild: true,
+      css: {
+        p: 0,
+        size: "calc($$badgeFontSize + $$badgeHPadding)",
+      },
+    },
+    {
+      isOneChar: false,
+      asChild: true,
+      css: {
+        $$badgeVPadding: "0px",
+        $$badgeHPadding: "$space$2",
+      },
+    },
+    /**
+     * @isOneChar false
+     * @asChild true
+     * @size {md, lg, xl}
+     */
+    // size = md
+    {
+      isOneChar: false,
+      asChild: true,
+      size: "md",
+      css: {
+        $$badgeHPadding: "$space$3",
+      },
+    },
+    // size = lg
+    {
+      isOneChar: false,
+      asChild: true,
+      size: "lg",
+      css: {
+        $$badgeHPadding: "$space$4",
+      },
+    },
+    // size = xl
+    {
+      isOneChar: false,
+      asChild: true,
+      size: "xl",
+      css: {
+        $$badgeHPadding: "$space$5",
+      },
+    },
   ],
   defaultVariants: {
-    size: "sm",
+    size: "md",
     color: "neutral",
     variant: "default",
     borderWeight: "normal",
diff --git a/packages/react/src/badge/badge.tsx b/packages/react/src/badge/badge.tsx
index a02ab0d14c..98b8114e9a 100644
--- a/packages/react/src/badge/badge.tsx
+++ b/packages/react/src/badge/badge.tsx
@@ -8,10 +8,10 @@ import {__DEV__} from "../utils/assertion";
 import {StyledBadge, StyledBadgePoints, StyledBadgeRoot, BadgeVariantsProps} from "./badge.styles";
 
 interface Props extends Omit<HTMLNextUIProps<"span">, keyof BadgeVariantsProps> {
-  invisible?: boolean;
+  isInvisible?: boolean;
   content?: string | number | React.ReactNode;
-  verticalOffset?: number;
-  horizontalOffset?: number;
+  verticalOffset?: string | number;
+  horizontalOffset?: string | number;
   children?: React.ReactNode;
 }
 
@@ -22,7 +22,7 @@ export const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
     css,
     children,
     content,
-    invisible = false,
+    isInvisible = false,
     disableOutline,
     placement = "top-right",
     variant = "default",
@@ -37,6 +37,17 @@ export const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
 
   const asChild = content !== undefined && !!children;
 
+  const isOneChar = React.useMemo(() => {
+    if (asChild && content && variant !== "points" && variant !== "dot") {
+      return String(content)?.length === 1;
+    }
+    if (children && typeof children === "string") {
+      return children.length === 1;
+    }
+
+    return false;
+  }, [asChild, children, variant, content]);
+
   const badgeChildren = React.useMemo(() => {
     if (variant === "dot") {
       return null;
@@ -53,36 +64,28 @@ export const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
     }
 
     return asChild ? content : children;
-  }, [variant, asChild, content, children]);
-
-  const isOneChar = React.useMemo(() => {
-    if (asChild && content && variant !== "points" && variant !== "dot") {
-      return String(content)?.length === 1;
-    }
-    if (children && typeof children === "string") {
-      return children.length === 1;
-    }
-
-    return false;
-  }, [asChild, children, variant, content]);
+  }, [variant, isOneChar, asChild, content, children]);
 
   const badgeCss = React.useMemo(() => {
+    const isHOffsetNumber = typeof horizontalOffset === "number";
+    const isVOffsetNumber = typeof verticalOffset === "number";
+
     if (verticalOffset && horizontalOffset) {
       return {
-        $$badgePlacementHOffset: `${horizontalOffset}px`,
-        $$badgePlacementVOffset: `${verticalOffset}px`,
+        $$badgePlacementHOffset: isHOffsetNumber ? `${horizontalOffset}px` : horizontalOffset,
+        $$badgePlacementVOffset: isVOffsetNumber ? `${verticalOffset}px` : verticalOffset,
         ...css,
       };
     }
     if (verticalOffset) {
       return {
-        $$badgePlacementVOffset: `${verticalOffset}px`,
+        $$badgePlacementVOffset: isVOffsetNumber ? `${verticalOffset}px` : verticalOffset,
         ...css,
       };
     }
     if (horizontalOffset) {
       return {
-        $$badgePlacementHOffset: `${horizontalOffset}px`,
+        $$badgePlacementHOffset: isHOffsetNumber ? `${horizontalOffset}px` : horizontalOffset,
         ...css,
       };
     }
@@ -96,7 +99,7 @@ export const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
       <StyledBadge
         asChild={asChild}
         className={clsx("nextui-badge", {
-          "nextui-badge--invisible": invisible,
+          "nextui-badge--is-invisible": isInvisible,
         })}
         css={badgeCss}
         disableAnimation={disableAnimation || !asChild}
diff --git a/packages/react/src/badge/index.ts b/packages/react/src/badge/index.ts
index b3a505ab7a..f175e06e58 100644
--- a/packages/react/src/badge/index.ts
+++ b/packages/react/src/badge/index.ts
@@ -1,3 +1,10 @@
 import {Badge} from "./badge";
 
+// export styled components
+export {StyledBadgeRoot, StyledBadge, StyledBadgePoints} from "./badge.styles";
+
+// export types
+export type {BadgeVariantsProps} from "./badge.styles";
+export type {BadgeProps} from "./badge";
+
 export default Badge;
diff --git a/packages/react/src/css-baseline/css-baseline.tsx b/packages/react/src/css-baseline/css-baseline.tsx
index 1828b72dd0..512bd9ad96 100644
--- a/packages/react/src/css-baseline/css-baseline.tsx
+++ b/packages/react/src/css-baseline/css-baseline.tsx
@@ -146,7 +146,7 @@ const globalStyles = globalCss({
     fontSize: "$sm",
     borderRadius: "$lg",
     padding: "$md $lg",
-    margin: "$lg 0 ",
+    margin: "$lg 0",
     fontFamily: "$mono",
     lineHeight: "$md",
     webkitOverflowScrolling: "touch",
@@ -233,6 +233,9 @@ const globalStyles = globalCss({
   "kbd + kbd": {
     ml: "$2",
   },
+  "dl, dd, hr, figure, p": {
+    margin: 0,
+  },
 });
 
 const flushCSS = () => <style dangerouslySetInnerHTML={{__html: getCssText()}} id="stitches" />;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index f02bb517b4..4741da820c 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -143,3 +143,6 @@ export * from "./popover";
 
 export {default as Dropdown} from "./dropdown";
 export * from "./dropdown";
+
+export {default as Badge} from "./badge";
+export * from "./badge";
diff --git a/packages/react/src/utils/icons.tsx b/packages/react/src/utils/icons.tsx
index 666fb6d647..ae0b9ab7ad 100644
--- a/packages/react/src/utils/icons.tsx
+++ b/packages/react/src/utils/icons.tsx
@@ -679,3 +679,39 @@ export const DeleteDocumentBulk: React.FC<IconProps> = ({fill, size, height, wid
     </svg>
   );
 };
+
+export const CartIcon: React.FC<IconProps> = ({
+  fill = "currentColor",
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16.25 22.5C17.2165 22.5 18 21.7165 18 20.75C18 19.7835 17.2165 19 16.25 19C15.2835 19 14.5 19.7835 14.5 20.75C14.5 21.7165 15.2835 22.5 16.25 22.5Z"
+        fill={fill}
+      />
+      <path
+        d="M8.25 22.5C9.2165 22.5 10 21.7165 10 20.75C10 19.7835 9.2165 19 8.25 19C7.2835 19 6.5 19.7835 6.5 20.75C6.5 21.7165 7.2835 22.5 8.25 22.5Z"
+        fill={fill}
+      />
+      <path
+        d="M4.84 3.94L4.64 6.39C4.6 6.86 4.97 7.25 5.44 7.25H20.75C21.17 7.25 21.52 6.93 21.55 6.51C21.68 4.74 20.33 3.3 18.56 3.3H6.27C6.17 2.86 5.97 2.44 5.66 2.09C5.16 1.56 4.46 1.25 3.74 1.25H2C1.59 1.25 1.25 1.59 1.25 2C1.25 2.41 1.59 2.75 2 2.75H3.74C4.05 2.75 4.34 2.88 4.55 3.1C4.76 3.33 4.86 3.63 4.84 3.94Z"
+        fill={fill}
+      />
+      <path
+        d="M20.5101 8.75H5.17005C4.75005 8.75 4.41005 9.07 4.37005 9.48L4.01005 13.83C3.87005 15.54 5.21005 17 6.92005 17H18.0401C19.5401 17 20.8601 15.77 20.9701 14.27L21.3001 9.6C21.3401 9.14 20.9801 8.75 20.5101 8.75Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
diff --git a/yarn.lock b/yarn.lock
index 309ebe6c9c..f5fffb3684 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6816,6 +6816,11 @@ babel-plugin-react-docgen@^4.2.1:
     lodash "^4.17.15"
     react-docgen "^5.0.0"
 
+babel-plugin-react-remove-properties@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-react-remove-properties/-/babel-plugin-react-remove-properties-0.3.0.tgz#7b623fb3c424b6efb4edc9b1ae4cc50e7154b87f"
+  integrity sha512-vbxegtXGyVcUkCvayLzftU95vuvpYFV85pRpeMpohMHeEY46Qe0VNWfkVVcCbaZ12CXHzDFOj0esumATcW83ng==
+
 babel-plugin-syntax-dynamic-import@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"

From 8de77b1b6181c5eb9e26bf7323395217511db40f Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 9 Jul 2022 16:15:40 -0300
Subject: [PATCH 029/106] feat(docs): carbon ad optimized

---
 .../components/carbon-ad/carbon-optimize.js   | 67 +++++++++++++++++++
 apps/docs/src/components/carbon-ad/index.tsx  |  2 +
 2 files changed, 69 insertions(+)
 create mode 100644 apps/docs/src/components/carbon-ad/carbon-optimize.js

diff --git a/apps/docs/src/components/carbon-ad/carbon-optimize.js b/apps/docs/src/components/carbon-ad/carbon-optimize.js
new file mode 100644
index 0000000000..69ae69d2ba
--- /dev/null
+++ b/apps/docs/src/components/carbon-ad/carbon-optimize.js
@@ -0,0 +1,67 @@
+export default {
+    isRefreshAble: function () {
+      return !(
+        typeof document.addEventListener === 'undefined' ||
+        this.browserSupport().hidden === undefined
+      );
+    },
+    browserSupport: function () {
+      let hidden;
+      let visibilityChange;
+      if (typeof document.hidden !== 'undefined') {
+        // Opera 12.10 and Firefox 18 and later support
+        hidden = 'hidden';
+        visibilityChange = 'visibilitychange';
+      } else if (typeof document.msHidden !== 'undefined') {
+        hidden = 'msHidden';
+        visibilityChange = 'msvisibilitychange';
+      } else if (
+        typeof document.webkitHidden !== 'undefined'
+      ) {
+        hidden = 'webkitHidden';
+        visibilityChange = 'webkitvisibilitychange';
+      }
+      return {
+        hidden: hidden,
+        visibilityChange: visibilityChange,
+      };
+    },
+    handleVisibilityChange: function () {
+      const isElementInViewport = function (el) {
+        let element = document.querySelector(el);
+        let bounding = element.getBoundingClientRect();
+        let isVisible;
+  
+        if (
+          bounding.top >= 0 &&
+          bounding.left >= 0 &&
+          bounding.right <= window.innerWidth &&
+          bounding.bottom <= window.innerHeight
+        ) {
+          isVisible = true;
+        } else {
+          isVisible = false;
+        }
+        return isVisible;
+      };
+  
+      if (!document.hidden) {
+        if (
+          typeof _carbonads !== 'undefined' &&
+          isElementInViewport('#carbonads')
+        ) {
+          // eslint-disable-next-line no-undef
+          _carbonads.refresh();
+        }
+      }
+    },
+    init: function () {
+      if (this.isRefreshAble()) {
+        document.addEventListener(
+          this.browserSupport().visibilityChange,
+          this.handleVisibilityChange,
+          false
+        );
+      }
+    },
+}
\ No newline at end of file
diff --git a/apps/docs/src/components/carbon-ad/index.tsx b/apps/docs/src/components/carbon-ad/index.tsx
index 951259cf79..2b8479ac03 100644
--- a/apps/docs/src/components/carbon-ad/index.tsx
+++ b/apps/docs/src/components/carbon-ad/index.tsx
@@ -3,6 +3,7 @@ import { loadScript } from '@utils/scripts';
 import { useTheme } from '@nextui-org/react';
 import { isProd } from '@utils/index';
 import useIsMounted from '@hooks/use-is-mounted';
+import carbonOptimize from './carbon-optimize'
 
 const CarbonAd: React.FC<unknown> = () => {
   const ref = React.useRef(null);
@@ -21,6 +22,7 @@ const CarbonAd: React.FC<unknown> = () => {
           ref.current
         );
         script.id = '_carbonads_js';
+        carbonOptimize.init();
       });
     return () => {
       load && clearTimeout(load);

From f6ddb547a7e89f7c4ce1619bd6cca4dc6ca5f3ec Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 9 Jul 2022 18:16:15 -0300
Subject: [PATCH 030/106] feat(docs-badge): badge docs done

---
 apps/docs/content/components/badge/a11y.ts    |  2 +-
 .../content/components/badge/content-shape.ts |  2 -
 .../components/badge/disable-outline.ts       |  2 -
 apps/docs/content/docs/components/badge.mdx   | 76 +++++++++++++++----
 apps/docs/content/docs/components/button.mdx  | 26 +++----
 .../docs/content/docs/components/dropdown.mdx | 52 ++++++-------
 packages/react/src/badge/badge.styles.ts      |  4 +-
 packages/react/src/badge/badge.tsx            |  4 +-
 8 files changed, 105 insertions(+), 63 deletions(-)

diff --git a/apps/docs/content/components/badge/a11y.ts b/apps/docs/content/components/badge/a11y.ts
index b7953d4430..d5fe611ac5 100644
--- a/apps/docs/content/components/badge/a11y.ts
+++ b/apps/docs/content/components/badge/a11y.ts
@@ -27,7 +27,7 @@ const NotificationIcon = `export const NotificationIcon = ({
 };`;
 
 const App = `import { Badge, Grid, styled } from "@nextui-org/react";
-import { CartIcon } from "./CartIcon";
+import { NotificationIcon } from "./NotificationIcon";
 
 const StyledButton = styled("button", {
   background: "transparent",
diff --git a/apps/docs/content/components/badge/content-shape.ts b/apps/docs/content/components/badge/content-shape.ts
index beda4a7707..85be98a703 100644
--- a/apps/docs/content/components/badge/content-shape.ts
+++ b/apps/docs/content/components/badge/content-shape.ts
@@ -7,7 +7,6 @@ export default function App() {
         <Badge color="error" content={5} shape="rectangle">
           <Avatar
             squared
-            color="primary"
             size="lg"
             src="https://i.pravatar.cc/300?u=a042581f4e290267072"
           />
@@ -16,7 +15,6 @@ export default function App() {
       <Grid>
         <Badge color="error" content={5} shape="circle">
           <Avatar
-            color="secondary"
             size="lg"
             src="https://i.pravatar.cc/300?u=a042581f4e290267073"
           />
diff --git a/apps/docs/content/components/badge/disable-outline.ts b/apps/docs/content/components/badge/disable-outline.ts
index 8679e37c1f..0645d70c7e 100644
--- a/apps/docs/content/components/badge/disable-outline.ts
+++ b/apps/docs/content/components/badge/disable-outline.ts
@@ -7,7 +7,6 @@ export default function App() {
         <Badge color="error" content={5} shape="rectangle" size="md">
           <Avatar
             squared
-            color="primary"
             size="lg"
             src="https://i.pravatar.cc/300?u=a042581f4e290267072"
           />
@@ -17,7 +16,6 @@ export default function App() {
         <Badge disableOutline color="error" content={5} shape="circle" size="md">
           <Avatar
             squared
-            color="primary"
             size="lg"
             src="https://i.pravatar.cc/300?u=a042581f4e290267072"
           />
diff --git a/apps/docs/content/docs/components/badge.mdx b/apps/docs/content/docs/components/badge.mdx
index a8e83a9f1a..2cb1731ce7 100644
--- a/apps/docs/content/docs/components/badge.mdx
+++ b/apps/docs/content/docs/components/badge.mdx
@@ -1,6 +1,6 @@
 ---
-title: 'Badge'
-description: 'Badges are used as a small numerical value or status descriptor for UI elements.'
+title: "Badge"
+description: "Badges are used as a small numerical value or status descriptor for UI elements."
 url: https://nextui.org/docs/components/badge
 ---
 
@@ -9,7 +9,7 @@ url: https://nextui.org/docs/components/badge
 Badges are used as a small numerical value or status descriptor for UI elements.
 
 ```jsx
-import { Badge } from '@nextui-org/react';
+import { Badge } from "@nextui-org/react";
 ```
 
 <CarbonAd />
@@ -18,7 +18,7 @@ import { Badge } from '@nextui-org/react';
 
 <Playground
   title="Default"
-  desc="Badge with default styles, used in standalone when `content` is empty."
+  desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={badgeContent.defaultBadge}
 />
 
@@ -94,7 +94,6 @@ import { Badge } from '@nextui-org/react';
   files={badgeContent.contentVisibilityBadge}
 />
 
-
 <Playground
   title="Content Offset"
   desc="You can use the `verticalOffset` and `horizontalOffset` props to adjust the position of the badge content. The default offset is `5%` for rectangles and `15%` for circles."
@@ -107,7 +106,6 @@ import { Badge } from '@nextui-org/react';
   files={badgeContent.disableOutline}
 />
 
-
 <Playground
   title="Accessibility"
   desc="You shouldn't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with `aria-label`."
@@ -122,15 +120,25 @@ import { Badge } from '@nextui-org/react';
 
 #### Badge Props
 
-| Attribute         | Type                                                   | Description                                                                                              | Default |
-| ----------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ------- |
-| **children\***    | `ReactNode[]`                                          | The content of the dropdown. It's usually the `Dropdown.Trigger`, `Dropdown.Button` and `Dropdown.Menu`. | -       |
-| **type**          | [TriggerType](#trigger-type)                           | The type of dropdown menu that the dropdown trigger opens.                                               | `menu`  |
-| **trigger**       | [MenuTriggerType](#menu-trigger-type)                  | How the dropdown menu is triggered.                                                                      | `press` |
-| **closeOnSelect** | `boolean`                                              | Whether the dropdown menu closes when a selection is made.                                               | `true`  |
-| **isDisabled**    | `boolean`                                              | Whether dropdown trigger is disabled.                                                                    | `false` |
-| **PopoverProps**  | [PopoverProps](/docs/components/popover#popover-props) | Since dropdown is based on the `Popover` you can use any of the `Popover` props.                         | -       |
-
+| Attribute            | Type                                 | Description                                                                        | Default     |
+| -------------------- | ------------------------------------ | ---------------------------------------------------------------------------------- | ----------- |
+| **children**         | `ReactNode`                          | The wrapped component.                                                             | -           |
+| **content**          | `string` `number` `ReactNode`        | The content of the badge. The badge will be rendered relative to its **children**. | -           |
+| **color**            | [SimpleColors](#simple-colors)       | The badge color.                                                                   | `default`   |
+| **size**             | [NormalSizes](#normal-sizes)         | The badge size.                                                                    | `md`        |
+| **variant**          | [BadgeVariant](#badge-variants)      | The badge variation.                                                               | `default`   |
+| **placement**        | [BadgePlacements](#badge-placements) | The placement of the badge **content**.                                            | `top-right` |
+| **borderWeight**     | [NormalWeights](#normal-weights)     | The border weight for **bordered** badge variation.                                | `normal`    |
+| **shape**            | `circle` `rectangle`                 | The wrapped shape the badge should overlap.                                        | `rectangle` |
+| **horizontalOffset** | `string` `number`                    | The horizontal offset of the badge **content**.                                    | -           |
+| **verticalOffset**   | `string` `number`                    | The vertical offset of the badge **content**.                                      | -           |
+| **isInvisible**      | `boolean`                            | Whether the badge is invisible.                                                    | `false`     |
+| **enableShadow**     | `boolean`                            | Whether the badge shadow should be enabled.                                        | `false`     |
+| **isSquared**        | `boolean`                            | Whether the badge corners should be squared.                                       | `false`     |
+| **disableOutline**   | `boolean`                            | Whether the badge outline should be disabled.                                      | `false`     |
+| **disableAnimation** | `boolean`                            | Whether the badge **content** animation should be disabled.                | `false`     |
+| **css**              | `Stitches.CSS`                       | Override Default CSS style.                                                        | -           |
+| **as**               | `keyof JSX.IntrinsicElements`        | Changes which tag component outputs.                                               | `span`      |
 
 ---
 
@@ -138,6 +146,44 @@ import { Badge } from '@nextui-org/react';
 
 ### Badge types
 
+#### Simple Colors
+
+```ts
+type SimpleColors =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error";
+```
+
+#### Normal Sizes
+
+```ts
+type NormalSizes = "xs" | "sm" | "md" | "lg" | "xl";
+```
+
 <Spacer y={1} />
 
+#### Badge Variants
+
+```ts
+type BadgeVariants = "default" | "flat" | "dot" | "points" | "bordered";
+```
+
+#### Badge Placements
 
+```ts
+type BadgePlacements =
+  | "top-right"
+  | "top-left"
+  | "bottom-right"
+  | "bottom-left";
+```
+
+#### Normal Weights
+
+```ts
+type NormalWeights = "light" | "normal" | "bold" | "extrabold" | "black";
+```
diff --git a/apps/docs/content/docs/components/button.mdx b/apps/docs/content/docs/components/button.mdx
index 0a42fa6ce9..0b1d38f451 100644
--- a/apps/docs/content/docs/components/button.mdx
+++ b/apps/docs/content/docs/components/button.mdx
@@ -1,6 +1,6 @@
 ---
-title: 'Button'
-description: 'Buttons allow users to perform actions and choose with a single tap.'
+title: "Button"
+description: "Buttons allow users to perform actions and choose with a single tap."
 url: https://nextui.org/docs/components/button
 ---
 
@@ -9,7 +9,7 @@ url: https://nextui.org/docs/components/button
 Buttons allow users to perform actions and choose with a single tap.
 
 ```jsx
-import { Button } from '@nextui-org/react';
+import { Button } from "@nextui-org/react";
 ```
 
 <CarbonAd />
@@ -103,7 +103,7 @@ _Note: `gradient` variant is not supported with the `flat` mode._"
 | Attribute        | Type                                            | Description                               | Default   |
 | ---------------- | ----------------------------------------------- | ----------------------------------------- | --------- |
 | **color**        | [NormalColors](#normal-colors)                  | Change button color                       | `default` |
-| **size**         | [NormalSizes](#normal-sizes)                    | Change button size                        | `medium`  |
+| **size**         | [NormalSizes](#normal-sizes)                    | Change button size                        | `md`      |
 | **disabled**     | `boolean`                                       | Disable button                            | `false`   |
 | **bordered**     | `boolean`                                       | Bordered button                           | `false`   |
 | **flat**         | `boolean`                                       | Flat button                               | `false`   |
@@ -153,23 +153,23 @@ _Note: `gradient` variant is not supported with the `flat` mode._"
 
 ```ts
 type NormalColors =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'gradient';
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error"
+  | "gradient";
 ```
 
 #### Normal Sizes
 
 ```ts
-type NormalSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type NormalSizes = "xs" | "sm" | "md" | "lg" | "xl";
 ```
 
 #### Normal Weights
 
 ```ts
-type NormalWeights = 'light' | 'normal' | 'bold' | 'extrabold' | 'black';
+type NormalWeights = "light" | "normal" | "bold" | "extrabold" | "black";
 ```
diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx
index 2b69a25f7d..0135871905 100644
--- a/apps/docs/content/docs/components/dropdown.mdx
+++ b/apps/docs/content/docs/components/dropdown.mdx
@@ -1,6 +1,6 @@
 ---
-title: 'Dropdown'
-description: 'Displays a list of actions or options that a user can choose.'
+title: "Dropdown"
+description: "Displays a list of actions or options that a user can choose."
 url: https://nextui.org/docs/components/dropdown
 ---
 
@@ -9,7 +9,7 @@ url: https://nextui.org/docs/components/dropdown
 Displays a list of actions or options that a user can choose. Dropdown implementation is based on <br/> <a href="https://react-spectrum.adobe.com/react-aria/useMenu.html" rel="noreferrer" target="_blank">@react-aria/menu</a>
 
 ```jsx
-import { Dropdown } from '@nextui-org/react';
+import { Dropdown } from "@nextui-org/react";
 ```
 
 <CarbonAd />
@@ -197,14 +197,14 @@ import { Dropdown } from '@nextui-org/react';
 | **defaultSelectedKeys**    | `all` [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | The initial selected keys in the collection (uncontrolled).                                             | -         |
 | **disabledKeys**           | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)       | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | -         |
 | **selectionMode**          | [SelectionModeType](#selection-mode-type)                                                                    | The type of selection that is allowed in the collection.                                                | -         |
-| **isVirtualized**          | `boolean`                                                                                                    | Whether the dropdown menu uses virtual scrolling.                                                       | `false`   |
-| **disallowEmptySelection** | `boolean`                                                                                                    | Whether the collection allows empty selection.                                                          | `false`   |
-| **autoFocus**              | `boolean` [FocusStrategyType](#focus-strategy-type)                                                          | Where the focus should be set.                                                                          | `false`   |
-| **shouldFocusWrap**        | `boolean`                                                                                                    | Whether keyboard navigation is circular.                                                                | `false`   |
 | **keyboardDelegate**       | [KeyboardDelegateType](#keyboard-delegate-type)                                                              | An optional keyboard delegate implementation for type to select, to override the default.               | -         |
 | **color**                  | [SimpleColors](#simple-colors)                                                                               | The dropdown menu items color                                                                           | `default` |
 | **textColor**              | [SimpleColors](#simple-colors)                                                                               | The dropdown menu items text color                                                                      | `default` |
 | **variant**                | [DropdownVariant](#dropdown-variants)                                                                        | The dropdown menu items variantion                                                                      | `flat`    |
+| **isVirtualized**          | `boolean`                                                                                                    | Whether the dropdown menu uses virtual scrolling.                                                       | `false`   |
+| **disallowEmptySelection** | `boolean`                                                                                                    | Whether the collection allows empty selection.                                                          | `false`   |
+| **autoFocus**              | `boolean` [FocusStrategyType](#focus-strategy-type)                                                          | Where the focus should be set.                                                                          | `false`   |
+| **shouldFocusWrap**        | `boolean`                                                                                                    | Whether keyboard navigation is circular.                                                                | `false`   |
 | **css**                    | `Stitches.CSS`                                                                                               | Override Default CSS style.                                                                             | -         |
 | **as**                     | `keyof JSX.IntrinsicElements`                                                                                | Changes which tag component outputs.                                                                    | `ul`      |
 
@@ -240,14 +240,14 @@ import { Dropdown } from '@nextui-org/react';
 | Attribute         | Type                                                | Description                                                      | Default   |
 | ----------------- | --------------------------------------------------- | ---------------------------------------------------------------- | --------- |
 | **key**           | [Key](https://reactjs.org/docs/lists-and-keys.html) | The unique key for the menu item.                                | `false`   |
-| **command**       | `boolean`                                           | Right-aligned label text content, useful for displaying hotkeys. | -         |
-| **description**   | `boolean`                                           | Description text element inside the dropdown menu item.          | -         |
+| **description**   | `string`                                            | Description text element inside the dropdown menu item.          | -         |
+| **command**       | `string`                                            | Right-aligned label text content, useful for displaying hotkeys. | -         |
 | **icon**          | `ReactNode`                                         | The icon to render before the dropdown menu item's label.        | -         |
-| **withDivider**   | `boolean`                                           | Whether the dropdown item should have a border on top            | `false`   |
-| **dividerWeight** | [NormalWeight](#normal-weight)                      | The dropdown item divider height                                 | `light`   |
+| **dividerWeight** | [NormalWeights](#normal-weights)                    | The dropdown item divider height                                 | `light`   |
 | **color**         | [SimpleColors](#simple-colors)                      | The dropdown item color                                          | `default` |
 | **textColor**     | [SimpleColors](#simple-colors)                      | The dropdown item text color                                     | `default` |
-| **variant**       | [DropdownVariant](#dropdown-variants)               | The dropdown item variantion                                     | `flat`    |
+| **variant**       | [DropdownVariant](#dropdown-variants)               | The dropdown item variation                                      | `flat`    |
+| **withDivider**   | `boolean`                                           | Whether the dropdown item should have a border on top            | `false`   |
 | **css**           | `Stitches.CSS`                                      | Override Default CSS style.                                      | -         |
 | **as**            | `keyof JSX.IntrinsicElements`                       | Changes which tag component outputs.                             | `li`      |
 
@@ -292,13 +292,13 @@ import { Dropdown } from '@nextui-org/react';
 #### Trigger Type
 
 ```ts
-type TriggerType = 'menu' | 'listbox';
+type TriggerType = "menu" | "listbox";
 ```
 
 #### Menu Trigger Type
 
 ```ts
-type MenuTriggerType = 'press' | 'longPress';
+type MenuTriggerType = "press" | "longPress";
 ```
 
 #### Collection Element Type
@@ -319,7 +319,7 @@ type CollectionChildren<T> =
 #### Focus Strategy Type
 
 ```ts
-type FocusStrategyType = 'first' | 'last';
+type FocusStrategyType = "first" | "last";
 ```
 
 #### Keyboard Delegate Type
@@ -350,37 +350,37 @@ getKeyForSearch(search: string, fromKey?: Key): Key
 #### Selection Mode Type
 
 ```ts
-type SelectionModeType = 'none' | 'single' | 'multiple';
+type SelectionModeType = "none" | "single" | "multiple";
 ```
 
 #### Selection Type
 
 ```ts
-import { Key } from 'react';
+import { Key } from "react";
 
-type SelectionType = 'all' | Set<Key>;
+type SelectionType = "all" | Set<Key>;
 ```
 
 #### Simple Colors
 
 ```ts
 type SimpleColors =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'error';
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error";
 ```
 
 #### Dropdown Variants
 
 ```ts
-type DropdownVariants = 'flat' | 'light' | 'solid' | 'shadow';
+type DropdownVariants = "flat" | "light" | "solid" | "shadow";
 ```
 
 #### Normal Weights
 
 ```ts
-type NormalWeights = 'light' | 'normal' | 'bold' | 'extrabold' | 'black';
+type NormalWeights = "light" | "normal" | "bold" | "extrabold" | "black";
 ```
diff --git a/packages/react/src/badge/badge.styles.ts b/packages/react/src/badge/badge.styles.ts
index 9c0892777b..6c082c9d70 100644
--- a/packages/react/src/badge/badge.styles.ts
+++ b/packages/react/src/badge/badge.styles.ts
@@ -80,7 +80,7 @@ export const StyledBadge = styled("span", {
       true: {},
     },
     color: {
-      neutral: {
+      default: {
         $$badgeBackgroundColor: "$colors$neutral",
         $$badgeTextColor: "$colors$neutralSolidContrast",
         $$badgeShadowColor: "$colors$neutralShadow",
@@ -488,7 +488,7 @@ export const StyledBadge = styled("span", {
   ],
   defaultVariants: {
     size: "md",
-    color: "neutral",
+    color: "default",
     variant: "default",
     borderWeight: "normal",
     placement: "top-right",
diff --git a/packages/react/src/badge/badge.tsx b/packages/react/src/badge/badge.tsx
index 98b8114e9a..5abaeb7aca 100644
--- a/packages/react/src/badge/badge.tsx
+++ b/packages/react/src/badge/badge.tsx
@@ -8,11 +8,11 @@ import {__DEV__} from "../utils/assertion";
 import {StyledBadge, StyledBadgePoints, StyledBadgeRoot, BadgeVariantsProps} from "./badge.styles";
 
 interface Props extends Omit<HTMLNextUIProps<"span">, keyof BadgeVariantsProps> {
-  isInvisible?: boolean;
+  children?: React.ReactNode;
   content?: string | number | React.ReactNode;
+  isInvisible?: boolean;
   verticalOffset?: string | number;
   horizontalOffset?: string | number;
-  children?: React.ReactNode;
 }
 
 export type BadgeProps = Props & Omit<BadgeVariantsProps, "asChild" | "isOneChar">;

From 83a1bf09c88340c51f197e50b55867964890b35e Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 9 Jul 2022 23:18:30 -0300
Subject: [PATCH 031/106] feat(react-navbar): first structure

---
 .../react/src/navbar/__tests__/index.test.tsx |  0
 packages/react/src/navbar/index.ts            |  3 +++
 packages/react/src/navbar/navbar.stories.tsx  | 11 ++++++++++
 packages/react/src/navbar/navbar.styles.ts    |  3 +++
 packages/react/src/navbar/navbar.tsx          | 21 +++++++++++++++++++
 5 files changed, 38 insertions(+)
 create mode 100644 packages/react/src/navbar/__tests__/index.test.tsx
 create mode 100644 packages/react/src/navbar/index.ts
 create mode 100644 packages/react/src/navbar/navbar.stories.tsx
 create mode 100644 packages/react/src/navbar/navbar.styles.ts
 create mode 100644 packages/react/src/navbar/navbar.tsx

diff --git a/packages/react/src/navbar/__tests__/index.test.tsx b/packages/react/src/navbar/__tests__/index.test.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/react/src/navbar/index.ts b/packages/react/src/navbar/index.ts
new file mode 100644
index 0000000000..d8a885b455
--- /dev/null
+++ b/packages/react/src/navbar/index.ts
@@ -0,0 +1,3 @@
+import {Navbar} from "./navbar";
+
+export default Navbar;
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
new file mode 100644
index 0000000000..5f84f94589
--- /dev/null
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import {Meta} from "@storybook/react";
+
+import Navbar from "./index";
+
+export default {
+  title: "Navigation/Navbar",
+  component: Navbar,
+} as Meta;
+
+export const Default = () => <Navbar>Default</Navbar>;
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
new file mode 100644
index 0000000000..45536087fb
--- /dev/null
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -0,0 +1,3 @@
+import {styled} from "../theme/stitches.config";
+
+export const StyledNavbar = styled("nav", {});
diff --git a/packages/react/src/navbar/navbar.tsx b/packages/react/src/navbar/navbar.tsx
new file mode 100644
index 0000000000..ac843a25cc
--- /dev/null
+++ b/packages/react/src/navbar/navbar.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import {useDOMRef} from "../utils/dom";
+import {__DEV__} from "../utils/assertion";
+
+import {StyledNavbar} from "./navbar.styles";
+
+export interface NavbarProps extends HTMLNextUIProps<"nav"> {}
+
+export const Navbar = forwardRef<NavbarProps, "nav">((props, ref) => {
+  const domRef = useDOMRef(ref);
+
+  return <StyledNavbar ref={domRef}>Hello</StyledNavbar>;
+});
+
+if (__DEV__) {
+  Navbar.displayName = "NextUI.Navbar";
+}
+
+Navbar.toString = () => ".nextui-navbar";

From c0aa6efcc19be48c6d56abdad478bfceeb7f3fd6 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 10 Jul 2022 21:58:03 -0300
Subject: [PATCH 032/106] feat(react-navbar): navbar in progress

---
 packages/react/src/badge/badge.tsx           |   4 +-
 packages/react/src/badge/index.ts            |   2 +-
 packages/react/src/button/button.tsx         | 307 +++++++++----------
 packages/react/src/container/container.tsx   | 144 ++++-----
 packages/react/src/link/link.styles.ts       |   6 +-
 packages/react/src/navbar/index.ts           |   9 +-
 packages/react/src/navbar/navbar-brand.tsx   |  36 +++
 packages/react/src/navbar/navbar-content.tsx |  38 +++
 packages/react/src/navbar/navbar-item.tsx    |  38 +++
 packages/react/src/navbar/navbar.stories.tsx |  75 ++++-
 packages/react/src/navbar/navbar.styles.ts   | 227 +++++++++++++-
 packages/react/src/navbar/navbar.tsx         |  41 ++-
 12 files changed, 682 insertions(+), 245 deletions(-)
 create mode 100644 packages/react/src/navbar/navbar-brand.tsx
 create mode 100644 packages/react/src/navbar/navbar-content.tsx
 create mode 100644 packages/react/src/navbar/navbar-item.tsx

diff --git a/packages/react/src/badge/badge.tsx b/packages/react/src/badge/badge.tsx
index 5abaeb7aca..70dfaf2b30 100644
--- a/packages/react/src/badge/badge.tsx
+++ b/packages/react/src/badge/badge.tsx
@@ -17,7 +17,7 @@ interface Props extends Omit<HTMLNextUIProps<"span">, keyof BadgeVariantsProps>
 
 export type BadgeProps = Props & Omit<BadgeVariantsProps, "asChild" | "isOneChar">;
 
-export const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
+const Badge = forwardRef<BadgeProps, "span">((props, ref) => {
   const {
     css,
     children,
@@ -120,3 +120,5 @@ if (__DEV__) {
 }
 
 Badge.toString = () => ".nextui-badge";
+
+export default Badge;
diff --git a/packages/react/src/badge/index.ts b/packages/react/src/badge/index.ts
index f175e06e58..d8e008d8a6 100644
--- a/packages/react/src/badge/index.ts
+++ b/packages/react/src/badge/index.ts
@@ -1,4 +1,4 @@
-import {Badge} from "./badge";
+import Badge from "./badge";
 
 // export styled components
 export {StyledBadgeRoot, StyledBadge, StyledBadgePoints} from "./badge.styles";
diff --git a/packages/react/src/button/button.tsx b/packages/react/src/button/button.tsx
index 61cf41c372..c6a284bc85 100644
--- a/packages/react/src/button/button.tsx
+++ b/packages/react/src/button/button.tsx
@@ -17,6 +17,7 @@ import useDrip from "../use-drip";
 import withDefaults from "../utils/with-defaults";
 import {useDOMRef} from "../utils/dom";
 import {__DEV__} from "../utils/assertion";
+import {HTMLNextUIProps, forwardRef} from "../utils/system";
 
 import {filterPropsWithGroup, getCssColors} from "./utils";
 import {useButtonGroupContext} from "./button-group-context";
@@ -38,7 +39,6 @@ export interface Props extends PressEvents, FocusableProps, AriaButtonProps {
   iconRight?: React.ReactNode;
   // @deprecated
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  as?: keyof JSX.IntrinsicElements;
   className?: string;
   children?: React.ReactNode | undefined;
   iconLeftCss?: CSS;
@@ -57,181 +57,176 @@ const defaultProps = {
   type: "button",
 };
 
-type NativeAttrs = Omit<React.ButtonHTMLAttributes<unknown>, keyof Props>;
-
 interface IFocusRingAria extends FocusRingAria {
   focusProps: Omit<React.HTMLAttributes<HTMLElement>, keyof ButtonProps>;
 }
 
+type VariantProps = Omit<ButtonVariantsProps, "isPressed" | "isHovered" | "isChildLess">;
+
 export type ButtonProps = Props &
-  NativeAttrs &
-  Omit<ButtonVariantsProps, "isPressed" | "isHovered" | "isChildLess"> & {
-    css?: CSS;
+  Omit<HTMLNextUIProps<"button">, keyof VariantProps> &
+  VariantProps;
+
+const Button = forwardRef<ButtonProps, "button">((props, ref) => {
+  const {
+    as,
+    css,
+    iconLeftCss,
+    iconRightCss,
+    onClick,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    ...btnProps
+  } = props;
+
+  const groupConfig = useButtonGroupContext();
+  const filteredProps = filterPropsWithGroup(btnProps, groupConfig);
+  const cssColors = getCssColors(filteredProps);
+
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  const {
+    flat,
+    children,
+    disabled,
+    animated,
+    light,
+    ripple,
+    bordered,
+    auto,
+    borderWeight,
+    icon,
+    iconRight,
+    ghost,
+    autoFocus,
+    className,
+    ...otherProps
+  } = filteredProps;
+
+  const handleDrip = (e: React.MouseEvent<HTMLButtonElement> | PressEvent) => {
+    if (animated && ripple && buttonRef.current) {
+      onDripClickHandler(e);
+    }
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    handleDrip(e);
+    onClick?.(e);
+  };
+
+  const handlePress = (e: PressEvent) => {
+    if (e.pointerType === "keyboard" || e.pointerType === "virtual") {
+      handleDrip(e);
+      // TODO: take this out and deprecate onClick function for next release (only use the @react-aria/button impl)
+      onClick?.(e as any);
+    }
+    onPress?.(e);
   };
 
-const Button = React.forwardRef(
-  (
+  const buttonRef = useDOMRef(ref);
+  const {buttonProps, isPressed} = useButton(
     {
-      as,
-      css,
-      iconLeftCss,
-      iconRightCss,
-      onClick,
-      onPress,
+      ...btnProps,
+      onClick: handleClick,
+      isDisabled: disabled,
+      elementType: as,
+      onPress: handlePress,
       onPressStart,
       onPressEnd,
       onPressChange,
       onPressUp,
-      ...btnProps
-    }: ButtonProps,
-    ref: React.Ref<HTMLButtonElement | null>,
-  ) => {
-    const groupConfig = useButtonGroupContext();
-    const filteredProps = filterPropsWithGroup(btnProps, groupConfig);
-    const cssColors = getCssColors(filteredProps);
-
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    const {
-      flat,
-      children,
-      disabled,
-      animated,
-      light,
-      ripple,
-      bordered,
-      auto,
-      borderWeight,
-      icon,
-      iconRight,
-      ghost,
-      autoFocus,
-      className,
-      ...props
-    } = filteredProps;
-
-    const handleDrip = (e: React.MouseEvent<HTMLButtonElement> | PressEvent) => {
-      if (animated && ripple && buttonRef.current) {
-        onDripClickHandler(e);
-      }
-    };
-
-    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-      handleDrip(e);
-      onClick?.(e);
-    };
-
-    const handlePress = (e: PressEvent) => {
-      if (e.pointerType === "keyboard" || e.pointerType === "virtual") {
-        handleDrip(e);
-        // TODO: take this out and deprecate onClick function for next release (only use the @react-aria/button impl)
-        onClick?.(e as any);
-      }
-      onPress?.(e);
-    };
-
-    const buttonRef = useDOMRef(ref);
-    const {buttonProps, isPressed} = useButton(
-      {
-        ...btnProps,
-        onClick: handleClick,
-        isDisabled: disabled,
-        elementType: as,
-        onPress: handlePress,
-        onPressStart,
-        onPressEnd,
-        onPressChange,
-        onPressUp,
-      } as AriaButtonProps,
-      buttonRef,
-    );
-
-    const {hoverProps, isHovered} = useHover({isDisabled: disabled});
-    const {isFocused, isFocusVisible, focusProps}: IFocusRingAria = useFocusRing({autoFocus});
-
-    const {onClick: onDripClickHandler, ...dripBindings} = useDrip(false, buttonRef);
-
-    /* eslint-enable @typescript-eslint/no-unused-vars */
-    if (__DEV__ && filteredProps.color === "gradient" && (flat || light)) {
-      warn("Using the gradient color on flat and light buttons will have no effect.");
-    }
-    const hasIcon = icon || iconRight;
-    const isChildLess = React.Children.count(children) === 0;
-    const isRight = Boolean(iconRight);
-
-    const getState = useMemo(() => {
-      if (isPressed) return "pressed";
-      if (isHovered) return "hovered";
-
-      return disabled ? "disabled" : "ready";
-    }, [disabled, isHovered, isPressed]);
-
-    const getIconCss = useMemo<any>(() => {
-      if (isRight) return iconRightCss;
-
-      return iconLeftCss;
-    }, [isRight, iconRightCss, iconLeftCss]);
-
-    return (
-      <StyledButton
-        ref={buttonRef}
-        animated={animated}
-        as={as}
-        auto={auto}
-        borderWeight={borderWeight}
-        bordered={bordered || ghost}
-        className={clsx("nextui-button", `nextui-button--${getState}`, className)}
-        css={{
-          ...(css as any),
-          ...cssColors,
-        }}
-        data-state={getState}
-        flat={flat}
-        ghost={ghost}
-        isChildLess={isChildLess}
-        isFocusVisible={isFocusVisible && !disabled}
-        isHovered={isHovered || (ghost && isFocused)}
-        isPressed={isPressed}
-        light={light}
-        {...mergeProps(buttonProps, focusProps, hoverProps, props)}
-      >
-        {React.Children.count(children) === 0 ? (
+    } as AriaButtonProps,
+    buttonRef,
+  );
+
+  const {hoverProps, isHovered} = useHover({isDisabled: disabled});
+  const {isFocused, isFocusVisible, focusProps}: IFocusRingAria = useFocusRing({autoFocus});
+
+  const {onClick: onDripClickHandler, ...dripBindings} = useDrip(false, buttonRef);
+
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+  if (__DEV__ && filteredProps.color === "gradient" && (flat || light)) {
+    warn("Using the gradient color on flat and light buttons will have no effect.");
+  }
+  const hasIcon = icon || iconRight;
+  const isChildLess = React.Children.count(children) === 0;
+  const isRight = Boolean(iconRight);
+
+  const getState = useMemo(() => {
+    if (isPressed) return "pressed";
+    if (isHovered) return "hovered";
+
+    return disabled ? "disabled" : "ready";
+  }, [disabled, isHovered, isPressed]);
+
+  const getIconCss = useMemo<any>(() => {
+    if (isRight) return iconRightCss;
+
+    return iconLeftCss;
+  }, [isRight, iconRightCss, iconLeftCss]);
+
+  return (
+    <StyledButton
+      ref={buttonRef}
+      animated={animated}
+      as={as}
+      auto={auto}
+      borderWeight={borderWeight}
+      bordered={bordered || ghost}
+      className={clsx("nextui-button", `nextui-button--${getState}`, className)}
+      css={{
+        ...(css as any),
+        ...cssColors,
+      }}
+      data-state={getState}
+      flat={flat}
+      ghost={ghost}
+      isChildLess={isChildLess}
+      isFocusVisible={isFocusVisible && !disabled}
+      isHovered={isHovered || (ghost && isFocused)}
+      isPressed={isPressed}
+      light={light}
+      {...mergeProps(buttonProps, focusProps, hoverProps, otherProps)}
+    >
+      {React.Children.count(children) === 0 ? (
+        <ButtonIcon
+          isSingle
+          css={getIconCss}
+          isAuto={auto}
+          isGradientButtonBorder={props.color === "gradient" && (bordered || ghost)}
+          isRight={isRight}
+        >
+          {hasIcon}
+        </ButtonIcon>
+      ) : hasIcon ? (
+        <>
           <ButtonIcon
-            isSingle
             css={getIconCss}
             isAuto={auto}
             isGradientButtonBorder={props.color === "gradient" && (bordered || ghost)}
             isRight={isRight}
+            isSingle={false}
           >
             {hasIcon}
           </ButtonIcon>
-        ) : hasIcon ? (
-          <>
-            <ButtonIcon
-              css={getIconCss}
-              isAuto={auto}
-              isGradientButtonBorder={props.color === "gradient" && (bordered || ghost)}
-              isRight={isRight}
-              isSingle={false}
-            >
-              {hasIcon}
-            </ButtonIcon>
-            <div
-              className={clsx("nextui-button-text", {
-                "nextui-button-text-right": isRight,
-                "nextui-button-text-left": !isRight,
-              })}
-            >
-              {children}
-            </div>
-          </>
-        ) : (
-          <span className="nextui-button-text">{children}</span>
-        )}
-        <ButtonDrip color="white" {...dripBindings} />
-      </StyledButton>
-    );
-  },
-);
+          <div
+            className={clsx("nextui-button-text", {
+              "nextui-button-text-right": isRight,
+              "nextui-button-text-left": !isRight,
+            })}
+          >
+            {children}
+          </div>
+        </>
+      ) : (
+        <span className="nextui-button-text">{children}</span>
+      )}
+      <ButtonDrip color="white" {...dripBindings} />
+    </StyledButton>
+  );
+});
 
 type ButtonComponent<T, P = {}> = React.ForwardRefExoticComponent<
   PropsWithoutRef<P> & RefAttributes<T>
diff --git a/packages/react/src/container/container.tsx b/packages/react/src/container/container.tsx
index 7c110fd6c5..8ba64cae51 100644
--- a/packages/react/src/container/container.tsx
+++ b/packages/react/src/container/container.tsx
@@ -1,15 +1,8 @@
-import React, { useMemo } from "react";
-
-import { CSS } from "../theme/stitches.config";
-import { useDOMRef } from "../utils/dom";
-import {
-  Wrap,
-  Display,
-  Justify,
-  Direction,
-  AlignItems,
-  AlignContent,
-} from "../utils/prop-types";
+import React, {useMemo} from "react";
+
+import {CSS} from "../theme/stitches.config";
+import {useDOMRef} from "../utils/dom";
+import {Wrap, Display, Justify, Direction, AlignItems, AlignContent} from "../utils/prop-types";
 
 import StyledContainer from "./container.styles";
 
@@ -50,70 +43,69 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
 export type ContainerProps = Props & typeof defaultProps & NativeAttrs;
 
-const Container = React.forwardRef<
-  HTMLElement,
-  React.PropsWithChildren<ContainerProps>
->((containerProps, ref) => {
-  const {
-    xs,
-    sm,
-    md,
-    lg,
-    xl,
-    wrap,
-    gap,
-    as,
-    display,
-    justify,
-    direction,
-    alignItems,
-    alignContent,
-    children,
-    responsive,
-    fluid,
-    css,
-    ...otherProps
-  } = containerProps;
-
-  const domRef = useDOMRef(ref);
-
-  const gapUnit = useMemo(() => {
-    return `calc(${gap} * $space$sm)`;
-  }, [gap]);
-
-  const getMaxWidth = () => {
-    if (xs) return "$breakpoints$xs";
-    if (sm) return "$breakpoints$sm";
-    if (md) return "$breakpoints$md";
-    if (lg) return "$breakpoints$lg";
-    if (xl) return "$breakpoints$xl";
-
-    return "";
-  };
-
-  return (
-    <StyledContainer
-      ref={domRef}
-      as={as}
-      css={{
-        px: gapUnit,
-        maxWidth: getMaxWidth(),
-        alignItems,
-        alignContent,
-        flexWrap: wrap,
-        display: display,
-        justifyContent: justify,
-        flexDirection: direction,
-        ...(css as any),
-      }}
-      fluid={fluid}
-      responsive={responsive}
-      {...otherProps}
-    >
-      {children}
-    </StyledContainer>
-  );
-});
+const Container = React.forwardRef<HTMLElement, React.PropsWithChildren<ContainerProps>>(
+  (containerProps, ref) => {
+    const {
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      wrap,
+      gap,
+      as,
+      display,
+      justify,
+      direction,
+      alignItems,
+      alignContent,
+      children,
+      responsive,
+      fluid,
+      css,
+      ...otherProps
+    } = containerProps;
+
+    const domRef = useDOMRef(ref);
+
+    const gapUnit = useMemo(() => {
+      return `calc(${gap} * $space$sm)`;
+    }, [gap]);
+
+    const getMaxWidth = () => {
+      if (xs) return "$breakpoints$xs";
+      if (sm) return "$breakpoints$sm";
+      if (md) return "$breakpoints$md";
+      if (lg) return "$breakpoints$lg";
+      if (xl) return "$breakpoints$xl";
+
+      return "";
+    };
+
+    return (
+      <StyledContainer
+        ref={domRef}
+        as={as}
+        css={{
+          px: gapUnit,
+          maxWidth: getMaxWidth(),
+          alignItems,
+          alignContent,
+          flexWrap: wrap,
+          display: display,
+          justifyContent: justify,
+          flexDirection: direction,
+          ...(css as any),
+        }}
+        fluid={fluid}
+        responsive={responsive}
+        {...otherProps}
+      >
+        {children}
+      </StyledContainer>
+    );
+  },
+);
 
 Container.displayName = "NextUI.Container";
 
diff --git a/packages/react/src/link/link.styles.ts b/packages/react/src/link/link.styles.ts
index 5594b7bfe3..9ff521b144 100644
--- a/packages/react/src/link/link.styles.ts
+++ b/packages/react/src/link/link.styles.ts
@@ -4,13 +4,13 @@ import {addColorAlpha} from "../utils/color";
 export const StyledLinkIcon = styled("svg", {
   ml: "$1",
   as: "center",
-  display: "inline-flex",
+  display: "flex",
   color: "currentColor",
 });
 
 export const StyledLink = styled("a", {
-  display: "inline-flex",
-  alignItems: "baseline",
+  display: "flex",
+  alignItems: "center",
   lineHeight: "inherit",
   textDecoration: "none",
   width: "fitContent",
diff --git a/packages/react/src/navbar/index.ts b/packages/react/src/navbar/index.ts
index d8a885b455..b8dcd1ce0e 100644
--- a/packages/react/src/navbar/index.ts
+++ b/packages/react/src/navbar/index.ts
@@ -1,3 +1,10 @@
-import {Navbar} from "./navbar";
+import NavbarBrand from "./navbar-brand";
+import NavbarContent from "./navbar-content";
+import NavbarItem from "./navbar-item";
+import Navbar from "./navbar";
+
+Navbar.Brand = NavbarBrand;
+Navbar.Content = NavbarContent;
+Navbar.Item = NavbarItem;
 
 export default Navbar;
diff --git a/packages/react/src/navbar/navbar-brand.tsx b/packages/react/src/navbar/navbar-brand.tsx
new file mode 100644
index 0000000000..a55c7fbd21
--- /dev/null
+++ b/packages/react/src/navbar/navbar-brand.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import {useDOMRef} from "../utils/dom";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+
+import {StyledNavbarBrand} from "./navbar.styles";
+
+export interface NavbarBrandProps extends HTMLNextUIProps<"span"> {
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+const NavbarBrand = forwardRef<NavbarBrandProps, "span">((props, ref) => {
+  const domRef = useDOMRef(ref);
+
+  const {children, className, ...otherProps} = props;
+
+  return (
+    <StyledNavbarBrand
+      ref={domRef}
+      className={clsx("nextui-navbar-brand", className)}
+      {...otherProps}
+    >
+      {children}
+    </StyledNavbarBrand>
+  );
+});
+
+if (__DEV__) {
+  NavbarBrand.displayName = "NextUI.NavbarBrand";
+}
+
+NavbarBrand.toString = () => ".nextui-navbar-brand";
+
+export default NavbarBrand;
diff --git a/packages/react/src/navbar/navbar-content.tsx b/packages/react/src/navbar/navbar-content.tsx
new file mode 100644
index 0000000000..5816b3e976
--- /dev/null
+++ b/packages/react/src/navbar/navbar-content.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import {useDOMRef} from "../utils/dom";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+
+import {StyledNavbarContent, NavbarContentVariantsProps} from "./navbar.styles";
+
+export interface Props extends Omit<HTMLNextUIProps<"ul">, keyof NavbarContentVariantsProps> {
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+export type NavbarContentProps = Props & NavbarContentVariantsProps;
+
+const NavbarContent = forwardRef<NavbarContentProps, "ul">((props, ref) => {
+  const domRef = useDOMRef(ref);
+
+  const {children, className, ...otherProps} = props;
+
+  return (
+    <StyledNavbarContent
+      ref={domRef}
+      className={clsx("nextui-navbar-content", className)}
+      {...otherProps}
+    >
+      {children}
+    </StyledNavbarContent>
+  );
+});
+
+if (__DEV__) {
+  NavbarContent.displayName = "NextUI.NavbarContent";
+}
+
+NavbarContent.toString = () => ".nextui-navbar-content";
+
+export default NavbarContent;
diff --git a/packages/react/src/navbar/navbar-item.tsx b/packages/react/src/navbar/navbar-item.tsx
new file mode 100644
index 0000000000..9ea38d4d51
--- /dev/null
+++ b/packages/react/src/navbar/navbar-item.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import {useDOMRef} from "../utils/dom";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+
+import {StyledNavbarItem, NavbarItemVariantsProps} from "./navbar.styles";
+
+export interface Props extends Omit<HTMLNextUIProps<"li">, keyof NavbarItemVariantsProps> {
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+export type NavbarItemProps = Props & NavbarItemVariantsProps;
+
+const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
+  const domRef = useDOMRef(ref);
+
+  const {children, className, ...otherProps} = props;
+
+  return (
+    <StyledNavbarItem
+      ref={domRef}
+      className={clsx("nextui-navbar-item", className)}
+      {...otherProps}
+    >
+      {children}
+    </StyledNavbarItem>
+  );
+});
+
+if (__DEV__) {
+  NavbarItem.displayName = "NextUI.NavbarItem";
+}
+
+NavbarItem.toString = () => ".nextui-navbar-item";
+
+export default NavbarItem;
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 5f84f94589..1751dd3ef6 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import {Meta} from "@storybook/react";
 
+import {Link, Text, Button} from "../index";
+
 import Navbar from "./index";
 
 export default {
@@ -8,4 +10,75 @@ export default {
   component: Navbar,
 } as Meta;
 
-export const Default = () => <Navbar>Default</Navbar>;
+const AcmeLogo = () => (
+  <svg
+    className=""
+    fill="none"
+    height="36"
+    viewBox="0 0 32 32"
+    width="36"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect fill="var(--secondary)" height="100%" rx="16" width="100%" />
+    <path
+      clipRule="evenodd"
+      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+const DefaultContent = () => (
+  <>
+    <Navbar.Content placement="start">
+      <Navbar.Brand as={Link} color="text">
+        <AcmeLogo />
+        <Text b css={{"@xsMax": {d: "none"}}}>
+          ACME
+        </Text>
+      </Navbar.Brand>
+    </Navbar.Content>
+    <Navbar.Content css={{"@smMax": {d: "none"}}}>
+      <Navbar.Item as={Link} color="text" href="#">
+        Features
+      </Navbar.Item>
+      <Navbar.Item as={Link} color="text" href="#">
+        Customers
+      </Navbar.Item>
+      <Navbar.Item as={Link} color="text" href="#">
+        Integrations
+      </Navbar.Item>
+      <Navbar.Item as={Link} color="text" href="#">
+        Pricing
+      </Navbar.Item>
+      <Navbar.Item as={Link} color="text" href="#">
+        Company
+      </Navbar.Item>
+    </Navbar.Content>
+    <Navbar.Content placement="end">
+      <Navbar.Item as={Link} href="#">
+        Login
+      </Navbar.Item>
+      <Navbar.Item>
+        <Link href="#">
+          <Button auto flat>
+            Sign Up
+          </Button>
+        </Link>
+      </Navbar.Item>
+    </Navbar.Content>
+  </>
+);
+
+export const Default = () => (
+  <Navbar>
+    <DefaultContent />
+  </Navbar>
+);
+
+export const Floating = () => (
+  <Navbar variant="floating">
+    <DefaultContent />
+  </Navbar>
+);
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index 45536087fb..027c49b4b4 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -1,3 +1,226 @@
-import {styled} from "../theme/stitches.config";
+import {styled, VariantProps} from "../theme/stitches.config";
 
-export const StyledNavbar = styled("nav", {});
+export const StyledBaseNavbarItem = styled("li", {
+  mb: 0,
+  display: "flex",
+  alignItems: "center",
+  listStyleType: "none",
+  lineHeight: "inherit",
+});
+
+export const StyledBaseNavbarList = styled("ul", {
+  m: 0,
+  listStyle: "none",
+  lineHeight: "$xs",
+  li: {
+    mb: 0,
+  },
+});
+
+export const StyledNavbarBrand = styled("span", {
+  d: "flex",
+  bg: "transparent",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  textDecoration: "none",
+  fontSize: "$base",
+  whiteSpace: "nowrap",
+  marginRight: "$$navbarContentItemSpace",
+});
+
+export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
+  fontSize: "inherit",
+});
+
+export const StyledNavbarContent = styled(StyledBaseNavbarList, {
+  $$navbarContentItemSpace: "$space$8",
+  d: "flex",
+  size: "100%",
+  flexWrap: "nowrap",
+  alignItems: "center",
+  variants: {
+    placement: {
+      start: {
+        justifyContent: "flex-start",
+      },
+      center: {
+        justifyContent: "center",
+        [`& ${StyledNavbarItem}`]: {
+          mx: "$$navbarContentItemSpace",
+        },
+      },
+      around: {
+        justifyContent: "space-around",
+      },
+      between: {
+        justifyContent: "space-between",
+      },
+      end: {
+        justifyContent: "flex-end",
+        [`& ${StyledNavbarItem}`]: {
+          ml: "$$navbarContentItemSpace",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    placement: "center",
+  },
+});
+
+export const StyledNavbarContainer = styled("div", {
+  size: "100%",
+  display: "flex",
+  alignItems: "center",
+  position: "relative",
+  boxSizing: "border-box",
+  px: "$$navbarPadding",
+  bg: "$$navbarBackgroundColor",
+  color: "$$navbarTextColor",
+  maxW: "$$navbarContainerMaxWidth",
+  "@xsMax": {
+    $$navbarPadding: "$space$6",
+    $$navbarFloatingMargin: "$space$6",
+  },
+});
+
+export const StyledNavbar = styled("nav", {
+  // variables
+  $$navbarBackgroundColor: "$colors$background",
+  $$navbarTextColor: "$colors$text",
+  $$navbarHeight: "76px",
+  $$navbarBorderColor: "$colors$border",
+  $$navbarBorderRadius: "$radii$lg",
+  $$navbarPadding: "$space$10",
+  $$navbarFloatingMargin: "$space$10",
+  $$navbarContainerMaxWidth: "$breakpoints$lg",
+  $$navbarShadow: "$shadows$md",
+  // styles
+  width: "100%",
+  dflex: "center",
+  position: "relative",
+  height: "$$navbarHeight",
+  minHeight: "$$navbarHeight",
+  variants: {
+    variant: {
+      static: {},
+      fixed: {},
+      sticky: {},
+      floating: {
+        [`& ${StyledNavbarContainer}`]: {
+          mx: "$$navbarFloatingMargin",
+          borderRadius: "$$navbarBorderRadius",
+        },
+      },
+    },
+    maxWidth: {
+      xs: {
+        $$navbarContainerMaxWidth: "$breakpoints$xs",
+      },
+      sm: {
+        $$navbarContainerMaxWidth: "$breakpoints$sm",
+      },
+      md: {
+        $$navbarContainerMaxWidth: "$breakpoints$md",
+      },
+      lg: {
+        $$navbarContainerMaxWidth: "$breakpoints$lg",
+      },
+      xl: {
+        $$navbarContainerMaxWidth: "$breakpoints$xl",
+      },
+      fluid: {
+        $$navbarContainerMaxWidth: "100%",
+      },
+    },
+    applyBackgroundContrast: {
+      true: {
+        $$navbarBackgroundColor: "$colors$backgroundContrast",
+      },
+    },
+    isBordered: {
+      true: {
+        [`& ${StyledNavbarContainer}`]: {
+          borderBottom: "$$navbarBorderWeight solid $$navbarBorderColor",
+        },
+      },
+    },
+    isInverted: {
+      true: {},
+    },
+    isCompact: {
+      true: {
+        $$navbarHeight: "54px",
+      },
+    },
+    enableShadow: {
+      true: {
+        boxShadow: "$$navbarShadow",
+        clipPath: "inset(0px 0px calc($$navbarHeight*-1) 0px)",
+      },
+    },
+    disableBlur: {
+      true: {},
+    },
+    borderWeight: {
+      light: {
+        $$navbarBorderWeight: "$borderWeights$light",
+      },
+      normal: {
+        $$navbarBorderWeight: "$borderWeights$normal",
+      },
+      bold: {
+        $$navbarBorderWeight: "$borderWeights$bold",
+      },
+      extrabold: {
+        $$navbarBorderWeight: "$borderWeights$extrabold",
+      },
+      black: {
+        $$navbarBorderWeight: "$borderWeights$black",
+      },
+    },
+  },
+  compoundVariants: [
+    /**
+     * @isBordered true
+     * @variant floating
+     */
+    {
+      isBordered: true,
+      variant: "floating",
+      css: {
+        [`& ${StyledNavbarContainer}`]: {
+          border: "$$navbarBorderWeight solid $$navbarBorderColor",
+        },
+      },
+    },
+    /**
+     * @variant floating
+     * @enableShadow true
+     */
+    {
+      variant: "floating",
+      enableShadow: true,
+      css: {
+        boxShadow: "none",
+        clipPath: "none",
+        [`& ${StyledNavbarContainer}`]: {
+          boxShadow: "$$navbarShadow",
+        },
+      },
+    },
+  ],
+  defaultVariants: {
+    variant: "static",
+    borderWeight: "light",
+    maxWidth: "lg",
+    isBordered: false,
+    isInverted: false,
+    enableShadow: true,
+    disableBlur: false,
+  },
+});
+
+export type NavbarVariantsProps = VariantProps<typeof StyledNavbar>;
+export type NavbarContentVariantsProps = VariantProps<typeof StyledNavbarContent>;
+export type NavbarItemVariantsProps = VariantProps<typeof StyledNavbarItem>;
diff --git a/packages/react/src/navbar/navbar.tsx b/packages/react/src/navbar/navbar.tsx
index ac843a25cc..8237273308 100644
--- a/packages/react/src/navbar/navbar.tsx
+++ b/packages/react/src/navbar/navbar.tsx
@@ -2,16 +2,41 @@ import React from "react";
 
 import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
+import clsx from "../utils/clsx";
+import {CSS} from "../theme/stitches.config";
 import {__DEV__} from "../utils/assertion";
 
-import {StyledNavbar} from "./navbar.styles";
+import {StyledNavbar, StyledNavbarContainer, NavbarVariantsProps} from "./navbar.styles";
+import NavbarBrand from "./navbar-brand";
+import NavbarContent from "./navbar-content";
+import NavbarItem from "./navbar-item";
 
-export interface NavbarProps extends HTMLNextUIProps<"nav"> {}
+export interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps> {
+  children?: React.ReactNode | React.ReactNode[];
+  enableShadowOnlyOnScroll?: boolean;
+  containerCss?: CSS;
+}
+
+export type NavbarProps = Props & NavbarVariantsProps;
 
-export const Navbar = forwardRef<NavbarProps, "nav">((props, ref) => {
+const Navbar = forwardRef<NavbarProps, "nav">((props, ref) => {
   const domRef = useDOMRef(ref);
 
-  return <StyledNavbar ref={domRef}>Hello</StyledNavbar>;
+  const {
+    children,
+    className,
+    containerCss,
+    enableShadowOnlyOnScroll = false,
+    ...otherProps
+  } = props;
+
+  return (
+    <StyledNavbar ref={domRef} className={clsx("nextui-navbar", className)} {...otherProps}>
+      <StyledNavbarContainer className="nextui-navbar-container" css={containerCss}>
+        {children}
+      </StyledNavbarContainer>
+    </StyledNavbar>
+  );
 });
 
 if (__DEV__) {
@@ -19,3 +44,11 @@ if (__DEV__) {
 }
 
 Navbar.toString = () => ".nextui-navbar";
+
+type NavbarComponent<P = {}> = React.FC<P> & {
+  Brand: typeof NavbarBrand;
+  Content: typeof NavbarContent;
+  Item: typeof NavbarItem;
+};
+
+export default Navbar as NavbarComponent<NavbarProps>;

From ae44a623136916259987d45451a2a3e39f33f481 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 10 Jul 2022 22:30:12 -0300
Subject: [PATCH 033/106] feat(react-link): link has been migrated to
 @react-aria/link

---
 packages/react/package.json                  |   1 +
 packages/react/src/button/button.tsx         |   4 +-
 packages/react/src/link/link.stories.tsx     |  53 ++++--
 packages/react/src/link/link.styles.ts       | 184 ++++++++-----------
 packages/react/src/link/link.tsx             |  43 +++--
 packages/react/src/navbar/navbar.stories.tsx |   8 +-
 packages/react/src/navbar/navbar.tsx         |   2 +-
 packages/react/src/theme/common.ts           |   1 -
 yarn.lock                                    |  56 ++++++
 9 files changed, 204 insertions(+), 148 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index e262b9d775..c76f00b0f2 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -62,6 +62,7 @@
     "@react-aria/i18n": "3.4.0",
     "@react-aria/interactions": "3.9.0",
     "@react-aria/label": "3.3.0",
+    "@react-aria/link": "^3.3.1",
     "@react-aria/menu": "3.5.0",
     "@react-aria/overlays": "3.9.0",
     "@react-aria/radio": "3.2.0",
diff --git a/packages/react/src/button/button.tsx b/packages/react/src/button/button.tsx
index c6a284bc85..7434679555 100644
--- a/packages/react/src/button/button.tsx
+++ b/packages/react/src/button/button.tsx
@@ -1,4 +1,4 @@
-import type {PressEvents, PressEvent, FocusableProps} from "@react-types/shared";
+import type {PressEvent} from "@react-types/shared";
 import type {AriaButtonProps} from "@react-types/button";
 import type {FocusRingAria} from "@react-aria/focus";
 
@@ -25,7 +25,7 @@ import ButtonGroup from "./button-group";
 import ButtonIcon from "./button-icon";
 import StyledButton, {ButtonVariantsProps} from "./button.styles";
 
-export interface Props extends PressEvents, FocusableProps, AriaButtonProps {
+export interface Props extends AriaButtonProps {
   light?: boolean;
   color?: NormalColors;
   flat?: boolean;
diff --git a/packages/react/src/link/link.stories.tsx b/packages/react/src/link/link.stories.tsx
index c946274f4a..653688d6da 100644
--- a/packages/react/src/link/link.stories.tsx
+++ b/packages/react/src/link/link.stories.tsx
@@ -1,29 +1,13 @@
 import React from "react";
 import {Meta} from "@storybook/react";
 
-import {Spacer, Text} from "../index";
+import {Spacer, Grid, Text} from "../index";
 
 import Link from "./link";
 
 export default {
   title: "Navigation/Link",
   component: Link,
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
-          flexWrap: "wrap",
-          width: "100%",
-          maxWidth: "100%",
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
 } as Meta;
 
 const text = `"First solve the problem. Then, write the code." - Jon Johnson.`;
@@ -72,7 +56,36 @@ export const Icon = () => (
 );
 
 export const Block = () => (
-  <Link block href="#">
-    {text}
-  </Link>
+  <Grid.Container gap={1}>
+    <Grid xs={12}>
+      <Link block href="#">
+        {text}
+      </Link>
+    </Grid>
+    <Grid xs={12}>
+      <Link block color="text" href="#">
+        {text}
+      </Link>
+    </Grid>
+    <Grid xs={12}>
+      <Link block color="secondary" href="#">
+        {text}
+      </Link>
+    </Grid>
+    <Grid xs={12}>
+      <Link block color="success" href="#">
+        {text}
+      </Link>
+    </Grid>
+    <Grid xs={12}>
+      <Link block color="warning" href="#">
+        {text}
+      </Link>
+    </Grid>
+    <Grid xs={12}>
+      <Link block color="error" href="#">
+        {text}
+      </Link>
+    </Grid>
+  </Grid.Container>
 );
diff --git a/packages/react/src/link/link.styles.ts b/packages/react/src/link/link.styles.ts
index 9ff521b144..5bd4bb0790 100644
--- a/packages/react/src/link/link.styles.ts
+++ b/packages/react/src/link/link.styles.ts
@@ -1,4 +1,5 @@
 import {theme, styled, VariantProps} from "../theme/stitches.config";
+import {cssFocusVisible} from "../theme/shared-css";
 import {addColorAlpha} from "../utils/color";
 
 export const StyledLinkIcon = styled("svg", {
@@ -8,126 +9,101 @@ export const StyledLinkIcon = styled("svg", {
   color: "currentColor",
 });
 
-export const StyledLink = styled("a", {
-  display: "flex",
-  alignItems: "center",
-  lineHeight: "inherit",
-  textDecoration: "none",
-  width: "fitContent",
-  backgroundImage: "inherit",
-  backgroundColor: "inherit",
-  backgroundClip: "inherit",
-  WebkitTextFillColor: "inherit",
-  "&:hover": {
-    opacity: 0.8,
-  },
-  "@motion": {
-    transition: "none",
-  },
-  variants: {
-    color: {
-      default: {
-        color: "$link",
-      },
-      text: {
-        color: "$text",
-      },
-      primary: {
-        color: "$primary",
-      },
-      secondary: {
-        color: "$secondary",
-      },
-      success: {
-        color: "$success",
-      },
-      warning: {
-        color: "$warning",
-      },
-      error: {
-        color: "$error",
-      },
-    },
-    underline: {
-      true: {
-        "&:hover, &:active, &:focus": {
-          textDecoration: "underline",
-        },
-      },
-    },
-    block: {
-      true: {
-        padding: "$2 $4",
-        borderRadius: "$base",
-      },
+export const StyledLink = styled(
+  "a",
+  {
+    display: "flex",
+    alignItems: "center",
+    lineHeight: "inherit",
+    textDecoration: "none",
+    width: "fitContent",
+    backgroundImage: "inherit",
+    backgroundColor: "inherit",
+    backgroundClip: "inherit",
+    WebkitTextFillColor: "inherit",
+    outline: "none",
+    "&:hover": {
+      opacity: 0.8,
     },
-    animated: {
-      true: {
-        transition: "$link",
-      },
+    "@motion": {
+      transition: "none",
     },
-  },
-  compoundVariants: [
-    {
-      color: "default",
-      block: true,
-      css: {
-        "&:hover": {
-          backgroundColor: addColorAlpha(theme.colors?.link?.value, 0.2),
+    variants: {
+      color: {
+        default: {
+          color: "$link",
+          $$linkBackgroundColor: addColorAlpha(theme.colors?.link?.value, 0.2),
         },
-      },
-    },
-    {
-      color: "primary",
-      block: true,
-      css: {
-        "&:hover": {
-          backgroundColor: "$primaryLight",
+        text: {
+          color: "$text",
+          $$linkBackgroundColor: addColorAlpha(theme.colors?.text?.value, 0.2),
+        },
+        primary: {
+          color: "$primary",
+          $$linkBackgroundColor: "$colors$primaryLight",
+        },
+        secondary: {
+          color: "$secondary",
+          $$linkBackgroundColor: "$colors$secondaryLight",
+        },
+        success: {
+          color: "$success",
+          $$linkBackgroundColor: "$colors$successLight",
+        },
+        warning: {
+          color: "$warning",
+          $$linkBackgroundColor: "$colors$warningLight",
+        },
+        error: {
+          color: "$error",
+          $$linkBackgroundColor: "$colors$errorLight",
         },
       },
-    },
-    {
-      color: "secondary",
-      block: true,
-      css: {
-        "&:hover": {
-          backgroundColor: "$secondaryLight",
+      underline: {
+        true: {
+          "&:hover, &:active, &:focus": {
+            textDecoration: "underline",
+          },
         },
       },
-    },
-    {
-      color: "success",
-      block: true,
-      css: {
-        "&:hover": {
-          backgroundColor: "$successLight",
+      block: {
+        true: {
+          padding: "$2 $4",
+          borderRadius: "$base",
+          "&:hover": {
+            backgroundColor: "$$linkBackgroundColor",
+          },
         },
       },
-    },
-    {
-      color: "warning",
-      block: true,
-      css: {
-        "&:hover": {
-          backgroundColor: "$warningLight",
+      animated: {
+        true: {
+          transition: "opacity 0.25s ease 0s, box-shadow 0.25s ease 0s",
         },
       },
     },
-    {
-      color: "error",
-      block: true,
-      css: {
-        "&:hover": {
-          backgroundColor: "$errorLight",
+    compoundVariants: [
+      /**
+       * @block true
+       * @animated true
+       */
+      {
+        block: true,
+        animated: true,
+        css: {
+          transition: "opacity 0.25s ease 0s, box-shadow 0.25s ease 0s, background 0.25s ease 0s",
+          "@motion": {
+            transition: "none",
+          },
         },
       },
+    ],
+    defaultVariants: {
+      color: "default",
+      animated: true,
     },
-  ],
-  defaultVariants: {
-    color: "default",
-    animated: true,
   },
-});
+  cssFocusVisible,
+);
 
 export type LinkVariantsProps = VariantProps<typeof StyledLink>;
 
diff --git a/packages/react/src/link/link.tsx b/packages/react/src/link/link.tsx
index 345324c205..4ef0b44cf5 100644
--- a/packages/react/src/link/link.tsx
+++ b/packages/react/src/link/link.tsx
@@ -1,35 +1,48 @@
+import type {AriaLinkProps} from "@react-types/link";
+
 import React from "react";
+import {useLink} from "@react-aria/link";
+import {mergeProps} from "@react-aria/utils";
+import {useFocusRing} from "@react-aria/focus";
 
-import withDefaults from "../utils/with-defaults";
-import {CSS} from "../theme/stitches.config";
+import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import {useDOMRef} from "../utils/dom";
+import clsx from "../utils/clsx";
 import {__DEV__} from "../utils/assertion";
 
 import LinkIcon from "./icon";
 import StyledLink, {LinkVariantsProps} from "./link.styles";
 
-export interface Props {
+interface Props extends Omit<HTMLNextUIProps<"a">, keyof LinkVariantsProps> {
+  children?: React.ReactNode | React.ReactNode[];
   icon?: boolean;
-  as?: keyof JSX.IntrinsicElements;
 }
 
-const defaultProps = {
-  icon: false,
-};
+export type LinkProps = Props & LinkVariantsProps & AriaLinkProps;
+
+const Link = forwardRef<LinkProps, "a">((props, ref) => {
+  const {children, icon = false, as, autoFocus, className, ...otherProps} = props;
 
-type NativeAttrs = Omit<React.AnchorHTMLAttributes<unknown>, keyof Props>;
+  const domRef = useDOMRef(ref);
 
-export type LinkProps = Props & typeof defaultProps & NativeAttrs & LinkVariantsProps & {css?: CSS};
+  const {linkProps} = useLink({...otherProps, elementType: as} as AriaLinkProps, domRef);
+  const {isFocusVisible, focusProps} = useFocusRing({autoFocus});
 
-const Link = React.forwardRef<React.ElementRef<typeof StyledLink>, LinkProps>(
-  ({children, icon, ...props}, forwardedRef) => (
-    <StyledLink {...props} ref={forwardedRef}>
+  return (
+    <StyledLink
+      ref={domRef}
+      as={as}
+      className={clsx("nextui-link", className)}
+      isFocusVisible={isFocusVisible}
+      {...mergeProps(linkProps, focusProps, otherProps)}
+    >
       <>
         {children}
         {icon && <LinkIcon />}
       </>
     </StyledLink>
-  ),
-);
+  );
+});
 
 if (__DEV__) {
   Link.displayName = "NextUI.Link";
@@ -37,4 +50,4 @@ if (__DEV__) {
 
 Link.toString = () => ".nextui-link";
 
-export default withDefaults(Link, defaultProps);
+export default Link;
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 1751dd3ef6..3edf34dd0a 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -61,11 +61,9 @@ const DefaultContent = () => (
         Login
       </Navbar.Item>
       <Navbar.Item>
-        <Link href="#">
-          <Button auto flat>
-            Sign Up
-          </Button>
-        </Link>
+        <Button auto flat as={Link} href="#">
+          Sign Up
+        </Button>
       </Navbar.Item>
     </Navbar.Content>
   </>
diff --git a/packages/react/src/navbar/navbar.tsx b/packages/react/src/navbar/navbar.tsx
index 8237273308..0739d3ae94 100644
--- a/packages/react/src/navbar/navbar.tsx
+++ b/packages/react/src/navbar/navbar.tsx
@@ -11,7 +11,7 @@ import NavbarBrand from "./navbar-brand";
 import NavbarContent from "./navbar-content";
 import NavbarItem from "./navbar-item";
 
-export interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps> {
+interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps> {
   children?: React.ReactNode | React.ReactNode[];
   enableShadowOnlyOnScroll?: boolean;
   containerCss?: CSS;
diff --git a/packages/react/src/theme/common.ts b/packages/react/src/theme/common.ts
index 04d3a11852..fdd0201e54 100644
--- a/packages/react/src/theme/common.ts
+++ b/packages/react/src/theme/common.ts
@@ -147,7 +147,6 @@ export const defaultTokens = {
     button:
       "background 0.25s ease 0s, color 0.25s ease 0s, border-color 0.25s ease 0s, box-shadow 0.25s ease 0s, transform 0.25s ease 0s, opacity 0.25s ease 0s",
     avatar: "box-shadow 0.25s ease 0s, opacity 0.25s ease 0s",
-    link: "opacity 0.25s ease 0s, background 0.25s ease 0s",
     card: "transform 0.25s ease 0s, filter 0.25s ease 0s, box-shadow 0.25s ease 0s",
     dropdownItem:
       "background 0.25s ease, transform 0.25s ease, color 0.15s ease, box-shadow 0.25s ease 0s",
diff --git a/yarn.lock b/yarn.lock
index f5fffb3684..5154ad65ba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3693,6 +3693,17 @@
     "@react-types/shared" "^3.13.0"
     clsx "^1.1.1"
 
+"@react-aria/focus@^3.6.1":
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.6.1.tgz#46478d0919bdc4fedfa1ea115b36f93c055ce8d8"
+  integrity sha512-4IHAu+826jC3SjWwuaYhCr0qhWg4XwmJIUEhcL1wbw3fq2dsjIBwEJ5HoayhluiVCfjGbcQcJNf1L4Vj3VTp4w==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/interactions" "^3.9.1"
+    "@react-aria/utils" "^3.13.1"
+    "@react-types/shared" "^3.13.1"
+    clsx "^1.1.1"
+
 "@react-aria/grid@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@react-aria/grid/-/grid-3.3.0.tgz#7f5becfaa6b57a47cbe5429a9c369012122a9426"
@@ -3734,6 +3745,15 @@
     "@react-aria/utils" "^3.13.0"
     "@react-types/shared" "^3.13.0"
 
+"@react-aria/interactions@^3.9.1":
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.9.1.tgz#1860b905d9a0b17ed74dd7fe769370e017cb3015"
+  integrity sha512-qPTJpUwIiis2OwpVzDd3I8dBjBkelDnvAW+dJkX+8B840JP5a7E1zVoAuR7OOAXqKa95R7miwK+5la1aSeWoDg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/utils" "^3.13.1"
+    "@react-types/shared" "^3.13.1"
+
 "@react-aria/label@3.3.0", "@react-aria/label@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.3.0.tgz#1a687c6b70d4bca4992433c97974b41df9f4dad4"
@@ -3744,6 +3764,18 @@
     "@react-types/label" "^3.6.0"
     "@react-types/shared" "^3.13.0"
 
+"@react-aria/link@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/link/-/link-3.3.1.tgz#92ba89f1f30b06b4aa84db05f2058bcddd862b47"
+  integrity sha512-so77s4IjZo8VGi85v6oDUzsQRoAwQH4LUUUpDLbKxEb5YaiN4/3yCVibeZrWzIzOTCOyLMXPbGwxHOUsl8EhVg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.6.1"
+    "@react-aria/interactions" "^3.9.1"
+    "@react-aria/utils" "^3.13.1"
+    "@react-types/link" "^3.3.1"
+    "@react-types/shared" "^3.13.1"
+
 "@react-aria/live-announcer@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@react-aria/live-announcer/-/live-announcer-3.1.0.tgz#06cfce35f6a9bcff266ab0ceab97f2fe6e487975"
@@ -3866,6 +3898,17 @@
     "@react-types/shared" "^3.13.0"
     clsx "^1.1.1"
 
+"@react-aria/utils@^3.13.1":
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.13.1.tgz#45557fdc7ae9de057a83014013bf09e54d074c96"
+  integrity sha512-usW6RoLKil4ylgDbRcaQ5YblNGv5ZihI4I9NB8pdazhw53cSRyLaygLdmHO33xgpPnAhb6Nb/tv8d5p6cAde+A==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/ssr" "^3.2.0"
+    "@react-stately/utils" "^3.5.0"
+    "@react-types/shared" "^3.13.1"
+    clsx "^1.1.1"
+
 "@react-aria/visually-hidden@3.3.0", "@react-aria/visually-hidden@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.3.0.tgz#2ecddb5704b9a2a68df918bb49e6f125a589ef99"
@@ -4069,6 +4112,14 @@
   dependencies:
     "@react-types/shared" "^3.13.0"
 
+"@react-types/link@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@react-types/link/-/link-3.3.1.tgz#72ebbc8d560cfff9a48befa6005fea1f5702edde"
+  integrity sha512-+kx61SCpH9QI0GIhdrgnkSOcgCpMhgpX+PmiMw7gDv+PiCP1GhSJxNw7bZB6sXLYM0Ye/L76F3f2MrPIfec2xw==
+  dependencies:
+    "@react-aria/interactions" "^3.9.1"
+    "@react-types/shared" "^3.13.1"
+
 "@react-types/menu@3.6.0", "@react-types/menu@^3.6.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@react-types/menu/-/menu-3.6.0.tgz#ddbdaf2d1f5b846411b1cf0370e39705e656d62f"
@@ -4096,6 +4147,11 @@
   resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.13.0.tgz#01ef4312886ed8d449065f44168e2bfd3134acb7"
   integrity sha512-ha+Xzn6gG/aww2nl7A6kYSJdYQypTxdYgNrJvddDB7h0QuyVQTf27iVleOWrmkHQ1TM9Q/FUbMdJ93CgdtP26g==
 
+"@react-types/shared@^3.13.1":
+  version "3.13.1"
+  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.13.1.tgz#eda5e3744971606f753baf7879136bf8e3f707ab"
+  integrity sha512-EHQqILDJeDvnloy5VV9lnnEjpCMwH1ghptCfa/lz9Ht9nwco3qGCvUABkWyND7yU1Adt3A/1oJxhpRUu3eTlyg==
+
 "@react-types/switch@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@react-types/switch/-/switch-3.2.0.tgz#5ecce3b97632db742c2aee554fd4184ec580bdcf"

From 1d93a1daf3428d67ef0465489b6586809c79ac69 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 10 Jul 2022 23:18:38 -0300
Subject: [PATCH 034/106] feat(react-navbar): navbar link added

---
 packages/react/src/navbar/index.ts           |  2 ++
 packages/react/src/navbar/navbar-brand.tsx   | 20 ++++++-----
 packages/react/src/navbar/navbar-link.tsx    | 35 ++++++++++++++++++++
 packages/react/src/navbar/navbar.stories.tsx | 28 ++++++++--------
 packages/react/src/navbar/navbar.styles.ts   |  3 ++
 packages/react/src/navbar/navbar.tsx         |  2 ++
 6 files changed, 67 insertions(+), 23 deletions(-)
 create mode 100644 packages/react/src/navbar/navbar-link.tsx

diff --git a/packages/react/src/navbar/index.ts b/packages/react/src/navbar/index.ts
index b8dcd1ce0e..4b480c289f 100644
--- a/packages/react/src/navbar/index.ts
+++ b/packages/react/src/navbar/index.ts
@@ -1,10 +1,12 @@
 import NavbarBrand from "./navbar-brand";
 import NavbarContent from "./navbar-content";
 import NavbarItem from "./navbar-item";
+import NavbarLink from "./navbar-link";
 import Navbar from "./navbar";
 
 Navbar.Brand = NavbarBrand;
 Navbar.Content = NavbarContent;
 Navbar.Item = NavbarItem;
+Navbar.Link = NavbarLink;
 
 export default Navbar;
diff --git a/packages/react/src/navbar/navbar-brand.tsx b/packages/react/src/navbar/navbar-brand.tsx
index a55c7fbd21..eda43e2d6d 100644
--- a/packages/react/src/navbar/navbar-brand.tsx
+++ b/packages/react/src/navbar/navbar-brand.tsx
@@ -5,25 +5,29 @@ import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
 import {__DEV__} from "../utils/assertion";
 
+import NavbarItem, {NavbarItemProps} from "./navbar-item";
 import {StyledNavbarBrand} from "./navbar.styles";
 
 export interface NavbarBrandProps extends HTMLNextUIProps<"span"> {
   children?: React.ReactNode | React.ReactNode[];
+  itemProps?: NavbarItemProps;
 }
 
 const NavbarBrand = forwardRef<NavbarBrandProps, "span">((props, ref) => {
   const domRef = useDOMRef(ref);
 
-  const {children, className, ...otherProps} = props;
+  const {children, className, itemProps, ...otherProps} = props;
 
   return (
-    <StyledNavbarBrand
-      ref={domRef}
-      className={clsx("nextui-navbar-brand", className)}
-      {...otherProps}
-    >
-      {children}
-    </StyledNavbarBrand>
+    <NavbarItem {...itemProps}>
+      <StyledNavbarBrand
+        ref={domRef}
+        className={clsx("nextui-navbar-brand", className)}
+        {...otherProps}
+      >
+        {children}
+      </StyledNavbarBrand>
+    </NavbarItem>
   );
 });
 
diff --git a/packages/react/src/navbar/navbar-link.tsx b/packages/react/src/navbar/navbar-link.tsx
new file mode 100644
index 0000000000..e01ac19ebf
--- /dev/null
+++ b/packages/react/src/navbar/navbar-link.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+import {forwardRef} from "../utils/system";
+import {useDOMRef} from "../utils/dom";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+import {Link, LinkProps} from "../index";
+
+import NavbarItem, {NavbarItemProps} from "./navbar-item";
+
+export interface NavbarLinkProps extends LinkProps {
+  itemProps?: NavbarItemProps;
+}
+
+const NavbarLink = forwardRef<NavbarLinkProps, "a">((props, ref) => {
+  const domRef = useDOMRef(ref);
+
+  const {children, className, itemProps, ...otherProps} = props;
+
+  return (
+    <NavbarItem {...itemProps}>
+      <Link ref={domRef} className={clsx("nextui-navbar-link", className)} {...otherProps}>
+        {children}
+      </Link>
+    </NavbarItem>
+  );
+});
+
+if (__DEV__) {
+  NavbarLink.displayName = "NextUI.NavbarLink";
+}
+
+NavbarLink.toString = () => ".nextui-navbar-link";
+
+export default NavbarLink;
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 3edf34dd0a..7d5a48f318 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -31,7 +31,7 @@ const AcmeLogo = () => (
 
 const DefaultContent = () => (
   <>
-    <Navbar.Content placement="start">
+    <Navbar.Content css={{"@smMax": {d: "none"}}} placement="start">
       <Navbar.Brand as={Link} color="text">
         <AcmeLogo />
         <Text b css={{"@xsMax": {d: "none"}}}>
@@ -39,27 +39,25 @@ const DefaultContent = () => (
         </Text>
       </Navbar.Brand>
     </Navbar.Content>
-    <Navbar.Content css={{"@smMax": {d: "none"}}}>
-      <Navbar.Item as={Link} color="text" href="#">
+    <Navbar.Content css={{"@smMax": {d: "none"}}} placement="center">
+      <Navbar.Link color="text" href="#">
         Features
-      </Navbar.Item>
-      <Navbar.Item as={Link} color="text" href="#">
+      </Navbar.Link>
+      <Navbar.Link color="text" href="#">
         Customers
-      </Navbar.Item>
-      <Navbar.Item as={Link} color="text" href="#">
+      </Navbar.Link>
+      <Navbar.Link color="text" href="#">
         Integrations
-      </Navbar.Item>
-      <Navbar.Item as={Link} color="text" href="#">
+      </Navbar.Link>
+      <Navbar.Link color="text" href="#">
         Pricing
-      </Navbar.Item>
-      <Navbar.Item as={Link} color="text" href="#">
+      </Navbar.Link>
+      <Navbar.Link color="text" href="#">
         Company
-      </Navbar.Item>
+      </Navbar.Link>
     </Navbar.Content>
     <Navbar.Content placement="end">
-      <Navbar.Item as={Link} href="#">
-        Login
-      </Navbar.Item>
+      <Navbar.Link href="#">Login</Navbar.Link>
       <Navbar.Item>
         <Button auto flat as={Link} href="#">
           Sign Up
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index 027c49b4b4..994cd94db8 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -42,6 +42,9 @@ export const StyledNavbarContent = styled(StyledBaseNavbarList, {
     placement: {
       start: {
         justifyContent: "flex-start",
+        [`& ${StyledNavbarItem}`]: {
+          mr: "$$navbarContentItemSpace",
+        },
       },
       center: {
         justifyContent: "center",
diff --git a/packages/react/src/navbar/navbar.tsx b/packages/react/src/navbar/navbar.tsx
index 0739d3ae94..b3ed9eaa51 100644
--- a/packages/react/src/navbar/navbar.tsx
+++ b/packages/react/src/navbar/navbar.tsx
@@ -10,6 +10,7 @@ import {StyledNavbar, StyledNavbarContainer, NavbarVariantsProps} from "./navbar
 import NavbarBrand from "./navbar-brand";
 import NavbarContent from "./navbar-content";
 import NavbarItem from "./navbar-item";
+import NavbarLink from "./navbar-link";
 
 interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps> {
   children?: React.ReactNode | React.ReactNode[];
@@ -49,6 +50,7 @@ type NavbarComponent<P = {}> = React.FC<P> & {
   Brand: typeof NavbarBrand;
   Content: typeof NavbarContent;
   Item: typeof NavbarItem;
+  Link: typeof NavbarLink;
 };
 
 export default Navbar as NavbarComponent<NavbarProps>;

From 7e3d1076827138bd522d0b8bd647ea86208de122 Mon Sep 17 00:00:00 2001
From: Chris <ysm0622@gmail.com>
Date: Mon, 11 Jul 2022 16:08:24 +0900
Subject: [PATCH 035/106] chore(docs): seperate installation shell script code
 block for better copy

---
 apps/docs/content/docs/guide/getting-started.mdx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/docs/content/docs/guide/getting-started.mdx b/apps/docs/content/docs/guide/getting-started.mdx
index cdf7c6033b..c8eb6e688a 100644
--- a/apps/docs/content/docs/guide/getting-started.mdx
+++ b/apps/docs/content/docs/guide/getting-started.mdx
@@ -22,7 +22,11 @@ Inside your React project directory, install NextUI by running either of the fol
 
 ```bash
 yarn add @nextui-org/react
-# or
+```
+
+or
+
+```bash
 npm i @nextui-org/react
 ```
 

From a17cd64fe9dac4142f03c289e5e97388592c2cba Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Mon, 11 Jul 2022 22:36:37 -0300
Subject: [PATCH 036/106] feat(react-navbar): better flex implementation

---
 packages/react/src/link/link.styles.ts       |   2 +-
 packages/react/src/navbar/navbar-brand.tsx   |  20 +--
 packages/react/src/navbar/navbar-content.tsx |  15 +-
 packages/react/src/navbar/navbar-link.tsx    |  25 ++-
 packages/react/src/navbar/navbar.stories.tsx | 166 +++++++++++++++----
 packages/react/src/navbar/navbar.styles.ts   |  95 ++++++-----
 packages/react/src/theme/dark-theme.ts       |   1 +
 packages/react/src/theme/light-theme.ts      |   1 +
 8 files changed, 226 insertions(+), 99 deletions(-)

diff --git a/packages/react/src/link/link.styles.ts b/packages/react/src/link/link.styles.ts
index 5bd4bb0790..19c36f4273 100644
--- a/packages/react/src/link/link.styles.ts
+++ b/packages/react/src/link/link.styles.ts
@@ -17,8 +17,8 @@ export const StyledLink = styled(
     lineHeight: "inherit",
     textDecoration: "none",
     width: "fitContent",
+    backgroundColor: "transparent",
     backgroundImage: "inherit",
-    backgroundColor: "inherit",
     backgroundClip: "inherit",
     WebkitTextFillColor: "inherit",
     outline: "none",
diff --git a/packages/react/src/navbar/navbar-brand.tsx b/packages/react/src/navbar/navbar-brand.tsx
index eda43e2d6d..a55c7fbd21 100644
--- a/packages/react/src/navbar/navbar-brand.tsx
+++ b/packages/react/src/navbar/navbar-brand.tsx
@@ -5,29 +5,25 @@ import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
 import {__DEV__} from "../utils/assertion";
 
-import NavbarItem, {NavbarItemProps} from "./navbar-item";
 import {StyledNavbarBrand} from "./navbar.styles";
 
 export interface NavbarBrandProps extends HTMLNextUIProps<"span"> {
   children?: React.ReactNode | React.ReactNode[];
-  itemProps?: NavbarItemProps;
 }
 
 const NavbarBrand = forwardRef<NavbarBrandProps, "span">((props, ref) => {
   const domRef = useDOMRef(ref);
 
-  const {children, className, itemProps, ...otherProps} = props;
+  const {children, className, ...otherProps} = props;
 
   return (
-    <NavbarItem {...itemProps}>
-      <StyledNavbarBrand
-        ref={domRef}
-        className={clsx("nextui-navbar-brand", className)}
-        {...otherProps}
-      >
-        {children}
-      </StyledNavbarBrand>
-    </NavbarItem>
+    <StyledNavbarBrand
+      ref={domRef}
+      className={clsx("nextui-navbar-brand", className)}
+      {...otherProps}
+    >
+      {children}
+    </StyledNavbarBrand>
   );
 });
 
diff --git a/packages/react/src/navbar/navbar-content.tsx b/packages/react/src/navbar/navbar-content.tsx
index 5816b3e976..63ae8c759c 100644
--- a/packages/react/src/navbar/navbar-content.tsx
+++ b/packages/react/src/navbar/navbar-content.tsx
@@ -3,12 +3,19 @@ import React from "react";
 import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
+import {CSS} from "../theme/stitches.config";
 import {__DEV__} from "../utils/assertion";
 
 import {StyledNavbarContent, NavbarContentVariantsProps} from "./navbar.styles";
 
-export interface Props extends Omit<HTMLNextUIProps<"ul">, keyof NavbarContentVariantsProps> {
+type GapUnit = CSS["gap"];
+
+interface Props extends Omit<HTMLNextUIProps<"ul">, keyof NavbarContentVariantsProps> {
   children?: React.ReactNode | React.ReactNode[];
+  /**
+   * The gap between each item. Defaults to `$space$8 = 1rem`.
+   */
+  gap?: GapUnit;
 }
 
 export type NavbarContentProps = Props & NavbarContentVariantsProps;
@@ -16,12 +23,16 @@ export type NavbarContentProps = Props & NavbarContentVariantsProps;
 const NavbarContent = forwardRef<NavbarContentProps, "ul">((props, ref) => {
   const domRef = useDOMRef(ref);
 
-  const {children, className, ...otherProps} = props;
+  const {children, gap = "$8", css, className, ...otherProps} = props;
 
   return (
     <StyledNavbarContent
       ref={domRef}
       className={clsx("nextui-navbar-content", className)}
+      css={{
+        gap,
+        ...css,
+      }}
       {...otherProps}
     >
       {children}
diff --git a/packages/react/src/navbar/navbar-link.tsx b/packages/react/src/navbar/navbar-link.tsx
index e01ac19ebf..b410a2fa14 100644
--- a/packages/react/src/navbar/navbar-link.tsx
+++ b/packages/react/src/navbar/navbar-link.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useMemo} from "react";
 
 import {forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
@@ -15,11 +15,30 @@ export interface NavbarLinkProps extends LinkProps {
 const NavbarLink = forwardRef<NavbarLinkProps, "a">((props, ref) => {
   const domRef = useDOMRef(ref);
 
-  const {children, className, itemProps, ...otherProps} = props;
+  const {children, className, color, css, itemProps, ...otherProps} = props;
+
+  const linkCss = useMemo(() => {
+    if (color) {
+      return {
+        ...css,
+      };
+    }
+
+    return {
+      color: "inherit",
+      ...css,
+    };
+  }, [color, css]);
 
   return (
     <NavbarItem {...itemProps}>
-      <Link ref={domRef} className={clsx("nextui-navbar-link", className)} {...otherProps}>
+      <Link
+        ref={domRef}
+        className={clsx("nextui-navbar-link", className)}
+        color={color}
+        css={linkCss}
+        {...otherProps}
+      >
         {children}
       </Link>
     </NavbarItem>
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 7d5a48f318..819e028770 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import {Meta} from "@storybook/react";
 
-import {Link, Text, Button} from "../index";
+import {Link, Text, Button, Spacer} from "../index";
+import {styled} from "../theme/stitches.config";
 
 import Navbar from "./index";
 
@@ -29,35 +30,106 @@ const AcmeLogo = () => (
   </svg>
 );
 
-const DefaultContent = () => (
+const Box = styled("div", {
+  // Reset
+  boxSizing: "border-box",
+});
+
+const DefaultPageContent = () => (
+  <Box css={{px: "$12", mt: "$8", "@xsMax": {px: "$10"}}}>
+    <Text h2>Lorem ipsum dolor sit amet</Text>
+    <Text size="$xl">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Purus gravida quis blandit turpis. Augue neque gravida in
+      fermentum et sollicitudin ac orci. Et sollicitudin ac orci phasellus egestas. Elementum tempus
+      egestas sed sed risus pretium quam vulputate. Interdum velit euismod in pellentesque massa
+      placerat duis ultricies.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$xl">
+      Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent semper feugiat nibh
+      sed pulvinar. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Malesuada
+      proin libero nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. Sed viverra
+      tellus in hac habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue neque
+      gravida in.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$xl">
+      Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum fusce ut placerat.
+      Erat velit scelerisque in dictum non. Tempus quam pellentesque nec nam aliquam sem et tortor
+      consequat. Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel
+      pharetra vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu nisl nunc mi
+      ipsum faucibus. Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi etiam
+      dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit gravida rutrum quisque non
+      tellus orci ac.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$xl">
+      Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. In pellentesque massa placerat
+      duis ultricies. Sit amet massa vitae tortor condimentum. Morbi tincidunt augue interdum velit
+      euismod. Aliquet enim tortor at auctor urna nunc id. A scelerisque purus semper eget. Vitae
+      justo eget magna fermentum iaculis. Arcu non odio euismod lacinia at quis. Et leo duis ut diam
+      quam nulla porttitor massa. Eget nunc scelerisque viverra mauris. Suscipit tellus mauris a
+      diam maecenas sed enim. Cras sed felis eget velit aliquet. Est placerat in egestas erat
+      imperdiet sed euismod nisi porta. In ante metus dictum at tempor commodo. In cursus turpis
+      massa tincidunt dui ut ornare lectus. Tempus iaculis urna id volutpat. Iaculis eu non diam
+      phasellus vestibulum lorem sed risus.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$xl">
+      Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel. Imperdiet massa tincidunt
+      nunc pulvinar sapien et ligula ullamcorper malesuada. Faucibus pulvinar elementum integer enim
+      neque volutpat. Gravida arcu ac tortor dignissim convallis aenean. Lectus quam id leo in
+      vitae. Ultricies tristique nulla aliquet enim tortor. Nec tincidunt praesent semper feugiat
+      nibh sed. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Praesent semper
+      feugiat nibh sed pulvinar proin gravida. Dis parturient montes nascetur ridiculus mus mauris.
+      Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Ut lectus arcu bibendum at.
+      Integer enim neque volutpat ac. Diam sit amet nisl suscipit. Eros donec ac odio tempor orci
+      dapibus ultrices in iaculis. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Quis
+      lectus nulla at volutpat diam ut. Turpis egestas integer eget aliquet. Adipiscing tristique
+      risus nec feugiat in fermentum posuere. Morbi tempus iaculis urna id. Amet commodo nulla
+      facilisi nullam vehicula ipsum a arcu.
+    </Text>
+    <Text size="$xl">
+      Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent semper feugiat nibh
+      sed pulvinar. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Malesuada
+      proin libero nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. Sed viverra
+      tellus in hac habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue neque
+      gravida in.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$xl">
+      Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum fusce ut placerat.
+      Erat velit scelerisque in dictum non. Tempus quam pellentesque nec nam aliquam sem et tortor
+      consequat. Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel
+      pharetra vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu nisl nunc mi
+      ipsum faucibus. Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi etiam
+      dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit gravida rutrum quisque non
+      tellus orci ac.
+    </Text>
+    <Spacer y={1} />
+  </Box>
+);
+
+const DefaultNavbarContent = () => (
   <>
-    <Navbar.Content css={{"@smMax": {d: "none"}}} placement="start">
-      <Navbar.Brand as={Link} color="text">
-        <AcmeLogo />
-        <Text b css={{"@xsMax": {d: "none"}}}>
-          ACME
-        </Text>
-      </Navbar.Brand>
+    <Navbar.Brand as={Link} color="text" href="#">
+      <AcmeLogo />
+      <Text b css={{"@xsMax": {d: "none"}}}>
+        ACME
+      </Text>
+    </Navbar.Brand>
+    <Navbar.Content css={{"@smMax": {d: "none"}}}>
+      <Navbar.Link href="#">Features</Navbar.Link>
+      <Navbar.Link href="#">Customers</Navbar.Link>
+      <Navbar.Link href="#">Integrations</Navbar.Link>
+      <Navbar.Link href="#">Pricing</Navbar.Link>
+      <Navbar.Link href="#">Company</Navbar.Link>
     </Navbar.Content>
-    <Navbar.Content css={{"@smMax": {d: "none"}}} placement="center">
-      <Navbar.Link color="text" href="#">
-        Features
-      </Navbar.Link>
-      <Navbar.Link color="text" href="#">
-        Customers
-      </Navbar.Link>
-      <Navbar.Link color="text" href="#">
-        Integrations
-      </Navbar.Link>
-      <Navbar.Link color="text" href="#">
-        Pricing
-      </Navbar.Link>
-      <Navbar.Link color="text" href="#">
-        Company
+    <Navbar.Content>
+      <Navbar.Link color="default" href="#">
+        Login
       </Navbar.Link>
-    </Navbar.Content>
-    <Navbar.Content placement="end">
-      <Navbar.Link href="#">Login</Navbar.Link>
       <Navbar.Item>
         <Button auto flat as={Link} href="#">
           Sign Up
@@ -67,14 +139,42 @@ const DefaultContent = () => (
   </>
 );
 
+const App = ({children}: any) => (
+  <Box
+    css={{
+      maxW: "920px",
+      maxHeight: "600px",
+      overflow: "visible scroll",
+      boxShadow: "$md",
+      position: "relative",
+      border: "1px solid $colors$border",
+    }}
+  >
+    {children}
+    <DefaultPageContent />
+  </Box>
+);
+
 export const Default = () => (
-  <Navbar>
-    <DefaultContent />
-  </Navbar>
+  <App>
+    <Navbar>
+      <DefaultNavbarContent />
+    </Navbar>
+  </App>
+);
+
+export const Sticky = () => (
+  <App>
+    <Navbar variant="sticky">
+      <DefaultNavbarContent />
+    </Navbar>
+  </App>
 );
 
 export const Floating = () => (
-  <Navbar variant="floating">
-    <DefaultContent />
-  </Navbar>
+  <App>
+    <Navbar variant="floating">
+      <DefaultNavbarContent />
+    </Navbar>
+  </App>
 );
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index 994cd94db8..8ef63b557b 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -18,14 +18,16 @@ export const StyledBaseNavbarList = styled("ul", {
 });
 
 export const StyledNavbarBrand = styled("span", {
-  d: "flex",
-  bg: "transparent",
+  display: "flex",
+  flexWrap: "nowrap",
+  flexDirection: "row",
   justifyContent: "flex-start",
+  bg: "transparent",
   alignItems: "center",
   textDecoration: "none",
   fontSize: "$base",
   whiteSpace: "nowrap",
-  marginRight: "$$navbarContentItemSpace",
+  boxSizing: "border-box",
 });
 
 export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
@@ -33,47 +35,21 @@ export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
 });
 
 export const StyledNavbarContent = styled(StyledBaseNavbarList, {
-  $$navbarContentItemSpace: "$space$8",
+  $$navbarContentItemGap: "$space$8",
   d: "flex",
-  size: "100%",
+  height: "100%",
   flexWrap: "nowrap",
   alignItems: "center",
-  variants: {
-    placement: {
-      start: {
-        justifyContent: "flex-start",
-        [`& ${StyledNavbarItem}`]: {
-          mr: "$$navbarContentItemSpace",
-        },
-      },
-      center: {
-        justifyContent: "center",
-        [`& ${StyledNavbarItem}`]: {
-          mx: "$$navbarContentItemSpace",
-        },
-      },
-      around: {
-        justifyContent: "space-around",
-      },
-      between: {
-        justifyContent: "space-between",
-      },
-      end: {
-        justifyContent: "flex-end",
-        [`& ${StyledNavbarItem}`]: {
-          ml: "$$navbarContentItemSpace",
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    placement: "center",
-  },
+  gap: "$$navbarContentItemGap",
 });
 
 export const StyledNavbarContainer = styled("div", {
-  size: "100%",
+  width: "100%",
+  height: "$$navbarHeight",
+  minHeight: "$$navbarHeight",
   display: "flex",
+  flexWrap: "nowrap",
+  justifyContent: "space-between",
   alignItems: "center",
   position: "relative",
   boxSizing: "border-box",
@@ -102,15 +78,30 @@ export const StyledNavbar = styled("nav", {
   width: "100%",
   dflex: "center",
   position: "relative",
-  height: "$$navbarHeight",
-  minHeight: "$$navbarHeight",
+  height: "auto",
   variants: {
     variant: {
-      static: {},
-      fixed: {},
-      sticky: {},
+      static: {
+        position: "static",
+      },
+      sticky: {
+        top: 0,
+        right: 0,
+        left: 0,
+        position: "sticky",
+        zIndex: "$2",
+      },
       floating: {
+        top: 0,
+        right: 0,
+        left: 0,
+        position: "sticky",
+        zIndex: "$2",
+        bg: "linear-gradient(180deg, rgba(248, 248, 248, 0.95) 44%, rgba(248, 248, 248, 0.46) 73%, rgba(255, 255, 255,0))",
+        // @dark
+        // bg: "linear-gradient(180deg,rgba(22,29,49,.9) 44%,rgba(22,29,49,.43) 73%,rgba(22,29,49,0))",
         [`& ${StyledNavbarContainer}`]: {
+          mt: "calc($$navbarFloatingMargin * 0.5)",
           mx: "$$navbarFloatingMargin",
           borderRadius: "$$navbarBorderRadius",
         },
@@ -154,16 +145,24 @@ export const StyledNavbar = styled("nav", {
     isCompact: {
       true: {
         $$navbarHeight: "54px",
+        $$navbarBorderRadius: "$radii$md",
       },
     },
-    enableShadow: {
-      true: {
+    disableShadow: {
+      false: {
         boxShadow: "$$navbarShadow",
         clipPath: "inset(0px 0px calc($$navbarHeight*-1) 0px)",
       },
     },
     disableBlur: {
-      true: {},
+      false: {
+        "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
+          $$navbarBackgroundColor: "$colors$backgroundAlpha",
+          [`& ${StyledNavbarContainer}`]: {
+            backdropFilter: "saturate(180%) blur(10px)",
+          },
+        },
+      },
     },
     borderWeight: {
       light: {
@@ -199,11 +198,11 @@ export const StyledNavbar = styled("nav", {
     },
     /**
      * @variant floating
-     * @enableShadow true
+     * @disableShadow true
      */
     {
       variant: "floating",
-      enableShadow: true,
+      disableShadow: false,
       css: {
         boxShadow: "none",
         clipPath: "none",
@@ -219,7 +218,7 @@ export const StyledNavbar = styled("nav", {
     maxWidth: "lg",
     isBordered: false,
     isInverted: false,
-    enableShadow: true,
+    disableShadow: false,
     disableBlur: false,
   },
 });
diff --git a/packages/react/src/theme/dark-theme.ts b/packages/react/src/theme/dark-theme.ts
index be1e626712..9a2e8ba3f8 100644
--- a/packages/react/src/theme/dark-theme.ts
+++ b/packages/react/src/theme/dark-theme.ts
@@ -15,6 +15,7 @@ export default {
     background: "$black",
     foreground: "$white",
     backgroundContrast: "$accents0",
+    backgroundAlpha: "rgba(0, 0, 0, 0.5)",
 
     //semantic colors
     ...blueDark,
diff --git a/packages/react/src/theme/light-theme.ts b/packages/react/src/theme/light-theme.ts
index f654055a25..b16934809c 100644
--- a/packages/react/src/theme/light-theme.ts
+++ b/packages/react/src/theme/light-theme.ts
@@ -6,6 +6,7 @@ export default {
     background: "$white",
     foreground: "$black",
     backgroundContrast: "$white",
+    backgroundAlpha: "rgba(255, 255, 255, 0.8)",
 
     //semantic colors
     ...blue,

From 7064cc4cdc482f4b4e15003d6516c887dbedd908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= <tjy970721@gmail.com>
Date: Tue, 12 Jul 2022 23:27:47 +0900
Subject: [PATCH 037/106] fix: lint

---
 packages/react/src/switch/switch.styles.ts | 31 ++++++++++------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/switch/switch.styles.ts b/packages/react/src/switch/switch.styles.ts
index 0dce680292..ec2641eb77 100644
--- a/packages/react/src/switch/switch.styles.ts
+++ b/packages/react/src/switch/switch.styles.ts
@@ -255,46 +255,43 @@ export const StyledSwitch = styled(
 );
 
 export const StyledSwitchInput = styled(
-  'input',
+  "input",
   {
     [`& + ${StyledSwitch} > ${StyledSwitchCircle}`]: {
-      transform: 'translateX(calc($$switchWidth / 15))'
+      transform: "translateX(calc($$switchWidth / 15))",
     },
     [`&:checked + ${StyledSwitch} > ${StyledSwitchCircle}`]: {
-      transform:
-        'translateX(calc($$switchWidth - $$switchWidth / 15 - $$switchHeight * 0.7))'
+      transform: "translateX(calc($$switchWidth - $$switchWidth / 15 - $$switchHeight * 0.7))",
     },
     [`& + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
-      transform: 'translateX(calc($$switchWidth / 7.5))'
+      transform: "translateX(calc($$switchWidth / 7.5))",
     },
     [`&:checked + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
       transform:
-        'translateX(calc($$switchWidth - $$switchWidth / 7.5 - $$switchWidth / 10 - $$switchHeight * 0.7))'
+        "translateX(calc($$switchWidth - $$switchWidth / 7.5 - $$switchWidth / 10 - $$switchHeight * 0.7))",
     },
     variants: {
       bordered: {
         true: {
           [`& + ${StyledSwitch} > ${StyledSwitchCircle}`]: {
-            transform:
-              'translateX(calc($$switchWidth / 15 - $$switchBorderW / 2))'
+            transform: "translateX(calc($$switchWidth / 15 - $$switchBorderW / 2))",
           },
           [`&:checked + ${StyledSwitch} > ${StyledSwitchCircle}`]: {
             transform:
-              'translateX(calc($$switchWidth - $$switchWidth / 15 - $$switchBorderW * 1.5 - $$switchHeight * 0.7))'
+              "translateX(calc($$switchWidth - $$switchWidth / 15 - $$switchBorderW * 1.5 - $$switchHeight * 0.7))",
           },
           [`& + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
-            transform:
-              'translateX(calc($$switchWidth / 7.5 - $$switchBorderW / 2))'
+            transform: "translateX(calc($$switchWidth / 7.5 - $$switchBorderW / 2))",
           },
           [`&:checked + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
             transform:
-              'translateX(calc($$switchWidth - $$switchWidth / 7.5 - $$switchWidth / 10 - $$switchBorderW * 1.5 - $$switchHeight * 0.7))'
-          }
-        }
-      }
-    }
+              "translateX(calc($$switchWidth - $$switchWidth / 7.5 - $$switchWidth / 10 - $$switchBorderW * 1.5 - $$switchHeight * 0.7))",
+          },
+        },
+      },
+    },
   },
-  sharedVisuallyHidden
+  sharedVisuallyHidden,
 );
 
 // types

From 6926a298465031341341ce367ef01dc90f4502ff Mon Sep 17 00:00:00 2001
From: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
Date: Thu, 14 Jul 2022 03:34:44 +0800
Subject: [PATCH 038/106] fix(react-dropdown): add collections and menu deps of
 react-stately

---
 packages/react/package.json | 2 ++
 yarn.lock                   | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 331f649103..bda9ef9a85 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -70,7 +70,9 @@
     "@react-aria/utils": "3.13.0",
     "@react-aria/visually-hidden": "3.3.0",
     "@react-stately/checkbox": "3.1.0",
+    "@react-stately/collections": "3.4.0",
     "@react-stately/data": "3.5.0",
+    "@react-stately/menu": "3.3.0",
     "@react-stately/overlays": "3.3.0",
     "@react-stately/radio": "3.4.0",
     "@react-stately/table": "3.2.0",
diff --git a/yarn.lock b/yarn.lock
index d79fc46f5f..9fb5825ba8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3917,7 +3917,7 @@
     "@react-stately/utils" "^3.5.0"
     "@react-types/checkbox" "^3.3.0"
 
-"@react-stately/collections@^3.4.0":
+"@react-stately/collections@3.4.0", "@react-stately/collections@^3.4.0":
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/@react-stately/collections/-/collections-3.4.0.tgz#0622b6033e033c9b8c2dd33c173293916f8e7b6b"
   integrity sha512-ODS/Nm5OH4XqLugKII7jGc698XnaQEJo423jKa0jhyIpSnviqFRpXRbrPiFPAcaE3S4d/pp20HdDotWZAbM8Ww==
@@ -3943,7 +3943,7 @@
     "@react-types/grid" "^3.1.0"
     "@react-types/shared" "^3.13.0"
 
-"@react-stately/menu@^3.3.0":
+"@react-stately/menu@3.3.0", "@react-stately/menu@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@react-stately/menu/-/menu-3.3.0.tgz#646e0468c5747a768643279fb0ed239e01778012"
   integrity sha512-kdw8YoynxVha6YNTZvHwrA9b5mxC+v5F4hq/fB6I6tqsyW3ntM/8wIvjpdCS01Nygn03Nnuy2t8atycvEeYH0g==

From db84db61fbab4b0b451aeab0f0ce1b1defc23538 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Thu, 14 Jul 2022 23:20:04 -0300
Subject: [PATCH 039/106] feat(navbar): better background blur implementation

---
 apps/docs/content/components/index.ts         |   2 +
 apps/docs/content/components/navbar/common.ts | 129 ++++++++++++++
 .../content/components/navbar/floating.ts     |  51 ++++++
 apps/docs/content/components/navbar/index.ts  |   9 +
 apps/docs/content/components/navbar/static.ts |  49 ++++++
 apps/docs/content/components/navbar/sticky.ts |  49 ++++++
 apps/docs/content/docs/components/navbar.mdx  |  36 ++++
 apps/docs/content/docs/manifest.json          |   4 +-
 .../docs/content/docs/theme/default-theme.mdx |   9 +
 .../components/carbon-ad/carbon-optimize.js   | 123 +++++++------
 apps/docs/src/layouts/navbar.tsx              |   3 +-
 apps/docs/src/pages/test.tsx                  | 162 ++++++++++++++++++
 packages/react/src/index.ts                   |   2 +
 packages/react/src/link/link.stories.tsx      |   2 +-
 packages/react/src/link/link.styles.ts        |  14 +-
 packages/react/src/link/link.tsx              |  63 ++++++-
 packages/react/src/navbar/navbar-content.tsx  |  15 +-
 packages/react/src/navbar/navbar.stories.tsx  |  14 +-
 packages/react/src/navbar/navbar.styles.ts    |  21 +--
 packages/react/src/navbar/navbar.tsx          |  37 +++-
 packages/react/src/text/child.tsx             |   4 +-
 packages/react/src/theme/common.ts            |   3 -
 packages/react/src/theme/dark-theme.ts        |   3 +-
 packages/react/src/theme/light-theme.ts       |   3 +-
 packages/react/src/theme/types.ts             |  12 +-
 packages/react/src/theme/utils.ts             |  14 +-
 packages/react/src/utils/color.ts             |  13 +-
 packages/react/src/utils/object.ts            |  23 +++
 tsconfig.base.json                            |   1 +
 29 files changed, 749 insertions(+), 121 deletions(-)
 create mode 100644 apps/docs/content/components/navbar/common.ts
 create mode 100644 apps/docs/content/components/navbar/floating.ts
 create mode 100644 apps/docs/content/components/navbar/index.ts
 create mode 100644 apps/docs/content/components/navbar/static.ts
 create mode 100644 apps/docs/content/components/navbar/sticky.ts
 create mode 100644 apps/docs/content/docs/components/navbar.mdx
 create mode 100644 apps/docs/src/pages/test.tsx

diff --git a/apps/docs/content/components/index.ts b/apps/docs/content/components/index.ts
index 6ec5d281a5..73ad058d80 100644
--- a/apps/docs/content/components/index.ts
+++ b/apps/docs/content/components/index.ts
@@ -25,6 +25,7 @@ import spacerContent from "./spacer";
 import popoverContent from "./popover";
 import dropdownContent from "./dropdown";
 import badgeContent from "./badge";
+import navbarContent from "./navbar";
 
 export default {
   tableContent,
@@ -54,4 +55,5 @@ export default {
   popoverContent,
   dropdownContent,
   badgeContent,
+  navbarContent,
 };
diff --git a/apps/docs/content/components/navbar/common.ts b/apps/docs/content/components/navbar/common.ts
new file mode 100644
index 0000000000..76aa9b9e7a
--- /dev/null
+++ b/apps/docs/content/components/navbar/common.ts
@@ -0,0 +1,129 @@
+export const AcmeLogo = `export const AcmeLogo = () => (
+  <svg
+    className=""
+    fill="none"
+    height="36"
+    viewBox="0 0 32 32"
+    width="36"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect fill="var(--secondary)" height="100%" rx="16" width="100%" />
+    <path
+      clipRule="evenodd"
+      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);`;
+
+export const Box = `import { styled } from "@nextui-org/react"
+
+export const Box = styled("div", {
+  boxSizing: "border-box",
+});
+`;
+
+export const Content = `import { Text, Spacer } from "@nextui-org/react"
+import { Box } from "./Box.js"
+
+const Content = () => (
+  <Box css={{px: "$12", mt: "$8", "@xsMax": {px: "$10"}}}>
+    <Text h2>Lorem ipsum dolor sit amet</Text>
+    <Text size="$lg">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Purus gravida quis blandit turpis. Augue neque gravida in
+      fermentum et sollicitudin ac orci. Et sollicitudin ac orci phasellus egestas. Elementum tempus
+      egestas sed sed risus pretium quam vulputate. Interdum velit euismod in pellentesque massa
+      placerat duis ultricies.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$lg">
+      Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent semper feugiat nibh
+      sed pulvinar. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Malesuada
+      proin libero nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. Sed viverra
+      tellus in hac habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue neque
+      gravida in.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$lg">
+      Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum fusce ut placerat.
+      Erat velit scelerisque in dictum non. Tempus quam pellentesque nec nam aliquam sem et tortor
+      consequat. Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel
+      pharetra vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu nisl nunc mi
+      ipsum faucibus. Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi etiam
+      dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit gravida rutrum quisque non
+      tellus orci ac.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$lg">
+      Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. In pellentesque massa placerat
+      duis ultricies. Sit amet massa vitae tortor condimentum. Morbi tincidunt augue interdum velit
+      euismod. Aliquet enim tortor at auctor urna nunc id. A scelerisque purus semper eget. Vitae
+      justo eget magna fermentum iaculis. Arcu non odio euismod lacinia at quis. Et leo duis ut diam
+      quam nulla porttitor massa. Eget nunc scelerisque viverra mauris. Suscipit tellus mauris a
+      diam maecenas sed enim. Cras sed felis eget velit aliquet. Est placerat in egestas erat
+      imperdiet sed euismod nisi porta. In ante metus dictum at tempor commodo. In cursus turpis
+      massa tincidunt dui ut ornare lectus. Tempus iaculis urna id volutpat. Iaculis eu non diam
+      phasellus vestibulum lorem sed risus.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$lg">
+      Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel. Imperdiet massa tincidunt
+      nunc pulvinar sapien et ligula ullamcorper malesuada. Faucibus pulvinar elementum integer enim
+      neque volutpat. Gravida arcu ac tortor dignissim convallis aenean. Lectus quam id leo in
+      vitae. Ultricies tristique nulla aliquet enim tortor. Nec tincidunt praesent semper feugiat
+      nibh sed. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Praesent semper
+      feugiat nibh sed pulvinar proin gravida. Dis parturient montes nascetur ridiculus mus mauris.
+      Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Ut lectus arcu bibendum at.
+      Integer enim neque volutpat ac. Diam sit amet nisl suscipit. Eros donec ac odio tempor orci
+      dapibus ultrices in iaculis. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Quis
+      lectus nulla at volutpat diam ut. Turpis egestas integer eget aliquet. Adipiscing tristique
+      risus nec feugiat in fermentum posuere. Morbi tempus iaculis urna id. Amet commodo nulla
+      facilisi nullam vehicula ipsum a arcu.
+    </Text>
+    <Text size="$lg">
+      Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent semper feugiat nibh
+      sed pulvinar. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Malesuada
+      proin libero nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. Sed viverra
+      tellus in hac habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue neque
+      gravida in.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$lg">
+      Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum fusce ut placerat.
+      Erat velit scelerisque in dictum non. Tempus quam pellentesque nec nam aliquam sem et tortor
+      consequat. Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel
+      pharetra vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu nisl nunc mi
+      ipsum faucibus. Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi etiam
+      dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit gravida rutrum quisque non
+      tellus orci ac.
+    </Text>
+    <Spacer y={1} />
+  </Box>
+);`;
+
+export const Layout = `import { Content } from "./Content.js"
+
+export const Layout = ({ children }) => (
+  <Box
+    css={{
+      maxW: "100%",
+      maxHeight: "600px",
+      overflow: "visible scroll",
+      boxShadow: "$md",
+      position: "relative",
+      border: "1px solid $colors$border",
+      borderRadius: "$md",
+      "::-webkit-scrollbar": {
+        display: "none",
+        width: 0,
+        height: 0,
+        background: "transparent",
+      },
+    }}
+  >
+    {children}
+    <Content />
+  </Box>
+);`;
diff --git a/apps/docs/content/components/navbar/floating.ts b/apps/docs/content/components/navbar/floating.ts
new file mode 100644
index 0000000000..b298935c04
--- /dev/null
+++ b/apps/docs/content/components/navbar/floating.ts
@@ -0,0 +1,51 @@
+import {Layout, Box, AcmeLogo, Content} from "./common";
+
+const App = `import { Navbar, Button, Link, Text, useTheme } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+
+export default function App() {
+  const { isDark } = useTheme();
+
+  return (
+    <Layout>
+      <Navbar isBordered={isDark} variant="floating">
+        <Navbar.Brand>
+          <AcmeLogo />
+          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content css={{"@smMax": {d: "none"}}}>
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Integrations</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Layout>
+  )
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Box.js": Box,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/navbar/index.ts b/apps/docs/content/components/navbar/index.ts
new file mode 100644
index 0000000000..aaa0c040ee
--- /dev/null
+++ b/apps/docs/content/components/navbar/index.ts
@@ -0,0 +1,9 @@
+import staticVariant from "./static";
+import stickyVariant from "./sticky";
+import floatingVariant from "./floating";
+
+export default {
+  staticVariant,
+  stickyVariant,
+  floatingVariant,
+};
diff --git a/apps/docs/content/components/navbar/static.ts b/apps/docs/content/components/navbar/static.ts
new file mode 100644
index 0000000000..472411c2ad
--- /dev/null
+++ b/apps/docs/content/components/navbar/static.ts
@@ -0,0 +1,49 @@
+import {Layout, Box, AcmeLogo, Content} from "./common";
+
+const App = `import { Navbar } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+
+export default function App() {
+  return (
+    <Layout>
+      <Navbar>
+        <Navbar.Brand>
+          <AcmeLogo />
+          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content css={{"@smMax": {d: "none"}}}>
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Integrations</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Layout>
+  )
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Box.js": Box,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/navbar/sticky.ts b/apps/docs/content/components/navbar/sticky.ts
new file mode 100644
index 0000000000..eb2361b09e
--- /dev/null
+++ b/apps/docs/content/components/navbar/sticky.ts
@@ -0,0 +1,49 @@
+import {Layout, Box, AcmeLogo, Content} from "./common";
+
+const App = `import { Navbar } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+
+export default function App() {
+  return (
+    <Layout>
+      <Navbar variant="sticky">
+        <Navbar.Brand>
+          <AcmeLogo />
+          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content css={{"@smMax": {d: "none"}}}>
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Integrations</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Layout>
+  )
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Box.js": Box,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
new file mode 100644
index 0000000000..d72eaa9390
--- /dev/null
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -0,0 +1,36 @@
+---
+title: "Navbar"
+description: "Navbar"
+url: https://nextui.org/docs/components/badge
+---
+
+# Navbar
+
+Badges are used as a small numerical value or status descriptor for UI elements.
+
+```jsx
+import { Navbar } from "@nextui-org/react";
+```
+
+<CarbonAd />
+
+
+<Spacer y={2} />
+
+<Playground
+  title="Static"
+  desc="Badge with default styles, used in standalone when `content` prop is empty."
+  files={navbarContent.staticVariant}
+/>
+
+<Playground
+  title="Sticky"
+  desc="Badge with default styles, used in standalone when `content` prop is empty."
+  files={navbarContent.stickyVariant}
+/>
+
+<Playground
+  title="Floating"
+  desc="Badge with default styles, used in standalone when `content` prop is empty."
+  files={navbarContent.floatingVariant}
+/>
\ No newline at end of file
diff --git a/apps/docs/content/docs/manifest.json b/apps/docs/content/docs/manifest.json
index 7333a256a5..b8ff2ec8b7 100644
--- a/apps/docs/content/docs/manifest.json
+++ b/apps/docs/content/docs/manifest.json
@@ -197,7 +197,9 @@
             },
             {
               "title": "Navbar",
-              "comingSoon": true
+              "keywords": "navbar, nav, navbar, navigation, menu, header",
+              "path": "/docs/components/navbar.mdx",
+              "newPost": true
             },
             {
               "title": "Switch",
diff --git a/apps/docs/content/docs/theme/default-theme.mdx b/apps/docs/content/docs/theme/default-theme.mdx
index afb67b6aa2..bcf9829577 100644
--- a/apps/docs/content/docs/theme/default-theme.mdx
+++ b/apps/docs/content/docs/theme/default-theme.mdx
@@ -58,6 +58,14 @@ export default {
     // generic colors
     white: '#ffffff',
     black: '#000000',
+
+    // background colors (light)
+    background: "$white",
+    backgroundAlpha: "rgba(255, 255, 255, 0.8)", // used for semi-transparent backgrounds like the navbar
+    foreground: "$black",
+    backgroundContrast: "$white",
+
+
     //semantic colors (light)
     blue50: '#EDF5FF',
     // ...
@@ -255,6 +263,7 @@ This table is a simple overview of the most common use case for each step. Howev
   code={`
     <Palette colors={[
         "background", 
+        "backgroundAlpha",
         "backgroundContrast",
         "foreground",
         "text",
diff --git a/apps/docs/src/components/carbon-ad/carbon-optimize.js b/apps/docs/src/components/carbon-ad/carbon-optimize.js
index 69ae69d2ba..4020f7a345 100644
--- a/apps/docs/src/components/carbon-ad/carbon-optimize.js
+++ b/apps/docs/src/components/carbon-ad/carbon-optimize.js
@@ -1,67 +1,64 @@
 export default {
-    isRefreshAble: function () {
-      return !(
-        typeof document.addEventListener === 'undefined' ||
-        this.browserSupport().hidden === undefined
-      );
-    },
-    browserSupport: function () {
-      let hidden;
-      let visibilityChange;
-      if (typeof document.hidden !== 'undefined') {
-        // Opera 12.10 and Firefox 18 and later support
-        hidden = 'hidden';
-        visibilityChange = 'visibilitychange';
-      } else if (typeof document.msHidden !== 'undefined') {
-        hidden = 'msHidden';
-        visibilityChange = 'msvisibilitychange';
-      } else if (
-        typeof document.webkitHidden !== 'undefined'
+  isRefreshAble: function () {
+    return !(
+      typeof document.addEventListener === "undefined" || this.browserSupport().hidden === undefined
+    );
+  },
+  browserSupport: function () {
+    let hidden;
+    let visibilityChange;
+
+    if (typeof document.hidden !== "undefined") {
+      // Opera 12.10 and Firefox 18 and later support
+      hidden = "hidden";
+      visibilityChange = "visibilitychange";
+    } else if (typeof document.msHidden !== "undefined") {
+      hidden = "msHidden";
+      visibilityChange = "msvisibilitychange";
+    } else if (typeof document.webkitHidden !== "undefined") {
+      hidden = "webkitHidden";
+      visibilityChange = "webkitvisibilitychange";
+    }
+
+    return {
+      hidden: hidden,
+      visibilityChange: visibilityChange,
+    };
+  },
+  handleVisibilityChange: function () {
+    const isElementInViewport = function (el) {
+      let element = document.querySelector(el);
+      let bounding = element.getBoundingClientRect();
+      let isVisible;
+
+      if (
+        bounding.top >= 0 &&
+        bounding.left >= 0 &&
+        bounding.right <= window.innerWidth &&
+        bounding.bottom <= window.innerHeight
       ) {
-        hidden = 'webkitHidden';
-        visibilityChange = 'webkitvisibilitychange';
-      }
-      return {
-        hidden: hidden,
-        visibilityChange: visibilityChange,
-      };
-    },
-    handleVisibilityChange: function () {
-      const isElementInViewport = function (el) {
-        let element = document.querySelector(el);
-        let bounding = element.getBoundingClientRect();
-        let isVisible;
-  
-        if (
-          bounding.top >= 0 &&
-          bounding.left >= 0 &&
-          bounding.right <= window.innerWidth &&
-          bounding.bottom <= window.innerHeight
-        ) {
-          isVisible = true;
-        } else {
-          isVisible = false;
-        }
-        return isVisible;
-      };
-  
-      if (!document.hidden) {
-        if (
-          typeof _carbonads !== 'undefined' &&
-          isElementInViewport('#carbonads')
-        ) {
-          // eslint-disable-next-line no-undef
-          _carbonads.refresh();
-        }
+        isVisible = true;
+      } else {
+        isVisible = false;
       }
-    },
-    init: function () {
-      if (this.isRefreshAble()) {
-        document.addEventListener(
-          this.browserSupport().visibilityChange,
-          this.handleVisibilityChange,
-          false
-        );
+
+      return isVisible;
+    };
+
+    if (!document.hidden) {
+      if (typeof _carbonads !== "undefined" && isElementInViewport("#carbonads")) {
+        // eslint-disable-next-line no-undef
+        _carbonads.refresh();
       }
-    },
-}
\ No newline at end of file
+    }
+  },
+  init: function () {
+    if (this.isRefreshAble()) {
+      document.addEventListener(
+        this.browserSupport().visibilityChange,
+        this.handleVisibilityChange,
+        false,
+      );
+    }
+  },
+};
diff --git a/apps/docs/src/layouts/navbar.tsx b/apps/docs/src/layouts/navbar.tsx
index f4e06dbd61..2ecaf412c1 100644
--- a/apps/docs/src/layouts/navbar.tsx
+++ b/apps/docs/src/layouts/navbar.tsx
@@ -4,9 +4,8 @@ import {Box} from "@primitives";
 import cn from "classnames";
 import NextLink from "next/link";
 import dynamic from "next/dynamic";
-import {Row, Col, Spacer, Link, Button, useBodyScroll} from "@nextui-org/react";
+import {Row, Col, Spacer, Link, Button, Container, useBodyScroll} from "@nextui-org/react";
 import {Route} from "@lib/docs/page";
-import {Container} from "@nextui-org/react";
 import {useRouter} from "next/router";
 import {useMediaQuery} from "@hooks/use-media-query";
 import {isActive} from "@utils/links";
diff --git a/apps/docs/src/pages/test.tsx b/apps/docs/src/pages/test.tsx
new file mode 100644
index 0000000000..a54d510468
--- /dev/null
+++ b/apps/docs/src/pages/test.tsx
@@ -0,0 +1,162 @@
+import {useTheme, Text, Spacer, Navbar, Link, Button, styled} from "@nextui-org/react";
+import {ThemeToggle} from "@components";
+
+const AcmeLogo = () => (
+  <svg
+    className=""
+    fill="none"
+    height="36"
+    viewBox="0 0 32 32"
+    width="36"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect fill="var(--secondary)" height="100%" rx="16" width="100%" />
+    <path
+      clipRule="evenodd"
+      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+const Box = styled("div", {
+  boxSizing: "border-box",
+});
+
+const Content = () => (
+  <Box css={{px: "$12", mt: "$8", "@xsMax": {px: "$10"}}}>
+    <Text h2>Lorem ipsum dolor sit amet</Text>
+    <Text size="$lg">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Purus gravida quis blandit turpis. Augue neque gravida in
+      fermentum et sollicitudin ac orci. Et sollicitudin ac orci phasellus egestas. Elementum tempus
+      egestas sed sed risus pretium quam vulputate. Interdum velit euismod in pellentesque massa
+      placerat duis ultricies.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$lg">
+      Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent semper feugiat nibh
+      sed pulvinar. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Malesuada
+      proin libero nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. Sed viverra
+      tellus in hac habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue neque
+      gravida in.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$lg">
+      Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum fusce ut placerat.
+      Erat velit scelerisque in dictum non. Tempus quam pellentesque nec nam aliquam sem et tortor
+      consequat. Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel
+      pharetra vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu nisl nunc mi
+      ipsum faucibus. Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi etiam
+      dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit gravida rutrum quisque non
+      tellus orci ac.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$lg">
+      Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. In pellentesque massa placerat
+      duis ultricies. Sit amet massa vitae tortor condimentum. Morbi tincidunt augue interdum velit
+      euismod. Aliquet enim tortor at auctor urna nunc id. A scelerisque purus semper eget. Vitae
+      justo eget magna fermentum iaculis. Arcu non odio euismod lacinia at quis. Et leo duis ut diam
+      quam nulla porttitor massa. Eget nunc scelerisque viverra mauris. Suscipit tellus mauris a
+      diam maecenas sed enim. Cras sed felis eget velit aliquet. Est placerat in egestas erat
+      imperdiet sed euismod nisi porta. In ante metus dictum at tempor commodo. In cursus turpis
+      massa tincidunt dui ut ornare lectus. Tempus iaculis urna id volutpat. Iaculis eu non diam
+      phasellus vestibulum lorem sed risus.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$lg">
+      Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel. Imperdiet massa tincidunt
+      nunc pulvinar sapien et ligula ullamcorper malesuada. Faucibus pulvinar elementum integer enim
+      neque volutpat. Gravida arcu ac tortor dignissim convallis aenean. Lectus quam id leo in
+      vitae. Ultricies tristique nulla aliquet enim tortor. Nec tincidunt praesent semper feugiat
+      nibh sed. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Praesent semper
+      feugiat nibh sed pulvinar proin gravida. Dis parturient montes nascetur ridiculus mus mauris.
+      Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Ut lectus arcu bibendum at.
+      Integer enim neque volutpat ac. Diam sit amet nisl suscipit. Eros donec ac odio tempor orci
+      dapibus ultrices in iaculis. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Quis
+      lectus nulla at volutpat diam ut. Turpis egestas integer eget aliquet. Adipiscing tristique
+      risus nec feugiat in fermentum posuere. Morbi tempus iaculis urna id. Amet commodo nulla
+      facilisi nullam vehicula ipsum a arcu.
+    </Text>
+    <Text size="$lg">
+      Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent semper feugiat nibh
+      sed pulvinar. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Malesuada
+      proin libero nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. Sed viverra
+      tellus in hac habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue neque
+      gravida in.
+    </Text>
+    <Spacer y={1} />
+    <Text size="$lg">
+      Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum fusce ut placerat.
+      Erat velit scelerisque in dictum non. Tempus quam pellentesque nec nam aliquam sem et tortor
+      consequat. Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel
+      pharetra vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu nisl nunc mi
+      ipsum faucibus. Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi etiam
+      dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit gravida rutrum quisque non
+      tellus orci ac.
+    </Text>
+    <Spacer y={1} />
+  </Box>
+);
+
+const Layout = ({children}: any) => (
+  <Box
+    css={{
+      maxW: "100%",
+      maxHeight: "600px",
+      overflow: "visible scroll",
+      boxShadow: "$md",
+      position: "relative",
+      border: "1px solid $colors$border",
+      borderRadius: "$md",
+      m: "$6",
+      "::-webkit-scrollbar": {
+        display: "none",
+        width: 0,
+        height: 0,
+        background: "transparent",
+      },
+    }}
+  >
+    {children}
+    <Content />
+  </Box>
+);
+
+const TestPage = () => {
+  const {isDark} = useTheme();
+
+  return (
+    <Layout>
+      <Navbar isBordered={isDark} variant="floating">
+        <Navbar.Brand>
+          <AcmeLogo />
+          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content css={{"@smMax": {d: "none"}}}>
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Integrations</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <ThemeToggle />
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Layout>
+  );
+};
+
+export default TestPage;
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 4741da820c..598785239c 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -146,3 +146,5 @@ export * from "./dropdown";
 
 export {default as Badge} from "./badge";
 export * from "./badge";
+
+export {default as Navbar} from "./navbar";
diff --git a/packages/react/src/link/link.stories.tsx b/packages/react/src/link/link.stories.tsx
index 653688d6da..4a99342a9c 100644
--- a/packages/react/src/link/link.stories.tsx
+++ b/packages/react/src/link/link.stories.tsx
@@ -58,7 +58,7 @@ export const Icon = () => (
 export const Block = () => (
   <Grid.Container gap={1}>
     <Grid xs={12}>
-      <Link block href="#">
+      <Link block color="primary" href="#">
         {text}
       </Link>
     </Grid>
diff --git a/packages/react/src/link/link.styles.ts b/packages/react/src/link/link.styles.ts
index 19c36f4273..c8346cb3d1 100644
--- a/packages/react/src/link/link.styles.ts
+++ b/packages/react/src/link/link.styles.ts
@@ -1,6 +1,5 @@
-import {theme, styled, VariantProps} from "../theme/stitches.config";
+import {styled, VariantProps} from "../theme/stitches.config";
 import {cssFocusVisible} from "../theme/shared-css";
-import {addColorAlpha} from "../utils/color";
 
 export const StyledLinkIcon = styled("svg", {
   ml: "$1",
@@ -22,6 +21,7 @@ export const StyledLink = styled(
     backgroundClip: "inherit",
     WebkitTextFillColor: "inherit",
     outline: "none",
+    maxW: "max-content",
     "&:hover": {
       opacity: 0.8,
     },
@@ -30,33 +30,29 @@ export const StyledLink = styled(
     },
     variants: {
       color: {
+        inherit: {
+          color: "inherit",
+        },
         default: {
           color: "$link",
-          $$linkBackgroundColor: addColorAlpha(theme.colors?.link?.value, 0.2),
         },
         text: {
           color: "$text",
-          $$linkBackgroundColor: addColorAlpha(theme.colors?.text?.value, 0.2),
         },
         primary: {
           color: "$primary",
-          $$linkBackgroundColor: "$colors$primaryLight",
         },
         secondary: {
           color: "$secondary",
-          $$linkBackgroundColor: "$colors$secondaryLight",
         },
         success: {
           color: "$success",
-          $$linkBackgroundColor: "$colors$successLight",
         },
         warning: {
           color: "$warning",
-          $$linkBackgroundColor: "$colors$warningLight",
         },
         error: {
           color: "$error",
-          $$linkBackgroundColor: "$colors$errorLight",
         },
       },
       underline: {
diff --git a/packages/react/src/link/link.tsx b/packages/react/src/link/link.tsx
index 4ef0b44cf5..e8690ee4c4 100644
--- a/packages/react/src/link/link.tsx
+++ b/packages/react/src/link/link.tsx
@@ -1,6 +1,7 @@
 import type {AriaLinkProps} from "@react-types/link";
+import type {FocusRingAria} from "@react-aria/focus";
 
-import React from "react";
+import React, {useMemo, HTMLAttributes} from "react";
 import {useLink} from "@react-aria/link";
 import {mergeProps} from "@react-aria/utils";
 import {useFocusRing} from "@react-aria/focus";
@@ -8,6 +9,8 @@ import {useFocusRing} from "@react-aria/focus";
 import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
+import useTheme from "../use-theme";
+import {getTokenValue} from "../theme/utils";
 import {__DEV__} from "../utils/assertion";
 
 import LinkIcon from "./icon";
@@ -20,19 +23,71 @@ interface Props extends Omit<HTMLNextUIProps<"a">, keyof LinkVariantsProps> {
 
 export type LinkProps = Props & LinkVariantsProps & AriaLinkProps;
 
+interface IFocusRingAria extends FocusRingAria {
+  focusProps: Omit<React.HTMLAttributes<HTMLElement>, keyof LinkProps>;
+}
+
+interface ILinkAria {
+  /** Props for the link element. */
+  linkProps: Omit<HTMLAttributes<HTMLElement>, keyof LinkProps>;
+  /** Whether the link is currently pressed. */
+  isPressed: boolean;
+}
+
+interface IFocusRingAria extends FocusRingAria {
+  focusProps: Omit<HTMLAttributes<HTMLElement>, keyof LinkProps>;
+}
+
 const Link = forwardRef<LinkProps, "a">((props, ref) => {
-  const {children, icon = false, as, autoFocus, className, ...otherProps} = props;
+  const {
+    children,
+    icon = false,
+    as,
+    css,
+    color = "default",
+    autoFocus,
+    className,
+    ...otherProps
+  } = props;
+
+  const {isDark} = useTheme();
 
   const domRef = useDOMRef(ref);
 
-  const {linkProps} = useLink({...otherProps, elementType: as} as AriaLinkProps, domRef);
-  const {isFocusVisible, focusProps} = useFocusRing({autoFocus});
+  const {linkProps}: ILinkAria = useLink({...otherProps, elementType: as} as AriaLinkProps, domRef);
+  const {isFocusVisible, focusProps}: IFocusRingAria = useFocusRing({autoFocus});
+
+  const linkCss = useMemo(() => {
+    let linkBackgroundColor = `$colors$${color}Light`;
+
+    switch (color) {
+      case "inherit": {
+        linkBackgroundColor = getTokenValue("colors", "text", 0.2);
+        break;
+      }
+      case "default": {
+        linkBackgroundColor = getTokenValue("colors", "link", 0.2);
+        break;
+      }
+      case "text": {
+        linkBackgroundColor = getTokenValue("colors", "text", 0.2);
+        break;
+      }
+    }
+
+    return {
+      ...css,
+      $$linkBackgroundColor: linkBackgroundColor,
+    };
+  }, [css, color, isDark]);
 
   return (
     <StyledLink
       ref={domRef}
       as={as}
       className={clsx("nextui-link", className)}
+      color={color}
+      css={linkCss}
       isFocusVisible={isFocusVisible}
       {...mergeProps(linkProps, focusProps, otherProps)}
     >
diff --git a/packages/react/src/navbar/navbar-content.tsx b/packages/react/src/navbar/navbar-content.tsx
index 63ae8c759c..8ecf8c5b3a 100644
--- a/packages/react/src/navbar/navbar-content.tsx
+++ b/packages/react/src/navbar/navbar-content.tsx
@@ -1,21 +1,23 @@
 import React from "react";
 
+import {CSSGapUnit, CSSColor} from "../theme";
 import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
-import {CSS} from "../theme/stitches.config";
 import {__DEV__} from "../utils/assertion";
 
 import {StyledNavbarContent, NavbarContentVariantsProps} from "./navbar.styles";
 
-type GapUnit = CSS["gap"];
-
-interface Props extends Omit<HTMLNextUIProps<"ul">, keyof NavbarContentVariantsProps> {
+interface Props extends Omit<HTMLNextUIProps<"ul">, keyof NavbarContentVariantsProps | "color"> {
   children?: React.ReactNode | React.ReactNode[];
   /**
    * The gap between each item. Defaults to `$space$8 = 1rem`.
    */
-  gap?: GapUnit;
+  gap?: CSSGapUnit;
+  /**
+   * The main color of the navbar items.
+   */
+  color?: CSSColor;
 }
 
 export type NavbarContentProps = Props & NavbarContentVariantsProps;
@@ -23,7 +25,7 @@ export type NavbarContentProps = Props & NavbarContentVariantsProps;
 const NavbarContent = forwardRef<NavbarContentProps, "ul">((props, ref) => {
   const domRef = useDOMRef(ref);
 
-  const {children, gap = "$8", css, className, ...otherProps} = props;
+  const {children, gap = "$8", color = "inherit", css, className, ...otherProps} = props;
 
   return (
     <StyledNavbarContent
@@ -31,6 +33,7 @@ const NavbarContent = forwardRef<NavbarContentProps, "ul">((props, ref) => {
       className={clsx("nextui-navbar-content", className)}
       css={{
         gap,
+        color,
         ...css,
       }}
       {...otherProps}
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 819e028770..18374d4224 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -111,11 +111,11 @@ const DefaultPageContent = () => (
   </Box>
 );
 
-const DefaultNavbarContent = () => (
+const DefaultNavbarContent = ({color}: {color?: any}) => (
   <>
-    <Navbar.Brand as={Link} color="text" href="#">
+    <Navbar.Brand>
       <AcmeLogo />
-      <Text b css={{"@xsMax": {d: "none"}}}>
+      <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
         ACME
       </Text>
     </Navbar.Brand>
@@ -127,11 +127,11 @@ const DefaultNavbarContent = () => (
       <Navbar.Link href="#">Company</Navbar.Link>
     </Navbar.Content>
     <Navbar.Content>
-      <Navbar.Link color="default" href="#">
+      <Navbar.Link color="inherit" href="#">
         Login
       </Navbar.Link>
       <Navbar.Item>
-        <Button auto flat as={Link} href="#">
+        <Button auto flat as={Link} color={color} href="#">
           Sign Up
         </Button>
       </Navbar.Item>
@@ -155,7 +155,7 @@ const App = ({children}: any) => (
   </Box>
 );
 
-export const Default = () => (
+export const Static = () => (
   <App>
     <Navbar>
       <DefaultNavbarContent />
@@ -173,7 +173,7 @@ export const Sticky = () => (
 
 export const Floating = () => (
   <App>
-    <Navbar variant="floating">
+    <Navbar color="contrast" variant="floating">
       <DefaultNavbarContent />
     </Navbar>
   </App>
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index 8ef63b557b..f34a3cdf92 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -66,6 +66,7 @@ export const StyledNavbarContainer = styled("div", {
 export const StyledNavbar = styled("nav", {
   // variables
   $$navbarBackgroundColor: "$colors$background",
+  $$navbarBlurBackgroundColor: "$colors$backgroundAlpha",
   $$navbarTextColor: "$colors$text",
   $$navbarHeight: "76px",
   $$navbarBorderColor: "$colors$border",
@@ -74,6 +75,7 @@ export const StyledNavbar = styled("nav", {
   $$navbarFloatingMargin: "$space$10",
   $$navbarContainerMaxWidth: "$breakpoints$lg",
   $$navbarShadow: "$shadows$md",
+  $$navbarBlur: "10px",
   // styles
   width: "100%",
   dflex: "center",
@@ -97,9 +99,9 @@ export const StyledNavbar = styled("nav", {
         left: 0,
         position: "sticky",
         zIndex: "$2",
-        bg: "linear-gradient(180deg, rgba(248, 248, 248, 0.95) 44%, rgba(248, 248, 248, 0.46) 73%, rgba(255, 255, 255,0))",
-        // @dark
-        // bg: "linear-gradient(180deg,rgba(22,29,49,.9) 44%,rgba(22,29,49,.43) 73%,rgba(22,29,49,0))",
+        "@safari": {
+          top: "-5px",
+        },
         [`& ${StyledNavbarContainer}`]: {
           mt: "calc($$navbarFloatingMargin * 0.5)",
           mx: "$$navbarFloatingMargin",
@@ -127,11 +129,6 @@ export const StyledNavbar = styled("nav", {
         $$navbarContainerMaxWidth: "100%",
       },
     },
-    applyBackgroundContrast: {
-      true: {
-        $$navbarBackgroundColor: "$colors$backgroundContrast",
-      },
-    },
     isBordered: {
       true: {
         [`& ${StyledNavbarContainer}`]: {
@@ -139,9 +136,6 @@ export const StyledNavbar = styled("nav", {
         },
       },
     },
-    isInverted: {
-      true: {},
-    },
     isCompact: {
       true: {
         $$navbarHeight: "54px",
@@ -157,9 +151,9 @@ export const StyledNavbar = styled("nav", {
     disableBlur: {
       false: {
         "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
-          $$navbarBackgroundColor: "$colors$backgroundAlpha",
           [`& ${StyledNavbarContainer}`]: {
-            backdropFilter: "saturate(180%) blur(10px)",
+            bg: "$$navbarBlurBackgroundColor",
+            backdropFilter: "saturate(180%) blur($$navbarBlur)",
           },
         },
       },
@@ -217,7 +211,6 @@ export const StyledNavbar = styled("nav", {
     borderWeight: "light",
     maxWidth: "lg",
     isBordered: false,
-    isInverted: false,
     disableShadow: false,
     disableBlur: false,
   },
diff --git a/packages/react/src/navbar/navbar.tsx b/packages/react/src/navbar/navbar.tsx
index b3ed9eaa51..d81551edd6 100644
--- a/packages/react/src/navbar/navbar.tsx
+++ b/packages/react/src/navbar/navbar.tsx
@@ -1,9 +1,11 @@
-import React from "react";
+import React, {useMemo} from "react";
 
 import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
 import {CSS} from "../theme/stitches.config";
+import useTheme from "../use-theme";
+import {addColorAlpha} from "../utils/color";
 import {__DEV__} from "../utils/assertion";
 
 import {StyledNavbar, StyledNavbarContainer, NavbarVariantsProps} from "./navbar.styles";
@@ -21,18 +23,49 @@ interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps>
 export type NavbarProps = Props & NavbarVariantsProps;
 
 const Navbar = forwardRef<NavbarProps, "nav">((props, ref) => {
+  const {theme, isDark} = useTheme();
   const domRef = useDOMRef(ref);
 
   const {
     children,
+    variant = "static",
     className,
+    css,
     containerCss,
     enableShadowOnlyOnScroll = false,
     ...otherProps
   } = props;
 
+  const navbarCss = useMemo(() => {
+    let customCss = {};
+
+    if (variant === "floating") {
+      // linear gradient behind the navbar
+      customCss = {
+        bg: `linear-gradient(180deg, ${addColorAlpha(
+          theme?.colors?.background?.value,
+          0.95,
+        )} 44%, ${addColorAlpha(theme?.colors?.background?.value, 0.46)} 73%, ${addColorAlpha(
+          theme?.colors?.background?.value,
+          0,
+        )})`,
+      };
+    }
+
+    return {
+      ...customCss,
+      ...css,
+    };
+  }, [css, isDark, theme?.colors, variant]);
+
   return (
-    <StyledNavbar ref={domRef} className={clsx("nextui-navbar", className)} {...otherProps}>
+    <StyledNavbar
+      ref={domRef}
+      className={clsx("nextui-navbar", className)}
+      css={navbarCss}
+      variant={variant}
+      {...otherProps}
+    >
       <StyledNavbarContainer className="nextui-navbar-container" css={containerCss}>
         {children}
       </StyledNavbarContainer>
diff --git a/packages/react/src/text/child.tsx b/packages/react/src/text/child.tsx
index b27f912fc7..2a7b86a066 100644
--- a/packages/react/src/text/child.tsx
+++ b/packages/react/src/text/child.tsx
@@ -4,6 +4,7 @@ import type {SimpleColors} from "../utils/prop-types";
 import React, {useMemo, ReactNode} from "react";
 
 import {isNormalColor} from "../utils/color";
+import {CSSFontSize} from "../theme";
 import {ReactRef} from "../utils/refs";
 import {useDOMRef} from "../utils/dom";
 import {__DEV__} from "../utils/assertion";
@@ -11,7 +12,6 @@ import {__DEV__} from "../utils/assertion";
 import {StyledText, TextVariantsProps} from "./text.styles";
 
 type As = keyof JSX.IntrinsicElements | React.ComponentType<any>;
-type FontSize = CSS["fontSize"];
 
 export interface Props {
   tag: keyof JSX.IntrinsicElements;
@@ -25,7 +25,7 @@ export interface Props {
    * **Initial value**: `medium`
    *
    */
-  size?: FontSize;
+  size?: CSSFontSize;
   /**
    * The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
    *
diff --git a/packages/react/src/theme/common.ts b/packages/react/src/theme/common.ts
index fdd0201e54..69887e6321 100644
--- a/packages/react/src/theme/common.ts
+++ b/packages/react/src/theme/common.ts
@@ -245,9 +245,6 @@ export const defaultColors = {
   accents7: "$gray700",
   accents8: "$gray800",
   accents9: "$gray900",
-
-  // misc
-  border: "$gray300",
 };
 
 export const defaultMedia = {
diff --git a/packages/react/src/theme/dark-theme.ts b/packages/react/src/theme/dark-theme.ts
index 9a2e8ba3f8..8f964b109b 100644
--- a/packages/react/src/theme/dark-theme.ts
+++ b/packages/react/src/theme/dark-theme.ts
@@ -13,9 +13,9 @@ export default {
   colors: {
     // background
     background: "$black",
+    backgroundAlpha: "rgba(0, 0, 0, 0.6)",
     foreground: "$white",
     backgroundContrast: "$accents0",
-    backgroundAlpha: "rgba(0, 0, 0, 0.5)",
 
     //semantic colors
     ...blueDark,
@@ -67,6 +67,7 @@ export default {
     codeLight: "$cyan50",
     code: "$cyan600",
     selection: "$pink800",
+    border: "rgba(255, 255, 255, 0.15)",
   },
   shadows: {
     xs: "0 2px 8px 1px rgb(0 0 0 / 0.07), 0 1px 1px -1px rgb(0 0 0 / 0.04)",
diff --git a/packages/react/src/theme/light-theme.ts b/packages/react/src/theme/light-theme.ts
index b16934809c..da1bf5e7d8 100644
--- a/packages/react/src/theme/light-theme.ts
+++ b/packages/react/src/theme/light-theme.ts
@@ -4,9 +4,9 @@ export default {
   colors: {
     // background colors
     background: "$white",
+    backgroundAlpha: "rgba(255, 255, 255, 0.8)",
     foreground: "$black",
     backgroundContrast: "$white",
-    backgroundAlpha: "rgba(255, 255, 255, 0.8)",
 
     //semantic colors
     ...blue,
@@ -24,6 +24,7 @@ export default {
     codeLight: "$pink100",
     code: "$pink600",
     selection: "$blue200",
+    border: "rgba(0, 0, 0, 0.15)",
   },
   shadows: {
     xs: "0 2px 8px 1px rgb(104 112 118 / 0.07), 0 1px 1px -1px rgb(104 112 118 / 0.04)",
diff --git a/packages/react/src/theme/types.ts b/packages/react/src/theme/types.ts
index e4f4466145..dec5adddf6 100644
--- a/packages/react/src/theme/types.ts
+++ b/packages/react/src/theme/types.ts
@@ -1,4 +1,4 @@
-import {StitchesTheme, createThemeBase} from "./stitches.config";
+import {StitchesTheme, createThemeBase, CSS} from "./stitches.config";
 import commonTheme from "./common";
 
 /** Configuration Interface */
@@ -53,3 +53,13 @@ export type NextUIThemeContext = {
   theme?: NextUITheme;
   isDark?: boolean;
 };
+
+/**
+ * Stitches CSS Props
+ */
+export type CSSFontSize = CSS["fontSize"];
+export type CSSColor = CSS["color"];
+export type CSSGapUnit = CSS["gap"];
+export type CSSFontWeight = CSS["fontWeight"];
+export type CSSLineHeight = CSS["lineHeight"];
+export type CSSLetterSpacing = CSS["letterSpacing"];
diff --git a/packages/react/src/theme/utils.ts b/packages/react/src/theme/utils.ts
index aedf829833..cb98358800 100644
--- a/packages/react/src/theme/utils.ts
+++ b/packages/react/src/theme/utils.ts
@@ -1,11 +1,12 @@
 import clsx from "../utils/clsx";
+import {rgbToRgba, hexToRGBA} from "../utils/color";
 
 import commonTheme from "./common";
 import defaultTheme from "./light-theme";
 import {ThemeType, TokenValue, TokenKeyName} from "./types";
 
-export const getTokenValue = (token: TokenKeyName, tokenName: string) => {
-  if (!document || !token) return "";
+export const getTokenValue = (token: TokenKeyName, tokenName: string, alpha = 1) => {
+  if (typeof document === "undefined" || !token) return "";
   let docStyle = getComputedStyle(document.documentElement);
   const tokenKey = `--${commonTheme.prefix}-${token}-${tokenName}`;
   const tokenValue = docStyle.getPropertyValue(tokenKey);
@@ -14,6 +15,15 @@ export const getTokenValue = (token: TokenKeyName, tokenName: string) => {
     getTokenValue(token, tokenValue);
   }
 
+  if (tokenValue && alpha !== 1) {
+    if (tokenValue.includes("rgb")) {
+      return rgbToRgba(tokenValue, alpha);
+    }
+    if (tokenValue.includes("#")) {
+      return hexToRGBA(tokenValue, alpha);
+    }
+  }
+
   return tokenValue;
 };
 
diff --git a/packages/react/src/utils/color.ts b/packages/react/src/utils/color.ts
index 5cc14b396e..df74c9a693 100644
--- a/packages/react/src/utils/color.ts
+++ b/packages/react/src/utils/color.ts
@@ -49,7 +49,7 @@ export const hexToRGBA = (hex: string, alpha: number = 1): string => {
     b = "0x" + hex[5] + hex[6];
   }
 
-  return `rgba(${+r}, ${+g},${+b},${alpha})`;
+  return `rgba(${+r},${+g},${+b},${alpha})`;
 };
 
 export const isNormalColor = (color: string): boolean => {
@@ -115,7 +115,9 @@ export const colorToRgbValues = (colorProp: string) => {
   const regArray = safeColor.match(/\((.+)\)/);
 
   if (!colorType.startsWith("rgb") || !regArray) {
-    throw new Error(`Next UI: Only support ["RGB", "RGBA", "HEX"] color.`);
+    console.warn(`NextUI: Only supports ["RGB", "RGBA", "HEX"] color.`);
+
+    return [0, 0, 0];
   }
 
   return regArray[1].split(",").map((str) => Number.parseFloat(str));
@@ -136,6 +138,13 @@ export const addColorAlpha = (colorProp?: string, alpha: number = 1) => {
   return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`;
 };
 
+export const rgbToRgba = (rgb: string, alpha: number = 1) => {
+  const [r, g, b] = rgb.split(",").map((str) => Number.parseFloat(str));
+  const safeAlpha = alpha > 1 ? 1 : alpha < 0 ? 0 : alpha;
+
+  return `rgba(${r}, ${g}, ${b}, ${safeAlpha})`;
+};
+
 function padZero(str: string, len?: number): string {
   len = len || 2;
   var zeros = new Array(len).join("0");
diff --git a/packages/react/src/utils/object.ts b/packages/react/src/utils/object.ts
index 1772a90c4c..a5fad43ce0 100644
--- a/packages/react/src/utils/object.ts
+++ b/packages/react/src/utils/object.ts
@@ -65,3 +65,26 @@ export const getKeyValue = (obj: any, key: Key) => {
 
   return obj[key];
 };
+
+/**
+ * Get value from a deeply nested object using a string path.
+ * Memorizes the value.
+ * @param obj - the object
+ * @param path - the string path
+ * @param fallback  - the fallback value
+ */
+export const getProp = (
+  obj: Record<string, any>,
+  path: string | number,
+  fallback?: any,
+  index?: number,
+) => {
+  const key = typeof path === "string" ? path.split(".") : [path];
+
+  for (index = 0; index < key.length; index += 1) {
+    if (!obj) break;
+    obj = obj[key[index]];
+  }
+
+  return obj === undefined ? fallback : obj;
+};
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 42f35588ae..cbd88b9f59 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -21,6 +21,7 @@
     "module": "esnext",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "suppressImplicitAnyIndexErrors": true,
     "typeRoots": [
       "./node_modules/@types", "./typings"
     ]

From 7971e08e00a663b614ab07989355abf697073eea Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Fri, 15 Jul 2022 11:33:08 -0300
Subject: [PATCH 040/106] fix(root): readme

---
 packages/react/README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/README.md b/packages/react/README.md
index 4dd3ad5d6b..06031245fd 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -44,12 +44,12 @@ yarn add @nextui-org/react
 npm i @nextui-org/react
 ```
 
-2. Setup: For NextUI to work correctly, you need to set up the CssBaseline at the root of your application.
+2. Setup: For NextUI to work correctly, you need to set up the `NextUIProvider` at the root of your application.
 
 Go to the root of your application and do this:
 
 ```jsx
-import { NextUIProvider } from '@nextui-org/react';
+import {NextUIProvider} from '@nextui-org/react';
 
 const Application = () => (
   <NextUIProvider>
@@ -63,7 +63,7 @@ const Application = () => (
    each component is exported separately.
 
 ```jsx
-import { Button } from '@nextui-org/react';
+import {Button} from '@nextui-org/react';
 
 const Component = () => <Button>Click me</Button>;
 ```

From d8557a01066ccdf7928199a1510fa7faef212c25 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Fri, 15 Jul 2022 11:44:01 -0300
Subject: [PATCH 041/106] fix(docs): eslint rules

---
 .../components/carbon-ad/carbon-optimize.js   | 123 ++++++++-------
 apps/docs/src/components/icons/activity.tsx   |   2 +-
 apps/docs/src/components/icons/anchor.tsx     |   2 +-
 apps/docs/src/components/icons/camera.tsx     |   2 +-
 apps/docs/src/components/icons/forward5s.tsx  |   2 +-
 apps/docs/src/components/icons/heart.tsx      |   2 +-
 apps/docs/src/components/icons/lock.tsx       |   2 +-
 .../src/components/icons/microphone-off.tsx   |  10 +-
 apps/docs/src/components/icons/microphone.tsx |   2 +-
 apps/docs/src/components/icons/moon.tsx       |   1 -
 apps/docs/src/components/icons/next-track.tsx |   2 +-
 .../src/components/icons/notification.tsx     |  10 +-
 apps/docs/src/components/icons/palette.tsx    |   2 +-
 apps/docs/src/components/icons/play.tsx       |   2 +-
 .../src/components/icons/previous-track.tsx   |  10 +-
 apps/docs/src/components/icons/rewind5s.tsx   |   2 +-
 apps/docs/src/components/icons/send.tsx       |  11 +-
 apps/docs/src/components/icons/sun.tsx        |   1 -
 apps/docs/src/components/icons/unlock.tsx     |   2 +-
 apps/docs/src/components/icons/user.tsx       |   2 +-
 apps/docs/src/components/icons/vercel.tsx     |   1 +
 apps/docs/src/components/icons/video-off.tsx  |   2 +-
 apps/docs/src/components/icons/volume-up.tsx  |   2 +-
 .../src/components/kbar-wrapper/index.tsx     |  18 +--
 apps/docs/src/components/logo/index.tsx       |  12 +-
 apps/docs/src/components/palette/item.tsx     |   2 +-
 packages/react/src/container/container.tsx    | 144 +++++++++---------
 27 files changed, 159 insertions(+), 214 deletions(-)

diff --git a/apps/docs/src/components/carbon-ad/carbon-optimize.js b/apps/docs/src/components/carbon-ad/carbon-optimize.js
index 69ae69d2ba..4020f7a345 100644
--- a/apps/docs/src/components/carbon-ad/carbon-optimize.js
+++ b/apps/docs/src/components/carbon-ad/carbon-optimize.js
@@ -1,67 +1,64 @@
 export default {
-    isRefreshAble: function () {
-      return !(
-        typeof document.addEventListener === 'undefined' ||
-        this.browserSupport().hidden === undefined
-      );
-    },
-    browserSupport: function () {
-      let hidden;
-      let visibilityChange;
-      if (typeof document.hidden !== 'undefined') {
-        // Opera 12.10 and Firefox 18 and later support
-        hidden = 'hidden';
-        visibilityChange = 'visibilitychange';
-      } else if (typeof document.msHidden !== 'undefined') {
-        hidden = 'msHidden';
-        visibilityChange = 'msvisibilitychange';
-      } else if (
-        typeof document.webkitHidden !== 'undefined'
+  isRefreshAble: function () {
+    return !(
+      typeof document.addEventListener === "undefined" || this.browserSupport().hidden === undefined
+    );
+  },
+  browserSupport: function () {
+    let hidden;
+    let visibilityChange;
+
+    if (typeof document.hidden !== "undefined") {
+      // Opera 12.10 and Firefox 18 and later support
+      hidden = "hidden";
+      visibilityChange = "visibilitychange";
+    } else if (typeof document.msHidden !== "undefined") {
+      hidden = "msHidden";
+      visibilityChange = "msvisibilitychange";
+    } else if (typeof document.webkitHidden !== "undefined") {
+      hidden = "webkitHidden";
+      visibilityChange = "webkitvisibilitychange";
+    }
+
+    return {
+      hidden: hidden,
+      visibilityChange: visibilityChange,
+    };
+  },
+  handleVisibilityChange: function () {
+    const isElementInViewport = function (el) {
+      let element = document.querySelector(el);
+      let bounding = element.getBoundingClientRect();
+      let isVisible;
+
+      if (
+        bounding.top >= 0 &&
+        bounding.left >= 0 &&
+        bounding.right <= window.innerWidth &&
+        bounding.bottom <= window.innerHeight
       ) {
-        hidden = 'webkitHidden';
-        visibilityChange = 'webkitvisibilitychange';
-      }
-      return {
-        hidden: hidden,
-        visibilityChange: visibilityChange,
-      };
-    },
-    handleVisibilityChange: function () {
-      const isElementInViewport = function (el) {
-        let element = document.querySelector(el);
-        let bounding = element.getBoundingClientRect();
-        let isVisible;
-  
-        if (
-          bounding.top >= 0 &&
-          bounding.left >= 0 &&
-          bounding.right <= window.innerWidth &&
-          bounding.bottom <= window.innerHeight
-        ) {
-          isVisible = true;
-        } else {
-          isVisible = false;
-        }
-        return isVisible;
-      };
-  
-      if (!document.hidden) {
-        if (
-          typeof _carbonads !== 'undefined' &&
-          isElementInViewport('#carbonads')
-        ) {
-          // eslint-disable-next-line no-undef
-          _carbonads.refresh();
-        }
+        isVisible = true;
+      } else {
+        isVisible = false;
       }
-    },
-    init: function () {
-      if (this.isRefreshAble()) {
-        document.addEventListener(
-          this.browserSupport().visibilityChange,
-          this.handleVisibilityChange,
-          false
-        );
+
+      return isVisible;
+    };
+
+    if (!document.hidden) {
+      if (typeof _carbonads !== "undefined" && isElementInViewport("#carbonads")) {
+        // eslint-disable-next-line no-undef
+        _carbonads.refresh();
       }
-    },
-}
\ No newline at end of file
+    }
+  },
+  init: function () {
+    if (this.isRefreshAble()) {
+      document.addEventListener(
+        this.browserSupport().visibilityChange,
+        this.handleVisibilityChange,
+        false,
+      );
+    }
+  },
+};
diff --git a/apps/docs/src/components/icons/activity.tsx b/apps/docs/src/components/icons/activity.tsx
index 242e0752fb..a68c8927b4 100644
--- a/apps/docs/src/components/icons/activity.tsx
+++ b/apps/docs/src/components/icons/activity.tsx
@@ -3,7 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const Activity: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const Activity: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   const {theme} = useTheme();
 
   return (
diff --git a/apps/docs/src/components/icons/anchor.tsx b/apps/docs/src/components/icons/anchor.tsx
index 36a71b178e..5773e19796 100644
--- a/apps/docs/src/components/icons/anchor.tsx
+++ b/apps/docs/src/components/icons/anchor.tsx
@@ -3,7 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const Anchor: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const Anchor: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   const {theme} = useTheme();
 
   return (
diff --git a/apps/docs/src/components/icons/camera.tsx b/apps/docs/src/components/icons/camera.tsx
index 218d5be37b..00c5123dcb 100644
--- a/apps/docs/src/components/icons/camera.tsx
+++ b/apps/docs/src/components/icons/camera.tsx
@@ -3,7 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const Camera: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const Camera: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   const {theme} = useTheme();
 
   return (
diff --git a/apps/docs/src/components/icons/forward5s.tsx b/apps/docs/src/components/icons/forward5s.tsx
index 7db3e92d5a..3b0b223fda 100644
--- a/apps/docs/src/components/icons/forward5s.tsx
+++ b/apps/docs/src/components/icons/forward5s.tsx
@@ -7,7 +7,7 @@ const defualtProps = {
   fill: "currentColor",
 };
 
-const Rewind5s: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const Rewind5s: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <Icon
       fill="none"
diff --git a/apps/docs/src/components/icons/heart.tsx b/apps/docs/src/components/icons/heart.tsx
index 2933ccc9e8..dcf72ce86e 100644
--- a/apps/docs/src/components/icons/heart.tsx
+++ b/apps/docs/src/components/icons/heart.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 import {IconProps, Icon} from "./index";
 
-const Heart: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const Heart: React.FC<IconProps> = ({fill, filled, size, height, width, ...props}) => {
   return (
     <Icon
       fill={filled ? fill : "none"}
diff --git a/apps/docs/src/components/icons/lock.tsx b/apps/docs/src/components/icons/lock.tsx
index f9c7be10dc..9a059cdd75 100644
--- a/apps/docs/src/components/icons/lock.tsx
+++ b/apps/docs/src/components/icons/lock.tsx
@@ -3,7 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const Lock: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const Lock: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   const {theme} = useTheme();
 
   return (
diff --git a/apps/docs/src/components/icons/microphone-off.tsx b/apps/docs/src/components/icons/microphone-off.tsx
index 49a9259354..114085e6a5 100644
--- a/apps/docs/src/components/icons/microphone-off.tsx
+++ b/apps/docs/src/components/icons/microphone-off.tsx
@@ -3,15 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const MicrophoneOff: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+const MicrophoneOff: React.FC<IconProps> = ({fill, filled, size, height, width, ...props}) => {
   const {theme} = useTheme();
 
   if (filled) {
diff --git a/apps/docs/src/components/icons/microphone.tsx b/apps/docs/src/components/icons/microphone.tsx
index 9aae6b77c1..f6288a3148 100644
--- a/apps/docs/src/components/icons/microphone.tsx
+++ b/apps/docs/src/components/icons/microphone.tsx
@@ -3,7 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const Microphone: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const Microphone: React.FC<IconProps> = ({fill, filled, size, height, width, ...props}) => {
   const {theme} = useTheme();
 
   if (filled) {
diff --git a/apps/docs/src/components/icons/moon.tsx b/apps/docs/src/components/icons/moon.tsx
index f7ee0d38d0..215325c9e9 100644
--- a/apps/docs/src/components/icons/moon.tsx
+++ b/apps/docs/src/components/icons/moon.tsx
@@ -8,7 +8,6 @@ const Moon: React.FC<IconProps> = ({
   size,
   height,
   width,
-  label,
   ...props
 }) => {
   if (filled) {
diff --git a/apps/docs/src/components/icons/next-track.tsx b/apps/docs/src/components/icons/next-track.tsx
index 96d4d3facf..f3a7278e07 100644
--- a/apps/docs/src/components/icons/next-track.tsx
+++ b/apps/docs/src/components/icons/next-track.tsx
@@ -7,7 +7,7 @@ const defaultProps = {
   fill: "currentColor",
 };
 
-const NextTrack: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const NextTrack: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <Icon
       fill="none"
diff --git a/apps/docs/src/components/icons/notification.tsx b/apps/docs/src/components/icons/notification.tsx
index 80f73e3d1d..5792513eae 100644
--- a/apps/docs/src/components/icons/notification.tsx
+++ b/apps/docs/src/components/icons/notification.tsx
@@ -3,15 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const Notification: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+const Notification: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   const {theme} = useTheme();
 
   return (
diff --git a/apps/docs/src/components/icons/palette.tsx b/apps/docs/src/components/icons/palette.tsx
index a3716ffc83..2fa40ec8df 100644
--- a/apps/docs/src/components/icons/palette.tsx
+++ b/apps/docs/src/components/icons/palette.tsx
@@ -3,7 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const Palette: React.FC<IconProps> = ({fill, size, height, width, label, ...props}) => {
+const Palette: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   const {theme} = useTheme();
 
   return (
diff --git a/apps/docs/src/components/icons/play.tsx b/apps/docs/src/components/icons/play.tsx
index 112dcf6260..58c40b85a2 100644
--- a/apps/docs/src/components/icons/play.tsx
+++ b/apps/docs/src/components/icons/play.tsx
@@ -7,7 +7,7 @@ const defaultProps = {
   fill: "#ffffff",
 };
 
-const Play: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const Play: React.FC<IconProps> = ({fill, filled, size, height, width, ...props}) => {
   return (
     <Icon
       fill={filled ? fill : "none"}
diff --git a/apps/docs/src/components/icons/previous-track.tsx b/apps/docs/src/components/icons/previous-track.tsx
index b55d7c066d..e0ca3006f7 100644
--- a/apps/docs/src/components/icons/previous-track.tsx
+++ b/apps/docs/src/components/icons/previous-track.tsx
@@ -7,15 +7,7 @@ const defaultProps = {
   fill: "currentColor",
 };
 
-const PreviousTrack: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+const PreviousTrack: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <Icon
       fill="none"
diff --git a/apps/docs/src/components/icons/rewind5s.tsx b/apps/docs/src/components/icons/rewind5s.tsx
index c6043dfe69..5c44b68fe2 100644
--- a/apps/docs/src/components/icons/rewind5s.tsx
+++ b/apps/docs/src/components/icons/rewind5s.tsx
@@ -7,7 +7,7 @@ const defualtProps = {
   fill: "currentColor",
 };
 
-const Rewind5s: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const Rewind5s: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   return (
     <Icon
       fill="none"
diff --git a/apps/docs/src/components/icons/send.tsx b/apps/docs/src/components/icons/send.tsx
index 76f248fa9c..4b16e8e50d 100644
--- a/apps/docs/src/components/icons/send.tsx
+++ b/apps/docs/src/components/icons/send.tsx
@@ -3,16 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const Send: React.FC<IconProps> = ({
-  fill,
-  filled,
-  size,
-  height,
-  width,
-  label,
-  className,
-  ...props
-}) => {
+const Send: React.FC<IconProps> = ({fill, size, height, width, className, ...props}) => {
   const {theme} = useTheme();
   const color = fill || theme?.colors?.accents3?.value;
 
diff --git a/apps/docs/src/components/icons/sun.tsx b/apps/docs/src/components/icons/sun.tsx
index d997e385be..967f4ac5eb 100644
--- a/apps/docs/src/components/icons/sun.tsx
+++ b/apps/docs/src/components/icons/sun.tsx
@@ -8,7 +8,6 @@ const Sun: React.FC<IconProps> = ({
   size,
   height,
   width,
-  label,
   ...props
 }) => {
   if (filled) {
diff --git a/apps/docs/src/components/icons/unlock.tsx b/apps/docs/src/components/icons/unlock.tsx
index 52f169a067..cfdfd18b33 100644
--- a/apps/docs/src/components/icons/unlock.tsx
+++ b/apps/docs/src/components/icons/unlock.tsx
@@ -3,7 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const Unlock: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const Unlock: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   const {theme} = useTheme();
   const color = fill || theme?.colors?.accents3?.value;
 
diff --git a/apps/docs/src/components/icons/user.tsx b/apps/docs/src/components/icons/user.tsx
index 2bc76504df..3136d781c0 100644
--- a/apps/docs/src/components/icons/user.tsx
+++ b/apps/docs/src/components/icons/user.tsx
@@ -3,7 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const User: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const User: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   const {theme} = useTheme();
 
   return (
diff --git a/apps/docs/src/components/icons/vercel.tsx b/apps/docs/src/components/icons/vercel.tsx
index 8ccab76d4f..3342568479 100644
--- a/apps/docs/src/components/icons/vercel.tsx
+++ b/apps/docs/src/components/icons/vercel.tsx
@@ -19,6 +19,7 @@ const defaultProps = {
 const Vercel: React.FC<Props> = ({fill, width, height, className, ...props}) => {
   return (
     <Icon
+      className={className}
       fill="none"
       height={height}
       viewBox="0 0 4438 1000"
diff --git a/apps/docs/src/components/icons/video-off.tsx b/apps/docs/src/components/icons/video-off.tsx
index a9a2006b50..52a9584d46 100644
--- a/apps/docs/src/components/icons/video-off.tsx
+++ b/apps/docs/src/components/icons/video-off.tsx
@@ -3,7 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const VideoOff: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const VideoOff: React.FC<IconProps> = ({fill, filled, size, height, width, ...props}) => {
   const {theme} = useTheme();
 
   if (filled) {
diff --git a/apps/docs/src/components/icons/volume-up.tsx b/apps/docs/src/components/icons/volume-up.tsx
index 50fa53264c..893e7583e6 100644
--- a/apps/docs/src/components/icons/volume-up.tsx
+++ b/apps/docs/src/components/icons/volume-up.tsx
@@ -3,7 +3,7 @@ import {useTheme} from "@nextui-org/react";
 
 import {IconProps} from "./index";
 
-const VolumeUp: React.FC<IconProps> = ({fill, filled, size, height, width, label, ...props}) => {
+const VolumeUp: React.FC<IconProps> = ({fill, size, height, width, ...props}) => {
   const {theme} = useTheme();
 
   return (
diff --git a/apps/docs/src/components/kbar-wrapper/index.tsx b/apps/docs/src/components/kbar-wrapper/index.tsx
index 0c24e7ce97..c106ebb3a5 100644
--- a/apps/docs/src/components/kbar-wrapper/index.tsx
+++ b/apps/docs/src/components/kbar-wrapper/index.tsx
@@ -1,17 +1,17 @@
-import { KBarProvider } from 'kbar';
-import dynamic from 'next/dynamic';
-import React from 'react';
-import useKbarActions from '@lib/kbar-actions';
+import {KBarProvider} from "kbar";
+import dynamic from "next/dynamic";
+import React from "react";
+import useKbarActions from "@lib/kbar-actions";
 
 type KBARWrapperProps = {
   children?: React.ReactNode;
 };
 
-const KbarComponent = dynamic(() => import('../kbar'), {
-  ssr: false
+const KbarComponent = dynamic(() => import("../kbar"), {
+  ssr: false,
 });
 
-const KBARWrapper: React.FC<KBARWrapperProps> = ({ children }) => {
+const KBARWrapper: React.FC<KBARWrapperProps> = ({children}) => {
   const kbarActions = useKbarActions();
 
   return (
@@ -20,8 +20,8 @@ const KBARWrapper: React.FC<KBARWrapperProps> = ({ children }) => {
       options={{
         animations: {
           enterMs: 250,
-          exitMs: 100
-        }
+          exitMs: 100,
+        },
       }}
     >
       <KbarComponent />
diff --git a/apps/docs/src/components/logo/index.tsx b/apps/docs/src/components/logo/index.tsx
index 642e49b10a..a6ff1ee20c 100644
--- a/apps/docs/src/components/logo/index.tsx
+++ b/apps/docs/src/components/logo/index.tsx
@@ -41,17 +41,7 @@ const StyledLargeLogo = styled("svg", {
   },
 });
 
-const Logo: React.FC<LogoProps> = ({
-  auto,
-  size,
-  width,
-  height,
-  dark,
-  small,
-  css,
-  className,
-  ...props
-}) => {
+const Logo: React.FC<LogoProps> = ({auto, size, width, height, small, css, ...props}) => {
   const Small = () => (
     <StyledSmallLogo
       auto={auto}
diff --git a/apps/docs/src/components/palette/item.tsx b/apps/docs/src/components/palette/item.tsx
index db499f8abb..3a0fc6826f 100644
--- a/apps/docs/src/components/palette/item.tsx
+++ b/apps/docs/src/components/palette/item.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 export type ItemProps = Props & GridProps;
 
-const Item: React.FC<ItemProps> = ({color, title, inverted, textColor, hexColor, ...props}) => {
+const Item: React.FC<ItemProps> = ({color, title, textColor, hexColor, ...props}) => {
   const isGradient = color.includes("gradient");
 
   const {copy} = useClipboard();
diff --git a/packages/react/src/container/container.tsx b/packages/react/src/container/container.tsx
index 7c110fd6c5..8ba64cae51 100644
--- a/packages/react/src/container/container.tsx
+++ b/packages/react/src/container/container.tsx
@@ -1,15 +1,8 @@
-import React, { useMemo } from "react";
-
-import { CSS } from "../theme/stitches.config";
-import { useDOMRef } from "../utils/dom";
-import {
-  Wrap,
-  Display,
-  Justify,
-  Direction,
-  AlignItems,
-  AlignContent,
-} from "../utils/prop-types";
+import React, {useMemo} from "react";
+
+import {CSS} from "../theme/stitches.config";
+import {useDOMRef} from "../utils/dom";
+import {Wrap, Display, Justify, Direction, AlignItems, AlignContent} from "../utils/prop-types";
 
 import StyledContainer from "./container.styles";
 
@@ -50,70 +43,69 @@ type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 
 export type ContainerProps = Props & typeof defaultProps & NativeAttrs;
 
-const Container = React.forwardRef<
-  HTMLElement,
-  React.PropsWithChildren<ContainerProps>
->((containerProps, ref) => {
-  const {
-    xs,
-    sm,
-    md,
-    lg,
-    xl,
-    wrap,
-    gap,
-    as,
-    display,
-    justify,
-    direction,
-    alignItems,
-    alignContent,
-    children,
-    responsive,
-    fluid,
-    css,
-    ...otherProps
-  } = containerProps;
-
-  const domRef = useDOMRef(ref);
-
-  const gapUnit = useMemo(() => {
-    return `calc(${gap} * $space$sm)`;
-  }, [gap]);
-
-  const getMaxWidth = () => {
-    if (xs) return "$breakpoints$xs";
-    if (sm) return "$breakpoints$sm";
-    if (md) return "$breakpoints$md";
-    if (lg) return "$breakpoints$lg";
-    if (xl) return "$breakpoints$xl";
-
-    return "";
-  };
-
-  return (
-    <StyledContainer
-      ref={domRef}
-      as={as}
-      css={{
-        px: gapUnit,
-        maxWidth: getMaxWidth(),
-        alignItems,
-        alignContent,
-        flexWrap: wrap,
-        display: display,
-        justifyContent: justify,
-        flexDirection: direction,
-        ...(css as any),
-      }}
-      fluid={fluid}
-      responsive={responsive}
-      {...otherProps}
-    >
-      {children}
-    </StyledContainer>
-  );
-});
+const Container = React.forwardRef<HTMLElement, React.PropsWithChildren<ContainerProps>>(
+  (containerProps, ref) => {
+    const {
+      xs,
+      sm,
+      md,
+      lg,
+      xl,
+      wrap,
+      gap,
+      as,
+      display,
+      justify,
+      direction,
+      alignItems,
+      alignContent,
+      children,
+      responsive,
+      fluid,
+      css,
+      ...otherProps
+    } = containerProps;
+
+    const domRef = useDOMRef(ref);
+
+    const gapUnit = useMemo(() => {
+      return `calc(${gap} * $space$sm)`;
+    }, [gap]);
+
+    const getMaxWidth = () => {
+      if (xs) return "$breakpoints$xs";
+      if (sm) return "$breakpoints$sm";
+      if (md) return "$breakpoints$md";
+      if (lg) return "$breakpoints$lg";
+      if (xl) return "$breakpoints$xl";
+
+      return "";
+    };
+
+    return (
+      <StyledContainer
+        ref={domRef}
+        as={as}
+        css={{
+          px: gapUnit,
+          maxWidth: getMaxWidth(),
+          alignItems,
+          alignContent,
+          flexWrap: wrap,
+          display: display,
+          justifyContent: justify,
+          flexDirection: direction,
+          ...(css as any),
+        }}
+        fluid={fluid}
+        responsive={responsive}
+        {...otherProps}
+      >
+        {children}
+      </StyledContainer>
+    );
+  },
+);
 
 Container.displayName = "NextUI.Container";
 

From d0029b0b63d5a059cd71ce9cb9f70fbbf10aa3da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=83=9C=EC=9E=AC=EC=98=81?= <tjy970721@gmail.com>
Date: Sat, 16 Jul 2022 00:59:00 +0900
Subject: [PATCH 042/106] fix: active transform based on animated

---
 packages/react/src/switch/switch.styles.ts | 28 +++++++++++++++-------
 packages/react/src/switch/switch.tsx       |  1 +
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/switch/switch.styles.ts b/packages/react/src/switch/switch.styles.ts
index ec2641eb77..feec9cb758 100644
--- a/packages/react/src/switch/switch.styles.ts
+++ b/packages/react/src/switch/switch.styles.ts
@@ -263,14 +263,18 @@ export const StyledSwitchInput = styled(
     [`&:checked + ${StyledSwitch} > ${StyledSwitchCircle}`]: {
       transform: "translateX(calc($$switchWidth - $$switchWidth / 15 - $$switchHeight * 0.7))",
     },
-    [`& + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
-      transform: "translateX(calc($$switchWidth / 7.5))",
-    },
-    [`&:checked + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
-      transform:
-        "translateX(calc($$switchWidth - $$switchWidth / 7.5 - $$switchWidth / 10 - $$switchHeight * 0.7))",
-    },
     variants: {
+      animated: {
+        true: {
+          [`& + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
+            transform: "translateX(calc($$switchWidth / 7.5))",
+          },
+          [`&:checked + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
+            transform:
+              "translateX(calc($$switchWidth - $$switchWidth / 7.5 - $$switchWidth / 10 - $$switchHeight * 0.7))",
+          },
+        },
+      },
       bordered: {
         true: {
           [`& + ${StyledSwitch} > ${StyledSwitchCircle}`]: {
@@ -280,6 +284,14 @@ export const StyledSwitchInput = styled(
             transform:
               "translateX(calc($$switchWidth - $$switchWidth / 15 - $$switchBorderW * 1.5 - $$switchHeight * 0.7))",
           },
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        animated: true,
+        bordered: true,
+        css: {
           [`& + ${StyledSwitch}:active > ${StyledSwitchCircle}`]: {
             transform: "translateX(calc($$switchWidth / 7.5 - $$switchBorderW / 2))",
           },
@@ -289,7 +301,7 @@ export const StyledSwitchInput = styled(
           },
         },
       },
-    },
+    ],
   },
   sharedVisuallyHidden,
 );
diff --git a/packages/react/src/switch/switch.tsx b/packages/react/src/switch/switch.tsx
index b15af495da..d3caee1da9 100644
--- a/packages/react/src/switch/switch.tsx
+++ b/packages/react/src/switch/switch.tsx
@@ -134,6 +134,7 @@ const Switch: React.FC<SwitchProps> = ({
   return (
     <StyledSwitchContainer animated={animated} data-state={getState} disabled={disabled} {...props}>
       <StyledSwitchInput
+        animated={animated}
         bordered={bordered}
         checked={selfChecked}
         className={clsx(`${preClass}-input`)}

From 6f7a908de9a098defd83204f72f86be892dd461c Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 16 Jul 2022 18:01:05 -0300
Subject: [PATCH 043/106] feat(react-navbar): navbar items variants created

---
 apps/docs/content/components/navbar/sticky.ts |   6 +-
 apps/docs/content/docs/manifest.json          |  18 +-
 packages/react/src/link/link.styles.ts        |  18 +-
 .../src/navbar/navbar-content-context.ts      |   9 +
 packages/react/src/navbar/navbar-content.tsx  |  52 ++--
 packages/react/src/navbar/navbar-item.tsx     |  64 ++++-
 packages/react/src/navbar/navbar-link.tsx     |  33 ++-
 packages/react/src/navbar/navbar.stories.tsx  |   6 +-
 packages/react/src/navbar/navbar.styles.ts    | 242 +++++++++++++++++-
 packages/react/src/navbar/navbar.tsx          |  21 +-
 .../react/src/navbar/use-navbar-content.ts    |  72 ++++++
 11 files changed, 465 insertions(+), 76 deletions(-)
 create mode 100644 packages/react/src/navbar/navbar-content-context.ts
 create mode 100644 packages/react/src/navbar/use-navbar-content.ts

diff --git a/apps/docs/content/components/navbar/sticky.ts b/apps/docs/content/components/navbar/sticky.ts
index eb2361b09e..904df0583b 100644
--- a/apps/docs/content/components/navbar/sticky.ts
+++ b/apps/docs/content/components/navbar/sticky.ts
@@ -1,13 +1,15 @@
 import {Layout, Box, AcmeLogo, Content} from "./common";
 
-const App = `import { Navbar } from "@nextui-org/react";
+const App = `import { Navbar, Button, Text, useTheme } from "@nextui-org/react";
 import { Layout } from "./Layout.js";
 import { AcmeLogo } from "./AcmeLogo.js";
 
 export default function App() {
+  const { isDark } = useTheme();
+
   return (
     <Layout>
-      <Navbar variant="sticky">
+      <Navbar isBordered={isDark} variant="sticky">
         <Navbar.Brand>
           <AcmeLogo />
           <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
diff --git a/apps/docs/content/docs/manifest.json b/apps/docs/content/docs/manifest.json
index b8ff2ec8b7..b8fe29e4c5 100644
--- a/apps/docs/content/docs/manifest.json
+++ b/apps/docs/content/docs/manifest.json
@@ -176,9 +176,9 @@
               "path": "/docs/components/progress.mdx"
             },
             {
-              "title": "Badge",
-              "keywords": "badge, status, display, count, highlight",
-              "path": "/docs/components/badge.mdx",
+              "title": "Navbar",
+              "keywords": "navbar, nav, navbar, navigation, menu, header",
+              "path": "/docs/components/navbar.mdx",
               "newPost": true
             },
             {
@@ -195,17 +195,17 @@
               "keywords": "loading, spinner, loadable, progress",
               "path": "/docs/components/loading.mdx"
             },
-            {
-              "title": "Navbar",
-              "keywords": "navbar, nav, navbar, navigation, menu, header",
-              "path": "/docs/components/navbar.mdx",
-              "newPost": true
-            },
             {
               "title": "Switch",
               "keywords": "toggle, switch",
               "path": "/docs/components/switch.mdx"
             },
+            {
+              "title": "Badge",
+              "keywords": "badge, status, display, count, highlight",
+              "path": "/docs/components/badge.mdx",
+              "newPost": true
+            },
             {
               "title": "Text",
               "keywords": "text, txt, paragraph",
diff --git a/packages/react/src/link/link.styles.ts b/packages/react/src/link/link.styles.ts
index c8346cb3d1..90e35c5491 100644
--- a/packages/react/src/link/link.styles.ts
+++ b/packages/react/src/link/link.styles.ts
@@ -11,6 +11,7 @@ export const StyledLinkIcon = styled("svg", {
 export const StyledLink = styled(
   "a",
   {
+    $$linkColor: "$colors$link",
     display: "flex",
     alignItems: "center",
     lineHeight: "inherit",
@@ -20,6 +21,7 @@ export const StyledLink = styled(
     backgroundImage: "inherit",
     backgroundClip: "inherit",
     WebkitTextFillColor: "inherit",
+    color: "$$linkColor",
     outline: "none",
     maxW: "max-content",
     "&:hover": {
@@ -31,28 +33,28 @@ export const StyledLink = styled(
     variants: {
       color: {
         inherit: {
-          color: "inherit",
+          $$linkColor: "inherit",
         },
         default: {
-          color: "$link",
+          $$linkColor: "$colors$link",
         },
         text: {
-          color: "$text",
+          $$linkColor: "$colors$text",
         },
         primary: {
-          color: "$primary",
+          $$linkColor: "$colors$primary",
         },
         secondary: {
-          color: "$secondary",
+          $$linkColor: "$colors$secondary",
         },
         success: {
-          color: "$success",
+          $$linkColor: "$colors$success",
         },
         warning: {
-          color: "$warning",
+          $$linkColor: "$colors$warning",
         },
         error: {
-          color: "$error",
+          $$linkColor: "$colors$error",
         },
       },
       underline: {
diff --git a/packages/react/src/navbar/navbar-content-context.ts b/packages/react/src/navbar/navbar-content-context.ts
new file mode 100644
index 0000000000..f854d96955
--- /dev/null
+++ b/packages/react/src/navbar/navbar-content-context.ts
@@ -0,0 +1,9 @@
+import {createContext} from "../utils/context";
+
+import {UseNavbarContentReturn} from "./use-navbar-content";
+
+export const [NavbarContentProvider, useNavbarContentContext] =
+  createContext<UseNavbarContentReturn>({
+    strict: false,
+    name: "NavbarContentContext",
+  });
diff --git a/packages/react/src/navbar/navbar-content.tsx b/packages/react/src/navbar/navbar-content.tsx
index 8ecf8c5b3a..84b9d89ac0 100644
--- a/packages/react/src/navbar/navbar-content.tsx
+++ b/packages/react/src/navbar/navbar-content.tsx
@@ -1,45 +1,45 @@
 import React from "react";
 
-import {CSSGapUnit, CSSColor} from "../theme";
-import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import {forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
 import {__DEV__} from "../utils/assertion";
 
-import {StyledNavbarContent, NavbarContentVariantsProps} from "./navbar.styles";
+import {NavbarContentProvider} from "./navbar-content-context";
+import {StyledNavbarContent} from "./navbar.styles";
+import {useNavbarContent, UseNavbarContentProps} from "./use-navbar-content";
 
-interface Props extends Omit<HTMLNextUIProps<"ul">, keyof NavbarContentVariantsProps | "color"> {
-  children?: React.ReactNode | React.ReactNode[];
-  /**
-   * The gap between each item. Defaults to `$space$8 = 1rem`.
-   */
-  gap?: CSSGapUnit;
+interface Props {
   /**
-   * The main color of the navbar items.
+   * The content of the Navbar.Content. It is usually the `Navbar.Link` and `Navbar.Item`,
    */
-  color?: CSSColor;
+  children?: React.ReactNode | React.ReactNode[];
 }
 
-export type NavbarContentProps = Props & NavbarContentVariantsProps;
+export type NavbarContentProps = Props & UseNavbarContentProps;
 
 const NavbarContent = forwardRef<NavbarContentProps, "ul">((props, ref) => {
-  const domRef = useDOMRef(ref);
+  const {children, ...otherProps} = props;
+
+  const context = useNavbarContent(otherProps);
 
-  const {children, gap = "$8", color = "inherit", css, className, ...otherProps} = props;
+  const domRef = useDOMRef(ref);
 
   return (
-    <StyledNavbarContent
-      ref={domRef}
-      className={clsx("nextui-navbar-content", className)}
-      css={{
-        gap,
-        color,
-        ...css,
-      }}
-      {...otherProps}
-    >
-      {children}
-    </StyledNavbarContent>
+    <NavbarContentProvider value={context}>
+      <StyledNavbarContent
+        ref={domRef}
+        className={clsx("nextui-navbar-content", context.className)}
+        css={{
+          gap: context.gap,
+          color: context.color,
+          ...context.css,
+        }}
+        {...context.otherProps}
+      >
+        {children}
+      </StyledNavbarContent>
+    </NavbarContentProvider>
   );
 });
 
diff --git a/packages/react/src/navbar/navbar-item.tsx b/packages/react/src/navbar/navbar-item.tsx
index 9ea38d4d51..ae2c6c334f 100644
--- a/packages/react/src/navbar/navbar-item.tsx
+++ b/packages/react/src/navbar/navbar-item.tsx
@@ -1,27 +1,85 @@
-import React from "react";
+import React, {useMemo} from "react";
 
 import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
 import {__DEV__} from "../utils/assertion";
 
+import {useNavbarContentContext} from "./navbar-content-context";
 import {StyledNavbarItem, NavbarItemVariantsProps} from "./navbar.styles";
 
-export interface Props extends Omit<HTMLNextUIProps<"li">, keyof NavbarItemVariantsProps> {
+export interface Props
+  extends Omit<HTMLNextUIProps<"li">, keyof NavbarItemVariantsProps | "color"> {
   children?: React.ReactNode | React.ReactNode[];
 }
 
 export type NavbarItemProps = Props & NavbarItemVariantsProps;
 
 const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
+  const {children, className, variant, activeColor, isActive, underlineHeight, css, ...otherProps} =
+    props;
+
+  const contentProps = useNavbarContentContext();
   const domRef = useDOMRef(ref);
 
-  const {children, className, ...otherProps} = props;
+  const itemVariant = variant || contentProps?.variant;
+
+  const itemCss = useMemo(() => {
+    const customCss = [];
+    const stringVariant = itemVariant?.toString();
+
+    if (!contentProps) {
+      customCss.push({
+        $$navbarContentItemGap: "$space$8",
+      });
+    }
+
+    if (itemVariant && stringVariant.includes?.("highlight")) {
+      customCss.push({
+        dflex: "center",
+        position: "relative",
+        height: "$$navbarItemMaxHeight",
+        px: "$$navbarContentItemHorizontalPadding",
+      });
+    }
+
+    if (
+      itemVariant &&
+      stringVariant.includes?.("highlight") &&
+      stringVariant.includes?.("rounded")
+    ) {
+      customCss.push({
+        "&:before": {
+          borderRadius: "$pill",
+        },
+      });
+    }
+
+    if (isActive && !stringVariant.includes?.("highlight")) {
+      customCss.push({
+        $$navbarItemFontWeight: "$fontWeights$semibold",
+      });
+    }
+
+    const customCssObject = customCss.reduce((acc, css) => {
+      return {...acc, ...css};
+    }, {});
+
+    return {
+      ...customCssObject,
+      ...css,
+    };
+  }, [contentProps, isActive, itemVariant, css]);
 
   return (
     <StyledNavbarItem
       ref={domRef}
+      activeColor={activeColor || contentProps?.activeColor}
       className={clsx("nextui-navbar-item", className)}
+      css={itemCss}
+      isActive={isActive}
+      underlineHeight={underlineHeight || contentProps?.underlineHeight}
+      variant={itemVariant}
       {...otherProps}
     >
       {children}
diff --git a/packages/react/src/navbar/navbar-link.tsx b/packages/react/src/navbar/navbar-link.tsx
index b410a2fa14..9d892dcdb3 100644
--- a/packages/react/src/navbar/navbar-link.tsx
+++ b/packages/react/src/navbar/navbar-link.tsx
@@ -1,6 +1,7 @@
 import React, {useMemo} from "react";
 
 import {forwardRef} from "../utils/system";
+import {CSS} from "../theme/stitches.config";
 import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
 import {__DEV__} from "../utils/assertion";
@@ -8,17 +9,32 @@ import {Link, LinkProps} from "../index";
 
 import NavbarItem, {NavbarItemProps} from "./navbar-item";
 
-export interface NavbarLinkProps extends LinkProps {
-  itemProps?: NavbarItemProps;
+interface Props extends LinkProps {
+  itemCss?: CSS;
+  itemClassName?: string;
 }
 
+export type NavbarLinkProps = Props & Omit<NavbarItemProps, "css" | "className">;
+
 const NavbarLink = forwardRef<NavbarLinkProps, "a">((props, ref) => {
   const domRef = useDOMRef(ref);
 
-  const {children, className, color, css, itemProps, ...otherProps} = props;
+  const {
+    children,
+    isActive,
+    color,
+    activeColor,
+    underlineHeight,
+    itemCss,
+    itemClassName,
+    css,
+    variant,
+    className,
+    ...otherProps
+  } = props;
 
   const linkCss = useMemo(() => {
-    if (color) {
+    if (color || css?.["$$linkColor"]) {
       return {
         ...css,
       };
@@ -31,7 +47,14 @@ const NavbarLink = forwardRef<NavbarLinkProps, "a">((props, ref) => {
   }, [color, css]);
 
   return (
-    <NavbarItem {...itemProps}>
+    <NavbarItem
+      activeColor={activeColor}
+      className={itemClassName}
+      css={itemCss}
+      isActive={isActive}
+      underlineHeight={underlineHeight}
+      variant={variant}
+    >
       <Link
         ref={domRef}
         className={clsx("nextui-navbar-link", className)}
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 18374d4224..9b3e76bfea 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -119,9 +119,11 @@ const DefaultNavbarContent = ({color}: {color?: any}) => (
         ACME
       </Text>
     </Navbar.Brand>
-    <Navbar.Content css={{"@smMax": {d: "none"}}}>
+    <Navbar.Content css={{"@smMax": {d: "none"}}} variant="highlight-rounded">
       <Navbar.Link href="#">Features</Navbar.Link>
-      <Navbar.Link href="#">Customers</Navbar.Link>
+      <Navbar.Link isActive href="#">
+        Customers
+      </Navbar.Link>
       <Navbar.Link href="#">Integrations</Navbar.Link>
       <Navbar.Link href="#">Pricing</Navbar.Link>
       <Navbar.Link href="#">Company</Navbar.Link>
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index f34a3cdf92..d5f8dbb0ad 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -31,11 +31,243 @@ export const StyledNavbarBrand = styled("span", {
 });
 
 export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
-  fontSize: "inherit",
+  $$navbarItemFontSize: "inherit",
+  $$navbarItemFontWeight: "$fontWeights$normal",
+  fontSize: "$$navbarItemFontSize",
+  fontWeight: "$$navbarItemFontWeight",
+  "*": {
+    zIndex: "$2",
+  },
+  "&:before": {
+    opacity: 0,
+    zIndex: "$1",
+    content: '""',
+    display: "block",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: "$sm",
+  },
+  "&:after": {
+    opacity: 0,
+    zIndex: "$1",
+    content: '""',
+    display: "block",
+    position: "absolute",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    height: "$$navbarItemUnderlineHeight",
+    borderRadius: "calc($$navbarItemUnderlineHeight / 2)",
+    background: "$$navbarItemActiveColor",
+  },
+  variants: {
+    activeColor: {
+      default: {
+        $$navbarItemActiveColor: "$colors$link",
+        $$navbarItemHighlightBackgroundColor: "$colors$primaryLight",
+        $$navbarItemHighlightTextColor: "$colors$primaryLightContrast",
+        $$navbarItemHighlightSolidBackgroundColor: "$colors$primary",
+        $$navbarItemHighlightSolidTextColor: "$colors$primarySolidContrast",
+      },
+      neutral: {
+        $$navbarItemActiveColor: "$colors$neutral",
+        $$navbarItemHighlightBackgroundColor: "$colors$neutralLight",
+        $$navbarItemHighlightTextColor: "$colors$text",
+        $$navbarItemHighlightSolidBackgroundColor: "$colors$neutral",
+        $$navbarItemHighlightSolidTextColor: "$colors$neutralSolidContrast",
+      },
+      primary: {
+        $$navbarItemActiveColor: "$colors$primary",
+        $$navbarItemHighlightBackgroundColor: "$colors$primaryLight",
+        $$navbarItemHighlightTextColor: "$colors$primaryLightContrast",
+        $$navbarItemHighlightSolidBackgroundColor: "$colors$primary",
+        $$navbarItemHighlightSolidTextColor: "$colors$primarySolidContrast",
+      },
+      secondary: {
+        $$navbarItemActiveColor: "$colors$secondary",
+        $$navbarItemHighlightBackgroundColor: "$colors$secondaryLight",
+        $$navbarItemHighlightTextColor: "$colors$secondaryLightContrast",
+        $$navbarItemHighlightSolidBackgroundColor: "$colors$secondary",
+        $$navbarItemHighlightSolidTextColor: "$colors$secondarySolidContrast",
+      },
+      success: {
+        $$navbarItemActiveColor: "$colors$success",
+        $$navbarItemHighlightBackgroundColor: "$colors$successLight",
+        $$navbarItemHighlightTextColor: "$colors$successLightContrast",
+        $$navbarItemHighlightSolidBackgroundColor: "$colors$success",
+        $$navbarItemHighlightSolidTextColor: "$colors$successSolidContrast",
+      },
+      warning: {
+        $$navbarItemActiveColor: "$colors$warning",
+        $$navbarItemHighlightBackgroundColor: "$colors$warningLight",
+        $$navbarItemHighlightTextColor: "$colors$warningLightContrast",
+        $$navbarItemHighlightSolidBackgroundColor: "$colors$warning",
+        $$navbarItemHighlightSolidTextColor: "$colors$warningSolidContrast",
+      },
+      error: {
+        $$navbarItemActiveColor: "$colors$error",
+        $$navbarItemHighlightBackgroundColor: "$colors$errorLight",
+        $$navbarItemHighlightTextColor: "$colors$errorLightContrast",
+        $$navbarItemHighlightSolidBackgroundColor: "$colors$error",
+        $$navbarItemHighlightSolidTextColor: "$colors$errorSolidContrast",
+      },
+    },
+    isActive: {
+      true: {
+        color: "$$navbarItemActiveColor",
+      },
+    },
+    variant: {
+      default: {},
+      underline: {
+        color: "inherit",
+        position: "relative",
+        height: "100%",
+      },
+      "underline-squared": {
+        color: "inherit",
+        position: "relative",
+        height: "100%",
+      },
+      highlight: {},
+      "highlight-solid": {},
+      "highlight-rounded": {},
+      "highlight-solid-rounded": {},
+    },
+    underlineHeight: {
+      light: {
+        $$navbarItemUnderlineHeight: "2px",
+      },
+      normal: {
+        $$navbarItemUnderlineHeight: "4px",
+      },
+      bold: {
+        $$navbarItemUnderlineHeight: "6px",
+      },
+      extrabold: {
+        $$navbarItemUnderlineHeight: "8px",
+      },
+      black: {
+        $$navbarItemUnderlineHeight: "10px",
+      },
+    },
+  },
+  compoundVariants: [
+    /**
+     * @isActive true
+     * @variant underline
+     */
+    {
+      isActive: true,
+      variant: "underline",
+      css: {
+        color: "inherit",
+        "&:after": {
+          opacity: 1,
+        },
+      },
+    },
+    /**
+     * @isActive true
+     * @variant underline
+     */
+    {
+      isActive: true,
+      variant: "underline-squared",
+      css: {
+        color: "inherit",
+        "&:after": {
+          opacity: 1,
+          borderRadius: "0px",
+        },
+      },
+    },
+    /**
+     * @isActive true
+     * @variant highlight
+     */
+    {
+      isActive: true,
+      variant: "highlight",
+      css: {
+        color: "$$navbarItemHighlightTextColor",
+        "*:first-child": {
+          color: "inherit",
+        },
+        "&:before": {
+          opacity: 1,
+          background: "$$navbarItemHighlightBackgroundColor",
+        },
+      },
+    },
+    /**
+     * @isActive true
+     * @variant highlight-solid
+     */
+    {
+      isActive: true,
+      variant: "highlight-solid",
+      css: {
+        color: "$$navbarItemHighlightSolidTextColor",
+        "*:first-child": {
+          color: "inherit",
+        },
+        "&:before": {
+          opacity: 1,
+          background: "$$navbarItemHighlightSolidBackgroundColor",
+        },
+      },
+    },
+    /**
+     * @isActive true
+     * @variant highlight-rounded
+     */
+    {
+      isActive: true,
+      variant: "highlight-rounded",
+      css: {
+        color: "$$navbarItemHighlightTextColor",
+        "*:first-child": {
+          color: "inherit",
+        },
+        "&:before": {
+          opacity: 1,
+          background: "$$navbarItemHighlightBackgroundColor",
+        },
+      },
+    },
+    /**
+     * @isActive true
+     * @variant highlight-solid
+     */
+    {
+      isActive: true,
+      variant: "highlight-solid-rounded",
+      css: {
+        color: "$$navbarItemHighlightSolidTextColor",
+        "*:first-child": {
+          color: "inherit",
+        },
+        "&:before": {
+          opacity: 1,
+          background: "$$navbarItemHighlightSolidBackgroundColor",
+        },
+      },
+    },
+  ],
+  defaultVariants: {
+    variant: "default",
+    activeColor: "default",
+    underlineHeight: "normal",
+  },
 });
 
 export const StyledNavbarContent = styled(StyledBaseNavbarList, {
   $$navbarContentItemGap: "$space$8",
+  $$navbarContentItemHorizontalPadding: "$space$8",
   d: "flex",
   height: "100%",
   flexWrap: "nowrap",
@@ -53,9 +285,9 @@ export const StyledNavbarContainer = styled("div", {
   alignItems: "center",
   position: "relative",
   boxSizing: "border-box",
+  color: "inherit",
   px: "$$navbarPadding",
   bg: "$$navbarBackgroundColor",
-  color: "$$navbarTextColor",
   maxW: "$$navbarContainerMaxWidth",
   "@xsMax": {
     $$navbarPadding: "$space$6",
@@ -65,10 +297,11 @@ export const StyledNavbarContainer = styled("div", {
 
 export const StyledNavbar = styled("nav", {
   // variables
+  $$navbarTextColor: "$colors$text",
   $$navbarBackgroundColor: "$colors$background",
   $$navbarBlurBackgroundColor: "$colors$backgroundAlpha",
-  $$navbarTextColor: "$colors$text",
   $$navbarHeight: "76px",
+  $$navbarItemMaxHeight: "calc($$navbarHeight * 0.5)",
   $$navbarBorderColor: "$colors$border",
   $$navbarBorderRadius: "$radii$lg",
   $$navbarPadding: "$space$10",
@@ -81,6 +314,7 @@ export const StyledNavbar = styled("nav", {
   dflex: "center",
   position: "relative",
   height: "auto",
+  color: "$$navbarTextColor",
   variants: {
     variant: {
       static: {
@@ -140,6 +374,7 @@ export const StyledNavbar = styled("nav", {
       true: {
         $$navbarHeight: "54px",
         $$navbarBorderRadius: "$radii$md",
+        $$navbarItemMaxHeight: "calc($$navbarHeight * 0.6)",
       },
     },
     disableShadow: {
@@ -217,5 +452,4 @@ export const StyledNavbar = styled("nav", {
 });
 
 export type NavbarVariantsProps = VariantProps<typeof StyledNavbar>;
-export type NavbarContentVariantsProps = VariantProps<typeof StyledNavbarContent>;
 export type NavbarItemVariantsProps = VariantProps<typeof StyledNavbarItem>;
diff --git a/packages/react/src/navbar/navbar.tsx b/packages/react/src/navbar/navbar.tsx
index d81551edd6..29c55aad1b 100644
--- a/packages/react/src/navbar/navbar.tsx
+++ b/packages/react/src/navbar/navbar.tsx
@@ -16,7 +16,6 @@ import NavbarLink from "./navbar-link";
 
 interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps> {
   children?: React.ReactNode | React.ReactNode[];
-  enableShadowOnlyOnScroll?: boolean;
   containerCss?: CSS;
 }
 
@@ -26,22 +25,12 @@ const Navbar = forwardRef<NavbarProps, "nav">((props, ref) => {
   const {theme, isDark} = useTheme();
   const domRef = useDOMRef(ref);
 
-  const {
-    children,
-    variant = "static",
-    className,
-    css,
-    containerCss,
-    enableShadowOnlyOnScroll = false,
-    ...otherProps
-  } = props;
+  const {children, variant = "static", className, css, containerCss, ...otherProps} = props;
 
   const navbarCss = useMemo(() => {
-    let customCss = {};
-
     if (variant === "floating") {
       // linear gradient behind the navbar
-      customCss = {
+      return {
         bg: `linear-gradient(180deg, ${addColorAlpha(
           theme?.colors?.background?.value,
           0.95,
@@ -49,13 +38,11 @@ const Navbar = forwardRef<NavbarProps, "nav">((props, ref) => {
           theme?.colors?.background?.value,
           0,
         )})`,
+        ...css,
       };
     }
 
-    return {
-      ...customCss,
-      ...css,
-    };
+    return css;
   }, [css, isDark, theme?.colors, variant]);
 
   return (
diff --git a/packages/react/src/navbar/use-navbar-content.ts b/packages/react/src/navbar/use-navbar-content.ts
new file mode 100644
index 0000000000..41ab94172e
--- /dev/null
+++ b/packages/react/src/navbar/use-navbar-content.ts
@@ -0,0 +1,72 @@
+import {useMemo} from "react";
+
+import {CSSGapUnit, CSSColor} from "../theme";
+import {HTMLNextUIProps} from "../utils/system";
+
+import {NavbarItemVariantsProps} from "./navbar.styles";
+
+export interface UseNavbarContentProps extends Omit<HTMLNextUIProps<"ul">, "color"> {
+  /**
+   * The gap between each item
+   * @default "$space$8 = 1rem" and "0px" (for highlight variants)
+   */
+  gap?: CSSGapUnit;
+  /**
+   * The main color of the navbar content items.
+   */
+  color?: CSSColor;
+  /**
+   * The active color of the navbar content items.
+   * @default "$colors$link"
+   */
+  activeColor?: NavbarItemVariantsProps["activeColor"];
+  /**
+   * The height of the navbar content items's underline.
+   * @default "normal = 4px"
+   */
+  underlineHeight?: NavbarItemVariantsProps["underlineHeight"];
+  /**
+   * The variant of the navbar content items.
+   * @default "default"
+   */
+  variant?: NavbarItemVariantsProps["variant"];
+}
+
+/**
+ * @internal
+ */
+export function useNavbarContent(props: UseNavbarContentProps = {}) {
+  const {
+    gap = "$8",
+    color = "inherit",
+    variant = "default",
+    activeColor = "default",
+    underlineHeight = "normal",
+    css,
+    className,
+    ...otherProps
+  } = props;
+
+  const contentGap = useMemo(() => {
+    const stringVariant = variant.toString?.();
+
+    if (stringVariant.includes?.("highlight") && gap === "$8") {
+      return "0px";
+    }
+
+    return gap;
+  }, [variant, gap]);
+
+  return {
+    css,
+    gap: contentGap,
+    color,
+    variant,
+    activeColor,
+    underlineHeight,
+    className,
+    otherProps,
+  };
+}
+
+export type UseNavbarContentReturn = ReturnType<typeof useNavbarContent>;

From 5a50960caf27f02facd1713ad39ff5fcb6915df8 Mon Sep 17 00:00:00 2001
From: Chell <im.chell@outlook.com>
Date: Sun, 17 Jul 2022 09:56:53 +0800
Subject: [PATCH 044/106] change title

---
 apps/docs/content/docs/theme/media.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/content/docs/theme/media.mdx b/apps/docs/content/docs/theme/media.mdx
index 09f7982fdc..071885fc5a 100644
--- a/apps/docs/content/docs/theme/media.mdx
+++ b/apps/docs/content/docs/theme/media.mdx
@@ -4,7 +4,7 @@ description: NextUI provides out of the box [Stitches](https://stitches.dev/docs
 url: https://nextui.org/docs/theme/utilities
 ---
 
-# Utilities
+# Media
 
 NextUI provides a set of reusable set of media queries.
 

From b37b5d300ba24484a83612f86356a0f5bfe181be Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 17 Jul 2022 12:34:19 -0300
Subject: [PATCH 045/106] feat(react-navbar): hihglight cursor added

---
 packages/react/src/navbar/navbar-content.tsx  |  19 ++-
 packages/react/src/navbar/navbar-item.tsx     | 155 ++++++++++++++++--
 packages/react/src/navbar/navbar-link.tsx     |   2 +
 packages/react/src/navbar/navbar.stories.tsx  |  10 +-
 packages/react/src/navbar/navbar.styles.ts    | 150 +++++++++++------
 .../react/src/navbar/use-navbar-content.ts    | 135 ++++++++++++++-
 6 files changed, 395 insertions(+), 76 deletions(-)

diff --git a/packages/react/src/navbar/navbar-content.tsx b/packages/react/src/navbar/navbar-content.tsx
index 84b9d89ac0..ac8a085b4a 100644
--- a/packages/react/src/navbar/navbar-content.tsx
+++ b/packages/react/src/navbar/navbar-content.tsx
@@ -4,9 +4,10 @@ import {forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
 import {__DEV__} from "../utils/assertion";
+import {mergeRefs} from "../utils/refs";
 
 import {NavbarContentProvider} from "./navbar-content-context";
-import {StyledNavbarContent} from "./navbar.styles";
+import {StyledNavbarContent, StyledCursorHighlight} from "./navbar.styles";
 import {useNavbarContent, UseNavbarContentProps} from "./use-navbar-content";
 
 interface Props {
@@ -28,15 +29,29 @@ const NavbarContent = forwardRef<NavbarContentProps, "ul">((props, ref) => {
   return (
     <NavbarContentProvider value={context}>
       <StyledNavbarContent
-        ref={domRef}
+        ref={mergeRefs(context.wrapperRef, domRef)}
         className={clsx("nextui-navbar-content", context.className)}
         css={{
           gap: context.gap,
           color: context.color,
           ...context.css,
         }}
+        enableCursorHighlight={context.enableCursorHighlight}
+        style={context.style}
+        onMouseLeave={context.resetHighlight}
         {...context.otherProps}
       >
+        {context.enableCursorHighlight && (
+          <StyledCursorHighlight
+            ref={context.cursorHighlightRef}
+            className="nextui-navbar-cursor-highlight"
+            color={context.activeColor}
+            css={context.cursorHighlightCss}
+            isHighlightSolidVariant={context.isHighlightSolidVariant}
+            isHighlightVariant={context.isHighlightVariant}
+            isRounded={context.isRounded}
+          />
+        )}
         {children}
       </StyledNavbarContent>
     </NavbarContentProvider>
diff --git a/packages/react/src/navbar/navbar-item.tsx b/packages/react/src/navbar/navbar-item.tsx
index ae2c6c334f..77c8f9add9 100644
--- a/packages/react/src/navbar/navbar-item.tsx
+++ b/packages/react/src/navbar/navbar-item.tsx
@@ -1,4 +1,7 @@
-import React, {useMemo} from "react";
+import React, {useMemo, useEffect} from "react";
+import {useHover} from "@react-aria/interactions";
+import {mergeProps} from "@react-aria/utils";
+import {useId} from "@react-aria/utils";
 
 import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
@@ -11,22 +14,72 @@ import {StyledNavbarItem, NavbarItemVariantsProps} from "./navbar.styles";
 export interface Props
   extends Omit<HTMLNextUIProps<"li">, keyof NavbarItemVariantsProps | "color"> {
   children?: React.ReactNode | React.ReactNode[];
+  isDisabled?: boolean;
 }
 
 export type NavbarItemProps = Props & NavbarItemVariantsProps;
 
 const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
-  const {children, className, variant, activeColor, isActive, underlineHeight, css, ...otherProps} =
-    props;
+  const {
+    id,
+    css,
+    children,
+    variant,
+    activeColor,
+    isActive,
+    underlineHeight,
+    onMouseOver,
+    onMouseLeave,
+    isDisabled,
+    className,
+    ...otherProps
+  } = props;
 
   const contentProps = useNavbarContentContext();
   const domRef = useDOMRef(ref);
 
   const itemVariant = variant || contentProps?.variant;
+  const stringVariant = itemVariant?.toString();
+  const isHighlightVariant = stringVariant.includes?.("highlight");
+  const isHighlightSolidVariant = stringVariant.includes?.("highlight-solid");
+
+  const {hoverProps, isHovered} = useHover({isDisabled});
+  const itemId = useId(id);
+
+  useEffect(() => {
+    if (!domRef.current) {
+      return;
+    }
+    if (contentProps && contentProps?.enableCursorHighlight && isActive && isHighlightVariant) {
+      contentProps.updateActiveItem(domRef?.current);
+    }
+  }, [domRef, isHighlightVariant, isActive]);
+
+  const isActiveAndHighlighted = useMemo(() => {
+    if (!contentProps) {
+      return false;
+    }
+
+    return contentProps.highlightedItem?.id === itemId;
+  }, [itemId, contentProps]);
+
+  const shouldUseActiveTextColor = useMemo(() => {
+    if (
+      !isActiveAndHighlighted &&
+      contentProps?.enableCursorHighlight &&
+      isHighlightSolidVariant &&
+      itemId === contentProps?.activeItem?.id
+    ) {
+      return true;
+    }
+
+    return false;
+  }, [contentProps, itemId, isActiveAndHighlighted, isHighlightSolidVariant]);
 
   const itemCss = useMemo(() => {
     const customCss = [];
-    const stringVariant = itemVariant?.toString();
+    const isStringChildren = typeof children === "string";
+    const isHighlightSolidVariant = stringVariant.includes?.("highlight-solid");
 
     if (!contentProps) {
       customCss.push({
@@ -34,19 +87,30 @@ const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
       });
     }
 
-    if (itemVariant && stringVariant.includes?.("highlight")) {
+    if (isHighlightVariant) {
       customCss.push({
         dflex: "center",
-        position: "relative",
         height: "$$navbarItemMaxHeight",
-        px: "$$navbarContentItemHorizontalPadding",
       });
+
+      if (isStringChildren) {
+        customCss.push({
+          px: "$$navbarContentItemHorizontalPadding",
+        });
+      } else {
+        customCss.push({
+          "*:first-child": {
+            size: "100%",
+            px: "$$navbarContentItemHorizontalPadding",
+          },
+        });
+      }
     }
 
     if (
-      itemVariant &&
-      stringVariant.includes?.("highlight") &&
-      stringVariant.includes?.("rounded")
+      isHighlightVariant &&
+      stringVariant.includes?.("rounded") &&
+      !contentProps.enableCursorHighlight
     ) {
       customCss.push({
         "&:before": {
@@ -55,12 +119,39 @@ const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
       });
     }
 
-    if (isActive && !stringVariant.includes?.("highlight")) {
+    if (contentProps.enableCursorHighlight) {
+      customCss.push({
+        "&:before": {
+          display: "none",
+        },
+      });
+    }
+
+    if (isActive && !isHighlightVariant) {
       customCss.push({
         $$navbarItemFontWeight: "$fontWeights$semibold",
       });
     }
 
+    if (isHovered && contentProps.enableCursorHighlight) {
+      if (isHighlightVariant) {
+        customCss.push({
+          color: "$$navbarItemHighlightTextColor",
+        });
+      }
+      if (isHighlightSolidVariant) {
+        customCss.push({
+          color: "$$navbarItemHighlightSolidTextColor",
+        });
+      }
+    }
+
+    if (shouldUseActiveTextColor) {
+      customCss.push({
+        color: "$$navbarItemActiveColor",
+      });
+    }
+
     const customCssObject = customCss.reduce((acc, css) => {
       return {...acc, ...css};
     }, {});
@@ -69,7 +160,42 @@ const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
       ...customCssObject,
       ...css,
     };
-  }, [contentProps, isActive, itemVariant, css]);
+  }, [
+    children,
+    css,
+    contentProps,
+    stringVariant,
+    shouldUseActiveTextColor,
+    isActive,
+    isHovered,
+    isHighlightVariant,
+  ]);
+
+  const handleOnMouseLeave = (event: React.MouseEvent<HTMLLIElement>) => {
+    if (
+      !contentProps?.resetHighlight ||
+      !contentProps.enableCursorHighlight ||
+      !isHighlightVariant
+    ) {
+      onMouseLeave?.(event);
+
+      return;
+    }
+
+    contentProps.resetHighlight();
+    onMouseLeave?.(event);
+  };
+
+  const handleOnMouseOver = (event: React.MouseEvent<HTMLLIElement>) => {
+    if (!contentProps?.repositionHighlight) {
+      onMouseOver?.(event);
+
+      return;
+    }
+
+    contentProps.repositionHighlight(event, domRef?.current);
+    onMouseOver?.(event);
+  };
 
   return (
     <StyledNavbarItem
@@ -77,10 +203,13 @@ const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
       activeColor={activeColor || contentProps?.activeColor}
       className={clsx("nextui-navbar-item", className)}
       css={itemCss}
+      id={itemId}
       isActive={isActive}
       underlineHeight={underlineHeight || contentProps?.underlineHeight}
       variant={itemVariant}
-      {...otherProps}
+      onMouseLeave={handleOnMouseLeave}
+      onMouseOver={handleOnMouseOver}
+      {...mergeProps(hoverProps, otherProps)}
     >
       {children}
     </StyledNavbarItem>
diff --git a/packages/react/src/navbar/navbar-link.tsx b/packages/react/src/navbar/navbar-link.tsx
index 9d892dcdb3..2219fd3baa 100644
--- a/packages/react/src/navbar/navbar-link.tsx
+++ b/packages/react/src/navbar/navbar-link.tsx
@@ -27,6 +27,7 @@ const NavbarLink = forwardRef<NavbarLinkProps, "a">((props, ref) => {
     underlineHeight,
     itemCss,
     itemClassName,
+    isDisabled,
     css,
     variant,
     className,
@@ -52,6 +53,7 @@ const NavbarLink = forwardRef<NavbarLinkProps, "a">((props, ref) => {
       className={itemClassName}
       css={itemCss}
       isActive={isActive}
+      isDisabled={isDisabled}
       underlineHeight={underlineHeight}
       variant={variant}
     >
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 9b3e76bfea..41589cddab 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -119,7 +119,13 @@ const DefaultNavbarContent = ({color}: {color?: any}) => (
         ACME
       </Text>
     </Navbar.Brand>
-    <Navbar.Content css={{"@smMax": {d: "none"}}} variant="highlight-rounded">
+    <Navbar.Content
+      enableCursorHighlight
+      activeColor="warning"
+      css={{"@smMax": {d: "none"}}}
+      underlineHeight="light"
+      variant="highlight"
+    >
       <Navbar.Link href="#">Features</Navbar.Link>
       <Navbar.Link isActive href="#">
         Customers
@@ -167,7 +173,7 @@ export const Static = () => (
 
 export const Sticky = () => (
   <App>
-    <Navbar variant="sticky">
+    <Navbar isBordered isCompact variant="sticky">
       <DefaultNavbarContent />
     </Navbar>
   </App>
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index d5f8dbb0ad..76b2508294 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -1,5 +1,57 @@
 import {styled, VariantProps} from "../theme/stitches.config";
 
+const itemColors = {
+  default: {
+    $$navbarItemActiveColor: "$colors$link",
+    $$navbarItemHighlightBackgroundColor: "$colors$primaryLight",
+    $$navbarItemHighlightTextColor: "$colors$primaryLightContrast",
+    $$navbarItemHighlightSolidBackgroundColor: "$colors$primary",
+    $$navbarItemHighlightSolidTextColor: "$colors$primarySolidContrast",
+  },
+  neutral: {
+    $$navbarItemActiveColor: "$colors$neutral",
+    $$navbarItemHighlightBackgroundColor: "$colors$neutralLight",
+    $$navbarItemHighlightTextColor: "$colors$text",
+    $$navbarItemHighlightSolidBackgroundColor: "$colors$neutral",
+    $$navbarItemHighlightSolidTextColor: "$colors$neutralSolidContrast",
+  },
+  primary: {
+    $$navbarItemActiveColor: "$colors$primary",
+    $$navbarItemHighlightBackgroundColor: "$colors$primaryLight",
+    $$navbarItemHighlightTextColor: "$colors$primaryLightContrast",
+    $$navbarItemHighlightSolidBackgroundColor: "$colors$primary",
+    $$navbarItemHighlightSolidTextColor: "$colors$primarySolidContrast",
+  },
+  secondary: {
+    $$navbarItemActiveColor: "$colors$secondary",
+    $$navbarItemHighlightBackgroundColor: "$colors$secondaryLight",
+    $$navbarItemHighlightTextColor: "$colors$secondaryLightContrast",
+    $$navbarItemHighlightSolidBackgroundColor: "$colors$secondary",
+    $$navbarItemHighlightSolidTextColor: "$colors$secondarySolidContrast",
+  },
+  success: {
+    $$navbarItemActiveColor: "$colors$success",
+    $$navbarItemHighlightBackgroundColor: "$colors$successLight",
+    $$navbarItemHighlightTextColor: "$colors$successLightContrast",
+    $$navbarItemHighlightSolidBackgroundColor: "$colors$success",
+    $$navbarItemHighlightSolidTextColor: "$colors$successSolidContrast",
+  },
+  warning: {
+    $$navbarItemActiveColor: "$colors$warning",
+    $$navbarItemHighlightBackgroundColor: "$colors$warningLight",
+    $$navbarItemHighlightTextColor: "$colors$warningLightContrast",
+    $$navbarItemHighlightSolidBackgroundColor: "$colors$warning",
+    $$navbarItemHighlightSolidTextColor: "$colors$warningSolidContrast",
+  },
+  error: {
+    $$navbarItemActiveColor: "$colors$error",
+    $$navbarItemHighlightBackgroundColor: "$colors$errorLight",
+    $$navbarItemHighlightTextColor: "$colors$errorLightContrast",
+    $$navbarItemHighlightSolidBackgroundColor: "$colors$error",
+    $$navbarItemHighlightSolidTextColor: "$colors$errorSolidContrast",
+  },
+};
+
 export const StyledBaseNavbarItem = styled("li", {
   mb: 0,
   display: "flex",
@@ -35,6 +87,7 @@ export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
   $$navbarItemFontWeight: "$fontWeights$normal",
   fontSize: "$$navbarItemFontSize",
   fontWeight: "$$navbarItemFontWeight",
+  position: "relative",
   "*": {
     zIndex: "$2",
   },
@@ -64,67 +117,17 @@ export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
     background: "$$navbarItemActiveColor",
   },
   variants: {
-    activeColor: {
-      default: {
-        $$navbarItemActiveColor: "$colors$link",
-        $$navbarItemHighlightBackgroundColor: "$colors$primaryLight",
-        $$navbarItemHighlightTextColor: "$colors$primaryLightContrast",
-        $$navbarItemHighlightSolidBackgroundColor: "$colors$primary",
-        $$navbarItemHighlightSolidTextColor: "$colors$primarySolidContrast",
-      },
-      neutral: {
-        $$navbarItemActiveColor: "$colors$neutral",
-        $$navbarItemHighlightBackgroundColor: "$colors$neutralLight",
-        $$navbarItemHighlightTextColor: "$colors$text",
-        $$navbarItemHighlightSolidBackgroundColor: "$colors$neutral",
-        $$navbarItemHighlightSolidTextColor: "$colors$neutralSolidContrast",
-      },
-      primary: {
-        $$navbarItemActiveColor: "$colors$primary",
-        $$navbarItemHighlightBackgroundColor: "$colors$primaryLight",
-        $$navbarItemHighlightTextColor: "$colors$primaryLightContrast",
-        $$navbarItemHighlightSolidBackgroundColor: "$colors$primary",
-        $$navbarItemHighlightSolidTextColor: "$colors$primarySolidContrast",
-      },
-      secondary: {
-        $$navbarItemActiveColor: "$colors$secondary",
-        $$navbarItemHighlightBackgroundColor: "$colors$secondaryLight",
-        $$navbarItemHighlightTextColor: "$colors$secondaryLightContrast",
-        $$navbarItemHighlightSolidBackgroundColor: "$colors$secondary",
-        $$navbarItemHighlightSolidTextColor: "$colors$secondarySolidContrast",
-      },
-      success: {
-        $$navbarItemActiveColor: "$colors$success",
-        $$navbarItemHighlightBackgroundColor: "$colors$successLight",
-        $$navbarItemHighlightTextColor: "$colors$successLightContrast",
-        $$navbarItemHighlightSolidBackgroundColor: "$colors$success",
-        $$navbarItemHighlightSolidTextColor: "$colors$successSolidContrast",
-      },
-      warning: {
-        $$navbarItemActiveColor: "$colors$warning",
-        $$navbarItemHighlightBackgroundColor: "$colors$warningLight",
-        $$navbarItemHighlightTextColor: "$colors$warningLightContrast",
-        $$navbarItemHighlightSolidBackgroundColor: "$colors$warning",
-        $$navbarItemHighlightSolidTextColor: "$colors$warningSolidContrast",
-      },
-      error: {
-        $$navbarItemActiveColor: "$colors$error",
-        $$navbarItemHighlightBackgroundColor: "$colors$errorLight",
-        $$navbarItemHighlightTextColor: "$colors$errorLightContrast",
-        $$navbarItemHighlightSolidBackgroundColor: "$colors$error",
-        $$navbarItemHighlightSolidTextColor: "$colors$errorSolidContrast",
-      },
-    },
+    activeColor: itemColors,
     isActive: {
       true: {
         color: "$$navbarItemActiveColor",
+        $$navbarItemFontWeight: "$fontWeights$semibold",
       },
     },
     variant: {
       default: {},
       underline: {
         color: "inherit",
-        position: "relative",
         height: "100%",
       },
       "underline-squared": {
@@ -154,6 +157,12 @@ export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
         $$navbarItemUnderlineHeight: "10px",
       },
     },
+    isDisabled: {
+      true: {
+        opacity: 0.5,
+        cursor: "not-allowed",
+      },
+    },
   },
   compoundVariants: [
     /**
@@ -265,6 +274,34 @@ export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
   },
 });
 
+// @internal
+export const StyledCursorHighlight = styled(StyledBaseNavbarItem, {
+  position: "absolute",
+  top: "calc(50% - $$navbarItemMaxHeight * 0.5)",
+  height: "$$navbarItemMaxHeight",
+  background: "$neutralLight",
+  borderRadius: "$sm",
+  transition: "width 0.2s ease 0s, transform 0.2s ease 0s, opacity 0.2s ease 0s",
+  variants: {
+    color: itemColors,
+    isHighlightVariant: {
+      true: {
+        background: "$$navbarItemHighlightBackgroundColor",
+      },
+    },
+    isHighlightSolidVariant: {
+      true: {
+        background: "$$navbarItemHighlightSolidBackgroundColor",
+      },
+    },
+    isRounded: {
+      true: {
+        borderRadius: "$pill",
+      },
+    },
+  },
+});
+
 export const StyledNavbarContent = styled(StyledBaseNavbarList, {
   $$navbarContentItemGap: "$space$8",
   $$navbarContentItemHorizontalPadding: "$space$8",
@@ -273,6 +310,14 @@ export const StyledNavbarContent = styled(StyledBaseNavbarList, {
   flexWrap: "nowrap",
   alignItems: "center",
   gap: "$$navbarContentItemGap",
+  variants: {
+    enableCursorHighlight: {
+      true: {
+        zIndex: "$2",
+        position: "relative",
+      },
+    },
+  },
 });
 
 export const StyledNavbarContainer = styled("div", {
@@ -452,4 +497,5 @@ export const StyledNavbar = styled("nav", {
 });
 
 export type NavbarVariantsProps = VariantProps<typeof StyledNavbar>;
+export type NavbarContentVariantsProps = VariantProps<typeof StyledNavbarContent>;
 export type NavbarItemVariantsProps = VariantProps<typeof StyledNavbarItem>;
diff --git a/packages/react/src/navbar/use-navbar-content.ts b/packages/react/src/navbar/use-navbar-content.ts
index 41ab94172e..7efd958bf2 100644
--- a/packages/react/src/navbar/use-navbar-content.ts
+++ b/packages/react/src/navbar/use-navbar-content.ts
@@ -1,11 +1,12 @@
-import {useMemo} from "react";
+import {useMemo, useState, useRef} from "react";
+import {mergeProps} from "@react-aria/utils";
 
 import {CSSGapUnit, CSSColor} from "../theme";
 import {HTMLNextUIProps} from "../utils/system";
 
-import {NavbarItemVariantsProps} from "./navbar.styles";
+import {NavbarItemVariantsProps, NavbarContentVariantsProps} from "./navbar.styles";
 
-export interface UseNavbarContentProps extends Omit<HTMLNextUIProps<"ul">, "color"> {
+interface Props extends Omit<HTMLNextUIProps<"ul">, "color"> {
   /**
    * The gap between each item
    * @default "$space$8 = 1rem" and "0px" (for highlight variants)
@@ -32,6 +33,8 @@ export interface UseNavbarContentProps extends Omit<HTMLNextUIProps<"ul">, "colo
   variant?: NavbarItemVariantsProps["variant"];
 }
 
+export type UseNavbarContentProps = Props & NavbarContentVariantsProps;
+
 /**
  * @internal
  */
@@ -42,20 +45,125 @@ export function useNavbarContent(props: UseNavbarContentProps = {}) {
     variant = "default",
     activeColor = "default",
     underlineHeight = "normal",
+    enableCursorHighlight = false,
     css,
+    style,
     className,
     ...otherProps
   } = props;
 
-  const contentGap = useMemo(() => {
-    const stringVariant = variant.toString?.();
+  const [itemBoundingBox, setItemBoundingBox] = useState<DOMRect | undefined | null>(null);
+  const [wrapperBoundingBox, setWrapperBoundingBox] = useState<DOMRect | undefined | null>(null);
+  const [highlightedItem, setHighlightedItem] = useState<HTMLElement | null>(null);
+  const [activeItem, setActiveItem] = useState<HTMLElement | null>(null);
+  const [isHoveredFromNull, setIsHoveredFromNull] = useState(true);
+
+  const cursorHighlightRef = useRef<HTMLLIElement>(null);
+  const wrapperRef = useRef<HTMLUListElement>(null);
+
+  const stringVariant = variant?.toString?.();
+  const isHighlightVariant = stringVariant.includes?.("highlight");
+  const isHighlightSolidVariant = stringVariant.includes?.("highlight-solid");
+  const isRounded = stringVariant.includes?.("rounded");
 
-    if (stringVariant.includes?.("highlight") && gap === "$8") {
+  const contentGap = useMemo(() => {
+    if (isHighlightVariant && gap === "$8") {
       return "0px";
     }
 
     return gap;
-  }, [variant, gap]);
+  }, [isHighlightVariant, gap]);
+
+  const transitionDurationValue = useMemo(
+    () => (isHoveredFromNull ? "0ms" : "200ms"),
+    [isHoveredFromNull],
+  );
+
+  const opacityValue = useMemo(
+    () => (highlightedItem || activeItem ? 1 : 0),
+    [activeItem, highlightedItem],
+  );
+
+  const widthValue = useMemo(() => {
+    if (!itemBoundingBox) {
+      return "0px";
+    }
+
+    if (isHighlightVariant) {
+      return `${itemBoundingBox.width}px`;
+    }
+
+    return `calc(${itemBoundingBox.width}px + var(--nextui--navbarContentItemHorizontalPadding))`;
+  }, [stringVariant, itemBoundingBox]);
+
+  const transformValue = useMemo(
+    () =>
+      itemBoundingBox &&
+      wrapperBoundingBox &&
+      `translate(${itemBoundingBox.left - wrapperBoundingBox.left}px)`,
+    [itemBoundingBox, wrapperBoundingBox],
+  );
+
+  const leftValue = useMemo(() => {
+    if (isHighlightVariant) {
+      return "0px";
+    }
+
+    return "calc(var(--nextui--navbarContentItemHorizontalPadding) * 0.5 * -1)";
+  }, [isHighlightVariant]);
+
+  const contentStyle = useMemo(() => {
+    return mergeProps(
+      {
+        "--nextui--transitionDuration": transitionDurationValue,
+        "--nextui--opacity": opacityValue,
+        "--nextui--width": widthValue,
+        "--nextui--transform": transformValue,
+        "--nextui--left": leftValue,
+      },
+      style || {},
+    );
+  }, [transitionDurationValue, leftValue, opacityValue, widthValue, transformValue, style]);
+
+  const cursorHighlightCss = useMemo(() => {
+    if (itemBoundingBox && wrapperBoundingBox && enableCursorHighlight) {
+      return {
+        transitionDuration: "var(--nextui--transitionDuration)",
+        opacity: "var(--nextui--opacity)",
+        width: "var(--nextui--width)",
+        transform: "var(--nextui--transform)",
+        left: "var(--nextui--left)",
+      };
+    }
+
+    return {};
+  }, [itemBoundingBox, wrapperBoundingBox, enableCursorHighlight]);
+
+  const repositionHighlight = (event: React.MouseEvent<HTMLElement>, item: HTMLElement) => {
+    if (!(event?.target instanceof Element)) return;
+
+    setItemBoundingBox(event.target?.getBoundingClientRect?.());
+    setWrapperBoundingBox(wrapperRef.current?.getBoundingClientRect?.());
+    setIsHoveredFromNull(!highlightedItem);
+    setHighlightedItem(item);
+  };
+
+  const resetHighlight = () => {
+    if (!activeItem) {
+      setHighlightedItem(null);
+
+      return;
+    }
+    setHighlightedItem(activeItem);
+    setItemBoundingBox(activeItem?.getBoundingClientRect?.());
+  };
+
+  const updateActiveItem = (item: HTMLElement) => {
+    setActiveItem(item);
+    setHighlightedItem(item);
+    setItemBoundingBox(item?.getBoundingClientRect?.());
+    setWrapperBoundingBox(wrapperRef.current?.getBoundingClientRect?.());
+  };
 
   return {
     css,
@@ -63,8 +171,21 @@ export function useNavbarContent(props: UseNavbarContentProps = {}) {
     color,
     variant,
     activeColor,
+    activeItem,
+    updateActiveItem,
+    highlightedItem,
     underlineHeight,
+    cursorHighlightRef,
+    isRounded,
+    isHighlightVariant,
+    isHighlightSolidVariant,
+    enableCursorHighlight,
+    cursorHighlightCss,
+    repositionHighlight,
+    resetHighlight,
+    wrapperRef,
     className,
+    style: contentStyle,
     otherProps,
   };
 }

From f5b4a98f46ebc5f68082b2302d6d7b564ef5d916 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 17 Jul 2022 17:47:16 -0300
Subject: [PATCH 046/106] feat(react-navbar): cusro highlight and items width
 improve

---
 packages/react/src/navbar/navbar-item.tsx     |  4 ++--
 packages/react/src/navbar/navbar.stories.tsx  |  7 +++----
 packages/react/src/navbar/navbar.styles.ts    | 13 ++++++-------
 .../react/src/navbar/use-navbar-content.ts    | 19 +++++++++++++++----
 4 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/navbar/navbar-item.tsx b/packages/react/src/navbar/navbar-item.tsx
index 77c8f9add9..ff2d6dd05e 100644
--- a/packages/react/src/navbar/navbar-item.tsx
+++ b/packages/react/src/navbar/navbar-item.tsx
@@ -95,13 +95,13 @@ const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
 
       if (isStringChildren) {
         customCss.push({
-          px: "$$navbarContentItemHorizontalPadding",
+          px: "calc($$navbarContentItemHorizontalPadding * 0.5)",
         });
       } else {
         customCss.push({
           "*:first-child": {
             size: "100%",
-            px: "$$navbarContentItemHorizontalPadding",
+            px: "calc($$navbarContentItemHorizontalPadding * 0.5)",
           },
         });
       }
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 41589cddab..5f1287007c 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -121,10 +121,9 @@ const DefaultNavbarContent = ({color}: {color?: any}) => (
     </Navbar.Brand>
     <Navbar.Content
       enableCursorHighlight
-      activeColor="warning"
+      isCursorHighlightRounded
+      activeColor={color}
       css={{"@smMax": {d: "none"}}}
-      underlineHeight="light"
-      variant="highlight"
     >
       <Navbar.Link href="#">Features</Navbar.Link>
       <Navbar.Link isActive href="#">
@@ -173,7 +172,7 @@ export const Static = () => (
 
 export const Sticky = () => (
   <App>
-    <Navbar isBordered isCompact variant="sticky">
+    <Navbar isBordered variant="sticky">
       <DefaultNavbarContent />
     </Navbar>
   </App>
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index 76b2508294..a863f9d198 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -113,7 +113,7 @@ export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
     right: "0",
     bottom: "0",
     height: "$$navbarItemUnderlineHeight",
-    borderRadius: "calc($$navbarItemUnderlineHeight / 2)",
+    borderRadius: "0px",
     background: "$$navbarItemActiveColor",
   },
   variants: {
@@ -130,9 +130,8 @@ export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
         color: "inherit",
         height: "100%",
       },
-      "underline-squared": {
+      "underline-rounded": {
         color: "inherit",
-        position: "relative",
         height: "100%",
       },
       highlight: {},
@@ -185,12 +184,12 @@ export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
      */
     {
       isActive: true,
-      variant: "underline-squared",
+      variant: "underline-rounded",
       css: {
         color: "inherit",
         "&:after": {
           opacity: 1,
-          borderRadius: "0px",
+          borderRadius: "calc($$navbarItemUnderlineHeight / 2)",
         },
       },
     },
@@ -303,8 +302,8 @@ export const StyledCursorHighlight = styled(StyledBaseNavbarItem, {
 });
 
 export const StyledNavbarContent = styled(StyledBaseNavbarList, {
-  $$navbarContentItemGap: "$space$8",
-  $$navbarContentItemHorizontalPadding: "$space$8",
+  $$navbarContentItemGap: "$space$10",
+  $$navbarContentItemHorizontalPadding: "$space$10",
   d: "flex",
   height: "100%",
   flexWrap: "nowrap",
diff --git a/packages/react/src/navbar/use-navbar-content.ts b/packages/react/src/navbar/use-navbar-content.ts
index 7efd958bf2..e718260c95 100644
--- a/packages/react/src/navbar/use-navbar-content.ts
+++ b/packages/react/src/navbar/use-navbar-content.ts
@@ -9,7 +9,7 @@ import {NavbarItemVariantsProps, NavbarContentVariantsProps} from "./navbar.styl
 interface Props extends Omit<HTMLNextUIProps<"ul">, "color"> {
   /**
    * The gap between each item
-   * @default "$space$8 = 1rem" and "0px" (for highlight variants)
+   * @default "$space$10 = 1.5rem" and "0px" (for highlight variants)
    */
   gap?: CSSGapUnit;
   /**
@@ -26,6 +26,12 @@ interface Props extends Omit<HTMLNextUIProps<"ul">, "color"> {
    * @default "normal = 4px"
    */
   underlineHeight?: NavbarItemVariantsProps["underlineHeight"];
+
+  /**
+   * Whether the navbar content highlighted cursor should be rounded.
+   * @default "false"
+   */
+  isCursorHighlightRounded?: boolean;
   /**
    * The variant of the navbar content items.
    * @default "default"
@@ -40,12 +46,13 @@ export type UseNavbarContentProps = Props & NavbarContentVariantsProps;
  */
 export function useNavbarContent(props: UseNavbarContentProps = {}) {
   const {
-    gap = "$8",
+    gap = "$10",
     color = "inherit",
     variant = "default",
     activeColor = "default",
     underlineHeight = "normal",
     enableCursorHighlight = false,
+    isCursorHighlightRounded = false,
     css,
     style,
     className,
@@ -64,10 +71,13 @@ export function useNavbarContent(props: UseNavbarContentProps = {}) {
   const stringVariant = variant?.toString?.();
   const isHighlightVariant = stringVariant.includes?.("highlight");
   const isHighlightSolidVariant = stringVariant.includes?.("highlight-solid");
-  const isRounded = stringVariant.includes?.("rounded");
+
+  const isRounded = useMemo(() => {
+    return isCursorHighlightRounded || stringVariant.includes?.("rounded");
+  }, [isCursorHighlightRounded, stringVariant]);
 
   const contentGap = useMemo(() => {
-    if (isHighlightVariant && gap === "$8") {
+    if (isHighlightVariant && gap === "$10") {
       return "0px";
     }
 
@@ -179,6 +189,7 @@ export function useNavbarContent(props: UseNavbarContentProps = {}) {
     isRounded,
     isHighlightVariant,
     isHighlightSolidVariant,
+    isCursorHighlightRounded,
     enableCursorHighlight,
     cursorHighlightCss,
     repositionHighlight,

From e30d1f69519f693f3e8cc3dd1ba531d802281511 Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Tue, 19 Jul 2022 20:12:13 +0300
Subject: [PATCH 047/106] Fix typo

---
 apps/docs/content/docs/components/table.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx
index 1b0af2bf4d..dc119faf8e 100644
--- a/apps/docs/content/docs/components/table.mdx
+++ b/apps/docs/content/docs/components/table.mdx
@@ -112,7 +112,7 @@ import { Table } from '@nextui-org/react';
 />
 
 <Playground
-  title="Infinty Pagination"
+  title="Infinity Pagination"
   desc="Table supports loading data asynchronously, and will display a progress loading set by the loadingState prop. 
   It also supports infinite scrolling to load more data on demand as the user scrolls, via the `onLoadMore` prop."
   highlightedLines="38-40"

From bb516546bb817abe175335fb0117eaa1fa37a3f4 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Tue, 19 Jul 2022 22:13:19 -0300
Subject: [PATCH 048/106] feat(react-navbar): hide on scroll implemented

---
 packages/react/src/index.ts                   |  3 +
 packages/react/src/navbar/navbar.stories.tsx  | 48 +++++++++----
 packages/react/src/navbar/navbar.tsx          | 71 +++++++++++++++++--
 .../react/src/use-scroll-position/index.ts    |  3 +
 .../use-scroll-position.ts                    | 65 +++++++++++++++++
 5 files changed, 168 insertions(+), 22 deletions(-)
 create mode 100644 packages/react/src/use-scroll-position/index.ts
 create mode 100644 packages/react/src/use-scroll-position/use-scroll-position.ts

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 598785239c..b9088a3e59 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -17,6 +17,9 @@ export {default as useClickAnywhere} from "./use-click-anywhere";
 export {default as useInput} from "./use-input";
 export {default as useKeyboard} from "./use-keyboard";
 export {default as usePagination} from "./use-pagination";
+export {default as useScrollPosition} from "./use-scroll-position";
+
+// miscs & types
 export {default as useDrip} from "./use-drip";
 export {default as Drip} from "./utils/drip";
 export type {PaginationParams} from "./use-pagination";
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 5f1287007c..78c16f2e7c 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -124,6 +124,7 @@ const DefaultNavbarContent = ({color}: {color?: any}) => (
       isCursorHighlightRounded
       activeColor={color}
       css={{"@smMax": {d: "none"}}}
+      variant="highlight"
     >
       <Navbar.Link href="#">Features</Navbar.Link>
       <Navbar.Link isActive href="#">
@@ -146,21 +147,26 @@ const DefaultNavbarContent = ({color}: {color?: any}) => (
   </>
 );
 
-const App = ({children}: any) => (
-  <Box
-    css={{
-      maxW: "920px",
-      maxHeight: "600px",
-      overflow: "visible scroll",
-      boxShadow: "$md",
-      position: "relative",
-      border: "1px solid $colors$border",
-    }}
-  >
-    {children}
-    <DefaultPageContent />
-  </Box>
-);
+const App = React.forwardRef(({children}: any, ref: any) => {
+  return (
+    <Box
+      ref={ref}
+      css={{
+        maxW: "920px",
+        maxHeight: "600px",
+        overflow: "visible scroll",
+        boxShadow: "$md",
+        position: "relative",
+        border: "1px solid $colors$border",
+      }}
+    >
+      {children}
+      <DefaultPageContent />
+    </Box>
+  );
+});
+
+App.displayName = "App";
 
 export const Static = () => (
   <App>
@@ -185,3 +191,15 @@ export const Floating = () => (
     </Navbar>
   </App>
 );
+
+export const HideOnScroll = () => {
+  const parentRef = React.useRef(null);
+
+  return (
+    <App ref={parentRef}>
+      <Navbar isBordered shouldHideOnScroll parentRef={parentRef} variant="floating">
+        <DefaultNavbarContent />
+      </Navbar>
+    </App>
+  );
+};
diff --git a/packages/react/src/navbar/navbar.tsx b/packages/react/src/navbar/navbar.tsx
index 29c55aad1b..df0402d1ff 100644
--- a/packages/react/src/navbar/navbar.tsx
+++ b/packages/react/src/navbar/navbar.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo} from "react";
+import React, {useMemo, useState} from "react";
 
 import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
@@ -7,6 +7,7 @@ import {CSS} from "../theme/stitches.config";
 import useTheme from "../use-theme";
 import {addColorAlpha} from "../utils/color";
 import {__DEV__} from "../utils/assertion";
+import useScrollPosition from "../use-scroll-position";
 
 import {StyledNavbar, StyledNavbarContainer, NavbarVariantsProps} from "./navbar.styles";
 import NavbarBrand from "./navbar-brand";
@@ -16,21 +17,60 @@ import NavbarLink from "./navbar-link";
 
 interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps> {
   children?: React.ReactNode | React.ReactNode[];
+  /**
+   * Whether the navbar should hide on scroll or not.
+   * @default false
+   */
+  shouldHideOnScroll?: boolean;
+  /**
+   * The parent element where the navbar is placed within.
+   * This is used to determine the scroll position and whether the navbar should be hidden or not.
+   * @default `window`
+   */
+  parentRef?: React.RefObject<HTMLElement>;
+  /**
+   * The css object of the navbar container.
+   */
   containerCss?: CSS;
 }
 
 export type NavbarProps = Props & NavbarVariantsProps;
 
 const Navbar = forwardRef<NavbarProps, "nav">((props, ref) => {
+  const {
+    children,
+    variant = "static",
+    className,
+    css,
+    containerCss,
+    parentRef,
+    shouldHideOnScroll = false,
+    ...otherProps
+  } = props;
+
+  const [sticky, setSticky] = useState(false);
+
   const {theme, isDark} = useTheme();
   const domRef = useDOMRef(ref);
 
-  const {children, variant = "static", className, css, containerCss, ...otherProps} = props;
+  useScrollPosition({
+    elementRef: parentRef,
+    enabled: shouldHideOnScroll,
+    callback: ({prevPos, currPos}) => {
+      setSticky((prevSticky) => {
+        const next = currPos.y > prevPos.y;
+
+        return next !== prevSticky ? next : prevSticky;
+      });
+    },
+  });
 
   const navbarCss = useMemo(() => {
+    const customCss = [];
+
     if (variant === "floating") {
       // linear gradient behind the navbar
-      return {
+      customCss.push({
         bg: `linear-gradient(180deg, ${addColorAlpha(
           theme?.colors?.background?.value,
           0.95,
@@ -38,12 +78,29 @@ const Navbar = forwardRef<NavbarProps, "nav">((props, ref) => {
           theme?.colors?.background?.value,
           0,
         )})`,
-        ...css,
-      };
+      });
     }
 
-    return css;
-  }, [css, isDark, theme?.colors, variant]);
+    if (shouldHideOnScroll) {
+      customCss.push({
+        position: "sticky",
+        top: 0,
+        right: 0,
+        left: 0,
+        transform: sticky ? "translateY(-100%)" : "translateY(0)",
+        transition: "transform 400ms ease",
+      });
+    }
+
+    const customCssObject = customCss.reduce((acc, css) => {
+      return {...acc, ...css};
+    }, {});
+
+    return {
+      ...customCssObject,
+      ...css,
+    };
+  }, [css, isDark, theme?.colors, variant, shouldHideOnScroll, sticky]);
 
   return (
     <StyledNavbar
diff --git a/packages/react/src/use-scroll-position/index.ts b/packages/react/src/use-scroll-position/index.ts
new file mode 100644
index 0000000000..7eb8169036
--- /dev/null
+++ b/packages/react/src/use-scroll-position/index.ts
@@ -0,0 +1,3 @@
+import useScrollPosition from "./use-scroll-position";
+
+export default useScrollPosition;
diff --git a/packages/react/src/use-scroll-position/use-scroll-position.ts b/packages/react/src/use-scroll-position/use-scroll-position.ts
new file mode 100644
index 0000000000..62f164484c
--- /dev/null
+++ b/packages/react/src/use-scroll-position/use-scroll-position.ts
@@ -0,0 +1,65 @@
+import {useRef, useEffect} from "react";
+
+const isBrowser = typeof window !== "undefined";
+
+export type ScrollValue = {x: any; y: any};
+
+function getScrollPosition(element: HTMLElement | undefined | null): ScrollValue {
+  if (!isBrowser) return {x: 0, y: 0};
+
+  if (!element) {
+    return {x: window.scrollX, y: window.scrollY};
+  }
+
+  return {x: element.scrollLeft, y: element.scrollTop};
+}
+
+export interface UseScrollPositionOptions {
+  wait?: number;
+  enabled?: boolean;
+  elementRef?: React.RefObject<HTMLElement> | null;
+  callback?: ({prevPos, currPos}: {prevPos: ScrollValue; currPos: ScrollValue}) => void;
+}
+
+const useScrollPosition = (props: UseScrollPositionOptions): ScrollValue => {
+  const {elementRef, wait = 30, callback, enabled} = props;
+
+  const position = useRef<ScrollValue>(getScrollPosition(elementRef?.current));
+
+  let throttleTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const handler = () => {
+    const currPos = getScrollPosition(elementRef?.current);
+
+    if (typeof callback === "function") {
+      callback({prevPos: position.current, currPos});
+    }
+
+    position.current = currPos;
+    throttleTimeout = null;
+  };
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleScroll = () => {
+      if (wait) {
+        if (throttleTimeout === null) {
+          throttleTimeout = setTimeout(handler, wait);
+        }
+      } else {
+        handler();
+      }
+    };
+
+    const target = elementRef?.current || window;
+
+    target.addEventListener("scroll", handleScroll);
+
+    return () => target.removeEventListener("scroll", handleScroll);
+  }, [elementRef?.current, wait, enabled]);
+
+  return position.current;
+};
+
+export default useScrollPosition;

From b97ca64a18608c28a114eec49a45960343b65196 Mon Sep 17 00:00:00 2001
From: Prince <72256357+chainerprince@users.noreply.github.com>
Date: Wed, 20 Jul 2022 23:34:59 +0200
Subject: [PATCH 049/106] docs: fix grammar in loading docs

The property color should be changed to color property.
---
 apps/docs/content/docs/components/loading.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/content/docs/components/loading.mdx b/apps/docs/content/docs/components/loading.mdx
index 572f0d8dc5..a3675a8df5 100644
--- a/apps/docs/content/docs/components/loading.mdx
+++ b/apps/docs/content/docs/components/loading.mdx
@@ -42,7 +42,7 @@ import { Loading } from '@nextui-org/react';
 
 <Playground
   title="Colors"
-  desc="You can change the color of the `loading` with the property color."
+  desc="You can change the color of the `loading` with the color property."
   files={loadingContent.color}
 />
 

From a94cef76bd8662b266e8982a6f66603176e8b1db Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Fri, 22 Jul 2022 00:07:29 -0300
Subject: [PATCH 050/106] feat(react-navbar): navbar collapse in progress

---
 packages/react/src/navbar/index.ts            |   4 +
 packages/react/src/navbar/navbar-context.tsx  |   8 +
 packages/react/src/navbar/navbar-item.tsx     |   5 +-
 packages/react/src/navbar/navbar-list.tsx     |  72 +++++++++
 .../react/src/navbar/navbar-toggle-icon.tsx   |  42 ++++++
 packages/react/src/navbar/navbar-toggle.tsx   |  66 +++++++++
 packages/react/src/navbar/navbar.stories.tsx  | 134 ++++++++++-------
 packages/react/src/navbar/navbar.styles.ts    | 139 ++++++++++++++++++
 packages/react/src/navbar/navbar.tsx          | 131 ++++-------------
 packages/react/src/navbar/use-navbar.ts       | 115 +++++++++++++++
 .../src/use-body-scroll/use-body-scroll.ts    |   2 +-
 packages/react/src/use-portal/use-portal.ts   |   4 +-
 .../use-scroll-position.ts                    |   5 +-
 packages/react/src/utils/object.ts            |  13 ++
 packages/react/src/utils/system.ts            |   5 +-
 15 files changed, 581 insertions(+), 164 deletions(-)
 create mode 100644 packages/react/src/navbar/navbar-context.tsx
 create mode 100644 packages/react/src/navbar/navbar-list.tsx
 create mode 100644 packages/react/src/navbar/navbar-toggle-icon.tsx
 create mode 100644 packages/react/src/navbar/navbar-toggle.tsx
 create mode 100644 packages/react/src/navbar/use-navbar.ts

diff --git a/packages/react/src/navbar/index.ts b/packages/react/src/navbar/index.ts
index 4b480c289f..344bc00f95 100644
--- a/packages/react/src/navbar/index.ts
+++ b/packages/react/src/navbar/index.ts
@@ -2,11 +2,15 @@ import NavbarBrand from "./navbar-brand";
 import NavbarContent from "./navbar-content";
 import NavbarItem from "./navbar-item";
 import NavbarLink from "./navbar-link";
+import NavbarToggle from "./navbar-toggle";
+import NavbarList from "./navbar-list";
 import Navbar from "./navbar";
 
 Navbar.Brand = NavbarBrand;
 Navbar.Content = NavbarContent;
 Navbar.Item = NavbarItem;
 Navbar.Link = NavbarLink;
+Navbar.Toggle = NavbarToggle;
+Navbar.List = NavbarList;
 
 export default Navbar;
diff --git a/packages/react/src/navbar/navbar-context.tsx b/packages/react/src/navbar/navbar-context.tsx
new file mode 100644
index 0000000000..6c8009cd3c
--- /dev/null
+++ b/packages/react/src/navbar/navbar-context.tsx
@@ -0,0 +1,8 @@
+import {createContext} from "../utils/context";
+
+import {UseNavbarReturn} from "./use-navbar";
+
+export const [NavbarProvider, useNavbarContext] = createContext<UseNavbarReturn>({
+  strict: false,
+  name: "NavbarContext",
+});
diff --git a/packages/react/src/navbar/navbar-item.tsx b/packages/react/src/navbar/navbar-item.tsx
index ff2d6dd05e..3fc26c23df 100644
--- a/packages/react/src/navbar/navbar-item.tsx
+++ b/packages/react/src/navbar/navbar-item.tsx
@@ -5,6 +5,7 @@ import {useId} from "@react-aria/utils";
 
 import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
+import {arrayToObject} from "../utils/object";
 import clsx from "../utils/clsx";
 import {__DEV__} from "../utils/assertion";
 
@@ -152,9 +153,7 @@ const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
       });
     }
 
-    const customCssObject = customCss.reduce((acc, css) => {
-      return {...acc, ...css};
-    }, {});
+    const customCssObject = arrayToObject(customCss);
 
     return {
       ...customCssObject,
diff --git a/packages/react/src/navbar/navbar-list.tsx b/packages/react/src/navbar/navbar-list.tsx
new file mode 100644
index 0000000000..c1e2c1953c
--- /dev/null
+++ b/packages/react/src/navbar/navbar-list.tsx
@@ -0,0 +1,72 @@
+import React, {useEffect} from "react";
+import {createPortal} from "react-dom";
+
+import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import {useDOMRef} from "../utils/dom";
+import clsx from "../utils/clsx";
+import usePortal from "../use-portal";
+import useBodyScroll from "../use-body-scroll";
+import {__DEV__} from "../utils/assertion";
+
+import {useNavbarContext} from "./navbar-context";
+import {
+  StyledNavbarList,
+  StyledNavbarListWrapper,
+  StyledNavbarListItem,
+  NavbarListVariantsProps,
+} from "./navbar.styles";
+
+interface Props extends HTMLNextUIProps<"ul"> {
+  portalName?: string;
+}
+
+export type NavbarListProps = Props & NavbarListVariantsProps;
+
+const NavbarList = forwardRef<NavbarListProps, "button">((props, ref) => {
+  const {children, className, portalName = "nextui-navbar-list", ...otherProps} = props;
+
+  const context = useNavbarContext();
+  const portal = usePortal(portalName, () => context.parentRef?.current);
+  const domRef = useDOMRef(ref);
+
+  const [, setBodyHidden] = useBodyScroll(context.parentRef, {scrollLayer: true});
+
+  useEffect(() => {
+    setBodyHidden(context.isListOpen);
+  }, [context.isListOpen]);
+
+  const items = ["Store", "Mac", "iPad", "iPhone", "Watch", "TV & Home", "Music", "Support"];
+
+  const contents = (
+    <StyledNavbarList
+      ref={domRef}
+      className={clsx("nextui-navbar-list", className)}
+      isOpen={context.isListOpen}
+      {...otherProps}
+    >
+      <StyledNavbarListWrapper>
+        {children}
+        {items.map((item, index) => (
+          <StyledNavbarListItem
+            key={index}
+            css={{
+              $$navbarListItemPosition: index,
+            }}
+          >
+            {item}
+          </StyledNavbarListItem>
+        ))}
+      </StyledNavbarListWrapper>
+    </StyledNavbarList>
+  );
+
+  return portal ? createPortal(contents, portal) : null;
+});
+
+if (__DEV__) {
+  NavbarList.displayName = "NextUI.NavbarList";
+}
+
+NavbarList.toString = () => ".nextui-navbar-list";
+
+export default NavbarList;
diff --git a/packages/react/src/navbar/navbar-toggle-icon.tsx b/packages/react/src/navbar/navbar-toggle-icon.tsx
new file mode 100644
index 0000000000..38d2f6e56a
--- /dev/null
+++ b/packages/react/src/navbar/navbar-toggle-icon.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+import {HTMLNextUIProps} from "../utils/system";
+import {__DEV__} from "../utils/assertion";
+import clsx from "../utils/clsx";
+
+import {
+  StyledNavbarToggleIconContainer,
+  NavbarToggleIconContainerVariantsProps,
+} from "./navbar.styles";
+
+interface Props
+  extends Omit<HTMLNextUIProps<"span">, keyof NavbarToggleIconContainerVariantsProps> {
+  isExpanded?: boolean;
+}
+
+export type NavbarToggleIconProps = Props & NavbarToggleIconContainerVariantsProps;
+
+const NavbarToggleIcon: React.FC<NavbarToggleIconProps> = (props) => {
+  const {isExpanded = false, className, ...otherProps} = props;
+
+  return (
+    <StyledNavbarToggleIconContainer
+      aria-hidden={true}
+      className={clsx("nextui-navbar-toggle-icon", className)}
+      isExpanded={isExpanded}
+      tabIndex={-1}
+      {...otherProps}
+    >
+      <span className="line top" />
+      <span className="line bottom" />
+    </StyledNavbarToggleIconContainer>
+  );
+};
+
+if (__DEV__) {
+  NavbarToggleIcon.displayName = "NextUI.NavbarToggleIcon";
+}
+
+NavbarToggleIcon.toString = () => ".nextui-navbar-toggle-icon";
+
+export default NavbarToggleIcon;
diff --git a/packages/react/src/navbar/navbar-toggle.tsx b/packages/react/src/navbar/navbar-toggle.tsx
new file mode 100644
index 0000000000..7e6defb5dc
--- /dev/null
+++ b/packages/react/src/navbar/navbar-toggle.tsx
@@ -0,0 +1,66 @@
+import type {ToggleProps} from "@react-types/checkbox";
+import type {AriaToggleButtonProps} from "@react-types/button";
+
+import React, {useMemo} from "react";
+import {useToggleButton} from "@react-aria/button";
+import {useToggleState} from "@react-stately/toggle";
+import {useFocusRing} from "@react-aria/focus";
+import {mergeProps} from "@react-aria/utils";
+
+import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import {useDOMRef} from "../utils/dom";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+
+import {useNavbarContext} from "./navbar-context";
+import {StyledNavbarToggle, NavbarToggleVariantsProps} from "./navbar.styles";
+import NavbarToggleIcon from "./navbar-toggle-icon";
+
+interface Props extends HTMLNextUIProps<"button"> {}
+
+export type NavbarToggleProps = Props &
+  AriaToggleButtonProps &
+  ToggleProps &
+  NavbarToggleVariantsProps;
+
+const NavbarToggle = forwardRef<NavbarToggleProps, "button">((props, ref) => {
+  const {children, className, autoFocus, onChange, as, css} = props;
+
+  const {setIsListOpen} = useNavbarContext();
+
+  const handleChange = (isOpen: boolean) => {
+    setIsListOpen(isOpen);
+    onChange?.(isOpen);
+  };
+
+  const domRef = useDOMRef(ref);
+  const state = useToggleState({...props, onChange: handleChange});
+  const {buttonProps, isPressed} = useToggleButton(props, state, domRef);
+  const {isFocusVisible, focusProps} = useFocusRing({autoFocus});
+
+  const child = useMemo(() => {
+    return children || <NavbarToggleIcon isExpanded={state.isSelected} />;
+  }, [children, state.isSelected]);
+
+  return (
+    <StyledNavbarToggle
+      ref={domRef}
+      as={as}
+      className={clsx("nextui-navbar-toggle", className)}
+      css={css}
+      isFocusVisible={isFocusVisible}
+      isPressed={isPressed}
+      {...mergeProps(buttonProps, focusProps)}
+    >
+      {child}
+    </StyledNavbarToggle>
+  );
+});
+
+if (__DEV__) {
+  NavbarToggle.displayName = "NextUI.NavbarToggle";
+}
+
+NavbarToggle.toString = () => ".nextui-navbar-toggle";
+
+export default NavbarToggle;
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 78c16f2e7c..181cabdb8d 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import {Meta} from "@storybook/react";
 
-import {Link, Text, Button, Spacer} from "../index";
+import {Link, Text, Button, Spacer, Grid} from "../index";
 import {styled} from "../theme/stitches.config";
 
 import Navbar from "./index";
@@ -36,8 +36,18 @@ const Box = styled("div", {
 });
 
 const DefaultPageContent = () => (
-  <Box css={{px: "$12", mt: "$8", "@xsMax": {px: "$10"}}}>
-    <Text h2>Lorem ipsum dolor sit amet</Text>
+  <Box
+    css={{
+      px: "$12",
+      mt: "$8",
+      height: "600px",
+      position: "relative",
+      "@xsMax": {
+        px: "$10",
+      },
+    }}
+  >
+    <Text h2>Lorem ipsum dolor sit ame</Text>
     <Text size="$xl">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
       labore et dolore magna aliqua. Purus gravida quis blandit turpis. Augue neque gravida in
@@ -47,67 +57,36 @@ const DefaultPageContent = () => (
     </Text>
     <Spacer y={1} />
     <Text size="$xl">
-      Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent semper feugiat nibh
-      sed pulvinar. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Malesuada
-      proin libero nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. Sed viverra
-      tellus in hac habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue neque
-      gravida in.
-    </Text>
-    <Spacer y={1} />
-    <Text size="$xl">
-      Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum fusce ut placerat.
-      Erat velit scelerisque in dictum non. Tempus quam pellentesque nec nam aliquam sem et tortor
-      consequat. Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel
-      pharetra vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu nisl nunc mi
-      ipsum faucibus. Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi etiam
-      dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit gravida rutrum quisque non
-      tellus orci ac.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Purus gravida quis blandit turpis. Augue neque gravida in
+      fermentum et sollicitudin ac orci. Et sollicitudin ac orci phasellus egestas. Elementum tempus
+      egestas sed sed risus pretium quam vulputate. Interdum velit euismod in pellentesque massa
+      placerat duis ultricies.
     </Text>
     <Spacer y={1} />
     <Text size="$xl">
-      Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. In pellentesque massa placerat
-      duis ultricies. Sit amet massa vitae tortor condimentum. Morbi tincidunt augue interdum velit
-      euismod. Aliquet enim tortor at auctor urna nunc id. A scelerisque purus semper eget. Vitae
-      justo eget magna fermentum iaculis. Arcu non odio euismod lacinia at quis. Et leo duis ut diam
-      quam nulla porttitor massa. Eget nunc scelerisque viverra mauris. Suscipit tellus mauris a
-      diam maecenas sed enim. Cras sed felis eget velit aliquet. Est placerat in egestas erat
-      imperdiet sed euismod nisi porta. In ante metus dictum at tempor commodo. In cursus turpis
-      massa tincidunt dui ut ornare lectus. Tempus iaculis urna id volutpat. Iaculis eu non diam
-      phasellus vestibulum lorem sed risus.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Purus gravida quis blandit turpis. Augue neque gravida in
+      fermentum et sollicitudin ac orci. Et sollicitudin ac orci phasellus egestas. Elementum tempus
+      egestas sed sed risus pretium quam vulputate. Interdum velit euismod in pellentesque massa
+      placerat duis ultricies.
     </Text>
     <Spacer y={1} />
     <Text size="$xl">
-      Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel. Imperdiet massa tincidunt
-      nunc pulvinar sapien et ligula ullamcorper malesuada. Faucibus pulvinar elementum integer enim
-      neque volutpat. Gravida arcu ac tortor dignissim convallis aenean. Lectus quam id leo in
-      vitae. Ultricies tristique nulla aliquet enim tortor. Nec tincidunt praesent semper feugiat
-      nibh sed. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Praesent semper
-      feugiat nibh sed pulvinar proin gravida. Dis parturient montes nascetur ridiculus mus mauris.
-      Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Ut lectus arcu bibendum at.
-      Integer enim neque volutpat ac. Diam sit amet nisl suscipit. Eros donec ac odio tempor orci
-      dapibus ultrices in iaculis. Ullamcorper a lacus vestibulum sed arcu non odio euismod. Quis
-      lectus nulla at volutpat diam ut. Turpis egestas integer eget aliquet. Adipiscing tristique
-      risus nec feugiat in fermentum posuere. Morbi tempus iaculis urna id. Amet commodo nulla
-      facilisi nullam vehicula ipsum a arcu.
-    </Text>
-    <Text size="$xl">
-      Rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui. Praesent semper feugiat nibh
-      sed pulvinar. Ultrices gravida dictum fusce ut placerat orci nulla pellentesque. Malesuada
-      proin libero nunc consequat interdum varius sit amet. Lectus quam id leo in vitae. Sed viverra
-      tellus in hac habitasse platea dictumst. Vivamus at augue eget arcu. Augue mauris augue neque
-      gravida in.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Purus gravida quis blandit turpis. Augue neque gravida in
+      fermentum et sollicitudin ac orci. Et sollicitudin ac orci phasellus egestas. Elementum tempus
+      egestas sed sed risus pretium quam vulputate. Interdum velit euismod in pellentesque massa
+      placerat duis ultricies.
     </Text>
     <Spacer y={1} />
     <Text size="$xl">
-      Tincidunt vitae semper quis lectus nulla at volutpat diam. Gravida dictum fusce ut placerat.
-      Erat velit scelerisque in dictum non. Tempus quam pellentesque nec nam aliquam sem et tortor
-      consequat. Eu nisl nunc mi ipsum faucibus. Cras fermentum odio eu feugiat pretium nibh. Vel
-      pharetra vel turpis nunc eget lorem dolor sed viverra. Sollicitudin tempor id eu nisl nunc mi
-      ipsum faucibus. Sed id semper risus in hendrerit gravida rutrum. Eget nulla facilisi etiam
-      dignissim. Erat imperdiet sed euismod nisi. Risus in hendrerit gravida rutrum quisque non
-      tellus orci ac.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Purus gravida quis blandit turpis. Augue neque gravida in
+      fermentum et sollicitudin ac orci. Et sollicitudin ac orci phasellus egestas. Elementum tempus
+      egestas sed sed risus pretium quam vulputate. Interdum velit euismod in pellentesque massa
+      placerat duis ultricies.
     </Text>
-    <Spacer y={1} />
   </Box>
 );
 
@@ -123,7 +102,7 @@ const DefaultNavbarContent = ({color}: {color?: any}) => (
       enableCursorHighlight
       isCursorHighlightRounded
       activeColor={color}
-      css={{"@smMax": {d: "none"}}}
+      hideIn="sm"
       variant="highlight"
     >
       <Navbar.Link href="#">Features</Navbar.Link>
@@ -203,3 +182,48 @@ export const HideOnScroll = () => {
     </App>
   );
 };
+
+export const Toggle = () => {
+  const parentRef = React.useRef(null);
+
+  return (
+    <App ref={parentRef}>
+      <Navbar isBordered parentRef={parentRef} variant="sticky">
+        <Navbar.Content>
+          <Navbar.Toggle aria-label="toggle navigation" />
+          <Navbar.Brand>
+            <AcmeLogo />
+            <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+              ACME
+            </Text>
+          </Navbar.Brand>
+        </Navbar.Content>
+        <Navbar.Content
+          enableCursorHighlight
+          isCursorHighlightRounded
+          hideIn="sm"
+          variant="underline"
+        >
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
+          <Navbar.Link href="#">Integrations</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+        <Navbar.List />
+      </Navbar>
+    </App>
+  );
+};
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index a863f9d198..b74f2ddc57 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -1,4 +1,5 @@
 import {styled, VariantProps} from "../theme/stitches.config";
+import {cssFocusVisible} from "../theme/shared-css";
 
 const itemColors = {
   default: {
@@ -69,6 +70,112 @@ export const StyledBaseNavbarList = styled("ul", {
   },
 });
 
+export const StyledNavbarListItem = styled(StyledBaseNavbarItem, {
+  opacity: 0,
+  transform: "translateY(calc((40px + $$navbarListItemPosition * 10px) * -1))",
+  pb: "20px",
+  transition:
+    "opacity .3s cubic-bezier(0.32, 0.08, 0.24, 1) .03s, transform .4s cubic-bezier(0.32, 0.08, 0.24, 1) .02s",
+});
+
+export const StyledNavbarList = styled("div", {
+  $$navbarListColor: "$colors$text",
+  $$navbarListBackgroundColor: "$colors$background",
+  $$navbarListBlurBackgroundColor: "$colors$backgroundAlpha",
+  $$navbarListBlur: "20px",
+  position: "absolute",
+  background: "$$navbarListBackgroundColor",
+  width: "100%",
+  height: "0px",
+  top: "76px",
+  zIndex: "$10",
+  willChange: "height",
+  overflowY: "scroll",
+  userSelect: "none",
+  transition: "height 400ms cubic-bezier(0.52, 0.16, 0.24, 1) 0s",
+  variants: {
+    isOpen: {
+      true: {
+        height: "100%",
+        [`${StyledNavbarListItem}`]: {
+          opacity: 1,
+          transform: "translateY(0px)",
+        },
+      },
+    },
+    disableBlur: {
+      false: {
+        "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
+          bg: "$$navbarListBlurBackgroundColor",
+          backdropFilter: "saturate(180%) blur($$navbarListBlur)",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    disableBlur: "false",
+  },
+});
+
+export const StyledNavbarListWrapper = styled(StyledBaseNavbarList, {
+  p: "$8 $8 0 $8",
+  height: "100%",
+});
+
+export const StyledNavbarToggleIconContainer = styled("div", {
+  dflex: "center",
+  flexDirection: "column",
+  pointerEvents: "none",
+  size: "22px",
+  "& .line": {
+    height: "1px",
+    width: "100%",
+    backgroundColor: "$$navbarTextColor",
+    transition: "transform 0.3s ease",
+    "&.top": {
+      transform: "translateY(-4px) rotate(0deg)",
+    },
+    "&.bottom": {
+      transform: "translateY(4px) rotate(0deg)",
+    },
+  },
+  variants: {
+    isExpanded: {
+      true: {
+        "& .line": {
+          "&.top": {
+            transform: "translateY(1px) rotate(45deg)",
+          },
+          "&.bottom": {
+            transform: "translateY(0px) rotate(-45deg)",
+          },
+        },
+      },
+    },
+  },
+});
+
+export const StyledNavbarToggle = styled(
+  "button",
+  {
+    // reset button styles
+    appearance: "none",
+    background: "transparent",
+    border: "none",
+    cursor: "pointer",
+    p: "$2",
+    transition: "box-shadow 0.25s ease 0s, opacity 0.25s ease 0s",
+    variants: {
+      isPressed: {
+        true: {
+          opacity: 0.7,
+        },
+      },
+    },
+  },
+  cssFocusVisible,
+);
+
 export const StyledNavbarBrand = styled("span", {
   display: "flex",
   flexWrap: "nowrap",
@@ -310,6 +417,33 @@ export const StyledNavbarContent = styled(StyledBaseNavbarList, {
   alignItems: "center",
   gap: "$$navbarContentItemGap",
   variants: {
+    hideIn: {
+      xs: {
+        "@xsMax": {
+          display: "none",
+        },
+      },
+      sm: {
+        "@smMax": {
+          display: "none",
+        },
+      },
+      md: {
+        "@mdMax": {
+          display: "none",
+        },
+      },
+      lg: {
+        "@lgMax": {
+          display: "none",
+        },
+      },
+      xl: {
+        "@xlMax": {
+          display: "none",
+        },
+      },
+    },
     enableCursorHighlight: {
       true: {
         zIndex: "$2",
@@ -498,3 +632,8 @@ export const StyledNavbar = styled("nav", {
 export type NavbarVariantsProps = VariantProps<typeof StyledNavbar>;
 export type NavbarContentVariantsProps = VariantProps<typeof StyledNavbarContent>;
 export type NavbarItemVariantsProps = VariantProps<typeof StyledNavbarItem>;
+export type NavbarToggleVariantsProps = VariantProps<typeof StyledNavbarToggle>;
+export type NavbarToggleIconContainerVariantsProps = VariantProps<
+  typeof StyledNavbarToggleIconContainer
+>;
+export type NavbarListVariantsProps = VariantProps<typeof StyledNavbarList>;
diff --git a/packages/react/src/navbar/navbar.tsx b/packages/react/src/navbar/navbar.tsx
index df0402d1ff..680e54418b 100644
--- a/packages/react/src/navbar/navbar.tsx
+++ b/packages/react/src/navbar/navbar.tsx
@@ -1,119 +1,46 @@
-import React, {useMemo, useState} from "react";
+import type {RefAttributes, PropsWithoutRef} from "react";
 
-import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import React from "react";
+
+import {forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
-import {CSS} from "../theme/stitches.config";
-import useTheme from "../use-theme";
-import {addColorAlpha} from "../utils/color";
 import {__DEV__} from "../utils/assertion";
-import useScrollPosition from "../use-scroll-position";
 
-import {StyledNavbar, StyledNavbarContainer, NavbarVariantsProps} from "./navbar.styles";
 import NavbarBrand from "./navbar-brand";
 import NavbarContent from "./navbar-content";
 import NavbarItem from "./navbar-item";
 import NavbarLink from "./navbar-link";
+import NavbarToggle from "./navbar-toggle";
+import NavbarList from "./navbar-list";
+import {NavbarProvider} from "./navbar-context";
+import {useNavbar, UseNavbarProps} from "./use-navbar";
+import {StyledNavbar, StyledNavbarContainer} from "./navbar.styles";
 
-interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps> {
+export interface NavbarProps extends UseNavbarProps {
   children?: React.ReactNode | React.ReactNode[];
-  /**
-   * Whether the navbar should hide on scroll or not.
-   * @default false
-   */
-  shouldHideOnScroll?: boolean;
-  /**
-   * The parent element where the navbar is placed within.
-   * This is used to determine the scroll position and whether the navbar should be hidden or not.
-   * @default `window`
-   */
-  parentRef?: React.RefObject<HTMLElement>;
-  /**
-   * The css object of the navbar container.
-   */
-  containerCss?: CSS;
 }
 
-export type NavbarProps = Props & NavbarVariantsProps;
-
 const Navbar = forwardRef<NavbarProps, "nav">((props, ref) => {
-  const {
-    children,
-    variant = "static",
-    className,
-    css,
-    containerCss,
-    parentRef,
-    shouldHideOnScroll = false,
-    ...otherProps
-  } = props;
-
-  const [sticky, setSticky] = useState(false);
+  const {children, ...otherProps} = props;
 
-  const {theme, isDark} = useTheme();
+  const context = useNavbar(otherProps);
   const domRef = useDOMRef(ref);
 
-  useScrollPosition({
-    elementRef: parentRef,
-    enabled: shouldHideOnScroll,
-    callback: ({prevPos, currPos}) => {
-      setSticky((prevSticky) => {
-        const next = currPos.y > prevPos.y;
-
-        return next !== prevSticky ? next : prevSticky;
-      });
-    },
-  });
-
-  const navbarCss = useMemo(() => {
-    const customCss = [];
-
-    if (variant === "floating") {
-      // linear gradient behind the navbar
-      customCss.push({
-        bg: `linear-gradient(180deg, ${addColorAlpha(
-          theme?.colors?.background?.value,
-          0.95,
-        )} 44%, ${addColorAlpha(theme?.colors?.background?.value, 0.46)} 73%, ${addColorAlpha(
-          theme?.colors?.background?.value,
-          0,
-        )})`,
-      });
-    }
-
-    if (shouldHideOnScroll) {
-      customCss.push({
-        position: "sticky",
-        top: 0,
-        right: 0,
-        left: 0,
-        transform: sticky ? "translateY(-100%)" : "translateY(0)",
-        transition: "transform 400ms ease",
-      });
-    }
-
-    const customCssObject = customCss.reduce((acc, css) => {
-      return {...acc, ...css};
-    }, {});
-
-    return {
-      ...customCssObject,
-      ...css,
-    };
-  }, [css, isDark, theme?.colors, variant, shouldHideOnScroll, sticky]);
-
   return (
-    <StyledNavbar
-      ref={domRef}
-      className={clsx("nextui-navbar", className)}
-      css={navbarCss}
-      variant={variant}
-      {...otherProps}
-    >
-      <StyledNavbarContainer className="nextui-navbar-container" css={containerCss}>
-        {children}
-      </StyledNavbarContainer>
-    </StyledNavbar>
+    <NavbarProvider value={context}>
+      <StyledNavbar
+        ref={domRef}
+        className={clsx("nextui-navbar", context.className)}
+        css={context.navbarCss}
+        variant={context.variant}
+        {...otherProps}
+      >
+        <StyledNavbarContainer className="nextui-navbar-container" css={context.containerCss}>
+          {children}
+        </StyledNavbarContainer>
+      </StyledNavbar>
+    </NavbarProvider>
   );
 });
 
@@ -123,11 +50,15 @@ if (__DEV__) {
 
 Navbar.toString = () => ".nextui-navbar";
 
-type NavbarComponent<P = {}> = React.FC<P> & {
+type NavbarComponent<T, P = {}> = React.ForwardRefExoticComponent<
+  PropsWithoutRef<P> & RefAttributes<T>
+> & {
   Brand: typeof NavbarBrand;
   Content: typeof NavbarContent;
   Item: typeof NavbarItem;
   Link: typeof NavbarLink;
+  Toggle: typeof NavbarToggle;
+  List: typeof NavbarList;
 };
 
-export default Navbar as NavbarComponent<NavbarProps>;
+export default Navbar as NavbarComponent<HTMLElement, NavbarProps>;
diff --git a/packages/react/src/navbar/use-navbar.ts b/packages/react/src/navbar/use-navbar.ts
new file mode 100644
index 0000000000..f85cbba3ab
--- /dev/null
+++ b/packages/react/src/navbar/use-navbar.ts
@@ -0,0 +1,115 @@
+import type {CSS} from "../theme";
+
+import {useMemo, useState} from "react";
+
+import useTheme from "../use-theme";
+import {addColorAlpha} from "../utils/color";
+import {arrayToObject} from "../utils/object";
+import {HTMLNextUIProps} from "../utils/system";
+import useScrollPosition from "../use-scroll-position";
+
+import {NavbarVariantsProps} from "./navbar.styles";
+
+interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps> {
+  children?: React.ReactNode | React.ReactNode[];
+  /**
+   * Whether the navbar should hide on scroll or not.
+   * @default false
+   */
+  shouldHideOnScroll?: boolean;
+  /**
+   * The parent element where the navbar is placed within.
+   * This is used to determine the scroll position and whether the navbar should be hidden or not.
+   * @default `window`
+   */
+  parentRef?: React.RefObject<HTMLElement>;
+  /**
+   * The css object of the navbar container.
+   */
+  containerCss?: CSS;
+}
+
+export type UseNavbarProps = Props & NavbarVariantsProps;
+
+/**
+ * @internal
+ */
+export function useNavbar(props: UseNavbarProps = {}) {
+  const {
+    css,
+    variant = "static",
+    containerCss,
+    parentRef,
+    shouldHideOnScroll = false,
+    className,
+    ...otherProps
+  } = props;
+
+  const [sticky, setSticky] = useState(false);
+  const [isListOpen, setIsListOpen] = useState(false);
+
+  const {theme, isDark} = useTheme();
+
+  useScrollPosition({
+    elementRef: parentRef,
+    enabled: shouldHideOnScroll,
+    callback: ({prevPos, currPos}) => {
+      setSticky((prevSticky) => {
+        const next = currPos.y > prevPos.y;
+
+        return next !== prevSticky ? next : prevSticky;
+      });
+    },
+  });
+
+  const navbarCss = useMemo(() => {
+    const customCss = [];
+
+    if (variant === "floating") {
+      // linear gradient behind the navbar
+      customCss.push({
+        bg: `linear-gradient(180deg, ${addColorAlpha(
+          theme?.colors?.background?.value,
+          0.95,
+        )} 44%, ${addColorAlpha(theme?.colors?.background?.value, 0.46)} 73%, ${addColorAlpha(
+          theme?.colors?.background?.value,
+          0,
+        )})`,
+      });
+    }
+
+    if (shouldHideOnScroll) {
+      customCss.push({
+        position: "sticky",
+        top: 0,
+        right: 0,
+        left: 0,
+        transform: sticky ? "translateY(-100%)" : "translateY(0)",
+        transition: "transform 400ms ease",
+      });
+    }
+
+    const customCssObject = arrayToObject(customCss);
+
+    return {
+      ...customCssObject,
+      ...css,
+    };
+  }, [css, isDark, theme?.colors, variant, shouldHideOnScroll, sticky]);
+
+  return {
+    css,
+    variant,
+    sticky,
+    containerCss,
+    navbarCss,
+    parentRef,
+    shouldHideOnScroll,
+    isListOpen,
+    setIsListOpen,
+    className,
+    otherProps,
+  };
+}
+
+export type UseNavbarReturn = ReturnType<typeof useNavbar>;
diff --git a/packages/react/src/use-body-scroll/use-body-scroll.ts b/packages/react/src/use-body-scroll/use-body-scroll.ts
index d8a57cc275..c555b67c51 100644
--- a/packages/react/src/use-body-scroll/use-body-scroll.ts
+++ b/packages/react/src/use-body-scroll/use-body-scroll.ts
@@ -29,7 +29,7 @@ const touchHandler = (event: TouchEvent): boolean => {
 };
 
 const useBodyScroll = (
-  elementRef?: RefObject<HTMLElement> | null,
+  elementRef?: RefObject<HTMLElement> | null | undefined,
   options?: BodyScrollOptions,
 ): [boolean, Dispatch<SetStateAction<boolean>>] => {
   /* istanbul ignore next */
diff --git a/packages/react/src/use-portal/use-portal.ts b/packages/react/src/use-portal/use-portal.ts
index 85531ec14f..4e38dbb39e 100644
--- a/packages/react/src/use-portal/use-portal.ts
+++ b/packages/react/src/use-portal/use-portal.ts
@@ -13,7 +13,7 @@ const createElement = (id: string): HTMLElement => {
 
 const usePortal = (
   selectId: string = getId(),
-  getContainer?: () => HTMLElement | null,
+  getContainer?: () => HTMLElement | null | undefined,
 ): HTMLElement | null => {
   const id = `nextui-${selectId}`;
   const {isBrowser} = useSSR();
@@ -24,7 +24,7 @@ const usePortal = (
   useEffect(() => {
     const customContainer = getContainer ? getContainer() : null;
     const parentElement = customContainer || document.body;
-    const hasElement = parentElement.querySelector<HTMLElement>(`#${id}`);
+    const hasElement = parentElement?.querySelector<HTMLElement>(`#${id}`);
     const el = hasElement || createElement(id);
 
     if (!hasElement) {
diff --git a/packages/react/src/use-scroll-position/use-scroll-position.ts b/packages/react/src/use-scroll-position/use-scroll-position.ts
index 62f164484c..a94b8b672a 100644
--- a/packages/react/src/use-scroll-position/use-scroll-position.ts
+++ b/packages/react/src/use-scroll-position/use-scroll-position.ts
@@ -6,7 +6,6 @@ export type ScrollValue = {x: any; y: any};
 
 function getScrollPosition(element: HTMLElement | undefined | null): ScrollValue {
   if (!isBrowser) return {x: 0, y: 0};
-
   if (!element) {
     return {x: window.scrollX, y: window.scrollY};
   }
@@ -24,7 +23,9 @@ export interface UseScrollPositionOptions {
 const useScrollPosition = (props: UseScrollPositionOptions): ScrollValue => {
   const {elementRef, wait = 30, callback, enabled} = props;
 
-  const position = useRef<ScrollValue>(getScrollPosition(elementRef?.current));
+  const position = useRef<ScrollValue>(
+    enabled ? getScrollPosition(elementRef?.current) : {x: 0, y: 0},
+  );
 
   let throttleTimeout: ReturnType<typeof setTimeout> | null = null;
 
diff --git a/packages/react/src/utils/object.ts b/packages/react/src/utils/object.ts
index a5fad43ce0..343d4f2c22 100644
--- a/packages/react/src/utils/object.ts
+++ b/packages/react/src/utils/object.ts
@@ -88,3 +88,16 @@ export const getProp = (
 
   return obj === undefined ? fallback : obj;
 };
+
+/**
+ * Converting an array of objects into a single object.
+ * @param arr - the array of objects
+ * @returns the single object
+ */
+export const arrayToObject = (arr: any[]) => {
+  if (!arr.length || !Array.isArray(arr)) return {};
+
+  return arr.reduce((acc, item) => {
+    return {...acc, ...item};
+  }, {});
+};
diff --git a/packages/react/src/utils/system.ts b/packages/react/src/utils/system.ts
index 100a37b1cc..b5de4a090f 100644
--- a/packages/react/src/utils/system.ts
+++ b/packages/react/src/utils/system.ts
@@ -52,7 +52,10 @@ export type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
   as?: As;
 };
 
-export type HTMLNextUIProps<T extends As> = Omit<PropsOf<T>, "ref"> & {as?: As; css?: CSS};
+export type HTMLNextUIProps<T extends As> = Omit<PropsOf<T>, "ref"> & {
+  as?: As;
+  css?: CSS;
+};
 
 export function forwardRef<Props extends object, Component extends As>(
   component: React.ForwardRefRenderFunction<

From a9747415000883fa35c282c3f8b6084114dd8a57 Mon Sep 17 00:00:00 2001
From: nerdjfpb <nerdjfpb@gmail.com>
Date: Sun, 24 Jul 2022 04:21:00 +0600
Subject: [PATCH 051/106] Improvement: Adding links in contribution and code of
 conduct

---
 packages/react/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/README.md b/packages/react/README.md
index 4dd3ad5d6b..ec6c74c66e 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -89,9 +89,9 @@ Whether it's a feature request, bug report, or a project to showcase, please get
 
 Contributions are always welcome!
 
-See `CONTRIBUTING.md` for ways to get started.
+See [CONTRIBUTING.md](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.MD) for ways to get started.
 
-Please adhere to this project's `CODE_OF_CONDUCT`.
+Please adhere to this project's [CODE_OF_CONDUCT](https://github.com/nextui-org/nextui/blob/main/CODE_OF_CONDUCT.md).
 
 ## License
 

From 1ed2dee64826acf204bd79888aa098eb25a0d756 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 24 Jul 2022 17:18:52 -0300
Subject: [PATCH 052/106] feat(react-navbar): animations applied to navbar-list

---
 packages/react/src/navbar/navbar-list.tsx  | 35 +++++++++++++++-------
 packages/react/src/navbar/navbar.styles.ts | 19 ++++++++----
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/navbar/navbar-list.tsx b/packages/react/src/navbar/navbar-list.tsx
index c1e2c1953c..960bd61eeb 100644
--- a/packages/react/src/navbar/navbar-list.tsx
+++ b/packages/react/src/navbar/navbar-list.tsx
@@ -18,12 +18,19 @@ import {
 
 interface Props extends HTMLNextUIProps<"ul"> {
   portalName?: string;
+  animationDelay?: number;
 }
 
 export type NavbarListProps = Props & NavbarListVariantsProps;
 
 const NavbarList = forwardRef<NavbarListProps, "button">((props, ref) => {
-  const {children, className, portalName = "nextui-navbar-list", ...otherProps} = props;
+  const {
+    children,
+    className,
+    portalName = "nextui-navbar-list",
+    animationDelay = 60,
+    ...otherProps
+  } = props;
 
   const context = useNavbarContext();
   const portal = usePortal(portalName, () => context.parentRef?.current);
@@ -46,16 +53,22 @@ const NavbarList = forwardRef<NavbarListProps, "button">((props, ref) => {
     >
       <StyledNavbarListWrapper>
         {children}
-        {items.map((item, index) => (
-          <StyledNavbarListItem
-            key={index}
-            css={{
-              $$navbarListItemPosition: index,
-            }}
-          >
-            {item}
-          </StyledNavbarListItem>
-        ))}
+        {items.map((item, index) => {
+          const pos = context.isListOpen ? index + 1 : (index + 1) * -1;
+          const time = pos * animationDelay;
+
+          return (
+            <StyledNavbarListItem
+              key={item}
+              css={{
+                transform: `translateY(calc((${pos} * 10px) * -1))`,
+                transition: `opacity ${time}ms ease ${time}ms, transform ${time}ms ease ${time}ms`,
+              }}
+            >
+              {item}
+            </StyledNavbarListItem>
+          );
+        })}
       </StyledNavbarListWrapper>
     </StyledNavbarList>
   );
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index b74f2ddc57..124a032c9a 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -72,10 +72,8 @@ export const StyledBaseNavbarList = styled("ul", {
 
 export const StyledNavbarListItem = styled(StyledBaseNavbarItem, {
   opacity: 0,
-  transform: "translateY(calc((40px + $$navbarListItemPosition * 10px) * -1))",
   pb: "20px",
-  transition:
-    "opacity .3s cubic-bezier(0.32, 0.08, 0.24, 1) .03s, transform .4s cubic-bezier(0.32, 0.08, 0.24, 1) .02s",
+  transformOrigin: "bottom",
 });
 
 export const StyledNavbarList = styled("div", {
@@ -92,14 +90,17 @@ export const StyledNavbarList = styled("div", {
   willChange: "height",
   overflowY: "scroll",
   userSelect: "none",
-  transition: "height 400ms cubic-bezier(0.52, 0.16, 0.24, 1) 0s",
+  transition: "height 300ms ease 0s",
+  "@motion": {
+    transition: "none",
+  },
   variants: {
     isOpen: {
       true: {
         height: "100%",
         [`${StyledNavbarListItem}`]: {
           opacity: 1,
-          transform: "translateY(0px)",
+          transform: "none",
         },
       },
     },
@@ -111,6 +112,14 @@ export const StyledNavbarList = styled("div", {
         },
       },
     },
+    disableAnimation: {
+      true: {
+        transition: "none",
+        [`${StyledNavbarListItem}`]: {
+          transition: "none",
+        },
+      },
+    },
   },
   defaultVariants: {
     disableBlur: "false",

From c64c96af9bb28b7a3d01ca33f160d1888faab87d Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 24 Jul 2022 17:30:31 -0300
Subject: [PATCH 053/106] chore(root): deployed on vercel

---
 apps/docs/public/deployed-on-vercel.svg                    | 5 +++++
 apps/docs/src/components/vercel-callout/vercel-callout.tsx | 2 +-
 packages/react/README.md                                   | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 apps/docs/public/deployed-on-vercel.svg

diff --git a/apps/docs/public/deployed-on-vercel.svg b/apps/docs/public/deployed-on-vercel.svg
new file mode 100644
index 0000000000..a5e85acbac
--- /dev/null
+++ b/apps/docs/public/deployed-on-vercel.svg
@@ -0,0 +1,5 @@
+<svg width="168" height="34" viewBox="0 0 168 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="167.682" height="34" rx="8" fill="black"/>
+<path d="M21.7841 21H18.9588V12.2727H21.8736C22.7287 12.2727 23.4631 12.4474 24.0767 12.7969C24.6903 13.1435 25.1605 13.642 25.4872 14.2926C25.8168 14.9403 25.9815 15.7173 25.9815 16.6236C25.9815 17.5327 25.8153 18.3139 25.483 18.9673C25.1534 19.6207 24.6761 20.1236 24.0511 20.4759C23.4261 20.8253 22.6705 21 21.7841 21ZM20.2756 19.8494H21.7116C22.3764 19.8494 22.929 19.7244 23.3693 19.4744C23.8097 19.2216 24.1392 18.8565 24.358 18.3793C24.5767 17.8991 24.6861 17.3139 24.6861 16.6236C24.6861 15.9389 24.5767 15.358 24.358 14.8807C24.142 14.4034 23.8196 14.0412 23.3906 13.794C22.9616 13.5469 22.429 13.4233 21.7926 13.4233H20.2756V19.8494ZM30.3377 21.1321C29.6928 21.1321 29.1374 20.9943 28.6715 20.7188C28.2085 20.4403 27.8505 20.0497 27.5977 19.5469C27.3477 19.0412 27.2227 18.4489 27.2227 17.7699C27.2227 17.0994 27.3477 16.5085 27.5977 15.9972C27.8505 15.4858 28.2028 15.0866 28.6545 14.7997C29.109 14.5128 29.6403 14.3693 30.2482 14.3693C30.6175 14.3693 30.9755 14.4304 31.3221 14.5526C31.6687 14.6747 31.9798 14.8665 32.2553 15.1278C32.5309 15.3892 32.7482 15.7287 32.9073 16.1463C33.0664 16.5611 33.146 17.0653 33.146 17.6591V18.1108H27.9428V17.1562H31.8974C31.8974 16.821 31.8292 16.5241 31.6928 16.2656C31.5565 16.0043 31.3647 15.7983 31.1175 15.6477C30.8732 15.4972 30.5863 15.4219 30.2567 15.4219C29.8988 15.4219 29.5863 15.5099 29.3192 15.6861C29.055 15.8594 28.8505 16.0866 28.7056 16.3679C28.5636 16.6463 28.4925 16.9489 28.4925 17.2756V18.0213C28.4925 18.4588 28.5692 18.831 28.7227 19.1378C28.8789 19.4446 29.0962 19.679 29.3746 19.8409C29.6531 20 29.9783 20.0795 30.3505 20.0795C30.592 20.0795 30.8121 20.0455 31.011 19.9773C31.2099 19.9062 31.3817 19.8011 31.5266 19.6619C31.6715 19.5227 31.7823 19.3509 31.859 19.1463L33.065 19.3636C32.9684 19.7187 32.7951 20.0298 32.5451 20.2969C32.2979 20.5611 31.9869 20.767 31.6119 20.9148C31.2397 21.0597 30.815 21.1321 30.3377 21.1321ZM34.5597 23.4545V14.4545H35.804V15.5156H35.9105C35.9844 15.3793 36.0909 15.2216 36.2301 15.0426C36.3693 14.8636 36.5625 14.7074 36.8097 14.5739C37.0568 14.4375 37.3835 14.3693 37.7898 14.3693C38.3182 14.3693 38.7898 14.5028 39.2045 14.7699C39.6193 15.0369 39.9446 15.4219 40.1804 15.9247C40.419 16.4276 40.5384 17.0327 40.5384 17.7401C40.5384 18.4474 40.4205 19.054 40.1847 19.5597C39.9489 20.0625 39.625 20.4503 39.2131 20.723C38.8011 20.9929 38.331 21.1278 37.8026 21.1278C37.4048 21.1278 37.0795 21.0611 36.8267 20.9276C36.5767 20.794 36.3807 20.6378 36.2386 20.4588C36.0966 20.2798 35.9872 20.1207 35.9105 19.9815H35.8338V23.4545H34.5597ZM35.8082 17.7273C35.8082 18.1875 35.875 18.5909 36.0085 18.9375C36.142 19.2841 36.3352 19.5554 36.5881 19.7514C36.8409 19.9446 37.1506 20.0412 37.517 20.0412C37.8977 20.0412 38.2159 19.9403 38.4716 19.7386C38.7273 19.5341 38.9205 19.2571 39.0511 18.9077C39.1847 18.5582 39.2514 18.1648 39.2514 17.7273C39.2514 17.2955 39.1861 16.9077 39.0554 16.5639C38.9276 16.2202 38.7344 15.9489 38.4759 15.75C38.2202 15.5511 37.9006 15.4517 37.517 15.4517C37.1477 15.4517 36.8352 15.5469 36.5795 15.7372C36.3267 15.9276 36.1349 16.1932 36.0043 16.5341C35.8736 16.875 35.8082 17.2727 35.8082 17.7273ZM43.2401 12.2727V21H41.9659V12.2727H43.2401ZM47.7113 21.1321C47.0977 21.1321 46.5621 20.9915 46.1048 20.7102C45.6474 20.429 45.2923 20.0355 45.0394 19.5298C44.7866 19.0241 44.6602 18.4332 44.6602 17.7571C44.6602 17.0781 44.7866 16.4844 45.0394 15.9759C45.2923 15.4673 45.6474 15.0724 46.1048 14.7912C46.5621 14.5099 47.0977 14.3693 47.7113 14.3693C48.3249 14.3693 48.8604 14.5099 49.3178 14.7912C49.7752 15.0724 50.1303 15.4673 50.3832 15.9759C50.636 16.4844 50.7624 17.0781 50.7624 17.7571C50.7624 18.4332 50.636 19.0241 50.3832 19.5298C50.1303 20.0355 49.7752 20.429 49.3178 20.7102C48.8604 20.9915 48.3249 21.1321 47.7113 21.1321ZM47.7156 20.0625C48.1133 20.0625 48.4428 19.9574 48.7042 19.7472C48.9656 19.5369 49.1587 19.2571 49.2837 18.9077C49.4116 18.5582 49.4755 18.1733 49.4755 17.7528C49.4755 17.3352 49.4116 16.9517 49.2837 16.6023C49.1587 16.25 48.9656 15.9673 48.7042 15.7543C48.4428 15.5412 48.1133 15.4347 47.7156 15.4347C47.315 15.4347 46.9826 15.5412 46.7184 15.7543C46.457 15.9673 46.2624 16.25 46.1346 16.6023C46.0096 16.9517 45.9471 17.3352 45.9471 17.7528C45.9471 18.1733 46.0096 18.5582 46.1346 18.9077C46.2624 19.2571 46.457 19.5369 46.7184 19.7472C46.9826 19.9574 47.315 20.0625 47.7156 20.0625ZM52.7674 23.4545C52.5771 23.4545 52.4038 23.4389 52.2475 23.4077C52.0913 23.3793 51.9748 23.348 51.8981 23.3139L52.2049 22.2699C52.4379 22.3324 52.6452 22.3594 52.8271 22.3509C53.0089 22.3423 53.1694 22.2741 53.3086 22.1463C53.4506 22.0185 53.5756 21.8097 53.6836 21.5199L53.8413 21.0852L51.4464 14.4545H52.81L54.4677 19.5341H54.5359L56.1935 14.4545H57.5614L54.864 21.8736C54.739 22.2145 54.5799 22.5028 54.3867 22.7386C54.1935 22.9773 53.9634 23.1563 53.6964 23.2756C53.4293 23.3949 53.1197 23.4545 52.7674 23.4545ZM61.3572 21.1321C60.7124 21.1321 60.157 20.9943 59.6911 20.7188C59.228 20.4403 58.87 20.0497 58.6172 19.5469C58.3672 19.0412 58.2422 18.4489 58.2422 17.7699C58.2422 17.0994 58.3672 16.5085 58.6172 15.9972C58.87 15.4858 59.2223 15.0866 59.674 14.7997C60.1286 14.5128 60.6598 14.3693 61.2678 14.3693C61.6371 14.3693 61.995 14.4304 62.3416 14.5526C62.6882 14.6747 62.9993 14.8665 63.2749 15.1278C63.5504 15.3892 63.7678 15.7287 63.9268 16.1463C64.0859 16.5611 64.1655 17.0653 64.1655 17.6591V18.1108H58.9624V17.1562H62.9169C62.9169 16.821 62.8487 16.5241 62.7124 16.2656C62.576 16.0043 62.3842 15.7983 62.1371 15.6477C61.8928 15.4972 61.6058 15.4219 61.2763 15.4219C60.9183 15.4219 60.6058 15.5099 60.3388 15.6861C60.0746 15.8594 59.87 16.0866 59.7251 16.3679C59.5831 16.6463 59.5121 16.9489 59.5121 17.2756V18.0213C59.5121 18.4588 59.5888 18.831 59.7422 19.1378C59.8984 19.4446 60.1158 19.679 60.3942 19.8409C60.6726 20 60.9979 20.0795 61.37 20.0795C61.6115 20.0795 61.8317 20.0455 62.0305 19.9773C62.2294 19.9062 62.4013 19.8011 62.5462 19.6619C62.6911 19.5227 62.8018 19.3509 62.8786 19.1463L64.0845 19.3636C63.9879 19.7187 63.8146 20.0298 63.5646 20.2969C63.3175 20.5611 63.0064 20.767 62.6314 20.9148C62.2592 21.0597 61.8345 21.1321 61.3572 21.1321ZM68.0295 21.1278C67.5011 21.1278 67.0295 20.9929 66.6147 20.723C66.2028 20.4503 65.8789 20.0625 65.6431 19.5597C65.4102 19.054 65.2937 18.4474 65.2937 17.7401C65.2937 17.0327 65.4116 16.4276 65.6474 15.9247C65.886 15.4219 66.2127 15.0369 66.6275 14.7699C67.0423 14.5028 67.5124 14.3693 68.038 14.3693C68.4442 14.3693 68.771 14.4375 69.0181 14.5739C69.2681 14.7074 69.4613 14.8636 69.5977 15.0426C69.7369 15.2216 69.8448 15.3793 69.9215 15.5156H69.9982V12.2727H71.2724V21H70.0281V19.9815H69.9215C69.8448 20.1207 69.734 20.2798 69.5891 20.4588C69.4471 20.6378 69.2511 20.794 69.0011 20.9276C68.7511 21.0611 68.4272 21.1278 68.0295 21.1278ZM68.3107 20.0412C68.6772 20.0412 68.9869 19.9446 69.2397 19.7514C69.4954 19.5554 69.6886 19.2841 69.8192 18.9375C69.9528 18.5909 70.0195 18.1875 70.0195 17.7273C70.0195 17.2727 69.9542 16.875 69.8235 16.5341C69.6928 16.1932 69.5011 15.9276 69.2482 15.7372C68.9954 15.5469 68.6829 15.4517 68.3107 15.4517C67.9272 15.4517 67.6076 15.5511 67.3519 15.75C67.0962 15.9489 66.9031 16.2202 66.7724 16.5639C66.6445 16.9077 66.5806 17.2955 66.5806 17.7273C66.5806 18.1648 66.646 18.5582 66.7766 18.9077C66.9073 19.2571 67.1005 19.5341 67.3562 19.7386C67.6147 19.9403 67.9329 20.0412 68.3107 20.0412ZM79.0238 21.1321C78.4102 21.1321 77.8746 20.9915 77.4173 20.7102C76.9599 20.429 76.6048 20.0355 76.3519 19.5298C76.0991 19.0241 75.9727 18.4332 75.9727 17.7571C75.9727 17.0781 76.0991 16.4844 76.3519 15.9759C76.6048 15.4673 76.9599 15.0724 77.4173 14.7912C77.8746 14.5099 78.4102 14.3693 79.0238 14.3693C79.6374 14.3693 80.1729 14.5099 80.6303 14.7912C81.0877 15.0724 81.4428 15.4673 81.6957 15.9759C81.9485 16.4844 82.0749 17.0781 82.0749 17.7571C82.0749 18.4332 81.9485 19.0241 81.6957 19.5298C81.4428 20.0355 81.0877 20.429 80.6303 20.7102C80.1729 20.9915 79.6374 21.1321 79.0238 21.1321ZM79.0281 20.0625C79.4258 20.0625 79.7553 19.9574 80.0167 19.7472C80.2781 19.5369 80.4712 19.2571 80.5962 18.9077C80.7241 18.5582 80.788 18.1733 80.788 17.7528C80.788 17.3352 80.7241 16.9517 80.5962 16.6023C80.4712 16.25 80.2781 15.9673 80.0167 15.7543C79.7553 15.5412 79.4258 15.4347 79.0281 15.4347C78.6275 15.4347 78.2951 15.5412 78.0309 15.7543C77.7695 15.9673 77.5749 16.25 77.4471 16.6023C77.3221 16.9517 77.2596 17.3352 77.2596 17.7528C77.2596 18.1733 77.3221 18.5582 77.4471 18.9077C77.5749 19.2571 77.7695 19.5369 78.0309 19.7472C78.2951 19.9574 78.6275 20.0625 79.0281 20.0625ZM84.7713 17.1136V21H83.4972V14.4545H84.7202V15.5199H84.8011C84.9517 15.1733 85.1875 14.8949 85.5085 14.6847C85.8324 14.4744 86.2401 14.3693 86.7315 14.3693C87.1776 14.3693 87.5682 14.4631 87.9034 14.6506C88.2386 14.8352 88.4986 15.1108 88.6832 15.4773C88.8679 15.8437 88.9602 16.2969 88.9602 16.8366V21H87.6861V16.9901C87.6861 16.5156 87.5625 16.1449 87.3153 15.8778C87.0682 15.608 86.7287 15.473 86.2969 15.473C86.0014 15.473 85.7386 15.5369 85.5085 15.6648C85.2813 15.7926 85.1009 15.9801 84.9673 16.2273C84.8366 16.4716 84.7713 16.767 84.7713 17.1136Z" fill="white"/>
+<path d="M122.103 13.4091C120.001 13.4091 118.485 14.8 118.485 16.8864C118.485 18.9727 120.189 20.3636 122.294 20.3636C123.564 20.3636 124.684 19.8536 125.377 18.994L123.92 18.1401C123.535 18.567 122.951 18.8162 122.294 18.8162C121.382 18.8162 120.607 18.3333 120.319 17.5606H125.655C125.697 17.3442 125.722 17.1201 125.722 16.8844C125.722 14.8 124.208 13.4091 122.103 13.4091ZM120.304 16.2102C120.542 15.4394 121.193 14.9545 122.103 14.9545C123.016 14.9545 123.667 15.4394 123.903 16.2102H120.304ZM119.873 11.2841L114.596 20.5568L109.317 11.2841H111.296L114.594 17.0795L117.893 11.2841H119.873ZM102.037 10.3182L109.074 22.6818H95L102.037 10.3182ZM133.377 16.8864C133.377 18.0454 134.124 18.8182 135.282 18.8182C136.066 18.8182 136.655 18.4569 136.958 17.8677L138.42 18.7235C137.815 19.7474 136.68 20.3636 135.282 20.3636C133.177 20.3636 131.663 18.9727 131.663 16.8864C131.663 14.8 133.179 13.4091 135.282 13.4091C136.68 13.4091 137.813 14.0253 138.42 15.0492L136.958 15.905C136.655 15.3158 136.066 14.9545 135.282 14.9545C134.126 14.9545 133.377 15.7273 133.377 16.8864ZM149.085 11.2841V20.1704H147.371V11.2841H149.085ZM142.61 13.4091C140.507 13.4091 138.992 14.8 138.992 16.8864C138.992 18.9727 140.698 20.3636 142.8 20.3636C144.07 20.3636 145.19 19.8536 145.883 18.994L144.427 18.1401C144.042 18.567 143.457 18.8162 142.8 18.8162C141.888 18.8162 141.113 18.3333 140.825 17.5606H146.162C146.203 17.3442 146.228 17.1201 146.228 16.8844C146.228 14.8 144.714 13.4091 142.61 13.4091ZM140.81 16.2102C141.048 15.4394 141.698 14.9545 142.61 14.9545C143.522 14.9545 144.173 15.4394 144.41 16.2102H140.81ZM131.092 13.6023V15.4742C130.902 15.4182 130.7 15.3795 130.483 15.3795C129.376 15.3795 128.578 16.1523 128.578 17.3114V20.1704H126.864V13.6023H128.578V15.3795C128.578 14.3982 129.704 13.6023 131.092 13.6023Z" fill="white"/>
+</svg>
diff --git a/apps/docs/src/components/vercel-callout/vercel-callout.tsx b/apps/docs/src/components/vercel-callout/vercel-callout.tsx
index d3cf2c616e..83a758e2c2 100644
--- a/apps/docs/src/components/vercel-callout/vercel-callout.tsx
+++ b/apps/docs/src/components/vercel-callout/vercel-callout.tsx
@@ -25,7 +25,7 @@ const VercelCallout: React.FC<unknown> = () => {
       }}
     >
       <Text b css={{ my: 0, mr: '$4' }}>
-        Sponsored by
+        Deployed on
       </Text>
       <VercelLogo height={18} />
     </Link>
diff --git a/packages/react/README.md b/packages/react/README.md
index 4dd3ad5d6b..2e0d2bb01c 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -22,7 +22,7 @@
 
 <p align="center">
   <a rel="noopener noreferrer" target="_blank" href="https://www.vercel.com?utm_source=nextui&utm_marketing=oss">
-    <img height="34px" src="https://raw.githubusercontent.com/nextui-org/nextui/main/apps/docs/public/images/sponsored-by-vercel.svg" alt="Sponsored by vercel">
+    <img height="34px" src="https://raw.githubusercontent.com/nextui-org/nextui/main/apps/docs/public/images/deployed-on-vercel.svg" alt="Deployed on vercel">
   </a>
 </p>
 

From 969730a4bbd410c41da88065e5154d989e789987 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 24 Jul 2022 17:31:02 -0300
Subject: [PATCH 054/106] chore(root): deployed on vercel

---
 packages/react/README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/README.md b/packages/react/README.md
index 2e0d2bb01c..6eca6d5ea4 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -26,6 +26,8 @@
   </a>
 </p>
 
+> **NOTE:** This is a community project, not associated with [Vercel](https://vercel.com), but does get some inspiration from there.
+
 ## Getting Started
 
 Visit <a aria-label="nextui learn" href="https://nextui.org/learn">https://nextui.org/guide</a> to get started with NextUI.

From 478b4ec5d38393dda045626393f1803e3212568c Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 24 Jul 2022 17:31:58 -0300
Subject: [PATCH 055/106] chore(root): deployed on vercel

---
 packages/react/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/README.md b/packages/react/README.md
index 6eca6d5ea4..cd4ad5a1db 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -22,7 +22,7 @@
 
 <p align="center">
   <a rel="noopener noreferrer" target="_blank" href="https://www.vercel.com?utm_source=nextui&utm_marketing=oss">
-    <img height="34px" src="https://raw.githubusercontent.com/nextui-org/nextui/main/apps/docs/public/images/deployed-on-vercel.svg" alt="Deployed on vercel">
+    <img height="34px" src="https://raw.githubusercontent.com/nextui-org/nextui/main/apps/docs/public/deployed-on-vercel.svg" alt="Deployed on vercel">
   </a>
 </p>
 

From e61530b0727c1a0f313513c177a5fab2d2b5d707 Mon Sep 17 00:00:00 2001
From: Marlon Evangelista <icecold29@gmail.com>
Date: Thu, 28 Jul 2022 17:07:05 -0700
Subject: [PATCH 056/106] Fix typos in image docs

---
 apps/docs/content/docs/components/image.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/docs/content/docs/components/image.mdx b/apps/docs/content/docs/components/image.mdx
index ff7085e2ba..383a0b9d16 100644
--- a/apps/docs/content/docs/components/image.mdx
+++ b/apps/docs/content/docs/components/image.mdx
@@ -36,7 +36,7 @@ import { Image } from '@nextui-org/react';
 
 <Playground
   title="Object-Fit"
-  desc="This property tells the content to fill the container in a variety of ways. "
+  desc="This property tells the content to fill the container in a variety of ways."
   files={imageContent.objectFit}
 />
 
@@ -51,14 +51,14 @@ import { Image } from '@nextui-org/react';
 | Attribute        | Type                           | Description                                         | Default      |
 | ---------------- | ------------------------------ | --------------------------------------------------- | ------------ |
 | **src**          | `string`                       | Image source (local or remote)                      | -            |
-| **autoResize**   | `boolean`                      | Resize Image to fits screen                         | `false`      |
+| **autoResize**   | `boolean`                      | Resize Image to fit screen                          | `false`      |
 | **showSkeleton** | `boolean`                      | Shows loading Skeleton while image is loading       | `true`       |
 | **objectFit**    | [ObjectFit](#image-object-fit) | Property tells the content to fill the container    | `scale-down` |
-| **width**        | `string`                       | Specifies Image Width                               | -            |
-| **height**       | `string`                       | Specifies Image Height                              | -            |
+| **width**        | `number`                       | Specifies Image Width                               | -            |
+| **height**       | `number`                       | Specifies Image Height                              | -            |
 | **maxDelay**     | `number`                       | Specifies how long Image Skeleton Renders Animation | `3000`       |
-| **className**    | `string`                       | Give Image A ClasName                               | -            |
-| **containerCss** | `Stitches.CSS`                 | Override Default Image Contianer Style              | -            |
+| **className**    | `string`                       | Give Image A Class Name                             | -            |
+| **containerCss** | `Stitches.CSS`                 | Override Default Image Container Style              | -            |
 | **css**          | `Stitches.CSS`                 | Override Default CSS style                          | -            |
 | **as**           | `keyof JSX.IntrinsicElements`  | Changes which tag component outputs                 | `img`        |
 | ...              | `ImageHTMLAttributes`          | Native props                                        | -            |

From 114f57e74a892e0ed0e627475bfea334872c6526 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 31 Jul 2022 00:47:33 -0300
Subject: [PATCH 057/106] feat(react-navbar): collapse styles improved,
 animations applied

---
 packages/react/scripts/build-watch.js         |  50 ++++---
 packages/react/scripts/build.js               |  98 ++++++-------
 packages/react/scripts/cherry-pick.js         |  92 ++++++------
 packages/react/scripts/minify.js              |  38 ++---
 packages/react/scripts/pre-publish.js         |  41 +++---
 packages/react/scripts/setup-package.js       |  32 ++---
 packages/react/scripts/utils.js               |  19 ++-
 packages/react/src/index.ts                   |   1 +
 packages/react/src/navbar/index.ts            |   4 +-
 packages/react/src/navbar/navbar-collapse.tsx | 132 ++++++++++++++++++
 .../{navbar-context.tsx => navbar-context.ts} |   4 +-
 packages/react/src/navbar/navbar-list.tsx     |  85 -----------
 packages/react/src/navbar/navbar-toggle.tsx   |   8 +-
 packages/react/src/navbar/navbar.stories.tsx  |   6 +-
 packages/react/src/navbar/navbar.styles.ts    | 105 ++++++--------
 packages/react/src/navbar/navbar.tsx          |  17 ++-
 packages/react/src/navbar/use-navbar.ts       |  71 +++++++++-
 .../src/use-intersection-observer/index.ts    |   3 +
 .../use-intersection-observer.ts              |  40 ++++++
 packages/react/src/utils/color.ts             |  18 ++-
 packages/react/tests/.babelrc.js              |   4 +-
 packages/react/tests/jest-setup.js            |   1 -
 packages/react/tests/utils.ts                 |  24 ++--
 23 files changed, 515 insertions(+), 378 deletions(-)
 create mode 100644 packages/react/src/navbar/navbar-collapse.tsx
 rename packages/react/src/navbar/{navbar-context.tsx => navbar-context.ts} (58%)
 delete mode 100644 packages/react/src/navbar/navbar-list.tsx
 create mode 100644 packages/react/src/use-intersection-observer/index.ts
 create mode 100644 packages/react/src/use-intersection-observer/use-intersection-observer.ts

diff --git a/packages/react/scripts/build-watch.js b/packages/react/scripts/build-watch.js
index c78e5e634a..62878165d5 100644
--- a/packages/react/scripts/build-watch.js
+++ b/packages/react/scripts/build-watch.js
@@ -1,33 +1,33 @@
-const { green } = require('chalk');
+const path = require("path");
 
-const path = require('path');
-const fse = require('fs-extra');
+const {green} = require("chalk");
+const fse = require("fs-extra");
 
-const cherryPick = require('./cherry-pick').default;
+const cherryPick = require("./cherry-pick").default;
 
 const targets = process.argv.slice(2);
 
-const srcRoot = path.join(__dirname, '../src');
-const typesRoot = path.join(__dirname, '../types');
+const srcRoot = path.join(__dirname, "../src");
+const typesRoot = path.join(__dirname, "../types");
 
-const libRoot = path.join(__dirname, '../lib');
-const esRoot = path.join(libRoot, 'esm');
+const libRoot = path.join(__dirname, "../lib");
+const esRoot = path.join(libRoot, "esm");
 
-const step = require('./utils').step;
-const shell = require('./utils').shell;
-const error = require('./utils').error;
+const step = require("./utils").step;
+const shell = require("./utils").shell;
+const error = require("./utils").error;
 
 const clean = () => fse.existsSync(libRoot) && fse.removeSync(libRoot);
 
 const has = (t) => !targets.length || targets.includes(t);
 
-const buildTypes = step('generating .d.ts', () => shell(`yarn build:types`));
+const buildTypes = step("generating .d.ts", () => shell(`yarn build:types`));
 
-const copyTypes = (dest) => fse.copySync(typesRoot, dest, { overwrite: true });
+const copyTypes = (dest) => fse.copySync(typesRoot, dest, {overwrite: true});
 
 const babel = (outDir, envName) => {
   shell(
-    `yarn babel ${srcRoot} -x .js,.jsx,.ts,.tsx --out-dir ${outDir} --env-name "${envName}" --watch`
+    `yarn babel ${srcRoot} -x .js,.jsx,.ts,.tsx --out-dir ${outDir} --env-name "${envName}" --watch`,
   );
 };
 
@@ -35,28 +35,26 @@ const babel = (outDir, envName) => {
  * Run babel over the src directory and output
  * compiled es modules (but otherwise es5) to /es
  */
-const buildEsm = step('es modules', async () => {
-  await babel(esRoot, 'esm');
+const buildEsm = step("es modules", async () => {
+  await babel(esRoot, "esm");
   await copyTypes(esRoot);
 });
 
-const buildDirectories = step('Linking directories', () =>
+const buildDirectories = step("Linking directories", () =>
   cherryPick({
-    inputDir: '../src/**',
-    cjsDir: 'cjs',
-    esmDir: 'esm',
-    cwd: libRoot
-  })
+    inputDir: "../src/**",
+    cjsDir: "cjs",
+    esmDir: "esm",
+    cwd: libRoot,
+  }),
 );
 
-console.log(
-  green(`Building targets: ${targets.length ? targets.join(', ') : 'all'}\n`)
-);
+console.log(green(`Building targets: ${targets.length ? targets.join(", ") : "all"}\n`));
 
 clean();
 
 Promise.resolve(true)
   .then(buildTypes)
-  .then(() => Promise.all([has('es') && buildEsm()]))
+  .then(() => Promise.all([has("es") && buildEsm()]))
   .then(buildDirectories)
   .catch(error);
diff --git a/packages/react/scripts/build.js b/packages/react/scripts/build.js
index 6b22767c73..9fe5ee93b7 100755
--- a/packages/react/scripts/build.js
+++ b/packages/react/scripts/build.js
@@ -1,56 +1,54 @@
-const { green } = require('chalk');
-const webpack = require('webpack');
+const path = require("path");
 
-const path = require('path');
-const fse = require('fs-extra');
+const {green} = require("chalk");
+const webpack = require("webpack");
+const fse = require("fs-extra");
 
-const cherryPick = require('./cherry-pick').default;
-const getConfig = require('../buildconfig/webpack.config');
+const getConfig = require("../buildconfig/webpack.config");
+
+const cherryPick = require("./cherry-pick").default;
 
 const targets = process.argv.slice(2);
 
-const srcRoot = path.join(__dirname, '../src');
-const typesRootInit = path.join(__dirname, '../types');
+const srcRoot = path.join(__dirname, "../src");
+const typesRootInit = path.join(__dirname, "../types");
 
-const libRoot = path.join(__dirname, '../lib');
-const umdRoot = path.join(libRoot, 'umd');
-const cjsRoot = path.join(libRoot, 'cjs');
-const esRoot = path.join(libRoot, 'esm');
-const typesRoot = path.join(libRoot, 'types');
+const libRoot = path.join(__dirname, "../lib");
+const umdRoot = path.join(libRoot, "umd");
+const cjsRoot = path.join(libRoot, "cjs");
+const esRoot = path.join(libRoot, "esm");
+const typesRoot = path.join(libRoot, "types");
 
-const step = require('./utils').step;
-const shell = require('./utils').shell;
-const error = require('./utils').error;
+const step = require("./utils").step;
+const shell = require("./utils").shell;
+const error = require("./utils").error;
 
 const clean = () => fse.existsSync(libRoot) && fse.removeSync(libRoot);
 
 const has = (t) => !targets.length || targets.includes(t);
 
-const buildTypes = step('generating .d.ts', () => shell(`yarn build:types`));
+const buildTypes = step("generating .d.ts", () => shell(`yarn build:types`));
 
-const copyTypes = (dest) =>
-  fse.copySync(typesRootInit, dest, { overwrite: true });
+const copyTypes = (dest) => fse.copySync(typesRootInit, dest, {overwrite: true});
 
 const babel = (outDir, envName) => {
-  shell(
-    `yarn babel ${srcRoot} -x .js,.jsx,.ts,.tsx --out-dir ${outDir} --env-name "${envName}"`
-  );
+  shell(`yarn babel ${srcRoot} -x .js,.jsx,.ts,.tsx --out-dir ${outDir} --env-name "${envName}"`);
 };
 
 /**
  * Run babel over the src directory and output
  * compiled common js files to ./lib.
  */
-const buildLib = step('commonjs modules', async () => {
-  await babel(cjsRoot, 'cjs');
+const buildLib = step("commonjs modules", async () => {
+  await babel(cjsRoot, "cjs");
 });
 
 /**
  * Run babel over the src directory and output
  * compiled es modules (but otherwise es5) to /es
  */
-const buildEsm = step('es modules', async () => {
-  await babel(esRoot, 'esm');
+const buildEsm = step("es modules", async () => {
+  await babel(esRoot, "esm");
 });
 
 /**
@@ -58,35 +56,31 @@ const buildEsm = step('es modules', async () => {
  * all it's immediate dependencies (excluding React, ReactDOM, etc)
  */
 const buildUmd = step(
-  'browser distributable',
+  "browser distributable",
   () =>
     new Promise((resolve, reject) => {
-      webpack(
-        [getConfig(umdRoot, false), getConfig(umdRoot, true)],
-        async (err, stats) => {
-          if (err || stats.hasErrors()) {
-            reject(err || stats.toJson().errors);
-            return;
-          }
-
-          resolve();
+      webpack([getConfig(umdRoot, false), getConfig(umdRoot, true)], async (err, stats) => {
+        if (err || stats.hasErrors()) {
+          reject(err || stats.toJson().errors);
+
+          return;
         }
-      );
-    })
+
+        resolve();
+      });
+    }),
 );
 
-const buildDirectories = step('Linking directories', () =>
+const buildDirectories = step("Linking directories", () =>
   cherryPick({
-    inputDir: '../src/**',
-    cjsDir: 'cjs',
-    esmDir: 'esm',
-    cwd: libRoot
-  })
+    inputDir: "../src/**",
+    cjsDir: "cjs",
+    esmDir: "esm",
+    cwd: libRoot,
+  }),
 );
 
-console.log(
-  green(`Building targets: ${targets.length ? targets.join(', ') : 'all'}\n`)
-);
+console.log(green(`Building targets: ${targets.length ? targets.join(", ") : "all"}\n`));
 
 clean();
 
@@ -94,11 +88,11 @@ Promise.resolve(true)
   .then(buildTypes)
   .then(() =>
     Promise.all([
-      has('lib') && buildLib(),
-      has('es') && buildEsm(),
-      has('umd') && buildUmd(),
-      copyTypes(typesRoot)
-    ])
+      has("lib") && buildLib(),
+      has("es") && buildEsm(),
+      has("umd") && buildUmd(),
+      copyTypes(typesRoot),
+    ]),
   )
   .then(buildDirectories)
   .catch(error);
diff --git a/packages/react/scripts/cherry-pick.js b/packages/react/scripts/cherry-pick.js
index d2f9d2425e..4a530ef013 100644
--- a/packages/react/scripts/cherry-pick.js
+++ b/packages/react/scripts/cherry-pick.js
@@ -1,11 +1,12 @@
-const fs = require('fs');
-const path = require('path');
-const { promisify } = require('util');
-const glob = require('tiny-glob');
-const readPkgUp = require('read-pkg-up');
+const fs = require("fs");
+const path = require("path");
+const {promisify} = require("util");
+
+const glob = require("tiny-glob");
+const readPkgUp = require("read-pkg-up");
 
 const mkDir = promisify(fs.mkdir);
-const rimraf = promisify(require('rimraf'));
+const rimraf = promisify(require("rimraf"));
 const stat = promisify(fs.stat);
 const writeFile = promisify(fs.writeFile);
 
@@ -14,11 +15,8 @@ const isFile = (path) =>
     .then((stats) => stats.isFile())
     .catch(() => false);
 
-const withDefaults = (
-  { cwd = '.', ...options } = {},
-  additionalDefaults = {}
-) => ({
-  inputDir: 'src',
+const withDefaults = ({cwd = ".", ...options} = {}, additionalDefaults = {}) => ({
+  inputDir: "src",
   cwd: path.resolve(process.cwd(), cwd),
   ...additionalDefaults,
   ...options,
@@ -28,28 +26,27 @@ const noop = () => {};
 
 // get all folder name from a directory
 const getFoldersFromDir = async (cwd, dir) => {
-  const files = await glob(`${dir}/*`, { cwd });
+  const files = await glob(`${dir}/*`, {cwd});
   const folders = files
-    .filter((file) => file.indexOf('.') === -1)
-    .map((file) => file.replace(`${dir}/`, ''));
+    .filter((file) => file.indexOf(".") === -1)
+    .map((file) => file.replace(`${dir}/`, ""));
+
   return folders;
 };
 
-const findFiles = async ({ cwd, inputDir, esmDir }) => {
-  const filePaths = await glob(
-    path.join(inputDir, '!(index).{js,jsx,ts,tsx}'),
-    { cwd }
-  );
+const findFiles = async ({cwd, inputDir, esmDir}) => {
+  const filePaths = await glob(path.join(inputDir, "!(index).{js,jsx,ts,tsx}"), {cwd});
 
   const componentsFolders = await getFoldersFromDir(cwd, esmDir);
 
   const files = filePaths
-    .filter((f) => !f.endsWith('.d.ts'))
-    .filter((f) => !f.endsWith('.test.ts'))
-    .filter((f) => !f.endsWith('.test.tsx'))
-    .filter((f) => !f.endsWith('.stories.ts'))
-    .filter((f) => !f.endsWith('.stories.tsx'))
-    .map((filePath) => path.basename(filePath).replace(/\.(js|ts)x?$/, ''));
+    .filter((f) => !f.endsWith(".d.ts"))
+    .filter((f) => !f.endsWith(".test.ts"))
+    .filter((f) => !f.endsWith(".test.tsx"))
+    .filter((f) => !f.endsWith(".stories.ts"))
+    .filter((f) => !f.endsWith(".stories.tsx"))
+    .map((filePath) => path.basename(filePath).replace(/\.(js|ts)x?$/, ""));
+
   return files.filter((file) => componentsFolders.includes(file));
 };
 
@@ -62,47 +59,50 @@ const getPkgName = async (options) => {
   if (pkgCache.has(options)) {
     return pkgCache.get(options);
   }
-  const result = await readPkgUp({ cwd: options.cwd });
+  const result = await readPkgUp({cwd: options.cwd});
+
   if (!result) {
     throw new Error(
-      'Could not determine package name. No `name` option was passed and no package.json was found relative to: ' +
-        options.cwd
+      "Could not determine package name. No `name` option was passed and no package.json was found relative to: " +
+        options.cwd,
     );
   }
   const pkgName = result.packageJson.name;
+
   pkgCache.set(options, pkgName);
+
   return pkgName;
 };
 
 const fileProxy = async (options, file) => {
-  const { cwd, cjsDir, esmDir, typesDir } = options;
+  const {cwd, cjsDir, esmDir, typesDir} = options;
   //   const pkgName = await getPkgName(options);
 
   const proxyPkg = {
     // name: `${pkgName}/${file}`,
     // private: true,
     sideEffects: false,
-    main: path.join('..', cjsDir, `${file}/index.js`),
-    module: path.join('..', esmDir, `${file}/index.js`),
-    types: path.join('..', esmDir, `${file}/index.d.ts`),
+    main: path.join("..", cjsDir, `${file}/index.js`),
+    module: path.join("..", esmDir, `${file}/index.js`),
+    types: path.join("..", esmDir, `${file}/index.d.ts`),
   };
 
-  if (typeof typesDir === 'string') {
-    proxyPkg.types = path.join('..', typesDir, `${file}.d.ts`);
+  if (typeof typesDir === "string") {
+    proxyPkg.types = path.join("..", typesDir, `${file}.d.ts`);
   } else if (await isFile(path.join(cwd, `${file}.d.ts`))) {
-    proxyPkg.types = path.join('..', `${file}.d.ts`);
+    proxyPkg.types = path.join("..", `${file}.d.ts`);
     // try the esm path in case types are located with each
   } else if (await isFile(path.join(cwd, esmDir, `${file}.d.ts`))) {
-    proxyPkg.types = path.join('..', esmDir, `${file}.d.ts`);
+    proxyPkg.types = path.join("..", esmDir, `${file}.d.ts`);
   }
 
-  return JSON.stringify(proxyPkg, null, 2) + '\n';
+  return JSON.stringify(proxyPkg, null, 2) + "\n";
 };
 
 const cherryPick = async (inputOptions) => {
   const options = withDefaults(inputOptions, {
-    cjsDir: 'lib',
-    esmDir: 'es',
+    cjsDir: "lib",
+    esmDir: "es",
   });
 
   const files = await findFiles(options);
@@ -110,12 +110,10 @@ const cherryPick = async (inputOptions) => {
   await Promise.all(
     files.map(async (file) => {
       const proxyDir = path.join(options.cwd, file);
+
       await mkDir(proxyDir).catch(noop);
-      await writeFile(
-        `${proxyDir}/package.json`,
-        await fileProxy(options, file)
-      );
-    })
+      await writeFile(`${proxyDir}/package.json`, await fileProxy(options, file));
+    }),
   );
 
   return files;
@@ -124,9 +122,9 @@ const cherryPick = async (inputOptions) => {
 const clean = async (inputOptions) => {
   const options = withDefaults(inputOptions);
   const files = await findFiles(options);
-  await Promise.all(
-    files.map(async (file) => rimraf(path.join(options.cwd, file)))
-  );
+
+  await Promise.all(files.map(async (file) => rimraf(path.join(options.cwd, file))));
+
   return files;
 };
 
diff --git a/packages/react/scripts/minify.js b/packages/react/scripts/minify.js
index b6690adda5..e60bf46652 100644
--- a/packages/react/scripts/minify.js
+++ b/packages/react/scripts/minify.js
@@ -1,14 +1,16 @@
-var minify = require('terser').minify;
-var fs = require('fs');
-var path = require('path');
-const { forEach } = require('p-iteration');
-const { cyan } = require('chalk');
+var minify = require("terser").minify;
 
-const error = require('./utils').error;
+var fs = require("fs");
+var path = require("path");
 
-const libRoot = path.join(__dirname, '../lib');
-const esRoot = path.join(libRoot, 'esm');
-const cjsRoot = path.join(libRoot, 'cjs');
+const {forEach} = require("p-iteration");
+const {cyan} = require("chalk");
+
+const error = require("./utils").error;
+
+const libRoot = path.join(__dirname, "../lib");
+const esRoot = path.join(libRoot, "esm");
+const cjsRoot = path.join(libRoot, "cjs");
 
 function getAllFiles(dirPath, arrayOfFiles) {
   let files = fs.readdirSync(dirPath);
@@ -16,10 +18,10 @@ function getAllFiles(dirPath, arrayOfFiles) {
   arrayOfFiles = arrayOfFiles || [];
 
   files.forEach(function (file) {
-    if (fs.statSync(dirPath + '/' + file).isDirectory()) {
-      arrayOfFiles = getAllFiles(dirPath + '/' + file, arrayOfFiles);
+    if (fs.statSync(dirPath + "/" + file).isDirectory()) {
+      arrayOfFiles = getAllFiles(dirPath + "/" + file, arrayOfFiles);
     } else {
-      arrayOfFiles.push(path.join(dirPath, '/', file));
+      arrayOfFiles.push(path.join(dirPath, "/", file));
     }
   });
 
@@ -28,22 +30,24 @@ function getAllFiles(dirPath, arrayOfFiles) {
 
 async function minifyFiles(filePaths) {
   await forEach(filePaths, async (filePath) => {
-    const file = fs.readFileSync(filePath, 'utf8');
-    const { code } = await minify(file, {
+    const file = fs.readFileSync(filePath, "utf8");
+    const {code} = await minify(file, {
       compress: true,
       module: true,
       mangle: true,
-      toplevel: true
+      toplevel: true,
     });
+
     fs.writeFileSync(filePath, code);
   });
 }
 
 const minifyLib = (dir) => {
-  console.log(cyan('minifying files...'));
+  console.log(cyan("minifying files..."));
   const files = getAllFiles(dir);
+
   minifyFiles(files);
-  console.log(cyan('✅ files minified'));
+  console.log(cyan("✅ files minified"));
 };
 
 Promise.resolve(true)
diff --git a/packages/react/scripts/pre-publish.js b/packages/react/scripts/pre-publish.js
index 9570829393..e0a45c56cb 100644
--- a/packages/react/scripts/pre-publish.js
+++ b/packages/react/scripts/pre-publish.js
@@ -1,25 +1,26 @@
-const setupPackage = require('./setup-package');
-const path = require('path');
-const fse = require('fs-extra');
-const shell = require('./utils').shell;
-const step = require('./utils').step;
-const error = require('./utils').error;
-const libRoot = path.join(__dirname, '../lib');
-const rootDir = path.join(__dirname, '../');
-
-const buildPkg = step('build pkg...', () => shell(`yarn build`));
-
-const minifyPkg = step('minify pkg...', () => shell(`yarn build:minify`));
-
-const printPkg = step('print pkg...', () => {
-  const genPkgJson = fse
-    .readFileSync(`${libRoot}/package.json`)
-    .toString('utf-8');
+const path = require("path");
+
+const fse = require("fs-extra");
+
+const setupPackage = require("./setup-package");
+const shell = require("./utils").shell;
+const step = require("./utils").step;
+const error = require("./utils").error;
+const libRoot = path.join(__dirname, "../lib");
+const rootDir = path.join(__dirname, "../");
+
+const buildPkg = step("build pkg...", () => shell(`yarn build`));
+
+const minifyPkg = step("minify pkg...", () => shell(`yarn build:minify`));
+
+const printPkg = step("print pkg...", () => {
+  const genPkgJson = fse.readFileSync(`${libRoot}/package.json`).toString("utf-8");
+
   console.log(JSON.parse(genPkgJson));
 });
 
 const copyFromRoot = (file) =>
-  fse.copySync(`${rootDir}/${file}`, `${libRoot}/${file}`, { overwrite: true });
+  fse.copySync(`${rootDir}/${file}`, `${libRoot}/${file}`, {overwrite: true});
 
 Promise.resolve(true)
   .then(buildPkg)
@@ -27,7 +28,7 @@ Promise.resolve(true)
   .then(() => {
     setupPackage();
     printPkg();
-    copyFromRoot('README.md');
-    copyFromRoot('LICENSE');
+    copyFromRoot("README.md");
+    copyFromRoot("LICENSE");
   })
   .catch(error);
diff --git a/packages/react/scripts/setup-package.js b/packages/react/scripts/setup-package.js
index 6c21811e95..0ad8f43ab0 100644
--- a/packages/react/scripts/setup-package.js
+++ b/packages/react/scripts/setup-package.js
@@ -1,26 +1,26 @@
-const fs = require('fs-extra');
-const path = require('path');
-const libRoot = path.join(__dirname, '../lib');
+const path = require("path");
+
+const fs = require("fs-extra");
+const libRoot = path.join(__dirname, "../lib");
 
 function main() {
-  const source = fs
-    .readFileSync(__dirname + '/../package.json')
-    .toString('utf-8');
+  const source = fs.readFileSync(__dirname + "/../package.json").toString("utf-8");
   const sourceObj = JSON.parse(source);
+
   sourceObj.scripts = {};
   sourceObj.devDependencies = {};
 
-  if (sourceObj.main.startsWith('lib/')) {
-    sourceObj.main = sourceObj.main.replace('lib/', '');
+  if (sourceObj.main.startsWith("lib/")) {
+    sourceObj.main = sourceObj.main.replace("lib/", "");
   }
-  if (sourceObj.module.startsWith('lib/')) {
-    sourceObj.module = sourceObj.module.replace('lib/', '');
+  if (sourceObj.module.startsWith("lib/")) {
+    sourceObj.module = sourceObj.module.replace("lib/", "");
   }
-  if (sourceObj.unpkg.startsWith('lib/')) {
-    sourceObj.unpkg = sourceObj.unpkg.replace('lib/', '');
+  if (sourceObj.unpkg.startsWith("lib/")) {
+    sourceObj.unpkg = sourceObj.unpkg.replace("lib/", "");
   }
-  if (sourceObj.types.startsWith('lib/')) {
-    sourceObj.types = sourceObj.types.replace('lib/', '');
+  if (sourceObj.types.startsWith("lib/")) {
+    sourceObj.types = sourceObj.types.replace("lib/", "");
   }
   if (sourceObj.publishConfig) {
     delete sourceObj.publishConfig;
@@ -29,8 +29,8 @@ function main() {
     delete sourceObj.files;
   }
   fs.writeFileSync(
-    libRoot + '/package.json',
-    Buffer.from(JSON.stringify(sourceObj, null, 2), 'utf-8')
+    libRoot + "/package.json",
+    Buffer.from(JSON.stringify(sourceObj, null, 2), "utf-8"),
   );
 }
 
diff --git a/packages/react/scripts/utils.js b/packages/react/scripts/utils.js
index b4f5f1505e..3cb3ccfd20 100644
--- a/packages/react/scripts/utils.js
+++ b/packages/react/scripts/utils.js
@@ -1,21 +1,18 @@
-const { green, cyan, red } = require('chalk');
-const execa = require('execa');
+const {green, cyan, red} = require("chalk");
+const execa = require("execa");
 
 const step = (name, fn) => async () => {
-  console.log(cyan('Building: ') + green(name));
+  console.log(cyan("Building: ") + green(name));
   await fn();
-  console.log(cyan('Built: ') + green(name));
+  console.log(cyan("Built: ") + green(name));
 };
 
-const shell = (cmd) =>
-  execa(cmd, { stdio: ['pipe', 'pipe', 'inherit'], shell: true });
+const shell = (cmd) => execa(cmd, {stdio: ["pipe", "pipe", "inherit"], shell: true});
 
 const error = (err) => {
-  if (err && Array.isArray(err))
-    console.log(red(err.map((e) => e.message).join('\n')));
-  if (err && typeof err === 'object')
-    console.error(red(err.stack || err.toString()));
+  if (err && Array.isArray(err)) console.log(red(err.map((e) => e.message).join("\n")));
+  if (err && typeof err === "object") console.error(red(err.stack || err.toString()));
   process.exit(1);
 };
 
-module.exports = { step, shell, error };
+module.exports = {step, shell, error};
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index b9088a3e59..cb2eb36748 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -18,6 +18,7 @@ export {default as useInput} from "./use-input";
 export {default as useKeyboard} from "./use-keyboard";
 export {default as usePagination} from "./use-pagination";
 export {default as useScrollPosition} from "./use-scroll-position";
+export {default as useIntersectionObserver} from "./use-intersection-observer";
 
 // miscs & types
 export {default as useDrip} from "./use-drip";
diff --git a/packages/react/src/navbar/index.ts b/packages/react/src/navbar/index.ts
index 344bc00f95..b8b5701a92 100644
--- a/packages/react/src/navbar/index.ts
+++ b/packages/react/src/navbar/index.ts
@@ -3,7 +3,7 @@ import NavbarContent from "./navbar-content";
 import NavbarItem from "./navbar-item";
 import NavbarLink from "./navbar-link";
 import NavbarToggle from "./navbar-toggle";
-import NavbarList from "./navbar-list";
+import NavbarCollapse from "./navbar-collapse";
 import Navbar from "./navbar";
 
 Navbar.Brand = NavbarBrand;
@@ -11,6 +11,6 @@ Navbar.Content = NavbarContent;
 Navbar.Item = NavbarItem;
 Navbar.Link = NavbarLink;
 Navbar.Toggle = NavbarToggle;
-Navbar.List = NavbarList;
+Navbar.Collapse = NavbarCollapse;
 
 export default Navbar;
diff --git a/packages/react/src/navbar/navbar-collapse.tsx b/packages/react/src/navbar/navbar-collapse.tsx
new file mode 100644
index 0000000000..2711c7b183
--- /dev/null
+++ b/packages/react/src/navbar/navbar-collapse.tsx
@@ -0,0 +1,132 @@
+import React, {useEffect, useMemo} from "react";
+
+import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import {useDOMRef} from "../utils/dom";
+import clsx from "../utils/clsx";
+import {__DEV__} from "../utils/assertion";
+import useIntersectionObserver from "../use-intersection-observer";
+
+import {useNavbarContext} from "./navbar-context";
+import {
+  StyledNavbarCollapse,
+  StyledNavbarCollapseWrapper,
+  StyledNavbarCollapseItem,
+  NavbarCollapseItemVariantsProps,
+  NavbarCollapseVariantsProps,
+} from "./navbar.styles";
+
+interface Props extends HTMLNextUIProps<"ul"> {}
+
+export type NavbarCollapseProps = Props & NavbarCollapseVariantsProps;
+
+const NavbarCollapseItem = forwardRef<
+  HTMLNextUIProps<"li"> & NavbarCollapseItemVariantsProps,
+  "li"
+>((props, ref) => {
+  const {children, className, disableAnimation, style, css, ...otherProps} = props;
+  const context = useNavbarContext();
+
+  const domRef = useDOMRef(ref);
+
+  const {isVisible, setEntry} = useIntersectionObserver(domRef, {
+    root: context?.parentRef?.current,
+    freezeOnceVisible: context.isCollapseOpen,
+  });
+
+  useEffect(() => {
+    if (!context.isCollapseOpen && isVisible) {
+      setEntry(null);
+    }
+  }, [isVisible, context.isCollapseOpen]);
+
+  const itemStyle = useMemo(() => {
+    return {
+      "--nextui--collapseItemOpacity": isVisible ? 1 : 0,
+      "--nextui--collapseItemTransform": isVisible
+        ? "matrix(1, 0, 0, 1, 0, 0)"
+        : "matrix(0.85, 0, 0, 0.85, 5, 20)",
+      "--netxui--collapseItemTransition": !disableAnimation
+        ? "opacity 1s cubic-bezier(0.5, 0, 0, 1) 0s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0s"
+        : "none",
+    };
+  }, [disableAnimation, isVisible]);
+
+  return (
+    <StyledNavbarCollapseItem
+      ref={domRef}
+      className={clsx("nextui-navbar-collapse-item", className)}
+      css={{
+        opacity: "var(--nextui--collapseItemOpacity)",
+        transition: "var(--netxui--collapseItemTransition)",
+        transform: "var(--nextui--collapseItemTransform)",
+        ...css,
+      }}
+      disableAnimation={disableAnimation}
+      style={{...style, ...itemStyle}}
+      {...otherProps}
+    >
+      {children}
+    </StyledNavbarCollapseItem>
+  );
+});
+
+const NavbarCollapse = forwardRef<NavbarCollapseProps, "ul">((props, ref) => {
+  const {children, className, ...otherProps} = props;
+
+  const context = useNavbarContext();
+  const domRef = useDOMRef(ref);
+
+  useEffect(() => {
+    if (!context.isCollapseOpen) {
+      // restore scroll to the top of the collapse
+      domRef.current?.scrollTo({
+        top: 0,
+      });
+    }
+  }, [context.isCollapseOpen]);
+
+  const items = [
+    "Store",
+    "Mac",
+    "iPad",
+    "iPhone",
+    "Watch",
+    "TV & Home",
+    "Music",
+    "Support",
+    "Store",
+    "Mac",
+    "iPad",
+    "iPhone",
+    "Watch",
+    "TV & Home",
+    "Music",
+    "Support",
+  ];
+
+  return (
+    <StyledNavbarCollapse
+      ref={domRef}
+      className={clsx("nextui-navbar-collapse", className)}
+      isOpen={context.isCollapseOpen}
+      {...otherProps}
+    >
+      <StyledNavbarCollapseWrapper className="nextui-navbar-collapse-wrapper">
+        {children}
+        {items.map((item, index) => (
+          <NavbarCollapseItem key={`${item}-${index}`} className="nextui-navbar-collapse-item">
+            {item}
+          </NavbarCollapseItem>
+        ))}
+      </StyledNavbarCollapseWrapper>
+    </StyledNavbarCollapse>
+  );
+});
+
+if (__DEV__) {
+  NavbarCollapse.displayName = "NextUI.NavbarCollapse";
+}
+
+NavbarCollapse.toString = () => ".nextui-navbar-collapse";
+
+export default NavbarCollapse;
diff --git a/packages/react/src/navbar/navbar-context.tsx b/packages/react/src/navbar/navbar-context.ts
similarity index 58%
rename from packages/react/src/navbar/navbar-context.tsx
rename to packages/react/src/navbar/navbar-context.ts
index 6c8009cd3c..787a4018ae 100644
--- a/packages/react/src/navbar/navbar-context.tsx
+++ b/packages/react/src/navbar/navbar-context.ts
@@ -3,6 +3,8 @@ import {createContext} from "../utils/context";
 import {UseNavbarReturn} from "./use-navbar";
 
 export const [NavbarProvider, useNavbarContext] = createContext<UseNavbarReturn>({
-  strict: false,
+  strict: true,
   name: "NavbarContext",
+  errorMessage:
+    "useNavbarContext: `context` is undefined. Seems you forgot to wrap all navbar components within `<Navbar />`",
 });
diff --git a/packages/react/src/navbar/navbar-list.tsx b/packages/react/src/navbar/navbar-list.tsx
deleted file mode 100644
index 960bd61eeb..0000000000
--- a/packages/react/src/navbar/navbar-list.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, {useEffect} from "react";
-import {createPortal} from "react-dom";
-
-import {HTMLNextUIProps, forwardRef} from "../utils/system";
-import {useDOMRef} from "../utils/dom";
-import clsx from "../utils/clsx";
-import usePortal from "../use-portal";
-import useBodyScroll from "../use-body-scroll";
-import {__DEV__} from "../utils/assertion";
-
-import {useNavbarContext} from "./navbar-context";
-import {
-  StyledNavbarList,
-  StyledNavbarListWrapper,
-  StyledNavbarListItem,
-  NavbarListVariantsProps,
-} from "./navbar.styles";
-
-interface Props extends HTMLNextUIProps<"ul"> {
-  portalName?: string;
-  animationDelay?: number;
-}
-
-export type NavbarListProps = Props & NavbarListVariantsProps;
-
-const NavbarList = forwardRef<NavbarListProps, "button">((props, ref) => {
-  const {
-    children,
-    className,
-    portalName = "nextui-navbar-list",
-    animationDelay = 60,
-    ...otherProps
-  } = props;
-
-  const context = useNavbarContext();
-  const portal = usePortal(portalName, () => context.parentRef?.current);
-  const domRef = useDOMRef(ref);
-
-  const [, setBodyHidden] = useBodyScroll(context.parentRef, {scrollLayer: true});
-
-  useEffect(() => {
-    setBodyHidden(context.isListOpen);
-  }, [context.isListOpen]);
-
-  const items = ["Store", "Mac", "iPad", "iPhone", "Watch", "TV & Home", "Music", "Support"];
-
-  const contents = (
-    <StyledNavbarList
-      ref={domRef}
-      className={clsx("nextui-navbar-list", className)}
-      isOpen={context.isListOpen}
-      {...otherProps}
-    >
-      <StyledNavbarListWrapper>
-        {children}
-        {items.map((item, index) => {
-          const pos = context.isListOpen ? index + 1 : (index + 1) * -1;
-          const time = pos * animationDelay;
-
-          return (
-            <StyledNavbarListItem
-              key={item}
-              css={{
-                transform: `translateY(calc((${pos} * 10px) * -1))`,
-                transition: `opacity ${time}ms ease ${time}ms, transform ${time}ms ease ${time}ms`,
-              }}
-            >
-              {item}
-            </StyledNavbarListItem>
-          );
-        })}
-      </StyledNavbarListWrapper>
-    </StyledNavbarList>
-  );
-
-  return portal ? createPortal(contents, portal) : null;
-});
-
-if (__DEV__) {
-  NavbarList.displayName = "NextUI.NavbarList";
-}
-
-NavbarList.toString = () => ".nextui-navbar-list";
-
-export default NavbarList;
diff --git a/packages/react/src/navbar/navbar-toggle.tsx b/packages/react/src/navbar/navbar-toggle.tsx
index 7e6defb5dc..ffe160c8b7 100644
--- a/packages/react/src/navbar/navbar-toggle.tsx
+++ b/packages/react/src/navbar/navbar-toggle.tsx
@@ -9,6 +9,7 @@ import {mergeProps} from "@react-aria/utils";
 
 import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
+import useBodyScroll from "../use-body-scroll";
 import clsx from "../utils/clsx";
 import {__DEV__} from "../utils/assertion";
 
@@ -26,11 +27,14 @@ export type NavbarToggleProps = Props &
 const NavbarToggle = forwardRef<NavbarToggleProps, "button">((props, ref) => {
   const {children, className, autoFocus, onChange, as, css} = props;
 
-  const {setIsListOpen} = useNavbarContext();
+  const {parentRef, setIsCollapseOpen} = useNavbarContext();
+
+  const [, setBodyHidden] = useBodyScroll(parentRef, {scrollLayer: true});
 
   const handleChange = (isOpen: boolean) => {
-    setIsListOpen(isOpen);
+    setIsCollapseOpen(isOpen);
     onChange?.(isOpen);
+    setBodyHidden(isOpen);
   };
 
   const domRef = useDOMRef(ref);
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 181cabdb8d..19ef37f78f 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import {Meta} from "@storybook/react";
 
-import {Link, Text, Button, Spacer, Grid} from "../index";
+import {Link, Text, Button, Spacer} from "../index";
 import {styled} from "../theme/stitches.config";
 
 import Navbar from "./index";
@@ -133,7 +133,7 @@ const App = React.forwardRef(({children}: any, ref: any) => {
       css={{
         maxW: "920px",
         maxHeight: "600px",
-        overflow: "visible scroll",
+        overflow: "hidden scroll",
         boxShadow: "$md",
         position: "relative",
         border: "1px solid $colors$border",
@@ -222,7 +222,7 @@ export const Toggle = () => {
             </Button>
           </Navbar.Item>
         </Navbar.Content>
-        <Navbar.List />
+        <Navbar.Collapse />
       </Navbar>
     </App>
   );
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index 124a032c9a..17d6059f1c 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -70,37 +70,50 @@ export const StyledBaseNavbarList = styled("ul", {
   },
 });
 
-export const StyledNavbarListItem = styled(StyledBaseNavbarItem, {
+export const StyledNavbarCollapseItem = styled(StyledBaseNavbarItem, {
   opacity: 0,
   pb: "20px",
-  transformOrigin: "bottom",
+  transformOrigin: "top",
+  fontSize: "3rem",
+  variants: {
+    disableAnimation: {
+      true: {
+        transition: "none",
+      },
+    },
+  },
 });
 
-export const StyledNavbarList = styled("div", {
+export const StyledNavbarCollapseWrapper = styled(StyledBaseNavbarList, {
+  px: "$$navbarPadding",
+  pb: "$8",
+});
+
+export const StyledNavbarCollapse = styled("div", {
   $$navbarListColor: "$colors$text",
   $$navbarListBackgroundColor: "$colors$background",
   $$navbarListBlurBackgroundColor: "$colors$backgroundAlpha",
-  $$navbarListBlur: "20px",
+  $$navbarListBlur: "16px",
   position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
   background: "$$navbarListBackgroundColor",
   width: "100%",
   height: "0px",
-  top: "76px",
-  zIndex: "$10",
-  willChange: "height",
+  zIndex: "$4",
+  boxSizing: "border-box",
+  overflowX: "hidden",
   overflowY: "scroll",
-  userSelect: "none",
-  transition: "height 300ms ease 0s",
-  "@motion": {
-    transition: "none",
-  },
   variants: {
     isOpen: {
       true: {
-        height: "100%",
-        [`${StyledNavbarListItem}`]: {
-          opacity: 1,
-          transform: "none",
+        pt: "$8",
+        top: "$$navbarHeight",
+        pb: "calc($space$8 + $$navbarHeight * 1.5)",
+        height: "calc(100vh - $$navbarHeight)",
+        "@safari": {
+          pb: "calc($space$8 + $$navbarHeight * 1.8)",
         },
       },
     },
@@ -109,13 +122,18 @@ export const StyledNavbarList = styled("div", {
         "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
           bg: "$$navbarListBlurBackgroundColor",
           backdropFilter: "saturate(180%) blur($$navbarListBlur)",
+          "@safari": {
+            [`& ${StyledNavbarCollapseWrapper}`]: {
+              bg: "$$navbarListBlurBackgroundColor",
+              backdropFilter: "saturate(180%) blur($$navbarListBlur)",
+            },
+          },
         },
       },
     },
     disableAnimation: {
       true: {
-        transition: "none",
-        [`${StyledNavbarListItem}`]: {
+        [`& ${StyledNavbarCollapseItem}`]: {
           transition: "none",
         },
       },
@@ -126,11 +144,6 @@ export const StyledNavbarList = styled("div", {
   },
 });
 
-export const StyledNavbarListWrapper = styled(StyledBaseNavbarList, {
-  p: "$8 $8 0 $8",
-  height: "100%",
-});
-
 export const StyledNavbarToggleIconContainer = styled("div", {
   dflex: "center",
   flexDirection: "column",
@@ -476,6 +489,7 @@ export const StyledNavbarContainer = styled("div", {
   px: "$$navbarPadding",
   bg: "$$navbarBackgroundColor",
   maxW: "$$navbarContainerMaxWidth",
+  zIndex: "$5",
   "@xsMax": {
     $$navbarPadding: "$space$6",
     $$navbarFloatingMargin: "$space$6",
@@ -483,25 +497,12 @@ export const StyledNavbarContainer = styled("div", {
 });
 
 export const StyledNavbar = styled("nav", {
-  // variables
-  $$navbarTextColor: "$colors$text",
-  $$navbarBackgroundColor: "$colors$background",
-  $$navbarBlurBackgroundColor: "$colors$backgroundAlpha",
-  $$navbarHeight: "76px",
-  $$navbarItemMaxHeight: "calc($$navbarHeight * 0.5)",
-  $$navbarBorderColor: "$colors$border",
-  $$navbarBorderRadius: "$radii$lg",
-  $$navbarPadding: "$space$10",
-  $$navbarFloatingMargin: "$space$10",
-  $$navbarContainerMaxWidth: "$breakpoints$lg",
-  $$navbarShadow: "$shadows$md",
-  $$navbarBlur: "10px",
-  // styles
   width: "100%",
   dflex: "center",
   position: "relative",
   height: "auto",
   color: "$$navbarTextColor",
+  zIndex: "$2",
   variants: {
     variant: {
       static: {
@@ -512,14 +513,12 @@ export const StyledNavbar = styled("nav", {
         right: 0,
         left: 0,
         position: "sticky",
-        zIndex: "$2",
       },
       floating: {
         top: 0,
         right: 0,
         left: 0,
         position: "sticky",
-        zIndex: "$2",
         "@safari": {
           top: "-5px",
         },
@@ -528,6 +527,9 @@ export const StyledNavbar = styled("nav", {
           mx: "$$navbarFloatingMargin",
           borderRadius: "$$navbarBorderRadius",
         },
+        [`& ${StyledNavbarCollapseWrapper}`]: {
+          px: "calc($$navbarFloatingMargin + $space$4)",
+        },
       },
     },
     maxWidth: {
@@ -559,7 +561,7 @@ export const StyledNavbar = styled("nav", {
     },
     isCompact: {
       true: {
-        $$navbarHeight: "54px",
+        $$navbarHeight: "calc($$navbarHeight * 0.658)",
         $$navbarBorderRadius: "$radii$md",
         $$navbarItemMaxHeight: "calc($$navbarHeight * 0.6)",
       },
@@ -567,7 +569,6 @@ export const StyledNavbar = styled("nav", {
     disableShadow: {
       false: {
         boxShadow: "$$navbarShadow",
-        clipPath: "inset(0px 0px calc($$navbarHeight*-1) 0px)",
       },
     },
     disableBlur: {
@@ -580,23 +581,6 @@ export const StyledNavbar = styled("nav", {
         },
       },
     },
-    borderWeight: {
-      light: {
-        $$navbarBorderWeight: "$borderWeights$light",
-      },
-      normal: {
-        $$navbarBorderWeight: "$borderWeights$normal",
-      },
-      bold: {
-        $$navbarBorderWeight: "$borderWeights$bold",
-      },
-      extrabold: {
-        $$navbarBorderWeight: "$borderWeights$extrabold",
-      },
-      black: {
-        $$navbarBorderWeight: "$borderWeights$black",
-      },
-    },
   },
   compoundVariants: [
     /**
@@ -621,7 +605,6 @@ export const StyledNavbar = styled("nav", {
       disableShadow: false,
       css: {
         boxShadow: "none",
-        clipPath: "none",
         [`& ${StyledNavbarContainer}`]: {
           boxShadow: "$$navbarShadow",
         },
@@ -630,7 +613,6 @@ export const StyledNavbar = styled("nav", {
   ],
   defaultVariants: {
     variant: "static",
-    borderWeight: "light",
     maxWidth: "lg",
     isBordered: false,
     disableShadow: false,
@@ -645,4 +627,5 @@ export type NavbarToggleVariantsProps = VariantProps<typeof StyledNavbarToggle>;
 export type NavbarToggleIconContainerVariantsProps = VariantProps<
   typeof StyledNavbarToggleIconContainer
 >;
-export type NavbarListVariantsProps = VariantProps<typeof StyledNavbarList>;
+export type NavbarCollapseVariantsProps = VariantProps<typeof StyledNavbarCollapse>;
+export type NavbarCollapseItemVariantsProps = VariantProps<typeof StyledNavbarCollapseItem>;
diff --git a/packages/react/src/navbar/navbar.tsx b/packages/react/src/navbar/navbar.tsx
index 680e54418b..12667866dd 100644
--- a/packages/react/src/navbar/navbar.tsx
+++ b/packages/react/src/navbar/navbar.tsx
@@ -5,6 +5,7 @@ import React from "react";
 import {forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
+import {pickChild} from "../utils/collections";
 import {__DEV__} from "../utils/assertion";
 
 import NavbarBrand from "./navbar-brand";
@@ -12,7 +13,7 @@ import NavbarContent from "./navbar-content";
 import NavbarItem from "./navbar-item";
 import NavbarLink from "./navbar-link";
 import NavbarToggle from "./navbar-toggle";
-import NavbarList from "./navbar-list";
+import NavbarCollapse from "./navbar-collapse";
 import {NavbarProvider} from "./navbar-context";
 import {useNavbar, UseNavbarProps} from "./use-navbar";
 import {StyledNavbar, StyledNavbarContainer} from "./navbar.styles";
@@ -24,8 +25,11 @@ export interface NavbarProps extends UseNavbarProps {
 const Navbar = forwardRef<NavbarProps, "nav">((props, ref) => {
   const {children, ...otherProps} = props;
 
-  const context = useNavbar(otherProps);
   const domRef = useDOMRef(ref);
+  const context = useNavbar(otherProps);
+
+  // validates if contains a NextUI Navbar Collapse as a child
+  const [withoutCollapseChildren, collapseChildren] = pickChild(children, NavbarCollapse);
 
   return (
     <NavbarProvider value={context}>
@@ -33,12 +37,15 @@ const Navbar = forwardRef<NavbarProps, "nav">((props, ref) => {
         ref={domRef}
         className={clsx("nextui-navbar", context.className)}
         css={context.navbarCss}
+        disableBlur={context.disableBlur}
+        isBordered={context.isBordered}
         variant={context.variant}
-        {...otherProps}
+        {...context.otherProps}
       >
         <StyledNavbarContainer className="nextui-navbar-container" css={context.containerCss}>
-          {children}
+          {withoutCollapseChildren}
         </StyledNavbarContainer>
+        {collapseChildren}
       </StyledNavbar>
     </NavbarProvider>
   );
@@ -58,7 +65,7 @@ type NavbarComponent<T, P = {}> = React.ForwardRefExoticComponent<
   Item: typeof NavbarItem;
   Link: typeof NavbarLink;
   Toggle: typeof NavbarToggle;
-  List: typeof NavbarList;
+  Collapse: typeof NavbarCollapse;
 };
 
 export default Navbar as NavbarComponent<HTMLElement, NavbarProps>;
diff --git a/packages/react/src/navbar/use-navbar.ts b/packages/react/src/navbar/use-navbar.ts
index f85cbba3ab..9499fd099d 100644
--- a/packages/react/src/navbar/use-navbar.ts
+++ b/packages/react/src/navbar/use-navbar.ts
@@ -1,17 +1,34 @@
 import type {CSS} from "../theme";
+import type {NormalWeights} from "../utils/prop-types";
 
 import {useMemo, useState} from "react";
 
-import useTheme from "../use-theme";
 import {addColorAlpha} from "../utils/color";
 import {arrayToObject} from "../utils/object";
 import {HTMLNextUIProps} from "../utils/system";
 import useScrollPosition from "../use-scroll-position";
+import {globalCss} from "../theme/stitches.config";
+import useTheme from "../use-theme";
 
 import {NavbarVariantsProps} from "./navbar.styles";
 
 interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps> {
   children?: React.ReactNode | React.ReactNode[];
+  /**
+   * The height of the navbar.
+   * @default "76px" and "54px" for "isCompact=true".
+   */
+  height?: number | string;
+  /**
+   * The border weight of the bordered navbar.
+   *  @default light
+   */
+  borderWeight?: NormalWeights;
+  /**
+   * Whether the navbar should be bordered.
+   * @default false
+   */
+  isBordered?: boolean;
   /**
    * Whether the navbar should hide on scroll or not.
    * @default false
@@ -37,18 +54,55 @@ export type UseNavbarProps = Props & NavbarVariantsProps;
 export function useNavbar(props: UseNavbarProps = {}) {
   const {
     css,
-    variant = "static",
     containerCss,
     parentRef,
+    isBordered,
+    variant = "static",
+    height = "76px",
+    borderWeight = "light",
     shouldHideOnScroll = false,
+    disableBlur: disableBlurProp = false,
     className,
     ...otherProps
   } = props;
 
   const [sticky, setSticky] = useState(false);
-  const [isListOpen, setIsListOpen] = useState(false);
+  const [isCollapseOpen, setIsCollapseOpen] = useState(false);
+
+  const {theme} = useTheme();
+
+  const borderWeightValue = useMemo(() => {
+    if (!isBordered) {
+      return "0px";
+    }
+
+    return `$borderWeights$${borderWeight}`;
+  }, [isBordered, borderWeight]);
+
+  const disableBlur = useMemo(
+    () => disableBlurProp || isCollapseOpen,
+    [disableBlurProp, isCollapseOpen],
+  );
+
+  const navbarGlobalCss = globalCss({
+    html: {
+      $$navbarHeight: height,
+      $$navbarTextColor: "$colors$text",
+      $$navbarBackgroundColor: "$colors$background",
+      $$navbarBlurBackgroundColor: "$colors$backgroundAlpha",
+      $$navbarItemMaxHeight: "calc($$navbarHeight * 0.5)",
+      $$navbarBorderColor: "$colors$border",
+      $$navbarBorderRadius: "$radii$lg",
+      $$navbarPadding: "$space$10",
+      $$navbarFloatingMargin: "$space$10",
+      $$navbarContainerMaxWidth: "$breakpoints$lg",
+      $$navbarShadow: "$shadows$md",
+      $$navbarBorderWeight: borderWeightValue,
+      $$navbarBlur: "10px",
+    },
+  });
 
-  const {theme, isDark} = useTheme();
+  navbarGlobalCss();
 
   useScrollPosition({
     elementRef: parentRef,
@@ -95,18 +149,21 @@ export function useNavbar(props: UseNavbarProps = {}) {
       ...customCssObject,
       ...css,
     };
-  }, [css, isDark, theme?.colors, variant, shouldHideOnScroll, sticky]);
+  }, [css, theme?.colors, variant, shouldHideOnScroll, sticky]);
 
   return {
     css,
     variant,
     sticky,
+    isBordered,
     containerCss,
     navbarCss,
     parentRef,
+    borderWeight,
     shouldHideOnScroll,
-    isListOpen,
-    setIsListOpen,
+    disableBlur,
+    isCollapseOpen,
+    setIsCollapseOpen,
     className,
     otherProps,
   };
diff --git a/packages/react/src/use-intersection-observer/index.ts b/packages/react/src/use-intersection-observer/index.ts
new file mode 100644
index 0000000000..98f7333874
--- /dev/null
+++ b/packages/react/src/use-intersection-observer/index.ts
@@ -0,0 +1,3 @@
+import useIntersectionObserver from "./use-intersection-observer";
+
+export default useIntersectionObserver;
diff --git a/packages/react/src/use-intersection-observer/use-intersection-observer.ts b/packages/react/src/use-intersection-observer/use-intersection-observer.ts
new file mode 100644
index 0000000000..db2b2c1260
--- /dev/null
+++ b/packages/react/src/use-intersection-observer/use-intersection-observer.ts
@@ -0,0 +1,40 @@
+import {RefObject, useEffect, useState} from "react";
+
+interface Args extends IntersectionObserverInit {
+  freezeOnceVisible?: boolean;
+}
+
+function useIntersectionObserver(
+  elementRef: RefObject<Element>,
+  {threshold = 0, root = null, rootMargin = "0%", freezeOnceVisible = false}: Args = {},
+) {
+  const [entry, setEntry] = useState<IntersectionObserverEntry | null>();
+
+  const isFrozen = entry?.isIntersecting && freezeOnceVisible;
+  const isVisible = !!entry?.isIntersecting;
+
+  const updateEntry = ([entry]: IntersectionObserverEntry[]): void => {
+    setEntry(entry);
+  };
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const node = elementRef?.current; // DOM Ref
+    const hasIOSupport = !!window.IntersectionObserver;
+
+    if (!hasIOSupport || isFrozen || !node) return;
+
+    const observerParams = {threshold, root, rootMargin};
+    const observer = new IntersectionObserver(updateEntry, observerParams);
+
+    observer.observe(node);
+
+    return () => observer.disconnect();
+  }, [elementRef, threshold, root, rootMargin, isFrozen]);
+
+  return {entry, setEntry, isVisible, isFrozen};
+}
+
+export default useIntersectionObserver;
diff --git a/packages/react/src/utils/color.ts b/packages/react/src/utils/color.ts
index df74c9a693..503f527b9d 100644
--- a/packages/react/src/utils/color.ts
+++ b/packages/react/src/utils/color.ts
@@ -1,13 +1,17 @@
 import {normalColors, simpleColors} from "./prop-types";
 
-export const getCssVar = (name: string) => {
-  if (typeof document !== "undefined" || !name) {
-    const property = isCssVar(name) ? name.replace("var(", "").replace(")", "") : `--${name}`;
-
-    return getComputedStyle(document.documentElement).getPropertyValue(property);
+export const getCssVar = (name: string, parent: HTMLElement | null | undefined = null) => {
+  if (typeof document === "undefined" || !name) {
+    return "";
   }
-
-  return "";
+  const target = parent || document.documentElement;
+  const property = isCssVar(name)
+    ? name.replace("var(", "").replace(")", "")
+    : name.includes("--")
+    ? name
+    : `--${name}`;
+
+  return getComputedStyle(target).getPropertyValue(property);
 };
 
 export const isCssVar = (property: string) => {
diff --git a/packages/react/tests/.babelrc.js b/packages/react/tests/.babelrc.js
index 49b82dc483..2c74d11d5a 100644
--- a/packages/react/tests/.babelrc.js
+++ b/packages/react/tests/.babelrc.js
@@ -1,4 +1,4 @@
 module.exports = {
-  presets: ['@babel/env', '@babel/react', '@babel/typescript'],
-  plugins: ['styled-jsx/babel-test', '@babel/plugin-transform-runtime'],
+  presets: ["@babel/env", "@babel/react", "@babel/typescript"],
+  plugins: ["styled-jsx/babel-test", "@babel/plugin-transform-runtime"],
 };
diff --git a/packages/react/tests/jest-setup.js b/packages/react/tests/jest-setup.js
index 7b66fe1604..1dff4c40e7 100644
--- a/packages/react/tests/jest-setup.js
+++ b/packages/react/tests/jest-setup.js
@@ -3,4 +3,3 @@ const enzyme = require("enzyme");
 const Adapter = require("@wojtekmaj/enzyme-adapter-react-17");
 
 enzyme.configure({adapter: new Adapter()});
-
diff --git a/packages/react/tests/utils.ts b/packages/react/tests/utils.ts
index 369b3117d6..81c108f923 100644
--- a/packages/react/tests/utils.ts
+++ b/packages/react/tests/utils.ts
@@ -1,16 +1,13 @@
-import { act } from 'react-dom/test-utils';
-import { ReactWrapper } from 'enzyme';
+import {act} from "react-dom/test-utils";
+import {ReactWrapper} from "enzyme";
 // @ts-ignore
-import mediaQuery from 'css-mediaquery';
+import mediaQuery from "css-mediaquery";
 
 export const sleep = (time: number) => {
   return new Promise((resolve) => setTimeout(resolve, time));
 };
 
-export const updateWrapper = async (
-  wrapper: ReactWrapper,
-  time: number = 0
-) => {
+export const updateWrapper = async (wrapper: ReactWrapper, time: number = 0) => {
   await act(async () => {
     await sleep(time);
     wrapper.update();
@@ -18,7 +15,7 @@ export const updateWrapper = async (
 };
 
 export const mockNativeEvent = (fn: Function = () => {}) => ({
-  nativeEvent: { stopImmediatePropagation: fn }
+  nativeEvent: {stopImmediatePropagation: fn},
 });
 
 export const nativeEvent = mockNativeEvent();
@@ -26,18 +23,19 @@ export const nativeEvent = mockNativeEvent();
 export const mediaListMock = (width: number) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (window as any).listeners = [] as Array<Function>;
+
   return (query: string) => {
     return {
-      matches: mediaQuery.match(query, { width }),
+      matches: mediaQuery.match(query, {width}),
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       addListener: (fn: Function) => (window as any).listeners.push(fn),
-      removeListener: () => {}
+      removeListener: () => {},
     };
   };
 };
 
 export function triggerPress(element: ReactWrapper<unknown>) {
-  element.simulate('mouseDown');
-  element.simulate('mouseUp');
-  element.simulate('click');
+  element.simulate("mouseDown");
+  element.simulate("mouseUp");
+  element.simulate("click");
 }

From f39d0cb26b26205526ce73ba2acc943f91cf4a10 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 31 Jul 2022 15:25:42 -0300
Subject: [PATCH 058/106] feat(react-navbar): collapse items transition
 improved

---
 packages/react/src/navbar/navbar-collapse.tsx | 43 +++++++++++++++----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/navbar/navbar-collapse.tsx b/packages/react/src/navbar/navbar-collapse.tsx
index 2711c7b183..ff932f299f 100644
--- a/packages/react/src/navbar/navbar-collapse.tsx
+++ b/packages/react/src/navbar/navbar-collapse.tsx
@@ -1,10 +1,10 @@
-import React, {useEffect, useMemo} from "react";
+import React, {useState, useEffect, useMemo} from "react";
 
 import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
-import {__DEV__} from "../utils/assertion";
 import useIntersectionObserver from "../use-intersection-observer";
+import {__DEV__} from "../utils/assertion";
 
 import {useNavbarContext} from "./navbar-context";
 import {
@@ -20,10 +20,13 @@ interface Props extends HTMLNextUIProps<"ul"> {}
 export type NavbarCollapseProps = Props & NavbarCollapseVariantsProps;
 
 const NavbarCollapseItem = forwardRef<
-  HTMLNextUIProps<"li"> & NavbarCollapseItemVariantsProps,
+  HTMLNextUIProps<"li"> &
+    NavbarCollapseItemVariantsProps & {
+      transitionDelay?: number; // in seconds
+    },
   "li"
 >((props, ref) => {
-  const {children, className, disableAnimation, style, css, ...otherProps} = props;
+  const {children, className, transitionDelay, disableAnimation, style, css, ...otherProps} = props;
   const context = useNavbarContext();
 
   const domRef = useDOMRef(ref);
@@ -40,16 +43,19 @@ const NavbarCollapseItem = forwardRef<
   }, [isVisible, context.isCollapseOpen]);
 
   const itemStyle = useMemo(() => {
+    const timeDelay = isVisible ? transitionDelay : 0;
+
     return {
       "--nextui--collapseItemOpacity": isVisible ? 1 : 0,
       "--nextui--collapseItemTransform": isVisible
         ? "matrix(1, 0, 0, 1, 0, 0)"
         : "matrix(0.85, 0, 0, 0.85, 5, 20)",
-      "--netxui--collapseItemTransition": !disableAnimation
-        ? "opacity 1s cubic-bezier(0.5, 0, 0, 1) 0s, transform 1s cubic-bezier(0.5, 0, 0, 1) 0s"
-        : "none",
+      "--netxui--collapseItemTransition":
+        !disableAnimation && context.isCollapseOpen
+          ? `opacity 1s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s, transform 1s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s`
+          : "none",
     };
-  }, [disableAnimation, isVisible]);
+  }, [disableAnimation, isVisible, transitionDelay, context.isCollapseOpen]);
 
   return (
     <StyledNavbarCollapseItem
@@ -73,6 +79,8 @@ const NavbarCollapseItem = forwardRef<
 const NavbarCollapse = forwardRef<NavbarCollapseProps, "ul">((props, ref) => {
   const {children, className, ...otherProps} = props;
 
+  const [hasScrolled, setHasScrolled] = useState(false);
+
   const context = useNavbarContext();
   const domRef = useDOMRef(ref);
 
@@ -82,7 +90,20 @@ const NavbarCollapse = forwardRef<NavbarCollapseProps, "ul">((props, ref) => {
       domRef.current?.scrollTo({
         top: 0,
       });
+      setHasScrolled(false);
     }
+
+    const handleScroll = () => {
+      if (domRef.current?.scrollTop > 0 && !hasScrolled) {
+        setHasScrolled(true);
+      }
+    };
+
+    domRef.current?.addEventListener("scroll", handleScroll);
+
+    return () => {
+      domRef.current?.removeEventListener("scroll", handleScroll);
+    };
   }, [context.isCollapseOpen]);
 
   const items = [
@@ -114,7 +135,11 @@ const NavbarCollapse = forwardRef<NavbarCollapseProps, "ul">((props, ref) => {
       <StyledNavbarCollapseWrapper className="nextui-navbar-collapse-wrapper">
         {children}
         {items.map((item, index) => (
-          <NavbarCollapseItem key={`${item}-${index}`} className="nextui-navbar-collapse-item">
+          <NavbarCollapseItem
+            key={`${item}-${index}`}
+            className="nextui-navbar-collapse-item"
+            transitionDelay={hasScrolled ? 0 : index / items.length}
+          >
             {item}
           </NavbarCollapseItem>
         ))}

From c42836fe75e48003f15bb45e019c656098811f99 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 31 Jul 2022 18:03:01 -0300
Subject: [PATCH 059/106] feat(react-navbar): collapse & collapse item
 separated, transition delay managed internally

---
 packages/react/src/navbar/index.ts            |   2 +
 .../src/navbar/navbar-collapse-context.ts     |   9 +
 .../react/src/navbar/navbar-collapse-item.tsx | 108 ++++++++++++
 packages/react/src/navbar/navbar-collapse.tsx | 157 +++---------------
 packages/react/src/navbar/navbar.stories.tsx  |  24 ++-
 packages/react/src/navbar/navbar.tsx          |   2 +
 .../react/src/navbar/use-navbar-collapse.ts   |  68 ++++++++
 packages/react/src/utils/dom.ts               |   2 +-
 8 files changed, 232 insertions(+), 140 deletions(-)
 create mode 100644 packages/react/src/navbar/navbar-collapse-context.ts
 create mode 100644 packages/react/src/navbar/navbar-collapse-item.tsx
 create mode 100644 packages/react/src/navbar/use-navbar-collapse.ts

diff --git a/packages/react/src/navbar/index.ts b/packages/react/src/navbar/index.ts
index b8b5701a92..de97a7bec0 100644
--- a/packages/react/src/navbar/index.ts
+++ b/packages/react/src/navbar/index.ts
@@ -4,6 +4,7 @@ import NavbarItem from "./navbar-item";
 import NavbarLink from "./navbar-link";
 import NavbarToggle from "./navbar-toggle";
 import NavbarCollapse from "./navbar-collapse";
+import NavbarCollapseItem from "./navbar-collapse-item";
 import Navbar from "./navbar";
 
 Navbar.Brand = NavbarBrand;
@@ -12,5 +13,6 @@ Navbar.Item = NavbarItem;
 Navbar.Link = NavbarLink;
 Navbar.Toggle = NavbarToggle;
 Navbar.Collapse = NavbarCollapse;
+Navbar.CollapseItem = NavbarCollapseItem;
 
 export default Navbar;
diff --git a/packages/react/src/navbar/navbar-collapse-context.ts b/packages/react/src/navbar/navbar-collapse-context.ts
new file mode 100644
index 0000000000..c20e2ffdf4
--- /dev/null
+++ b/packages/react/src/navbar/navbar-collapse-context.ts
@@ -0,0 +1,9 @@
+import {createContext} from "../utils/context";
+
+import {UseNavbarCollapseReturn} from "./use-navbar-collapse";
+
+export const [NavbarCollapseProvider, useNavbarCollapseContext] =
+  createContext<UseNavbarCollapseReturn>({
+    strict: false,
+    name: "NavbarCollapseContext",
+  });
diff --git a/packages/react/src/navbar/navbar-collapse-item.tsx b/packages/react/src/navbar/navbar-collapse-item.tsx
new file mode 100644
index 0000000000..9f520a1d95
--- /dev/null
+++ b/packages/react/src/navbar/navbar-collapse-item.tsx
@@ -0,0 +1,108 @@
+import React, {useEffect, useMemo} from "react";
+
+import {HTMLNextUIProps, forwardRef} from "../utils/system";
+import {useDOMRef} from "../utils/dom";
+import clsx from "../utils/clsx";
+import useIntersectionObserver from "../use-intersection-observer";
+import {__DEV__} from "../utils/assertion";
+
+import {useNavbarContext} from "./navbar-context";
+import {useNavbarCollapseContext} from "./navbar-collapse-context";
+import {StyledNavbarCollapseItem, NavbarCollapseItemVariantsProps} from "./navbar.styles";
+
+export type NavbarCollapseItemProps = HTMLNextUIProps<"li"> &
+  NavbarCollapseItemVariantsProps & {
+    transitionDelay?: number; // in seconds
+  };
+
+const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref) => {
+  const {
+    children,
+    className,
+    transitionDelay = 0,
+    disableAnimation,
+    style,
+    css,
+    ...otherProps
+  } = props;
+
+  const context = useNavbarContext();
+  const collapseContext = useNavbarCollapseContext();
+
+  const domRef = useDOMRef(ref);
+
+  const {isVisible, setEntry} = useIntersectionObserver(domRef, {
+    root: context?.parentRef?.current,
+    freezeOnceVisible: context.isCollapseOpen,
+  });
+
+  useEffect(() => {
+    if (!context.isCollapseOpen && isVisible) {
+      setEntry(null);
+    }
+  }, [isVisible, context.isCollapseOpen]);
+
+  const index = useMemo(() => {
+    if (collapseContext?.items) {
+      return collapseContext.items?.findIndex((item: any) => item?.props?.children === children);
+    }
+
+    return -1;
+  }, [collapseContext?.items]);
+
+  const defaultDelay = useMemo(
+    () =>
+      collapseContext.items && index > -1
+        ? index / collapseContext.items.length + transitionDelay
+        : 0.1,
+    [index, transitionDelay, collapseContext?.items],
+  );
+
+  const itemStyle = useMemo(() => {
+    const timeDelay = isVisible && !collapseContext.hasScrolled ? defaultDelay : 0;
+
+    return {
+      "--nextui--collapseItemOpacity": isVisible ? 1 : 0,
+      "--nextui--collapseItemTransform": isVisible
+        ? "matrix(1, 0, 0, 1, 0, 0)"
+        : "matrix(0.85, 0, 0, 0.85, 5, 20)",
+      "--netxui--collapseItemTransition":
+        !disableAnimation && context.isCollapseOpen
+          ? `opacity 1s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s, transform 1s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s`
+          : "none",
+    };
+  }, [
+    index,
+    isVisible,
+    disableAnimation,
+    defaultDelay,
+    context.isCollapseOpen,
+    collapseContext.hasScrolled,
+  ]);
+
+  return (
+    <StyledNavbarCollapseItem
+      ref={domRef}
+      className={clsx("nextui-navbar-collapse-item", className)}
+      css={{
+        opacity: "var(--nextui--collapseItemOpacity)",
+        transition: "var(--netxui--collapseItemTransition)",
+        transform: "var(--nextui--collapseItemTransform)",
+        ...css,
+      }}
+      disableAnimation={disableAnimation}
+      style={{...style, ...itemStyle}}
+      {...otherProps}
+    >
+      {children}
+    </StyledNavbarCollapseItem>
+  );
+});
+
+if (__DEV__) {
+  NavbarCollapseItem.displayName = "NextUI.NavbarCollapseItem";
+}
+
+NavbarCollapseItem.toString = () => ".nextui-navbar-collapse-item";
+
+export default NavbarCollapseItem;
diff --git a/packages/react/src/navbar/navbar-collapse.tsx b/packages/react/src/navbar/navbar-collapse.tsx
index ff932f299f..762061d763 100644
--- a/packages/react/src/navbar/navbar-collapse.tsx
+++ b/packages/react/src/navbar/navbar-collapse.tsx
@@ -1,150 +1,31 @@
-import React, {useState, useEffect, useMemo} from "react";
+import React from "react";
 
-import {HTMLNextUIProps, forwardRef} from "../utils/system";
-import {useDOMRef} from "../utils/dom";
+import {forwardRef} from "../utils/system";
 import clsx from "../utils/clsx";
-import useIntersectionObserver from "../use-intersection-observer";
 import {__DEV__} from "../utils/assertion";
 
-import {useNavbarContext} from "./navbar-context";
-import {
-  StyledNavbarCollapse,
-  StyledNavbarCollapseWrapper,
-  StyledNavbarCollapseItem,
-  NavbarCollapseItemVariantsProps,
-  NavbarCollapseVariantsProps,
-} from "./navbar.styles";
+import {NavbarCollapseProvider} from "./navbar-collapse-context";
+import {useNavbarCollapse, UseNavbarCollapseProps} from "./use-navbar-collapse";
+import {StyledNavbarCollapse, StyledNavbarCollapseWrapper} from "./navbar.styles";
 
-interface Props extends HTMLNextUIProps<"ul"> {}
-
-export type NavbarCollapseProps = Props & NavbarCollapseVariantsProps;
-
-const NavbarCollapseItem = forwardRef<
-  HTMLNextUIProps<"li"> &
-    NavbarCollapseItemVariantsProps & {
-      transitionDelay?: number; // in seconds
-    },
-  "li"
->((props, ref) => {
-  const {children, className, transitionDelay, disableAnimation, style, css, ...otherProps} = props;
-  const context = useNavbarContext();
-
-  const domRef = useDOMRef(ref);
-
-  const {isVisible, setEntry} = useIntersectionObserver(domRef, {
-    root: context?.parentRef?.current,
-    freezeOnceVisible: context.isCollapseOpen,
-  });
-
-  useEffect(() => {
-    if (!context.isCollapseOpen && isVisible) {
-      setEntry(null);
-    }
-  }, [isVisible, context.isCollapseOpen]);
-
-  const itemStyle = useMemo(() => {
-    const timeDelay = isVisible ? transitionDelay : 0;
-
-    return {
-      "--nextui--collapseItemOpacity": isVisible ? 1 : 0,
-      "--nextui--collapseItemTransform": isVisible
-        ? "matrix(1, 0, 0, 1, 0, 0)"
-        : "matrix(0.85, 0, 0, 0.85, 5, 20)",
-      "--netxui--collapseItemTransition":
-        !disableAnimation && context.isCollapseOpen
-          ? `opacity 1s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s, transform 1s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s`
-          : "none",
-    };
-  }, [disableAnimation, isVisible, transitionDelay, context.isCollapseOpen]);
-
-  return (
-    <StyledNavbarCollapseItem
-      ref={domRef}
-      className={clsx("nextui-navbar-collapse-item", className)}
-      css={{
-        opacity: "var(--nextui--collapseItemOpacity)",
-        transition: "var(--netxui--collapseItemTransition)",
-        transform: "var(--nextui--collapseItemTransform)",
-        ...css,
-      }}
-      disableAnimation={disableAnimation}
-      style={{...style, ...itemStyle}}
-      {...otherProps}
-    >
-      {children}
-    </StyledNavbarCollapseItem>
-  );
-});
+export type NavbarCollapseProps = UseNavbarCollapseProps;
 
 const NavbarCollapse = forwardRef<NavbarCollapseProps, "ul">((props, ref) => {
-  const {children, className, ...otherProps} = props;
-
-  const [hasScrolled, setHasScrolled] = useState(false);
-
-  const context = useNavbarContext();
-  const domRef = useDOMRef(ref);
-
-  useEffect(() => {
-    if (!context.isCollapseOpen) {
-      // restore scroll to the top of the collapse
-      domRef.current?.scrollTo({
-        top: 0,
-      });
-      setHasScrolled(false);
-    }
-
-    const handleScroll = () => {
-      if (domRef.current?.scrollTop > 0 && !hasScrolled) {
-        setHasScrolled(true);
-      }
-    };
-
-    domRef.current?.addEventListener("scroll", handleScroll);
-
-    return () => {
-      domRef.current?.removeEventListener("scroll", handleScroll);
-    };
-  }, [context.isCollapseOpen]);
-
-  const items = [
-    "Store",
-    "Mac",
-    "iPad",
-    "iPhone",
-    "Watch",
-    "TV & Home",
-    "Music",
-    "Support",
-    "Store",
-    "Mac",
-    "iPad",
-    "iPhone",
-    "Watch",
-    "TV & Home",
-    "Music",
-    "Support",
-  ];
+  const context = useNavbarCollapse({ref, ...props});
 
   return (
-    <StyledNavbarCollapse
-      ref={domRef}
-      className={clsx("nextui-navbar-collapse", className)}
-      isOpen={context.isCollapseOpen}
-      {...otherProps}
-    >
-      <StyledNavbarCollapseWrapper className="nextui-navbar-collapse-wrapper">
-        {children}
-        {items.map((item, index) => (
-          <NavbarCollapseItem
-            key={`${item}-${index}`}
-            className="nextui-navbar-collapse-item"
-            transitionDelay={hasScrolled ? 0 : index / items.length}
-          >
-            {item}
-          </NavbarCollapseItem>
-        ))}
-      </StyledNavbarCollapseWrapper>
-    </StyledNavbarCollapse>
+    <NavbarCollapseProvider value={context}>
+      <StyledNavbarCollapse
+        ref={context.domRef}
+        className={clsx("nextui-navbar-collapse", context.className)}
+        isOpen={context.isOpen}
+        {...context.otherProps}
+      >
+        <StyledNavbarCollapseWrapper className="nextui-navbar-collapse-wrapper">
+          {context.children}
+        </StyledNavbarCollapseWrapper>
+      </StyledNavbarCollapse>
+    </NavbarCollapseProvider>
   );
 });
 
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 19ef37f78f..4819013978 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -185,6 +185,24 @@ export const HideOnScroll = () => {
 
 export const Toggle = () => {
   const parentRef = React.useRef(null);
+  const collapseItems = [
+    "Store",
+    "Mac",
+    "iPad",
+    "iPhone",
+    "Watch",
+    "TV & Home",
+    "Music",
+    "Support",
+    "Store",
+    "Mac",
+    "iPad",
+    "iPhone",
+    "Watch",
+    "TV & Home",
+    "Music",
+    "Support",
+  ];
 
   return (
     <App ref={parentRef}>
@@ -222,7 +240,11 @@ export const Toggle = () => {
             </Button>
           </Navbar.Item>
         </Navbar.Content>
-        <Navbar.Collapse />
+        <Navbar.Collapse>
+          {collapseItems.map((item, index) => (
+            <Navbar.CollapseItem key={`${item}-${index}`}>{item}</Navbar.CollapseItem>
+          ))}
+        </Navbar.Collapse>
       </Navbar>
     </App>
   );
diff --git a/packages/react/src/navbar/navbar.tsx b/packages/react/src/navbar/navbar.tsx
index 12667866dd..577ff3cd60 100644
--- a/packages/react/src/navbar/navbar.tsx
+++ b/packages/react/src/navbar/navbar.tsx
@@ -14,6 +14,7 @@ import NavbarItem from "./navbar-item";
 import NavbarLink from "./navbar-link";
 import NavbarToggle from "./navbar-toggle";
 import NavbarCollapse from "./navbar-collapse";
+import NavbarCollapseItem from "./navbar-collapse-item";
 import {NavbarProvider} from "./navbar-context";
 import {useNavbar, UseNavbarProps} from "./use-navbar";
 import {StyledNavbar, StyledNavbarContainer} from "./navbar.styles";
@@ -66,6 +67,7 @@ type NavbarComponent<T, P = {}> = React.ForwardRefExoticComponent<
   Link: typeof NavbarLink;
   Toggle: typeof NavbarToggle;
   Collapse: typeof NavbarCollapse;
+  CollapseItem: typeof NavbarCollapseItem;
 };
 
 export default Navbar as NavbarComponent<HTMLElement, NavbarProps>;
diff --git a/packages/react/src/navbar/use-navbar-collapse.ts b/packages/react/src/navbar/use-navbar-collapse.ts
new file mode 100644
index 0000000000..6c48d1ef0e
--- /dev/null
+++ b/packages/react/src/navbar/use-navbar-collapse.ts
@@ -0,0 +1,68 @@
+import type {ForwardedRef} from "react";
+
+import React, {useState, useEffect, useMemo} from "react";
+
+import {HTMLNextUIProps} from "../utils/system";
+import {useDOMRef} from "../utils/dom";
+import {pickChild} from "../utils/collections";
+
+import NavbarCollapseItem from "./navbar-collapse-item";
+import {NavbarCollapseVariantsProps} from "./navbar.styles";
+import {useNavbarContext} from "./navbar-context";
+
+interface Props extends Omit<HTMLNextUIProps<"ul">, keyof NavbarCollapseVariantsProps> {
+  ref?: ForwardedRef<any>;
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+export type UseNavbarCollapseProps = Props & NavbarCollapseVariantsProps;
+
+/**
+ * @internal
+ */
+export function useNavbarCollapse(props: UseNavbarCollapseProps = {}) {
+  const {css, children, ref, className, ...otherProps} = props;
+
+  const [hasScrolled, setHasScrolled] = useState(false);
+
+  const context = useNavbarContext();
+  const domRef = useDOMRef(ref);
+
+  const [, items] = pickChild(children, NavbarCollapseItem);
+
+  useEffect(() => {
+    if (!context.isCollapseOpen) {
+      // restore scroll to the top of the collapse
+      domRef.current &&
+        domRef.current?.scrollTo({
+          top: 0,
+        });
+      setHasScrolled(false);
+    }
+
+    const handleScroll = () => {
+      if (domRef.current && domRef.current?.scrollTop > 0 && !hasScrolled) {
+        setHasScrolled(true);
+      }
+    };
+
+    domRef.current?.addEventListener("scroll", handleScroll);
+
+    return () => {
+      domRef.current?.removeEventListener("scroll", handleScroll);
+    };
+  }, [context.isCollapseOpen]);
+
+  return {
+    css,
+    domRef,
+    children,
+    items,
+    isOpen: context.isCollapseOpen,
+    hasScrolled,
+    className,
+    otherProps,
+  };
+}
+
+export type UseNavbarCollapseReturn = ReturnType<typeof useNavbarCollapse>;
diff --git a/packages/react/src/utils/dom.ts b/packages/react/src/utils/dom.ts
index bc46fb9ec2..6a570bdfec 100644
--- a/packages/react/src/utils/dom.ts
+++ b/packages/react/src/utils/dom.ts
@@ -119,7 +119,7 @@ export function createFocusableRef<T extends HTMLElement = HTMLElement>(
 }
 
 export function useDOMRef<T extends HTMLElement = HTMLElement>(
-  ref: RefObject<T | null> | Ref<T | null>,
+  ref?: RefObject<T | null> | Ref<T | null>,
 ) {
   const domRef = useRef<T>(null);
 

From 7c2361be78e5d5a8b1162e4908bd425a016950f2 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Mon, 1 Aug 2022 15:59:09 -0300
Subject: [PATCH 060/106] Revert "Merge pull request #645 from
 MForMarlon/patch-1"

This reverts commit 2077db183428725374bb2585b253942ba5b252b3, reversing
changes made to 3c485281ca77c9e224b7e53283620d98cfb06da7.
---
 apps/docs/content/docs/components/image.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/docs/content/docs/components/image.mdx b/apps/docs/content/docs/components/image.mdx
index 383a0b9d16..ff7085e2ba 100644
--- a/apps/docs/content/docs/components/image.mdx
+++ b/apps/docs/content/docs/components/image.mdx
@@ -36,7 +36,7 @@ import { Image } from '@nextui-org/react';
 
 <Playground
   title="Object-Fit"
-  desc="This property tells the content to fill the container in a variety of ways."
+  desc="This property tells the content to fill the container in a variety of ways. "
   files={imageContent.objectFit}
 />
 
@@ -51,14 +51,14 @@ import { Image } from '@nextui-org/react';
 | Attribute        | Type                           | Description                                         | Default      |
 | ---------------- | ------------------------------ | --------------------------------------------------- | ------------ |
 | **src**          | `string`                       | Image source (local or remote)                      | -            |
-| **autoResize**   | `boolean`                      | Resize Image to fit screen                          | `false`      |
+| **autoResize**   | `boolean`                      | Resize Image to fits screen                         | `false`      |
 | **showSkeleton** | `boolean`                      | Shows loading Skeleton while image is loading       | `true`       |
 | **objectFit**    | [ObjectFit](#image-object-fit) | Property tells the content to fill the container    | `scale-down` |
-| **width**        | `number`                       | Specifies Image Width                               | -            |
-| **height**       | `number`                       | Specifies Image Height                              | -            |
+| **width**        | `string`                       | Specifies Image Width                               | -            |
+| **height**       | `string`                       | Specifies Image Height                              | -            |
 | **maxDelay**     | `number`                       | Specifies how long Image Skeleton Renders Animation | `3000`       |
-| **className**    | `string`                       | Give Image A Class Name                             | -            |
-| **containerCss** | `Stitches.CSS`                 | Override Default Image Container Style              | -            |
+| **className**    | `string`                       | Give Image A ClasName                               | -            |
+| **containerCss** | `Stitches.CSS`                 | Override Default Image Contianer Style              | -            |
 | **css**          | `Stitches.CSS`                 | Override Default CSS style                          | -            |
 | **as**           | `keyof JSX.IntrinsicElements`  | Changes which tag component outputs                 | `img`        |
 | ...              | `ImageHTMLAttributes`          | Native props                                        | -            |

From cbbd5ae9fe159cd1e4a6a0051f3c2ba94745996f Mon Sep 17 00:00:00 2001
From: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
Date: Wed, 3 Aug 2022 09:07:58 +0800
Subject: [PATCH 061/106] chore(repo): Force build and upgrade some versions of
 action

---
 .github/workflows/main.yaml | 57 +++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index dad14820f7..e8e3a1a78c 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -11,7 +11,7 @@ on:
 
 jobs:
   avoid_reduncy:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-20.04
     if: ${{ github.event_name == 'push' }}
     steps:
       - name: Cancel Previous Redundant Builds
@@ -20,54 +20,54 @@ jobs:
           access_token: ${{ github.token }}
 
   lint:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-20.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
-          node-version: '14'
+          node-version: '16'
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Lint
         run: yarn lint
 
   build:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-20.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
-          node-version: '14'
+          node-version: '16'
       - name: Install dependencies
         run: yarn install --frozen-lockfile
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         with:
           path: ${{ github.workspace }}/.next/cache
           # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
       - name: Build
         run: yarn build
 
   tests:
     needs: [lint, build]
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-20.04
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
-          node-version: '14'
+          node-version: '16'
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Test
@@ -78,16 +78,16 @@ jobs:
         
   publish:
     needs: [build, tests]
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-20.04
     if: ${{ github.event_name == 'push' }}
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
-          node-version: '14'
+          node-version: '16'
       - name: Install dependencies
-        run: yarn install --frozen-lockfile     
+        run: yarn install --frozen-lockfile
       - name: Pre puiblish NextUI package
         run: yarn pre-publish:nextui
       - uses: JS-DevTools/npm-publish@v1
@@ -108,10 +108,10 @@ jobs:
 
   deploy:
     needs: [publish]
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-20.04
     if: ${{ github.event_name == 'push' }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - name: Deploy to Vercel
@@ -120,7 +120,8 @@ jobs:
           vercel-token: ${{ secrets.VERCEL_TOKEN }} 
           github-comment: true
           github-token: ${{ github.token }}
-          vercel-args: '--prod'
+          # Skip the build cache and production deploy
+          vercel-args: '--force --prod'
           vercel-org-id: ${{ secrets.VERCEL_ORG_ID}}
           vercel-project-name: ${{ secrets.VERCEL_PROJECT_NAME}}
           vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID}} 
@@ -128,16 +129,16 @@ jobs:
 
   update_algolia_index:
     needs: [publish]
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-20.04
     if: ${{ github.event_name == 'push' }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
-          node-version: '14'
+          node-version: '16'
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Upload docs on Algolia

From 893dc53e30c4dc2c395b96c1ecadfd09ba1b466e Mon Sep 17 00:00:00 2001
From: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
Date: Wed, 3 Aug 2022 09:45:57 +0800
Subject: [PATCH 062/106] chore(docs): remove deploy workflow and update vercel
 config

---
 .github/workflows/main.yaml | 21 ---------------------
 vercel.json                 | 10 +++++-----
 2 files changed, 5 insertions(+), 26 deletions(-)

diff --git a/.github/workflows/main.yaml b/.github/workflows/main.yaml
index e8e3a1a78c..bfb4e79269 100644
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -106,27 +106,6 @@ jobs:
           tag_prefix: "v"
           package_root: "./packages/react"
 
-  deploy:
-    needs: [publish]
-    runs-on: ubuntu-20.04
-    if: ${{ github.event_name == 'push' }}
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - name: Deploy to Vercel
-        uses: amondnet/vercel-action@v20
-        with:
-          vercel-token: ${{ secrets.VERCEL_TOKEN }} 
-          github-comment: true
-          github-token: ${{ github.token }}
-          # Skip the build cache and production deploy
-          vercel-args: '--force --prod'
-          vercel-org-id: ${{ secrets.VERCEL_ORG_ID}}
-          vercel-project-name: ${{ secrets.VERCEL_PROJECT_NAME}}
-          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID}} 
-          working-directory: './apps/docs'
-
   update_algolia_index:
     needs: [publish]
     runs-on: ubuntu-20.04
diff --git a/vercel.json b/vercel.json
index 0aa84c367c..6ecd5c3613 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,6 +1,6 @@
 {
-    "version": 2,
-    "github": {
-      "enabled": false
-    }
-  }
\ No newline at end of file
+  "github": {
+    "silent": false,
+    "autoJobCancelation": true
+  }
+}
\ No newline at end of file

From 39c8a1b3be5fced630ac4976853e8ecc865e01c2 Mon Sep 17 00:00:00 2001
From: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
Date: Wed, 3 Aug 2022 20:32:14 +0800
Subject: [PATCH 063/106] fix(docs): remove wrong imports in custom cells
 example

---
 .../content/components/table/custom-cells.ts  | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/apps/docs/content/components/table/custom-cells.ts b/apps/docs/content/components/table/custom-cells.ts
index 435493f9d7..0ec3397fef 100644
--- a/apps/docs/content/components/table/custom-cells.ts
+++ b/apps/docs/content/components/table/custom-cells.ts
@@ -54,14 +54,14 @@ export const IconButton = styled('button', {
   }
 });`;
 
-const EyeIconTs = `import { React } from '@nextui-org/react';\n
-type IconProps = {
+const EyeIconTs = `type IconProps = {
   fill?: string;
   size?: string | number;
   height?: string | number;
   width?: string | number;
   label?: string;
 }
+
 export const EyeIcon: React.FC<IconProps> = ({
   fill,
   size,
@@ -96,14 +96,14 @@ export const EyeIcon: React.FC<IconProps> = ({
   );
 };`;
 
-const EditIconTs = `import { React } from '@nextui-org/react';\n
-type IconProps = {
+const EditIconTs = `type IconProps = {
   fill?: string;
   size?: string | number;
   height?: string | number;
   width?: string | number;
   label?: string;
 }
+
 export const EditIcon: React.FC<IconProps> = ({
   fill,
   size,
@@ -148,14 +148,14 @@ export const EditIcon: React.FC<IconProps> = ({
   );
 };`;
 
-const DeleteIconTs = `import { React } from '@nextui-org/react';\n
-type IconProps = {
+const DeleteIconTs = `type IconProps = {
   fill?: string;
   size?: string | number;
   height?: string | number;
   width?: string | number;
   label?: string;
 }
+
 export const DeleteIcon: React.FC<IconProps> = ({
   fill,
   size,
@@ -211,8 +211,7 @@ export const DeleteIcon: React.FC<IconProps> = ({
   );
 };`;
 
-const EyeIconJs = `import { React } from '@nextui-org/react';\n
-export const EyeIcon = ({
+const EyeIconJs = `export const EyeIcon = ({
   fill,
   size,
   height,
@@ -246,8 +245,7 @@ export const EyeIcon = ({
   );
 };`;
 
-const EditIconJs = `import { React } from '@nextui-org/react';\n
-export const EditIcon = ({
+const EditIconJs = `export const EditIcon = ({
   fill,
   size,
   height,
@@ -291,8 +289,7 @@ export const EditIcon = ({
   );
 };`;
 
-const DeleteIconJs = `import { React } from '@nextui-org/react';\n
-export const DeleteIcon = ({
+const DeleteIconJs = `export const DeleteIcon = ({
   fill,
   size,
   height,

From e818c425be292f3868d4c8891025d270b0a02826 Mon Sep 17 00:00:00 2001
From: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
Date: Wed, 3 Aug 2022 20:43:53 +0800
Subject: [PATCH 064/106] fix(docs): codesandbox error in content input

---
 apps/docs/content/components/input/content.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/content/components/input/content.ts b/apps/docs/content/components/input/content.ts
index 7fb26e8f17..3a0e27467e 100644
--- a/apps/docs/content/components/input/content.ts
+++ b/apps/docs/content/components/input/content.ts
@@ -58,7 +58,7 @@ const SunIcon = `export const SunIcon = ({
   );
 };`;
 
-const SendIcon = `const SendIcon = ({
+const SendIcon = `export const SendIcon = ({
   fill = "currentColor",
   filled,
   size,

From 53b5a49ecce0b4ebf6efb874f8b2c5490863e118 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 7 Aug 2022 18:15:19 -0300
Subject: [PATCH 065/106] fix(react-navbar): collapse height is auto adjusted
 according to the parent height

---
 packages/react/src/navbar/navbar-collapse.tsx |  1 +
 packages/react/src/navbar/navbar.styles.ts    | 15 ++++----
 .../react/src/navbar/use-navbar-collapse.ts   | 19 ++++++++++
 packages/react/src/navbar/use-navbar.ts       | 36 +++++++++++++------
 4 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/packages/react/src/navbar/navbar-collapse.tsx b/packages/react/src/navbar/navbar-collapse.tsx
index 762061d763..820664f353 100644
--- a/packages/react/src/navbar/navbar-collapse.tsx
+++ b/packages/react/src/navbar/navbar-collapse.tsx
@@ -18,6 +18,7 @@ const NavbarCollapse = forwardRef<NavbarCollapseProps, "ul">((props, ref) => {
       <StyledNavbarCollapse
         ref={context.domRef}
         className={clsx("nextui-navbar-collapse", context.className)}
+        css={context.collpaseCss}
         isOpen={context.isOpen}
         {...context.otherProps}
       >
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index 17d6059f1c..3dcca59b28 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -85,8 +85,10 @@ export const StyledNavbarCollapseItem = styled(StyledBaseNavbarItem, {
 });
 
 export const StyledNavbarCollapseWrapper = styled(StyledBaseNavbarList, {
+  py: "$8",
   px: "$$navbarPadding",
-  pb: "$8",
+  overflowY: "scroll",
+  maxHeight: "100%",
 });
 
 export const StyledNavbarCollapse = styled("div", {
@@ -103,18 +105,13 @@ export const StyledNavbarCollapse = styled("div", {
   height: "0px",
   zIndex: "$4",
   boxSizing: "border-box",
-  overflowX: "hidden",
-  overflowY: "scroll",
+  overflow: "hidden",
   variants: {
     isOpen: {
       true: {
-        pt: "$8",
         top: "$$navbarHeight",
-        pb: "calc($space$8 + $$navbarHeight * 1.5)",
-        height: "calc(100vh - $$navbarHeight)",
-        "@safari": {
-          pb: "calc($space$8 + $$navbarHeight * 1.8)",
-        },
+        pb: "$$navbarHeight",
+        height: "100vh",
       },
     },
     disableBlur: {
diff --git a/packages/react/src/navbar/use-navbar-collapse.ts b/packages/react/src/navbar/use-navbar-collapse.ts
index 6c48d1ef0e..75a9d2a99b 100644
--- a/packages/react/src/navbar/use-navbar-collapse.ts
+++ b/packages/react/src/navbar/use-navbar-collapse.ts
@@ -5,6 +5,7 @@ import React, {useState, useEffect, useMemo} from "react";
 import {HTMLNextUIProps} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import {pickChild} from "../utils/collections";
+import {arrayToObject} from "../utils/object";
 
 import NavbarCollapseItem from "./navbar-collapse-item";
 import {NavbarCollapseVariantsProps} from "./navbar.styles";
@@ -53,11 +54,29 @@ export function useNavbarCollapse(props: UseNavbarCollapseProps = {}) {
     };
   }, [context.isCollapseOpen]);
 
+  const collpaseCss = useMemo(() => {
+    const customCss = [];
+
+    if (context.parentRef && context.parentRef.current) {
+      customCss.push({
+        maxHeight: context.parentRef.current?.clientHeight,
+      });
+    }
+
+    const customCssObject = arrayToObject(customCss);
+
+    return {
+      ...customCssObject,
+      ...css,
+    };
+  }, [context.parentRef?.current, css]);
+
   return {
     css,
     domRef,
     children,
     items,
+    collpaseCss,
     isOpen: context.isCollapseOpen,
     hasScrolled,
     className,
diff --git a/packages/react/src/navbar/use-navbar.ts b/packages/react/src/navbar/use-navbar.ts
index 9499fd099d..623258d693 100644
--- a/packages/react/src/navbar/use-navbar.ts
+++ b/packages/react/src/navbar/use-navbar.ts
@@ -14,6 +14,12 @@ import {NavbarVariantsProps} from "./navbar.styles";
 
 interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps> {
   children?: React.ReactNode | React.ReactNode[];
+  /**
+   * The parent element where the navbar is placed within.
+   * This is used to determine the scroll position and whether the navbar should be hidden or not.
+   * @default `window`
+   */
+  parentRef?: React.RefObject<HTMLElement>;
   /**
    * The height of the navbar.
    * @default "76px" and "54px" for "isCompact=true".
@@ -35,15 +41,20 @@ interface Props extends Omit<HTMLNextUIProps<"nav">, keyof NavbarVariantsProps>
    */
   shouldHideOnScroll?: boolean;
   /**
-   * The parent element where the navbar is placed within.
-   * This is used to determine the scroll position and whether the navbar should be hidden or not.
-   * @default `window`
+   * Whether the navbar parent scroll event should be listened to or not.
+   * @default false
    */
-  parentRef?: React.RefObject<HTMLElement>;
+  disableScrollHandler?: boolean;
   /**
    * The css object of the navbar container.
    */
   containerCss?: CSS;
+
+  /**
+   * The scroll event handler for the navbar. The event fires when the navbar parent element is scrolled.
+   * it only works if `disableScrollHandler` is set to `false` or `shouldHideOnScroll` is set to `true`.
+   */
+  onScrollPositionChange?: (scrollPosition: number) => void;
 }
 
 export type UseNavbarProps = Props & NavbarVariantsProps;
@@ -61,6 +72,8 @@ export function useNavbar(props: UseNavbarProps = {}) {
     height = "76px",
     borderWeight = "light",
     shouldHideOnScroll = false,
+    disableScrollHandler = false,
+    onScrollPositionChange,
     disableBlur: disableBlurProp = false,
     className,
     ...otherProps
@@ -106,13 +119,16 @@ export function useNavbar(props: UseNavbarProps = {}) {
 
   useScrollPosition({
     elementRef: parentRef,
-    enabled: shouldHideOnScroll,
+    enabled: shouldHideOnScroll || !disableScrollHandler,
     callback: ({prevPos, currPos}) => {
-      setSticky((prevSticky) => {
-        const next = currPos.y > prevPos.y;
-
-        return next !== prevSticky ? next : prevSticky;
-      });
+      onScrollPositionChange?.(currPos.y);
+      if (shouldHideOnScroll) {
+        setSticky((prevSticky) => {
+          const next = currPos.y > prevPos.y;
+
+          return next !== prevSticky ? next : prevSticky;
+        });
+      }
     },
   });
 

From 45e25b268ef29184350bc122341fb5c1df11d0a2 Mon Sep 17 00:00:00 2001
From: T/once <72869479+TIMMLOPK@users.noreply.github.com>
Date: Tue, 9 Aug 2022 22:00:13 +0800
Subject: [PATCH 066/106] chore: update reat-aria

---
 packages/react/package.json | 54 ++++++++++++++++++-------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 331f649103..b111c7b201 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -55,33 +55,33 @@
   },
   "dependencies": {
     "@babel/runtime": "7.9.6",
-    "@react-aria/button": "3.5.0",
-    "@react-aria/checkbox": "3.4.0",
-    "@react-aria/dialog": "3.2.0",
-    "@react-aria/focus": "3.6.0",
-    "@react-aria/i18n": "3.4.0",
-    "@react-aria/interactions": "3.9.0",
-    "@react-aria/label": "3.3.0",
-    "@react-aria/menu": "3.5.0",
-    "@react-aria/overlays": "3.9.0",
-    "@react-aria/radio": "3.2.0",
-    "@react-aria/ssr": "3.2.0",
-    "@react-aria/table": "3.3.0",
-    "@react-aria/utils": "3.13.0",
-    "@react-aria/visually-hidden": "3.3.0",
-    "@react-stately/checkbox": "3.1.0",
-    "@react-stately/data": "3.5.0",
-    "@react-stately/overlays": "3.3.0",
-    "@react-stately/radio": "3.4.0",
-    "@react-stately/table": "3.2.0",
-    "@react-stately/toggle": "3.3.0",
-    "@react-stately/tree": "3.3.0",
-    "@react-types/button": "^3.5.0",
-    "@react-types/checkbox": "3.3.0",
-    "@react-types/grid": "3.1.0",
-    "@react-types/menu": "3.6.0",
-    "@react-types/overlays": "3.6.0",
-    "@react-types/shared": "3.13.0",
+    "@react-aria/button": "3.6.0",
+    "@react-aria/checkbox": "3.5.0",
+    "@react-aria/dialog": "3.3.0",
+    "@react-aria/focus": "3.7.0",
+    "@react-aria/i18n": "3.5.1",
+    "@react-aria/interactions": "3.10.0",
+    "@react-aria/label": "3.4.0",
+    "@react-aria/menu": "3.6.0",
+    "@react-aria/overlays": "3.10.0",
+    "@react-aria/radio": "3.3.0",
+    "@react-aria/ssr": "3.3.0",
+    "@react-aria/table": "3.4.0",
+    "@react-aria/utils": "3.13.2",
+    "@react-aria/visually-hidden": "3.4.0",
+    "@react-stately/checkbox": "3.2.0",
+    "@react-stately/data": "3.6.0",
+    "@react-stately/overlays": "3.4.0",
+    "@react-stately/radio": "3.5.0",
+    "@react-stately/table": "3.3.0",
+    "@react-stately/toggle": "3.4.0",
+    "@react-stately/tree": "3.3.2",
+    "@react-types/button": "^3.6.0",
+    "@react-types/checkbox": "3.3.2",
+    "@react-types/grid": "3.1.2",
+    "@react-types/menu": "3.7.0",
+    "@react-types/overlays": "3.6.2",
+    "@react-types/shared": "3.14.0",
     "@stitches/react": "1.2.8"
   },
   "peerDependencies": {

From 5a9688d6fa29708fb0759c899a7680d19e1060ea Mon Sep 17 00:00:00 2001
From: T/once <72869479+TIMMLOPK@users.noreply.github.com>
Date: Tue, 9 Aug 2022 22:08:37 +0800
Subject: [PATCH 067/106] Update yarn.lock

---
 yarn.lock | 658 +++++++++++++++++++++++++++---------------------------
 1 file changed, 331 insertions(+), 327 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index d79fc46f5f..c33513734e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3646,234 +3646,239 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
-"@react-aria/button@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/button/-/button-3.5.0.tgz#8b27d0bca98ccd6cd1999e3c21a89f907eafcfda"
-  integrity sha512-S15W77YemT5g8jNHr8QpIHqT242TxpiBwzj3D0HsQFKoTEb5uXoNAIqZinDjhmbl4ovx2s7h/XevqDNEzvjAtw==
+"@react-aria/button@3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/button/-/button-3.6.0.tgz#ecd97d27929cdda272e2e6feddafab161a568c84"
+  integrity sha512-+I+raFN5Kw85WzgmiIEQG0JhJ+WSCWJRSCgA0Nc4Wvjkm7gQSRvhSzSZiI7HQxz43h0MgFbuX/ruRn1WKPLsLg==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/focus" "^3.6.0"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-stately/toggle" "^3.3.0"
-    "@react-types/button" "^3.5.0"
-
-"@react-aria/checkbox@3.4.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/checkbox/-/checkbox-3.4.0.tgz#d6ac125c0d91c22052d14e12f153a840d4b265a6"
-  integrity sha512-G1lxa7Glb0HWOjPyA4bYx8n3vAPGF7GKpZ7E4wGnMt3UQfslHavhEmtFyplt3l0f4OkhV8E/yr8SXnNb0cZDLQ==
+    "@react-aria/focus" "^3.7.0"
+    "@react-aria/interactions" "^3.10.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-stately/toggle" "^3.4.0"
+    "@react-types/button" "^3.6.0"
+    "@react-types/shared" "^3.14.0"
+
+"@react-aria/checkbox@3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/checkbox/-/checkbox-3.5.0.tgz#2d99957cdaf95b13b958159134a4894c0c6e7f47"
+  integrity sha512-U3SXfiVus/aF3S3v9aTPILRZBnUzHs5JJhile9CXIe1YoPam8u12s4G+aS55rrwoa3XLcnvZbPbwlShcc8bjaA==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/label" "^3.3.0"
-    "@react-aria/toggle" "^3.3.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-stately/checkbox" "^3.1.0"
-    "@react-stately/toggle" "^3.3.0"
-    "@react-types/checkbox" "^3.3.0"
-
-"@react-aria/dialog@3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/dialog/-/dialog-3.2.0.tgz#065bcf2eb2afe3bdb199580a951960a182eb317e"
-  integrity sha512-ScjjfpNw9cvznuGjG+Q15U6wvLkwF++0NbE7v9PILWp1Vs3UHFyKJ7VrxUiDuG20rM3gfTYP8hi55CjwY7wbNA==
+    "@react-aria/label" "^3.4.0"
+    "@react-aria/toggle" "^3.3.2"
+    "@react-aria/utils" "^3.13.2"
+    "@react-stately/checkbox" "^3.2.0"
+    "@react-stately/toggle" "^3.4.0"
+    "@react-types/checkbox" "^3.3.2"
+    "@react-types/shared" "^3.14.0"
+
+"@react-aria/dialog@3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/dialog/-/dialog-3.3.0.tgz#7e355f99343c061d4b4d85c4bba1408bc8b675e0"
+  integrity sha512-kzJLjIYIRpK+ASOpOSY56sE6l+rpmk4QvIqTjrqlynXdneGVgNVu3OxX37U73Zn53is7ivbT+TugCzHTgle0qg==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/focus" "^3.6.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-stately/overlays" "^3.3.0"
-    "@react-types/dialog" "^3.4.0"
+    "@react-aria/focus" "^3.7.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-stately/overlays" "^3.4.0"
+    "@react-types/dialog" "^3.4.2"
+    "@react-types/shared" "^3.14.0"
 
-"@react-aria/focus@3.6.0", "@react-aria/focus@^3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.6.0.tgz#45ff8aeaad3b594df54699ea3ea78296cb73fb5b"
-  integrity sha512-1XuwDvhrmLcNnYHBFzwmZOoXuxkybRc8MUhiGLYRD1aVX1h9GarglYo9sfbGZNRO5jxMptXjtJv2rdWz1mHmQw==
+"@react-aria/focus@3.7.0", "@react-aria/focus@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.7.0.tgz#6a90dc99da64bd145e3eeacf3097a29a0342f709"
+  integrity sha512-LydZSLBLEUklakM0Ogdk17F3f/Uwaj5Nl1mfcK8HhrroGT8A8XH0KjA9D6gM6JGHgxZemx0ufOgxhQZeBGQMQw==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-aria/interactions" "^3.10.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-types/shared" "^3.14.0"
     clsx "^1.1.1"
 
-"@react-aria/grid@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/grid/-/grid-3.3.0.tgz#7f5becfaa6b57a47cbe5429a9c369012122a9426"
-  integrity sha512-lwo2n4rXCJfB1AKHPczzPZ/47sNnSuYt25gr082c6OrcxHc3QiJVlx9L4oMz4w3rYHvEomnONIlblAfi9dX4ew==
+"@react-aria/grid@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/grid/-/grid-3.4.0.tgz#0d8c1a07767f36b23d1e297cf47fcd5b9f178276"
+  integrity sha512-izIig52FV+uRzRuenRZ8CNLoivpT5yXsN6414RXKNnyCWDfBrllUvJYndll0ngrBKTjd6tmqJM8Y3kja/7+A9A==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/focus" "^3.6.0"
-    "@react-aria/i18n" "^3.4.0"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/live-announcer" "^3.1.0"
-    "@react-aria/selection" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-stately/grid" "^3.2.0"
-    "@react-stately/selection" "^3.10.0"
-    "@react-stately/virtualizer" "^3.2.0"
-    "@react-types/checkbox" "^3.3.0"
-    "@react-types/grid" "^3.1.0"
-    "@react-types/shared" "^3.13.0"
-
-"@react-aria/i18n@3.4.0", "@react-aria/i18n@^3.4.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.4.0.tgz#7ee8c468ce85b959ecef90e403332cbbc1ab9d01"
-  integrity sha512-2pU13zT9bgD4eMlqfJ/Um2wjYRS7ORvR0jqGSfNzY9Lx+1IeSCqTkBNubT7bCV+Oc0LMUR93fGRDxfdtMyJCog==
+    "@react-aria/focus" "^3.7.0"
+    "@react-aria/i18n" "^3.5.0"
+    "@react-aria/interactions" "^3.10.0"
+    "@react-aria/live-announcer" "^3.1.1"
+    "@react-aria/selection" "^3.10.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-stately/grid" "^3.3.0"
+    "@react-stately/selection" "^3.10.2"
+    "@react-stately/virtualizer" "^3.2.2"
+    "@react-types/checkbox" "^3.3.2"
+    "@react-types/grid" "^3.1.2"
+    "@react-types/shared" "^3.14.0"
+
+"@react-aria/i18n@3.5.1", "@react-aria/i18n@^3.5.0":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/i18n/-/i18n-3.5.1.tgz#aba5e50266a3f15c195b8dc85682251af5c52211"
+  integrity sha512-PtlQ/W1PXVKzCGK86MuGuCzYBwENDBjrQ2a4ux+BBQ2Dk8ZXEARSp9JaMFuOdiloXc/p4FoxCVoB+lhu4RCScg==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@internationalized/date" "3.0.0-rc.1"
-    "@internationalized/message" "^3.0.7"
+    "@internationalized/date" "^3.0.1"
+    "@internationalized/message" "^3.0.9"
     "@internationalized/number" "^3.1.1"
-    "@react-aria/ssr" "^3.2.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-types/shared" "^3.13.0"
+    "@internationalized/string" "^3.0.0"
+    "@react-aria/ssr" "^3.3.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-types/shared" "^3.14.0"
 
-"@react-aria/interactions@3.9.0", "@react-aria/interactions@^3.9.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.9.0.tgz#cf15a1ba1402c2fc52d0c97aa7ccffa78204d166"
-  integrity sha512-tf9vJtHf7DSnj4e/q19hoO5h61xb0qxNXUkOwaVwU1XlaA+eh+Qas2RF0GIMARLj+JhGX9y2nLjw3FK8F+pItQ==
+"@react-aria/interactions@3.10.0", "@react-aria/interactions@^3.10.0":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.10.0.tgz#d60cc42c3904c1578f9c356fba4bab7003102dee"
+  integrity sha512-Lp74VfF+EskT3IqK2MBMdJpJU48p60+YkMbgtoDF6LudNO8jw0nxcsvnimPriTSkZWINRpajG/9sIa0EIDcQKw==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/utils" "^3.13.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-types/shared" "^3.14.0"
 
-"@react-aria/label@3.3.0", "@react-aria/label@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.3.0.tgz#1a687c6b70d4bca4992433c97974b41df9f4dad4"
-  integrity sha512-E8vOEWv04xGasDigbNtB0JOcq5ZLyPEbbOFSa5VgB7LfXu3i+82ZSAjTA1OtZwOc6MiiXRs5BuKx5HgiZn3HHA==
+"@react-aria/label@3.4.0", "@react-aria/label@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/label/-/label-3.4.0.tgz#81bf096bd28990d54e6db1ca9294391b7ed0d064"
+  integrity sha512-QqyZMuSdnH+7mkAbZbGtLU3NhSz2luNCeM+ZJPQ3ANegrdXsKwERSwD2/ERHAC5FGLqwlzXnPhRcYdvjafg/Ug==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/utils" "^3.13.0"
-    "@react-types/label" "^3.6.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-types/label" "^3.6.2"
+    "@react-types/shared" "^3.14.0"
 
-"@react-aria/live-announcer@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/live-announcer/-/live-announcer-3.1.0.tgz#06cfce35f6a9bcff266ab0ceab97f2fe6e487975"
-  integrity sha512-YEaGJh1ELho3G9zvUZGOsKsSNEqHsm0fb3Ngvj9z0tjZCXa0867h8YWKuiyTA9BG7WhH8eeJq07WN4nDvYU7fg==
+"@react-aria/live-announcer@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/live-announcer/-/live-announcer-3.1.1.tgz#40f340f6794fca42682fb308fe750ff56bf7c07f"
+  integrity sha512-e7b+dRh1SUTla42vzjdbhGYkeLD7E6wIYjYaHW9zZ37rBkSqLHUhTigh3eT3k5NxFlDD/uRxTYuwaFnWQgR+4g==
   dependencies:
     "@babel/runtime" "^7.6.2"
 
-"@react-aria/menu@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/menu/-/menu-3.5.0.tgz#0505b8e11c27c4150454f17f6e09d7c2f186638d"
-  integrity sha512-Y5L9ESVnTG2eUOmLk33oQEl5UEK/hCw50udOEqjPBgOVv4drIr8sc4ZcoB0U6IVVKbLHEskhW/ExqlJd6GSACQ==
+"@react-aria/menu@3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/menu/-/menu-3.6.0.tgz#2276247eea3588bbafbe7965b3b600067f7522bc"
+  integrity sha512-s083I10XG/K06V7wOF+VYGgUwg6ZwlmsmLlrXyFRzCVK6LXimNNC/mOeSZet6m4R4H1svtH+US/v+/eD6pkdUQ==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/i18n" "^3.4.0"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/overlays" "^3.9.0"
-    "@react-aria/selection" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-stately/collections" "^3.4.0"
-    "@react-stately/menu" "^3.3.0"
-    "@react-stately/tree" "^3.3.0"
-    "@react-types/button" "^3.5.0"
-    "@react-types/menu" "^3.6.0"
-    "@react-types/shared" "^3.13.0"
-
-"@react-aria/overlays@3.9.0", "@react-aria/overlays@^3.9.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.9.0.tgz#950a9025e8d4086ce3840a97c52d0eb21d9c85c1"
-  integrity sha512-YeZ+/0yfBAcqhuRF/Aas5ga9rZWff3EkhisEy1yXjOrf5veedqb05CsyjRkefZzmUeUggfq/AmqX0DJBlZFbxg==
+    "@react-aria/i18n" "^3.5.0"
+    "@react-aria/interactions" "^3.10.0"
+    "@react-aria/overlays" "^3.10.0"
+    "@react-aria/selection" "^3.10.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-stately/collections" "^3.4.2"
+    "@react-stately/menu" "^3.4.0"
+    "@react-stately/tree" "^3.3.2"
+    "@react-types/button" "^3.6.0"
+    "@react-types/menu" "^3.7.0"
+    "@react-types/shared" "^3.14.0"
+
+"@react-aria/overlays@3.10.0", "@react-aria/overlays@^3.10.0":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/overlays/-/overlays-3.10.0.tgz#e702961d178992b9c25db808edd1646efa1d00ec"
+  integrity sha512-A7aI59/o4tUAISjyyRfJz3833SLe4ZKPNoxOVUzgjfkfnCKq7YDSSEC5poxDqYD9bq/NBXK6stdgaGLXQSirNw==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/i18n" "^3.4.0"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-aria/visually-hidden" "^3.3.0"
-    "@react-stately/overlays" "^3.3.0"
-    "@react-types/button" "^3.5.0"
-    "@react-types/overlays" "^3.6.0"
-    "@react-types/shared" "^3.13.0"
-    dom-helpers "^5.2.1"
-    react-transition-group "^4.4.2"
-
-"@react-aria/radio@3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/radio/-/radio-3.2.0.tgz#f7f900ba78b160b09162f0c833bcebd3c3222eb0"
-  integrity sha512-siJmgPckrc29W7dt1g9P2w6wNHMIVKaBSJfP3uQ3qTJcDdTF4sTcK+cre+2peuWrHJiYOCQW1mrRYqfgARDUaA==
+    "@react-aria/i18n" "^3.5.0"
+    "@react-aria/interactions" "^3.10.0"
+    "@react-aria/ssr" "^3.3.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-aria/visually-hidden" "^3.4.0"
+    "@react-stately/overlays" "^3.4.0"
+    "@react-types/button" "^3.6.0"
+    "@react-types/overlays" "^3.6.2"
+    "@react-types/shared" "^3.14.0"
+
+"@react-aria/radio@3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/radio/-/radio-3.3.0.tgz#0528c2dc2b658def336ad1f74fa643b9c482b806"
+  integrity sha512-UhPxFVYKaPI8a9bF6XOl5Q7lbgW7YlrLTHnjOhxiUWvyyOsOnseiSgF9TqSfhhsF7HNYdOt1u3Xwx3vrHniCBg==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/focus" "^3.6.0"
-    "@react-aria/i18n" "^3.4.0"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/label" "^3.3.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-stately/radio" "^3.4.0"
-    "@react-types/radio" "^3.2.0"
-
-"@react-aria/selection@^3.9.0":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/selection/-/selection-3.9.0.tgz#3f2a52adc3bef359bea0a428e7d927f984ce0c6b"
-  integrity sha512-dDtMpi1RkG056zKQEzI8bm3p4KvRjq7+qqPEXTSQIqVU2+SfaiPo3Kmx26whN8Yd5tOcGQyNrKAZbC0GriqOFA==
+    "@react-aria/focus" "^3.7.0"
+    "@react-aria/i18n" "^3.5.0"
+    "@react-aria/interactions" "^3.10.0"
+    "@react-aria/label" "^3.4.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-stately/radio" "^3.5.0"
+    "@react-types/radio" "^3.2.2"
+    "@react-types/shared" "^3.14.0"
+
+"@react-aria/selection@^3.10.0":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/selection/-/selection-3.10.0.tgz#c7c0441d9b496df6567af1c4462e4a80f97ea359"
+  integrity sha512-VvFgNRrM0kK6aqyMTeTN+pguyvYN9Wu3viftnZyk89uo2+9hfmU7DLhz5kXkdJY9UNzn033jYGwJdWEuqRq65g==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/focus" "^3.6.0"
-    "@react-aria/i18n" "^3.4.0"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-stately/collections" "^3.4.0"
-    "@react-stately/selection" "^3.10.0"
-    "@react-types/shared" "^3.13.0"
-
-"@react-aria/ssr@3.2.0", "@react-aria/ssr@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.2.0.tgz#88460384b43204f91c972d5b0de24ee44d6a2984"
-  integrity sha512-wwJFdkl+Q8NU5yJ4NvdAOqx5LM3QtUVoSjuK7Ey8jZ4WS4bB0EqT3Kr3IInBs257HzZ5nXCiKXKE4NGXXuIRWA==
+    "@react-aria/focus" "^3.7.0"
+    "@react-aria/i18n" "^3.5.0"
+    "@react-aria/interactions" "^3.10.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-stately/collections" "^3.4.2"
+    "@react-stately/selection" "^3.10.2"
+    "@react-types/shared" "^3.14.0"
+
+"@react-aria/ssr@3.3.0", "@react-aria/ssr@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.3.0.tgz#25e81daf0c7a270a4a891159d8d984578e4512d8"
+  integrity sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==
   dependencies:
     "@babel/runtime" "^7.6.2"
 
-"@react-aria/table@3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/table/-/table-3.3.0.tgz#48869c2fdbf63c5f04f2b4406c4f1b0f631b031f"
-  integrity sha512-OYKO0qd/oWYhtbStGByyaRxvz3MSFY+8yIhp5ibr/3fBQw6PuCXAUMJGhhHj+boFVx0Qx+LUWtDk0LOPt5aA0w==
+"@react-aria/table@3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/table/-/table-3.4.0.tgz#e4a71139bc96285625d2d8de2d6adc1103e66305"
+  integrity sha512-a3yYKRtadGzMrOJlGy2AGf2w2baESYgM2hZnB4YupBrcKJ/91BMpAbpAMolCI02av+Tz0BtAKh0kSs7nEsiiuA==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/focus" "^3.6.0"
-    "@react-aria/grid" "^3.3.0"
-    "@react-aria/i18n" "^3.4.0"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/live-announcer" "^3.1.0"
-    "@react-aria/selection" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-stately/table" "^3.2.0"
-    "@react-stately/virtualizer" "^3.2.0"
-    "@react-types/checkbox" "^3.3.0"
-    "@react-types/grid" "^3.1.0"
-    "@react-types/shared" "^3.13.0"
-    "@react-types/table" "^3.2.0"
-
-"@react-aria/toggle@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/toggle/-/toggle-3.3.0.tgz#0d9256f22948cc4e122afedb1eaa472d1a5571a2"
-  integrity sha512-Z186VPuZkgYCsueQV4Wyv6r10HjhnC9i8NUHTB8Z0up85rH3MLCQ2x3otTbc0Wrkuqggfw4jF7CfnCM/l+XxVw==
+    "@react-aria/focus" "^3.7.0"
+    "@react-aria/grid" "^3.4.0"
+    "@react-aria/i18n" "^3.5.0"
+    "@react-aria/interactions" "^3.10.0"
+    "@react-aria/live-announcer" "^3.1.1"
+    "@react-aria/selection" "^3.10.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-stately/table" "^3.3.0"
+    "@react-stately/virtualizer" "^3.2.2"
+    "@react-types/checkbox" "^3.3.2"
+    "@react-types/grid" "^3.1.2"
+    "@react-types/shared" "^3.14.0"
+    "@react-types/table" "^3.3.0"
+
+"@react-aria/toggle@^3.3.2":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/toggle/-/toggle-3.3.2.tgz#b66400c1653c1a82d1cc6b116775e028cddfb3cb"
+  integrity sha512-U+npP5XtNBs+e5T1UZDw5UhG8PJwnx+p68+GTY20UMVCTHtuNyjzjmI9nI3b9oVGcJ3ZKfvQAWq2uOqBjF/W3A==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/focus" "^3.6.0"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
-    "@react-stately/toggle" "^3.3.0"
-    "@react-types/checkbox" "^3.3.0"
-    "@react-types/shared" "^3.13.0"
-    "@react-types/switch" "^3.2.0"
-
-"@react-aria/utils@3.13.0", "@react-aria/utils@^3.13.0":
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.13.0.tgz#a9523a9d4b19839601753749b65e19ac0ad5ca86"
-  integrity sha512-iF/yYkUVCc2Cgyu7o8oE6w7a67P/M8gXKDR2tp592Be6iUKQPy2kb49VvSh+Bom6Wq/To3h4UBOLFI6I0VXJYA==
+    "@react-aria/focus" "^3.7.0"
+    "@react-aria/interactions" "^3.10.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-stately/toggle" "^3.4.0"
+    "@react-types/checkbox" "^3.3.2"
+    "@react-types/shared" "^3.14.0"
+    "@react-types/switch" "^3.2.2"
+
+"@react-aria/utils@3.13.2", "@react-aria/utils@^3.13.2":
+  version "3.13.2"
+  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.13.2.tgz#c28bc96e940a8a84c3e69a19f483c9f060584580"
+  integrity sha512-VTI8tv9m/BxE/lPTNCZN1fcHuY540xm+HT1vg2ZQCryudUWvzQkHi+h0z32DhiGHhvRFIGdH/enf3psip7ZLTQ==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/ssr" "^3.2.0"
-    "@react-stately/utils" "^3.5.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-aria/ssr" "^3.3.0"
+    "@react-stately/utils" "^3.5.1"
+    "@react-types/shared" "^3.14.0"
     clsx "^1.1.1"
 
-"@react-aria/visually-hidden@3.3.0", "@react-aria/visually-hidden@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.3.0.tgz#2ecddb5704b9a2a68df918bb49e6f125a589ef99"
-  integrity sha512-pnm4CzO/pI/2xfDMY9OcnlLqYYpaE1bIAwDdFzkXr6ldcR+4kG6N0dJprL6x+ZMgXbztfxUDSPLmexVQShmFsQ==
+"@react-aria/visually-hidden@3.4.0", "@react-aria/visually-hidden@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@react-aria/visually-hidden/-/visually-hidden-3.4.0.tgz#9422ba67296969b5eae3e8e8839ba50e8acc0990"
+  integrity sha512-mRl4Vfg7F0ohf7N3RWdOQLUnXC4ApM3hsfBegsRQHDkbbrcq7MGPyCa154kIZg8Ff2cOtbgvrAlymzWmkOVZEQ==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/interactions" "^3.9.0"
-    "@react-aria/utils" "^3.13.0"
+    "@react-aria/interactions" "^3.10.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-types/shared" "^3.14.0"
     clsx "^1.1.1"
 
 "@react-bootstrap/babel-preset@^2.1.0":
@@ -3907,210 +3912,209 @@
   resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
   integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
 
-"@react-stately/checkbox@3.1.0", "@react-stately/checkbox@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.1.0.tgz#637fc0119bd567f0955cb99f9ef88810b211ea61"
-  integrity sha512-K4c2etj5DCNjvNFP7PaKZxKlRwX/DmpcJzhCQX29jmZJtLsrjsVhLrVNr59NleHbHVsOifF1GwbPlVUKbL5Y0w==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-stately/toggle" "^3.3.0"
-    "@react-stately/utils" "^3.5.0"
-    "@react-types/checkbox" "^3.3.0"
-
-"@react-stately/collections@^3.4.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/collections/-/collections-3.4.0.tgz#0622b6033e033c9b8c2dd33c173293916f8e7b6b"
-  integrity sha512-ODS/Nm5OH4XqLugKII7jGc698XnaQEJo423jKa0jhyIpSnviqFRpXRbrPiFPAcaE3S4d/pp20HdDotWZAbM8Ww==
+"@react-stately/checkbox@3.2.0", "@react-stately/checkbox@^3.2.0":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.2.0.tgz#6c718441a6c1058c75c243a5712d2dc32d93392c"
+  integrity sha512-nVO/asz7MTF5nLJcMMq5KgNlk4npckq+7nQvEVW6pyob5r2m7Lvd+Zhl4oKT0WtTIzg31VB6yRew1czKx/SUpA==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-types/shared" "^3.13.0"
+    "@react-stately/toggle" "^3.4.0"
+    "@react-stately/utils" "^3.5.1"
+    "@react-types/checkbox" "^3.3.2"
 
-"@react-stately/data@3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/data/-/data-3.5.0.tgz#ff5ea799868c12f0202b95ea170db1bafcf6d2bd"
-  integrity sha512-Ww/tYEg0pOY870DJ7wTSlyCJ44jlwtmRuFsd649wD8pNKrYqkExYMO/gK9mfhR5hwaaHsubKl+XgqEgqHCr97g==
+"@react-stately/collections@^3.4.2":
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/@react-stately/collections/-/collections-3.4.2.tgz#b8625192b8cd5abe6cc2d5371643a071dc492e44"
+  integrity sha512-CmLVWtbX4r3QaTNdI6edtrRKIZRKPuxyD7TmVIaoZBdaOXStTP4wOgyPN1ELww9bvW0MoOaQBbUn5WAPrfifFw==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-types/shared" "^3.13.0"
+    "@react-types/shared" "^3.14.0"
 
-"@react-stately/grid@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/grid/-/grid-3.2.0.tgz#672cd659da76836e736db003637210aea34dc61d"
-  integrity sha512-FC7AaiQuW88O+05b5ElzkRXxTYIw7ALzY8Pk2K20OjB3ThkfrGjXVza18jsp3aFQava2axoCsF556uz7/MzcfQ==
+"@react-stately/data@3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@react-stately/data/-/data-3.6.0.tgz#6af1cb81940e7ec3c8ef93b07fb968617a2951bb"
+  integrity sha512-psuc5nziuPWYdxIFhXEt9DBT+cuhOCyGPz8cOP5RuWFfSM4r583M0SYrsi5YXCvUwhZEFFQNbapxJFfMpAHPtw==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-stately/selection" "^3.10.0"
-    "@react-types/grid" "^3.1.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-types/shared" "^3.14.0"
 
-"@react-stately/menu@^3.3.0":
+"@react-stately/grid@^3.3.0":
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/menu/-/menu-3.3.0.tgz#646e0468c5747a768643279fb0ed239e01778012"
-  integrity sha512-kdw8YoynxVha6YNTZvHwrA9b5mxC+v5F4hq/fB6I6tqsyW3ntM/8wIvjpdCS01Nygn03Nnuy2t8atycvEeYH0g==
+  resolved "https://registry.yarnpkg.com/@react-stately/grid/-/grid-3.3.0.tgz#f55d6bd74b74a81d35282cd2b552ee2ae2b9bbbf"
+  integrity sha512-30z4Kki5QWZvR22f3UrA18eMDOcXmQFzAq5pHbRs1LvxJAaqeAD2KzCT70MCgoA5XzyiOrvIPrKTBRf48du45w==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-stately/overlays" "^3.3.0"
-    "@react-stately/utils" "^3.5.0"
-    "@react-types/menu" "^3.6.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-stately/selection" "^3.10.2"
+    "@react-types/grid" "^3.1.2"
+    "@react-types/shared" "^3.14.0"
 
-"@react-stately/overlays@3.3.0", "@react-stately/overlays@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/overlays/-/overlays-3.3.0.tgz#1775807fef9f49aedfca344c6db6cc89103638da"
-  integrity sha512-x8ASMyhib7mL4ITgZQXUaTGGkFPZz4qPJVThdx9i6q1iu0CpO7hXpPxzrUFKPV+JV/fyXlWbo3n7tWBE2yHTVw==
+"@react-stately/menu@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@react-stately/menu/-/menu-3.4.0.tgz#ee535287229ab4b0561dfdca570d82180f8cc4ea"
+  integrity sha512-xdNS3K0PmSjpNhH/Xnskfexxyo909Jkkfux4zhP5Ivk4Vkp0eThb6v9AIomUAo163PuOnHQFen1ZmwFEs92xMw==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-stately/utils" "^3.5.0"
-    "@react-types/overlays" "^3.6.0"
+    "@react-stately/overlays" "^3.4.0"
+    "@react-stately/utils" "^3.5.1"
+    "@react-types/menu" "^3.7.0"
+    "@react-types/shared" "^3.14.0"
 
-"@react-stately/radio@3.4.0", "@react-stately/radio@^3.4.0":
+"@react-stately/overlays@3.4.0", "@react-stately/overlays@^3.4.0":
   version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/radio/-/radio-3.4.0.tgz#978ec2dabcb06ca7266fcdbe771fe191ffd7f0e3"
-  integrity sha512-rdZbMzhVjFkN1BjhK4qZ61wddnFdkRzTPIXqpFo+iMD9x8VEn3lmOkOLIHUs0OyyMP0E/0Aje+F2ZT6/zqq6PA==
+  resolved "https://registry.yarnpkg.com/@react-stately/overlays/-/overlays-3.4.0.tgz#4023d0c7cd48363fe046e5b6084d703ac461c907"
+  integrity sha512-jXVm1V91lWOKh73cFvE9W9JtAE8idSWEUtFlVrlBI/jh0ZOt148UlRVWgHrm7FhaUpyvOFNUyfidRmKMuB+hgw==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-stately/utils" "^3.5.0"
-    "@react-types/radio" "^3.2.0"
+    "@react-stately/utils" "^3.5.1"
+    "@react-types/overlays" "^3.6.2"
 
-"@react-stately/selection@^3.10.0":
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/selection/-/selection-3.10.0.tgz#27e30f6d62cc9b936aba9b56e711edf50559479f"
-  integrity sha512-bHlCoy3tMO1QmSnodpqXMvE7CjMPe4vNhGuSCqU5WiotwswuKuwAWZAoPeKQ6Zh99oUMaX28dUt+FQ9qZhaP9w==
+"@react-stately/radio@3.5.0", "@react-stately/radio@^3.5.0":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@react-stately/radio/-/radio-3.5.0.tgz#7b7d3dd4a14aaed324ea29ac2be5ca0fe1d44d79"
+  integrity sha512-qn4+wa9sf3zZXSLrrR9rQpOII8BEQeAkvxyq/YhUQXBpQ8SoF5LobpGIZqp3n8G+Cxzjxd6/GON+lOFxWr0iXA==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-stately/collections" "^3.4.0"
-    "@react-stately/utils" "^3.5.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-stately/utils" "^3.5.1"
+    "@react-types/radio" "^3.2.2"
 
-"@react-stately/table@3.2.0", "@react-stately/table@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/table/-/table-3.2.0.tgz#862ed28b1133e8766ef48bee9fc876ff279c7418"
-  integrity sha512-W4MJITIxma6PCpRX1Z9vi6F35mJiwpM+g24yVG7VK6JD9Fbiw2nIPJf5ZYo11EI2PdIJlamv/xYqYtn2kmGlWw==
+"@react-stately/selection@^3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@react-stately/selection/-/selection-3.10.2.tgz#0871e4d7bfc5a1dc1df6ff8d6800b499b2042732"
+  integrity sha512-3/iw0BpShWt5ie+YpOzi4Mpa3yKOtlKQZXEc0fZt3v3m3N3fMoCr7Ovkfuz5Svy47HIIN1Pk1WkRJC+CQ4hfDw==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/utils" "^3.13.0"
-    "@react-stately/collections" "^3.4.0"
-    "@react-stately/grid" "^3.2.0"
-    "@react-stately/selection" "^3.10.0"
-    "@react-types/grid" "^3.1.0"
-    "@react-types/shared" "^3.13.0"
-    "@react-types/table" "^3.2.0"
-
-"@react-stately/toggle@3.3.0", "@react-stately/toggle@^3.3.0":
+    "@react-stately/collections" "^3.4.2"
+    "@react-stately/utils" "^3.5.1"
+    "@react-types/shared" "^3.14.0"
+
+"@react-stately/table@3.3.0", "@react-stately/table@^3.3.0":
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/toggle/-/toggle-3.3.0.tgz#9330d57f0d4ae9f2c32009851fdcde546fc2db73"
-  integrity sha512-fiVT1yw9qBBWyfFviUwNR4AcdCnN7TPAX2VpuL7LO7zB1a+sOGiTz3nTnHI4837trvpsXHpCvYXTBMY6yxGEMg==
+  resolved "https://registry.yarnpkg.com/@react-stately/table/-/table-3.3.0.tgz#87f2b69e323e5f805705d6a722b6ef3d6389319c"
+  integrity sha512-qhZdgyD0EyePW/U/VlJCGLBNuzo2H1hQSgfRJ7+E5QVbqDwUUQ6Safz1EQ3Jhh64IcTDqxvKL3arr8THT7UKdA==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-stately/utils" "^3.5.0"
-    "@react-types/checkbox" "^3.3.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-stately/collections" "^3.4.2"
+    "@react-stately/grid" "^3.3.0"
+    "@react-stately/selection" "^3.10.2"
+    "@react-types/grid" "^3.1.2"
+    "@react-types/shared" "^3.14.0"
+    "@react-types/table" "^3.3.0"
+
+"@react-stately/toggle@3.4.0", "@react-stately/toggle@^3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@react-stately/toggle/-/toggle-3.4.0.tgz#42bb0dc226f90eb70f9e87dcbe08df9e45324255"
+  integrity sha512-7kPxR2+Aze7NmpWWOQanRsQvmz7R+Sdlu+2xi0Wh5LPFg+lkXSiGY63uM2amxZcbFb0Mhy5ExlRpF53ReZjEOA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-stately/utils" "^3.5.1"
+    "@react-types/checkbox" "^3.3.2"
+    "@react-types/shared" "^3.14.0"
 
-"@react-stately/tree@3.3.0", "@react-stately/tree@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/tree/-/tree-3.3.0.tgz#478ba8e0625b7b975e81b0ba5dfd378202d04f56"
-  integrity sha512-Ic3QMRlrLbbnYPEbiraJdDAcrOnaLd7nJK7qG/cq7Jg7gfruqbO4XFzy+2w7I5B2BbXqFCivtCgEQZIYsgMaSw==
+"@react-stately/tree@3.3.2", "@react-stately/tree@^3.3.2":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@react-stately/tree/-/tree-3.3.2.tgz#db1e98fa074c89cfd63b4d260de025fef285e520"
+  integrity sha512-goviIXFYZvWJ2FOBQdKHfLwCaFUlhyGCsbX9GB7ziZhm0Ez8iWCzEy1IWoeuPaprBlHIPv6/3XtDi4ZQ52A59g==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-stately/collections" "^3.4.0"
-    "@react-stately/selection" "^3.10.0"
-    "@react-stately/utils" "^3.5.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-stately/collections" "^3.4.2"
+    "@react-stately/selection" "^3.10.2"
+    "@react-stately/utils" "^3.5.1"
+    "@react-types/shared" "^3.14.0"
 
-"@react-stately/utils@^3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.5.0.tgz#e76231cfc93042814dcc5d96436e50c807c1d905"
-  integrity sha512-WzzwlQtJrf7egaN+lt02/f/wkFKbcscsbinmXs9pL7QyYm+BCQ9xXj01w0juzt93piZgB/kfIYJqInEdpudh1A==
+"@react-stately/utils@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.5.1.tgz#502de762e5d33e892347c5f58053674e06d3bc92"
+  integrity sha512-INeQ5Er2Jm+db8Py4upKBtgfzp3UYgwXYmbU/XJn49Xw27ktuimH9e37qP3bgHaReb5L3g8IrGs38tJUpnGPHA==
   dependencies:
     "@babel/runtime" "^7.6.2"
 
-"@react-stately/virtualizer@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/virtualizer/-/virtualizer-3.2.0.tgz#cd3cf032629618015069f789d90bca400a0d96c3"
-  integrity sha512-ZzPuZfAAo9oy/NRBGj5WZethc9lAjPaHXo1zBWAphnRb8hGAlQ6COmJAKsueHmecycxiQoH1eYN2lPpxE8s37g==
+"@react-stately/virtualizer@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@react-stately/virtualizer/-/virtualizer-3.2.2.tgz#3fca1acc0622d24b1acd3df8efd7795f546f3d1c"
+  integrity sha512-I0dbohDkG+Gm750YxlAp9qy6uE3HxWRBQjrvBdswuIscaBVp/espYqMvgVwxVnQnkcIcVdKZZ/gvT8HZwkR9lg==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/utils" "^3.13.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-aria/utils" "^3.13.2"
+    "@react-types/shared" "^3.14.0"
 
-"@react-types/button@^3.5.0":
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.5.0.tgz#78f220716307c238c16a0b18221fd0fbcb0e5838"
-  integrity sha512-pxmriCe7rx/kNKuy3KonttD7qHDFclgZ7k/U2hb+w75DpsI7mXs6aFnsk+j5ZeVjsXKXPZwQXbyBhlzvlEJI0A==
+"@react-types/button@^3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@react-types/button/-/button-3.6.0.tgz#cda33c4ed3a5e9da07c52961c17a0028607f5606"
+  integrity sha512-ijCi07TkLmwU3Qtn8IzKJi1nugZj8Ln0+w2OZPRJS/tRFv48qgNsOXum54W5i9W0yg/I7VQiPjm+YsQS51g7gA==
   dependencies:
-    "@react-types/shared" "^3.13.0"
+    "@react-types/shared" "^3.14.0"
 
-"@react-types/checkbox@3.3.0", "@react-types/checkbox@^3.3.0":
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/@react-types/checkbox/-/checkbox-3.3.0.tgz#e2f7e9fc833a037452f0b2747eef18ca8d327fe0"
-  integrity sha512-aAlorLrY9mTQ01hBSXP+p5dXVLmhwYwPu+lW8rJSosyaZFtaV6GdNHaYb/NioR5YjiMInableWvIxSuTurrMmA==
+"@react-types/checkbox@3.3.2", "@react-types/checkbox@^3.3.2":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@react-types/checkbox/-/checkbox-3.3.2.tgz#513442cb2e73a4d8c8ad14021c424612e98e7cd7"
+  integrity sha512-s1bgqL4qfEMEasePayukZ6pzpIzfAG1OuVmpARz0kVdVaN7e+B4+dRJ0nDtiQf/TjNLg45ZlG3NTXJ1hsZPelQ==
   dependencies:
-    "@react-types/shared" "^3.13.0"
+    "@react-types/shared" "^3.14.0"
 
-"@react-types/dialog@^3.4.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@react-types/dialog/-/dialog-3.4.0.tgz#83fb9fedc16930f0284481c02f28d395b7f74f2a"
-  integrity sha512-fqX19lXvohx+ybWyzWW3H7oAtDqcmeKbZBdr1G2Sqg8vZg2wg2qw35uqgFEjUhIHM8TQTjdr/LQP7rIMuaEuYw==
+"@react-types/dialog@^3.4.2":
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/@react-types/dialog/-/dialog-3.4.2.tgz#509ac6998b6d7bedd2b8150306054389fee7ce61"
+  integrity sha512-ub5KrXuN0VELqIKDKuj+ySalcliIneuVnwnX83XbW+xSs9/zFo5WwALU0YxP77rzwIyuu6ziQ8CUZ7rHhLa0hQ==
   dependencies:
-    "@react-types/overlays" "^3.6.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-types/overlays" "^3.6.2"
+    "@react-types/shared" "^3.14.0"
 
-"@react-types/grid@3.1.0", "@react-types/grid@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@react-types/grid/-/grid-3.1.0.tgz#f8c60582a8119dfddbaf99ac65725b5645464fad"
-  integrity sha512-cQNHz5qHw4GDSWTgu1hUXj7aXly/WmqUMIMnpwfqOt9UYFDH/9cIXvGfwUH+7wSVEdJQrkMYtHp1lpP8INWmew==
+"@react-types/grid@3.1.2", "@react-types/grid@^3.1.2":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@react-types/grid/-/grid-3.1.2.tgz#dee9c9c07dcd3dbc0f008f95a665b2bd51081c89"
+  integrity sha512-9mKhtBZiGlok1APRSR+hTKYFgx8XxRBBLG20/xPI1C8xCGNZvOz7CmK57LmlwYsN1BLo3S2vLOd6+M1qrw2yVg==
   dependencies:
-    "@react-types/shared" "^3.13.0"
+    "@react-types/shared" "^3.14.0"
 
-"@react-types/label@^3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@react-types/label/-/label-3.6.0.tgz#62dfbc21b23b1d69e9913e97a8d41c9eb1e25572"
-  integrity sha512-3P0DOe2wToPpB/fpAZizktpoImTuAuvnnGQOn+lleNUAMp4zbfI2rfGxw0oByOQiKqg7kCVRe1/mw2puKM8p+Q==
+"@react-types/label@^3.6.2":
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/@react-types/label/-/label-3.6.2.tgz#55726a796c0329e836e887241b9d0fefcdb5ae34"
+  integrity sha512-fxivJ3MKYbNhE8z/zPpmvN2R7XNGpaTQ5Rm7/ueIou5VkrZnZmDJv0+wIs9xF8l6Bq6Nx7k899OK0u38XTgwNw==
   dependencies:
-    "@react-types/shared" "^3.13.0"
+    "@react-types/shared" "^3.14.0"
 
-"@react-types/menu@3.6.0", "@react-types/menu@^3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@react-types/menu/-/menu-3.6.0.tgz#ddbdaf2d1f5b846411b1cf0370e39705e656d62f"
-  integrity sha512-GO6GjM+WH+8nOC9c1sVBPE9dYC5vKGBCNA3YxleQq9T2unFB0NOZc8hbzbFcAdwn7NnQbV9eLc0XHpUEkL9NLA==
+"@react-types/menu@3.7.0", "@react-types/menu@^3.7.0":
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/@react-types/menu/-/menu-3.7.0.tgz#632422d6024a36ab7920c1fceb064900d9f5a762"
+  integrity sha512-1kEyyb0tERlPdZ67lsC2fMZ2TTh0OdS1hcb01PrSkGna/S+H/Q9M65Xc+q9eu7QoC4+DN4Flh/7vNRT82kVlHg==
   dependencies:
-    "@react-types/overlays" "^3.6.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-types/overlays" "^3.6.2"
+    "@react-types/shared" "^3.14.0"
 
-"@react-types/overlays@3.6.0", "@react-types/overlays@^3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@react-types/overlays/-/overlays-3.6.0.tgz#2aed36e3cbdf6eab355dec094ea4934b9f559945"
-  integrity sha512-atoRgctzNHxWE4qhI2YLI/0Y9bicsib3EnaliV0jUQf2oJMr0S8yKVwwx+K0ENh9Ah00XBEFQxkjgP1q3xQQYw==
+"@react-types/overlays@3.6.2", "@react-types/overlays@^3.6.2":
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/@react-types/overlays/-/overlays-3.6.2.tgz#f11f8abe5073ca7a80d3beada018b715af25859c"
+  integrity sha512-ag9UCIlcNCvMHBORRksdLnQK3ef+CEbrt+TydOxBAxAf+87fXJ/0H6hP/4QTebEA2ixA0qz8CFga81S8ZGnOsQ==
   dependencies:
-    "@react-types/shared" "^3.13.0"
+    "@react-types/shared" "^3.14.0"
 
-"@react-types/radio@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@react-types/radio/-/radio-3.2.0.tgz#aa1637ce4c6a5462b23bd7208e70e4a15a8c9fb3"
-  integrity sha512-CIvYooY+rJh8w4HVG2gXupRFPSmPlcH2kCZppt+qOVhSQOWRvIQ2Jh9NnSjSTXUCKj1RpvpVhIj7W5EO3uvL/g==
+"@react-types/radio@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@react-types/radio/-/radio-3.2.2.tgz#8375f96150f21bf2490c35ac321a12c1fcc99bcc"
+  integrity sha512-JBnfEUu4T6Z+SRsALKnzmx/4AqeIbdHEOumHSlAlX5iLPUywvELn22PVvF+YHh7bOeXKcVv+4/rXnTZWcsAK1g==
   dependencies:
-    "@react-types/shared" "^3.13.0"
+    "@react-types/shared" "^3.14.0"
 
-"@react-types/shared@3.13.0", "@react-types/shared@^3.13.0":
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.13.0.tgz#01ef4312886ed8d449065f44168e2bfd3134acb7"
-  integrity sha512-ha+Xzn6gG/aww2nl7A6kYSJdYQypTxdYgNrJvddDB7h0QuyVQTf27iVleOWrmkHQ1TM9Q/FUbMdJ93CgdtP26g==
+"@react-types/shared@3.14.0", "@react-types/shared@^3.14.0":
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.14.0.tgz#240991d6672f32ecd2a172111e163be0fe0778f2"
+  integrity sha512-K069Bh/P0qV3zUG8kqabeO8beAUlFdyVPvpcNVPjRl+0Q9NDS9mfdQbmUa0LqdVo5e6jRPdos77Ylflkrz8wcw==
 
-"@react-types/switch@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@react-types/switch/-/switch-3.2.0.tgz#5ecce3b97632db742c2aee554fd4184ec580bdcf"
-  integrity sha512-VZEDYBWRqwU8wKsoM81g5OwUTIc+twF5dDIPd0aJXrW9oI3Cp/w3ZP9ldcvgWygzTsSF2DaKMI2/dafFYfqHQg==
+"@react-types/switch@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@react-types/switch/-/switch-3.2.2.tgz#a22dfaee731e853f68bb4d6bb06b236c532e21fc"
+  integrity sha512-DGJP4+3B6yQ86/WaGL9aLjWyLb9x1lAHW1+cXEl016/J2BdlU83Lw4mRr1qaniGLd+1Ft6cvVv7419voPlf3Ng==
   dependencies:
-    "@react-types/checkbox" "^3.3.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-types/checkbox" "^3.3.2"
+    "@react-types/shared" "^3.14.0"
 
-"@react-types/table@^3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@react-types/table/-/table-3.2.0.tgz#71df8c22343a971d4636deabccc6a8564633f8f6"
-  integrity sha512-YCfUDT8ysNX/nfm6nvc9rhjSUeVDou5L2e+Y52xnzNU9qw05raLbS8Etm6X/Y5sDLD3qgOlUNjUYkm3swGfaHA==
+"@react-types/table@^3.3.0":
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/@react-types/table/-/table-3.3.0.tgz#fe0e69ae69e8d2a9e6b98d8bd99b14cf76536fdd"
+  integrity sha512-spq1h0+RuClbedH26d8SX8bGJUWO3x/MrRuoxN/XThCR+8rayp+QjCz7Pz2a5rqMniRh91O8rOOdqjbWbP4b7g==
   dependencies:
-    "@react-types/grid" "^3.1.0"
-    "@react-types/shared" "^3.13.0"
+    "@react-types/grid" "^3.1.2"
+    "@react-types/shared" "^3.14.0"
 
 "@rushstack/eslint-patch@^1.0.6":
   version "1.1.1"

From 44c240140681c775a07606d8b7fe12abf0168965 Mon Sep 17 00:00:00 2001
From: T/once <72869479+TIMMLOPK@users.noreply.github.com>
Date: Wed, 10 Aug 2022 11:19:54 +0800
Subject: [PATCH 068/106] fix 'htmlFor' does not exist on type

---
 packages/react/src/input/input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/input/input.tsx b/packages/react/src/input/input.tsx
index 0ab223a709..496f115a2f 100644
--- a/packages/react/src/input/input.tsx
+++ b/packages/react/src/input/input.tsx
@@ -229,7 +229,7 @@ const Input = React.forwardRef<FormElement, InputProps>(
           <InputBlockLabel
             id={labelProps.id}
             className={`${preClass}-block-label`}
-            htmlFor={labelProps.htmlFor}
+            htmlFor={'htmlFor' in labelProps ? labelProps.htmlFor : ''}
             isTextarea={isTextarea}
             underlined={underlined}
             animated={animated}

From a53115ced7f8549a72fd40889ad76b860ab0d6a4 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Wed, 10 Aug 2022 23:30:48 -0300
Subject: [PATCH 069/106] feat(react-navbar): dropdown included and refactored
 to work well with navbar

---
 .../docs/content/docs/components/dropdown.mdx |  17 ++-
 .../__snapshots__/group.test.tsx.snap         |  32 ++--
 .../__snapshots__/index.test.tsx.snap         |  18 +--
 .../__snapshots__/group.test.tsx.snap         |   8 +-
 .../__snapshots__/icon.test.tsx.snap          |   6 +-
 .../__snapshots__/group.test.tsx.snap         | 128 ++++++++--------
 .../__snapshots__/index.test.tsx.snap         | 144 +++++++++---------
 .../react/src/dropdown/dropdown-button.tsx    |   7 +
 packages/react/src/dropdown/use-dropdown.ts   |   9 +-
 .../__snapshots__/index.test.tsx.snap         |   8 +-
 .../__snapshots__/password.test.tsx.snap      |   2 +-
 .../__snapshots__/index.test.tsx.snap         |   2 +-
 .../react/src/navbar/__tests__/index.test.tsx |  12 ++
 packages/react/src/navbar/navbar-item.tsx     |  32 ++--
 packages/react/src/navbar/navbar-link.tsx     |   1 +
 packages/react/src/navbar/navbar.stories.tsx  |  85 ++++++++++-
 packages/react/src/navbar/navbar.styles.ts    |   4 +-
 .../react/src/navbar/use-navbar-content.ts    |   1 -
 .../react/src/popover/popover-trigger.tsx     |   5 +-
 .../__snapshots__/index.test.tsx.snap         |  14 +-
 .../__snapshots__/index.test.tsx.snap         |   4 +-
 .../__snapshots__/index.test.tsx.snap         |   4 +-
 packages/react/src/theme/shared-css.ts        |  15 +-
 .../__snapshots__/index.test.tsx.snap         |  24 +--
 24 files changed, 355 insertions(+), 227 deletions(-)

diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx
index 0135871905..5ebefe866f 100644
--- a/apps/docs/content/docs/components/dropdown.mdx
+++ b/apps/docs/content/docs/components/dropdown.mdx
@@ -140,14 +140,15 @@ import { Dropdown } from "@nextui-org/react";
 
 #### Dropdown Props
 
-| Attribute         | Type                                                   | Description                                                                                              | Default |
-| ----------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ------- |
-| **children\***    | `ReactNode[]`                                          | The content of the dropdown. It's usually the `Dropdown.Trigger`, `Dropdown.Button` and `Dropdown.Menu`. | -       |
-| **type**          | [TriggerType](#trigger-type)                           | The type of dropdown menu that the dropdown trigger opens.                                               | `menu`  |
-| **trigger**       | [MenuTriggerType](#menu-trigger-type)                  | How the dropdown menu is triggered.                                                                      | `press` |
-| **closeOnSelect** | `boolean`                                              | Whether the dropdown menu closes when a selection is made.                                               | `true`  |
-| **isDisabled**    | `boolean`                                              | Whether dropdown trigger is disabled.                                                                    | `false` |
-| **PopoverProps**  | [PopoverProps](/docs/components/popover#popover-props) | Since dropdown is based on the `Popover` you can use any of the `Popover` props.                         | -       |
+| Attribute                          | Type                                                   | Description                                                                                              | Default |
+| ---------------------------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ------- |
+| **children\***                     | `ReactNode[]`                                          | The content of the dropdown. It's usually the `Dropdown.Trigger`, `Dropdown.Button` and `Dropdown.Menu`. | -       |
+| **type**                           | [TriggerType](#trigger-type)                           | The type of dropdown menu that the dropdown trigger opens.                                               | `menu`  |
+| **trigger**                        | [MenuTriggerType](#menu-trigger-type)                  | How the dropdown menu is triggered.                                                                      | `press` |
+| **closeOnSelect**                  | `boolean`                                              | Whether the dropdown menu closes when a selection is made.                                               | `true`  |
+| **isDisabled**                     | `boolean`                                              | Whether dropdown trigger is disabled.                                                                    | `false` |
+| **disableTriggerPressedAnimation** | `boolean`                                              | Whether the trigger should show a pressed animation when the menu is open.                               | `false` |
+| **PopoverProps**                   | [PopoverProps](/docs/components/popover#popover-props) | Since dropdown is based on the `Popover` you can use any of the `Popover` props.                         | -       |
 
 <Spacer y={1} />
 
diff --git a/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
index 113453e25f..673f04b4d8 100644
--- a/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
@@ -6,10 +6,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="nextui-c-ckyKsw"
+        class="nextui-c-jBUsJN"
       >
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -22,7 +22,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -35,7 +35,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -48,7 +48,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -65,10 +65,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="nextui-c-ckyKsw"
+      class="nextui-c-jBUsJN"
     >
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -81,7 +81,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -94,7 +94,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -107,7 +107,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -181,10 +181,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="nextui-c-ckyKsw nextui-c-ckyKsw-hEoPQl-animated-true"
+        class="nextui-c-jBUsJN nextui-c-jBUsJN-TKDXA-animated-true"
       >
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -197,7 +197,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -214,10 +214,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="nextui-c-ckyKsw nextui-c-ckyKsw-hEoPQl-animated-true"
+      class="nextui-c-jBUsJN nextui-c-jBUsJN-TKDXA-animated-true"
     >
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -230,7 +230,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
diff --git a/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
index a7c7208078..f8c6e8b658 100644
--- a/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Avatar should render component of a specified size 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-ihFPSGE-css only-text-avatar",
+      "class": "nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-ihFPSGE-css only-text-avatar",
       "data-state": "ready",
     },
     "children": Array [
@@ -136,13 +136,13 @@ LoadedCheerio {
 }
 `;
 
-exports[`Avatar should render correctly with an icon 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span><span class=\\"nextui-avatar-icon\\"><svg class=\\"\\"></svg></span></span>"`;
+exports[`Avatar should render correctly with an icon 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span><span class=\\"nextui-avatar-icon\\"><svg class=\\"\\"></svg></span></span>"`;
 
 exports[`Avatar should render text element 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar",
+      "class": "nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar",
       "data-state": "ready",
     },
     "children": Array [
@@ -278,7 +278,7 @@ exports[`Avatar should render text element 2`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {
-      "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar",
+      "class": "nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar",
       "data-state": "ready",
     },
     "children": Array [
@@ -478,12 +478,12 @@ LoadedCheerio {
 }
 `;
 
-exports[`Avatar should work correctly with different sizes 1`] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-jROyhw-size-xs nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-bHlgBq-size-sm nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-lmZTtQ-size-lg nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-ehDSPw-size-xl nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
+exports[`Avatar should work correctly with different sizes 1`] = `"<div><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-jROyhw-size-xs nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-bHlgBq-size-sm nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-lmZTtQ-size-lg nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-ehDSPw-size-xl nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
 
-exports[`Avatar should work with a gradient color 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-lcNuyd-color-gradient nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with a gradient color 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-lcNuyd-color-gradient nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
 
-exports[`Avatar should work with different colors 1`] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eeabkr-color-primary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-jzyGMN-color-secondary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-fJMMFA-color-success nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eCIbjl-color-warning nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-gYTGZH-color-error nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
+exports[`Avatar should work with different colors 1`] = `"<div><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-eeabkr-color-primary nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-jzyGMN-color-secondary nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-fJMMFA-color-success nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-eCIbjl-color-warning nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-gYTGZH-color-error nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
 
-exports[`Avatar should work with pointer 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-gsmDXe-pointer-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with pointer 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-hpLzEY-pointer-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
 
-exports[`Avatar should work with zoomed 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-OUZAS-zoomed-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with zoomed 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-OUZAS-zoomed-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
diff --git a/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
index 1ca3d7b48b..ef27aca3d9 100644
--- a/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ButtonGroup buttons should be displayed vertically 1`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-gwxfIo-vertical-true nextui-c-UqICV-gimGqK-size-md\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action1</span></button><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action2</span></button></div>"`;
+exports[`ButtonGroup buttons should be displayed vertically 1`] = `"<div class=\\"nextui-c-ghxZjq nextui-c-ghxZjq-eUvgfP-vertical-true nextui-c-ghxZjq-gimGqK-size-md\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action1</span></button><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action2</span></button></div>"`;
 
-exports[`ButtonGroup props should be passed to each button 1`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-iAoIqM-size-xs\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[`ButtonGroup props should be passed to each button 1`] = `"<div class=\\"nextui-c-ghxZjq nextui-c-ghxZjq-gAAHyH-vertical-false nextui-c-ghxZjq-iAoIqM-size-xs\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
-exports[`ButtonGroup props should be passed to each button 2`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-iAoIqM-size-xs\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-cyFBRX-flat-true nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-iWjDFM-gmvfdi-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[`ButtonGroup props should be passed to each button 2`] = `"<div class=\\"nextui-c-ghxZjq nextui-c-ghxZjq-gAAHyH-vertical-false nextui-c-ghxZjq-iAoIqM-size-xs\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-cyFBRX-flat-true nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-iWjDFM-gmvfdi-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
-exports[`ButtonGroup should render correctly 1`] = `"<div class=\\"nextui-c-UqICV nextui-c-UqICV-kulhLg-vertical-false nextui-c-UqICV-gimGqK-size-md\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[`ButtonGroup should render correctly 1`] = `"<div class=\\"nextui-c-ghxZjq nextui-c-ghxZjq-gAAHyH-vertical-false nextui-c-ghxZjq-gimGqK-size-md\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
 exports[`ButtonGroup should render different variants 1`] = `ReactWrapper {}`;
 
diff --git a/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap b/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
index f921608f67..85c0c9677c 100644
--- a/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
+++ b/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ButtonIcon should render correctly 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-iPJLV-css nextui-button-icon\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-left\\">action</div></button>"`;
+exports[`ButtonIcon should render correctly 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-iPJLV-css nextui-button-icon\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-left\\">action</div></button>"`;
 
-exports[`ButtonIcon should work with right 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-right\\">action</div></button>"`;
+exports[`ButtonIcon should work with right 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-right\\">action</div></button>"`;
 
-exports[`ButtonIcon should work without text 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-ldmKBv nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-bQrkqa-isChildLess-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iyYGWO-isSingle-true nextui-c-bDGMeb-bVsTEo-cv nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right nextui-button-icon-single\\"><svg></svg></span></button>"`;
+exports[`ButtonIcon should work without text 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-bQrkqa-isChildLess-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iyYGWO-isSingle-true nextui-c-bDGMeb-bVsTEo-cv nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right nextui-button-icon-single\\"><svg></svg></span></button>"`;
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
index 99556bc5be..b07ed123b1 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
@@ -20,12 +20,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria9350437168-10",
+              "aria-controls": "react-aria6413715347-10",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria9350437168-9",
+              "id": "react-aria6413715347-9",
               "role": "button",
               "tabindex": "0",
             },
@@ -324,9 +324,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-9",
+                        "aria-labelledby": "react-aria6413715347-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-10",
+                        "id": "react-aria6413715347-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -424,9 +424,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria9350437168-9",
+                      "aria-labelledby": "react-aria6413715347-9",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria9350437168-10",
+                      "id": "react-aria6413715347-10",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -481,12 +481,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria9350437168-10",
+                "aria-controls": "react-aria6413715347-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria9350437168-9",
+                "id": "react-aria6413715347-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -818,12 +818,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria9350437168-12",
+                "aria-controls": "react-aria6413715347-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria9350437168-11",
+                "id": "react-aria6413715347-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -1122,9 +1122,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria9350437168-11",
+                          "aria-labelledby": "react-aria6413715347-11",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria9350437168-12",
+                          "id": "react-aria6413715347-12",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -1222,9 +1222,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-11",
+                        "aria-labelledby": "react-aria6413715347-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-12",
+                        "id": "react-aria6413715347-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -1279,12 +1279,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria9350437168-12",
+                  "aria-controls": "react-aria6413715347-12",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria9350437168-11",
+                  "id": "react-aria6413715347-11",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -1645,12 +1645,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria9350437168-12",
+              "aria-controls": "react-aria6413715347-12",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria9350437168-11",
+              "id": "react-aria6413715347-11",
               "role": "button",
               "tabindex": "0",
             },
@@ -1949,9 +1949,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-11",
+                        "aria-labelledby": "react-aria6413715347-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-12",
+                        "id": "react-aria6413715347-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -2049,9 +2049,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria9350437168-11",
+                      "aria-labelledby": "react-aria6413715347-11",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria9350437168-12",
+                      "id": "react-aria6413715347-12",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -2106,12 +2106,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria9350437168-12",
+                "aria-controls": "react-aria6413715347-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria9350437168-11",
+                "id": "react-aria6413715347-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -2445,12 +2445,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria9350437168-10",
+                "aria-controls": "react-aria6413715347-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria9350437168-9",
+                "id": "react-aria6413715347-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -2749,9 +2749,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria9350437168-9",
+                          "aria-labelledby": "react-aria6413715347-9",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria9350437168-10",
+                          "id": "react-aria6413715347-10",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -2849,9 +2849,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-9",
+                        "aria-labelledby": "react-aria6413715347-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-10",
+                        "id": "react-aria6413715347-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -2906,12 +2906,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria9350437168-10",
+                  "aria-controls": "react-aria6413715347-10",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria9350437168-9",
+                  "id": "react-aria6413715347-9",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -3385,12 +3385,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria9350437168-6",
+              "aria-controls": "react-aria6413715347-6",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria9350437168-5",
+              "id": "react-aria6413715347-5",
               "role": "button",
               "tabindex": "0",
             },
@@ -3689,9 +3689,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-5",
+                        "aria-labelledby": "react-aria6413715347-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-6",
+                        "id": "react-aria6413715347-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -3789,9 +3789,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria9350437168-5",
+                      "aria-labelledby": "react-aria6413715347-5",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria9350437168-6",
+                      "id": "react-aria6413715347-6",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -3846,12 +3846,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria9350437168-6",
+                "aria-controls": "react-aria6413715347-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria9350437168-5",
+                "id": "react-aria6413715347-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -4183,12 +4183,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria9350437168-8",
+                "aria-controls": "react-aria6413715347-8",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria9350437168-7",
+                "id": "react-aria6413715347-7",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -4487,9 +4487,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria9350437168-7",
+                          "aria-labelledby": "react-aria6413715347-7",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria9350437168-8",
+                          "id": "react-aria6413715347-8",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -4587,9 +4587,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-7",
+                        "aria-labelledby": "react-aria6413715347-7",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-8",
+                        "id": "react-aria6413715347-8",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -4644,12 +4644,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria9350437168-8",
+                  "aria-controls": "react-aria6413715347-8",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria9350437168-7",
+                  "id": "react-aria6413715347-7",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -5010,12 +5010,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria9350437168-8",
+              "aria-controls": "react-aria6413715347-8",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria9350437168-7",
+              "id": "react-aria6413715347-7",
               "role": "button",
               "tabindex": "0",
             },
@@ -5314,9 +5314,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-7",
+                        "aria-labelledby": "react-aria6413715347-7",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-8",
+                        "id": "react-aria6413715347-8",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -5414,9 +5414,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria9350437168-7",
+                      "aria-labelledby": "react-aria6413715347-7",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria9350437168-8",
+                      "id": "react-aria6413715347-8",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -5471,12 +5471,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria9350437168-8",
+                "aria-controls": "react-aria6413715347-8",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria9350437168-7",
+                "id": "react-aria6413715347-7",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -5810,12 +5810,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria9350437168-6",
+                "aria-controls": "react-aria6413715347-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria9350437168-5",
+                "id": "react-aria6413715347-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -6114,9 +6114,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria9350437168-5",
+                          "aria-labelledby": "react-aria6413715347-5",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria9350437168-6",
+                          "id": "react-aria6413715347-6",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -6214,9 +6214,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-5",
+                        "aria-labelledby": "react-aria6413715347-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-6",
+                        "id": "react-aria6413715347-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -6271,12 +6271,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria9350437168-6",
+                  "aria-controls": "react-aria6413715347-6",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria9350437168-5",
+                  "id": "react-aria6413715347-5",
                   "role": "button",
                   "tabindex": "0",
                 },
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
index 3d6a0a45f4..12a216a2b3 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
@@ -20,12 +20,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria7585738573-10",
+              "aria-controls": "react-aria7661114843-10",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria7585738573-9",
+              "id": "react-aria7661114843-9",
               "role": "button",
               "tabindex": "0",
             },
@@ -476,9 +476,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-9",
+                        "aria-labelledby": "react-aria7661114843-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-10",
+                        "id": "react-aria7661114843-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -576,9 +576,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria7585738573-9",
+                      "aria-labelledby": "react-aria7661114843-9",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria7585738573-10",
+                      "id": "react-aria7661114843-10",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -633,12 +633,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-10",
+                "aria-controls": "react-aria7661114843-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria7585738573-9",
+                "id": "react-aria7661114843-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -1122,12 +1122,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-12",
+                "aria-controls": "react-aria7661114843-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria7585738573-11",
+                "id": "react-aria7661114843-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -1630,9 +1630,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria7585738573-11",
+                          "aria-labelledby": "react-aria7661114843-11",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria7585738573-12",
+                          "id": "react-aria7661114843-12",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -1730,9 +1730,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-11",
+                        "aria-labelledby": "react-aria7661114843-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-12",
+                        "id": "react-aria7661114843-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -1787,12 +1787,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria7585738573-12",
+                  "aria-controls": "react-aria7661114843-12",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria7585738573-11",
+                  "id": "react-aria7661114843-11",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -2357,12 +2357,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria7585738573-12",
+              "aria-controls": "react-aria7661114843-12",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria7585738573-11",
+              "id": "react-aria7661114843-11",
               "role": "button",
               "tabindex": "0",
             },
@@ -2865,9 +2865,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-11",
+                        "aria-labelledby": "react-aria7661114843-11",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-12",
+                        "id": "react-aria7661114843-12",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -2965,9 +2965,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria7585738573-11",
+                      "aria-labelledby": "react-aria7661114843-11",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria7585738573-12",
+                      "id": "react-aria7661114843-12",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -3022,12 +3022,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-12",
+                "aria-controls": "react-aria7661114843-12",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria7585738573-11",
+                "id": "react-aria7661114843-11",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -3565,12 +3565,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-10",
+                "aria-controls": "react-aria7661114843-10",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria7585738573-9",
+                "id": "react-aria7661114843-9",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -4021,9 +4021,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria7585738573-9",
+                          "aria-labelledby": "react-aria7661114843-9",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria7585738573-10",
+                          "id": "react-aria7661114843-10",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -4121,9 +4121,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-9",
+                        "aria-labelledby": "react-aria7661114843-9",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-10",
+                        "id": "react-aria7661114843-10",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -4178,12 +4178,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria7585738573-10",
+                  "aria-controls": "react-aria7661114843-10",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria7585738573-9",
+                  "id": "react-aria7661114843-9",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -4803,12 +4803,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria7585738573-4",
+              "aria-controls": "react-aria7661114843-4",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria7585738573-3",
+              "id": "react-aria7661114843-3",
               "role": "button",
               "tabindex": "0",
             },
@@ -5259,9 +5259,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-3",
+                        "aria-labelledby": "react-aria7661114843-3",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-4",
+                        "id": "react-aria7661114843-4",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -5359,9 +5359,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria7585738573-3",
+                      "aria-labelledby": "react-aria7661114843-3",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria7585738573-4",
+                      "id": "react-aria7661114843-4",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -5416,12 +5416,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-4",
+                "aria-controls": "react-aria7661114843-4",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria7585738573-3",
+                "id": "react-aria7661114843-3",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -5905,12 +5905,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-6",
+                "aria-controls": "react-aria7661114843-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria7585738573-5",
+                "id": "react-aria7661114843-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -6337,9 +6337,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria7585738573-5",
+                          "aria-labelledby": "react-aria7661114843-5",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria7585738573-6",
+                          "id": "react-aria7661114843-6",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -6437,9 +6437,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-5",
+                        "aria-labelledby": "react-aria7661114843-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-6",
+                        "id": "react-aria7661114843-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -6494,12 +6494,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria7585738573-6",
+                  "aria-controls": "react-aria7661114843-6",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria7585738573-5",
+                  "id": "react-aria7661114843-5",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -6988,12 +6988,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria7585738573-6",
+              "aria-controls": "react-aria7661114843-6",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria7585738573-5",
+              "id": "react-aria7661114843-5",
               "role": "button",
               "tabindex": "0",
             },
@@ -7420,9 +7420,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-5",
+                        "aria-labelledby": "react-aria7661114843-5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-6",
+                        "id": "react-aria7661114843-6",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -7520,9 +7520,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria7585738573-5",
+                      "aria-labelledby": "react-aria7661114843-5",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria7585738573-6",
+                      "id": "react-aria7661114843-6",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -7577,12 +7577,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-6",
+                "aria-controls": "react-aria7661114843-6",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria7585738573-5",
+                "id": "react-aria7661114843-5",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -8044,12 +8044,12 @@ LoadedCheerio {
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-4",
+                "aria-controls": "react-aria7661114843-4",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria7585738573-3",
+                "id": "react-aria7661114843-3",
                 "role": "button",
                 "tabindex": "0",
               },
@@ -8500,9 +8500,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria7585738573-3",
+                          "aria-labelledby": "react-aria7661114843-3",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria7585738573-4",
+                          "id": "react-aria7661114843-4",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -8600,9 +8600,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-3",
+                        "aria-labelledby": "react-aria7661114843-3",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-4",
+                        "id": "react-aria7661114843-4",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -8657,12 +8657,12 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria7585738573-4",
+                  "aria-controls": "react-aria7661114843-4",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
                   "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria7585738573-3",
+                  "id": "react-aria7661114843-3",
                   "role": "button",
                   "tabindex": "0",
                 },
@@ -13249,12 +13249,12 @@ LoadedCheerio {
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria7585738573-8",
+              "aria-controls": "react-aria7661114843-8",
               "aria-disabled": "false",
               "aria-expanded": "false",
               "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria7585738573-7",
+              "id": "react-aria7661114843-7",
               "role": "button",
               "tabindex": "0",
             },
@@ -13553,9 +13553,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-7",
+                        "aria-labelledby": "react-aria7661114843-7",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-8",
+                        "id": "react-aria7661114843-8",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -13653,9 +13653,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria7585738573-7",
+                      "aria-labelledby": "react-aria7661114843-7",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria7585738573-8",
+                      "id": "react-aria7661114843-8",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -13710,12 +13710,12 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-8",
+                "aria-controls": "react-aria7661114843-8",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
                 "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria7585738573-7",
+                "id": "react-aria7661114843-7",
                 "role": "button",
                 "tabindex": "0",
               },
diff --git a/packages/react/src/dropdown/dropdown-button.tsx b/packages/react/src/dropdown/dropdown-button.tsx
index 91a2b58e9d..76040940c3 100644
--- a/packages/react/src/dropdown/dropdown-button.tsx
+++ b/packages/react/src/dropdown/dropdown-button.tsx
@@ -14,6 +14,7 @@ export type DropdownButtonProps = ButtonProps;
 const DropdownButton = React.forwardRef(
   (props: DropdownButtonProps, ref: React.Ref<HTMLButtonElement | null>) => {
     const {
+      css,
       children,
       className,
       iconRight,
@@ -40,6 +41,12 @@ const DropdownButton = React.forwardRef(
           animated={isAnimated}
           auto={auto}
           className={clsx("nextui-dropdown-button", className)}
+          css={{
+            "& .nextui-button-icon-right, & .nextui-button-text-right": {
+              pointerEvents: "none",
+            },
+            ...css,
+          }}
           iconRight={getIconRight}
           iconRightCss={{
             mt: "$1",
diff --git a/packages/react/src/dropdown/use-dropdown.ts b/packages/react/src/dropdown/use-dropdown.ts
index a54c7bcfba..4c78ba4b27 100644
--- a/packages/react/src/dropdown/use-dropdown.ts
+++ b/packages/react/src/dropdown/use-dropdown.ts
@@ -19,6 +19,11 @@ export interface UseDropdownProps extends Omit<PopoverProps, "children"> {
    * @default 'press'
    */
   trigger?: MenuTriggerType;
+  /**
+   * Whether the trigger should show a pressed animation when the menu is open.
+   * @default false
+   */
+  disableTriggerPressedAnimation?: boolean;
   /**
    * Whether the Menu closes when a selection is made.
    * @default true
@@ -38,6 +43,7 @@ export function useDropdown(props: UseDropdownProps = {}) {
     borderWeight,
     closeOnSelect,
     disableAnimation = false,
+    disableTriggerPressedAnimation = false,
     ...popoverProps
   } = props;
 
@@ -62,10 +68,11 @@ export function useDropdown(props: UseDropdownProps = {}) {
 
       return {
         ...realTriggerProps,
+        "data-pressed-transition-disabled": disableTriggerPressedAnimation,
         ref: mergeRefs(triggerRef, _ref),
       };
     },
-    [triggerRef, triggerRefProp, menuTriggerProps],
+    [triggerRef, triggerRefProp, menuTriggerProps, disableTriggerPressedAnimation],
   );
 
   return {
diff --git a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
index 35f2c9f621..c584b36455 100644
--- a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Input should be work with content 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with content 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should be work with label 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><label class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria8378558130-19\\" id=\\"react-aria8378558130-20\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-19\\" aria-labelledby=\\"react-aria8378558130-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with label 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><label class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria2786942721-19\\" id=\\"react-aria2786942721-20\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-19\\" aria-labelledby=\\"react-aria2786942721-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different sizes 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different sizes 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different status 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different status 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria2786942721-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
index 2e8b46339c..99390cebfa 100644
--- a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InputPassword should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"password\\" id=\\"react-aria2004819011-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg class=\\"nextui-input-password-icon\\" fill=\\"none\\" height=\\"16\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" style=\\"color: currentColor;\\" viewBox=\\"0 0 24 24\\" width=\\"16\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`InputPassword should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"password\\" id=\\"react-aria7000529231-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg class=\\"nextui-input-password-icon\\" fill=\\"none\\" height=\\"16\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" style=\\"color: currentColor;\\" viewBox=\\"0 0 24 24\\" width=\\"16\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
diff --git a/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap
index 88e6c44143..5f9ac0e0ce 100644
--- a/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/link/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Link should render correctly 1`] = `"<div><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-krgohU-color-secondary nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-byQUqd-color-success nextui-c-gUrcXm-iFdQKc-animated-true\\">link<svg class=\\"nextui-c-hdKjck nextui-link-icon\\" fill=\\"none\\" height=\\"1em\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg></a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-cSuHME-underline-true nextui-c-gUrcXm-iFdQKc-animated-true\\">link</a><a href=\\"https://nextui.org\\" class=\\"nextui-c-gUrcXm nextui-c-gUrcXm-eAdznm-color-default nextui-c-gUrcXm-eIcaMf-block-true nextui-c-gUrcXm-iFdQKc-animated-true nextui-c-gUrcXm-bhXeQK-cv\\">link</a></div>"`;
+exports[`Link should render correctly 1`] = `"<div><a class=\\"nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-hfnKRU-color-default nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-icTVmtU-css nextui-link\\" href=\\"https://nextui.org\\">link</a><a class=\\"nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-iVlgeG-color-secondary nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-iclraoi-css nextui-link\\" href=\\"https://nextui.org\\">link</a><a class=\\"nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-geYkrv-color-success nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-iighAhn-css nextui-link\\" href=\\"https://nextui.org\\">link<svg class=\\"nextui-c-cBXzrI nextui-link-icon\\" fill=\\"none\\" height=\\"1em\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path></svg></a><a class=\\"nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-hfnKRU-color-default nextui-c-dIWzTP-cSuHME-underline-true nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-icTVmtU-css nextui-link\\" href=\\"https://nextui.org\\">link</a><a class=\\"nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-hfnKRU-color-default nextui-c-dIWzTP-fZgbCn-block-true nextui-c-dIWzTP-isWIbj-animated-true nextui-c-dIWzTP-jSBLRj-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-icTVmtU-css nextui-link\\" href=\\"https://nextui.org\\">link</a></div>"`;
diff --git a/packages/react/src/navbar/__tests__/index.test.tsx b/packages/react/src/navbar/__tests__/index.test.tsx
index e69de29bb2..a1873fce31 100644
--- a/packages/react/src/navbar/__tests__/index.test.tsx
+++ b/packages/react/src/navbar/__tests__/index.test.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import {render} from "@testing-library/react";
+
+import Navbar from "../index";
+
+describe("Navbar", () => {
+  it("should render correctly", () => {
+    const wrapper = render(<Navbar />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+});
diff --git a/packages/react/src/navbar/navbar-item.tsx b/packages/react/src/navbar/navbar-item.tsx
index 3fc26c23df..08be4baf5b 100644
--- a/packages/react/src/navbar/navbar-item.tsx
+++ b/packages/react/src/navbar/navbar-item.tsx
@@ -7,6 +7,7 @@ import {HTMLNextUIProps, forwardRef} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import {arrayToObject} from "../utils/object";
 import clsx from "../utils/clsx";
+import {Text} from "../index";
 import {__DEV__} from "../utils/assertion";
 
 import {useNavbarContentContext} from "./navbar-content-context";
@@ -14,7 +15,7 @@ import {StyledNavbarItem, NavbarItemVariantsProps} from "./navbar.styles";
 
 export interface Props
   extends Omit<HTMLNextUIProps<"li">, keyof NavbarItemVariantsProps | "color"> {
-  children?: React.ReactNode | React.ReactNode[];
+  children?: React.ReactNode;
   isDisabled?: boolean;
 }
 
@@ -29,7 +30,7 @@ const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
     activeColor,
     isActive,
     underlineHeight,
-    onMouseOver,
+    onMouseEnter,
     onMouseLeave,
     isDisabled,
     className,
@@ -185,17 +186,32 @@ const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
     onMouseLeave?.(event);
   };
 
-  const handleOnMouseOver = (event: React.MouseEvent<HTMLLIElement>) => {
+  const handleOnMouseEnter = (event: React.MouseEvent<HTMLLIElement>) => {
     if (!contentProps?.repositionHighlight) {
-      onMouseOver?.(event);
+      onMouseEnter?.(event);
 
       return;
     }
 
-    contentProps.repositionHighlight(event, domRef?.current);
-    onMouseOver?.(event);
+    const targetId = (event.target as HTMLElement)?.id;
+
+    if (targetId === itemId) {
+      contentProps.repositionHighlight(event, domRef?.current);
+    }
+    onMouseEnter?.(event);
   };
 
+  // enforce a single child
+  const child: any =
+    typeof children === "string" ? <Text>{children}</Text> : React.Children.only(children);
+
+  // add event listeners to the children
+  const childrenWithEventListeners = React.cloneElement(child, {
+    id: child.props?.id || itemId,
+    onMouseEnter: handleOnMouseEnter,
+    onMouseLeave: handleOnMouseLeave,
+  });
+
   return (
     <StyledNavbarItem
       ref={domRef}
@@ -206,11 +222,9 @@ const NavbarItem = forwardRef<NavbarItemProps, "li">((props, ref) => {
       isActive={isActive}
       underlineHeight={underlineHeight || contentProps?.underlineHeight}
       variant={itemVariant}
-      onMouseLeave={handleOnMouseLeave}
-      onMouseOver={handleOnMouseOver}
       {...mergeProps(hoverProps, otherProps)}
     >
-      {children}
+      {childrenWithEventListeners}
     </StyledNavbarItem>
   );
 });
diff --git a/packages/react/src/navbar/navbar-link.tsx b/packages/react/src/navbar/navbar-link.tsx
index 2219fd3baa..80e18d28c4 100644
--- a/packages/react/src/navbar/navbar-link.tsx
+++ b/packages/react/src/navbar/navbar-link.tsx
@@ -43,6 +43,7 @@ const NavbarLink = forwardRef<NavbarLinkProps, "a">((props, ref) => {
 
     return {
       color: "inherit",
+      height: "100%",
       ...css,
     };
   }, [color, css]);
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 4819013978..3717c70811 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import {Meta} from "@storybook/react";
 
-import {Link, Text, Button, Spacer} from "../index";
+import {Link, Text, Button, Spacer, Dropdown} from "../index";
 import {styled} from "../theme/stitches.config";
 
 import Navbar from "./index";
@@ -183,7 +183,7 @@ export const HideOnScroll = () => {
   );
 };
 
-export const Toggle = () => {
+export const WithToggle = () => {
   const parentRef = React.useRef(null);
   const collapseItems = [
     "Store",
@@ -249,3 +249,84 @@ export const Toggle = () => {
     </App>
   );
 };
+
+export const WithDropdown = () => {
+  const parentRef = React.useRef(null);
+  const collapseItems = [
+    "Store",
+    "Mac",
+    "iPad",
+    "iPhone",
+    "Watch",
+    "TV & Home",
+    "Music",
+    "Support",
+    "Store",
+    "Mac",
+    "iPad",
+    "iPhone",
+    "Watch",
+    "TV & Home",
+    "Music",
+    "Support",
+  ];
+
+  return (
+    <App ref={parentRef}>
+      <Navbar isBordered parentRef={parentRef} variant="sticky">
+        <Navbar.Content>
+          <Navbar.Toggle aria-label="toggle navigation" />
+          <Navbar.Brand>
+            <AcmeLogo />
+            <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+              ACME
+            </Text>
+          </Navbar.Brand>
+        </Navbar.Content>
+        <Navbar.Content
+          enableCursorHighlight
+          isCursorHighlightRounded
+          hideIn="sm"
+          variant="underline"
+        >
+          <Dropdown disableTriggerPressedAnimation>
+            <Navbar.Item>
+              <Dropdown.Button auto light css={{px: 0}} ripple={false}>
+                Features
+              </Dropdown.Button>
+            </Navbar.Item>
+            <Dropdown.Menu aria-label="Static Actions">
+              <Dropdown.Item key="new">New file</Dropdown.Item>
+              <Dropdown.Item key="copy">Copy link</Dropdown.Item>
+              <Dropdown.Item key="edit">Edit file</Dropdown.Item>
+              <Dropdown.Item key="delete" color="error">
+                Delete file
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
+          <Navbar.Link href="#">Integrations</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+        <Navbar.Collapse>
+          {collapseItems.map((item, index) => (
+            <Navbar.CollapseItem key={`${item}-${index}`}>{item}</Navbar.CollapseItem>
+          ))}
+        </Navbar.Collapse>
+      </Navbar>
+    </App>
+  );
+};
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index 3dcca59b28..dc6013f5d7 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -214,8 +214,10 @@ export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
   fontSize: "$$navbarItemFontSize",
   fontWeight: "$$navbarItemFontWeight",
   position: "relative",
-  "*": {
+  "> *": {
     zIndex: "$2",
+    fontSize: "inherit !important",
+    fontWeight: "inherit !important",
   },
   "&:before": {
     opacity: 0,
diff --git a/packages/react/src/navbar/use-navbar-content.ts b/packages/react/src/navbar/use-navbar-content.ts
index e718260c95..cfe3644a18 100644
--- a/packages/react/src/navbar/use-navbar-content.ts
+++ b/packages/react/src/navbar/use-navbar-content.ts
@@ -151,7 +151,6 @@ export function useNavbarContent(props: UseNavbarContentProps = {}) {
 
   const repositionHighlight = (event: React.MouseEvent<HTMLElement>, item: HTMLElement) => {
     if (!(event?.target instanceof Element)) return;
-
     setItemBoundingBox(event.target?.getBoundingClientRect?.());
     setWrapperBoundingBox(wrapperRef.current?.getBoundingClientRect?.());
     setIsHoveredFromNull(!highlightedItem);
diff --git a/packages/react/src/popover/popover-trigger.tsx b/packages/react/src/popover/popover-trigger.tsx
index c2c308a778..7277da8f3e 100644
--- a/packages/react/src/popover/popover-trigger.tsx
+++ b/packages/react/src/popover/popover-trigger.tsx
@@ -4,8 +4,8 @@ import * as React from "react";
 import {useButton} from "@react-aria/button";
 import {mergeProps} from "@react-aria/utils";
 
+import {Button, Text} from "../index";
 import {pickChild} from "../utils/collections";
-import {Button} from "../index";
 import {__DEV__} from "../utils/assertion";
 
 import {usePopoverContext} from "./popover-context";
@@ -30,7 +30,8 @@ const PopoverTrigger = React.forwardRef(
     );
 
     // enforce a single child
-    const child: any = React.Children.only(children);
+    const child: any =
+      typeof children === "string" ? <Text>{children}</Text> : React.Children.only(children);
 
     // validates if contains a NextUI Button as a child
     const [, triggerChildren] = pickChild(props.children, Button);
diff --git a/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
index 3dde1c3adf..21d8646af8 100644
--- a/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Switch should render correctly 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label>"`;
+exports[`Switch should render correctly 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label>"`;
 
-exports[`Switch should render correctly with an icon 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with an icon 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should render correctly with an iconOff 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with an iconOff 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should render correctly with an iconOn 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with an iconOn 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should render correctly with both icons on/off 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with both icons on/off 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should work with different colors 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-primary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-cMYjfR-color-secondary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-eTwznY-color-success nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-jTdYRZ-color-warning nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-dlOPhH-color-error nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
+exports[`Switch should work with different colors 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-primary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-cMYjfR-color-secondary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-eTwznY-color-success nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-jTdYRZ-color-warning nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-dlOPhH-color-error nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label></div>"`;
 
-exports[`Switch should work with different sizes 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-dAsftq-size-xs nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-gPEQiI-size-sm nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-lcjiCZ-size-lg nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-elYIjz-size-xl nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
+exports[`Switch should work with different sizes 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-dAsftq-size-xs nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-gPEQiI-size-sm nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-lcjiCZ-size-lg nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-elYIjz-size-xl nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label></div>"`;
diff --git a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
index 8f7fbb2fe8..a3156c3aa1 100644
--- a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria7384475654-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria7384475654-15-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria7384475654-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria7384475654-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria7384475654-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria7384475654-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria1964428431-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria1964428431-15-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria1964428431-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria1964428431-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria1964428431-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria1964428431-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
 
-exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria7384475654-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria7384475654-2-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria7384475654-2-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria7384475654-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria7384475654-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria7384475654-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria1964428431-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria1964428431-2-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria1964428431-2-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria1964428431-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria1964428431-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria1964428431-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
diff --git a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
index 0e2309a88f..32c489b09b 100644
--- a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Textarea should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea aria-multiline=\\"true\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"placeholder\\" type=\\"text\\" id=\\"react-aria6302143503-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`Textarea should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea aria-multiline=\\"true\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"placeholder\\" type=\\"text\\" id=\\"react-aria6310598195-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
 
-exports[`Textarea should work with different styles 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria6302143503-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria6302143503-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Textarea should work with different styles 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria6310598195-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria6310598195-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/theme/shared-css.ts b/packages/react/src/theme/shared-css.ts
index aad27ff478..e75b4b69e7 100644
--- a/packages/react/src/theme/shared-css.ts
+++ b/packages/react/src/theme/shared-css.ts
@@ -48,10 +48,13 @@ export const sharedVisuallyHidden = css({
   position: "absolute",
 });
 
-export const sharedDialogPopup = css({
-  // for dropdown triggers
-  '&[aria-haspopup="true"]&[aria-expanded="true"]': {
-    opacity: 0.7,
-    transform: "scale(0.97)",
+export const sharedDialogPopup = css(
+  {
+    // for dropdown triggers
+    '&[aria-haspopup="true"]&[aria-expanded="true"]&[data-pressed-transition-disabled="false"]': {
+      opacity: 0.7,
+      transform: "scale(0.97)",
+    },
   },
-});
+  cssNoBlurriness,
+);
diff --git a/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap
index f9a8d56714..3a69e0f81d 100644
--- a/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap
@@ -7,12 +7,12 @@ LoadedCheerio {
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-ldmKBv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
+          "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-jWfFif nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
         },
         "children": Array [
           Node {
             "attribs": Object {
-              "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar nextui-user-avatar",
+              "class": "nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar nextui-user-avatar",
               "data-state": "ready",
             },
             "children": Array [
@@ -320,7 +320,7 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar nextui-user-avatar",
+                "class": "nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar nextui-user-avatar",
                 "data-state": "ready",
               },
               "children": Array [
@@ -439,12 +439,12 @@ LoadedCheerio {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": Node {
           "attribs": Object {
-            "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-ldmKBv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
+            "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-jWfFif nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
           },
           "children": Array [
             Node {
               "attribs": Object {
-                "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css nextui-user-avatar",
+                "class": "nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css nextui-user-avatar",
                 "data-state": "loading",
               },
               "children": Array [
@@ -748,7 +748,7 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css nextui-user-avatar",
+                  "class": "nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css nextui-user-avatar",
                   "data-state": "loading",
                 },
                 "children": Array [
@@ -884,12 +884,12 @@ LoadedCheerio {
       },
       Node {
         "attribs": Object {
-          "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-ldmKBv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
+          "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-jWfFif nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
         },
         "children": Array [
           Node {
             "attribs": Object {
-              "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css nextui-user-avatar",
+              "class": "nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css nextui-user-avatar",
               "data-state": "loading",
             },
             "children": Array [
@@ -1193,7 +1193,7 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css nextui-user-avatar",
+                "class": "nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css nextui-user-avatar",
                 "data-state": "loading",
               },
               "children": Array [
@@ -1310,12 +1310,12 @@ LoadedCheerio {
         "parent": [Circular],
         "prev": Node {
           "attribs": Object {
-            "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-ldmKBv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
+            "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-jWfFif nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
           },
           "children": Array [
             Node {
               "attribs": Object {
-                "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar nextui-user-avatar",
+                "class": "nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar nextui-user-avatar",
                 "data-state": "ready",
               },
               "children": Array [
@@ -1623,7 +1623,7 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar nextui-user-avatar",
+                  "class": "nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar nextui-user-avatar",
                   "data-state": "ready",
                 },
                 "children": Array [

From f71824dd96e317f20ad47030e894075bb3b21747 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Fri, 12 Aug 2022 23:51:28 -0300
Subject: [PATCH 070/106] chore: yarnk.lock updated

---
 yarn.lock | 6605 +++++++++++++++++++++++++++--------------------------
 1 file changed, 3364 insertions(+), 3241 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index d287c207ac..011b2b5c24 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,135 +2,135 @@
 # yarn lockfile v1
 
 
-"@algolia/cache-browser-local-storage@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.13.0.tgz#f8aa4fe31104b19d616ea392f9ed5c2ea847d964"
-  integrity sha512-nj1vHRZauTqP/bluwkRIgEADEimqojJgoTRCel5f6q8WCa9Y8QeI4bpDQP28FoeKnDRYa3J5CauDlN466jqRhg==
-  dependencies:
-    "@algolia/cache-common" "4.13.0"
-
-"@algolia/cache-common@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.13.0.tgz#27b83fd3939d08d72261b36a07eeafc4cb4d2113"
-  integrity sha512-f9mdZjskCui/dA/fA/5a+6hZ7xnHaaZI5tM/Rw9X8rRB39SUlF/+o3P47onZ33n/AwkpSbi5QOyhs16wHd55kA==
-
-"@algolia/cache-in-memory@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.13.0.tgz#10801a74550cbabb64b59ff08c56bce9c278ff2d"
-  integrity sha512-hHdc+ahPiMM92CQMljmObE75laYzNFYLrNOu0Q3/eyvubZZRtY2SUsEEgyUEyzXruNdzrkcDxFYa7YpWBJYHAg==
-  dependencies:
-    "@algolia/cache-common" "4.13.0"
-
-"@algolia/client-account@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.13.0.tgz#f8646dd40d1e9e3353e10abbd5d6c293ea92a8e2"
-  integrity sha512-FzFqFt9b0g/LKszBDoEsW+dVBuUe1K3scp2Yf7q6pgHWM1WqyqUlARwVpLxqyc+LoyJkTxQftOKjyFUqddnPKA==
-  dependencies:
-    "@algolia/client-common" "4.13.0"
-    "@algolia/client-search" "4.13.0"
-    "@algolia/transporter" "4.13.0"
-
-"@algolia/client-analytics@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.13.0.tgz#a00bd02df45d71becb9dd4c5c993d805f2e1786d"
-  integrity sha512-klmnoq2FIiiMHImkzOm+cGxqRLLu9CMHqFhbgSy9wtXZrqb8BBUIUE2VyBe7azzv1wKcxZV2RUyNOMpFqmnRZA==
-  dependencies:
-    "@algolia/client-common" "4.13.0"
-    "@algolia/client-search" "4.13.0"
-    "@algolia/requester-common" "4.13.0"
-    "@algolia/transporter" "4.13.0"
-
-"@algolia/client-common@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.13.0.tgz#8bc373d164dbdcce38b4586912bbe162492bcb86"
-  integrity sha512-GoXfTp0kVcbgfSXOjfrxx+slSipMqGO9WnNWgeMmru5Ra09MDjrcdunsiiuzF0wua6INbIpBQFTC2Mi5lUNqGA==
-  dependencies:
-    "@algolia/requester-common" "4.13.0"
-    "@algolia/transporter" "4.13.0"
-
-"@algolia/client-personalization@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-4.13.0.tgz#10fb7af356422551f11a67222b39c52306f1512c"
-  integrity sha512-KneLz2WaehJmNfdr5yt2HQETpLaCYagRdWwIwkTqRVFCv4DxRQ2ChPVW9jeTj4YfAAhfzE6F8hn7wkQ/Jfj6ZA==
-  dependencies:
-    "@algolia/client-common" "4.13.0"
-    "@algolia/requester-common" "4.13.0"
-    "@algolia/transporter" "4.13.0"
-
-"@algolia/client-search@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.13.0.tgz#2d8ff8e755c4a37ec89968f3f9b358eed005c7f0"
-  integrity sha512-blgCKYbZh1NgJWzeGf+caKE32mo3j54NprOf0LZVCubQb3Kx37tk1Hc8SDs9bCAE8hUvf3cazMPIg7wscSxspA==
-  dependencies:
-    "@algolia/client-common" "4.13.0"
-    "@algolia/requester-common" "4.13.0"
-    "@algolia/transporter" "4.13.0"
+"@algolia/cache-browser-local-storage@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.14.2.tgz#d5b1b90130ca87c6321de876e167df9ec6524936"
+  integrity sha512-FRweBkK/ywO+GKYfAWbrepewQsPTIEirhi1BdykX9mxvBPtGNKccYAxvGdDCumU1jL4r3cayio4psfzKMejBlA==
+  dependencies:
+    "@algolia/cache-common" "4.14.2"
+
+"@algolia/cache-common@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-common/-/cache-common-4.14.2.tgz#b946b6103c922f0c06006fb6929163ed2c67d598"
+  integrity sha512-SbvAlG9VqNanCErr44q6lEKD2qoK4XtFNx9Qn8FK26ePCI8I9yU7pYB+eM/cZdS9SzQCRJBbHUumVr4bsQ4uxg==
+
+"@algolia/cache-in-memory@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/cache-in-memory/-/cache-in-memory-4.14.2.tgz#88e4a21474f9ac05331c2fa3ceb929684a395a24"
+  integrity sha512-HrOukWoop9XB/VFojPv1R5SVXowgI56T9pmezd/djh2JnVN/vXswhXV51RKy4nCpqxyHt/aGFSq2qkDvj6KiuQ==
+  dependencies:
+    "@algolia/cache-common" "4.14.2"
+
+"@algolia/client-account@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/client-account/-/client-account-4.14.2.tgz#b76ac1ba9ea71e8c3f77a1805b48350dc0728a16"
+  integrity sha512-WHtriQqGyibbb/Rx71YY43T0cXqyelEU0lB2QMBRXvD2X0iyeGl4qMxocgEIcbHyK7uqE7hKgjT8aBrHqhgc1w==
+  dependencies:
+    "@algolia/client-common" "4.14.2"
+    "@algolia/client-search" "4.14.2"
+    "@algolia/transporter" "4.14.2"
+
+"@algolia/client-analytics@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/client-analytics/-/client-analytics-4.14.2.tgz#ca04dcaf9a78ee5c92c5cb5e9c74cf031eb2f1fb"
+  integrity sha512-yBvBv2mw+HX5a+aeR0dkvUbFZsiC4FKSnfqk9rrfX+QrlNOKEhCG0tJzjiOggRW4EcNqRmaTULIYvIzQVL2KYQ==
+  dependencies:
+    "@algolia/client-common" "4.14.2"
+    "@algolia/client-search" "4.14.2"
+    "@algolia/requester-common" "4.14.2"
+    "@algolia/transporter" "4.14.2"
+
+"@algolia/client-common@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/client-common/-/client-common-4.14.2.tgz#e1324e167ffa8af60f3e8bcd122110fd0bfd1300"
+  integrity sha512-43o4fslNLcktgtDMVaT5XwlzsDPzlqvqesRi4MjQz2x4/Sxm7zYg5LRYFol1BIhG6EwxKvSUq8HcC/KxJu3J0Q==
+  dependencies:
+    "@algolia/requester-common" "4.14.2"
+    "@algolia/transporter" "4.14.2"
+
+"@algolia/client-personalization@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/client-personalization/-/client-personalization-4.14.2.tgz#656bbb6157a3dd1a4be7de65e457fda136c404ec"
+  integrity sha512-ACCoLi0cL8CBZ1W/2juehSltrw2iqsQBnfiu/Rbl9W2yE6o2ZUb97+sqN/jBqYNQBS+o0ekTMKNkQjHHAcEXNw==
+  dependencies:
+    "@algolia/client-common" "4.14.2"
+    "@algolia/requester-common" "4.14.2"
+    "@algolia/transporter" "4.14.2"
+
+"@algolia/client-search@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/client-search/-/client-search-4.14.2.tgz#357bdb7e640163f0e33bad231dfcc21f67dc2e92"
+  integrity sha512-L5zScdOmcZ6NGiVbLKTvP02UbxZ0njd5Vq9nJAmPFtjffUSOGEp11BmD2oMJ5QvARgx2XbX4KzTTNS5ECYIMWw==
+  dependencies:
+    "@algolia/client-common" "4.14.2"
+    "@algolia/requester-common" "4.14.2"
+    "@algolia/transporter" "4.14.2"
 
 "@algolia/events@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@algolia/events/-/events-4.0.1.tgz#fd39e7477e7bc703d7f893b556f676c032af3950"
   integrity sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ==
 
-"@algolia/logger-common@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.13.0.tgz#be2606e71aae618a1ff1ea9a1b5f5a74284b35a8"
-  integrity sha512-8yqXk7rMtmQJ9wZiHOt/6d4/JDEg5VCk83gJ39I+X/pwUPzIsbKy9QiK4uJ3aJELKyoIiDT1hpYVt+5ia+94IA==
+"@algolia/logger-common@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-common/-/logger-common-4.14.2.tgz#b74b3a92431f92665519d95942c246793ec390ee"
+  integrity sha512-/JGlYvdV++IcMHBnVFsqEisTiOeEr6cUJtpjz8zc0A9c31JrtLm318Njc72p14Pnkw3A/5lHHh+QxpJ6WFTmsA==
 
-"@algolia/logger-console@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.13.0.tgz#f28028a760e3d9191e28a10b12925e48f6c9afde"
-  integrity sha512-YepRg7w2/87L0vSXRfMND6VJ5d6699sFJBRWzZPOlek2p5fLxxK7O0VncYuc/IbVHEgeApvgXx0WgCEa38GVuQ==
+"@algolia/logger-console@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/logger-console/-/logger-console-4.14.2.tgz#ec49cb47408f5811d4792598683923a800abce7b"
+  integrity sha512-8S2PlpdshbkwlLCSAB5f8c91xyc84VM9Ar9EdfE9UmX+NrKNYnWR1maXXVDQQoto07G1Ol/tYFnFVhUZq0xV/g==
   dependencies:
-    "@algolia/logger-common" "4.13.0"
+    "@algolia/logger-common" "4.14.2"
 
-"@algolia/requester-browser-xhr@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.13.0.tgz#e2483f4e8d7f09e27cd0daf6c77711d15c5a919f"
-  integrity sha512-Dj+bnoWR5MotrnjblzGKZ2kCdQi2cK/VzPURPnE616NU/il7Ypy6U6DLGZ/ZYz+tnwPa0yypNf21uqt84fOgrg==
+"@algolia/requester-browser-xhr@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.14.2.tgz#a2cd4d9d8d90d53109cc7f3682dc6ebf20f798f2"
+  integrity sha512-CEh//xYz/WfxHFh7pcMjQNWgpl4wFB85lUMRyVwaDPibNzQRVcV33YS+63fShFWc2+42YEipFGH2iPzlpszmDw==
   dependencies:
-    "@algolia/requester-common" "4.13.0"
+    "@algolia/requester-common" "4.14.2"
 
-"@algolia/requester-common@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.13.0.tgz#47fb3464cfb26b55ba43676d13f295d812830596"
-  integrity sha512-BRTDj53ecK+gn7ugukDWOOcBRul59C4NblCHqj4Zm5msd5UnHFjd/sGX+RLOEoFMhetILAnmg6wMrRrQVac9vw==
+"@algolia/requester-common@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-common/-/requester-common-4.14.2.tgz#bc4e9e5ee16c953c0ecacbfb334a33c30c28b1a1"
+  integrity sha512-73YQsBOKa5fvVV3My7iZHu1sUqmjjfs9TteFWwPwDmnad7T0VTCopttcsM3OjLxZFtBnX61Xxl2T2gmG2O4ehg==
 
-"@algolia/requester-node-http@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.13.0.tgz#7d981bbd31492f51dd11820a665f9d8906793c37"
-  integrity sha512-9b+3O4QFU4azLhGMrZAr/uZPydvzOR4aEZfSL8ZrpLZ7fbbqTO0S/5EVko+QIgglRAtVwxvf8UJ1wzTD2jvKxQ==
+"@algolia/requester-node-http@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/requester-node-http/-/requester-node-http-4.14.2.tgz#7c1223a1785decaab1def64c83dade6bea45e115"
+  integrity sha512-oDbb02kd1o5GTEld4pETlPZLY0e+gOSWjWMJHWTgDXbv9rm/o2cF7japO6Vj1ENnrqWvLBmW1OzV9g6FUFhFXg==
   dependencies:
-    "@algolia/requester-common" "4.13.0"
+    "@algolia/requester-common" "4.14.2"
 
-"@algolia/transporter@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.13.0.tgz#f6379e5329efa2127da68c914d1141f5f21dbd07"
-  integrity sha512-8tSQYE+ykQENAdeZdofvtkOr5uJ9VcQSWgRhQ9h01AehtBIPAczk/b2CLrMsw5yQZziLs5cZ3pJ3478yI+urhA==
+"@algolia/transporter@4.14.2":
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/@algolia/transporter/-/transporter-4.14.2.tgz#77c069047fb1a4359ee6a51f51829508e44a1e3d"
+  integrity sha512-t89dfQb2T9MFQHidjHcfhh6iGMNwvuKUvojAj+JsrHAGbuSy7yE4BylhLX6R0Q1xYRoC4Vvv+O5qIw/LdnQfsQ==
   dependencies:
-    "@algolia/cache-common" "4.13.0"
-    "@algolia/logger-common" "4.13.0"
-    "@algolia/requester-common" "4.13.0"
+    "@algolia/cache-common" "4.14.2"
+    "@algolia/logger-common" "4.14.2"
+    "@algolia/requester-common" "4.14.2"
 
 "@ampproject/remapping@^2.1.0":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.1.2.tgz#4edca94973ded9630d20101cd8559cedb8d8bd34"
-  integrity sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
+  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.0"
+    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
 
 "@babel/cli@^7.14.5":
-  version "7.17.6"
-  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.17.6.tgz#169e5935f1795f0b62ded5a2accafeedfe5c5363"
-  integrity sha512-l4w608nsDNlxZhiJ5tE3DbNmr61fIKMZ6fTBo171VEFuFMIYuJ3mHRhTLEkKKyvx2Mizkkv/0a8OJOnZqkKYNA==
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.18.10.tgz#4211adfc45ffa7d4f3cee6b60bb92e9fe68fe56a"
+  integrity sha512-dLvWH+ZDFAkd2jPBSghrsFBuXrREvFwjpDycXbmUoeochqKYe4zNSLEJYErpLg8dvxvZYe79/MkN461XCwpnGw==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.4"
+    "@jridgewell/trace-mapping" "^0.3.8"
     commander "^4.0.1"
     convert-source-map "^1.1.0"
     fs-readdir-recursive "^1.1.0"
-    glob "^7.0.0"
+    glob "^7.2.0"
     make-dir "^2.1.0"
     slash "^2.0.0"
-    source-map "^0.5.0"
   optionalDependencies:
     "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3"
     chokidar "^3.4.0"
@@ -142,17 +142,17 @@
   dependencies:
     "@babel/highlight" "^7.10.4"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
-  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.18.6", "@babel/code-frame@^7.5.5", "@babel/code-frame@^7.8.3":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
   dependencies:
-    "@babel/highlight" "^7.16.7"
+    "@babel/highlight" "^7.18.6"
 
-"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.8", "@babel/compat-data@^7.17.0", "@babel/compat-data@^7.17.7":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
-  integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ==
+"@babel/compat-data@^7.17.7", "@babel/compat-data@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
+  integrity sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==
 
 "@babel/core@7.12.9":
   version "7.12.9"
@@ -177,93 +177,80 @@
     source-map "^0.5.0"
 
 "@babel/core@^7.1.0", "@babel/core@^7.12.10", "@babel/core@^7.12.3", "@babel/core@^7.13.8", "@babel/core@^7.16.7", "@babel/core@^7.7.5":
-  version "7.17.8"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.17.8.tgz#3dac27c190ebc3a4381110d46c80e77efe172e1a"
-  integrity sha512-OdQDV/7cRBtJHLSOBqqbYNkOcydOgnX59TZx4puf41fzcVtN3e/4yqY8lMQsK+5X2lJtAdmA+6OHqsj1hBJ4IQ==
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.10.tgz#39ad504991d77f1f3da91be0b8b949a5bc466fb8"
+  integrity sha512-JQM6k6ENcBFKVtWvLavlvi/mPcpYZ3+R+2EySDEMSMbp7Mn4FexlbbJVrx2R7Ijhr01T8gyqrOaABWIOgxeUyw==
   dependencies:
     "@ampproject/remapping" "^2.1.0"
-    "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.17.7"
-    "@babel/helper-compilation-targets" "^7.17.7"
-    "@babel/helper-module-transforms" "^7.17.7"
-    "@babel/helpers" "^7.17.8"
-    "@babel/parser" "^7.17.8"
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.17.3"
-    "@babel/types" "^7.17.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.10"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-module-transforms" "^7.18.9"
+    "@babel/helpers" "^7.18.9"
+    "@babel/parser" "^7.18.10"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.18.10"
+    "@babel/types" "^7.18.10"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
-    json5 "^2.1.2"
+    json5 "^2.2.1"
     semver "^6.3.0"
 
-"@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.17.3", "@babel/generator@^7.17.7", "@babel/generator@^7.6.2":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
-  integrity sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==
+"@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.18.10", "@babel/generator@^7.6.2":
+  version "7.18.12"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.12.tgz#fa58daa303757bd6f5e4bbca91b342040463d9f4"
+  integrity sha512-dfQ8ebCN98SvyL7IxNMCUtZQSq5R7kxgN+r8qYTGDmmSion1hX2C0zq2yo1bsCDhXixokv1SAWTZUMYbO/V5zg==
   dependencies:
-    "@babel/types" "^7.17.0"
+    "@babel/types" "^7.18.10"
+    "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
-    source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
-  integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
+"@babel/helper-annotate-as-pure@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
+  integrity sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==
   dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.16.7.tgz#38d138561ea207f0f69eb1626a418e4f7e6a580b"
-  integrity sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.18.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.18.9.tgz#acd4edfd7a566d1d51ea975dff38fd52906981bb"
+  integrity sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==
   dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.16.7"
-    "@babel/types" "^7.16.7"
+    "@babel/helper-explode-assignable-expression" "^7.18.6"
+    "@babel/types" "^7.18.9"
 
-"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.16.7", "@babel/helper-compilation-targets@^7.17.7":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.17.7.tgz#a3c2924f5e5f0379b356d4cfb313d1414dc30e46"
-  integrity sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==
+"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.17.7", "@babel/helper-compilation-targets@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz#69e64f57b524cde3e5ff6cc5a9f4a387ee5563bf"
+  integrity sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==
   dependencies:
-    "@babel/compat-data" "^7.17.7"
-    "@babel/helper-validator-option" "^7.16.7"
-    browserslist "^4.17.5"
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.20.2"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.6":
-  version "7.17.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.6.tgz#3778c1ed09a7f3e65e6d6e0f6fbfcc53809d92c9"
-  integrity sha512-SogLLSxXm2OkBbSsHZMM4tUi8fUzjs63AT/d0YQIzr6GSd8Hxsbk2KYDX0k0DweAzGMj/YWeiCsorIdtdcW8Eg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-function-name" "^7.16.7"
-    "@babel/helper-member-expression-to-functions" "^7.16.7"
-    "@babel/helper-optimise-call-expression" "^7.16.7"
-    "@babel/helper-replace-supers" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-
-"@babel/helper-create-class-features-plugin@^7.17.12":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.0.tgz#fac430912606331cb075ea8d82f9a4c145a4da19"
-  integrity sha512-Kh8zTGR9de3J63e5nS0rQUdRs/kbtwoeQQ0sriS0lItjC96u8XXZN6lKpuyWd2coKSU13py/y+LTmThLuVX0Pg==
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.18.9.tgz#d802ee16a64a9e824fcbf0a2ffc92f19d58550ce"
+  integrity sha512-WvypNAYaVh23QcjpMR24CwZY2Nz6hqdOcFdPbNpV56hL5H6KiFheO7Xm1aPdlLQ7d5emYZX7VZwPp9x3z+2opw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-function-name" "^7.17.9"
-    "@babel/helper-member-expression-to-functions" "^7.17.7"
-    "@babel/helper-optimise-call-expression" "^7.16.7"
-    "@babel/helper-replace-supers" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.18.9"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-split-export-declaration" "^7.18.6"
 
-"@babel/helper-create-regexp-features-plugin@^7.16.7":
-  version "7.17.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.17.0.tgz#1dcc7d40ba0c6b6b25618997c5dbfd310f186fe1"
-  integrity sha512-awO2So99wG6KnlE+TPs6rn83gCz5WlEePJDTnLEqbchMVrBeAujURVphRdigsk094VhvZehFoNOihSlcBjwsXA==
+"@babel/helper-create-regexp-features-plugin@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.18.6.tgz#3e35f4e04acbbf25f1b3534a657610a000543d3c"
+  integrity sha512-7LcpH1wnQLGrI+4v+nPp+zUvIkF9x0ddv1Hkdue10tg3gmRnLy97DXh4STiOf1qeIInyD69Qv5kKSZzKD8B/7A==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    regexpu-core "^5.0.1"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    regexpu-core "^5.1.0"
 
 "@babel/helper-define-polyfill-provider@^0.1.5":
   version "0.1.5"
@@ -279,306 +266,288 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
-"@babel/helper-define-polyfill-provider@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.1.tgz#52411b445bdb2e676869e5a74960d2d3826d2665"
-  integrity sha512-J9hGMpJQmtWmj46B3kBHmL38UhJGhYX7eqkcq+2gsstyYt341HmPeWspihX43yVRA0mS+8GGk2Gckc7bY/HCmA==
+"@babel/helper-define-polyfill-provider@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.3.2.tgz#bd10d0aca18e8ce012755395b05a79f45eca5073"
+  integrity sha512-r9QJJ+uDWrd+94BSPcP6/de67ygLtvVy6cK4luE6MOuDsZIdoaPBnfSpbO/+LTifjPckbKXRuI9BB/Z2/y3iTg==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.13.0"
-    "@babel/helper-module-imports" "^7.12.13"
-    "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/traverse" "^7.13.0"
+    "@babel/helper-compilation-targets" "^7.17.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
     debug "^4.1.1"
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
     semver "^6.1.2"
 
-"@babel/helper-environment-visitor@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
-  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
-"@babel/helper-explode-assignable-expression@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.7.tgz#12a6d8522fdd834f194e868af6354e8650242b7a"
-  integrity sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
-"@babel/helper-function-name@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
-  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.16.7"
-    "@babel/template" "^7.16.7"
-    "@babel/types" "^7.16.7"
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
-"@babel/helper-function-name@^7.17.9":
-  version "7.17.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12"
-  integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
+"@babel/helper-explode-assignable-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
+  integrity sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==
   dependencies:
-    "@babel/template" "^7.16.7"
-    "@babel/types" "^7.17.0"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-get-function-arity@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
-  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+"@babel/helper-function-name@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz#940e6084a55dee867d33b4e487da2676365e86b0"
+  integrity sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==
   dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/template" "^7.18.6"
+    "@babel/types" "^7.18.9"
 
-"@babel/helper-hoist-variables@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
-  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
   dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-member-expression-to-functions@^7.16.7", "@babel/helper-member-expression-to-functions@^7.17.7":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz#a34013b57d8542a8c4ff8ba3f747c02452a4d8c4"
-  integrity sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==
+"@babel/helper-member-expression-to-functions@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz#1531661e8375af843ad37ac692c132841e2fd815"
+  integrity sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==
   dependencies:
-    "@babel/types" "^7.17.0"
+    "@babel/types" "^7.18.9"
 
-"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
-  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+"@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
   dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.16.7", "@babel/helper-module-transforms@^7.17.7":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.17.7.tgz#3943c7f777139e7954a5355c815263741a9c1cbd"
-  integrity sha512-VmZD99F3gNTYB7fJRDTi+u6l/zxY0BE6OIxPSU7a50s6ZUQkHwSDmV92FfM+oCG0pZRVojGYhkR8I0OGeCVREw==
+"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.18.6", "@babel/helper-module-transforms@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz#5a1079c005135ed627442df31a42887e80fcb712"
+  integrity sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==
   dependencies:
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/helper-simple-access" "^7.17.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-    "@babel/helper-validator-identifier" "^7.16.7"
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.17.3"
-    "@babel/types" "^7.17.0"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
 
-"@babel/helper-optimise-call-expression@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz#a34e3560605abbd31a18546bd2aad3e6d9a174f2"
-  integrity sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==
+"@babel/helper-optimise-call-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz#9369aa943ee7da47edab2cb4e838acf09d290ffe"
+  integrity sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==
   dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/types" "^7.18.6"
 
 "@babel/helper-plugin-utils@7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
   integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
-  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
-
-"@babel/helper-plugin-utils@^7.17.12":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
-  integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
-
-"@babel/helper-remap-async-to-generator@^7.16.8":
-  version "7.16.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
-  integrity sha512-fm0gH7Flb8H51LqJHy3HJ3wnE1+qtYR2A99K06ahwrawLdOFsCEWjZOrYricXJHoPSudNKxrMBUPEIPxiIIvBw==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-wrap-function" "^7.16.8"
-    "@babel/types" "^7.16.8"
-
-"@babel/helper-replace-supers@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz#e9f5f5f32ac90429c1a4bdec0f231ef0c2838ab1"
-  integrity sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==
-  dependencies:
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-member-expression-to-functions" "^7.16.7"
-    "@babel/helper-optimise-call-expression" "^7.16.7"
-    "@babel/traverse" "^7.16.7"
-    "@babel/types" "^7.16.7"
-
-"@babel/helper-simple-access@^7.17.7":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.17.7.tgz#aaa473de92b7987c6dfa7ce9a7d9674724823367"
-  integrity sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==
-  dependencies:
-    "@babel/types" "^7.17.0"
-
-"@babel/helper-skip-transparent-expression-wrappers@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.16.0.tgz#0ee3388070147c3ae051e487eca3ebb0e2e8bb09"
-  integrity sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==
-  dependencies:
-    "@babel/types" "^7.16.0"
-
-"@babel/helper-split-export-declaration@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
-  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
-"@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
-  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
-
-"@babel/helper-validator-option@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
-  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
-
-"@babel/helper-wrap-function@^7.16.8":
-  version "7.16.8"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.16.8.tgz#58afda087c4cd235de92f7ceedebca2c41274200"
-  integrity sha512-8RpyRVIAW1RcDDGTA+GpPAwV22wXCfKOoM9bet6TLkGIFTkRQSkH1nMQ5Yet4MpoXe1ZwHPVtNasc2w0uZMqnw==
-  dependencies:
-    "@babel/helper-function-name" "^7.16.7"
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.16.8"
-    "@babel/types" "^7.16.8"
-
-"@babel/helpers@^7.12.5", "@babel/helpers@^7.17.8":
-  version "7.17.8"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.8.tgz#288450be8c6ac7e4e44df37bcc53d345e07bc106"
-  integrity sha512-QcL86FGxpfSJwGtAvv4iG93UL6bmqBdmoVY0CMCU2g+oD2ezQse3PT5Pa+jiD6LJndBQi0EDlpzOWNlLuhz5gw==
-  dependencies:
-    "@babel/template" "^7.16.7"
-    "@babel/traverse" "^7.17.3"
-    "@babel/types" "^7.17.0"
-
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.16.7":
-  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
-  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.16.7"
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.13.0", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.18.9", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
+  integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
+
+"@babel/helper-remap-async-to-generator@^7.18.6", "@babel/helper-remap-async-to-generator@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
+  integrity sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-wrap-function" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-replace-supers@^7.18.6", "@babel/helper-replace-supers@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.18.9.tgz#1092e002feca980fbbb0bd4d51b74a65c6a500e6"
+  integrity sha512-dNsWibVI4lNT6HiuOIBr1oyxo40HvIVmbwPUm3XZ7wMh4k2WxrxTqZwSqw/eEmXDS9np0ey5M2bz9tBmO9c+YQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-member-expression-to-functions" "^7.18.9"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-simple-access@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz#d6d8f51f4ac2978068df934b569f08f29788c7ea"
+  integrity sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.18.9.tgz#778d87b3a758d90b471e7b9918f34a9a02eb5818"
+  integrity sha512-imytd2gHi3cJPsybLRbmFrF7u5BIEuI2cNheyKi3/iOBC63kNn3q8Crn2xVuESli0aM4KYsyEqKyS7lFL8YVtw==
+  dependencies:
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-string-parser@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
+  integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
+
+"@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
+  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+
+"@babel/helper-validator-option@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
+  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+
+"@babel/helper-wrap-function@^7.18.9":
+  version "7.18.11"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.18.11.tgz#bff23ace436e3f6aefb61f85ffae2291c80ed1fb"
+  integrity sha512-oBUlbv+rjZLh2Ks9SKi4aL7eKaAXBWleHzU89mP0G6BMUlRxSckk9tSIkgDGydhgFxHuGSlBQZfnaD47oBEB7w==
+  dependencies:
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.18.11"
+    "@babel/types" "^7.18.10"
+
+"@babel/helpers@^7.12.5", "@babel/helpers@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.9.tgz#4bef3b893f253a1eced04516824ede94dcfe7ff9"
+  integrity sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
+"@babel/highlight@^7.10.4", "@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.16.7", "@babel/parser@^7.17.3", "@babel/parser@^7.17.8":
-  version "7.17.8"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
-  integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
+"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.18.11":
+  version "7.18.11"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.11.tgz#68bb07ab3d380affa9a3f96728df07969645d2d9"
+  integrity sha512-9JKn5vN+hDt0Hdqn1PiJ2guflwP+B6Ga8qbDuoF0PzzVhrzsKIJo8yGqVk6CmMHiMei9w1C1Bp9IMJSIK+HPIQ==
 
-"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050"
-  integrity sha512-anv/DObl7waiGEnC24O9zqL0pSuI9hljihqiDuFHC8d7/bjr/4RLGPWuc8rYOff/QPzbEPSkzG8wGG9aDuhHRg==
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
+  integrity sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.16.7.tgz#cc001234dfc139ac45f6bcf801866198c8c72ff9"
-  integrity sha512-di8vUHRdf+4aJ7ltXhaDbPoszdkh59AQtJM5soLsuHpQJdFQZOA4uGj0V2u/CZ8bJ/u8ULDL5yq6FO/bCXnKHw==
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz#a11af19aa373d68d561f08e0a57242350ed0ec50"
+  integrity sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
-    "@babel/plugin-proposal-optional-chaining" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
+    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
 
-"@babel/plugin-proposal-async-generator-functions@^7.16.8":
-  version "7.16.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.16.8.tgz#3bdd1ebbe620804ea9416706cd67d60787504bc8"
-  integrity sha512-71YHIvMuiuqWJQkebWJtdhQTfd4Q4mF76q2IX37uZPkG9+olBxsX+rH1vkhFto4UeJZ9dPY2s+mDvhDm1u2BGQ==
+"@babel/plugin-proposal-async-generator-functions@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.18.10.tgz#85ea478c98b0095c3e4102bff3b67d306ed24952"
+  integrity sha512-1mFuY2TOsR1hxbjCo4QL+qlIjV07p4H4EUYw2J/WCqsvFV6V9X9z9YhXbWndc/4fw+hYGlDT7egYxliMp5O6Ew==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-remap-async-to-generator" "^7.16.8"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-remap-async-to-generator" "^7.18.9"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
-"@babel/plugin-proposal-class-properties@^7.12.1", "@babel/plugin-proposal-class-properties@^7.13.0", "@babel/plugin-proposal-class-properties@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.7.tgz#925cad7b3b1a2fcea7e59ecc8eb5954f961f91b0"
-  integrity sha512-IobU0Xme31ewjYOShSIqd/ZGM/r/cuOz2z0MDbNrhF5FW+ZVgi0f2lyeoj9KFPDOAqsYxmLWZte1WOwlvY9aww==
+"@babel/plugin-proposal-class-properties@^7.12.1", "@babel/plugin-proposal-class-properties@^7.13.0", "@babel/plugin-proposal-class-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
+  integrity sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-class-static-block@^7.16.7":
-  version "7.17.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.17.6.tgz#164e8fd25f0d80fa48c5a4d1438a6629325ad83c"
-  integrity sha512-X/tididvL2zbs7jZCeeRJ8167U/+Ac135AM6jCAx6gYXDUviZV5Ku9UDvWS2NCuWlFjIRXklYhwo6HhAC7ETnA==
+"@babel/plugin-proposal-class-static-block@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz#8aa81d403ab72d3962fc06c26e222dacfc9b9020"
+  integrity sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.17.6"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
 "@babel/plugin-proposal-decorators@^7.12.12":
-  version "7.17.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.17.8.tgz#4f0444e896bee85d35cf714a006fc5418f87ff00"
-  integrity sha512-U69odN4Umyyx1xO1rTII0IDkAEC+RNlcKXtqOblfpzqy1C+aOplb76BQNq0+XdpVkOaPlpEDwd++joY8FNFJKA==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.17.6"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-replace-supers" "^7.16.7"
-    "@babel/plugin-syntax-decorators" "^7.17.0"
-    charcodes "^0.2.0"
-
-"@babel/plugin-proposal-dynamic-import@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2"
-  integrity sha512-I8SW9Ho3/8DRSdmDdH3gORdyUuYnk1m4cMxUAdu5oy4n3OfN8flDEH+d60iG7dUfi0KkYwSvoalHzzdRzpWHTg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.18.10.tgz#788650d01e518a8a722eb8b3055dd9d73ecb7a35"
+  integrity sha512-wdGTwWF5QtpTY/gbBtQLAiCnoxfD4qMbN87NYZle1dOZ9Os8Y6zXcKrIaOU8W+TIvFUWVGG9tUgNww3CjXRVVw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/plugin-syntax-decorators" "^7.18.6"
+
+"@babel/plugin-proposal-dynamic-import@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.18.6.tgz#72bcf8d408799f547d759298c3c27c7e7faa4d94"
+  integrity sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
 "@babel/plugin-proposal-export-default-from@^7.12.1", "@babel/plugin-proposal-export-default-from@^7.12.13":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.16.7.tgz#a40ab158ca55627b71c5513f03d3469026a9e929"
-  integrity sha512-+cENpW1rgIjExn+o5c8Jw/4BuH4eGKKYvkMB8/0ZxFQ9mC0t4z09VsPIwNg6waF69QYC81zxGeAsREGuqQoKeg==
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.18.10.tgz#091f4794dbce4027c03cf4ebc64d3fb96b75c206"
+  integrity sha512-5H2N3R2aQFxkV4PIBUR/i7PUSwgTZjouJKzI8eKswfIjT0PhvzkPn0t0wIS5zn6maQuvtT0t1oHtMUz61LOuow==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/plugin-syntax-export-default-from" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-export-default-from" "^7.18.6"
 
-"@babel/plugin-proposal-export-namespace-from@^7.12.13", "@babel/plugin-proposal-export-namespace-from@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.7.tgz#09de09df18445a5786a305681423ae63507a6163"
-  integrity sha512-ZxdtqDXLRGBL64ocZcs7ovt71L3jhC1RGSyR996svrCi3PYqHNkb3SwPJCs8RIzD86s+WPpt2S73+EHCGO+NUA==
+"@babel/plugin-proposal-export-namespace-from@^7.12.13", "@babel/plugin-proposal-export-namespace-from@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203"
+  integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-json-strings@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz#9732cb1d17d9a2626a08c5be25186c195b6fa6e8"
-  integrity sha512-lNZ3EEggsGY78JavgbHsK9u5P3pQaW7k4axlgFLYkMd7UBsiNahCITShLjNQschPyjtO6dADrL24757IdhBrsQ==
+"@babel/plugin-proposal-json-strings@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.18.6.tgz#7e8788c1811c393aff762817e7dbf1ebd0c05f0b"
+  integrity sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.7.tgz#be23c0ba74deec1922e639832904be0bea73cdea"
-  integrity sha512-K3XzyZJGQCr00+EtYtrDjmwX7o7PLK6U9bi1nCwkQioRFVUv6dJoxbQjtWVtP+bCPy82bONBKG8NPyQ4+i6yjg==
+"@babel/plugin-proposal-logical-assignment-operators@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz#8148cbb350483bf6220af06fa6db3690e14b2e23"
+  integrity sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1", "@babel/plugin-proposal-nullish-coalescing-operator@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz#141fc20b6857e59459d430c850a0011e36561d99"
-  integrity sha512-aUOrYU3EVtjf62jQrCj63pYZ7k6vns2h/DQvHPWGmsJRYzWXZ6/AsfgpiRy6XiuIDADhJzP2Q9MwSMKauBQ+UQ==
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1", "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1"
+  integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-proposal-numeric-separator@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.7.tgz#d6b69f4af63fb38b6ca2558442a7fb191236eba9"
-  integrity sha512-vQgPMknOIgiuVqbokToyXbkY/OmmjAzr/0lhSIbG/KmnzXPGwW/AdhdKpi+O4X/VkWiWjnkKOBiqJrTaC98VKw==
+"@babel/plugin-proposal-numeric-separator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.18.6.tgz#899b14fbafe87f053d2c5ff05b36029c62e13c75"
+  integrity sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
 "@babel/plugin-proposal-object-rest-spread@7.12.1":
@@ -590,69 +559,59 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
     "@babel/plugin-transform-parameters" "^7.12.1"
 
-"@babel/plugin-proposal-object-rest-spread@^7.12.1", "@babel/plugin-proposal-object-rest-spread@^7.15.6", "@babel/plugin-proposal-object-rest-spread@^7.16.7":
-  version "7.17.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.17.3.tgz#d9eb649a54628a51701aef7e0ea3d17e2b9dd390"
-  integrity sha512-yuL5iQA/TbZn+RGAfxQXfi7CNLmKi1f8zInn4IgobuCWcAb7i+zj4TYzQ9l8cEzVyJ89PDGuqxK1xZpUDISesw==
+"@babel/plugin-proposal-object-rest-spread@^7.12.1", "@babel/plugin-proposal-object-rest-spread@^7.15.6", "@babel/plugin-proposal-object-rest-spread@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.18.9.tgz#f9434f6beb2c8cae9dfcf97d2a5941bbbf9ad4e7"
+  integrity sha512-kDDHQ5rflIeY5xl69CEqGEZ0KY369ehsCIEbTGb4siHG5BE9sga/T0r0OUwyZNLMmZE79E1kbsqAjwFCW4ds6Q==
   dependencies:
-    "@babel/compat-data" "^7.17.0"
-    "@babel/helper-compilation-targets" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.16.7"
+    "@babel/plugin-transform-parameters" "^7.18.8"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.16.7.tgz#c623a430674ffc4ab732fd0a0ae7722b67cb74cf"
-  integrity sha512-eMOH/L4OvWSZAE1VkHbr1vckLG1WUcHGJSLqqQwl2GaUqG6QjddvrOaTUMNYiv77H5IKPMZ9U9P7EaHwvAShfA==
+"@babel/plugin-proposal-optional-catch-binding@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.18.6.tgz#f9400d0e6a3ea93ba9ef70b09e72dd6da638a2cb"
+  integrity sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.12.7", "@babel/plugin-proposal-optional-chaining@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.7.tgz#7cd629564724816c0e8a969535551f943c64c39a"
-  integrity sha512-eC3xy+ZrUcBtP7x+sq62Q/HYd674pPTb/77XZMb5wbDPGWIdUbSr4Agr052+zaUPSb+gGRnjxXfKFvx5iMJ+DA==
+"@babel/plugin-proposal-optional-chaining@^7.12.7", "@babel/plugin-proposal-optional-chaining@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz#e8e8fe0723f2563960e4bf5e9690933691915993"
+  integrity sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
-"@babel/plugin-proposal-private-methods@^7.12.1", "@babel/plugin-proposal-private-methods@^7.16.11":
-  version "7.16.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.11.tgz#e8df108288555ff259f4527dbe84813aac3a1c50"
-  integrity sha512-F/2uAkPlXDr8+BHpZvo19w3hLFKge+k75XUprE6jaqKxjGkSYcK+4c+bup5PdW/7W/Rpjwql7FTVEDW+fRAQsw==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.16.10"
-    "@babel/helper-plugin-utils" "^7.16.7"
-
-"@babel/plugin-proposal-private-property-in-object@^7.12.1":
-  version "7.17.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.17.12.tgz#b02efb7f106d544667d91ae97405a9fd8c93952d"
-  integrity sha512-/6BtVi57CJfrtDNKfK5b66ydK2J5pXUKBKSPD2G1whamMuEnZWgoOIfO8Vf9F/DoD4izBLD/Au4NMQfruzzykg==
+"@babel/plugin-proposal-private-methods@^7.12.1", "@babel/plugin-proposal-private-methods@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.18.6.tgz#5209de7d213457548a98436fa2882f52f4be6bea"
+  integrity sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-create-class-features-plugin" "^7.17.12"
-    "@babel/helper-plugin-utils" "^7.17.12"
-    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-private-property-in-object@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.7.tgz#b0b8cef543c2c3d57e59e2c611994861d46a3fce"
-  integrity sha512-rMQkjcOFbm+ufe3bTZLyOfsOUOxyvLXZJCTARhJr+8UMSoZmqTe1K1BgkFcrW37rAchWg57yI69ORxiWvUINuQ==
+"@babel/plugin-proposal-private-property-in-object@^7.12.1", "@babel/plugin-proposal-private-property-in-object@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.18.6.tgz#a64137b232f0aca3733a67eb1a144c192389c503"
+  integrity sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-create-class-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.16.7", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.16.7.tgz#635d18eb10c6214210ffc5ff4932552de08188a2"
-  integrity sha512-QRK0YI/40VLhNVGIjRNAAQkEHws0cswSdFFjpFyt943YmJIU1da9uW63Iu6NFV6CxTZW5eTDCrwZUstBWgp/Rg==
+"@babel/plugin-proposal-unicode-property-regex@^7.18.6", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e"
+  integrity sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-syntax-async-generators@^7.8.4":
   version "7.8.4"
@@ -682,12 +641,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-decorators@^7.17.0":
-  version "7.17.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.17.0.tgz#a2be3b2c9fe7d78bd4994e790896bc411e2f166d"
-  integrity sha512-qWe85yCXsvDEluNP0OyeQjH63DlhAR3W7K9BxxU1MvbDb48tgBG+Ao6IJJ6smPDrrVzSQZrbF6donpkFBMcs3A==
+"@babel/plugin-syntax-decorators@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.18.6.tgz#2e45af22835d0b0f8665da2bfd4463649ce5dbc1"
+  integrity sha512-fqyLgjcxf/1yhyZ6A+yo1u9gJ7eleFQod2lkaUsF9DQ7sbbY3Ligym3L0+I2c0WmqNKDpoD9UTb1AKP3qRMOAQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
@@ -696,12 +655,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-export-default-from@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.16.7.tgz#fa89cf13b60de2c3f79acdc2b52a21174c6de060"
-  integrity sha512-4C3E4NsrLOgftKaTYTULhHsuQrGv3FHrBzOMDiS7UYKIpgGBkAdawg4h+EI8zPeK9M0fiIIh72hIwsI24K7MbA==
+"@babel/plugin-syntax-export-default-from@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-default-from/-/plugin-syntax-export-default-from-7.18.6.tgz#8df076711a4818c4ce4f23e61d622b0ba2ff84bc"
+  integrity sha512-Kr//z3ujSVNx6E9z9ih5xXXMqK07VVTuqPmqGe6Mss/zW5XPeLZeSDZoP9ab/hT4wPKqAgjl2PnhPrcpk8Seew==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-syntax-export-namespace-from@^7.8.3":
   version "7.8.3"
@@ -710,12 +669,19 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-flow@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.16.7.tgz#202b147e5892b8452bbb0bb269c7ed2539ab8832"
-  integrity sha512-UDo3YGQO0jH6ytzVwgSLv9i/CzMcUjbKenL67dTrAZPPv6GFAtDhe6jqnvmoKzC/7htNTohhos+onPtDMqJwaQ==
+"@babel/plugin-syntax-flow@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.18.6.tgz#774d825256f2379d06139be0c723c4dd444f3ca1"
+  integrity sha512-LUbR+KNTBWCUAqRG9ex5Gnzu2IOkt8jRJbHHXFT9q+L9zm7M/QQbEqXyw1n1pohYvOyWC8CjeyjrSaIwiYjK7A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-syntax-import-assertions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.18.6.tgz#cd6190500a4fa2fe31990a963ffab4b63e4505e4"
+  integrity sha512-/DU3RXad9+bZwrgWJQKbr39gYbJpLJHezqEzRzi/BHRlJ9zsQb4CK2CA/5apllXNomwA1qHwzvHl+AdEmC5krQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
@@ -745,12 +711,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-jsx@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
-  integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
+"@babel/plugin-syntax-jsx@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
@@ -808,356 +774,359 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-typescript@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.16.7.tgz#39c9b55ee153151990fb038651d58d3fd03f98f8"
-  integrity sha512-YhUIJHHGkqPgEcMYkPCKTyGUdoGKWtopIycQyjJH8OjvRgOYsXsaKehLVPScKJWAULPxMa4N1vCe6szREFlZ7A==
+"@babel/plugin-syntax-typescript@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.18.6.tgz#1c09cd25795c7c2b8a4ba9ae49394576d4133285"
+  integrity sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-arrow-functions@^7.12.1", "@babel/plugin-transform-arrow-functions@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.16.7.tgz#44125e653d94b98db76369de9c396dc14bef4154"
-  integrity sha512-9ffkFFMbvzTvv+7dTp/66xvZAWASuPD5Tl9LK3Z9vhOmANo6j94rik+5YMBt4CwHVMWLWpMsriIc2zsa3WW3xQ==
+"@babel/plugin-transform-arrow-functions@^7.12.1", "@babel/plugin-transform-arrow-functions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz#19063fcf8771ec7b31d742339dac62433d0611fe"
+  integrity sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-async-to-generator@^7.16.8":
-  version "7.16.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.16.8.tgz#b83dff4b970cf41f1b819f8b49cc0cfbaa53a808"
-  integrity sha512-MtmUmTJQHCnyJVrScNzNlofQJ3dLFuobYn3mwOTKHnSCMtbNsqvF71GQmJfFjdrXSsAA7iysFmYWw4bXZ20hOg==
+"@babel/plugin-transform-async-to-generator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz#ccda3d1ab9d5ced5265fdb13f1882d5476c71615"
+  integrity sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==
   dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-remap-async-to-generator" "^7.16.8"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-remap-async-to-generator" "^7.18.6"
 
-"@babel/plugin-transform-block-scoped-functions@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.16.7.tgz#4d0d57d9632ef6062cdf354bb717102ee042a620"
-  integrity sha512-JUuzlzmF40Z9cXyytcbZEZKckgrQzChbQJw/5PuEHYeqzCsvebDx0K0jWnIIVcmmDOAVctCgnYs0pMcrYj2zJg==
+"@babel/plugin-transform-block-scoped-functions@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.18.6.tgz#9187bf4ba302635b9d70d986ad70f038726216a8"
+  integrity sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-block-scoping@^7.12.12", "@babel/plugin-transform-block-scoping@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.16.7.tgz#f50664ab99ddeaee5bc681b8f3a6ea9d72ab4f87"
-  integrity sha512-ObZev2nxVAYA4bhyusELdo9hb3H+A56bxH3FZMbEImZFiEDYVHXQSJ1hQKFlDnlt8G9bBrCZ5ZpURZUrV4G5qQ==
+"@babel/plugin-transform-block-scoping@^7.12.12", "@babel/plugin-transform-block-scoping@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.18.9.tgz#f9b7e018ac3f373c81452d6ada8bd5a18928926d"
+  integrity sha512-5sDIJRV1KtQVEbt/EIBwGy4T01uYIo4KRB3VUqzkhrAIOGx7AoctL9+Ux88btY0zXdDyPJ9mW+bg+v+XEkGmtw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-classes@^7.12.1", "@babel/plugin-transform-classes@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.16.7.tgz#8f4b9562850cd973de3b498f1218796eb181ce00"
-  integrity sha512-WY7og38SFAGYRe64BrjKf8OrE6ulEHtr5jEYaZMwox9KebgqPi67Zqz8K53EKk1fFEJgm96r32rkKZ3qA2nCWQ==
+"@babel/plugin-transform-classes@^7.12.1", "@babel/plugin-transform-classes@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.18.9.tgz#90818efc5b9746879b869d5ce83eb2aa48bbc3da"
+  integrity sha512-EkRQxsxoytpTlKJmSPYrsOMjCILacAjtSVkd4gChEe2kXjFCun3yohhW5I7plXJhCemM0gKsaGMcO8tinvCA5g==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-function-name" "^7.16.7"
-    "@babel/helper-optimise-call-expression" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-replace-supers" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-optimise-call-expression" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-split-export-declaration" "^7.18.6"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.16.7.tgz#66dee12e46f61d2aae7a73710f591eb3df616470"
-  integrity sha512-gN72G9bcmenVILj//sv1zLNaPyYcOzUho2lIJBMh/iakJ9ygCo/hEF9cpGb61SCMEDxbbyBoVQxrt+bWKu5KGw==
+"@babel/plugin-transform-computed-properties@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz#2357a8224d402dad623caf6259b611e56aec746e"
+  integrity sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-destructuring@^7.12.1", "@babel/plugin-transform-destructuring@^7.16.7":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.17.7.tgz#49dc2675a7afa9a5e4c6bdee636061136c3408d1"
-  integrity sha512-XVh0r5yq9sLR4vZ6eVZe8FKfIcSgaTBxVBRSYokRj2qksf6QerYnTxz9/GTuKTH/n/HwLP7t6gtlybHetJ/6hQ==
+"@babel/plugin-transform-destructuring@^7.12.1", "@babel/plugin-transform-destructuring@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.18.9.tgz#68906549c021cb231bee1db21d3b5b095f8ee292"
+  integrity sha512-p5VCYNddPLkZTq4XymQIaIfZNJwT9YsjkPOhkVEqt6QIpQFZVM9IltqqYpOEkJoN1DPznmxUDyZ5CTZs/ZCuHA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-dotall-regex@^7.16.7", "@babel/plugin-transform-dotall-regex@^7.4.4":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.16.7.tgz#6b2d67686fab15fb6a7fd4bd895d5982cfc81241"
-  integrity sha512-Lyttaao2SjZF6Pf4vk1dVKv8YypMpomAbygW+mU5cYP3S5cWTfCJjG8xV6CFdzGFlfWK81IjL9viiTvpb6G7gQ==
+"@babel/plugin-transform-dotall-regex@^7.18.6", "@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.18.6.tgz#b286b3e7aae6c7b861e45bed0a2fafd6b1a4fef8"
+  integrity sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-duplicate-keys@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.16.7.tgz#2207e9ca8f82a0d36a5a67b6536e7ef8b08823c9"
-  integrity sha512-03DvpbRfvWIXyK0/6QiR1KMTWeT6OcQ7tbhjrXyFS02kjuX/mu5Bvnh5SDSWHxyawit2g5aWhKwI86EE7GUnTw==
+"@babel/plugin-transform-duplicate-keys@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.18.9.tgz#687f15ee3cdad6d85191eb2a372c4528eaa0ae0e"
+  integrity sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-exponentiation-operator@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.16.7.tgz#efa9862ef97e9e9e5f653f6ddc7b665e8536fe9b"
-  integrity sha512-8UYLSlyLgRixQvlYH3J2ekXFHDFLQutdy7FfFAMm3CPZ6q9wHCwnUyiXpQCe3gVVnQlHc5nsuiEVziteRNTXEA==
+"@babel/plugin-transform-exponentiation-operator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.18.6.tgz#421c705f4521888c65e91fdd1af951bfefd4dacd"
+  integrity sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-flow-strip-types@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.16.7.tgz#291fb140c78dabbf87f2427e7c7c332b126964b8"
-  integrity sha512-mzmCq3cNsDpZZu9FADYYyfZJIOrSONmHcop2XEKPdBNMa4PDC4eEvcOvzZaCNcjKu72v0XQlA5y1g58aLRXdYg==
+"@babel/plugin-transform-flow-strip-types@^7.18.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.18.9.tgz#5b4cc521426263b5ce08893a2db41097ceba35bf"
+  integrity sha512-+G6rp2zRuOAInY5wcggsx4+QVao1qPM0osC9fTUVlAV3zOrzTCnrMAFVnR6+a3T8wz1wFIH7KhYMcMB3u1n80A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/plugin-syntax-flow" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-flow" "^7.18.6"
 
-"@babel/plugin-transform-for-of@^7.12.1", "@babel/plugin-transform-for-of@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.16.7.tgz#649d639d4617dff502a9a158c479b3b556728d8c"
-  integrity sha512-/QZm9W92Ptpw7sjI9Nx1mbcsWz33+l8kuMIQnDwgQBG5s3fAfQvkRjQ7NqXhtNcKOnPkdICmUHyCaWW06HCsqg==
+"@babel/plugin-transform-for-of@^7.12.1", "@babel/plugin-transform-for-of@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz#6ef8a50b244eb6a0bdbad0c7c61877e4e30097c1"
+  integrity sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-function-name@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.16.7.tgz#5ab34375c64d61d083d7d2f05c38d90b97ec65cf"
-  integrity sha512-SU/C68YVwTRxqWj5kgsbKINakGag0KTgq9f2iZEXdStoAbOzLHEBRYzImmA6yFo8YZhJVflvXmIHUO7GWHmxxA==
+"@babel/plugin-transform-function-name@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.18.9.tgz#cc354f8234e62968946c61a46d6365440fc764e0"
+  integrity sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==
   dependencies:
-    "@babel/helper-compilation-targets" "^7.16.7"
-    "@babel/helper-function-name" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-literals@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.16.7.tgz#254c9618c5ff749e87cb0c0cef1a0a050c0bdab1"
-  integrity sha512-6tH8RTpTWI0s2sV6uq3e/C9wPo4PTqqZps4uF0kzQ9/xPLFQtipynvmT1g/dOfEJ+0EQsHhkQ/zyRId8J2b8zQ==
+"@babel/plugin-transform-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.18.9.tgz#72796fdbef80e56fba3c6a699d54f0de557444bc"
+  integrity sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-member-expression-literals@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.16.7.tgz#6e5dcf906ef8a098e630149d14c867dd28f92384"
-  integrity sha512-mBruRMbktKQwbxaJof32LT9KLy2f3gH+27a5XSuXo6h7R3vqltl0PgZ80C8ZMKw98Bf8bqt6BEVi3svOh2PzMw==
+"@babel/plugin-transform-member-expression-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.18.6.tgz#ac9fdc1a118620ac49b7e7a5d2dc177a1bfee88e"
+  integrity sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-modules-amd@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.16.7.tgz#b28d323016a7daaae8609781d1f8c9da42b13186"
-  integrity sha512-KaaEtgBL7FKYwjJ/teH63oAmE3lP34N3kshz8mm4VMAw7U3PxjVwwUmxEFksbgsNUaO3wId9R2AVQYSEGRa2+g==
+"@babel/plugin-transform-modules-amd@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.18.6.tgz#8c91f8c5115d2202f277549848874027d7172d21"
+  integrity sha512-Pra5aXsmTsOnjM3IajS8rTaLCy++nGM4v3YR4esk5PCsyg9z8NA5oQLwxzMUtDBd8F+UmVza3VxoAaWCbzH1rg==
   dependencies:
-    "@babel/helper-module-transforms" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-commonjs@^7.16.8":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.17.7.tgz#d86b217c8e45bb5f2dbc11eefc8eab62cf980d19"
-  integrity sha512-ITPmR2V7MqioMJyrxUo2onHNC3e+MvfFiFIR0RP21d3PtlVb6sfzoxNKiphSZUOM9hEIdzCcZe83ieX3yoqjUA==
+"@babel/plugin-transform-modules-commonjs@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.18.6.tgz#afd243afba166cca69892e24a8fd8c9f2ca87883"
+  integrity sha512-Qfv2ZOWikpvmedXQJDSbxNqy7Xr/j2Y8/KfijM0iJyKkBTmWuvCA1yeH1yDM7NJhBW/2aXxeucLj6i80/LAJ/Q==
   dependencies:
-    "@babel/helper-module-transforms" "^7.17.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-simple-access" "^7.17.7"
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-systemjs@^7.16.7":
-  version "7.17.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.17.8.tgz#81fd834024fae14ea78fbe34168b042f38703859"
-  integrity sha512-39reIkMTUVagzgA5x88zDYXPCMT6lcaRKs1+S9K6NKBPErbgO/w/kP8GlNQTC87b412ZTlmNgr3k2JrWgHH+Bw==
+"@babel/plugin-transform-modules-systemjs@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.18.9.tgz#545df284a7ac6a05125e3e405e536c5853099a06"
+  integrity sha512-zY/VSIbbqtoRoJKo2cDTewL364jSlZGvn0LKOf9ntbfxOvjfmyrdtEEOAdswOswhZEb8UH3jDkCKHd1sPgsS0A==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.16.7"
-    "@babel/helper-module-transforms" "^7.17.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-module-transforms" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-validator-identifier" "^7.18.6"
     babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-umd@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.16.7.tgz#23dad479fa585283dbd22215bff12719171e7618"
-  integrity sha512-EMh7uolsC8O4xhudF2F6wedbSHm1HHZ0C6aJ7K67zcDNidMzVcxWdGr+htW9n21klm+bOn+Rx4CBsAntZd3rEQ==
+"@babel/plugin-transform-modules-umd@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.18.6.tgz#81d3832d6034b75b54e62821ba58f28ed0aab4b9"
+  integrity sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.16.8":
-  version "7.16.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.16.8.tgz#7f860e0e40d844a02c9dcf9d84965e7dfd666252"
-  integrity sha512-j3Jw+n5PvpmhRR+mrgIh04puSANCk/T/UA3m3P1MjJkhlK906+ApHhDIqBQDdOgL/r1UYpz4GNclTXxyZrYGSw==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.18.6.tgz#c89bfbc7cc6805d692f3a49bc5fc1b630007246d"
+  integrity sha512-UmEOGF8XgaIqD74bC8g7iV3RYj8lMf0Bw7NJzvnS9qQhM4mg+1WHKotUIdjxgD2RGrgFLZZPCFPFj3P/kVDYhg==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-new-target@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.16.7.tgz#9967d89a5c243818e0800fdad89db22c5f514244"
-  integrity sha512-xiLDzWNMfKoGOpc6t3U+etCE2yRnn3SM09BXqWPIZOBpL2gvVrBWUKnsJx0K/ADi5F5YC5f8APFfWrz25TdlGg==
+"@babel/plugin-transform-new-target@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.18.6.tgz#d128f376ae200477f37c4ddfcc722a8a1b3246a8"
+  integrity sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-object-super@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.16.7.tgz#ac359cf8d32cf4354d27a46867999490b6c32a94"
-  integrity sha512-14J1feiQVWaGvRxj2WjyMuXS2jsBkgB3MdSN5HuC2G5nRspa5RK9COcs82Pwy5BuGcjb+fYaUj94mYcOj7rCvw==
+"@babel/plugin-transform-object-super@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.18.6.tgz#fb3c6ccdd15939b6ff7939944b51971ddc35912c"
+  integrity sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-replace-supers" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.6"
 
-"@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz#a1721f55b99b736511cb7e0152f61f17688f331f"
-  integrity sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw==
+"@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.18.8":
+  version "7.18.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.18.8.tgz#ee9f1a0ce6d78af58d0956a9378ea3427cccb48a"
+  integrity sha512-ivfbE3X2Ss+Fj8nnXvKJS6sjRG4gzwPMsP+taZC+ZzEGjAYlvENixmt1sZ5Ca6tWls+BlKSGKPJ6OOXvXCbkFg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-property-literals@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.16.7.tgz#2dadac85155436f22c696c4827730e0fe1057a55"
-  integrity sha512-z4FGr9NMGdoIl1RqavCqGG+ZuYjfZ/hkCIeuH6Do7tXmSm0ls11nYVSJqFEUOSJbDab5wC6lRE/w6YjVcr6Hqw==
+"@babel/plugin-transform-property-literals@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.18.6.tgz#e22498903a483448e94e032e9bbb9c5ccbfc93a3"
+  integrity sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-react-display-name@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz#7b6d40d232f4c0f550ea348593db3b21e2404340"
-  integrity sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==
+"@babel/plugin-transform-react-display-name@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.18.6.tgz#8b1125f919ef36ebdfff061d664e266c666b9415"
+  integrity sha512-TV4sQ+T013n61uMoygyMRm+xf04Bd5oqFpv2jAEQwSZ8NwQA7zeRPg1LMVg2PWi3zWBz+CLKD+v5bcpZ/BS0aA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-react-jsx-development@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz#43a00724a3ed2557ed3f276a01a929e6686ac7b8"
-  integrity sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==
+"@babel/plugin-transform-react-jsx-development@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.18.6.tgz#dbe5c972811e49c7405b630e4d0d2e1380c0ddc5"
+  integrity sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==
   dependencies:
-    "@babel/plugin-transform-react-jsx" "^7.16.7"
+    "@babel/plugin-transform-react-jsx" "^7.18.6"
 
-"@babel/plugin-transform-react-jsx@^7.12.12", "@babel/plugin-transform-react-jsx@^7.16.7":
-  version "7.17.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.3.tgz#eac1565da176ccb1a715dae0b4609858808008c1"
-  integrity sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==
+"@babel/plugin-transform-react-jsx@^7.12.12", "@babel/plugin-transform-react-jsx@^7.18.6":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.18.10.tgz#ea47b2c4197102c196cbd10db9b3bb20daa820f1"
+  integrity sha512-gCy7Iikrpu3IZjYZolFE4M1Sm+nrh1/6za2Ewj77Z+XirT4TsbJcvOFOyF+fRPwU6AKKK136CZxx6L8AbSFG6A==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/plugin-syntax-jsx" "^7.16.7"
-    "@babel/types" "^7.17.0"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-jsx" "^7.18.6"
+    "@babel/types" "^7.18.10"
 
-"@babel/plugin-transform-react-pure-annotations@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.7.tgz#232bfd2f12eb551d6d7d01d13fe3f86b45eb9c67"
-  integrity sha512-hs71ToC97k3QWxswh2ElzMFABXHvGiJ01IB1TbYQDGeWRKWz/MPUTh5jGExdHvosYKpnJW5Pm3S4+TA3FyX+GA==
+"@babel/plugin-transform-react-pure-annotations@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.6.tgz#561af267f19f3e5d59291f9950fd7b9663d0d844"
+  integrity sha512-I8VfEPg9r2TRDdvnHgPepTKvuRomzA8+u+nhY7qSI1fR2hRNebasZEETLyM5mAUr0Ku56OkXJ0I7NHJnO6cJiQ==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-regenerator@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.16.7.tgz#9e7576dc476cb89ccc5096fff7af659243b4adeb"
-  integrity sha512-mF7jOgGYCkSJagJ6XCujSQg+6xC1M77/03K2oBmVJWoFGNUtnVJO4WHKJk3dnPC8HCcj4xBQP1Egm8DWh3Pb3Q==
+"@babel/plugin-transform-regenerator@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.18.6.tgz#585c66cb84d4b4bf72519a34cfce761b8676ca73"
+  integrity sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==
   dependencies:
-    regenerator-transform "^0.14.2"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    regenerator-transform "^0.15.0"
 
-"@babel/plugin-transform-reserved-words@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.16.7.tgz#1d798e078f7c5958eec952059c460b220a63f586"
-  integrity sha512-KQzzDnZ9hWQBjwi5lpY5v9shmm6IVG0U9pB18zvMu2i4H90xpT4gmqwPYsn8rObiadYe2M0gmgsiOIF5A/2rtg==
+"@babel/plugin-transform-reserved-words@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.18.6.tgz#b1abd8ebf8edaa5f7fe6bbb8d2133d23b6a6f76a"
+  integrity sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-runtime@^7.13.9", "@babel/plugin-transform-runtime@^7.14.5":
-  version "7.17.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.17.0.tgz#0a2e08b5e2b2d95c4b1d3b3371a2180617455b70"
-  integrity sha512-fr7zPWnKXNc1xoHfrIU9mN/4XKX4VLZ45Q+oMhfsYIaHvg7mHgmhfOy/ckRWqDK7XF3QDigRpkh5DKq6+clE8A==
-  dependencies:
-    "@babel/helper-module-imports" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    babel-plugin-polyfill-corejs2 "^0.3.0"
-    babel-plugin-polyfill-corejs3 "^0.5.0"
-    babel-plugin-polyfill-regenerator "^0.3.0"
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.10.tgz#37d14d1fa810a368fd635d4d1476c0154144a96f"
+  integrity sha512-q5mMeYAdfEbpBAgzl7tBre/la3LeCxmDO1+wMXRdPWbcoMjR3GiXlCLk7JBZVVye0bqTGNMbt0yYVXX1B1jEWQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    babel-plugin-polyfill-corejs2 "^0.3.2"
+    babel-plugin-polyfill-corejs3 "^0.5.3"
+    babel-plugin-polyfill-regenerator "^0.4.0"
     semver "^6.3.0"
 
-"@babel/plugin-transform-shorthand-properties@^7.12.1", "@babel/plugin-transform-shorthand-properties@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.16.7.tgz#e8549ae4afcf8382f711794c0c7b6b934c5fbd2a"
-  integrity sha512-hah2+FEnoRoATdIb05IOXf+4GzXYTq75TVhIn1PewihbpyrNWUt2JbudKQOETWw6QpLe+AIUpJ5MVLYTQbeeUg==
+"@babel/plugin-transform-shorthand-properties@^7.12.1", "@babel/plugin-transform-shorthand-properties@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9"
+  integrity sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-spread@^7.12.1", "@babel/plugin-transform-spread@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz#a303e2122f9f12e0105daeedd0f30fb197d8ff44"
-  integrity sha512-+pjJpgAngb53L0iaA5gU/1MLXJIfXcYepLgXB3esVRf4fqmj8f2cxM3/FKaHsZms08hFQJkFccEWuIpm429TXg==
+"@babel/plugin-transform-spread@^7.12.1", "@babel/plugin-transform-spread@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.18.9.tgz#6ea7a6297740f381c540ac56caf75b05b74fb664"
+  integrity sha512-39Q814wyoOPtIB/qGopNIL9xDChOE1pNU0ZY5dO0owhiVt/5kFm4li+/bBtwc7QotG0u5EPzqhZdjMtmqBqyQA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.18.9"
 
-"@babel/plugin-transform-sticky-regex@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.16.7.tgz#c84741d4f4a38072b9a1e2e3fd56d359552e8660"
-  integrity sha512-NJa0Bd/87QV5NZZzTuZG5BPJjLYadeSZ9fO6oOUoL4iQx+9EEuw/eEM92SrsT19Yc2jgB1u1hsjqDtH02c3Drw==
+"@babel/plugin-transform-sticky-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.18.6.tgz#c6706eb2b1524028e317720339583ad0f444adcc"
+  integrity sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-template-literals@^7.12.1", "@babel/plugin-transform-template-literals@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.16.7.tgz#f3d1c45d28967c8e80f53666fc9c3e50618217ab"
-  integrity sha512-VwbkDDUeenlIjmfNeDX/V0aWrQH2QiVyJtwymVQSzItFDTpxfyJh3EVaQiS0rIN/CqbLGr0VcGmuwyTdZtdIsA==
+"@babel/plugin-transform-template-literals@^7.12.1", "@babel/plugin-transform-template-literals@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e"
+  integrity sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-typeof-symbol@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.16.7.tgz#9cdbe622582c21368bd482b660ba87d5545d4f7e"
-  integrity sha512-p2rOixCKRJzpg9JB4gjnG4gjWkWa89ZoYUnl9snJ1cWIcTH/hvxZqfO+WjG6T8DRBpctEol5jw1O5rA8gkCokQ==
+"@babel/plugin-transform-typeof-symbol@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.18.9.tgz#c8cea68263e45addcd6afc9091429f80925762c0"
+  integrity sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-typescript@^7.16.7":
-  version "7.16.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz#591ce9b6b83504903fa9dd3652c357c2ba7a1ee0"
-  integrity sha512-bHdQ9k7YpBDO2d0NVfkj51DpQcvwIzIusJ7mEUaMlbZq3Kt/U47j24inXZHQ5MDiYpCs+oZiwnXyKedE8+q7AQ==
+"@babel/plugin-transform-typescript@^7.18.6":
+  version "7.18.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.18.12.tgz#712e9a71b9e00fde9f8c0238e0cceee86ab2f8fd"
+  integrity sha512-2vjjam0cum0miPkenUbQswKowuxs/NjMwIKEq0zwegRxXk12C9YOF9STXnaUptITOtOJHKHpzvvWYOjbm6tc0w==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/plugin-syntax-typescript" "^7.16.7"
+    "@babel/helper-create-class-features-plugin" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-typescript" "^7.18.6"
 
-"@babel/plugin-transform-unicode-escapes@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.16.7.tgz#da8717de7b3287a2c6d659750c964f302b31ece3"
-  integrity sha512-TAV5IGahIz3yZ9/Hfv35TV2xEm+kaBDaZQCn2S/hG9/CZ0DktxJv9eKfPc7yYCvOYR4JGx1h8C+jcSOvgaaI/Q==
+"@babel/plugin-transform-unicode-escapes@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.18.10.tgz#1ecfb0eda83d09bbcb77c09970c2dd55832aa246"
+  integrity sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-unicode-regex@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.16.7.tgz#0f7aa4a501198976e25e82702574c34cfebe9ef2"
-  integrity sha512-oC5tYYKw56HO75KZVLQ+R/Nl3Hro9kf8iG0hXoaHP7tjAyCpvqBiSNe6vGrZni1Z6MggmUOC6A7VP7AVmw225Q==
+"@babel/plugin-transform-unicode-regex@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.18.6.tgz#194317225d8c201bbae103364ffe9e2cea36cdca"
+  integrity sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/preset-env@^7.12.11", "@babel/preset-env@^7.13.9", "@babel/preset-env@^7.14.5":
-  version "7.16.11"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.16.11.tgz#5dd88fd885fae36f88fd7c8342475c9f0abe2982"
-  integrity sha512-qcmWG8R7ZW6WBRPZK//y+E3Cli151B20W1Rv7ln27vuPaXU/8TKms6jFdiJtF7UDTxcrb7mZd88tAeK9LjdT8g==
-  dependencies:
-    "@babel/compat-data" "^7.16.8"
-    "@babel/helper-compilation-targets" "^7.16.7"
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-validator-option" "^7.16.7"
-    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.16.7"
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.16.7"
-    "@babel/plugin-proposal-async-generator-functions" "^7.16.8"
-    "@babel/plugin-proposal-class-properties" "^7.16.7"
-    "@babel/plugin-proposal-class-static-block" "^7.16.7"
-    "@babel/plugin-proposal-dynamic-import" "^7.16.7"
-    "@babel/plugin-proposal-export-namespace-from" "^7.16.7"
-    "@babel/plugin-proposal-json-strings" "^7.16.7"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.16.7"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.16.7"
-    "@babel/plugin-proposal-numeric-separator" "^7.16.7"
-    "@babel/plugin-proposal-object-rest-spread" "^7.16.7"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.16.7"
-    "@babel/plugin-proposal-optional-chaining" "^7.16.7"
-    "@babel/plugin-proposal-private-methods" "^7.16.11"
-    "@babel/plugin-proposal-private-property-in-object" "^7.16.7"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.16.7"
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.18.10.tgz#83b8dfe70d7eea1aae5a10635ab0a5fe60dfc0f4"
+  integrity sha512-wVxs1yjFdW3Z/XkNfXKoblxoHgbtUF7/l3PvvP4m02Qz9TZ6uZGxRVYjSQeR87oQmHco9zWitW5J82DJ7sCjvA==
+  dependencies:
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.18.6"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-async-generator-functions" "^7.18.10"
+    "@babel/plugin-proposal-class-properties" "^7.18.6"
+    "@babel/plugin-proposal-class-static-block" "^7.18.6"
+    "@babel/plugin-proposal-dynamic-import" "^7.18.6"
+    "@babel/plugin-proposal-export-namespace-from" "^7.18.9"
+    "@babel/plugin-proposal-json-strings" "^7.18.6"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.18.9"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.18.6"
+    "@babel/plugin-proposal-numeric-separator" "^7.18.6"
+    "@babel/plugin-proposal-object-rest-spread" "^7.18.9"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.18.6"
+    "@babel/plugin-proposal-optional-chaining" "^7.18.9"
+    "@babel/plugin-proposal-private-methods" "^7.18.6"
+    "@babel/plugin-proposal-private-property-in-object" "^7.18.6"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.18.6"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
     "@babel/plugin-syntax-class-properties" "^7.12.13"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-import-assertions" "^7.18.6"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
@@ -1167,54 +1136,54 @@
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
     "@babel/plugin-syntax-top-level-await" "^7.14.5"
-    "@babel/plugin-transform-arrow-functions" "^7.16.7"
-    "@babel/plugin-transform-async-to-generator" "^7.16.8"
-    "@babel/plugin-transform-block-scoped-functions" "^7.16.7"
-    "@babel/plugin-transform-block-scoping" "^7.16.7"
-    "@babel/plugin-transform-classes" "^7.16.7"
-    "@babel/plugin-transform-computed-properties" "^7.16.7"
-    "@babel/plugin-transform-destructuring" "^7.16.7"
-    "@babel/plugin-transform-dotall-regex" "^7.16.7"
-    "@babel/plugin-transform-duplicate-keys" "^7.16.7"
-    "@babel/plugin-transform-exponentiation-operator" "^7.16.7"
-    "@babel/plugin-transform-for-of" "^7.16.7"
-    "@babel/plugin-transform-function-name" "^7.16.7"
-    "@babel/plugin-transform-literals" "^7.16.7"
-    "@babel/plugin-transform-member-expression-literals" "^7.16.7"
-    "@babel/plugin-transform-modules-amd" "^7.16.7"
-    "@babel/plugin-transform-modules-commonjs" "^7.16.8"
-    "@babel/plugin-transform-modules-systemjs" "^7.16.7"
-    "@babel/plugin-transform-modules-umd" "^7.16.7"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.16.8"
-    "@babel/plugin-transform-new-target" "^7.16.7"
-    "@babel/plugin-transform-object-super" "^7.16.7"
-    "@babel/plugin-transform-parameters" "^7.16.7"
-    "@babel/plugin-transform-property-literals" "^7.16.7"
-    "@babel/plugin-transform-regenerator" "^7.16.7"
-    "@babel/plugin-transform-reserved-words" "^7.16.7"
-    "@babel/plugin-transform-shorthand-properties" "^7.16.7"
-    "@babel/plugin-transform-spread" "^7.16.7"
-    "@babel/plugin-transform-sticky-regex" "^7.16.7"
-    "@babel/plugin-transform-template-literals" "^7.16.7"
-    "@babel/plugin-transform-typeof-symbol" "^7.16.7"
-    "@babel/plugin-transform-unicode-escapes" "^7.16.7"
-    "@babel/plugin-transform-unicode-regex" "^7.16.7"
+    "@babel/plugin-transform-arrow-functions" "^7.18.6"
+    "@babel/plugin-transform-async-to-generator" "^7.18.6"
+    "@babel/plugin-transform-block-scoped-functions" "^7.18.6"
+    "@babel/plugin-transform-block-scoping" "^7.18.9"
+    "@babel/plugin-transform-classes" "^7.18.9"
+    "@babel/plugin-transform-computed-properties" "^7.18.9"
+    "@babel/plugin-transform-destructuring" "^7.18.9"
+    "@babel/plugin-transform-dotall-regex" "^7.18.6"
+    "@babel/plugin-transform-duplicate-keys" "^7.18.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.18.6"
+    "@babel/plugin-transform-for-of" "^7.18.8"
+    "@babel/plugin-transform-function-name" "^7.18.9"
+    "@babel/plugin-transform-literals" "^7.18.9"
+    "@babel/plugin-transform-member-expression-literals" "^7.18.6"
+    "@babel/plugin-transform-modules-amd" "^7.18.6"
+    "@babel/plugin-transform-modules-commonjs" "^7.18.6"
+    "@babel/plugin-transform-modules-systemjs" "^7.18.9"
+    "@babel/plugin-transform-modules-umd" "^7.18.6"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.18.6"
+    "@babel/plugin-transform-new-target" "^7.18.6"
+    "@babel/plugin-transform-object-super" "^7.18.6"
+    "@babel/plugin-transform-parameters" "^7.18.8"
+    "@babel/plugin-transform-property-literals" "^7.18.6"
+    "@babel/plugin-transform-regenerator" "^7.18.6"
+    "@babel/plugin-transform-reserved-words" "^7.18.6"
+    "@babel/plugin-transform-shorthand-properties" "^7.18.6"
+    "@babel/plugin-transform-spread" "^7.18.9"
+    "@babel/plugin-transform-sticky-regex" "^7.18.6"
+    "@babel/plugin-transform-template-literals" "^7.18.9"
+    "@babel/plugin-transform-typeof-symbol" "^7.18.9"
+    "@babel/plugin-transform-unicode-escapes" "^7.18.10"
+    "@babel/plugin-transform-unicode-regex" "^7.18.6"
     "@babel/preset-modules" "^0.1.5"
-    "@babel/types" "^7.16.8"
-    babel-plugin-polyfill-corejs2 "^0.3.0"
-    babel-plugin-polyfill-corejs3 "^0.5.0"
-    babel-plugin-polyfill-regenerator "^0.3.0"
-    core-js-compat "^3.20.2"
+    "@babel/types" "^7.18.10"
+    babel-plugin-polyfill-corejs2 "^0.3.2"
+    babel-plugin-polyfill-corejs3 "^0.5.3"
+    babel-plugin-polyfill-regenerator "^0.4.0"
+    core-js-compat "^3.22.1"
     semver "^6.3.0"
 
 "@babel/preset-flow@^7.12.1":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.16.7.tgz#7fd831323ab25eeba6e4b77a589f680e30581cbd"
-  integrity sha512-6ceP7IyZdUYQ3wUVqyRSQXztd1YmFHWI4Xv11MIqAlE4WqxBSd/FZ61V9k+TS5Gd4mkHOtQtPp9ymRpxH4y1Ug==
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.18.6.tgz#83f7602ba566e72a9918beefafef8ef16d2810cb"
+  integrity sha512-E7BDhL64W6OUqpuyHnSroLnqyRTcG6ZdOBl1OKI/QK/HJfplqK/S3sq1Cckx7oTodJ5yOXyfw7rEADJ6UjoQDQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-validator-option" "^7.16.7"
-    "@babel/plugin-transform-flow-strip-types" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-transform-flow-strip-types" "^7.18.6"
 
 "@babel/preset-modules@^0.1.5":
   version "0.1.5"
@@ -1228,30 +1197,30 @@
     esutils "^2.0.2"
 
 "@babel/preset-react@^7.12.10", "@babel/preset-react@^7.12.13", "@babel/preset-react@^7.14.5":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.16.7.tgz#4c18150491edc69c183ff818f9f2aecbe5d93852"
-  integrity sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.18.6.tgz#979f76d6277048dc19094c217b507f3ad517dd2d"
+  integrity sha512-zXr6atUmyYdiWRVLOZahakYmOBHtWc2WGCkP8PYTgZi0iJXDY2CN180TdrIW4OGOAdLc7TifzDIvtx6izaRIzg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-validator-option" "^7.16.7"
-    "@babel/plugin-transform-react-display-name" "^7.16.7"
-    "@babel/plugin-transform-react-jsx" "^7.16.7"
-    "@babel/plugin-transform-react-jsx-development" "^7.16.7"
-    "@babel/plugin-transform-react-pure-annotations" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-transform-react-display-name" "^7.18.6"
+    "@babel/plugin-transform-react-jsx" "^7.18.6"
+    "@babel/plugin-transform-react-jsx-development" "^7.18.6"
+    "@babel/plugin-transform-react-pure-annotations" "^7.18.6"
 
 "@babel/preset-typescript@^7.12.7", "@babel/preset-typescript@^7.14.5":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.16.7.tgz#ab114d68bb2020afc069cd51b37ff98a046a70b9"
-  integrity sha512-WbVEmgXdIyvzB77AQjGBEyYPZx+8tTsO50XtfozQrkW8QB2rLJpH2lgx0TRw5EJrBxOZQ+wCcyPVQvS8tjEHpQ==
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399"
+  integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
-    "@babel/helper-validator-option" "^7.16.7"
-    "@babel/plugin-transform-typescript" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-transform-typescript" "^7.18.6"
 
 "@babel/register@^7.12.1":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.17.7.tgz#5eef3e0f4afc07e25e847720e7b987ae33f08d0b"
-  integrity sha512-fg56SwvXRifootQEDQAu1mKdjh5uthPzdO0N6t358FktfL4XjAVXuH58ULoiW8mesxiOgNIrxiImqEwv0+hRRA==
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.18.9.tgz#1888b24bc28d5cc41c412feb015e9ff6b96e439c"
+  integrity sha512-ZlbnXDcNYHMR25ITwwNKT88JiaukkdVj/nG7r3wnuXkOTHc60Uy05PwMCPre0hSkY68E6zK3xz+vUJSP2jWmcw==
   dependencies:
     clone-deep "^4.0.1"
     find-cache-dir "^2.0.0"
@@ -1260,9 +1229,9 @@
     source-map-support "^0.5.16"
 
 "@babel/runtime-corejs3@^7.10.2":
-  version "7.17.8"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.17.8.tgz#d7dd49fb812f29c61c59126da3792d8740d4e284"
-  integrity sha512-ZbYSUvoSF6dXZmMl/CYTMOvzIFnbGfv4W3SEHYgMvNsFTeLaF2gkGAF4K2ddmtSK4Emej+0aYcnSC6N5dPCXUQ==
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.18.9.tgz#7bacecd1cb2dd694eacd32a91fcf7021c20770ae"
+  integrity sha512-qZEWeccZCrHA2Au4/X05QW5CMdm4VjUDCrGq5gf1ZDcM4hRqreKrtwAn7yci9zfgAS9apvnsFXiGBHBAxZdK9A==
   dependencies:
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
@@ -1274,49 +1243,35 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
-  version "7.17.8"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2"
-  integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA==
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
+  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.17.8":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.0.tgz#6d77142a19cb6088f0af662af1ada37a604d34ae"
-  integrity sha512-YMQvx/6nKEaucl0MY56mwIG483xk8SDNdlUwb2Ts6FUpr7fm85DxEmsY18LXBNhcTz6tO6JwZV8w1W06v8UKeg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
-  version "7.18.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
-  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/template@^7.12.7", "@babel/template@^7.16.7", "@babel/template@^7.3.3", "@babel/template@^7.6.0":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
-  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
-  dependencies:
-    "@babel/code-frame" "^7.16.7"
-    "@babel/parser" "^7.16.7"
-    "@babel/types" "^7.16.7"
-
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.3":
-  version "7.17.3"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
-  integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==
-  dependencies:
-    "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.17.3"
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-function-name" "^7.16.7"
-    "@babel/helper-hoist-variables" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-    "@babel/parser" "^7.17.3"
-    "@babel/types" "^7.17.0"
+"@babel/template@^7.12.7", "@babel/template@^7.18.10", "@babel/template@^7.18.6", "@babel/template@^7.3.3", "@babel/template@^7.6.0":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
+  integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.10"
+    "@babel/types" "^7.18.10"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.18.10", "@babel/traverse@^7.18.11", "@babel/traverse@^7.18.9":
+  version "7.18.11"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.11.tgz#3d51f2afbd83ecf9912bcbb5c4d94e3d2ddaa16f"
+  integrity sha512-TG9PiM2R/cWCAy6BPJKeHzNbu4lPzOSZpeMfeNErskGpTJx6trEvFaVCbDvpcxwy49BKWmEPwiW8mrysNiDvIQ==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.10"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.18.11"
+    "@babel/types" "^7.18.10"
     debug "^4.1.0"
     globals "^11.1.0"
 
@@ -1328,12 +1283,13 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.6.1":
-  version "7.17.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
-  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+"@babel/types@^7.0.0", "@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.18.10", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.6.1":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.10.tgz#4908e81b6b339ca7c6b7a555a5fc29446f26dde6"
+  integrity sha512-MJvnbEiiNkpjo+LknnmRrqbY1GPUUggjv+wQVjetM/AONoupqRALB7I6jGqNUAZsKcRIEu2J6FRFvsczljjsaQ==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/helper-string-parser" "^7.18.10"
+    "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
 "@base2/pretty-print-object@1.0.1":
@@ -1377,9 +1333,9 @@
     "@lezer/common" "^0.15.0"
 
 "@codemirror/closebrackets@^0.19.0":
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/closebrackets/-/closebrackets-0.19.1.tgz#c93219d6800c27a880e569135b468cf4a05d903f"
-  integrity sha512-ZiLXT6u+VuBK5QnfBbt/Vmfd9Pg6449wn1DIOWFZHUOldg5eFn3VGGjYY2XWuHQz5WuK+7dXamV2KE885O1gyA==
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/closebrackets/-/closebrackets-0.19.2.tgz#ff74dd78218cee57172623eb9ebf7b669fa6f4d4"
+  integrity sha512-ClMPzPcPP0eQiDcVjtVPl6OLxgdtZSYDazsvT0AKl70V1OJva0eHgl4/6kCW3RZ0pb2n34i9nJz4eXCmK+TYDA==
   dependencies:
     "@codemirror/language" "^0.19.0"
     "@codemirror/rangeset" "^0.19.0"
@@ -1418,14 +1374,14 @@
     "@codemirror/view" "^0.19.23"
 
 "@codemirror/highlight@^0.19.6", "@codemirror/highlight@^0.19.7":
-  version "0.19.7"
-  resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.7.tgz#91a0c9994c759f5f153861e3aae74ff9e7c7c35b"
-  integrity sha512-3W32hBCY0pbbv/xidismw+RDMKuIag+fo4kZIbD7WoRj+Ttcaxjf+vP6RttRHXLaaqbWh031lTeON8kMlDhMYw==
+  version "0.19.8"
+  resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.8.tgz#a95aee8ae4389b01f820aa79c48f7b4388087d92"
+  integrity sha512-v/lzuHjrYR8MN2mEJcUD6fHSTXXli9C1XGYpr+ElV6fLBIUhMTNKR3qThp611xuWfXfwDxeL7ppcbkM/MzPV3A==
   dependencies:
     "@codemirror/language" "^0.19.0"
     "@codemirror/rangeset" "^0.19.0"
     "@codemirror/state" "^0.19.3"
-    "@codemirror/view" "^0.19.0"
+    "@codemirror/view" "^0.19.39"
     "@lezer/common" "^0.15.0"
     style-mod "^4.0.0"
 
@@ -1476,9 +1432,9 @@
     "@lezer/javascript" "^0.15.1"
 
 "@codemirror/language@^0.19.0", "@codemirror/language@^0.19.7":
-  version "0.19.8"
-  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.19.8.tgz#fddaa76affb44d71e84dfde7308058732b88c064"
-  integrity sha512-KhRne8qmzSKkaw+qhkwgNsPKxmThlyeJ3umfc33B9kJzVP7xhTkwX2MEPl0almM3brxMi+lPYx7gCPOy1gHsWw==
+  version "0.19.10"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.19.10.tgz#c3d1330fa5de778c6b6b5177af5572a3d9d596b5"
+  integrity sha512-yA0DZ3RYn2CqAAGW62VrU8c4YxscMQn45y/I9sjBlqB1e2OTQLg4CCkMBuMSLXk4xaqjlsgazeOQWaJQOKfV8Q==
   dependencies:
     "@codemirror/state" "^0.19.0"
     "@codemirror/text" "^0.19.0"
@@ -1544,10 +1500,10 @@
     "@codemirror/state" "^0.19.0"
     "@codemirror/view" "^0.19.0"
 
-"@codemirror/view@^0.19.0", "@codemirror/view@^0.19.22", "@codemirror/view@^0.19.23", "@codemirror/view@^0.19.32", "@codemirror/view@^0.19.44":
-  version "0.19.47"
-  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.19.47.tgz#2163c3016d7680bf50dd695c0e3abdaf80f45363"
-  integrity sha512-SfbagKvJQl5dtt+9wYpo9sa3ZkMgUxTq+/hXDf0KVwIx+zu3cJIqfEm9xSx6yXkq7it7RsPGHaPasApNffF/8g==
+"@codemirror/view@^0.19.0", "@codemirror/view@^0.19.22", "@codemirror/view@^0.19.23", "@codemirror/view@^0.19.32", "@codemirror/view@^0.19.39", "@codemirror/view@^0.19.44":
+  version "0.19.48"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.19.48.tgz#1c657e2b0f8ed896ac6448d6e2215ab115e2a0fc"
+  integrity sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==
   dependencies:
     "@codemirror/rangeset" "^0.19.5"
     "@codemirror/state" "^0.19.3"
@@ -1590,22 +1546,22 @@
     react-devtools-inline "4.4.0"
     react-is "^17.0.2"
 
+"@colors/colors@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
+  integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
+
 "@corex/deepmerge@^2.6.148":
   version "2.6.148"
   resolved "https://registry.yarnpkg.com/@corex/deepmerge/-/deepmerge-2.6.148.tgz#8fa825d53ffd1cbcafce1b6a830eefd3dcc09dd5"
   integrity sha512-6QMz0/2h5C3ua51iAnXMPWFbb1QOU1UvSM4bKBw5mzdT+WtLgjbETBBIQZ+Sh9WvEcGwlAt/DEdRpIC3XlDBMA==
 
-"@cspotcode/source-map-consumer@0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@cspotcode/source-map-consumer/-/source-map-consumer-0.8.0.tgz#33bf4b7b39c178821606f669bbc447a6a629786b"
-  integrity sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==
-
-"@cspotcode/source-map-support@0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.7.0.tgz#4789840aa859e46d2f3173727ab707c66bf344f5"
-  integrity sha512-X4xqRHqN8ACt2aHVe51OxeA2HjbcL4MqFqXkrmQszJ1NOUuUu5u6Vqx/0lZSVNku7velL5FC/s5uEAj1lsBMhA==
+"@cspotcode/source-map-support@^0.8.0":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
+  integrity sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==
   dependencies:
-    "@cspotcode/source-map-consumer" "0.8.0"
+    "@jridgewell/trace-mapping" "0.3.9"
 
 "@discoveryjs/json-ext@^0.5.3":
   version "0.5.7"
@@ -1665,44 +1621,44 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@formatjs/ecma402-abstract@1.11.4":
-  version "1.11.4"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz#b962dfc4ae84361f9f08fbce411b4e4340930eda"
-  integrity sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==
+"@formatjs/ecma402-abstract@1.11.8":
+  version "1.11.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.8.tgz#f4015dfb6a837369d94c6ba82455c609e45bce20"
+  integrity sha512-fgLqyWlwmTEuqV/TSLEL/t9JOmHNLFvCdgzXB0jc2w+WOItPCOJ1T0eyN6fQBQKRPfSqqNlu+kWj7ijcOVTVVQ==
   dependencies:
-    "@formatjs/intl-localematcher" "0.2.25"
-    tslib "^2.1.0"
+    "@formatjs/intl-localematcher" "0.2.28"
+    tslib "2.4.0"
 
-"@formatjs/fast-memoize@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz#e6f5aee2e4fd0ca5edba6eba7668e2d855e0fc21"
-  integrity sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==
+"@formatjs/fast-memoize@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.2.4.tgz#4b5ddce9eb7803ff0bd4052387672151a8b7f8a0"
+  integrity sha512-9ARYoLR8AEzXvj2nYrOVHY/h1dDMDWGTnKDLXSISF1uoPakSmfcZuSqjiqZX2wRkEUimPxdwTu/agyozBtZRHA==
   dependencies:
-    tslib "^2.1.0"
+    tslib "2.4.0"
 
-"@formatjs/icu-messageformat-parser@2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz#a54293dd7f098d6a6f6a084ab08b6d54a3e8c12d"
-  integrity sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==
+"@formatjs/icu-messageformat-parser@2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.4.tgz#f1e32b9937f151c1dd5c30536ce3e920b7f23813"
+  integrity sha512-3PqMvKWV1oyok0BuiXUAHIaotdhdTJw6OICqCZbfUgKT+ZRwRWO4IlCgvXJeCITaKS5p+PY0XXKjf/vUyIpWjQ==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.11.4"
-    "@formatjs/icu-skeleton-parser" "1.3.6"
-    tslib "^2.1.0"
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/icu-skeleton-parser" "1.3.10"
+    tslib "2.4.0"
 
-"@formatjs/icu-skeleton-parser@1.3.6":
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz#4ce8c0737d6f07b735288177049e97acbf2e8964"
-  integrity sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==
+"@formatjs/icu-skeleton-parser@1.3.10":
+  version "1.3.10"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.10.tgz#2f504e56ac80137ee2baad55c7fa0b5dc7f4e4df"
+  integrity sha512-kXJmtLDqFF5aLTf8IxdJXnhrIX1Qb4Qp3a9jqRecGDYfzOa9hMhi9U0nKyhrJJ4cXxBzptcgb+LWkyeHL6nlBQ==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.11.4"
-    tslib "^2.1.0"
+    "@formatjs/ecma402-abstract" "1.11.8"
+    tslib "2.4.0"
 
-"@formatjs/intl-localematcher@0.2.25":
-  version "0.2.25"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz#60892fe1b271ec35ba07a2eb018a2dd7bca6ea3a"
-  integrity sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==
+"@formatjs/intl-localematcher@0.2.28":
+  version "0.2.28"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.2.28.tgz#412ea7fefbfc7ed33cd6b43aa304fc14d816e564"
+  integrity sha512-FLsc6Gifs1np/8HnCn/7Q+lHMmenrD5fuDhRT82yj0gi9O19kfaFwjQUw1gZsyILuRyT93GuzdifHj7TKRhBcw==
   dependencies:
-    tslib "^2.1.0"
+    tslib "2.4.0"
 
 "@gar/promisify@^1.0.1":
   version "1.1.3"
@@ -1710,9 +1666,9 @@
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
 "@hapi/hoek@^9.0.0":
-  version "9.2.1"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.1.tgz#9551142a1980503752536b5050fd99f4a7f13b17"
-  integrity sha512-gfta+H8aziZsm8pZa0vj04KO6biEiisppNgA1kbJvFrrWu9Vm7eaUEy76DIxsuTaWvti5fkJVhllWc6ZTE+Mdw==
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
+  integrity sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==
 
 "@hapi/topo@^5.0.0":
   version "5.1.0"
@@ -1740,20 +1696,20 @@
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
   integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
 
-"@internationalized/date@3.0.0-rc.1":
-  version "3.0.0-rc.1"
-  resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.0.0-rc.1.tgz#828f79517249ac65982ec760205089a98ec56555"
-  integrity sha512-IHc1NqUTA/fo9nf0pwRXrMjrabJ/9vTw5RIFAF3qS8JsdEGnw3dIyDb/+ipjEEqZyHVHHXwnqD8hKM18gGoWTg==
+"@internationalized/date@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.0.1.tgz#66332e9ca8f59b7be010ca65d946bca430ba4b66"
+  integrity sha512-E/3lASs4mAeJ2Z2ye6ab7eUD0bPUfTeNVTAv6IS+ne9UtMu9Uepb9A1U2Ae0hDr6WAlBuvUtrakaxEdYB9TV6Q==
   dependencies:
     "@babel/runtime" "^7.6.2"
 
-"@internationalized/message@^3.0.7":
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.0.7.tgz#4b8d681dc1c2afdcb3b4feb273611e0b752517b2"
-  integrity sha512-f+3VC8NIR5rbk3un9WnGRNpAViWOUbnB2LfzYGlpC38XZ1GzCzi2AcCQ8qhgENXiNk8qetZ1TwJYmCZ/M8UM4Q==
+"@internationalized/message@^3.0.9":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@internationalized/message/-/message-3.0.9.tgz#52bc20debe5296375d66ffcf56c3df5d8118a37d"
+  integrity sha512-yHQggKWUuSvj1GznVtie4tcYq+xMrkd/lTKCFHp6gG18KbIliDw+UI7sL9+yJPGuWiR083xuLyyhzqiPbNOEww==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    intl-messageformat "^9.12.0"
+    intl-messageformat "^10.1.0"
 
 "@internationalized/number@^3.1.1":
   version "3.1.1"
@@ -1762,6 +1718,13 @@
   dependencies:
     "@babel/runtime" "^7.6.2"
 
+"@internationalized/string@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@internationalized/string/-/string-3.0.0.tgz#de563871e1b19e4d0ce3246ec18d25da1a73db73"
+  integrity sha512-NUSr4u+mNu5BysXFeVWZW4kvjXylPkU/YYqaWzdNuz1eABfehFiZTEYhWAAMzI3U8DTxfqF9PM3zyhk5gcfz6w==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -1773,7 +1736,7 @@
     js-yaml "^3.13.1"
     resolve-from "^5.0.0"
 
-"@istanbuljs/schema@^0.1.2":
+"@istanbuljs/schema@^0.1.2", "@istanbuljs/schema@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
   integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
@@ -1949,20 +1912,58 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
+  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@jridgewell/resolve-uri@^3.0.3":
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
-  integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
+  integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
+
+"@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
+"@jridgewell/source-map@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.2.tgz#f45351aaed4527a298512ec72f81040c998580fb"
+  integrity sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
 
 "@jridgewell/sourcemap-codec@^1.4.10":
-  version "1.4.11"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
-  integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
+  version "1.4.14"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
+  integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
+
+"@jridgewell/trace-mapping@0.3.9":
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz#6534fd5933a53ba7cbf3a17615e273a0d1273ff9"
+  integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/trace-mapping@^0.3.0", "@jridgewell/trace-mapping@^0.3.4":
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz#f6a0832dffd5b8a6aaa633b7d9f8e8e94c83a0c3"
-  integrity sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.8", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz#aba35c48a38d3fd84b37e66c9c0423f9744f9774"
+  integrity sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==
   dependencies:
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
@@ -2638,7 +2639,7 @@
     npmlog "^4.1.2"
     write-file-atomic "^3.0.3"
 
-"@lezer/common@^0.15.0", "@lezer/common@^0.15.5":
+"@lezer/common@^0.15.0", "@lezer/common@^0.15.5", "@lezer/common@^0.15.7":
   version "0.15.12"
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-0.15.12.tgz#2f21aec551dd5fd7d24eb069f90f54d5bc6ee5e9"
   integrity sha512-edfwCxNLnzq5pBA/yaIhwJ3U3Kz8VAUOTRg0hhxaizaI1N+qxV7EXDv/kLCkLeq2RzSFvxexlaj5Mzfn2kY0Ig==
@@ -2664,13 +2665,43 @@
   dependencies:
     "@lezer/lr" "^0.15.0"
 
-"@lezer/lr@^0.15.0":
+"@lezer/lr@^0.15.0", "@lezer/lr@^0.15.4":
   version "0.15.8"
   resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-0.15.8.tgz#1564a911e62b0a0f75ca63794a6aa8c5dc63db21"
   integrity sha512-bM6oE6VQZ6hIFxDNKk8bKPa14hqFrV07J/vHGOeiAbJReIaQXmkVb6xQu4MR+JBTLa5arGRyAAjJe1qaQt3Uvg==
   dependencies:
     "@lezer/common" "^0.15.0"
 
+"@lmdb/lmdb-darwin-arm64@2.5.2":
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-2.5.2.tgz#bc66fa43286b5c082e8fee0eacc17995806b6fbe"
+  integrity sha512-+F8ioQIUN68B4UFiIBYu0QQvgb9FmlKw2ctQMSBfW2QBrZIxz9vD9jCGqTCPqZBRbPHAS/vG1zSXnKqnS2ch/A==
+
+"@lmdb/lmdb-darwin-x64@2.5.2":
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-2.5.2.tgz#89d8390041bce6bab24a82a20392be22faf54ffc"
+  integrity sha512-KvPH56KRLLx4KSfKBx0m1r7GGGUMXm0jrKmNE7plbHlesZMuPJICtn07HYgQhj1LNsK7Yqwuvnqh1QxhJnF1EA==
+
+"@lmdb/lmdb-linux-arm64@2.5.2":
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-2.5.2.tgz#14fe4c96c2bb1285f93797f45915fa35ee047268"
+  integrity sha512-aLl89VHL/wjhievEOlPocoefUyWdvzVrcQ/MHQYZm2JfV1jUsrbr/ZfkPPUFvZBf+VSE+Q0clWs9l29PCX1hTQ==
+
+"@lmdb/lmdb-linux-arm@2.5.2":
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-2.5.2.tgz#05bde4573ab10cf21827339fe687148f2590cfa1"
+  integrity sha512-5kQAP21hAkfW5Bl+e0P57dV4dGYnkNIpR7f/GAh6QHlgXx+vp/teVj4PGRZaKAvt0GX6++N6hF8NnGElLDuIDw==
+
+"@lmdb/lmdb-linux-x64@2.5.2":
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-2.5.2.tgz#d2f85afd857d2c33d2caa5b057944574edafcfee"
+  integrity sha512-xUdUfwDJLGjOUPH3BuPBt0NlIrR7f/QHKgu3GZIXswMMIihAekj2i97oI0iWG5Bok/b+OBjHPfa8IU9velnP/Q==
+
+"@lmdb/lmdb-win32-x64@2.5.2":
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-2.5.2.tgz#28f643fbc0bec30b07fbe95b137879b6b4d1c9c5"
+  integrity sha512-zrBczSbXKxEyK2ijtbRdICDygRqWSRPpZMN5dD1T8VMEW5RIhIbwFWw2phDRXuBQdVDpSjalCIUMWMV2h3JaZA==
+
 "@mapbox/rehype-prism@^0.6.0":
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/@mapbox/rehype-prism/-/rehype-prism-0.6.0.tgz#3d8a860870951d4354257d0ba908d11545bd5ed5"
@@ -2715,6 +2746,15 @@
   resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.22.tgz#219dfd89ae5b97a8801f015323ffa4b62f45718b"
   integrity sha512-H1rQc1ZOHANWBvPcW+JpGwr+juXSxM8Q8YCkm3GhZd8REu1fHR3z99CErO1p9pkcfcxZnMdIZdIsXkOHY0NilA==
 
+"@mischnic/json-sourcemap@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@mischnic/json-sourcemap/-/json-sourcemap-0.1.0.tgz#38af657be4108140a548638267d02a2ea3336507"
+  integrity sha512-dQb3QnfNqmQNYA4nFSN/uLaByIic58gOXq4Y4XqLOWmOrw73KmJPt/HLyG0wvn1bnR6mBKs/Uwvkh+Hns1T0XA==
+  dependencies:
+    "@lezer/common" "^0.15.7"
+    "@lezer/lr" "^0.15.4"
+    json5 "^2.2.1"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2723,10 +2763,40 @@
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
-"@next/env@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.1.1.tgz#8a927397697ee9d94852feb5fed57a813d299979"
-  integrity sha512-VmTRkfo/IXOQCATndjW3OjKb8zmAuB07eDdzO9XvuXZP87SyvnCYw3jrhUuFhOe/FVsKiloafa5LJfToUpvjUQ==
+"@msgpackr-extract/msgpackr-extract-darwin-arm64@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-2.1.2.tgz#9571b87be3a3f2c46de05585470bc4f3af2f6f00"
+  integrity sha512-TyVLn3S/+ikMDsh0gbKv2YydKClN8HaJDDpONlaZR+LVJmsxLFUgA+O7zu59h9+f9gX1aj/ahw9wqa6rosmrYQ==
+
+"@msgpackr-extract/msgpackr-extract-darwin-x64@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-darwin-x64/-/msgpackr-extract-darwin-x64-2.1.2.tgz#bfbc6936ede2955218f5621a675679a5fe8e6f4c"
+  integrity sha512-YPXtcVkhmVNoMGlqp81ZHW4dMxK09msWgnxtsDpSiZwTzUBG2N+No2bsr7WMtBKCVJMSD6mbAl7YhKUqkp/Few==
+
+"@msgpackr-extract/msgpackr-extract-linux-arm64@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm64/-/msgpackr-extract-linux-arm64-2.1.2.tgz#22555e28382af2922e7450634c8a2f240bb9eb82"
+  integrity sha512-vHZ2JiOWF2+DN9lzltGbhtQNzDo8fKFGrf37UJrgqxU0yvtERrzUugnfnX1wmVfFhSsF8OxrfqiNOUc5hko1Zg==
+
+"@msgpackr-extract/msgpackr-extract-linux-arm@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-arm/-/msgpackr-extract-linux-arm-2.1.2.tgz#ffb6ae1beea7ac572b6be6bf2a8e8162ebdd8be7"
+  integrity sha512-42R4MAFeIeNn+L98qwxAt360bwzX2Kf0ZQkBBucJ2Ircza3asoY4CDbgiu9VWklq8gWJVSJSJBwDI+c/THiWkA==
+
+"@msgpackr-extract/msgpackr-extract-linux-x64@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-linux-x64/-/msgpackr-extract-linux-x64-2.1.2.tgz#7caf62eebbfb1345de40f75e89666b3d4194755f"
+  integrity sha512-RjRoRxg7Q3kPAdUSC5EUUPlwfMkIVhmaRTIe+cqHbKrGZ4M6TyCA/b5qMaukQ/1CHWrqYY2FbKOAU8Hg0pQFzg==
+
+"@msgpackr-extract/msgpackr-extract-win32-x64@2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@msgpackr-extract/msgpackr-extract-win32-x64/-/msgpackr-extract-win32-x64-2.1.2.tgz#f2d8b9ddd8d191205ed26ce54aba3dfc5ae3e7c9"
+  integrity sha512-rIZVR48zA8hGkHIK7ED6+ZiXsjRCcAVBJbm8o89OKAMTmEAQ2QvoOxoiu3w2isAaWwzgtQIOFIqHwvZDyLKCvw==
+
+"@next/env@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.2.5.tgz#d908c57b35262b94db3e431e869b72ac3e1ad3e3"
+  integrity sha512-vLPLV3cpPGjUPT3PjgRj7e3nio9t6USkuew3JE/jMeon/9Mvp1WyR18v3iwnCuX7eUAm1HmAbJHHLAbcu/EJcw==
 
 "@next/eslint-plugin-next@11.1.4":
   version "11.1.4"
@@ -2735,65 +2805,70 @@
   dependencies:
     glob "7.1.7"
 
-"@next/swc-android-arm-eabi@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.1.tgz#2b134efb6639a770db10688a93ce0d2a9362fc5e"
-  integrity sha512-phV9H6d1eK1oVC7nmKKcCXvgOWT4K7aLC/beyO6yvbFC4XtBLE21vPwVl7B4ybz5xjSa6TXoR3TMR6vkW6Mv+A==
-
-"@next/swc-android-arm64@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.1.1.tgz#4fc66990c71c066f99fc435c0e8a4b3191bdfb4a"
-  integrity sha512-X5qEz0YeeYT0Gz2wXPAEtRKEuAsLUIEgC/DDfS98t/5Idjv0S4aqIX+TQdzoXP5bwQkIr+mSg+MBIdLtbtnCsA==
-
-"@next/swc-darwin-arm64@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.1.1.tgz#a5b4ea73ebf769f48dae97942b6b6fbeaf3f1dfc"
-  integrity sha512-bKKSNaTdnO3XPnfaR4NSpPcbs80fdbtOYC2lgtqLzA0bOMioupixMP5GrA/gfJHwh7GRH+A+sbgKQWsqSsYAqQ==
-
-"@next/swc-darwin-x64@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.1.1.tgz#064d50c08d9eec0fc1ff76e190d4fe43184aa8b7"
-  integrity sha512-2VOsA6WLDuDBA6935djohWGGeUIKeQhXwDwu1CKx1b8+6YMMIvFr/y2dpPWoct+5/IjFz84a2MnbABwpoNB9YA==
-
-"@next/swc-linux-arm-gnueabihf@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.1.1.tgz#6cd6edda7f17ad1ceb1cd242419d93a643b1de31"
-  integrity sha512-1urXtWwqjqbbpJBWeJYz5ATgelKacVNdKIdhfahbsmW+DZGoK5TYovgieyHFYUCyHdTuKeLTVR62ahIRUBv1YA==
-
-"@next/swc-linux-arm64-gnu@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.1.1.tgz#d480c71de4150728c0c67a363c7f17291db3f070"
-  integrity sha512-CDD9yFuknDvTOzzDnvfmb58USI5Vu6FUyzw96udKj7KA/n1YrNQ4K8X7KsDCRZoqfRWYceAyj1EpwHkfdiB7bg==
-
-"@next/swc-linux-arm64-musl@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.1.1.tgz#9578705269b746617c763c1ac5c5b26084f1e5ce"
-  integrity sha512-nxyjgmbOpZm7gGPj9EV5Cqosoujt+ih/8SO2XG+BetgfAk0+c15793DHVAljNuc8GF9wpzqQnjMMUZ211VmQsg==
-
-"@next/swc-linux-x64-gnu@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.1.1.tgz#40f3c79b65b6cfc880e6131a25f7936716ded1b9"
-  integrity sha512-L8Cu8kH3Vn2dnRpvcvGGA1TlmDP2WXJ+qDwvjb/ikDXLdRdmFvJwHh45JUGiW2FHed3lGseOgNsuYiDvnT8Cdw==
-
-"@next/swc-linux-x64-musl@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.1.1.tgz#922ea0306d36b5fd860d8cc5a6f4c53dca09395c"
-  integrity sha512-4RAb7L69MoRSggBqUfF3OrtBCUN2zPDi7asfL7bfxEhH10LGzyfil8dT0GVjPOPFz/SyLx3ORd6avGij2IlJUA==
-
-"@next/swc-win32-arm64-msvc@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.1.1.tgz#be13af4e33c071e6ec97b2cfead51eb57ecf189b"
-  integrity sha512-zvkuNIgOxkAU3RbzWRGCcFasDxWJdhONt2YeRGe39dJERHhEFA1u4HgaZw/SFE/kfrNRUZbXjJNAg3OU/EpPZw==
-
-"@next/swc-win32-ia32-msvc@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.1.1.tgz#2a5adb993542fc54fedfd525c69593f75c055595"
-  integrity sha512-GsNDtZ//uKWNVjiwv3YKQYsDXuRWTz8jTmxopf5Ws3dK+zA77hn4o46LBQg0JPCNqTUO6eIOlUBjqSL6ejxmSQ==
-
-"@next/swc-win32-x64-msvc@12.1.1":
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.1.1.tgz#21c12feb6acf75cac7c1ae4ca7f251aa1943f081"
-  integrity sha512-nH5osn/uK9wsjT8Jh1YxMtRrkN5hoCNLQjsEdvfUfb+loQXeYiBd3n/0DUJkf6Scjfv6/htfUTPP3AEa7AbBxQ==
+"@next/swc-android-arm-eabi@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.2.5.tgz#903a5479ab4c2705d9c08d080907475f7bacf94d"
+  integrity sha512-cPWClKxGhgn2dLWnspW+7psl3MoLQUcNqJqOHk2BhNcou9ARDtC0IjQkKe5qcn9qg7I7U83Gp1yh2aesZfZJMA==
+
+"@next/swc-android-arm64@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.2.5.tgz#2f9a98ec4166c7860510963b31bda1f57a77c792"
+  integrity sha512-vMj0efliXmC5b7p+wfcQCX0AfU8IypjkzT64GiKJD9PgiA3IILNiGJr1fw2lyUDHkjeWx/5HMlMEpLnTsQslwg==
+
+"@next/swc-darwin-arm64@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.2.5.tgz#31b1c3c659d54be546120c488a1e1bad21c24a1d"
+  integrity sha512-VOPWbO5EFr6snla/WcxUKtvzGVShfs302TEMOtzYyWni6f9zuOetijJvVh9CCTzInnXAZMtHyNhefijA4HMYLg==
+
+"@next/swc-darwin-x64@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.2.5.tgz#2e44dd82b2b7fef88238d1bc4d3bead5884cedfd"
+  integrity sha512-5o8bTCgAmtYOgauO/Xd27vW52G2/m3i5PX7MUYePquxXAnX73AAtqA3WgPXBRitEB60plSKZgOTkcpqrsh546A==
+
+"@next/swc-freebsd-x64@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.2.5.tgz#e24e75d8c2581bfebc75e4f08f6ddbd116ce9dbd"
+  integrity sha512-yYUbyup1JnznMtEBRkK4LT56N0lfK5qNTzr6/DEyDw5TbFVwnuy2hhLBzwCBkScFVjpFdfiC6SQAX3FrAZzuuw==
+
+"@next/swc-linux-arm-gnueabihf@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.2.5.tgz#46d8c514d834d2b5f67086013f0bd5e3081e10b9"
+  integrity sha512-2ZE2/G921Acks7UopJZVMgKLdm4vN4U0yuzvAMJ6KBavPzqESA2yHJlm85TV/K9gIjKhSk5BVtauIUntFRP8cg==
+
+"@next/swc-linux-arm64-gnu@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.2.5.tgz#91f725ac217d3a1f4f9f53b553615ba582fd3d9f"
+  integrity sha512-/I6+PWVlz2wkTdWqhlSYYJ1pWWgUVva6SgX353oqTh8njNQp1SdFQuWDqk8LnM6ulheVfSsgkDzxrDaAQZnzjQ==
+
+"@next/swc-linux-arm64-musl@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.2.5.tgz#e627e8c867920995810250303cd9b8e963598383"
+  integrity sha512-LPQRelfX6asXyVr59p5sTpx5l+0yh2Vjp/R8Wi4X9pnqcayqT4CUJLiHqCvZuLin3IsFdisJL0rKHMoaZLRfmg==
+
+"@next/swc-linux-x64-gnu@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.2.5.tgz#83a5e224fbc4d119ef2e0f29d0d79c40cc43887e"
+  integrity sha512-0szyAo8jMCClkjNK0hknjhmAngUppoRekW6OAezbEYwHXN/VNtsXbfzgYOqjKWxEx3OoAzrT3jLwAF0HdX2MEw==
+
+"@next/swc-linux-x64-musl@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.2.5.tgz#be700d48471baac1ec2e9539396625584a317e95"
+  integrity sha512-zg/Y6oBar1yVnW6Il1I/08/2ukWtOG6s3acdJdEyIdsCzyQi4RLxbbhkD/EGQyhqBvd3QrC6ZXQEXighQUAZ0g==
+
+"@next/swc-win32-arm64-msvc@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.2.5.tgz#a93e958133ad3310373fda33a79aa10af2a0aa97"
+  integrity sha512-3/90DRNSqeeSRMMEhj4gHHQlLhhKg5SCCoYfE3kBjGpE63EfnblYUqsszGGZ9ekpKL/R4/SGB40iCQr8tR5Jiw==
+
+"@next/swc-win32-ia32-msvc@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.2.5.tgz#4f5f7ba0a98ff89a883625d4af0125baed8b2e19"
+  integrity sha512-hGLc0ZRAwnaPL4ulwpp4D2RxmkHQLuI8CFOEEHdzZpS63/hMVzv81g8jzYA0UXbb9pus/iTc3VRbVbAM03SRrw==
+
+"@next/swc-win32-x64-msvc@12.2.5":
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.2.5.tgz#20fed129b04a0d3f632c6d0de135345bb623b1e4"
+  integrity sha512-7h5/ahY7NeaO2xygqVrSG/Y8Vs4cdjxIjowTZ5W6CKoTKn7tmnuxlUc2h74x06FKmbhAd9agOjr/AOKyxYYm9Q==
 
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
@@ -2929,10 +3004,10 @@
     "@octokit/types" "^6.0.3"
     universal-user-agent "^6.0.0"
 
-"@octokit/openapi-types@^11.2.0":
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-11.2.0.tgz#b38d7fc3736d52a1e96b230c1ccd4a58a2f400a6"
-  integrity sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA==
+"@octokit/openapi-types@^12.11.0":
+  version "12.11.0"
+  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-12.11.0.tgz#da5638d64f2b919bca89ce6602d059f1b52d3ef0"
+  integrity sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==
 
 "@octokit/plugin-enterprise-rest@^6.0.1":
   version "6.0.1"
@@ -2940,11 +3015,11 @@
   integrity sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw==
 
 "@octokit/plugin-paginate-rest@^2.16.8":
-  version "2.17.0"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.17.0.tgz#32e9c7cab2a374421d3d0de239102287d791bce7"
-  integrity sha512-tzMbrbnam2Mt4AhuyCHvpRkS0oZ5MvwwcQPYGtMv4tUa5kkzG58SVB0fcsLulOZQeRnOgdkZWkRUiyBlh0Bkyw==
+  version "2.21.3"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.21.3.tgz#7f12532797775640dbb8224da577da7dc210c87e"
+  integrity sha512-aCZTEf0y2h3OLbrgKkrfFdjRL6eSOo8komneVQJnYecAxIej7Bafor2xhuDJOIFau4pk0i/P28/XgtbyPF0ZHw==
   dependencies:
-    "@octokit/types" "^6.34.0"
+    "@octokit/types" "^6.40.0"
 
 "@octokit/plugin-request-log@^1.0.4":
   version "1.0.4"
@@ -2952,11 +3027,11 @@
   integrity sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==
 
 "@octokit/plugin-rest-endpoint-methods@^5.12.0":
-  version "5.13.0"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.13.0.tgz#8c46109021a3412233f6f50d28786f8e552427ba"
-  integrity sha512-uJjMTkN1KaOIgNtUPMtIXDOjx6dGYysdIFhgA52x4xSadQCz3b/zJexvITDVpANnfKPW/+E0xkOvLntqMYpviA==
+  version "5.16.2"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.16.2.tgz#7ee8bf586df97dd6868cf68f641354e908c25342"
+  integrity sha512-8QFz29Fg5jDuTPXVtey05BLm7OB+M8fnvE64RNegzX7U+5NUXcOcnpTIK0YfSHBg8gYd0oxIq3IZTe9SfPZiRw==
   dependencies:
-    "@octokit/types" "^6.34.0"
+    "@octokit/types" "^6.39.0"
     deprecation "^2.3.1"
 
 "@octokit/request-error@^2.0.5", "@octokit/request-error@^2.1.0":
@@ -2990,602 +3065,605 @@
     "@octokit/plugin-request-log" "^1.0.4"
     "@octokit/plugin-rest-endpoint-methods" "^5.12.0"
 
-"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.34.0":
-  version "6.34.0"
-  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.34.0.tgz#c6021333334d1ecfb5d370a8798162ddf1ae8218"
-  integrity sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==
+"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.39.0", "@octokit/types@^6.40.0":
+  version "6.41.0"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.41.0.tgz#e58ef78d78596d2fb7df9c6259802464b5f84a04"
+  integrity sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==
   dependencies:
-    "@octokit/openapi-types" "^11.2.0"
+    "@octokit/openapi-types" "^12.11.0"
 
-"@parcel/bundler-default@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/bundler-default/-/bundler-default-2.4.0.tgz#a3b88131601821514cd932b3b2ada226d7d3404d"
-  integrity sha512-RaXlxo0M51739Ko3bsOJpDBZlJ+cqkDoBTozNeSc65jS2TMBIBWLMapm8095qmty39OrgYNhzjgPiIlKDS/LWA==
+"@parcel/bundler-default@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/bundler-default/-/bundler-default-2.7.0.tgz#17d94be7185f29773aa21454063cbba3cdc03d49"
+  integrity sha512-PU5MtWWhc+dYI9x8mguYnm9yiG6TkI7niRpxgJgtqAyGHuEyNXVBQQ0X+qyOF4D9LdankBf8uNN18g31IET2Zg==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/hash" "2.4.0"
-    "@parcel/plugin" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/hash" "2.7.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
     nullthrows "^1.1.1"
 
-"@parcel/cache@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/cache/-/cache-2.4.0.tgz#aa83243a00ee861183c6a1ce880292c6c1175022"
-  integrity sha512-oOudoAafrCAHQY0zkU7gVHG1pAGBUz9rht7Tx4WupTmAH0O0F5UnZs6XbjoBJaPHg+CYUXK7v9wQcrNA72E3GA==
+"@parcel/cache@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/cache/-/cache-2.7.0.tgz#cc4b99685c7ff0fc20fbc321f4b6850d6e0c6811"
+  integrity sha512-JlXNoZXcWzLKdDlfeF3dIj5Vtel5T9vtdBN72PJ+cjC4qNHk4Uwvc5sfOBELuibGN0bVu2bwY9nUgSwCiB1iIA==
   dependencies:
-    "@parcel/fs" "2.4.0"
-    "@parcel/logger" "2.4.0"
-    "@parcel/utils" "2.4.0"
-    lmdb "2.2.4"
+    "@parcel/fs" "2.7.0"
+    "@parcel/logger" "2.7.0"
+    "@parcel/utils" "2.7.0"
+    lmdb "2.5.2"
 
-"@parcel/codeframe@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/codeframe/-/codeframe-2.4.0.tgz#c9a78a558f9a5c628c162d5774e2223d236d9f20"
-  integrity sha512-PJ3W9Z0sjoS2CANyo50c+LEr9IRZrtu0WsVPSYZ5ZYRuSXrSa/6PcAlnkyDk2+hi7Od8ncT2bmDexl0Oar3Jyg==
+"@parcel/codeframe@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/codeframe/-/codeframe-2.7.0.tgz#b6e4ad6100938edbed1b6c72b37f609e1abaf931"
+  integrity sha512-UTKx0jejJmmO1dwTHSJuRgrO8N6PMlkxRT6sew8N6NC3Bgv6pu0EbO+RtlWt/jCvzcdLOPdIoTzj4MMZvgcMYg==
   dependencies:
     chalk "^4.1.0"
 
-"@parcel/compressor-raw@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/compressor-raw/-/compressor-raw-2.4.0.tgz#25c701d5a3a4cea843f8d0806b9192a8b107f5d8"
-  integrity sha512-ZErX14fTc0gKIgtnuqW7Clfln4dpXWfUaJQQIf5C3x/LkpUeEhdXeKntkvSxOddDk2JpIKDwqzAxEMZUnDo4Nw==
+"@parcel/compressor-raw@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/compressor-raw/-/compressor-raw-2.7.0.tgz#3f8677e6371ef099cd9e4bd2a899884dc8eb571b"
+  integrity sha512-SCXwnOOQT6EmpusBsYWNQ/RFri+2JnKuE0gMSf2dROl2xbererX45FYzeDplWALCKAdjMNDpFwU+FyMYoVZSCQ==
   dependencies:
-    "@parcel/plugin" "2.4.0"
+    "@parcel/plugin" "2.7.0"
 
-"@parcel/config-default@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/config-default/-/config-default-2.4.0.tgz#a9ec50b99923d6f589b44bf9fd476425879102aa"
-  integrity sha512-pFOPBXPO6HGqNWTLkcK5i8haMOrRgUouUhcWPGWDpN9IPUYFK2E/O1E/uyMjIA1mSL3FnazI+jJwZ45NhKPpIA==
-  dependencies:
-    "@parcel/bundler-default" "2.4.0"
-    "@parcel/compressor-raw" "2.4.0"
-    "@parcel/namer-default" "2.4.0"
-    "@parcel/optimizer-css" "2.4.0"
-    "@parcel/optimizer-htmlnano" "2.4.0"
-    "@parcel/optimizer-image" "2.4.0"
-    "@parcel/optimizer-svgo" "2.4.0"
-    "@parcel/optimizer-terser" "2.4.0"
-    "@parcel/packager-css" "2.4.0"
-    "@parcel/packager-html" "2.4.0"
-    "@parcel/packager-js" "2.4.0"
-    "@parcel/packager-raw" "2.4.0"
-    "@parcel/packager-svg" "2.4.0"
-    "@parcel/reporter-dev-server" "2.4.0"
-    "@parcel/resolver-default" "2.4.0"
-    "@parcel/runtime-browser-hmr" "2.4.0"
-    "@parcel/runtime-js" "2.4.0"
-    "@parcel/runtime-react-refresh" "2.4.0"
-    "@parcel/runtime-service-worker" "2.4.0"
-    "@parcel/transformer-babel" "2.4.0"
-    "@parcel/transformer-css" "2.4.0"
-    "@parcel/transformer-html" "2.4.0"
-    "@parcel/transformer-image" "2.4.0"
-    "@parcel/transformer-js" "2.4.0"
-    "@parcel/transformer-json" "2.4.0"
-    "@parcel/transformer-postcss" "2.4.0"
-    "@parcel/transformer-posthtml" "2.4.0"
-    "@parcel/transformer-raw" "2.4.0"
-    "@parcel/transformer-react-refresh-wrap" "2.4.0"
-    "@parcel/transformer-svg" "2.4.0"
-
-"@parcel/core@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/core/-/core-2.4.0.tgz#c0533760f9d4f04757c69152aa9a6219828ac1ee"
-  integrity sha512-EWZ2UWtIuwDc3fgsKyyTLpNNPoG8Yk2L117ICWF/+cqY8z/wJHm2KwLbeplDeq524shav0GJ9O4CemP3JPx0Nw==
-  dependencies:
-    "@parcel/cache" "2.4.0"
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/events" "2.4.0"
-    "@parcel/fs" "2.4.0"
-    "@parcel/graph" "2.4.0"
-    "@parcel/hash" "2.4.0"
-    "@parcel/logger" "2.4.0"
-    "@parcel/package-manager" "2.4.0"
-    "@parcel/plugin" "2.4.0"
+"@parcel/config-default@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/config-default/-/config-default-2.7.0.tgz#2f6cec9c185b89e40f343549295cad21295621a8"
+  integrity sha512-ZzsLr97AYrz8c9k6qn3DlqPzifi3vbP7q3ynUrAFxmt0L4+K0H9N508ZkORYmCgaFjLIQ8Y3eWpwCJ0AewPNIg==
+  dependencies:
+    "@parcel/bundler-default" "2.7.0"
+    "@parcel/compressor-raw" "2.7.0"
+    "@parcel/namer-default" "2.7.0"
+    "@parcel/optimizer-css" "2.7.0"
+    "@parcel/optimizer-htmlnano" "2.7.0"
+    "@parcel/optimizer-image" "2.7.0"
+    "@parcel/optimizer-svgo" "2.7.0"
+    "@parcel/optimizer-terser" "2.7.0"
+    "@parcel/packager-css" "2.7.0"
+    "@parcel/packager-html" "2.7.0"
+    "@parcel/packager-js" "2.7.0"
+    "@parcel/packager-raw" "2.7.0"
+    "@parcel/packager-svg" "2.7.0"
+    "@parcel/reporter-dev-server" "2.7.0"
+    "@parcel/resolver-default" "2.7.0"
+    "@parcel/runtime-browser-hmr" "2.7.0"
+    "@parcel/runtime-js" "2.7.0"
+    "@parcel/runtime-react-refresh" "2.7.0"
+    "@parcel/runtime-service-worker" "2.7.0"
+    "@parcel/transformer-babel" "2.7.0"
+    "@parcel/transformer-css" "2.7.0"
+    "@parcel/transformer-html" "2.7.0"
+    "@parcel/transformer-image" "2.7.0"
+    "@parcel/transformer-js" "2.7.0"
+    "@parcel/transformer-json" "2.7.0"
+    "@parcel/transformer-postcss" "2.7.0"
+    "@parcel/transformer-posthtml" "2.7.0"
+    "@parcel/transformer-raw" "2.7.0"
+    "@parcel/transformer-react-refresh-wrap" "2.7.0"
+    "@parcel/transformer-svg" "2.7.0"
+
+"@parcel/core@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/core/-/core-2.7.0.tgz#3310f48230bd618735f199f159f37e6b45ed2710"
+  integrity sha512-7yKZUdh314Q/kU/9+27ZYTfcnXS6VYHuG+iiUlIohnvUUybxLqVJhdMU9Q+z2QcPka1IdJWz4K4Xx0y6/4goyg==
+  dependencies:
+    "@mischnic/json-sourcemap" "^0.1.0"
+    "@parcel/cache" "2.7.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/events" "2.7.0"
+    "@parcel/fs" "2.7.0"
+    "@parcel/graph" "2.7.0"
+    "@parcel/hash" "2.7.0"
+    "@parcel/logger" "2.7.0"
+    "@parcel/package-manager" "2.7.0"
+    "@parcel/plugin" "2.7.0"
     "@parcel/source-map" "^2.0.0"
-    "@parcel/types" "2.4.0"
-    "@parcel/utils" "2.4.0"
-    "@parcel/workers" "2.4.0"
+    "@parcel/types" "2.7.0"
+    "@parcel/utils" "2.7.0"
+    "@parcel/workers" "2.7.0"
     abortcontroller-polyfill "^1.1.9"
     base-x "^3.0.8"
     browserslist "^4.6.6"
     clone "^2.1.1"
     dotenv "^7.0.0"
     dotenv-expand "^5.1.0"
-    json-source-map "^0.6.1"
     json5 "^2.2.0"
     msgpackr "^1.5.4"
     nullthrows "^1.1.1"
     semver "^5.7.1"
 
-"@parcel/css-darwin-arm64@1.7.3":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@parcel/css-darwin-arm64/-/css-darwin-arm64-1.7.3.tgz#dcc0286f79b17cba945ff53915a9d34a1ce62c47"
-  integrity sha512-m3HDY+Rh8HJxmLELKAvCpF59vLS7FWtgBODHxl8G9Jl2CnGtXpXvdpyeMxNsTE+2QuPC+a5QT7IeZAKb2Gjmxg==
-
-"@parcel/css-darwin-x64@1.7.3":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@parcel/css-darwin-x64/-/css-darwin-x64-1.7.3.tgz#fac0d5705606b2261562879ee153b65c7201c9c5"
-  integrity sha512-LuhweXKxVwrz/hjAOm9XNRMSL+p23px20nhSCASkyUP7Higaxza948W3TSQdoL3YyR+wQxQH8Yj+R/T8Tz3E3g==
-
-"@parcel/css-linux-arm-gnueabihf@1.7.3":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@parcel/css-linux-arm-gnueabihf/-/css-linux-arm-gnueabihf-1.7.3.tgz#43fa89d88954aba565ff2bbcd010e408d6ca6782"
-  integrity sha512-/pd9Em18zMvt7eDZAMpNBEwF7c4VPVhAtBOZ59ClFrsXCTDNYP7mSy0cwNgtLelCRZCGAQmZNBDNQPH7vO3rew==
-
-"@parcel/css-linux-arm64-gnu@1.7.3":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@parcel/css-linux-arm64-gnu/-/css-linux-arm64-gnu-1.7.3.tgz#8dd5d52a2cd0d2450a2b639956bf955277aa760a"
-  integrity sha512-5aKiEhQK40riO4iVKzRqISzgYK+7Z7i3e6JTSz+/BHuQyHEUaBe/RuJ8Z0BDQtFz0HmWQlrQCd+7hd0Xgd8vYQ==
-
-"@parcel/css-linux-arm64-musl@1.7.3":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@parcel/css-linux-arm64-musl/-/css-linux-arm64-musl-1.7.3.tgz#2a784ffacf398a7422c98345eed8410d8afff9bb"
-  integrity sha512-Wf7/aIueDED2JqBMfZvzbBAFSaPmd3TR28bD2pmP7CI/jZnm9vHVKMdOLgt9NKSSSjdGrp+VM410CsrUM7xcOw==
-
-"@parcel/css-linux-x64-gnu@1.7.3":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@parcel/css-linux-x64-gnu/-/css-linux-x64-gnu-1.7.3.tgz#102751d452642d078bd40a6c5c5b19d65da810ba"
-  integrity sha512-0ZADbuFklUrHC1p2uPY4BPcN07jUTMqJzr/SSdnGN2XiXgiVZGcDCMHUj0DvC9Vwy11DDM6Rnw4QBbKHG+QGjQ==
-
-"@parcel/css-linux-x64-musl@1.7.3":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@parcel/css-linux-x64-musl/-/css-linux-x64-musl-1.7.3.tgz#563090ba9825d7de7352700effd9e0b3a8d74cbb"
-  integrity sha512-mFWWM8lX2OIID81YQuDDt9zTqof0B7UcEcs0huE7Zbs60uLEEQupdf8iH0yh5EOhxPt3sRcQnGXf2QTrXdjIMA==
-
-"@parcel/css-win32-x64-msvc@1.7.3":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@parcel/css-win32-x64-msvc/-/css-win32-x64-msvc-1.7.3.tgz#d69551721b74457c92bd625d566a6d1f20b7d268"
-  integrity sha512-KUFEMQcoP7DG3QbsN21OxhjHkfQ1BARn7D9puX75bV5N1F1kv557aaLkQZiMsgiYOL4tmJvsdQXutG7x++3j4Q==
-
-"@parcel/css@^1.7.2":
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/@parcel/css/-/css-1.7.3.tgz#e8ac640888c0317fe15b329df169ce60b2fe92cb"
-  integrity sha512-rgdRX4Uk31EvzH/mUScL0wdXtkci3U5N1W2pgam+9S10vQy4uONhWBepZ1tUCjONHLacGXr1jp3LbG/HI7LiTw==
+"@parcel/css-darwin-arm64@1.12.2":
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/@parcel/css-darwin-arm64/-/css-darwin-arm64-1.12.2.tgz#4215585dac699f0f75015f5b47254867ac1221d3"
+  integrity sha512-6VvsoYSltBiUh/uyfPzQ+I3DiTFN7tmRv6zm1LH98J7GGCDDhbYEtbQjjCs15ex6fVn1ORZK0JO+mMlsg1JwTA==
+
+"@parcel/css-darwin-x64@1.12.2":
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/@parcel/css-darwin-x64/-/css-darwin-x64-1.12.2.tgz#eeb4e04c512580bd531b5ffa9c34456e9799fdb9"
+  integrity sha512-3J0/LrDvt5vevOisnrE0q5mEcuiAY+K7OZwIv84SAnrbjlL5sshmIaaNzL869kb4thza+RClEj0mS5XTm1IUEw==
+
+"@parcel/css-linux-arm-gnueabihf@1.12.2":
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/@parcel/css-linux-arm-gnueabihf/-/css-linux-arm-gnueabihf-1.12.2.tgz#ccd813bbc9b9d845fb8f6ed9c7c22c745cda007b"
+  integrity sha512-OsX7I3dhBvnxEbAH++08RFe7yhjRp33ulzrCvJTMOP9YkxEEJ8qId3sNzJBHIVQzHyTlPTnBRHbSDhU3TFe/eQ==
+
+"@parcel/css-linux-arm64-gnu@1.12.2":
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/@parcel/css-linux-arm64-gnu/-/css-linux-arm64-gnu-1.12.2.tgz#7959fbcbd38c9b9c2c24c6c2def4ec2df370b705"
+  integrity sha512-R1Kqw+1Rsru9Q4+qvUEC6B8P21bpqhuF9rv8GmBmmnF1i2hMZ1JiY+uh/ej8IaRV0O3fAHeQGIyGBWx6qWDpcw==
+
+"@parcel/css-linux-arm64-musl@1.12.2":
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/@parcel/css-linux-arm64-musl/-/css-linux-arm64-musl-1.12.2.tgz#ffc3fc62db9b8a19f8be61028abbcb7c44d90fa6"
+  integrity sha512-nwixgM4SEgPUQata9aAiJW0A5Q9ms+xim1tXT1i+91kOei4Fu2Wr2OuofMk+mlhbgmGKCTcu4gzMPReGxUhuRA==
+
+"@parcel/css-linux-x64-gnu@1.12.2":
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/@parcel/css-linux-x64-gnu/-/css-linux-x64-gnu-1.12.2.tgz#15619756ba62558243ae996e257b1cca90f534eb"
+  integrity sha512-cJYVMHnQSGhDwQByyvjFZppjMBNlgxXl/R4cX5DwrQE0QZmK/42BYnMp92rvoprEG6LRyRoiGtCjyfYTPWajog==
+
+"@parcel/css-linux-x64-musl@1.12.2":
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/@parcel/css-linux-x64-musl/-/css-linux-x64-musl-1.12.2.tgz#de61e2bdec54609f7b681acfbd04e9fb57a5ef02"
+  integrity sha512-u9zdO/d831/74Tf+TdPUfaIuB9v6FD4Xz8UdWUDOXgQqaOlnJ9fAsAM39EkoWlMxPPljY3f4ay6irSe1a4XgSA==
+
+"@parcel/css-win32-x64-msvc@1.12.2":
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/@parcel/css-win32-x64-msvc/-/css-win32-x64-msvc-1.12.2.tgz#086586fce31d1e05340c2e31efc32d40aa9ee05a"
+  integrity sha512-kCAKr3vKqvPUv9oXBG3pGZQz5il3sEk35dpmTXFa/7eDNKR5XyLpiJs8JwWJTFfuUqroymDSXA1bCcjvNEYcAg==
+
+"@parcel/css@^1.12.2":
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/@parcel/css/-/css-1.12.2.tgz#63eacc9fcdf58e4d9639db34271834394705b7b2"
+  integrity sha512-Sa0PvZu5u877CupQA8IjEATqjJFynBfA7LxbcyutFe2LDCRSqB5Bm08jKFScyaz56qjZNIxZxXk2SApNkOvoAA==
   dependencies:
     detect-libc "^1.0.3"
   optionalDependencies:
-    "@parcel/css-darwin-arm64" "1.7.3"
-    "@parcel/css-darwin-x64" "1.7.3"
-    "@parcel/css-linux-arm-gnueabihf" "1.7.3"
-    "@parcel/css-linux-arm64-gnu" "1.7.3"
-    "@parcel/css-linux-arm64-musl" "1.7.3"
-    "@parcel/css-linux-x64-gnu" "1.7.3"
-    "@parcel/css-linux-x64-musl" "1.7.3"
-    "@parcel/css-win32-x64-msvc" "1.7.3"
-
-"@parcel/diagnostic@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/diagnostic/-/diagnostic-2.4.0.tgz#0a94287851aee60e30f1e7f10582be274e0d1cf4"
-  integrity sha512-TjWO/b2zMFhub5ouwGjazMm7iAUvdmXBfWmjrg4TBhUbhoQwBnyWfvMDtAYo7PcvXfxVPgPZv86Nv6Ym5H6cHQ==
+    "@parcel/css-darwin-arm64" "1.12.2"
+    "@parcel/css-darwin-x64" "1.12.2"
+    "@parcel/css-linux-arm-gnueabihf" "1.12.2"
+    "@parcel/css-linux-arm64-gnu" "1.12.2"
+    "@parcel/css-linux-arm64-musl" "1.12.2"
+    "@parcel/css-linux-x64-gnu" "1.12.2"
+    "@parcel/css-linux-x64-musl" "1.12.2"
+    "@parcel/css-win32-x64-msvc" "1.12.2"
+
+"@parcel/diagnostic@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/diagnostic/-/diagnostic-2.7.0.tgz#cf2596a20ce9277334616e12bbdac98490189e99"
+  integrity sha512-pdq/cTwVoL0n8yuDCRXFRSQHVWdmmIXPt3R3iT4KtYDYvOrMT2dLPT79IMqQkhYPANW8GuL15n/WxRngfRdkug==
   dependencies:
-    json-source-map "^0.6.1"
+    "@mischnic/json-sourcemap" "^0.1.0"
     nullthrows "^1.1.1"
 
-"@parcel/events@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/events/-/events-2.4.0.tgz#7526ea17dd72d97d7f4d3717285e85a36f5ead8f"
-  integrity sha512-DEaEtFbhOhNAEmiXJ3MyF8Scq+sNDKiTyLax4lAC5/dpE5GvwfNnoD17C2+0gDuuDpdQkdHfXfvr50aYFt7jcw==
+"@parcel/events@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/events/-/events-2.7.0.tgz#b6db8464d45626686134d412d3a36d024ffb1482"
+  integrity sha512-kQDwMKgZ1U4M/G17qeDYF6bW5kybluN6ajYPc7mZcrWg+trEI/oXi81GMFaMX0BSUhwhbiN5+/Vb2wiG/Sn6ig==
 
-"@parcel/fs-search@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/fs-search/-/fs-search-2.4.0.tgz#1f278eb56ee054521ccb7e685886cd386e5efba7"
-  integrity sha512-W/Vu6wbZk4wuB6AVdMkyymwh/S8Peed/PgJgSsApYD6lSTD315I6OuEdxZh3lWY+dqQdog/NJ7dvi/hdpH/Iqw==
+"@parcel/fs-search@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/fs-search/-/fs-search-2.7.0.tgz#15e658006039ddc7b92528df5266ee2b9c47b6a4"
+  integrity sha512-K1Hv25bnRpwQVA15RvcRuB8ZhfclnCHA8N8L6w7Ul1ncSJDxCIkIAc5hAubYNNYW3kWjCC2SOaEgFKnbvMllEQ==
   dependencies:
     detect-libc "^1.0.3"
 
-"@parcel/fs@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/fs/-/fs-2.4.0.tgz#d8a34e63356ce66e3e34a958fae052d48acd2d28"
-  integrity sha512-CnUlWGUJ52SJVQi8QnaAPPQZOADmHMV9D9aX9GLcDm5XLT3Em7vmesG4bNLdMLwzYuzAtenhcWmuRCACuYztHw==
+"@parcel/fs@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/fs/-/fs-2.7.0.tgz#c9a0c60bdbef7101ff47f2db6b23814c3db06007"
+  integrity sha512-PU5fo4Hh8y03LZgemgVREttc0wyHQUNmsJCybxTB7EjJie2CqJRumo+DFppArlvdchLwJdc9em03yQV/GNWrEg==
   dependencies:
-    "@parcel/fs-search" "2.4.0"
-    "@parcel/types" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/fs-search" "2.7.0"
+    "@parcel/types" "2.7.0"
+    "@parcel/utils" "2.7.0"
     "@parcel/watcher" "^2.0.0"
-    "@parcel/workers" "2.4.0"
+    "@parcel/workers" "2.7.0"
 
-"@parcel/graph@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/graph/-/graph-2.4.0.tgz#a0a94baf102f456ba7c9e4e235fb677bbe0f9286"
-  integrity sha512-5TZIAfDITkJCzgH4j4OQhnIvjV9IFwWqNBJanRl5QQTmKvdcODS3WbnK1SOJ+ZltcLVXMB+HNXmL0bX0tVolcw==
+"@parcel/graph@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/graph/-/graph-2.7.0.tgz#2ae326c62764aaa53324b89d9c83ec0bc6ad55bf"
+  integrity sha512-Q6E94GS6q45PtsZh+m+gvFRp/N1Qopxhu2sxjcWsGs5iBd6IWn2oYLWOH5iVzEjWuYpW2HkB08lH6J50O63uOA==
   dependencies:
-    "@parcel/utils" "2.4.0"
+    "@parcel/utils" "2.7.0"
     nullthrows "^1.1.1"
 
-"@parcel/hash@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/hash/-/hash-2.4.0.tgz#4f85e42d94aa3c458a7d0b484852f5466799be1b"
-  integrity sha512-nB+wYNUhe6+G8M7vQhdeFXtpYJYwJgBHOPZ7Hd9O2jdlamWjDbw0t/u1dJbYvGJ8ZDtLDwiItawQVpuVdskQ9g==
+"@parcel/hash@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/hash/-/hash-2.7.0.tgz#8825cff69a0bc4816737415e6e2aa29e8671c0b1"
+  integrity sha512-k6bSKnIlPJMPU3yjQzfgfvF9zuJZGOAlJgzpL4BbWvdbE8BTdjzLcFn0Ujrtud94EgIkiXd22sC2HpCUWoHGdA==
   dependencies:
     detect-libc "^1.0.3"
     xxhash-wasm "^0.4.2"
 
-"@parcel/logger@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/logger/-/logger-2.4.0.tgz#762b9431183557132c91419f2f7e5443837a4222"
-  integrity sha512-DqfU0Zcs/0a7VBk+MsjJ80C66w4kM9EbkO3G12NIyEjNeG50ayW2CE9rUuJ91JaM9j0NFM1P82eyLpQPFFaVPw==
+"@parcel/logger@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/logger/-/logger-2.7.0.tgz#1aa1de0458bdd613714ce4031134d92135aec590"
+  integrity sha512-qjMY/bYo38+o+OiIrTRldU9CwL1E7J72t+xkTP8QIcUxLWz5LYR0YbynZUVulmBSfqsykjjxCy4a+8siVr+lPw==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/events" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/events" "2.7.0"
 
-"@parcel/markdown-ansi@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/markdown-ansi/-/markdown-ansi-2.4.0.tgz#688fa5e5f4765bde83f49fe298d8a2b416b3446f"
-  integrity sha512-gPUP1xikxHiu2kFyPy35pfuVkFgAmcywO8YDQj7iYcB+k7l4QPpIYFYGXn2QADV4faf66ncMeTD4uYV8c0GqjQ==
+"@parcel/markdown-ansi@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/markdown-ansi/-/markdown-ansi-2.7.0.tgz#4ba70e3661ce06cd8fd2eb3f7b84028853a586e4"
+  integrity sha512-ipOX0D6FVZFEXeb/z8MnTMq2RQEIuaILY90olVIuHEFLHHfOPEn+RK3u13HA1ChF5/9E3cMD79tu6x9JL9Kqag==
   dependencies:
     chalk "^4.1.0"
 
-"@parcel/namer-default@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/namer-default/-/namer-default-2.4.0.tgz#df1571f4f9104ae9bdb77887693b4b7f9d5c86a6"
-  integrity sha512-DfL+Gx0Tyoa0vsgRpNybXjuKbWNw8MTVpy7Dk7r0btfVsn1jy3SSwlxH4USf76gb00/pK6XBsMp9zn7Z8ePREQ==
+"@parcel/namer-default@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/namer-default/-/namer-default-2.7.0.tgz#e008097586016f16509834db11985dcc772c314c"
+  integrity sha512-lIKMdsmi//7fepecNDYmJYzBlL91HifPsX03lJCdu1dC6q5fBs+gG0XjKKG7yPnSCw1qH/4m7drzt9+dRZYAHQ==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/plugin" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/plugin" "2.7.0"
     nullthrows "^1.1.1"
 
-"@parcel/node-resolver-core@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/node-resolver-core/-/node-resolver-core-2.4.0.tgz#394f186fc7d431f98ac72b9d3fe140e04a21dd7d"
-  integrity sha512-qiN97XcfW2fYNoYuVEhNKuVPEJKj5ONQl0fqr/NEMmYvWz3bVKjgiXNJwW558elZvCI08gEbdxgyThpuFFQeKQ==
+"@parcel/node-resolver-core@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/node-resolver-core/-/node-resolver-core-2.7.0.tgz#468074aa58a2f0026a492607153079ebb16308e3"
+  integrity sha512-5UJQHalqMxdhJIs2hhqQzFfQpF7+NAowsRq064lYtiRvcD8wMr3OOQ9wd1iazGpFSl4JKdT7BwDU9/miDJmanQ==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/utils" "2.7.0"
     nullthrows "^1.1.1"
+    semver "^5.7.1"
 
-"@parcel/optimizer-css@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/optimizer-css/-/optimizer-css-2.4.0.tgz#50403ee54c0c165d279f7ec11aabdf3e1ed3d94d"
-  integrity sha512-LQmjjOGsHEHKTJqfHR2eJyhWhLXvHP0uOAU+qopBttYYlB2J/vMK9RYAye5cyAb8bQmV8wAdi2mq9rnt7FMSPw==
+"@parcel/optimizer-css@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/optimizer-css/-/optimizer-css-2.7.0.tgz#460cde19b9ee61efed577473cb0822796b6e8b1a"
+  integrity sha512-IfnOMACqhcAclKyOW9X9JpsknB6OShk9OVvb8EvbDTKHJhQHNNmzE88OkSI/pS3ZVZP9Zj+nWcVHguV+kvDeiQ==
   dependencies:
-    "@parcel/css" "^1.7.2"
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/plugin" "2.4.0"
+    "@parcel/css" "^1.12.2"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/plugin" "2.7.0"
     "@parcel/source-map" "^2.0.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/utils" "2.7.0"
     browserslist "^4.6.6"
     nullthrows "^1.1.1"
 
-"@parcel/optimizer-htmlnano@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/optimizer-htmlnano/-/optimizer-htmlnano-2.4.0.tgz#620b3e7089de97c9dc619952b22d45b461b12747"
-  integrity sha512-02EbeElLgNOAYhGU7fFBahpoKrX5G/yzahpaoKB/ypScM4roSsAMBkGcluboR5L10YRsvfvJEpxvfGyDA3tPmw==
+"@parcel/optimizer-htmlnano@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/optimizer-htmlnano/-/optimizer-htmlnano-2.7.0.tgz#d2e843b539a430fcca723f08efcee26f98b3d40b"
+  integrity sha512-5QrGdWS5Hi4VXE3nQNrGqugmSXt68YIsWwKRAdarOxzyULSJS3gbCiQOXqIPRJobfZjnSIcdtkyxSiCUe1inIA==
   dependencies:
-    "@parcel/plugin" "2.4.0"
+    "@parcel/plugin" "2.7.0"
     htmlnano "^2.0.0"
     nullthrows "^1.1.1"
     posthtml "^0.16.5"
     svgo "^2.4.0"
 
-"@parcel/optimizer-image@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/optimizer-image/-/optimizer-image-2.4.0.tgz#2717210bd2e0a9c58af08394011cdd2f3c1172ce"
-  integrity sha512-Q4onaBMPkDyYxPzrb8ytBUftaQZFepj9dSUgq+ETuHDzkgia0tomDPfCqrw6ld0qvYyANzXTP5+LC4g0i5yh+A==
+"@parcel/optimizer-image@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/optimizer-image/-/optimizer-image-2.7.0.tgz#180d7709e6268e0634967eb265bf901aba2471ce"
+  integrity sha512-EnaXz5UjR67FUu0BEcqZTT9LsbB/iFAkkghCotbnbOuC5QQsloq6tw54TKU3y+R3qsjgUoMtGxPcGfVoXxZXYw==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/plugin" "2.4.0"
-    "@parcel/utils" "2.4.0"
-    "@parcel/workers" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
+    "@parcel/workers" "2.7.0"
     detect-libc "^1.0.3"
 
-"@parcel/optimizer-svgo@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/optimizer-svgo/-/optimizer-svgo-2.4.0.tgz#7abfaaa3e6ba3ade4d85a85705a8b307487d2feb"
-  integrity sha512-mwvGuCqVuNCAuMlp2maFE/Uz9ud1T1AuX0f6cCRczjFYiwZuIr/0iDdfFzSziOkVo1MRAGAZNa0dRR/UzCZtVg==
+"@parcel/optimizer-svgo@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/optimizer-svgo/-/optimizer-svgo-2.7.0.tgz#9b4ab38a9d3c99504cf399a5c7709e5d2a615e71"
+  integrity sha512-IO1JV4NpfP3V7FrhsqCcV8pDQIHraFi1/ZvEJyssITxjH49Im/txKlwMiQuZZryAPn8Xb8g395Muawuk6AK6sg==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/plugin" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
     svgo "^2.4.0"
 
-"@parcel/optimizer-terser@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/optimizer-terser/-/optimizer-terser-2.4.0.tgz#433965117d54c4cf113af3a6b056ff0766367468"
-  integrity sha512-PdCgRgXNSY6R1HTV9VG2MHp1CgUbP5pslCyxvlbUmQAS6bvEpMOpn3qSd+U28o7mGE/qXIhvpDyi808sb+MEcg==
+"@parcel/optimizer-terser@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/optimizer-terser/-/optimizer-terser-2.7.0.tgz#b9ef408f45714952d1502940b6a63e5ebd3f0940"
+  integrity sha512-07VZjIO8xsl2/WmS/qHI8lI/cpu47iS9eRpqwfZEEsdk1cfz50jhWkmFudHBxiHGMfcZ//1+DdaPg9RDBWZtZA==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/plugin" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/plugin" "2.7.0"
     "@parcel/source-map" "^2.0.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/utils" "2.7.0"
     nullthrows "^1.1.1"
     terser "^5.2.0"
 
-"@parcel/package-manager@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/package-manager/-/package-manager-2.4.0.tgz#ab4d7a53059355dc4f17e16c97540b6c7d70c5f6"
-  integrity sha512-21AEfAQnZbHRVViTn7QsPGe/CiGaFaDUH5f0m8qVC7fDjjhC8LM8blkqU72goaO9FbaLMadtEf2txhzly7h/bg==
-  dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/fs" "2.4.0"
-    "@parcel/logger" "2.4.0"
-    "@parcel/types" "2.4.0"
-    "@parcel/utils" "2.4.0"
-    "@parcel/workers" "2.4.0"
+"@parcel/package-manager@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/package-manager/-/package-manager-2.7.0.tgz#5de1bf5c94d95330e98dffb2a66c22d1f20c4c8a"
+  integrity sha512-wmfSX1mRrTi8MeA4KrnPk/x7zGUsILCQmTo6lA4gygzAxDbM1pGuyFN8/Kt0y0SFO2lbljARtD/4an5qdotH+Q==
+  dependencies:
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/fs" "2.7.0"
+    "@parcel/logger" "2.7.0"
+    "@parcel/types" "2.7.0"
+    "@parcel/utils" "2.7.0"
+    "@parcel/workers" "2.7.0"
     semver "^5.7.1"
 
-"@parcel/packager-css@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/packager-css/-/packager-css-2.4.0.tgz#02198953674172c20a1c00418fdc7a1671f62fad"
-  integrity sha512-LmPDWzkXi60Oy3WrPF0jPKQxeTwW5hmNBgrcXJMHSu+VcXdaQZNzNxVzhnZkJUbDd2z9vAUrUGzdLh8TquC8iQ==
+"@parcel/packager-css@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-css/-/packager-css-2.7.0.tgz#060af8b96e5ad53620b4021610364804e26d69b2"
+  integrity sha512-44nzZwu+ssGuiFmYM6cf/Y4iChiUZ4DUzzpegnGlhXtKJKe4NHntxThJynuRZWKN2AAf48avApDpimg2jW0KDw==
   dependencies:
-    "@parcel/plugin" "2.4.0"
+    "@parcel/plugin" "2.7.0"
     "@parcel/source-map" "^2.0.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/utils" "2.7.0"
     nullthrows "^1.1.1"
 
-"@parcel/packager-html@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/packager-html/-/packager-html-2.4.0.tgz#a14a4e8de19dc16c5e2c611c7d0cce7b9af9aef1"
-  integrity sha512-OPMIQ1uHYQFpRPrsmm5BqONbAyzjlhVsPRAzHlcBrglG4BTUeOR2ow4MUKblHmVVqc3QHnfZG4nHHtFkeuNQ3A==
+"@parcel/packager-html@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-html/-/packager-html-2.7.0.tgz#4f86698d05f5ec5c3ebc8b46102a6ae42c58a24a"
+  integrity sha512-Zgqd7sdcY/UnR370GR0q2ilmEohUDXsO8A1F28QCJzIsR1iCB6KRUT74+pawfQ1IhXZLaaFLLYe0UWcfm0JeXg==
   dependencies:
-    "@parcel/plugin" "2.4.0"
-    "@parcel/types" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/types" "2.7.0"
+    "@parcel/utils" "2.7.0"
     nullthrows "^1.1.1"
     posthtml "^0.16.5"
 
-"@parcel/packager-js@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/packager-js/-/packager-js-2.4.0.tgz#033e80a161c14793ac47b74da84a2c8a22b23b76"
-  integrity sha512-cfslIH43CJFgBS9PmdFaSnbInMCoejsFCnxtJa2GeUpjCXSfelPRp0OPx7m8n+fap4czftPhoxBALeDUElOZGQ==
+"@parcel/packager-js@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-js/-/packager-js-2.7.0.tgz#e694cc731d75697e63d3d4be0bdbbe4a2ae8f1fc"
+  integrity sha512-wTRdM81PgRVDzWGXdWmqLwguWnTYWzhEDdjXpW2n8uMOu/CjHhMtogk65aaYk3GOnq6OBL/NsrmBiV/zKPj1vA==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/hash" "2.4.0"
-    "@parcel/plugin" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/hash" "2.7.0"
+    "@parcel/plugin" "2.7.0"
     "@parcel/source-map" "^2.0.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/utils" "2.7.0"
     globals "^13.2.0"
     nullthrows "^1.1.1"
 
-"@parcel/packager-raw@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/packager-raw/-/packager-raw-2.4.0.tgz#bdb2576f154e897947bf6331d7711d4a6258d1e8"
-  integrity sha512-SFfw7chMFITj3J26ZVDJxbO6xwtPFcFBm1js8cwWMgzwuwS6CEc43k5+Abj+2/EqHU9kNJU9eWV5vT6lQwf3HA==
+"@parcel/packager-raw@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-raw/-/packager-raw-2.7.0.tgz#5b68de05c19bbcf438f40b4ae9f45411ba9739bd"
+  integrity sha512-jg2Zp8dI5VpIQlaeahXDCfrPN9m/DKht1NkR9P2CylMAwqCcc1Xc1RRiF0wfwcPZpPMpq1265n+4qnB7rjGBlA==
   dependencies:
-    "@parcel/plugin" "2.4.0"
+    "@parcel/plugin" "2.7.0"
 
-"@parcel/packager-svg@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/packager-svg/-/packager-svg-2.4.0.tgz#573653b582472aaad77beb9a9cb1421d744bd3b5"
-  integrity sha512-DwkgrdLEQop+tu9Ocr1ZaadmpsbSgVruJPr80xq1LaB0Jiwrl9HjHStMNH1laNFueK1yydxhnj9C2JQfW28qag==
+"@parcel/packager-svg@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/packager-svg/-/packager-svg-2.7.0.tgz#e7e96503c86815eca285b9cc8908105075d9ab38"
+  integrity sha512-EmJg3HpD6/xxKBjir/CdCKJZwI24iVfBuxRS9LUp3xHAIebOzVh1z6IN+i2Di5+NyRwfOFaLliL4uMa1zwbyCA==
   dependencies:
-    "@parcel/plugin" "2.4.0"
-    "@parcel/types" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/types" "2.7.0"
+    "@parcel/utils" "2.7.0"
     posthtml "^0.16.4"
 
-"@parcel/plugin@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/plugin/-/plugin-2.4.0.tgz#fc940f4eb58dc271e53aa0043b68cc565853e390"
-  integrity sha512-ehFUAL2+h27Lv+cYbbXA74UGy8C+eglUjcpvASOOjVRFuD6poMAMliKkKAXBhQaFx/Rvhz27A2PIPv9lL2i4UQ==
+"@parcel/plugin@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/plugin/-/plugin-2.7.0.tgz#0211281025d02afbc5a23fba237b7aae02e34e51"
+  integrity sha512-qqgx+nnMn6/0lRc4lKbLGmhNtBiT93S2gFNB4Eb4Pfz/SxVYoW+fmml+KdfOSiZffWOAH5L6NwhyD7N8aSikzw==
   dependencies:
-    "@parcel/types" "2.4.0"
+    "@parcel/types" "2.7.0"
 
-"@parcel/reporter-cli@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/reporter-cli/-/reporter-cli-2.4.0.tgz#37ba4e12b1999c04beeaf98cb6809cd4794acae4"
-  integrity sha512-Q9bIFMaGvQgypCDxdMEKOwrJzIHAXScKkuFsqTHnUL6mmH3Mo2CoEGAq/wpMXuPhXRn1dPJcHgTNDwZ2fSzz0A==
+"@parcel/reporter-cli@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/reporter-cli/-/reporter-cli-2.7.0.tgz#86499624e258034001b64c10b14e23ae4b92f44b"
+  integrity sha512-80gEODg8cnAmnxGVuaSVDo8JJ54P9AA2bHwSs1cIkHWlJ3BjDQb83H31bBHncJ5Kn5kQ/j+7WjlqHpTCiOR9PA==
   dependencies:
-    "@parcel/plugin" "2.4.0"
-    "@parcel/types" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/types" "2.7.0"
+    "@parcel/utils" "2.7.0"
     chalk "^4.1.0"
     term-size "^2.2.1"
 
-"@parcel/reporter-dev-server@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/reporter-dev-server/-/reporter-dev-server-2.4.0.tgz#233e595680aa86ae599715589865b282abdf63bd"
-  integrity sha512-24h++wevs7XYuX4dKa4PUfLSstvn3g7udajFv6CeQoME+dR25RL/wH/2LUbhV5ilgXXab76rWIndSqp78xHxPA==
+"@parcel/reporter-dev-server@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/reporter-dev-server/-/reporter-dev-server-2.7.0.tgz#9bd3d10f745e0cbc9ab983ec046953c2c564dcb2"
+  integrity sha512-ySuou5addK8fGue8aXzo536BaEjMujDrEc1xkp4TasInXHVcA98b+SYX5NAZTGob5CxKvZQ5ylhg77zW30B+iA==
   dependencies:
-    "@parcel/plugin" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
 
-"@parcel/resolver-default@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/resolver-default/-/resolver-default-2.4.0.tgz#1f45b95443078f10d178b32782da95a1bea71eb6"
-  integrity sha512-K7pIIFmGm1hjg/7Mzkg99i8tfCClKfBUTuc2R5j8cdr2n0mCAi4/f2mFf5svLrb5XZrnDgoQ05tHKklLEfUDUw==
+"@parcel/resolver-default@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/resolver-default/-/resolver-default-2.7.0.tgz#648a257b81abe2eda09700d8f36348a88ea0442e"
+  integrity sha512-v8TvWsbLK7/q7n4gv6OrYNbW18xUx4zKbVMGZb1u4yMhzEH4HFr1D9OeoTq3jk+ximAigds8B6triQbL5exF7A==
   dependencies:
-    "@parcel/node-resolver-core" "2.4.0"
-    "@parcel/plugin" "2.4.0"
+    "@parcel/node-resolver-core" "2.7.0"
+    "@parcel/plugin" "2.7.0"
 
-"@parcel/runtime-browser-hmr@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/runtime-browser-hmr/-/runtime-browser-hmr-2.4.0.tgz#369b688ce3ed95109c0fcff9157b678c5ee033db"
-  integrity sha512-swPFtvxGoCA9LEjU/pHPNjxG1l0fte8447zXwRN/AaYrtjNu9Ww117OSKCyvCnE143E79jZOFStodTQGFuH+9A==
+"@parcel/runtime-browser-hmr@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/runtime-browser-hmr/-/runtime-browser-hmr-2.7.0.tgz#aed79b96c0d97021f56f2b7e35bc2d4f70869e26"
+  integrity sha512-PLbMLdclQeYsi2LkilZVGFV1n3y55G1jaBvby4ekedUZjMw3SWdMY2tDxgSDdFWfLCnYHJXdGUQSzGGi1kPzjA==
   dependencies:
-    "@parcel/plugin" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
 
-"@parcel/runtime-js@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/runtime-js/-/runtime-js-2.4.0.tgz#bcf6d540247bda286156a876efdbf9103ce03978"
-  integrity sha512-67OOvmkDdtmgzZVP/EyAzoXhJ/Ug3LUVUt7idg9arun5rdJptqEb3Um3wmH0zjcNa9jMbJt7Kl5x1wA8dJgPYg==
+"@parcel/runtime-js@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/runtime-js/-/runtime-js-2.7.0.tgz#63dd744e96c3554ac86778ffce1c8055e7653fce"
+  integrity sha512-9/YUZTBNrSN2H6rbz/o1EOM0O7I3ZR/x9IDzxjJBD6Mi+0uCgCD02aedare/SNr1qgnbZZWmhpOzC+YgREcfLA==
   dependencies:
-    "@parcel/plugin" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
     nullthrows "^1.1.1"
 
-"@parcel/runtime-react-refresh@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/runtime-react-refresh/-/runtime-react-refresh-2.4.0.tgz#fe305175228c8d19d8fba9bed5542fad549723ce"
-  integrity sha512-flnr+bf06lMZPbXZZLLaFNrPHvYpfuXTVovEghyUW46qLVpaHj33dpsU/LqZplIuHgBp2ibgrKhr/hY9ell68w==
+"@parcel/runtime-react-refresh@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/runtime-react-refresh/-/runtime-react-refresh-2.7.0.tgz#c56b847ef1144264e918339381e040ffe811efc5"
+  integrity sha512-vDKO0rWqRzEpmvoZ4kkYUiSsTxT5NnH904BFPFxKI0wJCl6yEmPuEifmATo73OuYhP6jIP3Qfl1R4TtiDFPJ1Q==
   dependencies:
-    "@parcel/plugin" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
+    react-error-overlay "6.0.9"
     react-refresh "^0.9.0"
 
-"@parcel/runtime-service-worker@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/runtime-service-worker/-/runtime-service-worker-2.4.0.tgz#07375693acbd9a5940e6230409099e0861362cc3"
-  integrity sha512-RgM5QUqW22WzstW03CtV+Oih8VGVuwsf94Cc4hLouU2EAD0NUJgATWbFocZVTZIBTKELAWh2gjpSQDdnL4Ur+A==
+"@parcel/runtime-service-worker@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/runtime-service-worker/-/runtime-service-worker-2.7.0.tgz#352c3722ec635eee2898d9698541e3c1f53e8906"
+  integrity sha512-uD2pAV0yV6+e7JaWH4KVPbG+zRCrxr/OACyS9tIh+Q/R1vRmh8zGM3yhdrcoiZ7tFOnM72vd6xY11eTrUsSVig==
   dependencies:
-    "@parcel/plugin" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
     nullthrows "^1.1.1"
 
 "@parcel/source-map@^2.0.0":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@parcel/source-map/-/source-map-2.0.2.tgz#9aa0b00518cee31d5634de6e9c924a5539b142c1"
-  integrity sha512-NnUrPYLpYB6qyx2v6bcRPn/gVigmGG6M6xL8wIg/i0dP1GLkuY1nf+Hqdf63FzPTqqT7K3k6eE5yHPQVMO5jcA==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@parcel/source-map/-/source-map-2.1.0.tgz#bd47aa0a93ae261436f7c5da40b09856e1a331d5"
+  integrity sha512-E7UOEIof2o89LrKk1agSLmwakjigmEdDp1ZaEdsLVEvq63R/bul4Ij5CT+0ZDcijGpl5tnTbQADY9EyYGtjYgQ==
   dependencies:
     detect-libc "^1.0.3"
 
-"@parcel/transformer-babel@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/transformer-babel/-/transformer-babel-2.4.0.tgz#05d1661293debbccacd11218c3729b7e5a2dfe1c"
-  integrity sha512-iWDa7KzJTMP3HNmrYxiYq/S6redk2qminx/9MwmKIN9jzm8mgts2Lj9lOg/t66YaDGky6JAvw4DhB2qW4ni6yQ==
+"@parcel/transformer-babel@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-babel/-/transformer-babel-2.7.0.tgz#eae98d50a99cd722c3146cd57c479bfb86f537b2"
+  integrity sha512-7iklDXXnKH1530+QbI+e4kIJ+Q1puA1ulRS10db3aUJMj5GnvXGDFwhSZ7+T1ps66QHO7cVO29VlbqiRDarH1Q==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/plugin" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/plugin" "2.7.0"
     "@parcel/source-map" "^2.0.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/utils" "2.7.0"
     browserslist "^4.6.6"
     json5 "^2.2.0"
     nullthrows "^1.1.1"
     semver "^5.7.0"
 
-"@parcel/transformer-css@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/transformer-css/-/transformer-css-2.4.0.tgz#7b7e35ccbe343ff0c768a330712d1756ca7f7b4c"
-  integrity sha512-D2u48LuiQsQvbknABE0wVKFp9r6yCgWrHKEP1J6EJ31c49nXGXDHrpHJJwqq9BvAs/124eBI5mSsehTJyFEMwg==
+"@parcel/transformer-css@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-css/-/transformer-css-2.7.0.tgz#d0879ec04191e5ba3eadb6fc06b7ec0db3f5c3f6"
+  integrity sha512-J4EpWK9spQpXyNCmKK8Xnane0xW/1B/EAmfp7Fiv7g+5yUjY4ODf4KUugvE+Eb2gekPkhOKNHermO2KrX0/PFA==
   dependencies:
-    "@parcel/css" "^1.7.2"
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/plugin" "2.4.0"
+    "@parcel/css" "^1.12.2"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/plugin" "2.7.0"
     "@parcel/source-map" "^2.0.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/utils" "2.7.0"
     browserslist "^4.6.6"
     nullthrows "^1.1.1"
 
-"@parcel/transformer-html@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/transformer-html/-/transformer-html-2.4.0.tgz#9b342f4041d319d9759607be0aec4c1ff4ad7739"
-  integrity sha512-2/8X/o5QaCNVPr4wkxLCUub7v/YVvVN2L5yCEcTatNeFhNg/2iz7P2ekfqOaoDCHWZEOBT1VTwPbdBt+TMM71Q==
+"@parcel/transformer-html@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-html/-/transformer-html-2.7.0.tgz#5397a924fea683ef2c345f36f99f67f0181d6967"
+  integrity sha512-wYJl5rn81W+Rlk9oQwDJcjoVsWVDKyeri84FzmlGXOsg0EYgnqOiG+3MDM8GeZjfuGe5fuoum4eqZeS0WdUHXw==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/hash" "2.4.0"
-    "@parcel/plugin" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/hash" "2.7.0"
+    "@parcel/plugin" "2.7.0"
     nullthrows "^1.1.1"
     posthtml "^0.16.5"
     posthtml-parser "^0.10.1"
     posthtml-render "^3.0.0"
     semver "^5.7.1"
 
-"@parcel/transformer-image@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/transformer-image/-/transformer-image-2.4.0.tgz#3ce2603343aaf045f9dba6cd1b98ee5df060450d"
-  integrity sha512-JZkQvGGoGiD0AVKLIbAYYUWxepMmUaWZ4XXx71MmS/kA7cUDwTZ0CXq63YnSY1m+DX+ClTuTN8mBlwe2dkcGbA==
+"@parcel/transformer-image@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-image/-/transformer-image-2.7.0.tgz#e569ffc426c6060bc4dcccc0347c526930abfba4"
+  integrity sha512-mhi9/R5/ULhCkL2COVIKhNFoLDiZwQgprdaTJr5fnODggVxEX5o7ebFV6KNLMTEkwZUJWoB1hL0ziI0++DtoFA==
   dependencies:
-    "@parcel/plugin" "2.4.0"
-    "@parcel/workers" "2.4.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
+    "@parcel/workers" "2.7.0"
     nullthrows "^1.1.1"
 
-"@parcel/transformer-js@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/transformer-js/-/transformer-js-2.4.0.tgz#e07310ef85a4c14e3d285c3c85e73c581043dfaf"
-  integrity sha512-eeLHFwv3jT3GmIxpLC7B8EXExGK0MFaK91HXljOMh6l8a+GlQYw27MSFQVtoXr0Olx9Uq2uvjXP1+zSsq3LQUQ==
+"@parcel/transformer-js@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-js/-/transformer-js-2.7.0.tgz#1e69295a11bf70d880cdd3846cf89016a74aac50"
+  integrity sha512-mzerR+D4rDomUSIk5RSTa2w+DXBdXUeQrpDO74WCDdpDi1lIl8ppFpqtmU7O6y6p8QsgkmS9b0g/vhcry6CJTA==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/plugin" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/plugin" "2.7.0"
     "@parcel/source-map" "^2.0.0"
-    "@parcel/utils" "2.4.0"
-    "@parcel/workers" "2.4.0"
-    "@swc/helpers" "^0.3.6"
+    "@parcel/utils" "2.7.0"
+    "@parcel/workers" "2.7.0"
+    "@swc/helpers" "^0.4.2"
     browserslist "^4.6.6"
     detect-libc "^1.0.3"
     nullthrows "^1.1.1"
     regenerator-runtime "^0.13.7"
     semver "^5.7.1"
 
-"@parcel/transformer-json@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/transformer-json/-/transformer-json-2.4.0.tgz#575497fb64029071cadcf1309884c0ec4e5def3c"
-  integrity sha512-3nR+d39mbURoXIypDfVCaxpwL65qMV+h8SLD78up2uhaRGklHQfN7GuemR7L+mcVAgNrmwVvZHhyNjdgYwWqqg==
+"@parcel/transformer-json@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-json/-/transformer-json-2.7.0.tgz#c203f74cd445ce93eb833dd88be8127d1eadc6c3"
+  integrity sha512-RQjuxBpYOch+kr4a0zi77KJtOLTPYRM7iq4NN80zKnA0r0dwDUCxZBtaj2l0O0o3R4MMJnm+ncP+cB7XR7dZYA==
   dependencies:
-    "@parcel/plugin" "2.4.0"
+    "@parcel/plugin" "2.7.0"
     json5 "^2.2.0"
 
-"@parcel/transformer-postcss@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/transformer-postcss/-/transformer-postcss-2.4.0.tgz#8b968be108e2e0280c3ae025df29b14e83ec8c50"
-  integrity sha512-ijIa2x+dbKnJhr7zO5WlXkvuj832fDoGksMBk2DX3u2WMrbh2rqVWPpGFsDhESx7EAy38nUoV/5KUdrNqUmCEA==
+"@parcel/transformer-postcss@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-postcss/-/transformer-postcss-2.7.0.tgz#66be4469ae9186c89638ff67ec5808139caaeb8e"
+  integrity sha512-b6RskXBWf0MjpC9qjR2dQ1ZdRnlOiKYseG5CEovWCqM218RtdydFKz7jS+5Gxkb6qBtOG7zGPONXdPe+gTILcA==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/hash" "2.4.0"
-    "@parcel/plugin" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/hash" "2.7.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
     clone "^2.1.1"
     nullthrows "^1.1.1"
     postcss-value-parser "^4.2.0"
     semver "^5.7.1"
 
-"@parcel/transformer-posthtml@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/transformer-posthtml/-/transformer-posthtml-2.4.0.tgz#89d9f2e96a69d52fe56ca9710e9a177a61097f43"
-  integrity sha512-xoL3AzgtVeRRAo6bh0AHAYm9bt1jZ+HiH86/7oARj/uJs6Wd8kXK/DZf6fH+F87hj4e7bnjmDDc0GPVK0lPz1w==
+"@parcel/transformer-posthtml@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-posthtml/-/transformer-posthtml-2.7.0.tgz#67d5761b895574edb771f7ab1b24ec80775f58bd"
+  integrity sha512-cP8YOiSynWJ1ycmBlhnnHeuQb2cwmklZ+BNyLUktj5p78kDy2de7VjX+dRNRHoW4H9OgEcSF4UEfDVVz5RYIhw==
   dependencies:
-    "@parcel/plugin" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
     nullthrows "^1.1.1"
     posthtml "^0.16.5"
     posthtml-parser "^0.10.1"
     posthtml-render "^3.0.0"
     semver "^5.7.1"
 
-"@parcel/transformer-raw@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/transformer-raw/-/transformer-raw-2.4.0.tgz#ee65c296073ce3876b1380be20721105e3a6d9c7"
-  integrity sha512-fciFbNrzj0kLlDgr6OsI0PUv414rVygDWAsgbCCq4BexDkuemMs9f9FjMctx9B2VZlctE8dTT4RGkuQumTIpUg==
+"@parcel/transformer-raw@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-raw/-/transformer-raw-2.7.0.tgz#d6d8b94d1b33efc3dbf748ec1954c8917a2e1566"
+  integrity sha512-sDnItWCFSDez0izK1i5cgv+kXzZTbcJh4rNpVIgmE1kBLvAz608sqgcCkavb2wVJIvLesxYM+5G4p1CwkDlZ1g==
   dependencies:
-    "@parcel/plugin" "2.4.0"
+    "@parcel/plugin" "2.7.0"
 
-"@parcel/transformer-react-refresh-wrap@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/transformer-react-refresh-wrap/-/transformer-react-refresh-wrap-2.4.0.tgz#23d1a39acddbbe71802c962f88ef376548c94cf8"
-  integrity sha512-9+f6sGOWkf0jyUQ1CuFWk+04Mq3KTOCU9kRiwCHX1YdUCv5uki6r9XUSpqiYodrV+L6w9CCwLvGMLCDHxtCxMg==
+"@parcel/transformer-react-refresh-wrap@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-react-refresh-wrap/-/transformer-react-refresh-wrap-2.7.0.tgz#e206b529d4a3444e14ba329d3323c5be3ded25d2"
+  integrity sha512-1vRmIJzyBA1nIiXTAU6tZExq2FvJj/2F0ft6KDw8GYPv0KjmdiPo/PmaZ7JeSVOM6SdXQIQCbTmp1vkMP7DtkA==
   dependencies:
-    "@parcel/plugin" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/plugin" "2.7.0"
+    "@parcel/utils" "2.7.0"
     react-refresh "^0.9.0"
 
-"@parcel/transformer-svg@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/transformer-svg/-/transformer-svg-2.4.0.tgz#07f7a19e7da1ec115b2fb49e364c18cc0f445ddf"
-  integrity sha512-D+yzVtSxtQML3d26fd/g4E/xYW68+OMbMUVLXORtoYMU42fnXQkJP6jGOdqy8Td+WORNY7EwVtQnESLwhBmolw==
+"@parcel/transformer-svg@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-svg/-/transformer-svg-2.7.0.tgz#c2a7d10bdbc6aeb2ae7ef85db5b583574807071c"
+  integrity sha512-ioER37zceuuE+K6ZrnjCyMUWEnv+63hIAFResc1OXxRhyt+7kzMz9ZqK0Mt6QMLwl1dxhkLmrU41n9IxzKZuSQ==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/hash" "2.4.0"
-    "@parcel/plugin" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/hash" "2.7.0"
+    "@parcel/plugin" "2.7.0"
     nullthrows "^1.1.1"
     posthtml "^0.16.5"
     posthtml-parser "^0.10.1"
     posthtml-render "^3.0.0"
     semver "^5.7.1"
 
-"@parcel/types@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.4.0.tgz#e900ba9d9c14cc8bc783724e7c66f04b87965b28"
-  integrity sha512-nysGIbBEnp+7R+tKTysdcTFOZDTCodsiXFeAhYQa5bhiOnG1l9gzhxQnE2OsdsgvMm40IOsgKprqvM/DbdLfnQ==
+"@parcel/types@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.7.0.tgz#c89e95964339324c1931ef7a17906a72291d6b73"
+  integrity sha512-+dhXVUnseTCpJvBTGMp0V6X13z6O/A/+CUtwEpMGZ8XSmZ4Gk44GvaTiBOp0bJpWG4fvCKp+UmC8PYbrDiiziw==
   dependencies:
-    "@parcel/cache" "2.4.0"
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/fs" "2.4.0"
-    "@parcel/package-manager" "2.4.0"
+    "@parcel/cache" "2.7.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/fs" "2.7.0"
+    "@parcel/package-manager" "2.7.0"
     "@parcel/source-map" "^2.0.0"
-    "@parcel/workers" "2.4.0"
+    "@parcel/workers" "2.7.0"
     utility-types "^3.10.0"
 
-"@parcel/utils@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/utils/-/utils-2.4.0.tgz#47f979e10f82caac160a6526db2f31c5713ca0d7"
-  integrity sha512-sdNo+mZqDZT8LJYB6WWRKa4wFVZcK6Zb5Jh6Du76QvXXwHbPIQNZgJBb6gd/Rbk4GLOp2tW7MnBfq6zP9E9E2g==
-  dependencies:
-    "@parcel/codeframe" "2.4.0"
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/hash" "2.4.0"
-    "@parcel/logger" "2.4.0"
-    "@parcel/markdown-ansi" "2.4.0"
+"@parcel/utils@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/utils/-/utils-2.7.0.tgz#f795d0f43efdd449ab0bbfac3632cd7f3ec0e4dd"
+  integrity sha512-jNZ5bIGg1r1RDRKi562o4kuVwnz+XJ2Ie3b0Zwrqwvgfj6AbRFIKzDd+h85dWWmcDYzKUbHp11u6VJl1u8Vapg==
+  dependencies:
+    "@parcel/codeframe" "2.7.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/hash" "2.7.0"
+    "@parcel/logger" "2.7.0"
+    "@parcel/markdown-ansi" "2.7.0"
     "@parcel/source-map" "^2.0.0"
     chalk "^4.1.0"
 
@@ -3597,22 +3675,22 @@
     node-addon-api "^3.2.1"
     node-gyp-build "^4.3.0"
 
-"@parcel/workers@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@parcel/workers/-/workers-2.4.0.tgz#393d5fe7942220b8846f626688e341c1be2bf1fa"
-  integrity sha512-eSFyvEoXXPgFzQfKIlpkUjpHfIbezUCRFTPKyJAKCxvU5DSXOpb1kz5vDESWQ4qTZXKnrKvxS1PPWN6bam9z0g==
+"@parcel/workers@2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@parcel/workers/-/workers-2.7.0.tgz#d74955d361337127227912a5ab26cb3079ebfc78"
+  integrity sha512-99VfaOX+89+RaoTSyH9ZQtkMBFZBFMvJmVJ/GeJT6QCd2wtKBStTHlaSnQOkLD/iRjJCNwV2xpZmm8YkTwV+hg==
   dependencies:
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/logger" "2.4.0"
-    "@parcel/types" "2.4.0"
-    "@parcel/utils" "2.4.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/logger" "2.7.0"
+    "@parcel/types" "2.7.0"
+    "@parcel/utils" "2.7.0"
     chrome-trace-event "^1.0.2"
     nullthrows "^1.1.1"
 
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.6.tgz#9ced74cb23dae31ab385f775e237ce4c50422a1d"
-  integrity sha512-IIWxofIYt/AbMwoeBgj+O2aAXLrlCQVg+A4a2zfpXFNHgP8o8rvi3v+oe5t787Lj+KXlKOh8BAiUp9bhuELXhg==
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz#58f8217ba70069cc6a73f5d7e05e85b458c150e2"
+  integrity sha512-bcKCAzF0DV2IIROp9ZHkRJa6O4jy7NlnHdWL3GmcUxYWNjLXkK5kfELELwEfSP5hXPfVL/qOGMAROuMQb9GG8Q==
   dependencies:
     ansi-html-community "^0.0.8"
     common-path-prefix "^3.0.0"
@@ -3911,24 +3989,11 @@
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
   integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
+
 "@react-stately/checkbox@3.2.0", "@react-stately/checkbox@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.2.0.tgz#6c718441a6c1058c75c243a5712d2dc32d93392c"
   integrity sha512-nVO/asz7MTF5nLJcMMq5KgNlk4npckq+7nQvEVW6pyob5r2m7Lvd+Zhl4oKT0WtTIzg31VB6yRew1czKx/SUpA==
-"@react-stately/checkbox@3.1.0", "@react-stately/checkbox@^3.1.0":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/checkbox/-/checkbox-3.1.0.tgz#637fc0119bd567f0955cb99f9ef88810b211ea61"
-  integrity sha512-K4c2etj5DCNjvNFP7PaKZxKlRwX/DmpcJzhCQX29jmZJtLsrjsVhLrVNr59NleHbHVsOifF1GwbPlVUKbL5Y0w==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-stately/toggle" "^3.3.0"
-    "@react-stately/utils" "^3.5.0"
-    "@react-types/checkbox" "^3.3.0"
-
-"@react-stately/collections@3.4.0", "@react-stately/collections@^3.4.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@react-stately/collections/-/collections-3.4.0.tgz#0622b6033e033c9b8c2dd33c173293916f8e7b6b"
-  integrity sha512-ODS/Nm5OH4XqLugKII7jGc698XnaQEJo423jKa0jhyIpSnviqFRpXRbrPiFPAcaE3S4d/pp20HdDotWZAbM8Ww==
   dependencies:
     "@babel/runtime" "^7.6.2"
     "@react-stately/toggle" "^3.4.0"
@@ -3952,7 +4017,6 @@
     "@react-types/shared" "^3.14.0"
 
 "@react-stately/grid@^3.3.0":
-"@react-stately/menu@3.3.0", "@react-stately/menu@^3.3.0
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@react-stately/grid/-/grid-3.3.0.tgz#f55d6bd74b74a81d35282cd2b552ee2ae2b9bbbf"
   integrity sha512-30z4Kki5QWZvR22f3UrA18eMDOcXmQFzAq5pHbRs1LvxJAaqeAD2KzCT70MCgoA5XzyiOrvIPrKTBRf48du45w==
@@ -4131,9 +4195,9 @@
     "@react-types/shared" "^3.14.0"
 
 "@rushstack/eslint-patch@^1.0.6":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.1.tgz#782fa5da44c4f38ae9fd38e9184b54e451936118"
-  integrity sha512-BUyKJGdDWqvWC5GEhyOiUrGNi9iJUr4CU0O2WxJL6QJhHeeA/NVBalH+FeK0r/x/W0rPymXt5s78TDS7d6lCwg==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz#0c8b74c50f29ee44f423f7416829c0bf8bb5eb27"
+  integrity sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==
 
 "@sideway/address@^4.1.3":
   version "4.1.4"
@@ -4172,18 +4236,18 @@
   integrity sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==
 
 "@storybook/addon-a11y@^6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-6.5.3.tgz#ea6267476372685e20188cf3be3f5a2f1807534c"
-  integrity sha512-tPZ9aBP1/y7HL8BalKXhs0chyi3D//JUVtXlKIwVS+VYAnFRTMI+f3I2GsgXvulkAEHZLtOwZRn7pWhO51J4ow==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/channels" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-6.5.10.tgz#a907cbd3f1889ba367828435a58ecc9dac42f6ba"
+  integrity sha512-BnDbLg7YEAX1aEyiB+gDFYMXIbiSFH/M0CdwPCq7T7o8cqULKOHtQkndMja1soMxsqHAVH8AGvVVZ8VlaxaJ3Q==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/channels" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/theming" "6.5.3"
+    "@storybook/theming" "6.5.10"
     axe-core "^4.2.0"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -4193,18 +4257,18 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-actions@6.5.3", "@storybook/addon-actions@^6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.5.3.tgz#1e47bcfc5b215f483aef9d7f22e3619cd354af8c"
-  integrity sha512-OYfG6dDFoNIPmtQ5vXum7m7U5MDg6rlwkaUpV3MkMVCnSAco0/GGRdsYBVO+fpfFFVxRUi3QFEv7xI0xyX2oiQ==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+"@storybook/addon-actions@6.5.10", "@storybook/addon-actions@^6.5.3":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.5.10.tgz#83ec807a899e0412cf98037647f256c45cc32bf5"
+  integrity sha512-vpCnEu81fmtYzOf0QsRYoDuf9wXgVVl2VysE1dWRebRhIUDU0JurrthTnw322e38D4FzaoNGqZE7wnBYBohzZA==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/theming" "6.5.3"
+    "@storybook/theming" "6.5.10"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
     global "^4.4.0"
@@ -4218,18 +4282,18 @@
     util-deprecate "^1.0.2"
     uuid-browser "^3.1.0"
 
-"@storybook/addon-backgrounds@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.3.tgz#dbe357d88c2844aef5c3c85e055c1c954721a109"
-  integrity sha512-U8ic8fR7kACRvvSaElFaCOgb8ugU2NCtpv2CC3VzxCVWDCdaYivgpXQrvHe0GLYhIrySqgm1wP7q73oILl+Qcg==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+"@storybook/addon-backgrounds@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.10.tgz#9ab2d2165fe35d265d9d6013fc174fa8528a272f"
+  integrity sha512-5uzQda3dh891h7BL8e9Ymk7BI+QgkkzDJXuA4mHjOXfIiD3S3efhJI8amXuBC2ZpIr6zmVit0MqZVyoVve46cQ==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/theming" "6.5.3"
+    "@storybook/theming" "6.5.10"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
@@ -4237,47 +4301,47 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-controls@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.5.3.tgz#0f398b1c1898bf735bbd228f04a0ddfe1c281807"
-  integrity sha512-90dTS2ySo/u8t/UTY1snsfAJCszvJKW8FNbzxF1c+JwvErb6hrHq0JOSmFLOeRqPuvkKKB8q83vp6A6fXOU+gQ==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/core-common" "6.5.3"
+"@storybook/addon-controls@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.5.10.tgz#275ddcd0f4dc1a107777b425417a8f252f52a91e"
+  integrity sha512-lC2y3XcolmQAJwFurIyGrynAHPWmfNtTCdu3rQBTVGwyxCoNwdOOeC2jV0BRqX2+CW6OHzJr9frNWXPSaZ8c4w==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/core-common" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/node-logger" "6.5.3"
-    "@storybook/store" "6.5.3"
-    "@storybook/theming" "6.5.3"
+    "@storybook/node-logger" "6.5.10"
+    "@storybook/store" "6.5.10"
+    "@storybook/theming" "6.5.10"
     core-js "^3.8.2"
     lodash "^4.17.21"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.5.3.tgz#6db38b7721245193d2ceaf788844f5a110d1e8bc"
-  integrity sha512-MC1Bwamw8lQvRMmGKsf4UcyNdQCYgpAB2o9m4R0EPA5byTkcEfAXkAwSP8atlP0/wQTjrwvyVgQuhchHmxnR0Q==
+"@storybook/addon-docs@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.5.10.tgz#dde18b5659e8033651e139a231a7f69306433b92"
+  integrity sha512-1kgjo3f0vL6GN8fTwLL05M/q/kDdzvuqwhxPY/v5hubFb3aQZGr2yk9pRBaLAbs4bez0yG0ASXcwhYnrEZUppg==
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.12.12"
     "@babel/preset-env" "^7.12.11"
     "@jest/transform" "^26.6.2"
     "@mdx-js/react" "^1.6.22"
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/core-common" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/core-common" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/docs-tools" "6.5.3"
-    "@storybook/mdx1-csf" canary
-    "@storybook/node-logger" "6.5.3"
-    "@storybook/postinstall" "6.5.3"
-    "@storybook/preview-web" "6.5.3"
-    "@storybook/source-loader" "6.5.3"
-    "@storybook/store" "6.5.3"
-    "@storybook/theming" "6.5.3"
+    "@storybook/docs-tools" "6.5.10"
+    "@storybook/mdx1-csf" "^0.0.1"
+    "@storybook/node-logger" "6.5.10"
+    "@storybook/postinstall" "6.5.10"
+    "@storybook/preview-web" "6.5.10"
+    "@storybook/source-loader" "6.5.10"
+    "@storybook/store" "6.5.10"
+    "@storybook/theming" "6.5.10"
     babel-loader "^8.0.0"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -4290,36 +4354,36 @@
     util-deprecate "^1.0.2"
 
 "@storybook/addon-essentials@^6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.5.3.tgz#1bd33d5265288d24049e5fd63e78a99d67fdbe50"
-  integrity sha512-ZVps1kFMB4OuKRS9vIo8u07u04zvU84jP4B7c5TcH/WxFbwPW9I9ePBcCv+QmkdhDTb3TGWRWQqv5zs4cnQ1YA==
-  dependencies:
-    "@storybook/addon-actions" "6.5.3"
-    "@storybook/addon-backgrounds" "6.5.3"
-    "@storybook/addon-controls" "6.5.3"
-    "@storybook/addon-docs" "6.5.3"
-    "@storybook/addon-measure" "6.5.3"
-    "@storybook/addon-outline" "6.5.3"
-    "@storybook/addon-toolbars" "6.5.3"
-    "@storybook/addon-viewport" "6.5.3"
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/core-common" "6.5.3"
-    "@storybook/node-logger" "6.5.3"
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.5.10.tgz#d56f0f972e3bd5eae6c79b2126f510c5c020b62d"
+  integrity sha512-PT2aiR4vgAyB0pl3HNBUa4/a7NDRxASxAazz7zt9ZDirkipDKfxwdcLeRoJzwSngVDWEhuz5/paN5x4eNp4Hww==
+  dependencies:
+    "@storybook/addon-actions" "6.5.10"
+    "@storybook/addon-backgrounds" "6.5.10"
+    "@storybook/addon-controls" "6.5.10"
+    "@storybook/addon-docs" "6.5.10"
+    "@storybook/addon-measure" "6.5.10"
+    "@storybook/addon-outline" "6.5.10"
+    "@storybook/addon-toolbars" "6.5.10"
+    "@storybook/addon-viewport" "6.5.10"
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/core-common" "6.5.10"
+    "@storybook/node-logger" "6.5.10"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
 "@storybook/addon-links@^6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.5.3.tgz#5eae9855e19cc03548aa6655756886c26557a175"
-  integrity sha512-FOcrHbEi8Bw6QE3hzO0vtnJVFj2iIiQk0thEdkhq+Pnn5iZ6VmDoctHPwc2wuyM7BIKDlROaK0VRXYLCx6uiBg==
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.5.10.tgz#f66568fbc84b942032ac2de85f799d69fcf77922"
+  integrity sha512-r3WzYIPz7WjHiaPObC2Tg6bHuZRBb/Kt/X+Eitw+jTqBel7ksvkO36tn81q8Eyj61qIdNQmUWAaX/0aewT0kLA==
   dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+    "@storybook/addons" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/router" "6.5.3"
+    "@storybook/router" "6.5.10"
     "@types/qs" "^6.9.5"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -4328,30 +4392,30 @@
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-measure@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-6.5.3.tgz#7a27082d7863981924362fd15022521b0722048f"
-  integrity sha512-8auVdpM66+qaam3KGmfZZgSQ/jJIm6aMeEzi+HX48b2xVa4vv9W9/ZpJp9fc3K2349+BR5K3nzLMObdFr1Yjew==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+"@storybook/addon-measure@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-6.5.10.tgz#afac72a15d927f9f2119e2218017d757a8c8c6a4"
+  integrity sha512-ss7L1H5K5hXygDIoVwj+QyVXbve5V67x7CofLiLCgQYuJzfO16+sPGjiTGWMpTb4ijox2uKWnTkpilt5bCjXgw==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/addon-outline@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-6.5.3.tgz#2560912eddda92dc827448268176e9b3ac1ef308"
-  integrity sha512-QVSsTOs813Tl404IcWTxdzM+gAIiq46LuH11Re1cMwKrnuOvfHtbLQ4x2n1aTy+mTuWxNymaHwX2Aqilr0fqJA==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+"@storybook/addon-outline@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-6.5.10.tgz#a49164697344de1bd11d35a5ce21e59afc0dd19c"
+  integrity sha512-AjdaeQ+/iBKmGrAqRW4niwMB6AkgGnYmSzVs5Cf6F/Sb4Dp+vzgLNOwLABD9qs8Ri8dvHl5J4QpVwQKUhYZaOQ==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -4359,17 +4423,17 @@
     ts-dedent "^2.0.0"
 
 "@storybook/addon-storysource@^6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-6.5.3.tgz#b707b1334bf9ade33ae2b1eb64b6d240c8317848"
-  integrity sha512-zZdDFt0FEHFBkdZ/BGtkgkCAJpfH1i0VdmXqIAUxfv+XZyYVjD6Cf9CLtR088pZTmySD+MdEC5dJLwcIy/1Wbg==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/router" "6.5.3"
-    "@storybook/source-loader" "6.5.3"
-    "@storybook/theming" "6.5.3"
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-storysource/-/addon-storysource-6.5.10.tgz#620619088657f247023d454dbaff3a2e1ccd7537"
+  integrity sha512-DM3UcbdqPfTBcpXr1AuzAs0DDTBnXMpXvOEkdoTTtGpbPIyA+J5KWeW1pAWqZlzI4k0UemJrAm2G6n/gGGBUiQ==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/router" "6.5.10"
+    "@storybook/source-loader" "6.5.10"
+    "@storybook/theming" "6.5.10"
     core-js "^3.8.2"
     estraverse "^5.2.0"
     loader-utils "^2.0.0"
@@ -4377,65 +4441,65 @@
     react-syntax-highlighter "^15.4.5"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addon-toolbars@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.5.3.tgz#1a379bae5217ddbcbf37948867211c755d264c70"
-  integrity sha512-wQxDUQASrpdGJouo6WsC840JwaAQkgV4nuCmuxyqbL6yJ7HNyS7mbBoJzfe8kXWOzSN2MM1lP4gOlZuGH4m05g==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/theming" "6.5.3"
+"@storybook/addon-toolbars@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.5.10.tgz#750e6c7fa50a54dac7fe5df7b7c239fb02a4456c"
+  integrity sha512-S0Ljc6Wv+bPbx2e0iTveJ6bBDqjsemu+FZD4qDLsHreoI7DAcqyrF5Def1l8xNohixIVpx8dQpYXRtyzNlXekg==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/theming" "6.5.10"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addon-viewport@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.5.3.tgz#759d0f5e276a77e032bdcd111162d1944f875a81"
-  integrity sha512-jzHGACC40g/jWXmDIdMyQk5EepNoHhOLFWxUpt12kSgkx0s8PL6PHAOn7p0Yh8JOp0hwHxZJXnYch6yEEgpBTA==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/core-events" "6.5.3"
-    "@storybook/theming" "6.5.3"
+"@storybook/addon-viewport@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.5.10.tgz#4c6151d7e8177b07df8dcb4c61e842dac949215b"
+  integrity sha512-RFMd+4kZljyuJjR9OJ2bFXHrSG7VTi5FDZYWEU+4W1sBxzC+JhnVnUP+HJH3gUxEFIRQC5neRzwWRE9RUUoALQ==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/core-events" "6.5.10"
+    "@storybook/theming" "6.5.10"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
     prop-types "^15.7.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addons@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.3.tgz#43dd276417edf74be0c465b968d35795f8cd994d"
-  integrity sha512-gzzkxZ7R4+EaEzIEBbTWmkA55JDEDQrDjg3nNY/SJklnRigYdStz41KSPx6HGkF2CaI5BYVd5vZCawYvG16gyg==
+"@storybook/addons@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.10.tgz#bff2f8fb8453e9df04fa6dbc41341fd05f4cdeba"
+  integrity sha512-VD4tBCQ23PkSeDoxuHcKy0RfhIs3oMYjBacOZx7d0bvOzK9WjPyvE2ysDAh7r/ceqnwmWHAScIpE+I1RU7gl+g==
   dependencies:
-    "@storybook/api" "6.5.3"
-    "@storybook/channels" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+    "@storybook/api" "6.5.10"
+    "@storybook/channels" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/router" "6.5.3"
-    "@storybook/theming" "6.5.3"
+    "@storybook/router" "6.5.10"
+    "@storybook/theming" "6.5.10"
     "@types/webpack-env" "^1.16.0"
     core-js "^3.8.2"
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
-"@storybook/api@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.3.tgz#f4c468f348bf6ac65dc571f3e65d67302323312c"
-  integrity sha512-neVW47ssdG3MqwNwTLjlifS/u6zGUkkcK7G/PC1tnQPP9Zc97BStIqS1RnPGie1iawIAT5ZJQefPGJMneSTBKA==
+"@storybook/api@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.10.tgz#215623844648f0da2ac646fdcdd1345c2e1a8490"
+  integrity sha512-AkmgSPNEGdKp4oZA4KQ+RJsacw7GwfvjsVDnCkcXqS9zmSr/RNL0fhpcd60KKkmx/hGKPTDFpK3ZayxDrJ/h4A==
   dependencies:
-    "@storybook/channels" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+    "@storybook/channels" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/router" "6.5.3"
+    "@storybook/router" "6.5.10"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.5.3"
+    "@storybook/theming" "6.5.10"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
     global "^4.4.0"
@@ -4447,28 +4511,28 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/builder-webpack4@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.5.3.tgz#5e99a009c0132380620a1d177a69a5f352ef6d29"
-  integrity sha512-zhZ879FH8XDs8TRkXN29pGMR2rJrKQYdRn19XTsBt9MlRI8ALFClGixYBsUF/Fa74LAWF2roL5dSt7qDyBQULQ==
+"@storybook/builder-webpack4@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.5.10.tgz#79e95323577a37349ab3c81193fa249ac5c50173"
+  integrity sha512-AoKjsCNoQQoZXYwBDxO8s+yVEd5FjBJAaysEuUTHq2fb81jwLrGcEOo6hjw4jqfugZQIzYUEjPazlvubS78zpw==
   dependencies:
     "@babel/core" "^7.12.10"
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/channel-postmessage" "6.5.3"
-    "@storybook/channels" "6.5.3"
-    "@storybook/client-api" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/core-common" "6.5.3"
-    "@storybook/core-events" "6.5.3"
-    "@storybook/node-logger" "6.5.3"
-    "@storybook/preview-web" "6.5.3"
-    "@storybook/router" "6.5.3"
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/channel-postmessage" "6.5.10"
+    "@storybook/channels" "6.5.10"
+    "@storybook/client-api" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/core-common" "6.5.10"
+    "@storybook/core-events" "6.5.10"
+    "@storybook/node-logger" "6.5.10"
+    "@storybook/preview-web" "6.5.10"
+    "@storybook/router" "6.5.10"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.3"
-    "@storybook/theming" "6.5.3"
-    "@storybook/ui" "6.5.3"
+    "@storybook/store" "6.5.10"
+    "@storybook/theming" "6.5.10"
+    "@storybook/ui" "6.5.10"
     "@types/node" "^14.0.10 || ^16.0.0"
     "@types/webpack" "^4.41.26"
     autoprefixer "^9.8.6"
@@ -4501,26 +4565,26 @@
     webpack-virtual-modules "^0.2.2"
 
 "@storybook/builder-webpack5@^6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-6.5.3.tgz#1fd01ea93b169afccafcc4f9d6fb15ad992e6ffd"
-  integrity sha512-noVd6eJE7pmBl886TahPuUdLiVkyE9ecqQhcltnZfMBCuJXeEev0/E642HRp5P2hE6uE2pBzkTAy8gaHExeY+Q==
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-6.5.10.tgz#de78a8a262410bbe65eecc62f2beaed1fe44dd5d"
+  integrity sha512-Hcsm/TzGRXHndgQCftt+pzI7GQJRqAv8A8ie5b3aFcodhJfK0qzZsQD4Y4ZWxXh1I/xe5t74Kl2qUJ40PX+geA==
   dependencies:
     "@babel/core" "^7.12.10"
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/channel-postmessage" "6.5.3"
-    "@storybook/channels" "6.5.3"
-    "@storybook/client-api" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/core-common" "6.5.3"
-    "@storybook/core-events" "6.5.3"
-    "@storybook/node-logger" "6.5.3"
-    "@storybook/preview-web" "6.5.3"
-    "@storybook/router" "6.5.3"
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/channel-postmessage" "6.5.10"
+    "@storybook/channels" "6.5.10"
+    "@storybook/client-api" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/core-common" "6.5.10"
+    "@storybook/core-events" "6.5.10"
+    "@storybook/node-logger" "6.5.10"
+    "@storybook/preview-web" "6.5.10"
+    "@storybook/router" "6.5.10"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.3"
-    "@storybook/theming" "6.5.3"
+    "@storybook/store" "6.5.10"
+    "@storybook/theming" "6.5.10"
     "@types/node" "^14.0.10 || ^16.0.0"
     babel-loader "^8.0.0"
     babel-plugin-named-exports-order "^0.0.2"
@@ -4544,51 +4608,51 @@
     webpack-hot-middleware "^2.25.1"
     webpack-virtual-modules "^0.4.1"
 
-"@storybook/channel-postmessage@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.5.3.tgz#c3762b92e87cb15e3a3c50d8a23ddede80a1e6d0"
-  integrity sha512-1vsKhFuTX53VmRm4ZKae+9z6FciSTyywZJ5cYmH2nTRWqW5GOm3UndixHzXpddVM1DWdEH4jJ/Cn15SzPRWiPg==
+"@storybook/channel-postmessage@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.5.10.tgz#be8971b4b7f91b664bb2c6965fdfb073d541a03e"
+  integrity sha512-t9PTA0UzFvYa3IlOfpBOolfrRMPTjUMIeCQ6FNyM0aj5GqLKSvoQzP8NeoRpIrvyf6ljFKKdaMaZ3fiCvh45ag==
   dependencies:
-    "@storybook/channels" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+    "@storybook/channels" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     core-js "^3.8.2"
     global "^4.4.0"
     qs "^6.10.0"
     telejson "^6.0.8"
 
-"@storybook/channel-websocket@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.5.3.tgz#3403d30c107763db311b084a0f6586c755ca64f0"
-  integrity sha512-Q1XCqtVMZFP1WG+OtzJ5l0Ip8umzBOkVmH3SH+DDU+o+MCSSfXKbw7UnbDUaZHzOHuFq55WaXVEnzRkeydI9rQ==
+"@storybook/channel-websocket@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.5.10.tgz#bd1316a9b555229b215e5054a76b57c503dd8adc"
+  integrity sha512-RTXMZbMWCS3xU+4GVIdfnUXsKcwg/WTozy88/5OxaKjGw6KgRedqLAQJKJ6Y5XlnwIcWelirkHj/COwTTXhbPg==
   dependencies:
-    "@storybook/channels" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
+    "@storybook/channels" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
     core-js "^3.8.2"
     global "^4.4.0"
     telejson "^6.0.8"
 
-"@storybook/channels@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.3.tgz#d1c94f1760a27026d16705ab28a82e582cf9f2d5"
-  integrity sha512-wpxnMt5clUy+04o+I5LVMoQkYt7nc0e5PDz+pAtlNOvQaoFvlC7oQqsVYxxs1cYm6ZGqAJcsfecI5COtnQfT1w==
+"@storybook/channels@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.10.tgz#fca5b0d1ea8d30b022e805301ed436407c867ac4"
+  integrity sha512-lo26YZ6kWpHXLhuHJF4P/bICY7jD/rXEZqReKtGOSk1Lv99/xvG6pqmcy3hWLf3v3Dy/8otjRPSR7izFVIIZgQ==
   dependencies:
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-api@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.5.3.tgz#ca7b5ddb9e745b1485d8946dd14d1e81173dd712"
-  integrity sha512-BxksIgSDkkt9muA41VbsSB96/u3HJAWuOJw+GCzt0yHmlBgfb3+GpQOJUDqTluWQlojg0DHJhAKgYKbejyEpIA==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/channel-postmessage" "6.5.3"
-    "@storybook/channels" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+"@storybook/client-api@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.5.10.tgz#0bc3f68ce014ce1ffd560472a893ba04be370f09"
+  integrity sha512-3wBWZl3NvMFgMovgEh+euiARAT2FXzpvTF4Q1gerGMNNDlrGxHnFvSuy4FHg/irtOGLa4yLz43ULFbYtpKw0Lg==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/channel-postmessage" "6.5.10"
+    "@storybook/channels" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/store" "6.5.3"
+    "@storybook/store" "6.5.10"
     "@types/qs" "^6.9.5"
     "@types/webpack-env" "^1.16.0"
     core-js "^3.8.2"
@@ -4603,44 +4667,43 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-logger@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.3.tgz#4794e87d85c03aa6e38efc4c5775b9680cc1bf23"
-  integrity sha512-gUJUkDzQdOQBfAQSJffKlZQ6ueUANjTN6u4xA/FIfJM7+I5N43UuS3dFGEjcnZISS5sj7765ct2aZinMzf1NNQ==
+"@storybook/client-logger@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.10.tgz#cfea823a5b8444409daa74f854c5d05367986b34"
+  integrity sha512-/xA0MHOevXev68hyLMQw8Qo8KczSIdXOxliAgrycMTkDmw5eKeA8TP7B8zP3wGuq/e3MrdD9/8MWhb/IQBNC3w==
   dependencies:
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/components@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.3.tgz#8d643d2d89c298e5e5c2957f7ffb171ba3288ecf"
-  integrity sha512-vYTsg9ADzkPeTsmN1bm351wGqq+oyb8SrAJzLe+FXN+dujIIA9sGEQb6eUZdGe121RDgTyFMO2zKurcJNnGnxQ==
+"@storybook/components@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.10.tgz#268e1269bc3d262f7dcec13f96c3b844919687b8"
+  integrity sha512-9OhgB8YQfGwOKjo/N96N5mrtJ6qDVVoEM1zuhea32tJUd2eYf0aSWpryA9VnOM0V1q/8DAoCg5rPBMYWMBU5uw==
   dependencies:
-    "@storybook/client-logger" "6.5.3"
+    "@storybook/client-logger" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/theming" "6.5.3"
-    "@types/react-syntax-highlighter" "11.0.5"
+    "@storybook/theming" "6.5.10"
     core-js "^3.8.2"
+    memoizerific "^1.11.3"
     qs "^6.10.0"
-    react-syntax-highlighter "^15.4.5"
     regenerator-runtime "^0.13.7"
     util-deprecate "^1.0.2"
 
-"@storybook/core-client@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.5.3.tgz#9c689a5f6797dc7afe60183c29502e496bbd0a07"
-  integrity sha512-tsyXs+J7e210lRWminzyQU5uvbiKq9XrzsMs6feGyCE3kjZbBCj7RIgd/KxStVT/Ssim6BeTXHfnlLTxLbq5pQ==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/channel-postmessage" "6.5.3"
-    "@storybook/channel-websocket" "6.5.3"
-    "@storybook/client-api" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+"@storybook/core-client@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.5.10.tgz#90c86923236c8efff33d454a0dc552f6df4346b1"
+  integrity sha512-THsIjNrOrampTl0Lgfjvfjk1JnktKb4CQLOM80KpQb4cjDqorBjJmErzUkUQ2y3fXvrDmQ/kUREkShET4XEdtA==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/channel-postmessage" "6.5.10"
+    "@storybook/channel-websocket" "6.5.10"
+    "@storybook/client-api" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/preview-web" "6.5.3"
-    "@storybook/store" "6.5.3"
-    "@storybook/ui" "6.5.3"
+    "@storybook/preview-web" "6.5.10"
+    "@storybook/store" "6.5.10"
+    "@storybook/ui" "6.5.10"
     airbnb-js-shims "^2.2.1"
     ansi-to-html "^0.6.11"
     core-js "^3.8.2"
@@ -4652,10 +4715,10 @@
     unfetch "^4.2.0"
     util-deprecate "^1.0.2"
 
-"@storybook/core-common@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.3.tgz#5892e1ebc77f11b1058b716cb514bc2d1d5636ef"
-  integrity sha512-A0WJDm/Eo2eP8CZeAQPo8oep+Pbbm/uU6Gl/8GsvK7AVtDv/Sm/kyAWcvqMx5ovnZ7A+qYYjvHr90EZuDoltPg==
+"@storybook/core-common@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.10.tgz#6b93449548b0890f5c68d89f0ca78e092026182c"
+  integrity sha512-Bx+VKkfWdrAmD8T51Sjq/mMhRaiapBHcpG4cU5bc3DMbg+LF2/yrgqv/cjVu+m5gHAzYCac5D7gqzBgvG7Myww==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "^7.12.1"
@@ -4679,7 +4742,7 @@
     "@babel/preset-react" "^7.12.10"
     "@babel/preset-typescript" "^7.12.7"
     "@babel/register" "^7.12.1"
-    "@storybook/node-logger" "6.5.3"
+    "@storybook/node-logger" "6.5.10"
     "@storybook/semver" "^7.3.2"
     "@types/node" "^14.0.10 || ^16.0.0"
     "@types/pretty-hrtime" "^1.0.0"
@@ -4708,30 +4771,30 @@
     util-deprecate "^1.0.2"
     webpack "4"
 
-"@storybook/core-events@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.3.tgz#57fb45187d6d60403149d9b16953989897e2bd6e"
-  integrity sha512-DTWFjXJIx+sZndv3lsJohVEJoUL5MgtkSeeKaypkJmZm9kXkylhA0NnA07CMRE6GMqCWw6NYGSe+qOEGsHj5ig==
+"@storybook/core-events@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.10.tgz#66d87c8ea18db8e448018a16a3d0198ddbcbc683"
+  integrity sha512-EVb1gO1172klVIAABLOoigFMx0V88uctY0K/qVCO8n6v+wd2+0Ccn63kl+gTxsAC3WZ8XhXh9q2w5ImHklVECw==
   dependencies:
     core-js "^3.8.2"
 
-"@storybook/core-server@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.5.3.tgz#6c6168ec74f07594b48b248ae53454745945b37e"
-  integrity sha512-aehEen3VeY2NvouYfbnw346KtRwCJceOH5IWGHvVVEauSVzwCH+Yfgy7c4k2j0Ey3u6fz5qCkvPp8rdY0XS7SA==
+"@storybook/core-server@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.5.10.tgz#ada3d647833c02cb8c742281c1f314ff866f96f8"
+  integrity sha512-jqwpA0ccA8X5ck4esWBid04+cEIVqirdAcqJeNb9IZAD+bRreO4Im8ilzr7jc5AmQ9fkqHs2NByFKh9TITp8NQ==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.3"
-    "@storybook/builder-webpack4" "6.5.3"
-    "@storybook/core-client" "6.5.3"
-    "@storybook/core-common" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+    "@storybook/builder-webpack4" "6.5.10"
+    "@storybook/core-client" "6.5.10"
+    "@storybook/core-common" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/csf-tools" "6.5.3"
-    "@storybook/manager-webpack4" "6.5.3"
-    "@storybook/node-logger" "6.5.3"
+    "@storybook/csf-tools" "6.5.10"
+    "@storybook/manager-webpack4" "6.5.10"
+    "@storybook/node-logger" "6.5.10"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.3"
-    "@storybook/telemetry" "6.5.3"
+    "@storybook/store" "6.5.10"
+    "@storybook/telemetry" "6.5.10"
     "@types/node" "^14.0.10 || ^16.0.0"
     "@types/node-fetch" "^2.5.7"
     "@types/pretty-hrtime" "^1.0.0"
@@ -4749,7 +4812,7 @@
     fs-extra "^9.0.1"
     global "^4.4.0"
     globby "^11.0.2"
-    ip "^1.1.5"
+    ip "^2.0.0"
     lodash "^4.17.21"
     node-fetch "^2.6.7"
     open "^8.4.0"
@@ -4766,18 +4829,18 @@
     ws "^8.2.3"
     x-default-browser "^0.4.0"
 
-"@storybook/core@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.5.3.tgz#8291e7bccd5d726ac7dc39c1e27fc04178f777f6"
-  integrity sha512-XQDcAryLNyXe5eiNqB++6xvGqnYlJ8ZAFOPWFlFUhjrktojtwVEeHfj5M3e23D9XMN4KkBODoH3OWmREcUMwXg==
+"@storybook/core@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.5.10.tgz#15ec8be85943251e25c2c24e80e20dcacc4fed65"
+  integrity sha512-K86yYa0tYlMxADlwQTculYvPROokQau09SCVqpsLg3wJCTvYFL4+SIqcYoyBSbFmHOdnYbJgPydjN33MYLiOZQ==
   dependencies:
-    "@storybook/core-client" "6.5.3"
-    "@storybook/core-server" "6.5.3"
+    "@storybook/core-client" "6.5.10"
+    "@storybook/core-server" "6.5.10"
 
-"@storybook/csf-tools@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.5.3.tgz#4f3b53bbe38f4a62e1ed07948a632512fb59f41f"
-  integrity sha512-WotBTvKauVV+i2DZqem4m12D+Ogexg6oFiXt0dlqh0TUGEAGzvocOAPIKk6uciEF2eXu6yn8JE4s+faXLWrXSw==
+"@storybook/csf-tools@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.5.10.tgz#ae6f1ebd4951e8978c8fe3e08ddd2bd269bf922b"
+  integrity sha512-H77kZQEisu7+skzeIbNZwmE09OqLjwJTeFhLN1pcjxKVa30LEI3pBHcNBxVKqgxl+Yg3KkB7W/ArLO2N+i2ohw==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/generator" "^7.12.11"
@@ -4787,7 +4850,7 @@
     "@babel/traverse" "^7.12.11"
     "@babel/types" "^7.12.11"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/mdx1-csf" canary
+    "@storybook/mdx1-csf" "^0.0.1"
     core-js "^3.8.2"
     fs-extra "^9.0.1"
     global "^4.4.0"
@@ -4801,33 +4864,33 @@
   dependencies:
     lodash "^4.17.15"
 
-"@storybook/docs-tools@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-6.5.3.tgz#2460df5d20e4c6670e985268b50bf9c412eb47b7"
-  integrity sha512-scUztkQ9ZRRoo4lHiYRaCkmk351H2CwMnlOrCwv/EpmLZnHdffSAtMZS/O07KUOC8fvxCw36z5SfHlbCIcolSQ==
+"@storybook/docs-tools@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-6.5.10.tgz#30baa62c1ca3a18b13625b6b305e23e39f404416"
+  integrity sha512-/bvYgOO+CxMEcHifkjJg0A60OTGOhcjGxnsB1h0gJuxMrqA/7Qwc108bFmPiX0eiD1BovFkZLJV4O6OY7zP5Vw==
   dependencies:
     "@babel/core" "^7.12.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/store" "6.5.3"
+    "@storybook/store" "6.5.10"
     core-js "^3.8.2"
     doctrine "^3.0.0"
     lodash "^4.17.21"
     regenerator-runtime "^0.13.7"
 
-"@storybook/manager-webpack4@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.5.3.tgz#004380031a521f50d5d37740e7d2add3342dbd90"
-  integrity sha512-kI+6fbCHv9uH1GEYK/SYLtNiAJYVRgm8oh/7Zi/38cqUjnAg8lzUztABul4Iemu3w5aJplkqE08FFu69TTbHPg==
+"@storybook/manager-webpack4@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.5.10.tgz#41bae252b863484f293954ef2d2dc80bf3e028f1"
+  integrity sha512-N/TlNDhuhARuFipR/ZJ/xEVESz23iIbCsZ4VNehLHm8PpiGlQUehk+jMjWmz5XV0bJItwjRclY+CU3GjZKblfQ==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-transform-template-literals" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
-    "@storybook/addons" "6.5.3"
-    "@storybook/core-client" "6.5.3"
-    "@storybook/core-common" "6.5.3"
-    "@storybook/node-logger" "6.5.3"
-    "@storybook/theming" "6.5.3"
-    "@storybook/ui" "6.5.3"
+    "@storybook/addons" "6.5.10"
+    "@storybook/core-client" "6.5.10"
+    "@storybook/core-common" "6.5.10"
+    "@storybook/node-logger" "6.5.10"
+    "@storybook/theming" "6.5.10"
+    "@storybook/ui" "6.5.10"
     "@types/node" "^14.0.10 || ^16.0.0"
     "@types/webpack" "^4.41.26"
     babel-loader "^8.0.0"
@@ -4856,19 +4919,19 @@
     webpack-virtual-modules "^0.2.2"
 
 "@storybook/manager-webpack5@^6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack5/-/manager-webpack5-6.5.3.tgz#63cd2fe547653c5489f301db954016bed4ab9d29"
-  integrity sha512-AJpx2cpiBXt6lVHxe2ZaBWTXqq8/GNXfFKXuBRTvLM0ZqiY3HcohUmgpWs56OC2JUwunbZiS0nvxA3dzQmuBZg==
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack5/-/manager-webpack5-6.5.10.tgz#dff8e53615906284b68df013935e8a6234ddaafe"
+  integrity sha512-uRo+6e5MiVOtyFVMYIKVqvpDveCjHyzXBfetSYR7rKEZoaDMEnLLiuF7DIH12lzxwmzCJ1gIc4lf5HFiTMNkgw==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-transform-template-literals" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
-    "@storybook/addons" "6.5.3"
-    "@storybook/core-client" "6.5.3"
-    "@storybook/core-common" "6.5.3"
-    "@storybook/node-logger" "6.5.3"
-    "@storybook/theming" "6.5.3"
-    "@storybook/ui" "6.5.3"
+    "@storybook/addons" "6.5.10"
+    "@storybook/core-client" "6.5.10"
+    "@storybook/core-common" "6.5.10"
+    "@storybook/node-logger" "6.5.10"
+    "@storybook/theming" "6.5.10"
+    "@storybook/ui" "6.5.10"
     "@types/node" "^14.0.10 || ^16.0.0"
     babel-loader "^8.0.0"
     case-sensitive-paths-webpack-plugin "^2.3.0"
@@ -4893,10 +4956,10 @@
     webpack-dev-middleware "^4.1.0"
     webpack-virtual-modules "^0.4.1"
 
-"@storybook/mdx1-csf@canary":
-  version "0.0.1-canary.1.867dcd5.0"
-  resolved "https://registry.yarnpkg.com/@storybook/mdx1-csf/-/mdx1-csf-0.0.1-canary.1.867dcd5.0.tgz#e8739a7451a557292977d83bfb7475986a8013b6"
-  integrity sha512-VnlE825M9SpjyJCPLCXbo+RbvqllsqXqRDCouzHKSpCE3Q79KR7MMURBsJo/vrTG1zeNG68Z4TZrLAu6IoyYaA==
+"@storybook/mdx1-csf@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@storybook/mdx1-csf/-/mdx1-csf-0.0.1.tgz#d4184e3f6486fade9f7a6bfaf934d9bc07718d5b"
+  integrity sha512-4biZIWWzoWlCarMZmTpqcJNgo/RBesYZwGFbQeXiGYsswuvfWARZnW9RE9aUEMZ4XPn7B1N3EKkWcdcWe/K2tg==
   dependencies:
     "@babel/generator" "^7.12.11"
     "@babel/parser" "^7.12.11"
@@ -4910,10 +4973,10 @@
     prettier ">=2.2.1 <=2.3.0"
     ts-dedent "^2.0.0"
 
-"@storybook/node-logger@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.3.tgz#6917bbbdaf2bb3b191bafadfe4f19c3ea3cbfa61"
-  integrity sha512-iG4uQJCtuT54p3zg0zJ7+ALPUrt7PTAXmXqN7ak/9YcWbnwtMlHgg8oTlCebwr+E3QPCMauJM2eLzC6F7bI76w==
+"@storybook/node-logger@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.10.tgz#bce4c04009c4b62d6d2fb617176d7ef0084e9e89"
+  integrity sha512-bYswXIKV7Stru8vYfkjUMNN8UhF7Qg7NRsUvG5Djt5lLIae1XmUIgnH40mU/nW4X4BSfcR9MKxsSsngvn2WmQg==
   dependencies:
     "@types/npmlog" "^4.1.2"
     chalk "^4.1.0"
@@ -4921,24 +4984,24 @@
     npmlog "^5.0.1"
     pretty-hrtime "^1.0.3"
 
-"@storybook/postinstall@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.5.3.tgz#ba815b7590d0fe8ee8626e62ddd3f729264aa464"
-  integrity sha512-EIHnbrGwt/CPyLXwNFyfAGY4LhrBx713ghCtacQu2xAukDXg9UWJHarYXjwIivk8DGrims28qXGIjIUKqKeuyA==
+"@storybook/postinstall@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.5.10.tgz#b25378da036bce7b318c6732733aa5ad43449f37"
+  integrity sha512-xqUdpnFHYkn8MgtV+QztvIsRWa6jQUk7QT1Mu17Y0S7PbslNGsuskRPHenHhACXBJF+TM86R+4BaAhnVYTmElw==
   dependencies:
     core-js "^3.8.2"
 
-"@storybook/preview-web@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.5.3.tgz#f54fb17476c6a57d715ad2e46674b6b668e6729f"
-  integrity sha512-NI+sKFloj0vP1xAMaF1BhOAokB2u0qZ5rxx8lnU8eBmAukRURGoebuHWohBoQqniuupaNQK5hkUlJ3mkAPZi8Q==
+"@storybook/preview-web@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.5.10.tgz#81bf5d3f5fca9e26099c057206bd8e684225989b"
+  integrity sha512-sTC/o5gkvALOtcNgtApGKGN9EavvSxRHBeBh+5BQjV2qQ8ap+26RsfUizNBECAa2Jrn4osaDYn9HRhJLFL69WA==
   dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/channel-postmessage" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+    "@storybook/addons" "6.5.10"
+    "@storybook/channel-postmessage" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/store" "6.5.3"
+    "@storybook/store" "6.5.10"
     ansi-to-html "^0.6.11"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -4964,23 +5027,23 @@
     tslib "^2.0.0"
 
 "@storybook/react@^6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.5.3.tgz#bab65edd22719d3367e136db20a79bd09aab41a0"
-  integrity sha512-RP9ak2EIrq9sJ80JjaVV/Xab9O663PA/DRqfbILewRLi9uUaG6L/Qby7LktwzqwaybeKbP6dTG0w937cRkuj4w==
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.5.10.tgz#6e9f5cf5e4c81d966774c08c87fb2414052db454"
+  integrity sha512-m8S1qQrwA7pDGwdKEvL6LV3YKvSzVUY297Fq+xcTU3irnAy4sHDuFoLqV6Mi1510mErK1r8+rf+0R5rEXB219g==
   dependencies:
     "@babel/preset-flow" "^7.12.1"
     "@babel/preset-react" "^7.12.10"
     "@pmmmwh/react-refresh-webpack-plugin" "^0.5.3"
-    "@storybook/addons" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/core" "6.5.3"
-    "@storybook/core-common" "6.5.3"
+    "@storybook/addons" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/core" "6.5.10"
+    "@storybook/core-common" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/docs-tools" "6.5.3"
-    "@storybook/node-logger" "6.5.3"
+    "@storybook/docs-tools" "6.5.10"
+    "@storybook/node-logger" "6.5.10"
     "@storybook/react-docgen-typescript-plugin" "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.3"
+    "@storybook/store" "6.5.10"
     "@types/estree" "^0.0.51"
     "@types/node" "^14.14.20 || ^16.0.0"
     "@types/webpack-env" "^1.16.0"
@@ -5004,13 +5067,15 @@
     util-deprecate "^1.0.2"
     webpack ">=4.43.0 <6.0.0"
 
-"@storybook/router@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.3.tgz#55d8a0a5c3acdef9695482e38cd4d70f6926c261"
-  integrity sha512-UcErvdeuCTMYvmztDogrTK1DKQ8ZFkUR/46bEuVo4tg9OzlX3fr+JqD4RZHT4YOUYmDcTm6cLlUJhDalUpoU6Q==
+"@storybook/router@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.10.tgz#b0c342e080c1d2b5344603bc43a6c75734a4a879"
+  integrity sha512-O+vNW/eEpYFF8eCg5jZjNQ6q2DKQVxqDRPCy9pJdEbvavMDZn6AFYgVK+VJe5F4211WW2yncOu922xObCxXJYg==
   dependencies:
-    "@storybook/client-logger" "6.5.3"
+    "@storybook/client-logger" "6.5.10"
     core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
     regenerator-runtime "^0.13.7"
 
 "@storybook/semver@^7.3.2":
@@ -5021,13 +5086,13 @@
     core-js "^3.6.5"
     find-up "^4.1.0"
 
-"@storybook/source-loader@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.5.3.tgz#5991dd33805ebb54c5c1e0ad779a2cf80ec6b3b9"
-  integrity sha512-JrwCm3El6XZC7eVYCF83e7x7/fA4ue+g2s0oAtdXD11KOrrJ7e0bgtvVdtRWKG/4n4Ww3+sGFnuIlXfPbJ3hvw==
+"@storybook/source-loader@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.5.10.tgz#f62b4c7b1933976a20913ddc149d55026ef4c872"
+  integrity sha512-1RxxRumpjs8VUUwES9LId+cuNQnixhZAcwCxd6jaKkTZbjiQCtAhXX6DBTjJGV1u/JnCsqEp5b1wB8j/EioNHw==
   dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
+    "@storybook/addons" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
     core-js "^3.8.2"
     estraverse "^5.2.0"
@@ -5037,14 +5102,14 @@
     prettier ">=2.2.1 <=2.3.0"
     regenerator-runtime "^0.13.7"
 
-"@storybook/store@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.3.tgz#8bde9d3ad071c3612665b6190ed093784a98d22d"
-  integrity sha512-vI5w3OlDsCQE32C5AekRfHI6qX7s7iKRAUJKQE4Azqch37EAnMNLWE3E13KAzdLX1oU+JNRGHjJTogsQUR2UeQ==
+"@storybook/store@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.10.tgz#85df17a8d57af0cba3934b3c6046537e2bca9abd"
+  integrity sha512-RswrSYh2IiKkytFPxP9AvP+hekjrvHK2ILvyDk2ZgduCN4n5ivsekOb+N3M2t+dq1eLuW9or5n2T4OWwAwjxxQ==
   dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/core-events" "6.5.3"
+    "@storybook/addons" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/core-events" "6.5.10"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -5058,13 +5123,13 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/telemetry@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-6.5.3.tgz#2440606fa82406d279b0d60261613c5038d3bfbf"
-  integrity sha512-eXhQ+kRWdg+ZX3sglRaCoOzpzgQ/p9wKS4/vEJd5Fq+JlKIuZkJ7xiJYaxlhR55PLpJGbj+5HCTlnepAtf7Nnw==
+"@storybook/telemetry@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-6.5.10.tgz#742b05a55dfe8470ce4cb371f3f3f2c02f96e816"
+  integrity sha512-+M5HILDFS8nDumLxeSeAwi1MTzIuV6UWzV4yB2wcsEXOBTdplcl9oYqFKtlst78oOIdGtpPYxYfivDlqxC2K4g==
   dependencies:
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/core-common" "6.5.3"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/core-common" "6.5.10"
     chalk "^4.1.0"
     core-js "^3.8.2"
     detect-package-manager "^2.0.1"
@@ -5076,42 +5141,54 @@
     read-pkg-up "^7.0.1"
     regenerator-runtime "^0.13.7"
 
-"@storybook/theming@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.3.tgz#a8df53df2812d49453a3410346123231e028c103"
-  integrity sha512-2tM46jahAhKRUzCcoaqPoqs+4imXqbze0dCPZ0cdVnfs14jhMB1lAfGE+diodCCaUcXUu8r2c5dTPKqqM1lHqQ==
+"@storybook/theming@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.10.tgz#052100979c1270fc8f60653c1a13a6f047318109"
+  integrity sha512-BvTQBBcSEwKKcsVmF+Ol6v0RIQUr+bxP7gb10wtfBd23mZTEFA0C1N5FnZr/dDeiBKG1pvf1UKvoYA731y0BsA==
   dependencies:
-    "@storybook/client-logger" "6.5.3"
+    "@storybook/client-logger" "6.5.10"
     core-js "^3.8.2"
+    memoizerific "^1.11.3"
     regenerator-runtime "^0.13.7"
 
-"@storybook/ui@6.5.3":
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.5.3.tgz#afa7a327c71350e9f92628b86c7f14d58427ec3c"
-  integrity sha512-TLJBfXHFM0ilMuUjer4AjhnNGvQ7lI4GYIKzuCjCrw/ukfUb1AABXd9fdHq7tEzVm8z7T3pyrRVsb1VVdbxL0A==
-  dependencies:
-    "@storybook/addons" "6.5.3"
-    "@storybook/api" "6.5.3"
-    "@storybook/channels" "6.5.3"
-    "@storybook/client-logger" "6.5.3"
-    "@storybook/components" "6.5.3"
-    "@storybook/core-events" "6.5.3"
-    "@storybook/router" "6.5.3"
+"@storybook/ui@6.5.10":
+  version "6.5.10"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.5.10.tgz#f56095a1a39ae5a203f2ac7f3dba86341a5927d5"
+  integrity sha512-6iaoaRAiTqB1inTw35vao+5hjcDE0Qa0A3a9ZIeNa6yHvpB1k0lO/N/0PMrRdVvySYpXVD1iry4z4QYdo1rU+w==
+  dependencies:
+    "@storybook/addons" "6.5.10"
+    "@storybook/api" "6.5.10"
+    "@storybook/channels" "6.5.10"
+    "@storybook/client-logger" "6.5.10"
+    "@storybook/components" "6.5.10"
+    "@storybook/core-events" "6.5.10"
+    "@storybook/router" "6.5.10"
     "@storybook/semver" "^7.3.2"
-    "@storybook/theming" "6.5.3"
+    "@storybook/theming" "6.5.10"
     core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@swc/helpers@^0.3.6":
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.3.8.tgz#5b9ecf4ee480ca00f1ffbc2d1a5d4eed0d1afe81"
-  integrity sha512-aWItSZvJj4+GI6FWkjZR13xPNPctq2RRakzo+O6vN7bC2yjwdg5EFpgaSAUn95b7BGSgcflvzVDPoKmJv24IOg==
+"@swc/helpers@0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.3.tgz#16593dfc248c53b699d4b5026040f88ddb497012"
+  integrity sha512-6JrF+fdUK2zbGpJIlN7G3v966PQjyx/dPt1T9km2wj+EUBqgrxCk3uX4Kct16MIm9gGxfKRcfax2hVf5jvlTzA==
+  dependencies:
+    tslib "^2.4.0"
+
+"@swc/helpers@^0.4.2":
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.6.tgz#574672fe0018731893b6a7b1741d336863fa09a1"
+  integrity sha512-jUMFa2/gFJOBVBnd3ZZHKRNsgqD0OQQhJMlOFR5B5stMbrUlTQoI7rXORtIGb+M/BZAU/cuI68nho4De3gXzWA==
+  dependencies:
+    tslib "^2.4.0"
 
 "@testing-library/dom@^8.0.0", "@testing-library/dom@^8.1.0":
-  version "8.11.4"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.4.tgz#dc94d830b862e7a20686b0379eefd931baf0445b"
-  integrity sha512-7vZ6ZoBEbr6bfEM89W1nzl0vHbuI0g0kRrI0hwSXH3epnuqGO3KulFLQCKfmmW+60t7e4sevAkJPASSMmnNCRw==
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.17.1.tgz#2d7af4ff6dad8d837630fecd08835aee08320ad7"
+  integrity sha512-KnH2MnJUzmFNPW6RIKfd+zf2Wue8mEKX0M3cpX6aKl5ZXrJM1/c/Pc8c2xDNYQCnJO48Sm5ITbMXgqTr3h4jxQ==
   dependencies:
     "@babel/code-frame" "^7.10.4"
     "@babel/runtime" "^7.12.5"
@@ -5134,13 +5211,13 @@
     react-error-boundary "^3.1.0"
 
 "@testing-library/react@^12.1.2":
-  version "12.1.4"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.4.tgz#09674b117e550af713db3f4ec4c0942aa8bbf2c0"
-  integrity sha512-jiPKOm7vyUw311Hn/HlNQ9P8/lHNtArAx0PisXyFixDDvfl8DbD6EUdbshK5eqauvBSvzZd19itqQ9j3nferJA==
+  version "12.1.5"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
+  integrity sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^8.0.0"
-    "@types/react-dom" "*"
+    "@types/react-dom" "<18.0.0"
 
 "@testing-library/user-event@^13.2.0":
   version "13.5.0"
@@ -5160,24 +5237,24 @@
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
 "@tsconfig/node10@^1.0.7":
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.8.tgz#c1e4e80d6f964fbecb3359c43bd48b40f7cadad9"
-  integrity sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.9.tgz#df4907fc07a886922637b15e02d4cebc4c0021b2"
+  integrity sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==
 
 "@tsconfig/node12@^1.0.7":
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node12/-/node12-1.0.9.tgz#62c1f6dee2ebd9aead80dc3afa56810e58e1a04c"
-  integrity sha512-/yBMcem+fbvhSREH+s14YJi18sp7J9jpuhYByADT2rypfajMZZN4WQ6zBGgBKp53NKmqI36wFYDb3yaMPurITw==
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node12/-/node12-1.0.11.tgz#ee3def1f27d9ed66dac6e46a295cffb0152e058d"
+  integrity sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==
 
 "@tsconfig/node14@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node14/-/node14-1.0.1.tgz#95f2d167ffb9b8d2068b0b235302fafd4df711f2"
-  integrity sha512-509r2+yARFfHHE7T6Puu2jjkoycftovhXRqW328PDXTVGKihlb1P8Z9mMZH04ebyajfRY7dedfGynlrFHJUQCg==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node14/-/node14-1.0.3.tgz#e4386316284f00b98435bf40f72f75a09dabf6c1"
+  integrity sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==
 
 "@tsconfig/node16@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.2.tgz#423c77877d0569db20e1fc80885ac4118314010e"
-  integrity sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.3.tgz#472eaab5f15c1ffdd7f8628bd4c4f753995ec79e"
+  integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
 
 "@types/aria-query@^4.2.0":
   version "4.2.2"
@@ -5211,9 +5288,9 @@
     "@babel/types" "^7.0.0"
 
 "@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.14.2.tgz#ffcd470bbb3f8bf30481678fb5502278ca833a43"
-  integrity sha512-K2waXdXBi2302XUdcHcR1jCeU0LL4TD9HRs/gk0N2Xvrht+G/BfJa4QObBQZfhMdxiCpV3COl5Nfq4uKTeTnJA==
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.18.0.tgz#8134fd78cb39567465be65b9fdc16d378095f41f"
+  integrity sha512-v4Vwdko+pgymgS+A2UIaJru93zQd85vIGWObM5ekZNdXCKtDYqATlEYnWgfo86Q6I1Lh0oXnksDnMU1cwmlPDw==
   dependencies:
     "@babel/types" "^7.3.0"
 
@@ -5225,9 +5302,9 @@
     magic-string "^0.25.0"
 
 "@types/canvas-confetti@^1.4.2":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@types/canvas-confetti/-/canvas-confetti-1.4.2.tgz#35c99fc904492fdcc6515c742509e04f3527211c"
-  integrity sha512-t45KUDHlwrD9PJVRHc5z1SlXhO82BQEgMKUXGEV1KnWLFMPA6Y5LfUsLTHHzH9KcKDHZLEiYYH5nIDcjRKWNTg==
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@types/canvas-confetti/-/canvas-confetti-1.4.3.tgz#2540cda5353b1f7efd581f4950bfc48d165cca89"
+  integrity sha512-UwFPTsW1ZwVyo/ETp4hPSikSD7yl2V42E3VWBF5P/0+DHO4iajyceWv7hfNdZ2AX5tkZnuViiBWOqyCPohU2FQ==
 
 "@types/cheerio@*":
   version "0.22.31"
@@ -5237,17 +5314,17 @@
     "@types/node" "*"
 
 "@types/enzyme@^3.10.8":
-  version "3.10.11"
-  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.11.tgz#8924bd92cc63ac1843e215225dfa8f71555fe814"
-  integrity sha512-LEtC7zXsQlbGXWGcnnmOI7rTyP+i1QzQv4Va91RKXDEukLDaNyxu0rXlfMiGEhJwfgTPCTb0R+Pnlj//oM9e/w==
+  version "3.10.12"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.12.tgz#ac4494801b38188935580642f772ad18f72c132f"
+  integrity sha512-xryQlOEIe1TduDWAOphR0ihfebKFSWOXpIsk+70JskCfRfW+xALdnJ0r1ZOTo85F9Qsjk6vtlU7edTYHbls9tA==
   dependencies:
     "@types/cheerio" "*"
     "@types/react" "*"
 
 "@types/eslint-scope@^3.7.3":
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
-  integrity sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==
+  version "3.7.4"
+  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
+  integrity sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==
   dependencies:
     "@types/eslint" "*"
     "@types/estree" "*"
@@ -5258,14 +5335,19 @@
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
 "@types/eslint@*":
-  version "8.4.1"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.4.1.tgz#c48251553e8759db9e656de3efc846954ac32304"
-  integrity sha512-GE44+DNEyxxh2Kc6ro/VkIj+9ma0pO0bwv9+uHSyBrikYOHr8zYcdPvnBOp1aw8s+CjRvuSx7CyWqRrNFQ59mA==
+  version "8.4.5"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-8.4.5.tgz#acdfb7dd36b91cc5d812d7c093811a8f3d9b31e4"
+  integrity sha512-dhsC09y1gpJWnK+Ff4SGvCuSnk9DaU0BJZSzOwa6GVSg65XtTugLBITDAAzRU5duGBoXBHpdR/9jHGxJjNflJQ==
   dependencies:
     "@types/estree" "*"
     "@types/json-schema" "*"
 
-"@types/estree@*", "@types/estree@^0.0.51":
+"@types/estree@*":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.0.tgz#5fb2e536c1ae9bf35366eed879e827fa59ca41c2"
+  integrity sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==
+
+"@types/estree@^0.0.51":
   version "0.0.51"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
   integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
@@ -5347,18 +5429,13 @@
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
-  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
-"@types/lodash@^4.14.167":
+"@types/lodash@^4.14.167", "@types/lodash@^4.14.170":
   version "4.14.182"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
   integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
 
-"@types/lodash@^4.14.170":
-  version "4.14.180"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.180.tgz#4ab7c9ddfc92ec4a887886483bc14c79fb380670"
-  integrity sha512-XOKXa1KIxtNXgASAnwj7cnttJxS4fksBRywK/9LzRV5YxrF80BXZIGeQSuoESQ/VkUj30Ae0+YcuHc15wJCB2g==
-
 "@types/mdast@^3.0.0":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
@@ -5377,27 +5454,27 @@
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
 "@types/node-fetch@^2.5.7":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.1.tgz#8f127c50481db65886800ef496f20bbf15518975"
-  integrity sha512-oMqjURCaxoSIsHSr1E47QHzbmzNR5rK8McHuNb11BOM9cHcIK3Avy0s/b2JlXHoQGTYS3NsvWzV1M0iK7l0wbA==
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.2.tgz#d1a9c5fd049d9415dce61571557104dec3ec81da"
+  integrity sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==
   dependencies:
     "@types/node" "*"
     form-data "^3.0.0"
 
 "@types/node@*":
-  version "17.0.23"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.23.tgz#3b41a6e643589ac6442bdbd7a4a3ded62f33f7da"
-  integrity sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==
+  version "18.7.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.7.2.tgz#22306626110c459aedd2cdf131c749ec781e3b34"
+  integrity sha512-ce7MIiaYWCFv6A83oEultwhBXb22fxwNOQf5DIxWA4WXvDQ7K+L0fbWl/YOfCzlR5B/uFkSnVBhPcOfOECcWvA==
 
 "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
-  version "16.11.36"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.36.tgz#9ab9f8276987132ed2b225cace2218ba794fc751"
-  integrity sha512-FR5QJe+TaoZ2GsMHkjuwoNabr+UrJNRr2HNOo+r/7vhcuntM6Ee/pRPOnRhhL2XE9OOvX9VLEq+BcXl3VjNoWA==
+  version "16.11.48"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.48.tgz#22d386f32b24fb644940b606ed393b56be7d8686"
+  integrity sha512-Z9r9UWlNeNkYnxybm+1fc0jxUNjZqRekTAr1pG0qdXe9apT9yCiqk1c4VvKQJsFpnchU4+fLl25MabSLA2wxIw==
 
 "@types/node@^14.14.41":
-  version "14.18.12"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.12.tgz#0d4557fd3b94497d793efd4e7d92df2f83b4ef24"
-  integrity sha512-q4jlIR71hUpWTnGhXWcakgkZeHa3CCjcQcnuzU8M891BAWA2jHiziiWEPEkdS5pFsz7H9HJiy8BrK7tBRNrY7A==
+  version "14.18.23"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.23.tgz#70f5f20b0b1b38f696848c1d3647bb95694e615e"
+  integrity sha512-MhbCWN18R4GhO8ewQWAFK4TGQdBpXWByukz7cWyJmXhvRuCIaM/oWytGPqVmDzgEnnaIc9ss6HbU5mUi+vyZPA==
 
 "@types/node@^15.12.4":
   version "15.14.9"
@@ -5435,9 +5512,9 @@
   integrity sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==
 
 "@types/prettier@^2.0.0":
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.4.tgz#5d9b63132df54d8909fce1c3f8ca260fdd693e17"
-  integrity sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA==
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.0.tgz#ea03e9f0376a4446f44797ca19d9c46c36e352dc"
+  integrity sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==
 
 "@types/pretty-hrtime@^1.0.0":
   version "1.0.1"
@@ -5450,9 +5527,9 @@
   integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==
 
 "@types/prop-types@*":
-  version "15.7.4"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
-  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
 "@types/qs@^6.9.5":
   version "6.9.7"
@@ -5466,48 +5543,57 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@*", "@types/react-dom@>=16.9.0", "@types/react-dom@^17.0.2", "@types/react-dom@^17.0.8":
-  version "17.0.14"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.14.tgz#c8f917156b652ddf807711f5becbd2ab018dea9f"
-  integrity sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==
+"@types/react-dom@<18.0.0", "@types/react-dom@^17.0.2", "@types/react-dom@^17.0.8":
+  version "17.0.17"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
+  integrity sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==
+  dependencies:
+    "@types/react" "^17"
+
+"@types/react-dom@>=16.9.0":
+  version "18.0.6"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
+  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
   dependencies:
     "@types/react" "*"
 
 "@types/react-instantsearch-core@*":
-  version "6.10.7"
-  resolved "https://registry.yarnpkg.com/@types/react-instantsearch-core/-/react-instantsearch-core-6.10.7.tgz#a40b50890a2203011bd3ce6a7180aa15b1aa7f69"
-  integrity sha512-bG87zLTm5NVzMGVgP6jZtNZxOiHWMp8++MvWeVMg131vXyTpvG5wwuvrOHjWAZ7fq73QQCyCWN7ktKEqj4mqVg==
+  version "6.26.2"
+  resolved "https://registry.yarnpkg.com/@types/react-instantsearch-core/-/react-instantsearch-core-6.26.2.tgz#e4a6613d02a7f66843c460dc6752e14d8ff2d1a2"
+  integrity sha512-Z7uNsE4wYUDws7QtP3ZKN/UK5xbKLwY76ZiIIWhNQgPXDV0QG3F/6Qn82MChNUiel/nqXCnCr/ZAj7oa5jsMyg==
   dependencies:
     "@types/react" "*"
     algoliasearch ">=4"
     algoliasearch-helper ">=3"
 
 "@types/react-instantsearch-dom@^6.12.0":
-  version "6.12.2"
-  resolved "https://registry.yarnpkg.com/@types/react-instantsearch-dom/-/react-instantsearch-dom-6.12.2.tgz#4ed072d526d7989af74f0df3883a415933f628aa"
-  integrity sha512-MsVn01rRXsthQyKkUfcXAaiNBoCCsiPiD2/gzPx050QO/g2VfTacOTzSZfh29+0luRqAV58abnG34eQ/luq2Wg==
+  version "6.12.3"
+  resolved "https://registry.yarnpkg.com/@types/react-instantsearch-dom/-/react-instantsearch-dom-6.12.3.tgz#a9cfbab5a0544a9afcc65eb3d1dc5b842b58e7a3"
+  integrity sha512-HAQG74v7OzsUhdjNermd0A8c7LWRLsrMCsFCY6+7HEXK1hikeCs/Hmy6xjFhZVfFEWvpvX78vxJELafoAnuv8Q==
   dependencies:
     "@types/react" "*"
     "@types/react-instantsearch-core" "*"
 
-"@types/react-syntax-highlighter@11.0.5":
-  version "11.0.5"
-  resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.5.tgz#0d546261b4021e1f9d85b50401c0a42acb106087"
-  integrity sha512-VIOi9i2Oj5XsmWWoB72p3KlZoEbdRAcechJa8Ztebw7bDl2YmR+odxIqhtJGp1q2EozHs02US+gzxJ9nuf56qg==
+"@types/react-test-renderer@>=16.9.0":
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.0.tgz#7b7f69ca98821ea5501b21ba24ea7b6139da2243"
+  integrity sha512-C7/5FBJ3g3sqUahguGi03O79b8afNeSD6T8/GU50oQrJCU0bVCCGQHaGKUbg2Ce8VQEEqTw8/HiS6lXHHdgkdQ==
   dependencies:
     "@types/react" "*"
 
-"@types/react-test-renderer@>=16.9.0":
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
-  integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
+"@types/react@*", "@types/react@>=16.9.0":
+  version "18.0.17"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.17.tgz#4583d9c322d67efe4b39a935d223edcc7050ccf4"
+  integrity sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==
   dependencies:
-    "@types/react" "*"
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
 
-"@types/react@*", "@types/react@>=16.9.0", "@types/react@^17.0.11", "@types/react@^17.0.2":
-  version "17.0.43"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
-  integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
+"@types/react@^17", "@types/react@^17.0.11", "@types/react@^17.0.2":
+  version "17.0.48"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.48.tgz#a4532a8b91d7b27b8768b6fc0c3bccb760d15a6c"
+  integrity sha512-zJ6IYlJ8cYYxiJfUaZOQee4lh99mFihBoqkOSEGV+dFi9leROW6+PgstzQ+w3gWTnUfskALtQPGHK6dYmPj+2A==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -5556,9 +5642,9 @@
   integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==
 
 "@types/uglify-js@*":
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.13.1.tgz#5e889e9e81e94245c75b6450600e1c5ea2878aea"
-  integrity sha512-O3MmRAk6ZuAKa9CHgg0Pr0+lUOqoMLpc9AS4R8ano2auvsg7IE8syF3Xh/NPr26TWklxYcqoEEFdzLLs1fV9PQ==
+  version "3.16.0"
+  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.16.0.tgz#2cf74a0e6ebb6cd54c0d48e509d5bd91160a9602"
+  integrity sha512-0yeUr92L3r0GLRnBOvtYK1v2SjqMIqQDHMl7GLb+l2L8+6LSFWEEWEIgVsPdMn5ImLM8qzWT8xFPtQYpp8co0g==
   dependencies:
     source-map "^0.6.1"
 
@@ -5573,9 +5659,9 @@
   integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
 
 "@types/webpack-env@^1.16.0":
-  version "1.16.3"
-  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.3.tgz#b776327a73e561b71e7881d0cd6d34a1424db86a"
-  integrity sha512-9gtOPPkfyNoEqCQgx4qJKkuNm/x0R2hKR7fdl7zvTJyHnIisuE/LfvXOsYWL0o3qq6uiBnKZNNNzi3l0y/X+xw==
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.17.0.tgz#f99ce359f1bfd87da90cc4a57cab0a18f34a48d0"
+  integrity sha512-eHSaNYEyxRA5IAG0Ym/yCyf86niZUIF/TpWKofQI/CVfh5HsMEUyfE2kwFxha4ow0s5g0LfISQxpDKjbRDrizw==
 
 "@types/webpack-sources@*":
   version "3.2.0"
@@ -6062,9 +6148,9 @@ JSONStream@^1.0.4:
     through ">=2.2.7 <3"
 
 abab@^2.0.3, abab@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
-  integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
 abbrev@1:
   version "1.1.1"
@@ -6100,7 +6186,7 @@ acorn-import-assertions@^1.7.6:
 acorn-jsx@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
-  integrity sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=
+  integrity sha512-AU7pnZkguthwBjKgCg6998ByQNIMjbuDQZ8bb78QAFZwPfmKia8AIzgY/gWgqCjnht8JLdXmB4YxA0KaV60ncQ==
   dependencies:
     acorn "^3.0.4"
 
@@ -6122,7 +6208,7 @@ acorn-walk@^8.0.0, acorn-walk@^8.1.1:
 acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
-  integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
+  integrity sha512-OLUyIIZ7mF5oaAUT1w0TFqQS81q3saT46x8t7ukpPjMNk+nbs4ZHhs7ToV8EWnLYLepjETXd4XaCE4uxkMeqUw==
 
 acorn@^5.5.0:
   version "5.7.4"
@@ -6139,20 +6225,20 @@ acorn@^7.1.1, acorn@^7.4.0, acorn@^7.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.0.4, acorn@^8.2.4, acorn@^8.4.1, acorn@^8.5.0:
-  version "8.7.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
-  integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
+acorn@^8.0.4, acorn@^8.2.4, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.1:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
 
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
-  integrity sha1-anmQQ3ynNtXhKI25K9MmbV9csqo=
+  integrity sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==
 
 address@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
-  integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.2.0.tgz#d352a62c92fee90f89a693eccd2a8b2139ab02d9"
+  integrity sha512-tNEZYz5G/zYunxFm7sfhAxkXEuLj3K6BKwv6ZURlsF6yiUQ65z0Q2wZW9L5cPUl9ocofGvXOdFYbFHp0+6MOig==
 
 agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
@@ -6231,32 +6317,32 @@ ajv@^8.0.1:
     require-from-string "^2.0.2"
     uri-js "^4.2.2"
 
-algoliasearch-helper@>=3, algoliasearch-helper@^3.7.4:
-  version "3.7.4"
-  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.7.4.tgz#3812ea161da52463ec88da52612c9a363c1b181d"
-  integrity sha512-KmJrsHVm5TmxZ9Oj53XdXuM4CQeu7eVFnB15tpSFt+7is1d1yVCv3hxCLMqYSw/rH42ccv013miQpRr268P8vw==
+algoliasearch-helper@>=3, algoliasearch-helper@^3.10.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.11.0.tgz#c4355056d97748a92f6ff0d4fce153b96b561ddb"
+  integrity sha512-TLl/MSjtQ98mgkd8hngWkzSjE+dAWldZ1NpJtv2mT+ZoFJ2P2zDE85oF9WafJOXWN9FbVRmyxpO5H+qXcNaFng==
   dependencies:
     "@algolia/events" "^4.0.1"
 
 algoliasearch@>=4, algoliasearch@^4.10.3:
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.13.0.tgz#e36611fda82b1fc548c156ae7929a7f486e4b663"
-  integrity sha512-oHv4faI1Vl2s+YC0YquwkK/TsaJs79g2JFg5FDm2rKN12VItPTAeQ7hyJMHarOPPYuCnNC5kixbtcqvb21wchw==
-  dependencies:
-    "@algolia/cache-browser-local-storage" "4.13.0"
-    "@algolia/cache-common" "4.13.0"
-    "@algolia/cache-in-memory" "4.13.0"
-    "@algolia/client-account" "4.13.0"
-    "@algolia/client-analytics" "4.13.0"
-    "@algolia/client-common" "4.13.0"
-    "@algolia/client-personalization" "4.13.0"
-    "@algolia/client-search" "4.13.0"
-    "@algolia/logger-common" "4.13.0"
-    "@algolia/logger-console" "4.13.0"
-    "@algolia/requester-browser-xhr" "4.13.0"
-    "@algolia/requester-common" "4.13.0"
-    "@algolia/requester-node-http" "4.13.0"
-    "@algolia/transporter" "4.13.0"
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.14.2.tgz#63f142583bfc3a9bd3cd4a1b098bf6fe58e56f6c"
+  integrity sha512-ngbEQonGEmf8dyEh5f+uOIihv4176dgbuOZspiuhmTTBRBuzWu3KCGHre6uHj5YyuC7pNvQGzB6ZNJyZi0z+Sg==
+  dependencies:
+    "@algolia/cache-browser-local-storage" "4.14.2"
+    "@algolia/cache-common" "4.14.2"
+    "@algolia/cache-in-memory" "4.14.2"
+    "@algolia/client-account" "4.14.2"
+    "@algolia/client-analytics" "4.14.2"
+    "@algolia/client-common" "4.14.2"
+    "@algolia/client-personalization" "4.14.2"
+    "@algolia/client-search" "4.14.2"
+    "@algolia/logger-common" "4.14.2"
+    "@algolia/logger-console" "4.14.2"
+    "@algolia/requester-browser-xhr" "4.14.2"
+    "@algolia/requester-common" "4.14.2"
+    "@algolia/requester-node-http" "4.14.2"
+    "@algolia/transporter" "4.14.2"
 
 ansi-align@^3.0.0:
   version "3.0.1"
@@ -6271,9 +6357,9 @@ ansi-colors@^3.0.0:
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
 ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
+  integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
 
 ansi-escapes@^3.2.0:
   version "3.2.0"
@@ -6295,19 +6381,19 @@ ansi-html-community@0.0.8, ansi-html-community@^0.0.8:
 ansi-red@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
-  integrity sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=
+  integrity sha512-ewaIr5y+9CUTGFwZfpECUbFlGcC0GCw1oqR9RI6h1gQCd9Aj2GxSckCnPsVJnmfMZbwFYE+leZGASgkWl06Jow==
   dependencies:
     ansi-wrap "0.1.0"
 
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-  integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
+  integrity sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==
 
 ansi-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
-  integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.1.tgz#123d6479e92ad45ad897d4054e3c7ca7db4944e1"
+  integrity sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==
 
 ansi-regex@^4.1.0:
   version "4.1.1"
@@ -6322,7 +6408,7 @@ ansi-regex@^5.0.0, ansi-regex@^5.0.1:
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
-  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
+  integrity sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==
 
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
@@ -6353,7 +6439,7 @@ ansi-to-html@^0.6.11:
 ansi-wrap@0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
-  integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
+  integrity sha512-ZyznvL8k/FZeQHr2T6LzcJ/+vBApDnMNZvfVFy3At0knswWd6rJ3/0Hhmpu8oqa6C92npmozs890sX9Dl6q+Qw==
 
 anymatch@^2.0.0:
   version "2.0.0"
@@ -6374,7 +6460,7 @@ anymatch@^3.0.0, anymatch@^3.0.3, anymatch@~3.1.2:
 app-root-dir@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/app-root-dir/-/app-root-dir-1.0.2.tgz#38187ec2dea7577fff033ffcb12172692ff6e118"
-  integrity sha1-OBh+wt6nV3//Az/8sSFyaS/24Rg=
+  integrity sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==
 
 aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
@@ -6430,7 +6516,7 @@ aria-query@^5.0.0:
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
-  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
+  integrity sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==
 
 arr-flatten@^1.1.0:
   version "1.1.0"
@@ -6440,7 +6526,7 @@ arr-flatten@^1.1.0:
 arr-union@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
-  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
+  integrity sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==
 
 array-differ@^3.0.0:
   version "3.0.0"
@@ -6455,28 +6541,28 @@ array-find-index@^1.0.1:
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
-  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
+  integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
 
 array-ify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/array-ify/-/array-ify-1.0.0.tgz#9e528762b4a9066ad163a6962a364418e9626ece"
-  integrity sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=
+  integrity sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==
 
-array-includes@^3.0.3, array-includes@^3.1.3, array-includes@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.4.tgz#f5b493162c760f3539631f005ba2bb46acb45ba9"
-  integrity sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==
+array-includes@^3.0.3, array-includes@^3.1.4, array-includes@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.5.tgz#2c320010db8d31031fd2a5f6b3bbd4b1aad31bdb"
+  integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
     get-intrinsic "^1.1.1"
     is-string "^1.0.7"
 
 array-union@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
-  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
+  integrity sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==
   dependencies:
     array-uniq "^1.0.1"
 
@@ -6488,12 +6574,12 @@ array-union@^2.1.0:
 array-uniq@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
-  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
+  integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
 
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
-  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
+  integrity sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==
 
 array.prototype.filter@^1.0.0:
   version "1.0.1"
@@ -6507,22 +6593,24 @@ array.prototype.filter@^1.0.0:
     is-string "^1.0.7"
 
 array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3, array.prototype.flat@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz#07e0975d84bbc7c48cd1879d609e682598d33e13"
-  integrity sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz#0b0c1567bf57b38b56b4c97b8aa72ab45e4adc7b"
+  integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.19.0"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
 
-array.prototype.flatmap@^1.2.1, array.prototype.flatmap@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz#908dc82d8a406930fdf38598d51e7411d18d4446"
-  integrity sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==
+array.prototype.flatmap@^1.2.1, array.prototype.flatmap@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz#a7e8ed4225f4788a70cd910abcf0791e76a5534f"
+  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.19.0"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
 
 array.prototype.map@^1.0.4:
   version "1.0.4"
@@ -6535,10 +6623,21 @@ array.prototype.map@^1.0.4:
     es-array-method-boxes-properly "^1.0.0"
     is-string "^1.0.7"
 
+array.prototype.reduce@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.reduce/-/array.prototype.reduce-1.0.4.tgz#8167e80089f78bff70a99e20bd4201d4663b0a6f"
+  integrity sha512-WnM+AjG/DvLRLo4DDl+r+SvCzYtD2Jd9oeBYMcEaI7t3fFrHY9M53/wdLcTvmZNQ70IU6Htj0emFkZ5TS+lrdw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.2"
+    es-array-method-boxes-properly "^1.0.0"
+    is-string "^1.0.7"
+
 arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
-  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
+  integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
 
 arrify@^2.0.1:
   version "2.0.1"
@@ -6548,7 +6647,7 @@ arrify@^2.0.1:
 asap@^2.0.0:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
+  integrity sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==
 
 asn1.js@^5.2.0:
   version "5.4.1"
@@ -6570,7 +6669,7 @@ asn1@~0.2.3:
 assert-plus@1.0.0, assert-plus@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
-  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
+  integrity sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==
 
 assert@^1.1.1:
   version "1.5.0"
@@ -6583,12 +6682,12 @@ assert@^1.1.1:
 assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
-  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
+  integrity sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==
 
 ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
-  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
 
 ast-types@^0.14.2:
   version "0.14.2"
@@ -6612,17 +6711,17 @@ async-each@^1.0.1:
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
   integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
-async@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+async@^2.6.4:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
-  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
 at-least-node@^1.0.0:
   version "1.0.0"
@@ -6637,7 +6736,7 @@ atob@^2.1.2:
 autolinker@~0.28.0:
   version "0.28.1"
   resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.28.1.tgz#0652b491881879f0775dace0cdca3233942a4e47"
-  integrity sha1-BlK0kYgYefB3XazgzcoyM5QqTkc=
+  integrity sha512-zQAFO1Dlsn69eXaO6+7YZc+v84aquQKbwpzCE3L0stj56ERn9hutFxPopViLjo9G+rWwjozRhgS5KJ25Xy19cQ==
   dependencies:
     gulp-header "^1.7.1"
 
@@ -6657,17 +6756,17 @@ autoprefixer@^9.8.6:
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
-  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
+  integrity sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==
 
 aws4@^1.8.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
-axe-core@^4.2.0, axe-core@^4.3.5:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
-  integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
+axe-core@^4.2.0, axe-core@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.3.tgz#11c74d23d5013c0fa5d183796729bc3482bd2f6f"
+  integrity sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==
 
 axobject-query@^2.2.0:
   version "2.2.0"
@@ -6689,9 +6788,9 @@ babel-jest@^26.6.3:
     slash "^3.0.0"
 
 babel-loader@^8.0.0, babel-loader@^8.2.2, babel-loader@^8.2.3:
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.4.tgz#95f5023c791b2e9e2ca6f67b0984f39c82ff384b"
-  integrity sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
+  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
   dependencies:
     find-cache-dir "^3.3.1"
     loader-utils "^2.0.0"
@@ -6706,7 +6805,7 @@ babel-plugin-add-module-exports@^1.0.4:
 babel-plugin-add-react-displayname@^0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz#339d4cddb7b65fd62d1df9db9fe04de134122bd5"
-  integrity sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=
+  integrity sha512-LY3+Y0XVDYcShHHorshrDbt4KFWL4bSeniCtl4SYZbask+Syngk1uMPCeN9+nSiZo6zX5s0RTq/J9Pnaaf/KHw==
 
 babel-plugin-apply-mdx-type-prop@1.6.22:
   version "1.6.22"
@@ -6793,13 +6892,13 @@ babel-plugin-optimize-clsx@^2.6.2:
     lodash "^4.17.15"
     object-hash "^2.0.3"
 
-babel-plugin-polyfill-corejs2@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.1.tgz#440f1b70ccfaabc6b676d196239b138f8a2cfba5"
-  integrity sha512-v7/T6EQcNfVLfcN2X8Lulb7DjprieyLWJK/zOWH5DUYcAgex9sP3h25Q+DLsX9TloXe3y1O8l2q2Jv9q8UVB9w==
+babel-plugin-polyfill-corejs2@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.2.tgz#e4c31d4c89b56f3cf85b92558954c66b54bd972d"
+  integrity sha512-LPnodUl3lS0/4wN3Rb+m+UK8s7lj2jcLRrjho4gLw+OJs+I4bvGXshINesY5xx/apM+biTnQ9reDI8yj+0M5+Q==
   dependencies:
-    "@babel/compat-data" "^7.13.11"
-    "@babel/helper-define-polyfill-provider" "^0.3.1"
+    "@babel/compat-data" "^7.17.7"
+    "@babel/helper-define-polyfill-provider" "^0.3.2"
     semver "^6.1.1"
 
 babel-plugin-polyfill-corejs3@^0.1.0:
@@ -6810,20 +6909,20 @@ babel-plugin-polyfill-corejs3@^0.1.0:
     "@babel/helper-define-polyfill-provider" "^0.1.5"
     core-js-compat "^3.8.1"
 
-babel-plugin-polyfill-corejs3@^0.5.0:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.2.tgz#aabe4b2fa04a6e038b688c5e55d44e78cd3a5f72"
-  integrity sha512-G3uJih0XWiID451fpeFaYGVuxHEjzKTHtc9uGFEjR6hHrvNzeS/PX+LLLcetJcytsB5m4j+K3o/EpXJNb/5IEQ==
+babel-plugin-polyfill-corejs3@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.5.3.tgz#d7e09c9a899079d71a8b670c6181af56ec19c5c7"
+  integrity sha512-zKsXDh0XjnrUEW0mxIHLfjBfnXSMr5Q/goMe/fxpQnLm07mcOZiIZHBNWCMx60HmdvjxfXcalac0tfFg0wqxyw==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.1"
+    "@babel/helper-define-polyfill-provider" "^0.3.2"
     core-js-compat "^3.21.0"
 
-babel-plugin-polyfill-regenerator@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.3.1.tgz#2c0678ea47c75c8cc2fbb1852278d8fb68233990"
-  integrity sha512-Y2B06tvgHYt1x0yz17jGkGeeMr5FeKUu+ASJ+N6nB5lQ8Dapfg42i0OVrf8PNGJ3zKL4A23snMi1IRwrqqND7A==
+babel-plugin-polyfill-regenerator@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.4.0.tgz#8f51809b6d5883e07e71548d75966ff7635527fe"
+  integrity sha512-RW1cnryiADFeHmfLS+WW/G431p1PsW5qdRdz0SDRi7TKcUgc7Oh/uXkT7MZ/+tGsT1BkczEAmD5XjUyJ5SWDTw==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.3.1"
+    "@babel/helper-define-polyfill-provider" "^0.3.2"
 
 babel-plugin-react-docgen@^4.2.1:
   version "4.2.1"
@@ -6842,7 +6941,7 @@ babel-plugin-react-remove-properties@^0.3.0:
 babel-plugin-syntax-dynamic-import@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
-  integrity sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=
+  integrity sha512-MioUE+LfjCEz65Wf7Z/Rm4XCP5k2c+TbMd2Z2JKc7U9uwjBhAfNPE48KC4GTGKhppMeYVepwDBNO/nGY6NYHBA==
 
 babel-plugin-transform-react-remove-prop-types@^0.4.24:
   version "0.4.24"
@@ -6924,17 +7023,17 @@ base@^0.11.1:
 basic-auth@^1.0.3:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-1.1.0.tgz#45221ee429f7ee1e5035be3f51533f1cdfd29884"
-  integrity sha1-RSIe5Cn37h5QNb4/UVM/HN/SmIQ=
+  integrity sha512-CtGuTyWf3ig+sgRyC7uP6DM3N+5ur/p8L+FPfsd+BbIfIs74TFfCajZTHnCw6K5dqM0bZEbRIqRy1fAdiUJhTA==
 
 batch-processor@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
-  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+  integrity sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==
 
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
-  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
+  integrity sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==
   dependencies:
     tweetnacl "^0.14.3"
 
@@ -6982,7 +7081,7 @@ bindings@^1.5.0:
   dependencies:
     file-uri-to-path "1.0.0"
 
-bluebird@^3.3.5, bluebird@^3.5.5:
+bluebird@^3.5.5:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -6993,35 +7092,37 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
   integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
 
 bn.js@^5.0.0, bn.js@^5.1.1:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
-  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
+  integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
 
-body-parser@1.19.2:
-  version "1.19.2"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.2.tgz#4714ccd9c157d44797b8b5607d72c0b89952f26e"
-  integrity sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==
+body-parser@1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
+  integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==
   dependencies:
     bytes "3.1.2"
     content-type "~1.0.4"
     debug "2.6.9"
-    depd "~1.1.2"
-    http-errors "1.8.1"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
     iconv-lite "0.4.24"
-    on-finished "~2.3.0"
-    qs "6.9.7"
-    raw-body "2.4.3"
+    on-finished "2.4.1"
+    qs "6.10.3"
+    raw-body "2.5.1"
     type-is "~1.6.18"
+    unpipe "1.0.0"
 
 boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
+  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
 boolify@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/boolify/-/boolify-1.0.1.tgz#b5c09e17cacd113d11b7bb3ed384cc012994d86b"
-  integrity sha1-tcCeF8rNET0Rt7s+04TMASmU2Gs=
+  integrity sha512-ma2q0Tc760dW54CdOyJjhrg/a54317o1zYADQJFgperNGKIKgAUGIcKnuMiff8z57+yGlrGNEt4lPgZfCgTJgA==
 
 boxen@^5.1.2:
   version "5.1.2"
@@ -7078,7 +7179,7 @@ braces@^3.0.2, braces@~3.0.2:
 brorand@^1.0.1, brorand@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
-  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
+  integrity sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==
 
 browser-assert@^1.2.1:
   version "1.2.1"
@@ -7151,16 +7252,15 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.1, browserslist@^4.17.5, browserslist@^4.19.1, browserslist@^4.6.6:
-  version "4.20.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
-  integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==
+browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.1, browserslist@^4.20.2, browserslist@^4.21.3, browserslist@^4.6.6:
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
+  integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==
   dependencies:
-    caniuse-lite "^1.0.30001317"
-    electron-to-chromium "^1.4.84"
-    escalade "^3.1.1"
-    node-releases "^2.0.2"
-    picocolors "^1.0.0"
+    caniuse-lite "^1.0.30001370"
+    electron-to-chromium "^1.4.202"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.5"
 
 bs-logger@0.x:
   version "0.2.6"
@@ -7196,7 +7296,7 @@ buffer-from@1.x, buffer-from@^1.0.0:
 buffer-xor@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
-  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
+  integrity sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==
 
 buffer@^4.3.0:
   version "4.9.2"
@@ -7210,17 +7310,17 @@ buffer@^4.3.0:
 builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
-  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
+  integrity sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==
 
 builtins@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
-  integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
+  integrity sha512-uYBjakWipfaO/bXI7E8rq6kpwHRZK5cNYrUv2OzZSI/FvmdMyXJ2tG9dKcjEC5YHmHpUAwsargWIZNWdxb/bnQ==
 
 byline@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/byline/-/byline-5.0.0.tgz#741c5216468eadc457b03410118ad77de8c1ddb1"
-  integrity sha1-dBxSFkaOrcRXsDQQEYrXfejB3bE=
+  integrity sha512-s6webAy+R4SR8XVuJWt2V2rGvhnrhxN+9S15GNuTK3wKPOXFF6RNc+8ug2XhH+2s4f+uudG4kUVYmYOQWL2g0Q==
 
 byte-size@^7.0.0:
   version "7.0.1"
@@ -7230,7 +7330,7 @@ byte-size@^7.0.0:
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
-  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
+  integrity sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==
 
 bytes@3.1.2:
   version "3.1.2"
@@ -7238,22 +7338,22 @@ bytes@3.1.2:
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
 c8@^7.6.0:
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/c8/-/c8-7.11.0.tgz#b3ab4e9e03295a102c47ce11d4ef6d735d9a9ac9"
-  integrity sha512-XqPyj1uvlHMr+Y1IeRndC2X5P7iJzJlEJwBpCdBbq2JocXOgJfr+JVfJkyNMGROke5LfKrhSFXGFXnwnRJAUJw==
+  version "7.12.0"
+  resolved "https://registry.yarnpkg.com/c8/-/c8-7.12.0.tgz#402db1c1af4af5249153535d1c84ad70c5c96b14"
+  integrity sha512-CtgQrHOkyxr5koX1wEUmN/5cfDa2ckbHRA4Gy5LAL0zaCFtVWJS5++n+w4/sr2GWGerBxgTjpKeDclk/Qk6W/A==
   dependencies:
     "@bcoe/v8-coverage" "^0.2.3"
-    "@istanbuljs/schema" "^0.1.2"
+    "@istanbuljs/schema" "^0.1.3"
     find-up "^5.0.0"
     foreground-child "^2.0.0"
-    istanbul-lib-coverage "^3.0.1"
+    istanbul-lib-coverage "^3.2.0"
     istanbul-lib-report "^3.0.0"
-    istanbul-reports "^3.0.2"
-    rimraf "^3.0.0"
+    istanbul-reports "^3.1.4"
+    rimraf "^3.0.2"
     test-exclude "^6.0.0"
-    v8-to-istanbul "^8.0.0"
+    v8-to-istanbul "^9.0.0"
     yargs "^16.2.0"
-    yargs-parser "^20.2.7"
+    yargs-parser "^20.2.9"
 
 cacache@^12.0.2:
   version "12.0.4"
@@ -7326,7 +7426,7 @@ call-bind@^1.0.0, call-bind@^1.0.2:
 call-me-maybe@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
-  integrity sha1-JtII6onje1y95gJQoV8DHBak1ms=
+  integrity sha512-wCyFsDQkKPwwF8BDwOiWNx/9K45L/hvggQiDbve+viMNMQnWhrlYIuBk09offfwCRtCO9P6XwUttufzU11WCVw==
 
 callsites@^3.0.0:
   version "3.1.0"
@@ -7378,10 +7478,10 @@ camelcase@^6.0.0, camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
-caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.30001317:
-  version "1.0.30001320"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001320.tgz#8397391bec389b8ccce328636499b7284ee13285"
-  integrity sha512-MWPzG54AGdo3nWx7zHZTefseM5Y1ccM7hlQKHRqJkPozUaw3hNbBTMmLn16GG2FUzjR13Cr3NPfhIieX5PzXDA==
+caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001370:
+  version "1.0.30001375"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001375.tgz#8e73bc3d1a4c800beb39f3163bf0190d7e5d7672"
+  integrity sha512-kWIMkNzLYxSvnjy0hL8w1NOaWNr2rn39RTAVyIwcw8juu60bZDWiF1/loOYANzjtJmy6qPgNmn38ro5Pygagdw==
 
 canvas-confetti@^1.4.0:
   version "1.5.1"
@@ -7403,7 +7503,7 @@ case-sensitive-paths-webpack-plugin@^2.3.0:
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
-  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
+  integrity sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==
 
 ccount@^1.0.0:
   version "1.1.0"
@@ -7413,7 +7513,7 @@ ccount@^1.0.0:
 chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
-  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
+  integrity sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==
   dependencies:
     ansi-styles "^2.2.1"
     escape-string-regexp "^1.0.2"
@@ -7463,39 +7563,35 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
-charcodes@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4"
-  integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
-
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-cheerio-select@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823"
-  integrity sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==
+cheerio-select@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-2.1.0.tgz#4d8673286b8126ca2a8e42740d5e3c4884ae21b4"
+  integrity sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==
   dependencies:
-    css-select "^4.1.3"
-    css-what "^5.0.1"
-    domelementtype "^2.2.0"
-    domhandler "^4.2.0"
-    domutils "^2.7.0"
+    boolbase "^1.0.0"
+    css-select "^5.1.0"
+    css-what "^6.1.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
 
 cheerio@^1.0.0-rc.3:
-  version "1.0.0-rc.10"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.10.tgz#2ba3dcdfcc26e7956fc1f440e61d51c643379f3e"
-  integrity sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==
-  dependencies:
-    cheerio-select "^1.5.0"
-    dom-serializer "^1.3.2"
-    domhandler "^4.2.0"
-    htmlparser2 "^6.1.0"
-    parse5 "^6.0.1"
-    parse5-htmlparser2-tree-adapter "^6.0.1"
-    tslib "^2.2.0"
+  version "1.0.0-rc.12"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.12.tgz#788bf7466506b1c6bf5fae51d24a2c4d62e47683"
+  integrity sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==
+  dependencies:
+    cheerio-select "^2.1.0"
+    dom-serializer "^2.0.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    htmlparser2 "^8.0.1"
+    parse5 "^7.0.0"
+    parse5-htmlparser2-tree-adapter "^7.0.0"
 
 cherry-pick@^0.5.0:
   version "0.5.0"
@@ -7598,9 +7694,9 @@ clean-css@^4.2.3:
     source-map "~0.6.0"
 
 clean-css@^5.2.2:
-  version "5.2.4"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.2.4.tgz#982b058f8581adb2ae062520808fb2429bd487a4"
-  integrity sha512-nKseG8wCzEuji/4yrgM/5cthL9oTDc5UOQyFMvW/Q53oP6gLH690o1NbuTh6Y18nujr7BxlsFuS7gXLnLzKJGg==
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.1.tgz#d0610b0b90d125196a2894d35366f734e5d7aa32"
+  integrity sha512-lCr8OHhiWCTw4v8POJovCoh4T7I9U11yVsPjMWWnnMmp9ZowCxyad1Pathle/9HjaDp+fdQKjO9fQydE6RHTZg==
   dependencies:
     source-map "~0.6.0"
 
@@ -7617,7 +7713,7 @@ cli-boxes@^2.2.1:
 cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
-  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
+  integrity sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==
   dependencies:
     restore-cursor "^2.0.0"
 
@@ -7629,13 +7725,13 @@ cli-cursor@^3.1.0:
     restore-cursor "^3.1.0"
 
 cli-table3@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.1.tgz#36ce9b7af4847f288d3cdd081fbd09bf7bd237b8"
-  integrity sha512-w0q/enDHhPLq44ovMGdQeeDLvwxwavsJX7oQGYt/LrBlYsyaxyDnp6z3QzFut/6kLLKnlcUVJLrpB7KBfgG/RA==
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.2.tgz#aaf5df9d8b5bf12634dc8b3040806a0c07120d2a"
+  integrity sha512-QyavHCaIC80cMivimWu4aWHilIpiDpfm3hGmqAmXVL1UsnbLuBSMd21hTX6VY4ZSDSM73ESLeF8TOYId3rBTbw==
   dependencies:
     string-width "^4.2.0"
   optionalDependencies:
-    colors "1.4.0"
+    "@colors/colors" "1.5.0"
 
 cli-width@^2.0.0:
   version "2.2.1"
@@ -7648,9 +7744,9 @@ cli-width@^3.0.0:
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
 clipboard@^2.0.0:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.10.tgz#e61f6f7139ac5044c58c0484dcac9fb2a918bfd6"
-  integrity sha512-cz3m2YVwFz95qSEbCDi2fzLN/epEN9zXBvfgAoGkvGOJZATMl9gtTDVOtBYkx2ODUJl2kvmud7n32sV2BpYR4g==
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.11.tgz#62180360b97dd668b6b3a84ec226975762a70be5"
+  integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
   dependencies:
     good-listener "^1.2.2"
     select "^1.1.2"
@@ -7695,17 +7791,17 @@ clone-deep@^4.0.1:
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
-  integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
+  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
 clone@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
-  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+  integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
 clsx@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
-  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
 cmd-shim@^4.1.0:
   version "4.1.0"
@@ -7717,12 +7813,12 @@ cmd-shim@^4.1.0:
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
-  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
+  integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
 
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
-  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
+  integrity sha512-RpAVKQA5T63xEj6/giIbUEtZwJ4UFIc3ZtvEkiaUERylqe8xb5IvqcgOurZLahv93CLKfxcw5YI+DZcUBRyLXA==
 
 codesandbox-import-util-types@^1.3.7:
   version "1.3.7"
@@ -7770,7 +7866,7 @@ collect-v8-coverage@^1.0.0:
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
-  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
+  integrity sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==
   dependencies:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
@@ -7792,7 +7888,7 @@ color-convert@^2.0.1:
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
 color-name@~1.1.4:
   version "1.1.4"
@@ -7809,7 +7905,7 @@ colorette@^1.2.2:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
   integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
 
-colors@1.4.0, colors@^1.4.0:
+colors@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
   integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
@@ -7877,7 +7973,7 @@ common-tags@^1.4.0, common-tags@^1.8.0:
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
-  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
+  integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
 compare-func@^2.0.0:
   version "2.0.0"
@@ -7895,12 +7991,12 @@ component-emitter@^1.2.1:
 component-props@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/component-props/-/component-props-1.1.1.tgz#f9b7df9b9927b6e6d97c9bd272aa867670f34944"
-  integrity sha1-+bffm5kntubZfJvScqqGdnDzSUQ=
+  integrity sha512-69pIRJs9fCCHRqCz3390YF2LV1Lu6iEMZ5zuVqqUn+G20V9BNXlMs0cWawWeW9g4Ynmg29JmkG6R7/lUJoGd1Q==
 
 component-xor@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/component-xor/-/component-xor-0.0.4.tgz#c55d83ccc1b94cd5089a4e93fa7891c7263e59aa"
-  integrity sha1-xV2DzMG5TNUImk6T+niRxyY+Wao=
+  integrity sha512-ZIt6sla8gfo+AFVRZoZOertcnD5LJaY2T9CKE2j13NJxQt/mUafD69Bl7/Y4AnpI2LGjiXH7cOfJDx/n2G9edA==
 
 compressible@~2.0.16:
   version "2.0.18"
@@ -7930,7 +8026,7 @@ compute-scroll-into-view@^1.0.17:
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
-  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
 concat-stream@^1.5.0, concat-stream@^1.5.2:
   version "1.6.2"
@@ -7980,12 +8076,12 @@ console-browserify@^1.1.0:
 console-control-strings@^1.0.0, console-control-strings@^1.1.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-  integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
+  integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==
 
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
-  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
+  integrity sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==
 
 content-disposition@0.5.4:
   version "0.5.4"
@@ -8098,12 +8194,12 @@ convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.6.0,
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
-  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
-cookie@0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
-  integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+cookie@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
 copy-concurrently@^1.0.0:
   version "1.0.5"
@@ -8120,30 +8216,30 @@ copy-concurrently@^1.0.0:
 copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
-  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
+  integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
 
-core-js-compat@^3.20.2, core-js-compat@^3.21.0, core-js-compat@^3.8.1:
-  version "3.21.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.21.1.tgz#cac369f67c8d134ff8f9bd1623e3bc2c42068c82"
-  integrity sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==
+core-js-compat@^3.21.0, core-js-compat@^3.22.1, core-js-compat@^3.8.1:
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.24.1.tgz#d1af84a17e18dfdd401ee39da9996f9a7ba887de"
+  integrity sha512-XhdNAGeRnTpp8xbD+sR/HFDK9CbeeeqXT6TuofXh3urqEevzkWmLRgrVoykodsw8okqo2pu1BOmuCKrHx63zdw==
   dependencies:
-    browserslist "^4.19.1"
+    browserslist "^4.21.3"
     semver "7.0.0"
 
 core-js-pure@^3.20.2, core-js-pure@^3.8.1:
-  version "3.21.1"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.21.1.tgz#8c4d1e78839f5f46208de7230cebfb72bc3bdb51"
-  integrity sha512-12VZfFIu+wyVbBebyHmRTuEE/tZrB4tJToWcwAMcsp3h4+sHR+fMJWbKpYiCRWlhFBq+KNyO8rIV9rTkeVmznQ==
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.24.1.tgz#8839dde5da545521bf282feb7dc6d0b425f39fd3"
+  integrity sha512-r1nJk41QLLPyozHUUPmILCEMtMw24NG4oWK6RbsDdjzQgg9ZvrUsPBj1MnG0wXXp1DCDU6j+wUvEmBSrtRbLXg==
 
 core-js@^3.0.4, core-js@^3.1.4, core-js@^3.14.0, core-js@^3.6.5, core-js@^3.8.2:
-  version "3.21.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
-  integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.24.1.tgz#cf7724d41724154010a6576b7b57d94c5d66e64f"
+  integrity sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg==
 
 core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+  integrity sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==
 
 core-util-is@~1.0.0:
   version "1.0.3"
@@ -8153,7 +8249,7 @@ core-util-is@~1.0.0:
 corser@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/corser/-/corser-2.0.1.tgz#8eda252ecaab5840dcd975ceb90d9370c819ff87"
-  integrity sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=
+  integrity sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==
 
 cosmiconfig@^6.0.0:
   version "6.0.0"
@@ -8318,19 +8414,30 @@ css-loader@^5.0.1:
 css-mediaquery@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
-  integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=
+  integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==
 
 css-select@^4.1.3:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
-  integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
+  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
   dependencies:
     boolbase "^1.0.0"
-    css-what "^5.1.0"
-    domhandler "^4.3.0"
+    css-what "^6.0.1"
+    domhandler "^4.3.1"
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
+css-select@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^6.1.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    nth-check "^2.0.1"
+
 css-tree@^1.1.2, css-tree@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
@@ -8339,10 +8446,10 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
-css-what@^5.0.1, css-what@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
-  integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
+css-what@^6.0.1, css-what@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
 cssesc@^3.0.0:
   version "3.0.0"
@@ -8374,21 +8481,21 @@ cssstyle@^2.3.0:
     cssom "~0.3.6"
 
 csstype@^3.0.2:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
-  integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
+  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
 
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
-  integrity sha1-mI3zP+qxke95mmE2nddsF635V+o=
+  integrity sha512-/fITjgjGU50vjQ4FH6eUoYu+iUoUKIXws2hL15JJpIR+BbTxaXQsMuuyjtNh2WqsSBS5nsaZHFsFecyw5CCAng==
   dependencies:
     array-find-index "^1.0.1"
 
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
-  integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
+  integrity sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A==
 
 d@1, d@^1.0.1:
   version "1.0.1"
@@ -8398,7 +8505,7 @@ d@1, d@^1.0.1:
     es5-ext "^0.10.50"
     type "^1.0.1"
 
-damerau-levenshtein@^1.0.7:
+damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
@@ -8411,7 +8518,7 @@ dargs@^7.0.0:
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
-  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
+  integrity sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==
   dependencies:
     assert-plus "^1.0.0"
 
@@ -8441,14 +8548,14 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4:
+debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
-debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.7:
+debug@^3.0.0, debug@^3.1.0, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
@@ -8458,12 +8565,12 @@ debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.7:
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
-  integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
+  integrity sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==
 
 decamelize-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
-  integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
+  integrity sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==
   dependencies:
     decamelize "^1.1.0"
     map-obj "^1.0.0"
@@ -8471,7 +8578,7 @@ decamelize-keys@^1.1.0:
 decamelize@^1.1.0, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
+  integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
 decimal.js@^10.2.1:
   version "10.3.1"
@@ -8481,12 +8588,12 @@ decimal.js@^10.2.1:
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
-  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
+  integrity sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==
 
 dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
-  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
+  integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
 
 deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.4"
@@ -8501,7 +8608,7 @@ deepmerge@^4.2.2:
 default-browser-id@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-1.0.4.tgz#e59d09a5d157b828b876c26816e61c3d2a2c203a"
-  integrity sha1-5Z0JpdFXuCi4dsJoFuYcPSosIDo=
+  integrity sha512-qPy925qewwul9Hifs+3sx1ZYn14obHxpkX+mPD369w4Rzg+YkJBgi3SOvwUq81nWSjqGUegIgEPwD8u+HUnxlw==
   dependencies:
     bplist-parser "^0.1.0"
     meow "^3.1.0"
@@ -8510,7 +8617,7 @@ default-browser-id@^1.0.4:
 defaults@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
-  integrity sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=
+  integrity sha512-s82itHOnYrN0Ib8r+z7laQz3sdE+4FP3d9Q7VLO7U+KRT+CR0GsWuyHxzdAY82I7cXv0G/twrqomTJLOssO5HA==
   dependencies:
     clone "^1.0.2"
 
@@ -8519,24 +8626,25 @@ define-lazy-prop@^2.0.0:
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
-define-properties@^1.1.2, define-properties@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
-  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+define-properties@^1.1.2, define-properties@^1.1.3, define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
   dependencies:
-    object-keys "^1.0.12"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
 
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
-  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
+  integrity sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==
   dependencies:
     is-descriptor "^0.1.0"
 
 define-property@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
-  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
+  integrity sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==
   dependencies:
     is-descriptor "^1.0.0"
 
@@ -8551,7 +8659,7 @@ define-property@^2.0.2:
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
-  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
 delegate@^3.1.2:
   version "3.2.0"
@@ -8561,12 +8669,17 @@ delegate@^3.1.2:
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
-  integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
+  integrity sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==
+
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
 
-depd@^1.1.2, depd@~1.1.2:
+depd@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
-  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
+  integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
 deprecation@^2.0.0, deprecation@^2.3.1:
   version "2.3.1"
@@ -8581,10 +8694,10 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
-destroy@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
-  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
 detab@2.0.4:
   version "2.0.4"
@@ -8596,12 +8709,12 @@ detab@2.0.4:
 detect-file@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
-  integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
+  integrity sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==
 
 detect-indent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
-  integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
+  integrity sha512-rlpvsxUtM0PQvy9iZe640/IWwWYyBsTApREbA1pHOpmOUIl9MkP/U4z7vTtg4Oaojvqhxt7sdufnT0EzGaR31g==
 
 detect-indent@^6.0.0:
   version "6.1.0"
@@ -8611,7 +8724,7 @@ detect-indent@^6.0.0:
 detect-libc@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
+  integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==
 
 detect-newline@^3.0.0:
   version "3.1.0"
@@ -8634,9 +8747,9 @@ detect-port@^1.3.0:
     debug "^2.6.0"
 
 dezalgo@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.3.tgz#7f742de066fc748bc8db820569dddce49bf0d456"
-  integrity sha1-f3Qt4Gb8dIvI24IFad3c5Jvw1FY=
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.4.tgz#751235260469084c132157dfa857f386d4c33d81"
+  integrity sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==
   dependencies:
     asap "^2.0.0"
     wrappy "1"
@@ -8644,7 +8757,7 @@ dezalgo@^1.0.0:
 diacritics-map@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/diacritics-map/-/diacritics-map-0.1.0.tgz#6dfc0ff9d01000a2edf2865371cac316e94977af"
-  integrity sha1-bfwP+dAQAKLt8oZTccrDFulJd68=
+  integrity sha512-3omnDTYrGigU0i4cJjvaKwD52B8aoqyX/NEIkukFFkogBemsIbhSa1O414fpTp5nuszJG6lvQ5vBvDVNCbSsaQ==
 
 diff-sequences@^26.6.2:
   version "26.6.2"
@@ -8682,7 +8795,7 @@ dir-glob@^3.0.1:
 discontinuous-range@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
-  integrity sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=
+  integrity sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ==
 
 dlv@^1.1.0:
   version "1.1.3"
@@ -8704,9 +8817,9 @@ doctrine@^3.0.0:
     esutils "^2.0.2"
 
 dom-accessibility-api@^0.5.9:
-  version "0.5.13"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.13.tgz#102ee5f25eacce09bdf1cfa5a298f86da473be4b"
-  integrity sha512-R305kwb5CcMDIpSHUnLyIAp7SrSPBx6F0VfQFB3M75xVMHhXJJIdePYgbPPh1o57vCHNu5QztokWUPsLjWzFqw==
+  version "0.5.14"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56"
+  integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==
 
 dom-converter@^0.2.0:
   version "0.2.0"
@@ -8715,14 +8828,6 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^5.0.1, dom-helpers@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
-  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dom-iterator@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-1.0.0.tgz#9c09899846ec41c2d257adc4d6015e4759ef05ad"
@@ -8731,15 +8836,24 @@ dom-iterator@^1.0.0:
     component-props "1.1.1"
     component-xor "0.0.4"
 
-dom-serializer@^1.0.1, dom-serializer@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
-  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+dom-serializer@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
   dependencies:
     domelementtype "^2.0.1"
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
 dom-walk@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
@@ -8750,10 +8864,10 @@ domain-browser@^1.1.1:
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
   integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
 
-domelementtype@^2.0.1, domelementtype@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
-  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
 
 domexception@^2.0.1:
   version "2.0.1"
@@ -8762,14 +8876,21 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.0:
+domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
   integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
   dependencies:
     domelementtype "^2.2.0"
 
-domutils@^2.5.2, domutils@^2.7.0, domutils@^2.8.0:
+domhandler@^5.0.1, domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
+domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
   integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
@@ -8778,6 +8899,15 @@ domutils@^2.5.2, domutils@^2.7.0, domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+domutils@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c"
+  integrity sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.1"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -8838,7 +8968,7 @@ duplexify@^3.4.2, duplexify@^3.6.0:
 ecc-jsbn@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
-  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
+  integrity sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==
   dependencies:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
@@ -8869,12 +8999,12 @@ editions@^2.2.0:
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
-  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-electron-to-chromium@^1.4.84:
-  version "1.4.94"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.94.tgz#f19206c977361264a51d53a7ea7ef861a94baa10"
-  integrity sha512-CoOKsuACoa0PAG3hQXxbh/XDiFcjGuSyGKUi09cjMHOt6RCi7/EXgXhaFF3I+aC89Omudqmkzd0YOQKxwtf/Bg==
+electron-to-chromium@^1.4.202:
+  version "1.4.218"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.218.tgz#d6b817b5454499a92c85888b42dc2ad075e4493a"
+  integrity sha512-INDylKH//YIf2w67D+IjkfVnGVrZ/D94DAU/FPPm6T4jEPbEDQvo9r2wTj0ncFdtJH8+V8BggZTaN8Rzk5wkgw==
 
 element-resize-detector@^1.2.2:
   version "1.2.4"
@@ -8919,7 +9049,7 @@ emoji-regex@^9.2.2:
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
-  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+  integrity sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==
 
 emojis-list@^3.0.0:
   version "3.0.0"
@@ -8929,7 +9059,7 @@ emojis-list@^3.0.0:
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
-  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
 encoding@^0.1.12:
   version "0.1.13"
@@ -8963,18 +9093,10 @@ enhanced-resolve@^4.1.1, enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^5.9.2:
-  version "5.9.2"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz#0224dcd6a43389ebfb2d55efee517e5466772dd9"
-  integrity sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==
-  dependencies:
-    graceful-fs "^4.2.4"
-    tapable "^2.2.0"
-
-enhanced-resolve@^5.9.3:
-  version "5.9.3"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
-  integrity sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==
+enhanced-resolve@^5.10.0:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
+  integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -8996,6 +9118,11 @@ entities@^3.0.1:
   resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
   integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
 
+entities@^4.2.0, entities@^4.3.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.3.1.tgz#c34062a94c865c322f9d67b4384e4169bcede6a4"
+  integrity sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==
+
 env-paths@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
@@ -9067,37 +9194,40 @@ error-ex@^1.2.0, error-ex@^1.3.1:
     is-arrayish "^0.2.1"
 
 error-stack-parser@^2.0.6:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.7.tgz#b0c6e2ce27d0495cf78ad98715e0cad1219abb57"
-  integrity sha512-chLOW0ZGRf4s8raLrDxa5sdkvPec5YdvwbFnqJme4rk0rFajP8mPtrDL1+I+CwrQDCjswDA5sREX7jYQDQs9vA==
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
+  integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
   dependencies:
-    stackframe "^1.1.1"
+    stackframe "^1.3.4"
 
-es-abstract@^1.19.0, es-abstract@^1.19.1:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.1.tgz#d4885796876916959de78edaa0df456627115ec3"
-  integrity sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==
+es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5, es-abstract@^1.20.1:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.1.tgz#027292cd6ef44bd12b1913b828116f54787d1814"
+  integrity sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==
   dependencies:
     call-bind "^1.0.2"
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
     get-intrinsic "^1.1.1"
     get-symbol-description "^1.0.0"
     has "^1.0.3"
-    has-symbols "^1.0.2"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
     internal-slot "^1.0.3"
     is-callable "^1.2.4"
-    is-negative-zero "^2.0.1"
+    is-negative-zero "^2.0.2"
     is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.1"
+    is-shared-array-buffer "^1.0.2"
     is-string "^1.0.7"
-    is-weakref "^1.0.1"
-    object-inspect "^1.11.0"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.0"
     object-keys "^1.1.1"
     object.assign "^4.1.2"
-    string.prototype.trimend "^1.0.4"
-    string.prototype.trimstart "^1.0.4"
-    unbox-primitive "^1.0.1"
+    regexp.prototype.flags "^1.4.3"
+    string.prototype.trimend "^1.0.5"
+    string.prototype.trimstart "^1.0.5"
+    unbox-primitive "^1.0.2"
 
 es-array-method-boxes-properly@^1.0.0:
   version "1.0.0"
@@ -9123,6 +9253,13 @@ es-module-lexer@^0.9.0:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
   integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
 
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -9133,23 +9270,23 @@ es-to-primitive@^1.2.1:
     is-symbol "^1.0.2"
 
 es5-ext@^0.10.35, es5-ext@^0.10.50:
-  version "0.10.59"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.59.tgz#71038939730eb6f4f165f1421308fb60be363bc6"
-  integrity sha512-cOgyhW0tIJyQY1Kfw6Kr0viu9ZlUctVchRMZ7R0HiH3dxTSp5zJDLecwxUqPUrGKMsgBI1wd1FL+d9Jxfi4cLw==
+  version "0.10.62"
+  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.62.tgz#5e6adc19a6da524bf3d1e02bbc8960e5eb49a9a5"
+  integrity sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==
   dependencies:
     es6-iterator "^2.0.3"
     es6-symbol "^3.1.3"
     next-tick "^1.1.0"
 
 es5-shim@^4.5.13:
-  version "4.6.5"
-  resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.6.5.tgz#2124bb073b7cede2ed23b122a1fd87bb7b0bb724"
-  integrity sha512-vfQ4UAai8szn0sAubCy97xnZ4sJVDD1gt/Grn736hg8D7540wemIb1YPrYZSTqlM2H69EQX1or4HU/tSwRTI3w==
+  version "4.6.7"
+  resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.6.7.tgz#bc67ae0fc3dd520636e0a1601cc73b450ad3e955"
+  integrity sha512-jg21/dmlrNQI7JyyA2w7n+yifSxBng0ZralnSfVZjoCawgNTCnS+yBCyVM9DL5itm7SUnDGgv7hcq2XCZX4iRQ==
 
 es6-iterator@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
-  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
+  integrity sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==
   dependencies:
     d "1"
     es5-ext "^0.10.35"
@@ -9186,12 +9323,12 @@ escalade@^3.1.1:
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
-  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
 
 escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+  integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
 escape-string-regexp@^2.0.0:
   version "2.0.0"
@@ -9283,9 +9420,9 @@ eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.6:
     resolve "^1.20.0"
 
 eslint-import-resolver-typescript@^2.4.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.0.tgz#1f9d391b636dccdbaa4a3b1a87eb9a8237e23963"
-  integrity sha512-MNHS3u5pebvROX4MjGP9coda589ZGfL1SqdxUV4kSrcclfDRWvNE2D+eljbnWVMvWDVRgT89nhscMHPKYGcObQ==
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz#a90a4a1c80da8d632df25994c4c5fdcdd02b8751"
+  integrity sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==
   dependencies:
     debug "^4.3.4"
     glob "^7.2.0"
@@ -9304,13 +9441,12 @@ eslint-loader@^4.0.2:
     object-hash "^2.0.3"
     schema-utils "^2.6.5"
 
-eslint-module-utils@^2.7.2, eslint-module-utils@^2.7.3:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
-  integrity sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==
+eslint-module-utils@^2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz#4f3e41116aaf13a20792261e61d3a2e7e0583974"
+  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
   dependencies:
     debug "^3.2.7"
-    find-up "^2.1.0"
 
 eslint-plugin-es@^3.0.0:
   version "3.0.1"
@@ -9328,26 +9464,7 @@ eslint-plugin-flowtype@^5.7.1:
     lodash "^4.17.15"
     string-natural-compare "^3.0.1"
 
-eslint-plugin-import@^2.22.1:
-  version "2.25.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz#322f3f916a4e9e991ac7af32032c25ce313209f1"
-  integrity sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==
-  dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flat "^1.2.5"
-    debug "^2.6.9"
-    doctrine "^2.1.0"
-    eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.7.2"
-    has "^1.0.3"
-    is-core-module "^2.8.0"
-    is-glob "^4.0.3"
-    minimatch "^3.0.4"
-    object.values "^1.1.5"
-    resolve "^1.20.0"
-    tsconfig-paths "^3.12.0"
-
-eslint-plugin-import@^2.26.0:
+eslint-plugin-import@^2.22.1, eslint-plugin-import@^2.26.0:
   version "2.26.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
   integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
@@ -9374,22 +9491,23 @@ eslint-plugin-jest@^24.3.6:
     "@typescript-eslint/experimental-utils" "^4.0.1"
 
 eslint-plugin-jsx-a11y@^6.4.1:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz#cdbf2df901040ca140b6ec14715c988889c2a6d8"
-  integrity sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==
+  version "6.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz#93736fc91b83fdc38cc8d115deedfc3091aef1ff"
+  integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==
   dependencies:
-    "@babel/runtime" "^7.16.3"
+    "@babel/runtime" "^7.18.9"
     aria-query "^4.2.2"
-    array-includes "^3.1.4"
+    array-includes "^3.1.5"
     ast-types-flow "^0.0.7"
-    axe-core "^4.3.5"
+    axe-core "^4.4.3"
     axobject-query "^2.2.0"
-    damerau-levenshtein "^1.0.7"
+    damerau-levenshtein "^1.0.8"
     emoji-regex "^9.2.2"
     has "^1.0.3"
-    jsx-ast-utils "^3.2.1"
+    jsx-ast-utils "^3.3.2"
     language-tags "^1.0.5"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
+    semver "^6.3.0"
 
 eslint-plugin-node@^11.1.0:
   version "11.1.0"
@@ -9404,9 +9522,9 @@ eslint-plugin-node@^11.1.0:
     semver "^6.1.0"
 
 eslint-plugin-prettier@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz#8b99d1e4b8b24a762472b4567992023619cb98e0"
-  integrity sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
+  integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
@@ -9415,35 +9533,30 @@ eslint-plugin-promise@^6.0.0:
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.0.0.tgz#017652c07c9816413a41e11c30adc42c3d55ff18"
   integrity sha512-7GPezalm5Bfi/E22PnQxDWH2iW9GTvAlUNTztemeHb6c1BniSyoeTrM87JkC0wYdi6aQrZX9p2qEiAno8aTcbw==
 
-eslint-plugin-react-hooks@^4.2.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
-  integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
-
-eslint-plugin-react-hooks@^4.6.0:
+eslint-plugin-react-hooks@^4.2.0, eslint-plugin-react-hooks@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
   integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
 eslint-plugin-react@^7.23.1, eslint-plugin-react@^7.23.2, eslint-plugin-react@^7.24.0:
-  version "7.29.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.29.4.tgz#4717de5227f55f3801a5fd51a16a4fa22b5914d2"
-  integrity sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==
+  version "7.30.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.30.1.tgz#2be4ab23ce09b5949c6631413ba64b2810fd3e22"
+  integrity sha512-NbEvI9jtqO46yJA3wcRF9Mo0lF9T/jhdHqhCHXiXtD+Zcb98812wvokjWpU7Q4QH5edo6dmqrukxVvWWXHlsUg==
   dependencies:
-    array-includes "^3.1.4"
-    array.prototype.flatmap "^1.2.5"
+    array-includes "^3.1.5"
+    array.prototype.flatmap "^1.3.0"
     doctrine "^2.1.0"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
     object.entries "^1.1.5"
     object.fromentries "^2.0.5"
-    object.hasown "^1.1.0"
+    object.hasown "^1.1.1"
     object.values "^1.1.5"
     prop-types "^15.8.1"
     resolve "^2.0.0-next.3"
     semver "^6.3.0"
-    string.prototype.matchall "^4.0.6"
+    string.prototype.matchall "^4.0.7"
 
 eslint-scope@5.1.1, eslint-scope@^5.0.0, eslint-scope@^5.1.1:
   version "5.1.1"
@@ -9669,7 +9782,7 @@ esutils@^2.0.2:
 etag@~1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
-  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
 eventemitter3@^4.0.0, eventemitter3@^4.0.4:
   version "4.0.7"
@@ -9740,12 +9853,12 @@ execa@^5.0.0, execa@^5.1.1:
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
-  integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
+  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
 
 expand-brackets@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
-  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
+  integrity sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==
   dependencies:
     debug "^2.3.3"
     define-property "^0.2.5"
@@ -9758,14 +9871,14 @@ expand-brackets@^2.1.4:
 expand-range@^1.8.1:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
-  integrity sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=
+  integrity sha512-AFASGfIlnIbkKPQwX1yHaDjFvh/1gyKJODme52V6IORh69uEYgZp0o9C+qsIGNVEiuuhQU0CSSl++Rlegg1qvA==
   dependencies:
     fill-range "^2.1.0"
 
 expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
-  integrity sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=
+  integrity sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==
   dependencies:
     homedir-polyfill "^1.0.1"
 
@@ -9782,37 +9895,38 @@ expect@^26.6.2:
     jest-regex-util "^26.0.0"
 
 express@^4.17.1:
-  version "4.17.3"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.17.3.tgz#f6c7302194a4fb54271b73a1fe7a06478c8f85a1"
-  integrity sha512-yuSQpz5I+Ch7gFrPCk4/c+dIBKlQUxtgwqzph132bsT6qhuzss6I8cLJQz7B3rFblzd6wtcI0ZbGltH/C4LjUg==
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.18.1.tgz#7797de8b9c72c857b9cd0e14a5eea80666267caf"
+  integrity sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.19.2"
+    body-parser "1.20.0"
     content-disposition "0.5.4"
     content-type "~1.0.4"
-    cookie "0.4.2"
+    cookie "0.5.0"
     cookie-signature "1.0.6"
     debug "2.6.9"
-    depd "~1.1.2"
+    depd "2.0.0"
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     etag "~1.8.1"
-    finalhandler "~1.1.2"
+    finalhandler "1.2.0"
     fresh "0.5.2"
+    http-errors "2.0.0"
     merge-descriptors "1.0.1"
     methods "~1.1.2"
-    on-finished "~2.3.0"
+    on-finished "2.4.1"
     parseurl "~1.3.3"
     path-to-regexp "0.1.7"
     proxy-addr "~2.0.7"
-    qs "6.9.7"
+    qs "6.10.3"
     range-parser "~1.2.1"
     safe-buffer "5.2.1"
-    send "0.17.2"
-    serve-static "1.14.2"
+    send "0.18.0"
+    serve-static "1.15.0"
     setprototypeof "1.2.0"
-    statuses "~1.5.0"
+    statuses "2.0.1"
     type-is "~1.6.18"
     utils-merge "1.0.1"
     vary "~1.1.2"
@@ -9827,14 +9941,14 @@ ext@^1.1.2:
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
-  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
+  integrity sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==
   dependencies:
     is-extendable "^0.1.0"
 
 extend-shallow@^3.0.0, extend-shallow@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
-  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
+  integrity sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==
   dependencies:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
@@ -9870,7 +9984,7 @@ extglob@^2.0.4:
 extsprintf@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
-  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
+  integrity sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==
 
 extsprintf@^1.2.0:
   version "1.4.1"
@@ -9928,7 +10042,7 @@ fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0:
 fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
-  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 fastq@^1.6.0:
   version "1.13.0"
@@ -9952,9 +10066,9 @@ fb-watchman@^2.0.0:
     bser "2.1.1"
 
 fetch-retry@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/fetch-retry/-/fetch-retry-5.0.2.tgz#4c55663a7c056cb45f182394e479464f0ff8f3e3"
-  integrity sha512-57Hmu+1kc6pKFUGVIobT7qw3NeAzY/uNN26bSevERLVvf6VGFR/ooDCOFBHMNDgAxBiU2YJq1D0vFzc6U1DcPw==
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/fetch-retry/-/fetch-retry-5.0.3.tgz#edfa3641892995f9afee94f25b168827aa97fe3d"
+  integrity sha512-uJQyMrX5IJZkhoEUBQ3EjxkeiZkppBd5jS/fMTJmfZxLSiaQjv2zD0kTvuvkSH89uFvgSlB6ueGpjD3HWN7Bxw==
 
 figgy-pudding@^3.5.1:
   version "3.5.2"
@@ -9964,7 +10078,7 @@ figgy-pudding@^3.5.1:
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
-  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
+  integrity sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==
   dependencies:
     escape-string-regexp "^1.0.5"
 
@@ -9998,13 +10112,12 @@ file-loader@^6.2.0:
     schema-utils "^3.0.0"
 
 file-system-cache@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-1.0.5.tgz#84259b36a2bbb8d3d6eb1021d3132ffe64cfff4f"
-  integrity sha1-hCWbNqK7uNPW6xAh0xMv/mTP/08=
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-1.1.0.tgz#984de17b976b75a77a27e08d6828137c1aa80fa1"
+  integrity sha512-IzF5MBq+5CR0jXx5RxPe4BICl/oEhBSXKaL9fLhAXrIfIUS77Hr4vzrYyqYMHN6uTt+BOqi3fDCTjjEBCjERKw==
   dependencies:
-    bluebird "^3.3.5"
-    fs-extra "^0.30.0"
-    ramda "^0.21.0"
+    fs-extra "^10.1.0"
+    ramda "^0.28.0"
 
 file-uri-to-path@1.0.0:
   version "1.0.0"
@@ -10025,7 +10138,7 @@ fill-range@^2.1.0:
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
-  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
+  integrity sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==
   dependencies:
     extend-shallow "^2.0.1"
     is-number "^3.0.0"
@@ -10042,19 +10155,19 @@ fill-range@^7.0.1:
 filter-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
-  integrity sha1-mzERErxsYSehbgFsbF1/GeCAXFs=
+  integrity sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==
 
-finalhandler@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
-  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
+finalhandler@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
+  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
   dependencies:
     debug "2.6.9"
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    on-finished "~2.3.0"
+    on-finished "2.4.1"
     parseurl "~1.3.3"
-    statuses "~1.5.0"
+    statuses "2.0.1"
     unpipe "~1.0.0"
 
 find-babel-config@^1.2.0:
@@ -10086,15 +10199,15 @@ find-cache-dir@^3.2.0, find-cache-dir@^3.3.1:
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
-  integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=
+  integrity sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==
   dependencies:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
-find-up@^2.0.0, find-up@^2.1.0:
+find-up@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
-  integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
+  integrity sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==
   dependencies:
     locate-path "^2.0.0"
 
@@ -10154,9 +10267,9 @@ flatted@^2.0.0:
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
 flatted@^3.1.0:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
-  integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.6.tgz#022e9218c637f9f3fc9c35ab9c9193f05add60b2"
+  integrity sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==
 
 flush-write-stream@^1.0.0:
   version "1.1.1"
@@ -10167,9 +10280,9 @@ flush-write-stream@^1.0.0:
     readable-stream "^2.3.6"
 
 follow-redirects@^1.0.0:
-  version "1.14.9"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
-  integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
+  version "1.15.1"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
+  integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -10181,7 +10294,7 @@ for-each@^0.3.3:
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
-  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
+  integrity sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==
 
 foreground-child@^2.0.0:
   version "2.0.0"
@@ -10194,7 +10307,7 @@ foreground-child@^2.0.0:
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
-  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
+  integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==
 
 fork-ts-checker-webpack-plugin@^4.1.6:
   version "4.1.6"
@@ -10210,9 +10323,9 @@ fork-ts-checker-webpack-plugin@^4.1.6:
     worker-rpc "^0.1.0"
 
 fork-ts-checker-webpack-plugin@^6.0.4:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz#0282b335fa495a97e167f69018f566ea7d2a2b5e"
-  integrity sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw==
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz#4f67183f2f9eb8ba7df7177ce3cf3e75cdafb340"
+  integrity sha512-m5cUmF30xkZ7h4tWUgTAcEaKmUW7tfyUyTqNNOz7OxWJ0v1VWKTcOvH8FWHUwSjlW/356Ijc9vi3XfcPstpQKA==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@types/json-schema" "^7.0.5"
@@ -10249,7 +10362,7 @@ form-data@~2.3.2:
 format@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
-  integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
+  integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
 
 forwarded@0.2.0:
   version "0.2.0"
@@ -10259,7 +10372,7 @@ forwarded@0.2.0:
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
-  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
+  integrity sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==
   dependencies:
     map-cache "^0.2.2"
 
@@ -10288,31 +10401,20 @@ framesync@6.0.1:
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
-  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+  integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
 
 from2@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
-  integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
+  integrity sha512-OMcX/4IC/uqEPVgGeyfN22LJk6AZrMkRZHxcHBMBvHScDGgwTm2GT2Wkgtocyd3JfZffjj2kYUDXXII0Fk9W0g==
   dependencies:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra@^0.30.0:
-  version "0.30.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-0.30.0.tgz#f233ffcc08d4da7d432daa449776989db1df93f0"
-  integrity sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^2.1.0"
-    klaw "^1.0.0"
-    path-is-absolute "^1.0.0"
-    rimraf "^2.2.8"
-
-fs-extra@^10.0.0:
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.1.tgz#27de43b4320e833f6867cc044bfce29fdf0ef3b8"
-  integrity sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag==
+fs-extra@^10.0.0, fs-extra@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
   dependencies:
     graceful-fs "^4.2.0"
     jsonfile "^6.0.1"
@@ -10351,7 +10453,7 @@ fs-minipass@^2.0.0, fs-minipass@^2.1.0:
   dependencies:
     minipass "^3.0.0"
 
-fs-monkey@1.0.3:
+fs-monkey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.3.tgz#ae3ac92d53bb328efe0e9a1d9541f6ad8d48e2d3"
   integrity sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==
@@ -10364,7 +10466,7 @@ fs-readdir-recursive@^1.1.0:
 fs-write-stream-atomic@^1.0.8:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz#b47df53493ef911df75731e70a9ded0189db40c9"
-  integrity sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=
+  integrity sha512-gehEzmPn2nAwr39eay+x3X34Ra+M2QlVUTLhkXPjWdeO8RF9kszk116avgBJM3ZyNHgHXBNx+VmPaFC36k0PzA==
   dependencies:
     graceful-fs "^4.1.2"
     iferr "^0.1.5"
@@ -10374,7 +10476,7 @@ fs-write-stream-atomic@^1.0.8:
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
-  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 fsevents@^1.2.7:
   version "1.2.13"
@@ -10394,7 +10496,7 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-function.prototype.name@^1.1.0, function.prototype.name@^1.1.2:
+function.prototype.name@^1.1.0, function.prototype.name@^1.1.2, function.prototype.name@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
   integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
@@ -10407,12 +10509,12 @@ function.prototype.name@^1.1.0, function.prototype.name@^1.1.2:
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
-  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+  integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
 
 functions-have-names@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.2.tgz#98d93991c39da9361f8e50b337c4f6e41f120e21"
-  integrity sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA==
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
 gauge@^3.0.0:
   version "3.0.2"
@@ -10432,7 +10534,7 @@ gauge@^3.0.0:
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
-  integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
+  integrity sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==
   dependencies:
     aproba "^1.0.3"
     console-control-strings "^1.0.0"
@@ -10454,13 +10556,13 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
-  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.2.tgz#336975123e05ad0b7ba41f152ee4aadbea6cf598"
+  integrity sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==
   dependencies:
     function-bind "^1.1.1"
     has "^1.0.3"
-    has-symbols "^1.0.1"
+    has-symbols "^1.0.3"
 
 get-package-type@^0.1.0:
   version "0.1.0"
@@ -10490,7 +10592,7 @@ get-port@^5.1.1:
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
-  integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
+  integrity sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==
 
 get-stdin@^7.0.0:
   version "7.0.0"
@@ -10527,12 +10629,12 @@ get-symbol-description@^1.0.0:
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
-  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
+  integrity sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==
 
 getpass@^0.1.1:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
-  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
+  integrity sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==
   dependencies:
     assert-plus "^1.0.0"
 
@@ -10550,7 +10652,7 @@ git-raw-commits@^2.0.8:
 git-remote-origin-url@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz#5282659dae2107145a11126112ad3216ec5fa65f"
-  integrity sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=
+  integrity sha512-eU+GGrZgccNJcsDH5LkXR3PB9M958hxc7sbA8DFJjrv9j4L2P/eZfKhM+QD6wyzpiv+b1BpK0XrYCxkovtjSLw==
   dependencies:
     gitconfiglocal "^1.0.0"
     pify "^2.3.0"
@@ -10581,7 +10683,7 @@ git-url-parse@^11.4.4:
 gitconfiglocal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz#41d045f3851a5ea88f03f24ca1c6178114464b9b"
-  integrity sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=
+  integrity sha512-spLUXeTAVHxDtKsJc8FkFVgFtMdEN9qPGpL23VfSHx4fP4+Ds097IXLvymbnDH8FnmxX5Nr9bPw3A+AQ6mWEaQ==
   dependencies:
     ini "^1.3.2"
 
@@ -10593,7 +10695,7 @@ github-slugger@^1.0.0:
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
-  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
+  integrity sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==
   dependencies:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
@@ -10615,7 +10717,7 @@ glob-promise@^3.4.0:
 glob-to-regexp@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
-  integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
+  integrity sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==
 
 glob-to-regexp@^0.4.1:
   version "0.4.1"
@@ -10635,14 +10737,14 @@ glob@7.1.7:
     path-is-absolute "^1.0.0"
 
 glob@^7.0.0, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
-  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
     inherits "2"
-    minimatch "^3.0.4"
+    minimatch "^3.1.1"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
@@ -10665,7 +10767,7 @@ global-modules@^2.0.0:
 global-prefix@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
-  integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=
+  integrity sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==
   dependencies:
     expand-tilde "^2.0.2"
     homedir-polyfill "^1.0.1"
@@ -10696,16 +10798,16 @@ globals@^11.1.0, globals@^11.7.0:
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.2.0, globals@^13.6.0, globals@^13.9.0:
-  version "13.13.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.13.0.tgz#ac32261060d8070e2719dd6998406e27d2b5727b"
-  integrity sha512-EQ7Q18AJlPwp3vUDL4mKA0KXrXyNIQyWon6T6XQiBQF0XHvRsiCSrWmmeATpUzdJN2HhWZU6Pdl0a9zdep5p6A==
+  version "13.17.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.17.0.tgz#902eb1e680a41da93945adbdcb5a9f361ba69bd4"
+  integrity sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==
   dependencies:
     type-fest "^0.20.2"
 
 globalthis@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.2.tgz#2a235d34f4d8036219f7e34929b5de9e18166b8b"
-  integrity sha512-ZQnSFO1la8P7auIOQECnm0sSuoMeaSq0EEdXMBFF2QJO4uNcwbyhSgG3MruWNbFTqCLmxVwGOl7LZ9kASvHdeQ==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.3.tgz#5852882a52b80dc301b0660273e1ed082f0b6ccf"
+  integrity sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==
   dependencies:
     define-properties "^1.1.3"
 
@@ -10748,19 +10850,19 @@ globrex@^0.1.2:
 good-listener@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
-  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  integrity sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==
   dependencies:
     delegate "^3.1.2"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
-  version "4.2.9"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.9.tgz#041b05df45755e587a24942279b9d113146e1c96"
-  integrity sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
 gray-matter@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-2.1.1.tgz#3042d9adec2a1ded6a7707a9ed2380f8a17a430e"
-  integrity sha1-MELZrewqHe1qdwep7SOA+KF6Qw4=
+  integrity sha512-vbmvP1Fe/fxuT2QuLVcqb2BfK7upGhhbLIt9/owWEvPYrZZEkelLcq2HqzxosV+PQ67dUFLaAeNpH7C4hhICAA==
   dependencies:
     ansi-red "^0.1.1"
     coffee-script "^1.12.4"
@@ -10781,7 +10883,7 @@ gray-matter@^4.0.3:
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
-  integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
+  integrity sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==
 
 gulp-header@^1.7.1:
   version "1.8.12"
@@ -10814,7 +10916,7 @@ handlebars@^4.7.7:
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
-  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
+  integrity sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==
 
 har-validator@~5.1.3:
   version "5.1.5"
@@ -10832,19 +10934,19 @@ hard-rejection@^2.1.0:
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
-  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
+  integrity sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==
   dependencies:
     ansi-regex "^2.0.0"
 
-has-bigints@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
-  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
 
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+  integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
 
 has-flag@^4.0.0:
   version "4.0.0"
@@ -10854,10 +10956,17 @@ has-flag@^4.0.0:
 has-glob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-glob/-/has-glob-1.0.0.tgz#9aaa9eedbffb1ba3990a7b0010fb678ee0081207"
-  integrity sha1-mqqe7b/7G6OZCnsAEPtnjuAIEgc=
+  integrity sha512-D+8A457fBShSEI3tFCj65PAbT++5sKiFtdCdOam0gnfBgw9D277OERk+HM9qYJXmdVLZ/znez10SqHN0BBQ50g==
   dependencies:
     is-glob "^3.0.0"
 
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
 has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
@@ -10873,12 +10982,12 @@ has-tostringtag@^1.0.0:
 has-unicode@^2.0.0, has-unicode@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-  integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
+  integrity sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==
 
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
-  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
+  integrity sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==
   dependencies:
     get-value "^2.0.3"
     has-values "^0.1.4"
@@ -10887,7 +10996,7 @@ has-value@^0.3.1:
 has-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
-  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
+  integrity sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==
   dependencies:
     get-value "^2.0.6"
     has-values "^1.0.0"
@@ -10896,12 +11005,12 @@ has-value@^1.0.0:
 has-values@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
-  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
+  integrity sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==
 
 has-values@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
-  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
+  integrity sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==
   dependencies:
     is-number "^3.0.0"
     kind-of "^4.0.0"
@@ -11063,7 +11172,7 @@ highlight.js@^10.4.1, highlight.js@~10.7.0:
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
-  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
+  integrity sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==
   dependencies:
     hash.js "^1.0.3"
     minimalistic-assert "^1.0.0"
@@ -11104,9 +11213,9 @@ html-encoding-sniffer@^2.0.1:
     whatwg-encoding "^1.0.5"
 
 html-entities@^2.1.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.2.tgz#760b404685cb1d794e4f4b744332e3b00dcfe488"
-  integrity sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
+  integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==
 
 html-escaper@^2.0.0:
   version "2.0.2"
@@ -11140,9 +11249,9 @@ html-minifier-terser@^6.0.2:
     terser "^5.10.0"
 
 html-tags@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
-  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961"
+  integrity sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==
 
 html-void-elements@^1.0.0:
   version "1.0.5"
@@ -11176,9 +11285,9 @@ html-webpack-plugin@^5.0.0:
     tapable "^2.0.0"
 
 htmlnano@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/htmlnano/-/htmlnano-2.0.0.tgz#07376faa064f7e1e832dfd91e1a9f606b0bc9b78"
-  integrity sha512-thKQfhcp2xgtsWNE27A2bliEeqVL5xjAgGn0wajyttvFFsvFWWah1ntV9aEX61gz0T6MBQ5xK/1lXuEumhJTcg==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/htmlnano/-/htmlnano-2.0.2.tgz#3e3170941e2446a86211196d740272ebca78f878"
+  integrity sha512-+ZrQFS4Ub+zd+/fWwfvoYCEGNEa0/zrpys6CyXxvZDwtL7Pl+pOtRkiujyvBQ7Lmfp7/iEPxtOFgxWA16Gkj3w==
   dependencies:
     cosmiconfig "^7.0.1"
     posthtml "^0.16.5"
@@ -11204,20 +11313,30 @@ htmlparser2@^7.1.1:
     domutils "^2.8.0"
     entities "^3.0.1"
 
+htmlparser2@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.1.tgz#abaa985474fcefe269bc761a779b544d7196d010"
+  integrity sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    domutils "^3.0.1"
+    entities "^4.3.0"
+
 http-cache-semantics@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
   integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
 
-http-errors@1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
-  integrity sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
   dependencies:
-    depd "~1.1.2"
+    depd "2.0.0"
     inherits "2.0.4"
     setprototypeof "1.2.0"
-    statuses ">= 1.5.0 < 2"
+    statuses "2.0.1"
     toidentifier "1.0.1"
 
 http-proxy-agent@^4.0.1:
@@ -11257,7 +11376,7 @@ http-server@^0.12.3:
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
-  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
+  integrity sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==
   dependencies:
     assert-plus "^1.0.0"
     jsprim "^1.2.2"
@@ -11266,12 +11385,12 @@ http-signature@~1.2.0:
 https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
-  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
+  integrity sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==
 
 https-proxy-agent@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
-  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
   dependencies:
     agent-base "6"
     debug "4"
@@ -11289,7 +11408,7 @@ human-signals@^2.1.0:
 humanize-ms@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/humanize-ms/-/humanize-ms-1.2.1.tgz#c46e3159a293f6b896da29316d8b6fe8bb79bbed"
-  integrity sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=
+  integrity sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==
   dependencies:
     ms "^2.0.0"
 
@@ -11327,7 +11446,7 @@ ieee754@^1.1.4:
 iferr@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
-  integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
+  integrity sha512-DUNFN5j7Tln0D+TxzloUjKB+CtVu6myn0JEFak6dG18mNt9YkQ6lzGCdafwofISZ1lLF3xRHJ98VKy9ynkcFaA==
 
 ignore-walk@^3.0.3:
   version "3.0.4"
@@ -11373,12 +11492,12 @@ import-local@^3.0.2:
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
-  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
 
 indent-string@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
-  integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
+  integrity sha512-aqwDFWSgSgfRaEwao5lg5KEcVd/2a+D1rvoG7NdilmYz0NwRk6StWpWdz/Hpk34MKPpx7s8XxUqimfcQK6gGlg==
   dependencies:
     repeating "^2.0.0"
 
@@ -11395,7 +11514,7 @@ infer-owner@^1.0.3, infer-owner@^1.0.4:
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
-  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
   dependencies:
     once "^1.3.0"
     wrappy "1"
@@ -11408,12 +11527,12 @@ inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, i
 inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
-  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
+  integrity sha512-8nWq2nLTAwd02jTqJExUYFSD/fKq6VH9Y/oG2accc/kdI0V98Bag8d5a4gi3XHz73rDWa2PvTtvcWYquKqSENA==
 
 inherits@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+  integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
 
 ini@^1.3.2, ini@^1.3.4, ini@^1.3.5:
   version "1.3.8"
@@ -11500,15 +11619,15 @@ intersection-observer@^0.10.0:
   resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.10.0.tgz#4d11d63c1ff67e21e62987be24d55218da1a1a69"
   integrity sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==
 
-intl-messageformat@^9.12.0:
-  version "9.13.0"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.13.0.tgz#97360b73bd82212e4f6005c712a4a16053165468"
-  integrity sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==
+intl-messageformat@^10.1.0:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-10.1.1.tgz#226767e7921fa86cef2cbe4a13911050716720bc"
+  integrity sha512-FeJne2oooYW6shLPbrqyjRX6hTELVrQ90Dn88z7NomLk/xZBCLxLPAkgaYaTQJBRBV78nZ933d8APHHkTQrD9Q==
   dependencies:
-    "@formatjs/ecma402-abstract" "1.11.4"
-    "@formatjs/fast-memoize" "1.2.1"
-    "@formatjs/icu-messageformat-parser" "2.1.0"
-    tslib "^2.1.0"
+    "@formatjs/ecma402-abstract" "1.11.8"
+    "@formatjs/fast-memoize" "1.2.4"
+    "@formatjs/icu-messageformat-parser" "2.1.4"
+    tslib "2.4.0"
 
 invariant@^2.2.4:
   version "2.2.4"
@@ -11517,10 +11636,10 @@ invariant@^2.2.4:
   dependencies:
     loose-envify "^1.0.0"
 
-ip@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
-  integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
+ip@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.0.tgz#4cf4ab182fee2314c75ede1276f8c80b479936da"
+  integrity sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==
 
 ipaddr.js@1.9.1:
   version "1.9.1"
@@ -11535,7 +11654,7 @@ is-absolute-url@^3.0.0:
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
-  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
+  integrity sha512-e1BM1qnDbMRG3ll2U9dSK0UMHuWOs3pY3AtcFsmvwPtKL3MML/Q86i+GilLfvqEs4GW+ExB91tQ3Ig9noDIZ+A==
   dependencies:
     kind-of "^3.0.2"
 
@@ -11570,7 +11689,7 @@ is-arguments@^1.1.0:
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
-  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
 is-bigint@^1.0.1:
   version "1.0.4"
@@ -11582,7 +11701,7 @@ is-bigint@^1.0.1:
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
-  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
+  integrity sha512-9fRVlXc0uCxEDj1nQzaWONSpbTfx0FmJfzHF7pwlI8DkWGoHBBea4Pg5Ky0ojwwxQmnSifgbKkI06Qv0Ljgj+Q==
   dependencies:
     binary-extensions "^1.0.0"
 
@@ -11623,24 +11742,17 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-core-module@^2.2.0, is-core-module@^2.5.0, is-core-module@^2.8.0, is-core-module@^2.8.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
-  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
-  dependencies:
-    has "^1.0.3"
-
-is-core-module@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
-  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
+is-core-module@^2.5.0, is-core-module@^2.8.1, is-core-module@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
+  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
   dependencies:
     has "^1.0.3"
 
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
-  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
+  integrity sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==
   dependencies:
     kind-of "^3.0.2"
 
@@ -11697,7 +11809,7 @@ is-dom@^1.0.0:
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
-  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
+  integrity sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==
 
 is-extendable@^1.0.1:
   version "1.0.1"
@@ -11709,7 +11821,7 @@ is-extendable@^1.0.1:
 is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
 is-finite@^1.0.0:
   version "1.1.0"
@@ -11719,14 +11831,14 @@ is-finite@^1.0.0:
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
-  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
+  integrity sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==
   dependencies:
     number-is-nan "^1.0.0"
 
 is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
+  integrity sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==
 
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
@@ -11746,7 +11858,7 @@ is-generator-fn@^2.0.0:
 is-glob@^3.0.0, is-glob@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
-  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
+  integrity sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==
   dependencies:
     is-extglob "^2.1.0"
 
@@ -11765,41 +11877,41 @@ is-hexadecimal@^1.0.0:
 is-json@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-json/-/is-json-2.0.1.tgz#6be166d144828a131d686891b983df62c39491ff"
-  integrity sha1-a+Fm0USCihMdaGiRuYPfYsOUkf8=
+  integrity sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==
 
 is-lambda@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5"
-  integrity sha1-PZh3iZ5qU+/AFgUEzeFfgubwYdU=
+  integrity sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==
 
 is-map@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
   integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
 
-is-negative-zero@^2.0.1:
+is-negative-zero@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
   integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
 
 is-number-object@^1.0.4:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.6.tgz#6a7aaf838c7f0686a50b4553f7e54a96494e89f0"
-  integrity sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.7.tgz#59d50ada4c45251784e9904f5246c742f07a42fc"
+  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
   dependencies:
     has-tostringtag "^1.0.0"
 
 is-number@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
-  integrity sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=
+  integrity sha512-QUzH43Gfb9+5yckcrSA0VBDwEtDUchrk4F6tfJZQuNzDJbEDB9cZNzSfXGQ1jqmdDY/kl41lUOWM9syA8z8jlg==
   dependencies:
     kind-of "^3.0.2"
 
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
-  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
+  integrity sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==
   dependencies:
     kind-of "^3.0.2"
 
@@ -11826,7 +11938,7 @@ is-object@^1.0.1:
 is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
-  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
+  integrity sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==
 
 is-plain-obj@^2.0.0:
   version "2.1.0"
@@ -11863,22 +11975,24 @@ is-set@^2.0.2:
   resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
   integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
 
-is-shared-array-buffer@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6"
-  integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
 
 is-ssh@^1.3.0:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/is-ssh/-/is-ssh-1.3.3.tgz#7f133285ccd7f2c2c7fc897b771b53d95a2b2c7e"
-  integrity sha512-NKzJmQzJfEEma3w5cJNcUMxoXfDjz0Zj0eyCalHn2E6VOwlzjZo0yuO2fcBSf8zhFuVCL/82/r5gRcoi6aEPVQ==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/is-ssh/-/is-ssh-1.4.0.tgz#4f8220601d2839d8fa624b3106f8e8884f01b8b2"
+  integrity sha512-x7+VxdxOdlV3CYpjvRLBv5Lo9OJerlYanjwFrPR9fuGPjCiNiCzFgAWpiLAohSbsnH4ZAys3SBh+hq5rJosxUQ==
   dependencies:
-    protocols "^1.1.0"
+    protocols "^2.0.1"
 
 is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
+  integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
 
 is-stream@^2.0.0:
   version "2.0.1"
@@ -11895,7 +12009,7 @@ is-string@^1.0.5, is-string@^1.0.7:
 is-subset@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
-  integrity sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=
+  integrity sha512-6Ybun0IkarhmEqxXCNw/C0bna6Zb/TkfUX9UbwJtK6ObwAVCxmAP308WWTHviM/zAqXk05cdhYsUsZeGQh99iw==
 
 is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.4"
@@ -11907,21 +12021,21 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
 is-text-path@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-text-path/-/is-text-path-1.0.1.tgz#4e1aa0fb51bfbcb3e92688001397202c1775b66e"
-  integrity sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=
+  integrity sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==
   dependencies:
     text-extensions "^1.0.0"
 
 is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
-  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
+  integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
 
 is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
-  integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
+  integrity sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==
 
-is-weakref@^1.0.1:
+is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
   integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
@@ -11936,7 +12050,7 @@ is-whitespace-character@^1.0.0:
 is-window@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-window/-/is-window-1.0.2.tgz#2c896ca53db97de45d3c33133a65d8c9f563480d"
-  integrity sha1-LIlspT25feRdPDMTOmXYyfVjSA0=
+  integrity sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg==
 
 is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
@@ -11951,7 +12065,7 @@ is-word-character@^1.0.0:
 is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
-  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
+  integrity sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==
 
 is-wsl@^2.1.1, is-wsl@^2.2.0:
   version "2.2.0"
@@ -11963,7 +12077,7 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
 
 isarray@^2.0.5:
   version "2.0.5"
@@ -11973,19 +12087,19 @@ isarray@^2.0.5:
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
-  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
-  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
+  integrity sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==
   dependencies:
     isarray "1.0.0"
 
 isobject@^3.0.0, isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
-  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
+  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
 isobject@^4.0.0:
   version "4.0.0"
@@ -12003,9 +12117,9 @@ isomorphic-unfetch@^3.1.0:
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
-  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
+  integrity sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==
 
-istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.0.1, istanbul-lib-coverage@^3.2.0:
+istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
   integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
@@ -12021,9 +12135,9 @@ istanbul-lib-instrument@^4.0.3:
     semver "^6.3.0"
 
 istanbul-lib-instrument@^5.0.4:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.1.0.tgz#7b49198b657b27a730b8e9cb601f1e1bff24c59a"
-  integrity sha512-czwUz525rkOFDJxfKK6mYfIs9zBKILyrZQxjz3ABhjQXhbhFsSbo1HW/BFcsDnfJYJWA6thRR5/TUY2qs5W99Q==
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.0.tgz#31d18bdd127f825dd02ea7bfdfd906f8ab840e9f"
+  integrity sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==
   dependencies:
     "@babel/core" "^7.12.3"
     "@babel/parser" "^7.14.7"
@@ -12049,10 +12163,10 @@ istanbul-lib-source-maps@^4.0.0:
     istanbul-lib-coverage "^3.0.0"
     source-map "^0.6.1"
 
-istanbul-reports@^3.0.2:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.4.tgz#1b6f068ecbc6c331040aab5741991273e609e40c"
-  integrity sha512-r1/DshN4KSE7xWEknZLLLLDn5CJybV3nw01VTkp6D5jzLuELlcbudfj/eSQFvrKsJuTVCGnePO7ho82Nw9zzfw==
+istanbul-reports@^3.0.2, istanbul-reports@^3.1.4:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.5.tgz#cc9a6ab25cb25659810e4785ed9d9fb742578bae"
+  integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
   dependencies:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
@@ -12484,7 +12598,7 @@ joi@^17.4.0:
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
-  integrity sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=
+  integrity sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
@@ -12502,7 +12616,7 @@ js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.8.1:
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
-  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
+  integrity sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==
 
 jsdom@^16.4.0:
   version "16.7.0"
@@ -12545,7 +12659,7 @@ jsesc@^2.5.1:
 jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
-  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
+  integrity sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==
 
 json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
@@ -12572,22 +12686,17 @@ json-schema@0.4.0:
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
   integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
 
-json-source-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/json-source-map/-/json-source-map-0.6.1.tgz#e0b1f6f4ce13a9ad57e2ae165a24d06e62c79a0f"
-  integrity sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg==
-
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
-  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
 json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
-  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
+  integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==
 
-json5@2.x, json5@^2.1.2, json5@^2.1.3, json5@^2.2.0:
+json5@2.x, json5@^2.1.2, json5@^2.1.3, json5@^2.2.0, json5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
@@ -12595,7 +12704,7 @@ json5@2.x, json5@^2.1.2, json5@^2.1.3, json5@^2.2.0:
 json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
-  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+  integrity sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw==
 
 json5@^1.0.1:
   version "1.0.1"
@@ -12604,17 +12713,10 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-jsonfile@^2.1.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
-  integrity sha1-NzaitCi4e72gzIO1P6PWM6NcKug=
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
-  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
+  integrity sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==
   optionalDependencies:
     graceful-fs "^4.1.6"
 
@@ -12630,7 +12732,7 @@ jsonfile@^6.0.1:
 jsonparse@^1.2.0, jsonparse@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
-  integrity sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=
+  integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
 
 jsprim@^1.2.2:
   version "1.4.2"
@@ -12642,13 +12744,13 @@ jsprim@^1.2.2:
     json-schema "0.4.0"
     verror "1.10.0"
 
-"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz#720b97bfe7d901b927d87c3773637ae8ea48781b"
-  integrity sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
+  integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
   dependencies:
-    array-includes "^3.1.3"
-    object.assign "^4.1.2"
+    array-includes "^3.1.5"
+    object.assign "^4.1.3"
 
 junk@^3.1.0:
   version "3.1.0"
@@ -12667,14 +12769,14 @@ kbar@0.1.0-beta.6:
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
-  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
+  integrity sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==
   dependencies:
     is-buffer "^1.1.5"
 
 kind-of@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
-  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
+  integrity sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==
   dependencies:
     is-buffer "^1.1.5"
 
@@ -12688,13 +12790,6 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-klaw@^1.0.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
-  integrity sha1-QIhDO0azsbolnXh4XY6W9zugJDk=
-  optionalDependencies:
-    graceful-fs "^4.1.9"
-
 kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@@ -12706,21 +12801,21 @@ klona@^2.0.4:
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
 language-subtag-registry@~0.3.2:
-  version "0.3.21"
-  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
-  integrity sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==
+  version "0.3.22"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz#2e1500861b2e457eba7e7ae86877cbd08fa1fd1d"
+  integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
 
 language-tags@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
-  integrity sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=
+  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
   dependencies:
     language-subtag-registry "~0.3.2"
 
 lazy-cache@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-2.0.2.tgz#b9190a4f913354694840859f8a8f7084d8822264"
-  integrity sha1-uRkKT5EzVGlIQIWfio9whNiCImQ=
+  integrity sha512-7vp2Acd2+Kz4XkzxGxaB1FWOi8KjWIWsgdfD5MCb86DWvlLqhRPM+d6Pro3iNEL5VT9mstz5hKAlcd+QR6H3aA==
   dependencies:
     set-getter "^0.1.0"
 
@@ -12767,7 +12862,7 @@ leven@^3.1.0:
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
-  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
+  integrity sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==
   dependencies:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
@@ -12809,28 +12904,35 @@ lines-and-columns@^1.1.6:
 list-item@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/list-item/-/list-item-1.1.1.tgz#0c65d00e287cb663ccb3cb3849a77e89ec268a56"
-  integrity sha1-DGXQDih8tmPMs8s4Sad+iewmilY=
+  integrity sha512-S3D0WZ4J6hyM8o5SNKWaMYB1ALSacPZ2nHGEuCjmHZ+dc03gFeNZoNDcqfcnO4vDhTZmNrqrpYZCdXsRh22bzw==
   dependencies:
     expand-range "^1.8.1"
     extend-shallow "^2.0.1"
     is-number "^2.1.0"
     repeat-string "^1.5.2"
 
-lmdb@2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-2.2.4.tgz#6494d5a1d1db152e0be759edcfa06893e4cbdb53"
-  integrity sha512-gto+BB2uEob8qRiTlOq+R3uX0YNHsX9mjxj9Sbdue/LIKqu6IlZjrsjKeGyOMquc/474GEqFyX2pdytpydp0rQ==
+lmdb@2.5.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/lmdb/-/lmdb-2.5.2.tgz#37e28a9fb43405f4dc48c44cec0e13a14c4a6ff1"
+  integrity sha512-V5V5Xa2Hp9i2XsbDALkBTeHXnBXh/lEmk9p22zdr7jtuOIY9TGhjK6vAvTpOOx9IKU4hJkRWZxn/HsvR1ELLtA==
   dependencies:
     msgpackr "^1.5.4"
-    nan "^2.14.2"
-    node-gyp-build "^4.2.3"
+    node-addon-api "^4.3.0"
+    node-gyp-build-optional-packages "5.0.3"
     ordered-binary "^1.2.4"
     weak-lru-cache "^1.2.2"
+  optionalDependencies:
+    "@lmdb/lmdb-darwin-arm64" "2.5.2"
+    "@lmdb/lmdb-darwin-x64" "2.5.2"
+    "@lmdb/lmdb-linux-arm" "2.5.2"
+    "@lmdb/lmdb-linux-arm64" "2.5.2"
+    "@lmdb/lmdb-linux-x64" "2.5.2"
+    "@lmdb/lmdb-win32-x64" "2.5.2"
 
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
-  integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=
+  integrity sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==
   dependencies:
     graceful-fs "^4.1.2"
     parse-json "^2.2.0"
@@ -12841,7 +12943,7 @@ load-json-file@^1.0.0:
 load-json-file@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
-  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
+  integrity sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==
   dependencies:
     graceful-fs "^4.1.2"
     parse-json "^4.0.0"
@@ -12864,9 +12966,9 @@ loader-runner@^2.4.0:
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
 loader-runner@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
-  integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
+  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
 loader-utils@1.2.3:
   version "1.2.3"
@@ -12898,7 +13000,7 @@ loader-utils@^2.0.0:
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
-  integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
+  integrity sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==
   dependencies:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
@@ -12928,37 +13030,37 @@ locate-path@^6.0.0:
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
-  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
+  integrity sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==
 
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
 lodash.escape@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
-  integrity sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=
+  integrity sha512-nXEOnb/jK9g0DYMr1/Xvq6l5xMD7GDG55+GSYIYmS0G4tBk/hURD4JR9WCavs04t33WmJx9kCyp9vJ+mr4BOUw==
 
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
-  integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=
+  integrity sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==
 
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
-  integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
+  integrity sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
 
 lodash.ismatch@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
-  integrity sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=
+  integrity sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==
 
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
-  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
+  integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
 
 lodash.merge@^4.6.0, lodash.merge@^4.6.2:
   version "4.6.2"
@@ -12983,17 +13085,17 @@ lodash.templatesettings@^4.0.0:
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
-  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
+  integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
 
 lodash.unescape@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
-  integrity sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=
+  integrity sha512-DhhGRshNS1aX6s5YdBE3njCCouPgnG29ebyHvImlZzXZf2SHgt+J08DHgytTPnpywNbO1Y8mNUFyQuIDBq2JZg==
 
 lodash.uniq@4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-  integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
+  integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
 lodash@4.x, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
@@ -13003,7 +13105,7 @@ lodash@4.x, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15,
 loglevel-colored-level-prefix@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/loglevel-colored-level-prefix/-/loglevel-colored-level-prefix-1.0.0.tgz#6a40218fdc7ae15fc76c3d0f3e676c465388603e"
-  integrity sha1-akAhj9x64V/HbD0PPmdsRlOIYD4=
+  integrity sha512-u45Wcxxc+SdAlh4yeF/uKlC1SPUPCy0gullSNKXod5I4bmifzk+Q4lSLExNEVn19tGaJipbZ4V4jbFn79/6mVA==
   dependencies:
     chalk "^1.1.3"
     loglevel "^1.4.1"
@@ -13023,7 +13125,7 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
-  integrity sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=
+  integrity sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ==
   dependencies:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
@@ -13060,7 +13162,7 @@ lru-cache@^6.0.0:
 lz-string@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
-  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
+  integrity sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==
 
 magic-string@^0.25.0, magic-string@^0.25.1:
   version "0.25.9"
@@ -13156,12 +13258,12 @@ map-age-cleaner@^0.1.3:
 map-cache@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
-  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
+  integrity sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==
 
 map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
-  integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
+  integrity sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==
 
 map-obj@^4.0.0:
   version "4.3.0"
@@ -13171,12 +13273,12 @@ map-obj@^4.0.0:
 map-or-similar@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
-  integrity sha1-beJlMXSt+12e3DPGnT6Sobdvrwg=
+  integrity sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==
 
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
-  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
+  integrity sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==
   dependencies:
     object-visit "^1.0.0"
 
@@ -13188,7 +13290,7 @@ markdown-escapes@^1.0.0:
 markdown-link@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/markdown-link/-/markdown-link-0.1.1.tgz#32c5c65199a6457316322d1e4229d13407c8c7cf"
-  integrity sha1-MsXGUZmmRXMWMi0eQinRNAfIx88=
+  integrity sha512-TurLymbyLyo+kAUUAV9ggR9EPcDjP/ctlv9QAFiqUH7c+t6FlsbivPo9OKTU8xdOx9oNd2drW/Fi5RRElQbUqA==
 
 markdown-toc@^1.2.0:
   version "1.2.0"
@@ -13301,12 +13403,12 @@ mdn-data@2.0.14:
 mdurl@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
-  integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
+  integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
 
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
-  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+  integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
 mem@^8.1.1:
   version "8.1.1"
@@ -13317,23 +13419,23 @@ mem@^8.1.1:
     mimic-fn "^3.1.0"
 
 memfs@^3.1.2, memfs@^3.2.2:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.1.tgz#b78092f466a0dce054d63d39275b24c71d3f1305"
-  integrity sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==
+  version "3.4.7"
+  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.7.tgz#e5252ad2242a724f938cb937e3c4f7ceb1f70e5a"
+  integrity sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==
   dependencies:
-    fs-monkey "1.0.3"
+    fs-monkey "^1.0.3"
 
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
-  integrity sha1-fIekZGREwy11Q4VwkF8tvRsagFo=
+  integrity sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==
   dependencies:
     map-or-similar "^1.5.0"
 
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
-  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
+  integrity sha512-cda4JKCxReDXFXRqOHPQscuIYg1PvxbE2S2GP45rnwfEK+vZaXC8C1OFvdHIbgw0DLzowXGVoxLaAmlgRy14GQ==
   dependencies:
     errno "^0.1.3"
     readable-stream "^2.0.1"
@@ -13349,12 +13451,12 @@ memory-fs@^0.5.0:
 memorystream@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
-  integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
+  integrity sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==
 
 meow@^3.1.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
-  integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
+  integrity sha512-TNdwZs0skRlpPpCUK25StC4VH+tP5GgeY1HQOOGP+lQ2xtdkN2VtT/5tiX9k3IWpkBPV9b3LsAWXn4GGi/PrSA==
   dependencies:
     camelcase-keys "^2.0.0"
     decamelize "^1.1.2"
@@ -13387,7 +13489,7 @@ meow@^8.0.0:
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
+  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==
 
 merge-stream@^2.0.0:
   version "2.0.0"
@@ -13421,7 +13523,7 @@ messageformat@^2.2.1:
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
-  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
+  integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
 microevent.ts@~0.1.1:
   version "0.1.1"
@@ -13511,7 +13613,7 @@ mimic-fn@^3.1.0:
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
-  integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=
+  integrity sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==
   dependencies:
     dom-walk "^0.1.0"
 
@@ -13528,9 +13630,9 @@ minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
 minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
-  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
+  integrity sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==
 
-minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.2:
+minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -13607,9 +13709,9 @@ minipass@^2.6.0, minipass@^2.9.0:
     yallist "^3.0.0"
 
 minipass@^3.0.0, minipass@^3.1.0, minipass@^3.1.1, minipass@^3.1.3:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.6.tgz#3b8150aa688a711a1521af5e8779c1d3bb4f45ee"
-  integrity sha512-rty5kpw9/z8SX9dmxblFA6edItUmwJgMeYDZRrwlIVN27i8gysGbznJwUggw2V/FVqFSDdWy040ZPS811DYAqQ==
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.3.4.tgz#ca99f95dd77c43c7a76bf51e6d200025eee0ffae"
+  integrity sha512-I9WPbWHCGu8W+6k1ZiGpPu0GkoKBeorkfKNuAFBNS1HNFJvke82sxvI5bzcCNpWPorkOO5QQ+zomzzwRxejXiw==
   dependencies:
     yallist "^4.0.0"
 
@@ -13671,7 +13773,7 @@ mkdirp@1.x, mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5:
+mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@^0.5.6:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
   integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
@@ -13691,7 +13793,7 @@ moo@^0.5.0:
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
-  integrity sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=
+  integrity sha512-hdrFxZOycD/g6A6SoI2bB5NA/5NEqD0569+S47WZhPvm46sD50ZHdYaFmnua5lndde9rCHGjmfK7Z8BuCt/PcQ==
   dependencies:
     aproba "^1.1.1"
     copy-concurrently "^1.0.0"
@@ -13701,14 +13803,14 @@ move-concurrently@^1.0.1:
     run-queue "^1.0.3"
 
 mrmime@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.0.tgz#14d387f0585a5233d291baba339b063752a2398b"
-  integrity sha512-a70zx7zFfVO7XpnQ2IX1Myh9yY4UYvfld/dikWRnsXxbyvMcfz+u6UfgNAtH+k2QqtJuzVpv6eLTx1G2+WKZbQ==
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
+  integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
 
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
 
 ms@2.1.1:
   version "2.1.1"
@@ -13725,20 +13827,26 @@ ms@2.1.3, ms@^2.0.0, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-msgpackr-extract@^1.0.14:
-  version "1.0.16"
-  resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-1.0.16.tgz#701c4f6e6f25c100ae84557092274e8fffeefe45"
-  integrity sha512-fxdRfQUxPrL/TizyfYfMn09dK58e+d65bRD/fcaVH4052vj30QOzzqxcQIS7B0NsqlypEQ/6Du3QmP2DhWFfCA==
+msgpackr-extract@^2.0.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-2.1.2.tgz#56272030f3e163e1b51964ef8b1cd5e7240c03ed"
+  integrity sha512-cmrmERQFb19NX2JABOGtrKdHMyI6RUyceaPBQ2iRz9GnDkjBWFjNJC0jyyoOfZl2U/LZE3tQCCQc4dlRyA8mcA==
   dependencies:
-    nan "^2.14.2"
-    node-gyp-build "^4.2.3"
+    node-gyp-build-optional-packages "5.0.3"
+  optionalDependencies:
+    "@msgpackr-extract/msgpackr-extract-darwin-arm64" "2.1.2"
+    "@msgpackr-extract/msgpackr-extract-darwin-x64" "2.1.2"
+    "@msgpackr-extract/msgpackr-extract-linux-arm" "2.1.2"
+    "@msgpackr-extract/msgpackr-extract-linux-arm64" "2.1.2"
+    "@msgpackr-extract/msgpackr-extract-linux-x64" "2.1.2"
+    "@msgpackr-extract/msgpackr-extract-win32-x64" "2.1.2"
 
 msgpackr@^1.5.4:
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.5.5.tgz#c0562abc2951d7e29f75d77a8656b01f103a042c"
-  integrity sha512-JG0V47xRIQ9pyUnx6Hb4+3TrQoia2nA3UIdmyTldhxaxtKFkekkKpUW/N6fwHwod9o4BGuJGtouxOk+yCP5PEA==
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/msgpackr/-/msgpackr-1.6.2.tgz#176cd9f6b4437dad87a839b37f23c2dfee408d9a"
+  integrity sha512-bqSQ0DYJbXbrJcrZFmMygUZmqQiDfI2ewFVWcrZY12w5XHWtPuW4WppDT/e63Uu311ajwkRRXSoF0uILroBeTA==
   optionalDependencies:
-    msgpackr-extract "^1.0.14"
+    msgpackr-extract "^2.0.2"
 
 multimatch@^5.0.0:
   version "5.0.0"
@@ -13754,22 +13862,22 @@ multimatch@^5.0.0:
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
-  integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
+  integrity sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==
 
 mute-stream@0.0.8, mute-stream@~0.0.4:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
-nan@^2.12.1, nan@^2.14.2:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
-  integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
+nan@^2.12.1:
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.16.0.tgz#664f43e45460fb98faf00edca0bb0d7b8dce7916"
+  integrity sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==
 
-nanoid@^3.1.30, nanoid@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
-  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
+nanoid@^3.3.1, nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -13791,7 +13899,7 @@ nanomatch@^1.2.9:
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
-  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
 nearley@^2.7.10:
   version "2.20.1"
@@ -13814,9 +13922,9 @@ neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1, neo-async@^2.6.2:
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
 nested-error-stacks@^2.0.0, nested-error-stacks@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz#0fbdcf3e13fe4994781280524f8b96b0cdff9c61"
-  integrity sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nested-error-stacks/-/nested-error-stacks-2.1.1.tgz#26c8a3cee6cc05fbcf1e333cd2fc3e003326c0b5"
+  integrity sha512-9iN1ka/9zmX1ZvLV9ewJYEk9h7RyRRtqdK0woXcqohu8EWIerfPUjYJPg0ULy0UqP7cslmdGc8xKDJcojlKiaw==
 
 next-mdx-remote@^3.0.2:
   version "3.0.8"
@@ -13852,28 +13960,30 @@ next-tick@^1.1.0:
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
 next@^12.1.0:
-  version "12.1.1"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.1.1.tgz#f5e73d3a204da0632484a56040c23a4796958bc6"
-  integrity sha512-IOfEIAgroMtsoYz6HXpDS+b5WB9WZ+MH266COXGlcpIiYSgUyJf9xV6vF+zY2RPvBJFT4fUW0EVdVnoOmTloDw==
-  dependencies:
-    "@next/env" "12.1.1"
-    caniuse-lite "^1.0.30001283"
-    postcss "8.4.5"
-    styled-jsx "5.0.1"
-    use-subscription "1.5.1"
+  version "12.2.5"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.2.5.tgz#14fb5975e8841fad09553b8ef41fe1393602b717"
+  integrity sha512-tBdjqX5XC/oFs/6gxrZhjmiq90YWizUYU6qOWAfat7zJwrwapJ+BYgX2PmiacunXMaRpeVT4vz5MSPSLgNkrpA==
+  dependencies:
+    "@next/env" "12.2.5"
+    "@swc/helpers" "0.4.3"
+    caniuse-lite "^1.0.30001332"
+    postcss "8.4.14"
+    styled-jsx "5.0.4"
+    use-sync-external-store "1.2.0"
   optionalDependencies:
-    "@next/swc-android-arm-eabi" "12.1.1"
-    "@next/swc-android-arm64" "12.1.1"
-    "@next/swc-darwin-arm64" "12.1.1"
-    "@next/swc-darwin-x64" "12.1.1"
-    "@next/swc-linux-arm-gnueabihf" "12.1.1"
-    "@next/swc-linux-arm64-gnu" "12.1.1"
-    "@next/swc-linux-arm64-musl" "12.1.1"
-    "@next/swc-linux-x64-gnu" "12.1.1"
-    "@next/swc-linux-x64-musl" "12.1.1"
-    "@next/swc-win32-arm64-msvc" "12.1.1"
-    "@next/swc-win32-ia32-msvc" "12.1.1"
-    "@next/swc-win32-x64-msvc" "12.1.1"
+    "@next/swc-android-arm-eabi" "12.2.5"
+    "@next/swc-android-arm64" "12.2.5"
+    "@next/swc-darwin-arm64" "12.2.5"
+    "@next/swc-darwin-x64" "12.2.5"
+    "@next/swc-freebsd-x64" "12.2.5"
+    "@next/swc-linux-arm-gnueabihf" "12.2.5"
+    "@next/swc-linux-arm64-gnu" "12.2.5"
+    "@next/swc-linux-arm64-musl" "12.2.5"
+    "@next/swc-linux-x64-gnu" "12.2.5"
+    "@next/swc-linux-x64-musl" "12.2.5"
+    "@next/swc-win32-arm64-msvc" "12.2.5"
+    "@next/swc-win32-ia32-msvc" "12.2.5"
+    "@next/swc-win32-x64-msvc" "12.2.5"
 
 nice-try@^1.0.4:
   version "1.0.5"
@@ -13893,10 +14003,15 @@ node-addon-api@^3.2.1:
   resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.2.1.tgz#81325e0a2117789c0128dab65e7e38f07ceba161"
   integrity sha512-mmcei9JghVNDYydghQmeDX8KoAm0FAiYyIcUt/N4nhyAipB17pllZQDOJD2fotxABnt4Mdz+dKTO7eftLg4d0A==
 
+node-addon-api@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-4.3.0.tgz#52a1a0b475193e0928e98e0426a0d1254782b77f"
+  integrity sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ==
+
 node-dir@^0.1.10:
   version "0.1.17"
   resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
-  integrity sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=
+  integrity sha512-tmPX422rYgofd4epzrNoOXiE8XFZYOcCq1vD7MAXCDO+O+zndlA2ztdKKMa+EeuBG5tHETpr4ml4RGgpqDCCAg==
   dependencies:
     minimatch "^3.0.2"
 
@@ -13907,10 +14022,15 @@ node-fetch@^2.6.1, node-fetch@^2.6.7:
   dependencies:
     whatwg-url "^5.0.0"
 
-node-gyp-build@^4.2.3, node-gyp-build@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.3.0.tgz#9f256b03e5826150be39c764bf51e993946d71a3"
-  integrity sha512-iWjXZvmboq0ja1pUGULQBexmxq8CV4xBhX7VDOTbL7ZR4FOowwY/VOtRxBN/yKxmdGoIp4j5ysNT4u3S2pDQ3Q==
+node-gyp-build-optional-packages@5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/node-gyp-build-optional-packages/-/node-gyp-build-optional-packages-5.0.3.tgz#92a89d400352c44ad3975010368072b41ad66c17"
+  integrity sha512-k75jcVzk5wnnc/FMxsf4udAoTEUv2jY3ycfdSd3yWu6Cnd1oee6/CfZJApyscA4FJOmdoixWwiwOyf16RzD5JA==
+
+node-gyp-build@^4.3.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.5.0.tgz#7a64eefa0b21112f89f58379da128ac177f20e40"
+  integrity sha512-2iGbaQBV+ITgCz76ZEjmhUKAKVf7xfY1sRl4UiKQspfZMH2h06SyhNsnSVy50cwkFQDGLyif6m/6uFXHkOZ6rg==
 
 node-gyp@^5.0.2:
   version "5.1.1"
@@ -13948,7 +14068,7 @@ node-gyp@^7.1.0:
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
-  integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
+  integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
 
 node-libs-browser@^2.2.1:
   version "2.2.1"
@@ -13991,10 +14111,10 @@ node-notifier@^8.0.0:
     uuid "^8.3.0"
     which "^2.0.2"
 
-node-releases@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
-  integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
+node-releases@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
+  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
 
 nopt@^4.0.1:
   version "4.0.3"
@@ -14034,7 +14154,7 @@ normalize-package-data@^3.0.0, normalize-package-data@^3.0.2:
 normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
-  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
+  integrity sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==
   dependencies:
     remove-trailing-separator "^1.0.1"
 
@@ -14046,7 +14166,7 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
 normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
-  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
 normalize-url@^6.1.0:
   version "6.1.0"
@@ -14159,7 +14279,7 @@ npm-run-all@^4.1.5:
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
-  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
+  integrity sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==
   dependencies:
     path-key "^2.0.0"
 
@@ -14193,12 +14313,12 @@ npmlog@^5.0.1:
 nprogress@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
-  integrity sha1-y480xTIT2JVyP8urkH6UIq28r7E=
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
 
 nth-check@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.1.tgz#2efe162f5c3da06a28959fbd3db75dbeea9f0fc2"
-  integrity sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
   dependencies:
     boolbase "^1.0.0"
 
@@ -14210,17 +14330,17 @@ nullthrows@^1.1.1:
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
-  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+  integrity sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==
 
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
-  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
+  integrity sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==
 
 nwsapi@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
-  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.1.tgz#10a9f268fbf4c461249ebcfe38e359aa36e2577c"
+  integrity sha512-JYOWTeFoS0Z93587vRJgASD5Ut11fYl5NyihP3KrYBvMe1FRRs6RN7m20SA/16GM4P6hTnZjT+UmDOt38UeXNg==
 
 oauth-sign@~0.9.0:
   version "0.9.0"
@@ -14230,17 +14350,17 @@ oauth-sign@~0.9.0:
 object-assign@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
-  integrity sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=
+  integrity sha512-jHP15vXVGeVh1HuaA2wY6lxk+whK/x4KBG88VXeRma7CCun7iGD5qPc4eYykQ9sdQvg8jkwFKsSxHln2ybW3xQ==
 
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
 object-copy@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
-  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
+  integrity sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==
   dependencies:
     copy-descriptor "^0.1.0"
     define-property "^0.2.5"
@@ -14251,10 +14371,10 @@ object-hash@^2.0.3:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
   integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
 
-object-inspect@^1.11.0, object-inspect@^1.7.0, object-inspect@^1.9.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
-  integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
+object-inspect@^1.12.0, object-inspect@^1.7.0, object-inspect@^1.9.0:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
 object-is@^1.0.2, object-is@^1.1.2:
   version "1.1.5"
@@ -14264,7 +14384,7 @@ object-is@^1.0.2, object-is@^1.1.2:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
-object-keys@^1.0.12, object-keys@^1.1.1:
+object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
@@ -14272,18 +14392,18 @@ object-keys@^1.0.12, object-keys@^1.1.1:
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
-  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
+  integrity sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.1.0, object.assign@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
-  integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
+object.assign@^4.1.0, object.assign@^4.1.2, object.assign@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.3.tgz#d36b7700ddf0019abb6b1df1bb13f6445f79051f"
+  integrity sha512-ZFJnX3zltyjcYJL0RoCJuzb+11zWGyaDbjgxZbdV7rFEcHQuYxrZqhow67aA7xpes6LhojyFDaBKAFfogQrikA==
   dependencies:
-    call-bind "^1.0.0"
-    define-properties "^1.1.3"
-    has-symbols "^1.0.1"
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
 object.entries@^1.1.0, object.entries@^1.1.1, object.entries@^1.1.2, object.entries@^1.1.5:
@@ -14305,26 +14425,27 @@ object.fromentries@^2.0.0, "object.fromentries@^2.0.0 || ^1.0.0", object.froment
     es-abstract "^1.19.1"
 
 object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.1, object.getownpropertydescriptors@^2.1.2:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.3.tgz#b223cf38e17fefb97a63c10c91df72ccb386df9e"
-  integrity sha512-VdDoCwvJI4QdC6ndjpqFmoL3/+HxffFBbcJzKi5hwLLqqx3mdbedRpfZDdK0SrOSauj8X4GzBvnDZl4vTN7dOw==
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.4.tgz#7965e6437a57278b587383831a9b829455a4bc37"
+  integrity sha512-sccv3L/pMModT6dJAYF3fzGMVcb38ysQ0tEE6ixv2yXJDtEIPph268OlAdJj5/qZMZDq2g/jqvwppt36uS/uQQ==
   dependencies:
+    array.prototype.reduce "^1.0.4"
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.1"
 
-object.hasown@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.0.tgz#7232ed266f34d197d15cac5880232f7a4790afe5"
-  integrity sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==
+object.hasown@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.1.tgz#ad1eecc60d03f49460600430d97f23882cf592a3"
+  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
   dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
 
 object.pick@^1.2.0, object.pick@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
-  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
+  integrity sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==
   dependencies:
     isobject "^3.0.1"
 
@@ -14342,10 +14463,10 @@ objectorarray@^1.0.5:
   resolved "https://registry.yarnpkg.com/objectorarray/-/objectorarray-1.0.5.tgz#2c05248bbefabd8f43ad13b41085951aac5e68a5"
   integrity sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==
 
-on-finished@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
-  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
   dependencies:
     ee-first "1.1.1"
 
@@ -14357,14 +14478,14 @@ on-headers@~1.0.2:
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
-  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
   dependencies:
     wrappy "1"
 
 onetime@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
-  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
+  integrity sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==
   dependencies:
     mimic-fn "^1.0.0"
 
@@ -14422,24 +14543,24 @@ optionator@^0.9.1:
     word-wrap "^1.2.3"
 
 ordered-binary@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/ordered-binary/-/ordered-binary-1.2.4.tgz#51d3a03af078a0bdba6c7bc8f4fedd1f5d45d83e"
-  integrity sha512-A/csN0d3n+igxBPfUrjbV5GC69LWj2pjZzAAeeHXLukQ4+fytfP4T1Lg0ju7MSPSwq7KtHkGaiwO8URZN5IpLg==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/ordered-binary/-/ordered-binary-1.3.0.tgz#a116d64c923278216e335602d279750b2ebd746e"
+  integrity sha512-knIeYepTI6BDAzGxqFEDGtI/iGqs57H32CInAIxEvAHG46vk1Di0CEpyc1A7iY39B1mfik3g3KLYwOTNnnMHLA==
 
 os-browserify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
-  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
+  integrity sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==
 
 os-homedir@^1.0.0, os-homedir@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
+  integrity sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==
 
 os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
+  integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
 
 osenv@^0.1.4:
   version "0.1.5"
@@ -14459,7 +14580,7 @@ p-all@^2.1.0:
 p-defer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
-  integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
+  integrity sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==
 
 p-each-series@^2.1.0:
   version "2.2.0"
@@ -14483,7 +14604,7 @@ p-filter@^2.1.0:
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
-  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
+  integrity sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==
 
 p-iteration@^1.1.8:
   version "1.1.8"
@@ -14514,7 +14635,7 @@ p-limit@^3.0.2:
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
+  integrity sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==
   dependencies:
     p-limit "^1.1.0"
 
@@ -14591,7 +14712,7 @@ p-timeout@^3.1.0, p-timeout@^3.2.0:
 p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
-  integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
+  integrity sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==
 
 p-try@^2.0.0:
   version "2.2.0"
@@ -14653,20 +14774,20 @@ param-case@^3.0.3, param-case@^3.0.4:
     tslib "^2.0.3"
 
 parcel@^2.3.1:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/parcel/-/parcel-2.4.0.tgz#9ce7ecee5e24ffe630e14d50801e26de334e89c1"
-  integrity sha512-dPWpu4RnxG9HqiLvaF8COEWEnT/KrigrC6PyPaQ0zEgpBfp7/jzXZFBVaZk2N+lpvrbNEYMjN9bv5UQGJJszIw==
-  dependencies:
-    "@parcel/config-default" "2.4.0"
-    "@parcel/core" "2.4.0"
-    "@parcel/diagnostic" "2.4.0"
-    "@parcel/events" "2.4.0"
-    "@parcel/fs" "2.4.0"
-    "@parcel/logger" "2.4.0"
-    "@parcel/package-manager" "2.4.0"
-    "@parcel/reporter-cli" "2.4.0"
-    "@parcel/reporter-dev-server" "2.4.0"
-    "@parcel/utils" "2.4.0"
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/parcel/-/parcel-2.7.0.tgz#41fdd3e5c7144d4cf7f1fa3ab8d0ea0d47d31f77"
+  integrity sha512-pRYwnivwtNP0tip8xYSo4zCB0XhLt7/gJzP1p8OovCqkmFjG9VG+GW9TcAKqMIo0ovEa9tT+/s6gY1Qy+BONGQ==
+  dependencies:
+    "@parcel/config-default" "2.7.0"
+    "@parcel/core" "2.7.0"
+    "@parcel/diagnostic" "2.7.0"
+    "@parcel/events" "2.7.0"
+    "@parcel/fs" "2.7.0"
+    "@parcel/logger" "2.7.0"
+    "@parcel/package-manager" "2.7.0"
+    "@parcel/reporter-cli" "2.7.0"
+    "@parcel/reporter-dev-server" "2.7.0"
+    "@parcel/utils" "2.7.0"
     chalk "^4.1.0"
     commander "^7.0.0"
     get-port "^4.2.0"
@@ -14705,14 +14826,14 @@ parse-entities@^2.0.0:
 parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
-  integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
+  integrity sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==
   dependencies:
     error-ex "^1.2.0"
 
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+  integrity sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==
   dependencies:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
@@ -14735,12 +14856,12 @@ parse-numeric-range@1.2.0:
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
-  integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
+  integrity sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==
 
 parse-path@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.3.tgz#82d81ec3e071dcc4ab49aa9f2c9c0b8966bb22bf"
-  integrity sha512-9Cepbp2asKnWTJ9x2kpw6Fe8y9JDbqwahGCTvklzd/cEq5C5JC59x2Xb0Kx+x0QZ8bvNquGO8/BWP0cwBHzSAA==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.4.tgz#4bf424e6b743fb080831f03b536af9fc43f0ffea"
+  integrity sha512-Z2lWUis7jlmXC1jeOG9giRO2+FsuyNipeQ43HAjqAZjwSe3SEf+q/84FGPHoso3kyntbxa4c4i77t3m6fGf8cw==
   dependencies:
     is-ssh "^1.3.0"
     protocols "^1.4.0"
@@ -14748,27 +14869,35 @@ parse-path@^4.0.0:
     query-string "^6.13.8"
 
 parse-url@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-6.0.0.tgz#f5dd262a7de9ec00914939220410b66cff09107d"
-  integrity sha512-cYyojeX7yIIwuJzledIHeLUBVJ6COVLeT4eF+2P6aKVzwvgKQPndCBv3+yQ7pcWjqToYwaligxzSYNNmGoMAvw==
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/parse-url/-/parse-url-6.0.5.tgz#4acab8982cef1846a0f8675fa686cef24b2f6f9b"
+  integrity sha512-e35AeLTSIlkw/5GFq70IN7po8fmDUjpDPY1rIK+VubRfsUvBonjQ+PBZG+vWMACnQSmNlvl524IucoDmcioMxA==
   dependencies:
     is-ssh "^1.3.0"
     normalize-url "^6.1.0"
     parse-path "^4.0.0"
     protocols "^1.4.0"
 
-parse5-htmlparser2-tree-adapter@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
-  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
+parse5-htmlparser2-tree-adapter@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz#23c2cc233bcf09bb7beba8b8a69d46b08c62c2f1"
+  integrity sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==
   dependencies:
-    parse5 "^6.0.1"
+    domhandler "^5.0.2"
+    parse5 "^7.0.0"
 
-parse5@6.0.1, parse5@^6.0.0, parse5@^6.0.1:
+parse5@6.0.1, parse5@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
+parse5@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.0.0.tgz#51f74a5257f5fcc536389e8c2d0b3802e1bfa91a"
+  integrity sha512-y/t8IXSPWTuRZqXc0ajH/UwDj4mnqLEbSttNbThcFhGrZuOyoyvNBO85PBp2jQa55wY9d07PBNjsK8ZP3K5U6g==
+  dependencies:
+    entities "^4.3.0"
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -14785,7 +14914,7 @@ pascal-case@^3.1.2:
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
-  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
+  integrity sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==
 
 path-browserify@0.0.1:
   version "0.0.1"
@@ -14800,19 +14929,19 @@ path-browserify@^1.0.1:
 path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
-  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
+  integrity sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==
 
 path-exists@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
-  integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=
+  integrity sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==
   dependencies:
     pinkie-promise "^2.0.0"
 
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
-  integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+  integrity sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==
 
 path-exists@^4.0.0:
   version "4.0.0"
@@ -14822,24 +14951,24 @@ path-exists@^4.0.0:
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
-  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
 
 path-is-inside@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
-  integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
+  integrity sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==
 
 path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
-  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
+  integrity sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==
 
 path-key@^3.0.0, path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.6, path-parse@^1.0.7:
+path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@@ -14847,12 +14976,12 @@ path-parse@^1.0.6, path-parse@^1.0.7:
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
+  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
 
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
-  integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=
+  integrity sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==
   dependencies:
     graceful-fs "^4.1.2"
     pify "^2.0.0"
@@ -14884,7 +15013,7 @@ pbkdf2@^3.0.3:
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+  integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
 picocolors@^0.2.1:
   version "0.2.1"
@@ -14909,12 +15038,12 @@ pidtree@^0.3.0:
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
-  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
 pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
+  integrity sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==
 
 pify@^4.0.1:
   version "4.0.1"
@@ -14929,14 +15058,14 @@ pify@^5.0.0:
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
-  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
+  integrity sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==
   dependencies:
     pinkie "^2.0.0"
 
 pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
-  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
+  integrity sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==
 
 pirates@^4.0.1, pirates@^4.0.5:
   version "4.0.5"
@@ -14996,18 +15125,18 @@ popmotion@11.0.3:
     tslib "^2.1.0"
 
 portfinder@^1.0.25:
-  version "1.0.28"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
-  integrity sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==
+  version "1.0.29"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.29.tgz#d06ff886f4ff91274ed3e25c7e6b0c68d2a0735a"
+  integrity sha512-Z5+DarHWCKlufshB9Z1pN95oLtANoY5Wn9X3JGELGyQ6VhEcBfT2t+1fGUBq7MwUant6g/mqowH+4HifByPbiQ==
   dependencies:
-    async "^2.6.2"
-    debug "^3.1.1"
-    mkdirp "^0.5.5"
+    async "^2.6.4"
+    debug "^3.2.7"
+    mkdirp "^0.5.6"
 
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
-  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
+  integrity sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==
 
 postcss-flexbugs-fixes@^4.2.1:
   version "4.2.1"
@@ -15089,9 +15218,9 @@ postcss-modules-values@^4.0.0:
     icss-utils "^5.0.0"
 
 postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
-  version "6.0.9"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
-  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
@@ -15101,14 +15230,14 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@8.4.5:
-  version "8.4.5"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
-  integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
+postcss@8.4.14:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
   dependencies:
-    nanoid "^3.1.30"
+    nanoid "^3.3.4"
     picocolors "^1.0.0"
-    source-map-js "^1.0.1"
+    source-map-js "^1.0.2"
 
 postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.39"
@@ -15119,11 +15248,11 @@ postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0
     source-map "^0.6.1"
 
 postcss@^8.2.15:
-  version "8.4.12"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
-  integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
+  version "8.4.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
+  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
   dependencies:
-    nanoid "^3.3.1"
+    nanoid "^3.3.4"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
@@ -15164,7 +15293,7 @@ prelude-ls@^1.2.1:
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
-  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
+  integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
 prettier-eslint-cli@^5.0.1:
   version "5.0.1"
@@ -15244,9 +15373,9 @@ prettier@^1.7.0:
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
 prettier@^2.0.0, prettier@^2.2.1, prettier@^2.3.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.1.tgz#d472797e0d7461605c1609808e27b80c0f9cfe17"
-  integrity sha512-8UVbTBYGwN37Bs9LERmxCPjdvPxlEowx2urIL6urHzdb3SDq4B/Z6xLFCblrSnE4iKWcS6ziJ3aOYrc1kz/E2A==
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64"
+  integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
 
 pretty-error@^2.1.1:
   version "2.1.2"
@@ -15294,12 +15423,12 @@ pretty-format@^27.0.2:
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
-  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
+  integrity sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==
 
 prism-react-renderer@^1.2.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.3.1.tgz#88fc9d0df6bed06ca2b9097421349f8c2f24e30d"
-  integrity sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ==
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.3.5.tgz#786bb69aa6f73c32ba1ee813fbe17a0115435085"
+  integrity sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==
 
 prismjs@^1.27.0:
   version "1.28.0"
@@ -15326,7 +15455,7 @@ process-nextick-args@~2.0.0:
 process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
-  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
+  integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
 progress@^2.0.0:
   version "2.0.3"
@@ -15336,7 +15465,7 @@ progress@^2.0.0:
 promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
-  integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
+  integrity sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==
 
 promise-retry@^2.0.1:
   version "2.0.1"
@@ -15378,7 +15507,7 @@ prompts@^2.0.1, prompts@^2.4.0:
 promzard@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/promzard/-/promzard-0.3.0.tgz#26a5d6ee8c7dee4cb12208305acfb93ba382a9ee"
-  integrity sha1-JqXW7ox97kyxIggwWs+5O6OCqe4=
+  integrity sha512-JZeYqd7UAcHCwI+sTOeUDYkvEU+1bQ7iE0UT1MgB/tERkAPkesW46MrpIySzODi+owTjZtiF8Ay5j9m60KmMBw==
   dependencies:
     read "1"
 
@@ -15401,13 +15530,18 @@ property-information@^5.0.0, property-information@^5.3.0:
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
-  integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
+  integrity sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==
 
-protocols@^1.1.0, protocols@^1.4.0:
+protocols@^1.4.0:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.8.tgz#48eea2d8f58d9644a4a32caae5d5db290a075ce8"
   integrity sha512-IgjKyaUSjsROSO8/D49Ab7hP8mJgTYcqApOqdPhLoPxAplXmkp+zRvsrSQjFn5by0rhm4VH0GAUELIPpx7B1yg==
 
+protocols@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/protocols/-/protocols-2.0.1.tgz#8f155da3fc0f32644e83c5782c8e8212ccf70a86"
+  integrity sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -15419,12 +15553,12 @@ proxy-addr@~2.0.7:
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-  integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
+  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
 
 psl@^1.1.28, psl@^1.1.33:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
-  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
+  integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
 
 public-encrypt@^4.0.0:
   version "4.0.3"
@@ -15466,12 +15600,12 @@ pumpify@^1.3.3:
 punycode@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
-  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
+  integrity sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==
 
 punycode@^1.2.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
+  integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
 
 punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
@@ -15481,20 +15615,22 @@ punycode@^2.1.0, punycode@^2.1.1:
 q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
-  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
-
-qs@6.9.7:
-  version "6.9.7"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe"
-  integrity sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==
+  integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
 
-qs@^6.10.0, qs@^6.4.0, qs@^6.9.4:
+qs@6.10.3:
   version "6.10.3"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
   integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
   dependencies:
     side-channel "^1.0.4"
 
+qs@^6.10.0, qs@^6.4.0, qs@^6.9.4:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
+  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
+  dependencies:
+    side-channel "^1.0.4"
+
 qs@~6.5.2:
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
@@ -15513,14 +15649,14 @@ query-string@^6.13.8:
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
-  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
+  integrity sha512-773xhDQnZBMFobEiztv8LIl70ch5MSF/jUQVlhwFyBILqq96anmoctVIYz+ZRp0qbCKATTn6ev02M3r7Ga5vqA==
 
 querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
-  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
+  integrity sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==
 
-querystring@^0.2.0, querystring@^0.2.1:
+querystring@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.1.tgz#40d77615bb09d16902a85c3e38aa8b5ed761c2dd"
   integrity sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==
@@ -15545,12 +15681,12 @@ raf@^3.4.1:
 railroad-diagrams@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
-  integrity sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=
+  integrity sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A==
 
-ramda@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
-  integrity sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=
+ramda@^0.28.0:
+  version "0.28.0"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.28.0.tgz#acd785690100337e8b063cab3470019be427cc97"
+  integrity sha512-9QnLuG/kPVgWvMQ4aODhsBUFKOUmnbUnsSXACv+NCQZcHbeb+v8Lodp8OVxtRULN1/xOyYLLaL6npE6dMq5QTA==
 
 randexp@0.4.6:
   version "0.4.6"
@@ -15589,13 +15725,13 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-raw-body@2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.3.tgz#8f80305d11c2a0a545c2d9d89d7a0286fcead43c"
-  integrity sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==
+raw-body@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
+  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
   dependencies:
     bytes "3.1.2"
-    http-errors "1.8.1"
+    http-errors "2.0.0"
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
@@ -15638,9 +15774,9 @@ react-docgen-typescript@^2.1.1:
   integrity sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==
 
 react-docgen@^5.0.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.4.0.tgz#2cd7236720ec2769252ef0421f23250b39a153a1"
-  integrity sha512-JBjVQ9cahmNlfjMGxWUxJg919xBBKAoy3hgDgKERbR+BcF4ANpDuzWAScC7j27hZfd8sJNmMPOLWo9+vB/XJEQ==
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-5.4.3.tgz#7d297f73b977d0c7611402e5fc2a168acf332b26"
+  integrity sha512-xlLJyOlnfr8lLEEeaDZ+X2J/KJoe6Nr9AzxnkdQWush5hz2ZSu66w6iLMOScMmxoSHWpWMn+k3v5ZiyCfcWsOA==
   dependencies:
     "@babel/core" "^7.7.5"
     "@babel/generator" "^7.12.11"
@@ -15678,6 +15814,11 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+react-error-overlay@6.0.9:
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
+  integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
+
 react-fast-compare@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
@@ -15697,38 +15838,43 @@ react-inspector@^5.1.0:
     is-dom "^1.0.0"
     prop-types "^15.0.0"
 
-react-instantsearch-core@6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/react-instantsearch-core/-/react-instantsearch-core-6.23.0.tgz#13d661435a8eaa4fd251ca09279f985ff64fd2e0"
-  integrity sha512-vsNtxX7olb3WoQveZ6jK9EnRfoyVp/RRdmNbf21RaeaY8QNTs6bscAgKekVyQhydncnquy15I8MKlZa0syr75A==
+react-instantsearch-core@6.31.1:
+  version "6.31.1"
+  resolved "https://registry.yarnpkg.com/react-instantsearch-core/-/react-instantsearch-core-6.31.1.tgz#7303ebcbc432e0c7932ba1eab96b32a8caa72ade"
+  integrity sha512-8bYVxPoyIsyh/+2+tSXawV8I7mzM3YxlVosXYS3RKuJarqYCxOHBEtWn9tiY40EoeZ0gFIyG4j7tVnhmRDXbwQ==
   dependencies:
     "@babel/runtime" "^7.1.2"
-    algoliasearch-helper "^3.7.4"
+    algoliasearch-helper "^3.10.0"
     prop-types "^15.6.2"
     react-fast-compare "^3.0.0"
 
 react-instantsearch-dom@^6.12.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/react-instantsearch-dom/-/react-instantsearch-dom-6.23.0.tgz#384de21335f6ba4a961b94105115bd21f19de205"
-  integrity sha512-N3t7vqXnC+T9Hg9nHRn4KRIyPbKuS6vucg9NLua6z629t10fsjU/WOFGMspJhmmg5yfeccsBkMQl1TJ8iksFgA==
+  version "6.31.1"
+  resolved "https://registry.yarnpkg.com/react-instantsearch-dom/-/react-instantsearch-dom-6.31.1.tgz#d23069ec4dde707ce589761261de587ff65b3aba"
+  integrity sha512-wM85e83K3gaCoaESZOOZee9Tb+DTDH+cIcPN1Kj0kJRCu0byTk4/zs8HDqcgTVgZA/rrVrg1pVeZOEkKYenVKg==
   dependencies:
     "@babel/runtime" "^7.1.2"
-    algoliasearch-helper "^3.7.4"
+    algoliasearch-helper "^3.10.0"
     classnames "^2.2.5"
     prop-types "^15.6.2"
     react-fast-compare "^3.0.0"
-    react-instantsearch-core "6.23.0"
+    react-instantsearch-core "6.31.1"
 
 react-intersection-observer@8.32.2:
   version "8.32.2"
   resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.32.2.tgz#527eeecf569309d64ed96330636d90aac336c957"
   integrity sha512-QTcea+n28AvOHbTku+jErfQqknbc4Nuh7EUNik8p/JMN56W2Jhjs+qcYZzQhAoyLX8pZD0QXpYX0lW87faackQ==
 
-react-is@17.0.2, "react-is@^16.12.0 || ^17.0.0", react-is@^17.0.0, react-is@^17.0.1, react-is@^17.0.2:
+react-is@17.0.2, react-is@^17.0.0, react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0":
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -15783,17 +15929,17 @@ react-refresh@^0.9.0:
   integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==
 
 react-shallow-renderer@^16.13.1:
-  version "16.14.1"
-  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
-  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+  version "16.15.0"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
+  integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
   dependencies:
     object-assign "^4.1.1"
-    react-is "^16.12.0 || ^17.0.0"
+    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
 
 react-simple-code-editor@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz#bb57c7c29b570f2ab229872599eac184f5bc673c"
-  integrity sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.11.3.tgz#6e5af1c2e51588aded2c89b86e98fac144212f61"
+  integrity sha512-7bVI4Yd1aNCeuldErXUt8ksaAG5Fi+GZ6vp3mtFBnckKdzsQtrgkDvdwMFXIhwTGG+mUYmk5ZpMo0axSW9JBzA==
 
 react-sizeme@^3.0.1:
   version "3.0.2"
@@ -15829,20 +15975,10 @@ react-test-renderer@^17.0.0:
 react-themeable@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-themeable/-/react-themeable-1.1.0.tgz#7d4466dd9b2b5fa75058727825e9f152ba379a0e"
-  integrity sha1-fURm3ZsrX6dQWHJ4JenxUro3mg4=
+  integrity sha512-kl5tQ8K+r9IdQXZd8WLa+xxYN04lLnJXRVhHfdgwsUJr/SlKJxIejoc9z9obEkx1mdqbTw1ry43fxEUwyD9u7w==
   dependencies:
     object-assign "^3.0.0"
 
-react-transition-group@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
-  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    dom-helpers "^5.0.1"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-
 react-use-measure@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
@@ -15913,7 +16049,7 @@ read-package-tree@^5.3.1:
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
-  integrity sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=
+  integrity sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==
   dependencies:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
@@ -15921,7 +16057,7 @@ read-pkg-up@^1.0.1:
 read-pkg-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
-  integrity sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=
+  integrity sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==
   dependencies:
     find-up "^2.0.0"
     read-pkg "^3.0.0"
@@ -15947,7 +16083,7 @@ read-pkg-up@^7.0.1:
 read-pkg@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
-  integrity sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=
+  integrity sha512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ==
   dependencies:
     load-json-file "^1.0.0"
     normalize-package-data "^2.3.2"
@@ -15956,7 +16092,7 @@ read-pkg@^1.0.0:
 read-pkg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
-  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
+  integrity sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==
   dependencies:
     load-json-file "^4.0.0"
     normalize-package-data "^2.3.2"
@@ -15975,7 +16111,7 @@ read-pkg@^5.1.1, read-pkg@^5.2.0:
 read@1, read@~1.0.1:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/read/-/read-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4"
-  integrity sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=
+  integrity sha512-rSOKNYUmaxy0om1BNjMN4ezNT6VKK+2xF4GBhc81mkH7L60i6dp8qPYrkndNLT3QPphoII3maL9PVC9XmhHwVQ==
   dependencies:
     mute-stream "~0.0.4"
 
@@ -16030,14 +16166,14 @@ readdirp@~3.6.0:
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
-  integrity sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=
+  integrity sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==
   dependencies:
     resolve "^1.1.6"
 
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
-  integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
+  integrity sha512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g==
   dependencies:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
@@ -16092,10 +16228,10 @@ regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
 
-regenerator-transform@^0.14.2:
-  version "0.14.5"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
-  integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
+regenerator-transform@^0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.0.tgz#cbd9ead5d77fae1a48d957cf889ad0586adb6537"
+  integrity sha512-LsrGtPmbYg19bcPHwdtmXwbW+TqNvtY4riE3P83foeHRroMbH6/2ddFBfab3t7kbzc7v7p4wbkIecHImqt0QNg==
   dependencies:
     "@babel/runtime" "^7.8.4"
 
@@ -16107,13 +16243,14 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz#b3f4c0059af9e47eca9f3f660e51d81307e72307"
-  integrity sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==
+regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
+  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
+    functions-have-names "^1.2.2"
 
 regexpp@^2.0.1:
   version "2.0.1"
@@ -16137,10 +16274,10 @@ regexpu-core@^4.2.0:
     unicode-match-property-ecmascript "^2.0.0"
     unicode-match-property-value-ecmascript "^2.0.0"
 
-regexpu-core@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.0.1.tgz#c531122a7840de743dcf9c83e923b5560323ced3"
-  integrity sha512-CriEZlrKK9VJw/xQGJpQM5rY88BtuL8DM+AEwvcThHilbxiTAy8vq4iJnd2tqq8wLmjbGZzP7ZcKFjbGkmEFrw==
+regexpu-core@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.1.0.tgz#2f8504c3fd0ebe11215783a41541e21c79942c6d"
+  integrity sha512-bb6hk+xWd2PEOkj5It46A16zFMs2mv86Iwpdu94la4S3sJ7C973h2dHpYKwIBGaWSO7cIRJ+UX0IeMaWcO4qwA==
   dependencies:
     regenerate "^1.4.2"
     regenerate-unicode-properties "^10.0.1"
@@ -16200,7 +16337,7 @@ rehype@11.0.0:
 relateurl@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
-  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
+  integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
 
 remark-autolink-headings@^6.0.1:
   version "6.1.0"
@@ -16305,12 +16442,12 @@ remarkable@^1.7.1:
 remove-accents@0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
-  integrity sha1-CkPTqq4egNuRngeuJUsoXZ4ce7U=
+  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
 
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
-  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
+  integrity sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==
 
 renderkid@^2.0.4:
   version "2.0.7"
@@ -16342,12 +16479,12 @@ repeat-element@^1.1.2:
 repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
-  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+  integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
 
 repeating@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
-  integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=
+  integrity sha512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A==
   dependencies:
     is-finite "^1.0.0"
 
@@ -16380,7 +16517,7 @@ request@^2.88.0, request@^2.88.2:
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
-  integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
+  integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
 
 require-from-string@^2.0.2:
   version "2.0.2"
@@ -16395,22 +16532,22 @@ require-main-filename@^2.0.0:
 require-relative@^0.8.7:
   version "0.8.7"
   resolved "https://registry.yarnpkg.com/require-relative/-/require-relative-0.8.7.tgz#7999539fc9e047a37928fa196f8e1563dabd36de"
-  integrity sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=
+  integrity sha512-AKGr4qvHiryxRb19m3PsLRGuKVAbJLUD7E6eOaHkfKhwc+vSgVOCY5xNvm9EkolBKTOf0GrQAZKLimOCz81Khg==
 
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
-  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
 reselect@^4.0.0:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.5.tgz#852c361247198da6756d07d9296c2b51eddb79f6"
-  integrity sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ==
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.6.tgz#19ca2d3d0b35373a74dc1c98692cdaffb6602656"
+  integrity sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ==
 
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
-  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
+  integrity sha512-ccu8zQTrzVr954472aUVPLEcB3YpKSYR3cg/3lo1okzobPBM+1INXBbBZlDbnI/hbEocnf8j0QVo43hQKrbchg==
   dependencies:
     resolve-from "^3.0.0"
 
@@ -16424,7 +16561,7 @@ resolve-cwd@^3.0.0:
 resolve-dir@^1.0.0, resolve-dir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/resolve-dir/-/resolve-dir-1.0.1.tgz#79a40644c362be82f26effe739c9bb5382046f43"
-  integrity sha1-eaQGRMNivoLybv/nOcm7U4IEb0M=
+  integrity sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==
   dependencies:
     expand-tilde "^2.0.0"
     global-modules "^1.0.0"
@@ -16432,7 +16569,7 @@ resolve-dir@^1.0.0, resolve-dir@^1.0.1:
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
-  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
+  integrity sha512-GnlH6vxLymXJNMBo7XP1fJIzBFbdYt49CuTwmB/6N53t+kMPRMFKz783LlQ4tv28XoQfMWinAJX6WCGf2IlaIw==
 
 resolve-from@^4.0.0:
   version "4.0.0"
@@ -16452,18 +16589,9 @@ resolve-pathname@^3.0.0:
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
-  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
-
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.3.2:
-  version "1.22.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
-  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
-  dependencies:
-    is-core-module "^2.8.1"
-    path-parse "^1.0.7"
-    supports-preserve-symlinks-flag "^1.0.0"
+  integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
 
-resolve@^1.10.1:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.3.2:
   version "1.22.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
   integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
@@ -16473,17 +16601,18 @@ resolve@^1.10.1:
     supports-preserve-symlinks-flag "^1.0.0"
 
 resolve@^2.0.0-next.3:
-  version "2.0.0-next.3"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.3.tgz#d41016293d4a8586a39ca5d9b5f15cbea1f55e46"
-  integrity sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==
+  version "2.0.0-next.4"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
+  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
   dependencies:
-    is-core-module "^2.2.0"
-    path-parse "^1.0.6"
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
 
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
-  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
+  integrity sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==
   dependencies:
     onetime "^2.0.0"
     signal-exit "^3.0.2"
@@ -16504,7 +16633,7 @@ ret@~0.1.10:
 retry@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
-  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
+  integrity sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==
 
 reusify@^1.0.4:
   version "1.0.4"
@@ -16518,7 +16647,7 @@ rimraf@2.6.3:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.3:
+rimraf@^2.5.4, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -16543,7 +16672,7 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
 rst-selector-parser@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
-  integrity sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=
+  integrity sha512-nDG1rZeP6oFTLN6yNDV/uiAvs1+FS/KlrEwh7+y7dpuApDBy6bI2HTBcc0/V8lv9OTqfyD34eF7au2pm8aBbhA==
   dependencies:
     lodash.flattendeep "^4.4.0"
     nearley "^2.7.10"
@@ -16568,7 +16697,7 @@ run-parallel@^1.1.9:
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
-  integrity sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=
+  integrity sha512-ntymy489o0/QQplUDnpYAYUsO50K9SBrIVaKCWDOJzYJts0f9WH9RFJkyagebkw5+y1oi00R7ynNW/d12GBumg==
   dependencies:
     aproba "^1.1.1"
 
@@ -16597,7 +16726,7 @@ safe-buffer@5.2.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, s
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
-  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
+  integrity sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==
   dependencies:
     ret "~0.1.10"
 
@@ -16682,7 +16811,7 @@ scroll-into-view-if-needed@2.2.29:
 section-iterator@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/section-iterator/-/section-iterator-2.0.0.tgz#bf444d7afeeb94ad43c39ad2fb26151627ccba2a"
-  integrity sha1-v0RNev7rlK1Dw5rS+yYVFifMuio=
+  integrity sha512-xvTNwcbeDayXotnV32zLb3duQsP+4XosHpb/F+tu6VzEZFmIjzPdNk6/O+QOOx5XTh08KL2ufdXeCO33p380pQ==
 
 section-matter@^1.0.0:
   version "1.0.0"
@@ -16695,12 +16824,12 @@ section-matter@^1.0.0:
 secure-compare@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/secure-compare/-/secure-compare-3.0.1.tgz#f1a0329b308b221fae37b9974f3d578d0ca999e3"
-  integrity sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=
+  integrity sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==
 
 select@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
-  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+  integrity sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==
 
 "semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
   version "5.7.1"
@@ -16718,9 +16847,9 @@ semver@7.0.0:
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
 semver@7.x, semver@^7.1.1, semver@^7.1.3, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
-  version "7.3.5"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
-  integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -16729,24 +16858,24 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-send@0.17.2:
-  version "0.17.2"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"
-  integrity sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==
+send@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
+  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
   dependencies:
     debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
+    depd "2.0.0"
+    destroy "1.2.0"
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     etag "~1.8.1"
     fresh "0.5.2"
-    http-errors "1.8.1"
+    http-errors "2.0.0"
     mime "1.6.0"
     ms "2.1.3"
-    on-finished "~2.3.0"
+    on-finished "2.4.1"
     range-parser "~1.2.1"
-    statuses "~1.5.0"
+    statuses "2.0.1"
 
 serialize-javascript@^4.0.0:
   version "4.0.0"
@@ -16772,7 +16901,7 @@ serialize-javascript@^6.0.0:
 serve-favicon@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/serve-favicon/-/serve-favicon-2.5.0.tgz#935d240cdfe0f5805307fdfe967d88942a2cbcf0"
-  integrity sha1-k10kDN/g9YBTB/3+ln2IlCosvPA=
+  integrity sha512-FMW2RvqNr03x+C0WxTyu6sOv21oOjkq5j8tjquWccwa6ScNyGFOGJVpuS1NmTVGBAHS07xnSKotgf2ehQmf9iA==
   dependencies:
     etag "~1.8.1"
     fresh "0.5.2"
@@ -16780,20 +16909,20 @@ serve-favicon@^2.5.0:
     parseurl "~1.3.2"
     safe-buffer "5.1.1"
 
-serve-static@1.14.2:
-  version "1.14.2"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.2.tgz#722d6294b1d62626d41b43a013ece4598d292bfa"
-  integrity sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==
+serve-static@1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
+  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
   dependencies:
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     parseurl "~1.3.3"
-    send "0.17.2"
+    send "0.18.0"
 
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
+  integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
 set-getter@^0.1.0:
   version "0.1.1"
@@ -16815,7 +16944,7 @@ set-value@^2.0.0, set-value@^2.0.1:
 setimmediate@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
 
 setprototypeof@1.2.0:
   version "1.2.0"
@@ -16850,7 +16979,7 @@ shallowequal@^1.1.0:
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
-  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
+  integrity sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==
   dependencies:
     shebang-regex "^1.0.0"
 
@@ -16864,7 +16993,7 @@ shebang-command@^2.0.0:
 shebang-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
-  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
+  integrity sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==
 
 shebang-regex@^3.0.0:
   version "3.0.0"
@@ -16949,7 +17078,7 @@ slice-ansi@^4.0.0:
 slide@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
-  integrity sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=
+  integrity sha512-NwrtjCg+lZoqhFU8fOwl4ay2ei8PaqCBOUV3/ektPY9trO1yQ1oXEfmHAhKArUVUr/hOHvy5f6AdP17dCM0zMw==
 
 smart-buffer@^4.2.0:
   version "4.2.0"
@@ -16996,26 +17125,26 @@ socks-proxy-agent@^5.0.0:
     socks "^2.3.3"
 
 socks-proxy-agent@^6.0.0:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-6.1.1.tgz#e664e8f1aaf4e1fb3df945f09e3d94f911137f87"
-  integrity sha512-t8J0kG3csjA4g6FTbsMOWws+7R7vuRC8aQ/wy3/1OWmsgwA68zs/+cExQ0koSitUDXqhufF/YJr9wtNMZHw5Ew==
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-6.2.1.tgz#2687a31f9d7185e38d530bef1944fe1f1496d6ce"
+  integrity sha512-a6KW9G+6B3nWZ1yB8G7pJwL3ggLy1uTzKAgCb7ttblwqdz9fMGJUuTy3uFzEP48FAs9FLILlmzDlE2JJhVQaXQ==
   dependencies:
     agent-base "^6.0.2"
-    debug "^4.3.1"
-    socks "^2.6.1"
+    debug "^4.3.3"
+    socks "^2.6.2"
 
-socks@^2.3.3, socks@^2.6.1:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/socks/-/socks-2.6.2.tgz#ec042d7960073d40d94268ff3bb727dc685f111a"
-  integrity sha512-zDZhHhZRY9PxRruRMR7kMhnf3I8hDs4S3f9RecfnGxvcBHQcKcIH/oUcEWffsfl1XxdYlA7nnlGbbTvPz9D8gA==
+socks@^2.3.3, socks@^2.6.2:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-2.7.0.tgz#f9225acdb841e874dca25f870e9130990f3913d0"
+  integrity sha512-scnOe9y4VuiNUULJN72GrM26BNOjVsfPXI+j+98PkyEfsIXroa5ofyjT+FzGvn/xHs73U2JtoBYAVx9Hl4quSA==
   dependencies:
-    ip "^1.1.5"
+    ip "^2.0.0"
     smart-buffer "^4.2.0"
 
 sort-keys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-2.0.0.tgz#658535584861ec97d730d6cf41822e1f56684128"
-  integrity sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=
+  integrity sha512-/dPCrG1s3ePpWm6yBbxZq5Be1dXGLyLn9Z791chDC3NFrpkVbWGzkBwPN1knaciexFXgRJ7hzdnwZ4stHSDmjg==
   dependencies:
     is-plain-obj "^1.0.0"
 
@@ -17031,7 +17160,7 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^1.0.1, source-map-js@^1.0.2:
+source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
@@ -17060,7 +17189,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
-source-map@0.7.3, source-map@^0.7.3, source-map@~0.7.2:
+source-map@0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
@@ -17068,13 +17197,18 @@ source-map@0.7.3, source-map@^0.7.3, source-map@~0.7.2:
 source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
-  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
 
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+source-map@^0.7.3, source-map@~0.7.2:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
+  integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
+
 sourcemap-codec@^1.4.8:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -17140,7 +17274,7 @@ split@^1.0.0:
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
-  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+  integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
 sshpk@^1.7.0:
   version "1.17.0"
@@ -17183,10 +17317,10 @@ stack-utils@^2.0.2:
   dependencies:
     escape-string-regexp "^2.0.0"
 
-stackframe@^1.1.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.1.tgz#1033a3473ee67f08e2f2fc8eba6aef4f845124e1"
-  integrity sha512-h88QkzREN/hy8eRdyNhhsO7RSJ5oyTqxxmmn0dzBIMUclZsjpfmrsg81vp8mjjAs2vAZ72nyWxRUwSwmh0e4xg==
+stackframe@^1.3.4:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
+  integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
 
 state-toggle@^1.0.0:
   version "1.0.3"
@@ -17196,20 +17330,20 @@ state-toggle@^1.0.0:
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
-  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
+  integrity sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==
   dependencies:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-"statuses@>= 1.5.0 < 2", statuses@~1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
-  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+statuses@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
 store2@^2.12.0:
-  version "2.13.2"
-  resolved "https://registry.yarnpkg.com/store2/-/store2-2.13.2.tgz#01ad8802ca5b445b9c316b55e72645c13a3cd7e3"
-  integrity sha512-CMtO2Uneg3SAz/d6fZ/6qbqqQHi2ynq6/KzMD/26gTkiEShCcpqFfTHgOxsE0egAq6SX3FmN4CeSqn8BzXQkJg==
+  version "2.14.2"
+  resolved "https://registry.yarnpkg.com/store2/-/store2-2.14.2.tgz#56138d200f9fe5f582ad63bc2704dbc0e4a45068"
+  integrity sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==
 
 storybook-dark-mode@^1.1.0:
   version "1.1.0"
@@ -17254,12 +17388,12 @@ stream-shift@^1.0.0:
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
-  integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
+  integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
 string-hash@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
-  integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
+  integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
 
 string-length@^4.0.1:
   version "4.0.2"
@@ -17277,7 +17411,7 @@ string-natural-compare@^3.0.1:
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
-  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
+  integrity sha512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw==
   dependencies:
     code-point-at "^1.0.0"
     is-fullwidth-code-point "^1.0.0"
@@ -17309,7 +17443,7 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
-"string.prototype.matchall@^4.0.0 || ^3.0.1", string.prototype.matchall@^4.0.6:
+"string.prototype.matchall@^4.0.0 || ^3.0.1", string.prototype.matchall@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
   integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
@@ -17342,29 +17476,31 @@ string.prototype.padstart@^3.0.0:
     es-abstract "^1.19.1"
 
 string.prototype.trim@^1.2.1:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.5.tgz#a587bcc8bfad8cb9829a577f5de30dd170c1682c"
-  integrity sha512-Lnh17webJVsD6ECeovpVN17RlAKjmz4rF9S+8Y45CkMc/ufVpTkU3vZIyIC7sllQ1FCvObZnnCdNs/HXTUOTlg==
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.6.tgz#824960787db37a9e24711802ed0c1d1c0254f83e"
+  integrity sha512-8lMR2m+U0VJTPp6JjvJTtGyc4FIGq9CdRt7O9p6T0e6K4vjU+OP+SQJpbe/SBmRcCUIvNUnjsbmY6lnMp8MhsQ==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
-    es-abstract "^1.19.1"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
 
-string.prototype.trimend@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
-  integrity sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==
+string.prototype.trimend@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz#914a65baaab25fbdd4ee291ca7dde57e869cb8d0"
+  integrity sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
 
-string.prototype.trimstart@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
-  integrity sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==
+string.prototype.trimstart@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz#5466d93ba58cfa2134839f81d7f42437e8c01fef"
+  integrity sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==
   dependencies:
     call-bind "^1.0.2"
-    define-properties "^1.1.3"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
 
 string_decoder@^1.0.0, string_decoder@^1.1.1:
   version "1.3.0"
@@ -17392,14 +17528,14 @@ stringify-entities@^3.0.1:
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
-  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
+  integrity sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==
   dependencies:
     ansi-regex "^2.0.0"
 
 strip-ansi@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
-  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
+  integrity sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==
   dependencies:
     ansi-regex "^3.0.0"
 
@@ -17420,19 +17556,19 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
 strip-bom-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
-  integrity sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=
+  integrity sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==
 
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
-  integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
+  integrity sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==
   dependencies:
     is-utf8 "^0.2.0"
 
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
-  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
 
 strip-bom@^4.0.0:
   version "4.0.0"
@@ -17442,12 +17578,12 @@ strip-bom@^4.0.0:
 strip-color@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/strip-color/-/strip-color-0.1.0.tgz#106f65d3d3e6a2d9401cac0eb0ce8b8a702b4f7b"
-  integrity sha1-EG9l09PmotlAHKwOsM6LinArT3s=
+  integrity sha512-p9LsUieSjWNNAxVCXLeilaDlmuUOrDS5/dF9znM1nZc7EGX5+zEFC0bEevsNIaldjlks+2jns5Siz6F9iK6jwA==
 
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
-  integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
+  integrity sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==
 
 strip-final-newline@^2.0.0:
   version "2.0.0"
@@ -17457,7 +17593,7 @@ strip-final-newline@^2.0.0:
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
-  integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=
+  integrity sha512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA==
   dependencies:
     get-stdin "^4.0.1"
 
@@ -17471,7 +17607,7 @@ strip-indent@^3.0.0:
 strip-json-comments@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
+  integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
@@ -17523,10 +17659,10 @@ style-value-types@5.0.0:
     hey-listen "^1.0.8"
     tslib "^2.1.0"
 
-styled-jsx@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.1.tgz#78fecbbad2bf95ce6cd981a08918ce4696f5fc80"
-  integrity sha512-+PIZ/6Uk40mphiQJJI1202b+/dYeTVd9ZnMPR80pgiWbjIwvN2zIp4r9et0BgqBuShh48I0gttPlAXA7WVvBxw==
+styled-jsx@5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.4.tgz#5b1bd0b9ab44caae3dd1361295559706e044aa53"
+  integrity sha512-sDFWLbg4zR+UkNzfk5lPilyIgtpddfxXEULxhujorr5jtePTUqiPDc5BC0v1NRqTr/WaFBGQQUoYToGlF4B2KQ==
 
 styled-jsx@^4.0.1:
   version "4.0.1"
@@ -17555,7 +17691,7 @@ stylis@3.5.4:
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
+  integrity sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==
 
 supports-color@^5.3.0:
   version "5.5.0"
@@ -17704,7 +17840,7 @@ telejson@^6.0.8:
 temp-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
-  integrity sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=
+  integrity sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==
 
 temp-write@^4.0.0:
   version "4.0.0"
@@ -17761,15 +17897,15 @@ terser-webpack-plugin@^4.2.3:
     webpack-sources "^1.4.3"
 
 terser-webpack-plugin@^5.0.3, terser-webpack-plugin@^5.1.3:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.1.tgz#0320dcc270ad5372c1e8993fabbd927929773e54"
-  integrity sha512-GvlZdT6wPQKbDNW/GDQzZFg/j4vKU96yl2q6mcUkzKOgW4gwf1Z8cZToUCrz31XHlPWH8MVb1r2tFtdDtTGJ7g==
+  version "5.3.4"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.4.tgz#f4d31e265883d20fda3ca9c0fc6a53f173ae62e3"
+  integrity sha512-SmnkUhBxLDcBfTIeaq+ZqJXLVEyXxSaNcCeSezECdKjfkMrTTnPvapBILylYwyEvHFZAn2cJ8dtiXel5XnfOfQ==
   dependencies:
+    "@jridgewell/trace-mapping" "^0.3.14"
     jest-worker "^27.4.5"
     schema-utils "^3.1.1"
     serialize-javascript "^6.0.0"
-    source-map "^0.6.1"
-    terser "^5.7.2"
+    terser "^5.14.1"
 
 terser@5.10.0:
   version "5.10.0"
@@ -17781,22 +17917,22 @@ terser@5.10.0:
     source-map-support "~0.5.20"
 
 terser@^4.1.2, terser@^4.6.3:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f"
+  integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-terser@^5.10.0, terser@^5.2.0, terser@^5.3.4, terser@^5.7.2:
-  version "5.12.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.12.1.tgz#4cf2ebed1f5bceef5c83b9f60104ac4a78b49e9c"
-  integrity sha512-NXbs+7nisos5E+yXwAD+y7zrcTkMqb0dEJxIGtSKPdCBzopf7ni4odPul2aechpV7EXNvOudYOX2bb5tln1jbQ==
+terser@^5.10.0, terser@^5.14.1, terser@^5.2.0, terser@^5.3.4:
+  version "5.14.2"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.14.2.tgz#9ac9f22b06994d736174f4091aa368db896f1c10"
+  integrity sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==
   dependencies:
+    "@jridgewell/source-map" "^0.3.2"
     acorn "^8.5.0"
     commander "^2.20.0"
-    source-map "~0.7.2"
     source-map-support "~0.5.20"
 
 test-exclude@^6.0.0:
@@ -17816,7 +17952,7 @@ text-extensions@^1.0.0:
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
-  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
 textextensions@2, textextensions@^2.5.0:
   version "2.6.0"
@@ -17851,7 +17987,7 @@ through2@^4.0.0:
 through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+  integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
 timers-browserify@^2.0.4:
   version "2.0.12"
@@ -17863,7 +17999,7 @@ timers-browserify@^2.0.4:
 timsort@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
-  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
+  integrity sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==
 
 tiny-emitter@^2.0.0:
   version "2.1.0"
@@ -17898,24 +18034,24 @@ tmpl@1.0.5:
 to-arraybuffer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
-  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
+  integrity sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA==
 
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
-  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
+  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
 
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
-  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
+  integrity sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==
   dependencies:
     kind-of "^3.0.2"
 
 to-regex-range@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
-  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
+  integrity sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==
   dependencies:
     is-number "^3.0.0"
     repeat-string "^1.6.1"
@@ -17979,12 +18115,12 @@ tr46@^2.1.0:
 tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
-  integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
-  integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
+  integrity sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw==
 
 trim-newlines@^3.0.0:
   version "3.0.1"
@@ -17999,7 +18135,7 @@ trim-trailing-lines@^1.0.0:
 trim@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
-  integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
+  integrity sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==
 
 trough@^1.0.0:
   version "1.0.5"
@@ -18028,11 +18164,11 @@ ts-jest@^26.5.5:
     yargs-parser "20.x"
 
 ts-node@^10.1.0:
-  version "10.7.0"
-  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.7.0.tgz#35d503d0fab3e2baa672a0e94f4b40653c2463f5"
-  integrity sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==
+  version "10.9.1"
+  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b"
+  integrity sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==
   dependencies:
-    "@cspotcode/source-map-support" "0.7.0"
+    "@cspotcode/source-map-support" "^0.8.0"
     "@tsconfig/node10" "^1.0.7"
     "@tsconfig/node12" "^1.0.7"
     "@tsconfig/node14" "^1.0.0"
@@ -18043,7 +18179,7 @@ ts-node@^10.1.0:
     create-require "^1.1.0"
     diff "^4.0.1"
     make-error "^1.1.1"
-    v8-compile-cache-lib "^3.0.0"
+    v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
 ts-pnp@^1.1.6:
@@ -18051,7 +18187,7 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tsconfig-paths@^3.12.0, tsconfig-paths@^3.14.1:
+tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
   integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
@@ -18061,16 +18197,16 @@ tsconfig-paths@^3.12.0, tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.4.0, tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0, tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
-  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
-
 tsutils@^3.17.1, tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -18081,97 +18217,109 @@ tsutils@^3.17.1, tsutils@^3.21.0:
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
-  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
+  integrity sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==
 
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
-  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
+  integrity sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==
   dependencies:
     safe-buffer "^5.0.1"
 
-turbo-darwin-64@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.1.10.tgz#926bb5ddbd6be8c400f4a183b5a9b33ccba37d12"
-  integrity sha512-MY/1mHg+tS/GaZKG805e5JSGNS8A4j/M2GzLwCbNL+lwGMfneNASri1vAd80ss3T2MgMsfsFMVyIQJljqpDBvA==
-
-turbo-darwin-arm64@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.1.10.tgz#f4c0a9dd9a2108ce5c6d04d6fea8260902a758da"
-  integrity sha512-gMPLseYqGKwdy6UHVWKMLA433ZTfQRV5FlYz5n4XVtx30cF6ajOqq12ykeCUUX/lZkH4Uq5zT0tNEYpUhUw7mA==
-
-turbo-freebsd-64@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-freebsd-64/-/turbo-freebsd-64-1.1.10.tgz#3e460c3a58b61b1f7e15acc219764a07cc54e439"
-  integrity sha512-wra27mvakr5ZFceQnCCSR8gHQtKV8Q0EhtzO/wEdyhEssw0wVaNtMHUOOdvFN0HLmjQmmLZgmfZbURc83UDuZQ==
-
-turbo-freebsd-arm64@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-freebsd-arm64/-/turbo-freebsd-arm64-1.1.10.tgz#b96fd519cbd09a721936ead72ab9ec591f6488dc"
-  integrity sha512-J2I76pTwtrEVjHt1+zWY/s/Y0YIGdWHBIWOjhCXi1E8dav98oGw+WUaiFwzAkcksAblOhNpDL3qhnrnm7kHqrg==
-
-turbo-linux-32@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-linux-32/-/turbo-linux-32-1.1.10.tgz#f69dfcd972b5879832c4f4b9b151d3497d0f6115"
-  integrity sha512-d1ILhEv2B/lOtpH4niFUKGb8YMU6G7gNCQCY6wG+SXARWJtDti+KiNWESechD5DycCIMgtE40XNy/c1US+LI5g==
-
-turbo-linux-64@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.1.10.tgz#cf1e1ff4a52f9ceaf49393e83c1e8927bc5d991d"
-  integrity sha512-8VEOiNJFNfUMZOyrN32wOcdT1Ik1nlIuTwkO4UeonAJhuWjTvdDLPCQkz0SECTu60q90l6nXCnNYtoZA6LrZzA==
-
-turbo-linux-arm64@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.1.10.tgz#2d1e927655536fb220bb09bacb9b61135c399b57"
-  integrity sha512-ng3dEEL4SbBudF/UZzsOrfyJh8DLtTHawTepeS30FdtvYuVBXdCPc5BAhbawGoau/2AV4vrN3qzh9e3LCqD6Qg==
-
-turbo-linux-arm@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm/-/turbo-linux-arm-1.1.10.tgz#04d4c80b2b17b612481166eb33db56123e9882d8"
-  integrity sha512-qJ50K/s5MjpHjam+UdnK3GniEIv5XOBCZOGslgMMyz8V/q43vhB9BU9HQODclM89uQgsKxhs8Fue6ytOY4vIpg==
-
-turbo-linux-mips64le@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-linux-mips64le/-/turbo-linux-mips64le-1.1.10.tgz#60b832615e980fd4d215e39adf33818dd25c8021"
-  integrity sha512-Jd4yH7ZEXCo0xmdJWZ6YsyqcNLyL5vRU3j5ZT+1W97YJCT+g+1on3/nd3rBVPzVz52lb8JIqgGtrBrnOO0AWJg==
-
-turbo-linux-ppc64le@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-linux-ppc64le/-/turbo-linux-ppc64le-1.1.10.tgz#9b7bbe1ccd7fdc655f5c5bbea79f6762b35723e5"
-  integrity sha512-YF8+Oi53glqY29O1A7KJsHZxBzeVBobYFnPEXMt8vm+ouuo8kkbxXxShOP4h+33YGEkesTw/CTXtfDC1Xj1hDw==
-
-turbo-windows-32@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-windows-32/-/turbo-windows-32-1.1.10.tgz#769ea82701f8c50d2f104c97cf49dbae1b531c6a"
-  integrity sha512-IO92tVTCtWVPPgcCjf8J7AmBEcwnjv1zPq7t9GFdqZ/6QA06atgPJNzQ/QvyzbzJgUsJUN2ByzwT04o4QUbrBQ==
-
-turbo-windows-64@1.1.10:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.1.10.tgz#f30fb122a0241a328e1f935e2f581816896230b9"
-  integrity sha512-g/RIXaVDaOgliHEJuOsuB6Tefwue9fXBH1/iIH9dmT3Z7lL0banGh+C10RW6Jd6PBPMoPBWir9PLYuzxoPcCNQ==
+turbo-android-arm64@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-android-arm64/-/turbo-android-arm64-1.4.3.tgz#d531c6935134d8cae9f31f61db47d13bd227bb93"
+  integrity sha512-ZUvdoEHJkTkOFOO9PKWYrdONDBVqkNsvwEMufTVf07RXgqmbXDPkznzT4hcQm6xXyqWqJdjgSAMdlm+2nNE1Og==
+
+turbo-darwin-64@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.4.3.tgz#123e214d9070ec6ac81468dc7a1cb02a459fafd7"
+  integrity sha512-gapoVm5qbu2TJS4lJ6fM3o2eAkLyXSxHihw/4NRAYmwHCH3at1/cIAnRcctB/HLL3ZaB/p3HKb8mnI7k6xNHOw==
+
+turbo-darwin-arm64@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-1.4.3.tgz#9fa062c3ffa9208d0e2fa0155dcb48a290e7c109"
+  integrity sha512-XUe6FTsHamEH7FfNslYYO04yecAaguhZuwW4kE9B/BAP8MUYsmVqONauLPyE/YqM6pf2K0xwVe+RlEGf53CWbg==
+
+turbo-freebsd-64@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-freebsd-64/-/turbo-freebsd-64-1.4.3.tgz#ffb4a939ca0000ec91114d2bbddc491c4835e862"
+  integrity sha512-1CAjXmDClgMXdWZXreUfAbGBB2WB9TZHfJIdsgnDqt4fIcFGChknzYqc+Fj3tGHAczMpinGjBbWIzFuxOq/ofQ==
+
+turbo-freebsd-arm64@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-freebsd-arm64/-/turbo-freebsd-arm64-1.4.3.tgz#0bab3e2ccfac1ecc9ed9a30b0ab80f379fe3a788"
+  integrity sha512-j5C7j/vwabPKpr5d6YlLgHGHBZCOcXj3HdkBshDHTQ0wghH0NuCUUaesYxI3wva/4/Ec0dhIrb20Laa/HMxXLA==
+
+turbo-linux-32@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-linux-32/-/turbo-linux-32-1.4.3.tgz#96deb5ebedfe6b97fd8ecc0fa40ff1c891c4c04f"
+  integrity sha512-vnc+StXIoQEnxIU43j7rEz/J+v+RV4dbUdUolBq0k9gkUV8KMCcqPkIa753K47E2KLNGKXMaYDI6AHQX1GAQZg==
+
+turbo-linux-64@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-1.4.3.tgz#ed0152e724c78dea090b2d60d29258110bdfb14a"
+  integrity sha512-KAUeIa8Ejt6BLrBGbVurlrjDxqh62tu75D4cqKqKfzWspcbEtmdqlV6qthXfm8SlzGSNuQXX0+qXEWds2FIZXg==
+
+turbo-linux-arm64@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-1.4.3.tgz#74fac47575e6b5af5830d26a56493859d09e4c7c"
+  integrity sha512-rzB7w+RHCQkKr8aDxxozv/IzdN976CYyBiRocSf9QGU73uyAg8pCo3i0MiENSRjDC+tUbdbu2lEUwGXf9ziB9Q==
+
+turbo-linux-arm@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm/-/turbo-linux-arm-1.4.3.tgz#ac42b3c5918fe06270cb8dfbe31442a48cc38fc3"
+  integrity sha512-zZNoHUK5ioFyxAngh8tHe763Dzb22ne3LJkaZn0ExkFHJtWClWv536lPcDuQPpIH9W9iz5OwPKtN32DNpNwk8A==
+
+turbo-linux-mips64le@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-linux-mips64le/-/turbo-linux-mips64le-1.4.3.tgz#d796261795e4fc29935cbffdadfbc11d83cbe616"
+  integrity sha512-Ztr1BM5NiUsHWjB7zpkP2RpRDA/fjbLaCbkyfyGlLmVkrSkh05NFBD03IWs2LSLy/wb6vRpL3MQ4FKcb97Tn8w==
+
+turbo-linux-ppc64le@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-linux-ppc64le/-/turbo-linux-ppc64le-1.4.3.tgz#b7d043efa27290e074b7aba45bb298fc86bd8cfe"
+  integrity sha512-tJaFJWxwfy/iLd69VHZj6JcXy9hO8LQ+ZUOna/p/wiy5WrFVgEYlD+4gfECfRZ+52EIelMgXl97vACaN1WMhLw==
+
+turbo-windows-32@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-windows-32/-/turbo-windows-32-1.4.3.tgz#3dac4678f1d74ccf0ac187e738d30a557932fbad"
+  integrity sha512-w9LyYd+DW3PYFXu9vQiie5lfdqmVIKLV0h181C49hempkIXfgQAosXfaugYWDwBc0GEBoBIQB0vGQKE7gt5nzA==
+
+turbo-windows-64@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-1.4.3.tgz#b493ab62db70c4c147cf0dc56dc812ea2e15cf3c"
+  integrity sha512-qPCqemxxOrXyqqig3fVQozRkOwo5oJSsQ3FTZE5YlNu2NwwWvY1mC0X4WTZIDsbj4oHqr0riqC7RGKbjQm1IIQ==
+
+turbo-windows-arm64@1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.4.3.tgz#be4b38994cb3f1ceb36940ff6d6b227fa2ba53bf"
+  integrity sha512-djnOOBjw33AnUx2SR6TMOpDr3nKLnVD+HcZvnQz70HyE331AKWjBoEE4rtUOteLAfViWAp3afbiljFSOnbU00Q==
 
 turbo@^1.0.24:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.1.10.tgz#caf01501cf4e8dabd0c1b40c6569b83935cee945"
-  integrity sha512-y8vx8uIyBRFI3aFjZ3PeGaOvYtNk6t7xNLzRsPY+xtnknTeqdBad56ElS8z+j0RyVwKCvI+wgvTHGkEle4VnJA==
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.4.3.tgz#7221972f47a28bfcb53609e97db9810d2c3a265b"
+  integrity sha512-g08eD2HdO/XW5xGHnXr0cXGiWnrgFBI6pN/3u0EOTeerKAsWIZU0ZrpSnl3whRtImeBB/gQu7Eu1waM2VOxzgw==
   optionalDependencies:
-    turbo-darwin-64 "1.1.10"
-    turbo-darwin-arm64 "1.1.10"
-    turbo-freebsd-64 "1.1.10"
-    turbo-freebsd-arm64 "1.1.10"
-    turbo-linux-32 "1.1.10"
-    turbo-linux-64 "1.1.10"
-    turbo-linux-arm "1.1.10"
-    turbo-linux-arm64 "1.1.10"
-    turbo-linux-mips64le "1.1.10"
-    turbo-linux-ppc64le "1.1.10"
-    turbo-windows-32 "1.1.10"
-    turbo-windows-64 "1.1.10"
+    turbo-android-arm64 "1.4.3"
+    turbo-darwin-64 "1.4.3"
+    turbo-darwin-arm64 "1.4.3"
+    turbo-freebsd-64 "1.4.3"
+    turbo-freebsd-arm64 "1.4.3"
+    turbo-linux-32 "1.4.3"
+    turbo-linux-64 "1.4.3"
+    turbo-linux-arm "1.4.3"
+    turbo-linux-arm64 "1.4.3"
+    turbo-linux-mips64le "1.4.3"
+    turbo-linux-ppc64le "1.4.3"
+    turbo-windows-32 "1.4.3"
+    turbo-windows-64 "1.4.3"
+    turbo-windows-arm64 "1.4.3"
 
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
-  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
+  integrity sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -18183,7 +18331,7 @@ type-check@^0.4.0, type-check@~0.4.0:
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
-  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
+  integrity sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==
   dependencies:
     prelude-ls "~1.1.2"
 
@@ -18241,9 +18389,9 @@ type@^1.0.1:
   integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
 
 type@^2.5.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-2.6.0.tgz#3ca6099af5981d36ca86b78442973694278a219f"
-  integrity sha512-eiDBDOmkih5pMbo9OqsqPRGMljLodLcwd5XD5JbtNB0o89xZAwynY9EdCDsJU7LtcVCClu9DvM7/0Ep1hYX3EQ==
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.7.2.tgz#2376a15a3a28b1efa0f5350dcf72d24df6ef98d0"
+  integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==
 
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
@@ -18255,7 +18403,7 @@ typedarray-to-buffer@^3.1.5:
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
-  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+  integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
 typescript@4.3.4:
   version "4.3.4"
@@ -18273,28 +18421,28 @@ ua-parser-js@^0.7.24:
   integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
 
 uglify-js@^3.1.4:
-  version "3.15.3"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.15.3.tgz#9aa82ca22419ba4c0137642ba0df800cb06e0471"
-  integrity sha512-6iCVm2omGJbsu3JWac+p6kUiOpg3wFO2f8lIXjfEb8RrmLjzog1wTPMmwKB7swfzzqxj9YM+sGUM++u1qN4qJg==
+  version "3.16.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.16.3.tgz#94c7a63337ee31227a18d03b8a3041c210fd1f1d"
+  integrity sha512-uVbFqx9vvLhQg0iBaau9Z75AxWJ8tqM9AV890dIZCLApF4rTcyHwmAvLeEdYRs+BzYWu8Iw81F79ah0EfTXbaw==
 
 uid-number@0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
-  integrity sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=
+  integrity sha512-c461FXIljswCuscZn67xq9PpszkPT6RjheWFQTgCyabJrTUozElanb0YEqv2UGgk247YpcJkFBuSGNvBlpXM9w==
 
 umask@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
-  integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=
+  integrity sha512-lE/rxOhmiScJu9L6RTNVgB/zZbF+vGC0/p6D3xnkAePI2o0sMyFG966iR5Ki50OI/0mNi2yaRnxfLsPmEZF/JA==
 
-unbox-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
-  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
   dependencies:
-    function-bind "^1.1.1"
-    has-bigints "^1.0.1"
-    has-symbols "^1.0.2"
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
 unescape@^1.0.1:
@@ -18483,12 +18631,12 @@ universalify@^2.0.0:
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
-  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
-  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
+  integrity sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==
   dependencies:
     has-value "^0.3.1"
     isobject "^3.0.0"
@@ -18496,7 +18644,7 @@ unset-value@^1.0.0:
 untildify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-2.1.0.tgz#17eb2807987f76952e9c0485fc311d06a826a2e0"
-  integrity sha1-F+soB5h/dpUunASF/DEdBqgmouA=
+  integrity sha512-sJjbDp2GodvkB0FZZcn7k6afVisqX5BZD7Yq3xp4nN2O15BBK0cLm3Vwn2vQaF7UDS0UUsrQMkkplmDI5fskig==
   dependencies:
     os-homedir "^1.0.0"
 
@@ -18510,6 +18658,14 @@ upath@^2.0.1:
   resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
   integrity sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==
 
+update-browserslist-db@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz#be06a5eedd62f107b7c19eb5bcefb194411abf38"
+  integrity sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -18520,12 +18676,12 @@ uri-js@^4.2.2:
 urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
-  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
+  integrity sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==
 
 url-join@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
-  integrity sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=
+  integrity sha512-c2H1fIgpUdwFRIru9HFno5DT73Ok8hg5oOb5AT3ayIgvCRfxgs2jyt5Slw8kEB7j3QUr6yJmMPDT/odjk7jXow==
 
 url-loader@^4.1.1:
   version "4.1.1"
@@ -18539,17 +18695,15 @@ url-loader@^4.1.1:
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
-  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
+  integrity sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==
   dependencies:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-subscription@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
-  integrity sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==
-  dependencies:
-    object-assign "^4.1.1"
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
 use@^3.1.0:
   version "3.1.1"
@@ -18559,12 +18713,12 @@ use@^3.1.0:
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
 util-promisify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/util-promisify/-/util-promisify-2.1.0.tgz#3c2236476c4d32c5ff3c47002add7c13b9a82a53"
-  integrity sha1-PCI2R2xNMsX/PEcAKt18E7moKlM=
+  integrity sha512-K+5eQPYs14b3+E+hmE2J6gCZ4JmMl9DbYS6BeP2CHq6WMuNxErxf5B/n0fz85L8zUuoO6rIzNNmIQDu/j+1OcA==
   dependencies:
     object.getownpropertydescriptors "^2.0.3"
 
@@ -18590,7 +18744,7 @@ util.promisify@^1.1.1:
 util@0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
-  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
+  integrity sha512-5KiHfsmkqacuKjkRkdV7SsfDJ2EGiPsK92s2MhNSY0craxjTdKTtqKsJaCWp4LW33ZZ0OPUv1WO/TFvNQRiQxQ==
   dependencies:
     inherits "2.0.1"
 
@@ -18604,7 +18758,7 @@ util@^0.11.0:
 utila@~0.4:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
-  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
+  integrity sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==
 
 utility-types@^3.10.0:
   version "3.10.0"
@@ -18614,12 +18768,12 @@ utility-types@^3.10.0:
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
-  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
+  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
 uuid-browser@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/uuid-browser/-/uuid-browser-3.1.0.tgz#0f05a40aef74f9e5951e20efbf44b11871e56410"
-  integrity sha1-DwWkCu90+eWVHiDvv0SxGHHlZBA=
+  integrity sha512-dsNgbLaTrd6l3MMxTtouOCFw4CBFc/3a+GgYA2YyrJvyQ1u6q4pcu3ktLoUZ/VN/Aw9WsauazbgsgdfVWgAKQg==
 
 uuid@^3.3.2:
   version "3.4.0"
@@ -18631,10 +18785,10 @@ uuid@^8.3.0, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-v8-compile-cache-lib@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.0.tgz#0582bcb1c74f3a2ee46487ceecf372e46bce53e8"
-  integrity sha512-mpSYqfsFvASnSn5qMiwrr4VKfumbPyONLCOPmsR3A6pTY/r0+tSaVbgPWSAIuzbk3lCTa+FForeTiO+wBQGkjA==
+v8-compile-cache-lib@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
+  integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
 v8-compile-cache@^2.0.0, v8-compile-cache@^2.0.3, v8-compile-cache@^2.1.1:
   version "2.3.0"
@@ -18650,14 +18804,14 @@ v8-to-istanbul@^7.0.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
-v8-to-istanbul@^8.0.0:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed"
-  integrity sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==
+v8-to-istanbul@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz#b6f994b0b5d4ef255e17a0d17dc444a9f5132fa4"
+  integrity sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==
   dependencies:
+    "@jridgewell/trace-mapping" "^0.3.12"
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^1.6.0"
-    source-map "^0.7.3"
 
 validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
   version "3.0.4"
@@ -18670,19 +18824,19 @@ validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
 validate-npm-package-name@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz#5fa912d81eb7d0c74afc140de7317f0ca7df437e"
-  integrity sha1-X6kS2B630MdK/BQN5zF/DKffQ34=
+  integrity sha512-M6w37eVCMMouJ9V/sdPGnC5H4uDr73/+xdq0FBLO3TFFX1+7wiUY6Es328NN+y43tmY+doUdN9g9J21vqB7iLw==
   dependencies:
     builtins "^1.0.3"
 
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
-  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
-  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
+  integrity sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==
   dependencies:
     assert-plus "^1.0.0"
     core-util-is "1.0.2"
@@ -18753,9 +18907,9 @@ w3c-hr-time@^1.0.2:
     browser-process-hrtime "^1.0.0"
 
 w3c-keyname@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.4.tgz#4ade6916f6290224cdbd1db8ac49eab03d0eef6b"
-  integrity sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.6.tgz#8412046116bc16c5d73d4e612053ea10a189c85f"
+  integrity sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==
 
 w3c-xmlserializer@^2.0.0:
   version "2.0.0"
@@ -18789,10 +18943,10 @@ watchpack@^1.7.4:
     chokidar "^3.4.1"
     watchpack-chokidar2 "^2.0.1"
 
-watchpack@^2.2.0, watchpack@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.1.tgz#4200d9447b401156eeca7767ee610f8809bc9d25"
-  integrity sha512-x0t0JuydIo8qCNctdDrn1OzH/qDzk2+rdCOC3YzumZ42fiMqmQ7T3xQurykYMhYfHaPHTp4ZxAx2NfUo1K6QaA==
+watchpack@^2.2.0, watchpack@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
+  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
   dependencies:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
@@ -18800,7 +18954,7 @@ watchpack@^2.2.0, watchpack@^2.3.1:
 wcwidth@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
-  integrity sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=
+  integrity sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==
   dependencies:
     defaults "^1.0.3"
 
@@ -18817,7 +18971,7 @@ web-namespaces@^1.0.0:
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
-  integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
 
 webidl-conversions@^5.0.0:
   version "5.0.0"
@@ -18890,13 +19044,12 @@ webpack-filter-warnings-plugin@^1.2.1:
   integrity sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg==
 
 webpack-hot-middleware@^2.25.1:
-  version "2.25.1"
-  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.25.1.tgz#581f59edf0781743f4ca4c200fd32c9266c6cf7c"
-  integrity sha512-Koh0KyU/RPYwel/khxbsDz9ibDivmUbrRuKSSQvW42KSDdO4w23WI3SkHpSUKHE76LrFnnM/L7JCrpBwu8AXYw==
+  version "2.25.2"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.25.2.tgz#f7f936f3871d8c4eb95ecdf23a34e9cefe9806e8"
+  integrity sha512-CVgm3NAQyfdIonRvXisRwPTUYuSbyZ6BY7782tMeUzWOO7RmVI2NaBYuCp41qyD4gYCkJyTneAJdK69A13B0+A==
   dependencies:
     ansi-html-community "0.0.8"
     html-entities "^2.1.0"
-    querystring "^0.2.0"
     strip-ansi "^6.0.0"
 
 webpack-log@^2.0.0:
@@ -18936,9 +19089,9 @@ webpack-virtual-modules@^0.2.2:
     debug "^3.0.0"
 
 webpack-virtual-modules@^0.4.1:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.3.tgz#cd597c6d51d5a5ecb473eea1983a58fa8a17ded9"
-  integrity sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.4.4.tgz#a19fcf371923c59c4712d63d7d194b1e4d8262cc"
+  integrity sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==
 
 webpack@4:
   version "4.46.0"
@@ -18969,21 +19122,21 @@ webpack@4:
     watchpack "^1.7.4"
     webpack-sources "^1.4.1"
 
-"webpack@>=4.43.0 <6.0.0":
-  version "5.72.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.1.tgz#3500fc834b4e9ba573b9f430b2c0a61e1bb57d13"
-  integrity sha512-dXG5zXCLspQR4krZVR6QgajnZOjW2K/djHvdcRaDQvsjV9z9vaW6+ja5dZOYbqBBjF6kGXka/2ZyxNdc+8Jung==
+"webpack@>=4.43.0 <6.0.0", webpack@^5.40.0, webpack@^5.53.0, webpack@^5.9.0:
+  version "5.74.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.74.0.tgz#02a5dac19a17e0bb47093f2be67c695102a55980"
+  integrity sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"
     "@webassemblyjs/ast" "1.11.1"
     "@webassemblyjs/wasm-edit" "1.11.1"
     "@webassemblyjs/wasm-parser" "1.11.1"
-    acorn "^8.4.1"
+    acorn "^8.7.1"
     acorn-import-assertions "^1.7.6"
     browserslist "^4.14.5"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.9.3"
+    enhanced-resolve "^5.10.0"
     es-module-lexer "^0.9.0"
     eslint-scope "5.1.1"
     events "^3.2.0"
@@ -18996,37 +19149,7 @@ webpack@4:
     schema-utils "^3.1.0"
     tapable "^2.1.1"
     terser-webpack-plugin "^5.1.3"
-    watchpack "^2.3.1"
-    webpack-sources "^3.2.3"
-
-webpack@^5.40.0, webpack@^5.53.0, webpack@^5.9.0:
-  version "5.70.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.70.0.tgz#3461e6287a72b5e6e2f4872700bc8de0d7500e6d"
-  integrity sha512-ZMWWy8CeuTTjCxbeaQI21xSswseF2oNOwc70QSKNePvmxE7XW36i7vpBMYZFAUHPwQiEbNGCEYIOOlyRbdGmxw==
-  dependencies:
-    "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^0.0.51"
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/wasm-edit" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-    acorn "^8.4.1"
-    acorn-import-assertions "^1.7.6"
-    browserslist "^4.14.5"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.9.2"
-    es-module-lexer "^0.9.0"
-    eslint-scope "5.1.1"
-    events "^3.2.0"
-    glob-to-regexp "^0.4.1"
-    graceful-fs "^4.2.9"
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^4.2.0"
-    mime-types "^2.1.27"
-    neo-async "^2.6.2"
-    schema-utils "^3.1.0"
-    tapable "^2.1.1"
-    terser-webpack-plugin "^5.1.3"
-    watchpack "^2.3.1"
+    watchpack "^2.4.0"
     webpack-sources "^3.2.3"
 
 whatwg-encoding@^1.0.5:
@@ -19044,7 +19167,7 @@ whatwg-mimetype@^2.3.0:
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
-  integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0=
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
   dependencies:
     tr46 "~0.0.3"
     webidl-conversions "^3.0.0"
@@ -19072,7 +19195,7 @@ which-boxed-primitive@^1.0.2:
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
-  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
+  integrity sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==
 
 which@^1.2.14, which@^1.2.9, which@^1.3.1:
   version "1.3.1"
@@ -19115,7 +19238,7 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
 wordwrap@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-  integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
+  integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 worker-farm@^1.7.0:
   version "1.7.0"
@@ -19161,7 +19284,7 @@ wrap-ansi@^7.0.0:
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
-  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
 write-file-atomic@^2.4.2:
   version "2.4.3"
@@ -19223,19 +19346,19 @@ write@1.0.3:
     mkdirp "^0.5.1"
 
 ws@^7.3.1, ws@^7.4.6:
-  version "7.5.7"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.7.tgz#9e0ac77ee50af70d58326ecff7e85eb3fa375e67"
-  integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==
+  version "7.5.9"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
+  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
 
 ws@^8.2.3:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
-  integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
+  integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==
 
 x-default-browser@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/x-default-browser/-/x-default-browser-0.4.0.tgz#70cf0da85da7c0ab5cb0f15a897f2322a6bdd481"
-  integrity sha1-cM8NqF2nwKtcsPFaiX8jIqa91IE=
+  integrity sha512-7LKo7RtWfoFN/rHx1UELv/2zHGMx8MkZKDq1xENmOCTkfIqZJ0zZ26NEJX8czhnPXVcqS0ARjjfJB+eJ0/5Cvw==
   optionalDependencies:
     default-browser-id "^1.0.4"
 
@@ -19289,7 +19412,7 @@ yargs-parser@20.2.4:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
   integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
 
-yargs-parser@20.x, yargs-parser@^20.2.2, yargs-parser@^20.2.3, yargs-parser@^20.2.7:
+yargs-parser@20.x, yargs-parser@^20.2.2, yargs-parser@^20.2.3, yargs-parser@^20.2.9:
   version "20.2.9"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==

From c95b35fca728d4695efda136c518ffdefeb58f08 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Fri, 12 Aug 2022 23:55:43 -0300
Subject: [PATCH 071/106] chore(react): tests updated

---
 .../__snapshots__/group.test.tsx.snap         |    32 +-
 .../__snapshots__/index.test.tsx.snap         |   460 +-
 .../__snapshots__/index.test.tsx.snap         |   262 +-
 .../__snapshots__/index.test.tsx.snap         |   204 +-
 .../__snapshots__/group.test.tsx.snap         |  6972 +---------
 .../__snapshots__/index.test.tsx.snap         | 10787 +---------------
 .../__snapshots__/index.test.tsx.snap         |  1252 +-
 .../__snapshots__/index.test.tsx.snap         |     8 +-
 .../__snapshots__/password.test.tsx.snap      |     2 +-
 .../__snapshots__/index.test.tsx.snap         |    14 +-
 .../__snapshots__/index.test.tsx.snap         |     4 +-
 .../__snapshots__/index.test.tsx.snap         |     4 +-
 .../__snapshots__/index.test.tsx.snap         |  1904 +--
 13 files changed, 1117 insertions(+), 20788 deletions(-)

diff --git a/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
index 113453e25f..7d6dc2204d 100644
--- a/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
@@ -6,10 +6,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="nextui-c-ckyKsw"
+        class="nextui-c-dZPNrK"
       >
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -22,7 +22,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -35,7 +35,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -48,7 +48,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -65,10 +65,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="nextui-c-ckyKsw"
+      class="nextui-c-dZPNrK"
     >
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -81,7 +81,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -94,7 +94,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -107,7 +107,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-evoADT-bordered-true nextui-c-fFabR-gBVgtO-stacked-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -181,10 +181,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="nextui-c-ckyKsw nextui-c-ckyKsw-hEoPQl-animated-true"
+        class="nextui-c-dZPNrK nextui-c-dZPNrK-fkvkLX-animated-true"
       >
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -197,7 +197,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -214,10 +214,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="nextui-c-ckyKsw nextui-c-ckyKsw-hEoPQl-animated-true"
+      class="nextui-c-dZPNrK nextui-c-dZPNrK-fkvkLX-animated-true"
     >
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -230,7 +230,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
diff --git a/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
index a7c7208078..fec8e625b4 100644
--- a/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,122 +2,27 @@
 
 exports[`Avatar should render component of a specified size 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {
-      "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-ihFPSGE-css only-text-avatar",
-      "data-state": "ready",
-    },
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-avatar-bg",
-        },
-        "children": Array [],
-        "name": "span",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-        },
-      },
-    ],
-    "name": "span",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {
-      "class": undefined,
-      "data-state": undefined,
-    },
-    "x-attribsPrefix": Object {
-      "class": undefined,
-      "data-state": undefined,
-    },
-  },
+  "0": <span
+    class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-ihFPSGE-css only-text-avatar"
+    data-state="ready"
+  >
+    <span
+      class="nextui-avatar-bg"
+    />
+  </span>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
@@ -136,126 +41,31 @@ LoadedCheerio {
 }
 `;
 
-exports[`Avatar should render correctly with an icon 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span><span class=\\"nextui-avatar-icon\\"><svg class=\\"\\"></svg></span></span>"`;
+exports[`Avatar should render correctly with an icon 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span><span class=\\"nextui-avatar-icon\\"><svg class=\\"\\"></svg></span></span>"`;
 
 exports[`Avatar should render text element 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {
-      "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar",
-      "data-state": "ready",
-    },
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-avatar-bg",
-        },
-        "children": Array [],
-        "name": "span",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-        },
-      },
-    ],
-    "name": "span",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {
-      "class": undefined,
-      "data-state": undefined,
-    },
-    "x-attribsPrefix": Object {
-      "class": undefined,
-      "data-state": undefined,
-    },
-  },
+  "0": <span
+    class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+    data-state="ready"
+  >
+    <span
+      class="nextui-avatar-bg"
+    />
+  </span>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
@@ -276,190 +86,32 @@ LoadedCheerio {
 
 exports[`Avatar should render text element 2`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {
-      "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar",
-      "data-state": "ready",
-    },
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-avatar-bg",
-        },
-        "children": Array [],
-        "name": "span",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-avatar-text",
-          },
-          "children": Array [
-            Node {
-              "data": "text",
-              "next": null,
-              "parent": [Circular],
-              "prev": null,
-              "type": "text",
-            },
-          ],
-          "name": "span",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-avatar-text",
-        },
-        "children": Array [
-          Node {
-            "data": "text",
-            "next": null,
-            "parent": [Circular],
-            "prev": null,
-            "type": "text",
-          },
-        ],
-        "name": "span",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-avatar-bg",
-          },
-          "children": Array [],
-          "name": "span",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-        },
-      },
-    ],
-    "name": "span",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {
-      "class": undefined,
-      "data-state": undefined,
-    },
-    "x-attribsPrefix": Object {
-      "class": undefined,
-      "data-state": undefined,
-    },
-  },
+  "0": <span
+    class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+    data-state="ready"
+  >
+    <span
+      class="nextui-avatar-bg"
+    />
+    <span
+      class="nextui-avatar-text"
+    >
+      text
+    </span>
+  </span>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
@@ -478,12 +130,12 @@ LoadedCheerio {
 }
 `;
 
-exports[`Avatar should work correctly with different sizes 1`] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-jROyhw-size-xs nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-bHlgBq-size-sm nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-lmZTtQ-size-lg nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-ehDSPw-size-xl nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
+exports[`Avatar should work correctly with different sizes 1`] = `"<div><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-jROyhw-size-xs nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-bHlgBq-size-sm nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-lmZTtQ-size-lg nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-ehDSPw-size-xl nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
 
-exports[`Avatar should work with a gradient color 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-lcNuyd-color-gradient nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with a gradient color 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-lcNuyd-color-gradient nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
 
-exports[`Avatar should work with different colors 1`] = `"<div><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eeabkr-color-primary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-jzyGMN-color-secondary nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-fJMMFA-color-success nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-eCIbjl-color-warning nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-gYTGZH-color-error nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
+exports[`Avatar should work with different colors 1`] = `"<div><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-eeabkr-color-primary nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-jzyGMN-color-secondary nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-fJMMFA-color-success nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-eCIbjl-color-warning nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-gYTGZH-color-error nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
 
-exports[`Avatar should work with pointer 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-gsmDXe-pointer-true nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with pointer 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-hpLzEY-pointer-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
 
-exports[`Avatar should work with zoomed 1`] = `"<span class=\\"nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-fFabR-OUZAS-zoomed-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with zoomed 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-OUZAS-zoomed-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
diff --git a/packages/react/src/code/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/code/__tests__/__snapshots__/index.test.tsx.snap
index ff8a764157..d8fd133849 100644
--- a/packages/react/src/code/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/code/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,127 +2,28 @@
 
 exports[`Code should repspond to changed by width 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {
-      "class": "nextui-c-gHEIta nextui-c-gHEIta-iesduxI-css",
-    },
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-PJLV",
-        },
-        "children": Array [
-          Node {
-            "data": "code",
-            "next": null,
-            "parent": [Circular],
-            "prev": null,
-            "type": "text",
-          },
-        ],
-        "name": "code",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-        },
-      },
-    ],
-    "name": "pre",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {
-      "class": undefined,
-    },
-    "x-attribsPrefix": Object {
-      "class": undefined,
-    },
-  },
+  "0": <pre
+    class="nextui-c-gHEIta nextui-c-gHEIta-iesduxI-css"
+  >
+    <code
+      class="nextui-c-PJLV"
+    >
+      code
+    </code>
+  </pre>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
@@ -143,127 +44,28 @@ LoadedCheerio {
 
 exports[`Code should support block mode 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {
-      "class": "nextui-c-gHEIta",
-    },
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-PJLV",
-        },
-        "children": Array [
-          Node {
-            "data": "code",
-            "next": null,
-            "parent": [Circular],
-            "prev": null,
-            "type": "text",
-          },
-        ],
-        "name": "code",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-        },
-      },
-    ],
-    "name": "pre",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {
-      "class": undefined,
-    },
-    "x-attribsPrefix": Object {
-      "class": undefined,
-    },
-  },
+  "0": <pre
+    class="nextui-c-gHEIta"
+  >
+    <code
+      class="nextui-c-PJLV"
+    >
+      code
+    </code>
+  </pre>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
diff --git a/packages/react/src/col/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/col/__tests__/__snapshots__/index.test.tsx.snap
index 9467ecff57..5c08018bab 100644
--- a/packages/react/src/col/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/col/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,197 +4,31 @@ exports[`Col should render correctly 1`] = `ReactWrapper {}`;
 
 exports[`Col should work with span and offset 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {},
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-cMTZRp nextui-c-cMTZRp-ikSMVmn-css",
-        },
-        "children": Array [
-          Node {
-            "data": "col",
-            "next": null,
-            "parent": [Circular],
-            "prev": null,
-            "type": "text",
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-c-cMTZRp nextui-c-cMTZRp-icjwvEK-css",
-          },
-          "children": Array [
-            Node {
-              "data": "col",
-              "next": null,
-              "parent": [Circular],
-              "prev": null,
-              "type": "text",
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-cMTZRp nextui-c-cMTZRp-icjwvEK-css",
-        },
-        "children": Array [
-          Node {
-            "data": "col",
-            "next": null,
-            "parent": [Circular],
-            "prev": null,
-            "type": "text",
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-c-cMTZRp nextui-c-cMTZRp-ikSMVmn-css",
-          },
-          "children": Array [
-            Node {
-              "data": "col",
-              "next": null,
-              "parent": [Circular],
-              "prev": null,
-              "type": "text",
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-        },
-      },
-    ],
-    "name": "div",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {},
-    "x-attribsPrefix": Object {},
-  },
+  "0": <div>
+    <div
+      class="nextui-c-cMTZRp nextui-c-cMTZRp-ikSMVmn-css"
+    >
+      col
+    </div>
+    <div
+      class="nextui-c-cMTZRp nextui-c-cMTZRp-icjwvEK-css"
+    >
+      col
+    </div>
+  </div>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
index 99556bc5be..508dc7c7f7 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
@@ -6,3351 +6,159 @@ exports[`Collapse Group should render correctly 1`] = `ReactWrapper {}`;
 
 exports[`Collapse Group should work with bordered 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {
-      "class": "nextui-c-dWWWSv nextui-c-dWWWSv-eaqZHc-borderWeight-light nextui-c-dWWWSv-jXueSE-bordered-true",
-    },
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-          "data-state": "closed",
-          "tabindex": "-1",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "aria-controls": "react-aria9350437168-10",
-              "aria-disabled": "false",
-              "aria-expanded": "false",
-              "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-              "data-state": "closed",
-              "id": "react-aria9350437168-9",
-              "role": "button",
-              "tabindex": "0",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-collapse-title-container",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "title1",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "h3",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content-right",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                          "fill": "none",
-                          "focusable": "false",
-                          "height": "20",
-                          "role": "presentation",
-                          "viewBox": "0 0 24 24",
-                          "width": "20",
-                          "xmlns": "http://www.w3.org/2000/svg",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "d": "M15.5 19l-7-7 7-7",
-                              "stroke-linecap": "round",
-                              "stroke-linejoin": "round",
-                              "stroke-width": "1.5",
-                            },
-                            "children": Array [],
-                            "name": "path",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                          },
-                        ],
-                        "name": "svg",
-                        "namespace": "http://www.w3.org/2000/svg",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "http://www.w3.org/2000/xmlns/",
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "",
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title1",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-9",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-10",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content1",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-          },
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-expand-content",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "aria-labelledby": "react-aria9350437168-9",
-                      "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria9350437168-10",
-                      "role": "region",
-                      "tabindex": "-1",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "content1",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "aria-controls": "react-aria9350437168-10",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria9350437168-9",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title1",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title1",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-            "data-state": "closed",
-            "tabindex": "-1",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "aria-controls": "react-aria9350437168-12",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria9350437168-11",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title2",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title2",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {
-                  "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-expand-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "aria-labelledby": "react-aria9350437168-11",
-                          "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria9350437168-12",
-                          "role": "region",
-                          "tabindex": "-1",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "content2",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-11",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-12",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content2",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {
-                  "aria-controls": "react-aria9350437168-12",
-                  "aria-disabled": "false",
-                  "aria-expanded": "false",
-                  "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                  "data-state": "closed",
-                  "id": "react-aria9350437168-11",
-                  "role": "button",
-                  "tabindex": "0",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-container",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title2",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content-right",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                                "fill": "none",
-                                "focusable": "false",
-                                "height": "20",
-                                "role": "presentation",
-                                "viewBox": "0 0 24 24",
-                                "width": "20",
-                                "xmlns": "http://www.w3.org/2000/svg",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {
-                                    "d": "M15.5 19l-7-7 7-7",
-                                    "stroke-linecap": "round",
-                                    "stroke-linejoin": "round",
-                                    "stroke-width": "1.5",
-                                  },
-                                  "children": Array [],
-                                  "name": "path",
-                                  "namespace": "http://www.w3.org/2000/svg",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                  "x-attribsPrefix": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                },
-                              ],
-                              "name": "svg",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "http://www.w3.org/2000/xmlns/",
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "",
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title2",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-          "data-state": "closed",
-          "tabindex": "-1",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "aria-controls": "react-aria9350437168-12",
-              "aria-disabled": "false",
-              "aria-expanded": "false",
-              "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-              "data-state": "closed",
-              "id": "react-aria9350437168-11",
-              "role": "button",
-              "tabindex": "0",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-collapse-title-container",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "title2",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "h3",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content-right",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                          "fill": "none",
-                          "focusable": "false",
-                          "height": "20",
-                          "role": "presentation",
-                          "viewBox": "0 0 24 24",
-                          "width": "20",
-                          "xmlns": "http://www.w3.org/2000/svg",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "d": "M15.5 19l-7-7 7-7",
-                              "stroke-linecap": "round",
-                              "stroke-linejoin": "round",
-                              "stroke-width": "1.5",
-                            },
-                            "children": Array [],
-                            "name": "path",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                          },
-                        ],
-                        "name": "svg",
-                        "namespace": "http://www.w3.org/2000/svg",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "http://www.w3.org/2000/xmlns/",
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "",
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title2",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-11",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-12",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content2",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-          },
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-expand-content",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "aria-labelledby": "react-aria9350437168-11",
-                      "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria9350437168-12",
-                      "role": "region",
-                      "tabindex": "-1",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "content2",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "aria-controls": "react-aria9350437168-12",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria9350437168-11",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title2",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title2",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-            "data-state": "closed",
-            "tabindex": "-1",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "aria-controls": "react-aria9350437168-10",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria9350437168-9",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title1",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title1",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {
-                  "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-expand-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "aria-labelledby": "react-aria9350437168-9",
-                          "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria9350437168-10",
-                          "role": "region",
-                          "tabindex": "-1",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "content1",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-9",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-10",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content1",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {
-                  "aria-controls": "react-aria9350437168-10",
-                  "aria-disabled": "false",
-                  "aria-expanded": "false",
-                  "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                  "data-state": "closed",
-                  "id": "react-aria9350437168-9",
-                  "role": "button",
-                  "tabindex": "0",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-container",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title1",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content-right",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                                "fill": "none",
-                                "focusable": "false",
-                                "height": "20",
-                                "role": "presentation",
-                                "viewBox": "0 0 24 24",
-                                "width": "20",
-                                "xmlns": "http://www.w3.org/2000/svg",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {
-                                    "d": "M15.5 19l-7-7 7-7",
-                                    "stroke-linecap": "round",
-                                    "stroke-linejoin": "round",
-                                    "stroke-width": "1.5",
-                                  },
-                                  "children": Array [],
-                                  "name": "path",
-                                  "namespace": "http://www.w3.org/2000/svg",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                  "x-attribsPrefix": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                },
-                              ],
-                              "name": "svg",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "http://www.w3.org/2000/xmlns/",
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "",
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title1",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-      },
-    ],
-    "name": "div",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {
-      "class": undefined,
-    },
-    "x-attribsPrefix": Object {
-      "class": undefined,
-    },
-  },
+  "0": <div
+    class="nextui-c-dWWWSv nextui-c-dWWWSv-eaqZHc-borderWeight-light nextui-c-dWWWSv-jXueSE-bordered-true"
+  >
+    <div
+      class="nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed"
+      data-state="closed"
+      tabindex="-1"
+    >
+      <div
+        aria-controls="react-aria7259762622-10"
+        aria-disabled="false"
+        aria-expanded="false"
+        class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
+        data-state="closed"
+        id="react-aria7259762622-9"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="nextui-collapse-title-container"
+        >
+          <div
+            class="nextui-collapse-title-content"
+          >
+            <h3
+              class="nextui-collapse-title"
+            >
+              title1
+            </h3>
+          </div>
+          <div
+            class="nextui-collapse-title-content-right"
+          >
+            <svg
+              class="nextui-c-fUXRSc nextui-collapse-icon"
+              fill="none"
+              focusable="false"
+              height="20"
+              role="presentation"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 19l-7-7 7-7"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css"
+      >
+        <div
+          class="nextui-expand-content"
+        >
+          <div
+            aria-labelledby="react-aria7259762622-9"
+            class="nextui-c-fMAxGR nextui-collapse-content"
+            id="react-aria7259762622-10"
+            role="region"
+            tabindex="-1"
+          >
+            content1
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed"
+      data-state="closed"
+      tabindex="-1"
+    >
+      <div
+        aria-controls="react-aria7259762622-12"
+        aria-disabled="false"
+        aria-expanded="false"
+        class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
+        data-state="closed"
+        id="react-aria7259762622-11"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="nextui-collapse-title-container"
+        >
+          <div
+            class="nextui-collapse-title-content"
+          >
+            <h3
+              class="nextui-collapse-title"
+            >
+              title2
+            </h3>
+          </div>
+          <div
+            class="nextui-collapse-title-content-right"
+          >
+            <svg
+              class="nextui-c-fUXRSc nextui-collapse-icon"
+              fill="none"
+              focusable="false"
+              height="20"
+              role="presentation"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 19l-7-7 7-7"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css"
+      >
+        <div
+          class="nextui-expand-content"
+        >
+          <div
+            aria-labelledby="react-aria7259762622-11"
+            class="nextui-c-fMAxGR nextui-collapse-content"
+            id="react-aria7259762622-12"
+            role="region"
+            tabindex="-1"
+          >
+            content2
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
@@ -3371,3351 +179,159 @@ LoadedCheerio {
 
 exports[`Collapse Group should work without accordion 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {
-      "class": "nextui-c-dWWWSv nextui-c-dWWWSv-eaqZHc-borderWeight-light",
-    },
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-          "data-state": "closed",
-          "tabindex": "-1",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "aria-controls": "react-aria9350437168-6",
-              "aria-disabled": "false",
-              "aria-expanded": "false",
-              "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-              "data-state": "closed",
-              "id": "react-aria9350437168-5",
-              "role": "button",
-              "tabindex": "0",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-collapse-title-container",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "title1",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "h3",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content-right",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                          "fill": "none",
-                          "focusable": "false",
-                          "height": "20",
-                          "role": "presentation",
-                          "viewBox": "0 0 24 24",
-                          "width": "20",
-                          "xmlns": "http://www.w3.org/2000/svg",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "d": "M15.5 19l-7-7 7-7",
-                              "stroke-linecap": "round",
-                              "stroke-linejoin": "round",
-                              "stroke-width": "1.5",
-                            },
-                            "children": Array [],
-                            "name": "path",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                          },
-                        ],
-                        "name": "svg",
-                        "namespace": "http://www.w3.org/2000/svg",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "http://www.w3.org/2000/xmlns/",
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "",
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title1",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-5",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-6",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content1",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-          },
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-expand-content",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "aria-labelledby": "react-aria9350437168-5",
-                      "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria9350437168-6",
-                      "role": "region",
-                      "tabindex": "-1",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "content1",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "aria-controls": "react-aria9350437168-6",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria9350437168-5",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title1",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title1",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-            "data-state": "closed",
-            "tabindex": "-1",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "aria-controls": "react-aria9350437168-8",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria9350437168-7",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title2",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title2",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {
-                  "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-expand-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "aria-labelledby": "react-aria9350437168-7",
-                          "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria9350437168-8",
-                          "role": "region",
-                          "tabindex": "-1",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "content2",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-7",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-8",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content2",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {
-                  "aria-controls": "react-aria9350437168-8",
-                  "aria-disabled": "false",
-                  "aria-expanded": "false",
-                  "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                  "data-state": "closed",
-                  "id": "react-aria9350437168-7",
-                  "role": "button",
-                  "tabindex": "0",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-container",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title2",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content-right",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                                "fill": "none",
-                                "focusable": "false",
-                                "height": "20",
-                                "role": "presentation",
-                                "viewBox": "0 0 24 24",
-                                "width": "20",
-                                "xmlns": "http://www.w3.org/2000/svg",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {
-                                    "d": "M15.5 19l-7-7 7-7",
-                                    "stroke-linecap": "round",
-                                    "stroke-linejoin": "round",
-                                    "stroke-width": "1.5",
-                                  },
-                                  "children": Array [],
-                                  "name": "path",
-                                  "namespace": "http://www.w3.org/2000/svg",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                  "x-attribsPrefix": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                },
-                              ],
-                              "name": "svg",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "http://www.w3.org/2000/xmlns/",
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "",
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title2",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-          "data-state": "closed",
-          "tabindex": "-1",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "aria-controls": "react-aria9350437168-8",
-              "aria-disabled": "false",
-              "aria-expanded": "false",
-              "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-              "data-state": "closed",
-              "id": "react-aria9350437168-7",
-              "role": "button",
-              "tabindex": "0",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-collapse-title-container",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "title2",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "h3",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content-right",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                          "fill": "none",
-                          "focusable": "false",
-                          "height": "20",
-                          "role": "presentation",
-                          "viewBox": "0 0 24 24",
-                          "width": "20",
-                          "xmlns": "http://www.w3.org/2000/svg",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "d": "M15.5 19l-7-7 7-7",
-                              "stroke-linecap": "round",
-                              "stroke-linejoin": "round",
-                              "stroke-width": "1.5",
-                            },
-                            "children": Array [],
-                            "name": "path",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                          },
-                        ],
-                        "name": "svg",
-                        "namespace": "http://www.w3.org/2000/svg",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "http://www.w3.org/2000/xmlns/",
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "",
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title2",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-7",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-8",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content2",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-          },
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-expand-content",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "aria-labelledby": "react-aria9350437168-7",
-                      "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria9350437168-8",
-                      "role": "region",
-                      "tabindex": "-1",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "content2",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "aria-controls": "react-aria9350437168-8",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria9350437168-7",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title2",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title2",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-            "data-state": "closed",
-            "tabindex": "-1",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "aria-controls": "react-aria9350437168-6",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria9350437168-5",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title1",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title1",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {
-                  "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-expand-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "aria-labelledby": "react-aria9350437168-5",
-                          "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria9350437168-6",
-                          "role": "region",
-                          "tabindex": "-1",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "content1",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria9350437168-5",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria9350437168-6",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content1",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {
-                  "aria-controls": "react-aria9350437168-6",
-                  "aria-disabled": "false",
-                  "aria-expanded": "false",
-                  "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                  "data-state": "closed",
-                  "id": "react-aria9350437168-5",
-                  "role": "button",
-                  "tabindex": "0",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-container",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title1",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content-right",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                                "fill": "none",
-                                "focusable": "false",
-                                "height": "20",
-                                "role": "presentation",
-                                "viewBox": "0 0 24 24",
-                                "width": "20",
-                                "xmlns": "http://www.w3.org/2000/svg",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {
-                                    "d": "M15.5 19l-7-7 7-7",
-                                    "stroke-linecap": "round",
-                                    "stroke-linejoin": "round",
-                                    "stroke-width": "1.5",
-                                  },
-                                  "children": Array [],
-                                  "name": "path",
-                                  "namespace": "http://www.w3.org/2000/svg",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                  "x-attribsPrefix": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                },
-                              ],
-                              "name": "svg",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "http://www.w3.org/2000/xmlns/",
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "",
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title1",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-      },
-    ],
-    "name": "div",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {
-      "class": undefined,
-    },
-    "x-attribsPrefix": Object {
-      "class": undefined,
-    },
-  },
+  "0": <div
+    class="nextui-c-dWWWSv nextui-c-dWWWSv-eaqZHc-borderWeight-light"
+  >
+    <div
+      class="nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed"
+      data-state="closed"
+      tabindex="-1"
+    >
+      <div
+        aria-controls="react-aria7259762622-6"
+        aria-disabled="false"
+        aria-expanded="false"
+        class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
+        data-state="closed"
+        id="react-aria7259762622-5"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="nextui-collapse-title-container"
+        >
+          <div
+            class="nextui-collapse-title-content"
+          >
+            <h3
+              class="nextui-collapse-title"
+            >
+              title1
+            </h3>
+          </div>
+          <div
+            class="nextui-collapse-title-content-right"
+          >
+            <svg
+              class="nextui-c-fUXRSc nextui-collapse-icon"
+              fill="none"
+              focusable="false"
+              height="20"
+              role="presentation"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 19l-7-7 7-7"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css"
+      >
+        <div
+          class="nextui-expand-content"
+        >
+          <div
+            aria-labelledby="react-aria7259762622-5"
+            class="nextui-c-fMAxGR nextui-collapse-content"
+            id="react-aria7259762622-6"
+            role="region"
+            tabindex="-1"
+          >
+            content1
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed"
+      data-state="closed"
+      tabindex="-1"
+    >
+      <div
+        aria-controls="react-aria7259762622-8"
+        aria-disabled="false"
+        aria-expanded="false"
+        class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
+        data-state="closed"
+        id="react-aria7259762622-7"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="nextui-collapse-title-container"
+        >
+          <div
+            class="nextui-collapse-title-content"
+          >
+            <h3
+              class="nextui-collapse-title"
+            >
+              title2
+            </h3>
+          </div>
+          <div
+            class="nextui-collapse-title-content-right"
+          >
+            <svg
+              class="nextui-c-fUXRSc nextui-collapse-icon"
+              fill="none"
+              focusable="false"
+              height="20"
+              role="presentation"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 19l-7-7 7-7"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css"
+      >
+        <div
+          class="nextui-expand-content"
+        >
+          <div
+            aria-labelledby="react-aria7259762622-7"
+            class="nextui-c-fMAxGR nextui-collapse-content"
+            id="react-aria7259762622-8"
+            role="region"
+            tabindex="-1"
+          >
+            content2
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
index 3d6a0a45f4..e1233683cb 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
@@ -7,27 +7,389 @@ exports[`Collapse should switch visibility with expanded prop 1`] = `ReactWrappe
 exports[`Collapse should switch visibility with expanded prop 2`] = `ReactWrapper {}`;
 
 exports[`Collapse should work with content subtitle and shadow 1`] = `
+LoadedCheerio {
+  "0": <div>
+    <div
+      class="nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed"
+      data-state="closed"
+      tabindex="-1"
+    >
+      <div
+        aria-controls="react-aria7949156610-10"
+        aria-disabled="false"
+        aria-expanded="false"
+        class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
+        data-state="closed"
+        id="react-aria7949156610-9"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="nextui-collapse-title-container"
+        >
+          <div
+            class="nextui-collapse-title-content"
+          >
+            <h3
+              class="nextui-collapse-title"
+            >
+              title
+            </h3>
+            <div
+              class="nextui-collapse-subtitle"
+            >
+              subtitle
+            </div>
+          </div>
+          <div
+            class="nextui-collapse-title-content-right"
+          >
+            <svg
+              class="nextui-c-fUXRSc nextui-collapse-icon"
+              fill="none"
+              focusable="false"
+              height="20"
+              role="presentation"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 19l-7-7 7-7"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css"
+      >
+        <div
+          class="nextui-expand-content"
+        >
+          <div
+            aria-labelledby="react-aria7949156610-9"
+            class="nextui-c-fMAxGR nextui-collapse-content"
+            id="react-aria7949156610-10"
+            role="region"
+            tabindex="-1"
+          >
+            content
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-dofMoe-shadow-true nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed"
+      data-state="closed"
+      tabindex="-1"
+    >
+      <div
+        aria-controls="react-aria7949156610-12"
+        aria-disabled="false"
+        aria-expanded="false"
+        class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
+        data-state="closed"
+        id="react-aria7949156610-11"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="nextui-collapse-title-container"
+        >
+          <div
+            class="nextui-collapse-title-content"
+          >
+            <h3
+              class="nextui-collapse-title"
+            >
+              title
+            </h3>
+            <div
+              class="nextui-collapse-subtitle"
+            >
+              <h1>
+                subtitle
+              </h1>
+            </div>
+          </div>
+          <div
+            class="nextui-collapse-title-content-right"
+          >
+            <svg
+              class="nextui-c-fUXRSc nextui-collapse-icon"
+              fill="none"
+              focusable="false"
+              height="20"
+              role="presentation"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 19l-7-7 7-7"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css"
+      >
+        <div
+          class="nextui-expand-content"
+        >
+          <div
+            aria-labelledby="react-aria7949156610-11"
+            class="nextui-c-fMAxGR nextui-collapse-content"
+            id="react-aria7949156610-12"
+            role="region"
+            tabindex="-1"
+          >
+            content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "_root": LoadedCheerio {
+    "0": Document {
+      "children": Array [
+        <html>
+          <head />
+          <body />
+        </html>,
+      ],
+      "endIndex": null,
+      "next": null,
+      "parent": null,
+      "prev": null,
+      "startIndex": null,
+      "type": "root",
+      "x-mode": "quirks",
+    },
+    "_root": [Circular],
+    "length": 1,
+    "options": Object {
+      "decodeEntities": true,
+      "xml": false,
+    },
+  },
+  "length": 1,
+  "options": Object {
+    "decodeEntities": true,
+    "xml": false,
+  },
+}
+`;
+
+exports[`Collapse should work with content title 1`] = `
+LoadedCheerio {
+  "0": <div>
+    <div
+      class="nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed"
+      data-state="closed"
+      tabindex="-1"
+    >
+      <div
+        aria-controls="react-aria7949156610-4"
+        aria-disabled="false"
+        aria-expanded="false"
+        class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
+        data-state="closed"
+        id="react-aria7949156610-3"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="nextui-collapse-title-container"
+        >
+          <div
+            class="nextui-collapse-title-content"
+          >
+            <h3
+              class="nextui-collapse-title"
+            >
+              title
+            </h3>
+            <div
+              class="nextui-collapse-subtitle"
+            >
+              subtitle
+            </div>
+          </div>
+          <div
+            class="nextui-collapse-title-content-right"
+          >
+            <svg
+              class="nextui-c-fUXRSc nextui-collapse-icon"
+              fill="none"
+              focusable="false"
+              height="20"
+              role="presentation"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 19l-7-7 7-7"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css"
+      >
+        <div
+          class="nextui-expand-content"
+        >
+          <div
+            aria-labelledby="react-aria7949156610-3"
+            class="nextui-c-fMAxGR nextui-collapse-content"
+            id="react-aria7949156610-4"
+            role="region"
+            tabindex="-1"
+          >
+            content
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-dofMoe-shadow-true nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed"
+      data-state="closed"
+      tabindex="-1"
+    >
+      <div
+        aria-controls="react-aria7949156610-6"
+        aria-disabled="false"
+        aria-expanded="false"
+        class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
+        data-state="closed"
+        id="react-aria7949156610-5"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="nextui-collapse-title-container"
+        >
+          <div
+            class="nextui-collapse-title-content"
+          >
+            <h1>
+              title
+            </h1>
+            <div
+              class="nextui-collapse-subtitle"
+            >
+              subtitle
+            </div>
+          </div>
+          <div
+            class="nextui-collapse-title-content-right"
+          >
+            <svg
+              class="nextui-c-fUXRSc nextui-collapse-icon"
+              fill="none"
+              focusable="false"
+              height="20"
+              role="presentation"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 19l-7-7 7-7"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css"
+      >
+        <div
+          class="nextui-expand-content"
+        >
+          <div
+            aria-labelledby="react-aria7949156610-5"
+            class="nextui-c-fMAxGR nextui-collapse-content"
+            id="react-aria7949156610-6"
+            role="region"
+            tabindex="-1"
+          >
+            content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "_root": LoadedCheerio {
+    "0": Document {
+      "children": Array [
+        <html>
+          <head />
+          <body />
+        </html>,
+      ],
+      "endIndex": null,
+      "next": null,
+      "parent": null,
+      "prev": null,
+      "startIndex": null,
+      "type": "root",
+      "x-mode": "quirks",
+    },
+    "_root": [Circular],
+    "length": 1,
+    "options": Object {
+      "decodeEntities": true,
+      "xml": false,
+    },
+  },
+  "length": 1,
+  "options": Object {
+    "decodeEntities": true,
+    "xml": false,
+  },
+}
+`;
+
+exports[`Collapse should work with initial visible 1`] = `
 LoadedCheerio {
   "0": Node {
     "attribs": Object {},
     "children": Array [
       Node {
         "attribs": Object {
-          "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
+          "class": "nextui-c-SSKDj nextui-c-huiNHE nextui-c-SSKDj-eLdNZT-borderWeight-light nextui-c-SSKDj-jBQhgJ-divider-true nextui-c-SSKDj-kMkCGX-animated-true nextui-c-SSKDj-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
           "data-state": "closed",
-          "tabindex": "-1",
+          "tabindex": "0",
         },
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria7585738573-10",
+              "aria-controls": "nextui-collapse-or4n50b5",
               "aria-disabled": "false",
               "aria-expanded": "false",
-              "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
+              "class": "nextui-c-lfcDHB nextui-collapse-view",
               "data-state": "closed",
-              "id": "react-aria7585738573-9",
+              "id": "nextui-collapse-button-or4n50b5",
               "role": "button",
-              "tabindex": "0",
+              "tabindex": "-1",
             },
             "children": Array [
               Node {
@@ -152,7 +514,7 @@ LoadedCheerio {
                       "children": Array [
                         Node {
                           "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
                             "fill": "none",
                             "focusable": "false",
                             "height": "20",
@@ -248,7 +610,7 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                          "class": "nextui-c-kWgtUy nextui-collapse-icon",
                           "fill": "none",
                           "focusable": "false",
                           "height": "20",
@@ -476,9 +838,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-9",
+                        "aria-labelledby": "nextui-collapse-button-or4n50b5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-10",
+                        "id": "nextui-collapse-or4n50b5",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -576,9 +938,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria7585738573-9",
+                      "aria-labelledby": "nextui-collapse-button-or4n50b5",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria7585738573-10",
+                      "id": "nextui-collapse-or4n50b5",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -633,14 +995,14 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-10",
+                "aria-controls": "nextui-collapse-or4n50b5",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
+                "class": "nextui-c-lfcDHB nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria7585738573-9",
+                "id": "nextui-collapse-button-or4n50b5",
                 "role": "button",
-                "tabindex": "0",
+                "tabindex": "-1",
               },
               "children": Array [
                 Node {
@@ -765,7 +1127,7 @@ LoadedCheerio {
                         "children": Array [
                           Node {
                             "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
                               "fill": "none",
                               "focusable": "false",
                               "height": "20",
@@ -861,7 +1223,7 @@ LoadedCheerio {
                       "children": Array [
                         Node {
                           "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
                             "fill": "none",
                             "focusable": "false",
                             "height": "20",
@@ -1115,21 +1477,21 @@ LoadedCheerio {
         "namespace": "http://www.w3.org/1999/xhtml",
         "next": Node {
           "attribs": Object {
-            "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-dofMoe-shadow-true nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-            "data-state": "closed",
-            "tabindex": "-1",
+            "class": "nextui-c-SSKDj nextui-c-huiNHE nextui-c-SSKDj-eLdNZT-borderWeight-light nextui-c-SSKDj-jBQhgJ-divider-true nextui-c-SSKDj-kMkCGX-animated-true nextui-c-SSKDj-cJRfNe-visible-true nextui-collapse nextui-collapse--open",
+            "data-state": "open",
+            "tabindex": "0",
           },
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-12",
+                "aria-controls": "nextui-collapse-9rp3jkre",
                 "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria7585738573-11",
+                "aria-expanded": "true",
+                "class": "nextui-c-lfcDHB nextui-collapse-view",
+                "data-state": "open",
+                "id": "nextui-collapse-button-9rp3jkre",
                 "role": "button",
-                "tabindex": "0",
+                "tabindex": "-1",
               },
               "children": Array [
                 Node {
@@ -1157,111 +1519,9 @@ LoadedCheerio {
                           ],
                           "name": "h3",
                           "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {},
-                                "children": Array [
-                                  Node {
-                                    "data": "subtitle",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "h1",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {},
-                                "x-attribsPrefix": Object {},
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {},
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h1",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {},
-                              "x-attribsPrefix": Object {},
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
                           "next": null,
                           "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
+                          "prev": null,
                           "type": "tag",
                           "x-attribsNamespace": Object {
                             "class": undefined,
@@ -1280,7 +1540,7 @@ LoadedCheerio {
                         "children": Array [
                           Node {
                             "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
                               "fill": "none",
                               "focusable": "false",
                               "height": "20",
@@ -1376,7 +1636,7 @@ LoadedCheerio {
                       "children": Array [
                         Node {
                           "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
                             "fill": "none",
                             "focusable": "false",
                             "height": "20",
@@ -1466,45 +1726,7 @@ LoadedCheerio {
                             ],
                             "name": "h3",
                             "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {},
-                                  "children": Array [
-                                    Node {
-                                      "data": "subtitle",
-                                      "next": null,
-                                      "parent": [Circular],
-                                      "prev": null,
-                                      "type": "text",
-                                    },
-                                  ],
-                                  "name": "h1",
-                                  "namespace": "http://www.w3.org/1999/xhtml",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {},
-                                  "x-attribsPrefix": Object {},
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
+                            "next": null,
                             "parent": [Circular],
                             "prev": null,
                             "type": "tag",
@@ -1515,70 +1737,6 @@ LoadedCheerio {
                               "class": undefined,
                             },
                           },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {},
-                                "children": Array [
-                                  Node {
-                                    "data": "subtitle",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "h1",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {},
-                                "x-attribsPrefix": Object {},
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
                         ],
                         "name": "div",
                         "namespace": "http://www.w3.org/1999/xhtml",
@@ -1620,7 +1778,7 @@ LoadedCheerio {
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": Node {
                 "attribs": Object {
-                  "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
+                  "class": "nextui-c-dJMBOt nextui-c-dJMBOt-bDGmTT-expanded-true nextui-c-dJMBOt-iewBbnE-css",
                 },
                 "children": Array [
                   Node {
@@ -1630,9 +1788,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria7585738573-11",
+                          "aria-labelledby": "nextui-collapse-button-9rp3jkre",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria7585738573-12",
+                          "id": "nextui-collapse-9rp3jkre",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -1720,7 +1878,7 @@ LoadedCheerio {
             },
             Node {
               "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
+                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-bDGmTT-expanded-true nextui-c-dJMBOt-iewBbnE-css",
               },
               "children": Array [
                 Node {
@@ -1730,9 +1888,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-11",
+                        "aria-labelledby": "nextui-collapse-button-9rp3jkre",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-12",
+                        "id": "nextui-collapse-9rp3jkre",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -1787,14 +1945,14 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria7585738573-12",
+                  "aria-controls": "nextui-collapse-9rp3jkre",
                   "aria-disabled": "false",
-                  "aria-expanded": "false",
-                  "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                  "data-state": "closed",
-                  "id": "react-aria7585738573-11",
+                  "aria-expanded": "true",
+                  "class": "nextui-c-lfcDHB nextui-collapse-view",
+                  "data-state": "open",
+                  "id": "nextui-collapse-button-9rp3jkre",
                   "role": "button",
-                  "tabindex": "0",
+                  "tabindex": "-1",
                 },
                 "children": Array [
                   Node {
@@ -1822,111 +1980,9 @@ LoadedCheerio {
                             ],
                             "name": "h3",
                             "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {},
-                                  "children": Array [
-                                    Node {
-                                      "data": "subtitle",
-                                      "next": null,
-                                      "parent": [Circular],
-                                      "prev": null,
-                                      "type": "text",
-                                    },
-                                  ],
-                                  "name": "h1",
-                                  "namespace": "http://www.w3.org/1999/xhtml",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {},
-                                  "x-attribsPrefix": Object {},
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {},
-                                "children": Array [
-                                  Node {
-                                    "data": "subtitle",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "h1",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {},
-                                "x-attribsPrefix": Object {},
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
                             "next": null,
                             "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
+                            "prev": null,
                             "type": "tag",
                             "x-attribsNamespace": Object {
                               "class": undefined,
@@ -1945,7 +2001,7 @@ LoadedCheerio {
                           "children": Array [
                             Node {
                               "attribs": Object {
-                                "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                                "class": "nextui-c-kWgtUy nextui-collapse-icon",
                                 "fill": "none",
                                 "focusable": "false",
                                 "height": "20",
@@ -2041,7 +2097,7 @@ LoadedCheerio {
                         "children": Array [
                           Node {
                             "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
                               "fill": "none",
                               "focusable": "false",
                               "height": "20",
@@ -2131,111 +2187,9 @@ LoadedCheerio {
                               ],
                               "name": "h3",
                               "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": Node {
-                                "attribs": Object {
-                                  "class": "nextui-collapse-subtitle",
-                                },
-                                "children": Array [
-                                  Node {
-                                    "attribs": Object {},
-                                    "children": Array [
-                                      Node {
-                                        "data": "subtitle",
-                                        "next": null,
-                                        "parent": [Circular],
-                                        "prev": null,
-                                        "type": "text",
-                                      },
-                                    ],
-                                    "name": "h1",
-                                    "namespace": "http://www.w3.org/1999/xhtml",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "tag",
-                                    "x-attribsNamespace": Object {},
-                                    "x-attribsPrefix": Object {},
-                                  },
-                                ],
-                                "name": "div",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": [Circular],
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "class": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "class": undefined,
-                                },
-                              },
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {},
-                                  "children": Array [
-                                    Node {
-                                      "data": "subtitle",
-                                      "next": null,
-                                      "parent": [Circular],
-                                      "prev": null,
-                                      "type": "text",
-                                    },
-                                  ],
-                                  "name": "h1",
-                                  "namespace": "http://www.w3.org/1999/xhtml",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {},
-                                  "x-attribsPrefix": Object {},
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
                               "next": null,
                               "parent": [Circular],
-                              "prev": Node {
-                                "attribs": Object {
-                                  "class": "nextui-collapse-title",
-                                },
-                                "children": Array [
-                                  Node {
-                                    "data": "title",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "h3",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": [Circular],
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "class": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "class": undefined,
-                                },
-                              },
+                              "prev": null,
                               "type": "tag",
                               "x-attribsNamespace": Object {
                                 "class": undefined,
@@ -2350,21 +2304,21 @@ LoadedCheerio {
       },
       Node {
         "attribs": Object {
-          "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-dofMoe-shadow-true nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-          "data-state": "closed",
-          "tabindex": "-1",
+          "class": "nextui-c-SSKDj nextui-c-huiNHE nextui-c-SSKDj-eLdNZT-borderWeight-light nextui-c-SSKDj-jBQhgJ-divider-true nextui-c-SSKDj-kMkCGX-animated-true nextui-c-SSKDj-cJRfNe-visible-true nextui-collapse nextui-collapse--open",
+          "data-state": "open",
+          "tabindex": "0",
         },
         "children": Array [
           Node {
             "attribs": Object {
-              "aria-controls": "react-aria7585738573-12",
+              "aria-controls": "nextui-collapse-9rp3jkre",
               "aria-disabled": "false",
-              "aria-expanded": "false",
-              "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-              "data-state": "closed",
-              "id": "react-aria7585738573-11",
+              "aria-expanded": "true",
+              "class": "nextui-c-lfcDHB nextui-collapse-view",
+              "data-state": "open",
+              "id": "nextui-collapse-button-9rp3jkre",
               "role": "button",
-              "tabindex": "0",
+              "tabindex": "-1",
             },
             "children": Array [
               Node {
@@ -2392,45 +2346,7 @@ LoadedCheerio {
                         ],
                         "name": "h3",
                         "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {},
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h1",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {},
-                              "x-attribsPrefix": Object {},
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
+                        "next": null,
                         "parent": [Circular],
                         "prev": null,
                         "type": "tag",
@@ -2441,70 +2357,6 @@ LoadedCheerio {
                           "class": undefined,
                         },
                       },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-subtitle",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {},
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h1",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {},
-                            "x-attribsPrefix": Object {},
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
                     ],
                     "name": "div",
                     "namespace": "http://www.w3.org/1999/xhtml",
@@ -2515,7 +2367,7 @@ LoadedCheerio {
                       "children": Array [
                         Node {
                           "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
                             "fill": "none",
                             "focusable": "false",
                             "height": "20",
@@ -2611,7 +2463,7 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                          "class": "nextui-c-kWgtUy nextui-collapse-icon",
                           "fill": "none",
                           "focusable": "false",
                           "height": "20",
@@ -2701,111 +2553,9 @@ LoadedCheerio {
                           ],
                           "name": "h3",
                           "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {},
-                                "children": Array [
-                                  Node {
-                                    "data": "subtitle",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "h1",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {},
-                                "x-attribsPrefix": Object {},
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {},
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h1",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {},
-                              "x-attribsPrefix": Object {},
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
                           "next": null,
                           "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
+                          "prev": null,
                           "type": "tag",
                           "x-attribsNamespace": Object {
                             "class": undefined,
@@ -2855,7 +2605,7 @@ LoadedCheerio {
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": Node {
               "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
+                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-bDGmTT-expanded-true nextui-c-dJMBOt-iewBbnE-css",
               },
               "children": Array [
                 Node {
@@ -2865,9 +2615,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-11",
+                        "aria-labelledby": "nextui-collapse-button-9rp3jkre",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-12",
+                        "id": "nextui-collapse-9rp3jkre",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -2955,7 +2705,7 @@ LoadedCheerio {
           },
           Node {
             "attribs": Object {
-              "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
+              "class": "nextui-c-dJMBOt nextui-c-dJMBOt-bDGmTT-expanded-true nextui-c-dJMBOt-iewBbnE-css",
             },
             "children": Array [
               Node {
@@ -2965,9 +2715,9 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-labelledby": "react-aria7585738573-11",
+                      "aria-labelledby": "nextui-collapse-button-9rp3jkre",
                       "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria7585738573-12",
+                      "id": "nextui-collapse-9rp3jkre",
                       "role": "region",
                       "tabindex": "-1",
                     },
@@ -3022,14 +2772,14 @@ LoadedCheerio {
             "parent": [Circular],
             "prev": Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-12",
+                "aria-controls": "nextui-collapse-9rp3jkre",
                 "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria7585738573-11",
+                "aria-expanded": "true",
+                "class": "nextui-c-lfcDHB nextui-collapse-view",
+                "data-state": "open",
+                "id": "nextui-collapse-button-9rp3jkre",
                 "role": "button",
-                "tabindex": "0",
+                "tabindex": "-1",
               },
               "children": Array [
                 Node {
@@ -3057,111 +2807,9 @@ LoadedCheerio {
                           ],
                           "name": "h3",
                           "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {},
-                                "children": Array [
-                                  Node {
-                                    "data": "subtitle",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "h1",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {},
-                                "x-attribsPrefix": Object {},
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {},
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h1",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {},
-                              "x-attribsPrefix": Object {},
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
                           "next": null,
                           "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
+                          "prev": null,
                           "type": "tag",
                           "x-attribsNamespace": Object {
                             "class": undefined,
@@ -3180,7 +2828,7 @@ LoadedCheerio {
                         "children": Array [
                           Node {
                             "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
                               "fill": "none",
                               "focusable": "false",
                               "height": "20",
@@ -3276,7 +2924,7 @@ LoadedCheerio {
                       "children": Array [
                         Node {
                           "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
                             "fill": "none",
                             "focusable": "false",
                             "height": "20",
@@ -3366,111 +3014,9 @@ LoadedCheerio {
                             ],
                             "name": "h3",
                             "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {},
-                                  "children": Array [
-                                    Node {
-                                      "data": "subtitle",
-                                      "next": null,
-                                      "parent": [Circular],
-                                      "prev": null,
-                                      "type": "text",
-                                    },
-                                  ],
-                                  "name": "h1",
-                                  "namespace": "http://www.w3.org/1999/xhtml",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {},
-                                  "x-attribsPrefix": Object {},
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {},
-                                "children": Array [
-                                  Node {
-                                    "data": "subtitle",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "h1",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {},
-                                "x-attribsPrefix": Object {},
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
                             "next": null,
                             "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
+                            "prev": null,
                             "type": "tag",
                             "x-attribsNamespace": Object {
                               "class": undefined,
@@ -3558,21 +3104,21 @@ LoadedCheerio {
         "parent": [Circular],
         "prev": Node {
           "attribs": Object {
-            "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
+            "class": "nextui-c-SSKDj nextui-c-huiNHE nextui-c-SSKDj-eLdNZT-borderWeight-light nextui-c-SSKDj-jBQhgJ-divider-true nextui-c-SSKDj-kMkCGX-animated-true nextui-c-SSKDj-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
             "data-state": "closed",
-            "tabindex": "-1",
+            "tabindex": "0",
           },
           "children": Array [
             Node {
               "attribs": Object {
-                "aria-controls": "react-aria7585738573-10",
+                "aria-controls": "nextui-collapse-or4n50b5",
                 "aria-disabled": "false",
                 "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
+                "class": "nextui-c-lfcDHB nextui-collapse-view",
                 "data-state": "closed",
-                "id": "react-aria7585738573-9",
+                "id": "nextui-collapse-button-or4n50b5",
                 "role": "button",
-                "tabindex": "0",
+                "tabindex": "-1",
               },
               "children": Array [
                 Node {
@@ -3697,7 +3243,7 @@ LoadedCheerio {
                         "children": Array [
                           Node {
                             "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
                               "fill": "none",
                               "focusable": "false",
                               "height": "20",
@@ -3793,7 +3339,7 @@ LoadedCheerio {
                       "children": Array [
                         Node {
                           "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
                             "fill": "none",
                             "focusable": "false",
                             "height": "20",
@@ -4021,9 +3567,9 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-labelledby": "react-aria7585738573-9",
+                          "aria-labelledby": "nextui-collapse-button-or4n50b5",
                           "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria7585738573-10",
+                          "id": "nextui-collapse-or4n50b5",
                           "role": "region",
                           "tabindex": "-1",
                         },
@@ -4121,9 +3667,9 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-9",
+                        "aria-labelledby": "nextui-collapse-button-or4n50b5",
                         "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-10",
+                        "id": "nextui-collapse-or4n50b5",
                         "role": "region",
                         "tabindex": "-1",
                       },
@@ -4178,14 +3724,14 @@ LoadedCheerio {
               "parent": [Circular],
               "prev": Node {
                 "attribs": Object {
-                  "aria-controls": "react-aria7585738573-10",
+                  "aria-controls": "nextui-collapse-or4n50b5",
                   "aria-disabled": "false",
                   "aria-expanded": "false",
-                  "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
+                  "class": "nextui-c-lfcDHB nextui-collapse-view",
                   "data-state": "closed",
-                  "id": "react-aria7585738573-9",
+                  "id": "nextui-collapse-button-or4n50b5",
                   "role": "button",
-                  "tabindex": "0",
+                  "tabindex": "-1",
                 },
                 "children": Array [
                   Node {
@@ -4310,7 +3856,7 @@ LoadedCheerio {
                           "children": Array [
                             Node {
                               "attribs": Object {
-                                "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                                "class": "nextui-c-kWgtUy nextui-collapse-icon",
                                 "fill": "none",
                                 "focusable": "false",
                                 "height": "20",
@@ -4406,7 +3952,7 @@ LoadedCheerio {
                         "children": Array [
                           Node {
                             "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
+                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
                               "fill": "none",
                               "focusable": "false",
                               "height": "20",
@@ -4789,9356 +4335,91 @@ LoadedCheerio {
 }
 `;
 
-exports[`Collapse should work with content title 1`] = `
+exports[`Collapse should work without divider 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {},
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-          "data-state": "closed",
-          "tabindex": "-1",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "aria-controls": "react-aria7585738573-4",
-              "aria-disabled": "false",
-              "aria-expanded": "false",
-              "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-              "data-state": "closed",
-              "id": "react-aria7585738573-3",
-              "role": "button",
-              "tabindex": "0",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-collapse-title-container",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "title",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "h3",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-subtitle",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "subtitle",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content-right",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                          "fill": "none",
-                          "focusable": "false",
-                          "height": "20",
-                          "role": "presentation",
-                          "viewBox": "0 0 24 24",
-                          "width": "20",
-                          "xmlns": "http://www.w3.org/2000/svg",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "d": "M15.5 19l-7-7 7-7",
-                              "stroke-linecap": "round",
-                              "stroke-linejoin": "round",
-                              "stroke-width": "1.5",
-                            },
-                            "children": Array [],
-                            "name": "path",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                          },
-                        ],
-                        "name": "svg",
-                        "namespace": "http://www.w3.org/2000/svg",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "http://www.w3.org/2000/xmlns/",
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "",
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-3",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-4",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-          },
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-expand-content",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "aria-labelledby": "react-aria7585738573-3",
-                      "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria7585738573-4",
-                      "role": "region",
-                      "tabindex": "-1",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "content",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "aria-controls": "react-aria7585738573-4",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria7585738573-3",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-dofMoe-shadow-true nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-            "data-state": "closed",
-            "tabindex": "-1",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "aria-controls": "react-aria7585738573-6",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria7585738573-5",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {},
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h1",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {},
-                          "x-attribsPrefix": Object {},
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {},
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h1",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {},
-                            "x-attribsPrefix": Object {},
-                          },
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {},
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h1",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {},
-                            "x-attribsPrefix": Object {},
-                          },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {},
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h1",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {},
-                              "x-attribsPrefix": Object {},
-                            },
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {
-                  "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-expand-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "aria-labelledby": "react-aria7585738573-5",
-                          "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria7585738573-6",
-                          "role": "region",
-                          "tabindex": "-1",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "content",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-5",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-6",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {
-                  "aria-controls": "react-aria7585738573-6",
-                  "aria-disabled": "false",
-                  "aria-expanded": "false",
-                  "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                  "data-state": "closed",
-                  "id": "react-aria7585738573-5",
-                  "role": "button",
-                  "tabindex": "0",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-container",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {},
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h1",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {},
-                            "x-attribsPrefix": Object {},
-                          },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {},
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h1",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {},
-                              "x-attribsPrefix": Object {},
-                            },
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content-right",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                                "fill": "none",
-                                "focusable": "false",
-                                "height": "20",
-                                "role": "presentation",
-                                "viewBox": "0 0 24 24",
-                                "width": "20",
-                                "xmlns": "http://www.w3.org/2000/svg",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {
-                                    "d": "M15.5 19l-7-7 7-7",
-                                    "stroke-linecap": "round",
-                                    "stroke-linejoin": "round",
-                                    "stroke-width": "1.5",
-                                  },
-                                  "children": Array [],
-                                  "name": "path",
-                                  "namespace": "http://www.w3.org/2000/svg",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                  "x-attribsPrefix": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                },
-                              ],
-                              "name": "svg",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "http://www.w3.org/2000/xmlns/",
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "",
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {},
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h1",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": Node {
-                                "attribs": Object {
-                                  "class": "nextui-collapse-subtitle",
-                                },
-                                "children": Array [
-                                  Node {
-                                    "data": "subtitle",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "div",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": [Circular],
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "class": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "class": undefined,
-                                },
-                              },
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {},
-                              "x-attribsPrefix": Object {},
-                            },
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": Node {
-                                "attribs": Object {},
-                                "children": Array [
-                                  Node {
-                                    "data": "title",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "h1",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": [Circular],
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {},
-                                "x-attribsPrefix": Object {},
-                              },
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-dofMoe-shadow-true nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-          "data-state": "closed",
-          "tabindex": "-1",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "aria-controls": "react-aria7585738573-6",
-              "aria-disabled": "false",
-              "aria-expanded": "false",
-              "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-              "data-state": "closed",
-              "id": "react-aria7585738573-5",
-              "role": "button",
-              "tabindex": "0",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-collapse-title-container",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {},
-                        "children": Array [
-                          Node {
-                            "data": "title",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "h1",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {},
-                        "x-attribsPrefix": Object {},
-                      },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-subtitle",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "subtitle",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {},
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h1",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {},
-                          "x-attribsPrefix": Object {},
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content-right",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                          "fill": "none",
-                          "focusable": "false",
-                          "height": "20",
-                          "role": "presentation",
-                          "viewBox": "0 0 24 24",
-                          "width": "20",
-                          "xmlns": "http://www.w3.org/2000/svg",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "d": "M15.5 19l-7-7 7-7",
-                              "stroke-linecap": "round",
-                              "stroke-linejoin": "round",
-                              "stroke-width": "1.5",
-                            },
-                            "children": Array [],
-                            "name": "path",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                          },
-                        ],
-                        "name": "svg",
-                        "namespace": "http://www.w3.org/2000/svg",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "http://www.w3.org/2000/xmlns/",
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "",
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {},
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h1",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {},
-                          "x-attribsPrefix": Object {},
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {},
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h1",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {},
-                            "x-attribsPrefix": Object {},
-                          },
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-5",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-6",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-          },
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-expand-content",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "aria-labelledby": "react-aria7585738573-5",
-                      "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria7585738573-6",
-                      "role": "region",
-                      "tabindex": "-1",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "content",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "aria-controls": "react-aria7585738573-6",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria7585738573-5",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {},
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h1",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {},
-                          "x-attribsPrefix": Object {},
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {},
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h1",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {},
-                            "x-attribsPrefix": Object {},
-                          },
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {},
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h1",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {},
-                            "x-attribsPrefix": Object {},
-                          },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {},
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h1",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {},
-                              "x-attribsPrefix": Object {},
-                            },
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-jBQhgJ-divider-true nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-            "data-state": "closed",
-            "tabindex": "-1",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "aria-controls": "react-aria7585738573-4",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria7585738573-3",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {
-                  "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-expand-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "aria-labelledby": "react-aria7585738573-3",
-                          "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "react-aria7585738573-4",
-                          "role": "region",
-                          "tabindex": "-1",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "content",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-3",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-4",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {
-                  "aria-controls": "react-aria7585738573-4",
-                  "aria-disabled": "false",
-                  "aria-expanded": "false",
-                  "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                  "data-state": "closed",
-                  "id": "react-aria7585738573-3",
-                  "role": "button",
-                  "tabindex": "0",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-container",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content-right",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                                "fill": "none",
-                                "focusable": "false",
-                                "height": "20",
-                                "role": "presentation",
-                                "viewBox": "0 0 24 24",
-                                "width": "20",
-                                "xmlns": "http://www.w3.org/2000/svg",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {
-                                    "d": "M15.5 19l-7-7 7-7",
-                                    "stroke-linecap": "round",
-                                    "stroke-linejoin": "round",
-                                    "stroke-width": "1.5",
-                                  },
-                                  "children": Array [],
-                                  "name": "path",
-                                  "namespace": "http://www.w3.org/2000/svg",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                  "x-attribsPrefix": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                },
-                              ],
-                              "name": "svg",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "http://www.w3.org/2000/xmlns/",
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "",
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": Node {
-                                "attribs": Object {
-                                  "class": "nextui-collapse-subtitle",
-                                },
-                                "children": Array [
-                                  Node {
-                                    "data": "subtitle",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "div",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": [Circular],
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "class": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "class": undefined,
-                                },
-                              },
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": Node {
-                                "attribs": Object {
-                                  "class": "nextui-collapse-title",
-                                },
-                                "children": Array [
-                                  Node {
-                                    "data": "title",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "h3",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": [Circular],
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "class": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "class": undefined,
-                                },
-                              },
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-      },
-    ],
-    "name": "div",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {},
-    "x-attribsPrefix": Object {},
-  },
-  "_root": LoadedCheerio {
-    "0": Node {
-      "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-      "x-mode": "quirks",
-    },
-    "_root": [Circular],
-    "length": 1,
-    "options": Object {
-      "decodeEntities": true,
-      "xml": false,
-    },
-  },
-  "length": 1,
-  "options": Object {
-    "decodeEntities": true,
-    "xml": false,
-  },
-}
-`;
-
-exports[`Collapse should work with initial visible 1`] = `
-LoadedCheerio {
-  "0": Node {
-    "attribs": Object {},
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-SSKDj nextui-c-huiNHE nextui-c-SSKDj-eLdNZT-borderWeight-light nextui-c-SSKDj-jBQhgJ-divider-true nextui-c-SSKDj-kMkCGX-animated-true nextui-c-SSKDj-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-          "data-state": "closed",
-          "tabindex": "0",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "aria-controls": "nextui-collapse-or4n50b5",
-              "aria-disabled": "false",
-              "aria-expanded": "false",
-              "class": "nextui-c-lfcDHB nextui-collapse-view",
-              "data-state": "closed",
-              "id": "nextui-collapse-button-or4n50b5",
-              "role": "button",
-              "tabindex": "-1",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-collapse-title-container",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "title",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "h3",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-subtitle",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "subtitle",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content-right",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                          "fill": "none",
-                          "focusable": "false",
-                          "height": "20",
-                          "role": "presentation",
-                          "viewBox": "0 0 24 24",
-                          "width": "20",
-                          "xmlns": "http://www.w3.org/2000/svg",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "d": "M15.5 19l-7-7 7-7",
-                              "stroke-linecap": "round",
-                              "stroke-linejoin": "round",
-                              "stroke-width": "1.5",
-                            },
-                            "children": Array [],
-                            "name": "path",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                          },
-                        ],
-                        "name": "svg",
-                        "namespace": "http://www.w3.org/2000/svg",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "http://www.w3.org/2000/xmlns/",
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "",
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "nextui-collapse-button-or4n50b5",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "nextui-collapse-or4n50b5",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-          },
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-expand-content",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "aria-labelledby": "nextui-collapse-button-or4n50b5",
-                      "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "nextui-collapse-or4n50b5",
-                      "role": "region",
-                      "tabindex": "-1",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "content",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "aria-controls": "nextui-collapse-or4n50b5",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-collapse-view",
-                "data-state": "closed",
-                "id": "nextui-collapse-button-or4n50b5",
-                "role": "button",
-                "tabindex": "-1",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-c-SSKDj nextui-c-huiNHE nextui-c-SSKDj-eLdNZT-borderWeight-light nextui-c-SSKDj-jBQhgJ-divider-true nextui-c-SSKDj-kMkCGX-animated-true nextui-c-SSKDj-cJRfNe-visible-true nextui-collapse nextui-collapse--open",
-            "data-state": "open",
-            "tabindex": "0",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "aria-controls": "nextui-collapse-9rp3jkre",
-                "aria-disabled": "false",
-                "aria-expanded": "true",
-                "class": "nextui-c-lfcDHB nextui-collapse-view",
-                "data-state": "open",
-                "id": "nextui-collapse-button-9rp3jkre",
-                "role": "button",
-                "tabindex": "-1",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {
-                  "class": "nextui-c-dJMBOt nextui-c-dJMBOt-bDGmTT-expanded-true nextui-c-dJMBOt-iewBbnE-css",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-expand-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "aria-labelledby": "nextui-collapse-button-9rp3jkre",
-                          "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "nextui-collapse-9rp3jkre",
-                          "role": "region",
-                          "tabindex": "-1",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "content",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-bDGmTT-expanded-true nextui-c-dJMBOt-iewBbnE-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "nextui-collapse-button-9rp3jkre",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "nextui-collapse-9rp3jkre",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {
-                  "aria-controls": "nextui-collapse-9rp3jkre",
-                  "aria-disabled": "false",
-                  "aria-expanded": "true",
-                  "class": "nextui-c-lfcDHB nextui-collapse-view",
-                  "data-state": "open",
-                  "id": "nextui-collapse-button-9rp3jkre",
-                  "role": "button",
-                  "tabindex": "-1",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-container",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content-right",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                                "fill": "none",
-                                "focusable": "false",
-                                "height": "20",
-                                "role": "presentation",
-                                "viewBox": "0 0 24 24",
-                                "width": "20",
-                                "xmlns": "http://www.w3.org/2000/svg",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {
-                                    "d": "M15.5 19l-7-7 7-7",
-                                    "stroke-linecap": "round",
-                                    "stroke-linejoin": "round",
-                                    "stroke-width": "1.5",
-                                  },
-                                  "children": Array [],
-                                  "name": "path",
-                                  "namespace": "http://www.w3.org/2000/svg",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                  "x-attribsPrefix": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                },
-                              ],
-                              "name": "svg",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "http://www.w3.org/2000/xmlns/",
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "",
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-SSKDj nextui-c-huiNHE nextui-c-SSKDj-eLdNZT-borderWeight-light nextui-c-SSKDj-jBQhgJ-divider-true nextui-c-SSKDj-kMkCGX-animated-true nextui-c-SSKDj-cJRfNe-visible-true nextui-collapse nextui-collapse--open",
-          "data-state": "open",
-          "tabindex": "0",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "aria-controls": "nextui-collapse-9rp3jkre",
-              "aria-disabled": "false",
-              "aria-expanded": "true",
-              "class": "nextui-c-lfcDHB nextui-collapse-view",
-              "data-state": "open",
-              "id": "nextui-collapse-button-9rp3jkre",
-              "role": "button",
-              "tabindex": "-1",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-collapse-title-container",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "title",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "h3",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content-right",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                          "fill": "none",
-                          "focusable": "false",
-                          "height": "20",
-                          "role": "presentation",
-                          "viewBox": "0 0 24 24",
-                          "width": "20",
-                          "xmlns": "http://www.w3.org/2000/svg",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "d": "M15.5 19l-7-7 7-7",
-                              "stroke-linecap": "round",
-                              "stroke-linejoin": "round",
-                              "stroke-width": "1.5",
-                            },
-                            "children": Array [],
-                            "name": "path",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                          },
-                        ],
-                        "name": "svg",
-                        "namespace": "http://www.w3.org/2000/svg",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "http://www.w3.org/2000/xmlns/",
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "",
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-bDGmTT-expanded-true nextui-c-dJMBOt-iewBbnE-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "nextui-collapse-button-9rp3jkre",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "nextui-collapse-9rp3jkre",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-          },
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-dJMBOt nextui-c-dJMBOt-bDGmTT-expanded-true nextui-c-dJMBOt-iewBbnE-css",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-expand-content",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "aria-labelledby": "nextui-collapse-button-9rp3jkre",
-                      "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "nextui-collapse-9rp3jkre",
-                      "role": "region",
-                      "tabindex": "-1",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "content",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "aria-controls": "nextui-collapse-9rp3jkre",
-                "aria-disabled": "false",
-                "aria-expanded": "true",
-                "class": "nextui-c-lfcDHB nextui-collapse-view",
-                "data-state": "open",
-                "id": "nextui-collapse-button-9rp3jkre",
-                "role": "button",
-                "tabindex": "-1",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-c-SSKDj nextui-c-huiNHE nextui-c-SSKDj-eLdNZT-borderWeight-light nextui-c-SSKDj-jBQhgJ-divider-true nextui-c-SSKDj-kMkCGX-animated-true nextui-c-SSKDj-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-            "data-state": "closed",
-            "tabindex": "0",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "aria-controls": "nextui-collapse-or4n50b5",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-collapse-view",
-                "data-state": "closed",
-                "id": "nextui-collapse-button-or4n50b5",
-                "role": "button",
-                "tabindex": "-1",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": [Circular],
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-subtitle",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "subtitle",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": [Circular],
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {
-                  "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-expand-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "aria-labelledby": "nextui-collapse-button-or4n50b5",
-                          "class": "nextui-c-fMAxGR nextui-collapse-content",
-                          "id": "nextui-collapse-or4n50b5",
-                          "role": "region",
-                          "tabindex": "-1",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "content",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "aria-labelledby": undefined,
-                          "class": undefined,
-                          "id": undefined,
-                          "role": undefined,
-                          "tabindex": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "nextui-collapse-button-or4n50b5",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "nextui-collapse-or4n50b5",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {
-                  "aria-controls": "nextui-collapse-or4n50b5",
-                  "aria-disabled": "false",
-                  "aria-expanded": "false",
-                  "class": "nextui-c-lfcDHB nextui-collapse-view",
-                  "data-state": "closed",
-                  "id": "nextui-collapse-button-or4n50b5",
-                  "role": "button",
-                  "tabindex": "-1",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-container",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": [Circular],
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-subtitle",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "subtitle",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "div",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": [Circular],
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content-right",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                                "fill": "none",
-                                "focusable": "false",
-                                "height": "20",
-                                "role": "presentation",
-                                "viewBox": "0 0 24 24",
-                                "width": "20",
-                                "xmlns": "http://www.w3.org/2000/svg",
-                              },
-                              "children": Array [
-                                Node {
-                                  "attribs": Object {
-                                    "d": "M15.5 19l-7-7 7-7",
-                                    "stroke-linecap": "round",
-                                    "stroke-linejoin": "round",
-                                    "stroke-width": "1.5",
-                                  },
-                                  "children": Array [],
-                                  "name": "path",
-                                  "namespace": "http://www.w3.org/2000/svg",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "tag",
-                                  "x-attribsNamespace": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                  "x-attribsPrefix": Object {
-                                    "d": undefined,
-                                    "stroke-linecap": undefined,
-                                    "stroke-linejoin": undefined,
-                                    "stroke-width": undefined,
-                                  },
-                                },
-                              ],
-                              "name": "svg",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "http://www.w3.org/2000/xmlns/",
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                                "fill": undefined,
-                                "focusable": undefined,
-                                "height": undefined,
-                                "role": undefined,
-                                "viewBox": undefined,
-                                "width": undefined,
-                                "xmlns": "",
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": [Circular],
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-kWgtUy nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title-content",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-title",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "title",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "h3",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": Node {
-                                "attribs": Object {
-                                  "class": "nextui-collapse-subtitle",
-                                },
-                                "children": Array [
-                                  Node {
-                                    "data": "subtitle",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "div",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": [Circular],
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "class": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "class": undefined,
-                                },
-                              },
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                            Node {
-                              "attribs": Object {
-                                "class": "nextui-collapse-subtitle",
-                              },
-                              "children": Array [
-                                Node {
-                                  "data": "subtitle",
-                                  "next": null,
-                                  "parent": [Circular],
-                                  "prev": null,
-                                  "type": "text",
-                                },
-                              ],
-                              "name": "div",
-                              "namespace": "http://www.w3.org/1999/xhtml",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": Node {
-                                "attribs": Object {
-                                  "class": "nextui-collapse-title",
-                                },
-                                "children": Array [
-                                  Node {
-                                    "data": "title",
-                                    "next": null,
-                                    "parent": [Circular],
-                                    "prev": null,
-                                    "type": "text",
-                                  },
-                                ],
-                                "name": "h3",
-                                "namespace": "http://www.w3.org/1999/xhtml",
-                                "next": [Circular],
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "class": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "class": undefined,
-                                },
-                              },
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "class": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "class": undefined,
-                              },
-                            },
-                          ],
-                          "name": "div",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": [Circular],
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "aria-controls": undefined,
-                  "aria-disabled": undefined,
-                  "aria-expanded": undefined,
-                  "class": undefined,
-                  "data-state": undefined,
-                  "id": undefined,
-                  "role": undefined,
-                  "tabindex": undefined,
-                },
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "data-state": undefined,
-            "tabindex": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-      },
-    ],
-    "name": "div",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {},
-    "x-attribsPrefix": Object {},
-  },
-  "_root": LoadedCheerio {
-    "0": Node {
-      "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-      "x-mode": "quirks",
-    },
-    "_root": [Circular],
-    "length": 1,
-    "options": Object {
-      "decodeEntities": true,
-      "xml": false,
-    },
-  },
-  "length": 1,
-  "options": Object {
-    "decodeEntities": true,
-    "xml": false,
-  },
-}
-`;
-
-exports[`Collapse should work without divider 1`] = `
-LoadedCheerio {
-  "0": Node {
-    "attribs": Object {},
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed",
-          "data-state": "closed",
-          "tabindex": "-1",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "aria-controls": "react-aria7585738573-8",
-              "aria-disabled": "false",
-              "aria-expanded": "false",
-              "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-              "data-state": "closed",
-              "id": "react-aria7585738573-7",
-              "role": "button",
-              "tabindex": "0",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-collapse-title-container",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title",
-                        },
-                        "children": Array [
-                          Node {
-                            "data": "title",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "text",
-                          },
-                        ],
-                        "name": "h3",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-collapse-title-content-right",
-                    },
-                    "children": Array [
-                      Node {
-                        "attribs": Object {
-                          "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                          "fill": "none",
-                          "focusable": "false",
-                          "height": "20",
-                          "role": "presentation",
-                          "viewBox": "0 0 24 24",
-                          "width": "20",
-                          "xmlns": "http://www.w3.org/2000/svg",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "d": "M15.5 19l-7-7 7-7",
-                              "stroke-linecap": "round",
-                              "stroke-linejoin": "round",
-                              "stroke-width": "1.5",
-                            },
-                            "children": Array [],
-                            "name": "path",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "d": undefined,
-                              "stroke-linecap": undefined,
-                              "stroke-linejoin": undefined,
-                              "stroke-width": undefined,
-                            },
-                          },
-                        ],
-                        "name": "svg",
-                        "namespace": "http://www.w3.org/2000/svg",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "http://www.w3.org/2000/xmlns/",
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                          "fill": undefined,
-                          "focusable": undefined,
-                          "height": undefined,
-                          "role": undefined,
-                          "viewBox": undefined,
-                          "width": undefined,
-                          "xmlns": "",
-                        },
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-expand-content",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "aria-labelledby": "react-aria7585738573-7",
-                        "class": "nextui-c-fMAxGR nextui-collapse-content",
-                        "id": "react-aria7585738573-8",
-                        "role": "region",
-                        "tabindex": "-1",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "content",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "aria-labelledby": undefined,
-                        "class": undefined,
-                        "id": undefined,
-                        "role": undefined,
-                        "tabindex": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "aria-controls": undefined,
-              "aria-disabled": undefined,
-              "aria-expanded": undefined,
-              "class": undefined,
-              "data-state": undefined,
-              "id": undefined,
-              "role": undefined,
-              "tabindex": undefined,
-            },
-          },
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-expand-content",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "aria-labelledby": "react-aria7585738573-7",
-                      "class": "nextui-c-fMAxGR nextui-collapse-content",
-                      "id": "react-aria7585738573-8",
-                      "role": "region",
-                      "tabindex": "-1",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "content",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "div",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "aria-labelledby": undefined,
-                      "class": undefined,
-                      "id": undefined,
-                      "role": undefined,
-                      "tabindex": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "aria-controls": "react-aria7585738573-8",
-                "aria-disabled": "false",
-                "aria-expanded": "false",
-                "class": "nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view",
-                "data-state": "closed",
-                "id": "react-aria7585738573-7",
-                "role": "button",
-                "tabindex": "0",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-collapse-title-container",
-                  },
-                  "children": Array [
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-collapse-title",
-                          },
-                          "children": Array [
-                            Node {
-                              "data": "title",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "text",
-                            },
-                          ],
-                          "name": "h3",
-                          "namespace": "http://www.w3.org/1999/xhtml",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content-right",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                              "fill": "none",
-                              "focusable": "false",
-                              "height": "20",
-                              "role": "presentation",
-                              "viewBox": "0 0 24 24",
-                              "width": "20",
-                              "xmlns": "http://www.w3.org/2000/svg",
-                            },
-                            "children": Array [
-                              Node {
-                                "attribs": Object {
-                                  "d": "M15.5 19l-7-7 7-7",
-                                  "stroke-linecap": "round",
-                                  "stroke-linejoin": "round",
-                                  "stroke-width": "1.5",
-                                },
-                                "children": Array [],
-                                "name": "path",
-                                "namespace": "http://www.w3.org/2000/svg",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "tag",
-                                "x-attribsNamespace": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                                "x-attribsPrefix": Object {
-                                  "d": undefined,
-                                  "stroke-linecap": undefined,
-                                  "stroke-linejoin": undefined,
-                                  "stroke-width": undefined,
-                                },
-                              },
-                            ],
-                            "name": "svg",
-                            "namespace": "http://www.w3.org/2000/svg",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "http://www.w3.org/2000/xmlns/",
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                              "fill": undefined,
-                              "focusable": undefined,
-                              "height": undefined,
-                              "role": undefined,
-                              "viewBox": undefined,
-                              "width": undefined,
-                              "xmlns": "",
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": [Circular],
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    Node {
-                      "attribs": Object {
-                        "class": "nextui-collapse-title-content-right",
-                      },
-                      "children": Array [
-                        Node {
-                          "attribs": Object {
-                            "class": "nextui-c-fUXRSc nextui-collapse-icon",
-                            "fill": "none",
-                            "focusable": "false",
-                            "height": "20",
-                            "role": "presentation",
-                            "viewBox": "0 0 24 24",
-                            "width": "20",
-                            "xmlns": "http://www.w3.org/2000/svg",
-                          },
-                          "children": Array [
-                            Node {
-                              "attribs": Object {
-                                "d": "M15.5 19l-7-7 7-7",
-                                "stroke-linecap": "round",
-                                "stroke-linejoin": "round",
-                                "stroke-width": "1.5",
-                              },
-                              "children": Array [],
-                              "name": "path",
-                              "namespace": "http://www.w3.org/2000/svg",
-                              "next": null,
-                              "parent": [Circular],
-                              "prev": null,
-                              "type": "tag",
-                              "x-attribsNamespace": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                              "x-attribsPrefix": Object {
-                                "d": undefined,
-                                "stroke-linecap": undefined,
-                                "stroke-linejoin": undefined,
-                                "stroke-width": undefined,
-                              },
-                            },
-                          ],
-                          "name": "svg",
-                          "namespace": "http://www.w3.org/2000/svg",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "tag",
-                          "x-attribsNamespace": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "http://www.w3.org/2000/xmlns/",
-                          },
-                          "x-attribsPrefix": Object {
-                            "class": undefined,
-                            "fill": undefined,
-                            "focusable": undefined,
-                            "height": undefined,
-                            "role": undefined,
-                            "viewBox": undefined,
-                            "width": undefined,
-                            "xmlns": "",
-                          },
-                        },
-                      ],
-                      "name": "div",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": Node {
-                        "attribs": Object {
-                          "class": "nextui-collapse-title-content",
-                        },
-                        "children": Array [
-                          Node {
-                            "attribs": Object {
-                              "class": "nextui-collapse-title",
-                            },
-                            "children": Array [
-                              Node {
-                                "data": "title",
-                                "next": null,
-                                "parent": [Circular],
-                                "prev": null,
-                                "type": "text",
-                              },
-                            ],
-                            "name": "h3",
-                            "namespace": "http://www.w3.org/1999/xhtml",
-                            "next": null,
-                            "parent": [Circular],
-                            "prev": null,
-                            "type": "tag",
-                            "x-attribsNamespace": Object {
-                              "class": undefined,
-                            },
-                            "x-attribsPrefix": Object {
-                              "class": undefined,
-                            },
-                          },
-                        ],
-                        "name": "div",
-                        "namespace": "http://www.w3.org/1999/xhtml",
-                        "next": [Circular],
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "tag",
-                        "x-attribsNamespace": Object {
-                          "class": undefined,
-                        },
-                        "x-attribsPrefix": Object {
-                          "class": undefined,
-                        },
-                      },
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                  ],
-                  "name": "div",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "aria-controls": undefined,
-                "aria-disabled": undefined,
-                "aria-expanded": undefined,
-                "class": undefined,
-                "data-state": undefined,
-                "id": undefined,
-                "role": undefined,
-                "tabindex": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "data-state": undefined,
-          "tabindex": undefined,
-        },
-      },
-    ],
-    "name": "div",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {},
-    "x-attribsPrefix": Object {},
-  },
+  "0": <div>
+    <div
+      class="nextui-c-hPzDAx nextui-c-huiNHE nextui-c-hPzDAx-eLdNZT-borderWeight-light nextui-c-hPzDAx-kMkCGX-animated-true nextui-c-hPzDAx-TDdeu-visible-false nextui-collapse nextui-collapse--closed"
+      data-state="closed"
+      tabindex="-1"
+    >
+      <div
+        aria-controls="react-aria7949156610-8"
+        aria-disabled="false"
+        aria-expanded="false"
+        class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
+        data-state="closed"
+        id="react-aria7949156610-7"
+        role="button"
+        tabindex="0"
+      >
+        <div
+          class="nextui-collapse-title-container"
+        >
+          <div
+            class="nextui-collapse-title-content"
+          >
+            <h3
+              class="nextui-collapse-title"
+            >
+              title
+            </h3>
+          </div>
+          <div
+            class="nextui-collapse-title-content-right"
+          >
+            <svg
+              class="nextui-c-fUXRSc nextui-collapse-icon"
+              fill="none"
+              focusable="false"
+              height="20"
+              role="presentation"
+              viewBox="0 0 24 24"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 19l-7-7 7-7"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="nextui-c-dJMBOt nextui-c-dJMBOt-ielLSBX-css"
+      >
+        <div
+          class="nextui-expand-content"
+        >
+          <div
+            aria-labelledby="react-aria7949156610-7"
+            class="nextui-c-fMAxGR nextui-collapse-content"
+            id="react-aria7949156610-8"
+            role="region"
+            tabindex="-1"
+          >
+            content
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
diff --git a/packages/react/src/divider/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/divider/__tests__/__snapshots__/index.test.tsx.snap
index 78dd33bf6a..dfa7262bc6 100644
--- a/packages/react/src/divider/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/divider/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,851 +6,61 @@ exports[`Divider should support float 1`] = `ReactWrapper {}`;
 
 exports[`Divider should work with align and volume 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {},
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-          "role": "separator",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-            },
-            "children": Array [
-              Node {
-                "data": "start",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "text",
-              },
-            ],
-            "name": "span",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-            "role": "separator",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-              },
-              "children": Array [
-                Node {
-                  "data": "left",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "text",
-                },
-              ],
-              "name": "span",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": Node {
-            "attribs": Object {
-              "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-              "role": "separator",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-c-jsIVaD nextui-c-jsIVaD-iknAPSa-css nextui-divider-text",
-                },
-                "children": Array [
-                  Node {
-                    "data": "end",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "text",
-                  },
-                ],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-ibOTthN-css",
-                "role": "separator",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-                  },
-                  "children": Array [
-                    Node {
-                      "data": "start",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "text",
-                    },
-                  ],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-                "role": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-                "role": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": [Circular],
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-              "role": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-              "role": undefined,
-            },
-          },
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-          "role": "separator",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-            },
-            "children": Array [
-              Node {
-                "data": "left",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "text",
-              },
-            ],
-            "name": "span",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-            "role": "separator",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-jsIVaD nextui-c-jsIVaD-iknAPSa-css nextui-divider-text",
-              },
-              "children": Array [
-                Node {
-                  "data": "end",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "text",
-                },
-              ],
-              "name": "span",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": Node {
-            "attribs": Object {
-              "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-ibOTthN-css",
-              "role": "separator",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-                },
-                "children": Array [
-                  Node {
-                    "data": "start",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "text",
-                  },
-                ],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": [Circular],
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-              "role": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-              "role": undefined,
-            },
-          },
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-            "role": "separator",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-              },
-              "children": Array [
-                Node {
-                  "data": "start",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "text",
-                },
-              ],
-              "name": "span",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-          "role": "separator",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-jsIVaD nextui-c-jsIVaD-iknAPSa-css nextui-divider-text",
-            },
-            "children": Array [
-              Node {
-                "data": "end",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "text",
-              },
-            ],
-            "name": "span",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-ibOTthN-css",
-            "role": "separator",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-              },
-              "children": Array [
-                Node {
-                  "data": "start",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "text",
-                },
-              ],
-              "name": "span",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-            "role": "separator",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-              },
-              "children": Array [
-                Node {
-                  "data": "left",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "text",
-                },
-              ],
-              "name": "span",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": Node {
-            "attribs": Object {
-              "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-              "role": "separator",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-                },
-                "children": Array [
-                  Node {
-                    "data": "start",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "text",
-                  },
-                ],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": [Circular],
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-              "role": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-              "role": undefined,
-            },
-          },
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-ibOTthN-css",
-          "role": "separator",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-            },
-            "children": Array [
-              Node {
-                "data": "start",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "text",
-              },
-            ],
-            "name": "span",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-            "role": "separator",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-jsIVaD nextui-c-jsIVaD-iknAPSa-css nextui-divider-text",
-              },
-              "children": Array [
-                Node {
-                  "data": "end",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "text",
-                },
-              ],
-              "name": "span",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": Node {
-            "attribs": Object {
-              "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-              "role": "separator",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-                },
-                "children": Array [
-                  Node {
-                    "data": "left",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "text",
-                  },
-                ],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": [Circular],
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css",
-                "role": "separator",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text",
-                  },
-                  "children": Array [
-                    Node {
-                      "data": "start",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "text",
-                    },
-                  ],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-                "role": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-                "role": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-              "role": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-              "role": undefined,
-            },
-          },
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-      },
-    ],
-    "name": "div",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {},
-    "x-attribsPrefix": Object {},
-  },
+  "0": <div>
+    <div
+      class="nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css"
+      role="separator"
+    >
+      <span
+        class="nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text"
+      >
+        start
+      </span>
+    </div>
+    <div
+      class="nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css"
+      role="separator"
+    >
+      <span
+        class="nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text"
+      >
+        left
+      </span>
+    </div>
+    <div
+      class="nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-iiMwZzC-css"
+      role="separator"
+    >
+      <span
+        class="nextui-c-jsIVaD nextui-c-jsIVaD-iknAPSa-css nextui-divider-text"
+      >
+        end
+      </span>
+    </div>
+    <div
+      class="nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-ibOTthN-css"
+      role="separator"
+    >
+      <span
+        class="nextui-c-jsIVaD nextui-c-jsIVaD-icpijqj-css nextui-divider-text"
+      >
+        start
+      </span>
+    </div>
+  </div>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
@@ -871,177 +81,29 @@ LoadedCheerio {
 
 exports[`Divider should work with type 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {},
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-bZLhCa nextui-c-bZLhCa-ebPlNg-color-secondary nextui-c-bZLhCa-iiMwZzC-css",
-          "role": "separator",
-        },
-        "children": Array [],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-c-bZLhCa nextui-c-bZLhCa-ijPvPU-color-warning nextui-c-bZLhCa-iiMwZzC-css",
-            "role": "separator",
-          },
-          "children": Array [],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-bZLhCa nextui-c-bZLhCa-ijPvPU-color-warning nextui-c-bZLhCa-iiMwZzC-css",
-          "role": "separator",
-        },
-        "children": Array [],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-c-bZLhCa nextui-c-bZLhCa-ebPlNg-color-secondary nextui-c-bZLhCa-iiMwZzC-css",
-            "role": "separator",
-          },
-          "children": Array [],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-      },
-    ],
-    "name": "div",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {},
-    "x-attribsPrefix": Object {},
-  },
+  "0": <div>
+    <div
+      class="nextui-c-bZLhCa nextui-c-bZLhCa-ebPlNg-color-secondary nextui-c-bZLhCa-iiMwZzC-css"
+      role="separator"
+    />
+    <div
+      class="nextui-c-bZLhCa nextui-c-bZLhCa-ijPvPU-color-warning nextui-c-bZLhCa-iiMwZzC-css"
+      role="separator"
+    />
+  </div>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
@@ -1062,177 +124,29 @@ LoadedCheerio {
 
 exports[`Divider should work with x and y 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {},
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-ieTOsbl-css",
-          "role": "separator",
-        },
-        "children": Array [],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-ifmABdt-css",
-            "role": "separator",
-          },
-          "children": Array [],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-ifmABdt-css",
-          "role": "separator",
-        },
-        "children": Array [],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-ieTOsbl-css",
-            "role": "separator",
-          },
-          "children": Array [],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-            "role": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-          "role": undefined,
-        },
-      },
-    ],
-    "name": "div",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {},
-    "x-attribsPrefix": Object {},
-  },
+  "0": <div>
+    <div
+      class="nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-ieTOsbl-css"
+      role="separator"
+    />
+    <div
+      class="nextui-c-bZLhCa nextui-c-bZLhCa-qCmpO-color-default nextui-c-bZLhCa-ifmABdt-css"
+      role="separator"
+    />
+  </div>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },
diff --git a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
index 35f2c9f621..44e90c5970 100644
--- a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Input should be work with content 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with content 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should be work with label 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><label class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria8378558130-19\\" id=\\"react-aria8378558130-20\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-19\\" aria-labelledby=\\"react-aria8378558130-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with label 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><label class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria1916772511-19\\" id=\\"react-aria1916772511-20\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-19\\" aria-labelledby=\\"react-aria1916772511-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different sizes 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different sizes 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different status 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria8378558130-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different status 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
index 2e8b46339c..31b7d1e73b 100644
--- a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InputPassword should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"password\\" id=\\"react-aria2004819011-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg class=\\"nextui-input-password-icon\\" fill=\\"none\\" height=\\"16\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" style=\\"color: currentColor;\\" viewBox=\\"0 0 24 24\\" width=\\"16\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`InputPassword should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"password\\" id=\\"react-aria9108825677-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg class=\\"nextui-input-password-icon\\" fill=\\"none\\" height=\\"16\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" style=\\"color: currentColor;\\" viewBox=\\"0 0 24 24\\" width=\\"16\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
diff --git a/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
index 3dde1c3adf..21d8646af8 100644
--- a/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/switch/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Switch should render correctly 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label>"`;
+exports[`Switch should render correctly 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label>"`;
 
-exports[`Switch should render correctly with an icon 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with an icon 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should render correctly with an iconOff 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with an iconOff 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should render correctly with an iconOn 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with an iconOn 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should render correctly with both icons on/off 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
+exports[`Switch should render correctly with both icons on/off 1`] = `"<label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"><svg class=\\"\\"></svg></span></div></label>"`;
 
-exports[`Switch should work with different colors 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-primary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-cMYjfR-color-secondary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-eTwznY-color-success nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-jTdYRZ-color-warning nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-dlOPhH-color-error nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
+exports[`Switch should work with different colors 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-primary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-cMYjfR-color-secondary nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-eTwznY-color-success nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-jTdYRZ-color-warning nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-dlOPhH-color-error nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label></div>"`;
 
-exports[`Switch should work with different sizes 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-dAsftq-size-xs nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-gPEQiI-size-sm nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-lcjiCZ-size-lg nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-elYIjz-size-xl nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-ehImnT-animated-true nextui-c-itiWTf-azaXX-cv nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-ijDFoR nextui-switch-circle\\"></span></div></label></div>"`;
+exports[`Switch should work with different sizes 1`] = `"<div><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-dAsftq-size-xs nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-gPEQiI-size-sm nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-JJjKI-size-md nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-lcjiCZ-size-lg nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label><label data-state=\\"unchecked\\" class=\\"nextui-c-STltJ nextui-c-STltJ-bwQcWP-color-default nextui-c-STltJ-elYIjz-size-xl nextui-c-STltJ-bgIFDi-borderWeight-normal\\"><input class=\\"nextui-c-jjKPqy nextui-c-iFHsrU nextui-c-jjKPqy-gwHlSF-animated-true nextui-switch-input\\" data-state=\\"unchecked\\" tabindex=\\"-1\\" type=\\"checkbox\\"><div aria-checked=\\"false\\" aria-disabled=\\"false\\" class=\\"nextui-c-itiWTf nextui-c-huiNHE nextui-c-itiWTf-iXJPXp-animated-true nextui-switch nextui-switch--unchecked\\" data-state=\\"unchecked\\" role=\\"switch\\" tabindex=\\"0\\"><span class=\\"nextui-c-eJPKci nextui-switch-circle\\"></span></div></label></div>"`;
diff --git a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
index 8f7fbb2fe8..3e962a88fb 100644
--- a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria7384475654-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria7384475654-15-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria7384475654-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria7384475654-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria7384475654-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria7384475654-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria8126652730-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria8126652730-15-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria8126652730-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria8126652730-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria8126652730-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria8126652730-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
 
-exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria7384475654-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria7384475654-2-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria7384475654-2-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria7384475654-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria7384475654-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria7384475654-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria8126652730-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria8126652730-2-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria8126652730-2-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria8126652730-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria8126652730-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria8126652730-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
diff --git a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
index 0e2309a88f..e65ea4e6c9 100644
--- a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Textarea should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea aria-multiline=\\"true\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"placeholder\\" type=\\"text\\" id=\\"react-aria6302143503-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`Textarea should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea aria-multiline=\\"true\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"placeholder\\" type=\\"text\\" id=\\"react-aria770148263-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
 
-exports[`Textarea should work with different styles 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria6302143503-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria6302143503-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Textarea should work with different styles 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria770148263-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria770148263-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap
index f9a8d56714..30c6091010 100644
--- a/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,1849 +2,79 @@
 
 exports[` User should support image and text 1`] = `
 LoadedCheerio {
-  "0": Node {
-    "attribs": Object {},
-    "children": Array [
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-ldmKBv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar nextui-user-avatar",
-              "data-state": "ready",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-avatar-bg",
-                },
-                "children": Array [],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-text",
-                  },
-                  "children": Array [
-                    Node {
-                      "data": "Jun",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "text",
-                    },
-                  ],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": [Circular],
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              Node {
-                "attribs": Object {
-                  "class": "nextui-avatar-text",
-                },
-                "children": Array [
-                  Node {
-                    "data": "Jun",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "text",
-                  },
-                ],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-bg",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": [Circular],
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "span",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-kNKVvs nextui-user-info",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-c-hEcroZ nextui-user-name",
-                  },
-                  "children": Array [
-                    Node {
-                      "data": "Junior",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "text",
-                    },
-                  ],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": Node {
-                    "attribs": Object {
-                      "class": "nextui-c-eCZQvV nextui-user-desc",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": [Circular],
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-c-eCZQvV nextui-user-desc",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": Node {
-                    "attribs": Object {
-                      "class": "nextui-c-hEcroZ nextui-user-name",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "Junior",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": [Circular],
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-              "data-state": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-              "data-state": undefined,
-            },
-          },
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-kNKVvs nextui-user-info",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-c-hEcroZ nextui-user-name",
-                },
-                "children": Array [
-                  Node {
-                    "data": "Junior",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "text",
-                  },
-                ],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Node {
-                  "attribs": Object {
-                    "class": "nextui-c-eCZQvV nextui-user-desc",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": [Circular],
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              Node {
-                "attribs": Object {
-                  "class": "nextui-c-eCZQvV nextui-user-desc",
-                },
-                "children": Array [],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": Node {
-                  "attribs": Object {
-                    "class": "nextui-c-hEcroZ nextui-user-name",
-                  },
-                  "children": Array [
-                    Node {
-                      "data": "Junior",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "text",
-                    },
-                  ],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": [Circular],
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar nextui-user-avatar",
-                "data-state": "ready",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-bg",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-text",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "Jun",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": [Circular],
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-text",
-                  },
-                  "children": Array [
-                    Node {
-                      "data": "Jun",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "text",
-                    },
-                  ],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-bg",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": [Circular],
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "span",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-                "data-state": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-                "data-state": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": Node {
-          "attribs": Object {
-            "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-ldmKBv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css nextui-user-avatar",
-                "data-state": "loading",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-bg",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-img nextui-avatar--loading",
-                      "data-state": "loading",
-                      "src": "https://avatars.githubusercontent.com/u/30373425?v=4",
-                    },
-                    "children": Array [],
-                    "name": "img",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": [Circular],
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                      "data-state": undefined,
-                      "src": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                      "data-state": undefined,
-                      "src": undefined,
-                    },
-                  },
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-img nextui-avatar--loading",
-                    "data-state": "loading",
-                    "src": "https://avatars.githubusercontent.com/u/30373425?v=4",
-                  },
-                  "children": Array [],
-                  "name": "img",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-bg",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": [Circular],
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                    "data-state": undefined,
-                    "src": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                    "data-state": undefined,
-                    "src": undefined,
-                  },
-                },
-              ],
-              "name": "span",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {
-                  "class": "nextui-c-kNKVvs nextui-user-info",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-c-hEcroZ nextui-user-name",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "Junior Garcia",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-c-eCZQvV nextui-user-desc",
-                      },
-                      "children": Array [],
-                      "name": "span",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-c-eCZQvV nextui-user-desc",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-c-hEcroZ nextui-user-name",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "Junior Garcia",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "span",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-                "data-state": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-                "data-state": undefined,
-              },
-            },
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-kNKVvs nextui-user-info",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-c-hEcroZ nextui-user-name",
-                  },
-                  "children": Array [
-                    Node {
-                      "data": "Junior Garcia",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "text",
-                    },
-                  ],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": Node {
-                    "attribs": Object {
-                      "class": "nextui-c-eCZQvV nextui-user-desc",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": [Circular],
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-c-eCZQvV nextui-user-desc",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": Node {
-                    "attribs": Object {
-                      "class": "nextui-c-hEcroZ nextui-user-name",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "Junior Garcia",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": [Circular],
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {
-                  "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css nextui-user-avatar",
-                  "data-state": "loading",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-bg",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-avatar-img nextui-avatar--loading",
-                        "data-state": "loading",
-                        "src": "https://avatars.githubusercontent.com/u/30373425?v=4",
-                      },
-                      "children": Array [],
-                      "name": "img",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                        "data-state": undefined,
-                        "src": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                        "data-state": undefined,
-                        "src": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-img nextui-avatar--loading",
-                      "data-state": "loading",
-                      "src": "https://avatars.githubusercontent.com/u/30373425?v=4",
-                    },
-                    "children": Array [],
-                    "name": "img",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-avatar-bg",
-                      },
-                      "children": Array [],
-                      "name": "span",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                      "data-state": undefined,
-                      "src": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                      "data-state": undefined,
-                      "src": undefined,
-                    },
-                  },
-                ],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                  "data-state": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                  "data-state": undefined,
-                },
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": [Circular],
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-          },
-        },
-        "parent": [Circular],
-        "prev": null,
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-        },
-      },
-      Node {
-        "attribs": Object {
-          "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-ldmKBv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
-        },
-        "children": Array [
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css nextui-user-avatar",
-              "data-state": "loading",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-avatar-bg",
-                },
-                "children": Array [],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-img nextui-avatar--loading",
-                    "data-state": "loading",
-                    "src": "https://avatars.githubusercontent.com/u/30373425?v=4",
-                  },
-                  "children": Array [],
-                  "name": "img",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": [Circular],
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                    "data-state": undefined,
-                    "src": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                    "data-state": undefined,
-                    "src": undefined,
-                  },
-                },
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              Node {
-                "attribs": Object {
-                  "class": "nextui-avatar-img nextui-avatar--loading",
-                  "data-state": "loading",
-                  "src": "https://avatars.githubusercontent.com/u/30373425?v=4",
-                },
-                "children": Array [],
-                "name": "img",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-bg",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": [Circular],
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                  "data-state": undefined,
-                  "src": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                  "data-state": undefined,
-                  "src": undefined,
-                },
-              },
-            ],
-            "name": "span",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": Node {
-              "attribs": Object {
-                "class": "nextui-c-kNKVvs nextui-user-info",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-c-hEcroZ nextui-user-name",
-                  },
-                  "children": Array [
-                    Node {
-                      "data": "Junior Garcia",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "text",
-                    },
-                  ],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": Node {
-                    "attribs": Object {
-                      "class": "nextui-c-eCZQvV nextui-user-desc",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": [Circular],
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-c-eCZQvV nextui-user-desc",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": Node {
-                    "attribs": Object {
-                      "class": "nextui-c-hEcroZ nextui-user-name",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "Junior Garcia",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": [Circular],
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": [Circular],
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-            "parent": [Circular],
-            "prev": null,
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-              "data-state": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-              "data-state": undefined,
-            },
-          },
-          Node {
-            "attribs": Object {
-              "class": "nextui-c-kNKVvs nextui-user-info",
-            },
-            "children": Array [
-              Node {
-                "attribs": Object {
-                  "class": "nextui-c-hEcroZ nextui-user-name",
-                },
-                "children": Array [
-                  Node {
-                    "data": "Junior Garcia",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "text",
-                  },
-                ],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": Node {
-                  "attribs": Object {
-                    "class": "nextui-c-eCZQvV nextui-user-desc",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": [Circular],
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              Node {
-                "attribs": Object {
-                  "class": "nextui-c-eCZQvV nextui-user-desc",
-                },
-                "children": Array [],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": Node {
-                  "attribs": Object {
-                    "class": "nextui-c-hEcroZ nextui-user-name",
-                  },
-                  "children": Array [
-                    Node {
-                      "data": "Junior Garcia",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "text",
-                    },
-                  ],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": [Circular],
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-            ],
-            "name": "div",
-            "namespace": "http://www.w3.org/1999/xhtml",
-            "next": null,
-            "parent": [Circular],
-            "prev": Node {
-              "attribs": Object {
-                "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css nextui-user-avatar",
-                "data-state": "loading",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-bg",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-img nextui-avatar--loading",
-                      "data-state": "loading",
-                      "src": "https://avatars.githubusercontent.com/u/30373425?v=4",
-                    },
-                    "children": Array [],
-                    "name": "img",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": [Circular],
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                      "data-state": undefined,
-                      "src": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                      "data-state": undefined,
-                      "src": undefined,
-                    },
-                  },
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-img nextui-avatar--loading",
-                    "data-state": "loading",
-                    "src": "https://avatars.githubusercontent.com/u/30373425?v=4",
-                  },
-                  "children": Array [],
-                  "name": "img",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-bg",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": [Circular],
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                    "data-state": undefined,
-                    "src": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                    "data-state": undefined,
-                    "src": undefined,
-                  },
-                },
-              ],
-              "name": "span",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": [Circular],
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-                "data-state": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-                "data-state": undefined,
-              },
-            },
-            "type": "tag",
-            "x-attribsNamespace": Object {
-              "class": undefined,
-            },
-            "x-attribsPrefix": Object {
-              "class": undefined,
-            },
-          },
-        ],
-        "name": "div",
-        "namespace": "http://www.w3.org/1999/xhtml",
-        "next": null,
-        "parent": [Circular],
-        "prev": Node {
-          "attribs": Object {
-            "class": "nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-ldmKBv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css",
-          },
-          "children": Array [
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar nextui-user-avatar",
-                "data-state": "ready",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-bg",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-text",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "Jun",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": [Circular],
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-avatar-text",
-                  },
-                  "children": Array [
-                    Node {
-                      "data": "Jun",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "text",
-                    },
-                  ],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-bg",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": [Circular],
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "span",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {
-                  "class": "nextui-c-kNKVvs nextui-user-info",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-c-hEcroZ nextui-user-name",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "Junior",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-c-eCZQvV nextui-user-desc",
-                      },
-                      "children": Array [],
-                      "name": "span",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-c-eCZQvV nextui-user-desc",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-c-hEcroZ nextui-user-name",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "Junior",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "span",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "div",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                },
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-                "data-state": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-                "data-state": undefined,
-              },
-            },
-            Node {
-              "attribs": Object {
-                "class": "nextui-c-kNKVvs nextui-user-info",
-              },
-              "children": Array [
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-c-hEcroZ nextui-user-name",
-                  },
-                  "children": Array [
-                    Node {
-                      "data": "Junior",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "text",
-                    },
-                  ],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": Node {
-                    "attribs": Object {
-                      "class": "nextui-c-eCZQvV nextui-user-desc",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": [Circular],
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "parent": [Circular],
-                  "prev": null,
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-                Node {
-                  "attribs": Object {
-                    "class": "nextui-c-eCZQvV nextui-user-desc",
-                  },
-                  "children": Array [],
-                  "name": "span",
-                  "namespace": "http://www.w3.org/1999/xhtml",
-                  "next": null,
-                  "parent": [Circular],
-                  "prev": Node {
-                    "attribs": Object {
-                      "class": "nextui-c-hEcroZ nextui-user-name",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "Junior",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": [Circular],
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  "type": "tag",
-                  "x-attribsNamespace": Object {
-                    "class": undefined,
-                  },
-                  "x-attribsPrefix": Object {
-                    "class": undefined,
-                  },
-                },
-              ],
-              "name": "div",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {
-                  "class": "nextui-c-fFabR nextui-c-PJLV nextui-c-ldmKBv nextui-c-fFabR-qXFXw-color-default nextui-c-fFabR-duCSmO-textColor-default nextui-c-fFabR-iHugVF-size-md nextui-c-fFabR-krOtXB-borderWeight-normal nextui-c-fFabR-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-fFabR-iPJLV-css only-text-avatar nextui-user-avatar",
-                  "data-state": "ready",
-                },
-                "children": Array [
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-bg",
-                    },
-                    "children": Array [],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": Node {
-                      "attribs": Object {
-                        "class": "nextui-avatar-text",
-                      },
-                      "children": Array [
-                        Node {
-                          "data": "Jun",
-                          "next": null,
-                          "parent": [Circular],
-                          "prev": null,
-                          "type": "text",
-                        },
-                      ],
-                      "name": "span",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": null,
-                      "parent": [Circular],
-                      "prev": [Circular],
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "parent": [Circular],
-                    "prev": null,
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                  Node {
-                    "attribs": Object {
-                      "class": "nextui-avatar-text",
-                    },
-                    "children": Array [
-                      Node {
-                        "data": "Jun",
-                        "next": null,
-                        "parent": [Circular],
-                        "prev": null,
-                        "type": "text",
-                      },
-                    ],
-                    "name": "span",
-                    "namespace": "http://www.w3.org/1999/xhtml",
-                    "next": null,
-                    "parent": [Circular],
-                    "prev": Node {
-                      "attribs": Object {
-                        "class": "nextui-avatar-bg",
-                      },
-                      "children": Array [],
-                      "name": "span",
-                      "namespace": "http://www.w3.org/1999/xhtml",
-                      "next": [Circular],
-                      "parent": [Circular],
-                      "prev": null,
-                      "type": "tag",
-                      "x-attribsNamespace": Object {
-                        "class": undefined,
-                      },
-                      "x-attribsPrefix": Object {
-                        "class": undefined,
-                      },
-                    },
-                    "type": "tag",
-                    "x-attribsNamespace": Object {
-                      "class": undefined,
-                    },
-                    "x-attribsPrefix": Object {
-                      "class": undefined,
-                    },
-                  },
-                ],
-                "name": "span",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {
-                  "class": undefined,
-                  "data-state": undefined,
-                },
-                "x-attribsPrefix": Object {
-                  "class": undefined,
-                  "data-state": undefined,
-                },
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {
-                "class": undefined,
-              },
-              "x-attribsPrefix": Object {
-                "class": undefined,
-              },
-            },
-          ],
-          "name": "div",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": [Circular],
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {
-            "class": undefined,
-          },
-          "x-attribsPrefix": Object {
-            "class": undefined,
-          },
-        },
-        "type": "tag",
-        "x-attribsNamespace": Object {
-          "class": undefined,
-        },
-        "x-attribsPrefix": Object {
-          "class": undefined,
-        },
-      },
-    ],
-    "name": "div",
-    "namespace": "http://www.w3.org/1999/xhtml",
-    "next": null,
-    "parent": Node {
-      "children": Array [
-        [Circular],
-      ],
-      "name": "root",
-      "next": null,
-      "parent": null,
-      "prev": null,
-      "type": "root",
-    },
-    "prev": null,
-    "type": "tag",
-    "x-attribsNamespace": Object {},
-    "x-attribsPrefix": Object {},
-  },
+  "0": <div>
+    <div
+      class="nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-ldmKBv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css"
+    >
+      <span
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar nextui-user-avatar"
+        data-state="ready"
+      >
+        <span
+          class="nextui-avatar-bg"
+        />
+        <span
+          class="nextui-avatar-text"
+        >
+          Jun
+        </span>
+      </span>
+      <div
+        class="nextui-c-kNKVvs nextui-user-info"
+      >
+        <span
+          class="nextui-c-hEcroZ nextui-user-name"
+        >
+          Junior
+        </span>
+        <span
+          class="nextui-c-eCZQvV nextui-user-desc"
+        />
+      </div>
+    </div>
+    <div
+      class="nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-ldmKBv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css"
+    >
+      <span
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css nextui-user-avatar"
+        data-state="loading"
+      >
+        <span
+          class="nextui-avatar-bg"
+        />
+        <img
+          class="nextui-avatar-img nextui-avatar--loading"
+          data-state="loading"
+          src="https://avatars.githubusercontent.com/u/30373425?v=4"
+        />
+      </span>
+      <div
+        class="nextui-c-kNKVvs nextui-user-info"
+      >
+        <span
+          class="nextui-c-hEcroZ nextui-user-name"
+        >
+          Junior Garcia
+        </span>
+        <span
+          class="nextui-c-eCZQvV nextui-user-desc"
+        />
+      </div>
+    </div>
+  </div>,
   "_root": LoadedCheerio {
-    "0": Node {
+    "0": Document {
       "children": Array [
-        Node {
-          "attribs": Object {},
-          "children": Array [
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "head",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "body",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": null,
-                "parent": [Circular],
-                "prev": [Circular],
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "parent": [Circular],
-              "prev": null,
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-            Node {
-              "attribs": Object {},
-              "children": Array [],
-              "name": "body",
-              "namespace": "http://www.w3.org/1999/xhtml",
-              "next": null,
-              "parent": [Circular],
-              "prev": Node {
-                "attribs": Object {},
-                "children": Array [],
-                "name": "head",
-                "namespace": "http://www.w3.org/1999/xhtml",
-                "next": [Circular],
-                "parent": [Circular],
-                "prev": null,
-                "type": "tag",
-                "x-attribsNamespace": Object {},
-                "x-attribsPrefix": Object {},
-              },
-              "type": "tag",
-              "x-attribsNamespace": Object {},
-              "x-attribsPrefix": Object {},
-            },
-          ],
-          "name": "html",
-          "namespace": "http://www.w3.org/1999/xhtml",
-          "next": null,
-          "parent": [Circular],
-          "prev": null,
-          "type": "tag",
-          "x-attribsNamespace": Object {},
-          "x-attribsPrefix": Object {},
-        },
+        <html>
+          <head />
+          <body />
+        </html>,
       ],
-      "name": "root",
+      "endIndex": null,
       "next": null,
       "parent": null,
       "prev": null,
+      "startIndex": null,
       "type": "root",
       "x-mode": "quirks",
     },

From 527b0860dd428f1b55ebce266c0cedaac40ed721 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 13 Aug 2022 00:23:16 -0300
Subject: [PATCH 072/106] fix(root): packages updated, typescript upgraded

---
 apps/docs/package.json                        |  2 +-
 apps/docs/tsconfig.json                       | 13 +++---
 package.json                                  |  5 ++-
 packages/react/package.json                   |  9 ++--
 .../__snapshots__/group.test.tsx.snap         | 32 +++++++--------
 .../__snapshots__/index.test.tsx.snap         | 40 +++++++++---------
 .../__snapshots__/index.test.tsx.snap         |  8 ++--
 .../__snapshots__/password.test.tsx.snap      |  2 +-
 packages/react/src/input/input.tsx            |  2 +-
 .../__snapshots__/index.test.tsx.snap         |  4 +-
 .../__snapshots__/index.test.tsx.snap         |  4 +-
 yarn.lock                                     | 41 ++++++++-----------
 12 files changed, 79 insertions(+), 83 deletions(-)

diff --git a/apps/docs/package.json b/apps/docs/package.json
index 1600665335..db156a69c7 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -70,6 +70,6 @@
     "babel-plugin-module-resolver": "^4.1.0",
     "eslint-config-next": "^11.0.0",
     "next-sitemap": "^1.6.140",
-    "typescript": "4.3.4"
+    "typescript": "4.6.2"
   }
 }
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 8c1582cf9a..4551e68802 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -28,7 +28,7 @@
       ],
       "@lib/*": [
         "./src/lib/*"
-      ],
+      ]
     },
     "lib": [
       "dom",
@@ -41,7 +41,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "types": [
-        "node"
+      "node"
     ],
     "strict": false,
     "forceConsistentCasingInFileNames": true,
@@ -57,9 +57,10 @@
     "skipLibCheck": true,
     "module": "esnext",
     "typeRoots": [
-        "../../node_modules/@types",
-        "./typings"
-    ]
+      "../../node_modules/@types",
+      "./typings"
+    ],
+    "incremental": true
   },
   "include": [
     "**/*.ts",
@@ -71,4 +72,4 @@
   "exclude": [
     "node_modules"
   ]
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 76c55787e8..8d7bd6fac5 100644
--- a/package.json
+++ b/package.json
@@ -84,9 +84,12 @@
     "shelljs": "^0.8.4",
     "ts-node": "^10.1.0",
     "turbo": "^1.0.24",
-    "typescript": "4.3.4",
+    "typescript": "4.6.2",
     "uuid": "^8.3.2"
   },
+  "resolutions": {
+    "@types/react": "17.0.33"
+  },
   "dependencies": {
     "gray-matter": "^4.0.3"
   },
diff --git a/packages/react/package.json b/packages/react/package.json
index 6d8e5a4568..8b988dd229 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -54,7 +54,7 @@
     "coverage:codecov": "yarn test --coverage && codecov"
   },
   "dependencies": {
-    "@babel/runtime": "7.9.6",
+    "@babel/runtime": "^7.6.2",
     "@react-aria/button": "3.6.0",
     "@react-aria/checkbox": "3.5.0",
     "@react-aria/dialog": "3.3.0",
@@ -92,6 +92,7 @@
     "directory": "lib"
   },
   "devDependencies": {
+    "react": "17.0.2",
     "@babel/cli": "^7.14.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
     "@babel/plugin-transform-runtime": "^7.14.5",
@@ -107,8 +108,8 @@
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.22",
     "@types/node": "^15.12.4",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.8",
+    "@types/react": "17.0.33",
+    "@types/react-dom": "17.0.9",
     "@typescript-eslint/eslint-plugin": "^4.27.0",
     "@typescript-eslint/parser": "^4.27.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
@@ -132,7 +133,7 @@
     "rimraf": "^3.0.2",
     "terser": "5.10.0",
     "ts-jest": "^26.5.5",
-    "typescript": "4.3.4",
+    "typescript": "4.6.2",
     "webpack": "^5.53.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^3.3.11",
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
index 508dc7c7f7..6217fd5801 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
@@ -15,12 +15,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria7259762622-10"
+        aria-controls="react-aria8641349695-10"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria7259762622-9"
+        id="react-aria8641349695-9"
         role="button"
         tabindex="0"
       >
@@ -66,9 +66,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria7259762622-9"
+            aria-labelledby="react-aria8641349695-9"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria7259762622-10"
+            id="react-aria8641349695-10"
             role="region"
             tabindex="-1"
           >
@@ -83,12 +83,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria7259762622-12"
+        aria-controls="react-aria8641349695-12"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria7259762622-11"
+        id="react-aria8641349695-11"
         role="button"
         tabindex="0"
       >
@@ -134,9 +134,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria7259762622-11"
+            aria-labelledby="react-aria8641349695-11"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria7259762622-12"
+            id="react-aria8641349695-12"
             role="region"
             tabindex="-1"
           >
@@ -188,12 +188,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria7259762622-6"
+        aria-controls="react-aria8641349695-6"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria7259762622-5"
+        id="react-aria8641349695-5"
         role="button"
         tabindex="0"
       >
@@ -239,9 +239,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria7259762622-5"
+            aria-labelledby="react-aria8641349695-5"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria7259762622-6"
+            id="react-aria8641349695-6"
             role="region"
             tabindex="-1"
           >
@@ -256,12 +256,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria7259762622-8"
+        aria-controls="react-aria8641349695-8"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria7259762622-7"
+        id="react-aria8641349695-7"
         role="button"
         tabindex="0"
       >
@@ -307,9 +307,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria7259762622-7"
+            aria-labelledby="react-aria8641349695-7"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria7259762622-8"
+            id="react-aria8641349695-8"
             role="region"
             tabindex="-1"
           >
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
index e1233683cb..6b2a5d8ad3 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
@@ -15,12 +15,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria7949156610-10"
+        aria-controls="react-aria8498023545-10"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria7949156610-9"
+        id="react-aria8498023545-9"
         role="button"
         tabindex="0"
       >
@@ -71,9 +71,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria7949156610-9"
+            aria-labelledby="react-aria8498023545-9"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria7949156610-10"
+            id="react-aria8498023545-10"
             role="region"
             tabindex="-1"
           >
@@ -88,12 +88,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria7949156610-12"
+        aria-controls="react-aria8498023545-12"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria7949156610-11"
+        id="react-aria8498023545-11"
         role="button"
         tabindex="0"
       >
@@ -146,9 +146,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria7949156610-11"
+            aria-labelledby="react-aria8498023545-11"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria7949156610-12"
+            id="react-aria8498023545-12"
             role="region"
             tabindex="-1"
           >
@@ -198,12 +198,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria7949156610-4"
+        aria-controls="react-aria8498023545-4"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria7949156610-3"
+        id="react-aria8498023545-3"
         role="button"
         tabindex="0"
       >
@@ -254,9 +254,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria7949156610-3"
+            aria-labelledby="react-aria8498023545-3"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria7949156610-4"
+            id="react-aria8498023545-4"
             role="region"
             tabindex="-1"
           >
@@ -271,12 +271,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria7949156610-6"
+        aria-controls="react-aria8498023545-6"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria7949156610-5"
+        id="react-aria8498023545-5"
         role="button"
         tabindex="0"
       >
@@ -325,9 +325,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria7949156610-5"
+            aria-labelledby="react-aria8498023545-5"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria7949156610-6"
+            id="react-aria8498023545-6"
             role="region"
             tabindex="-1"
           >
@@ -4344,12 +4344,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria7949156610-8"
+        aria-controls="react-aria8498023545-8"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria7949156610-7"
+        id="react-aria8498023545-7"
         role="button"
         tabindex="0"
       >
@@ -4395,9 +4395,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria7949156610-7"
+            aria-labelledby="react-aria8498023545-7"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria7949156610-8"
+            id="react-aria8498023545-8"
             role="region"
             tabindex="-1"
           >
diff --git a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
index 44e90c5970..b86c731b9d 100644
--- a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Input should be work with content 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with content 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should be work with label 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><label class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria1916772511-19\\" id=\\"react-aria1916772511-20\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-19\\" aria-labelledby=\\"react-aria1916772511-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with label 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><label class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria976419233-19\\" id=\\"react-aria976419233-20\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-19\\" aria-labelledby=\\"react-aria976419233-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different sizes 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different sizes 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different status 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria1916772511-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different status 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria976419233-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
index 31b7d1e73b..70d24d88c5 100644
--- a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InputPassword should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"password\\" id=\\"react-aria9108825677-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg class=\\"nextui-input-password-icon\\" fill=\\"none\\" height=\\"16\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" style=\\"color: currentColor;\\" viewBox=\\"0 0 24 24\\" width=\\"16\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`InputPassword should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"password\\" id=\\"react-aria7863475462-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg class=\\"nextui-input-password-icon\\" fill=\\"none\\" height=\\"16\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" style=\\"color: currentColor;\\" viewBox=\\"0 0 24 24\\" width=\\"16\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
diff --git a/packages/react/src/input/input.tsx b/packages/react/src/input/input.tsx
index c3a1da0148..c3830beb9b 100644
--- a/packages/react/src/input/input.tsx
+++ b/packages/react/src/input/input.tsx
@@ -218,9 +218,9 @@ const Input = React.forwardRef<FormElement, InputProps>(
             asPlaceholder={!!labelPlaceholder}
             bordered={bordered}
             className={`${preClass}-block-label`}
-            htmlFor={'htmlFor' in labelProps ? labelProps.htmlFor : ''}
             focused={hover}
             hasContentLeft={!!contentLeft}
+            htmlFor={"htmlFor" in labelProps ? labelProps.htmlFor : ""}
             id={labelProps.id}
             isTextarea={isTextarea}
             rounded={rounded}
diff --git a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
index 3e962a88fb..395d3f7777 100644
--- a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria8126652730-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria8126652730-15-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria8126652730-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria8126652730-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria8126652730-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria8126652730-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria9423606033-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria9423606033-15-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria9423606033-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria9423606033-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria9423606033-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria9423606033-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
 
-exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria8126652730-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria8126652730-2-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria8126652730-2-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria8126652730-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria8126652730-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria8126652730-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria9423606033-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria9423606033-2-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria9423606033-2-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria9423606033-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria9423606033-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria9423606033-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
diff --git a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
index e65ea4e6c9..3ea8ff40ab 100644
--- a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Textarea should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea aria-multiline=\\"true\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"placeholder\\" type=\\"text\\" id=\\"react-aria770148263-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`Textarea should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea aria-multiline=\\"true\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"placeholder\\" type=\\"text\\" id=\\"react-aria4655744491-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
 
-exports[`Textarea should work with different styles 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria770148263-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria770148263-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Textarea should work with different styles 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria4655744491-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria4655744491-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/yarn.lock b/yarn.lock
index 011b2b5c24..14517eb8e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1236,13 +1236,6 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@7.9.6":
-  version "7.9.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
-  integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.9", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
@@ -5543,6 +5536,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-dom@17.0.9":
+  version "17.0.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
+  integrity sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-dom@<18.0.0", "@types/react-dom@^17.0.2", "@types/react-dom@^17.0.8":
   version "17.0.17"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
@@ -5581,19 +5581,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@>=16.9.0":
-  version "18.0.17"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.17.tgz#4583d9c322d67efe4b39a935d223edcc7050ccf4"
-  integrity sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^17", "@types/react@^17.0.11", "@types/react@^17.0.2":
-  version "17.0.48"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.48.tgz#a4532a8b91d7b27b8768b6fc0c3bccb760d15a6c"
-  integrity sha512-zJ6IYlJ8cYYxiJfUaZOQee4lh99mFihBoqkOSEGV+dFi9leROW6+PgstzQ+w3gWTnUfskALtQPGHK6dYmPj+2A==
+"@types/react@*", "@types/react@17.0.33", "@types/react@>=16.9.0", "@types/react@^17", "@types/react@^17.0.11", "@types/react@^17.0.2":
+  version "17.0.33"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.33.tgz#e01ae3de7613dac1094569880bb3792732203ad5"
+  integrity sha512-pLWntxXpDPaU+RTAuSGWGSEL2FRTNyRQOjSWDke/rxRg14ncsZvx8AKWMWZqvc1UOaJIAoObdZhAWvRaHFi5rw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -15986,7 +15977,7 @@ react-use-measure@^2.1.1:
   dependencies:
     debounce "^1.2.1"
 
-react@^17.0.2:
+react@17.0.2, react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -18405,10 +18396,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-typescript@4.3.4:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.4.tgz#3f85b986945bcf31071decdd96cf8bfa65f9dcbc"
-  integrity sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==
+typescript@4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
+  integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
 
 typescript@^3.2.1, typescript@^3.9.3:
   version "3.9.10"

From ac188efd9c2b139c6d8ba151f21620a99258646f Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 13 Aug 2022 00:32:28 -0300
Subject: [PATCH 073/106] feat(react-navbar): dropdown included and refactored
 to work well with navbar

---
 .../__snapshots__/group.test.tsx.snap         | 32 ++++++------
 yarn.lock                                     | 52 +++++++++----------
 2 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
index 7d6dc2204d..673f04b4d8 100644
--- a/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
@@ -6,10 +6,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="nextui-c-dZPNrK"
+        class="nextui-c-jBUsJN"
       >
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -22,7 +22,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -35,7 +35,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -48,7 +48,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -65,10 +65,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="nextui-c-dZPNrK"
+      class="nextui-c-jBUsJN"
     >
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -81,7 +81,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -94,7 +94,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -107,7 +107,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -181,10 +181,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="nextui-c-dZPNrK nextui-c-dZPNrK-fkvkLX-animated-true"
+        class="nextui-c-jBUsJN nextui-c-jBUsJN-TKDXA-animated-true"
       >
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -197,7 +197,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
           data-state="ready"
         >
           <span
@@ -214,10 +214,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="nextui-c-dZPNrK nextui-c-dZPNrK-fkvkLX-animated-true"
+      class="nextui-c-jBUsJN nextui-c-jBUsJN-TKDXA-animated-true"
     >
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
@@ -230,7 +230,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-ldmKBv nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
         data-state="ready"
       >
         <span
diff --git a/yarn.lock b/yarn.lock
index 56e3c353a0..b50f145d0e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3756,7 +3756,7 @@
     "@react-types/dialog" "^3.4.2"
     "@react-types/shared" "^3.14.0"
 
-"@react-aria/focus@3.7.0", "@react-aria/focus@^3.7.0":
+"@react-aria/focus@3.7.0", "@react-aria/focus@^3.6.1", "@react-aria/focus@^3.7.0":
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.7.0.tgz#6a90dc99da64bd145e3eeacf3097a29a0342f709"
   integrity sha512-LydZSLBLEUklakM0Ogdk17F3f/Uwaj5Nl1mfcK8HhrroGT8A8XH0KjA9D6gM6JGHgxZemx0ufOgxhQZeBGQMQw==
@@ -3800,7 +3800,7 @@
     "@react-aria/utils" "^3.13.2"
     "@react-types/shared" "^3.14.0"
 
-"@react-aria/interactions@3.10.0", "@react-aria/interactions@^3.10.0":
+"@react-aria/interactions@3.10.0", "@react-aria/interactions@^3.10.0", "@react-aria/interactions@^3.9.1":
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.10.0.tgz#d60cc42c3904c1578f9c356fba4bab7003102dee"
   integrity sha512-Lp74VfF+EskT3IqK2MBMdJpJU48p60+YkMbgtoDF6LudNO8jw0nxcsvnimPriTSkZWINRpajG/9sIa0EIDcQKw==
@@ -3819,23 +3819,24 @@
     "@react-types/label" "^3.6.2"
     "@react-types/shared" "^3.14.0"
 
+"@react-aria/link@3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/link/-/link-3.3.1.tgz#92ba89f1f30b06b4aa84db05f2058bcddd862b47"
+  integrity sha512-so77s4IjZo8VGi85v6oDUzsQRoAwQH4LUUUpDLbKxEb5YaiN4/3yCVibeZrWzIzOTCOyLMXPbGwxHOUsl8EhVg==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "@react-aria/focus" "^3.6.1"
+    "@react-aria/interactions" "^3.9.1"
+    "@react-aria/utils" "^3.13.1"
+    "@react-types/link" "^3.3.1"
+    "@react-types/shared" "^3.13.1"
+
 "@react-aria/live-announcer@^3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@react-aria/live-announcer/-/live-announcer-3.1.1.tgz#40f340f6794fca42682fb308fe750ff56bf7c07f"
   integrity sha512-e7b+dRh1SUTla42vzjdbhGYkeLD7E6wIYjYaHW9zZ37rBkSqLHUhTigh3eT3k5NxFlDD/uRxTYuwaFnWQgR+4g==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/i18n" "^3.5.0"
-    "@react-aria/interactions" "^3.10.0"
-    "@react-aria/overlays" "^3.10.0"
-    "@react-aria/selection" "^3.10.0"
-    "@react-aria/utils" "^3.13.2"
-    "@react-stately/collections" "^3.4.2"
-    "@react-stately/menu" "^3.4.0"
-    "@react-stately/tree" "^3.3.2"
-    "@react-types/button" "^3.6.0"
-    "@react-types/menu" "^3.7.0"
-    "@react-types/shared" "^3.14.0"
 
 "@react-aria/menu@3.6.0":
   version "3.6.0"
@@ -3906,19 +3907,6 @@
   integrity sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==
   dependencies:
     "@babel/runtime" "^7.6.2"
-    "@react-aria/focus" "^3.7.0"
-    "@react-aria/grid" "^3.4.0"
-    "@react-aria/i18n" "^3.5.0"
-    "@react-aria/interactions" "^3.10.0"
-    "@react-aria/live-announcer" "^3.1.1"
-    "@react-aria/selection" "^3.10.0"
-    "@react-aria/utils" "^3.13.2"
-    "@react-stately/table" "^3.3.0"
-    "@react-stately/virtualizer" "^3.2.2"
-    "@react-types/checkbox" "^3.3.2"
-    "@react-types/grid" "^3.1.2"
-    "@react-types/shared" "^3.14.0"
-    "@react-types/table" "^3.3.0"
 
 "@react-aria/table@3.4.0":
   version "3.4.0"
@@ -3954,7 +3942,7 @@
     "@react-types/shared" "^3.14.0"
     "@react-types/switch" "^3.2.2"
 
-"@react-aria/utils@3.13.2", "@react-aria/utils@^3.13.2":
+"@react-aria/utils@3.13.2", "@react-aria/utils@^3.13.1", "@react-aria/utils@^3.13.2":
   version "3.13.2"
   resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.13.2.tgz#c28bc96e940a8a84c3e69a19f483c9f060584580"
   integrity sha512-VTI8tv9m/BxE/lPTNCZN1fcHuY540xm+HT1vg2ZQCryudUWvzQkHi+h0z32DhiGHhvRFIGdH/enf3psip7ZLTQ==
@@ -4168,6 +4156,14 @@
   dependencies:
     "@react-types/shared" "^3.14.0"
 
+"@react-types/link@^3.3.1":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@react-types/link/-/link-3.3.2.tgz#926097cebb173cb4bf4de9b1512290870a75159f"
+  integrity sha512-owkHLd639ZU1Tkw/aR53OXvVVMS1irfH2lcqptEVlIzQSLM24/3v6vuO5AaeAeqfF974xFnlOIKLdQ+HI6AURw==
+  dependencies:
+    "@react-aria/interactions" "^3.10.0"
+    "@react-types/shared" "^3.14.0"
+
 "@react-types/menu@3.7.0", "@react-types/menu@^3.7.0":
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/@react-types/menu/-/menu-3.7.0.tgz#632422d6024a36ab7920c1fceb064900d9f5a762"
@@ -4190,7 +4186,7 @@
   dependencies:
     "@react-types/shared" "^3.14.0"
 
-"@react-types/shared@3.14.0", "@react-types/shared@^3.14.0":
+"@react-types/shared@3.14.0", "@react-types/shared@^3.13.1", "@react-types/shared@^3.14.0":
   version "3.14.0"
   resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.14.0.tgz#240991d6672f32ecd2a172111e163be0fe0778f2"
   integrity sha512-K069Bh/P0qV3zUG8kqabeO8beAUlFdyVPvpcNVPjRl+0Q9NDS9mfdQbmUa0LqdVo5e6jRPdos77Ylflkrz8wcw==

From 880c25d88d847c934a0a2a857386040b4fc6cd1e Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 13 Aug 2022 10:29:02 -0300
Subject: [PATCH 074/106] refactor(react-dropdown-trigger): scale animation
 applied to the children directly, css fixes

---
 packages/react/src/avatar/avatar.styles.ts       |  3 +--
 packages/react/src/avatar/avatar.tsx             |  8 ++++----
 packages/react/src/button/button.styles.ts       |  3 +--
 packages/react/src/dropdown/dropdown.stories.tsx |  2 +-
 packages/react/src/dropdown/use-dropdown.ts      | 15 ++++++++++++---
 packages/react/src/popover/popover-trigger.tsx   |  2 +-
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/avatar/avatar.styles.ts b/packages/react/src/avatar/avatar.styles.ts
index cdb67aada4..7587f273f2 100644
--- a/packages/react/src/avatar/avatar.styles.ts
+++ b/packages/react/src/avatar/avatar.styles.ts
@@ -1,5 +1,5 @@
 import {styled, VariantProps} from "../theme/stitches.config";
-import {cssFocusVisible, sharedDialogPopup} from "../theme/shared-css";
+import {cssFocusVisible} from "../theme/shared-css";
 
 export const StyledAvatar = styled(
   "span",
@@ -315,7 +315,6 @@ export const StyledAvatar = styled(
     },
   },
   cssFocusVisible,
-  sharedDialogPopup,
 );
 
 export type AvatarVariantsProps = VariantProps<typeof StyledAvatar>;
diff --git a/packages/react/src/avatar/avatar.tsx b/packages/react/src/avatar/avatar.tsx
index cce3aec688..6ae0f17528 100644
--- a/packages/react/src/avatar/avatar.tsx
+++ b/packages/react/src/avatar/avatar.tsx
@@ -70,7 +70,7 @@ export const Avatar = React.forwardRef((props: AvatarProps, ref: ReactRef<HTMLSp
         },
         className,
       )}
-      css={mergeProps(
+      css={
         as === "button"
           ? {
               // reset button styles
@@ -78,10 +78,10 @@ export const Avatar = React.forwardRef((props: AvatarProps, ref: ReactRef<HTMLSp
               outline: "none",
               border: "none",
               cursor: "pointer",
+              ...css,
             }
-          : {},
-        css as any,
-      )}
+          : css
+      }
       data-state={getState}
       isFocusVisible={isFocusVisible}
     >
diff --git a/packages/react/src/button/button.styles.ts b/packages/react/src/button/button.styles.ts
index e7966ea052..63fc4376bc 100644
--- a/packages/react/src/button/button.styles.ts
+++ b/packages/react/src/button/button.styles.ts
@@ -1,5 +1,5 @@
 import {styled, VariantProps} from "../theme/stitches.config";
-import {cssFocusVisible, sharedDialogPopup} from "../theme/shared-css";
+import {cssFocusVisible} from "../theme/shared-css";
 import {StyledDrip} from "../utils/drip";
 
 export const StyledButton = styled(
@@ -819,7 +819,6 @@ export const StyledButton = styled(
     },
   },
   cssFocusVisible,
-  sharedDialogPopup,
 );
 
 export type ButtonVariantsProps = VariantProps<typeof StyledButton>;
diff --git a/packages/react/src/dropdown/dropdown.stories.tsx b/packages/react/src/dropdown/dropdown.stories.tsx
index c1bc9254cc..2879cb6e2d 100644
--- a/packages/react/src/dropdown/dropdown.stories.tsx
+++ b/packages/react/src/dropdown/dropdown.stories.tsx
@@ -363,7 +363,7 @@ export const Sections = () => (
 export const CustomTrigger = () => (
   <Grid.Container gap={2} justify="center">
     <Grid>
-      <Dropdown placement="bottom-right">
+      <Dropdown disableTriggerPressedAnimation={false} placement="bottom-right">
         <Dropdown.Trigger>
           <Avatar
             bordered
diff --git a/packages/react/src/dropdown/use-dropdown.ts b/packages/react/src/dropdown/use-dropdown.ts
index 4c78ba4b27..b7b33e8283 100644
--- a/packages/react/src/dropdown/use-dropdown.ts
+++ b/packages/react/src/dropdown/use-dropdown.ts
@@ -62,14 +62,23 @@ export function useDropdown(props: UseDropdownProps = {}) {
 
   const getMenuTriggerProps = useCallback(
     (props = {}, _ref = null) => {
-      const realTriggerProps = triggerRefProp?.current
+      const {css = {}, ...realTriggerProps} = triggerRefProp?.current
         ? mergeProps(menuTriggerProps, props)
         : mergeProps(props, menuTriggerProps);
 
       return {
-        ...realTriggerProps,
-        "data-pressed-transition-disabled": disableTriggerPressedAnimation,
         ref: mergeRefs(triggerRef, _ref),
+        css: !disableTriggerPressedAnimation
+          ? {
+              backfaceVisibility: "hidden",
+              '&[aria-haspopup="true"]&[aria-expanded="true"]': {
+                opacity: 0.7,
+                transform: "translateZ(0) scale(0.97)",
+              },
+              ...css,
+            }
+          : css,
+        ...realTriggerProps,
       };
     },
     [triggerRef, triggerRefProp, menuTriggerProps, disableTriggerPressedAnimation],
diff --git a/packages/react/src/popover/popover-trigger.tsx b/packages/react/src/popover/popover-trigger.tsx
index 7277da8f3e..c9465d6266 100644
--- a/packages/react/src/popover/popover-trigger.tsx
+++ b/packages/react/src/popover/popover-trigger.tsx
@@ -40,7 +40,7 @@ const PopoverTrigger = React.forwardRef(
     return React.cloneElement(
       child,
       getTriggerProps(
-        mergeProps(child.props, hasNextUIButton ? {onPress, ...otherProps} : buttonProps),
+        mergeProps(child.props, hasNextUIButton ? {onPress} : buttonProps, otherProps),
         child.ref,
       ),
     );

From 4c946fde1988bc9a42193ba43c7bc29ad3a9cabf Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 13 Aug 2022 17:55:08 -0300
Subject: [PATCH 075/106] feat(react-navbar): dropdown improved

---
 .../docs/content/docs/components/dropdown.mdx |  27 ++--
 .../src/dropdown/base/dropdown-item-base.tsx  |   6 +
 .../react/src/dropdown/dropdown-button.tsx    |  15 ++-
 packages/react/src/dropdown/dropdown-item.tsx |   6 +
 .../react/src/dropdown/dropdown-trigger.tsx   |  13 +-
 .../react/src/dropdown/dropdown.styles.ts     |  17 ++-
 packages/react/src/dropdown/use-dropdown.ts   |   5 +-
 packages/react/src/navbar/navbar.stories.tsx  | 102 ++++++++++++--
 packages/react/src/popover/popover.styles.ts  |  13 +-
 packages/react/src/theme/shared-css.ts        |  11 --
 packages/react/src/user/user.styles.ts        |   4 +-
 packages/react/src/utils/icons.tsx            | 124 ++++++++++++++++++
 12 files changed, 283 insertions(+), 60 deletions(-)

diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx
index 5ebefe866f..53522a515c 100644
--- a/apps/docs/content/docs/components/dropdown.mdx
+++ b/apps/docs/content/docs/components/dropdown.mdx
@@ -238,19 +238,20 @@ import { Dropdown } from "@nextui-org/react";
 
 #### Dropdown.Item Props
 
-| Attribute         | Type                                                | Description                                                      | Default   |
-| ----------------- | --------------------------------------------------- | ---------------------------------------------------------------- | --------- |
-| **key**           | [Key](https://reactjs.org/docs/lists-and-keys.html) | The unique key for the menu item.                                | `false`   |
-| **description**   | `string`                                            | Description text element inside the dropdown menu item.          | -         |
-| **command**       | `string`                                            | Right-aligned label text content, useful for displaying hotkeys. | -         |
-| **icon**          | `ReactNode`                                         | The icon to render before the dropdown menu item's label.        | -         |
-| **dividerWeight** | [NormalWeights](#normal-weights)                    | The dropdown item divider height                                 | `light`   |
-| **color**         | [SimpleColors](#simple-colors)                      | The dropdown item color                                          | `default` |
-| **textColor**     | [SimpleColors](#simple-colors)                      | The dropdown item text color                                     | `default` |
-| **variant**       | [DropdownVariant](#dropdown-variants)               | The dropdown item variation                                      | `flat`    |
-| **withDivider**   | `boolean`                                           | Whether the dropdown item should have a border on top            | `false`   |
-| **css**           | `Stitches.CSS`                                      | Override Default CSS style.                                      | -         |
-| **as**            | `keyof JSX.IntrinsicElements`                       | Changes which tag component outputs.                             | `li`      |
+| Attribute               | Type                                                | Description                                                      | Default   |
+| ----------------------- | --------------------------------------------------- | ---------------------------------------------------------------- | --------- |
+| **key**                 | [Key](https://reactjs.org/docs/lists-and-keys.html) | The unique key for the menu item.                                | `false`   |
+| **description**         | `string`                                            | Description text element inside the dropdown menu item.          | -         |
+| **command**             | `string`                                            | Right-aligned label text content, useful for displaying hotkeys. | -         |
+| **icon**                | `ReactNode`                                         | The icon to render before the dropdown menu item's label.        | -         |
+| **dividerWeight**       | [NormalWeights](#normal-weights)                    | The dropdown item divider height                                 | `light`   |
+| **color**               | [SimpleColors](#simple-colors)                      | The dropdown item color                                          | `default` |
+| **textColor**           | [SimpleColors](#simple-colors)                      | The dropdown item text color                                     | `default` |
+| **variant**             | [DropdownVariant](#dropdown-variants)               | The dropdown item variation                                      | `flat`    |
+| **withDivider**         | `boolean`                                           | Whether the dropdown item should have a border on top            | `false`   |
+| **showFullDescription** | `boolean`                                           | Whether the item description should be truncated or not.         | `false`   |
+| **css**                 | `Stitches.CSS`                                      | Override Default CSS style.                                      | -         |
+| **as**                  | `keyof JSX.IntrinsicElements`                       | Changes which tag component outputs.                             | `li`      |
 
 <Spacer y={1} />
 
diff --git a/packages/react/src/dropdown/base/dropdown-item-base.tsx b/packages/react/src/dropdown/base/dropdown-item-base.tsx
index 0fdd42ec2a..9a388f2a82 100644
--- a/packages/react/src/dropdown/base/dropdown-item-base.tsx
+++ b/packages/react/src/dropdown/base/dropdown-item-base.tsx
@@ -16,9 +16,15 @@ export type DropdownItemBaseProps<T = object> = ItemProps<T> & {
   command?: string;
   description?: string;
   icon?: ReactNode;
+  /**
+   * Whether the item description should be truncated or not.
+   */
+  showFullDescription?: boolean;
   className?: string;
 };
 
 const DropdownItem = Item as (props: DropdownItemBaseProps) => JSX.Element;
 
+DropdownItem.toString = () => ".nextui-dropdown-item-base";
+
 export default DropdownItem;
diff --git a/packages/react/src/dropdown/dropdown-button.tsx b/packages/react/src/dropdown/dropdown-button.tsx
index 76040940c3..77c71dac2b 100644
--- a/packages/react/src/dropdown/dropdown-button.tsx
+++ b/packages/react/src/dropdown/dropdown-button.tsx
@@ -35,18 +35,19 @@ const DropdownButton = React.forwardRef(
     const isAnimated = useMemo(() => animated || !disableAnimation, [animated, disableAnimation]);
 
     return (
-      <DropdownTrigger>
+      <DropdownTrigger
+        css={{
+          "& .nextui-button-icon-right, & .nextui-button-text-right": {
+            pointerEvents: "none",
+          },
+          ...css,
+        }}
+      >
         <Button
           ref={buttonRef}
           animated={isAnimated}
           auto={auto}
           className={clsx("nextui-dropdown-button", className)}
-          css={{
-            "& .nextui-button-icon-right, & .nextui-button-text-right": {
-              pointerEvents: "none",
-            },
-            ...css,
-          }}
           iconRight={getIconRight}
           iconRightCss={{
             mt: "$1",
diff --git a/packages/react/src/dropdown/dropdown-item.tsx b/packages/react/src/dropdown/dropdown-item.tsx
index 519fd05d5c..822480127c 100644
--- a/packages/react/src/dropdown/dropdown-item.tsx
+++ b/packages/react/src/dropdown/dropdown-item.tsx
@@ -38,6 +38,10 @@ interface Props<T> extends FocusableProps {
   icon?: ReactNode;
   dividerWeight?: NormalWeights;
   as?: keyof JSX.IntrinsicElements;
+  /**
+   * Whether the item description should be truncated or not.
+   */
+  showFullDescription?: boolean;
   onAction?: (key: Key) => void;
 }
 
@@ -60,6 +64,7 @@ const DropdownItem = <T extends object>({
   isVirtualized,
   withDivider,
   dividerWeight,
+  showFullDescription,
   className,
   onAction,
 }: DropdownItemProps<T>) => {
@@ -161,6 +166,7 @@ const DropdownItem = <T extends object>({
       isSelectable={isSelectable}
       isSelected={isSelected}
       shouldShowOutline={isFocusVisible && variant === "shadow"}
+      showFullDescription={showFullDescription || item.props.showFullDescription}
       textColor={getTextColor}
       variant={item.props.variant || variant}
       withDescription={!!withDescription}
diff --git a/packages/react/src/dropdown/dropdown-trigger.tsx b/packages/react/src/dropdown/dropdown-trigger.tsx
index ce86b138c4..5bc8d28ea0 100644
--- a/packages/react/src/dropdown/dropdown-trigger.tsx
+++ b/packages/react/src/dropdown/dropdown-trigger.tsx
@@ -3,16 +3,22 @@ import type {ReactRef} from "../utils/refs";
 import React from "react";
 
 import Popover from "../popover";
+import {CSS} from "../theme";
 import {__DEV__} from "../utils/assertion";
 
 import {useDropdownContext} from "./dropdown-context";
 
+export interface DropdownTriggerProps {
+  children?: React.ReactNode;
+  css?: CSS;
+}
+
 /**
  * DropdownTrigger opens the popover's content. It must be an interactive element
  * such as `button` or `a`.
  */
 const DropdownTrigger = React.forwardRef(
-  (props: React.PropsWithChildren<{}>, _: ReactRef<HTMLElement>) => {
+  (props: DropdownTriggerProps, _: ReactRef<HTMLElement>) => {
     const {children, ...otherProps} = props;
     const {getMenuTriggerProps} = useDropdownContext();
 
@@ -30,7 +36,4 @@ type DropdownTriggerComponent<T, P = {}> = React.ForwardRefExoticComponent<
   React.PropsWithoutRef<P> & React.RefAttributes<T>
 >;
 
-export default DropdownTrigger as DropdownTriggerComponent<
-  HTMLElement,
-  React.PropsWithChildren<{}>
->;
+export default DropdownTrigger as DropdownTriggerComponent<HTMLElement, DropdownTriggerProps>;
diff --git a/packages/react/src/dropdown/dropdown.styles.ts b/packages/react/src/dropdown/dropdown.styles.ts
index 0555c01efc..a6d9ab8e47 100644
--- a/packages/react/src/dropdown/dropdown.styles.ts
+++ b/packages/react/src/dropdown/dropdown.styles.ts
@@ -5,9 +5,12 @@ export const StyledDropdownMenu = styled("ul", {
   $$dropdownItemHeight: "$space$13",
   $$dropdownMenuPadding: "$space$4",
   $$dropdownMenuWidth: "250px",
+  $$dropdownMenuMinWidth: "250px",
   listStyle: "none",
   position: "relative",
-  width: "$$dropdownMenuWidth",
+  maxWidth: "$$dropdownMenuWidth",
+  minWidth: "$$dropdownMenuMinWidth",
+  width: "100%",
   p: "$$dropdownMenuPadding",
   m: 0,
   outline: "none",
@@ -48,7 +51,7 @@ export const StyledDropdownItemDescription = styled("span", {
   fontSize: "$xs",
   color: "$$dropdownItemDescriptionColor",
   truncateText: "calc($$dropdownMenuWidth * 0.9)",
-  transition: "color 0.26s ease 0s",
+  transition: "color 0.12s ease 0s",
   variants: {
     hasIcon: {
       true: {
@@ -285,6 +288,16 @@ export const StyledDropdownItem = styled(
           $$dropdownItemBorderWeight: "$borderWeights$black",
         },
       },
+      showFullDescription: {
+        true: {
+          [`& ${StyledDropdownItemDescription}`]: {
+            mt: "$2",
+            overflow: "visible",
+            textOverflow: "visible",
+            whiteSpace: "normal",
+          },
+        },
+      },
       disableAnimation: {
         true: {
           transition: "none",
diff --git a/packages/react/src/dropdown/use-dropdown.ts b/packages/react/src/dropdown/use-dropdown.ts
index b7b33e8283..ad0bb51188 100644
--- a/packages/react/src/dropdown/use-dropdown.ts
+++ b/packages/react/src/dropdown/use-dropdown.ts
@@ -62,7 +62,7 @@ export function useDropdown(props: UseDropdownProps = {}) {
 
   const getMenuTriggerProps = useCallback(
     (props = {}, _ref = null) => {
-      const {css = {}, ...realTriggerProps} = triggerRefProp?.current
+      const {css, ...realTriggerProps} = triggerRefProp?.current
         ? mergeProps(menuTriggerProps, props)
         : mergeProps(props, menuTriggerProps);
 
@@ -70,9 +70,9 @@ export function useDropdown(props: UseDropdownProps = {}) {
         ref: mergeRefs(triggerRef, _ref),
         css: !disableTriggerPressedAnimation
           ? {
-              backfaceVisibility: "hidden",
               '&[aria-haspopup="true"]&[aria-expanded="true"]': {
                 opacity: 0.7,
+                backfaceVisibility: "hidden",
                 transform: "translateZ(0) scale(0.97)",
               },
               ...css,
@@ -92,6 +92,7 @@ export function useDropdown(props: UseDropdownProps = {}) {
     onClose: state.close,
     autoFocus: state.focusStrategy || true,
     disableAnimation,
+    disableTriggerPressedAnimation,
     menuRef,
     borderWeight,
     menuPopoverRef,
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 3717c70811..8c8bb4ba5c 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import {Meta} from "@storybook/react";
 
 import {Link, Text, Button, Spacer, Dropdown} from "../index";
+import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "../utils/icons";
 import {styled} from "../theme/stitches.config";
 
 import Navbar from "./index";
@@ -271,6 +272,16 @@ export const WithDropdown = () => {
     "Support",
   ];
 
+  const icons = {
+    chevron: <ChevronDown fill="currentColor" size={16} />,
+    scale: <Scale fill="var(--nextui-colors-warning)" size={30} />,
+    lock: <Lock fill="var(--nextui-colors-success)" size={30} />,
+    activity: <Activity fill="var(--nextui-colors-secondary)" size={30} />,
+    flash: <Flash fill="var(--nextui-colors-primary)" size={30} />,
+    server: <Server fill="var(--nextui-colors-success)" size={30} />,
+    user: <TagUser fill="var(--nextui-colors-error)" size={30} />,
+  };
+
   return (
     <App ref={parentRef}>
       <Navbar isBordered parentRef={parentRef} variant="sticky">
@@ -285,22 +296,93 @@ export const WithDropdown = () => {
         </Navbar.Content>
         <Navbar.Content
           enableCursorHighlight
-          isCursorHighlightRounded
+          activeColor="secondary"
           hideIn="sm"
           variant="underline"
         >
-          <Dropdown disableTriggerPressedAnimation>
+          <Dropdown isBordered>
             <Navbar.Item>
-              <Dropdown.Button auto light css={{px: 0}} ripple={false}>
+              <Dropdown.Button
+                auto
+                light
+                css={{
+                  px: 0,
+                  dflex: "center",
+                  svg: {pe: "none"},
+                }}
+                iconRight={icons.chevron}
+                ripple={false}
+              >
                 Features
               </Dropdown.Button>
             </Navbar.Item>
-            <Dropdown.Menu aria-label="Static Actions">
-              <Dropdown.Item key="new">New file</Dropdown.Item>
-              <Dropdown.Item key="copy">Copy link</Dropdown.Item>
-              <Dropdown.Item key="edit">Edit file</Dropdown.Item>
-              <Dropdown.Item key="delete" color="error">
-                Delete file
+            <Dropdown.Menu
+              aria-label="ACME features"
+              css={{
+                $$dropdownMenuWidth: "340px",
+                $$dropdownItemHeight: "70px",
+                "& .nextui-dropdown-item": {
+                  py: "$4",
+                  // dropdown item left icon
+                  svg: {
+                    color: "$secondary",
+                    mr: "$4",
+                  },
+                  // dropdown item title
+                  "& .nextui-dropdown-item-content": {
+                    w: "100%",
+                    fontWeight: "$semibold",
+                  },
+                },
+              }}
+            >
+              <Dropdown.Item
+                key="autoscaling"
+                showFullDescription
+                description="ACME scales apps to meet user demand, automagically, based on load."
+                icon={icons.scale}
+              >
+                Autoscaling
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="safe_and_sound"
+                showFullDescription
+                description="A secure mission control, without the policy headache. Permissions, 2FA, and more."
+                icon={icons.lock}
+              >
+                Safe and Sound
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="usage_metrics"
+                showFullDescription
+                description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+                icon={icons.activity}
+              >
+                Usage Metrics
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="production_ready"
+                showFullDescription
+                description="ACME runs on ACME, join us and others serving requests at web scale."
+                icon={icons.flash}
+              >
+                Production Ready
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="99_uptime"
+                showFullDescription
+                description="Applications stay on the grid with high availability and high uptime guarantees."
+                icon={icons.server}
+              >
+                +99% Uptime
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="supreme_support"
+                showFullDescription
+                description="Overcome any challenge with a supporting team ready to respond."
+                icon={icons.user}
+              >
+                +Supreme Support
               </Dropdown.Item>
             </Dropdown.Menu>
           </Dropdown>
@@ -316,7 +398,7 @@ export const WithDropdown = () => {
             Login
           </Navbar.Link>
           <Navbar.Item>
-            <Button auto flat as={Link} href="#">
+            <Button auto flat as={Link} color="secondary" href="#">
               Sign Up
             </Button>
           </Navbar.Item>
diff --git a/packages/react/src/popover/popover.styles.ts b/packages/react/src/popover/popover.styles.ts
index 0a92735b4d..a7ac95d5a7 100644
--- a/packages/react/src/popover/popover.styles.ts
+++ b/packages/react/src/popover/popover.styles.ts
@@ -8,11 +8,13 @@ export const appearanceIn = keyframes({
   },
   "60%": {
     opacity: 0.75,
-    transform: "scale(1.05)",
+    /* Avoid blurriness */
+    backfaceVisibility: "hidden",
+    webkitFontSmoothing: "antialiased",
+    transform: "translateZ(0) scale(1.05)",
   },
   "100%": {
     opacity: 1,
-    transform: "scale(1)",
   },
 });
 
@@ -67,6 +69,7 @@ export const StyledPopoverContentContainer = styled(
       animationDirection: "normal",
       animationDuration: "250ms",
     },
+
     "&.nextui-popover-content-leave": {
       animationName: appearanceOut,
       animationTimingFunction: "ease-in",
@@ -115,10 +118,6 @@ export const StyledPopoverContentContainer = styled(
   cssFocusVisible,
 );
 
-export const StyledPopoverContent = styled("div", {
-  /* Avoid blurriness */
-  transform: "translateZ(0)",
-  backfaceVisibility: "hidden",
-});
+export const StyledPopoverContent = styled("div", {});
 
 export type PopoverContentVariantsProps = VariantProps<typeof StyledPopoverContentContainer>;
diff --git a/packages/react/src/theme/shared-css.ts b/packages/react/src/theme/shared-css.ts
index e75b4b69e7..79ffed77b1 100644
--- a/packages/react/src/theme/shared-css.ts
+++ b/packages/react/src/theme/shared-css.ts
@@ -47,14 +47,3 @@ export const sharedVisuallyHidden = css({
   whiteSpace: "nowrap",
   position: "absolute",
 });
-
-export const sharedDialogPopup = css(
-  {
-    // for dropdown triggers
-    '&[aria-haspopup="true"]&[aria-expanded="true"]&[data-pressed-transition-disabled="false"]': {
-      opacity: 0.7,
-      transform: "scale(0.97)",
-    },
-  },
-  cssNoBlurriness,
-);
diff --git a/packages/react/src/user/user.styles.ts b/packages/react/src/user/user.styles.ts
index 10c7068cce..189bb80680 100644
--- a/packages/react/src/user/user.styles.ts
+++ b/packages/react/src/user/user.styles.ts
@@ -1,5 +1,5 @@
 import {styled} from "../theme/stitches.config";
-import {cssFocusVisible, sharedDialogPopup, cssNoBlurriness} from "../theme/shared-css";
+import {cssFocusVisible} from "../theme/shared-css";
 
 export const StyledUser = styled(
   "div",
@@ -16,8 +16,6 @@ export const StyledUser = styled(
     },
   },
   cssFocusVisible,
-  cssNoBlurriness,
-  sharedDialogPopup,
 );
 
 export const StyledUserInfo = styled("div", {
diff --git a/packages/react/src/utils/icons.tsx b/packages/react/src/utils/icons.tsx
index ae0b9ab7ad..0ff22336e7 100644
--- a/packages/react/src/utils/icons.tsx
+++ b/packages/react/src/utils/icons.tsx
@@ -715,3 +715,127 @@ export const CartIcon: React.FC<IconProps> = ({
     </svg>
   );
 };
+
+export const Flash: React.FC<IconProps> = ({
+  fill = "currentColor",
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.09 13.28h3.09v7.2c0 1.68.91 2.02 2.02.76l7.57-8.6c.93-1.05.54-1.92-.87-1.92h-3.09v-7.2c0-1.68-.91-2.02-2.02-.76l-7.57 8.6c-.92 1.06-.53 1.92.87 1.92Z"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const Server: React.FC<IconProps> = ({
+  fill = "currentColor",
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M19.32 10H4.69c-1.48 0-2.68-1.21-2.68-2.68V4.69c0-1.48 1.21-2.68 2.68-2.68h14.63C20.8 2.01 22 3.22 22 4.69v2.63C22 8.79 20.79 10 19.32 10ZM19.32 22H4.69c-1.48 0-2.68-1.21-2.68-2.68v-2.63c0-1.48 1.21-2.68 2.68-2.68h14.63c1.48 0 2.68 1.21 2.68 2.68v2.63c0 1.47-1.21 2.68-2.68 2.68ZM6 5v2M10 5v2M6 17v2M10 17v2M14 6h4M14 18h4"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const TagUser: React.FC<IconProps> = ({
+  fill = "currentColor",
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M18 18.86h-.76c-.8 0-1.56.31-2.12.87l-1.71 1.69c-.78.77-2.05.77-2.83 0l-1.71-1.69c-.56-.56-1.33-.87-2.12-.87H6c-1.66 0-3-1.33-3-2.97V4.98c0-1.64 1.34-2.97 3-2.97h12c1.66 0 3 1.33 3 2.97v10.91c0 1.63-1.34 2.97-3 2.97Z"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+      <path
+        d="M12 10a2.33 2.33 0 1 0 0-4.66A2.33 2.33 0 0 0 12 10ZM16 15.66c0-1.8-1.79-3.26-4-3.26s-4 1.46-4 3.26"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const Scale: React.FC<IconProps> = ({
+  fill = "currentColor",
+  size,
+  height,
+  width,
+  ...props
+}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7ZM18 6 6 18"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M18 10V6h-4M6 14v4h4"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};

From 680e36866920c4f952aded9fbe2822399983ba92 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 13 Aug 2022 21:25:36 -0300
Subject: [PATCH 076/106] fix(react-button): #482  Button uses deprecated
 onClick instead of onPress

---
 .../__snapshots__/group.test.tsx.snap         | 32 ++++----
 .../__snapshots__/index.test.tsx.snap         | 18 ++---
 .../__snapshots__/group.test.tsx.snap         |  8 +-
 .../__snapshots__/icon.test.tsx.snap          |  6 +-
 .../react/src/button/__tests__/group.test.tsx | 19 +++--
 .../react/src/button/__tests__/index.test.tsx | 73 +++++++++++++------
 packages/react/src/button/button.tsx          | 20 +++--
 .../__snapshots__/group.test.tsx.snap         | 32 ++++----
 .../__snapshots__/index.test.tsx.snap         | 40 +++++-----
 .../__snapshots__/index.test.tsx.snap         |  8 +-
 .../__snapshots__/password.test.tsx.snap      |  2 +-
 .../__snapshots__/index.test.tsx.snap         |  4 +-
 .../__snapshots__/index.test.tsx.snap         |  4 +-
 packages/react/src/use-drip/use-drip.ts       |  2 +-
 .../__snapshots__/index.test.tsx.snap         |  8 +-
 15 files changed, 151 insertions(+), 125 deletions(-)

diff --git a/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
index 673f04b4d8..3bf351ecb9 100644
--- a/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/avatar/__tests__/__snapshots__/group.test.tsx.snap
@@ -6,10 +6,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="nextui-c-jBUsJN"
+        class="nextui-c-cpgyzW"
       >
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
           data-state="ready"
         >
           <span
@@ -22,7 +22,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
           data-state="ready"
         >
           <span
@@ -35,7 +35,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
           data-state="ready"
         >
           <span
@@ -48,7 +48,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
           data-state="ready"
         >
           <span
@@ -65,10 +65,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="nextui-c-jBUsJN"
+      class="nextui-c-cpgyzW"
     >
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
         data-state="ready"
       >
         <span
@@ -81,7 +81,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
         data-state="ready"
       >
         <span
@@ -94,7 +94,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
         data-state="ready"
       >
         <span
@@ -107,7 +107,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-dbZNQr-bordered-true nextui-c-gEEnVX-gBVgtO-stacked-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-MtAEf-cv nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
         data-state="ready"
       >
         <span
@@ -181,10 +181,10 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="nextui-c-jBUsJN nextui-c-jBUsJN-TKDXA-animated-true"
+        class="nextui-c-cpgyzW nextui-c-cpgyzW-jErlEr-animated-true"
       >
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
           data-state="ready"
         >
           <span
@@ -197,7 +197,7 @@ Object {
           </span>
         </span>
         <span
-          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+          class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
           data-state="ready"
         >
           <span
@@ -214,10 +214,10 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="nextui-c-jBUsJN nextui-c-jBUsJN-TKDXA-animated-true"
+      class="nextui-c-cpgyzW nextui-c-cpgyzW-jErlEr-animated-true"
     >
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
         data-state="ready"
       >
         <span
@@ -230,7 +230,7 @@ Object {
         </span>
       </span>
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
         data-state="ready"
       >
         <span
diff --git a/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
index d31422f24a..9702d29319 100644
--- a/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/avatar/__tests__/__snapshots__/index.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Avatar should render component of a specified size 1`] = `
 LoadedCheerio {
   "0": <span
-    class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-ihFPSGE-css only-text-avatar"
+    class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-ihFPSGE-css only-text-avatar"
     data-state="ready"
   >
     <span
@@ -41,12 +41,12 @@ LoadedCheerio {
 }
 `;
 
-exports[`Avatar should render correctly with an icon 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span><span class=\\"nextui-avatar-icon\\"><svg class=\\"\\"></svg></span></span>"`;
+exports[`Avatar should render correctly with an icon 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span><span class=\\"nextui-avatar-icon\\"><svg class=\\"\\"></svg></span></span>"`;
 
 exports[`Avatar should render text element 1`] = `
 LoadedCheerio {
   "0": <span
-    class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+    class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
     data-state="ready"
   >
     <span
@@ -87,7 +87,7 @@ LoadedCheerio {
 exports[`Avatar should render text element 2`] = `
 LoadedCheerio {
   "0": <span
-    class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar"
+    class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar"
     data-state="ready"
   >
     <span
@@ -130,12 +130,12 @@ LoadedCheerio {
 }
 `;
 
-exports[`Avatar should work correctly with different sizes 1`] = `"<div><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-jROyhw-size-xs nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-bHlgBq-size-sm nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-lmZTtQ-size-lg nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-ehDSPw-size-xl nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
+exports[`Avatar should work correctly with different sizes 1`] = `"<div><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-jROyhw-size-xs nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-bHlgBq-size-sm nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-lmZTtQ-size-lg nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-ehDSPw-size-xl nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
 
-exports[`Avatar should work with a gradient color 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-lcNuyd-color-gradient nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with a gradient color 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-lcNuyd-color-gradient nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
 
-exports[`Avatar should work with different colors 1`] = `"<div><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-eeabkr-color-primary nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-jzyGMN-color-secondary nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-fJMMFA-color-success nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-eCIbjl-color-warning nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-gYTGZH-color-error nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
+exports[`Avatar should work with different colors 1`] = `"<div><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-eeabkr-color-primary nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-jzyGMN-color-secondary nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-fJMMFA-color-success nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-eCIbjl-color-warning nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span><span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-gYTGZH-color-error nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span></div>"`;
 
-exports[`Avatar should work with pointer 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-hpLzEY-pointer-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with pointer 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-hpLzEY-pointer-true nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
 
-exports[`Avatar should work with zoomed 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-OUZAS-zoomed-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
+exports[`Avatar should work with zoomed 1`] = `"<span class=\\"nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-gEEnVX-OUZAS-zoomed-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar\\" data-state=\\"ready\\"><span class=\\"nextui-avatar-bg\\"></span></span>"`;
diff --git a/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
index ef27aca3d9..1c921e9cdb 100644
--- a/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/button/__tests__/__snapshots__/group.test.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ButtonGroup buttons should be displayed vertically 1`] = `"<div class=\\"nextui-c-ghxZjq nextui-c-ghxZjq-eUvgfP-vertical-true nextui-c-ghxZjq-gimGqK-size-md\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action1</span></button><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action2</span></button></div>"`;
+exports[`ButtonGroup buttons should be displayed vertically 1`] = `"<div class=\\"nextui-c-kGDNMl nextui-c-kGDNMl-hFdVks-vertical-true nextui-c-kGDNMl-gimGqK-size-md\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action1</span></button><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action2</span></button></div>"`;
 
-exports[`ButtonGroup props should be passed to each button 1`] = `"<div class=\\"nextui-c-ghxZjq nextui-c-ghxZjq-gAAHyH-vertical-false nextui-c-ghxZjq-iAoIqM-size-xs\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[`ButtonGroup props should be passed to each button 1`] = `"<div class=\\"nextui-c-kGDNMl nextui-c-kGDNMl-juzAIU-vertical-false nextui-c-kGDNMl-iAoIqM-size-xs\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
-exports[`ButtonGroup props should be passed to each button 2`] = `"<div class=\\"nextui-c-ghxZjq nextui-c-ghxZjq-gAAHyH-vertical-false nextui-c-ghxZjq-iAoIqM-size-xs\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-cyFBRX-flat-true nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-iWjDFM-gmvfdi-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[`ButtonGroup props should be passed to each button 2`] = `"<div class=\\"nextui-c-kGDNMl nextui-c-kGDNMl-juzAIU-vertical-false nextui-c-kGDNMl-iAoIqM-size-xs\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-iWjDFM-hfnhFm-color-success nextui-c-iWjDFM-imrJwH-size-xs nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-cyFBRX-flat-true nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gNZcsS-cv nextui-c-iWjDFM-gmvfdi-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
-exports[`ButtonGroup should render correctly 1`] = `"<div class=\\"nextui-c-ghxZjq nextui-c-ghxZjq-gAAHyH-vertical-false nextui-c-ghxZjq-gimGqK-size-md\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
+exports[`ButtonGroup should render correctly 1`] = `"<div class=\\"nextui-c-kGDNMl nextui-c-kGDNMl-juzAIU-vertical-false nextui-c-kGDNMl-gimGqK-size-md\\"><button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-exaRme-auto-true nextui-c-iWjDFM-gglxka-cv nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-button-text\\">action</span></button></div>"`;
 
 exports[`ButtonGroup should render different variants 1`] = `ReactWrapper {}`;
 
diff --git a/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap b/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
index 85c0c9677c..205d63de72 100644
--- a/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
+++ b/packages/react/src/button/__tests__/__snapshots__/icon.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ButtonIcon should render correctly 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-iPJLV-css nextui-button-icon\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-left\\">action</div></button>"`;
+exports[`ButtonIcon should render correctly 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-iPJLV-css nextui-button-icon\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-left\\">action</div></button>"`;
 
-exports[`ButtonIcon should work with right 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-right\\">action</div></button>"`;
+exports[`ButtonIcon should work with right 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right\\"><svg></svg></span><div class=\\"nextui-button-text nextui-button-text-right\\">action</div></button>"`;
 
-exports[`ButtonIcon should work without text 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-bQrkqa-isChildLess-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iyYGWO-isSingle-true nextui-c-bDGMeb-bVsTEo-cv nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right nextui-button-icon-single\\"><svg></svg></span></button>"`;
+exports[`ButtonIcon should work without text 1`] = `"<button class=\\"nextui-c-iWjDFM nextui-c-PJLV nextui-c-iWjDFM-hkKLfu-color-default nextui-c-iWjDFM-gkIlwi-size-md nextui-c-iWjDFM-cwXrJp-borderWeight-normal nextui-c-iWjDFM-bQrkqa-isChildLess-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-iWjDFM-iPJLV-css nextui-button nextui-button--ready\\" data-state=\\"ready\\" type=\\"button\\"><span class=\\"nextui-c-bDGMeb nextui-c-bDGMeb-jeNDWm-isRight-true nextui-c-bDGMeb-iyYGWO-isSingle-true nextui-c-bDGMeb-bVsTEo-cv nextui-c-bDGMeb-iPJLV-css nextui-button-icon nextui-button-icon-right nextui-button-icon-single\\"><svg></svg></span></button>"`;
diff --git a/packages/react/src/button/__tests__/group.test.tsx b/packages/react/src/button/__tests__/group.test.tsx
index 633f936055..cbc85ef1ac 100644
--- a/packages/react/src/button/__tests__/group.test.tsx
+++ b/packages/react/src/button/__tests__/group.test.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import {mount} from "enzyme";
+import {render} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import Button from "../index";
 import {nativeEvent} from "../../../tests/utils";
@@ -31,17 +33,18 @@ describe("ButtonGroup", () => {
 
   it("should ignore events when group disabled", () => {
     const handler = jest.fn();
-    const wrapper = mount(
-      <Button.Group>
-        <Button onClick={handler}>action</Button>
+    const wrapper = render(
+      <Button.Group disabled>
+        <Button data-testid="button-test" onClick={handler}>
+          action
+        </Button>
       </Button.Group>,
     );
 
-    wrapper.find("button").simulate("click", nativeEvent);
-    expect(handler).toHaveBeenCalledTimes(1);
-    wrapper.setProps({disabled: true});
-    wrapper.find("button").simulate("click", nativeEvent);
-    expect(handler).toHaveBeenCalledTimes(1);
+    let button = wrapper.getByTestId("button-test");
+
+    userEvent.click(button);
+    expect(handler).toBeCalledTimes(0);
   });
 
   it("buttons should be displayed vertically", () => {
diff --git a/packages/react/src/button/__tests__/index.test.tsx b/packages/react/src/button/__tests__/index.test.tsx
index 1b91b0ca89..08d789d6b0 100644
--- a/packages/react/src/button/__tests__/index.test.tsx
+++ b/packages/react/src/button/__tests__/index.test.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import {mount} from "enzyme";
 import userEvent from "@testing-library/user-event";
+import {render} from "@testing-library/react";
 
 import Button from "../index";
 
@@ -89,38 +90,62 @@ describe("Button", () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it("should trigger callback function", () => {
-    const WrapperButton = () => {
-      const [state, setState] = React.useState<string>("state1");
+  it("should trigger onPress function", () => {
+    let onPressFn = jest.fn();
+    const wrapper = render(
+      <Button data-testid="button-test" onPress={onPressFn}>
+        action
+      </Button>,
+    );
 
-      return <Button onClick={() => setState("state2")}>{state}</Button>;
-    };
-    const wrapper = mount(<WrapperButton />);
+    let button = wrapper.getByTestId("button-test");
 
-    expect(wrapper.text()).toContain("state1");
+    userEvent.click(button);
+    expect(onPressFn).toBeCalledTimes(1);
+  });
 
-    wrapper.simulate("click");
-    userEvent.click(wrapper.find("button").getDOMNode());
-    expect(wrapper.text()).toContain("state2");
+  it("should trigger onClick function", () => {
+    let onClickFn = jest.fn();
+    const wrapper = render(
+      <Button data-testid="button-test" onClick={onClickFn}>
+        action
+      </Button>,
+    );
+
+    let button = wrapper.getByTestId("button-test");
+
+    userEvent.click(button);
+    expect(onClickFn).toBeCalledTimes(1);
   });
 
-  it("should ignore events when disabled", () => {
-    const WrapperButton = () => {
-      const [state, setState] = React.useState<string>("state1");
+  it("should show warning message when onClick is being used", () => {
+    let warnMessage = "";
+    const warnSpy = jest.spyOn(console, "warn").mockImplementation((msg) => (warnMessage = msg));
 
-      return (
-        <Button disabled onClick={() => setState("state2")}>
-          {state}
-        </Button>
-      );
-    };
-    const wrapper = mount(<WrapperButton />);
+    const wrapper = render(
+      <Button data-testid="button-test" onClick={() => {}}>
+        action
+      </Button>,
+    );
+    let button = wrapper.getByTestId("button-test");
 
-    expect(wrapper.text()).toContain("state1");
+    userEvent.click(button);
+    expect(warnMessage).toEqual("onClick is deprecated, please use onPress");
+    warnSpy.mockRestore();
+  });
 
-    userEvent.click(wrapper.find("button").getDOMNode());
-    expect(wrapper.text()).toContain("state1");
-    expect(wrapper.text()).not.toContain("state2");
+  it("should ignore events when disabled", () => {
+    let onClickFn = jest.fn();
+    const wrapper = render(
+      <Button disabled data-testid="button-test" onClick={onClickFn}>
+        action
+      </Button>,
+    );
+
+    let button = wrapper.getByTestId("button-test");
+
+    userEvent.click(button);
+    expect(onClickFn).toBeCalledTimes(0);
   });
 
   it("should remove expired events", () => {
diff --git a/packages/react/src/button/button.tsx b/packages/react/src/button/button.tsx
index 7434679555..5a37e60109 100644
--- a/packages/react/src/button/button.tsx
+++ b/packages/react/src/button/button.tsx
@@ -73,7 +73,7 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {
     css,
     iconLeftCss,
     iconRightCss,
-    onClick,
+    onClick: deprecatedOnClick,
     onPress,
     onPressStart,
     onPressEnd,
@@ -105,22 +105,21 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {
     ...otherProps
   } = filteredProps;
 
-  const handleDrip = (e: React.MouseEvent<HTMLButtonElement> | PressEvent) => {
+  const handleDrip = (e: React.MouseEvent<HTMLButtonElement> | PressEvent | Event) => {
     if (animated && ripple && buttonRef.current) {
       onDripClickHandler(e);
     }
   };
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    handleDrip(e);
-    onClick?.(e);
-  };
-
   const handlePress = (e: PressEvent) => {
     if (e.pointerType === "keyboard" || e.pointerType === "virtual") {
       handleDrip(e);
-      // TODO: take this out and deprecate onClick function for next release (only use the @react-aria/button impl)
-      onClick?.(e as any);
+    } else if (typeof window !== "undefined" && window.event) {
+      handleDrip(window.event);
+    }
+    if (deprecatedOnClick) {
+      deprecatedOnClick(e as any);
+      console.warn("onClick is deprecated, please use onPress");
     }
     onPress?.(e);
   };
@@ -129,7 +128,6 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {
   const {buttonProps, isPressed} = useButton(
     {
       ...btnProps,
-      onClick: handleClick,
       isDisabled: disabled,
       elementType: as,
       onPress: handlePress,
@@ -223,7 +221,7 @@ const Button = forwardRef<ButtonProps, "button">((props, ref) => {
       ) : (
         <span className="nextui-button-text">{children}</span>
       )}
-      <ButtonDrip color="white" {...dripBindings} />
+      <ButtonDrip className="nextui-button-drip" color="white" {...dripBindings} />
     </StyledButton>
   );
 });
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
index 2f411377c0..44f2daaa17 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/group.test.tsx.snap
@@ -15,12 +15,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria4105427206-10"
+        aria-controls="react-aria2612136440-10"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria4105427206-9"
+        id="react-aria2612136440-9"
         role="button"
         tabindex="0"
       >
@@ -66,9 +66,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria4105427206-9"
+            aria-labelledby="react-aria2612136440-9"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria4105427206-10"
+            id="react-aria2612136440-10"
             role="region"
             tabindex="-1"
           >
@@ -83,12 +83,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria4105427206-12"
+        aria-controls="react-aria2612136440-12"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria4105427206-11"
+        id="react-aria2612136440-11"
         role="button"
         tabindex="0"
       >
@@ -134,9 +134,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria4105427206-11"
+            aria-labelledby="react-aria2612136440-11"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria4105427206-12"
+            id="react-aria2612136440-12"
             role="region"
             tabindex="-1"
           >
@@ -188,12 +188,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria4105427206-6"
+        aria-controls="react-aria2612136440-6"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria4105427206-5"
+        id="react-aria2612136440-5"
         role="button"
         tabindex="0"
       >
@@ -239,9 +239,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria4105427206-5"
+            aria-labelledby="react-aria2612136440-5"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria4105427206-6"
+            id="react-aria2612136440-6"
             role="region"
             tabindex="-1"
           >
@@ -256,12 +256,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria4105427206-8"
+        aria-controls="react-aria2612136440-8"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria4105427206-7"
+        id="react-aria2612136440-7"
         role="button"
         tabindex="0"
       >
@@ -307,9 +307,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria4105427206-7"
+            aria-labelledby="react-aria2612136440-7"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria4105427206-8"
+            id="react-aria2612136440-8"
             role="region"
             tabindex="-1"
           >
diff --git a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
index 8f8721fb85..6cec74dad0 100644
--- a/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/collapse/__tests__/__snapshots__/index.test.tsx.snap
@@ -15,12 +15,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria9208032648-10"
+        aria-controls="react-aria11709204-10"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria9208032648-9"
+        id="react-aria11709204-9"
         role="button"
         tabindex="0"
       >
@@ -71,9 +71,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria9208032648-9"
+            aria-labelledby="react-aria11709204-9"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria9208032648-10"
+            id="react-aria11709204-10"
             role="region"
             tabindex="-1"
           >
@@ -88,12 +88,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria9208032648-12"
+        aria-controls="react-aria11709204-12"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria9208032648-11"
+        id="react-aria11709204-11"
         role="button"
         tabindex="0"
       >
@@ -146,9 +146,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria9208032648-11"
+            aria-labelledby="react-aria11709204-11"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria9208032648-12"
+            id="react-aria11709204-12"
             role="region"
             tabindex="-1"
           >
@@ -198,12 +198,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria9208032648-4"
+        aria-controls="react-aria11709204-4"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria9208032648-3"
+        id="react-aria11709204-3"
         role="button"
         tabindex="0"
       >
@@ -254,9 +254,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria9208032648-3"
+            aria-labelledby="react-aria11709204-3"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria9208032648-4"
+            id="react-aria11709204-4"
             role="region"
             tabindex="-1"
           >
@@ -271,12 +271,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria9208032648-6"
+        aria-controls="react-aria11709204-6"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria9208032648-5"
+        id="react-aria11709204-5"
         role="button"
         tabindex="0"
       >
@@ -325,9 +325,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria9208032648-5"
+            aria-labelledby="react-aria11709204-5"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria9208032648-6"
+            id="react-aria11709204-6"
             role="region"
             tabindex="-1"
           >
@@ -4344,12 +4344,12 @@ LoadedCheerio {
       tabindex="-1"
     >
       <div
-        aria-controls="react-aria9208032648-8"
+        aria-controls="react-aria11709204-8"
         aria-disabled="false"
         aria-expanded="false"
         class="nextui-c-lfcDHB nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-collapse-view"
         data-state="closed"
-        id="react-aria9208032648-7"
+        id="react-aria11709204-7"
         role="button"
         tabindex="0"
       >
@@ -4395,9 +4395,9 @@ LoadedCheerio {
           class="nextui-expand-content"
         >
           <div
-            aria-labelledby="react-aria9208032648-7"
+            aria-labelledby="react-aria11709204-7"
             class="nextui-c-fMAxGR nextui-collapse-content"
-            id="react-aria9208032648-8"
+            id="react-aria11709204-8"
             role="region"
             tabindex="-1"
           >
diff --git a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
index 5cf33c11e9..bb9a9dff46 100644
--- a/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Input should be work with content 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with content 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--left\\"><span>test-icon</span></span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVyrVm-hasLeftContent-true nextui-input nextui-input-left-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-25\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-27\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-input-content nextui-input-content--right\\"><span>test-icon</span></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should be work with label 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><label class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria990188834-19\\" id=\\"react-aria990188834-20\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-19\\" aria-labelledby=\\"react-aria990188834-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should be work with label 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><label class=\\"nextui-c-hzQjrs nextui-input-block-label\\" for=\\"react-aria5747947790-19\\" id=\\"react-aria5747947790-20\\">label</label><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><div class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-19\\" aria-labelledby=\\"react-aria5747947790-20\\" value=\\"\\"></div></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-21\\" value=\\"\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-bPbUHf-isRight-true nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--right\\">label</span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-gieWTI nextui-c-gieWTI-ceZkzL-isRight-false nextui-c-gieWTI-bzgJTZ-cv nextui-input-label--left\\">label</span><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-23\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different sizes 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different sizes 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-jwvDph-size-xs nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-3\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-iUdBCG-size-sm nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-5\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-bkiCag-size-lg nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-7\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gNajeV-size-xl nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-9\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-imosJd-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-11\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
 
-exports[`Input should work with different status 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria990188834-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Input should work with different status 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-13\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-gzViYB-color-success nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-15\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jzFoKt-color-warning nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-input\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria5747947790-17\\" value=\\"\\"></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
index 9e6b9f2286..0e1ec8d8fe 100644
--- a/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
+++ b/packages/react/src/input/__tests__/__snapshots__/password.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`InputPassword should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"password\\" id=\\"react-aria8375017587-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg class=\\"nextui-input-password-icon\\" fill=\\"none\\" height=\\"16\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" style=\\"color: currentColor;\\" viewBox=\\"0 0 24 24\\" width=\\"16\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`InputPassword should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-fjttfO-isTextarea-false nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--input nextui-input-password\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-lkBNdM-isTextarea-false nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><input aria-multiline=\\"false\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-bVsTEo-hasRightContent-true nextui-input nextui-input-nextui-input-right-content\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"password\\" id=\\"react-aria5907530703-1\\" value=\\"\\"><span class=\\"nextui-c-PJLV nextui-c-PJLV-dBGXHd-applyStyles-true nextui-c-PJLV-hUwVy-clickable-true nextui-input-content nextui-input-content--right\\"><svg class=\\"nextui-input-password-icon\\" fill=\\"none\\" height=\\"16\\" shape-rendering=\\"geometricPrecision\\" stroke=\\"currentColor\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" stroke-width=\\"1.5\\" style=\\"color: currentColor;\\" viewBox=\\"0 0 24 24\\" width=\\"16\\"><path d=\\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\\"></path><circle cx=\\"12\\" cy=\\"12\\" r=\\"3\\"></circle></svg></span></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
diff --git a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
index 5bac13d19d..abc221a4d7 100644
--- a/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria4178779402-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria4178779402-15-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria4178779402-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria4178779402-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria4178779402-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria4178779402-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render a static table correctly with sorting 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test sorting table\\" id=\\"react-aria9575136216-15\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria9575136216-15-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria9575136216-15-.0.1\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">TYPE<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-jhJWUH-hHqiAG-allowsSorting-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria9575136216-15-.0.2\\" aria-sort=\\"none\\" aria-describedby=\\"react-aria-description-0\\">DATE MODIFIED<svg aria-hidden=\\"true\\" class=\\"nextui-c-cqpNQI nextui-c-cqpNQI-ihOkgrg-css nextui-table-sort-icon\\" fill=\\"none\\" focusable=\\"false\\" height=\\"22\\" role=\\"presentation\\" viewBox=\\"0 0 24 24\\" width=\\"22\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.06 11.27L12.53 14.8C12.38 14.95 12.19 15.02 12 15.02C11.81 15.02 11.62 14.95 11.47 14.8L7.94 11.27C7.65 10.98 7.65 10.5 7.94 10.21C8.23 9.92 8.71 9.92 9 10.21L12 13.21L15 10.21C15.29 9.92 15.77 9.92 16.06 10.21C16.35 10.5 16.35 10.97 16.06 11.27Z\\"></path></svg></th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria9575136216-15-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria9575136216-15-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
 
-exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria4178779402-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria4178779402-2-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria4178779402-2-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria4178779402-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria4178779402-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria4178779402-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
+exports[`Table should render correctly 1`] = `"<div class=\\"nextui-c-hWZRae nextui-c-hWZRae-gikTHb-shadow-true nextui-c-hWZRae-bzEnZV-borderWeight-normal nextui-c-hWZRae-iPJLV-css nextui-table-container\\"><table class=\\"nextui-c-fcXuxO nextui-c-fcXuxO-fyxmJu-color-primary nextui-c-fcXuxO-fPgLZC-lineWeight-light nextui-table\\" aria-label=\\"Test example table\\" id=\\"react-aria9575136216-2\\" role=\\"grid\\" tabindex=\\"0\\" aria-describedby=\\"\\"><thead class=\\"nextui-c-PJLV nextui-table-row-group\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-fRbcxI nextui-table-header-row\\" role=\\"row\\"><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.0\\" role=\\"columnheader\\" id=\\"react-aria9575136216-2-.0.0\\">NAME</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.1\\" role=\\"columnheader\\" id=\\"react-aria9575136216-2-.0.1\\">TYPE</th><th class=\\"nextui-c-jhJWUH nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-column-header\\" tabindex=\\"-1\\" data-key=\\".0.2\\" role=\\"columnheader\\" id=\\"react-aria9575136216-2-.0.2\\">DATE MODIFIED</th></tr><tr aria-hidden=\\"true\\" class=\\"nextui-c-gNVTSf nextui-c-gNVTSf-hakyQ-inline-false nextui-c-gNVTSf-icCJVMZ-css nextui-table-hidden-row\\"></tr></thead><tbody class=\\"nextui-c-PJLV nextui-c-PJLV-iccTTUn-css nextui-table-body\\" role=\\"rowgroup\\"><tr class=\\"nextui-c-bUbfzy nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-row\\" role=\\"row\\" tabindex=\\"-1\\" data-key=\\"1\\" aria-labelledby=\\"react-aria9575136216-2-1-.0.0\\" aria-hidden=\\"false\\"><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.0\\" role=\\"rowheader\\" id=\\"react-aria9575136216-2-1-.0.0\\">Games</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.1\\" role=\\"gridcell\\">File folder</td><td class=\\"nextui-c-PJLV nextui-c-czOCAM nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-table-cell\\" tabindex=\\"-1\\" data-key=\\"1.2\\" role=\\"gridcell\\">6/7/2020</td></tr></tbody></table></div>"`;
diff --git a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
index c520dcc817..2d144894d5 100644
--- a/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/textarea/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Textarea should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea aria-multiline=\\"true\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"placeholder\\" type=\\"text\\" id=\\"react-aria4772339405-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
+exports[`Textarea should render correctly 1`] = `"<div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><span class=\\"nextui-c-PJLV nextui-c-iFHsrU nextui-input-placeholder\\">placeholder</span><textarea aria-multiline=\\"true\\" aria-placeholder=\\"placeholder\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"placeholder\\" type=\\"text\\" id=\\"react-aria4137920911-1\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div>"`;
 
-exports[`Textarea should work with different styles 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria4772339405-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria4772339405-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
+exports[`Textarea should work with different styles 1`] = `"<div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-kWLfoB-color-secondary nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-iiIdOsz-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria4137920911-3\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div><div class=\\"nextui-c-iwmZdB nextui-c-iwmZdB-jTfqsF-helperColor-default nextui-c-iwmZdB-dpkacN-borderWeight-normal nextui-c-iwmZdB-gOvjVW-size-md nextui-c-iwmZdB-ikPZLca-css nextui-input-main-container nextui-input-main-container--normal\\" data-state=\\"normal\\"><div class=\\"nextui-c-ghxhhI nextui-c-ghxhhI-iNKybL-animated-true nextui-input-container nextui-input-container--normal nextui-input-container--textarea\\"><label class=\\"nextui-c-eXOOPO nextui-c-eXOOPO-iNKybL-shadow-true nextui-c-eXOOPO-ccrOPm-underlined-false nextui-c-eXOOPO-iLMmYc-isTextarea-true nextui-c-eXOOPO-dpaosk-cv nextui-input-wrapper nextui-input-wrapper--normal nextui-input-wrapper--shadow\\"><textarea aria-multiline=\\"true\\" aria-placeholder=\\"\\" aria-readonly=\\"false\\" aria-required=\\"false\\" autocomplete=\\"off\\" class=\\"nextui-c-jeuecp nextui-c-jeuecp-dYLnuG-isTextarea-true nextui-input-textarea\\" data-state=\\"normal\\" placeholder=\\"\\" type=\\"text\\" id=\\"react-aria4137920911-5\\"></textarea></label></div><div class=\\"nextui-c-gJvMas nextui-input-helper-text-container\\"></div></div></div>"`;
diff --git a/packages/react/src/use-drip/use-drip.ts b/packages/react/src/use-drip/use-drip.ts
index 9b20542310..01b55ad238 100644
--- a/packages/react/src/use-drip/use-drip.ts
+++ b/packages/react/src/use-drip/use-drip.ts
@@ -8,7 +8,7 @@ const useDrip = (
   visible: boolean;
   x: number;
   y: number;
-  onClick: (event: React.MouseEvent<HTMLElement> | PressEvent) => void;
+  onClick: (event: React.MouseEvent<HTMLElement> | PressEvent | Event) => void;
   onCompleted: () => void;
 } => {
   const [dripVisible, setDripVisible] = useState<boolean>(initialValue);
diff --git a/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap b/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap
index 0c1592a5be..b05a1dc458 100644
--- a/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/react/src/user/__tests__/__snapshots__/index.test.tsx.snap
@@ -4,10 +4,10 @@ exports[` User should support image and text 1`] = `
 LoadedCheerio {
   "0": <div>
     <div
-      class="nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-jWfFif nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css"
+      class="nextui-c-ijHtNE nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css"
     >
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css only-text-avatar nextui-user-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false only-text-avatar nextui-user-avatar"
         data-state="ready"
       >
         <span
@@ -33,10 +33,10 @@ LoadedCheerio {
       </div>
     </div>
     <div
-      class="nextui-c-ijHtNE nextui-c-PJLV nextui-c-jMTBsW nextui-c-jWfFif nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css"
+      class="nextui-c-ijHtNE nextui-c-PJLV nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-ijHtNE-iPJLV-css"
     >
       <span
-        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-jWfFif nextui-c-jMTBsW nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-gEEnVX-iPJLV-css nextui-user-avatar"
+        class="nextui-c-gEEnVX nextui-c-PJLV nextui-c-gEEnVX-qXFXw-color-default nextui-c-gEEnVX-duCSmO-textColor-default nextui-c-gEEnVX-iHugVF-size-md nextui-c-gEEnVX-krOtXB-borderWeight-normal nextui-c-gEEnVX-bAEoQm-rounded-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-user-avatar"
         data-state="loading"
       >
         <span

From 164c963494e19a997566e503fa1edc54f1b91614 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sat, 13 Aug 2022 22:18:34 -0300
Subject: [PATCH 077/106] feat(docs): window actions added to the playground

---
 apps/docs/content/components/navbar/common.ts | 10 ----
 .../docs/content/docs/components/dropdown.mdx | 46 +++++++++----------
 apps/docs/content/docs/components/navbar.mdx  |  3 ++
 apps/docs/content/docs/manifest.json          |  3 +-
 .../src/components/code-demo/code-block.tsx   | 41 +----------------
 apps/docs/src/components/index.ts             |  1 +
 .../components/playground/dynamic-live.tsx    | 38 ++++++++++++++-
 .../src/components/playground/playground.tsx  | 11 ++++-
 apps/docs/src/components/sandpack/index.ts    |  1 +
 .../src/components/window-actions/index.ts    |  3 ++
 .../window-actions/window-actions.styles.ts   | 45 ++++++++++++++++++
 .../window-actions/window-actions.tsx         | 26 +++++++++++
 12 files changed, 153 insertions(+), 75 deletions(-)
 create mode 100644 apps/docs/src/components/window-actions/index.ts
 create mode 100644 apps/docs/src/components/window-actions/window-actions.styles.ts
 create mode 100644 apps/docs/src/components/window-actions/window-actions.tsx

diff --git a/apps/docs/content/components/navbar/common.ts b/apps/docs/content/components/navbar/common.ts
index 76aa9b9e7a..cffcf5c78a 100644
--- a/apps/docs/content/components/navbar/common.ts
+++ b/apps/docs/content/components/navbar/common.ts
@@ -111,16 +111,6 @@ export const Layout = ({ children }) => (
       maxW: "100%",
       maxHeight: "600px",
       overflow: "visible scroll",
-      boxShadow: "$md",
-      position: "relative",
-      border: "1px solid $colors$border",
-      borderRadius: "$md",
-      "::-webkit-scrollbar": {
-        display: "none",
-        width: 0,
-        height: 0,
-        background: "transparent",
-      },
     }}
   >
     {children}
diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx
index 53522a515c..7897c7d62f 100644
--- a/apps/docs/content/docs/components/dropdown.mdx
+++ b/apps/docs/content/docs/components/dropdown.mdx
@@ -140,15 +140,15 @@ import { Dropdown } from "@nextui-org/react";
 
 #### Dropdown Props
 
-| Attribute                          | Type                                                   | Description                                                                                              | Default |
-| ---------------------------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ------- |
-| **children\***                     | `ReactNode[]`                                          | The content of the dropdown. It's usually the `Dropdown.Trigger`, `Dropdown.Button` and `Dropdown.Menu`. | -       |
-| **type**                           | [TriggerType](#trigger-type)                           | The type of dropdown menu that the dropdown trigger opens.                                               | `menu`  |
-| **trigger**                        | [MenuTriggerType](#menu-trigger-type)                  | How the dropdown menu is triggered.                                                                      | `press` |
-| **closeOnSelect**                  | `boolean`                                              | Whether the dropdown menu closes when a selection is made.                                               | `true`  |
-| **isDisabled**                     | `boolean`                                              | Whether dropdown trigger is disabled.                                                                    | `false` |
-| **disableTriggerPressedAnimation** | `boolean`                                              | Whether the trigger should show a pressed animation when the menu is open.                               | `false` |
-| **PopoverProps**                   | [PopoverProps](/docs/components/popover#popover-props) | Since dropdown is based on the `Popover` you can use any of the `Popover` props.                         | -       |
+| Attribute                                | Type                                                   | Description                                                                                              | Default |
+| ---------------------------------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ------- |
+| **children\***                           | `ReactNode[]`                                          | The content of the dropdown. It's usually the `Dropdown.Trigger`, `Dropdown.Button` and `Dropdown.Menu`. | -       |
+| **type**                                 | [TriggerType](#trigger-type)                           | The type of dropdown menu that the dropdown trigger opens.                                               | `menu`  |
+| **trigger**                              | [MenuTriggerType](#menu-trigger-type)                  | How the dropdown menu is triggered.                                                                      | `press` |
+| **closeOnSelect**                        | `boolean`                                              | Whether the dropdown menu closes when a selection is made.                                               | `true`  |
+| **isDisabled**                           | `boolean`                                              | Whether dropdown trigger is disabled.                                                                    | `false` |
+| **disableTriggerPressedAnimation** `new` | `boolean`                                              | Whether the trigger should show a pressed animation when the menu is open.                               | `false` |
+| **PopoverProps**                         | [PopoverProps](/docs/components/popover#popover-props) | Since dropdown is based on the `Popover` you can use any of the `Popover` props.                         | -       |
 
 <Spacer y={1} />
 
@@ -238,20 +238,20 @@ import { Dropdown } from "@nextui-org/react";
 
 #### Dropdown.Item Props
 
-| Attribute               | Type                                                | Description                                                      | Default   |
-| ----------------------- | --------------------------------------------------- | ---------------------------------------------------------------- | --------- |
-| **key**                 | [Key](https://reactjs.org/docs/lists-and-keys.html) | The unique key for the menu item.                                | `false`   |
-| **description**         | `string`                                            | Description text element inside the dropdown menu item.          | -         |
-| **command**             | `string`                                            | Right-aligned label text content, useful for displaying hotkeys. | -         |
-| **icon**                | `ReactNode`                                         | The icon to render before the dropdown menu item's label.        | -         |
-| **dividerWeight**       | [NormalWeights](#normal-weights)                    | The dropdown item divider height                                 | `light`   |
-| **color**               | [SimpleColors](#simple-colors)                      | The dropdown item color                                          | `default` |
-| **textColor**           | [SimpleColors](#simple-colors)                      | The dropdown item text color                                     | `default` |
-| **variant**             | [DropdownVariant](#dropdown-variants)               | The dropdown item variation                                      | `flat`    |
-| **withDivider**         | `boolean`                                           | Whether the dropdown item should have a border on top            | `false`   |
-| **showFullDescription** | `boolean`                                           | Whether the item description should be truncated or not.         | `false`   |
-| **css**                 | `Stitches.CSS`                                      | Override Default CSS style.                                      | -         |
-| **as**                  | `keyof JSX.IntrinsicElements`                       | Changes which tag component outputs.                             | `li`      |
+| Attribute                     | Type                                                | Description                                                      | Default   |
+| ----------------------------- | --------------------------------------------------- | ---------------------------------------------------------------- | --------- |
+| **key**                       | [Key](https://reactjs.org/docs/lists-and-keys.html) | The unique key for the menu item.                                | `false`   |
+| **description**               | `string`                                            | Description text element inside the dropdown menu item.          | -         |
+| **command**                   | `string`                                            | Right-aligned label text content, useful for displaying hotkeys. | -         |
+| **icon**                      | `ReactNode`                                         | The icon to render before the dropdown menu item's label.        | -         |
+| **dividerWeight**             | [NormalWeights](#normal-weights)                    | The dropdown item divider height                                 | `light`   |
+| **color**                     | [SimpleColors](#simple-colors)                      | The dropdown item color                                          | `default` |
+| **textColor**                 | [SimpleColors](#simple-colors)                      | The dropdown item text color                                     | `default` |
+| **variant**                   | [DropdownVariant](#dropdown-variants)               | The dropdown item variation                                      | `flat`    |
+| **withDivider**               | `boolean`                                           | Whether the dropdown item should have a border on top            | `false`   |
+| **showFullDescription** `new` | `boolean`                                           | Whether the item description should be truncated or not.         | `false`   |
+| **css**                       | `Stitches.CSS`                                      | Override Default CSS style.                                      | -         |
+| **as**                        | `keyof JSX.IntrinsicElements`                       | Changes which tag component outputs.                             | `li`      |
 
 <Spacer y={1} />
 
diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index d72eaa9390..19119bfca2 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -18,18 +18,21 @@ import { Navbar } from "@nextui-org/react";
 <Spacer y={2} />
 
 <Playground
+  showWindowActions
   title="Static"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.staticVariant}
 />
 
 <Playground
+  showWindowActions
   title="Sticky"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.stickyVariant}
 />
 
 <Playground
+  showWindowActions
   title="Floating"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.floatingVariant}
diff --git a/apps/docs/content/docs/manifest.json b/apps/docs/content/docs/manifest.json
index b8fe29e4c5..1234ac9786 100644
--- a/apps/docs/content/docs/manifest.json
+++ b/apps/docs/content/docs/manifest.json
@@ -168,7 +168,8 @@
             {
               "title": "Dropdown",
               "keywords": "dropdown, select, selectable, menu",
-              "path": "/docs/components/dropdown.mdx"
+              "path": "/docs/components/dropdown.mdx",
+              "updated": true
             },
             {
               "title": "Progress",
diff --git a/apps/docs/src/components/code-demo/code-block.tsx b/apps/docs/src/components/code-demo/code-block.tsx
index 2164a0f80c..e3324ab747 100644
--- a/apps/docs/src/components/code-demo/code-block.tsx
+++ b/apps/docs/src/components/code-demo/code-block.tsx
@@ -10,7 +10,7 @@ import hastToHtml from "hast-util-to-html";
 import rangeParser from "parse-numeric-range";
 import highlightLine from "@lib/rehype-highlight-line";
 import highlightWord from "@lib/rehype-highlight-word";
-import {styled} from "@nextui-org/react";
+import {WindowActions} from "@components";
 
 import {Box} from "../primitives";
 
@@ -24,25 +24,6 @@ refractor.register(diff);
 
 type PreProps = Omit<React.ComponentProps<typeof Pre>, "css">;
 
-const WindowIcon = styled(Box, {
-  size: "$6",
-  br: "$pill",
-  mr: "$4",
-  variants: {
-    color: {
-      red: {
-        bg: "$red600",
-      },
-      green: {
-        bg: "$green600",
-      },
-      yellow: {
-        bg: "$yellow600",
-      },
-    },
-  },
-});
-
 type CodeBlockProps = PreProps & {
   language: "js" | "jsx" | "bash" | "css" | "diff";
   value?: string;
@@ -173,25 +154,7 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
       data-line-numbers={showLineNumbers}
       {...props}
     >
-      {showWindowIcons && (
-        <Box
-          css={{
-            dflex: "flex-start",
-            alignItems: "center",
-            px: "$2",
-            pt: "$5",
-            pb: "$4",
-            zIndex: "$2",
-            position: "sticky",
-            background: "$codeBackground",
-            top: 0,
-          }}
-        >
-          <WindowIcon color="red" />
-          <WindowIcon color="yellow" />
-          <WindowIcon color="green" />
-        </Box>
-      )}
+      {showWindowIcons && <WindowActions />}
       <code className={classes} dangerouslySetInnerHTML={{__html: result}} />
     </Pre>
   );
diff --git a/apps/docs/src/components/index.ts b/apps/docs/src/components/index.ts
index 3cb6a343bb..acf079ed7f 100644
--- a/apps/docs/src/components/index.ts
+++ b/apps/docs/src/components/index.ts
@@ -38,5 +38,6 @@ export {default as Community} from "./community";
 export {default as InstallBanner} from "./install-banner";
 export {default as VercelCallout} from "./vercel-callout";
 export {default as NotifyBanner} from "./notify-banner";
+export {default as WindowActions} from "./window-actions";
 export {default as SandpackEditor} from "./sandpack";
 export * from "./sandpack";
diff --git a/apps/docs/src/components/playground/dynamic-live.tsx b/apps/docs/src/components/playground/dynamic-live.tsx
index eba1a86416..2ae4fa9423 100644
--- a/apps/docs/src/components/playground/dynamic-live.tsx
+++ b/apps/docs/src/components/playground/dynamic-live.tsx
@@ -6,6 +6,7 @@ import {validateEmail} from "@utils/index";
 import withDefaults from "@utils/with-defaults";
 import {Box} from "@primitives";
 import * as Components from "@nextui-org/react";
+import {WindowActions} from "@components";
 
 import * as TemplateComponents from "../templates";
 import Palette from "../palette";
@@ -19,6 +20,7 @@ export interface Props {
   showEditor?: boolean;
   noInline?: boolean;
   initialEditorOpen?: boolean;
+  showWindowActions?: boolean;
   overflow?: "auto" | "visible" | "hidden";
 }
 
@@ -59,6 +61,23 @@ const StyledWrapper = Components.styled(Box, {
         ml: 0,
       },
     },
+    isBrowser: {
+      true: {
+        p: 0,
+        my: "$10",
+        overflow: "hidden",
+        boxShadow: "$md",
+        position: "relative",
+        border: "1px solid $colors$border",
+        borderRadius: "$md",
+        "::-webkit-scrollbar": {
+          display: "none",
+          width: 0,
+          height: 0,
+          background: "transparent",
+        },
+      },
+    },
   },
   defaultVariants: {
     overflow: "hidden",
@@ -81,13 +100,30 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
   initialEditorOpen,
   noInline,
   overflow,
+  showWindowActions,
   css,
 }) => {
   const codeTheme = makeCodeTheme();
 
   return (
     <LiveProvider code={code} noInline={noInline} scope={scope} theme={codeTheme}>
-      <StyledWrapper className="wrapper" css={css} noInline={noInline} overflow={overflow}>
+      <StyledWrapper
+        className="dynamic-live-wrapper"
+        css={css}
+        isBrowser={showWindowActions}
+        noInline={noInline}
+        overflow={overflow}
+      >
+        {showWindowActions && (
+          <WindowActions
+            css={{
+              py: "$6",
+              px: "$10",
+              bg: "$accents0",
+            }}
+            variant="normal"
+          />
+        )}
         <LivePreview />
         <LiveError />
       </StyledWrapper>
diff --git a/apps/docs/src/components/playground/playground.tsx b/apps/docs/src/components/playground/playground.tsx
index 3d948db350..1d52bb5415 100644
--- a/apps/docs/src/components/playground/playground.tsx
+++ b/apps/docs/src/components/playground/playground.tsx
@@ -37,6 +37,7 @@ interface Props {
   showEditor?: boolean;
   showSandpackPreview?: boolean;
   initialEditorOpen?: boolean;
+  showWindowActions?: boolean;
   overflow?: "auto" | "visible" | "hidden";
   files?: SandpackFiles;
   template?: SandpackPredefinedTemplate;
@@ -52,6 +53,7 @@ const defaultProps = {
   showEditor: true,
   showSandpackPreview: false,
   initialEditorOpen: false,
+  showWindowActions: false,
   overflow: "visible",
   bindings: {},
 };
@@ -65,6 +67,7 @@ const Playground: React.FC<PlaygroundProps> = ({
   showEditor,
   highlightedLines,
   showSandpackPreview,
+  showWindowActions,
   files,
   overflow,
   desc,
@@ -150,7 +153,13 @@ const Playground: React.FC<PlaygroundProps> = ({
             highlightedLines={highlightedLines}
             showPreview={showSandpackPreview}
           >
-            <LiveCode code={code} noInline={noInline} overflow={overflow} showEditor={false} />
+            <LiveCode
+              code={code}
+              noInline={noInline}
+              overflow={overflow}
+              showEditor={false}
+              showWindowActions={showWindowActions}
+            />
           </DynamicSandpack>
         ) : (
           <DynamicLive
diff --git a/apps/docs/src/components/sandpack/index.ts b/apps/docs/src/components/sandpack/index.ts
index 5dc1f28f6f..97792bc8f9 100644
--- a/apps/docs/src/components/sandpack/index.ts
+++ b/apps/docs/src/components/sandpack/index.ts
@@ -3,4 +3,5 @@ export type {SandpackFiles, SandpackPredefinedTemplate} from "@codesandbox/sandp
 
 export type {HighlightedLines as SandpackHighlightedLines} from "./types";
 
+export type {SandpackProps} from "./sandpack";
 export default Sandpack;
diff --git a/apps/docs/src/components/window-actions/index.ts b/apps/docs/src/components/window-actions/index.ts
new file mode 100644
index 0000000000..7d47369a7c
--- /dev/null
+++ b/apps/docs/src/components/window-actions/index.ts
@@ -0,0 +1,3 @@
+import WindowActions from "./window-actions";
+
+export default WindowActions;
diff --git a/apps/docs/src/components/window-actions/window-actions.styles.ts b/apps/docs/src/components/window-actions/window-actions.styles.ts
new file mode 100644
index 0000000000..86210b012a
--- /dev/null
+++ b/apps/docs/src/components/window-actions/window-actions.styles.ts
@@ -0,0 +1,45 @@
+import {styled, VariantProps} from "@nextui-org/react";
+import {Box} from "@primitives";
+
+export const StyledWindowIcon = styled(Box, {
+  size: "$6",
+  br: "$pill",
+  mr: "$4",
+  variants: {
+    color: {
+      red: {
+        bg: "$red600",
+      },
+      green: {
+        bg: "$green600",
+      },
+      yellow: {
+        bg: "$yellow600",
+      },
+    },
+  },
+});
+
+export const StyledWindowActions = styled("div", {
+  dflex: "flex-start",
+  alignItems: "center",
+  px: "$2",
+  pt: "$5",
+  pb: "$4",
+  zIndex: "$2",
+  position: "sticky",
+  top: 0,
+  variants: {
+    variant: {
+      normal: {},
+      code: {
+        background: "$codeBackground",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "code",
+  },
+});
+
+export type WindowActionsVariantProps = VariantProps<typeof StyledWindowActions>;
diff --git a/apps/docs/src/components/window-actions/window-actions.tsx b/apps/docs/src/components/window-actions/window-actions.tsx
new file mode 100644
index 0000000000..c57244b725
--- /dev/null
+++ b/apps/docs/src/components/window-actions/window-actions.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import {CSS} from "@nextui-org/react";
+
+import {
+  StyledWindowIcon,
+  StyledWindowActions,
+  WindowActionsVariantProps,
+} from "./window-actions.styles";
+
+export type WindowActionsProps = WindowActionsVariantProps & {
+  css?: CSS;
+};
+
+const WindowActions: React.FC<WindowActionsProps> = (props) => {
+  return (
+    <StyledWindowActions className="nextui-window-actions" {...props}>
+      <StyledWindowIcon color="red" />
+      <StyledWindowIcon color="yellow" />
+      <StyledWindowIcon color="green" />
+    </StyledWindowActions>
+  );
+};
+
+WindowActions.toString = () => ".nextui-window-actions";
+
+export default WindowActions;

From 1ea9f211320d82160deb46eb219bce30204fdb56 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 14 Aug 2022 18:32:52 -0300
Subject: [PATCH 078/106] feat(docs): playground with iframe and resizer
 implemented

---
 apps/docs/content/docs/components/navbar.mdx  |  12 +-
 .../src/components/code-demo/code-block.tsx   |   2 -
 apps/docs/src/components/examples/index.ts    |   1 +
 .../examples/navbar/common.tsx}               |  70 +------
 apps/docs/src/components/index.ts             |   1 +
 .../components/playground/dynamic-live.tsx    | 192 +++++++++++++++---
 .../src/components/playground/playground.tsx  |  13 +-
 .../src/hooks/use-isomorphic-layout-effect.ts |   4 +
 apps/docs/src/layouts/footer.tsx              |   6 +-
 .../src/pages/examples/navbar/floating.tsx    |  35 ++++
 .../docs/src/pages/examples/navbar/static.tsx |  33 +++
 .../docs/src/pages/examples/navbar/sticky.tsx |  35 ++++
 apps/docs/src/styles/globalStyles.ts          |   9 +
 13 files changed, 316 insertions(+), 97 deletions(-)
 create mode 100644 apps/docs/src/components/examples/index.ts
 rename apps/docs/src/{pages/test.tsx => components/examples/navbar/common.tsx} (77%)
 create mode 100644 apps/docs/src/hooks/use-isomorphic-layout-effect.ts
 create mode 100644 apps/docs/src/pages/examples/navbar/floating.tsx
 create mode 100644 apps/docs/src/pages/examples/navbar/static.tsx
 create mode 100644 apps/docs/src/pages/examples/navbar/sticky.tsx

diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index 19119bfca2..4da1b2d284 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -14,26 +14,28 @@ import { Navbar } from "@nextui-org/react";
 
 <CarbonAd />
 
-
 <Spacer y={2} />
 
 <Playground
-  showWindowActions
+  asIframe
   title="Static"
+  iframeSrc="/examples/navbar/static"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.staticVariant}
 />
 
 <Playground
-  showWindowActions
+  asIframe
   title="Sticky"
+  iframeSrc="/examples/navbar/sticky"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.stickyVariant}
 />
 
 <Playground
-  showWindowActions
+  asIframe
   title="Floating"
+  iframeSrc="/examples/navbar/floating"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.floatingVariant}
-/>
\ No newline at end of file
+/>
diff --git a/apps/docs/src/components/code-demo/code-block.tsx b/apps/docs/src/components/code-demo/code-block.tsx
index e3324ab747..f15e66274d 100644
--- a/apps/docs/src/components/code-demo/code-block.tsx
+++ b/apps/docs/src/components/code-demo/code-block.tsx
@@ -12,8 +12,6 @@ import highlightLine from "@lib/rehype-highlight-line";
 import highlightWord from "@lib/rehype-highlight-word";
 import {WindowActions} from "@components";
 
-import {Box} from "../primitives";
-
 import {Pre} from "./pre";
 
 refractor.register(js);
diff --git a/apps/docs/src/components/examples/index.ts b/apps/docs/src/components/examples/index.ts
new file mode 100644
index 0000000000..fe8d00c023
--- /dev/null
+++ b/apps/docs/src/components/examples/index.ts
@@ -0,0 +1 @@
+export * from "./navbar/common";
diff --git a/apps/docs/src/pages/test.tsx b/apps/docs/src/components/examples/navbar/common.tsx
similarity index 77%
rename from apps/docs/src/pages/test.tsx
rename to apps/docs/src/components/examples/navbar/common.tsx
index a54d510468..58ad693e67 100644
--- a/apps/docs/src/pages/test.tsx
+++ b/apps/docs/src/components/examples/navbar/common.tsx
@@ -1,7 +1,10 @@
-import {useTheme, Text, Spacer, Navbar, Link, Button, styled} from "@nextui-org/react";
-import {ThemeToggle} from "@components";
+import {Text, Spacer, styled} from "@nextui-org/react";
 
-const AcmeLogo = () => (
+export const Box = styled("div", {
+  boxSizing: "border-box",
+});
+
+export const AcmeLogo = () => (
   <svg
     className=""
     fill="none"
@@ -20,11 +23,7 @@ const AcmeLogo = () => (
   </svg>
 );
 
-const Box = styled("div", {
-  boxSizing: "border-box",
-});
-
-const Content = () => (
+export const NavbarContent = () => (
   <Box css={{px: "$12", mt: "$8", "@xsMax": {px: "$10"}}}>
     <Text h2>Lorem ipsum dolor sit amet</Text>
     <Text size="$lg">
@@ -100,63 +99,14 @@ const Content = () => (
   </Box>
 );
 
-const Layout = ({children}: any) => (
+export const NavbarLayout = ({children}: {children: React.ReactNode}) => (
   <Box
     css={{
       maxW: "100%",
-      maxHeight: "600px",
-      overflow: "visible scroll",
-      boxShadow: "$md",
-      position: "relative",
-      border: "1px solid $colors$border",
-      borderRadius: "$md",
-      m: "$6",
-      "::-webkit-scrollbar": {
-        display: "none",
-        width: 0,
-        height: 0,
-        background: "transparent",
-      },
+      maxHeight: "100%",
     }}
   >
     {children}
-    <Content />
+    <NavbarContent />
   </Box>
 );
-
-const TestPage = () => {
-  const {isDark} = useTheme();
-
-  return (
-    <Layout>
-      <Navbar isBordered={isDark} variant="floating">
-        <Navbar.Brand>
-          <AcmeLogo />
-          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
-            ACME
-          </Text>
-        </Navbar.Brand>
-        <Navbar.Content css={{"@smMax": {d: "none"}}}>
-          <Navbar.Link href="#">Features</Navbar.Link>
-          <Navbar.Link href="#">Customers</Navbar.Link>
-          <Navbar.Link href="#">Integrations</Navbar.Link>
-          <Navbar.Link href="#">Pricing</Navbar.Link>
-          <Navbar.Link href="#">Company</Navbar.Link>
-        </Navbar.Content>
-        <Navbar.Content>
-          <ThemeToggle />
-          <Navbar.Link color="inherit" href="#">
-            Login
-          </Navbar.Link>
-          <Navbar.Item>
-            <Button auto flat as={Link} href="#">
-              Sign Up
-            </Button>
-          </Navbar.Item>
-        </Navbar.Content>
-      </Navbar>
-    </Layout>
-  );
-};
-
-export default TestPage;
diff --git a/apps/docs/src/components/index.ts b/apps/docs/src/components/index.ts
index acf079ed7f..c28256f930 100644
--- a/apps/docs/src/components/index.ts
+++ b/apps/docs/src/components/index.ts
@@ -40,4 +40,5 @@ export {default as VercelCallout} from "./vercel-callout";
 export {default as NotifyBanner} from "./notify-banner";
 export {default as WindowActions} from "./window-actions";
 export {default as SandpackEditor} from "./sandpack";
+export * as Examples from "./examples";
 export * from "./sandpack";
diff --git a/apps/docs/src/components/playground/dynamic-live.tsx b/apps/docs/src/components/playground/dynamic-live.tsx
index 2ae4fa9423..e724f91a42 100644
--- a/apps/docs/src/components/playground/dynamic-live.tsx
+++ b/apps/docs/src/components/playground/dynamic-live.tsx
@@ -1,9 +1,10 @@
-import React from "react";
+import React, {useRef, useEffect} from "react";
 import {LivePreview, LiveProvider, LiveError} from "react-live";
 import NextLink from "next/link";
 import {useMediaQuery} from "@hooks/use-media-query";
 import {validateEmail} from "@utils/index";
 import withDefaults from "@utils/with-defaults";
+import {motion, useTransform, useMotionValue} from "framer-motion";
 import {Box} from "@primitives";
 import * as Components from "@nextui-org/react";
 import {WindowActions} from "@components";
@@ -21,13 +22,55 @@ export interface Props {
   noInline?: boolean;
   initialEditorOpen?: boolean;
   showWindowActions?: boolean;
+  iframeSrc?: string;
+  iframeTitle?: string;
+  enableResize?: boolean;
   overflow?: "auto" | "visible" | "hidden";
 }
 
 const defaultProps = {
   showEditor: true,
+  enableResize: false,
+  showWindowActions: false,
 };
 
+const WindowIframe = Components.styled("iframe", {
+  // reset styles
+  width: "100%",
+  height: "100%",
+  border: "none",
+  overflow: "visible scroll",
+  zIndex: "$10",
+  "&.dragging-ew": {
+    zIndex: "1",
+    pointerEvents: "none",
+  },
+});
+
+const Resizer = Components.styled(Box, {
+  position: "absolute",
+  d: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  zIndex: "$1",
+  right: "5px",
+  width: "auto",
+  height: "100%",
+  "& .resizer-bar": {
+    content: '""',
+    cursor: "ew-resize",
+    userSelect: "none",
+    position: "absolute",
+    borderRadius: "$pill",
+    width: "6px",
+    height: "40px",
+    background: "$accents5",
+  },
+  "@xsMax": {
+    display: "none",
+  },
+});
+
 const StyledWrapper = Components.styled(Box, {
   width: "100%",
   padding: "$10",
@@ -37,7 +80,8 @@ const StyledWrapper = Components.styled(Box, {
   color: "$text",
   flexDirection: "column",
   background: "transparent",
-  "& > div": {
+  position: "relative",
+  "& .live-preview": {
     width: "100%",
   },
   "@xsMax": {
@@ -64,17 +108,22 @@ const StyledWrapper = Components.styled(Box, {
     isBrowser: {
       true: {
         p: 0,
-        my: "$10",
+        ml: "20px",
         overflow: "hidden",
         boxShadow: "$md",
         position: "relative",
         border: "1px solid $colors$border",
         borderRadius: "$md",
-        "::-webkit-scrollbar": {
-          display: "none",
-          width: 0,
-          height: 0,
-          background: "transparent",
+        height: "100%",
+        flexWrap: "nowrap",
+      },
+    },
+    enableResize: {
+      true: {
+        width: "calc(100% - 34px + var(--iframe-resizer-x))",
+        "@xsMax": {
+          ml: "0px",
+          width: "100%",
         },
       },
     },
@@ -84,6 +133,25 @@ const StyledWrapper = Components.styled(Box, {
   },
 });
 
+const LiveContainer = Components.styled(Box, {
+  width: "100%",
+  position: "relative",
+  my: 0,
+  height: "100%",
+  variants: {
+    showWindowActions: {
+      true: {
+        my: "$10",
+      },
+    },
+    enableResize: {
+      true: {
+        height: "600px",
+      },
+    },
+  },
+});
+
 export const scope = {
   ...Components,
   ...Icons,
@@ -94,6 +162,8 @@ export const scope = {
   validateEmail,
 };
 
+const MIN_WIDTH = 400;
+
 const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
   code,
   showEditor,
@@ -101,33 +171,105 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
   noInline,
   overflow,
   showWindowActions,
+  enableResize,
+  iframeSrc,
+  iframeTitle,
   css,
 }) => {
   const codeTheme = makeCodeTheme();
 
+  const resizerX = useMotionValue(0);
+  let constraintsResizerRef = useRef<HTMLDivElement>(null);
+  let resizerRef = useRef<HTMLDivElement>(null);
+  let iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    if (!resizerRef.current) {
+      return;
+    }
+    resizerRef.current.onselectstart = () => false;
+  }, []);
+
+  let browserWidth = useTransform(resizerX, (x) => `${x}px`);
+
   return (
     <LiveProvider code={code} noInline={noInline} scope={scope} theme={codeTheme}>
-      <StyledWrapper
-        className="dynamic-live-wrapper"
-        css={css}
-        isBrowser={showWindowActions}
-        noInline={noInline}
-        overflow={overflow}
+      <LiveContainer
+        className="dynamic-live-container"
+        enableResize={enableResize}
+        showWindowActions={showWindowActions}
       >
-        {showWindowActions && (
-          <WindowActions
+        <StyledWrapper
+          as={motion.div}
+          className="dynamic-live-wrapper"
+          css={css}
+          enableResize={enableResize}
+          isBrowser={showWindowActions}
+          noInline={noInline}
+          overflow={overflow}
+          style={{
+            // @ts-ignore
+            "--iframe-resizer-x": browserWidth,
+          }}
+        >
+          {showWindowActions ? (
+            <>
+              <WindowActions
+                css={{
+                  py: "$6",
+                  px: "$10",
+                  bg: "$accents0",
+                }}
+                variant="normal"
+              />
+              <WindowIframe
+                ref={iframeRef}
+                as={motion.iframe}
+                id="dynamic-live-iframe"
+                src={iframeSrc}
+                title={iframeTitle}
+              />
+            </>
+          ) : (
+            <LivePreview className="live-preview" />
+          )}
+
+          <LiveError />
+        </StyledWrapper>
+        {enableResize && (
+          <Resizer
+            ref={constraintsResizerRef}
+            className="window-resizer"
             css={{
-              py: "$6",
-              px: "$10",
-              bg: "$accents0",
+              top: 0,
+              bottom: 0,
+              right: 0,
+              width: `calc(100% - ${MIN_WIDTH}px - 20px)`,
             }}
-            variant="normal"
-          />
+          >
+            <Box
+              ref={resizerRef}
+              _dragX={resizerX}
+              as={motion.div}
+              className="resizer-bar"
+              drag="x"
+              dragConstraints={constraintsResizerRef}
+              dragElastic={0}
+              dragMomentum={false}
+              style={{x: resizerX}}
+              onDragEnd={() => {
+                document.documentElement.classList.remove("dragging-ew");
+                iframeRef.current?.classList.remove("dragging-ew");
+              }}
+              onDragStart={() => {
+                document.documentElement.classList.add("dragging-ew");
+                iframeRef.current?.classList.add("dragging-ew");
+              }}
+            />
+          </Resizer>
         )}
-        <LivePreview />
-        <LiveError />
-      </StyledWrapper>
-      {showEditor && <Editor code={code} initialOpen={initialEditorOpen} />}
+        {showEditor && <Editor code={code} initialOpen={initialEditorOpen} />}
+      </LiveContainer>
     </LiveProvider>
   );
 };
diff --git a/apps/docs/src/components/playground/playground.tsx b/apps/docs/src/components/playground/playground.tsx
index 1d52bb5415..4ea7274686 100644
--- a/apps/docs/src/components/playground/playground.tsx
+++ b/apps/docs/src/components/playground/playground.tsx
@@ -37,7 +37,10 @@ interface Props {
   showEditor?: boolean;
   showSandpackPreview?: boolean;
   initialEditorOpen?: boolean;
+  enableResize?: boolean;
   showWindowActions?: boolean;
+  iframeSrc?: string;
+  asIframe?: boolean;
   overflow?: "auto" | "visible" | "hidden";
   files?: SandpackFiles;
   template?: SandpackPredefinedTemplate;
@@ -51,9 +54,11 @@ const defaultProps = {
   code: "",
   files: {},
   showEditor: true,
+  asIframe: false,
   showSandpackPreview: false,
   initialEditorOpen: false,
   showWindowActions: false,
+  enableResize: false,
   overflow: "visible",
   bindings: {},
 };
@@ -68,7 +73,10 @@ const Playground: React.FC<PlaygroundProps> = ({
   highlightedLines,
   showSandpackPreview,
   showWindowActions,
+  enableResize,
   files,
+  iframeSrc,
+  asIframe,
   overflow,
   desc,
 }) => {
@@ -155,10 +163,13 @@ const Playground: React.FC<PlaygroundProps> = ({
           >
             <LiveCode
               code={code}
+              enableResize={enableResize || asIframe}
+              iframeSrc={iframeSrc}
+              iframeTitle={title}
               noInline={noInline}
               overflow={overflow}
               showEditor={false}
-              showWindowActions={showWindowActions}
+              showWindowActions={showWindowActions || asIframe}
             />
           </DynamicSandpack>
         ) : (
diff --git a/apps/docs/src/hooks/use-isomorphic-layout-effect.ts b/apps/docs/src/hooks/use-isomorphic-layout-effect.ts
new file mode 100644
index 0000000000..2ae7cb60eb
--- /dev/null
+++ b/apps/docs/src/hooks/use-isomorphic-layout-effect.ts
@@ -0,0 +1,4 @@
+import {useEffect, useLayoutEffect} from "react";
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;
diff --git a/apps/docs/src/layouts/footer.tsx b/apps/docs/src/layouts/footer.tsx
index 031358e649..2db8aad279 100644
--- a/apps/docs/src/layouts/footer.tsx
+++ b/apps/docs/src/layouts/footer.tsx
@@ -42,11 +42,9 @@ const Footer: React.FC<Props> = ({css, containerCss}) => {
           span
           className="footer__by"
           css={{
-            fontSize: "$xs",
+            fontSize: "$sm",
             color: "$accents7",
-            "@mdMax": {
-              fontSize: "$xs",
-            },
+            dflex: "center",
           }}
         >
           Created&nbsp;by&nbsp;
diff --git a/apps/docs/src/pages/examples/navbar/floating.tsx b/apps/docs/src/pages/examples/navbar/floating.tsx
new file mode 100644
index 0000000000..d24b8cfb8e
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/floating.tsx
@@ -0,0 +1,35 @@
+import {Examples} from "@components";
+import {Navbar, Text, Button, Link, useTheme} from "@nextui-org/react";
+
+export default function NavbarFloatingExample() {
+  const {isDark} = useTheme();
+
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered={isDark} variant="floating">
+        <Navbar.Brand>
+          <Examples.AcmeLogo />
+          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content css={{"@xsMax": {d: "none"}}} gap="$6">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/apps/docs/src/pages/examples/navbar/static.tsx b/apps/docs/src/pages/examples/navbar/static.tsx
new file mode 100644
index 0000000000..7e49cf5b2e
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/static.tsx
@@ -0,0 +1,33 @@
+import {Examples} from "@components";
+import {Navbar, Text, Button, Link} from "@nextui-org/react";
+
+export default function NavbarStaticExample() {
+  return (
+    <Examples.NavbarLayout>
+      <Navbar>
+        <Navbar.Brand>
+          <Examples.AcmeLogo />
+          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content css={{"@xsMax": {d: "none"}}} gap="$6">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/apps/docs/src/pages/examples/navbar/sticky.tsx b/apps/docs/src/pages/examples/navbar/sticky.tsx
new file mode 100644
index 0000000000..1e201c3f3b
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/sticky.tsx
@@ -0,0 +1,35 @@
+import {Examples} from "@components";
+import {Navbar, Text, Button, Link, useTheme} from "@nextui-org/react";
+
+export default function NavbarStickyExample() {
+  const {isDark} = useTheme();
+
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered={isDark} variant="sticky">
+        <Navbar.Brand>
+          <Examples.AcmeLogo />
+          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content css={{"@xsMax": {d: "none"}}} gap="$6">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/apps/docs/src/styles/globalStyles.ts b/apps/docs/src/styles/globalStyles.ts
index 1b10fe0051..cd66674605 100644
--- a/apps/docs/src/styles/globalStyles.ts
+++ b/apps/docs/src/styles/globalStyles.ts
@@ -3,7 +3,16 @@ import {globalCss} from "@nextui-org/react";
 export default globalCss({
   html: {
     scrollPaddingTop: "80px",
+    "&.dragging-ew": {
+      userSelect: "none !important",
+      cursor: "ew-resize !important",
+      "*": {
+        userSelect: "none !important",
+        cursor: "ew-resize !important",
+      },
+    },
   },
+
   // css baseline overrides
   blockquote: {
     mb: "$14 !important",

From 3507869a2ede995e8635a800c99de31dd6ea45ec Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 14 Aug 2022 22:45:53 -0300
Subject: [PATCH 079/106] feat(docs-navbar): documentation in progress...

---
 apps/docs/content/docs/components/navbar.mdx  |  50 ++
 apps/docs/content/docs/components/text.mdx    |  34 +-
 .../content/docs/guide/nextui-plus-nextjs.mdx |  52 +-
 apps/docs/content/docs/manifest.json          |  27 +-
 .../src/components/icons/chevron-down.tsx     |  32 ++
 apps/docs/src/components/icons/index.ts       |   2 +
 apps/docs/src/components/icons/scale.tsx      |  38 ++
 .../components/playground/dynamic-live.tsx    |  12 +-
 .../src/components/playground/playground.tsx  |   4 +
 apps/docs/src/layouts/default.tsx             |   2 +-
 .../src/pages/examples/navbar/bordered.tsx    |  33 ++
 .../src/pages/examples/navbar/compact.tsx     |  33 ++
 .../examples/navbar/cursor-highlight.tsx      |  35 ++
 .../src/pages/examples/navbar/floating.tsx    |   4 +-
 .../pages/examples/navbar/hide-on-scroll.tsx  |  35 ++
 .../docs/src/pages/examples/navbar/static.tsx |   4 +-
 .../docs/src/pages/examples/navbar/sticky.tsx |   4 +-
 .../examples/navbar/with-dropdown-menu.tsx    | 128 +++++
 .../examples/navbar/with-toggle-button.tsx    |  67 +++
 .../react/src/dropdown/dropdown.styles.ts     |   2 +-
 packages/react/src/navbar/navbar-brand.tsx    |   6 +-
 packages/react/src/navbar/navbar-link.tsx     |   6 +-
 packages/react/src/navbar/navbar-toggle.tsx   |   4 +-
 packages/react/src/navbar/navbar.stories.tsx  |   2 +-
 packages/react/src/navbar/navbar.styles.ts    | 519 +++++++++---------
 packages/react/src/navbar/use-navbar.ts       |  14 +-
 packages/react/src/text/text.styles.ts        |  66 +--
 packages/react/src/theme/common.ts            |   2 +-
 packages/react/src/theme/shared-css.ts        |  66 +++
 29 files changed, 906 insertions(+), 377 deletions(-)
 create mode 100644 apps/docs/src/components/icons/chevron-down.tsx
 create mode 100644 apps/docs/src/components/icons/scale.tsx
 create mode 100644 apps/docs/src/pages/examples/navbar/bordered.tsx
 create mode 100644 apps/docs/src/pages/examples/navbar/compact.tsx
 create mode 100644 apps/docs/src/pages/examples/navbar/cursor-highlight.tsx
 create mode 100644 apps/docs/src/pages/examples/navbar/hide-on-scroll.tsx
 create mode 100644 apps/docs/src/pages/examples/navbar/with-dropdown-menu.tsx
 create mode 100644 apps/docs/src/pages/examples/navbar/with-toggle-button.tsx

diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index 4da1b2d284..b612bb7a9d 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -19,7 +19,15 @@ import { Navbar } from "@nextui-org/react";
 <Playground
   asIframe
   title="Static"
+  desc="Badge with default styles, used in standalone when `content` prop is empty."
   iframeSrc="/examples/navbar/static"
+  files={navbarContent.staticVariant}
+/>
+
+<Playground
+  asIframe
+  title="Bordered"
+  iframeSrc="/examples/navbar/bordered"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.staticVariant}
 />
@@ -39,3 +47,45 @@ import { Navbar } from "@nextui-org/react";
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.floatingVariant}
 />
+
+<Playground
+  asIframe
+  title="Compact"
+  iframeSrc="/examples/navbar/compact"
+  desc="Badge with default styles, used in standalone when `content` prop is empty."
+  files={navbarContent.staticVariant}
+/>
+
+<Playground
+  asIframe
+  title="Hide on scroll"
+  iframeSrc="/examples/navbar/hide-on-scroll"
+  desc="Badge with default styles, used in standalone when `content` prop is empty."
+  files={navbarContent.floatingVariant}
+/>
+
+<Playground
+  asIframe
+  title="Cursor Highlight"
+  iframeSrc="/examples/navbar/cursor-highlight"
+  desc="Badge with default styles, used in standalone when `content` prop is empty."
+  files={navbarContent.staticVariant}
+/>
+
+<Playground
+  asIframe
+  title="With Toggle Button"
+  previewHeight="600px"
+  iframeSrc="/examples/navbar/with-toggle-button"
+  desc="Badge with default styles, used in standalone when `content` prop is empty."
+  files={navbarContent.floatingVariant}
+/>
+
+<Playground
+  asIframe
+  title="With Dropdown Menu"
+  previewHeight="600px"
+  iframeSrc="/examples/navbar/with-dropdown-menu"
+  desc="Badge with default styles, used in standalone when `content` prop is empty."
+  files={navbarContent.floatingVariant}
+/>
diff --git a/apps/docs/content/docs/components/text.mdx b/apps/docs/content/docs/components/text.mdx
index 34b8ddd8f3..61e59e9e41 100644
--- a/apps/docs/content/docs/components/text.mdx
+++ b/apps/docs/content/docs/components/text.mdx
@@ -69,22 +69,24 @@ import { Text } from "@nextui-org/react";
 
 #### Text Props
 
-| Attribute      | Type                                                                  | Description                         | Default   |
-| -------------- | --------------------------------------------------------------------- | ----------------------------------- | --------- |
-| **h1 - h6**    | `boolean`                                                             | Component name                      | `false`   |
-| **small**      | `boolean`                                                             | Component name                      | `false`   |
-| **span**       | `boolean`                                                             | Component name                      | `false`   |
-| **del**        | `boolean`                                                             | Component name                      | `false`   |
-| **i**          | `boolean`                                                             | Component name                      | `false`   |
-| **em**         | `boolean`                                                             | Component name                      | `false`   |
-| **b**          | `boolean`                                                             | Component name                      | `false`   |
-| **blockquote** | `boolean`                                                             | Component name                      | `false`   |
-| **transform**  | [TextTransforms](#text-transforms)                                    | text-transform prop                 | `none`    |
-| **size**       | `string` `number` [FontSize](/docs/theme/default-theme#2-font-sizes) | Text size                           | `inherit` |
-| **color**      | [SimpleColors](#simple-colors) `string`                               | Text color                          | `default` |
-| **weight**     | [TextWeights](#text-weights)                                          | Text weight                         | `noset`   |
-| **css**        | `Stitches.CSS`                                                        | Override Default CSS style          | -         |
-| **as**         | `keyof JSX.IntrinsicElements`                                         | Changes which tag component outputs | `p`       |
+| Attribute        | Type                                                                 | Description                                                       | Default   |
+| ---------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------- | --------- |
+| **h1 - h6**      | `boolean`                                                            | Component name                                                    | `false`   |
+| **small**        | `boolean`                                                            | Component name                                                    | `false`   |
+| **span**         | `boolean`                                                            | Component name                                                    | `false`   |
+| **del**          | `boolean`                                                            | Component name                                                    | `false`   |
+| **i**            | `boolean`                                                            | Component name                                                    | `false`   |
+| **em**           | `boolean`                                                            | Component name                                                    | `false`   |
+| **b**            | `boolean`                                                            | Component name                                                    | `false`   |
+| **blockquote**   | `boolean`                                                            | Component name                                                    | `false`   |
+| **transform**    | [TextTransforms](#text-transforms)                                   | text-transform prop                                               | `none`    |
+| **size**         | `string` `number` [FontSize](/docs/theme/default-theme#2-font-sizes) | Text size                                                         | `inherit` |
+| **color**        | [SimpleColors](#simple-colors) `string`                              | Text color                                                        | `default` |
+| **weight**       | [TextWeights](#text-weights)                                         | Text weight                                                       | `noset`   |
+| **hideIn** `new` | `xs` `sm` `md` `lg` `xl`                                             | Whether the Text should be hidden from selected breakpoint.       | -         |
+| **showIn** `new` | `xs` `sm` `md` `lg` `xl`                                             | Whether the Text should be visible only from selected breakpoint. | -         |
+| **css**          | `Stitches.CSS`                                                       | Override Default CSS style                                        | -         |
+| **as**           | `keyof JSX.IntrinsicElements`                                        | Changes which tag component outputs                               | `p`       |
 
 <Spacer y={2} />
 
diff --git a/apps/docs/content/docs/guide/nextui-plus-nextjs.mdx b/apps/docs/content/docs/guide/nextui-plus-nextjs.mdx
index fc8e9f3116..78870f37e0 100644
--- a/apps/docs/content/docs/guide/nextui-plus-nextjs.mdx
+++ b/apps/docs/content/docs/guide/nextui-plus-nextjs.mdx
@@ -6,9 +6,9 @@ url: https://nextui.org/docs/nextui-plus-nextjs
 
 # NextUI + Next.js
 
-NextUI is totally compatible with <Link target="_blank" color rel="nofollow" href="https://nextjs.org">Next.js</Link> you just need to customize the <Link target="_blank" color rel="nofollow" href="https://nextjs.org/docs/advanced-features/custom-app">\_app.jsx</Link> entry file to load the provider.
+NextUI is totally compatible with <a target="_blank" rel="nofollow" href="https://nextjs.org">Next.js</a> you just need to customize the <a target="_blank" rel="nofollow" href="https://nextjs.org/docs/advanced-features/custom-app">\_app.jsx</a> entry file to load the provider.
 
-Start your Next.js project with <Link target="\_blank" color rel="nofollow" href="https://github.com/nextui-org/nextui/tree/main/examples/create-next-app"> this example</Link>.
+Start your Next.js project with <a target="_blank" rel="nofollow" href="https://github.com/nextui-org/nextui/tree/main/examples/create-next-app"> this example</a>.
 
 <CarbonAd />
 
@@ -20,46 +20,36 @@ All Components of `@nextui-org/react` are compatible with **Server Render**. In
 
 Server-side rendering (SSR) is the process of rendering web pages on a server and passing them to the browser (client-side),
 instead of rendering them in the browser. SSR sends a fully rendered page to the client; the client's JavaScript
-bundle takes over and enables the SPA framework to operate, the best option to use server side render in React.js is using <Link target="_blank" color rel="nofollow" href="https://nextjs.org">Next.js</Link>.
+bundle takes over and enables the SPA framework to operate, the best option to use server side render in React.js is using <a target="_blank" color rel="nofollow" href="https://nextjs.org">Next.js</a>.
 
 If you are worried about losing the advantages of a Single Page Application by implementing server-side rendering, you can use the `hybrid render` application.
-Please read <Link color href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support" rel="nofollow">
-the post from the Next.js team</Link> to learn more.
-
-<Text>
-  In addition, for <Text b>server-side render</Text> and web applications, we
-  strongly recommend that you read this famous post&nbsp;
-  <Link
-    color
-    href="https://rauchg.com/2014/7-principles-of-rich-web-applications"
-    rel="nofollow"
-    target="_blank"
-  >
-    7-principles-of-rich-web-applications
-  </Link> from <Text em>Guillermo Rauch</Text>.
-</Text>
+Please read <a target="_blank" rel="nofollow" href="https://nextjs.org/blog/next-9-3#next-gen-static-site-generation-ssg-support">
+the post from the Next.js team</a> to learn more.
+
+In addition, for **server-side render** and web applications, we
+strongly recommend that you read this famous post&nbsp;<a href="https://rauchg.com/2014/7-principles-of-rich-web-applications" rel="nofollow" target="_blank">7-principles-of-rich-web-applications</a> from _Guillermo Rauch_.
 
 <Spacer y={1} />
 
 ### Next.js
 
-In <Link target="_blank" color rel="nofollow" href="https://nextjs.org">Next.js</Link> framework, you need customization file `_document.js`,
-please refer to <Link target="_blank" href="https://nextjs.org/docs/advanced-features/custom-document" rel="nofollow">Next.js document here</Link>
+In <a target="_blank" rel="nofollow" href="https://nextjs.org">Next.js</a> framework, you need customization file `_document.js`,
+please refer to <a target="_blank" href="https://nextjs.org/docs/advanced-features/custom-document" rel="nofollow">Next.js document here</a>
 to create file `_document.js`.
 
 Then we add the following code to the file:
 
 ```jsx
-import React from 'react';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { CssBaseline } from '@nextui-org/react';
+import React from "react";
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import { CssBaseline } from "@nextui-org/react";
 
 class MyDocument extends Document {
   static async getInitialProps(ctx) {
     const initialProps = await Document.getInitialProps(ctx);
     return {
       ...initialProps,
-      styles: React.Children.toArray([initialProps.styles])
+      styles: React.Children.toArray([initialProps.styles]),
     };
   }
 
@@ -79,17 +69,19 @@ class MyDocument extends Document {
 export default MyDocument;
 ```
 
-Here's an example of what your `_document.js` file should look like: <Link target="_blank" href="https://github.com/nextui-org/nextui/blob/main/examples/create-next-app/pages/_document.js" rel="nofollow" color>\_document.jsx</Link>.
+Here's an example of what your `_document.js` file should look like: <a target="_blank" href="https://github.com/nextui-org/nextui/blob/main/examples/create-next-app/pages/_document.js" rel="nofollow" color>\_document.jsx</a>.
+
+<Spacer y={1}/>
 
 ### Custom Server
 
 In the custom server, also get the style set from function `CssBaseline.flush` as shown below.
 
 ```jsx
-import React from 'react';
-import ReactDOM from 'react-dom/server';
-import { CssBaseline } from '@nextui-org/react';
-import App from './app';
+import React from "react";
+import ReactDOM from "react-dom/server";
+import { CssBaseline } from "@nextui-org/react";
+import App from "./app";
 
 export default (req, res) => {
   const app = ReactDOM.renderToString(<App />);
@@ -102,6 +94,6 @@ export default (req, res) => {
       </body>
     </html>
   );
-  res.end('<!doctype html>' + html);
+  res.end("<!doctype html>" + html);
 };
 ```
diff --git a/apps/docs/content/docs/manifest.json b/apps/docs/content/docs/manifest.json
index 1234ac9786..30463d0b11 100644
--- a/apps/docs/content/docs/manifest.json
+++ b/apps/docs/content/docs/manifest.json
@@ -126,6 +126,18 @@
               "keywords": "collapse, accordion, expand, reveal",
               "path": "/docs/components/collapse.mdx"
             },
+            {
+              "title": "Navbar",
+              "keywords": "navbar, nav, navbar, navigation, menu, header",
+              "path": "/docs/components/navbar.mdx",
+              "newPost": true
+            },
+            {
+              "title": "Badge",
+              "keywords": "badge, status, display, count, highlight",
+              "path": "/docs/components/badge.mdx",
+              "newPost": true
+            },
             {
               "title": "Input",
               "keywords": "text input, input, textarea",
@@ -176,12 +188,6 @@
               "keywords": "progress, bar, task, display, activity",
               "path": "/docs/components/progress.mdx"
             },
-            {
-              "title": "Navbar",
-              "keywords": "navbar, nav, navbar, navigation, menu, header",
-              "path": "/docs/components/navbar.mdx",
-              "newPost": true
-            },
             {
               "title": "Select",
               "comingSoon": true
@@ -201,16 +207,11 @@
               "keywords": "toggle, switch",
               "path": "/docs/components/switch.mdx"
             },
-            {
-              "title": "Badge",
-              "keywords": "badge, status, display, count, highlight",
-              "path": "/docs/components/badge.mdx",
-              "newPost": true
-            },
             {
               "title": "Text",
               "keywords": "text, txt, paragraph",
-              "path": "/docs/components/text.mdx"
+              "path": "/docs/components/text.mdx",
+              "updated": true
             },
             {
               "title": "Link",
diff --git a/apps/docs/src/components/icons/chevron-down.tsx b/apps/docs/src/components/icons/chevron-down.tsx
new file mode 100644
index 0000000000..91de233f34
--- /dev/null
+++ b/apps/docs/src/components/icons/chevron-down.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+
+export interface Props {
+  fill?: string;
+  width?: number;
+  height?: number;
+  size?: number;
+}
+
+const ChevronDown: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export default ChevronDown;
diff --git a/apps/docs/src/components/icons/index.ts b/apps/docs/src/components/icons/index.ts
index 8ddc1fac36..f7468d1b46 100644
--- a/apps/docs/src/components/icons/index.ts
+++ b/apps/docs/src/components/icons/index.ts
@@ -20,6 +20,7 @@ export {default as Activity} from "./activity";
 export {default as Camera} from "./camera";
 export {default as ChevronLeft} from "./chevron-left";
 export {default as ChevronRight} from "./chevron-right";
+export {default as ChevronDown} from "./chevron-down";
 export {default as ArrowLeft} from "./arrow-left";
 export {default as ArrowRight} from "./arrow-right";
 export {default as Copy} from "./copy";
@@ -70,3 +71,4 @@ export {default as NextJsLogo} from "./nextjs-logo";
 export {default as VercelLogo} from "./vercel";
 export {default as TypescriptLogo} from "./typescript";
 export {default as JavascriptLogo} from "./javascript";
+export {default as Scale} from "./scale";
diff --git a/apps/docs/src/components/icons/scale.tsx b/apps/docs/src/components/icons/scale.tsx
new file mode 100644
index 0000000000..89846839d0
--- /dev/null
+++ b/apps/docs/src/components/icons/scale.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+
+export interface Props {
+  fill?: string;
+  width?: number;
+  height?: number;
+  size?: number;
+}
+
+const Scale: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7ZM18 6 6 18"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M18 10V6h-4M6 14v4h4"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export default Scale;
diff --git a/apps/docs/src/components/playground/dynamic-live.tsx b/apps/docs/src/components/playground/dynamic-live.tsx
index e724f91a42..0496d32b25 100644
--- a/apps/docs/src/components/playground/dynamic-live.tsx
+++ b/apps/docs/src/components/playground/dynamic-live.tsx
@@ -18,6 +18,7 @@ import makeCodeTheme from "./code-theme";
 
 export interface Props {
   code: string;
+  height?: string | number;
   showEditor?: boolean;
   noInline?: boolean;
   initialEditorOpen?: boolean;
@@ -32,6 +33,7 @@ const defaultProps = {
   showEditor: true,
   enableResize: false,
   showWindowActions: false,
+  height: "auto",
 };
 
 const WindowIframe = Components.styled("iframe", {
@@ -144,11 +146,6 @@ const LiveContainer = Components.styled(Box, {
         my: "$10",
       },
     },
-    enableResize: {
-      true: {
-        height: "600px",
-      },
-    },
   },
 });
 
@@ -174,6 +171,7 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
   enableResize,
   iframeSrc,
   iframeTitle,
+  height,
   css,
 }) => {
   const codeTheme = makeCodeTheme();
@@ -196,7 +194,9 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
     <LiveProvider code={code} noInline={noInline} scope={scope} theme={codeTheme}>
       <LiveContainer
         className="dynamic-live-container"
-        enableResize={enableResize}
+        css={{
+          height: enableResize && height === "auto" ? "320px" : height,
+        }}
         showWindowActions={showWindowActions}
       >
         <StyledWrapper
diff --git a/apps/docs/src/components/playground/playground.tsx b/apps/docs/src/components/playground/playground.tsx
index 4ea7274686..7e303acbd4 100644
--- a/apps/docs/src/components/playground/playground.tsx
+++ b/apps/docs/src/components/playground/playground.tsx
@@ -41,6 +41,7 @@ interface Props {
   showWindowActions?: boolean;
   iframeSrc?: string;
   asIframe?: boolean;
+  previewHeight?: string | number;
   overflow?: "auto" | "visible" | "hidden";
   files?: SandpackFiles;
   template?: SandpackPredefinedTemplate;
@@ -59,6 +60,7 @@ const defaultProps = {
   initialEditorOpen: false,
   showWindowActions: false,
   enableResize: false,
+  previewHeight: "auto",
   overflow: "visible",
   bindings: {},
 };
@@ -78,6 +80,7 @@ const Playground: React.FC<PlaygroundProps> = ({
   iframeSrc,
   asIframe,
   overflow,
+  previewHeight,
   desc,
 }) => {
   const isSanpackEditor = !isEmpty(files);
@@ -164,6 +167,7 @@ const Playground: React.FC<PlaygroundProps> = ({
             <LiveCode
               code={code}
               enableResize={enableResize || asIframe}
+              height={previewHeight}
               iframeSrc={iframeSrc}
               iframeTitle={title}
               noInline={noInline}
diff --git a/apps/docs/src/layouts/default.tsx b/apps/docs/src/layouts/default.tsx
index fa1d7cecee..58767364ba 100644
--- a/apps/docs/src/layouts/default.tsx
+++ b/apps/docs/src/layouts/default.tsx
@@ -18,7 +18,7 @@ const DefaultLayout: React.FC<React.PropsWithChildren<Props>> = ({children, rout
   return (
     <div id="app-container">
       <Header />
-      <NotifyBanner href="/docs/components/dropdown" text="Dropdown component" />
+      <NotifyBanner href="/docs/components/navbar" text="Navbar component" />
       <Navbar hasNotify isHome routes={routes} />
       <Container
         alignContent="space-between"
diff --git a/apps/docs/src/pages/examples/navbar/bordered.tsx b/apps/docs/src/pages/examples/navbar/bordered.tsx
new file mode 100644
index 0000000000..16e8d67c13
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/bordered.tsx
@@ -0,0 +1,33 @@
+import {Examples} from "@components";
+import {Navbar, Text, Button, Link} from "@nextui-org/react";
+
+export default function NavbarBorderedExample() {
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered>
+        <Navbar.Brand>
+          <Examples.AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content hideIn="xs">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/apps/docs/src/pages/examples/navbar/compact.tsx b/apps/docs/src/pages/examples/navbar/compact.tsx
new file mode 100644
index 0000000000..2ab9ee3db9
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/compact.tsx
@@ -0,0 +1,33 @@
+import {Examples} from "@components";
+import {Navbar, Text, Button, Link} from "@nextui-org/react";
+
+export default function NavbarBorderedExample() {
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered isCompact variant="sticky">
+        <Navbar.Brand>
+          <Examples.AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content hideIn="xs">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#" size="sm">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/apps/docs/src/pages/examples/navbar/cursor-highlight.tsx b/apps/docs/src/pages/examples/navbar/cursor-highlight.tsx
new file mode 100644
index 0000000000..8937bfbc20
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/cursor-highlight.tsx
@@ -0,0 +1,35 @@
+import {Examples} from "@components";
+import {Navbar, Text, Button, Link, useTheme} from "@nextui-org/react";
+
+export default function NavbarCursorHighlightExample() {
+  const {isDark} = useTheme();
+
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered={isDark} variant="sticky">
+        <Navbar.Brand>
+          <Examples.AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content enableCursorHighlight hideIn="xs">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/apps/docs/src/pages/examples/navbar/floating.tsx b/apps/docs/src/pages/examples/navbar/floating.tsx
index d24b8cfb8e..0b3ae8bfdb 100644
--- a/apps/docs/src/pages/examples/navbar/floating.tsx
+++ b/apps/docs/src/pages/examples/navbar/floating.tsx
@@ -9,11 +9,11 @@ export default function NavbarFloatingExample() {
       <Navbar isBordered={isDark} variant="floating">
         <Navbar.Brand>
           <Examples.AcmeLogo />
-          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+          <Text b color="inherit" hideIn="xs">
             ACME
           </Text>
         </Navbar.Brand>
-        <Navbar.Content css={{"@xsMax": {d: "none"}}} gap="$6">
+        <Navbar.Content hideIn="xs">
           <Navbar.Link href="#">Features</Navbar.Link>
           <Navbar.Link href="#">Customers</Navbar.Link>
           <Navbar.Link href="#">Pricing</Navbar.Link>
diff --git a/apps/docs/src/pages/examples/navbar/hide-on-scroll.tsx b/apps/docs/src/pages/examples/navbar/hide-on-scroll.tsx
new file mode 100644
index 0000000000..1ca4918866
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/hide-on-scroll.tsx
@@ -0,0 +1,35 @@
+import {Examples} from "@components";
+import {Navbar, Text, Button, Link, useTheme} from "@nextui-org/react";
+
+export default function NavbarHideOnScrollExample() {
+  const {isDark} = useTheme();
+
+  return (
+    <Examples.NavbarLayout>
+      <Navbar shouldHideOnScroll isBordered={isDark} variant="sticky">
+        <Navbar.Brand>
+          <Examples.AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content hideIn="xs">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/apps/docs/src/pages/examples/navbar/static.tsx b/apps/docs/src/pages/examples/navbar/static.tsx
index 7e49cf5b2e..82962a417c 100644
--- a/apps/docs/src/pages/examples/navbar/static.tsx
+++ b/apps/docs/src/pages/examples/navbar/static.tsx
@@ -7,11 +7,11 @@ export default function NavbarStaticExample() {
       <Navbar>
         <Navbar.Brand>
           <Examples.AcmeLogo />
-          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+          <Text b color="inherit" hideIn="xs">
             ACME
           </Text>
         </Navbar.Brand>
-        <Navbar.Content css={{"@xsMax": {d: "none"}}} gap="$6">
+        <Navbar.Content hideIn="xs">
           <Navbar.Link href="#">Features</Navbar.Link>
           <Navbar.Link href="#">Customers</Navbar.Link>
           <Navbar.Link href="#">Pricing</Navbar.Link>
diff --git a/apps/docs/src/pages/examples/navbar/sticky.tsx b/apps/docs/src/pages/examples/navbar/sticky.tsx
index 1e201c3f3b..ace577cf7e 100644
--- a/apps/docs/src/pages/examples/navbar/sticky.tsx
+++ b/apps/docs/src/pages/examples/navbar/sticky.tsx
@@ -9,11 +9,11 @@ export default function NavbarStickyExample() {
       <Navbar isBordered={isDark} variant="sticky">
         <Navbar.Brand>
           <Examples.AcmeLogo />
-          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+          <Text b color="inherit" hideIn="xs">
             ACME
           </Text>
         </Navbar.Brand>
-        <Navbar.Content css={{"@xsMax": {d: "none"}}} gap="$6">
+        <Navbar.Content hideIn="xs">
           <Navbar.Link href="#">Features</Navbar.Link>
           <Navbar.Link href="#">Customers</Navbar.Link>
           <Navbar.Link href="#">Pricing</Navbar.Link>
diff --git a/apps/docs/src/pages/examples/navbar/with-dropdown-menu.tsx b/apps/docs/src/pages/examples/navbar/with-dropdown-menu.tsx
new file mode 100644
index 0000000000..e86da89d39
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/with-dropdown-menu.tsx
@@ -0,0 +1,128 @@
+import {Examples, ChevronDown, TagUser, Server, Flash, Activity, Scale} from "@components";
+import {Navbar, Text, Button, Link, Dropdown} from "@nextui-org/react";
+
+export default function NavbarWithToggleButtonExample() {
+  const icons = {
+    chevron: <ChevronDown fill="currentColor" size={16} />,
+    scale: <Scale fill="var(--nextui-colors-warning)" size={30} />,
+    activity: <Activity fill="var(--nextui-colors-secondary)" size={30} />,
+    flash: <Flash fill="var(--nextui-colors-primary)" size={30} />,
+    server: <Server fill="var(--nextui-colors-success)" size={30} />,
+    user: <TagUser fill="var(--nextui-colors-error)" size={30} />,
+  };
+
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Content>
+          <Navbar.Brand>
+            <Examples.AcmeLogo />
+            <Text b color="inherit" hideIn="xs">
+              ACME
+            </Text>
+          </Navbar.Brand>
+        </Navbar.Content>
+        <Navbar.Content
+          enableCursorHighlight
+          activeColor="secondary"
+          hideIn="xs"
+          variant="underline"
+        >
+          <Dropdown isBordered>
+            <Navbar.Item>
+              <Dropdown.Button
+                auto
+                light
+                css={{
+                  px: 0,
+                  dflex: "center",
+                  svg: {pe: "none"},
+                }}
+                iconRight={icons.chevron}
+                ripple={false}
+              >
+                Features
+              </Dropdown.Button>
+            </Navbar.Item>
+            <Dropdown.Menu
+              aria-label="ACME features"
+              css={{
+                $$dropdownMenuWidth: "340px",
+                $$dropdownItemHeight: "70px",
+                "& .nextui-dropdown-item": {
+                  py: "$4",
+                  // dropdown item left icon
+                  svg: {
+                    color: "$secondary",
+                    mr: "$4",
+                  },
+                  // dropdown item title
+                  "& .nextui-dropdown-item-content": {
+                    w: "100%",
+                    fontWeight: "$semibold",
+                  },
+                },
+              }}
+            >
+              <Dropdown.Item
+                key="autoscaling"
+                showFullDescription
+                description="ACME scales apps to meet user demand, automagically, based on load."
+                icon={icons.scale}
+              >
+                Autoscaling
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="usage_metrics"
+                showFullDescription
+                description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+                icon={icons.activity}
+              >
+                Usage Metrics
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="production_ready"
+                showFullDescription
+                description="ACME runs on ACME, join us and others serving requests at web scale."
+                icon={icons.flash}
+              >
+                Production Ready
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="99_uptime"
+                showFullDescription
+                description="Applications stay on the grid with high availability and high uptime guarantees."
+                icon={icons.server}
+              >
+                +99% Uptime
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="supreme_support"
+                showFullDescription
+                description="Overcome any challenge with a supporting team ready to respond."
+                icon={icons.user}
+              >
+                +Supreme Support
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} color="secondary" href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/apps/docs/src/pages/examples/navbar/with-toggle-button.tsx b/apps/docs/src/pages/examples/navbar/with-toggle-button.tsx
new file mode 100644
index 0000000000..d96a036042
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/with-toggle-button.tsx
@@ -0,0 +1,67 @@
+import {Examples} from "@components";
+import {Navbar, Text, Button, Link} from "@nextui-org/react";
+
+export default function NavbarWithToggleButtonExample() {
+  const collapseItems = [
+    "Store",
+    "Mac",
+    "iPad",
+    "iPhone",
+    "Watch",
+    "TV & Home",
+    "Music",
+    "Support",
+    "Store",
+    "Mac",
+    "iPad",
+    "iPhone",
+    "Watch",
+    "TV & Home",
+    "Music",
+    "Support",
+  ];
+
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Content>
+          <Navbar.Toggle aria-label="toggle navigation" />
+          <Navbar.Brand>
+            <Examples.AcmeLogo />
+            <Text b color="inherit" hideIn="xs">
+              ACME
+            </Text>
+          </Navbar.Brand>
+        </Navbar.Content>
+        <Navbar.Content
+          enableCursorHighlight
+          isCursorHighlightRounded
+          hideIn="sm"
+          variant="underline"
+        >
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+        <Navbar.Collapse>
+          {collapseItems.map((item, index) => (
+            <Navbar.CollapseItem key={`${item}-${index}`}>{item}</Navbar.CollapseItem>
+          ))}
+        </Navbar.Collapse>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/packages/react/src/dropdown/dropdown.styles.ts b/packages/react/src/dropdown/dropdown.styles.ts
index a6d9ab8e47..6ab743d7bf 100644
--- a/packages/react/src/dropdown/dropdown.styles.ts
+++ b/packages/react/src/dropdown/dropdown.styles.ts
@@ -32,7 +32,7 @@ export const StyledDropdownItemKbd = styled("kbd", {
   fontFamily: "$sans",
   boxShadow: "none",
   bg: "transparent",
-  transition: "border 0.26s ease 0s",
+  transition: "border 0.12s ease 0s",
 });
 
 export const StyledDropdownItemContentWrapper = styled("div", {
diff --git a/packages/react/src/navbar/navbar-brand.tsx b/packages/react/src/navbar/navbar-brand.tsx
index a55c7fbd21..eddd42ae2c 100644
--- a/packages/react/src/navbar/navbar-brand.tsx
+++ b/packages/react/src/navbar/navbar-brand.tsx
@@ -5,12 +5,14 @@ import {useDOMRef} from "../utils/dom";
 import clsx from "../utils/clsx";
 import {__DEV__} from "../utils/assertion";
 
-import {StyledNavbarBrand} from "./navbar.styles";
+import {StyledNavbarBrand, NavbarBrandVariantsProps} from "./navbar.styles";
 
-export interface NavbarBrandProps extends HTMLNextUIProps<"span"> {
+export interface Props extends HTMLNextUIProps<"span"> {
   children?: React.ReactNode | React.ReactNode[];
 }
 
+export type NavbarBrandProps = Props & NavbarBrandVariantsProps;
+
 const NavbarBrand = forwardRef<NavbarBrandProps, "span">((props, ref) => {
   const domRef = useDOMRef(ref);
 
diff --git a/packages/react/src/navbar/navbar-link.tsx b/packages/react/src/navbar/navbar-link.tsx
index 80e18d28c4..dd7fea087e 100644
--- a/packages/react/src/navbar/navbar-link.tsx
+++ b/packages/react/src/navbar/navbar-link.tsx
@@ -20,6 +20,7 @@ const NavbarLink = forwardRef<NavbarLinkProps, "a">((props, ref) => {
   const domRef = useDOMRef(ref);
 
   const {
+    css,
     children,
     isActive,
     color,
@@ -28,7 +29,8 @@ const NavbarLink = forwardRef<NavbarLinkProps, "a">((props, ref) => {
     itemCss,
     itemClassName,
     isDisabled,
-    css,
+    hideIn,
+    showIn,
     variant,
     className,
     ...otherProps
@@ -53,8 +55,10 @@ const NavbarLink = forwardRef<NavbarLinkProps, "a">((props, ref) => {
       activeColor={activeColor}
       className={itemClassName}
       css={itemCss}
+      hideIn={hideIn}
       isActive={isActive}
       isDisabled={isDisabled}
+      showIn={showIn}
       underlineHeight={underlineHeight}
       variant={variant}
     >
diff --git a/packages/react/src/navbar/navbar-toggle.tsx b/packages/react/src/navbar/navbar-toggle.tsx
index ffe160c8b7..50e3613ac1 100644
--- a/packages/react/src/navbar/navbar-toggle.tsx
+++ b/packages/react/src/navbar/navbar-toggle.tsx
@@ -25,7 +25,7 @@ export type NavbarToggleProps = Props &
   NavbarToggleVariantsProps;
 
 const NavbarToggle = forwardRef<NavbarToggleProps, "button">((props, ref) => {
-  const {children, className, autoFocus, onChange, as, css} = props;
+  const {children, className, autoFocus, onChange, as, css, ...otherProps} = props;
 
   const {parentRef, setIsCollapseOpen} = useNavbarContext();
 
@@ -54,7 +54,7 @@ const NavbarToggle = forwardRef<NavbarToggleProps, "button">((props, ref) => {
       css={css}
       isFocusVisible={isFocusVisible}
       isPressed={isPressed}
-      {...mergeProps(buttonProps, focusProps)}
+      {...mergeProps(buttonProps, focusProps, otherProps)}
     >
       {child}
     </StyledNavbarToggle>
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index 8c8bb4ba5c..a7b6946886 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -158,7 +158,7 @@ export const Static = () => (
 
 export const Sticky = () => (
   <App>
-    <Navbar isBordered variant="sticky">
+    <Navbar isBordered isCompact variant="sticky">
       <DefaultNavbarContent />
     </Navbar>
   </App>
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index dc6013f5d7..62d927be7f 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -1,5 +1,5 @@
 import {styled, VariantProps} from "../theme/stitches.config";
-import {cssFocusVisible} from "../theme/shared-css";
+import {cssFocusVisible, cssHideShowIn} from "../theme/shared-css";
 
 const itemColors = {
   default: {
@@ -91,55 +91,59 @@ export const StyledNavbarCollapseWrapper = styled(StyledBaseNavbarList, {
   maxHeight: "100%",
 });
 
-export const StyledNavbarCollapse = styled("div", {
-  $$navbarListColor: "$colors$text",
-  $$navbarListBackgroundColor: "$colors$background",
-  $$navbarListBlurBackgroundColor: "$colors$backgroundAlpha",
-  $$navbarListBlur: "16px",
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  background: "$$navbarListBackgroundColor",
-  width: "100%",
-  height: "0px",
-  zIndex: "$4",
-  boxSizing: "border-box",
-  overflow: "hidden",
-  variants: {
-    isOpen: {
-      true: {
-        top: "$$navbarHeight",
-        pb: "$$navbarHeight",
-        height: "100vh",
+export const StyledNavbarCollapse = styled(
+  "div",
+  {
+    $$navbarListColor: "$colors$text",
+    $$navbarListBackgroundColor: "$colors$background",
+    $$navbarListBlurBackgroundColor: "$colors$backgroundAlpha",
+    $$navbarListBlur: "16px",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    background: "$$navbarListBackgroundColor",
+    width: "100%",
+    height: "0px",
+    zIndex: "$4",
+    boxSizing: "border-box",
+    overflow: "hidden",
+    variants: {
+      isOpen: {
+        true: {
+          top: "$$navbarHeight",
+          pb: "$$navbarHeight",
+          height: "100vh",
+        },
       },
-    },
-    disableBlur: {
-      false: {
-        "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
-          bg: "$$navbarListBlurBackgroundColor",
-          backdropFilter: "saturate(180%) blur($$navbarListBlur)",
-          "@safari": {
-            [`& ${StyledNavbarCollapseWrapper}`]: {
-              bg: "$$navbarListBlurBackgroundColor",
-              backdropFilter: "saturate(180%) blur($$navbarListBlur)",
+      disableBlur: {
+        false: {
+          "@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))": {
+            bg: "$$navbarListBlurBackgroundColor",
+            backdropFilter: "saturate(180%) blur($$navbarListBlur)",
+            "@safari": {
+              [`& ${StyledNavbarCollapseWrapper}`]: {
+                bg: "$$navbarListBlurBackgroundColor",
+                backdropFilter: "saturate(180%) blur($$navbarListBlur)",
+              },
             },
           },
         },
       },
-    },
-    disableAnimation: {
-      true: {
-        [`& ${StyledNavbarCollapseItem}`]: {
-          transition: "none",
+      disableAnimation: {
+        true: {
+          [`& ${StyledNavbarCollapseItem}`]: {
+            transition: "none",
+          },
         },
       },
     },
+    defaultVariants: {
+      disableBlur: "false",
+    },
   },
-  defaultVariants: {
-    disableBlur: "false",
-  },
-});
+  cssHideShowIn,
+);
 
 export const StyledNavbarToggleIconContainer = styled("div", {
   dflex: "center",
@@ -192,214 +196,223 @@ export const StyledNavbarToggle = styled(
       },
     },
   },
+  cssHideShowIn,
   cssFocusVisible,
 );
 
-export const StyledNavbarBrand = styled("span", {
-  display: "flex",
-  flexWrap: "nowrap",
-  flexDirection: "row",
-  justifyContent: "flex-start",
-  bg: "transparent",
-  alignItems: "center",
-  textDecoration: "none",
-  fontSize: "$base",
-  whiteSpace: "nowrap",
-  boxSizing: "border-box",
-});
-
-export const StyledNavbarItem = styled(StyledBaseNavbarItem, {
-  $$navbarItemFontSize: "inherit",
-  $$navbarItemFontWeight: "$fontWeights$normal",
-  fontSize: "$$navbarItemFontSize",
-  fontWeight: "$$navbarItemFontWeight",
-  position: "relative",
-  "> *": {
-    zIndex: "$2",
-    fontSize: "inherit !important",
-    fontWeight: "inherit !important",
-  },
-  "&:before": {
-    opacity: 0,
-    zIndex: "$1",
-    content: '""',
-    display: "block",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    borderRadius: "$sm",
-  },
-  "&:after": {
-    opacity: 0,
-    zIndex: "$1",
-    content: '""',
-    display: "block",
-    position: "absolute",
-    left: "0",
-    right: "0",
-    bottom: "0",
-    height: "$$navbarItemUnderlineHeight",
-    borderRadius: "0px",
-    background: "$$navbarItemActiveColor",
+export const StyledNavbarBrand = styled(
+  "span",
+  {
+    display: "flex",
+    flexWrap: "nowrap",
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    bg: "transparent",
+    alignItems: "center",
+    textDecoration: "none",
+    fontSize: "$base",
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
   },
-  variants: {
-    activeColor: itemColors,
-    isActive: {
-      true: {
-        color: "$$navbarItemActiveColor",
-        $$navbarItemFontWeight: "$fontWeights$semibold",
-      },
-    },
-    variant: {
-      default: {},
-      underline: {
-        color: "inherit",
-        height: "100%",
-      },
-      "underline-rounded": {
-        color: "inherit",
-        height: "100%",
-      },
-      highlight: {},
-      "highlight-solid": {},
-      "highlight-rounded": {},
-      "highlight-solid-rounded": {},
+  cssHideShowIn,
+);
+
+export const StyledNavbarItem = styled(
+  StyledBaseNavbarItem,
+  {
+    $$navbarItemFontSize: "inherit",
+    $$navbarItemFontWeight: "$fontWeights$normal",
+    fontSize: "$$navbarItemFontSize",
+    fontWeight: "$$navbarItemFontWeight",
+    position: "relative",
+    "> *": {
+      zIndex: "$2",
+      fontSize: "inherit !important",
+      fontWeight: "inherit !important",
     },
-    underlineHeight: {
-      light: {
-        $$navbarItemUnderlineHeight: "2px",
-      },
-      normal: {
-        $$navbarItemUnderlineHeight: "4px",
-      },
-      bold: {
-        $$navbarItemUnderlineHeight: "6px",
-      },
-      extrabold: {
-        $$navbarItemUnderlineHeight: "8px",
-      },
-      black: {
-        $$navbarItemUnderlineHeight: "10px",
-      },
+    "&:before": {
+      opacity: 0,
+      zIndex: "$1",
+      content: '""',
+      display: "block",
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: "$sm",
     },
-    isDisabled: {
-      true: {
-        opacity: 0.5,
-        cursor: "not-allowed",
-      },
+    "&:after": {
+      opacity: 0,
+      zIndex: "$1",
+      content: '""',
+      display: "block",
+      position: "absolute",
+      left: "0",
+      right: "0",
+      bottom: "0",
+      height: "$$navbarItemUnderlineHeight",
+      borderRadius: "0px",
+      background: "$$navbarItemActiveColor",
     },
-  },
-  compoundVariants: [
-    /**
-     * @isActive true
-     * @variant underline
-     */
-    {
-      isActive: true,
-      variant: "underline",
-      css: {
-        color: "inherit",
-        "&:after": {
-          opacity: 1,
+    variants: {
+      activeColor: itemColors,
+      isActive: {
+        true: {
+          color: "$$navbarItemActiveColor",
+          $$navbarItemFontWeight: "$fontWeights$semibold",
         },
       },
-    },
-    /**
-     * @isActive true
-     * @variant underline
-     */
-    {
-      isActive: true,
-      variant: "underline-rounded",
-      css: {
-        color: "inherit",
-        "&:after": {
-          opacity: 1,
-          borderRadius: "calc($$navbarItemUnderlineHeight / 2)",
+      variant: {
+        default: {},
+        underline: {
+          color: "inherit",
+          height: "100%",
         },
-      },
-    },
-    /**
-     * @isActive true
-     * @variant highlight
-     */
-    {
-      isActive: true,
-      variant: "highlight",
-      css: {
-        color: "$$navbarItemHighlightTextColor",
-        "*:first-child": {
+        "underline-rounded": {
           color: "inherit",
+          height: "100%",
+        },
+        highlight: {},
+        "highlight-solid": {},
+        "highlight-rounded": {},
+        "highlight-solid-rounded": {},
+      },
+      underlineHeight: {
+        light: {
+          $$navbarItemUnderlineHeight: "2px",
+        },
+        normal: {
+          $$navbarItemUnderlineHeight: "4px",
+        },
+        bold: {
+          $$navbarItemUnderlineHeight: "6px",
         },
-        "&:before": {
-          opacity: 1,
-          background: "$$navbarItemHighlightBackgroundColor",
+        extrabold: {
+          $$navbarItemUnderlineHeight: "8px",
+        },
+        black: {
+          $$navbarItemUnderlineHeight: "10px",
+        },
+      },
+      isDisabled: {
+        true: {
+          opacity: 0.5,
+          cursor: "not-allowed",
         },
       },
     },
-    /**
-     * @isActive true
-     * @variant highlight-solid
-     */
-    {
-      isActive: true,
-      variant: "highlight-solid",
-      css: {
-        color: "$$navbarItemHighlightSolidTextColor",
-        "*:first-child": {
+    compoundVariants: [
+      /**
+       * @isActive true
+       * @variant underline
+       */
+      {
+        isActive: true,
+        variant: "underline",
+        css: {
           color: "inherit",
-        },
-        "&:before": {
-          opacity: 1,
-          background: "$$navbarItemHighlightSolidBackgroundColor",
+          "&:after": {
+            opacity: 1,
+          },
         },
       },
-    },
-    /**
-     * @isActive true
-     * @variant highlight-rounded
-     */
-    {
-      isActive: true,
-      variant: "highlight-rounded",
-      css: {
-        color: "$$navbarItemHighlightTextColor",
-        "*:first-child": {
+      /**
+       * @isActive true
+       * @variant underline
+       */
+      {
+        isActive: true,
+        variant: "underline-rounded",
+        css: {
           color: "inherit",
+          "&:after": {
+            opacity: 1,
+            borderRadius: "calc($$navbarItemUnderlineHeight / 2)",
+          },
         },
-        "&:before": {
-          opacity: 1,
-          background: "$$navbarItemHighlightBackgroundColor",
+      },
+      /**
+       * @isActive true
+       * @variant highlight
+       */
+      {
+        isActive: true,
+        variant: "highlight",
+        css: {
+          color: "$$navbarItemHighlightTextColor",
+          "*:first-child": {
+            color: "inherit",
+          },
+          "&:before": {
+            opacity: 1,
+            background: "$$navbarItemHighlightBackgroundColor",
+          },
         },
       },
-    },
-    /**
-     * @isActive true
-     * @variant highlight-solid
-     */
-    {
-      isActive: true,
-      variant: "highlight-solid-rounded",
-      css: {
-        color: "$$navbarItemHighlightSolidTextColor",
-        "*:first-child": {
-          color: "inherit",
+      /**
+       * @isActive true
+       * @variant highlight-solid
+       */
+      {
+        isActive: true,
+        variant: "highlight-solid",
+        css: {
+          color: "$$navbarItemHighlightSolidTextColor",
+          "*:first-child": {
+            color: "inherit",
+          },
+          "&:before": {
+            opacity: 1,
+            background: "$$navbarItemHighlightSolidBackgroundColor",
+          },
         },
-        "&:before": {
-          opacity: 1,
-          background: "$$navbarItemHighlightSolidBackgroundColor",
+      },
+      /**
+       * @isActive true
+       * @variant highlight-rounded
+       */
+      {
+        isActive: true,
+        variant: "highlight-rounded",
+        css: {
+          color: "$$navbarItemHighlightTextColor",
+          "*:first-child": {
+            color: "inherit",
+          },
+          "&:before": {
+            opacity: 1,
+            background: "$$navbarItemHighlightBackgroundColor",
+          },
         },
       },
+      /**
+       * @isActive true
+       * @variant highlight-solid
+       */
+      {
+        isActive: true,
+        variant: "highlight-solid-rounded",
+        css: {
+          color: "$$navbarItemHighlightSolidTextColor",
+          "*:first-child": {
+            color: "inherit",
+          },
+          "&:before": {
+            opacity: 1,
+            background: "$$navbarItemHighlightSolidBackgroundColor",
+          },
+        },
+      },
+    ],
+    defaultVariants: {
+      variant: "default",
+      activeColor: "default",
+      underlineHeight: "normal",
     },
-  ],
-  defaultVariants: {
-    variant: "default",
-    activeColor: "default",
-    underlineHeight: "normal",
   },
-});
+  cssHideShowIn,
+);
 
 // @internal
 export const StyledCursorHighlight = styled(StyledBaseNavbarItem, {
@@ -429,50 +442,27 @@ export const StyledCursorHighlight = styled(StyledBaseNavbarItem, {
   },
 });
 
-export const StyledNavbarContent = styled(StyledBaseNavbarList, {
-  $$navbarContentItemGap: "$space$10",
-  $$navbarContentItemHorizontalPadding: "$space$10",
-  d: "flex",
-  height: "100%",
-  flexWrap: "nowrap",
-  alignItems: "center",
-  gap: "$$navbarContentItemGap",
-  variants: {
-    hideIn: {
-      xs: {
-        "@xsMax": {
-          display: "none",
-        },
-      },
-      sm: {
-        "@smMax": {
-          display: "none",
-        },
-      },
-      md: {
-        "@mdMax": {
-          display: "none",
-        },
-      },
-      lg: {
-        "@lgMax": {
-          display: "none",
-        },
-      },
-      xl: {
-        "@xlMax": {
-          display: "none",
+export const StyledNavbarContent = styled(
+  StyledBaseNavbarList,
+  {
+    $$navbarContentItemGap: "$space$10",
+    $$navbarContentItemHorizontalPadding: "$space$10",
+    d: "flex",
+    height: "100%",
+    flexWrap: "nowrap",
+    alignItems: "center",
+    gap: "$$navbarContentItemGap",
+    variants: {
+      enableCursorHighlight: {
+        true: {
+          zIndex: "$2",
+          position: "relative",
         },
       },
     },
-    enableCursorHighlight: {
-      true: {
-        zIndex: "$2",
-        position: "relative",
-      },
-    },
   },
-});
+  cssHideShowIn,
+);
 
 export const StyledNavbarContainer = styled("div", {
   width: "100%",
@@ -560,9 +550,9 @@ export const StyledNavbar = styled("nav", {
     },
     isCompact: {
       true: {
-        $$navbarHeight: "calc($$navbarHeight * 0.658)",
+        $$navbarHeight: "$$navbarCompactHeight",
+        $$navbarItemMaxHeight: "$$navbarCompactItemMaxHeight",
         $$navbarBorderRadius: "$radii$md",
-        $$navbarItemMaxHeight: "calc($$navbarHeight * 0.6)",
       },
     },
     disableShadow: {
@@ -620,6 +610,7 @@ export const StyledNavbar = styled("nav", {
 });
 
 export type NavbarVariantsProps = VariantProps<typeof StyledNavbar>;
+export type NavbarBrandVariantsProps = VariantProps<typeof StyledNavbarBrand>;
 export type NavbarContentVariantsProps = VariantProps<typeof StyledNavbarContent>;
 export type NavbarItemVariantsProps = VariantProps<typeof StyledNavbarItem>;
 export type NavbarToggleVariantsProps = VariantProps<typeof StyledNavbarToggle>;
diff --git a/packages/react/src/navbar/use-navbar.ts b/packages/react/src/navbar/use-navbar.ts
index 623258d693..a575f7f1e0 100644
--- a/packages/react/src/navbar/use-navbar.ts
+++ b/packages/react/src/navbar/use-navbar.ts
@@ -97,13 +97,23 @@ export function useNavbar(props: UseNavbarProps = {}) {
     [disableBlurProp, isCollapseOpen],
   );
 
+  const navbarHeight = useMemo(() => {
+    if (typeof height === "number") {
+      return `${height}px`;
+    }
+
+    return height;
+  }, [height]);
+
   const navbarGlobalCss = globalCss({
-    html: {
-      $$navbarHeight: height,
+    ":root": {
+      $$navbarHeight: navbarHeight,
+      $$navbarCompactHeight: "calc($$navbarHeight * 0.7)",
       $$navbarTextColor: "$colors$text",
       $$navbarBackgroundColor: "$colors$background",
       $$navbarBlurBackgroundColor: "$colors$backgroundAlpha",
       $$navbarItemMaxHeight: "calc($$navbarHeight * 0.5)",
+      $$navbarCompactItemMaxHeight: "calc($$navbarHeight * 0.5)",
       $$navbarBorderColor: "$colors$border",
       $$navbarBorderRadius: "$radii$lg",
       $$navbarPadding: "$space$10",
diff --git a/packages/react/src/text/text.styles.ts b/packages/react/src/text/text.styles.ts
index c9592e4024..07d2a94777 100644
--- a/packages/react/src/text/text.styles.ts
+++ b/packages/react/src/text/text.styles.ts
@@ -1,37 +1,41 @@
 import {styled, VariantProps} from "../theme/stitches.config";
-
-export const StyledText = styled("p", {
-  variants: {
-    weight: {
-      hairline: {
-        fontWeight: "$hairline",
-      },
-      thin: {
-        fontWeight: "$thin",
-      },
-      light: {
-        fontWeight: "$light",
-      },
-      normal: {
-        fontWeight: "$normal",
-      },
-      medium: {
-        fontWeight: "$medium",
-      },
-      semibold: {
-        fontWeight: "$semibold",
-      },
-      bold: {
-        fontWeight: "$bold",
-      },
-      extrabold: {
-        fontWeight: "$extrabold",
-      },
-      black: {
-        fontWeight: "$black",
+import {cssHideShowIn} from "../theme/shared-css";
+export const StyledText = styled(
+  "p",
+  {
+    variants: {
+      weight: {
+        hairline: {
+          fontWeight: "$hairline",
+        },
+        thin: {
+          fontWeight: "$thin",
+        },
+        light: {
+          fontWeight: "$light",
+        },
+        normal: {
+          fontWeight: "$normal",
+        },
+        medium: {
+          fontWeight: "$medium",
+        },
+        semibold: {
+          fontWeight: "$semibold",
+        },
+        bold: {
+          fontWeight: "$bold",
+        },
+        extrabold: {
+          fontWeight: "$extrabold",
+        },
+        black: {
+          fontWeight: "$black",
+        },
       },
     },
   },
-});
+  cssHideShowIn,
+);
 
 export type TextVariantsProps = VariantProps<typeof StyledText>;
diff --git a/packages/react/src/theme/common.ts b/packages/react/src/theme/common.ts
index 69887e6321..c6cf4fb139 100644
--- a/packages/react/src/theme/common.ts
+++ b/packages/react/src/theme/common.ts
@@ -149,7 +149,7 @@ export const defaultTokens = {
     avatar: "box-shadow 0.25s ease 0s, opacity 0.25s ease 0s",
     card: "transform 0.25s ease 0s, filter 0.25s ease 0s, box-shadow 0.25s ease 0s",
     dropdownItem:
-      "background 0.25s ease, transform 0.25s ease, color 0.15s ease, box-shadow 0.25s ease 0s",
+      "background 0.12s ease, transform 0.12s ease, color 0.12s ease, box-shadow 0.12s ease 0s",
   },
   breakpoints: {
     xs: "650px",
diff --git a/packages/react/src/theme/shared-css.ts b/packages/react/src/theme/shared-css.ts
index 79ffed77b1..a984883a8e 100644
--- a/packages/react/src/theme/shared-css.ts
+++ b/packages/react/src/theme/shared-css.ts
@@ -47,3 +47,69 @@ export const sharedVisuallyHidden = css({
   whiteSpace: "nowrap",
   position: "absolute",
 });
+
+export const cssHideIn = css({
+  variants: {
+    hideIn: {
+      xs: {
+        "@xsMax": {
+          display: "none",
+        },
+      },
+      sm: {
+        "@smMax": {
+          display: "none",
+        },
+      },
+      md: {
+        "@mdMax": {
+          display: "none",
+        },
+      },
+      lg: {
+        "@lgMax": {
+          display: "none",
+        },
+      },
+      xl: {
+        "@xlMax": {
+          display: "none",
+        },
+      },
+    },
+  },
+});
+
+export const cssShowIn = css({
+  variants: {
+    showIn: {
+      xs: {
+        "@xs": {
+          display: "none",
+        },
+      },
+      sm: {
+        "@sm": {
+          display: "none",
+        },
+      },
+      md: {
+        "@md": {
+          display: "none",
+        },
+      },
+      lg: {
+        "@lg": {
+          display: "none",
+        },
+      },
+      xl: {
+        "@xl": {
+          display: "none",
+        },
+      },
+    },
+  },
+});
+
+export const cssHideShowIn = css(cssHideIn, cssShowIn);

From 256698cce938ba6481f94d6cab129d5fd95fad33 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Mon, 15 Aug 2022 23:09:51 -0300
Subject: [PATCH 080/106] feat(docs-navbar): new notify banner, badge styled
 adjusted, navbar documentation improved

---
 apps/docs/content/docs/components/navbar.mdx  |  10 ++
 .../src/components/icons/chevron-right.tsx    |  12 +-
 .../notify-banner/notify-banner.tsx           |  39 +++--
 .../components/playground/dynamic-live.tsx    | 156 +++++++++---------
 apps/docs/src/components/primitives/index.ts  |  30 +++-
 .../examples/navbar/active-item-variants.tsx  | 111 +++++++++++++
 packages/react/src/badge/badge.styles.ts      |  50 ++++--
 packages/react/src/index.ts                   |   1 +
 packages/react/src/navbar/index.ts            |  26 +++
 9 files changed, 333 insertions(+), 102 deletions(-)
 create mode 100644 apps/docs/src/pages/examples/navbar/active-item-variants.tsx

diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index b612bb7a9d..a2e10bcd41 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -72,6 +72,16 @@ import { Navbar } from "@nextui-org/react";
   files={navbarContent.staticVariant}
 />
 
+<Playground
+  asIframe
+  title="Active Item Variants"
+  previewHeight="600px"
+  iframeSrc="/examples/navbar/active-item-variants"
+  desc="Badge with default styles, used in standalone when `content` prop is empty."
+  files={navbarContent.floatingVariant}
+/>
+
+
 <Playground
   asIframe
   title="With Toggle Button"
diff --git a/apps/docs/src/components/icons/chevron-right.tsx b/apps/docs/src/components/icons/chevron-right.tsx
index c090847eb9..da197e89dc 100644
--- a/apps/docs/src/components/icons/chevron-right.tsx
+++ b/apps/docs/src/components/icons/chevron-right.tsx
@@ -5,10 +5,18 @@ export interface Props {
   width?: number;
   height?: number;
   size?: number;
+  strokeWidth?: number;
   className?: string;
 }
 
-const ChevronRight: React.FC<Props> = ({fill, size, width = 24, height = 24, ...props}) => {
+const ChevronRight: React.FC<Props> = ({
+  fill,
+  size,
+  width = 24,
+  height = 24,
+  strokeWidth = 1.5,
+  ...props
+}) => {
   return (
     <svg
       height={size || height}
@@ -22,7 +30,7 @@ const ChevronRight: React.FC<Props> = ({fill, size, width = 24, height = 24, ...
         stroke={fill}
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={1.5}
+        strokeWidth={strokeWidth}
         {...props}
       >
         <path d="M14.43 5.93L20.5 12l-6.07 6.07" />
diff --git a/apps/docs/src/components/notify-banner/notify-banner.tsx b/apps/docs/src/components/notify-banner/notify-banner.tsx
index 69fc414889..a6a7fdd8c4 100644
--- a/apps/docs/src/components/notify-banner/notify-banner.tsx
+++ b/apps/docs/src/components/notify-banner/notify-banner.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
 import NextLink from "next/link";
-import {Badge} from "@components";
-import {Text, Spacer} from "@nextui-org/react";
+import {Badge, Spacer, Text} from "@nextui-org/react";
 import {ChevronRight} from "@components";
+import {AnimatedText} from "@primitives";
+import {darkTheme} from "@theme/shared";
 
 import {StyledNotifyBanner, StyledContent, StyledImg} from "./styles";
 
@@ -29,21 +30,39 @@ const NotifyBanner: React.FC<Props> = (props) => {
         src="/notify-gradient.svg"
       />
       {showBadge && (
-        <Badge solid>
-          <span aria-label="notify-emoji" role="img">
-            🚀
+        <Badge
+          disableOutline
+          color="secondary"
+          css={{
+            fontSize: "10px",
+            fontWeight: "$black",
+            [`.${darkTheme} &`]: {
+              bg: "$purple400",
+              color: "$purple900",
+            },
+          }}
+          size="xs"
+          variant="flat"
+        >
+          <span aria-label="notify" role="img">
+            🎉
           </span>
-          &nbsp;&nbsp;New
+          &nbsp;NEW
         </Badge>
       )}
       <NextLink href={href}>
         <StyledContent>
-          <Spacer x={0.2} />
-          <Text b css={{color: "currentColor"}} size={15}>
+          <Spacer x={0.3} />
+          <AnimatedText css={{cursor: "pointer", userSelect: "none"}} size={16}>
             {text}
-          </Text>
+          </AnimatedText>
           <Spacer x={0.2} />
-          <ChevronRight className="chevron-right-icon" fill="currentColor" size={20} />
+          <ChevronRight
+            className="chevron-right-icon"
+            fill="var(--nextui-colors-secondary)"
+            size={20}
+            strokeWidth={2}
+          />
         </StyledContent>
       </NextLink>
     </StyledNotifyBanner>
diff --git a/apps/docs/src/components/playground/dynamic-live.tsx b/apps/docs/src/components/playground/dynamic-live.tsx
index 0496d32b25..9a9dd0e0ef 100644
--- a/apps/docs/src/components/playground/dynamic-live.tsx
+++ b/apps/docs/src/components/playground/dynamic-live.tsx
@@ -1,13 +1,15 @@
-import React, {useRef, useEffect} from "react";
+import React, {useRef, useState, useEffect} from "react";
 import {LivePreview, LiveProvider, LiveError} from "react-live";
 import NextLink from "next/link";
 import {useMediaQuery} from "@hooks/use-media-query";
 import {validateEmail} from "@utils/index";
 import withDefaults from "@utils/with-defaults";
 import {motion, useTransform, useMotionValue} from "framer-motion";
+import {InView} from "react-intersection-observer";
 import {Box} from "@primitives";
 import * as Components from "@nextui-org/react";
 import {WindowActions} from "@components";
+import {isProd} from "@utils/index";
 
 import * as TemplateComponents from "../templates";
 import Palette from "../palette";
@@ -174,6 +176,8 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
   height,
   css,
 }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
   const codeTheme = makeCodeTheme();
 
   const resizerX = useMotionValue(0);
@@ -192,84 +196,88 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
 
   return (
     <LiveProvider code={code} noInline={noInline} scope={scope} theme={codeTheme}>
-      <LiveContainer
-        className="dynamic-live-container"
-        css={{
-          height: enableResize && height === "auto" ? "320px" : height,
-        }}
-        showWindowActions={showWindowActions}
-      >
-        <StyledWrapper
-          as={motion.div}
-          className="dynamic-live-wrapper"
-          css={css}
-          enableResize={enableResize}
-          isBrowser={showWindowActions}
-          noInline={noInline}
-          overflow={overflow}
-          style={{
-            // @ts-ignore
-            "--iframe-resizer-x": browserWidth,
+      <InView className="inview-section" triggerOnce={isProd} onChange={setIsVisible}>
+        <LiveContainer
+          className="dynamic-live-container"
+          css={{
+            height: enableResize && height === "auto" ? "420px" : height,
           }}
+          showWindowActions={showWindowActions}
         >
-          {showWindowActions ? (
-            <>
-              <WindowActions
-                css={{
-                  py: "$6",
-                  px: "$10",
-                  bg: "$accents0",
-                }}
-                variant="normal"
-              />
-              <WindowIframe
-                ref={iframeRef}
-                as={motion.iframe}
-                id="dynamic-live-iframe"
-                src={iframeSrc}
-                title={iframeTitle}
-              />
-            </>
-          ) : (
-            <LivePreview className="live-preview" />
-          )}
-
-          <LiveError />
-        </StyledWrapper>
-        {enableResize && (
-          <Resizer
-            ref={constraintsResizerRef}
-            className="window-resizer"
-            css={{
-              top: 0,
-              bottom: 0,
-              right: 0,
-              width: `calc(100% - ${MIN_WIDTH}px - 20px)`,
+          <StyledWrapper
+            as={motion.div}
+            className="dynamic-live-wrapper"
+            css={css}
+            enableResize={enableResize}
+            isBrowser={showWindowActions}
+            noInline={noInline}
+            overflow={overflow}
+            style={{
+              // @ts-ignore
+              "--iframe-resizer-x": browserWidth,
             }}
           >
-            <Box
-              ref={resizerRef}
-              _dragX={resizerX}
-              as={motion.div}
-              className="resizer-bar"
-              drag="x"
-              dragConstraints={constraintsResizerRef}
-              dragElastic={0}
-              dragMomentum={false}
-              style={{x: resizerX}}
-              onDragEnd={() => {
-                document.documentElement.classList.remove("dragging-ew");
-                iframeRef.current?.classList.remove("dragging-ew");
-              }}
-              onDragStart={() => {
-                document.documentElement.classList.add("dragging-ew");
-                iframeRef.current?.classList.add("dragging-ew");
+            {showWindowActions ? (
+              <>
+                <WindowActions
+                  css={{
+                    py: "$6",
+                    px: "$10",
+                    bg: "$accents0",
+                  }}
+                  variant="normal"
+                />
+                {isVisible && (
+                  <WindowIframe
+                    ref={iframeRef}
+                    as={motion.iframe}
+                    id="dynamic-live-iframe"
+                    src={iframeSrc}
+                    title={iframeTitle}
+                  />
+                )}
+              </>
+            ) : (
+              <LivePreview className="live-preview" />
+            )}
+
+            <LiveError />
+          </StyledWrapper>
+          {enableResize && (
+            <Resizer
+              ref={constraintsResizerRef}
+              className="window-resizer"
+              css={{
+                top: 0,
+                bottom: 0,
+                right: 0,
+                width: `calc(100% - ${MIN_WIDTH}px - 20px)`,
               }}
-            />
-          </Resizer>
-        )}
-        {showEditor && <Editor code={code} initialOpen={initialEditorOpen} />}
-      </LiveContainer>
+            >
+              <Box
+                ref={resizerRef}
+                _dragX={resizerX}
+                as={motion.div}
+                className="resizer-bar"
+                drag="x"
+                dragConstraints={constraintsResizerRef}
+                dragElastic={0}
+                dragMomentum={false}
+                style={{x: resizerX}}
+                onDragEnd={() => {
+                  document.documentElement.classList.remove("dragging-ew");
+                  iframeRef.current?.classList.remove("dragging-ew");
+                }}
+                onDragStart={() => {
+                  document.documentElement.classList.add("dragging-ew");
+                  iframeRef.current?.classList.add("dragging-ew");
+                }}
+              />
+            </Resizer>
+          )}
+          {showEditor && <Editor code={code} initialOpen={initialEditorOpen} />}
+        </LiveContainer>
+      </InView>
     </LiveProvider>
   );
 };
diff --git a/apps/docs/src/components/primitives/index.ts b/apps/docs/src/components/primitives/index.ts
index 34a1311e07..940496ec3d 100644
--- a/apps/docs/src/components/primitives/index.ts
+++ b/apps/docs/src/components/primitives/index.ts
@@ -1,4 +1,11 @@
-import {styled, Link} from "@nextui-org/react";
+import {styled, Link, Text, keyframes} from "@nextui-org/react";
+import {darkTheme} from "@theme/shared";
+
+const animatedText = keyframes({
+  "100%": {
+    backgroundPosition: "-200% center",
+  },
+});
 
 export const Title = styled("h1", {
   display: "inline",
@@ -136,3 +143,24 @@ export const StyledCardBlur = styled("div", {
 });
 
 export const StyledImg = styled("img", {});
+
+export const AnimatedText = styled(Text, {
+  $$colorA: "$colors$pink700",
+  $$colorB: "$colors$secondary",
+  cursor: "default",
+  position: "relative",
+  fontWeight: "$semibold",
+  backgroundImage: "linear-gradient(120deg, $$colorA 0%, $$colorB 50%, $$colorA 100%)",
+  backgroundOrigin: "padding-box",
+  backgroundSize: "200%",
+  WebkitBoxDecorationBreak: "clone",
+  backgroundClip: "text",
+  WebkitTextFillColor: "transparent",
+  color: "unset",
+  overflow: "visible",
+  animation: `3s linear 0s infinite normal forwards running ${animatedText}`,
+  [`.${darkTheme} &`]: {
+    $$colorA: "$colors$pink900",
+    $$colorB: "$colors$purple700",
+  },
+});
diff --git a/apps/docs/src/pages/examples/navbar/active-item-variants.tsx b/apps/docs/src/pages/examples/navbar/active-item-variants.tsx
new file mode 100644
index 0000000000..a09ccafb2e
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/active-item-variants.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import {Examples} from "@components";
+import {Navbar, Text, Button, Card, Spacer, Radio, Link, styled, useTheme} from "@nextui-org/react";
+
+const StyledVariantContainer = styled("div", {
+  dflex: "center",
+  position: "fixed",
+  width: "100%",
+  bottom: "10px",
+  "& .nextui-radio-group-items": {
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
+    gridTemplateRows: "repeat(2, 1fr)",
+    gridColumnGap: "$8",
+    gridRowGap: "$2",
+  },
+});
+
+export default function NavbarActiveItemVariantsExample() {
+  const [variant, setVariant] = React.useState<any>("default");
+  const [activeColor, setActiveColor] = React.useState<any>("primary");
+
+  const {isDark} = useTheme();
+
+  const variants = [
+    "default",
+    "highlight",
+    "highlight-solid",
+    "underline",
+    "highlight-rounded",
+    "highlight-solid-rounded",
+    "underline-rounded",
+  ];
+
+  const colors = ["primary", "secondary", "success", "warning", "error"];
+
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered={isDark} variant="sticky">
+        <Navbar.Brand>
+          <Examples.AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content activeColor={activeColor} hideIn="xs" variant={variant}>
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} color={activeColor} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+      <StyledVariantContainer>
+        <Card css={{px: "$6", maxW: "90%"}}>
+          <Card.Body>
+            <Radio.Group
+              defaultValue="default"
+              label="Select active variant"
+              orientation="horizontal"
+              size="sm"
+              value={variant}
+              onChange={setVariant}
+            >
+              {variants.map((variant) => (
+                <Radio key={variant} color={activeColor} value={variant}>
+                  {variant}
+                </Radio>
+              ))}
+            </Radio.Group>
+            <Spacer y={0.5} />
+            <Radio.Group
+              css={{
+                "& .nextui-radio-group-items": {
+                  display: "grid",
+                  gridTemplateColumns: "repeat(3, 1fr)",
+                  gridTemplateRows: "repeat(2, 1fr)",
+                  gridColumnGap: "$8",
+                  gridRowGap: "$2",
+                },
+              }}
+              defaultValue="default"
+              label="Select active color"
+              orientation="horizontal"
+              size="sm"
+              value={activeColor}
+              onChange={setActiveColor}
+            >
+              {colors.map((color) => (
+                <Radio key={color} color={activeColor} value={color}>
+                  {color === "primary" ? "primary (default)" : color}
+                </Radio>
+              ))}
+            </Radio.Group>
+          </Card.Body>
+        </Card>
+      </StyledVariantContainer>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/packages/react/src/badge/badge.styles.ts b/packages/react/src/badge/badge.styles.ts
index 6c082c9d70..de9e524a6c 100644
--- a/packages/react/src/badge/badge.styles.ts
+++ b/packages/react/src/badge/badge.styles.ts
@@ -23,7 +23,12 @@ export const StyledBadgeRoot = styled("span", {
 export const StyledBadge = styled("span", {
   $$badgePlacementHOffset: "0%",
   $$badgePlacementVOffset: "0%",
-  dflex: "center",
+  lineHeight: 1,
+  display: "flex",
+  flexFlow: "row wrap",
+  placeContent: "center",
+  alignItems: "center",
+  boxSizing: "border-box",
   whiteSpace: "nowrap",
   bg: "$$badgeBackgroundColor",
   color: "$$badgeTextColor",
@@ -42,26 +47,26 @@ export const StyledBadge = styled("span", {
     size: {
       xs: {
         $$badgeVPadding: "$space$2",
-        $$badgeHPadding: "$space$3",
+        $$badgeHPadding: "$space$2",
         $$badgeFontSize: "0.65rem",
       },
       sm: {
         $$badgeVPadding: "$space$2",
-        $$badgeHPadding: "$space$4",
-        $$badgeFontSize: "0.7rem",
+        $$badgeHPadding: "$space$3",
+        $$badgeFontSize: "0.73rem",
       },
       md: {
-        $$badgeVPadding: "$space$2",
-        $$badgeHPadding: "$space$5",
+        $$badgeVPadding: "$space$3",
+        $$badgeHPadding: "$space$4",
         $$badgeFontSize: "$fontSizes$xs",
       },
       lg: {
-        $$badgeVPadding: "$space$2",
-        $$badgeHPadding: "$space$6",
+        $$badgeVPadding: "$space$4",
+        $$badgeHPadding: "$space$5",
         $$badgeFontSize: "$fontSizes$base",
       },
       xl: {
-        $$badgeVPadding: "$space$2",
+        $$badgeVPadding: "$space$5",
         $$badgeHPadding: "$space$6",
         $$badgeFontSize: "$fontSizes$xl",
       },
@@ -74,6 +79,7 @@ export const StyledBadge = styled("span", {
       true: {
         zIndex: "$2",
         position: "absolute",
+        lineHeight: 1.5,
       },
     },
     isOneChar: {
@@ -194,6 +200,9 @@ export const StyledBadge = styled("span", {
       },
     },
     disableOutline: {
+      true: {
+        border: "2px solid transparent",
+      },
       false: {
         border: "2px solid $colors$background",
       },
@@ -212,12 +221,12 @@ export const StyledBadge = styled("span", {
   compoundVariants: [
     /***
      * @variant flat
-     * @color {neutral, primary, secondary, success, warning, error}
+     * @color {default, primary, secondary, success, warning, error}
      */
-    // variant=flat && color=neutral
+    // variant=flat && color=default
     {
       variant: "flat",
-      color: "neutral",
+      color: "default",
       css: {
         $$badgeBackgroundColor: "$colors$neutralLight",
         $$badgeTextColor: "$colors$neutralLightContrast",
@@ -270,12 +279,12 @@ export const StyledBadge = styled("span", {
     },
     /***
      * @variant bordered
-     * @color {neutral, primary, secondary, success, warning, error}
+     * @color {default, primary, secondary, success, warning, error}
      */
-    // variant=bordered && color=neutral
+    // variant=bordered && color=default
     {
       variant: "bordered",
-      color: "neutral",
+      color: "default",
       css: {
         $$badgeTextColor: "$colors$neutral",
       },
@@ -485,6 +494,17 @@ export const StyledBadge = styled("span", {
         $$badgeHPadding: "$space$5",
       },
     },
+    /**
+     * @disableOutline true
+     * @variant bordered
+     */
+    {
+      disableOutline: true,
+      variant: "bordered",
+      css: {
+        borderColor: "$$badgeTextColor",
+      },
+    },
   ],
   defaultVariants: {
     size: "md",
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index cb2eb36748..f259f5a240 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -152,3 +152,4 @@ export {default as Badge} from "./badge";
 export * from "./badge";
 
 export {default as Navbar} from "./navbar";
+export * from "./navbar";
diff --git a/packages/react/src/navbar/index.ts b/packages/react/src/navbar/index.ts
index de97a7bec0..1ffa494edc 100644
--- a/packages/react/src/navbar/index.ts
+++ b/packages/react/src/navbar/index.ts
@@ -15,4 +15,30 @@ Navbar.Toggle = NavbarToggle;
 Navbar.Collapse = NavbarCollapse;
 Navbar.CollapseItem = NavbarCollapseItem;
 
+// export styled components
+export {
+  StyledBaseNavbarItem,
+  StyledBaseNavbarList,
+  StyledNavbarCollapseItem,
+  StyledNavbarCollapseWrapper,
+  StyledNavbarCollapse,
+  StyledNavbarToggleIconContainer,
+  StyledNavbarToggle,
+  StyledNavbarBrand,
+  StyledNavbarItem,
+  StyledNavbarContent,
+  StyledNavbarContainer,
+  StyledNavbar,
+} from "./navbar.styles";
+
+// export types
+export type {NavbarProps} from "./navbar";
+export type {NavbarContentProps} from "./navbar-content";
+export type {NavbarBrandProps} from "./navbar-brand";
+export type {NavbarItemProps} from "./navbar-item";
+export type {NavbarLinkProps} from "./navbar-link";
+export type {NavbarToggleProps} from "./navbar-toggle";
+export type {NavbarCollapseProps} from "./navbar-collapse";
+export type {NavbarCollapseItemProps} from "./navbar-collapse-item";
+
 export default Navbar;

From 7cec4687bb33e0f92ec3ee672f37832cfd4d3419 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Wed, 17 Aug 2022 20:30:14 -0300
Subject: [PATCH 081/106] feat(docs-notify): sparkles component added

---
 apps/docs/src/components/icons/index.ts       |  1 +
 apps/docs/src/components/icons/sparkle.tsx    | 37 +++++++++
 apps/docs/src/components/index.ts             |  1 +
 .../notify-banner/notify-banner.tsx           | 25 ++++--
 apps/docs/src/components/sparkles/index.ts    |  3 +
 .../docs/src/components/sparkles/sparkles.tsx | 80 +++++++++++++++++++
 apps/docs/src/components/sparkles/styles.ts   | 56 +++++++++++++
 .../src/hooks/use-prefers-reduced-motion.ts   | 41 ++++++++++
 apps/docs/src/hooks/use-random-interval.ts    | 43 ++++++++++
 apps/docs/src/layouts/docs.tsx                |  5 +-
 10 files changed, 283 insertions(+), 9 deletions(-)
 create mode 100644 apps/docs/src/components/icons/sparkle.tsx
 create mode 100644 apps/docs/src/components/sparkles/index.ts
 create mode 100644 apps/docs/src/components/sparkles/sparkles.tsx
 create mode 100644 apps/docs/src/components/sparkles/styles.ts
 create mode 100644 apps/docs/src/hooks/use-prefers-reduced-motion.ts
 create mode 100644 apps/docs/src/hooks/use-random-interval.ts

diff --git a/apps/docs/src/components/icons/index.ts b/apps/docs/src/components/icons/index.ts
index f7468d1b46..7940f2a2a2 100644
--- a/apps/docs/src/components/icons/index.ts
+++ b/apps/docs/src/components/icons/index.ts
@@ -72,3 +72,4 @@ export {default as VercelLogo} from "./vercel";
 export {default as TypescriptLogo} from "./typescript";
 export {default as JavascriptLogo} from "./javascript";
 export {default as Scale} from "./scale";
+export {default as Sparkle} from "./sparkle";
diff --git a/apps/docs/src/components/icons/sparkle.tsx b/apps/docs/src/components/icons/sparkle.tsx
new file mode 100644
index 0000000000..df6c208d16
--- /dev/null
+++ b/apps/docs/src/components/icons/sparkle.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import {yellow} from "@nextui-org/react";
+
+export interface Props {
+  fill?: string;
+  width?: number;
+  height?: number;
+  size?: number;
+}
+
+export type SparkleProps = Props & React.HTMLAttributes<SVGElement>;
+
+const Sparkle: React.FC<SparkleProps> = ({
+  fill = yellow.yellow600,
+  size,
+  width = 24,
+  height = 24,
+  ...props
+}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 160 160"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M80 0s4.285 41.292 21.496 58.504C118.707 75.715 160 80 160 80s-41.293 4.285-58.504 21.496S80 160 80 160s-4.285-41.293-21.496-58.504C41.292 84.285 0 80 0 80s41.292-4.285 58.504-21.496C75.715 41.292 80 0 80 0Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export default Sparkle;
diff --git a/apps/docs/src/components/index.ts b/apps/docs/src/components/index.ts
index c28256f930..f9fc4064c8 100644
--- a/apps/docs/src/components/index.ts
+++ b/apps/docs/src/components/index.ts
@@ -40,5 +40,6 @@ export {default as VercelCallout} from "./vercel-callout";
 export {default as NotifyBanner} from "./notify-banner";
 export {default as WindowActions} from "./window-actions";
 export {default as SandpackEditor} from "./sandpack";
+export {default as Sparkles} from "./sparkles";
 export * as Examples from "./examples";
 export * from "./sandpack";
diff --git a/apps/docs/src/components/notify-banner/notify-banner.tsx b/apps/docs/src/components/notify-banner/notify-banner.tsx
index a6a7fdd8c4..9d3880201a 100644
--- a/apps/docs/src/components/notify-banner/notify-banner.tsx
+++ b/apps/docs/src/components/notify-banner/notify-banner.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import NextLink from "next/link";
-import {Badge, Spacer, Text} from "@nextui-org/react";
-import {ChevronRight} from "@components";
+import {Badge, Spacer, useTheme} from "@nextui-org/react";
+import {ChevronRight, Sparkles} from "@components";
 import {AnimatedText} from "@primitives";
 import {darkTheme} from "@theme/shared";
 
@@ -11,10 +11,13 @@ interface Props {
   text: string;
   href?: string;
   showBadge?: boolean;
+  showSparkles?: boolean;
 }
 
 const NotifyBanner: React.FC<Props> = (props) => {
-  const {showBadge = true, text, href = "#"} = props;
+  const {showBadge = true, showSparkles = true, text, href = "#"} = props;
+
+  const {isDark} = useTheme();
 
   return (
     <StyledNotifyBanner>
@@ -53,9 +56,19 @@ const NotifyBanner: React.FC<Props> = (props) => {
       <NextLink href={href}>
         <StyledContent>
           <Spacer x={0.3} />
-          <AnimatedText css={{cursor: "pointer", userSelect: "none"}} size={16}>
-            {text}
-          </AnimatedText>
+          {showSparkles ? (
+            <Sparkles
+              color={isDark ? "var(--nextui-colors-purple900)" : "var(--nextui-colors-yellow600)"}
+            >
+              <AnimatedText css={{cursor: "pointer", userSelect: "none"}} size={16}>
+                {text}
+              </AnimatedText>
+            </Sparkles>
+          ) : (
+            <AnimatedText css={{cursor: "pointer", userSelect: "none"}} size={16}>
+              {text}
+            </AnimatedText>
+          )}
           <Spacer x={0.2} />
           <ChevronRight
             className="chevron-right-icon"
diff --git a/apps/docs/src/components/sparkles/index.ts b/apps/docs/src/components/sparkles/index.ts
new file mode 100644
index 0000000000..99b40a1f6e
--- /dev/null
+++ b/apps/docs/src/components/sparkles/index.ts
@@ -0,0 +1,3 @@
+import Sparkles from "./sparkles";
+
+export default Sparkles;
diff --git a/apps/docs/src/components/sparkles/sparkles.tsx b/apps/docs/src/components/sparkles/sparkles.tsx
new file mode 100644
index 0000000000..9e2d2918ae
--- /dev/null
+++ b/apps/docs/src/components/sparkles/sparkles.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import {random, range} from "lodash";
+import {yellow, CSS} from "@nextui-org/react";
+import useRandomInterval from "@hooks/use-random-interval";
+import usePrefersReducedMotion from "@hooks/use-prefers-reduced-motion";
+
+import {Sparkle} from "../icons";
+
+import {StyledSparkles, StyledChildWrapper, StyledSparkleWrapper} from "./styles";
+
+export interface SparklesProps {
+  children?: React.ReactNode;
+  floatAbove?: boolean;
+  color?: string;
+  css?: CSS;
+}
+
+const generateSparkle = (color = yellow.yellow500, floatAbove = true) => {
+  return {
+    id: String(random(10000, 99999)),
+    createdAt: Date.now(),
+    // Bright yellow color:
+    color,
+    size: random(10, 16),
+    style: {
+      // Pick a random spot in the available space
+      top: random(-20, 80) + "%",
+      left: random(0, 100) + "%",
+      zIndex: floatAbove ? 2 : -1,
+    },
+  };
+};
+
+type GeneratedSparkle = ReturnType<typeof generateSparkle>;
+
+const Sparkles: React.FC<SparklesProps> = ({
+  children,
+  color,
+  floatAbove = false,
+  ...otherProps
+}) => {
+  const [sparkles, setSparkles] = React.useState<GeneratedSparkle[]>(() => {
+    return range(3).map(() => generateSparkle(color, floatAbove));
+  });
+
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  useRandomInterval(
+    () => {
+      const now = Date.now();
+      // Create a new sparkle
+      const sparkle = generateSparkle(color, floatAbove);
+      // Clean up any "expired" sparkles
+      const nextSparkles = sparkles.filter((sparkle) => {
+        const delta = now - sparkle.createdAt;
+
+        return delta < 750;
+      });
+
+      // Include our new sparkle
+      nextSparkles.push(sparkle);
+      setSparkles(nextSparkles);
+    },
+    prefersReducedMotion ? null : 50,
+    prefersReducedMotion ? null : 1000,
+  );
+
+  return (
+    <StyledSparkles {...otherProps}>
+      {sparkles.map((sparkle) => (
+        <StyledSparkleWrapper key={sparkle.id} style={sparkle.style}>
+          <Sparkle fill={sparkle.color} size={sparkle.size} />
+        </StyledSparkleWrapper>
+      ))}
+      <StyledChildWrapper>{children}</StyledChildWrapper>
+    </StyledSparkles>
+  );
+};
+
+export default Sparkles;
diff --git a/apps/docs/src/components/sparkles/styles.ts b/apps/docs/src/components/sparkles/styles.ts
new file mode 100644
index 0000000000..deb17a73da
--- /dev/null
+++ b/apps/docs/src/components/sparkles/styles.ts
@@ -0,0 +1,56 @@
+import {styled, keyframes} from "@nextui-org/react";
+
+const growAndShrink = keyframes({
+  "0%": {
+    transform: "scale(0)",
+  },
+  "50%": {
+    transform: "scale(1)",
+  },
+  "100%": {
+    transform: "scale(0)",
+  },
+});
+
+const spin = keyframes({
+  from: {
+    transform: "rotate(0deg)",
+  },
+  to: {
+    transform: "rotate(180deg)",
+  },
+});
+
+export const StyledSparkleWrapper = styled("span", {
+  position: "absolute",
+  display: "block",
+  opacity: 0,
+  transition: "opacity 0.5s ease",
+  animation: `${growAndShrink} 1200ms forwards`,
+  svg: {
+    display: "block",
+    animation: `${spin} 1250ms linear forwards`,
+  },
+  "@motion": {
+    animation: "none",
+    svg: {
+      animation: "none",
+    },
+  },
+});
+
+export const StyledSparkles = styled("div", {
+  position: "relative",
+  display: "inline-block",
+  "&:hover": {
+    [`& ${StyledSparkleWrapper}`]: {
+      opacity: 1,
+    },
+  },
+});
+
+export const StyledChildWrapper = styled("strong", {
+  zIndex: 1,
+  position: "relative",
+  fontWeight: "bold",
+});
diff --git a/apps/docs/src/hooks/use-prefers-reduced-motion.ts b/apps/docs/src/hooks/use-prefers-reduced-motion.ts
new file mode 100644
index 0000000000..3dd5762497
--- /dev/null
+++ b/apps/docs/src/hooks/use-prefers-reduced-motion.ts
@@ -0,0 +1,41 @@
+import * as React from "react";
+
+const QUERY = "(prefers-reduced-motion: no-preference)";
+const isRenderingOnServer = typeof window === "undefined";
+
+const getInitialState = () => {
+  // For our initial server render, we won't know if the user
+  // prefers reduced motion, but it doesn't matter. This value
+  // will be overwritten on the client, before any animations
+  // occur.
+  return isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;
+};
+
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState(getInitialState);
+
+  React.useEffect(() => {
+    const mediaQueryList = window.matchMedia(QUERY);
+    const listener = (event: any) => {
+      setPrefersReducedMotion(!event.matches);
+    };
+
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener("change", listener);
+    } else {
+      mediaQueryList.addListener(listener);
+    }
+
+    return () => {
+      if (mediaQueryList.removeEventListener) {
+        mediaQueryList.removeEventListener("change", listener);
+      } else {
+        mediaQueryList.removeListener(listener);
+      }
+    };
+  }, []);
+
+  return prefersReducedMotion;
+}
+
+export default usePrefersReducedMotion;
diff --git a/apps/docs/src/hooks/use-random-interval.ts b/apps/docs/src/hooks/use-random-interval.ts
new file mode 100644
index 0000000000..4403d7e632
--- /dev/null
+++ b/apps/docs/src/hooks/use-random-interval.ts
@@ -0,0 +1,43 @@
+import React from "react";
+
+// Utility helper for random number generation
+const random = (min: number, max: number) => Math.floor(Math.random() * (max - min)) + min;
+
+const useRandomInterval = (
+  callback: () => void,
+  minDelay: number | null = 50,
+  maxDelay: number | null = 500,
+) => {
+  const timeoutId = React.useRef<any>();
+
+  const savedCallback = React.useRef(callback);
+
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  React.useEffect(() => {
+    if (typeof minDelay === "number" && typeof maxDelay === "number") {
+      const handleTick = () => {
+        const nextTickAt = random(minDelay, maxDelay);
+
+        timeoutId.current = window.setTimeout(() => {
+          savedCallback.current();
+          handleTick();
+        }, nextTickAt);
+      };
+
+      handleTick();
+    }
+
+    return () => window.clearTimeout(timeoutId.current);
+  }, [minDelay, maxDelay]);
+
+  const cancel = React.useCallback(function () {
+    window.clearTimeout(timeoutId.current);
+  }, []);
+
+  return cancel;
+};
+
+export default useRandomInterval;
diff --git a/apps/docs/src/layouts/docs.tsx b/apps/docs/src/layouts/docs.tsx
index 9d97aa466e..9b1cf813db 100644
--- a/apps/docs/src/layouts/docs.tsx
+++ b/apps/docs/src/layouts/docs.tsx
@@ -2,12 +2,11 @@ import React, {useState, useEffect} from "react";
 import {Container, Row, Col} from "@nextui-org/react";
 import NextLink from "next/link";
 import {Route} from "@lib/docs/page";
-import {Sidebar, TableOfContent} from "@components";
 import {Link} from "@nextui-org/react";
 import {Heading, getHeadings} from "@utils/get-headings";
 import {MetaProps} from "@lib/docs/meta";
 import Header from "@layouts/header";
-import {Fixed, PageNav} from "@components";
+import {Fixed, PageNav, TableOfContent, Sidebar} from "@components";
 import {REPO_NAME, GITHUB_URL} from "@lib/github/constants";
 import {TAG, CONTENT_PATH} from "@lib/docs/config";
 import {StyledImg} from "@primitives";
@@ -47,6 +46,7 @@ const DocsLayout: React.FC<React.PropsWithChildren<Props>> = ({
 
   return (
     <div id="app-container">
+      <Header {...meta} />
       <Navbar routes={routes} />
       <Container
         as="main"
@@ -56,7 +56,6 @@ const DocsLayout: React.FC<React.PropsWithChildren<Props>> = ({
         id="main-container"
         lg={true}
       >
-        <Header {...meta} />
         <Row
           className="docs__content"
           css={{

From b081f83b56759dab4fcf3f7195686a3844f7896e Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Wed, 17 Aug 2022 22:52:59 -0300
Subject: [PATCH 082/106] refactor(react-link): icon prop renamed to isExternal

---
 apps/docs/content/docs/components/link.mdx    | 46 +++++++++----------
 .../react/src/link/__tests__/index.test.tsx   |  3 +-
 packages/react/src/link/link.tsx              |  6 +--
 3 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/apps/docs/content/docs/components/link.mdx b/apps/docs/content/docs/components/link.mdx
index 79577d508b..c92383851c 100644
--- a/apps/docs/content/docs/components/link.mdx
+++ b/apps/docs/content/docs/components/link.mdx
@@ -1,6 +1,6 @@
 ---
-title: 'Link'
-description: 'Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>'
+title: "Link"
+description: "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>"
 url: https://nextui.org/docs/components/link
 ---
 
@@ -9,7 +9,7 @@ url: https://nextui.org/docs/components/link
 Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an `<a>`
 
 ```jsx
-import { Link } from '@nextui-org/react';
+import { Link } from "@nextui-org/react";
 ```
 
 <CarbonAd />
@@ -41,8 +41,8 @@ import { Link } from '@nextui-org/react';
 />
 
 <Playground
-  title="Icon"
-  desc="Show an icon in the `Link` with the `icon` prop."
+  title="External Link"
+  desc="Show an icon in the `Link` with the `isExternal` prop."
   files={linkContent.icon}
 />
 
@@ -65,17 +65,17 @@ import { Link } from '@nextui-org/react';
 
 #### Link Props
 
-| Attribute     | Type                                            | Accepted values            | Description                             | Default |
-| ------------- | ----------------------------------------------- | -------------------------- | --------------------------------------- | ------- |
-| **color**     | `LinkColors` `boolean` `string`                 | [LinkColors](#link-colors) | Change link color                       | `false` |
-| **href**      | `string`                                        | -                          | Link url                                | -       |
-| **icon**      | `boolean`                                       | `true/false`               | Show link icon                          | `false` |
-| **underline** | `boolean`                                       | `true/false`               | Display underline                       | `false` |
-| **block**     | `boolean`                                       | `true/false`               | Display as a separate block             | `false` |
-| **ref**       | <Code>Ref<HTMLAnchorElement &#124; null></Code> | -                          | forwardRef                              | -       |
-| **css**       | `Stitches.CSS`                                  | -                          | Override Default CSS style              | -       |
-| **as**        | `keyof JSX.IntrinsicElements`                   | -                          | Changes which tag component outputs     | `a`     |
-| ...           | `AnchorHTMLAttributes`                          | `'rel', 'target', ...`     | Native props                            | -       |
+| Attribute                | Type                                            | Accepted values            | Description                         | Default |
+| ------------------------ | ----------------------------------------------- | -------------------------- | ----------------------------------- | ------- |
+| **color**                | `LinkColors` `boolean` `string`                 | [LinkColors](#link-colors) | Change link color                   | `false` |
+| **href**                 | `string`                                        | -                          | Link url                            | -       |
+| **isExternal** `updated` | `boolean`                                       | `true/false`               | Show link icon                      | `false` |
+| **underline**            | `boolean`                                       | `true/false`               | Display underline                   | `false` |
+| **block**                | `boolean`                                       | `true/false`               | Display as a separate block         | `false` |
+| **ref**                  | <Code>Ref<HTMLAnchorElement &#124; null></Code> | -                          | forwardRef                          | -       |
+| **css**                  | `Stitches.CSS`                                  | -                          | Override Default CSS style          | -       |
+| **as**                   | `keyof JSX.IntrinsicElements`                   | -                          | Changes which tag component outputs | `a`     |
+| ...                      | `AnchorHTMLAttributes`                          | `'rel', 'target', ...`     | Native props                        | -       |
 
 <Spacer y={2} />
 
@@ -87,11 +87,11 @@ import { Link } from '@nextui-org/react';
 
 ```ts
 type LinkColors =
-  | 'text'
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'warning'
-  | 'error';
+  | "text"
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error";
 ```
diff --git a/packages/react/src/link/__tests__/index.test.tsx b/packages/react/src/link/__tests__/index.test.tsx
index 8bfeeef43f..675d42a4bc 100644
--- a/packages/react/src/link/__tests__/index.test.tsx
+++ b/packages/react/src/link/__tests__/index.test.tsx
@@ -11,7 +11,7 @@ describe("Link", () => {
         <Link color="secondary" href="https://nextui.org">
           link
         </Link>
-        <Link icon color="success" href="https://nextui.org">
+        <Link isExternal color="success" href="https://nextui.org">
           link
         </Link>
         <Link underline href="https://nextui.org">
@@ -23,7 +23,6 @@ describe("Link", () => {
       </div>,
     );
 
-    expect(wrapper.html()).toMatchSnapshot();
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
diff --git a/packages/react/src/link/link.tsx b/packages/react/src/link/link.tsx
index e8690ee4c4..c1d311acb8 100644
--- a/packages/react/src/link/link.tsx
+++ b/packages/react/src/link/link.tsx
@@ -18,7 +18,7 @@ import StyledLink, {LinkVariantsProps} from "./link.styles";
 
 interface Props extends Omit<HTMLNextUIProps<"a">, keyof LinkVariantsProps> {
   children?: React.ReactNode | React.ReactNode[];
-  icon?: boolean;
+  isExternal?: boolean;
 }
 
 export type LinkProps = Props & LinkVariantsProps & AriaLinkProps;
@@ -41,7 +41,7 @@ interface IFocusRingAria extends FocusRingAria {
 const Link = forwardRef<LinkProps, "a">((props, ref) => {
   const {
     children,
-    icon = false,
+    isExternal = false,
     as,
     css,
     color = "default",
@@ -93,7 +93,7 @@ const Link = forwardRef<LinkProps, "a">((props, ref) => {
     >
       <>
         {children}
-        {icon && <LinkIcon />}
+        {isExternal && <LinkIcon />}
       </>
     </StyledLink>
   );

From 547b818875531a2f52dd4ac9f844cc39da047c14 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Wed, 17 Aug 2022 22:53:37 -0300
Subject: [PATCH 083/106] feat(react-navbar): transitions & collaspe item
 styles improved, nav docs improved

---
 apps/docs/content/docs/components/navbar.mdx  |  37 +++---
 .../notify-banner/notify-banner.tsx           |   4 +-
 .../docs/src/components/sparkles/sparkles.tsx |  11 +-
 apps/docs/src/components/sparkles/styles.ts   |  31 ++++-
 .../examples/navbar/active-item-variants.tsx  |   9 --
 .../src/pages/examples/navbar/bordered.tsx    |   2 +-
 .../src/pages/examples/navbar/variants.tsx    |  76 ++++++++++++
 .../examples/navbar/with-avatar-user.tsx      | 111 ++++++++++++++++++
 .../examples/navbar/with-dropdown-menu.tsx    |   2 +-
 .../examples/navbar/with-toggle-button.tsx    |  37 +++---
 packages/react/src/card/card.stories.tsx      |   7 +-
 packages/react/src/link/link.stories.tsx      |   6 +-
 .../react/src/navbar/__tests__/index.test.tsx |  73 ++++++++++++
 .../react/src/navbar/navbar-collapse-item.tsx |   4 +-
 packages/react/src/navbar/navbar.stories.tsx  |  98 +++++++++++++++-
 packages/react/src/navbar/navbar.styles.ts    |  16 ++-
 .../react/src/navbar/use-navbar-collapse.ts   |   7 +-
 17 files changed, 463 insertions(+), 68 deletions(-)
 create mode 100644 apps/docs/src/pages/examples/navbar/variants.tsx
 create mode 100644 apps/docs/src/pages/examples/navbar/with-avatar-user.tsx

diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index a2e10bcd41..e6d001d040 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -18,34 +18,28 @@ import { Navbar } from "@nextui-org/react";
 
 <Playground
   asIframe
-  title="Static"
+  title="Variants"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
-  iframeSrc="/examples/navbar/static"
+  iframeSrc="/examples/navbar/variants"
   files={navbarContent.staticVariant}
 />
 
 <Playground
   asIframe
-  title="Bordered"
-  iframeSrc="/examples/navbar/bordered"
+  title="Active Item Variants"
+  previewHeight="600px"
+  iframeSrc="/examples/navbar/active-item-variants"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.staticVariant}
+  files={navbarContent.floatingVariant}
 />
 
-<Playground
-  asIframe
-  title="Sticky"
-  iframeSrc="/examples/navbar/sticky"
-  desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.stickyVariant}
-/>
 
 <Playground
   asIframe
-  title="Floating"
-  iframeSrc="/examples/navbar/floating"
+  title="Bordered"
+  iframeSrc="/examples/navbar/bordered"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.floatingVariant}
+  files={navbarContent.staticVariant}
 />
 
 <Playground
@@ -74,28 +68,27 @@ import { Navbar } from "@nextui-org/react";
 
 <Playground
   asIframe
-  title="Active Item Variants"
+  title="With Toggle Button"
   previewHeight="600px"
-  iframeSrc="/examples/navbar/active-item-variants"
+  iframeSrc="/examples/navbar/with-toggle-button"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.floatingVariant}
 />
 
-
 <Playground
   asIframe
-  title="With Toggle Button"
+  title="With Dropdown Menu"
   previewHeight="600px"
-  iframeSrc="/examples/navbar/with-toggle-button"
+  iframeSrc="/examples/navbar/with-dropdown-menu"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.floatingVariant}
 />
 
 <Playground
   asIframe
-  title="With Dropdown Menu"
+  title="With Avatar User"
   previewHeight="600px"
-  iframeSrc="/examples/navbar/with-dropdown-menu"
+  iframeSrc="/examples/navbar/with-avatar-user"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.floatingVariant}
 />
diff --git a/apps/docs/src/components/notify-banner/notify-banner.tsx b/apps/docs/src/components/notify-banner/notify-banner.tsx
index 9d3880201a..d75eee19b9 100644
--- a/apps/docs/src/components/notify-banner/notify-banner.tsx
+++ b/apps/docs/src/components/notify-banner/notify-banner.tsx
@@ -57,9 +57,7 @@ const NotifyBanner: React.FC<Props> = (props) => {
         <StyledContent>
           <Spacer x={0.3} />
           {showSparkles ? (
-            <Sparkles
-              color={isDark ? "var(--nextui-colors-purple900)" : "var(--nextui-colors-yellow600)"}
-            >
+            <Sparkles activeOnHover>
               <AnimatedText css={{cursor: "pointer", userSelect: "none"}} size={16}>
                 {text}
               </AnimatedText>
diff --git a/apps/docs/src/components/sparkles/sparkles.tsx b/apps/docs/src/components/sparkles/sparkles.tsx
index 9e2d2918ae..03c26d5468 100644
--- a/apps/docs/src/components/sparkles/sparkles.tsx
+++ b/apps/docs/src/components/sparkles/sparkles.tsx
@@ -6,15 +6,22 @@ import usePrefersReducedMotion from "@hooks/use-prefers-reduced-motion";
 
 import {Sparkle} from "../icons";
 
-import {StyledSparkles, StyledChildWrapper, StyledSparkleWrapper} from "./styles";
+import {
+  StyledSparkles,
+  StyledChildWrapper,
+  StyledSparkleWrapper,
+  SparkleVariantProps,
+} from "./styles";
 
-export interface SparklesProps {
+interface Props {
   children?: React.ReactNode;
   floatAbove?: boolean;
   color?: string;
   css?: CSS;
 }
 
+export type SparklesProps = Props & SparkleVariantProps;
+
 const generateSparkle = (color = yellow.yellow500, floatAbove = true) => {
   return {
     id: String(random(10000, 99999)),
diff --git a/apps/docs/src/components/sparkles/styles.ts b/apps/docs/src/components/sparkles/styles.ts
index deb17a73da..2e1897ddd2 100644
--- a/apps/docs/src/components/sparkles/styles.ts
+++ b/apps/docs/src/components/sparkles/styles.ts
@@ -1,4 +1,5 @@
-import {styled, keyframes} from "@nextui-org/react";
+import {styled, keyframes, VariantProps} from "@nextui-org/react";
+import {darkTheme} from "@theme/shared";
 
 const growAndShrink = keyframes({
   "0%": {
@@ -30,6 +31,12 @@ export const StyledSparkleWrapper = styled("span", {
   svg: {
     display: "block",
     animation: `${spin} 1250ms linear forwards`,
+    path: {
+      fill: "$yellow600",
+      [`.${darkTheme} &`]: {
+        fill: "$purple900",
+      },
+    },
   },
   "@motion": {
     animation: "none",
@@ -42,11 +49,25 @@ export const StyledSparkleWrapper = styled("span", {
 export const StyledSparkles = styled("div", {
   position: "relative",
   display: "inline-block",
-  "&:hover": {
-    [`& ${StyledSparkleWrapper}`]: {
-      opacity: 1,
+  variants: {
+    activeOnHover: {
+      true: {
+        "&:hover": {
+          [`& ${StyledSparkleWrapper}`]: {
+            opacity: 1,
+          },
+        },
+      },
+      false: {
+        [`& ${StyledSparkleWrapper}`]: {
+          opacity: 1,
+        },
+      },
     },
   },
+  defaultVariants: {
+    activeOnHover: false,
+  },
 });
 
 export const StyledChildWrapper = styled("strong", {
@@ -54,3 +75,5 @@ export const StyledChildWrapper = styled("strong", {
   position: "relative",
   fontWeight: "bold",
 });
+
+export type SparkleVariantProps = VariantProps<typeof StyledSparkles>;
diff --git a/apps/docs/src/pages/examples/navbar/active-item-variants.tsx b/apps/docs/src/pages/examples/navbar/active-item-variants.tsx
index a09ccafb2e..a0a6a48338 100644
--- a/apps/docs/src/pages/examples/navbar/active-item-variants.tsx
+++ b/apps/docs/src/pages/examples/navbar/active-item-variants.tsx
@@ -81,15 +81,6 @@ export default function NavbarActiveItemVariantsExample() {
             </Radio.Group>
             <Spacer y={0.5} />
             <Radio.Group
-              css={{
-                "& .nextui-radio-group-items": {
-                  display: "grid",
-                  gridTemplateColumns: "repeat(3, 1fr)",
-                  gridTemplateRows: "repeat(2, 1fr)",
-                  gridColumnGap: "$8",
-                  gridRowGap: "$2",
-                },
-              }}
               defaultValue="default"
               label="Select active color"
               orientation="horizontal"
diff --git a/apps/docs/src/pages/examples/navbar/bordered.tsx b/apps/docs/src/pages/examples/navbar/bordered.tsx
index 16e8d67c13..ed91ad92eb 100644
--- a/apps/docs/src/pages/examples/navbar/bordered.tsx
+++ b/apps/docs/src/pages/examples/navbar/bordered.tsx
@@ -4,7 +4,7 @@ import {Navbar, Text, Button, Link} from "@nextui-org/react";
 export default function NavbarBorderedExample() {
   return (
     <Examples.NavbarLayout>
-      <Navbar isBordered>
+      <Navbar isBordered variant="sticky">
         <Navbar.Brand>
           <Examples.AcmeLogo />
           <Text b color="inherit" hideIn="xs">
diff --git a/apps/docs/src/pages/examples/navbar/variants.tsx b/apps/docs/src/pages/examples/navbar/variants.tsx
new file mode 100644
index 0000000000..a4e19f40b3
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/variants.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import {Examples} from "@components";
+import {Navbar, Text, Button, Card, Radio, Link, styled, useTheme} from "@nextui-org/react";
+
+const StyledVariantContainer = styled("div", {
+  dflex: "center",
+  position: "fixed",
+  width: "100%",
+  bottom: "10px",
+  "& .nextui-radio-group-items": {
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
+    gridTemplateRows: "1fr",
+    gridColumnGap: "$8",
+    gridRowGap: "$2",
+  },
+});
+
+export default function NavbarVariantsExample() {
+  const [variant, setVariant] = React.useState<any>("static");
+
+  const {isDark} = useTheme();
+
+  const variants = ["static", "floating", "sticky"];
+
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered={isDark} variant={variant}>
+        <Navbar.Brand>
+          <Examples.AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content hideIn="xs">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+      <StyledVariantContainer>
+        <Card css={{maxW: "50%"}}>
+          <Card.Body css={{pt: "$8", px: "$8"}}>
+            <Radio.Group
+              defaultValue="default"
+              label="Select variant"
+              orientation="horizontal"
+              size="sm"
+              value={variant}
+              onChange={setVariant}
+            >
+              {variants.map((variant) => (
+                <Radio key={variant} value={variant}>
+                  {variant}
+                </Radio>
+              ))}
+            </Radio.Group>
+          </Card.Body>
+        </Card>
+      </StyledVariantContainer>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/apps/docs/src/pages/examples/navbar/with-avatar-user.tsx b/apps/docs/src/pages/examples/navbar/with-avatar-user.tsx
new file mode 100644
index 0000000000..4f61550c20
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/with-avatar-user.tsx
@@ -0,0 +1,111 @@
+import {Examples} from "@components";
+import {Navbar, Text, Dropdown, Avatar, Link} from "@nextui-org/react";
+
+export default function NavbarWithAvatarUserExample() {
+  const collapseItems = [
+    "Profile",
+    "Dashboard",
+    "Activity",
+    "Analytics",
+    "System",
+    "Deployments",
+    "My Settings",
+    "Team Settings",
+    "Help & Feedback",
+    "Logout",
+  ];
+
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Toggle showIn="xs" />
+        <Navbar.Collapse>
+          {collapseItems.map((item, index) => (
+            <Navbar.CollapseItem
+              key={`${item}-${index}`}
+              activeColor="secondary"
+              css={{
+                color: index === collapseItems.length - 1 ? "$error" : "",
+              }}
+              isActive={index === 2}
+            >
+              <Link
+                color="inherit"
+                css={{
+                  minWidth: "100%",
+                }}
+                href="#"
+              >
+                {item}
+              </Link>
+            </Navbar.CollapseItem>
+          ))}
+        </Navbar.Collapse>
+        <Navbar.Brand>
+          <Examples.AcmeLogo />
+          <Text b color="inherit">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content
+          enableCursorHighlight
+          activeColor="secondary"
+          hideIn="xs"
+          variant="highlight-rounded"
+        >
+          <Navbar.Link isActive href="#">
+            Dashboard
+          </Navbar.Link>
+          <Navbar.Link href="#">Team</Navbar.Link>
+          <Navbar.Link href="#">Deployments</Navbar.Link>
+          <Navbar.Link href="#">Activity</Navbar.Link>
+          <Navbar.Link href="#">Settings</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Dropdown placement="bottom-right">
+            <Navbar.Item>
+              <Dropdown.Trigger>
+                <Avatar
+                  bordered
+                  as="button"
+                  color="secondary"
+                  size="md"
+                  src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+                />
+              </Dropdown.Trigger>
+            </Navbar.Item>
+            <Dropdown.Menu
+              aria-label="User menu actions"
+              color="secondary"
+              onAction={(actionKey) => console.log({actionKey})}
+            >
+              <Dropdown.Item key="profile" css={{height: "$18"}}>
+                <Text b color="inherit" css={{d: "flex"}}>
+                  Signed in as
+                </Text>
+                <Text b color="inherit" css={{d: "flex"}}>
+                  zoey@example.com
+                </Text>
+              </Dropdown.Item>
+              <Dropdown.Item key="settings" withDivider>
+                My Settings
+              </Dropdown.Item>
+              <Dropdown.Item key="team_settings">Team Settings</Dropdown.Item>
+              <Dropdown.Item key="analytics" withDivider>
+                Analytics
+              </Dropdown.Item>
+              <Dropdown.Item key="system">System</Dropdown.Item>
+              <Dropdown.Item key="configurations">Configurations</Dropdown.Item>
+              <Dropdown.Item key="help_and_feedback" withDivider>
+                Help & Feedback
+              </Dropdown.Item>
+              <Dropdown.Item key="logout" withDivider color="error">
+                Log Out
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </Navbar.Content>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/apps/docs/src/pages/examples/navbar/with-dropdown-menu.tsx b/apps/docs/src/pages/examples/navbar/with-dropdown-menu.tsx
index e86da89d39..7d8802a313 100644
--- a/apps/docs/src/pages/examples/navbar/with-dropdown-menu.tsx
+++ b/apps/docs/src/pages/examples/navbar/with-dropdown-menu.tsx
@@ -1,7 +1,7 @@
 import {Examples, ChevronDown, TagUser, Server, Flash, Activity, Scale} from "@components";
 import {Navbar, Text, Button, Link, Dropdown} from "@nextui-org/react";
 
-export default function NavbarWithToggleButtonExample() {
+export default function NavbarWithDropdownMenuExample() {
   const icons = {
     chevron: <ChevronDown fill="currentColor" size={16} />,
     scale: <Scale fill="var(--nextui-colors-warning)" size={30} />,
diff --git a/apps/docs/src/pages/examples/navbar/with-toggle-button.tsx b/apps/docs/src/pages/examples/navbar/with-toggle-button.tsx
index d96a036042..c71a52a00b 100644
--- a/apps/docs/src/pages/examples/navbar/with-toggle-button.tsx
+++ b/apps/docs/src/pages/examples/navbar/with-toggle-button.tsx
@@ -3,22 +3,15 @@ import {Navbar, Text, Button, Link} from "@nextui-org/react";
 
 export default function NavbarWithToggleButtonExample() {
   const collapseItems = [
-    "Store",
-    "Mac",
-    "iPad",
-    "iPhone",
-    "Watch",
-    "TV & Home",
-    "Music",
-    "Support",
-    "Store",
-    "Mac",
-    "iPad",
-    "iPhone",
-    "Watch",
-    "TV & Home",
-    "Music",
-    "Support",
+    "Features",
+    "Customers",
+    "Pricing",
+    "Company",
+    "Legal",
+    "Team",
+    "Help & Feedback",
+    "Login",
+    "Sign Up",
   ];
 
   return (
@@ -58,7 +51,17 @@ export default function NavbarWithToggleButtonExample() {
         </Navbar.Content>
         <Navbar.Collapse>
           {collapseItems.map((item, index) => (
-            <Navbar.CollapseItem key={`${item}-${index}`}>{item}</Navbar.CollapseItem>
+            <Navbar.CollapseItem key={`${item}-${index}`}>
+              <Link
+                color="inherit"
+                css={{
+                  minWidth: "100%",
+                }}
+                href="#"
+              >
+                {item}
+              </Link>
+            </Navbar.CollapseItem>
           ))}
         </Navbar.Collapse>
       </Navbar>
diff --git a/packages/react/src/card/card.stories.tsx b/packages/react/src/card/card.stories.tsx
index cf937d15c2..2824398305 100644
--- a/packages/react/src/card/card.stories.tsx
+++ b/packages/react/src/card/card.stories.tsx
@@ -84,7 +84,12 @@ export const WithFooter = () => (
           <Text>Make beautiful websites regardless of your design experience.</Text>
         </Card.Body>
         <Card.Footer>
-          <Link icon color="primary" href="https://github.com/nextui-org/nextui" target="_blank">
+          <Link
+            isExternal
+            color="primary"
+            href="https://github.com/nextui-org/nextui"
+            target="_blank"
+          >
             Visit source code on GitHub.
           </Link>
         </Card.Footer>
diff --git a/packages/react/src/link/link.stories.tsx b/packages/react/src/link/link.stories.tsx
index 4a99342a9c..1393deef0f 100644
--- a/packages/react/src/link/link.stories.tsx
+++ b/packages/react/src/link/link.stories.tsx
@@ -43,13 +43,13 @@ export const Variants = () => (
   </>
 );
 
-export const Icon = () => (
+export const isExternal = () => (
   <>
-    <Link icon href="#">
+    <Link isExternal href="#">
       {text}
     </Link>
     <Spacer y={0.5} />
-    <Link icon color="primary" href="#">
+    <Link isExternal color="primary" href="#">
       {text}
     </Link>
   </>
diff --git a/packages/react/src/navbar/__tests__/index.test.tsx b/packages/react/src/navbar/__tests__/index.test.tsx
index a1873fce31..faecafd08f 100644
--- a/packages/react/src/navbar/__tests__/index.test.tsx
+++ b/packages/react/src/navbar/__tests__/index.test.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import {render} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import Navbar from "../index";
 
@@ -9,4 +10,76 @@ describe("Navbar", () => {
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
+
+  it("should render correctly with brand", () => {
+    const wrapper = render(
+      <Navbar data-testid="navbar-test">
+        <Navbar.Brand>ACME</Navbar.Brand>
+      </Navbar>,
+    );
+
+    let navbar = wrapper.getByTestId("navbar-test");
+    let brand = navbar.getElementsByTagName("span")[0];
+
+    expect(brand.innerHTML).toBe("ACME");
+  });
+
+  it("should render correctly content children", () => {
+    const wrapper = render(
+      <Navbar data-testid="navbar-test">
+        <Navbar.Content>
+          <Navbar.Link href="#">Dashboard</Navbar.Link>
+          <Navbar.Link href="#">Team</Navbar.Link>
+          <Navbar.Link href="#">Deployments</Navbar.Link>
+          <Navbar.Link href="#">Activity</Navbar.Link>
+          <Navbar.Link href="#">Settings</Navbar.Link>
+        </Navbar.Content>
+      </Navbar>,
+    );
+
+    let navbar = wrapper.getByTestId("navbar-test");
+
+    let navbarItems = navbar.querySelectorAll("li");
+
+    expect(navbarItems.length).toBe(5);
+  });
+
+  it("should render correctly with collapse items", () => {
+    const items = ["item1", "item2", "item3", "item4", "item5"];
+
+    const wrapper = render(
+      <Navbar data-testid="navbar-test">
+        <Navbar.Toggle data-testid="navbar-toggle-test" />
+        <Navbar.Content>
+          <Navbar.Link href="#">Dashboard</Navbar.Link>
+          <Navbar.Link href="#">Team</Navbar.Link>
+          <Navbar.Link href="#">Deployments</Navbar.Link>
+          <Navbar.Link href="#">Activity</Navbar.Link>
+          <Navbar.Link href="#">Settings</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Collapse>
+          {items.map((item, index) => (
+            <Navbar.CollapseItem key={`${item}-${index}`}>{item}</Navbar.CollapseItem>
+          ))}
+        </Navbar.Collapse>
+      </Navbar>,
+    );
+
+    let navbar = wrapper.getByTestId("navbar-test");
+    let toggle = wrapper.getByTestId("navbar-toggle-test");
+
+    userEvent.click(toggle);
+
+    let collapse = navbar.querySelector(".nextui-navbar-collapse");
+
+    expect(collapse).toBeTruthy();
+
+    if (collapse) {
+      let collapseItems = collapse.querySelectorAll("li");
+      let firstItem = collapseItems[0];
+
+      expect(collapseItems.length).toBe(collapseItems.length);
+      expect(firstItem.innerHTML).toBe(items[0]);
+    }
+  });
 });
diff --git a/packages/react/src/navbar/navbar-collapse-item.tsx b/packages/react/src/navbar/navbar-collapse-item.tsx
index 9f520a1d95..0022c8aa08 100644
--- a/packages/react/src/navbar/navbar-collapse-item.tsx
+++ b/packages/react/src/navbar/navbar-collapse-item.tsx
@@ -13,6 +13,7 @@ import {StyledNavbarCollapseItem, NavbarCollapseItemVariantsProps} from "./navba
 export type NavbarCollapseItemProps = HTMLNextUIProps<"li"> &
   NavbarCollapseItemVariantsProps & {
     transitionDelay?: number; // in seconds
+    transitionTime?: number; // in seconds
   };
 
 const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref) => {
@@ -20,6 +21,7 @@ const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref
     children,
     className,
     transitionDelay = 0,
+    transitionTime = 0.75,
     disableAnimation,
     style,
     css,
@@ -68,7 +70,7 @@ const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref
         : "matrix(0.85, 0, 0, 0.85, 5, 20)",
       "--netxui--collapseItemTransition":
         !disableAnimation && context.isCollapseOpen
-          ? `opacity 1s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s, transform 1s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s`
+          ? `opacity ${transitionTime}s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s, transform ${transitionTime}s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s`
           : "none",
     };
   }, [
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index a7b6946886..f4fad84883 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import {Meta} from "@storybook/react";
 
-import {Link, Text, Button, Spacer, Dropdown} from "../index";
+import {Link, Text, Button, Spacer, Dropdown, Avatar} from "../index";
 import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "../utils/icons";
 import {styled} from "../theme/stitches.config";
 
@@ -412,3 +412,99 @@ export const WithDropdown = () => {
     </App>
   );
 };
+
+export const WithAvatarUser = () => {
+  const collapseItems = [
+    "Profile",
+    "Dashboard",
+    "Activity",
+    "Analytics",
+    "System",
+    "Deployments",
+    "My Settings",
+    "Team Settings",
+    "Help & Feedback",
+    "Logout",
+  ];
+
+  return (
+    <App>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Toggle showIn="xs" />
+        <Navbar.Collapse>
+          {collapseItems.map((item, index) => (
+            <Navbar.CollapseItem key={`${item}-${index}`} isActive={index === 2}>
+              <Link color="inherit" href="#">
+                {item}
+              </Link>
+            </Navbar.CollapseItem>
+          ))}
+        </Navbar.Collapse>
+        <Navbar.Brand>
+          <AcmeLogo />
+          <Text b color="inherit">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content
+          enableCursorHighlight
+          activeColor="secondary"
+          hideIn="xs"
+          variant="highlight-rounded"
+        >
+          <Navbar.Link isActive href="#">
+            Dashboard
+          </Navbar.Link>
+          <Navbar.Link href="#">Team</Navbar.Link>
+          <Navbar.Link href="#">Deployments</Navbar.Link>
+          <Navbar.Link href="#">Activity</Navbar.Link>
+          <Navbar.Link href="#">Settings</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Dropdown placement="bottom-right">
+            <Navbar.Item>
+              <Dropdown.Trigger>
+                <Avatar
+                  bordered
+                  as="button"
+                  color="secondary"
+                  size="md"
+                  src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+                />
+              </Dropdown.Trigger>
+            </Navbar.Item>
+            <Dropdown.Menu
+              aria-label="User menu actions"
+              color="secondary"
+              onAction={(actionKey) => console.log({actionKey})}
+            >
+              <Dropdown.Item key="profile" css={{height: "$18"}}>
+                <Text b color="inherit" css={{d: "flex"}}>
+                  Signed in as
+                </Text>
+                <Text b color="inherit" css={{d: "flex"}}>
+                  zoey@example.com
+                </Text>
+              </Dropdown.Item>
+              <Dropdown.Item key="settings" withDivider>
+                My Settings
+              </Dropdown.Item>
+              <Dropdown.Item key="team_settings">Team Settings</Dropdown.Item>
+              <Dropdown.Item key="analytics" withDivider>
+                Analytics
+              </Dropdown.Item>
+              <Dropdown.Item key="system">System</Dropdown.Item>
+              <Dropdown.Item key="configurations">Configurations</Dropdown.Item>
+              <Dropdown.Item key="help_and_feedback" withDivider>
+                Help & Feedback
+              </Dropdown.Item>
+              <Dropdown.Item key="logout" withDivider color="error">
+                Log Out
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </Navbar.Content>
+      </Navbar>
+    </App>
+  );
+};
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index 62d927be7f..27969d7287 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -72,16 +72,28 @@ export const StyledBaseNavbarList = styled("ul", {
 
 export const StyledNavbarCollapseItem = styled(StyledBaseNavbarItem, {
   opacity: 0,
-  pb: "20px",
+  paddingBottom: "$6",
+  fontSize: "$lg",
+  lineHeight: "$lg",
+  fontWeight: "$normal",
   transformOrigin: "top",
-  fontSize: "3rem",
   variants: {
+    activeColor: itemColors,
+    isActive: {
+      true: {
+        color: "$$navbarItemActiveColor",
+        fontWeight: "$semibold",
+      },
+    },
     disableAnimation: {
       true: {
         transition: "none",
       },
     },
   },
+  defaultVariants: {
+    activeColor: "default",
+  },
 });
 
 export const StyledNavbarCollapseWrapper = styled(StyledBaseNavbarList, {
diff --git a/packages/react/src/navbar/use-navbar-collapse.ts b/packages/react/src/navbar/use-navbar-collapse.ts
index 75a9d2a99b..1b25585ee6 100644
--- a/packages/react/src/navbar/use-navbar-collapse.ts
+++ b/packages/react/src/navbar/use-navbar-collapse.ts
@@ -6,6 +6,7 @@ import {HTMLNextUIProps} from "../utils/system";
 import {useDOMRef} from "../utils/dom";
 import {pickChild} from "../utils/collections";
 import {arrayToObject} from "../utils/object";
+import useBodyScroll from "../use-body-scroll";
 
 import NavbarCollapseItem from "./navbar-collapse-item";
 import {NavbarCollapseVariantsProps} from "./navbar.styles";
@@ -30,15 +31,19 @@ export function useNavbarCollapse(props: UseNavbarCollapseProps = {}) {
   const domRef = useDOMRef(ref);
 
   const [, items] = pickChild(children, NavbarCollapseItem);
+  const [, setBodyHidden] = useBodyScroll(null, {scrollLayer: true});
 
   useEffect(() => {
     if (!context.isCollapseOpen) {
       // restore scroll to the top of the collapse
       domRef.current &&
-        domRef.current?.scrollTo({
+        domRef.current?.scrollTo?.({
           top: 0,
         });
       setHasScrolled(false);
+      setBodyHidden(false);
+    } else {
+      setBodyHidden(true);
     }
 
     const handleScroll = () => {

From cb08262209343dddbf23967f80f5d2f8e7ffba5e Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Thu, 18 Aug 2022 23:07:06 -0300
Subject: [PATCH 084/106] feat(docs-navbar): navbar anatomy and examples
 improved

---
 .../components/navbar/active-item-variants.ts | 104 ++++++++++++++++++
 .../navbar/{static.ts => bordered.ts}         |  10 +-
 apps/docs/content/components/navbar/common.ts |  16 +++
 .../content/components/navbar/floating.ts     |  51 ---------
 apps/docs/content/components/navbar/index.ts  |  12 +-
 apps/docs/content/components/navbar/sticky.ts |  51 ---------
 .../content/components/navbar/variants.ts     |  78 +++++++++++++
 apps/docs/content/docs/components/navbar.mdx  |  48 +++++---
 .../components/playground/dynamic-live.tsx    |  16 ++-
 .../src/pages/examples/navbar/bordered.tsx    |   8 +-
 .../src/pages/examples/navbar/variants.tsx    |   6 +-
 .../examples/navbar/with-avatar-user.tsx      |   2 +-
 12 files changed, 262 insertions(+), 140 deletions(-)
 create mode 100644 apps/docs/content/components/navbar/active-item-variants.ts
 rename apps/docs/content/components/navbar/{static.ts => bordered.ts} (77%)
 delete mode 100644 apps/docs/content/components/navbar/floating.ts
 delete mode 100644 apps/docs/content/components/navbar/sticky.ts
 create mode 100644 apps/docs/content/components/navbar/variants.ts

diff --git a/apps/docs/content/components/navbar/active-item-variants.ts b/apps/docs/content/components/navbar/active-item-variants.ts
new file mode 100644
index 0000000000..913a7e51fe
--- /dev/null
+++ b/apps/docs/content/components/navbar/active-item-variants.ts
@@ -0,0 +1,104 @@
+import {Layout, Box, AcmeLogo, Content, VariantsSelectorWrapper} from "./common";
+
+const App = `import React from "react";
+import { Navbar, Button, Link, Text, Card, Spacer, Radio, useTheme } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+import { VariantsSelectorWrapper } from "./VariantsSelectorWrapper.js";
+
+export default function App() {
+  const [variant, setVariant] = React.useState("default");
+  const [activeColor, setActiveColor] = React.useState("primary");
+
+  const {isDark} = useTheme();
+
+  const variants = [
+    "default",
+    "highlight",
+    "highlight-solid",
+    "underline",
+    "highlight-rounded",
+    "highlight-solid-rounded",
+    "underline-rounded",
+  ];
+
+  const colors = ["primary", "secondary", "success", "warning", "error"];
+  
+  return (
+    <Layout>
+      <Navbar isBordered={isDark} variant="sticky">
+        <Navbar.Brand>
+          <AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content activeColor={activeColor} hideIn="xs" variant={variant}>
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Integrations</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} color={activeColor} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+      <VariantsSelectorWrapper>
+        <Card css={{px: "$6", maxW: "90%"}}>
+          <Card.Body>
+            <Radio.Group
+              defaultValue="default"
+              label="Select active variant"
+              orientation="horizontal"
+              size="sm"
+              value={variant}
+              onChange={setVariant}
+            >
+              {variants.map((variant) => (
+                <Radio key={variant} color={activeColor} value={variant}>
+                  {variant}
+                </Radio>
+              ))}
+            </Radio.Group>
+            <Spacer y={0.5} />
+            <Radio.Group
+              defaultValue="default"
+              label="Select active color"
+              orientation="horizontal"
+              size="sm"
+              value={activeColor}
+              onChange={setActiveColor}
+            >
+              {colors.map((color) => (
+                <Radio key={color} color={activeColor} value={color}>
+                  {color === "primary" ? "primary (default)" : color}
+                </Radio>
+              ))}
+            </Radio.Group>
+          </Card.Body>
+        </Card>
+      </VariantsSelectorWrapper>      
+    </Layout>
+  )
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Box.js": Box,
+  "/VariantsSelectorWrapper.js": VariantsSelectorWrapper,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/navbar/static.ts b/apps/docs/content/components/navbar/bordered.ts
similarity index 77%
rename from apps/docs/content/components/navbar/static.ts
rename to apps/docs/content/components/navbar/bordered.ts
index 472411c2ad..96233ce2d7 100644
--- a/apps/docs/content/components/navbar/static.ts
+++ b/apps/docs/content/components/navbar/bordered.ts
@@ -1,22 +1,22 @@
 import {Layout, Box, AcmeLogo, Content} from "./common";
 
-const App = `import { Navbar } from "@nextui-org/react";
+const App = `import { Navbar, Button, Link, Text } from "@nextui-org/react";
 import { Layout } from "./Layout.js";
 import { AcmeLogo } from "./AcmeLogo.js";
 
 export default function App() {
   return (
     <Layout>
-      <Navbar>
+      <Navbar isBordered variant="floating">
         <Navbar.Brand>
           <AcmeLogo />
-          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
+          <Text b color="inherit" hideIn="xs">
             ACME
           </Text>
         </Navbar.Brand>
-        <Navbar.Content css={{"@smMax": {d: "none"}}}>
+        <Navbar.Content hideIn="xs" variant="highlight-rounded">
           <Navbar.Link href="#">Features</Navbar.Link>
-          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link isActive href="#">Customers</Navbar.Link>
           <Navbar.Link href="#">Integrations</Navbar.Link>
           <Navbar.Link href="#">Pricing</Navbar.Link>
           <Navbar.Link href="#">Company</Navbar.Link>
diff --git a/apps/docs/content/components/navbar/common.ts b/apps/docs/content/components/navbar/common.ts
index cffcf5c78a..a90c4edbed 100644
--- a/apps/docs/content/components/navbar/common.ts
+++ b/apps/docs/content/components/navbar/common.ts
@@ -110,6 +110,7 @@ export const Layout = ({ children }) => (
     css={{
       maxW: "100%",
       maxHeight: "600px",
+      position: "relative",
       overflow: "visible scroll",
     }}
   >
@@ -117,3 +118,18 @@ export const Layout = ({ children }) => (
     <Content />
   </Box>
 );`;
+
+export const VariantsSelectorWrapper = `// used as a wrapper for the navbar variants radio buttons
+const VariantsSelectorWrapper = styled("div", {
+  dflex: "center",
+  position: "fixed",
+  width: "100%",
+  bottom: "10px",
+  "& .nextui-radio-group-items": {
+    display: "grid",
+    gridTemplateColumns: "repeat(3, 1fr)",
+    gridTemplateRows: "1fr",
+    gridColumnGap: "$8",
+    gridRowGap: "$2",
+  },
+});`;
diff --git a/apps/docs/content/components/navbar/floating.ts b/apps/docs/content/components/navbar/floating.ts
deleted file mode 100644
index b298935c04..0000000000
--- a/apps/docs/content/components/navbar/floating.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {Layout, Box, AcmeLogo, Content} from "./common";
-
-const App = `import { Navbar, Button, Link, Text, useTheme } from "@nextui-org/react";
-import { Layout } from "./Layout.js";
-import { AcmeLogo } from "./AcmeLogo.js";
-
-export default function App() {
-  const { isDark } = useTheme();
-
-  return (
-    <Layout>
-      <Navbar isBordered={isDark} variant="floating">
-        <Navbar.Brand>
-          <AcmeLogo />
-          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
-            ACME
-          </Text>
-        </Navbar.Brand>
-        <Navbar.Content css={{"@smMax": {d: "none"}}}>
-          <Navbar.Link href="#">Features</Navbar.Link>
-          <Navbar.Link href="#">Customers</Navbar.Link>
-          <Navbar.Link href="#">Integrations</Navbar.Link>
-          <Navbar.Link href="#">Pricing</Navbar.Link>
-          <Navbar.Link href="#">Company</Navbar.Link>
-        </Navbar.Content>
-        <Navbar.Content>
-          <Navbar.Link color="inherit" href="#">
-            Login
-          </Navbar.Link>
-          <Navbar.Item>
-            <Button auto flat as={Link} href="#">
-              Sign Up
-            </Button>
-          </Navbar.Item>
-        </Navbar.Content>
-      </Navbar>
-    </Layout>
-  )
-}`;
-
-const react = {
-  "/Content.js": Content,
-  "/Layout.js": Layout,
-  "/AcmeLogo.js": AcmeLogo,
-  "/Box.js": Box,
-  "/App.js": App,
-};
-
-export default {
-  ...react,
-};
diff --git a/apps/docs/content/components/navbar/index.ts b/apps/docs/content/components/navbar/index.ts
index aaa0c040ee..9afbf312c3 100644
--- a/apps/docs/content/components/navbar/index.ts
+++ b/apps/docs/content/components/navbar/index.ts
@@ -1,9 +1,9 @@
-import staticVariant from "./static";
-import stickyVariant from "./sticky";
-import floatingVariant from "./floating";
+import variants from "./variants";
+import activeItemVariants from "./active-item-variants";
+import bordered from "./bordered";
 
 export default {
-  staticVariant,
-  stickyVariant,
-  floatingVariant,
+  variants,
+  activeItemVariants,
+  bordered,
 };
diff --git a/apps/docs/content/components/navbar/sticky.ts b/apps/docs/content/components/navbar/sticky.ts
deleted file mode 100644
index 904df0583b..0000000000
--- a/apps/docs/content/components/navbar/sticky.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {Layout, Box, AcmeLogo, Content} from "./common";
-
-const App = `import { Navbar, Button, Text, useTheme } from "@nextui-org/react";
-import { Layout } from "./Layout.js";
-import { AcmeLogo } from "./AcmeLogo.js";
-
-export default function App() {
-  const { isDark } = useTheme();
-
-  return (
-    <Layout>
-      <Navbar isBordered={isDark} variant="sticky">
-        <Navbar.Brand>
-          <AcmeLogo />
-          <Text b color="inherit" css={{"@xsMax": {d: "none"}}}>
-            ACME
-          </Text>
-        </Navbar.Brand>
-        <Navbar.Content css={{"@smMax": {d: "none"}}}>
-          <Navbar.Link href="#">Features</Navbar.Link>
-          <Navbar.Link href="#">Customers</Navbar.Link>
-          <Navbar.Link href="#">Integrations</Navbar.Link>
-          <Navbar.Link href="#">Pricing</Navbar.Link>
-          <Navbar.Link href="#">Company</Navbar.Link>
-        </Navbar.Content>
-        <Navbar.Content>
-          <Navbar.Link color="inherit" href="#">
-            Login
-          </Navbar.Link>
-          <Navbar.Item>
-            <Button auto flat as={Link} href="#">
-              Sign Up
-            </Button>
-          </Navbar.Item>
-        </Navbar.Content>
-      </Navbar>
-    </Layout>
-  )
-}`;
-
-const react = {
-  "/Content.js": Content,
-  "/Layout.js": Layout,
-  "/AcmeLogo.js": AcmeLogo,
-  "/Box.js": Box,
-  "/App.js": App,
-};
-
-export default {
-  ...react,
-};
diff --git a/apps/docs/content/components/navbar/variants.ts b/apps/docs/content/components/navbar/variants.ts
new file mode 100644
index 0000000000..3ab092708c
--- /dev/null
+++ b/apps/docs/content/components/navbar/variants.ts
@@ -0,0 +1,78 @@
+import {Layout, Box, AcmeLogo, Content, VariantsSelectorWrapper} from "./common";
+
+const App = `import React from "react";
+import { Navbar, Button, Link, Text, Card, Radio, useTheme } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+import { VariantsSelectorWrapper } from "./VariantsSelectorWrapper.js";
+
+export default function App() {
+  const [variant, setVariant] = React.useState("static");
+
+  const { isDark } = useTheme();
+
+  const variants = ["static", "floating", "sticky"];
+  
+  return (
+    <Layout>
+      <Navbar isBordered={isDark} variant={variant}>
+        <Navbar.Brand>
+          <AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content hideIn="xs">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Integrations</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+      <VariantsSelectorWrapper>
+        <Card css={{maxW: "50%"}}>
+          <Card.Body css={{pt: "$8", px: "$8"}}>
+            <Radio.Group
+              defaultValue="default"
+              label="Select variant"
+              orientation="horizontal"
+              size="sm"
+              value={variant}
+              onChange={setVariant}
+            >
+              {variants.map((variant) => (
+                <Radio key={variant} value={variant}>
+                  {variant}
+                </Radio>
+              ))}
+            </Radio.Group>
+          </Card.Body>
+        </Card>
+      </VariantsSelectorWrapper>      
+    </Layout>
+  )
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Box.js": Box,
+  "/VariantsSelectorWrapper.js": VariantsSelectorWrapper,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index e6d001d040..06c22c1f41 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -1,12 +1,12 @@
 ---
 title: "Navbar"
-description: "Navbar"
-url: https://nextui.org/docs/components/badge
+description: "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more."
+url: https://nextui.org/docs/components/navbar
 ---
 
 # Navbar
 
-Badges are used as a small numerical value or status descriptor for UI elements.
+A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.
 
 ```jsx
 import { Navbar } from "@nextui-org/react";
@@ -14,14 +14,30 @@ import { Navbar } from "@nextui-org/react";
 
 <CarbonAd />
 
+<Spacer y={2} />
+
+
+#### Anatomy
+
+- **Navbar**: The wrapper that provides state and general context management.
+- **Navbar.Brand**: A simple and flexible wrapper for branding content.
+- **Navbar.Content**: The wrapper that provides the state and variants for the navbar content items.
+- **Navbar.Item**: The individual items. Must be a direct child of `Navbar.Content`.
+- **Navbar.Link**: A link item. Must be a direct child of `Navbar.Content`.
+- **Navbar.Toggle**: The toggle button that toggles the navbar. Must be a direct child of `Navbar`.
+- **Navbar.Collapse**: The collapse wrapper that provides the state and menu for the navbar collapse items.
+- **Navbar.CollapseItem**: The individual items. Must be a direct child of `Navbar.Collapse`.
+
+
 <Spacer y={2} />
 
 <Playground
   asIframe
   title="Variants"
-  desc="Badge with default styles, used in standalone when `content` prop is empty."
+  desc="Navbar can be styled with different variants. The default variant is `static`, but you can also use `floating` and `sticky`."
   iframeSrc="/examples/navbar/variants"
-  files={navbarContent.staticVariant}
+  highlightedLines="16"
+  files={navbarContent.variants}
 />
 
 <Playground
@@ -29,8 +45,9 @@ import { Navbar } from "@nextui-org/react";
   title="Active Item Variants"
   previewHeight="600px"
   iframeSrc="/examples/navbar/active-item-variants"
-  desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.floatingVariant}
+  desc="The navbar content active items can be styled with different variants. You can apply the `variant` and `activeColor` either to the `Navbar.Content` or `Navbar.Item`."
+  highlightedLines="34"
+  files={navbarContent.activeItemVariants}
 />
 
 
@@ -38,8 +55,9 @@ import { Navbar } from "@nextui-org/react";
   asIframe
   title="Bordered"
   iframeSrc="/examples/navbar/bordered"
-  desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.staticVariant}
+  desc="You can add a border to the navbar with the `isBordered` prop."
+  highlightedLines="8"
+  files={navbarContent.bordered}
 />
 
 <Playground
@@ -47,7 +65,7 @@ import { Navbar } from "@nextui-org/react";
   title="Compact"
   iframeSrc="/examples/navbar/compact"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.staticVariant}
+  files={navbarContent.variants}
 />
 
 <Playground
@@ -55,7 +73,7 @@ import { Navbar } from "@nextui-org/react";
   title="Hide on scroll"
   iframeSrc="/examples/navbar/hide-on-scroll"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.floatingVariant}
+  files={navbarContent.variants}
 />
 
 <Playground
@@ -63,7 +81,7 @@ import { Navbar } from "@nextui-org/react";
   title="Cursor Highlight"
   iframeSrc="/examples/navbar/cursor-highlight"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.staticVariant}
+  files={navbarContent.variants}
 />
 
 <Playground
@@ -72,7 +90,7 @@ import { Navbar } from "@nextui-org/react";
   previewHeight="600px"
   iframeSrc="/examples/navbar/with-toggle-button"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.floatingVariant}
+  files={navbarContent.variants}
 />
 
 <Playground
@@ -81,7 +99,7 @@ import { Navbar } from "@nextui-org/react";
   previewHeight="600px"
   iframeSrc="/examples/navbar/with-dropdown-menu"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.floatingVariant}
+  files={navbarContent.variants}
 />
 
 <Playground
@@ -90,5 +108,5 @@ import { Navbar } from "@nextui-org/react";
   previewHeight="600px"
   iframeSrc="/examples/navbar/with-avatar-user"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.floatingVariant}
+  files={navbarContent.variants}
 />
diff --git a/apps/docs/src/components/playground/dynamic-live.tsx b/apps/docs/src/components/playground/dynamic-live.tsx
index 9a9dd0e0ef..3dcccd92d8 100644
--- a/apps/docs/src/components/playground/dynamic-live.tsx
+++ b/apps/docs/src/components/playground/dynamic-live.tsx
@@ -61,14 +61,20 @@ const Resizer = Components.styled(Box, {
   width: "auto",
   height: "100%",
   "& .resizer-bar": {
-    content: '""',
     cursor: "ew-resize",
     userSelect: "none",
     position: "absolute",
-    borderRadius: "$pill",
-    width: "6px",
-    height: "40px",
-    background: "$accents5",
+    dflex: "center",
+    width: "10px",
+    height: "100%",
+    "&:after": {
+      zIndex: "$10",
+      content: '""',
+      width: "6px",
+      height: "40px",
+      borderRadius: "$pill",
+      background: "$accents5",
+    },
   },
   "@xsMax": {
     display: "none",
diff --git a/apps/docs/src/pages/examples/navbar/bordered.tsx b/apps/docs/src/pages/examples/navbar/bordered.tsx
index ed91ad92eb..c583a07951 100644
--- a/apps/docs/src/pages/examples/navbar/bordered.tsx
+++ b/apps/docs/src/pages/examples/navbar/bordered.tsx
@@ -4,16 +4,18 @@ import {Navbar, Text, Button, Link} from "@nextui-org/react";
 export default function NavbarBorderedExample() {
   return (
     <Examples.NavbarLayout>
-      <Navbar isBordered variant="sticky">
+      <Navbar isBordered variant="floating">
         <Navbar.Brand>
           <Examples.AcmeLogo />
           <Text b color="inherit" hideIn="xs">
             ACME
           </Text>
         </Navbar.Brand>
-        <Navbar.Content hideIn="xs">
+        <Navbar.Content hideIn="xs" variant="highlight-rounded">
           <Navbar.Link href="#">Features</Navbar.Link>
-          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
           <Navbar.Link href="#">Pricing</Navbar.Link>
           <Navbar.Link href="#">Company</Navbar.Link>
         </Navbar.Content>
diff --git a/apps/docs/src/pages/examples/navbar/variants.tsx b/apps/docs/src/pages/examples/navbar/variants.tsx
index a4e19f40b3..5901421805 100644
--- a/apps/docs/src/pages/examples/navbar/variants.tsx
+++ b/apps/docs/src/pages/examples/navbar/variants.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import {Examples} from "@components";
 import {Navbar, Text, Button, Card, Radio, Link, styled, useTheme} from "@nextui-org/react";
 
-const StyledVariantContainer = styled("div", {
+const VariantsSelectorWrapper = styled("div", {
   dflex: "center",
   position: "fixed",
   width: "100%",
@@ -51,7 +51,7 @@ export default function NavbarVariantsExample() {
           </Navbar.Item>
         </Navbar.Content>
       </Navbar>
-      <StyledVariantContainer>
+      <VariantsSelectorWrapper>
         <Card css={{maxW: "50%"}}>
           <Card.Body css={{pt: "$8", px: "$8"}}>
             <Radio.Group
@@ -70,7 +70,7 @@ export default function NavbarVariantsExample() {
             </Radio.Group>
           </Card.Body>
         </Card>
-      </StyledVariantContainer>
+      </VariantsSelectorWrapper>
     </Examples.NavbarLayout>
   );
 }
diff --git a/apps/docs/src/pages/examples/navbar/with-avatar-user.tsx b/apps/docs/src/pages/examples/navbar/with-avatar-user.tsx
index 4f61550c20..2b2118c667 100644
--- a/apps/docs/src/pages/examples/navbar/with-avatar-user.tsx
+++ b/apps/docs/src/pages/examples/navbar/with-avatar-user.tsx
@@ -12,7 +12,7 @@ export default function NavbarWithAvatarUserExample() {
     "My Settings",
     "Team Settings",
     "Help & Feedback",
-    "Logout",
+    "Log Out",
   ];
 
   return (

From 0dd0d179f4dc2dfca73916b943cb901813bb779f Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 21 Aug 2022 11:30:27 -0300
Subject: [PATCH 085/106] feat(navbar):  docs improved, collapse transitions
 improved

---
 .../components/navbar/active-item-variants.ts |  1 -
 .../content/components/navbar/bordered.ts     |  1 -
 .../docs/content/components/navbar/compact.ts | 48 +++++++++++++++++
 .../components/navbar/cursor-highlight.ts     | 52 +++++++++++++++++++
 .../components/navbar/hide-on-scroll.ts       | 50 ++++++++++++++++++
 apps/docs/content/components/navbar/index.ts  |  6 +++
 .../content/components/navbar/variants.ts     |  1 -
 apps/docs/content/docs/components/navbar.mdx  | 16 +++---
 .../components/playground/dynamic-live.tsx    |  4 +-
 .../src/components/playground/playground.tsx  |  3 ++
 .../src/components/sandpack/code-viewer.tsx   |  3 +-
 .../src/pages/examples/navbar/compact.tsx     |  6 ++-
 .../examples/navbar/cursor-highlight.tsx      |  6 ++-
 .../react/src/navbar/navbar-collapse-item.tsx | 41 ++++++++++++---
 packages/react/src/navbar/navbar-collapse.tsx |  6 ++-
 packages/react/src/navbar/navbar-content.tsx  |  1 -
 packages/react/src/navbar/navbar.stories.tsx  | 20 +++----
 packages/react/src/navbar/navbar.styles.ts    |  1 +
 .../react/src/navbar/use-navbar-collapse.ts   | 21 +++++++-
 .../react/src/navbar/use-navbar-content.ts    |  8 +--
 20 files changed, 252 insertions(+), 43 deletions(-)
 create mode 100644 apps/docs/content/components/navbar/compact.ts
 create mode 100644 apps/docs/content/components/navbar/cursor-highlight.ts
 create mode 100644 apps/docs/content/components/navbar/hide-on-scroll.ts

diff --git a/apps/docs/content/components/navbar/active-item-variants.ts b/apps/docs/content/components/navbar/active-item-variants.ts
index 913a7e51fe..f8a2addf43 100644
--- a/apps/docs/content/components/navbar/active-item-variants.ts
+++ b/apps/docs/content/components/navbar/active-item-variants.ts
@@ -36,7 +36,6 @@ export default function App() {
         <Navbar.Content activeColor={activeColor} hideIn="xs" variant={variant}>
           <Navbar.Link href="#">Features</Navbar.Link>
           <Navbar.Link isActive href="#">Customers</Navbar.Link>
-          <Navbar.Link href="#">Integrations</Navbar.Link>
           <Navbar.Link href="#">Pricing</Navbar.Link>
           <Navbar.Link href="#">Company</Navbar.Link>
         </Navbar.Content>
diff --git a/apps/docs/content/components/navbar/bordered.ts b/apps/docs/content/components/navbar/bordered.ts
index 96233ce2d7..67114c5b2b 100644
--- a/apps/docs/content/components/navbar/bordered.ts
+++ b/apps/docs/content/components/navbar/bordered.ts
@@ -17,7 +17,6 @@ export default function App() {
         <Navbar.Content hideIn="xs" variant="highlight-rounded">
           <Navbar.Link href="#">Features</Navbar.Link>
           <Navbar.Link isActive href="#">Customers</Navbar.Link>
-          <Navbar.Link href="#">Integrations</Navbar.Link>
           <Navbar.Link href="#">Pricing</Navbar.Link>
           <Navbar.Link href="#">Company</Navbar.Link>
         </Navbar.Content>
diff --git a/apps/docs/content/components/navbar/compact.ts b/apps/docs/content/components/navbar/compact.ts
new file mode 100644
index 0000000000..7e63d0db3e
--- /dev/null
+++ b/apps/docs/content/components/navbar/compact.ts
@@ -0,0 +1,48 @@
+import {Layout, Box, AcmeLogo, Content} from "./common";
+
+const App = `import { Navbar, Button, Link, Text } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+
+export default function App() {
+  return (
+    <Layout>
+      <Navbar isCompact isBordered variant="sticky">
+        <Navbar.Brand>
+          <AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content hideIn="xs" variant="underline">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Layout>
+  )
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Box.js": Box,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/navbar/cursor-highlight.ts b/apps/docs/content/components/navbar/cursor-highlight.ts
new file mode 100644
index 0000000000..584b51d7ec
--- /dev/null
+++ b/apps/docs/content/components/navbar/cursor-highlight.ts
@@ -0,0 +1,52 @@
+import {Layout, Box, AcmeLogo, Content} from "./common";
+
+const App = `import { Navbar, Button, Link, Text, useTheme } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+
+export default function App() {
+  const { isDark } = useTheme();
+
+  return (
+    <Layout>
+      <Navbar isBordered={isDark} variant="sticky">
+        <Navbar.Brand>
+          <AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content enableCursorHighlight hideIn="xs" variant="underline">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Layout>
+  )
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Box.js": Box,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/navbar/hide-on-scroll.ts b/apps/docs/content/components/navbar/hide-on-scroll.ts
new file mode 100644
index 0000000000..d1b82d8f53
--- /dev/null
+++ b/apps/docs/content/components/navbar/hide-on-scroll.ts
@@ -0,0 +1,50 @@
+import {Layout, Box, AcmeLogo, Content} from "./common";
+
+const App = `import { Navbar, Button, Link, Text, useTheme } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+
+export default function App() {
+  const { isDark } = useTheme();
+
+  return (
+    <Layout>
+      <Navbar shouldHideOnScroll isBordered={isDark} variant="sticky">
+        <Navbar.Brand>
+          <AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content hideIn="xs" variant="underline">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">Customers</Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Layout>
+  )
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Box.js": Box,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/navbar/index.ts b/apps/docs/content/components/navbar/index.ts
index 9afbf312c3..6a2e908ba0 100644
--- a/apps/docs/content/components/navbar/index.ts
+++ b/apps/docs/content/components/navbar/index.ts
@@ -1,9 +1,15 @@
 import variants from "./variants";
 import activeItemVariants from "./active-item-variants";
 import bordered from "./bordered";
+import compact from "./compact";
+import hideOnScroll from "./hide-on-scroll";
+import cursorHighlight from "./cursor-highlight";
 
 export default {
   variants,
   activeItemVariants,
   bordered,
+  compact,
+  hideOnScroll,
+  cursorHighlight,
 };
diff --git a/apps/docs/content/components/navbar/variants.ts b/apps/docs/content/components/navbar/variants.ts
index 3ab092708c..4aee77f7e1 100644
--- a/apps/docs/content/components/navbar/variants.ts
+++ b/apps/docs/content/components/navbar/variants.ts
@@ -25,7 +25,6 @@ export default function App() {
         <Navbar.Content hideIn="xs">
           <Navbar.Link href="#">Features</Navbar.Link>
           <Navbar.Link isActive href="#">Customers</Navbar.Link>
-          <Navbar.Link href="#">Integrations</Navbar.Link>
           <Navbar.Link href="#">Pricing</Navbar.Link>
           <Navbar.Link href="#">Company</Navbar.Link>
         </Navbar.Content>
diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index 06c22c1f41..38fdcaca8c 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -64,30 +64,34 @@ import { Navbar } from "@nextui-org/react";
   asIframe
   title="Compact"
   iframeSrc="/examples/navbar/compact"
-  desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.variants}
+  desc="You can reduce the height and amount of padding that navbar contains by using the `isCompact` property."
+  highlightedLines="8"
+  files={navbarContent.compact}
 />
 
 <Playground
   asIframe
   title="Hide on scroll"
   iframeSrc="/examples/navbar/hide-on-scroll"
-  desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.variants}
+  desc="By using the `shouldHideOnScroll` the navbar hides on scroll down to leave more space for content."
+  highlightedLines="10"
+  files={navbarContent.hideOnScroll}
 />
 
 <Playground
   asIframe
   title="Cursor Highlight"
   iframeSrc="/examples/navbar/cursor-highlight"
-  desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.variants}
+  desc="You can highlight the navbar content items when the cursor is over them with the `enableCursorHighlight` prop."
+  highlightedLines="17"
+  files={navbarContent.cursorHighlight}
 />
 
 <Playground
   asIframe
   title="With Toggle Button"
   previewHeight="600px"
+  iframeInitialWidth={420}
   iframeSrc="/examples/navbar/with-toggle-button"
   desc="Badge with default styles, used in standalone when `content` prop is empty."
   files={navbarContent.variants}
diff --git a/apps/docs/src/components/playground/dynamic-live.tsx b/apps/docs/src/components/playground/dynamic-live.tsx
index 3dcccd92d8..ca207d0698 100644
--- a/apps/docs/src/components/playground/dynamic-live.tsx
+++ b/apps/docs/src/components/playground/dynamic-live.tsx
@@ -27,6 +27,7 @@ export interface Props {
   showWindowActions?: boolean;
   iframeSrc?: string;
   iframeTitle?: string;
+  iframeInitialWidth?: number;
   enableResize?: boolean;
   overflow?: "auto" | "visible" | "hidden";
 }
@@ -173,6 +174,7 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
   code,
   showEditor,
   initialEditorOpen,
+  iframeInitialWidth,
   noInline,
   overflow,
   showWindowActions,
@@ -186,7 +188,7 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
 
   const codeTheme = makeCodeTheme();
 
-  const resizerX = useMotionValue(0);
+  const resizerX = useMotionValue(-(iframeInitialWidth || 0));
   let constraintsResizerRef = useRef<HTMLDivElement>(null);
   let resizerRef = useRef<HTMLDivElement>(null);
   let iframeRef = useRef<HTMLIFrameElement>(null);
diff --git a/apps/docs/src/components/playground/playground.tsx b/apps/docs/src/components/playground/playground.tsx
index 7e303acbd4..b81313cdbc 100644
--- a/apps/docs/src/components/playground/playground.tsx
+++ b/apps/docs/src/components/playground/playground.tsx
@@ -41,6 +41,7 @@ interface Props {
   showWindowActions?: boolean;
   iframeSrc?: string;
   asIframe?: boolean;
+  iframeInitialWidth?: number;
   previewHeight?: string | number;
   overflow?: "auto" | "visible" | "hidden";
   files?: SandpackFiles;
@@ -75,6 +76,7 @@ const Playground: React.FC<PlaygroundProps> = ({
   highlightedLines,
   showSandpackPreview,
   showWindowActions,
+  iframeInitialWidth,
   enableResize,
   files,
   iframeSrc,
@@ -168,6 +170,7 @@ const Playground: React.FC<PlaygroundProps> = ({
               code={code}
               enableResize={enableResize || asIframe}
               height={previewHeight}
+              iframeInitialWidth={iframeInitialWidth}
               iframeSrc={iframeSrc}
               iframeTitle={title}
               noInline={noInline}
diff --git a/apps/docs/src/components/sandpack/code-viewer.tsx b/apps/docs/src/components/sandpack/code-viewer.tsx
index 6c770a91d7..29b39beaac 100644
--- a/apps/docs/src/components/sandpack/code-viewer.tsx
+++ b/apps/docs/src/components/sandpack/code-viewer.tsx
@@ -60,6 +60,7 @@ const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
 
     const lineCount = lineCountRef.current[activePath];
     const isExpandable = lineCount > 12 || isExpanded;
+    const isAppFile = activePath.includes("App");
 
     React.useEffect(() => {
       if (containerRef && containerRef?.current !== null && isExpandable) {
@@ -99,7 +100,7 @@ const SandpackCodeViewer = React.forwardRef<any, CodeViewerProps>(
           ref={ref}
           readOnly
           code={propCode || code}
-          decorators={decorators}
+          decorators={isAppFile ? decorators : []}
           filePath={sandpack.activePath}
           initMode={initMode || sandpack.initMode}
           showLineNumbers={showLineNumbers}
diff --git a/apps/docs/src/pages/examples/navbar/compact.tsx b/apps/docs/src/pages/examples/navbar/compact.tsx
index 2ab9ee3db9..6923c1192a 100644
--- a/apps/docs/src/pages/examples/navbar/compact.tsx
+++ b/apps/docs/src/pages/examples/navbar/compact.tsx
@@ -11,9 +11,11 @@ export default function NavbarBorderedExample() {
             ACME
           </Text>
         </Navbar.Brand>
-        <Navbar.Content hideIn="xs">
+        <Navbar.Content hideIn="xs" variant="underline">
           <Navbar.Link href="#">Features</Navbar.Link>
-          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
           <Navbar.Link href="#">Pricing</Navbar.Link>
           <Navbar.Link href="#">Company</Navbar.Link>
         </Navbar.Content>
diff --git a/apps/docs/src/pages/examples/navbar/cursor-highlight.tsx b/apps/docs/src/pages/examples/navbar/cursor-highlight.tsx
index 8937bfbc20..0a6374f429 100644
--- a/apps/docs/src/pages/examples/navbar/cursor-highlight.tsx
+++ b/apps/docs/src/pages/examples/navbar/cursor-highlight.tsx
@@ -13,9 +13,11 @@ export default function NavbarCursorHighlightExample() {
             ACME
           </Text>
         </Navbar.Brand>
-        <Navbar.Content enableCursorHighlight hideIn="xs">
+        <Navbar.Content enableCursorHighlight hideIn="xs" variant="underline">
           <Navbar.Link href="#">Features</Navbar.Link>
-          <Navbar.Link href="#">Customers</Navbar.Link>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
           <Navbar.Link href="#">Pricing</Navbar.Link>
           <Navbar.Link href="#">Company</Navbar.Link>
         </Navbar.Content>
diff --git a/packages/react/src/navbar/navbar-collapse-item.tsx b/packages/react/src/navbar/navbar-collapse-item.tsx
index 0022c8aa08..1198bd3c8e 100644
--- a/packages/react/src/navbar/navbar-collapse-item.tsx
+++ b/packages/react/src/navbar/navbar-collapse-item.tsx
@@ -14,17 +14,23 @@ export type NavbarCollapseItemProps = HTMLNextUIProps<"li"> &
   NavbarCollapseItemVariantsProps & {
     transitionDelay?: number; // in seconds
     transitionTime?: number; // in seconds
+    transitionMatrix?: {
+      in: string;
+      out: string;
+    };
   };
 
 const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref) => {
   const {
     children,
     className,
-    transitionDelay = 0,
-    transitionTime = 0.75,
+    transitionDelay,
+    transitionTime,
+    transitionMatrix,
     disableAnimation,
     style,
     css,
+
     ...otherProps
   } = props;
 
@@ -52,12 +58,31 @@ const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref
     return -1;
   }, [collapseContext?.items]);
 
+  const itemTransitions = useMemo(() => {
+    return {
+      transitionDelay: transitionDelay ?? collapseContext?.transitionDelay ?? 0,
+      transitionTime: transitionTime ?? collapseContext?.transitionTime ?? 0,
+      transitionMatrix: transitionMatrix ??
+        collapseContext?.transitionMatrix ?? {
+          in: "matrix(1, 0, 0, 1, 0, 0)",
+          out: "matrix(0.95, 0, 0, 1, 0, 15)",
+        },
+    };
+  }, [
+    transitionDelay,
+    transitionTime,
+    transitionMatrix,
+    collapseContext.transitionMatrix,
+    collapseContext.transitionDelay,
+    collapseContext.transitionTime,
+  ]);
+
   const defaultDelay = useMemo(
     () =>
       collapseContext.items && index > -1
-        ? index / collapseContext.items.length + transitionDelay
+        ? index / collapseContext.items.length + itemTransitions.transitionDelay
         : 0.1,
-    [index, transitionDelay, collapseContext?.items],
+    [index, itemTransitions.transitionDelay, collapseContext?.items],
   );
 
   const itemStyle = useMemo(() => {
@@ -66,11 +91,11 @@ const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref
     return {
       "--nextui--collapseItemOpacity": isVisible ? 1 : 0,
       "--nextui--collapseItemTransform": isVisible
-        ? "matrix(1, 0, 0, 1, 0, 0)"
-        : "matrix(0.85, 0, 0, 0.85, 5, 20)",
+        ? itemTransitions.transitionMatrix.in
+        : itemTransitions.transitionMatrix.out,
       "--netxui--collapseItemTransition":
         !disableAnimation && context.isCollapseOpen
-          ? `opacity ${transitionTime}s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s, transform ${transitionTime}s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s`
+          ? `opacity ${itemTransitions.transitionTime}s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s, transform ${itemTransitions.transitionTime}s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s`
           : "none",
     };
   }, [
@@ -78,6 +103,8 @@ const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref
     isVisible,
     disableAnimation,
     defaultDelay,
+    itemTransitions.transitionMatrix,
+    itemTransitions.transitionTime,
     context.isCollapseOpen,
     collapseContext.hasScrolled,
   ]);
diff --git a/packages/react/src/navbar/navbar-collapse.tsx b/packages/react/src/navbar/navbar-collapse.tsx
index 820664f353..e4f9015bb8 100644
--- a/packages/react/src/navbar/navbar-collapse.tsx
+++ b/packages/react/src/navbar/navbar-collapse.tsx
@@ -16,13 +16,15 @@ const NavbarCollapse = forwardRef<NavbarCollapseProps, "ul">((props, ref) => {
   return (
     <NavbarCollapseProvider value={context}>
       <StyledNavbarCollapse
-        ref={context.domRef}
         className={clsx("nextui-navbar-collapse", context.className)}
         css={context.collpaseCss}
         isOpen={context.isOpen}
         {...context.otherProps}
       >
-        <StyledNavbarCollapseWrapper className="nextui-navbar-collapse-wrapper">
+        <StyledNavbarCollapseWrapper
+          ref={context.domRef}
+          className="nextui-navbar-collapse-wrapper"
+        >
           {context.children}
         </StyledNavbarCollapseWrapper>
       </StyledNavbarCollapse>
diff --git a/packages/react/src/navbar/navbar-content.tsx b/packages/react/src/navbar/navbar-content.tsx
index ac8a085b4a..a74d423d48 100644
--- a/packages/react/src/navbar/navbar-content.tsx
+++ b/packages/react/src/navbar/navbar-content.tsx
@@ -33,7 +33,6 @@ const NavbarContent = forwardRef<NavbarContentProps, "ul">((props, ref) => {
         className={clsx("nextui-navbar-content", context.className)}
         css={{
           gap: context.gap,
-          color: context.color,
           ...context.css,
         }}
         enableCursorHighlight={context.enableCursorHighlight}
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index f4fad84883..cbde316b5f 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -195,14 +195,14 @@ export const WithToggle = () => {
     "TV & Home",
     "Music",
     "Support",
-    "Store",
-    "Mac",
-    "iPad",
-    "iPhone",
-    "Watch",
-    "TV & Home",
-    "Music",
-    "Support",
+    "Store2",
+    "Mac2",
+    "iPad2",
+    "iPhone2",
+    "Watch2",
+    "TV & Home2",
+    "Music2",
+    "Support2",
   ];
 
   return (
@@ -243,7 +243,9 @@ export const WithToggle = () => {
         </Navbar.Content>
         <Navbar.Collapse>
           {collapseItems.map((item, index) => (
-            <Navbar.CollapseItem key={`${item}-${index}`}>{item}</Navbar.CollapseItem>
+            <Navbar.CollapseItem key={`${item}-${index}`} css={{fontSize: "$lg"}}>
+              {item}
+            </Navbar.CollapseItem>
           ))}
         </Navbar.Collapse>
       </Navbar>
diff --git a/packages/react/src/navbar/navbar.styles.ts b/packages/react/src/navbar/navbar.styles.ts
index 27969d7287..84bb979a74 100644
--- a/packages/react/src/navbar/navbar.styles.ts
+++ b/packages/react/src/navbar/navbar.styles.ts
@@ -464,6 +464,7 @@ export const StyledNavbarContent = styled(
     flexWrap: "nowrap",
     alignItems: "center",
     gap: "$$navbarContentItemGap",
+    color: "inherit",
     variants: {
       enableCursorHighlight: {
         true: {
diff --git a/packages/react/src/navbar/use-navbar-collapse.ts b/packages/react/src/navbar/use-navbar-collapse.ts
index 1b25585ee6..8a34d5e696 100644
--- a/packages/react/src/navbar/use-navbar-collapse.ts
+++ b/packages/react/src/navbar/use-navbar-collapse.ts
@@ -15,6 +15,12 @@ import {useNavbarContext} from "./navbar-context";
 interface Props extends Omit<HTMLNextUIProps<"ul">, keyof NavbarCollapseVariantsProps> {
   ref?: ForwardedRef<any>;
   children?: React.ReactNode | React.ReactNode[];
+  transitionDelay?: number; // in seconds
+  transitionTime?: number; // in seconds
+  transitionMatrix?: {
+    in: string;
+    out: string;
+  };
 }
 
 export type UseNavbarCollapseProps = Props & NavbarCollapseVariantsProps;
@@ -23,7 +29,16 @@ export type UseNavbarCollapseProps = Props & NavbarCollapseVariantsProps;
  * @internal
  */
 export function useNavbarCollapse(props: UseNavbarCollapseProps = {}) {
-  const {css, children, ref, className, ...otherProps} = props;
+  const {
+    css,
+    children,
+    ref,
+    transitionDelay = 0,
+    transitionTime = 0.5,
+    transitionMatrix = {in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.95, 0, 0, 0.95, 10, 20)"},
+    className,
+    ...otherProps
+  } = props;
 
   const [hasScrolled, setHasScrolled] = useState(false);
 
@@ -45,7 +60,6 @@ export function useNavbarCollapse(props: UseNavbarCollapseProps = {}) {
     } else {
       setBodyHidden(true);
     }
-
     const handleScroll = () => {
       if (domRef.current && domRef.current?.scrollTop > 0 && !hasScrolled) {
         setHasScrolled(true);
@@ -84,6 +98,9 @@ export function useNavbarCollapse(props: UseNavbarCollapseProps = {}) {
     collpaseCss,
     isOpen: context.isCollapseOpen,
     hasScrolled,
+    transitionDelay,
+    transitionTime,
+    transitionMatrix,
     className,
     otherProps,
   };
diff --git a/packages/react/src/navbar/use-navbar-content.ts b/packages/react/src/navbar/use-navbar-content.ts
index cfe3644a18..ba008f136a 100644
--- a/packages/react/src/navbar/use-navbar-content.ts
+++ b/packages/react/src/navbar/use-navbar-content.ts
@@ -1,7 +1,7 @@
 import {useMemo, useState, useRef} from "react";
 import {mergeProps} from "@react-aria/utils";
 
-import {CSSGapUnit, CSSColor} from "../theme";
+import {CSSGapUnit} from "../theme";
 import {HTMLNextUIProps} from "../utils/system";
 
 import {NavbarItemVariantsProps, NavbarContentVariantsProps} from "./navbar.styles";
@@ -12,10 +12,6 @@ interface Props extends Omit<HTMLNextUIProps<"ul">, "color"> {
    * @default "$space$10 = 1.5rem" and "0px" (for highlight variants)
    */
   gap?: CSSGapUnit;
-  /**
-   * The main color of the navbar content items.
-   */
-  color?: CSSColor;
   /**
    * The active color of the navbar content items.
    * @default "$colors$link"
@@ -47,7 +43,6 @@ export type UseNavbarContentProps = Props & NavbarContentVariantsProps;
 export function useNavbarContent(props: UseNavbarContentProps = {}) {
   const {
     gap = "$10",
-    color = "inherit",
     variant = "default",
     activeColor = "default",
     underlineHeight = "normal",
@@ -177,7 +172,6 @@ export function useNavbarContent(props: UseNavbarContentProps = {}) {
   return {
     css,
     gap: contentGap,
-    color,
     variant,
     activeColor,
     activeItem,

From 16dc4a5b8bd1ddf6c18a400989d69fa760893bc9 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 21 Aug 2022 17:48:26 -0300
Subject: [PATCH 086/106] feat(react-common): breakpointMin added as a media
 breakpoints too

---
 apps/docs/content/components/navbar/common.ts | 2 +-
 apps/docs/content/docs/theme/media.mdx        | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/docs/content/components/navbar/common.ts b/apps/docs/content/components/navbar/common.ts
index a90c4edbed..8b0769a05a 100644
--- a/apps/docs/content/components/navbar/common.ts
+++ b/apps/docs/content/components/navbar/common.ts
@@ -120,7 +120,7 @@ export const Layout = ({ children }) => (
 );`;
 
 export const VariantsSelectorWrapper = `// used as a wrapper for the navbar variants radio buttons
-const VariantsSelectorWrapper = styled("div", {
+export const VariantsSelectorWrapper = styled("div", {
   dflex: "center",
   position: "fixed",
   width: "100%",
diff --git a/apps/docs/content/docs/theme/media.mdx b/apps/docs/content/docs/theme/media.mdx
index 071885fc5a..fb6a187194 100644
--- a/apps/docs/content/docs/theme/media.mdx
+++ b/apps/docs/content/docs/theme/media.mdx
@@ -23,6 +23,11 @@ export const media = {
   md: `(min-width: ${defaultTokens.breakpoints.md})`,
   lg: `(min-width: ${defaultTokens.breakpoints.lg})`,
   xl: `(min-width: ${defaultTokens.breakpoints.xl})`,
+  xsMin: `(min-width: ${defaultTokens.breakpoints.xs})`,
+  smMin: `(min-width: ${defaultTokens.breakpoints.sm})`,
+  mdMin: `(min-width: ${defaultTokens.breakpoints.md})`,
+  lgMin: `(min-width: ${defaultTokens.breakpoints.lg})`,
+  xlMin: `(min-width: ${defaultTokens.breakpoints.xl})`,
   xsMax: `(max-width: ${defaultTokens.breakpoints.xs})`,
   smMax: `(max-width: ${defaultTokens.breakpoints.sm})`,
   mdMax: `(max-width: ${defaultTokens.breakpoints.md})`,

From 529da0afa2ead6dd58248238bb5d5eef2db3d95c Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 21 Aug 2022 17:48:47 -0300
Subject: [PATCH 087/106] feat(navbar): docs improved, navbar with search input
 example added

---
 .../navbar/disable-collapse-animation.ts      | 138 ++++++++
 apps/docs/content/components/navbar/index.ts  |  10 +
 .../components/navbar/with-avatar-user.ts     | 138 ++++++++
 .../components/navbar/with-dropdown-menu.ts   | 305 ++++++++++++++++++
 .../components/navbar/with-search-input.ts    | 148 +++++++++
 .../components/navbar/with-toggle-button.ts   |  78 +++++
 apps/docs/content/docs/components/navbar.mdx  |  41 ++-
 apps/docs/src/components/icons/search.tsx     |  13 +-
 .../navbar/disable-collapse-animation.tsx     | 119 +++++++
 .../examples/navbar/with-avatar-user.tsx      |  61 ++--
 .../examples/navbar/with-search-input.tsx     | 103 ++++++
 packages/react/src/navbar/navbar.stories.tsx  |  88 ++++-
 .../react/src/navbar/use-navbar-collapse.ts   |   4 +-
 packages/react/src/theme/common.ts            |   5 +
 packages/react/src/utils/icons.tsx            |  14 +
 15 files changed, 1223 insertions(+), 42 deletions(-)
 create mode 100644 apps/docs/content/components/navbar/disable-collapse-animation.ts
 create mode 100644 apps/docs/content/components/navbar/with-avatar-user.ts
 create mode 100644 apps/docs/content/components/navbar/with-dropdown-menu.ts
 create mode 100644 apps/docs/content/components/navbar/with-search-input.ts
 create mode 100644 apps/docs/content/components/navbar/with-toggle-button.ts
 create mode 100644 apps/docs/src/pages/examples/navbar/disable-collapse-animation.tsx
 create mode 100644 apps/docs/src/pages/examples/navbar/with-search-input.tsx

diff --git a/apps/docs/content/components/navbar/disable-collapse-animation.ts b/apps/docs/content/components/navbar/disable-collapse-animation.ts
new file mode 100644
index 0000000000..73cc536ffd
--- /dev/null
+++ b/apps/docs/content/components/navbar/disable-collapse-animation.ts
@@ -0,0 +1,138 @@
+import {Layout, Box, AcmeLogo, Content} from "./common";
+
+const App = `import { Navbar, Link, Text, Avatar, Dropdown } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+
+export default function App() {
+  const collapseItems = [
+    "Profile",
+    "Dashboard",
+    "Activity",
+    "Analytics",
+    "System",
+    "Deployments",
+    "My Settings",
+    "Team Settings",
+    "Help & Feedback",
+    "Log Out",
+  ];
+
+  return (
+    <Layout>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Toggle showIn="xs" />
+        <Navbar.Brand
+          css={{
+            "@xs": {
+              w: "12%",
+            },
+          }}
+        >
+          <AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content
+          enableCursorHighlight
+          activeColor="warning"
+          hideIn="xs"
+          variant="highlight"
+        >
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content
+          css={{
+            "@xs": {
+              w: "12%",
+              jc: "flex-end",
+            },
+          }}
+        >
+          <Dropdown placement="bottom-right">
+            <Navbar.Item>
+              <Dropdown.Trigger>
+                <Avatar
+                  bordered
+                  as="button"
+                  color="warning"
+                  size="md"
+                  src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+                />
+              </Dropdown.Trigger>
+            </Navbar.Item>
+            <Dropdown.Menu
+              aria-label="User menu actions"
+              color="warning"
+              onAction={(actionKey) => console.log({ actionKey })}
+            >
+              <Dropdown.Item key="profile" css={{ height: "$18" }}>
+                <Text b color="inherit" css={{ d: "flex" }}>
+                  Signed in as
+                </Text>
+                <Text b color="inherit" css={{ d: "flex" }}>
+                  zoey@example.com
+                </Text>
+              </Dropdown.Item>
+              <Dropdown.Item key="settings" withDivider>
+                My Settings
+              </Dropdown.Item>
+              <Dropdown.Item key="team_settings">Team Settings</Dropdown.Item>
+              <Dropdown.Item key="analytics" withDivider>
+                Analytics
+              </Dropdown.Item>
+              <Dropdown.Item key="system">System</Dropdown.Item>
+              <Dropdown.Item key="configurations">Configurations</Dropdown.Item>
+              <Dropdown.Item key="help_and_feedback" withDivider>
+                Help & Feedback
+              </Dropdown.Item>
+              <Dropdown.Item key="logout" withDivider color="error">
+                Log Out
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </Navbar.Content>
+        <Navbar.Collapse disableAnimation>
+          {collapseItems.map((item, index) => (
+            <Navbar.CollapseItem
+              key={item}
+              activeColor="warning"
+              css={{
+                color: index === collapseItems.length - 1 ? "$error" : "",
+              }}
+              isActive={index === 2}
+            >
+              <Link
+                color="inherit"
+                css={{
+                  minWidth: "100%",
+                }}
+                href="#"
+              >
+                {item}
+              </Link>
+            </Navbar.CollapseItem>
+          ))}
+        </Navbar.Collapse>
+      </Navbar>
+    </Layout>
+  );
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Box.js": Box,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/navbar/index.ts b/apps/docs/content/components/navbar/index.ts
index 6a2e908ba0..8f707a8113 100644
--- a/apps/docs/content/components/navbar/index.ts
+++ b/apps/docs/content/components/navbar/index.ts
@@ -4,6 +4,11 @@ import bordered from "./bordered";
 import compact from "./compact";
 import hideOnScroll from "./hide-on-scroll";
 import cursorHighlight from "./cursor-highlight";
+import withToggleButton from "./with-toggle-button";
+import withDropdownMenu from "./with-dropdown-menu";
+import withAvatarUser from "./with-avatar-user";
+import withSearchInput from "./with-search-input";
+import disableCollapseAnimation from "./disable-collapse-animation";
 
 export default {
   variants,
@@ -12,4 +17,9 @@ export default {
   compact,
   hideOnScroll,
   cursorHighlight,
+  withToggleButton,
+  withDropdownMenu,
+  withAvatarUser,
+  withSearchInput,
+  disableCollapseAnimation,
 };
diff --git a/apps/docs/content/components/navbar/with-avatar-user.ts b/apps/docs/content/components/navbar/with-avatar-user.ts
new file mode 100644
index 0000000000..fc8a9b184d
--- /dev/null
+++ b/apps/docs/content/components/navbar/with-avatar-user.ts
@@ -0,0 +1,138 @@
+import {Layout, Box, AcmeLogo, Content} from "./common";
+
+const App = `import { Navbar, Link, Text, Avatar, Dropdown } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+
+export default function App() {
+  const collapseItems = [
+    "Profile",
+    "Dashboard",
+    "Activity",
+    "Analytics",
+    "System",
+    "Deployments",
+    "My Settings",
+    "Team Settings",
+    "Help & Feedback",
+    "Log Out",
+  ];
+
+  return (
+    <Layout>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Toggle showIn="xs" />
+        <Navbar.Brand
+          css={{
+            "@xs": {
+              w: "12%",
+            },
+          }}
+        >
+          <AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content
+          enableCursorHighlight
+          activeColor="secondary"
+          hideIn="xs"
+          variant="highlight-rounded"
+        >
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content
+          css={{
+            "@xs": {
+              w: "12%",
+              jc: "flex-end",
+            },
+          }}
+        >
+          <Dropdown placement="bottom-right">
+            <Navbar.Item>
+              <Dropdown.Trigger>
+                <Avatar
+                  bordered
+                  as="button"
+                  color="secondary"
+                  size="md"
+                  src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+                />
+              </Dropdown.Trigger>
+            </Navbar.Item>
+            <Dropdown.Menu
+              aria-label="User menu actions"
+              color="secondary"
+              onAction={(actionKey) => console.log({ actionKey })}
+            >
+              <Dropdown.Item key="profile" css={{ height: "$18" }}>
+                <Text b color="inherit" css={{ d: "flex" }}>
+                  Signed in as
+                </Text>
+                <Text b color="inherit" css={{ d: "flex" }}>
+                  zoey@example.com
+                </Text>
+              </Dropdown.Item>
+              <Dropdown.Item key="settings" withDivider>
+                My Settings
+              </Dropdown.Item>
+              <Dropdown.Item key="team_settings">Team Settings</Dropdown.Item>
+              <Dropdown.Item key="analytics" withDivider>
+                Analytics
+              </Dropdown.Item>
+              <Dropdown.Item key="system">System</Dropdown.Item>
+              <Dropdown.Item key="configurations">Configurations</Dropdown.Item>
+              <Dropdown.Item key="help_and_feedback" withDivider>
+                Help & Feedback
+              </Dropdown.Item>
+              <Dropdown.Item key="logout" withDivider color="error">
+                Log Out
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </Navbar.Content>
+        <Navbar.Collapse>
+          {collapseItems.map((item, index) => (
+            <Navbar.CollapseItem
+              key={item}
+              activeColor="secondary"
+              css={{
+                color: index === collapseItems.length - 1 ? "$error" : "",
+              }}
+              isActive={index === 2}
+            >
+              <Link
+                color="inherit"
+                css={{
+                  minWidth: "100%",
+                }}
+                href="#"
+              >
+                {item}
+              </Link>
+            </Navbar.CollapseItem>
+          ))}
+        </Navbar.Collapse>
+      </Navbar>
+    </Layout>
+  );
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Box.js": Box,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/navbar/with-dropdown-menu.ts b/apps/docs/content/components/navbar/with-dropdown-menu.ts
new file mode 100644
index 0000000000..a10e1e5880
--- /dev/null
+++ b/apps/docs/content/components/navbar/with-dropdown-menu.ts
@@ -0,0 +1,305 @@
+import {Layout, Box, AcmeLogo, Content} from "./common";
+
+const Icons = `import React from "react";
+
+const ChevronDownIcon = ({fill, size, width = 24, height = 24, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+const TagUserIcon = ({fill, size, width = 24, height = 24, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M18 18.86h-.76c-.8 0-1.56.31-2.12.87l-1.71 1.69c-.78.77-2.05.77-2.83 0l-1.71-1.69c-.56-.56-1.33-.87-2.12-.87H6c-1.66 0-3-1.33-3-2.97V4.98c0-1.64 1.34-2.97 3-2.97h12c1.66 0 3 1.33 3 2.97v10.91c0 1.63-1.34 2.97-3 2.97Z"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+      <path
+        d="M12 10a2.33 2.33 0 1 0 0-4.66A2.33 2.33 0 0 0 12 10ZM16 15.66c0-1.8-1.79-3.26-4-3.26s-4 1.46-4 3.26"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+const ServerIcon = ({fill, size, width = 24, height = 24, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M19.32 10H4.69c-1.48 0-2.68-1.21-2.68-2.68V4.69c0-1.48 1.21-2.68 2.68-2.68h14.63C20.8 2.01 22 3.22 22 4.69v2.63C22 8.79 20.79 10 19.32 10ZM19.32 22H4.69c-1.48 0-2.68-1.21-2.68-2.68v-2.63c0-1.48 1.21-2.68 2.68-2.68h14.63c1.48 0 2.68 1.21 2.68 2.68v2.63c0 1.47-1.21 2.68-2.68 2.68ZM6 5v2M10 5v2M6 17v2M10 17v2M14 6h4M14 18h4"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+const FlashIcon = ({fill, size, width = 24, height = 24, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.09 13.28h3.09v7.2c0 1.68.91 2.02 2.02.76l7.57-8.6c.93-1.05.54-1.92-.87-1.92h-3.09v-7.2c0-1.68-.91-2.02-2.02-.76l-7.57 8.6c-.92 1.06-.53 1.92.87 1.92Z"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+const ActivityIcon = ({fill, size, width = 24, height = 24, ...props}) => {
+  return (
+    <svg
+      data-name="Iconly/Curved/Activity"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      >
+        <path d="M6.918 14.854l2.993-3.889 3.414 2.68 2.929-3.78" />
+        <path d="M19.668 2.35a1.922 1.922 0 11-1.922 1.922 1.921 1.921 0 011.922-1.922z" />
+        <path d="M20.756 9.269a20.809 20.809 0 01.194 3.034c0 6.938-2.312 9.25-9.25 9.25s-9.25-2.312-9.25-9.25 2.313-9.25 9.25-9.25a20.931 20.931 0 012.983.187" />
+      </g>
+    </svg>
+  );
+};
+
+const ScaleIcon = ({fill, size, width = 24, height = 24, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7ZM18 6 6 18"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M18 10V6h-4M6 14v4h4"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+}
+
+export const icons = {
+  chevron: <ChevronDownIcon fill="currentColor" size={16} />,
+  scale: <ScaleIcon fill="var(--nextui-colors-warning)" size={30} />,
+  activity: <ActivityIcon fill="var(--nextui-colors-secondary)" size={30} />,
+  flash: <FlashIcon fill="var(--nextui-colors-primary)" size={30} />,
+  server: <ServerIcon fill="var(--nextui-colors-success)" size={30} />,
+  user: <TagUserIcon fill="var(--nextui-colors-error)" size={30} />,
+};`;
+
+const App = `import { Navbar, Button, Link, Text } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+import { icons } from "./Icons.js";
+
+export default function App() {
+  const collapseItems = [
+    "Features",
+    "Customers",
+    "Pricing",
+    "Company",
+    "Legal",
+    "Team",
+    "Help & Feedback",
+    "Login",
+    "Sign Up",
+  ];
+
+  return (
+    <Layout>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Brand>
+          <AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content
+          enableCursorHighlight
+          activeColor="secondary"
+          hideIn="xs"
+          variant="underline"
+        >
+          <Dropdown isBordered>
+            <Navbar.Item>
+              <Dropdown.Button
+                auto
+                light
+                css={{
+                  px: 0,
+                  dflex: "center",
+                  svg: { pe: "none" },
+                }}
+                iconRight={icons.chevron}
+                ripple={false}
+              >
+                Features
+              </Dropdown.Button>
+            </Navbar.Item>
+            <Dropdown.Menu
+              aria-label="ACME features"
+              css={{
+                $$dropdownMenuWidth: "340px",
+                $$dropdownItemHeight: "70px",
+                "& .nextui-dropdown-item": {
+                  py: "$4",
+                  // dropdown item left icon
+                  svg: {
+                    color: "$secondary",
+                    mr: "$4",
+                  },
+                  // dropdown item title
+                  "& .nextui-dropdown-item-content": {
+                    w: "100%",
+                    fontWeight: "$semibold",
+                  },
+                },
+              }}
+            >
+              <Dropdown.Item
+                key="autoscaling"
+                showFullDescription
+                description="ACME scales apps to meet user demand, automagically, based on load."
+                icon={icons.scale}
+              >
+                Autoscaling
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="usage_metrics"
+                showFullDescription
+                description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+                icon={icons.activity}
+              >
+                Usage Metrics
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="production_ready"
+                showFullDescription
+                description="ACME runs on ACME, join us and others serving requests at web scale."
+                icon={icons.flash}
+              >
+                Production Ready
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="99_uptime"
+                showFullDescription
+                description="Applications stay on the grid with high availability and high uptime guarantees."
+                icon={icons.server}
+              >
+                +99% Uptime
+              </Dropdown.Item>
+              <Dropdown.Item
+                key="supreme_support"
+                showFullDescription
+                description="Overcome any challenge with a supporting team ready to respond."
+                icon={icons.user}
+              >
+                +Supreme Support
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+      </Navbar>
+    </Layout>
+  );
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Icons.js": Icons,
+  "/Box.js": Box,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/navbar/with-search-input.ts b/apps/docs/content/components/navbar/with-search-input.ts
new file mode 100644
index 0000000000..4fd47c94ff
--- /dev/null
+++ b/apps/docs/content/components/navbar/with-search-input.ts
@@ -0,0 +1,148 @@
+import {Layout, Box, AcmeLogo, Content} from "./common";
+
+const SearchIcon = `export const SearchIcon = ({size, fill, width = 24, height = 24, ...props}) => {
+  return (
+    <svg fill="none" height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
+      <path
+        d="M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM22 22l-2-2"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+      />
+    </svg>
+  );
+};`;
+
+const App = `import { Navbar, Text, Avatar, Dropdown, Input } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+import { SearchIcon } from "./SearchIcon.js";
+
+export default function App() {
+  const collapseItems = [
+    "Profile",
+    "Dashboard",
+    "Activity",
+    "Analytics",
+    "System",
+    "Deployments",
+    "My Settings",
+    "Team Settings",
+    "Help & Feedback",
+    "Log Out",
+  ];
+
+  return (
+    <Layout>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Brand css={{ mr: "$4" }}>
+          <AcmeLogo />
+          <Text b color="inherit" css={{ mr: "$11" }} hideIn="xs">
+            ACME
+          </Text>
+          <Navbar.Content hideIn="xs" variant="highlight">
+            <Navbar.Link isActive href="#">
+              Dashboard
+            </Navbar.Link>
+            <Navbar.Link href="#">Team</Navbar.Link>
+            <Navbar.Link href="#">Activity</Navbar.Link>
+            <Navbar.Link href="#">Settings</Navbar.Link>
+          </Navbar.Content>
+        </Navbar.Brand>
+        <Navbar.Content
+          css={{
+            "@xsMax": {
+              w: "100%",
+              jc: "space-between",
+            },
+          }}
+        >
+          <Navbar.Item
+            css={{
+              "@xsMax": {
+                w: "100%",
+                jc: "center",
+              },
+            }}
+          >
+            <Input
+              clearable
+              contentLeft={
+                <SearchIcon fill="var(--nextui-colors-accents6)" size={16} />
+              }
+              contentLeftStyling={false}
+              css={{
+                w: "100%",
+                "@xsMax": {
+                  mw: "300px",
+                },
+                "& .nextui-input-content--left": {
+                  h: "100%",
+                  ml: "$4",
+                  dflex: "center",
+                },
+              }}
+              placeholder="Search..."
+            />
+          </Navbar.Item>
+          <Dropdown placement="bottom-right">
+            <Navbar.Item>
+              <Dropdown.Trigger>
+                <Avatar
+                  bordered
+                  as="button"
+                  color="primary"
+                  size="md"
+                  src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+                />
+              </Dropdown.Trigger>
+            </Navbar.Item>
+            <Dropdown.Menu
+              aria-label="User menu actions"
+              color="secondary"
+              onAction={(actionKey) => console.log({ actionKey })}
+            >
+              <Dropdown.Item key="profile" css={{ height: "$18" }}>
+                <Text b color="inherit" css={{ d: "flex" }}>
+                  Signed in as
+                </Text>
+                <Text b color="inherit" css={{ d: "flex" }}>
+                  zoey@example.com
+                </Text>
+              </Dropdown.Item>
+              <Dropdown.Item key="settings" withDivider>
+                My Settings
+              </Dropdown.Item>
+              <Dropdown.Item key="team_settings">Team Settings</Dropdown.Item>
+              <Dropdown.Item key="analytics" withDivider>
+                Analytics
+              </Dropdown.Item>
+              <Dropdown.Item key="system">System</Dropdown.Item>
+              <Dropdown.Item key="configurations">Configurations</Dropdown.Item>
+              <Dropdown.Item key="help_and_feedback" withDivider>
+                Help & Feedback
+              </Dropdown.Item>
+              <Dropdown.Item key="logout" withDivider color="error">
+                Log Out
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </Navbar.Content>
+      </Navbar>
+    </Layout>
+  );
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/SearchIcon.js": SearchIcon,
+  "/Box.js": Box,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/navbar/with-toggle-button.ts b/apps/docs/content/components/navbar/with-toggle-button.ts
new file mode 100644
index 0000000000..ff832c67f7
--- /dev/null
+++ b/apps/docs/content/components/navbar/with-toggle-button.ts
@@ -0,0 +1,78 @@
+import {Layout, Box, AcmeLogo, Content} from "./common";
+
+const App = `import { Navbar, Button, Link, Text } from "@nextui-org/react";
+import { Layout } from "./Layout.js";
+import { AcmeLogo } from "./AcmeLogo.js";
+
+export default function App() {
+  const collapseItems = [
+    "Features",
+    "Customers",
+    "Pricing",
+    "Company",
+    "Legal",
+    "Team",
+    "Help & Feedback",
+    "Login",
+    "Sign Up",
+  ];
+
+  return (
+    <Layout>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Brand>
+          <Navbar.Toggle aria-label="toggle navigation" />
+          <AcmeLogo />
+          <Text b color="inherit" hideIn="xs">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content enableCursorHighlight hideIn="xs" variant="underline">
+          <Navbar.Link href="#">Features</Navbar.Link>
+          <Navbar.Link isActive href="#">
+            Customers
+          </Navbar.Link>
+          <Navbar.Link href="#">Pricing</Navbar.Link>
+          <Navbar.Link href="#">Company</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content>
+          <Navbar.Link color="inherit" href="#">
+            Login
+          </Navbar.Link>
+          <Navbar.Item>
+            <Button auto flat as={Link} href="#">
+              Sign Up
+            </Button>
+          </Navbar.Item>
+        </Navbar.Content>
+        <Navbar.Collapse>
+        {collapseItems.map((item, index) => (
+          <Navbar.CollapseItem key={item}>
+            <Link
+              color="inherit"
+              css={{
+                minWidth: "100%",
+              }}
+              href="#"
+            >
+              {item}
+            </Link>
+          </Navbar.CollapseItem>
+        ))}
+      </Navbar.Collapse>
+      </Navbar>
+    </Layout>
+  )
+}`;
+
+const react = {
+  "/Content.js": Content,
+  "/Layout.js": Layout,
+  "/AcmeLogo.js": AcmeLogo,
+  "/Box.js": Box,
+  "/App.js": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index 38fdcaca8c..41c40d8deb 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -16,7 +16,6 @@ import { Navbar } from "@nextui-org/react";
 
 <Spacer y={2} />
 
-
 #### Anatomy
 
 - **Navbar**: The wrapper that provides state and general context management.
@@ -28,7 +27,6 @@ import { Navbar } from "@nextui-org/react";
 - **Navbar.Collapse**: The collapse wrapper that provides the state and menu for the navbar collapse items.
 - **Navbar.CollapseItem**: The individual items. Must be a direct child of `Navbar.Collapse`.
 
-
 <Spacer y={2} />
 
 <Playground
@@ -50,7 +48,6 @@ import { Navbar } from "@nextui-org/react";
   files={navbarContent.activeItemVariants}
 />
 
-
 <Playground
   asIframe
   title="Bordered"
@@ -93,8 +90,9 @@ import { Navbar } from "@nextui-org/react";
   previewHeight="600px"
   iframeInitialWidth={420}
   iframeSrc="/examples/navbar/with-toggle-button"
-  desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.variants}
+  desc="You can show a collapse menu by adding the `Navbar.Toggle` and `Navbar.Collapse` components to the navbar."
+  highlightedLines="22"
+  files={navbarContent.withToggleButton}
 />
 
 <Playground
@@ -102,8 +100,9 @@ import { Navbar } from "@nextui-org/react";
   title="With Dropdown Menu"
   previewHeight="600px"
   iframeSrc="/examples/navbar/with-dropdown-menu"
-  desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.variants}
+  desc="You can use the `Dropdown` component as navbar item to show a dropdown menu."
+  highlightedLines="34"
+  files={navbarContent.withDropdownMenu}
 />
 
 <Playground
@@ -111,6 +110,30 @@ import { Navbar } from "@nextui-org/react";
   title="With Avatar User"
   previewHeight="600px"
   iframeSrc="/examples/navbar/with-avatar-user"
-  desc="Badge with default styles, used in standalone when `content` prop is empty."
-  files={navbarContent.variants}
+  desc="A common use case is to display the user's avatar in the navbar. To achieve this, you can use the `Avatar` component as navbar item or combine it with the `Dropdown` to show a dropdown menu."
+  highlightedLines="46"
+  files={navbarContent.withAvatarUser}
+/>
+
+
+<Playground
+  asIframe
+  title="With Search Input"
+  previewHeight="600px"
+  iframeSrc="/examples/navbar/with-search-input"
+  desc="Another common use case is to display a search input in the navbar. You can do this by using the `Input` component as navbar item."
+  highlightedLines="53"
+  files={navbarContent.withSearchInput}
+/>
+
+
+<Playground
+  asIframe
+  title="Disable collapse animation"
+  previewHeight="600px"
+  iframeInitialWidth={420}
+  iframeSrc="/examples/navbar/disable-collapse-animation"
+  desc="By adding the `disableAnimation` prop to the `Navbar.Collapse` you can disable the animation of the collapse menu and its items when it is opened or closed."
+  highlightedLines="99"
+  files={navbarContent.disableCollapseAnimation}
 />
diff --git a/apps/docs/src/components/icons/search.tsx b/apps/docs/src/components/icons/search.tsx
index 1903a2025f..1660caa6c6 100644
--- a/apps/docs/src/components/icons/search.tsx
+++ b/apps/docs/src/components/icons/search.tsx
@@ -16,11 +16,14 @@ const defaultProps = {
 
 const Search: React.FC<Props> = ({size, fill, width, height, ...props}) => {
   return (
-    <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
-      <g fill={fill}>
-        <path d="M21 11.5A9.5 9.5 0 1111.5 2a9.5 9.5 0 019.5 9.5z" />
-        <path d="M21.299 21.999a.7.7 0 01-.49-.2l-1.862-1.86a.706.706 0 010-.992.706.706 0 01.99 0l1.86 1.86a.706.706 0 010 .99.738.738 0 01-.498.202z" />
-      </g>
+    <svg fill="none" height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
+      <path
+        d="M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM22 22l-2-2"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+      />
     </svg>
   );
 };
diff --git a/apps/docs/src/pages/examples/navbar/disable-collapse-animation.tsx b/apps/docs/src/pages/examples/navbar/disable-collapse-animation.tsx
new file mode 100644
index 0000000000..03c91b8019
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/disable-collapse-animation.tsx
@@ -0,0 +1,119 @@
+import {Examples} from "@components";
+import {Navbar, Text, Dropdown, Avatar, Link} from "@nextui-org/react";
+
+export default function NavbarDisableCollapseAnimationExample() {
+  const collapseItems = [
+    "Profile",
+    "Dashboard",
+    "Activity",
+    "Analytics",
+    "System",
+    "Deployments",
+    "My Settings",
+    "Team Settings",
+    "Help & Feedback",
+    "Log Out",
+  ];
+
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Toggle showIn="xs" />
+        <Navbar.Brand
+          css={{
+            "@xs": {
+              w: "12%",
+            },
+          }}
+        >
+          <Examples.AcmeLogo />
+          <Text b color="inherit">
+            ACME
+          </Text>
+        </Navbar.Brand>
+        <Navbar.Content enableCursorHighlight activeColor="warning" hideIn="xs" variant="highlight">
+          <Navbar.Link isActive href="#">
+            Dashboard
+          </Navbar.Link>
+          <Navbar.Link href="#">Team</Navbar.Link>
+          <Navbar.Link href="#">Deployments</Navbar.Link>
+          <Navbar.Link href="#">Activity</Navbar.Link>
+          <Navbar.Link href="#">Settings</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content
+          css={{
+            "@xs": {
+              w: "12%",
+              jc: "flex-end",
+            },
+          }}
+        >
+          <Dropdown placement="bottom-right">
+            <Navbar.Item>
+              <Dropdown.Trigger>
+                <Avatar
+                  bordered
+                  as="button"
+                  color="warning"
+                  size="md"
+                  src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+                />
+              </Dropdown.Trigger>
+            </Navbar.Item>
+            <Dropdown.Menu
+              aria-label="User menu actions"
+              color="warning"
+              onAction={(actionKey) => console.log({actionKey})}
+            >
+              <Dropdown.Item key="profile" css={{height: "$18"}}>
+                <Text b color="inherit" css={{d: "flex"}}>
+                  Signed in as
+                </Text>
+                <Text b color="inherit" css={{d: "flex"}}>
+                  zoey@example.com
+                </Text>
+              </Dropdown.Item>
+              <Dropdown.Item key="settings" withDivider>
+                My Settings
+              </Dropdown.Item>
+              <Dropdown.Item key="team_settings">Team Settings</Dropdown.Item>
+              <Dropdown.Item key="analytics" withDivider>
+                Analytics
+              </Dropdown.Item>
+              <Dropdown.Item key="system">System</Dropdown.Item>
+              <Dropdown.Item key="configurations">Configurations</Dropdown.Item>
+              <Dropdown.Item key="help_and_feedback" withDivider>
+                Help & Feedback
+              </Dropdown.Item>
+              <Dropdown.Item key="logout" withDivider color="error">
+                Log Out
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </Navbar.Content>
+        <Navbar.Collapse disableAnimation>
+          {collapseItems.map((item, index) => (
+            <Navbar.CollapseItem
+              key={`${item}-${index}`}
+              activeColor="warning"
+              css={{
+                color: index === collapseItems.length - 1 ? "$error" : "",
+              }}
+              isActive={index === 2}
+            >
+              <Link
+                color="inherit"
+                css={{
+                  minWidth: "100%",
+                }}
+                href="#"
+              >
+                {item}
+              </Link>
+            </Navbar.CollapseItem>
+          ))}
+        </Navbar.Collapse>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/apps/docs/src/pages/examples/navbar/with-avatar-user.tsx b/apps/docs/src/pages/examples/navbar/with-avatar-user.tsx
index 2b2118c667..6c6c3026ed 100644
--- a/apps/docs/src/pages/examples/navbar/with-avatar-user.tsx
+++ b/apps/docs/src/pages/examples/navbar/with-avatar-user.tsx
@@ -19,29 +19,13 @@ export default function NavbarWithAvatarUserExample() {
     <Examples.NavbarLayout>
       <Navbar isBordered variant="sticky">
         <Navbar.Toggle showIn="xs" />
-        <Navbar.Collapse>
-          {collapseItems.map((item, index) => (
-            <Navbar.CollapseItem
-              key={`${item}-${index}`}
-              activeColor="secondary"
-              css={{
-                color: index === collapseItems.length - 1 ? "$error" : "",
-              }}
-              isActive={index === 2}
-            >
-              <Link
-                color="inherit"
-                css={{
-                  minWidth: "100%",
-                }}
-                href="#"
-              >
-                {item}
-              </Link>
-            </Navbar.CollapseItem>
-          ))}
-        </Navbar.Collapse>
-        <Navbar.Brand>
+        <Navbar.Brand
+          css={{
+            "@xs": {
+              w: "12%",
+            },
+          }}
+        >
           <Examples.AcmeLogo />
           <Text b color="inherit">
             ACME
@@ -61,7 +45,14 @@ export default function NavbarWithAvatarUserExample() {
           <Navbar.Link href="#">Activity</Navbar.Link>
           <Navbar.Link href="#">Settings</Navbar.Link>
         </Navbar.Content>
-        <Navbar.Content>
+        <Navbar.Content
+          css={{
+            "@xs": {
+              w: "12%",
+              jc: "flex-end",
+            },
+          }}
+        >
           <Dropdown placement="bottom-right">
             <Navbar.Item>
               <Dropdown.Trigger>
@@ -105,6 +96,28 @@ export default function NavbarWithAvatarUserExample() {
             </Dropdown.Menu>
           </Dropdown>
         </Navbar.Content>
+        <Navbar.Collapse>
+          {collapseItems.map((item, index) => (
+            <Navbar.CollapseItem
+              key={`${item}-${index}`}
+              activeColor="secondary"
+              css={{
+                color: index === collapseItems.length - 1 ? "$error" : "",
+              }}
+              isActive={index === 2}
+            >
+              <Link
+                color="inherit"
+                css={{
+                  minWidth: "100%",
+                }}
+                href="#"
+              >
+                {item}
+              </Link>
+            </Navbar.CollapseItem>
+          ))}
+        </Navbar.Collapse>
       </Navbar>
     </Examples.NavbarLayout>
   );
diff --git a/apps/docs/src/pages/examples/navbar/with-search-input.tsx b/apps/docs/src/pages/examples/navbar/with-search-input.tsx
new file mode 100644
index 0000000000..9fa9d8a9c8
--- /dev/null
+++ b/apps/docs/src/pages/examples/navbar/with-search-input.tsx
@@ -0,0 +1,103 @@
+import {Examples, Search} from "@components";
+import {Navbar, Text, Dropdown, Avatar, Input} from "@nextui-org/react";
+
+export default function NavbarWithSearchInputExample() {
+  return (
+    <Examples.NavbarLayout>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Brand css={{mr: "$4"}}>
+          <Examples.AcmeLogo />
+          <Text b color="inherit" css={{mr: "$11"}} hideIn="xs">
+            ACME
+          </Text>
+          <Navbar.Content enableCursorHighlight hideIn="xs" variant="highlight">
+            <Navbar.Link isActive href="#">
+              Dashboard
+            </Navbar.Link>
+            <Navbar.Link href="#">Team</Navbar.Link>
+            <Navbar.Link href="#">Activity</Navbar.Link>
+            <Navbar.Link href="#">Settings</Navbar.Link>
+          </Navbar.Content>
+        </Navbar.Brand>
+        <Navbar.Content
+          css={{
+            "@xsMax": {
+              w: "100%",
+              jc: "space-between",
+            },
+          }}
+        >
+          <Navbar.Item
+            css={{
+              "@xsMax": {
+                w: "100%",
+                jc: "center",
+              },
+            }}
+          >
+            <Input
+              clearable
+              contentClickable={false}
+              contentLeft={<Search fill="var(--nextui-colors-accents6)" size={16} />}
+              contentLeftStyling={false}
+              css={{
+                w: "100%",
+                "@xsMax": {
+                  mw: "300px",
+                },
+                "& .nextui-input-content--left": {
+                  h: "100%",
+                  ml: "$4",
+                  dflex: "center",
+                },
+              }}
+              placeholder="Search..."
+            />
+          </Navbar.Item>
+          <Dropdown placement="bottom-right">
+            <Navbar.Item>
+              <Dropdown.Trigger>
+                <Avatar
+                  bordered
+                  as="button"
+                  color="primary"
+                  size="md"
+                  src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+                />
+              </Dropdown.Trigger>
+            </Navbar.Item>
+            <Dropdown.Menu
+              aria-label="User menu actions"
+              color="secondary"
+              onAction={(actionKey) => console.log({actionKey})}
+            >
+              <Dropdown.Item key="profile" css={{height: "$18"}}>
+                <Text b color="inherit" css={{d: "flex"}}>
+                  Signed in as
+                </Text>
+                <Text b color="inherit" css={{d: "flex"}}>
+                  zoey@example.com
+                </Text>
+              </Dropdown.Item>
+              <Dropdown.Item key="settings" withDivider>
+                My Settings
+              </Dropdown.Item>
+              <Dropdown.Item key="team_settings">Team Settings</Dropdown.Item>
+              <Dropdown.Item key="analytics" withDivider>
+                Analytics
+              </Dropdown.Item>
+              <Dropdown.Item key="system">System</Dropdown.Item>
+              <Dropdown.Item key="configurations">Configurations</Dropdown.Item>
+              <Dropdown.Item key="help_and_feedback" withDivider>
+                Help & Feedback
+              </Dropdown.Item>
+              <Dropdown.Item key="logout" withDivider color="error">
+                Log Out
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </Navbar.Content>
+      </Navbar>
+    </Examples.NavbarLayout>
+  );
+}
diff --git a/packages/react/src/navbar/navbar.stories.tsx b/packages/react/src/navbar/navbar.stories.tsx
index cbde316b5f..0e7c71b155 100644
--- a/packages/react/src/navbar/navbar.stories.tsx
+++ b/packages/react/src/navbar/navbar.stories.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import {Meta} from "@storybook/react";
 
-import {Link, Text, Button, Spacer, Dropdown, Avatar} from "../index";
-import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "../utils/icons";
+import {Link, Text, Button, Spacer, Dropdown, Avatar, Input} from "../index";
+import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale, Search} from "../utils/icons";
 import {styled} from "../theme/stitches.config";
 
 import Navbar from "./index";
@@ -510,3 +510,87 @@ export const WithAvatarUser = () => {
     </App>
   );
 };
+
+export const WithSearchInput = () => {
+  return (
+    <App>
+      <Navbar isBordered variant="sticky">
+        <Navbar.Content hideIn="xs" variant="highlight">
+          <Navbar.Brand css={{mr: "$11"}}>
+            <AcmeLogo />
+            <Text b color="inherit">
+              ACME
+            </Text>
+          </Navbar.Brand>
+          <Navbar.Link isActive href="#">
+            Dashboard
+          </Navbar.Link>
+          <Navbar.Link href="#">Team</Navbar.Link>
+          <Navbar.Link href="#">Deployments</Navbar.Link>
+          <Navbar.Link href="#">Activity</Navbar.Link>
+          <Navbar.Link href="#">Settings</Navbar.Link>
+        </Navbar.Content>
+        <Navbar.Content gap="$6">
+          <Navbar.Item>
+            <Input
+              clearable
+              contentLeft={<Search fill="var(--nextui-colors-accents6)" size={16} />}
+              contentLeftStyling={false}
+              css={{
+                w: "210px",
+                "& .nextui-input-content--left": {
+                  h: "100%",
+                  ml: "$4",
+                  dflex: "center",
+                },
+              }}
+              placeholder="Search..."
+            />
+          </Navbar.Item>
+          <Dropdown placement="bottom-right">
+            <Navbar.Item>
+              <Dropdown.Trigger>
+                <Avatar
+                  bordered
+                  as="button"
+                  color="primary"
+                  size="md"
+                  src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+                />
+              </Dropdown.Trigger>
+            </Navbar.Item>
+            <Dropdown.Menu
+              aria-label="User menu actions"
+              color="secondary"
+              onAction={(actionKey) => console.log({actionKey})}
+            >
+              <Dropdown.Item key="profile" css={{height: "$18"}}>
+                <Text b color="inherit" css={{d: "flex"}}>
+                  Signed in as
+                </Text>
+                <Text b color="inherit" css={{d: "flex"}}>
+                  zoey@example.com
+                </Text>
+              </Dropdown.Item>
+              <Dropdown.Item key="settings" withDivider>
+                My Settings
+              </Dropdown.Item>
+              <Dropdown.Item key="team_settings">Team Settings</Dropdown.Item>
+              <Dropdown.Item key="analytics" withDivider>
+                Analytics
+              </Dropdown.Item>
+              <Dropdown.Item key="system">System</Dropdown.Item>
+              <Dropdown.Item key="configurations">Configurations</Dropdown.Item>
+              <Dropdown.Item key="help_and_feedback" withDivider>
+                Help & Feedback
+              </Dropdown.Item>
+              <Dropdown.Item key="logout" withDivider color="error">
+                Log Out
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        </Navbar.Content>
+      </Navbar>
+    </App>
+  );
+};
diff --git a/packages/react/src/navbar/use-navbar-collapse.ts b/packages/react/src/navbar/use-navbar-collapse.ts
index 8a34d5e696..00c41369c5 100644
--- a/packages/react/src/navbar/use-navbar-collapse.ts
+++ b/packages/react/src/navbar/use-navbar-collapse.ts
@@ -34,8 +34,8 @@ export function useNavbarCollapse(props: UseNavbarCollapseProps = {}) {
     children,
     ref,
     transitionDelay = 0,
-    transitionTime = 0.5,
-    transitionMatrix = {in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.95, 0, 0, 0.95, 10, 20)"},
+    transitionTime = 0.45,
+    transitionMatrix = {in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.95, 0, 0, 0.95, 5, 20)"},
     className,
     ...otherProps
   } = props;
diff --git a/packages/react/src/theme/common.ts b/packages/react/src/theme/common.ts
index c6cf4fb139..d0fb9ef8cc 100644
--- a/packages/react/src/theme/common.ts
+++ b/packages/react/src/theme/common.ts
@@ -253,6 +253,11 @@ export const defaultMedia = {
   md: `(min-width: ${defaultTokens.breakpoints.md})`,
   lg: `(min-width: ${defaultTokens.breakpoints.lg})`,
   xl: `(min-width: ${defaultTokens.breakpoints.xl})`,
+  xsMin: `(min-width: ${defaultTokens.breakpoints.xs})`,
+  smMin: `(min-width: ${defaultTokens.breakpoints.sm})`,
+  mdMin: `(min-width: ${defaultTokens.breakpoints.md})`,
+  lgMin: `(min-width: ${defaultTokens.breakpoints.lg})`,
+  xlMin: `(min-width: ${defaultTokens.breakpoints.xl})`,
   xsMax: `(max-width: ${defaultTokens.breakpoints.xs})`,
   smMax: `(max-width: ${defaultTokens.breakpoints.sm})`,
   mdMax: `(max-width: ${defaultTokens.breakpoints.md})`,
diff --git a/packages/react/src/utils/icons.tsx b/packages/react/src/utils/icons.tsx
index 0ff22336e7..1175dc621a 100644
--- a/packages/react/src/utils/icons.tsx
+++ b/packages/react/src/utils/icons.tsx
@@ -839,3 +839,17 @@ export const Scale: React.FC<IconProps> = ({
     </svg>
   );
 };
+
+export const Search: React.FC<IconProps> = ({size, fill, width = 24, height = 24, ...props}) => {
+  return (
+    <svg fill="none" height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
+      <path
+        d="M11.5 21a9.5 9.5 0 1 0 0-19 9.5 9.5 0 0 0 0 19ZM22 22l-2-2"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+      />
+    </svg>
+  );
+};

From b9e814e2bb90d315f05462b64f50eac6cbcef77d Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Mon, 22 Aug 2022 00:12:35 -0300
Subject: [PATCH 088/106] feat(navbar): dynamic live draggable with inital
 width improved, navbar APIs improved

---
 apps/docs/content/docs/components/navbar.mdx  | 180 +++++++++++++++++-
 .../components/playground/dynamic-live.tsx    |  47 ++++-
 2 files changed, 220 insertions(+), 7 deletions(-)

diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index 41c40d8deb..adf83ecaef 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -115,7 +115,6 @@ import { Navbar } from "@nextui-org/react";
   files={navbarContent.withAvatarUser}
 />
 
-
 <Playground
   asIframe
   title="With Search Input"
@@ -126,7 +125,6 @@ import { Navbar } from "@nextui-org/react";
   files={navbarContent.withSearchInput}
 />
 
-
 <Playground
   asIframe
   title="Disable collapse animation"
@@ -137,3 +135,181 @@ import { Navbar } from "@nextui-org/react";
   highlightedLines="99"
   files={navbarContent.disableCollapseAnimation}
 />
+
+<Spacer y={3} />
+
+### APIs
+
+<Spacer y={2} />
+
+#### Navbar Props
+
+| Attribute                | Type                                | Description                                                                                                                                         | Default  |
+| ------------------------ | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| **children\***           | `ReactNode[]`                       | The content of the navbar. It's usually the brand, content, toggle and collapse.                                                                    | -        |
+| **parentRef**            | `RefObject<HTMLElement>`            | The parent element where the navbar is placed within. This is used to determine the scroll position and whether the navbar should be hidden or not. | `window` |
+| **variant**              | [NavbarVariant](#navbar-variants)   | The navbar positions variantions                                                                                                                    | `static` |
+| **height**               | `number` `string`                   | The height of the navbar. When the navbar is compacted (isCompact=`true`) the height is reduced to `54px`                                           | `76px`   |
+| **maxWidth**             | [NavbarMaxWidth](#navbar-max-width) | The navbar maximum width.                                                                                                                           | `lg`     |
+| **isBordered**           | `boolean`                           | Whether the navbar should be bordered.                                                                                                              | `false`  |
+| **isCompact**            | `boolean`                           | Whether the navbar should be compact. It reduces the height to `54px`.                                                                              | `false`  |
+| **borderWeight**         | [NormalWeights](#normal-weights)    | The border weight of the bordered navbar.                                                                                                           | `light`  |
+| **shouldHideOnScroll**   | `boolean`                           | Whether the navbar should hide on scroll or not.                                                                                                    | `false`  |
+| **disableShadow**        | `boolean`                           | Whether the navbar should have a shadow or not.                                                                                                     | `false`  |
+| **disableBlur**          | `boolean`                           | Whether the navbar should be blurred or not. (only supported by this browser [list](https://caniuse.com/?search=backdrop-filter%3A%20blur)          | `false`  |
+| **disableScrollHandler** | `boolean`                           | Whether the navbar parent scroll event should be listened to or not.                                                                                | `false`  |
+| **containerCss**         | `Stitches.CSS`                      | The css object of the navbar container.                                                                                                             | -        |
+| **css**                  | `Stitches.CSS`                      | Override Default CSS style.                                                                                                                         | -        |
+| **as**                   | `keyof JSX.IntrinsicElements`       | Changes which tag component outputs.                                                                                                                | `nav`    |
+
+<Spacer y={1} />
+
+#### Navbar Events
+
+| Attribute                  | Type                               | Description                                                                                                                                                                                              | Default |
+| -------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| **onScrollPositionChange** | `(scrollPosition: number) => void` | The scroll event handler for the navbar. The event fires when the navbar parent element is scrolled. it only works if `disableScrollHandler` is set to `false` or `shouldHideOnScroll` is set to `true`. | -       |
+
+<Spacer y={2} />
+
+---
+
+<Spacer y={2} />
+
+#### Navbar.Brand Props
+
+| Attribute      | Type        | Description                                                                                                                                                                | Default |
+| -------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| **children\*** | `ReactNode` | The dropdown trigger component, ensure the children passed is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessiblity. | -       |
+
+<Spacer y={2} />
+
+---
+
+<Spacer y={2} />
+
+#### Navbar.Content Props
+
+| Attribute       | Type                                                | Description                                                                           | Default |
+| --------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------- | ------- |
+| **ButtonProps** | [ButtonProps](/docs/components/button#button-props) | Since dropdown button is based on the `Button` you can use any of the `Button` props. | -       |
+
+<Spacer y={2} />
+
+---
+
+<Spacer y={2} />
+
+#### Navbar.Item Props
+
+| Attribute                  | Type                                                                                                         | Description                                                                                             | Default   |
+| -------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | --------- |
+| **children\***             | [CollectionChildrentype](#collection-children-type)                                                          | The contents of the collection. It's usually the `Dropdown.Item` or `Dropdown.Section`.                 | -         |
+| **items**                  | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)       | Item objects in the collection.                                                                         | -         |
+| **selectedKeys**           | `all` [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | The currently selected keys in the collection (controlled).                                             | -         |
+| **defaultSelectedKeys**    | `all` [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | The initial selected keys in the collection (uncontrolled).                                             | -         |
+| **disabledKeys**           | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)       | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | -         |
+| **selectionMode**          | [SelectionModeType](#selection-mode-type)                                                                    | The type of selection that is allowed in the collection.                                                | -         |
+| **keyboardDelegate**       | [KeyboardDelegateType](#keyboard-delegate-type)                                                              | An optional keyboard delegate implementation for type to select, to override the default.               | -         |
+| **color**                  | [SimpleColors](#simple-colors)                                                                               | The dropdown menu items color                                                                           | `default` |
+| **textColor**              | [SimpleColors](#simple-colors)                                                                               | The dropdown menu items text color                                                                      | `default` |
+| **variant**                | [DropdownVariant](#dropdown-variants)                                                                        | The dropdown menu items variantion                                                                      | `flat`    |
+| **isVirtualized**          | `boolean`                                                                                                    | Whether the dropdown menu uses virtual scrolling.                                                       | `false`   |
+| **disallowEmptySelection** | `boolean`                                                                                                    | Whether the collection allows empty selection.                                                          | `false`   |
+| **autoFocus**              | `boolean` [FocusStrategyType](#focus-strategy-type)                                                          | Where the focus should be set.                                                                          | `false`   |
+| **shouldFocusWrap**        | `boolean`                                                                                                    | Whether keyboard navigation is circular.                                                                | `false`   |
+| **css**                    | `Stitches.CSS`                                                                                               | Override Default CSS style.                                                                             | -         |
+| **as**                     | `keyof JSX.IntrinsicElements`                                                                                | Changes which tag component outputs.                                                                    | `ul`      |
+
+<Spacer y={2} />
+
+---
+
+<Spacer y={2} />
+
+#### Navbar.Link Props
+
+| Attribute       | Type                                                | Description                                                                           | Default |
+| --------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------- | ------- |
+| **ButtonProps** | [ButtonProps](/docs/components/button#button-props) | Since dropdown button is based on the `Button` you can use any of the `Button` props. | -       |
+
+<Spacer y={2} />
+
+---
+
+<Spacer y={2} />
+
+#### Navbar.Toggle Props
+
+| Attribute            | Type     | Description                                                                                                        | Default |
+| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------ | ------- |
+| **id**               | `string` | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) | -       |
+| **aria-label**       | `string` | Defines a string value that labels the current element                                                             | -       |
+| **aria-labelledby**  | `string` | Identifies the element (or elements) that labels the current element                                               | -       |
+| **aria-describedby** | `string` | Identifies the element (or elements) that describes the object.                                                    | -       |
+| **aria-details**     | `string` | Identifies the element (or elements) that provide a detailed, extended description for the object.                 | -       |
+
+<Spacer y={2} />
+
+---
+
+<Spacer y={2} />
+
+#### Navbar.Collapse Props
+
+| Attribute                     | Type                                                | Description                                                      | Default   |
+| ----------------------------- | --------------------------------------------------- | ---------------------------------------------------------------- | --------- |
+| **key**                       | [Key](https://reactjs.org/docs/lists-and-keys.html) | The unique key for the menu item.                                | `false`   |
+| **description**               | `string`                                            | Description text element inside the dropdown menu item.          | -         |
+| **command**                   | `string`                                            | Right-aligned label text content, useful for displaying hotkeys. | -         |
+| **icon**                      | `ReactNode`                                         | The icon to render before the dropdown menu item's label.        | -         |
+| **dividerWeight**             | [NormalWeights](#normal-weights)                    | The dropdown item divider height                                 | `light`   |
+| **color**                     | [SimpleColors](#simple-colors)                      | The dropdown item color                                          | `default` |
+| **textColor**                 | [SimpleColors](#simple-colors)                      | The dropdown item text color                                     | `default` |
+| **variant**                   | [DropdownVariant](#dropdown-variants)               | The dropdown item variation                                      | `flat`    |
+| **withDivider**               | `boolean`                                           | Whether the dropdown item should have a border on top            | `false`   |
+| **showFullDescription** `new` | `boolean`                                           | Whether the item description should be truncated or not.         | `false`   |
+| **css**                       | `Stitches.CSS`                                      | Override Default CSS style.                                      | -         |
+| **as**                        | `keyof JSX.IntrinsicElements`                       | Changes which tag component outputs.                             | `li`      |
+
+<Spacer y={2} />
+
+---
+
+<Spacer y={2} />
+
+#### Navbar.CollapseItem
+
+| Attribute      | Type     | Description                                            | Default |
+| -------------- | -------- | ------------------------------------------------------ | ------- |
+| **aria-label** | `string` | A screen reader only label for the dropdown menu item. | -       |
+
+<Spacer y={2} />
+
+---
+
+<Spacer y={2} />
+
+### Navbar types
+
+<Spacer y={1} />
+
+#### Navbar Variants
+
+```ts
+type NavbarVariants = "static" | "sticky" | "floating";
+```
+
+#### Navbar Max Width
+
+```ts
+type NavbarMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | "fluid";
+```
+
+> **Note**: `fluid` means the navbar will fill the entire width of the screen. You can see the complete breakpoint list [here](https://nextui.org/docs/theme/default-theme#breakpoints).
+
+#### Normal Weights
+
+```ts
+type NormalWeights = "light" | "normal" | "bold" | "extrabold" | "black";
+```
diff --git a/apps/docs/src/components/playground/dynamic-live.tsx b/apps/docs/src/components/playground/dynamic-live.tsx
index ca207d0698..5761a333a1 100644
--- a/apps/docs/src/components/playground/dynamic-live.tsx
+++ b/apps/docs/src/components/playground/dynamic-live.tsx
@@ -80,6 +80,16 @@ const Resizer = Components.styled(Box, {
   "@xsMax": {
     display: "none",
   },
+  variants: {
+    hasInitalWidth: {
+      true: {
+        justifyContent: "flex-start",
+        "& .resizer-bar": {
+          ml: "$2",
+        },
+      },
+    },
+  },
 });
 
 const StyledWrapper = Components.styled(Box, {
@@ -130,7 +140,28 @@ const StyledWrapper = Components.styled(Box, {
       },
     },
     enableResize: {
-      true: {
+      true: {},
+    },
+    hasInitialWidth: {
+      true: {},
+    },
+  },
+  compoundVariants: [
+    {
+      enableResize: true,
+      hasInitialWidth: true,
+      css: {
+        width: "var(--iframe-resizer-x)",
+        "@xsMax": {
+          ml: "0px",
+          width: "100%",
+        },
+      },
+    },
+    {
+      enableResize: true,
+      hasInitialWidth: false,
+      css: {
         width: "calc(100% - 34px + var(--iframe-resizer-x))",
         "@xsMax": {
           ml: "0px",
@@ -138,7 +169,7 @@ const StyledWrapper = Components.styled(Box, {
         },
       },
     },
-  },
+  ],
   defaultVariants: {
     overflow: "hidden",
   },
@@ -188,11 +219,13 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
 
   const codeTheme = makeCodeTheme();
 
-  const resizerX = useMotionValue(-(iframeInitialWidth || 0));
+  const resizerX = useMotionValue(0);
   let constraintsResizerRef = useRef<HTMLDivElement>(null);
   let resizerRef = useRef<HTMLDivElement>(null);
   let iframeRef = useRef<HTMLIFrameElement>(null);
 
+  const hasInitialWidth = iframeInitialWidth !== undefined;
+
   useEffect(() => {
     if (!resizerRef.current) {
       return;
@@ -200,7 +233,9 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
     resizerRef.current.onselectstart = () => false;
   }, []);
 
-  let browserWidth = useTransform(resizerX, (x) => `${x}px`);
+  let browserWidth = useTransform(resizerX, (x) =>
+    hasInitialWidth ? `${x + iframeInitialWidth}px` : `${x}px`,
+  );
 
   return (
     <LiveProvider code={code} noInline={noInline} scope={scope} theme={codeTheme}>
@@ -217,6 +252,7 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
             className="dynamic-live-wrapper"
             css={css}
             enableResize={enableResize}
+            hasInitialWidth={hasInitialWidth}
             isBrowser={showWindowActions}
             noInline={noInline}
             overflow={overflow}
@@ -259,8 +295,9 @@ const DynamicLive: React.FC<Props & {css?: Components.CSS}> = ({
                 top: 0,
                 bottom: 0,
                 right: 0,
-                width: `calc(100% - ${MIN_WIDTH}px - 20px)`,
+                width: `calc(100% - ${hasInitialWidth ? iframeInitialWidth : MIN_WIDTH}px - 20px)`,
               }}
+              hasInitalWidth={hasInitialWidth}
             >
               <Box
                 ref={resizerRef}

From d2ac54440fe959549cb805bb215ba9f1d0ef6801 Mon Sep 17 00:00:00 2001
From: wangly19 <1418202350@qq.com>
Date: Tue, 23 Aug 2022 01:18:59 +0800
Subject: [PATCH 089/106] fix(table): Table.Header column border size

---
 packages/react/src/table/table.styles.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/table/table.styles.ts b/packages/react/src/table/table.styles.ts
index 4ca378602f..bbfce0fd0c 100644
--- a/packages/react/src/table/table.styles.ts
+++ b/packages/react/src/table/table.styles.ts
@@ -20,11 +20,13 @@ export const StyledTableColumnHeader = styled(
     },
     '&:first-child': {
       pl: '$8',
-      br: '$md 0 0 $md'
+      btlr: '$md',
+      bblr: '$md',
     },
     '&:last-child': {
       pr: '$8',
-      br: '0 $md $md 0'
+      btrr: '$md',
+      bbrr: '$md'
     },
     variants: {
       align: {

From 68912030ae5b146507ce4c41d603552c896ea63d Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Mon, 22 Aug 2022 22:52:43 -0300
Subject: [PATCH 090/106] feat(docs-navbar): docs improved

---
 apps/docs/content/docs/components/navbar.mdx  | 93 +++++++++++++------
 .../react/src/navbar/use-navbar-content.ts    |  2 +-
 2 files changed, 67 insertions(+), 28 deletions(-)

diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index adf83ecaef..4a892a2025 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -146,10 +146,10 @@ import { Navbar } from "@nextui-org/react";
 
 | Attribute                | Type                                | Description                                                                                                                                         | Default  |
 | ------------------------ | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
-| **children\***           | `ReactNode[]`                       | The content of the navbar. It's usually the brand, content, toggle and collapse.                                                                    | -        |
+| **children\***           | `ReactNode` `ReactNode[]`           | The content of the navbar. It's usually the brand, content, toggle and collapse.                                                                    | -        |
 | **parentRef**            | `RefObject<HTMLElement>`            | The parent element where the navbar is placed within. This is used to determine the scroll position and whether the navbar should be hidden or not. | `window` |
-| **variant**              | [NavbarVariant](#navbar-variants)   | The navbar positions variantions                                                                                                                    | `static` |
-| **height**               | `number` `string`                   | The height of the navbar. When the navbar is compacted (isCompact=`true`) the height is reduced to `54px`                                           | `76px`   |
+| **variant**              | [NavbarVariants](#navbar-variants)  | The navbar positions variantions.                                                                                                                   | `static` |
+| **height**               | `number` `string`                   | The height of the navbar. When the navbar is compacted (isCompact=`true`) the height is reduced to `54px`.                                          | `76px`   |
 | **maxWidth**             | [NavbarMaxWidth](#navbar-max-width) | The navbar maximum width.                                                                                                                           | `lg`     |
 | **isBordered**           | `boolean`                           | Whether the navbar should be bordered.                                                                                                              | `false`  |
 | **isCompact**            | `boolean`                           | Whether the navbar should be compact. It reduces the height to `54px`.                                                                              | `false`  |
@@ -178,9 +178,13 @@ import { Navbar } from "@nextui-org/react";
 
 #### Navbar.Brand Props
 
-| Attribute      | Type        | Description                                                                                                                                                                | Default |
-| -------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| **children\*** | `ReactNode` | The dropdown trigger component, ensure the children passed is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessiblity. | -       |
+| Attribute    | Type                             | Description                                                                   | Default |
+| ------------ | -------------------------------- | ----------------------------------------------------------------------------- | ------- |
+| **children** | `ReactNode` `ReactNode[]`        | The content of the navbar brand. It's usually the logo and name of the brand. | -       |
+| **hideIn**   | [HideShowIn](#hide-in-&-show-in) | Sets the breakpoint from where the component should start hiding.             | -       |
+| **showIn**   | [HideShowIn](#hide-in-&-show-in) | Sets the breakpoint from where the component should start displaying.         | -       |
+| **css**      | `Stitches.CSS`                   | Override Default CSS style.                                                   | -       |
+| **as**       | `keyof JSX.IntrinsicElements`    | Changes which tag component outputs.                                          | `span`  |
 
 <Spacer y={2} />
 
@@ -190,9 +194,19 @@ import { Navbar } from "@nextui-org/react";
 
 #### Navbar.Content Props
 
-| Attribute       | Type                                                | Description                                                                           | Default |
-| --------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------- | ------- |
-| **ButtonProps** | [ButtonProps](/docs/components/button#button-props) | Since dropdown button is based on the `Button` you can use any of the `Button` props. | -       |
+| Attribute                    | Type                                                              | Description                                                                      | Default          |
+| ---------------------------- | ----------------------------------------------------------------- | -------------------------------------------------------------------------------- | ---------------- |
+| **children**                 | `ReactNode` `ReactNode[]`                                         | The content of the navbar content. It's usually the navbar item and navbar link. | -                |
+| **variant**                  | [NavbarContentVariants](#navbar-content-variants)                 | The variant of the navbar content items.                                         | `default`        |
+| **gap**                      | `number` `string` [CSSGapUnit](/docs/theme/default-theme#spacing) | The gap between each content item. It's `0px` for highlight variants.            | `$10`            |
+| **activeColor**              | [SimpleColors](#simple-colors)                                    | The active color of the navbar content items.                                    | `default (link)` |
+| **underlineHeight**          | [NormalWeights](#normal-weights)                                  | The height of the navbar content items's underline.                              | `normal`         |
+| **enableCursorHighlight**    | [NormalWeights](#normal-weights)                                  | Whether the navbar content highlighted cursor should be visible.                 | `false`          |
+| **isCursorHighlightRounded** | [NormalWeights](#normal-weights)                                  | Whether the navbar content highlighted cursor should be rounded.                 | `false`          |
+| **hideIn**                   | [HideShowIn](#hide-in-&-show-in)                                  | Sets the breakpoint from where the component should start hiding.                | -                |
+| **showIn**                   | [HideShowIn](#hide-in-&-show-in)                                  | Sets the breakpoint from where the component should start displaying.            | -                |
+| **css**                      | `Stitches.CSS`                                                    | Override Default CSS style.                                                      | -                |
+| **as**                       | `keyof JSX.IntrinsicElements`                                     | Changes which tag component outputs.                                             | `ul`             |
 
 <Spacer y={2} />
 
@@ -202,24 +216,13 @@ import { Navbar } from "@nextui-org/react";
 
 #### Navbar.Item Props
 
-| Attribute                  | Type                                                                                                         | Description                                                                                             | Default   |
-| -------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | --------- |
-| **children\***             | [CollectionChildrentype](#collection-children-type)                                                          | The contents of the collection. It's usually the `Dropdown.Item` or `Dropdown.Section`.                 | -         |
-| **items**                  | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)       | Item objects in the collection.                                                                         | -         |
-| **selectedKeys**           | `all` [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | The currently selected keys in the collection (controlled).                                             | -         |
-| **defaultSelectedKeys**    | `all` [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | The initial selected keys in the collection (uncontrolled).                                             | -         |
-| **disabledKeys**           | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)       | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | -         |
-| **selectionMode**          | [SelectionModeType](#selection-mode-type)                                                                    | The type of selection that is allowed in the collection.                                                | -         |
-| **keyboardDelegate**       | [KeyboardDelegateType](#keyboard-delegate-type)                                                              | An optional keyboard delegate implementation for type to select, to override the default.               | -         |
-| **color**                  | [SimpleColors](#simple-colors)                                                                               | The dropdown menu items color                                                                           | `default` |
-| **textColor**              | [SimpleColors](#simple-colors)                                                                               | The dropdown menu items text color                                                                      | `default` |
-| **variant**                | [DropdownVariant](#dropdown-variants)                                                                        | The dropdown menu items variantion                                                                      | `flat`    |
-| **isVirtualized**          | `boolean`                                                                                                    | Whether the dropdown menu uses virtual scrolling.                                                       | `false`   |
-| **disallowEmptySelection** | `boolean`                                                                                                    | Whether the collection allows empty selection.                                                          | `false`   |
-| **autoFocus**              | `boolean` [FocusStrategyType](#focus-strategy-type)                                                          | Where the focus should be set.                                                                          | `false`   |
-| **shouldFocusWrap**        | `boolean`                                                                                                    | Whether keyboard navigation is circular.                                                                | `false`   |
-| **css**                    | `Stitches.CSS`                                                                                               | Override Default CSS style.                                                                             | -         |
-| **as**                     | `keyof JSX.IntrinsicElements`                                                                                | Changes which tag component outputs.                                                                    | `ul`      |
+| Attribute      | Type                                                | Description                                                                             | Default |
+| -------------- | --------------------------------------------------- | --------------------------------------------------------------------------------------- | ------- |
+| **children\*** | [CollectionChildrentype](#collection-children-type) | The contents of the collection. It's usually the `Dropdown.Item` or `Dropdown.Section`. | -       |
+| **hideIn**     | [HideShowIn](#hide-in-&-show-in)                    | Sets the breakpoint from where the component should start hiding.                       | -       |
+| **showIn**     | [HideShowIn](#hide-in-&-show-in)                    | Sets the breakpoint from where the component should start displaying.                   | -       |
+| **css**        | `Stitches.CSS`                                      | Override Default CSS style.                                                             | -       |
+| **as**         | `keyof JSX.IntrinsicElements`                       | Changes which tag component outputs.                                                    | `li`    |
 
 <Spacer y={2} />
 
@@ -308,6 +311,42 @@ type NavbarMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | "fluid";
 
 > **Note**: `fluid` means the navbar will fill the entire width of the screen. You can see the complete breakpoint list [here](https://nextui.org/docs/theme/default-theme#breakpoints).
 
+#### Hide In & Show In
+
+```ts
+type HideIn = "xsMax" | "smMax" | "mdMax" | "lgMax" | "xlMax";
+type ShowIn = "xsMin" | "smMin" | "mdMin" | "lgMin" | "xlMin";
+```
+
+> **Note**: You can see the complete media breakpoint list [here](/docs/theme/media#media-queries).
+
+#### Navbar Content Variants
+
+```ts
+type NavbarVariants =
+  | "default"
+  | "underline"
+  | "underline-rounded"
+  | "highlight"
+  | "highlight-solid"
+  | "highlight-rounded"
+  | "highlight-solid-rounded";
+```
+
+> **Note**: You can try the complete list of item variants [here](#active-item-variants).
+
+#### Simple Colors
+
+```ts
+type SimpleColors =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "error";
+```
+
 #### Normal Weights
 
 ```ts
diff --git a/packages/react/src/navbar/use-navbar-content.ts b/packages/react/src/navbar/use-navbar-content.ts
index ba008f136a..52d26b6216 100644
--- a/packages/react/src/navbar/use-navbar-content.ts
+++ b/packages/react/src/navbar/use-navbar-content.ts
@@ -14,7 +14,7 @@ interface Props extends Omit<HTMLNextUIProps<"ul">, "color"> {
   gap?: CSSGapUnit;
   /**
    * The active color of the navbar content items.
-   * @default "$colors$link"
+   * @default "default"
    */
   activeColor?: NavbarItemVariantsProps["activeColor"];
   /**

From 4fb7fd12b6a5e6c07937cb00afed354677deb078 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Tue, 23 Aug 2022 21:59:16 -0300
Subject: [PATCH 091/106] feat(docs-navbar): documentation done!

---
 apps/docs/content/docs/components/navbar.mdx  | 119 +++++++++++++-----
 .../react/src/navbar/navbar-collapse-item.tsx |   5 +-
 .../react/src/navbar/use-navbar-collapse.ts   |   2 +-
 3 files changed, 91 insertions(+), 35 deletions(-)

diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index 4a892a2025..3081bb00d5 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -111,7 +111,7 @@ import { Navbar } from "@nextui-org/react";
   previewHeight="600px"
   iframeSrc="/examples/navbar/with-avatar-user"
   desc="A common use case is to display the user's avatar in the navbar. To achieve this, you can use the `Avatar` component as navbar item or combine it with the `Dropdown` to show a dropdown menu."
-  highlightedLines="46"
+  highlightedLines="59"
   files={navbarContent.withAvatarUser}
 />
 
@@ -216,13 +216,18 @@ import { Navbar } from "@nextui-org/react";
 
 #### Navbar.Item Props
 
-| Attribute      | Type                                                | Description                                                                             | Default |
-| -------------- | --------------------------------------------------- | --------------------------------------------------------------------------------------- | ------- |
-| **children\*** | [CollectionChildrentype](#collection-children-type) | The contents of the collection. It's usually the `Dropdown.Item` or `Dropdown.Section`. | -       |
-| **hideIn**     | [HideShowIn](#hide-in-&-show-in)                    | Sets the breakpoint from where the component should start hiding.                       | -       |
-| **showIn**     | [HideShowIn](#hide-in-&-show-in)                    | Sets the breakpoint from where the component should start displaying.                   | -       |
-| **css**        | `Stitches.CSS`                                      | Override Default CSS style.                                                             | -       |
-| **as**         | `keyof JSX.IntrinsicElements`                       | Changes which tag component outputs.                                                    | `li`    |
+| Attribute           | Type                                              | Description                                                           | Default          |
+| ------------------- | ------------------------------------------------- | --------------------------------------------------------------------- | ---------------- |
+| **children\***      | `ReactNode`                                       | The contents of the navbar item.                                      | -                |
+| **variant**         | [NavbarContentVariants](#navbar-content-variants) | The variant of the navbar item.                                       | `default`        |
+| **activeColor**     | [SimpleColors](#simple-colors)                    | The active color of the navbar item.                                  | `default (link)` |
+| **underlineHeight** | [NormalWeights](#normal-weights)                  | The height of the navbar item underline.                              | `normal`         |
+| **isActive**        | `boolean`                                         | Whether navbar item is active.                                        | `false`          |
+| **isDisabled**      | `boolean`                                         | Whether navbar item is disabled.                                      | `false`          |
+| **hideIn**          | [HideShowIn](#hide-in-&-show-in)                  | Sets the breakpoint from where the component should start hiding.     | -                |
+| **showIn**          | [HideShowIn](#hide-in-&-show-in)                  | Sets the breakpoint from where the component should start displaying. | -                |
+| **css**             | `Stitches.CSS`                                    | Override Default CSS style.                                           | -                |
+| **as**              | `keyof JSX.IntrinsicElements`                     | Changes which tag component outputs.                                  | `li`             |
 
 <Spacer y={2} />
 
@@ -232,9 +237,14 @@ import { Navbar } from "@nextui-org/react";
 
 #### Navbar.Link Props
 
-| Attribute       | Type                                                | Description                                                                           | Default |
-| --------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------- | ------- |
-| **ButtonProps** | [ButtonProps](/docs/components/button#button-props) | Since dropdown button is based on the `Button` you can use any of the `Button` props. | -       |
+| Attribute         | Type                                          | Description                                                                                                    | Default |
+| ----------------- | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------- |
+| **ItemProps**     | [NavbarItemProps](#navbaritem-props)          | Since dropdown navbar link is based on the `Navbar.Item` component you can use any of the `Navbar.Item` props. | -       |
+| **LinkProps**     | [LinkProps](/docs/components/link#link-props) | Since dropdown navbar link uses the `Link` component as a base, you can use any of the `Link` props.           | -       |
+| **itemCss**       | `Stitches.CSS`                                | Override the navbar item CSS style.                                                                            | -       |
+| **itemClassName** | `string`                                      | Add a class name to the navbar item.                                                                           | -       |
+| **css**           | `Stitches.CSS`                                | Override Default CSS style.                                                                                    | -       |
+| **as**            | `keyof JSX.IntrinsicElements`                 | Changes which tag component outputs.                                                                           | `a`     |
 
 <Spacer y={2} />
 
@@ -244,13 +254,33 @@ import { Navbar } from "@nextui-org/react";
 
 #### Navbar.Toggle Props
 
+| Attribute           | Type                             | Description                                                                | Default  |
+| ------------------- | -------------------------------- | -------------------------------------------------------------------------- | -------- |
+| **children**        | `ReactNode`                      | The contents of the navbar toggle. It's usually an hamburguer icon button. | -        |
+| **isSelected**      | [HideShowIn](#hide-in-&-show-in) | Whether the element should be selected (controlled).                       | `false`  |
+| **defaultSelected** | [HideShowIn](#hide-in-&-show-in) | Whether the element should be selected (uncontrolled).                     | -        |
+| **autoFocus**       | [HideShowIn](#hide-in-&-show-in) | Whether the element should receive focus on render.                        | `false`  |
+| **hideIn**          | [HideShowIn](#hide-in-&-show-in) | Sets the breakpoint from where the component should start hiding.          | -        |
+| **showIn**          | [HideShowIn](#hide-in-&-show-in) | Sets the breakpoint from where the component should start displaying.      | -        |
+| **css**             | `Stitches.CSS`                   | Override Default CSS style.                                                | -        |
+| **as**              | `keyof JSX.IntrinsicElements`    | Changes which tag component outputs.                                       | `button` |
+
+<Spacer y={1} />
+
+#### Navbar.Toggle Events
+
+| Attribute    | Type                            | Description                                                        | Default |
+| ------------ | ------------------------------- | ------------------------------------------------------------------ | ------- |
+| **onChange** | `(isSelected: boolean) => void` | Handler that is called when the element's selection state changes. | -       |
+
+<Spacer y={1} />
+
+#### Navbar.Toggle Accessibility Props
+
 | Attribute            | Type     | Description                                                                                                        | Default |
 | -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------ | ------- |
 | **id**               | `string` | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) | -       |
 | **aria-label**       | `string` | Defines a string value that labels the current element                                                             | -       |
-| **aria-labelledby**  | `string` | Identifies the element (or elements) that labels the current element                                               | -       |
-| **aria-describedby** | `string` | Identifies the element (or elements) that describes the object.                                                    | -       |
-| **aria-details**     | `string` | Identifies the element (or elements) that provide a detailed, extended description for the object.                 | -       |
 
 <Spacer y={2} />
 
@@ -260,20 +290,28 @@ import { Navbar } from "@nextui-org/react";
 
 #### Navbar.Collapse Props
 
-| Attribute                     | Type                                                | Description                                                      | Default   |
-| ----------------------------- | --------------------------------------------------- | ---------------------------------------------------------------- | --------- |
-| **key**                       | [Key](https://reactjs.org/docs/lists-and-keys.html) | The unique key for the menu item.                                | `false`   |
-| **description**               | `string`                                            | Description text element inside the dropdown menu item.          | -         |
-| **command**                   | `string`                                            | Right-aligned label text content, useful for displaying hotkeys. | -         |
-| **icon**                      | `ReactNode`                                         | The icon to render before the dropdown menu item's label.        | -         |
-| **dividerWeight**             | [NormalWeights](#normal-weights)                    | The dropdown item divider height                                 | `light`   |
-| **color**                     | [SimpleColors](#simple-colors)                      | The dropdown item color                                          | `default` |
-| **textColor**                 | [SimpleColors](#simple-colors)                      | The dropdown item text color                                     | `default` |
-| **variant**                   | [DropdownVariant](#dropdown-variants)               | The dropdown item variation                                      | `flat`    |
-| **withDivider**               | `boolean`                                           | Whether the dropdown item should have a border on top            | `false`   |
-| **showFullDescription** `new` | `boolean`                                           | Whether the item description should be truncated or not.         | `false`   |
-| **css**                       | `Stitches.CSS`                                      | Override Default CSS style.                                      | -         |
-| **as**                        | `keyof JSX.IntrinsicElements`                       | Changes which tag component outputs.                             | `li`      |
+| Attribute            | Type                                                    | Description                                                                | Default                                                                    |
+| -------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| **children**         | `ReactNode` `ReactNode[]`                               | The contents of the navbar toggle. It's usually an hamburguer icon button. | -                                                                          |
+| **transitionDelay**  | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `0`                                                                        |
+| **transitionTime**   | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `450`                                                                      |
+| **transitionMatrix** | [CollapseTransitionMatrix](#collapse-transition-matrix) | The matrix of all collapse items transition.                               | `{in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.95, 0, 0, 0.95, 5, 20)"}` |
+| **disableAnimation** | `boolean`                                               | Whether the all navbar collapse items are animated.                        | `false`                                                                    |
+| **hideIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start hiding.          | -                                                                          |
+| **showIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start displaying.      | -                                                                          |
+| **css**              | `Stitches.CSS`                                          | Override Default CSS style.                                                | -                                                                          |
+| **as**               | `keyof JSX.IntrinsicElements`                           | Changes which tag component outputs.                                       | `ul`                                                                       |
+
+<Spacer y={1} />
+
+#### Navbar.Collapse Accessibility Props
+
+| Attribute            | Type     | Description                                                                                                        | Default |
+| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------ | ------- |
+| **id**               | `string` | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) | -       |
+| **aria-labelledby**  | `string` | Identifies the element (or elements) that labels the current element                                               | -       |
+| **aria-describedby** | `string` | Identifies the element (or elements) that describes the object.                                                    | -       |
+
 
 <Spacer y={2} />
 
@@ -283,9 +321,17 @@ import { Navbar } from "@nextui-org/react";
 
 #### Navbar.CollapseItem
 
-| Attribute      | Type     | Description                                            | Default |
-| -------------- | -------- | ------------------------------------------------------ | ------- |
-| **aria-label** | `string` | A screen reader only label for the dropdown menu item. | -       |
+| Attribute            | Type                                                    | Description                                                                | Default                                                                    |
+| -------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| **children**         | `ReactNode` `ReactNode[]`                               | The contents of the navbar toggle. It's usually an hamburguer icon button. | -                                                                          |
+| **transitionDelay**  | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `0`                                                                        |
+| **transitionTime**   | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `450`                                                                      |
+| **transitionMatrix** | [CollapseTransitionMatrix](#collapse-transition-matrix) | The matrix of all collapse items transition.                               | `{in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.95, 0, 0, 0.95, 5, 20)"}` |
+| **disableAnimation** | `boolean`                                               | Whether the navbar collapse item is animated.                              | `false`                                                                    |
+| **hideIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start hiding.          | -                                                                          |
+| **showIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start displaying.      | -                                                                          |
+| **css**              | `Stitches.CSS`                                          | Override Default CSS style.                                                | -                                                                          |
+| **as**               | `keyof JSX.IntrinsicElements`                           | Changes which tag component outputs.                                       | `li`                                                                       |
 
 <Spacer y={2} />
 
@@ -335,6 +381,17 @@ type NavbarVariants =
 
 > **Note**: You can try the complete list of item variants [here](#active-item-variants).
 
+#### Collapse Transition Matrix
+
+```ts
+type CollapseTransitionMatrix = {
+  in?: string;
+  out?: string;
+};
+```
+
+> **Note**: For more information about the transition matrix, check the [transition matrix documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix).
+
 #### Simple Colors
 
 ```ts
diff --git a/packages/react/src/navbar/navbar-collapse-item.tsx b/packages/react/src/navbar/navbar-collapse-item.tsx
index 1198bd3c8e..ecc35dd1b7 100644
--- a/packages/react/src/navbar/navbar-collapse-item.tsx
+++ b/packages/react/src/navbar/navbar-collapse-item.tsx
@@ -30,7 +30,6 @@ const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref
     disableAnimation,
     style,
     css,
-
     ...otherProps
   } = props;
 
@@ -81,7 +80,7 @@ const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref
     () =>
       collapseContext.items && index > -1
         ? index / collapseContext.items.length + itemTransitions.transitionDelay
-        : 0.1,
+        : 100,
     [index, itemTransitions.transitionDelay, collapseContext?.items],
   );
 
@@ -95,7 +94,7 @@ const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref
         : itemTransitions.transitionMatrix.out,
       "--netxui--collapseItemTransition":
         !disableAnimation && context.isCollapseOpen
-          ? `opacity ${itemTransitions.transitionTime}s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s, transform ${itemTransitions.transitionTime}s cubic-bezier(0.5, 0, 0, 1) ${timeDelay}s`
+          ? `opacity ${itemTransitions.transitionTime}ms cubic-bezier(0.5, 0, 0, 1) ${timeDelay}ms, transform ${itemTransitions.transitionTime}ms cubic-bezier(0.5, 0, 0, 1) ${timeDelay}ms`
           : "none",
     };
   }, [
diff --git a/packages/react/src/navbar/use-navbar-collapse.ts b/packages/react/src/navbar/use-navbar-collapse.ts
index 00c41369c5..a7f69374fb 100644
--- a/packages/react/src/navbar/use-navbar-collapse.ts
+++ b/packages/react/src/navbar/use-navbar-collapse.ts
@@ -34,7 +34,7 @@ export function useNavbarCollapse(props: UseNavbarCollapseProps = {}) {
     children,
     ref,
     transitionDelay = 0,
-    transitionTime = 0.45,
+    transitionTime = 450,
     transitionMatrix = {in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.95, 0, 0, 0.95, 5, 20)"},
     className,
     ...otherProps

From 25a07f3b8788d77a3ab03aeb968d221c85bcdb90 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Wed, 24 Aug 2022 00:02:03 -0300
Subject: [PATCH 092/106] fix(react-navbar): transition time

---
 packages/react/src/navbar/navbar-collapse-item.tsx | 8 ++++----
 packages/react/src/navbar/use-navbar-collapse.ts   | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/navbar/navbar-collapse-item.tsx b/packages/react/src/navbar/navbar-collapse-item.tsx
index ecc35dd1b7..d47e292b5e 100644
--- a/packages/react/src/navbar/navbar-collapse-item.tsx
+++ b/packages/react/src/navbar/navbar-collapse-item.tsx
@@ -12,8 +12,8 @@ import {StyledNavbarCollapseItem, NavbarCollapseItemVariantsProps} from "./navba
 
 export type NavbarCollapseItemProps = HTMLNextUIProps<"li"> &
   NavbarCollapseItemVariantsProps & {
-    transitionDelay?: number; // in seconds
-    transitionTime?: number; // in seconds
+    transitionDelay?: number; // in milliseconds
+    transitionTime?: number; // in milliseconds
     transitionMatrix?: {
       in: string;
       out: string;
@@ -79,8 +79,8 @@ const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref
   const defaultDelay = useMemo(
     () =>
       collapseContext.items && index > -1
-        ? index / collapseContext.items.length + itemTransitions.transitionDelay
-        : 100,
+        ? (index / collapseContext.items.length) * 1000 + itemTransitions.transitionDelay
+        : 0.1,
     [index, itemTransitions.transitionDelay, collapseContext?.items],
   );
 
diff --git a/packages/react/src/navbar/use-navbar-collapse.ts b/packages/react/src/navbar/use-navbar-collapse.ts
index a7f69374fb..50984912b6 100644
--- a/packages/react/src/navbar/use-navbar-collapse.ts
+++ b/packages/react/src/navbar/use-navbar-collapse.ts
@@ -15,8 +15,8 @@ import {useNavbarContext} from "./navbar-context";
 interface Props extends Omit<HTMLNextUIProps<"ul">, keyof NavbarCollapseVariantsProps> {
   ref?: ForwardedRef<any>;
   children?: React.ReactNode | React.ReactNode[];
-  transitionDelay?: number; // in seconds
-  transitionTime?: number; // in seconds
+  transitionDelay?: number; // in milliseconds
+  transitionTime?: number; // in milliseconds
   transitionMatrix?: {
     in: string;
     out: string;

From 1e1932ea374c2bc25315e334cbb38402da633054 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Thu, 25 Aug 2022 10:03:33 -0300
Subject: [PATCH 093/106] refactor(react-navbar): collapse matrix animation
 improved

---
 apps/docs/content/docs/components/navbar.mdx  | 53 +++++++++----------
 .../react/src/navbar/navbar-collapse-item.tsx |  4 +-
 .../react/src/navbar/use-navbar-collapse.ts   |  4 +-
 3 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index 3081bb00d5..f342964011 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -277,10 +277,10 @@ import { Navbar } from "@nextui-org/react";
 
 #### Navbar.Toggle Accessibility Props
 
-| Attribute            | Type     | Description                                                                                                        | Default |
-| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------ | ------- |
-| **id**               | `string` | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) | -       |
-| **aria-label**       | `string` | Defines a string value that labels the current element                                                             | -       |
+| Attribute      | Type     | Description                                                                                                        | Default |
+| -------------- | -------- | ------------------------------------------------------------------------------------------------------------------ | ------- |
+| **id**         | `string` | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) | -       |
+| **aria-label** | `string` | Defines a string value that labels the current element                                                             | -       |
 
 <Spacer y={2} />
 
@@ -290,17 +290,17 @@ import { Navbar } from "@nextui-org/react";
 
 #### Navbar.Collapse Props
 
-| Attribute            | Type                                                    | Description                                                                | Default                                                                    |
-| -------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
-| **children**         | `ReactNode` `ReactNode[]`                               | The contents of the navbar toggle. It's usually an hamburguer icon button. | -                                                                          |
-| **transitionDelay**  | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `0`                                                                        |
-| **transitionTime**   | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `450`                                                                      |
-| **transitionMatrix** | [CollapseTransitionMatrix](#collapse-transition-matrix) | The matrix of all collapse items transition.                               | `{in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.95, 0, 0, 0.95, 5, 20)"}` |
-| **disableAnimation** | `boolean`                                               | Whether the all navbar collapse items are animated.                        | `false`                                                                    |
-| **hideIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start hiding.          | -                                                                          |
-| **showIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start displaying.      | -                                                                          |
-| **css**              | `Stitches.CSS`                                          | Override Default CSS style.                                                | -                                                                          |
-| **as**               | `keyof JSX.IntrinsicElements`                           | Changes which tag component outputs.                                       | `ul`                                                                       |
+| Attribute            | Type                                                    | Description                                                                | Default                                                                 |
+| -------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| **children**         | `ReactNode` `ReactNode[]`                               | The contents of the navbar toggle. It's usually an hamburguer icon button. | -                                                                       |
+| **transitionDelay**  | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `0`                                                                     |
+| **transitionTime**   | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `450`                                                                   |
+| **transitionMatrix** | [CollapseTransitionMatrix](#collapse-transition-matrix) | The matrix of all collapse items transition.                               | `{in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.97, 0, 0, 1, 0, 20)"}` |
+| **disableAnimation** | `boolean`                                               | Whether the all navbar collapse items are animated.                        | `false`                                                                 |
+| **hideIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start hiding.          | -                                                                       |
+| **showIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start displaying.      | -                                                                       |
+| **css**              | `Stitches.CSS`                                          | Override Default CSS style.                                                | -                                                                       |
+| **as**               | `keyof JSX.IntrinsicElements`                           | Changes which tag component outputs.                                       | `ul`                                                                    |
 
 <Spacer y={1} />
 
@@ -312,7 +312,6 @@ import { Navbar } from "@nextui-org/react";
 | **aria-labelledby**  | `string` | Identifies the element (or elements) that labels the current element                                               | -       |
 | **aria-describedby** | `string` | Identifies the element (or elements) that describes the object.                                                    | -       |
 
-
 <Spacer y={2} />
 
 ---
@@ -321,17 +320,17 @@ import { Navbar } from "@nextui-org/react";
 
 #### Navbar.CollapseItem
 
-| Attribute            | Type                                                    | Description                                                                | Default                                                                    |
-| -------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
-| **children**         | `ReactNode` `ReactNode[]`                               | The contents of the navbar toggle. It's usually an hamburguer icon button. | -                                                                          |
-| **transitionDelay**  | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `0`                                                                        |
-| **transitionTime**   | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `450`                                                                      |
-| **transitionMatrix** | [CollapseTransitionMatrix](#collapse-transition-matrix) | The matrix of all collapse items transition.                               | `{in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.95, 0, 0, 0.95, 5, 20)"}` |
-| **disableAnimation** | `boolean`                                               | Whether the navbar collapse item is animated.                              | `false`                                                                    |
-| **hideIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start hiding.          | -                                                                          |
-| **showIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start displaying.      | -                                                                          |
-| **css**              | `Stitches.CSS`                                          | Override Default CSS style.                                                | -                                                                          |
-| **as**               | `keyof JSX.IntrinsicElements`                           | Changes which tag component outputs.                                       | `li`                                                                       |
+| Attribute            | Type                                                    | Description                                                                | Default                                                                 |
+| -------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| **children**         | `ReactNode` `ReactNode[]`                               | The contents of the navbar toggle. It's usually an hamburguer icon button. | -                                                                       |
+| **transitionDelay**  | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `0`                                                                     |
+| **transitionTime**   | `number`                                                | The delay of all collapse items transition. (milliseconds)                 | `450`                                                                   |
+| **transitionMatrix** | [CollapseTransitionMatrix](#collapse-transition-matrix) | The matrix of all collapse items transition.                               | `{in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.97, 0, 0, 1, 0, 20)"}` |
+| **disableAnimation** | `boolean`                                               | Whether the navbar collapse item is animated.                              | `false`                                                                 |
+| **hideIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start hiding.          | -                                                                       |
+| **showIn**           | [HideShowIn](#hide-in-&-show-in)                        | Sets the breakpoint from where the component should start displaying.      | -                                                                       |
+| **css**              | `Stitches.CSS`                                          | Override Default CSS style.                                                | -                                                                       |
+| **as**               | `keyof JSX.IntrinsicElements`                           | Changes which tag component outputs.                                       | `li`                                                                    |
 
 <Spacer y={2} />
 
diff --git a/packages/react/src/navbar/navbar-collapse-item.tsx b/packages/react/src/navbar/navbar-collapse-item.tsx
index d47e292b5e..6943b9f1cc 100644
--- a/packages/react/src/navbar/navbar-collapse-item.tsx
+++ b/packages/react/src/navbar/navbar-collapse-item.tsx
@@ -64,7 +64,7 @@ const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref
       transitionMatrix: transitionMatrix ??
         collapseContext?.transitionMatrix ?? {
           in: "matrix(1, 0, 0, 1, 0, 0)",
-          out: "matrix(0.95, 0, 0, 1, 0, 15)",
+          out: "matrix(0.97, 0, 0, 1, 0, 20)",
         },
     };
   }, [
@@ -79,7 +79,7 @@ const NavbarCollapseItem = forwardRef<NavbarCollapseItemProps, "li">((props, ref
   const defaultDelay = useMemo(
     () =>
       collapseContext.items && index > -1
-        ? (index / collapseContext.items.length) * 1000 + itemTransitions.transitionDelay
+        ? (index / collapseContext.items.length) * 0.5 * 1000 + itemTransitions.transitionDelay
         : 0.1,
     [index, itemTransitions.transitionDelay, collapseContext?.items],
   );
diff --git a/packages/react/src/navbar/use-navbar-collapse.ts b/packages/react/src/navbar/use-navbar-collapse.ts
index 50984912b6..4c09f2b8cb 100644
--- a/packages/react/src/navbar/use-navbar-collapse.ts
+++ b/packages/react/src/navbar/use-navbar-collapse.ts
@@ -34,8 +34,8 @@ export function useNavbarCollapse(props: UseNavbarCollapseProps = {}) {
     children,
     ref,
     transitionDelay = 0,
-    transitionTime = 450,
-    transitionMatrix = {in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.95, 0, 0, 0.95, 5, 20)"},
+    transitionTime = 350,
+    transitionMatrix = {in: "matrix(1, 0, 0, 1, 0, 0)", out: "matrix(0.97, 0, 0, 1, 0, 20)"},
     className,
     ...otherProps
   } = props;

From b537105884c84859ba1029499fa082aaa59aa11e Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Thu, 25 Aug 2022 10:08:33 -0300
Subject: [PATCH 094/106] chore(docs): manifest updated, notify banner removd

---
 apps/docs/content/docs/manifest.json | 449 +++++++++++++--------------
 apps/docs/src/layouts/default.tsx    |   5 -
 apps/docs/tsconfig.json              |  13 +-
 3 files changed, 229 insertions(+), 238 deletions(-)

diff --git a/apps/docs/content/docs/manifest.json b/apps/docs/content/docs/manifest.json
index ebabfb21df..852154a11b 100644
--- a/apps/docs/content/docs/manifest.json
+++ b/apps/docs/content/docs/manifest.json
@@ -1,231 +1,226 @@
 {
-    "routes": [
+  "routes": [
+    {
+      "title": "Documentation",
+      "keywords": "docs, doc, documentation, getting started, nextui",
+      "subtitle": "For an advanced search please use the search input",
+      "icon": "note",
+      "section": "Scope",
+      "heading": true,
+      "routes": [
         {
-            "title": "Documentation",
-            "keywords": "docs, doc, documentation, getting started, nextui",
-            "subtitle": "For an advanced search please use the search input",
-            "icon": "note",
-            "section": "Scope",
-            "heading": true,
-            "routes": [
-                {
-                    "title": "Guide",
-                    "open": true,
-                    "keywords": "guide, getting started, start, nextui",
-                    "icon": "/paper.svg",
-                    "routes": [
-                        {
-                            "title": "Getting Started",
-                            "keywords": "getting started, start, nextui",
-                            "path": "/docs/guide/getting-started.mdx"
-                        },
-                        {
-                            "title": "NextUI + Next.js",
-                            "keywords": "next, nextjs, nextui",
-                            "path": "/docs/guide/nextui-plus-nextjs.mdx"
-                        }
-                    ]
-                },
-                {
-                    "title": "Theme",
-                    "keywords": "themeable, theme, customize, palette",
-                    "icon": "/category.svg",
-                    "open": true,
-                    "routes": [
-                        {
-                            "title": "Default theme",
-                            "updated": true,
-                            "path": "/docs/theme/default-theme.mdx"
-                        },
-                        {
-                            "title": "Customize theme",
-                            "path": "/docs/theme/customize-theme.mdx"
-                        },
-                        {
-                            "title": "Dark mode",
-                            "path": "/docs/theme/dark-mode.mdx"
-                        },
-                        {
-                            "title": "Override styles",
-                            "path": "/docs/theme/override-styles.mdx"
-                        },
-                        {
-                            "title": "Typescript",
-                            "path": "/docs/theme/typescript.mdx"
-                        },
-                        {
-                            "title": "Utilities",
-                            "path": "/docs/theme/utilities.mdx"
-                        },
-                        {
-                            "title": "Media",
-                            "path": "/docs/theme/media.mdx"
-                        }
-                    ]
-                },
-                {
-                    "title": "Layout",
-                    "icon": "/layout.svg",
-                    "keywords": "layout, container, grid, spacer, flex",
-                    "open": true,
-                    "routes": [
-                        {
-                            "title": "Container",
-                            "keywords": "cont, container, flex, media query",
-                            "path": "/docs/layout/container.mdx"
-                        },
-                        {
-                            "title": "Grid",
-                            "keywords": "grid, container, media query",
-                            "path": "/docs/layout/grid.mdx"
-                        },
-                        {
-                            "title": "Spacer",
-                            "keywords": "space, spacer, gap",
-                            "path": "/docs/layout/spacer.mdx"
-                        }
-                    ]
-                },
-                {
-                    "title": "Components",
-                    "keywords": "components, btn, button, input, modal",
-                    "icon": "/components.svg",
-                    "open": true,
-                    "routes": [
-                        {
-                            "title": "Avatar",
-                            "keywords": "avatar, avatar group, group",
-                            "path": "/docs/components/avatar.mdx"
-                        },
-                        {
-                            "title": "Button",
-                            "keywords": "button, btn, buttons, action",
-                            "path": "/docs/components/button.mdx"
-                        },
-                        {
-                            "title": "Button Group",
-                            "keywords": "btn, button, btn group, button group, group",
-                            "path": "/docs/components/button-group.mdx"
-                        },
-                        {
-                            "title": "Card",
-                            "keywords": "card, content, action, media",
-                            "path": "/docs/components/card.mdx",
-                            "updated": true
-                        },
-                        {
-                            "title": "Pagination",
-                            "keywords": "pagination, paginate, table pagination, pages, navigate",
-                            "path": "/docs/components/pagination.mdx"
-                        },
-                        {
-                            "title": "Table",
-                            "keywords":"table, data table, grid, data grid",
-                            "path": "/docs/components/table.mdx"
-                        },
-                        {
-                            "title": "Collapse",
-                            "keywords": "collapse, accordion, expand, reveal",
-                            "path": "/docs/components/collapse.mdx"
-                        },
-                        {
-                            "title": "Input",
-                            "keywords": "text input, input, textarea",
-                            "path": "/docs/components/input.mdx"
-                        },
-                        {
-                            "title": "Autocomplete",
-                            "comingSoon": true
-                        },
-                        {
-                            "title": "Textarea",
-                            "keywords": "textarea, input, text input, large text input",
-                            "path": "/docs/components/textarea.mdx"
-                        },
-                        {
-                            "title": "Checkbox",
-                            "keywords": "check, radio, selectable, checkbox, box",
-                            "path": "/docs/components/checkbox.mdx"
-                        },
-                        {
-                            "title": "Checkbox Group",
-                            "keywords": "check, radio, selectable, checkbox, box, group, items",
-                            "path": "/docs/components/checkbox-group.mdx"
-                        },
-                        {
-                            "title": "Radio",
-                            "updated": true,
-                            "keywords": "check, radio, select",
-                            "path": "/docs/components/radio.mdx"
-                        },
-                        {
-                          "title": "Popover",
-                          "keywords": "popover, tooltip, tooltip, popover, popover",
-                          "path": "/docs/components/popover.mdx",
-                          "updated": true
-                        },
-                        {
-                          "title": "Tooltip",
-                          "keywords": "tool, popover, tooltip, hoverable",
-                          "path": "/docs/components/tooltip.mdx"
-                        },
-                        {
-                            "title": "Dropdown",
-                            "keywords": "dropdown, select, selectable, menu",
-                            "path": "/docs/components/dropdown.mdx",
-                            "newPost": true
-                        },
-                        {
-                            "title": "Progress",
-                            "keywords": "progress, bar, task, display, activity",
-                            "path": "/docs/components/progress.mdx"
-                        },
-                        {
-                          "title": "Select",
-                          "comingSoon": true
-                        },
-                        {
-                            "title": "Modal",
-                            "keywords": "modal, dialog, backdrop",
-                            "path": "/docs/components/modal.mdx"
-                        },
-                        {
-                            "title": "Loading",
-                            "keywords": "loading, spinner, loadable, progress",
-                            "path": "/docs/components/loading.mdx"
-                        },
-                        {
-                            "title": "Navbar",
-                            "comingSoon": true
-                        },
-                        {
-                            "title": "Switch",
-                            "keywords": "toggle, switch",
-                            "path": "/docs/components/switch.mdx"
-                        },
-                        {
-                            "title": "Text",
-                            "keywords": "text, txt, paragraph",
-                            "path": "/docs/components/text.mdx"
-                        },
-                        {
-                            "title": "Link",
-                            "keywords": "link, navigation, href, next link",
-                            "path": "/docs/components/link.mdx"
-                        },
-                        {
-                            "title": "User",
-                            "keywords": "User, avatar, name, initials",
-                            "path": "/docs/components/user.mdx"
-                        },
-                        {
-                            "title": "Image",
-                            "keywords": "Image, Next.js Image, image component",
-                            "path": "/docs/components/image.mdx"
-                        }
-                    ]
-                }
-            ]
+          "title": "Guide",
+          "open": true,
+          "keywords": "guide, getting started, start, nextui",
+          "icon": "/paper.svg",
+          "routes": [
+            {
+              "title": "Getting Started",
+              "keywords": "getting started, start, nextui",
+              "path": "/docs/guide/getting-started.mdx"
+            },
+            {
+              "title": "NextUI + Next.js",
+              "keywords": "next, nextjs, nextui",
+              "path": "/docs/guide/nextui-plus-nextjs.mdx"
+            }
+          ]
+        },
+        {
+          "title": "Theme",
+          "keywords": "themeable, theme, customize, palette",
+          "icon": "/category.svg",
+          "open": true,
+          "routes": [
+            {
+              "title": "Default theme",
+              "path": "/docs/theme/default-theme.mdx"
+            },
+            {
+              "title": "Customize theme",
+              "path": "/docs/theme/customize-theme.mdx"
+            },
+            {
+              "title": "Dark mode",
+              "path": "/docs/theme/dark-mode.mdx"
+            },
+            {
+              "title": "Override styles",
+              "path": "/docs/theme/override-styles.mdx"
+            },
+            {
+              "title": "Typescript",
+              "path": "/docs/theme/typescript.mdx"
+            },
+            {
+              "title": "Utilities",
+              "path": "/docs/theme/utilities.mdx"
+            },
+            {
+              "title": "Media",
+              "path": "/docs/theme/media.mdx"
+            }
+          ]
+        },
+        {
+          "title": "Layout",
+          "icon": "/layout.svg",
+          "keywords": "layout, container, grid, spacer, flex",
+          "open": true,
+          "routes": [
+            {
+              "title": "Container",
+              "keywords": "cont, container, flex, media query",
+              "path": "/docs/layout/container.mdx"
+            },
+            {
+              "title": "Grid",
+              "keywords": "grid, container, media query",
+              "path": "/docs/layout/grid.mdx"
+            },
+            {
+              "title": "Spacer",
+              "keywords": "space, spacer, gap",
+              "path": "/docs/layout/spacer.mdx"
+            }
+          ]
+        },
+        {
+          "title": "Components",
+          "keywords": "components, btn, button, input, modal",
+          "icon": "/components.svg",
+          "open": true,
+          "routes": [
+            {
+              "title": "Avatar",
+              "keywords": "avatar, avatar group, group",
+              "path": "/docs/components/avatar.mdx"
+            },
+            {
+              "title": "Button",
+              "keywords": "button, btn, buttons, action",
+              "path": "/docs/components/button.mdx"
+            },
+            {
+              "title": "Button Group",
+              "keywords": "btn, button, btn group, button group, group",
+              "path": "/docs/components/button-group.mdx"
+            },
+            {
+              "title": "Card",
+              "keywords": "card, content, action, media",
+              "path": "/docs/components/card.mdx"
+            },
+            {
+              "title": "Pagination",
+              "keywords": "pagination, paginate, table pagination, pages, navigate",
+              "path": "/docs/components/pagination.mdx"
+            },
+            {
+              "title": "Table",
+              "keywords": "table, data table, grid, data grid",
+              "path": "/docs/components/table.mdx"
+            },
+            {
+              "title": "Collapse",
+              "keywords": "collapse, accordion, expand, reveal",
+              "path": "/docs/components/collapse.mdx"
+            },
+            {
+              "title": "Input",
+              "keywords": "text input, input, textarea",
+              "path": "/docs/components/input.mdx"
+            },
+            {
+              "title": "Autocomplete",
+              "comingSoon": true
+            },
+            {
+              "title": "Textarea",
+              "keywords": "textarea, input, text input, large text input",
+              "path": "/docs/components/textarea.mdx"
+            },
+            {
+              "title": "Checkbox",
+              "keywords": "check, radio, selectable, checkbox, box",
+              "path": "/docs/components/checkbox.mdx"
+            },
+            {
+              "title": "Checkbox Group",
+              "keywords": "check, radio, selectable, checkbox, box, group, items",
+              "path": "/docs/components/checkbox-group.mdx"
+            },
+            {
+              "title": "Radio",
+              "keywords": "check, radio, select",
+              "path": "/docs/components/radio.mdx"
+            },
+            {
+              "title": "Popover",
+              "keywords": "popover, tooltip, tooltip, popover, popover",
+              "path": "/docs/components/popover.mdx"
+            },
+            {
+              "title": "Tooltip",
+              "keywords": "tool, popover, tooltip, hoverable",
+              "path": "/docs/components/tooltip.mdx"
+            },
+            {
+              "title": "Dropdown",
+              "keywords": "dropdown, select, selectable, menu",
+              "path": "/docs/components/dropdown.mdx"
+            },
+            {
+              "title": "Progress",
+              "keywords": "progress, bar, task, display, activity",
+              "path": "/docs/components/progress.mdx"
+            },
+            {
+              "title": "Select",
+              "comingSoon": true
+            },
+            {
+              "title": "Modal",
+              "keywords": "modal, dialog, backdrop",
+              "path": "/docs/components/modal.mdx"
+            },
+            {
+              "title": "Loading",
+              "keywords": "loading, spinner, loadable, progress",
+              "path": "/docs/components/loading.mdx"
+            },
+            {
+              "title": "Navbar",
+              "comingSoon": true
+            },
+            {
+              "title": "Switch",
+              "keywords": "toggle, switch",
+              "path": "/docs/components/switch.mdx"
+            },
+            {
+              "title": "Text",
+              "keywords": "text, txt, paragraph",
+              "path": "/docs/components/text.mdx"
+            },
+            {
+              "title": "Link",
+              "keywords": "link, navigation, href, next link",
+              "path": "/docs/components/link.mdx"
+            },
+            {
+              "title": "User",
+              "keywords": "User, avatar, name, initials",
+              "path": "/docs/components/user.mdx"
+            },
+            {
+              "title": "Image",
+              "keywords": "Image, Next.js Image, image component",
+              "path": "/docs/components/image.mdx"
+            }
+          ]
         }
-    ]
+      ]
+    }
+  ]
 }
\ No newline at end of file
diff --git a/apps/docs/src/layouts/default.tsx b/apps/docs/src/layouts/default.tsx
index c0e73ed461..ab2c0d5722 100644
--- a/apps/docs/src/layouts/default.tsx
+++ b/apps/docs/src/layouts/default.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Container } from '@nextui-org/react';
-import { NotifyBanner } from '@components';
 import { Route } from '@lib/docs/page';
 import Header from './header';
 import Footer from './footer';
@@ -20,10 +19,6 @@ const DefaultLayout: React.FC<React.PropsWithChildren<Props>> = ({
   return (
     <div id="app-container">
       <Header />
-      <NotifyBanner
-        text="Dropdown component"
-        href="/docs/components/dropdown"
-      />
       <Navbar isHome hasNotify routes={routes} />
       <Container
         lg={true}
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 8c1582cf9a..4551e68802 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -28,7 +28,7 @@
       ],
       "@lib/*": [
         "./src/lib/*"
-      ],
+      ]
     },
     "lib": [
       "dom",
@@ -41,7 +41,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "types": [
-        "node"
+      "node"
     ],
     "strict": false,
     "forceConsistentCasingInFileNames": true,
@@ -57,9 +57,10 @@
     "skipLibCheck": true,
     "module": "esnext",
     "typeRoots": [
-        "../../node_modules/@types",
-        "./typings"
-    ]
+      "../../node_modules/@types",
+      "./typings"
+    ],
+    "incremental": true
   },
   "include": [
     "**/*.ts",
@@ -71,4 +72,4 @@
   "exclude": [
     "node_modules"
   ]
-}
\ No newline at end of file
+}

From 44c63d15d33fad291a32cc600101bfd4922dd11c Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Thu, 25 Aug 2022 10:13:20 -0300
Subject: [PATCH 095/106] chore(docs): hasNotify removed from navbar

---
 apps/docs/src/layouts/default.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/src/layouts/default.tsx b/apps/docs/src/layouts/default.tsx
index ab2c0d5722..09a55a3b1d 100644
--- a/apps/docs/src/layouts/default.tsx
+++ b/apps/docs/src/layouts/default.tsx
@@ -19,7 +19,7 @@ const DefaultLayout: React.FC<React.PropsWithChildren<Props>> = ({
   return (
     <div id="app-container">
       <Header />
-      <Navbar isHome hasNotify routes={routes} />
+      <Navbar isHome routes={routes} />
       <Container
         lg={true}
         id="main-container"

From 1646f3fcb3986d9dbda6b32db19aacfb24806020 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Thu, 25 Aug 2022 22:16:17 -0300
Subject: [PATCH 096/106] chore(docs): updated badge added to the link

---
 apps/docs/content/docs/manifest.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/docs/content/docs/manifest.json b/apps/docs/content/docs/manifest.json
index 641bdb6fc2..e1f993ea10 100644
--- a/apps/docs/content/docs/manifest.json
+++ b/apps/docs/content/docs/manifest.json
@@ -216,7 +216,8 @@
             {
               "title": "Link",
               "keywords": "link, navigation, href, next link",
-              "path": "/docs/components/link.mdx"
+              "path": "/docs/components/link.mdx",
+              "updated": true
             },
             {
               "title": "User",

From ce9124b66f7acefeee0f5f1da35f3bd8265d28d6 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Thu, 25 Aug 2022 22:20:59 -0300
Subject: [PATCH 097/106] v1.0.0-beta.10

---
 apps/docs/package.json                      | 4 ++--
 examples/create-next-app/package.json       | 2 +-
 examples/create-react-app/package.json      | 2 +-
 examples/vite-react-typescript/package.json | 2 +-
 examples/with-tailwindcss/package.json      | 2 +-
 packages/react/package.json                 | 2 +-
 packages/storybook/package.json             | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/docs/package.json b/apps/docs/package.json
index db156a69c7..f06de68ccd 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/docs",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-beta.10",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -16,7 +16,7 @@
     "@codesandbox/sandpack-react": "0.14.3",
     "@mapbox/rehype-prism": "^0.6.0",
     "@mdx-js/react": "^1.6.22",
-    "@nextui-org/react": "1.0.0-beta.9",
+    "@nextui-org/react": "1.0.0-beta.10",
     "@types/lodash": "^4.14.170",
     "algoliasearch": "^4.10.3",
     "canvas-confetti": "^1.4.0",
diff --git a/examples/create-next-app/package.json b/examples/create-next-app/package.json
index 3545fa5a62..2f2eebea1e 100644
--- a/examples/create-next-app/package.json
+++ b/examples/create-next-app/package.json
@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@nextui-org/react": "1.0.0-beta.9",
+    "@nextui-org/react": "1.0.0-beta.10",
     "next": "11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"
diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
index e31b9205fa..8f05ff4639 100644
--- a/examples/create-react-app/package.json
+++ b/examples/create-react-app/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@nextui-org/react": "1.0.0-beta.9",
+    "@nextui-org/react": "1.0.0-beta.10",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
diff --git a/examples/vite-react-typescript/package.json b/examples/vite-react-typescript/package.json
index 37abbebafa..f54075029b 100644
--- a/examples/vite-react-typescript/package.json
+++ b/examples/vite-react-typescript/package.json
@@ -8,7 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@nextui-org/react": "1.0.0-beta.9",
+    "@nextui-org/react": "1.0.0-beta.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
index 0ffbd80fe7..fade3e0ae0 100644
--- a/examples/with-tailwindcss/package.json
+++ b/examples/with-tailwindcss/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@nextui-org/react": "^1.0.0-beta.9",
+    "@nextui-org/react": "^1.0.0-beta.10",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
diff --git a/packages/react/package.json b/packages/react/package.json
index 6b578f7491..9c4fae014f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.0-beta.10",
   "license": "MIT",
   "description": "🚀 Beautiful and modern React UI library.",
   "homepage": "https://nextui.org",
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 620afd4bbc..fe2dfd04d0 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "@nextui-org/react": "1.0.0-beta.9"
+    "@nextui-org/react": "1.0.0-beta.10"
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",

From c6e45db9c742db0a7178ad47caebdb85bccc19f0 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Thu, 25 Aug 2022 22:22:20 -0300
Subject: [PATCH 098/106] fix(root): docs build

---
 apps/docs/src/components/notify-banner/notify-banner.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/docs/src/components/notify-banner/notify-banner.tsx b/apps/docs/src/components/notify-banner/notify-banner.tsx
index d75eee19b9..9ab159e8c9 100644
--- a/apps/docs/src/components/notify-banner/notify-banner.tsx
+++ b/apps/docs/src/components/notify-banner/notify-banner.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import NextLink from "next/link";
-import {Badge, Spacer, useTheme} from "@nextui-org/react";
+import {Badge, Spacer} from "@nextui-org/react";
 import {ChevronRight, Sparkles} from "@components";
 import {AnimatedText} from "@primitives";
 import {darkTheme} from "@theme/shared";
@@ -17,8 +17,6 @@ interface Props {
 const NotifyBanner: React.FC<Props> = (props) => {
   const {showBadge = true, showSparkles = true, text, href = "#"} = props;
 
-  const {isDark} = useTheme();
-
   return (
     <StyledNotifyBanner>
       <StyledImg

From 278a78cda1db54d0b1eb498fd708a36236ed89e1 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Thu, 25 Aug 2022 22:43:27 -0300
Subject: [PATCH 099/106] fix(root): algolia script written in js/node

---
 package.json                 |   2 +-
 scripts/update-index-docs.js | 107 +++++++++++++++++++++++++++++
 scripts/update-index-docs.ts | 126 -----------------------------------
 3 files changed, 108 insertions(+), 127 deletions(-)
 create mode 100644 scripts/update-index-docs.js
 delete mode 100644 scripts/update-index-docs.ts

diff --git a/package.json b/package.json
index 8d7bd6fac5..870b7f6237 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "coverage:codecov": "yarn workspace @nextui-org/react coverage:codecov",
     "cov:co": "yarn coverage:codecov",
     "cov:up": "yarn workspace @nextui-org/react coverage-update",
-    "build:docs-meta": "ts-node scripts/update-index-docs.ts",
+    "build:docs-meta": "node scripts/update-index-docs.js",
     "clean": "yarn turbo:clean"
   },
   "devDependencies": {
diff --git a/scripts/update-index-docs.js b/scripts/update-index-docs.js
new file mode 100644
index 0000000000..e9ac74e6fb
--- /dev/null
+++ b/scripts/update-index-docs.js
@@ -0,0 +1,107 @@
+const path = require("path");
+const uuid = require("uuid").v4;
+const shell = require("shelljs");
+const dotenv = require("dotenv");
+const algoliasearch = require("algoliasearch");
+const toc = require("markdown-toc/index");
+
+const docusaurusUtils = require("@docusaurus/utils");
+const { parseMarkdownFile, fileToPath, removePrefix } = docusaurusUtils;
+
+const docsRootFolder = "apps/docs";
+
+async function getMDXMeta(file) {
+  const { content, frontMatter } = await parseMarkdownFile(file);
+  const tableOfContent = toc(content);
+  const json = tableOfContent.json;
+  const slug = fileToPath(file)
+    .replace(`/${docsRootFolder}`, "")
+    .replace("/content", "")
+    .replace(process.cwd(), "");
+
+  const result = [];
+  const title = !!frontMatter.title ? frontMatter.title : "";
+
+  result.push({
+    content: title,
+    objectID: uuid(),
+    type: "lvl1",
+    url: removePrefix(slug, "/"),
+    hierarchy: {
+      lvl1: title,
+    },
+  });
+
+  json.forEach((item, index) => {
+    result.push({
+      content: item.content,
+      objectID: uuid(),
+      type: `lvl${item.lvl}`,
+      url: removePrefix(slug, "/") + `#${item.slug}`,
+      hierarchy: {
+        lvl1: title,
+        lvl2: item.lvl === 2 ? item.content : json[index - 1]?.content ?? null,
+        lvl3: item.lvl === 3 ? item.content : null,
+      },
+    });
+  });
+
+  return result;
+}
+
+async function getSearchMeta() {
+  dotenv.config();
+  // Initialise Algolia client
+  const client = algoliasearch(
+    process.env.ALGOLIA_APP_ID || "",
+    process.env.ALGOLIA_ADMIN_API_KEY || ""
+  );
+
+  try {
+    const tmpIndex = await client.initIndex("prod_docs_tmp");
+    const mainIndex = await client.initIndex("prod_docs");
+
+    let json = [];
+
+    const files = shell
+      .ls("-R", docsRootFolder)
+      .map((file) => path.join(process.cwd(), docsRootFolder, file))
+      .filter((file) => file.endsWith(".mdx"));
+
+    for (const file of files) {
+      let result = [];
+      try {
+        result = await getMDXMeta(file);
+        json.push(...result);
+      } catch (error) {}
+    }
+
+    // Uncomment this to see save json into a file
+    // json = prettier.format(JSON.stringify(json), { parser: 'json' });
+    // const outPath = path.join(
+    //   process.cwd(),
+    //   `${docsRootFolder}/content/docs`,
+    //   'search-meta.json'
+    // );
+    // fs.writeFileSync(outPath, json);
+
+    // Get settings of main index and set them to the temp index
+    const indexSettings = await mainIndex.getSettings();
+    await tmpIndex.setSettings(indexSettings);
+
+    console.log("[Items count 🚀]: " + json.length);
+
+    console.log("[Saving on Algolia ⏰...]");
+
+    await mainIndex.replaceAllObjects(json, {
+      autoGenerateObjectIDIfNotExist: true,
+      safe: true
+    });
+
+    console.log("[NextUI] Search meta is ready ✅");
+  } catch (error) {
+    console.error(`[ERROR 🔥]:`, error);
+  }
+}
+
+getSearchMeta();
diff --git a/scripts/update-index-docs.ts b/scripts/update-index-docs.ts
deleted file mode 100644
index 0200365f7f..0000000000
--- a/scripts/update-index-docs.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { parseMarkdownFile, fileToPath, removePrefix } from '@docusaurus/utils';
-import path from 'path';
-import { v4 as uuid } from 'uuid';
-import shell from 'shelljs';
-const dotenv = require('dotenv');
-const algoliasearch = require('algoliasearch');
-const toc = require('markdown-toc');
-
-interface ResultType {
-  content: string;
-  objectID: string;
-  url: string;
-  type: 'lvl1' | 'lvl2' | 'lvl3';
-  hierarchy: {
-    lvl1: string | null;
-    lvl2?: string | null;
-    lvl3?: string | null;
-  };
-}
-
-interface TOCResultItem {
-  content: string;
-  slug: string;
-  lvl: 1 | 2 | 3;
-  i: number;
-  seen: number;
-}
-
-const docsRootFolder = 'apps/docs';
-
-async function getMDXMeta(file: string) {
-  const { content, frontMatter } = await parseMarkdownFile(file);
-  const tableOfContent = toc(content);
-  const json = tableOfContent.json as TOCResultItem[];
-  const slug = fileToPath(file)
-    .replace(`/${docsRootFolder}`, '')
-    .replace('/content', '')
-    .replace(process.cwd(), '');
-
-  const result: ResultType[] = [];
-  //@ts-ignore
-  const title: string = !!frontMatter.title ? frontMatter.title : '';
-
-  result.push({
-    content: title,
-    objectID: uuid(),
-    type: 'lvl1',
-    url: removePrefix(slug, '/'),
-    hierarchy: {
-      lvl1: title
-    }
-  });
-
-  json.forEach((item, index) => {
-    result.push({
-      content: item.content,
-      objectID: uuid(),
-      type: `lvl${item.lvl}` as any,
-      url: removePrefix(slug, '/') + `#${item.slug}`,
-      hierarchy: {
-        lvl1: title,
-        lvl2: item.lvl === 2 ? item.content : json[index - 1]?.content ?? null,
-        lvl3: item.lvl === 3 ? item.content : null
-      }
-    });
-  });
-
-  return result;
-}
-
-async function getSearchMeta() {
-  dotenv.config();
-  // Initialise Algolia client
-  const client = algoliasearch(
-    process.env.ALGOLIA_APP_ID,
-    process.env.ALGOLIA_ADMIN_API_KEY
-  );
-
-  try {
-    const tmpIndex = await client.initIndex('prod_docs_tmp');
-    const mainIndex = await client.initIndex('prod_docs');
-
-    let json: any = [];
-
-    const files = shell
-      .ls('-R', docsRootFolder)
-      .map((file) => path.join(process.cwd(), docsRootFolder, file))
-      .filter((file) => file.endsWith('.mdx'));
-
-    for (const file of files) {
-      let result: any[] = [];
-      try {
-        result = await getMDXMeta(file);
-        json.push(...result);
-      } catch (error) {}
-    }
-
-    // Uncomment this to see save json into a file
-    // json = prettier.format(JSON.stringify(json), { parser: 'json' });
-    // const outPath = path.join(
-    //   process.cwd(),
-    //   `${docsRootFolder}/content/docs`,
-    //   'search-meta.json'
-    // );
-    // fs.writeFileSync(outPath, json);
-
-    // Get settings of main index and set them to the temp index
-    const indexSettings = await mainIndex.getSettings();
-    await tmpIndex.setSettings(indexSettings);
-
-    console.log('[Items count 🚀]: ' + json.length);
-
-    console.log('[Saving on Algolia ⏰...]');
-
-    await mainIndex.replaceAllObjects(json, {
-      autoGenerateObjectIDIfNotExist: true,
-      safe: true
-    });
-
-    console.log('[NextUI] Search meta is ready ✅');
-  } catch (error) {
-    console.error(`[ERROR 🔥]:`, error);
-  }
-}
-
-getSearchMeta();

From 8ef205663b61f2b2c0eff6495ceac656ce5bb58e Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Thu, 25 Aug 2022 23:14:45 -0300
Subject: [PATCH 100/106] fix(docs): navbar & badge codesandbox code

---
 .../components/badge/content-visibility.ts     |  3 ++-
 apps/docs/content/components/badge/content.ts  |  2 +-
 apps/docs/content/components/badge/sizes.ts    |  2 +-
 apps/docs/content/components/navbar/common.ts  |  7 ++++---
 .../components/navbar/with-dropdown-menu.ts    | 14 +-------------
 .../components/navbar/with-search-input.ts     | 13 -------------
 apps/docs/content/docs/components/navbar.mdx   | 15 +++++++++++++--
 .../src/components/playground/playground.tsx   |  4 ++++
 apps/docs/src/components/sandpack/entry.ts     | 18 ++++++++++++++++++
 apps/docs/src/components/sandpack/sandpack.tsx |  7 +++++--
 10 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/apps/docs/content/components/badge/content-visibility.ts b/apps/docs/content/components/badge/content-visibility.ts
index 4615dc1d5b..1d9a073396 100644
--- a/apps/docs/content/components/badge/content-visibility.ts
+++ b/apps/docs/content/components/badge/content-visibility.ts
@@ -62,7 +62,8 @@ const CartIcon = `export const CartIcon = ({
   );
 };`;
 
-const App = `import { Badge, Grid } from "@nextui-org/react";
+const App = `import React from "react";
+import { Badge, Grid, Row, Switch, Text } from "@nextui-org/react";
 import { NotificationIcon } from './NotificationIcon';
 import { CartIcon } from './CartIcon';
 
diff --git a/apps/docs/content/components/badge/content.ts b/apps/docs/content/components/badge/content.ts
index c766109e62..fe8a8a9877 100644
--- a/apps/docs/content/components/badge/content.ts
+++ b/apps/docs/content/components/badge/content.ts
@@ -54,7 +54,7 @@ const NotificationIcon = `export const NotificationIcon = ({
 };`;
 
 const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
-import { NotificationIcon } from './NotificationIcon"
+import { NotificationIcon } from "./NotificationIcon"
 import { CheckIcon } from "./CheckIcon";
 
 export default function App() {
diff --git a/apps/docs/content/components/badge/sizes.ts b/apps/docs/content/components/badge/sizes.ts
index 8fb7a76f5c..bef7210479 100644
--- a/apps/docs/content/components/badge/sizes.ts
+++ b/apps/docs/content/components/badge/sizes.ts
@@ -1,4 +1,4 @@
-const App = `import { Badge, Avatar, Grid } from "@nextui-org/react";
+const App = `import { Badge, Avatar, Spacer, Grid } from "@nextui-org/react";
 
 export default function App() {
   return (
diff --git a/apps/docs/content/components/navbar/common.ts b/apps/docs/content/components/navbar/common.ts
index 8b0769a05a..e2fa605243 100644
--- a/apps/docs/content/components/navbar/common.ts
+++ b/apps/docs/content/components/navbar/common.ts
@@ -27,7 +27,7 @@ export const Box = styled("div", {
 export const Content = `import { Text, Spacer } from "@nextui-org/react"
 import { Box } from "./Box.js"
 
-const Content = () => (
+export const Content = () => (
   <Box css={{px: "$12", mt: "$8", "@xsMax": {px: "$10"}}}>
     <Text h2>Lorem ipsum dolor sit amet</Text>
     <Text size="$lg">
@@ -104,12 +104,12 @@ const Content = () => (
 );`;
 
 export const Layout = `import { Content } from "./Content.js"
+import { Box } from "./Box.js";
 
 export const Layout = ({ children }) => (
   <Box
     css={{
       maxW: "100%",
-      maxHeight: "600px",
       position: "relative",
       overflow: "visible scroll",
     }}
@@ -119,7 +119,8 @@ export const Layout = ({ children }) => (
   </Box>
 );`;
 
-export const VariantsSelectorWrapper = `// used as a wrapper for the navbar variants radio buttons
+export const VariantsSelectorWrapper = `import { styled } from "@nextui-org/react"
+// used as a wrapper for the navbar variants radio buttons
 export const VariantsSelectorWrapper = styled("div", {
   dflex: "center",
   position: "fixed",
diff --git a/apps/docs/content/components/navbar/with-dropdown-menu.ts b/apps/docs/content/components/navbar/with-dropdown-menu.ts
index a10e1e5880..14c689a6a7 100644
--- a/apps/docs/content/components/navbar/with-dropdown-menu.ts
+++ b/apps/docs/content/components/navbar/with-dropdown-menu.ts
@@ -159,24 +159,12 @@ export const icons = {
   user: <TagUserIcon fill="var(--nextui-colors-error)" size={30} />,
 };`;
 
-const App = `import { Navbar, Button, Link, Text } from "@nextui-org/react";
+const App = `import { Navbar, Dropdown, Button, Link, Text } from "@nextui-org/react";
 import { Layout } from "./Layout.js";
 import { AcmeLogo } from "./AcmeLogo.js";
 import { icons } from "./Icons.js";
 
 export default function App() {
-  const collapseItems = [
-    "Features",
-    "Customers",
-    "Pricing",
-    "Company",
-    "Legal",
-    "Team",
-    "Help & Feedback",
-    "Login",
-    "Sign Up",
-  ];
-
   return (
     <Layout>
       <Navbar isBordered variant="sticky">
diff --git a/apps/docs/content/components/navbar/with-search-input.ts b/apps/docs/content/components/navbar/with-search-input.ts
index 4fd47c94ff..0182005d31 100644
--- a/apps/docs/content/components/navbar/with-search-input.ts
+++ b/apps/docs/content/components/navbar/with-search-input.ts
@@ -20,19 +20,6 @@ import { AcmeLogo } from "./AcmeLogo.js";
 import { SearchIcon } from "./SearchIcon.js";
 
 export default function App() {
-  const collapseItems = [
-    "Profile",
-    "Dashboard",
-    "Activity",
-    "Analytics",
-    "System",
-    "Deployments",
-    "My Settings",
-    "Team Settings",
-    "Help & Feedback",
-    "Log Out",
-  ];
-
   return (
     <Layout>
       <Navbar isBordered variant="sticky">
diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index f342964011..e8bd968763 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -31,6 +31,7 @@ import { Navbar } from "@nextui-org/react";
 
 <Playground
   asIframe
+  removeEntryContainer
   title="Variants"
   desc="Navbar can be styled with different variants. The default variant is `static`, but you can also use `floating` and `sticky`."
   iframeSrc="/examples/navbar/variants"
@@ -40,6 +41,7 @@ import { Navbar } from "@nextui-org/react";
 
 <Playground
   asIframe
+  removeEntryContainer
   title="Active Item Variants"
   previewHeight="600px"
   iframeSrc="/examples/navbar/active-item-variants"
@@ -50,6 +52,7 @@ import { Navbar } from "@nextui-org/react";
 
 <Playground
   asIframe
+  removeEntryContainer
   title="Bordered"
   iframeSrc="/examples/navbar/bordered"
   desc="You can add a border to the navbar with the `isBordered` prop."
@@ -59,6 +62,7 @@ import { Navbar } from "@nextui-org/react";
 
 <Playground
   asIframe
+  removeEntryContainer
   title="Compact"
   iframeSrc="/examples/navbar/compact"
   desc="You can reduce the height and amount of padding that navbar contains by using the `isCompact` property."
@@ -68,6 +72,7 @@ import { Navbar } from "@nextui-org/react";
 
 <Playground
   asIframe
+  removeEntryContainer
   title="Hide on scroll"
   iframeSrc="/examples/navbar/hide-on-scroll"
   desc="By using the `shouldHideOnScroll` the navbar hides on scroll down to leave more space for content."
@@ -77,6 +82,7 @@ import { Navbar } from "@nextui-org/react";
 
 <Playground
   asIframe
+  removeEntryContainer
   title="Cursor Highlight"
   iframeSrc="/examples/navbar/cursor-highlight"
   desc="You can highlight the navbar content items when the cursor is over them with the `enableCursorHighlight` prop."
@@ -86,6 +92,7 @@ import { Navbar } from "@nextui-org/react";
 
 <Playground
   asIframe
+  removeEntryContainer
   title="With Toggle Button"
   previewHeight="600px"
   iframeInitialWidth={420}
@@ -97,16 +104,18 @@ import { Navbar } from "@nextui-org/react";
 
 <Playground
   asIframe
+  removeEntryContainer
   title="With Dropdown Menu"
   previewHeight="600px"
   iframeSrc="/examples/navbar/with-dropdown-menu"
   desc="You can use the `Dropdown` component as navbar item to show a dropdown menu."
-  highlightedLines="34"
+  highlightedLines="22"
   files={navbarContent.withDropdownMenu}
 />
 
 <Playground
   asIframe
+  removeEntryContainer
   title="With Avatar User"
   previewHeight="600px"
   iframeSrc="/examples/navbar/with-avatar-user"
@@ -117,16 +126,18 @@ import { Navbar } from "@nextui-org/react";
 
 <Playground
   asIframe
+  removeEntryContainer
   title="With Search Input"
   previewHeight="600px"
   iframeSrc="/examples/navbar/with-search-input"
   desc="Another common use case is to display a search input in the navbar. You can do this by using the `Input` component as navbar item."
-  highlightedLines="53"
+  highlightedLines="40"
   files={navbarContent.withSearchInput}
 />
 
 <Playground
   asIframe
+  removeEntryContainer
   title="Disable collapse animation"
   previewHeight="600px"
   iframeInitialWidth={420}
diff --git a/apps/docs/src/components/playground/playground.tsx b/apps/docs/src/components/playground/playground.tsx
index b81313cdbc..0d6c8666f0 100644
--- a/apps/docs/src/components/playground/playground.tsx
+++ b/apps/docs/src/components/playground/playground.tsx
@@ -42,6 +42,7 @@ interface Props {
   iframeSrc?: string;
   asIframe?: boolean;
   iframeInitialWidth?: number;
+  removeEntryContainer?: boolean;
   previewHeight?: string | number;
   overflow?: "auto" | "visible" | "hidden";
   files?: SandpackFiles;
@@ -60,6 +61,7 @@ const defaultProps = {
   showSandpackPreview: false,
   initialEditorOpen: false,
   showWindowActions: false,
+  removeEntryContainer: false,
   enableResize: false,
   previewHeight: "auto",
   overflow: "visible",
@@ -77,6 +79,7 @@ const Playground: React.FC<PlaygroundProps> = ({
   showSandpackPreview,
   showWindowActions,
   iframeInitialWidth,
+  removeEntryContainer,
   enableResize,
   files,
   iframeSrc,
@@ -164,6 +167,7 @@ const Playground: React.FC<PlaygroundProps> = ({
           <DynamicSandpack
             files={files}
             highlightedLines={highlightedLines}
+            removeEntryContainer={removeEntryContainer}
             showPreview={showSandpackPreview}
           >
             <LiveCode
diff --git a/apps/docs/src/components/sandpack/entry.ts b/apps/docs/src/components/sandpack/entry.ts
index a3453328a5..4fee7233cc 100644
--- a/apps/docs/src/components/sandpack/entry.ts
+++ b/apps/docs/src/components/sandpack/entry.ts
@@ -18,6 +18,24 @@ ReactDOM.render(
 );
 `;
 
+export const entryWithoutContainer = `import React, { StrictMode } from "react";
+import ReactDOM from "react-dom";
+import { NextUIProvider } from '@nextui-org/react';
+import App from "./App";
+
+
+const rootElement = document.getElementById("root");
+
+ReactDOM.render(
+  <StrictMode>
+    <NextUIProvider>
+        <App />
+    </NextUIProvider>
+  </StrictMode>,
+  rootElement
+);
+`;
+
 export const lightThemeEntry = `
 import React, { StrictMode } from "react";
 import ReactDOM from "react-dom";
diff --git a/apps/docs/src/components/sandpack/sandpack.tsx b/apps/docs/src/components/sandpack/sandpack.tsx
index 142b1edde7..f34faf02d7 100644
--- a/apps/docs/src/components/sandpack/sandpack.tsx
+++ b/apps/docs/src/components/sandpack/sandpack.tsx
@@ -12,7 +12,7 @@ import useLocalStorage from "@hooks/use-local-storage";
 
 import {getHighlightedLines, getFileName} from "./utils";
 import CopyButton from "./copy-button";
-import {entry} from "./entry";
+import {entry, entryWithoutContainer} from "./entry";
 import {nextuiTheme} from "./themes";
 import CodeSandboxButton from "./codesanbox-button";
 import BugReportButton from "./bugreport-button";
@@ -28,6 +28,7 @@ interface Props {
   showCopyCode?: boolean;
   showReportBug?: boolean;
   showOpenInCodeSandbox?: boolean;
+  removeEntryContainer?: boolean;
   template?: SandpackPredefinedTemplate;
   highlightedLines?: HighlightedLines;
 }
@@ -37,6 +38,7 @@ const defaultProps = {
   showPreview: true,
   showEditor: true,
   showOpenInCodeSandbox: true,
+  removeEntryContainer: false,
   showReportBug: true,
   showCopyCode: true,
   template: "react",
@@ -52,6 +54,7 @@ const Sandpack: React.FC<React.PropsWithChildren<SandpackProps>> = ({
   showEditor,
   showReportBug,
   showOpenInCodeSandbox,
+  removeEntryContainer,
   showCopyCode,
   template,
 }) => {
@@ -127,7 +130,7 @@ const Sandpack: React.FC<React.PropsWithChildren<SandpackProps>> = ({
         files: {
           ...sortedFiles,
           [entryFile]: {
-            code: entry,
+            code: removeEntryContainer ? entryWithoutContainer : entry,
             hidden: true,
           },
         },

From 280f3bdf1a73a362d8fa401e96e8c8d7c04be1bb Mon Sep 17 00:00:00 2001
From: yogabonito <yogabonito@users.noreply.github.com>
Date: Sat, 27 Aug 2022 16:02:32 +0200
Subject: [PATCH 101/106] DOC: fix controlled / uncontrolled in Radio

A component that gets a state and the corresponding change handler as a prop, is a controlled component. (Before this commit it was the other way around in the documentation for the Radio.Group component.)
---
 .../components/radio/controlled-vs-uncontrolled.ts    | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts b/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts
index 6f8128e741..114c652944 100644
--- a/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts
+++ b/apps/docs/content/components/radio/controlled-vs-uncontrolled.ts
@@ -7,7 +7,11 @@ export default function App() {
   return (
     <Grid.Container gap={2}>
       <Grid>
-        <Radio.Group label="Options (controlled)" defaultValue="A">
+        <Radio.Group 
+          label="Options (controlled)"
+          value={checked}
+          onChange={setChecked}
+        >
           <Radio value="A">Option A</Radio>
           <Radio value="B">Option B</Radio>
           <Radio value="C">Option C</Radio>
@@ -15,11 +19,10 @@ export default function App() {
         </Radio.Group>
       </Grid>
       <Grid>
-        <Radio.Group 
+        <Radio.Group
           label="Options (uncontrolled)"
+          defaultValue="A"
           color="secondary"
-          value={checked}
-          onChange={setChecked}
         >
           <Radio value="A">Option A</Radio>
           <Radio value="B">Option B</Radio>

From d42ccc7c831feaefd6a674d3c96086b8bf1ed802 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 28 Aug 2022 10:53:38 -0300
Subject: [PATCH 102/106] fix(docs-badge): grammar issues

---
 apps/docs/content/components/badge/disable-outline.ts | 1 -
 apps/docs/content/docs/components/badge.mdx           | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/docs/content/components/badge/disable-outline.ts b/apps/docs/content/components/badge/disable-outline.ts
index 0645d70c7e..bef5c747c9 100644
--- a/apps/docs/content/components/badge/disable-outline.ts
+++ b/apps/docs/content/components/badge/disable-outline.ts
@@ -15,7 +15,6 @@ export default function App() {
       <Grid>
         <Badge disableOutline color="error" content={5} shape="circle" size="md">
           <Avatar
-            squared
             size="lg"
             src="https://i.pravatar.cc/300?u=a042581f4e290267072"
           />
diff --git a/apps/docs/content/docs/components/badge.mdx b/apps/docs/content/docs/components/badge.mdx
index 2cb1731ce7..45e0c7a089 100644
--- a/apps/docs/content/docs/components/badge.mdx
+++ b/apps/docs/content/docs/components/badge.mdx
@@ -60,7 +60,7 @@ import { Badge } from "@nextui-org/react";
 
 <Playground
   title="Flat"
-  desc="Use the `flat` variant to create a badge with a flat background that contrasts with the text based on the selected color. [Leran more about the color palette](/docs/theme/default-theme#understanding-the-base-scale)."
+  desc="Use the `flat` variant to create a badge with a flat background that contrasts with the text based on the selected color. [Learn more about the color palette](/docs/theme/default-theme#understanding-the-base-scale)."
   files={badgeContent.flatBadge}
 />
 

From dbd0e83cac7f8b4ea3b981b09cc32c1180fa85b9 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 28 Aug 2022 11:28:06 -0300
Subject: [PATCH 103/106] chore(docs-checkbox): controlled vs uncontrolled
 re-sorted

---
 .../checkbox-group/controlled-vs-uncontrolled.ts | 16 ++++++++--------
 .../checkbox/controlled-vs-uncontrolled.ts       | 10 ++++++----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts b/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts
index 3a7b19fd3f..fe27381f81 100644
--- a/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts
+++ b/apps/docs/content/components/checkbox-group/controlled-vs-uncontrolled.ts
@@ -1,15 +1,17 @@
-const App = `import React from 'react'
+const App = `import React from "react";
 import { Checkbox, Grid } from "@nextui-org/react";
 
 export default function App() {
-  const [selected, setSelected] = React.useState(['buenos-aires', 'sydney']);
+  const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]);
 
   return (
     <Grid.Container gap={2}>
       <Grid>
         <Checkbox.Group
-          label="Select cities (uncontrolled)"
-          defaultValue={['buenos-aires', 'auckland']}
+          label="Select cities (controlled)"
+          color="secondary"
+          value={selected}
+          onChange={setSelected}
         >
           <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
           <Checkbox value="auckland">Auckland</Checkbox>
@@ -18,10 +20,8 @@ export default function App() {
       </Grid>
       <Grid>
         <Checkbox.Group
-          label="Select cities (controlled)"
-          color="secondary"
-          value={selected}
-          onChange={setSelected}
+          label="Select cities (uncontrolled)"
+          defaultValue={["buenos-aires", "auckland"]}
         >
           <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
           <Checkbox value="auckland">Auckland</Checkbox>
diff --git a/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts b/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts
index c186a0b7c1..4f5092ea70 100644
--- a/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts
+++ b/apps/docs/content/components/checkbox/controlled-vs-uncontrolled.ts
@@ -1,4 +1,4 @@
-const App = `import React from 'react'
+const App = `import React from "react";
 import { Checkbox, Spacer } from "@nextui-org/react";
 
 export default function App() {
@@ -6,11 +6,13 @@ export default function App() {
 
   return (
     <>
-      <Checkbox defaultSelected={true} color="success">Subscribe (uncontrolled)</Checkbox>
-      <Spacer x={1} />
-      <Checkbox isSelected={selected} color="success" onChange={setSelected} >
+      <Checkbox isSelected={selected} color="success" onChange={setSelected}>
         Subscribe (controlled)
       </Checkbox>
+      <Spacer x={1} />
+      <Checkbox defaultSelected={true} color="success">
+        Subscribe (uncontrolled)
+      </Checkbox>
     </>
   );
 }`;

From 6f88ac501ef029853171c7969bb1cbbb47b6b523 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 28 Aug 2022 11:30:35 -0300
Subject: [PATCH 104/106] fix(docs-autocomplete): search item border bottom
 color

---
 apps/docs/src/components/search/suggestion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/src/components/search/suggestion.tsx b/apps/docs/src/components/search/suggestion.tsx
index af00c818fa..1fa7dc660b 100644
--- a/apps/docs/src/components/search/suggestion.tsx
+++ b/apps/docs/src/components/search/suggestion.tsx
@@ -49,7 +49,7 @@ const Suggestion: React.FC<Props> = ({hit, highlighted}) => {
               cursor: pointer;
               padding: 16px 8px;
               justify-content: space-between;
-              border-bottom: 1px solid ${addColorAlpha(theme?.colors?.border?.value, 0.6)};
+              border-bottom: 1px solid ${addColorAlpha(theme?.colors?.border?.value, 0.1)};
               min-height: 68px;
               transition: all 0.2s ease;
             }

From a086f6a895a2b812f0c5af79c178564bc28261d4 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 28 Aug 2022 12:08:23 -0300
Subject: [PATCH 105/106] chore(repo): stale plugin removed

---
 .github/stale.yml | 30 ------------------------------
 1 file changed, 30 deletions(-)
 delete mode 100644 .github/stale.yml

diff --git a/.github/stale.yml b/.github/stale.yml
deleted file mode 100644
index ea72a45eaa..0000000000
--- a/.github/stale.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 15
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - pinned
-  - 📌 pin
-  - security
-  - accessibility
-  - performance
-  - documentation
-  - good first issue
-  - "help wanted"
-  - "help wanted: high priority"
-  - "help wanted: urgent"
-  - "feature request"
-# Label to use when marking an issue as stale
-staleLabel: 'type: stale'
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  Hello 👋, to help manage issues we automatically close stale issues.
-  This issue has been automatically marked as stale because it has not had activity for quite some time.
-  Has this issue been fixed, or does it still require the community's attention?
-  > This issue will be closed in 10 days if no further activity occurs.
-  Thank you for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: >
-  Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.
-only: issues
\ No newline at end of file

From 10c4c25bfd39b02987631a4a888ef820710a8c8d Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Sun, 28 Aug 2022 17:54:31 -0300
Subject: [PATCH 106/106] chore:  removed

---
 apps/docs/content/docs/guide/getting-started.mdx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/docs/content/docs/guide/getting-started.mdx b/apps/docs/content/docs/guide/getting-started.mdx
index c8eb6e688a..4c5d53b030 100644
--- a/apps/docs/content/docs/guide/getting-started.mdx
+++ b/apps/docs/content/docs/guide/getting-started.mdx
@@ -24,8 +24,6 @@ Inside your React project directory, install NextUI by running either of the fol
 yarn add @nextui-org/react
 ```
 
-or
-
 ```bash
 npm i @nextui-org/react
 ```