@common-origin/design-system 2.15.0 → 2.16.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/README.md +1 -1
- package/dist/client.esm.js +830 -549
- package/dist/client.esm.js.map +1 -1
- package/dist/client.js +833 -548
- package/dist/client.js.map +1 -1
- package/dist/components/atoms/Button/Button.d.ts +13 -1
- package/dist/components/atoms/CategoryBadge/CategoryBadge.d.ts +12 -52
- package/dist/components/atoms/CategoryBadge/index.d.ts +1 -1
- package/dist/components/atoms/CategoryLabel/CategoryLabel.d.ts +69 -0
- package/dist/components/atoms/CategoryLabel/index.d.ts +2 -0
- package/dist/components/atoms/Chip/BooleanChip.d.ts +6 -1
- package/dist/components/atoms/Chip/Chip.d.ts +17 -12
- package/dist/components/atoms/Chip/FilterChip.d.ts +10 -24
- package/dist/components/atoms/Chip/InputChip.d.ts +27 -0
- package/dist/components/atoms/Chip/index.d.ts +1 -0
- package/dist/components/atoms/Chip/shared/types.d.ts +15 -1
- package/dist/components/atoms/Chip/shared/utils.d.ts +1 -85
- package/dist/components/atoms/StatusBadge/StatusBadge.d.ts +9 -55
- package/dist/components/atoms/StatusBadge/index.d.ts +1 -1
- package/dist/components/atoms/StatusLabel/StatusLabel.d.ts +17 -0
- package/dist/components/atoms/StatusLabel/StatusLabelBase.d.ts +49 -0
- package/dist/components/atoms/StatusLabel/index.d.ts +2 -0
- package/dist/components/atoms/Tag/Tag.d.ts +5 -0
- package/dist/components/atoms/index.d.ts +2 -0
- package/dist/components/molecules/Alert/Alert.d.ts +15 -2
- package/dist/components/molecules/InlineAlert/InlineAlert.d.ts +54 -0
- package/dist/components/molecules/InlineAlert/index.d.ts +2 -0
- package/dist/components/molecules/Modal/Modal.d.ts +6 -2
- package/dist/components/molecules/TabBar/TabBar.d.ts +8 -5
- package/dist/components/molecules/index.d.ts +1 -0
- package/dist/data.esm.js +89 -11
- package/dist/data.esm.js.map +1 -1
- package/dist/data.js +89 -11
- package/dist/data.js.map +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/dist/styles/tokens.json +89 -11
- package/dist/tokens/index.esm.js +89 -11
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +89 -11
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/types/tokens.d.ts +81 -3
- package/dist/tokens.css +769 -0
- package/dist/tokens.css.d.ts +4 -0
- package/dist/types/tokens.d.ts +81 -3
- package/package.json +18 -6
package/dist/client.js
CHANGED
|
@@ -111,44 +111,44 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
111
111
|
};
|
|
112
112
|
|
|
113
113
|
// Destructure tokens
|
|
114
|
-
var semantic$
|
|
114
|
+
var semantic$j = data.tokensJson.semantic;
|
|
115
115
|
var initials = data.tokensJson.component.avatar.initials;
|
|
116
|
-
var color$
|
|
117
|
-
size$
|
|
118
|
-
border$
|
|
119
|
-
var radius$5 = border$
|
|
116
|
+
var color$b = semantic$j.color,
|
|
117
|
+
size$2 = semantic$j.size,
|
|
118
|
+
border$b = semantic$j.border;
|
|
119
|
+
var radius$5 = border$b.radius;
|
|
120
120
|
var AvatarContainer = styled__default.default.div.withConfig({
|
|
121
121
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
122
122
|
return !prop.startsWith('$');
|
|
123
123
|
},
|
|
124
124
|
displayName: "Avatar__AvatarContainer",
|
|
125
125
|
componentId: "sc-ezn4ax-0"
|
|
126
|
-
})(templateObject_1$
|
|
126
|
+
})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n background-color: ", ";\n overflow: hidden;\n flex-shrink: 0;\n"], ["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n border-radius: ", ";\n background-color: ", ";\n overflow: hidden;\n flex-shrink: 0;\n"])), function (_a) {
|
|
127
127
|
var $size = _a.$size;
|
|
128
|
-
return size$
|
|
128
|
+
return size$2.avatar[$size];
|
|
129
129
|
}, function (_a) {
|
|
130
130
|
var $size = _a.$size;
|
|
131
|
-
return size$
|
|
132
|
-
}, radius$5.circle, color$
|
|
131
|
+
return size$2.avatar[$size];
|
|
132
|
+
}, radius$5.circle, color$b.background.surface);
|
|
133
133
|
var AvatarImage = styled__default.default.img.withConfig({
|
|
134
134
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
135
135
|
return !prop.startsWith('$');
|
|
136
136
|
},
|
|
137
137
|
displayName: "Avatar__AvatarImage",
|
|
138
138
|
componentId: "sc-ezn4ax-1"
|
|
139
|
-
})(templateObject_2$
|
|
139
|
+
})(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"])), radius$5.circle);
|
|
140
140
|
var AvatarInitials = styled__default.default.span.withConfig({
|
|
141
141
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
142
142
|
return !prop.startsWith('$');
|
|
143
143
|
},
|
|
144
144
|
displayName: "Avatar__AvatarInitials",
|
|
145
145
|
componentId: "sc-ezn4ax-2"
|
|
146
|
-
})(templateObject_3$
|
|
146
|
+
})(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n color: ", ";\n line-height: ", ";\n text-transform: uppercase;\n user-select: none;\n"], ["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n color: ", ";\n line-height: ", ";\n text-transform: uppercase;\n user-select: none;\n"
|
|
147
147
|
// Helper function to get initials from name
|
|
148
148
|
])), initials.fontFamily, initials.fontWeight, function (_a) {
|
|
149
149
|
var $size = _a.$size;
|
|
150
150
|
return initials.fontSize[$size];
|
|
151
|
-
}, color$
|
|
151
|
+
}, color$b.text["default"], initials.lineHeight);
|
|
152
152
|
// Helper function to get initials from name
|
|
153
153
|
var getInitials = function getInitials(name) {
|
|
154
154
|
return name.split(' ').map(function (word) {
|
|
@@ -202,7 +202,7 @@ var Avatar = function Avatar(_a) {
|
|
|
202
202
|
})
|
|
203
203
|
}));
|
|
204
204
|
};
|
|
205
|
-
var templateObject_1$
|
|
205
|
+
var templateObject_1$M, templateObject_2$y, templateObject_3$v;
|
|
206
206
|
|
|
207
207
|
// Breakpoints from the semantic tokens (decision 0014)
|
|
208
208
|
var breakpoints$1 = {
|
|
@@ -227,7 +227,7 @@ var media$1 = {
|
|
|
227
227
|
var reducedMotion = '@media (prefers-reduced-motion: reduce)';
|
|
228
228
|
// No `from` keyframe: the fade starts from the element's current opacity, including a
|
|
229
229
|
// still-running entrance, so closing mid-entrance doesn't jump back to fully visible.
|
|
230
|
-
var fadeOut$1 = styled.keyframes(templateObject_1$
|
|
230
|
+
var fadeOut$1 = styled.keyframes(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n to { opacity: 0; }\n"], ["\n to { opacity: 0; }\n"
|
|
231
231
|
// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of
|
|
232
232
|
// the element's `animation` declarations while it exits: the entrance stays in the list,
|
|
233
233
|
// so it isn't restarted, and the fade runs on top of it. A fade is already the
|
|
@@ -239,51 +239,51 @@ var fadeOut$1 = styled.keyframes(templateObject_1$K || (templateObject_1$K = __m
|
|
|
239
239
|
// so it isn't restarted, and the fade runs on top of it. A fade is already the
|
|
240
240
|
// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
|
|
241
241
|
// still catches clicks (so they can't reach the page behind it) and the panel is inert.
|
|
242
|
-
var exitAnimation = styled.css(templateObject_2$
|
|
242
|
+
var exitAnimation = styled.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
|
|
243
243
|
// Content for screen readers only. The 1px size and -1px margin are part of the standard
|
|
244
244
|
// visually-hidden technique, not design values, so they aren't tokens.
|
|
245
245
|
])), fadeOut$1, data.tokensJson.semantic.motion.duration.fast, data.tokensJson.semantic.motion.easing.easeOut);
|
|
246
246
|
// Content for screen readers only. The 1px size and -1px margin are part of the standard
|
|
247
247
|
// visually-hidden technique, not design values, so they aren't tokens.
|
|
248
|
-
var visuallyHidden = styled.css(templateObject_3$
|
|
249
|
-
var templateObject_1$
|
|
248
|
+
var visuallyHidden = styled.css(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n"], ["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n"])));
|
|
249
|
+
var templateObject_1$L, templateObject_2$x, templateObject_3$u;
|
|
250
250
|
|
|
251
251
|
var _a$b = data.tokensJson.semantic,
|
|
252
|
-
typography$
|
|
253
|
-
color$
|
|
252
|
+
typography$2 = _a$b.typography,
|
|
253
|
+
color$a = _a$b.color,
|
|
254
254
|
letterSpacing = _a$b.letterSpacing;
|
|
255
255
|
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
256
256
|
var styles = {
|
|
257
|
-
display: "font: ".concat(typography$
|
|
258
|
-
h1: "font: ".concat(typography$
|
|
259
|
-
h2: "font: ".concat(typography$
|
|
260
|
-
h3: "font: ".concat(typography$
|
|
261
|
-
h4: "font: ".concat(typography$
|
|
262
|
-
h5: "font: ".concat(typography$
|
|
263
|
-
h6: "font: ".concat(typography$
|
|
264
|
-
subtitle: "font: ".concat(typography$
|
|
265
|
-
body: "font: ".concat(typography$
|
|
266
|
-
small: "font: ".concat(typography$
|
|
267
|
-
overline: "font: ".concat(typography$
|
|
268
|
-
caption: "font: ".concat(typography$
|
|
269
|
-
button1: "font: ".concat(typography$
|
|
270
|
-
button2: "font: ".concat(typography$
|
|
271
|
-
button3: "font: ".concat(typography$
|
|
272
|
-
label: "font: ".concat(typography$
|
|
257
|
+
display: "font: ".concat(typography$2.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
|
|
258
|
+
h1: "font: ".concat(typography$2.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
|
|
259
|
+
h2: "font: ".concat(typography$2.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
|
|
260
|
+
h3: "font: ".concat(typography$2.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
|
|
261
|
+
h4: "font: ".concat(typography$2.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
|
|
262
|
+
h5: "font: ".concat(typography$2.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
|
|
263
|
+
h6: "font: ".concat(typography$2.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
|
|
264
|
+
subtitle: "font: ".concat(typography$2.subtitle, ";"),
|
|
265
|
+
body: "font: ".concat(typography$2.body, ";"),
|
|
266
|
+
small: "font: ".concat(typography$2.small, ";"),
|
|
267
|
+
overline: "font: ".concat(typography$2.overline, ";"),
|
|
268
|
+
caption: "font: ".concat(typography$2.caption, "; text-transform: uppercase;"),
|
|
269
|
+
button1: "font: ".concat(typography$2.button1, ";"),
|
|
270
|
+
button2: "font: ".concat(typography$2.button2, ";"),
|
|
271
|
+
button3: "font: ".concat(typography$2.button3, ";"),
|
|
272
|
+
label: "font: ".concat(typography$2.label, ";")
|
|
273
273
|
};
|
|
274
274
|
return styles[variant] || styles.body;
|
|
275
275
|
};
|
|
276
276
|
var getTextColor = function getTextColor(colorVariant) {
|
|
277
277
|
var colorMap = {
|
|
278
|
-
"default": color$
|
|
279
|
-
emphasis: color$
|
|
280
|
-
subdued: color$
|
|
281
|
-
inverse: color$
|
|
282
|
-
disabled: color$
|
|
283
|
-
interactive: color$
|
|
284
|
-
error: color$
|
|
285
|
-
success: color$
|
|
286
|
-
warning: color$
|
|
278
|
+
"default": color$a.text["default"],
|
|
279
|
+
emphasis: color$a.text.emphasis,
|
|
280
|
+
subdued: color$a.text.subdued,
|
|
281
|
+
inverse: color$a.text.inverse,
|
|
282
|
+
disabled: color$a.text.disabled,
|
|
283
|
+
interactive: color$a.text.interactive,
|
|
284
|
+
error: color$a.text.error,
|
|
285
|
+
success: color$a.text.success,
|
|
286
|
+
warning: color$a.text.warning
|
|
287
287
|
};
|
|
288
288
|
return colorMap[colorVariant] || colorMap["default"];
|
|
289
289
|
};
|
|
@@ -314,7 +314,7 @@ var StyledTypography = styled__default.default.span.withConfig({
|
|
|
314
314
|
},
|
|
315
315
|
displayName: "Typography__StyledTypography",
|
|
316
316
|
componentId: "sc-17mqo4k-0"
|
|
317
|
-
})(templateObject_1$
|
|
317
|
+
})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n ", "\n color: ", ";\n margin: 0;\n"], ["\n ", "\n color: ", ";\n margin: 0;\n"
|
|
318
318
|
/**
|
|
319
319
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
320
320
|
*
|
|
@@ -376,53 +376,53 @@ var Typography = function Typography(_a) {
|
|
|
376
376
|
children: children
|
|
377
377
|
});
|
|
378
378
|
};
|
|
379
|
-
var templateObject_1$
|
|
379
|
+
var templateObject_1$K;
|
|
380
380
|
|
|
381
|
-
var semantic$
|
|
382
|
-
var color$
|
|
383
|
-
border$
|
|
384
|
-
var radius$4 = border$
|
|
381
|
+
var semantic$i = data.tokensJson.semantic;
|
|
382
|
+
var color$9 = semantic$i.color,
|
|
383
|
+
border$a = semantic$i.border;
|
|
384
|
+
var radius$4 = border$a.radius;
|
|
385
385
|
var _a$a = data.tokensJson.component.badge,
|
|
386
386
|
dot = _a$a.dot,
|
|
387
387
|
count = _a$a.count,
|
|
388
388
|
ring = _a$a.ring;
|
|
389
|
-
var scaleIn$2 = styled.keyframes(templateObject_1$
|
|
389
|
+
var scaleIn$2 = styled.keyframes(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
390
390
|
var BadgeWrapper = styled__default.default.span.withConfig({
|
|
391
391
|
displayName: "Badge__BadgeWrapper",
|
|
392
392
|
componentId: "sc-tjz4pp-0"
|
|
393
|
-
})(templateObject_2$
|
|
393
|
+
})(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n flex-shrink: 0;\n"], ["\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n flex-shrink: 0;\n"])));
|
|
394
394
|
var BadgeIndicator = styled__default.default.span.withConfig({
|
|
395
395
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
396
396
|
return !prop.startsWith('$');
|
|
397
397
|
},
|
|
398
398
|
displayName: "Badge__BadgeIndicator",
|
|
399
399
|
componentId: "sc-tjz4pp-1"
|
|
400
|
-
})(templateObject_3$
|
|
400
|
+
})(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: ", ";\n align-items: center;\n justify-content: center;\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n line-height: ", ";\n white-space: nowrap;\n box-shadow: 0 0 0 ", " ", ";\n animation: ", " ", " ", ";\n\n ", " {\n animation: none;\n }\n \n ", "\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: ", ";\n align-items: center;\n justify-content: center;\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n line-height: ", ";\n white-space: nowrap;\n box-shadow: 0 0 0 ", " ", ";\n animation: ", " ", " ", ";\n\n ", " {\n animation: none;\n }\n \n ", "\n"])), function (props) {
|
|
401
401
|
return props.$isVisible ? 'flex' : 'none';
|
|
402
402
|
}, function (props) {
|
|
403
403
|
return props.$isDot ? dot.size : count.minWidth;
|
|
404
404
|
}, function (props) {
|
|
405
405
|
return props.$isDot ? dot.size : count.height;
|
|
406
406
|
}, function (props) {
|
|
407
|
-
return props.$isDot ? '0' : "0 ".concat(
|
|
408
|
-
}, radius$4.circle, count.lineHeight, ring.width, color$
|
|
407
|
+
return props.$isDot ? '0' : "0 ".concat(semantic$i.spacing.component.xs);
|
|
408
|
+
}, radius$4.circle, count.lineHeight, ring.width, color$9.background["default"], scaleIn$2, semantic$i.motion.duration.normal, semantic$i.motion.easing.easeOut, reducedMotion, function (props) {
|
|
409
409
|
switch (props.$variant) {
|
|
410
410
|
case 'primary':
|
|
411
|
-
return "\n background-color: ".concat(color$
|
|
411
|
+
return "\n background-color: ".concat(color$9.background.interactive, ";\n color: ").concat(color$9.text.inverse, ";\n ");
|
|
412
412
|
case 'error':
|
|
413
|
-
return "\n background-color: ".concat(color$
|
|
413
|
+
return "\n background-color: ".concat(color$9.background.error, ";\n color: ").concat(color$9.text.inverse, ";\n ");
|
|
414
414
|
case 'warning':
|
|
415
|
-
return "\n background-color: ".concat(color$
|
|
415
|
+
return "\n background-color: ".concat(color$9.background.warning, ";\n color: ").concat(color$9.text.inverse, ";\n ");
|
|
416
416
|
case 'success':
|
|
417
|
-
return "\n background-color: ".concat(color$
|
|
417
|
+
return "\n background-color: ".concat(color$9.background.success, ";\n color: ").concat(color$9.text.inverse, ";\n ");
|
|
418
418
|
default:
|
|
419
|
-
return "\n background-color: ".concat(color$
|
|
419
|
+
return "\n background-color: ".concat(color$9.background.emphasis, ";\n color: ").concat(color$9.text.inverse, ";\n ");
|
|
420
420
|
}
|
|
421
421
|
});
|
|
422
422
|
var ScreenReaderOnly$1 = styled__default.default.span.withConfig({
|
|
423
423
|
displayName: "Badge__ScreenReaderOnly",
|
|
424
424
|
componentId: "sc-tjz4pp-2"
|
|
425
|
-
})(templateObject_4$
|
|
425
|
+
})(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), visuallyHidden);
|
|
426
426
|
var Badge = function Badge(_a) {
|
|
427
427
|
var children = _a.children,
|
|
428
428
|
_b = _a.count,
|
|
@@ -460,7 +460,7 @@ var Badge = function Badge(_a) {
|
|
|
460
460
|
})]
|
|
461
461
|
});
|
|
462
462
|
};
|
|
463
|
-
var templateObject_1$
|
|
463
|
+
var templateObject_1$J, templateObject_2$w, templateObject_3$t, templateObject_4$n;
|
|
464
464
|
|
|
465
465
|
var StyledBox = styled__default.default.div.withConfig({
|
|
466
466
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -471,13 +471,13 @@ var StyledBox = styled__default.default.div.withConfig({
|
|
|
471
471
|
})(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 // Elevation (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 // Elevation (shadow)\n ", "\n \n // Cursor\n ", "\n \n // Transition\n ", "\n \n // Hover states\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"
|
|
472
472
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
473
473
|
])), function (props) {
|
|
474
|
-
return props.$display && styled.css(templateObject_1$
|
|
474
|
+
return props.$display && styled.css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
475
475
|
}, function (props) {
|
|
476
|
-
return props.$flexDirection && styled.css(templateObject_2$
|
|
476
|
+
return props.$flexDirection && styled.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
477
477
|
}, function (props) {
|
|
478
|
-
return props.$justifyContent && styled.css(templateObject_3$
|
|
478
|
+
return props.$justifyContent && styled.css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
479
479
|
}, function (props) {
|
|
480
|
-
return props.$alignItems && styled.css(templateObject_4$
|
|
480
|
+
return props.$alignItems && styled.css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
481
481
|
}, function (props) {
|
|
482
482
|
return props.$flexWrap && styled.css(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
483
483
|
}, function (props) {
|
|
@@ -495,7 +495,7 @@ var StyledBox = styled__default.default.div.withConfig({
|
|
|
495
495
|
}, function (props) {
|
|
496
496
|
return props.$mx && styled.css(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n "], ["\n margin-left: ", ";\n margin-right: ", ";\n "])), data.tokensJson.semantic.spacing.layout[props.$mx], data.tokensJson.semantic.spacing.layout[props.$mx]);
|
|
497
497
|
}, function (props) {
|
|
498
|
-
return props.$my && styled.css(templateObject_13$
|
|
498
|
+
return props.$my && styled.css(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), data.tokensJson.semantic.spacing.layout[props.$my], data.tokensJson.semantic.spacing.layout[props.$my]);
|
|
499
499
|
}, function (props) {
|
|
500
500
|
return props.$p && styled.css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$p]);
|
|
501
501
|
}, function (props) {
|
|
@@ -695,7 +695,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
695
695
|
}));
|
|
696
696
|
};
|
|
697
697
|
var Box = BoxTransform;
|
|
698
|
-
var templateObject_1$
|
|
698
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$s, templateObject_4$m, templateObject_5$h, templateObject_6$d, templateObject_7$b, templateObject_8$8, templateObject_9$6, templateObject_10$4, templateObject_11$4, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, 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;
|
|
699
699
|
|
|
700
700
|
var IconStyled = styled__default.default.span.withConfig({
|
|
701
701
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -703,7 +703,7 @@ var IconStyled = styled__default.default.span.withConfig({
|
|
|
703
703
|
},
|
|
704
704
|
displayName: "Icon__IconStyled",
|
|
705
705
|
componentId: "sc-1105czq-0"
|
|
706
|
-
})(templateObject_1$
|
|
706
|
+
})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n \n svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n \n /* Use semantic icon colors */\n color: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n \n svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n \n /* Use semantic icon colors */\n color: ", ";\n"])), function (_a) {
|
|
707
707
|
var $size = _a.$size;
|
|
708
708
|
return data.tokensJson.semantic.size.icon[$size];
|
|
709
709
|
}, function (_a) {
|
|
@@ -769,12 +769,14 @@ var Icon = function Icon(_a) {
|
|
|
769
769
|
})
|
|
770
770
|
});
|
|
771
771
|
};
|
|
772
|
-
var templateObject_1$
|
|
772
|
+
var templateObject_1$H;
|
|
773
773
|
|
|
774
774
|
var button$1 = data.tokensJson.component.button,
|
|
775
|
-
semantic$
|
|
775
|
+
semantic$h = data.tokensJson.semantic;
|
|
776
|
+
// Padding comes from the semantic spacing scale: no component spacing tokens (decision 0022)
|
|
777
|
+
var spacing$a = semantic$h.spacing.component;
|
|
776
778
|
// Base styles shared between button and link
|
|
777
|
-
var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(data.tokensJson.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic$
|
|
779
|
+
var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(data.tokensJson.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic$h.motion.hover, ";\n white-space: nowrap;\n user-select: none;\n \n &:focus {\n outline: ").concat(button$1.focus.outline, ";\n outline-offset: ").concat(semantic$h.border.focusOffset, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n");
|
|
778
780
|
// Dynamic variant styles using component tokens
|
|
779
781
|
var getVariantStyles$1 = function getVariantStyles(_a) {
|
|
780
782
|
var $variant = _a.$variant;
|
|
@@ -803,6 +805,15 @@ var getVariantStyles$1 = function getVariantStyles(_a) {
|
|
|
803
805
|
disabledBg: button$1.variants.naked.disabled.backgroundColor,
|
|
804
806
|
disabledText: button$1.variants.naked.disabled.textColor
|
|
805
807
|
},
|
|
808
|
+
accent: {
|
|
809
|
+
bg: button$1.variants.accent.backgroundColor,
|
|
810
|
+
text: button$1.variants.accent.textColor,
|
|
811
|
+
hoverBg: button$1.variants.accent.hover.backgroundColor,
|
|
812
|
+
activeBg: button$1.variants.accent.active.backgroundColor,
|
|
813
|
+
disabledBg: button$1.variants.accent.disabled.backgroundColor,
|
|
814
|
+
disabledText: button$1.variants.accent.disabled.textColor
|
|
815
|
+
},
|
|
816
|
+
// Deprecated alias for accent; removed in 3.0
|
|
806
817
|
emphasis: {
|
|
807
818
|
bg: button$1.variants.emphasis.backgroundColor,
|
|
808
819
|
text: button$1.variants.emphasis.textColor,
|
|
@@ -828,13 +839,13 @@ var getSizeStyles$1 = function getSizeStyles(_a) {
|
|
|
828
839
|
var $size = _a.$size;
|
|
829
840
|
switch ($size) {
|
|
830
841
|
case 'small':
|
|
831
|
-
return "\n font: ".concat(button$1.sizes.small.font, ";\n padding: ").concat(
|
|
842
|
+
return "\n font: ".concat(button$1.sizes.small.font, ";\n padding: ").concat(spacing$a.sm, " ").concat(spacing$a.md, ";\n ");
|
|
832
843
|
case 'medium':
|
|
833
|
-
return "\n font: ".concat(button$1.sizes.medium.font, ";\n padding: ").concat(
|
|
844
|
+
return "\n font: ".concat(button$1.sizes.medium.font, ";\n padding: ").concat(spacing$a.sm, " ").concat(spacing$a.lg, ";\n ");
|
|
834
845
|
case 'large':
|
|
835
|
-
return "\n font: ".concat(button$1.sizes.large.font, ";\n padding: ").concat(
|
|
846
|
+
return "\n font: ".concat(button$1.sizes.large.font, ";\n padding: ").concat(spacing$a.md, " ").concat(spacing$a.lg, ";\n ");
|
|
836
847
|
default:
|
|
837
|
-
return "\n font: ".concat(button$1.sizes.large.font, ";\n padding: ").concat(
|
|
848
|
+
return "\n font: ".concat(button$1.sizes.large.font, ";\n padding: ").concat(spacing$a.md, " ").concat(spacing$a.lg, ";\n ");
|
|
838
849
|
}
|
|
839
850
|
};
|
|
840
851
|
var StyledButton = styled__default.default.button.withConfig({
|
|
@@ -843,14 +854,14 @@ var StyledButton = styled__default.default.button.withConfig({
|
|
|
843
854
|
},
|
|
844
855
|
displayName: "Button__StyledButton",
|
|
845
856
|
componentId: "sc-1eiuum9-0"
|
|
846
|
-
})(templateObject_1$
|
|
857
|
+
})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
|
|
847
858
|
var StyledLink = styled__default.default.a.withConfig({
|
|
848
859
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
849
860
|
return !prop.startsWith('$');
|
|
850
861
|
},
|
|
851
862
|
displayName: "Button__StyledLink",
|
|
852
863
|
componentId: "sc-1eiuum9-1"
|
|
853
|
-
})(templateObject_2$
|
|
864
|
+
})(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
854
865
|
// Helper function to get icon size based on button size
|
|
855
866
|
])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
|
|
856
867
|
// Helper function to get icon size based on button size
|
|
@@ -953,49 +964,46 @@ var Button = function Button(_a) {
|
|
|
953
964
|
children: renderButtonContent(children, iconName, size)
|
|
954
965
|
}));
|
|
955
966
|
};
|
|
956
|
-
var templateObject_1$
|
|
967
|
+
var templateObject_1$G, templateObject_2$u;
|
|
957
968
|
|
|
958
|
-
var semantic$
|
|
959
|
-
var color$
|
|
960
|
-
border$
|
|
961
|
-
spacing$
|
|
969
|
+
var semantic$g = data.tokensJson.semantic;
|
|
970
|
+
var color$8 = semantic$g.color,
|
|
971
|
+
border$9 = semantic$g.border,
|
|
972
|
+
spacing$9 = semantic$g.spacing;
|
|
962
973
|
var label$2 = data.tokensJson.component.badge.label;
|
|
963
|
-
var category = color$
|
|
964
|
-
var radius$3 = border$
|
|
965
|
-
var layout$4 = spacing$
|
|
966
|
-
var
|
|
974
|
+
var category = color$8.category;
|
|
975
|
+
var radius$3 = border$9.radius;
|
|
976
|
+
var layout$4 = spacing$9.layout;
|
|
977
|
+
var labelHeight$1 = semantic$g.size.label;
|
|
978
|
+
// Text on white or the -subtle fill (outlined and minimal), at least 4.5:1 (#115)
|
|
979
|
+
var categoryText = {
|
|
980
|
+
blue: category['blue-text'],
|
|
981
|
+
purple: category['purple-text'],
|
|
982
|
+
pink: category['pink-text'],
|
|
983
|
+
yellow: category['yellow-text'],
|
|
984
|
+
green: category['green-text'],
|
|
985
|
+
red: category['red-text'],
|
|
986
|
+
orange: category['orange-text'],
|
|
987
|
+
gray: category['gray-text']
|
|
988
|
+
};
|
|
989
|
+
var StyledCategoryLabel = styled__default.default.span.withConfig({
|
|
967
990
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
968
991
|
return !prop.startsWith('$');
|
|
969
992
|
},
|
|
970
|
-
displayName: "
|
|
971
|
-
componentId: "sc-
|
|
972
|
-
})(templateObject_1$
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
* A static label for categorizing content with support for 8 color options,
|
|
977
|
-
* 3 visual variants, and optional icons. Perfect for categorizing
|
|
978
|
-
* financial transactions or content types.
|
|
979
|
-
*
|
|
980
|
-
* @example
|
|
981
|
-
* ```tsx
|
|
982
|
-
* <CategoryBadge color="orange" icon="restaurant">
|
|
983
|
-
* Food & Dining
|
|
984
|
-
* </CategoryBadge>
|
|
985
|
-
*
|
|
986
|
-
* <CategoryBadge color="blue" variant="outlined" size="small">
|
|
987
|
-
* Travel
|
|
988
|
-
* </CategoryBadge>
|
|
989
|
-
* ```
|
|
990
|
-
*/])), radius$3.circle, semantic$d.border.width.thin, function (_a) {
|
|
993
|
+
displayName: "CategoryLabel__StyledCategoryLabel",
|
|
994
|
+
componentId: "sc-1jx7bjo-0"
|
|
995
|
+
})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n white-space: nowrap;\n user-select: none;\n border-style: solid;\n border-width: ", ";\n \n /* Size styles */\n height: ", ";\n padding: ", ";\n font: ", ";\n /* After the font shorthand, which would otherwise reset it */\n font-weight: ", ";\n gap: ", ";\n \n /* Variant + Color styles */\n background-color: ", ";\n \n /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n color: ", ";\n \n border-color: ", ";\n"], ["\n box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n white-space: nowrap;\n user-select: none;\n border-style: solid;\n border-width: ", ";\n \n /* Size styles */\n height: ", ";\n padding: ", ";\n font: ", ";\n /* After the font shorthand, which would otherwise reset it */\n font-weight: ", ";\n gap: ", ";\n \n /* Variant + Color styles */\n background-color: ", ";\n \n /* Outlined and minimal text uses the AA text token, not the base colour (issue 115) */\n color: ", ";\n \n border-color: ", ";\n"
|
|
996
|
+
// The visible content, hidden from assistive technology when an aria-label replaces it.
|
|
997
|
+
// display: contents keeps the root's flex layout and gap.
|
|
998
|
+
])), radius$3.circle, semantic$g.border.width.thin, function (_a) {
|
|
991
999
|
var $size = _a.$size;
|
|
992
|
-
return $size
|
|
1000
|
+
return labelHeight$1[$size];
|
|
993
1001
|
}, function (_a) {
|
|
994
1002
|
var $size = _a.$size;
|
|
995
|
-
return $size === '
|
|
1003
|
+
return $size === 'medium' ? "".concat(layout$4.xs, " ").concat(layout$4.sm) : "".concat(layout$4.sm, " ").concat(layout$4.md);
|
|
996
1004
|
}, function (_a) {
|
|
997
1005
|
var $size = _a.$size;
|
|
998
|
-
return $size === '
|
|
1006
|
+
return $size === 'medium' ? label$2.typography.small : label$2.typography.medium;
|
|
999
1007
|
}, label$2.fontWeight, layout$4.xs, function (_a) {
|
|
1000
1008
|
var $color = _a.$color,
|
|
1001
1009
|
$variant = _a.$variant;
|
|
@@ -1011,9 +1019,9 @@ var StyledCategoryBadge = styled__default.default.span.withConfig({
|
|
|
1011
1019
|
var $color = _a.$color,
|
|
1012
1020
|
$variant = _a.$variant;
|
|
1013
1021
|
if ($variant === 'filled') {
|
|
1014
|
-
return color$
|
|
1022
|
+
return color$8.text.inverse;
|
|
1015
1023
|
}
|
|
1016
|
-
return
|
|
1024
|
+
return categoryText[$color];
|
|
1017
1025
|
}, function (_a) {
|
|
1018
1026
|
var $color = _a.$color,
|
|
1019
1027
|
$variant = _a.$variant;
|
|
@@ -1022,79 +1030,139 @@ var StyledCategoryBadge = styled__default.default.span.withConfig({
|
|
|
1022
1030
|
}
|
|
1023
1031
|
return 'transparent';
|
|
1024
1032
|
});
|
|
1033
|
+
// The visible content, hidden from assistive technology when an aria-label replaces it.
|
|
1034
|
+
// display: contents keeps the root's flex layout and gap.
|
|
1035
|
+
var VisibleContent$1 = styled__default.default.span.withConfig({
|
|
1036
|
+
displayName: "CategoryLabel__VisibleContent",
|
|
1037
|
+
componentId: "sc-1jx7bjo-1"
|
|
1038
|
+
})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: contents;\n"], ["\n display: contents;\n"])));
|
|
1039
|
+
var HiddenLabel = styled__default.default.span.withConfig({
|
|
1040
|
+
displayName: "CategoryLabel__HiddenLabel",
|
|
1041
|
+
componentId: "sc-1jx7bjo-2"
|
|
1042
|
+
})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
1025
1043
|
/**
|
|
1026
|
-
*
|
|
1044
|
+
* CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
|
|
1027
1045
|
*
|
|
1028
|
-
* A static label
|
|
1029
|
-
*
|
|
1030
|
-
* financial transactions or content types.
|
|
1046
|
+
* A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
|
|
1047
|
+
* Category colours carry no status meaning; for status use StatusLabel.
|
|
1031
1048
|
*
|
|
1032
1049
|
* @example
|
|
1033
1050
|
* ```tsx
|
|
1034
|
-
* <
|
|
1035
|
-
*
|
|
1036
|
-
* </
|
|
1051
|
+
* <CategoryLabel color="orange" icon="creditCard">
|
|
1052
|
+
* Shopping
|
|
1053
|
+
* </CategoryLabel>
|
|
1037
1054
|
*
|
|
1038
|
-
* <
|
|
1055
|
+
* <CategoryLabel color="blue" variant="outlined" size="medium">
|
|
1039
1056
|
* Travel
|
|
1040
|
-
* </
|
|
1057
|
+
* </CategoryLabel>
|
|
1058
|
+
* ```
|
|
1059
|
+
*/])), visuallyHidden);
|
|
1060
|
+
/**
|
|
1061
|
+
* CategoryLabel colour-codes an item's category, such as a transaction's (decision 0018).
|
|
1062
|
+
*
|
|
1063
|
+
* A static, chip-like label with 8 category colours, 3 visual variants and an optional icon.
|
|
1064
|
+
* Category colours carry no status meaning; for status use StatusLabel.
|
|
1065
|
+
*
|
|
1066
|
+
* @example
|
|
1067
|
+
* ```tsx
|
|
1068
|
+
* <CategoryLabel color="orange" icon="creditCard">
|
|
1069
|
+
* Shopping
|
|
1070
|
+
* </CategoryLabel>
|
|
1071
|
+
*
|
|
1072
|
+
* <CategoryLabel color="blue" variant="outlined" size="medium">
|
|
1073
|
+
* Travel
|
|
1074
|
+
* </CategoryLabel>
|
|
1041
1075
|
* ```
|
|
1042
1076
|
*/
|
|
1043
|
-
var
|
|
1077
|
+
var CategoryLabel = function CategoryLabel(_a) {
|
|
1044
1078
|
var children = _a.children,
|
|
1045
1079
|
_b = _a.color,
|
|
1046
1080
|
color = _b === void 0 ? 'blue' : _b,
|
|
1047
1081
|
_c = _a.variant,
|
|
1048
1082
|
variant = _c === void 0 ? 'filled' : _c,
|
|
1049
1083
|
_d = _a.size,
|
|
1050
|
-
size = _d === void 0 ? '
|
|
1084
|
+
size = _d === void 0 ? 'large' : _d,
|
|
1051
1085
|
icon = _a.icon,
|
|
1052
1086
|
dataTestId = _a["data-testid"],
|
|
1053
1087
|
ariaLabel = _a["aria-label"];
|
|
1054
|
-
var iconSize = size === '
|
|
1055
|
-
|
|
1088
|
+
var iconSize = size === 'medium' ? 'xs' : 'sm';
|
|
1089
|
+
// A blank aria-label is no label at all, so it falls back like a missing one
|
|
1090
|
+
var accessibleLabel = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
|
|
1091
|
+
return jsxRuntime.jsxs(StyledCategoryLabel, {
|
|
1056
1092
|
"$color": color,
|
|
1057
1093
|
"$variant": variant,
|
|
1058
1094
|
"$size": size,
|
|
1059
|
-
"aria-label": ariaLabel,
|
|
1060
1095
|
"data-testid": dataTestId,
|
|
1061
|
-
children: [
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1096
|
+
children: [jsxRuntime.jsxs(VisibleContent$1, {
|
|
1097
|
+
"aria-hidden": accessibleLabel ? 'true' : undefined,
|
|
1098
|
+
children: [icon && jsxRuntime.jsx(Icon, {
|
|
1099
|
+
name: icon,
|
|
1100
|
+
size: iconSize,
|
|
1101
|
+
iconColor: variant === 'filled' ? 'inverse' : 'inherit',
|
|
1102
|
+
"aria-hidden": "true"
|
|
1103
|
+
}), children]
|
|
1104
|
+
}), accessibleLabel && jsxRuntime.jsx(HiddenLabel, {
|
|
1105
|
+
children: accessibleLabel
|
|
1106
|
+
})]
|
|
1067
1107
|
});
|
|
1068
1108
|
};
|
|
1109
|
+
CategoryLabel.displayName = 'CategoryLabel';
|
|
1110
|
+
var templateObject_1$F, templateObject_2$t, templateObject_3$r;
|
|
1111
|
+
|
|
1112
|
+
// CategoryBadge sizes on the decision 0018 scale
|
|
1113
|
+
var toLabelSize = {
|
|
1114
|
+
small: 'medium',
|
|
1115
|
+
medium: 'large'
|
|
1116
|
+
};
|
|
1117
|
+
/**
|
|
1118
|
+
* CategoryBadge displays a category label.
|
|
1119
|
+
*
|
|
1120
|
+
* @deprecated Renamed to `CategoryLabel` (same `color` and `variant`). Map `size="small"` to
|
|
1121
|
+
* `"medium"`, and `size="medium"` (or no size) to `"large"`, CategoryLabel's default.
|
|
1122
|
+
* CategoryBadge is removed in 3.0 (decision 0018).
|
|
1123
|
+
*/
|
|
1124
|
+
var CategoryBadge = function CategoryBadge(_a) {
|
|
1125
|
+
var _b = _a.size,
|
|
1126
|
+
size = _b === void 0 ? 'medium' : _b,
|
|
1127
|
+
props = __rest(_a, ["size"]);
|
|
1128
|
+
return jsxRuntime.jsx(CategoryLabel, __assign({}, props, {
|
|
1129
|
+
size: toLabelSize[size]
|
|
1130
|
+
}));
|
|
1131
|
+
};
|
|
1069
1132
|
CategoryBadge.displayName = 'CategoryBadge';
|
|
1070
|
-
var templateObject_1$E;
|
|
1071
1133
|
|
|
1072
|
-
var chip = data.tokensJson.component.chip;
|
|
1073
|
-
// Selected-chip hover and active colours have no token yet: they wait on #21 (selected states).
|
|
1074
|
-
// eslint-disable-next-line no-restricted-syntax
|
|
1075
|
-
var SELECTED_HOVER = '#CAE8FF';
|
|
1076
|
-
// eslint-disable-next-line no-restricted-syntax
|
|
1077
|
-
var SELECTED_ACTIVE = '#B5DEFF';
|
|
1134
|
+
var chip$1 = data.tokensJson.component.chip;
|
|
1078
1135
|
// Helper function to get variant styles matching Button's approach
|
|
1079
1136
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1080
1137
|
var $variant = _a.$variant,
|
|
1081
1138
|
$selected = _a.$selected,
|
|
1082
1139
|
$clickable = _a.$clickable,
|
|
1083
1140
|
$disabled = _a.$disabled;
|
|
1084
|
-
//
|
|
1141
|
+
// Selected filter and input chips use the light-blue selected treatment (decision 0016).
|
|
1142
|
+
// The text darkens with the fill so every state stays at least 4.5:1.
|
|
1085
1143
|
if ($selected) {
|
|
1086
|
-
|
|
1144
|
+
// A selected disabled chip looks like any disabled chip; the checkmark keeps the
|
|
1145
|
+
// selected state visible (#110)
|
|
1146
|
+
if ($disabled) {
|
|
1147
|
+
var disabled = chip$1.variants.subtle.disabled;
|
|
1148
|
+
return "\n background-color: ".concat(disabled.backgroundColor, ";\n color: ").concat(disabled.textColor, ";\n ");
|
|
1149
|
+
}
|
|
1150
|
+
var _b = data.tokensJson.semantic.color,
|
|
1151
|
+
background = _b.background,
|
|
1152
|
+
text = _b.text;
|
|
1153
|
+
var interactiveStates = $clickable;
|
|
1154
|
+
return "\n background-color: ".concat(background['interactive-subtle'], ";\n color: ").concat(text.interactive, ";\n \n &:hover {\n background-color: ").concat(interactiveStates ? background['interactive-subtle-hover'] : background['interactive-subtle'], ";\n color: ").concat(interactiveStates ? text['interactive-hover'] : text.interactive, ";\n }\n \n &:active {\n background-color: ").concat(interactiveStates ? background['interactive-subtle-active'] : background['interactive-subtle'], ";\n color: ").concat(interactiveStates ? text['interactive-active'] : text.interactive, ";\n }\n ");
|
|
1087
1155
|
}
|
|
1088
1156
|
switch ($variant) {
|
|
1089
1157
|
case 'emphasis':
|
|
1090
|
-
return "\n background-color: ".concat(chip.variants.emphasis.backgroundColor, ";\n color: ").concat(chip.variants.emphasis.textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip.variants.emphasis.disabled.backgroundColor : $clickable ? chip.variants.emphasis.hover.backgroundColor : chip.variants.emphasis.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip.variants.emphasis.disabled.backgroundColor : $clickable ? chip.variants.emphasis.active.backgroundColor : chip.variants.emphasis.backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip.variants.emphasis.disabled.backgroundColor, ";\n color: ").concat(chip.variants.emphasis.disabled.textColor, ";\n ") : '', "\n ");
|
|
1158
|
+
return "\n background-color: ".concat(chip$1.variants.emphasis.backgroundColor, ";\n color: ").concat(chip$1.variants.emphasis.textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip$1.variants.emphasis.disabled.backgroundColor : $clickable ? chip$1.variants.emphasis.hover.backgroundColor : chip$1.variants.emphasis.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip$1.variants.emphasis.disabled.backgroundColor : $clickable ? chip$1.variants.emphasis.active.backgroundColor : chip$1.variants.emphasis.backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip$1.variants.emphasis.disabled.backgroundColor, ";\n color: ").concat(chip$1.variants.emphasis.disabled.textColor, ";\n ") : '', "\n ");
|
|
1091
1159
|
case 'subtle':
|
|
1092
|
-
return "\n background-color: ".concat(chip.variants.subtle.backgroundColor, ";\n color: ").concat(chip.variants.subtle.textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip.variants.subtle.disabled.backgroundColor : $clickable ? chip.variants.subtle.hover.backgroundColor : chip.variants.subtle.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip.variants.subtle.disabled.backgroundColor : $clickable ? chip.variants.subtle.active.backgroundColor : chip.variants.subtle.backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip.variants.subtle.disabled.backgroundColor, ";\n color: ").concat(chip.variants.subtle.disabled.textColor, ";\n ") : '', "\n ");
|
|
1160
|
+
return "\n background-color: ".concat(chip$1.variants.subtle.backgroundColor, ";\n color: ").concat(chip$1.variants.subtle.textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip$1.variants.subtle.disabled.backgroundColor : $clickable ? chip$1.variants.subtle.hover.backgroundColor : chip$1.variants.subtle.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip$1.variants.subtle.disabled.backgroundColor : $clickable ? chip$1.variants.subtle.active.backgroundColor : chip$1.variants.subtle.backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip$1.variants.subtle.disabled.backgroundColor, ";\n color: ").concat(chip$1.variants.subtle.disabled.textColor, ";\n ") : '', "\n ");
|
|
1093
1161
|
case 'interactive':
|
|
1094
|
-
return "\n background-color: ".concat(chip.variants.interactive.backgroundColor, ";\n color: ").concat(chip.variants.interactive.textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip.variants.interactive.disabled.backgroundColor : $clickable ? chip.variants.interactive.hover.backgroundColor : chip.variants.interactive.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip.variants.interactive.disabled.backgroundColor : $clickable ? chip.variants.interactive.active.backgroundColor : chip.variants.interactive.backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip.variants.interactive.disabled.backgroundColor, ";\n color: ").concat(chip.variants.interactive.disabled.textColor, ";\n ") : '', "\n ");
|
|
1162
|
+
return "\n background-color: ".concat(chip$1.variants.interactive.backgroundColor, ";\n color: ").concat(chip$1.variants.interactive.textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip$1.variants.interactive.disabled.backgroundColor : $clickable ? chip$1.variants.interactive.hover.backgroundColor : chip$1.variants.interactive.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip$1.variants.interactive.disabled.backgroundColor : $clickable ? chip$1.variants.interactive.active.backgroundColor : chip$1.variants.interactive.backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip$1.variants.interactive.disabled.backgroundColor, ";\n color: ").concat(chip$1.variants.interactive.disabled.textColor, ";\n ") : '', "\n ");
|
|
1095
1163
|
case 'default':
|
|
1096
1164
|
default:
|
|
1097
|
-
return "\n background-color: ".concat(chip["default"].backgroundColor, ";\n color: ").concat(chip["default"].textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip.disabled.backgroundColor : $clickable ? chip.hover.backgroundColor : chip["default"].backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip.disabled.backgroundColor : $clickable ? chip.active.backgroundColor : chip["default"].backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip.disabled.backgroundColor, ";\n color: ").concat(chip.disabled.textColor, ";\n ") : '', "\n ");
|
|
1165
|
+
return "\n background-color: ".concat(chip$1["default"].backgroundColor, ";\n color: ").concat(chip$1["default"].textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip$1.disabled.backgroundColor : $clickable ? chip$1.hover.backgroundColor : chip$1["default"].backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip$1.disabled.backgroundColor : $clickable ? chip$1.active.backgroundColor : chip$1["default"].backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip$1.disabled.backgroundColor, ";\n color: ").concat(chip$1.disabled.textColor, ";\n ") : '', "\n ");
|
|
1098
1166
|
}
|
|
1099
1167
|
};
|
|
1100
1168
|
// Helper function to get size styles matching Button's approach
|
|
@@ -1102,13 +1170,15 @@ var getSizeStyles = function getSizeStyles(_a) {
|
|
|
1102
1170
|
var $size = _a.$size;
|
|
1103
1171
|
switch ($size) {
|
|
1104
1172
|
case 'small':
|
|
1105
|
-
return "\n font: ".concat(chip.sizes.small.font, ";\n padding: ").concat(chip.sizes.small.padding, ";\n ");
|
|
1173
|
+
return "\n font: ".concat(chip$1.sizes.small.font, ";\n // Off-grid 2px: keeps the deprecated token until #129 (decision 0022)\n padding: ").concat(chip$1.sizes.small.padding, ";\n ");
|
|
1106
1174
|
case 'medium':
|
|
1107
1175
|
default:
|
|
1108
|
-
return "\n font: ".concat(chip.sizes.medium.font, ";\n padding: ").concat(chip.sizes.medium.padding, ";\n ");
|
|
1176
|
+
return "\n font: ".concat(chip$1.sizes.medium.font, ";\n padding: ").concat(chip$1.sizes.medium.padding, ";\n ");
|
|
1109
1177
|
}
|
|
1110
1178
|
};
|
|
1111
1179
|
|
|
1180
|
+
var chip = data.tokensJson.component.chip,
|
|
1181
|
+
semantic$f = data.tokensJson.semantic;
|
|
1112
1182
|
// Base styled component using direct prop interpolation like Button
|
|
1113
1183
|
var StyledChip = styled__default.default.span.withConfig({
|
|
1114
1184
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1116,16 +1186,16 @@ var StyledChip = styled__default.default.span.withConfig({
|
|
|
1116
1186
|
},
|
|
1117
1187
|
displayName: "ChipBase__StyledChip",
|
|
1118
1188
|
componentId: "sc-moa6zc-0"
|
|
1119
|
-
})(templateObject_1$
|
|
1189
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: ", ";\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: ", ";\n cursor: ", ";\n \n ", "\n ", "\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: ", ";\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: ", ";\n cursor: ", ";\n \n ", "\n ", "\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"
|
|
1120
1190
|
// Icon container for selected indicator or leading icons
|
|
1121
|
-
])), chip["default"].borderRadius,
|
|
1191
|
+
])), chip["default"].borderRadius, semantic$f.motion.hover, function (props) {
|
|
1122
1192
|
return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
|
|
1123
|
-
}, getVariantStyles, getSizeStyles, chip.focus.outline,
|
|
1193
|
+
}, getVariantStyles, getSizeStyles, chip.focus.outline, semantic$f.border.focusOffset);
|
|
1124
1194
|
// Icon container for selected indicator or leading icons
|
|
1125
1195
|
var IconContainer = styled__default.default.span.withConfig({
|
|
1126
1196
|
displayName: "ChipBase__IconContainer",
|
|
1127
1197
|
componentId: "sc-moa6zc-1"
|
|
1128
|
-
})(templateObject_2$
|
|
1198
|
+
})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n margin-right: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n margin-right: ", ";\n"
|
|
1129
1199
|
// Close button for dismissible chips
|
|
1130
1200
|
])), data.tokensJson.semantic.spacing.layout.xs);
|
|
1131
1201
|
// Close button for dismissible chips
|
|
@@ -1135,24 +1205,21 @@ var CloseButton = styled__default.default.button.withConfig({
|
|
|
1135
1205
|
},
|
|
1136
1206
|
displayName: "ChipBase__CloseButton",
|
|
1137
1207
|
componentId: "sc-moa6zc-2"
|
|
1138
|
-
})(templateObject_3$
|
|
1208
|
+
})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n cursor: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n background-color: ", ";\n }\n \n &:active:not(:disabled) {\n background-color: ", ";\n }\n \n &:disabled {\n color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n border-radius: ", ";\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n cursor: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n background-color: ", ";\n }\n \n &:active:not(:disabled) {\n background-color: ", ";\n }\n \n &:disabled {\n color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n border-radius: ", ";\n }\n"])), data.tokensJson.semantic.spacing.layout.sm, chip.closeButton.size, chip.closeButton.size, data.tokensJson.semantic.spacing.layout.none, data.tokensJson.semantic.border.radius.xs, function (props) {
|
|
1139
1209
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
1140
|
-
},
|
|
1141
|
-
var templateObject_1$
|
|
1210
|
+
}, semantic$f.motion.hover, data.tokensJson.semantic.color.background['hover-overlay'], data.tokensJson.semantic.color.background['active-overlay'], data.tokensJson.semantic.color.text.disabled, chip.focus.outline, semantic$f.border.focusOffset, chip["default"].borderRadius);
|
|
1211
|
+
var templateObject_1$E, templateObject_2$s, templateObject_3$q;
|
|
1142
1212
|
|
|
1143
1213
|
/**
|
|
1144
|
-
* Chip -
|
|
1214
|
+
* Chip - a static, non-interactive label for tags, categories and metadata.
|
|
1145
1215
|
*
|
|
1146
|
-
*
|
|
1147
|
-
*
|
|
1148
|
-
* -
|
|
1149
|
-
* - BooleanChip:
|
|
1216
|
+
* Chips are classified by job (decision 0016):
|
|
1217
|
+
* - Chip: a static label (`default` variant only)
|
|
1218
|
+
* - InputChip: a removable value, such as an applied filter (formerly `FilterChip`)
|
|
1219
|
+
* - BooleanChip: toggles a filter on and off (becomes `FilterChip` in 3.0)
|
|
1150
1220
|
*
|
|
1151
|
-
*
|
|
1152
|
-
*
|
|
1153
|
-
* - emphasis: High-contrast dark background
|
|
1154
|
-
* - subtle: Light background for secondary info
|
|
1155
|
-
* - interactive: Blue background with hover states
|
|
1221
|
+
* The `emphasis`, `subtle`, `interactive`, `light` and `dark` variants and `onClick` are
|
|
1222
|
+
* deprecated and will be removed in 3.0.
|
|
1156
1223
|
*/
|
|
1157
1224
|
var Chip = function Chip(_a) {
|
|
1158
1225
|
var children = _a.children,
|
|
@@ -1214,22 +1281,22 @@ var LegacyChip = function LegacyChip(_a) {
|
|
|
1214
1281
|
};
|
|
1215
1282
|
|
|
1216
1283
|
/**
|
|
1217
|
-
*
|
|
1284
|
+
* InputChip - A removable value, such as an applied filter, with an optional selected state
|
|
1218
1285
|
*
|
|
1219
|
-
* Use this component to show
|
|
1220
|
-
* When selected, displays a checkmark
|
|
1286
|
+
* Use this component to show values the user has entered or applied, such as filters.
|
|
1287
|
+
* When selected, displays a checkmark on the light-blue selected treatment (decision 0016).
|
|
1288
|
+
* A selected disabled chip uses the disabled colours and keeps its checkmark.
|
|
1221
1289
|
* Optionally dismissible when onDismiss is provided.
|
|
1222
1290
|
*
|
|
1223
1291
|
* Features:
|
|
1224
1292
|
* - Shows checkmark icon when selected
|
|
1225
|
-
* - Light blue
|
|
1293
|
+
* - Light-blue fill and blue text when selected and enabled; disabled colours when disabled
|
|
1226
1294
|
* - Optional close (×) button when onDismiss is provided
|
|
1227
1295
|
* - Keyboard dismissal with Delete or Backspace keys (when dismissible)
|
|
1228
1296
|
* - Non-clickable body (only close button is interactive when present)
|
|
1229
|
-
* - Uses subtle/interactive background styling based on selected state
|
|
1230
1297
|
* - Announces as "status" to screen readers
|
|
1231
1298
|
*/
|
|
1232
|
-
var
|
|
1299
|
+
var InputChip = function InputChip(_a) {
|
|
1233
1300
|
var children = _a.children,
|
|
1234
1301
|
_b = _a.selected,
|
|
1235
1302
|
selected = _b === void 0 ? false : _b,
|
|
@@ -1282,7 +1349,8 @@ var FilterChip = function FilterChip(_a) {
|
|
|
1282
1349
|
"aria-hidden": "true",
|
|
1283
1350
|
children: jsxRuntime.jsx(Icon, {
|
|
1284
1351
|
name: "check",
|
|
1285
|
-
size: "sm"
|
|
1352
|
+
size: "sm",
|
|
1353
|
+
iconColor: "inherit"
|
|
1286
1354
|
})
|
|
1287
1355
|
}), children, isDismissible && jsxRuntime.jsx(CloseButton, {
|
|
1288
1356
|
type: "button",
|
|
@@ -1295,12 +1363,22 @@ var FilterChip = function FilterChip(_a) {
|
|
|
1295
1363
|
"data-testid": dataTestId ? "".concat(dataTestId, "-close") : undefined,
|
|
1296
1364
|
children: jsxRuntime.jsx(Icon, {
|
|
1297
1365
|
name: "close",
|
|
1298
|
-
size: "sm"
|
|
1366
|
+
size: "sm",
|
|
1367
|
+
iconColor: "inherit"
|
|
1299
1368
|
})
|
|
1300
1369
|
})]
|
|
1301
1370
|
}));
|
|
1302
1371
|
};
|
|
1303
1372
|
|
|
1373
|
+
/**
|
|
1374
|
+
* FilterChip - a removable chip with an optional selected state.
|
|
1375
|
+
*
|
|
1376
|
+
* @deprecated Renamed to `InputChip`; in 3.0 `FilterChip` becomes the toggle chip (today's
|
|
1377
|
+
* `BooleanChip`). Replace `FilterChip` with `InputChip` first, then `BooleanChip` with
|
|
1378
|
+
* `FilterChip` when you upgrade to 3.0 (decision 0016).
|
|
1379
|
+
*/
|
|
1380
|
+
var FilterChip = InputChip;
|
|
1381
|
+
|
|
1304
1382
|
/**
|
|
1305
1383
|
* BooleanChip - Toggleable chip for quick filter controls
|
|
1306
1384
|
*
|
|
@@ -1313,7 +1391,11 @@ var FilterChip = function FilterChip(_a) {
|
|
|
1313
1391
|
* - Entire chip is clickable to toggle
|
|
1314
1392
|
* - Keyboard activation with Space or Enter
|
|
1315
1393
|
* - Uses checkbox role with aria-checked
|
|
1316
|
-
* -
|
|
1394
|
+
* - Light-blue fill and blue text when selected and enabled; disabled colours when disabled
|
|
1395
|
+
*
|
|
1396
|
+
* @deprecated Becomes `FilterChip` in 3.0, with the same props. Keep using `BooleanChip`
|
|
1397
|
+
* until you upgrade; in 3.0, replace `FilterChip` with `InputChip` first, then
|
|
1398
|
+
* `BooleanChip` with `FilterChip` (decision 0016).
|
|
1317
1399
|
*/
|
|
1318
1400
|
var BooleanChip = function BooleanChip(_a) {
|
|
1319
1401
|
var children = _a.children,
|
|
@@ -1359,17 +1441,18 @@ var BooleanChip = function BooleanChip(_a) {
|
|
|
1359
1441
|
"aria-hidden": "true",
|
|
1360
1442
|
children: jsxRuntime.jsx(Icon, {
|
|
1361
1443
|
name: "check",
|
|
1362
|
-
size: "sm"
|
|
1444
|
+
size: "sm",
|
|
1445
|
+
iconColor: "inherit"
|
|
1363
1446
|
})
|
|
1364
1447
|
}), children]
|
|
1365
1448
|
}));
|
|
1366
1449
|
};
|
|
1367
1450
|
|
|
1368
|
-
var spacing$
|
|
1451
|
+
var spacing$8 = data.tokensJson.semantic.spacing;
|
|
1369
1452
|
var StyledContainer$2 = styled__default.default.div.withConfig({
|
|
1370
1453
|
displayName: "Container__StyledContainer",
|
|
1371
1454
|
componentId: "sc-17dbj6n-0"
|
|
1372
|
-
})(templateObject_1$
|
|
1455
|
+
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: ", ";\n padding-right: ", ";\n \n ", " {\n max-width: ", ";\n }\n \n ", " {\n max-width: ", ";\n }\n \n ", " {\n max-width: ", ";\n }\n \n ", " {\n max-width: ", ";\n }\n \n ", " {\n max-width: ", ";\n }\n"], ["\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: ", ";\n padding-right: ", ";\n \n ", " {\n max-width: ", ";\n }\n \n ", " {\n max-width: ", ";\n }\n \n ", " {\n max-width: ", ";\n }\n \n ", " {\n max-width: ", ";\n }\n \n ", " {\n max-width: ", ";\n }\n"])), spacing$8.layout['2xl'], spacing$8.layout['2xl'], media$1.sm, breakpoints$1.sm, media$1.md, breakpoints$1.md, media$1.lg, breakpoints$1.lg, media$1.xl, breakpoints$1.xl, media$1['2xl'], breakpoints$1['2xl']);
|
|
1373
1456
|
var Container$1 = function Container(_a) {
|
|
1374
1457
|
var children = _a.children,
|
|
1375
1458
|
props = __rest(_a, ["children"]);
|
|
@@ -1377,24 +1460,24 @@ var Container$1 = function Container(_a) {
|
|
|
1377
1460
|
children: children
|
|
1378
1461
|
}));
|
|
1379
1462
|
};
|
|
1380
|
-
var templateObject_1$
|
|
1463
|
+
var templateObject_1$D;
|
|
1381
1464
|
|
|
1382
1465
|
var PictureWrapper = styled__default.default.div.withConfig({
|
|
1383
1466
|
displayName: "Picture__PictureWrapper",
|
|
1384
1467
|
componentId: "sc-11d9tei-0"
|
|
1385
|
-
})(templateObject_1$
|
|
1468
|
+
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n margin: 0 auto;\n \n ", " {\n margin-left: 0;\n margin-right: 0;\n }\n"], ["\n margin: 0 auto;\n \n ", " {\n margin-left: 0;\n margin-right: 0;\n }\n"])), media$1.sm);
|
|
1386
1469
|
var ImageLink = styled__default.default.a.withConfig({
|
|
1387
1470
|
displayName: "Picture__ImageLink",
|
|
1388
1471
|
componentId: "sc-11d9tei-1"
|
|
1389
|
-
})(templateObject_2$
|
|
1472
|
+
})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: block;\n cursor: pointer;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"], ["\n display: block;\n cursor: pointer;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"])), data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut);
|
|
1390
1473
|
var ImageButton = styled__default.default.button.withConfig({
|
|
1391
1474
|
displayName: "Picture__ImageButton",
|
|
1392
1475
|
componentId: "sc-11d9tei-2"
|
|
1393
|
-
})(templateObject_3$
|
|
1476
|
+
})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n display: block;\n width: 100%;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"], ["\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n display: block;\n width: 100%;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"])), data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut);
|
|
1394
1477
|
var StyledImage = styled__default.default.img.withConfig({
|
|
1395
1478
|
displayName: "Picture__StyledImage",
|
|
1396
1479
|
componentId: "sc-11d9tei-3"
|
|
1397
|
-
})(templateObject_4$
|
|
1480
|
+
})(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n width: 100%;\n height: auto;\n border-radius: ", ";\n display: block;\n"], ["\n width: 100%;\n height: auto;\n border-radius: ", ";\n display: block;\n"])), data.tokensJson.semantic.border.radius.sm);
|
|
1398
1481
|
var Picture = function Picture(_a) {
|
|
1399
1482
|
var title = _a.title,
|
|
1400
1483
|
src = _a.src,
|
|
@@ -1424,18 +1507,18 @@ var Picture = function Picture(_a) {
|
|
|
1424
1507
|
}) : image
|
|
1425
1508
|
});
|
|
1426
1509
|
};
|
|
1427
|
-
var templateObject_1$
|
|
1510
|
+
var templateObject_1$C, templateObject_2$r, templateObject_3$p, templateObject_4$l;
|
|
1428
1511
|
|
|
1429
1512
|
var _a$9 = data.tokensJson.semantic,
|
|
1430
|
-
typography = _a$9.typography,
|
|
1431
|
-
color$
|
|
1513
|
+
typography$1 = _a$9.typography,
|
|
1514
|
+
color$7 = _a$9.color;
|
|
1432
1515
|
var TimeStyled = styled__default.default.time.withConfig({
|
|
1433
1516
|
displayName: "DateFormatter__TimeStyled",
|
|
1434
1517
|
componentId: "sc-5464cc-0"
|
|
1435
|
-
})(templateObject_1$
|
|
1518
|
+
})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
1436
1519
|
/**
|
|
1437
1520
|
* Formats a date with smart relative/absolute logic
|
|
1438
|
-
*/])), typography.label, color$
|
|
1521
|
+
*/])), typography$1.label, color$7.text.subdued);
|
|
1439
1522
|
/**
|
|
1440
1523
|
* Formats a date with smart relative/absolute logic
|
|
1441
1524
|
*/
|
|
@@ -1481,43 +1564,67 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
1481
1564
|
children: displayText
|
|
1482
1565
|
});
|
|
1483
1566
|
};
|
|
1484
|
-
var templateObject_1$
|
|
1567
|
+
var templateObject_1$B;
|
|
1485
1568
|
|
|
1486
|
-
var
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1569
|
+
var _a$8 = data.tokensJson.semantic,
|
|
1570
|
+
motion$5 = _a$8.motion,
|
|
1571
|
+
border$8 = _a$8.border,
|
|
1572
|
+
spacing$7 = _a$8.spacing,
|
|
1573
|
+
_b$1 = data.tokensJson.component,
|
|
1574
|
+
iconButton = _b$1.iconButton,
|
|
1575
|
+
button = _b$1.button;
|
|
1576
|
+
// Padding comes from the semantic spacing scale: no component spacing tokens (decision 0022)
|
|
1577
|
+
var padding = {
|
|
1578
|
+
small: spacing$7.component.xs,
|
|
1579
|
+
medium: spacing$7.component.sm,
|
|
1580
|
+
large: spacing$7.component.md
|
|
1581
|
+
};
|
|
1582
|
+
// Colours and motion come from Button's tokens, so IconButton's variants look and behave exactly like
|
|
1583
|
+
// Button's in every state (#130). Only the size and the icon differ
|
|
1584
|
+
var variants = {
|
|
1585
|
+
primary: {
|
|
1586
|
+
bg: button.primary.backgroundColor,
|
|
1587
|
+
text: button.primary.textColor,
|
|
1588
|
+
hoverBg: button.hover.backgroundColor,
|
|
1589
|
+
activeBg: button.active.backgroundColor,
|
|
1590
|
+
disabledBg: button.disabled.backgroundColor,
|
|
1591
|
+
disabledText: button.disabled.textColor
|
|
1592
|
+
},
|
|
1593
|
+
secondary: {
|
|
1594
|
+
bg: button.variants.secondary.backgroundColor,
|
|
1595
|
+
text: button.variants.secondary.textColor,
|
|
1596
|
+
hoverBg: button.variants.secondary.hover.backgroundColor,
|
|
1597
|
+
activeBg: button.variants.secondary.active.backgroundColor,
|
|
1598
|
+
disabledBg: button.variants.secondary.disabled.backgroundColor,
|
|
1599
|
+
disabledText: button.variants.secondary.disabled.textColor
|
|
1600
|
+
},
|
|
1601
|
+
naked: {
|
|
1602
|
+
bg: button.variants.naked.backgroundColor,
|
|
1603
|
+
text: button.variants.naked.textColor,
|
|
1604
|
+
hoverBg: button.variants.naked.hover.backgroundColor,
|
|
1605
|
+
activeBg: button.variants.naked.active.backgroundColor,
|
|
1606
|
+
disabledBg: button.variants.naked.disabled.backgroundColor,
|
|
1607
|
+
disabledText: button.variants.naked.disabled.textColor
|
|
1608
|
+
}
|
|
1609
|
+
};
|
|
1610
|
+
// JavaScript callers can pass any string, so an unknown variant falls back to primary, as before
|
|
1611
|
+
var colours = function colours(variant) {
|
|
1612
|
+
var _a;
|
|
1613
|
+
return (_a = variants[variant]) !== null && _a !== void 0 ? _a : variants.primary;
|
|
1614
|
+
};
|
|
1490
1615
|
var IconButtonStyled = styled__default.default.button.withConfig({
|
|
1491
1616
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1492
1617
|
return !prop.startsWith('$');
|
|
1493
1618
|
},
|
|
1494
1619
|
displayName: "IconButton__IconButtonStyled",
|
|
1495
1620
|
componentId: "sc-k8b14t-0"
|
|
1496
|
-
})(templateObject_1$
|
|
1621
|
+
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border: none;\n border-radius: ", ";\n transition: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n height: max-content;\n cursor: pointer;\n position: relative;\n\n /* Size-specific dimensions from component tokens */\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n\n &:hover:not(:disabled) {\n background-color: ", ";\n }\n\n &:active:not(:disabled) {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n background-color: ", ";\n color: ", ";\n border: none;\n border-radius: ", ";\n transition: ", ";\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n height: max-content;\n cursor: pointer;\n position: relative;\n\n /* Size-specific dimensions from component tokens */\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n\n &:hover:not(:disabled) {\n background-color: ", ";\n }\n\n &:active:not(:disabled) {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n"])), function (_a) {
|
|
1497
1622
|
var $variant = _a.$variant;
|
|
1498
|
-
|
|
1499
|
-
case 'primary':
|
|
1500
|
-
return iconButton.primary.backgroundColor;
|
|
1501
|
-
case 'secondary':
|
|
1502
|
-
return iconButton.variants.secondary.backgroundColor;
|
|
1503
|
-
case 'naked':
|
|
1504
|
-
return iconButton.variants.naked.backgroundColor;
|
|
1505
|
-
default:
|
|
1506
|
-
return iconButton.primary.backgroundColor;
|
|
1507
|
-
}
|
|
1623
|
+
return colours($variant).bg;
|
|
1508
1624
|
}, function (_a) {
|
|
1509
1625
|
var $variant = _a.$variant;
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
return button.primary.textColor;
|
|
1513
|
-
case 'secondary':
|
|
1514
|
-
return button.variants.secondary.textColor;
|
|
1515
|
-
case 'naked':
|
|
1516
|
-
return button.variants.naked.textColor;
|
|
1517
|
-
default:
|
|
1518
|
-
return button.primary.textColor;
|
|
1519
|
-
}
|
|
1520
|
-
}, iconButton.primary.borderRadius, motion$5.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
|
|
1626
|
+
return colours($variant).text;
|
|
1627
|
+
}, iconButton.primary.borderRadius, motion$5.hover, function (_a) {
|
|
1521
1628
|
var $size = _a.$size;
|
|
1522
1629
|
return iconButton.sizes[$size].minWidth;
|
|
1523
1630
|
}, function (_a) {
|
|
@@ -1525,32 +1632,20 @@ var IconButtonStyled = styled__default.default.button.withConfig({
|
|
|
1525
1632
|
return iconButton.sizes[$size].minHeight;
|
|
1526
1633
|
}, function (_a) {
|
|
1527
1634
|
var $size = _a.$size;
|
|
1528
|
-
return
|
|
1635
|
+
return padding[$size];
|
|
1529
1636
|
}, function (_a) {
|
|
1530
1637
|
var $variant = _a.$variant;
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
return iconButton.hover.backgroundColor;
|
|
1534
|
-
case 'secondary':
|
|
1535
|
-
return iconButton.variants.secondary.hover.backgroundColor;
|
|
1536
|
-
case 'naked':
|
|
1537
|
-
return iconButton.variants.naked.hover.backgroundColor;
|
|
1538
|
-
default:
|
|
1539
|
-
return iconButton.hover.backgroundColor;
|
|
1540
|
-
}
|
|
1541
|
-
}, iconButton.active.backgroundColor, iconButton.focus.outline, iconButton.focus.outlineOffset, iconButton.disabled.backgroundColor, function (_a) {
|
|
1638
|
+
return colours($variant).hoverBg;
|
|
1639
|
+
}, function (_a) {
|
|
1542
1640
|
var $variant = _a.$variant;
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
return button.disabled.textColor;
|
|
1552
|
-
}
|
|
1553
|
-
}, data.tokensJson.semantic.border.width.thin);
|
|
1641
|
+
return colours($variant).activeBg;
|
|
1642
|
+
}, iconButton.focus.outline, border$8.focusOffset, function (_a) {
|
|
1643
|
+
var $variant = _a.$variant;
|
|
1644
|
+
return colours($variant).disabledBg;
|
|
1645
|
+
}, function (_a) {
|
|
1646
|
+
var $variant = _a.$variant;
|
|
1647
|
+
return colours($variant).disabledText;
|
|
1648
|
+
});
|
|
1554
1649
|
var IconButton = function IconButton(_a) {
|
|
1555
1650
|
var variant = _a.variant,
|
|
1556
1651
|
_b = _a.size,
|
|
@@ -1601,7 +1696,7 @@ var IconButton = function IconButton(_a) {
|
|
|
1601
1696
|
})
|
|
1602
1697
|
}));
|
|
1603
1698
|
};
|
|
1604
|
-
var templateObject_1$
|
|
1699
|
+
var templateObject_1$A;
|
|
1605
1700
|
|
|
1606
1701
|
var StyledWrapper = styled__default.default.span.withConfig({
|
|
1607
1702
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1609,7 +1704,7 @@ var StyledWrapper = styled__default.default.span.withConfig({
|
|
|
1609
1704
|
},
|
|
1610
1705
|
displayName: "MoneyDisplay__StyledWrapper",
|
|
1611
1706
|
componentId: "sc-1mddej3-0"
|
|
1612
|
-
})(templateObject_1$
|
|
1707
|
+
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n text-align: ", ";\n font-weight: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n text-align: ", ";\n font-weight: ", ";\n"
|
|
1613
1708
|
// Map size to Typography variant
|
|
1614
1709
|
])), function (_a) {
|
|
1615
1710
|
var $align = _a.$align;
|
|
@@ -1712,14 +1807,14 @@ var MoneyDisplay = function MoneyDisplay(_a) {
|
|
|
1712
1807
|
})]
|
|
1713
1808
|
});
|
|
1714
1809
|
};
|
|
1715
|
-
var templateObject_1$
|
|
1810
|
+
var templateObject_1$z;
|
|
1716
1811
|
|
|
1717
1812
|
// Destructure tokens
|
|
1718
|
-
var semantic$
|
|
1719
|
-
var _a$7 = __assign(__assign({}, semantic$
|
|
1813
|
+
var semantic$e = data.tokensJson.semantic;
|
|
1814
|
+
var _a$7 = __assign(__assign({}, semantic$e), {
|
|
1720
1815
|
component: data.tokensJson.component
|
|
1721
1816
|
}),
|
|
1722
|
-
color$
|
|
1817
|
+
color$6 = _a$7.color,
|
|
1723
1818
|
border$7 = _a$7.border,
|
|
1724
1819
|
motion$4 = _a$7.motion,
|
|
1725
1820
|
component$2 = _a$7.component;
|
|
@@ -1730,10 +1825,10 @@ var ProgressBarContainer = styled__default.default.div.withConfig({
|
|
|
1730
1825
|
},
|
|
1731
1826
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
1732
1827
|
componentId: "sc-1nco33q-0"
|
|
1733
|
-
})(templateObject_3$
|
|
1734
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_1$
|
|
1828
|
+
})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"])), color$6.background.disabled, radius$2.xs, function (props) {
|
|
1829
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
|
|
1735
1830
|
}, function (props) {
|
|
1736
|
-
return props.$variant === 'vertical' && styled.css(templateObject_2$
|
|
1831
|
+
return props.$variant === 'vertical' && styled.css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
|
|
1737
1832
|
});
|
|
1738
1833
|
var ProgressBarFill = styled__default.default.div.withConfig({
|
|
1739
1834
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1745,17 +1840,17 @@ var ProgressBarFill = styled__default.default.div.withConfig({
|
|
|
1745
1840
|
var backgroundColor;
|
|
1746
1841
|
switch (props.$color) {
|
|
1747
1842
|
case 'success':
|
|
1748
|
-
backgroundColor = color$
|
|
1843
|
+
backgroundColor = color$6.background.success;
|
|
1749
1844
|
break;
|
|
1750
1845
|
case 'error':
|
|
1751
|
-
backgroundColor = color$
|
|
1846
|
+
backgroundColor = color$6.background.error;
|
|
1752
1847
|
break;
|
|
1753
1848
|
case 'default':
|
|
1754
1849
|
default:
|
|
1755
|
-
backgroundColor = color$
|
|
1850
|
+
backgroundColor = color$6.background.interactive;
|
|
1756
1851
|
break;
|
|
1757
1852
|
}
|
|
1758
|
-
return styled.css(templateObject_4$
|
|
1853
|
+
return styled.css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
1759
1854
|
}, function (props) {
|
|
1760
1855
|
return props.$variant === 'horizontal' && styled.css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
1761
1856
|
}, function (props) {
|
|
@@ -1793,10 +1888,11 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
1793
1888
|
})
|
|
1794
1889
|
});
|
|
1795
1890
|
};
|
|
1796
|
-
var templateObject_1$
|
|
1891
|
+
var templateObject_1$y, templateObject_2$q, templateObject_3$o, templateObject_4$k, templateObject_5$g, templateObject_6$c, templateObject_7$a;
|
|
1797
1892
|
|
|
1798
1893
|
// Destructure tokens for cleaner access
|
|
1799
1894
|
var separatorTokens = data.tokensJson.component.separator;
|
|
1895
|
+
// Margins come from the semantic separator spacing: no component spacing tokens (decision 0022)
|
|
1800
1896
|
var separatorSpacing = data.tokensJson.semantic.spacing.separator;
|
|
1801
1897
|
var StyledDivider = styled__default.default.div.withConfig({
|
|
1802
1898
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1804,7 +1900,7 @@ var StyledDivider = styled__default.default.div.withConfig({
|
|
|
1804
1900
|
},
|
|
1805
1901
|
displayName: "Divider__StyledDivider",
|
|
1806
1902
|
componentId: "sc-1l0c8ja-0"
|
|
1807
|
-
})(templateObject_1$
|
|
1903
|
+
})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n border: none;\n \n /* Apply orientation */\n ", "\n \n /* Apply variant styles */\n ", "\n \n /* Apply size styles (spacing) */\n ", "\n"], ["\n border: none;\n \n /* Apply orientation */\n ", "\n \n /* Apply variant styles */\n ", "\n \n /* Apply size styles (spacing) */\n ", "\n"
|
|
1808
1904
|
/**
|
|
1809
1905
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
1810
1906
|
*
|
|
@@ -1853,7 +1949,7 @@ var StyledDivider = styled__default.default.div.withConfig({
|
|
|
1853
1949
|
$orientation = _d === void 0 ? 'horizontal' : _d;
|
|
1854
1950
|
if ($variant === 'minimal' && $orientation === 'horizontal') {
|
|
1855
1951
|
// Minimal variant always uses its predefined spacing for horizontal
|
|
1856
|
-
return "margin: ".concat(
|
|
1952
|
+
return "margin: ".concat(separatorSpacing.md, " 0;");
|
|
1857
1953
|
}
|
|
1858
1954
|
if ($orientation === 'vertical') {
|
|
1859
1955
|
// Vertical orientation uses horizontal margins (left/right)
|
|
@@ -1872,14 +1968,14 @@ var StyledDivider = styled__default.default.div.withConfig({
|
|
|
1872
1968
|
// Horizontal orientation uses vertical margins (top/bottom)
|
|
1873
1969
|
switch ($size) {
|
|
1874
1970
|
case 'small':
|
|
1875
|
-
return "margin: ".concat(
|
|
1971
|
+
return "margin: ".concat(separatorSpacing.sm, " 0;");
|
|
1876
1972
|
case 'medium':
|
|
1877
|
-
return "margin: ".concat(
|
|
1973
|
+
return "margin: ".concat(separatorSpacing.md, " 0;");
|
|
1878
1974
|
case 'xlarge':
|
|
1879
|
-
return "margin: ".concat(
|
|
1975
|
+
return "margin: ".concat(separatorSpacing.xl, " 0;");
|
|
1880
1976
|
case 'large':
|
|
1881
1977
|
default:
|
|
1882
|
-
return "margin: ".concat(
|
|
1978
|
+
return "margin: ".concat(separatorSpacing.lg, " 0;");
|
|
1883
1979
|
}
|
|
1884
1980
|
});
|
|
1885
1981
|
/**
|
|
@@ -1917,7 +2013,7 @@ var Divider = function Divider(_a) {
|
|
|
1917
2013
|
"aria-orientation": orientation
|
|
1918
2014
|
});
|
|
1919
2015
|
};
|
|
1920
|
-
var templateObject_1$
|
|
2016
|
+
var templateObject_1$x;
|
|
1921
2017
|
|
|
1922
2018
|
var StyledStack = styled__default.default.div.withConfig({
|
|
1923
2019
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1925,7 +2021,7 @@ var StyledStack = styled__default.default.div.withConfig({
|
|
|
1925
2021
|
},
|
|
1926
2022
|
displayName: "Stack__StyledStack",
|
|
1927
2023
|
componentId: "sc-1ehkxgy-0"
|
|
1928
|
-
})(templateObject_1$
|
|
2024
|
+
})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: var(--stack-direction);\n align-items: var(--stack-align-items);\n justify-content: var(--stack-justify-content);\n gap: var(--stack-gap);\n flex-wrap: var(--stack-wrap);\n"], ["\n display: flex;\n flex-direction: var(--stack-direction);\n align-items: var(--stack-align-items);\n justify-content: var(--stack-justify-content);\n gap: var(--stack-gap);\n flex-wrap: var(--stack-wrap);\n"
|
|
1929
2025
|
// Helper function to convert gap prop to CSS value
|
|
1930
2026
|
])));
|
|
1931
2027
|
// Helper function to convert gap prop to CSS value
|
|
@@ -1964,18 +2060,19 @@ var Stack = function Stack(_a) {
|
|
|
1964
2060
|
children: children
|
|
1965
2061
|
});
|
|
1966
2062
|
};
|
|
1967
|
-
var templateObject_1$
|
|
2063
|
+
var templateObject_1$w;
|
|
1968
2064
|
|
|
1969
2065
|
// Destructure tokens for cleaner access
|
|
1970
2066
|
var statusColors = data.tokensJson.semantic.color.status;
|
|
1971
|
-
var spacing$
|
|
2067
|
+
var spacing$6 = data.tokensJson.semantic.spacing.layout;
|
|
1972
2068
|
var radius$1 = data.tokensJson.semantic.border.radius;
|
|
1973
2069
|
var _a$6 = data.tokensJson.semantic.motion,
|
|
1974
2070
|
transition = _a$6.transition,
|
|
1975
2071
|
duration$3 = _a$6.duration,
|
|
1976
2072
|
easing$3 = _a$6.easing;
|
|
2073
|
+
var labelHeight = data.tokensJson.semantic.size.label;
|
|
1977
2074
|
var label$1 = data.tokensJson.component.badge.label;
|
|
1978
|
-
var scaleIn$1 = styled.keyframes(templateObject_1$
|
|
2075
|
+
var scaleIn$1 = styled.keyframes(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
1979
2076
|
var getStatusConfig = function getStatusConfig(status) {
|
|
1980
2077
|
var configs = {
|
|
1981
2078
|
pending: {
|
|
@@ -2020,31 +2117,31 @@ var getStatusConfig = function getStatusConfig(status) {
|
|
|
2020
2117
|
return configs[status];
|
|
2021
2118
|
};
|
|
2022
2119
|
// Size configuration
|
|
2023
|
-
var sizeConfig = {
|
|
2120
|
+
var sizeConfig$1 = {
|
|
2024
2121
|
small: {
|
|
2025
|
-
height:
|
|
2026
|
-
padding: "".concat(spacing$
|
|
2122
|
+
height: labelHeight.small,
|
|
2123
|
+
padding: "".concat(spacing$6.xs, " ").concat(spacing$6.sm),
|
|
2027
2124
|
font: label$1.typography.small,
|
|
2028
|
-
gap: spacing$
|
|
2125
|
+
gap: spacing$6.xs,
|
|
2029
2126
|
iconSize: 'xs'
|
|
2030
2127
|
},
|
|
2031
2128
|
medium: {
|
|
2032
|
-
height:
|
|
2033
|
-
padding: "".concat(spacing$
|
|
2129
|
+
height: labelHeight.medium,
|
|
2130
|
+
padding: "".concat(spacing$6.xs, " ").concat(spacing$6.sm),
|
|
2034
2131
|
font: label$1.typography.medium,
|
|
2035
|
-
gap: spacing$
|
|
2132
|
+
gap: spacing$6.xs,
|
|
2036
2133
|
iconSize: 'sm'
|
|
2037
2134
|
}
|
|
2038
2135
|
};
|
|
2039
|
-
var
|
|
2136
|
+
var StyledStatusLabel = styled__default.default.span.withConfig({
|
|
2040
2137
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2041
2138
|
return !prop.startsWith('$');
|
|
2042
2139
|
},
|
|
2043
|
-
displayName: "
|
|
2044
|
-
componentId: "sc-
|
|
2045
|
-
})(templateObject_2$
|
|
2140
|
+
displayName: "StatusLabelBase__StyledStatusLabel",
|
|
2141
|
+
componentId: "sc-1ye9xz5-0"
|
|
2142
|
+
})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n white-space: nowrap;\n user-select: none;\n animation: ", " ", " ", ";\n transition: ", ";\n\n /* transition.fast covers all properties, so a size change would animate the label's dimensions */\n ", " {\n animation: none;\n transition: none;\n }\n \n /* Size styles */\n ", "\n \n /* Status color styles */\n ", "\n"], ["\n box-sizing: border-box; /* the height includes padding, without relying on a global reset */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n white-space: nowrap;\n user-select: none;\n animation: ", " ", " ", ";\n transition: ", ";\n\n /* transition.fast covers all properties, so a size change would animate the label's dimensions */\n ", " {\n animation: none;\n transition: none;\n }\n \n /* Size styles */\n ", "\n \n /* Status color styles */\n ", "\n"])), radius$1.circle, scaleIn$1, duration$3.normal, easing$3.easeOut, transition.fast, reducedMotion, function (_a) {
|
|
2046
2143
|
var $size = _a.$size;
|
|
2047
|
-
var size = sizeConfig[$size];
|
|
2144
|
+
var size = sizeConfig$1[$size];
|
|
2048
2145
|
return "\n height: ".concat(size.height, ";\n padding: ").concat(size.padding, ";\n font: ").concat(size.font, ";\n font-weight: ").concat(label$1.fontWeight, ";\n gap: ").concat(size.gap, ";\n ");
|
|
2049
2146
|
}, function (_a) {
|
|
2050
2147
|
var $status = _a.$status;
|
|
@@ -2052,56 +2149,29 @@ var StyledStatusBadge = styled__default.default.span.withConfig({
|
|
|
2052
2149
|
return "\n background-color: ".concat(config.bgColor, ";\n color: ").concat(config.color, ";\n ");
|
|
2053
2150
|
});
|
|
2054
2151
|
var ScreenReaderOnly = styled__default.default.span.withConfig({
|
|
2055
|
-
displayName: "
|
|
2056
|
-
componentId: "sc-
|
|
2057
|
-
})(templateObject_3$
|
|
2152
|
+
displayName: "StatusLabelBase__ScreenReaderOnly",
|
|
2153
|
+
componentId: "sc-1ye9xz5-1"
|
|
2154
|
+
})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
2155
|
+
// The visible content, hidden from assistive technology when an aria-label replaces it.
|
|
2156
|
+
// display: contents keeps the root's flex layout and gap.
|
|
2157
|
+
])), visuallyHidden);
|
|
2158
|
+
// The visible content, hidden from assistive technology when an aria-label replaces it.
|
|
2159
|
+
// display: contents keeps the root's flex layout and gap.
|
|
2160
|
+
var VisibleContent = styled__default.default.span.withConfig({
|
|
2161
|
+
displayName: "StatusLabelBase__VisibleContent",
|
|
2162
|
+
componentId: "sc-1ye9xz5-2"
|
|
2163
|
+
})(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: contents;\n"], ["\n display: contents;\n"
|
|
2058
2164
|
/**
|
|
2059
|
-
*
|
|
2060
|
-
*
|
|
2061
|
-
*
|
|
2062
|
-
|
|
2063
|
-
*
|
|
2064
|
-
* @example
|
|
2065
|
-
* ```tsx
|
|
2066
|
-
* <StatusBadge status="completed" />
|
|
2067
|
-
*
|
|
2068
|
-
* <StatusBadge
|
|
2069
|
-
* status="pending"
|
|
2070
|
-
* label="Awaiting approval"
|
|
2071
|
-
* size="small"
|
|
2072
|
-
* />
|
|
2073
|
-
*
|
|
2074
|
-
* <StatusBadge
|
|
2075
|
-
* status="failed"
|
|
2076
|
-
* showIcon={false}
|
|
2077
|
-
* liveRegion={true}
|
|
2078
|
-
* />
|
|
2079
|
-
* ```
|
|
2080
|
-
*/])), visuallyHidden);
|
|
2165
|
+
* Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
|
|
2166
|
+
* from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
|
|
2167
|
+
* (decision 0018).
|
|
2168
|
+
*/])));
|
|
2081
2169
|
/**
|
|
2082
|
-
*
|
|
2083
|
-
*
|
|
2084
|
-
*
|
|
2085
|
-
* Maps to 6 common status types with semantic color tokens.
|
|
2086
|
-
*
|
|
2087
|
-
* @example
|
|
2088
|
-
* ```tsx
|
|
2089
|
-
* <StatusBadge status="completed" />
|
|
2090
|
-
*
|
|
2091
|
-
* <StatusBadge
|
|
2092
|
-
* status="pending"
|
|
2093
|
-
* label="Awaiting approval"
|
|
2094
|
-
* size="small"
|
|
2095
|
-
* />
|
|
2096
|
-
*
|
|
2097
|
-
* <StatusBadge
|
|
2098
|
-
* status="failed"
|
|
2099
|
-
* showIcon={false}
|
|
2100
|
-
* liveRegion={true}
|
|
2101
|
-
* />
|
|
2102
|
-
* ```
|
|
2170
|
+
* Shared implementation of StatusLabel and the deprecated StatusBadge. Internal: not exported
|
|
2171
|
+
* from the package. `showIcon` exists only for StatusBadge; StatusLabel always shows the icon
|
|
2172
|
+
* (decision 0018).
|
|
2103
2173
|
*/
|
|
2104
|
-
var
|
|
2174
|
+
var StatusLabelBase = function StatusLabelBase(_a) {
|
|
2105
2175
|
var status = _a.status,
|
|
2106
2176
|
label = _a.label,
|
|
2107
2177
|
_b = _a.size,
|
|
@@ -2113,36 +2183,74 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
2113
2183
|
dataTestId = _a["data-testid"],
|
|
2114
2184
|
ariaLabel = _a["aria-label"];
|
|
2115
2185
|
var statusConfig = getStatusConfig(status);
|
|
2116
|
-
var sizeStyles = sizeConfig[size];
|
|
2186
|
+
var sizeStyles = sizeConfig$1[size];
|
|
2117
2187
|
var displayLabel = label || statusConfig.label;
|
|
2118
|
-
|
|
2188
|
+
// A blank aria-label is no label at all, so it falls back like a missing one
|
|
2189
|
+
var accessibleLabel = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
|
|
2190
|
+
return jsxRuntime.jsxs(StyledStatusLabel, {
|
|
2119
2191
|
"$status": status,
|
|
2120
2192
|
"$size": size,
|
|
2121
2193
|
role: "status",
|
|
2122
|
-
"aria-label":
|
|
2123
|
-
"aria-live": liveRegion ? 'polite' :
|
|
2194
|
+
"aria-label": accessibleLabel || "Status: ".concat(displayLabel),
|
|
2195
|
+
"aria-live": liveRegion ? 'polite' : 'off',
|
|
2124
2196
|
"aria-atomic": liveRegion ? 'true' : undefined,
|
|
2125
2197
|
"data-testid": dataTestId,
|
|
2126
|
-
children: [
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2198
|
+
children: [jsxRuntime.jsxs(VisibleContent, {
|
|
2199
|
+
"aria-hidden": accessibleLabel ? 'true' : undefined,
|
|
2200
|
+
children: [showIcon && jsxRuntime.jsx(Icon, {
|
|
2201
|
+
name: statusConfig.icon,
|
|
2202
|
+
size: sizeStyles.iconSize,
|
|
2203
|
+
iconColor: "inherit",
|
|
2204
|
+
"aria-hidden": "true"
|
|
2205
|
+
}), displayLabel, jsxRuntime.jsxs(ScreenReaderOnly, {
|
|
2206
|
+
children: [status, " status"]
|
|
2207
|
+
})]
|
|
2208
|
+
}), accessibleLabel && jsxRuntime.jsx(ScreenReaderOnly, {
|
|
2209
|
+
children: accessibleLabel
|
|
2133
2210
|
})]
|
|
2134
2211
|
});
|
|
2135
2212
|
};
|
|
2213
|
+
var templateObject_1$v, templateObject_2$p, templateObject_3$n, templateObject_4$j;
|
|
2214
|
+
|
|
2215
|
+
/**
|
|
2216
|
+
* StatusBadge displays a transaction or task status.
|
|
2217
|
+
*
|
|
2218
|
+
* @deprecated Renamed to `StatusLabel` (same `status`, `size`, `label`, `liveRegion`), which always
|
|
2219
|
+
* shows the icon. StatusBadge is removed in 3.0 (decision 0018).
|
|
2220
|
+
*/
|
|
2221
|
+
var StatusBadge = function StatusBadge(props) {
|
|
2222
|
+
return jsxRuntime.jsx(StatusLabelBase, __assign({}, props));
|
|
2223
|
+
};
|
|
2136
2224
|
StatusBadge.displayName = 'StatusBadge';
|
|
2137
|
-
var templateObject_1$u, templateObject_2$o, templateObject_3$m;
|
|
2138
2225
|
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2226
|
+
/**
|
|
2227
|
+
* StatusLabel conveys the status of something, such as a transaction or task (decision 0018).
|
|
2228
|
+
*
|
|
2229
|
+
* Uses only the status colour tokens and always shows an icon with its text, so status is never
|
|
2230
|
+
* conveyed by colour alone. Not interactive. Announces changes politely to screen readers.
|
|
2231
|
+
*
|
|
2232
|
+
* @example
|
|
2233
|
+
* ```tsx
|
|
2234
|
+
* <StatusLabel status="completed" />
|
|
2235
|
+
*
|
|
2236
|
+
* <StatusLabel status="pending" label="Awaiting approval" size="small" />
|
|
2237
|
+
* ```
|
|
2238
|
+
*/
|
|
2239
|
+
// showIcon comes last so no caller (for example plain JavaScript) can hide the icon
|
|
2240
|
+
var StatusLabel = function StatusLabel(props) {
|
|
2241
|
+
return jsxRuntime.jsx(StatusLabelBase, __assign({}, props, {
|
|
2242
|
+
showIcon: true
|
|
2243
|
+
}));
|
|
2244
|
+
};
|
|
2245
|
+
StatusLabel.displayName = 'StatusLabel';
|
|
2246
|
+
|
|
2247
|
+
var semantic$d = data.tokensJson.semantic;
|
|
2248
|
+
var color$5 = semantic$d.color,
|
|
2249
|
+
spacing$5 = semantic$d.spacing,
|
|
2250
|
+
border$6 = semantic$d.border,
|
|
2251
|
+
size$1 = semantic$d.size;
|
|
2144
2252
|
var label = data.tokensJson.component.badge.label;
|
|
2145
|
-
var layout$3 = spacing$
|
|
2253
|
+
var layout$3 = spacing$5.layout;
|
|
2146
2254
|
var radius = border$6.radius;
|
|
2147
2255
|
var StyledTag = styled__default.default.span.withConfig({
|
|
2148
2256
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2150,43 +2258,49 @@ var StyledTag = styled__default.default.span.withConfig({
|
|
|
2150
2258
|
},
|
|
2151
2259
|
displayName: "Tag__StyledTag",
|
|
2152
2260
|
componentId: "sc-lzfmti-0"
|
|
2153
|
-
})(templateObject_1$
|
|
2261
|
+
})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n user-select: none;\n white-space: nowrap;\n\n /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n height: ", ";\n padding: ", ";\n font: ", ";\n font-weight: ", ";\n \n /* Variant styles */\n background-color: ", ";\n \n color: ", ";\n \n border: ", ";\n"], ["\n box-sizing: border-box; /* the height includes padding and border, without relying on a global reset */\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n user-select: none;\n white-space: nowrap;\n\n /* Size (decision 0018): small has no vertical padding so the text line fits inside 20px */\n height: ", ";\n padding: ", ";\n font: ", ";\n font-weight: ", ";\n \n /* Variant styles */\n background-color: ", ";\n \n color: ", ";\n \n border: ", ";\n"
|
|
2154
2262
|
/**
|
|
2155
2263
|
* Tag component for categorizing and labeling content
|
|
2156
2264
|
*
|
|
2157
2265
|
* A static, non-interactive label used to categorize elements or objects in the UI.
|
|
2158
2266
|
* Tags help users quickly identify and understand content classification.
|
|
2159
|
-
*/])), radius.sm,
|
|
2267
|
+
*/])), radius.sm, function (_a) {
|
|
2268
|
+
var $size = _a.$size;
|
|
2269
|
+
return size$1.label[$size];
|
|
2270
|
+
}, function (_a) {
|
|
2271
|
+
var $size = _a.$size;
|
|
2272
|
+
return $size === 'small' ? "0 ".concat(layout$3.sm) : "".concat(layout$3.xs, " ").concat(layout$3.sm);
|
|
2273
|
+
}, label.typography.small, label.fontWeight, function (_a) {
|
|
2160
2274
|
var $variant = _a.$variant;
|
|
2161
2275
|
switch ($variant) {
|
|
2162
2276
|
case 'interactive':
|
|
2163
|
-
return color$
|
|
2277
|
+
return color$5.background['interactive-subtle'];
|
|
2164
2278
|
case 'success':
|
|
2165
|
-
return color$
|
|
2279
|
+
return color$5.background['success-subtle'];
|
|
2166
2280
|
case 'warning':
|
|
2167
|
-
return color$
|
|
2281
|
+
return color$5.background['warning-subtle'];
|
|
2168
2282
|
case 'error':
|
|
2169
|
-
return color$
|
|
2283
|
+
return color$5.background['error-subtle'];
|
|
2170
2284
|
case 'emphasis':
|
|
2171
|
-
return color$
|
|
2285
|
+
return color$5.background.emphasis;
|
|
2172
2286
|
default:
|
|
2173
|
-
return color$
|
|
2287
|
+
return color$5.background.surface;
|
|
2174
2288
|
}
|
|
2175
2289
|
}, function (_a) {
|
|
2176
2290
|
var $variant = _a.$variant;
|
|
2177
2291
|
switch ($variant) {
|
|
2178
2292
|
case 'interactive':
|
|
2179
|
-
return color$
|
|
2293
|
+
return color$5.text.interactive;
|
|
2180
2294
|
case 'success':
|
|
2181
|
-
return color$
|
|
2295
|
+
return color$5.text.success;
|
|
2182
2296
|
case 'warning':
|
|
2183
|
-
return color$
|
|
2297
|
+
return color$5.text.warning;
|
|
2184
2298
|
case 'error':
|
|
2185
|
-
return color$
|
|
2299
|
+
return color$5.text.error;
|
|
2186
2300
|
case 'emphasis':
|
|
2187
|
-
return color$
|
|
2301
|
+
return color$5.text.inverse;
|
|
2188
2302
|
default:
|
|
2189
|
-
return color$
|
|
2303
|
+
return color$5.text["default"];
|
|
2190
2304
|
}
|
|
2191
2305
|
}, function (_a) {
|
|
2192
2306
|
var $variant = _a.$variant,
|
|
@@ -2194,17 +2308,17 @@ var StyledTag = styled__default.default.span.withConfig({
|
|
|
2194
2308
|
if (!$border) return 'none';
|
|
2195
2309
|
switch ($variant) {
|
|
2196
2310
|
case 'interactive':
|
|
2197
|
-
return "".concat(semantic$
|
|
2311
|
+
return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.interactive);
|
|
2198
2312
|
case 'success':
|
|
2199
|
-
return "".concat(semantic$
|
|
2313
|
+
return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.success);
|
|
2200
2314
|
case 'warning':
|
|
2201
|
-
return "".concat(semantic$
|
|
2315
|
+
return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.warning);
|
|
2202
2316
|
case 'error':
|
|
2203
|
-
return "".concat(semantic$
|
|
2317
|
+
return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border.error);
|
|
2204
2318
|
case 'emphasis':
|
|
2205
|
-
return "".concat(semantic$
|
|
2319
|
+
return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.background.emphasis);
|
|
2206
2320
|
default:
|
|
2207
|
-
return "".concat(semantic$
|
|
2321
|
+
return "".concat(semantic$d.border.width.thin, " solid ").concat(color$5.border["default"]);
|
|
2208
2322
|
}
|
|
2209
2323
|
});
|
|
2210
2324
|
/**
|
|
@@ -2219,11 +2333,14 @@ var Tag = function Tag(_a) {
|
|
|
2219
2333
|
variant = _b === void 0 ? 'default' : _b,
|
|
2220
2334
|
_c = _a.border,
|
|
2221
2335
|
border = _c === void 0 ? true : _c,
|
|
2336
|
+
_d = _a.size,
|
|
2337
|
+
tagSize = _d === void 0 ? 'medium' : _d,
|
|
2222
2338
|
dataTestId = _a["data-testid"],
|
|
2223
|
-
props = __rest(_a, ["children", "variant", "border", 'data-testid']);
|
|
2339
|
+
props = __rest(_a, ["children", "variant", "border", "size", 'data-testid']);
|
|
2224
2340
|
return jsxRuntime.jsx(StyledTag, __assign({
|
|
2225
2341
|
"$variant": variant,
|
|
2226
2342
|
"$border": border,
|
|
2343
|
+
"$size": tagSize,
|
|
2227
2344
|
"data-testid": dataTestId,
|
|
2228
2345
|
"data-variant": variant,
|
|
2229
2346
|
"data-border": border,
|
|
@@ -2233,24 +2350,24 @@ var Tag = function Tag(_a) {
|
|
|
2233
2350
|
children: children
|
|
2234
2351
|
}));
|
|
2235
2352
|
};
|
|
2236
|
-
var templateObject_1$
|
|
2353
|
+
var templateObject_1$u;
|
|
2237
2354
|
|
|
2238
2355
|
// Destructure tokens for cleaner access
|
|
2239
|
-
var semantic$
|
|
2240
|
-
var spacing$
|
|
2241
|
-
var layout$2 = spacing$
|
|
2356
|
+
var semantic$c = data.tokensJson.semantic;
|
|
2357
|
+
var spacing$4 = semantic$c.spacing;
|
|
2358
|
+
var layout$2 = spacing$4.layout;
|
|
2242
2359
|
var StyledBalanceSection = styled__default.default.div.withConfig({
|
|
2243
2360
|
displayName: "AccountCard__StyledBalanceSection",
|
|
2244
2361
|
componentId: "sc-1erp7zn-0"
|
|
2245
|
-
})(templateObject_1$
|
|
2362
|
+
})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), layout$2.lg);
|
|
2246
2363
|
var StyledTrendSection = styled__default.default.div.withConfig({
|
|
2247
2364
|
displayName: "AccountCard__StyledTrendSection",
|
|
2248
2365
|
componentId: "sc-1erp7zn-1"
|
|
2249
|
-
})(templateObject_2$
|
|
2366
|
+
})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), layout$2.xs);
|
|
2250
2367
|
styled__default.default.div.withConfig({
|
|
2251
2368
|
displayName: "AccountCard__StyledActions",
|
|
2252
2369
|
componentId: "sc-1erp7zn-2"
|
|
2253
|
-
})(templateObject_3$
|
|
2370
|
+
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n margin-top: auto;\n"], ["\n display: flex;\n gap: ", ";\n margin-top: auto;\n"])), layout$2.sm);
|
|
2254
2371
|
var StyledStackWrapper = styled__default.default.div.withConfig({
|
|
2255
2372
|
displayName: "AccountCard__StyledStackWrapper",
|
|
2256
2373
|
componentId: "sc-1erp7zn-3"
|
|
@@ -2314,7 +2431,7 @@ var AccountCard = function AccountCard(_a) {
|
|
|
2314
2431
|
bg: "subtle",
|
|
2315
2432
|
border: "default",
|
|
2316
2433
|
borderRadius: "xl",
|
|
2317
|
-
transition: "box-shadow ".concat(semantic$
|
|
2434
|
+
transition: "box-shadow ".concat(semantic$c.motion.duration.normal, " ").concat(semantic$c.motion.easing.easeOut),
|
|
2318
2435
|
cursor: isClickable ? 'pointer' : 'default',
|
|
2319
2436
|
hoverShadow: isClickable ? 'floating' : undefined,
|
|
2320
2437
|
onClick: handleClick,
|
|
@@ -2368,8 +2485,8 @@ var AccountCard = function AccountCard(_a) {
|
|
|
2368
2485
|
}), trend && trendValue && jsxRuntime.jsx(StyledTrendSection, {
|
|
2369
2486
|
"aria-label": "Trend ".concat(trend),
|
|
2370
2487
|
role: "img",
|
|
2371
|
-
children: jsxRuntime.jsx(
|
|
2372
|
-
size: "
|
|
2488
|
+
children: jsxRuntime.jsx(CategoryLabel, {
|
|
2489
|
+
size: "medium",
|
|
2373
2490
|
icon: trendIcon,
|
|
2374
2491
|
color: trendColor,
|
|
2375
2492
|
variant: "minimal",
|
|
@@ -2409,10 +2526,10 @@ var AccountCard = function AccountCard(_a) {
|
|
|
2409
2526
|
})
|
|
2410
2527
|
});
|
|
2411
2528
|
};
|
|
2412
|
-
var templateObject_1$
|
|
2529
|
+
var templateObject_1$t, templateObject_2$o, templateObject_3$m, templateObject_4$i, templateObject_5$f;
|
|
2413
2530
|
|
|
2414
|
-
var semantic$
|
|
2415
|
-
var _a$5 = semantic$
|
|
2531
|
+
var semantic$b = data.tokensJson.semantic;
|
|
2532
|
+
var _a$5 = semantic$b.motion,
|
|
2416
2533
|
duration$2 = _a$5.duration,
|
|
2417
2534
|
easing$2 = _a$5.easing;
|
|
2418
2535
|
var StyledListItem = styled__default.default.li.withConfig({
|
|
@@ -2421,16 +2538,16 @@ var StyledListItem = styled__default.default.li.withConfig({
|
|
|
2421
2538
|
},
|
|
2422
2539
|
displayName: "ListItem__StyledListItem",
|
|
2423
2540
|
componentId: "sc-1wzzt21-0"
|
|
2424
|
-
})(templateObject_1$
|
|
2541
|
+
})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height: ", ";\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n \n /* Destructive state - apply error color to text */\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n min-height: ", ";\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n \n /* Destructive state - apply error color to text */\n ", "\n"])), semantic$b.size.touchTarget, function (_a) {
|
|
2425
2542
|
var $interactive = _a.$interactive;
|
|
2426
2543
|
return $interactive && 'user-select: none;';
|
|
2427
2544
|
}, function (_a) {
|
|
2428
2545
|
var $disabled = _a.$disabled;
|
|
2429
|
-
return $disabled && "\n opacity: ".concat(semantic$
|
|
2546
|
+
return $disabled && "\n opacity: ".concat(semantic$b.opacity.disabled, ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
2430
2547
|
}, function (_a) {
|
|
2431
2548
|
var $destructive = _a.$destructive,
|
|
2432
2549
|
$disabled = _a.$disabled;
|
|
2433
|
-
return $destructive && !$disabled && "\n color: ".concat(semantic$
|
|
2550
|
+
return $destructive && !$disabled && "\n color: ".concat(semantic$b.color.text.error, ";\n ");
|
|
2434
2551
|
});
|
|
2435
2552
|
var StyledItemContent = styled__default.default.div.withConfig({
|
|
2436
2553
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2438,12 +2555,12 @@ var StyledItemContent = styled__default.default.div.withConfig({
|
|
|
2438
2555
|
},
|
|
2439
2556
|
displayName: "ListItem__StyledItemContent",
|
|
2440
2557
|
componentId: "sc-1wzzt21-1"
|
|
2441
|
-
})(templateObject_2$
|
|
2558
|
+
})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color ", " ", ";\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"], ["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color ", " ", ";\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"])), semantic$b.spacing.layout.md, function (_a) {
|
|
2442
2559
|
var $spacing = _a.$spacing;
|
|
2443
|
-
return $spacing === 'compact' ? "".concat(semantic$
|
|
2444
|
-
}, semantic$
|
|
2560
|
+
return $spacing === 'compact' ? "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.md) : "".concat(semantic$b.spacing.layout.md, " ").concat(semantic$b.spacing.layout.lg);
|
|
2561
|
+
}, semantic$b.border.radius.sm, function (_a) {
|
|
2445
2562
|
var $selected = _a.$selected;
|
|
2446
|
-
return $selected ? semantic$
|
|
2563
|
+
return $selected ? semantic$b.color.background['interactive-subtle'] : 'transparent';
|
|
2447
2564
|
}, duration$2.fast, easing$2.easeOut, function (_a) {
|
|
2448
2565
|
var $interactive = _a.$interactive,
|
|
2449
2566
|
$disabled = _a.$disabled;
|
|
@@ -2455,26 +2572,26 @@ var StyledItemContent = styled__default.default.div.withConfig({
|
|
|
2455
2572
|
$disabled = _a.$disabled,
|
|
2456
2573
|
$selected = _a.$selected;
|
|
2457
2574
|
return !$disabled && $interactive && "\n &:hover {\n background-color: ".concat($selected ? data.tokensJson.component.button.variants.secondary.backgroundColor : data.tokensJson.component.button.variants.secondary.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat(data.tokensJson.component.button.variants.naked.backgroundColor, ";\n }\n ");
|
|
2458
|
-
}, semantic$
|
|
2575
|
+
}, semantic$b.border.width.thick, semantic$b.color.border.interactive, semantic$b.border.focusOffset);
|
|
2459
2576
|
var StyledIconContainer$1 = styled__default.default.div.withConfig({
|
|
2460
2577
|
displayName: "ListItem__StyledIconContainer",
|
|
2461
2578
|
componentId: "sc-1wzzt21-2"
|
|
2462
|
-
})(templateObject_3$
|
|
2579
|
+
})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: ", ";\n height: ", ";\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: ", ";\n height: ", ";\n"])), semantic$b.size.icon.lg, semantic$b.size.icon.lg);
|
|
2463
2580
|
var StyledTextContent = styled__default.default.div.withConfig({
|
|
2464
2581
|
displayName: "ListItem__StyledTextContent",
|
|
2465
2582
|
componentId: "sc-1wzzt21-3"
|
|
2466
|
-
})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"])), semantic$
|
|
2583
|
+
})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"])), semantic$b.spacing.layout.xs);
|
|
2467
2584
|
var StyledRightContent = styled__default.default.div.withConfig({
|
|
2468
2585
|
displayName: "ListItem__StyledRightContent",
|
|
2469
2586
|
componentId: "sc-1wzzt21-4"
|
|
2470
|
-
})(templateObject_5$e || (templateObject_5$e = __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$
|
|
2587
|
+
})(templateObject_5$e || (templateObject_5$e = __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$b.spacing.layout.sm);
|
|
2471
2588
|
var StyledChevronIcon = styled__default.default.div.withConfig({
|
|
2472
2589
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2473
2590
|
return !prop.startsWith('$');
|
|
2474
2591
|
},
|
|
2475
2592
|
displayName: "ListItem__StyledChevronIcon",
|
|
2476
2593
|
componentId: "sc-1wzzt21-5"
|
|
2477
|
-
})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n color: ", ";\n transition: transform ", " ", ";\n transform: rotate(", ");\n pointer-events: none;\n\n ", " {\n transition: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n color: ", ";\n transition: transform ", " ", ";\n transform: rotate(", ");\n pointer-events: none;\n\n ", " {\n transition: none;\n }\n"])), semantic$
|
|
2594
|
+
})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n color: ", ";\n transition: transform ", " ", ";\n transform: rotate(", ");\n pointer-events: none;\n\n ", " {\n transition: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n color: ", ";\n transition: transform ", " ", ";\n transform: rotate(", ");\n pointer-events: none;\n\n ", " {\n transition: none;\n }\n"])), semantic$b.size.icon.lg, semantic$b.size.icon.lg, semantic$b.color.icon.subdued, duration$2.fast, easing$2.easeOut, function (_a) {
|
|
2478
2595
|
var $expanded = _a.$expanded;
|
|
2479
2596
|
return $expanded ? '180deg' : '0deg';
|
|
2480
2597
|
}, reducedMotion);
|
|
@@ -2496,7 +2613,7 @@ var StyledExpandedContent = styled__default.default.div.withConfig({
|
|
|
2496
2613
|
}, reducedMotion, duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, function (_a) {
|
|
2497
2614
|
var $expanded = _a.$expanded,
|
|
2498
2615
|
$spacing = _a.$spacing;
|
|
2499
|
-
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$
|
|
2616
|
+
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.md, " ").concat(semantic$b.spacing.layout.sm, " ").concat(data.tokensJson.component.listItem.expandedIndent.compact) : "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.lg, " ").concat(semantic$b.spacing.layout.md, " ").concat(data.tokensJson.component.listItem.expandedIndent.comfortable), ";\n background-color: ").concat(semantic$b.color.background['subtle'], ";\n border-radius: ").concat(semantic$b.border.radius.sm, ";\n margin: 0 ").concat($spacing === 'compact' ? semantic$b.spacing.layout.md : semantic$b.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$b.spacing.layout.sm : semantic$b.spacing.layout.md, ";\n ");
|
|
2500
2617
|
});
|
|
2501
2618
|
var ListItem = function ListItem(_a) {
|
|
2502
2619
|
var primary = _a.primary,
|
|
@@ -2609,7 +2726,7 @@ var ListItem = function ListItem(_a) {
|
|
|
2609
2726
|
}));
|
|
2610
2727
|
};
|
|
2611
2728
|
ListItem.displayName = 'ListItem';
|
|
2612
|
-
var templateObject_1$
|
|
2729
|
+
var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$9;
|
|
2613
2730
|
|
|
2614
2731
|
// How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils.
|
|
2615
2732
|
var EXIT_DURATION_MS = parseInt(data.tokensJson.semantic.motion.duration.fast, 10);
|
|
@@ -2655,24 +2772,24 @@ function useInert(ref, isInert) {
|
|
|
2655
2772
|
}
|
|
2656
2773
|
|
|
2657
2774
|
var _a$4 = data.tokensJson.semantic,
|
|
2658
|
-
color$
|
|
2775
|
+
color$4 = _a$4.color,
|
|
2659
2776
|
border$5 = _a$4.border,
|
|
2660
2777
|
layout$1 = _a$4.spacing.layout,
|
|
2661
2778
|
motion$3 = _a$4.motion,
|
|
2662
2779
|
elevation$2 = _a$4.elevation;
|
|
2663
|
-
var slideUp = styled.keyframes(templateObject_1$
|
|
2664
|
-
var fadeIn$2 = styled.keyframes(templateObject_2$
|
|
2780
|
+
var slideUp = styled.keyframes(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
2781
|
+
var fadeIn$2 = styled.keyframes(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
2665
2782
|
var StyledOverlay$2 = styled__default.default.div.withConfig({
|
|
2666
2783
|
displayName: "ActionSheet__StyledOverlay",
|
|
2667
2784
|
componentId: "sc-regbol-0"
|
|
2668
|
-
})(templateObject_3$
|
|
2785
|
+
})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color: ", ";\n z-index: ", ";\n animation: ", " ", " ", "", ";\n"], ["\n position: fixed;\n inset: 0;\n background-color: ", ";\n z-index: ", ";\n animation: ", " ", " ", "", ";\n"])), color$4.background.overlay, data.tokensJson.semantic.zIndex.modal, fadeIn$2, motion$3.duration.normal, motion$3.easing.easeOut, function (_a) {
|
|
2669
2786
|
var $isExiting = _a.$isExiting;
|
|
2670
2787
|
return $isExiting && exitAnimation;
|
|
2671
2788
|
});
|
|
2672
2789
|
var StyledActionSheet = styled__default.default.div.withConfig({
|
|
2673
2790
|
displayName: "ActionSheet__StyledActionSheet",
|
|
2674
2791
|
componentId: "sc-regbol-1"
|
|
2675
|
-
})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n box-shadow: ", ";\n max-height: 90vh;\n overflow-y: auto;\n z-index: ", ";\n animation: ", " ", " ", "", ";\n\n ", " {\n animation: ", " ", " ", "", ";\n }\n\n"], ["\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n box-shadow: ", ";\n max-height: 90vh;\n overflow-y: auto;\n z-index: ", ";\n animation: ", " ", " ", "", ";\n\n ", " {\n animation: ", " ", " ", "", ";\n }\n\n"])), color$
|
|
2792
|
+
})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n box-shadow: ", ";\n max-height: 90vh;\n overflow-y: auto;\n z-index: ", ";\n animation: ", " ", " ", "", ";\n\n ", " {\n animation: ", " ", " ", "", ";\n }\n\n"], ["\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n box-shadow: ", ";\n max-height: 90vh;\n overflow-y: auto;\n z-index: ", ";\n animation: ", " ", " ", "", ";\n\n ", " {\n animation: ", " ", " ", "", ";\n }\n\n"])), color$4.background.subtle, border$5.radius.lg, border$5.radius.lg, elevation$2.overlay, data.tokensJson.semantic.zIndex.modal, slideUp, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
|
|
2676
2793
|
var $isExiting = _a.$isExiting;
|
|
2677
2794
|
return $isExiting && exitAnimation;
|
|
2678
2795
|
}, reducedMotion, fadeIn$2, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
|
|
@@ -2690,7 +2807,7 @@ var StyledHeaderContent = styled__default.default.div.withConfig({
|
|
|
2690
2807
|
var StyledCloseButton = styled__default.default.button.withConfig({
|
|
2691
2808
|
displayName: "ActionSheet__StyledCloseButton",
|
|
2692
2809
|
componentId: "sc-regbol-4"
|
|
2693
|
-
})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"])), layout$1.sm, color$
|
|
2810
|
+
})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"])), layout$1.sm, color$4.icon.subdued, border$5.radius.sm, motion$3.hover, layout$1.sm, color$4.icon["default"], color$4.background.surface, border$5.focus, layout$1.xs);
|
|
2694
2811
|
var StyledActionsList = styled__default.default.ul.withConfig({
|
|
2695
2812
|
displayName: "ActionSheet__StyledActionsList",
|
|
2696
2813
|
componentId: "sc-regbol-5"
|
|
@@ -2917,7 +3034,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2917
3034
|
})]
|
|
2918
3035
|
}), document.body);
|
|
2919
3036
|
};
|
|
2920
|
-
var templateObject_1$
|
|
3037
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$8, templateObject_8$7;
|
|
2921
3038
|
|
|
2922
3039
|
function detectSpeechRecognitionConstructor(targetWindow) {
|
|
2923
3040
|
if (!targetWindow) return null;
|
|
@@ -3017,36 +3134,36 @@ function agentInputStateTransition(currentState, event) {
|
|
|
3017
3134
|
}
|
|
3018
3135
|
}
|
|
3019
3136
|
|
|
3020
|
-
var semantic$
|
|
3137
|
+
var semantic$a = data.tokensJson.semantic,
|
|
3021
3138
|
component$1 = data.tokensJson.component;
|
|
3022
3139
|
var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
|
|
3023
3140
|
var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
|
|
3024
3141
|
var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
|
|
3025
|
-
var rotateRing = styled.keyframes(templateObject_1$
|
|
3142
|
+
var rotateRing = styled.keyframes(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"], ["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"])));
|
|
3026
3143
|
var Container = styled__default.default.div.withConfig({
|
|
3027
3144
|
displayName: "AgentInput__Container",
|
|
3028
3145
|
componentId: "sc-fhl996-0"
|
|
3029
|
-
})(templateObject_2$
|
|
3146
|
+
})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), semantic$a.spacing.layout.sm);
|
|
3030
3147
|
var ControlsRow = styled__default.default.div.withConfig({
|
|
3031
3148
|
displayName: "AgentInput__ControlsRow",
|
|
3032
3149
|
componentId: "sc-fhl996-1"
|
|
3033
|
-
})(templateObject_3$
|
|
3150
|
+
})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
3034
3151
|
var InputShell = styled__default.default.div.withConfig({
|
|
3035
3152
|
displayName: "AgentInput__InputShell",
|
|
3036
3153
|
componentId: "sc-fhl996-2"
|
|
3037
|
-
})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", " ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: border-color ", " ", ", outline ", " ", ";\n\n &:focus-within {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n\n &[data-disabled='true'] {\n background-color: ", ";\n border-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", " ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: border-color ", " ", ", outline ", " ", ";\n\n &:focus-within {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n\n &[data-disabled='true'] {\n background-color: ", ";\n border-color: ", ";\n }\n"])), semantic$
|
|
3154
|
+
})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", " ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: border-color ", " ", ", outline ", " ", ";\n\n &:focus-within {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n\n &[data-disabled='true'] {\n background-color: ", ";\n border-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", " ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: border-color ", " ", ", outline ", " ", ";\n\n &:focus-within {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n\n &[data-disabled='true'] {\n background-color: ", ";\n border-color: ", ";\n }\n"])), semantic$a.spacing.layout.sm, semantic$a.spacing.layout.xs, semantic$a.spacing.layout.sm, semantic$a.spacing.layout.xs, semantic$a.spacing.component.lg, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$a.border.radius['3xl'], semantic$a.elevation.raised, semantic$a.motion.duration.normal, semantic$a.motion.easing.easeInOut, semantic$a.motion.duration.normal, semantic$a.motion.easing.easeInOut, component$1.input.focus.borderColor, component$1.input.focus.outline, semantic$a.border.focusOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
|
|
3038
3155
|
var Input = styled__default.default.input.withConfig({
|
|
3039
3156
|
displayName: "AgentInput__Input",
|
|
3040
3157
|
componentId: "sc-fhl996-3"
|
|
3041
|
-
})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n min-height: ", ";\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 min-width: 0;\n min-height: ", ";\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$
|
|
3158
|
+
})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n min-height: ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n\n &::placeholder {\n color: ", ";\n /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n opacity: 1;\n }\n\n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n flex: 1;\n min-width: 0;\n min-height: ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n\n &::placeholder {\n color: ", ";\n /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n opacity: 1;\n }\n\n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"])), semantic$a.spacing.layout['7xl'], semantic$a.typography.body, semantic$a.color.text["default"], component$1.input.placeholder.textColor, semantic$a.color.text.disabled);
|
|
3042
3159
|
var InputActions = styled__default.default.div.withConfig({
|
|
3043
3160
|
displayName: "AgentInput__InputActions",
|
|
3044
3161
|
componentId: "sc-fhl996-4"
|
|
3045
|
-
})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"])), semantic$
|
|
3162
|
+
})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"])), semantic$a.spacing.layout.sm);
|
|
3046
3163
|
var CircularActionIconButton = styled__default.default(IconButton).withConfig({
|
|
3047
3164
|
displayName: "AgentInput__CircularActionIconButton",
|
|
3048
3165
|
componentId: "sc-fhl996-5"
|
|
3049
|
-
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$
|
|
3166
|
+
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$a.border.radius.circle);
|
|
3050
3167
|
var InputWrapper = styled__default.default.div.withConfig({
|
|
3051
3168
|
displayName: "AgentInput__InputWrapper",
|
|
3052
3169
|
componentId: "sc-fhl996-6"
|
|
@@ -3060,7 +3177,7 @@ var MicButtonWrapper = styled__default.default.div.withConfig({
|
|
|
3060
3177
|
})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n border-radius: ", ";\n\n & > button {\n position: relative;\n z-index: 1;\n }\n"], ["\n position: relative;\n display: inline-flex;\n border-radius: ", ";\n\n & > button {\n position: relative;\n z-index: 1;\n }\n"
|
|
3061
3178
|
// Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
|
|
3062
3179
|
// eslint-disable-next-line no-restricted-syntax
|
|
3063
|
-
])), semantic$
|
|
3180
|
+
])), semantic$a.border.radius.circle);
|
|
3064
3181
|
// Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
|
|
3065
3182
|
// eslint-disable-next-line no-restricted-syntax
|
|
3066
3183
|
var ringMask = styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"], ["radial-gradient(farthest-side, transparent calc(100% - var(--ring-thickness)), #000 calc(100% - var(--ring-thickness)))"])));
|
|
@@ -3070,21 +3187,21 @@ var MicListeningRing = styled__default.default.span.withConfig({
|
|
|
3070
3187
|
},
|
|
3071
3188
|
displayName: "AgentInput__MicListeningRing",
|
|
3072
3189
|
componentId: "sc-fhl996-8"
|
|
3073
|
-
})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: ", ";\n -webkit-mask: ", ";\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"], ["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: ", ";\n -webkit-mask: ", ";\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"])), semantic$
|
|
3190
|
+
})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: ", ";\n -webkit-mask: ", ";\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"], ["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: ", ";\n -webkit-mask: ", ";\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"])), semantic$a.border.width.thick, semantic$a.spacing.layout.xs, semantic$a.border.focusOffset, semantic$a.border.radius.circle, semantic$a.color.background['interactive-subtle'], semantic$a.color.background.interactive, semantic$a.color.background['interactive-hover'], semantic$a.color.background.interactive, semantic$a.color.background['interactive-subtle'], ringMask, ringMask, function (_a) {
|
|
3074
3191
|
var $reducedMotion = _a.$reducedMotion;
|
|
3075
3192
|
return !$reducedMotion && styled.css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n animation: ", " 1300ms linear infinite;\n "], ["\n animation: ", " 1300ms linear infinite;\n "])), rotateRing);
|
|
3076
3193
|
});
|
|
3077
3194
|
var StatusRow = styled__default.default.div.withConfig({
|
|
3078
3195
|
displayName: "AgentInput__StatusRow",
|
|
3079
3196
|
componentId: "sc-fhl996-9"
|
|
3080
|
-
})(templateObject_13$
|
|
3197
|
+
})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"])), semantic$a.spacing.layout.md, semantic$a.spacing.layout['2xl']);
|
|
3081
3198
|
var StatusText = styled__default.default.div.withConfig({
|
|
3082
3199
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3083
3200
|
return !prop.startsWith('$');
|
|
3084
3201
|
},
|
|
3085
3202
|
displayName: "AgentInput__StatusText",
|
|
3086
3203
|
componentId: "sc-fhl996-10"
|
|
3087
|
-
})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$
|
|
3204
|
+
})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$a.spacing.layout.xl);
|
|
3088
3205
|
var StatusAnnouncement = styled__default.default.div.withConfig({
|
|
3089
3206
|
displayName: "AgentInput__StatusAnnouncement",
|
|
3090
3207
|
componentId: "sc-fhl996-11"
|
|
@@ -3092,17 +3209,17 @@ var StatusAnnouncement = styled__default.default.div.withConfig({
|
|
|
3092
3209
|
var MeterContainer = styled__default.default.div.withConfig({
|
|
3093
3210
|
displayName: "AgentInput__MeterContainer",
|
|
3094
3211
|
componentId: "sc-fhl996-12"
|
|
3095
|
-
})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"], ["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"])), semantic$
|
|
3212
|
+
})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"], ["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"])), semantic$a.spacing.layout.xs, semantic$a.spacing.layout.lg);
|
|
3096
3213
|
var MeterBar = styled__default.default.div.withConfig({
|
|
3097
3214
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3098
3215
|
return !prop.startsWith('$');
|
|
3099
3216
|
},
|
|
3100
3217
|
displayName: "AgentInput__MeterBar",
|
|
3101
3218
|
componentId: "sc-fhl996-13"
|
|
3102
|
-
})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height ", " ", ";\n"], ["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height ", " ", ";\n"])), semantic$
|
|
3219
|
+
})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height ", " ", ";\n"], ["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height ", " ", ";\n"])), semantic$a.spacing.layout.xs, semantic$a.border.radius.xs, semantic$a.color.background.interactive, function (_a) {
|
|
3103
3220
|
var $height = _a.$height;
|
|
3104
3221
|
return "".concat($height * 100, "%");
|
|
3105
|
-
}, semantic$
|
|
3222
|
+
}, semantic$a.motion.duration.fast, semantic$a.motion.easing.easeOut);
|
|
3106
3223
|
var VisuallyHiddenLabel = styled__default.default.label.withConfig({
|
|
3107
3224
|
displayName: "AgentInput__VisuallyHiddenLabel",
|
|
3108
3225
|
componentId: "sc-fhl996-14"
|
|
@@ -3735,11 +3852,11 @@ var AgentInput = function AgentInput(_a) {
|
|
|
3735
3852
|
})]
|
|
3736
3853
|
});
|
|
3737
3854
|
};
|
|
3738
|
-
var templateObject_1$
|
|
3855
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$f, templateObject_5$c, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
|
|
3739
3856
|
|
|
3740
|
-
var semantic$
|
|
3857
|
+
var semantic$9 = data.tokensJson.semantic;
|
|
3741
3858
|
var alert = data.tokensJson.component.alert;
|
|
3742
|
-
var _a$3 = semantic$
|
|
3859
|
+
var _a$3 = semantic$9.motion,
|
|
3743
3860
|
duration$1 = _a$3.duration,
|
|
3744
3861
|
easing$1 = _a$3.easing;
|
|
3745
3862
|
// Dismissing fades the alert out, then collapses the space it took (Ollie's call, #35).
|
|
@@ -3748,8 +3865,8 @@ var FADE_MS = parseInt(duration$1.fast, 10);
|
|
|
3748
3865
|
var EXIT_MS = FADE_MS * 2;
|
|
3749
3866
|
// The --alert-exit-* properties are the alert's height and vertical padding, measured
|
|
3750
3867
|
// when it's dismissed, so nothing moves until the fade has finished
|
|
3751
|
-
var fadeThenCollapse = styled.keyframes(templateObject_1$
|
|
3752
|
-
var fadeOut = styled.keyframes(templateObject_2$
|
|
3868
|
+
var fadeThenCollapse = styled.keyframes(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n 0%, 50% {\n max-height: var(--alert-exit-height);\n padding-top: var(--alert-exit-padding-top);\n padding-bottom: var(--alert-exit-padding-bottom);\n border-width: ", ";\n }\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n max-height: 0;\n padding-top: 0;\n padding-bottom: 0;\n border-width: 0;\n }\n"], ["\n 0%, 50% {\n max-height: var(--alert-exit-height);\n padding-top: var(--alert-exit-padding-top);\n padding-bottom: var(--alert-exit-padding-bottom);\n border-width: ", ";\n }\n 0% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n max-height: 0;\n padding-top: 0;\n padding-bottom: 0;\n border-width: 0;\n }\n"])), semantic$9.border.width.thin);
|
|
3869
|
+
var fadeOut = styled.keyframes(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n from { opacity: 1; }\n to { opacity: 0; }\n"], ["\n from { opacity: 1; }\n to { opacity: 0; }\n"
|
|
3753
3870
|
// The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
|
|
3754
3871
|
// (chosen when dismissed). A timer of the same length removes it if no animation event
|
|
3755
3872
|
// arrives, for example where animations are disabled or the tab is hidden.
|
|
@@ -3761,7 +3878,7 @@ var fadeOut = styled.keyframes(templateObject_2$j || (templateObject_2$j = __mak
|
|
|
3761
3878
|
// The generated names of the two exits (full, and reduced motion)
|
|
3762
3879
|
var EXIT_ANIMATION_NAMES = [fadeThenCollapse.getName(), fadeOut.getName()];
|
|
3763
3880
|
// Default icons by variant
|
|
3764
|
-
var variantIcons = {
|
|
3881
|
+
var variantIcons$1 = {
|
|
3765
3882
|
error: 'crossCircle',
|
|
3766
3883
|
warning: 'bell',
|
|
3767
3884
|
info: 'info',
|
|
@@ -3787,35 +3904,32 @@ var StyledAlert = styled__default.default.div.withConfig({
|
|
|
3787
3904
|
},
|
|
3788
3905
|
displayName: "Alert__StyledAlert",
|
|
3789
3906
|
componentId: "sc-18tq5d-0"
|
|
3790
|
-
})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n align-items:
|
|
3907
|
+
})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n /* Items start at the top, so the icon and dismiss button line up with the first line */\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: ", " solid;\n position: relative;\n width: 100%;\n \n /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n keeps a transparent border, so both appearances take the same space. */\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n \n /* Responsive adjustments */\n @media (min-width: ", ") {\n padding: ", ";\n }\n\n /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n preference that changes mid-exit can't swap animations and flash the faded alert back.\n Reduced motion: fade only; the space closes instantly afterwards. */\n ", "\n"], ["\n display: flex;\n /* Items start at the top, so the icon and dismiss button line up with the first line */\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: ", " solid;\n position: relative;\n width: 100%;\n \n /* Severity \xD7 appearance colours from Alert's component tokens (decision 0019). Borderless\n keeps a transparent border, so both appearances take the same space. */\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n \n /* Responsive adjustments */\n @media (min-width: ", ") {\n padding: ", ";\n }\n\n /* The exit is chosen once, when dismissed (not by a media query), so a reduced-motion\n preference that changes mid-exit can't swap animations and flash the faded alert back.\n Reduced motion: fade only; the space closes instantly afterwards. */\n ", "\n"])), function (_a) {
|
|
3791
3908
|
var $inline = _a.$inline;
|
|
3792
|
-
return $inline ?
|
|
3909
|
+
return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
|
|
3793
3910
|
}, function (_a) {
|
|
3794
3911
|
var $inline = _a.$inline;
|
|
3795
|
-
return $inline ? semantic$
|
|
3912
|
+
return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
|
|
3913
|
+
}, semantic$9.border.radius.sm, semantic$9.border.width.thin, function (_a) {
|
|
3914
|
+
var _b = _a.$variant,
|
|
3915
|
+
$variant = _b === void 0 ? 'info' : _b;
|
|
3916
|
+
return alert.severity[$variant].background;
|
|
3796
3917
|
}, function (_a) {
|
|
3918
|
+
var _b = _a.$variant,
|
|
3919
|
+
$variant = _b === void 0 ? 'info' : _b;
|
|
3920
|
+
return alert.severity[$variant].text;
|
|
3921
|
+
}, function (_a) {
|
|
3922
|
+
var _b = _a.$variant,
|
|
3923
|
+
$variant = _b === void 0 ? 'info' : _b,
|
|
3924
|
+
$appearance = _a.$appearance;
|
|
3925
|
+
return alert.appearance[$appearance].borderColor[$variant];
|
|
3926
|
+
}, semantic$9.breakpoint.md, function (_a) {
|
|
3797
3927
|
var $inline = _a.$inline;
|
|
3798
|
-
return $inline ? semantic$
|
|
3799
|
-
}, semantic$7.border.radius.sm, semantic$7.border.width.thin, function (_a) {
|
|
3800
|
-
var $variant = _a.$variant;
|
|
3801
|
-
switch ($variant) {
|
|
3802
|
-
case 'error':
|
|
3803
|
-
return "\n background-color: ".concat(semantic$7.color.background['error-subtle'], ";\n border-color: ").concat(semantic$7.color.border.error, ";\n color: ").concat(semantic$7.color.text.error, ";\n ");
|
|
3804
|
-
case 'warning':
|
|
3805
|
-
return "\n background-color: ".concat(semantic$7.color.background['warning-subtle'], ";\n border-color: ").concat(semantic$7.color.border.warning, ";\n color: ").concat(semantic$7.color.text.warning, ";\n ");
|
|
3806
|
-
case 'success':
|
|
3807
|
-
return "\n background-color: ".concat(semantic$7.color.background['success-subtle'], ";\n border-color: ").concat(semantic$7.color.border.success, ";\n color: ").concat(semantic$7.color.text.success, ";\n ");
|
|
3808
|
-
case 'info':
|
|
3809
|
-
default:
|
|
3810
|
-
return "\n background-color: ".concat(semantic$7.color.background['interactive-subtle'], ";\n border-color: ").concat(semantic$7.color.border.interactive, ";\n color: ").concat(semantic$7.color.text.interactive, ";\n ");
|
|
3811
|
-
}
|
|
3812
|
-
}, semantic$7.breakpoint.md, function (_a) {
|
|
3813
|
-
var $inline = _a.$inline;
|
|
3814
|
-
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.lg;
|
|
3928
|
+
return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.lg;
|
|
3815
3929
|
}, function (_a) {
|
|
3816
3930
|
var $isExiting = _a.$isExiting,
|
|
3817
3931
|
$reducedExit = _a.$reducedExit;
|
|
3818
|
-
return $isExiting && styled.css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n overflow: hidden;\n pointer-events: none;\n animation: ", ";\n "], ["\n overflow: hidden;\n pointer-events: none;\n animation: ", ";\n "])), $reducedExit ? styled.css(templateObject_3$
|
|
3932
|
+
return $isExiting && styled.css(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n overflow: hidden;\n pointer-events: none;\n animation: ", ";\n "], ["\n overflow: hidden;\n pointer-events: none;\n animation: ", ";\n "])), $reducedExit ? styled.css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.easeOut) : styled.css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.easeOut));
|
|
3819
3933
|
});
|
|
3820
3934
|
var StyledIconContainer = styled__default.default.div.withConfig({
|
|
3821
3935
|
displayName: "Alert__StyledIconContainer",
|
|
@@ -3824,47 +3938,81 @@ var StyledIconContainer = styled__default.default.div.withConfig({
|
|
|
3824
3938
|
var StyledContent$1 = styled__default.default.div.withConfig({
|
|
3825
3939
|
displayName: "Alert__StyledContent",
|
|
3826
3940
|
componentId: "sc-18tq5d-2"
|
|
3827
|
-
})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"])), semantic$
|
|
3941
|
+
})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"])), semantic$9.spacing.layout.xs);
|
|
3828
3942
|
var StyledTitle = styled__default.default.span.withConfig({
|
|
3829
3943
|
displayName: "Alert__StyledTitle",
|
|
3830
3944
|
componentId: "sc-18tq5d-3"
|
|
3831
3945
|
})(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n font: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin: 0;\n"], ["\n font: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin: 0;\n"])), alert.title.typography, alert.title.fontWeight, alert.title.lineHeight);
|
|
3832
|
-
var StyledMessage = styled__default.default.span.withConfig({
|
|
3946
|
+
var StyledMessage$1 = styled__default.default.span.withConfig({
|
|
3833
3947
|
displayName: "Alert__StyledMessage",
|
|
3834
3948
|
componentId: "sc-18tq5d-4"
|
|
3835
|
-
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n font: ", ";\n line-height: ", ";\n"], ["\n font: ", ";\n line-height: ", ";\n"
|
|
3949
|
+
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n font: ", ";\n line-height: ", ";\n"], ["\n font: ", ";\n line-height: ", ";\n"
|
|
3950
|
+
// The action follows the content, left-aligned with it, so it's read after the message
|
|
3951
|
+
// (#122). With the content's xs gap, the space above it is md: a separate step.
|
|
3952
|
+
])), alert.message.typography, alert.message.lineHeight);
|
|
3953
|
+
// The action follows the content, left-aligned with it, so it's read after the message
|
|
3954
|
+
// (#122). With the content's xs gap, the space above it is md: a separate step.
|
|
3836
3955
|
var StyledActions = styled__default.default.div.withConfig({
|
|
3837
3956
|
displayName: "Alert__StyledActions",
|
|
3838
3957
|
componentId: "sc-18tq5d-5"
|
|
3839
|
-
})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n
|
|
3958
|
+
})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: ", ";\n margin-top: calc(", " - ", ");\n"], ["\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: ", ";\n margin-top: calc(", " - ", ");\n"
|
|
3959
|
+
// The dismiss button's centre lines up with the first line of content: the title, or the
|
|
3960
|
+
// message when there's no title (decision 0019). The slot is as tall as that line and the
|
|
3961
|
+
// button is centred in it, overflowing evenly into the padding, so it stays aligned at every
|
|
3962
|
+
// padding and line height. Being in the row, it also keeps text and actions from running under it.
|
|
3963
|
+
])), semantic$9.spacing.layout.sm, semantic$9.spacing.layout.md, semantic$9.spacing.layout.xs);
|
|
3964
|
+
// The dismiss button's centre lines up with the first line of content: the title, or the
|
|
3965
|
+
// message when there's no title (decision 0019). The slot is as tall as that line and the
|
|
3966
|
+
// button is centred in it, overflowing evenly into the padding, so it stays aligned at every
|
|
3967
|
+
// padding and line height. Being in the row, it also keeps text and actions from running under it.
|
|
3968
|
+
var StyledDismissSlot = styled__default.default.div.withConfig({
|
|
3969
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3970
|
+
return !prop.startsWith('$');
|
|
3971
|
+
},
|
|
3972
|
+
displayName: "Alert__StyledDismissSlot",
|
|
3973
|
+
componentId: "sc-18tq5d-6"
|
|
3974
|
+
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n height: ", ";\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n height: ", ";\n"
|
|
3975
|
+
// The glyph sits on the padding edge, mirroring the severity icon on the left. The inline
|
|
3976
|
+
// alert's padding is too small for that, so its button stays inside the padding.
|
|
3977
|
+
])), function (_a) {
|
|
3978
|
+
var $lineHeight = _a.$lineHeight;
|
|
3979
|
+
return $lineHeight;
|
|
3980
|
+
});
|
|
3981
|
+
// The glyph sits on the padding edge, mirroring the severity icon on the left. The inline
|
|
3982
|
+
// alert's padding is too small for that, so its button stays inside the padding.
|
|
3840
3983
|
var StyledDismissButton = styled__default.default(IconButton).withConfig({
|
|
3841
3984
|
displayName: "Alert__StyledDismissButton",
|
|
3842
|
-
componentId: "sc-18tq5d-
|
|
3843
|
-
})(
|
|
3985
|
+
componentId: "sc-18tq5d-7"
|
|
3986
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n margin-right: ", ";\n"], ["\n margin-right: ", ";\n"])), function (_a) {
|
|
3987
|
+
var $inline = _a.$inline;
|
|
3988
|
+
return $inline ? 0 : "calc((".concat(data.tokensJson.component.iconButton.sizes.small.minWidth, " - ").concat(semantic$9.size.icon.sm, ") / -2)");
|
|
3989
|
+
});
|
|
3844
3990
|
var Alert = function Alert(_a) {
|
|
3845
3991
|
var _b = _a.variant,
|
|
3846
3992
|
variant = _b === void 0 ? 'info' : _b,
|
|
3993
|
+
_c = _a.appearance,
|
|
3994
|
+
appearance = _c === void 0 ? 'outlined' : _c,
|
|
3847
3995
|
children = _a.children,
|
|
3848
3996
|
title = _a.title,
|
|
3849
|
-
|
|
3850
|
-
dismissible =
|
|
3997
|
+
_d = _a.dismissible,
|
|
3998
|
+
dismissible = _d === void 0 ? false : _d,
|
|
3851
3999
|
onDismiss = _a.onDismiss,
|
|
3852
4000
|
action = _a.action,
|
|
3853
|
-
|
|
3854
|
-
inline =
|
|
3855
|
-
|
|
3856
|
-
ariaLive =
|
|
4001
|
+
_e = _a.inline,
|
|
4002
|
+
inline = _e === void 0 ? false : _e,
|
|
4003
|
+
_f = _a.ariaLive,
|
|
4004
|
+
ariaLive = _f === void 0 ? 'polite' : _f,
|
|
3857
4005
|
dataTestId = _a["data-testid"],
|
|
3858
|
-
props = __rest(_a, ["variant", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
|
|
3859
|
-
var
|
|
3860
|
-
phase =
|
|
3861
|
-
setPhase =
|
|
3862
|
-
var
|
|
3863
|
-
reducedExit =
|
|
3864
|
-
setReducedExit =
|
|
3865
|
-
var
|
|
3866
|
-
exitStyle =
|
|
3867
|
-
setExitStyle =
|
|
4006
|
+
props = __rest(_a, ["variant", "appearance", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
|
|
4007
|
+
var _g = React__default.default.useState('visible'),
|
|
4008
|
+
phase = _g[0],
|
|
4009
|
+
setPhase = _g[1];
|
|
4010
|
+
var _h = React__default.default.useState(false),
|
|
4011
|
+
reducedExit = _h[0],
|
|
4012
|
+
setReducedExit = _h[1];
|
|
4013
|
+
var _j = React__default.default.useState(),
|
|
4014
|
+
exitStyle = _j[0],
|
|
4015
|
+
setExitStyle = _j[1];
|
|
3868
4016
|
var alertRef = React__default.default.useRef(null);
|
|
3869
4017
|
// While it exits, its controls leave the tab order and can't be activated
|
|
3870
4018
|
useInert(alertRef, phase === 'exiting');
|
|
@@ -3921,7 +4069,7 @@ var Alert = function Alert(_a) {
|
|
|
3921
4069
|
}
|
|
3922
4070
|
};
|
|
3923
4071
|
// Get the icon for the current variant
|
|
3924
|
-
var iconName = variantIcons[variant];
|
|
4072
|
+
var iconName = variantIcons$1[variant];
|
|
3925
4073
|
var alertIconColor = variantIconColors[variant];
|
|
3926
4074
|
var alertTitleColor = variantTitleColors[variant];
|
|
3927
4075
|
// Determine ARIA role based on variant and aria-live
|
|
@@ -3930,6 +4078,7 @@ var Alert = function Alert(_a) {
|
|
|
3930
4078
|
role: role,
|
|
3931
4079
|
"aria-live": ariaLive,
|
|
3932
4080
|
"$variant": variant,
|
|
4081
|
+
"$appearance": appearance,
|
|
3933
4082
|
"$inline": inline,
|
|
3934
4083
|
"$isExiting": isExiting,
|
|
3935
4084
|
"$reducedExit": reducedExit,
|
|
@@ -3952,23 +4101,158 @@ var Alert = function Alert(_a) {
|
|
|
3952
4101
|
"aria-level": 6,
|
|
3953
4102
|
color: alertTitleColor,
|
|
3954
4103
|
children: title
|
|
3955
|
-
}), jsxRuntime.jsx(StyledMessage, {
|
|
4104
|
+
}), jsxRuntime.jsx(StyledMessage$1, {
|
|
3956
4105
|
children: children
|
|
4106
|
+
}), action && jsxRuntime.jsx(StyledActions, {
|
|
4107
|
+
children: action
|
|
3957
4108
|
})]
|
|
3958
|
-
}),
|
|
3959
|
-
|
|
4109
|
+
}), dismissible && jsxRuntime.jsx(StyledDismissSlot, {
|
|
4110
|
+
"$lineHeight": title ? alert.title.lineHeight : alert.message.lineHeight,
|
|
4111
|
+
children: jsxRuntime.jsx(StyledDismissButton, {
|
|
3960
4112
|
iconName: "close",
|
|
3961
4113
|
size: "small",
|
|
3962
4114
|
variant: "naked",
|
|
4115
|
+
"$inline": inline,
|
|
3963
4116
|
onClick: handleDismiss,
|
|
3964
4117
|
"aria-label": "Dismiss alert",
|
|
3965
4118
|
"data-testid": dataTestId ? "".concat(dataTestId, "-dismiss") : undefined
|
|
3966
|
-
})
|
|
4119
|
+
})
|
|
3967
4120
|
})]
|
|
3968
4121
|
}));
|
|
3969
4122
|
};
|
|
3970
4123
|
Alert.displayName = 'Alert';
|
|
3971
|
-
var templateObject_1$
|
|
4124
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$e, templateObject_5$b, templateObject_6$8, templateObject_7$6, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2;
|
|
4125
|
+
|
|
4126
|
+
var semantic$8 = data.tokensJson.semantic;
|
|
4127
|
+
var color$3 = semantic$8.color,
|
|
4128
|
+
typography = semantic$8.typography,
|
|
4129
|
+
spacing$3 = semantic$8.spacing,
|
|
4130
|
+
size = semantic$8.size;
|
|
4131
|
+
var variantIcons = {
|
|
4132
|
+
error: 'crossCircle',
|
|
4133
|
+
warning: 'bell',
|
|
4134
|
+
info: 'info',
|
|
4135
|
+
success: 'checkRing'
|
|
4136
|
+
};
|
|
4137
|
+
var variantTextColors = {
|
|
4138
|
+
error: color$3.text.error,
|
|
4139
|
+
warning: color$3.text.warning,
|
|
4140
|
+
info: color$3.text.interactive,
|
|
4141
|
+
success: color$3.text.success
|
|
4142
|
+
};
|
|
4143
|
+
var sizeConfig = {
|
|
4144
|
+
small: {
|
|
4145
|
+
font: typography.caption,
|
|
4146
|
+
gap: spacing$3.layout.xs,
|
|
4147
|
+
icon: 'xs'
|
|
4148
|
+
},
|
|
4149
|
+
medium: {
|
|
4150
|
+
font: typography.small,
|
|
4151
|
+
gap: spacing$3.layout.sm,
|
|
4152
|
+
icon: 'sm'
|
|
4153
|
+
}
|
|
4154
|
+
};
|
|
4155
|
+
var StyledInlineAlert = styled__default.default.div.withConfig({
|
|
4156
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4157
|
+
return !prop.startsWith('$');
|
|
4158
|
+
},
|
|
4159
|
+
displayName: "InlineAlert__StyledInlineAlert",
|
|
4160
|
+
componentId: "sc-eervmb-0"
|
|
4161
|
+
})(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n min-height: ", ";\n gap: ", ";\n font: ", ";\n color: ", ";\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: flex-start;\n min-height: ", ";\n gap: ", ";\n font: ", ";\n color: ", ";\n"
|
|
4162
|
+
// One line of the message's font tall, so the icon centres on the first line at any size:
|
|
4163
|
+
// the zero-width space gives the box the font's line height without a fixed value
|
|
4164
|
+
])), function (_a) {
|
|
4165
|
+
var $size = _a.$size,
|
|
4166
|
+
$empty = _a.$empty;
|
|
4167
|
+
return $empty ? '0' : size.label[$size];
|
|
4168
|
+
}, function (_a) {
|
|
4169
|
+
var $size = _a.$size;
|
|
4170
|
+
return sizeConfig[$size].gap;
|
|
4171
|
+
}, function (_a) {
|
|
4172
|
+
var $size = _a.$size;
|
|
4173
|
+
return sizeConfig[$size].font;
|
|
4174
|
+
}, function (_a) {
|
|
4175
|
+
var $variant = _a.$variant;
|
|
4176
|
+
return variantTextColors[$variant];
|
|
4177
|
+
});
|
|
4178
|
+
// One line of the message's font tall, so the icon centres on the first line at any size:
|
|
4179
|
+
// the zero-width space gives the box the font's line height without a fixed value
|
|
4180
|
+
var StyledIconLine = styled__default.default.span.withConfig({
|
|
4181
|
+
displayName: "InlineAlert__StyledIconLine",
|
|
4182
|
+
componentId: "sc-eervmb-1"
|
|
4183
|
+
})(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n\n &::after {\n content: '\\200B';\n }\n"], ["\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n\n &::after {\n content: '\\\\200B';\n }\n"])));
|
|
4184
|
+
var StyledMessage = styled__default.default.span.withConfig({
|
|
4185
|
+
displayName: "InlineAlert__StyledMessage",
|
|
4186
|
+
componentId: "sc-eervmb-2"
|
|
4187
|
+
})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n min-width: 0;\n"], ["\n min-width: 0;\n"
|
|
4188
|
+
/**
|
|
4189
|
+
* InlineAlert is a short, local message that sits next to what it's about: between paragraphs,
|
|
4190
|
+
* below a field or in a table cell (decision 0019). A severity icon and text in the severity
|
|
4191
|
+
* colour, with no background or border. For a title, an action or a dismiss button, use Alert.
|
|
4192
|
+
*
|
|
4193
|
+
* @example
|
|
4194
|
+
* ```tsx
|
|
4195
|
+
* <InlineAlert variant="success">Saved</InlineAlert>
|
|
4196
|
+
*
|
|
4197
|
+
* // Field feedback: the control references the message with aria-describedby
|
|
4198
|
+
* <input id="email" aria-describedby="email-error" aria-invalid="true" />
|
|
4199
|
+
* <InlineAlert id="email-error" variant="error" size="small">Enter a valid email address</InlineAlert>
|
|
4200
|
+
* ```
|
|
4201
|
+
*/])));
|
|
4202
|
+
/**
|
|
4203
|
+
* InlineAlert is a short, local message that sits next to what it's about: between paragraphs,
|
|
4204
|
+
* below a field or in a table cell (decision 0019). A severity icon and text in the severity
|
|
4205
|
+
* colour, with no background or border. For a title, an action or a dismiss button, use Alert.
|
|
4206
|
+
*
|
|
4207
|
+
* @example
|
|
4208
|
+
* ```tsx
|
|
4209
|
+
* <InlineAlert variant="success">Saved</InlineAlert>
|
|
4210
|
+
*
|
|
4211
|
+
* // Field feedback: the control references the message with aria-describedby
|
|
4212
|
+
* <input id="email" aria-describedby="email-error" aria-invalid="true" />
|
|
4213
|
+
* <InlineAlert id="email-error" variant="error" size="small">Enter a valid email address</InlineAlert>
|
|
4214
|
+
* ```
|
|
4215
|
+
*/
|
|
4216
|
+
var InlineAlert = function InlineAlert(_a) {
|
|
4217
|
+
var _b = _a.variant,
|
|
4218
|
+
variant = _b === void 0 ? 'info' : _b,
|
|
4219
|
+
_c = _a.size,
|
|
4220
|
+
alertSize = _c === void 0 ? 'medium' : _c,
|
|
4221
|
+
children = _a.children,
|
|
4222
|
+
_d = _a.ariaLive,
|
|
4223
|
+
ariaLive = _d === void 0 ? 'polite' : _d,
|
|
4224
|
+
id = _a.id,
|
|
4225
|
+
dataTestId = _a["data-testid"];
|
|
4226
|
+
// A live region is announced reliably only when it exists before its content changes, so with
|
|
4227
|
+
// no message it stays mounted as an empty region, with no icon and no minimum height
|
|
4228
|
+
var hasMessage = children !== undefined && children !== null && children !== false && children !== '';
|
|
4229
|
+
return jsxRuntime.jsx(StyledInlineAlert
|
|
4230
|
+
// Same roles as Alert; ariaLive sets how urgently changes are announced
|
|
4231
|
+
, {
|
|
4232
|
+
// Same roles as Alert; ariaLive sets how urgently changes are announced
|
|
4233
|
+
role: variant === 'error' ? 'alert' : 'status',
|
|
4234
|
+
"aria-live": ariaLive,
|
|
4235
|
+
id: id,
|
|
4236
|
+
"data-testid": dataTestId,
|
|
4237
|
+
"$variant": variant,
|
|
4238
|
+
"$size": alertSize,
|
|
4239
|
+
"$empty": !hasMessage,
|
|
4240
|
+
children: hasMessage && jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
4241
|
+
children: [jsxRuntime.jsx(StyledIconLine, {
|
|
4242
|
+
"aria-hidden": "true",
|
|
4243
|
+
children: jsxRuntime.jsx(Icon, {
|
|
4244
|
+
name: variantIcons[variant],
|
|
4245
|
+
size: sizeConfig[alertSize].icon,
|
|
4246
|
+
iconColor: "inherit"
|
|
4247
|
+
})
|
|
4248
|
+
}), jsxRuntime.jsx(StyledMessage, {
|
|
4249
|
+
children: children
|
|
4250
|
+
})]
|
|
4251
|
+
})
|
|
4252
|
+
});
|
|
4253
|
+
};
|
|
4254
|
+
InlineAlert.displayName = 'InlineAlert';
|
|
4255
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$h;
|
|
3972
4256
|
|
|
3973
4257
|
var BreadcrumbNavStyled = styled__default.default.nav.withConfig({
|
|
3974
4258
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
@@ -4192,7 +4476,7 @@ var StyledCheckbox = styled__default.default.span.withConfig({
|
|
|
4192
4476
|
return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
|
|
4193
4477
|
}, data.tokensJson.semantic.motion.duration.fast, data.tokensJson.semantic.motion.easing.easeOut, HiddenCheckboxInput, function (props) {
|
|
4194
4478
|
return props.$state === 'error' ? data.tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? data.tokensJson.semantic.border.strong : data.tokensJson.component.input.hover.borderColor;
|
|
4195
|
-
}, HiddenCheckboxInput, data.tokensJson.component.input.focus.outline, data.tokensJson.
|
|
4479
|
+
}, HiddenCheckboxInput, data.tokensJson.component.input.focus.outline, data.tokensJson.semantic.border.focusOffset, function (props) {
|
|
4196
4480
|
return props.$state === 'error' ? data.tokensJson.component.input.error.focus.borderColor : data.tokensJson.component.input.focus.borderColor;
|
|
4197
4481
|
}, function (props) {
|
|
4198
4482
|
return props.$state === 'disabled' && "\n background-color: ".concat(data.tokensJson.component.input.disabled.backgroundColor, ";\n border-color: ").concat(data.tokensJson.component.input.disabled.borderColor, ";\n ");
|
|
@@ -4698,7 +4982,7 @@ var DateGroup = function DateGroup(_a) {
|
|
|
4698
4982
|
};
|
|
4699
4983
|
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
4700
4984
|
|
|
4701
|
-
var semantic$
|
|
4985
|
+
var semantic$7 = data.tokensJson.semantic;
|
|
4702
4986
|
var StyledContainer$1 = styled__default.default.div.withConfig({
|
|
4703
4987
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4704
4988
|
return !prop.startsWith('$');
|
|
@@ -4707,7 +4991,7 @@ var StyledContainer$1 = styled__default.default.div.withConfig({
|
|
|
4707
4991
|
componentId: "sc-1u5hxh-0"
|
|
4708
4992
|
})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: ", ";\n margin: 0 auto;\n padding: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: ", ";\n margin: 0 auto;\n padding: ", ";\n"])), data.tokensJson.component.emptyState.maxWidth, function (_a) {
|
|
4709
4993
|
var $size = _a.$size;
|
|
4710
|
-
return $size === 'small' ? semantic$
|
|
4994
|
+
return $size === 'small' ? semantic$7.spacing.layout['4xl'] : $size === 'large' ? semantic$7.spacing.layout['8xl'] : semantic$7.spacing.layout['6xl'];
|
|
4711
4995
|
});
|
|
4712
4996
|
var StyledIllustration = styled__default.default.div.withConfig({
|
|
4713
4997
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -4721,16 +5005,16 @@ var StyledIllustration = styled__default.default.div.withConfig({
|
|
|
4721
5005
|
}, function (_a) {
|
|
4722
5006
|
var $size = _a.$size;
|
|
4723
5007
|
return $size === 'small' ? data.tokensJson.component.emptyState.illustration.small : $size === 'large' ? data.tokensJson.component.emptyState.illustration.large : data.tokensJson.component.emptyState.illustration.medium;
|
|
4724
|
-
}, semantic$
|
|
5008
|
+
}, semantic$7.spacing.layout['2xl'], function (_a) {
|
|
4725
5009
|
var $variant = _a.$variant;
|
|
4726
|
-
return $variant === 'error' ? semantic$
|
|
5010
|
+
return $variant === 'error' ? semantic$7.color.icon.error : $variant === 'success' ? semantic$7.color.icon.success : semantic$7.color.icon.subdued;
|
|
4727
5011
|
});
|
|
4728
5012
|
var StyledTextContainer = styled__default.default.div.withConfig({
|
|
4729
5013
|
displayName: "EmptyState__StyledTextContainer",
|
|
4730
5014
|
componentId: "sc-1u5hxh-2"
|
|
4731
5015
|
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width: ", ";\n margin-bottom: ", ";\n"], ["\n max-width: ", ";\n margin-bottom: ", ";\n"
|
|
4732
5016
|
// Map illustration type to icon name
|
|
4733
|
-
])), data.tokensJson.component.emptyState.text.maxWidth, semantic$
|
|
5017
|
+
])), data.tokensJson.component.emptyState.text.maxWidth, semantic$7.spacing.layout['2xl']);
|
|
4734
5018
|
// Map illustration type to icon name
|
|
4735
5019
|
var illustrationToIcon = {
|
|
4736
5020
|
search: 'search',
|
|
@@ -4785,7 +5069,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4785
5069
|
children: title
|
|
4786
5070
|
}), jsxRuntime.jsx("div", {
|
|
4787
5071
|
style: {
|
|
4788
|
-
marginTop: semantic$
|
|
5072
|
+
marginTop: semantic$7.spacing.layout.md
|
|
4789
5073
|
},
|
|
4790
5074
|
children: jsxRuntime.jsx(Typography, {
|
|
4791
5075
|
variant: "body",
|
|
@@ -4910,6 +5194,9 @@ var _a = data.tokensJson.semantic,
|
|
|
4910
5194
|
_b = data.tokensJson.component,
|
|
4911
5195
|
input$1 = _b.input,
|
|
4912
5196
|
field$3 = _b.field;
|
|
5197
|
+
// Spacing comes from the semantic scales: no component spacing tokens (decision 0022).
|
|
5198
|
+
// The 11px vertical padding is off-grid and keeps its deprecated token until #129.
|
|
5199
|
+
var controlPaddingX = data.tokensJson.semantic.spacing.component.lg;
|
|
4913
5200
|
var duration = motion$1.duration,
|
|
4914
5201
|
easing = motion$1.easing;
|
|
4915
5202
|
var DropdownContainer = styled__default.default.div.withConfig({
|
|
@@ -4922,7 +5209,7 @@ var DropdownTrigger = styled__default.default.button.withConfig({
|
|
|
4922
5209
|
},
|
|
4923
5210
|
displayName: "Dropdown__DropdownTrigger",
|
|
4924
5211
|
componentId: "sc-kz07c4-1"
|
|
4925
|
-
})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: border-color ", " ", ",\n outline ", " ", ";\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor:
|
|
5212
|
+
})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: border-color ", " ", ",\n outline ", " ", ";\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor: not-allowed;\n }\n \n ", "\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: border-color ", " ", ",\n outline ", " ", ";\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n &:disabled {\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n cursor: not-allowed;\n }\n \n ", "\n"])), input$1["default"].paddingY, controlPaddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
|
|
4926
5213
|
var $hasError = _a.$hasError;
|
|
4927
5214
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
4928
5215
|
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, duration.normal, easing.easeInOut, duration.normal, easing.easeInOut, function (_a) {
|
|
@@ -4931,7 +5218,7 @@ var DropdownTrigger = styled__default.default.button.withConfig({
|
|
|
4931
5218
|
}, function (_a) {
|
|
4932
5219
|
var $hasError = _a.$hasError;
|
|
4933
5220
|
return $hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor;
|
|
4934
|
-
}, input$1.focus.outline,
|
|
5221
|
+
}, input$1.focus.outline, border$1.focusOffset, input$1.disabled.backgroundColor, input$1.disabled.textColor, input$1.disabled.borderColor, function (_a) {
|
|
4935
5222
|
var $isOpen = _a.$isOpen,
|
|
4936
5223
|
$hasError = _a.$hasError;
|
|
4937
5224
|
return $isOpen && "\n border-color: ".concat($hasError ? input$1.error.focus.borderColor : input$1.focus.borderColor, ";\n ");
|
|
@@ -4952,7 +5239,7 @@ var DropdownMenu = styled__default.default.div.withConfig({
|
|
|
4952
5239
|
},
|
|
4953
5240
|
displayName: "Dropdown__DropdownMenu",
|
|
4954
5241
|
componentId: "sc-kz07c4-3"
|
|
4955
|
-
})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n
|
|
5242
|
+
})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all ", " ", ";\n max-height: ", ";\n overflow-y: auto;\n\n ", " {\n transform: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n /* A decorative outline: elevation separates the menu, and only the trigger is a control edge (decision 0025) */\n border: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all ", " ", ";\n max-height: ", ";\n overflow-y: auto;\n\n ", " {\n transform: none;\n }\n"])), zIndex.dropdown, input$1["default"].backgroundColor, border$1.subtle, input$1["default"].borderRadius, elevation$1.floating, spacing.xs, function (_a) {
|
|
4956
5243
|
var $isOpen = _a.$isOpen;
|
|
4957
5244
|
return $isOpen ? 1 : 0;
|
|
4958
5245
|
}, function (_a) {
|
|
@@ -4968,7 +5255,7 @@ var DropdownOption = styled__default.default.button.withConfig({
|
|
|
4968
5255
|
},
|
|
4969
5256
|
displayName: "Dropdown__DropdownOption",
|
|
4970
5257
|
componentId: "sc-kz07c4-4"
|
|
4971
|
-
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color ", " ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"], ["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color ", " ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"])), input$1["default"].paddingY,
|
|
5258
|
+
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color ", " ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"], ["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color ", " ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus {\n outline: none;\n background-color: ", ";\n }\n \n &:not(:last-child) {\n border-bottom: ", ";\n }\n"])), input$1["default"].paddingY, controlPaddingX, function (_a) {
|
|
4972
5259
|
var $isSelected = _a.$isSelected,
|
|
4973
5260
|
$isFocused = _a.$isFocused;
|
|
4974
5261
|
if ($isFocused) return color$1.background.surface;
|
|
@@ -4981,7 +5268,7 @@ var StyledHelperText$3 = styled__default.default.div.withConfig({
|
|
|
4981
5268
|
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), field$3.helperText.typography, function (_a) {
|
|
4982
5269
|
var $hasError = _a.$hasError;
|
|
4983
5270
|
return $hasError ? field$3.helperText.colorError : field$3.helperText.color;
|
|
4984
|
-
},
|
|
5271
|
+
}, spacing.sm);
|
|
4985
5272
|
var Dropdown = function Dropdown(_a) {
|
|
4986
5273
|
var options = _a.options,
|
|
4987
5274
|
value = _a.value,
|
|
@@ -5104,7 +5391,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
5104
5391
|
htmlFor: dropdownId,
|
|
5105
5392
|
style: {
|
|
5106
5393
|
display: 'block',
|
|
5107
|
-
marginBottom:
|
|
5394
|
+
marginBottom: spacing.sm
|
|
5108
5395
|
},
|
|
5109
5396
|
children: jsxRuntime.jsx(Typography, {
|
|
5110
5397
|
variant: "label",
|
|
@@ -5159,7 +5446,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
5159
5446
|
};
|
|
5160
5447
|
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
|
|
5161
5448
|
|
|
5162
|
-
var semantic$
|
|
5449
|
+
var semantic$6 = data.tokensJson.semantic;
|
|
5163
5450
|
var StyledList = styled__default.default.ul.withConfig({
|
|
5164
5451
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5165
5452
|
return !prop.startsWith('$');
|
|
@@ -5168,7 +5455,7 @@ var StyledList = styled__default.default.ul.withConfig({
|
|
|
5168
5455
|
componentId: "sc-1irksg5-0"
|
|
5169
5456
|
})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n \n /* Divider styles */\n ", "\n"], ["\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n \n /* Divider styles */\n ", "\n"])), function (_a) {
|
|
5170
5457
|
var $dividers = _a.$dividers;
|
|
5171
|
-
return $dividers && "\n > li:not(:last-child) {\n border-bottom: ".concat(semantic$
|
|
5458
|
+
return $dividers && "\n > li:not(:last-child) {\n border-bottom: ".concat(semantic$6.border.width.thin, " solid ").concat(semantic$6.color.border["default"], ";\n }\n ");
|
|
5172
5459
|
});
|
|
5173
5460
|
var List = function List(_a) {
|
|
5174
5461
|
var children = _a.children,
|
|
@@ -5192,12 +5479,12 @@ var List = function List(_a) {
|
|
|
5192
5479
|
List.displayName = 'List';
|
|
5193
5480
|
var templateObject_1$c;
|
|
5194
5481
|
|
|
5195
|
-
var semantic$
|
|
5196
|
-
var layout = semantic$
|
|
5197
|
-
color = semantic$
|
|
5198
|
-
border = semantic$
|
|
5199
|
-
elevation = semantic$
|
|
5200
|
-
motion = semantic$
|
|
5482
|
+
var semantic$5 = data.tokensJson.semantic;
|
|
5483
|
+
var layout = semantic$5.spacing.layout,
|
|
5484
|
+
color = semantic$5.color,
|
|
5485
|
+
border = semantic$5.border,
|
|
5486
|
+
elevation = semantic$5.elevation,
|
|
5487
|
+
motion = semantic$5.motion;
|
|
5201
5488
|
// ---------------------------------------------------------------------------
|
|
5202
5489
|
// Size map
|
|
5203
5490
|
// ---------------------------------------------------------------------------
|
|
@@ -5221,7 +5508,7 @@ var scaleIn = styled.keyframes(templateObject_2$a || (templateObject_2$a = __mak
|
|
|
5221
5508
|
var StyledOverlay$1 = styled__default.default.div.withConfig({
|
|
5222
5509
|
displayName: "Modal__StyledOverlay",
|
|
5223
5510
|
componentId: "sc-1d3g5gh-0"
|
|
5224
|
-
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color: ", ";\n z-index: ", ";\n ", "\n"], ["\n position: fixed;\n inset: 0;\n background-color: ", ";\n z-index: ", ";\n ", "\n"])), color.background.overlay, semantic$
|
|
5511
|
+
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color: ", ";\n z-index: ", ";\n ", "\n"], ["\n position: fixed;\n inset: 0;\n background-color: ", ";\n z-index: ", ";\n ", "\n"])), color.background.overlay, semantic$5.zIndex.modal, styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5225
5512
|
var $isExiting = _a.$isExiting;
|
|
5226
5513
|
return $isExiting && exitAnimation;
|
|
5227
5514
|
}));
|
|
@@ -5231,7 +5518,7 @@ var StyledDialog = styled__default.default.div.withConfig({
|
|
|
5231
5518
|
},
|
|
5232
5519
|
displayName: "Modal__StyledDialog",
|
|
5233
5520
|
componentId: "sc-1d3g5gh-1"
|
|
5234
|
-
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(1);\n z-index: ", ";\n\n width: ", ";\n max-width: calc(100vw - ", " * 2);\n max-height: calc(100vh - ", " * 2);\n\n display: flex;\n flex-direction: column;\n\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n overflow: hidden;\n\n ", "\n\n ", " {\n animation: ", " ", " ", "", ";\n }\n\n /* Auto-fullscreen below md breakpoint (768px) */\n @media (max-width: ", ") {\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n border-radius: 0;\n top: 0;\n left: 0;\n transform: none;\n animation: ", " ", " ", "", ";\n }\n\n &:focus {\n outline: none;\n }\n\n"], ["\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(1);\n z-index: ", ";\n\n width: ", ";\n max-width: calc(100vw - ", " * 2);\n max-height: calc(100vh - ", " * 2);\n\n display: flex;\n flex-direction: column;\n\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n overflow: hidden;\n\n ", "\n\n ", " {\n animation: ", " ", " ", "", ";\n }\n\n /* Auto-fullscreen below md breakpoint (768px) */\n @media (max-width: ", ") {\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n border-radius: 0;\n top: 0;\n left: 0;\n transform: none;\n animation: ", " ", " ", "", ";\n }\n\n &:focus {\n outline: none;\n }\n\n"])), semantic$
|
|
5521
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(1);\n z-index: ", ";\n\n width: ", ";\n max-width: calc(100vw - ", " * 2);\n max-height: calc(100vh - ", " * 2);\n\n display: flex;\n flex-direction: column;\n\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n overflow: hidden;\n\n ", "\n\n ", " {\n animation: ", " ", " ", "", ";\n }\n\n /* Auto-fullscreen below md breakpoint (768px) */\n @media (max-width: ", ") {\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n border-radius: 0;\n top: 0;\n left: 0;\n transform: none;\n animation: ", " ", " ", "", ";\n }\n\n &:focus {\n outline: none;\n }\n\n"], ["\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(1);\n z-index: ", ";\n\n width: ", ";\n max-width: calc(100vw - ", " * 2);\n max-height: calc(100vh - ", " * 2);\n\n display: flex;\n flex-direction: column;\n\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n overflow: hidden;\n\n ", "\n\n ", " {\n animation: ", " ", " ", "", ";\n }\n\n /* Auto-fullscreen below md breakpoint (768px) */\n @media (max-width: ", ") {\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n border-radius: 0;\n top: 0;\n left: 0;\n transform: none;\n animation: ", " ", " ", "", ";\n }\n\n &:focus {\n outline: none;\n }\n\n"])), semantic$5.zIndex.modal, function (_a) {
|
|
5235
5522
|
var $width = _a.$width;
|
|
5236
5523
|
return $width;
|
|
5237
5524
|
}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, styled.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
@@ -5240,7 +5527,7 @@ var StyledDialog = styled__default.default.div.withConfig({
|
|
|
5240
5527
|
}), reducedMotion, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5241
5528
|
var $isExiting = _a.$isExiting;
|
|
5242
5529
|
return $isExiting && exitAnimation;
|
|
5243
|
-
}, semantic$
|
|
5530
|
+
}, semantic$5.breakpoint.md, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5244
5531
|
var $isExiting = _a.$isExiting;
|
|
5245
5532
|
return $isExiting && exitAnimation;
|
|
5246
5533
|
});
|
|
@@ -5251,7 +5538,7 @@ var StyledHeader = styled__default.default.div.withConfig({
|
|
|
5251
5538
|
var StyledBody = styled__default.default.div.withConfig({
|
|
5252
5539
|
displayName: "Modal__StyledBody",
|
|
5253
5540
|
componentId: "sc-1d3g5gh-3"
|
|
5254
|
-
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n flex: 1 1 auto;\n overflow-y: auto;\n padding: ", " ", ";\n\n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"], ["\n flex: 1 1 auto;\n overflow-y: auto;\n padding: ", " ", ";\n\n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), layout.md, layout.lg, semantic$
|
|
5541
|
+
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n flex: 1 1 auto;\n overflow-y: auto;\n padding: ", " ", ";\n\n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"], ["\n flex: 1 1 auto;\n overflow-y: auto;\n padding: ", " ", ";\n\n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), layout.md, layout.lg, semantic$5.spacing.layout.sm, color.background.surface, color.border["default"], border.radius.circle, color.border.strong);
|
|
5255
5542
|
var StyledFooter = styled__default.default.div.withConfig({
|
|
5256
5543
|
displayName: "Modal__StyledFooter",
|
|
5257
5544
|
componentId: "sc-1d3g5gh-4"
|
|
@@ -5435,20 +5722,21 @@ var Modal = function Modal(_a) {
|
|
|
5435
5722
|
Modal.displayName = 'Modal';
|
|
5436
5723
|
var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3;
|
|
5437
5724
|
|
|
5438
|
-
var input = data.tokensJson.component.input
|
|
5725
|
+
var input = data.tokensJson.component.input,
|
|
5726
|
+
semantic$4 = data.tokensJson.semantic;
|
|
5439
5727
|
var StyledInputBase = styled__default.default.input.withConfig({
|
|
5440
5728
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
5441
5729
|
return !prop.startsWith('$');
|
|
5442
5730
|
},
|
|
5443
5731
|
displayName: "InputBase__StyledInputBase",
|
|
5444
5732
|
componentId: "sc-1bpf4e8-0"
|
|
5445
|
-
})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color ", " ", ",\n outline ", " ", ";\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor:
|
|
5733
|
+
})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color ", " ", ",\n outline ", " ", ";\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: not-allowed;\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"], ["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color ", " ", ",\n outline ", " ", ";\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: not-allowed;\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"
|
|
5446
5734
|
/**
|
|
5447
5735
|
* Base styled textarea with shared styling
|
|
5448
5736
|
*/])), input["default"].font, function (_a) {
|
|
5449
5737
|
var $disabled = _a.$disabled;
|
|
5450
5738
|
return $disabled ? input.disabled.textColor : input["default"].textColor;
|
|
5451
|
-
}, input["default"].paddingY,
|
|
5739
|
+
}, input["default"].paddingY, semantic$4.spacing.component.lg, function (_a) {
|
|
5452
5740
|
var $disabled = _a.$disabled;
|
|
5453
5741
|
return $disabled ? input.disabled.backgroundColor : input["default"].backgroundColor;
|
|
5454
5742
|
}, input["default"].borderWidth, function (_a) {
|
|
@@ -5460,10 +5748,10 @@ var StyledInputBase = styled__default.default.input.withConfig({
|
|
|
5460
5748
|
}, input["default"].borderRadius, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut, input.placeholder.textColor, function (_a) {
|
|
5461
5749
|
var $hasError = _a.$hasError;
|
|
5462
5750
|
return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
|
|
5463
|
-
}, input.focus.outline,
|
|
5751
|
+
}, input.focus.outline, semantic$4.border.focusOffset, function (_a) {
|
|
5464
5752
|
var $hasError = _a.$hasError;
|
|
5465
5753
|
return $hasError ? input.error.hover.borderColor : input.hover.borderColor;
|
|
5466
|
-
}
|
|
5754
|
+
});
|
|
5467
5755
|
/**
|
|
5468
5756
|
* Base styled textarea with shared styling
|
|
5469
5757
|
*/
|
|
@@ -5477,14 +5765,16 @@ var StyledTextAreaBase = styled__default.default.textarea.withConfig({
|
|
|
5477
5765
|
var templateObject_1$a, templateObject_2$9;
|
|
5478
5766
|
|
|
5479
5767
|
var field$2 = data.tokensJson.component.field;
|
|
5768
|
+
// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
|
|
5769
|
+
var gap$2 = data.tokensJson.semantic.spacing.layout;
|
|
5480
5770
|
var StyledFieldContainer$2 = styled__default.default.div.withConfig({
|
|
5481
5771
|
displayName: "NumberInput__StyledFieldContainer",
|
|
5482
5772
|
componentId: "sc-qotc3w-0"
|
|
5483
|
-
})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])),
|
|
5773
|
+
})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), gap$2.sm);
|
|
5484
5774
|
var StyledLabel$3 = styled__default.default.label.withConfig({
|
|
5485
5775
|
displayName: "NumberInput__StyledLabel",
|
|
5486
5776
|
componentId: "sc-qotc3w-1"
|
|
5487
|
-
})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"])),
|
|
5777
|
+
})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"])), gap$2.xs, field$2.label.typography, field$2.label.color, field$2.label.colorDisabled);
|
|
5488
5778
|
var StyledRequiredIndicator$2 = styled__default.default.span.withConfig({
|
|
5489
5779
|
displayName: "NumberInput__StyledRequiredIndicator",
|
|
5490
5780
|
componentId: "sc-qotc3w-2"
|
|
@@ -5796,14 +6086,16 @@ var PageTitle = function PageTitle(_a) {
|
|
|
5796
6086
|
var templateObject_1$8;
|
|
5797
6087
|
|
|
5798
6088
|
var field$1 = data.tokensJson.component.field;
|
|
6089
|
+
// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
|
|
6090
|
+
var gap$1 = data.tokensJson.semantic.spacing.layout;
|
|
5799
6091
|
var StyledFieldContainer$1 = styled__default.default.div.withConfig({
|
|
5800
6092
|
displayName: "PasswordField__StyledFieldContainer",
|
|
5801
6093
|
componentId: "sc-1p15zk0-0"
|
|
5802
|
-
})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])),
|
|
6094
|
+
})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), gap$1.sm);
|
|
5803
6095
|
var StyledLabel$2 = styled__default.default.label.withConfig({
|
|
5804
6096
|
displayName: "PasswordField__StyledLabel",
|
|
5805
6097
|
componentId: "sc-1p15zk0-1"
|
|
5806
|
-
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"])),
|
|
6098
|
+
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"])), gap$1.xs, field$1.label.typography, field$1.label.color, field$1.label.colorDisabled);
|
|
5807
6099
|
var StyledRequiredIndicator$1 = styled__default.default.span.withConfig({
|
|
5808
6100
|
displayName: "PasswordField__StyledRequiredIndicator",
|
|
5809
6101
|
componentId: "sc-1p15zk0-2"
|
|
@@ -5937,14 +6229,14 @@ var StyledInputWrapper = styled__default.default.div.withConfig({
|
|
|
5937
6229
|
displayName: "SearchField__StyledInputWrapper",
|
|
5938
6230
|
componentId: "sc-qhz9i8-1"
|
|
5939
6231
|
})(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 ", " ", ", outline ", " ", ";\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 ", " ", ", outline ", " ", ";\n \n ", "\n \n ", "\n \n &:hover:not([data-disabled='true']) {\n border-color: ", ";\n }\n"])), semantic$3.spacing.layout.sm, semantic$3.spacing.layout.sm, semantic$3.spacing.layout.md, component.input["default"].backgroundColor, component.input["default"].borderWidth, component.input["default"].borderColor, component.input["default"].borderRadius, semantic$3.motion.duration.normal, semantic$3.motion.easing.easeInOut, semantic$3.motion.duration.normal, semantic$3.motion.easing.easeInOut, function (props) {
|
|
5940
|
-
return props.$isFocused && "\n border-color: ".concat(component.input.focus.borderColor, ";\n outline: ").concat(component.input.focus.outline, ";\n outline-offset: ").concat(
|
|
6232
|
+
return props.$isFocused && "\n border-color: ".concat(component.input.focus.borderColor, ";\n outline: ").concat(component.input.focus.outline, ";\n outline-offset: ").concat(semantic$3.border.focusOffset, ";\n ");
|
|
5941
6233
|
}, function (props) {
|
|
5942
6234
|
return props.$disabled && "\n background-color: ".concat(component.input.disabled.backgroundColor, ";\n border-color: ").concat(component.input.disabled.borderColor, ";\n cursor: not-allowed;\n ");
|
|
5943
6235
|
}, component.input.hover.borderColor);
|
|
5944
6236
|
var StyledInput = styled__default.default.input.withConfig({
|
|
5945
6237
|
displayName: "SearchField__StyledInput",
|
|
5946
6238
|
componentId: "sc-qhz9i8-2"
|
|
5947
|
-
})(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$3.typography.body, semantic$3.color.text["default"],
|
|
6239
|
+
})(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 /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n opacity: 1;\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 /* Firefox fades placeholders to 0.54 by default, which would undo the 4.5:1 contrast */\n opacity: 1;\n }\n \n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"])), semantic$3.typography.body, semantic$3.color.text["default"], component.input.placeholder.textColor, semantic$3.color.text.disabled);
|
|
5948
6240
|
var StyledSuggestionsList = styled__default.default.ul.withConfig({
|
|
5949
6241
|
displayName: "SearchField__StyledSuggestionsList",
|
|
5950
6242
|
componentId: "sc-qhz9i8-3"
|
|
@@ -6507,7 +6799,7 @@ var StyledTrack = styled__default.default.div.withConfig({
|
|
|
6507
6799
|
componentId: "sc-6mh2d4-3"
|
|
6508
6800
|
})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n cursor: ", ";\n"], ["\n position: relative;\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n cursor: ", ";\n"])), semantic$1.spacing.layout.xs, function (_a) {
|
|
6509
6801
|
var $disabled = _a.$disabled;
|
|
6510
|
-
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.
|
|
6802
|
+
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.progressTrack;
|
|
6511
6803
|
}, semantic$1.border.radius.circle, function (_a) {
|
|
6512
6804
|
var $disabled = _a.$disabled;
|
|
6513
6805
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
@@ -6517,7 +6809,7 @@ var StyledTrackFill = styled__default.default.div.withConfig({
|
|
|
6517
6809
|
componentId: "sc-6mh2d4-4"
|
|
6518
6810
|
})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"], ["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"])), function (_a) {
|
|
6519
6811
|
var $disabled = _a.$disabled;
|
|
6520
|
-
return $disabled ? semantic$1.color.
|
|
6812
|
+
return $disabled ? semantic$1.color.icon.disabled : semantic$1.color.background.emphasis;
|
|
6521
6813
|
}, semantic$1.border.radius.circle);
|
|
6522
6814
|
var StyledThumb = styled__default.default.div.withConfig({
|
|
6523
6815
|
displayName: "Slider__StyledThumb",
|
|
@@ -6527,7 +6819,7 @@ var StyledThumb = styled__default.default.div.withConfig({
|
|
|
6527
6819
|
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
|
|
6528
6820
|
}, semantic$1.border.width.thick, function (_a) {
|
|
6529
6821
|
var $disabled = _a.$disabled;
|
|
6530
|
-
return $disabled ? semantic$1.color.
|
|
6822
|
+
return $disabled ? semantic$1.color.icon.disabled : semantic$1.color.background.emphasis;
|
|
6531
6823
|
}, semantic$1.border.radius.circle, function (_a) {
|
|
6532
6824
|
var $disabled = _a.$disabled;
|
|
6533
6825
|
return $disabled ? 'not-allowed' : 'grab';
|
|
@@ -6893,47 +7185,42 @@ var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4
|
|
|
6893
7185
|
|
|
6894
7186
|
var semantic = data.tokensJson.semantic;
|
|
6895
7187
|
var StyledTabList = styled__default.default.div.withConfig({
|
|
6896
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6897
|
-
return !prop.startsWith('$');
|
|
6898
|
-
},
|
|
6899
7188
|
displayName: "TabBar__StyledTabList",
|
|
6900
7189
|
componentId: "sc-1g9ib0y-0"
|
|
6901
|
-
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n
|
|
6902
|
-
return props.$variant === 'pills' ? semantic.spacing.layout.sm : '0';
|
|
6903
|
-
}, function (props) {
|
|
6904
|
-
return props.$variant === 'underline' ? "".concat(semantic.border.width.thin, " solid ").concat(semantic.color.border.subtle) : 'none';
|
|
6905
|
-
}, data.tokensJson.component.tabBar.scrollbar.height, semantic.color.background.subtle, semantic.color.border["default"], semantic.border.radius.sm);
|
|
7190
|
+
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n border-bottom: ", " solid ", ";\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n \n &::-webkit-scrollbar {\n height: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n border-bottom: ", " solid ", ";\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n \n &::-webkit-scrollbar {\n height: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n"])), semantic.border.width.thin, semantic.color.border.subtle, data.tokensJson.component.tabBar.scrollbar.height, semantic.color.background.subtle, semantic.color.border["default"], semantic.border.radius.sm);
|
|
6906
7191
|
var StyledTab = styled__default.default.button.withConfig({
|
|
6907
7192
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6908
7193
|
return !prop.startsWith('$');
|
|
6909
7194
|
},
|
|
6910
7195
|
displayName: "TabBar__StyledTab",
|
|
6911
7196
|
componentId: "sc-1g9ib0y-1"
|
|
6912
|
-
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /*
|
|
7197
|
+
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n border-radius: ", " ", " 0 0;\n background-color: ", ";\n color: ", ";\n\n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n height: ", ";\n background-color: ", ";\n transition: ", ";\n }\n\n &:hover:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n\n &:active:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n\n /* Disabled state */\n opacity: ", ";\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n z-index: 1;\n }\n \n /* Pressed nudge */\n &:active:not(:disabled) {\n transform: translateY(1px);\n }\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /* Selected tab: the light-blue selected treatment plus a blue underline (decisions 0016, 0020).\n The text darkens with the fill on hover and press so every state stays at least 4.5:1. */\n border-radius: ", " ", " 0 0;\n background-color: ", ";\n color: ", ";\n\n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n height: ", ";\n background-color: ", ";\n transition: ", ";\n }\n\n &:hover:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n\n &:active:not(:disabled) {\n background-color: ", ";\n color: ", ";\n }\n\n /* Disabled state */\n opacity: ", ";\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n z-index: 1;\n }\n \n /* Pressed nudge */\n &:active:not(:disabled) {\n transform: translateY(1px);\n }\n"])), semantic.spacing.layout.sm, semantic.spacing.layout.md, semantic.spacing.layout.lg, semantic.typography.button2, function (props) {
|
|
6913
7198
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
7199
|
+
}, semantic.motion.hover, semantic.border.radius.sm, semantic.border.radius.sm, function (props) {
|
|
7200
|
+
return props.$isActive ? semantic.color.background['interactive-subtle'] : 'transparent';
|
|
7201
|
+
}, function (props) {
|
|
7202
|
+
return props.$isActive ? semantic.color.text.interactive : semantic.color.text.subdued;
|
|
7203
|
+
}, semantic.border.width.thick, function (props) {
|
|
7204
|
+
return props.$isActive ? semantic.color.background.interactive : 'transparent';
|
|
6914
7205
|
}, semantic.motion.hover, function (props) {
|
|
6915
|
-
|
|
6916
|
-
|
|
6917
|
-
|
|
6918
|
-
|
|
6919
|
-
|
|
6920
|
-
|
|
6921
|
-
|
|
6922
|
-
return "\n border-radius: ".concat(semantic.border.radius.sm, " ").concat(semantic.border.radius.sm, " 0 0;\n background-color: ").concat(props.$isActive ? semantic.color.background.subtle : semantic.color.background["default"], ";\n color: ").concat(props.$isActive ? semantic.color.text["default"] : semantic.color.text.subdued, ";\n border: ").concat(semantic.border.width.thin, " solid ").concat(semantic.color.border["default"], ";\n border-bottom: ").concat(props.$isActive ? 'none' : "".concat(semantic.border.width.thin, " solid ").concat(semantic.color.border["default"]), ";\n margin-bottom: ").concat(props.$isActive ? '-1px' : '0', ";\n \n &:hover:not(:disabled) {\n background-color: ").concat(semantic.color.background.surface, ";\n color: ").concat(semantic.color.text["default"], ";\n }\n ");
|
|
7206
|
+
return props.$isActive ? semantic.color.background['interactive-subtle-hover'] : 'transparent';
|
|
7207
|
+
}, function (props) {
|
|
7208
|
+
return props.$isActive ? semantic.color.text['interactive-hover'] : semantic.color.text["default"];
|
|
7209
|
+
}, function (props) {
|
|
7210
|
+
return props.$isActive ? semantic.color.background['interactive-subtle-active'] : 'transparent';
|
|
7211
|
+
}, function (props) {
|
|
7212
|
+
return props.$isActive ? semantic.color.text['interactive-active'] : semantic.color.text["default"];
|
|
6923
7213
|
}, function (props) {
|
|
6924
7214
|
return props.$disabled ? '0.5' : '1';
|
|
6925
7215
|
}, semantic.border.width.thick, semantic.color.border.strong, semantic.spacing.layout.xs);
|
|
6926
7216
|
var StyledBadge = styled__default.default.span.withConfig({
|
|
6927
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6928
|
-
return !prop.startsWith('$');
|
|
6929
|
-
},
|
|
6930
7217
|
displayName: "TabBar__StyledBadge",
|
|
6931
7218
|
componentId: "sc-1g9ib0y-2"
|
|
6932
7219
|
})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: ", ";\n height: ", ";\n padding: 0 ", ";\n font: ", ";\n font-weight: ", ";\n border-radius: ", ";\n background-color: ", ";\n color: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: ", ";\n height: ", ";\n padding: 0 ", ";\n font: ", ";\n font-weight: ", ";\n border-radius: ", ";\n background-color: ", ";\n color: ", ";\n"
|
|
6933
7220
|
/**
|
|
6934
7221
|
* TabBar component for tabbed navigation
|
|
6935
7222
|
*
|
|
6936
|
-
* Provides accessible tab navigation with
|
|
7223
|
+
* Provides accessible tab navigation with an underline style, keyboard support,
|
|
6937
7224
|
* and optional badge counts. Follows ARIA tablist pattern.
|
|
6938
7225
|
*
|
|
6939
7226
|
* @example
|
|
@@ -6948,16 +7235,13 @@ var StyledBadge = styled__default.default.span.withConfig({
|
|
|
6948
7235
|
* ]}
|
|
6949
7236
|
* activeTab={activeTab}
|
|
6950
7237
|
* onTabChange={setActiveTab}
|
|
6951
|
-
* variant="pills"
|
|
6952
7238
|
* />
|
|
6953
7239
|
* ```
|
|
6954
|
-
*/])), data.tokensJson.component.tabBar.badge.size, data.tokensJson.component.tabBar.badge.size, semantic.spacing.layout.xs, data.tokensJson.component.tabBar.badge.typography, data.tokensJson.component.tabBar.badge.fontWeight, semantic.border.radius.circle,
|
|
6955
|
-
return props.$variant === 'pills' && props.$isActive ? semantic.color.background['inverse-overlay'] : semantic.color.background.interactive;
|
|
6956
|
-
}, semantic.color.text.inverse);
|
|
7240
|
+
*/])), data.tokensJson.component.tabBar.badge.size, data.tokensJson.component.tabBar.badge.size, semantic.spacing.layout.xs, data.tokensJson.component.tabBar.badge.typography, data.tokensJson.component.tabBar.badge.fontWeight, semantic.border.radius.circle, semantic.color.background.interactive, semantic.color.text.inverse);
|
|
6957
7241
|
/**
|
|
6958
7242
|
* TabBar component for tabbed navigation
|
|
6959
7243
|
*
|
|
6960
|
-
* Provides accessible tab navigation with
|
|
7244
|
+
* Provides accessible tab navigation with an underline style, keyboard support,
|
|
6961
7245
|
* and optional badge counts. Follows ARIA tablist pattern.
|
|
6962
7246
|
*
|
|
6963
7247
|
* @example
|
|
@@ -6972,27 +7256,26 @@ var StyledBadge = styled__default.default.span.withConfig({
|
|
|
6972
7256
|
* ]}
|
|
6973
7257
|
* activeTab={activeTab}
|
|
6974
7258
|
* onTabChange={setActiveTab}
|
|
6975
|
-
* variant="pills"
|
|
6976
7259
|
* />
|
|
6977
7260
|
* ```
|
|
6978
7261
|
*/
|
|
6979
7262
|
var TabBar = function TabBar(_a) {
|
|
6980
7263
|
var tabs = _a.tabs,
|
|
6981
7264
|
activeTab = _a.activeTab,
|
|
6982
|
-
onTabChange = _a.onTabChange
|
|
6983
|
-
|
|
6984
|
-
variant
|
|
6985
|
-
|
|
6986
|
-
ariaLabel =
|
|
7265
|
+
onTabChange = _a.onTabChange;
|
|
7266
|
+
// Deprecated: every variant renders as underline (decision 0020)
|
|
7267
|
+
_a.variant;
|
|
7268
|
+
var _b = _a["aria-label"],
|
|
7269
|
+
ariaLabel = _b === void 0 ? 'Tab navigation' : _b,
|
|
6987
7270
|
dataTestId = _a["data-testid"];
|
|
6988
7271
|
var tabRefs = React.useRef([]);
|
|
6989
|
-
var
|
|
7272
|
+
var _c = React.useState(function () {
|
|
6990
7273
|
return tabs.findIndex(function (tab) {
|
|
6991
7274
|
return tab.id === activeTab;
|
|
6992
7275
|
});
|
|
6993
7276
|
}),
|
|
6994
|
-
focusedIndex =
|
|
6995
|
-
setFocusedIndex =
|
|
7277
|
+
focusedIndex = _c[0],
|
|
7278
|
+
setFocusedIndex = _c[1];
|
|
6996
7279
|
// Update focused index when active tab changes externally
|
|
6997
7280
|
React.useEffect(function () {
|
|
6998
7281
|
var newIndex = tabs.findIndex(function (tab) {
|
|
@@ -7067,7 +7350,6 @@ var TabBar = function TabBar(_a) {
|
|
|
7067
7350
|
}
|
|
7068
7351
|
};
|
|
7069
7352
|
return jsxRuntime.jsx(StyledTabList, {
|
|
7070
|
-
"$variant": variant,
|
|
7071
7353
|
role: "tablist",
|
|
7072
7354
|
"aria-label": ariaLabel,
|
|
7073
7355
|
"data-testid": dataTestId,
|
|
@@ -7076,7 +7358,6 @@ var TabBar = function TabBar(_a) {
|
|
|
7076
7358
|
ref: function ref(el) {
|
|
7077
7359
|
tabRefs.current[index] = el;
|
|
7078
7360
|
},
|
|
7079
|
-
"$variant": variant,
|
|
7080
7361
|
"$isActive": tab.id === activeTab,
|
|
7081
7362
|
"$disabled": tab.disabled || false,
|
|
7082
7363
|
role: "tab",
|
|
@@ -7092,8 +7373,6 @@ var TabBar = function TabBar(_a) {
|
|
|
7092
7373
|
},
|
|
7093
7374
|
"data-testid": "".concat(dataTestId, "-tab-").concat(tab.id),
|
|
7094
7375
|
children: [tab.label, typeof tab.badge === 'number' && tab.badge > 0 && jsxRuntime.jsx(StyledBadge, {
|
|
7095
|
-
"$variant": variant,
|
|
7096
|
-
"$isActive": tab.id === activeTab,
|
|
7097
7376
|
"aria-label": "".concat(tab.badge, " items"),
|
|
7098
7377
|
children: tab.badge > 99 ? '99+' : tab.badge
|
|
7099
7378
|
})]
|
|
@@ -7105,14 +7384,16 @@ TabBar.displayName = 'TabBar';
|
|
|
7105
7384
|
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
7106
7385
|
|
|
7107
7386
|
var field = data.tokensJson.component.field;
|
|
7387
|
+
// Gaps come from the semantic spacing scale: no component spacing tokens (decision 0022)
|
|
7388
|
+
var gap = data.tokensJson.semantic.spacing.layout;
|
|
7108
7389
|
var StyledFieldContainer = styled__default.default.div.withConfig({
|
|
7109
7390
|
displayName: "TextField__StyledFieldContainer",
|
|
7110
7391
|
componentId: "sc-1ys3b0-0"
|
|
7111
|
-
})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])),
|
|
7392
|
+
})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), gap.sm);
|
|
7112
7393
|
var StyledLabel = styled__default.default.label.withConfig({
|
|
7113
7394
|
displayName: "TextField__StyledLabel",
|
|
7114
7395
|
componentId: "sc-1ys3b0-1"
|
|
7115
|
-
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"])),
|
|
7396
|
+
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n\n &[data-disabled='true'] {\n color: ", ";\n }\n"])), gap.xs, field.label.typography, field.label.color, field.label.colorDisabled);
|
|
7116
7397
|
var StyledRequiredIndicator = styled__default.default.span.withConfig({
|
|
7117
7398
|
displayName: "TextField__StyledRequiredIndicator",
|
|
7118
7399
|
componentId: "sc-1ys3b0-2"
|
|
@@ -7245,9 +7526,9 @@ var StyledTruncatedText = styled__default.default.span.withConfig({
|
|
|
7245
7526
|
displayName: "TransactionListItem__StyledTruncatedText",
|
|
7246
7527
|
componentId: "sc-7yunm0-8"
|
|
7247
7528
|
})(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"
|
|
7248
|
-
// Map categories to
|
|
7529
|
+
// Map categories to CategoryLabel configurations
|
|
7249
7530
|
])));
|
|
7250
|
-
// Map categories to
|
|
7531
|
+
// Map categories to CategoryLabel configurations
|
|
7251
7532
|
var categoryConfig = {
|
|
7252
7533
|
shopping: {
|
|
7253
7534
|
color: 'purple',
|
|
@@ -7361,10 +7642,10 @@ var TransactionListItem = function TransactionListItem(_a) {
|
|
|
7361
7642
|
variant: "body",
|
|
7362
7643
|
children: merchant
|
|
7363
7644
|
})
|
|
7364
|
-
}), categoryData && jsxRuntime.jsx(
|
|
7645
|
+
}), categoryData && jsxRuntime.jsx(CategoryLabel, {
|
|
7365
7646
|
color: categoryData.color,
|
|
7366
7647
|
icon: categoryData.icon,
|
|
7367
|
-
size: "
|
|
7648
|
+
size: "medium",
|
|
7368
7649
|
variant: "minimal",
|
|
7369
7650
|
"aria-label": "Category: ".concat(categoryData.label),
|
|
7370
7651
|
children: categoryData.label
|
|
@@ -7644,6 +7925,7 @@ exports.Button = Button;
|
|
|
7644
7925
|
exports.CardLarge = CardLarge;
|
|
7645
7926
|
exports.CardSmall = CardSmall;
|
|
7646
7927
|
exports.CategoryBadge = CategoryBadge;
|
|
7928
|
+
exports.CategoryLabel = CategoryLabel;
|
|
7647
7929
|
exports.Checkbox = Checkbox;
|
|
7648
7930
|
exports.Chip = Chip;
|
|
7649
7931
|
exports.ChipGroup = ChipGroup;
|
|
@@ -7660,6 +7942,8 @@ exports.Grid = Grid;
|
|
|
7660
7942
|
exports.GridCol = GridCol;
|
|
7661
7943
|
exports.Icon = Icon;
|
|
7662
7944
|
exports.IconButton = IconButton;
|
|
7945
|
+
exports.InlineAlert = InlineAlert;
|
|
7946
|
+
exports.InputChip = InputChip;
|
|
7663
7947
|
exports.LegacyChip = LegacyChip;
|
|
7664
7948
|
exports.List = List;
|
|
7665
7949
|
exports.ListItem = ListItem;
|
|
@@ -7676,6 +7960,7 @@ exports.Sheet = Sheet;
|
|
|
7676
7960
|
exports.Slider = Slider;
|
|
7677
7961
|
exports.Stack = Stack;
|
|
7678
7962
|
exports.StatusBadge = StatusBadge;
|
|
7963
|
+
exports.StatusLabel = StatusLabel;
|
|
7679
7964
|
exports.StyledInputBase = StyledInputBase;
|
|
7680
7965
|
exports.StyledTextAreaBase = StyledTextAreaBase;
|
|
7681
7966
|
exports.TabBar = TabBar;
|