jcicl 1.0.9 → 1.0.11
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/.chunks/DefaultPropsProvider.js +5 -5
- package/.chunks/Paper.js +1 -1
- package/.chunks/Popper.js +1 -1
- package/.chunks/Portal.js +205 -187
- package/.chunks/TextField.js +13 -15
- package/.chunks/check.js +11 -0
- package/.chunks/index.js +83 -6
- package/.chunks/useMediaQuery.js +1 -1
- package/.chunks/useSlot.js +1 -1
- package/.chunks/x.js +4 -12
- package/AppContainer/AppContainer.js +46 -47
- package/Button/Button.d.ts +2 -1
- package/Button/Button.js +234 -183
- package/EditableDetailItemWithIcon/EditableDetailItemWithIcon.d.ts +2 -0
- package/EditableDetailItemWithIcon/EditableDetailItemWithIcon.js +53 -41
- package/FormFields/FormFields.d.ts +1 -1
- package/FormFields/FormFields.js +52 -37
- package/LabeledDropdown/LabeledDropdown.js +4 -5
- package/Stepper/Stepper.js +1 -1
- package/Table/Table.js +299 -268
- package/Toast/Toast.js +8 -7
- package/Toast/ToastHelpers.d.ts +2 -0
- package/Toast/ToastHelpers.js +22 -7
- package/Toast/index.d.ts +1 -1
- package/Toast/index.js +8 -6
- package/Tooltip/Tooltip.js +18 -20
- package/package.json +1 -1
- package/utils.d.ts +1 -0
- package/utils.js +34 -15
- package/.chunks/resolveComponentProps.js +0 -80
- package/.chunks/useTheme.js +0 -23
package/Button/Button.js
CHANGED
|
@@ -1,39 +1,42 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
1
|
+
import { jsxs as I, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import * as w from "react";
|
|
3
|
+
import { useState as q } from "react";
|
|
4
|
+
import { g as J, a as K, s, r as Q, c as p, h as X, u as Y, b as P, P as r, d as Z, e as $ } from "../.chunks/DefaultPropsProvider.js";
|
|
5
|
+
import { m as oo } from "../.chunks/memoTheme.js";
|
|
6
|
+
import { c as to } from "../.chunks/createSimplePaletteValueFilter.js";
|
|
7
|
+
import { B as O } from "../.chunks/ButtonBase.js";
|
|
8
|
+
import { i as ro } from "../.chunks/emotion-styled.browser.esm.js";
|
|
8
9
|
import { c as v } from "../.chunks/emotion-react.browser.esm.js";
|
|
9
|
-
import
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
import t from "../theme.js";
|
|
11
|
+
import { Tooltip as ao } from "../Tooltip/Tooltip.js";
|
|
12
|
+
import { C as eo } from "../.chunks/check.js";
|
|
13
|
+
function no(o) {
|
|
14
|
+
return J("MuiButton", o);
|
|
12
15
|
}
|
|
13
|
-
const g =
|
|
14
|
-
process.env.NODE_ENV !== "production" && (
|
|
15
|
-
const
|
|
16
|
-
process.env.NODE_ENV !== "production" && (
|
|
17
|
-
const
|
|
16
|
+
const g = K("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge"]), W = /* @__PURE__ */ w.createContext({});
|
|
17
|
+
process.env.NODE_ENV !== "production" && (W.displayName = "ButtonGroupContext");
|
|
18
|
+
const j = /* @__PURE__ */ w.createContext(void 0);
|
|
19
|
+
process.env.NODE_ENV !== "production" && (j.displayName = "ButtonGroupButtonContext");
|
|
20
|
+
const io = (o) => {
|
|
18
21
|
const {
|
|
19
22
|
color: a,
|
|
20
|
-
disableElevation:
|
|
21
|
-
fullWidth:
|
|
23
|
+
disableElevation: e,
|
|
24
|
+
fullWidth: n,
|
|
22
25
|
size: d,
|
|
23
26
|
variant: u,
|
|
24
27
|
classes: b
|
|
25
28
|
} = o, x = {
|
|
26
|
-
root: ["root", u, `${u}${p(a)}`, `size${p(d)}`, `${u}Size${p(d)}`, `color${p(a)}`,
|
|
29
|
+
root: ["root", u, `${u}${p(a)}`, `size${p(d)}`, `${u}Size${p(d)}`, `color${p(a)}`, e && "disableElevation", n && "fullWidth"],
|
|
27
30
|
label: ["label"],
|
|
28
31
|
startIcon: ["icon", "startIcon", `iconSize${p(d)}`],
|
|
29
32
|
endIcon: ["icon", "endIcon", `iconSize${p(d)}`]
|
|
30
|
-
}, f =
|
|
33
|
+
}, f = Z(x, no, b);
|
|
31
34
|
return {
|
|
32
35
|
...b,
|
|
33
36
|
// forward the focused, disabled, etc. classes to the ButtonBase
|
|
34
37
|
...f
|
|
35
38
|
};
|
|
36
|
-
},
|
|
39
|
+
}, V = [{
|
|
37
40
|
props: {
|
|
38
41
|
size: "small"
|
|
39
42
|
},
|
|
@@ -60,20 +63,20 @@ const to = (o) => {
|
|
|
60
63
|
fontSize: 22
|
|
61
64
|
}
|
|
62
65
|
}
|
|
63
|
-
}],
|
|
64
|
-
shouldForwardProp: (o) =>
|
|
66
|
+
}], so = s(O, {
|
|
67
|
+
shouldForwardProp: (o) => Q(o) || o === "classes",
|
|
65
68
|
name: "MuiButton",
|
|
66
69
|
slot: "Root",
|
|
67
70
|
overridesResolver: (o, a) => {
|
|
68
71
|
const {
|
|
69
|
-
ownerState:
|
|
72
|
+
ownerState: e
|
|
70
73
|
} = o;
|
|
71
|
-
return [a.root, a[
|
|
74
|
+
return [a.root, a[e.variant], a[`${e.variant}${p(e.color)}`], a[`size${p(e.size)}`], a[`${e.variant}Size${p(e.size)}`], e.color === "inherit" && a.colorInherit, e.disableElevation && a.disableElevation, e.fullWidth && a.fullWidth];
|
|
72
75
|
}
|
|
73
|
-
})(
|
|
76
|
+
})(oo(({
|
|
74
77
|
theme: o
|
|
75
78
|
}) => {
|
|
76
|
-
const a = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800],
|
|
79
|
+
const a = o.palette.mode === "light" ? o.palette.grey[300] : o.palette.grey[800], e = o.palette.mode === "light" ? o.palette.grey.A100 : o.palette.grey[700];
|
|
77
80
|
return {
|
|
78
81
|
...o.typography.button,
|
|
79
82
|
minWidth: 64,
|
|
@@ -139,22 +142,22 @@ const to = (o) => {
|
|
|
139
142
|
color: "var(--variant-textColor)",
|
|
140
143
|
backgroundColor: "var(--variant-textBg)"
|
|
141
144
|
}
|
|
142
|
-
}, ...Object.entries(o.palette).filter(
|
|
145
|
+
}, ...Object.entries(o.palette).filter(to()).map(([n]) => ({
|
|
143
146
|
props: {
|
|
144
|
-
color:
|
|
147
|
+
color: n
|
|
145
148
|
},
|
|
146
149
|
style: {
|
|
147
|
-
"--variant-textColor": (o.vars || o).palette[
|
|
148
|
-
"--variant-outlinedColor": (o.vars || o).palette[
|
|
149
|
-
"--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[
|
|
150
|
-
"--variant-containedColor": (o.vars || o).palette[
|
|
151
|
-
"--variant-containedBg": (o.vars || o).palette[
|
|
150
|
+
"--variant-textColor": (o.vars || o).palette[n].main,
|
|
151
|
+
"--variant-outlinedColor": (o.vars || o).palette[n].main,
|
|
152
|
+
"--variant-outlinedBorder": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / 0.5)` : $(o.palette[n].main, 0.5),
|
|
153
|
+
"--variant-containedColor": (o.vars || o).palette[n].contrastText,
|
|
154
|
+
"--variant-containedBg": (o.vars || o).palette[n].main,
|
|
152
155
|
"@media (hover: hover)": {
|
|
153
156
|
"&:hover": {
|
|
154
|
-
"--variant-containedBg": (o.vars || o).palette[
|
|
155
|
-
"--variant-textBg": o.vars ? `rgba(${o.vars.palette[
|
|
156
|
-
"--variant-outlinedBorder": (o.vars || o).palette[
|
|
157
|
-
"--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[
|
|
157
|
+
"--variant-containedBg": (o.vars || o).palette[n].dark,
|
|
158
|
+
"--variant-textBg": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : $(o.palette[n].main, o.palette.action.hoverOpacity),
|
|
159
|
+
"--variant-outlinedBorder": (o.vars || o).palette[n].main,
|
|
160
|
+
"--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette[n].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : $(o.palette[n].main, o.palette.action.hoverOpacity)
|
|
158
161
|
}
|
|
159
162
|
}
|
|
160
163
|
}
|
|
@@ -168,7 +171,7 @@ const to = (o) => {
|
|
|
168
171
|
"--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedBg : a,
|
|
169
172
|
"@media (hover: hover)": {
|
|
170
173
|
"&:hover": {
|
|
171
|
-
"--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg :
|
|
174
|
+
"--variant-containedBg": o.vars ? o.vars.palette.Button.inheritContainedHoverBg : e,
|
|
172
175
|
"--variant-textBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : $(o.palette.text.primary, o.palette.action.hoverOpacity),
|
|
173
176
|
"--variant-outlinedBg": o.vars ? `rgba(${o.vars.palette.text.primaryChannel} / ${o.vars.palette.action.hoverOpacity})` : $(o.palette.text.primary, o.palette.action.hoverOpacity)
|
|
174
177
|
}
|
|
@@ -256,14 +259,14 @@ const to = (o) => {
|
|
|
256
259
|
}
|
|
257
260
|
}]
|
|
258
261
|
};
|
|
259
|
-
})),
|
|
262
|
+
})), lo = s("span", {
|
|
260
263
|
name: "MuiButton",
|
|
261
264
|
slot: "StartIcon",
|
|
262
265
|
overridesResolver: (o, a) => {
|
|
263
266
|
const {
|
|
264
|
-
ownerState:
|
|
267
|
+
ownerState: e
|
|
265
268
|
} = o;
|
|
266
|
-
return [a.startIcon, a[`iconSize${p(
|
|
269
|
+
return [a.startIcon, a[`iconSize${p(e.size)}`]];
|
|
267
270
|
}
|
|
268
271
|
})({
|
|
269
272
|
display: "inherit",
|
|
@@ -276,15 +279,15 @@ const to = (o) => {
|
|
|
276
279
|
style: {
|
|
277
280
|
marginLeft: -2
|
|
278
281
|
}
|
|
279
|
-
}, ...
|
|
280
|
-
}),
|
|
282
|
+
}, ...V]
|
|
283
|
+
}), co = s("span", {
|
|
281
284
|
name: "MuiButton",
|
|
282
285
|
slot: "EndIcon",
|
|
283
286
|
overridesResolver: (o, a) => {
|
|
284
287
|
const {
|
|
285
|
-
ownerState:
|
|
288
|
+
ownerState: e
|
|
286
289
|
} = o;
|
|
287
|
-
return [a.endIcon, a[`iconSize${p(
|
|
290
|
+
return [a.endIcon, a[`iconSize${p(e.size)}`]];
|
|
288
291
|
}
|
|
289
292
|
})({
|
|
290
293
|
display: "inherit",
|
|
@@ -297,62 +300,62 @@ const to = (o) => {
|
|
|
297
300
|
style: {
|
|
298
301
|
marginRight: -2
|
|
299
302
|
}
|
|
300
|
-
}, ...
|
|
301
|
-
}),
|
|
302
|
-
const
|
|
303
|
+
}, ...V]
|
|
304
|
+
}), F = /* @__PURE__ */ w.forwardRef(function(a, e) {
|
|
305
|
+
const n = w.useContext(W), d = w.useContext(j), u = X(n, a), b = Y({
|
|
303
306
|
props: u,
|
|
304
307
|
name: "MuiButton"
|
|
305
308
|
}), {
|
|
306
309
|
children: x,
|
|
307
310
|
color: f = "primary",
|
|
308
311
|
component: l = "button",
|
|
309
|
-
className:
|
|
310
|
-
disabled:
|
|
311
|
-
disableElevation:
|
|
312
|
-
disableFocusRipple:
|
|
313
|
-
endIcon:
|
|
314
|
-
focusVisibleClassName:
|
|
315
|
-
fullWidth:
|
|
316
|
-
size:
|
|
317
|
-
startIcon:
|
|
318
|
-
type:
|
|
319
|
-
variant:
|
|
320
|
-
...
|
|
321
|
-
} = b,
|
|
312
|
+
className: z,
|
|
313
|
+
disabled: B = !1,
|
|
314
|
+
disableElevation: c = !1,
|
|
315
|
+
disableFocusRipple: y = !1,
|
|
316
|
+
endIcon: m,
|
|
317
|
+
focusVisibleClassName: R,
|
|
318
|
+
fullWidth: k = !1,
|
|
319
|
+
size: L = "medium",
|
|
320
|
+
startIcon: T,
|
|
321
|
+
type: E,
|
|
322
|
+
variant: H = "text",
|
|
323
|
+
...D
|
|
324
|
+
} = b, C = {
|
|
322
325
|
...b,
|
|
323
326
|
color: f,
|
|
324
327
|
component: l,
|
|
325
|
-
disabled:
|
|
326
|
-
disableElevation:
|
|
327
|
-
disableFocusRipple:
|
|
328
|
-
fullWidth:
|
|
329
|
-
size:
|
|
330
|
-
type:
|
|
331
|
-
variant:
|
|
332
|
-
},
|
|
333
|
-
className:
|
|
334
|
-
ownerState:
|
|
335
|
-
children:
|
|
336
|
-
}),
|
|
337
|
-
className:
|
|
338
|
-
ownerState:
|
|
339
|
-
children:
|
|
340
|
-
}),
|
|
341
|
-
return /* @__PURE__ */
|
|
342
|
-
ownerState:
|
|
343
|
-
className:
|
|
328
|
+
disabled: B,
|
|
329
|
+
disableElevation: c,
|
|
330
|
+
disableFocusRipple: y,
|
|
331
|
+
fullWidth: k,
|
|
332
|
+
size: L,
|
|
333
|
+
type: E,
|
|
334
|
+
variant: H
|
|
335
|
+
}, h = io(C), U = T && /* @__PURE__ */ i(lo, {
|
|
336
|
+
className: h.startIcon,
|
|
337
|
+
ownerState: C,
|
|
338
|
+
children: T
|
|
339
|
+
}), _ = m && /* @__PURE__ */ i(co, {
|
|
340
|
+
className: h.endIcon,
|
|
341
|
+
ownerState: C,
|
|
342
|
+
children: m
|
|
343
|
+
}), A = d || "";
|
|
344
|
+
return /* @__PURE__ */ I(so, {
|
|
345
|
+
ownerState: C,
|
|
346
|
+
className: P(n.className, h.root, z, A),
|
|
344
347
|
component: l,
|
|
345
|
-
disabled:
|
|
346
|
-
focusRipple: !
|
|
347
|
-
focusVisibleClassName:
|
|
348
|
-
ref:
|
|
349
|
-
type:
|
|
350
|
-
...
|
|
351
|
-
classes:
|
|
352
|
-
children: [
|
|
348
|
+
disabled: B,
|
|
349
|
+
focusRipple: !y,
|
|
350
|
+
focusVisibleClassName: P(h.focusVisible, R),
|
|
351
|
+
ref: e,
|
|
352
|
+
type: E,
|
|
353
|
+
...D,
|
|
354
|
+
classes: h,
|
|
355
|
+
children: [U, x, _]
|
|
353
356
|
});
|
|
354
357
|
});
|
|
355
|
-
process.env.NODE_ENV !== "production" && (
|
|
358
|
+
process.env.NODE_ENV !== "production" && (F.propTypes = {
|
|
356
359
|
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
357
360
|
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
358
361
|
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
|
|
@@ -360,42 +363,42 @@ process.env.NODE_ENV !== "production" && (j.propTypes = {
|
|
|
360
363
|
/**
|
|
361
364
|
* The content of the component.
|
|
362
365
|
*/
|
|
363
|
-
children:
|
|
366
|
+
children: r.node,
|
|
364
367
|
/**
|
|
365
368
|
* Override or extend the styles applied to the component.
|
|
366
369
|
*/
|
|
367
|
-
classes:
|
|
370
|
+
classes: r.object,
|
|
368
371
|
/**
|
|
369
372
|
* @ignore
|
|
370
373
|
*/
|
|
371
|
-
className:
|
|
374
|
+
className: r.string,
|
|
372
375
|
/**
|
|
373
376
|
* The color of the component.
|
|
374
377
|
* It supports both default and custom theme colors, which can be added as shown in the
|
|
375
378
|
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
|
|
376
379
|
* @default 'primary'
|
|
377
380
|
*/
|
|
378
|
-
color:
|
|
381
|
+
color: r.oneOfType([r.oneOf(["inherit", "primary", "secondary", "success", "error", "info", "warning"]), r.string]),
|
|
379
382
|
/**
|
|
380
383
|
* The component used for the root node.
|
|
381
384
|
* Either a string to use a HTML element or a component.
|
|
382
385
|
*/
|
|
383
|
-
component:
|
|
386
|
+
component: r.elementType,
|
|
384
387
|
/**
|
|
385
388
|
* If `true`, the component is disabled.
|
|
386
389
|
* @default false
|
|
387
390
|
*/
|
|
388
|
-
disabled:
|
|
391
|
+
disabled: r.bool,
|
|
389
392
|
/**
|
|
390
393
|
* If `true`, no elevation is used.
|
|
391
394
|
* @default false
|
|
392
395
|
*/
|
|
393
|
-
disableElevation:
|
|
396
|
+
disableElevation: r.bool,
|
|
394
397
|
/**
|
|
395
398
|
* If `true`, the keyboard focus ripple is disabled.
|
|
396
399
|
* @default false
|
|
397
400
|
*/
|
|
398
|
-
disableFocusRipple:
|
|
401
|
+
disableFocusRipple: r.bool,
|
|
399
402
|
/**
|
|
400
403
|
* If `true`, the ripple effect is disabled.
|
|
401
404
|
*
|
|
@@ -403,61 +406,61 @@ process.env.NODE_ENV !== "production" && (j.propTypes = {
|
|
|
403
406
|
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
|
|
404
407
|
* @default false
|
|
405
408
|
*/
|
|
406
|
-
disableRipple:
|
|
409
|
+
disableRipple: r.bool,
|
|
407
410
|
/**
|
|
408
411
|
* Element placed after the children.
|
|
409
412
|
*/
|
|
410
|
-
endIcon:
|
|
413
|
+
endIcon: r.node,
|
|
411
414
|
/**
|
|
412
415
|
* @ignore
|
|
413
416
|
*/
|
|
414
|
-
focusVisibleClassName:
|
|
417
|
+
focusVisibleClassName: r.string,
|
|
415
418
|
/**
|
|
416
419
|
* If `true`, the button will take up the full width of its container.
|
|
417
420
|
* @default false
|
|
418
421
|
*/
|
|
419
|
-
fullWidth:
|
|
422
|
+
fullWidth: r.bool,
|
|
420
423
|
/**
|
|
421
424
|
* The URL to link to when the button is clicked.
|
|
422
425
|
* If defined, an `a` element will be used as the root node.
|
|
423
426
|
*/
|
|
424
|
-
href:
|
|
427
|
+
href: r.string,
|
|
425
428
|
/**
|
|
426
429
|
* The size of the component.
|
|
427
430
|
* `small` is equivalent to the dense button styling.
|
|
428
431
|
* @default 'medium'
|
|
429
432
|
*/
|
|
430
|
-
size:
|
|
433
|
+
size: r.oneOfType([r.oneOf(["small", "medium", "large"]), r.string]),
|
|
431
434
|
/**
|
|
432
435
|
* Element placed before the children.
|
|
433
436
|
*/
|
|
434
|
-
startIcon:
|
|
437
|
+
startIcon: r.node,
|
|
435
438
|
/**
|
|
436
439
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
437
440
|
*/
|
|
438
|
-
sx:
|
|
441
|
+
sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
|
|
439
442
|
/**
|
|
440
443
|
* @ignore
|
|
441
444
|
*/
|
|
442
|
-
type:
|
|
445
|
+
type: r.oneOfType([r.oneOf(["button", "reset", "submit"]), r.string]),
|
|
443
446
|
/**
|
|
444
447
|
* The variant to use.
|
|
445
448
|
* @default 'text'
|
|
446
449
|
*/
|
|
447
|
-
variant:
|
|
450
|
+
variant: r.oneOfType([r.oneOf(["contained", "outlined", "text"]), r.string])
|
|
448
451
|
});
|
|
449
|
-
const
|
|
452
|
+
const M = [
|
|
450
453
|
"active",
|
|
451
454
|
"customBackgroundColor",
|
|
452
455
|
"customHoverColor",
|
|
453
456
|
"customTextColor",
|
|
454
457
|
"customShadow1",
|
|
455
458
|
"customShadow2"
|
|
456
|
-
],
|
|
459
|
+
], S = s(F, { shouldForwardProp: (o) => !M.includes(o) })`
|
|
457
460
|
text-transform: none;
|
|
458
461
|
&:disabled {
|
|
459
462
|
opacity: 0.5;
|
|
460
|
-
color: ${
|
|
463
|
+
color: ${t.colors.black};
|
|
461
464
|
display: flex;
|
|
462
465
|
justify-content: center;
|
|
463
466
|
align-items: center;
|
|
@@ -466,47 +469,47 @@ const W = [
|
|
|
466
469
|
span {
|
|
467
470
|
align-items: center !important;
|
|
468
471
|
}
|
|
469
|
-
`,
|
|
470
|
-
background-color: ${
|
|
472
|
+
`, po = s(S)`
|
|
473
|
+
background-color: ${t.colors.green};
|
|
471
474
|
height: 2.5rem;
|
|
472
475
|
border: 2px solid transparent;
|
|
473
|
-
color: ${
|
|
476
|
+
color: ${t.colors.white};
|
|
474
477
|
transition: 313ms all ease-in;
|
|
475
478
|
border-radius: 32px;
|
|
476
479
|
font-weight: 400;
|
|
477
480
|
padding: 0.75rem 2rem;
|
|
478
481
|
font-size: 1rem;
|
|
479
|
-
box-shadow: ${
|
|
482
|
+
box-shadow: ${t.boxShadows.gray63};
|
|
480
483
|
&:hover,
|
|
481
484
|
:focus-visible {
|
|
482
|
-
background-color: ${
|
|
483
|
-
box-shadow: ${
|
|
485
|
+
background-color: ${t.colors.darkGreen};
|
|
486
|
+
box-shadow: ${t.boxShadows.black63};
|
|
484
487
|
}
|
|
485
488
|
&:disabled {
|
|
486
|
-
background-color: ${
|
|
489
|
+
background-color: ${t.colors.darkGreen};
|
|
487
490
|
}
|
|
488
|
-
`,
|
|
489
|
-
shouldForwardProp: (o) => !
|
|
491
|
+
`, uo = s(S, {
|
|
492
|
+
shouldForwardProp: (o) => !M.includes(o)
|
|
490
493
|
})(
|
|
491
494
|
({
|
|
492
|
-
customBackgroundColor: o =
|
|
493
|
-
customHoverColor: a =
|
|
494
|
-
customTextColor:
|
|
495
|
-
customShadow1:
|
|
496
|
-
customShadow2: d =
|
|
495
|
+
customBackgroundColor: o = t.colors.green,
|
|
496
|
+
customHoverColor: a = t.colors.darkGreen,
|
|
497
|
+
customTextColor: e = t.colors.white,
|
|
498
|
+
customShadow1: n = t.boxShadows.gray63,
|
|
499
|
+
customShadow2: d = t.boxShadows.black63
|
|
497
500
|
}) => ({
|
|
498
501
|
...v`
|
|
499
502
|
background-color: ${o};
|
|
500
503
|
border-radius: 0;
|
|
501
504
|
height: 2.5rem;
|
|
502
505
|
border: 2px solid transparent;
|
|
503
|
-
color: ${
|
|
506
|
+
color: ${e};
|
|
504
507
|
transition: 313ms all ease-in;
|
|
505
508
|
border-radius: 32px;
|
|
506
509
|
font-weight: 400;
|
|
507
510
|
padding: 0.75rem 2rem;
|
|
508
511
|
font-size: 1rem;
|
|
509
|
-
box-shadow: ${
|
|
512
|
+
box-shadow: ${n};
|
|
510
513
|
&:hover,
|
|
511
514
|
:focus-visible {
|
|
512
515
|
background-color: ${a};
|
|
@@ -517,70 +520,89 @@ const W = [
|
|
|
517
520
|
}
|
|
518
521
|
`
|
|
519
522
|
})
|
|
520
|
-
),
|
|
521
|
-
background-color: ${
|
|
523
|
+
), bo = s(S)`
|
|
524
|
+
background-color: ${t.colors.gold};
|
|
522
525
|
height: 2.5rem;
|
|
523
526
|
border: 2px solid transparent;
|
|
524
|
-
color: ${
|
|
527
|
+
color: ${t.colors.midnight};
|
|
525
528
|
transition: 313ms all ease-in;
|
|
526
529
|
border-radius: 32px;
|
|
527
530
|
font-weight: 400;
|
|
528
531
|
padding: 0.75rem 2rem;
|
|
529
532
|
font-size: 1rem;
|
|
530
|
-
box-shadow: ${
|
|
533
|
+
box-shadow: ${t.boxShadows.gray63};
|
|
531
534
|
&:hover,
|
|
532
535
|
:focus-visible {
|
|
533
|
-
background-color: ${
|
|
534
|
-
box-shadow: ${
|
|
536
|
+
background-color: ${t.colors.goldHover};
|
|
537
|
+
box-shadow: ${t.boxShadows.gray63};
|
|
535
538
|
}
|
|
536
539
|
&:disabled {
|
|
537
|
-
background-color: ${
|
|
540
|
+
background-color: ${t.colors.goldHover};
|
|
538
541
|
}
|
|
539
|
-
`,
|
|
542
|
+
`, N = s(S)(({ width: o = "114px" }) => ({
|
|
540
543
|
...v`
|
|
541
544
|
box-sizing: border-box;
|
|
542
|
-
background-color: ${
|
|
545
|
+
background-color: ${t.colors.bibiBlue};
|
|
543
546
|
border-radius: 0;
|
|
544
547
|
height: 47px;
|
|
545
548
|
width: ${o};
|
|
546
549
|
border: 2px solid transparent;
|
|
547
|
-
color: ${
|
|
550
|
+
color: ${t.colors.white};
|
|
548
551
|
transition: 108ms all ease-in;
|
|
549
552
|
font-weight: 500;
|
|
550
553
|
padding: 0;
|
|
551
554
|
font-size: 19px;
|
|
552
555
|
&:hover,
|
|
553
556
|
:focus-visible {
|
|
554
|
-
background-color: ${
|
|
557
|
+
background-color: ${t.colors.bibiBlueHover};
|
|
555
558
|
}
|
|
556
559
|
`
|
|
557
|
-
})),
|
|
560
|
+
})), go = s(N)(({ active: o }) => ({
|
|
558
561
|
...v`
|
|
559
|
-
background-color: ${o &&
|
|
560
|
-
color: ${o &&
|
|
562
|
+
background-color: ${o && t.colors.white};
|
|
563
|
+
color: ${o && t.colors.bibiBlue};
|
|
561
564
|
&:hover,
|
|
562
565
|
:focus-visible {
|
|
563
|
-
background-color: ${
|
|
564
|
-
color: ${
|
|
566
|
+
background-color: ${t.colors.white};
|
|
567
|
+
color: ${t.colors.bibiBlue};
|
|
565
568
|
}
|
|
566
569
|
`
|
|
567
|
-
})),
|
|
570
|
+
})), vo = s(N)(() => ({
|
|
568
571
|
...v`
|
|
569
|
-
background-color: ${
|
|
570
|
-
color: ${
|
|
572
|
+
background-color: ${t.colors.white};
|
|
573
|
+
color: ${t.colors.bibiBlue};
|
|
571
574
|
&:hover,
|
|
572
575
|
:focus-visible {
|
|
573
|
-
background-color: ${
|
|
574
|
-
border: 2px solid ${
|
|
575
|
-
color: ${
|
|
576
|
+
background-color: ${t.colors.bibiBlue};
|
|
577
|
+
border: 2px solid ${t.colors.white};
|
|
578
|
+
color: ${t.colors.white};
|
|
576
579
|
}
|
|
577
580
|
`
|
|
578
|
-
})),
|
|
581
|
+
})), G = s(O)`
|
|
579
582
|
display: block;
|
|
580
|
-
`,
|
|
581
|
-
|
|
583
|
+
`, xo = s(G)`
|
|
584
|
+
font-family: inherit;
|
|
585
|
+
font-size: inherit;
|
|
586
|
+
font-weight: inherit;
|
|
587
|
+
`, fo = s("div")`
|
|
588
|
+
display: flex;
|
|
589
|
+
.isCopied {
|
|
590
|
+
color: ${t.colors.gray};
|
|
591
|
+
display: inline;
|
|
592
|
+
margin-left: 8px;
|
|
593
|
+
font-size: smaller;
|
|
594
|
+
align-content: center;
|
|
595
|
+
}
|
|
596
|
+
.isCopied > svg {
|
|
597
|
+
vertical-align: middle;
|
|
598
|
+
height: 14px !important;
|
|
599
|
+
width: 14px !important;
|
|
600
|
+
margin: 0;
|
|
601
|
+
}
|
|
602
|
+
`, yo = s(O, {
|
|
603
|
+
shouldForwardProp: (o) => typeof o == "string" && ro(o)
|
|
582
604
|
})(
|
|
583
|
-
({ size: o, color: a, highlightColor:
|
|
605
|
+
({ size: o, color: a, highlightColor: e, hoverColor: n }) => ({
|
|
584
606
|
...v`
|
|
585
607
|
display: flex;
|
|
586
608
|
align-items: center;
|
|
@@ -591,9 +613,9 @@ const W = [
|
|
|
591
613
|
&:hover,
|
|
592
614
|
:focus-visible {
|
|
593
615
|
svg {
|
|
594
|
-
filter: drop-shadow(0 0 6px ${
|
|
595
|
-
drop-shadow(0 0 6px ${
|
|
596
|
-
fill: ${
|
|
616
|
+
filter: drop-shadow(0 0 6px ${e}) drop-shadow(0 0 6px ${e})
|
|
617
|
+
drop-shadow(0 0 6px ${e}) drop-shadow(0 0 6px ${e});
|
|
618
|
+
fill: ${n || a};
|
|
597
619
|
}
|
|
598
620
|
}
|
|
599
621
|
|
|
@@ -605,52 +627,81 @@ const W = [
|
|
|
605
627
|
}
|
|
606
628
|
`
|
|
607
629
|
})
|
|
608
|
-
),
|
|
630
|
+
), mo = s(S)(({ active: o }) => ({
|
|
609
631
|
...v`
|
|
610
632
|
box-sizing: border-box;
|
|
611
|
-
background-color: ${o ?
|
|
633
|
+
background-color: ${o ? t.colors.black : t.colors.white};
|
|
612
634
|
height: 28px;
|
|
613
635
|
border-radius: 18px;
|
|
614
636
|
display: flex;
|
|
615
637
|
align-items: center;
|
|
616
638
|
justify-content: center;
|
|
617
|
-
border: 2px solid ${o ? "transparent" :
|
|
618
|
-
color: ${o ?
|
|
639
|
+
border: 2px solid ${o ? "transparent" : t.colors.black};
|
|
640
|
+
color: ${o ? t.colors.white : t.colors.black};
|
|
619
641
|
transition: 108ms all ease-in;
|
|
620
642
|
font-weight: 500;
|
|
621
643
|
|
|
622
644
|
&:hover,
|
|
623
645
|
:focus-visible {
|
|
624
|
-
background-color: ${o ?
|
|
646
|
+
background-color: ${o ? t.colors.charcoal : t.colors.gray2};
|
|
625
647
|
}
|
|
626
648
|
`
|
|
627
|
-
})),
|
|
649
|
+
})), Ro = ({
|
|
628
650
|
variant: o = 1,
|
|
629
651
|
size: a = 50,
|
|
630
|
-
color:
|
|
631
|
-
highlightColor:
|
|
632
|
-
hoverColor: d =
|
|
633
|
-
backgroundColor: u =
|
|
634
|
-
textColor: b =
|
|
635
|
-
customShadow1: x =
|
|
636
|
-
customShadow2: f =
|
|
652
|
+
color: e = t.colors.darkGreen,
|
|
653
|
+
highlightColor: n = t.colors.dandelion,
|
|
654
|
+
hoverColor: d = t.colors.green,
|
|
655
|
+
backgroundColor: u = t.colors.darkGreen,
|
|
656
|
+
textColor: b = t.colors.white,
|
|
657
|
+
customShadow1: x = t.boxShadows.gray63,
|
|
658
|
+
customShadow2: f = t.boxShadows.black63,
|
|
637
659
|
children: l,
|
|
638
|
-
|
|
660
|
+
textToCopy: z,
|
|
661
|
+
active: B,
|
|
639
662
|
...c
|
|
640
|
-
}) =>
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
663
|
+
}) => {
|
|
664
|
+
if (o === "custom")
|
|
665
|
+
return /* @__PURE__ */ i(
|
|
666
|
+
uo,
|
|
667
|
+
{
|
|
668
|
+
customBackgroundColor: u,
|
|
669
|
+
customHoverColor: d,
|
|
670
|
+
customTextColor: b,
|
|
671
|
+
customShadow1: x,
|
|
672
|
+
customShadow2: f,
|
|
673
|
+
className: "jcCustomButton",
|
|
674
|
+
...c,
|
|
675
|
+
children: l
|
|
676
|
+
}
|
|
677
|
+
);
|
|
678
|
+
if (o === "bibi")
|
|
679
|
+
return /* @__PURE__ */ i(N, { ...c, children: l });
|
|
680
|
+
if (o === "bibiOutlined")
|
|
681
|
+
return /* @__PURE__ */ i(go, { ...c, children: l });
|
|
682
|
+
if (o === "bibiInverse")
|
|
683
|
+
return /* @__PURE__ */ i(vo, { ...c, children: l });
|
|
684
|
+
if (o === "unstyled")
|
|
685
|
+
return /* @__PURE__ */ i(G, { ...c, children: l });
|
|
686
|
+
if (o === "copy") {
|
|
687
|
+
const [y, m] = q(!1);
|
|
688
|
+
return /* @__PURE__ */ I(fo, { onClick: async () => {
|
|
689
|
+
try {
|
|
690
|
+
await navigator.clipboard.writeText(z || String(l)), m(!0), setTimeout(() => m(!1), 1100);
|
|
691
|
+
} catch (k) {
|
|
692
|
+
console.error("Failed to copy text: ", k);
|
|
693
|
+
}
|
|
694
|
+
}, children: [
|
|
695
|
+
/* @__PURE__ */ i(ao, { title: "Copy to clipboard", children: /* @__PURE__ */ i(xo, { ...c, children: l }) }),
|
|
696
|
+
y && /* @__PURE__ */ I("span", { className: "isCopied", children: [
|
|
697
|
+
/* @__PURE__ */ i(eo, { size: 12 }),
|
|
698
|
+
" Copied"
|
|
699
|
+
] })
|
|
700
|
+
] });
|
|
651
701
|
}
|
|
652
|
-
|
|
702
|
+
return o === 2 ? /* @__PURE__ */ i(bo, { ...c, children: /* @__PURE__ */ i("span", { children: l }) }) : o === "icon" ? /* @__PURE__ */ i(yo, { className: "jcIconButton", ...{ size: a, color: e, highlightColor: n, hoverColor: d }, ...c, children: l }) : o === "filter" ? /* @__PURE__ */ i(mo, { className: "jcFilterButton", active: B, ...c, children: l }) : /* @__PURE__ */ i(po, { ...c, children: /* @__PURE__ */ i("span", { children: l }) });
|
|
703
|
+
};
|
|
653
704
|
export {
|
|
654
|
-
|
|
655
|
-
|
|
705
|
+
Ro as Button,
|
|
706
|
+
Ro as default
|
|
656
707
|
};
|