@common-origin/design-system 2.17.0 → 2.18.0
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/client.esm.js +45 -21
- package/dist/client.esm.js.map +1 -1
- package/dist/client.js +45 -21
- package/dist/client.js.map +1 -1
- package/dist/components/atoms/Badge/Badge.d.ts +7 -2
- package/dist/components/atoms/ProgressBar/ProgressBar.d.ts +1 -1
- package/dist/components/atoms/Tag/Tag.d.ts +4 -1
- package/dist/data.esm.js +10 -2
- package/dist/data.esm.js.map +1 -1
- package/dist/data.js +10 -2
- package/dist/data.js.map +1 -1
- package/dist/styles/tokens.json +10 -2
- package/dist/tokens/index.esm.js +10 -2
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +10 -2
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/types/tokens.d.ts +8 -0
- package/dist/tokens.css +19 -11
- package/dist/types/tokens.d.ts +8 -0
- package/package.json +1 -1
package/dist/client.js
CHANGED
|
@@ -407,7 +407,9 @@ var BadgeIndicator = styled__default.default.span.withConfig({
|
|
|
407
407
|
return props.$isDot ? '0' : "0 ".concat(semantic$i.spacing.component.xs);
|
|
408
408
|
}, radius$4.circle, count.lineHeight, ring.width, color$9.background["default"], scaleIn$2, semantic$i.motion.duration.normal, semantic$i.motion.easing.easeOut, reducedMotion, function (props) {
|
|
409
409
|
switch (props.$variant) {
|
|
410
|
+
case 'accent':
|
|
410
411
|
case 'primary':
|
|
412
|
+
// Deprecated alias for 'accent', removed in 3.0 (#169)
|
|
411
413
|
return "\n background-color: ".concat(color$9.background.interactive, ";\n color: ").concat(color$9.text.inverse, ";\n ");
|
|
412
414
|
case 'error':
|
|
413
415
|
return "\n background-color: ".concat(color$9.background.error, ";\n color: ").concat(color$9.text.inverse, ";\n ");
|
|
@@ -555,7 +557,7 @@ var StyledBox = styled__default.default.div.withConfig({
|
|
|
555
557
|
}, function (props) {
|
|
556
558
|
return props.$transition && styled.css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
|
|
557
559
|
}, function (props) {
|
|
558
|
-
return (props.$hoverShadow || props.$hoverTransform) && styled.css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: ", "
|
|
560
|
+
return (props.$hoverShadow || props.$hoverTransform) && styled.css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n "], ["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n "])), props.$hoverShadow && styled.css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), data.tokensJson.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && styled.css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), data.tokensJson.semantic.border.focus, data.tokensJson.semantic.border.focusOffset);
|
|
559
561
|
}, function (props) {
|
|
560
562
|
return props.$overflow && styled.css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
|
|
561
563
|
}, function (props) {
|
|
@@ -1019,7 +1021,7 @@ var StyledCategoryLabel = styled__default.default.span.withConfig({
|
|
|
1019
1021
|
var $color = _a.$color,
|
|
1020
1022
|
$variant = _a.$variant;
|
|
1021
1023
|
if ($variant === 'filled') {
|
|
1022
|
-
return category["".concat($color, "-
|
|
1024
|
+
return category["".concat($color, "-strong")];
|
|
1023
1025
|
}
|
|
1024
1026
|
if ($variant === 'outlined') {
|
|
1025
1027
|
return 'transparent';
|
|
@@ -1836,7 +1838,7 @@ var ProgressBarContainer = styled__default.default.div.withConfig({
|
|
|
1836
1838
|
},
|
|
1837
1839
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
1838
1840
|
componentId: "sc-1nco33q-0"
|
|
1839
|
-
})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"])), color$6.background.
|
|
1841
|
+
})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"])), color$6.background.progressTrack, radius$2.xs, function (props) {
|
|
1840
1842
|
return props.$variant === 'horizontal' && styled.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
|
|
1841
1843
|
}, function (props) {
|
|
1842
1844
|
return props.$variant === 'vertical' && styled.css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
|
|
@@ -1858,7 +1860,8 @@ var ProgressBarFill = styled__default.default.div.withConfig({
|
|
|
1858
1860
|
break;
|
|
1859
1861
|
case 'default':
|
|
1860
1862
|
default:
|
|
1861
|
-
|
|
1863
|
+
// Near-black, like Slider's fill (decision 0029)
|
|
1864
|
+
backgroundColor = color$6.background.emphasis;
|
|
1862
1865
|
break;
|
|
1863
1866
|
}
|
|
1864
1867
|
return styled.css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
@@ -2571,7 +2574,7 @@ var StyledItemContent = styled__default.default.div.withConfig({
|
|
|
2571
2574
|
},
|
|
2572
2575
|
displayName: "ListItem__StyledItemContent",
|
|
2573
2576
|
componentId: "sc-1wzzt21-1"
|
|
2574
|
-
})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color ", " ", ";\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: ", "
|
|
2577
|
+
})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color ", " ", ";\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"], ["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color ", " ", ";\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"])), semantic$b.spacing.layout.md, function (_a) {
|
|
2575
2578
|
var $spacing = _a.$spacing;
|
|
2576
2579
|
return $spacing === 'compact' ? "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.md) : "".concat(semantic$b.spacing.layout.md, " ").concat(semantic$b.spacing.layout.lg);
|
|
2577
2580
|
}, semantic$b.border.radius.sm, function (_a) {
|
|
@@ -2588,7 +2591,7 @@ var StyledItemContent = styled__default.default.div.withConfig({
|
|
|
2588
2591
|
$disabled = _a.$disabled,
|
|
2589
2592
|
$selected = _a.$selected;
|
|
2590
2593
|
return !$disabled && $interactive && "\n &:hover {\n background-color: ".concat($selected ? data.tokensJson.component.button.variants.secondary.backgroundColor : data.tokensJson.component.button.variants.secondary.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat(data.tokensJson.component.button.variants.naked.backgroundColor, ";\n }\n ");
|
|
2591
|
-
}, semantic$b.border.
|
|
2594
|
+
}, semantic$b.border.focus, semantic$b.border.focusOffset);
|
|
2592
2595
|
var StyledIconContainer$1 = styled__default.default.div.withConfig({
|
|
2593
2596
|
displayName: "ListItem__StyledIconContainer",
|
|
2594
2597
|
componentId: "sc-1wzzt21-2"
|
|
@@ -2832,7 +2835,7 @@ var StyledHeaderContent = styled__default.default.div.withConfig({
|
|
|
2832
2835
|
var StyledCloseButton = styled__default.default.button.withConfig({
|
|
2833
2836
|
displayName: "ActionSheet__StyledCloseButton",
|
|
2834
2837
|
componentId: "sc-regbol-4"
|
|
2835
|
-
})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"])), layout$1.sm, color$4.icon.subdued, border$5.radius.sm, motion$3.hover, layout$1.sm, color$4.icon["default"], color$4.background.surface, border$5.focus,
|
|
2838
|
+
})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"])), layout$1.sm, color$4.icon.subdued, border$5.radius.sm, motion$3.hover, layout$1.sm, color$4.icon["default"], color$4.background.surface, border$5.focus, border$5.focusOffset);
|
|
2836
2839
|
var StyledActionsList = styled__default.default.ul.withConfig({
|
|
2837
2840
|
displayName: "ActionSheet__StyledActionsList",
|
|
2838
2841
|
componentId: "sc-regbol-5"
|
|
@@ -4703,7 +4706,7 @@ var _a$2 = data.tokensJson.semantic,
|
|
|
4703
4706
|
var StyledCodeBlock = styled__default.default.pre.withConfig({
|
|
4704
4707
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
4705
4708
|
componentId: "sc-1p1t0kp-0"
|
|
4706
|
-
})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n overflow-y: ", ";\n margin: ", " 0;\n position: relative;\n transition: max-height ", " ", ";\n\n ", " {\n transition: none;\n }\n \n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n overflow-y: ", ";\n margin: ", " 0;\n position: relative;\n transition: max-height ", " ", ";\n\n ", " {\n transition: none;\n }\n \n ", "\n"])), color$2.background.subtle, border$3.subtle, data.tokensJson.semantic.border.radius.sm, spacing$2.layout.md, data.tokensJson.component.codeBlock.fontFamily, data.tokensJson.component.codeBlock.fontSize, data.tokensJson.component.codeBlock.lineHeight, color$2.text["default"], function (_a) {
|
|
4709
|
+
})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n overflow-y: ", ";\n margin: ", " 0;\n position: relative;\n transition: max-height ", " ", ";\n\n ", " {\n transition: none;\n }\n \n ", "\n\n /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n (decision 0029) */\n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n overflow-y: ", ";\n margin: ", " 0;\n position: relative;\n transition: max-height ", " ", ";\n\n ", " {\n transition: none;\n }\n \n ", "\n\n /* The block is focusable so keyboard users can scroll it; it shows the system focus ring\n (decision 0029) */\n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"])), color$2.background.subtle, border$3.subtle, data.tokensJson.semantic.border.radius.sm, spacing$2.layout.md, data.tokensJson.component.codeBlock.fontFamily, data.tokensJson.component.codeBlock.fontSize, data.tokensJson.component.codeBlock.lineHeight, color$2.text["default"], function (_a) {
|
|
4707
4710
|
var $isExpanded = _a.$isExpanded,
|
|
4708
4711
|
$needsExpansion = _a.$needsExpansion;
|
|
4709
4712
|
return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
|
|
@@ -4715,7 +4718,7 @@ var StyledCodeBlock = styled__default.default.pre.withConfig({
|
|
|
4715
4718
|
// Use a large value when expanded to allow smooth transition
|
|
4716
4719
|
// 10000px is effectively "no limit" for most code blocks
|
|
4717
4720
|
return $isExpanded ? 'max-height: 10000px;' : "max-height: ".concat($maxHeight, "px;");
|
|
4718
|
-
});
|
|
4721
|
+
}, border$3.focus, border$3.focusOffset);
|
|
4719
4722
|
var CodeBlockWrapper = styled__default.default.div.withConfig({
|
|
4720
4723
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
4721
4724
|
componentId: "sc-1p1t0kp-1"
|
|
@@ -5280,13 +5283,30 @@ var DropdownOption = styled__default.default.button.withConfig({
|
|
|
5280
5283
|
},
|
|
5281
5284
|
displayName: "Dropdown__DropdownOption",
|
|
5282
5285
|
componentId: "sc-kz07c4-4"
|
|
5283
|
-
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n width: 100%;\n display:
|
|
5286
|
+
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n padding: ", " ", ";\n /* Focus is grey; only the selected option is light blue, and the text darkens with its fill on\n focus, hover and press so it stays at least 4.5:1 (decisions 0016, 0029) */\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color ", " ", ", color ", " ", ";\n \n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n \n &:focus {\n outline: none;\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n padding: ", " ", ";\n /* Focus is grey; only the selected option is light blue, and the text darkens with its fill on\n focus, hover and press so it stays at least 4.5:1 (decisions 0016, 0029) */\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color ", " ", ", color ", " ", ";\n \n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n \n &:focus {\n outline: none;\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"])), spacing.sm, input$1["default"].paddingY, controlPaddingX, function (_a) {
|
|
5284
5287
|
var $isSelected = _a.$isSelected,
|
|
5285
5288
|
$isFocused = _a.$isFocused;
|
|
5289
|
+
if ($isSelected) return $isFocused ? color$1.background['interactive-subtle-hover'] : color$1.background['interactive-subtle'];
|
|
5286
5290
|
if ($isFocused) return color$1.background.surface;
|
|
5287
|
-
if ($isSelected) return color$1.background.surface;
|
|
5288
5291
|
return 'transparent';
|
|
5289
|
-
}, input$1["default"].font,
|
|
5292
|
+
}, input$1["default"].font, function (_a) {
|
|
5293
|
+
var $isSelected = _a.$isSelected,
|
|
5294
|
+
$isFocused = _a.$isFocused;
|
|
5295
|
+
if ($isSelected) return $isFocused ? color$1.text['interactive-hover'] : color$1.text.interactive;
|
|
5296
|
+
return input$1["default"].textColor;
|
|
5297
|
+
}, duration.fast, easing.easeOut, duration.fast, easing.easeOut, function (_a) {
|
|
5298
|
+
var $isSelected = _a.$isSelected;
|
|
5299
|
+
return $isSelected ? color$1.background['interactive-subtle-hover'] : color$1.background.surface;
|
|
5300
|
+
}, function (_a) {
|
|
5301
|
+
var $isSelected = _a.$isSelected;
|
|
5302
|
+
return $isSelected ? color$1.text['interactive-hover'] : input$1["default"].textColor;
|
|
5303
|
+
}, function (_a) {
|
|
5304
|
+
var $isSelected = _a.$isSelected;
|
|
5305
|
+
return $isSelected ? color$1.background['interactive-subtle-active'] : color$1.background.neutral;
|
|
5306
|
+
}, function (_a) {
|
|
5307
|
+
var $isSelected = _a.$isSelected;
|
|
5308
|
+
return $isSelected ? color$1.text['interactive-active'] : input$1["default"].textColor;
|
|
5309
|
+
}, border$1.subtle);
|
|
5290
5310
|
var StyledHelperText$3 = styled__default.default.div.withConfig({
|
|
5291
5311
|
displayName: "Dropdown__StyledHelperText",
|
|
5292
5312
|
componentId: "sc-kz07c4-5"
|
|
@@ -5446,7 +5466,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
5446
5466
|
role: "listbox",
|
|
5447
5467
|
"aria-labelledby": dropdownId,
|
|
5448
5468
|
children: options.map(function (option, index) {
|
|
5449
|
-
return jsxRuntime.
|
|
5469
|
+
return jsxRuntime.jsxs(DropdownOption, {
|
|
5450
5470
|
"$isSelected": option.id === value,
|
|
5451
5471
|
"$isFocused": index === focusedIndex,
|
|
5452
5472
|
onClick: function onClick() {
|
|
@@ -5454,7 +5474,11 @@ var Dropdown = function Dropdown(_a) {
|
|
|
5454
5474
|
},
|
|
5455
5475
|
role: "option",
|
|
5456
5476
|
"aria-selected": option.id === value,
|
|
5457
|
-
children: option.label
|
|
5477
|
+
children: [option.label, option.id === value && jsxRuntime.jsx(Icon, {
|
|
5478
|
+
name: "check",
|
|
5479
|
+
size: "sm",
|
|
5480
|
+
iconColor: "inherit"
|
|
5481
|
+
})]
|
|
5458
5482
|
}, option.id);
|
|
5459
5483
|
})
|
|
5460
5484
|
}), error && jsxRuntime.jsx(StyledHelperText$3, {
|
|
@@ -6267,7 +6291,7 @@ var StyledInput = styled__default.default.input.withConfig({
|
|
|
6267
6291
|
var StyledSuggestionsList = styled__default.default.ul.withConfig({
|
|
6268
6292
|
displayName: "SearchField__StyledSuggestionsList",
|
|
6269
6293
|
componentId: "sc-qhz9i8-3"
|
|
6270
|
-
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: ", ";\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: ", ";\n"], ["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: ", ";\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: ", ";\n"])), semantic$3.spacing.layout.xs, data.tokensJson.semantic.size.menu.maxHeight, semantic$3.color.background.subtle, semantic$3.border.width.thin, semantic$3.color.border["default"], semantic$3.border.radius.md, semantic$3.elevation.floating, semantic$3.spacing.layout.xs, semantic$3.zIndex.dropdown);
|
|
6294
|
+
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: ", ";\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: ", ";\n\n /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n treatment (decision 0029). Its row is the option's first child */\n & > [data-highlighted] > :first-child {\n background-color: ", ";\n }\n"], ["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: ", ";\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: ", ";\n\n /* The highlighted suggestion has keyboard focus, which is grey, not the light-blue selected\n treatment (decision 0029). Its row is the option's first child */\n & > [data-highlighted] > :first-child {\n background-color: ", ";\n }\n"])), semantic$3.spacing.layout.xs, data.tokensJson.semantic.size.menu.maxHeight, semantic$3.color.background.subtle, semantic$3.border.width.thin, semantic$3.color.border["default"], semantic$3.border.radius.md, semantic$3.elevation.floating, semantic$3.spacing.layout.xs, semantic$3.zIndex.dropdown, semantic$3.color.background.surface);
|
|
6271
6295
|
var StyledSectionHeader = styled__default.default.div.withConfig({
|
|
6272
6296
|
displayName: "SearchField__StyledSectionHeader",
|
|
6273
6297
|
componentId: "sc-qhz9i8-4"
|
|
@@ -6559,7 +6583,7 @@ var SearchField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
6559
6583
|
size: "xs"
|
|
6560
6584
|
}) : undefined,
|
|
6561
6585
|
interactive: true,
|
|
6562
|
-
|
|
6586
|
+
"data-highlighted": index === highlightedIndex || undefined,
|
|
6563
6587
|
spacing: "compact",
|
|
6564
6588
|
onClick: function onClick() {
|
|
6565
6589
|
return handleSuggestionClick(item);
|
|
@@ -6839,7 +6863,7 @@ var StyledTrackFill = styled__default.default.div.withConfig({
|
|
|
6839
6863
|
var StyledThumb = styled__default.default.div.withConfig({
|
|
6840
6864
|
displayName: "Slider__StyledThumb",
|
|
6841
6865
|
componentId: "sc-6mh2d4-5"
|
|
6842
|
-
})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n\n ", " {\n transition: none;\n }\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", "
|
|
6866
|
+
})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n\n ", " {\n transition: none;\n }\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"], ["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n\n ", " {\n transition: none;\n }\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"])), semantic$1.spacing.layout.xl, semantic$1.spacing.layout.xl, semantic$1.spacing.layout.sm, function (_a) {
|
|
6843
6867
|
var $disabled = _a.$disabled;
|
|
6844
6868
|
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
|
|
6845
6869
|
}, semantic$1.border.width.thick, function (_a) {
|
|
@@ -6848,7 +6872,7 @@ var StyledThumb = styled__default.default.div.withConfig({
|
|
|
6848
6872
|
}, semantic$1.border.radius.circle, function (_a) {
|
|
6849
6873
|
var $disabled = _a.$disabled;
|
|
6850
6874
|
return $disabled ? 'not-allowed' : 'grab';
|
|
6851
|
-
}, semantic$1.motion.transition.fast, data.tokensJson.component.slider.thumb.shadow["default"], reducedMotion, data.tokensJson.component.slider.thumb.shadow.hover, semantic$1.border.
|
|
6875
|
+
}, semantic$1.motion.transition.fast, data.tokensJson.component.slider.thumb.shadow["default"], reducedMotion, data.tokensJson.component.slider.thumb.shadow.hover, semantic$1.border.focus, semantic$1.border.focusOffset, function (_a) {
|
|
6852
6876
|
var $active = _a.$active;
|
|
6853
6877
|
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(data.tokensJson.component.slider.thumb.shadow.active, ";\n ");
|
|
6854
6878
|
});
|
|
@@ -7219,7 +7243,7 @@ var StyledTab = styled__default.default.button.withConfig({
|
|
|
7219
7243
|
},
|
|
7220
7244
|
displayName: "TabBar__StyledTab",
|
|
7221
7245
|
componentId: "sc-1g9ib0y-1"
|
|
7222
|
-
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n border-radius: ", " ", " 0 0;\n background-color: ", ";\n color: ", ";\n\n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n height: ", ";\n background-color: ", ";\n transition: ", ";\n }\n\n &:hover:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n\n &:active:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n\n /* Disabled state */\n opacity: ", ";\n \n /* Focus state */\n &:focus-visible {\n outline: ", "
|
|
7246
|
+
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n border-radius: ", " ", " 0 0;\n background-color: ", ";\n color: ", ";\n\n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n height: ", ";\n background-color: ", ";\n transition: ", ";\n }\n\n &:hover:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n\n &:active:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n\n /* Disabled state */\n opacity: ", ";\n \n /* Focus state */\n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n z-index: 1;\n }\n\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n border-radius: ", " ", " 0 0;\n background-color: ", ";\n color: ", ";\n\n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n height: ", ";\n background-color: ", ";\n transition: ", ";\n }\n\n &:hover:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n\n &:active:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n\n /* Disabled state */\n opacity: ", ";\n \n /* Focus state */\n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n z-index: 1;\n }\n\n"])), semantic.spacing.layout.sm, semantic.spacing.layout.md, semantic.spacing.layout.lg, semantic.typography.button2, function (props) {
|
|
7223
7247
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
7224
7248
|
}, semantic.motion.hover, semantic.border.radius.sm, semantic.border.radius.sm, function (props) {
|
|
7225
7249
|
return props.$isActive ? semantic.color.background['interactive-subtle'] : 'transparent';
|
|
@@ -7237,7 +7261,7 @@ var StyledTab = styled__default.default.button.withConfig({
|
|
|
7237
7261
|
return props.$isActive ? semantic.color.text['interactive-active'] : semantic.color.text["default"];
|
|
7238
7262
|
}, function (props) {
|
|
7239
7263
|
return props.$disabled ? '0.5' : '1';
|
|
7240
|
-
}, semantic.border.
|
|
7264
|
+
}, semantic.border.focus, semantic.border.focusOffset);
|
|
7241
7265
|
var StyledBadge = styled__default.default.span.withConfig({
|
|
7242
7266
|
displayName: "TabBar__StyledBadge",
|
|
7243
7267
|
componentId: "sc-1g9ib0y-2"
|
|
@@ -7517,7 +7541,7 @@ var StyledContainer = styled__default.default.div.withConfig({
|
|
|
7517
7541
|
componentId: "sc-7yunm0-0"
|
|
7518
7542
|
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-height: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: ", " solid ", ";\n gap: ", ";\n transition: background-color ", " ", ";\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n min-height: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: ", " solid ", ";\n gap: ", ";\n transition: background-color ", " ", ";\n \n ", "\n"])), data.tokensJson.component.transactionListItem.minHeight, data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.color.background["default"], data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border["default"], data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeOut, function (_a) {
|
|
7519
7543
|
var $clickable = _a.$clickable;
|
|
7520
|
-
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(data.tokensJson.semantic.color.background.subtle, ";\n }\n \n &:active {\n background-color: ").concat(data.tokensJson.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline: ").concat(data.tokensJson.semantic.border.
|
|
7544
|
+
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(data.tokensJson.semantic.color.background.subtle, ";\n }\n \n &:active {\n background-color: ").concat(data.tokensJson.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline: ").concat(data.tokensJson.semantic.border.focus, ";\n outline-offset: calc(-1 * ").concat(data.tokensJson.semantic.border.focusOffset, ");\n }\n ");
|
|
7521
7545
|
});
|
|
7522
7546
|
var StyledAvatarSection = styled__default.default.div.withConfig({
|
|
7523
7547
|
displayName: "TransactionListItem__StyledAvatarSection",
|