@mailstep/design-system 0.6.22 → 0.6.24
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/package.json
CHANGED
|
@@ -16,7 +16,7 @@ export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __m
|
|
|
16
16
|
var $addMarginLeft = _a.$addMarginLeft;
|
|
17
17
|
return ($addMarginLeft ? '8px' : '0');
|
|
18
18
|
});
|
|
19
|
-
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n cursor: pointer;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n
|
|
19
|
+
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n cursor: pointer;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"], ["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n cursor: pointer;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n\n @media (hover: hover) {\n :hover {\n color: red70;\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"])), function (_a) {
|
|
20
20
|
var fullWidth = _a.fullWidth;
|
|
21
21
|
return (fullWidth ? '100%' : 'initial');
|
|
22
22
|
}, th('fonts.primary'), function (_a) {
|
|
@@ -12,17 +12,17 @@ var Arrow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObj
|
|
|
12
12
|
return (verticalShift ? 'calc(50% + 70px)' : 'calc(50%)');
|
|
13
13
|
}, ArrowInnerA, ArrowInnerB, th.color('white'));
|
|
14
14
|
var StyledDropdownWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n\n ", "\n\n width: fit-content;\n height: fit-content;\n display: block;\n z-index: 1;\n\n ", " {\n display: ", ";\n }\n"], ["\n position: absolute;\n\n ", "\n\n width: fit-content;\n height: fit-content;\n display: block;\n z-index: 1;\n\n ", " {\n display: ", ";\n }\n"])), function (_a) {
|
|
15
|
-
var customDropdownPosition = _a.customDropdownPosition
|
|
15
|
+
var customDropdownPosition = _a.customDropdownPosition;
|
|
16
16
|
return customDropdownPosition
|
|
17
17
|
? customDropdownPosition
|
|
18
|
-
: "\n top: 100%;\n
|
|
18
|
+
: "\n top: 100%;\n right: 0;\n ";
|
|
19
19
|
}, Arrow, function (_a) {
|
|
20
20
|
var showArrow = _a.showArrow;
|
|
21
21
|
return (showArrow ? 'block' : 'none');
|
|
22
22
|
});
|
|
23
23
|
var Dropdown = function (_a) {
|
|
24
24
|
var show = _a.show, className = _a.className, wrapRef = _a.wrapRef, children = _a.children, showArrow = _a.showArrow, verticalShift = _a.verticalShift, customDropdownPosition = _a.customDropdownPosition;
|
|
25
|
-
return (_jsx(_Fragment, { children: show && (_jsxs(StyledDropdownWrap, { ref: wrapRef, className: className, showArrow: showArrow,
|
|
25
|
+
return (_jsx(_Fragment, { children: show && (_jsxs(StyledDropdownWrap, { ref: wrapRef, className: className, showArrow: showArrow, customDropdownPosition: customDropdownPosition, children: [_jsx(Arrow, { verticalShift: verticalShift, children: _jsx(ArrowInnerA, { children: _jsx(ArrowInnerB, {}) }) }), children] })) }));
|
|
26
26
|
};
|
|
27
27
|
export default Dropdown;
|
|
28
28
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
6
|
import styled, { css } from '@xstyled/styled-components';
|
|
7
|
-
var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 10px;\n font-size:
|
|
7
|
+
var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 8px 10px;\n font-size: 14px;\n color: typoPrimary;\n font-weight: normal;\n\n :hover {\n background-color: bgLightGray1;\n cursor: pointer;\n }\n\n ", ";\n"], ["\n padding: 8px 10px;\n font-size: 14px;\n color: typoPrimary;\n font-weight: normal;\n\n :hover {\n background-color: bgLightGray1;\n cursor: pointer;\n }\n\n ", ";\n"])), function (props) {
|
|
8
8
|
return props.hasSeparator && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-top: slim;\n border-color: lightGray2;\n "], ["\n border-top: slim;\n border-color: lightGray2;\n "])));
|
|
9
9
|
});
|
|
10
10
|
var IconWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
package/ui/index.es.js
CHANGED
|
@@ -8402,9 +8402,6 @@ const yU = ae.span`
|
|
|
8402
8402
|
&[data-appearance='primary'] {
|
|
8403
8403
|
background-color: red1;
|
|
8404
8404
|
color: white;
|
|
8405
|
-
& svg {
|
|
8406
|
-
stroke: white;
|
|
8407
|
-
}
|
|
8408
8405
|
|
|
8409
8406
|
:not(:disabled) {
|
|
8410
8407
|
@media (hover: hover) {
|
|
@@ -8418,9 +8415,6 @@ const yU = ae.span`
|
|
|
8418
8415
|
&[data-appearance='secondary'] {
|
|
8419
8416
|
background-color: neutral20;
|
|
8420
8417
|
color: typoPrimary;
|
|
8421
|
-
& svg {
|
|
8422
|
-
stroke: typoPrimary;
|
|
8423
|
-
}
|
|
8424
8418
|
|
|
8425
8419
|
@media (hover: hover) {
|
|
8426
8420
|
:hover {
|
|
@@ -8432,9 +8426,6 @@ const yU = ae.span`
|
|
|
8432
8426
|
&[data-appearance='tertiary'] {
|
|
8433
8427
|
background-color: red20;
|
|
8434
8428
|
color: red1;
|
|
8435
|
-
& svg {
|
|
8436
|
-
stroke: red1;
|
|
8437
|
-
}
|
|
8438
8429
|
|
|
8439
8430
|
@media (hover: hover) {
|
|
8440
8431
|
:hover {
|
|
@@ -8447,9 +8438,6 @@ const yU = ae.span`
|
|
|
8447
8438
|
&[data-variant='success'] {
|
|
8448
8439
|
background-color: successColor;
|
|
8449
8440
|
color: white;
|
|
8450
|
-
& svg {
|
|
8451
|
-
stroke: white;
|
|
8452
|
-
}
|
|
8453
8441
|
|
|
8454
8442
|
@media (hover: hover) {
|
|
8455
8443
|
:hover {
|
|
@@ -8463,9 +8451,6 @@ const yU = ae.span`
|
|
|
8463
8451
|
&[data-appearance='primary'] {
|
|
8464
8452
|
color: typoPrimary;
|
|
8465
8453
|
border-color: typoPrimary;
|
|
8466
|
-
& svg {
|
|
8467
|
-
stroke: typoPrimary;
|
|
8468
|
-
}
|
|
8469
8454
|
|
|
8470
8455
|
@media (hover: hover) {
|
|
8471
8456
|
:hover {
|
|
@@ -8476,9 +8461,6 @@ const yU = ae.span`
|
|
|
8476
8461
|
&[data-appearance='secondary'] {
|
|
8477
8462
|
color: red1;
|
|
8478
8463
|
border-color: red1;
|
|
8479
|
-
& svg {
|
|
8480
|
-
stroke: red1;
|
|
8481
|
-
}
|
|
8482
8464
|
|
|
8483
8465
|
@media (hover: hover) {
|
|
8484
8466
|
:hover {
|
|
@@ -8491,9 +8473,6 @@ const yU = ae.span`
|
|
|
8491
8473
|
background-color: white;
|
|
8492
8474
|
&[data-appearance='primary'] {
|
|
8493
8475
|
color: typoPrimary;
|
|
8494
|
-
& svg {
|
|
8495
|
-
stroke: typoPrimary;
|
|
8496
|
-
}
|
|
8497
8476
|
|
|
8498
8477
|
@media (hover: hover) {
|
|
8499
8478
|
:hover {
|
|
@@ -8503,9 +8482,6 @@ const yU = ae.span`
|
|
|
8503
8482
|
}
|
|
8504
8483
|
&[data-appearance='secondary'] {
|
|
8505
8484
|
color: red1;
|
|
8506
|
-
& svg {
|
|
8507
|
-
stroke: red1;
|
|
8508
|
-
}
|
|
8509
8485
|
|
|
8510
8486
|
@media (hover: hover) {
|
|
8511
8487
|
:hover {
|
|
@@ -8520,31 +8496,19 @@ const yU = ae.span`
|
|
|
8520
8496
|
height: 20px;
|
|
8521
8497
|
&[data-appearance='primary'] {
|
|
8522
8498
|
color: typoPrimary;
|
|
8523
|
-
& svg {
|
|
8524
|
-
stroke: typoPrimary;
|
|
8525
|
-
}
|
|
8526
8499
|
|
|
8527
8500
|
@media (hover: hover) {
|
|
8528
8501
|
:hover {
|
|
8529
8502
|
color: neutral500;
|
|
8530
|
-
& svg {
|
|
8531
|
-
stroke: neutral500;
|
|
8532
|
-
}
|
|
8533
8503
|
}
|
|
8534
8504
|
}
|
|
8535
8505
|
}
|
|
8536
8506
|
&[data-appearance='secondary'] {
|
|
8537
8507
|
color: red1;
|
|
8538
|
-
& svg {
|
|
8539
|
-
stroke: red1;
|
|
8540
|
-
}
|
|
8541
8508
|
|
|
8542
8509
|
@media (hover: hover) {
|
|
8543
8510
|
:hover {
|
|
8544
8511
|
color: red70;
|
|
8545
|
-
& svg {
|
|
8546
|
-
stroke: red70;
|
|
8547
|
-
}
|
|
8548
8512
|
}
|
|
8549
8513
|
}
|
|
8550
8514
|
}
|
|
@@ -8558,9 +8522,7 @@ const yU = ae.span`
|
|
|
8558
8522
|
&[data-appearance='primary'] {
|
|
8559
8523
|
background-color: red1;
|
|
8560
8524
|
color: white;
|
|
8561
|
-
|
|
8562
|
-
stroke: white;
|
|
8563
|
-
}
|
|
8525
|
+
|
|
8564
8526
|
@media (hover: hover) {
|
|
8565
8527
|
:hover {
|
|
8566
8528
|
background-color: red70;
|
|
@@ -8571,9 +8533,7 @@ const yU = ae.span`
|
|
|
8571
8533
|
&[data-appearance='secondary'] {
|
|
8572
8534
|
background-color: neutral20;
|
|
8573
8535
|
color: typoPrimary;
|
|
8574
|
-
|
|
8575
|
-
stroke: typoPrimary;
|
|
8576
|
-
}
|
|
8536
|
+
|
|
8577
8537
|
@media (hover: hover) {
|
|
8578
8538
|
:hover {
|
|
8579
8539
|
background-color: lightGray7;
|
|
@@ -8584,9 +8544,7 @@ const yU = ae.span`
|
|
|
8584
8544
|
&[data-appearance='tertiary'] {
|
|
8585
8545
|
background-color: red20;
|
|
8586
8546
|
color: red1;
|
|
8587
|
-
|
|
8588
|
-
stroke: red1;
|
|
8589
|
-
}
|
|
8547
|
+
|
|
8590
8548
|
@media (hover: hover) {
|
|
8591
8549
|
:hover {
|
|
8592
8550
|
background-color: red30;
|
|
@@ -8597,15 +8555,10 @@ const yU = ae.span`
|
|
|
8597
8555
|
&[data-appearance='ghost'] {
|
|
8598
8556
|
background-color: transparent;
|
|
8599
8557
|
color: typoPrimary;
|
|
8600
|
-
|
|
8601
|
-
stroke: typoPrimary;
|
|
8602
|
-
}
|
|
8558
|
+
|
|
8603
8559
|
@media (hover: hover) {
|
|
8604
8560
|
:hover {
|
|
8605
8561
|
color: neutral500;
|
|
8606
|
-
& svg {
|
|
8607
|
-
stroke: neutral500;
|
|
8608
|
-
}
|
|
8609
8562
|
}
|
|
8610
8563
|
}
|
|
8611
8564
|
}
|
|
@@ -8618,9 +8571,7 @@ const yU = ae.span`
|
|
|
8618
8571
|
background-color: red1;
|
|
8619
8572
|
color: white;
|
|
8620
8573
|
border-radius: 50%;
|
|
8621
|
-
|
|
8622
|
-
stroke: white;
|
|
8623
|
-
}
|
|
8574
|
+
|
|
8624
8575
|
@media (hover: hover) {
|
|
8625
8576
|
:hover {
|
|
8626
8577
|
background-color: red70;
|
|
@@ -17068,12 +17019,10 @@ const jle = Ti(ht.div)`
|
|
|
17068
17019
|
position: absolute;
|
|
17069
17020
|
|
|
17070
17021
|
${({
|
|
17071
|
-
customDropdownPosition: e
|
|
17072
|
-
verticalShift: t
|
|
17022
|
+
customDropdownPosition: e
|
|
17073
17023
|
}) => e || `
|
|
17074
17024
|
top: 100%;
|
|
17075
|
-
|
|
17076
|
-
transform: translate(-50%, 0);
|
|
17025
|
+
right: 0;
|
|
17077
17026
|
`}
|
|
17078
17027
|
|
|
17079
17028
|
width: fit-content;
|
|
@@ -17094,7 +17043,7 @@ const jle = Ti(ht.div)`
|
|
|
17094
17043
|
showArrow: i,
|
|
17095
17044
|
verticalShift: o,
|
|
17096
17045
|
customDropdownPosition: l
|
|
17097
|
-
}) => /* @__PURE__ */ b.jsx(b.Fragment, { children: e && /* @__PURE__ */ b.jsxs(due, { ref: r, className: t, showArrow: i,
|
|
17046
|
+
}) => /* @__PURE__ */ b.jsx(b.Fragment, { children: e && /* @__PURE__ */ b.jsxs(due, { ref: r, className: t, showArrow: i, customDropdownPosition: l, children: [
|
|
17098
17047
|
/* @__PURE__ */ b.jsx(K_, { verticalShift: o, children: /* @__PURE__ */ b.jsx(Q_, { children: /* @__PURE__ */ b.jsx(q_, {}) }) }),
|
|
17099
17048
|
n
|
|
17100
17049
|
] }) }), fue = Ot`
|
|
@@ -45200,8 +45149,8 @@ const USe = (e = {}, t) => cwe(e, (r) => {
|
|
|
45200
45149
|
ItemComponent: t,
|
|
45201
45150
|
onClose: r
|
|
45202
45151
|
}) => /* @__PURE__ */ b.jsx("ul", { children: e && e.map((n, i) => !n.hidden && /* @__PURE__ */ b.jsx(Swe, { item: n, ItemComponent: t, onClose: r }, i)) }), Owe = ae.li`
|
|
45203
|
-
padding: 10px;
|
|
45204
|
-
font-size:
|
|
45152
|
+
padding: 8px 10px;
|
|
45153
|
+
font-size: 14px;
|
|
45205
45154
|
color: typoPrimary;
|
|
45206
45155
|
font-weight: normal;
|
|
45207
45156
|
|
package/ui/index.umd.js
CHANGED
|
@@ -1009,9 +1009,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1009
1009
|
&[data-appearance='primary'] {
|
|
1010
1010
|
background-color: red1;
|
|
1011
1011
|
color: white;
|
|
1012
|
-
& svg {
|
|
1013
|
-
stroke: white;
|
|
1014
|
-
}
|
|
1015
1012
|
|
|
1016
1013
|
:not(:disabled) {
|
|
1017
1014
|
@media (hover: hover) {
|
|
@@ -1025,9 +1022,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1025
1022
|
&[data-appearance='secondary'] {
|
|
1026
1023
|
background-color: neutral20;
|
|
1027
1024
|
color: typoPrimary;
|
|
1028
|
-
& svg {
|
|
1029
|
-
stroke: typoPrimary;
|
|
1030
|
-
}
|
|
1031
1025
|
|
|
1032
1026
|
@media (hover: hover) {
|
|
1033
1027
|
:hover {
|
|
@@ -1039,9 +1033,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1039
1033
|
&[data-appearance='tertiary'] {
|
|
1040
1034
|
background-color: red20;
|
|
1041
1035
|
color: red1;
|
|
1042
|
-
& svg {
|
|
1043
|
-
stroke: red1;
|
|
1044
|
-
}
|
|
1045
1036
|
|
|
1046
1037
|
@media (hover: hover) {
|
|
1047
1038
|
:hover {
|
|
@@ -1054,9 +1045,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1054
1045
|
&[data-variant='success'] {
|
|
1055
1046
|
background-color: successColor;
|
|
1056
1047
|
color: white;
|
|
1057
|
-
& svg {
|
|
1058
|
-
stroke: white;
|
|
1059
|
-
}
|
|
1060
1048
|
|
|
1061
1049
|
@media (hover: hover) {
|
|
1062
1050
|
:hover {
|
|
@@ -1070,9 +1058,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1070
1058
|
&[data-appearance='primary'] {
|
|
1071
1059
|
color: typoPrimary;
|
|
1072
1060
|
border-color: typoPrimary;
|
|
1073
|
-
& svg {
|
|
1074
|
-
stroke: typoPrimary;
|
|
1075
|
-
}
|
|
1076
1061
|
|
|
1077
1062
|
@media (hover: hover) {
|
|
1078
1063
|
:hover {
|
|
@@ -1083,9 +1068,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1083
1068
|
&[data-appearance='secondary'] {
|
|
1084
1069
|
color: red1;
|
|
1085
1070
|
border-color: red1;
|
|
1086
|
-
& svg {
|
|
1087
|
-
stroke: red1;
|
|
1088
|
-
}
|
|
1089
1071
|
|
|
1090
1072
|
@media (hover: hover) {
|
|
1091
1073
|
:hover {
|
|
@@ -1098,9 +1080,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1098
1080
|
background-color: white;
|
|
1099
1081
|
&[data-appearance='primary'] {
|
|
1100
1082
|
color: typoPrimary;
|
|
1101
|
-
& svg {
|
|
1102
|
-
stroke: typoPrimary;
|
|
1103
|
-
}
|
|
1104
1083
|
|
|
1105
1084
|
@media (hover: hover) {
|
|
1106
1085
|
:hover {
|
|
@@ -1110,9 +1089,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1110
1089
|
}
|
|
1111
1090
|
&[data-appearance='secondary'] {
|
|
1112
1091
|
color: red1;
|
|
1113
|
-
& svg {
|
|
1114
|
-
stroke: red1;
|
|
1115
|
-
}
|
|
1116
1092
|
|
|
1117
1093
|
@media (hover: hover) {
|
|
1118
1094
|
:hover {
|
|
@@ -1127,31 +1103,19 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1127
1103
|
height: 20px;
|
|
1128
1104
|
&[data-appearance='primary'] {
|
|
1129
1105
|
color: typoPrimary;
|
|
1130
|
-
& svg {
|
|
1131
|
-
stroke: typoPrimary;
|
|
1132
|
-
}
|
|
1133
1106
|
|
|
1134
1107
|
@media (hover: hover) {
|
|
1135
1108
|
:hover {
|
|
1136
1109
|
color: neutral500;
|
|
1137
|
-
& svg {
|
|
1138
|
-
stroke: neutral500;
|
|
1139
|
-
}
|
|
1140
1110
|
}
|
|
1141
1111
|
}
|
|
1142
1112
|
}
|
|
1143
1113
|
&[data-appearance='secondary'] {
|
|
1144
1114
|
color: red1;
|
|
1145
|
-
& svg {
|
|
1146
|
-
stroke: red1;
|
|
1147
|
-
}
|
|
1148
1115
|
|
|
1149
1116
|
@media (hover: hover) {
|
|
1150
1117
|
:hover {
|
|
1151
1118
|
color: red70;
|
|
1152
|
-
& svg {
|
|
1153
|
-
stroke: red70;
|
|
1154
|
-
}
|
|
1155
1119
|
}
|
|
1156
1120
|
}
|
|
1157
1121
|
}
|
|
@@ -1165,9 +1129,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1165
1129
|
&[data-appearance='primary'] {
|
|
1166
1130
|
background-color: red1;
|
|
1167
1131
|
color: white;
|
|
1168
|
-
|
|
1169
|
-
stroke: white;
|
|
1170
|
-
}
|
|
1132
|
+
|
|
1171
1133
|
@media (hover: hover) {
|
|
1172
1134
|
:hover {
|
|
1173
1135
|
background-color: red70;
|
|
@@ -1178,9 +1140,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1178
1140
|
&[data-appearance='secondary'] {
|
|
1179
1141
|
background-color: neutral20;
|
|
1180
1142
|
color: typoPrimary;
|
|
1181
|
-
|
|
1182
|
-
stroke: typoPrimary;
|
|
1183
|
-
}
|
|
1143
|
+
|
|
1184
1144
|
@media (hover: hover) {
|
|
1185
1145
|
:hover {
|
|
1186
1146
|
background-color: lightGray7;
|
|
@@ -1191,9 +1151,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1191
1151
|
&[data-appearance='tertiary'] {
|
|
1192
1152
|
background-color: red20;
|
|
1193
1153
|
color: red1;
|
|
1194
|
-
|
|
1195
|
-
stroke: red1;
|
|
1196
|
-
}
|
|
1154
|
+
|
|
1197
1155
|
@media (hover: hover) {
|
|
1198
1156
|
:hover {
|
|
1199
1157
|
background-color: red30;
|
|
@@ -1204,15 +1162,10 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1204
1162
|
&[data-appearance='ghost'] {
|
|
1205
1163
|
background-color: transparent;
|
|
1206
1164
|
color: typoPrimary;
|
|
1207
|
-
|
|
1208
|
-
stroke: typoPrimary;
|
|
1209
|
-
}
|
|
1165
|
+
|
|
1210
1166
|
@media (hover: hover) {
|
|
1211
1167
|
:hover {
|
|
1212
1168
|
color: neutral500;
|
|
1213
|
-
& svg {
|
|
1214
|
-
stroke: neutral500;
|
|
1215
|
-
}
|
|
1216
1169
|
}
|
|
1217
1170
|
}
|
|
1218
1171
|
}
|
|
@@ -1225,9 +1178,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1225
1178
|
background-color: red1;
|
|
1226
1179
|
color: white;
|
|
1227
1180
|
border-radius: 50%;
|
|
1228
|
-
|
|
1229
|
-
stroke: white;
|
|
1230
|
-
}
|
|
1181
|
+
|
|
1231
1182
|
@media (hover: hover) {
|
|
1232
1183
|
:hover {
|
|
1233
1184
|
background-color: red70;
|
|
@@ -1781,10 +1732,9 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1781
1732
|
`,$ue=ae.div`
|
|
1782
1733
|
position: absolute;
|
|
1783
1734
|
|
|
1784
|
-
${({customDropdownPosition:e
|
|
1735
|
+
${({customDropdownPosition:e})=>e||`
|
|
1785
1736
|
top: 100%;
|
|
1786
|
-
|
|
1787
|
-
transform: translate(-50%, 0);
|
|
1737
|
+
right: 0;
|
|
1788
1738
|
`}
|
|
1789
1739
|
|
|
1790
1740
|
width: fit-content;
|
|
@@ -1795,7 +1745,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1795
1745
|
${XD} {
|
|
1796
1746
|
display: ${({showArrow:e})=>e?"block":"none"};
|
|
1797
1747
|
}
|
|
1798
|
-
`,ece=({show:e,className:t,wrapRef:r,children:n,showArrow:i,verticalShift:o,customDropdownPosition:l})=>b.jsx(b.Fragment,{children:e&&b.jsxs($ue,{ref:r,className:t,showArrow:i,
|
|
1748
|
+
`,ece=({show:e,className:t,wrapRef:r,children:n,showArrow:i,verticalShift:o,customDropdownPosition:l})=>b.jsx(b.Fragment,{children:e&&b.jsxs($ue,{ref:r,className:t,showArrow:i,customDropdownPosition:l,children:[b.jsx(XD,{verticalShift:o,children:b.jsx(JD,{children:b.jsx(UD,{})})}),n]})}),tce=wt`
|
|
1799
1749
|
span {
|
|
1800
1750
|
display: none;
|
|
1801
1751
|
position: absolute;
|
|
@@ -3307,8 +3257,8 @@ Avoid returning a new reference inside your input selector, e.g.
|
|
|
3307
3257
|
}
|
|
3308
3258
|
`}
|
|
3309
3259
|
`,AAe=({item:e,ItemComponent:t,onClose:r})=>{const{onClick:n,link:i,hasSeparator:o,name:l,autoClose:u}=e,c=vue(),f=i===c.pathname,h=I.useCallback(p=>{n&&(p.preventDefault(),n()),u&&r&&setTimeout(()=>{r()},200)},[u,n,r]);return b.jsx(wAe,{to:i,$isActive:f,onClick:h,$hasSeparator:!!o,"data-cy":l,size:"inherit",children:b.jsx(t,{...e})})},CAe=({items:e,ItemComponent:t,onClose:r})=>b.jsx("ul",{children:e&&e.map((n,i)=>!n.hidden&&b.jsx(AAe,{item:n,ItemComponent:t,onClose:r},i))}),xAe=ae.li`
|
|
3310
|
-
padding: 10px;
|
|
3311
|
-
font-size:
|
|
3260
|
+
padding: 8px 10px;
|
|
3261
|
+
font-size: 14px;
|
|
3312
3262
|
color: typoPrimary;
|
|
3313
3263
|
font-weight: normal;
|
|
3314
3264
|
|