@saas-ui/react 3.0.0-alpha.26 → 3.0.0-alpha.28

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @saas-ui/react
 
+## 3.0.0-alpha.28
+
+### Patch Changes
+
+- 6a8bf46: Decreased default overlay translucency
+- 6a8bf46: Fix dialog backdrop z-index
+
+## 3.0.0-alpha.27
+
+### Patch Changes
+
+- 56b0623: Update with upstream changes
+- 56b0623: Fixed issue where backdrop would render on top of dialog and drawer
+
 ## 3.0.0-alpha.26
 
 ### Patch Changes
@@ -235,11 +249,187 @@
 
 - v3 alpha release
 
+## 2.11.4
+
+### Patch Changes
+
+- Updated dependencies [091fd38]
+  - @saas-ui/forms@2.11.0
+  - @saas-ui/modals@2.4.4
+  - @saas-ui/data-table@13.0.4
+
+## 2.11.3
+
+### Patch Changes
+
+- Updated dependencies [eb53116]
+  - @saas-ui/forms@2.10.0
+  - @saas-ui/modals@2.4.3
+  - @saas-ui/data-table@13.0.3
+
+## 2.11.2
+
+### Patch Changes
+
+- 862937a: Bump chakra version
+- Updated dependencies [862937a]
+  - @saas-ui/data-table@13.0.2
+  - @saas-ui/nprogress@2.2.1
+  - @saas-ui/hotkeys@2.5.1
+  - @saas-ui/modals@2.4.2
+  - @saas-ui/forms@2.9.1
+  - @saas-ui/theme@2.6.1
+  - @saas-ui/core@2.8.1
+
+## 2.11.1
+
+### Patch Changes
+
+- Updated dependencies [a69829a]
+  - @saas-ui/hooks@2.3.0
+  - @saas-ui/modals@2.4.1
+  - @saas-ui/data-table@13.0.1
+
+## 2.11.0
+
+### Minor Changes
+
+- 803ede7: Updated Chakra UI version range to >=2.9.0 <3
+
+### Patch Changes
+
+- Updated dependencies [803ede7]
+  - @saas-ui/data-table@13.0.0
+  - @saas-ui/nprogress@2.2.0
+  - @saas-ui/hotkeys@2.5.0
+  - @saas-ui/modals@2.4.0
+  - @saas-ui/forms@2.9.0
+  - @saas-ui/hooks@2.2.0
+  - @saas-ui/theme@2.6.0
+  - @saas-ui/core@2.8.0
+
+## 2.10.5
+
+### Patch Changes
+
+- c9daf50: Fixed issue where link component prop would not be passed to NavItem
+- Updated dependencies [c9daf50]
+  - @saas-ui/core@2.7.2
+  - @saas-ui/data-table@12.0.5
+  - @saas-ui/forms@2.8.2
+  - @saas-ui/hotkeys@2.4.2
+  - @saas-ui/modals@2.3.5
+
+## 2.10.4
+
+### Patch Changes
+
+- a863a5e: Updated package type to fix next 15 support
+- Updated dependencies [a863a5e]
+  - @saas-ui/modals@2.3.4
+  - @saas-ui/data-table@12.0.4
+
+## 2.10.3
+
 ### Patch Changes
 
 - Updated dependencies
+  <<<<<<< HEAD
   - @saas-ui/hooks@3.0.0-alpha.0
-  - @saas-ui/core@3.0.0-alpha.0
+  - # @saas-ui/core@3.0.0-alpha.0
+  - @saas-ui/modals@2.3.3
+  - @saas-ui/data-table@12.0.3
+
+## 2.10.2
+
+### Patch Changes
+
+- 7669720: Fixed publint issues
+- Updated dependencies [7669720]
+  - @saas-ui/modals@2.3.2
+  - @saas-ui/data-table@12.0.2
+
+## 2.10.1
+
+### Patch Changes
+
+- 5e24ec4: Fixed issue where as prop on NavItem would always be overruled by internal Link prop if href is passed
+- Updated dependencies [5e24ec4]
+  - @saas-ui/core@2.7.1
+  - @saas-ui/data-table@12.0.1
+  - @saas-ui/forms@2.8.1
+  - @saas-ui/hotkeys@2.4.1
+  - @saas-ui/modals@2.3.1
+
+## 2.10.0
+
+### Minor Changes
+
+- fc799df: Removed deprecated Chakra UI dependency
+
+### Patch Changes
+
+- Updated dependencies [fc799df]
+  - @saas-ui/hotkeys@2.4.0
+  - @saas-ui/modals@2.3.0
+  - @saas-ui/forms@2.8.0
+  - @saas-ui/core@2.7.0
+  - @saas-ui/data-table@12.0.0
+
+## 2.9.1
+
+### Patch Changes
+
+- f0ee3db: Updated to Chakra 2.10
+- Updated dependencies [f0ee3db]
+  - @saas-ui/data-table@11.0.1
+  - @saas-ui/nprogress@2.1.1
+  - @saas-ui/hotkeys@2.3.1
+  - @saas-ui/modals@2.2.1
+  - @saas-ui/forms@2.7.1
+  - @saas-ui/theme@2.5.1
+  - @saas-ui/core@2.6.1
+
+## 2.9.0
+
+### Minor Changes
+
+- 2ac496a: Upgraded to Chakra UI v2.9.3
+
+### Patch Changes
+
+- Updated dependencies [2ac496a]
+  - @saas-ui/data-table@11.0.0
+  - @saas-ui/nprogress@2.1.0
+  - @saas-ui/hotkeys@2.3.0
+  - @saas-ui/modals@2.2.0
+  - @saas-ui/forms@2.7.0
+  - @saas-ui/hooks@2.1.0
+  - @saas-ui/theme@2.5.0
+  - @saas-ui/core@2.6.0
+
+## 2.8.11
+
+### Patch Changes
+
+- 5e000e0: Removed background color from loading overlay fill variant
+- Updated dependencies [5e000e0]
+  - @saas-ui/theme@2.4.2
+  - @saas-ui/core@2.5.6
+  - @saas-ui/data-table@10.0.11
+  - @saas-ui/forms@2.6.11
+  - @saas-ui/hotkeys@2.2.14
+  - @saas-ui/modals@2.1.41
+
+## 2.8.10
+
+### Patch Changes
+
+- Updated dependencies [fc2203a]
+  - @saas-ui/forms@2.6.10
+  - @saas-ui/modals@2.1.40
+  - @saas-ui/data-table@10.0.10
+    > > > > > > > v3
 
 ## 2.8.9
 

package/dist/{chunk-CZVNG73V.js → chunk-32DD6PHF.js}

@@ -44,7 +44,7 @@ var Content = forwardRef(
   }
 );
 var CloseButton2 = forwardRef(function DialogCloseTrigger(props, ref) {
-  return /* @__PURE__ */ jsx(ChakraDialog.CloseTrigger, { position: "absolute", ...props, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "sm", ref, children: props.children }) });
+  return /* @__PURE__ */ jsx(ChakraDialog.CloseTrigger, { ...props, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "sm", ref, children: props.children }) });
 });
 var CloseTrigger = ChakraDialog.CloseTrigger;
 var Root = ChakraDialog.Root;

package/dist/{chunk-K2SPPLAY.js → chunk-CD2JUFI2.js}

@@ -152,10 +152,10 @@ function IconBase(props) {
 
 // ../../node_modules/react-icons/lu/index.mjs
 function LuEyeOff(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }, "child": [] }, { "tag": "path", "attr": { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }, "child": [] }, { "tag": "path", "attr": { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }, "child": [] }, { "tag": "path", "attr": { "d": "m2 2 20 20" }, "child": [] }] })(props);
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M9.88 9.88a3 3 0 1 0 4.24 4.24" }, "child": [] }, { "tag": "path", "attr": { "d": "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }, "child": [] }, { "tag": "path", "attr": { "d": "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }, "child": [] }, { "tag": "line", "attr": { "x1": "2", "x2": "22", "y1": "2", "y2": "22" }, "child": [] }] })(props);
 }
 function LuEye(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
 }
 
 // src/components/password-input/password-input.tsx

package/dist/{chunk-6MMPBMKN.js → chunk-LTVFG6UC.js}

@@ -35,7 +35,7 @@ var Content = forwardRef(
 );
 var CloseButton2 = forwardRef(function DrawerCloseTrigger(props, ref) {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ jsx(ChakraDrawer.CloseTrigger, { position: "absolute", ...rest, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "sm", ref, children }) });
+  return /* @__PURE__ */ jsx(ChakraDrawer.CloseTrigger, { ...rest, asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "sm", ref, children }) });
 });
 var CloseTrigger = ChakraDrawer.CloseTrigger;
 var Trigger = ChakraDrawer.Trigger;

package/dist/components/dialog/index.cjs

@@ -185,7 +185,7 @@ var Content = (0, import_react4.forwardRef)(
   }
 );
 var CloseButton3 = (0, import_react4.forwardRef)(function DialogCloseTrigger(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Dialog.CloseTrigger, { position: "absolute", ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseButton, { size: "sm", ref, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Dialog.CloseTrigger, { ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseButton, { size: "sm", ref, children: props.children }) });
 });
 var CloseTrigger = import_react5.Dialog.CloseTrigger;
 var Root = import_react5.Dialog.Root;

package/dist/components/dialog/index.js

@@ -1,7 +1,7 @@
 'use client'
 import {
   dialog_exports
-} from "../../chunk-CZVNG73V.js";
+} from "../../chunk-32DD6PHF.js";
 import "../../chunk-JMYI6YXR.js";
 import "../../chunk-YXGJOOMM.js";
 import "../../chunk-4TPVIHNO.js";

package/dist/components/drawer/index.cjs

@@ -176,7 +176,7 @@ var Content = (0, import_react4.forwardRef)(
 );
 var CloseButton3 = (0, import_react4.forwardRef)(function DrawerCloseTrigger(props, ref) {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Drawer.CloseTrigger, { position: "absolute", ...rest, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseButton, { size: "sm", ref, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.Drawer.CloseTrigger, { ...rest, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseButton, { size: "sm", ref, children }) });
 });
 var CloseTrigger = import_react5.Drawer.CloseTrigger;
 var Trigger = import_react5.Drawer.Trigger;

package/dist/components/drawer/index.js

@@ -1,7 +1,7 @@
 'use client'
 import {
   drawer_exports
-} from "../../chunk-6MMPBMKN.js";
+} from "../../chunk-LTVFG6UC.js";
 import "../../chunk-JMYI6YXR.js";
 import "../../chunk-YXGJOOMM.js";
 import "../../chunk-4TPVIHNO.js";

package/dist/components/password-input/index.cjs

@@ -179,10 +179,10 @@ function IconBase(props) {
 
 // ../../node_modules/react-icons/lu/index.mjs
 function LuEyeOff(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }, "child": [] }, { "tag": "path", "attr": { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }, "child": [] }, { "tag": "path", "attr": { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }, "child": [] }, { "tag": "path", "attr": { "d": "m2 2 20 20" }, "child": [] }] })(props);
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M9.88 9.88a3 3 0 1 0 4.24 4.24" }, "child": [] }, { "tag": "path", "attr": { "d": "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }, "child": [] }, { "tag": "path", "attr": { "d": "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }, "child": [] }, { "tag": "line", "attr": { "x1": "2", "x2": "22", "y1": "2", "y2": "22" }, "child": [] }] })(props);
 }
 function LuEye(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
 }
 
 // src/components/input-group/input-group.tsx

package/dist/components/password-input/index.js

@@ -1,7 +1,7 @@
 'use client'
 import {
   PasswordInput
-} from "../../chunk-K2SPPLAY.js";
+} from "../../chunk-CD2JUFI2.js";
 import "../../chunk-PKI6YH2V.js";
 import "../../chunk-RTMS5TJN.js";
 export {

package/dist/index.cjs

@@ -226,7 +226,7 @@ var globalCss = (0, import_react3.defineGlobalStyles)({
     // '--radius-indicator': '1',
     "--radius-full": "9999px",
     "--scale-factor": "1",
-    "--overlay-translucency": "90%",
+    "--overlay-translucency": "95%",
     "--overlay-effect": "blur({blurs.lg})",
     "--backdrop-effect": "none"
   },
@@ -2589,7 +2589,7 @@ var dialogSlotRecipe = (0, import_react31.defineSlotRecipe)({
       top: 0,
       w: "100vw",
       h: "100dvh",
-      zIndex: "modal",
+      zIndex: "calc(var(--z-index) - 1)",
       _open: {
         animationName: "fade-in",
         animationDuration: "slow"
@@ -2619,7 +2619,6 @@ var dialogSlotRecipe = (0, import_react31.defineSlotRecipe)({
       outline: 0,
       textStyle: "sm",
       my: "var(--dialog-margin, var(--dialog-base-margin))",
-      "--dialog-z-index": "zIndex.layer-4",
       zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
       layerStyle: "overlay",
       _open: {
@@ -2630,6 +2629,10 @@ var dialogSlotRecipe = (0, import_react31.defineSlotRecipe)({
       }
     },
     header: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
       flex: 0,
       px: "6",
       py: "4"
@@ -2655,10 +2658,6 @@ var dialogSlotRecipe = (0, import_react31.defineSlotRecipe)({
     },
     description: {
       color: "fg.muted"
-    },
-    closeTrigger: {
-      top: "4",
-      insetEnd: "4"
     }
   },
   variants: {
@@ -2811,7 +2810,7 @@ var drawerSlotRecipe = (0, import_react32.defineSlotRecipe)({
       top: 0,
       w: "100vw",
       h: "100dvh",
-      zIndex: "modal",
+      zIndex: "calc(var(--z-index) - 1)",
       _open: {
         animationName: "fade-in",
         animationDuration: "slow"
@@ -2822,6 +2821,7 @@ var drawerSlotRecipe = (0, import_react32.defineSlotRecipe)({
       }
     },
     positioner: {
+      "--drawer-z-index": "zIndex.layer-4",
       display: "flex",
       width: "100vw",
       height: "100dvh",
@@ -2829,7 +2829,7 @@ var drawerSlotRecipe = (0, import_react32.defineSlotRecipe)({
       padding: 2,
       insetInlineStart: 0,
       top: 0,
-      zIndex: "modal",
+      zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
       overscrollBehaviorY: "none"
     },
     content: {
@@ -2838,7 +2838,6 @@ var drawerSlotRecipe = (0, import_react32.defineSlotRecipe)({
       position: "relative",
       width: "100%",
       outline: 0,
-      "--drawer-z-index": "zIndex.layer-4",
       zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
       textStyle: "sm",
       maxH: "100dvh",
@@ -2854,6 +2853,10 @@ var drawerSlotRecipe = (0, import_react32.defineSlotRecipe)({
       }
     },
     header: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
       flex: 0,
       px: "6",
       py: "4"
@@ -2879,10 +2882,6 @@ var drawerSlotRecipe = (0, import_react32.defineSlotRecipe)({
     },
     description: {
       color: "fg.muted"
-    },
-    closeTrigger: {
-      top: "4",
-      insetEnd: "4"
     }
   },
   variants: {
@@ -9628,7 +9627,7 @@ var Content = (0, import_react115.forwardRef)(
   }
 );
 var CloseButton3 = (0, import_react115.forwardRef)(function DialogCloseTrigger(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react116.Dialog.CloseTrigger, { position: "absolute", ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CloseButton, { size: "sm", ref, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react116.Dialog.CloseTrigger, { ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CloseButton, { size: "sm", ref, children: props.children }) });
 });
 var CloseTrigger = import_react116.Dialog.CloseTrigger;
 var Root = import_react116.Dialog.Root;
@@ -9671,7 +9670,7 @@ var Content2 = (0, import_react117.forwardRef)(
 );
 var CloseButton4 = (0, import_react117.forwardRef)(function DrawerCloseTrigger(props, ref) {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react118.Drawer.CloseTrigger, { position: "absolute", ...rest, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseButton, { size: "sm", ref, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react118.Drawer.CloseTrigger, { ...rest, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CloseButton, { size: "sm", ref, children }) });
 });
 var CloseTrigger2 = import_react118.Drawer.CloseTrigger;
 var Trigger2 = import_react118.Drawer.Trigger;
@@ -10360,10 +10359,10 @@ function IconBase(props) {
 
 // ../../node_modules/react-icons/lu/index.mjs
 function LuEyeOff(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }, "child": [] }, { "tag": "path", "attr": { "d": "M14.084 14.158a3 3 0 0 1-4.242-4.242" }, "child": [] }, { "tag": "path", "attr": { "d": "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }, "child": [] }, { "tag": "path", "attr": { "d": "m2 2 20 20" }, "child": [] }] })(props);
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M9.88 9.88a3 3 0 1 0 4.24 4.24" }, "child": [] }, { "tag": "path", "attr": { "d": "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }, "child": [] }, { "tag": "path", "attr": { "d": "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }, "child": [] }, { "tag": "line", "attr": { "x1": "2", "x2": "22", "y1": "2", "y2": "22" }, "child": [] }] })(props);
 }
 function LuEye(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
 }
 
 // src/components/password-input/password-input.tsx

package/dist/index.js

@@ -11,24 +11,24 @@ import {
 import {
   colors
 } from "./chunk-3MO37LYW.js";
-import {
-  namespace_exports
-} from "./chunk-3JZ42NYM.js";
 import {
   SegmentedControl
 } from "./chunk-SKXSBAOS.js";
 import {
-  Status
-} from "./chunk-YKSY7UOM.js";
-import {
-  steps_exports
-} from "./chunk-VZG7EJ64.js";
+  namespace_exports
+} from "./chunk-3JZ42NYM.js";
 import {
   sidebar_exports,
   useSidebar,
   useSidebarItemStyles,
   useSidebarStyles
 } from "./chunk-U23VDAWJ.js";
+import {
+  Status
+} from "./chunk-YKSY7UOM.js";
+import {
+  steps_exports
+} from "./chunk-VZG7EJ64.js";
 import {
   Switch
 } from "./chunk-SA3OGTOO.js";
@@ -38,48 +38,44 @@ import {
   useTabsStyles
 } from "./chunk-IVLUAUU5.js";
 import {
-  navbar_exports
-} from "./chunk-Q6SNJJO2.js";
+  NumberInput
+} from "./chunk-S5J6REMC.js";
+import {
+  pagination_exports
+} from "./chunk-MLJN6IOJ.js";
 import {
   PasswordInput
-} from "./chunk-K2SPPLAY.js";
+} from "./chunk-CD2JUFI2.js";
 import {
   Persona,
   PersonaAvatar,
   defaultPresenceOptions
 } from "./chunk-GWC5GCMW.js";
-import {
-  popover_exports
-} from "./chunk-KE5AC3TZ.js";
 import {
   PinInput
 } from "./chunk-2EUACKRH.js";
+import {
+  popover_exports
+} from "./chunk-KE5AC3TZ.js";
 import {
   Radio,
   RadioGroup
 } from "./chunk-WYLMBMAH.js";
-import {
-  menu_exports
-} from "./chunk-KFXNVUEZ.js";
 import {
   SearchInput
 } from "./chunk-46ISJZBS.js";
-import {
-  EmptyState
-} from "./chunk-NGGISORT.js";
 import {
   IconBadge
 } from "./chunk-I2RXEKTB.js";
-import "./chunk-KTLWEUNW.js";
+import {
+  IconButton
+} from "./chunk-MS2ELLDY.js";
+import {
+  InputGroup
+} from "./chunk-PKI6YH2V.js";
 import {
   Link
 } from "./chunk-TZBAM4AD.js";
-import {
-  SuiContext,
-  SuiProvider,
-  useLink,
-  useSui
-} from "./chunk-O2WVT2BP.js";
 import {
   loading_overlay_exports,
   useLoadingOverlayStyles
@@ -88,14 +84,18 @@ import {
   Spinner
 } from "./chunk-32JGENDB.js";
 import {
-  pagination_exports
-} from "./chunk-MLJN6IOJ.js";
+  menu_exports
+} from "./chunk-KFXNVUEZ.js";
+import "./chunk-KTLWEUNW.js";
 import {
-  NumberInput
-} from "./chunk-S5J6REMC.js";
+  navbar_exports
+} from "./chunk-Q6SNJJO2.js";
 import {
-  InputGroup
-} from "./chunk-PKI6YH2V.js";
+  SuiContext,
+  SuiProvider,
+  useLink,
+  useSui
+} from "./chunk-O2WVT2BP.js";
 import {
   Command
 } from "./chunk-UASXI64E.js";
@@ -105,11 +105,14 @@ import {
 } from "./chunk-52XM5VXJ.js";
 import {
   dialog_exports
-} from "./chunk-CZVNG73V.js";
+} from "./chunk-32DD6PHF.js";
 import {
   drawer_exports
-} from "./chunk-6MMPBMKN.js";
+} from "./chunk-LTVFG6UC.js";
 import "./chunk-JMYI6YXR.js";
+import {
+  EmptyState
+} from "./chunk-NGGISORT.js";
 import {
   file_upload_exports
 } from "./chunk-GRUMUCSL.js";
@@ -120,9 +123,6 @@ import "./chunk-4TPVIHNO.js";
 import {
   grid_list_exports
 } from "./chunk-NSD5HRIP.js";
-import {
-  IconButton
-} from "./chunk-MS2ELLDY.js";
 import {
   AppShell
 } from "./chunk-6ZNR6N2K.js";
@@ -279,7 +279,7 @@ var globalCss = defineGlobalStyles({
     // '--radius-indicator': '1',
     "--radius-full": "9999px",
     "--scale-factor": "1",
-    "--overlay-translucency": "90%",
+    "--overlay-translucency": "95%",
     "--overlay-effect": "blur({blurs.lg})",
     "--backdrop-effect": "none"
   },
@@ -2642,7 +2642,7 @@ var dialogSlotRecipe = defineSlotRecipe4({
       top: 0,
       w: "100vw",
       h: "100dvh",
-      zIndex: "modal",
+      zIndex: "calc(var(--z-index) - 1)",
       _open: {
         animationName: "fade-in",
         animationDuration: "slow"
@@ -2672,7 +2672,6 @@ var dialogSlotRecipe = defineSlotRecipe4({
       outline: 0,
       textStyle: "sm",
       my: "var(--dialog-margin, var(--dialog-base-margin))",
-      "--dialog-z-index": "zIndex.layer-4",
       zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0))",
       layerStyle: "overlay",
       _open: {
@@ -2683,6 +2682,10 @@ var dialogSlotRecipe = defineSlotRecipe4({
       }
     },
     header: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
       flex: 0,
       px: "6",
       py: "4"
@@ -2708,10 +2711,6 @@ var dialogSlotRecipe = defineSlotRecipe4({
     },
     description: {
       color: "fg.muted"
-    },
-    closeTrigger: {
-      top: "4",
-      insetEnd: "4"
     }
   },
   variants: {
@@ -2864,7 +2863,7 @@ var drawerSlotRecipe = defineSlotRecipe5({
       top: 0,
       w: "100vw",
       h: "100dvh",
-      zIndex: "modal",
+      zIndex: "calc(var(--z-index) - 1)",
       _open: {
         animationName: "fade-in",
         animationDuration: "slow"
@@ -2875,6 +2874,7 @@ var drawerSlotRecipe = defineSlotRecipe5({
       }
     },
     positioner: {
+      "--drawer-z-index": "zIndex.layer-4",
       display: "flex",
       width: "100vw",
       height: "100dvh",
@@ -2882,7 +2882,7 @@ var drawerSlotRecipe = defineSlotRecipe5({
       padding: 2,
       insetInlineStart: 0,
       top: 0,
-      zIndex: "modal",
+      zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
       overscrollBehaviorY: "none"
     },
     content: {
@@ -2891,7 +2891,6 @@ var drawerSlotRecipe = defineSlotRecipe5({
       position: "relative",
       width: "100%",
       outline: 0,
-      "--drawer-z-index": "zIndex.layer-4",
       zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0))",
       textStyle: "sm",
       maxH: "100dvh",
@@ -2907,6 +2906,10 @@ var drawerSlotRecipe = defineSlotRecipe5({
       }
     },
     header: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
       flex: 0,
       px: "6",
       py: "4"
@@ -2932,10 +2935,6 @@ var drawerSlotRecipe = defineSlotRecipe5({
     },
     description: {
       color: "fg.muted"
-    },
-    closeTrigger: {
-      top: "4",
-      insetEnd: "4"
     }
   },
   variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-alpha.26",
+  "version": "3.0.0-alpha.28",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {