@lets-events/react 12.2.10 → 12.2.12

package/dist/index.mjs

@@ -3620,16 +3620,44 @@ var ModalTitleStyled = styled(ModalRadix.Title, {
   textTransform: "uppercase"
 });
 function Modal(_a) {
-  var _b = _a, { children, title, trigger } = _b, props = __objRest(_b, ["children", "title", "trigger"]);
+  var _b = _a, {
+    children,
+    title,
+    trigger,
+    zIndex,
+    maxWidth
+  } = _b, props = __objRest(_b, [
+    "children",
+    "title",
+    "trigger",
+    "zIndex",
+    "maxWidth"
+  ]);
   return /* @__PURE__ */ jsxs4(ModalRadix.Root, __spreadProps(__spreadValues({}, props), { children: [
     trigger && /* @__PURE__ */ jsx13(ModalRadix.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx13(ModalRadix.Portal, { children: /* @__PURE__ */ jsx13(ModalOverlay, { children: /* @__PURE__ */ jsxs4(ModalContentStyled, { children: [
-      title && /* @__PURE__ */ jsxs4(ModalHeaderStyled, { children: [
-        /* @__PURE__ */ jsx13(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ jsx13(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
-        /* @__PURE__ */ jsx13(ModalRadix.Close, { asChild: true, children: /* @__PURE__ */ jsx13(ModalIconClose, { name: "close", size: "xl" }) })
-      ] }),
-      /* @__PURE__ */ jsx13(Box, { children })
-    ] }) }) })
+    /* @__PURE__ */ jsx13(ModalRadix.Portal, { children: /* @__PURE__ */ jsx13(
+      ModalOverlay,
+      {
+        css: {
+          zIndex
+        },
+        children: /* @__PURE__ */ jsxs4(
+          ModalContentStyled,
+          {
+            css: {
+              maxWidth
+            },
+            children: [
+              title && /* @__PURE__ */ jsxs4(ModalHeaderStyled, { children: [
+                /* @__PURE__ */ jsx13(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ jsx13(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
+                /* @__PURE__ */ jsx13(ModalRadix.Close, { asChild: true, children: /* @__PURE__ */ jsx13(ModalIconClose, { name: "close", size: "xl" }) })
+              ] }),
+              /* @__PURE__ */ jsx13(Box, { children })
+            ]
+          }
+        )
+      }
+    ) })
   ] }));
 }
 
@@ -8031,7 +8059,8 @@ function Drawer({
   title,
   children,
   goBackIcon,
-  goBackAction
+  goBackAction,
+  zIndex
 }) {
   if (!isOpen) return null;
   const drawerContainerRef = useRef4(null);
@@ -8072,29 +8101,37 @@ function Drawer({
     const isDropdownOpen = target.closest("[data-radix-popper-content-wrapper]") || target.closest('[role="dialog"]') || target.closest('[data-state="open"]') || target.closest("[data-radix-dropdown-menu-content]") || target.closest("[data-radix-dropdown-menu-root]") || target.closest("[data-radix-dropdown-menu-trigger]") || target.closest("[data-radix-dropdown-menu-portal]") || target.closest("[data-radix-dropdown-menu-item]") || target.closest("[data-radix-dropdown-menu-checkbox-item]") || target.closest("[data-radix-dropdown-menu-radio-item]") || target.closest("[data-radix-dropdown-menu-separator]") || target.closest("[data-radix-dropdown-menu-label]") || target.closest("[data-radix-dropdown-menu-group]") || target.closest("[data-radix-dropdown-menu-sub]") || target.closest("[data-radix-dropdown-menu-sub-trigger]") || target.closest("[data-radix-dropdown-menu-sub-content]") || target.closest("[data-radix-dropdown-menu-radio-group]");
     const shouldPreventClose = isDropdownOpen || target.closest("[data-radix-dropdown-menu-root]") || target.closest("[data-radix-dropdown-menu-trigger]") || target.closest("[data-radix-dropdown-menu-content]") || target.closest("[data-radix-dropdown-menu-portal]") || target.closest("[data-radix-dropdown-menu-item]") || target.closest("[data-radix-dropdown-menu-checkbox-item]") || target.closest("[data-radix-dropdown-menu-radio-item]") || target.closest("[data-radix-dropdown-menu-separator]") || target.closest("[data-radix-dropdown-menu-label]") || target.closest("[data-radix-dropdown-menu-group]") || target.closest("[data-radix-dropdown-menu-sub]") || target.closest("[data-radix-dropdown-menu-sub-trigger]") || target.closest("[data-radix-dropdown-menu-sub-content]") || target.closest("[data-radix-dropdown-menu-radio-group]");
     if (!shouldPreventClose) {
-      onClose();
+      onClose == null ? void 0 : onClose();
     }
   });
-  return /* @__PURE__ */ jsx16(DrawerOverlayStyled, { children: /* @__PURE__ */ jsxs7(
-    DrawerContainerStyled,
+  return /* @__PURE__ */ jsx16(
+    DrawerOverlayStyled,
     {
-      ref: drawerContainerRef,
-      style: {
-        width: width != null ? width : "34.25rem",
-        backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
+      css: {
+        zIndex
       },
-      children: [
-        /* @__PURE__ */ jsxs7(DrawerHeaderDiv, { children: [
-          /* @__PURE__ */ jsxs7(Flex2, { gap: 8, align: "center", children: [
-            goBackIcon && goBackIcon && /* @__PURE__ */ jsx16(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
-            /* @__PURE__ */ jsx16(DrawerHeaderTitle, { children: title })
-          ] }),
-          /* @__PURE__ */ jsx16(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ jsx16(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
-        ] }),
-        children
-      ]
+      children: /* @__PURE__ */ jsxs7(
+        DrawerContainerStyled,
+        {
+          ref: drawerContainerRef,
+          style: {
+            width: width != null ? width : "34.25rem",
+            backgroundColor: colors[backgroundColor != null ? backgroundColor : "neutral50"]
+          },
+          children: [
+            /* @__PURE__ */ jsxs7(DrawerHeaderDiv, { children: [
+              /* @__PURE__ */ jsxs7(Flex2, { gap: 8, align: "center", children: [
+                goBackIcon && goBackIcon && /* @__PURE__ */ jsx16(GoBackButtonStyled, { type: "button", onClick: goBackAction, children: goBackIcon }),
+                /* @__PURE__ */ jsx16(DrawerHeaderTitle, { children: title })
+              ] }),
+              /* @__PURE__ */ jsx16(DrawerHeaderCloseButton, { onClick: onClose, children: /* @__PURE__ */ jsx16(Icon_default, { size: "xl", color: "$dark600", name: "xmark" }) })
+            ] }),
+            children
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 
 // src/components/TimePicker.tsx
@@ -9673,6 +9710,13 @@ var MultiSelect = React9.forwardRef(
   }
 );
 
+// src/components/Divider.tsx
+var Divider = styled("div", {
+  backgroundColor: "$dark300",
+  width: "100%",
+  height: "1px"
+});
+
 // src/components/Grid.tsx
 import { Grid as GridRadix } from "@radix-ui/themes";
 import { jsx as jsx27 } from "react/jsx-runtime";
@@ -12850,6 +12894,7 @@ export {
   Container,
   ContainerStyled,
   CountryFormField,
+  Divider,
   Drawer,
   DropdownMenu2 as DropdownMenu,
   DropdownMenuItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "12.2.10",
+  "version": "12.2.12",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",