@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.esm.js
CHANGED
|
@@ -400,7 +400,9 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
400
400
|
return props.$isDot ? '0' : "0 ".concat(semantic$i.spacing.component.xs);
|
|
401
401
|
}, 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) {
|
|
402
402
|
switch (props.$variant) {
|
|
403
|
+
case 'accent':
|
|
403
404
|
case 'primary':
|
|
405
|
+
// Deprecated alias for 'accent', removed in 3.0 (#169)
|
|
404
406
|
return "\n background-color: ".concat(color$9.background.interactive, ";\n color: ").concat(color$9.text.inverse, ";\n ");
|
|
405
407
|
case 'error':
|
|
406
408
|
return "\n background-color: ".concat(color$9.background.error, ";\n color: ").concat(color$9.text.inverse, ";\n ");
|
|
@@ -548,7 +550,7 @@ var StyledBox = styled.div.withConfig({
|
|
|
548
550
|
}, function (props) {
|
|
549
551
|
return props.$transition && css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
|
|
550
552
|
}, function (props) {
|
|
551
|
-
return (props.$hoverShadow || props.$hoverTransform) && 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: ", "
|
|
553
|
+
return (props.$hoverShadow || props.$hoverTransform) && 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 && css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensJson.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensJson.semantic.border.focus, tokensJson.semantic.border.focusOffset);
|
|
552
554
|
}, function (props) {
|
|
553
555
|
return props.$overflow && css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
|
|
554
556
|
}, function (props) {
|
|
@@ -1012,7 +1014,7 @@ var StyledCategoryLabel = styled.span.withConfig({
|
|
|
1012
1014
|
var $color = _a.$color,
|
|
1013
1015
|
$variant = _a.$variant;
|
|
1014
1016
|
if ($variant === 'filled') {
|
|
1015
|
-
return category["".concat($color, "-
|
|
1017
|
+
return category["".concat($color, "-strong")];
|
|
1016
1018
|
}
|
|
1017
1019
|
if ($variant === 'outlined') {
|
|
1018
1020
|
return 'transparent';
|
|
@@ -1829,7 +1831,7 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
1829
1831
|
},
|
|
1830
1832
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
1831
1833
|
componentId: "sc-1nco33q-0"
|
|
1832
|
-
})(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.
|
|
1834
|
+
})(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) {
|
|
1833
1835
|
return props.$variant === 'horizontal' && 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);
|
|
1834
1836
|
}, function (props) {
|
|
1835
1837
|
return props.$variant === 'vertical' && 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);
|
|
@@ -1851,7 +1853,8 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
1851
1853
|
break;
|
|
1852
1854
|
case 'default':
|
|
1853
1855
|
default:
|
|
1854
|
-
|
|
1856
|
+
// Near-black, like Slider's fill (decision 0029)
|
|
1857
|
+
backgroundColor = color$6.background.emphasis;
|
|
1855
1858
|
break;
|
|
1856
1859
|
}
|
|
1857
1860
|
return css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
@@ -2564,7 +2567,7 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
2564
2567
|
},
|
|
2565
2568
|
displayName: "ListItem__StyledItemContent",
|
|
2566
2569
|
componentId: "sc-1wzzt21-1"
|
|
2567
|
-
})(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: ", "
|
|
2570
|
+
})(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) {
|
|
2568
2571
|
var $spacing = _a.$spacing;
|
|
2569
2572
|
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);
|
|
2570
2573
|
}, semantic$b.border.radius.sm, function (_a) {
|
|
@@ -2581,7 +2584,7 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
2581
2584
|
$disabled = _a.$disabled,
|
|
2582
2585
|
$selected = _a.$selected;
|
|
2583
2586
|
return !$disabled && $interactive && "\n &:hover {\n background-color: ".concat($selected ? tokensJson.component.button.variants.secondary.backgroundColor : tokensJson.component.button.variants.secondary.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat(tokensJson.component.button.variants.naked.backgroundColor, ";\n }\n ");
|
|
2584
|
-
}, semantic$b.border.
|
|
2587
|
+
}, semantic$b.border.focus, semantic$b.border.focusOffset);
|
|
2585
2588
|
var StyledIconContainer$1 = styled.div.withConfig({
|
|
2586
2589
|
displayName: "ListItem__StyledIconContainer",
|
|
2587
2590
|
componentId: "sc-1wzzt21-2"
|
|
@@ -2825,7 +2828,7 @@ var StyledHeaderContent = styled.div.withConfig({
|
|
|
2825
2828
|
var StyledCloseButton = styled.button.withConfig({
|
|
2826
2829
|
displayName: "ActionSheet__StyledCloseButton",
|
|
2827
2830
|
componentId: "sc-regbol-4"
|
|
2828
|
-
})(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,
|
|
2831
|
+
})(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);
|
|
2829
2832
|
var StyledActionsList = styled.ul.withConfig({
|
|
2830
2833
|
displayName: "ActionSheet__StyledActionsList",
|
|
2831
2834
|
componentId: "sc-regbol-5"
|
|
@@ -4696,7 +4699,7 @@ var _a$2 = tokensJson.semantic,
|
|
|
4696
4699
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
4697
4700
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
4698
4701
|
componentId: "sc-1p1t0kp-0"
|
|
4699
|
-
})(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, tokensJson.semantic.border.radius.sm, spacing$2.layout.md, tokensJson.component.codeBlock.fontFamily, tokensJson.component.codeBlock.fontSize, tokensJson.component.codeBlock.lineHeight, color$2.text["default"], function (_a) {
|
|
4702
|
+
})(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, tokensJson.semantic.border.radius.sm, spacing$2.layout.md, tokensJson.component.codeBlock.fontFamily, tokensJson.component.codeBlock.fontSize, tokensJson.component.codeBlock.lineHeight, color$2.text["default"], function (_a) {
|
|
4700
4703
|
var $isExpanded = _a.$isExpanded,
|
|
4701
4704
|
$needsExpansion = _a.$needsExpansion;
|
|
4702
4705
|
return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
|
|
@@ -4708,7 +4711,7 @@ var StyledCodeBlock = styled.pre.withConfig({
|
|
|
4708
4711
|
// Use a large value when expanded to allow smooth transition
|
|
4709
4712
|
// 10000px is effectively "no limit" for most code blocks
|
|
4710
4713
|
return $isExpanded ? 'max-height: 10000px;' : "max-height: ".concat($maxHeight, "px;");
|
|
4711
|
-
});
|
|
4714
|
+
}, border$3.focus, border$3.focusOffset);
|
|
4712
4715
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
4713
4716
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
4714
4717
|
componentId: "sc-1p1t0kp-1"
|
|
@@ -5273,13 +5276,30 @@ var DropdownOption = styled.button.withConfig({
|
|
|
5273
5276
|
},
|
|
5274
5277
|
displayName: "Dropdown__DropdownOption",
|
|
5275
5278
|
componentId: "sc-kz07c4-4"
|
|
5276
|
-
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n width: 100%;\n display:
|
|
5279
|
+
})(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) {
|
|
5277
5280
|
var $isSelected = _a.$isSelected,
|
|
5278
5281
|
$isFocused = _a.$isFocused;
|
|
5282
|
+
if ($isSelected) return $isFocused ? color$1.background['interactive-subtle-hover'] : color$1.background['interactive-subtle'];
|
|
5279
5283
|
if ($isFocused) return color$1.background.surface;
|
|
5280
|
-
if ($isSelected) return color$1.background.surface;
|
|
5281
5284
|
return 'transparent';
|
|
5282
|
-
}, input$1["default"].font,
|
|
5285
|
+
}, input$1["default"].font, function (_a) {
|
|
5286
|
+
var $isSelected = _a.$isSelected,
|
|
5287
|
+
$isFocused = _a.$isFocused;
|
|
5288
|
+
if ($isSelected) return $isFocused ? color$1.text['interactive-hover'] : color$1.text.interactive;
|
|
5289
|
+
return input$1["default"].textColor;
|
|
5290
|
+
}, duration.fast, easing.easeOut, duration.fast, easing.easeOut, function (_a) {
|
|
5291
|
+
var $isSelected = _a.$isSelected;
|
|
5292
|
+
return $isSelected ? color$1.background['interactive-subtle-hover'] : color$1.background.surface;
|
|
5293
|
+
}, function (_a) {
|
|
5294
|
+
var $isSelected = _a.$isSelected;
|
|
5295
|
+
return $isSelected ? color$1.text['interactive-hover'] : input$1["default"].textColor;
|
|
5296
|
+
}, function (_a) {
|
|
5297
|
+
var $isSelected = _a.$isSelected;
|
|
5298
|
+
return $isSelected ? color$1.background['interactive-subtle-active'] : color$1.background.neutral;
|
|
5299
|
+
}, function (_a) {
|
|
5300
|
+
var $isSelected = _a.$isSelected;
|
|
5301
|
+
return $isSelected ? color$1.text['interactive-active'] : input$1["default"].textColor;
|
|
5302
|
+
}, border$1.subtle);
|
|
5283
5303
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
5284
5304
|
displayName: "Dropdown__StyledHelperText",
|
|
5285
5305
|
componentId: "sc-kz07c4-5"
|
|
@@ -5439,7 +5459,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
5439
5459
|
role: "listbox",
|
|
5440
5460
|
"aria-labelledby": dropdownId,
|
|
5441
5461
|
children: options.map(function (option, index) {
|
|
5442
|
-
return
|
|
5462
|
+
return jsxs(DropdownOption, {
|
|
5443
5463
|
"$isSelected": option.id === value,
|
|
5444
5464
|
"$isFocused": index === focusedIndex,
|
|
5445
5465
|
onClick: function onClick() {
|
|
@@ -5447,7 +5467,11 @@ var Dropdown = function Dropdown(_a) {
|
|
|
5447
5467
|
},
|
|
5448
5468
|
role: "option",
|
|
5449
5469
|
"aria-selected": option.id === value,
|
|
5450
|
-
children: option.label
|
|
5470
|
+
children: [option.label, option.id === value && jsx(Icon, {
|
|
5471
|
+
name: "check",
|
|
5472
|
+
size: "sm",
|
|
5473
|
+
iconColor: "inherit"
|
|
5474
|
+
})]
|
|
5451
5475
|
}, option.id);
|
|
5452
5476
|
})
|
|
5453
5477
|
}), error && jsx(StyledHelperText$3, {
|
|
@@ -6260,7 +6284,7 @@ var StyledInput = styled.input.withConfig({
|
|
|
6260
6284
|
var StyledSuggestionsList = styled.ul.withConfig({
|
|
6261
6285
|
displayName: "SearchField__StyledSuggestionsList",
|
|
6262
6286
|
componentId: "sc-qhz9i8-3"
|
|
6263
|
-
})(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, 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);
|
|
6287
|
+
})(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, 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);
|
|
6264
6288
|
var StyledSectionHeader = styled.div.withConfig({
|
|
6265
6289
|
displayName: "SearchField__StyledSectionHeader",
|
|
6266
6290
|
componentId: "sc-qhz9i8-4"
|
|
@@ -6552,7 +6576,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
6552
6576
|
size: "xs"
|
|
6553
6577
|
}) : undefined,
|
|
6554
6578
|
interactive: true,
|
|
6555
|
-
|
|
6579
|
+
"data-highlighted": index === highlightedIndex || undefined,
|
|
6556
6580
|
spacing: "compact",
|
|
6557
6581
|
onClick: function onClick() {
|
|
6558
6582
|
return handleSuggestionClick(item);
|
|
@@ -6832,7 +6856,7 @@ var StyledTrackFill = styled.div.withConfig({
|
|
|
6832
6856
|
var StyledThumb = styled.div.withConfig({
|
|
6833
6857
|
displayName: "Slider__StyledThumb",
|
|
6834
6858
|
componentId: "sc-6mh2d4-5"
|
|
6835
|
-
})(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: ", "
|
|
6859
|
+
})(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) {
|
|
6836
6860
|
var $disabled = _a.$disabled;
|
|
6837
6861
|
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
|
|
6838
6862
|
}, semantic$1.border.width.thick, function (_a) {
|
|
@@ -6841,7 +6865,7 @@ var StyledThumb = styled.div.withConfig({
|
|
|
6841
6865
|
}, semantic$1.border.radius.circle, function (_a) {
|
|
6842
6866
|
var $disabled = _a.$disabled;
|
|
6843
6867
|
return $disabled ? 'not-allowed' : 'grab';
|
|
6844
|
-
}, semantic$1.motion.transition.fast, tokensJson.component.slider.thumb.shadow["default"], reducedMotion, tokensJson.component.slider.thumb.shadow.hover, semantic$1.border.
|
|
6868
|
+
}, semantic$1.motion.transition.fast, tokensJson.component.slider.thumb.shadow["default"], reducedMotion, tokensJson.component.slider.thumb.shadow.hover, semantic$1.border.focus, semantic$1.border.focusOffset, function (_a) {
|
|
6845
6869
|
var $active = _a.$active;
|
|
6846
6870
|
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(tokensJson.component.slider.thumb.shadow.active, ";\n ");
|
|
6847
6871
|
});
|
|
@@ -7212,7 +7236,7 @@ var StyledTab = styled.button.withConfig({
|
|
|
7212
7236
|
},
|
|
7213
7237
|
displayName: "TabBar__StyledTab",
|
|
7214
7238
|
componentId: "sc-1g9ib0y-1"
|
|
7215
|
-
})(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: ", "
|
|
7239
|
+
})(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) {
|
|
7216
7240
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
7217
7241
|
}, semantic.motion.hover, semantic.border.radius.sm, semantic.border.radius.sm, function (props) {
|
|
7218
7242
|
return props.$isActive ? semantic.color.background['interactive-subtle'] : 'transparent';
|
|
@@ -7230,7 +7254,7 @@ var StyledTab = styled.button.withConfig({
|
|
|
7230
7254
|
return props.$isActive ? semantic.color.text['interactive-active'] : semantic.color.text["default"];
|
|
7231
7255
|
}, function (props) {
|
|
7232
7256
|
return props.$disabled ? '0.5' : '1';
|
|
7233
|
-
}, semantic.border.
|
|
7257
|
+
}, semantic.border.focus, semantic.border.focusOffset);
|
|
7234
7258
|
var StyledBadge = styled.span.withConfig({
|
|
7235
7259
|
displayName: "TabBar__StyledBadge",
|
|
7236
7260
|
componentId: "sc-1g9ib0y-2"
|
|
@@ -7510,7 +7534,7 @@ var StyledContainer = styled.div.withConfig({
|
|
|
7510
7534
|
componentId: "sc-7yunm0-0"
|
|
7511
7535
|
})(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"])), tokensJson.component.transactionListItem.minHeight, tokensJson.semantic.spacing.layout.md, tokensJson.semantic.spacing.layout.md, tokensJson.semantic.color.background["default"], tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border["default"], tokensJson.semantic.spacing.layout.md, tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeOut, function (_a) {
|
|
7512
7536
|
var $clickable = _a.$clickable;
|
|
7513
|
-
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(tokensJson.semantic.color.background.subtle, ";\n }\n \n &:active {\n background-color: ").concat(tokensJson.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline: ").concat(tokensJson.semantic.border.
|
|
7537
|
+
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(tokensJson.semantic.color.background.subtle, ";\n }\n \n &:active {\n background-color: ").concat(tokensJson.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline: ").concat(tokensJson.semantic.border.focus, ";\n outline-offset: calc(-1 * ").concat(tokensJson.semantic.border.focusOffset, ");\n }\n ");
|
|
7514
7538
|
});
|
|
7515
7539
|
var StyledAvatarSection = styled.div.withConfig({
|
|
7516
7540
|
displayName: "TransactionListItem__StyledAvatarSection",
|