@common-origin/design-system 2.3.0 → 2.4.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/components/atoms/Box/Box.d.ts +10 -0
- package/dist/components/atoms/Container/Container.d.ts +1 -1
- package/dist/components/molecules/Alert/Alert.d.ts +1 -1
- package/dist/components/molecules/CardLarge/CardLarge.d.ts +1 -1
- package/dist/components/molecules/List/List.d.ts +1 -1
- package/dist/components/molecules/List/ListItem.d.ts +22 -1
- package/dist/components/molecules/Sheet/Sheet.d.ts +1 -1
- package/dist/components/molecules/Slider/Slider.d.ts +1 -1
- package/dist/index.esm.js +1570 -1280
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1570 -1280
- package/dist/index.js.map +1 -1
- package/dist/page-components/ErrorBoundary.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,20 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
3
4
|
var React = require('react');
|
|
4
5
|
var styled = require('styled-components');
|
|
5
6
|
var dateFns = require('date-fns');
|
|
6
7
|
var reactDom = require('react-dom');
|
|
7
8
|
|
|
8
|
-
function _extends() {
|
|
9
|
-
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
10
|
-
for (var e = 1; e < arguments.length; e++) {
|
|
11
|
-
var t = arguments[e];
|
|
12
|
-
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
13
|
-
}
|
|
14
|
-
return n;
|
|
15
|
-
}, _extends.apply(null, arguments);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
9
|
/******************************************************************************
|
|
19
10
|
Copyright (c) Microsoft Corporation.
|
|
20
11
|
|
|
@@ -418,7 +409,7 @@ var base$d = {
|
|
|
418
409
|
},
|
|
419
410
|
$ref: "./base/index.json"
|
|
420
411
|
};
|
|
421
|
-
var component = {
|
|
412
|
+
var component$1 = {
|
|
422
413
|
button: {
|
|
423
414
|
primary: {
|
|
424
415
|
backgroundColor: "#212529",
|
|
@@ -868,11 +859,10 @@ var semantic$g = {
|
|
|
868
859
|
};
|
|
869
860
|
var tokensData = {
|
|
870
861
|
base: base$d,
|
|
871
|
-
component: component,
|
|
862
|
+
component: component$1,
|
|
872
863
|
semantic: semantic$g
|
|
873
864
|
};
|
|
874
865
|
|
|
875
|
-
React.createElement;
|
|
876
866
|
var AvatarContainer = styled.div.withConfig({
|
|
877
867
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
878
868
|
return !prop.startsWith('$');
|
|
@@ -943,28 +933,30 @@ var Avatar = function Avatar(_a) {
|
|
|
943
933
|
};
|
|
944
934
|
var showImage = picture && !imageError;
|
|
945
935
|
var initials = getInitials(name);
|
|
946
|
-
return
|
|
947
|
-
$size: size,
|
|
936
|
+
return jsxRuntime.jsx(AvatarContainer, __assign({
|
|
937
|
+
"$size": size,
|
|
948
938
|
"data-testid": dataTestId,
|
|
949
939
|
"data-size": size,
|
|
950
940
|
role: "img",
|
|
951
941
|
"aria-label": "Avatar for ".concat(name)
|
|
952
|
-
}, htmlProps
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
942
|
+
}, htmlProps, {
|
|
943
|
+
children: showImage ? jsxRuntime.jsx(AvatarImage, {
|
|
944
|
+
"$size": size,
|
|
945
|
+
src: picture,
|
|
946
|
+
alt: "Avatar of ".concat(name),
|
|
947
|
+
onError: handleImageError,
|
|
948
|
+
onLoad: handleImageLoad,
|
|
949
|
+
"data-state": imageLoaded ? 'loaded' : 'loading'
|
|
950
|
+
}) : jsxRuntime.jsx(AvatarInitials, {
|
|
951
|
+
"$size": size,
|
|
952
|
+
"data-initials": initials,
|
|
953
|
+
"aria-hidden": "true",
|
|
954
|
+
children: initials
|
|
955
|
+
})
|
|
956
|
+
}));
|
|
964
957
|
};
|
|
965
958
|
var templateObject_1$I, templateObject_2$t, templateObject_3$p;
|
|
966
959
|
|
|
967
|
-
React.createElement;
|
|
968
960
|
var _a$5 = tokensData.semantic,
|
|
969
961
|
typography$2 = _a$5.typography,
|
|
970
962
|
color$4 = _a$5.color;
|
|
@@ -1090,16 +1082,16 @@ var Typography = function Typography(_a) {
|
|
|
1090
1082
|
// $variant and $color are only used for styled-components prop filtering
|
|
1091
1083
|
var defaultElement = getDefaultElement(variant);
|
|
1092
1084
|
var elementType = as || defaultElement;
|
|
1093
|
-
return
|
|
1085
|
+
return jsxRuntime.jsx(StyledTypography, {
|
|
1094
1086
|
as: elementType,
|
|
1095
|
-
$variant: variant,
|
|
1096
|
-
$color: color,
|
|
1097
|
-
"data-testid": dataTestId
|
|
1098
|
-
|
|
1087
|
+
"$variant": variant,
|
|
1088
|
+
"$color": color,
|
|
1089
|
+
"data-testid": dataTestId,
|
|
1090
|
+
children: children
|
|
1091
|
+
});
|
|
1099
1092
|
};
|
|
1100
1093
|
var templateObject_1$H;
|
|
1101
1094
|
|
|
1102
|
-
React.createElement;
|
|
1103
1095
|
var color$3 = tokensData.semantic.color;
|
|
1104
1096
|
tokensData.base.shadow;
|
|
1105
1097
|
var scaleIn$1 = styled.keyframes(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n from {\n transform: scale(0.8);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n"], ["\n from {\n transform: scale(0.8);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n"])));
|
|
@@ -1156,29 +1148,33 @@ var Badge = function Badge(_a) {
|
|
|
1156
1148
|
// Generate default aria-label if not provided
|
|
1157
1149
|
var defaultAriaLabel = dot ? 'New notification indicator' : count === 1 ? '1 notification' : "".concat(count, " notifications");
|
|
1158
1150
|
var label = ariaLabel || defaultAriaLabel;
|
|
1159
|
-
return
|
|
1160
|
-
className: className
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1151
|
+
return jsxRuntime.jsxs(BadgeWrapper, {
|
|
1152
|
+
className: className,
|
|
1153
|
+
children: [children, jsxRuntime.jsxs(BadgeIndicator, {
|
|
1154
|
+
"$variant": variant,
|
|
1155
|
+
"$isDot": dot,
|
|
1156
|
+
"$isVisible": isVisible,
|
|
1157
|
+
role: "status",
|
|
1158
|
+
"aria-live": "polite",
|
|
1159
|
+
children: [!dot && jsxRuntime.jsx(Typography, {
|
|
1160
|
+
variant: "caption",
|
|
1161
|
+
color: "inverse",
|
|
1162
|
+
children: displayCount
|
|
1163
|
+
}), jsxRuntime.jsx(ScreenReaderOnly$1, {
|
|
1164
|
+
children: label
|
|
1165
|
+
})]
|
|
1166
|
+
})]
|
|
1167
|
+
});
|
|
1171
1168
|
};
|
|
1172
1169
|
var templateObject_1$G, templateObject_2$s, templateObject_3$o, templateObject_4$j;
|
|
1173
1170
|
|
|
1174
|
-
React.createElement;
|
|
1175
1171
|
var StyledBox = styled.div.withConfig({
|
|
1176
1172
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1177
1173
|
return !prop.startsWith('$');
|
|
1178
1174
|
},
|
|
1179
1175
|
displayName: "Box__StyledBox",
|
|
1180
1176
|
componentId: "sc-aj0jhd-0"
|
|
1181
|
-
})(
|
|
1177
|
+
})(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Shadow\n ", "\n \n // Cursor\n ", "\n \n // Transition\n ", "\n \n // Hover states\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"], ["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Shadow\n ", "\n \n // Cursor\n ", "\n \n // Transition\n ", "\n \n // Hover states\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"
|
|
1182
1178
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1183
1179
|
])), function (props) {
|
|
1184
1180
|
return props.$display && styled.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
@@ -1191,11 +1187,11 @@ var StyledBox = styled.div.withConfig({
|
|
|
1191
1187
|
}, function (props) {
|
|
1192
1188
|
return props.$flexWrap && styled.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1193
1189
|
}, function (props) {
|
|
1194
|
-
return props.$gap && styled.css(templateObject_6$
|
|
1190
|
+
return props.$gap && styled.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1195
1191
|
}, function (props) {
|
|
1196
|
-
return props.$m && styled.css(templateObject_7$
|
|
1192
|
+
return props.$m && styled.css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1197
1193
|
}, function (props) {
|
|
1198
|
-
return props.$mt && styled.css(templateObject_8$
|
|
1194
|
+
return props.$mt && styled.css(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1199
1195
|
}, function (props) {
|
|
1200
1196
|
return props.$mr && styled.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
|
|
1201
1197
|
}, function (props) {
|
|
@@ -1259,11 +1255,19 @@ var StyledBox = styled.div.withConfig({
|
|
|
1259
1255
|
}, function (props) {
|
|
1260
1256
|
return props.$color && styled.css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokensData.semantic.color.text[props.$color]);
|
|
1261
1257
|
}, function (props) {
|
|
1262
|
-
return props.$
|
|
1258
|
+
return props.$shadow && styled.css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.base.shadow[props.$shadow]);
|
|
1259
|
+
}, function (props) {
|
|
1260
|
+
return props.$cursor && styled.css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["cursor: ", ";"], ["cursor: ", ";"])), props.$cursor);
|
|
1261
|
+
}, function (props) {
|
|
1262
|
+
return props.$transition && styled.css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
|
|
1263
1263
|
}, function (props) {
|
|
1264
|
-
return props.$
|
|
1264
|
+
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: 2px solid ", ";\n outline-offset: 2px;\n }\n "], ["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n "])), props.$hoverShadow && styled.css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.base.shadow[props.$hoverShadow]), props.$hoverTransform && styled.css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensData.semantic.color.border.interactive);
|
|
1265
1265
|
}, function (props) {
|
|
1266
|
-
return props.$
|
|
1266
|
+
return props.$overflow && styled.css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
|
|
1267
|
+
}, function (props) {
|
|
1268
|
+
return props.$overflowX && styled.css(templateObject_47 || (templateObject_47 = __makeTemplateObject(["overflow-x: ", ";"], ["overflow-x: ", ";"])), props.$overflowX);
|
|
1269
|
+
}, function (props) {
|
|
1270
|
+
return props.$overflowY && styled.css(templateObject_48 || (templateObject_48 = __makeTemplateObject(["overflow-y: ", ";"], ["overflow-y: ", ";"])), props.$overflowY);
|
|
1267
1271
|
});
|
|
1268
1272
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1269
1273
|
var BoxTransform = function BoxTransform(props) {
|
|
@@ -1314,6 +1318,15 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1314
1318
|
// Background & Color
|
|
1315
1319
|
bg = props.bg,
|
|
1316
1320
|
color = props.color,
|
|
1321
|
+
// Shadow
|
|
1322
|
+
shadow = props.shadow,
|
|
1323
|
+
// Cursor
|
|
1324
|
+
cursor = props.cursor,
|
|
1325
|
+
// Transition
|
|
1326
|
+
transition = props.transition,
|
|
1327
|
+
// Hover states
|
|
1328
|
+
hoverShadow = props.hoverShadow,
|
|
1329
|
+
hoverTransform = props.hoverTransform,
|
|
1317
1330
|
// Overflow
|
|
1318
1331
|
overflow = props.overflow,
|
|
1319
1332
|
overflowX = props.overflowX,
|
|
@@ -1321,57 +1334,74 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1321
1334
|
// Standard props
|
|
1322
1335
|
as = props.as,
|
|
1323
1336
|
children = props.children,
|
|
1337
|
+
onClick = props.onClick,
|
|
1338
|
+
onKeyDown = props.onKeyDown,
|
|
1339
|
+
tabIndex = props.tabIndex,
|
|
1340
|
+
role = props.role,
|
|
1341
|
+
ariaLabel = props["aria-label"],
|
|
1324
1342
|
dataTestId = props["data-testid"],
|
|
1325
|
-
rest = __rest(props, ["display", "flexDirection", "justifyContent", "alignItems", "flexWrap", "gap", "m", "mt", "mr", "mb", "ml", "mx", "my", "p", "pt", "pr", "pb", "pl", "px", "py", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "position", "top", "right", "bottom", "left", "borderRadius", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "bg", "color", "overflow", "overflowX", "overflowY", "as", "children", 'data-testid']);
|
|
1326
|
-
return
|
|
1343
|
+
rest = __rest(props, ["display", "flexDirection", "justifyContent", "alignItems", "flexWrap", "gap", "m", "mt", "mr", "mb", "ml", "mx", "my", "p", "pt", "pr", "pb", "pl", "px", "py", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "position", "top", "right", "bottom", "left", "borderRadius", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "bg", "color", "shadow", "cursor", "transition", "hoverShadow", "hoverTransform", "overflow", "overflowX", "overflowY", "as", "children", "onClick", "onKeyDown", "tabIndex", "role", 'aria-label', 'data-testid']);
|
|
1344
|
+
return jsxRuntime.jsx(StyledBox, __assign({
|
|
1327
1345
|
as: as,
|
|
1328
1346
|
"data-testid": dataTestId,
|
|
1329
|
-
$display: display,
|
|
1330
|
-
$flexDirection: flexDirection,
|
|
1331
|
-
$justifyContent: justifyContent,
|
|
1332
|
-
$alignItems: alignItems,
|
|
1333
|
-
$flexWrap: flexWrap,
|
|
1334
|
-
$gap: gap,
|
|
1335
|
-
$m: m,
|
|
1336
|
-
$mt: mt,
|
|
1337
|
-
$mr: mr,
|
|
1338
|
-
$mb: mb,
|
|
1339
|
-
$ml: ml,
|
|
1340
|
-
$mx: mx,
|
|
1341
|
-
$my: my,
|
|
1342
|
-
$p: p,
|
|
1343
|
-
$pt: pt,
|
|
1344
|
-
$pr: pr,
|
|
1345
|
-
$pb: pb,
|
|
1346
|
-
$pl: pl,
|
|
1347
|
-
$px: px,
|
|
1348
|
-
$py: py,
|
|
1349
|
-
$width: width,
|
|
1350
|
-
$height: height,
|
|
1351
|
-
$maxWidth: maxWidth,
|
|
1352
|
-
$maxHeight: maxHeight,
|
|
1353
|
-
$minWidth: minWidth,
|
|
1354
|
-
$minHeight: minHeight,
|
|
1355
|
-
$position: position,
|
|
1356
|
-
$top: top,
|
|
1357
|
-
$right: right,
|
|
1358
|
-
$bottom: bottom,
|
|
1359
|
-
$left: left,
|
|
1360
|
-
$borderRadius: borderRadius,
|
|
1361
|
-
$border: border,
|
|
1362
|
-
$borderTop: borderTop,
|
|
1363
|
-
$borderRight: borderRight,
|
|
1364
|
-
$borderBottom: borderBottom,
|
|
1365
|
-
$borderLeft: borderLeft,
|
|
1366
|
-
$bg: bg,
|
|
1367
|
-
$color: color,
|
|
1368
|
-
$
|
|
1369
|
-
$
|
|
1370
|
-
$
|
|
1371
|
-
|
|
1347
|
+
"$display": display,
|
|
1348
|
+
"$flexDirection": flexDirection,
|
|
1349
|
+
"$justifyContent": justifyContent,
|
|
1350
|
+
"$alignItems": alignItems,
|
|
1351
|
+
"$flexWrap": flexWrap,
|
|
1352
|
+
"$gap": gap,
|
|
1353
|
+
"$m": m,
|
|
1354
|
+
"$mt": mt,
|
|
1355
|
+
"$mr": mr,
|
|
1356
|
+
"$mb": mb,
|
|
1357
|
+
"$ml": ml,
|
|
1358
|
+
"$mx": mx,
|
|
1359
|
+
"$my": my,
|
|
1360
|
+
"$p": p,
|
|
1361
|
+
"$pt": pt,
|
|
1362
|
+
"$pr": pr,
|
|
1363
|
+
"$pb": pb,
|
|
1364
|
+
"$pl": pl,
|
|
1365
|
+
"$px": px,
|
|
1366
|
+
"$py": py,
|
|
1367
|
+
"$width": width,
|
|
1368
|
+
"$height": height,
|
|
1369
|
+
"$maxWidth": maxWidth,
|
|
1370
|
+
"$maxHeight": maxHeight,
|
|
1371
|
+
"$minWidth": minWidth,
|
|
1372
|
+
"$minHeight": minHeight,
|
|
1373
|
+
"$position": position,
|
|
1374
|
+
"$top": top,
|
|
1375
|
+
"$right": right,
|
|
1376
|
+
"$bottom": bottom,
|
|
1377
|
+
"$left": left,
|
|
1378
|
+
"$borderRadius": borderRadius,
|
|
1379
|
+
"$border": border,
|
|
1380
|
+
"$borderTop": borderTop,
|
|
1381
|
+
"$borderRight": borderRight,
|
|
1382
|
+
"$borderBottom": borderBottom,
|
|
1383
|
+
"$borderLeft": borderLeft,
|
|
1384
|
+
"$bg": bg,
|
|
1385
|
+
"$color": color,
|
|
1386
|
+
"$shadow": shadow,
|
|
1387
|
+
"$cursor": cursor,
|
|
1388
|
+
"$transition": transition,
|
|
1389
|
+
"$hoverShadow": hoverShadow,
|
|
1390
|
+
"$hoverTransform": hoverTransform,
|
|
1391
|
+
"$overflow": overflow,
|
|
1392
|
+
"$overflowX": overflowX,
|
|
1393
|
+
"$overflowY": overflowY,
|
|
1394
|
+
onClick: onClick,
|
|
1395
|
+
onKeyDown: onKeyDown,
|
|
1396
|
+
tabIndex: tabIndex,
|
|
1397
|
+
role: role,
|
|
1398
|
+
"aria-label": ariaLabel
|
|
1399
|
+
}, rest, {
|
|
1400
|
+
children: children
|
|
1401
|
+
}));
|
|
1372
1402
|
};
|
|
1373
1403
|
var Box = BoxTransform;
|
|
1374
|
-
var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$e, templateObject_6$
|
|
1404
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$e, templateObject_6$c, templateObject_7$9, templateObject_8$5, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
|
|
1375
1405
|
|
|
1376
1406
|
var add = {
|
|
1377
1407
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1590,7 +1620,6 @@ var iconsData = {
|
|
|
1590
1620
|
viewHide: viewHide
|
|
1591
1621
|
};
|
|
1592
1622
|
|
|
1593
|
-
React.createElement;
|
|
1594
1623
|
var IconStyled = styled.span.withConfig({
|
|
1595
1624
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1596
1625
|
return !prop.startsWith('$');
|
|
@@ -1641,29 +1670,30 @@ var Icon = function Icon(_a) {
|
|
|
1641
1670
|
var iconData = iconsData[name];
|
|
1642
1671
|
if (!iconData) {
|
|
1643
1672
|
console.warn("Icon \"".concat(name, "\" not found in icons.json"));
|
|
1644
|
-
return
|
|
1645
|
-
$size: size,
|
|
1646
|
-
$iconColor: iconColor,
|
|
1673
|
+
return jsxRuntime.jsx(IconStyled, {
|
|
1674
|
+
"$size": size,
|
|
1675
|
+
"$iconColor": iconColor,
|
|
1647
1676
|
"data-testid": dataTestId
|
|
1648
1677
|
});
|
|
1649
1678
|
}
|
|
1650
|
-
return
|
|
1651
|
-
$size: size,
|
|
1652
|
-
$iconColor: iconColor,
|
|
1653
|
-
"data-testid": dataTestId
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1679
|
+
return jsxRuntime.jsx(IconStyled, {
|
|
1680
|
+
"$size": size,
|
|
1681
|
+
"$iconColor": iconColor,
|
|
1682
|
+
"data-testid": dataTestId,
|
|
1683
|
+
children: jsxRuntime.jsx("svg", {
|
|
1684
|
+
viewBox: "0 0 24 24",
|
|
1685
|
+
fill: "currentColor",
|
|
1686
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1687
|
+
role: "img",
|
|
1688
|
+
"aria-label": iconData.name,
|
|
1689
|
+
children: jsxRuntime.jsx("path", {
|
|
1690
|
+
d: iconData.path
|
|
1691
|
+
})
|
|
1692
|
+
})
|
|
1693
|
+
});
|
|
1663
1694
|
};
|
|
1664
1695
|
var templateObject_1$E;
|
|
1665
1696
|
|
|
1666
|
-
React.createElement;
|
|
1667
1697
|
var button = tokensData.component.button,
|
|
1668
1698
|
semantic$f = tokensData.semantic;
|
|
1669
1699
|
// Base styles shared between button and link
|
|
@@ -1720,11 +1750,13 @@ var getIconSize = function getIconSize(buttonSize) {
|
|
|
1720
1750
|
var renderButtonContent = function renderButtonContent(children, iconName, size) {
|
|
1721
1751
|
if (!iconName) return children;
|
|
1722
1752
|
var iconSize = getIconSize(size);
|
|
1723
|
-
return
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1753
|
+
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
1754
|
+
children: [jsxRuntime.jsx(Icon, {
|
|
1755
|
+
name: iconName,
|
|
1756
|
+
size: iconSize,
|
|
1757
|
+
iconColor: "inherit"
|
|
1758
|
+
}), children]
|
|
1759
|
+
});
|
|
1728
1760
|
};
|
|
1729
1761
|
var Button = function Button(_a) {
|
|
1730
1762
|
var _b = _a.variant,
|
|
@@ -1742,25 +1774,29 @@ var Button = function Button(_a) {
|
|
|
1742
1774
|
rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", "linkComponent", 'data-testid']);
|
|
1743
1775
|
// For links with custom link component (e.g., Next.js Link, React Router Link)
|
|
1744
1776
|
if (purpose === 'link' && url && LinkComponent) {
|
|
1745
|
-
return
|
|
1746
|
-
href: url
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1777
|
+
return jsxRuntime.jsx(LinkComponent, {
|
|
1778
|
+
href: url,
|
|
1779
|
+
children: jsxRuntime.jsx(StyledLink, {
|
|
1780
|
+
as: "span",
|
|
1781
|
+
"$variant": variant,
|
|
1782
|
+
"$size": size,
|
|
1783
|
+
"data-testid": dataTestId,
|
|
1784
|
+
children: renderButtonContent(children, iconName, size)
|
|
1785
|
+
})
|
|
1786
|
+
});
|
|
1753
1787
|
}
|
|
1754
1788
|
// For standard links (external or without custom component)
|
|
1755
1789
|
if (purpose === 'link' && url) {
|
|
1756
1790
|
var linkProps = rest;
|
|
1757
|
-
return
|
|
1791
|
+
return jsxRuntime.jsx(StyledLink, __assign({
|
|
1758
1792
|
href: url,
|
|
1759
1793
|
target: target,
|
|
1760
|
-
$variant: variant,
|
|
1761
|
-
$size: size,
|
|
1794
|
+
"$variant": variant,
|
|
1795
|
+
"$size": size,
|
|
1762
1796
|
"data-testid": dataTestId
|
|
1763
|
-
}, linkProps
|
|
1797
|
+
}, linkProps, {
|
|
1798
|
+
children: renderButtonContent(children, iconName, size)
|
|
1799
|
+
}));
|
|
1764
1800
|
}
|
|
1765
1801
|
// For button with URL (legacy support)
|
|
1766
1802
|
if (purpose === 'button' && url) {
|
|
@@ -1777,24 +1813,26 @@ var Button = function Button(_a) {
|
|
|
1777
1813
|
window.location.href = url;
|
|
1778
1814
|
}
|
|
1779
1815
|
};
|
|
1780
|
-
return
|
|
1781
|
-
$variant: variant,
|
|
1782
|
-
$size: size,
|
|
1816
|
+
return jsxRuntime.jsx(StyledButton, __assign({}, buttonProps_1, {
|
|
1817
|
+
"$variant": variant,
|
|
1818
|
+
"$size": size,
|
|
1783
1819
|
"data-testid": dataTestId,
|
|
1784
|
-
onClick: handleClick
|
|
1785
|
-
|
|
1820
|
+
onClick: handleClick,
|
|
1821
|
+
children: renderButtonContent(children, iconName, size)
|
|
1822
|
+
}));
|
|
1786
1823
|
}
|
|
1787
1824
|
// Regular button
|
|
1788
1825
|
var buttonProps = rest;
|
|
1789
|
-
return
|
|
1790
|
-
$variant: variant,
|
|
1791
|
-
$size: size,
|
|
1826
|
+
return jsxRuntime.jsx(StyledButton, __assign({
|
|
1827
|
+
"$variant": variant,
|
|
1828
|
+
"$size": size,
|
|
1792
1829
|
"data-testid": dataTestId
|
|
1793
|
-
}, buttonProps
|
|
1830
|
+
}, buttonProps, {
|
|
1831
|
+
children: renderButtonContent(children, iconName, size)
|
|
1832
|
+
}));
|
|
1794
1833
|
};
|
|
1795
1834
|
var templateObject_1$D, templateObject_2$q;
|
|
1796
1835
|
|
|
1797
|
-
React.createElement;
|
|
1798
1836
|
var semantic$e = tokensData.semantic,
|
|
1799
1837
|
base$c = tokensData.base;
|
|
1800
1838
|
var getColorStyles = function getColorStyles(color, variant) {
|
|
@@ -1932,12 +1970,12 @@ var CategoryBadge = function CategoryBadge(_a) {
|
|
|
1932
1970
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
1933
1971
|
}
|
|
1934
1972
|
};
|
|
1935
|
-
return
|
|
1936
|
-
$color: color,
|
|
1937
|
-
$variant: variant,
|
|
1938
|
-
$size: size,
|
|
1939
|
-
$clickable: isClickable,
|
|
1940
|
-
$disabled: disabled,
|
|
1973
|
+
return jsxRuntime.jsxs(StyledCategoryBadge, {
|
|
1974
|
+
"$color": color,
|
|
1975
|
+
"$variant": variant,
|
|
1976
|
+
"$size": size,
|
|
1977
|
+
"$clickable": isClickable,
|
|
1978
|
+
"$disabled": disabled,
|
|
1941
1979
|
onClick: handleClick,
|
|
1942
1980
|
onKeyDown: handleKeyDown,
|
|
1943
1981
|
tabIndex: hasClickHandler ? 0 : undefined,
|
|
@@ -1945,12 +1983,14 @@ var CategoryBadge = function CategoryBadge(_a) {
|
|
|
1945
1983
|
"aria-label": ariaLabel,
|
|
1946
1984
|
"aria-disabled": disabled,
|
|
1947
1985
|
"data-testid": dataTestId,
|
|
1948
|
-
style: cssProps
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1986
|
+
style: cssProps,
|
|
1987
|
+
children: [icon && jsxRuntime.jsx(Icon, {
|
|
1988
|
+
name: icon,
|
|
1989
|
+
size: sizeStyles.iconSize,
|
|
1990
|
+
iconColor: variant === 'filled' ? 'inverse' : 'inherit',
|
|
1991
|
+
"aria-hidden": "true"
|
|
1992
|
+
}), children]
|
|
1993
|
+
});
|
|
1954
1994
|
};
|
|
1955
1995
|
CategoryBadge.displayName = 'CategoryBadge';
|
|
1956
1996
|
var templateObject_1$C;
|
|
@@ -2006,7 +2046,6 @@ var getSizeStylesAsObject = function getSizeStylesAsObject(size) {
|
|
|
2006
2046
|
}
|
|
2007
2047
|
};
|
|
2008
2048
|
|
|
2009
|
-
React.createElement;
|
|
2010
2049
|
// Base styled component using CSS variables to avoid prop leaking
|
|
2011
2050
|
var BaseChipStyled = styled.span.withConfig({
|
|
2012
2051
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2062,13 +2101,14 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
2062
2101
|
'--chip-hover-opacity': $disabled ? '0.6' : $clickable ? '0.8' : '1',
|
|
2063
2102
|
'--chip-active-opacity': $disabled ? '0.6' : $clickable ? '0.9' : '1'
|
|
2064
2103
|
};
|
|
2065
|
-
return
|
|
2104
|
+
return jsxRuntime.jsx(BaseChipStyled, __assign({
|
|
2066
2105
|
style: __assign(__assign({}, cssProps), style)
|
|
2067
|
-
}, htmlProps
|
|
2106
|
+
}, htmlProps, {
|
|
2107
|
+
children: children
|
|
2108
|
+
}));
|
|
2068
2109
|
};
|
|
2069
2110
|
var templateObject_1$B, templateObject_2$p, templateObject_3$m;
|
|
2070
2111
|
|
|
2071
|
-
React.createElement;
|
|
2072
2112
|
/**
|
|
2073
2113
|
* Chip - Compact element for displaying tags, categories, and labels
|
|
2074
2114
|
*
|
|
@@ -2114,11 +2154,11 @@ var Chip = function Chip(_a) {
|
|
|
2114
2154
|
handleClick();
|
|
2115
2155
|
}
|
|
2116
2156
|
};
|
|
2117
|
-
return
|
|
2118
|
-
$variant: normalizedVariant,
|
|
2119
|
-
$size: size,
|
|
2120
|
-
$disabled: disabled || undefined,
|
|
2121
|
-
$clickable: isClickable || undefined,
|
|
2157
|
+
return jsxRuntime.jsx(StyledChipWrapper, __assign({
|
|
2158
|
+
"$variant": normalizedVariant,
|
|
2159
|
+
"$size": size,
|
|
2160
|
+
"$disabled": disabled || undefined,
|
|
2161
|
+
"$clickable": isClickable || undefined,
|
|
2122
2162
|
onClick: isClickable ? handleClick : undefined,
|
|
2123
2163
|
onKeyDown: handleKeyDown,
|
|
2124
2164
|
tabIndex: isClickable ? 0 : undefined,
|
|
@@ -2127,19 +2167,21 @@ var Chip = function Chip(_a) {
|
|
|
2127
2167
|
"aria-describedby": ariaDescribedBy,
|
|
2128
2168
|
"aria-disabled": disabled ? 'true' : undefined,
|
|
2129
2169
|
"data-testid": dataTestId
|
|
2130
|
-
}, props
|
|
2170
|
+
}, props, {
|
|
2171
|
+
children: content
|
|
2172
|
+
}));
|
|
2131
2173
|
};
|
|
2132
2174
|
var LegacyChip = function LegacyChip(_a) {
|
|
2133
2175
|
var title = _a.title,
|
|
2134
2176
|
_b = _a.variant,
|
|
2135
2177
|
variant = _b === void 0 ? 'light' : _b;
|
|
2136
2178
|
var newVariant = variant === 'dark' ? 'emphasis' : 'default';
|
|
2137
|
-
return
|
|
2138
|
-
variant: newVariant
|
|
2139
|
-
|
|
2179
|
+
return jsxRuntime.jsx(Chip, {
|
|
2180
|
+
variant: newVariant,
|
|
2181
|
+
children: title
|
|
2182
|
+
});
|
|
2140
2183
|
};
|
|
2141
2184
|
|
|
2142
|
-
React.createElement;
|
|
2143
2185
|
/**
|
|
2144
2186
|
* FilterChip - Chip for displaying filters with selected state and optional dismissal
|
|
2145
2187
|
*
|
|
@@ -2192,39 +2234,42 @@ var FilterChip = function FilterChip(_a) {
|
|
|
2192
2234
|
};
|
|
2193
2235
|
// Generate accessible label for close button
|
|
2194
2236
|
var closeButtonLabel = typeof children === 'string' ? "Remove ".concat(children) : 'Remove filter';
|
|
2195
|
-
return
|
|
2196
|
-
$variant: "subtle",
|
|
2197
|
-
$size: size,
|
|
2198
|
-
$disabled: disabled || undefined,
|
|
2199
|
-
$clickable: false,
|
|
2200
|
-
$selected: selected,
|
|
2237
|
+
return jsxRuntime.jsxs(StyledChipWrapper, __assign({
|
|
2238
|
+
"$variant": "subtle",
|
|
2239
|
+
"$size": size,
|
|
2240
|
+
"$disabled": disabled || undefined,
|
|
2241
|
+
"$clickable": false,
|
|
2242
|
+
"$selected": selected,
|
|
2201
2243
|
onKeyDown: handleKeyDown,
|
|
2202
2244
|
role: role || 'status',
|
|
2203
2245
|
"aria-label": ariaLabel,
|
|
2204
2246
|
"aria-describedby": ariaDescribedBy,
|
|
2205
2247
|
"aria-disabled": disabled ? 'true' : undefined,
|
|
2206
2248
|
"data-testid": dataTestId
|
|
2207
|
-
}, props
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2249
|
+
}, props, {
|
|
2250
|
+
children: [selected && jsxRuntime.jsx(IconContainer, {
|
|
2251
|
+
"aria-hidden": "true",
|
|
2252
|
+
children: jsxRuntime.jsx(Icon, {
|
|
2253
|
+
name: "check",
|
|
2254
|
+
size: "sm"
|
|
2255
|
+
})
|
|
2256
|
+
}), children, isDismissible && jsxRuntime.jsx(CloseButton, {
|
|
2257
|
+
type: "button",
|
|
2258
|
+
onClick: handleDismiss,
|
|
2259
|
+
onKeyDown: handleCloseKeyDown,
|
|
2260
|
+
disabled: disabled,
|
|
2261
|
+
"$disabled": disabled,
|
|
2262
|
+
"aria-label": closeButtonLabel,
|
|
2263
|
+
tabIndex: 0,
|
|
2264
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-close") : undefined,
|
|
2265
|
+
children: jsxRuntime.jsx(Icon, {
|
|
2266
|
+
name: "close",
|
|
2267
|
+
size: "sm"
|
|
2268
|
+
})
|
|
2269
|
+
})]
|
|
2270
|
+
}));
|
|
2225
2271
|
};
|
|
2226
2272
|
|
|
2227
|
-
React.createElement;
|
|
2228
2273
|
/**
|
|
2229
2274
|
* BooleanChip - Toggleable chip for quick filter controls
|
|
2230
2275
|
*
|
|
@@ -2263,12 +2308,12 @@ var BooleanChip = function BooleanChip(_a) {
|
|
|
2263
2308
|
handleClick();
|
|
2264
2309
|
}
|
|
2265
2310
|
};
|
|
2266
|
-
return
|
|
2267
|
-
$variant: "subtle",
|
|
2268
|
-
$size: size,
|
|
2269
|
-
$disabled: disabled || undefined,
|
|
2270
|
-
$clickable: !disabled,
|
|
2271
|
-
$selected: selected,
|
|
2311
|
+
return jsxRuntime.jsxs(StyledChipWrapper, __assign({
|
|
2312
|
+
"$variant": "subtle",
|
|
2313
|
+
"$size": size,
|
|
2314
|
+
"$disabled": disabled || undefined,
|
|
2315
|
+
"$clickable": !disabled,
|
|
2316
|
+
"$selected": selected,
|
|
2272
2317
|
onClick: handleClick,
|
|
2273
2318
|
onKeyDown: handleKeyDown,
|
|
2274
2319
|
tabIndex: disabled ? undefined : 0,
|
|
@@ -2278,12 +2323,15 @@ var BooleanChip = function BooleanChip(_a) {
|
|
|
2278
2323
|
"aria-describedby": ariaDescribedBy,
|
|
2279
2324
|
"aria-disabled": disabled ? 'true' : undefined,
|
|
2280
2325
|
"data-testid": dataTestId
|
|
2281
|
-
}, props
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2326
|
+
}, props, {
|
|
2327
|
+
children: [selected && jsxRuntime.jsx(IconContainer, {
|
|
2328
|
+
"aria-hidden": "true",
|
|
2329
|
+
children: jsxRuntime.jsx(Icon, {
|
|
2330
|
+
name: "check",
|
|
2331
|
+
size: "sm"
|
|
2332
|
+
})
|
|
2333
|
+
}), children]
|
|
2334
|
+
}));
|
|
2287
2335
|
};
|
|
2288
2336
|
|
|
2289
2337
|
// Breakpoints using base tokens
|
|
@@ -2305,7 +2353,6 @@ var media$1 = {
|
|
|
2305
2353
|
'2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
|
|
2306
2354
|
};
|
|
2307
2355
|
|
|
2308
|
-
React.createElement;
|
|
2309
2356
|
var spacing$3 = tokensData.semantic.spacing;
|
|
2310
2357
|
var StyledContainer$2 = styled.div.withConfig({
|
|
2311
2358
|
displayName: "Container__StyledContainer",
|
|
@@ -2314,11 +2361,12 @@ var StyledContainer$2 = styled.div.withConfig({
|
|
|
2314
2361
|
var Container = function Container(_a) {
|
|
2315
2362
|
var children = _a.children,
|
|
2316
2363
|
props = __rest(_a, ["children"]);
|
|
2317
|
-
return
|
|
2364
|
+
return jsxRuntime.jsx(StyledContainer$2, __assign({}, props, {
|
|
2365
|
+
children: children
|
|
2366
|
+
}));
|
|
2318
2367
|
};
|
|
2319
2368
|
var templateObject_1$A;
|
|
2320
2369
|
|
|
2321
|
-
React.createElement;
|
|
2322
2370
|
var base$b = tokensData.base;
|
|
2323
2371
|
var PictureWrapper = styled.div.withConfig({
|
|
2324
2372
|
displayName: "Picture__PictureWrapper",
|
|
@@ -2346,25 +2394,27 @@ var Picture = function Picture(_a) {
|
|
|
2346
2394
|
onClick = _a.onClick,
|
|
2347
2395
|
href = _a.href,
|
|
2348
2396
|
dataTestId = _a["data-testid"];
|
|
2349
|
-
var image =
|
|
2397
|
+
var image = jsxRuntime.jsx(StyledImage, {
|
|
2350
2398
|
src: src,
|
|
2351
2399
|
alt: title,
|
|
2352
2400
|
width: width,
|
|
2353
2401
|
height: height
|
|
2354
2402
|
});
|
|
2355
|
-
return
|
|
2356
|
-
"data-testid": dataTestId
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2403
|
+
return jsxRuntime.jsx(PictureWrapper, {
|
|
2404
|
+
"data-testid": dataTestId,
|
|
2405
|
+
children: href ? jsxRuntime.jsx(ImageLink, {
|
|
2406
|
+
href: href,
|
|
2407
|
+
"aria-label": "Read more about ".concat(title),
|
|
2408
|
+
children: image
|
|
2409
|
+
}) : onClick ? jsxRuntime.jsx(ImageButton, {
|
|
2410
|
+
onClick: onClick,
|
|
2411
|
+
"aria-label": "Read more about ".concat(title),
|
|
2412
|
+
children: image
|
|
2413
|
+
}) : image
|
|
2414
|
+
});
|
|
2364
2415
|
};
|
|
2365
2416
|
var templateObject_1$z, templateObject_2$o, templateObject_3$l, templateObject_4$h;
|
|
2366
2417
|
|
|
2367
|
-
React.createElement;
|
|
2368
2418
|
var _a$4 = tokensData.semantic,
|
|
2369
2419
|
typography$1 = _a$4.typography,
|
|
2370
2420
|
color$2 = _a$4.color;
|
|
@@ -2414,14 +2464,14 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
2414
2464
|
displayText = dateFns.format(date, formatString || 'yyyy');
|
|
2415
2465
|
break;
|
|
2416
2466
|
}
|
|
2417
|
-
return
|
|
2467
|
+
return jsxRuntime.jsx(TimeStyled, {
|
|
2418
2468
|
dateTime: dateString,
|
|
2419
|
-
"data-testid": dataTestId
|
|
2420
|
-
|
|
2469
|
+
"data-testid": dataTestId,
|
|
2470
|
+
children: displayText
|
|
2471
|
+
});
|
|
2421
2472
|
};
|
|
2422
2473
|
var templateObject_1$y;
|
|
2423
2474
|
|
|
2424
|
-
React.createElement;
|
|
2425
2475
|
var motion = tokensData.semantic.motion,
|
|
2426
2476
|
iconButton = tokensData.component.iconButton;
|
|
2427
2477
|
var IconButtonStyled = styled.button.withConfig({
|
|
@@ -2519,9 +2569,9 @@ var IconButton = function IconButton(_a) {
|
|
|
2519
2569
|
return 'default';
|
|
2520
2570
|
}
|
|
2521
2571
|
};
|
|
2522
|
-
return
|
|
2523
|
-
$variant: variant,
|
|
2524
|
-
$size: size,
|
|
2572
|
+
return jsxRuntime.jsx(IconButtonStyled, __assign({
|
|
2573
|
+
"$variant": variant,
|
|
2574
|
+
"$size": size,
|
|
2525
2575
|
onClick: handleClick,
|
|
2526
2576
|
onKeyDown: handleKeyDown,
|
|
2527
2577
|
disabled: disabled,
|
|
@@ -2534,16 +2584,17 @@ var IconButton = function IconButton(_a) {
|
|
|
2534
2584
|
"aria-disabled": disabled,
|
|
2535
2585
|
tabIndex: disabled ? -1 : 0,
|
|
2536
2586
|
"data-testid": dataTestId
|
|
2537
|
-
}, htmlProps
|
|
2538
|
-
|
|
2539
|
-
|
|
2540
|
-
|
|
2541
|
-
|
|
2587
|
+
}, htmlProps, {
|
|
2588
|
+
children: jsxRuntime.jsx(Icon, {
|
|
2589
|
+
name: iconName,
|
|
2590
|
+
size: iconSize,
|
|
2591
|
+
iconColor: getIconColor(variant),
|
|
2592
|
+
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2593
|
+
})
|
|
2542
2594
|
}));
|
|
2543
2595
|
};
|
|
2544
2596
|
var templateObject_1$x;
|
|
2545
2597
|
|
|
2546
|
-
React.createElement;
|
|
2547
2598
|
var StyledWrapper = styled.span.withConfig({
|
|
2548
2599
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2549
2600
|
return !prop.startsWith('$');
|
|
@@ -2636,20 +2687,21 @@ var MoneyDisplay = function MoneyDisplay(_a) {
|
|
|
2636
2687
|
// Get typography variant and color
|
|
2637
2688
|
var typographyVariant = sizeToTypographyVariant[size];
|
|
2638
2689
|
var typographyColor = variantToTypographyColor[variant];
|
|
2639
|
-
return
|
|
2640
|
-
$align: align,
|
|
2641
|
-
$weight: weight,
|
|
2690
|
+
return jsxRuntime.jsx(StyledWrapper, {
|
|
2691
|
+
"$align": align,
|
|
2692
|
+
"$weight": weight,
|
|
2642
2693
|
"aria-label": ariaLabel,
|
|
2643
|
-
"data-testid": dataTestId
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2694
|
+
"data-testid": dataTestId,
|
|
2695
|
+
children: jsxRuntime.jsx(Typography, {
|
|
2696
|
+
variant: typographyVariant,
|
|
2697
|
+
color: typographyColor,
|
|
2698
|
+
as: "span",
|
|
2699
|
+
children: displayText
|
|
2700
|
+
})
|
|
2701
|
+
});
|
|
2649
2702
|
};
|
|
2650
2703
|
var templateObject_1$w;
|
|
2651
2704
|
|
|
2652
|
-
React.createElement;
|
|
2653
2705
|
var ProgressBarContainer = styled.div.withConfig({
|
|
2654
2706
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2655
2707
|
return !prop.startsWith('$');
|
|
@@ -2667,7 +2719,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2667
2719
|
},
|
|
2668
2720
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2669
2721
|
componentId: "sc-1nco33q-1"
|
|
2670
|
-
})(templateObject_7$
|
|
2722
|
+
})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), tokensData.semantic.motion.transition.normal, function (props) {
|
|
2671
2723
|
var backgroundColor;
|
|
2672
2724
|
switch (props.$color) {
|
|
2673
2725
|
case 'success':
|
|
@@ -2685,7 +2737,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2685
2737
|
}, function (props) {
|
|
2686
2738
|
return props.$variant === 'horizontal' && styled.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2687
2739
|
}, function (props) {
|
|
2688
|
-
return props.$variant === 'vertical' && styled.css(templateObject_6$
|
|
2740
|
+
return props.$variant === 'vertical' && styled.css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2689
2741
|
});
|
|
2690
2742
|
var ProgressBar = function ProgressBar(_a) {
|
|
2691
2743
|
var value = _a.value,
|
|
@@ -2696,24 +2748,24 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2696
2748
|
height = _a.height,
|
|
2697
2749
|
width = _a.width,
|
|
2698
2750
|
dataTestId = _a["data-testid"];
|
|
2699
|
-
return
|
|
2700
|
-
$variant: variant,
|
|
2701
|
-
$height: height,
|
|
2702
|
-
$width: width,
|
|
2751
|
+
return jsxRuntime.jsx(ProgressBarContainer, {
|
|
2752
|
+
"$variant": variant,
|
|
2753
|
+
"$height": height,
|
|
2754
|
+
"$width": width,
|
|
2703
2755
|
"data-testid": dataTestId,
|
|
2704
2756
|
role: "progressbar",
|
|
2705
2757
|
"aria-valuenow": Math.min(100, Math.max(0, value)),
|
|
2706
2758
|
"aria-valuemin": 0,
|
|
2707
|
-
"aria-valuemax": 100
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
|
|
2711
|
-
|
|
2712
|
-
|
|
2759
|
+
"aria-valuemax": 100,
|
|
2760
|
+
children: jsxRuntime.jsx(ProgressBarFill, {
|
|
2761
|
+
"$value": value,
|
|
2762
|
+
"$variant": variant,
|
|
2763
|
+
"$color": color
|
|
2764
|
+
})
|
|
2765
|
+
});
|
|
2713
2766
|
};
|
|
2714
|
-
var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$
|
|
2767
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$b, templateObject_7$8;
|
|
2715
2768
|
|
|
2716
|
-
React.createElement;
|
|
2717
2769
|
var StyledDivider$1 = styled.div.withConfig({
|
|
2718
2770
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2719
2771
|
return !prop.startsWith('$');
|
|
@@ -2824,10 +2876,10 @@ var Divider = function Divider(_a) {
|
|
|
2824
2876
|
_d = _a.orientation,
|
|
2825
2877
|
orientation = _d === void 0 ? 'horizontal' : _d,
|
|
2826
2878
|
dataTestId = _a["data-testid"];
|
|
2827
|
-
return
|
|
2828
|
-
$variant: variant,
|
|
2829
|
-
$size: size,
|
|
2830
|
-
$orientation: orientation,
|
|
2879
|
+
return jsxRuntime.jsx(StyledDivider$1, {
|
|
2880
|
+
"$variant": variant,
|
|
2881
|
+
"$size": size,
|
|
2882
|
+
"$orientation": orientation,
|
|
2831
2883
|
"data-testid": dataTestId,
|
|
2832
2884
|
role: "separator",
|
|
2833
2885
|
"aria-orientation": orientation
|
|
@@ -2835,7 +2887,6 @@ var Divider = function Divider(_a) {
|
|
|
2835
2887
|
};
|
|
2836
2888
|
var templateObject_1$u;
|
|
2837
2889
|
|
|
2838
|
-
React.createElement;
|
|
2839
2890
|
var StyledStack = styled.div.withConfig({
|
|
2840
2891
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2841
2892
|
return !prop.startsWith('$');
|
|
@@ -2875,14 +2926,14 @@ var Stack = function Stack(_a) {
|
|
|
2875
2926
|
'--stack-gap': gapValue,
|
|
2876
2927
|
'--stack-wrap': wrap ? 'wrap' : 'nowrap'
|
|
2877
2928
|
};
|
|
2878
|
-
return
|
|
2929
|
+
return jsxRuntime.jsx(StyledStack, {
|
|
2879
2930
|
style: cssProps,
|
|
2880
|
-
"data-testid": dataTestId
|
|
2881
|
-
|
|
2931
|
+
"data-testid": dataTestId,
|
|
2932
|
+
children: children
|
|
2933
|
+
});
|
|
2882
2934
|
};
|
|
2883
2935
|
var templateObject_1$t;
|
|
2884
2936
|
|
|
2885
|
-
React.createElement;
|
|
2886
2937
|
var semantic$d = tokensData.semantic,
|
|
2887
2938
|
base$a = tokensData.base;
|
|
2888
2939
|
var scaleIn = styled.keyframes(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n"], ["\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n"])));
|
|
@@ -2942,7 +2993,7 @@ var getSizeStyles = function getSizeStyles(size) {
|
|
|
2942
2993
|
// medium
|
|
2943
2994
|
return {
|
|
2944
2995
|
height: '24px',
|
|
2945
|
-
padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[
|
|
2996
|
+
padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[2]),
|
|
2946
2997
|
font: semantic$d.typography.small,
|
|
2947
2998
|
gap: base$a.spacing[1],
|
|
2948
2999
|
iconSize: 'sm'
|
|
@@ -3027,25 +3078,28 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
3027
3078
|
'--status-badge-font': sizeStyles.font,
|
|
3028
3079
|
'--status-badge-gap': sizeStyles.gap
|
|
3029
3080
|
};
|
|
3030
|
-
return
|
|
3031
|
-
$status: status,
|
|
3032
|
-
$size: size,
|
|
3081
|
+
return jsxRuntime.jsxs(StyledStatusBadge, {
|
|
3082
|
+
"$status": status,
|
|
3083
|
+
"$size": size,
|
|
3033
3084
|
role: "status",
|
|
3034
3085
|
"aria-label": ariaLabel || "Status: ".concat(displayLabel),
|
|
3035
3086
|
"aria-live": liveRegion ? 'polite' : undefined,
|
|
3036
3087
|
"aria-atomic": liveRegion ? 'true' : undefined,
|
|
3037
3088
|
"data-testid": dataTestId,
|
|
3038
|
-
style: cssProps
|
|
3039
|
-
|
|
3040
|
-
|
|
3041
|
-
|
|
3042
|
-
|
|
3043
|
-
|
|
3089
|
+
style: cssProps,
|
|
3090
|
+
children: [showIcon && jsxRuntime.jsx(Icon, {
|
|
3091
|
+
name: statusConfig.icon,
|
|
3092
|
+
size: sizeStyles.iconSize,
|
|
3093
|
+
iconColor: "inherit",
|
|
3094
|
+
"aria-hidden": "true"
|
|
3095
|
+
}), displayLabel, jsxRuntime.jsxs(ScreenReaderOnly, {
|
|
3096
|
+
children: [status, " status"]
|
|
3097
|
+
})]
|
|
3098
|
+
});
|
|
3044
3099
|
};
|
|
3045
3100
|
StatusBadge.displayName = 'StatusBadge';
|
|
3046
3101
|
var templateObject_1$s, templateObject_2$m, templateObject_3$j;
|
|
3047
3102
|
|
|
3048
|
-
React.createElement;
|
|
3049
3103
|
var semantic$c = tokensData.semantic;
|
|
3050
3104
|
var StyledTag = styled.span.withConfig({
|
|
3051
3105
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3124,50 +3178,44 @@ var Tag = function Tag(_a) {
|
|
|
3124
3178
|
border = _c === void 0 ? true : _c,
|
|
3125
3179
|
dataTestId = _a["data-testid"],
|
|
3126
3180
|
props = __rest(_a, ["children", "variant", "border", 'data-testid']);
|
|
3127
|
-
return
|
|
3128
|
-
$variant: variant,
|
|
3129
|
-
$border: border,
|
|
3181
|
+
return jsxRuntime.jsx(StyledTag, __assign({
|
|
3182
|
+
"$variant": variant,
|
|
3183
|
+
"$border": border,
|
|
3130
3184
|
"data-testid": dataTestId,
|
|
3131
3185
|
"data-variant": variant,
|
|
3132
3186
|
"data-border": border,
|
|
3133
3187
|
role: "status",
|
|
3134
3188
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
3135
|
-
}, props
|
|
3189
|
+
}, props, {
|
|
3190
|
+
children: children
|
|
3191
|
+
}));
|
|
3136
3192
|
};
|
|
3137
3193
|
var templateObject_1$r;
|
|
3138
3194
|
|
|
3139
|
-
React.createElement;
|
|
3140
|
-
var StyledCard = styled.div.withConfig({
|
|
3141
|
-
displayName: "AccountCard__StyledCard",
|
|
3142
|
-
componentId: "sc-1erp7zn-0"
|
|
3143
|
-
})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n min-width: 300px;\n min-height: 200px;\n padding: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: all 0.2s ease;\n \n ", "\n"], ["\n min-width: 300px;\n min-height: 200px;\n padding: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: all 0.2s ease;\n \n ", "\n"])), tokensData.semantic.spacing.layout.lg, tokensData.semantic.color.background.surface, tokensData.semantic.color.border["default"], tokensData.base.border.radius[5], tokensData.base.shadow[3], function (_a) {
|
|
3144
|
-
var $clickable = _a.$clickable;
|
|
3145
|
-
return $clickable && "\n cursor: pointer;\n \n &:hover {\n box-shadow: ".concat(tokensData.base.shadow[4], ";\n transform: translateY(-2px);\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n outline-offset: 2px;\n }\n ");
|
|
3146
|
-
});
|
|
3147
3195
|
var StyledHeader$2 = styled.div.withConfig({
|
|
3148
3196
|
displayName: "AccountCard__StyledHeader",
|
|
3149
|
-
componentId: "sc-1erp7zn-
|
|
3150
|
-
})(
|
|
3197
|
+
componentId: "sc-1erp7zn-0"
|
|
3198
|
+
})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.md);
|
|
3151
3199
|
var StyledIconWrapper = styled.div.withConfig({
|
|
3152
3200
|
displayName: "AccountCard__StyledIconWrapper",
|
|
3153
|
-
componentId: "sc-1erp7zn-
|
|
3154
|
-
})(
|
|
3201
|
+
componentId: "sc-1erp7zn-1"
|
|
3202
|
+
})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: ", ";\n color: ", ";\n"], ["\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: ", ";\n color: ", ";\n"])), tokensData.semantic.color.background.inverse, tokensData.base.border.radius[3], tokensData.semantic.color.icon.interactive);
|
|
3155
3203
|
var StyledBalanceSection = styled.div.withConfig({
|
|
3156
3204
|
displayName: "AccountCard__StyledBalanceSection",
|
|
3157
|
-
componentId: "sc-1erp7zn-
|
|
3158
|
-
})(
|
|
3205
|
+
componentId: "sc-1erp7zn-2"
|
|
3206
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.lg);
|
|
3159
3207
|
var StyledTrendSection = styled.div.withConfig({
|
|
3160
3208
|
displayName: "AccountCard__StyledTrendSection",
|
|
3161
|
-
componentId: "sc-1erp7zn-
|
|
3162
|
-
})(
|
|
3209
|
+
componentId: "sc-1erp7zn-3"
|
|
3210
|
+
})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n margin-top: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n margin-top: ", ";\n"])), tokensData.semantic.spacing.layout.xs, tokensData.semantic.spacing.layout.sm);
|
|
3163
3211
|
var StyledActions$1 = styled.div.withConfig({
|
|
3164
3212
|
displayName: "AccountCard__StyledActions",
|
|
3165
|
-
componentId: "sc-1erp7zn-
|
|
3166
|
-
})(
|
|
3213
|
+
componentId: "sc-1erp7zn-4"
|
|
3214
|
+
})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n margin-top: auto;\n \n & > * {\n flex: 1;\n }\n"], ["\n display: flex;\n gap: ", ";\n margin-top: auto;\n \n & > * {\n flex: 1;\n }\n"])), tokensData.semantic.spacing.layout.sm);
|
|
3167
3215
|
var StyledStackWrapper = styled.div.withConfig({
|
|
3168
3216
|
displayName: "AccountCard__StyledStackWrapper",
|
|
3169
|
-
componentId: "sc-1erp7zn-
|
|
3170
|
-
})(
|
|
3217
|
+
componentId: "sc-1erp7zn-5"
|
|
3218
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n height: 100%;\n min-height: 168px;\n"], ["\n height: 100%;\n min-height: 168px;\n"
|
|
3171
3219
|
// Map account types to icon names (using placeholders)
|
|
3172
3220
|
])));
|
|
3173
3221
|
// Map account types to icon names (using placeholders)
|
|
@@ -3227,78 +3275,109 @@ var AccountCard = function AccountCard(_a) {
|
|
|
3227
3275
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
3228
3276
|
}
|
|
3229
3277
|
};
|
|
3230
|
-
return
|
|
3231
|
-
|
|
3278
|
+
return jsxRuntime.jsx(Box, {
|
|
3279
|
+
minWidth: "300px",
|
|
3280
|
+
minHeight: "200px",
|
|
3281
|
+
p: "lg",
|
|
3282
|
+
bg: "surface",
|
|
3283
|
+
border: "default",
|
|
3284
|
+
borderRadius: "5",
|
|
3285
|
+
shadow: "3",
|
|
3286
|
+
transition: "all 0.2s ease",
|
|
3287
|
+
cursor: isClickable ? 'pointer' : 'default',
|
|
3288
|
+
hoverShadow: isClickable ? '4' : undefined,
|
|
3289
|
+
hoverTransform: isClickable ? 'translateY(-2px)' : undefined,
|
|
3232
3290
|
onClick: handleClick,
|
|
3233
3291
|
onKeyDown: handleKeyDown,
|
|
3234
3292
|
tabIndex: isClickable ? 0 : undefined,
|
|
3235
3293
|
role: isClickable ? 'button' : 'article',
|
|
3236
3294
|
"aria-label": isClickable ? "".concat(accountName, " account, balance ").concat(balance) : undefined,
|
|
3237
|
-
"data-testid": dataTestId
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
3281
|
-
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3295
|
+
"data-testid": dataTestId,
|
|
3296
|
+
children: jsxRuntime.jsx(StyledStackWrapper, {
|
|
3297
|
+
children: jsxRuntime.jsxs(Stack, {
|
|
3298
|
+
direction: "column",
|
|
3299
|
+
gap: "none",
|
|
3300
|
+
children: [jsxRuntime.jsx(StyledHeader$2, {
|
|
3301
|
+
children: jsxRuntime.jsxs(Stack, {
|
|
3302
|
+
direction: "row",
|
|
3303
|
+
gap: "md",
|
|
3304
|
+
alignItems: "center",
|
|
3305
|
+
children: [jsxRuntime.jsx(StyledIconWrapper, {
|
|
3306
|
+
"aria-label": "".concat(accountType, " account"),
|
|
3307
|
+
role: "img",
|
|
3308
|
+
children: jsxRuntime.jsx(Icon, {
|
|
3309
|
+
name: accountIcon,
|
|
3310
|
+
iconColor: "inverse",
|
|
3311
|
+
size: "md"
|
|
3312
|
+
})
|
|
3313
|
+
}), jsxRuntime.jsxs(Stack, {
|
|
3314
|
+
direction: "column",
|
|
3315
|
+
gap: "xs",
|
|
3316
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
3317
|
+
variant: "h4",
|
|
3318
|
+
children: accountName
|
|
3319
|
+
}), accountNumber && jsxRuntime.jsxs(Typography, {
|
|
3320
|
+
variant: "caption",
|
|
3321
|
+
color: "subdued",
|
|
3322
|
+
children: ["\u2022\u2022\u2022\u2022 ", accountNumber]
|
|
3323
|
+
})]
|
|
3324
|
+
})]
|
|
3325
|
+
})
|
|
3326
|
+
}), jsxRuntime.jsxs(StyledBalanceSection, {
|
|
3327
|
+
children: [jsxRuntime.jsxs(Stack, {
|
|
3328
|
+
direction: "column",
|
|
3329
|
+
gap: "xs",
|
|
3330
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
3331
|
+
variant: "caption",
|
|
3332
|
+
color: "subdued",
|
|
3333
|
+
children: "Balance"
|
|
3334
|
+
}), jsxRuntime.jsx(MoneyDisplay, {
|
|
3335
|
+
amount: balance,
|
|
3336
|
+
currency: currency,
|
|
3337
|
+
size: "xlarge",
|
|
3338
|
+
weight: "bold",
|
|
3339
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-balance") : undefined
|
|
3340
|
+
})]
|
|
3341
|
+
}), trend && trendValue && jsxRuntime.jsxs(StyledTrendSection, {
|
|
3342
|
+
"aria-label": "Trend ".concat(trend),
|
|
3343
|
+
role: "img",
|
|
3344
|
+
children: [jsxRuntime.jsx(Icon, {
|
|
3345
|
+
name: trendIcon,
|
|
3346
|
+
size: "xs",
|
|
3347
|
+
iconColor: trendColor
|
|
3348
|
+
}), jsxRuntime.jsx(Typography, {
|
|
3349
|
+
variant: "caption",
|
|
3350
|
+
color: trendColor,
|
|
3351
|
+
children: trendValue
|
|
3352
|
+
})]
|
|
3353
|
+
})]
|
|
3354
|
+
}), (action || secondaryAction) && jsxRuntime.jsxs(StyledActions$1, {
|
|
3355
|
+
children: [action && jsxRuntime.jsx(Button, {
|
|
3356
|
+
onClick: function onClick(e) {
|
|
3357
|
+
e.stopPropagation();
|
|
3358
|
+
action.onClick();
|
|
3359
|
+
},
|
|
3360
|
+
variant: action.variant || 'primary',
|
|
3361
|
+
iconName: action.icon,
|
|
3362
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-action") : undefined,
|
|
3363
|
+
children: action.label
|
|
3364
|
+
}), secondaryAction && jsxRuntime.jsx(Button, {
|
|
3365
|
+
onClick: function onClick(e) {
|
|
3366
|
+
e.stopPropagation();
|
|
3367
|
+
secondaryAction.onClick();
|
|
3368
|
+
},
|
|
3369
|
+
variant: secondaryAction.variant || 'naked',
|
|
3370
|
+
iconName: secondaryAction.icon,
|
|
3371
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined,
|
|
3372
|
+
children: secondaryAction.label
|
|
3373
|
+
})]
|
|
3374
|
+
})]
|
|
3375
|
+
})
|
|
3376
|
+
})
|
|
3377
|
+
});
|
|
3298
3378
|
};
|
|
3299
|
-
var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$c, templateObject_6$
|
|
3379
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$c, templateObject_6$a;
|
|
3300
3380
|
|
|
3301
|
-
React.createElement;
|
|
3302
3381
|
var semantic$b = tokensData.semantic,
|
|
3303
3382
|
base$9 = tokensData.base;
|
|
3304
3383
|
var slideUp = styled.keyframes(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"], ["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"])));
|
|
@@ -3318,15 +3397,15 @@ var StyledHeader$1 = styled.div.withConfig({
|
|
|
3318
3397
|
var StyledHeaderContent = styled.div.withConfig({
|
|
3319
3398
|
displayName: "ActionSheet__StyledHeaderContent",
|
|
3320
3399
|
componentId: "sc-regbol-3"
|
|
3321
|
-
})(templateObject_6$
|
|
3400
|
+
})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
3322
3401
|
var StyledCloseButton = styled.button.withConfig({
|
|
3323
3402
|
displayName: "ActionSheet__StyledCloseButton",
|
|
3324
3403
|
componentId: "sc-regbol-4"
|
|
3325
|
-
})(templateObject_7$
|
|
3404
|
+
})(templateObject_7$7 || (templateObject_7$7 = __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: ", " solid ", ";\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: ", " solid ", ";\n outline-offset: ", ";\n }\n"])), base$9.spacing[2], semantic$b.color.icon.subdued, base$9.border.radius[2], semantic$b.motion.hover, base$9.spacing[2], semantic$b.color.icon["default"], semantic$b.color.background.surface, base$9.border.width[2], semantic$b.color.border.strong, base$9.spacing[1]);
|
|
3326
3405
|
var StyledActionsList = styled.div.withConfig({
|
|
3327
3406
|
displayName: "ActionSheet__StyledActionsList",
|
|
3328
3407
|
componentId: "sc-regbol-5"
|
|
3329
|
-
})(templateObject_8$
|
|
3408
|
+
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n padding: ", " 0;\n"], ["\n padding: ", " 0;\n"])), base$9.spacing[2]);
|
|
3330
3409
|
var StyledActionButton = styled.button.withConfig({
|
|
3331
3410
|
displayName: "ActionSheet__StyledActionButton",
|
|
3332
3411
|
componentId: "sc-regbol-6"
|
|
@@ -3484,59 +3563,75 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
3484
3563
|
return a.destructive;
|
|
3485
3564
|
});
|
|
3486
3565
|
var hasDestructive = destructiveIndex >= 0;
|
|
3487
|
-
return /*#__PURE__*/reactDom.createPortal(
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
|
-
|
|
3491
|
-
|
|
3492
|
-
|
|
3493
|
-
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
|
|
3502
|
-
|
|
3503
|
-
|
|
3504
|
-
|
|
3505
|
-
|
|
3506
|
-
|
|
3507
|
-
|
|
3508
|
-
|
|
3509
|
-
|
|
3510
|
-
|
|
3511
|
-
|
|
3512
|
-
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
|
|
3523
|
-
|
|
3524
|
-
|
|
3525
|
-
|
|
3526
|
-
|
|
3527
|
-
|
|
3528
|
-
|
|
3529
|
-
|
|
3530
|
-
|
|
3531
|
-
|
|
3532
|
-
|
|
3533
|
-
|
|
3534
|
-
|
|
3535
|
-
|
|
3566
|
+
return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
3567
|
+
children: [jsxRuntime.jsx(StyledOverlay$1, {
|
|
3568
|
+
onClick: handleOverlayClick
|
|
3569
|
+
}), jsxRuntime.jsxs(StyledActionSheet, {
|
|
3570
|
+
ref: sheetRef,
|
|
3571
|
+
role: "dialog",
|
|
3572
|
+
"aria-modal": "true",
|
|
3573
|
+
"aria-labelledby": title ? 'action-sheet-title' : undefined,
|
|
3574
|
+
"aria-describedby": description ? 'action-sheet-description' : undefined,
|
|
3575
|
+
"data-testid": dataTestId,
|
|
3576
|
+
children: [(title || description || showCloseButton) && jsxRuntime.jsxs(StyledHeader$1, {
|
|
3577
|
+
children: [jsxRuntime.jsx(StyledHeaderContent, {
|
|
3578
|
+
children: jsxRuntime.jsxs(Stack, {
|
|
3579
|
+
direction: "column",
|
|
3580
|
+
gap: description && title ? 'xs' : 'none',
|
|
3581
|
+
children: [title && jsxRuntime.jsx("div", {
|
|
3582
|
+
id: "action-sheet-title",
|
|
3583
|
+
children: jsxRuntime.jsx(Typography, {
|
|
3584
|
+
variant: "h3",
|
|
3585
|
+
children: title
|
|
3586
|
+
})
|
|
3587
|
+
}), description && jsxRuntime.jsx("div", {
|
|
3588
|
+
id: "action-sheet-description",
|
|
3589
|
+
children: jsxRuntime.jsx(Typography, {
|
|
3590
|
+
variant: "body",
|
|
3591
|
+
color: "subdued",
|
|
3592
|
+
children: description
|
|
3593
|
+
})
|
|
3594
|
+
})]
|
|
3595
|
+
})
|
|
3596
|
+
}), showCloseButton && jsxRuntime.jsx(StyledCloseButton, {
|
|
3597
|
+
type: "button",
|
|
3598
|
+
onClick: onClose,
|
|
3599
|
+
"aria-label": "Close",
|
|
3600
|
+
children: jsxRuntime.jsx(Icon, {
|
|
3601
|
+
name: "close",
|
|
3602
|
+
size: "sm",
|
|
3603
|
+
iconColor: "subdued"
|
|
3604
|
+
})
|
|
3605
|
+
})]
|
|
3606
|
+
}), jsxRuntime.jsx(StyledActionsList, {
|
|
3607
|
+
children: actions.map(function (action, index) {
|
|
3608
|
+
return jsxRuntime.jsxs("div", {
|
|
3609
|
+
children: [hasDestructive && index === destructiveIndex && index > 0 && jsxRuntime.jsx(StyledDivider, {}), jsxRuntime.jsxs(StyledActionButton, {
|
|
3610
|
+
type: "button",
|
|
3611
|
+
onClick: function onClick() {
|
|
3612
|
+
return handleActionClick(action);
|
|
3613
|
+
},
|
|
3614
|
+
disabled: action.disabled,
|
|
3615
|
+
"$destructive": action.destructive || false,
|
|
3616
|
+
"$disabled": action.disabled || false,
|
|
3617
|
+
"aria-label": action.label,
|
|
3618
|
+
children: [action.icon && jsxRuntime.jsx(Icon, {
|
|
3619
|
+
name: action.icon,
|
|
3620
|
+
size: "md",
|
|
3621
|
+
iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
|
|
3622
|
+
}), jsxRuntime.jsx(Typography, {
|
|
3623
|
+
variant: "body",
|
|
3624
|
+
children: action.label
|
|
3625
|
+
})]
|
|
3626
|
+
})]
|
|
3627
|
+
}, action.id);
|
|
3628
|
+
})
|
|
3629
|
+
})]
|
|
3630
|
+
})]
|
|
3631
|
+
}), document.body);
|
|
3536
3632
|
};
|
|
3537
|
-
var templateObject_1$p, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$
|
|
3633
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$4, templateObject_9$3, templateObject_10$2;
|
|
3538
3634
|
|
|
3539
|
-
React.createElement;
|
|
3540
3635
|
var semantic$a = tokensData.semantic,
|
|
3541
3636
|
base$8 = tokensData.base;
|
|
3542
3637
|
// Default icons by variant
|
|
@@ -3611,11 +3706,11 @@ var StyledMessage = styled.span.withConfig({
|
|
|
3611
3706
|
var StyledActions = styled.div.withConfig({
|
|
3612
3707
|
displayName: "Alert__StyledActions",
|
|
3613
3708
|
componentId: "sc-18tq5d-5"
|
|
3614
|
-
})(templateObject_6$
|
|
3709
|
+
})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"])), semantic$a.spacing.layout.sm);
|
|
3615
3710
|
var StyledDismissButton = styled(IconButton).withConfig({
|
|
3616
3711
|
displayName: "Alert__StyledDismissButton",
|
|
3617
3712
|
componentId: "sc-18tq5d-6"
|
|
3618
|
-
})(templateObject_7$
|
|
3713
|
+
})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"], ["\n margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"])), semantic$a.spacing.layout.xs);
|
|
3619
3714
|
var Alert = function Alert(_a) {
|
|
3620
3715
|
var _b = _a.variant,
|
|
3621
3716
|
variant = _b === void 0 ? 'info' : _b,
|
|
@@ -3647,35 +3742,44 @@ var Alert = function Alert(_a) {
|
|
|
3647
3742
|
var alertTitleColor = variantTitleColors[variant];
|
|
3648
3743
|
// Determine ARIA role based on variant and aria-live
|
|
3649
3744
|
var role = variant === 'error' ? 'alert' : 'status';
|
|
3650
|
-
return
|
|
3745
|
+
return jsxRuntime.jsxs(StyledAlert, __assign({
|
|
3651
3746
|
role: role,
|
|
3652
3747
|
"aria-live": ariaLive,
|
|
3653
|
-
$variant: variant,
|
|
3654
|
-
$inline: inline,
|
|
3748
|
+
"$variant": variant,
|
|
3749
|
+
"$inline": inline,
|
|
3655
3750
|
"data-testid": dataTestId
|
|
3656
|
-
}, props
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
|
|
3662
|
-
|
|
3663
|
-
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
|
|
3667
|
-
|
|
3668
|
-
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
|
|
3672
|
-
|
|
3673
|
-
|
|
3751
|
+
}, props, {
|
|
3752
|
+
children: [jsxRuntime.jsx(StyledIconContainer$1, {
|
|
3753
|
+
"aria-hidden": "true",
|
|
3754
|
+
children: jsxRuntime.jsx(Icon, {
|
|
3755
|
+
name: iconName,
|
|
3756
|
+
size: "md",
|
|
3757
|
+
iconColor: alertIconColor
|
|
3758
|
+
})
|
|
3759
|
+
}), jsxRuntime.jsxs(StyledContent$1, {
|
|
3760
|
+
children: [title && jsxRuntime.jsx(StyledTitle, {
|
|
3761
|
+
role: "heading",
|
|
3762
|
+
"aria-level": 6,
|
|
3763
|
+
color: alertTitleColor,
|
|
3764
|
+
children: title
|
|
3765
|
+
}), jsxRuntime.jsx(StyledMessage, {
|
|
3766
|
+
children: children
|
|
3767
|
+
})]
|
|
3768
|
+
}), (action || dismissible) && jsxRuntime.jsxs(StyledActions, {
|
|
3769
|
+
children: [action, dismissible && jsxRuntime.jsx(StyledDismissButton, {
|
|
3770
|
+
iconName: "close",
|
|
3771
|
+
size: "small",
|
|
3772
|
+
variant: "naked",
|
|
3773
|
+
onClick: handleDismiss,
|
|
3774
|
+
"aria-label": "Dismiss alert",
|
|
3775
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-dismiss") : undefined
|
|
3776
|
+
})]
|
|
3777
|
+
})]
|
|
3778
|
+
}));
|
|
3674
3779
|
};
|
|
3675
3780
|
Alert.displayName = 'Alert';
|
|
3676
|
-
var templateObject_1$o, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$
|
|
3781
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$8, templateObject_7$6;
|
|
3677
3782
|
|
|
3678
|
-
React.createElement;
|
|
3679
3783
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
3680
3784
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
3681
3785
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
@@ -3691,30 +3795,40 @@ var isInternalUrl = function isInternalUrl(url) {
|
|
|
3691
3795
|
var Breadcrumbs = function Breadcrumbs(_a) {
|
|
3692
3796
|
var breadcrumbs = _a.breadcrumbs,
|
|
3693
3797
|
LinkComponent = _a.linkComponent;
|
|
3694
|
-
return
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3703
|
-
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3707
|
-
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3798
|
+
return jsxRuntime.jsx(Container, {
|
|
3799
|
+
children: jsxRuntime.jsx(BreadcrumbNavStyled, {
|
|
3800
|
+
"aria-label": "breadcrumb",
|
|
3801
|
+
children: jsxRuntime.jsx("ol", {
|
|
3802
|
+
children: breadcrumbs.map(function (breadcrumb, index) {
|
|
3803
|
+
return jsxRuntime.jsx(BreadcrumbStyled, {
|
|
3804
|
+
children: index === breadcrumbs.length - 1 ? jsxRuntime.jsx(Typography, {
|
|
3805
|
+
variant: "caption",
|
|
3806
|
+
children: breadcrumb.label
|
|
3807
|
+
}) : LinkComponent && isInternalUrl(breadcrumb.url) ? jsxRuntime.jsx(LinkComponent, {
|
|
3808
|
+
href: breadcrumb.url,
|
|
3809
|
+
children: jsxRuntime.jsx(Typography, {
|
|
3810
|
+
variant: "caption",
|
|
3811
|
+
children: breadcrumb.label
|
|
3812
|
+
})
|
|
3813
|
+
}) : jsxRuntime.jsx("a", __assign({
|
|
3814
|
+
href: breadcrumb.url
|
|
3815
|
+
}, !isInternalUrl(breadcrumb.url) && {
|
|
3816
|
+
target: "_blank",
|
|
3817
|
+
rel: "noopener noreferrer"
|
|
3818
|
+
}, {
|
|
3819
|
+
children: jsxRuntime.jsx(Typography, {
|
|
3820
|
+
variant: "caption",
|
|
3821
|
+
children: breadcrumb.label
|
|
3822
|
+
})
|
|
3823
|
+
}))
|
|
3824
|
+
}, index);
|
|
3825
|
+
})
|
|
3826
|
+
})
|
|
3827
|
+
})
|
|
3828
|
+
});
|
|
3714
3829
|
};
|
|
3715
3830
|
var templateObject_1$n, templateObject_2$i;
|
|
3716
3831
|
|
|
3717
|
-
React.createElement;
|
|
3718
3832
|
var CardSmallStyled = styled.div.withConfig({
|
|
3719
3833
|
displayName: "CardSmall__CardSmallStyled",
|
|
3720
3834
|
componentId: "sc-jpcqvd-0"
|
|
@@ -3729,40 +3843,49 @@ var CardSmall = function CardSmall(_a) {
|
|
|
3729
3843
|
if (!picture || !meta) {
|
|
3730
3844
|
return null;
|
|
3731
3845
|
}
|
|
3732
|
-
var content =
|
|
3733
|
-
direction: "column",
|
|
3734
|
-
gap: "sm"
|
|
3735
|
-
}, /*#__PURE__*/React.createElement(Picture, {
|
|
3736
|
-
title: title,
|
|
3737
|
-
src: picture,
|
|
3738
|
-
width: 300,
|
|
3739
|
-
height: 300
|
|
3740
|
-
}), /*#__PURE__*/React.createElement(Stack, {
|
|
3846
|
+
var content = jsxRuntime.jsxs(Stack, {
|
|
3741
3847
|
direction: "column",
|
|
3742
|
-
gap:
|
|
3743
|
-
|
|
3744
|
-
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
|
|
3756
|
-
|
|
3757
|
-
|
|
3758
|
-
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3848
|
+
gap: 'sm',
|
|
3849
|
+
children: [jsxRuntime.jsx(Picture, {
|
|
3850
|
+
title: title,
|
|
3851
|
+
src: picture,
|
|
3852
|
+
width: 300,
|
|
3853
|
+
height: 300
|
|
3854
|
+
}), jsxRuntime.jsxs(Stack, {
|
|
3855
|
+
direction: "column",
|
|
3856
|
+
gap: 'xs',
|
|
3857
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
3858
|
+
variant: "small",
|
|
3859
|
+
children: title
|
|
3860
|
+
}), jsxRuntime.jsxs(Stack, {
|
|
3861
|
+
direction: "column",
|
|
3862
|
+
gap: 'none',
|
|
3863
|
+
children: [subtitle && jsxRuntime.jsx(Typography, {
|
|
3864
|
+
variant: "label",
|
|
3865
|
+
color: "subdued",
|
|
3866
|
+
children: subtitle
|
|
3867
|
+
}), meta && jsxRuntime.jsx(Typography, {
|
|
3868
|
+
variant: "label",
|
|
3869
|
+
color: "subdued",
|
|
3870
|
+
children: meta
|
|
3871
|
+
})]
|
|
3872
|
+
})]
|
|
3873
|
+
})]
|
|
3874
|
+
});
|
|
3875
|
+
return jsxRuntime.jsx(CardSmallStyled, {
|
|
3876
|
+
children: LinkComponent && href ? jsxRuntime.jsx(LinkComponent, {
|
|
3877
|
+
href: href,
|
|
3878
|
+
"aria-label": title,
|
|
3879
|
+
children: content
|
|
3880
|
+
}) : jsxRuntime.jsx("a", {
|
|
3881
|
+
href: href || '#',
|
|
3882
|
+
"aria-label": title,
|
|
3883
|
+
children: content
|
|
3884
|
+
})
|
|
3885
|
+
});
|
|
3762
3886
|
};
|
|
3763
3887
|
var templateObject_1$m;
|
|
3764
3888
|
|
|
3765
|
-
React.createElement;
|
|
3766
3889
|
var border$3 = tokensData.base.border;
|
|
3767
3890
|
var CardLargeStyled = styled.div.withConfig({
|
|
3768
3891
|
displayName: "CardLarge__CardLargeStyled",
|
|
@@ -3777,40 +3900,48 @@ var CardLarge = function CardLarge(_a) {
|
|
|
3777
3900
|
picture = _a.picture,
|
|
3778
3901
|
onImageClick = _a.onImageClick,
|
|
3779
3902
|
imageHref = _a.imageHref;
|
|
3780
|
-
return
|
|
3781
|
-
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
|
|
3785
|
-
|
|
3786
|
-
|
|
3787
|
-
|
|
3788
|
-
|
|
3789
|
-
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
|
|
3795
|
-
|
|
3796
|
-
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
|
|
3813
|
-
|
|
3903
|
+
return jsxRuntime.jsx(CardLargeStyled, {
|
|
3904
|
+
children: jsxRuntime.jsxs(Stack, {
|
|
3905
|
+
direction: "column",
|
|
3906
|
+
gap: "md",
|
|
3907
|
+
children: [jsxRuntime.jsx(Picture, {
|
|
3908
|
+
title: title,
|
|
3909
|
+
src: picture,
|
|
3910
|
+
onClick: onImageClick,
|
|
3911
|
+
href: imageHref
|
|
3912
|
+
}), jsxRuntime.jsxs(Stack, {
|
|
3913
|
+
direction: "row",
|
|
3914
|
+
alignItems: "flex-start",
|
|
3915
|
+
justifyContent: "space-between",
|
|
3916
|
+
gap: "xs",
|
|
3917
|
+
children: [jsxRuntime.jsxs(Stack, {
|
|
3918
|
+
direction: "column",
|
|
3919
|
+
gap: "xs",
|
|
3920
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
3921
|
+
variant: "h5",
|
|
3922
|
+
children: title
|
|
3923
|
+
}), subtitle && jsxRuntime.jsx(Typography, {
|
|
3924
|
+
variant: "small",
|
|
3925
|
+
color: "subdued",
|
|
3926
|
+
children: subtitle
|
|
3927
|
+
}), excerpt && jsxRuntime.jsx(Typography, {
|
|
3928
|
+
variant: "body",
|
|
3929
|
+
children: excerpt
|
|
3930
|
+
})]
|
|
3931
|
+
}), jsxRuntime.jsx(Stack, {
|
|
3932
|
+
direction: "row",
|
|
3933
|
+
alignItems: "center",
|
|
3934
|
+
gap: "xs",
|
|
3935
|
+
children: Array.isArray(labels) && labels.map(function (label, index) {
|
|
3936
|
+
return jsxRuntime.jsx(Chip, {
|
|
3937
|
+
title: label,
|
|
3938
|
+
variant: "default"
|
|
3939
|
+
}, index);
|
|
3940
|
+
})
|
|
3941
|
+
})]
|
|
3942
|
+
})]
|
|
3943
|
+
})
|
|
3944
|
+
});
|
|
3814
3945
|
};
|
|
3815
3946
|
var templateObject_1$l;
|
|
3816
3947
|
|
|
@@ -3896,7 +4027,6 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
3896
4027
|
});
|
|
3897
4028
|
var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$c;
|
|
3898
4029
|
|
|
3899
|
-
React.createElement;
|
|
3900
4030
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
3901
4031
|
displayName: "Checkbox__StyledFieldContainer",
|
|
3902
4032
|
componentId: "sc-vquz3v-0"
|
|
@@ -3985,41 +4115,46 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
3985
4115
|
inputRef.current.indeterminate = indeterminate;
|
|
3986
4116
|
}
|
|
3987
4117
|
}, [indeterminate]);
|
|
3988
|
-
return
|
|
3989
|
-
|
|
3990
|
-
|
|
3991
|
-
|
|
3992
|
-
|
|
3993
|
-
|
|
3994
|
-
|
|
3995
|
-
|
|
3996
|
-
|
|
3997
|
-
|
|
3998
|
-
|
|
3999
|
-
|
|
4000
|
-
|
|
4001
|
-
|
|
4002
|
-
|
|
4003
|
-
|
|
4004
|
-
|
|
4005
|
-
|
|
4006
|
-
|
|
4007
|
-
|
|
4008
|
-
|
|
4009
|
-
|
|
4010
|
-
|
|
4011
|
-
|
|
4012
|
-
|
|
4013
|
-
|
|
4014
|
-
|
|
4015
|
-
|
|
4016
|
-
|
|
4017
|
-
|
|
4118
|
+
return jsxRuntime.jsxs(StyledFieldContainer$3, {
|
|
4119
|
+
children: [jsxRuntime.jsxs(StyledCheckboxContainer, {
|
|
4120
|
+
"$disabled": disabled,
|
|
4121
|
+
"$labelPosition": labelPosition,
|
|
4122
|
+
children: [jsxRuntime.jsx(HiddenCheckboxInput, __assign({
|
|
4123
|
+
ref: inputRef,
|
|
4124
|
+
type: "checkbox",
|
|
4125
|
+
id: id,
|
|
4126
|
+
checked: checked,
|
|
4127
|
+
disabled: disabled,
|
|
4128
|
+
onChange: onChange,
|
|
4129
|
+
"aria-describedby": describedBy || undefined,
|
|
4130
|
+
"aria-invalid": error ? true : undefined,
|
|
4131
|
+
"$state": state,
|
|
4132
|
+
"$checked": checked,
|
|
4133
|
+
"$indeterminate": indeterminate
|
|
4134
|
+
}, rest)), jsxRuntime.jsx(StyledCheckbox, {
|
|
4135
|
+
"$state": state,
|
|
4136
|
+
"$checked": checked,
|
|
4137
|
+
"$indeterminate": indeterminate,
|
|
4138
|
+
"aria-hidden": "true"
|
|
4139
|
+
}), jsxRuntime.jsx(StyledCheckboxLabel, {
|
|
4140
|
+
"$disabled": disabled,
|
|
4141
|
+
children: label
|
|
4142
|
+
})]
|
|
4143
|
+
}), helperText && !error && jsxRuntime.jsx(StyledHelperText$4, {
|
|
4144
|
+
id: helperTextId,
|
|
4145
|
+
children: helperText
|
|
4146
|
+
}), error && jsxRuntime.jsx(StyledHelperText$4, {
|
|
4147
|
+
id: errorId,
|
|
4148
|
+
"$error": true,
|
|
4149
|
+
role: "alert",
|
|
4150
|
+
"aria-live": "polite",
|
|
4151
|
+
children: error
|
|
4152
|
+
})]
|
|
4153
|
+
});
|
|
4018
4154
|
});
|
|
4019
4155
|
Checkbox.displayName = 'Checkbox';
|
|
4020
4156
|
var templateObject_1$j, templateObject_2$g;
|
|
4021
4157
|
|
|
4022
|
-
React.createElement;
|
|
4023
4158
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
4024
4159
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
4025
4160
|
componentId: "sc-ae049w-0"
|
|
@@ -4029,22 +4164,22 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
4029
4164
|
_b = _a.variant,
|
|
4030
4165
|
variant = _b === void 0 ? 'default' : _b,
|
|
4031
4166
|
dataTestId = _a["data-testid"];
|
|
4032
|
-
return
|
|
4033
|
-
"data-testid": dataTestId
|
|
4034
|
-
|
|
4035
|
-
|
|
4036
|
-
|
|
4037
|
-
|
|
4038
|
-
|
|
4039
|
-
|
|
4040
|
-
|
|
4041
|
-
|
|
4042
|
-
|
|
4043
|
-
|
|
4167
|
+
return jsxRuntime.jsx(ChipGroupWrapper, {
|
|
4168
|
+
"data-testid": dataTestId,
|
|
4169
|
+
children: jsxRuntime.jsx(Stack, {
|
|
4170
|
+
direction: "row",
|
|
4171
|
+
gap: "sm",
|
|
4172
|
+
children: labels && labels.map(function (title, index) {
|
|
4173
|
+
return jsxRuntime.jsx(Chip, {
|
|
4174
|
+
title: title,
|
|
4175
|
+
variant: variant
|
|
4176
|
+
}, index);
|
|
4177
|
+
})
|
|
4178
|
+
})
|
|
4179
|
+
});
|
|
4044
4180
|
};
|
|
4045
4181
|
var templateObject_1$i;
|
|
4046
4182
|
|
|
4047
|
-
React.createElement;
|
|
4048
4183
|
var _a$2 = tokensData.semantic,
|
|
4049
4184
|
color$1 = _a$2.color,
|
|
4050
4185
|
border$2 = _a$2.border,
|
|
@@ -4108,13 +4243,16 @@ var CopyButton = function CopyButton(_a) {
|
|
|
4108
4243
|
}
|
|
4109
4244
|
};
|
|
4110
4245
|
}, []);
|
|
4111
|
-
return
|
|
4112
|
-
|
|
4113
|
-
|
|
4114
|
-
|
|
4115
|
-
|
|
4116
|
-
|
|
4117
|
-
|
|
4246
|
+
return jsxRuntime.jsx(CopyButtonWrapper, {
|
|
4247
|
+
children: jsxRuntime.jsx(Button, {
|
|
4248
|
+
variant: "secondary",
|
|
4249
|
+
size: "small",
|
|
4250
|
+
iconName: "copy",
|
|
4251
|
+
onClick: handleCopy,
|
|
4252
|
+
"data-testid": "copy-button",
|
|
4253
|
+
children: copied ? 'Copied!' : 'Copy'
|
|
4254
|
+
})
|
|
4255
|
+
});
|
|
4118
4256
|
};
|
|
4119
4257
|
/**
|
|
4120
4258
|
* CodeBlock component for displaying formatted code with optional copy functionality
|
|
@@ -4130,16 +4268,18 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
4130
4268
|
showCopyButton = _b === void 0 ? true : _b,
|
|
4131
4269
|
onCopy = _a.onCopy,
|
|
4132
4270
|
testId = _a["data-testid"];
|
|
4133
|
-
return
|
|
4134
|
-
|
|
4135
|
-
|
|
4136
|
-
|
|
4137
|
-
|
|
4138
|
-
|
|
4271
|
+
return jsxRuntime.jsxs(CodeBlockWrapper, {
|
|
4272
|
+
children: [jsxRuntime.jsx(StyledCodeBlock, {
|
|
4273
|
+
"data-testid": testId,
|
|
4274
|
+
children: children
|
|
4275
|
+
}), showCopyButton && jsxRuntime.jsx(CopyButton, {
|
|
4276
|
+
text: children,
|
|
4277
|
+
onCopy: onCopy
|
|
4278
|
+
})]
|
|
4279
|
+
});
|
|
4139
4280
|
};
|
|
4140
4281
|
var templateObject_1$h, templateObject_2$f, templateObject_3$e;
|
|
4141
4282
|
|
|
4142
|
-
React.createElement;
|
|
4143
4283
|
var StyledHeader = styled.div.withConfig({
|
|
4144
4284
|
displayName: "DateGroup__StyledHeader",
|
|
4145
4285
|
componentId: "sc-9nfm1f-0"
|
|
@@ -4195,36 +4335,43 @@ var DateGroup = function DateGroup(_a) {
|
|
|
4195
4335
|
dataTestId = _a["data-testid"];
|
|
4196
4336
|
// Determine total variant based on amount (positive = income, negative = expense)
|
|
4197
4337
|
var totalVariant = totalAmount && totalAmount !== 0 ? totalAmount > 0 ? 'positive' : 'negative' : 'default';
|
|
4198
|
-
return
|
|
4338
|
+
return jsxRuntime.jsxs("div", {
|
|
4199
4339
|
"data-testid": dataTestId,
|
|
4200
4340
|
role: "group",
|
|
4201
|
-
"aria-label": "Transactions for ".concat(date)
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
|
|
4205
|
-
|
|
4206
|
-
|
|
4207
|
-
|
|
4208
|
-
|
|
4209
|
-
|
|
4210
|
-
|
|
4211
|
-
|
|
4212
|
-
|
|
4213
|
-
|
|
4214
|
-
|
|
4215
|
-
|
|
4216
|
-
|
|
4217
|
-
|
|
4218
|
-
|
|
4219
|
-
|
|
4220
|
-
|
|
4221
|
-
|
|
4222
|
-
|
|
4223
|
-
|
|
4341
|
+
"aria-label": "Transactions for ".concat(date),
|
|
4342
|
+
children: [jsxRuntime.jsxs(StyledHeader, {
|
|
4343
|
+
"$sticky": sticky,
|
|
4344
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-header") : undefined,
|
|
4345
|
+
children: [jsxRuntime.jsxs(StyledLeftSection, {
|
|
4346
|
+
children: [jsxRuntime.jsx(DateFormatter, {
|
|
4347
|
+
dateString: typeof date === 'string' ? date : date.toISOString(),
|
|
4348
|
+
mode: format,
|
|
4349
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
|
|
4350
|
+
}), showCount && count !== undefined && jsxRuntime.jsxs(Typography, {
|
|
4351
|
+
variant: "caption",
|
|
4352
|
+
color: "subdued",
|
|
4353
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-count") : undefined,
|
|
4354
|
+
children: ["(", count, " ", count === 1 ? 'item' : 'items', ")"]
|
|
4355
|
+
})]
|
|
4356
|
+
}), jsxRuntime.jsx(StyledRightSection, {
|
|
4357
|
+
children: showTotal && totalAmount !== undefined && jsxRuntime.jsx(MoneyDisplay, {
|
|
4358
|
+
amount: totalAmount,
|
|
4359
|
+
currency: currency,
|
|
4360
|
+
variant: totalVariant,
|
|
4361
|
+
size: "small",
|
|
4362
|
+
weight: "medium",
|
|
4363
|
+
showSign: true,
|
|
4364
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-total") : undefined
|
|
4365
|
+
})
|
|
4366
|
+
})]
|
|
4367
|
+
}), jsxRuntime.jsx(StyledContent, {
|
|
4368
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-content") : undefined,
|
|
4369
|
+
children: children
|
|
4370
|
+
})]
|
|
4371
|
+
});
|
|
4224
4372
|
};
|
|
4225
4373
|
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
4226
4374
|
|
|
4227
|
-
React.createElement;
|
|
4228
4375
|
var semantic$9 = tokensData.semantic;
|
|
4229
4376
|
var StyledContainer$1 = styled.div.withConfig({
|
|
4230
4377
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -4287,53 +4434,63 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4287
4434
|
}
|
|
4288
4435
|
if (illustration !== 'custom') {
|
|
4289
4436
|
var iconName = illustrationToIcon[illustration];
|
|
4290
|
-
return
|
|
4437
|
+
return jsxRuntime.jsx(Icon, {
|
|
4291
4438
|
name: iconName,
|
|
4292
4439
|
size: "2xl"
|
|
4293
4440
|
});
|
|
4294
4441
|
}
|
|
4295
4442
|
return null;
|
|
4296
4443
|
};
|
|
4297
|
-
return
|
|
4298
|
-
$size: size,
|
|
4444
|
+
return jsxRuntime.jsxs(StyledContainer$1, {
|
|
4445
|
+
"$size": size,
|
|
4299
4446
|
"data-testid": dataTestId,
|
|
4300
4447
|
role: "status",
|
|
4301
|
-
"aria-label": "Empty state: ".concat(title)
|
|
4302
|
-
|
|
4303
|
-
|
|
4304
|
-
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
|
|
4310
|
-
|
|
4311
|
-
|
|
4312
|
-
|
|
4313
|
-
|
|
4314
|
-
|
|
4315
|
-
|
|
4316
|
-
|
|
4317
|
-
|
|
4318
|
-
|
|
4319
|
-
|
|
4320
|
-
|
|
4321
|
-
|
|
4322
|
-
|
|
4323
|
-
|
|
4324
|
-
|
|
4325
|
-
|
|
4326
|
-
|
|
4327
|
-
|
|
4328
|
-
|
|
4329
|
-
|
|
4330
|
-
|
|
4331
|
-
|
|
4332
|
-
|
|
4448
|
+
"aria-label": "Empty state: ".concat(title),
|
|
4449
|
+
children: [jsxRuntime.jsx(StyledIllustration, {
|
|
4450
|
+
"$size": size,
|
|
4451
|
+
"$variant": variant,
|
|
4452
|
+
"aria-hidden": "true",
|
|
4453
|
+
children: renderIllustration()
|
|
4454
|
+
}), jsxRuntime.jsxs(StyledTextContainer, {
|
|
4455
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
4456
|
+
variant: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3',
|
|
4457
|
+
color: variant === 'error' ? 'error' : 'default',
|
|
4458
|
+
as: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3',
|
|
4459
|
+
children: title
|
|
4460
|
+
}), jsxRuntime.jsx("div", {
|
|
4461
|
+
style: {
|
|
4462
|
+
marginTop: semantic$9.spacing.layout.md
|
|
4463
|
+
},
|
|
4464
|
+
children: jsxRuntime.jsx(Typography, {
|
|
4465
|
+
variant: "body",
|
|
4466
|
+
color: "subdued",
|
|
4467
|
+
children: description
|
|
4468
|
+
})
|
|
4469
|
+
})]
|
|
4470
|
+
}), (action || secondaryAction) && jsxRuntime.jsx(Box, {
|
|
4471
|
+
width: "100%",
|
|
4472
|
+
maxWidth: "300px",
|
|
4473
|
+
children: jsxRuntime.jsxs(Stack, {
|
|
4474
|
+
direction: "column",
|
|
4475
|
+
gap: "sm",
|
|
4476
|
+
children: [action && jsxRuntime.jsx(Button, {
|
|
4477
|
+
variant: action.variant || 'primary',
|
|
4478
|
+
onClick: action.onClick,
|
|
4479
|
+
iconName: action.icon,
|
|
4480
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-primary-action") : undefined,
|
|
4481
|
+
children: action.label
|
|
4482
|
+
}), secondaryAction && jsxRuntime.jsx(Button, {
|
|
4483
|
+
variant: "naked",
|
|
4484
|
+
onClick: secondaryAction.onClick,
|
|
4485
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined,
|
|
4486
|
+
children: secondaryAction.label
|
|
4487
|
+
})]
|
|
4488
|
+
})
|
|
4489
|
+
})]
|
|
4490
|
+
});
|
|
4333
4491
|
};
|
|
4334
4492
|
var templateObject_1$f, templateObject_2$d, templateObject_3$c;
|
|
4335
4493
|
|
|
4336
|
-
React.createElement;
|
|
4337
4494
|
var _a$1 = tokensData.base,
|
|
4338
4495
|
spacing$1 = _a$1.spacing,
|
|
4339
4496
|
border$1 = _a$1.border;
|
|
@@ -4368,37 +4525,53 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
4368
4525
|
readMoreHref = _a.readMoreHref,
|
|
4369
4526
|
_c = _a.readMoreText,
|
|
4370
4527
|
readMoreText = _c === void 0 ? "Read more" : _c;
|
|
4371
|
-
return
|
|
4372
|
-
|
|
4373
|
-
|
|
4374
|
-
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4383
|
-
|
|
4384
|
-
|
|
4385
|
-
|
|
4386
|
-
|
|
4387
|
-
|
|
4388
|
-
|
|
4389
|
-
|
|
4390
|
-
|
|
4391
|
-
|
|
4392
|
-
|
|
4393
|
-
|
|
4394
|
-
|
|
4395
|
-
|
|
4396
|
-
|
|
4397
|
-
|
|
4528
|
+
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
4529
|
+
children: [jsxRuntime.jsxs(FeatureBlockStyled, {
|
|
4530
|
+
children: [jsxRuntime.jsx(ImageWrapper, {
|
|
4531
|
+
children: jsxRuntime.jsx(Picture, {
|
|
4532
|
+
title: title,
|
|
4533
|
+
src: coverImage
|
|
4534
|
+
})
|
|
4535
|
+
}), jsxRuntime.jsx(ContentSection, {
|
|
4536
|
+
children: jsxRuntime.jsx(ContentWrapper, {
|
|
4537
|
+
children: jsxRuntime.jsxs(Stack, {
|
|
4538
|
+
direction: "column",
|
|
4539
|
+
gap: "md",
|
|
4540
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
4541
|
+
variant: "h3",
|
|
4542
|
+
children: title
|
|
4543
|
+
}), jsxRuntime.jsx(DateFormatter, {
|
|
4544
|
+
dateString: date
|
|
4545
|
+
}), jsxRuntime.jsx(Typography, {
|
|
4546
|
+
variant: "small",
|
|
4547
|
+
children: excerpt
|
|
4548
|
+
}), jsxRuntime.jsx(Stack, {
|
|
4549
|
+
direction: "row",
|
|
4550
|
+
gap: "xs",
|
|
4551
|
+
children: Array.isArray(labels) && labels.map(function (label, index) {
|
|
4552
|
+
return jsxRuntime.jsx(Chip, {
|
|
4553
|
+
title: label,
|
|
4554
|
+
variant: "default"
|
|
4555
|
+
}, index);
|
|
4556
|
+
})
|
|
4557
|
+
}), (onReadMore || readMoreHref) && jsxRuntime.jsx(ButtonWrapper, {
|
|
4558
|
+
children: readMoreHref ? jsxRuntime.jsx(Button, {
|
|
4559
|
+
purpose: "link",
|
|
4560
|
+
url: readMoreHref,
|
|
4561
|
+
children: readMoreText
|
|
4562
|
+
}) : jsxRuntime.jsx(Button, {
|
|
4563
|
+
onClick: onReadMore,
|
|
4564
|
+
children: readMoreText
|
|
4565
|
+
})
|
|
4566
|
+
})]
|
|
4567
|
+
})
|
|
4568
|
+
})
|
|
4569
|
+
})]
|
|
4570
|
+
}), jsxRuntime.jsx(Divider, {})]
|
|
4571
|
+
});
|
|
4398
4572
|
};
|
|
4399
4573
|
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
|
|
4400
4574
|
|
|
4401
|
-
React.createElement;
|
|
4402
4575
|
var _a = tokensData.base,
|
|
4403
4576
|
spacing = _a.spacing,
|
|
4404
4577
|
shadow = _a.shadow,
|
|
@@ -4474,7 +4647,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
4474
4647
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
4475
4648
|
displayName: "Dropdown__StyledHelperText",
|
|
4476
4649
|
componentId: "sc-kz07c4-5"
|
|
4477
|
-
})(templateObject_6$
|
|
4650
|
+
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography.caption, function (_a) {
|
|
4478
4651
|
var $hasError = _a.$hasError;
|
|
4479
4652
|
return $hasError ? color.text.error : color.text.subdued;
|
|
4480
4653
|
}, spacing[2]);
|
|
@@ -4591,59 +4764,68 @@ var Dropdown = function Dropdown(_a) {
|
|
|
4591
4764
|
setIsOpen(false);
|
|
4592
4765
|
setFocusedIndex(-1);
|
|
4593
4766
|
};
|
|
4594
|
-
return
|
|
4767
|
+
return jsxRuntime.jsxs(DropdownContainer, {
|
|
4595
4768
|
ref: dropdownRef,
|
|
4596
|
-
className: className
|
|
4597
|
-
|
|
4598
|
-
|
|
4599
|
-
|
|
4600
|
-
|
|
4601
|
-
|
|
4602
|
-
}
|
|
4603
|
-
}, /*#__PURE__*/React.createElement(Typography, {
|
|
4604
|
-
variant: "label"
|
|
4605
|
-
}, label)), /*#__PURE__*/React.createElement(DropdownTrigger, {
|
|
4606
|
-
id: dropdownId,
|
|
4607
|
-
$isOpen: isOpen,
|
|
4608
|
-
$hasError: hasError,
|
|
4609
|
-
onClick: handleTriggerClick,
|
|
4610
|
-
disabled: disabled,
|
|
4611
|
-
"aria-expanded": isOpen,
|
|
4612
|
-
"aria-haspopup": "listbox",
|
|
4613
|
-
"aria-invalid": hasError,
|
|
4614
|
-
"aria-describedby": describedBy
|
|
4615
|
-
}, /*#__PURE__*/React.createElement("span", null, selectedOption ? selectedOption.label : placeholder), /*#__PURE__*/React.createElement(DropdownIcon, {
|
|
4616
|
-
$isOpen: isOpen
|
|
4617
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
4618
|
-
name: "arrowDown",
|
|
4619
|
-
iconColor: disabled ? 'disabled' : 'subdued'
|
|
4620
|
-
}))), /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
4621
|
-
$isOpen: isOpen,
|
|
4622
|
-
role: "listbox",
|
|
4623
|
-
"aria-labelledby": dropdownId
|
|
4624
|
-
}, options.map(function (option, index) {
|
|
4625
|
-
return /*#__PURE__*/React.createElement(DropdownOption, {
|
|
4626
|
-
key: option.id,
|
|
4627
|
-
$isSelected: option.id === value,
|
|
4628
|
-
$isFocused: index === focusedIndex,
|
|
4629
|
-
onClick: function onClick() {
|
|
4630
|
-
return handleOptionClick(option.id);
|
|
4769
|
+
className: className,
|
|
4770
|
+
children: [label && jsxRuntime.jsx("label", {
|
|
4771
|
+
htmlFor: dropdownId,
|
|
4772
|
+
style: {
|
|
4773
|
+
display: 'block',
|
|
4774
|
+
marginBottom: spacing[2]
|
|
4631
4775
|
},
|
|
4632
|
-
|
|
4633
|
-
|
|
4634
|
-
|
|
4635
|
-
|
|
4636
|
-
|
|
4637
|
-
|
|
4638
|
-
|
|
4639
|
-
|
|
4640
|
-
|
|
4641
|
-
|
|
4642
|
-
|
|
4776
|
+
children: jsxRuntime.jsx(Typography, {
|
|
4777
|
+
variant: "label",
|
|
4778
|
+
children: label
|
|
4779
|
+
})
|
|
4780
|
+
}), jsxRuntime.jsxs(DropdownTrigger, {
|
|
4781
|
+
id: dropdownId,
|
|
4782
|
+
"$isOpen": isOpen,
|
|
4783
|
+
"$hasError": hasError,
|
|
4784
|
+
onClick: handleTriggerClick,
|
|
4785
|
+
disabled: disabled,
|
|
4786
|
+
"aria-expanded": isOpen,
|
|
4787
|
+
"aria-haspopup": "listbox",
|
|
4788
|
+
"aria-invalid": hasError,
|
|
4789
|
+
"aria-describedby": describedBy,
|
|
4790
|
+
children: [jsxRuntime.jsx("span", {
|
|
4791
|
+
children: selectedOption ? selectedOption.label : placeholder
|
|
4792
|
+
}), jsxRuntime.jsx(DropdownIcon, {
|
|
4793
|
+
"$isOpen": isOpen,
|
|
4794
|
+
children: jsxRuntime.jsx(Icon, {
|
|
4795
|
+
name: "arrowDown",
|
|
4796
|
+
iconColor: disabled ? 'disabled' : 'subdued'
|
|
4797
|
+
})
|
|
4798
|
+
})]
|
|
4799
|
+
}), jsxRuntime.jsx(DropdownMenu, {
|
|
4800
|
+
"$isOpen": isOpen,
|
|
4801
|
+
role: "listbox",
|
|
4802
|
+
"aria-labelledby": dropdownId,
|
|
4803
|
+
children: options.map(function (option, index) {
|
|
4804
|
+
return jsxRuntime.jsx(DropdownOption, {
|
|
4805
|
+
"$isSelected": option.id === value,
|
|
4806
|
+
"$isFocused": index === focusedIndex,
|
|
4807
|
+
onClick: function onClick() {
|
|
4808
|
+
return handleOptionClick(option.id);
|
|
4809
|
+
},
|
|
4810
|
+
role: "option",
|
|
4811
|
+
"aria-selected": option.id === value,
|
|
4812
|
+
children: option.label
|
|
4813
|
+
}, option.id);
|
|
4814
|
+
})
|
|
4815
|
+
}), error && jsxRuntime.jsx(StyledHelperText$3, {
|
|
4816
|
+
id: errorId,
|
|
4817
|
+
role: "alert",
|
|
4818
|
+
"aria-live": "polite",
|
|
4819
|
+
"$hasError": true,
|
|
4820
|
+
children: error
|
|
4821
|
+
}), helperText && !error && jsxRuntime.jsx(StyledHelperText$3, {
|
|
4822
|
+
id: helperId,
|
|
4823
|
+
children: helperText
|
|
4824
|
+
})]
|
|
4825
|
+
});
|
|
4643
4826
|
};
|
|
4644
|
-
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$
|
|
4827
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
|
|
4645
4828
|
|
|
4646
|
-
React.createElement;
|
|
4647
4829
|
var semantic$8 = tokensData.semantic;
|
|
4648
4830
|
var StyledList = styled.ul.withConfig({
|
|
4649
4831
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -4664,18 +4846,19 @@ var List = function List(_a) {
|
|
|
4664
4846
|
className = _a.className,
|
|
4665
4847
|
dataTestId = _a["data-testid"],
|
|
4666
4848
|
props = __rest(_a, ["children", "dividers", "spacing", "className", 'data-testid']);
|
|
4667
|
-
return
|
|
4668
|
-
$dividers: dividers,
|
|
4669
|
-
$spacing: spacing,
|
|
4849
|
+
return jsxRuntime.jsx(StyledList, __assign({
|
|
4850
|
+
"$dividers": dividers,
|
|
4851
|
+
"$spacing": spacing,
|
|
4670
4852
|
className: className,
|
|
4671
4853
|
"data-testid": dataTestId,
|
|
4672
4854
|
role: "list"
|
|
4673
|
-
}, props
|
|
4855
|
+
}, props, {
|
|
4856
|
+
children: children
|
|
4857
|
+
}));
|
|
4674
4858
|
};
|
|
4675
4859
|
List.displayName = 'List';
|
|
4676
4860
|
var templateObject_1$c;
|
|
4677
4861
|
|
|
4678
|
-
React.createElement;
|
|
4679
4862
|
var semantic$7 = tokensData.semantic,
|
|
4680
4863
|
base$7 = tokensData.base;
|
|
4681
4864
|
var StyledListItem = styled.li.withConfig({
|
|
@@ -4733,7 +4916,7 @@ var StyledChevronIcon = styled.div.withConfig({
|
|
|
4733
4916
|
},
|
|
4734
4917
|
displayName: "ListItem__StyledChevronIcon",
|
|
4735
4918
|
componentId: "sc-1wzzt21-5"
|
|
4736
|
-
})(templateObject_6$
|
|
4919
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"])), semantic$7.color.icon.subdued, function (_a) {
|
|
4737
4920
|
var $expanded = _a.$expanded;
|
|
4738
4921
|
return $expanded ? '180deg' : '0deg';
|
|
4739
4922
|
});
|
|
@@ -4743,7 +4926,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
4743
4926
|
},
|
|
4744
4927
|
displayName: "ListItem__StyledExpandedContent",
|
|
4745
4928
|
componentId: "sc-1wzzt21-6"
|
|
4746
|
-
})(templateObject_7$
|
|
4929
|
+
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"], ["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"])), function (_a) {
|
|
4747
4930
|
var $expanded = _a.$expanded;
|
|
4748
4931
|
return $expanded ? '1000px' : '0';
|
|
4749
4932
|
}, function (_a) {
|
|
@@ -4776,9 +4959,14 @@ var ListItem = function ListItem(_a) {
|
|
|
4776
4959
|
children = _a.children,
|
|
4777
4960
|
className = _a.className,
|
|
4778
4961
|
dataTestId = _a["data-testid"],
|
|
4779
|
-
|
|
4780
|
-
|
|
4781
|
-
|
|
4962
|
+
customRole = _a.role,
|
|
4963
|
+
ariaSelected = _a["aria-selected"],
|
|
4964
|
+
id = _a.id,
|
|
4965
|
+
customTabIndex = _a.tabIndex,
|
|
4966
|
+
customOnKeyDown = _a.onKeyDown,
|
|
4967
|
+
props = __rest(_a, ["primary", "secondary", "badge", "icon", "expandable", "expanded", "onToggle", "interactive", "onClick", "disabled", "selected", "spacing", "children", "className", 'data-testid', "role", 'aria-selected', "id", "tabIndex", "onKeyDown"]);
|
|
4968
|
+
var isInteractive = interactive || expandable || customRole === 'option';
|
|
4969
|
+
var contentRole = customRole === 'option' ? undefined : isInteractive ? 'button' : undefined;
|
|
4782
4970
|
var ariaExpanded = expandable ? expanded : undefined;
|
|
4783
4971
|
var ariaDisabled = disabled ? true : undefined;
|
|
4784
4972
|
var ariaCurrent = selected ? 'true' : undefined;
|
|
@@ -4791,54 +4979,72 @@ var ListItem = function ListItem(_a) {
|
|
|
4791
4979
|
}
|
|
4792
4980
|
};
|
|
4793
4981
|
var handleKeyDown = function handleKeyDown(event) {
|
|
4982
|
+
if (customOnKeyDown) {
|
|
4983
|
+
customOnKeyDown(event);
|
|
4984
|
+
return;
|
|
4985
|
+
}
|
|
4794
4986
|
if (disabled) return;
|
|
4795
4987
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
4796
4988
|
event.preventDefault();
|
|
4797
4989
|
handleClick();
|
|
4798
4990
|
}
|
|
4799
4991
|
};
|
|
4800
|
-
return
|
|
4801
|
-
$interactive: isInteractive,
|
|
4802
|
-
$disabled: disabled,
|
|
4803
|
-
$selected: selected,
|
|
4804
|
-
$spacing: spacing,
|
|
4992
|
+
return jsxRuntime.jsxs(StyledListItem, __assign({
|
|
4993
|
+
"$interactive": isInteractive,
|
|
4994
|
+
"$disabled": disabled,
|
|
4995
|
+
"$selected": selected,
|
|
4996
|
+
"$spacing": spacing,
|
|
4805
4997
|
className: className,
|
|
4806
4998
|
"data-testid": dataTestId,
|
|
4807
|
-
role:
|
|
4808
|
-
|
|
4809
|
-
|
|
4810
|
-
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
|
|
4816
|
-
|
|
4817
|
-
|
|
4818
|
-
|
|
4819
|
-
|
|
4820
|
-
|
|
4821
|
-
|
|
4822
|
-
|
|
4823
|
-
|
|
4824
|
-
|
|
4825
|
-
|
|
4826
|
-
|
|
4827
|
-
|
|
4828
|
-
|
|
4829
|
-
|
|
4830
|
-
|
|
4831
|
-
|
|
4832
|
-
|
|
4833
|
-
|
|
4834
|
-
|
|
4835
|
-
|
|
4836
|
-
|
|
4837
|
-
|
|
4838
|
-
|
|
4999
|
+
role: customRole || 'listitem',
|
|
5000
|
+
id: id,
|
|
5001
|
+
"aria-selected": ariaSelected
|
|
5002
|
+
}, props, {
|
|
5003
|
+
children: [jsxRuntime.jsxs(StyledItemContent, {
|
|
5004
|
+
"$interactive": isInteractive,
|
|
5005
|
+
"$disabled": disabled,
|
|
5006
|
+
"$selected": selected,
|
|
5007
|
+
"$spacing": spacing,
|
|
5008
|
+
role: contentRole,
|
|
5009
|
+
"aria-expanded": ariaExpanded,
|
|
5010
|
+
"aria-disabled": ariaDisabled,
|
|
5011
|
+
"aria-current": ariaCurrent,
|
|
5012
|
+
tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
|
|
5013
|
+
onClick: handleClick,
|
|
5014
|
+
onKeyDown: handleKeyDown,
|
|
5015
|
+
children: [icon && jsxRuntime.jsx(StyledIconContainer, {
|
|
5016
|
+
"aria-hidden": "true",
|
|
5017
|
+
children: icon
|
|
5018
|
+
}), jsxRuntime.jsxs(StyledTextContent, {
|
|
5019
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
5020
|
+
variant: "body",
|
|
5021
|
+
color: "default",
|
|
5022
|
+
children: primary
|
|
5023
|
+
}), secondary && jsxRuntime.jsx(Typography, {
|
|
5024
|
+
variant: "small",
|
|
5025
|
+
color: "subdued",
|
|
5026
|
+
children: secondary
|
|
5027
|
+
})]
|
|
5028
|
+
}), jsxRuntime.jsxs(StyledRightContent, {
|
|
5029
|
+
children: [badge, expandable && jsxRuntime.jsx(StyledChevronIcon, {
|
|
5030
|
+
"$expanded": expanded,
|
|
5031
|
+
"aria-hidden": "true",
|
|
5032
|
+
children: jsxRuntime.jsx(Icon, {
|
|
5033
|
+
name: "caretDown",
|
|
5034
|
+
size: "sm"
|
|
5035
|
+
})
|
|
5036
|
+
})]
|
|
5037
|
+
})]
|
|
5038
|
+
}), expandable && children && jsxRuntime.jsx(StyledExpandedContent, {
|
|
5039
|
+
"$spacing": spacing,
|
|
5040
|
+
"$expanded": expanded,
|
|
5041
|
+
"aria-hidden": !expanded,
|
|
5042
|
+
children: children
|
|
5043
|
+
})]
|
|
5044
|
+
}));
|
|
4839
5045
|
};
|
|
4840
5046
|
ListItem.displayName = 'ListItem';
|
|
4841
|
-
var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$
|
|
5047
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5;
|
|
4842
5048
|
|
|
4843
5049
|
var input = tokensData.component.input;
|
|
4844
5050
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -4881,7 +5087,6 @@ var StyledTextAreaBase = styled.textarea.withConfig({
|
|
|
4881
5087
|
})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"], ["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"])), StyledInputBase);
|
|
4882
5088
|
var templateObject_1$a, templateObject_2$9;
|
|
4883
5089
|
|
|
4884
|
-
React.createElement;
|
|
4885
5090
|
var semantic$6 = tokensData.semantic,
|
|
4886
5091
|
base$6 = tokensData.base;
|
|
4887
5092
|
var StyledFieldContainer$2 = styled.div.withConfig({
|
|
@@ -4907,11 +5112,11 @@ var StyledNumberInput = styled(StyledInputBase).withConfig({
|
|
|
4907
5112
|
var StyledStepperContainer = styled.div.withConfig({
|
|
4908
5113
|
displayName: "NumberInput__StyledStepperContainer",
|
|
4909
5114
|
componentId: "sc-qotc3w-5"
|
|
4910
|
-
})(templateObject_6$
|
|
5115
|
+
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"], ["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"])), base$6.spacing[2], base$6.spacing[2]);
|
|
4911
5116
|
var StyledHelperText$2 = styled.div.withConfig({
|
|
4912
5117
|
displayName: "NumberInput__StyledHelperText",
|
|
4913
5118
|
componentId: "sc-qotc3w-6"
|
|
4914
|
-
})(templateObject_7$
|
|
5119
|
+
})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
4915
5120
|
/**
|
|
4916
5121
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
4917
5122
|
*
|
|
@@ -5072,63 +5277,71 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
5072
5277
|
var isDecrementDisabled = disabled || min !== undefined && value !== '' && typeof value === 'number' && value <= min;
|
|
5073
5278
|
// Build aria-describedby
|
|
5074
5279
|
var ariaDescribedByIds = [ariaDescribedBy, helperText ? helperId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined;
|
|
5075
|
-
return
|
|
5076
|
-
|
|
5077
|
-
|
|
5078
|
-
|
|
5079
|
-
|
|
5080
|
-
|
|
5081
|
-
|
|
5082
|
-
|
|
5083
|
-
|
|
5084
|
-
|
|
5085
|
-
|
|
5086
|
-
|
|
5087
|
-
|
|
5088
|
-
|
|
5089
|
-
|
|
5090
|
-
|
|
5091
|
-
|
|
5092
|
-
|
|
5093
|
-
|
|
5094
|
-
|
|
5095
|
-
|
|
5096
|
-
|
|
5097
|
-
|
|
5098
|
-
|
|
5099
|
-
|
|
5100
|
-
|
|
5101
|
-
|
|
5102
|
-
|
|
5103
|
-
|
|
5104
|
-
|
|
5105
|
-
|
|
5106
|
-
|
|
5107
|
-
|
|
5108
|
-
|
|
5109
|
-
|
|
5110
|
-
|
|
5111
|
-
|
|
5112
|
-
|
|
5113
|
-
|
|
5114
|
-
|
|
5115
|
-
|
|
5116
|
-
|
|
5117
|
-
|
|
5118
|
-
|
|
5119
|
-
|
|
5120
|
-
|
|
5121
|
-
|
|
5122
|
-
|
|
5123
|
-
|
|
5124
|
-
|
|
5125
|
-
|
|
5126
|
-
|
|
5280
|
+
return jsxRuntime.jsxs(StyledFieldContainer$2, {
|
|
5281
|
+
children: [label && jsxRuntime.jsxs(StyledLabel$3, {
|
|
5282
|
+
htmlFor: id,
|
|
5283
|
+
"data-disabled": disabled,
|
|
5284
|
+
children: [label, required && jsxRuntime.jsx(StyledRequiredIndicator$2, {
|
|
5285
|
+
"aria-label": "required",
|
|
5286
|
+
children: "*"
|
|
5287
|
+
})]
|
|
5288
|
+
}), jsxRuntime.jsxs(StyledInputWrapper$2, {
|
|
5289
|
+
children: [jsxRuntime.jsx(StyledNumberInput, __assign({
|
|
5290
|
+
ref: ref,
|
|
5291
|
+
id: id,
|
|
5292
|
+
type: "text",
|
|
5293
|
+
inputMode: "decimal",
|
|
5294
|
+
value: value !== undefined ? formatValue(value) : undefined,
|
|
5295
|
+
defaultValue: defaultValue !== undefined ? formatValue(defaultValue) : undefined,
|
|
5296
|
+
onChange: handleChange,
|
|
5297
|
+
onKeyDown: handleKeyDown,
|
|
5298
|
+
disabled: disabled,
|
|
5299
|
+
required: required,
|
|
5300
|
+
placeholder: placeholder,
|
|
5301
|
+
"$hasError": !!error,
|
|
5302
|
+
"$disabled": disabled,
|
|
5303
|
+
"aria-label": ariaLabel || label,
|
|
5304
|
+
"aria-invalid": !!error,
|
|
5305
|
+
"aria-describedby": ariaDescribedByIds,
|
|
5306
|
+
"aria-required": required,
|
|
5307
|
+
"data-testid": testId,
|
|
5308
|
+
role: "spinbutton",
|
|
5309
|
+
"aria-valuemin": min,
|
|
5310
|
+
"aria-valuemax": max,
|
|
5311
|
+
"aria-valuenow": typeof value === 'number' ? value : undefined
|
|
5312
|
+
}, rest)), jsxRuntime.jsxs(StyledStepperContainer, {
|
|
5313
|
+
children: [jsxRuntime.jsx(IconButton, {
|
|
5314
|
+
iconName: "caretUp",
|
|
5315
|
+
variant: "secondary",
|
|
5316
|
+
size: "small",
|
|
5317
|
+
onClick: handleIncrement,
|
|
5318
|
+
disabled: isIncrementDisabled,
|
|
5319
|
+
"aria-label": "Increment value",
|
|
5320
|
+
tabIndex: -1,
|
|
5321
|
+
type: "button"
|
|
5322
|
+
}), jsxRuntime.jsx(IconButton, {
|
|
5323
|
+
iconName: "caretDown",
|
|
5324
|
+
variant: "secondary",
|
|
5325
|
+
size: "small",
|
|
5326
|
+
onClick: handleDecrement,
|
|
5327
|
+
disabled: isDecrementDisabled,
|
|
5328
|
+
"aria-label": "Decrement value",
|
|
5329
|
+
tabIndex: -1,
|
|
5330
|
+
type: "button"
|
|
5331
|
+
})]
|
|
5332
|
+
})]
|
|
5333
|
+
}), (helperText || error) && jsxRuntime.jsx(StyledHelperText$2, {
|
|
5334
|
+
id: error ? errorId : helperId,
|
|
5335
|
+
"$isError": !!error,
|
|
5336
|
+
role: error ? 'alert' : undefined,
|
|
5337
|
+
"aria-live": error ? 'polite' : undefined,
|
|
5338
|
+
children: error || helperText
|
|
5339
|
+
})]
|
|
5340
|
+
});
|
|
5127
5341
|
});
|
|
5128
5342
|
NumberInput.displayName = 'NumberInput';
|
|
5129
|
-
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$7, templateObject_5$6, templateObject_6$
|
|
5343
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$7, templateObject_5$6, templateObject_6$5, templateObject_7$4;
|
|
5130
5344
|
|
|
5131
|
-
React.createElement;
|
|
5132
5345
|
var PageTitleStyled = styled.div.withConfig({
|
|
5133
5346
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5134
5347
|
return !prop.startsWith('$');
|
|
@@ -5144,27 +5357,30 @@ var PageTitle = function PageTitle(_a) {
|
|
|
5144
5357
|
_b = _a.hasBackButton,
|
|
5145
5358
|
hasBackButton = _b === void 0 ? false : _b,
|
|
5146
5359
|
subtitle = _a.subtitle;
|
|
5147
|
-
return
|
|
5148
|
-
$hasBackButton: hasBackButton
|
|
5149
|
-
|
|
5150
|
-
|
|
5151
|
-
|
|
5152
|
-
|
|
5153
|
-
|
|
5154
|
-
|
|
5155
|
-
|
|
5156
|
-
|
|
5157
|
-
|
|
5158
|
-
|
|
5159
|
-
|
|
5160
|
-
|
|
5161
|
-
|
|
5162
|
-
|
|
5163
|
-
|
|
5360
|
+
return jsxRuntime.jsxs(PageTitleStyled, {
|
|
5361
|
+
"$hasBackButton": hasBackButton,
|
|
5362
|
+
children: [hasBackButton && jsxRuntime.jsx(IconButton, {
|
|
5363
|
+
iconName: 'back',
|
|
5364
|
+
size: 'large',
|
|
5365
|
+
variant: 'naked',
|
|
5366
|
+
url: '/music',
|
|
5367
|
+
"aria-label": 'Go back to music page'
|
|
5368
|
+
}), jsxRuntime.jsxs(Stack, {
|
|
5369
|
+
direction: 'column',
|
|
5370
|
+
gap: "md",
|
|
5371
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
5372
|
+
variant: "h1",
|
|
5373
|
+
children: title
|
|
5374
|
+
}), subtitle && jsxRuntime.jsx(Typography, {
|
|
5375
|
+
variant: 'caption',
|
|
5376
|
+
color: 'subdued',
|
|
5377
|
+
children: subtitle
|
|
5378
|
+
})]
|
|
5379
|
+
})]
|
|
5380
|
+
});
|
|
5164
5381
|
};
|
|
5165
5382
|
var templateObject_1$8;
|
|
5166
5383
|
|
|
5167
|
-
React.createElement;
|
|
5168
5384
|
var semantic$5 = tokensData.semantic,
|
|
5169
5385
|
base$5 = tokensData.base;
|
|
5170
5386
|
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
@@ -5193,7 +5409,7 @@ var StyledInputWrapper$1 = styled.div.withConfig({
|
|
|
5193
5409
|
var StyledToggleButton = styled.div.withConfig({
|
|
5194
5410
|
displayName: "PasswordField__StyledToggleButton",
|
|
5195
5411
|
componentId: "sc-1p15zk0-5"
|
|
5196
|
-
})(templateObject_6$
|
|
5412
|
+
})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n"], ["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n"
|
|
5197
5413
|
/**
|
|
5198
5414
|
* PasswordField component for secure password input with visibility toggle
|
|
5199
5415
|
*
|
|
@@ -5246,51 +5462,61 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
5246
5462
|
var togglePasswordVisibility = function togglePasswordVisibility() {
|
|
5247
5463
|
setShowPassword(!showPassword);
|
|
5248
5464
|
};
|
|
5249
|
-
return
|
|
5250
|
-
|
|
5251
|
-
|
|
5252
|
-
|
|
5253
|
-
|
|
5254
|
-
|
|
5255
|
-
|
|
5256
|
-
|
|
5257
|
-
|
|
5258
|
-
|
|
5259
|
-
|
|
5260
|
-
|
|
5261
|
-
|
|
5262
|
-
|
|
5263
|
-
|
|
5264
|
-
|
|
5265
|
-
|
|
5266
|
-
|
|
5267
|
-
|
|
5268
|
-
|
|
5269
|
-
|
|
5270
|
-
|
|
5271
|
-
|
|
5272
|
-
|
|
5273
|
-
|
|
5274
|
-
|
|
5275
|
-
|
|
5276
|
-
|
|
5277
|
-
|
|
5278
|
-
|
|
5279
|
-
|
|
5280
|
-
|
|
5281
|
-
|
|
5282
|
-
|
|
5283
|
-
|
|
5284
|
-
|
|
5285
|
-
|
|
5286
|
-
|
|
5465
|
+
return jsxRuntime.jsxs(StyledFieldContainer$1, {
|
|
5466
|
+
children: [label && jsxRuntime.jsxs(StyledLabel$2, {
|
|
5467
|
+
htmlFor: id,
|
|
5468
|
+
"data-disabled": disabled,
|
|
5469
|
+
children: [label, required && jsxRuntime.jsx(StyledRequiredIndicator$1, {
|
|
5470
|
+
"aria-label": "required",
|
|
5471
|
+
children: "*"
|
|
5472
|
+
})]
|
|
5473
|
+
}), jsxRuntime.jsxs(StyledInputWrapper$1, {
|
|
5474
|
+
children: [jsxRuntime.jsx(StyledInputBase, __assign({
|
|
5475
|
+
ref: ref,
|
|
5476
|
+
id: id,
|
|
5477
|
+
type: showPassword ? 'text' : 'password',
|
|
5478
|
+
disabled: disabled,
|
|
5479
|
+
required: required,
|
|
5480
|
+
"aria-required": required,
|
|
5481
|
+
"aria-invalid": hasError,
|
|
5482
|
+
"aria-describedby": describedBy,
|
|
5483
|
+
"$hasError": hasError,
|
|
5484
|
+
"$disabled": disabled,
|
|
5485
|
+
"data-testid": dataTestId,
|
|
5486
|
+
style: {
|
|
5487
|
+
paddingRight: showToggle ? '3rem' : undefined
|
|
5488
|
+
}
|
|
5489
|
+
}, inputProps)), showToggle && jsxRuntime.jsx(StyledToggleButton, {
|
|
5490
|
+
children: jsxRuntime.jsx(IconButton, {
|
|
5491
|
+
variant: "naked",
|
|
5492
|
+
size: "small",
|
|
5493
|
+
iconName: showPassword ? 'viewHide' : 'view',
|
|
5494
|
+
onClick: togglePasswordVisibility,
|
|
5495
|
+
disabled: disabled,
|
|
5496
|
+
"aria-label": showPassword ? 'Hide password' : 'Show password',
|
|
5497
|
+
"aria-pressed": showPassword,
|
|
5498
|
+
type: "button",
|
|
5499
|
+
tabIndex: -1
|
|
5500
|
+
})
|
|
5501
|
+
})]
|
|
5502
|
+
}), error && jsxRuntime.jsx(StyledHelperText$1, {
|
|
5503
|
+
id: errorId,
|
|
5504
|
+
role: "alert",
|
|
5505
|
+
"aria-live": "polite",
|
|
5506
|
+
"$hasError": true,
|
|
5507
|
+
children: error
|
|
5508
|
+
}), helperText && !error && jsxRuntime.jsx(StyledHelperText$1, {
|
|
5509
|
+
id: helperId,
|
|
5510
|
+
children: helperText
|
|
5511
|
+
})]
|
|
5512
|
+
});
|
|
5287
5513
|
});
|
|
5288
5514
|
PasswordField.displayName = 'PasswordField';
|
|
5289
|
-
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$
|
|
5515
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$4;
|
|
5290
5516
|
|
|
5291
|
-
React.createElement;
|
|
5292
5517
|
var semantic$4 = tokensData.semantic,
|
|
5293
|
-
base$4 = tokensData.base
|
|
5518
|
+
base$4 = tokensData.base,
|
|
5519
|
+
component = tokensData.component;
|
|
5294
5520
|
var StyledSearchContainer = styled.div.withConfig({
|
|
5295
5521
|
displayName: "SearchField__StyledSearchContainer",
|
|
5296
5522
|
componentId: "sc-qhz9i8-0"
|
|
@@ -5298,39 +5524,23 @@ var StyledSearchContainer = styled.div.withConfig({
|
|
|
5298
5524
|
var StyledInputWrapper = styled.div.withConfig({
|
|
5299
5525
|
displayName: "SearchField__StyledInputWrapper",
|
|
5300
5526
|
componentId: "sc-qhz9i8-1"
|
|
5301
|
-
})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n transition:
|
|
5302
|
-
return props.$isFocused && "\n border-color: ".concat(
|
|
5527
|
+
})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n \n ", "\n \n ", "\n \n &:hover:not([data-disabled='true']) {\n border-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n \n ", "\n \n ", "\n \n &:hover:not([data-disabled='true']) {\n border-color: ", ";\n }\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, function (props) {
|
|
5528
|
+
return props.$isFocused && "\n border-color: ".concat(component.input.focus.borderColor, ";\n outline: ").concat(component.input.focus.outline, ";\n outline-offset: ").concat(component.input.focus.outlineOffset, ";\n ");
|
|
5303
5529
|
}, function (props) {
|
|
5304
|
-
return props.$disabled && "\n background-color: ".concat(
|
|
5305
|
-
},
|
|
5530
|
+
return props.$disabled && "\n background-color: ".concat(component.input.disabled.backgroundColor, ";\n border-color: ").concat(component.input.disabled.borderColor, ";\n cursor: not-allowed;\n ");
|
|
5531
|
+
}, component.input.hover.borderColor);
|
|
5306
5532
|
var StyledInput = styled.input.withConfig({
|
|
5307
5533
|
displayName: "SearchField__StyledInput",
|
|
5308
5534
|
componentId: "sc-qhz9i8-2"
|
|
5309
5535
|
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n \n &::placeholder {\n color: ", ";\n }\n \n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n flex: 1;\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n \n &::placeholder {\n color: ", ";\n }\n \n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"])), semantic$4.typography.body, semantic$4.color.text["default"], semantic$4.color.text.subdued, semantic$4.color.text.disabled);
|
|
5310
|
-
var StyledClearButton = styled.button.withConfig({
|
|
5311
|
-
displayName: "SearchField__StyledClearButton",
|
|
5312
|
-
componentId: "sc-qhz9i8-3"
|
|
5313
|
-
})(templateObject_4$5 || (templateObject_4$5 = __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 \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\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 \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"])), base$4.spacing[1], semantic$4.color.icon.subdued, base$4.border.radius[2], semantic$4.motion.hover, semantic$4.color.icon["default"], semantic$4.color.background.surface, base$4.border.width[2], semantic$4.color.border.strong, base$4.spacing[1]);
|
|
5314
5536
|
var StyledSuggestionsList = styled.ul.withConfig({
|
|
5315
5537
|
displayName: "SearchField__StyledSuggestionsList",
|
|
5316
|
-
componentId: "sc-qhz9i8-
|
|
5317
|
-
})(
|
|
5318
|
-
var StyledSuggestionItem = styled.li.withConfig({
|
|
5319
|
-
displayName: "SearchField__StyledSuggestionItem",
|
|
5320
|
-
componentId: "sc-qhz9i8-5"
|
|
5321
|
-
})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n &:hover {\n background-color: ", ";\n }\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n &:hover {\n background-color: ", ";\n }\n \n ", "\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], semantic$4.motion.hover, function (props) {
|
|
5322
|
-
return props.$isHighlighted && "\n background-color: ".concat(semantic$4.color.background['interactive-subtle'], ";\n ");
|
|
5323
|
-
}, semantic$4.color.background['interactive-subtle'], function (props) {
|
|
5324
|
-
return props.$isRecent && "\n color: ".concat(semantic$4.color.text.subdued, ";\n ");
|
|
5325
|
-
});
|
|
5538
|
+
componentId: "sc-qhz9i8-3"
|
|
5539
|
+
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: 300px;\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: 1000;\n"], ["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: 300px;\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: 1000;\n"])), base$4.spacing[1], semantic$4.color.background.subtle, base$4.border.width[1], semantic$4.color.border["default"], base$4.border.radius[3], base$4.shadow[3], base$4.spacing[1]);
|
|
5326
5540
|
var StyledSectionHeader = styled.div.withConfig({
|
|
5327
5541
|
displayName: "SearchField__StyledSectionHeader",
|
|
5328
|
-
componentId: "sc-qhz9i8-
|
|
5329
|
-
})(
|
|
5330
|
-
var StyledClearRecent = styled.button.withConfig({
|
|
5331
|
-
displayName: "SearchField__StyledClearRecent",
|
|
5332
|
-
componentId: "sc-qhz9i8-7"
|
|
5333
|
-
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n cursor: pointer;\n width: 100%;\n text-align: left;\n transition: ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n"], ["\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n cursor: pointer;\n width: 100%;\n text-align: left;\n transition: ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.small, semantic$4.color.text.interactive, semantic$4.motion.hover, semantic$4.color.background['interactive-subtle'], base$4.border.width[2], semantic$4.color.border.strong, base$4.spacing[1]);
|
|
5542
|
+
componentId: "sc-qhz9i8-4"
|
|
5543
|
+
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"], ["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.caption, semantic$4.color.text.subdued, base$4.letterSpacing[4]);
|
|
5334
5544
|
var debounce = function debounce(func, wait) {
|
|
5335
5545
|
var timeout = null;
|
|
5336
5546
|
return function () {
|
|
@@ -5538,94 +5748,101 @@ var SearchField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
5538
5748
|
}, [highlightedIndex]);
|
|
5539
5749
|
var showClearButton = value.length > 0 && !disabled;
|
|
5540
5750
|
var hasItems = displayItems.length > 0;
|
|
5541
|
-
return
|
|
5542
|
-
$isFocused: isFocused,
|
|
5543
|
-
$disabled: disabled,
|
|
5544
|
-
"data-testid": dataTestId
|
|
5545
|
-
|
|
5546
|
-
|
|
5547
|
-
|
|
5548
|
-
|
|
5549
|
-
|
|
5550
|
-
|
|
5551
|
-
|
|
5552
|
-
|
|
5553
|
-
|
|
5554
|
-
|
|
5555
|
-
|
|
5556
|
-
|
|
5557
|
-
|
|
5558
|
-
|
|
5559
|
-
|
|
5560
|
-
|
|
5561
|
-
|
|
5562
|
-
|
|
5563
|
-
|
|
5564
|
-
|
|
5565
|
-
|
|
5566
|
-
|
|
5567
|
-
|
|
5568
|
-
|
|
5569
|
-
|
|
5570
|
-
|
|
5571
|
-
|
|
5572
|
-
|
|
5573
|
-
|
|
5574
|
-
|
|
5575
|
-
|
|
5576
|
-
|
|
5577
|
-
|
|
5578
|
-
|
|
5579
|
-
|
|
5580
|
-
|
|
5581
|
-
|
|
5582
|
-
|
|
5583
|
-
|
|
5584
|
-
|
|
5585
|
-
|
|
5586
|
-
|
|
5587
|
-
|
|
5588
|
-
|
|
5589
|
-
|
|
5590
|
-
type
|
|
5591
|
-
|
|
5592
|
-
|
|
5751
|
+
return jsxRuntime.jsxs(StyledSearchContainer, {
|
|
5752
|
+
"$isFocused": isFocused,
|
|
5753
|
+
"$disabled": disabled,
|
|
5754
|
+
"data-testid": dataTestId,
|
|
5755
|
+
children: [jsxRuntime.jsxs(StyledInputWrapper, {
|
|
5756
|
+
"$isFocused": isFocused,
|
|
5757
|
+
"$disabled": disabled,
|
|
5758
|
+
"data-disabled": disabled,
|
|
5759
|
+
children: [jsxRuntime.jsx(Icon, {
|
|
5760
|
+
name: "search",
|
|
5761
|
+
size: "sm",
|
|
5762
|
+
iconColor: "subdued",
|
|
5763
|
+
"aria-hidden": "true"
|
|
5764
|
+
}), jsxRuntime.jsx(StyledInput, __assign({
|
|
5765
|
+
ref: inputRef,
|
|
5766
|
+
type: "text",
|
|
5767
|
+
value: value,
|
|
5768
|
+
onChange: handleInputChange,
|
|
5769
|
+
onFocus: handleFocus,
|
|
5770
|
+
onBlur: handleBlur,
|
|
5771
|
+
onKeyDown: handleKeyDown,
|
|
5772
|
+
placeholder: placeholder,
|
|
5773
|
+
disabled: disabled,
|
|
5774
|
+
"aria-label": ariaLabel,
|
|
5775
|
+
"aria-autocomplete": "list",
|
|
5776
|
+
"aria-controls": showSuggestions && hasItems ? 'search-suggestions' : undefined,
|
|
5777
|
+
"aria-expanded": showSuggestions && hasItems,
|
|
5778
|
+
"aria-activedescendant": highlightedIndex >= 0 ? "suggestion-".concat(highlightedIndex) : undefined,
|
|
5779
|
+
role: "combobox"
|
|
5780
|
+
}, inputProps)), loading && jsxRuntime.jsx(Icon, {
|
|
5781
|
+
name: "refresh",
|
|
5782
|
+
size: "sm",
|
|
5783
|
+
iconColor: "subdued",
|
|
5784
|
+
"aria-label": "Loading"
|
|
5785
|
+
}), showClearButton && jsxRuntime.jsx(IconButton, {
|
|
5786
|
+
iconName: "close",
|
|
5787
|
+
size: "small",
|
|
5788
|
+
variant: "naked",
|
|
5789
|
+
onClick: handleClear,
|
|
5790
|
+
"aria-label": "Clear search",
|
|
5791
|
+
tabIndex: -1
|
|
5792
|
+
})]
|
|
5793
|
+
}), showSuggestions && hasItems && jsxRuntime.jsxs(StyledSuggestionsList, {
|
|
5794
|
+
ref: listRef,
|
|
5795
|
+
id: "search-suggestions",
|
|
5796
|
+
role: "listbox",
|
|
5797
|
+
children: [!value.trim() && showRecentSearches && recentSearches.length > 0 && jsxRuntime.jsx(StyledSectionHeader, {
|
|
5798
|
+
children: "Recent Searches"
|
|
5799
|
+
}), displayItems.map(function (item, index) {
|
|
5800
|
+
if (item.type === 'clear') {
|
|
5801
|
+
return jsxRuntime.jsx(ListItem, {
|
|
5802
|
+
role: "option",
|
|
5803
|
+
primary: "Clear recent searches",
|
|
5804
|
+
interactive: true,
|
|
5805
|
+
spacing: "compact",
|
|
5806
|
+
onClick: function onClick() {
|
|
5807
|
+
return handleSuggestionClick(item);
|
|
5808
|
+
},
|
|
5809
|
+
onKeyDown: function onKeyDown(e) {
|
|
5810
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
5811
|
+
e.preventDefault();
|
|
5812
|
+
handleSuggestionClick(item);
|
|
5813
|
+
}
|
|
5814
|
+
}
|
|
5815
|
+
}, "clear");
|
|
5593
5816
|
}
|
|
5594
|
-
|
|
5595
|
-
|
|
5596
|
-
|
|
5597
|
-
|
|
5598
|
-
|
|
5599
|
-
|
|
5600
|
-
|
|
5601
|
-
|
|
5602
|
-
|
|
5603
|
-
|
|
5604
|
-
|
|
5605
|
-
|
|
5606
|
-
|
|
5607
|
-
|
|
5608
|
-
|
|
5609
|
-
|
|
5610
|
-
|
|
5611
|
-
|
|
5612
|
-
|
|
5613
|
-
|
|
5614
|
-
|
|
5615
|
-
|
|
5616
|
-
|
|
5617
|
-
}
|
|
5618
|
-
|
|
5619
|
-
}, label), description && /*#__PURE__*/React.createElement(Typography, {
|
|
5620
|
-
variant: "caption",
|
|
5621
|
-
color: "subdued"
|
|
5622
|
-
}, description)));
|
|
5623
|
-
})));
|
|
5817
|
+
var suggestion = item.data;
|
|
5818
|
+
var isString = typeof suggestion === 'string';
|
|
5819
|
+
var label = isString ? suggestion : suggestion.label;
|
|
5820
|
+
var description = !isString ? suggestion.description : undefined;
|
|
5821
|
+
return jsxRuntime.jsx(ListItem, {
|
|
5822
|
+
id: "suggestion-".concat(index),
|
|
5823
|
+
role: "option",
|
|
5824
|
+
"aria-selected": index === highlightedIndex,
|
|
5825
|
+
primary: label,
|
|
5826
|
+
secondary: description,
|
|
5827
|
+
icon: item.type === 'recent' ? jsxRuntime.jsx(Icon, {
|
|
5828
|
+
name: "refresh",
|
|
5829
|
+
size: "xs",
|
|
5830
|
+
"aria-hidden": "true"
|
|
5831
|
+
}) : undefined,
|
|
5832
|
+
interactive: true,
|
|
5833
|
+
selected: index === highlightedIndex,
|
|
5834
|
+
spacing: "compact",
|
|
5835
|
+
onClick: function onClick() {
|
|
5836
|
+
return handleSuggestionClick(item);
|
|
5837
|
+
}
|
|
5838
|
+
}, isString ? suggestion : suggestion.id);
|
|
5839
|
+
})]
|
|
5840
|
+
})]
|
|
5841
|
+
});
|
|
5624
5842
|
});
|
|
5625
5843
|
SearchField.displayName = 'SearchField';
|
|
5626
|
-
var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4
|
|
5844
|
+
var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4;
|
|
5627
5845
|
|
|
5628
|
-
React.createElement;
|
|
5629
5846
|
var semantic$3 = tokensData.semantic,
|
|
5630
5847
|
base$3 = tokensData.base;
|
|
5631
5848
|
// Fade in animation for overlay
|
|
@@ -5803,30 +6020,34 @@ var Sheet = function Sheet(_a) {
|
|
|
5803
6020
|
}
|
|
5804
6021
|
};
|
|
5805
6022
|
if (!isOpen) return null;
|
|
5806
|
-
return
|
|
5807
|
-
|
|
5808
|
-
|
|
5809
|
-
|
|
5810
|
-
|
|
5811
|
-
|
|
5812
|
-
|
|
5813
|
-
|
|
5814
|
-
|
|
5815
|
-
|
|
5816
|
-
|
|
5817
|
-
|
|
5818
|
-
|
|
5819
|
-
|
|
5820
|
-
|
|
5821
|
-
|
|
5822
|
-
|
|
5823
|
-
|
|
5824
|
-
|
|
6023
|
+
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
6024
|
+
children: [jsxRuntime.jsx(StyledOverlay, {
|
|
6025
|
+
"$isOpen": isOpen,
|
|
6026
|
+
onClick: handleOverlayClick,
|
|
6027
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'sheet-overlay'
|
|
6028
|
+
}), jsxRuntime.jsx(StyledSheet, {
|
|
6029
|
+
ref: sheetRef,
|
|
6030
|
+
role: "dialog",
|
|
6031
|
+
"aria-modal": "true",
|
|
6032
|
+
"aria-label": ariaLabel || title || 'Sheet dialog',
|
|
6033
|
+
"aria-describedby": ariaDescribedBy,
|
|
6034
|
+
tabIndex: -1,
|
|
6035
|
+
"$position": position,
|
|
6036
|
+
"$variant": variant,
|
|
6037
|
+
"$width": width,
|
|
6038
|
+
"$height": height,
|
|
6039
|
+
"$isOpen": isOpen,
|
|
6040
|
+
onKeyDown: handleKeyDown,
|
|
6041
|
+
"data-testid": dataTestId,
|
|
6042
|
+
children: jsxRuntime.jsx(StyledSheetContent, {
|
|
6043
|
+
children: children
|
|
6044
|
+
})
|
|
6045
|
+
})]
|
|
6046
|
+
});
|
|
5825
6047
|
};
|
|
5826
6048
|
Sheet.displayName = 'Sheet';
|
|
5827
6049
|
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
|
|
5828
6050
|
|
|
5829
|
-
React.createElement;
|
|
5830
6051
|
var semantic$2 = tokensData.semantic,
|
|
5831
6052
|
base$2 = tokensData.base;
|
|
5832
6053
|
var StyledSliderContainer = styled.div.withConfig({
|
|
@@ -6131,90 +6352,108 @@ var Slider = function Slider(_a) {
|
|
|
6131
6352
|
var _l = [valueToPercent(currentRangeValue[0]), valueToPercent(currentRangeValue[1])],
|
|
6132
6353
|
minPercent = _l[0],
|
|
6133
6354
|
maxPercent = _l[1];
|
|
6134
|
-
return
|
|
6135
|
-
"data-testid": dataTestId
|
|
6136
|
-
|
|
6137
|
-
|
|
6138
|
-
|
|
6139
|
-
|
|
6140
|
-
|
|
6141
|
-
|
|
6142
|
-
|
|
6143
|
-
|
|
6144
|
-
|
|
6145
|
-
|
|
6146
|
-
|
|
6147
|
-
|
|
6148
|
-
|
|
6149
|
-
|
|
6150
|
-
|
|
6151
|
-
|
|
6152
|
-
|
|
6153
|
-
|
|
6154
|
-
|
|
6155
|
-
|
|
6156
|
-
|
|
6157
|
-
|
|
6158
|
-
|
|
6159
|
-
|
|
6160
|
-
|
|
6161
|
-
|
|
6162
|
-
|
|
6163
|
-
|
|
6164
|
-
|
|
6165
|
-
|
|
6166
|
-
|
|
6167
|
-
|
|
6168
|
-
|
|
6169
|
-
|
|
6170
|
-
|
|
6171
|
-
|
|
6172
|
-
|
|
6173
|
-
|
|
6174
|
-
|
|
6175
|
-
|
|
6176
|
-
|
|
6177
|
-
|
|
6178
|
-
|
|
6179
|
-
|
|
6180
|
-
|
|
6181
|
-
|
|
6182
|
-
|
|
6183
|
-
|
|
6184
|
-
|
|
6185
|
-
|
|
6186
|
-
|
|
6187
|
-
|
|
6188
|
-
|
|
6189
|
-
|
|
6190
|
-
|
|
6191
|
-
|
|
6192
|
-
|
|
6193
|
-
|
|
6194
|
-
|
|
6195
|
-
|
|
6196
|
-
|
|
6197
|
-
|
|
6198
|
-
|
|
6199
|
-
|
|
6200
|
-
|
|
6201
|
-
|
|
6202
|
-
|
|
6203
|
-
|
|
6204
|
-
|
|
6205
|
-
|
|
6206
|
-
|
|
6207
|
-
|
|
6208
|
-
|
|
6209
|
-
|
|
6210
|
-
|
|
6211
|
-
|
|
6212
|
-
|
|
6355
|
+
return jsxRuntime.jsxs(StyledSliderContainer, {
|
|
6356
|
+
"data-testid": dataTestId,
|
|
6357
|
+
children: [label && jsxRuntime.jsx(StyledLabel$1, {
|
|
6358
|
+
htmlFor: generatedId,
|
|
6359
|
+
"$disabled": disabled,
|
|
6360
|
+
children: label
|
|
6361
|
+
}), jsxRuntime.jsx(StyledSliderTrackContainer, {
|
|
6362
|
+
children: jsxRuntime.jsxs(StyledTrack, {
|
|
6363
|
+
ref: trackRef,
|
|
6364
|
+
onClick: handleTrackClick,
|
|
6365
|
+
"$disabled": disabled,
|
|
6366
|
+
children: [isRange ? jsxRuntime.jsx(StyledTrackFill, {
|
|
6367
|
+
"$disabled": disabled,
|
|
6368
|
+
style: {
|
|
6369
|
+
left: "".concat(minPercent, "%"),
|
|
6370
|
+
width: "".concat(maxPercent - minPercent, "%")
|
|
6371
|
+
}
|
|
6372
|
+
}) : jsxRuntime.jsx(StyledTrackFill, {
|
|
6373
|
+
"$disabled": disabled,
|
|
6374
|
+
style: {
|
|
6375
|
+
left: 0,
|
|
6376
|
+
width: "".concat(singlePercent, "%")
|
|
6377
|
+
}
|
|
6378
|
+
}), isRange ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
6379
|
+
children: [jsxRuntime.jsx(StyledThumb, {
|
|
6380
|
+
role: "slider",
|
|
6381
|
+
tabIndex: disabled ? -1 : 0,
|
|
6382
|
+
"aria-label": ariaLabel ? "".concat(ariaLabel, " minimum") : 'Minimum value',
|
|
6383
|
+
"aria-valuemin": min,
|
|
6384
|
+
"aria-valuemax": max,
|
|
6385
|
+
"aria-valuenow": currentRangeValue[0],
|
|
6386
|
+
"aria-valuetext": formatValue(currentRangeValue[0]),
|
|
6387
|
+
"aria-disabled": disabled,
|
|
6388
|
+
"aria-describedby": ariaDescribedBy,
|
|
6389
|
+
"$disabled": disabled,
|
|
6390
|
+
"$active": activeThumb === 'min',
|
|
6391
|
+
style: {
|
|
6392
|
+
left: "".concat(minPercent, "%")
|
|
6393
|
+
},
|
|
6394
|
+
onMouseDown: handleThumbMouseDown('min'),
|
|
6395
|
+
onKeyDown: handleKeyDown('min'),
|
|
6396
|
+
children: showValueLabel && jsxRuntime.jsx(StyledValueLabel, {
|
|
6397
|
+
"$disabled": disabled,
|
|
6398
|
+
children: formatValue(currentRangeValue[0])
|
|
6399
|
+
})
|
|
6400
|
+
}), jsxRuntime.jsx(StyledThumb, {
|
|
6401
|
+
role: "slider",
|
|
6402
|
+
tabIndex: disabled ? -1 : 0,
|
|
6403
|
+
"aria-label": ariaLabel ? "".concat(ariaLabel, " maximum") : 'Maximum value',
|
|
6404
|
+
"aria-valuemin": min,
|
|
6405
|
+
"aria-valuemax": max,
|
|
6406
|
+
"aria-valuenow": currentRangeValue[1],
|
|
6407
|
+
"aria-valuetext": formatValue(currentRangeValue[1]),
|
|
6408
|
+
"aria-disabled": disabled,
|
|
6409
|
+
"aria-describedby": ariaDescribedBy,
|
|
6410
|
+
"$disabled": disabled,
|
|
6411
|
+
"$active": activeThumb === 'max',
|
|
6412
|
+
style: {
|
|
6413
|
+
left: "".concat(maxPercent, "%")
|
|
6414
|
+
},
|
|
6415
|
+
onMouseDown: handleThumbMouseDown('max'),
|
|
6416
|
+
onKeyDown: handleKeyDown('max'),
|
|
6417
|
+
children: showValueLabel && jsxRuntime.jsx(StyledValueLabel, {
|
|
6418
|
+
"$disabled": disabled,
|
|
6419
|
+
children: formatValue(currentRangeValue[1])
|
|
6420
|
+
})
|
|
6421
|
+
})]
|
|
6422
|
+
}) : jsxRuntime.jsx(StyledThumb, {
|
|
6423
|
+
role: "slider",
|
|
6424
|
+
tabIndex: disabled ? -1 : 0,
|
|
6425
|
+
"aria-label": ariaLabel || label || 'Slider value',
|
|
6426
|
+
"aria-valuemin": min,
|
|
6427
|
+
"aria-valuemax": max,
|
|
6428
|
+
"aria-valuenow": currentValue,
|
|
6429
|
+
"aria-valuetext": formatValue(currentValue),
|
|
6430
|
+
"aria-disabled": disabled,
|
|
6431
|
+
"aria-describedby": ariaDescribedBy,
|
|
6432
|
+
"$disabled": disabled,
|
|
6433
|
+
"$active": activeThumb === 'single',
|
|
6434
|
+
style: {
|
|
6435
|
+
left: "".concat(singlePercent, "%")
|
|
6436
|
+
},
|
|
6437
|
+
onMouseDown: handleThumbMouseDown('single'),
|
|
6438
|
+
onKeyDown: handleKeyDown('single'),
|
|
6439
|
+
children: showValueLabel && jsxRuntime.jsx(StyledValueLabel, {
|
|
6440
|
+
"$disabled": disabled,
|
|
6441
|
+
children: formatValue(currentValue)
|
|
6442
|
+
})
|
|
6443
|
+
})]
|
|
6444
|
+
})
|
|
6445
|
+
}), jsxRuntime.jsxs(StyledMinMaxLabels, {
|
|
6446
|
+
children: [jsxRuntime.jsx("span", {
|
|
6447
|
+
children: formatValue(min)
|
|
6448
|
+
}), jsxRuntime.jsx("span", {
|
|
6449
|
+
children: formatValue(max)
|
|
6450
|
+
})]
|
|
6451
|
+
})]
|
|
6452
|
+
});
|
|
6213
6453
|
};
|
|
6214
6454
|
Slider.displayName = 'Slider';
|
|
6215
6455
|
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
6216
6456
|
|
|
6217
|
-
React.createElement;
|
|
6218
6457
|
var semantic$1 = tokensData.semantic,
|
|
6219
6458
|
base$1 = tokensData.base;
|
|
6220
6459
|
var StyledTabList = styled.div.withConfig({
|
|
@@ -6396,43 +6635,44 @@ var TabBar = function TabBar(_a) {
|
|
|
6396
6635
|
(_a = tabRefs.current[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6397
6636
|
}
|
|
6398
6637
|
};
|
|
6399
|
-
return
|
|
6400
|
-
$variant: variant,
|
|
6638
|
+
return jsxRuntime.jsx(StyledTabList, {
|
|
6639
|
+
"$variant": variant,
|
|
6401
6640
|
role: "tablist",
|
|
6402
6641
|
"aria-label": ariaLabel,
|
|
6403
|
-
"data-testid": dataTestId
|
|
6404
|
-
|
|
6405
|
-
|
|
6406
|
-
|
|
6407
|
-
|
|
6408
|
-
|
|
6409
|
-
|
|
6410
|
-
|
|
6411
|
-
|
|
6412
|
-
|
|
6413
|
-
|
|
6414
|
-
|
|
6415
|
-
|
|
6416
|
-
|
|
6417
|
-
|
|
6418
|
-
|
|
6419
|
-
|
|
6420
|
-
|
|
6421
|
-
|
|
6422
|
-
|
|
6423
|
-
|
|
6424
|
-
|
|
6425
|
-
|
|
6426
|
-
|
|
6427
|
-
|
|
6428
|
-
|
|
6429
|
-
|
|
6430
|
-
|
|
6642
|
+
"data-testid": dataTestId,
|
|
6643
|
+
children: tabs.map(function (tab, index) {
|
|
6644
|
+
return jsxRuntime.jsxs(StyledTab, {
|
|
6645
|
+
ref: function ref(el) {
|
|
6646
|
+
tabRefs.current[index] = el;
|
|
6647
|
+
},
|
|
6648
|
+
"$variant": variant,
|
|
6649
|
+
"$isActive": tab.id === activeTab,
|
|
6650
|
+
"$disabled": tab.disabled || false,
|
|
6651
|
+
role: "tab",
|
|
6652
|
+
"aria-selected": tab.id === activeTab,
|
|
6653
|
+
"aria-disabled": tab.disabled || false,
|
|
6654
|
+
tabIndex: index === focusedIndex ? 0 : -1,
|
|
6655
|
+
disabled: tab.disabled,
|
|
6656
|
+
onClick: function onClick() {
|
|
6657
|
+
return handleTabClick(tab, index);
|
|
6658
|
+
},
|
|
6659
|
+
onKeyDown: function onKeyDown(e) {
|
|
6660
|
+
return handleKeyDown(e, index);
|
|
6661
|
+
},
|
|
6662
|
+
"data-testid": "".concat(dataTestId, "-tab-").concat(tab.id),
|
|
6663
|
+
children: [tab.label, typeof tab.badge === 'number' && tab.badge > 0 && jsxRuntime.jsx(StyledBadge, {
|
|
6664
|
+
"$variant": variant,
|
|
6665
|
+
"$isActive": tab.id === activeTab,
|
|
6666
|
+
"aria-label": "".concat(tab.badge, " items"),
|
|
6667
|
+
children: tab.badge > 99 ? '99+' : tab.badge
|
|
6668
|
+
})]
|
|
6669
|
+
}, tab.id);
|
|
6670
|
+
})
|
|
6671
|
+
});
|
|
6431
6672
|
};
|
|
6432
6673
|
TabBar.displayName = 'TabBar';
|
|
6433
6674
|
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
6434
6675
|
|
|
6435
|
-
React.createElement;
|
|
6436
6676
|
var semantic = tokensData.semantic,
|
|
6437
6677
|
base = tokensData.base;
|
|
6438
6678
|
var StyledFieldContainer = styled.div.withConfig({
|
|
@@ -6501,43 +6741,47 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
6501
6741
|
var helperId = helperText && !error ? "".concat(id, "-helper") : undefined;
|
|
6502
6742
|
var describedBy = [errorId, helperId].filter(Boolean).join(' ') || undefined;
|
|
6503
6743
|
var hasError = Boolean(error);
|
|
6504
|
-
return
|
|
6505
|
-
"data-testid": dataTestId
|
|
6506
|
-
|
|
6507
|
-
|
|
6508
|
-
|
|
6509
|
-
|
|
6510
|
-
|
|
6511
|
-
|
|
6512
|
-
|
|
6513
|
-
|
|
6514
|
-
|
|
6515
|
-
|
|
6516
|
-
|
|
6517
|
-
|
|
6518
|
-
|
|
6519
|
-
|
|
6520
|
-
|
|
6521
|
-
|
|
6522
|
-
|
|
6523
|
-
|
|
6524
|
-
|
|
6525
|
-
|
|
6526
|
-
|
|
6527
|
-
|
|
6528
|
-
|
|
6529
|
-
|
|
6744
|
+
return jsxRuntime.jsxs(StyledFieldContainer, {
|
|
6745
|
+
"data-testid": dataTestId,
|
|
6746
|
+
children: [label && jsxRuntime.jsxs(StyledLabel, {
|
|
6747
|
+
htmlFor: id,
|
|
6748
|
+
"data-disabled": disabled,
|
|
6749
|
+
children: [label, required && jsxRuntime.jsx(StyledRequiredIndicator, {
|
|
6750
|
+
"aria-label": "required",
|
|
6751
|
+
children: "*"
|
|
6752
|
+
})]
|
|
6753
|
+
}), jsxRuntime.jsx(StyledInputBase, __assign({
|
|
6754
|
+
ref: ref,
|
|
6755
|
+
id: id,
|
|
6756
|
+
type: type,
|
|
6757
|
+
disabled: disabled,
|
|
6758
|
+
required: required,
|
|
6759
|
+
"aria-required": required,
|
|
6760
|
+
"aria-invalid": hasError,
|
|
6761
|
+
"aria-describedby": describedBy,
|
|
6762
|
+
"$hasError": hasError,
|
|
6763
|
+
"$disabled": disabled
|
|
6764
|
+
}, inputProps)), error && jsxRuntime.jsx(StyledHelperText, {
|
|
6765
|
+
id: errorId,
|
|
6766
|
+
role: "alert",
|
|
6767
|
+
"aria-live": "polite",
|
|
6768
|
+
"$hasError": true,
|
|
6769
|
+
children: error
|
|
6770
|
+
}), helperText && !error && jsxRuntime.jsx(StyledHelperText, {
|
|
6771
|
+
id: helperId,
|
|
6772
|
+
children: helperText
|
|
6773
|
+
})]
|
|
6774
|
+
});
|
|
6530
6775
|
});
|
|
6531
6776
|
TextField.displayName = 'TextField';
|
|
6532
6777
|
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2;
|
|
6533
6778
|
|
|
6534
|
-
React.createElement;
|
|
6535
6779
|
var StyledContainer = styled.div.withConfig({
|
|
6536
6780
|
displayName: "TransactionListItem__StyledContainer",
|
|
6537
6781
|
componentId: "sc-7yunm0-0"
|
|
6538
6782
|
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-height: 72px;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n gap: ", ";\n transition: background-color 0.2s ease;\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n min-height: 72px;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n gap: ", ";\n transition: background-color 0.2s ease;\n \n ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.md, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], tokensData.semantic.spacing.layout.md, function (_a) {
|
|
6539
6783
|
var $clickable = _a.$clickable;
|
|
6540
|
-
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(tokensData.semantic.color.background
|
|
6784
|
+
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(tokensData.semantic.color.background.subtle, ";\n }\n \n &:active {\n background-color: ").concat(tokensData.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n outline-offset: -2px;\n }\n ");
|
|
6541
6785
|
});
|
|
6542
6786
|
var StyledAvatarSection = styled.div.withConfig({
|
|
6543
6787
|
displayName: "TransactionListItem__StyledAvatarSection",
|
|
@@ -6546,7 +6790,7 @@ var StyledAvatarSection = styled.div.withConfig({
|
|
|
6546
6790
|
var StyledMainContent = styled.div.withConfig({
|
|
6547
6791
|
displayName: "TransactionListItem__StyledMainContent",
|
|
6548
6792
|
componentId: "sc-7yunm0-2"
|
|
6549
|
-
})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap:
|
|
6793
|
+
})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: none;\n"], ["\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: none;\n"])));
|
|
6550
6794
|
var StyledTopRow = styled.div.withConfig({
|
|
6551
6795
|
displayName: "TransactionListItem__StyledTopRow",
|
|
6552
6796
|
componentId: "sc-7yunm0-3"
|
|
@@ -6554,7 +6798,7 @@ var StyledTopRow = styled.div.withConfig({
|
|
|
6554
6798
|
var StyledMerchantSection = styled.div.withConfig({
|
|
6555
6799
|
displayName: "TransactionListItem__StyledMerchantSection",
|
|
6556
6800
|
componentId: "sc-7yunm0-4"
|
|
6557
|
-
})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n min-width: 0;\n flex: 1;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n min-width: 0;\n flex: 1;\n"])), tokensData.semantic.spacing.layout.
|
|
6801
|
+
})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n min-width: 0;\n flex: 1;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n min-width: 0;\n flex: 1;\n"])), tokensData.semantic.spacing.layout.sm);
|
|
6558
6802
|
var StyledBottomRow = styled.div.withConfig({
|
|
6559
6803
|
displayName: "TransactionListItem__StyledBottomRow",
|
|
6560
6804
|
componentId: "sc-7yunm0-5"
|
|
@@ -6571,21 +6815,40 @@ var StyledTruncatedText = styled.span.withConfig({
|
|
|
6571
6815
|
displayName: "TransactionListItem__StyledTruncatedText",
|
|
6572
6816
|
componentId: "sc-7yunm0-8"
|
|
6573
6817
|
})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"
|
|
6574
|
-
// Map categories to
|
|
6818
|
+
// Map categories to CategoryBadge configurations
|
|
6575
6819
|
])));
|
|
6576
|
-
// Map categories to
|
|
6577
|
-
var
|
|
6578
|
-
shopping:
|
|
6579
|
-
|
|
6580
|
-
|
|
6581
|
-
|
|
6582
|
-
|
|
6583
|
-
|
|
6584
|
-
|
|
6585
|
-
|
|
6586
|
-
|
|
6587
|
-
|
|
6588
|
-
|
|
6820
|
+
// Map categories to CategoryBadge configurations
|
|
6821
|
+
var categoryConfig = {
|
|
6822
|
+
shopping: {
|
|
6823
|
+
color: 'purple',
|
|
6824
|
+
icon: 'paper',
|
|
6825
|
+
label: 'Shopping'
|
|
6826
|
+
},
|
|
6827
|
+
dining: {
|
|
6828
|
+
color: 'orange',
|
|
6829
|
+
icon: 'paper',
|
|
6830
|
+
label: 'Dining'
|
|
6831
|
+
},
|
|
6832
|
+
transport: {
|
|
6833
|
+
color: 'blue',
|
|
6834
|
+
icon: 'paper',
|
|
6835
|
+
label: 'Transport'
|
|
6836
|
+
},
|
|
6837
|
+
entertainment: {
|
|
6838
|
+
color: 'pink',
|
|
6839
|
+
icon: 'star',
|
|
6840
|
+
label: 'Entertainment'
|
|
6841
|
+
},
|
|
6842
|
+
bills: {
|
|
6843
|
+
color: 'red',
|
|
6844
|
+
icon: 'paper',
|
|
6845
|
+
label: 'Bills'
|
|
6846
|
+
},
|
|
6847
|
+
other: {
|
|
6848
|
+
color: 'gray',
|
|
6849
|
+
icon: 'paper',
|
|
6850
|
+
label: 'Other'
|
|
6851
|
+
}
|
|
6589
6852
|
};
|
|
6590
6853
|
// Map status to badge variant
|
|
6591
6854
|
var statusToBadgeVariant = {
|
|
@@ -6622,8 +6885,8 @@ var TransactionListItem = function TransactionListItem(_a) {
|
|
|
6622
6885
|
var isClickable = !!onClick;
|
|
6623
6886
|
// Determine amount variant
|
|
6624
6887
|
var amountVariant = amount > 0 ? 'positive' : amount < 0 ? 'negative' : 'default';
|
|
6625
|
-
// Get category
|
|
6626
|
-
var
|
|
6888
|
+
// Get category configuration
|
|
6889
|
+
var categoryData = category ? categoryConfig[category] : undefined;
|
|
6627
6890
|
// Get badge variant from status
|
|
6628
6891
|
var badgeVariant = statusToBadgeVariant[status];
|
|
6629
6892
|
var handleClick = function handleClick() {
|
|
@@ -6637,71 +6900,95 @@ var TransactionListItem = function TransactionListItem(_a) {
|
|
|
6637
6900
|
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
6638
6901
|
}
|
|
6639
6902
|
};
|
|
6640
|
-
return
|
|
6641
|
-
$clickable: isClickable,
|
|
6903
|
+
return jsxRuntime.jsxs(StyledContainer, {
|
|
6904
|
+
"$clickable": isClickable,
|
|
6642
6905
|
onClick: handleClick,
|
|
6643
6906
|
onKeyDown: handleKeyDown,
|
|
6644
6907
|
tabIndex: isClickable ? 0 : undefined,
|
|
6645
6908
|
role: isClickable ? 'button' : undefined,
|
|
6646
6909
|
"aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)) : undefined,
|
|
6647
|
-
"data-testid": dataTestId
|
|
6648
|
-
|
|
6649
|
-
|
|
6650
|
-
|
|
6651
|
-
|
|
6652
|
-
|
|
6653
|
-
|
|
6654
|
-
|
|
6655
|
-
|
|
6656
|
-
|
|
6657
|
-
|
|
6658
|
-
|
|
6659
|
-
|
|
6660
|
-
|
|
6661
|
-
|
|
6662
|
-
|
|
6663
|
-
|
|
6664
|
-
|
|
6665
|
-
|
|
6666
|
-
|
|
6667
|
-
|
|
6668
|
-
|
|
6669
|
-
|
|
6670
|
-
|
|
6671
|
-
|
|
6672
|
-
|
|
6673
|
-
|
|
6674
|
-
|
|
6675
|
-
|
|
6676
|
-
|
|
6677
|
-
|
|
6678
|
-
|
|
6679
|
-
|
|
6680
|
-
|
|
6681
|
-
|
|
6682
|
-
|
|
6683
|
-
|
|
6684
|
-
|
|
6685
|
-
|
|
6686
|
-
|
|
6687
|
-
|
|
6688
|
-
|
|
6689
|
-
|
|
6690
|
-
|
|
6691
|
-
|
|
6692
|
-
|
|
6693
|
-
|
|
6694
|
-
|
|
6695
|
-
|
|
6696
|
-
|
|
6697
|
-
|
|
6698
|
-
|
|
6699
|
-
|
|
6700
|
-
|
|
6910
|
+
"data-testid": dataTestId,
|
|
6911
|
+
children: [jsxRuntime.jsx(StyledAvatarSection, {
|
|
6912
|
+
children: status === 'pending' ? jsxRuntime.jsx(Badge, {
|
|
6913
|
+
variant: badgeVariant,
|
|
6914
|
+
dot: true,
|
|
6915
|
+
"aria-label": "Pending transaction",
|
|
6916
|
+
children: jsxRuntime.jsx(Avatar, {
|
|
6917
|
+
name: merchant,
|
|
6918
|
+
picture: merchantLogo,
|
|
6919
|
+
size: "md"
|
|
6920
|
+
})
|
|
6921
|
+
}) : jsxRuntime.jsx(Avatar, {
|
|
6922
|
+
name: merchant,
|
|
6923
|
+
picture: merchantLogo,
|
|
6924
|
+
size: "md"
|
|
6925
|
+
})
|
|
6926
|
+
}), jsxRuntime.jsxs(StyledMainContent, {
|
|
6927
|
+
children: [jsxRuntime.jsxs(StyledTopRow, {
|
|
6928
|
+
children: [jsxRuntime.jsxs(StyledMerchantSection, {
|
|
6929
|
+
children: [jsxRuntime.jsx(StyledTruncatedText, {
|
|
6930
|
+
children: jsxRuntime.jsx(Typography, {
|
|
6931
|
+
variant: "body",
|
|
6932
|
+
children: merchant
|
|
6933
|
+
})
|
|
6934
|
+
}), categoryData && jsxRuntime.jsx(CategoryBadge, {
|
|
6935
|
+
color: categoryData.color,
|
|
6936
|
+
icon: categoryData.icon,
|
|
6937
|
+
size: "small",
|
|
6938
|
+
variant: "minimal",
|
|
6939
|
+
"aria-label": "Category: ".concat(categoryData.label),
|
|
6940
|
+
children: categoryData.label
|
|
6941
|
+
}), status === 'failed' && jsxRuntime.jsx(Badge, {
|
|
6942
|
+
variant: "error",
|
|
6943
|
+
dot: true,
|
|
6944
|
+
"aria-label": "Failed transaction",
|
|
6945
|
+
children: jsxRuntime.jsx("span", {})
|
|
6946
|
+
})]
|
|
6947
|
+
}), jsxRuntime.jsx(MoneyDisplay, {
|
|
6948
|
+
amount: amount,
|
|
6949
|
+
currency: currency,
|
|
6950
|
+
variant: amountVariant,
|
|
6951
|
+
size: "medium",
|
|
6952
|
+
weight: "medium",
|
|
6953
|
+
showSign: true,
|
|
6954
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-amount") : undefined
|
|
6955
|
+
})]
|
|
6956
|
+
}), jsxRuntime.jsxs(StyledBottomRow, {
|
|
6957
|
+
children: [jsxRuntime.jsxs(StyledMetadata, {
|
|
6958
|
+
children: [jsxRuntime.jsx(DateFormatter, {
|
|
6959
|
+
dateString: typeof date === 'string' ? date : date.toISOString(),
|
|
6960
|
+
mode: "smart",
|
|
6961
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
|
|
6962
|
+
}), description && jsxRuntime.jsx(StyledTruncatedText, {
|
|
6963
|
+
children: jsxRuntime.jsxs(Typography, {
|
|
6964
|
+
variant: "small",
|
|
6965
|
+
color: "subdued",
|
|
6966
|
+
children: ["\u2022 ", description]
|
|
6967
|
+
})
|
|
6968
|
+
})]
|
|
6969
|
+
}), (hasReceipt || hasNote) && jsxRuntime.jsxs(StyledIconIndicator, {
|
|
6970
|
+
children: [hasReceipt && jsxRuntime.jsx("span", {
|
|
6971
|
+
"aria-label": "Has receipt",
|
|
6972
|
+
role: "img",
|
|
6973
|
+
children: jsxRuntime.jsx(Icon, {
|
|
6974
|
+
name: "fileDocSearch",
|
|
6975
|
+
size: "xs"
|
|
6976
|
+
})
|
|
6977
|
+
}), hasNote && jsxRuntime.jsx("span", {
|
|
6978
|
+
"aria-label": "Has note",
|
|
6979
|
+
role: "img",
|
|
6980
|
+
children: jsxRuntime.jsx(Icon, {
|
|
6981
|
+
name: "paper",
|
|
6982
|
+
size: "xs"
|
|
6983
|
+
})
|
|
6984
|
+
})]
|
|
6985
|
+
})]
|
|
6986
|
+
})]
|
|
6987
|
+
})]
|
|
6988
|
+
});
|
|
6701
6989
|
};
|
|
6702
6990
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1;
|
|
6703
6991
|
|
|
6704
|
-
React.createElement;
|
|
6705
6992
|
// Breakpoints using base tokens
|
|
6706
6993
|
var breakpoints = {
|
|
6707
6994
|
xs: tokensData.base.breakpoint.xs,
|
|
@@ -6743,13 +7030,14 @@ var Grid = function Grid(_a) {
|
|
|
6743
7030
|
gapY = _a.gapY,
|
|
6744
7031
|
className = _a.className,
|
|
6745
7032
|
children = _a.children;
|
|
6746
|
-
return
|
|
6747
|
-
$cols: cols,
|
|
6748
|
-
$gap: gap ? tokensData.base.spacing[gap] : undefined,
|
|
6749
|
-
$gapX: gapX ? tokensData.base.spacing[gapX] : undefined,
|
|
6750
|
-
$gapY: gapY ? tokensData.base.spacing[gapY] : undefined,
|
|
6751
|
-
className: className
|
|
6752
|
-
|
|
7033
|
+
return jsxRuntime.jsx(GridContainer, {
|
|
7034
|
+
"$cols": cols,
|
|
7035
|
+
"$gap": gap ? tokensData.base.spacing[gap] : undefined,
|
|
7036
|
+
"$gapX": gapX ? tokensData.base.spacing[gapX] : undefined,
|
|
7037
|
+
"$gapY": gapY ? tokensData.base.spacing[gapY] : undefined,
|
|
7038
|
+
className: className,
|
|
7039
|
+
children: children
|
|
7040
|
+
});
|
|
6753
7041
|
};
|
|
6754
7042
|
var GridColContainer = styled.div.withConfig({
|
|
6755
7043
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -6791,19 +7079,20 @@ var GridCol = function GridCol(_a) {
|
|
|
6791
7079
|
orderXl = _a.orderXl,
|
|
6792
7080
|
className = _a.className,
|
|
6793
7081
|
children = _a.children;
|
|
6794
|
-
return
|
|
6795
|
-
$span: span,
|
|
6796
|
-
$spanSm: spanSm,
|
|
6797
|
-
$spanMd: spanMd,
|
|
6798
|
-
$spanLg: spanLg,
|
|
6799
|
-
$spanXl: spanXl,
|
|
6800
|
-
$order: order,
|
|
6801
|
-
$orderSm: orderSm,
|
|
6802
|
-
$orderMd: orderMd,
|
|
6803
|
-
$orderLg: orderLg,
|
|
6804
|
-
$orderXl: orderXl,
|
|
6805
|
-
className: className
|
|
6806
|
-
|
|
7082
|
+
return jsxRuntime.jsx(GridColContainer, {
|
|
7083
|
+
"$span": span,
|
|
7084
|
+
"$spanSm": spanSm,
|
|
7085
|
+
"$spanMd": spanMd,
|
|
7086
|
+
"$spanLg": spanLg,
|
|
7087
|
+
"$spanXl": spanXl,
|
|
7088
|
+
"$order": order,
|
|
7089
|
+
"$orderSm": orderSm,
|
|
7090
|
+
"$orderMd": orderMd,
|
|
7091
|
+
"$orderLg": orderLg,
|
|
7092
|
+
"$orderXl": orderXl,
|
|
7093
|
+
className: className,
|
|
7094
|
+
children: children
|
|
7095
|
+
});
|
|
6807
7096
|
};
|
|
6808
7097
|
var ResponsiveGridContainer = styled.div.withConfig({
|
|
6809
7098
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -6875,29 +7164,30 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
|
|
|
6875
7164
|
gapYXl = _a.gapYXl,
|
|
6876
7165
|
className = _a.className,
|
|
6877
7166
|
children = _a.children;
|
|
6878
|
-
return
|
|
6879
|
-
$cols: cols,
|
|
6880
|
-
$colsSm: colsSm,
|
|
6881
|
-
$colsMd: colsMd,
|
|
6882
|
-
$colsLg: colsLg,
|
|
6883
|
-
$colsXl: colsXl,
|
|
6884
|
-
$gap: gap ? tokensData.base.spacing[gap] : undefined,
|
|
6885
|
-
$gapSm: gapSm ? tokensData.base.spacing[gapSm] : undefined,
|
|
6886
|
-
$gapMd: gapMd ? tokensData.base.spacing[gapMd] : undefined,
|
|
6887
|
-
$gapLg: gapLg ? tokensData.base.spacing[gapLg] : undefined,
|
|
6888
|
-
$gapXl: gapXl ? tokensData.base.spacing[gapXl] : undefined,
|
|
6889
|
-
$gapX: gapX ? tokensData.base.spacing[gapX] : undefined,
|
|
6890
|
-
$gapXSm: gapXSm ? tokensData.base.spacing[gapXSm] : undefined,
|
|
6891
|
-
$gapXMd: gapXMd ? tokensData.base.spacing[gapXMd] : undefined,
|
|
6892
|
-
$gapXLg: gapXLg ? tokensData.base.spacing[gapXLg] : undefined,
|
|
6893
|
-
$gapXXl: gapXXl ? tokensData.base.spacing[gapXXl] : undefined,
|
|
6894
|
-
$gapY: gapY ? tokensData.base.spacing[gapY] : undefined,
|
|
6895
|
-
$gapYSm: gapYSm ? tokensData.base.spacing[gapYSm] : undefined,
|
|
6896
|
-
$gapYMd: gapYMd ? tokensData.base.spacing[gapYMd] : undefined,
|
|
6897
|
-
$gapYLg: gapYLg ? tokensData.base.spacing[gapYLg] : undefined,
|
|
6898
|
-
$gapYXl: gapYXl ? tokensData.base.spacing[gapYXl] : undefined,
|
|
6899
|
-
className: className
|
|
6900
|
-
|
|
7167
|
+
return jsxRuntime.jsx(ResponsiveGridContainer, {
|
|
7168
|
+
"$cols": cols,
|
|
7169
|
+
"$colsSm": colsSm,
|
|
7170
|
+
"$colsMd": colsMd,
|
|
7171
|
+
"$colsLg": colsLg,
|
|
7172
|
+
"$colsXl": colsXl,
|
|
7173
|
+
"$gap": gap ? tokensData.base.spacing[gap] : undefined,
|
|
7174
|
+
"$gapSm": gapSm ? tokensData.base.spacing[gapSm] : undefined,
|
|
7175
|
+
"$gapMd": gapMd ? tokensData.base.spacing[gapMd] : undefined,
|
|
7176
|
+
"$gapLg": gapLg ? tokensData.base.spacing[gapLg] : undefined,
|
|
7177
|
+
"$gapXl": gapXl ? tokensData.base.spacing[gapXl] : undefined,
|
|
7178
|
+
"$gapX": gapX ? tokensData.base.spacing[gapX] : undefined,
|
|
7179
|
+
"$gapXSm": gapXSm ? tokensData.base.spacing[gapXSm] : undefined,
|
|
7180
|
+
"$gapXMd": gapXMd ? tokensData.base.spacing[gapXMd] : undefined,
|
|
7181
|
+
"$gapXLg": gapXLg ? tokensData.base.spacing[gapXLg] : undefined,
|
|
7182
|
+
"$gapXXl": gapXXl ? tokensData.base.spacing[gapXXl] : undefined,
|
|
7183
|
+
"$gapY": gapY ? tokensData.base.spacing[gapY] : undefined,
|
|
7184
|
+
"$gapYSm": gapYSm ? tokensData.base.spacing[gapYSm] : undefined,
|
|
7185
|
+
"$gapYMd": gapYMd ? tokensData.base.spacing[gapYMd] : undefined,
|
|
7186
|
+
"$gapYLg": gapYLg ? tokensData.base.spacing[gapYLg] : undefined,
|
|
7187
|
+
"$gapYXl": gapYXl ? tokensData.base.spacing[gapYXl] : undefined,
|
|
7188
|
+
className: className,
|
|
7189
|
+
children: children
|
|
7190
|
+
});
|
|
6901
7191
|
};
|
|
6902
7192
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
|
|
6903
7193
|
|