From 7378ac456483a9dcb3d79bc963de1c81c491e77f Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 12:44:51 +0545
Subject: [PATCH 01/21] refactor: add gap between icon and text message

---
 apps/demo/src/Views/Ui/components/Message.tsx | 7 +++++++
 packages/ui/src/assets/css/message.css        | 4 +++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index 33da4da45..7560020a7 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -26,6 +26,13 @@ export const MessageDemo = () => {
           icon={<i className="pi pi-info-circle" />}
         />
       </Section>
+
+      <Section>
+        <Message
+          message="New features just launched! Check them out."
+          icon={<i className="pi pi-android" />}
+        />
+      </Section>
     </Page>
   );
 };
diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index 331b791b6..e8ffcf4c7 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -1,7 +1,9 @@
 .message{
-    padding: 1rem;
     background-color: var(--blue-100);
     border-radius: 0.5rem;
     border: 1px solid var(--blue-800);
     color: solid var(--blue-800);
+    display: flex;
+    gap: 1rem;
+    padding: .5rem 1rem;
 }

From cbf26d9a072d60ed8f3f6261ff7b5393124c7c9d Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 13:56:49 +0545
Subject: [PATCH 02/21] feat: add close message functionality

---
 apps/demo/src/Views/Ui/components/Message.tsx | 25 +++++++++++----
 apps/demo/src/locales/en/ui.json              | 19 +++++++++++-
 apps/demo/src/locales/fr/ui.json              | 19 +++++++++++-
 packages/ui/src/Message/index.tsx             | 31 +++++++++++++++++--
 packages/ui/src/assets/css/message.css        | 21 ++++++++-----
 5 files changed, 97 insertions(+), 18 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index 7560020a7..10692b67d 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -11,6 +11,7 @@ export const MessageDemo = () => {
   return (
     <Page
       title={t("message.title")}
+      subtitle={t("message.subtitle")}
       toolbar={
         <Button
           label={t("buttons.back")}
@@ -20,17 +21,29 @@ export const MessageDemo = () => {
         />
       }
     >
-      <Section>
+      <Section title={t("message.usage.basic")}>
+        <Message message={t("message.contents.content1")} />
+      </Section>
+
+      <Section title={t("message.usage.icons.icon")}>
+        <Message
+          message={t("message.contents.content2")}
+          icon="pi pi-android"
+        />
+      </Section>
+
+      <Section title={t("message.usage.icons.iconSlot")}>
         <Message
-          message="This is a very important message."
-          icon={<i className="pi pi-info-circle" />}
+          message={t("message.contents.content3")}
+          icon={<i className="pi pi-bell" />}
         />
       </Section>
 
-      <Section>
+      <Section title={t("message.usage.enableClose")}>
         <Message
-          message="New features just launched! Check them out."
-          icon={<i className="pi pi-android" />}
+          enableClose={true}
+          icon={<i className="pi pi-bell" />}
+          message={t("message.contents.content4")}
         />
       </Section>
     </Page>
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index a48a6369f..759d74ec3 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -215,7 +215,24 @@
     }
   },
   "message": {
-    "title": "Message"
+    "contents": {
+      "content1": "Season sale: Up to 50% off selected items!",
+      "content2": "New features just launched! Check them out!",
+      "content3": "New Year, New You: Start fresh with our services!",
+      "content4": "We value your feedback: take our quick survey!",
+      "content5": "Warning: Limited time only! Sale ends soon!"
+    },
+    "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases.",
+    "title": "Message",
+    "usage": {
+      "basic": "Basic",
+      "enableClose": "Enable close",
+      "icons": {
+        "icon": "Icon",
+        "iconSlot": "Icon slot"
+      },
+      "withI18n": "With i18n"
+    }
   },
   "modal": {
     "title": "Modal",
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index d7ef338f8..c79fb042e 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -215,7 +215,24 @@
     }
   },
   "message": {
-    "title": "Message (fr)"
+    "contents": {
+      "content1": "Season sale: Up to 50% off selected items!",
+      "content2": "New features just launched! Check them out!",
+      "content3": "New Year, New You: Start fresh with our services!",
+      "content4": "We value your feedback: take our quick survey!",
+      "content5": "Warning: Limited time only! Sale ends soon!"
+    },
+    "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases.",
+    "title": "Message",
+    "usage": {
+      "basic": "Basic",
+      "enableClose": "Enable close",
+      "icons": {
+        "icon": "Icon",
+        "iconSlot": "Icon slot"
+      },
+      "withI18n": "With i18n"
+    }
   },
   "modal": {
     "title": "Modal (fr)",
diff --git a/packages/ui/src/Message/index.tsx b/packages/ui/src/Message/index.tsx
index d8a173c0a..0118e722e 100644
--- a/packages/ui/src/Message/index.tsx
+++ b/packages/ui/src/Message/index.tsx
@@ -1,11 +1,31 @@
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 
 type MessageProperties = {
+  enableClose?: boolean;
   message: string;
+  onClose?: () => void;
   icon?: string | ReactNode;
 };
 
-const Message = ({ message, icon }: MessageProperties) => {
+const Message = ({
+  onClose,
+  enableClose = false,
+  message,
+  icon,
+}: MessageProperties) => {
+  const [showMessage, setShowMessage] = useState(true);
+
+  const handleClose = () => {
+    setShowMessage(false);
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  if (!showMessage) {
+    return null;
+  }
+
   const renderIcon = () => {
     return (
       <span className="icon" data-testid="icon">
@@ -16,8 +36,13 @@ const Message = ({ message, icon }: MessageProperties) => {
 
   return (
     <div className="message">
-      {renderIcon()}
+      {icon && renderIcon()}
       <span className="message-content">{message}</span>
+      {enableClose && (
+        <span className="close-message" onClick={handleClose}>
+          <i className="pi pi-times"></i>
+        </span>
+      )}
     </div>
   );
 };
diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index e8ffcf4c7..a1a4d9e48 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -1,9 +1,16 @@
 .message{
-    background-color: var(--blue-100);
-    border-radius: 0.5rem;
-    border: 1px solid var(--blue-800);
-    color: solid var(--blue-800);
-    display: flex;
-    gap: 1rem;
-    padding: .5rem 1rem;
+  background-color: var(--blue-100);
+  border-radius: 0.5rem;
+  border: 1px solid var(--blue-800);
+  color: solid var(--blue-800);
+  display: flex;
+  gap: 1rem;
+  padding: .5rem 1rem;
+}
+
+.message .close-message {
+  cursor: pointer;
+  height: 1.25rem;
+  margin: auto 0 auto auto;
+  width: 1.25rem;
 }

From e27a55a99ada71f8d570b098403e0d947afbf446 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 14:03:56 +0545
Subject: [PATCH 03/21] feat: add codeblock for message demo

---
 apps/demo/src/Views/Ui/components/Message.tsx | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index 10692b67d..f49512cd4 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from "@dzangolab/react-i18n";
 import { Button, Message, Page } from "@dzangolab/react-ui";
 import { useNavigate } from "react-router-dom";
 
-import { Section } from "../../../components/Demo";
+import { CodeBlock, Section } from "../../../components/Demo";
 
 export const MessageDemo = () => {
   const [t] = useTranslation("ui");
@@ -23,6 +23,7 @@ export const MessageDemo = () => {
     >
       <Section title={t("message.usage.basic")}>
         <Message message={t("message.contents.content1")} />
+        <CodeBlock exampleCode='<Message message="Season sale: Up to 50% off selected items!" />' />
       </Section>
 
       <Section title={t("message.usage.icons.icon")}>
@@ -30,6 +31,12 @@ export const MessageDemo = () => {
           message={t("message.contents.content2")}
           icon="pi pi-android"
         />
+        <CodeBlock
+          exampleCode='<Message 
+  message="New features just launched! Check them out!"
+  icon="pi pi-android"
+/>'
+        />
       </Section>
 
       <Section title={t("message.usage.icons.iconSlot")}>
@@ -37,6 +44,12 @@ export const MessageDemo = () => {
           message={t("message.contents.content3")}
           icon={<i className="pi pi-bell" />}
         />
+        <CodeBlock
+          exampleCode='<Message 
+  message="New Year, New You: Start fresh with our services!"
+  icon={<i className="pi pi-bell" />}
+/>'
+        />
       </Section>
 
       <Section title={t("message.usage.enableClose")}>
@@ -45,6 +58,13 @@ export const MessageDemo = () => {
           icon={<i className="pi pi-bell" />}
           message={t("message.contents.content4")}
         />
+        <CodeBlock
+          exampleCode='<Message 
+  message="We value your feedback: take our quick survey!"
+  icon={<i className="pi pi-bell" />}
+  enableClose={true}
+/>'
+        />
       </Section>
     </Page>
   );

From ff7a7332b7b65c4fa9dd79c879aed57d31a7901e Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 16:03:20 +0545
Subject: [PATCH 04/21] feat: add serverity for message

---
 apps/demo/src/Views/Ui/components/Message.tsx | 14 +++++++++++
 apps/demo/src/locales/en/ui.json              |  2 +-
 apps/demo/src/locales/fr/ui.json              | 24 +++++++++---------
 packages/ui/src/Message/index.tsx             |  4 ++-
 packages/ui/src/assets/css/message.css        | 25 ++++++++++++++++---
 5 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index f49512cd4..1999a480f 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -66,6 +66,20 @@ export const MessageDemo = () => {
 />'
         />
       </Section>
+
+      <Section title={t("message.usage.severity")}>
+        <Message message="Info Message" severity="info" />
+        <Message message="Success Message" severity="success" />
+        <Message message="Warning Message" severity="warning" />
+        <Message message="Danger Message" severity="danger" />
+
+        <CodeBlock
+          exampleCode='<Message message="Info Message" severity="info" />
+<Message message="Success Message" severity="success" />
+<Message message="Warning Message" severity="warning" />
+<Message message="Danger Message" severity="danger" />'
+        />
+      </Section>
     </Page>
   );
 };
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index 759d74ec3..3874152b4 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -231,7 +231,7 @@
         "icon": "Icon",
         "iconSlot": "Icon slot"
       },
-      "withI18n": "With i18n"
+      "severity": "Severity"
     }
   },
   "modal": {
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index c79fb042e..402754cd2 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -216,22 +216,22 @@
   },
   "message": {
     "contents": {
-      "content1": "Season sale: Up to 50% off selected items!",
-      "content2": "New features just launched! Check them out!",
-      "content3": "New Year, New You: Start fresh with our services!",
-      "content4": "We value your feedback: take our quick survey!",
-      "content5": "Warning: Limited time only! Sale ends soon!"
+      "content1": "Season sale: Up to 50% off selected items! (fr)",
+      "content2": "New features just launched! Check them out! (fr)",
+      "content3": "New Year, New You: Start fresh with our services! (fr)",
+      "content4": "We value your feedback: take our quick survey! (fr)",
+      "content5": "Warning: Limited time only! Sale ends soon! (fr)"
     },
-    "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases.",
-    "title": "Message",
+    "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases. (fr)",
+    "title": "Message (fr)",
     "usage": {
-      "basic": "Basic",
-      "enableClose": "Enable close",
+      "basic": "Basic (fr)",
+      "enableClose": "Enable close (fr)",
       "icons": {
-        "icon": "Icon",
-        "iconSlot": "Icon slot"
+        "icon": "Icon (fr)",
+        "iconSlot": "Icon slot (fr)"
       },
-      "withI18n": "With i18n"
+      "severity": "Severity (fr)"
     }
   },
   "modal": {
diff --git a/packages/ui/src/Message/index.tsx b/packages/ui/src/Message/index.tsx
index 0118e722e..c47c39eef 100644
--- a/packages/ui/src/Message/index.tsx
+++ b/packages/ui/src/Message/index.tsx
@@ -5,6 +5,7 @@ type MessageProperties = {
   message: string;
   onClose?: () => void;
   icon?: string | ReactNode;
+  severity?: "info" | "success" | "warning" | "danger";
 };
 
 const Message = ({
@@ -12,6 +13,7 @@ const Message = ({
   enableClose = false,
   message,
   icon,
+  severity = "info",
 }: MessageProperties) => {
   const [showMessage, setShowMessage] = useState(true);
 
@@ -35,7 +37,7 @@ const Message = ({
   };
 
   return (
-    <div className="message">
+    <div className={`message ${severity}`}>
       {icon && renderIcon()}
       <span className="message-content">{message}</span>
       {enableClose && (
diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index a1a4d9e48..4658832ce 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -1,8 +1,7 @@
 .message{
-  background-color: var(--blue-100);
+  background-color: color-mix(in srgb, var(--_background-color) 20%, #fff);
   border-radius: 0.5rem;
-  border: 1px solid var(--blue-800);
-  color: solid var(--blue-800);
+  border: 1px solid color-mix(in srgb, var(--_border-color) 60%, #0000);
   display: flex;
   gap: 1rem;
   padding: .5rem 1rem;
@@ -14,3 +13,23 @@
   margin: auto 0 auto auto;
   width: 1.25rem;
 }
+
+.message.danger {
+  --_background-color: var(--dz-danger-color);
+  --_border-color: var(--dz-danger-color);
+}
+
+.message.info {
+  --_background-color: var(--dz-primary-color);
+  --_border-color: var(--dz-primary-color);
+}
+
+.message.success {
+  --_background-color: var(--dz-success-color);
+  --_border-color: var(--dz-success-color);
+}
+
+.message.warning {
+  --_background-color: var(--dz-warning-color);
+  --_border-color: var(--dz-warning-color);
+}

From ef1f136b6309217074471bab674874ed64fee55f Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 16:43:15 +0545
Subject: [PATCH 05/21] feat: add showIcon to show default icon

---
 apps/demo/src/Views/Ui/components/Message.tsx | 68 ++++++++++++++++++-
 packages/ui/src/Message/index.tsx             | 21 +++++-
 2 files changed, 85 insertions(+), 4 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index 1999a480f..8746832ae 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -1,9 +1,51 @@
 import { useTranslation } from "@dzangolab/react-i18n";
-import { Button, Message, Page } from "@dzangolab/react-ui";
+import { Button, Message, Page, TDataTable } from "@dzangolab/react-ui";
 import { useNavigate } from "react-router-dom";
 
 import { CodeBlock, Section } from "../../../components/Demo";
 
+const data = [
+  {
+    default: "false",
+    description:
+      "Displays a close icon if true, allowing the message to be dismissed.",
+    prop: "enableClose",
+    type: "boolean",
+  },
+  {
+    default: "-",
+    description: "Icon to display alongside the message.",
+    prop: "icon",
+    type: "string | ReactNode	",
+  },
+  {
+    default: "-",
+    description: "The message text to display in the component.",
+    prop: "message",
+    type: "string",
+  },
+  {
+    default: "-",
+    description: "Function to be called when the message is closed.",
+    prop: "onClose",
+    type: "() => void",
+  },
+  {
+    default: "info",
+    description:
+      "Defines the styling severity of the message. Defaults to 'info'.",
+    prop: "severity",
+    type: `"info" | "success" | "warning" | "danger"`,
+  },
+  {
+    default: "true",
+    description:
+      "Show default icon based on severity or custom icon if provided.",
+    prop: "showIcon",
+    type: "boolean",
+  },
+];
+
 export const MessageDemo = () => {
   const [t] = useTranslation("ui");
   const navigate = useNavigate();
@@ -80,6 +122,30 @@ export const MessageDemo = () => {
 <Message message="Danger Message" severity="danger" />'
         />
       </Section>
+      <Section
+        title={t("headers.propertiesValue", {
+          value: "IButtonProperties",
+        })}
+      >
+        <TDataTable
+          columns={[
+            {
+              accessorKey: "prop",
+              header: "Properties",
+            },
+            {
+              accessorKey: "type",
+              header: "Type",
+            },
+            {
+              accessorKey: "description",
+              header: "Description",
+            },
+          ]}
+          data={data}
+          paginated={false}
+        />
+      </Section>
     </Page>
   );
 };
diff --git a/packages/ui/src/Message/index.tsx b/packages/ui/src/Message/index.tsx
index c47c39eef..dcf1ceeb5 100644
--- a/packages/ui/src/Message/index.tsx
+++ b/packages/ui/src/Message/index.tsx
@@ -2,10 +2,11 @@ import { ReactNode, useState } from "react";
 
 type MessageProperties = {
   enableClose?: boolean;
+  icon?: string | ReactNode;
   message: string;
   onClose?: () => void;
-  icon?: string | ReactNode;
   severity?: "info" | "success" | "warning" | "danger";
+  showIcon?: boolean;
 };
 
 const Message = ({
@@ -14,9 +15,17 @@ const Message = ({
   message,
   icon,
   severity = "info",
+  showIcon = true,
 }: MessageProperties) => {
   const [showMessage, setShowMessage] = useState(true);
 
+  const defaultSeverityIcons = {
+    info: "pi pi-info-circle",
+    success: "pi pi-check-circle",
+    warning: "pi pi-exclamation-triangle",
+    danger: "pi pi-times-circle",
+  };
+
   const handleClose = () => {
     setShowMessage(false);
     if (onClose) {
@@ -31,14 +40,20 @@ const Message = ({
   const renderIcon = () => {
     return (
       <span className="icon" data-testid="icon">
-        {typeof icon === "string" ? <i className={icon} /> : icon}
+        {!icon ? (
+          <i className={defaultSeverityIcons[severity]} />
+        ) : typeof icon === "string" ? (
+          <i className={icon} />
+        ) : (
+          icon
+        )}
       </span>
     );
   };
 
   return (
     <div className={`message ${severity}`}>
-      {icon && renderIcon()}
+      {showIcon && renderIcon()}
       <span className="message-content">{message}</span>
       {enableClose && (
         <span className="close-message" onClick={handleClose}>

From bd0f0d774bbba5b87a780f55fce7c49eabd07786 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 16:48:25 +0545
Subject: [PATCH 06/21] feat: add example message using showIcon prop

---
 apps/demo/src/Views/Ui/components/Message.tsx | 4 ++++
 apps/demo/src/locales/en/ui.json              | 1 +
 apps/demo/src/locales/fr/ui.json              | 1 +
 3 files changed, 6 insertions(+)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index 8746832ae..33a1879fe 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -122,6 +122,10 @@ export const MessageDemo = () => {
 <Message message="Danger Message" severity="danger" />'
         />
       </Section>
+      <Section title={t("message.usage.hideIcon")}>
+        <Message message={t("message.contents.content1")} showIcon={false} />
+        <CodeBlock exampleCode='<Message message="Season sale: Up to 50% off selected items!" showIcon={false} />' />
+      </Section>
       <Section
         title={t("headers.propertiesValue", {
           value: "IButtonProperties",
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index 3874152b4..3ab519be3 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -227,6 +227,7 @@
     "usage": {
       "basic": "Basic",
       "enableClose": "Enable close",
+      "hideIcon": "Hide default icon",
       "icons": {
         "icon": "Icon",
         "iconSlot": "Icon slot"
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index 402754cd2..15dd16275 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -227,6 +227,7 @@
     "usage": {
       "basic": "Basic (fr)",
       "enableClose": "Enable close (fr)",
+      "hideIcon": "Hide default icon (fr)",
       "icons": {
         "icon": "Icon (fr)",
         "iconSlot": "Icon slot (fr)"

From c53df3c505b3cd8dd5aa42a31bebd8010bc26e63 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 17:03:47 +0545
Subject: [PATCH 07/21] refactor: update message prop to support type react
 node

---
 apps/demo/src/Views/Ui/components/Message.tsx |  9 +++++++--
 apps/demo/src/locales/en/ui.json              |  1 +
 apps/demo/src/locales/fr/ui.json              |  1 +
 packages/ui/src/Message/index.tsx             | 12 ++++++++++--
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index 33a1879fe..9f1452be4 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -16,13 +16,13 @@ const data = [
     default: "-",
     description: "Icon to display alongside the message.",
     prop: "icon",
-    type: "string | ReactNode	",
+    type: "string | ReactNode",
   },
   {
     default: "-",
     description: "The message text to display in the component.",
     prop: "message",
-    type: "string",
+    type: "string | ReactNode",
   },
   {
     default: "-",
@@ -68,6 +68,11 @@ export const MessageDemo = () => {
         <CodeBlock exampleCode='<Message message="Season sale: Up to 50% off selected items!" />' />
       </Section>
 
+      <Section title={t("message.usage.customMessage")}>
+        <Message message={<b>{t("message.contents.content1")}</b>} />
+        <CodeBlock exampleCode="<Message message={<b>Season sale: Up to 50% off selected items!</b>} />" />
+      </Section>
+
       <Section title={t("message.usage.icons.icon")}>
         <Message
           message={t("message.contents.content2")}
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index 3ab519be3..971cae771 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -226,6 +226,7 @@
     "title": "Message",
     "usage": {
       "basic": "Basic",
+      "customMessage": "Custom message",
       "enableClose": "Enable close",
       "hideIcon": "Hide default icon",
       "icons": {
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index 15dd16275..463fbe4c2 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -226,6 +226,7 @@
     "title": "Message (fr)",
     "usage": {
       "basic": "Basic (fr)",
+      "customMessage": "Custom message (fr)",
       "enableClose": "Enable close (fr)",
       "hideIcon": "Hide default icon (fr)",
       "icons": {
diff --git a/packages/ui/src/Message/index.tsx b/packages/ui/src/Message/index.tsx
index dcf1ceeb5..273541dc1 100644
--- a/packages/ui/src/Message/index.tsx
+++ b/packages/ui/src/Message/index.tsx
@@ -3,7 +3,7 @@ import { ReactNode, useState } from "react";
 type MessageProperties = {
   enableClose?: boolean;
   icon?: string | ReactNode;
-  message: string;
+  message: string | ReactNode;
   onClose?: () => void;
   severity?: "info" | "success" | "warning" | "danger";
   showIcon?: boolean;
@@ -51,10 +51,18 @@ const Message = ({
     );
   };
 
+  const renderMessageContent = () => {
+    if (typeof message === "string") {
+      return <span className="message-content">{message}</span>;
+    }
+
+    return message;
+  };
+
   return (
     <div className={`message ${severity}`}>
       {showIcon && renderIcon()}
-      <span className="message-content">{message}</span>
+      {renderMessageContent()}
       {enableClose && (
         <span className="close-message" onClick={handleClose}>
           <i className="pi pi-times"></i>

From 2732f1420bc24bafdf93b4416407cfb1a798bbe0 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 17:14:33 +0545
Subject: [PATCH 08/21] refactor: update translations

---
 apps/demo/src/Views/Ui/components/Message.tsx | 2 +-
 apps/demo/src/locales/en/ui.json              | 4 ++--
 apps/demo/src/locales/fr/ui.json              | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index 9f1452be4..f0339db11 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -86,7 +86,7 @@ export const MessageDemo = () => {
         />
       </Section>
 
-      <Section title={t("message.usage.icons.iconSlot")}>
+      <Section title={t("message.usage.icons.customIcon")}>
         <Message
           message={t("message.contents.content3")}
           icon={<i className="pi pi-bell" />}
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index 971cae771..24c2f9796 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -230,8 +230,8 @@
       "enableClose": "Enable close",
       "hideIcon": "Hide default icon",
       "icons": {
-        "icon": "Icon",
-        "iconSlot": "Icon slot"
+        "customIcon": "Custom icon",
+        "icon": "Icon"
       },
       "severity": "Severity"
     }
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index 463fbe4c2..fb1c07bb4 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -230,8 +230,8 @@
       "enableClose": "Enable close (fr)",
       "hideIcon": "Hide default icon (fr)",
       "icons": {
-        "icon": "Icon (fr)",
-        "iconSlot": "Icon slot (fr)"
+        "customIcon": "Icon slot (fr)",
+        "icon": "Icon (fr)"
       },
       "severity": "Severity (fr)"
     }

From 8c73f82ab0aa697a1cbe9696d9b10791e41d34d2 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 17:34:44 +0545
Subject: [PATCH 09/21] refactor: update message to sentence case

---
 apps/demo/src/Views/Ui/components/Message.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index f0339db11..7136bf55a 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -115,16 +115,16 @@ export const MessageDemo = () => {
       </Section>
 
       <Section title={t("message.usage.severity")}>
-        <Message message="Info Message" severity="info" />
-        <Message message="Success Message" severity="success" />
-        <Message message="Warning Message" severity="warning" />
-        <Message message="Danger Message" severity="danger" />
+        <Message message="Info message" severity="info" />
+        <Message message="Success message" severity="success" />
+        <Message message="Warning message" severity="warning" />
+        <Message message="Danger message" severity="danger" />
 
         <CodeBlock
-          exampleCode='<Message message="Info Message" severity="info" />
-<Message message="Success Message" severity="success" />
-<Message message="Warning Message" severity="warning" />
-<Message message="Danger Message" severity="danger" />'
+          exampleCode='<Message message="Info message" severity="info" />
+<Message message="Success message" severity="success" />
+<Message message="Warning message" severity="warning" />
+<Message message="Danger message" severity="danger" />'
         />
       </Section>
       <Section title={t("message.usage.hideIcon")}>

From f147a9ecb19201c8df053c8406b332194ed58d47 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 17:50:55 +0545
Subject: [PATCH 10/21] feat: add usage section and default column in
 properties table

---
 apps/demo/src/Views/Ui/components/Message.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index 7136bf55a..b6c8ff184 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -63,6 +63,11 @@ export const MessageDemo = () => {
         />
       }
     >
+      <Section title={t("headers.usage")}>
+        <p>{t("common.usage", { component: "Message" })}</p>
+        <CodeBlock exampleCode='import { Message } from "@dzangolab/react-ui"' />
+      </Section>
+
       <Section title={t("message.usage.basic")}>
         <Message message={t("message.contents.content1")} />
         <CodeBlock exampleCode='<Message message="Season sale: Up to 50% off selected items!" />' />
@@ -133,7 +138,7 @@ export const MessageDemo = () => {
       </Section>
       <Section
         title={t("headers.propertiesValue", {
-          value: "IButtonProperties",
+          value: "MessageProperties",
         })}
       >
         <TDataTable
@@ -146,6 +151,10 @@ export const MessageDemo = () => {
               accessorKey: "type",
               header: "Type",
             },
+            {
+              accessorKey: "default",
+              header: "Default",
+            },
             {
               accessorKey: "description",
               header: "Description",

From 24938f95925c2727514e6d53f39efef62198f907 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 16 Jul 2025 09:14:53 +0545
Subject: [PATCH 11/21] refactor: update style to align close message to the
 right

---
 packages/ui/src/assets/css/message.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index 4658832ce..930a7bf48 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -10,7 +10,7 @@
 .message .close-message {
   cursor: pointer;
   height: 1.25rem;
-  margin: auto 0 auto auto;
+  margin-left: auto;
   width: 1.25rem;
 }
 

From 4bba82993250b587b2650af4ce6118f1058dc796 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 16 Jul 2025 10:30:01 +0545
Subject: [PATCH 12/21] refactor: udpate style to align close icon to the right

---
 packages/ui/src/Message/index.tsx      | 1 +
 packages/ui/src/assets/css/message.css | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/Message/index.tsx b/packages/ui/src/Message/index.tsx
index 273541dc1..988cda82e 100644
--- a/packages/ui/src/Message/index.tsx
+++ b/packages/ui/src/Message/index.tsx
@@ -28,6 +28,7 @@ const Message = ({
 
   const handleClose = () => {
     setShowMessage(false);
+
     if (onClose) {
       onClose();
     }
diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index 930a7bf48..b96a06c65 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -5,12 +5,14 @@
   display: flex;
   gap: 1rem;
   padding: .5rem 1rem;
+  position: relative;
 }
 
 .message .close-message {
   cursor: pointer;
   height: 1.25rem;
-  margin-left: auto;
+  position: absolute;
+  right: 1rem;
   width: 1.25rem;
 }
 

From 7f2ff6c71c9222e7736a8e444a9e3f7969b85693 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 16 Jul 2025 10:48:38 +0545
Subject: [PATCH 13/21] refactor: update the color of message

---
 packages/ui/src/assets/css/message.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index b96a06c65..e4d2a8a20 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -1,7 +1,8 @@
 .message{
   background-color: color-mix(in srgb, var(--_background-color) 20%, #fff);
   border-radius: 0.5rem;
-  border: 1px solid color-mix(in srgb, var(--_border-color) 60%, #0000);
+  border: 1px solid color-mix(in srgb, var(--_border-color) 90%, #0000);
+  color: color-mix(in srgb, var(--_color) 90%, #0000);
   display: flex;
   gap: 1rem;
   padding: .5rem 1rem;
@@ -9,6 +10,7 @@
 }
 
 .message .close-message {
+  color: var(--color);
   cursor: pointer;
   height: 1.25rem;
   position: absolute;
@@ -19,19 +21,23 @@
 .message.danger {
   --_background-color: var(--dz-danger-color);
   --_border-color: var(--dz-danger-color);
+  --_color: var(--dz-danger-color);
 }
 
 .message.info {
   --_background-color: var(--dz-primary-color);
   --_border-color: var(--dz-primary-color);
+  --_color: var(--dz-primary-color);
 }
 
 .message.success {
   --_background-color: var(--dz-success-color);
   --_border-color: var(--dz-success-color);
+  --_color: var(--dz-success-color);
 }
 
 .message.warning {
   --_background-color: var(--dz-warning-color);
   --_border-color: var(--dz-warning-color);
+  --_color: var(--dz-warning-color);
 }

From df6d8c2cf5be6fb0dd781129872f3595aaf4d816 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 16 Jul 2025 12:52:04 +0545
Subject: [PATCH 14/21] refactor: update the color contrast

---
 packages/ui/src/assets/css/message.css | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index e4d2a8a20..f512baae9 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -1,20 +1,22 @@
-.message{
+.message {
   background-color: color-mix(in srgb, var(--_background-color) 20%, #fff);
   border-radius: 0.5rem;
   border: 1px solid color-mix(in srgb, var(--_border-color) 90%, #0000);
   color: color-mix(in srgb, var(--_color) 90%, #0000);
   display: flex;
+  font-weight: 500;
   gap: 1rem;
   padding: .5rem 1rem;
-  position: relative;
+}
+
+.message .message-content {
+  flex: 1;
 }
 
 .message .close-message {
   color: var(--color);
   cursor: pointer;
   height: 1.25rem;
-  position: absolute;
-  right: 1rem;
   width: 1.25rem;
 }
 

From 73dc66535528753725051f8e343e3967b38773b5 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 16 Jul 2025 13:17:54 +0545
Subject: [PATCH 15/21] refactor: update color

---
 apps/demo/src/Views/Ui/components/Message.tsx | 4 ++--
 packages/ui/src/assets/css/message.css        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index b6c8ff184..d26d35e7f 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 
 import { CodeBlock, Section } from "../../../components/Demo";
 
-const data = [
+const propertiesData = [
   {
     default: "false",
     description:
@@ -160,7 +160,7 @@ export const MessageDemo = () => {
               header: "Description",
             },
           ]}
-          data={data}
+          data={propertiesData}
           paginated={false}
         />
       </Section>
diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index f512baae9..1186e0adb 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -1,8 +1,8 @@
 .message {
   background-color: color-mix(in srgb, var(--_background-color) 20%, #fff);
   border-radius: 0.5rem;
-  border: 1px solid color-mix(in srgb, var(--_border-color) 90%, #0000);
-  color: color-mix(in srgb, var(--_color) 90%, #0000);
+  border: 1px solid var(--_border-color);
+  color: var(--_color);
   display: flex;
   font-weight: 500;
   gap: 1rem;

From 30b3c4730e1915b53a37897638622645f98e6956 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 16 Jul 2025 13:37:22 +0545
Subject: [PATCH 16/21] refactor: add translations

---
 apps/demo/src/Views/Ui/components/Message.tsx | 16 ++++++++--------
 apps/demo/src/locales/en/ui.json              | 14 +++++++++++++-
 apps/demo/src/locales/fr/ui.json              | 14 +++++++++++++-
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index d26d35e7f..fc9898ac2 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -120,10 +120,10 @@ export const MessageDemo = () => {
       </Section>
 
       <Section title={t("message.usage.severity")}>
-        <Message message="Info message" severity="info" />
-        <Message message="Success message" severity="success" />
-        <Message message="Warning message" severity="warning" />
-        <Message message="Danger message" severity="danger" />
+        <Message message={t("message.contents.info")} severity="info" />
+        <Message message={t("message.contents.success")} severity="success" />
+        <Message message={t("message.contents.warning")} severity="warning" />
+        <Message message={t("message.contents.danger")} severity="danger" />
 
         <CodeBlock
           exampleCode='<Message message="Info message" severity="info" />
@@ -145,19 +145,19 @@ export const MessageDemo = () => {
           columns={[
             {
               accessorKey: "prop",
-              header: "Properties",
+              header: t("message.table.header.properties"),
             },
             {
               accessorKey: "type",
-              header: "Type",
+              header: t("message.table.header.type"),
             },
             {
               accessorKey: "default",
-              header: "Default",
+              header: t("message.table.header.default"),
             },
             {
               accessorKey: "description",
-              header: "Description",
+              header: t("message.table.header.description"),
             },
           ]}
           data={propertiesData}
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index 24c2f9796..88680c11e 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -220,9 +220,21 @@
       "content2": "New features just launched! Check them out!",
       "content3": "New Year, New You: Start fresh with our services!",
       "content4": "We value your feedback: take our quick survey!",
-      "content5": "Warning: Limited time only! Sale ends soon!"
+      "content5": "Warning: Limited time only! Sale ends soon!",
+      "danger": "Danger message",
+      "info": "Info message",
+      "success": "Success message",
+      "warning": "Warning message"
     },
     "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases.",
+    "table": {
+      "header": {
+        "default": "Default",
+        "description": "Description",
+        "properties": "Properties",
+        "type": "Type"
+      }
+    },
     "title": "Message",
     "usage": {
       "basic": "Basic",
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index fb1c07bb4..4cdbd9c5a 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -220,9 +220,21 @@
       "content2": "New features just launched! Check them out! (fr)",
       "content3": "New Year, New You: Start fresh with our services! (fr)",
       "content4": "We value your feedback: take our quick survey! (fr)",
-      "content5": "Warning: Limited time only! Sale ends soon! (fr)"
+      "content5": "Warning: Limited time only! Sale ends soon! (fr)",
+      "danger": "Danger message (fr)",
+      "info": "Info message (fr)",
+      "success": "Success message (fr)",
+      "warning": "Warning message (fr)"
     },
     "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases. (fr)",
+    "table": {
+      "header": {
+        "default": "Default (fr)",
+        "description": "Description (fr)",
+        "properties": "Properties (fr)",
+        "type": "Type (fr)"
+      }
+    },
     "title": "Message (fr)",
     "usage": {
       "basic": "Basic (fr)",

From 206acbb3d16a32b0ea2a3af3d42cafa916cf284d Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 16 Jul 2025 13:39:38 +0545
Subject: [PATCH 17/21] refactor: change the background color to make ligher

---
 packages/ui/src/assets/css/message.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index 1186e0adb..2a727174b 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -1,10 +1,9 @@
 .message {
-  background-color: color-mix(in srgb, var(--_background-color) 20%, #fff);
+  background-color: color-mix(in srgb, var(--_background-color) 10%, #fff);
   border-radius: 0.5rem;
   border: 1px solid var(--_border-color);
   color: var(--_color);
   display: flex;
-  font-weight: 500;
   gap: 1rem;
   padding: .5rem 1rem;
 }

From 7ad343df4e74adb4af8b8859fd0f180e2757179a Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 16 Jul 2025 14:04:23 +0545
Subject: [PATCH 18/21] refactor: add translations for description of props

---
 apps/demo/src/Views/Ui/components/Message.tsx | 81 +++++++++----------
 apps/demo/src/locales/en/ui.json              |  8 ++
 apps/demo/src/locales/fr/ui.json              |  8 ++
 packages/ui/src/assets/css/dropdown-menu.css  |  1 -
 4 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index fc9898ac2..3d4e1f112 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -4,52 +4,49 @@ import { useNavigate } from "react-router-dom";
 
 import { CodeBlock, Section } from "../../../components/Demo";
 
-const propertiesData = [
-  {
-    default: "false",
-    description:
-      "Displays a close icon if true, allowing the message to be dismissed.",
-    prop: "enableClose",
-    type: "boolean",
-  },
-  {
-    default: "-",
-    description: "Icon to display alongside the message.",
-    prop: "icon",
-    type: "string | ReactNode",
-  },
-  {
-    default: "-",
-    description: "The message text to display in the component.",
-    prop: "message",
-    type: "string | ReactNode",
-  },
-  {
-    default: "-",
-    description: "Function to be called when the message is closed.",
-    prop: "onClose",
-    type: "() => void",
-  },
-  {
-    default: "info",
-    description:
-      "Defines the styling severity of the message. Defaults to 'info'.",
-    prop: "severity",
-    type: `"info" | "success" | "warning" | "danger"`,
-  },
-  {
-    default: "true",
-    description:
-      "Show default icon based on severity or custom icon if provided.",
-    prop: "showIcon",
-    type: "boolean",
-  },
-];
-
 export const MessageDemo = () => {
   const [t] = useTranslation("ui");
   const navigate = useNavigate();
 
+  const propertiesData = [
+    {
+      default: "false",
+      description: t("message.table.propDescription.enableClose"),
+      prop: "enableClose",
+      type: "boolean",
+    },
+    {
+      default: "-",
+      description: t("message.table.propDescription.icon"),
+      prop: "icon",
+      type: "string | ReactNode",
+    },
+    {
+      default: "-",
+      description: t("message.table.propDescription.message"),
+      prop: "message",
+      type: "string | ReactNode",
+    },
+    {
+      default: "-",
+      description: t("message.table.propDescription.onClose"),
+      prop: "onClose",
+      type: "() => void",
+    },
+    {
+      default: "info",
+      description: t("message.table.propDescription.severity"),
+      prop: "severity",
+      type: `"info" | "success" | "warning" | "danger"`,
+    },
+    {
+      default: "true",
+      description: t("message.table.propDescription.showIcon"),
+      prop: "showIcon",
+      type: "boolean",
+    },
+  ];
+
   return (
     <Page
       title={t("message.title")}
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index 88680c11e..79474c5c5 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -233,6 +233,14 @@
         "description": "Description",
         "properties": "Properties",
         "type": "Type"
+      },
+      "propDescription": {
+        "enableClose": "Displays a close icon if true, allowing the message to be dismissed.",
+        "icon": "Icon to display alongside the message.",
+        "message": "The message text to display in the component.",
+        "onClose": "Function to be called when the message is closed.",
+        "severity": "Defines the styling severity of the message. Defaults to 'info'.",
+        "showIcon": "Show default icon based on severity or custom icon if provided."
       }
     },
     "title": "Message",
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index 4cdbd9c5a..2092c0618 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -233,6 +233,14 @@
         "description": "Description (fr)",
         "properties": "Properties (fr)",
         "type": "Type (fr)"
+      },
+      "propDescription": {
+        "enableClose": "Displays a close icon if true, allowing the message to be dismissed. (fr)",
+        "icon": "Icon to display alongside the message. (fr)",
+        "message": "The message text to display in the component. (fr)",
+        "onClose": "Function to be called when the message is closed. (fr)",
+        "severity": "Defines the styling severity of the message. Defaults to 'info'. (fr)",
+        "showIcon": "Show default icon based on severity or custom icon if provided. (fr)"
       }
     },
     "title": "Message (fr)",
diff --git a/packages/ui/src/assets/css/dropdown-menu.css b/packages/ui/src/assets/css/dropdown-menu.css
index a00ef3c72..28908f339 100644
--- a/packages/ui/src/assets/css/dropdown-menu.css
+++ b/packages/ui/src/assets/css/dropdown-menu.css
@@ -41,7 +41,6 @@ ul.dropdown-menu-list {
   min-width: 160px;
   overflow: hidden;
   padding-inline-start: 0;
-  width: max-content;
 }
 
 ul.dropdown-menu-list li {

From 44257f6fa511102e4257a008071a4ce6f156b924 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 16 Jul 2025 16:56:38 +0545
Subject: [PATCH 19/21] feat: add support for passing array of messages

---
 apps/demo/src/Views/Ui/components/Message.tsx | 24 ++++++++++++++++++-
 apps/demo/src/locales/en/ui.json              |  3 ++-
 apps/demo/src/locales/fr/ui.json              |  5 ++--
 packages/ui/src/Message/index.tsx             | 18 ++++++++++----
 packages/ui/src/assets/css/message.css        |  9 +++++++
 5 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index 3d4e1f112..666a325dc 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -25,7 +25,7 @@ export const MessageDemo = () => {
       default: "-",
       description: t("message.table.propDescription.message"),
       prop: "message",
-      type: "string | ReactNode",
+      type: "string | string[] | ReactNode",
     },
     {
       default: "-",
@@ -75,6 +75,28 @@ export const MessageDemo = () => {
         <CodeBlock exampleCode="<Message message={<b>Season sale: Up to 50% off selected items!</b>} />" />
       </Section>
 
+      <Section title={t("message.usage.arrayMessage")}>
+        <Message
+          message={[
+            t("message.contents.content1"),
+            t("message.contents.content2"),
+            t("message.contents.content3"),
+          ]}
+          enableClose={true}
+        />
+        <CodeBlock
+          exampleCode="<Message
+  message={
+    [
+      'Season Sale: Enjoy massive discounts with up to 50% off on a wide range of selected items — from fashion to electronics, don’t miss out on these limited-time offers!',
+      'New features just launched! Check them out!',
+      'New Year, New You: Start fresh with our services!'
+    ]}
+    enableClose={true}
+/>"
+        />
+      </Section>
+
       <Section title={t("message.usage.icons.icon")}>
         <Message
           message={t("message.contents.content2")}
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index 79474c5c5..907a1bd40 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -216,7 +216,7 @@
   },
   "message": {
     "contents": {
-      "content1": "Season sale: Up to 50% off selected items!",
+      "content1": "Season Sale: Enjoy massive discounts with up to 50% off on a wide range of selected items — from fashion to electronics, don’t miss out on these limited-time offers!",
       "content2": "New features just launched! Check them out!",
       "content3": "New Year, New You: Start fresh with our services!",
       "content4": "We value your feedback: take our quick survey!",
@@ -245,6 +245,7 @@
     },
     "title": "Message",
     "usage": {
+      "arrayMessage": "Array of message",
       "basic": "Basic",
       "customMessage": "Custom message",
       "enableClose": "Enable close",
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index 2092c0618..f9e1a503b 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -216,7 +216,7 @@
   },
   "message": {
     "contents": {
-      "content1": "Season sale: Up to 50% off selected items! (fr)",
+      "content1": "Season Sale: Enjoy massive discounts with up to 50% off on a wide range of selected items — from fashion to electronics, don’t miss out on these limited-time offers! (fr)",
       "content2": "New features just launched! Check them out! (fr)",
       "content3": "New Year, New You: Start fresh with our services! (fr)",
       "content4": "We value your feedback: take our quick survey! (fr)",
@@ -245,12 +245,13 @@
     },
     "title": "Message (fr)",
     "usage": {
+      "arrayMessage": "Array of message (fr)",
       "basic": "Basic (fr)",
       "customMessage": "Custom message (fr)",
       "enableClose": "Enable close (fr)",
       "hideIcon": "Hide default icon (fr)",
       "icons": {
-        "customIcon": "Icon slot (fr)",
+        "customIcon": "Custom icon (fr)",
         "icon": "Icon (fr)"
       },
       "severity": "Severity (fr)"
diff --git a/packages/ui/src/Message/index.tsx b/packages/ui/src/Message/index.tsx
index 988cda82e..01373e6e0 100644
--- a/packages/ui/src/Message/index.tsx
+++ b/packages/ui/src/Message/index.tsx
@@ -2,8 +2,8 @@ import { ReactNode, useState } from "react";
 
 type MessageProperties = {
   enableClose?: boolean;
-  icon?: string | ReactNode;
-  message: string | ReactNode;
+  icon?: ReactNode;
+  message: string[] | ReactNode;
   onClose?: () => void;
   severity?: "info" | "success" | "warning" | "danger";
   showIcon?: boolean;
@@ -54,7 +54,17 @@ const Message = ({
 
   const renderMessageContent = () => {
     if (typeof message === "string") {
-      return <span className="message-content">{message}</span>;
+      return <span>{message}</span>;
+    }
+
+    if (Array.isArray(message)) {
+      return (
+        <ul>
+          {message.map((message_, index) => (
+            <li key={index}>{message_}</li>
+          ))}
+        </ul>
+      );
     }
 
     return message;
@@ -63,7 +73,7 @@ const Message = ({
   return (
     <div className={`message ${severity}`}>
       {showIcon && renderIcon()}
-      {renderMessageContent()}
+      <div className="message-content">{renderMessageContent()}</div>
       {enableClose && (
         <span className="close-message" onClick={handleClose}>
           <i className="pi pi-times"></i>
diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index 2a727174b..005fdfad2 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -12,6 +12,15 @@
   flex: 1;
 }
 
+.message-content ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style-type: disc;
+  margin: 0 1rem;
+  padding: 0;
+}
+
 .message .close-message {
   color: var(--color);
   cursor: pointer;

From 1bded610fa4a740578f33e95ecaeebeeb6c3c8d0 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 16 Jul 2025 17:11:12 +0545
Subject: [PATCH 20/21] refactor: remove width of close message icon

---
 packages/ui/src/assets/css/message.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/ui/src/assets/css/message.css b/packages/ui/src/assets/css/message.css
index 005fdfad2..2a9d68bf2 100644
--- a/packages/ui/src/assets/css/message.css
+++ b/packages/ui/src/assets/css/message.css
@@ -24,8 +24,6 @@
 .message .close-message {
   color: var(--color);
   cursor: pointer;
-  height: 1.25rem;
-  width: 1.25rem;
 }
 
 .message.danger {

From 67de5d34df5dcdfe49e3c66ef9eca416230cc06e Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Wed, 16 Jul 2025 17:24:37 +0545
Subject: [PATCH 21/21] refactor: update translations

---
 apps/demo/src/Views/Ui/components/Message.tsx | 20 ++++++-------
 apps/demo/src/locales/en/ui.json              | 30 +++++++++----------
 apps/demo/src/locales/fr/ui.json              | 30 +++++++++----------
 3 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index 666a325dc..18b473d1b 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -11,37 +11,37 @@ export const MessageDemo = () => {
   const propertiesData = [
     {
       default: "false",
-      description: t("message.table.propDescription.enableClose"),
+      description: t("message.propertiesDescription.enableClose"),
       prop: "enableClose",
       type: "boolean",
     },
     {
       default: "-",
-      description: t("message.table.propDescription.icon"),
+      description: t("message.propertiesDescription.icon"),
       prop: "icon",
       type: "string | ReactNode",
     },
     {
       default: "-",
-      description: t("message.table.propDescription.message"),
+      description: t("message.propertiesDescription.message"),
       prop: "message",
       type: "string | string[] | ReactNode",
     },
     {
       default: "-",
-      description: t("message.table.propDescription.onClose"),
+      description: t("message.propertiesDescription.onClose"),
       prop: "onClose",
       type: "() => void",
     },
     {
       default: "info",
-      description: t("message.table.propDescription.severity"),
+      description: t("message.propertiesDescription.severity"),
       prop: "severity",
       type: `"info" | "success" | "warning" | "danger"`,
     },
     {
       default: "true",
-      description: t("message.table.propDescription.showIcon"),
+      description: t("message.propertiesDescription.showIcon"),
       prop: "showIcon",
       type: "boolean",
     },
@@ -164,19 +164,19 @@ export const MessageDemo = () => {
           columns={[
             {
               accessorKey: "prop",
-              header: t("message.table.header.properties"),
+              header: t("propertiesTable.header.properties"),
             },
             {
               accessorKey: "type",
-              header: t("message.table.header.type"),
+              header: t("propertiesTable.header.type"),
             },
             {
               accessorKey: "default",
-              header: t("message.table.header.default"),
+              header: t("propertiesTable.header.default"),
             },
             {
               accessorKey: "description",
-              header: t("message.table.header.description"),
+              header: t("propertiesTable.header.description"),
             },
           ]}
           data={propertiesData}
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index 907a1bd40..4eade75d1 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -5,6 +5,14 @@
   "common": {
     "usage": "To use the {{component}} component, simply import it into your React file:"
   },
+  "propertiesTable": {
+    "header": {
+      "default": "Default",
+      "description": "Description",
+      "properties": "Properties",
+      "type": "Type"
+    }
+  },
   "headers": {
     "buttons": "Buttons",
     "data": "Data",
@@ -227,21 +235,13 @@
       "warning": "Warning message"
     },
     "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases.",
-    "table": {
-      "header": {
-        "default": "Default",
-        "description": "Description",
-        "properties": "Properties",
-        "type": "Type"
-      },
-      "propDescription": {
-        "enableClose": "Displays a close icon if true, allowing the message to be dismissed.",
-        "icon": "Icon to display alongside the message.",
-        "message": "The message text to display in the component.",
-        "onClose": "Function to be called when the message is closed.",
-        "severity": "Defines the styling severity of the message. Defaults to 'info'.",
-        "showIcon": "Show default icon based on severity or custom icon if provided."
-      }
+    "propertiesDescription": {
+      "enableClose": "Displays a close icon if true, allowing the message to be dismissed.",
+      "icon": "Icon to display alongside the message.",
+      "message": "The message text to display in the component.",
+      "onClose": "Function to be called when the message is closed.",
+      "severity": "Defines the styling severity of the message. Defaults to 'info'.",
+      "showIcon": "Show default icon based on severity or custom icon if provided."
     },
     "title": "Message",
     "usage": {
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index f9e1a503b..07f597644 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -5,6 +5,14 @@
   "common": {
     "usage": "To use the {{component}} component, simply import it into your React file (fr):"
   },
+  "propertiesTable": {
+    "header": {
+      "default": "Default (fr)",
+      "description": "Description (fr)",
+      "properties": "Properties (fr)",
+      "type": "Type (fr)"
+    }
+  },
   "headers": {
     "buttons": "Buttons (fr)",
     "data": "Data (fr)",
@@ -227,21 +235,13 @@
       "warning": "Warning message (fr)"
     },
     "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases. (fr)",
-    "table": {
-      "header": {
-        "default": "Default (fr)",
-        "description": "Description (fr)",
-        "properties": "Properties (fr)",
-        "type": "Type (fr)"
-      },
-      "propDescription": {
-        "enableClose": "Displays a close icon if true, allowing the message to be dismissed. (fr)",
-        "icon": "Icon to display alongside the message. (fr)",
-        "message": "The message text to display in the component. (fr)",
-        "onClose": "Function to be called when the message is closed. (fr)",
-        "severity": "Defines the styling severity of the message. Defaults to 'info'. (fr)",
-        "showIcon": "Show default icon based on severity or custom icon if provided. (fr)"
-      }
+    "propertiesDescription": {
+      "enableClose": "Displays a close icon if true, allowing the message to be dismissed. (fr)",
+      "icon": "Icon to display alongside the message. (fr)",
+      "message": "The message text to display in the component. (fr)",
+      "onClose": "Function to be called when the message is closed. (fr)",
+      "severity": "Defines the styling severity of the message. Defaults to 'info'. (fr)",
+      "showIcon": "Show default icon based on severity or custom icon if provided. (fr)"
     },
     "title": "Message (fr)",
     "usage": {