fix(alert): mark description optional & revise styles when only children is provided (#4447)

* fix(alert): mark description as optional and update description

* fix(theme): alignment when only children is provided

* feat(changeset): add changeset

Author: wingkwong

.changeset/neat-badgers-beam.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/alert": patch
+---
+
+mark description prop as optional (#4445)

.changeset/new-cups-tan.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+fix the alignment when only alert children is provided

packages/components/alert/src/use-alert.ts

@@ -19,9 +19,9 @@ interface Props extends HTMLNextUIProps<"div"> {
    */
   title?: string;
   /**
-   * Main body of the alert message
+   * description of the alert message
    */
-  description: ReactNode;
+  description?: ReactNode;
   /**
    * Icon to be displayed in the alert - overrides the default icon
    */

packages/core/theme/src/components/alert.ts

@@ -25,7 +25,8 @@ import {colorVariants} from "../utils";
 const alert = tv({
   slots: {
     base: "flex flex-grow flex-row w-full items-start py-3 px-4 gap-x-1",
-    mainWrapper: "h-full flex-grow min-h-10 ms-2 flex flex-col box-border items-start text-inherit",
+    mainWrapper:
+      "h-full flex-grow min-h-10 ms-2 flex flex-col box-border items-start text-inherit justify-center",
     title: "text-small w-full font-medium block text-inherit leading-5",
     description: "pl-[1px] text-small font-normal text-inherit",
     closeButton: "relative text-inherit translate-x-1 -translate-y-1",