@common-origin/design-system 2.13.0 → 2.15.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 +50 -184
- package/dist/client.esm.js +767 -466
- package/dist/client.esm.js.map +1 -1
- package/dist/client.js +766 -465
- package/dist/client.js.map +1 -1
- package/dist/components/atoms/Badge/Badge.d.ts +2 -0
- package/dist/components/atoms/Chip/shared/utils.d.ts +3 -0
- package/dist/components/atoms/ProgressBar/ProgressBar.d.ts +4 -0
- package/dist/components/layout/GridSystem/GridSystem.d.ts +6 -0
- package/dist/components/molecules/Alert/Alert.d.ts +2 -1
- package/dist/components/molecules/CardLarge/CardLarge.d.ts +3 -1
- package/dist/components/molecules/CardSmall/CardSmall.d.ts +2 -0
- package/dist/components/molecules/Dropdown/Dropdown.d.ts +2 -0
- package/dist/components/molecules/FeatureBlock/FeatureBlock.d.ts +2 -0
- package/dist/components/molecules/PageTitle/PageTitle.d.ts +13 -0
- package/dist/components/molecules/Sheet/Sheet.d.ts +2 -2
- package/dist/data.esm.js +236 -4
- package/dist/data.esm.js.map +1 -1
- package/dist/data.js +236 -4
- package/dist/data.js.map +1 -1
- package/dist/lib/styleUtils.d.ts +3 -0
- package/dist/lib/usePresence.d.ts +16 -0
- package/dist/styles/tokens.json +236 -4
- package/dist/tokens/index.esm.js +236 -4
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +236 -4
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/types/tokens.d.ts +232 -0
- package/dist/types/tokens.d.ts +232 -0
- package/package.json +5 -7
package/dist/client.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
|
-
import React, { useState,
|
|
3
|
+
import React, { useState, useEffect, useRef, useId, useCallback, useMemo, forwardRef } from 'react';
|
|
4
4
|
import styled, { keyframes, css } from 'styled-components';
|
|
5
5
|
import { t as tokensJson, i as iconsJson } from './data.esm.js';
|
|
6
6
|
import { parseISO, format, isToday, isYesterday, isThisWeek } from 'date-fns';
|
|
@@ -104,10 +104,11 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
104
104
|
};
|
|
105
105
|
|
|
106
106
|
// Destructure tokens
|
|
107
|
-
var semantic$
|
|
108
|
-
var
|
|
109
|
-
|
|
110
|
-
|
|
107
|
+
var semantic$g = tokensJson.semantic;
|
|
108
|
+
var initials = tokensJson.component.avatar.initials;
|
|
109
|
+
var color$a = semantic$g.color,
|
|
110
|
+
size$1 = semantic$g.size,
|
|
111
|
+
border$a = semantic$g.border;
|
|
111
112
|
var radius$5 = border$a.radius;
|
|
112
113
|
var AvatarContainer = styled.div.withConfig({
|
|
113
114
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -115,7 +116,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
115
116
|
},
|
|
116
117
|
displayName: "Avatar__AvatarContainer",
|
|
117
118
|
componentId: "sc-ezn4ax-0"
|
|
118
|
-
})(templateObject_1$
|
|
119
|
+
})(templateObject_1$L || (templateObject_1$L = __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) {
|
|
119
120
|
var $size = _a.$size;
|
|
120
121
|
return size$1.avatar[$size];
|
|
121
122
|
}, function (_a) {
|
|
@@ -128,26 +129,19 @@ var AvatarImage = styled.img.withConfig({
|
|
|
128
129
|
},
|
|
129
130
|
displayName: "Avatar__AvatarImage",
|
|
130
131
|
componentId: "sc-ezn4ax-1"
|
|
131
|
-
})(templateObject_2$
|
|
132
|
+
})(templateObject_2$w || (templateObject_2$w = __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);
|
|
132
133
|
var AvatarInitials = styled.span.withConfig({
|
|
133
134
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
134
135
|
return !prop.startsWith('$');
|
|
135
136
|
},
|
|
136
137
|
displayName: "Avatar__AvatarInitials",
|
|
137
138
|
componentId: "sc-ezn4ax-2"
|
|
138
|
-
})(templateObject_3$
|
|
139
|
+
})(templateObject_3$t || (templateObject_3$t = __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"
|
|
139
140
|
// Helper function to get initials from name
|
|
140
|
-
])),
|
|
141
|
+
])), initials.fontFamily, initials.fontWeight, function (_a) {
|
|
141
142
|
var $size = _a.$size;
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
sm: tokensJson.base.fontSize[2],
|
|
145
|
-
md: tokensJson.base.fontSize[3],
|
|
146
|
-
lg: tokensJson.base.fontSize[4],
|
|
147
|
-
xl: tokensJson.base.fontSize[5]
|
|
148
|
-
};
|
|
149
|
-
return sizeMap[$size];
|
|
150
|
-
}, color$a.text["default"]);
|
|
143
|
+
return initials.fontSize[$size];
|
|
144
|
+
}, color$a.text["default"], initials.lineHeight);
|
|
151
145
|
// Helper function to get initials from name
|
|
152
146
|
var getInitials = function getInitials(name) {
|
|
153
147
|
return name.split(' ').map(function (word) {
|
|
@@ -201,29 +195,74 @@ var Avatar = function Avatar(_a) {
|
|
|
201
195
|
})
|
|
202
196
|
}));
|
|
203
197
|
};
|
|
198
|
+
var templateObject_1$L, templateObject_2$w, templateObject_3$t;
|
|
199
|
+
|
|
200
|
+
// Breakpoints from the semantic tokens (decision 0014)
|
|
201
|
+
var breakpoints$1 = {
|
|
202
|
+
xs: tokensJson.semantic.breakpoint.xs,
|
|
203
|
+
sm: tokensJson.semantic.breakpoint.sm,
|
|
204
|
+
md: tokensJson.semantic.breakpoint.md,
|
|
205
|
+
lg: tokensJson.semantic.breakpoint.lg,
|
|
206
|
+
xl: tokensJson.semantic.breakpoint.xl,
|
|
207
|
+
'2xl': tokensJson.semantic.breakpoint['2xl']
|
|
208
|
+
};
|
|
209
|
+
// Media query helpers
|
|
210
|
+
var media$1 = {
|
|
211
|
+
xs: "@media (min-width: ".concat(breakpoints$1.xs, ")"),
|
|
212
|
+
sm: "@media (min-width: ".concat(breakpoints$1.sm, ")"),
|
|
213
|
+
md: "@media (min-width: ".concat(breakpoints$1.md, ")"),
|
|
214
|
+
lg: "@media (min-width: ".concat(breakpoints$1.lg, ")"),
|
|
215
|
+
xl: "@media (min-width: ".concat(breakpoints$1.xl, ")"),
|
|
216
|
+
'2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
|
|
217
|
+
};
|
|
218
|
+
// Wrap fallbacks for people who ask for less motion (decision 0005): movement becomes
|
|
219
|
+
// an instant change or a simple fade. Colour and opacity transitions need no fallback.
|
|
220
|
+
var reducedMotion = '@media (prefers-reduced-motion: reduce)';
|
|
221
|
+
// No `from` keyframe: the fade starts from the element's current opacity, including a
|
|
222
|
+
// still-running entrance, so closing mid-entrance doesn't jump back to fully visible.
|
|
223
|
+
var fadeOut$1 = keyframes(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n to { opacity: 0; }\n"], ["\n to { opacity: 0; }\n"
|
|
224
|
+
// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of
|
|
225
|
+
// the element's `animation` declarations while it exits: the entrance stays in the list,
|
|
226
|
+
// so it isn't restarted, and the fade runs on top of it. A fade is already the
|
|
227
|
+
// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
|
|
228
|
+
// still catches clicks (so they can't reach the page behind it) and the panel is inert.
|
|
229
|
+
])));
|
|
230
|
+
// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of
|
|
231
|
+
// the element's `animation` declarations while it exits: the entrance stays in the list,
|
|
232
|
+
// so it isn't restarted, and the fade runs on top of it. A fade is already the
|
|
233
|
+
// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
|
|
234
|
+
// still catches clicks (so they can't reach the page behind it) and the panel is inert.
|
|
235
|
+
var exitAnimation = css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
|
|
236
|
+
// Content for screen readers only. The 1px size and -1px margin are part of the standard
|
|
237
|
+
// visually-hidden technique, not design values, so they aren't tokens.
|
|
238
|
+
])), fadeOut$1, tokensJson.semantic.motion.duration.fast, tokensJson.semantic.motion.easing.easeOut);
|
|
239
|
+
// Content for screen readers only. The 1px size and -1px margin are part of the standard
|
|
240
|
+
// visually-hidden technique, not design values, so they aren't tokens.
|
|
241
|
+
var visuallyHidden = css(templateObject_3$s || (templateObject_3$s = __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"])));
|
|
204
242
|
var templateObject_1$K, templateObject_2$v, templateObject_3$s;
|
|
205
243
|
|
|
206
|
-
var _a$
|
|
207
|
-
typography$
|
|
208
|
-
color$9 = _a$
|
|
244
|
+
var _a$b = tokensJson.semantic,
|
|
245
|
+
typography$1 = _a$b.typography,
|
|
246
|
+
color$9 = _a$b.color,
|
|
247
|
+
letterSpacing = _a$b.letterSpacing;
|
|
209
248
|
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
210
249
|
var styles = {
|
|
211
|
-
display: "font: ".concat(typography$
|
|
212
|
-
h1: "font: ".concat(typography$
|
|
213
|
-
h2: "font: ".concat(typography$
|
|
214
|
-
h3: "font: ".concat(typography$
|
|
215
|
-
h4: "font: ".concat(typography$
|
|
216
|
-
h5: "font: ".concat(typography$
|
|
217
|
-
h6: "font: ".concat(typography$
|
|
218
|
-
subtitle: "font: ".concat(typography$
|
|
219
|
-
body: "font: ".concat(typography$
|
|
220
|
-
small: "font: ".concat(typography$
|
|
221
|
-
overline: "font: ".concat(typography$
|
|
222
|
-
caption: "font: ".concat(typography$
|
|
223
|
-
button1: "font: ".concat(typography$
|
|
224
|
-
button2: "font: ".concat(typography$
|
|
225
|
-
button3: "font: ".concat(typography$
|
|
226
|
-
label: "font: ".concat(typography$
|
|
250
|
+
display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
|
|
251
|
+
h1: "font: ".concat(typography$1.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
|
|
252
|
+
h2: "font: ".concat(typography$1.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
|
|
253
|
+
h3: "font: ".concat(typography$1.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
|
|
254
|
+
h4: "font: ".concat(typography$1.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
|
|
255
|
+
h5: "font: ".concat(typography$1.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
|
|
256
|
+
h6: "font: ".concat(typography$1.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
|
|
257
|
+
subtitle: "font: ".concat(typography$1.subtitle, ";"),
|
|
258
|
+
body: "font: ".concat(typography$1.body, ";"),
|
|
259
|
+
small: "font: ".concat(typography$1.small, ";"),
|
|
260
|
+
overline: "font: ".concat(typography$1.overline, ";"),
|
|
261
|
+
caption: "font: ".concat(typography$1.caption, "; text-transform: uppercase;"),
|
|
262
|
+
button1: "font: ".concat(typography$1.button1, ";"),
|
|
263
|
+
button2: "font: ".concat(typography$1.button2, ";"),
|
|
264
|
+
button3: "font: ".concat(typography$1.button3, ";"),
|
|
265
|
+
label: "font: ".concat(typography$1.label, ";")
|
|
227
266
|
};
|
|
228
267
|
return styles[variant] || styles.body;
|
|
229
268
|
};
|
|
@@ -268,7 +307,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
268
307
|
},
|
|
269
308
|
displayName: "Typography__StyledTypography",
|
|
270
309
|
componentId: "sc-17mqo4k-0"
|
|
271
|
-
})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n color: ", ";\n margin: 0;\n
|
|
310
|
+
})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n color: ", ";\n margin: 0;\n"], ["\n ", "\n color: ", ";\n margin: 0;\n"
|
|
272
311
|
/**
|
|
273
312
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
274
313
|
*
|
|
@@ -292,12 +331,6 @@ var StyledTypography = styled.span.withConfig({
|
|
|
292
331
|
}, function (_a) {
|
|
293
332
|
var $color = _a.$color;
|
|
294
333
|
return getTextColor($color);
|
|
295
|
-
}, function (_a) {
|
|
296
|
-
var $variant = _a.$variant;
|
|
297
|
-
if (['body', 'subtitle', 'small'].includes($variant)) {
|
|
298
|
-
return 'line-height: 1.5;';
|
|
299
|
-
}
|
|
300
|
-
return '';
|
|
301
334
|
});
|
|
302
335
|
/**
|
|
303
336
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
@@ -338,10 +371,14 @@ var Typography = function Typography(_a) {
|
|
|
338
371
|
};
|
|
339
372
|
var templateObject_1$J;
|
|
340
373
|
|
|
341
|
-
var semantic$
|
|
342
|
-
var color$8 = semantic$
|
|
343
|
-
border$9 = semantic$
|
|
374
|
+
var semantic$f = tokensJson.semantic;
|
|
375
|
+
var color$8 = semantic$f.color,
|
|
376
|
+
border$9 = semantic$f.border;
|
|
344
377
|
var radius$4 = border$9.radius;
|
|
378
|
+
var _a$a = tokensJson.component.badge,
|
|
379
|
+
dot = _a$a.dot,
|
|
380
|
+
count = _a$a.count,
|
|
381
|
+
ring = _a$a.ring;
|
|
345
382
|
var scaleIn$2 = keyframes(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
346
383
|
var BadgeWrapper = styled.span.withConfig({
|
|
347
384
|
displayName: "Badge__BadgeWrapper",
|
|
@@ -353,15 +390,15 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
353
390
|
},
|
|
354
391
|
displayName: "Badge__BadgeIndicator",
|
|
355
392
|
componentId: "sc-tjz4pp-1"
|
|
356
|
-
})(templateObject_3$r || (templateObject_3$r = __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:
|
|
393
|
+
})(templateObject_3$r || (templateObject_3$r = __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) {
|
|
357
394
|
return props.$isVisible ? 'flex' : 'none';
|
|
358
395
|
}, function (props) {
|
|
359
|
-
return props.$isDot ?
|
|
396
|
+
return props.$isDot ? dot.size : count.minWidth;
|
|
360
397
|
}, function (props) {
|
|
361
|
-
return props.$isDot ?
|
|
398
|
+
return props.$isDot ? dot.size : count.height;
|
|
362
399
|
}, function (props) {
|
|
363
|
-
return props.$isDot ? '0' :
|
|
364
|
-
}, radius$4.circle, color$8.background["default"], scaleIn$2, function (props) {
|
|
400
|
+
return props.$isDot ? '0' : "0 ".concat(count.paddingX);
|
|
401
|
+
}, radius$4.circle, count.lineHeight, ring.width, color$8.background["default"], scaleIn$2, semantic$f.motion.duration.normal, semantic$f.motion.easing.easeOut, reducedMotion, function (props) {
|
|
365
402
|
switch (props.$variant) {
|
|
366
403
|
case 'primary':
|
|
367
404
|
return "\n background-color: ".concat(color$8.background.interactive, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
@@ -378,7 +415,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
378
415
|
var ScreenReaderOnly$1 = styled.span.withConfig({
|
|
379
416
|
displayName: "Badge__ScreenReaderOnly",
|
|
380
417
|
componentId: "sc-tjz4pp-2"
|
|
381
|
-
})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n
|
|
418
|
+
})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), visuallyHidden);
|
|
382
419
|
var Badge = function Badge(_a) {
|
|
383
420
|
var children = _a.children,
|
|
384
421
|
_b = _a.count,
|
|
@@ -390,7 +427,8 @@ var Badge = function Badge(_a) {
|
|
|
390
427
|
_e = _a.dot,
|
|
391
428
|
dot = _e === void 0 ? false : _e,
|
|
392
429
|
ariaLabel = _a["aria-label"],
|
|
393
|
-
className = _a.className
|
|
430
|
+
className = _a.className,
|
|
431
|
+
dataTestId = _a["data-testid"];
|
|
394
432
|
var isVisible = dot || count > 0;
|
|
395
433
|
var displayCount = count > max ? "".concat(max, "+") : count.toString();
|
|
396
434
|
// Generate default aria-label if not provided
|
|
@@ -398,6 +436,7 @@ var Badge = function Badge(_a) {
|
|
|
398
436
|
var label = ariaLabel || defaultAriaLabel;
|
|
399
437
|
return jsxs(BadgeWrapper, {
|
|
400
438
|
className: className,
|
|
439
|
+
"data-testid": dataTestId,
|
|
401
440
|
children: [children, jsxs(BadgeIndicator, {
|
|
402
441
|
"$variant": variant,
|
|
403
442
|
"$isDot": dot,
|
|
@@ -433,21 +472,21 @@ var StyledBox = styled.div.withConfig({
|
|
|
433
472
|
}, function (props) {
|
|
434
473
|
return props.$alignItems && css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
435
474
|
}, function (props) {
|
|
436
|
-
return props.$flexWrap && css(templateObject_5$
|
|
475
|
+
return props.$flexWrap && css(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
437
476
|
}, function (props) {
|
|
438
477
|
return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensJson.semantic.spacing.layout[props.$gap]);
|
|
439
478
|
}, function (props) {
|
|
440
479
|
return props.$m && css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensJson.semantic.spacing.layout[props.$m]);
|
|
441
480
|
}, function (props) {
|
|
442
|
-
return props.$mt && css(templateObject_8$
|
|
481
|
+
return props.$mt && css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensJson.semantic.spacing.layout[props.$mt]);
|
|
443
482
|
}, function (props) {
|
|
444
|
-
return props.$mr && css(templateObject_9$
|
|
483
|
+
return props.$mr && css(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensJson.semantic.spacing.layout[props.$mr]);
|
|
445
484
|
}, function (props) {
|
|
446
|
-
return props.$mb && css(templateObject_10$
|
|
485
|
+
return props.$mb && css(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensJson.semantic.spacing.layout[props.$mb]);
|
|
447
486
|
}, function (props) {
|
|
448
|
-
return props.$ml && css(templateObject_11$
|
|
487
|
+
return props.$ml && css(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$ml]);
|
|
449
488
|
}, function (props) {
|
|
450
|
-
return props.$mx && css(templateObject_12$
|
|
489
|
+
return props.$mx && css(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n "], ["\n margin-left: ", ";\n margin-right: ", ";\n "])), tokensJson.semantic.spacing.layout[props.$mx], tokensJson.semantic.spacing.layout[props.$mx]);
|
|
451
490
|
}, function (props) {
|
|
452
491
|
return props.$my && css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), tokensJson.semantic.spacing.layout[props.$my], tokensJson.semantic.spacing.layout[props.$my]);
|
|
453
492
|
}, function (props) {
|
|
@@ -459,7 +498,7 @@ var StyledBox = styled.div.withConfig({
|
|
|
459
498
|
}, function (props) {
|
|
460
499
|
return props.$pb && css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensJson.semantic.spacing.layout[props.$pb]);
|
|
461
500
|
}, function (props) {
|
|
462
|
-
return props.$pl && css(templateObject_18$
|
|
501
|
+
return props.$pl && css(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$pl]);
|
|
463
502
|
}, function (props) {
|
|
464
503
|
return props.$px && css(templateObject_19$1 || (templateObject_19$1 = __makeTemplateObject(["\n padding-left: ", ";\n padding-right: ", ";\n "], ["\n padding-left: ", ";\n padding-right: ", ";\n "])), tokensJson.semantic.spacing.layout[props.$px], tokensJson.semantic.spacing.layout[props.$px]);
|
|
465
504
|
}, function (props) {
|
|
@@ -489,15 +528,15 @@ var StyledBox = styled.div.withConfig({
|
|
|
489
528
|
}, function (props) {
|
|
490
529
|
return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensJson.semantic.border.radius[props.$borderRadius]);
|
|
491
530
|
}, function (props) {
|
|
492
|
-
return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border:
|
|
531
|
+
return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border[props.$border]);
|
|
493
532
|
}, function (props) {
|
|
494
|
-
return props.$borderTop && css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top:
|
|
533
|
+
return props.$borderTop && css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border[props.$borderTop]);
|
|
495
534
|
}, function (props) {
|
|
496
|
-
return props.$borderRight && css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right:
|
|
535
|
+
return props.$borderRight && css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: ", " solid ", ";"], ["border-right: ", " solid ", ";"])), tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border[props.$borderRight]);
|
|
497
536
|
}, function (props) {
|
|
498
|
-
return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom:
|
|
537
|
+
return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: ", " solid ", ";"], ["border-bottom: ", " solid ", ";"])), tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border[props.$borderBottom]);
|
|
499
538
|
}, function (props) {
|
|
500
|
-
return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left:
|
|
539
|
+
return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border[props.$borderLeft]);
|
|
501
540
|
}, function (props) {
|
|
502
541
|
return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokensJson.semantic.color.background[props.$bg]);
|
|
503
542
|
}, function (props) {
|
|
@@ -509,7 +548,7 @@ var StyledBox = styled.div.withConfig({
|
|
|
509
548
|
}, function (props) {
|
|
510
549
|
return props.$transition && css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
|
|
511
550
|
}, function (props) {
|
|
512
|
-
return (props.$hoverShadow || props.$hoverTransform) && css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline:
|
|
551
|
+
return (props.$hoverShadow || props.$hoverTransform) && css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n "], ["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n "])), props.$hoverShadow && css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensJson.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensJson.semantic.border.width.thick, tokensJson.semantic.color.border.interactive, tokensJson.semantic.border.focusOffset);
|
|
513
552
|
}, function (props) {
|
|
514
553
|
return props.$overflow && css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
|
|
515
554
|
}, function (props) {
|
|
@@ -649,7 +688,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
649
688
|
}));
|
|
650
689
|
};
|
|
651
690
|
var Box = BoxTransform;
|
|
652
|
-
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$
|
|
691
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, 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$3, 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;
|
|
653
692
|
|
|
654
693
|
var IconStyled = styled.span.withConfig({
|
|
655
694
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -726,9 +765,9 @@ var Icon = function Icon(_a) {
|
|
|
726
765
|
var templateObject_1$G;
|
|
727
766
|
|
|
728
767
|
var button$1 = tokensJson.component.button,
|
|
729
|
-
semantic$
|
|
768
|
+
semantic$e = tokensJson.semantic;
|
|
730
769
|
// Base styles shared between button and link
|
|
731
|
-
var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(tokensJson.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic$
|
|
770
|
+
var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(tokensJson.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic$e.motion.hover, ";\n white-space: nowrap;\n user-select: none;\n \n &:focus {\n outline: ").concat(button$1.focus.outline, ";\n outline-offset: ").concat(button$1.focus.outlineOffset, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n");
|
|
732
771
|
// Dynamic variant styles using component tokens
|
|
733
772
|
var getVariantStyles$1 = function getVariantStyles(_a) {
|
|
734
773
|
var $variant = _a.$variant;
|
|
@@ -848,8 +887,11 @@ var Button = function Button(_a) {
|
|
|
848
887
|
rest = __rest(_a, ["variant", "size", "url", "purpose", "children", "target", "iconName", "linkComponent", 'data-testid']);
|
|
849
888
|
// For links with custom link component (e.g., Next.js Link, React Router Link)
|
|
850
889
|
if (purpose === 'link' && url && LinkComponent) {
|
|
851
|
-
|
|
890
|
+
// The link component renders the <a>, so anchor attributes (id, aria-*, rel, handlers) go to it
|
|
891
|
+
var linkProps = rest;
|
|
892
|
+
return jsx(LinkComponent, __assign({}, linkProps, {
|
|
852
893
|
href: url,
|
|
894
|
+
target: target,
|
|
853
895
|
children: jsx(StyledLink, {
|
|
854
896
|
as: "span",
|
|
855
897
|
"$variant": variant,
|
|
@@ -857,18 +899,17 @@ var Button = function Button(_a) {
|
|
|
857
899
|
"data-testid": dataTestId,
|
|
858
900
|
children: renderButtonContent(children, iconName, size)
|
|
859
901
|
})
|
|
860
|
-
});
|
|
902
|
+
}));
|
|
861
903
|
}
|
|
862
904
|
// For standard links (external or without custom component)
|
|
863
905
|
if (purpose === 'link' && url) {
|
|
864
906
|
var linkProps = rest;
|
|
865
|
-
return jsx(StyledLink, __assign({
|
|
907
|
+
return jsx(StyledLink, __assign({}, linkProps, {
|
|
866
908
|
href: url,
|
|
867
909
|
target: target,
|
|
868
910
|
"$variant": variant,
|
|
869
911
|
"$size": size,
|
|
870
|
-
"data-testid": dataTestId
|
|
871
|
-
}, linkProps, {
|
|
912
|
+
"data-testid": dataTestId,
|
|
872
913
|
children: renderButtonContent(children, iconName, size)
|
|
873
914
|
}));
|
|
874
915
|
}
|
|
@@ -907,12 +948,11 @@ var Button = function Button(_a) {
|
|
|
907
948
|
};
|
|
908
949
|
var templateObject_1$F, templateObject_2$s;
|
|
909
950
|
|
|
910
|
-
var semantic$
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
spacing$7 = semantic$g.spacing;
|
|
951
|
+
var semantic$d = tokensJson.semantic;
|
|
952
|
+
var color$7 = semantic$d.color,
|
|
953
|
+
border$8 = semantic$d.border,
|
|
954
|
+
spacing$7 = semantic$d.spacing;
|
|
955
|
+
var label$2 = tokensJson.component.badge.label;
|
|
916
956
|
var category = color$7.category;
|
|
917
957
|
var radius$3 = border$8.radius;
|
|
918
958
|
var layout$4 = spacing$7.layout;
|
|
@@ -922,7 +962,7 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
922
962
|
},
|
|
923
963
|
displayName: "CategoryBadge__StyledCategoryBadge",
|
|
924
964
|
componentId: "sc-17aslpn-0"
|
|
925
|
-
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n
|
|
965
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\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 color: ", ";\n \n border-color: ", ";\n"], ["\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 color: ", ";\n \n border-color: ", ";\n"
|
|
926
966
|
/**
|
|
927
967
|
* CategoryBadge component for displaying transaction categories
|
|
928
968
|
*
|
|
@@ -940,7 +980,7 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
940
980
|
* Travel
|
|
941
981
|
* </CategoryBadge>
|
|
942
982
|
* ```
|
|
943
|
-
*/])), radius$3.circle,
|
|
983
|
+
*/])), radius$3.circle, semantic$d.border.width.thin, function (_a) {
|
|
944
984
|
var $size = _a.$size;
|
|
945
985
|
return $size === 'small' ? '24px' : '32px';
|
|
946
986
|
}, function (_a) {
|
|
@@ -948,8 +988,8 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
948
988
|
return $size === 'small' ? "".concat(layout$4.xs, " ").concat(layout$4.sm) : "".concat(layout$4.sm, " ").concat(layout$4.md);
|
|
949
989
|
}, function (_a) {
|
|
950
990
|
var $size = _a.$size;
|
|
951
|
-
return $size === 'small' ?
|
|
952
|
-
}, layout$4.xs, function (_a) {
|
|
991
|
+
return $size === 'small' ? label$2.typography.small : label$2.typography.medium;
|
|
992
|
+
}, label$2.fontWeight, layout$4.xs, function (_a) {
|
|
953
993
|
var $color = _a.$color,
|
|
954
994
|
$variant = _a.$variant;
|
|
955
995
|
if ($variant === 'filled') {
|
|
@@ -1023,6 +1063,11 @@ CategoryBadge.displayName = 'CategoryBadge';
|
|
|
1023
1063
|
var templateObject_1$E;
|
|
1024
1064
|
|
|
1025
1065
|
var chip = tokensJson.component.chip;
|
|
1066
|
+
// Selected-chip hover and active colours have no token yet: they wait on #21 (selected states).
|
|
1067
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
1068
|
+
var SELECTED_HOVER = '#CAE8FF';
|
|
1069
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
1070
|
+
var SELECTED_ACTIVE = '#B5DEFF';
|
|
1026
1071
|
// Helper function to get variant styles matching Button's approach
|
|
1027
1072
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1028
1073
|
var $variant = _a.$variant,
|
|
@@ -1031,7 +1076,7 @@ var getVariantStyles = function getVariantStyles(_a) {
|
|
|
1031
1076
|
$disabled = _a.$disabled;
|
|
1032
1077
|
// Boolean chips with selected state get special background
|
|
1033
1078
|
if ($selected) {
|
|
1034
|
-
return "\n background-color: ".concat(tokensJson.semantic.color.background['interactive-subtle'], ";\n color: ").concat(chip["default"].textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? tokensJson.semantic.color.background['interactive-subtle'] : $clickable ?
|
|
1079
|
+
return "\n background-color: ".concat(tokensJson.semantic.color.background['interactive-subtle'], ";\n color: ").concat(chip["default"].textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? SELECTED_HOVER : tokensJson.semantic.color.background['interactive-subtle'], ";\n }\n \n &:active {\n background-color: ").concat($disabled ? tokensJson.semantic.color.background['interactive-subtle'] : $clickable ? SELECTED_ACTIVE : tokensJson.semantic.color.background['interactive-subtle'], ";\n }\n ");
|
|
1035
1080
|
}
|
|
1036
1081
|
switch ($variant) {
|
|
1037
1082
|
case 'emphasis':
|
|
@@ -1083,9 +1128,9 @@ var CloseButton = styled.button.withConfig({
|
|
|
1083
1128
|
},
|
|
1084
1129
|
displayName: "ChipBase__CloseButton",
|
|
1085
1130
|
componentId: "sc-moa6zc-2"
|
|
1086
|
-
})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding:
|
|
1131
|
+
})(templateObject_3$p || (templateObject_3$p = __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"])), tokensJson.semantic.spacing.layout.sm, chip.closeButton.size, chip.closeButton.size, tokensJson.semantic.spacing.layout.none, tokensJson.semantic.border.radius.xs, function (props) {
|
|
1087
1132
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
1088
|
-
}, tokensJson.semantic.motion.hover, tokensJson.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
|
|
1133
|
+
}, tokensJson.semantic.motion.hover, tokensJson.semantic.color.background['hover-overlay'], tokensJson.semantic.color.background['active-overlay'], tokensJson.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
|
|
1089
1134
|
var templateObject_1$D, templateObject_2$r, templateObject_3$p;
|
|
1090
1135
|
|
|
1091
1136
|
/**
|
|
@@ -1313,30 +1358,11 @@ var BooleanChip = function BooleanChip(_a) {
|
|
|
1313
1358
|
}));
|
|
1314
1359
|
};
|
|
1315
1360
|
|
|
1316
|
-
// Breakpoints using base tokens
|
|
1317
|
-
var breakpoints$1 = {
|
|
1318
|
-
xs: tokensJson.base.breakpoint.xs,
|
|
1319
|
-
sm: tokensJson.base.breakpoint.sm,
|
|
1320
|
-
md: tokensJson.base.breakpoint.md,
|
|
1321
|
-
lg: tokensJson.base.breakpoint.lg,
|
|
1322
|
-
xl: tokensJson.base.breakpoint.xl,
|
|
1323
|
-
'2xl': tokensJson.base.breakpoint['2xl']
|
|
1324
|
-
};
|
|
1325
|
-
// Media query helpers
|
|
1326
|
-
var media$1 = {
|
|
1327
|
-
xs: "@media (min-width: ".concat(breakpoints$1.xs, ")"),
|
|
1328
|
-
sm: "@media (min-width: ".concat(breakpoints$1.sm, ")"),
|
|
1329
|
-
md: "@media (min-width: ".concat(breakpoints$1.md, ")"),
|
|
1330
|
-
lg: "@media (min-width: ".concat(breakpoints$1.lg, ")"),
|
|
1331
|
-
xl: "@media (min-width: ".concat(breakpoints$1.xl, ")"),
|
|
1332
|
-
'2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
|
|
1333
|
-
};
|
|
1334
|
-
|
|
1335
1361
|
var spacing$6 = tokensJson.semantic.spacing;
|
|
1336
1362
|
var StyledContainer$2 = styled.div.withConfig({
|
|
1337
1363
|
displayName: "Container__StyledContainer",
|
|
1338
1364
|
componentId: "sc-17dbj6n-0"
|
|
1339
|
-
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: ", ";\n padding-right: ", ";\n \n ", " {\n max-width:
|
|
1365
|
+
})(templateObject_1$C || (templateObject_1$C = __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$6.layout['2xl'], spacing$6.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']);
|
|
1340
1366
|
var Container$1 = function Container(_a) {
|
|
1341
1367
|
var children = _a.children,
|
|
1342
1368
|
props = __rest(_a, ["children"]);
|
|
@@ -1346,7 +1372,6 @@ var Container$1 = function Container(_a) {
|
|
|
1346
1372
|
};
|
|
1347
1373
|
var templateObject_1$C;
|
|
1348
1374
|
|
|
1349
|
-
var base$b = tokensJson.base;
|
|
1350
1375
|
var PictureWrapper = styled.div.withConfig({
|
|
1351
1376
|
displayName: "Picture__PictureWrapper",
|
|
1352
1377
|
componentId: "sc-11d9tei-0"
|
|
@@ -1354,15 +1379,15 @@ var PictureWrapper = styled.div.withConfig({
|
|
|
1354
1379
|
var ImageLink = styled.a.withConfig({
|
|
1355
1380
|
displayName: "Picture__ImageLink",
|
|
1356
1381
|
componentId: "sc-11d9tei-1"
|
|
1357
|
-
})(templateObject_2$q || (templateObject_2$q = __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"])),
|
|
1382
|
+
})(templateObject_2$q || (templateObject_2$q = __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"])), tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut);
|
|
1358
1383
|
var ImageButton = styled.button.withConfig({
|
|
1359
1384
|
displayName: "Picture__ImageButton",
|
|
1360
1385
|
componentId: "sc-11d9tei-2"
|
|
1361
|
-
})(templateObject_3$o || (templateObject_3$o = __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"])),
|
|
1386
|
+
})(templateObject_3$o || (templateObject_3$o = __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"])), tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut);
|
|
1362
1387
|
var StyledImage = styled.img.withConfig({
|
|
1363
1388
|
displayName: "Picture__StyledImage",
|
|
1364
1389
|
componentId: "sc-11d9tei-3"
|
|
1365
|
-
})(templateObject_4$k || (templateObject_4$k = __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"])),
|
|
1390
|
+
})(templateObject_4$k || (templateObject_4$k = __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"])), tokensJson.semantic.border.radius.sm);
|
|
1366
1391
|
var Picture = function Picture(_a) {
|
|
1367
1392
|
var title = _a.title,
|
|
1368
1393
|
src = _a.src,
|
|
@@ -1394,16 +1419,16 @@ var Picture = function Picture(_a) {
|
|
|
1394
1419
|
};
|
|
1395
1420
|
var templateObject_1$B, templateObject_2$q, templateObject_3$o, templateObject_4$k;
|
|
1396
1421
|
|
|
1397
|
-
var _a$
|
|
1398
|
-
typography
|
|
1399
|
-
color$6 = _a$
|
|
1422
|
+
var _a$9 = tokensJson.semantic,
|
|
1423
|
+
typography = _a$9.typography,
|
|
1424
|
+
color$6 = _a$9.color;
|
|
1400
1425
|
var TimeStyled = styled.time.withConfig({
|
|
1401
1426
|
displayName: "DateFormatter__TimeStyled",
|
|
1402
1427
|
componentId: "sc-5464cc-0"
|
|
1403
1428
|
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
1404
1429
|
/**
|
|
1405
1430
|
* Formats a date with smart relative/absolute logic
|
|
1406
|
-
*/])), typography
|
|
1431
|
+
*/])), typography.label, color$6.text.subdued);
|
|
1407
1432
|
/**
|
|
1408
1433
|
* Formats a date with smart relative/absolute logic
|
|
1409
1434
|
*/
|
|
@@ -1451,17 +1476,17 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
1451
1476
|
};
|
|
1452
1477
|
var templateObject_1$A;
|
|
1453
1478
|
|
|
1454
|
-
var motion$
|
|
1455
|
-
_a$
|
|
1456
|
-
iconButton = _a$
|
|
1457
|
-
button = _a$
|
|
1479
|
+
var motion$5 = tokensJson.semantic.motion,
|
|
1480
|
+
_a$8 = tokensJson.component,
|
|
1481
|
+
iconButton = _a$8.iconButton,
|
|
1482
|
+
button = _a$8.button;
|
|
1458
1483
|
var IconButtonStyled = styled.button.withConfig({
|
|
1459
1484
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1460
1485
|
return !prop.startsWith('$');
|
|
1461
1486
|
},
|
|
1462
1487
|
displayName: "IconButton__IconButtonStyled",
|
|
1463
1488
|
componentId: "sc-k8b14t-0"
|
|
1464
|
-
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border: none;\n border-radius: ", ";\n transition: ", ";\n box-sizing: border-box;\n display: ", ";\n justify-content: ", ";\n align-items: ", ";\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 /* High contrast mode support */\n @media (prefers-contrast: high) {\n border:
|
|
1489
|
+
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border: none;\n border-radius: ", ";\n transition: ", ";\n box-sizing: border-box;\n display: ", ";\n justify-content: ", ";\n align-items: ", ";\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 /* High contrast mode support */\n @media (prefers-contrast: high) {\n border: ", " solid;\n }\n\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n"], ["\n background-color: ", ";\n color: ", ";\n border: none;\n border-radius: ", ";\n transition: ", ";\n box-sizing: border-box;\n display: ", ";\n justify-content: ", ";\n align-items: ", ";\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 /* High contrast mode support */\n @media (prefers-contrast: high) {\n border: ", " solid;\n }\n\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n"])), function (_a) {
|
|
1465
1490
|
var $variant = _a.$variant;
|
|
1466
1491
|
switch ($variant) {
|
|
1467
1492
|
case 'primary':
|
|
@@ -1485,7 +1510,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
1485
1510
|
default:
|
|
1486
1511
|
return button.primary.textColor;
|
|
1487
1512
|
}
|
|
1488
|
-
}, iconButton.primary.borderRadius, motion$
|
|
1513
|
+
}, iconButton.primary.borderRadius, motion$5.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
|
|
1489
1514
|
var $size = _a.$size;
|
|
1490
1515
|
return iconButton.sizes[$size].minWidth;
|
|
1491
1516
|
}, function (_a) {
|
|
@@ -1518,7 +1543,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
1518
1543
|
default:
|
|
1519
1544
|
return button.disabled.textColor;
|
|
1520
1545
|
}
|
|
1521
|
-
});
|
|
1546
|
+
}, tokensJson.semantic.border.width.thin);
|
|
1522
1547
|
var IconButton = function IconButton(_a) {
|
|
1523
1548
|
var variant = _a.variant,
|
|
1524
1549
|
_b = _a.size,
|
|
@@ -1584,7 +1609,7 @@ var StyledWrapper = styled.span.withConfig({
|
|
|
1584
1609
|
return $align;
|
|
1585
1610
|
}, function (_a) {
|
|
1586
1611
|
var $weight = _a.$weight;
|
|
1587
|
-
return $weight
|
|
1612
|
+
return tokensJson.semantic.fontWeight[$weight];
|
|
1588
1613
|
});
|
|
1589
1614
|
// Map size to Typography variant
|
|
1590
1615
|
var sizeToTypographyVariant = {
|
|
@@ -1683,14 +1708,14 @@ var MoneyDisplay = function MoneyDisplay(_a) {
|
|
|
1683
1708
|
var templateObject_1$y;
|
|
1684
1709
|
|
|
1685
1710
|
// Destructure tokens
|
|
1686
|
-
var semantic$
|
|
1687
|
-
var _a$
|
|
1711
|
+
var semantic$c = tokensJson.semantic;
|
|
1712
|
+
var _a$7 = __assign(__assign({}, semantic$c), {
|
|
1688
1713
|
component: tokensJson.component
|
|
1689
1714
|
}),
|
|
1690
|
-
color$5 = _a$
|
|
1691
|
-
border$7 = _a$
|
|
1692
|
-
motion$
|
|
1693
|
-
component$2 = _a$
|
|
1715
|
+
color$5 = _a$7.color,
|
|
1716
|
+
border$7 = _a$7.border,
|
|
1717
|
+
motion$4 = _a$7.motion,
|
|
1718
|
+
component$2 = _a$7.component;
|
|
1694
1719
|
var radius$2 = border$7.radius;
|
|
1695
1720
|
var ProgressBarContainer = styled.div.withConfig({
|
|
1696
1721
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1709,7 +1734,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
1709
1734
|
},
|
|
1710
1735
|
displayName: "ProgressBar__ProgressBarFill",
|
|
1711
1736
|
componentId: "sc-1nco33q-1"
|
|
1712
|
-
})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), motion$
|
|
1737
|
+
})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n height: 100%;\n transition: ", ";\n\n ", " {\n transition: none;\n }\n\n ", "\n\n ", "\n\n ", "\n"], ["\n height: 100%;\n transition: ", ";\n\n ", " {\n transition: none;\n }\n\n ", "\n\n ", "\n\n ", "\n"])), motion$4.transition.normal, reducedMotion, function (props) {
|
|
1713
1738
|
var backgroundColor;
|
|
1714
1739
|
switch (props.$color) {
|
|
1715
1740
|
case 'success':
|
|
@@ -1725,7 +1750,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
1725
1750
|
}
|
|
1726
1751
|
return css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
1727
1752
|
}, function (props) {
|
|
1728
|
-
return props.$variant === 'horizontal' && css(templateObject_5$
|
|
1753
|
+
return props.$variant === 'horizontal' && css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
1729
1754
|
}, function (props) {
|
|
1730
1755
|
return props.$variant === 'vertical' && css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
1731
1756
|
});
|
|
@@ -1737,13 +1762,20 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
1737
1762
|
color = _c === void 0 ? 'default' : _c,
|
|
1738
1763
|
height = _a.height,
|
|
1739
1764
|
width = _a.width,
|
|
1765
|
+
ariaLabel = _a["aria-label"],
|
|
1766
|
+
ariaLabelledBy = _a["aria-labelledby"],
|
|
1740
1767
|
dataTestId = _a["data-testid"];
|
|
1768
|
+
// Blank values are no name at all, so they fall back like missing ones
|
|
1769
|
+
var label = (ariaLabel === null || ariaLabel === void 0 ? void 0 : ariaLabel.trim()) ? ariaLabel : undefined;
|
|
1770
|
+
var labelledBy = (ariaLabelledBy === null || ariaLabelledBy === void 0 ? void 0 : ariaLabelledBy.trim()) ? ariaLabelledBy : undefined;
|
|
1741
1771
|
return jsx(ProgressBarContainer, {
|
|
1742
1772
|
"$variant": variant,
|
|
1743
1773
|
"$height": height,
|
|
1744
1774
|
"$width": width,
|
|
1745
1775
|
"data-testid": dataTestId,
|
|
1746
1776
|
role: "progressbar",
|
|
1777
|
+
"aria-label": label !== null && label !== void 0 ? label : labelledBy ? undefined : 'Progress',
|
|
1778
|
+
"aria-labelledby": labelledBy,
|
|
1747
1779
|
"aria-valuenow": Math.min(100, Math.max(0, value)),
|
|
1748
1780
|
"aria-valuemin": 0,
|
|
1749
1781
|
"aria-valuemax": 100,
|
|
@@ -1754,7 +1786,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
1754
1786
|
})
|
|
1755
1787
|
});
|
|
1756
1788
|
};
|
|
1757
|
-
var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$
|
|
1789
|
+
var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$g, templateObject_6$c, templateObject_7$a;
|
|
1758
1790
|
|
|
1759
1791
|
// Destructure tokens for cleaner access
|
|
1760
1792
|
var separatorTokens = tokensJson.component.separator;
|
|
@@ -1787,9 +1819,9 @@ var StyledDivider = styled.div.withConfig({
|
|
|
1787
1819
|
var _b = _a.$orientation,
|
|
1788
1820
|
$orientation = _b === void 0 ? 'horizontal' : _b;
|
|
1789
1821
|
if ($orientation === 'vertical') {
|
|
1790
|
-
return "\n display: inline-block;\n height: auto;\n align-self: stretch;\n border-left:
|
|
1822
|
+
return "\n display: inline-block;\n height: auto;\n align-self: stretch;\n border-left: ".concat(tokensJson.semantic.border.width.thin, " solid;\n border-top: none;\n ");
|
|
1791
1823
|
}
|
|
1792
|
-
return "border-top:
|
|
1824
|
+
return "border-top: ".concat(tokensJson.semantic.border.width.thin, " solid;");
|
|
1793
1825
|
}, function (_a) {
|
|
1794
1826
|
var _b = _a.$variant,
|
|
1795
1827
|
$variant = _b === void 0 ? 'default' : _b,
|
|
@@ -1931,8 +1963,11 @@ var templateObject_1$v;
|
|
|
1931
1963
|
var statusColors = tokensJson.semantic.color.status;
|
|
1932
1964
|
var spacing$5 = tokensJson.semantic.spacing.layout;
|
|
1933
1965
|
var radius$1 = tokensJson.semantic.border.radius;
|
|
1934
|
-
var
|
|
1935
|
-
|
|
1966
|
+
var _a$6 = tokensJson.semantic.motion,
|
|
1967
|
+
transition = _a$6.transition,
|
|
1968
|
+
duration$3 = _a$6.duration,
|
|
1969
|
+
easing$3 = _a$6.easing;
|
|
1970
|
+
var label$1 = tokensJson.component.badge.label;
|
|
1936
1971
|
var scaleIn$1 = keyframes(templateObject_1$u || (templateObject_1$u = __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"])));
|
|
1937
1972
|
var getStatusConfig = function getStatusConfig(status) {
|
|
1938
1973
|
var configs = {
|
|
@@ -1982,14 +2017,14 @@ var sizeConfig = {
|
|
|
1982
2017
|
small: {
|
|
1983
2018
|
height: '20px',
|
|
1984
2019
|
padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
|
|
1985
|
-
font:
|
|
2020
|
+
font: label$1.typography.small,
|
|
1986
2021
|
gap: spacing$5.xs,
|
|
1987
2022
|
iconSize: 'xs'
|
|
1988
2023
|
},
|
|
1989
2024
|
medium: {
|
|
1990
2025
|
height: '24px',
|
|
1991
2026
|
padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
|
|
1992
|
-
font:
|
|
2027
|
+
font: label$1.typography.medium,
|
|
1993
2028
|
gap: spacing$5.xs,
|
|
1994
2029
|
iconSize: 'sm'
|
|
1995
2030
|
}
|
|
@@ -2000,10 +2035,10 @@ var StyledStatusBadge = styled.span.withConfig({
|
|
|
2000
2035
|
},
|
|
2001
2036
|
displayName: "StatusBadge__StyledStatusBadge",
|
|
2002
2037
|
componentId: "sc-1paksgb-0"
|
|
2003
|
-
})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n
|
|
2038
|
+
})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\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 badge's dimensions */\n ", " {\n animation: none;\n transition: none;\n }\n \n /* Size styles */\n ", "\n \n /* Status color styles */\n ", "\n"], ["\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 badge'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) {
|
|
2004
2039
|
var $size = _a.$size;
|
|
2005
2040
|
var size = sizeConfig[$size];
|
|
2006
|
-
return "\n height: ".concat(size.height, ";\n padding: ").concat(size.padding, ";\n font: ").concat(size.font, ";\n gap: ").concat(size.gap, ";\n ");
|
|
2041
|
+
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 ");
|
|
2007
2042
|
}, function (_a) {
|
|
2008
2043
|
var $status = _a.$status;
|
|
2009
2044
|
var config = getStatusConfig($status);
|
|
@@ -2012,7 +2047,7 @@ var StyledStatusBadge = styled.span.withConfig({
|
|
|
2012
2047
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
2013
2048
|
displayName: "StatusBadge__ScreenReaderOnly",
|
|
2014
2049
|
componentId: "sc-1paksgb-1"
|
|
2015
|
-
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n
|
|
2050
|
+
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
2016
2051
|
/**
|
|
2017
2052
|
* StatusBadge component for displaying transaction or task status
|
|
2018
2053
|
*
|
|
@@ -2035,7 +2070,7 @@ var ScreenReaderOnly = styled.span.withConfig({
|
|
|
2035
2070
|
* liveRegion={true}
|
|
2036
2071
|
* />
|
|
2037
2072
|
* ```
|
|
2038
|
-
*/])));
|
|
2073
|
+
*/])), visuallyHidden);
|
|
2039
2074
|
/**
|
|
2040
2075
|
* StatusBadge component for displaying transaction or task status
|
|
2041
2076
|
*
|
|
@@ -2094,12 +2129,12 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
2094
2129
|
StatusBadge.displayName = 'StatusBadge';
|
|
2095
2130
|
var templateObject_1$u, templateObject_2$o, templateObject_3$m;
|
|
2096
2131
|
|
|
2097
|
-
var semantic$
|
|
2098
|
-
var color$4 = semantic$
|
|
2099
|
-
spacing$4 = semantic$
|
|
2100
|
-
border$6 = semantic$
|
|
2101
|
-
|
|
2102
|
-
|
|
2132
|
+
var semantic$b = tokensJson.semantic;
|
|
2133
|
+
var color$4 = semantic$b.color,
|
|
2134
|
+
spacing$4 = semantic$b.spacing,
|
|
2135
|
+
border$6 = semantic$b.border,
|
|
2136
|
+
size = semantic$b.size;
|
|
2137
|
+
var label = tokensJson.component.badge.label;
|
|
2103
2138
|
var layout$3 = spacing$4.layout;
|
|
2104
2139
|
var radius = border$6.radius;
|
|
2105
2140
|
var StyledTag = styled.span.withConfig({
|
|
@@ -2108,13 +2143,13 @@ var StyledTag = styled.span.withConfig({
|
|
|
2108
2143
|
},
|
|
2109
2144
|
displayName: "Tag__StyledTag",
|
|
2110
2145
|
componentId: "sc-lzfmti-0"
|
|
2111
|
-
})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n user-select: none;\n white-space: nowrap;\n max-height: ", ";\n \n /* Size - fixed to small */\n padding: ", " ", ";\n font: ", ";\n \n /* Variant styles */\n background-color: ", ";\n \n color: ", ";\n \n border: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n user-select: none;\n white-space: nowrap;\n max-height: ", ";\n \n /* Size - fixed to small */\n padding: ", " ", ";\n font: ", ";\n \n /* Variant styles */\n background-color: ", ";\n \n color: ", ";\n \n border: ", ";\n"
|
|
2146
|
+
})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n user-select: none;\n white-space: nowrap;\n max-height: ", ";\n \n /* Size - fixed to small */\n padding: ", " ", ";\n font: ", ";\n font-weight: ", ";\n \n /* Variant styles */\n background-color: ", ";\n \n color: ", ";\n \n border: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n user-select: none;\n white-space: nowrap;\n max-height: ", ";\n \n /* Size - fixed to small */\n padding: ", " ", ";\n font: ", ";\n font-weight: ", ";\n \n /* Variant styles */\n background-color: ", ";\n \n color: ", ";\n \n border: ", ";\n"
|
|
2112
2147
|
/**
|
|
2113
2148
|
* Tag component for categorizing and labeling content
|
|
2114
2149
|
*
|
|
2115
2150
|
* A static, non-interactive label used to categorize elements or objects in the UI.
|
|
2116
2151
|
* Tags help users quickly identify and understand content classification.
|
|
2117
|
-
*/])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, typography
|
|
2152
|
+
*/])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, label.typography.small, label.fontWeight, function (_a) {
|
|
2118
2153
|
var $variant = _a.$variant;
|
|
2119
2154
|
switch ($variant) {
|
|
2120
2155
|
case 'interactive':
|
|
@@ -2152,17 +2187,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2152
2187
|
if (!$border) return 'none';
|
|
2153
2188
|
switch ($variant) {
|
|
2154
2189
|
case 'interactive':
|
|
2155
|
-
return "
|
|
2190
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.interactive);
|
|
2156
2191
|
case 'success':
|
|
2157
|
-
return "
|
|
2192
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.success);
|
|
2158
2193
|
case 'warning':
|
|
2159
|
-
return "
|
|
2194
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.warning);
|
|
2160
2195
|
case 'error':
|
|
2161
|
-
return "
|
|
2196
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.error);
|
|
2162
2197
|
case 'emphasis':
|
|
2163
|
-
return "
|
|
2198
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.background.emphasis);
|
|
2164
2199
|
default:
|
|
2165
|
-
return "
|
|
2200
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border["default"]);
|
|
2166
2201
|
}
|
|
2167
2202
|
});
|
|
2168
2203
|
/**
|
|
@@ -2194,8 +2229,8 @@ var Tag = function Tag(_a) {
|
|
|
2194
2229
|
var templateObject_1$t;
|
|
2195
2230
|
|
|
2196
2231
|
// Destructure tokens for cleaner access
|
|
2197
|
-
var semantic$
|
|
2198
|
-
var spacing$3 = semantic$
|
|
2232
|
+
var semantic$a = tokensJson.semantic;
|
|
2233
|
+
var spacing$3 = semantic$a.spacing;
|
|
2199
2234
|
var layout$2 = spacing$3.layout;
|
|
2200
2235
|
var StyledBalanceSection = styled.div.withConfig({
|
|
2201
2236
|
displayName: "AccountCard__StyledBalanceSection",
|
|
@@ -2216,9 +2251,9 @@ var StyledStackWrapper = styled.div.withConfig({
|
|
|
2216
2251
|
var StyledHeaderWrapper = styled.div.withConfig({
|
|
2217
2252
|
displayName: "AccountCard__StyledHeaderWrapper",
|
|
2218
2253
|
componentId: "sc-1erp7zn-4"
|
|
2219
|
-
})(templateObject_5$
|
|
2254
|
+
})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n min-height: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: ", ";\n\n & > span {\n margin-top: -", ";\n }\n"], ["\n min-height: ", ";\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: ", ";\n\n & > span {\n margin-top: -", ";\n }\n"
|
|
2220
2255
|
// Map trend direction to icon and color
|
|
2221
|
-
])), layout$2.none, layout$2.xs);
|
|
2256
|
+
])), tokensJson.component.accountCard.header.minHeight, layout$2.none, layout$2.xs);
|
|
2222
2257
|
// Map trend direction to icon and color
|
|
2223
2258
|
var trendToIcon = {
|
|
2224
2259
|
up: 'arrowUp',
|
|
@@ -2267,15 +2302,14 @@ var AccountCard = function AccountCard(_a) {
|
|
|
2267
2302
|
}
|
|
2268
2303
|
};
|
|
2269
2304
|
return jsx(Box, {
|
|
2270
|
-
minWidth:
|
|
2305
|
+
minWidth: tokensJson.component.accountCard.minWidth,
|
|
2271
2306
|
p: "lg",
|
|
2272
2307
|
bg: "subtle",
|
|
2273
2308
|
border: "default",
|
|
2274
2309
|
borderRadius: "xl",
|
|
2275
|
-
transition: "
|
|
2310
|
+
transition: "box-shadow ".concat(semantic$a.motion.duration.normal, " ").concat(semantic$a.motion.easing.easeOut),
|
|
2276
2311
|
cursor: isClickable ? 'pointer' : 'default',
|
|
2277
2312
|
hoverShadow: isClickable ? 'floating' : undefined,
|
|
2278
|
-
hoverTransform: isClickable ? 'translateY(-2px)' : undefined,
|
|
2279
2313
|
onClick: handleClick,
|
|
2280
2314
|
onKeyDown: handleKeyDown,
|
|
2281
2315
|
tabIndex: isClickable ? 0 : undefined,
|
|
@@ -2368,26 +2402,28 @@ var AccountCard = function AccountCard(_a) {
|
|
|
2368
2402
|
})
|
|
2369
2403
|
});
|
|
2370
2404
|
};
|
|
2371
|
-
var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$
|
|
2405
|
+
var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$f;
|
|
2372
2406
|
|
|
2373
|
-
var semantic$
|
|
2374
|
-
|
|
2407
|
+
var semantic$9 = tokensJson.semantic;
|
|
2408
|
+
var _a$5 = semantic$9.motion,
|
|
2409
|
+
duration$2 = _a$5.duration,
|
|
2410
|
+
easing$2 = _a$5.easing;
|
|
2375
2411
|
var StyledListItem = styled.li.withConfig({
|
|
2376
2412
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2377
2413
|
return !prop.startsWith('$');
|
|
2378
2414
|
},
|
|
2379
2415
|
displayName: "ListItem__StyledListItem",
|
|
2380
2416
|
componentId: "sc-1wzzt21-0"
|
|
2381
|
-
})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height:
|
|
2417
|
+
})(templateObject_1$r || (templateObject_1$r = __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$9.size.touchTarget, function (_a) {
|
|
2382
2418
|
var $interactive = _a.$interactive;
|
|
2383
2419
|
return $interactive && 'user-select: none;';
|
|
2384
2420
|
}, function (_a) {
|
|
2385
2421
|
var $disabled = _a.$disabled;
|
|
2386
|
-
return $disabled && "\n opacity: ".concat(
|
|
2422
|
+
return $disabled && "\n opacity: ".concat(semantic$9.opacity.disabled, ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
2387
2423
|
}, function (_a) {
|
|
2388
2424
|
var $destructive = _a.$destructive,
|
|
2389
2425
|
$disabled = _a.$disabled;
|
|
2390
|
-
return $destructive && !$disabled && "\n color: ".concat(semantic$
|
|
2426
|
+
return $destructive && !$disabled && "\n color: ".concat(semantic$9.color.text.error, ";\n ");
|
|
2391
2427
|
});
|
|
2392
2428
|
var StyledItemContent = styled.div.withConfig({
|
|
2393
2429
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2395,13 +2431,13 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
2395
2431
|
},
|
|
2396
2432
|
displayName: "ListItem__StyledItemContent",
|
|
2397
2433
|
componentId: "sc-1wzzt21-1"
|
|
2398
|
-
})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color
|
|
2434
|
+
})(templateObject_2$m || (templateObject_2$m = __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$9.spacing.layout.md, function (_a) {
|
|
2399
2435
|
var $spacing = _a.$spacing;
|
|
2400
|
-
return $spacing === 'compact' ? "".concat(semantic$
|
|
2401
|
-
},
|
|
2436
|
+
return $spacing === 'compact' ? "".concat(semantic$9.spacing.layout.sm, " ").concat(semantic$9.spacing.layout.md) : "".concat(semantic$9.spacing.layout.md, " ").concat(semantic$9.spacing.layout.lg);
|
|
2437
|
+
}, semantic$9.border.radius.sm, function (_a) {
|
|
2402
2438
|
var $selected = _a.$selected;
|
|
2403
|
-
return $selected ? semantic$
|
|
2404
|
-
}, function (_a) {
|
|
2439
|
+
return $selected ? semantic$9.color.background['interactive-subtle'] : 'transparent';
|
|
2440
|
+
}, duration$2.fast, easing$2.easeOut, function (_a) {
|
|
2405
2441
|
var $interactive = _a.$interactive,
|
|
2406
2442
|
$disabled = _a.$disabled;
|
|
2407
2443
|
if ($disabled) return 'not-allowed';
|
|
@@ -2412,45 +2448,48 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
2412
2448
|
$disabled = _a.$disabled,
|
|
2413
2449
|
$selected = _a.$selected;
|
|
2414
2450
|
return !$disabled && $interactive && "\n &:hover {\n background-color: ".concat($selected ? tokensJson.component.button.variants.secondary.backgroundColor : tokensJson.component.button.variants.secondary.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat(tokensJson.component.button.variants.naked.backgroundColor, ";\n }\n ");
|
|
2415
|
-
}, semantic$
|
|
2451
|
+
}, semantic$9.border.width.thick, semantic$9.color.border.interactive, semantic$9.border.focusOffset);
|
|
2416
2452
|
var StyledIconContainer$1 = styled.div.withConfig({
|
|
2417
2453
|
displayName: "ListItem__StyledIconContainer",
|
|
2418
2454
|
componentId: "sc-1wzzt21-2"
|
|
2419
|
-
})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width:
|
|
2455
|
+
})(templateObject_3$k || (templateObject_3$k = __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$9.size.icon.lg, semantic$9.size.icon.lg);
|
|
2420
2456
|
var StyledTextContent = styled.div.withConfig({
|
|
2421
2457
|
displayName: "ListItem__StyledTextContent",
|
|
2422
2458
|
componentId: "sc-1wzzt21-3"
|
|
2423
|
-
})(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$
|
|
2459
|
+
})(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$9.spacing.layout.xs);
|
|
2424
2460
|
var StyledRightContent = styled.div.withConfig({
|
|
2425
2461
|
displayName: "ListItem__StyledRightContent",
|
|
2426
2462
|
componentId: "sc-1wzzt21-4"
|
|
2427
|
-
})(templateObject_5$
|
|
2463
|
+
})(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$9.spacing.layout.sm);
|
|
2428
2464
|
var StyledChevronIcon = styled.div.withConfig({
|
|
2429
2465
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2430
2466
|
return !prop.startsWith('$');
|
|
2431
2467
|
},
|
|
2432
2468
|
displayName: "ListItem__StyledChevronIcon",
|
|
2433
2469
|
componentId: "sc-1wzzt21-5"
|
|
2434
|
-
})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width:
|
|
2470
|
+
})(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$9.size.icon.lg, semantic$9.size.icon.lg, semantic$9.color.icon.subdued, duration$2.fast, easing$2.easeOut, function (_a) {
|
|
2435
2471
|
var $expanded = _a.$expanded;
|
|
2436
2472
|
return $expanded ? '180deg' : '0deg';
|
|
2437
|
-
});
|
|
2473
|
+
}, reducedMotion);
|
|
2438
2474
|
var StyledExpandedContent = styled.div.withConfig({
|
|
2439
2475
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2440
2476
|
return !prop.startsWith('$');
|
|
2441
2477
|
},
|
|
2442
2478
|
displayName: "ListItem__StyledExpandedContent",
|
|
2443
2479
|
componentId: "sc-1wzzt21-6"
|
|
2444
|
-
})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n overflow: hidden;\n transition: max-height
|
|
2480
|
+
})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n overflow: hidden;\n /* Padding collapses with the height, and visibility hides the content from\n keyboard and screen readers once the collapse finishes. */\n transition: max-height ", " ", ",\n padding ", " ", ",\n opacity ", " ", ",\n visibility ", " ", ";\n max-height: ", ";\n opacity: ", ";\n visibility: ", ";\n\n ", " {\n transition: opacity ", " ", ",\n visibility ", " ", ";\n }\n \n ", "\n"], ["\n overflow: hidden;\n /* Padding collapses with the height, and visibility hides the content from\n keyboard and screen readers once the collapse finishes. */\n transition: max-height ", " ", ",\n padding ", " ", ",\n opacity ", " ", ",\n visibility ", " ", ";\n max-height: ", ";\n opacity: ", ";\n visibility: ", ";\n\n ", " {\n transition: opacity ", " ", ",\n visibility ", " ", ";\n }\n \n ", "\n"])), duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, function (_a) {
|
|
2445
2481
|
var $expanded = _a.$expanded;
|
|
2446
2482
|
return $expanded ? '1000px' : '0';
|
|
2447
2483
|
}, function (_a) {
|
|
2448
2484
|
var $expanded = _a.$expanded;
|
|
2449
2485
|
return $expanded ? '1' : '0';
|
|
2450
2486
|
}, function (_a) {
|
|
2487
|
+
var $expanded = _a.$expanded;
|
|
2488
|
+
return $expanded ? 'visible' : 'hidden';
|
|
2489
|
+
}, reducedMotion, duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, function (_a) {
|
|
2451
2490
|
var $expanded = _a.$expanded,
|
|
2452
2491
|
$spacing = _a.$spacing;
|
|
2453
|
-
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$
|
|
2492
|
+
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$9.spacing.layout.sm, " ").concat(semantic$9.spacing.layout.md, " ").concat(semantic$9.spacing.layout.sm, " ").concat(tokensJson.component.listItem.expandedIndent.compact) : "".concat(semantic$9.spacing.layout.sm, " ").concat(semantic$9.spacing.layout.lg, " ").concat(semantic$9.spacing.layout.md, " ").concat(tokensJson.component.listItem.expandedIndent.comfortable), ";\n background-color: ").concat(semantic$9.color.background['subtle'], ";\n border-radius: ").concat(semantic$9.border.radius.sm, ";\n margin: 0 ").concat($spacing === 'compact' ? semantic$9.spacing.layout.md : semantic$9.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md, ";\n ");
|
|
2454
2493
|
});
|
|
2455
2494
|
var ListItem = function ListItem(_a) {
|
|
2456
2495
|
var primary = _a.primary,
|
|
@@ -2563,28 +2602,80 @@ var ListItem = function ListItem(_a) {
|
|
|
2563
2602
|
}));
|
|
2564
2603
|
};
|
|
2565
2604
|
ListItem.displayName = 'ListItem';
|
|
2566
|
-
var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$
|
|
2605
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$e, templateObject_6$b, templateObject_7$9;
|
|
2606
|
+
|
|
2607
|
+
// How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils.
|
|
2608
|
+
var EXIT_DURATION_MS = parseInt(tokensJson.semantic.motion.duration.fast, 10);
|
|
2609
|
+
/**
|
|
2610
|
+
* Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit
|
|
2611
|
+
* animation can run before it unmounts (decision 0005).
|
|
2612
|
+
*/
|
|
2613
|
+
function usePresence(isOpen, exitMs) {
|
|
2614
|
+
if (exitMs === void 0) {
|
|
2615
|
+
exitMs = EXIT_DURATION_MS;
|
|
2616
|
+
}
|
|
2617
|
+
var _a = useState(isOpen),
|
|
2618
|
+
isMounted = _a[0],
|
|
2619
|
+
setIsMounted = _a[1];
|
|
2620
|
+
useEffect(function () {
|
|
2621
|
+
if (isOpen) {
|
|
2622
|
+
setIsMounted(true);
|
|
2623
|
+
return;
|
|
2624
|
+
}
|
|
2625
|
+
var timer = setTimeout(function () {
|
|
2626
|
+
return setIsMounted(false);
|
|
2627
|
+
}, exitMs);
|
|
2628
|
+
return function () {
|
|
2629
|
+
return clearTimeout(timer);
|
|
2630
|
+
};
|
|
2631
|
+
}, [isOpen, exitMs]);
|
|
2632
|
+
return {
|
|
2633
|
+
isPresent: isOpen || isMounted,
|
|
2634
|
+
isExiting: !isOpen && isMounted
|
|
2635
|
+
};
|
|
2636
|
+
}
|
|
2637
|
+
/**
|
|
2638
|
+
* Makes an element inert while `isInert` is true, so an exiting overlay's controls leave
|
|
2639
|
+
* the tab order and can't be activated. Set through the DOM because React 18 has no
|
|
2640
|
+
* `inert` prop.
|
|
2641
|
+
*/
|
|
2642
|
+
function useInert(ref, isInert) {
|
|
2643
|
+
useEffect(function () {
|
|
2644
|
+
var node = ref.current;
|
|
2645
|
+
if (!node) return;
|
|
2646
|
+
if (isInert) node.setAttribute('inert', '');else node.removeAttribute('inert');
|
|
2647
|
+
}, [ref, isInert]);
|
|
2648
|
+
}
|
|
2567
2649
|
|
|
2568
2650
|
var _a$4 = tokensJson.semantic,
|
|
2569
2651
|
color$3 = _a$4.color,
|
|
2570
2652
|
border$5 = _a$4.border,
|
|
2571
2653
|
layout$1 = _a$4.spacing.layout,
|
|
2572
|
-
motion = _a$4.motion,
|
|
2573
|
-
elevation$
|
|
2654
|
+
motion$3 = _a$4.motion,
|
|
2655
|
+
elevation$2 = _a$4.elevation;
|
|
2574
2656
|
var slideUp = keyframes(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
2575
2657
|
var fadeIn$2 = keyframes(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
2576
2658
|
var StyledOverlay$2 = styled.div.withConfig({
|
|
2577
2659
|
displayName: "ActionSheet__StyledOverlay",
|
|
2578
2660
|
componentId: "sc-regbol-0"
|
|
2579
|
-
})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color:
|
|
2661
|
+
})(templateObject_3$j || (templateObject_3$j = __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$3.background.overlay, tokensJson.semantic.zIndex.modal, fadeIn$2, motion$3.duration.normal, motion$3.easing.easeOut, function (_a) {
|
|
2662
|
+
var $isExiting = _a.$isExiting;
|
|
2663
|
+
return $isExiting && exitAnimation;
|
|
2664
|
+
});
|
|
2580
2665
|
var StyledActionSheet = styled.div.withConfig({
|
|
2581
2666
|
displayName: "ActionSheet__StyledActionSheet",
|
|
2582
2667
|
componentId: "sc-regbol-1"
|
|
2583
|
-
})(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:
|
|
2668
|
+
})(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$3.background.subtle, border$5.radius.lg, border$5.radius.lg, elevation$2.overlay, tokensJson.semantic.zIndex.modal, slideUp, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
|
|
2669
|
+
var $isExiting = _a.$isExiting;
|
|
2670
|
+
return $isExiting && exitAnimation;
|
|
2671
|
+
}, reducedMotion, fadeIn$2, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
|
|
2672
|
+
var $isExiting = _a.$isExiting;
|
|
2673
|
+
return $isExiting && exitAnimation;
|
|
2674
|
+
});
|
|
2584
2675
|
var StyledHeader$2 = styled.div.withConfig({
|
|
2585
2676
|
displayName: "ActionSheet__StyledHeader",
|
|
2586
2677
|
componentId: "sc-regbol-2"
|
|
2587
|
-
})(templateObject_5$
|
|
2678
|
+
})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", ";\n"])), layout$1.lg, layout$1.lg, layout$1.md, border$5["default"]);
|
|
2588
2679
|
var StyledHeaderContent = styled.div.withConfig({
|
|
2589
2680
|
displayName: "ActionSheet__StyledHeaderContent",
|
|
2590
2681
|
componentId: "sc-regbol-3"
|
|
@@ -2592,11 +2683,11 @@ var StyledHeaderContent = styled.div.withConfig({
|
|
|
2592
2683
|
var StyledCloseButton = styled.button.withConfig({
|
|
2593
2684
|
displayName: "ActionSheet__StyledCloseButton",
|
|
2594
2685
|
componentId: "sc-regbol-4"
|
|
2595
|
-
})(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$3.icon.subdued, border$5.radius.sm, motion.hover, layout$1.sm, color$3.icon["default"], color$3.background.surface, border$5.focus, layout$1.xs);
|
|
2686
|
+
})(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$3.icon.subdued, border$5.radius.sm, motion$3.hover, layout$1.sm, color$3.icon["default"], color$3.background.surface, border$5.focus, layout$1.xs);
|
|
2596
2687
|
var StyledActionsList = styled.ul.withConfig({
|
|
2597
2688
|
displayName: "ActionSheet__StyledActionsList",
|
|
2598
2689
|
componentId: "sc-regbol-5"
|
|
2599
|
-
})(templateObject_8$
|
|
2690
|
+
})(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n padding: ", " ", ";\n margin: 0;\n list-style: none;\n"], ["\n padding: ", " ", ";\n margin: 0;\n list-style: none;\n"
|
|
2600
2691
|
/**
|
|
2601
2692
|
* ActionSheet component for bottom sheet modals
|
|
2602
2693
|
*
|
|
@@ -2678,6 +2769,10 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2678
2769
|
dataTestId = _a["data-testid"];
|
|
2679
2770
|
var sheetRef = useRef(null);
|
|
2680
2771
|
var previousActiveElement = useRef(null);
|
|
2772
|
+
var _e = usePresence(isOpen),
|
|
2773
|
+
isPresent = _e.isPresent,
|
|
2774
|
+
isExiting = _e.isExiting;
|
|
2775
|
+
useInert(sheetRef, isExiting);
|
|
2681
2776
|
// Store the element that had focus when sheet opened
|
|
2682
2777
|
useEffect(function () {
|
|
2683
2778
|
if (isOpen) {
|
|
@@ -2708,7 +2803,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2708
2803
|
};
|
|
2709
2804
|
document.addEventListener('keydown', handleKeyDown);
|
|
2710
2805
|
// Focus first focusable element (button or element with role="button")
|
|
2711
|
-
requestAnimationFrame(function () {
|
|
2806
|
+
var frame = requestAnimationFrame(function () {
|
|
2712
2807
|
var _a;
|
|
2713
2808
|
var firstFocusable = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled), [role="button"][tabindex]:not([aria-disabled="true"])');
|
|
2714
2809
|
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
@@ -2717,6 +2812,8 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2717
2812
|
var originalOverflow = document.body.style.overflow;
|
|
2718
2813
|
document.body.style.overflow = 'hidden';
|
|
2719
2814
|
return function () {
|
|
2815
|
+
// A quick close cancels the pending focus, so it can't pull focus back into the exiting sheet
|
|
2816
|
+
cancelAnimationFrame(frame);
|
|
2720
2817
|
document.removeEventListener('keydown', handleKeyDown);
|
|
2721
2818
|
document.body.style.overflow = originalOverflow;
|
|
2722
2819
|
// Return focus to previous element
|
|
@@ -2726,7 +2823,8 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2726
2823
|
};
|
|
2727
2824
|
}, [isOpen, onClose, closeOnEscape]);
|
|
2728
2825
|
var handleOverlayClick = function handleOverlayClick(e) {
|
|
2729
|
-
|
|
2826
|
+
// While exiting, the backdrop still catches clicks but doesn't close again
|
|
2827
|
+
if (!isExiting && closeOnOverlayClick && e.target === e.currentTarget) {
|
|
2730
2828
|
onClose();
|
|
2731
2829
|
}
|
|
2732
2830
|
};
|
|
@@ -2736,7 +2834,8 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2736
2834
|
onClose();
|
|
2737
2835
|
}
|
|
2738
2836
|
};
|
|
2739
|
-
|
|
2837
|
+
// Stays mounted while the exit fade runs, hidden from assistive technology
|
|
2838
|
+
if (!isPresent) return null;
|
|
2740
2839
|
// Find if there are any destructive actions to add divider
|
|
2741
2840
|
var destructiveIndex = actions.findIndex(function (a) {
|
|
2742
2841
|
return a.destructive;
|
|
@@ -2744,11 +2843,14 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2744
2843
|
var hasDestructive = destructiveIndex >= 0;
|
|
2745
2844
|
return /*#__PURE__*/createPortal(jsxs(Fragment, {
|
|
2746
2845
|
children: [jsx(StyledOverlay$2, {
|
|
2747
|
-
onClick: handleOverlayClick
|
|
2846
|
+
onClick: handleOverlayClick,
|
|
2847
|
+
"$isExiting": isExiting
|
|
2748
2848
|
}), jsxs(StyledActionSheet, {
|
|
2749
2849
|
ref: sheetRef,
|
|
2750
2850
|
role: "dialog",
|
|
2751
2851
|
"aria-modal": "true",
|
|
2852
|
+
"aria-hidden": isExiting || undefined,
|
|
2853
|
+
"$isExiting": isExiting,
|
|
2752
2854
|
"aria-labelledby": title ? 'action-sheet-title' : undefined,
|
|
2753
2855
|
"aria-describedby": description ? 'action-sheet-description' : undefined,
|
|
2754
2856
|
"data-testid": dataTestId,
|
|
@@ -2808,7 +2910,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2808
2910
|
})]
|
|
2809
2911
|
}), document.body);
|
|
2810
2912
|
};
|
|
2811
|
-
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$
|
|
2913
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$d, templateObject_6$a, templateObject_7$8, templateObject_8$7;
|
|
2812
2914
|
|
|
2813
2915
|
function detectSpeechRecognitionConstructor(targetWindow) {
|
|
2814
2916
|
if (!targetWindow) return null;
|
|
@@ -2908,8 +3010,7 @@ function agentInputStateTransition(currentState, event) {
|
|
|
2908
3010
|
}
|
|
2909
3011
|
}
|
|
2910
3012
|
|
|
2911
|
-
var semantic$
|
|
2912
|
-
base$9 = tokensJson.base,
|
|
3013
|
+
var semantic$8 = tokensJson.semantic,
|
|
2913
3014
|
component$1 = tokensJson.component;
|
|
2914
3015
|
var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
|
|
2915
3016
|
var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
|
|
@@ -2918,7 +3019,7 @@ var rotateRing = keyframes(templateObject_1$p || (templateObject_1$p = __makeTem
|
|
|
2918
3019
|
var Container = styled.div.withConfig({
|
|
2919
3020
|
displayName: "AgentInput__Container",
|
|
2920
3021
|
componentId: "sc-fhl996-0"
|
|
2921
|
-
})(templateObject_2$k || (templateObject_2$k = __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"])),
|
|
3022
|
+
})(templateObject_2$k || (templateObject_2$k = __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$8.spacing.layout.sm);
|
|
2922
3023
|
var ControlsRow = styled.div.withConfig({
|
|
2923
3024
|
displayName: "AgentInput__ControlsRow",
|
|
2924
3025
|
componentId: "sc-fhl996-1"
|
|
@@ -2926,73 +3027,79 @@ var ControlsRow = styled.div.withConfig({
|
|
|
2926
3027
|
var InputShell = styled.div.withConfig({
|
|
2927
3028
|
displayName: "AgentInput__InputShell",
|
|
2928
3029
|
componentId: "sc-fhl996-2"
|
|
2929
|
-
})(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
|
|
3030
|
+
})(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$8.spacing.layout.sm, semantic$8.spacing.layout.xs, semantic$8.spacing.layout.sm, semantic$8.spacing.layout.xs, component$1.input["default"].paddingX, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$8.border.radius['3xl'], semantic$8.elevation.raised, semantic$8.motion.duration.normal, semantic$8.motion.easing.easeInOut, semantic$8.motion.duration.normal, semantic$8.motion.easing.easeInOut, component$1.input.focus.borderColor, component$1.input.focus.outline, component$1.input.focus.outlineOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
|
|
2930
3031
|
var Input = styled.input.withConfig({
|
|
2931
3032
|
displayName: "AgentInput__Input",
|
|
2932
3033
|
componentId: "sc-fhl996-3"
|
|
2933
|
-
})(templateObject_5$
|
|
3034
|
+
})(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$8.spacing.layout['7xl'], semantic$8.typography.body, semantic$8.color.text["default"], semantic$8.color.text.subdued, semantic$8.color.text.disabled);
|
|
2934
3035
|
var InputActions = styled.div.withConfig({
|
|
2935
3036
|
displayName: "AgentInput__InputActions",
|
|
2936
3037
|
componentId: "sc-fhl996-4"
|
|
2937
|
-
})(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$
|
|
3038
|
+
})(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$8.spacing.layout.sm);
|
|
2938
3039
|
var CircularActionIconButton = styled(IconButton).withConfig({
|
|
2939
3040
|
displayName: "AgentInput__CircularActionIconButton",
|
|
2940
3041
|
componentId: "sc-fhl996-5"
|
|
2941
|
-
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$
|
|
3042
|
+
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$8.border.radius.circle);
|
|
2942
3043
|
var InputWrapper = styled.div.withConfig({
|
|
2943
3044
|
displayName: "AgentInput__InputWrapper",
|
|
2944
3045
|
componentId: "sc-fhl996-6"
|
|
2945
|
-
})(templateObject_8$
|
|
3046
|
+
})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n"], ["\n flex: 1;\n min-width: 0;\n"])));
|
|
2946
3047
|
var MicButtonWrapper = styled.div.withConfig({
|
|
2947
3048
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2948
3049
|
return !prop.startsWith('$');
|
|
2949
3050
|
},
|
|
2950
3051
|
displayName: "AgentInput__MicButtonWrapper",
|
|
2951
3052
|
componentId: "sc-fhl996-7"
|
|
2952
|
-
})(templateObject_9$
|
|
3053
|
+
})(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"
|
|
3054
|
+
// Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
|
|
3055
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
3056
|
+
])), semantic$8.border.radius.circle);
|
|
3057
|
+
// Masks read only alpha, so the opaque stop is a mask value, not a colour (decision 0010).
|
|
3058
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
3059
|
+
var ringMask = 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)))"])));
|
|
2953
3060
|
var MicListeningRing = styled.span.withConfig({
|
|
2954
3061
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2955
3062
|
return !prop.startsWith('$');
|
|
2956
3063
|
},
|
|
2957
3064
|
displayName: "AgentInput__MicListeningRing",
|
|
2958
3065
|
componentId: "sc-fhl996-8"
|
|
2959
|
-
})(
|
|
3066
|
+
})(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$8.border.width.thick, semantic$8.spacing.layout.xs, component$1.iconButton.focus.outlineOffset, semantic$8.border.radius.circle, semantic$8.color.background['interactive-subtle'], semantic$8.color.background.interactive, semantic$8.color.background['interactive-hover'], semantic$8.color.background.interactive, semantic$8.color.background['interactive-subtle'], ringMask, ringMask, function (_a) {
|
|
2960
3067
|
var $reducedMotion = _a.$reducedMotion;
|
|
2961
|
-
return !$reducedMotion && css(
|
|
3068
|
+
return !$reducedMotion && css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n animation: ", " 1300ms linear infinite;\n "], ["\n animation: ", " 1300ms linear infinite;\n "])), rotateRing);
|
|
2962
3069
|
});
|
|
2963
3070
|
var StatusRow = styled.div.withConfig({
|
|
2964
3071
|
displayName: "AgentInput__StatusRow",
|
|
2965
3072
|
componentId: "sc-fhl996-9"
|
|
2966
|
-
})(
|
|
3073
|
+
})(templateObject_13$2 || (templateObject_13$2 = __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$8.spacing.layout.md, semantic$8.spacing.layout['2xl']);
|
|
2967
3074
|
var StatusText = styled.div.withConfig({
|
|
2968
3075
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2969
3076
|
return !prop.startsWith('$');
|
|
2970
3077
|
},
|
|
2971
3078
|
displayName: "AgentInput__StatusText",
|
|
2972
3079
|
componentId: "sc-fhl996-10"
|
|
2973
|
-
})(
|
|
3080
|
+
})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$8.spacing.layout.xl);
|
|
2974
3081
|
var StatusAnnouncement = styled.div.withConfig({
|
|
2975
3082
|
displayName: "AgentInput__StatusAnnouncement",
|
|
2976
3083
|
componentId: "sc-fhl996-11"
|
|
2977
|
-
})(
|
|
3084
|
+
})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject([""], [""])));
|
|
2978
3085
|
var MeterContainer = styled.div.withConfig({
|
|
2979
3086
|
displayName: "AgentInput__MeterContainer",
|
|
2980
3087
|
componentId: "sc-fhl996-12"
|
|
2981
|
-
})(
|
|
3088
|
+
})(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$8.spacing.layout.xs, semantic$8.spacing.layout.lg);
|
|
2982
3089
|
var MeterBar = styled.div.withConfig({
|
|
2983
3090
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2984
3091
|
return !prop.startsWith('$');
|
|
2985
3092
|
},
|
|
2986
3093
|
displayName: "AgentInput__MeterBar",
|
|
2987
3094
|
componentId: "sc-fhl996-13"
|
|
2988
|
-
})(
|
|
3095
|
+
})(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$8.spacing.layout.xs, semantic$8.border.radius.xs, semantic$8.color.background.interactive, function (_a) {
|
|
2989
3096
|
var $height = _a.$height;
|
|
2990
3097
|
return "".concat($height * 100, "%");
|
|
2991
|
-
});
|
|
3098
|
+
}, semantic$8.motion.duration.fast, semantic$8.motion.easing.easeOut);
|
|
2992
3099
|
var VisuallyHiddenLabel = styled.label.withConfig({
|
|
2993
3100
|
displayName: "AgentInput__VisuallyHiddenLabel",
|
|
2994
3101
|
componentId: "sc-fhl996-14"
|
|
2995
|
-
})(
|
|
3102
|
+
})(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), visuallyHidden);
|
|
2996
3103
|
function getInitialState(hasText) {
|
|
2997
3104
|
return hasText ? 'typing' : 'idle';
|
|
2998
3105
|
}
|
|
@@ -3621,10 +3728,31 @@ var AgentInput = function AgentInput(_a) {
|
|
|
3621
3728
|
})]
|
|
3622
3729
|
});
|
|
3623
3730
|
};
|
|
3624
|
-
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$
|
|
3731
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$i, 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$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
|
|
3625
3732
|
|
|
3626
|
-
var semantic$
|
|
3627
|
-
|
|
3733
|
+
var semantic$7 = tokensJson.semantic;
|
|
3734
|
+
var alert = tokensJson.component.alert;
|
|
3735
|
+
var _a$3 = semantic$7.motion,
|
|
3736
|
+
duration$1 = _a$3.duration,
|
|
3737
|
+
easing$1 = _a$3.easing;
|
|
3738
|
+
// Dismissing fades the alert out, then collapses the space it took (Ollie's call, #35).
|
|
3739
|
+
// Each half takes duration.fast, so the whole exit stays within the 300ms maximum (P6).
|
|
3740
|
+
var FADE_MS = parseInt(duration$1.fast, 10);
|
|
3741
|
+
var EXIT_MS = FADE_MS * 2;
|
|
3742
|
+
// The --alert-exit-* properties are the alert's height and vertical padding, measured
|
|
3743
|
+
// when it's dismissed, so nothing moves until the fade has finished
|
|
3744
|
+
var fadeThenCollapse = keyframes(templateObject_1$o || (templateObject_1$o = __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$7.border.width.thin);
|
|
3745
|
+
var fadeOut = keyframes(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n from { opacity: 1; }\n to { opacity: 0; }\n"], ["\n from { opacity: 1; }\n to { opacity: 0; }\n"
|
|
3746
|
+
// The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
|
|
3747
|
+
// (chosen when dismissed). A timer of the same length removes it if no animation event
|
|
3748
|
+
// arrives, for example where animations are disabled or the tab is hidden.
|
|
3749
|
+
// The generated names of the two exits (full, and reduced motion)
|
|
3750
|
+
])));
|
|
3751
|
+
// The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
|
|
3752
|
+
// (chosen when dismissed). A timer of the same length removes it if no animation event
|
|
3753
|
+
// arrives, for example where animations are disabled or the tab is hidden.
|
|
3754
|
+
// The generated names of the two exits (full, and reduced motion)
|
|
3755
|
+
var EXIT_ANIMATION_NAMES = [fadeThenCollapse.getName(), fadeOut.getName()];
|
|
3628
3756
|
// Default icons by variant
|
|
3629
3757
|
var variantIcons = {
|
|
3630
3758
|
error: 'crossCircle',
|
|
@@ -3652,56 +3780,60 @@ var StyledAlert = styled.div.withConfig({
|
|
|
3652
3780
|
},
|
|
3653
3781
|
displayName: "Alert__StyledAlert",
|
|
3654
3782
|
componentId: "sc-18tq5d-0"
|
|
3655
|
-
})(
|
|
3783
|
+
})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: ", " solid;\n position: relative;\n width: 100%;\n \n /* Variant-specific colors */\n ", "\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 align-items: ", ";\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: ", " solid;\n position: relative;\n width: 100%;\n \n /* Variant-specific colors */\n ", "\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) {
|
|
3656
3784
|
var $inline = _a.$inline;
|
|
3657
3785
|
return $inline ? 'center' : 'flex-start';
|
|
3658
3786
|
}, function (_a) {
|
|
3659
3787
|
var $inline = _a.$inline;
|
|
3660
|
-
return $inline ? semantic$
|
|
3788
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
|
|
3661
3789
|
}, function (_a) {
|
|
3662
3790
|
var $inline = _a.$inline;
|
|
3663
|
-
return $inline ? semantic$
|
|
3664
|
-
},
|
|
3791
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
|
|
3792
|
+
}, semantic$7.border.radius.sm, semantic$7.border.width.thin, function (_a) {
|
|
3665
3793
|
var $variant = _a.$variant;
|
|
3666
3794
|
switch ($variant) {
|
|
3667
3795
|
case 'error':
|
|
3668
|
-
return "\n background-color: ".concat(semantic$
|
|
3796
|
+
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 ");
|
|
3669
3797
|
case 'warning':
|
|
3670
|
-
return "\n background-color: ".concat(semantic$
|
|
3798
|
+
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 ");
|
|
3671
3799
|
case 'success':
|
|
3672
|
-
return "\n background-color: ".concat(semantic$
|
|
3800
|
+
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 ");
|
|
3673
3801
|
case 'info':
|
|
3674
3802
|
default:
|
|
3675
|
-
return "\n background-color: ".concat(semantic$
|
|
3803
|
+
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 ");
|
|
3676
3804
|
}
|
|
3677
|
-
},
|
|
3805
|
+
}, semantic$7.breakpoint.md, function (_a) {
|
|
3678
3806
|
var $inline = _a.$inline;
|
|
3679
|
-
return $inline ? semantic$
|
|
3807
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.lg;
|
|
3808
|
+
}, function (_a) {
|
|
3809
|
+
var $isExiting = _a.$isExiting,
|
|
3810
|
+
$reducedExit = _a.$reducedExit;
|
|
3811
|
+
return $isExiting && 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 ? css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.easeOut) : css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.easeOut));
|
|
3680
3812
|
});
|
|
3681
3813
|
var StyledIconContainer = styled.div.withConfig({
|
|
3682
3814
|
displayName: "Alert__StyledIconContainer",
|
|
3683
3815
|
componentId: "sc-18tq5d-1"
|
|
3684
|
-
})(
|
|
3816
|
+
})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n"])));
|
|
3685
3817
|
var StyledContent$1 = styled.div.withConfig({
|
|
3686
3818
|
displayName: "Alert__StyledContent",
|
|
3687
3819
|
componentId: "sc-18tq5d-2"
|
|
3688
|
-
})(
|
|
3820
|
+
})(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$7.spacing.layout.xs);
|
|
3689
3821
|
var StyledTitle = styled.span.withConfig({
|
|
3690
3822
|
displayName: "Alert__StyledTitle",
|
|
3691
3823
|
componentId: "sc-18tq5d-3"
|
|
3692
|
-
})(
|
|
3824
|
+
})(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);
|
|
3693
3825
|
var StyledMessage = styled.span.withConfig({
|
|
3694
3826
|
displayName: "Alert__StyledMessage",
|
|
3695
3827
|
componentId: "sc-18tq5d-4"
|
|
3696
|
-
})(
|
|
3828
|
+
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n font: ", ";\n line-height: ", ";\n"], ["\n font: ", ";\n line-height: ", ";\n"])), alert.message.typography, alert.message.lineHeight);
|
|
3697
3829
|
var StyledActions = styled.div.withConfig({
|
|
3698
3830
|
displayName: "Alert__StyledActions",
|
|
3699
3831
|
componentId: "sc-18tq5d-5"
|
|
3700
|
-
})(
|
|
3832
|
+
})(templateObject_11$2 || (templateObject_11$2 = __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$7.spacing.layout.sm);
|
|
3701
3833
|
var StyledDismissButton = styled(IconButton).withConfig({
|
|
3702
3834
|
displayName: "Alert__StyledDismissButton",
|
|
3703
3835
|
componentId: "sc-18tq5d-6"
|
|
3704
|
-
})(
|
|
3836
|
+
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-left: ", ";\n\tposition: absolute;\n\tright: ", ";\n\ttop: ", ";\n"], ["\n margin-left: ", ";\n\tposition: absolute;\n\tright: ", ";\n\ttop: ", ";\n"])), semantic$7.spacing.layout.xs, semantic$7.spacing.layout.sm, semantic$7.spacing.layout.sm);
|
|
3705
3837
|
var Alert = function Alert(_a) {
|
|
3706
3838
|
var _b = _a.variant,
|
|
3707
3839
|
variant = _b === void 0 ? 'info' : _b,
|
|
@@ -3717,16 +3849,70 @@ var Alert = function Alert(_a) {
|
|
|
3717
3849
|
ariaLive = _e === void 0 ? 'polite' : _e,
|
|
3718
3850
|
dataTestId = _a["data-testid"],
|
|
3719
3851
|
props = __rest(_a, ["variant", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
|
|
3720
|
-
var _f = React.useState(
|
|
3721
|
-
|
|
3722
|
-
|
|
3852
|
+
var _f = React.useState('visible'),
|
|
3853
|
+
phase = _f[0],
|
|
3854
|
+
setPhase = _f[1];
|
|
3855
|
+
var _g = React.useState(false),
|
|
3856
|
+
reducedExit = _g[0],
|
|
3857
|
+
setReducedExit = _g[1];
|
|
3858
|
+
var _h = React.useState(),
|
|
3859
|
+
exitStyle = _h[0],
|
|
3860
|
+
setExitStyle = _h[1];
|
|
3861
|
+
var alertRef = React.useRef(null);
|
|
3862
|
+
// While it exits, its controls leave the tab order and can't be activated
|
|
3863
|
+
useInert(alertRef, phase === 'exiting');
|
|
3864
|
+
var onDismissRef = React.useRef(onDismiss);
|
|
3865
|
+
React.useEffect(function () {
|
|
3866
|
+
onDismissRef.current = onDismiss;
|
|
3867
|
+
}, [onDismiss]);
|
|
3723
3868
|
var handleDismiss = function handleDismiss() {
|
|
3724
|
-
|
|
3725
|
-
|
|
3869
|
+
var node = alertRef.current;
|
|
3870
|
+
if (node) {
|
|
3871
|
+
var style = window.getComputedStyle(node);
|
|
3872
|
+
var paddingTop = style.paddingTop,
|
|
3873
|
+
paddingBottom = style.paddingBottom;
|
|
3874
|
+
// max-height applies to the content box unless the alert is border-box (it depends on
|
|
3875
|
+
// the consumer's reset), so measure whichever box it uses; nothing moves at the click
|
|
3876
|
+
var height = Math.max(0, style.boxSizing === 'border-box' ? node.offsetHeight : node.offsetHeight - parseFloat(paddingTop) - parseFloat(paddingBottom) - parseFloat(style.borderTopWidth) - parseFloat(style.borderBottomWidth));
|
|
3877
|
+
setExitStyle({
|
|
3878
|
+
'--alert-exit-height': "".concat(height, "px"),
|
|
3879
|
+
'--alert-exit-padding-top': paddingTop,
|
|
3880
|
+
'--alert-exit-padding-bottom': paddingBottom
|
|
3881
|
+
});
|
|
3882
|
+
}
|
|
3883
|
+
setReducedExit(typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
3884
|
+
setPhase('exiting');
|
|
3726
3885
|
};
|
|
3727
|
-
|
|
3886
|
+
React.useEffect(function () {
|
|
3887
|
+
if (phase !== 'exiting') return;
|
|
3888
|
+
var timer = setTimeout(function () {
|
|
3889
|
+
return setPhase('dismissed');
|
|
3890
|
+
}, reducedExit ? FADE_MS : EXIT_MS);
|
|
3891
|
+
return function () {
|
|
3892
|
+
return clearTimeout(timer);
|
|
3893
|
+
};
|
|
3894
|
+
}, [phase, reducedExit]);
|
|
3895
|
+
// onDismiss fires once the alert has been removed from the DOM, so a consumer that
|
|
3896
|
+
// unmounts it in onDismiss still gets the animation, and can't observe it
|
|
3897
|
+
React.useEffect(function () {
|
|
3898
|
+
var _a;
|
|
3899
|
+
if (phase === 'dismissed') (_a = onDismissRef.current) === null || _a === void 0 ? void 0 : _a.call(onDismissRef);
|
|
3900
|
+
}, [phase]);
|
|
3901
|
+
if (phase === 'dismissed') {
|
|
3728
3902
|
return null;
|
|
3729
3903
|
}
|
|
3904
|
+
var isExiting = phase === 'exiting';
|
|
3905
|
+
// Consumers can pass extra HTML attributes, including style, aria-hidden and onAnimationEnd
|
|
3906
|
+
var forwarded = props;
|
|
3907
|
+
var handleAnimationEnd = function handleAnimationEnd(event) {
|
|
3908
|
+
var _a;
|
|
3909
|
+
(_a = forwarded.onAnimationEnd) === null || _a === void 0 ? void 0 : _a.call(forwarded, event);
|
|
3910
|
+
// Only the exit itself ends the dismissal: not animations bubbling up from children,
|
|
3911
|
+
// on pseudo-elements, or other animations a consumer puts on the alert
|
|
3912
|
+
if (isExiting && event.target === event.currentTarget && !event.pseudoElement && EXIT_ANIMATION_NAMES.includes(event.animationName)) {
|
|
3913
|
+
setPhase('dismissed');
|
|
3914
|
+
}
|
|
3915
|
+
};
|
|
3730
3916
|
// Get the icon for the current variant
|
|
3731
3917
|
var iconName = variantIcons[variant];
|
|
3732
3918
|
var alertIconColor = variantIconColors[variant];
|
|
@@ -3738,8 +3924,14 @@ var Alert = function Alert(_a) {
|
|
|
3738
3924
|
"aria-live": ariaLive,
|
|
3739
3925
|
"$variant": variant,
|
|
3740
3926
|
"$inline": inline,
|
|
3927
|
+
"$isExiting": isExiting,
|
|
3928
|
+
"$reducedExit": reducedExit,
|
|
3741
3929
|
"data-testid": dataTestId
|
|
3742
3930
|
}, props, {
|
|
3931
|
+
ref: alertRef,
|
|
3932
|
+
"aria-hidden": isExiting ? true : forwarded['aria-hidden'],
|
|
3933
|
+
style: isExiting ? __assign(__assign({}, forwarded.style), exitStyle) : forwarded.style,
|
|
3934
|
+
onAnimationEnd: handleAnimationEnd,
|
|
3743
3935
|
children: [jsx(StyledIconContainer, {
|
|
3744
3936
|
"aria-hidden": "true",
|
|
3745
3937
|
children: jsx(Icon, {
|
|
@@ -3769,17 +3961,16 @@ var Alert = function Alert(_a) {
|
|
|
3769
3961
|
}));
|
|
3770
3962
|
};
|
|
3771
3963
|
Alert.displayName = 'Alert';
|
|
3772
|
-
var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$
|
|
3964
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$h, 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;
|
|
3773
3965
|
|
|
3774
|
-
var _a$3, _b$1, _c, _d, _e, _f;
|
|
3775
3966
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
3776
3967
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
3777
3968
|
componentId: "sc-7ouzg5-0"
|
|
3778
|
-
})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"], ["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"])),
|
|
3969
|
+
})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"], ["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"])), tokensJson.semantic.border["default"]);
|
|
3779
3970
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
3780
3971
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
3781
3972
|
componentId: "sc-7ouzg5-1"
|
|
3782
|
-
})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n text-transform: uppercase;\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", ";\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width:
|
|
3973
|
+
})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n text-transform: uppercase;\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", ";\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: ", ";\n }\n\n > a {\n display: inline-flex;\n align-items: center;\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n text-transform: uppercase;\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", ";\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: ", ";\n }\n\n > a {\n display: inline-flex;\n align-items: center;\n text-decoration: underline;\n color: ", ";\n }\n"])), tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.color.text.subdued, tokensJson.component.breadcrumbs.item.maxWidth, tokensJson.semantic.color.text["default"]);
|
|
3783
3974
|
var BreadcrumbSeparator = styled.span.withConfig({
|
|
3784
3975
|
displayName: "Breadcrumbs__BreadcrumbSeparator",
|
|
3785
3976
|
componentId: "sc-7ouzg5-2"
|
|
@@ -3836,14 +4027,15 @@ var templateObject_1$n, templateObject_2$i, templateObject_3$g;
|
|
|
3836
4027
|
var CardSmallStyled = styled.div.withConfig({
|
|
3837
4028
|
displayName: "CardSmall__CardSmallStyled",
|
|
3838
4029
|
componentId: "sc-jpcqvd-0"
|
|
3839
|
-
})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n a {\n text-decoration: none;\n }\n\n img {\n border-radius: ", ";\n transition:
|
|
4030
|
+
})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n a {\n text-decoration: none;\n }\n\n img {\n border-radius: ", ";\n transition: opacity ", " ", ";\n width: 100%;\n height: auto;\n display: block;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n &:focus-within {\n outline: none;\n box-shadow: 0 0 0 ", " ", ";\n }\n"], ["\n a {\n text-decoration: none;\n }\n\n img {\n border-radius: ", ";\n transition: opacity ", " ", ";\n width: 100%;\n height: auto;\n display: block;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n &:focus-within {\n outline: none;\n box-shadow: 0 0 0 ", " ", ";\n }\n"])), tokensJson.semantic.border.radius.sm, tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeOut, tokensJson.semantic.border.width.thick, tokensJson.semantic.color.border.strong);
|
|
3840
4031
|
var CardSmall = function CardSmall(_a) {
|
|
3841
4032
|
var title = _a.title,
|
|
3842
4033
|
picture = _a.picture,
|
|
3843
4034
|
subtitle = _a.subtitle,
|
|
3844
4035
|
meta = _a.meta,
|
|
3845
4036
|
href = _a.href,
|
|
3846
|
-
LinkComponent = _a.linkComponent
|
|
4037
|
+
LinkComponent = _a.linkComponent,
|
|
4038
|
+
dataTestId = _a["data-testid"];
|
|
3847
4039
|
if (!picture || !meta) {
|
|
3848
4040
|
return null;
|
|
3849
4041
|
}
|
|
@@ -3877,6 +4069,7 @@ var CardSmall = function CardSmall(_a) {
|
|
|
3877
4069
|
})]
|
|
3878
4070
|
});
|
|
3879
4071
|
return jsx(CardSmallStyled, {
|
|
4072
|
+
"data-testid": dataTestId,
|
|
3880
4073
|
children: LinkComponent && href ? jsx(LinkComponent, {
|
|
3881
4074
|
href: href,
|
|
3882
4075
|
"aria-label": title,
|
|
@@ -3890,11 +4083,11 @@ var CardSmall = function CardSmall(_a) {
|
|
|
3890
4083
|
};
|
|
3891
4084
|
var templateObject_1$m;
|
|
3892
4085
|
|
|
3893
|
-
var border$4 = tokensJson.
|
|
4086
|
+
var border$4 = tokensJson.semantic.border;
|
|
3894
4087
|
var CardLargeStyled = styled.div.withConfig({
|
|
3895
4088
|
displayName: "CardLarge__CardLargeStyled",
|
|
3896
4089
|
componentId: "sc-1rfgdzl-0"
|
|
3897
|
-
})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n max-width:
|
|
4090
|
+
})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n max-width: ", ";\n\n a {\n text-decoration: none;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n img {\n border-radius: ", ";\n transition: opacity ", " ", ";\n width: 100%;\n }\n"], ["\n max-width: ", ";\n\n a {\n text-decoration: none;\n }\n\n &:hover {\n img {\n opacity: 0.8;\n }\n }\n\n img {\n border-radius: ", ";\n transition: opacity ", " ", ";\n width: 100%;\n }\n"])), tokensJson.component.cardLarge.maxWidth, border$4.radius['2xl'], tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeOut);
|
|
3898
4091
|
var CardLarge = function CardLarge(_a) {
|
|
3899
4092
|
var title = _a.title,
|
|
3900
4093
|
excerpt = _a.excerpt,
|
|
@@ -3903,8 +4096,10 @@ var CardLarge = function CardLarge(_a) {
|
|
|
3903
4096
|
labels = _b === void 0 ? [] : _b,
|
|
3904
4097
|
picture = _a.picture,
|
|
3905
4098
|
onImageClick = _a.onImageClick,
|
|
3906
|
-
imageHref = _a.imageHref
|
|
4099
|
+
imageHref = _a.imageHref,
|
|
4100
|
+
dataTestId = _a["data-testid"];
|
|
3907
4101
|
return jsx(CardLargeStyled, {
|
|
4102
|
+
"data-testid": dataTestId,
|
|
3908
4103
|
children: jsxs(Stack, {
|
|
3909
4104
|
direction: "column",
|
|
3910
4105
|
gap: "md",
|
|
@@ -3976,11 +4171,11 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
3976
4171
|
},
|
|
3977
4172
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
3978
4173
|
componentId: "sc-1ddpctx-1"
|
|
3979
|
-
})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width:
|
|
4174
|
+
})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n min-width: ", ";\n min-height: ", ";\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all ", " ", ";\n flex-shrink: 0;\n\n /* Hover state */\n ", ":not(:disabled):hover + & {\n border-color: ", ";\n }\n\n /* Focus state */\n ", ":focus-visible + & {\n outline: ", ";\n outline-offset: ", ";\n border-color: ", ";\n }\n\n /* Disabled state */\n ", "\n\n /* Checkmark icon */\n &::after {\n content: '';\n position: absolute;\n display: ", ";\n left: 6px;\n top: 3px;\n width: 4px;\n height: 8px;\n border: solid ", ";\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n\n /* Indeterminate icon (horizontal line) */\n &::before {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 8px;\n width: 10px;\n height: 2px;\n background-color: ", ";\n }\n"], ["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n min-width: ", ";\n min-height: ", ";\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all ", " ", ";\n flex-shrink: 0;\n\n /* Hover state */\n ", ":not(:disabled):hover + & {\n border-color: ", ";\n }\n\n /* Focus state */\n ", ":focus-visible + & {\n outline: ", ";\n outline-offset: ", ";\n border-color: ", ";\n }\n\n /* Disabled state */\n ", "\n\n /* Checkmark icon */\n &::after {\n content: '';\n position: absolute;\n display: ", ";\n left: 6px;\n top: 3px;\n width: 4px;\n height: 8px;\n border: solid ", ";\n border-width: 0 2px 2px 0;\n transform: rotate(45deg);\n }\n\n /* Indeterminate icon (horizontal line) */\n &::before {\n content: '';\n position: absolute;\n display: ", ";\n left: 4px;\n top: 8px;\n width: 10px;\n height: 2px;\n background-color: ", ";\n }\n"
|
|
3980
4175
|
/**
|
|
3981
4176
|
* Container for checkbox with proper spacing and alignment
|
|
3982
4177
|
* 48px min-height for touch target (8px grid aligned)
|
|
3983
|
-
*/])), tokensJson.component.input["default"].borderRadius, tokensJson.component.input["default"].borderWidth, function (props) {
|
|
4178
|
+
*/])), tokensJson.component.checkbox.box.size, tokensJson.component.checkbox.box.size, tokensJson.component.checkbox.box.size, tokensJson.component.checkbox.box.size, tokensJson.component.input["default"].borderRadius, tokensJson.component.input["default"].borderWidth, function (props) {
|
|
3984
4179
|
return props.$checked || props.$indeterminate ? tokensJson.semantic.color.background.inverse : tokensJson.component.input["default"].backgroundColor;
|
|
3985
4180
|
}, function (props) {
|
|
3986
4181
|
if (props.$state === 'error') return tokensJson.component.input.error.borderColor;
|
|
@@ -3988,7 +4183,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
3988
4183
|
return tokensJson.component.input["default"].borderColor;
|
|
3989
4184
|
}, function (props) {
|
|
3990
4185
|
return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
|
|
3991
|
-
}, HiddenCheckboxInput, function (props) {
|
|
4186
|
+
}, tokensJson.semantic.motion.duration.fast, tokensJson.semantic.motion.easing.easeOut, HiddenCheckboxInput, function (props) {
|
|
3992
4187
|
return props.$state === 'error' ? tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensJson.semantic.border.strong : tokensJson.component.input.hover.borderColor;
|
|
3993
4188
|
}, HiddenCheckboxInput, tokensJson.component.input.focus.outline, tokensJson.component.input.focus.outlineOffset, function (props) {
|
|
3994
4189
|
return props.$state === 'error' ? tokensJson.component.input.error.focus.borderColor : tokensJson.component.input.focus.borderColor;
|
|
@@ -4009,12 +4204,12 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
4009
4204
|
},
|
|
4010
4205
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
4011
4206
|
componentId: "sc-1ddpctx-2"
|
|
4012
|
-
})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height:
|
|
4207
|
+
})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: ", ";\n flex-direction: ", ";\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: ", ";\n flex-direction: ", ";\n user-select: none;\n"
|
|
4013
4208
|
/**
|
|
4014
4209
|
* Label text with proper typography
|
|
4015
|
-
*/])), tokensJson.
|
|
4210
|
+
*/])), tokensJson.semantic.spacing.layout.md, function (props) {
|
|
4016
4211
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
4017
|
-
}, function (props) {
|
|
4212
|
+
}, tokensJson.component.checkbox.row.minHeight, function (props) {
|
|
4018
4213
|
return props.$labelPosition === 'left' ? 'row-reverse' : 'row';
|
|
4019
4214
|
});
|
|
4020
4215
|
/**
|
|
@@ -4034,7 +4229,7 @@ var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4
|
|
|
4034
4229
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
4035
4230
|
displayName: "Checkbox__StyledFieldContainer",
|
|
4036
4231
|
componentId: "sc-vquz3v-0"
|
|
4037
|
-
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"], ["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"])), tokensJson.
|
|
4232
|
+
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"], ["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"])), tokensJson.semantic.spacing.layout.xs);
|
|
4038
4233
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
4039
4234
|
displayName: "Checkbox__StyledHelperText",
|
|
4040
4235
|
componentId: "sc-vquz3v-1"
|
|
@@ -4060,9 +4255,9 @@ var StyledHelperText$4 = styled.span.withConfig({
|
|
|
4060
4255
|
* required
|
|
4061
4256
|
* />
|
|
4062
4257
|
* ```
|
|
4063
|
-
*/])), tokensJson.
|
|
4064
|
-
return props.$error ? tokensJson.
|
|
4065
|
-
}, tokensJson.
|
|
4258
|
+
*/])), tokensJson.component.field.helperText.typography, function (props) {
|
|
4259
|
+
return props.$error ? tokensJson.component.field.helperText.colorError : tokensJson.component.field.helperText.color;
|
|
4260
|
+
}, tokensJson.semantic.spacing.layout['5xl']);
|
|
4066
4261
|
/**
|
|
4067
4262
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
4068
4263
|
*
|
|
@@ -4187,16 +4382,16 @@ var templateObject_1$i;
|
|
|
4187
4382
|
var _a$2 = tokensJson.semantic,
|
|
4188
4383
|
color$2 = _a$2.color,
|
|
4189
4384
|
border$3 = _a$2.border,
|
|
4190
|
-
spacing$2 = _a$2.spacing
|
|
4191
|
-
_a$2.motion;
|
|
4385
|
+
spacing$2 = _a$2.spacing,
|
|
4386
|
+
motion$2 = _a$2.motion;
|
|
4192
4387
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
4193
4388
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
4194
4389
|
componentId: "sc-1p1t0kp-0"
|
|
4195
|
-
})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n overflow-y: ", ";\n margin: ", " 0;\n position: relative;\n transition: max-height
|
|
4390
|
+
})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n overflow-y: ", ";\n margin: ", " 0;\n position: relative;\n transition: max-height ", " ", ";\n\n ", " {\n transition: none;\n }\n \n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n overflow-y: ", ";\n margin: ", " 0;\n position: relative;\n transition: max-height ", " ", ";\n\n ", " {\n transition: none;\n }\n \n ", "\n"])), color$2.background.subtle, border$3.subtle, tokensJson.semantic.border.radius.sm, spacing$2.layout.md, tokensJson.component.codeBlock.fontFamily, tokensJson.component.codeBlock.fontSize, tokensJson.component.codeBlock.lineHeight, color$2.text["default"], function (_a) {
|
|
4196
4391
|
var $isExpanded = _a.$isExpanded,
|
|
4197
4392
|
$needsExpansion = _a.$needsExpansion;
|
|
4198
4393
|
return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
|
|
4199
|
-
}, spacing$2.layout.sm, function (_a) {
|
|
4394
|
+
}, spacing$2.layout.sm, motion$2.duration.slow, motion$2.easing.easeInOut, reducedMotion, function (_a) {
|
|
4200
4395
|
var $maxHeight = _a.$maxHeight,
|
|
4201
4396
|
$isExpanded = _a.$isExpanded,
|
|
4202
4397
|
$needsExpansion = _a.$needsExpansion;
|
|
@@ -4216,7 +4411,7 @@ var CopyButtonWrapper = styled.div.withConfig({
|
|
|
4216
4411
|
var ExpandButtonWrapper = styled.div.withConfig({
|
|
4217
4412
|
displayName: "CodeBlock__ExpandButtonWrapper",
|
|
4218
4413
|
componentId: "sc-1p1t0kp-3"
|
|
4219
|
-
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n padding: ", " 0;\n position: absolute;\n bottom:
|
|
4414
|
+
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n padding: ", " 0;\n position: absolute;\n bottom: ", ";\n left: ", ";\n right: ", ";\n width: calc(100% - 2 * ", ");\n margin-bottom: ", ";\n border-radius: ", ";\n transition: opacity ", " ", ", background ", " ", ";\n \n ", "\n"], ["\n display: flex;\n justify-content: center;\n padding: ", " 0;\n position: absolute;\n bottom: ", ";\n left: ", ";\n right: ", ";\n width: calc(100% - 2 * ", ");\n margin-bottom: ", ";\n border-radius: ", ";\n transition: opacity ", " ", ", background ", " ", ";\n \n ", "\n"])), spacing$2.layout.sm, tokensJson.semantic.border.width.thin, tokensJson.semantic.border.width.thin, tokensJson.semantic.border.width.thin, tokensJson.semantic.border.width.thin, spacing$2.layout.sm, tokensJson.semantic.border.radius.sm, motion$2.duration.slow, motion$2.easing.easeInOut, motion$2.duration.slow, motion$2.easing.easeInOut, function (_a) {
|
|
4220
4415
|
var $hasGradient = _a.$hasGradient;
|
|
4221
4416
|
return $hasGradient ? "\n margin-top: -".concat(spacing$2.layout['4xl'], ";\n padding-top: ").concat(spacing$2.layout['4xl'], ";\n background: linear-gradient(\n to bottom,\n transparent 0%,\n ").concat(color$2.background.subtle, " 60%\n );\n ") : "\n background: transparent;\n ";
|
|
4222
4417
|
});
|
|
@@ -4278,6 +4473,37 @@ var CopyButton = function CopyButton(_a) {
|
|
|
4278
4473
|
})
|
|
4279
4474
|
});
|
|
4280
4475
|
};
|
|
4476
|
+
var LiveRegion = styled.span.withConfig({
|
|
4477
|
+
displayName: "CodeBlock__LiveRegion",
|
|
4478
|
+
componentId: "sc-1p1t0kp-4"
|
|
4479
|
+
})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
4480
|
+
/**
|
|
4481
|
+
* CodeBlock component for displaying formatted code with optional copy functionality
|
|
4482
|
+
* and expandable content for long code blocks.
|
|
4483
|
+
*
|
|
4484
|
+
* @param children - The code content to display
|
|
4485
|
+
* @param showCopyButton - Whether to show the copy button (default: true)
|
|
4486
|
+
* @param onCopy - Optional callback when code is copied
|
|
4487
|
+
* @param maxHeight - Maximum height in pixels before enabling expand/collapse
|
|
4488
|
+
* @param defaultExpanded - Initial expanded state when maxHeight is set
|
|
4489
|
+
* @param data-testid - Test identifier for the code block
|
|
4490
|
+
*
|
|
4491
|
+
* @example
|
|
4492
|
+
* ```tsx
|
|
4493
|
+
* // Basic usage
|
|
4494
|
+
* <CodeBlock>const x = 1;</CodeBlock>
|
|
4495
|
+
*
|
|
4496
|
+
* // With max height and expand/collapse
|
|
4497
|
+
* <CodeBlock maxHeight={200}>
|
|
4498
|
+
* {longCodeString}
|
|
4499
|
+
* </CodeBlock>
|
|
4500
|
+
*
|
|
4501
|
+
* // Start expanded
|
|
4502
|
+
* <CodeBlock maxHeight={200} defaultExpanded>
|
|
4503
|
+
* {longCodeString}
|
|
4504
|
+
* </CodeBlock>
|
|
4505
|
+
* ```
|
|
4506
|
+
*/])), visuallyHidden);
|
|
4281
4507
|
/**
|
|
4282
4508
|
* CodeBlock component for displaying formatted code with optional copy functionality
|
|
4283
4509
|
* and expandable content for long code blocks.
|
|
@@ -4320,6 +4546,9 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
4320
4546
|
var _e = useState(false),
|
|
4321
4547
|
needsExpansion = _e[0],
|
|
4322
4548
|
setNeedsExpansion = _e[1];
|
|
4549
|
+
var _f = useState(''),
|
|
4550
|
+
announcement = _f[0],
|
|
4551
|
+
setAnnouncement = _f[1];
|
|
4323
4552
|
var contentRef = useRef(null);
|
|
4324
4553
|
// Check if content exceeds maxHeight
|
|
4325
4554
|
useEffect(function () {
|
|
@@ -4333,17 +4562,7 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
4333
4562
|
return !prev;
|
|
4334
4563
|
});
|
|
4335
4564
|
// Announce state change to screen readers
|
|
4336
|
-
|
|
4337
|
-
var announcer = document.createElement('div');
|
|
4338
|
-
announcer.setAttribute('aria-live', 'polite');
|
|
4339
|
-
announcer.setAttribute('aria-atomic', 'true');
|
|
4340
|
-
announcer.setAttribute('class', 'sr-only');
|
|
4341
|
-
announcer.style.cssText = 'position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;';
|
|
4342
|
-
announcer.textContent = announcement;
|
|
4343
|
-
document.body.appendChild(announcer);
|
|
4344
|
-
setTimeout(function () {
|
|
4345
|
-
document.body.removeChild(announcer);
|
|
4346
|
-
}, 1000);
|
|
4565
|
+
setAnnouncement(isExpanded ? 'Code block collapsed' : 'Code block expanded');
|
|
4347
4566
|
};
|
|
4348
4567
|
var showExpandButton = maxHeight && needsExpansion;
|
|
4349
4568
|
return jsxs(CodeBlockWrapper, {
|
|
@@ -4368,20 +4587,24 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
4368
4587
|
"data-testid": "expand-button",
|
|
4369
4588
|
children: isExpanded ? 'Show less' : 'Show more'
|
|
4370
4589
|
})
|
|
4590
|
+
}), showExpandButton && jsx(LiveRegion, {
|
|
4591
|
+
"aria-live": "polite",
|
|
4592
|
+
"aria-atomic": "true",
|
|
4593
|
+
children: announcement
|
|
4371
4594
|
}), showCopyButton && jsx(CopyButton, {
|
|
4372
4595
|
text: children,
|
|
4373
4596
|
onCopy: onCopy
|
|
4374
4597
|
})]
|
|
4375
4598
|
});
|
|
4376
4599
|
};
|
|
4377
|
-
var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c;
|
|
4600
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c, templateObject_5$a;
|
|
4378
4601
|
|
|
4379
4602
|
var StyledHeader$1 = styled.div.withConfig({
|
|
4380
4603
|
displayName: "DateGroup__StyledHeader",
|
|
4381
4604
|
componentId: "sc-9nfm1f-0"
|
|
4382
|
-
})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom:
|
|
4605
|
+
})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: ", " solid ", ";\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: ", " solid ", ";\n \n ", "\n"])), tokensJson.semantic.spacing.layout.md, tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.color.background["default"], tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border["default"], function (_a) {
|
|
4383
4606
|
var $sticky = _a.$sticky;
|
|
4384
|
-
return $sticky && "\n position: sticky;\n top: 0;\n z-index:
|
|
4607
|
+
return $sticky && "\n position: sticky;\n top: 0;\n z-index: ".concat(tokensJson.semantic.zIndex.sticky, ";\n box-shadow: ").concat(tokensJson.semantic.elevation.sticky, ";\n ");
|
|
4385
4608
|
});
|
|
4386
4609
|
var StyledLeftSection = styled.div.withConfig({
|
|
4387
4610
|
displayName: "DateGroup__StyledLeftSection",
|
|
@@ -4468,16 +4691,16 @@ var DateGroup = function DateGroup(_a) {
|
|
|
4468
4691
|
};
|
|
4469
4692
|
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
4470
4693
|
|
|
4471
|
-
var semantic$
|
|
4694
|
+
var semantic$6 = tokensJson.semantic;
|
|
4472
4695
|
var StyledContainer$1 = styled.div.withConfig({
|
|
4473
4696
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4474
4697
|
return !prop.startsWith('$');
|
|
4475
4698
|
},
|
|
4476
4699
|
displayName: "EmptyState__StyledContainer",
|
|
4477
4700
|
componentId: "sc-1u5hxh-0"
|
|
4478
|
-
})(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:
|
|
4701
|
+
})(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"])), tokensJson.component.emptyState.maxWidth, function (_a) {
|
|
4479
4702
|
var $size = _a.$size;
|
|
4480
|
-
return $size === 'small' ? semantic$
|
|
4703
|
+
return $size === 'small' ? semantic$6.spacing.layout['4xl'] : $size === 'large' ? semantic$6.spacing.layout['8xl'] : semantic$6.spacing.layout['6xl'];
|
|
4481
4704
|
});
|
|
4482
4705
|
var StyledIllustration = styled.div.withConfig({
|
|
4483
4706
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -4487,20 +4710,20 @@ var StyledIllustration = styled.div.withConfig({
|
|
|
4487
4710
|
componentId: "sc-1u5hxh-1"
|
|
4488
4711
|
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: ", ";\n color: ", ";\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: ", ";\n color: ", ";\n"])), function (_a) {
|
|
4489
4712
|
var $size = _a.$size;
|
|
4490
|
-
return $size === 'small' ?
|
|
4713
|
+
return $size === 'small' ? tokensJson.component.emptyState.illustration.small : $size === 'large' ? tokensJson.component.emptyState.illustration.large : tokensJson.component.emptyState.illustration.medium;
|
|
4491
4714
|
}, function (_a) {
|
|
4492
4715
|
var $size = _a.$size;
|
|
4493
|
-
return $size === 'small' ?
|
|
4494
|
-
}, semantic$
|
|
4716
|
+
return $size === 'small' ? tokensJson.component.emptyState.illustration.small : $size === 'large' ? tokensJson.component.emptyState.illustration.large : tokensJson.component.emptyState.illustration.medium;
|
|
4717
|
+
}, semantic$6.spacing.layout['2xl'], function (_a) {
|
|
4495
4718
|
var $variant = _a.$variant;
|
|
4496
|
-
return $variant === 'error' ? semantic$
|
|
4719
|
+
return $variant === 'error' ? semantic$6.color.icon.error : $variant === 'success' ? semantic$6.color.icon.success : semantic$6.color.icon.subdued;
|
|
4497
4720
|
});
|
|
4498
4721
|
var StyledTextContainer = styled.div.withConfig({
|
|
4499
4722
|
displayName: "EmptyState__StyledTextContainer",
|
|
4500
4723
|
componentId: "sc-1u5hxh-2"
|
|
4501
|
-
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width:
|
|
4724
|
+
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width: ", ";\n margin-bottom: ", ";\n"], ["\n max-width: ", ";\n margin-bottom: ", ";\n"
|
|
4502
4725
|
// Map illustration type to icon name
|
|
4503
|
-
])), semantic$
|
|
4726
|
+
])), tokensJson.component.emptyState.text.maxWidth, semantic$6.spacing.layout['2xl']);
|
|
4504
4727
|
// Map illustration type to icon name
|
|
4505
4728
|
var illustrationToIcon = {
|
|
4506
4729
|
search: 'search',
|
|
@@ -4555,7 +4778,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4555
4778
|
children: title
|
|
4556
4779
|
}), jsx("div", {
|
|
4557
4780
|
style: {
|
|
4558
|
-
marginTop: semantic$
|
|
4781
|
+
marginTop: semantic$6.spacing.layout.md
|
|
4559
4782
|
},
|
|
4560
4783
|
children: jsx(Typography, {
|
|
4561
4784
|
variant: "body",
|
|
@@ -4565,7 +4788,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4565
4788
|
})]
|
|
4566
4789
|
}), (action || secondaryAction) && jsx(Box, {
|
|
4567
4790
|
width: "100%",
|
|
4568
|
-
maxWidth:
|
|
4791
|
+
maxWidth: tokensJson.component.emptyState.actions.maxWidth,
|
|
4569
4792
|
children: jsxs(Stack, {
|
|
4570
4793
|
direction: "column",
|
|
4571
4794
|
gap: "sm",
|
|
@@ -4587,25 +4810,25 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4587
4810
|
};
|
|
4588
4811
|
var templateObject_1$f, templateObject_2$d, templateObject_3$c;
|
|
4589
4812
|
|
|
4590
|
-
var _a$1 = tokensJson.
|
|
4591
|
-
spacing$1 = _a$1.spacing,
|
|
4813
|
+
var _a$1 = tokensJson.semantic,
|
|
4814
|
+
spacing$1 = _a$1.spacing.layout,
|
|
4592
4815
|
border$2 = _a$1.border;
|
|
4593
4816
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
4594
4817
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
4595
4818
|
componentId: "sc-1mi4lso-0"
|
|
4596
|
-
})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition:
|
|
4819
|
+
})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition: opacity ", " ", ";\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n a {\n text-decoration: none;\n }\n"], ["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition: opacity ", " ", ";\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n a {\n text-decoration: none;\n }\n"])), tokensJson.semantic.breakpoint.md, tokensJson.semantic.breakpoint.lg, spacing$1['7xl'], border$2.radius['2xl'], tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeOut);
|
|
4597
4820
|
var ImageWrapper = styled.div.withConfig({
|
|
4598
4821
|
displayName: "FeatureBlock__ImageWrapper",
|
|
4599
4822
|
componentId: "sc-1mi4lso-1"
|
|
4600
|
-
})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n grid-column: span 12;\n\n @media (min-width: ", ") {\n grid-column: span 6;\n }\n"], ["\n grid-column: span 12;\n\n @media (min-width: ", ") {\n grid-column: span 6;\n }\n"])), tokensJson.
|
|
4823
|
+
})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n grid-column: span 12;\n\n @media (min-width: ", ") {\n grid-column: span 6;\n }\n"], ["\n grid-column: span 12;\n\n @media (min-width: ", ") {\n grid-column: span 6;\n }\n"])), tokensJson.semantic.breakpoint.lg);
|
|
4601
4824
|
var ContentSection = styled.div.withConfig({
|
|
4602
4825
|
displayName: "FeatureBlock__ContentSection",
|
|
4603
4826
|
componentId: "sc-1mi4lso-2"
|
|
4604
|
-
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n grid-column: span 12;\n margin-top: ", ";\n\n @media (min-width: ", ") {\n grid-column: span 6;\n margin-top: 0;\n padding-right: ", ";\n }\n\n @media (min-width: ", ") {\n padding-right: ", ";\n }\n"], ["\n grid-column: span 12;\n margin-top: ", ";\n\n @media (min-width: ", ") {\n grid-column: span 6;\n margin-top: 0;\n padding-right: ", ";\n }\n\n @media (min-width: ", ") {\n padding-right: ", ";\n }\n"])), spacing$1[
|
|
4827
|
+
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n grid-column: span 12;\n margin-top: ", ";\n\n @media (min-width: ", ") {\n grid-column: span 6;\n margin-top: 0;\n padding-right: ", ";\n }\n\n @media (min-width: ", ") {\n padding-right: ", ";\n }\n"], ["\n grid-column: span 12;\n margin-top: ", ";\n\n @media (min-width: ", ") {\n grid-column: span 6;\n margin-top: 0;\n padding-right: ", ";\n }\n\n @media (min-width: ", ") {\n padding-right: ", ";\n }\n"])), spacing$1['2xl'], tokensJson.semantic.breakpoint.lg, spacing$1['4xl'], tokensJson.semantic.breakpoint.xl, spacing$1['11xl']);
|
|
4605
4828
|
var ButtonWrapper = styled.div.withConfig({
|
|
4606
4829
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
4607
4830
|
componentId: "sc-1mi4lso-3"
|
|
4608
|
-
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1
|
|
4831
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1.lg);
|
|
4609
4832
|
var ContentWrapper = styled.div.withConfig({
|
|
4610
4833
|
displayName: "FeatureBlock__ContentWrapper",
|
|
4611
4834
|
componentId: "sc-1mi4lso-4"
|
|
@@ -4620,9 +4843,11 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
4620
4843
|
onReadMore = _a.onReadMore,
|
|
4621
4844
|
readMoreHref = _a.readMoreHref,
|
|
4622
4845
|
_c = _a.readMoreText,
|
|
4623
|
-
readMoreText = _c === void 0 ? "Read more" : _c
|
|
4846
|
+
readMoreText = _c === void 0 ? "Read more" : _c,
|
|
4847
|
+
dataTestId = _a["data-testid"];
|
|
4624
4848
|
return jsxs(Fragment, {
|
|
4625
4849
|
children: [jsxs(FeatureBlockStyled, {
|
|
4850
|
+
"data-testid": dataTestId,
|
|
4626
4851
|
children: [jsx(ImageWrapper, {
|
|
4627
4852
|
children: jsx(Picture, {
|
|
4628
4853
|
title: title,
|
|
@@ -4668,15 +4893,18 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
4668
4893
|
};
|
|
4669
4894
|
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
|
|
4670
4895
|
|
|
4671
|
-
var _a = tokensJson.
|
|
4672
|
-
|
|
4673
|
-
|
|
4896
|
+
var _a = tokensJson.semantic,
|
|
4897
|
+
color$1 = _a.color,
|
|
4898
|
+
border$1 = _a.border,
|
|
4674
4899
|
zIndex = _a.zIndex,
|
|
4675
|
-
|
|
4676
|
-
|
|
4677
|
-
|
|
4678
|
-
|
|
4679
|
-
input$1 =
|
|
4900
|
+
elevation$1 = _a.elevation,
|
|
4901
|
+
motion$1 = _a.motion,
|
|
4902
|
+
spacing = _a.spacing.layout,
|
|
4903
|
+
_b = tokensJson.component,
|
|
4904
|
+
input$1 = _b.input,
|
|
4905
|
+
field$3 = _b.field;
|
|
4906
|
+
var duration = motion$1.duration,
|
|
4907
|
+
easing = motion$1.easing;
|
|
4680
4908
|
var DropdownContainer = styled.div.withConfig({
|
|
4681
4909
|
displayName: "Dropdown__DropdownContainer",
|
|
4682
4910
|
componentId: "sc-kz07c4-0"
|
|
@@ -4687,10 +4915,10 @@ var DropdownTrigger = styled.button.withConfig({
|
|
|
4687
4915
|
},
|
|
4688
4916
|
displayName: "Dropdown__DropdownTrigger",
|
|
4689
4917
|
componentId: "sc-kz07c4-1"
|
|
4690
|
-
})(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
|
|
4918
|
+
})(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: ", ";\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: ", ";\n }\n \n ", "\n"])), input$1["default"].paddingY, input$1["default"].paddingX, input$1["default"].backgroundColor, input$1["default"].borderWidth, function (_a) {
|
|
4691
4919
|
var $hasError = _a.$hasError;
|
|
4692
4920
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
4693
|
-
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
4921
|
+
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, duration.normal, easing.easeInOut, duration.normal, easing.easeInOut, function (_a) {
|
|
4694
4922
|
var $hasError = _a.$hasError;
|
|
4695
4923
|
return $hasError ? input$1.error.hover.borderColor : input$1.hover.borderColor;
|
|
4696
4924
|
}, function (_a) {
|
|
@@ -4707,17 +4935,17 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
4707
4935
|
},
|
|
4708
4936
|
displayName: "Dropdown__DropdownIcon",
|
|
4709
4937
|
componentId: "sc-kz07c4-2"
|
|
4710
|
-
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-left: ", ";\n transition: transform
|
|
4938
|
+
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-left: ", ";\n transition: transform ", " ", ";\n \n ", "\n\n ", " {\n transition: none;\n }\n"], ["\n display: flex;\n align-items: center;\n margin-left: ", ";\n transition: transform ", " ", ";\n \n ", "\n\n ", " {\n transition: none;\n }\n"])), spacing.sm, duration.fast, easing.easeOut, function (_a) {
|
|
4711
4939
|
var $isOpen = _a.$isOpen;
|
|
4712
4940
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
4713
|
-
});
|
|
4941
|
+
}, reducedMotion);
|
|
4714
4942
|
var DropdownMenu = styled.div.withConfig({
|
|
4715
4943
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4716
4944
|
return !prop.startsWith('$');
|
|
4717
4945
|
},
|
|
4718
4946
|
displayName: "Dropdown__DropdownMenu",
|
|
4719
4947
|
componentId: "sc-kz07c4-3"
|
|
4720
|
-
})(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 border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all
|
|
4948
|
+
})(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 border: ", " solid ", ";\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 border: ", " solid ", ";\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, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, elevation$1.floating, spacing.xs, function (_a) {
|
|
4721
4949
|
var $isOpen = _a.$isOpen;
|
|
4722
4950
|
return $isOpen ? 1 : 0;
|
|
4723
4951
|
}, function (_a) {
|
|
@@ -4725,28 +4953,28 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
4725
4953
|
return $isOpen ? 'visible' : 'hidden';
|
|
4726
4954
|
}, function (_a) {
|
|
4727
4955
|
var $isOpen = _a.$isOpen;
|
|
4728
|
-
return $isOpen ? 'translateY(0)' :
|
|
4729
|
-
});
|
|
4956
|
+
return $isOpen ? 'translateY(0)' : "translateY(-".concat(spacing.sm, ")");
|
|
4957
|
+
}, duration.fast, easing.easeOut, tokensJson.semantic.size.menu.maxHeight, reducedMotion);
|
|
4730
4958
|
var DropdownOption = styled.button.withConfig({
|
|
4731
4959
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4732
4960
|
return !prop.startsWith('$');
|
|
4733
4961
|
},
|
|
4734
4962
|
displayName: "Dropdown__DropdownOption",
|
|
4735
4963
|
componentId: "sc-kz07c4-4"
|
|
4736
|
-
})(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
|
|
4964
|
+
})(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, input$1["default"].paddingX, function (_a) {
|
|
4737
4965
|
var $isSelected = _a.$isSelected,
|
|
4738
4966
|
$isFocused = _a.$isFocused;
|
|
4739
4967
|
if ($isFocused) return color$1.background.surface;
|
|
4740
4968
|
if ($isSelected) return color$1.background.surface;
|
|
4741
4969
|
return 'transparent';
|
|
4742
|
-
}, input$1["default"].font, input$1["default"].textColor, color$1.background.surface, color$1.background.surface, border$1.subtle);
|
|
4970
|
+
}, input$1["default"].font, input$1["default"].textColor, duration.fast, easing.easeOut, color$1.background.surface, color$1.background.surface, border$1.subtle);
|
|
4743
4971
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
4744
4972
|
displayName: "Dropdown__StyledHelperText",
|
|
4745
4973
|
componentId: "sc-kz07c4-5"
|
|
4746
|
-
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography
|
|
4974
|
+
})(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) {
|
|
4747
4975
|
var $hasError = _a.$hasError;
|
|
4748
|
-
return $hasError ?
|
|
4749
|
-
},
|
|
4976
|
+
return $hasError ? field$3.helperText.colorError : field$3.helperText.color;
|
|
4977
|
+
}, field$3.gap);
|
|
4750
4978
|
var Dropdown = function Dropdown(_a) {
|
|
4751
4979
|
var options = _a.options,
|
|
4752
4980
|
value = _a.value,
|
|
@@ -4758,7 +4986,8 @@ var Dropdown = function Dropdown(_a) {
|
|
|
4758
4986
|
className = _a.className,
|
|
4759
4987
|
label = _a.label,
|
|
4760
4988
|
helperText = _a.helperText,
|
|
4761
|
-
error = _a.error
|
|
4989
|
+
error = _a.error,
|
|
4990
|
+
dataTestId = _a["data-testid"];
|
|
4762
4991
|
var _d = useState(false),
|
|
4763
4992
|
isOpen = _d[0],
|
|
4764
4993
|
setIsOpen = _d[1];
|
|
@@ -4863,11 +5092,12 @@ var Dropdown = function Dropdown(_a) {
|
|
|
4863
5092
|
return jsxs(DropdownContainer, {
|
|
4864
5093
|
ref: dropdownRef,
|
|
4865
5094
|
className: className,
|
|
5095
|
+
"data-testid": dataTestId,
|
|
4866
5096
|
children: [label && jsx("label", {
|
|
4867
5097
|
htmlFor: dropdownId,
|
|
4868
5098
|
style: {
|
|
4869
5099
|
display: 'block',
|
|
4870
|
-
marginBottom:
|
|
5100
|
+
marginBottom: field$3.gap
|
|
4871
5101
|
},
|
|
4872
5102
|
children: jsx(Typography, {
|
|
4873
5103
|
variant: "label",
|
|
@@ -4922,7 +5152,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
4922
5152
|
};
|
|
4923
5153
|
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
|
|
4924
5154
|
|
|
4925
|
-
var semantic$
|
|
5155
|
+
var semantic$5 = tokensJson.semantic;
|
|
4926
5156
|
var StyledList = styled.ul.withConfig({
|
|
4927
5157
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4928
5158
|
return !prop.startsWith('$');
|
|
@@ -4931,7 +5161,7 @@ var StyledList = styled.ul.withConfig({
|
|
|
4931
5161
|
componentId: "sc-1irksg5-0"
|
|
4932
5162
|
})(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) {
|
|
4933
5163
|
var $dividers = _a.$dividers;
|
|
4934
|
-
return $dividers && "\n > li:not(:last-child) {\n border-bottom:
|
|
5164
|
+
return $dividers && "\n > li:not(:last-child) {\n border-bottom: ".concat(semantic$5.border.width.thin, " solid ").concat(semantic$5.color.border["default"], ";\n }\n ");
|
|
4935
5165
|
});
|
|
4936
5166
|
var List = function List(_a) {
|
|
4937
5167
|
var children = _a.children,
|
|
@@ -4955,20 +5185,19 @@ var List = function List(_a) {
|
|
|
4955
5185
|
List.displayName = 'List';
|
|
4956
5186
|
var templateObject_1$c;
|
|
4957
5187
|
|
|
4958
|
-
var semantic$
|
|
4959
|
-
|
|
4960
|
-
|
|
4961
|
-
|
|
4962
|
-
|
|
4963
|
-
|
|
4964
|
-
semantic$7.motion;
|
|
5188
|
+
var semantic$4 = tokensJson.semantic;
|
|
5189
|
+
var layout = semantic$4.spacing.layout,
|
|
5190
|
+
color = semantic$4.color,
|
|
5191
|
+
border = semantic$4.border,
|
|
5192
|
+
elevation = semantic$4.elevation,
|
|
5193
|
+
motion = semantic$4.motion;
|
|
4965
5194
|
// ---------------------------------------------------------------------------
|
|
4966
5195
|
// Size map
|
|
4967
5196
|
// ---------------------------------------------------------------------------
|
|
4968
5197
|
var sizeToWidth = {
|
|
4969
|
-
small:
|
|
4970
|
-
medium:
|
|
4971
|
-
large:
|
|
5198
|
+
small: tokensJson.semantic.size.overlay.sm,
|
|
5199
|
+
medium: tokensJson.semantic.size.overlay.md,
|
|
5200
|
+
large: tokensJson.semantic.size.overlay.lg
|
|
4972
5201
|
};
|
|
4973
5202
|
// ---------------------------------------------------------------------------
|
|
4974
5203
|
// Animations
|
|
@@ -4985,17 +5214,29 @@ var scaleIn = keyframes(templateObject_2$a || (templateObject_2$a = __makeTempla
|
|
|
4985
5214
|
var StyledOverlay$1 = styled.div.withConfig({
|
|
4986
5215
|
displayName: "Modal__StyledOverlay",
|
|
4987
5216
|
componentId: "sc-1d3g5gh-0"
|
|
4988
|
-
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color:
|
|
5217
|
+
})(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$4.zIndex.modal, css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5218
|
+
var $isExiting = _a.$isExiting;
|
|
5219
|
+
return $isExiting && exitAnimation;
|
|
5220
|
+
}));
|
|
4989
5221
|
var StyledDialog = styled.div.withConfig({
|
|
4990
5222
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4991
5223
|
return !prop.startsWith('$');
|
|
4992
5224
|
},
|
|
4993
5225
|
displayName: "Modal__StyledDialog",
|
|
4994
5226
|
componentId: "sc-1d3g5gh-1"
|
|
4995
|
-
})(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:
|
|
5227
|
+
})(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$4.zIndex.modal, function (_a) {
|
|
4996
5228
|
var $width = _a.$width;
|
|
4997
5229
|
return $width;
|
|
4998
|
-
}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", "
|
|
5230
|
+
}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5231
|
+
var $isExiting = _a.$isExiting;
|
|
5232
|
+
return $isExiting && exitAnimation;
|
|
5233
|
+
}), reducedMotion, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5234
|
+
var $isExiting = _a.$isExiting;
|
|
5235
|
+
return $isExiting && exitAnimation;
|
|
5236
|
+
}, semantic$4.breakpoint.md, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5237
|
+
var $isExiting = _a.$isExiting;
|
|
5238
|
+
return $isExiting && exitAnimation;
|
|
5239
|
+
});
|
|
4999
5240
|
var StyledHeader = styled.div.withConfig({
|
|
5000
5241
|
displayName: "Modal__StyledHeader",
|
|
5001
5242
|
componentId: "sc-1d3g5gh-2"
|
|
@@ -5003,7 +5244,7 @@ var StyledHeader = styled.div.withConfig({
|
|
|
5003
5244
|
var StyledBody = styled.div.withConfig({
|
|
5004
5245
|
displayName: "Modal__StyledBody",
|
|
5005
5246
|
componentId: "sc-1d3g5gh-3"
|
|
5006
|
-
})(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,
|
|
5247
|
+
})(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$4.spacing.layout.sm, color.background.surface, color.border["default"], border.radius.circle, color.border.strong);
|
|
5007
5248
|
var StyledFooter = styled.div.withConfig({
|
|
5008
5249
|
displayName: "Modal__StyledFooter",
|
|
5009
5250
|
componentId: "sc-1d3g5gh-4"
|
|
@@ -5057,6 +5298,10 @@ var Modal = function Modal(_a) {
|
|
|
5057
5298
|
ariaDescribedBy = _a["aria-describedby"];
|
|
5058
5299
|
var dialogRef = useRef(null);
|
|
5059
5300
|
var previousFocusRef = useRef(null);
|
|
5301
|
+
var _e = usePresence(isOpen),
|
|
5302
|
+
isPresent = _e.isPresent,
|
|
5303
|
+
isExiting = _e.isExiting;
|
|
5304
|
+
useInert(dialogRef, isExiting);
|
|
5060
5305
|
// -----------------------------------------------------------------------
|
|
5061
5306
|
// Focus & scroll-lock management
|
|
5062
5307
|
// -----------------------------------------------------------------------
|
|
@@ -5108,19 +5353,22 @@ var Modal = function Modal(_a) {
|
|
|
5108
5353
|
// Overlay click
|
|
5109
5354
|
// -----------------------------------------------------------------------
|
|
5110
5355
|
var handleOverlayClick = function handleOverlayClick(event) {
|
|
5111
|
-
|
|
5356
|
+
// While exiting, the backdrop still catches clicks but doesn't close again
|
|
5357
|
+
if (!isExiting && closeOnOverlayClick && event.target === event.currentTarget) {
|
|
5112
5358
|
onClose();
|
|
5113
5359
|
}
|
|
5114
5360
|
};
|
|
5115
5361
|
// -----------------------------------------------------------------------
|
|
5116
5362
|
// Render
|
|
5117
5363
|
// -----------------------------------------------------------------------
|
|
5118
|
-
|
|
5364
|
+
// Stays mounted while the exit fade runs, hidden from assistive technology
|
|
5365
|
+
if (!isPresent) return null;
|
|
5119
5366
|
var titleId = dataTestId ? "".concat(dataTestId, "-title") : 'modal-title';
|
|
5120
5367
|
var width = sizeToWidth[size];
|
|
5121
5368
|
var modal = jsxs(Fragment, {
|
|
5122
5369
|
children: [jsx(StyledOverlay$1, {
|
|
5123
5370
|
onClick: handleOverlayClick,
|
|
5371
|
+
"$isExiting": isExiting,
|
|
5124
5372
|
"data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'modal-overlay'
|
|
5125
5373
|
}), jsxs(StyledDialog, {
|
|
5126
5374
|
ref: dialogRef,
|
|
@@ -5129,8 +5377,10 @@ var Modal = function Modal(_a) {
|
|
|
5129
5377
|
"aria-label": ariaLabel || title,
|
|
5130
5378
|
"aria-labelledby": titleId,
|
|
5131
5379
|
"aria-describedby": ariaDescribedBy,
|
|
5380
|
+
"aria-hidden": isExiting || undefined,
|
|
5132
5381
|
tabIndex: -1,
|
|
5133
5382
|
"$width": width,
|
|
5383
|
+
"$isExiting": isExiting,
|
|
5134
5384
|
onKeyDown: handleKeyDown,
|
|
5135
5385
|
"data-testid": dataTestId,
|
|
5136
5386
|
children: [jsxs(StyledHeader, {
|
|
@@ -5185,7 +5435,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
5185
5435
|
},
|
|
5186
5436
|
displayName: "InputBase__StyledInputBase",
|
|
5187
5437
|
componentId: "sc-1bpf4e8-0"
|
|
5188
|
-
})(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
|
|
5438
|
+
})(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: ", ";\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: ", ";\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"
|
|
5189
5439
|
/**
|
|
5190
5440
|
* Base styled textarea with shared styling
|
|
5191
5441
|
*/])), input["default"].font, function (_a) {
|
|
@@ -5200,7 +5450,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
5200
5450
|
if ($disabled) return input.disabled.borderColor;
|
|
5201
5451
|
if ($hasError) return input.error.borderColor;
|
|
5202
5452
|
return input["default"].borderColor;
|
|
5203
|
-
}, input["default"].borderRadius, input.placeholder.textColor, function (_a) {
|
|
5453
|
+
}, input["default"].borderRadius, tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut, tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeInOut, input.placeholder.textColor, function (_a) {
|
|
5204
5454
|
var $hasError = _a.$hasError;
|
|
5205
5455
|
return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
|
|
5206
5456
|
}, input.focus.outline, input.focus.outlineOffset, function (_a) {
|
|
@@ -5216,23 +5466,22 @@ var StyledTextAreaBase = styled.textarea.withConfig({
|
|
|
5216
5466
|
},
|
|
5217
5467
|
displayName: "InputBase__StyledTextAreaBase",
|
|
5218
5468
|
componentId: "sc-1bpf4e8-1"
|
|
5219
|
-
})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height:
|
|
5469
|
+
})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: ", ";\n resize: vertical;\n font-family: inherit;\n line-height: ", ";\n"], ["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: ", ";\n resize: vertical;\n font-family: inherit;\n line-height: ", ";\n"])), StyledInputBase, tokensJson.component.input.textarea.minHeight, tokensJson.semantic.lineHeight.normal);
|
|
5220
5470
|
var templateObject_1$a, templateObject_2$9;
|
|
5221
5471
|
|
|
5222
|
-
var
|
|
5223
|
-
base$6 = tokensJson.base;
|
|
5472
|
+
var field$2 = tokensJson.component.field;
|
|
5224
5473
|
var StyledFieldContainer$2 = styled.div.withConfig({
|
|
5225
5474
|
displayName: "NumberInput__StyledFieldContainer",
|
|
5226
5475
|
componentId: "sc-qotc3w-0"
|
|
5227
|
-
})(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"])),
|
|
5476
|
+
})(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"])), field$2.gap);
|
|
5228
5477
|
var StyledLabel$3 = styled.label.withConfig({
|
|
5229
5478
|
displayName: "NumberInput__StyledLabel",
|
|
5230
5479
|
componentId: "sc-qotc3w-1"
|
|
5231
|
-
})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n
|
|
5480
|
+
})(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"])), field$2.label.gap, field$2.label.typography, field$2.label.color, field$2.label.colorDisabled);
|
|
5232
5481
|
var StyledRequiredIndicator$2 = styled.span.withConfig({
|
|
5233
5482
|
displayName: "NumberInput__StyledRequiredIndicator",
|
|
5234
5483
|
componentId: "sc-qotc3w-2"
|
|
5235
|
-
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])),
|
|
5484
|
+
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), field$2.requiredIndicator.color, field$2.requiredIndicator.fontWeight);
|
|
5236
5485
|
var StyledInputWrapper$2 = styled.div.withConfig({
|
|
5237
5486
|
displayName: "NumberInput__StyledInputWrapper",
|
|
5238
5487
|
componentId: "sc-qotc3w-3"
|
|
@@ -5240,11 +5489,11 @@ var StyledInputWrapper$2 = styled.div.withConfig({
|
|
|
5240
5489
|
var StyledNumberInput = styled(StyledInputBase).withConfig({
|
|
5241
5490
|
displayName: "NumberInput__StyledNumberInput",
|
|
5242
5491
|
componentId: "sc-qotc3w-4"
|
|
5243
|
-
})(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"], ["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"])),
|
|
5492
|
+
})(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"], ["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"])), tokensJson.semantic.spacing.layout['6xl']);
|
|
5244
5493
|
var StyledStepperContainer = styled.div.withConfig({
|
|
5245
5494
|
displayName: "NumberInput__StyledStepperContainer",
|
|
5246
5495
|
componentId: "sc-qotc3w-5"
|
|
5247
|
-
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"], ["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"])),
|
|
5496
|
+
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"], ["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"])), tokensJson.semantic.spacing.layout.sm, tokensJson.semantic.spacing.layout.sm);
|
|
5248
5497
|
var StyledHelperText$2 = styled.div.withConfig({
|
|
5249
5498
|
displayName: "NumberInput__StyledHelperText",
|
|
5250
5499
|
componentId: "sc-qotc3w-6"
|
|
@@ -5271,9 +5520,9 @@ var StyledHelperText$2 = styled.div.withConfig({
|
|
|
5271
5520
|
* onChange={(newValue) => setValue(newValue)}
|
|
5272
5521
|
* />
|
|
5273
5522
|
* ```
|
|
5274
|
-
*/])),
|
|
5523
|
+
*/])), field$2.helperText.typography, function (_a) {
|
|
5275
5524
|
var $isError = _a.$isError;
|
|
5276
|
-
return $isError ?
|
|
5525
|
+
return $isError ? field$2.helperText.colorError : field$2.helperText.color;
|
|
5277
5526
|
});
|
|
5278
5527
|
/**
|
|
5279
5528
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
@@ -5480,10 +5729,36 @@ var PageTitleStyled = styled.div.withConfig({
|
|
|
5480
5729
|
},
|
|
5481
5730
|
displayName: "PageTitle__PageTitleStyled",
|
|
5482
5731
|
componentId: "sc-16h256f-0"
|
|
5483
|
-
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"
|
|
5732
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"
|
|
5733
|
+
/**
|
|
5734
|
+
* @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
|
|
5735
|
+
* and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
|
|
5736
|
+
*
|
|
5737
|
+
* ```tsx
|
|
5738
|
+
* <Stack direction="column" gap="md">
|
|
5739
|
+
* <Typography variant="h1">{title}</Typography>
|
|
5740
|
+
* <Typography variant="caption" color="subdued">{subtitle}</Typography>
|
|
5741
|
+
* </Stack>
|
|
5742
|
+
* ```
|
|
5743
|
+
*
|
|
5744
|
+
* For a back link, add an `IconButton` with your own `url` and `aria-label`.
|
|
5745
|
+
*/])), tokensJson.semantic.spacing.layout['2xl'], function (_a) {
|
|
5484
5746
|
var $hasBackButton = _a.$hasBackButton;
|
|
5485
|
-
return $hasBackButton ? tokensJson.
|
|
5747
|
+
return $hasBackButton ? tokensJson.semantic.spacing.layout.none : tokensJson.semantic.spacing.layout['7xl'];
|
|
5486
5748
|
});
|
|
5749
|
+
/**
|
|
5750
|
+
* @deprecated PageTitle is a leftover from the personal site (its back button always links to `/music`)
|
|
5751
|
+
* and will be removed in the next major version. Compose a page title from `Typography` in a `Stack`:
|
|
5752
|
+
*
|
|
5753
|
+
* ```tsx
|
|
5754
|
+
* <Stack direction="column" gap="md">
|
|
5755
|
+
* <Typography variant="h1">{title}</Typography>
|
|
5756
|
+
* <Typography variant="caption" color="subdued">{subtitle}</Typography>
|
|
5757
|
+
* </Stack>
|
|
5758
|
+
* ```
|
|
5759
|
+
*
|
|
5760
|
+
* For a back link, add an `IconButton` with your own `url` and `aria-label`.
|
|
5761
|
+
*/
|
|
5487
5762
|
var PageTitle = function PageTitle(_a) {
|
|
5488
5763
|
var title = _a.title,
|
|
5489
5764
|
_b = _a.hasBackButton,
|
|
@@ -5513,26 +5788,25 @@ var PageTitle = function PageTitle(_a) {
|
|
|
5513
5788
|
};
|
|
5514
5789
|
var templateObject_1$8;
|
|
5515
5790
|
|
|
5516
|
-
var
|
|
5517
|
-
base$5 = tokensJson.base;
|
|
5791
|
+
var field$1 = tokensJson.component.field;
|
|
5518
5792
|
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
5519
5793
|
displayName: "PasswordField__StyledFieldContainer",
|
|
5520
5794
|
componentId: "sc-1p15zk0-0"
|
|
5521
|
-
})(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"])),
|
|
5795
|
+
})(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"])), field$1.gap);
|
|
5522
5796
|
var StyledLabel$2 = styled.label.withConfig({
|
|
5523
5797
|
displayName: "PasswordField__StyledLabel",
|
|
5524
5798
|
componentId: "sc-1p15zk0-1"
|
|
5525
|
-
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n
|
|
5799
|
+
})(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"])), field$1.label.gap, field$1.label.typography, field$1.label.color, field$1.label.colorDisabled);
|
|
5526
5800
|
var StyledRequiredIndicator$1 = styled.span.withConfig({
|
|
5527
5801
|
displayName: "PasswordField__StyledRequiredIndicator",
|
|
5528
5802
|
componentId: "sc-1p15zk0-2"
|
|
5529
|
-
})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])),
|
|
5803
|
+
})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), field$1.requiredIndicator.color, field$1.requiredIndicator.fontWeight);
|
|
5530
5804
|
var StyledHelperText$1 = styled.div.withConfig({
|
|
5531
5805
|
displayName: "PasswordField__StyledHelperText",
|
|
5532
5806
|
componentId: "sc-1p15zk0-3"
|
|
5533
|
-
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])),
|
|
5807
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), field$1.helperText.typography, function (_a) {
|
|
5534
5808
|
var $hasError = _a.$hasError;
|
|
5535
|
-
return $hasError ?
|
|
5809
|
+
return $hasError ? field$1.helperText.colorError : field$1.helperText.color;
|
|
5536
5810
|
});
|
|
5537
5811
|
var StyledInputWrapper$1 = styled.div.withConfig({
|
|
5538
5812
|
displayName: "PasswordField__StyledInputWrapper",
|
|
@@ -5553,7 +5827,7 @@ var StyledToggleButton = styled.div.withConfig({
|
|
|
5553
5827
|
* required
|
|
5554
5828
|
* />
|
|
5555
5829
|
* ```
|
|
5556
|
-
*/])),
|
|
5830
|
+
*/])), tokensJson.semantic.spacing.layout.sm);
|
|
5557
5831
|
/**
|
|
5558
5832
|
* PasswordField component for secure password input with visibility toggle
|
|
5559
5833
|
*
|
|
@@ -5646,8 +5920,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
5646
5920
|
PasswordField.displayName = 'PasswordField';
|
|
5647
5921
|
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$4;
|
|
5648
5922
|
|
|
5649
|
-
var semantic$
|
|
5650
|
-
base$4 = tokensJson.base,
|
|
5923
|
+
var semantic$3 = tokensJson.semantic,
|
|
5651
5924
|
component = tokensJson.component;
|
|
5652
5925
|
var StyledSearchContainer = styled.div.withConfig({
|
|
5653
5926
|
displayName: "SearchField__StyledSearchContainer",
|
|
@@ -5656,7 +5929,7 @@ var StyledSearchContainer = styled.div.withConfig({
|
|
|
5656
5929
|
var StyledInputWrapper = styled.div.withConfig({
|
|
5657
5930
|
displayName: "SearchField__StyledInputWrapper",
|
|
5658
5931
|
componentId: "sc-qhz9i8-1"
|
|
5659
|
-
})(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
|
|
5932
|
+
})(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) {
|
|
5660
5933
|
return props.$isFocused && "\n border-color: ".concat(component.input.focus.borderColor, ";\n outline: ").concat(component.input.focus.outline, ";\n outline-offset: ").concat(component.input.focus.outlineOffset, ";\n ");
|
|
5661
5934
|
}, function (props) {
|
|
5662
5935
|
return props.$disabled && "\n background-color: ".concat(component.input.disabled.backgroundColor, ";\n border-color: ").concat(component.input.disabled.borderColor, ";\n cursor: not-allowed;\n ");
|
|
@@ -5664,15 +5937,15 @@ var StyledInputWrapper = styled.div.withConfig({
|
|
|
5664
5937
|
var StyledInput = styled.input.withConfig({
|
|
5665
5938
|
displayName: "SearchField__StyledInput",
|
|
5666
5939
|
componentId: "sc-qhz9i8-2"
|
|
5667
|
-
})(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$
|
|
5940
|
+
})(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"], semantic$3.color.text.subdued, semantic$3.color.text.disabled);
|
|
5668
5941
|
var StyledSuggestionsList = styled.ul.withConfig({
|
|
5669
5942
|
displayName: "SearchField__StyledSuggestionsList",
|
|
5670
5943
|
componentId: "sc-qhz9i8-3"
|
|
5671
|
-
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height:
|
|
5944
|
+
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: ", ";\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: ", ";\n"], ["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: ", ";\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: ", ";\n"])), semantic$3.spacing.layout.xs, tokensJson.semantic.size.menu.maxHeight, semantic$3.color.background.subtle, semantic$3.border.width.thin, semantic$3.color.border["default"], semantic$3.border.radius.md, semantic$3.elevation.floating, semantic$3.spacing.layout.xs, semantic$3.zIndex.dropdown);
|
|
5672
5945
|
var StyledSectionHeader = styled.div.withConfig({
|
|
5673
5946
|
displayName: "SearchField__StyledSectionHeader",
|
|
5674
5947
|
componentId: "sc-qhz9i8-4"
|
|
5675
|
-
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"], ["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"])),
|
|
5948
|
+
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"], ["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"])), semantic$3.spacing.layout.sm, semantic$3.spacing.layout.md, tokensJson.component.searchField.sectionHeader.typography, semantic$3.color.text.subdued, tokensJson.component.searchField.sectionHeader.letterSpacing);
|
|
5676
5949
|
var debounce = function debounce(func, wait) {
|
|
5677
5950
|
var timeout = null;
|
|
5678
5951
|
return function () {
|
|
@@ -5975,8 +6248,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
5975
6248
|
SearchField.displayName = 'SearchField';
|
|
5976
6249
|
var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4;
|
|
5977
6250
|
|
|
5978
|
-
var semantic$
|
|
5979
|
-
base$3 = tokensJson.base;
|
|
6251
|
+
var semantic$2 = tokensJson.semantic;
|
|
5980
6252
|
// Fade in animation for overlay
|
|
5981
6253
|
var fadeIn = keyframes(templateObject_1$5 || (templateObject_1$5 = __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"
|
|
5982
6254
|
// Slide animations for each position
|
|
@@ -5992,35 +6264,50 @@ var StyledOverlay = styled.div.withConfig({
|
|
|
5992
6264
|
},
|
|
5993
6265
|
displayName: "Sheet__StyledOverlay",
|
|
5994
6266
|
componentId: "sc-8abisx-0"
|
|
5995
|
-
})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color:
|
|
5996
|
-
var $
|
|
5997
|
-
return $
|
|
5998
|
-
});
|
|
6267
|
+
})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n z-index: ", ";\n ", "\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n z-index: ", ";\n ", "\n"])), semantic$2.color.background.overlay, semantic$2.zIndex.overlay, css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
|
|
6268
|
+
var $isExiting = _a.$isExiting;
|
|
6269
|
+
return $isExiting && exitAnimation;
|
|
6270
|
+
}));
|
|
5999
6271
|
var StyledSheet = styled.div.withConfig({
|
|
6000
6272
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6001
6273
|
return !prop.startsWith('$');
|
|
6002
6274
|
},
|
|
6003
6275
|
displayName: "Sheet__StyledSheet",
|
|
6004
6276
|
componentId: "sc-8abisx-1"
|
|
6005
|
-
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index:
|
|
6277
|
+
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: ", ";\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n\n ", " {\n animation: ", " ", " ", "", ";\n }\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"], ["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: ", ";\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n\n ", " {\n animation: ", " ", " ", "", ";\n }\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), semantic$2.color.background["default"], semantic$2.elevation.overlay, semantic$2.zIndex.overlay, function (_a) {
|
|
6006
6278
|
var $position = _a.$position,
|
|
6007
6279
|
$variant = _a.$variant,
|
|
6008
6280
|
$width = _a.$width,
|
|
6009
6281
|
$height = _a.$height;
|
|
6010
6282
|
var isDrawer = $variant === 'drawer';
|
|
6011
|
-
var margin = isDrawer ?
|
|
6012
|
-
var borderRadius = isDrawer ?
|
|
6283
|
+
var margin = isDrawer ? semantic$2.spacing.layout.lg : '0';
|
|
6284
|
+
var borderRadius = isDrawer ? semantic$2.border.radius.md : '0';
|
|
6013
6285
|
switch ($position) {
|
|
6014
6286
|
case 'right':
|
|
6015
|
-
return css(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n top: ", ";\n right: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: ", " 0 0 ", ";\n animation: ", "
|
|
6287
|
+
return css(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n top: ", ";\n right: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: ", " 0 0 ", ";\n animation: ", " ", " ", "", ";\n "], ["\n top: ", ";\n right: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: ", " 0 0 ", ";\n animation: ", " ", " ", "", ";\n "])), margin, margin, margin, $width, isDrawer ? "".concat(semantic$2.spacing.layout.lg, " * 2") : '0px', borderRadius, borderRadius, slideInRight, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
|
|
6288
|
+
var $isExiting = _a.$isExiting;
|
|
6289
|
+
return $isExiting && exitAnimation;
|
|
6290
|
+
});
|
|
6016
6291
|
case 'left':
|
|
6017
|
-
return css(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: 0 ", " ", " 0;\n animation: ", "
|
|
6292
|
+
return css(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: 0 ", " ", " 0;\n animation: ", " ", " ", "", ";\n "], ["\n top: ", ";\n left: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: 0 ", " ", " 0;\n animation: ", " ", " ", "", ";\n "])), margin, margin, margin, $width, isDrawer ? "".concat(semantic$2.spacing.layout.lg, " * 2") : '0px', borderRadius, borderRadius, slideInLeft, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
|
|
6293
|
+
var $isExiting = _a.$isExiting;
|
|
6294
|
+
return $isExiting && exitAnimation;
|
|
6295
|
+
});
|
|
6018
6296
|
case 'top':
|
|
6019
|
-
return css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", "
|
|
6297
|
+
return css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " ", " ", "", ";\n "], ["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " ", " ", "", ";\n "])), margin, margin, margin, $height, isDrawer ? "".concat(semantic$2.spacing.layout.lg, " * 2") : '0px', borderRadius, borderRadius, slideInTop, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
|
|
6298
|
+
var $isExiting = _a.$isExiting;
|
|
6299
|
+
return $isExiting && exitAnimation;
|
|
6300
|
+
});
|
|
6020
6301
|
case 'bottom':
|
|
6021
|
-
return css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", "
|
|
6302
|
+
return css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " ", " ", "", ";\n "], ["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " ", " ", "", ";\n "])), margin, margin, margin, $height, isDrawer ? "".concat(semantic$2.spacing.layout.lg, " * 2") : '0px', borderRadius, borderRadius, slideInBottom, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
|
|
6303
|
+
var $isExiting = _a.$isExiting;
|
|
6304
|
+
return $isExiting && exitAnimation;
|
|
6305
|
+
});
|
|
6022
6306
|
}
|
|
6023
|
-
},
|
|
6307
|
+
}, reducedMotion, fadeIn, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
|
|
6308
|
+
var $isExiting = _a.$isExiting;
|
|
6309
|
+
return $isExiting && exitAnimation;
|
|
6310
|
+
}, semantic$2.spacing.layout.sm, semantic$2.color.background.subtle, semantic$2.color.border["default"], semantic$2.border.radius.circle, semantic$2.color.border.strong);
|
|
6024
6311
|
var StyledSheetContent = styled.div.withConfig({
|
|
6025
6312
|
displayName: "Sheet__StyledSheetContent",
|
|
6026
6313
|
componentId: "sc-8abisx-2"
|
|
@@ -6050,7 +6337,7 @@ var StyledSheetContent = styled.div.withConfig({
|
|
|
6050
6337
|
* <h2>Mobile Menu</h2>
|
|
6051
6338
|
* </Sheet>
|
|
6052
6339
|
* ```
|
|
6053
|
-
*/])),
|
|
6340
|
+
*/])), semantic$2.spacing.layout['2xl']);
|
|
6054
6341
|
/**
|
|
6055
6342
|
* Sheet component for side panels and drawers
|
|
6056
6343
|
*
|
|
@@ -6085,9 +6372,9 @@ var Sheet = function Sheet(_a) {
|
|
|
6085
6372
|
_c = _a.variant,
|
|
6086
6373
|
variant = _c === void 0 ? 'sheet' : _c,
|
|
6087
6374
|
_d = _a.width,
|
|
6088
|
-
width = _d === void 0 ?
|
|
6375
|
+
width = _d === void 0 ? tokensJson.semantic.size.overlay.sm : _d,
|
|
6089
6376
|
_e = _a.height,
|
|
6090
|
-
height = _e === void 0 ?
|
|
6377
|
+
height = _e === void 0 ? tokensJson.semantic.size.overlay.sm : _e,
|
|
6091
6378
|
children = _a.children,
|
|
6092
6379
|
_f = _a.closeOnOverlayClick,
|
|
6093
6380
|
closeOnOverlayClick = _f === void 0 ? true : _f,
|
|
@@ -6099,18 +6386,27 @@ var Sheet = function Sheet(_a) {
|
|
|
6099
6386
|
ariaDescribedBy = _a["aria-describedby"];
|
|
6100
6387
|
var sheetRef = useRef(null);
|
|
6101
6388
|
var previousFocusRef = useRef(null);
|
|
6389
|
+
var _h = usePresence(isOpen),
|
|
6390
|
+
isPresent = _h.isPresent,
|
|
6391
|
+
isExiting = _h.isExiting;
|
|
6392
|
+
useInert(sheetRef, isExiting);
|
|
6102
6393
|
// Focus management
|
|
6103
6394
|
useEffect(function () {
|
|
6104
6395
|
if (isOpen) {
|
|
6105
6396
|
// Store previous focus
|
|
6106
6397
|
previousFocusRef.current = document.activeElement;
|
|
6107
6398
|
// Focus sheet
|
|
6108
|
-
setTimeout(function () {
|
|
6399
|
+
var timer_1 = setTimeout(function () {
|
|
6109
6400
|
var _a;
|
|
6110
6401
|
(_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6111
6402
|
}, 100); // Small delay to allow animation to start
|
|
6112
6403
|
// Prevent body scroll
|
|
6113
6404
|
document.body.style.overflow = 'hidden';
|
|
6405
|
+
// A quick close cancels the pending focus, so it can't pull focus back into the exiting sheet
|
|
6406
|
+
return function () {
|
|
6407
|
+
clearTimeout(timer_1);
|
|
6408
|
+
document.body.style.overflow = '';
|
|
6409
|
+
};
|
|
6114
6410
|
} else {
|
|
6115
6411
|
// Restore previous focus
|
|
6116
6412
|
if (previousFocusRef.current) {
|
|
@@ -6147,14 +6443,16 @@ var Sheet = function Sheet(_a) {
|
|
|
6147
6443
|
};
|
|
6148
6444
|
// Overlay click handling
|
|
6149
6445
|
var handleOverlayClick = function handleOverlayClick(event) {
|
|
6150
|
-
|
|
6446
|
+
// While exiting, the backdrop still catches clicks but doesn't close again
|
|
6447
|
+
if (!isExiting && closeOnOverlayClick && event.target === event.currentTarget) {
|
|
6151
6448
|
onClose();
|
|
6152
6449
|
}
|
|
6153
6450
|
};
|
|
6154
|
-
|
|
6451
|
+
// Stays mounted while the exit fade runs, hidden from assistive technology
|
|
6452
|
+
if (!isPresent) return null;
|
|
6155
6453
|
return jsxs(Fragment, {
|
|
6156
6454
|
children: [jsx(StyledOverlay, {
|
|
6157
|
-
"$
|
|
6455
|
+
"$isExiting": isExiting,
|
|
6158
6456
|
onClick: handleOverlayClick,
|
|
6159
6457
|
"data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'sheet-overlay'
|
|
6160
6458
|
}), jsx(StyledSheet, {
|
|
@@ -6163,12 +6461,13 @@ var Sheet = function Sheet(_a) {
|
|
|
6163
6461
|
"aria-modal": "true",
|
|
6164
6462
|
"aria-label": ariaLabel || title || 'Sheet dialog',
|
|
6165
6463
|
"aria-describedby": ariaDescribedBy,
|
|
6464
|
+
"aria-hidden": isExiting || undefined,
|
|
6166
6465
|
tabIndex: -1,
|
|
6167
6466
|
"$position": position,
|
|
6168
6467
|
"$variant": variant,
|
|
6169
6468
|
"$width": width,
|
|
6170
6469
|
"$height": height,
|
|
6171
|
-
"$
|
|
6470
|
+
"$isExiting": isExiting,
|
|
6172
6471
|
onKeyDown: handleKeyDown,
|
|
6173
6472
|
"data-testid": dataTestId,
|
|
6174
6473
|
children: jsx(StyledSheetContent, {
|
|
@@ -6180,8 +6479,7 @@ var Sheet = function Sheet(_a) {
|
|
|
6180
6479
|
Sheet.displayName = 'Sheet';
|
|
6181
6480
|
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
|
|
6182
6481
|
|
|
6183
|
-
var semantic$
|
|
6184
|
-
base$2 = tokensJson.base;
|
|
6482
|
+
var semantic$1 = tokensJson.semantic;
|
|
6185
6483
|
var StyledSliderContainer = styled.div.withConfig({
|
|
6186
6484
|
displayName: "Slider__StyledSliderContainer",
|
|
6187
6485
|
componentId: "sc-6mh2d4-0"
|
|
@@ -6189,21 +6487,21 @@ var StyledSliderContainer = styled.div.withConfig({
|
|
|
6189
6487
|
var StyledLabel$1 = styled.label.withConfig({
|
|
6190
6488
|
displayName: "Slider__StyledLabel",
|
|
6191
6489
|
componentId: "sc-6mh2d4-1"
|
|
6192
|
-
})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"])), semantic$
|
|
6490
|
+
})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"])), semantic$1.typography.label, function (_a) {
|
|
6193
6491
|
var $disabled = _a.$disabled;
|
|
6194
|
-
return $disabled ? semantic$
|
|
6195
|
-
}, semantic$
|
|
6492
|
+
return $disabled ? semantic$1.color.text.disabled : semantic$1.color.text["default"];
|
|
6493
|
+
}, semantic$1.spacing.layout.lg);
|
|
6196
6494
|
var StyledSliderTrackContainer = styled.div.withConfig({
|
|
6197
6495
|
displayName: "Slider__StyledSliderTrackContainer",
|
|
6198
6496
|
componentId: "sc-6mh2d4-2"
|
|
6199
|
-
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"])),
|
|
6497
|
+
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"])), semantic$1.spacing.layout['6xl']);
|
|
6200
6498
|
var StyledTrack = styled.div.withConfig({
|
|
6201
6499
|
displayName: "Slider__StyledTrack",
|
|
6202
6500
|
componentId: "sc-6mh2d4-3"
|
|
6203
|
-
})(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"])),
|
|
6501
|
+
})(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) {
|
|
6204
6502
|
var $disabled = _a.$disabled;
|
|
6205
|
-
return $disabled ? semantic$
|
|
6206
|
-
},
|
|
6503
|
+
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.border["default"];
|
|
6504
|
+
}, semantic$1.border.radius.circle, function (_a) {
|
|
6207
6505
|
var $disabled = _a.$disabled;
|
|
6208
6506
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
6209
6507
|
});
|
|
@@ -6212,31 +6510,31 @@ var StyledTrackFill = styled.div.withConfig({
|
|
|
6212
6510
|
componentId: "sc-6mh2d4-4"
|
|
6213
6511
|
})(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) {
|
|
6214
6512
|
var $disabled = _a.$disabled;
|
|
6215
|
-
return $disabled ? semantic$
|
|
6216
|
-
},
|
|
6513
|
+
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
|
|
6514
|
+
}, semantic$1.border.radius.circle);
|
|
6217
6515
|
var StyledThumb = styled.div.withConfig({
|
|
6218
6516
|
displayName: "Slider__StyledThumb",
|
|
6219
6517
|
componentId: "sc-6mh2d4-5"
|
|
6220
|
-
})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"], ["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"])),
|
|
6518
|
+
})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n\n ", " {\n transition: none;\n }\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"], ["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n\n ", " {\n transition: none;\n }\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"])), semantic$1.spacing.layout.xl, semantic$1.spacing.layout.xl, semantic$1.spacing.layout.sm, function (_a) {
|
|
6221
6519
|
var $disabled = _a.$disabled;
|
|
6222
|
-
return $disabled ? semantic$
|
|
6223
|
-
},
|
|
6520
|
+
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
|
|
6521
|
+
}, semantic$1.border.width.thick, function (_a) {
|
|
6224
6522
|
var $disabled = _a.$disabled;
|
|
6225
|
-
return $disabled ? semantic$
|
|
6226
|
-
},
|
|
6523
|
+
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
|
|
6524
|
+
}, semantic$1.border.radius.circle, function (_a) {
|
|
6227
6525
|
var $disabled = _a.$disabled;
|
|
6228
6526
|
return $disabled ? 'not-allowed' : 'grab';
|
|
6229
|
-
}, semantic$
|
|
6527
|
+
}, semantic$1.motion.transition.fast, tokensJson.component.slider.thumb.shadow["default"], reducedMotion, tokensJson.component.slider.thumb.shadow.hover, semantic$1.border.width.thick, semantic$1.color.border.interactive, semantic$1.spacing.layout.xs, function (_a) {
|
|
6230
6528
|
var $active = _a.$active;
|
|
6231
|
-
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(
|
|
6529
|
+
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(tokensJson.component.slider.thumb.shadow.active, ";\n ");
|
|
6232
6530
|
});
|
|
6233
6531
|
var StyledValueLabel = styled.div.withConfig({
|
|
6234
6532
|
displayName: "Slider__StyledValueLabel",
|
|
6235
6533
|
componentId: "sc-6mh2d4-6"
|
|
6236
|
-
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"], ["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"])),
|
|
6534
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"], ["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"])), semantic$1.spacing.layout['4xl'], semantic$1.spacing.layout.sm, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.sm, semantic$1.color.background.emphasis, semantic$1.color.text.inverse, semantic$1.typography.caption, semantic$1.border.radius.sm, function (_a) {
|
|
6237
6535
|
var $disabled = _a.$disabled;
|
|
6238
|
-
return $disabled ?
|
|
6239
|
-
},
|
|
6536
|
+
return $disabled ? semantic$1.opacity.disabled : semantic$1.opacity.full;
|
|
6537
|
+
}, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.xs, semantic$1.color.background.emphasis);
|
|
6240
6538
|
var StyledMinMaxLabels = styled.div.withConfig({
|
|
6241
6539
|
displayName: "Slider__StyledMinMaxLabels",
|
|
6242
6540
|
componentId: "sc-6mh2d4-7"
|
|
@@ -6264,7 +6562,7 @@ var StyledMinMaxLabels = styled.div.withConfig({
|
|
|
6264
6562
|
* onRangeChange={(values) => console.log(values)}
|
|
6265
6563
|
* />
|
|
6266
6564
|
* ```
|
|
6267
|
-
*/])), semantic$
|
|
6565
|
+
*/])), semantic$1.typography.body, semantic$1.color.text.subdued, semantic$1.spacing.layout.xs);
|
|
6268
6566
|
/**
|
|
6269
6567
|
* Slider component for single value or range selection
|
|
6270
6568
|
*
|
|
@@ -6586,46 +6884,45 @@ var Slider = function Slider(_a) {
|
|
|
6586
6884
|
Slider.displayName = 'Slider';
|
|
6587
6885
|
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
6588
6886
|
|
|
6589
|
-
var semantic
|
|
6590
|
-
base$1 = tokensJson.base;
|
|
6887
|
+
var semantic = tokensJson.semantic;
|
|
6591
6888
|
var StyledTabList = styled.div.withConfig({
|
|
6592
6889
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6593
6890
|
return !prop.startsWith('$');
|
|
6594
6891
|
},
|
|
6595
6892
|
displayName: "TabBar__StyledTabList",
|
|
6596
6893
|
componentId: "sc-1g9ib0y-0"
|
|
6597
|
-
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n border-bottom: ", ";\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n \n &::-webkit-scrollbar {\n height:
|
|
6598
|
-
return props.$variant === 'pills' ?
|
|
6894
|
+
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n border-bottom: ", ";\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 gap: ", ";\n border-bottom: ", ";\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"])), function (props) {
|
|
6895
|
+
return props.$variant === 'pills' ? semantic.spacing.layout.sm : '0';
|
|
6599
6896
|
}, function (props) {
|
|
6600
|
-
return props.$variant === 'underline' ? "".concat(
|
|
6601
|
-
}, semantic
|
|
6897
|
+
return props.$variant === 'underline' ? "".concat(semantic.border.width.thin, " solid ").concat(semantic.color.border.subtle) : 'none';
|
|
6898
|
+
}, tokensJson.component.tabBar.scrollbar.height, semantic.color.background.subtle, semantic.color.border["default"], semantic.border.radius.sm);
|
|
6602
6899
|
var StyledTab = styled.button.withConfig({
|
|
6603
6900
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6604
6901
|
return !prop.startsWith('$');
|
|
6605
6902
|
},
|
|
6606
6903
|
displayName: "TabBar__StyledTab",
|
|
6607
6904
|
componentId: "sc-1g9ib0y-1"
|
|
6608
|
-
})(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 /* Variant-specific styles */\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 /* Active/pressed state */\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 /* Variant-specific styles */\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 /* Active/pressed state */\n &:active:not(:disabled) {\n transform: translateY(1px);\n }\n"])),
|
|
6905
|
+
})(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 /* Variant-specific styles */\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 /* Active/pressed state */\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 /* Variant-specific styles */\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 /* Active/pressed state */\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) {
|
|
6609
6906
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
6610
|
-
}, semantic
|
|
6907
|
+
}, semantic.motion.hover, function (props) {
|
|
6611
6908
|
if (props.$variant === 'pills') {
|
|
6612
|
-
return "\n border-radius: ".concat(
|
|
6909
|
+
return "\n border-radius: ".concat(semantic.border.radius.circle, ";\n background-color: ").concat(props.$isActive ? semantic.color.background.interactive : semantic.color.background.subtle, ";\n color: ").concat(props.$isActive ? semantic.color.text.inverse : semantic.color.text["default"], ";\n \n &:hover:not(:disabled) {\n background-color: ").concat(props.$isActive ? semantic.color.background['interactive-hover'] : semantic.color.background.surface, ";\n }\n ");
|
|
6613
6910
|
}
|
|
6614
6911
|
if (props.$variant === 'underline') {
|
|
6615
|
-
return "\n color: ".concat(props.$isActive ? semantic
|
|
6912
|
+
return "\n color: ".concat(props.$isActive ? semantic.color.text.interactive : semantic.color.text.subdued, ";\n \n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n height: ").concat(semantic.border.width.thick, ";\n background-color: ").concat(props.$isActive ? semantic.color.background.interactive : 'transparent', ";\n transition: ").concat(semantic.motion.hover, ";\n }\n \n &:hover:not(:disabled) {\n color: ").concat(semantic.color.text.interactive, ";\n }\n ");
|
|
6616
6913
|
}
|
|
6617
6914
|
// default variant
|
|
6618
|
-
return "\n border-radius: ".concat(
|
|
6915
|
+
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 ");
|
|
6619
6916
|
}, function (props) {
|
|
6620
6917
|
return props.$disabled ? '0.5' : '1';
|
|
6621
|
-
},
|
|
6918
|
+
}, semantic.border.width.thick, semantic.color.border.strong, semantic.spacing.layout.xs);
|
|
6622
6919
|
var StyledBadge = styled.span.withConfig({
|
|
6623
6920
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6624
6921
|
return !prop.startsWith('$');
|
|
6625
6922
|
},
|
|
6626
6923
|
displayName: "TabBar__StyledBadge",
|
|
6627
6924
|
componentId: "sc-1g9ib0y-2"
|
|
6628
|
-
})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width:
|
|
6925
|
+
})(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"
|
|
6629
6926
|
/**
|
|
6630
6927
|
* TabBar component for tabbed navigation
|
|
6631
6928
|
*
|
|
@@ -6647,14 +6944,9 @@ var StyledBadge = styled.span.withConfig({
|
|
|
6647
6944
|
* variant="pills"
|
|
6648
6945
|
* />
|
|
6649
6946
|
* ```
|
|
6650
|
-
*/])),
|
|
6651
|
-
|
|
6652
|
-
|
|
6653
|
-
}
|
|
6654
|
-
return semantic$1.color.background.interactive;
|
|
6655
|
-
}, function (props) {
|
|
6656
|
-
return props.$variant === 'pills' && props.$isActive ? semantic$1.color.text.inverse : semantic$1.color.text.inverse;
|
|
6657
|
-
});
|
|
6947
|
+
*/])), tokensJson.component.tabBar.badge.size, tokensJson.component.tabBar.badge.size, semantic.spacing.layout.xs, tokensJson.component.tabBar.badge.typography, tokensJson.component.tabBar.badge.fontWeight, semantic.border.radius.circle, function (props) {
|
|
6948
|
+
return props.$variant === 'pills' && props.$isActive ? semantic.color.background['inverse-overlay'] : semantic.color.background.interactive;
|
|
6949
|
+
}, semantic.color.text.inverse);
|
|
6658
6950
|
/**
|
|
6659
6951
|
* TabBar component for tabbed navigation
|
|
6660
6952
|
*
|
|
@@ -6805,20 +7097,19 @@ var TabBar = function TabBar(_a) {
|
|
|
6805
7097
|
TabBar.displayName = 'TabBar';
|
|
6806
7098
|
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
6807
7099
|
|
|
6808
|
-
var
|
|
6809
|
-
base = tokensJson.base;
|
|
7100
|
+
var field = tokensJson.component.field;
|
|
6810
7101
|
var StyledFieldContainer = styled.div.withConfig({
|
|
6811
7102
|
displayName: "TextField__StyledFieldContainer",
|
|
6812
7103
|
componentId: "sc-1ys3b0-0"
|
|
6813
|
-
})(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"])),
|
|
7104
|
+
})(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"])), field.gap);
|
|
6814
7105
|
var StyledLabel = styled.label.withConfig({
|
|
6815
7106
|
displayName: "TextField__StyledLabel",
|
|
6816
7107
|
componentId: "sc-1ys3b0-1"
|
|
6817
|
-
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n
|
|
7108
|
+
})(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"])), field.label.gap, field.label.typography, field.label.color, field.label.colorDisabled);
|
|
6818
7109
|
var StyledRequiredIndicator = styled.span.withConfig({
|
|
6819
7110
|
displayName: "TextField__StyledRequiredIndicator",
|
|
6820
7111
|
componentId: "sc-1ys3b0-2"
|
|
6821
|
-
})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])),
|
|
7112
|
+
})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), field.requiredIndicator.color, field.requiredIndicator.fontWeight);
|
|
6822
7113
|
var StyledHelperText = styled.div.withConfig({
|
|
6823
7114
|
displayName: "TextField__StyledHelperText",
|
|
6824
7115
|
componentId: "sc-1ys3b0-3"
|
|
@@ -6835,9 +7126,9 @@ var StyledHelperText = styled.div.withConfig({
|
|
|
6835
7126
|
* required
|
|
6836
7127
|
* />
|
|
6837
7128
|
* ```
|
|
6838
|
-
*/])),
|
|
7129
|
+
*/])), field.helperText.typography, function (_a) {
|
|
6839
7130
|
var $hasError = _a.$hasError;
|
|
6840
|
-
return $hasError ?
|
|
7131
|
+
return $hasError ? field.helperText.colorError : field.helperText.color;
|
|
6841
7132
|
});
|
|
6842
7133
|
/**
|
|
6843
7134
|
* TextField component for text input with label, helper text, and error states
|
|
@@ -6911,9 +7202,9 @@ var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4
|
|
|
6911
7202
|
var StyledContainer = styled.div.withConfig({
|
|
6912
7203
|
displayName: "TransactionListItem__StyledContainer",
|
|
6913
7204
|
componentId: "sc-7yunm0-0"
|
|
6914
|
-
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-height:
|
|
7205
|
+
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-height: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: ", " solid ", ";\n gap: ", ";\n transition: background-color ", " ", ";\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n min-height: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: ", " solid ", ";\n gap: ", ";\n transition: background-color ", " ", ";\n \n ", "\n"])), tokensJson.component.transactionListItem.minHeight, tokensJson.semantic.spacing.layout.md, tokensJson.semantic.spacing.layout.md, tokensJson.semantic.color.background["default"], tokensJson.semantic.border.width.thin, tokensJson.semantic.color.border["default"], tokensJson.semantic.spacing.layout.md, tokensJson.semantic.motion.duration.normal, tokensJson.semantic.motion.easing.easeOut, function (_a) {
|
|
6915
7206
|
var $clickable = _a.$clickable;
|
|
6916
|
-
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(tokensJson.semantic.color.background.subtle, ";\n }\n \n &:active {\n background-color: ").concat(tokensJson.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline:
|
|
7207
|
+
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(tokensJson.semantic.color.background.subtle, ";\n }\n \n &:active {\n background-color: ").concat(tokensJson.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline: ").concat(tokensJson.semantic.border.width.thick, " solid ").concat(tokensJson.semantic.color.border.interactive, ";\n outline-offset: calc(-1 * ").concat(tokensJson.semantic.border.focusOffset, ");\n }\n ");
|
|
6917
7208
|
});
|
|
6918
7209
|
var StyledAvatarSection = styled.div.withConfig({
|
|
6919
7210
|
displayName: "TransactionListItem__StyledAvatarSection",
|
|
@@ -7121,14 +7412,18 @@ var TransactionListItem = function TransactionListItem(_a) {
|
|
|
7121
7412
|
};
|
|
7122
7413
|
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1;
|
|
7123
7414
|
|
|
7415
|
+
// Exception to decision 0014: the gap props are typed as base spacing keys (public API),
|
|
7416
|
+
// so they are looked up in base.spacing until they accept semantic keys.
|
|
7417
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
7418
|
+
var gapSpacing = tokensJson.base.spacing;
|
|
7124
7419
|
// Breakpoints using base tokens
|
|
7125
7420
|
var breakpoints = {
|
|
7126
|
-
xs: tokensJson.
|
|
7127
|
-
sm: tokensJson.
|
|
7128
|
-
md: tokensJson.
|
|
7129
|
-
lg: tokensJson.
|
|
7130
|
-
xl: tokensJson.
|
|
7131
|
-
'2xl': tokensJson.
|
|
7421
|
+
xs: tokensJson.semantic.breakpoint.xs,
|
|
7422
|
+
sm: tokensJson.semantic.breakpoint.sm,
|
|
7423
|
+
md: tokensJson.semantic.breakpoint.md,
|
|
7424
|
+
lg: tokensJson.semantic.breakpoint.lg,
|
|
7425
|
+
xl: tokensJson.semantic.breakpoint.xl,
|
|
7426
|
+
'2xl': tokensJson.semantic.breakpoint['2xl']
|
|
7132
7427
|
};
|
|
7133
7428
|
// Media query helpers
|
|
7134
7429
|
var media = {
|
|
@@ -7161,13 +7456,15 @@ var Grid = function Grid(_a) {
|
|
|
7161
7456
|
gapX = _a.gapX,
|
|
7162
7457
|
gapY = _a.gapY,
|
|
7163
7458
|
className = _a.className,
|
|
7459
|
+
dataTestId = _a["data-testid"],
|
|
7164
7460
|
children = _a.children;
|
|
7165
7461
|
return jsx(GridContainer, {
|
|
7166
7462
|
"$cols": cols,
|
|
7167
|
-
"$gap": gap ?
|
|
7168
|
-
"$gapX": gapX ?
|
|
7169
|
-
"$gapY": gapY ?
|
|
7463
|
+
"$gap": gap ? gapSpacing[gap] : undefined,
|
|
7464
|
+
"$gapX": gapX ? gapSpacing[gapX] : undefined,
|
|
7465
|
+
"$gapY": gapY ? gapSpacing[gapY] : undefined,
|
|
7170
7466
|
className: className,
|
|
7467
|
+
"data-testid": dataTestId,
|
|
7171
7468
|
children: children
|
|
7172
7469
|
});
|
|
7173
7470
|
};
|
|
@@ -7180,7 +7477,7 @@ var GridColContainer = styled.div.withConfig({
|
|
|
7180
7477
|
})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n ", "\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n"], ["\n ", "\n ", "\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n"])), function (props) {
|
|
7181
7478
|
return props.$span && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["grid-column: span ", " / span ", ";"], ["grid-column: span ", " / span ", ";"])), props.$span, props.$span);
|
|
7182
7479
|
}, function (props) {
|
|
7183
|
-
return props.$order && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
|
|
7480
|
+
return props.$order !== undefined && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["order: ", ";"], ["order: ", ";"])), props.$order);
|
|
7184
7481
|
}, function (props) {
|
|
7185
7482
|
return props.$spanSm && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", " {\n grid-column: span ", " / span ", ";\n }\n "], ["\n ", " {\n grid-column: span ", " / span ", ";\n }\n "])), media.sm, props.$spanSm, props.$spanSm);
|
|
7186
7483
|
}, function (props) {
|
|
@@ -7190,13 +7487,13 @@ var GridColContainer = styled.div.withConfig({
|
|
|
7190
7487
|
}, function (props) {
|
|
7191
7488
|
return props.$spanXl && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", " {\n grid-column: span ", " / span ", ";\n }\n "], ["\n ", " {\n grid-column: span ", " / span ", ";\n }\n "])), media.xl, props.$spanXl, props.$spanXl);
|
|
7192
7489
|
}, function (props) {
|
|
7193
|
-
return props.$orderSm && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", " {\n order: ", ";\n }\n "], ["\n ", " {\n order: ", ";\n }\n "])), media.sm, props.$orderSm);
|
|
7490
|
+
return props.$orderSm !== undefined && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", " {\n order: ", ";\n }\n "], ["\n ", " {\n order: ", ";\n }\n "])), media.sm, props.$orderSm);
|
|
7194
7491
|
}, function (props) {
|
|
7195
|
-
return props.$orderMd && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", " {\n order: ", ";\n }\n "], ["\n ", " {\n order: ", ";\n }\n "])), media.md, props.$orderMd);
|
|
7492
|
+
return props.$orderMd !== undefined && css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", " {\n order: ", ";\n }\n "], ["\n ", " {\n order: ", ";\n }\n "])), media.md, props.$orderMd);
|
|
7196
7493
|
}, function (props) {
|
|
7197
|
-
return props.$orderLg && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", " {\n order: ", ";\n }\n "], ["\n ", " {\n order: ", ";\n }\n "])), media.lg, props.$orderLg);
|
|
7494
|
+
return props.$orderLg !== undefined && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", " {\n order: ", ";\n }\n "], ["\n ", " {\n order: ", ";\n }\n "])), media.lg, props.$orderLg);
|
|
7198
7495
|
}, function (props) {
|
|
7199
|
-
return props.$orderXl && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", " {\n order: ", ";\n }\n "], ["\n ", " {\n order: ", ";\n }\n "])), media.xl, props.$orderXl);
|
|
7496
|
+
return props.$orderXl !== undefined && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", " {\n order: ", ";\n }\n "], ["\n ", " {\n order: ", ";\n }\n "])), media.xl, props.$orderXl);
|
|
7200
7497
|
});
|
|
7201
7498
|
var GridCol = function GridCol(_a) {
|
|
7202
7499
|
var span = _a.span,
|
|
@@ -7210,6 +7507,7 @@ var GridCol = function GridCol(_a) {
|
|
|
7210
7507
|
orderLg = _a.orderLg,
|
|
7211
7508
|
orderXl = _a.orderXl,
|
|
7212
7509
|
className = _a.className,
|
|
7510
|
+
dataTestId = _a["data-testid"],
|
|
7213
7511
|
children = _a.children;
|
|
7214
7512
|
return jsx(GridColContainer, {
|
|
7215
7513
|
"$span": span,
|
|
@@ -7223,6 +7521,7 @@ var GridCol = function GridCol(_a) {
|
|
|
7223
7521
|
"$orderLg": orderLg,
|
|
7224
7522
|
"$orderXl": orderXl,
|
|
7225
7523
|
className: className,
|
|
7524
|
+
"data-testid": dataTestId,
|
|
7226
7525
|
children: children
|
|
7227
7526
|
});
|
|
7228
7527
|
};
|
|
@@ -7295,6 +7594,7 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
|
|
|
7295
7594
|
gapYLg = _a.gapYLg,
|
|
7296
7595
|
gapYXl = _a.gapYXl,
|
|
7297
7596
|
className = _a.className,
|
|
7597
|
+
dataTestId = _a["data-testid"],
|
|
7298
7598
|
children = _a.children;
|
|
7299
7599
|
return jsx(ResponsiveGridContainer, {
|
|
7300
7600
|
"$cols": cols,
|
|
@@ -7302,22 +7602,23 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
|
|
|
7302
7602
|
"$colsMd": colsMd,
|
|
7303
7603
|
"$colsLg": colsLg,
|
|
7304
7604
|
"$colsXl": colsXl,
|
|
7305
|
-
"$gap": gap ?
|
|
7306
|
-
"$gapSm": gapSm ?
|
|
7307
|
-
"$gapMd": gapMd ?
|
|
7308
|
-
"$gapLg": gapLg ?
|
|
7309
|
-
"$gapXl": gapXl ?
|
|
7310
|
-
"$gapX": gapX ?
|
|
7311
|
-
"$gapXSm": gapXSm ?
|
|
7312
|
-
"$gapXMd": gapXMd ?
|
|
7313
|
-
"$gapXLg": gapXLg ?
|
|
7314
|
-
"$gapXXl": gapXXl ?
|
|
7315
|
-
"$gapY": gapY ?
|
|
7316
|
-
"$gapYSm": gapYSm ?
|
|
7317
|
-
"$gapYMd": gapYMd ?
|
|
7318
|
-
"$gapYLg": gapYLg ?
|
|
7319
|
-
"$gapYXl": gapYXl ?
|
|
7605
|
+
"$gap": gap ? gapSpacing[gap] : undefined,
|
|
7606
|
+
"$gapSm": gapSm ? gapSpacing[gapSm] : undefined,
|
|
7607
|
+
"$gapMd": gapMd ? gapSpacing[gapMd] : undefined,
|
|
7608
|
+
"$gapLg": gapLg ? gapSpacing[gapLg] : undefined,
|
|
7609
|
+
"$gapXl": gapXl ? gapSpacing[gapXl] : undefined,
|
|
7610
|
+
"$gapX": gapX ? gapSpacing[gapX] : undefined,
|
|
7611
|
+
"$gapXSm": gapXSm ? gapSpacing[gapXSm] : undefined,
|
|
7612
|
+
"$gapXMd": gapXMd ? gapSpacing[gapXMd] : undefined,
|
|
7613
|
+
"$gapXLg": gapXLg ? gapSpacing[gapXLg] : undefined,
|
|
7614
|
+
"$gapXXl": gapXXl ? gapSpacing[gapXXl] : undefined,
|
|
7615
|
+
"$gapY": gapY ? gapSpacing[gapY] : undefined,
|
|
7616
|
+
"$gapYSm": gapYSm ? gapSpacing[gapYSm] : undefined,
|
|
7617
|
+
"$gapYMd": gapYMd ? gapSpacing[gapYMd] : undefined,
|
|
7618
|
+
"$gapYLg": gapYLg ? gapSpacing[gapYLg] : undefined,
|
|
7619
|
+
"$gapYXl": gapYXl ? gapSpacing[gapYXl] : undefined,
|
|
7320
7620
|
className: className,
|
|
7621
|
+
"data-testid": dataTestId,
|
|
7321
7622
|
children: children
|
|
7322
7623
|
});
|
|
7323
7624
|
};
|