@lets-events/react 9.0.0 → 10.0.1

package/dist/index.js

@@ -1049,9 +1049,6 @@ __export(index_exports, {
   Icon: () => Icon,
   InputStyled: () => InputStyled,
   Modal: () => Modal,
-  ModalContentStyled: () => ModalContentStyled,
-  ModalStyled: () => ModalStyled,
-  ModalTitleStyled: () => ModalTitleStyled,
   RadioGroup: () => RadioGroup,
   RadioGroupStyled: () => RadioGroupStyled,
   RadioItem: () => RadioItem,
@@ -3612,12 +3609,6 @@ var Box = import_themes13.Box;
 
 // src/components/Modal.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var ModalStyled = styled("div", {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$13",
-  borderRadius: "$sm"
-});
 var ModalContentStyled = styled(import_radix_ui.Dialog.Content, {
   fontFamily: "$default",
   lineHeight: "$base",
@@ -3626,7 +3617,20 @@ var ModalContentStyled = styled(import_radix_ui.Dialog.Content, {
   width: "100%",
   border: "1px solid $neutral",
   borderRadius: "$2xl",
-  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)"
+  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  backgroundColor: "$dark50",
+  zIndex: "10001"
+});
+var ModalOverlay = styled(import_radix_ui.Dialog.Overlay, {
+  position: "fixed",
+  inset: 0,
+  opacity: 1,
+  backgroundColor: "rgba(0, 0, 0, .5)",
+  zIndex: "10000"
 });
 var ModalHeaderStyled = styled("div", {
   borderBottom: "1px solid $neutral300",
@@ -3642,13 +3646,6 @@ var ModalIconClose = styled(Icon_default, {
   right: "$24",
   cursor: "pointer"
 });
-var ModalFooterStyled = styled("div", {
-  borderTop: "1px solid $neutral300",
-  padding: "$16 $24",
-  ".modal-footer-flex": {
-    justifyContent: "flex-end"
-  }
-});
 var ModalTitleStyled = styled(import_radix_ui.Dialog.Title, {
   fontFamily: "$default",
   lineHeight: "$base",
@@ -3658,20 +3655,10 @@ var ModalTitleStyled = styled(import_radix_ui.Dialog.Title, {
   textTransform: "uppercase"
 });
 function Modal(_a) {
-  var _b = _a, {
-    children,
-    title,
-    trigger,
-    onAction
-  } = _b, props = __objRest(_b, [
-    "children",
-    "title",
-    "trigger",
-    "onAction"
-  ]);
+  var _b = _a, { children, title, trigger } = _b, props = __objRest(_b, ["children", "title", "trigger"]);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_radix_ui.Dialog.Root, __spreadProps(__spreadValues({}, props), { children: [
     trigger && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Overlay, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalContentStyled, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalOverlay, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalContentStyled, { children: [
       title && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ModalHeaderStyled, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalTitleStyled, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { typography: "headline6", fontWeight: "medium", children: title }) }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui.Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalIconClose, { name: "close", size: "xl" }) })
@@ -8994,9 +8981,6 @@ function Section(_a) {
   Icon,
   InputStyled,
   Modal,
-  ModalContentStyled,
-  ModalStyled,
-  ModalTitleStyled,
   RadioGroup,
   RadioGroupStyled,
   RadioItem,

package/dist/index.mjs

@@ -3531,12 +3531,6 @@ var Box = BoxRadix;
 
 // src/components/Modal.tsx
 import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
-var ModalStyled = styled("div", {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$13",
-  borderRadius: "$sm"
-});
 var ModalContentStyled = styled(ModalRadix.Content, {
   fontFamily: "$default",
   lineHeight: "$base",
@@ -3545,7 +3539,20 @@ var ModalContentStyled = styled(ModalRadix.Content, {
   width: "100%",
   border: "1px solid $neutral",
   borderRadius: "$2xl",
-  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)"
+  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  backgroundColor: "$dark50",
+  zIndex: "10001"
+});
+var ModalOverlay = styled(ModalRadix.Overlay, {
+  position: "fixed",
+  inset: 0,
+  opacity: 1,
+  backgroundColor: "rgba(0, 0, 0, .5)",
+  zIndex: "10000"
 });
 var ModalHeaderStyled = styled("div", {
   borderBottom: "1px solid $neutral300",
@@ -3561,13 +3568,6 @@ var ModalIconClose = styled(Icon_default, {
   right: "$24",
   cursor: "pointer"
 });
-var ModalFooterStyled = styled("div", {
-  borderTop: "1px solid $neutral300",
-  padding: "$16 $24",
-  ".modal-footer-flex": {
-    justifyContent: "flex-end"
-  }
-});
 var ModalTitleStyled = styled(ModalRadix.Title, {
   fontFamily: "$default",
   lineHeight: "$base",
@@ -3577,20 +3577,10 @@ var ModalTitleStyled = styled(ModalRadix.Title, {
   textTransform: "uppercase"
 });
 function Modal(_a) {
-  var _b = _a, {
-    children,
-    title,
-    trigger,
-    onAction
-  } = _b, props = __objRest(_b, [
-    "children",
-    "title",
-    "trigger",
-    "onAction"
-  ]);
+  var _b = _a, { children, title, trigger } = _b, props = __objRest(_b, ["children", "title", "trigger"]);
   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(ModalRadix.Overlay, { children: /* @__PURE__ */ jsxs4(ModalContentStyled, { children: [
+    /* @__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" }) })
@@ -8912,9 +8902,6 @@ export {
   Icon,
   InputStyled,
   Modal,
-  ModalContentStyled,
-  ModalStyled,
-  ModalTitleStyled,
   RadioGroup,
   RadioGroupStyled,
   RadioItem,

package/package.json

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

package/src/components/Modal.tsx

@@ -5,14 +5,7 @@ import Icon from "./Icon";
 import { Box } from "./Box";
 import { Text } from "./Text";
 
-export const ModalStyled = styled("div", {
-  fontFamily: "$default",
-  lineHeight: "$base",
-  fontSize: "$13",
-  borderRadius: "$sm",
-});
-
-export const ModalContentStyled = styled(ModalRadix.Content, {
+const ModalContentStyled = styled(ModalRadix.Content, {
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$13",
@@ -22,6 +15,20 @@ export const ModalContentStyled = styled(ModalRadix.Content, {
   borderRadius: "$2xl",
   boxShadow:
     "0px 4px 4px 0px rgba(35, 53, 67, 0.08), 0px 2px 4px 0px rgba(35, 53, 67, 0.16)",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  backgroundColor: "$dark50",
+  zIndex: '10001'
+});
+
+const ModalOverlay = styled(ModalRadix.Overlay, {
+  position: "fixed",
+  inset: 0,
+  opacity: 1,
+  backgroundColor: "rgba(0, 0, 0, .5)",
+  zIndex: '10000'
 });
 
 const ModalHeaderStyled = styled("div", {
@@ -40,16 +47,7 @@ const ModalIconClose = styled(Icon, {
   cursor: "pointer",
 });
 
-const ModalFooterStyled = styled("div", {
-  borderTop: "1px solid $neutral300",
-  padding: "$16 $24",
-
-  ".modal-footer-flex": {
-    justifyContent: "flex-end",
-  },
-});
-
-export const ModalTitleStyled = styled(ModalRadix.Title, {
+const ModalTitleStyled = styled(ModalRadix.Title, {
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$18",
@@ -59,28 +57,17 @@ export const ModalTitleStyled = styled(ModalRadix.Title, {
 });
 
 export type ModalProps = ComponentProps<typeof ModalRadix.Root> & {
-  trigger: React.ReactNode;
+  trigger?: React.ReactNode;
   title?: string;
   children: React.ReactNode;
-  cancel?: boolean;
-  cancelText?: string;
-  action?: boolean;
-  actionText?: string;
-  onAction?: () => void;
 };
 
-export function Modal({
-  children,
-  title,
-  trigger,
-  onAction,
-  ...props
-}: ModalProps) {
+export function Modal({ children, title, trigger, ...props }: ModalProps) {
   return (
     <ModalRadix.Root {...props}>
       {trigger && <ModalRadix.Trigger asChild>{trigger}</ModalRadix.Trigger>}
       <ModalRadix.Portal>
-        <ModalRadix.Overlay>
+        <ModalOverlay>
           <ModalContentStyled>
             {title && (
               <ModalHeaderStyled>
@@ -96,7 +83,7 @@ export function Modal({
             )}
             <Box>{children}</Box>
           </ModalContentStyled>
-        </ModalRadix.Overlay>
+        </ModalOverlay>
       </ModalRadix.Portal>
     </ModalRadix.Root>
   );