@nextui-org/theme 2.3.0-beta.4 → 2.3.0-beta.6

package/dist/{chunk-3XDFZGUJ.mjs → chunk-SKCOO5MF.mjs}

@@ -8,13 +8,12 @@ import {
 // src/components/alert.ts
 var alert = tv({
   slots: {
-    base: "flex flex-row w-full flex-grow min-h-17 max-h-full py-3 px-4",
-    mainWrapper: [
-      "flex-grow min-h-11 max-h-full ms-2 flex flex-col box-border items-start text-inherit"
-    ],
-    title: "w-full text-medium font-normal block min-h-6 max-h-full text-inherit",
-    description: "text-small font-normal min-h-5 max-h-full text-inherit",
+    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",
+    title: "w-full font-medium block text-inherit leading-5",
+    description: "pl-[1px] text-small font-normal text-inherit",
     closeButton: "relative text-inherit",
+    iconWrapper: "flex items-center justify-center w-9 h-9 rounded-full",
     alertIcon: "fill-current w-6"
   },
   variants: {
@@ -29,8 +28,11 @@ var alert = tv({
     variant: {
       solid: {},
       flat: {},
+      faded: {
+        base: "border-small"
+      },
       bordered: {
-        base: "border-medium bg-transparent"
+        base: "border-small bg-transparent"
       }
     },
     radius: {
@@ -50,10 +52,18 @@ var alert = tv({
         base: "rounded-full"
       }
     },
-    hasDescription: {
+    hideIcon: {
       true: {
-        alertIcon: "mt-0.5"
-      },
+        iconWrapper: "hidden"
+      }
+    },
+    hideIconWrapper: {
+      true: {
+        base: "gap-x-0",
+        iconWrapper: "!bg-transparent !shadow-none"
+      }
+    },
+    hasDescription: {
       false: {
         base: "items-center",
         mainWrapper: "justify-center"
@@ -63,7 +73,9 @@ var alert = tv({
   defaultVariants: {
     color: "default",
     variant: "flat",
-    radius: "md"
+    radius: "md",
+    hideIcon: false,
+    hideIconWrapper: false
   },
   compoundVariants: [
     {
@@ -111,52 +123,100 @@ var alert = tv({
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "default",
       class: {
         base: [colorVariants.flat.default, "text-default-foreground"],
         description: "text-default-600",
-        closeButton: "text-default-400"
+        closeButton: "text-default-400",
+        iconWrapper: "bg-default-50 dark:bg-default-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "primary",
       class: {
         base: colorVariants.flat.primary,
-        closeButton: "text-primary-400 data-[hover]:bg-primary-100"
+        closeButton: "text-primary-400 data-[hover]:bg-primary-100",
+        iconWrapper: "bg-primary-50 dark:bg-primary-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "secondary",
       class: {
         base: colorVariants.flat.secondary,
-        closeButton: "text-secondary-400 data-[hover]:bg-secondary-100"
+        closeButton: "text-secondary-400 data-[hover]:bg-secondary-100",
+        iconWrapper: "bg-secondary-50 dark:bg-secondary-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "success",
       class: {
         base: colorVariants.flat.success,
-        closeButton: "text-success-400 data-[hover]:bg-success-100"
+        closeButton: "text-success-400 data-[hover]:bg-success-100",
+        iconWrapper: "bg-success-50 dark:bg-success-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "warning",
       class: {
         base: colorVariants.flat.warning,
-        closeButton: "text-warning-500 data-[hover]:bg-warning-200"
+        closeButton: "text-warning-500 data-[hover]:bg-warning-200",
+        iconWrapper: "bg-warning-50 dark:bg-warning-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "danger",
       class: {
         base: colorVariants.flat.danger,
-        closeButton: "text-danger-400 data-[hover]:bg-danger-100"
+        closeButton: "text-danger-400 data-[hover]:bg-danger-100",
+        iconWrapper: "bg-danger-50 dark:bg-danger-100"
+      }
+    },
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        base: "border-default"
+      }
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        base: "border-primary"
+      }
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        base: "border-secondary"
+      }
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        base: "border-success"
+      }
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        base: "border-warning"
+      }
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        base: "border-danger"
       }
     },
     {
@@ -207,6 +267,54 @@ var alert = tv({
         base: [colorVariants.bordered.danger],
         closeButton: "data-[hover]:bg-danger-50"
       }
+    },
+    {
+      variant: ["flat", "bordered", "faded"],
+      class: {
+        iconWrapper: "shadow-small"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        iconWrapper: "bg-default-200 dark:bg-default-100"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        iconWrapper: "bg-primary-100 dark:bg-primary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        iconWrapper: "bg-secondary-100 dark:bg-secondary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        iconWrapper: "bg-success-100 dark:bg-success-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        iconWrapper: "bg-warning-100 dark:bg-warning-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        iconWrapper: "bg-danger-100 dark:bg-danger-50"
+      }
     }
   ]
 });

package/dist/components/alert.d.ts

@@ -34,6 +34,9 @@ declare const alert: tailwind_variants.TVReturnType<{
     variant: {
         solid: {};
         flat: {};
+        faded: {
+            base: string;
+        };
         bordered: {
             base: string;
         };
@@ -55,10 +58,18 @@ declare const alert: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    hasDescription: {
+    hideIcon: {
+        true: {
+            iconWrapper: string;
+        };
+    };
+    hideIconWrapper: {
         true: {
-            alertIcon: string;
+            base: string;
+            iconWrapper: string;
         };
+    };
+    hasDescription: {
         false: {
             base: string;
             mainWrapper: string;
@@ -66,10 +77,11 @@ declare const alert: tailwind_variants.TVReturnType<{
     };
 }, {
     base: string;
-    mainWrapper: string[];
+    mainWrapper: string;
     title: string;
     description: string;
     closeButton: string;
+    iconWrapper: string;
     alertIcon: string;
 }, undefined, tailwind_variants_dist_config.TVConfig<{
     color: {
@@ -83,6 +95,9 @@ declare const alert: tailwind_variants.TVReturnType<{
     variant: {
         solid: {};
         flat: {};
+        faded: {
+            base: string;
+        };
         bordered: {
             base: string;
         };
@@ -104,10 +119,18 @@ declare const alert: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    hasDescription: {
+    hideIcon: {
         true: {
-            alertIcon: string;
+            iconWrapper: string;
+        };
+    };
+    hideIconWrapper: {
+        true: {
+            base: string;
+            iconWrapper: string;
         };
+    };
+    hasDescription: {
         false: {
             base: string;
             mainWrapper: string;
@@ -125,6 +148,9 @@ declare const alert: tailwind_variants.TVReturnType<{
     variant: {
         solid: {};
         flat: {};
+        faded: {
+            base: string;
+        };
         bordered: {
             base: string;
         };
@@ -146,10 +172,18 @@ declare const alert: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    hasDescription: {
+    hideIcon: {
+        true: {
+            iconWrapper: string;
+        };
+    };
+    hideIconWrapper: {
         true: {
-            alertIcon: string;
+            base: string;
+            iconWrapper: string;
         };
+    };
+    hasDescription: {
         false: {
             base: string;
             mainWrapper: string;
@@ -167,6 +201,9 @@ declare const alert: tailwind_variants.TVReturnType<{
     variant: {
         solid: {};
         flat: {};
+        faded: {
+            base: string;
+        };
         bordered: {
             base: string;
         };
@@ -188,10 +225,18 @@ declare const alert: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    hasDescription: {
+    hideIcon: {
         true: {
-            alertIcon: string;
+            iconWrapper: string;
         };
+    };
+    hideIconWrapper: {
+        true: {
+            base: string;
+            iconWrapper: string;
+        };
+    };
+    hasDescription: {
         false: {
             base: string;
             mainWrapper: string;
@@ -199,10 +244,11 @@ declare const alert: tailwind_variants.TVReturnType<{
     };
 }, {
     base: string;
-    mainWrapper: string[];
+    mainWrapper: string;
     title: string;
     description: string;
     closeButton: string;
+    iconWrapper: string;
     alertIcon: string;
 }, tailwind_variants.TVReturnType<{
     color: {
@@ -216,6 +262,9 @@ declare const alert: tailwind_variants.TVReturnType<{
     variant: {
         solid: {};
         flat: {};
+        faded: {
+            base: string;
+        };
         bordered: {
             base: string;
         };
@@ -237,10 +286,18 @@ declare const alert: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    hasDescription: {
+    hideIcon: {
+        true: {
+            iconWrapper: string;
+        };
+    };
+    hideIconWrapper: {
         true: {
-            alertIcon: string;
+            base: string;
+            iconWrapper: string;
         };
+    };
+    hasDescription: {
         false: {
             base: string;
             mainWrapper: string;
@@ -248,10 +305,11 @@ declare const alert: tailwind_variants.TVReturnType<{
     };
 }, {
     base: string;
-    mainWrapper: string[];
+    mainWrapper: string;
     title: string;
     description: string;
     closeButton: string;
+    iconWrapper: string;
     alertIcon: string;
 }, undefined, tailwind_variants_dist_config.TVConfig<{
     color: {
@@ -265,6 +323,9 @@ declare const alert: tailwind_variants.TVReturnType<{
     variant: {
         solid: {};
         flat: {};
+        faded: {
+            base: string;
+        };
         bordered: {
             base: string;
         };
@@ -286,10 +347,18 @@ declare const alert: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    hasDescription: {
+    hideIcon: {
         true: {
-            alertIcon: string;
+            iconWrapper: string;
         };
+    };
+    hideIconWrapper: {
+        true: {
+            base: string;
+            iconWrapper: string;
+        };
+    };
+    hasDescription: {
         false: {
             base: string;
             mainWrapper: string;
@@ -307,6 +376,9 @@ declare const alert: tailwind_variants.TVReturnType<{
     variant: {
         solid: {};
         flat: {};
+        faded: {
+            base: string;
+        };
         bordered: {
             base: string;
         };
@@ -328,10 +400,18 @@ declare const alert: tailwind_variants.TVReturnType<{
             base: string;
         };
     };
-    hasDescription: {
+    hideIcon: {
         true: {
-            alertIcon: string;
+            iconWrapper: string;
         };
+    };
+    hideIconWrapper: {
+        true: {
+            base: string;
+            iconWrapper: string;
+        };
+    };
+    hasDescription: {
         false: {
             base: string;
             mainWrapper: string;

package/dist/components/alert.js

@@ -147,13 +147,12 @@ var colorVariants = {
 // src/components/alert.ts
 var alert = tv({
   slots: {
-    base: "flex flex-row w-full flex-grow min-h-17 max-h-full py-3 px-4",
-    mainWrapper: [
-      "flex-grow min-h-11 max-h-full ms-2 flex flex-col box-border items-start text-inherit"
-    ],
-    title: "w-full text-medium font-normal block min-h-6 max-h-full text-inherit",
-    description: "text-small font-normal min-h-5 max-h-full text-inherit",
+    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",
+    title: "w-full font-medium block text-inherit leading-5",
+    description: "pl-[1px] text-small font-normal text-inherit",
     closeButton: "relative text-inherit",
+    iconWrapper: "flex items-center justify-center w-9 h-9 rounded-full",
     alertIcon: "fill-current w-6"
   },
   variants: {
@@ -168,8 +167,11 @@ var alert = tv({
     variant: {
       solid: {},
       flat: {},
+      faded: {
+        base: "border-small"
+      },
       bordered: {
-        base: "border-medium bg-transparent"
+        base: "border-small bg-transparent"
       }
     },
     radius: {
@@ -189,10 +191,18 @@ var alert = tv({
         base: "rounded-full"
       }
     },
-    hasDescription: {
+    hideIcon: {
       true: {
-        alertIcon: "mt-0.5"
-      },
+        iconWrapper: "hidden"
+      }
+    },
+    hideIconWrapper: {
+      true: {
+        base: "gap-x-0",
+        iconWrapper: "!bg-transparent !shadow-none"
+      }
+    },
+    hasDescription: {
       false: {
         base: "items-center",
         mainWrapper: "justify-center"
@@ -202,7 +212,9 @@ var alert = tv({
   defaultVariants: {
     color: "default",
     variant: "flat",
-    radius: "md"
+    radius: "md",
+    hideIcon: false,
+    hideIconWrapper: false
   },
   compoundVariants: [
     {
@@ -250,52 +262,100 @@ var alert = tv({
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "default",
       class: {
         base: [colorVariants.flat.default, "text-default-foreground"],
         description: "text-default-600",
-        closeButton: "text-default-400"
+        closeButton: "text-default-400",
+        iconWrapper: "bg-default-50 dark:bg-default-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "primary",
       class: {
         base: colorVariants.flat.primary,
-        closeButton: "text-primary-400 data-[hover]:bg-primary-100"
+        closeButton: "text-primary-400 data-[hover]:bg-primary-100",
+        iconWrapper: "bg-primary-50 dark:bg-primary-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "secondary",
       class: {
         base: colorVariants.flat.secondary,
-        closeButton: "text-secondary-400 data-[hover]:bg-secondary-100"
+        closeButton: "text-secondary-400 data-[hover]:bg-secondary-100",
+        iconWrapper: "bg-secondary-50 dark:bg-secondary-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "success",
       class: {
         base: colorVariants.flat.success,
-        closeButton: "text-success-400 data-[hover]:bg-success-100"
+        closeButton: "text-success-400 data-[hover]:bg-success-100",
+        iconWrapper: "bg-success-50 dark:bg-success-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "warning",
       class: {
         base: colorVariants.flat.warning,
-        closeButton: "text-warning-500 data-[hover]:bg-warning-200"
+        closeButton: "text-warning-500 data-[hover]:bg-warning-200",
+        iconWrapper: "bg-warning-50 dark:bg-warning-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "danger",
       class: {
         base: colorVariants.flat.danger,
-        closeButton: "text-danger-400 data-[hover]:bg-danger-100"
+        closeButton: "text-danger-400 data-[hover]:bg-danger-100",
+        iconWrapper: "bg-danger-50 dark:bg-danger-100"
+      }
+    },
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        base: "border-default"
+      }
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        base: "border-primary"
+      }
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        base: "border-secondary"
+      }
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        base: "border-success"
+      }
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        base: "border-warning"
+      }
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        base: "border-danger"
       }
     },
     {
@@ -346,6 +406,54 @@ var alert = tv({
         base: [colorVariants.bordered.danger],
         closeButton: "data-[hover]:bg-danger-50"
       }
+    },
+    {
+      variant: ["flat", "bordered", "faded"],
+      class: {
+        iconWrapper: "shadow-small"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        iconWrapper: "bg-default-200 dark:bg-default-100"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        iconWrapper: "bg-primary-100 dark:bg-primary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        iconWrapper: "bg-secondary-100 dark:bg-secondary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        iconWrapper: "bg-success-100 dark:bg-success-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        iconWrapper: "bg-warning-100 dark:bg-warning-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        iconWrapper: "bg-danger-100 dark:bg-danger-50"
+      }
     }
   ]
 });

package/dist/components/alert.mjs

@@ -1,6 +1,6 @@
 import {
   alert
-} from "../chunk-3XDFZGUJ.mjs";
+} from "../chunk-SKCOO5MF.mjs";
 import "../chunk-IV3K5WDK.mjs";
 import "../chunk-GQT3YUX3.mjs";
 import "../chunk-46U6G7UJ.mjs";

package/dist/components/index.js

@@ -8837,13 +8837,12 @@ var dateRangePicker = tv({
 // src/components/alert.ts
 var alert = tv({
   slots: {
-    base: "flex flex-row w-full flex-grow min-h-17 max-h-full py-3 px-4",
-    mainWrapper: [
-      "flex-grow min-h-11 max-h-full ms-2 flex flex-col box-border items-start text-inherit"
-    ],
-    title: "w-full text-medium font-normal block min-h-6 max-h-full text-inherit",
-    description: "text-small font-normal min-h-5 max-h-full text-inherit",
+    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",
+    title: "w-full font-medium block text-inherit leading-5",
+    description: "pl-[1px] text-small font-normal text-inherit",
     closeButton: "relative text-inherit",
+    iconWrapper: "flex items-center justify-center w-9 h-9 rounded-full",
     alertIcon: "fill-current w-6"
   },
   variants: {
@@ -8858,8 +8857,11 @@ var alert = tv({
     variant: {
       solid: {},
       flat: {},
+      faded: {
+        base: "border-small"
+      },
       bordered: {
-        base: "border-medium bg-transparent"
+        base: "border-small bg-transparent"
       }
     },
     radius: {
@@ -8879,10 +8881,18 @@ var alert = tv({
         base: "rounded-full"
       }
     },
-    hasDescription: {
+    hideIcon: {
       true: {
-        alertIcon: "mt-0.5"
-      },
+        iconWrapper: "hidden"
+      }
+    },
+    hideIconWrapper: {
+      true: {
+        base: "gap-x-0",
+        iconWrapper: "!bg-transparent !shadow-none"
+      }
+    },
+    hasDescription: {
       false: {
         base: "items-center",
         mainWrapper: "justify-center"
@@ -8892,7 +8902,9 @@ var alert = tv({
   defaultVariants: {
     color: "default",
     variant: "flat",
-    radius: "md"
+    radius: "md",
+    hideIcon: false,
+    hideIconWrapper: false
   },
   compoundVariants: [
     {
@@ -8940,52 +8952,100 @@ var alert = tv({
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "default",
       class: {
         base: [colorVariants.flat.default, "text-default-foreground"],
         description: "text-default-600",
-        closeButton: "text-default-400"
+        closeButton: "text-default-400",
+        iconWrapper: "bg-default-50 dark:bg-default-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "primary",
       class: {
         base: colorVariants.flat.primary,
-        closeButton: "text-primary-400 data-[hover]:bg-primary-100"
+        closeButton: "text-primary-400 data-[hover]:bg-primary-100",
+        iconWrapper: "bg-primary-50 dark:bg-primary-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "secondary",
       class: {
         base: colorVariants.flat.secondary,
-        closeButton: "text-secondary-400 data-[hover]:bg-secondary-100"
+        closeButton: "text-secondary-400 data-[hover]:bg-secondary-100",
+        iconWrapper: "bg-secondary-50 dark:bg-secondary-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "success",
       class: {
         base: colorVariants.flat.success,
-        closeButton: "text-success-400 data-[hover]:bg-success-100"
+        closeButton: "text-success-400 data-[hover]:bg-success-100",
+        iconWrapper: "bg-success-50 dark:bg-success-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "warning",
       class: {
         base: colorVariants.flat.warning,
-        closeButton: "text-warning-500 data-[hover]:bg-warning-200"
+        closeButton: "text-warning-500 data-[hover]:bg-warning-200",
+        iconWrapper: "bg-warning-50 dark:bg-warning-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "danger",
       class: {
         base: colorVariants.flat.danger,
-        closeButton: "text-danger-400 data-[hover]:bg-danger-100"
+        closeButton: "text-danger-400 data-[hover]:bg-danger-100",
+        iconWrapper: "bg-danger-50 dark:bg-danger-100"
+      }
+    },
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        base: "border-default"
+      }
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        base: "border-primary"
+      }
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        base: "border-secondary"
+      }
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        base: "border-success"
+      }
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        base: "border-warning"
+      }
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        base: "border-danger"
       }
     },
     {
@@ -9036,6 +9096,54 @@ var alert = tv({
         base: [colorVariants.bordered.danger],
         closeButton: "data-[hover]:bg-danger-50"
       }
+    },
+    {
+      variant: ["flat", "bordered", "faded"],
+      class: {
+        iconWrapper: "shadow-small"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        iconWrapper: "bg-default-200 dark:bg-default-100"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        iconWrapper: "bg-primary-100 dark:bg-primary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        iconWrapper: "bg-secondary-100 dark:bg-secondary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        iconWrapper: "bg-success-100 dark:bg-success-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        iconWrapper: "bg-warning-100 dark:bg-warning-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        iconWrapper: "bg-danger-100 dark:bg-danger-50"
+      }
     }
   ]
 });

package/dist/components/index.mjs

@@ -121,7 +121,7 @@ import {
 } from "../chunk-HIFLYEAM.mjs";
 import {
   alert
-} from "../chunk-3XDFZGUJ.mjs";
+} from "../chunk-SKCOO5MF.mjs";
 import {
   autocomplete
 } from "../chunk-2TAKWWRG.mjs";

package/dist/index.js

@@ -8882,13 +8882,12 @@ var dateRangePicker = tv({
 // src/components/alert.ts
 var alert = tv({
   slots: {
-    base: "flex flex-row w-full flex-grow min-h-17 max-h-full py-3 px-4",
-    mainWrapper: [
-      "flex-grow min-h-11 max-h-full ms-2 flex flex-col box-border items-start text-inherit"
-    ],
-    title: "w-full text-medium font-normal block min-h-6 max-h-full text-inherit",
-    description: "text-small font-normal min-h-5 max-h-full text-inherit",
+    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",
+    title: "w-full font-medium block text-inherit leading-5",
+    description: "pl-[1px] text-small font-normal text-inherit",
     closeButton: "relative text-inherit",
+    iconWrapper: "flex items-center justify-center w-9 h-9 rounded-full",
     alertIcon: "fill-current w-6"
   },
   variants: {
@@ -8903,8 +8902,11 @@ var alert = tv({
     variant: {
       solid: {},
       flat: {},
+      faded: {
+        base: "border-small"
+      },
       bordered: {
-        base: "border-medium bg-transparent"
+        base: "border-small bg-transparent"
       }
     },
     radius: {
@@ -8924,10 +8926,18 @@ var alert = tv({
         base: "rounded-full"
       }
     },
-    hasDescription: {
+    hideIcon: {
       true: {
-        alertIcon: "mt-0.5"
-      },
+        iconWrapper: "hidden"
+      }
+    },
+    hideIconWrapper: {
+      true: {
+        base: "gap-x-0",
+        iconWrapper: "!bg-transparent !shadow-none"
+      }
+    },
+    hasDescription: {
       false: {
         base: "items-center",
         mainWrapper: "justify-center"
@@ -8937,7 +8947,9 @@ var alert = tv({
   defaultVariants: {
     color: "default",
     variant: "flat",
-    radius: "md"
+    radius: "md",
+    hideIcon: false,
+    hideIconWrapper: false
   },
   compoundVariants: [
     {
@@ -8985,52 +8997,100 @@ var alert = tv({
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "default",
       class: {
         base: [colorVariants.flat.default, "text-default-foreground"],
         description: "text-default-600",
-        closeButton: "text-default-400"
+        closeButton: "text-default-400",
+        iconWrapper: "bg-default-50 dark:bg-default-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "primary",
       class: {
         base: colorVariants.flat.primary,
-        closeButton: "text-primary-400 data-[hover]:bg-primary-100"
+        closeButton: "text-primary-400 data-[hover]:bg-primary-100",
+        iconWrapper: "bg-primary-50 dark:bg-primary-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "secondary",
       class: {
         base: colorVariants.flat.secondary,
-        closeButton: "text-secondary-400 data-[hover]:bg-secondary-100"
+        closeButton: "text-secondary-400 data-[hover]:bg-secondary-100",
+        iconWrapper: "bg-secondary-50 dark:bg-secondary-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "success",
       class: {
         base: colorVariants.flat.success,
-        closeButton: "text-success-400 data-[hover]:bg-success-100"
+        closeButton: "text-success-400 data-[hover]:bg-success-100",
+        iconWrapper: "bg-success-50 dark:bg-success-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "warning",
       class: {
         base: colorVariants.flat.warning,
-        closeButton: "text-warning-500 data-[hover]:bg-warning-200"
+        closeButton: "text-warning-500 data-[hover]:bg-warning-200",
+        iconWrapper: "bg-warning-50 dark:bg-warning-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "danger",
       class: {
         base: colorVariants.flat.danger,
-        closeButton: "text-danger-400 data-[hover]:bg-danger-100"
+        closeButton: "text-danger-400 data-[hover]:bg-danger-100",
+        iconWrapper: "bg-danger-50 dark:bg-danger-100"
+      }
+    },
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        base: "border-default"
+      }
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        base: "border-primary"
+      }
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        base: "border-secondary"
+      }
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        base: "border-success"
+      }
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        base: "border-warning"
+      }
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        base: "border-danger"
       }
     },
     {
@@ -9081,6 +9141,54 @@ var alert = tv({
         base: [colorVariants.bordered.danger],
         closeButton: "data-[hover]:bg-danger-50"
       }
+    },
+    {
+      variant: ["flat", "bordered", "faded"],
+      class: {
+        iconWrapper: "shadow-small"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        iconWrapper: "bg-default-200 dark:bg-default-100"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        iconWrapper: "bg-primary-100 dark:bg-primary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        iconWrapper: "bg-secondary-100 dark:bg-secondary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        iconWrapper: "bg-success-100 dark:bg-success-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        iconWrapper: "bg-warning-100 dark:bg-warning-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        iconWrapper: "bg-danger-100 dark:bg-danger-50"
+      }
     }
   ]
 });

package/dist/index.mjs

@@ -121,7 +121,7 @@ import {
 } from "./chunk-HIFLYEAM.mjs";
 import {
   alert
-} from "./chunk-3XDFZGUJ.mjs";
+} from "./chunk-SKCOO5MF.mjs";
 import {
   autocomplete
 } from "./chunk-2TAKWWRG.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/theme",
-  "version": "2.3.0-beta.4",
+  "version": "2.3.0-beta.6",
   "description": "The default theme for NextUI components",
   "keywords": [
     "theme",
@@ -44,7 +44,7 @@
     "clsx": "^1.2.1",
     "tailwind-variants": "^0.1.20",
     "tailwind-merge": "^2.5.2",
-    "@nextui-org/shared-utils": "2.0.9-beta.3"
+    "@nextui-org/shared-utils": "2.0.9-beta.4"
   },
   "peerDependencies": {
     "tailwindcss": ">=3.4.0"