@gearbox-protocol/permissionless-ui 1.22.0-next.16 → 1.22.0-next.18

package/dist/esm/components/client-adapters/styled-dialog-container/index.js

@@ -0,0 +1,4 @@
+import { StyledDialogContainer as r } from "./styled-dialog-container.js";
+export {
+  r as StyledDialogContainer
+};

package/dist/esm/components/client-adapters/styled-dialog-container/styled-dialog-container.js

@@ -0,0 +1,39 @@
+import { jsx as f } from "react/jsx-runtime";
+import * as p from "react";
+import { DialogContainer as d } from "../../dialog/dialog-container.js";
+import { cn as c } from "../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk";
+const g = p.forwardRef(
+  ({
+    $padding: o = "lg",
+    $width: r,
+    $minWidth: e,
+    $maxWidth: t,
+    $minHeight: i,
+    $colorTheme: a = "box",
+    className: m,
+    style: l,
+    ...n
+  }, s) => /* @__PURE__ */ f(
+    d,
+    {
+      ref: s,
+      padding: o === "none" ? !1 : o === "lg" ? !0 : o,
+      colorTheme: a,
+      className: c(m),
+      ...n,
+      style: {
+        ...l,
+        width: r || void 0,
+        minWidth: e || void 0,
+        maxWidth: t || void 0,
+        minHeight: i || void 0
+      }
+    }
+  )
+);
+g.displayName = "StyledDialogContainer";
+export {
+  g as StyledDialogContainer
+};

package/dist/esm/components/client-adapters/styled-rounded-image/styled-rounded-image.js

@@ -32,6 +32,7 @@ import "../../checkbox/checkbox.js";
 import "../../checkbox/checkbox-labeled.js";
 import "../../checkbox-item/checkbox-item.js";
 import "../styled-button/styled-button.js";
+import "../styled-dialog-container/styled-dialog-container.js";
 import "../../colored-text/colored-text.js";
 import "../../input/input.js";
 import "react-intl";
@@ -49,6 +50,7 @@ import "../../dropdown-menu/dropdown-menu-shortcut.js";
 import "../../dropdown-menu/dropdown-menu-sub-content.js";
 import "../../dropdown-menu/dropdown-menu-sub-trigger.js";
 import "../../page-title/page-title.js";
+import "../../modal/modal.js";
 import "@radix-ui/react-dialog";
 import "../../dialog/dialog-container.js";
 import "../../dialog/dialog-content.js";
@@ -56,7 +58,6 @@ import "../../dialog/dialog-description.js";
 import "../../dialog/dialog-footer.js";
 import "../../dialog/dialog-header.js";
 import "../../dialog/dialog-title.js";
-import "../../dialog/dialog-modal.js";
 import "../../dialog/dialog-modal-container.js";
 import "../../dialog/dialog-overlay.js";
 import "viem";

package/dist/esm/components/dialog/dialog-container.js

@@ -1,32 +1,66 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as n from "react";
-import { cn as t } from "../../utils/cn.js";
+import { jsx as n } from "react/jsx-runtime";
+import { cva as s } from "class-variance-authority";
+import * as i from "react";
+import { cn as p } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-const x = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-screen-xl",
-  "2xl": "max-w-screen-2xl",
-  full: "max-w-full"
-}, d = n.forwardRef(
-  ({ maxWidth: r = "full", padding: e = !0, className: m, children: l, ...a }, o) => /* @__PURE__ */ s(
+const x = s("", {
+  variants: {
+    padding: {
+      md: "p-5",
+      xl: "p-10",
+      true: "p-4 sm:p-6 lg:p-8",
+      false: ""
+    },
+    colorTheme: {
+      box: "bg-card border border-gray-10",
+      transparent: "bg-transparent border border-border",
+      modal: "bg-modal border border-gray-10 shadow-[0_4px_28px_4px_rgba(0,0,0,0.15)]",
+      default: "bg-card border border-border"
+    },
+    maxWidth: {
+      sm: "max-w-screen-sm",
+      md: "max-w-screen-md",
+      lg: "max-w-screen-lg",
+      xl: "max-w-screen-xl",
+      "2xl": "max-w-screen-2xl",
+      full: "max-w-full"
+    },
+    sticky: {
+      true: "sticky top-5 z-[1]",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    padding: !0,
+    colorTheme: "default",
+    maxWidth: "full"
+  }
+}), f = i.forwardRef(
+  ({
+    maxWidth: r = "full",
+    padding: a = !0,
+    colorTheme: e = "default",
+    sticky: o = !1,
+    className: d,
+    children: l,
+    ...t
+  }, m) => /* @__PURE__ */ n(
     "div",
     {
-      ref: o,
-      className: t(
-        "w-full border bg-card rounded-lg border-border",
-        x[r],
-        e && "p-4 sm:p-6 lg:p-8",
-        m
+      ref: m,
+      className: p(
+        "w-full",
+        "rounded-[10px] md:rounded-2xl",
+        x({ padding: a, colorTheme: e, maxWidth: r, sticky: o }),
+        d
       ),
-      ...a,
+      ...t,
       children: l
     }
   )
 );
-d.displayName = "DialogContainer";
+f.displayName = "DialogContainer";
 export {
-  d as DialogContainer
+  f as DialogContainer
 };

package/dist/esm/components/dialog/dialog-modal-container.js

@@ -1,26 +1,47 @@
-import { jsx as o } from "react/jsx-runtime";
-import * as t from "react";
-import { cn as e } from "../../utils/cn.js";
+import { jsx as a } from "react/jsx-runtime";
+import { cva as f } from "class-variance-authority";
+import * as c from "react";
+import { cn as w } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-import { DialogContainer as n } from "./dialog-container.js";
-import { DialogModal as p } from "./dialog-modal.js";
-const f = t.forwardRef(({ dialogProps: r, modalProps: a, children: m }, i) => {
-  const { className: l, ...s } = r || {};
-  return /* @__PURE__ */ o(p, { ...a, children: /* @__PURE__ */ o(
-    n,
+import { Modal as g } from "../modal/modal.js";
+import { DialogContainer as h } from "./dialog-container.js";
+const u = f("", {
+  variants: {
+    width: {
+      default: "md:w-[640px]",
+      lg: "md:w-[720px]",
+      full: "md:w-full"
+    }
+  },
+  defaultVariants: {
+    width: "default"
+  }
+}), x = c.forwardRef(({ show: o, onClickOutside: r, modal: i, dialog: l, children: t }, m) => {
+  const {
+    className: d,
+    colorTheme: e = "modal",
+    padding: n = "xl",
+    width: s,
+    ...p
+  } = l || {};
+  return /* @__PURE__ */ a(g, { ...i, show: o, onClickOutside: r, children: /* @__PURE__ */ a(
+    h,
     {
-      ref: i,
-      className: e(
-        "w-full min-h-screen sm:min-h-0 sm:w-[440px] md:min-h-full md:w-full",
-        l
+      ref: m,
+      className: w(
+        "w-full sm:w-[440px] min-h-screen sm:min-h-0",
+        u({ width: s }),
+        d
       ),
-      ...s,
-      children: m
+      colorTheme: e,
+      padding: n,
+      ...p,
+      children: t
     }
   ) });
 });
-f.displayName = "DialogModalContainer";
+x.displayName = "DialogModalContainer";
 export {
-  f as DialogModalContainer
+  x as DialogModalContainer
 };

package/dist/esm/components/dialog/index.js

@@ -1,28 +1,28 @@
-import { Dialog as e, DialogPortal as a, DialogTrigger as i } from "./dialog.js";
-import { DialogContainer as t } from "./dialog-container.js";
-import { DialogContent as D } from "./dialog-content.js";
-import { DialogDescription as p } from "./dialog-description.js";
-import { DialogFooter as x } from "./dialog-footer.js";
-import { DialogForm as d } from "./dialog-form.js";
-import { DialogHeader as F } from "./dialog-header.js";
-import { DialogModal as O } from "./dialog-modal.js";
+import { Modal as e } from "../modal/modal.js";
+import { Dialog as i, DialogPortal as t, DialogTrigger as l } from "./dialog.js";
+import { DialogContainer as D } from "./dialog-container.js";
+import { DialogContent as p } from "./dialog-content.js";
+import { DialogDescription as x } from "./dialog-description.js";
+import { DialogFooter as d } from "./dialog-footer.js";
+import { DialogForm as F } from "./dialog-form.js";
+import { DialogHeader as O } from "./dialog-header.js";
 import { DialogModalContainer as c } from "./dialog-modal-container.js";
 import { DialogOverlay as v } from "./dialog-overlay.js";
 import { DialogTitle as H } from "./dialog-title.js";
 import { OneFieldDialog as b } from "./one-field-dialog.js";
 export {
-  e as Dialog,
-  t as DialogContainer,
-  D as DialogContent,
-  p as DialogDescription,
-  x as DialogFooter,
-  d as DialogForm,
-  F as DialogHeader,
-  O as DialogModal,
+  i as Dialog,
+  D as DialogContainer,
+  p as DialogContent,
+  x as DialogDescription,
+  d as DialogFooter,
+  F as DialogForm,
+  O as DialogHeader,
   c as DialogModalContainer,
   v as DialogOverlay,
-  a as DialogPortal,
+  t as DialogPortal,
   H as DialogTitle,
-  i as DialogTrigger,
+  l as DialogTrigger,
+  e as Modal,
   b as OneFieldDialog
 };

package/dist/esm/components/filter/filter-modal.js

@@ -12,6 +12,7 @@ import "@gearbox-protocol/sdk";
 import { extractTextFromLabel as R, serializeValue as z } from "../../utils/react.js";
 import "../buttons/tab-button/tab-button.js";
 import { CheckboxItem as F } from "../checkbox-item/checkbox-item.js";
+import "../modal/modal.js";
 import { Dialog as P } from "../dialog/dialog.js";
 import "../dialog/dialog-container.js";
 import { DialogContent as U } from "../dialog/dialog-content.js";
@@ -19,7 +20,6 @@ import "../dialog/dialog-description.js";
 import { DialogFooter as W } from "../dialog/dialog-footer.js";
 import { DialogHeader as X } from "../dialog/dialog-header.js";
 import { DialogTitle as Y } from "../dialog/dialog-title.js";
-import "../dialog/dialog-modal.js";
 import "../dialog/dialog-modal-container.js";
 import "../dialog/dialog-overlay.js";
 import "viem";