@dmsi/wedgekit-react 0.0.106 → 0.0.108
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.
- package/dist/chunk-4F6VQXKY.js +112 -0
- package/dist/{chunk-66CBCMDU.js → chunk-KYMBBPEW.js} +8 -3
- package/dist/{chunk-RVQEW4A4.js → chunk-OX3HKFIH.js} +1 -1
- package/dist/{chunk-E5ZL2ZYX.js → chunk-ZEGVZ5NW.js} +1 -0
- package/dist/components/DataGridCell.cjs +1 -0
- package/dist/components/DataGridCell.js +1 -1
- package/dist/components/LoadingScrim.cjs +168 -0
- package/dist/components/LoadingScrim.js +27 -0
- package/dist/components/PaymentOnAccountModal.cjs +8 -3
- package/dist/components/PaymentOnAccountModal.js +2 -2
- package/dist/components/SelectPaymentMethod.cjs +8 -3
- package/dist/components/SelectPaymentMethod.js +1 -1
- package/dist/components/Spinner.cjs +136 -0
- package/dist/components/Spinner.js +7 -0
- package/dist/components/index.cjs +11 -4
- package/dist/components/index.js +5 -4
- package/dist/index.css +6 -0
- package/package.json +1 -1
- package/src/components/DataGrid/index.tsx +10 -4
- package/src/components/DataGridCell.tsx +1 -0
- package/src/components/LoadingScrim.tsx +32 -0
- package/src/components/SelectPaymentMethod.tsx +6 -2
- package/src/components/Spinner.tsx +102 -0
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
// src/components/Spinner.tsx
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
var Spinner = ({ size = "small" }) => {
|
|
4
|
+
const dimension = size === "large" ? 48 : 24;
|
|
5
|
+
return /* @__PURE__ */ jsxs(
|
|
6
|
+
"svg",
|
|
7
|
+
{
|
|
8
|
+
width: dimension,
|
|
9
|
+
height: dimension,
|
|
10
|
+
viewBox: "0 0 24 24",
|
|
11
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
12
|
+
fill: "#1D1E1E",
|
|
13
|
+
className: size === "large" ? "animate-spin" : "",
|
|
14
|
+
"aria-label": "Loading",
|
|
15
|
+
children: [
|
|
16
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ jsx(
|
|
17
|
+
"animate",
|
|
18
|
+
{
|
|
19
|
+
attributeName: "opacity",
|
|
20
|
+
begin: "0s",
|
|
21
|
+
dur: "1s",
|
|
22
|
+
from: "1",
|
|
23
|
+
to: "0",
|
|
24
|
+
repeatCount: "indefinite"
|
|
25
|
+
}
|
|
26
|
+
) }),
|
|
27
|
+
/* @__PURE__ */ jsx("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ jsx(
|
|
28
|
+
"animate",
|
|
29
|
+
{
|
|
30
|
+
attributeName: "opacity",
|
|
31
|
+
begin: "-0.875s",
|
|
32
|
+
dur: "1s",
|
|
33
|
+
from: "1",
|
|
34
|
+
to: "0",
|
|
35
|
+
repeatCount: "indefinite"
|
|
36
|
+
}
|
|
37
|
+
) }),
|
|
38
|
+
/* @__PURE__ */ jsx("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ jsx(
|
|
39
|
+
"animate",
|
|
40
|
+
{
|
|
41
|
+
attributeName: "opacity",
|
|
42
|
+
begin: "-0.75s",
|
|
43
|
+
dur: "1s",
|
|
44
|
+
from: "1",
|
|
45
|
+
to: "0",
|
|
46
|
+
repeatCount: "indefinite"
|
|
47
|
+
}
|
|
48
|
+
) }),
|
|
49
|
+
/* @__PURE__ */ jsx("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ jsx(
|
|
50
|
+
"animate",
|
|
51
|
+
{
|
|
52
|
+
attributeName: "opacity",
|
|
53
|
+
begin: "-0.625s",
|
|
54
|
+
dur: "1s",
|
|
55
|
+
from: "1",
|
|
56
|
+
to: "0",
|
|
57
|
+
repeatCount: "indefinite"
|
|
58
|
+
}
|
|
59
|
+
) }),
|
|
60
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ jsx(
|
|
61
|
+
"animate",
|
|
62
|
+
{
|
|
63
|
+
attributeName: "opacity",
|
|
64
|
+
begin: "-0.5s",
|
|
65
|
+
dur: "1s",
|
|
66
|
+
from: "1",
|
|
67
|
+
to: "0",
|
|
68
|
+
repeatCount: "indefinite"
|
|
69
|
+
}
|
|
70
|
+
) }),
|
|
71
|
+
/* @__PURE__ */ jsx("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ jsx(
|
|
72
|
+
"animate",
|
|
73
|
+
{
|
|
74
|
+
attributeName: "opacity",
|
|
75
|
+
begin: "-0.375s",
|
|
76
|
+
dur: "1s",
|
|
77
|
+
from: "1",
|
|
78
|
+
to: "0",
|
|
79
|
+
repeatCount: "indefinite"
|
|
80
|
+
}
|
|
81
|
+
) }),
|
|
82
|
+
/* @__PURE__ */ jsx("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ jsx(
|
|
83
|
+
"animate",
|
|
84
|
+
{
|
|
85
|
+
attributeName: "opacity",
|
|
86
|
+
begin: "-0.25s",
|
|
87
|
+
dur: "1s",
|
|
88
|
+
from: "1",
|
|
89
|
+
to: "0",
|
|
90
|
+
repeatCount: "indefinite"
|
|
91
|
+
}
|
|
92
|
+
) }),
|
|
93
|
+
/* @__PURE__ */ jsx("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ jsx(
|
|
94
|
+
"animate",
|
|
95
|
+
{
|
|
96
|
+
attributeName: "opacity",
|
|
97
|
+
begin: "-0.125s",
|
|
98
|
+
dur: "1s",
|
|
99
|
+
from: "1",
|
|
100
|
+
to: "0",
|
|
101
|
+
repeatCount: "indefinite"
|
|
102
|
+
}
|
|
103
|
+
) })
|
|
104
|
+
]
|
|
105
|
+
}
|
|
106
|
+
);
|
|
107
|
+
};
|
|
108
|
+
Spinner.displayName = "Spinner";
|
|
109
|
+
|
|
110
|
+
export {
|
|
111
|
+
Spinner
|
|
112
|
+
};
|
|
@@ -81,7 +81,13 @@ function SelectPaymentMethod(props) {
|
|
|
81
81
|
{
|
|
82
82
|
isOpen: selectedMethod === "CCPayment",
|
|
83
83
|
title: "Pay by Credit/Debit Card",
|
|
84
|
-
before: /* @__PURE__ */ jsx(
|
|
84
|
+
before: /* @__PURE__ */ jsx(
|
|
85
|
+
Radio,
|
|
86
|
+
{
|
|
87
|
+
checked: selectedMethod === "CCPayment",
|
|
88
|
+
onClick: (e) => e.preventDefault()
|
|
89
|
+
}
|
|
90
|
+
),
|
|
85
91
|
onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
|
|
86
92
|
children: /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
|
|
87
93
|
}
|
|
@@ -125,8 +131,7 @@ function ACHSelector(props) {
|
|
|
125
131
|
before: /* @__PURE__ */ jsx(
|
|
126
132
|
Radio,
|
|
127
133
|
{
|
|
128
|
-
checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
|
|
129
|
-
readOnly: true
|
|
134
|
+
checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
|
|
130
135
|
}
|
|
131
136
|
),
|
|
132
137
|
onClick: () => setIsOpen((prev) => !prev),
|
|
@@ -125,6 +125,7 @@ var DataGridCell = memo(
|
|
|
125
125
|
"flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
|
|
126
126
|
"focus-within:!z-10",
|
|
127
127
|
"overflow-x-hidden",
|
|
128
|
+
"overflow-y-hidden",
|
|
128
129
|
component === "input" && "border",
|
|
129
130
|
component === "input" && !error && !warning && "border-border-primary-normal",
|
|
130
131
|
component === "input" && error && "border-border-primary-error",
|
|
@@ -1742,6 +1742,7 @@ var DataGridCell = (0, import_react10.memo)(
|
|
|
1742
1742
|
"flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
|
|
1743
1743
|
"focus-within:!z-10",
|
|
1744
1744
|
"overflow-x-hidden",
|
|
1745
|
+
"overflow-y-hidden",
|
|
1745
1746
|
component === "input" && "border",
|
|
1746
1747
|
component === "input" && !error && !warning && "border-border-primary-normal",
|
|
1747
1748
|
component === "input" && error && "border-border-primary-error",
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/components/LoadingScrim.tsx
|
|
31
|
+
var LoadingScrim_exports = {};
|
|
32
|
+
__export(LoadingScrim_exports, {
|
|
33
|
+
LoadingScrim: () => LoadingScrim
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(LoadingScrim_exports);
|
|
36
|
+
var import_clsx = __toESM(require("clsx"), 1);
|
|
37
|
+
|
|
38
|
+
// src/components/Spinner.tsx
|
|
39
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
40
|
+
var Spinner = ({ size = "small" }) => {
|
|
41
|
+
const dimension = size === "large" ? 48 : 24;
|
|
42
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
43
|
+
"svg",
|
|
44
|
+
{
|
|
45
|
+
width: dimension,
|
|
46
|
+
height: dimension,
|
|
47
|
+
viewBox: "0 0 24 24",
|
|
48
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
49
|
+
fill: "#1D1E1E",
|
|
50
|
+
className: size === "large" ? "animate-spin" : "",
|
|
51
|
+
"aria-label": "Loading",
|
|
52
|
+
children: [
|
|
53
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
54
|
+
"animate",
|
|
55
|
+
{
|
|
56
|
+
attributeName: "opacity",
|
|
57
|
+
begin: "0s",
|
|
58
|
+
dur: "1s",
|
|
59
|
+
from: "1",
|
|
60
|
+
to: "0",
|
|
61
|
+
repeatCount: "indefinite"
|
|
62
|
+
}
|
|
63
|
+
) }),
|
|
64
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
"animate",
|
|
66
|
+
{
|
|
67
|
+
attributeName: "opacity",
|
|
68
|
+
begin: "-0.875s",
|
|
69
|
+
dur: "1s",
|
|
70
|
+
from: "1",
|
|
71
|
+
to: "0",
|
|
72
|
+
repeatCount: "indefinite"
|
|
73
|
+
}
|
|
74
|
+
) }),
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
76
|
+
"animate",
|
|
77
|
+
{
|
|
78
|
+
attributeName: "opacity",
|
|
79
|
+
begin: "-0.75s",
|
|
80
|
+
dur: "1s",
|
|
81
|
+
from: "1",
|
|
82
|
+
to: "0",
|
|
83
|
+
repeatCount: "indefinite"
|
|
84
|
+
}
|
|
85
|
+
) }),
|
|
86
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
87
|
+
"animate",
|
|
88
|
+
{
|
|
89
|
+
attributeName: "opacity",
|
|
90
|
+
begin: "-0.625s",
|
|
91
|
+
dur: "1s",
|
|
92
|
+
from: "1",
|
|
93
|
+
to: "0",
|
|
94
|
+
repeatCount: "indefinite"
|
|
95
|
+
}
|
|
96
|
+
) }),
|
|
97
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
98
|
+
"animate",
|
|
99
|
+
{
|
|
100
|
+
attributeName: "opacity",
|
|
101
|
+
begin: "-0.5s",
|
|
102
|
+
dur: "1s",
|
|
103
|
+
from: "1",
|
|
104
|
+
to: "0",
|
|
105
|
+
repeatCount: "indefinite"
|
|
106
|
+
}
|
|
107
|
+
) }),
|
|
108
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
109
|
+
"animate",
|
|
110
|
+
{
|
|
111
|
+
attributeName: "opacity",
|
|
112
|
+
begin: "-0.375s",
|
|
113
|
+
dur: "1s",
|
|
114
|
+
from: "1",
|
|
115
|
+
to: "0",
|
|
116
|
+
repeatCount: "indefinite"
|
|
117
|
+
}
|
|
118
|
+
) }),
|
|
119
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
120
|
+
"animate",
|
|
121
|
+
{
|
|
122
|
+
attributeName: "opacity",
|
|
123
|
+
begin: "-0.25s",
|
|
124
|
+
dur: "1s",
|
|
125
|
+
from: "1",
|
|
126
|
+
to: "0",
|
|
127
|
+
repeatCount: "indefinite"
|
|
128
|
+
}
|
|
129
|
+
) }),
|
|
130
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
131
|
+
"animate",
|
|
132
|
+
{
|
|
133
|
+
attributeName: "opacity",
|
|
134
|
+
begin: "-0.125s",
|
|
135
|
+
dur: "1s",
|
|
136
|
+
from: "1",
|
|
137
|
+
to: "0",
|
|
138
|
+
repeatCount: "indefinite"
|
|
139
|
+
}
|
|
140
|
+
) })
|
|
141
|
+
]
|
|
142
|
+
}
|
|
143
|
+
);
|
|
144
|
+
};
|
|
145
|
+
Spinner.displayName = "Spinner";
|
|
146
|
+
|
|
147
|
+
// src/components/LoadingScrim.tsx
|
|
148
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
149
|
+
function LoadingScrim({ className }) {
|
|
150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
151
|
+
"div",
|
|
152
|
+
{
|
|
153
|
+
className: (0, import_clsx.default)(
|
|
154
|
+
"fixed inset-0 z-50 flex items-center justify-center bg-neutral-600/30",
|
|
155
|
+
className
|
|
156
|
+
),
|
|
157
|
+
"aria-modal": "true",
|
|
158
|
+
role: "dialog",
|
|
159
|
+
tabIndex: -1,
|
|
160
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "large" }) })
|
|
161
|
+
}
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
LoadingScrim.displayName = "LoadingScrim";
|
|
165
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
166
|
+
0 && (module.exports = {
|
|
167
|
+
LoadingScrim
|
|
168
|
+
});
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Spinner
|
|
3
|
+
} from "../chunk-4F6VQXKY.js";
|
|
4
|
+
import "../chunk-ORMEWXMH.js";
|
|
5
|
+
|
|
6
|
+
// src/components/LoadingScrim.tsx
|
|
7
|
+
import clsx from "clsx";
|
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
|
9
|
+
function LoadingScrim({ className }) {
|
|
10
|
+
return /* @__PURE__ */ jsx(
|
|
11
|
+
"div",
|
|
12
|
+
{
|
|
13
|
+
className: clsx(
|
|
14
|
+
"fixed inset-0 z-50 flex items-center justify-center bg-neutral-600/30",
|
|
15
|
+
className
|
|
16
|
+
),
|
|
17
|
+
"aria-modal": "true",
|
|
18
|
+
role: "dialog",
|
|
19
|
+
tabIndex: -1,
|
|
20
|
+
children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Spinner, { size: "large" }) })
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
LoadingScrim.displayName = "LoadingScrim";
|
|
25
|
+
export {
|
|
26
|
+
LoadingScrim
|
|
27
|
+
};
|
|
@@ -1950,7 +1950,13 @@ function SelectPaymentMethod(props) {
|
|
|
1950
1950
|
{
|
|
1951
1951
|
isOpen: selectedMethod === "CCPayment",
|
|
1952
1952
|
title: "Pay by Credit/Debit Card",
|
|
1953
|
-
before: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1953
|
+
before: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1954
|
+
Radio,
|
|
1955
|
+
{
|
|
1956
|
+
checked: selectedMethod === "CCPayment",
|
|
1957
|
+
onClick: (e) => e.preventDefault()
|
|
1958
|
+
}
|
|
1959
|
+
),
|
|
1954
1960
|
onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
|
|
1955
1961
|
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
|
|
1956
1962
|
}
|
|
@@ -1994,8 +2000,7 @@ function ACHSelector(props) {
|
|
|
1994
2000
|
before: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1995
2001
|
Radio,
|
|
1996
2002
|
{
|
|
1997
|
-
checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
|
|
1998
|
-
readOnly: true
|
|
2003
|
+
checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
|
|
1999
2004
|
}
|
|
2000
2005
|
),
|
|
2001
2006
|
onClick: () => setIsOpen((prev) => !prev),
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
PaymentOnAccountModal,
|
|
3
3
|
calculateSurcharge
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-
|
|
4
|
+
} from "../chunk-OX3HKFIH.js";
|
|
5
|
+
import "../chunk-KYMBBPEW.js";
|
|
6
6
|
import "../chunk-TTO4PL7Y.js";
|
|
7
7
|
import "../chunk-QIHDPSOM.js";
|
|
8
8
|
import "../chunk-4RJKB7LC.js";
|
|
@@ -1018,7 +1018,13 @@ function SelectPaymentMethod(props) {
|
|
|
1018
1018
|
{
|
|
1019
1019
|
isOpen: selectedMethod === "CCPayment",
|
|
1020
1020
|
title: "Pay by Credit/Debit Card",
|
|
1021
|
-
before: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1021
|
+
before: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1022
|
+
Radio,
|
|
1023
|
+
{
|
|
1024
|
+
checked: selectedMethod === "CCPayment",
|
|
1025
|
+
onClick: (e) => e.preventDefault()
|
|
1026
|
+
}
|
|
1027
|
+
),
|
|
1022
1028
|
onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
|
|
1023
1029
|
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
|
|
1024
1030
|
}
|
|
@@ -1062,8 +1068,7 @@ function ACHSelector(props) {
|
|
|
1062
1068
|
before: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1063
1069
|
Radio,
|
|
1064
1070
|
{
|
|
1065
|
-
checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
|
|
1066
|
-
readOnly: true
|
|
1071
|
+
checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
|
|
1067
1072
|
}
|
|
1068
1073
|
),
|
|
1069
1074
|
onClick: () => setIsOpen((prev) => !prev),
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/Spinner.tsx
|
|
21
|
+
var Spinner_exports = {};
|
|
22
|
+
__export(Spinner_exports, {
|
|
23
|
+
Spinner: () => Spinner
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(Spinner_exports);
|
|
26
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
27
|
+
var Spinner = ({ size = "small" }) => {
|
|
28
|
+
const dimension = size === "large" ? 48 : 24;
|
|
29
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
30
|
+
"svg",
|
|
31
|
+
{
|
|
32
|
+
width: dimension,
|
|
33
|
+
height: dimension,
|
|
34
|
+
viewBox: "0 0 24 24",
|
|
35
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
36
|
+
fill: "#1D1E1E",
|
|
37
|
+
className: size === "large" ? "animate-spin" : "",
|
|
38
|
+
"aria-label": "Loading",
|
|
39
|
+
children: [
|
|
40
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
41
|
+
"animate",
|
|
42
|
+
{
|
|
43
|
+
attributeName: "opacity",
|
|
44
|
+
begin: "0s",
|
|
45
|
+
dur: "1s",
|
|
46
|
+
from: "1",
|
|
47
|
+
to: "0",
|
|
48
|
+
repeatCount: "indefinite"
|
|
49
|
+
}
|
|
50
|
+
) }),
|
|
51
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
52
|
+
"animate",
|
|
53
|
+
{
|
|
54
|
+
attributeName: "opacity",
|
|
55
|
+
begin: "-0.875s",
|
|
56
|
+
dur: "1s",
|
|
57
|
+
from: "1",
|
|
58
|
+
to: "0",
|
|
59
|
+
repeatCount: "indefinite"
|
|
60
|
+
}
|
|
61
|
+
) }),
|
|
62
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
63
|
+
"animate",
|
|
64
|
+
{
|
|
65
|
+
attributeName: "opacity",
|
|
66
|
+
begin: "-0.75s",
|
|
67
|
+
dur: "1s",
|
|
68
|
+
from: "1",
|
|
69
|
+
to: "0",
|
|
70
|
+
repeatCount: "indefinite"
|
|
71
|
+
}
|
|
72
|
+
) }),
|
|
73
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
74
|
+
"animate",
|
|
75
|
+
{
|
|
76
|
+
attributeName: "opacity",
|
|
77
|
+
begin: "-0.625s",
|
|
78
|
+
dur: "1s",
|
|
79
|
+
from: "1",
|
|
80
|
+
to: "0",
|
|
81
|
+
repeatCount: "indefinite"
|
|
82
|
+
}
|
|
83
|
+
) }),
|
|
84
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
85
|
+
"animate",
|
|
86
|
+
{
|
|
87
|
+
attributeName: "opacity",
|
|
88
|
+
begin: "-0.5s",
|
|
89
|
+
dur: "1s",
|
|
90
|
+
from: "1",
|
|
91
|
+
to: "0",
|
|
92
|
+
repeatCount: "indefinite"
|
|
93
|
+
}
|
|
94
|
+
) }),
|
|
95
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
96
|
+
"animate",
|
|
97
|
+
{
|
|
98
|
+
attributeName: "opacity",
|
|
99
|
+
begin: "-0.375s",
|
|
100
|
+
dur: "1s",
|
|
101
|
+
from: "1",
|
|
102
|
+
to: "0",
|
|
103
|
+
repeatCount: "indefinite"
|
|
104
|
+
}
|
|
105
|
+
) }),
|
|
106
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
|
+
"animate",
|
|
108
|
+
{
|
|
109
|
+
attributeName: "opacity",
|
|
110
|
+
begin: "-0.25s",
|
|
111
|
+
dur: "1s",
|
|
112
|
+
from: "1",
|
|
113
|
+
to: "0",
|
|
114
|
+
repeatCount: "indefinite"
|
|
115
|
+
}
|
|
116
|
+
) }),
|
|
117
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
118
|
+
"animate",
|
|
119
|
+
{
|
|
120
|
+
attributeName: "opacity",
|
|
121
|
+
begin: "-0.125s",
|
|
122
|
+
dur: "1s",
|
|
123
|
+
from: "1",
|
|
124
|
+
to: "0",
|
|
125
|
+
repeatCount: "indefinite"
|
|
126
|
+
}
|
|
127
|
+
) })
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
);
|
|
131
|
+
};
|
|
132
|
+
Spinner.displayName = "Spinner";
|
|
133
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
134
|
+
0 && (module.exports = {
|
|
135
|
+
Spinner
|
|
136
|
+
});
|
|
@@ -1785,6 +1785,7 @@ var DataGridCell = (0, import_react10.memo)(
|
|
|
1785
1785
|
"flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
|
|
1786
1786
|
"focus-within:!z-10",
|
|
1787
1787
|
"overflow-x-hidden",
|
|
1788
|
+
"overflow-y-hidden",
|
|
1788
1789
|
component === "input" && "border",
|
|
1789
1790
|
component === "input" && !error && !warning && "border-border-primary-normal",
|
|
1790
1791
|
component === "input" && error && "border-border-primary-error",
|
|
@@ -2874,13 +2875,14 @@ function DataGrid({
|
|
|
2874
2875
|
),
|
|
2875
2876
|
useMenuDefaultMinWidth,
|
|
2876
2877
|
children: [
|
|
2877
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
|
|
2878
|
+
typeof cellValue !== "number" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
|
|
2878
2879
|
getSortIcon(header.column.getIsSorted()),
|
|
2879
2880
|
!header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
|
|
2880
2881
|
header.column.getNextSortingOrder(),
|
|
2881
2882
|
true
|
|
2882
2883
|
),
|
|
2883
2884
|
header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
|
|
2885
|
+
typeof cellValue === "number" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { tall: true, children: header.column.columnDef.header }),
|
|
2884
2886
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2885
2887
|
"div",
|
|
2886
2888
|
{
|
|
@@ -4469,7 +4471,13 @@ function SelectPaymentMethod(props) {
|
|
|
4469
4471
|
{
|
|
4470
4472
|
isOpen: selectedMethod === "CCPayment",
|
|
4471
4473
|
title: "Pay by Credit/Debit Card",
|
|
4472
|
-
before: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4474
|
+
before: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4475
|
+
Radio,
|
|
4476
|
+
{
|
|
4477
|
+
checked: selectedMethod === "CCPayment",
|
|
4478
|
+
onClick: (e) => e.preventDefault()
|
|
4479
|
+
}
|
|
4480
|
+
),
|
|
4473
4481
|
onClick: () => handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment"),
|
|
4474
4482
|
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { className: "w-full", onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Proceed to Payment" })
|
|
4475
4483
|
}
|
|
@@ -4513,8 +4521,7 @@ function ACHSelector(props) {
|
|
|
4513
4521
|
before: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
4514
4522
|
Radio,
|
|
4515
4523
|
{
|
|
4516
|
-
checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
|
|
4517
|
-
readOnly: true
|
|
4524
|
+
checked: !!selectedBankGuid && selectedMethod === "ACHPayment"
|
|
4518
4525
|
}
|
|
4519
4526
|
),
|
|
4520
4527
|
onClick: () => setIsOpen((prev) => !prev),
|
package/dist/components/index.js
CHANGED
|
@@ -6,8 +6,8 @@ import {
|
|
|
6
6
|
} from "../chunk-Y4HUYAI5.js";
|
|
7
7
|
import {
|
|
8
8
|
PaymentOnAccountModal
|
|
9
|
-
} from "../chunk-
|
|
10
|
-
import "../chunk-
|
|
9
|
+
} from "../chunk-OX3HKFIH.js";
|
|
10
|
+
import "../chunk-KYMBBPEW.js";
|
|
11
11
|
import "../chunk-TTO4PL7Y.js";
|
|
12
12
|
import "../chunk-QIHDPSOM.js";
|
|
13
13
|
import "../chunk-4RJKB7LC.js";
|
|
@@ -25,7 +25,7 @@ import {
|
|
|
25
25
|
DataGridCell,
|
|
26
26
|
DragAlongCell,
|
|
27
27
|
DraggableCellHeader
|
|
28
|
-
} from "../chunk-
|
|
28
|
+
} from "../chunk-ZEGVZ5NW.js";
|
|
29
29
|
import {
|
|
30
30
|
Menu
|
|
31
31
|
} from "../chunk-37TJJQL3.js";
|
|
@@ -853,13 +853,14 @@ function DataGrid({
|
|
|
853
853
|
),
|
|
854
854
|
useMenuDefaultMinWidth,
|
|
855
855
|
children: [
|
|
856
|
-
/* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
|
|
856
|
+
typeof cellValue !== "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
|
|
857
857
|
getSortIcon(header.column.getIsSorted()),
|
|
858
858
|
!header.column.getIsSorted() && header.column.getCanSort() && getSortIcon(
|
|
859
859
|
header.column.getNextSortingOrder(),
|
|
860
860
|
true
|
|
861
861
|
),
|
|
862
862
|
header.column.getSortIndex() !== -1 && table.getState().sorting.length > 1 && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.getSortIndex() + 1 }),
|
|
863
|
+
typeof cellValue === "number" && /* @__PURE__ */ jsx8(Subheader, { tall: true, children: header.column.columnDef.header }),
|
|
863
864
|
/* @__PURE__ */ jsx8(
|
|
864
865
|
"div",
|
|
865
866
|
{
|
package/dist/index.css
CHANGED
|
@@ -1602,6 +1602,12 @@
|
|
|
1602
1602
|
.bg-neutral-600 {
|
|
1603
1603
|
background-color: var(--color-neutral-600);
|
|
1604
1604
|
}
|
|
1605
|
+
.bg-neutral-600\/30 {
|
|
1606
|
+
background-color: color-mix(in srgb, #000000 30%, transparent);
|
|
1607
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1608
|
+
background-color: color-mix(in oklab, var(--color-neutral-600) 30%, transparent);
|
|
1609
|
+
}
|
|
1610
|
+
}
|
|
1605
1611
|
.bg-neutral-600\/50 {
|
|
1606
1612
|
background-color: color-mix(in srgb, #000000 50%, transparent);
|
|
1607
1613
|
@supports (color: color-mix(in lab, red, red)) {
|
package/package.json
CHANGED
|
@@ -393,9 +393,11 @@ export function DataGrid<T extends Record<string, unknown>>({
|
|
|
393
393
|
)}
|
|
394
394
|
useMenuDefaultMinWidth={useMenuDefaultMinWidth}
|
|
395
395
|
>
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
396
|
+
{typeof cellValue !== "number" && (
|
|
397
|
+
<Subheader tall>
|
|
398
|
+
{header.column.columnDef.header}
|
|
399
|
+
</Subheader>
|
|
400
|
+
)}
|
|
399
401
|
|
|
400
402
|
{getSortIcon(header.column.getIsSorted())}
|
|
401
403
|
|
|
@@ -412,7 +414,11 @@ export function DataGrid<T extends Record<string, unknown>>({
|
|
|
412
414
|
{header.column.getSortIndex() + 1}
|
|
413
415
|
</Subheader>
|
|
414
416
|
)}
|
|
415
|
-
|
|
417
|
+
{typeof cellValue === "number" && (
|
|
418
|
+
<Subheader tall>
|
|
419
|
+
{header.column.columnDef.header}
|
|
420
|
+
</Subheader>
|
|
421
|
+
)}
|
|
416
422
|
<div
|
|
417
423
|
onDoubleClick={(e) => {
|
|
418
424
|
e.stopPropagation();
|
|
@@ -149,6 +149,7 @@ export const DataGridCell = memo(
|
|
|
149
149
|
"flex flex-1 items-center gap-1 whitespace-nowrap h-10 relative text-text-primary-normal",
|
|
150
150
|
"focus-within:!z-10",
|
|
151
151
|
"overflow-x-hidden",
|
|
152
|
+
"overflow-y-hidden",
|
|
152
153
|
component === "input" && "border",
|
|
153
154
|
component === "input" &&
|
|
154
155
|
!error &&
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
|
|
4
|
+
import { Spinner } from "./Spinner";
|
|
5
|
+
/**
|
|
6
|
+
* LoadingScrim
|
|
7
|
+
*
|
|
8
|
+
* Displays a full-screen backdrop with a centered loading spinner.
|
|
9
|
+
* Disables interaction with underlying UI.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* <LoadingScrim />
|
|
13
|
+
*/
|
|
14
|
+
export function LoadingScrim({ className }: { className?: string }) {
|
|
15
|
+
return (
|
|
16
|
+
<div
|
|
17
|
+
className={clsx(
|
|
18
|
+
"fixed inset-0 z-50 flex items-center justify-center bg-neutral-600/30",
|
|
19
|
+
className,
|
|
20
|
+
)}
|
|
21
|
+
aria-modal="true"
|
|
22
|
+
role="dialog"
|
|
23
|
+
tabIndex={-1}
|
|
24
|
+
>
|
|
25
|
+
<div className="flex items-center justify-center">
|
|
26
|
+
<Spinner size="large" />
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
LoadingScrim.displayName = "LoadingScrim";
|
|
@@ -83,7 +83,12 @@ export function SelectPaymentMethod(props: SelectPaymentMethodProps) {
|
|
|
83
83
|
<Accordion
|
|
84
84
|
isOpen={selectedMethod === "CCPayment"}
|
|
85
85
|
title="Pay by Credit/Debit Card"
|
|
86
|
-
before={
|
|
86
|
+
before={
|
|
87
|
+
<Radio
|
|
88
|
+
checked={selectedMethod === "CCPayment"}
|
|
89
|
+
onClick={(e) => e.preventDefault()}
|
|
90
|
+
/>
|
|
91
|
+
}
|
|
87
92
|
onClick={() =>
|
|
88
93
|
handleToggle(selectedMethod === "CCPayment" ? null : "CCPayment")
|
|
89
94
|
}
|
|
@@ -153,7 +158,6 @@ function ACHSelector(props: ACHSelectorProps) {
|
|
|
153
158
|
before={
|
|
154
159
|
<Radio
|
|
155
160
|
checked={!!selectedBankGuid && selectedMethod === "ACHPayment"}
|
|
156
|
-
readOnly
|
|
157
161
|
/>
|
|
158
162
|
}
|
|
159
163
|
onClick={() => setIsOpen((prev) => !prev)}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
type SpinnerProps = {
|
|
4
|
+
size?: "small" | "large";
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
export const Spinner: React.FC<SpinnerProps> = ({ size = "small" }) => {
|
|
8
|
+
const dimension = size === "large" ? 48 : 24;
|
|
9
|
+
return (
|
|
10
|
+
<svg
|
|
11
|
+
width={dimension}
|
|
12
|
+
height={dimension}
|
|
13
|
+
viewBox="0 0 24 24"
|
|
14
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
15
|
+
fill="#1D1E1E"
|
|
16
|
+
className={size === "large" ? "animate-spin" : ""}
|
|
17
|
+
aria-label="Loading"
|
|
18
|
+
>
|
|
19
|
+
<circle cx="12" cy="4" r="2" opacity="1">
|
|
20
|
+
<animate
|
|
21
|
+
attributeName="opacity"
|
|
22
|
+
begin="0s"
|
|
23
|
+
dur="1s"
|
|
24
|
+
from="1"
|
|
25
|
+
to="0"
|
|
26
|
+
repeatCount="indefinite"
|
|
27
|
+
/>
|
|
28
|
+
</circle>
|
|
29
|
+
<circle cx="17.666" cy="6.334" r="2" opacity="0.125">
|
|
30
|
+
<animate
|
|
31
|
+
attributeName="opacity"
|
|
32
|
+
begin="-0.875s"
|
|
33
|
+
dur="1s"
|
|
34
|
+
from="1"
|
|
35
|
+
to="0"
|
|
36
|
+
repeatCount="indefinite"
|
|
37
|
+
/>
|
|
38
|
+
</circle>
|
|
39
|
+
<circle cx="20" cy="12" r="2" opacity="0.25">
|
|
40
|
+
<animate
|
|
41
|
+
attributeName="opacity"
|
|
42
|
+
begin="-0.75s"
|
|
43
|
+
dur="1s"
|
|
44
|
+
from="1"
|
|
45
|
+
to="0"
|
|
46
|
+
repeatCount="indefinite"
|
|
47
|
+
/>
|
|
48
|
+
</circle>
|
|
49
|
+
<circle cx="17.666" cy="17.666" r="2" opacity="0.375">
|
|
50
|
+
<animate
|
|
51
|
+
attributeName="opacity"
|
|
52
|
+
begin="-0.625s"
|
|
53
|
+
dur="1s"
|
|
54
|
+
from="1"
|
|
55
|
+
to="0"
|
|
56
|
+
repeatCount="indefinite"
|
|
57
|
+
/>
|
|
58
|
+
</circle>
|
|
59
|
+
<circle cx="12" cy="20" r="2" opacity="0.5">
|
|
60
|
+
<animate
|
|
61
|
+
attributeName="opacity"
|
|
62
|
+
begin="-0.5s"
|
|
63
|
+
dur="1s"
|
|
64
|
+
from="1"
|
|
65
|
+
to="0"
|
|
66
|
+
repeatCount="indefinite"
|
|
67
|
+
/>
|
|
68
|
+
</circle>
|
|
69
|
+
<circle cx="6.334" cy="17.666" r="2" opacity="0.625">
|
|
70
|
+
<animate
|
|
71
|
+
attributeName="opacity"
|
|
72
|
+
begin="-0.375s"
|
|
73
|
+
dur="1s"
|
|
74
|
+
from="1"
|
|
75
|
+
to="0"
|
|
76
|
+
repeatCount="indefinite"
|
|
77
|
+
/>
|
|
78
|
+
</circle>
|
|
79
|
+
<circle cx="4" cy="12" r="2" opacity="0.75">
|
|
80
|
+
<animate
|
|
81
|
+
attributeName="opacity"
|
|
82
|
+
begin="-0.25s"
|
|
83
|
+
dur="1s"
|
|
84
|
+
from="1"
|
|
85
|
+
to="0"
|
|
86
|
+
repeatCount="indefinite"
|
|
87
|
+
/>
|
|
88
|
+
</circle>
|
|
89
|
+
<circle cx="6.334" cy="6.334" r="2" opacity="0.875">
|
|
90
|
+
<animate
|
|
91
|
+
attributeName="opacity"
|
|
92
|
+
begin="-0.125s"
|
|
93
|
+
dur="1s"
|
|
94
|
+
from="1"
|
|
95
|
+
to="0"
|
|
96
|
+
repeatCount="indefinite"
|
|
97
|
+
/>
|
|
98
|
+
</circle>
|
|
99
|
+
</svg>
|
|
100
|
+
);
|
|
101
|
+
};
|
|
102
|
+
Spinner.displayName = "Spinner";
|