@shoplflow/base 0.30.4 → 0.30.6

package/dist/index.cjs

@@ -187,12 +187,12 @@ var BackDropStyled = styled6__default.default(framerMotion.motion.div)`
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 20000;
+  z-index: ${({ zIndex }) => zIndex || 2e4};
   width: 100%;
   height: 100%;
   background: rgba(51, 51, 51, 0.6);
 `;
-var BackDrop = ({ children }) => {
+var BackDrop = ({ children, zIndex }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BackDropStyled,
     {
@@ -201,6 +201,7 @@ var BackDrop = ({ children }) => {
       animate: "animate",
       exit: "exit",
       "data-shoplflow": "BackDrop",
+      zIndex,
       children
     }
   );
@@ -1053,12 +1054,12 @@ exports.useHandleModal = () => {
 };
 var ModalProvider = ({ children }) => {
   const [openedModals, setOpenedModals] = React3.useState([]);
-  const addModal = (component, id) => {
+  const addModal = (component, id, zIndex) => {
     setOpenedModals((modals) => {
       if (modals) {
-        return [...modals, { component, id }];
+        return [...modals, { component, id, zIndex }];
       }
-      return [{ component, id }];
+      return [{ component, id, zIndex }];
     });
   };
   const removeModal = (props) => {
@@ -2417,7 +2418,7 @@ var Container3 = styled6__default.default.button`
 exports.CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
 var Checkbox = React3.forwardRef(
   (_a, ref) => {
-    var _b = _a, { defaultSelected, isSelected, disabled, onMouseEnter, onMouseLeave, styleVar = "PRIMARY", id } = _b, rest = __objRest(_b, ["defaultSelected", "isSelected", "disabled", "onMouseEnter", "onMouseLeave", "styleVar", "id"]);
+    var _b = _a, { defaultSelected, isSelected, disabled, onMouseEnter, onClick, onMouseLeave, styleVar = "PRIMARY", id } = _b, rest = __objRest(_b, ["defaultSelected", "isSelected", "disabled", "onMouseEnter", "onClick", "onMouseLeave", "styleVar", "id"]);
     const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
     const [isHovered, toggleHovered] = React3.useState(false);
     const handleMouseLeave = (e) => {
@@ -2428,10 +2429,11 @@ var Checkbox = React3.forwardRef(
       toggleHovered(true);
       onMouseEnter && onMouseEnter(e);
     };
-    const handleClick = () => {
+    const handleClick = (e) => {
       if (disabled) {
         return;
       }
+      onClick && onClick(e);
       toggleSelected();
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4160,7 +4162,7 @@ var SpaceMarginWrapper = styled6__default.default(framerMotion.motion.div)`
 var ModalPortal = () => {
   const modal = React3.useContext(exports.ModalContext);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactDom$1.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: modal.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(BackDrop_default, { children: /* @__PURE__ */ jsxRuntime.jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: modal.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(BackDrop_default, { zIndex: item.zIndex, children: /* @__PURE__ */ jsxRuntime.jsx(SpaceMarginWrapper, { children: item.component }) }, index)) }),
     document.body
   ) });
 };