Main 1.3.2

lib/components/alert/alert.tsx

@@ -111,8 +111,10 @@ export const Alert = (props: IAlert) => {
         {getIcon(status)}
       </div>
       <div className={contentClasses}>
-        <p className={theme.titleText()}>{title}</p>
-        <p className={theme.descriptionText()}>{description}</p>
+        {!!title && <p className={theme.titleText()}>{title}</p>}
+        {!!description && (
+          <p className={theme.descriptionText()}>{description}</p>
+        )}
       </div>
       {isClosable && (
         <button

lib/customization/styles/components/alert.styles.ts

@@ -5,7 +5,7 @@ const base = cva(
     "zn-block",
     "zn-flex",
     "zn-relative",
-    "zn-items-start",
+    "zn-items-center",
     "zn-justify-start",
     "zn-gap-3",
     "zn-py-3",
@@ -88,7 +88,7 @@ const base = cva(
   }
 );
 
-const icon = cva(["zn-text-2xl", "zn-border", "zn-rounded-full", "zn-p-2"], {
+const icon = cva(["zn-text-2xl", "zn-border", "zn-rounded-full", "zn-p-2.5"], {
   variants: {
     status: {
       info: ["zn-text-info-500"],
@@ -170,8 +170,20 @@ const close = cva(["zn-font-medium", "zn-absolute", "zn-top-3", "zn-right-3"], {
     },
   },
 });
-const titleText = cva(["zn-font-medium", "zn-m-0", "zn-text-base"]);
-const descriptionText = cva(["zn-m-0", "zn-text-base", "zn-font-normal"]);
+const titleText = cva([
+  "zn-font-semibold",
+  "zn-m-0",
+  "zn-text-base",
+  "zn-break-all",
+  "zn-leading-6",
+]);
+const descriptionText = cva([
+  "zn-m-0",
+  "zn-text-base",
+  "zn-font-normal",
+  "zn-break-all",
+  "zn-leading-6",
+]);
 
 const alertStyles = {
   base,

lib/customization/styles/components/image.styles.ts

@@ -12,16 +12,15 @@ const backdrop = cva([
   "zn-bg-black",
   "zn-bg-opacity-50",
   "zn-inset-0",
-  "zn-overflow-hidden",
-  "zn-w-full",
+  "!zn-overflow-hidden",
   "zn-h-full",
   "zn-flex",
   "zn-justify-center",
   "zn-items-center",
   "zn-z-[9999]",
 ]);
 const imgContainer = cva(["zn-select-none"]);
-const isPreviewable = cva(["hover:zn-brightness-75", "zn-cursor-pointer"]);
+const isPreviewable = cva(["hover:zn-brightness-90", "zn-cursor-pointer"]);
 const tools = cva([
   "zn-flex",
   "zn-items-center",

lib/customization/styles/components/modal.styles.ts

@@ -8,7 +8,6 @@ const backdrop = cva([
   "zn-overflow-y-auto",
   "zn-flex",
   "zn-justify-center",
-  "zn-w-full",
   "zn-h-full",
   "zn-p-12",
 ]);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zeni-ui",
   "private": false,
-  "version": "1.3.1-beta",
+  "version": "1.3.2-beta",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",