@sikka/hawa 0.34.0-next → 0.34.2-next

package/dist/index.css

@@ -1009,6 +1009,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa--right-\[16px\] {
   right: -16px;
 }
+.hawa--start-1 {
+  inset-inline-start: -0.25rem;
+}
 .hawa-bottom-0 {
   bottom: 0px;
 }
@@ -1045,9 +1048,6 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-left-2 {
   left: 0.5rem;
 }
-.hawa-left-2\.5 {
-  left: 0.625rem;
-}
 .hawa-left-4 {
   left: 1rem;
 }
@@ -1060,9 +1060,6 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-right-2 {
   right: 0.5rem;
 }
-.hawa-right-2\.5 {
-  right: 0.625rem;
-}
 .hawa-right-3 {
   right: 0.75rem;
 }
@@ -1078,6 +1075,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-start-2 {
   inset-inline-start: 0.5rem;
 }
+.hawa-start-2\.5 {
+  inset-inline-start: 0.625rem;
+}
 .hawa-start-3 {
   inset-inline-start: 0.75rem;
 }
@@ -1287,6 +1287,12 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-mr-8 {
   margin-right: 2rem;
 }
+.hawa-ms-14 {
+  margin-inline-start: 3.5rem;
+}
+.hawa-ms-2 {
+  margin-inline-start: 0.5rem;
+}
 .hawa-mt-0 {
   margin-top: 0px;
 }
@@ -2285,9 +2291,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
-.hawa-bg-blue-100 {
+.hawa-bg-blue-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
 .hawa-bg-blue-500 {
   --tw-bg-opacity: 1;
@@ -2299,9 +2305,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-bg-card {
   background-color: hsl(var(--card));
 }
-.hawa-bg-cyan-100 {
+.hawa-bg-cyan-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(207 250 254 / var(--tw-bg-opacity));
+  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
 }
 .hawa-bg-destructive {
   --tw-bg-opacity: 1;
@@ -2337,9 +2343,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
-.hawa-bg-green-100 {
+.hawa-bg-green-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
 }
 .hawa-bg-green-400 {
   --tw-bg-opacity: 1;
@@ -2375,9 +2381,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-bg-muted\/60 {
   background-color: hsl(var(--muted) / 0.6);
 }
-.hawa-bg-orange-100 {
+.hawa-bg-orange-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
+  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
 }
 .hawa-bg-popover {
   background-color: hsl(var(--popover));
@@ -2409,13 +2415,13 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-bg-primary\/90 {
   background-color: hsl(var(--primary) / 0.9);
 }
-.hawa-bg-purple-100 {
+.hawa-bg-purple-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
+  background-color: rgb(233 213 255 / var(--tw-bg-opacity));
 }
-.hawa-bg-red-100 {
+.hawa-bg-red-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
 }
 .hawa-bg-red-400 {
   --tw-bg-opacity: 1;
@@ -2457,9 +2463,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.hawa-bg-yellow-100 {
+.hawa-bg-yellow-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }
 .hawa-bg-yellow-500 {
   --tw-bg-opacity: 1;
@@ -2753,6 +2759,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-text-start {
   text-align: start;
 }
+.hawa-text-end {
+  text-align: end;
+}
 .hawa-align-middle {
   vertical-align: middle;
 }
@@ -2866,15 +2875,19 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
+.hawa-text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
 .hawa-text-card-foreground {
   color: hsl(var(--card-foreground));
 }
 .hawa-text-current {
   color: currentColor;
 }
-.hawa-text-cyan-800 {
+.hawa-text-cyan-700 {
   --tw-text-opacity: 1;
-  color: rgb(21 94 117 / var(--tw-text-opacity));
+  color: rgb(14 116 144 / var(--tw-text-opacity));
 }
 .hawa-text-destructive-foreground {
   --tw-text-opacity: 1;
@@ -2914,6 +2927,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity));
 }
+.hawa-text-green-700 {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
 .hawa-text-helper-color {
   color: hsl(var(--helper-text));
 }
@@ -2935,9 +2952,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(115 115 115 / var(--tw-text-opacity));
 }
-.hawa-text-orange-500 {
+.hawa-text-orange-700 {
   --tw-text-opacity: 1;
-  color: rgb(249 115 22 / var(--tw-text-opacity));
+  color: rgb(194 65 12 / var(--tw-text-opacity));
 }
 .hawa-text-popover-foreground {
   color: hsl(var(--popover-foreground));
@@ -2957,9 +2974,9 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-text-primary\/90 {
   color: hsl(var(--primary) / 0.9);
 }
-.hawa-text-purple-500 {
+.hawa-text-purple-700 {
   --tw-text-opacity: 1;
-  color: rgb(168 85 247 / var(--tw-text-opacity));
+  color: rgb(126 34 206 / var(--tw-text-opacity));
 }
 .hawa-text-red-500 {
   --tw-text-opacity: 1;
@@ -2969,6 +2986,10 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }
+.hawa-text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
 .hawa-text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
@@ -2984,9 +3005,9 @@ input[type="number"]::-webkit-inner-spin-button,
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.hawa-text-yellow-600 {
+.hawa-text-yellow-700 {
   --tw-text-opacity: 1;
-  color: rgb(202 138 4 / var(--tw-text-opacity));
+  color: rgb(161 98 7 / var(--tw-text-opacity));
 }
 .hawa-line-through {
   text-decoration-line: line-through;
@@ -4176,13 +4197,13 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
-.dark\:hawa-bg-blue-400:is(.hawa-dark *) {
+.dark\:hawa-bg-blue-700:is(.hawa-dark *) {
   --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
-.dark\:hawa-bg-cyan-400:is(.hawa-dark *) {
+.dark\:hawa-bg-cyan-700:is(.hawa-dark *) {
   --tw-bg-opacity: 1;
-  background-color: rgb(34 211 238 / var(--tw-bg-opacity));
+  background-color: rgb(14 116 144 / var(--tw-bg-opacity));
 }
 .dark\:hawa-bg-foreground\/5:is(.hawa-dark *) {
   background-color: hsl(var(--foreground) / 0.05);
@@ -4195,35 +4216,35 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
-.dark\:hawa-bg-green-400:is(.hawa-dark *) {
+.dark\:hawa-bg-green-700:is(.hawa-dark *) {
   --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 .dark\:hawa-bg-muted\/40:is(.hawa-dark *) {
   background-color: hsl(var(--muted) / 0.4);
 }
-.dark\:hawa-bg-orange-400:is(.hawa-dark *) {
+.dark\:hawa-bg-orange-700:is(.hawa-dark *) {
   --tw-bg-opacity: 1;
-  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
+  background-color: rgb(194 65 12 / var(--tw-bg-opacity));
 }
 .dark\:hawa-bg-primary:is(.hawa-dark *) {
   background-color: hsl(var(--primary));
 }
-.dark\:hawa-bg-purple-400:is(.hawa-dark *) {
+.dark\:hawa-bg-purple-700:is(.hawa-dark *) {
   --tw-bg-opacity: 1;
-  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
+  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
 }
-.dark\:hawa-bg-red-400:is(.hawa-dark *) {
+.dark\:hawa-bg-red-700:is(.hawa-dark *) {
   --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
 .dark\:hawa-bg-white:is(.hawa-dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.dark\:hawa-bg-yellow-400:is(.hawa-dark *) {
+.dark\:hawa-bg-yellow-600:is(.hawa-dark *) {
   --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
 }
 .dark\:hawa-text-black:is(.hawa-dark *) {
   --tw-text-opacity: 1;
@@ -4233,9 +4254,9 @@ body {
   --tw-text-opacity: 1;
   color: rgb(219 234 254 / var(--tw-text-opacity));
 }
-.dark\:hawa-text-cyan-800:is(.hawa-dark *) {
+.dark\:hawa-text-cyan-100:is(.hawa-dark *) {
   --tw-text-opacity: 1;
-  color: rgb(21 94 117 / var(--tw-text-opacity));
+  color: rgb(207 250 254 / var(--tw-text-opacity));
 }
 .dark\:hawa-text-gray-300:is(.hawa-dark *) {
   --tw-text-opacity: 1;
@@ -4249,13 +4270,13 @@ body {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
-.dark\:hawa-text-green-500:is(.hawa-dark *) {
+.dark\:hawa-text-green-200:is(.hawa-dark *) {
   --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity));
+  color: rgb(187 247 208 / var(--tw-text-opacity));
 }
-.dark\:hawa-text-green-800:is(.hawa-dark *) {
+.dark\:hawa-text-green-500:is(.hawa-dark *) {
   --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity));
+  color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 .dark\:hawa-text-muted-foreground:is(.hawa-dark *) {
   color: hsl(var(--muted-foreground));
@@ -4280,10 +4301,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.dark\:hawa-text-yellow-800:is(.hawa-dark *) {
-  --tw-text-opacity: 1;
-  color: rgb(133 77 14 / var(--tw-text-opacity));
-}
 .dark\:dark-shadow:is(.hawa-dark *) {
     box-shadow:
       0 10px 15px -3px rgba(255, 255, 255, 0.1),

package/dist/index.js

@@ -1105,15 +1105,15 @@ var Chip = import_react4.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_react4.default.createElement(
@@ -9149,12 +9149,12 @@ var AppLayout = ({
       setOpenSideMenu(false);
     }
   }, [size]);
-  return /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-fixed hawa-left-0" }, props.topBar && /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-fixed hawa-start-0" }, props.topBar && /* @__PURE__ */ import_react55.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]"
       )
     },
@@ -9163,18 +9163,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
@@ -9197,71 +9189,51 @@ var AppLayout = ({
         props.pageTitle ? /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-text-sm" }, props.pageTitle) : /* @__PURE__ */ import_react55.default.createElement("div", null)
       )
     ),
-    /* @__PURE__ */ import_react55.default.createElement(
-      "div",
+    /* @__PURE__ */ import_react55.default.createElement("div", { className: cn("hawa-flex hawa-gap-2 dark:hawa-text-white") }, size > 600 ? /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-text-end hawa-text-xs" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-font-bold" }, props.username), " ", /* @__PURE__ */ import_react55.default.createElement("div", null, props.email)) : null, /* @__PURE__ */ import_react55.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_react55.default.createElement(
-        "div",
-        {
-          className: isRTL ? "hawa-text-left hawa-text-xs" : "hawa-text-right hawa-text-xs"
-        },
-        /* @__PURE__ */ import_react55.default.createElement("div", { className: "hawa-font-bold" }, props.username),
-        " ",
-        /* @__PURE__ */ import_react55.default.createElement("div", null, props.email)
-      ) : null,
-      /* @__PURE__ */ import_react55.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_react55.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_react55.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_react55.default.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ import_react55.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_react55.default.createElement("img", { src: props.avatarImage, alt: "User Avatar" }) : /* @__PURE__ */ import_react55.default.createElement(
-              "svg",
+            /* @__PURE__ */ import_react55.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_react55.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_react55.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: {
@@ -9303,7 +9275,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
           ),
@@ -9314,8 +9286,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
           ),
@@ -9374,21 +9345,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_react55.default.createElement(
           Button,
           {
             variant: "outline",
+            size: "smallIcon",
             onClick: () => {
               const newKeepOpenState = !keepDrawerOpen;
               if (props.onDrawerExpand) {
                 props.onDrawerExpand(newKeepOpenState);
               }
               setKeepDrawerOpen(newKeepOpenState);
-            },
-            size: "smallIcon"
+            }
           },
           /* @__PURE__ */ import_react55.default.createElement(
             "svg",
@@ -9417,15 +9388,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