From efb8ec6aca2371392073a0842ef3fe584895ca99 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 23 Aug 2024 15:47:36 +0530
Subject: [PATCH 01/62] feat(alert): began the work on alert component

---
 packages/components/alert/README.md           | 24 ++++++++
 packages/components/alert/package.json        | 57 +++++++++++++++++++
 packages/components/alert/src/alert.tsx       |  7 +++
 packages/components/alert/src/index.ts        |  2 +
 .../alert/stories/alert.stories.tsx           |  6 ++
 packages/components/alert/tsconfig.json       | 10 ++++
 packages/components/alert/tsup.config.ts      |  8 +++
 7 files changed, 114 insertions(+)
 create mode 100644 packages/components/alert/README.md
 create mode 100644 packages/components/alert/package.json
 create mode 100644 packages/components/alert/src/alert.tsx
 create mode 100644 packages/components/alert/src/index.ts
 create mode 100644 packages/components/alert/stories/alert.stories.tsx
 create mode 100644 packages/components/alert/tsconfig.json
 create mode 100644 packages/components/alert/tsup.config.ts

diff --git a/packages/components/alert/README.md b/packages/components/alert/README.md
new file mode 100644
index 0000000000..25def92dc8
--- /dev/null
+++ b/packages/components/alert/README.md
@@ -0,0 +1,24 @@
+# @nextui-org/autocomplete
+
+An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
+
+Please refer to the [documentation](https://nextui.org/docs/components/autocomplete) for more information.
+
+## Installation
+
+```sh
+yarn add @nextui-org/autocomplete
+# or
+npm i @nextui-org/autocomplete
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
diff --git a/packages/components/alert/package.json b/packages/components/alert/package.json
new file mode 100644
index 0000000000..65318d4554
--- /dev/null
+++ b/packages/components/alert/package.json
@@ -0,0 +1,57 @@
+{
+    "name": "@nextui-org/alert",
+    "version": "1.0.0",
+    "description": "Alert component is used to display important messages or notifications to users. It appears as a banner or popup that overlays the main content of a webpage.",
+    "keywords": [
+      "alert"
+    ],
+    "author": "Abhinav Agarwal <abhinavagrawl700@gmail.com>",
+    "homepage": "https://nextui.org",
+    "license": "MIT",
+    "main": "src/index.ts",
+    "sideEffects": false,
+    "files": [
+      "dist"
+    ],
+    "publishConfig": {
+      "access": "public"
+    },
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/nextui-org/nextui.git",
+      "directory": "packages/components/badge"
+    },
+    "bugs": {
+      "url": "https://github.com/nextui-org/nextui/issues"
+    },
+    "scripts": {
+      "build": "tsup src --dts",
+      "dev": "pnpm build:fast --watch",
+      "clean": "rimraf dist .turbo",
+      "typecheck": "tsc --noEmit",
+      "build:fast": "tsup src",
+      "prepack": "clean-package",
+      "postpack": "clean-package restore"
+    },
+    "peerDependencies": {
+      "react": ">=18",
+      "react-dom": ">=18",
+      "@nextui-org/theme": ">=2.1.0",
+      "@nextui-org/system": ">=2.0.0"
+    },
+    "dependencies": {
+      "@nextui-org/shared-utils": "workspace:*",
+      "@nextui-org/react-utils": "workspace:*"
+    },
+    "devDependencies": {
+      "@nextui-org/system": "workspace:*",
+      "@nextui-org/theme": "workspace:*",
+      "@nextui-org/avatar": "workspace:*",
+      "@nextui-org/shared-icons": "workspace:*",
+      "@nextui-org/switch": "workspace:*",
+      "clean-package": "2.2.0",
+      "react": "^18.0.0",
+      "react-dom": "^18.0.0"
+    },
+    "clean-package": "../../../clean-package.config.json"
+  }
\ No newline at end of file
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
new file mode 100644
index 0000000000..11620a3de5
--- /dev/null
+++ b/packages/components/alert/src/alert.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Alert = () => {
+  return <div>alert</div>;
+};
+
+export default Alert;
diff --git a/packages/components/alert/src/index.ts b/packages/components/alert/src/index.ts
new file mode 100644
index 0000000000..068922fc0e
--- /dev/null
+++ b/packages/components/alert/src/index.ts
@@ -0,0 +1,2 @@
+import Alert from "./alert";
+export {Alert};
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
new file mode 100644
index 0000000000..684452a996
--- /dev/null
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -0,0 +1,6 @@
+import {Meta} from "@storybook/react";
+
+export default {
+  title: "Components/Alert",
+  Component: alert,
+} as Meta<typeof alert>;
diff --git a/packages/components/alert/tsconfig.json b/packages/components/alert/tsconfig.json
new file mode 100644
index 0000000000..5d012f6e61
--- /dev/null
+++ b/packages/components/alert/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    },
+  },
+  "include": ["src", "index.ts"]
+}
diff --git a/packages/components/alert/tsup.config.ts b/packages/components/alert/tsup.config.ts
new file mode 100644
index 0000000000..3e2bcff6cc
--- /dev/null
+++ b/packages/components/alert/tsup.config.ts
@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});

From d746f6cd8c71e468cb84a0a13989f65b3271f62f Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 23 Aug 2024 15:51:51 +0530
Subject: [PATCH 02/62] fix(readme): making correction

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

diff --git a/packages/components/alert/README.md b/packages/components/alert/README.md
index 25def92dc8..27dd46ae8b 100644
--- a/packages/components/alert/README.md
+++ b/packages/components/alert/README.md
@@ -7,9 +7,9 @@ Please refer to the [documentation](https://nextui.org/docs/components/autocompl
 ## Installation
 
 ```sh
-yarn add @nextui-org/autocomplete
+yarn add @nextui-org/alert
 # or
-npm i @nextui-org/autocomplete
+npm i @nextui-org/alert
 ```
 
 ## Contribution

From 0de2883b70a10cff2984bd049d0c32dc9b48c9f2 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 23 Aug 2024 18:33:54 +0800
Subject: [PATCH 03/62] chore(deps): change to 2.0.0

---
 packages/components/alert/package.json |    2 +-
 pnpm-lock.yaml                         | 1523 ++++++++++++++----------
 2 files changed, 864 insertions(+), 661 deletions(-)

diff --git a/packages/components/alert/package.json b/packages/components/alert/package.json
index 65318d4554..514dfc66d6 100644
--- a/packages/components/alert/package.json
+++ b/packages/components/alert/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@nextui-org/alert",
-    "version": "1.0.0",
+    "version": "2.0.0",
     "description": "Alert component is used to display important messages or notifications to users. It appears as a banner or popup that overlays the main content of a webpage.",
     "keywords": [
       "alert"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b43049a95..c5b44c5b26 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,7 +35,7 @@ importers:
         version: 7.24.1(@babel/core@7.24.4)
       '@changesets/changelog-github':
         specifier: 0.4.6
-        version: 0.4.6
+        version: 0.4.6(encoding@0.1.13)
       '@changesets/cli':
         specifier: 2.24.1
         version: 2.24.1
@@ -47,7 +47,7 @@ importers:
         version: 5.1.0
       '@commitlint/cli':
         specifier: ^17.2.0
-        version: 17.8.1(@swc/core@1.4.13)
+        version: 17.8.1(@swc/core@1.4.13(@swc/helpers@0.5.9))
       '@commitlint/config-conventional':
         specifier: ^17.2.0
         version: 17.8.1
@@ -62,16 +62,16 @@ importers:
         version: 3.23.1(react@18.2.0)
       '@storybook/react':
         specifier: ^7.4.6
-        version: 7.6.17(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)
+        version: 7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@4.9.5)
       '@swc-node/jest':
         specifier: ^1.5.2
-        version: 1.8.0(@swc/core@1.4.13)(@swc/types@0.1.6)(typescript@4.9.5)
+        version: 1.8.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)(typescript@4.9.5)
       '@swc/core':
         specifier: ^1.3.35
-        version: 1.4.13
+        version: 1.4.13(@swc/helpers@0.5.9)
       '@swc/jest':
         specifier: ^0.2.24
-        version: 0.2.36(@swc/core@1.4.13)
+        version: 0.2.36(@swc/core@1.4.13(@swc/helpers@0.5.9))
       '@testing-library/dom':
         specifier: ^8.1.0
         version: 8.20.1
@@ -80,10 +80,10 @@ importers:
         version: 5.17.0
       '@testing-library/react':
         specifier: ^14.0.0
-        version: 14.3.1(react-dom@18.2.0)(react@18.2.0)
+        version: 14.3.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@testing-library/react-hooks':
         specifier: ^8.0.1
-        version: 8.0.1(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+        version: 8.0.1(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@testing-library/user-event':
         specifier: ^14.4.3
         version: 14.5.2(@testing-library/dom@8.20.1)
@@ -107,7 +107,7 @@ importers:
         version: 5.14.5
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.42.0
-        version: 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@7.32.0)(typescript@4.9.5)
+        version: 5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
       '@typescript-eslint/parser':
         specifier: ^5.42.0
         version: 5.62.0(eslint@7.32.0)(typescript@4.9.5)
@@ -125,31 +125,31 @@ importers:
         version: 7.32.0
       eslint-config-airbnb:
         specifier: ^18.2.1
-        version: 18.2.1(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.34.1)(eslint@7.32.0)
+        version: 18.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)
       eslint-config-airbnb-typescript:
         specifier: ^12.3.1
-        version: 12.3.1(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.34.1)(eslint@7.32.0)(typescript@4.9.5)
+        version: 12.3.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5)
       eslint-config-prettier:
         specifier: ^8.2.0
         version: 8.10.0(eslint@7.32.0)
       eslint-config-react-app:
         specifier: ^6.0.0
-        version: 6.0.0(@typescript-eslint/eslint-plugin@5.62.0)(@typescript-eslint/parser@5.62.0)(babel-eslint@10.1.0)(eslint-plugin-flowtype@5.10.0)(eslint-plugin-import@2.29.1)(eslint-plugin-jest@24.7.0)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.34.1)(eslint@7.32.0)(typescript@4.9.5)
+        version: 6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5)
       eslint-config-ts-lambdas:
         specifier: ^1.2.3
-        version: 1.2.3(@typescript-eslint/eslint-plugin@5.62.0)(@typescript-eslint/parser@5.62.0)(eslint@7.32.0)(typescript@4.9.5)
+        version: 1.2.3(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
       eslint-import-resolver-typescript:
         specifier: ^2.4.0
         version: 2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0)
       eslint-loader:
         specifier: ^4.0.2
-        version: 4.0.2(eslint@7.32.0)(webpack@5.91.0)
+        version: 4.0.2(eslint@7.32.0)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12))
       eslint-plugin-import:
         specifier: ^2.26.0
-        version: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+        version: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
       eslint-plugin-jest:
         specifier: ^24.3.6
-        version: 24.7.0(@typescript-eslint/eslint-plugin@5.62.0)(eslint@7.32.0)(typescript@4.9.5)
+        version: 24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
       eslint-plugin-jsx-a11y:
         specifier: ^6.4.1
         version: 6.8.0(eslint@7.32.0)
@@ -158,7 +158,7 @@ importers:
         version: 11.1.0(eslint@7.32.0)
       eslint-plugin-prettier:
         specifier: ^4.0.0
-        version: 4.2.1(eslint-config-prettier@8.10.0)(eslint@7.32.0)(prettier@2.8.8)
+        version: 4.2.1(eslint-config-prettier@8.10.0(eslint@7.32.0))(eslint@7.32.0)(prettier@2.8.8)
       eslint-plugin-promise:
         specifier: ^6.0.0
         version: 6.1.1(eslint@7.32.0)
@@ -170,7 +170,7 @@ importers:
         version: 4.6.0(eslint@7.32.0)
       eslint-plugin-unused-imports:
         specifier: ^2.0.0
-        version: 2.0.0(@typescript-eslint/eslint-plugin@5.62.0)(eslint@7.32.0)
+        version: 2.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)
       execa:
         specifier: ^5.1.1
         version: 5.1.1
@@ -197,16 +197,16 @@ importers:
         version: 10.5.11
       jest:
         specifier: ^28.1.1
-        version: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2)
+        version: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
       jest-environment-jsdom:
         specifier: ^28.1.1
         version: 28.1.3
       jest-watch-typeahead:
         specifier: 1.1.0
-        version: 1.1.0(jest@28.1.3)
+        version: 1.1.0(jest@28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)))
       lint-staged:
         specifier: ^13.0.3
-        version: 13.3.0
+        version: 13.3.0(enquirer@2.4.1)
       npm-check-updates:
         specifier: ^16.10.18
         version: 16.14.18
@@ -218,7 +218,7 @@ importers:
         version: 1.1.8
       parcel:
         specifier: ^2.3.1
-        version: 2.12.0(typescript@4.9.5)
+        version: 2.12.0(@swc/helpers@0.5.9)(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5)
       plop:
         specifier: 3.1.1
         version: 3.1.1
@@ -245,7 +245,7 @@ importers:
         version: 0.8.5
       tsup:
         specifier: 6.4.0
-        version: 6.4.0(@swc/core@1.4.13)(ts-node@10.9.2)(typescript@4.9.5)
+        version: 6.4.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5)
       tsx:
         specifier: ^3.8.2
         version: 3.14.0
@@ -257,7 +257,7 @@ importers:
         version: 4.9.5
       webpack:
         specifier: ^5.53.0
-        version: 5.91.0(@swc/core@1.4.13)(esbuild@0.15.18)(webpack-cli@3.3.12)
+        version: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)
       webpack-bundle-analyzer:
         specifier: ^4.4.2
         version: 4.10.2
@@ -272,7 +272,7 @@ importers:
     dependencies:
       '@codesandbox/sandpack-react':
         specifier: ^2.6.4
-        version: 2.13.8(@lezer/common@1.2.1)(react-dom@18.2.0)(react@18.2.0)
+        version: 2.13.8(@lezer/common@1.2.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@iconify/icons-solar':
         specifier: ^1.2.3
         version: 1.2.3
@@ -335,7 +335,7 @@ importers:
         version: link:../../packages/hooks/use-is-mobile
       '@radix-ui/react-scroll-area':
         specifier: ^1.0.5
-        version: 1.0.5(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+        version: 1.0.5(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/focus':
         specifier: 3.17.1
         version: 3.17.1(react@18.2.0)
@@ -347,7 +347,7 @@ importers:
         version: 3.21.3(react@18.2.0)
       '@react-aria/selection':
         specifier: 3.18.1
-        version: 3.18.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/ssr':
         specifier: 3.9.4
         version: 3.9.4(react@18.2.0)
@@ -356,7 +356,7 @@ importers:
         version: 3.24.1(react@18.2.0)
       '@react-aria/virtualizer':
         specifier: 3.10.1
-        version: 3.10.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.10.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/visually-hidden':
         specifier: 3.8.12
         version: 3.8.12(react@18.2.0)
@@ -374,13 +374,13 @@ importers:
         version: 2.4.5(react@18.2.0)
       '@vercel/analytics':
         specifier: ^1.2.2
-        version: 1.2.2(next@13.5.1)(react@18.2.0)
+        version: 1.2.2(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)
       canvas-confetti:
         specifier: ^1.9.2
         version: 1.9.2
       cmdk:
         specifier: ^0.2.0
-        version: 0.2.1(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+        version: 0.2.1(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       color2k:
         specifier: ^2.0.2
         version: 2.0.3
@@ -392,7 +392,7 @@ importers:
         version: 2.30.0
       framer-motion:
         specifier: ^11.1.7
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
@@ -419,13 +419,13 @@ importers:
         version: 3.0.0
       next:
         specifier: 13.5.1
-        version: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+        version: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       next-contentlayer:
         specifier: ^0.3.4
-        version: 0.3.4(contentlayer@0.3.4)(esbuild@0.20.2)(next@13.5.1)(react-dom@18.2.0)(react@18.2.0)
+        version: 0.3.4(contentlayer@0.3.4(esbuild@0.20.2))(esbuild@0.20.2)(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       next-themes:
         specifier: ^0.2.1
-        version: 0.2.1(next@13.5.1)(react-dom@18.2.0)(react@18.2.0)
+        version: 0.2.1(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       nprogress:
         specifier: ^0.2.0
         version: 0.2.0
@@ -449,7 +449,7 @@ importers:
         version: 4.12.0(react@18.2.0)
       react-live:
         specifier: ^2.3.0
-        version: 2.4.1(react-dom@18.2.0)(react@18.2.0)
+        version: 2.4.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-multi-ref:
         specifier: ^1.0.1
         version: 1.0.1
@@ -500,7 +500,7 @@ importers:
         version: 2.2.5(react@18.2.0)
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.3)
+        version: 0.1.20(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)))
       unified:
         specifier: ^9.2.2
         version: 9.2.2
@@ -516,7 +516,7 @@ importers:
     devDependencies:
       '@docusaurus/utils':
         specifier: 2.0.0-beta.3
-        version: 2.0.0-beta.3(@swc/core@1.4.13)(esbuild@0.20.2)(webpack-cli@3.3.12)
+        version: 2.0.0-beta.3(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))
       '@next/bundle-analyzer':
         specifier: ^13.4.6
         version: 13.5.6
@@ -528,7 +528,7 @@ importers:
         version: 3.23.1(react@18.2.0)
       '@tailwindcss/typography':
         specifier: ^0.5.9
-        version: 0.5.12(tailwindcss@3.4.3)
+        version: 0.5.12(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)))
       '@types/canvas-confetti':
         specifier: ^1.4.2
         version: 1.6.4
@@ -585,7 +585,7 @@ importers:
         version: 1.2.0
       next-sitemap:
         specifier: ^4.1.8
-        version: 4.2.3(next@13.5.1)
+        version: 4.2.3(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
       node-fetch:
         specifier: ^3.2.10
         version: 3.3.2
@@ -597,7 +597,7 @@ importers:
         version: 2.8.8
       tailwindcss:
         specifier: ^3.4.0
-        version: 3.4.3(ts-node@10.9.2)
+        version: 3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5))
       tsx:
         specifier: ^3.8.2
         version: 3.14.0
@@ -676,7 +676,41 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^11.0.22
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+
+  packages/components/alert:
+    dependencies:
+      '@nextui-org/react-utils':
+        specifier: workspace:*
+        version: link:../../utilities/react-utils
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
+    devDependencies:
+      '@nextui-org/avatar':
+        specifier: workspace:*
+        version: link:../avatar
+      '@nextui-org/shared-icons':
+        specifier: workspace:*
+        version: link:../../utilities/shared-icons
+      '@nextui-org/switch':
+        specifier: workspace:*
+        version: link:../switch
+      '@nextui-org/system':
+        specifier: workspace:*
+        version: link:../../core/system
+      '@nextui-org/theme':
+        specifier: workspace:*
+        version: link:../../core/theme
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -724,7 +758,7 @@ importers:
         version: link:../../hooks/use-safe-layout-effect
       '@react-aria/combobox':
         specifier: 3.9.1
-        version: 3.9.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/focus':
         specifier: 3.17.1
         version: 3.17.1(react@18.2.0)
@@ -776,7 +810,7 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^11.0.28
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -953,7 +987,7 @@ importers:
         version: 3.23.1(react@18.2.0)
       framer-motion:
         specifier: '>=10.17.0'
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       '@nextui-org/shared-icons':
         specifier: workspace:*
@@ -999,7 +1033,7 @@ importers:
         version: link:../../hooks/use-aria-button
       '@react-aria/calendar':
         specifier: 3.5.8
-        version: 3.5.8(react-dom@18.2.0)(react@18.2.0)
+        version: 3.5.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/focus':
         specifier: 3.17.1
         version: 3.17.1(react@18.2.0)
@@ -1057,7 +1091,7 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^10.16.4
-        version: 10.18.0(react-dom@18.2.0)(react@18.2.0)
+        version: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1096,7 +1130,7 @@ importers:
         version: 3.23.1(react@18.2.0)
       framer-motion:
         specifier: '>=10.17.0'
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
         specifier: workspace:*
@@ -1283,7 +1317,7 @@ importers:
         version: link:../../utilities/shared-utils
       '@react-aria/datepicker':
         specifier: 3.10.1
-        version: 3.10.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.10.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/i18n':
         specifier: 3.11.1
         version: 3.11.1(react@18.2.0)
@@ -1353,7 +1387,7 @@ importers:
         version: link:../../utilities/shared-utils
       '@react-aria/datepicker':
         specifier: 3.10.1
-        version: 3.10.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.10.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/i18n':
         specifier: 3.11.1
         version: 3.11.1(react@18.2.0)
@@ -1448,7 +1482,7 @@ importers:
         version: 3.17.1(react@18.2.0)
       '@react-aria/menu':
         specifier: 3.14.1
-        version: 3.14.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -1488,7 +1522,7 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^11.0.22
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1678,7 +1712,7 @@ importers:
         version: 3.21.3(react@18.2.0)
       '@react-aria/listbox':
         specifier: 3.12.1
-        version: 3.12.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -1751,7 +1785,7 @@ importers:
         version: 3.21.3(react@18.2.0)
       '@react-aria/menu':
         specifier: 3.14.1
-        version: 3.14.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -1815,7 +1849,7 @@ importers:
         version: link:../../hooks/use-disclosure
       '@react-aria/dialog':
         specifier: 3.5.14
-        version: 3.5.14(react-dom@18.2.0)(react@18.2.0)
+        version: 3.5.14(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/focus':
         specifier: 3.17.1
         version: 3.17.1(react@18.2.0)
@@ -1824,7 +1858,7 @@ importers:
         version: 3.21.3(react@18.2.0)
       '@react-aria/overlays':
         specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -1858,7 +1892,7 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^11.0.22
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -1894,7 +1928,7 @@ importers:
         version: 3.21.3(react@18.2.0)
       '@react-aria/overlays':
         specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -1906,7 +1940,7 @@ importers:
         version: 3.10.1(react@18.2.0)
       framer-motion:
         specifier: '>=10.17.0'
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-remove-scroll:
         specifier: ^2.5.6
         version: 2.5.9(@types/react@18.2.8)(react@18.2.0)
@@ -2019,7 +2053,7 @@ importers:
         version: link:../../hooks/use-safe-layout-effect
       '@react-aria/dialog':
         specifier: 3.5.14
-        version: 3.5.14(react-dom@18.2.0)(react@18.2.0)
+        version: 3.5.14(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/focus':
         specifier: 3.17.1
         version: 3.17.1(react@18.2.0)
@@ -2028,7 +2062,7 @@ importers:
         version: 3.21.3(react@18.2.0)
       '@react-aria/overlays':
         specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -2062,7 +2096,7 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^11.0.22
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2188,7 +2222,7 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^11.0.22
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2316,7 +2350,7 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^11.0.28
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2441,7 +2475,7 @@ importers:
         version: 3.24.1(react@18.2.0)
       framer-motion:
         specifier: '>=10.17.0'
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       '@nextui-org/system':
         specifier: workspace:*
@@ -2589,7 +2623,7 @@ importers:
         version: 3.21.3(react@18.2.0)
       '@react-aria/table':
         specifier: 3.14.1
-        version: 3.14.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -2680,7 +2714,7 @@ importers:
         version: 3.21.3(react@18.2.0)
       '@react-aria/tabs':
         specifier: 3.9.1
-        version: 3.9.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -2723,7 +2757,7 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^11.0.22
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2756,7 +2790,7 @@ importers:
         version: 3.21.3(react@18.2.0)
       '@react-aria/overlays':
         specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/tooltip':
         specifier: 3.7.4
         version: 3.7.4(react@18.2.0)
@@ -2787,7 +2821,7 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^11.0.28
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -2968,7 +3002,7 @@ importers:
         version: 3.8.12(react@18.2.0)
       framer-motion:
         specifier: '>=10.17.0'
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
@@ -2996,7 +3030,7 @@ importers:
         version: 3.11.1(react@18.2.0)
       '@react-aria/overlays':
         specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -3009,7 +3043,7 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^11.0.22
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -3043,7 +3077,7 @@ importers:
         version: 18.2.0
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.3)
+        version: 0.1.20(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)))
 
   packages/core/theme:
     dependencies:
@@ -3082,7 +3116,7 @@ importers:
         version: 1.14.0
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.3)
+        version: 0.1.20(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)))
     devDependencies:
       '@types/color':
         specifier: ^3.0.3
@@ -3110,7 +3144,7 @@ importers:
         version: 2.2.0
       tailwindcss:
         specifier: ^3.4.0
-        version: 3.4.3(ts-node@10.9.2)
+        version: 3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5))
 
   packages/hooks/use-aria-accordion:
     dependencies:
@@ -3122,7 +3156,7 @@ importers:
         version: 3.17.1(react@18.2.0)
       '@react-aria/selection':
         specifier: 3.18.1
-        version: 3.18.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -3225,10 +3259,10 @@ importers:
         version: 3.21.3(react@18.2.0)
       '@react-aria/menu':
         specifier: 3.14.1
-        version: 3.14.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/selection':
         specifier: 3.18.1
-        version: 3.18.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -3259,7 +3293,7 @@ importers:
     dependencies:
       '@react-aria/overlays':
         specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -3293,13 +3327,13 @@ importers:
         version: 3.7.8(react@18.2.0)
       '@react-aria/listbox':
         specifier: 3.12.1
-        version: 3.12.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/menu':
         specifier: 3.14.1
-        version: 3.14.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/selection':
         specifier: 3.18.1
-        version: 3.18.1(react-dom@18.2.0)(react@18.2.0)
+        version: 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
@@ -3605,10 +3639,10 @@ importers:
         version: 7.6.17
       '@storybook/addon-docs':
         specifier: ^7.4.6
-        version: 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+        version: 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-essentials':
         specifier: ^7.4.6
-        version: 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+        version: 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-links':
         specifier: ^7.4.6
         version: 7.6.17(react@18.2.0)
@@ -3617,31 +3651,31 @@ importers:
         version: 7.6.17
       '@storybook/cli':
         specifier: ^7.4.6
-        version: 7.6.17
+        version: 7.6.17(encoding@0.1.13)
       '@storybook/react':
         specifier: ^7.4.6
-        version: 7.6.17(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)
+        version: 7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@4.9.5)
       '@storybook/react-vite':
         specifier: ^7.4.6
-        version: 7.6.17(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(vite@4.5.3)
+        version: 7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rollup@3.29.4)(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))
       '@storybook/theming':
         specifier: ^7.4.6
-        version: 7.6.17(react-dom@18.2.0)(react@18.2.0)
+        version: 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       autoprefixer:
         specifier: ^10.4.13
         version: 10.4.19(postcss@8.4.38)
       storybook:
         specifier: ^7.4.6
-        version: 7.6.17
+        version: 7.6.17(encoding@0.1.13)
       storybook-dark-mode:
         specifier: ^3.0.1
-        version: 3.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+        version: 3.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       tailwindcss:
         specifier: ^3.3.5
-        version: 3.4.3(ts-node@10.9.2)
+        version: 3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
       vite:
         specifier: ^4.4.7
-        version: 4.5.3(@types/node@15.14.9)
+        version: 4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3)
 
   packages/utilities/aria-utils:
     dependencies:
@@ -3697,7 +3731,7 @@ importers:
         version: 2.2.0
       framer-motion:
         specifier: ^11.0.22
-        version: 11.2.12(react-dom@18.2.0)(react@18.2.0)
+        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
         specifier: ^18.2.0
         version: 18.2.0
@@ -4760,10 +4794,6 @@ packages:
     peerDependencies:
       '@effect-ts/otel-node': '*'
     peerDependenciesMeta:
-      '@effect-ts/core':
-        optional: true
-      '@effect-ts/otel':
-        optional: true
       '@effect-ts/otel-node':
         optional: true
 
@@ -12861,9 +12891,6 @@ packages:
     resolution: {integrity: sha512-W+gxAq7aQ9dJIg/XLKGcRT0cvnStFAQHPaI0pvD0U2l6IVLueUAm3nwN7lkY62zZNmlvNx6jNtE4wlbS+CyqSg==}
     engines: {node: '>= 12.0.0'}
     hasBin: true
-    peerDependenciesMeta:
-      '@parcel/core':
-        optional: true
 
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
@@ -16545,9 +16572,9 @@ snapshots:
     dependencies:
       '@changesets/types': 5.2.1
 
-  '@changesets/changelog-github@0.4.6':
+  '@changesets/changelog-github@0.4.6(encoding@0.1.13)':
     dependencies:
-      '@changesets/get-github-info': 0.5.2
+      '@changesets/get-github-info': 0.5.2(encoding@0.1.13)
       '@changesets/types': 5.1.0
       dotenv: 8.6.0
     transitivePeerDependencies:
@@ -16611,10 +16638,10 @@ snapshots:
       fs-extra: 7.0.1
       semver: 7.6.0
 
-  '@changesets/get-github-info@0.5.2':
+  '@changesets/get-github-info@0.5.2(encoding@0.1.13)':
     dependencies:
       dataloader: 1.4.0
-      node-fetch: 2.7.0
+      node-fetch: 2.7.0(encoding@0.1.13)
     transitivePeerDependencies:
       - encoding
 
@@ -16773,7 +16800,7 @@ snapshots:
       outvariant: 1.4.0
       static-browser-server: 1.0.3
 
-  '@codesandbox/sandpack-react@2.13.8(@lezer/common@1.2.1)(react-dom@18.2.0)(react@18.2.0)':
+  '@codesandbox/sandpack-react@2.13.8(@lezer/common@1.2.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
       '@codemirror/commands': 6.3.3
@@ -16802,11 +16829,11 @@ snapshots:
   '@colors/colors@1.5.0':
     optional: true
 
-  '@commitlint/cli@17.8.1(@swc/core@1.4.13)':
+  '@commitlint/cli@17.8.1(@swc/core@1.4.13(@swc/helpers@0.5.9))':
     dependencies:
       '@commitlint/format': 17.8.1
       '@commitlint/lint': 17.8.1
-      '@commitlint/load': 17.8.1(@swc/core@1.4.13)
+      '@commitlint/load': 17.8.1(@swc/core@1.4.13(@swc/helpers@0.5.9))
       '@commitlint/read': 17.8.1
       '@commitlint/types': 17.8.1
       execa: 5.1.1
@@ -16855,7 +16882,7 @@ snapshots:
       '@commitlint/rules': 17.8.1
       '@commitlint/types': 17.8.1
 
-  '@commitlint/load@17.8.1(@swc/core@1.4.13)':
+  '@commitlint/load@17.8.1(@swc/core@1.4.13(@swc/helpers@0.5.9))':
     dependencies:
       '@commitlint/config-validator': 17.8.1
       '@commitlint/execute-rule': 17.8.1
@@ -16864,12 +16891,12 @@ snapshots:
       '@types/node': 20.5.1
       chalk: 4.1.2
       cosmiconfig: 8.3.6(typescript@4.9.5)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6)(ts-node@10.9.2)(typescript@4.9.5)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.9.5))(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.2(@swc/core@1.4.13)(@types/node@15.14.9)(typescript@4.9.5)
+      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)
       typescript: 4.9.5
     transitivePeerDependencies:
       - '@swc/core'
@@ -16944,7 +16971,6 @@ snapshots:
       '@contentlayer/utils': 0.3.4
       camel-case: 4.1.2
       comment-json: 4.2.3
-      esbuild: 0.20.2
       gray-matter: 4.0.3
       mdx-bundler: 9.2.1(esbuild@0.20.2)
       rehype-stringify: 9.0.4
@@ -16954,6 +16980,8 @@ snapshots:
       source-map-support: 0.5.21
       type-fest: 3.13.1
       unified: 10.1.2
+    optionalDependencies:
+      esbuild: 0.20.2
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
       - supports-color
@@ -16991,9 +17019,9 @@ snapshots:
   '@contentlayer/utils@0.3.4':
     dependencies:
       '@effect-ts/core': 0.60.5
-      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0)(@opentelemetry/sdk-trace-base@1.23.0)
-      '@effect-ts/otel-exporter-trace-otlp-grpc': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0)(@opentelemetry/exporter-trace-otlp-grpc@0.39.1)(@opentelemetry/sdk-trace-base@1.23.0)
-      '@effect-ts/otel-sdk-trace-node': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0)(@opentelemetry/sdk-trace-base@1.23.0)(@opentelemetry/sdk-trace-node@1.23.0)
+      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))
+      '@effect-ts/otel-exporter-trace-otlp-grpc': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/exporter-trace-otlp-grpc@0.39.1(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))
+      '@effect-ts/otel-sdk-trace-node': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-node@1.23.0(@opentelemetry/api@1.8.0))
       '@js-temporal/polyfill': 0.4.4
       '@opentelemetry/api': 1.8.0
       '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
@@ -17018,12 +17046,12 @@ snapshots:
 
   '@discoveryjs/json-ext@0.5.7': {}
 
-  '@docusaurus/types@2.0.0-beta.3(@swc/core@1.4.13)(esbuild@0.20.2)(webpack-cli@3.3.12)':
+  '@docusaurus/types@2.0.0-beta.3(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))':
     dependencies:
       commander: 5.1.0
       joi: 17.12.3
       querystring: 0.2.0
-      webpack: 5.91.0(@swc/core@1.4.13)(esbuild@0.20.2)(webpack-cli@3.3.12)
+      webpack: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))
       webpack-merge: 5.10.0
     transitivePeerDependencies:
       - '@swc/core'
@@ -17031,9 +17059,9 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/utils@2.0.0-beta.3(@swc/core@1.4.13)(esbuild@0.20.2)(webpack-cli@3.3.12)':
+  '@docusaurus/utils@2.0.0-beta.3(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))':
     dependencies:
-      '@docusaurus/types': 2.0.0-beta.3(@swc/core@1.4.13)(esbuild@0.20.2)(webpack-cli@3.3.12)
+      '@docusaurus/types': 2.0.0-beta.3(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))
       '@types/github-slugger': 1.3.0
       chalk: 4.1.2
       escape-string-regexp: 4.0.0
@@ -17052,25 +17080,25 @@ snapshots:
     dependencies:
       '@effect-ts/system': 0.57.5
 
-  '@effect-ts/otel-exporter-trace-otlp-grpc@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0)(@opentelemetry/exporter-trace-otlp-grpc@0.39.1)(@opentelemetry/sdk-trace-base@1.23.0)':
+  '@effect-ts/otel-exporter-trace-otlp-grpc@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/exporter-trace-otlp-grpc@0.39.1(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))':
     dependencies:
       '@effect-ts/core': 0.60.5
-      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0)(@opentelemetry/sdk-trace-base@1.23.0)
+      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))
       '@opentelemetry/api': 1.8.0
       '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
       '@opentelemetry/exporter-trace-otlp-grpc': 0.39.1(@opentelemetry/api@1.8.0)
       '@opentelemetry/sdk-trace-base': 1.23.0(@opentelemetry/api@1.8.0)
 
-  '@effect-ts/otel-sdk-trace-node@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0)(@opentelemetry/sdk-trace-base@1.23.0)(@opentelemetry/sdk-trace-node@1.23.0)':
+  '@effect-ts/otel-sdk-trace-node@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-node@1.23.0(@opentelemetry/api@1.8.0))':
     dependencies:
       '@effect-ts/core': 0.60.5
-      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0)(@opentelemetry/sdk-trace-base@1.23.0)
+      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))
       '@opentelemetry/api': 1.8.0
       '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
       '@opentelemetry/sdk-trace-base': 1.23.0(@opentelemetry/api@1.8.0)
       '@opentelemetry/sdk-trace-node': 1.23.0(@opentelemetry/api@1.8.0)
 
-  '@effect-ts/otel@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0)(@opentelemetry/sdk-trace-base@1.23.0)':
+  '@effect-ts/otel@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))':
     dependencies:
       '@effect-ts/core': 0.60.5
       '@opentelemetry/api': 1.8.0
@@ -17284,7 +17312,7 @@ snapshots:
       '@floating-ui/core': 1.6.0
       '@floating-ui/utils': 0.2.1
 
-  '@floating-ui/react-dom@2.0.8(react-dom@18.2.0)(react@18.2.0)':
+  '@floating-ui/react-dom@2.0.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@floating-ui/dom': 1.6.3
       react: 18.2.0
@@ -17402,7 +17430,7 @@ snapshots:
       jest-util: 28.1.3
       slash: 3.0.0
 
-  '@jest/core@28.1.3(ts-node@10.9.2)':
+  '@jest/core@28.1.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))':
     dependencies:
       '@jest/console': 28.1.3
       '@jest/reporters': 28.1.3
@@ -17416,7 +17444,7 @@ snapshots:
       exit: 0.1.2
       graceful-fs: 4.2.11
       jest-changed-files: 28.1.3
-      jest-config: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2)
+      jest-config: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
       jest-haste-map: 28.1.3
       jest-message-util: 28.1.3
       jest-regex-util: 28.0.2
@@ -17592,14 +17620,15 @@ snapshots:
       '@types/yargs': 17.0.32
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@4.9.5)(vite@4.5.3)':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))':
     dependencies:
       glob: 7.2.3
       glob-promise: 4.2.2(glob@7.2.3)
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@4.9.5)
+      vite: 4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3)
+    optionalDependencies:
       typescript: 4.9.5
-      vite: 4.5.3(@types/node@15.14.9)
 
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
@@ -18065,22 +18094,21 @@ snapshots:
 
   '@opentelemetry/semantic-conventions@1.23.0': {}
 
-  '@parcel/bundler-default@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/bundler-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
       '@parcel/graph': 3.2.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/rust': 2.12.0
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/cache@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
     dependencies:
-      '@parcel/core': 2.12.0
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
+      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/logger': 2.12.0
       '@parcel/utils': 2.12.0
       lmdb: 2.8.5
@@ -18091,47 +18119,46 @@ snapshots:
     dependencies:
       chalk: 4.1.2
 
-  '@parcel/compressor-raw@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/compressor-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/config-default@2.12.0(@parcel/core@2.12.0)(typescript@4.9.5)':
-    dependencies:
-      '@parcel/bundler-default': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/compressor-raw': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/core': 2.12.0
-      '@parcel/namer-default': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/optimizer-css': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/optimizer-htmlnano': 2.12.0(@parcel/core@2.12.0)(typescript@4.9.5)
-      '@parcel/optimizer-image': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/optimizer-svgo': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/optimizer-swc': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/packager-css': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/packager-html': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/packager-js': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/packager-raw': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/packager-svg': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/packager-wasm': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/resolver-default': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/runtime-browser-hmr': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/runtime-js': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/runtime-react-refresh': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/runtime-service-worker': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/transformer-babel': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/transformer-css': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/transformer-html': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/transformer-image': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/transformer-js': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/transformer-json': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/transformer-postcss': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/transformer-posthtml': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/transformer-raw': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/transformer-react-refresh-wrap': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/transformer-svg': 2.12.0(@parcel/core@2.12.0)
+  '@parcel/config-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5)':
+    dependencies:
+      '@parcel/bundler-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/compressor-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
+      '@parcel/namer-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/optimizer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/optimizer-htmlnano': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5)
+      '@parcel/optimizer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/optimizer-svgo': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/optimizer-swc': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
+      '@parcel/packager-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/packager-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/packager-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/packager-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/packager-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/packager-wasm': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/resolver-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/runtime-browser-hmr': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/runtime-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/runtime-react-refresh': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/runtime-service-worker': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/transformer-babel': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/transformer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/transformer-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/transformer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/transformer-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/transformer-json': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/transformer-postcss': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/transformer-posthtml': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/transformer-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/transformer-react-refresh-wrap': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/transformer-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
     transitivePeerDependencies:
       - '@swc/helpers'
       - cssnano
@@ -18143,23 +18170,23 @@ snapshots:
       - typescript
       - uncss
 
-  '@parcel/core@2.12.0':
+  '@parcel/core@2.12.0(@swc/helpers@0.5.9)':
     dependencies:
       '@mischnic/json-sourcemap': 0.1.1
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/diagnostic': 2.12.0
       '@parcel/events': 2.12.0
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/graph': 3.2.0
       '@parcel/logger': 2.12.0
-      '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/profiler': 2.12.0
       '@parcel/rust': 2.12.0
       '@parcel/source-map': 2.1.1
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       abortcontroller-polyfill: 1.7.5
       base-x: 3.0.9
       browserslist: 4.23.0
@@ -18180,14 +18207,14 @@ snapshots:
 
   '@parcel/events@2.12.0': {}
 
-  '@parcel/fs@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/fs@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
     dependencies:
-      '@parcel/core': 2.12.0
+      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
       '@parcel/rust': 2.12.0
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/utils': 2.12.0
       '@parcel/watcher': 2.4.1
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
     transitivePeerDependencies:
       - '@swc/helpers'
 
@@ -18204,20 +18231,19 @@ snapshots:
     dependencies:
       chalk: 4.1.2
 
-  '@parcel/namer-default@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/namer-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/node-resolver-core@3.3.0(@parcel/core@2.12.0)':
+  '@parcel/node-resolver-core@3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@mischnic/json-sourcemap': 0.1.1
       '@parcel/diagnostic': 2.12.0
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/rust': 2.12.0
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
@@ -18225,10 +18251,10 @@ snapshots:
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/optimizer-css@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/optimizer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       browserslist: 4.23.0
@@ -18236,18 +18262,16 @@ snapshots:
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/optimizer-htmlnano@2.12.0(@parcel/core@2.12.0)(typescript@4.9.5)':
+  '@parcel/optimizer-htmlnano@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
-      htmlnano: 2.1.0(svgo@2.8.0)(typescript@4.9.5)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      htmlnano: 2.1.0(postcss@8.4.38)(srcset@4.0.0)(svgo@2.8.0)(terser@5.30.3)(typescript@4.9.5)
       nullthrows: 1.1.1
       posthtml: 0.16.6
       svgo: 2.8.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
       - cssnano
       - postcss
       - purgecss
@@ -18257,121 +18281,111 @@ snapshots:
       - typescript
       - uncss
 
-  '@parcel/optimizer-image@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/optimizer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/core': 2.12.0
+      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/rust': 2.12.0
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0)
-    transitivePeerDependencies:
-      - '@swc/helpers'
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
 
-  '@parcel/optimizer-svgo@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/optimizer-svgo@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/utils': 2.12.0
       svgo: 2.8.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/optimizer-swc@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/optimizer-swc@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
-      '@swc/core': 1.4.13
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
       - '@swc/helpers'
 
-  '@parcel/package-manager@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/package-manager@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
     dependencies:
-      '@parcel/core': 2.12.0
+      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
       '@parcel/diagnostic': 2.12.0
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/logger': 2.12.0
-      '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0)
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0)
-      '@swc/core': 1.4.13
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
       semver: 7.6.0
     transitivePeerDependencies:
       - '@swc/helpers'
 
-  '@parcel/packager-css@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/packager-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       lightningcss: 1.24.1
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/packager-html@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/packager-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/packager-js@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/packager-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/rust': 2.12.0
       '@parcel/source-map': 2.1.1
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/utils': 2.12.0
       globals: 13.24.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/packager-raw@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/packager-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/packager-svg@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/packager-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/utils': 2.12.0
       posthtml: 0.16.6
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/packager-wasm@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/packager-wasm@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/plugin@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/plugin@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
   '@parcel/profiler@2.12.0':
     dependencies:
@@ -18379,79 +18393,71 @@ snapshots:
       '@parcel/events': 2.12.0
       chrome-trace-event: 1.0.3
 
-  '@parcel/reporter-cli@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/reporter-cli@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/utils': 2.12.0
       chalk: 4.1.2
       term-size: 2.2.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/reporter-dev-server@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/reporter-dev-server@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/utils': 2.12.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/reporter-tracer@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/reporter-tracer@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/utils': 2.12.0
       chrome-trace-event: 1.0.3
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/resolver-default@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/resolver-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0)
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/runtime-browser-hmr@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/runtime-browser-hmr@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/utils': 2.12.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/runtime-js@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/runtime-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/runtime-react-refresh@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/runtime-react-refresh@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/utils': 2.12.0
       react-error-overlay: 6.0.9
       react-refresh: 0.9.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/runtime-service-worker@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/runtime-service-worker@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
   '@parcel/rust@2.12.0': {}
 
@@ -18459,10 +18465,10 @@ snapshots:
     dependencies:
       detect-libc: 1.0.3
 
-  '@parcel/transformer-babel@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/transformer-babel@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       browserslist: 4.23.0
@@ -18471,12 +18477,11 @@ snapshots:
       semver: 7.6.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-css@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/transformer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
       browserslist: 4.23.0
@@ -18484,12 +18489,11 @@ snapshots:
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-html@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/transformer-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/rust': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
@@ -18499,45 +18503,41 @@ snapshots:
       srcset: 4.0.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-image@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/transformer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/core': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       nullthrows: 1.1.1
-    transitivePeerDependencies:
-      - '@swc/helpers'
 
-  '@parcel/transformer-js@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/transformer-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/core': 2.12.0
+      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/rust': 2.12.0
       '@parcel/source-map': 2.1.1
       '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@swc/helpers': 0.5.9
       browserslist: 4.23.0
       nullthrows: 1.1.1
       regenerator-runtime: 0.13.11
       semver: 7.6.0
 
-  '@parcel/transformer-json@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/transformer-json@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       json5: 2.2.3
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-postcss@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/transformer-postcss@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/rust': 2.12.0
       '@parcel/utils': 2.12.0
       clone: 2.1.2
@@ -18546,11 +18546,10 @@ snapshots:
       semver: 7.6.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-posthtml@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/transformer-posthtml@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
@@ -18559,28 +18558,25 @@ snapshots:
       semver: 7.6.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-raw@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/transformer-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-react-refresh-wrap@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/transformer-react-refresh-wrap@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/utils': 2.12.0
       react-refresh: 0.9.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/transformer-svg@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/transformer-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/rust': 2.12.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
@@ -18589,16 +18585,15 @@ snapshots:
       semver: 7.6.0
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/types@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/types@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
     dependencies:
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/diagnostic': 2.12.0
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
+      '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/source-map': 2.1.1
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       utility-types: 3.11.0
     transitivePeerDependencies:
       - '@parcel/core'
@@ -18671,13 +18666,13 @@ snapshots:
       '@parcel/watcher-win32-ia32': 2.4.1
       '@parcel/watcher-win32-x64': 2.4.1
 
-  '@parcel/workers@2.12.0(@parcel/core@2.12.0)':
+  '@parcel/workers@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
-      '@parcel/core': 2.12.0
+      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
       '@parcel/diagnostic': 2.12.0
       '@parcel/logger': 2.12.0
       '@parcel/profiler': 2.12.0
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/utils': 2.12.0
       nullthrows: 1.1.1
 
@@ -18733,26 +18728,28 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.24.4
 
-  '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
   '@radix-ui/react-compose-refs@1.0.0(react@18.2.0)':
     dependencies:
@@ -18762,8 +18759,9 @@ snapshots:
   '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   '@radix-ui/react-context@1.0.0(react@18.2.0)':
     dependencies:
@@ -18773,22 +18771,23 @@ snapshots:
   '@radix-ui/react-context@1.0.1(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
-  '@radix-ui/react-dialog@1.0.0(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-dialog@1.0.0(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/primitive': 1.0.0
       '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
       '@radix-ui/react-context': 1.0.0(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-focus-guards': 1.0.0(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-id': 1.0.0(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.0(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.0(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-slot': 1.0.0(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.0(react@18.2.0)
       aria-hidden: 1.2.4
@@ -18801,32 +18800,34 @@ snapshots:
   '@radix-ui/react-direction@1.0.1(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
-  '@radix-ui/react-dismissable-layer@1.0.0(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-dismissable-layer@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/primitive': 1.0.0
       '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
       '@radix-ui/react-use-escape-keydown': 1.0.0(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
   '@radix-ui/react-focus-guards@1.0.0(react@18.2.0)':
     dependencies:
@@ -18836,28 +18837,30 @@ snapshots:
   '@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
-  '@radix-ui/react-focus-scope@1.0.0(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-focus-scope@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
   '@radix-ui/react-id@1.0.0(react@18.2.0)':
     dependencies:
@@ -18869,44 +18872,47 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
-  '@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/rect': 1.0.1
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-portal@1.0.0(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-portal@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-presence@1.0.0(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-presence@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
@@ -18914,50 +18920,53 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-primitive@1.0.0(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-primitive@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-slot': 1.0.0(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-scroll-area@1.0.5(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-scroll-area@1.0.5(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/number': 1.0.1
@@ -18965,52 +18974,55 @@ snapshots:
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-select@1.2.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-select@1.2.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/number': 1.0.1
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       aria-hidden: 1.2.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-remove-scroll: 2.5.5(@types/react@18.2.8)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
   '@radix-ui/react-slot@1.0.0(react@18.2.0)':
     dependencies:
@@ -19022,49 +19034,53 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
-  '@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-toggle': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toggle': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-toolbar@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-toolbar@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-separator': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-toggle-group': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-separator': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toggle-group': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
   '@radix-ui/react-use-callback-ref@1.0.0(react@18.2.0)':
     dependencies:
@@ -19074,8 +19090,9 @@ snapshots:
   '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   '@radix-ui/react-use-controllable-state@1.0.0(react@18.2.0)':
     dependencies:
@@ -19087,8 +19104,9 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   '@radix-ui/react-use-escape-keydown@1.0.0(react@18.2.0)':
     dependencies:
@@ -19100,8 +19118,9 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   '@radix-ui/react-use-layout-effect@1.0.0(react@18.2.0)':
     dependencies:
@@ -19111,37 +19130,42 @@ snapshots:
   '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   '@radix-ui/react-use-previous@1.0.1(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/rect': 1.0.1
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   '@radix-ui/react-use-size@1.0.1(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
-  '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
   '@radix-ui/rect@1.0.1':
     dependencies:
@@ -19168,7 +19192,7 @@ snapshots:
       '@swc/helpers': 0.5.9
       react: 18.2.0
 
-  '@react-aria/calendar@3.5.8(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/calendar@3.5.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@internationalized/date': 3.5.4
       '@react-aria/i18n': 3.11.1(react@18.2.0)
@@ -19198,14 +19222,14 @@ snapshots:
       '@swc/helpers': 0.5.9
       react: 18.2.0
 
-  '@react-aria/combobox@3.9.1(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/combobox@3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/listbox': 3.12.1(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/listbox': 3.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/live-announcer': 3.3.4
-      '@react-aria/menu': 3.14.1(react-dom@18.2.0)(react@18.2.0)
-      '@react-aria/overlays': 3.22.1(react-dom@18.2.0)(react@18.2.0)
-      '@react-aria/selection': 3.18.1(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/menu': 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/overlays': 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/selection': 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/textfield': 3.14.5(react@18.2.0)
       '@react-aria/utils': 3.24.1(react@18.2.0)
       '@react-stately/collections': 3.10.7(react@18.2.0)
@@ -19218,7 +19242,7 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/datepicker@3.10.1(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/datepicker@3.10.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@internationalized/date': 3.5.4
       '@internationalized/number': 3.5.3
@@ -19228,7 +19252,7 @@ snapshots:
       '@react-aria/i18n': 3.11.1(react@18.2.0)
       '@react-aria/interactions': 3.21.3(react@18.2.0)
       '@react-aria/label': 3.7.8(react@18.2.0)
-      '@react-aria/spinbutton': 3.6.5(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/spinbutton': 3.6.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils': 3.24.1(react@18.2.0)
       '@react-stately/datepicker': 3.9.4(react@18.2.0)
       '@react-stately/form': 3.0.3(react@18.2.0)
@@ -19241,10 +19265,10 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/dialog@3.5.14(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/dialog@3.5.14(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/overlays': 3.22.1(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/overlays': 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils': 3.24.1(react@18.2.0)
       '@react-types/dialog': 3.5.10(react@18.2.0)
       '@react-types/shared': 3.23.1(react@18.2.0)
@@ -19270,13 +19294,13 @@ snapshots:
       '@swc/helpers': 0.5.9
       react: 18.2.0
 
-  '@react-aria/grid@3.9.1(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/grid@3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/focus': 3.17.1(react@18.2.0)
       '@react-aria/i18n': 3.11.1(react@18.2.0)
       '@react-aria/interactions': 3.21.3(react@18.2.0)
       '@react-aria/live-announcer': 3.3.4
-      '@react-aria/selection': 3.18.1(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/selection': 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils': 3.24.1(react@18.2.0)
       '@react-stately/collections': 3.10.7(react@18.2.0)
       '@react-stately/grid': 3.8.7(react@18.2.0)
@@ -19326,11 +19350,11 @@ snapshots:
       '@swc/helpers': 0.5.9
       react: 18.2.0
 
-  '@react-aria/listbox@3.12.1(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/listbox@3.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/interactions': 3.21.3(react@18.2.0)
       '@react-aria/label': 3.7.8(react@18.2.0)
-      '@react-aria/selection': 3.18.1(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/selection': 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils': 3.24.1(react@18.2.0)
       '@react-stately/collections': 3.10.7(react@18.2.0)
       '@react-stately/list': 3.10.5(react@18.2.0)
@@ -19344,13 +19368,13 @@ snapshots:
     dependencies:
       '@swc/helpers': 0.5.9
 
-  '@react-aria/menu@3.14.1(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/menu@3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/focus': 3.17.1(react@18.2.0)
       '@react-aria/i18n': 3.11.1(react@18.2.0)
       '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/overlays': 3.22.1(react-dom@18.2.0)(react@18.2.0)
-      '@react-aria/selection': 3.18.1(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/overlays': 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/selection': 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils': 3.24.1(react@18.2.0)
       '@react-stately/collections': 3.10.7(react@18.2.0)
       '@react-stately/menu': 3.7.1(react@18.2.0)
@@ -19362,7 +19386,7 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/overlays@3.22.1(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/overlays@3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/focus': 3.17.1(react@18.2.0)
       '@react-aria/i18n': 3.11.1(react@18.2.0)
@@ -19402,7 +19426,7 @@ snapshots:
       '@swc/helpers': 0.5.9
       react: 18.2.0
 
-  '@react-aria/selection@3.18.1(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/selection@3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/focus': 3.17.1(react@18.2.0)
       '@react-aria/i18n': 3.11.1(react@18.2.0)
@@ -19427,7 +19451,7 @@ snapshots:
       '@swc/helpers': 0.5.9
       react: 18.2.0
 
-  '@react-aria/spinbutton@3.6.5(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/spinbutton@3.6.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/i18n': 3.11.1(react@18.2.0)
       '@react-aria/live-announcer': 3.3.4
@@ -19451,10 +19475,10 @@ snapshots:
       '@swc/helpers': 0.5.9
       react: 18.2.0
 
-  '@react-aria/table@3.14.1(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/table@3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/grid': 3.9.1(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/grid': 3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/i18n': 3.11.1(react@18.2.0)
       '@react-aria/interactions': 3.21.3(react@18.2.0)
       '@react-aria/live-announcer': 3.3.4
@@ -19472,11 +19496,11 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/tabs@3.9.1(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/tabs@3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/focus': 3.17.1(react@18.2.0)
       '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/selection': 3.18.1(react-dom@18.2.0)(react@18.2.0)
+      '@react-aria/selection': 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils': 3.24.1(react@18.2.0)
       '@react-stately/tabs': 3.6.6(react@18.2.0)
       '@react-types/shared': 3.23.1(react@18.2.0)
@@ -19528,7 +19552,7 @@ snapshots:
       clsx: 2.1.0
       react: 18.2.0
 
-  '@react-aria/virtualizer@3.10.1(react-dom@18.2.0)(react@18.2.0)':
+  '@react-aria/virtualizer@3.10.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@react-aria/i18n': 3.11.1(react@18.2.0)
       '@react-aria/interactions': 3.21.3(react@18.2.0)
@@ -19907,11 +19931,13 @@ snapshots:
     dependencies:
       react: 18.2.0
 
-  '@rollup/pluginutils@5.1.0':
+  '@rollup/pluginutils@5.1.0(rollup@3.29.4)':
     dependencies:
       '@types/estree': 1.0.5
       estree-walker: 2.0.2
       picomatch: 2.3.1
+    optionalDependencies:
+      rollup: 3.29.4
 
   '@rushstack/eslint-patch@1.10.2': {}
 
@@ -19980,9 +20006,9 @@ snapshots:
       memoizerific: 1.11.3
       ts-dedent: 2.2.0
 
-  '@storybook/addon-controls@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@storybook/addon-controls@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@storybook/blocks': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/blocks': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       lodash: 4.17.21
       ts-dedent: 2.2.0
     transitivePeerDependencies:
@@ -19993,13 +20019,13 @@ snapshots:
       - react-dom
       - supports-color
 
-  '@storybook/addon-docs@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@storybook/addon-docs@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@jest/transform': 29.7.0
       '@mdx-js/react': 2.3.0(react@18.2.0)
-      '@storybook/blocks': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/blocks': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/client-logger': 7.6.17
-      '@storybook/components': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/csf-plugin': 7.6.17
       '@storybook/csf-tools': 7.6.17
       '@storybook/global': 5.0.0
@@ -20007,8 +20033,8 @@ snapshots:
       '@storybook/node-logger': 7.6.17
       '@storybook/postinstall': 7.6.17
       '@storybook/preview-api': 7.6.17
-      '@storybook/react-dom-shim': 7.6.17(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/react-dom-shim': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/theming': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/types': 7.6.17
       fs-extra: 11.2.0
       react: 18.2.0
@@ -20022,19 +20048,19 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/addon-essentials@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@storybook/addon-essentials@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@storybook/addon-actions': 7.6.17
       '@storybook/addon-backgrounds': 7.6.17
-      '@storybook/addon-controls': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/addon-docs': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addon-controls': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/addon-docs': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/addon-highlight': 7.6.17
       '@storybook/addon-measure': 7.6.17
       '@storybook/addon-outline': 7.6.17
       '@storybook/addon-toolbars': 7.6.17
       '@storybook/addon-viewport': 7.6.17
-      '@storybook/core-common': 7.6.17
-      '@storybook/manager-api': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/core-common': 7.6.17(encoding@0.1.13)
+      '@storybook/manager-api': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/node-logger': 7.6.17
       '@storybook/preview-api': 7.6.17
       react: 18.2.0
@@ -20054,8 +20080,9 @@ snapshots:
     dependencies:
       '@storybook/csf': 0.1.4
       '@storybook/global': 5.0.0
-      react: 18.2.0
       ts-dedent: 2.2.0
+    optionalDependencies:
+      react: 18.2.0
 
   '@storybook/addon-mdx-gfm@7.6.17':
     dependencies:
@@ -20081,27 +20108,27 @@ snapshots:
     dependencies:
       memoizerific: 1.11.3
 
-  '@storybook/addons@7.6.17(react-dom@18.2.0)(react@18.2.0)':
+  '@storybook/addons@7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@storybook/manager-api': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/manager-api': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/preview-api': 7.6.17
       '@storybook/types': 7.6.17
     transitivePeerDependencies:
       - react
       - react-dom
 
-  '@storybook/blocks@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@storybook/blocks@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@storybook/channels': 7.6.17
       '@storybook/client-logger': 7.6.17
-      '@storybook/components': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/core-events': 7.6.17
       '@storybook/csf': 0.1.4
-      '@storybook/docs-tools': 7.6.17
+      '@storybook/docs-tools': 7.6.17(encoding@0.1.13)
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/manager-api': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/preview-api': 7.6.17
-      '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/theming': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/types': 7.6.17
       '@types/lodash': 4.17.5
       color-convert: 2.0.1
@@ -20111,7 +20138,7 @@ snapshots:
       memoizerific: 1.11.3
       polished: 4.3.1
       react: 18.2.0
-      react-colorful: 5.6.1(react-dom@18.2.0)(react@18.2.0)
+      react-colorful: 5.6.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-dom: 18.2.0(react@18.2.0)
       telejson: 7.2.0
       tocbot: 4.25.0
@@ -20123,10 +20150,10 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/builder-manager@7.6.17':
+  '@storybook/builder-manager@7.6.17(encoding@0.1.13)':
     dependencies:
       '@fal-works/esbuild-plugin-global-externals': 2.1.2
-      '@storybook/core-common': 7.6.17
+      '@storybook/core-common': 7.6.17(encoding@0.1.13)
       '@storybook/manager': 7.6.17
       '@storybook/node-logger': 7.6.17
       '@types/ejs': 3.1.5
@@ -20145,11 +20172,11 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/builder-vite@7.6.17(typescript@4.9.5)(vite@4.5.3)':
+  '@storybook/builder-vite@7.6.17(encoding@0.1.13)(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))':
     dependencies:
       '@storybook/channels': 7.6.17
       '@storybook/client-logger': 7.6.17
-      '@storybook/core-common': 7.6.17
+      '@storybook/core-common': 7.6.17(encoding@0.1.13)
       '@storybook/csf-plugin': 7.6.17
       '@storybook/node-logger': 7.6.17
       '@storybook/preview': 7.6.17
@@ -20163,8 +20190,9 @@ snapshots:
       fs-extra: 11.2.0
       magic-string: 0.30.9
       rollup: 3.29.4
+      vite: 4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3)
+    optionalDependencies:
       typescript: 4.9.5
-      vite: 4.5.3(@types/node@15.14.9)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -20178,19 +20206,19 @@ snapshots:
       telejson: 7.2.0
       tiny-invariant: 1.3.3
 
-  '@storybook/cli@7.6.17':
+  '@storybook/cli@7.6.17(encoding@0.1.13)':
     dependencies:
       '@babel/core': 7.24.4
       '@babel/preset-env': 7.24.4(@babel/core@7.24.4)
       '@babel/types': 7.24.0
       '@ndelangen/get-tarball': 3.0.9
       '@storybook/codemod': 7.6.17
-      '@storybook/core-common': 7.6.17
+      '@storybook/core-common': 7.6.17(encoding@0.1.13)
       '@storybook/core-events': 7.6.17
-      '@storybook/core-server': 7.6.17
+      '@storybook/core-server': 7.6.17(encoding@0.1.13)
       '@storybook/csf-tools': 7.6.17
       '@storybook/node-logger': 7.6.17
-      '@storybook/telemetry': 7.6.17
+      '@storybook/telemetry': 7.6.17(encoding@0.1.13)
       '@storybook/types': 7.6.17
       '@types/semver': 7.5.8
       '@yarnpkg/fslib': 2.10.3
@@ -20208,7 +20236,7 @@ snapshots:
       get-port: 5.1.1
       giget: 1.2.3
       globby: 11.1.0
-      jscodeshift: 0.15.2(@babel/preset-env@7.24.4)
+      jscodeshift: 0.15.2(@babel/preset-env@7.24.4(@babel/core@7.24.4))
       leven: 3.1.0
       ora: 5.4.1
       prettier: 2.8.8
@@ -20242,26 +20270,26 @@ snapshots:
       '@types/cross-spawn': 6.0.6
       cross-spawn: 7.0.3
       globby: 11.1.0
-      jscodeshift: 0.15.2(@babel/preset-env@7.24.4)
+      jscodeshift: 0.15.2(@babel/preset-env@7.24.4(@babel/core@7.24.4))
       lodash: 4.17.21
       prettier: 2.8.8
       recast: 0.23.6
     transitivePeerDependencies:
       - supports-color
 
-  '@storybook/components@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@storybook/components@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@radix-ui/react-select': 1.2.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-toolbar': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-select': 1.2.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-toolbar': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/client-logger': 7.6.17
       '@storybook/csf': 0.1.4
       '@storybook/global': 5.0.0
-      '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/theming': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/types': 7.6.17
       memoizerific: 1.11.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      use-resize-observer: 9.1.0(react-dom@18.2.0)(react@18.2.0)
+      use-resize-observer: 9.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       util-deprecate: 1.0.2
     transitivePeerDependencies:
       - '@types/react'
@@ -20272,7 +20300,7 @@ snapshots:
       '@storybook/client-logger': 7.6.17
       '@storybook/preview-api': 7.6.17
 
-  '@storybook/core-common@7.6.17':
+  '@storybook/core-common@7.6.17(encoding@0.1.13)':
     dependencies:
       '@storybook/core-events': 7.6.17
       '@storybook/node-logger': 7.6.17
@@ -20291,7 +20319,7 @@ snapshots:
       glob: 10.3.12
       handlebars: 4.7.8
       lazy-universal-dotenv: 4.0.0
-      node-fetch: 2.7.0
+      node-fetch: 2.7.0(encoding@0.1.13)
       picomatch: 2.3.1
       pkg-dir: 5.0.0
       pretty-hrtime: 1.0.3
@@ -20305,13 +20333,13 @@ snapshots:
     dependencies:
       ts-dedent: 2.2.0
 
-  '@storybook/core-server@7.6.17':
+  '@storybook/core-server@7.6.17(encoding@0.1.13)':
     dependencies:
       '@aw-web-design/x-default-browser': 1.4.126
       '@discoveryjs/json-ext': 0.5.7
-      '@storybook/builder-manager': 7.6.17
+      '@storybook/builder-manager': 7.6.17(encoding@0.1.13)
       '@storybook/channels': 7.6.17
-      '@storybook/core-common': 7.6.17
+      '@storybook/core-common': 7.6.17(encoding@0.1.13)
       '@storybook/core-events': 7.6.17
       '@storybook/csf': 0.1.4
       '@storybook/csf-tools': 7.6.17
@@ -20320,7 +20348,7 @@ snapshots:
       '@storybook/manager': 7.6.17
       '@storybook/node-logger': 7.6.17
       '@storybook/preview-api': 7.6.17
-      '@storybook/telemetry': 7.6.17
+      '@storybook/telemetry': 7.6.17(encoding@0.1.13)
       '@storybook/types': 7.6.17
       '@types/detect-port': 1.3.5
       '@types/node': 18.19.31
@@ -20381,9 +20409,9 @@ snapshots:
 
   '@storybook/docs-mdx@0.1.0': {}
 
-  '@storybook/docs-tools@7.6.17':
+  '@storybook/docs-tools@7.6.17(encoding@0.1.13)':
     dependencies:
-      '@storybook/core-common': 7.6.17
+      '@storybook/core-common': 7.6.17(encoding@0.1.13)
       '@storybook/preview-api': 7.6.17
       '@storybook/types': 7.6.17
       '@types/doctrine': 0.0.3
@@ -20396,7 +20424,7 @@ snapshots:
 
   '@storybook/global@5.0.0': {}
 
-  '@storybook/manager-api@7.6.17(react-dom@18.2.0)(react@18.2.0)':
+  '@storybook/manager-api@7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@storybook/channels': 7.6.17
       '@storybook/client-logger': 7.6.17
@@ -20404,7 +20432,7 @@ snapshots:
       '@storybook/csf': 0.1.4
       '@storybook/global': 5.0.0
       '@storybook/router': 7.6.17
-      '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/theming': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/types': 7.6.17
       dequal: 2.0.3
       lodash: 4.17.21
@@ -20443,23 +20471,23 @@ snapshots:
 
   '@storybook/preview@7.6.17': {}
 
-  '@storybook/react-dom-shim@7.6.17(react-dom@18.2.0)(react@18.2.0)':
+  '@storybook/react-dom-shim@7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@storybook/react-vite@7.6.17(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(vite@4.5.3)':
+  '@storybook/react-vite@7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rollup@3.29.4)(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@4.9.5)(vite@4.5.3)
-      '@rollup/pluginutils': 5.1.0
-      '@storybook/builder-vite': 7.6.17(typescript@4.9.5)(vite@4.5.3)
-      '@storybook/react': 7.6.17(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)
-      '@vitejs/plugin-react': 3.1.0(vite@4.5.3)
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      '@storybook/builder-vite': 7.6.17(encoding@0.1.13)(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))
+      '@storybook/react': 7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@4.9.5)
+      '@vitejs/plugin-react': 3.1.0(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))
       magic-string: 0.30.9
       react: 18.2.0
       react-docgen: 7.0.3
       react-dom: 18.2.0(react@18.2.0)
-      vite: 4.5.3(@types/node@15.14.9)
+      vite: 4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3)
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - encoding
@@ -20468,14 +20496,14 @@ snapshots:
       - typescript
       - vite-plugin-glimmerx
 
-  '@storybook/react@7.6.17(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)':
+  '@storybook/react@7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@4.9.5)':
     dependencies:
       '@storybook/client-logger': 7.6.17
       '@storybook/core-client': 7.6.17
-      '@storybook/docs-tools': 7.6.17
+      '@storybook/docs-tools': 7.6.17(encoding@0.1.13)
       '@storybook/global': 5.0.0
       '@storybook/preview-api': 7.6.17
-      '@storybook/react-dom-shim': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/react-dom-shim': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/types': 7.6.17
       '@types/escodegen': 0.0.6
       '@types/estree': 0.0.51
@@ -20489,11 +20517,12 @@ snapshots:
       prop-types: 15.8.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-element-to-jsx-string: 15.0.0(react-dom@18.2.0)(react@18.2.0)
+      react-element-to-jsx-string: 15.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       ts-dedent: 2.2.0
       type-fest: 2.19.0
-      typescript: 4.9.5
       util-deprecate: 1.0.2
+    optionalDependencies:
+      typescript: 4.9.5
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -20504,10 +20533,10 @@ snapshots:
       memoizerific: 1.11.3
       qs: 6.12.1
 
-  '@storybook/telemetry@7.6.17':
+  '@storybook/telemetry@7.6.17(encoding@0.1.13)':
     dependencies:
       '@storybook/client-logger': 7.6.17
-      '@storybook/core-common': 7.6.17
+      '@storybook/core-common': 7.6.17(encoding@0.1.13)
       '@storybook/csf-tools': 7.6.17
       chalk: 4.1.2
       detect-package-manager: 2.0.1
@@ -20518,7 +20547,7 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/theming@7.6.17(react-dom@18.2.0)(react@18.2.0)':
+  '@storybook/theming@7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
       '@storybook/client-logger': 7.6.17
@@ -20534,27 +20563,27 @@ snapshots:
       '@types/express': 4.17.21
       file-system-cache: 2.3.0
 
-  '@swc-node/core@1.13.0(@swc/core@1.4.13)(@swc/types@0.1.6)':
+  '@swc-node/core@1.13.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)':
     dependencies:
-      '@swc/core': 1.4.13
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
       '@swc/types': 0.1.6
 
-  '@swc-node/jest@1.8.0(@swc/core@1.4.13)(@swc/types@0.1.6)(typescript@4.9.5)':
+  '@swc-node/jest@1.8.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)(typescript@4.9.5)':
     dependencies:
       '@node-rs/xxhash': 1.7.0
-      '@swc-node/core': 1.13.0(@swc/core@1.4.13)(@swc/types@0.1.6)
-      '@swc-node/register': 1.9.0(@swc/core@1.4.13)(@swc/types@0.1.6)(typescript@4.9.5)
-      '@swc/core': 1.4.13
+      '@swc-node/core': 1.13.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)
+      '@swc-node/register': 1.9.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)(typescript@4.9.5)
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
       '@swc/types': 0.1.6
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
 
-  '@swc-node/register@1.9.0(@swc/core@1.4.13)(@swc/types@0.1.6)(typescript@4.9.5)':
+  '@swc-node/register@1.9.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)(typescript@4.9.5)':
     dependencies:
-      '@swc-node/core': 1.13.0(@swc/core@1.4.13)(@swc/types@0.1.6)
+      '@swc-node/core': 1.13.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)
       '@swc-node/sourcemap-support': 0.5.0
-      '@swc/core': 1.4.13
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
       colorette: 2.0.20
       debug: 4.3.4
       pirates: 4.0.6
@@ -20599,7 +20628,7 @@ snapshots:
   '@swc/core-win32-x64-msvc@1.4.13':
     optional: true
 
-  '@swc/core@1.4.13':
+  '@swc/core@1.4.13(@swc/helpers@0.5.9)':
     dependencies:
       '@swc/counter': 0.1.3
       '@swc/types': 0.1.6
@@ -20614,6 +20643,7 @@ snapshots:
       '@swc/core-win32-arm64-msvc': 1.4.13
       '@swc/core-win32-ia32-msvc': 1.4.13
       '@swc/core-win32-x64-msvc': 1.4.13
+      '@swc/helpers': 0.5.9
 
   '@swc/counter@0.1.3': {}
 
@@ -20625,10 +20655,10 @@ snapshots:
     dependencies:
       tslib: 2.6.2
 
-  '@swc/jest@0.2.36(@swc/core@1.4.13)':
+  '@swc/jest@0.2.36(@swc/core@1.4.13(@swc/helpers@0.5.9))':
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
-      '@swc/core': 1.4.13
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
       '@swc/counter': 0.1.3
       jsonc-parser: 3.2.1
 
@@ -20640,13 +20670,13 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@tailwindcss/typography@0.5.12(tailwindcss@3.4.3)':
+  '@tailwindcss/typography@0.5.12(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)))':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.3(ts-node@10.9.2)
+      tailwindcss: 3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5))
 
   '@testing-library/dom@8.20.1':
     dependencies:
@@ -20682,15 +20712,16 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/react-hooks@8.0.1(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)':
+  '@testing-library/react-hooks@8.0.1(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
-      '@types/react': 18.2.8
       react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
       react-error-boundary: 3.1.4(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
+      react-dom: 18.2.0(react@18.2.0)
 
-  '@testing-library/react@14.3.1(react-dom@18.2.0)(react@18.2.0)':
+  '@testing-library/react@14.3.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@testing-library/dom': 9.3.4
@@ -21045,7 +21076,7 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0)(eslint@7.32.0)(typescript@4.9.5)':
+  '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)':
     dependencies:
       '@eslint-community/regexpp': 4.10.0
       '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
@@ -21059,6 +21090,7 @@ snapshots:
       natural-compare-lite: 1.4.0
       semver: 7.6.0
       tsutils: 3.21.0(typescript@4.9.5)
+    optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
@@ -21111,6 +21143,7 @@ snapshots:
       '@typescript-eslint/typescript-estree': 3.10.1(typescript@3.9.10)
       eslint: 7.32.0
       eslint-visitor-keys: 1.3.0
+    optionalDependencies:
       typescript: 3.9.10
     transitivePeerDependencies:
       - supports-color
@@ -21122,6 +21155,7 @@ snapshots:
       '@typescript-eslint/typescript-estree': 4.33.0(typescript@4.9.5)
       debug: 4.3.4
       eslint: 7.32.0
+    optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
@@ -21133,6 +21167,7 @@ snapshots:
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@4.9.5)
       debug: 4.3.4
       eslint: 7.32.0
+    optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
@@ -21154,6 +21189,7 @@ snapshots:
       debug: 4.3.4
       eslint: 7.32.0
       tsutils: 3.21.0(typescript@4.9.5)
+    optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
@@ -21179,6 +21215,7 @@ snapshots:
       lodash: 4.17.21
       semver: 7.6.0
       tsutils: 3.21.0(typescript@3.9.10)
+    optionalDependencies:
       typescript: 3.9.10
     transitivePeerDependencies:
       - supports-color
@@ -21192,6 +21229,7 @@ snapshots:
       is-glob: 4.0.3
       semver: 7.6.0
       tsutils: 3.21.0(typescript@4.9.5)
+    optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
@@ -21205,6 +21243,7 @@ snapshots:
       is-glob: 4.0.3
       semver: 7.6.0
       tsutils: 3.21.0(typescript@4.9.5)
+    optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
@@ -21238,20 +21277,21 @@ snapshots:
       '@typescript-eslint/types': 5.62.0
       eslint-visitor-keys: 3.4.3
 
-  '@vercel/analytics@1.2.2(next@13.5.1)(react@18.2.0)':
+  '@vercel/analytics@1.2.2(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react@18.2.0)':
     dependencies:
-      next: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
-      react: 18.2.0
       server-only: 0.0.1
+    optionalDependencies:
+      next: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react: 18.2.0
 
-  '@vitejs/plugin-react@3.1.0(vite@4.5.3)':
+  '@vitejs/plugin-react@3.1.0(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))':
     dependencies:
       '@babel/core': 7.24.4
       '@babel/plugin-transform-react-jsx-self': 7.24.1(@babel/core@7.24.4)
       '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.4)
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 4.5.3(@types/node@15.14.9)
+      vite: 4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3)
     transitivePeerDependencies:
       - supports-color
 
@@ -22304,9 +22344,9 @@ snapshots:
 
   clsx@2.1.0: {}
 
-  cmdk@0.2.1(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0):
+  cmdk@0.2.1(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@radix-ui/react-dialog': 1.0.0(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dialog': 1.0.0(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
@@ -22521,11 +22561,11 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6)(ts-node@10.9.2)(typescript@4.9.5):
+  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.9.5))(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5):
     dependencies:
       '@types/node': 20.5.1
       cosmiconfig: 8.3.6(typescript@4.9.5)
-      ts-node: 10.9.2(@swc/core@1.4.13)(@types/node@15.14.9)(typescript@4.9.5)
+      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)
       typescript: 4.9.5
 
   cosmiconfig@8.3.6(typescript@4.9.5):
@@ -22534,6 +22574,7 @@ snapshots:
       js-yaml: 4.1.0
       parse-json: 5.2.0
       path-type: 4.0.0
+    optionalDependencies:
       typescript: 4.9.5
 
   create-react-class@15.7.0:
@@ -22663,6 +22704,7 @@ snapshots:
   debug@2.6.9(supports-color@6.1.0):
     dependencies:
       ms: 2.0.0
+    optionalDependencies:
       supports-color: 6.1.0
 
   debug@3.2.7:
@@ -23253,19 +23295,19 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-airbnb-base@14.2.1(eslint-plugin-import@2.29.1)(eslint@7.32.0):
+  eslint-config-airbnb-base@14.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
       confusing-browser-globals: 1.0.11
       eslint: 7.32.0
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
       object.assign: 4.1.5
       object.entries: 1.1.8
 
-  eslint-config-airbnb-typescript@12.3.1(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.34.1)(eslint@7.32.0)(typescript@4.9.5):
+  eslint-config-airbnb-typescript@12.3.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5):
     dependencies:
       '@typescript-eslint/parser': 4.33.0(eslint@7.32.0)(typescript@4.9.5)
-      eslint-config-airbnb: 18.2.1(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.34.1)(eslint@7.32.0)
-      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.29.1)(eslint@7.32.0)
+      eslint-config-airbnb: 18.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)
+      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0)
     transitivePeerDependencies:
       - eslint
       - eslint-plugin-import
@@ -23275,11 +23317,11 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-config-airbnb@18.2.1(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.34.1)(eslint@7.32.0):
+  eslint-config-airbnb@18.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
       eslint: 7.32.0
-      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.29.1)(eslint@7.32.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@7.32.0)
       eslint-plugin-react: 7.34.1(eslint@7.32.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@7.32.0)
@@ -23293,11 +23335,12 @@ snapshots:
       '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@7.32.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@7.32.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@7.32.0)
       eslint-plugin-react: 7.34.1(eslint@7.32.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@7.32.0)
+    optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
       - eslint-import-resolver-webpack
@@ -23307,24 +23350,25 @@ snapshots:
     dependencies:
       eslint: 7.32.0
 
-  eslint-config-react-app@6.0.0(@typescript-eslint/eslint-plugin@5.62.0)(@typescript-eslint/parser@5.62.0)(babel-eslint@10.1.0)(eslint-plugin-flowtype@5.10.0)(eslint-plugin-import@2.29.1)(eslint-plugin-jest@24.7.0)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.34.1)(eslint@7.32.0)(typescript@4.9.5):
+  eslint-config-react-app@6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@7.32.0)(typescript@4.9.5)
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
       '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
       babel-eslint: 10.1.0(eslint@7.32.0)
       confusing-browser-globals: 1.0.11
       eslint: 7.32.0
       eslint-plugin-flowtype: 5.10.0(eslint@7.32.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
-      eslint-plugin-jest: 24.7.0(@typescript-eslint/eslint-plugin@5.62.0)(eslint@7.32.0)(typescript@4.9.5)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@7.32.0)
       eslint-plugin-react: 7.34.1(eslint@7.32.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@7.32.0)
+    optionalDependencies:
+      eslint-plugin-jest: 24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
       typescript: 4.9.5
 
-  eslint-config-ts-lambdas@1.2.3(@typescript-eslint/eslint-plugin@5.62.0)(@typescript-eslint/parser@5.62.0)(eslint@7.32.0)(typescript@4.9.5):
+  eslint-config-ts-lambdas@1.2.3(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@7.32.0)(typescript@4.9.5)
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
       '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
       eslint: 7.32.0
       typescript: 4.9.5
@@ -23341,7 +23385,7 @@ snapshots:
     dependencies:
       debug: 4.3.4
       eslint: 7.32.0
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
       glob: 7.2.3
       is-glob: 4.0.3
       resolve: 1.22.8
@@ -23349,13 +23393,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@7.32.0):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@7.32.0):
     dependencies:
       debug: 4.3.4
       enhanced-resolve: 5.16.0
       eslint: 7.32.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@7.32.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@7.32.0))(eslint@7.32.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
       fast-glob: 3.3.2
       get-tsconfig: 4.7.3
       is-core-module: 2.13.1
@@ -23366,7 +23410,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-loader@4.0.2(eslint@7.32.0)(webpack@5.91.0):
+  eslint-loader@4.0.2(eslint@7.32.0)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)):
     dependencies:
       eslint: 7.32.0
       find-cache-dir: 3.3.2
@@ -23374,25 +23418,27 @@ snapshots:
       loader-utils: 2.0.4
       object-hash: 2.2.0
       schema-utils: 2.7.1
-      webpack: 5.91.0(@swc/core@1.4.13)(esbuild@0.15.18)(webpack-cli@3.3.12)
+      webpack: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
       debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@7.32.0):
+  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
       debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@7.32.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@7.32.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -23408,9 +23454,8 @@ snapshots:
       lodash: 4.17.21
       string-natural-compare: 3.0.1
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0):
     dependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
       array.prototype.flat: 1.3.2
@@ -23419,7 +23464,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0))(eslint@7.32.0)
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -23429,16 +23474,19 @@ snapshots:
       object.values: 1.2.0
       semver: 6.3.1
       tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0)(eslint@7.32.0)(typescript@4.9.5):
+  eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@7.32.0)(typescript@4.9.5)
       '@typescript-eslint/experimental-utils': 4.33.0(eslint@7.32.0)(typescript@4.9.5)
       eslint: 7.32.0
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -23473,12 +23521,13 @@ snapshots:
       resolve: 1.22.8
       semver: 6.3.1
 
-  eslint-plugin-prettier@4.2.1(eslint-config-prettier@8.10.0)(eslint@7.32.0)(prettier@2.8.8):
+  eslint-plugin-prettier@4.2.1(eslint-config-prettier@8.10.0(eslint@7.32.0))(eslint@7.32.0)(prettier@2.8.8):
     dependencies:
       eslint: 7.32.0
-      eslint-config-prettier: 8.10.0(eslint@7.32.0)
       prettier: 2.8.8
       prettier-linter-helpers: 1.0.0
+    optionalDependencies:
+      eslint-config-prettier: 8.10.0(eslint@7.32.0)
 
   eslint-plugin-promise@6.1.1(eslint@7.32.0):
     dependencies:
@@ -23510,11 +23559,12 @@ snapshots:
       semver: 6.3.1
       string.prototype.matchall: 4.0.11
 
-  eslint-plugin-unused-imports@2.0.0(@typescript-eslint/eslint-plugin@5.62.0)(eslint@7.32.0):
+  eslint-plugin-unused-imports@2.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0)(eslint@7.32.0)(typescript@4.9.5)
       eslint: 7.32.0
       eslint-rule-composer: 0.3.0
+    optionalDependencies:
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
 
   eslint-rule-composer@0.3.0: {}
 
@@ -24101,19 +24151,21 @@ snapshots:
     dependencies:
       map-cache: 0.2.2
 
-  framer-motion@10.18.0(react-dom@18.2.0)(react@18.2.0):
+  framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
       tslib: 2.6.2
     optionalDependencies:
       '@emotion/is-prop-valid': 0.8.8
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
 
-  framer-motion@11.2.12(react-dom@18.2.0)(react@18.2.0):
+  framer-motion@11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
+      tslib: 2.6.2
+    optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      tslib: 2.6.2
 
   fresh@0.5.2: {}
 
@@ -24664,12 +24716,16 @@ snapshots:
 
   html-void-elements@2.0.1: {}
 
-  htmlnano@2.1.0(svgo@2.8.0)(typescript@4.9.5):
+  htmlnano@2.1.0(postcss@8.4.38)(srcset@4.0.0)(svgo@2.8.0)(terser@5.30.3)(typescript@4.9.5):
     dependencies:
       cosmiconfig: 8.3.6(typescript@4.9.5)
       posthtml: 0.16.6
-      svgo: 2.8.0
       timsort: 0.3.0
+    optionalDependencies:
+      postcss: 8.4.38
+      srcset: 4.0.0
+      svgo: 2.8.0
+      terser: 5.30.3
     transitivePeerDependencies:
       - typescript
 
@@ -25222,16 +25278,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  jest-cli@28.1.3(@types/node@15.14.9)(ts-node@10.9.2):
+  jest-cli@28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
     dependencies:
-      '@jest/core': 28.1.3(ts-node@10.9.2)
+      '@jest/core': 28.1.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
       '@jest/test-result': 28.1.3
       '@jest/types': 28.1.3
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
       import-local: 3.1.0
-      jest-config: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2)
+      jest-config: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
       jest-util: 28.1.3
       jest-validate: 28.1.3
       prompts: 2.4.2
@@ -25241,12 +25297,11 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-config@28.1.3(@types/node@15.14.9)(ts-node@10.9.2):
+  jest-config@28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
     dependencies:
       '@babel/core': 7.24.4
       '@jest/test-sequencer': 28.1.3
       '@jest/types': 28.1.3
-      '@types/node': 15.14.9
       babel-jest: 28.1.3(@babel/core@7.24.4)
       chalk: 4.1.2
       ci-info: 3.9.0
@@ -25266,7 +25321,9 @@ snapshots:
       pretty-format: 28.1.3
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.2(@swc/core@1.4.13)(@types/node@15.14.9)(typescript@4.9.5)
+    optionalDependencies:
+      '@types/node': 15.14.9
+      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)
     transitivePeerDependencies:
       - supports-color
 
@@ -25378,7 +25435,7 @@ snapshots:
       '@types/node': 15.14.9
 
   jest-pnp-resolver@1.2.3(jest-resolve@28.1.3):
-    dependencies:
+    optionalDependencies:
       jest-resolve: 28.1.3
 
   jest-regex-util@28.0.2: {}
@@ -25512,11 +25569,11 @@ snapshots:
       leven: 3.1.0
       pretty-format: 28.1.3
 
-  jest-watch-typeahead@1.1.0(jest@28.1.3):
+  jest-watch-typeahead@1.1.0(jest@28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))):
     dependencies:
       ansi-escapes: 4.3.2
       chalk: 4.1.2
-      jest: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2)
+      jest: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
       jest-regex-util: 28.0.2
       jest-watcher: 28.1.3
       slash: 4.0.0
@@ -25553,12 +25610,12 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@28.1.3(@types/node@15.14.9)(ts-node@10.9.2):
+  jest@28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
     dependencies:
-      '@jest/core': 28.1.3(ts-node@10.9.2)
+      '@jest/core': 28.1.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
       '@jest/types': 28.1.3
       import-local: 3.1.0
-      jest-cli: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2)
+      jest-cli: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
     transitivePeerDependencies:
       - '@types/node'
       - supports-color
@@ -25593,7 +25650,7 @@ snapshots:
 
   jsbn@1.1.0: {}
 
-  jscodeshift@0.15.2(@babel/preset-env@7.24.4):
+  jscodeshift@0.15.2(@babel/preset-env@7.24.4(@babel/core@7.24.4)):
     dependencies:
       '@babel/core': 7.24.4
       '@babel/parser': 7.24.4
@@ -25602,7 +25659,6 @@ snapshots:
       '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.4)
       '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.4)
       '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.4)
-      '@babel/preset-env': 7.24.4(@babel/core@7.24.4)
       '@babel/preset-flow': 7.24.1(@babel/core@7.24.4)
       '@babel/preset-typescript': 7.24.1(@babel/core@7.24.4)
       '@babel/register': 7.23.7(@babel/core@7.24.4)
@@ -25616,6 +25672,8 @@ snapshots:
       recast: 0.23.6
       temp: 0.8.4
       write-file-atomic: 2.4.3
+    optionalDependencies:
+      '@babel/preset-env': 7.24.4(@babel/core@7.24.4)
     transitivePeerDependencies:
       - supports-color
 
@@ -25812,14 +25870,14 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
-  lint-staged@13.3.0:
+  lint-staged@13.3.0(enquirer@2.4.1):
     dependencies:
       chalk: 5.3.0
       commander: 11.0.0
       debug: 4.3.4
       execa: 7.2.0
       lilconfig: 2.1.0
-      listr2: 6.6.1
+      listr2: 6.6.1(enquirer@2.4.1)
       micromatch: 4.0.5
       pidtree: 0.6.0
       string-argv: 0.3.2
@@ -25835,7 +25893,7 @@ snapshots:
       is-number: 2.1.0
       repeat-string: 1.6.1
 
-  listr2@6.6.1:
+  listr2@6.6.1(enquirer@2.4.1):
     dependencies:
       cli-truncate: 3.1.0
       colorette: 2.0.20
@@ -25843,6 +25901,8 @@ snapshots:
       log-update: 5.0.1
       rfdc: 1.3.1
       wrap-ansi: 8.1.0
+    optionalDependencies:
+      enquirer: 2.4.1
 
   lmdb@2.8.5:
     dependencies:
@@ -26869,12 +26929,12 @@ snapshots:
 
   neo-async@2.6.2: {}
 
-  next-contentlayer@0.3.4(contentlayer@0.3.4)(esbuild@0.20.2)(next@13.5.1)(react-dom@18.2.0)(react@18.2.0):
+  next-contentlayer@0.3.4(contentlayer@0.3.4(esbuild@0.20.2))(esbuild@0.20.2)(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@contentlayer/core': 0.3.4(esbuild@0.20.2)
       '@contentlayer/utils': 0.3.4
       contentlayer: 0.3.4(esbuild@0.20.2)
-      next: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+      next: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
@@ -26883,26 +26943,25 @@ snapshots:
       - markdown-wasm
       - supports-color
 
-  next-sitemap@4.2.3(next@13.5.1):
+  next-sitemap@4.2.3(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)):
     dependencies:
       '@corex/deepmerge': 4.0.43
       '@next/env': 13.5.6
       fast-glob: 3.3.2
       minimist: 1.2.8
-      next: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+      next: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
 
-  next-themes@0.2.1(next@13.5.1)(react-dom@18.2.0)(react@18.2.0):
+  next-themes@0.2.1(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      next: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0)
+      next: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
   next-tick@1.1.0: {}
 
-  next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0)(react@18.2.0):
+  next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@next/env': 13.5.1
-      '@opentelemetry/api': 1.8.0
       '@swc/helpers': 0.5.2
       busboy: 1.6.0
       caniuse-lite: 1.0.30001609
@@ -26922,6 +26981,7 @@ snapshots:
       '@next/swc-win32-arm64-msvc': 13.5.1
       '@next/swc-win32-ia32-msvc': 13.5.1
       '@next/swc-win32-x64-msvc': 13.5.1
+      '@opentelemetry/api': 1.8.0
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -26949,9 +27009,11 @@ snapshots:
 
   node-fetch-native@1.6.4: {}
 
-  node-fetch@2.7.0:
+  node-fetch@2.7.0(encoding@0.1.13):
     dependencies:
       whatwg-url: 5.0.0
+    optionalDependencies:
+      encoding: 0.1.13
 
   node-fetch@3.3.2:
     dependencies:
@@ -27405,18 +27467,18 @@ snapshots:
       dot-case: 3.0.4
       tslib: 2.6.2
 
-  parcel@2.12.0(typescript@4.9.5):
+  parcel@2.12.0(@swc/helpers@0.5.9)(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5):
     dependencies:
-      '@parcel/config-default': 2.12.0(@parcel/core@2.12.0)(typescript@4.9.5)
-      '@parcel/core': 2.12.0
+      '@parcel/config-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5)
+      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
       '@parcel/diagnostic': 2.12.0
       '@parcel/events': 2.12.0
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/logger': 2.12.0
-      '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/reporter-cli': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0)
-      '@parcel/reporter-tracer': 2.12.0(@parcel/core@2.12.0)
+      '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
+      '@parcel/reporter-cli': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/reporter-tracer': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/utils': 2.12.0
       chalk: 4.1.2
       commander: 7.2.0
@@ -27610,18 +27672,37 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.38
 
-  postcss-load-config@3.1.4(ts-node@10.9.2):
+  postcss-load-config@3.1.4(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
     dependencies:
       lilconfig: 2.1.0
-      ts-node: 10.9.2(@swc/core@1.4.13)(@types/node@15.14.9)(typescript@4.9.5)
       yaml: 1.10.2
+    optionalDependencies:
+      postcss: 8.4.38
+      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2):
+  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)):
     dependencies:
       lilconfig: 3.1.1
+      yaml: 2.4.1
+    optionalDependencies:
+      postcss: 8.4.38
+      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)
+
+  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)):
+    dependencies:
+      lilconfig: 3.1.1
+      yaml: 2.4.1
+    optionalDependencies:
       postcss: 8.4.38
-      ts-node: 10.9.2(@swc/core@1.4.13)(@types/node@15.14.9)(typescript@4.9.5)
+      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)
+
+  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
+    dependencies:
+      lilconfig: 3.1.1
       yaml: 2.4.1
+    optionalDependencies:
+      postcss: 8.4.38
+      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)
 
   postcss-nested@6.0.1(postcss@8.4.38):
     dependencies:
@@ -27953,7 +28034,7 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react-colorful@5.6.1(react-dom@18.2.0)(react@18.2.0):
+  react-colorful@5.6.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -27987,7 +28068,7 @@ snapshots:
       react: 18.2.0
       scheduler: 0.23.0
 
-  react-element-to-jsx-string@15.0.0(react-dom@18.2.0)(react@18.2.0):
+  react-element-to-jsx-string@15.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@base2/pretty-print-object': 1.0.1
       is-plain-object: 5.0.0
@@ -28018,7 +28099,7 @@ snapshots:
 
   react-is@18.2.0: {}
 
-  react-live@2.4.1(react-dom@18.2.0)(react@18.2.0):
+  react-live@2.4.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@types/buble': 0.20.5
       buble: 0.19.6
@@ -28028,7 +28109,7 @@ snapshots:
       prop-types: 15.8.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-simple-code-editor: 0.11.3(react-dom@18.2.0)(react@18.2.0)
+      react-simple-code-editor: 0.11.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       unescape: 1.0.1
 
   react-lorem-component@0.13.0(react@18.2.0):
@@ -28049,53 +28130,58 @@ snapshots:
 
   react-remove-scroll-bar@2.3.6(@types/react@18.2.8)(react@18.2.0):
     dependencies:
-      '@types/react': 18.2.8
       react: 18.2.0
       react-style-singleton: 2.2.1(@types/react@18.2.8)(react@18.2.0)
       tslib: 2.6.2
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   react-remove-scroll@2.5.4(@types/react@18.2.8)(react@18.2.0):
     dependencies:
-      '@types/react': 18.2.8
       react: 18.2.0
       react-remove-scroll-bar: 2.3.6(@types/react@18.2.8)(react@18.2.0)
       react-style-singleton: 2.2.1(@types/react@18.2.8)(react@18.2.0)
       tslib: 2.6.2
       use-callback-ref: 1.3.2(@types/react@18.2.8)(react@18.2.0)
       use-sidecar: 1.1.2(@types/react@18.2.8)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   react-remove-scroll@2.5.5(@types/react@18.2.8)(react@18.2.0):
     dependencies:
-      '@types/react': 18.2.8
       react: 18.2.0
       react-remove-scroll-bar: 2.3.6(@types/react@18.2.8)(react@18.2.0)
       react-style-singleton: 2.2.1(@types/react@18.2.8)(react@18.2.0)
       tslib: 2.6.2
       use-callback-ref: 1.3.2(@types/react@18.2.8)(react@18.2.0)
       use-sidecar: 1.1.2(@types/react@18.2.8)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   react-remove-scroll@2.5.9(@types/react@18.2.8)(react@18.2.0):
     dependencies:
-      '@types/react': 18.2.8
       react: 18.2.0
       react-remove-scroll-bar: 2.3.6(@types/react@18.2.8)(react@18.2.0)
       react-style-singleton: 2.2.1(@types/react@18.2.8)(react@18.2.0)
       tslib: 2.6.2
       use-callback-ref: 1.3.2(@types/react@18.2.8)(react@18.2.0)
       use-sidecar: 1.1.2(@types/react@18.2.8)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
 
-  react-simple-code-editor@0.11.3(react-dom@18.2.0)(react@18.2.0):
+  react-simple-code-editor@0.11.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
   react-style-singleton@2.2.1(@types/react@18.2.8)(react@18.2.0):
     dependencies:
-      '@types/react': 18.2.8
       get-nonce: 1.0.1
       invariant: 2.2.4
       react: 18.2.0
       tslib: 2.6.2
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   react-textarea-autosize@8.5.3(@types/react@18.2.8)(react@18.2.0):
     dependencies:
@@ -28980,25 +29066,26 @@ snapshots:
 
   store2@2.14.3: {}
 
-  storybook-dark-mode@3.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0):
+  storybook-dark-mode@3.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@storybook/addons': 7.6.17(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/components': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/addons': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/components': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@storybook/core-events': 7.6.17
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.6.17(react-dom@18.2.0)(react@18.2.0)
-      '@storybook/theming': 7.6.17(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/manager-api': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/theming': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       fast-deep-equal: 3.1.3
       memoizerific: 1.11.3
+    optionalDependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
 
-  storybook@7.6.17:
+  storybook@7.6.17(encoding@0.1.13):
     dependencies:
-      '@storybook/cli': 7.6.17
+      '@storybook/cli': 7.6.17(encoding@0.1.13)
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -29173,9 +29260,10 @@ snapshots:
 
   styled-jsx@5.1.1(@babel/core@7.24.4)(react@18.2.0):
     dependencies:
-      '@babel/core': 7.24.4
       client-only: 0.0.1
       react: 18.2.0
+    optionalDependencies:
+      '@babel/core': 7.24.4
 
   sucrase@3.35.0:
     dependencies:
@@ -29249,12 +29337,17 @@ snapshots:
 
   tailwind-merge@1.14.0: {}
 
-  tailwind-variants@0.1.20(tailwindcss@3.4.3):
+  tailwind-variants@0.1.20(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5))):
     dependencies:
       tailwind-merge: 1.14.0
-      tailwindcss: 3.4.3(ts-node@10.9.2)
+      tailwindcss: 3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5))
 
-  tailwindcss@3.4.3(ts-node@10.9.2):
+  tailwind-variants@0.1.20(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5))):
+    dependencies:
+      tailwind-merge: 1.14.0
+      tailwindcss: 3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5))
+
+  tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -29273,7 +29366,61 @@ snapshots:
       postcss: 8.4.38
       postcss-import: 15.1.0(postcss@8.4.38)
       postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2)
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5))
+      postcss-nested: 6.0.1(postcss@8.4.38)
+      postcss-selector-parser: 6.0.16
+      resolve: 1.22.8
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
+  tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)):
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.0
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.38
+      postcss-import: 15.1.0(postcss@8.4.38)
+      postcss-js: 4.0.1(postcss@8.4.38)
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5))
+      postcss-nested: 6.0.1(postcss@8.4.38)
+      postcss-selector-parser: 6.0.16
+      resolve: 1.22.8
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
+  tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.0
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.38
+      postcss-import: 15.1.0(postcss@8.4.38)
+      postcss-js: 4.0.1(postcss@8.4.38)
+      postcss-load-config: 4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
       postcss-nested: 6.0.1(postcss@8.4.38)
       postcss-selector-parser: 6.0.16
       resolve: 1.22.8
@@ -29348,27 +29495,29 @@ snapshots:
       ansi-escapes: 4.3.2
       supports-hyperlinks: 2.3.0
 
-  terser-webpack-plugin@5.3.10(@swc/core@1.4.13)(esbuild@0.15.18)(webpack@5.91.0):
+  terser-webpack-plugin@5.3.10(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      '@swc/core': 1.4.13
-      esbuild: 0.15.18
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
       terser: 5.30.3
-      webpack: 5.91.0(@swc/core@1.4.13)(esbuild@0.15.18)(webpack-cli@3.3.12)
+      webpack: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)
+    optionalDependencies:
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+      esbuild: 0.15.18
 
-  terser-webpack-plugin@5.3.10(@swc/core@1.4.13)(esbuild@0.20.2)(webpack@5.91.0):
+  terser-webpack-plugin@5.3.10(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      '@swc/core': 1.4.13
-      esbuild: 0.20.2
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
       terser: 5.30.3
-      webpack: 5.91.0(@swc/core@1.4.13)(esbuild@0.20.2)(webpack-cli@3.3.12)
+      webpack: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))
+    optionalDependencies:
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+      esbuild: 0.20.2
 
   terser@5.30.3:
     dependencies:
@@ -29488,10 +29637,9 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-node@10.9.2(@swc/core@1.4.13)(@types/node@15.14.9)(typescript@4.9.5):
+  ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
-      '@swc/core': 1.4.13
       '@tsconfig/node10': 1.0.11
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
@@ -29506,6 +29654,50 @@ snapshots:
       typescript: 4.9.5
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+
+  ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 20.2.5
+      acorn: 8.11.3
+      acorn-walk: 8.3.2
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 4.9.5
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+    optional: true
+
+  ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5):
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.11
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 20.5.1
+      acorn: 8.11.3
+      acorn-walk: 8.3.2
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 4.9.5
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    optionalDependencies:
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+    optional: true
 
   ts-pattern@4.3.0: {}
 
@@ -29520,9 +29712,8 @@ snapshots:
 
   tslib@2.6.2: {}
 
-  tsup@6.4.0(@swc/core@1.4.13)(ts-node@10.9.2)(typescript@4.9.5):
+  tsup@6.4.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5):
     dependencies:
-      '@swc/core': 1.4.13
       bundle-require: 3.1.2(esbuild@0.15.18)
       cac: 6.7.14
       chokidar: 3.6.0
@@ -29531,12 +29722,15 @@ snapshots:
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss-load-config: 3.1.4(ts-node@10.9.2)
+      postcss-load-config: 3.1.4(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
       resolve-from: 5.0.0
       rollup: 3.29.4
       source-map: 0.8.0-beta.0
       sucrase: 3.35.0
       tree-kill: 1.2.2
+    optionalDependencies:
+      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+      postcss: 8.4.38
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
@@ -29889,9 +30083,10 @@ snapshots:
 
   use-callback-ref@1.3.2(@types/react@18.2.8)(react@18.2.0):
     dependencies:
-      '@types/react': 18.2.8
       react: 18.2.0
       tslib: 2.6.2
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   use-composed-ref@1.3.0(react@18.2.0):
     dependencies:
@@ -29899,16 +30094,18 @@ snapshots:
 
   use-isomorphic-layout-effect@1.1.2(@types/react@18.2.8)(react@18.2.0):
     dependencies:
-      '@types/react': 18.2.8
       react: 18.2.0
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   use-latest@1.2.1(@types/react@18.2.8)(react@18.2.0):
     dependencies:
-      '@types/react': 18.2.8
       react: 18.2.0
       use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.8)(react@18.2.0)
+    optionalDependencies:
+      '@types/react': 18.2.8
 
-  use-resize-observer@9.1.0(react-dom@18.2.0)(react@18.2.0):
+  use-resize-observer@9.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@juggle/resize-observer': 3.4.0
       react: 18.2.0
@@ -29916,10 +30113,11 @@ snapshots:
 
   use-sidecar@1.1.2(@types/react@18.2.8)(react@18.2.0):
     dependencies:
-      '@types/react': 18.2.8
       detect-node-es: 1.1.0
       react: 18.2.0
       tslib: 2.6.2
+    optionalDependencies:
+      '@types/react': 18.2.8
 
   use-sync-external-store@1.2.0(react@18.2.0):
     dependencies:
@@ -30011,14 +30209,16 @@ snapshots:
       unist-util-stringify-position: 3.0.3
       vfile-message: 3.1.4
 
-  vite@4.5.3(@types/node@15.14.9):
+  vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3):
     dependencies:
-      '@types/node': 15.14.9
       esbuild: 0.18.20
       postcss: 8.4.38
       rollup: 3.29.4
     optionalDependencies:
+      '@types/node': 20.5.1
       fsevents: 2.3.3
+      lightningcss: 1.24.1
+      terser: 5.30.3
 
   vlq@1.0.1: {}
 
@@ -30137,7 +30337,7 @@ snapshots:
       loader-utils: 1.4.2
       supports-color: 6.1.0
       v8-compile-cache: 2.4.0
-      webpack: 5.91.0(@swc/core@1.4.13)(esbuild@0.15.18)(webpack-cli@3.3.12)
+      webpack: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)
       yargs: 13.3.2
 
   webpack-merge@5.10.0:
@@ -30150,7 +30350,7 @@ snapshots:
 
   webpack-virtual-modules@0.6.1: {}
 
-  webpack@5.91.0(@swc/core@1.4.13)(esbuild@0.15.18)(webpack-cli@3.3.12):
+  webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.5
@@ -30173,16 +30373,17 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.4.13)(esbuild@0.15.18)(webpack@5.91.0)
+      terser-webpack-plugin: 5.3.10(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12))
       watchpack: 2.4.1
-      webpack-cli: 3.3.12(webpack@5.91.0)
       webpack-sources: 3.2.3
+    optionalDependencies:
+      webpack-cli: 3.3.12(webpack@5.91.0)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
       - uglify-js
 
-  webpack@5.91.0(@swc/core@1.4.13)(esbuild@0.20.2)(webpack-cli@3.3.12):
+  webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0)):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.5
@@ -30205,10 +30406,11 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.4.13)(esbuild@0.20.2)(webpack@5.91.0)
+      terser-webpack-plugin: 5.3.10(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0)))
       watchpack: 2.4.1
-      webpack-cli: 3.3.12(webpack@5.91.0)
       webpack-sources: 3.2.3
+    optionalDependencies:
+      webpack-cli: 3.3.12(webpack@5.91.0)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -30462,8 +30664,9 @@ snapshots:
 
   zustand@4.5.2(@types/react@18.2.8)(react@18.2.0):
     dependencies:
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    optionalDependencies:
       '@types/react': 18.2.8
       react: 18.2.0
-      use-sync-external-store: 1.2.0(react@18.2.0)
 
   zwitch@2.0.4: {}

From 55b479e045ef8491a43cd0eabd48c058a9b5bc27 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 23 Aug 2024 18:34:05 +0800
Subject: [PATCH 04/62] chore(docs): update README.md

---
 packages/components/alert/README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/alert/README.md b/packages/components/alert/README.md
index 25def92dc8..071ac6dd26 100644
--- a/packages/components/alert/README.md
+++ b/packages/components/alert/README.md
@@ -1,15 +1,15 @@
-# @nextui-org/autocomplete
+# @nextui-org/alert
 
-An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
+Alerts are temporary notifications that provide concise feedback about an action or event.
 
-Please refer to the [documentation](https://nextui.org/docs/components/autocomplete) for more information.
+Please refer to the [documentation](https://nextui.org/docs/components/alert) for more information.
 
 ## Installation
 
 ```sh
-yarn add @nextui-org/autocomplete
+yarn add @nextui-org/alert
 # or
-npm i @nextui-org/autocomplete
+npm i @nextui-org/alert
 ```
 
 ## Contribution

From f2b5252d59d9f4e31fc3703292e1493b0d7248f1 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 23 Aug 2024 18:34:15 +0800
Subject: [PATCH 05/62] feat(theme): init alert tv

---
 packages/core/theme/src/components/alert.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 packages/core/theme/src/components/alert.ts

diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
new file mode 100644
index 0000000000..a6ae7201a5
--- /dev/null
+++ b/packages/core/theme/src/components/alert.ts
@@ -0,0 +1,14 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "../utils/tv";
+
+const alert = tv({
+  slots: {
+    base: [],
+  },
+});
+
+export type AlertVariantProps = VariantProps<typeof alert>;
+export type AlertSlots = keyof ReturnType<typeof alert>;
+
+export {alert};

From 4634e1156b7d67041095b69f3586a6c96e90bf26 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 23 Aug 2024 18:37:39 +0800
Subject: [PATCH 06/62] chore(alert): update package.json

---
 packages/components/alert/package.json | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/alert/package.json b/packages/components/alert/package.json
index 514dfc66d6..54190460f6 100644
--- a/packages/components/alert/package.json
+++ b/packages/components/alert/package.json
@@ -5,7 +5,11 @@
     "keywords": [
       "alert"
     ],
-    "author": "Abhinav Agarwal <abhinavagrawl700@gmail.com>",
+    "author": "Junior Garcia <jrgarciadev@gmail.com>",
+    "contributors": [
+      "Abhinav Agarwal <abhinavagrawl700@gmail.com>",
+      "WK Wong <wingkwong.code@gmail.com>"
+    ],
     "homepage": "https://nextui.org",
     "license": "MIT",
     "main": "src/index.ts",

From 547a9dc3430fec997f035d5bddbf6eaa08c34593 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 23 Aug 2024 18:37:52 +0800
Subject: [PATCH 07/62] feat(alert): init alert storybook structure

---
 .../components/alert/stories/alert.stories.tsx  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index 684452a996..fb8bed28d7 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -1,6 +1,19 @@
 import {Meta} from "@storybook/react";
+import {alert} from "@nextui-org/theme";
+
+import {Alert} from "../src";
 
 export default {
   title: "Components/Alert",
-  Component: alert,
-} as Meta<typeof alert>;
+  Component: Alert,
+} as Meta<typeof Alert>;
+
+const defaultProps = {
+  ...alert.defaultVariants,
+};
+
+export const Default = {
+  args: {
+    ...defaultProps,
+  },
+};

From d30298489a0814fa0cbb59bc16d4d358274d0bba Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 23 Aug 2024 18:38:52 +0800
Subject: [PATCH 08/62] chore(changeset): add changeset

---
 .changeset/poor-sheep-repair.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/poor-sheep-repair.md

diff --git a/.changeset/poor-sheep-repair.md b/.changeset/poor-sheep-repair.md
new file mode 100644
index 0000000000..44e3ad034f
--- /dev/null
+++ b/.changeset/poor-sheep-repair.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/alert": patch
+"@nextui-org/theme": patch
+---
+
+introduced Alert component (#2250)

From e7834884b7d2d1b92ce7bbd73bdb3372b1ee0201 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 23 Aug 2024 18:40:36 +0800
Subject: [PATCH 09/62] chore(changeset): change to minor

---
 .changeset/poor-sheep-repair.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/poor-sheep-repair.md b/.changeset/poor-sheep-repair.md
index 44e3ad034f..fa819c548c 100644
--- a/.changeset/poor-sheep-repair.md
+++ b/.changeset/poor-sheep-repair.md
@@ -1,6 +1,6 @@
 ---
-"@nextui-org/alert": patch
-"@nextui-org/theme": patch
+"@nextui-org/alert": minor
+"@nextui-org/theme": minor
 ---
 
 introduced Alert component (#2250)

From 98589e75c1b89315ea46620effc81d2195296be5 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 23 Aug 2024 18:44:00 +0800
Subject: [PATCH 10/62] chore(alert): revise alert package.json

---
 packages/components/alert/package.json | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/components/alert/package.json b/packages/components/alert/package.json
index 54190460f6..14fb1e6d15 100644
--- a/packages/components/alert/package.json
+++ b/packages/components/alert/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@nextui-org/alert",
     "version": "2.0.0",
-    "description": "Alert component is used to display important messages or notifications to users. It appears as a banner or popup that overlays the main content of a webpage.",
+    "description": "Alerts are temporary notifications that provide concise feedback about an action or event.",
     "keywords": [
       "alert"
     ],
@@ -23,7 +23,7 @@
     "repository": {
       "type": "git",
       "url": "git+https://github.com/nextui-org/nextui.git",
-      "directory": "packages/components/badge"
+      "directory": "packages/components/alert"
     },
     "bugs": {
       "url": "https://github.com/nextui-org/nextui/issues"
@@ -43,16 +43,9 @@
       "@nextui-org/theme": ">=2.1.0",
       "@nextui-org/system": ">=2.0.0"
     },
-    "dependencies": {
-      "@nextui-org/shared-utils": "workspace:*",
-      "@nextui-org/react-utils": "workspace:*"
-    },
     "devDependencies": {
       "@nextui-org/system": "workspace:*",
       "@nextui-org/theme": "workspace:*",
-      "@nextui-org/avatar": "workspace:*",
-      "@nextui-org/shared-icons": "workspace:*",
-      "@nextui-org/switch": "workspace:*",
       "clean-package": "2.2.0",
       "react": "^18.0.0",
       "react-dom": "^18.0.0"

From d352f9be39eff77b6dc5b770fc3154ebc15ad1dc Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 23 Aug 2024 18:44:21 +0800
Subject: [PATCH 11/62] feat(alert): init test structure

---
 packages/components/alert/__tests__/alert.test.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 packages/components/alert/__tests__/alert.test.tsx

diff --git a/packages/components/alert/__tests__/alert.test.tsx b/packages/components/alert/__tests__/alert.test.tsx
new file mode 100644
index 0000000000..39c814673a
--- /dev/null
+++ b/packages/components/alert/__tests__/alert.test.tsx
@@ -0,0 +1,12 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+
+import {Alert} from "../src";
+
+describe("Alert", () => {
+  it("should render correctly", () => {
+    const wrapper = render(<Alert />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+});

From 4a9e147781cdb974b87830309fbbcb53f1475bc4 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 23 Aug 2024 18:44:53 +0800
Subject: [PATCH 12/62] chore(deps): pnpm-lock.yaml

---
 pnpm-lock.yaml | 24 +++---------------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5b44c5b26..e2bff3c6f4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -685,23 +685,7 @@ importers:
         version: 18.2.0(react@18.2.0)
 
   packages/components/alert:
-    dependencies:
-      '@nextui-org/react-utils':
-        specifier: workspace:*
-        version: link:../../utilities/react-utils
-      '@nextui-org/shared-utils':
-        specifier: workspace:*
-        version: link:../../utilities/shared-utils
     devDependencies:
-      '@nextui-org/avatar':
-        specifier: workspace:*
-        version: link:../avatar
-      '@nextui-org/shared-icons':
-        specifier: workspace:*
-        version: link:../../utilities/shared-icons
-      '@nextui-org/switch':
-        specifier: workspace:*
-        version: link:../switch
       '@nextui-org/system':
         specifier: workspace:*
         version: link:../../core/system
@@ -18105,15 +18089,13 @@ snapshots:
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
+  '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/logger': 2.12.0
       '@parcel/utils': 2.12.0
       lmdb: 2.8.5
-    transitivePeerDependencies:
-      - '@swc/helpers'
 
   '@parcel/codeframe@2.12.0':
     dependencies:
@@ -18173,7 +18155,7 @@ snapshots:
   '@parcel/core@2.12.0(@swc/helpers@0.5.9)':
     dependencies:
       '@mischnic/json-sourcemap': 0.1.1
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
+      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/diagnostic': 2.12.0
       '@parcel/events': 2.12.0
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
@@ -18588,7 +18570,7 @@ snapshots:
 
   '@parcel/types@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
     dependencies:
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
+      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       '@parcel/diagnostic': 2.12.0
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)

From c079cc019b2883f058ed40f58b9f3de080b93829 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Wed, 28 Aug 2024 21:47:12 +0530
Subject: [PATCH 13/62] feat(alert): initailized theme and basic structure

---
 .../alert/stories/alert.stories.tsx           |  2 +-
 packages/core/theme/src/components/alert.ts   | 54 ++++++++++++++++++-
 packages/core/theme/src/components/index.ts   |  1 +
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index fb8bed28d7..696f04cd45 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -5,7 +5,7 @@ import {Alert} from "../src";
 
 export default {
   title: "Components/Alert",
-  Component: Alert,
+  component: Alert,
 } as Meta<typeof Alert>;
 
 const defaultProps = {
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index a6ae7201a5..e01864c2ae 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -1,10 +1,60 @@
 import type {VariantProps} from "tailwind-variants";
 
 import {tv} from "../utils/tv";
-
+/**
+ * Input wrapper **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const {base, helperWrapper, innerWrapper, title, description} = input({...})
+ *
+ * <div className={base())}>
+ *    <div className={innerWrapper()}>
+ *     // start content comes here if present
+ *      <div classsName ={helperWrapper()}>
+ *        <div className={title()}>Title</div>
+ *        <div className={description()}>Description</div>
+ *      </div>
+ *     // end content comes here if present
+ *    </div>
+ *   // close button
+ * </div>
+ * ```
+ */
 const alert = tv({
   slots: {
-    base: [],
+    base: ["group flex flex-row items-start data-[hidden=true]:hidden"],
+    title: ["text-medium font-medium text-foreground-600 block"],
+    helperWrapper: ["relative w-full inline-flex flex-col h-full items-center box-border"],
+    description: ["text-small text-foreground-400 block"],
+    innerWrapper: ["w-full flex h-full items-center box-border"],
+  },
+  variants: {
+    color: {
+      default: {},
+      primary: {},
+      secondary: {},
+      success: {},
+      warning: {},
+      danger: {},
+    },
+    radius: {
+      none: {
+        base: "rounded-none",
+      },
+      sm: {
+        base: "rounded-sm",
+      },
+      md: {
+        base: "rounded-md",
+      },
+      lg: {
+        base: "rounded-lg",
+      },
+      full: {
+        base: "rounded-full",
+      },
+    },
   },
 });
 
diff --git a/packages/core/theme/src/components/index.ts b/packages/core/theme/src/components/index.ts
index 7776b24c52..c5ed21c037 100644
--- a/packages/core/theme/src/components/index.ts
+++ b/packages/core/theme/src/components/index.ts
@@ -38,3 +38,4 @@ export * from "./autocomplete";
 export * from "./calendar";
 export * from "./date-input";
 export * from "./date-picker";
+export * from "./alert";

From d8f5b5ec129636dde78d9f25aa70ae5afe6178f8 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Wed, 28 Aug 2024 21:52:11 +0530
Subject: [PATCH 14/62] feat(alert): completed use-alert.ts and alert.tsx

---
 packages/components/alert/src/alert.tsx    | 59 ++++++++++++-
 packages/components/alert/src/use-alert.ts | 99 ++++++++++++++++++++++
 2 files changed, 154 insertions(+), 4 deletions(-)
 create mode 100644 packages/components/alert/src/use-alert.ts

diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 11620a3de5..f967af8a8f 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -1,7 +1,58 @@
-import React from "react";
+import React, {useMemo} from "react";
+import {forwardRef} from "@nextui-org/system";
+import {CloseIcon} from "@nextui-org/shared-icons";
 
-const Alert = () => {
-  return <div>alert</div>;
-};
+import {useAlert, UseAlertProps} from "./use-alert";
+
+export interface alertProps extends UseAlertProps {}
+
+const Alert = forwardRef<"div", alertProps>((props, ref) => {
+  const {
+    title,
+    description,
+    startContent,
+    endContent,
+    visible,
+    handleHide,
+    domRef,
+    getBaseProps,
+    getHelperWrapperProps,
+    getInnerWrapperProps,
+    getDescriptionProps,
+    getTitleProps,
+  } = useAlert({...props, ref});
+
+  const helperWrapper = useMemo(() => {
+    return (
+      <div {...getHelperWrapperProps()}>
+        <div {...getTitleProps()}>{title}</div>
+        <div {...getDescriptionProps()}>{description}</div>
+      </div>
+    );
+  }, [title, description, getHelperWrapperProps, getTitleProps, getDescriptionProps]);
+
+  const innerWrapper = useMemo(() => {
+    return (
+      <div {...getInnerWrapperProps()}>
+        {startContent}
+        {helperWrapper}
+        {endContent}
+      </div>
+    );
+  }, [startContent, endContent, helperWrapper]);
+
+  const baseWrapper = useMemo(() => {
+    return (
+      visible && (
+        <div ref={domRef} {...getBaseProps()}>
+          {innerWrapper}
+          <CloseIcon onClick={handleHide} />
+        </div>
+      )
+    );
+  }, [innerWrapper, domRef, getBaseProps, visible, handleHide]);
+
+  return <>{baseWrapper}</>;
+});
 
 export default Alert;
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
new file mode 100644
index 0000000000..a11c1fde56
--- /dev/null
+++ b/packages/components/alert/src/use-alert.ts
@@ -0,0 +1,99 @@
+import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
+import {AlertSlots, SlotsToClasses} from "@nextui-org/theme";
+import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
+import {AlertVariantProps} from "@nextui-org/theme/src/components/alert";
+import {ReactNode, useCallback, useMemo} from "react";
+import {alert} from "@nextui-org/theme";
+import {useState} from "react";
+import {objectToDeps} from "@nextui-org/shared-utils";
+
+interface Props extends HTMLNextUIProps<"div"> {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLImageElement | null>;
+
+  title: string;
+  description: ReactNode;
+
+  // content to be displayed on the left side of inner wrapper
+  startContent?: ReactNode;
+
+  // content to be displayed on the right side of inner wrapper
+  endContent?: ReactNode;
+
+  /**
+   * Classname or List of classes to change the classNames of the element.
+   * if `className` is passed, it will be added to the base slot.
+   *
+   * @example
+   * ```ts
+   * <Alert classNames={{
+   *    base:"base-classes", // image classes
+   *    innerWrapper: "innerWrapper-classes", // this is a cloned version of the img
+   *    helperWrapper: "helperWrapper-classes"
+   * }} />
+   * ```
+   */
+  classNames?: SlotsToClasses<AlertSlots>;
+}
+export type UseAlertProps = Props & AlertVariantProps;
+
+export function useAlert(originalProps: UseAlertProps) {
+  const [props, variantProps] = mapPropsVariants(originalProps, alert.variantKeys);
+  const {title, description, startContent, endContent, ref, classNames} = props;
+
+  const [visible, setVisible] = useState(true);
+  const handleHide = () => {
+    setVisible(() => false);
+  };
+
+  const domRef = useDOMRef(ref);
+
+  const slots = useMemo(() => alert({...variantProps}), [objectToDeps(variantProps)]);
+
+  const getBaseProps = useCallback<PropGetter>(() => {
+    return {
+      className: slots.innerWrapper({class: classNames?.base}),
+    };
+  }, [slots, classNames?.base]);
+
+  const getInnerWrapperProps = useCallback<PropGetter>(() => {
+    return {
+      className: slots.innerWrapper({class: classNames?.innerWrapper}),
+    };
+  }, [slots, classNames?.innerWrapper]);
+
+  const getHelperWrapperProps = useCallback<PropGetter>(() => {
+    return {
+      className: slots.helperWrapper({class: classNames?.helperWrapper}),
+    };
+  }, [slots, classNames?.helperWrapper]);
+
+  const getDescriptionProps = useCallback<PropGetter>(() => {
+    return {
+      className: slots.description({class: classNames?.description}),
+    };
+  }, [slots, classNames?.description]);
+
+  const getTitleProps = useCallback<PropGetter>(() => {
+    return {
+      className: slots.title({class: classNames?.title}),
+    };
+  }, [slots, classNames?.title]);
+
+  return {
+    title,
+    description,
+    startContent,
+    endContent,
+    visible,
+    handleHide,
+    domRef,
+    getBaseProps,
+    getHelperWrapperProps,
+    getInnerWrapperProps,
+    getDescriptionProps,
+    getTitleProps,
+  };
+}

From 7d13e8742cab94c3504f15307e9543f9f500ecf0 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Thu, 29 Aug 2024 09:24:20 +0530
Subject: [PATCH 15/62] feat(alert): remove innerWrapper, replace helperWrapper
 with mainWrapper, adding isCloseable prop

---
 packages/components/alert/src/alert.tsx     | 28 ++++++++-------------
 packages/components/alert/src/use-alert.ts  | 28 ++++++++++-----------
 packages/core/theme/src/components/alert.ts | 13 ++++------
 3 files changed, 28 insertions(+), 41 deletions(-)

diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index f967af8a8f..e13a8164f0 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -10,47 +10,39 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
   const {
     title,
     description,
+    isCloseable,
     startContent,
     endContent,
     visible,
     handleHide,
     domRef,
     getBaseProps,
-    getHelperWrapperProps,
-    getInnerWrapperProps,
+    getMainWrapperProps,
     getDescriptionProps,
     getTitleProps,
   } = useAlert({...props, ref});
 
-  const helperWrapper = useMemo(() => {
+  const mainWrapper = useMemo(() => {
     return (
-      <div {...getHelperWrapperProps()}>
+      <div {...getMainWrapperProps()}>
         <div {...getTitleProps()}>{title}</div>
         <div {...getDescriptionProps()}>{description}</div>
       </div>
     );
-  }, [title, description, getHelperWrapperProps, getTitleProps, getDescriptionProps]);
-
-  const innerWrapper = useMemo(() => {
-    return (
-      <div {...getInnerWrapperProps()}>
-        {startContent}
-        {helperWrapper}
-        {endContent}
-      </div>
-    );
-  }, [startContent, endContent, helperWrapper]);
+  }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
 
   const baseWrapper = useMemo(() => {
     return (
       visible && (
         <div ref={domRef} {...getBaseProps()}>
-          {innerWrapper}
-          <CloseIcon onClick={handleHide} />
+          {startContent}
+          {mainWrapper}
+          {endContent}
+          {isCloseable && <CloseIcon onClick={handleHide} />}
         </div>
       )
     );
-  }, [innerWrapper, domRef, getBaseProps, visible, handleHide]);
+  }, [startContent, endContent, mainWrapper]);
 
   return <>{baseWrapper}</>;
 });
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index a11c1fde56..16ae7b18f4 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -16,6 +16,9 @@ interface Props extends HTMLNextUIProps<"div"> {
   title: string;
   description: ReactNode;
 
+  // whether the alert can be closed by user
+  isCloseable: boolean;
+
   // content to be displayed on the left side of inner wrapper
   startContent?: ReactNode;
 
@@ -30,8 +33,9 @@ interface Props extends HTMLNextUIProps<"div"> {
    * ```ts
    * <Alert classNames={{
    *    base:"base-classes", // image classes
-   *    innerWrapper: "innerWrapper-classes", // this is a cloned version of the img
-   *    helperWrapper: "helperWrapper-classes"
+   *    mainWrapper: "mainWrapper-classes"
+   *    description: "description-classes"
+   *    title: "title-classes"
    * }} />
    * ```
    */
@@ -41,7 +45,7 @@ export type UseAlertProps = Props & AlertVariantProps;
 
 export function useAlert(originalProps: UseAlertProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, alert.variantKeys);
-  const {title, description, startContent, endContent, ref, classNames} = props;
+  const {title, description, isCloseable, startContent, endContent, ref, classNames} = props;
 
   const [visible, setVisible] = useState(true);
   const handleHide = () => {
@@ -54,21 +58,15 @@ export function useAlert(originalProps: UseAlertProps) {
 
   const getBaseProps = useCallback<PropGetter>(() => {
     return {
-      className: slots.innerWrapper({class: classNames?.base}),
+      className: slots.base({class: classNames?.base}),
     };
   }, [slots, classNames?.base]);
 
-  const getInnerWrapperProps = useCallback<PropGetter>(() => {
-    return {
-      className: slots.innerWrapper({class: classNames?.innerWrapper}),
-    };
-  }, [slots, classNames?.innerWrapper]);
-
-  const getHelperWrapperProps = useCallback<PropGetter>(() => {
+  const getMainWrapperProps = useCallback<PropGetter>(() => {
     return {
-      className: slots.helperWrapper({class: classNames?.helperWrapper}),
+      className: slots.mainWrapper({class: classNames?.mainWrapper}),
     };
-  }, [slots, classNames?.helperWrapper]);
+  }, [slots, classNames?.mainWrapper]);
 
   const getDescriptionProps = useCallback<PropGetter>(() => {
     return {
@@ -85,14 +83,14 @@ export function useAlert(originalProps: UseAlertProps) {
   return {
     title,
     description,
+    isCloseable,
     startContent,
     endContent,
     visible,
     handleHide,
     domRef,
     getBaseProps,
-    getHelperWrapperProps,
-    getInnerWrapperProps,
+    getMainWrapperProps,
     getDescriptionProps,
     getTitleProps,
   };
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index e01864c2ae..8ecf38db42 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -9,15 +9,13 @@ import {tv} from "../utils/tv";
  * const {base, helperWrapper, innerWrapper, title, description} = input({...})
  *
  * <div className={base())}>
- *    <div className={innerWrapper()}>
  *     // start content comes here if present
- *      <div classsName ={helperWrapper()}>
+ *      <div classsName ={mainWrapper()}>
  *        <div className={title()}>Title</div>
  *        <div className={description()}>Description</div>
- *      </div>
- *     // end content comes here if present
- *    </div>
- *   // close button
+ *     </div>
+ *    // end content comes here if present
+ *    // close button
  * </div>
  * ```
  */
@@ -25,9 +23,8 @@ const alert = tv({
   slots: {
     base: ["group flex flex-row items-start data-[hidden=true]:hidden"],
     title: ["text-medium font-medium text-foreground-600 block"],
-    helperWrapper: ["relative w-full inline-flex flex-col h-full items-center box-border"],
     description: ["text-small text-foreground-400 block"],
-    innerWrapper: ["w-full flex h-full items-center box-border"],
+    mainWrapper: ["w-full flex flex-col h-full items-center box-border"],
   },
   variants: {
     color: {

From e9573655731e65c53c0370c9c569b9f43864f79e Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Thu, 29 Aug 2024 09:38:56 +0530
Subject: [PATCH 16/62] feat(alert): adding isCloseable prop to baseWrapper
 dependency

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

diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index e13a8164f0..ea25540af2 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -42,7 +42,7 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
         </div>
       )
     );
-  }, [startContent, endContent, mainWrapper]);
+  }, [startContent, endContent, mainWrapper, isCloseable]);
 
   return <>{baseWrapper}</>;
 });

From b1e031e46829c25f68e1535812271e870daa24fa Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 30 Aug 2024 08:27:05 +0530
Subject: [PATCH 17/62] feat(alert): setting the default value of isCloseable
 prop to true

---
 packages/components/alert/src/alert.tsx    |  2 ++
 packages/components/alert/src/use-alert.ts | 10 ++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index ea25540af2..7405323865 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -47,4 +47,6 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
   return <>{baseWrapper}</>;
 });
 
+Alert.displayName = "NextUI.Alert";
+
 export default Alert;
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index 16ae7b18f4..30f5343a4e 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -11,13 +11,14 @@ interface Props extends HTMLNextUIProps<"div"> {
   /**
    * Ref to the DOM node.
    */
+
   ref?: ReactRef<HTMLImageElement | null>;
 
   title: string;
   description: ReactNode;
 
   // whether the alert can be closed by user
-  isCloseable: boolean;
+  isCloseable?: boolean;
 
   // content to be displayed on the left side of inner wrapper
   startContent?: ReactNode;
@@ -45,7 +46,12 @@ export type UseAlertProps = Props & AlertVariantProps;
 
 export function useAlert(originalProps: UseAlertProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, alert.variantKeys);
-  const {title, description, isCloseable, startContent, endContent, ref, classNames} = props;
+
+  //isCloseable is true by default if not provided in props
+  const {title, description, isCloseable, startContent, endContent, ref, classNames} = {
+    isCloseable: true,
+    ...props,
+  };
 
   const [visible, setVisible] = useState(true);
   const handleHide = () => {

From e56acdaa333d64a113123c560f4f1cd04e80614b Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 30 Aug 2024 10:11:01 +0530
Subject: [PATCH 18/62] feat(alert): moving CloseIcon inside the button

---
 packages/components/alert/src/alert.tsx    | 11 ++++++++---
 packages/components/alert/src/use-alert.ts | 11 +++++++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 7405323865..654cb076a9 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -14,12 +14,13 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
     startContent,
     endContent,
     visible,
-    handleHide,
+    handleClose,
     domRef,
     getBaseProps,
     getMainWrapperProps,
     getDescriptionProps,
     getTitleProps,
+    getCloseButtonProps,
   } = useAlert({...props, ref});
 
   const mainWrapper = useMemo(() => {
@@ -38,11 +39,15 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
           {startContent}
           {mainWrapper}
           {endContent}
-          {isCloseable && <CloseIcon onClick={handleHide} />}
+          {isCloseable && (
+            <button onClick={handleClose} {...getCloseButtonProps()}>
+              <CloseIcon />
+            </button>
+          )}
         </div>
       )
     );
-  }, [startContent, endContent, mainWrapper, isCloseable]);
+  }, [startContent, endContent, mainWrapper, isCloseable, getCloseButtonProps]);
 
   return <>{baseWrapper}</>;
 });
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index 30f5343a4e..d9090af68c 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -54,7 +54,7 @@ export function useAlert(originalProps: UseAlertProps) {
   };
 
   const [visible, setVisible] = useState(true);
-  const handleHide = () => {
+  const handleClose = () => {
     setVisible(() => false);
   };
 
@@ -86,6 +86,12 @@ export function useAlert(originalProps: UseAlertProps) {
     };
   }, [slots, classNames?.title]);
 
+  const getCloseButtonProps = useCallback<PropGetter>(() => {
+    return {
+      className: slots.closeButton({class: classNames?.closeButton}),
+    };
+  }, [slots, classNames?.closeButton]);
+
   return {
     title,
     description,
@@ -93,11 +99,12 @@ export function useAlert(originalProps: UseAlertProps) {
     startContent,
     endContent,
     visible,
-    handleHide,
+    handleClose,
     domRef,
     getBaseProps,
     getMainWrapperProps,
     getDescriptionProps,
     getTitleProps,
+    getCloseButtonProps,
   };
 }

From 099378dd284fd86342d0c3781aba71ef0b7c3cab Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 30 Aug 2024 19:49:50 +0530
Subject: [PATCH 19/62] feat(alert): updated package.json

---
 packages/components/alert/package.json |  5 +++++
 pnpm-lock.yaml                         | 18 +++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/components/alert/package.json b/packages/components/alert/package.json
index 14fb1e6d15..d06a00d598 100644
--- a/packages/components/alert/package.json
+++ b/packages/components/alert/package.json
@@ -43,6 +43,11 @@
       "@nextui-org/theme": ">=2.1.0",
       "@nextui-org/system": ">=2.0.0"
     },
+    "dependencies": {
+    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/shared-icons": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*"
+    },
     "devDependencies": {
       "@nextui-org/system": "workspace:*",
       "@nextui-org/theme": "workspace:*",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e2bff3c6f4..73c942b89d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -685,6 +685,16 @@ importers:
         version: 18.2.0(react@18.2.0)
 
   packages/components/alert:
+    dependencies:
+      '@nextui-org/react-utils':
+        specifier: workspace:*
+        version: link:../../utilities/react-utils
+      '@nextui-org/shared-icons':
+        specifier: workspace:*
+        version: link:../../utilities/shared-icons
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
     devDependencies:
       '@nextui-org/system':
         specifier: workspace:*
@@ -18089,13 +18099,15 @@ snapshots:
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
     dependencies:
       '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/logger': 2.12.0
       '@parcel/utils': 2.12.0
       lmdb: 2.8.5
+    transitivePeerDependencies:
+      - '@swc/helpers'
 
   '@parcel/codeframe@2.12.0':
     dependencies:
@@ -18155,7 +18167,7 @@ snapshots:
   '@parcel/core@2.12.0(@swc/helpers@0.5.9)':
     dependencies:
       '@mischnic/json-sourcemap': 0.1.1
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/diagnostic': 2.12.0
       '@parcel/events': 2.12.0
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
@@ -18570,7 +18582,7 @@ snapshots:
 
   '@parcel/types@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
     dependencies:
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/diagnostic': 2.12.0
       '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
       '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)

From 7402add1dc44128c5c759307164de6e4a0051ff6 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 30 Aug 2024 21:22:54 +0530
Subject: [PATCH 20/62] feat(alert): default variant and default story

---
 .../alert/stories/alert.stories.tsx           | 33 +++++++++++++++
 packages/core/theme/src/components/alert.ts   | 41 ++++++++++++++-----
 2 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index 696f04cd45..bfe7c8a3b4 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -1,18 +1,51 @@
 import {Meta} from "@storybook/react";
 import {alert} from "@nextui-org/theme";
+import React from "react";
+import {InfoIcon} from "@nextui-org/shared-icons";
 
 import {Alert} from "../src";
 
 export default {
   title: "Components/Alert",
   component: Alert,
+  argTypes: {
+    color: {
+      control: {
+        type: "select",
+      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
+    },
+    radius: {
+      control: {
+        type: "select",
+      },
+      options: ["none", "sm", "md", "lg", "full"],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center w-screen h-screen">
+        <Story />
+      </div>
+    ),
+  ],
 } as Meta<typeof Alert>;
 
 const defaultProps = {
   ...alert.defaultVariants,
+  title: "Email Sent!!",
+  description: "You will get a reply soon",
+  startContent: <InfoIcon />,
 };
 
+const Template = (args) => (
+  <div className="w-full max-w-[240px]">
+    <Alert {...args} />
+  </div>
+);
+
 export const Default = {
+  render: Template,
   args: {
     ...defaultProps,
   },
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index 8ecf38db42..6b687204e8 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -6,7 +6,7 @@ import {tv} from "../utils/tv";
  *
  * @example
  * ```js
- * const {base, helperWrapper, innerWrapper, title, description} = input({...})
+ * const {base, mainWrapper, title, description} = input({...})
  *
  * <div className={base())}>
  *     // start content comes here if present
@@ -21,19 +21,34 @@ import {tv} from "../utils/tv";
  */
 const alert = tv({
   slots: {
-    base: ["group flex flex-row items-start data-[hidden=true]:hidden"],
-    title: ["text-medium font-medium text-foreground-600 block"],
-    description: ["text-small text-foreground-400 block"],
-    mainWrapper: ["w-full flex flex-col h-full items-center box-border"],
+    base: ["w-6 group flex flex-row items-start data-[hidden=true]:hidden px-4 py-3"],
+    title: ["text-medium  font-medium text-foreground-100 block"],
+    description: ["text-small text-foreground-100 block"],
+    mainWrapper: ["w-full px-3 flex flex-col h-full box-border items-start justify-center"],
+    closeButton: [],
   },
   variants: {
     color: {
-      default: {},
-      primary: {},
-      secondary: {},
-      success: {},
-      warning: {},
-      danger: {},
+      default: {
+        base: ["bg-default-200", "border-default-200"],
+        title: ["text-white"],
+        description: ["text-white"],
+      },
+      primary: {
+        base: ["bg-primary-100", "border-primary-200"],
+      },
+      secondary: {
+        base: ["bg-secondary-100", "border-secondary-200"],
+      },
+      success: {
+        base: ["bg-success-100", "border-success-200"],
+      },
+      warning: {
+        base: ["bg-warning-100", "border-warning-200"],
+      },
+      danger: {
+        base: ["bg-danger-100", "border-danger-200"],
+      },
     },
     radius: {
       none: {
@@ -53,6 +68,10 @@ const alert = tv({
       },
     },
   },
+  defaultVariants: {
+    color: "default",
+    size: "lg",
+  },
 });
 
 export type AlertVariantProps = VariantProps<typeof alert>;

From e60dea2acba85204210b0d0cc20ace604d322462 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sat, 31 Aug 2024 12:10:43 +0530
Subject: [PATCH 21/62] feat(alert): adding color and radius stories

---
 .../alert/stories/alert.stories.tsx           | 35 +++++++++++++++++++
 packages/core/theme/src/components/alert.ts   | 23 ++++++++----
 2 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index bfe7c8a3b4..9f480bc5a8 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -44,9 +44,44 @@ const Template = (args) => (
   </div>
 );
 
+const ColorTemplate = (args) => {
+  return (
+    <div className="w-full flex flex-col max-w-[240px]">
+      {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+        <div key={color} className="w-full max-w-[240px] my-2">
+          <Alert {...args} color={color} />
+        </div>
+      ))}
+    </div>
+  );
+};
+const RadiusTemplate = (args) => {
+  return (
+    <div className="w-full flex flex-col max-w-[240px]">
+      {["none", "sm", "md", "lg", "full"].map((radius) => (
+        <div key={radius} className="w-full max-w-[240px] my-2">
+          <Alert {...args} radius={radius} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
 export const Default = {
   render: Template,
   args: {
     ...defaultProps,
   },
 };
+export const Color = {
+  render: ColorTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+export const Radius = {
+  render: RadiusTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index 6b687204e8..6a62cf8e0d 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -21,7 +21,7 @@ import {tv} from "../utils/tv";
  */
 const alert = tv({
   slots: {
-    base: ["w-6 group flex flex-row items-start data-[hidden=true]:hidden px-4 py-3"],
+    base: ["group flex flex-row justify-start items-start data-[hidden=true]:hidden px-4 py-3"],
     title: ["text-medium  font-medium text-foreground-100 block"],
     description: ["text-small text-foreground-100 block"],
     mainWrapper: ["w-full px-3 flex flex-col h-full box-border items-start justify-center"],
@@ -35,19 +35,29 @@ const alert = tv({
         description: ["text-white"],
       },
       primary: {
-        base: ["bg-primary-100", "border-primary-200"],
+        base: ["bg-primary-50", "border-primary-200"],
+        title: ["text-primary-200"],
+        description: ["text-primary-200"],
       },
       secondary: {
-        base: ["bg-secondary-100", "border-secondary-200"],
+        base: ["bg-secondary-50", "border-secondary-200"],
+        title: ["text-secondary-200"],
+        description: ["text-secondary-200"],
       },
       success: {
-        base: ["bg-success-100", "border-success-200"],
+        base: ["bg-success-50", "border-success-200"],
+        title: ["text-success-200"],
+        description: ["text-success-200"],
       },
       warning: {
-        base: ["bg-warning-100", "border-warning-200"],
+        base: ["bg-warning-50", "border-warning-200"],
+        title: ["text-warning-200"],
+        description: ["text-warning-200"],
       },
       danger: {
-        base: ["bg-danger-100", "border-danger-200"],
+        base: ["bg-danger-50", "border-danger-200"],
+        title: ["text-danger-200"],
+        description: ["text-danger-200"],
       },
     },
     radius: {
@@ -70,7 +80,6 @@ const alert = tv({
   },
   defaultVariants: {
     color: "default",
-    size: "lg",
   },
 });
 

From 4fcb4c02f11ab5cb94c775dc6e081bfe1be22b4f Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sat, 31 Aug 2024 15:25:44 +0530
Subject: [PATCH 22/62] feat(alert): completed the styling

---
 packages/core/theme/src/components/alert.ts | 26 +++++++++++----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index 6a62cf8e0d..213642543f 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -21,8 +21,10 @@ import {tv} from "../utils/tv";
  */
 const alert = tv({
   slots: {
-    base: ["group flex flex-row justify-start items-start data-[hidden=true]:hidden px-4 py-3"],
-    title: ["text-medium  font-medium text-foreground-100 block"],
+    base: [
+      "group flex flex-row w-[350px] justify-start items-start data-[hidden=true]:hidden px-4 py-3",
+    ],
+    title: ["text-medium text-foreground-100 block"],
     description: ["text-small text-foreground-100 block"],
     mainWrapper: ["w-full px-3 flex flex-col h-full box-border items-start justify-center"],
     closeButton: [],
@@ -36,28 +38,28 @@ const alert = tv({
       },
       primary: {
         base: ["bg-primary-50", "border-primary-200"],
-        title: ["text-primary-200"],
-        description: ["text-primary-200"],
+        title: ["text-primary-500"],
+        description: ["text-primary-500"],
       },
       secondary: {
         base: ["bg-secondary-50", "border-secondary-200"],
-        title: ["text-secondary-200"],
-        description: ["text-secondary-200"],
+        title: ["text-secondary-500"],
+        description: ["text-secondary-500"],
       },
       success: {
         base: ["bg-success-50", "border-success-200"],
-        title: ["text-success-200"],
-        description: ["text-success-200"],
+        title: ["text-success-300"],
+        description: ["text-success-300"],
       },
       warning: {
         base: ["bg-warning-50", "border-warning-200"],
-        title: ["text-warning-200"],
-        description: ["text-warning-200"],
+        title: ["text-warning-300"],
+        description: ["text-warning-300"],
       },
       danger: {
         base: ["bg-danger-50", "border-danger-200"],
-        title: ["text-danger-200"],
-        description: ["text-danger-200"],
+        title: ["text-danger-300"],
+        description: ["text-danger-300"],
       },
     },
     radius: {

From 248fecd7721a30982f6bfac1f8f73d1c635f666e Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sat, 31 Aug 2024 17:41:13 +0530
Subject: [PATCH 23/62] feat(alert): add stories for isCloseable prop and
 restyle other stories

---
 .../alert/stories/alert.stories.tsx           | 37 ++++++++++++++-----
 1 file changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index 9f480bc5a8..0cb9c319e5 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -38,17 +38,14 @@ const defaultProps = {
   startContent: <InfoIcon />,
 };
 
-const Template = (args) => (
-  <div className="w-full max-w-[240px]">
-    <Alert {...args} />
-  </div>
-);
+const Template = (args) => <Alert {...args} />;
 
 const ColorTemplate = (args) => {
   return (
-    <div className="w-full flex flex-col max-w-[240px]">
+    <div className="flex flex-col">
       {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
-        <div key={color} className="w-full max-w-[240px] my-2">
+        <div key={color} className="w-full flex justify-between items-center my-3">
+          <h4 className="h4 mr-4 ">{color}</h4>
           <Alert {...args} color={color} />
         </div>
       ))}
@@ -57,9 +54,10 @@ const ColorTemplate = (args) => {
 };
 const RadiusTemplate = (args) => {
   return (
-    <div className="w-full flex flex-col max-w-[240px]">
+    <div className="flex flex-col">
       {["none", "sm", "md", "lg", "full"].map((radius) => (
-        <div key={radius} className="w-full max-w-[240px] my-2">
+        <div key={radius} className="w-full flex justify-between items-center my-3">
+          <h4 className="h4 mr-4 ">{radius}</h4>
           <Alert {...args} radius={radius} />
         </div>
       ))}
@@ -67,6 +65,21 @@ const RadiusTemplate = (args) => {
   );
 };
 
+const IsCloseableTemplate = (args) => {
+  return (
+    <div className="flex flex-col">
+      <div className="w-full flex-col items-center my-3">
+        <h2 className="my-2 h2">isCloseable = true</h2>
+        <Alert {...args} isCloseable={true} />
+      </div>
+      <div className="w-full flex-col items-center my-3">
+        <h2 className="my-2 h2">isCloseable = false</h2>
+        <Alert {...args} isCloseable={false} />
+      </div>
+    </div>
+  );
+};
+
 export const Default = {
   render: Template,
   args: {
@@ -85,3 +98,9 @@ export const Radius = {
     ...defaultProps,
   },
 };
+export const IsCloseable = {
+  render: IsCloseableTemplate,
+  args: {
+    ...defaultProps,
+  },
+};

From bc9205e3ed7f9bb5f4e52397a059c4cc4bcaccba Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 1 Sep 2024 12:08:20 +0530
Subject: [PATCH 24/62] feat(alert): correcting ref type

---
 packages/components/alert/src/use-alert.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index d9090af68c..4549dedf1d 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -12,7 +12,7 @@ interface Props extends HTMLNextUIProps<"div"> {
    * Ref to the DOM node.
    */
 
-  ref?: ReactRef<HTMLImageElement | null>;
+  ref?: ReactRef<HTMLDivElement | null>;
 
   title: string;
   description: ReactNode;

From 2d94b005c1fd6dfc32ec8cc69584a5bc729addcf Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 1 Sep 2024 12:09:13 +0530
Subject: [PATCH 25/62] feat(alert): add test cases

---
 .../components/alert/__tests__/alert.test.tsx | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/components/alert/__tests__/alert.test.tsx b/packages/components/alert/__tests__/alert.test.tsx
index 39c814673a..ae7ce3c9a9 100644
--- a/packages/components/alert/__tests__/alert.test.tsx
+++ b/packages/components/alert/__tests__/alert.test.tsx
@@ -3,10 +3,46 @@ import {render} from "@testing-library/react";
 
 import {Alert} from "../src";
 
+const title = "Testing title";
+const description = "Testing Description";
+
 describe("Alert", () => {
   it("should render correctly", () => {
-    const wrapper = render(<Alert />);
+    const wrapper = render(<Alert description={description} title={title} />);
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
+
+  it("ref should be forwarded", () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    render(<Alert ref={ref} description={description} title={title} />);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it("should display title and description when component is rendered", () => {
+    const wrapper = render(<Alert description={description} title={title} />);
+
+    const titleElement = wrapper.getByText(title);
+    const descriptionElement = wrapper.getByText(description);
+
+    expect(titleElement).toEqual(title);
+    expect(descriptionElement).toEqual(description);
+  });
+
+  it("should show close button when is Closeable", () => {
+    const {getByRole} = render(<Alert description={description} title={title} />);
+    const button = getByRole("button");
+
+    expect(button).toBeVisible();
+  });
+
+  it("should not show close button when not is Closeable", () => {
+    const {getByRole} = render(
+      <Alert description={description} isCloseable={false} title={title} />,
+    );
+    const button = getByRole("button");
+
+    expect(button).toBeNull();
+  });
 });

From a699cc41d413cbc62f17fcc92d4457fafa354f55 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 1 Sep 2024 17:23:49 +0530
Subject: [PATCH 26/62] feat(alert): remove startContent and endContent props

---
 packages/components/alert/src/alert.tsx             |  6 +-----
 packages/components/alert/src/use-alert.ts          | 10 +---------
 packages/components/alert/stories/alert.stories.tsx |  9 +++------
 3 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 654cb076a9..666ef0916c 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -11,8 +11,6 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
     title,
     description,
     isCloseable,
-    startContent,
-    endContent,
     visible,
     handleClose,
     domRef,
@@ -36,9 +34,7 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
     return (
       visible && (
         <div ref={domRef} {...getBaseProps()}>
-          {startContent}
           {mainWrapper}
-          {endContent}
           {isCloseable && (
             <button onClick={handleClose} {...getCloseButtonProps()}>
               <CloseIcon />
@@ -47,7 +43,7 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
         </div>
       )
     );
-  }, [startContent, endContent, mainWrapper, isCloseable, getCloseButtonProps]);
+  }, [mainWrapper, isCloseable, getCloseButtonProps]);
 
   return <>{baseWrapper}</>;
 });
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index 4549dedf1d..541c732b29 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -20,12 +20,6 @@ interface Props extends HTMLNextUIProps<"div"> {
   // whether the alert can be closed by user
   isCloseable?: boolean;
 
-  // content to be displayed on the left side of inner wrapper
-  startContent?: ReactNode;
-
-  // content to be displayed on the right side of inner wrapper
-  endContent?: ReactNode;
-
   /**
    * Classname or List of classes to change the classNames of the element.
    * if `className` is passed, it will be added to the base slot.
@@ -48,7 +42,7 @@ export function useAlert(originalProps: UseAlertProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, alert.variantKeys);
 
   //isCloseable is true by default if not provided in props
-  const {title, description, isCloseable, startContent, endContent, ref, classNames} = {
+  const {title, description, isCloseable, ref, classNames} = {
     isCloseable: true,
     ...props,
   };
@@ -96,8 +90,6 @@ export function useAlert(originalProps: UseAlertProps) {
     title,
     description,
     isCloseable,
-    startContent,
-    endContent,
     visible,
     handleClose,
     domRef,
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index 0cb9c319e5..01dc55bfb2 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -1,7 +1,6 @@
+import React from "react";
 import {Meta} from "@storybook/react";
 import {alert} from "@nextui-org/theme";
-import React from "react";
-import {InfoIcon} from "@nextui-org/shared-icons";
 
 import {Alert} from "../src";
 
@@ -34,8 +33,6 @@ export default {
 const defaultProps = {
   ...alert.defaultVariants,
   title: "Email Sent!!",
-  description: "You will get a reply soon",
-  startContent: <InfoIcon />,
 };
 
 const Template = (args) => <Alert {...args} />;
@@ -45,7 +42,7 @@ const ColorTemplate = (args) => {
     <div className="flex flex-col">
       {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
         <div key={color} className="w-full flex justify-between items-center my-3">
-          <h4 className="h4 mr-4 ">{color}</h4>
+          <h4 className="h4 mr-4 text-md">{color}</h4>
           <Alert {...args} color={color} />
         </div>
       ))}
@@ -57,7 +54,7 @@ const RadiusTemplate = (args) => {
     <div className="flex flex-col">
       {["none", "sm", "md", "lg", "full"].map((radius) => (
         <div key={radius} className="w-full flex justify-between items-center my-3">
-          <h4 className="h4 mr-4 ">{radius}</h4>
+          <h4 className="h4 mr-4 text-md">{radius}</h4>
           <Alert {...args} radius={radius} />
         </div>
       ))}

From 81552c89d37a691adc893094c21ec0927382a404 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 1 Sep 2024 21:35:03 +0530
Subject: [PATCH 27/62] feat(alert): make styling more accurate

---
 packages/core/theme/src/components/alert.ts | 81 ++++++++++++---------
 1 file changed, 45 insertions(+), 36 deletions(-)

diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index 213642543f..21746b532e 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -2,64 +2,72 @@ import type {VariantProps} from "tailwind-variants";
 
 import {tv} from "../utils/tv";
 /**
- * Input wrapper **Tailwind Variants** component
+ * Alert wrapper **Tailwind Variants** component
  *
  * @example
  * ```js
  * const {base, mainWrapper, title, description} = input({...})
  *
  * <div className={base())}>
- *     // start content comes here if present
- *      <div classsName ={mainWrapper()}>
- *        <div className={title()}>Title</div>
- *        <div className={description()}>Description</div>
+ *    <div className = {icon()}>
+ *    // icon
  *     </div>
- *    // end content comes here if present
- *    // close button
+ *
+ *    <div className = "innerwrapper">
+ *        // start content comes here if present
+ *         <div classsName ={mainWrapper()}>
+ *           <div className={title()}>Title</div>
+ *           <div className={description()}>Description</div>
+ *        </div>
+ *       // end content comes here if present
+ *     </div>
+ *
+ *    <button>
+ *      // close button
+ *    </button>
  * </div>
  * ```
  */
+
 const alert = tv({
   slots: {
-    base: [
-      "group flex flex-row w-[350px] justify-start items-start data-[hidden=true]:hidden px-4 py-3",
-    ],
-    title: ["text-medium text-foreground-100 block"],
-    description: ["text-small text-foreground-100 block"],
-    mainWrapper: ["w-full px-3 flex flex-col h-full box-border items-start justify-center"],
-    closeButton: [],
+    base: ["group flex flex-row w-[342px] h-[68px]  p-[12px]"],
+    title: ["text-medium font-normal block h-[24px]"],
+    description: ["text-small font-normal h-[20px]"],
+    mainWrapper: ["w-[268px] h-[44px] ml-[20px] flex flex-col box-border items-start"],
+    closeButton: ["w-[24px h-[24px] cursor-pointer relative"],
   },
   variants: {
     color: {
       default: {
-        base: ["bg-default-200", "border-default-200"],
-        title: ["text-white"],
-        description: ["text-white"],
+        base: ["bg-default-100"],
+        title: ["text-foreground"],
+        description: ["text-[default-600]"],
       },
       primary: {
-        base: ["bg-primary-50", "border-primary-200"],
-        title: ["text-primary-500"],
-        description: ["text-primary-500"],
+        base: ["bg-primary-50"],
+        title: ["text-primary"],
+        description: ["text-primary"],
       },
       secondary: {
-        base: ["bg-secondary-50", "border-secondary-200"],
-        title: ["text-secondary-500"],
-        description: ["text-secondary-500"],
+        base: ["bg-secondary-50"],
+        title: ["text-secondary"],
+        description: ["text-secondary"],
       },
       success: {
-        base: ["bg-success-50", "border-success-200"],
-        title: ["text-success-300"],
-        description: ["text-success-300"],
+        base: ["bg-success-50"],
+        title: ["text-success"],
+        description: ["text-success"],
       },
       warning: {
-        base: ["bg-warning-50", "border-warning-200"],
-        title: ["text-warning-300"],
-        description: ["text-warning-300"],
+        base: ["bg-warning-50"],
+        title: ["text-[#F7B750]"],
+        description: ["text-[#F7B750]"],
       },
       danger: {
-        base: ["bg-danger-50", "border-danger-200"],
-        title: ["text-danger-300"],
-        description: ["text-danger-300"],
+        base: ["bg-danger-50 "],
+        title: ["text-[#F31260]"],
+        description: ["text-[#F31260]"],
       },
     },
     radius: {
@@ -67,21 +75,22 @@ const alert = tv({
         base: "rounded-none",
       },
       sm: {
-        base: "rounded-sm",
+        base: "rounded-[12px]",
       },
       md: {
-        base: "rounded-md",
+        base: "rounded-[16px]",
       },
       lg: {
-        base: "rounded-lg",
+        base: "rounded-[22px]",
       },
       full: {
-        base: "rounded-full",
+        base: "rounded-[9999px]",
       },
     },
   },
   defaultVariants: {
     color: "default",
+    radius: "md",
   },
 });
 

From e18521221252f842adae4d64b79504414d95fee3 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 1 Sep 2024 21:38:06 +0530
Subject: [PATCH 28/62] feat(alert): fixed default props

---
 packages/components/alert/stories/alert.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index 01dc55bfb2..74c4a4577d 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -33,6 +33,7 @@ export default {
 const defaultProps = {
   ...alert.defaultVariants,
   title: "Email Sent!!",
+  description: "You will get a reply soon",
 };
 
 const Template = (args) => <Alert {...args} />;

From 9c727c244aa6a37a2893b508e63c24bb91721576 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 1 Sep 2024 21:44:26 +0530
Subject: [PATCH 29/62] feat(alert): fixed theme docs

---
 packages/core/theme/src/components/alert.ts | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index 21746b532e..3337d3e362 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -9,18 +9,12 @@ import {tv} from "../utils/tv";
  * const {base, mainWrapper, title, description} = input({...})
  *
  * <div className={base())}>
- *    <div className = {icon()}>
  *    // icon
- *     </div>
  *
- *    <div className = "innerwrapper">
- *        // start content comes here if present
- *         <div classsName ={mainWrapper()}>
- *           <div className={title()}>Title</div>
- *           <div className={description()}>Description</div>
- *        </div>
- *       // end content comes here if present
- *     </div>
+ *    <div classsName ={mainWrapper()}>
+ *       <div className={title()}>Title</div>
+ *       <div className={description()}>Description</div>
+ *   </div>
  *
  *    <button>
  *      // close button

From 26198ec6ee52981820041ba1f800446eea7993b4 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 1 Sep 2024 21:54:56 +0530
Subject: [PATCH 30/62] feat(alert): add logic for icons

---
 packages/components/alert/src/alert-icons.tsx | 59 +++++++++++++++++++
 packages/components/alert/src/alert.tsx       | 35 ++++++++++-
 packages/components/alert/src/use-alert.ts    |  1 +
 3 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/alert/src/alert-icons.tsx

diff --git a/packages/components/alert/src/alert-icons.tsx b/packages/components/alert/src/alert-icons.tsx
new file mode 100644
index 0000000000..c7c855435a
--- /dev/null
+++ b/packages/components/alert/src/alert-icons.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+
+export const iconColor = (color: string) => {
+  switch (color) {
+    case "primary":
+      return "#006FEE";
+    case "secondary":
+      return "#9353D3";
+    case "success":
+      return "#17C964";
+    case "warning":
+      return "#F5A524";
+    case "danger":
+      return "#F31260";
+    default:
+      return "white";
+  }
+};
+
+export const SuccessIcon = () => {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" 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.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z"
+        fill={iconColor("success")}
+      />
+    </svg>
+  );
+};
+export const DangerIcon = () => {
+  return (
+    <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M17.51 3.85L11.57 0.42C10.6 -0.14 9.4 -0.14 8.42 0.42L2.49 3.85C1.52 4.41 0.919998 5.45 0.919998 6.58V13.42C0.919998 14.54 1.52 15.58 2.49 16.15L8.43 19.58C9.4 20.14 10.6 20.14 11.58 19.58L17.52 16.15C18.49 15.59 19.09 14.55 19.09 13.42V6.58C19.08 5.45 18.48 4.42 17.51 3.85ZM9.25 5.75C9.25 5.34 9.59 5 10 5C10.41 5 10.75 5.34 10.75 5.75V11C10.75 11.41 10.41 11.75 10 11.75C9.59 11.75 9.25 11.41 9.25 11V5.75ZM10.92 14.63C10.87 14.75 10.8 14.86 10.71 14.96C10.52 15.15 10.27 15.25 10 15.25C9.87 15.25 9.74 15.22 9.62 15.17C9.49 15.12 9.39 15.05 9.29 14.96C9.2 14.86 9.13 14.75 9.07 14.63C9.02 14.51 9 14.38 9 14.25C9 13.99 9.1 13.73 9.29 13.54C9.39 13.45 9.49 13.38 9.62 13.33C9.99 13.17 10.43 13.26 10.71 13.54C10.8 13.64 10.87 13.74 10.92 13.87C10.97 13.99 11 14.12 11 14.25C11 14.38 10.97 14.51 10.92 14.63Z"
+        fill={iconColor("danger")}
+      />
+    </svg>
+  );
+};
+export const WarningIcon = () => {
+  return (
+    <svg fill="none" height="20" viewBox="0 0 22 20" width="22" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M20.76 13.92L14.36 2.4C13.5 0.85 12.31 0 11 0C9.69 0 8.5 0.85 7.64 2.4L1.24 13.92C0.43 15.39 0.340001 16.8 0.99 17.91C1.64 19.02 2.92 19.63 4.6 19.63H17.4C19.08 19.63 20.36 19.02 21.01 17.91C21.66 16.8 21.57 15.38 20.76 13.92ZM10.25 7C10.25 6.59 10.59 6.25 11 6.25C11.41 6.25 11.75 6.59 11.75 7V12C11.75 12.41 11.41 12.75 11 12.75C10.59 12.75 10.25 12.41 10.25 12V7ZM11.71 15.71C11.66 15.75 11.61 15.79 11.56 15.83C11.5 15.87 11.44 15.9 11.38 15.92C11.32 15.95 11.26 15.97 11.19 15.98C11.13 15.99 11.06 16 11 16C10.94 16 10.87 15.99 10.8 15.98C10.74 15.97 10.68 15.95 10.62 15.92C10.56 15.9 10.5 15.87 10.44 15.83C10.39 15.79 10.34 15.75 10.29 15.71C10.11 15.52 10 15.26 10 15C10 14.74 10.11 14.48 10.29 14.29C10.34 14.25 10.39 14.21 10.44 14.17C10.5 14.13 10.56 14.1 10.62 14.08C10.68 14.05 10.74 14.03 10.8 14.02C10.93 13.99 11.07 13.99 11.19 14.02C11.26 14.03 11.32 14.05 11.38 14.08C11.44 14.1 11.5 14.13 11.56 14.17C11.61 14.21 11.66 14.25 11.71 14.29C11.89 14.48 12 14.74 12 15C12 15.26 11.89 15.52 11.71 15.71Z"
+        fill={iconColor("warning")}
+      />
+    </svg>
+  );
+};
+export const InfoBoldIcon = (props: {color: string}) => {
+  return (
+    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z"
+        fill={iconColor(props.color)}
+      />
+    </svg>
+  );
+};
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 666ef0916c..2f9e78b0ab 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -3,9 +3,40 @@ import {forwardRef} from "@nextui-org/system";
 import {CloseIcon} from "@nextui-org/shared-icons";
 
 import {useAlert, UseAlertProps} from "./use-alert";
+import {DangerIcon, InfoBoldIcon, SuccessIcon, WarningIcon} from "./alert-icons";
 
 export interface alertProps extends UseAlertProps {}
 
+const AlertIcon = (props: {color: string}) => {
+  switch (props.color) {
+    case "success":
+      return <SuccessIcon />;
+    case "warning":
+      return <WarningIcon />;
+    case "danger":
+      return <DangerIcon />;
+    default:
+      return <InfoBoldIcon color={props.color} />;
+  }
+};
+
+const closeIconColor = (color: string) => {
+  switch (color) {
+    case "primary":
+      return "#004493";
+    case "secondary":
+      return "#481878";
+    case "success":
+      return "#0E793C";
+    case "warning":
+      return "#936316";
+    case "danger":
+      return "#920B3A";
+    default:
+      return "#71717A";
+  }
+};
+
 const Alert = forwardRef<"div", alertProps>((props, ref) => {
   const {
     title,
@@ -19,6 +50,7 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
     getDescriptionProps,
     getTitleProps,
     getCloseButtonProps,
+    color,
   } = useAlert({...props, ref});
 
   const mainWrapper = useMemo(() => {
@@ -34,10 +66,11 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
     return (
       visible && (
         <div ref={domRef} {...getBaseProps()}>
+          <AlertIcon color={color} />
           {mainWrapper}
           {isCloseable && (
             <button onClick={handleClose} {...getCloseButtonProps()}>
-              <CloseIcon />
+              <CloseIcon color={closeIconColor(color)} height={20} width={20} />
             </button>
           )}
         </div>
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index 541c732b29..a5454f79d3 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -97,6 +97,7 @@ export function useAlert(originalProps: UseAlertProps) {
     getMainWrapperProps,
     getDescriptionProps,
     getTitleProps,
+    color: variantProps["color"],
     getCloseButtonProps,
   };
 }

From b29ccae8543a06181c583ddd3f54dce55ec7037d Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Mon, 2 Sep 2024 15:18:27 +0530
Subject: [PATCH 31/62] feat(alert): begin to add docs

---
 apps/docs/content/components/alert/colors.ts  | 27 +++++++
 apps/docs/content/components/alert/index.ts   | 11 +++
 .../content/components/alert/isCloseable.ts   | 32 ++++++++
 apps/docs/content/components/alert/radius.ts  | 27 +++++++
 apps/docs/content/components/alert/usage.ts   | 22 ++++++
 apps/docs/content/components/index.ts         |  1 +
 apps/docs/content/docs/components/alert.mdx   | 75 +++++++++++++++++++
 apps/docs/tsconfig.json                       |  2 +-
 8 files changed, 196 insertions(+), 1 deletion(-)
 create mode 100644 apps/docs/content/components/alert/colors.ts
 create mode 100644 apps/docs/content/components/alert/index.ts
 create mode 100644 apps/docs/content/components/alert/isCloseable.ts
 create mode 100644 apps/docs/content/components/alert/radius.ts
 create mode 100644 apps/docs/content/components/alert/usage.ts
 create mode 100644 apps/docs/content/docs/components/alert.mdx

diff --git a/apps/docs/content/components/alert/colors.ts b/apps/docs/content/components/alert/colors.ts
new file mode 100644
index 0000000000..2e2c3e27c3
--- /dev/null
+++ b/apps/docs/content/components/alert/colors.ts
@@ -0,0 +1,27 @@
+const App = `import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "Email Sent!!";
+  const description ="You will get a reply soon";
+
+  return (
+    <div className="flex items-center justify-center w-screen h-screen">
+        <div className="flex flex-col">
+            {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+                <div key={color} className="w-full flex justify-between items-center my-3">
+                    <h4 className="h4 mr-4 text-md">{color}</h4>
+                    <Alert title = {title} description = {description} color={color} />
+                </div>
+            ))}
+        </div>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/index.ts b/apps/docs/content/components/alert/index.ts
new file mode 100644
index 0000000000..f1c26c42d9
--- /dev/null
+++ b/apps/docs/content/components/alert/index.ts
@@ -0,0 +1,11 @@
+import colors from "./colors";
+import usage from "./usage";
+import isCloseable from "./isCloseable";
+import radius from "./radius";
+
+export const alertContent = {
+  colors,
+  usage,
+  isCloseable,
+  radius,
+};
diff --git a/apps/docs/content/components/alert/isCloseable.ts b/apps/docs/content/components/alert/isCloseable.ts
new file mode 100644
index 0000000000..42c5d54c6a
--- /dev/null
+++ b/apps/docs/content/components/alert/isCloseable.ts
@@ -0,0 +1,32 @@
+const App = `import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "Email Sent!!";
+  const description ="You will get a reply soon";
+
+  return (
+    <div className="flex items-center justify-center w-screen h-screen">
+        <div className="flex flex-col">
+
+            <div className="w-full flex-col items-center my-3">
+                <h2 className="my-2 h2">isCloseable = true</h2>
+                <Alert title = {title} description = {description} isCloseable={true} />
+            </div>
+
+            <div className="w-full flex-col items-center my-3">
+                <h2 className="my-2 h2">isCloseable = false</h2>
+                <Alert title = {title} description = {description} isCloseable={false} />
+            </div>
+            
+        </div>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/radius.ts b/apps/docs/content/components/alert/radius.ts
new file mode 100644
index 0000000000..2e8349826e
--- /dev/null
+++ b/apps/docs/content/components/alert/radius.ts
@@ -0,0 +1,27 @@
+const App = `import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "Email Sent!!";
+  const description ="You will get a reply soon";
+
+  return (
+    <div className="flex items-center justify-center w-screen h-screen">
+        <div className="flex flex-col">
+            {["none", "sm", "md", "lg", "full"].map((radius) => (
+                <div key={radius} className="w-full flex justify-between items-center my-3">
+                <h4 className="h4 mr-4 text-md">{radius}</h4>
+                <Alert title = {title} description = {description} radius={radius} />
+                </div>
+            ))}
+        </div>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/usage.ts b/apps/docs/content/components/alert/usage.ts
new file mode 100644
index 0000000000..2786759f71
--- /dev/null
+++ b/apps/docs/content/components/alert/usage.ts
@@ -0,0 +1,22 @@
+const App = `import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "Email Sent!!";
+  const description ="You will get a reply soon";
+
+  return (
+    <div className="flex items-center justify-center w-screen h-screen">
+        <div className="flex flex-wrap gap-4 items-center">
+            <Alert color="default" title = {title} description = {description}/>
+        </div>
+    </div
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/index.ts b/apps/docs/content/components/index.ts
index ac6e664826..2641e4c404 100644
--- a/apps/docs/content/components/index.ts
+++ b/apps/docs/content/components/index.ts
@@ -31,3 +31,4 @@ export * from "./dropdown";
 export * from "./navbar";
 export * from "./table";
 export * from "./autocomplete";
+export * from "./alert";
diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
new file mode 100644
index 0000000000..f792449d3b
--- /dev/null
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -0,0 +1,75 @@
+---
+title: "Alert"
+description: "Alerts are temporary notifications that provide concise feedback about an action or event."
+---
+
+import {alertContent} from "@/content/components/alert";
+
+# Alert
+
+Alerts are temporary notifications that provide concise feedback about an action or event.
+
+<ComponentLinks component="alert"/>
+
+---
+
+
+
+## Installation
+
+<PackageManagers
+  showGlobalInstallWarning
+  commands={{
+    cli: "npx nextui-cli@latest add alert",
+    npm: "npm install @nextui-org/alert",
+    yarn: "yarn add @nextui-org/alert",
+    pnpm: "pnpm add @nextui-org/alert",
+    bun: "bun add @nextui-org/alert"
+  }}
+/>
+
+## Import
+
+
+<ImportTabs
+  commands={{
+    main: 'import {Alert} from "@nextui-org/react";',
+    individual: 'import {Alert} from "@nextui-org/button";',
+  }}
+/>
+
+## Usage
+
+<CodeDemo title="Usage" files={alertContent.usage} />
+
+### Radius
+
+<CodeDemo title="Radius" files={alertContent.radius} />
+
+### Colors
+
+<CodeDemo title="Colors" files={alertContent.colors} />
+
+
+### IsCloseable
+
+If `isCloseable` is true, a close button appear on alert which can be used to close it.
+It is set to true by default.
+
+<CodeDemo title="Loading" files={alertContent.isCloseable} />
+
+
+<Spacer y={4} />
+
+
+## API
+
+### Alert Props
+
+| Attribute        | Type                                                                         | Description                                                  | Default   |
+| ---------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------ | --------- |
+| title            | `string`                                                                     | Title for alert                                              | -         |
+| description      | `ReactNode`                                                                  | Description for alert message                                | -         |
+| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The button color theme.                                      | `default` |
+| radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The button border radius.                                    | `md`      |
+| isCloseable      | `boolean`                                                                    | Whether the close button should be displayed.                | `true`    |
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 6b641d460b..99b5a06223 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -25,6 +25,6 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     ".contentlayer/generated"
-  ],
+, "content/docs/components/alert.mdx"  ],
   "exclude": ["node_modules", "next-redirect.js"]
 }

From c74b0649372bc138ebf94a17a4744eb648815b0d Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Tue, 3 Sep 2024 18:03:36 +0530
Subject: [PATCH 32/62] chore(alert): implement the changes suggested in code
 review

---
 apps/docs/tsconfig.json                       |  2 +-
 packages/components/alert/src/alert-icons.tsx | 82 ++++++++-----------
 packages/components/alert/src/alert.tsx       | 39 +--------
 packages/components/alert/src/use-alert.ts    | 20 +++--
 packages/core/theme/src/components/alert.ts   | 10 +--
 .../utilities/shared-icons/src/danger.tsx     | 21 +++++
 packages/utilities/shared-icons/src/index.ts  |  5 +-
 .../shared-icons/src/info-circle.tsx          | 21 +++++
 .../utilities/shared-icons/src/success.tsx    | 21 +++++
 .../utilities/shared-icons/src/warning.tsx    | 21 +++++
 10 files changed, 147 insertions(+), 95 deletions(-)
 create mode 100644 packages/utilities/shared-icons/src/danger.tsx
 create mode 100644 packages/utilities/shared-icons/src/info-circle.tsx
 create mode 100644 packages/utilities/shared-icons/src/success.tsx
 create mode 100644 packages/utilities/shared-icons/src/warning.tsx

diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 99b5a06223..6b641d460b 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -25,6 +25,6 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     ".contentlayer/generated"
-, "content/docs/components/alert.mdx"  ],
+  ],
   "exclude": ["node_modules", "next-redirect.js"]
 }
diff --git a/packages/components/alert/src/alert-icons.tsx b/packages/components/alert/src/alert-icons.tsx
index c7c855435a..6180c26bfa 100644
--- a/packages/components/alert/src/alert-icons.tsx
+++ b/packages/components/alert/src/alert-icons.tsx
@@ -1,59 +1,47 @@
 import React from "react";
+import {
+  CloseIcon,
+  DangerIcon,
+  InfoCircleIcon,
+  SuccessIcon,
+  WarningIcon,
+} from "@nextui-org/shared-icons";
 
-export const iconColor = (color: string) => {
-  switch (color) {
+export const AlertCloseIcon = (props: {color: string}) => {
+  switch (props.color) {
     case "primary":
-      return "#006FEE";
+      return <CloseIcon className={`fill-current text-primary-200`} height={20} width={20} />;
+
     case "secondary":
-      return "#9353D3";
+      return <CloseIcon className={`fill-current text-secondary-200`} height={20} width={20} />;
+
     case "success":
-      return "#17C964";
+      return <CloseIcon className={`fill-current text-success-200`} height={20} width={20} />;
+
     case "warning":
-      return "#F5A524";
+      return <CloseIcon className={`fill-current text-warning-200`} height={20} width={20} />;
+
     case "danger":
-      return "#F31260";
+      return <CloseIcon className={`fill-current text-danger-200`} height={20} width={20} />;
+
     default:
-      return "white";
+      return <CloseIcon className={`fill-current text-default-400`} height={20} width={20} />;
   }
 };
 
-export const SuccessIcon = () => {
-  return (
-    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" 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.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z"
-        fill={iconColor("success")}
-      />
-    </svg>
-  );
-};
-export const DangerIcon = () => {
-  return (
-    <svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M17.51 3.85L11.57 0.42C10.6 -0.14 9.4 -0.14 8.42 0.42L2.49 3.85C1.52 4.41 0.919998 5.45 0.919998 6.58V13.42C0.919998 14.54 1.52 15.58 2.49 16.15L8.43 19.58C9.4 20.14 10.6 20.14 11.58 19.58L17.52 16.15C18.49 15.59 19.09 14.55 19.09 13.42V6.58C19.08 5.45 18.48 4.42 17.51 3.85ZM9.25 5.75C9.25 5.34 9.59 5 10 5C10.41 5 10.75 5.34 10.75 5.75V11C10.75 11.41 10.41 11.75 10 11.75C9.59 11.75 9.25 11.41 9.25 11V5.75ZM10.92 14.63C10.87 14.75 10.8 14.86 10.71 14.96C10.52 15.15 10.27 15.25 10 15.25C9.87 15.25 9.74 15.22 9.62 15.17C9.49 15.12 9.39 15.05 9.29 14.96C9.2 14.86 9.13 14.75 9.07 14.63C9.02 14.51 9 14.38 9 14.25C9 13.99 9.1 13.73 9.29 13.54C9.39 13.45 9.49 13.38 9.62 13.33C9.99 13.17 10.43 13.26 10.71 13.54C10.8 13.64 10.87 13.74 10.92 13.87C10.97 13.99 11 14.12 11 14.25C11 14.38 10.97 14.51 10.92 14.63Z"
-        fill={iconColor("danger")}
-      />
-    </svg>
-  );
-};
-export const WarningIcon = () => {
-  return (
-    <svg fill="none" height="20" viewBox="0 0 22 20" width="22" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M20.76 13.92L14.36 2.4C13.5 0.85 12.31 0 11 0C9.69 0 8.5 0.85 7.64 2.4L1.24 13.92C0.43 15.39 0.340001 16.8 0.99 17.91C1.64 19.02 2.92 19.63 4.6 19.63H17.4C19.08 19.63 20.36 19.02 21.01 17.91C21.66 16.8 21.57 15.38 20.76 13.92ZM10.25 7C10.25 6.59 10.59 6.25 11 6.25C11.41 6.25 11.75 6.59 11.75 7V12C11.75 12.41 11.41 12.75 11 12.75C10.59 12.75 10.25 12.41 10.25 12V7ZM11.71 15.71C11.66 15.75 11.61 15.79 11.56 15.83C11.5 15.87 11.44 15.9 11.38 15.92C11.32 15.95 11.26 15.97 11.19 15.98C11.13 15.99 11.06 16 11 16C10.94 16 10.87 15.99 10.8 15.98C10.74 15.97 10.68 15.95 10.62 15.92C10.56 15.9 10.5 15.87 10.44 15.83C10.39 15.79 10.34 15.75 10.29 15.71C10.11 15.52 10 15.26 10 15C10 14.74 10.11 14.48 10.29 14.29C10.34 14.25 10.39 14.21 10.44 14.17C10.5 14.13 10.56 14.1 10.62 14.08C10.68 14.05 10.74 14.03 10.8 14.02C10.93 13.99 11.07 13.99 11.19 14.02C11.26 14.03 11.32 14.05 11.38 14.08C11.44 14.1 11.5 14.13 11.56 14.17C11.61 14.21 11.66 14.25 11.71 14.29C11.89 14.48 12 14.74 12 15C12 15.26 11.89 15.52 11.71 15.71Z"
-        fill={iconColor("warning")}
-      />
-    </svg>
-  );
-};
-export const InfoBoldIcon = (props: {color: string}) => {
-  return (
-    <svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z"
-        fill={iconColor(props.color)}
-      />
-    </svg>
-  );
+export const AlertIcon = (props: {color: string}) => {
+  switch (props.color) {
+    case "primary":
+      return <SuccessIcon className={`fill-current text-primary`} />;
+    case "secondary":
+      return <SuccessIcon className={`fill-current text-secondary`} />;
+    case "success":
+      return <SuccessIcon className={`fill-current text-success`} />;
+    case "warning":
+      return <WarningIcon className={`fill-current text-warning`} />;
+    case "danger":
+      return <DangerIcon className={`fill-current text-danger`} />;
+    default:
+      return <InfoCircleIcon className={`fill-current text-default-foreground`} />;
+  }
 };
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 2f9e78b0ab..2f9b396987 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -1,48 +1,17 @@
 import React, {useMemo} from "react";
 import {forwardRef} from "@nextui-org/system";
-import {CloseIcon} from "@nextui-org/shared-icons";
 
 import {useAlert, UseAlertProps} from "./use-alert";
-import {DangerIcon, InfoBoldIcon, SuccessIcon, WarningIcon} from "./alert-icons";
+import {AlertCloseIcon, AlertIcon} from "./alert-icons";
 
 export interface alertProps extends UseAlertProps {}
 
-const AlertIcon = (props: {color: string}) => {
-  switch (props.color) {
-    case "success":
-      return <SuccessIcon />;
-    case "warning":
-      return <WarningIcon />;
-    case "danger":
-      return <DangerIcon />;
-    default:
-      return <InfoBoldIcon color={props.color} />;
-  }
-};
-
-const closeIconColor = (color: string) => {
-  switch (color) {
-    case "primary":
-      return "#004493";
-    case "secondary":
-      return "#481878";
-    case "success":
-      return "#0E793C";
-    case "warning":
-      return "#936316";
-    case "danger":
-      return "#920B3A";
-    default:
-      return "#71717A";
-  }
-};
-
 const Alert = forwardRef<"div", alertProps>((props, ref) => {
   const {
     title,
     description,
     isCloseable,
-    visible,
+    isVisible,
     handleClose,
     domRef,
     getBaseProps,
@@ -64,13 +33,13 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
 
   const baseWrapper = useMemo(() => {
     return (
-      visible && (
+      isVisible && (
         <div ref={domRef} {...getBaseProps()}>
           <AlertIcon color={color} />
           {mainWrapper}
           {isCloseable && (
             <button onClick={handleClose} {...getCloseButtonProps()}>
-              <CloseIcon color={closeIconColor(color)} height={20} width={20} />
+              <AlertCloseIcon color={color} />
             </button>
           )}
         </div>
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index a5454f79d3..8edda7bbea 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -11,13 +11,21 @@ interface Props extends HTMLNextUIProps<"div"> {
   /**
    * Ref to the DOM node.
    */
-
   ref?: ReactRef<HTMLDivElement | null>;
 
+  /**
+   * title of the alert message
+   */
   title: string;
+
+  /**
+   * Main body of the alert message
+   */
   description: ReactNode;
 
-  // whether the alert can be closed by user
+  /**
+   *  whether the alert can be closed by user
+   */
   isCloseable?: boolean;
 
   /**
@@ -41,15 +49,15 @@ export type UseAlertProps = Props & AlertVariantProps;
 export function useAlert(originalProps: UseAlertProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, alert.variantKeys);
 
-  //isCloseable is true by default if not provided in props
+  // isCloseable is true by default if not provided in props
   const {title, description, isCloseable, ref, classNames} = {
     isCloseable: true,
     ...props,
   };
 
-  const [visible, setVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(true);
   const handleClose = () => {
-    setVisible(() => false);
+    setIsVisible(() => false);
   };
 
   const domRef = useDOMRef(ref);
@@ -90,7 +98,7 @@ export function useAlert(originalProps: UseAlertProps) {
     title,
     description,
     isCloseable,
-    visible,
+    isVisible,
     handleClose,
     domRef,
     getBaseProps,
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index 3337d3e362..b0e571b619 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -55,13 +55,13 @@ const alert = tv({
       },
       warning: {
         base: ["bg-warning-50"],
-        title: ["text-[#F7B750]"],
-        description: ["text-[#F7B750]"],
+        title: ["text-warning-foreground"],
+        description: ["text-warning-foreground"],
       },
       danger: {
-        base: ["bg-danger-50 "],
-        title: ["text-[#F31260]"],
-        description: ["text-[#F31260]"],
+        base: ["bg-danger-50"],
+        title: ["text-danger-foreground"],
+        description: ["text-danger-foreground"],
       },
     },
     radius: {
diff --git a/packages/utilities/shared-icons/src/danger.tsx b/packages/utilities/shared-icons/src/danger.tsx
new file mode 100644
index 0000000000..bacfbb6b71
--- /dev/null
+++ b/packages/utilities/shared-icons/src/danger.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import {IconSvgProps} from "./types";
+export const DangerIcon = (
+  props: IconSvgProps & {
+    className?: string;
+  },
+) => {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M17.51 3.85L11.57 0.42C10.6 -0.14 9.4 -0.14 8.42 0.42L2.49 3.85C1.52 4.41 0.919998 5.45 0.919998 6.58V13.42C0.919998 14.54 1.52 15.58 2.49 16.15L8.43 19.58C9.4 20.14 10.6 20.14 11.58 19.58L17.52 16.15C18.49 15.59 19.09 14.55 19.09 13.42V6.58C19.08 5.45 18.48 4.42 17.51 3.85ZM9.25 5.75C9.25 5.34 9.59 5 10 5C10.41 5 10.75 5.34 10.75 5.75V11C10.75 11.41 10.41 11.75 10 11.75C9.59 11.75 9.25 11.41 9.25 11V5.75ZM10.92 14.63C10.87 14.75 10.8 14.86 10.71 14.96C10.52 15.15 10.27 15.25 10 15.25C9.87 15.25 9.74 15.22 9.62 15.17C9.49 15.12 9.39 15.05 9.29 14.96C9.2 14.86 9.13 14.75 9.07 14.63C9.02 14.51 9 14.38 9 14.25C9 13.99 9.1 13.73 9.29 13.54C9.39 13.45 9.49 13.38 9.62 13.33C9.99 13.17 10.43 13.26 10.71 13.54C10.8 13.64 10.87 13.74 10.92 13.87C10.97 13.99 11 14.12 11 14.25C11 14.38 10.97 14.51 10.92 14.63Z" />
+    </svg>
+  );
+};
diff --git a/packages/utilities/shared-icons/src/index.ts b/packages/utilities/shared-icons/src/index.ts
index d4a719af5c..dc1504605b 100644
--- a/packages/utilities/shared-icons/src/index.ts
+++ b/packages/utilities/shared-icons/src/index.ts
@@ -33,7 +33,10 @@ export * from "./arrow-right";
 export * from "./arrow-left";
 export * from "./link";
 export * from "./selector";
-
+export * from "./info-circle";
+export * from "./warning";
+export * from "./danger";
+export * from "./success";
 // sets
 export * from "./bulk";
 export * from "./bold";
diff --git a/packages/utilities/shared-icons/src/info-circle.tsx b/packages/utilities/shared-icons/src/info-circle.tsx
new file mode 100644
index 0000000000..6dea6162b3
--- /dev/null
+++ b/packages/utilities/shared-icons/src/info-circle.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import {IconSvgProps} from "./types";
+export const InfoCircleIcon = (
+  props: IconSvgProps & {
+    className?: string;
+  },
+) => {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z" />
+    </svg>
+  );
+};
diff --git a/packages/utilities/shared-icons/src/success.tsx b/packages/utilities/shared-icons/src/success.tsx
new file mode 100644
index 0000000000..8c51f705fb
--- /dev/null
+++ b/packages/utilities/shared-icons/src/success.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import {IconSvgProps} from "./types";
+export const SuccessIcon = (
+  props: IconSvgProps & {
+    className?: string;
+  },
+) => {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <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.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" />
+    </svg>
+  );
+};
diff --git a/packages/utilities/shared-icons/src/warning.tsx b/packages/utilities/shared-icons/src/warning.tsx
new file mode 100644
index 0000000000..674eee39b7
--- /dev/null
+++ b/packages/utilities/shared-icons/src/warning.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import {IconSvgProps} from "./types";
+export const WarningIcon = (
+  props: IconSvgProps & {
+    className?: string;
+  },
+) => {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M20.76 13.92L14.36 2.4C13.5 0.85 12.31 0 11 0C9.69 0 8.5 0.85 7.64 2.4L1.24 13.92C0.43 15.39 0.340001 16.8 0.99 17.91C1.64 19.02 2.92 19.63 4.6 19.63H17.4C19.08 19.63 20.36 19.02 21.01 17.91C21.66 16.8 21.57 15.38 20.76 13.92ZM10.25 7C10.25 6.59 10.59 6.25 11 6.25C11.41 6.25 11.75 6.59 11.75 7V12C11.75 12.41 11.41 12.75 11 12.75C10.59 12.75 10.25 12.41 10.25 12V7ZM11.71 15.71C11.66 15.75 11.61 15.79 11.56 15.83C11.5 15.87 11.44 15.9 11.38 15.92C11.32 15.95 11.26 15.97 11.19 15.98C11.13 15.99 11.06 16 11 16C10.94 16 10.87 15.99 10.8 15.98C10.74 15.97 10.68 15.95 10.62 15.92C10.56 15.9 10.5 15.87 10.44 15.83C10.39 15.79 10.34 15.75 10.29 15.71C10.11 15.52 10 15.26 10 15C10 14.74 10.11 14.48 10.29 14.29C10.34 14.25 10.39 14.21 10.44 14.17C10.5 14.13 10.56 14.1 10.62 14.08C10.68 14.05 10.74 14.03 10.8 14.02C10.93 13.99 11.07 13.99 11.19 14.02C11.26 14.03 11.32 14.05 11.38 14.08C11.44 14.1 11.5 14.13 11.56 14.17C11.61 14.21 11.66 14.25 11.71 14.29C11.89 14.48 12 14.74 12 15C12 15.26 11.89 15.52 11.71 15.71Z" />
+    </svg>
+  );
+};

From 64a4178d91df74532fb8eca915ed44c1838f3f3a Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Tue, 3 Sep 2024 18:25:35 +0530
Subject: [PATCH 33/62] feat(alert): add onclose prop to alert

---
 packages/components/alert/src/alert.tsx    |  4 ++--
 packages/components/alert/src/use-alert.ts | 26 ++++++++++++++++------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 2f9b396987..c6cf499d96 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -12,7 +12,7 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
     description,
     isCloseable,
     isVisible,
-    handleClose,
+    onClose,
     domRef,
     getBaseProps,
     getMainWrapperProps,
@@ -38,7 +38,7 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
           <AlertIcon color={color} />
           {mainWrapper}
           {isCloseable && (
-            <button onClick={handleClose} {...getCloseButtonProps()}>
+            <button onClick={onClose} {...getCloseButtonProps()}>
               <AlertCloseIcon color={color} />
             </button>
           )}
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index 8edda7bbea..fa8fd95ba0 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -28,6 +28,11 @@ interface Props extends HTMLNextUIProps<"div"> {
    */
   isCloseable?: boolean;
 
+  /**
+   * function which is called when close button is clicked
+   */
+  onClose?: () => void;
+
   /**
    * Classname or List of classes to change the classNames of the element.
    * if `className` is passed, it will be added to the base slot.
@@ -49,17 +54,24 @@ export type UseAlertProps = Props & AlertVariantProps;
 export function useAlert(originalProps: UseAlertProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, alert.variantKeys);
 
-  // isCloseable is true by default if not provided in props
-  const {title, description, isCloseable, ref, classNames} = {
-    isCloseable: true,
-    ...props,
-  };
-
   const [isVisible, setIsVisible] = useState(true);
   const handleClose = () => {
     setIsVisible(() => false);
   };
 
+  const {title, description, onClose, isCloseable, ref, classNames} = {
+    /**
+     *  isCloseable is true by default if not provided in props
+     */
+    isCloseable: true,
+
+    /**
+     * By default, onClose simply closes the alert
+     */
+    onClose: handleClose,
+    ...props,
+  };
+
   const domRef = useDOMRef(ref);
 
   const slots = useMemo(() => alert({...variantProps}), [objectToDeps(variantProps)]);
@@ -99,7 +111,7 @@ export function useAlert(originalProps: UseAlertProps) {
     description,
     isCloseable,
     isVisible,
-    handleClose,
+    onClose,
     domRef,
     getBaseProps,
     getMainWrapperProps,

From a83282b84968c101a7de56aae8513eaf583f34b9 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Tue, 3 Sep 2024 18:31:23 +0530
Subject: [PATCH 34/62] feat(alert): add test cases

---
 .../components/alert/__tests__/alert.test.tsx | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/components/alert/__tests__/alert.test.tsx b/packages/components/alert/__tests__/alert.test.tsx
index ae7ce3c9a9..8e9e531324 100644
--- a/packages/components/alert/__tests__/alert.test.tsx
+++ b/packages/components/alert/__tests__/alert.test.tsx
@@ -1,9 +1,9 @@
 import * as React from "react";
-import {render} from "@testing-library/react";
+import {act, render} from "@testing-library/react";
 
 import {Alert} from "../src";
 
-const title = "Testing title";
+const title = "Testing Title";
 const description = "Testing Description";
 
 describe("Alert", () => {
@@ -26,8 +26,8 @@ describe("Alert", () => {
     const titleElement = wrapper.getByText(title);
     const descriptionElement = wrapper.getByText(description);
 
-    expect(titleElement).toEqual(title);
-    expect(descriptionElement).toEqual(description);
+    expect(titleElement).toContainHTML(title);
+    expect(descriptionElement).toContainHTML(description);
   });
 
   it("should show close button when is Closeable", () => {
@@ -38,11 +38,22 @@ describe("Alert", () => {
   });
 
   it("should not show close button when not is Closeable", () => {
-    const {getByRole} = render(
-      <Alert description={description} isCloseable={false} title={title} />,
-    );
-    const button = getByRole("button");
+    const wrapper = render(<Alert description={description} isCloseable={false} title={title} />);
+    const button = wrapper.queryByRole("button");
 
     expect(button).toBeNull();
   });
+
+  it("should call the onClose function when clicking on close button", async () => {
+    const onClose = jest.fn();
+
+    const wrapper = render(<Alert description={description} title={title} onClose={onClose} />);
+    const button = wrapper.getByRole("button");
+
+    act(() => {
+      button.click();
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
 });

From 12b5f36765f6e21c1f5abf15c505fc33105a66c9 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Tue, 3 Sep 2024 18:42:43 +0530
Subject: [PATCH 35/62] docs(alert): add onClose  event

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

diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index f792449d3b..e83d14847b 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -73,3 +73,9 @@ It is set to true by default.
 | color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The button color theme.                                      | `default` |
 | radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The button border radius.                                    | `md`      |
 | isCloseable      | `boolean`                                                                    | Whether the close button should be displayed.                | `true`    |
+
+### Alert Events
+
+| Attribute    | Type                        | Description                                                 |
+| ------------ | --------------------------- | ----------------------------------------------------------- |
+| onClose      | `() => void`                | Handler that is called when the modal is closed.            |
\ No newline at end of file

From f7fd9c79e7a1fcf498b4dc9b4b5707c4ed94c7bd Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Tue, 3 Sep 2024 22:16:58 +0800
Subject: [PATCH 36/62] feat(docs): add alert to routes.json

---
 apps/docs/config/routes.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json
index 583e220fa7..b38e7c8854 100644
--- a/apps/docs/config/routes.json
+++ b/apps/docs/config/routes.json
@@ -144,6 +144,12 @@
           "keywords": "autocomplete, auto suggest, search, typeahead",
           "path": "/docs/components/autocomplete.mdx"
         },
+        {
+          "key": "alert",
+          "title": "Alert",
+          "keywords": "alert, notification, message",
+          "path": "/docs/components/alert.mdx"
+        },
         {
           "key": "avatar",
           "title": "Avatar",

From 14bea4aa58f06a7d2c0eb43a1ecc8ba13ce7ce41 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Wed, 4 Sep 2024 10:48:26 +0530
Subject: [PATCH 37/62] fix(alert): correct the text colors

---
 packages/core/theme/src/components/alert.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index b0e571b619..cb8852b7a4 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -55,13 +55,13 @@ const alert = tv({
       },
       warning: {
         base: ["bg-warning-50"],
-        title: ["text-warning-foreground"],
-        description: ["text-warning-foreground"],
+        title: ["text-warning"],
+        description: ["text-warning"],
       },
       danger: {
         base: ["bg-danger-50"],
-        title: ["text-danger-foreground"],
-        description: ["text-danger-foreground"],
+        title: ["text-danger"],
+        description: ["text-danger"],
       },
     },
     radius: {

From 44efbafc2eb50e8b3bbcea77e89631614b185f36 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Wed, 4 Sep 2024 15:38:05 +0530
Subject: [PATCH 38/62] docs(alert): fix imports and syntax errors

---
 apps/docs/content/components/alert/isCloseable.ts | 2 +-
 apps/docs/content/components/alert/usage.ts       | 9 +++------
 apps/docs/content/docs/components/alert.mdx       | 8 ++++----
 packages/core/react/package.json                  | 1 +
 packages/core/react/src/index.ts                  | 1 +
 pnpm-lock.yaml                                    | 3 +++
 6 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/docs/content/components/alert/isCloseable.ts b/apps/docs/content/components/alert/isCloseable.ts
index 42c5d54c6a..10438ec18f 100644
--- a/apps/docs/content/components/alert/isCloseable.ts
+++ b/apps/docs/content/components/alert/isCloseable.ts
@@ -5,7 +5,7 @@ export default function App() {
   const description ="You will get a reply soon";
 
   return (
-    <div className="flex items-center justify-center w-screen h-screen">
+    <div className="flex items-center justify-center w-screen h-[400px]">
         <div className="flex flex-col">
 
             <div className="w-full flex-col items-center my-3">
diff --git a/apps/docs/content/components/alert/usage.ts b/apps/docs/content/components/alert/usage.ts
index 2786759f71..89e6b39d3e 100644
--- a/apps/docs/content/components/alert/usage.ts
+++ b/apps/docs/content/components/alert/usage.ts
@@ -3,13 +3,10 @@ const App = `import {Alert} from "@nextui-org/react";
 export default function App() {
   const title = "Email Sent!!";
   const description ="You will get a reply soon";
-
   return (
-    <div className="flex items-center justify-center w-screen h-screen">
-        <div className="flex flex-wrap gap-4 items-center">
-            <Alert color="default" title = {title} description = {description}/>
-        </div>
-    </div
+    <div className="flex items-center justify-center w-screen">
+          <Alert title = {title} description = {description}/>
+    </div>
   );
 }`;
 
diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index e83d14847b..929545fbe1 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -34,7 +34,7 @@ Alerts are temporary notifications that provide concise feedback about an action
 <ImportTabs
   commands={{
     main: 'import {Alert} from "@nextui-org/react";',
-    individual: 'import {Alert} from "@nextui-org/button";',
+    individual: 'import {Alert} from "@nextui-org/alert";',
   }}
 />
 
@@ -70,12 +70,12 @@ It is set to true by default.
 | ---------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------ | --------- |
 | title            | `string`                                                                     | Title for alert                                              | -         |
 | description      | `ReactNode`                                                                  | Description for alert message                                | -         |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The button color theme.                                      | `default` |
-| radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The button border radius.                                    | `md`      |
+| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The alert color theme.                                       | `default` |
+| radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The alert border radius.                                     | `md`      |
 | isCloseable      | `boolean`                                                                    | Whether the close button should be displayed.                | `true`    |
 
 ### Alert Events
 
 | Attribute    | Type                        | Description                                                 |
 | ------------ | --------------------------- | ----------------------------------------------------------- |
-| onClose      | `() => void`                | Handler that is called when the modal is closed.            |
\ No newline at end of file
+| onClose      | `() => void`                | Handler that is called when the close button is clicked.    |
\ No newline at end of file
diff --git a/packages/core/react/package.json b/packages/core/react/package.json
index 4b4588dc6a..872de99ea5 100644
--- a/packages/core/react/package.json
+++ b/packages/core/react/package.json
@@ -84,6 +84,7 @@
     "@nextui-org/date-input": "workspace:*",
     "@nextui-org/date-picker": "workspace:*",
     "@nextui-org/framer-utils": "workspace:*",
+    "@nextui-org/alert": "workspace:*",
     "@react-aria/visually-hidden": "3.8.12"
   },
   "peerDependencies": {
diff --git a/packages/core/react/src/index.ts b/packages/core/react/src/index.ts
index d504dbd361..96c5475f69 100644
--- a/packages/core/react/src/index.ts
+++ b/packages/core/react/src/index.ts
@@ -43,6 +43,7 @@ export * from "@nextui-org/autocomplete";
 export * from "@nextui-org/calendar";
 export * from "@nextui-org/date-input";
 export * from "@nextui-org/date-picker";
+export * from "@nextui-org/alert";
 
 /**
  * React Aria - Exports
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73c942b89d..1c66f454c1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2865,6 +2865,9 @@ importers:
       '@nextui-org/accordion':
         specifier: workspace:*
         version: link:../../components/accordion
+      '@nextui-org/alert':
+        specifier: workspace:*
+        version: link:../../components/alert
       '@nextui-org/autocomplete':
         specifier: workspace:*
         version: link:../../components/autocomplete

From 989757302b0c9537aaa361786d7e4459f00bb2d8 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Wed, 4 Sep 2024 21:53:15 +0530
Subject: [PATCH 39/62] chore(alert): implement the changes suggested in code
 review

---
 apps/docs/content/docs/components/alert.mdx   | 10 +++++---
 .../components/alert/__tests__/alert.test.tsx |  2 +-
 packages/components/alert/src/alert-icons.tsx | 25 +++++++++----------
 packages/components/alert/src/alert.tsx       | 10 ++++----
 packages/components/alert/src/use-alert.ts    | 23 ++++++-----------
 .../alert/stories/alert.stories.tsx           | 14 +++++------
 packages/core/theme/src/components/alert.ts   | 18 ++++++-------
 .../utilities/shared-icons/src/danger.tsx     |  3 +--
 .../shared-icons/src/info-circle.tsx          |  3 +--
 .../utilities/shared-icons/src/success.tsx    |  3 +--
 .../utilities/shared-icons/src/warning.tsx    |  3 +--
 11 files changed, 51 insertions(+), 63 deletions(-)

diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index 929545fbe1..7f6982ef96 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -39,6 +39,8 @@ Alerts are temporary notifications that provide concise feedback about an action
 />
 
 ## Usage
+- It accepts `title` and `description` as props for the alert message.
+- `title` is a optional property.
 
 <CodeDemo title="Usage" files={alertContent.usage} />
 
@@ -51,12 +53,12 @@ Alerts are temporary notifications that provide concise feedback about an action
 <CodeDemo title="Colors" files={alertContent.colors} />
 
 
-### IsCloseable
+### isClosable
 
-If `isCloseable` is true, a close button appear on alert which can be used to close it.
+If `isClosable` is true, a close button appear on alert which can be used to close it.
 It is set to true by default.
 
-<CodeDemo title="Loading" files={alertContent.isCloseable} />
+<CodeDemo title="Loading" files={alertContent.isClosable} />
 
 
 <Spacer y={4} />
@@ -72,7 +74,7 @@ It is set to true by default.
 | description      | `ReactNode`                                                                  | Description for alert message                                | -         |
 | color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The alert color theme.                                       | `default` |
 | radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The alert border radius.                                     | `md`      |
-| isCloseable      | `boolean`                                                                    | Whether the close button should be displayed.                | `true`    |
+| isClosable      | `boolean`                                                                    | Whether the close button should be displayed.                | `true`    |
 
 ### Alert Events
 
diff --git a/packages/components/alert/__tests__/alert.test.tsx b/packages/components/alert/__tests__/alert.test.tsx
index 8e9e531324..bc91beca53 100644
--- a/packages/components/alert/__tests__/alert.test.tsx
+++ b/packages/components/alert/__tests__/alert.test.tsx
@@ -38,7 +38,7 @@ describe("Alert", () => {
   });
 
   it("should not show close button when not is Closeable", () => {
-    const wrapper = render(<Alert description={description} isCloseable={false} title={title} />);
+    const wrapper = render(<Alert description={description} isClosable={false} title={title} />);
     const button = wrapper.queryByRole("button");
 
     expect(button).toBeNull();
diff --git a/packages/components/alert/src/alert-icons.tsx b/packages/components/alert/src/alert-icons.tsx
index 6180c26bfa..b28ee3efd2 100644
--- a/packages/components/alert/src/alert-icons.tsx
+++ b/packages/components/alert/src/alert-icons.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import {
   CloseIcon,
   DangerIcon,
@@ -10,38 +9,38 @@ import {
 export const AlertCloseIcon = (props: {color: string}) => {
   switch (props.color) {
     case "primary":
-      return <CloseIcon className={`fill-current text-primary-200`} height={20} width={20} />;
+      return <CloseIcon className="fill-current text-primary-200" height={20} width={20} />;
 
     case "secondary":
-      return <CloseIcon className={`fill-current text-secondary-200`} height={20} width={20} />;
+      return <CloseIcon className="fill-current text-secondary-200" height={20} width={20} />;
 
     case "success":
-      return <CloseIcon className={`fill-current text-success-200`} height={20} width={20} />;
+      return <CloseIcon className="fill-current text-success-200" height={20} width={20} />;
 
     case "warning":
-      return <CloseIcon className={`fill-current text-warning-200`} height={20} width={20} />;
+      return <CloseIcon className="fill-current text-warning-200" height={20} width={20} />;
 
     case "danger":
-      return <CloseIcon className={`fill-current text-danger-200`} height={20} width={20} />;
+      return <CloseIcon className="fill-current text-danger-200" height={20} width={20} />;
 
     default:
-      return <CloseIcon className={`fill-current text-default-400`} height={20} width={20} />;
+      return <CloseIcon className="fill-current text-default-400" height={20} width={20} />;
   }
 };
 
 export const AlertIcon = (props: {color: string}) => {
   switch (props.color) {
     case "primary":
-      return <SuccessIcon className={`fill-current text-primary`} />;
+      return <InfoCircleIcon className="fill-current text-primary" />;
     case "secondary":
-      return <SuccessIcon className={`fill-current text-secondary`} />;
+      return <InfoCircleIcon className="fill-current text-secondary" />;
     case "success":
-      return <SuccessIcon className={`fill-current text-success`} />;
+      return <SuccessIcon className="fill-current text-success" />;
     case "warning":
-      return <WarningIcon className={`fill-current text-warning`} />;
+      return <WarningIcon className="fill-current text-warning" />;
     case "danger":
-      return <DangerIcon className={`fill-current text-danger`} />;
+      return <DangerIcon className="fill-current text-danger" />;
     default:
-      return <InfoCircleIcon className={`fill-current text-default-foreground`} />;
+      return <InfoCircleIcon className="fill-current text-default-foreground" />;
   }
 };
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index c6cf499d96..601fea5182 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo} from "react";
+import {useMemo} from "react";
 import {forwardRef} from "@nextui-org/system";
 
 import {useAlert, UseAlertProps} from "./use-alert";
@@ -10,7 +10,7 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
   const {
     title,
     description,
-    isCloseable,
+    isClosable,
     isVisible,
     onClose,
     domRef,
@@ -25,7 +25,7 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
   const mainWrapper = useMemo(() => {
     return (
       <div {...getMainWrapperProps()}>
-        <div {...getTitleProps()}>{title}</div>
+        {title && <div {...getTitleProps()}>{title}</div>}
         <div {...getDescriptionProps()}>{description}</div>
       </div>
     );
@@ -37,7 +37,7 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
         <div ref={domRef} {...getBaseProps()}>
           <AlertIcon color={color} />
           {mainWrapper}
-          {isCloseable && (
+          {isClosable && (
             <button onClick={onClose} {...getCloseButtonProps()}>
               <AlertCloseIcon color={color} />
             </button>
@@ -45,7 +45,7 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
         </div>
       )
     );
-  }, [mainWrapper, isCloseable, getCloseButtonProps]);
+  }, [mainWrapper, isClosable, getCloseButtonProps]);
 
   return <>{baseWrapper}</>;
 });
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index fa8fd95ba0..28b328ac32 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -16,7 +16,7 @@ interface Props extends HTMLNextUIProps<"div"> {
   /**
    * title of the alert message
    */
-  title: string;
+  title?: string;
 
   /**
    * Main body of the alert message
@@ -26,7 +26,7 @@ interface Props extends HTMLNextUIProps<"div"> {
   /**
    *  whether the alert can be closed by user
    */
-  isCloseable?: boolean;
+  isClosable?: boolean;
 
   /**
    * function which is called when close button is clicked
@@ -40,7 +40,7 @@ interface Props extends HTMLNextUIProps<"div"> {
    * @example
    * ```ts
    * <Alert classNames={{
-   *    base:"base-classes", // image classes
+   *    base:"base-classes",
    *    mainWrapper: "mainWrapper-classes"
    *    description: "description-classes"
    *    title: "title-classes"
@@ -49,6 +49,7 @@ interface Props extends HTMLNextUIProps<"div"> {
    */
   classNames?: SlotsToClasses<AlertSlots>;
 }
+
 export type UseAlertProps = Props & AlertVariantProps;
 
 export function useAlert(originalProps: UseAlertProps) {
@@ -59,18 +60,8 @@ export function useAlert(originalProps: UseAlertProps) {
     setIsVisible(() => false);
   };
 
-  const {title, description, onClose, isCloseable, ref, classNames} = {
-    /**
-     *  isCloseable is true by default if not provided in props
-     */
-    isCloseable: true,
-
-    /**
-     * By default, onClose simply closes the alert
-     */
-    onClose: handleClose,
-    ...props,
-  };
+  // By Default, isClosable is condsidered true and onClose simply closes the alert
+  const {title, description, onClose = handleClose, isClosable = true, ref, classNames} = props;
 
   const domRef = useDOMRef(ref);
 
@@ -109,7 +100,7 @@ export function useAlert(originalProps: UseAlertProps) {
   return {
     title,
     description,
-    isCloseable,
+    isClosable,
     isVisible,
     onClose,
     domRef,
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index 74c4a4577d..ebb7750a1d 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -63,16 +63,16 @@ const RadiusTemplate = (args) => {
   );
 };
 
-const IsCloseableTemplate = (args) => {
+const isClosableTemplate = (args) => {
   return (
     <div className="flex flex-col">
       <div className="w-full flex-col items-center my-3">
-        <h2 className="my-2 h2">isCloseable = true</h2>
-        <Alert {...args} isCloseable={true} />
+        <h2 className="my-2 h2">isClosable = true</h2>
+        <Alert {...args} isClosable={true} />
       </div>
       <div className="w-full flex-col items-center my-3">
-        <h2 className="my-2 h2">isCloseable = false</h2>
-        <Alert {...args} isCloseable={false} />
+        <h2 className="my-2 h2">isClosable = false</h2>
+        <Alert {...args} isClosable={false} />
       </div>
     </div>
   );
@@ -96,8 +96,8 @@ export const Radius = {
     ...defaultProps,
   },
 };
-export const IsCloseable = {
-  render: IsCloseableTemplate,
+export const isClosable = {
+  render: isClosableTemplate,
   args: {
     ...defaultProps,
   },
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index cb8852b7a4..a11a03df81 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -25,11 +25,11 @@ import {tv} from "../utils/tv";
 
 const alert = tv({
   slots: {
-    base: ["group flex flex-row w-[342px] h-[68px]  p-[12px]"],
-    title: ["text-medium font-normal block h-[24px]"],
-    description: ["text-small font-normal h-[20px]"],
-    mainWrapper: ["w-[268px] h-[44px] ml-[20px] flex flex-col box-border items-start"],
-    closeButton: ["w-[24px h-[24px] cursor-pointer relative"],
+    base: ["flex flex-row w-[342px] h-17  p-3"],
+    title: ["text-medium font-normal block h-6"],
+    description: ["text-small font-normal h-5"],
+    mainWrapper: ["w-[268px]  h-11 ml-5 flex flex-col box-border items-start"],
+    closeButton: ["w-6 h-6 cursor-pointer relative"],
   },
   variants: {
     color: {
@@ -69,16 +69,16 @@ const alert = tv({
         base: "rounded-none",
       },
       sm: {
-        base: "rounded-[12px]",
+        base: "rounded-small",
       },
       md: {
-        base: "rounded-[16px]",
+        base: "rounded-medium",
       },
       lg: {
-        base: "rounded-[22px]",
+        base: "rounded-large",
       },
       full: {
-        base: "rounded-[9999px]",
+        base: "rounded-full",
       },
     },
   },
diff --git a/packages/utilities/shared-icons/src/danger.tsx b/packages/utilities/shared-icons/src/danger.tsx
index bacfbb6b71..ffa5c56f6d 100644
--- a/packages/utilities/shared-icons/src/danger.tsx
+++ b/packages/utilities/shared-icons/src/danger.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-
 import {IconSvgProps} from "./types";
+
 export const DangerIcon = (
   props: IconSvgProps & {
     className?: string;
diff --git a/packages/utilities/shared-icons/src/info-circle.tsx b/packages/utilities/shared-icons/src/info-circle.tsx
index 6dea6162b3..6f4650d0e3 100644
--- a/packages/utilities/shared-icons/src/info-circle.tsx
+++ b/packages/utilities/shared-icons/src/info-circle.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-
 import {IconSvgProps} from "./types";
+
 export const InfoCircleIcon = (
   props: IconSvgProps & {
     className?: string;
diff --git a/packages/utilities/shared-icons/src/success.tsx b/packages/utilities/shared-icons/src/success.tsx
index 8c51f705fb..9f361dff7a 100644
--- a/packages/utilities/shared-icons/src/success.tsx
+++ b/packages/utilities/shared-icons/src/success.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-
 import {IconSvgProps} from "./types";
+
 export const SuccessIcon = (
   props: IconSvgProps & {
     className?: string;
diff --git a/packages/utilities/shared-icons/src/warning.tsx b/packages/utilities/shared-icons/src/warning.tsx
index 674eee39b7..a647c6b04e 100644
--- a/packages/utilities/shared-icons/src/warning.tsx
+++ b/packages/utilities/shared-icons/src/warning.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-
 import {IconSvgProps} from "./types";
+
 export const WarningIcon = (
   props: IconSvgProps & {
     className?: string;

From d27105329cf1b4d0c67f913463bac47e10dcd96d Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Thu, 5 Sep 2024 09:42:49 +0530
Subject: [PATCH 40/62] chore(alert): lint the code and change isCloseable to
 isClosable

---
 apps/docs/content/components/alert/index.ts           |  2 +-
 .../alert/{isCloseable.ts => isClosable.ts}           | 11 ++++-------
 apps/docs/content/components/alert/usage.ts           |  1 +
 3 files changed, 6 insertions(+), 8 deletions(-)
 rename apps/docs/content/components/alert/{isCloseable.ts => isClosable.ts} (78%)

diff --git a/apps/docs/content/components/alert/index.ts b/apps/docs/content/components/alert/index.ts
index f1c26c42d9..d7f3e7b862 100644
--- a/apps/docs/content/components/alert/index.ts
+++ b/apps/docs/content/components/alert/index.ts
@@ -1,6 +1,6 @@
 import colors from "./colors";
 import usage from "./usage";
-import isCloseable from "./isCloseable";
+import isCloseable from "./isClosable";
 import radius from "./radius";
 
 export const alertContent = {
diff --git a/apps/docs/content/components/alert/isCloseable.ts b/apps/docs/content/components/alert/isClosable.ts
similarity index 78%
rename from apps/docs/content/components/alert/isCloseable.ts
rename to apps/docs/content/components/alert/isClosable.ts
index 10438ec18f..90d9c36d5d 100644
--- a/apps/docs/content/components/alert/isCloseable.ts
+++ b/apps/docs/content/components/alert/isClosable.ts
@@ -7,17 +7,14 @@ export default function App() {
   return (
     <div className="flex items-center justify-center w-screen h-[400px]">
         <div className="flex flex-col">
-
             <div className="w-full flex-col items-center my-3">
-                <h2 className="my-2 h2">isCloseable = true</h2>
-                <Alert title = {title} description = {description} isCloseable={true} />
+                <h2 className="my-2 h2">isClosable = true</h2>
+                <Alert title = {title} description = {description} isClosable={true} />
             </div>
-
             <div className="w-full flex-col items-center my-3">
-                <h2 className="my-2 h2">isCloseable = false</h2>
-                <Alert title = {title} description = {description} isCloseable={false} />
+                <h2 className="my-2 h2">isClosable = false</h2>
+                <Alert title = {title} description = {description} isClosable={false} />
             </div>
-            
         </div>
     </div>
   );
diff --git a/apps/docs/content/components/alert/usage.ts b/apps/docs/content/components/alert/usage.ts
index 89e6b39d3e..9d7cf3b5da 100644
--- a/apps/docs/content/components/alert/usage.ts
+++ b/apps/docs/content/components/alert/usage.ts
@@ -3,6 +3,7 @@ const App = `import {Alert} from "@nextui-org/react";
 export default function App() {
   const title = "Email Sent!!";
   const description ="You will get a reply soon";
+  
   return (
     <div className="flex items-center justify-center w-screen">
           <Alert title = {title} description = {description}/>

From e6efe4f6dcac3aac2f9127c84fb7b6d6d4ecbe4f Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 6 Sep 2024 09:58:38 +0530
Subject: [PATCH 41/62] chore(alert): lint the code

---
 apps/docs/content/components/alert/colors.ts     |  4 ++--
 apps/docs/content/components/alert/isClosable.ts | 11 +++++++----
 apps/docs/content/components/alert/radius.ts     |  6 +++---
 apps/docs/content/components/alert/usage.ts      |  3 +--
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/docs/content/components/alert/colors.ts b/apps/docs/content/components/alert/colors.ts
index 2e2c3e27c3..c4ed19f3f9 100644
--- a/apps/docs/content/components/alert/colors.ts
+++ b/apps/docs/content/components/alert/colors.ts
@@ -2,7 +2,7 @@ const App = `import {Alert} from "@nextui-org/react";
 
 export default function App() {
   const title = "Email Sent!!";
-  const description ="You will get a reply soon";
+  const description = "You will get a reply soon";
 
   return (
     <div className="flex items-center justify-center w-screen h-screen">
@@ -10,7 +10,7 @@ export default function App() {
             {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
                 <div key={color} className="w-full flex justify-between items-center my-3">
                     <h4 className="h4 mr-4 text-md">{color}</h4>
-                    <Alert title = {title} description = {description} color={color} />
+                    <Alert title={title} description={description} color={color} />
                 </div>
             ))}
         </div>
diff --git a/apps/docs/content/components/alert/isClosable.ts b/apps/docs/content/components/alert/isClosable.ts
index 90d9c36d5d..10438ec18f 100644
--- a/apps/docs/content/components/alert/isClosable.ts
+++ b/apps/docs/content/components/alert/isClosable.ts
@@ -7,14 +7,17 @@ export default function App() {
   return (
     <div className="flex items-center justify-center w-screen h-[400px]">
         <div className="flex flex-col">
+
             <div className="w-full flex-col items-center my-3">
-                <h2 className="my-2 h2">isClosable = true</h2>
-                <Alert title = {title} description = {description} isClosable={true} />
+                <h2 className="my-2 h2">isCloseable = true</h2>
+                <Alert title = {title} description = {description} isCloseable={true} />
             </div>
+
             <div className="w-full flex-col items-center my-3">
-                <h2 className="my-2 h2">isClosable = false</h2>
-                <Alert title = {title} description = {description} isClosable={false} />
+                <h2 className="my-2 h2">isCloseable = false</h2>
+                <Alert title = {title} description = {description} isCloseable={false} />
             </div>
+            
         </div>
     </div>
   );
diff --git a/apps/docs/content/components/alert/radius.ts b/apps/docs/content/components/alert/radius.ts
index 2e8349826e..8a24f974c6 100644
--- a/apps/docs/content/components/alert/radius.ts
+++ b/apps/docs/content/components/alert/radius.ts
@@ -2,15 +2,15 @@ const App = `import {Alert} from "@nextui-org/react";
 
 export default function App() {
   const title = "Email Sent!!";
-  const description ="You will get a reply soon";
+  const description = "You will get a reply soon";
 
   return (
     <div className="flex items-center justify-center w-screen h-screen">
         <div className="flex flex-col">
             {["none", "sm", "md", "lg", "full"].map((radius) => (
                 <div key={radius} className="w-full flex justify-between items-center my-3">
-                <h4 className="h4 mr-4 text-md">{radius}</h4>
-                <Alert title = {title} description = {description} radius={radius} />
+                  <h4 className="h4 mr-4 text-md">{radius}</h4>
+                  <Alert title={title} description={description} radius={radius} />
                 </div>
             ))}
         </div>
diff --git a/apps/docs/content/components/alert/usage.ts b/apps/docs/content/components/alert/usage.ts
index 9d7cf3b5da..0251f260a4 100644
--- a/apps/docs/content/components/alert/usage.ts
+++ b/apps/docs/content/components/alert/usage.ts
@@ -3,10 +3,9 @@ const App = `import {Alert} from "@nextui-org/react";
 export default function App() {
   const title = "Email Sent!!";
   const description ="You will get a reply soon";
-  
   return (
     <div className="flex items-center justify-center w-screen">
-          <Alert title = {title} description = {description}/>
+          <Alert title={title} description={description} />
     </div>
   );
 }`;

From 70037595c26f214738539edb60920e88bfab7739 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 6 Sep 2024 18:38:38 +0530
Subject: [PATCH 42/62] chore(alert): run pnpm  i

---
 pnpm-lock.yaml | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dc208f0189..8d5ba6a6fd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -684,6 +684,34 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
 
+  packages/components/alert:
+    dependencies:
+      '@nextui-org/react-utils':
+        specifier: workspace:*
+        version: link:../../utilities/react-utils
+      '@nextui-org/shared-icons':
+        specifier: workspace:*
+        version: link:../../utilities/shared-icons
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
+    devDependencies:
+      '@nextui-org/system':
+        specifier: workspace:*
+        version: link:../../core/system
+      '@nextui-org/theme':
+        specifier: workspace:*
+        version: link:../../core/theme
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+
   packages/components/autocomplete:
     dependencies:
       '@nextui-org/button':

From 13102e855bef8f65d50c27361dce5ed253e075af Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 29 Sep 2024 15:30:56 +0530
Subject: [PATCH 43/62] fix(alert): fix the logic for close button and add test
 case

---
 .../components/alert/__tests__/alert.test.tsx | 46 +++++++++++++++----
 packages/components/alert/src/alert.tsx       | 40 +++++++++-------
 packages/components/alert/src/use-alert.ts    | 15 +++---
 .../alert/stories/alert.stories.tsx           | 12 ++---
 4 files changed, 74 insertions(+), 39 deletions(-)

diff --git a/packages/components/alert/__tests__/alert.test.tsx b/packages/components/alert/__tests__/alert.test.tsx
index bc91beca53..e3f768ea66 100644
--- a/packages/components/alert/__tests__/alert.test.tsx
+++ b/packages/components/alert/__tests__/alert.test.tsx
@@ -17,6 +17,7 @@ describe("Alert", () => {
     const ref = React.createRef<HTMLDivElement>();
 
     render(<Alert ref={ref} description={description} title={title} />);
+
     expect(ref.current).not.toBeNull();
   });
 
@@ -30,30 +31,55 @@ describe("Alert", () => {
     expect(descriptionElement).toContainHTML(description);
   });
 
-  it("should show close button when is Closeable", () => {
-    const {getByRole} = render(<Alert description={description} title={title} />);
-    const button = getByRole("button");
+  it("should show close button when is Closable", () => {
+    const {getByRole} = render(<Alert isClosable description={description} title={title} />);
+
+    const closeButton = getByRole("button");
 
-    expect(button).toBeVisible();
+    expect(closeButton).toBeVisible();
   });
 
-  it("should not show close button when not is Closeable", () => {
-    const wrapper = render(<Alert description={description} isClosable={false} title={title} />);
-    const button = wrapper.queryByRole("button");
+  it("should show close button when onClose is passed", () => {
+    const onClose = jest.fn();
+
+    const {getByRole} = render(<Alert description={description} title={title} onClose={onClose} />);
+
+    const closeButton = getByRole("button");
+
+    expect(closeButton).toBeVisible();
+  });
+
+  it("should not show close button when not isClosable and onClose is not passed", () => {
+    const wrapper = render(<Alert description={description} title={title} />);
+
+    const closeButton = wrapper.queryByRole("button");
 
-    expect(button).toBeNull();
+    expect(closeButton).toBeNull();
   });
 
   it("should call the onClose function when clicking on close button", async () => {
     const onClose = jest.fn();
 
     const wrapper = render(<Alert description={description} title={title} onClose={onClose} />);
-    const button = wrapper.getByRole("button");
+
+    const closeButton = wrapper.getByRole("button");
 
     act(() => {
-      button.click();
+      closeButton.click();
     });
 
     expect(onClose).toHaveBeenCalled();
   });
+
+  it("should close the alert when clicking on close button", async () => {
+    const wrapper = render(<Alert isClosable description={description} title={title} />);
+
+    const closeButton = wrapper.getByRole("button");
+
+    act(() => {
+      closeButton.click();
+    });
+
+    expect(wrapper.container).toBeEmptyDOMElement();
+  });
 });
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 601fea5182..9d951d3f10 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -11,15 +11,16 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
     title,
     description,
     isClosable,
-    isVisible,
-    onClose,
     domRef,
+    handleClose,
     getBaseProps,
     getMainWrapperProps,
     getDescriptionProps,
     getTitleProps,
     getCloseButtonProps,
     color,
+    isVisible,
+    onClose,
   } = useAlert({...props, ref});
 
   const mainWrapper = useMemo(() => {
@@ -32,20 +33,27 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
   }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
 
   const baseWrapper = useMemo(() => {
-    return (
-      isVisible && (
-        <div ref={domRef} {...getBaseProps()}>
-          <AlertIcon color={color} />
-          {mainWrapper}
-          {isClosable && (
-            <button onClick={onClose} {...getCloseButtonProps()}>
-              <AlertCloseIcon color={color} />
-            </button>
-          )}
-        </div>
-      )
-    );
-  }, [mainWrapper, isClosable, getCloseButtonProps]);
+    return isVisible ? (
+      <div ref={domRef} {...getBaseProps()}>
+        <AlertIcon color={color} />
+        {mainWrapper}
+        {(isClosable || onClose) && (
+          <button onClick={handleClose} {...getCloseButtonProps()}>
+            <AlertCloseIcon color={color} />
+          </button>
+        )}
+      </div>
+    ) : null;
+  }, [
+    mainWrapper,
+    isClosable,
+    getCloseButtonProps,
+    isVisible,
+    domRef,
+    getBaseProps,
+    handleClose,
+    color,
+  ]);
 
   return <>{baseWrapper}</>;
 });
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index 28b328ac32..4026547907 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -55,14 +55,14 @@ export type UseAlertProps = Props & AlertVariantProps;
 export function useAlert(originalProps: UseAlertProps) {
   const [props, variantProps] = mapPropsVariants(originalProps, alert.variantKeys);
 
+  const {title, description, onClose, isClosable, ref, classNames} = props;
+
   const [isVisible, setIsVisible] = useState(true);
+
   const handleClose = () => {
-    setIsVisible(() => false);
+    setIsVisible(false);
+    if (onClose) onClose();
   };
-
-  // By Default, isClosable is condsidered true and onClose simply closes the alert
-  const {title, description, onClose = handleClose, isClosable = true, ref, classNames} = props;
-
   const domRef = useDOMRef(ref);
 
   const slots = useMemo(() => alert({...variantProps}), [objectToDeps(variantProps)]);
@@ -101,8 +101,6 @@ export function useAlert(originalProps: UseAlertProps) {
     title,
     description,
     isClosable,
-    isVisible,
-    onClose,
     domRef,
     getBaseProps,
     getMainWrapperProps,
@@ -110,5 +108,8 @@ export function useAlert(originalProps: UseAlertProps) {
     getTitleProps,
     color: variantProps["color"],
     getCloseButtonProps,
+    handleClose,
+    isVisible,
+    onClose,
   };
 }
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index ebb7750a1d..92272584be 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -43,7 +43,7 @@ const ColorTemplate = (args) => {
     <div className="flex flex-col">
       {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
         <div key={color} className="w-full flex justify-between items-center my-3">
-          <h4 className="h4 mr-4 text-md">{color}</h4>
+          <h4 className="h4 mx-4 text-md">{color}</h4>
           <Alert {...args} color={color} />
         </div>
       ))}
@@ -55,7 +55,7 @@ const RadiusTemplate = (args) => {
     <div className="flex flex-col">
       {["none", "sm", "md", "lg", "full"].map((radius) => (
         <div key={radius} className="w-full flex justify-between items-center my-3">
-          <h4 className="h4 mr-4 text-md">{radius}</h4>
+          <h4 className="h4 mx-4 text-md">{radius}</h4>
           <Alert {...args} radius={radius} />
         </div>
       ))}
@@ -66,12 +66,12 @@ const RadiusTemplate = (args) => {
 const isClosableTemplate = (args) => {
   return (
     <div className="flex flex-col">
-      <div className="w-full flex-col items-center my-3">
-        <h2 className="my-2 h2">isClosable = true</h2>
+      <div className="w-full flex items-center my-3">
+        <h2 className="my-2 mx-3">isClosable = true</h2>
         <Alert {...args} isClosable={true} />
       </div>
-      <div className="w-full flex-col items-center my-3">
-        <h2 className="my-2 h2">isClosable = false</h2>
+      <div className="w-full flex items-center my-3">
+        <h2 className="my-2 mx-3">isClosable = false</h2>
         <Alert {...args} isClosable={false} />
       </div>
     </div>

From f4dbcf93eaa64b96e3cf0216aa51493c2f5cb919 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 29 Sep 2024 15:40:42 +0530
Subject: [PATCH 44/62] docs(alert): fix docs, change isCloseable to isClosable
 and change docs for isClosable property

---
 apps/docs/content/components/alert/colors.ts  |  4 ++--
 apps/docs/content/components/alert/index.ts   |  4 ++--
 .../content/components/alert/isClosable.ts    | 23 ++++++++-----------
 apps/docs/content/components/alert/radius.ts  |  4 ++--
 apps/docs/content/docs/components/alert.mdx   |  8 ++++---
 5 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/apps/docs/content/components/alert/colors.ts b/apps/docs/content/components/alert/colors.ts
index c4ed19f3f9..c2b10defe1 100644
--- a/apps/docs/content/components/alert/colors.ts
+++ b/apps/docs/content/components/alert/colors.ts
@@ -5,11 +5,11 @@ export default function App() {
   const description = "You will get a reply soon";
 
   return (
-    <div className="flex items-center justify-center w-screen h-screen">
+    <div className="flex items-center justify-center w-screen">
         <div className="flex flex-col">
             {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
                 <div key={color} className="w-full flex justify-between items-center my-3">
-                    <h4 className="h4 mr-4 text-md">{color}</h4>
+                    <h4 className="h4 mx-4 text-md">{color}</h4>
                     <Alert title={title} description={description} color={color} />
                 </div>
             ))}
diff --git a/apps/docs/content/components/alert/index.ts b/apps/docs/content/components/alert/index.ts
index d7f3e7b862..39f00cadbe 100644
--- a/apps/docs/content/components/alert/index.ts
+++ b/apps/docs/content/components/alert/index.ts
@@ -1,11 +1,11 @@
 import colors from "./colors";
 import usage from "./usage";
-import isCloseable from "./isClosable";
+import isClosable from "./isClosable";
 import radius from "./radius";
 
 export const alertContent = {
   colors,
   usage,
-  isCloseable,
+  isClosable,
   radius,
 };
diff --git a/apps/docs/content/components/alert/isClosable.ts b/apps/docs/content/components/alert/isClosable.ts
index 10438ec18f..8a5165e377 100644
--- a/apps/docs/content/components/alert/isClosable.ts
+++ b/apps/docs/content/components/alert/isClosable.ts
@@ -5,20 +5,17 @@ export default function App() {
   const description ="You will get a reply soon";
 
   return (
-    <div className="flex items-center justify-center w-screen h-[400px]">
-        <div className="flex flex-col">
-
-            <div className="w-full flex-col items-center my-3">
-                <h2 className="my-2 h2">isCloseable = true</h2>
-                <Alert title = {title} description = {description} isCloseable={true} />
-            </div>
-
-            <div className="w-full flex-col items-center my-3">
-                <h2 className="my-2 h2">isCloseable = false</h2>
-                <Alert title = {title} description = {description} isCloseable={false} />
-            </div>
-            
+    <div className="flex items-center justify-center w-screen">
+      <div className="flex flex-col">
+        <div className="w-full flex items-center my-3">
+          <h2 className="my-2 mx-4">isClosable=true</h2>
+          <Alert isClosable={true} title={title} description={description} />
+        </div>
+        <div className="w-full flex items-center my-3">
+          <h2 className="my-2 mx-4">isClosable=false</h2>
+          <Alert isClosable={false} title={title} description={description} />
         </div>
+      </div>        
     </div>
   );
 }`;
diff --git a/apps/docs/content/components/alert/radius.ts b/apps/docs/content/components/alert/radius.ts
index 8a24f974c6..361020b845 100644
--- a/apps/docs/content/components/alert/radius.ts
+++ b/apps/docs/content/components/alert/radius.ts
@@ -5,11 +5,11 @@ export default function App() {
   const description = "You will get a reply soon";
 
   return (
-    <div className="flex items-center justify-center w-screen h-screen">
+    <div className="flex items-center justify-center w-screen">
         <div className="flex flex-col">
             {["none", "sm", "md", "lg", "full"].map((radius) => (
                 <div key={radius} className="w-full flex justify-between items-center my-3">
-                  <h4 className="h4 mr-4 text-md">{radius}</h4>
+                  <h4 className="h4 mx-4 text-md">{radius}</h4>
                   <Alert title={title} description={description} radius={radius} />
                 </div>
             ))}
diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index 7f6982ef96..6dbf1a3f48 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -55,8 +55,10 @@ Alerts are temporary notifications that provide concise feedback about an action
 
 ### isClosable
 
-If `isClosable` is true, a close button appear on alert which can be used to close it.
-It is set to true by default.
+If `isClosable` is true, a close button will appear on the alert which closes it.
+It is set to false by default.
+
+> **Note**: If the `onClose` is passed, the close buton is visible regardless of `isClosable` property.
 
 <CodeDemo title="Loading" files={alertContent.isClosable} />
 
@@ -74,7 +76,7 @@ It is set to true by default.
 | description      | `ReactNode`                                                                  | Description for alert message                                | -         |
 | color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The alert color theme.                                       | `default` |
 | radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The alert border radius.                                     | `md`      |
-| isClosable      | `boolean`                                                                    | Whether the close button should be displayed.                | `true`    |
+| isClosable       | `boolean`                                                                    | Whether the close button should be displayed.                | `false`    |
 
 ### Alert Events
 

From 3f3a7d0837dd06fe38557748b82bcb95c0bb42bd Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 29 Sep 2024 15:48:09 +0530
Subject: [PATCH 45/62] chore(alert): add the support for RTL, refactor the
 code and fix the typos

---
 packages/core/theme/src/components/alert.ts     | 12 +++++-------
 packages/utilities/shared-icons/src/success.tsx |  9 ++++++++-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index a11a03df81..24c15915c4 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -8,14 +8,12 @@ import {tv} from "../utils/tv";
  * ```js
  * const {base, mainWrapper, title, description} = input({...})
  *
- * <div className={base())}>
- *    // icon
- *
- *    <div classsName ={mainWrapper()}>
+ * <div className={base()}>
+ *    <AlertIcon/>
+ *    <div className={mainWrapper()}>
  *       <div className={title()}>Title</div>
  *       <div className={description()}>Description</div>
  *   </div>
- *
  *    <button>
  *      // close button
  *    </button>
@@ -28,7 +26,7 @@ const alert = tv({
     base: ["flex flex-row w-[342px] h-17  p-3"],
     title: ["text-medium font-normal block h-6"],
     description: ["text-small font-normal h-5"],
-    mainWrapper: ["w-[268px]  h-11 ml-5 flex flex-col box-border items-start"],
+    mainWrapper: ["w-[268px]  h-11 ml-5 rtl:mr-5 rtl:ml-0 flex flex-col box-border items-start"],
     closeButton: ["w-6 h-6 cursor-pointer relative"],
   },
   variants: {
@@ -36,7 +34,7 @@ const alert = tv({
       default: {
         base: ["bg-default-100"],
         title: ["text-foreground"],
-        description: ["text-[default-600]"],
+        description: ["text-default-600"],
       },
       primary: {
         base: ["bg-primary-50"],
diff --git a/packages/utilities/shared-icons/src/success.tsx b/packages/utilities/shared-icons/src/success.tsx
index 9f361dff7a..dab41491ea 100644
--- a/packages/utilities/shared-icons/src/success.tsx
+++ b/packages/utilities/shared-icons/src/success.tsx
@@ -14,7 +14,14 @@ export const SuccessIcon = (
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <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.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" />
+      <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 2Z
+          M16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54
+          C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64
+          C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z
+        "
+      />
     </svg>
   );
 };

From 04c5a1479028c8af007c9d5a6578f00f21ff0a10 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 29 Sep 2024 19:10:28 +0530
Subject: [PATCH 46/62] docs(alert): grammer issues fix

---
 apps/docs/content/docs/components/alert.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index 6dbf1a3f48..e59bb74043 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -40,7 +40,7 @@ Alerts are temporary notifications that provide concise feedback about an action
 
 ## Usage
 - It accepts `title` and `description` as props for the alert message.
-- `title` is a optional property.
+- `title` is an optional property.
 
 <CodeDemo title="Usage" files={alertContent.usage} />
 
@@ -55,7 +55,7 @@ Alerts are temporary notifications that provide concise feedback about an action
 
 ### isClosable
 
-If `isClosable` is true, a close button will appear on the alert which closes it.
+If `isClosable` is true, a close button appears on the alert which closes it.
 It is set to false by default.
 
 > **Note**: If the `onClose` is passed, the close buton is visible regardless of `isClosable` property.

From 316fa1172833f8906f81dbbee6ae9acff6a61001 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 29 Sep 2024 20:38:34 +0530
Subject: [PATCH 47/62] fix(alert): replace rtl with ms

---
 packages/core/theme/src/components/alert.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index 24c15915c4..412219e828 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -26,7 +26,7 @@ const alert = tv({
     base: ["flex flex-row w-[342px] h-17  p-3"],
     title: ["text-medium font-normal block h-6"],
     description: ["text-small font-normal h-5"],
-    mainWrapper: ["w-[268px]  h-11 ml-5 rtl:mr-5 rtl:ml-0 flex flex-col box-border items-start"],
+    mainWrapper: ["w-[268px] h-11 ms-5 flex flex-col box-border items-start"],
     closeButton: ["w-6 h-6 cursor-pointer relative"],
   },
   variants: {

From 70693610f461e46947819d6be87dc7dfe72084a5 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Mon, 7 Oct 2024 10:44:53 +0530
Subject: [PATCH 48/62] chore(alert): custom style and custom implementation,
 remove isClosable={false}, refactor, fix typos

---
 apps/docs/content/components/alert/colors.ts  |   2 +-
 .../content/components/alert/custom-impl.ts   | 100 ++++++++++++++++++
 .../content/components/alert/custom-styles.ts |  45 ++++++++
 apps/docs/content/components/alert/index.ts   |   4 +
 .../content/components/alert/isClosable.ts    |   4 -
 apps/docs/content/components/alert/radius.ts  |   2 +-
 apps/docs/content/docs/components/alert.mdx   |  30 +++++-
 packages/components/alert/src/use-alert.ts    |   3 +-
 .../alert/stories/alert.stories.tsx           |  50 +++++----
 packages/core/theme/src/components/alert.ts   |   3 +-
 10 files changed, 214 insertions(+), 29 deletions(-)
 create mode 100644 apps/docs/content/components/alert/custom-impl.ts
 create mode 100644 apps/docs/content/components/alert/custom-styles.ts

diff --git a/apps/docs/content/components/alert/colors.ts b/apps/docs/content/components/alert/colors.ts
index c2b10defe1..f788856973 100644
--- a/apps/docs/content/components/alert/colors.ts
+++ b/apps/docs/content/components/alert/colors.ts
@@ -9,7 +9,7 @@ export default function App() {
         <div className="flex flex-col">
             {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
                 <div key={color} className="w-full flex justify-between items-center my-3">
-                    <h4 className="h4 mx-4 text-md">{color}</h4>
+                    <h4 className="mx-4 text-md">{color}</h4>
                     <Alert title={title} description={description} color={color} />
                 </div>
             ))}
diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts
new file mode 100644
index 0000000000..82017c04d9
--- /dev/null
+++ b/apps/docs/content/components/alert/custom-impl.ts
@@ -0,0 +1,100 @@
+const App = `import React, {forwardRef} from "react";
+import {useAlert} from "@nextui-org/react";
+
+const styles = {
+  base: [
+    "bg-slate-100",
+    "border",
+    "shadow",
+    "hover:bg-slate-200",
+    "focus-within:!bg-slate-100",
+    "dark:bg-slate-900",
+    "dark:hover:bg-slate-800",
+    "dark:border-slate-800",
+    "dark:focus-within:!bg-slate-900",
+    "cursor:pointer"
+  ],
+  title: [
+    "text-base",
+    "text-slate-500",
+    "font-bold"
+  ],
+  description: [
+    "text-base",
+    "text-slate-500",
+  ],
+}
+
+const MyAlert = forwardRef((props, ref) => {
+  const {
+  title,
+  description,
+  isClosable,
+  domRef,
+  handleClose,
+  getBaseProps,
+  getMainWrapperProps,
+  getDescriptionProps,
+  getTitleProps,
+  getCloseButtonProps,
+  color,
+  isVisible,
+  onClose,
+  } = useAlert({
+      ...props,
+      ref,
+      // this is just for the example, the props bellow should be passed by the parent component
+      title:"Email Sent!!",
+      description:"You will get a reply soon",
+      // custom styles
+      classNames: {
+        ...styles,
+      },
+    });
+
+  const mainWrapper = useMemo(() => {
+    return (
+      <div {...getMainWrapperProps()}>
+        {title && <div {...getTitleProps()}>{title}</div>}
+        <div {...getDescriptionProps()}>{description}</div>
+      </div>
+    );
+  }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
+
+  const baseWrapper = useMemo(() => {
+    return isVisible ? (
+      <div ref={domRef} {...getBaseProps()}>
+        <AlertIcon color={color} />
+        {mainWrapper}
+        {(isClosable || onClose) && (
+          <button onClick={handleClose} {...getCloseButtonProps()}>
+            <AlertCloseIcon color={color} />
+          </button>
+        )}
+      </div>
+    ) : null;
+  }, [
+    mainWrapper,
+    isClosable,
+    getCloseButtonProps,
+    isVisible,
+    domRef,
+    getBaseProps,
+    handleClose,
+    color,
+  ]);
+
+  return <>{baseWrapper}</>;
+});
+
+MyAlert.displayName = "MyAlert";
+
+export default MyAlert;`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/custom-styles.ts b/apps/docs/content/components/alert/custom-styles.ts
new file mode 100644
index 0000000000..5a4d72e8d6
--- /dev/null
+++ b/apps/docs/content/components/alert/custom-styles.ts
@@ -0,0 +1,45 @@
+const App = `import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "Email Sent!!";
+  const description ="You will get a reply soon";
+  return (
+    <div className="flex items-center justify-center w-screen">
+      <Alert
+        title={title}
+        description={description}
+        classNames={{
+          base: [
+            "bg-slate-100",
+            "border",
+            "shadow",
+            "hover:bg-slate-200",
+            "focus-within:!bg-slate-100",
+            "dark:bg-slate-900",
+            "dark:hover:bg-slate-800",
+            "dark:border-slate-800",
+            "dark:focus-within:!bg-slate-900",
+            "cursor-pointer"
+          ],
+          title: [
+            "text-base",
+            "text-slate-500",
+            "font-bold"
+          ],
+          description: [
+            "text-base",
+            "text-slate-500",
+          ],
+        }}
+      />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/index.ts b/apps/docs/content/components/alert/index.ts
index 39f00cadbe..436ac48a7e 100644
--- a/apps/docs/content/components/alert/index.ts
+++ b/apps/docs/content/components/alert/index.ts
@@ -2,10 +2,14 @@ import colors from "./colors";
 import usage from "./usage";
 import isClosable from "./isClosable";
 import radius from "./radius";
+import customImpl from "./custom-impl";
+import customStyles from "./custom-styles";
 
 export const alertContent = {
   colors,
   usage,
   isClosable,
   radius,
+  customImpl,
+  customStyles,
 };
diff --git a/apps/docs/content/components/alert/isClosable.ts b/apps/docs/content/components/alert/isClosable.ts
index 8a5165e377..b36b78497d 100644
--- a/apps/docs/content/components/alert/isClosable.ts
+++ b/apps/docs/content/components/alert/isClosable.ts
@@ -11,10 +11,6 @@ export default function App() {
           <h2 className="my-2 mx-4">isClosable=true</h2>
           <Alert isClosable={true} title={title} description={description} />
         </div>
-        <div className="w-full flex items-center my-3">
-          <h2 className="my-2 mx-4">isClosable=false</h2>
-          <Alert isClosable={false} title={title} description={description} />
-        </div>
       </div>        
     </div>
   );
diff --git a/apps/docs/content/components/alert/radius.ts b/apps/docs/content/components/alert/radius.ts
index 361020b845..4d3e65d2e3 100644
--- a/apps/docs/content/components/alert/radius.ts
+++ b/apps/docs/content/components/alert/radius.ts
@@ -9,7 +9,7 @@ export default function App() {
         <div className="flex flex-col">
             {["none", "sm", "md", "lg", "full"].map((radius) => (
                 <div key={radius} className="w-full flex justify-between items-center my-3">
-                  <h4 className="h4 mx-4 text-md">{radius}</h4>
+                  <h4 className="mx-4 text-md">{radius}</h4>
                   <Alert title={title} description={description} radius={radius} />
                 </div>
             ))}
diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index e59bb74043..8883500a77 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -58,13 +58,39 @@ Alerts are temporary notifications that provide concise feedback about an action
 If `isClosable` is true, a close button appears on the alert which closes it.
 It is set to false by default.
 
-> **Note**: If the `onClose` is passed, the close buton is visible regardless of `isClosable` property.
+> **Note**: If the `onClose` is passed, the close button is visible regardless of `isClosable` property.
 
-<CodeDemo title="Loading" files={alertContent.isClosable} />
+<CodeDemo title="isClosable" files={alertContent.isClosable} />
 
 
 <Spacer y={4} />
 
+## Slots
+
+- **base**: Alert wrapper, it handles alignment, placement, and general appearance.
+- **mainWrapper**: Wraps the `title` and `description` of the alert.
+- **closeButton**: The `closeButton`, it is at the top-right corner of alert.
+- **description**: The description of the alert.
+- **title**: The title of the alert.
+
+### Custom Styles
+
+You can customize the `Alert` component by passing custom Tailwind CSS classes to the component slots.
+
+<CodeDemo title="Custom Styles" highlightedLines="12-32" files={alertContent.customStyles} />
+
+### Custom Implementation
+
+In case you need to customize the alert even further, you can use the `useAlert` hook to create your own implementation.
+
+<CodeDemo
+  showPreview={false}
+  showOpenInCodeSandbox={true}
+  title="Custom Implementation"
+  files={alertContent.customImpl}
+/>
+
+<Spacer y={4} />
 
 ## API
 
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index 4026547907..ba80eb1c4b 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -44,6 +44,7 @@ interface Props extends HTMLNextUIProps<"div"> {
    *    mainWrapper: "mainWrapper-classes"
    *    description: "description-classes"
    *    title: "title-classes"
+   *    closeButton: "closeButton-classes"
    * }} />
    * ```
    */
@@ -61,7 +62,7 @@ export function useAlert(originalProps: UseAlertProps) {
 
   const handleClose = () => {
     setIsVisible(false);
-    if (onClose) onClose();
+    onClose?.();
   };
   const domRef = useDOMRef(ref);
 
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index 92272584be..6889ed5c73 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -20,6 +20,11 @@ export default {
       },
       options: ["none", "sm", "md", "lg", "full"],
     },
+    isClosable: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -43,19 +48,20 @@ const ColorTemplate = (args) => {
     <div className="flex flex-col">
       {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
         <div key={color} className="w-full flex justify-between items-center my-3">
-          <h4 className="h4 mx-4 text-md">{color}</h4>
+          <h4 className="mx-4 text-md">{color}</h4>
           <Alert {...args} color={color} />
         </div>
       ))}
     </div>
   );
 };
+
 const RadiusTemplate = (args) => {
   return (
     <div className="flex flex-col">
       {["none", "sm", "md", "lg", "full"].map((radius) => (
         <div key={radius} className="w-full flex justify-between items-center my-3">
-          <h4 className="h4 mx-4 text-md">{radius}</h4>
+          <h4 className="mx-4 text-md">{radius}</h4>
           <Alert {...args} radius={radius} />
         </div>
       ))}
@@ -63,21 +69,6 @@ const RadiusTemplate = (args) => {
   );
 };
 
-const isClosableTemplate = (args) => {
-  return (
-    <div className="flex flex-col">
-      <div className="w-full flex items-center my-3">
-        <h2 className="my-2 mx-3">isClosable = true</h2>
-        <Alert {...args} isClosable={true} />
-      </div>
-      <div className="w-full flex items-center my-3">
-        <h2 className="my-2 mx-3">isClosable = false</h2>
-        <Alert {...args} isClosable={false} />
-      </div>
-    </div>
-  );
-};
-
 export const Default = {
   render: Template,
   args: {
@@ -97,8 +88,31 @@ export const Radius = {
   },
 };
 export const isClosable = {
-  render: isClosableTemplate,
+  render: Template,
   args: {
     ...defaultProps,
+    isClosable: true,
+  },
+};
+export const CustomWithClassNames = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    classNames: {
+      base: [
+        "bg-slate-100",
+        "border",
+        "shadow",
+        "hover:bg-slate-200",
+        "focus-within:!bg-slate-100",
+        "dark:bg-slate-900",
+        "dark:hover:bg-slate-800",
+        "dark:border-slate-800",
+        "dark:focus-within:!bg-slate-900",
+        "cursor-pointer",
+      ],
+      title: ["text-base", "text-slate-500", "font-bold"],
+      description: ["text-base", "text-slate-500"],
+    },
   },
 };
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index 412219e828..7e1efc9d56 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -6,7 +6,7 @@ import {tv} from "../utils/tv";
  *
  * @example
  * ```js
- * const {base, mainWrapper, title, description} = input({...})
+ * const {base, mainWrapper, title, description, closeButton} = alert({...})
  *
  * <div className={base()}>
  *    <AlertIcon/>
@@ -20,7 +20,6 @@ import {tv} from "../utils/tv";
  * </div>
  * ```
  */
-
 const alert = tv({
   slots: {
     base: ["flex flex-row w-[342px] h-17  p-3"],

From d1609eb241d9ad9432b885da2d8f8c8febd3d952 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Mon, 7 Oct 2024 19:24:21 +0530
Subject: [PATCH 49/62] chore(alert): linting and implement coderabbit
 suggestions

---
 apps/docs/content/components/alert/custom-impl.ts   | 7 ++++---
 apps/docs/content/components/alert/custom-styles.ts | 3 ++-
 apps/docs/content/components/alert/isClosable.ts    | 2 +-
 apps/docs/content/components/alert/usage.ts         | 3 ++-
 packages/components/alert/src/alert.tsx             | 1 +
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts
index 82017c04d9..de861c9d75 100644
--- a/apps/docs/content/components/alert/custom-impl.ts
+++ b/apps/docs/content/components/alert/custom-impl.ts
@@ -1,4 +1,4 @@
-const App = `import React, {forwardRef} from "react";
+const App = `import React, {forwardRef, useMemo} from "react";
 import {useAlert} from "@nextui-org/react";
 
 const styles = {
@@ -44,8 +44,8 @@ const MyAlert = forwardRef((props, ref) => {
       ...props,
       ref,
       // this is just for the example, the props bellow should be passed by the parent component
-      title:"Email Sent!!",
-      description:"You will get a reply soon",
+      title: "Email Sent!!",
+      description: "You will get a reply soon",
       // custom styles
       classNames: {
         ...styles,
@@ -82,6 +82,7 @@ const MyAlert = forwardRef((props, ref) => {
     getBaseProps,
     handleClose,
     color,
+    onClose
   ]);
 
   return <>{baseWrapper}</>;
diff --git a/apps/docs/content/components/alert/custom-styles.ts b/apps/docs/content/components/alert/custom-styles.ts
index 5a4d72e8d6..dc9f6e3deb 100644
--- a/apps/docs/content/components/alert/custom-styles.ts
+++ b/apps/docs/content/components/alert/custom-styles.ts
@@ -2,7 +2,8 @@ const App = `import {Alert} from "@nextui-org/react";
 
 export default function App() {
   const title = "Email Sent!!";
-  const description ="You will get a reply soon";
+  const description = "You will get a reply soon";
+  
   return (
     <div className="flex items-center justify-center w-screen">
       <Alert
diff --git a/apps/docs/content/components/alert/isClosable.ts b/apps/docs/content/components/alert/isClosable.ts
index b36b78497d..7638207607 100644
--- a/apps/docs/content/components/alert/isClosable.ts
+++ b/apps/docs/content/components/alert/isClosable.ts
@@ -2,7 +2,7 @@ const App = `import {Alert} from "@nextui-org/react";
 
 export default function App() {
   const title = "Email Sent!!";
-  const description ="You will get a reply soon";
+  const description = "You will get a reply soon";
 
   return (
     <div className="flex items-center justify-center w-screen">
diff --git a/apps/docs/content/components/alert/usage.ts b/apps/docs/content/components/alert/usage.ts
index 0251f260a4..faf2a032a5 100644
--- a/apps/docs/content/components/alert/usage.ts
+++ b/apps/docs/content/components/alert/usage.ts
@@ -2,7 +2,8 @@ const App = `import {Alert} from "@nextui-org/react";
 
 export default function App() {
   const title = "Email Sent!!";
-  const description ="You will get a reply soon";
+  const description = "You will get a reply soon";
+  
   return (
     <div className="flex items-center justify-center w-screen">
           <Alert title={title} description={description} />
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 9d951d3f10..8e7938e7cd 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -53,6 +53,7 @@ const Alert = forwardRef<"div", alertProps>((props, ref) => {
     getBaseProps,
     handleClose,
     color,
+    onClose,
   ]);
 
   return <>{baseWrapper}</>;

From af2adc22b830b3f78392af55c1ce9ad75dd19c26 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Wed, 9 Oct 2024 12:49:11 +0530
Subject: [PATCH 50/62] chore(alert): refactor and typos fix

---
 apps/docs/content/components/alert/colors.ts  |  2 +-
 .../content/components/alert/custom-impl.ts   | 21 +++++++++++++++++--
 .../content/components/alert/isClosable.ts    |  2 +-
 apps/docs/content/components/alert/radius.ts  |  2 +-
 packages/components/alert/src/alert.tsx       |  4 ++--
 .../alert/stories/alert.stories.tsx           |  4 ++--
 6 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/apps/docs/content/components/alert/colors.ts b/apps/docs/content/components/alert/colors.ts
index f788856973..5838441197 100644
--- a/apps/docs/content/components/alert/colors.ts
+++ b/apps/docs/content/components/alert/colors.ts
@@ -9,7 +9,7 @@ export default function App() {
         <div className="flex flex-col">
             {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
                 <div key={color} className="w-full flex justify-between items-center my-3">
-                    <h4 className="mx-4 text-md">{color}</h4>
+                    <span className="mx-4 text-md">{color}</span>
                     <Alert title={title} description={description} color={color} />
                 </div>
             ))}
diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts
index de861c9d75..d76582056b 100644
--- a/apps/docs/content/components/alert/custom-impl.ts
+++ b/apps/docs/content/components/alert/custom-impl.ts
@@ -1,5 +1,21 @@
+const InfoCircleIcon = `export const InfoCircleIcon = (props) => {
+  <svg
+    fill="none"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z"
+    />
+  </svg>
+};`;
+
 const App = `import React, {forwardRef, useMemo} from "react";
 import {useAlert} from "@nextui-org/react";
+import {InfoCircleIcon} from "./InfoCircleIcon";
 
 const styles = {
   base: [
@@ -12,7 +28,7 @@ const styles = {
     "dark:hover:bg-slate-800",
     "dark:border-slate-800",
     "dark:focus-within:!bg-slate-900",
-    "cursor:pointer"
+    "cursor-pointer"
   ],
   title: [
     "text-base",
@@ -64,7 +80,7 @@ const MyAlert = forwardRef((props, ref) => {
   const baseWrapper = useMemo(() => {
     return isVisible ? (
       <div ref={domRef} {...getBaseProps()}>
-        <AlertIcon color={color} />
+        <InfoCircleIcon />
         {mainWrapper}
         {(isClosable || onClose) && (
           <button onClick={handleClose} {...getCloseButtonProps()}>
@@ -94,6 +110,7 @@ export default MyAlert;`;
 
 const react = {
   "/App.jsx": App,
+  "/InfoCircleIcon": InfoCircleIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/alert/isClosable.ts b/apps/docs/content/components/alert/isClosable.ts
index 7638207607..6f451ac445 100644
--- a/apps/docs/content/components/alert/isClosable.ts
+++ b/apps/docs/content/components/alert/isClosable.ts
@@ -8,7 +8,7 @@ export default function App() {
     <div className="flex items-center justify-center w-screen">
       <div className="flex flex-col">
         <div className="w-full flex items-center my-3">
-          <h2 className="my-2 mx-4">isClosable=true</h2>
+          <span className="my-2 mx-4">isClosable=true</span>
           <Alert isClosable={true} title={title} description={description} />
         </div>
       </div>        
diff --git a/apps/docs/content/components/alert/radius.ts b/apps/docs/content/components/alert/radius.ts
index 4d3e65d2e3..dc40a31e2a 100644
--- a/apps/docs/content/components/alert/radius.ts
+++ b/apps/docs/content/components/alert/radius.ts
@@ -9,7 +9,7 @@ export default function App() {
         <div className="flex flex-col">
             {["none", "sm", "md", "lg", "full"].map((radius) => (
                 <div key={radius} className="w-full flex justify-between items-center my-3">
-                  <h4 className="mx-4 text-md">{radius}</h4>
+                  <span className="mx-4 text-md">{radius}</span>
                   <Alert title={title} description={description} radius={radius} />
                 </div>
             ))}
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 8e7938e7cd..54139d2d28 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -4,9 +4,9 @@ import {forwardRef} from "@nextui-org/system";
 import {useAlert, UseAlertProps} from "./use-alert";
 import {AlertCloseIcon, AlertIcon} from "./alert-icons";
 
-export interface alertProps extends UseAlertProps {}
+export interface AlertProps extends UseAlertProps {}
 
-const Alert = forwardRef<"div", alertProps>((props, ref) => {
+const Alert = forwardRef<"div", AlertProps>((props, ref) => {
   const {
     title,
     description,
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index 6889ed5c73..d74f86865f 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -48,7 +48,7 @@ const ColorTemplate = (args) => {
     <div className="flex flex-col">
       {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
         <div key={color} className="w-full flex justify-between items-center my-3">
-          <h4 className="mx-4 text-md">{color}</h4>
+          <span className="mx-4 text-md">{color}</span>
           <Alert {...args} color={color} />
         </div>
       ))}
@@ -61,7 +61,7 @@ const RadiusTemplate = (args) => {
     <div className="flex flex-col">
       {["none", "sm", "md", "lg", "full"].map((radius) => (
         <div key={radius} className="w-full flex justify-between items-center my-3">
-          <h4 className="mx-4 text-md">{radius}</h4>
+          <span className="mx-4 text-md">{radius}</span>
           <Alert {...args} radius={radius} />
         </div>
       ))}

From 61df0e407bf9a788af7864664877a06824c5f14f Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Thu, 10 Oct 2024 20:16:26 +0530
Subject: [PATCH 51/62] chore(alert): add import for closeIcon

---
 .../content/components/alert/custom-impl.ts   | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts
index d76582056b..de36335080 100644
--- a/apps/docs/content/components/alert/custom-impl.ts
+++ b/apps/docs/content/components/alert/custom-impl.ts
@@ -1,4 +1,4 @@
-const InfoCircleIcon = `export const InfoCircleIcon = (props) => {
+const InfoCircleIcon = `export const InfoCircleIcon = (props) => (
   <svg
     fill="none"
     height="24"
@@ -11,11 +11,30 @@ const InfoCircleIcon = `export const InfoCircleIcon = (props) => {
       d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z"
     />
   </svg>
-};`;
+);`;
+
+const CloseIcon = `export const CloseIcon = (props) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="1em"
+    role="presentation"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
+  >
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+);`;
 
 const App = `import React, {forwardRef, useMemo} from "react";
 import {useAlert} from "@nextui-org/react";
 import {InfoCircleIcon} from "./InfoCircleIcon";
+import {CloseIcon} from "./CloseIcon"
 
 const styles = {
   base: [
@@ -84,7 +103,7 @@ const MyAlert = forwardRef((props, ref) => {
         {mainWrapper}
         {(isClosable || onClose) && (
           <button onClick={handleClose} {...getCloseButtonProps()}>
-            <AlertCloseIcon color={color} />
+            <CloseIcon />
           </button>
         )}
       </div>
@@ -111,6 +130,7 @@ export default MyAlert;`;
 const react = {
   "/App.jsx": App,
   "/InfoCircleIcon": InfoCircleIcon,
+  "/CloseIcon": CloseIcon,
 };
 
 export default {

From 7202be5eb08ff3825a3b3cabfb2d6e6f2fad9d14 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Thu, 10 Oct 2024 20:28:22 +0530
Subject: [PATCH 52/62] chore(alert): add props for closeIcon

---
 apps/docs/content/components/alert/custom-impl.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts
index de36335080..7f37bc727c 100644
--- a/apps/docs/content/components/alert/custom-impl.ts
+++ b/apps/docs/content/components/alert/custom-impl.ts
@@ -26,6 +26,7 @@ const CloseIcon = `export const CloseIcon = (props) => (
     strokeWidth={2}
     viewBox="0 0 24 24"
     width="1em"
+    {...props}
   >
     <path d="M18 6L6 18M6 6l12 12" />
   </svg>

From 682e9be6feafb9c28ead7ec52098131e9bcbdcac Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 13 Oct 2024 20:43:25 +0530
Subject: [PATCH 53/62] chore(alert): refactor fixes

---
 apps/docs/content/components/alert/index.ts                | 2 +-
 .../components/alert/{isClosable.ts => is-closable.ts}     | 7 +------
 packages/components/alert/__tests__/alert.test.tsx         | 4 ++--
 3 files changed, 4 insertions(+), 9 deletions(-)
 rename apps/docs/content/components/alert/{isClosable.ts => is-closable.ts} (55%)

diff --git a/apps/docs/content/components/alert/index.ts b/apps/docs/content/components/alert/index.ts
index 436ac48a7e..e0f9f738c9 100644
--- a/apps/docs/content/components/alert/index.ts
+++ b/apps/docs/content/components/alert/index.ts
@@ -1,6 +1,6 @@
 import colors from "./colors";
 import usage from "./usage";
-import isClosable from "./isClosable";
+import isClosable from "./is-closable";
 import radius from "./radius";
 import customImpl from "./custom-impl";
 import customStyles from "./custom-styles";
diff --git a/apps/docs/content/components/alert/isClosable.ts b/apps/docs/content/components/alert/is-closable.ts
similarity index 55%
rename from apps/docs/content/components/alert/isClosable.ts
rename to apps/docs/content/components/alert/is-closable.ts
index 6f451ac445..e39f9b95d8 100644
--- a/apps/docs/content/components/alert/isClosable.ts
+++ b/apps/docs/content/components/alert/is-closable.ts
@@ -6,12 +6,7 @@ export default function App() {
 
   return (
     <div className="flex items-center justify-center w-screen">
-      <div className="flex flex-col">
-        <div className="w-full flex items-center my-3">
-          <span className="my-2 mx-4">isClosable=true</span>
-          <Alert isClosable={true} title={title} description={description} />
-        </div>
-      </div>        
+      <Alert isClosable={true} title={title} description={description} />
     </div>
   );
 }`;
diff --git a/packages/components/alert/__tests__/alert.test.tsx b/packages/components/alert/__tests__/alert.test.tsx
index e3f768ea66..dfa3074c18 100644
--- a/packages/components/alert/__tests__/alert.test.tsx
+++ b/packages/components/alert/__tests__/alert.test.tsx
@@ -57,7 +57,7 @@ describe("Alert", () => {
     expect(closeButton).toBeNull();
   });
 
-  it("should call the onClose function when clicking on close button", async () => {
+  it("should call the onClose function when clicking on close button", () => {
     const onClose = jest.fn();
 
     const wrapper = render(<Alert description={description} title={title} onClose={onClose} />);
@@ -71,7 +71,7 @@ describe("Alert", () => {
     expect(onClose).toHaveBeenCalled();
   });
 
-  it("should close the alert when clicking on close button", async () => {
+  it("should close the alert when clicking on close button", () => {
     const wrapper = render(<Alert isClosable description={description} title={title} />);
 
     const closeButton = wrapper.getByRole("button");

From c9a37810ca374f17d3608c7443915a46c7cc7558 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Tue, 15 Oct 2024 11:13:16 +0530
Subject: [PATCH 54/62] chore(alert): implement ryo-manba's suggestion on close
 Icon

---
 .../content/components/alert/custom-impl.ts   |  3 +-
 apps/docs/content/docs/components/alert.mdx   |  1 +
 packages/components/alert/src/alert-icons.tsx | 30 +------------------
 packages/components/alert/src/alert.tsx       |  6 ++--
 packages/components/alert/src/use-alert.ts    |  8 +++++
 packages/core/theme/src/components/alert.ts   | 17 +++++++----
 6 files changed, 28 insertions(+), 37 deletions(-)

diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts
index 7f37bc727c..574fa828ec 100644
--- a/apps/docs/content/components/alert/custom-impl.ts
+++ b/apps/docs/content/components/alert/custom-impl.ts
@@ -76,6 +76,7 @@ const MyAlert = forwardRef((props, ref) => {
   color,
   isVisible,
   onClose,
+  getCloseIconProps,
   } = useAlert({
       ...props,
       ref,
@@ -104,7 +105,7 @@ const MyAlert = forwardRef((props, ref) => {
         {mainWrapper}
         {(isClosable || onClose) && (
           <button onClick={handleClose} {...getCloseButtonProps()}>
-            <CloseIcon />
+            <CloseIcon {...getCloseIconProps()}/>
           </button>
         )}
       </div>
diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index 8883500a77..60ae9c0972 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -72,6 +72,7 @@ It is set to false by default.
 - **closeButton**: The `closeButton`, it is at the top-right corner of alert.
 - **description**: The description of the alert.
 - **title**: The title of the alert.
+- **closeIcon**: close icon that is wrapped inside the `closeButton`.
 
 ### Custom Styles
 
diff --git a/packages/components/alert/src/alert-icons.tsx b/packages/components/alert/src/alert-icons.tsx
index b28ee3efd2..6254a7ef58 100644
--- a/packages/components/alert/src/alert-icons.tsx
+++ b/packages/components/alert/src/alert-icons.tsx
@@ -1,32 +1,4 @@
-import {
-  CloseIcon,
-  DangerIcon,
-  InfoCircleIcon,
-  SuccessIcon,
-  WarningIcon,
-} from "@nextui-org/shared-icons";
-
-export const AlertCloseIcon = (props: {color: string}) => {
-  switch (props.color) {
-    case "primary":
-      return <CloseIcon className="fill-current text-primary-200" height={20} width={20} />;
-
-    case "secondary":
-      return <CloseIcon className="fill-current text-secondary-200" height={20} width={20} />;
-
-    case "success":
-      return <CloseIcon className="fill-current text-success-200" height={20} width={20} />;
-
-    case "warning":
-      return <CloseIcon className="fill-current text-warning-200" height={20} width={20} />;
-
-    case "danger":
-      return <CloseIcon className="fill-current text-danger-200" height={20} width={20} />;
-
-    default:
-      return <CloseIcon className="fill-current text-default-400" height={20} width={20} />;
-  }
-};
+import {DangerIcon, InfoCircleIcon, SuccessIcon, WarningIcon} from "@nextui-org/shared-icons";
 
 export const AlertIcon = (props: {color: string}) => {
   switch (props.color) {
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 54139d2d28..b7db6bf781 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -1,8 +1,9 @@
 import {useMemo} from "react";
 import {forwardRef} from "@nextui-org/system";
+import {CloseIcon} from "@nextui-org/shared-icons";
 
 import {useAlert, UseAlertProps} from "./use-alert";
-import {AlertCloseIcon, AlertIcon} from "./alert-icons";
+import {AlertIcon} from "./alert-icons";
 
 export interface AlertProps extends UseAlertProps {}
 
@@ -21,6 +22,7 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
     color,
     isVisible,
     onClose,
+    getCloseIconProps,
   } = useAlert({...props, ref});
 
   const mainWrapper = useMemo(() => {
@@ -39,7 +41,7 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
         {mainWrapper}
         {(isClosable || onClose) && (
           <button onClick={handleClose} {...getCloseButtonProps()}>
-            <AlertCloseIcon color={color} />
+            <CloseIcon {...getCloseIconProps()} height={20} width={20} />
           </button>
         )}
       </div>
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index ba80eb1c4b..fab2c02b63 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -45,6 +45,7 @@ interface Props extends HTMLNextUIProps<"div"> {
    *    description: "description-classes"
    *    title: "title-classes"
    *    closeButton: "closeButton-classes"
+   *    closeIcon: "closeIcon-classes"
    * }} />
    * ```
    */
@@ -98,6 +99,12 @@ export function useAlert(originalProps: UseAlertProps) {
     };
   }, [slots, classNames?.closeButton]);
 
+  const getCloseIconProps = useCallback<PropGetter>(() => {
+    return {
+      className: slots.closeIcon({class: classNames?.closeIcon}),
+    };
+  }, [slots, classNames?.closeIcon]);
+
   return {
     title,
     description,
@@ -109,6 +116,7 @@ export function useAlert(originalProps: UseAlertProps) {
     getTitleProps,
     color: variantProps["color"],
     getCloseButtonProps,
+    getCloseIconProps,
     handleClose,
     isVisible,
     onClose,
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index 7e1efc9d56..4cb938c5eb 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -6,7 +6,7 @@ import {tv} from "../utils/tv";
  *
  * @example
  * ```js
- * const {base, mainWrapper, title, description, closeButton} = alert({...})
+ * const {base, mainWrapper, title, description, closeButton, closeIcon} = alert({...})
  *
  * <div className={base()}>
  *    <AlertIcon/>
@@ -27,6 +27,7 @@ const alert = tv({
     description: ["text-small font-normal h-5"],
     mainWrapper: ["w-[268px] h-11 ms-5 flex flex-col box-border items-start"],
     closeButton: ["w-6 h-6 cursor-pointer relative"],
+    closeIcon: ["fill-current"],
   },
   variants: {
     color: {
@@ -34,31 +35,37 @@ const alert = tv({
         base: ["bg-default-100"],
         title: ["text-foreground"],
         description: ["text-default-600"],
+        closeIcon: ["text-default-400"],
       },
       primary: {
         base: ["bg-primary-50"],
         title: ["text-primary"],
         description: ["text-primary"],
+        closeIcon: ["text-primary-200"],
       },
       secondary: {
         base: ["bg-secondary-50"],
         title: ["text-secondary"],
-        description: ["text-secondary"],
+        description: ["text-secondary-200"],
+        closeIcon: ["text-secondary-200"],
       },
       success: {
         base: ["bg-success-50"],
         title: ["text-success"],
-        description: ["text-success"],
+        description: ["text-success-200"],
+        closeIcon: ["text-success-200"],
       },
       warning: {
         base: ["bg-warning-50"],
         title: ["text-warning"],
-        description: ["text-warning"],
+        description: ["text-warning-200"],
+        closeIcon: ["text-warning-200"],
       },
       danger: {
         base: ["bg-danger-50"],
         title: ["text-danger"],
-        description: ["text-danger"],
+        description: ["text-danger-200"],
+        closeIcon: ["text-danger-200"],
       },
     },
     radius: {

From 9567d16de068916e4432fb9209d956bddbec607b Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Tue, 15 Oct 2024 20:32:16 +0530
Subject: [PATCH 55/62] chore(alert): make alert more responsive

---
 packages/core/theme/src/components/alert.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index 4cb938c5eb..656992b824 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -22,10 +22,10 @@ import {tv} from "../utils/tv";
  */
 const alert = tv({
   slots: {
-    base: ["flex flex-row w-[342px] h-17  p-3"],
+    base: ["flex flex-row w-[260px] sm:w-[342px] h-17  p-3"],
     title: ["text-medium font-normal block h-6"],
     description: ["text-small font-normal h-5"],
-    mainWrapper: ["w-[268px] h-11 ms-5 flex flex-col box-border items-start"],
+    mainWrapper: ["sm:w-[268px] w-[186px] h-11 ms-5 flex flex-col box-border items-start"],
     closeButton: ["w-6 h-6 cursor-pointer relative"],
     closeIcon: ["fill-current"],
   },

From 22c6a5196f268137af2d2775f7790f5f7c7b1a7f Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Wed, 16 Oct 2024 10:56:15 +0530
Subject: [PATCH 56/62] chore(alert): fix grammer issues suggested by
 coderabbit

---
 apps/docs/content/docs/components/alert.mdx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index 60ae9c0972..f1f0fc607e 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -55,10 +55,9 @@ Alerts are temporary notifications that provide concise feedback about an action
 
 ### isClosable
 
-If `isClosable` is true, a close button appears on the alert which closes it.
-It is set to false by default.
+If `isClosable` is true, a close button appears on the alert, which can be used to close it.
 
-> **Note**: If the `onClose` is passed, the close button is visible regardless of `isClosable` property.
+> **Note**: If the `onClose` is passed, the close button is visible regardless of the `isClosable` property.
 
 <CodeDemo title="isClosable" files={alertContent.isClosable} />
 

From 427c4fe979b1e49bf102aaabd5616864193f2f37 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Wed, 16 Oct 2024 20:21:25 +0530
Subject: [PATCH 57/62] fix(alert): add max-w property to make alert responsive

---
 packages/components/alert/stories/alert.stories.tsx | 10 +++++++---
 packages/core/theme/src/components/alert.ts         |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index d74f86865f..a856ca65fd 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -41,11 +41,15 @@ const defaultProps = {
   description: "You will get a reply soon",
 };
 
-const Template = (args) => <Alert {...args} />;
+const Template = (args) => (
+  <div className="w-full">
+    <Alert {...args} />
+  </div>
+);
 
 const ColorTemplate = (args) => {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col w-full">
       {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
         <div key={color} className="w-full flex justify-between items-center my-3">
           <span className="mx-4 text-md">{color}</span>
@@ -58,7 +62,7 @@ const ColorTemplate = (args) => {
 
 const RadiusTemplate = (args) => {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col w-full">
       {["none", "sm", "md", "lg", "full"].map((radius) => (
         <div key={radius} className="w-full flex justify-between items-center my-3">
           <span className="mx-4 text-md">{radius}</span>
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index 656992b824..b0b2509b2b 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -22,10 +22,10 @@ import {tv} from "../utils/tv";
  */
 const alert = tv({
   slots: {
-    base: ["flex flex-row w-[260px] sm:w-[342px] h-17  p-3"],
+    base: ["flex flex-row max-w-[342px] h-17  p-3"],
     title: ["text-medium font-normal block h-6"],
     description: ["text-small font-normal h-5"],
-    mainWrapper: ["sm:w-[268px] w-[186px] h-11 ms-5 flex flex-col box-border items-start"],
+    mainWrapper: ["max-w-[268px] h-11 ms-5 flex flex-col box-border items-start"],
     closeButton: ["w-6 h-6 cursor-pointer relative"],
     closeIcon: ["fill-current"],
   },

From c4b0987172dd033ec5232de6cd46cf1ee1ad73d9 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sat, 19 Oct 2024 10:14:58 +0530
Subject: [PATCH 58/62] chore(alert): improve responsiveness  and refactor
 alertIcon

---
 apps/docs/content/components/alert/colors.ts  |  4 +--
 .../content/components/alert/custom-impl.ts   | 31 ++++++++++---------
 apps/docs/content/components/alert/radius.ts  |  4 +--
 apps/docs/content/docs/components/alert.mdx   |  1 +
 packages/components/alert/src/alert-icons.tsx | 18 -----------
 packages/components/alert/src/alert.tsx       | 29 +++++++++++++++--
 packages/components/alert/src/use-alert.ts    |  7 +++++
 .../alert/stories/alert.stories.tsx           |  8 ++---
 packages/core/theme/src/components/alert.ts   | 21 +++++++++----
 9 files changed, 73 insertions(+), 50 deletions(-)
 delete mode 100644 packages/components/alert/src/alert-icons.tsx

diff --git a/apps/docs/content/components/alert/colors.ts b/apps/docs/content/components/alert/colors.ts
index 5838441197..c4877551ec 100644
--- a/apps/docs/content/components/alert/colors.ts
+++ b/apps/docs/content/components/alert/colors.ts
@@ -6,9 +6,9 @@ export default function App() {
 
   return (
     <div className="flex items-center justify-center w-screen">
-        <div className="flex flex-col">
+        <div className="flex flex-col w-full">
             {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
-                <div key={color} className="w-full flex justify-between items-center my-3">
+                <div key={color} className="w-full flex items-center my-3">
                     <span className="mx-4 text-md">{color}</span>
                     <Alert title={title} description={description} color={color} />
                 </div>
diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts
index 574fa828ec..92f376c04c 100644
--- a/apps/docs/content/components/alert/custom-impl.ts
+++ b/apps/docs/content/components/alert/custom-impl.ts
@@ -63,20 +63,21 @@ const styles = {
 
 const MyAlert = forwardRef((props, ref) => {
   const {
-  title,
-  description,
-  isClosable,
-  domRef,
-  handleClose,
-  getBaseProps,
-  getMainWrapperProps,
-  getDescriptionProps,
-  getTitleProps,
-  getCloseButtonProps,
-  color,
-  isVisible,
-  onClose,
-  getCloseIconProps,
+    title,
+    description,
+    isClosable,
+    domRef,
+    handleClose,
+    getBaseProps,
+    getMainWrapperProps,
+    getDescriptionProps,
+    getTitleProps,
+    getCloseButtonProps,
+    color,
+    isVisible,
+    onClose,
+    getCloseIconProps,
+    getAlertIconProps,
   } = useAlert({
       ...props,
       ref,
@@ -101,7 +102,7 @@ const MyAlert = forwardRef((props, ref) => {
   const baseWrapper = useMemo(() => {
     return isVisible ? (
       <div ref={domRef} {...getBaseProps()}>
-        <InfoCircleIcon />
+        <InfoCircleIcon {getAlertIconProps()} />
         {mainWrapper}
         {(isClosable || onClose) && (
           <button onClick={handleClose} {...getCloseButtonProps()}>
diff --git a/apps/docs/content/components/alert/radius.ts b/apps/docs/content/components/alert/radius.ts
index dc40a31e2a..19c3f552e8 100644
--- a/apps/docs/content/components/alert/radius.ts
+++ b/apps/docs/content/components/alert/radius.ts
@@ -6,9 +6,9 @@ export default function App() {
 
   return (
     <div className="flex items-center justify-center w-screen">
-        <div className="flex flex-col">
+        <div className="flex flex-col w-full">
             {["none", "sm", "md", "lg", "full"].map((radius) => (
-                <div key={radius} className="w-full flex justify-between items-center my-3">
+                <div key={radius} className="w-full flex items-center my-3">
                   <span className="mx-4 text-md">{radius}</span>
                   <Alert title={title} description={description} radius={radius} />
                 </div>
diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index f1f0fc607e..9f08e9d7e6 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -72,6 +72,7 @@ If `isClosable` is true, a close button appears on the alert, which can be used
 - **description**: The description of the alert.
 - **title**: The title of the alert.
 - **closeIcon**: close icon that is wrapped inside the `closeButton`.
+- **alertIcon**: icon that appears at the top-left corner.
 
 ### Custom Styles
 
diff --git a/packages/components/alert/src/alert-icons.tsx b/packages/components/alert/src/alert-icons.tsx
deleted file mode 100644
index 6254a7ef58..0000000000
--- a/packages/components/alert/src/alert-icons.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {DangerIcon, InfoCircleIcon, SuccessIcon, WarningIcon} from "@nextui-org/shared-icons";
-
-export const AlertIcon = (props: {color: string}) => {
-  switch (props.color) {
-    case "primary":
-      return <InfoCircleIcon className="fill-current text-primary" />;
-    case "secondary":
-      return <InfoCircleIcon className="fill-current text-secondary" />;
-    case "success":
-      return <SuccessIcon className="fill-current text-success" />;
-    case "warning":
-      return <WarningIcon className="fill-current text-warning" />;
-    case "danger":
-      return <DangerIcon className="fill-current text-danger" />;
-    default:
-      return <InfoCircleIcon className="fill-current text-default-foreground" />;
-  }
-};
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index b7db6bf781..9d41c71f22 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -1,9 +1,14 @@
 import {useMemo} from "react";
 import {forwardRef} from "@nextui-org/system";
-import {CloseIcon} from "@nextui-org/shared-icons";
+import {
+  CloseIcon,
+  DangerIcon,
+  InfoCircleIcon,
+  SuccessIcon,
+  WarningIcon,
+} from "@nextui-org/shared-icons";
 
 import {useAlert, UseAlertProps} from "./use-alert";
-import {AlertIcon} from "./alert-icons";
 
 export interface AlertProps extends UseAlertProps {}
 
@@ -23,6 +28,7 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
     isVisible,
     onClose,
     getCloseIconProps,
+    getAlertIconProps,
   } = useAlert({...props, ref});
 
   const mainWrapper = useMemo(() => {
@@ -34,10 +40,27 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
     );
   }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
 
+  const alertIcon = useMemo(() => {
+    switch (color) {
+      case "primary":
+        return <InfoCircleIcon {...getAlertIconProps()} />;
+      case "secondary":
+        return <InfoCircleIcon {...getAlertIconProps()} />;
+      case "success":
+        return <SuccessIcon {...getAlertIconProps()} />;
+      case "warning":
+        return <WarningIcon {...getAlertIconProps()} />;
+      case "danger":
+        return <DangerIcon {...getAlertIconProps()} />;
+      default:
+        return <InfoCircleIcon {...getAlertIconProps()} />;
+    }
+  }, [color, getAlertIconProps]);
+
   const baseWrapper = useMemo(() => {
     return isVisible ? (
       <div ref={domRef} {...getBaseProps()}>
-        <AlertIcon color={color} />
+        {alertIcon}
         {mainWrapper}
         {(isClosable || onClose) && (
           <button onClick={handleClose} {...getCloseButtonProps()}>
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index fab2c02b63..ce4f18dc8e 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -105,6 +105,12 @@ export function useAlert(originalProps: UseAlertProps) {
     };
   }, [slots, classNames?.closeIcon]);
 
+  const getAlertIconProps = useCallback<PropGetter>(() => {
+    return {
+      className: slots.alertIcon({class: classNames?.alertIcon}),
+    };
+  }, [slots, classNames?.alertIcon]);
+
   return {
     title,
     description,
@@ -120,5 +126,6 @@ export function useAlert(originalProps: UseAlertProps) {
     handleClose,
     isVisible,
     onClose,
+    getAlertIconProps,
   };
 }
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
index a856ca65fd..de8f01c413 100644
--- a/packages/components/alert/stories/alert.stories.tsx
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -42,16 +42,16 @@ const defaultProps = {
 };
 
 const Template = (args) => (
-  <div className="w-full">
+  <>
     <Alert {...args} />
-  </div>
+  </>
 );
 
 const ColorTemplate = (args) => {
   return (
     <div className="flex flex-col w-full">
       {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
-        <div key={color} className="w-full flex justify-between items-center my-3">
+        <div key={color} className="w-full flex items-center my-3">
           <span className="mx-4 text-md">{color}</span>
           <Alert {...args} color={color} />
         </div>
@@ -64,7 +64,7 @@ const RadiusTemplate = (args) => {
   return (
     <div className="flex flex-col w-full">
       {["none", "sm", "md", "lg", "full"].map((radius) => (
-        <div key={radius} className="w-full flex justify-between items-center my-3">
+        <div key={radius} className="w-full flex items-center my-3">
           <span className="mx-4 text-md">{radius}</span>
           <Alert {...args} radius={radius} />
         </div>
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index b0b2509b2b..e336db4f6c 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -6,10 +6,10 @@ import {tv} from "../utils/tv";
  *
  * @example
  * ```js
- * const {base, mainWrapper, title, description, closeButton, closeIcon} = alert({...})
+ * const {base, mainWrapper, title, description, closeButton, closeIcon, alertIcon} = alert({...})
  *
  * <div className={base()}>
- *    <AlertIcon/>
+ *    {alertIcon}
  *    <div className={mainWrapper()}>
  *       <div className={title()}>Title</div>
  *       <div className={description()}>Description</div>
@@ -22,12 +22,15 @@ import {tv} from "../utils/tv";
  */
 const alert = tv({
   slots: {
-    base: ["flex flex-row max-w-[342px] h-17  p-3"],
-    title: ["text-medium font-normal block h-6"],
-    description: ["text-small font-normal h-5"],
-    mainWrapper: ["max-w-[268px] h-11 ms-5 flex flex-col box-border items-start"],
+    base: ["flex flex-row max-w-[342px] flex-grow min-h-17 max-h-full p-3"],
+    mainWrapper: [
+      "flex-grow max-w-[268px] min-h-11 max-h-full ms-5 flex flex-col box-border items-start",
+    ],
+    title: ["w-full text-medium font-normal block min-h-6 max-h-full"],
+    description: ["text-small font-normal min-h-5 max-h-full"],
     closeButton: ["w-6 h-6 cursor-pointer relative"],
     closeIcon: ["fill-current"],
+    alertIcon: ["fill-current"],
   },
   variants: {
     color: {
@@ -36,36 +39,42 @@ const alert = tv({
         title: ["text-foreground"],
         description: ["text-default-600"],
         closeIcon: ["text-default-400"],
+        alertIcon: ["text-default-foreground"],
       },
       primary: {
         base: ["bg-primary-50"],
         title: ["text-primary"],
         description: ["text-primary"],
         closeIcon: ["text-primary-200"],
+        alertIcon: ["text-primary"],
       },
       secondary: {
         base: ["bg-secondary-50"],
         title: ["text-secondary"],
         description: ["text-secondary-200"],
         closeIcon: ["text-secondary-200"],
+        alertIcon: ["text-secondary"],
       },
       success: {
         base: ["bg-success-50"],
         title: ["text-success"],
         description: ["text-success-200"],
         closeIcon: ["text-success-200"],
+        alertIcon: ["text-success"],
       },
       warning: {
         base: ["bg-warning-50"],
         title: ["text-warning"],
         description: ["text-warning-200"],
         closeIcon: ["text-warning-200"],
+        alertIcon: ["text-warning"],
       },
       danger: {
         base: ["bg-danger-50"],
         title: ["text-danger"],
         description: ["text-danger-200"],
         closeIcon: ["text-danger-200"],
+        alertIcon: ["text-danger"],
       },
     },
     radius: {

From c1d0ae96daa2469fec458c5b0c941b83797dcc4f Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sat, 19 Oct 2024 10:51:56 +0530
Subject: [PATCH 59/62] chore(alert): add missing dependency to useMemo

---
 packages/components/alert/src/alert.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 9d41c71f22..4ddee4e28f 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -79,6 +79,7 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
     handleClose,
     color,
     onClose,
+    alertIcon,
   ]);
 
   return <>{baseWrapper}</>;

From 02dd7103eb7c56540d4b05572435d052b9162b15 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sat, 19 Oct 2024 11:38:43 +0530
Subject: [PATCH 60/62] chore(alert): implement coderabbit's suggestions

---
 apps/docs/content/components/alert/custom-impl.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts
index 92f376c04c..e7e563f4b1 100644
--- a/apps/docs/content/components/alert/custom-impl.ts
+++ b/apps/docs/content/components/alert/custom-impl.ts
@@ -102,7 +102,7 @@ const MyAlert = forwardRef((props, ref) => {
   const baseWrapper = useMemo(() => {
     return isVisible ? (
       <div ref={domRef} {...getBaseProps()}>
-        <InfoCircleIcon {getAlertIconProps()} />
+        <InfoCircleIcon {...getAlertIconProps()} />
         {mainWrapper}
         {(isClosable || onClose) && (
           <button onClick={handleClose} {...getCloseButtonProps()}>
@@ -120,7 +120,9 @@ const MyAlert = forwardRef((props, ref) => {
     getBaseProps,
     handleClose,
     color,
-    onClose
+    onClose,
+    getAlertIconProps,
+    getCloseIconProps,
   ]);
 
   return <>{baseWrapper}</>;

From 1c94c042fd3eb3a2bf98244283637482e3c94f31 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Tue, 22 Oct 2024 09:47:38 +0530
Subject: [PATCH 61/62] chore(alert): update docs and refactor

---
 apps/docs/content/docs/components/alert.mdx | 35 ++++++++++++++-------
 packages/components/alert/src/index.ts      |  8 +++++
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index 9f08e9d7e6..66af314d4d 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -13,7 +13,7 @@ Alerts are temporary notifications that provide concise feedback about an action
 
 ---
 
-
+<CarbonAd/>
 
 ## Installation
 
@@ -66,19 +66,32 @@ If `isClosable` is true, a close button appears on the alert, which can be used
 
 ## Slots
 
-- **base**: Alert wrapper, it handles alignment, placement, and general appearance.
-- **mainWrapper**: Wraps the `title` and `description` of the alert.
-- **closeButton**: The `closeButton`, it is at the top-right corner of alert.
-- **description**: The description of the alert.
-- **title**: The title of the alert.
-- **closeIcon**: close icon that is wrapped inside the `closeButton`.
-- **alertIcon**: icon that appears at the top-left corner.
+- **base**:
+  Alert wrapper, it handles alignment, placement, and general appearance.
+- **mainWrapper**:
+  Wraps the `title` and `description` of the alert.
+- **closeButton**:
+  The `closeButton`, it is at the top-right corner of alert.
+- **description**:
+  The description of the alert.
+- **title**:
+  The title of the alert.
+- **closeIcon**:
+  close icon that is wrapped inside the `closeButton`.
+- **alertIcon**:
+  icon that appears at the top-left corner.
+
+<Spacer y={4} />
+
+### Custom Alert Styles
+
+You can customize the alert styles  by using the `classNames` property.
 
-### Custom Styles
+Here's an example of how to customize the alert styles:
 
-You can customize the `Alert` component by passing custom Tailwind CSS classes to the component slots.
+<CodeDemo title="Custom Alert Styles" files={alertContent.customStyles} />
 
-<CodeDemo title="Custom Styles" highlightedLines="12-32" files={alertContent.customStyles} />
+<Spacer y={4} />
 
 ### Custom Implementation
 
diff --git a/packages/components/alert/src/index.ts b/packages/components/alert/src/index.ts
index 068922fc0e..e1d0ea8cf6 100644
--- a/packages/components/alert/src/index.ts
+++ b/packages/components/alert/src/index.ts
@@ -1,2 +1,10 @@
 import Alert from "./alert";
+
+// export types
+export type {AlertProps} from "./alert";
+
+// export hooks
+export {useAlert} from "./use-alert";
+
+// export component
 export {Alert};

From eebab5d520ca832f577eea849eb16d4f64cb00f2 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Wed, 23 Oct 2024 10:30:22 +0530
Subject: [PATCH 62/62] chore(alert): refactor alertIcon and implement
 coderabbit's suggestion

---
 .../content/components/alert/custom-impl.ts   |  3 +-
 apps/docs/content/docs/components/alert.mdx   |  4 +--
 packages/components/alert/src/alert.tsx       | 29 ++++++++-----------
 packages/components/alert/src/use-alert.ts    |  7 -----
 packages/core/theme/src/components/alert.ts   | 18 ++++++------
 5 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts
index e7e563f4b1..9f5a2c70a2 100644
--- a/apps/docs/content/components/alert/custom-impl.ts
+++ b/apps/docs/content/components/alert/custom-impl.ts
@@ -106,7 +106,7 @@ const MyAlert = forwardRef((props, ref) => {
         {mainWrapper}
         {(isClosable || onClose) && (
           <button onClick={handleClose} {...getCloseButtonProps()}>
-            <CloseIcon {...getCloseIconProps()}/>
+            <CloseIcon />
           </button>
         )}
       </div>
@@ -122,7 +122,6 @@ const MyAlert = forwardRef((props, ref) => {
     color,
     onClose,
     getAlertIconProps,
-    getCloseIconProps,
   ]);
 
   return <>{baseWrapper}</>;
diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
index 66af314d4d..6da1651c1e 100644
--- a/apps/docs/content/docs/components/alert.mdx
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -71,13 +71,13 @@ If `isClosable` is true, a close button appears on the alert, which can be used
 - **mainWrapper**:
   Wraps the `title` and `description` of the alert.
 - **closeButton**:
-  The `closeButton`, it is at the top-right corner of alert.
+  The `closeButton`, it is in the top-right corner of alert.
 - **description**:
   The description of the alert.
 - **title**:
   The title of the alert.
 - **closeIcon**:
-  close icon that is wrapped inside the `closeButton`.
+  The close icon that is wrapped inside the `closeButton`.
 - **alertIcon**:
   icon that appears at the top-left corner.
 
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
index 4ddee4e28f..e97880144d 100644
--- a/packages/components/alert/src/alert.tsx
+++ b/packages/components/alert/src/alert.tsx
@@ -27,7 +27,6 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
     color,
     isVisible,
     onClose,
-    getCloseIconProps,
     getAlertIconProps,
   } = useAlert({...props, ref});
 
@@ -40,21 +39,18 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
     );
   }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
 
+  const iconMap = {
+    primary: InfoCircleIcon,
+    secondary: InfoCircleIcon,
+    success: SuccessIcon,
+    warning: WarningIcon,
+    danger: DangerIcon,
+  };
+
+  const IconComponent = iconMap[color] || InfoCircleIcon;
+
   const alertIcon = useMemo(() => {
-    switch (color) {
-      case "primary":
-        return <InfoCircleIcon {...getAlertIconProps()} />;
-      case "secondary":
-        return <InfoCircleIcon {...getAlertIconProps()} />;
-      case "success":
-        return <SuccessIcon {...getAlertIconProps()} />;
-      case "warning":
-        return <WarningIcon {...getAlertIconProps()} />;
-      case "danger":
-        return <DangerIcon {...getAlertIconProps()} />;
-      default:
-        return <InfoCircleIcon {...getAlertIconProps()} />;
-    }
+    return <IconComponent {...getAlertIconProps()} />;
   }, [color, getAlertIconProps]);
 
   const baseWrapper = useMemo(() => {
@@ -64,7 +60,7 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
         {mainWrapper}
         {(isClosable || onClose) && (
           <button onClick={handleClose} {...getCloseButtonProps()}>
-            <CloseIcon {...getCloseIconProps()} height={20} width={20} />
+            <CloseIcon height={20} width={20} />
           </button>
         )}
       </div>
@@ -77,7 +73,6 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
     domRef,
     getBaseProps,
     handleClose,
-    color,
     onClose,
     alertIcon,
   ]);
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
index ce4f18dc8e..ea6026d222 100644
--- a/packages/components/alert/src/use-alert.ts
+++ b/packages/components/alert/src/use-alert.ts
@@ -99,12 +99,6 @@ export function useAlert(originalProps: UseAlertProps) {
     };
   }, [slots, classNames?.closeButton]);
 
-  const getCloseIconProps = useCallback<PropGetter>(() => {
-    return {
-      className: slots.closeIcon({class: classNames?.closeIcon}),
-    };
-  }, [slots, classNames?.closeIcon]);
-
   const getAlertIconProps = useCallback<PropGetter>(() => {
     return {
       className: slots.alertIcon({class: classNames?.alertIcon}),
@@ -122,7 +116,6 @@ export function useAlert(originalProps: UseAlertProps) {
     getTitleProps,
     color: variantProps["color"],
     getCloseButtonProps,
-    getCloseIconProps,
     handleClose,
     isVisible,
     onClose,
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
index e336db4f6c..759350f264 100644
--- a/packages/core/theme/src/components/alert.ts
+++ b/packages/core/theme/src/components/alert.ts
@@ -6,7 +6,8 @@ import {tv} from "../utils/tv";
  *
  * @example
  * ```js
- * const {base, mainWrapper, title, description, closeButton, closeIcon, alertIcon} = alert({...})
+ * const {base, mainWrapper, title, description, closeButton, alertIcon} = alert({...})
+ *
  *
  * <div className={base()}>
  *    {alertIcon}
@@ -28,8 +29,7 @@ const alert = tv({
     ],
     title: ["w-full text-medium font-normal block min-h-6 max-h-full"],
     description: ["text-small font-normal min-h-5 max-h-full"],
-    closeButton: ["w-6 h-6 cursor-pointer relative"],
-    closeIcon: ["fill-current"],
+    closeButton: ["w-6 h-6 cursor-pointer relative fill-current"],
     alertIcon: ["fill-current"],
   },
   variants: {
@@ -38,42 +38,42 @@ const alert = tv({
         base: ["bg-default-100"],
         title: ["text-foreground"],
         description: ["text-default-600"],
-        closeIcon: ["text-default-400"],
+        closeButton: ["text-default-400"],
         alertIcon: ["text-default-foreground"],
       },
       primary: {
         base: ["bg-primary-50"],
         title: ["text-primary"],
         description: ["text-primary"],
-        closeIcon: ["text-primary-200"],
+        closeButton: ["text-primary-200"],
         alertIcon: ["text-primary"],
       },
       secondary: {
         base: ["bg-secondary-50"],
         title: ["text-secondary"],
         description: ["text-secondary-200"],
-        closeIcon: ["text-secondary-200"],
+        closeButton: ["text-secondary-200"],
         alertIcon: ["text-secondary"],
       },
       success: {
         base: ["bg-success-50"],
         title: ["text-success"],
         description: ["text-success-200"],
-        closeIcon: ["text-success-200"],
+        closeButton: ["text-success-200"],
         alertIcon: ["text-success"],
       },
       warning: {
         base: ["bg-warning-50"],
         title: ["text-warning"],
         description: ["text-warning-200"],
-        closeIcon: ["text-warning-200"],
+        closeButton: ["text-warning-200"],
         alertIcon: ["text-warning"],
       },
       danger: {
         base: ["bg-danger-50"],
         title: ["text-danger"],
         description: ["text-danger-200"],
-        closeIcon: ["text-danger-200"],
+        closeButton: ["text-danger-200"],
         alertIcon: ["text-danger"],
       },
     },