@tipp/ui 1.1.16 → 1.1.18

package/dist/atoms/index.cjs

@@ -74,9 +74,9 @@ __export(atoms_exports, {
   Code: () => import_themes13.Code,
   Collapse: () => Collapse,
   Container: () => import_themes14.Container,
-  Content: () => Content4,
+  Content: () => Content6,
   DataList: () => import_themes15.DataList,
-  Dialog: () => import_themes16.Dialog,
+  Dialog: () => Dialog,
   Drawer: () => Drawer,
   DropdownMenu: () => DropdownMenu,
   EllipsisTooltip: () => EllipsisTooltip,
@@ -98,7 +98,7 @@ __export(atoms_exports, {
   Radio: () => import_themes32.Radio,
   RadioCards: () => import_themes33.RadioCards,
   RadioGroup: () => import_themes34.RadioGroup,
-  Root: () => Root3,
+  Root: () => Root4,
   ScrollArea: () => import_themes35.ScrollArea,
   Section: () => import_themes36.Section,
   SegmentedControl: () => import_themes37.SegmentedControl,
@@ -114,7 +114,7 @@ __export(atoms_exports, {
   TextField: () => import_themes47.TextField,
   ToastContainer: () => ToastContainer,
   Tooltip: () => import_themes48.Tooltip,
-  Trigger: () => Trigger2,
+  Trigger: () => Trigger4,
   Typo: () => Typo,
   toast: () => import_react_toastify2.toast
 });
@@ -330,19 +330,91 @@ var import_themes14 = require("@radix-ui/themes");
 var import_themes15 = require("@radix-ui/themes");
 
 // src/atoms/dialog.tsx
+var RadixDialog = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_react_icons = require("@radix-ui/react-icons");
 var import_themes16 = require("@radix-ui/themes");
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Content2(props) {
+  const _a = props, {
+    children,
+    style = {},
+    width,
+    maxWidth,
+    minWidth,
+    maxHeight,
+    height,
+    minHeight
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "style",
+    "width",
+    "maxWidth",
+    "minWidth",
+    "maxHeight",
+    "height",
+    "minHeight"
+  ]);
+  const containerRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    containerRef.current = document.getElementsByClassName("radix-themes")[0];
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixDialog.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixDialog.Overlay, { className: "DialogOverlay", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    RadixDialog.Content,
+    __spreadProps(__spreadValues({
+      className: "DialogContent",
+      style: __spreadValues({
+        width,
+        maxWidth,
+        minWidth,
+        maxHeight,
+        height,
+        minHeight
+      }, style)
+    }, rest), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_themes16.Flex, { direction: "column", style: { position: "relative" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixDialog.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_themes16.IconButton, { variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_icons.Cross1Icon, {}) }) }),
+        children
+      ] })
+    })
+  ) }) });
+}
+function Close2(_a) {
+  var _b = _a, {
+    children
+  } = _b, rest = __objRest(_b, [
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixDialog.Close, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
+}
+function Trigger2(_a) {
+  var _b = _a, {
+    children
+  } = _b, rest = __objRest(_b, [
+    "children"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadixDialog.Trigger, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
+}
+var Dialog = {
+  Root: RadixDialog.Root,
+  Trigger: Trigger2,
+  Content: Content2,
+  Close: Close2,
+  Description: RadixDialog.Description,
+  Title: RadixDialog.Title
+};
 
 // src/atoms/dropdown-menu.tsx
 var import_themes17 = require("@radix-ui/themes");
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Content = (0, import_react7.forwardRef)((props, ref) => {
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Content3 = (0, import_react8.forwardRef)((props, ref) => {
   const _a = props, { isNavigation, className } = _a, rest = __objRest(_a, ["isNavigation", "className"]);
-  const contentClassName = (0, import_react7.useMemo)(() => {
+  const contentClassName = (0, import_react8.useMemo)(() => {
     const cls = isNavigation ? "dropdown-navigation" : "";
     return [cls, className].join(" ");
   }, [isNavigation, className]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     import_themes17.DropdownMenu.Content,
     __spreadProps(__spreadValues({
       ref
@@ -351,9 +423,9 @@ var Content = (0, import_react7.forwardRef)((props, ref) => {
     })
   );
 });
-Content.displayName = "DropdownMenu.Content";
+Content3.displayName = "DropdownMenu.Content";
 var DropdownMenu = __spreadProps(__spreadValues({}, import_themes17.DropdownMenu), {
-  Content
+  Content: Content3
 });
 
 // src/atoms/em.tsx
@@ -367,12 +439,12 @@ var import_themes20 = require("@radix-ui/themes");
 
 // src/atoms/heading.tsx
 var import_themes21 = require("@radix-ui/themes");
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_themes22 = require("@radix-ui/themes");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Heading2(props) {
   const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
-  const radixSize = (0, import_react8.useMemo)(() => {
+  const radixSize = (0, import_react9.useMemo)(() => {
     switch (variant) {
       case "subtitle1":
         return "4";
@@ -386,7 +458,7 @@ function Heading2(props) {
         return size;
     }
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_themes21.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes21.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
 }
 
 // src/atoms/hover-card.tsx
@@ -403,12 +475,12 @@ var import_themes26 = require("@radix-ui/themes");
 
 // src/atoms/link.tsx
 var import_themes27 = require("@radix-ui/themes");
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_themes28 = require("@radix-ui/themes");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Link(props) {
   const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
-  const radixSize = (0, import_react9.useMemo)(() => {
+  const radixSize = (0, import_react10.useMemo)(() => {
     switch (variant) {
       case "caption":
         return "1";
@@ -420,7 +492,7 @@ function Link(props) {
         return size;
     }
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes27.Link, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes27.Link, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
 }
 
 // src/atoms/popover.tsx
@@ -452,15 +524,15 @@ var import_themes37 = require("@radix-ui/themes");
 
 // src/atoms/select.tsx
 var import_themes38 = require("@radix-ui/themes");
-var import_react10 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var Content2 = (0, import_react10.forwardRef)((props, ref) => {
+var import_react11 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Content4 = (0, import_react11.forwardRef)((props, ref) => {
   const _a = props, { className, isNavigation } = _a, rest = __objRest(_a, ["className", "isNavigation"]);
-  const cls = (0, import_react10.useMemo)(() => {
+  const cls = (0, import_react11.useMemo)(() => {
     const etc = isNavigation ? "nav-select" : "";
     return [etc, className].join(" ");
   }, [className, isNavigation]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_themes38.Select.Content,
     __spreadProps(__spreadValues({
       position: "popper"
@@ -470,9 +542,9 @@ var Content2 = (0, import_react10.forwardRef)((props, ref) => {
     })
   );
 });
-Content2.displayName = "Select.Content";
+Content4.displayName = "Select.Content";
 var Select = __spreadProps(__spreadValues({}, import_themes38.Select), {
-  Content: Content2
+  Content: Content4
 });
 
 // src/atoms/separator.tsx
@@ -498,12 +570,12 @@ var import_themes45 = require("@radix-ui/themes");
 
 // src/atoms/typo.tsx
 var import_themes46 = require("@radix-ui/themes");
-var import_react11 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Typo = (0, import_react11.forwardRef)(
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Typo = (0, import_react12.forwardRef)(
   (props, ref) => {
     const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
-    const radixSize = (0, import_react11.useMemo)(() => {
+    const radixSize = (0, import_react12.useMemo)(() => {
       if (size !== void 0)
         return size;
       switch (variant) {
@@ -516,7 +588,7 @@ var Typo = (0, import_react11.forwardRef)(
           return "2";
       }
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes46.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_themes46.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
   }
 );
 Typo.displayName = "Typo";
@@ -528,42 +600,42 @@ var import_themes47 = require("@radix-ui/themes");
 var import_themes48 = require("@radix-ui/themes");
 
 // src/atoms/collapse.tsx
-var import_react12 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Collapse(props) {
   const { children, closedHeight = "0" } = props;
-  const [open, setOpen] = (0, import_react12.useState)(() => {
+  const [open, setOpen] = (0, import_react13.useState)(() => {
     return props.open || props.defaultOpen || false;
   });
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (props.open === void 0)
       return;
     setOpen(props.open);
   }, [props.open]);
-  const ref = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const ref = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     if (!ref.current)
       return;
     ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : closedHeight;
   }, [closedHeight, open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "collapse", ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "collapse", ref, children });
 }
 
 // src/atoms/spinner.tsx
 var import_themes49 = require("@radix-ui/themes");
 
 // src/atoms/pagination.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/icon.ts
-var import_react_icons = require("@radix-ui/react-icons");
+var import_react_icons2 = require("@radix-ui/react-icons");
 
 // src/atoms/pagination.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Pagination(props) {
   const { onChange, count = 0, siblingCount = 2 } = props;
-  const [page, setPage] = (0, import_react13.useState)(() => props.page || props.defaultPage || 1);
-  const visibleItems = (0, import_react13.useMemo)(() => {
+  const [page, setPage] = (0, import_react14.useState)(() => props.page || props.defaultPage || 1);
+  const visibleItems = (0, import_react14.useMemo)(() => {
     let start = Math.max(1, page - siblingCount);
     let end = Math.min(count, page + siblingCount);
     if (page - siblingCount <= 0 && end < count) {
@@ -573,37 +645,37 @@ function Pagination(props) {
     }
     return Array.from({ length: end - start + 1 }, (_, i) => i + start);
   }, [count, page, siblingCount]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     onChange == null ? void 0 : onChange(page);
   }, [onChange, page]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (props.page) {
       setPage(props.page);
     }
   }, [props.page]);
-  const prev = (0, import_react13.useMemo)(() => {
+  const prev = (0, import_react14.useMemo)(() => {
     const p = page - 1;
     return p < 1 ? void 0 : p;
   }, [page]);
-  const next = (0, import_react13.useMemo)(() => {
+  const next = (0, import_react14.useMemo)(() => {
     const n = page + 1;
     return n > count ? void 0 : n;
   }, [count, page]);
-  const onClickPrev = (0, import_react13.useCallback)(() => {
+  const onClickPrev = (0, import_react14.useCallback)(() => {
     prev && setPage(prev);
   }, [prev]);
-  const onClickNext = (0, import_react13.useCallback)(() => {
+  const onClickNext = (0, import_react14.useCallback)(() => {
     next && setPage(next);
   }, [next]);
-  const doublePrev = (0, import_react13.useMemo)(() => {
+  const doublePrev = (0, import_react14.useMemo)(() => {
     if (!visibleItems.length)
       return;
     return Math.max(0, visibleItems[0] - 1);
   }, [visibleItems]);
-  const onClickDoublePrev = (0, import_react13.useCallback)(() => {
+  const onClickDoublePrev = (0, import_react14.useCallback)(() => {
     doublePrev && setPage(doublePrev);
   }, [doublePrev]);
-  const doubleNext = (0, import_react13.useMemo)(() => {
+  const doubleNext = (0, import_react14.useMemo)(() => {
     if (!visibleItems.length)
       return;
     const n = visibleItems[visibleItems.length - 1] + 1;
@@ -611,7 +683,7 @@ function Pagination(props) {
       return;
     return Math.min(count, n);
   }, [count, visibleItems]);
-  const onClickDoubleNext = (0, import_react13.useCallback)(() => {
+  const onClickDoubleNext = (0, import_react14.useCallback)(() => {
     doubleNext && setPage(doubleNext);
   }, [doubleNext]);
   const iconSize = {
@@ -625,19 +697,19 @@ function Pagination(props) {
   };
   if (!page)
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes19.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_themes19.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_themes24.IconButton,
       __spreadProps(__spreadValues({
         disabled: !doublePrev,
         onClick: onClickDoublePrev
       }, moveButtonProps), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons2.DoubleArrowLeftIcon, __spreadValues({}, iconSize))
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes24.IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes19.Flex, { gap: "1", children: visibleItems.map((item) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes24.IconButton, __spreadProps(__spreadValues({ disabled: !prev, onClick: onClickPrev }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons2.ChevronLeftIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes19.Flex, { gap: "1", children: visibleItems.map((item) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
           className: `page-button ${item === page ? "active" : ""}`,
@@ -645,46 +717,46 @@ function Pagination(props) {
             setPage(item);
           },
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Typo, { variant: "body", children: item })
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Typo, { variant: "body", children: item })
         },
         item
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes24.IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize)) })),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_themes24.IconButton, __spreadProps(__spreadValues({ disabled: !next, onClick: onClickNext }, moveButtonProps), { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons2.ChevronRightIcon, __spreadValues({}, iconSize)) })),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_themes24.IconButton,
       __spreadProps(__spreadValues({
         disabled: !doubleNext,
         onClick: onClickDoubleNext
       }, moveButtonProps), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons.DoubleArrowRightIcon, __spreadValues({}, iconSize))
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_icons2.DoubleArrowRightIcon, __spreadValues({}, iconSize))
       })
     )
   ] });
 }
 
 // src/atoms/field-error-wrapper.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function FieldErrorWrapper({
   children,
   error
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_themes19.Flex, { direction: "column", gap: "1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_themes19.Flex, { direction: "column", gap: "1", children: [
     children,
-    error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Typo, { color: "red", variant: "caption", children: error }) : null
+    error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Typo, { color: "red", variant: "caption", children: error }) : null
   ] });
 }
 
 // src/atoms/ellipsis-tooltip.tsx
-var import_react14 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function EllipsisTooltip(props) {
   const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
-  const ref = (0, import_react14.useRef)(null);
-  const [tooltipDisplay, setTooltipDisplay] = (0, import_react14.useState)(
+  const ref = (0, import_react15.useRef)(null);
+  const [tooltipDisplay, setTooltipDisplay] = (0, import_react15.useState)(
     "none"
   );
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (ref.current) {
       const typo = ref.current;
       const mouseOver = () => {
@@ -699,7 +771,7 @@ function EllipsisTooltip(props) {
       ref.current.addEventListener("mouseleave", mouseOut);
     }
   }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes48.Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes48.Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Typo,
     __spreadProps(__spreadValues({}, rest), {
       ref,
@@ -718,26 +790,26 @@ function EllipsisTooltip(props) {
 }
 
 // src/atoms/drawer.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
 
 // src/theme/theme-provider.tsx
 var import_themes50 = require("@radix-ui/themes");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function ThemeProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes50.Theme, __spreadValues({ accentColor: "iris", radius: "medium" }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes50.Theme, __spreadValues({ accentColor: "iris", radius: "medium" }, props));
 }
 
 // src/atoms/toast.tsx
-var import_react_icons2 = require("@radix-ui/react-icons");
+var import_react_icons3 = require("@radix-ui/react-icons");
 var import_react_toastify = require("react-toastify");
 var import_react_toastify2 = require("react-toastify");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CloseButton({ closeToast }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes24.IconButton, { color: "gray", onClick: closeToast, variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons2.Cross1Icon, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes24.IconButton, { color: "gray", onClick: closeToast, variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_icons3.Cross1Icon, {}) });
 }
 function ToastContainer(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     import_react_toastify.ToastContainer,
     __spreadValues({
       autoClose: 5e3,
@@ -755,38 +827,38 @@ function ToastContainer(props) {
 }
 
 // src/atoms/drawer.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function Root3(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Root, __spreadValues({}, props));
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Root4(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog2.Root, __spreadValues({}, props));
 }
-function Content4(props) {
+function Content6(props) {
   const _a = props, { position = "right", className, children } = _a, rest = __objRest(_a, ["position", "className", "children"]);
-  const containerRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
-    containerRef.current = document.getElementsByTagName("main")[0];
+  const containerRef = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
+    containerRef.current = document.getElementsByClassName("radix-themes")[0];
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ThemeProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Overlay, { className: "DrawerOverlay" }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog2.Portal, { container: containerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(ThemeProvider, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog2.Overlay, { className: "DrawerOverlay" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       Dialog2.Content,
       __spreadProps(__spreadValues({
         className: `DrawerContent ${position} ${className || ""}`
       }, rest), {
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToastContainer, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ToastContainer, {}),
           children
         ]
       })
     )
   ] }) });
 }
-function Trigger2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Trigger, __spreadValues({ asChild: true }, props));
+function Trigger4(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog2.Trigger, __spreadValues({ asChild: true }, props));
 }
 var Drawer = {
   Root: Dialog2.Root,
-  Trigger: Trigger2,
-  Content: Content4,
+  Trigger: Trigger4,
+  Content: Content6,
   Close: Dialog2.Close,
   Title: Dialog2.Title,
   Description: Dialog2.Description
@@ -794,12 +866,12 @@ var Drawer = {
 
 // src/atoms/form.tsx
 var RadixForm = __toESM(require("@radix-ui/react-form"), 1);
-var import_react16 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var Root5 = (0, import_react16.forwardRef)(
+var import_react17 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Root6 = (0, import_react17.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       RadixForm.Root,
       __spreadProps(__spreadValues({}, rest), {
         className: `FormRoot ${className || ""}`,
@@ -809,11 +881,11 @@ var Root5 = (0, import_react16.forwardRef)(
     );
   }
 );
-Root5.displayName = "FORM_ROOT";
-var Field2 = (0, import_react16.forwardRef)(
+Root6.displayName = "FORM_ROOT";
+var Field2 = (0, import_react17.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       RadixForm.Field,
       __spreadProps(__spreadValues({}, rest), {
         className: `FormField ${className || ""}`,
@@ -824,10 +896,10 @@ var Field2 = (0, import_react16.forwardRef)(
   }
 );
 Field2.displayName = "FORM_FIELD";
-var Label2 = (0, import_react16.forwardRef)(
+var Label2 = (0, import_react17.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       RadixForm.Label,
       __spreadProps(__spreadValues({}, rest), {
         className: `FormLabel ${className || ""}`,
@@ -838,10 +910,10 @@ var Label2 = (0, import_react16.forwardRef)(
   }
 );
 Label2.displayName = "FORM_Label";
-var Message2 = (0, import_react16.forwardRef)(
+var Message2 = (0, import_react17.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       RadixForm.Message,
       __spreadProps(__spreadValues({}, rest), {
         className: `FormMessage ${className || ""}`,
@@ -853,7 +925,7 @@ var Message2 = (0, import_react16.forwardRef)(
 );
 Message2.displayName = "FORM_Message";
 var Form = {
-  Root: Root5,
+  Root: Root6,
   Field: Field2,
   Label: Label2,
   Message: Message2,