@sikka/hawa 0.34.0-next → 0.34.2-next

package/dist/index.mjs

@@ -867,15 +867,15 @@ var Chip = React6.forwardRef(
       unavailable: "hawa-bg-red-500"
     };
     let colorStyles = {
-      green: "hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800",
-      blue: "hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100",
-      red: "hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100",
-      yellow: "hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800",
-      orange: "hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100",
-      purple: "hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100",
-      cyan: "hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800",
-      hyper: "hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
-      oceanic: "hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
+      green: "hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200",
+      blue: "hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100",
+      red: "hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100",
+      yellow: "hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black",
+      orange: "hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100",
+      purple: "hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100",
+      cyan: "hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100",
+      hyper: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
+      oceanic: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
     };
     if (label) {
       return /* @__PURE__ */ React6.createElement(
@@ -8926,12 +8926,12 @@ var AppLayout = ({
       setOpenSideMenu(false);
     }
   }, [size]);
-  return /* @__PURE__ */ React76.createElement("div", { className: "hawa-fixed hawa-left-0" }, props.topBar && /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React76.createElement("div", { className: "hawa-fixed hawa-start-0" }, props.topBar && /* @__PURE__ */ React76.createElement(
     "div",
     {
+      dir: direction,
       className: cn(
-        "hawa-fixed hawa-left-0 hawa-right-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
-        isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row",
+        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
         bordered && "hawa-border-b-[1px]"
       )
     },
@@ -8940,18 +8940,10 @@ var AppLayout = ({
       {
         className: cn(
           "dark:hawa-text-white",
-          isRTL ? [
-            size > 600 ? "hawa-mr-14" : "hawa-mr-2",
-            keepDrawerOpen ? "hawa-mr-40" : ""
-          ] : [
-            size > 600 ? "hawa-ml-14" : "hawa-ml-2",
-            keepDrawerOpen ? "hawa-ml-40" : ""
-          ]
+          size > 600 ? "hawa-ms-14" : "hawa-ms-2"
         ),
-        style: isRTL ? {
-          marginRight: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
-        } : {
-          marginLeft: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
+        style: {
+          marginInlineStart: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] + 10}px`
         }
       },
       props.pageTitle
@@ -8974,71 +8966,51 @@ var AppLayout = ({
         props.pageTitle ? /* @__PURE__ */ React76.createElement("div", { className: "hawa-text-sm" }, props.pageTitle) : /* @__PURE__ */ React76.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ React76.createElement(
-      "div",
+    /* @__PURE__ */ React76.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 ? /* @__PURE__ */ React76.createElement("div", { className: "hawa-text-end hawa-text-xs" }, /* @__PURE__ */ React76.createElement("div", { className: "hawa-font-bold" }, props.username), " ", /* @__PURE__ */ React76.createElement("div", null, props.email)) : null, /* @__PURE__ */ React76.createElement(
+      DropdownMenu,
       {
-        className: cn(
-          "hawa-flex hawa-gap-2 dark:hawa-text-white",
-          isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row"
-        )
-      },
-      size > 600 ? /* @__PURE__ */ React76.createElement(
-        "div",
-        {
-          className: isRTL ? "hawa-text-left hawa-text-xs" : "hawa-text-right hawa-text-xs"
-        },
-        /* @__PURE__ */ React76.createElement("div", { className: "hawa-font-bold" }, props.username),
-        " ",
-        /* @__PURE__ */ React76.createElement("div", null, props.email)
-      ) : null,
-      /* @__PURE__ */ React76.createElement(
-        DropdownMenu,
-        {
-          LinkComponent: MenuLinkComponent,
-          triggerClassname: "hawa-mx-2",
-          align: "end",
-          alignOffset: 8,
-          side: "bottom",
-          sideOffset: 5,
-          width: profileMenuWidth,
-          direction: isRTL ? "rtl" : "ltr",
-          items: props.profileMenuItems || [],
-          onItemSelect: (e) => console.log("selecting item ", e),
-          trigger: /* @__PURE__ */ React76.createElement(
-            "div",
+        LinkComponent: MenuLinkComponent,
+        triggerClassname: "hawa-mx-2",
+        align: "end",
+        alignOffset: 8,
+        side: "bottom",
+        sideOffset: 5,
+        width: profileMenuWidth,
+        direction,
+        items: props.profileMenuItems || [],
+        onItemSelect: (e) => console.log("selecting item ", e),
+        trigger: /* @__PURE__ */ React76.createElement(
+          "div",
+          {
+            onClick: onAvatarClick,
+            className: "hawa-relative hawa-h-8 hawa-w-8  hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600"
+          },
+          props.avatarImage ? /* @__PURE__ */ React76.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ React76.createElement(
+            "svg",
             {
-              onClick: onAvatarClick,
-              className: "hawa-relative hawa-h-8 hawa-w-8  hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600"
+              "aria-label": "Avatar Icon",
+              className: "hawa-absolute hawa--start-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
+              fill: "currentColor",
+              viewBox: "0 0 20 20"
             },
-            props.avatarImage ? /* @__PURE__ */ React76.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ React76.createElement(
-              "svg",
+            /* @__PURE__ */ React76.createElement(
+              "path",
               {
-                "aria-label": "Avatar Icon",
-                className: "hawa-absolute hawa--left-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
-                fill: "currentColor",
-                viewBox: "0 0 20 20"
-              },
-              /* @__PURE__ */ React76.createElement(
-                "path",
-                {
-                  fillRule: "evenodd",
-                  d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
-                  clipRule: "evenodd"
-                }
-              )
+                fillRule: "evenodd",
+                d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
+                clipRule: "evenodd"
+              }
             )
           )
-        }
-      )
-    )
+        )
+      }
+    ))
   ), /* @__PURE__ */ React76.createElement(
     "div",
     {
       className: cn(
-        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-bg-blue-500",
-        isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14",
-        "hawa-h-[calc(100dvh)]",
-        "hawa-bg-primary-foreground",
+        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
+        isRTL ? "hawa-right-0" : "hawa-left-0",
         bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
       ),
       style: {
@@ -9080,7 +9052,7 @@ var AppLayout = ({
         "img",
         {
           className: cn(
-            "hawa-h-9  hawa-opacity-0 hawa-transition-all",
+            "hawa-h-9 hawa-opacity-0 hawa-transition-all",
             !openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
             classNames == null ? void 0 : classNames.fullLogoImg
           ),
@@ -9091,8 +9063,7 @@ var AppLayout = ({
         "img",
         {
           className: cn(
-            "hawa-fixed  hawa-h-9  hawa-transition-all",
-            isRTL ? "hawa-right-2.5 hawa-top-2.5" : "hawa-left-2.5 hawa-top-2.5",
+            "hawa-fixed hawa-h-9 hawa-transition-all hawa-start-2.5 hawa-top-2.5",
             openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
             classNames == null ? void 0 : classNames.symbolLogoImg
           ),
@@ -9151,21 +9122,21 @@ var AppLayout = ({
         {
           side: "left",
           delayDuration: 500,
-          content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar",
-          triggerProps: { asChild: true }
+          triggerProps: { asChild: true },
+          content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar"
         },
         /* @__PURE__ */ React76.createElement(
           Button,
           {
             variant: "outline",
+            size: "smallIcon",
             onClick: () => {
               const newKeepOpenState = !keepDrawerOpen;
               if (props.onDrawerExpand) {
                 props.onDrawerExpand(newKeepOpenState);
               }
               setKeepDrawerOpen(newKeepOpenState);
-            },
-            size: "smallIcon"
+            }
           },
           /* @__PURE__ */ React76.createElement(
             "svg",
@@ -9194,15 +9165,15 @@ var AppLayout = ({
     {
       className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
       style: isRTL ? {
-        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
-        width: `calc(100% - ${drawerSizeCondition}px)`,
         left: "0px",
-        top: props.topBar ? "56px" : "0px"
-      } : {
-        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
+        top: props.topBar ? "56px" : "0px",
         width: `calc(100% - ${drawerSizeCondition}px)`,
+        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
+      } : {
         left: `${drawerSizeCondition}px`,
-        top: props.topBar ? "56px" : "0px"
+        top: props.topBar ? "56px" : "0px",
+        width: `calc(100% - ${drawerSizeCondition}px)`,
+        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
       }
     },
     props.children

package/dist/layout/index.js

@@ -267,15 +267,15 @@ var Chip = import_react3.default.forwardRef(
       unavailable: "hawa-bg-red-500"
     };
     let colorStyles = {
-      green: "hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800",
-      blue: "hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100",
-      red: "hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100",
-      yellow: "hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800",
-      orange: "hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100",
-      purple: "hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100",
-      cyan: "hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800",
-      hyper: "hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
-      oceanic: "hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
+      green: "hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200",
+      blue: "hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100",
+      red: "hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100",
+      yellow: "hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black",
+      orange: "hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100",
+      purple: "hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100",
+      cyan: "hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100",
+      hyper: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
+      oceanic: "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
     };
     if (label) {
       return /* @__PURE__ */ import_react3.default.createElement(
@@ -1525,12 +1525,12 @@ var AppLayout = ({
       setOpenSideMenu(false);
     }
   }, [size]);
-  return /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-fixed hawa-left-0" }, props.topBar && /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-fixed hawa-start-0" }, props.topBar && /* @__PURE__ */ import_react9.default.createElement(
     "div",
     {
+      dir: direction,
       className: cn(
-        "hawa-fixed hawa-left-0 hawa-right-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
-        isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row",
+        "hawa-fixed hawa-end-0 hawa-start-0 hawa-top-0 hawa-z-0 hawa-flex hawa-h-14 hawa-w-full hawa-items-center hawa-justify-between hawa-bg-primary-foreground hawa-p-2",
         bordered && "hawa-border-b-[1px]"
       )
     },
@@ -1539,18 +1539,10 @@ var AppLayout = ({
       {
         className: cn(
           "dark:hawa-text-white",
-          isRTL ? [
-            size > 600 ? "hawa-mr-14" : "hawa-mr-2",
-            keepDrawerOpen ? "hawa-mr-40" : ""
-          ] : [
-            size > 600 ? "hawa-ml-14" : "hawa-ml-2",
-            keepDrawerOpen ? "hawa-ml-40" : ""
-          ]
+          size > 600 ? "hawa-ms-14" : "hawa-ms-2"
         ),
-        style: isRTL ? {
-          marginRight: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
-        } : {
-          marginLeft: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize]}px`
+        style: {
+          marginInlineStart: `${drawerSizeStyle[keepDrawerOpen ? "opened" : "closed"][drawerSize] + 10}px`
         }
       },
       props.pageTitle
@@ -1573,71 +1565,51 @@ var AppLayout = ({
         props.pageTitle ? /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-text-sm" }, props.pageTitle) : /* @__PURE__ */ import_react9.default.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ import_react9.default.createElement(
-      "div",
+    /* @__PURE__ */ import_react9.default.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 ? /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-text-end hawa-text-xs" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-font-bold" }, props.username), " ", /* @__PURE__ */ import_react9.default.createElement("div", null, props.email)) : null, /* @__PURE__ */ import_react9.default.createElement(
+      DropdownMenu,
       {
-        className: cn(
-          "hawa-flex hawa-gap-2 dark:hawa-text-white",
-          isRTL ? "hawa-flex-row-reverse" : "hawa-flex-row"
-        )
-      },
-      size > 600 ? /* @__PURE__ */ import_react9.default.createElement(
-        "div",
-        {
-          className: isRTL ? "hawa-text-left hawa-text-xs" : "hawa-text-right hawa-text-xs"
-        },
-        /* @__PURE__ */ import_react9.default.createElement("div", { className: "hawa-font-bold" }, props.username),
-        " ",
-        /* @__PURE__ */ import_react9.default.createElement("div", null, props.email)
-      ) : null,
-      /* @__PURE__ */ import_react9.default.createElement(
-        DropdownMenu,
-        {
-          LinkComponent: MenuLinkComponent,
-          triggerClassname: "hawa-mx-2",
-          align: "end",
-          alignOffset: 8,
-          side: "bottom",
-          sideOffset: 5,
-          width: profileMenuWidth,
-          direction: isRTL ? "rtl" : "ltr",
-          items: props.profileMenuItems || [],
-          onItemSelect: (e) => console.log("selecting item ", e),
-          trigger: /* @__PURE__ */ import_react9.default.createElement(
-            "div",
+        LinkComponent: MenuLinkComponent,
+        triggerClassname: "hawa-mx-2",
+        align: "end",
+        alignOffset: 8,
+        side: "bottom",
+        sideOffset: 5,
+        width: profileMenuWidth,
+        direction,
+        items: props.profileMenuItems || [],
+        onItemSelect: (e) => console.log("selecting item ", e),
+        trigger: /* @__PURE__ */ import_react9.default.createElement(
+          "div",
+          {
+            onClick: onAvatarClick,
+            className: "hawa-relative hawa-h-8 hawa-w-8  hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600"
+          },
+          props.avatarImage ? /* @__PURE__ */ import_react9.default.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ import_react9.default.createElement(
+            "svg",
             {
-              onClick: onAvatarClick,
-              className: "hawa-relative hawa-h-8 hawa-w-8  hawa-cursor-pointer hawa-overflow-clip hawa-rounded hawa-ring-1 hawa-ring-primary/30 dark:hawa-bg-gray-600"
+              "aria-label": "Avatar Icon",
+              className: "hawa-absolute hawa--start-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
+              fill: "currentColor",
+              viewBox: "0 0 20 20"
             },
-            props.avatarImage ? /* @__PURE__ */ import_react9.default.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ import_react9.default.createElement(
-              "svg",
+            /* @__PURE__ */ import_react9.default.createElement(
+              "path",
               {
-                "aria-label": "Avatar Icon",
-                className: "hawa-absolute hawa--left-1 hawa-h-10 hawa-w-10 hawa-text-gray-400",
-                fill: "currentColor",
-                viewBox: "0 0 20 20"
-              },
-              /* @__PURE__ */ import_react9.default.createElement(
-                "path",
-                {
-                  fillRule: "evenodd",
-                  d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
-                  clipRule: "evenodd"
-                }
-              )
+                fillRule: "evenodd",
+                d: "M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z",
+                clipRule: "evenodd"
+              }
             )
           )
-        }
-      )
-    )
+        )
+      }
+    ))
   ), /* @__PURE__ */ import_react9.default.createElement(
     "div",
     {
       className: cn(
-        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-bg-blue-500",
-        isRTL ? "hawa-right-0 hawa-top-0 hawa-h-14" : "hawa-left-0 hawa-top-0 hawa-h-14",
-        "hawa-h-[calc(100dvh)]",
-        "hawa-bg-primary-foreground",
+        "hawa-fixed hawa-z-0 hawa-flex hawa-flex-col hawa-justify-between hawa-overflow-x-clip hawa-transition-all hawa-top-0 hawa-h-[calc(100dvh)] hawa-bg-primary-foreground",
+        isRTL ? "hawa-right-0" : "hawa-left-0",
         bordered ? direction === "rtl" ? "hawa-border-s-[1px]" : "hawa-border-e-[1px]" : ""
       ),
       style: {
@@ -1679,7 +1651,7 @@ var AppLayout = ({
         "img",
         {
           className: cn(
-            "hawa-h-9  hawa-opacity-0 hawa-transition-all",
+            "hawa-h-9 hawa-opacity-0 hawa-transition-all",
             !openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
             classNames == null ? void 0 : classNames.fullLogoImg
           ),
@@ -1690,8 +1662,7 @@ var AppLayout = ({
         "img",
         {
           className: cn(
-            "hawa-fixed  hawa-h-9  hawa-transition-all",
-            isRTL ? "hawa-right-2.5 hawa-top-2.5" : "hawa-left-2.5 hawa-top-2.5",
+            "hawa-fixed hawa-h-9 hawa-transition-all hawa-start-2.5 hawa-top-2.5",
             openSideMenu ? "hawa-invisible hawa-opacity-0" : "hawa-visible hawa-opacity-100",
             classNames == null ? void 0 : classNames.symbolLogoImg
           ),
@@ -1750,21 +1721,21 @@ var AppLayout = ({
         {
           side: "left",
           delayDuration: 500,
-          content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar",
-          triggerProps: { asChild: true }
+          triggerProps: { asChild: true },
+          content: keepDrawerOpen ? ((_a = props.texts) == null ? void 0 : _a.collapseSidebar) || "Collapse Sidebar" : ((_b = props.texts) == null ? void 0 : _b.expandSidebar) || "Expand Sidebar"
         },
         /* @__PURE__ */ import_react9.default.createElement(
           Button,
           {
             variant: "outline",
+            size: "smallIcon",
             onClick: () => {
               const newKeepOpenState = !keepDrawerOpen;
               if (props.onDrawerExpand) {
                 props.onDrawerExpand(newKeepOpenState);
               }
               setKeepDrawerOpen(newKeepOpenState);
-            },
-            size: "smallIcon"
+            }
           },
           /* @__PURE__ */ import_react9.default.createElement(
             "svg",
@@ -1793,15 +1764,15 @@ var AppLayout = ({
     {
       className: "hawa-fixed -hawa-z-10 hawa-overflow-y-auto hawa-transition-all",
       style: isRTL ? {
-        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
-        width: `calc(100% - ${drawerSizeCondition}px)`,
         left: "0px",
-        top: props.topBar ? "56px" : "0px"
-      } : {
-        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`,
+        top: props.topBar ? "56px" : "0px",
         width: `calc(100% - ${drawerSizeCondition}px)`,
+        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
+      } : {
         left: `${drawerSizeCondition}px`,
-        top: props.topBar ? "56px" : "0px"
+        top: props.topBar ? "56px" : "0px",
+        width: `calc(100% - ${drawerSizeCondition}px)`,
+        height: `calc(100% - ${props.topBar ? "56" : "0"}px)`
       }
     },
     props.children