glitchgrab 1.6.2 → 1.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +333 -325
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +333 -325
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -528,7 +528,7 @@ function GlitchgrabProvider(props) {
528
528
  if (!props.token) return /* @__PURE__ */ jsx(Fragment, { children: props.children });
529
529
  const resolvedProps = {
530
530
  ...props,
531
- baseUrl: props.baseUrl || (typeof window !== "undefined" ? window.location.origin : DEFAULT_BASE_URL2)
531
+ baseUrl: props.baseUrl || DEFAULT_BASE_URL2
532
532
  };
533
533
  try {
534
534
  return /* @__PURE__ */ jsx(GlitchgrabProviderInner, { ...resolvedProps });
@@ -539,6 +539,7 @@ function GlitchgrabProvider(props) {
539
539
 
540
540
  // src/report-button.tsx
541
541
  import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
542
+ import { createPortal } from "react-dom";
542
543
  import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
543
544
  function useGlitchgrabSafe() {
544
545
  try {
@@ -678,311 +679,315 @@ function ReportButton({
678
679
  isTop
679
680
  }
680
681
  ),
681
- isOpen && /* @__PURE__ */ jsx2(
682
- "div",
683
- {
684
- style: {
685
- position: "fixed",
686
- inset: 0,
687
- zIndex: 2147483647,
688
- display: "flex",
689
- alignItems: "center",
690
- justifyContent: "center",
691
- backgroundColor: "rgba(0,0,0,0.5)"
692
- },
693
- onClick: () => {
694
- if (!previewOpen) setIsOpen(false);
695
- },
696
- children: /* @__PURE__ */ jsxs(
697
- "div",
698
- {
699
- ref: modalRef,
700
- onClick: (e) => e.stopPropagation(),
701
- style: {
702
- position: children ? "relative" : "fixed",
703
- ...modalPositionStyles,
704
- zIndex: 2147483647,
705
- width: "340px",
706
- maxWidth: "calc(100% - 32px)",
707
- backgroundColor: t.bg,
708
- borderRadius: "12px",
709
- boxShadow: "0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1)",
710
- fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
711
- overflow: "hidden",
712
- color: t.text,
713
- isolation: "isolate"
714
- },
715
- children: [
716
- /* @__PURE__ */ jsx2(
717
- "div",
718
- {
719
- style: {
720
- padding: "16px 16px 12px",
721
- borderBottom: `1px solid ${t.border}`
722
- },
723
- children: /* @__PURE__ */ jsxs(
724
- "div",
725
- {
726
- style: {
727
- display: "flex",
728
- justifyContent: "space-between",
729
- alignItems: "center"
730
- },
731
- children: [
732
- /* @__PURE__ */ jsx2(
733
- "span",
734
- {
735
- style: {
736
- fontSize: "15px",
737
- fontWeight: 600,
738
- color: t.text
739
- },
740
- children: "Report a Bug"
741
- }
742
- ),
743
- /* @__PURE__ */ jsx2(
744
- "button",
745
- {
746
- type: "button",
747
- onClick: () => setIsOpen(false),
748
- style: {
749
- background: "none",
750
- border: "none",
751
- cursor: "pointer",
752
- padding: "4px",
753
- display: "flex",
754
- alignItems: "center",
755
- justifyContent: "center"
756
- },
757
- "aria-label": "Close",
758
- children: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { display: "block" }, children: /* @__PURE__ */ jsx2("path", { d: "M4 4L12 12M12 4L4 12", stroke: t.textMuted, strokeWidth: "2", strokeLinecap: "round" }) })
759
- }
760
- )
761
- ]
762
- }
763
- )
764
- }
765
- ),
766
- /* @__PURE__ */ jsx2("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ jsx2(
767
- "div",
768
- {
769
- style: {
770
- textAlign: "center",
771
- padding: "20px 0",
772
- color: t.accent,
773
- fontSize: "14px",
774
- fontWeight: 500
775
- },
776
- children: "Bug report sent. Thank you!"
777
- }
778
- ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
779
- screenshot && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px", position: "relative" }, children: [
780
- /* @__PURE__ */ jsx2(
781
- "img",
782
- {
783
- src: screenshot,
784
- alt: "Page screenshot",
785
- onClick: () => setPreviewOpen(true),
786
- style: {
787
- width: "100%",
788
- borderRadius: "6px",
789
- border: `1px solid ${t.border}`,
790
- maxHeight: "120px",
791
- objectFit: "cover",
792
- objectPosition: "top",
793
- cursor: "pointer"
794
- }
795
- }
796
- ),
797
- /* @__PURE__ */ jsx2(
798
- "button",
799
- {
800
- type: "button",
801
- onClick: () => setScreenshot(null),
802
- style: {
803
- position: "absolute",
804
- top: "4px",
805
- right: "4px",
806
- background: "rgba(0,0,0,0.6)",
807
- border: "none",
808
- borderRadius: "50%",
809
- width: "20px",
810
- height: "20px",
811
- cursor: "pointer",
812
- display: "flex",
813
- alignItems: "center",
814
- justifyContent: "center"
815
- },
816
- "aria-label": "Remove screenshot",
817
- children: /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx2("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round" }) })
818
- }
819
- ),
820
- /* @__PURE__ */ jsxs(
821
- "div",
822
- {
823
- style: {
824
- position: "absolute",
825
- bottom: "4px",
826
- left: "6px",
827
- right: "6px",
828
- display: "flex",
829
- justifyContent: "space-between",
830
- alignItems: "center"
831
- },
832
- children: [
833
- /* @__PURE__ */ jsxs(
834
- "span",
835
- {
836
- style: {
837
- background: "rgba(0,0,0,0.6)",
838
- color: "#fff",
839
- fontSize: "10px",
840
- padding: "2px 6px",
841
- borderRadius: "4px"
842
- },
843
- children: [
844
- "Screenshot (",
845
- Math.round(screenshot.length * 0.75 / 1024),
846
- "KB) \u2014 click to preview"
847
- ]
848
- }
849
- ),
850
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
682
+ isOpen && typeof document !== "undefined" && createPortal(
683
+ /* @__PURE__ */ jsx2(
684
+ "div",
685
+ {
686
+ style: {
687
+ position: "fixed",
688
+ inset: 0,
689
+ zIndex: 2147483647,
690
+ display: "flex",
691
+ alignItems: "center",
692
+ justifyContent: "center",
693
+ backgroundColor: "rgba(0,0,0,0.5)",
694
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
695
+ },
696
+ onClick: () => {
697
+ if (!previewOpen) setIsOpen(false);
698
+ },
699
+ children: /* @__PURE__ */ jsxs(
700
+ "div",
701
+ {
702
+ ref: modalRef,
703
+ onClick: (e) => e.stopPropagation(),
704
+ style: {
705
+ position: children ? "relative" : "fixed",
706
+ ...modalPositionStyles,
707
+ zIndex: 2147483647,
708
+ width: "340px",
709
+ maxWidth: "calc(100% - 32px)",
710
+ backgroundColor: t.bg,
711
+ borderRadius: "12px",
712
+ boxShadow: "0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1)",
713
+ fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
714
+ overflow: "hidden",
715
+ color: t.text,
716
+ isolation: "isolate"
717
+ },
718
+ children: [
719
+ /* @__PURE__ */ jsx2(
720
+ "div",
721
+ {
722
+ style: {
723
+ padding: "16px 16px 12px",
724
+ borderBottom: `1px solid ${t.border}`
725
+ },
726
+ children: /* @__PURE__ */ jsxs(
727
+ "div",
728
+ {
729
+ style: {
730
+ display: "flex",
731
+ justifyContent: "space-between",
732
+ alignItems: "center"
733
+ },
734
+ children: [
851
735
  /* @__PURE__ */ jsx2(
852
- "button",
736
+ "span",
853
737
  {
854
- type: "button",
855
- onClick: () => {
856
- var _a2;
857
- return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
858
- },
859
738
  style: {
860
- background: t.accent,
861
- color: t.accentText,
862
- fontSize: "10px",
863
- padding: "3px 8px",
864
- borderRadius: "4px",
865
- border: "none",
866
- cursor: "pointer",
867
- fontWeight: 600
739
+ fontSize: "15px",
740
+ fontWeight: 600,
741
+ color: t.text
868
742
  },
869
- children: "Upload"
743
+ children: "Report a Bug"
870
744
  }
871
745
  ),
872
746
  /* @__PURE__ */ jsx2(
873
747
  "button",
874
748
  {
875
749
  type: "button",
876
- onClick: retakeScreenshot,
750
+ onClick: () => setIsOpen(false),
877
751
  style: {
878
- background: t.accent,
879
- color: t.accentText,
880
- fontSize: "10px",
881
- padding: "3px 8px",
882
- borderRadius: "4px",
752
+ background: "none",
883
753
  border: "none",
884
754
  cursor: "pointer",
885
- fontWeight: 600
755
+ padding: "4px",
756
+ display: "flex",
757
+ alignItems: "center",
758
+ justifyContent: "center"
886
759
  },
887
- children: "Retake"
760
+ "aria-label": "Close",
761
+ children: /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: { display: "block" }, children: /* @__PURE__ */ jsx2("path", { d: "M4 4L12 12M12 4L4 12", stroke: t.textMuted, strokeWidth: "2", strokeLinecap: "round" }) })
888
762
  }
889
763
  )
890
- ] })
891
- ]
892
- }
893
- )
894
- ] }),
895
- !screenshot && !submitted && /* @__PURE__ */ jsx2(
896
- "button",
897
- {
898
- type: "button",
899
- onClick: () => {
900
- var _a2;
901
- return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
902
- },
903
- style: {
904
- marginBottom: "10px",
905
- padding: "10px",
906
- borderRadius: "6px",
907
- border: `1px dashed ${t.inputBorder}`,
908
- textAlign: "center",
909
- fontSize: "11px",
910
- color: t.textMuted,
911
- width: "100%",
912
- background: "none",
913
- cursor: "pointer"
914
- },
915
- children: "Click to upload a screenshot"
764
+ ]
765
+ }
766
+ )
916
767
  }
917
768
  ),
918
- /* @__PURE__ */ jsx2(
919
- "textarea",
769
+ /* @__PURE__ */ jsx2("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ jsx2(
770
+ "div",
920
771
  {
921
- value: description,
922
- onChange: (e) => setDescription(e.target.value),
923
- placeholder: "Describe what went wrong...",
924
772
  style: {
925
- width: "100%",
926
- minHeight: "100px",
927
- padding: "10px 12px",
928
- borderRadius: "8px",
929
- border: `1px solid ${t.inputBorder}`,
773
+ textAlign: "center",
774
+ padding: "20px 0",
775
+ color: t.accent,
930
776
  fontSize: "14px",
931
- fontFamily: "inherit",
932
- resize: "vertical",
933
- outline: "none",
934
- boxSizing: "border-box",
935
- color: t.text,
936
- backgroundColor: t.inputBg
937
- },
938
- onFocus: (e) => {
939
- e.target.style.borderColor = t.accent;
777
+ fontWeight: 500
940
778
  },
941
- onBlur: (e) => {
942
- e.target.style.borderColor = t.inputBorder;
943
- },
944
- autoFocus: true
779
+ children: "Bug report sent. Thank you!"
945
780
  }
946
- ),
781
+ ) : /* @__PURE__ */ jsxs(Fragment2, { children: [
782
+ screenshot && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px", position: "relative" }, children: [
783
+ /* @__PURE__ */ jsx2(
784
+ "img",
785
+ {
786
+ src: screenshot,
787
+ alt: "Page screenshot",
788
+ onClick: () => setPreviewOpen(true),
789
+ style: {
790
+ width: "100%",
791
+ borderRadius: "6px",
792
+ border: `1px solid ${t.border}`,
793
+ maxHeight: "120px",
794
+ objectFit: "cover",
795
+ objectPosition: "top",
796
+ cursor: "pointer"
797
+ }
798
+ }
799
+ ),
800
+ /* @__PURE__ */ jsx2(
801
+ "button",
802
+ {
803
+ type: "button",
804
+ onClick: () => setScreenshot(null),
805
+ style: {
806
+ position: "absolute",
807
+ top: "4px",
808
+ right: "4px",
809
+ background: "rgba(0,0,0,0.6)",
810
+ border: "none",
811
+ borderRadius: "50%",
812
+ width: "20px",
813
+ height: "20px",
814
+ cursor: "pointer",
815
+ display: "flex",
816
+ alignItems: "center",
817
+ justifyContent: "center"
818
+ },
819
+ "aria-label": "Remove screenshot",
820
+ children: /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx2("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round" }) })
821
+ }
822
+ ),
823
+ /* @__PURE__ */ jsxs(
824
+ "div",
825
+ {
826
+ style: {
827
+ position: "absolute",
828
+ bottom: "4px",
829
+ left: "6px",
830
+ right: "6px",
831
+ display: "flex",
832
+ justifyContent: "space-between",
833
+ alignItems: "center"
834
+ },
835
+ children: [
836
+ /* @__PURE__ */ jsxs(
837
+ "span",
838
+ {
839
+ style: {
840
+ background: "rgba(0,0,0,0.6)",
841
+ color: "#fff",
842
+ fontSize: "10px",
843
+ padding: "2px 6px",
844
+ borderRadius: "4px"
845
+ },
846
+ children: [
847
+ "Screenshot (",
848
+ Math.round(screenshot.length * 0.75 / 1024),
849
+ "KB) \u2014 click to preview"
850
+ ]
851
+ }
852
+ ),
853
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
854
+ /* @__PURE__ */ jsx2(
855
+ "button",
856
+ {
857
+ type: "button",
858
+ onClick: () => {
859
+ var _a2;
860
+ return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
861
+ },
862
+ style: {
863
+ background: t.accent,
864
+ color: t.accentText,
865
+ fontSize: "10px",
866
+ padding: "3px 8px",
867
+ borderRadius: "4px",
868
+ border: "none",
869
+ cursor: "pointer",
870
+ fontWeight: 600
871
+ },
872
+ children: "Upload"
873
+ }
874
+ ),
875
+ /* @__PURE__ */ jsx2(
876
+ "button",
877
+ {
878
+ type: "button",
879
+ onClick: retakeScreenshot,
880
+ style: {
881
+ background: t.accent,
882
+ color: t.accentText,
883
+ fontSize: "10px",
884
+ padding: "3px 8px",
885
+ borderRadius: "4px",
886
+ border: "none",
887
+ cursor: "pointer",
888
+ fontWeight: 600
889
+ },
890
+ children: "Retake"
891
+ }
892
+ )
893
+ ] })
894
+ ]
895
+ }
896
+ )
897
+ ] }),
898
+ !screenshot && !submitted && /* @__PURE__ */ jsx2(
899
+ "button",
900
+ {
901
+ type: "button",
902
+ onClick: () => {
903
+ var _a2;
904
+ return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
905
+ },
906
+ style: {
907
+ marginBottom: "10px",
908
+ padding: "10px",
909
+ borderRadius: "6px",
910
+ border: `1px dashed ${t.inputBorder}`,
911
+ textAlign: "center",
912
+ fontSize: "11px",
913
+ color: t.textMuted,
914
+ width: "100%",
915
+ background: "none",
916
+ cursor: "pointer"
917
+ },
918
+ children: "Click to upload a screenshot"
919
+ }
920
+ ),
921
+ /* @__PURE__ */ jsx2(
922
+ "textarea",
923
+ {
924
+ value: description,
925
+ onChange: (e) => setDescription(e.target.value),
926
+ placeholder: "Describe what went wrong...",
927
+ style: {
928
+ width: "100%",
929
+ minHeight: "100px",
930
+ padding: "10px 12px",
931
+ borderRadius: "8px",
932
+ border: `1px solid ${t.inputBorder}`,
933
+ fontSize: "14px",
934
+ fontFamily: "inherit",
935
+ resize: "vertical",
936
+ outline: "none",
937
+ boxSizing: "border-box",
938
+ color: t.text,
939
+ backgroundColor: t.inputBg
940
+ },
941
+ onFocus: (e) => {
942
+ e.target.style.borderColor = t.accent;
943
+ },
944
+ onBlur: (e) => {
945
+ e.target.style.borderColor = t.inputBorder;
946
+ },
947
+ autoFocus: true
948
+ }
949
+ ),
950
+ /* @__PURE__ */ jsx2(
951
+ "button",
952
+ {
953
+ type: "button",
954
+ onClick: handleSubmit,
955
+ disabled: !description.trim() || isSubmitting,
956
+ style: {
957
+ marginTop: "12px",
958
+ width: "100%",
959
+ padding: "10px",
960
+ borderRadius: "8px",
961
+ border: "none",
962
+ backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
963
+ color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
964
+ fontSize: "14px",
965
+ fontWeight: 600,
966
+ cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
967
+ fontFamily: "inherit",
968
+ transition: "background-color 0.15s ease"
969
+ },
970
+ children: isSubmitting ? "Sending..." : "Send Report"
971
+ }
972
+ )
973
+ ] }) }),
947
974
  /* @__PURE__ */ jsx2(
948
- "button",
975
+ "div",
949
976
  {
950
- type: "button",
951
- onClick: handleSubmit,
952
- disabled: !description.trim() || isSubmitting,
953
977
  style: {
954
- marginTop: "12px",
955
- width: "100%",
956
- padding: "10px",
957
- borderRadius: "8px",
958
- border: "none",
959
- backgroundColor: !description.trim() || isSubmitting ? t.bgSecondary : t.accent,
960
- color: !description.trim() || isSubmitting ? t.textMuted : t.accentText,
961
- fontSize: "14px",
962
- fontWeight: 600,
963
- cursor: !description.trim() || isSubmitting ? "not-allowed" : "pointer",
964
- fontFamily: "inherit",
965
- transition: "background-color 0.15s ease"
978
+ padding: "8px 16px 10px",
979
+ borderTop: `1px solid ${t.border}`,
980
+ textAlign: "center"
966
981
  },
967
- children: isSubmitting ? "Sending..." : "Send Report"
982
+ children: /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
968
983
  }
969
984
  )
970
- ] }) }),
971
- /* @__PURE__ */ jsx2(
972
- "div",
973
- {
974
- style: {
975
- padding: "8px 16px 10px",
976
- borderTop: `1px solid ${t.border}`,
977
- textAlign: "center"
978
- },
979
- children: /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
980
- }
981
- )
982
- ]
983
- }
984
- )
985
- }
985
+ ]
986
+ }
987
+ )
988
+ }
989
+ ),
990
+ document.body
986
991
  ),
987
992
  /* @__PURE__ */ jsx2(
988
993
  "input",
@@ -994,55 +999,58 @@ function ReportButton({
994
999
  style: { display: "none" }
995
1000
  }
996
1001
  ),
997
- previewOpen && screenshot && /* @__PURE__ */ jsxs(
998
- "div",
999
- {
1000
- style: {
1001
- position: "fixed",
1002
- inset: 0,
1003
- zIndex: 2147483647,
1004
- backgroundColor: "rgba(0,0,0,0.85)",
1005
- display: "flex",
1006
- flexDirection: "column",
1007
- alignItems: "center",
1008
- justifyContent: "center",
1009
- padding: "16px",
1010
- cursor: "pointer"
1011
- },
1012
- onClick: (e) => {
1013
- e.stopPropagation();
1014
- setPreviewOpen(false);
1015
- },
1016
- onMouseDown: (e) => e.stopPropagation(),
1017
- children: [
1018
- /* @__PURE__ */ jsx2(
1019
- "img",
1020
- {
1021
- src: screenshot,
1022
- alt: "Screenshot preview",
1023
- onClick: (e) => e.stopPropagation(),
1024
- style: {
1025
- maxWidth: "100%",
1026
- maxHeight: "calc(100vh - 80px)",
1027
- borderRadius: "8px",
1028
- objectFit: "contain",
1029
- cursor: "default"
1002
+ previewOpen && screenshot && typeof document !== "undefined" && createPortal(
1003
+ /* @__PURE__ */ jsxs(
1004
+ "div",
1005
+ {
1006
+ style: {
1007
+ position: "fixed",
1008
+ inset: 0,
1009
+ zIndex: 2147483647,
1010
+ backgroundColor: "rgba(0,0,0,0.85)",
1011
+ display: "flex",
1012
+ flexDirection: "column",
1013
+ alignItems: "center",
1014
+ justifyContent: "center",
1015
+ padding: "16px",
1016
+ cursor: "pointer"
1017
+ },
1018
+ onClick: (e) => {
1019
+ e.stopPropagation();
1020
+ setPreviewOpen(false);
1021
+ },
1022
+ onMouseDown: (e) => e.stopPropagation(),
1023
+ children: [
1024
+ /* @__PURE__ */ jsx2(
1025
+ "img",
1026
+ {
1027
+ src: screenshot,
1028
+ alt: "Screenshot preview",
1029
+ onClick: (e) => e.stopPropagation(),
1030
+ style: {
1031
+ maxWidth: "100%",
1032
+ maxHeight: "calc(100vh - 80px)",
1033
+ borderRadius: "8px",
1034
+ objectFit: "contain",
1035
+ cursor: "default"
1036
+ }
1030
1037
  }
1031
- }
1032
- ),
1033
- /* @__PURE__ */ jsx2(
1034
- "span",
1035
- {
1036
- style: {
1037
- marginTop: "12px",
1038
- color: t.textMuted,
1039
- fontSize: "12px"
1040
- },
1041
- children: "Click outside to close"
1042
- }
1043
- )
1044
- ]
1045
- }
1038
+ ),
1039
+ /* @__PURE__ */ jsx2(
1040
+ "span",
1041
+ {
1042
+ style: {
1043
+ marginTop: "12px",
1044
+ color: t.textMuted,
1045
+ fontSize: "12px"
1046
+ },
1047
+ children: "Click outside to close"
1048
+ }
1049
+ )
1050
+ ]
1051
+ }
1052
+ ),
1053
+ document.body
1046
1054
  )
1047
1055
  ] });
1048
1056
  }