@cfx-dev/ui-components 2.1.7 → 2.1.9

package/dist/assets/InfoPanel.css

@@ -1 +1 @@
-._rootUnset_1kt7h_1{all:unset}._root_1kt7h_1{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:calc(var(--quant) * 1.5);padding:var(--offset-medium) var(--offset-large);background-color:var(--bg-color);border-left:solid calc(var(--quant) * .75) var(--border-color);border-radius:var(--border-radius-small)}._root_1kt7h_1{transition:all .25s ease,outline-offset 0s,outline 0s}._root_1kt7h_1._interactive_1kt7h_19{cursor:pointer}._root_1kt7h_1._interactive_1kt7h_19:hover ._interactiveIcon_1kt7h_22{opacity:1;transform:translate(0)}._root_1kt7h_1._interactive_1kt7h_19:focus-visible,._root_1kt7h_1._interactive_1kt7h_19:focus-visible:hover{outline-offset:var(--info-panel-focus-border-size, initial);outline:var(--info-panel-focus-border-size, initial) solid var(--border-color)}._root_1kt7h_1._interactive_1kt7h_19:focus-visible ._interactiveIcon_1kt7h_22,._root_1kt7h_1._interactive_1kt7h_19:focus-visible:hover ._interactiveIcon_1kt7h_22{opacity:1;transform:translate(0)}._root_1kt7h_1._type-neutral_1kt7h_34{--bg-color: var(--color-info-panel-background);--border-color: var(--color-info-panel-border)}._root_1kt7h_1._type-neutral_1kt7h_34._interactive_1kt7h_19:hover{--bg-color: var(--color-info-panel-background-hover)}._root_1kt7h_1._type-error_1kt7h_41{--bg-color: var(--color-info-panel-error-background);--border-color: var(--color-info-panel-error-border)}._root_1kt7h_1._type-error_1kt7h_41._interactive_1kt7h_19:hover{--bg-color: var(--color-info-panel-error-background-hover)}._root_1kt7h_1._type-success_1kt7h_48{--bg-color: var(--color-info-panel-success-background);--border-color: var(--color-info-panel-success-border)}._root_1kt7h_1._type-success_1kt7h_48._interactive_1kt7h_19:hover{--bg-color: var(--color-info-panel-success-background-hover)}._root_1kt7h_1._type-warning_1kt7h_55{--bg-color: var(--color-info-panel-warning-background);--border-color: var(--color-info-panel-warning-border)}._root_1kt7h_1._type-warning_1kt7h_55._interactive_1kt7h_19:hover{--bg-color: var(--color-info-panel-warning-background-hover)}._root_1kt7h_1._size-small_1kt7h_62{min-height:var(--control-height-small)}._root_1kt7h_1._size-large_1kt7h_65{gap:var(--offset-normal);min-height:var(--control-height-large)}._root_1kt7h_1 ._icon_1kt7h_69{flex-shrink:0;color:var(--border-color)}._root_1kt7h_1 ._content_1kt7h_73{flex-grow:1}._root_1kt7h_1 ._interactiveIcon_1kt7h_22{opacity:0;transform:translate(calc(-1 * var(--quant)))}._root_1kt7h_1 ._interactiveIcon_1kt7h_22{transition:all .25s ease,outline-offset 0s,outline 0s}
+._rootUnset_1cbhk_1{all:unset}._root_1cbhk_1{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:calc(var(--quant) * 1.5);padding:var(--offset-medium) var(--offset-large);background-color:var(--bg-color);border-left:solid calc(var(--quant) * .75) var(--border-color);border-radius:var(--border-radius-small)}._root_1cbhk_1{transition:all .25s ease,outline-offset 0s,outline 0s}._root_1cbhk_1._interactive_1cbhk_19{cursor:pointer}._root_1cbhk_1._interactive_1cbhk_19:hover ._interactiveIcon_1cbhk_22{opacity:1;transform:translate(0)}._root_1cbhk_1._interactive_1cbhk_19:focus-visible,._root_1cbhk_1._interactive_1cbhk_19:focus-visible:hover{outline-offset:var(--info-panel-focus-border-size, initial);outline:var(--info-panel-focus-border-size, initial) solid var(--border-color)}._root_1cbhk_1._interactive_1cbhk_19:focus-visible ._interactiveIcon_1cbhk_22,._root_1cbhk_1._interactive_1cbhk_19:focus-visible:hover ._interactiveIcon_1cbhk_22{opacity:1;transform:translate(0)}._root_1cbhk_1._type-neutral_1cbhk_34{--bg-color: var(--color-info-panel-background);--border-color: var(--color-info-panel-border)}._root_1cbhk_1._type-neutral_1cbhk_34._interactive_1cbhk_19:hover{--bg-color: var(--color-info-panel-background-hover)}._root_1cbhk_1._type-error_1cbhk_41{--bg-color: var(--color-info-panel-error-background);--border-color: var(--color-info-panel-error-border)}._root_1cbhk_1._type-error_1cbhk_41._interactive_1cbhk_19:hover{--bg-color: var(--color-info-panel-error-background-hover)}._root_1cbhk_1._type-success_1cbhk_48{--bg-color: var(--color-info-panel-success-background);--border-color: var(--color-info-panel-success-border)}._root_1cbhk_1._type-success_1cbhk_48._interactive_1cbhk_19:hover{--bg-color: var(--color-info-panel-success-background-hover)}._root_1cbhk_1._type-warning_1cbhk_55{--bg-color: var(--color-info-panel-warning-background);--border-color: var(--color-info-panel-warning-border)}._root_1cbhk_1._type-warning_1cbhk_55._interactive_1cbhk_19:hover{--bg-color: var(--color-info-panel-warning-background-hover)}._root_1cbhk_1._size-small_1cbhk_62{min-height:var(--control-height-small);padding:var(--offset-small) var(--offset-small)}._root_1cbhk_1._size-large_1cbhk_66{gap:var(--offset-normal);min-height:var(--control-height-large)}._root_1cbhk_1 ._icon_1cbhk_70{flex-shrink:0;color:var(--border-color)}._root_1cbhk_1 ._content_1cbhk_74{flex-grow:1}._root_1cbhk_1 ._interactiveIcon_1cbhk_22{opacity:0;transform:translate(calc(-1 * var(--quant)))}._root_1cbhk_1 ._interactiveIcon_1cbhk_22{transition:all .25s ease,outline-offset 0s,outline 0s}

package/dist/assets/Modal.css

@@ -1 +1 @@
-._root_1hqka_1{flex-shrink:0;position:relative;display:flex;flex-direction:column;max-width:calc((var(--width) - var(--offset-safezone) * 2) * 1);min-width:calc(var(--quant) * 100);max-height:calc((var(--height) - var(--offset-safezone) * 2) * 1);padding:calc(var(--quant) * 6);background-color:var(--color-modal-background);border-radius:var(--border-radius-small);overflow:hidden;animation-name:_modal-appearance_1hqka_1;animation-duration:.2s}@keyframes _modal-appearance_1hqka_1{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}._root_1hqka_1 ._close_1hqka_26{position:absolute;top:calc(var(--quant) * 2);right:calc(var(--quant) * 2.5);z-index:1}._root_1hqka_1 ._header_1hqka_32{display:flex;flex-direction:column;gap:calc(var(--quant) * 2.5);padding-bottom:calc(var(--quant) * 4)}._root_1hqka_1 ._header_1hqka_32 a{border-bottom:1px solid rgba(var(--color-secondary),1);font-weight:700}._root_1hqka_1 ._footer_1hqka_42{padding-top:calc(var(--quant) * 6)}
+._root_w22bc_1{flex-shrink:0;position:relative;display:flex;flex-direction:column;max-width:calc((var(--width) - var(--offset-safezone) * 2) * 1);min-width:calc(var(--quant) * 50);max-height:calc((var(--height) - var(--offset-safezone) * 2) * 1);padding:calc(var(--quant) * 6);background-color:var(--color-modal-background);border-radius:var(--border-radius-small);overflow:hidden;animation-name:_modal-appearance_w22bc_1;animation-duration:.2s}@media (min-width: 768px){._root_w22bc_1{min-width:calc(var(--quant) * 80)}}@media (min-width: 1280px){._root_w22bc_1{min-width:calc(var(--quant) * 100)}}@keyframes _modal-appearance_w22bc_1{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}._root_w22bc_1 ._close_w22bc_36{position:absolute;top:calc(var(--quant) * 2);right:calc(var(--quant) * 2.5);z-index:1}._root_w22bc_1 ._header_w22bc_42{display:flex;flex-direction:column;gap:calc(var(--quant) * 2.5);padding-bottom:calc(var(--quant) * 4)}._root_w22bc_1 ._header_w22bc_42 a{border-bottom:1px solid rgba(var(--color-secondary),1);font-weight:700}._root_w22bc_1 ._footer_w22bc_52{padding-top:calc(var(--quant) * 6)}

package/dist/components/InfoPanel/InfoPanel.js

@@ -1,22 +1,22 @@
 import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import h from "react";
-import { Icon as s } from "../Icon/Icon.js";
-import { clsx as k } from "../../utils/clsx.js";
-import '../../assets/InfoPanel.css';const u = "_rootUnset_1kt7h_1", v = "_root_1kt7h_1", y = "_interactive_1kt7h_19", f = "_interactiveIcon_1kt7h_22", x = "_icon_1kt7h_69", z = "_content_1kt7h_73", t = {
-  rootUnset: u,
-  root: v,
-  interactive: y,
-  interactiveIcon: f,
-  "type-neutral": "_type-neutral_1kt7h_34",
-  "type-error": "_type-error_1kt7h_41",
-  "type-success": "_type-success_1kt7h_48",
-  "type-warning": "_type-warning_1kt7h_55",
-  "size-small": "_size-small_1kt7h_62",
-  "size-large": "_size-large_1kt7h_65",
-  icon: x,
-  content: z
+import b from "react";
+import { Icon as c } from "../Icon/Icon.js";
+import { clsx as h } from "../../utils/clsx.js";
+import '../../assets/InfoPanel.css';const k = "_rootUnset_1cbhk_1", u = "_root_1cbhk_1", v = "_interactive_1cbhk_19", y = "_interactiveIcon_1cbhk_22", f = "_icon_1cbhk_70", x = "_content_1cbhk_74", t = {
+  rootUnset: k,
+  root: u,
+  interactive: v,
+  interactiveIcon: y,
+  "type-neutral": "_type-neutral_1cbhk_34",
+  "type-error": "_type-error_1cbhk_41",
+  "type-success": "_type-success_1cbhk_48",
+  "type-warning": "_type-warning_1cbhk_55",
+  "size-small": "_size-small_1cbhk_62",
+  "size-large": "_size-large_1cbhk_66",
+  icon: f,
+  content: x
 };
-function d(c) {
+function z(s) {
   const {
     type: r = "neutral",
     size: a = "normal",
@@ -25,7 +25,7 @@ function d(c) {
     ariaLabel: _,
     icon: n,
     children: l
-  } = c, m = k(
+  } = s, m = h(
     t.rootUnset,
     t.root,
     i,
@@ -43,14 +43,14 @@ function d(c) {
       onClick: e,
       "aria-label": _,
       children: [
-        n && /* @__PURE__ */ o(s, { size: "xxsmall", name: n, className: t.icon }),
+        n && /* @__PURE__ */ o(c, { size: "xxsmall", name: n, className: t.icon }),
         /* @__PURE__ */ o("div", { className: t.content, children: l }),
-        e && /* @__PURE__ */ o(s, { size: "xxsmall", name: "LeftArrow", className: t.interactiveIcon })
+        e && /* @__PURE__ */ o(c, { size: "xxsmall", name: "LeftArrow", className: t.interactiveIcon })
       ]
     }
   );
 }
-const U = h.memo(d);
+const U = b.memo(z);
 export {
   U as default
 };

package/dist/components/Modal/Modal.d.ts

@@ -5,6 +5,7 @@ export interface ModalProps {
     children: React.ReactNode;
     onClose?: () => void;
     className?: string;
+    overlayClassName?: string;
     backdropClassName?: string;
     contentClassName?: string;
     disableBackdropClose?: boolean;

package/dist/components/Modal/Modal.js

@@ -1,69 +1,83 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import u from "react";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import N from "react";
 import "../Button/Button.js";
-import { ButtonBar as C } from "../Button/ButtonBar.js";
+import { ButtonBar as k } from "../Button/ButtonBar.js";
 import "../Button/LinkButton.js";
-import N from "../IconButton/IconButton.js";
+import y from "../IconButton/IconButton.js";
 import { Overlay as t } from "../Overlay/Overlay.js";
-import { Text as d } from "../Text/Text.js";
-import { clsx as m } from "../../utils/clsx.js";
+import { Text as m } from "../Text/Text.js";
+import { clsx as l } from "../../utils/clsx.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
-import { useKeyboardClose as y } from "../../utils/hooks/useKeyboardClose.js";
+import { useKeyboardClose as w } from "../../utils/hooks/useKeyboardClose.js";
 import "../../index-2hJuj4UN.js";
-import '../../assets/Modal.css';const B = "_root_1hqka_1", q = "_close_1hqka_26", x = "_header_1hqka_32", g = "_footer_1hqka_42", s = {
+import '../../assets/Modal.css';const B = "_root_w22bc_1", v = "_close_w22bc_36", x = "_header_w22bc_42", g = "_footer_w22bc_52", r = {
   root: B,
-  "modal-appearance": "_modal-appearance_1hqka_1",
-  close: q,
+  "modal-appearance": "_modal-appearance_w22bc_1",
+  close: v,
   header: x,
   footer: g
 };
-function p(l) {
+function p(c) {
   const {
     onClose: o,
-    children: a,
+    children: s,
     className: e,
+    overlayClassName: b,
     backdropClassName: f,
-    contentClassName: h,
-    ariaDescribedby: _,
-    ariaLabelledby: b,
-    disableBackdropClose: i = !1,
-    disableFocusLock: k = !1
-  } = l, n = u.useCallback(() => {
-    i || !o || o();
-  }, [o, i]);
-  return y(n), /* @__PURE__ */ c(t, { children: [
-    /* @__PURE__ */ r(t.Backdrop, { onClick: n, className: f }),
-    /* @__PURE__ */ r(t.Content, { className: h, disableFocusLock: k, children: /* @__PURE__ */ c(
-      "div",
+    contentClassName: _,
+    ariaDescribedby: h,
+    ariaLabelledby: u,
+    disableBackdropClose: n = !1,
+    disableFocusLock: C = !1
+  } = c, d = N.useCallback(() => {
+    n || !o || o();
+  }, [o, n]);
+  return w(d), /* @__PURE__ */ i(t, { className: l(r.overlay, b), children: [
+    /* @__PURE__ */ a(
+      t.Backdrop,
       {
-        role: "dialog",
-        "aria-describedby": _,
-        "aria-labelledby": b,
-        className: m(s.root, e),
-        children: [
-          !!o && /* @__PURE__ */ r(N, { className: s.close, name: "Close", onClick: o }),
-          a
-        ]
+        onClick: d,
+        className: l(r.backdrop, f)
       }
-    ) })
+    ),
+    /* @__PURE__ */ a(
+      t.Content,
+      {
+        className: _,
+        disableFocusLock: C,
+        children: /* @__PURE__ */ i(
+          "div",
+          {
+            role: "dialog",
+            "aria-describedby": h,
+            "aria-labelledby": u,
+            className: l(r.root, e),
+            children: [
+              !!o && /* @__PURE__ */ a(y, { className: r.close, name: "Close", onClick: o }),
+              s
+            ]
+          }
+        )
+      }
+    )
   ] });
 }
 p.Header = function(o) {
   const {
-    title: a,
+    title: s,
     description: e
   } = o;
-  return /* @__PURE__ */ c("div", { className: s.header, children: [
-    /* @__PURE__ */ r(
-      d,
+  return /* @__PURE__ */ i("div", { className: r.header, children: [
+    /* @__PURE__ */ a(
+      m,
       {
         weight: "bold",
         size: "large",
-        children: a
+        children: s
       }
     ),
-    e && /* @__PURE__ */ r(
-      d,
+    e && /* @__PURE__ */ a(
+      m,
       {
         size: "small",
         color: "secondary",
@@ -74,10 +88,10 @@ p.Header = function(o) {
 };
 p.Footer = function(o) {
   const {
-    className: a,
+    className: s,
     ...e
   } = o;
-  return /* @__PURE__ */ r(C, { ...e, className: m(s.footer, a) });
+  return /* @__PURE__ */ a(k, { ...e, className: l(r.footer, s) });
 };
 export {
   p as Modal

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "2.1.7",
+  "version": "2.1.9",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",