@cfx-dev/ui-components 2.1.6 → 2.1.8
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._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
CHANGED
|
@@ -1 +1 @@
|
|
|
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)}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsxs as p, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import { Icon as
|
|
4
|
-
import { clsx as
|
|
5
|
-
import '../../assets/InfoPanel.css';const
|
|
6
|
-
rootUnset:
|
|
7
|
-
root:
|
|
8
|
-
interactive:
|
|
9
|
-
interactiveIcon:
|
|
10
|
-
"type-neutral": "_type-
|
|
11
|
-
"type-error": "_type-
|
|
12
|
-
"type-success": "_type-
|
|
13
|
-
"type-warning": "_type-
|
|
14
|
-
"size-small": "_size-
|
|
15
|
-
"size-large": "_size-
|
|
16
|
-
icon:
|
|
17
|
-
content:
|
|
2
|
+
import b from "react";
|
|
3
|
+
import { Icon as c } from "../Icon/Icon.js";
|
|
4
|
+
import { clsx as h } from "../../utils/clsx.js";
|
|
5
|
+
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 = {
|
|
6
|
+
rootUnset: k,
|
|
7
|
+
root: u,
|
|
8
|
+
interactive: v,
|
|
9
|
+
interactiveIcon: y,
|
|
10
|
+
"type-neutral": "_type-neutral_1cbhk_34",
|
|
11
|
+
"type-error": "_type-error_1cbhk_41",
|
|
12
|
+
"type-success": "_type-success_1cbhk_48",
|
|
13
|
+
"type-warning": "_type-warning_1cbhk_55",
|
|
14
|
+
"size-small": "_size-small_1cbhk_62",
|
|
15
|
+
"size-large": "_size-large_1cbhk_66",
|
|
16
|
+
icon: f,
|
|
17
|
+
content: x
|
|
18
18
|
};
|
|
19
|
-
function
|
|
19
|
+
function z(s) {
|
|
20
20
|
const {
|
|
21
21
|
type: r = "neutral",
|
|
22
22
|
size: a = "normal",
|
|
@@ -25,7 +25,7 @@ function d(c) {
|
|
|
25
25
|
ariaLabel: _,
|
|
26
26
|
icon: n,
|
|
27
27
|
children: l
|
|
28
|
-
} =
|
|
28
|
+
} = s, m = h(
|
|
29
29
|
t.rootUnset,
|
|
30
30
|
t.root,
|
|
31
31
|
i,
|
|
@@ -43,14 +43,14 @@ function d(c) {
|
|
|
43
43
|
onClick: e,
|
|
44
44
|
"aria-label": _,
|
|
45
45
|
children: [
|
|
46
|
-
n && /* @__PURE__ */ o(
|
|
46
|
+
n && /* @__PURE__ */ o(c, { size: "xxsmall", name: n, className: t.icon }),
|
|
47
47
|
/* @__PURE__ */ o("div", { className: t.content, children: l }),
|
|
48
|
-
e && /* @__PURE__ */ o(
|
|
48
|
+
e && /* @__PURE__ */ o(c, { size: "xxsmall", name: "LeftArrow", className: t.interactiveIcon })
|
|
49
49
|
]
|
|
50
50
|
}
|
|
51
51
|
);
|
|
52
52
|
}
|
|
53
|
-
const U =
|
|
53
|
+
const U = b.memo(z);
|
|
54
54
|
export {
|
|
55
55
|
U as default
|
|
56
56
|
};
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { jsxs as c, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import u from "react";
|
|
3
3
|
import "../Button/Button.js";
|
|
4
|
-
import { ButtonBar as
|
|
4
|
+
import { ButtonBar as C } from "../Button/ButtonBar.js";
|
|
5
5
|
import "../Button/LinkButton.js";
|
|
6
|
-
import
|
|
6
|
+
import N from "../IconButton/IconButton.js";
|
|
7
7
|
import { Overlay as t } from "../Overlay/Overlay.js";
|
|
8
8
|
import { Text as d } from "../Text/Text.js";
|
|
9
9
|
import { clsx as m } from "../../utils/clsx.js";
|
|
10
10
|
import "../../utils/hooks/useGlobalKeyboardEvent.js";
|
|
11
11
|
import { useKeyboardClose as y } from "../../utils/hooks/useKeyboardClose.js";
|
|
12
12
|
import "../../index-2hJuj4UN.js";
|
|
13
|
-
import '../../assets/Modal.css';const B = "
|
|
13
|
+
import '../../assets/Modal.css';const B = "_root_1hqka_1", q = "_close_1hqka_26", x = "_header_1hqka_32", g = "_footer_1hqka_42", s = {
|
|
14
14
|
root: B,
|
|
15
|
-
"modal-appearance": "_modal-
|
|
16
|
-
close:
|
|
17
|
-
header:
|
|
18
|
-
footer:
|
|
15
|
+
"modal-appearance": "_modal-appearance_1hqka_1",
|
|
16
|
+
close: q,
|
|
17
|
+
header: x,
|
|
18
|
+
footer: g
|
|
19
19
|
};
|
|
20
20
|
function p(l) {
|
|
21
21
|
const {
|
|
@@ -23,17 +23,17 @@ function p(l) {
|
|
|
23
23
|
children: a,
|
|
24
24
|
className: e,
|
|
25
25
|
backdropClassName: f,
|
|
26
|
-
contentClassName:
|
|
26
|
+
contentClassName: h,
|
|
27
27
|
ariaDescribedby: _,
|
|
28
28
|
ariaLabelledby: b,
|
|
29
29
|
disableBackdropClose: i = !1,
|
|
30
|
-
disableFocusLock:
|
|
31
|
-
} = l, n =
|
|
30
|
+
disableFocusLock: k = !1
|
|
31
|
+
} = l, n = u.useCallback(() => {
|
|
32
32
|
i || !o || o();
|
|
33
33
|
}, [o, i]);
|
|
34
34
|
return y(n), /* @__PURE__ */ c(t, { children: [
|
|
35
35
|
/* @__PURE__ */ r(t.Backdrop, { onClick: n, className: f }),
|
|
36
|
-
/* @__PURE__ */ r(t.Content, { className:
|
|
36
|
+
/* @__PURE__ */ r(t.Content, { className: h, disableFocusLock: k, children: /* @__PURE__ */ c(
|
|
37
37
|
"div",
|
|
38
38
|
{
|
|
39
39
|
role: "dialog",
|
|
@@ -41,7 +41,7 @@ function p(l) {
|
|
|
41
41
|
"aria-labelledby": b,
|
|
42
42
|
className: m(s.root, e),
|
|
43
43
|
children: [
|
|
44
|
-
!!o && /* @__PURE__ */ r(
|
|
44
|
+
!!o && /* @__PURE__ */ r(N, { className: s.close, name: "Close", onClick: o }),
|
|
45
45
|
a
|
|
46
46
|
]
|
|
47
47
|
}
|
|
@@ -77,7 +77,7 @@ p.Footer = function(o) {
|
|
|
77
77
|
className: a,
|
|
78
78
|
...e
|
|
79
79
|
} = o;
|
|
80
|
-
return /* @__PURE__ */ r(
|
|
80
|
+
return /* @__PURE__ */ r(C, { ...e, className: m(s.footer, a) });
|
|
81
81
|
};
|
|
82
82
|
export {
|
|
83
83
|
p as Modal
|