@common-origin/design-system 2.13.0 → 2.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/client.esm.js +646 -429
- package/dist/client.esm.js.map +1 -1
- package/dist/client.js +645 -428
- package/dist/client.js.map +1 -1
- package/dist/components/molecules/Alert/Alert.d.ts +2 -1
- package/dist/components/molecules/Sheet/Sheet.d.ts +2 -2
- package/dist/data.esm.js +231 -3
- package/dist/data.esm.js.map +1 -1
- package/dist/data.js +231 -3
- 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 +231 -3
- package/dist/tokens/index.esm.js +231 -3
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +231 -3
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/types/tokens.d.ts +228 -0
- package/dist/types/tokens.d.ts +228 -0
- package/package.json +3 -3
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$c = tokensJson.semantic,
|
|
245
|
+
typography$1 = _a$c.typography,
|
|
246
|
+
color$9 = _a$c.color,
|
|
247
|
+
letterSpacing = _a$c.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$b = tokensJson.component.badge,
|
|
379
|
+
dot = _a$b.dot,
|
|
380
|
+
count = _a$b.count,
|
|
381
|
+
ring = _a$b.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,
|
|
@@ -439,15 +476,15 @@ var StyledBox = styled.div.withConfig({
|
|
|
439
476
|
}, function (props) {
|
|
440
477
|
return props.$m && css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensJson.semantic.spacing.layout[props.$m]);
|
|
441
478
|
}, function (props) {
|
|
442
|
-
return props.$mt && css(templateObject_8$
|
|
479
|
+
return props.$mt && css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensJson.semantic.spacing.layout[props.$mt]);
|
|
443
480
|
}, function (props) {
|
|
444
|
-
return props.$mr && css(templateObject_9$
|
|
481
|
+
return props.$mr && css(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensJson.semantic.spacing.layout[props.$mr]);
|
|
445
482
|
}, function (props) {
|
|
446
|
-
return props.$mb && css(templateObject_10$
|
|
483
|
+
return props.$mb && css(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensJson.semantic.spacing.layout[props.$mb]);
|
|
447
484
|
}, function (props) {
|
|
448
|
-
return props.$ml && css(templateObject_11$
|
|
485
|
+
return props.$ml && css(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensJson.semantic.spacing.layout[props.$ml]);
|
|
449
486
|
}, function (props) {
|
|
450
|
-
return props.$mx && css(templateObject_12$
|
|
487
|
+
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
488
|
}, function (props) {
|
|
452
489
|
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
490
|
}, function (props) {
|
|
@@ -489,15 +526,15 @@ var StyledBox = styled.div.withConfig({
|
|
|
489
526
|
}, function (props) {
|
|
490
527
|
return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensJson.semantic.border.radius[props.$borderRadius]);
|
|
491
528
|
}, function (props) {
|
|
492
|
-
return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border:
|
|
529
|
+
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
530
|
}, function (props) {
|
|
494
|
-
return props.$borderTop && css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top:
|
|
531
|
+
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
532
|
}, function (props) {
|
|
496
|
-
return props.$borderRight && css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right:
|
|
533
|
+
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
534
|
}, function (props) {
|
|
498
|
-
return props.$borderBottom && css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom:
|
|
535
|
+
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
536
|
}, function (props) {
|
|
500
|
-
return props.$borderLeft && css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left:
|
|
537
|
+
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
538
|
}, function (props) {
|
|
502
539
|
return props.$bg && css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), tokensJson.semantic.color.background[props.$bg]);
|
|
503
540
|
}, function (props) {
|
|
@@ -509,7 +546,7 @@ var StyledBox = styled.div.withConfig({
|
|
|
509
546
|
}, function (props) {
|
|
510
547
|
return props.$transition && css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
|
|
511
548
|
}, 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:
|
|
549
|
+
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
550
|
}, function (props) {
|
|
514
551
|
return props.$overflow && css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
|
|
515
552
|
}, function (props) {
|
|
@@ -649,7 +686,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
649
686
|
}));
|
|
650
687
|
};
|
|
651
688
|
var Box = BoxTransform;
|
|
652
|
-
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$b, templateObject_8$
|
|
689
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$g, 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$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
|
|
653
690
|
|
|
654
691
|
var IconStyled = styled.span.withConfig({
|
|
655
692
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -726,9 +763,9 @@ var Icon = function Icon(_a) {
|
|
|
726
763
|
var templateObject_1$G;
|
|
727
764
|
|
|
728
765
|
var button$1 = tokensJson.component.button,
|
|
729
|
-
semantic$
|
|
766
|
+
semantic$e = tokensJson.semantic;
|
|
730
767
|
// 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$
|
|
768
|
+
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
769
|
// Dynamic variant styles using component tokens
|
|
733
770
|
var getVariantStyles$1 = function getVariantStyles(_a) {
|
|
734
771
|
var $variant = _a.$variant;
|
|
@@ -907,12 +944,11 @@ var Button = function Button(_a) {
|
|
|
907
944
|
};
|
|
908
945
|
var templateObject_1$F, templateObject_2$s;
|
|
909
946
|
|
|
910
|
-
var semantic$
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
spacing$7 = semantic$g.spacing;
|
|
947
|
+
var semantic$d = tokensJson.semantic;
|
|
948
|
+
var color$7 = semantic$d.color,
|
|
949
|
+
border$8 = semantic$d.border,
|
|
950
|
+
spacing$7 = semantic$d.spacing;
|
|
951
|
+
var label$2 = tokensJson.component.badge.label;
|
|
916
952
|
var category = color$7.category;
|
|
917
953
|
var radius$3 = border$8.radius;
|
|
918
954
|
var layout$4 = spacing$7.layout;
|
|
@@ -922,7 +958,7 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
922
958
|
},
|
|
923
959
|
displayName: "CategoryBadge__StyledCategoryBadge",
|
|
924
960
|
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
|
|
961
|
+
})(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
962
|
/**
|
|
927
963
|
* CategoryBadge component for displaying transaction categories
|
|
928
964
|
*
|
|
@@ -940,7 +976,7 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
940
976
|
* Travel
|
|
941
977
|
* </CategoryBadge>
|
|
942
978
|
* ```
|
|
943
|
-
*/])), radius$3.circle,
|
|
979
|
+
*/])), radius$3.circle, semantic$d.border.width.thin, function (_a) {
|
|
944
980
|
var $size = _a.$size;
|
|
945
981
|
return $size === 'small' ? '24px' : '32px';
|
|
946
982
|
}, function (_a) {
|
|
@@ -948,8 +984,8 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
948
984
|
return $size === 'small' ? "".concat(layout$4.xs, " ").concat(layout$4.sm) : "".concat(layout$4.sm, " ").concat(layout$4.md);
|
|
949
985
|
}, function (_a) {
|
|
950
986
|
var $size = _a.$size;
|
|
951
|
-
return $size === 'small' ?
|
|
952
|
-
}, layout$4.xs, function (_a) {
|
|
987
|
+
return $size === 'small' ? label$2.typography.small : label$2.typography.medium;
|
|
988
|
+
}, label$2.fontWeight, layout$4.xs, function (_a) {
|
|
953
989
|
var $color = _a.$color,
|
|
954
990
|
$variant = _a.$variant;
|
|
955
991
|
if ($variant === 'filled') {
|
|
@@ -1083,9 +1119,9 @@ var CloseButton = styled.button.withConfig({
|
|
|
1083
1119
|
},
|
|
1084
1120
|
displayName: "ChipBase__CloseButton",
|
|
1085
1121
|
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: 2px;\n border-radius: ", ";\n cursor: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n background-color:
|
|
1122
|
+
})(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: 2px;\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 padding: 2px;\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, tokensJson.semantic.border.radius.xs, function (props) {
|
|
1087
1123
|
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);
|
|
1124
|
+
}, 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
1125
|
var templateObject_1$D, templateObject_2$r, templateObject_3$p;
|
|
1090
1126
|
|
|
1091
1127
|
/**
|
|
@@ -1313,30 +1349,11 @@ var BooleanChip = function BooleanChip(_a) {
|
|
|
1313
1349
|
}));
|
|
1314
1350
|
};
|
|
1315
1351
|
|
|
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
1352
|
var spacing$6 = tokensJson.semantic.spacing;
|
|
1336
1353
|
var StyledContainer$2 = styled.div.withConfig({
|
|
1337
1354
|
displayName: "Container__StyledContainer",
|
|
1338
1355
|
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:
|
|
1356
|
+
})(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
1357
|
var Container$1 = function Container(_a) {
|
|
1341
1358
|
var children = _a.children,
|
|
1342
1359
|
props = __rest(_a, ["children"]);
|
|
@@ -1346,7 +1363,6 @@ var Container$1 = function Container(_a) {
|
|
|
1346
1363
|
};
|
|
1347
1364
|
var templateObject_1$C;
|
|
1348
1365
|
|
|
1349
|
-
var base$b = tokensJson.base;
|
|
1350
1366
|
var PictureWrapper = styled.div.withConfig({
|
|
1351
1367
|
displayName: "Picture__PictureWrapper",
|
|
1352
1368
|
componentId: "sc-11d9tei-0"
|
|
@@ -1354,15 +1370,15 @@ var PictureWrapper = styled.div.withConfig({
|
|
|
1354
1370
|
var ImageLink = styled.a.withConfig({
|
|
1355
1371
|
displayName: "Picture__ImageLink",
|
|
1356
1372
|
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"])),
|
|
1373
|
+
})(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
1374
|
var ImageButton = styled.button.withConfig({
|
|
1359
1375
|
displayName: "Picture__ImageButton",
|
|
1360
1376
|
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"])),
|
|
1377
|
+
})(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
1378
|
var StyledImage = styled.img.withConfig({
|
|
1363
1379
|
displayName: "Picture__StyledImage",
|
|
1364
1380
|
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"])),
|
|
1381
|
+
})(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
1382
|
var Picture = function Picture(_a) {
|
|
1367
1383
|
var title = _a.title,
|
|
1368
1384
|
src = _a.src,
|
|
@@ -1394,16 +1410,16 @@ var Picture = function Picture(_a) {
|
|
|
1394
1410
|
};
|
|
1395
1411
|
var templateObject_1$B, templateObject_2$q, templateObject_3$o, templateObject_4$k;
|
|
1396
1412
|
|
|
1397
|
-
var _a$
|
|
1398
|
-
typography
|
|
1399
|
-
color$6 = _a$
|
|
1413
|
+
var _a$a = tokensJson.semantic,
|
|
1414
|
+
typography = _a$a.typography,
|
|
1415
|
+
color$6 = _a$a.color;
|
|
1400
1416
|
var TimeStyled = styled.time.withConfig({
|
|
1401
1417
|
displayName: "DateFormatter__TimeStyled",
|
|
1402
1418
|
componentId: "sc-5464cc-0"
|
|
1403
1419
|
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
1404
1420
|
/**
|
|
1405
1421
|
* Formats a date with smart relative/absolute logic
|
|
1406
|
-
*/])), typography
|
|
1422
|
+
*/])), typography.label, color$6.text.subdued);
|
|
1407
1423
|
/**
|
|
1408
1424
|
* Formats a date with smart relative/absolute logic
|
|
1409
1425
|
*/
|
|
@@ -1451,17 +1467,17 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
1451
1467
|
};
|
|
1452
1468
|
var templateObject_1$A;
|
|
1453
1469
|
|
|
1454
|
-
var motion$
|
|
1455
|
-
_a$
|
|
1456
|
-
iconButton = _a$
|
|
1457
|
-
button = _a$
|
|
1470
|
+
var motion$5 = tokensJson.semantic.motion,
|
|
1471
|
+
_a$9 = tokensJson.component,
|
|
1472
|
+
iconButton = _a$9.iconButton,
|
|
1473
|
+
button = _a$9.button;
|
|
1458
1474
|
var IconButtonStyled = styled.button.withConfig({
|
|
1459
1475
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1460
1476
|
return !prop.startsWith('$');
|
|
1461
1477
|
},
|
|
1462
1478
|
displayName: "IconButton__IconButtonStyled",
|
|
1463
1479
|
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:
|
|
1480
|
+
})(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
1481
|
var $variant = _a.$variant;
|
|
1466
1482
|
switch ($variant) {
|
|
1467
1483
|
case 'primary':
|
|
@@ -1485,7 +1501,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
1485
1501
|
default:
|
|
1486
1502
|
return button.primary.textColor;
|
|
1487
1503
|
}
|
|
1488
|
-
}, iconButton.primary.borderRadius, motion$
|
|
1504
|
+
}, iconButton.primary.borderRadius, motion$5.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
|
|
1489
1505
|
var $size = _a.$size;
|
|
1490
1506
|
return iconButton.sizes[$size].minWidth;
|
|
1491
1507
|
}, function (_a) {
|
|
@@ -1518,7 +1534,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
1518
1534
|
default:
|
|
1519
1535
|
return button.disabled.textColor;
|
|
1520
1536
|
}
|
|
1521
|
-
});
|
|
1537
|
+
}, tokensJson.semantic.border.width.thin);
|
|
1522
1538
|
var IconButton = function IconButton(_a) {
|
|
1523
1539
|
var variant = _a.variant,
|
|
1524
1540
|
_b = _a.size,
|
|
@@ -1584,7 +1600,7 @@ var StyledWrapper = styled.span.withConfig({
|
|
|
1584
1600
|
return $align;
|
|
1585
1601
|
}, function (_a) {
|
|
1586
1602
|
var $weight = _a.$weight;
|
|
1587
|
-
return $weight
|
|
1603
|
+
return tokensJson.semantic.fontWeight[$weight];
|
|
1588
1604
|
});
|
|
1589
1605
|
// Map size to Typography variant
|
|
1590
1606
|
var sizeToTypographyVariant = {
|
|
@@ -1683,14 +1699,14 @@ var MoneyDisplay = function MoneyDisplay(_a) {
|
|
|
1683
1699
|
var templateObject_1$y;
|
|
1684
1700
|
|
|
1685
1701
|
// Destructure tokens
|
|
1686
|
-
var semantic$
|
|
1687
|
-
var _a$
|
|
1702
|
+
var semantic$c = tokensJson.semantic;
|
|
1703
|
+
var _a$8 = __assign(__assign({}, semantic$c), {
|
|
1688
1704
|
component: tokensJson.component
|
|
1689
1705
|
}),
|
|
1690
|
-
color$5 = _a$
|
|
1691
|
-
border$7 = _a$
|
|
1692
|
-
motion$
|
|
1693
|
-
component$2 = _a$
|
|
1706
|
+
color$5 = _a$8.color,
|
|
1707
|
+
border$7 = _a$8.border,
|
|
1708
|
+
motion$4 = _a$8.motion,
|
|
1709
|
+
component$2 = _a$8.component;
|
|
1694
1710
|
var radius$2 = border$7.radius;
|
|
1695
1711
|
var ProgressBarContainer = styled.div.withConfig({
|
|
1696
1712
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1709,7 +1725,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
1709
1725
|
},
|
|
1710
1726
|
displayName: "ProgressBar__ProgressBarFill",
|
|
1711
1727
|
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$
|
|
1728
|
+
})(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
1729
|
var backgroundColor;
|
|
1714
1730
|
switch (props.$color) {
|
|
1715
1731
|
case 'success':
|
|
@@ -1787,9 +1803,9 @@ var StyledDivider = styled.div.withConfig({
|
|
|
1787
1803
|
var _b = _a.$orientation,
|
|
1788
1804
|
$orientation = _b === void 0 ? 'horizontal' : _b;
|
|
1789
1805
|
if ($orientation === 'vertical') {
|
|
1790
|
-
return "\n display: inline-block;\n height: auto;\n align-self: stretch;\n border-left:
|
|
1806
|
+
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
1807
|
}
|
|
1792
|
-
return "border-top:
|
|
1808
|
+
return "border-top: ".concat(tokensJson.semantic.border.width.thin, " solid;");
|
|
1793
1809
|
}, function (_a) {
|
|
1794
1810
|
var _b = _a.$variant,
|
|
1795
1811
|
$variant = _b === void 0 ? 'default' : _b,
|
|
@@ -1931,8 +1947,11 @@ var templateObject_1$v;
|
|
|
1931
1947
|
var statusColors = tokensJson.semantic.color.status;
|
|
1932
1948
|
var spacing$5 = tokensJson.semantic.spacing.layout;
|
|
1933
1949
|
var radius$1 = tokensJson.semantic.border.radius;
|
|
1934
|
-
var
|
|
1935
|
-
|
|
1950
|
+
var _a$7 = tokensJson.semantic.motion,
|
|
1951
|
+
transition = _a$7.transition,
|
|
1952
|
+
duration$3 = _a$7.duration,
|
|
1953
|
+
easing$3 = _a$7.easing;
|
|
1954
|
+
var label$1 = tokensJson.component.badge.label;
|
|
1936
1955
|
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
1956
|
var getStatusConfig = function getStatusConfig(status) {
|
|
1938
1957
|
var configs = {
|
|
@@ -1982,14 +2001,14 @@ var sizeConfig = {
|
|
|
1982
2001
|
small: {
|
|
1983
2002
|
height: '20px',
|
|
1984
2003
|
padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
|
|
1985
|
-
font:
|
|
2004
|
+
font: label$1.typography.small,
|
|
1986
2005
|
gap: spacing$5.xs,
|
|
1987
2006
|
iconSize: 'xs'
|
|
1988
2007
|
},
|
|
1989
2008
|
medium: {
|
|
1990
2009
|
height: '24px',
|
|
1991
2010
|
padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
|
|
1992
|
-
font:
|
|
2011
|
+
font: label$1.typography.medium,
|
|
1993
2012
|
gap: spacing$5.xs,
|
|
1994
2013
|
iconSize: 'sm'
|
|
1995
2014
|
}
|
|
@@ -2000,10 +2019,10 @@ var StyledStatusBadge = styled.span.withConfig({
|
|
|
2000
2019
|
},
|
|
2001
2020
|
displayName: "StatusBadge__StyledStatusBadge",
|
|
2002
2021
|
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
|
|
2022
|
+
})(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
2023
|
var $size = _a.$size;
|
|
2005
2024
|
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 ");
|
|
2025
|
+
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
2026
|
}, function (_a) {
|
|
2008
2027
|
var $status = _a.$status;
|
|
2009
2028
|
var config = getStatusConfig($status);
|
|
@@ -2012,7 +2031,7 @@ var StyledStatusBadge = styled.span.withConfig({
|
|
|
2012
2031
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
2013
2032
|
displayName: "StatusBadge__ScreenReaderOnly",
|
|
2014
2033
|
componentId: "sc-1paksgb-1"
|
|
2015
|
-
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n
|
|
2034
|
+
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
2016
2035
|
/**
|
|
2017
2036
|
* StatusBadge component for displaying transaction or task status
|
|
2018
2037
|
*
|
|
@@ -2035,7 +2054,7 @@ var ScreenReaderOnly = styled.span.withConfig({
|
|
|
2035
2054
|
* liveRegion={true}
|
|
2036
2055
|
* />
|
|
2037
2056
|
* ```
|
|
2038
|
-
*/])));
|
|
2057
|
+
*/])), visuallyHidden);
|
|
2039
2058
|
/**
|
|
2040
2059
|
* StatusBadge component for displaying transaction or task status
|
|
2041
2060
|
*
|
|
@@ -2094,12 +2113,12 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
2094
2113
|
StatusBadge.displayName = 'StatusBadge';
|
|
2095
2114
|
var templateObject_1$u, templateObject_2$o, templateObject_3$m;
|
|
2096
2115
|
|
|
2097
|
-
var semantic$
|
|
2098
|
-
var color$4 = semantic$
|
|
2099
|
-
spacing$4 = semantic$
|
|
2100
|
-
border$6 = semantic$
|
|
2101
|
-
|
|
2102
|
-
|
|
2116
|
+
var semantic$b = tokensJson.semantic;
|
|
2117
|
+
var color$4 = semantic$b.color,
|
|
2118
|
+
spacing$4 = semantic$b.spacing,
|
|
2119
|
+
border$6 = semantic$b.border,
|
|
2120
|
+
size = semantic$b.size;
|
|
2121
|
+
var label = tokensJson.component.badge.label;
|
|
2103
2122
|
var layout$3 = spacing$4.layout;
|
|
2104
2123
|
var radius = border$6.radius;
|
|
2105
2124
|
var StyledTag = styled.span.withConfig({
|
|
@@ -2108,13 +2127,13 @@ var StyledTag = styled.span.withConfig({
|
|
|
2108
2127
|
},
|
|
2109
2128
|
displayName: "Tag__StyledTag",
|
|
2110
2129
|
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"
|
|
2130
|
+
})(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
2131
|
/**
|
|
2113
2132
|
* Tag component for categorizing and labeling content
|
|
2114
2133
|
*
|
|
2115
2134
|
* A static, non-interactive label used to categorize elements or objects in the UI.
|
|
2116
2135
|
* Tags help users quickly identify and understand content classification.
|
|
2117
|
-
*/])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, typography
|
|
2136
|
+
*/])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, label.typography.small, label.fontWeight, function (_a) {
|
|
2118
2137
|
var $variant = _a.$variant;
|
|
2119
2138
|
switch ($variant) {
|
|
2120
2139
|
case 'interactive':
|
|
@@ -2152,17 +2171,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2152
2171
|
if (!$border) return 'none';
|
|
2153
2172
|
switch ($variant) {
|
|
2154
2173
|
case 'interactive':
|
|
2155
|
-
return "
|
|
2174
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.interactive);
|
|
2156
2175
|
case 'success':
|
|
2157
|
-
return "
|
|
2176
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.success);
|
|
2158
2177
|
case 'warning':
|
|
2159
|
-
return "
|
|
2178
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.warning);
|
|
2160
2179
|
case 'error':
|
|
2161
|
-
return "
|
|
2180
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.error);
|
|
2162
2181
|
case 'emphasis':
|
|
2163
|
-
return "
|
|
2182
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.background.emphasis);
|
|
2164
2183
|
default:
|
|
2165
|
-
return "
|
|
2184
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border["default"]);
|
|
2166
2185
|
}
|
|
2167
2186
|
});
|
|
2168
2187
|
/**
|
|
@@ -2194,8 +2213,8 @@ var Tag = function Tag(_a) {
|
|
|
2194
2213
|
var templateObject_1$t;
|
|
2195
2214
|
|
|
2196
2215
|
// Destructure tokens for cleaner access
|
|
2197
|
-
var semantic$
|
|
2198
|
-
var spacing$3 = semantic$
|
|
2216
|
+
var semantic$a = tokensJson.semantic;
|
|
2217
|
+
var spacing$3 = semantic$a.spacing;
|
|
2199
2218
|
var layout$2 = spacing$3.layout;
|
|
2200
2219
|
var StyledBalanceSection = styled.div.withConfig({
|
|
2201
2220
|
displayName: "AccountCard__StyledBalanceSection",
|
|
@@ -2216,9 +2235,9 @@ var StyledStackWrapper = styled.div.withConfig({
|
|
|
2216
2235
|
var StyledHeaderWrapper = styled.div.withConfig({
|
|
2217
2236
|
displayName: "AccountCard__StyledHeaderWrapper",
|
|
2218
2237
|
componentId: "sc-1erp7zn-4"
|
|
2219
|
-
})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n min-height:
|
|
2238
|
+
})(templateObject_5$e || (templateObject_5$e = __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
2239
|
// Map trend direction to icon and color
|
|
2221
|
-
])), layout$2.none, layout$2.xs);
|
|
2240
|
+
])), tokensJson.component.accountCard.header.minHeight, layout$2.none, layout$2.xs);
|
|
2222
2241
|
// Map trend direction to icon and color
|
|
2223
2242
|
var trendToIcon = {
|
|
2224
2243
|
up: 'arrowUp',
|
|
@@ -2267,15 +2286,14 @@ var AccountCard = function AccountCard(_a) {
|
|
|
2267
2286
|
}
|
|
2268
2287
|
};
|
|
2269
2288
|
return jsx(Box, {
|
|
2270
|
-
minWidth:
|
|
2289
|
+
minWidth: tokensJson.component.accountCard.minWidth,
|
|
2271
2290
|
p: "lg",
|
|
2272
2291
|
bg: "subtle",
|
|
2273
2292
|
border: "default",
|
|
2274
2293
|
borderRadius: "xl",
|
|
2275
|
-
transition: "
|
|
2294
|
+
transition: "box-shadow ".concat(semantic$a.motion.duration.normal, " ").concat(semantic$a.motion.easing.easeOut),
|
|
2276
2295
|
cursor: isClickable ? 'pointer' : 'default',
|
|
2277
2296
|
hoverShadow: isClickable ? 'floating' : undefined,
|
|
2278
|
-
hoverTransform: isClickable ? 'translateY(-2px)' : undefined,
|
|
2279
2297
|
onClick: handleClick,
|
|
2280
2298
|
onKeyDown: handleKeyDown,
|
|
2281
2299
|
tabIndex: isClickable ? 0 : undefined,
|
|
@@ -2370,24 +2388,26 @@ var AccountCard = function AccountCard(_a) {
|
|
|
2370
2388
|
};
|
|
2371
2389
|
var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$e;
|
|
2372
2390
|
|
|
2373
|
-
var semantic$
|
|
2374
|
-
|
|
2391
|
+
var semantic$9 = tokensJson.semantic;
|
|
2392
|
+
var _a$6 = semantic$9.motion,
|
|
2393
|
+
duration$2 = _a$6.duration,
|
|
2394
|
+
easing$2 = _a$6.easing;
|
|
2375
2395
|
var StyledListItem = styled.li.withConfig({
|
|
2376
2396
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2377
2397
|
return !prop.startsWith('$');
|
|
2378
2398
|
},
|
|
2379
2399
|
displayName: "ListItem__StyledListItem",
|
|
2380
2400
|
componentId: "sc-1wzzt21-0"
|
|
2381
|
-
})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height:
|
|
2401
|
+
})(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
2402
|
var $interactive = _a.$interactive;
|
|
2383
2403
|
return $interactive && 'user-select: none;';
|
|
2384
2404
|
}, function (_a) {
|
|
2385
2405
|
var $disabled = _a.$disabled;
|
|
2386
|
-
return $disabled && "\n opacity: ".concat(
|
|
2406
|
+
return $disabled && "\n opacity: ".concat(semantic$9.opacity.disabled, ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
2387
2407
|
}, function (_a) {
|
|
2388
2408
|
var $destructive = _a.$destructive,
|
|
2389
2409
|
$disabled = _a.$disabled;
|
|
2390
|
-
return $destructive && !$disabled && "\n color: ".concat(semantic$
|
|
2410
|
+
return $destructive && !$disabled && "\n color: ".concat(semantic$9.color.text.error, ";\n ");
|
|
2391
2411
|
});
|
|
2392
2412
|
var StyledItemContent = styled.div.withConfig({
|
|
2393
2413
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2395,13 +2415,13 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
2395
2415
|
},
|
|
2396
2416
|
displayName: "ListItem__StyledItemContent",
|
|
2397
2417
|
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
|
|
2418
|
+
})(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
2419
|
var $spacing = _a.$spacing;
|
|
2400
|
-
return $spacing === 'compact' ? "".concat(semantic$
|
|
2401
|
-
},
|
|
2420
|
+
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);
|
|
2421
|
+
}, semantic$9.border.radius.sm, function (_a) {
|
|
2402
2422
|
var $selected = _a.$selected;
|
|
2403
|
-
return $selected ? semantic$
|
|
2404
|
-
}, function (_a) {
|
|
2423
|
+
return $selected ? semantic$9.color.background['interactive-subtle'] : 'transparent';
|
|
2424
|
+
}, duration$2.fast, easing$2.easeOut, function (_a) {
|
|
2405
2425
|
var $interactive = _a.$interactive,
|
|
2406
2426
|
$disabled = _a.$disabled;
|
|
2407
2427
|
if ($disabled) return 'not-allowed';
|
|
@@ -2412,45 +2432,48 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
2412
2432
|
$disabled = _a.$disabled,
|
|
2413
2433
|
$selected = _a.$selected;
|
|
2414
2434
|
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$
|
|
2435
|
+
}, semantic$9.border.width.thick, semantic$9.color.border.interactive, semantic$9.border.focusOffset);
|
|
2416
2436
|
var StyledIconContainer$1 = styled.div.withConfig({
|
|
2417
2437
|
displayName: "ListItem__StyledIconContainer",
|
|
2418
2438
|
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:
|
|
2439
|
+
})(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
2440
|
var StyledTextContent = styled.div.withConfig({
|
|
2421
2441
|
displayName: "ListItem__StyledTextContent",
|
|
2422
2442
|
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$
|
|
2443
|
+
})(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
2444
|
var StyledRightContent = styled.div.withConfig({
|
|
2425
2445
|
displayName: "ListItem__StyledRightContent",
|
|
2426
2446
|
componentId: "sc-1wzzt21-4"
|
|
2427
|
-
})(templateObject_5$d || (templateObject_5$d = __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$
|
|
2447
|
+
})(templateObject_5$d || (templateObject_5$d = __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
2448
|
var StyledChevronIcon = styled.div.withConfig({
|
|
2429
2449
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2430
2450
|
return !prop.startsWith('$');
|
|
2431
2451
|
},
|
|
2432
2452
|
displayName: "ListItem__StyledChevronIcon",
|
|
2433
2453
|
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:
|
|
2454
|
+
})(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
2455
|
var $expanded = _a.$expanded;
|
|
2436
2456
|
return $expanded ? '180deg' : '0deg';
|
|
2437
|
-
});
|
|
2457
|
+
}, reducedMotion);
|
|
2438
2458
|
var StyledExpandedContent = styled.div.withConfig({
|
|
2439
2459
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2440
2460
|
return !prop.startsWith('$');
|
|
2441
2461
|
},
|
|
2442
2462
|
displayName: "ListItem__StyledExpandedContent",
|
|
2443
2463
|
componentId: "sc-1wzzt21-6"
|
|
2444
|
-
})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n overflow: hidden;\n transition: max-height
|
|
2464
|
+
})(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
2465
|
var $expanded = _a.$expanded;
|
|
2446
2466
|
return $expanded ? '1000px' : '0';
|
|
2447
2467
|
}, function (_a) {
|
|
2448
2468
|
var $expanded = _a.$expanded;
|
|
2449
2469
|
return $expanded ? '1' : '0';
|
|
2450
2470
|
}, function (_a) {
|
|
2471
|
+
var $expanded = _a.$expanded;
|
|
2472
|
+
return $expanded ? 'visible' : 'hidden';
|
|
2473
|
+
}, reducedMotion, duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, function (_a) {
|
|
2451
2474
|
var $expanded = _a.$expanded,
|
|
2452
2475
|
$spacing = _a.$spacing;
|
|
2453
|
-
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$
|
|
2476
|
+
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
2477
|
});
|
|
2455
2478
|
var ListItem = function ListItem(_a) {
|
|
2456
2479
|
var primary = _a.primary,
|
|
@@ -2565,22 +2588,74 @@ var ListItem = function ListItem(_a) {
|
|
|
2565
2588
|
ListItem.displayName = 'ListItem';
|
|
2566
2589
|
var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$9;
|
|
2567
2590
|
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2591
|
+
// How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils.
|
|
2592
|
+
var EXIT_DURATION_MS = parseInt(tokensJson.semantic.motion.duration.fast, 10);
|
|
2593
|
+
/**
|
|
2594
|
+
* Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit
|
|
2595
|
+
* animation can run before it unmounts (decision 0005).
|
|
2596
|
+
*/
|
|
2597
|
+
function usePresence(isOpen, exitMs) {
|
|
2598
|
+
if (exitMs === void 0) {
|
|
2599
|
+
exitMs = EXIT_DURATION_MS;
|
|
2600
|
+
}
|
|
2601
|
+
var _a = useState(isOpen),
|
|
2602
|
+
isMounted = _a[0],
|
|
2603
|
+
setIsMounted = _a[1];
|
|
2604
|
+
useEffect(function () {
|
|
2605
|
+
if (isOpen) {
|
|
2606
|
+
setIsMounted(true);
|
|
2607
|
+
return;
|
|
2608
|
+
}
|
|
2609
|
+
var timer = setTimeout(function () {
|
|
2610
|
+
return setIsMounted(false);
|
|
2611
|
+
}, exitMs);
|
|
2612
|
+
return function () {
|
|
2613
|
+
return clearTimeout(timer);
|
|
2614
|
+
};
|
|
2615
|
+
}, [isOpen, exitMs]);
|
|
2616
|
+
return {
|
|
2617
|
+
isPresent: isOpen || isMounted,
|
|
2618
|
+
isExiting: !isOpen && isMounted
|
|
2619
|
+
};
|
|
2620
|
+
}
|
|
2621
|
+
/**
|
|
2622
|
+
* Makes an element inert while `isInert` is true, so an exiting overlay's controls leave
|
|
2623
|
+
* the tab order and can't be activated. Set through the DOM because React 18 has no
|
|
2624
|
+
* `inert` prop.
|
|
2625
|
+
*/
|
|
2626
|
+
function useInert(ref, isInert) {
|
|
2627
|
+
useEffect(function () {
|
|
2628
|
+
var node = ref.current;
|
|
2629
|
+
if (!node) return;
|
|
2630
|
+
if (isInert) node.setAttribute('inert', '');else node.removeAttribute('inert');
|
|
2631
|
+
}, [ref, isInert]);
|
|
2632
|
+
}
|
|
2633
|
+
|
|
2634
|
+
var _a$5 = tokensJson.semantic,
|
|
2635
|
+
color$3 = _a$5.color,
|
|
2636
|
+
border$5 = _a$5.border,
|
|
2637
|
+
layout$1 = _a$5.spacing.layout,
|
|
2638
|
+
motion$3 = _a$5.motion,
|
|
2639
|
+
elevation$2 = _a$5.elevation;
|
|
2574
2640
|
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
2641
|
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
2642
|
var StyledOverlay$2 = styled.div.withConfig({
|
|
2577
2643
|
displayName: "ActionSheet__StyledOverlay",
|
|
2578
2644
|
componentId: "sc-regbol-0"
|
|
2579
|
-
})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color:
|
|
2645
|
+
})(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) {
|
|
2646
|
+
var $isExiting = _a.$isExiting;
|
|
2647
|
+
return $isExiting && exitAnimation;
|
|
2648
|
+
});
|
|
2580
2649
|
var StyledActionSheet = styled.div.withConfig({
|
|
2581
2650
|
displayName: "ActionSheet__StyledActionSheet",
|
|
2582
2651
|
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:
|
|
2652
|
+
})(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) {
|
|
2653
|
+
var $isExiting = _a.$isExiting;
|
|
2654
|
+
return $isExiting && exitAnimation;
|
|
2655
|
+
}, reducedMotion, fadeIn$2, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
|
|
2656
|
+
var $isExiting = _a.$isExiting;
|
|
2657
|
+
return $isExiting && exitAnimation;
|
|
2658
|
+
});
|
|
2584
2659
|
var StyledHeader$2 = styled.div.withConfig({
|
|
2585
2660
|
displayName: "ActionSheet__StyledHeader",
|
|
2586
2661
|
componentId: "sc-regbol-2"
|
|
@@ -2592,11 +2667,11 @@ var StyledHeaderContent = styled.div.withConfig({
|
|
|
2592
2667
|
var StyledCloseButton = styled.button.withConfig({
|
|
2593
2668
|
displayName: "ActionSheet__StyledCloseButton",
|
|
2594
2669
|
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);
|
|
2670
|
+
})(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
2671
|
var StyledActionsList = styled.ul.withConfig({
|
|
2597
2672
|
displayName: "ActionSheet__StyledActionsList",
|
|
2598
2673
|
componentId: "sc-regbol-5"
|
|
2599
|
-
})(templateObject_8$
|
|
2674
|
+
})(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
2675
|
/**
|
|
2601
2676
|
* ActionSheet component for bottom sheet modals
|
|
2602
2677
|
*
|
|
@@ -2678,6 +2753,10 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2678
2753
|
dataTestId = _a["data-testid"];
|
|
2679
2754
|
var sheetRef = useRef(null);
|
|
2680
2755
|
var previousActiveElement = useRef(null);
|
|
2756
|
+
var _e = usePresence(isOpen),
|
|
2757
|
+
isPresent = _e.isPresent,
|
|
2758
|
+
isExiting = _e.isExiting;
|
|
2759
|
+
useInert(sheetRef, isExiting);
|
|
2681
2760
|
// Store the element that had focus when sheet opened
|
|
2682
2761
|
useEffect(function () {
|
|
2683
2762
|
if (isOpen) {
|
|
@@ -2708,7 +2787,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2708
2787
|
};
|
|
2709
2788
|
document.addEventListener('keydown', handleKeyDown);
|
|
2710
2789
|
// Focus first focusable element (button or element with role="button")
|
|
2711
|
-
requestAnimationFrame(function () {
|
|
2790
|
+
var frame = requestAnimationFrame(function () {
|
|
2712
2791
|
var _a;
|
|
2713
2792
|
var firstFocusable = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled), [role="button"][tabindex]:not([aria-disabled="true"])');
|
|
2714
2793
|
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
@@ -2717,6 +2796,8 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2717
2796
|
var originalOverflow = document.body.style.overflow;
|
|
2718
2797
|
document.body.style.overflow = 'hidden';
|
|
2719
2798
|
return function () {
|
|
2799
|
+
// A quick close cancels the pending focus, so it can't pull focus back into the exiting sheet
|
|
2800
|
+
cancelAnimationFrame(frame);
|
|
2720
2801
|
document.removeEventListener('keydown', handleKeyDown);
|
|
2721
2802
|
document.body.style.overflow = originalOverflow;
|
|
2722
2803
|
// Return focus to previous element
|
|
@@ -2726,7 +2807,8 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2726
2807
|
};
|
|
2727
2808
|
}, [isOpen, onClose, closeOnEscape]);
|
|
2728
2809
|
var handleOverlayClick = function handleOverlayClick(e) {
|
|
2729
|
-
|
|
2810
|
+
// While exiting, the backdrop still catches clicks but doesn't close again
|
|
2811
|
+
if (!isExiting && closeOnOverlayClick && e.target === e.currentTarget) {
|
|
2730
2812
|
onClose();
|
|
2731
2813
|
}
|
|
2732
2814
|
};
|
|
@@ -2736,7 +2818,8 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2736
2818
|
onClose();
|
|
2737
2819
|
}
|
|
2738
2820
|
};
|
|
2739
|
-
|
|
2821
|
+
// Stays mounted while the exit fade runs, hidden from assistive technology
|
|
2822
|
+
if (!isPresent) return null;
|
|
2740
2823
|
// Find if there are any destructive actions to add divider
|
|
2741
2824
|
var destructiveIndex = actions.findIndex(function (a) {
|
|
2742
2825
|
return a.destructive;
|
|
@@ -2744,11 +2827,14 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2744
2827
|
var hasDestructive = destructiveIndex >= 0;
|
|
2745
2828
|
return /*#__PURE__*/createPortal(jsxs(Fragment, {
|
|
2746
2829
|
children: [jsx(StyledOverlay$2, {
|
|
2747
|
-
onClick: handleOverlayClick
|
|
2830
|
+
onClick: handleOverlayClick,
|
|
2831
|
+
"$isExiting": isExiting
|
|
2748
2832
|
}), jsxs(StyledActionSheet, {
|
|
2749
2833
|
ref: sheetRef,
|
|
2750
2834
|
role: "dialog",
|
|
2751
2835
|
"aria-modal": "true",
|
|
2836
|
+
"aria-hidden": isExiting || undefined,
|
|
2837
|
+
"$isExiting": isExiting,
|
|
2752
2838
|
"aria-labelledby": title ? 'action-sheet-title' : undefined,
|
|
2753
2839
|
"aria-describedby": description ? 'action-sheet-description' : undefined,
|
|
2754
2840
|
"data-testid": dataTestId,
|
|
@@ -2808,7 +2894,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2808
2894
|
})]
|
|
2809
2895
|
}), document.body);
|
|
2810
2896
|
};
|
|
2811
|
-
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8, templateObject_8$
|
|
2897
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8, templateObject_8$7;
|
|
2812
2898
|
|
|
2813
2899
|
function detectSpeechRecognitionConstructor(targetWindow) {
|
|
2814
2900
|
if (!targetWindow) return null;
|
|
@@ -2908,8 +2994,7 @@ function agentInputStateTransition(currentState, event) {
|
|
|
2908
2994
|
}
|
|
2909
2995
|
}
|
|
2910
2996
|
|
|
2911
|
-
var semantic$
|
|
2912
|
-
base$9 = tokensJson.base,
|
|
2997
|
+
var semantic$8 = tokensJson.semantic,
|
|
2913
2998
|
component$1 = tokensJson.component;
|
|
2914
2999
|
var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
|
|
2915
3000
|
var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
|
|
@@ -2918,7 +3003,7 @@ var rotateRing = keyframes(templateObject_1$p || (templateObject_1$p = __makeTem
|
|
|
2918
3003
|
var Container = styled.div.withConfig({
|
|
2919
3004
|
displayName: "AgentInput__Container",
|
|
2920
3005
|
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"])),
|
|
3006
|
+
})(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
3007
|
var ControlsRow = styled.div.withConfig({
|
|
2923
3008
|
displayName: "AgentInput__ControlsRow",
|
|
2924
3009
|
componentId: "sc-fhl996-1"
|
|
@@ -2926,51 +3011,51 @@ var ControlsRow = styled.div.withConfig({
|
|
|
2926
3011
|
var InputShell = styled.div.withConfig({
|
|
2927
3012
|
displayName: "AgentInput__InputShell",
|
|
2928
3013
|
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
|
|
3014
|
+
})(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
3015
|
var Input = styled.input.withConfig({
|
|
2931
3016
|
displayName: "AgentInput__Input",
|
|
2932
3017
|
componentId: "sc-fhl996-3"
|
|
2933
|
-
})(templateObject_5$b || (templateObject_5$b = __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"])),
|
|
3018
|
+
})(templateObject_5$b || (templateObject_5$b = __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
3019
|
var InputActions = styled.div.withConfig({
|
|
2935
3020
|
displayName: "AgentInput__InputActions",
|
|
2936
3021
|
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$
|
|
3022
|
+
})(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
3023
|
var CircularActionIconButton = styled(IconButton).withConfig({
|
|
2939
3024
|
displayName: "AgentInput__CircularActionIconButton",
|
|
2940
3025
|
componentId: "sc-fhl996-5"
|
|
2941
|
-
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$
|
|
3026
|
+
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$8.border.radius.circle);
|
|
2942
3027
|
var InputWrapper = styled.div.withConfig({
|
|
2943
3028
|
displayName: "AgentInput__InputWrapper",
|
|
2944
3029
|
componentId: "sc-fhl996-6"
|
|
2945
|
-
})(templateObject_8$
|
|
3030
|
+
})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n"], ["\n flex: 1;\n min-width: 0;\n"])));
|
|
2946
3031
|
var MicButtonWrapper = styled.div.withConfig({
|
|
2947
3032
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2948
3033
|
return !prop.startsWith('$');
|
|
2949
3034
|
},
|
|
2950
3035
|
displayName: "AgentInput__MicButtonWrapper",
|
|
2951
3036
|
componentId: "sc-fhl996-7"
|
|
2952
|
-
})(templateObject_9$
|
|
3037
|
+
})(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"])), semantic$8.border.radius.circle);
|
|
2953
3038
|
var MicListeningRing = styled.span.withConfig({
|
|
2954
3039
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2955
3040
|
return !prop.startsWith('$');
|
|
2956
3041
|
},
|
|
2957
3042
|
displayName: "AgentInput__MicListeningRing",
|
|
2958
3043
|
componentId: "sc-fhl996-8"
|
|
2959
|
-
})(templateObject_11$
|
|
3044
|
+
})(templateObject_11$3 || (templateObject_11$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: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\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: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\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'], function (_a) {
|
|
2960
3045
|
var $reducedMotion = _a.$reducedMotion;
|
|
2961
|
-
return !$reducedMotion && css(templateObject_10$
|
|
3046
|
+
return !$reducedMotion && css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n animation: ", " 1300ms linear infinite;\n "], ["\n animation: ", " 1300ms linear infinite;\n "])), rotateRing);
|
|
2962
3047
|
});
|
|
2963
3048
|
var StatusRow = styled.div.withConfig({
|
|
2964
3049
|
displayName: "AgentInput__StatusRow",
|
|
2965
3050
|
componentId: "sc-fhl996-9"
|
|
2966
|
-
})(templateObject_12$
|
|
3051
|
+
})(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"])), semantic$8.spacing.layout.md, semantic$8.spacing.layout['2xl']);
|
|
2967
3052
|
var StatusText = styled.div.withConfig({
|
|
2968
3053
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2969
3054
|
return !prop.startsWith('$');
|
|
2970
3055
|
},
|
|
2971
3056
|
displayName: "AgentInput__StatusText",
|
|
2972
3057
|
componentId: "sc-fhl996-10"
|
|
2973
|
-
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$
|
|
3058
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$8.spacing.layout.xl);
|
|
2974
3059
|
var StatusAnnouncement = styled.div.withConfig({
|
|
2975
3060
|
displayName: "AgentInput__StatusAnnouncement",
|
|
2976
3061
|
componentId: "sc-fhl996-11"
|
|
@@ -2978,21 +3063,21 @@ var StatusAnnouncement = styled.div.withConfig({
|
|
|
2978
3063
|
var MeterContainer = styled.div.withConfig({
|
|
2979
3064
|
displayName: "AgentInput__MeterContainer",
|
|
2980
3065
|
componentId: "sc-fhl996-12"
|
|
2981
|
-
})(templateObject_15$1 || (templateObject_15$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"])),
|
|
3066
|
+
})(templateObject_15$1 || (templateObject_15$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
3067
|
var MeterBar = styled.div.withConfig({
|
|
2983
3068
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2984
3069
|
return !prop.startsWith('$');
|
|
2985
3070
|
},
|
|
2986
3071
|
displayName: "AgentInput__MeterBar",
|
|
2987
3072
|
componentId: "sc-fhl996-13"
|
|
2988
|
-
})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height
|
|
3073
|
+
})(templateObject_16$1 || (templateObject_16$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
3074
|
var $height = _a.$height;
|
|
2990
3075
|
return "".concat($height * 100, "%");
|
|
2991
|
-
});
|
|
3076
|
+
}, semantic$8.motion.duration.fast, semantic$8.motion.easing.easeOut);
|
|
2992
3077
|
var VisuallyHiddenLabel = styled.label.withConfig({
|
|
2993
3078
|
displayName: "AgentInput__VisuallyHiddenLabel",
|
|
2994
3079
|
componentId: "sc-fhl996-14"
|
|
2995
|
-
})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n
|
|
3080
|
+
})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), visuallyHidden);
|
|
2996
3081
|
function getInitialState(hasText) {
|
|
2997
3082
|
return hasText ? 'typing' : 'idle';
|
|
2998
3083
|
}
|
|
@@ -3621,10 +3706,31 @@ var AgentInput = function AgentInput(_a) {
|
|
|
3621
3706
|
})]
|
|
3622
3707
|
});
|
|
3623
3708
|
};
|
|
3624
|
-
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$
|
|
3709
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, 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;
|
|
3625
3710
|
|
|
3626
|
-
var semantic$
|
|
3627
|
-
|
|
3711
|
+
var semantic$7 = tokensJson.semantic;
|
|
3712
|
+
var alert = tokensJson.component.alert;
|
|
3713
|
+
var _a$4 = semantic$7.motion,
|
|
3714
|
+
duration$1 = _a$4.duration,
|
|
3715
|
+
easing$1 = _a$4.easing;
|
|
3716
|
+
// Dismissing fades the alert out, then collapses the space it took (Ollie's call, #35).
|
|
3717
|
+
// Each half takes duration.fast, so the whole exit stays within the 300ms maximum (P6).
|
|
3718
|
+
var FADE_MS = parseInt(duration$1.fast, 10);
|
|
3719
|
+
var EXIT_MS = FADE_MS * 2;
|
|
3720
|
+
// The --alert-exit-* properties are the alert's height and vertical padding, measured
|
|
3721
|
+
// when it's dismissed, so nothing moves until the fade has finished
|
|
3722
|
+
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);
|
|
3723
|
+
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"
|
|
3724
|
+
// The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
|
|
3725
|
+
// (chosen when dismissed). A timer of the same length removes it if no animation event
|
|
3726
|
+
// arrives, for example where animations are disabled or the tab is hidden.
|
|
3727
|
+
// The generated names of the two exits (full, and reduced motion)
|
|
3728
|
+
])));
|
|
3729
|
+
// The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
|
|
3730
|
+
// (chosen when dismissed). A timer of the same length removes it if no animation event
|
|
3731
|
+
// arrives, for example where animations are disabled or the tab is hidden.
|
|
3732
|
+
// The generated names of the two exits (full, and reduced motion)
|
|
3733
|
+
var EXIT_ANIMATION_NAMES = [fadeThenCollapse.getName(), fadeOut.getName()];
|
|
3628
3734
|
// Default icons by variant
|
|
3629
3735
|
var variantIcons = {
|
|
3630
3736
|
error: 'crossCircle',
|
|
@@ -3652,56 +3758,60 @@ var StyledAlert = styled.div.withConfig({
|
|
|
3652
3758
|
},
|
|
3653
3759
|
displayName: "Alert__StyledAlert",
|
|
3654
3760
|
componentId: "sc-18tq5d-0"
|
|
3655
|
-
})(
|
|
3761
|
+
})(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
3762
|
var $inline = _a.$inline;
|
|
3657
3763
|
return $inline ? 'center' : 'flex-start';
|
|
3658
3764
|
}, function (_a) {
|
|
3659
3765
|
var $inline = _a.$inline;
|
|
3660
|
-
return $inline ? semantic$
|
|
3766
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
|
|
3661
3767
|
}, function (_a) {
|
|
3662
3768
|
var $inline = _a.$inline;
|
|
3663
|
-
return $inline ? semantic$
|
|
3664
|
-
},
|
|
3769
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
|
|
3770
|
+
}, semantic$7.border.radius.sm, semantic$7.border.width.thin, function (_a) {
|
|
3665
3771
|
var $variant = _a.$variant;
|
|
3666
3772
|
switch ($variant) {
|
|
3667
3773
|
case 'error':
|
|
3668
|
-
return "\n background-color: ".concat(semantic$
|
|
3774
|
+
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
3775
|
case 'warning':
|
|
3670
|
-
return "\n background-color: ".concat(semantic$
|
|
3776
|
+
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
3777
|
case 'success':
|
|
3672
|
-
return "\n background-color: ".concat(semantic$
|
|
3778
|
+
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
3779
|
case 'info':
|
|
3674
3780
|
default:
|
|
3675
|
-
return "\n background-color: ".concat(semantic$
|
|
3781
|
+
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
3782
|
}
|
|
3677
|
-
},
|
|
3783
|
+
}, semantic$7.breakpoint.md, function (_a) {
|
|
3678
3784
|
var $inline = _a.$inline;
|
|
3679
|
-
return $inline ? semantic$
|
|
3785
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.lg;
|
|
3786
|
+
}, function (_a) {
|
|
3787
|
+
var $isExiting = _a.$isExiting,
|
|
3788
|
+
$reducedExit = _a.$reducedExit;
|
|
3789
|
+
return $isExiting && css(templateObject_5$a || (templateObject_5$a = __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
3790
|
});
|
|
3681
3791
|
var StyledIconContainer = styled.div.withConfig({
|
|
3682
3792
|
displayName: "Alert__StyledIconContainer",
|
|
3683
3793
|
componentId: "sc-18tq5d-1"
|
|
3684
|
-
})(
|
|
3794
|
+
})(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
3795
|
var StyledContent$1 = styled.div.withConfig({
|
|
3686
3796
|
displayName: "Alert__StyledContent",
|
|
3687
3797
|
componentId: "sc-18tq5d-2"
|
|
3688
|
-
})(
|
|
3798
|
+
})(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
3799
|
var StyledTitle = styled.span.withConfig({
|
|
3690
3800
|
displayName: "Alert__StyledTitle",
|
|
3691
3801
|
componentId: "sc-18tq5d-3"
|
|
3692
|
-
})(
|
|
3802
|
+
})(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
3803
|
var StyledMessage = styled.span.withConfig({
|
|
3694
3804
|
displayName: "Alert__StyledMessage",
|
|
3695
3805
|
componentId: "sc-18tq5d-4"
|
|
3696
|
-
})(
|
|
3806
|
+
})(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
3807
|
var StyledActions = styled.div.withConfig({
|
|
3698
3808
|
displayName: "Alert__StyledActions",
|
|
3699
3809
|
componentId: "sc-18tq5d-5"
|
|
3700
|
-
})(
|
|
3810
|
+
})(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
3811
|
var StyledDismissButton = styled(IconButton).withConfig({
|
|
3702
3812
|
displayName: "Alert__StyledDismissButton",
|
|
3703
3813
|
componentId: "sc-18tq5d-6"
|
|
3704
|
-
})(
|
|
3814
|
+
})(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
3815
|
var Alert = function Alert(_a) {
|
|
3706
3816
|
var _b = _a.variant,
|
|
3707
3817
|
variant = _b === void 0 ? 'info' : _b,
|
|
@@ -3717,16 +3827,70 @@ var Alert = function Alert(_a) {
|
|
|
3717
3827
|
ariaLive = _e === void 0 ? 'polite' : _e,
|
|
3718
3828
|
dataTestId = _a["data-testid"],
|
|
3719
3829
|
props = __rest(_a, ["variant", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
|
|
3720
|
-
var _f = React.useState(
|
|
3721
|
-
|
|
3722
|
-
|
|
3830
|
+
var _f = React.useState('visible'),
|
|
3831
|
+
phase = _f[0],
|
|
3832
|
+
setPhase = _f[1];
|
|
3833
|
+
var _g = React.useState(false),
|
|
3834
|
+
reducedExit = _g[0],
|
|
3835
|
+
setReducedExit = _g[1];
|
|
3836
|
+
var _h = React.useState(),
|
|
3837
|
+
exitStyle = _h[0],
|
|
3838
|
+
setExitStyle = _h[1];
|
|
3839
|
+
var alertRef = React.useRef(null);
|
|
3840
|
+
// While it exits, its controls leave the tab order and can't be activated
|
|
3841
|
+
useInert(alertRef, phase === 'exiting');
|
|
3842
|
+
var onDismissRef = React.useRef(onDismiss);
|
|
3843
|
+
React.useEffect(function () {
|
|
3844
|
+
onDismissRef.current = onDismiss;
|
|
3845
|
+
}, [onDismiss]);
|
|
3723
3846
|
var handleDismiss = function handleDismiss() {
|
|
3724
|
-
|
|
3725
|
-
|
|
3847
|
+
var node = alertRef.current;
|
|
3848
|
+
if (node) {
|
|
3849
|
+
var style = window.getComputedStyle(node);
|
|
3850
|
+
var paddingTop = style.paddingTop,
|
|
3851
|
+
paddingBottom = style.paddingBottom;
|
|
3852
|
+
// max-height applies to the content box unless the alert is border-box (it depends on
|
|
3853
|
+
// the consumer's reset), so measure whichever box it uses; nothing moves at the click
|
|
3854
|
+
var height = Math.max(0, style.boxSizing === 'border-box' ? node.offsetHeight : node.offsetHeight - parseFloat(paddingTop) - parseFloat(paddingBottom) - parseFloat(style.borderTopWidth) - parseFloat(style.borderBottomWidth));
|
|
3855
|
+
setExitStyle({
|
|
3856
|
+
'--alert-exit-height': "".concat(height, "px"),
|
|
3857
|
+
'--alert-exit-padding-top': paddingTop,
|
|
3858
|
+
'--alert-exit-padding-bottom': paddingBottom
|
|
3859
|
+
});
|
|
3860
|
+
}
|
|
3861
|
+
setReducedExit(typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
3862
|
+
setPhase('exiting');
|
|
3726
3863
|
};
|
|
3727
|
-
|
|
3864
|
+
React.useEffect(function () {
|
|
3865
|
+
if (phase !== 'exiting') return;
|
|
3866
|
+
var timer = setTimeout(function () {
|
|
3867
|
+
return setPhase('dismissed');
|
|
3868
|
+
}, reducedExit ? FADE_MS : EXIT_MS);
|
|
3869
|
+
return function () {
|
|
3870
|
+
return clearTimeout(timer);
|
|
3871
|
+
};
|
|
3872
|
+
}, [phase, reducedExit]);
|
|
3873
|
+
// onDismiss fires once the alert has been removed from the DOM, so a consumer that
|
|
3874
|
+
// unmounts it in onDismiss still gets the animation, and can't observe it
|
|
3875
|
+
React.useEffect(function () {
|
|
3876
|
+
var _a;
|
|
3877
|
+
if (phase === 'dismissed') (_a = onDismissRef.current) === null || _a === void 0 ? void 0 : _a.call(onDismissRef);
|
|
3878
|
+
}, [phase]);
|
|
3879
|
+
if (phase === 'dismissed') {
|
|
3728
3880
|
return null;
|
|
3729
3881
|
}
|
|
3882
|
+
var isExiting = phase === 'exiting';
|
|
3883
|
+
// Consumers can pass extra HTML attributes, including style, aria-hidden and onAnimationEnd
|
|
3884
|
+
var forwarded = props;
|
|
3885
|
+
var handleAnimationEnd = function handleAnimationEnd(event) {
|
|
3886
|
+
var _a;
|
|
3887
|
+
(_a = forwarded.onAnimationEnd) === null || _a === void 0 ? void 0 : _a.call(forwarded, event);
|
|
3888
|
+
// Only the exit itself ends the dismissal: not animations bubbling up from children,
|
|
3889
|
+
// on pseudo-elements, or other animations a consumer puts on the alert
|
|
3890
|
+
if (isExiting && event.target === event.currentTarget && !event.pseudoElement && EXIT_ANIMATION_NAMES.includes(event.animationName)) {
|
|
3891
|
+
setPhase('dismissed');
|
|
3892
|
+
}
|
|
3893
|
+
};
|
|
3730
3894
|
// Get the icon for the current variant
|
|
3731
3895
|
var iconName = variantIcons[variant];
|
|
3732
3896
|
var alertIconColor = variantIconColors[variant];
|
|
@@ -3738,8 +3902,14 @@ var Alert = function Alert(_a) {
|
|
|
3738
3902
|
"aria-live": ariaLive,
|
|
3739
3903
|
"$variant": variant,
|
|
3740
3904
|
"$inline": inline,
|
|
3905
|
+
"$isExiting": isExiting,
|
|
3906
|
+
"$reducedExit": reducedExit,
|
|
3741
3907
|
"data-testid": dataTestId
|
|
3742
3908
|
}, props, {
|
|
3909
|
+
ref: alertRef,
|
|
3910
|
+
"aria-hidden": isExiting ? true : forwarded['aria-hidden'],
|
|
3911
|
+
style: isExiting ? __assign(__assign({}, forwarded.style), exitStyle) : forwarded.style,
|
|
3912
|
+
onAnimationEnd: handleAnimationEnd,
|
|
3743
3913
|
children: [jsx(StyledIconContainer, {
|
|
3744
3914
|
"aria-hidden": "true",
|
|
3745
3915
|
children: jsx(Icon, {
|
|
@@ -3769,9 +3939,9 @@ var Alert = function Alert(_a) {
|
|
|
3769
3939
|
}));
|
|
3770
3940
|
};
|
|
3771
3941
|
Alert.displayName = 'Alert';
|
|
3772
|
-
var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6;
|
|
3942
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2;
|
|
3773
3943
|
|
|
3774
|
-
var _a$3, _b$1
|
|
3944
|
+
var _a$3, _b$1;
|
|
3775
3945
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
3776
3946
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
3777
3947
|
componentId: "sc-7ouzg5-0"
|
|
@@ -3779,7 +3949,7 @@ var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
|
3779
3949
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
3780
3950
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
3781
3951
|
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:
|
|
3952
|
+
})(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
3953
|
var BreadcrumbSeparator = styled.span.withConfig({
|
|
3784
3954
|
displayName: "Breadcrumbs__BreadcrumbSeparator",
|
|
3785
3955
|
componentId: "sc-7ouzg5-2"
|
|
@@ -3836,7 +4006,7 @@ var templateObject_1$n, templateObject_2$i, templateObject_3$g;
|
|
|
3836
4006
|
var CardSmallStyled = styled.div.withConfig({
|
|
3837
4007
|
displayName: "CardSmall__CardSmallStyled",
|
|
3838
4008
|
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:
|
|
4009
|
+
})(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
4010
|
var CardSmall = function CardSmall(_a) {
|
|
3841
4011
|
var title = _a.title,
|
|
3842
4012
|
picture = _a.picture,
|
|
@@ -3890,11 +4060,11 @@ var CardSmall = function CardSmall(_a) {
|
|
|
3890
4060
|
};
|
|
3891
4061
|
var templateObject_1$m;
|
|
3892
4062
|
|
|
3893
|
-
var border$4 = tokensJson.
|
|
4063
|
+
var border$4 = tokensJson.semantic.border;
|
|
3894
4064
|
var CardLargeStyled = styled.div.withConfig({
|
|
3895
4065
|
displayName: "CardLarge__CardLargeStyled",
|
|
3896
4066
|
componentId: "sc-1rfgdzl-0"
|
|
3897
|
-
})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n max-width:
|
|
4067
|
+
})(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
4068
|
var CardLarge = function CardLarge(_a) {
|
|
3899
4069
|
var title = _a.title,
|
|
3900
4070
|
excerpt = _a.excerpt,
|
|
@@ -3976,11 +4146,11 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
3976
4146
|
},
|
|
3977
4147
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
3978
4148
|
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:
|
|
4149
|
+
})(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
4150
|
/**
|
|
3981
4151
|
* Container for checkbox with proper spacing and alignment
|
|
3982
4152
|
* 48px min-height for touch target (8px grid aligned)
|
|
3983
|
-
*/])), tokensJson.component.input["default"].borderRadius, tokensJson.component.input["default"].borderWidth, function (props) {
|
|
4153
|
+
*/])), 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
4154
|
return props.$checked || props.$indeterminate ? tokensJson.semantic.color.background.inverse : tokensJson.component.input["default"].backgroundColor;
|
|
3985
4155
|
}, function (props) {
|
|
3986
4156
|
if (props.$state === 'error') return tokensJson.component.input.error.borderColor;
|
|
@@ -3988,7 +4158,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
3988
4158
|
return tokensJson.component.input["default"].borderColor;
|
|
3989
4159
|
}, function (props) {
|
|
3990
4160
|
return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
|
|
3991
|
-
}, HiddenCheckboxInput, function (props) {
|
|
4161
|
+
}, tokensJson.semantic.motion.duration.fast, tokensJson.semantic.motion.easing.easeOut, HiddenCheckboxInput, function (props) {
|
|
3992
4162
|
return props.$state === 'error' ? tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? tokensJson.semantic.border.strong : tokensJson.component.input.hover.borderColor;
|
|
3993
4163
|
}, HiddenCheckboxInput, tokensJson.component.input.focus.outline, tokensJson.component.input.focus.outlineOffset, function (props) {
|
|
3994
4164
|
return props.$state === 'error' ? tokensJson.component.input.error.focus.borderColor : tokensJson.component.input.focus.borderColor;
|
|
@@ -4009,12 +4179,12 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
4009
4179
|
},
|
|
4010
4180
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
4011
4181
|
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:
|
|
4182
|
+
})(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
4183
|
/**
|
|
4014
4184
|
* Label text with proper typography
|
|
4015
|
-
*/])), tokensJson.
|
|
4185
|
+
*/])), tokensJson.semantic.spacing.layout.md, function (props) {
|
|
4016
4186
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
4017
|
-
}, function (props) {
|
|
4187
|
+
}, tokensJson.component.checkbox.row.minHeight, function (props) {
|
|
4018
4188
|
return props.$labelPosition === 'left' ? 'row-reverse' : 'row';
|
|
4019
4189
|
});
|
|
4020
4190
|
/**
|
|
@@ -4034,7 +4204,7 @@ var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4
|
|
|
4034
4204
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
4035
4205
|
displayName: "Checkbox__StyledFieldContainer",
|
|
4036
4206
|
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.
|
|
4207
|
+
})(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
4208
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
4039
4209
|
displayName: "Checkbox__StyledHelperText",
|
|
4040
4210
|
componentId: "sc-vquz3v-1"
|
|
@@ -4060,9 +4230,9 @@ var StyledHelperText$4 = styled.span.withConfig({
|
|
|
4060
4230
|
* required
|
|
4061
4231
|
* />
|
|
4062
4232
|
* ```
|
|
4063
|
-
*/])), tokensJson.
|
|
4064
|
-
return props.$error ? tokensJson.
|
|
4065
|
-
}, tokensJson.
|
|
4233
|
+
*/])), tokensJson.component.field.helperText.typography, function (props) {
|
|
4234
|
+
return props.$error ? tokensJson.component.field.helperText.colorError : tokensJson.component.field.helperText.color;
|
|
4235
|
+
}, tokensJson.semantic.spacing.layout['5xl']);
|
|
4066
4236
|
/**
|
|
4067
4237
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
4068
4238
|
*
|
|
@@ -4187,16 +4357,16 @@ var templateObject_1$i;
|
|
|
4187
4357
|
var _a$2 = tokensJson.semantic,
|
|
4188
4358
|
color$2 = _a$2.color,
|
|
4189
4359
|
border$3 = _a$2.border,
|
|
4190
|
-
spacing$2 = _a$2.spacing
|
|
4191
|
-
_a$2.motion;
|
|
4360
|
+
spacing$2 = _a$2.spacing,
|
|
4361
|
+
motion$2 = _a$2.motion;
|
|
4192
4362
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
4193
4363
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
4194
4364
|
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
|
|
4365
|
+
})(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
4366
|
var $isExpanded = _a.$isExpanded,
|
|
4197
4367
|
$needsExpansion = _a.$needsExpansion;
|
|
4198
4368
|
return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
|
|
4199
|
-
}, spacing$2.layout.sm, function (_a) {
|
|
4369
|
+
}, spacing$2.layout.sm, motion$2.duration.slow, motion$2.easing.easeInOut, reducedMotion, function (_a) {
|
|
4200
4370
|
var $maxHeight = _a.$maxHeight,
|
|
4201
4371
|
$isExpanded = _a.$isExpanded,
|
|
4202
4372
|
$needsExpansion = _a.$needsExpansion;
|
|
@@ -4216,7 +4386,7 @@ var CopyButtonWrapper = styled.div.withConfig({
|
|
|
4216
4386
|
var ExpandButtonWrapper = styled.div.withConfig({
|
|
4217
4387
|
displayName: "CodeBlock__ExpandButtonWrapper",
|
|
4218
4388
|
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:
|
|
4389
|
+
})(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
4390
|
var $hasGradient = _a.$hasGradient;
|
|
4221
4391
|
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
4392
|
});
|
|
@@ -4379,9 +4549,9 @@ var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4
|
|
|
4379
4549
|
var StyledHeader$1 = styled.div.withConfig({
|
|
4380
4550
|
displayName: "DateGroup__StyledHeader",
|
|
4381
4551
|
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:
|
|
4552
|
+
})(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
4553
|
var $sticky = _a.$sticky;
|
|
4384
|
-
return $sticky && "\n position: sticky;\n top: 0;\n z-index:
|
|
4554
|
+
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
4555
|
});
|
|
4386
4556
|
var StyledLeftSection = styled.div.withConfig({
|
|
4387
4557
|
displayName: "DateGroup__StyledLeftSection",
|
|
@@ -4468,16 +4638,16 @@ var DateGroup = function DateGroup(_a) {
|
|
|
4468
4638
|
};
|
|
4469
4639
|
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
4470
4640
|
|
|
4471
|
-
var semantic$
|
|
4641
|
+
var semantic$6 = tokensJson.semantic;
|
|
4472
4642
|
var StyledContainer$1 = styled.div.withConfig({
|
|
4473
4643
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4474
4644
|
return !prop.startsWith('$');
|
|
4475
4645
|
},
|
|
4476
4646
|
displayName: "EmptyState__StyledContainer",
|
|
4477
4647
|
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:
|
|
4648
|
+
})(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
4649
|
var $size = _a.$size;
|
|
4480
|
-
return $size === 'small' ? semantic$
|
|
4650
|
+
return $size === 'small' ? semantic$6.spacing.layout['4xl'] : $size === 'large' ? semantic$6.spacing.layout['8xl'] : semantic$6.spacing.layout['6xl'];
|
|
4481
4651
|
});
|
|
4482
4652
|
var StyledIllustration = styled.div.withConfig({
|
|
4483
4653
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -4487,20 +4657,20 @@ var StyledIllustration = styled.div.withConfig({
|
|
|
4487
4657
|
componentId: "sc-1u5hxh-1"
|
|
4488
4658
|
})(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
4659
|
var $size = _a.$size;
|
|
4490
|
-
return $size === 'small' ?
|
|
4660
|
+
return $size === 'small' ? tokensJson.component.emptyState.illustration.small : $size === 'large' ? tokensJson.component.emptyState.illustration.large : tokensJson.component.emptyState.illustration.medium;
|
|
4491
4661
|
}, function (_a) {
|
|
4492
4662
|
var $size = _a.$size;
|
|
4493
|
-
return $size === 'small' ?
|
|
4494
|
-
}, semantic$
|
|
4663
|
+
return $size === 'small' ? tokensJson.component.emptyState.illustration.small : $size === 'large' ? tokensJson.component.emptyState.illustration.large : tokensJson.component.emptyState.illustration.medium;
|
|
4664
|
+
}, semantic$6.spacing.layout['2xl'], function (_a) {
|
|
4495
4665
|
var $variant = _a.$variant;
|
|
4496
|
-
return $variant === 'error' ? semantic$
|
|
4666
|
+
return $variant === 'error' ? semantic$6.color.icon.error : $variant === 'success' ? semantic$6.color.icon.success : semantic$6.color.icon.subdued;
|
|
4497
4667
|
});
|
|
4498
4668
|
var StyledTextContainer = styled.div.withConfig({
|
|
4499
4669
|
displayName: "EmptyState__StyledTextContainer",
|
|
4500
4670
|
componentId: "sc-1u5hxh-2"
|
|
4501
|
-
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width:
|
|
4671
|
+
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width: ", ";\n margin-bottom: ", ";\n"], ["\n max-width: ", ";\n margin-bottom: ", ";\n"
|
|
4502
4672
|
// Map illustration type to icon name
|
|
4503
|
-
])), semantic$
|
|
4673
|
+
])), tokensJson.component.emptyState.text.maxWidth, semantic$6.spacing.layout['2xl']);
|
|
4504
4674
|
// Map illustration type to icon name
|
|
4505
4675
|
var illustrationToIcon = {
|
|
4506
4676
|
search: 'search',
|
|
@@ -4555,7 +4725,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4555
4725
|
children: title
|
|
4556
4726
|
}), jsx("div", {
|
|
4557
4727
|
style: {
|
|
4558
|
-
marginTop: semantic$
|
|
4728
|
+
marginTop: semantic$6.spacing.layout.md
|
|
4559
4729
|
},
|
|
4560
4730
|
children: jsx(Typography, {
|
|
4561
4731
|
variant: "body",
|
|
@@ -4565,7 +4735,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4565
4735
|
})]
|
|
4566
4736
|
}), (action || secondaryAction) && jsx(Box, {
|
|
4567
4737
|
width: "100%",
|
|
4568
|
-
maxWidth:
|
|
4738
|
+
maxWidth: tokensJson.component.emptyState.actions.maxWidth,
|
|
4569
4739
|
children: jsxs(Stack, {
|
|
4570
4740
|
direction: "column",
|
|
4571
4741
|
gap: "sm",
|
|
@@ -4587,25 +4757,25 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4587
4757
|
};
|
|
4588
4758
|
var templateObject_1$f, templateObject_2$d, templateObject_3$c;
|
|
4589
4759
|
|
|
4590
|
-
var _a$1 = tokensJson.
|
|
4591
|
-
spacing$1 = _a$1.spacing,
|
|
4760
|
+
var _a$1 = tokensJson.semantic,
|
|
4761
|
+
spacing$1 = _a$1.spacing.layout,
|
|
4592
4762
|
border$2 = _a$1.border;
|
|
4593
4763
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
4594
4764
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
4595
4765
|
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:
|
|
4766
|
+
})(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
4767
|
var ImageWrapper = styled.div.withConfig({
|
|
4598
4768
|
displayName: "FeatureBlock__ImageWrapper",
|
|
4599
4769
|
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.
|
|
4770
|
+
})(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
4771
|
var ContentSection = styled.div.withConfig({
|
|
4602
4772
|
displayName: "FeatureBlock__ContentSection",
|
|
4603
4773
|
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[
|
|
4774
|
+
})(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
4775
|
var ButtonWrapper = styled.div.withConfig({
|
|
4606
4776
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
4607
4777
|
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
|
|
4778
|
+
})(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
4779
|
var ContentWrapper = styled.div.withConfig({
|
|
4610
4780
|
displayName: "FeatureBlock__ContentWrapper",
|
|
4611
4781
|
componentId: "sc-1mi4lso-4"
|
|
@@ -4668,15 +4838,18 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
4668
4838
|
};
|
|
4669
4839
|
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
|
|
4670
4840
|
|
|
4671
|
-
var _a = tokensJson.
|
|
4672
|
-
|
|
4673
|
-
|
|
4841
|
+
var _a = tokensJson.semantic,
|
|
4842
|
+
color$1 = _a.color,
|
|
4843
|
+
border$1 = _a.border,
|
|
4674
4844
|
zIndex = _a.zIndex,
|
|
4675
|
-
|
|
4676
|
-
|
|
4677
|
-
|
|
4678
|
-
|
|
4679
|
-
input$1 =
|
|
4845
|
+
elevation$1 = _a.elevation,
|
|
4846
|
+
motion$1 = _a.motion,
|
|
4847
|
+
spacing = _a.spacing.layout,
|
|
4848
|
+
_b = tokensJson.component,
|
|
4849
|
+
input$1 = _b.input,
|
|
4850
|
+
field$3 = _b.field;
|
|
4851
|
+
var duration = motion$1.duration,
|
|
4852
|
+
easing = motion$1.easing;
|
|
4680
4853
|
var DropdownContainer = styled.div.withConfig({
|
|
4681
4854
|
displayName: "Dropdown__DropdownContainer",
|
|
4682
4855
|
componentId: "sc-kz07c4-0"
|
|
@@ -4687,10 +4860,10 @@ var DropdownTrigger = styled.button.withConfig({
|
|
|
4687
4860
|
},
|
|
4688
4861
|
displayName: "Dropdown__DropdownTrigger",
|
|
4689
4862
|
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
|
|
4863
|
+
})(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
4864
|
var $hasError = _a.$hasError;
|
|
4692
4865
|
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) {
|
|
4866
|
+
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, duration.normal, easing.easeInOut, duration.normal, easing.easeInOut, function (_a) {
|
|
4694
4867
|
var $hasError = _a.$hasError;
|
|
4695
4868
|
return $hasError ? input$1.error.hover.borderColor : input$1.hover.borderColor;
|
|
4696
4869
|
}, function (_a) {
|
|
@@ -4707,17 +4880,17 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
4707
4880
|
},
|
|
4708
4881
|
displayName: "Dropdown__DropdownIcon",
|
|
4709
4882
|
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
|
|
4883
|
+
})(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
4884
|
var $isOpen = _a.$isOpen;
|
|
4712
4885
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
4713
|
-
});
|
|
4886
|
+
}, reducedMotion);
|
|
4714
4887
|
var DropdownMenu = styled.div.withConfig({
|
|
4715
4888
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4716
4889
|
return !prop.startsWith('$');
|
|
4717
4890
|
},
|
|
4718
4891
|
displayName: "Dropdown__DropdownMenu",
|
|
4719
4892
|
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
|
|
4893
|
+
})(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
4894
|
var $isOpen = _a.$isOpen;
|
|
4722
4895
|
return $isOpen ? 1 : 0;
|
|
4723
4896
|
}, function (_a) {
|
|
@@ -4725,28 +4898,28 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
4725
4898
|
return $isOpen ? 'visible' : 'hidden';
|
|
4726
4899
|
}, function (_a) {
|
|
4727
4900
|
var $isOpen = _a.$isOpen;
|
|
4728
|
-
return $isOpen ? 'translateY(0)' :
|
|
4729
|
-
});
|
|
4901
|
+
return $isOpen ? 'translateY(0)' : "translateY(-".concat(spacing.sm, ")");
|
|
4902
|
+
}, duration.fast, easing.easeOut, tokensJson.semantic.size.menu.maxHeight, reducedMotion);
|
|
4730
4903
|
var DropdownOption = styled.button.withConfig({
|
|
4731
4904
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4732
4905
|
return !prop.startsWith('$');
|
|
4733
4906
|
},
|
|
4734
4907
|
displayName: "Dropdown__DropdownOption",
|
|
4735
4908
|
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
|
|
4909
|
+
})(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
4910
|
var $isSelected = _a.$isSelected,
|
|
4738
4911
|
$isFocused = _a.$isFocused;
|
|
4739
4912
|
if ($isFocused) return color$1.background.surface;
|
|
4740
4913
|
if ($isSelected) return color$1.background.surface;
|
|
4741
4914
|
return 'transparent';
|
|
4742
|
-
}, input$1["default"].font, input$1["default"].textColor, color$1.background.surface, color$1.background.surface, border$1.subtle);
|
|
4915
|
+
}, input$1["default"].font, input$1["default"].textColor, duration.fast, easing.easeOut, color$1.background.surface, color$1.background.surface, border$1.subtle);
|
|
4743
4916
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
4744
4917
|
displayName: "Dropdown__StyledHelperText",
|
|
4745
4918
|
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
|
|
4919
|
+
})(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
4920
|
var $hasError = _a.$hasError;
|
|
4748
|
-
return $hasError ?
|
|
4749
|
-
},
|
|
4921
|
+
return $hasError ? field$3.helperText.colorError : field$3.helperText.color;
|
|
4922
|
+
}, field$3.gap);
|
|
4750
4923
|
var Dropdown = function Dropdown(_a) {
|
|
4751
4924
|
var options = _a.options,
|
|
4752
4925
|
value = _a.value,
|
|
@@ -4867,7 +5040,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
4867
5040
|
htmlFor: dropdownId,
|
|
4868
5041
|
style: {
|
|
4869
5042
|
display: 'block',
|
|
4870
|
-
marginBottom:
|
|
5043
|
+
marginBottom: field$3.gap
|
|
4871
5044
|
},
|
|
4872
5045
|
children: jsx(Typography, {
|
|
4873
5046
|
variant: "label",
|
|
@@ -4922,7 +5095,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
4922
5095
|
};
|
|
4923
5096
|
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
|
|
4924
5097
|
|
|
4925
|
-
var semantic$
|
|
5098
|
+
var semantic$5 = tokensJson.semantic;
|
|
4926
5099
|
var StyledList = styled.ul.withConfig({
|
|
4927
5100
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4928
5101
|
return !prop.startsWith('$');
|
|
@@ -4931,7 +5104,7 @@ var StyledList = styled.ul.withConfig({
|
|
|
4931
5104
|
componentId: "sc-1irksg5-0"
|
|
4932
5105
|
})(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
5106
|
var $dividers = _a.$dividers;
|
|
4934
|
-
return $dividers && "\n > li:not(:last-child) {\n border-bottom:
|
|
5107
|
+
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
5108
|
});
|
|
4936
5109
|
var List = function List(_a) {
|
|
4937
5110
|
var children = _a.children,
|
|
@@ -4955,20 +5128,19 @@ var List = function List(_a) {
|
|
|
4955
5128
|
List.displayName = 'List';
|
|
4956
5129
|
var templateObject_1$c;
|
|
4957
5130
|
|
|
4958
|
-
var semantic$
|
|
4959
|
-
|
|
4960
|
-
|
|
4961
|
-
|
|
4962
|
-
|
|
4963
|
-
|
|
4964
|
-
semantic$7.motion;
|
|
5131
|
+
var semantic$4 = tokensJson.semantic;
|
|
5132
|
+
var layout = semantic$4.spacing.layout,
|
|
5133
|
+
color = semantic$4.color,
|
|
5134
|
+
border = semantic$4.border,
|
|
5135
|
+
elevation = semantic$4.elevation,
|
|
5136
|
+
motion = semantic$4.motion;
|
|
4965
5137
|
// ---------------------------------------------------------------------------
|
|
4966
5138
|
// Size map
|
|
4967
5139
|
// ---------------------------------------------------------------------------
|
|
4968
5140
|
var sizeToWidth = {
|
|
4969
|
-
small:
|
|
4970
|
-
medium:
|
|
4971
|
-
large:
|
|
5141
|
+
small: tokensJson.semantic.size.overlay.sm,
|
|
5142
|
+
medium: tokensJson.semantic.size.overlay.md,
|
|
5143
|
+
large: tokensJson.semantic.size.overlay.lg
|
|
4972
5144
|
};
|
|
4973
5145
|
// ---------------------------------------------------------------------------
|
|
4974
5146
|
// Animations
|
|
@@ -4985,17 +5157,29 @@ var scaleIn = keyframes(templateObject_2$a || (templateObject_2$a = __makeTempla
|
|
|
4985
5157
|
var StyledOverlay$1 = styled.div.withConfig({
|
|
4986
5158
|
displayName: "Modal__StyledOverlay",
|
|
4987
5159
|
componentId: "sc-1d3g5gh-0"
|
|
4988
|
-
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color:
|
|
5160
|
+
})(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) {
|
|
5161
|
+
var $isExiting = _a.$isExiting;
|
|
5162
|
+
return $isExiting && exitAnimation;
|
|
5163
|
+
}));
|
|
4989
5164
|
var StyledDialog = styled.div.withConfig({
|
|
4990
5165
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4991
5166
|
return !prop.startsWith('$');
|
|
4992
5167
|
},
|
|
4993
5168
|
displayName: "Modal__StyledDialog",
|
|
4994
5169
|
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:
|
|
5170
|
+
})(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
5171
|
var $width = _a.$width;
|
|
4997
5172
|
return $width;
|
|
4998
|
-
}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", "
|
|
5173
|
+
}, 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) {
|
|
5174
|
+
var $isExiting = _a.$isExiting;
|
|
5175
|
+
return $isExiting && exitAnimation;
|
|
5176
|
+
}), reducedMotion, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5177
|
+
var $isExiting = _a.$isExiting;
|
|
5178
|
+
return $isExiting && exitAnimation;
|
|
5179
|
+
}, semantic$4.breakpoint.md, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5180
|
+
var $isExiting = _a.$isExiting;
|
|
5181
|
+
return $isExiting && exitAnimation;
|
|
5182
|
+
});
|
|
4999
5183
|
var StyledHeader = styled.div.withConfig({
|
|
5000
5184
|
displayName: "Modal__StyledHeader",
|
|
5001
5185
|
componentId: "sc-1d3g5gh-2"
|
|
@@ -5003,7 +5187,7 @@ var StyledHeader = styled.div.withConfig({
|
|
|
5003
5187
|
var StyledBody = styled.div.withConfig({
|
|
5004
5188
|
displayName: "Modal__StyledBody",
|
|
5005
5189
|
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,
|
|
5190
|
+
})(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
5191
|
var StyledFooter = styled.div.withConfig({
|
|
5008
5192
|
displayName: "Modal__StyledFooter",
|
|
5009
5193
|
componentId: "sc-1d3g5gh-4"
|
|
@@ -5057,6 +5241,10 @@ var Modal = function Modal(_a) {
|
|
|
5057
5241
|
ariaDescribedBy = _a["aria-describedby"];
|
|
5058
5242
|
var dialogRef = useRef(null);
|
|
5059
5243
|
var previousFocusRef = useRef(null);
|
|
5244
|
+
var _e = usePresence(isOpen),
|
|
5245
|
+
isPresent = _e.isPresent,
|
|
5246
|
+
isExiting = _e.isExiting;
|
|
5247
|
+
useInert(dialogRef, isExiting);
|
|
5060
5248
|
// -----------------------------------------------------------------------
|
|
5061
5249
|
// Focus & scroll-lock management
|
|
5062
5250
|
// -----------------------------------------------------------------------
|
|
@@ -5108,19 +5296,22 @@ var Modal = function Modal(_a) {
|
|
|
5108
5296
|
// Overlay click
|
|
5109
5297
|
// -----------------------------------------------------------------------
|
|
5110
5298
|
var handleOverlayClick = function handleOverlayClick(event) {
|
|
5111
|
-
|
|
5299
|
+
// While exiting, the backdrop still catches clicks but doesn't close again
|
|
5300
|
+
if (!isExiting && closeOnOverlayClick && event.target === event.currentTarget) {
|
|
5112
5301
|
onClose();
|
|
5113
5302
|
}
|
|
5114
5303
|
};
|
|
5115
5304
|
// -----------------------------------------------------------------------
|
|
5116
5305
|
// Render
|
|
5117
5306
|
// -----------------------------------------------------------------------
|
|
5118
|
-
|
|
5307
|
+
// Stays mounted while the exit fade runs, hidden from assistive technology
|
|
5308
|
+
if (!isPresent) return null;
|
|
5119
5309
|
var titleId = dataTestId ? "".concat(dataTestId, "-title") : 'modal-title';
|
|
5120
5310
|
var width = sizeToWidth[size];
|
|
5121
5311
|
var modal = jsxs(Fragment, {
|
|
5122
5312
|
children: [jsx(StyledOverlay$1, {
|
|
5123
5313
|
onClick: handleOverlayClick,
|
|
5314
|
+
"$isExiting": isExiting,
|
|
5124
5315
|
"data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'modal-overlay'
|
|
5125
5316
|
}), jsxs(StyledDialog, {
|
|
5126
5317
|
ref: dialogRef,
|
|
@@ -5129,8 +5320,10 @@ var Modal = function Modal(_a) {
|
|
|
5129
5320
|
"aria-label": ariaLabel || title,
|
|
5130
5321
|
"aria-labelledby": titleId,
|
|
5131
5322
|
"aria-describedby": ariaDescribedBy,
|
|
5323
|
+
"aria-hidden": isExiting || undefined,
|
|
5132
5324
|
tabIndex: -1,
|
|
5133
5325
|
"$width": width,
|
|
5326
|
+
"$isExiting": isExiting,
|
|
5134
5327
|
onKeyDown: handleKeyDown,
|
|
5135
5328
|
"data-testid": dataTestId,
|
|
5136
5329
|
children: [jsxs(StyledHeader, {
|
|
@@ -5185,7 +5378,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
5185
5378
|
},
|
|
5186
5379
|
displayName: "InputBase__StyledInputBase",
|
|
5187
5380
|
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
|
|
5381
|
+
})(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
5382
|
/**
|
|
5190
5383
|
* Base styled textarea with shared styling
|
|
5191
5384
|
*/])), input["default"].font, function (_a) {
|
|
@@ -5200,7 +5393,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
5200
5393
|
if ($disabled) return input.disabled.borderColor;
|
|
5201
5394
|
if ($hasError) return input.error.borderColor;
|
|
5202
5395
|
return input["default"].borderColor;
|
|
5203
|
-
}, input["default"].borderRadius, input.placeholder.textColor, function (_a) {
|
|
5396
|
+
}, 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
5397
|
var $hasError = _a.$hasError;
|
|
5205
5398
|
return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
|
|
5206
5399
|
}, input.focus.outline, input.focus.outlineOffset, function (_a) {
|
|
@@ -5216,23 +5409,22 @@ var StyledTextAreaBase = styled.textarea.withConfig({
|
|
|
5216
5409
|
},
|
|
5217
5410
|
displayName: "InputBase__StyledTextAreaBase",
|
|
5218
5411
|
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:
|
|
5412
|
+
})(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
5413
|
var templateObject_1$a, templateObject_2$9;
|
|
5221
5414
|
|
|
5222
|
-
var
|
|
5223
|
-
base$6 = tokensJson.base;
|
|
5415
|
+
var field$2 = tokensJson.component.field;
|
|
5224
5416
|
var StyledFieldContainer$2 = styled.div.withConfig({
|
|
5225
5417
|
displayName: "NumberInput__StyledFieldContainer",
|
|
5226
5418
|
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"])),
|
|
5419
|
+
})(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
5420
|
var StyledLabel$3 = styled.label.withConfig({
|
|
5229
5421
|
displayName: "NumberInput__StyledLabel",
|
|
5230
5422
|
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
|
|
5423
|
+
})(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
5424
|
var StyledRequiredIndicator$2 = styled.span.withConfig({
|
|
5233
5425
|
displayName: "NumberInput__StyledRequiredIndicator",
|
|
5234
5426
|
componentId: "sc-qotc3w-2"
|
|
5235
|
-
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])),
|
|
5427
|
+
})(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
5428
|
var StyledInputWrapper$2 = styled.div.withConfig({
|
|
5237
5429
|
displayName: "NumberInput__StyledInputWrapper",
|
|
5238
5430
|
componentId: "sc-qotc3w-3"
|
|
@@ -5240,11 +5432,11 @@ var StyledInputWrapper$2 = styled.div.withConfig({
|
|
|
5240
5432
|
var StyledNumberInput = styled(StyledInputBase).withConfig({
|
|
5241
5433
|
displayName: "NumberInput__StyledNumberInput",
|
|
5242
5434
|
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"])),
|
|
5435
|
+
})(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
5436
|
var StyledStepperContainer = styled.div.withConfig({
|
|
5245
5437
|
displayName: "NumberInput__StyledStepperContainer",
|
|
5246
5438
|
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"])),
|
|
5439
|
+
})(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
5440
|
var StyledHelperText$2 = styled.div.withConfig({
|
|
5249
5441
|
displayName: "NumberInput__StyledHelperText",
|
|
5250
5442
|
componentId: "sc-qotc3w-6"
|
|
@@ -5271,9 +5463,9 @@ var StyledHelperText$2 = styled.div.withConfig({
|
|
|
5271
5463
|
* onChange={(newValue) => setValue(newValue)}
|
|
5272
5464
|
* />
|
|
5273
5465
|
* ```
|
|
5274
|
-
*/])),
|
|
5466
|
+
*/])), field$2.helperText.typography, function (_a) {
|
|
5275
5467
|
var $isError = _a.$isError;
|
|
5276
|
-
return $isError ?
|
|
5468
|
+
return $isError ? field$2.helperText.colorError : field$2.helperText.color;
|
|
5277
5469
|
});
|
|
5278
5470
|
/**
|
|
5279
5471
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
@@ -5480,9 +5672,9 @@ var PageTitleStyled = styled.div.withConfig({
|
|
|
5480
5672
|
},
|
|
5481
5673
|
displayName: "PageTitle__PageTitleStyled",
|
|
5482
5674
|
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"])), tokensJson.
|
|
5675
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensJson.semantic.spacing.layout['2xl'], function (_a) {
|
|
5484
5676
|
var $hasBackButton = _a.$hasBackButton;
|
|
5485
|
-
return $hasBackButton ? tokensJson.
|
|
5677
|
+
return $hasBackButton ? tokensJson.semantic.spacing.layout.none : tokensJson.semantic.spacing.layout['7xl'];
|
|
5486
5678
|
});
|
|
5487
5679
|
var PageTitle = function PageTitle(_a) {
|
|
5488
5680
|
var title = _a.title,
|
|
@@ -5513,26 +5705,25 @@ var PageTitle = function PageTitle(_a) {
|
|
|
5513
5705
|
};
|
|
5514
5706
|
var templateObject_1$8;
|
|
5515
5707
|
|
|
5516
|
-
var
|
|
5517
|
-
base$5 = tokensJson.base;
|
|
5708
|
+
var field$1 = tokensJson.component.field;
|
|
5518
5709
|
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
5519
5710
|
displayName: "PasswordField__StyledFieldContainer",
|
|
5520
5711
|
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"])),
|
|
5712
|
+
})(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
5713
|
var StyledLabel$2 = styled.label.withConfig({
|
|
5523
5714
|
displayName: "PasswordField__StyledLabel",
|
|
5524
5715
|
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
|
|
5716
|
+
})(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
5717
|
var StyledRequiredIndicator$1 = styled.span.withConfig({
|
|
5527
5718
|
displayName: "PasswordField__StyledRequiredIndicator",
|
|
5528
5719
|
componentId: "sc-1p15zk0-2"
|
|
5529
|
-
})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])),
|
|
5720
|
+
})(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
5721
|
var StyledHelperText$1 = styled.div.withConfig({
|
|
5531
5722
|
displayName: "PasswordField__StyledHelperText",
|
|
5532
5723
|
componentId: "sc-1p15zk0-3"
|
|
5533
|
-
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])),
|
|
5724
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), field$1.helperText.typography, function (_a) {
|
|
5534
5725
|
var $hasError = _a.$hasError;
|
|
5535
|
-
return $hasError ?
|
|
5726
|
+
return $hasError ? field$1.helperText.colorError : field$1.helperText.color;
|
|
5536
5727
|
});
|
|
5537
5728
|
var StyledInputWrapper$1 = styled.div.withConfig({
|
|
5538
5729
|
displayName: "PasswordField__StyledInputWrapper",
|
|
@@ -5553,7 +5744,7 @@ var StyledToggleButton = styled.div.withConfig({
|
|
|
5553
5744
|
* required
|
|
5554
5745
|
* />
|
|
5555
5746
|
* ```
|
|
5556
|
-
*/])),
|
|
5747
|
+
*/])), tokensJson.semantic.spacing.layout.sm);
|
|
5557
5748
|
/**
|
|
5558
5749
|
* PasswordField component for secure password input with visibility toggle
|
|
5559
5750
|
*
|
|
@@ -5646,8 +5837,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
5646
5837
|
PasswordField.displayName = 'PasswordField';
|
|
5647
5838
|
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$4;
|
|
5648
5839
|
|
|
5649
|
-
var semantic$
|
|
5650
|
-
base$4 = tokensJson.base,
|
|
5840
|
+
var semantic$3 = tokensJson.semantic,
|
|
5651
5841
|
component = tokensJson.component;
|
|
5652
5842
|
var StyledSearchContainer = styled.div.withConfig({
|
|
5653
5843
|
displayName: "SearchField__StyledSearchContainer",
|
|
@@ -5656,7 +5846,7 @@ var StyledSearchContainer = styled.div.withConfig({
|
|
|
5656
5846
|
var StyledInputWrapper = styled.div.withConfig({
|
|
5657
5847
|
displayName: "SearchField__StyledInputWrapper",
|
|
5658
5848
|
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
|
|
5849
|
+
})(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
5850
|
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
5851
|
}, function (props) {
|
|
5662
5852
|
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 +5854,15 @@ var StyledInputWrapper = styled.div.withConfig({
|
|
|
5664
5854
|
var StyledInput = styled.input.withConfig({
|
|
5665
5855
|
displayName: "SearchField__StyledInput",
|
|
5666
5856
|
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$
|
|
5857
|
+
})(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
5858
|
var StyledSuggestionsList = styled.ul.withConfig({
|
|
5669
5859
|
displayName: "SearchField__StyledSuggestionsList",
|
|
5670
5860
|
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:
|
|
5861
|
+
})(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
5862
|
var StyledSectionHeader = styled.div.withConfig({
|
|
5673
5863
|
displayName: "SearchField__StyledSectionHeader",
|
|
5674
5864
|
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"])),
|
|
5865
|
+
})(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
5866
|
var debounce = function debounce(func, wait) {
|
|
5677
5867
|
var timeout = null;
|
|
5678
5868
|
return function () {
|
|
@@ -5975,8 +6165,7 @@ var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
5975
6165
|
SearchField.displayName = 'SearchField';
|
|
5976
6166
|
var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4;
|
|
5977
6167
|
|
|
5978
|
-
var semantic$
|
|
5979
|
-
base$3 = tokensJson.base;
|
|
6168
|
+
var semantic$2 = tokensJson.semantic;
|
|
5980
6169
|
// Fade in animation for overlay
|
|
5981
6170
|
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
6171
|
// Slide animations for each position
|
|
@@ -5992,35 +6181,50 @@ var StyledOverlay = styled.div.withConfig({
|
|
|
5992
6181
|
},
|
|
5993
6182
|
displayName: "Sheet__StyledOverlay",
|
|
5994
6183
|
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
|
-
});
|
|
6184
|
+
})(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) {
|
|
6185
|
+
var $isExiting = _a.$isExiting;
|
|
6186
|
+
return $isExiting && exitAnimation;
|
|
6187
|
+
}));
|
|
5999
6188
|
var StyledSheet = styled.div.withConfig({
|
|
6000
6189
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6001
6190
|
return !prop.startsWith('$');
|
|
6002
6191
|
},
|
|
6003
6192
|
displayName: "Sheet__StyledSheet",
|
|
6004
6193
|
componentId: "sc-8abisx-1"
|
|
6005
|
-
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index:
|
|
6194
|
+
})(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
6195
|
var $position = _a.$position,
|
|
6007
6196
|
$variant = _a.$variant,
|
|
6008
6197
|
$width = _a.$width,
|
|
6009
6198
|
$height = _a.$height;
|
|
6010
6199
|
var isDrawer = $variant === 'drawer';
|
|
6011
|
-
var margin = isDrawer ?
|
|
6012
|
-
var borderRadius = isDrawer ?
|
|
6200
|
+
var margin = isDrawer ? semantic$2.spacing.layout.lg : '0';
|
|
6201
|
+
var borderRadius = isDrawer ? semantic$2.border.radius.md : '0';
|
|
6013
6202
|
switch ($position) {
|
|
6014
6203
|
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: ", "
|
|
6204
|
+
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) {
|
|
6205
|
+
var $isExiting = _a.$isExiting;
|
|
6206
|
+
return $isExiting && exitAnimation;
|
|
6207
|
+
});
|
|
6016
6208
|
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: ", "
|
|
6209
|
+
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) {
|
|
6210
|
+
var $isExiting = _a.$isExiting;
|
|
6211
|
+
return $isExiting && exitAnimation;
|
|
6212
|
+
});
|
|
6018
6213
|
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: ", "
|
|
6214
|
+
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) {
|
|
6215
|
+
var $isExiting = _a.$isExiting;
|
|
6216
|
+
return $isExiting && exitAnimation;
|
|
6217
|
+
});
|
|
6020
6218
|
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: ", "
|
|
6219
|
+
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) {
|
|
6220
|
+
var $isExiting = _a.$isExiting;
|
|
6221
|
+
return $isExiting && exitAnimation;
|
|
6222
|
+
});
|
|
6022
6223
|
}
|
|
6023
|
-
},
|
|
6224
|
+
}, reducedMotion, fadeIn, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
|
|
6225
|
+
var $isExiting = _a.$isExiting;
|
|
6226
|
+
return $isExiting && exitAnimation;
|
|
6227
|
+
}, 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
6228
|
var StyledSheetContent = styled.div.withConfig({
|
|
6025
6229
|
displayName: "Sheet__StyledSheetContent",
|
|
6026
6230
|
componentId: "sc-8abisx-2"
|
|
@@ -6050,7 +6254,7 @@ var StyledSheetContent = styled.div.withConfig({
|
|
|
6050
6254
|
* <h2>Mobile Menu</h2>
|
|
6051
6255
|
* </Sheet>
|
|
6052
6256
|
* ```
|
|
6053
|
-
*/])),
|
|
6257
|
+
*/])), semantic$2.spacing.layout['2xl']);
|
|
6054
6258
|
/**
|
|
6055
6259
|
* Sheet component for side panels and drawers
|
|
6056
6260
|
*
|
|
@@ -6085,9 +6289,9 @@ var Sheet = function Sheet(_a) {
|
|
|
6085
6289
|
_c = _a.variant,
|
|
6086
6290
|
variant = _c === void 0 ? 'sheet' : _c,
|
|
6087
6291
|
_d = _a.width,
|
|
6088
|
-
width = _d === void 0 ?
|
|
6292
|
+
width = _d === void 0 ? tokensJson.semantic.size.overlay.sm : _d,
|
|
6089
6293
|
_e = _a.height,
|
|
6090
|
-
height = _e === void 0 ?
|
|
6294
|
+
height = _e === void 0 ? tokensJson.semantic.size.overlay.sm : _e,
|
|
6091
6295
|
children = _a.children,
|
|
6092
6296
|
_f = _a.closeOnOverlayClick,
|
|
6093
6297
|
closeOnOverlayClick = _f === void 0 ? true : _f,
|
|
@@ -6099,18 +6303,27 @@ var Sheet = function Sheet(_a) {
|
|
|
6099
6303
|
ariaDescribedBy = _a["aria-describedby"];
|
|
6100
6304
|
var sheetRef = useRef(null);
|
|
6101
6305
|
var previousFocusRef = useRef(null);
|
|
6306
|
+
var _h = usePresence(isOpen),
|
|
6307
|
+
isPresent = _h.isPresent,
|
|
6308
|
+
isExiting = _h.isExiting;
|
|
6309
|
+
useInert(sheetRef, isExiting);
|
|
6102
6310
|
// Focus management
|
|
6103
6311
|
useEffect(function () {
|
|
6104
6312
|
if (isOpen) {
|
|
6105
6313
|
// Store previous focus
|
|
6106
6314
|
previousFocusRef.current = document.activeElement;
|
|
6107
6315
|
// Focus sheet
|
|
6108
|
-
setTimeout(function () {
|
|
6316
|
+
var timer_1 = setTimeout(function () {
|
|
6109
6317
|
var _a;
|
|
6110
6318
|
(_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6111
6319
|
}, 100); // Small delay to allow animation to start
|
|
6112
6320
|
// Prevent body scroll
|
|
6113
6321
|
document.body.style.overflow = 'hidden';
|
|
6322
|
+
// A quick close cancels the pending focus, so it can't pull focus back into the exiting sheet
|
|
6323
|
+
return function () {
|
|
6324
|
+
clearTimeout(timer_1);
|
|
6325
|
+
document.body.style.overflow = '';
|
|
6326
|
+
};
|
|
6114
6327
|
} else {
|
|
6115
6328
|
// Restore previous focus
|
|
6116
6329
|
if (previousFocusRef.current) {
|
|
@@ -6147,14 +6360,16 @@ var Sheet = function Sheet(_a) {
|
|
|
6147
6360
|
};
|
|
6148
6361
|
// Overlay click handling
|
|
6149
6362
|
var handleOverlayClick = function handleOverlayClick(event) {
|
|
6150
|
-
|
|
6363
|
+
// While exiting, the backdrop still catches clicks but doesn't close again
|
|
6364
|
+
if (!isExiting && closeOnOverlayClick && event.target === event.currentTarget) {
|
|
6151
6365
|
onClose();
|
|
6152
6366
|
}
|
|
6153
6367
|
};
|
|
6154
|
-
|
|
6368
|
+
// Stays mounted while the exit fade runs, hidden from assistive technology
|
|
6369
|
+
if (!isPresent) return null;
|
|
6155
6370
|
return jsxs(Fragment, {
|
|
6156
6371
|
children: [jsx(StyledOverlay, {
|
|
6157
|
-
"$
|
|
6372
|
+
"$isExiting": isExiting,
|
|
6158
6373
|
onClick: handleOverlayClick,
|
|
6159
6374
|
"data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'sheet-overlay'
|
|
6160
6375
|
}), jsx(StyledSheet, {
|
|
@@ -6163,12 +6378,13 @@ var Sheet = function Sheet(_a) {
|
|
|
6163
6378
|
"aria-modal": "true",
|
|
6164
6379
|
"aria-label": ariaLabel || title || 'Sheet dialog',
|
|
6165
6380
|
"aria-describedby": ariaDescribedBy,
|
|
6381
|
+
"aria-hidden": isExiting || undefined,
|
|
6166
6382
|
tabIndex: -1,
|
|
6167
6383
|
"$position": position,
|
|
6168
6384
|
"$variant": variant,
|
|
6169
6385
|
"$width": width,
|
|
6170
6386
|
"$height": height,
|
|
6171
|
-
"$
|
|
6387
|
+
"$isExiting": isExiting,
|
|
6172
6388
|
onKeyDown: handleKeyDown,
|
|
6173
6389
|
"data-testid": dataTestId,
|
|
6174
6390
|
children: jsx(StyledSheetContent, {
|
|
@@ -6180,8 +6396,7 @@ var Sheet = function Sheet(_a) {
|
|
|
6180
6396
|
Sheet.displayName = 'Sheet';
|
|
6181
6397
|
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
6398
|
|
|
6183
|
-
var semantic$
|
|
6184
|
-
base$2 = tokensJson.base;
|
|
6399
|
+
var semantic$1 = tokensJson.semantic;
|
|
6185
6400
|
var StyledSliderContainer = styled.div.withConfig({
|
|
6186
6401
|
displayName: "Slider__StyledSliderContainer",
|
|
6187
6402
|
componentId: "sc-6mh2d4-0"
|
|
@@ -6189,21 +6404,21 @@ var StyledSliderContainer = styled.div.withConfig({
|
|
|
6189
6404
|
var StyledLabel$1 = styled.label.withConfig({
|
|
6190
6405
|
displayName: "Slider__StyledLabel",
|
|
6191
6406
|
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$
|
|
6407
|
+
})(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
6408
|
var $disabled = _a.$disabled;
|
|
6194
|
-
return $disabled ? semantic$
|
|
6195
|
-
}, semantic$
|
|
6409
|
+
return $disabled ? semantic$1.color.text.disabled : semantic$1.color.text["default"];
|
|
6410
|
+
}, semantic$1.spacing.layout.lg);
|
|
6196
6411
|
var StyledSliderTrackContainer = styled.div.withConfig({
|
|
6197
6412
|
displayName: "Slider__StyledSliderTrackContainer",
|
|
6198
6413
|
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"])),
|
|
6414
|
+
})(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
6415
|
var StyledTrack = styled.div.withConfig({
|
|
6201
6416
|
displayName: "Slider__StyledTrack",
|
|
6202
6417
|
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"])),
|
|
6418
|
+
})(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
6419
|
var $disabled = _a.$disabled;
|
|
6205
|
-
return $disabled ? semantic$
|
|
6206
|
-
},
|
|
6420
|
+
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.border["default"];
|
|
6421
|
+
}, semantic$1.border.radius.circle, function (_a) {
|
|
6207
6422
|
var $disabled = _a.$disabled;
|
|
6208
6423
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
6209
6424
|
});
|
|
@@ -6212,31 +6427,31 @@ var StyledTrackFill = styled.div.withConfig({
|
|
|
6212
6427
|
componentId: "sc-6mh2d4-4"
|
|
6213
6428
|
})(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
6429
|
var $disabled = _a.$disabled;
|
|
6215
|
-
return $disabled ? semantic$
|
|
6216
|
-
},
|
|
6430
|
+
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
|
|
6431
|
+
}, semantic$1.border.radius.circle);
|
|
6217
6432
|
var StyledThumb = styled.div.withConfig({
|
|
6218
6433
|
displayName: "Slider__StyledThumb",
|
|
6219
6434
|
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"])),
|
|
6435
|
+
})(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
6436
|
var $disabled = _a.$disabled;
|
|
6222
|
-
return $disabled ? semantic$
|
|
6223
|
-
},
|
|
6437
|
+
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
|
|
6438
|
+
}, semantic$1.border.width.thick, function (_a) {
|
|
6224
6439
|
var $disabled = _a.$disabled;
|
|
6225
|
-
return $disabled ? semantic$
|
|
6226
|
-
},
|
|
6440
|
+
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
|
|
6441
|
+
}, semantic$1.border.radius.circle, function (_a) {
|
|
6227
6442
|
var $disabled = _a.$disabled;
|
|
6228
6443
|
return $disabled ? 'not-allowed' : 'grab';
|
|
6229
|
-
}, semantic$
|
|
6444
|
+
}, 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
6445
|
var $active = _a.$active;
|
|
6231
|
-
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(
|
|
6446
|
+
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(tokensJson.component.slider.thumb.shadow.active, ";\n ");
|
|
6232
6447
|
});
|
|
6233
6448
|
var StyledValueLabel = styled.div.withConfig({
|
|
6234
6449
|
displayName: "Slider__StyledValueLabel",
|
|
6235
6450
|
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"])),
|
|
6451
|
+
})(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
6452
|
var $disabled = _a.$disabled;
|
|
6238
|
-
return $disabled ?
|
|
6239
|
-
},
|
|
6453
|
+
return $disabled ? semantic$1.opacity.disabled : semantic$1.opacity.full;
|
|
6454
|
+
}, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.xs, semantic$1.color.background.emphasis);
|
|
6240
6455
|
var StyledMinMaxLabels = styled.div.withConfig({
|
|
6241
6456
|
displayName: "Slider__StyledMinMaxLabels",
|
|
6242
6457
|
componentId: "sc-6mh2d4-7"
|
|
@@ -6264,7 +6479,7 @@ var StyledMinMaxLabels = styled.div.withConfig({
|
|
|
6264
6479
|
* onRangeChange={(values) => console.log(values)}
|
|
6265
6480
|
* />
|
|
6266
6481
|
* ```
|
|
6267
|
-
*/])), semantic$
|
|
6482
|
+
*/])), semantic$1.typography.body, semantic$1.color.text.subdued, semantic$1.spacing.layout.xs);
|
|
6268
6483
|
/**
|
|
6269
6484
|
* Slider component for single value or range selection
|
|
6270
6485
|
*
|
|
@@ -6586,46 +6801,45 @@ var Slider = function Slider(_a) {
|
|
|
6586
6801
|
Slider.displayName = 'Slider';
|
|
6587
6802
|
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
6803
|
|
|
6589
|
-
var semantic
|
|
6590
|
-
base$1 = tokensJson.base;
|
|
6804
|
+
var semantic = tokensJson.semantic;
|
|
6591
6805
|
var StyledTabList = styled.div.withConfig({
|
|
6592
6806
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6593
6807
|
return !prop.startsWith('$');
|
|
6594
6808
|
},
|
|
6595
6809
|
displayName: "TabBar__StyledTabList",
|
|
6596
6810
|
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' ?
|
|
6811
|
+
})(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) {
|
|
6812
|
+
return props.$variant === 'pills' ? semantic.spacing.layout.sm : '0';
|
|
6599
6813
|
}, function (props) {
|
|
6600
|
-
return props.$variant === 'underline' ? "".concat(
|
|
6601
|
-
}, semantic
|
|
6814
|
+
return props.$variant === 'underline' ? "".concat(semantic.border.width.thin, " solid ").concat(semantic.color.border.subtle) : 'none';
|
|
6815
|
+
}, tokensJson.component.tabBar.scrollbar.height, semantic.color.background.subtle, semantic.color.border["default"], semantic.border.radius.sm);
|
|
6602
6816
|
var StyledTab = styled.button.withConfig({
|
|
6603
6817
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6604
6818
|
return !prop.startsWith('$');
|
|
6605
6819
|
},
|
|
6606
6820
|
displayName: "TabBar__StyledTab",
|
|
6607
6821
|
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"])),
|
|
6822
|
+
})(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
6823
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
6610
|
-
}, semantic
|
|
6824
|
+
}, semantic.motion.hover, function (props) {
|
|
6611
6825
|
if (props.$variant === 'pills') {
|
|
6612
|
-
return "\n border-radius: ".concat(
|
|
6826
|
+
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
6827
|
}
|
|
6614
6828
|
if (props.$variant === 'underline') {
|
|
6615
|
-
return "\n color: ".concat(props.$isActive ? semantic
|
|
6829
|
+
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
6830
|
}
|
|
6617
6831
|
// default variant
|
|
6618
|
-
return "\n border-radius: ".concat(
|
|
6832
|
+
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
6833
|
}, function (props) {
|
|
6620
6834
|
return props.$disabled ? '0.5' : '1';
|
|
6621
|
-
},
|
|
6835
|
+
}, semantic.border.width.thick, semantic.color.border.strong, semantic.spacing.layout.xs);
|
|
6622
6836
|
var StyledBadge = styled.span.withConfig({
|
|
6623
6837
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6624
6838
|
return !prop.startsWith('$');
|
|
6625
6839
|
},
|
|
6626
6840
|
displayName: "TabBar__StyledBadge",
|
|
6627
6841
|
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:
|
|
6842
|
+
})(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
6843
|
/**
|
|
6630
6844
|
* TabBar component for tabbed navigation
|
|
6631
6845
|
*
|
|
@@ -6647,13 +6861,13 @@ var StyledBadge = styled.span.withConfig({
|
|
|
6647
6861
|
* variant="pills"
|
|
6648
6862
|
* />
|
|
6649
6863
|
* ```
|
|
6650
|
-
*/])),
|
|
6864
|
+
*/])), 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) {
|
|
6651
6865
|
if (props.$variant === 'pills') {
|
|
6652
|
-
return props.$isActive ? 'rgba(255, 255, 255, 0.2)' : semantic
|
|
6866
|
+
return props.$isActive ? 'rgba(255, 255, 255, 0.2)' : semantic.color.background.interactive;
|
|
6653
6867
|
}
|
|
6654
|
-
return semantic
|
|
6868
|
+
return semantic.color.background.interactive;
|
|
6655
6869
|
}, function (props) {
|
|
6656
|
-
return props.$variant === 'pills' && props.$isActive ? semantic
|
|
6870
|
+
return props.$variant === 'pills' && props.$isActive ? semantic.color.text.inverse : semantic.color.text.inverse;
|
|
6657
6871
|
});
|
|
6658
6872
|
/**
|
|
6659
6873
|
* TabBar component for tabbed navigation
|
|
@@ -6805,20 +7019,19 @@ var TabBar = function TabBar(_a) {
|
|
|
6805
7019
|
TabBar.displayName = 'TabBar';
|
|
6806
7020
|
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
6807
7021
|
|
|
6808
|
-
var
|
|
6809
|
-
base = tokensJson.base;
|
|
7022
|
+
var field = tokensJson.component.field;
|
|
6810
7023
|
var StyledFieldContainer = styled.div.withConfig({
|
|
6811
7024
|
displayName: "TextField__StyledFieldContainer",
|
|
6812
7025
|
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"])),
|
|
7026
|
+
})(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
7027
|
var StyledLabel = styled.label.withConfig({
|
|
6815
7028
|
displayName: "TextField__StyledLabel",
|
|
6816
7029
|
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
|
|
7030
|
+
})(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
7031
|
var StyledRequiredIndicator = styled.span.withConfig({
|
|
6819
7032
|
displayName: "TextField__StyledRequiredIndicator",
|
|
6820
7033
|
componentId: "sc-1ys3b0-2"
|
|
6821
|
-
})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])),
|
|
7034
|
+
})(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
7035
|
var StyledHelperText = styled.div.withConfig({
|
|
6823
7036
|
displayName: "TextField__StyledHelperText",
|
|
6824
7037
|
componentId: "sc-1ys3b0-3"
|
|
@@ -6835,9 +7048,9 @@ var StyledHelperText = styled.div.withConfig({
|
|
|
6835
7048
|
* required
|
|
6836
7049
|
* />
|
|
6837
7050
|
* ```
|
|
6838
|
-
*/])),
|
|
7051
|
+
*/])), field.helperText.typography, function (_a) {
|
|
6839
7052
|
var $hasError = _a.$hasError;
|
|
6840
|
-
return $hasError ?
|
|
7053
|
+
return $hasError ? field.helperText.colorError : field.helperText.color;
|
|
6841
7054
|
});
|
|
6842
7055
|
/**
|
|
6843
7056
|
* TextField component for text input with label, helper text, and error states
|
|
@@ -6911,9 +7124,9 @@ var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4
|
|
|
6911
7124
|
var StyledContainer = styled.div.withConfig({
|
|
6912
7125
|
displayName: "TransactionListItem__StyledContainer",
|
|
6913
7126
|
componentId: "sc-7yunm0-0"
|
|
6914
|
-
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-height:
|
|
7127
|
+
})(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
7128
|
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:
|
|
7129
|
+
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
7130
|
});
|
|
6918
7131
|
var StyledAvatarSection = styled.div.withConfig({
|
|
6919
7132
|
displayName: "TransactionListItem__StyledAvatarSection",
|
|
@@ -7121,14 +7334,18 @@ var TransactionListItem = function TransactionListItem(_a) {
|
|
|
7121
7334
|
};
|
|
7122
7335
|
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
7336
|
|
|
7337
|
+
// Exception to decision 0014: the gap props are typed as base spacing keys (public API),
|
|
7338
|
+
// so they are looked up in base.spacing until they accept semantic keys.
|
|
7339
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
7340
|
+
var gapSpacing = tokensJson.base.spacing;
|
|
7124
7341
|
// Breakpoints using base tokens
|
|
7125
7342
|
var breakpoints = {
|
|
7126
|
-
xs: tokensJson.
|
|
7127
|
-
sm: tokensJson.
|
|
7128
|
-
md: tokensJson.
|
|
7129
|
-
lg: tokensJson.
|
|
7130
|
-
xl: tokensJson.
|
|
7131
|
-
'2xl': tokensJson.
|
|
7343
|
+
xs: tokensJson.semantic.breakpoint.xs,
|
|
7344
|
+
sm: tokensJson.semantic.breakpoint.sm,
|
|
7345
|
+
md: tokensJson.semantic.breakpoint.md,
|
|
7346
|
+
lg: tokensJson.semantic.breakpoint.lg,
|
|
7347
|
+
xl: tokensJson.semantic.breakpoint.xl,
|
|
7348
|
+
'2xl': tokensJson.semantic.breakpoint['2xl']
|
|
7132
7349
|
};
|
|
7133
7350
|
// Media query helpers
|
|
7134
7351
|
var media = {
|
|
@@ -7164,9 +7381,9 @@ var Grid = function Grid(_a) {
|
|
|
7164
7381
|
children = _a.children;
|
|
7165
7382
|
return jsx(GridContainer, {
|
|
7166
7383
|
"$cols": cols,
|
|
7167
|
-
"$gap": gap ?
|
|
7168
|
-
"$gapX": gapX ?
|
|
7169
|
-
"$gapY": gapY ?
|
|
7384
|
+
"$gap": gap ? gapSpacing[gap] : undefined,
|
|
7385
|
+
"$gapX": gapX ? gapSpacing[gapX] : undefined,
|
|
7386
|
+
"$gapY": gapY ? gapSpacing[gapY] : undefined,
|
|
7170
7387
|
className: className,
|
|
7171
7388
|
children: children
|
|
7172
7389
|
});
|
|
@@ -7302,21 +7519,21 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
|
|
|
7302
7519
|
"$colsMd": colsMd,
|
|
7303
7520
|
"$colsLg": colsLg,
|
|
7304
7521
|
"$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 ?
|
|
7522
|
+
"$gap": gap ? gapSpacing[gap] : undefined,
|
|
7523
|
+
"$gapSm": gapSm ? gapSpacing[gapSm] : undefined,
|
|
7524
|
+
"$gapMd": gapMd ? gapSpacing[gapMd] : undefined,
|
|
7525
|
+
"$gapLg": gapLg ? gapSpacing[gapLg] : undefined,
|
|
7526
|
+
"$gapXl": gapXl ? gapSpacing[gapXl] : undefined,
|
|
7527
|
+
"$gapX": gapX ? gapSpacing[gapX] : undefined,
|
|
7528
|
+
"$gapXSm": gapXSm ? gapSpacing[gapXSm] : undefined,
|
|
7529
|
+
"$gapXMd": gapXMd ? gapSpacing[gapXMd] : undefined,
|
|
7530
|
+
"$gapXLg": gapXLg ? gapSpacing[gapXLg] : undefined,
|
|
7531
|
+
"$gapXXl": gapXXl ? gapSpacing[gapXXl] : undefined,
|
|
7532
|
+
"$gapY": gapY ? gapSpacing[gapY] : undefined,
|
|
7533
|
+
"$gapYSm": gapYSm ? gapSpacing[gapYSm] : undefined,
|
|
7534
|
+
"$gapYMd": gapYMd ? gapSpacing[gapYMd] : undefined,
|
|
7535
|
+
"$gapYLg": gapYLg ? gapSpacing[gapYLg] : undefined,
|
|
7536
|
+
"$gapYXl": gapYXl ? gapSpacing[gapYXl] : undefined,
|
|
7320
7537
|
className: className,
|
|
7321
7538
|
children: children
|
|
7322
7539
|
});
|