@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.js
CHANGED
|
@@ -111,10 +111,11 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
111
111
|
};
|
|
112
112
|
|
|
113
113
|
// Destructure tokens
|
|
114
|
-
var semantic$
|
|
115
|
-
var
|
|
116
|
-
|
|
117
|
-
|
|
114
|
+
var semantic$g = data.tokensJson.semantic;
|
|
115
|
+
var initials = data.tokensJson.component.avatar.initials;
|
|
116
|
+
var color$a = semantic$g.color,
|
|
117
|
+
size$1 = semantic$g.size,
|
|
118
|
+
border$a = semantic$g.border;
|
|
118
119
|
var radius$5 = border$a.radius;
|
|
119
120
|
var AvatarContainer = styled__default.default.div.withConfig({
|
|
120
121
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -122,7 +123,7 @@ var AvatarContainer = styled__default.default.div.withConfig({
|
|
|
122
123
|
},
|
|
123
124
|
displayName: "Avatar__AvatarContainer",
|
|
124
125
|
componentId: "sc-ezn4ax-0"
|
|
125
|
-
})(templateObject_1$
|
|
126
|
+
})(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) {
|
|
126
127
|
var $size = _a.$size;
|
|
127
128
|
return size$1.avatar[$size];
|
|
128
129
|
}, function (_a) {
|
|
@@ -135,26 +136,19 @@ var AvatarImage = styled__default.default.img.withConfig({
|
|
|
135
136
|
},
|
|
136
137
|
displayName: "Avatar__AvatarImage",
|
|
137
138
|
componentId: "sc-ezn4ax-1"
|
|
138
|
-
})(templateObject_2$
|
|
139
|
+
})(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);
|
|
139
140
|
var AvatarInitials = styled__default.default.span.withConfig({
|
|
140
141
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
141
142
|
return !prop.startsWith('$');
|
|
142
143
|
},
|
|
143
144
|
displayName: "Avatar__AvatarInitials",
|
|
144
145
|
componentId: "sc-ezn4ax-2"
|
|
145
|
-
})(templateObject_3$
|
|
146
|
+
})(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"
|
|
146
147
|
// Helper function to get initials from name
|
|
147
|
-
])),
|
|
148
|
+
])), initials.fontFamily, initials.fontWeight, function (_a) {
|
|
148
149
|
var $size = _a.$size;
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
sm: data.tokensJson.base.fontSize[2],
|
|
152
|
-
md: data.tokensJson.base.fontSize[3],
|
|
153
|
-
lg: data.tokensJson.base.fontSize[4],
|
|
154
|
-
xl: data.tokensJson.base.fontSize[5]
|
|
155
|
-
};
|
|
156
|
-
return sizeMap[$size];
|
|
157
|
-
}, color$a.text["default"]);
|
|
150
|
+
return initials.fontSize[$size];
|
|
151
|
+
}, color$a.text["default"], initials.lineHeight);
|
|
158
152
|
// Helper function to get initials from name
|
|
159
153
|
var getInitials = function getInitials(name) {
|
|
160
154
|
return name.split(' ').map(function (word) {
|
|
@@ -208,29 +202,74 @@ var Avatar = function Avatar(_a) {
|
|
|
208
202
|
})
|
|
209
203
|
}));
|
|
210
204
|
};
|
|
205
|
+
var templateObject_1$L, templateObject_2$w, templateObject_3$t;
|
|
206
|
+
|
|
207
|
+
// Breakpoints from the semantic tokens (decision 0014)
|
|
208
|
+
var breakpoints$1 = {
|
|
209
|
+
xs: data.tokensJson.semantic.breakpoint.xs,
|
|
210
|
+
sm: data.tokensJson.semantic.breakpoint.sm,
|
|
211
|
+
md: data.tokensJson.semantic.breakpoint.md,
|
|
212
|
+
lg: data.tokensJson.semantic.breakpoint.lg,
|
|
213
|
+
xl: data.tokensJson.semantic.breakpoint.xl,
|
|
214
|
+
'2xl': data.tokensJson.semantic.breakpoint['2xl']
|
|
215
|
+
};
|
|
216
|
+
// Media query helpers
|
|
217
|
+
var media$1 = {
|
|
218
|
+
xs: "@media (min-width: ".concat(breakpoints$1.xs, ")"),
|
|
219
|
+
sm: "@media (min-width: ".concat(breakpoints$1.sm, ")"),
|
|
220
|
+
md: "@media (min-width: ".concat(breakpoints$1.md, ")"),
|
|
221
|
+
lg: "@media (min-width: ".concat(breakpoints$1.lg, ")"),
|
|
222
|
+
xl: "@media (min-width: ".concat(breakpoints$1.xl, ")"),
|
|
223
|
+
'2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
|
|
224
|
+
};
|
|
225
|
+
// Wrap fallbacks for people who ask for less motion (decision 0005): movement becomes
|
|
226
|
+
// an instant change or a simple fade. Colour and opacity transitions need no fallback.
|
|
227
|
+
var reducedMotion = '@media (prefers-reduced-motion: reduce)';
|
|
228
|
+
// No `from` keyframe: the fade starts from the element's current opacity, including a
|
|
229
|
+
// still-running entrance, so closing mid-entrance doesn't jump back to fully visible.
|
|
230
|
+
var fadeOut$1 = styled.keyframes(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n to { opacity: 0; }\n"], ["\n to { opacity: 0; }\n"
|
|
231
|
+
// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of
|
|
232
|
+
// the element's `animation` declarations while it exits: the entrance stays in the list,
|
|
233
|
+
// so it isn't restarted, and the fade runs on top of it. A fade is already the
|
|
234
|
+
// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
|
|
235
|
+
// still catches clicks (so they can't reach the page behind it) and the panel is inert.
|
|
236
|
+
])));
|
|
237
|
+
// Exit for overlays that unmount (use with usePresence). Append `exitAnimation` to each of
|
|
238
|
+
// the element's `animation` declarations while it exits: the entrance stays in the list,
|
|
239
|
+
// so it isn't restarted, and the fade runs on top of it. A fade is already the
|
|
240
|
+
// reduced-motion form, so it needs no fallback of its own. While it fades, the backdrop
|
|
241
|
+
// still catches clicks (so they can't reach the page behind it) and the panel is inert.
|
|
242
|
+
var exitAnimation = styled.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject([", ", " ", " ", " forwards"], [", ", " ", " ", " forwards"
|
|
243
|
+
// Content for screen readers only. The 1px size and -1px margin are part of the standard
|
|
244
|
+
// visually-hidden technique, not design values, so they aren't tokens.
|
|
245
|
+
])), fadeOut$1, data.tokensJson.semantic.motion.duration.fast, data.tokensJson.semantic.motion.easing.easeOut);
|
|
246
|
+
// Content for screen readers only. The 1px size and -1px margin are part of the standard
|
|
247
|
+
// visually-hidden technique, not design values, so they aren't tokens.
|
|
248
|
+
var visuallyHidden = styled.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"])));
|
|
211
249
|
var templateObject_1$K, templateObject_2$v, templateObject_3$s;
|
|
212
250
|
|
|
213
|
-
var _a$
|
|
214
|
-
typography$
|
|
215
|
-
color$9 = _a$
|
|
251
|
+
var _a$c = data.tokensJson.semantic,
|
|
252
|
+
typography$1 = _a$c.typography,
|
|
253
|
+
color$9 = _a$c.color,
|
|
254
|
+
letterSpacing = _a$c.letterSpacing;
|
|
216
255
|
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
217
256
|
var styles = {
|
|
218
|
-
display: "font: ".concat(typography$
|
|
219
|
-
h1: "font: ".concat(typography$
|
|
220
|
-
h2: "font: ".concat(typography$
|
|
221
|
-
h3: "font: ".concat(typography$
|
|
222
|
-
h4: "font: ".concat(typography$
|
|
223
|
-
h5: "font: ".concat(typography$
|
|
224
|
-
h6: "font: ".concat(typography$
|
|
225
|
-
subtitle: "font: ".concat(typography$
|
|
226
|
-
body: "font: ".concat(typography$
|
|
227
|
-
small: "font: ".concat(typography$
|
|
228
|
-
overline: "font: ".concat(typography$
|
|
229
|
-
caption: "font: ".concat(typography$
|
|
230
|
-
button1: "font: ".concat(typography$
|
|
231
|
-
button2: "font: ".concat(typography$
|
|
232
|
-
button3: "font: ".concat(typography$
|
|
233
|
-
label: "font: ".concat(typography$
|
|
257
|
+
display: "font: ".concat(typography$1.display, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
|
|
258
|
+
h1: "font: ".concat(typography$1.h1, "; letter-spacing: ").concat(letterSpacing.tighter, ";"),
|
|
259
|
+
h2: "font: ".concat(typography$1.h2, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
|
|
260
|
+
h3: "font: ".concat(typography$1.h3, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
|
|
261
|
+
h4: "font: ".concat(typography$1.h4, "; letter-spacing: ").concat(letterSpacing.tight, ";"),
|
|
262
|
+
h5: "font: ".concat(typography$1.h5, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
|
|
263
|
+
h6: "font: ".concat(typography$1.h6, "; letter-spacing: ").concat(letterSpacing.normal, ";"),
|
|
264
|
+
subtitle: "font: ".concat(typography$1.subtitle, ";"),
|
|
265
|
+
body: "font: ".concat(typography$1.body, ";"),
|
|
266
|
+
small: "font: ".concat(typography$1.small, ";"),
|
|
267
|
+
overline: "font: ".concat(typography$1.overline, ";"),
|
|
268
|
+
caption: "font: ".concat(typography$1.caption, "; text-transform: uppercase;"),
|
|
269
|
+
button1: "font: ".concat(typography$1.button1, ";"),
|
|
270
|
+
button2: "font: ".concat(typography$1.button2, ";"),
|
|
271
|
+
button3: "font: ".concat(typography$1.button3, ";"),
|
|
272
|
+
label: "font: ".concat(typography$1.label, ";")
|
|
234
273
|
};
|
|
235
274
|
return styles[variant] || styles.body;
|
|
236
275
|
};
|
|
@@ -275,7 +314,7 @@ var StyledTypography = styled__default.default.span.withConfig({
|
|
|
275
314
|
},
|
|
276
315
|
displayName: "Typography__StyledTypography",
|
|
277
316
|
componentId: "sc-17mqo4k-0"
|
|
278
|
-
})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n color: ", ";\n margin: 0;\n
|
|
317
|
+
})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n color: ", ";\n margin: 0;\n"], ["\n ", "\n color: ", ";\n margin: 0;\n"
|
|
279
318
|
/**
|
|
280
319
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
281
320
|
*
|
|
@@ -299,12 +338,6 @@ var StyledTypography = styled__default.default.span.withConfig({
|
|
|
299
338
|
}, function (_a) {
|
|
300
339
|
var $color = _a.$color;
|
|
301
340
|
return getTextColor($color);
|
|
302
|
-
}, function (_a) {
|
|
303
|
-
var $variant = _a.$variant;
|
|
304
|
-
if (['body', 'subtitle', 'small'].includes($variant)) {
|
|
305
|
-
return 'line-height: 1.5;';
|
|
306
|
-
}
|
|
307
|
-
return '';
|
|
308
341
|
});
|
|
309
342
|
/**
|
|
310
343
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
@@ -345,10 +378,14 @@ var Typography = function Typography(_a) {
|
|
|
345
378
|
};
|
|
346
379
|
var templateObject_1$J;
|
|
347
380
|
|
|
348
|
-
var semantic$
|
|
349
|
-
var color$8 = semantic$
|
|
350
|
-
border$9 = semantic$
|
|
381
|
+
var semantic$f = data.tokensJson.semantic;
|
|
382
|
+
var color$8 = semantic$f.color,
|
|
383
|
+
border$9 = semantic$f.border;
|
|
351
384
|
var radius$4 = border$9.radius;
|
|
385
|
+
var _a$b = data.tokensJson.component.badge,
|
|
386
|
+
dot = _a$b.dot,
|
|
387
|
+
count = _a$b.count,
|
|
388
|
+
ring = _a$b.ring;
|
|
352
389
|
var scaleIn$2 = styled.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"])));
|
|
353
390
|
var BadgeWrapper = styled__default.default.span.withConfig({
|
|
354
391
|
displayName: "Badge__BadgeWrapper",
|
|
@@ -360,15 +397,15 @@ var BadgeIndicator = styled__default.default.span.withConfig({
|
|
|
360
397
|
},
|
|
361
398
|
displayName: "Badge__BadgeIndicator",
|
|
362
399
|
componentId: "sc-tjz4pp-1"
|
|
363
|
-
})(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:
|
|
400
|
+
})(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) {
|
|
364
401
|
return props.$isVisible ? 'flex' : 'none';
|
|
365
402
|
}, function (props) {
|
|
366
|
-
return props.$isDot ?
|
|
403
|
+
return props.$isDot ? dot.size : count.minWidth;
|
|
367
404
|
}, function (props) {
|
|
368
|
-
return props.$isDot ?
|
|
405
|
+
return props.$isDot ? dot.size : count.height;
|
|
369
406
|
}, function (props) {
|
|
370
|
-
return props.$isDot ? '0' :
|
|
371
|
-
}, radius$4.circle, color$8.background["default"], scaleIn$2, function (props) {
|
|
407
|
+
return props.$isDot ? '0' : "0 ".concat(count.paddingX);
|
|
408
|
+
}, 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) {
|
|
372
409
|
switch (props.$variant) {
|
|
373
410
|
case 'primary':
|
|
374
411
|
return "\n background-color: ".concat(color$8.background.interactive, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
@@ -385,7 +422,7 @@ var BadgeIndicator = styled__default.default.span.withConfig({
|
|
|
385
422
|
var ScreenReaderOnly$1 = styled__default.default.span.withConfig({
|
|
386
423
|
displayName: "Badge__ScreenReaderOnly",
|
|
387
424
|
componentId: "sc-tjz4pp-2"
|
|
388
|
-
})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n
|
|
425
|
+
})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), visuallyHidden);
|
|
389
426
|
var Badge = function Badge(_a) {
|
|
390
427
|
var children = _a.children,
|
|
391
428
|
_b = _a.count,
|
|
@@ -446,15 +483,15 @@ var StyledBox = styled__default.default.div.withConfig({
|
|
|
446
483
|
}, function (props) {
|
|
447
484
|
return props.$m && styled.css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$m]);
|
|
448
485
|
}, function (props) {
|
|
449
|
-
return props.$mt && styled.css(templateObject_8$
|
|
486
|
+
return props.$mt && styled.css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$mt]);
|
|
450
487
|
}, function (props) {
|
|
451
|
-
return props.$mr && styled.css(templateObject_9$
|
|
488
|
+
return props.$mr && styled.css(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$mr]);
|
|
452
489
|
}, function (props) {
|
|
453
|
-
return props.$mb && styled.css(templateObject_10$
|
|
490
|
+
return props.$mb && styled.css(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$mb]);
|
|
454
491
|
}, function (props) {
|
|
455
|
-
return props.$ml && styled.css(templateObject_11$
|
|
492
|
+
return props.$ml && styled.css(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), data.tokensJson.semantic.spacing.layout[props.$ml]);
|
|
456
493
|
}, function (props) {
|
|
457
|
-
return props.$mx && styled.css(templateObject_12$
|
|
494
|
+
return props.$mx && styled.css(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n "], ["\n margin-left: ", ";\n margin-right: ", ";\n "])), data.tokensJson.semantic.spacing.layout[props.$mx], data.tokensJson.semantic.spacing.layout[props.$mx]);
|
|
458
495
|
}, function (props) {
|
|
459
496
|
return props.$my && styled.css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), data.tokensJson.semantic.spacing.layout[props.$my], data.tokensJson.semantic.spacing.layout[props.$my]);
|
|
460
497
|
}, function (props) {
|
|
@@ -496,15 +533,15 @@ var StyledBox = styled__default.default.div.withConfig({
|
|
|
496
533
|
}, function (props) {
|
|
497
534
|
return props.$borderRadius && styled.css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), data.tokensJson.semantic.border.radius[props.$borderRadius]);
|
|
498
535
|
}, function (props) {
|
|
499
|
-
return props.$border && styled.css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border:
|
|
536
|
+
return props.$border && styled.css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: ", " solid ", ";"], ["border: ", " solid ", ";"])), data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border[props.$border]);
|
|
500
537
|
}, function (props) {
|
|
501
|
-
return props.$borderTop && styled.css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top:
|
|
538
|
+
return props.$borderTop && styled.css(templateObject_34$1 || (templateObject_34$1 = __makeTemplateObject(["border-top: ", " solid ", ";"], ["border-top: ", " solid ", ";"])), data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border[props.$borderTop]);
|
|
502
539
|
}, function (props) {
|
|
503
|
-
return props.$borderRight && styled.css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right:
|
|
540
|
+
return props.$borderRight && styled.css(templateObject_35$1 || (templateObject_35$1 = __makeTemplateObject(["border-right: ", " solid ", ";"], ["border-right: ", " solid ", ";"])), data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border[props.$borderRight]);
|
|
504
541
|
}, function (props) {
|
|
505
|
-
return props.$borderBottom && styled.css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom:
|
|
542
|
+
return props.$borderBottom && styled.css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["border-bottom: ", " solid ", ";"], ["border-bottom: ", " solid ", ";"])), data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border[props.$borderBottom]);
|
|
506
543
|
}, function (props) {
|
|
507
|
-
return props.$borderLeft && styled.css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left:
|
|
544
|
+
return props.$borderLeft && styled.css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["border-left: ", " solid ", ";"], ["border-left: ", " solid ", ";"])), data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border[props.$borderLeft]);
|
|
508
545
|
}, function (props) {
|
|
509
546
|
return props.$bg && styled.css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), data.tokensJson.semantic.color.background[props.$bg]);
|
|
510
547
|
}, function (props) {
|
|
@@ -516,7 +553,7 @@ var StyledBox = styled__default.default.div.withConfig({
|
|
|
516
553
|
}, function (props) {
|
|
517
554
|
return props.$transition && styled.css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
|
|
518
555
|
}, function (props) {
|
|
519
|
-
return (props.$hoverShadow || props.$hoverTransform) && styled.css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline:
|
|
556
|
+
return (props.$hoverShadow || props.$hoverTransform) && styled.css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: ", " 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 && styled.css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), data.tokensJson.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && styled.css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), data.tokensJson.semantic.border.width.thick, data.tokensJson.semantic.color.border.interactive, data.tokensJson.semantic.border.focusOffset);
|
|
520
557
|
}, function (props) {
|
|
521
558
|
return props.$overflow && styled.css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
|
|
522
559
|
}, function (props) {
|
|
@@ -656,7 +693,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
656
693
|
}));
|
|
657
694
|
};
|
|
658
695
|
var Box = BoxTransform;
|
|
659
|
-
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$b, templateObject_8$
|
|
696
|
+
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;
|
|
660
697
|
|
|
661
698
|
var IconStyled = styled__default.default.span.withConfig({
|
|
662
699
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -733,9 +770,9 @@ var Icon = function Icon(_a) {
|
|
|
733
770
|
var templateObject_1$G;
|
|
734
771
|
|
|
735
772
|
var button$1 = data.tokensJson.component.button,
|
|
736
|
-
semantic$
|
|
773
|
+
semantic$e = data.tokensJson.semantic;
|
|
737
774
|
// Base styles shared between button and link
|
|
738
|
-
var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(data.tokensJson.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic$
|
|
775
|
+
var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(data.tokensJson.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic$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");
|
|
739
776
|
// Dynamic variant styles using component tokens
|
|
740
777
|
var getVariantStyles$1 = function getVariantStyles(_a) {
|
|
741
778
|
var $variant = _a.$variant;
|
|
@@ -914,12 +951,11 @@ var Button = function Button(_a) {
|
|
|
914
951
|
};
|
|
915
952
|
var templateObject_1$F, templateObject_2$s;
|
|
916
953
|
|
|
917
|
-
var semantic$
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
spacing$7 = semantic$g.spacing;
|
|
954
|
+
var semantic$d = data.tokensJson.semantic;
|
|
955
|
+
var color$7 = semantic$d.color,
|
|
956
|
+
border$8 = semantic$d.border,
|
|
957
|
+
spacing$7 = semantic$d.spacing;
|
|
958
|
+
var label$2 = data.tokensJson.component.badge.label;
|
|
923
959
|
var category = color$7.category;
|
|
924
960
|
var radius$3 = border$8.radius;
|
|
925
961
|
var layout$4 = spacing$7.layout;
|
|
@@ -929,7 +965,7 @@ var StyledCategoryBadge = styled__default.default.span.withConfig({
|
|
|
929
965
|
},
|
|
930
966
|
displayName: "CategoryBadge__StyledCategoryBadge",
|
|
931
967
|
componentId: "sc-17aslpn-0"
|
|
932
|
-
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n
|
|
968
|
+
})(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"
|
|
933
969
|
/**
|
|
934
970
|
* CategoryBadge component for displaying transaction categories
|
|
935
971
|
*
|
|
@@ -947,7 +983,7 @@ var StyledCategoryBadge = styled__default.default.span.withConfig({
|
|
|
947
983
|
* Travel
|
|
948
984
|
* </CategoryBadge>
|
|
949
985
|
* ```
|
|
950
|
-
*/])), radius$3.circle,
|
|
986
|
+
*/])), radius$3.circle, semantic$d.border.width.thin, function (_a) {
|
|
951
987
|
var $size = _a.$size;
|
|
952
988
|
return $size === 'small' ? '24px' : '32px';
|
|
953
989
|
}, function (_a) {
|
|
@@ -955,8 +991,8 @@ var StyledCategoryBadge = styled__default.default.span.withConfig({
|
|
|
955
991
|
return $size === 'small' ? "".concat(layout$4.xs, " ").concat(layout$4.sm) : "".concat(layout$4.sm, " ").concat(layout$4.md);
|
|
956
992
|
}, function (_a) {
|
|
957
993
|
var $size = _a.$size;
|
|
958
|
-
return $size === 'small' ?
|
|
959
|
-
}, layout$4.xs, function (_a) {
|
|
994
|
+
return $size === 'small' ? label$2.typography.small : label$2.typography.medium;
|
|
995
|
+
}, label$2.fontWeight, layout$4.xs, function (_a) {
|
|
960
996
|
var $color = _a.$color,
|
|
961
997
|
$variant = _a.$variant;
|
|
962
998
|
if ($variant === 'filled') {
|
|
@@ -1090,9 +1126,9 @@ var CloseButton = styled__default.default.button.withConfig({
|
|
|
1090
1126
|
},
|
|
1091
1127
|
displayName: "ChipBase__CloseButton",
|
|
1092
1128
|
componentId: "sc-moa6zc-2"
|
|
1093
|
-
})(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:
|
|
1129
|
+
})(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"])), data.tokensJson.semantic.spacing.layout.sm, data.tokensJson.semantic.border.radius.xs, function (props) {
|
|
1094
1130
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
1095
|
-
}, data.tokensJson.semantic.motion.hover, data.tokensJson.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
|
|
1131
|
+
}, data.tokensJson.semantic.motion.hover, data.tokensJson.semantic.color.background['hover-overlay'], data.tokensJson.semantic.color.background['active-overlay'], data.tokensJson.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
|
|
1096
1132
|
var templateObject_1$D, templateObject_2$r, templateObject_3$p;
|
|
1097
1133
|
|
|
1098
1134
|
/**
|
|
@@ -1320,30 +1356,11 @@ var BooleanChip = function BooleanChip(_a) {
|
|
|
1320
1356
|
}));
|
|
1321
1357
|
};
|
|
1322
1358
|
|
|
1323
|
-
// Breakpoints using base tokens
|
|
1324
|
-
var breakpoints$1 = {
|
|
1325
|
-
xs: data.tokensJson.base.breakpoint.xs,
|
|
1326
|
-
sm: data.tokensJson.base.breakpoint.sm,
|
|
1327
|
-
md: data.tokensJson.base.breakpoint.md,
|
|
1328
|
-
lg: data.tokensJson.base.breakpoint.lg,
|
|
1329
|
-
xl: data.tokensJson.base.breakpoint.xl,
|
|
1330
|
-
'2xl': data.tokensJson.base.breakpoint['2xl']
|
|
1331
|
-
};
|
|
1332
|
-
// Media query helpers
|
|
1333
|
-
var media$1 = {
|
|
1334
|
-
xs: "@media (min-width: ".concat(breakpoints$1.xs, ")"),
|
|
1335
|
-
sm: "@media (min-width: ".concat(breakpoints$1.sm, ")"),
|
|
1336
|
-
md: "@media (min-width: ".concat(breakpoints$1.md, ")"),
|
|
1337
|
-
lg: "@media (min-width: ".concat(breakpoints$1.lg, ")"),
|
|
1338
|
-
xl: "@media (min-width: ".concat(breakpoints$1.xl, ")"),
|
|
1339
|
-
'2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
|
|
1340
|
-
};
|
|
1341
|
-
|
|
1342
1359
|
var spacing$6 = data.tokensJson.semantic.spacing;
|
|
1343
1360
|
var StyledContainer$2 = styled__default.default.div.withConfig({
|
|
1344
1361
|
displayName: "Container__StyledContainer",
|
|
1345
1362
|
componentId: "sc-17dbj6n-0"
|
|
1346
|
-
})(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:
|
|
1363
|
+
})(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']);
|
|
1347
1364
|
var Container$1 = function Container(_a) {
|
|
1348
1365
|
var children = _a.children,
|
|
1349
1366
|
props = __rest(_a, ["children"]);
|
|
@@ -1353,7 +1370,6 @@ var Container$1 = function Container(_a) {
|
|
|
1353
1370
|
};
|
|
1354
1371
|
var templateObject_1$C;
|
|
1355
1372
|
|
|
1356
|
-
var base$b = data.tokensJson.base;
|
|
1357
1373
|
var PictureWrapper = styled__default.default.div.withConfig({
|
|
1358
1374
|
displayName: "Picture__PictureWrapper",
|
|
1359
1375
|
componentId: "sc-11d9tei-0"
|
|
@@ -1361,15 +1377,15 @@ var PictureWrapper = styled__default.default.div.withConfig({
|
|
|
1361
1377
|
var ImageLink = styled__default.default.a.withConfig({
|
|
1362
1378
|
displayName: "Picture__ImageLink",
|
|
1363
1379
|
componentId: "sc-11d9tei-1"
|
|
1364
|
-
})(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"])),
|
|
1380
|
+
})(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"])), data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut);
|
|
1365
1381
|
var ImageButton = styled__default.default.button.withConfig({
|
|
1366
1382
|
displayName: "Picture__ImageButton",
|
|
1367
1383
|
componentId: "sc-11d9tei-2"
|
|
1368
|
-
})(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"])),
|
|
1384
|
+
})(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"])), data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut);
|
|
1369
1385
|
var StyledImage = styled__default.default.img.withConfig({
|
|
1370
1386
|
displayName: "Picture__StyledImage",
|
|
1371
1387
|
componentId: "sc-11d9tei-3"
|
|
1372
|
-
})(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"])),
|
|
1388
|
+
})(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"])), data.tokensJson.semantic.border.radius.sm);
|
|
1373
1389
|
var Picture = function Picture(_a) {
|
|
1374
1390
|
var title = _a.title,
|
|
1375
1391
|
src = _a.src,
|
|
@@ -1401,16 +1417,16 @@ var Picture = function Picture(_a) {
|
|
|
1401
1417
|
};
|
|
1402
1418
|
var templateObject_1$B, templateObject_2$q, templateObject_3$o, templateObject_4$k;
|
|
1403
1419
|
|
|
1404
|
-
var _a$
|
|
1405
|
-
typography
|
|
1406
|
-
color$6 = _a$
|
|
1420
|
+
var _a$a = data.tokensJson.semantic,
|
|
1421
|
+
typography = _a$a.typography,
|
|
1422
|
+
color$6 = _a$a.color;
|
|
1407
1423
|
var TimeStyled = styled__default.default.time.withConfig({
|
|
1408
1424
|
displayName: "DateFormatter__TimeStyled",
|
|
1409
1425
|
componentId: "sc-5464cc-0"
|
|
1410
1426
|
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
1411
1427
|
/**
|
|
1412
1428
|
* Formats a date with smart relative/absolute logic
|
|
1413
|
-
*/])), typography
|
|
1429
|
+
*/])), typography.label, color$6.text.subdued);
|
|
1414
1430
|
/**
|
|
1415
1431
|
* Formats a date with smart relative/absolute logic
|
|
1416
1432
|
*/
|
|
@@ -1458,17 +1474,17 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
1458
1474
|
};
|
|
1459
1475
|
var templateObject_1$A;
|
|
1460
1476
|
|
|
1461
|
-
var motion$
|
|
1462
|
-
_a$
|
|
1463
|
-
iconButton = _a$
|
|
1464
|
-
button = _a$
|
|
1477
|
+
var motion$5 = data.tokensJson.semantic.motion,
|
|
1478
|
+
_a$9 = data.tokensJson.component,
|
|
1479
|
+
iconButton = _a$9.iconButton,
|
|
1480
|
+
button = _a$9.button;
|
|
1465
1481
|
var IconButtonStyled = styled__default.default.button.withConfig({
|
|
1466
1482
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1467
1483
|
return !prop.startsWith('$');
|
|
1468
1484
|
},
|
|
1469
1485
|
displayName: "IconButton__IconButtonStyled",
|
|
1470
1486
|
componentId: "sc-k8b14t-0"
|
|
1471
|
-
})(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:
|
|
1487
|
+
})(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) {
|
|
1472
1488
|
var $variant = _a.$variant;
|
|
1473
1489
|
switch ($variant) {
|
|
1474
1490
|
case 'primary':
|
|
@@ -1492,7 +1508,7 @@ var IconButtonStyled = styled__default.default.button.withConfig({
|
|
|
1492
1508
|
default:
|
|
1493
1509
|
return button.primary.textColor;
|
|
1494
1510
|
}
|
|
1495
|
-
}, iconButton.primary.borderRadius, motion$
|
|
1511
|
+
}, iconButton.primary.borderRadius, motion$5.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
|
|
1496
1512
|
var $size = _a.$size;
|
|
1497
1513
|
return iconButton.sizes[$size].minWidth;
|
|
1498
1514
|
}, function (_a) {
|
|
@@ -1525,7 +1541,7 @@ var IconButtonStyled = styled__default.default.button.withConfig({
|
|
|
1525
1541
|
default:
|
|
1526
1542
|
return button.disabled.textColor;
|
|
1527
1543
|
}
|
|
1528
|
-
});
|
|
1544
|
+
}, data.tokensJson.semantic.border.width.thin);
|
|
1529
1545
|
var IconButton = function IconButton(_a) {
|
|
1530
1546
|
var variant = _a.variant,
|
|
1531
1547
|
_b = _a.size,
|
|
@@ -1591,7 +1607,7 @@ var StyledWrapper = styled__default.default.span.withConfig({
|
|
|
1591
1607
|
return $align;
|
|
1592
1608
|
}, function (_a) {
|
|
1593
1609
|
var $weight = _a.$weight;
|
|
1594
|
-
return $weight
|
|
1610
|
+
return data.tokensJson.semantic.fontWeight[$weight];
|
|
1595
1611
|
});
|
|
1596
1612
|
// Map size to Typography variant
|
|
1597
1613
|
var sizeToTypographyVariant = {
|
|
@@ -1690,14 +1706,14 @@ var MoneyDisplay = function MoneyDisplay(_a) {
|
|
|
1690
1706
|
var templateObject_1$y;
|
|
1691
1707
|
|
|
1692
1708
|
// Destructure tokens
|
|
1693
|
-
var semantic$
|
|
1694
|
-
var _a$
|
|
1709
|
+
var semantic$c = data.tokensJson.semantic;
|
|
1710
|
+
var _a$8 = __assign(__assign({}, semantic$c), {
|
|
1695
1711
|
component: data.tokensJson.component
|
|
1696
1712
|
}),
|
|
1697
|
-
color$5 = _a$
|
|
1698
|
-
border$7 = _a$
|
|
1699
|
-
motion$
|
|
1700
|
-
component$2 = _a$
|
|
1713
|
+
color$5 = _a$8.color,
|
|
1714
|
+
border$7 = _a$8.border,
|
|
1715
|
+
motion$4 = _a$8.motion,
|
|
1716
|
+
component$2 = _a$8.component;
|
|
1701
1717
|
var radius$2 = border$7.radius;
|
|
1702
1718
|
var ProgressBarContainer = styled__default.default.div.withConfig({
|
|
1703
1719
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1716,7 +1732,7 @@ var ProgressBarFill = styled__default.default.div.withConfig({
|
|
|
1716
1732
|
},
|
|
1717
1733
|
displayName: "ProgressBar__ProgressBarFill",
|
|
1718
1734
|
componentId: "sc-1nco33q-1"
|
|
1719
|
-
})(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$
|
|
1735
|
+
})(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) {
|
|
1720
1736
|
var backgroundColor;
|
|
1721
1737
|
switch (props.$color) {
|
|
1722
1738
|
case 'success':
|
|
@@ -1794,9 +1810,9 @@ var StyledDivider = styled__default.default.div.withConfig({
|
|
|
1794
1810
|
var _b = _a.$orientation,
|
|
1795
1811
|
$orientation = _b === void 0 ? 'horizontal' : _b;
|
|
1796
1812
|
if ($orientation === 'vertical') {
|
|
1797
|
-
return "\n display: inline-block;\n height: auto;\n align-self: stretch;\n border-left:
|
|
1813
|
+
return "\n display: inline-block;\n height: auto;\n align-self: stretch;\n border-left: ".concat(data.tokensJson.semantic.border.width.thin, " solid;\n border-top: none;\n ");
|
|
1798
1814
|
}
|
|
1799
|
-
return "border-top:
|
|
1815
|
+
return "border-top: ".concat(data.tokensJson.semantic.border.width.thin, " solid;");
|
|
1800
1816
|
}, function (_a) {
|
|
1801
1817
|
var _b = _a.$variant,
|
|
1802
1818
|
$variant = _b === void 0 ? 'default' : _b,
|
|
@@ -1938,8 +1954,11 @@ var templateObject_1$v;
|
|
|
1938
1954
|
var statusColors = data.tokensJson.semantic.color.status;
|
|
1939
1955
|
var spacing$5 = data.tokensJson.semantic.spacing.layout;
|
|
1940
1956
|
var radius$1 = data.tokensJson.semantic.border.radius;
|
|
1941
|
-
var
|
|
1942
|
-
|
|
1957
|
+
var _a$7 = data.tokensJson.semantic.motion,
|
|
1958
|
+
transition = _a$7.transition,
|
|
1959
|
+
duration$3 = _a$7.duration,
|
|
1960
|
+
easing$3 = _a$7.easing;
|
|
1961
|
+
var label$1 = data.tokensJson.component.badge.label;
|
|
1943
1962
|
var scaleIn$1 = styled.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"])));
|
|
1944
1963
|
var getStatusConfig = function getStatusConfig(status) {
|
|
1945
1964
|
var configs = {
|
|
@@ -1989,14 +2008,14 @@ var sizeConfig = {
|
|
|
1989
2008
|
small: {
|
|
1990
2009
|
height: '20px',
|
|
1991
2010
|
padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
|
|
1992
|
-
font:
|
|
2011
|
+
font: label$1.typography.small,
|
|
1993
2012
|
gap: spacing$5.xs,
|
|
1994
2013
|
iconSize: 'xs'
|
|
1995
2014
|
},
|
|
1996
2015
|
medium: {
|
|
1997
2016
|
height: '24px',
|
|
1998
2017
|
padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
|
|
1999
|
-
font:
|
|
2018
|
+
font: label$1.typography.medium,
|
|
2000
2019
|
gap: spacing$5.xs,
|
|
2001
2020
|
iconSize: 'sm'
|
|
2002
2021
|
}
|
|
@@ -2007,10 +2026,10 @@ var StyledStatusBadge = styled__default.default.span.withConfig({
|
|
|
2007
2026
|
},
|
|
2008
2027
|
displayName: "StatusBadge__StyledStatusBadge",
|
|
2009
2028
|
componentId: "sc-1paksgb-0"
|
|
2010
|
-
})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n
|
|
2029
|
+
})(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) {
|
|
2011
2030
|
var $size = _a.$size;
|
|
2012
2031
|
var size = sizeConfig[$size];
|
|
2013
|
-
return "\n height: ".concat(size.height, ";\n padding: ").concat(size.padding, ";\n font: ").concat(size.font, ";\n gap: ").concat(size.gap, ";\n ");
|
|
2032
|
+
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 ");
|
|
2014
2033
|
}, function (_a) {
|
|
2015
2034
|
var $status = _a.$status;
|
|
2016
2035
|
var config = getStatusConfig($status);
|
|
@@ -2019,7 +2038,7 @@ var StyledStatusBadge = styled__default.default.span.withConfig({
|
|
|
2019
2038
|
var ScreenReaderOnly = styled__default.default.span.withConfig({
|
|
2020
2039
|
displayName: "StatusBadge__ScreenReaderOnly",
|
|
2021
2040
|
componentId: "sc-1paksgb-1"
|
|
2022
|
-
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n
|
|
2041
|
+
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
|
|
2023
2042
|
/**
|
|
2024
2043
|
* StatusBadge component for displaying transaction or task status
|
|
2025
2044
|
*
|
|
@@ -2042,7 +2061,7 @@ var ScreenReaderOnly = styled__default.default.span.withConfig({
|
|
|
2042
2061
|
* liveRegion={true}
|
|
2043
2062
|
* />
|
|
2044
2063
|
* ```
|
|
2045
|
-
*/])));
|
|
2064
|
+
*/])), visuallyHidden);
|
|
2046
2065
|
/**
|
|
2047
2066
|
* StatusBadge component for displaying transaction or task status
|
|
2048
2067
|
*
|
|
@@ -2101,12 +2120,12 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
2101
2120
|
StatusBadge.displayName = 'StatusBadge';
|
|
2102
2121
|
var templateObject_1$u, templateObject_2$o, templateObject_3$m;
|
|
2103
2122
|
|
|
2104
|
-
var semantic$
|
|
2105
|
-
var color$4 = semantic$
|
|
2106
|
-
spacing$4 = semantic$
|
|
2107
|
-
border$6 = semantic$
|
|
2108
|
-
|
|
2109
|
-
|
|
2123
|
+
var semantic$b = data.tokensJson.semantic;
|
|
2124
|
+
var color$4 = semantic$b.color,
|
|
2125
|
+
spacing$4 = semantic$b.spacing,
|
|
2126
|
+
border$6 = semantic$b.border,
|
|
2127
|
+
size = semantic$b.size;
|
|
2128
|
+
var label = data.tokensJson.component.badge.label;
|
|
2110
2129
|
var layout$3 = spacing$4.layout;
|
|
2111
2130
|
var radius = border$6.radius;
|
|
2112
2131
|
var StyledTag = styled__default.default.span.withConfig({
|
|
@@ -2115,13 +2134,13 @@ var StyledTag = styled__default.default.span.withConfig({
|
|
|
2115
2134
|
},
|
|
2116
2135
|
displayName: "Tag__StyledTag",
|
|
2117
2136
|
componentId: "sc-lzfmti-0"
|
|
2118
|
-
})(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"
|
|
2137
|
+
})(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"
|
|
2119
2138
|
/**
|
|
2120
2139
|
* Tag component for categorizing and labeling content
|
|
2121
2140
|
*
|
|
2122
2141
|
* A static, non-interactive label used to categorize elements or objects in the UI.
|
|
2123
2142
|
* Tags help users quickly identify and understand content classification.
|
|
2124
|
-
*/])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, typography
|
|
2143
|
+
*/])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, label.typography.small, label.fontWeight, function (_a) {
|
|
2125
2144
|
var $variant = _a.$variant;
|
|
2126
2145
|
switch ($variant) {
|
|
2127
2146
|
case 'interactive':
|
|
@@ -2159,17 +2178,17 @@ var StyledTag = styled__default.default.span.withConfig({
|
|
|
2159
2178
|
if (!$border) return 'none';
|
|
2160
2179
|
switch ($variant) {
|
|
2161
2180
|
case 'interactive':
|
|
2162
|
-
return "
|
|
2181
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.interactive);
|
|
2163
2182
|
case 'success':
|
|
2164
|
-
return "
|
|
2183
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.success);
|
|
2165
2184
|
case 'warning':
|
|
2166
|
-
return "
|
|
2185
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.warning);
|
|
2167
2186
|
case 'error':
|
|
2168
|
-
return "
|
|
2187
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border.error);
|
|
2169
2188
|
case 'emphasis':
|
|
2170
|
-
return "
|
|
2189
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.background.emphasis);
|
|
2171
2190
|
default:
|
|
2172
|
-
return "
|
|
2191
|
+
return "".concat(semantic$b.border.width.thin, " solid ").concat(color$4.border["default"]);
|
|
2173
2192
|
}
|
|
2174
2193
|
});
|
|
2175
2194
|
/**
|
|
@@ -2201,8 +2220,8 @@ var Tag = function Tag(_a) {
|
|
|
2201
2220
|
var templateObject_1$t;
|
|
2202
2221
|
|
|
2203
2222
|
// Destructure tokens for cleaner access
|
|
2204
|
-
var semantic$
|
|
2205
|
-
var spacing$3 = semantic$
|
|
2223
|
+
var semantic$a = data.tokensJson.semantic;
|
|
2224
|
+
var spacing$3 = semantic$a.spacing;
|
|
2206
2225
|
var layout$2 = spacing$3.layout;
|
|
2207
2226
|
var StyledBalanceSection = styled__default.default.div.withConfig({
|
|
2208
2227
|
displayName: "AccountCard__StyledBalanceSection",
|
|
@@ -2223,9 +2242,9 @@ var StyledStackWrapper = styled__default.default.div.withConfig({
|
|
|
2223
2242
|
var StyledHeaderWrapper = styled__default.default.div.withConfig({
|
|
2224
2243
|
displayName: "AccountCard__StyledHeaderWrapper",
|
|
2225
2244
|
componentId: "sc-1erp7zn-4"
|
|
2226
|
-
})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n min-height:
|
|
2245
|
+
})(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"
|
|
2227
2246
|
// Map trend direction to icon and color
|
|
2228
|
-
])), layout$2.none, layout$2.xs);
|
|
2247
|
+
])), data.tokensJson.component.accountCard.header.minHeight, layout$2.none, layout$2.xs);
|
|
2229
2248
|
// Map trend direction to icon and color
|
|
2230
2249
|
var trendToIcon = {
|
|
2231
2250
|
up: 'arrowUp',
|
|
@@ -2274,15 +2293,14 @@ var AccountCard = function AccountCard(_a) {
|
|
|
2274
2293
|
}
|
|
2275
2294
|
};
|
|
2276
2295
|
return jsxRuntime.jsx(Box, {
|
|
2277
|
-
minWidth:
|
|
2296
|
+
minWidth: data.tokensJson.component.accountCard.minWidth,
|
|
2278
2297
|
p: "lg",
|
|
2279
2298
|
bg: "subtle",
|
|
2280
2299
|
border: "default",
|
|
2281
2300
|
borderRadius: "xl",
|
|
2282
|
-
transition: "
|
|
2301
|
+
transition: "box-shadow ".concat(semantic$a.motion.duration.normal, " ").concat(semantic$a.motion.easing.easeOut),
|
|
2283
2302
|
cursor: isClickable ? 'pointer' : 'default',
|
|
2284
2303
|
hoverShadow: isClickable ? 'floating' : undefined,
|
|
2285
|
-
hoverTransform: isClickable ? 'translateY(-2px)' : undefined,
|
|
2286
2304
|
onClick: handleClick,
|
|
2287
2305
|
onKeyDown: handleKeyDown,
|
|
2288
2306
|
tabIndex: isClickable ? 0 : undefined,
|
|
@@ -2377,24 +2395,26 @@ var AccountCard = function AccountCard(_a) {
|
|
|
2377
2395
|
};
|
|
2378
2396
|
var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$e;
|
|
2379
2397
|
|
|
2380
|
-
var semantic$
|
|
2381
|
-
|
|
2398
|
+
var semantic$9 = data.tokensJson.semantic;
|
|
2399
|
+
var _a$6 = semantic$9.motion,
|
|
2400
|
+
duration$2 = _a$6.duration,
|
|
2401
|
+
easing$2 = _a$6.easing;
|
|
2382
2402
|
var StyledListItem = styled__default.default.li.withConfig({
|
|
2383
2403
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2384
2404
|
return !prop.startsWith('$');
|
|
2385
2405
|
},
|
|
2386
2406
|
displayName: "ListItem__StyledListItem",
|
|
2387
2407
|
componentId: "sc-1wzzt21-0"
|
|
2388
|
-
})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height:
|
|
2408
|
+
})(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) {
|
|
2389
2409
|
var $interactive = _a.$interactive;
|
|
2390
2410
|
return $interactive && 'user-select: none;';
|
|
2391
2411
|
}, function (_a) {
|
|
2392
2412
|
var $disabled = _a.$disabled;
|
|
2393
|
-
return $disabled && "\n opacity: ".concat(
|
|
2413
|
+
return $disabled && "\n opacity: ".concat(semantic$9.opacity.disabled, ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
2394
2414
|
}, function (_a) {
|
|
2395
2415
|
var $destructive = _a.$destructive,
|
|
2396
2416
|
$disabled = _a.$disabled;
|
|
2397
|
-
return $destructive && !$disabled && "\n color: ".concat(semantic$
|
|
2417
|
+
return $destructive && !$disabled && "\n color: ".concat(semantic$9.color.text.error, ";\n ");
|
|
2398
2418
|
});
|
|
2399
2419
|
var StyledItemContent = styled__default.default.div.withConfig({
|
|
2400
2420
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2402,13 +2422,13 @@ var StyledItemContent = styled__default.default.div.withConfig({
|
|
|
2402
2422
|
},
|
|
2403
2423
|
displayName: "ListItem__StyledItemContent",
|
|
2404
2424
|
componentId: "sc-1wzzt21-1"
|
|
2405
|
-
})(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
|
|
2425
|
+
})(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) {
|
|
2406
2426
|
var $spacing = _a.$spacing;
|
|
2407
|
-
return $spacing === 'compact' ? "".concat(semantic$
|
|
2408
|
-
},
|
|
2427
|
+
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);
|
|
2428
|
+
}, semantic$9.border.radius.sm, function (_a) {
|
|
2409
2429
|
var $selected = _a.$selected;
|
|
2410
|
-
return $selected ? semantic$
|
|
2411
|
-
}, function (_a) {
|
|
2430
|
+
return $selected ? semantic$9.color.background['interactive-subtle'] : 'transparent';
|
|
2431
|
+
}, duration$2.fast, easing$2.easeOut, function (_a) {
|
|
2412
2432
|
var $interactive = _a.$interactive,
|
|
2413
2433
|
$disabled = _a.$disabled;
|
|
2414
2434
|
if ($disabled) return 'not-allowed';
|
|
@@ -2419,45 +2439,48 @@ var StyledItemContent = styled__default.default.div.withConfig({
|
|
|
2419
2439
|
$disabled = _a.$disabled,
|
|
2420
2440
|
$selected = _a.$selected;
|
|
2421
2441
|
return !$disabled && $interactive && "\n &:hover {\n background-color: ".concat($selected ? data.tokensJson.component.button.variants.secondary.backgroundColor : data.tokensJson.component.button.variants.secondary.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat(data.tokensJson.component.button.variants.naked.backgroundColor, ";\n }\n ");
|
|
2422
|
-
}, semantic$
|
|
2442
|
+
}, semantic$9.border.width.thick, semantic$9.color.border.interactive, semantic$9.border.focusOffset);
|
|
2423
2443
|
var StyledIconContainer$1 = styled__default.default.div.withConfig({
|
|
2424
2444
|
displayName: "ListItem__StyledIconContainer",
|
|
2425
2445
|
componentId: "sc-1wzzt21-2"
|
|
2426
|
-
})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width:
|
|
2446
|
+
})(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);
|
|
2427
2447
|
var StyledTextContent = styled__default.default.div.withConfig({
|
|
2428
2448
|
displayName: "ListItem__StyledTextContent",
|
|
2429
2449
|
componentId: "sc-1wzzt21-3"
|
|
2430
|
-
})(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$
|
|
2450
|
+
})(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);
|
|
2431
2451
|
var StyledRightContent = styled__default.default.div.withConfig({
|
|
2432
2452
|
displayName: "ListItem__StyledRightContent",
|
|
2433
2453
|
componentId: "sc-1wzzt21-4"
|
|
2434
|
-
})(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$
|
|
2454
|
+
})(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);
|
|
2435
2455
|
var StyledChevronIcon = styled__default.default.div.withConfig({
|
|
2436
2456
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2437
2457
|
return !prop.startsWith('$');
|
|
2438
2458
|
},
|
|
2439
2459
|
displayName: "ListItem__StyledChevronIcon",
|
|
2440
2460
|
componentId: "sc-1wzzt21-5"
|
|
2441
|
-
})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width:
|
|
2461
|
+
})(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) {
|
|
2442
2462
|
var $expanded = _a.$expanded;
|
|
2443
2463
|
return $expanded ? '180deg' : '0deg';
|
|
2444
|
-
});
|
|
2464
|
+
}, reducedMotion);
|
|
2445
2465
|
var StyledExpandedContent = styled__default.default.div.withConfig({
|
|
2446
2466
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2447
2467
|
return !prop.startsWith('$');
|
|
2448
2468
|
},
|
|
2449
2469
|
displayName: "ListItem__StyledExpandedContent",
|
|
2450
2470
|
componentId: "sc-1wzzt21-6"
|
|
2451
|
-
})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n overflow: hidden;\n transition: max-height
|
|
2471
|
+
})(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) {
|
|
2452
2472
|
var $expanded = _a.$expanded;
|
|
2453
2473
|
return $expanded ? '1000px' : '0';
|
|
2454
2474
|
}, function (_a) {
|
|
2455
2475
|
var $expanded = _a.$expanded;
|
|
2456
2476
|
return $expanded ? '1' : '0';
|
|
2457
2477
|
}, function (_a) {
|
|
2478
|
+
var $expanded = _a.$expanded;
|
|
2479
|
+
return $expanded ? 'visible' : 'hidden';
|
|
2480
|
+
}, reducedMotion, duration$2.normal, easing$2.easeOut, duration$2.normal, easing$2.easeOut, function (_a) {
|
|
2458
2481
|
var $expanded = _a.$expanded,
|
|
2459
2482
|
$spacing = _a.$spacing;
|
|
2460
|
-
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$
|
|
2483
|
+
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(data.tokensJson.component.listItem.expandedIndent.compact) : "".concat(semantic$9.spacing.layout.sm, " ").concat(semantic$9.spacing.layout.lg, " ").concat(semantic$9.spacing.layout.md, " ").concat(data.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 ");
|
|
2461
2484
|
});
|
|
2462
2485
|
var ListItem = function ListItem(_a) {
|
|
2463
2486
|
var primary = _a.primary,
|
|
@@ -2572,22 +2595,74 @@ var ListItem = function ListItem(_a) {
|
|
|
2572
2595
|
ListItem.displayName = 'ListItem';
|
|
2573
2596
|
var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$9;
|
|
2574
2597
|
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2598
|
+
// How long an exiting element stays mounted: the duration of `exitAnimation` in styleUtils.
|
|
2599
|
+
var EXIT_DURATION_MS = parseInt(data.tokensJson.semantic.motion.duration.fast, 10);
|
|
2600
|
+
/**
|
|
2601
|
+
* Keeps an element mounted for `exitMs` after `isOpen` turns false, so its exit
|
|
2602
|
+
* animation can run before it unmounts (decision 0005).
|
|
2603
|
+
*/
|
|
2604
|
+
function usePresence(isOpen, exitMs) {
|
|
2605
|
+
if (exitMs === void 0) {
|
|
2606
|
+
exitMs = EXIT_DURATION_MS;
|
|
2607
|
+
}
|
|
2608
|
+
var _a = React.useState(isOpen),
|
|
2609
|
+
isMounted = _a[0],
|
|
2610
|
+
setIsMounted = _a[1];
|
|
2611
|
+
React.useEffect(function () {
|
|
2612
|
+
if (isOpen) {
|
|
2613
|
+
setIsMounted(true);
|
|
2614
|
+
return;
|
|
2615
|
+
}
|
|
2616
|
+
var timer = setTimeout(function () {
|
|
2617
|
+
return setIsMounted(false);
|
|
2618
|
+
}, exitMs);
|
|
2619
|
+
return function () {
|
|
2620
|
+
return clearTimeout(timer);
|
|
2621
|
+
};
|
|
2622
|
+
}, [isOpen, exitMs]);
|
|
2623
|
+
return {
|
|
2624
|
+
isPresent: isOpen || isMounted,
|
|
2625
|
+
isExiting: !isOpen && isMounted
|
|
2626
|
+
};
|
|
2627
|
+
}
|
|
2628
|
+
/**
|
|
2629
|
+
* Makes an element inert while `isInert` is true, so an exiting overlay's controls leave
|
|
2630
|
+
* the tab order and can't be activated. Set through the DOM because React 18 has no
|
|
2631
|
+
* `inert` prop.
|
|
2632
|
+
*/
|
|
2633
|
+
function useInert(ref, isInert) {
|
|
2634
|
+
React.useEffect(function () {
|
|
2635
|
+
var node = ref.current;
|
|
2636
|
+
if (!node) return;
|
|
2637
|
+
if (isInert) node.setAttribute('inert', '');else node.removeAttribute('inert');
|
|
2638
|
+
}, [ref, isInert]);
|
|
2639
|
+
}
|
|
2640
|
+
|
|
2641
|
+
var _a$5 = data.tokensJson.semantic,
|
|
2642
|
+
color$3 = _a$5.color,
|
|
2643
|
+
border$5 = _a$5.border,
|
|
2644
|
+
layout$1 = _a$5.spacing.layout,
|
|
2645
|
+
motion$3 = _a$5.motion,
|
|
2646
|
+
elevation$2 = _a$5.elevation;
|
|
2581
2647
|
var slideUp = styled.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"])));
|
|
2582
2648
|
var fadeIn$2 = styled.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"])));
|
|
2583
2649
|
var StyledOverlay$2 = styled__default.default.div.withConfig({
|
|
2584
2650
|
displayName: "ActionSheet__StyledOverlay",
|
|
2585
2651
|
componentId: "sc-regbol-0"
|
|
2586
|
-
})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color:
|
|
2652
|
+
})(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, data.tokensJson.semantic.zIndex.modal, fadeIn$2, motion$3.duration.normal, motion$3.easing.easeOut, function (_a) {
|
|
2653
|
+
var $isExiting = _a.$isExiting;
|
|
2654
|
+
return $isExiting && exitAnimation;
|
|
2655
|
+
});
|
|
2587
2656
|
var StyledActionSheet = styled__default.default.div.withConfig({
|
|
2588
2657
|
displayName: "ActionSheet__StyledActionSheet",
|
|
2589
2658
|
componentId: "sc-regbol-1"
|
|
2590
|
-
})(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:
|
|
2659
|
+
})(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, data.tokensJson.semantic.zIndex.modal, slideUp, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
|
|
2660
|
+
var $isExiting = _a.$isExiting;
|
|
2661
|
+
return $isExiting && exitAnimation;
|
|
2662
|
+
}, reducedMotion, fadeIn$2, motion$3.duration.slow, motion$3.easing.easeOut, function (_a) {
|
|
2663
|
+
var $isExiting = _a.$isExiting;
|
|
2664
|
+
return $isExiting && exitAnimation;
|
|
2665
|
+
});
|
|
2591
2666
|
var StyledHeader$2 = styled__default.default.div.withConfig({
|
|
2592
2667
|
displayName: "ActionSheet__StyledHeader",
|
|
2593
2668
|
componentId: "sc-regbol-2"
|
|
@@ -2599,11 +2674,11 @@ var StyledHeaderContent = styled__default.default.div.withConfig({
|
|
|
2599
2674
|
var StyledCloseButton = styled__default.default.button.withConfig({
|
|
2600
2675
|
displayName: "ActionSheet__StyledCloseButton",
|
|
2601
2676
|
componentId: "sc-regbol-4"
|
|
2602
|
-
})(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);
|
|
2677
|
+
})(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);
|
|
2603
2678
|
var StyledActionsList = styled__default.default.ul.withConfig({
|
|
2604
2679
|
displayName: "ActionSheet__StyledActionsList",
|
|
2605
2680
|
componentId: "sc-regbol-5"
|
|
2606
|
-
})(templateObject_8$
|
|
2681
|
+
})(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"
|
|
2607
2682
|
/**
|
|
2608
2683
|
* ActionSheet component for bottom sheet modals
|
|
2609
2684
|
*
|
|
@@ -2685,6 +2760,10 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2685
2760
|
dataTestId = _a["data-testid"];
|
|
2686
2761
|
var sheetRef = React.useRef(null);
|
|
2687
2762
|
var previousActiveElement = React.useRef(null);
|
|
2763
|
+
var _e = usePresence(isOpen),
|
|
2764
|
+
isPresent = _e.isPresent,
|
|
2765
|
+
isExiting = _e.isExiting;
|
|
2766
|
+
useInert(sheetRef, isExiting);
|
|
2688
2767
|
// Store the element that had focus when sheet opened
|
|
2689
2768
|
React.useEffect(function () {
|
|
2690
2769
|
if (isOpen) {
|
|
@@ -2715,7 +2794,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2715
2794
|
};
|
|
2716
2795
|
document.addEventListener('keydown', handleKeyDown);
|
|
2717
2796
|
// Focus first focusable element (button or element with role="button")
|
|
2718
|
-
requestAnimationFrame(function () {
|
|
2797
|
+
var frame = requestAnimationFrame(function () {
|
|
2719
2798
|
var _a;
|
|
2720
2799
|
var firstFocusable = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled), [role="button"][tabindex]:not([aria-disabled="true"])');
|
|
2721
2800
|
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
@@ -2724,6 +2803,8 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2724
2803
|
var originalOverflow = document.body.style.overflow;
|
|
2725
2804
|
document.body.style.overflow = 'hidden';
|
|
2726
2805
|
return function () {
|
|
2806
|
+
// A quick close cancels the pending focus, so it can't pull focus back into the exiting sheet
|
|
2807
|
+
cancelAnimationFrame(frame);
|
|
2727
2808
|
document.removeEventListener('keydown', handleKeyDown);
|
|
2728
2809
|
document.body.style.overflow = originalOverflow;
|
|
2729
2810
|
// Return focus to previous element
|
|
@@ -2733,7 +2814,8 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2733
2814
|
};
|
|
2734
2815
|
}, [isOpen, onClose, closeOnEscape]);
|
|
2735
2816
|
var handleOverlayClick = function handleOverlayClick(e) {
|
|
2736
|
-
|
|
2817
|
+
// While exiting, the backdrop still catches clicks but doesn't close again
|
|
2818
|
+
if (!isExiting && closeOnOverlayClick && e.target === e.currentTarget) {
|
|
2737
2819
|
onClose();
|
|
2738
2820
|
}
|
|
2739
2821
|
};
|
|
@@ -2743,7 +2825,8 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2743
2825
|
onClose();
|
|
2744
2826
|
}
|
|
2745
2827
|
};
|
|
2746
|
-
|
|
2828
|
+
// Stays mounted while the exit fade runs, hidden from assistive technology
|
|
2829
|
+
if (!isPresent) return null;
|
|
2747
2830
|
// Find if there are any destructive actions to add divider
|
|
2748
2831
|
var destructiveIndex = actions.findIndex(function (a) {
|
|
2749
2832
|
return a.destructive;
|
|
@@ -2751,11 +2834,14 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2751
2834
|
var hasDestructive = destructiveIndex >= 0;
|
|
2752
2835
|
return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
2753
2836
|
children: [jsxRuntime.jsx(StyledOverlay$2, {
|
|
2754
|
-
onClick: handleOverlayClick
|
|
2837
|
+
onClick: handleOverlayClick,
|
|
2838
|
+
"$isExiting": isExiting
|
|
2755
2839
|
}), jsxRuntime.jsxs(StyledActionSheet, {
|
|
2756
2840
|
ref: sheetRef,
|
|
2757
2841
|
role: "dialog",
|
|
2758
2842
|
"aria-modal": "true",
|
|
2843
|
+
"aria-hidden": isExiting || undefined,
|
|
2844
|
+
"$isExiting": isExiting,
|
|
2759
2845
|
"aria-labelledby": title ? 'action-sheet-title' : undefined,
|
|
2760
2846
|
"aria-describedby": description ? 'action-sheet-description' : undefined,
|
|
2761
2847
|
"data-testid": dataTestId,
|
|
@@ -2815,7 +2901,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
2815
2901
|
})]
|
|
2816
2902
|
}), document.body);
|
|
2817
2903
|
};
|
|
2818
|
-
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8, templateObject_8$
|
|
2904
|
+
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;
|
|
2819
2905
|
|
|
2820
2906
|
function detectSpeechRecognitionConstructor(targetWindow) {
|
|
2821
2907
|
if (!targetWindow) return null;
|
|
@@ -2915,8 +3001,7 @@ function agentInputStateTransition(currentState, event) {
|
|
|
2915
3001
|
}
|
|
2916
3002
|
}
|
|
2917
3003
|
|
|
2918
|
-
var semantic$
|
|
2919
|
-
base$9 = data.tokensJson.base,
|
|
3004
|
+
var semantic$8 = data.tokensJson.semantic,
|
|
2920
3005
|
component$1 = data.tokensJson.component;
|
|
2921
3006
|
var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
|
|
2922
3007
|
var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
|
|
@@ -2925,7 +3010,7 @@ var rotateRing = styled.keyframes(templateObject_1$p || (templateObject_1$p = __
|
|
|
2925
3010
|
var Container = styled__default.default.div.withConfig({
|
|
2926
3011
|
displayName: "AgentInput__Container",
|
|
2927
3012
|
componentId: "sc-fhl996-0"
|
|
2928
|
-
})(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"])),
|
|
3013
|
+
})(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);
|
|
2929
3014
|
var ControlsRow = styled__default.default.div.withConfig({
|
|
2930
3015
|
displayName: "AgentInput__ControlsRow",
|
|
2931
3016
|
componentId: "sc-fhl996-1"
|
|
@@ -2933,51 +3018,51 @@ var ControlsRow = styled__default.default.div.withConfig({
|
|
|
2933
3018
|
var InputShell = styled__default.default.div.withConfig({
|
|
2934
3019
|
displayName: "AgentInput__InputShell",
|
|
2935
3020
|
componentId: "sc-fhl996-2"
|
|
2936
|
-
})(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
|
|
3021
|
+
})(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);
|
|
2937
3022
|
var Input = styled__default.default.input.withConfig({
|
|
2938
3023
|
displayName: "AgentInput__Input",
|
|
2939
3024
|
componentId: "sc-fhl996-3"
|
|
2940
|
-
})(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"])),
|
|
3025
|
+
})(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);
|
|
2941
3026
|
var InputActions = styled__default.default.div.withConfig({
|
|
2942
3027
|
displayName: "AgentInput__InputActions",
|
|
2943
3028
|
componentId: "sc-fhl996-4"
|
|
2944
|
-
})(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$
|
|
3029
|
+
})(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);
|
|
2945
3030
|
var CircularActionIconButton = styled__default.default(IconButton).withConfig({
|
|
2946
3031
|
displayName: "AgentInput__CircularActionIconButton",
|
|
2947
3032
|
componentId: "sc-fhl996-5"
|
|
2948
|
-
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$
|
|
3033
|
+
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$8.border.radius.circle);
|
|
2949
3034
|
var InputWrapper = styled__default.default.div.withConfig({
|
|
2950
3035
|
displayName: "AgentInput__InputWrapper",
|
|
2951
3036
|
componentId: "sc-fhl996-6"
|
|
2952
|
-
})(templateObject_8$
|
|
3037
|
+
})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n"], ["\n flex: 1;\n min-width: 0;\n"])));
|
|
2953
3038
|
var MicButtonWrapper = styled__default.default.div.withConfig({
|
|
2954
3039
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2955
3040
|
return !prop.startsWith('$');
|
|
2956
3041
|
},
|
|
2957
3042
|
displayName: "AgentInput__MicButtonWrapper",
|
|
2958
3043
|
componentId: "sc-fhl996-7"
|
|
2959
|
-
})(templateObject_9$
|
|
3044
|
+
})(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);
|
|
2960
3045
|
var MicListeningRing = styled__default.default.span.withConfig({
|
|
2961
3046
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2962
3047
|
return !prop.startsWith('$');
|
|
2963
3048
|
},
|
|
2964
3049
|
displayName: "AgentInput__MicListeningRing",
|
|
2965
3050
|
componentId: "sc-fhl996-8"
|
|
2966
|
-
})(templateObject_11$
|
|
3051
|
+
})(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) {
|
|
2967
3052
|
var $reducedMotion = _a.$reducedMotion;
|
|
2968
|
-
return !$reducedMotion && styled.css(templateObject_10$
|
|
3053
|
+
return !$reducedMotion && styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n animation: ", " 1300ms linear infinite;\n "], ["\n animation: ", " 1300ms linear infinite;\n "])), rotateRing);
|
|
2969
3054
|
});
|
|
2970
3055
|
var StatusRow = styled__default.default.div.withConfig({
|
|
2971
3056
|
displayName: "AgentInput__StatusRow",
|
|
2972
3057
|
componentId: "sc-fhl996-9"
|
|
2973
|
-
})(templateObject_12$
|
|
3058
|
+
})(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']);
|
|
2974
3059
|
var StatusText = styled__default.default.div.withConfig({
|
|
2975
3060
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2976
3061
|
return !prop.startsWith('$');
|
|
2977
3062
|
},
|
|
2978
3063
|
displayName: "AgentInput__StatusText",
|
|
2979
3064
|
componentId: "sc-fhl996-10"
|
|
2980
|
-
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$
|
|
3065
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$8.spacing.layout.xl);
|
|
2981
3066
|
var StatusAnnouncement = styled__default.default.div.withConfig({
|
|
2982
3067
|
displayName: "AgentInput__StatusAnnouncement",
|
|
2983
3068
|
componentId: "sc-fhl996-11"
|
|
@@ -2985,21 +3070,21 @@ var StatusAnnouncement = styled__default.default.div.withConfig({
|
|
|
2985
3070
|
var MeterContainer = styled__default.default.div.withConfig({
|
|
2986
3071
|
displayName: "AgentInput__MeterContainer",
|
|
2987
3072
|
componentId: "sc-fhl996-12"
|
|
2988
|
-
})(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"])),
|
|
3073
|
+
})(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);
|
|
2989
3074
|
var MeterBar = styled__default.default.div.withConfig({
|
|
2990
3075
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2991
3076
|
return !prop.startsWith('$');
|
|
2992
3077
|
},
|
|
2993
3078
|
displayName: "AgentInput__MeterBar",
|
|
2994
3079
|
componentId: "sc-fhl996-13"
|
|
2995
|
-
})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height
|
|
3080
|
+
})(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) {
|
|
2996
3081
|
var $height = _a.$height;
|
|
2997
3082
|
return "".concat($height * 100, "%");
|
|
2998
|
-
});
|
|
3083
|
+
}, semantic$8.motion.duration.fast, semantic$8.motion.easing.easeOut);
|
|
2999
3084
|
var VisuallyHiddenLabel = styled__default.default.label.withConfig({
|
|
3000
3085
|
displayName: "AgentInput__VisuallyHiddenLabel",
|
|
3001
3086
|
componentId: "sc-fhl996-14"
|
|
3002
|
-
})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n
|
|
3087
|
+
})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), visuallyHidden);
|
|
3003
3088
|
function getInitialState(hasText) {
|
|
3004
3089
|
return hasText ? 'typing' : 'idle';
|
|
3005
3090
|
}
|
|
@@ -3628,10 +3713,31 @@ var AgentInput = function AgentInput(_a) {
|
|
|
3628
3713
|
})]
|
|
3629
3714
|
});
|
|
3630
3715
|
};
|
|
3631
|
-
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$
|
|
3716
|
+
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;
|
|
3632
3717
|
|
|
3633
|
-
var semantic$
|
|
3634
|
-
|
|
3718
|
+
var semantic$7 = data.tokensJson.semantic;
|
|
3719
|
+
var alert = data.tokensJson.component.alert;
|
|
3720
|
+
var _a$4 = semantic$7.motion,
|
|
3721
|
+
duration$1 = _a$4.duration,
|
|
3722
|
+
easing$1 = _a$4.easing;
|
|
3723
|
+
// Dismissing fades the alert out, then collapses the space it took (Ollie's call, #35).
|
|
3724
|
+
// Each half takes duration.fast, so the whole exit stays within the 300ms maximum (P6).
|
|
3725
|
+
var FADE_MS = parseInt(duration$1.fast, 10);
|
|
3726
|
+
var EXIT_MS = FADE_MS * 2;
|
|
3727
|
+
// The --alert-exit-* properties are the alert's height and vertical padding, measured
|
|
3728
|
+
// when it's dismissed, so nothing moves until the fade has finished
|
|
3729
|
+
var fadeThenCollapse = styled.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);
|
|
3730
|
+
var fadeOut = styled.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"
|
|
3731
|
+
// The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
|
|
3732
|
+
// (chosen when dismissed). A timer of the same length removes it if no animation event
|
|
3733
|
+
// arrives, for example where animations are disabled or the tab is hidden.
|
|
3734
|
+
// The generated names of the two exits (full, and reduced motion)
|
|
3735
|
+
])));
|
|
3736
|
+
// The exit ends on the alert's own animationend: 300ms, or 150ms under reduced motion
|
|
3737
|
+
// (chosen when dismissed). A timer of the same length removes it if no animation event
|
|
3738
|
+
// arrives, for example where animations are disabled or the tab is hidden.
|
|
3739
|
+
// The generated names of the two exits (full, and reduced motion)
|
|
3740
|
+
var EXIT_ANIMATION_NAMES = [fadeThenCollapse.getName(), fadeOut.getName()];
|
|
3635
3741
|
// Default icons by variant
|
|
3636
3742
|
var variantIcons = {
|
|
3637
3743
|
error: 'crossCircle',
|
|
@@ -3659,56 +3765,60 @@ var StyledAlert = styled__default.default.div.withConfig({
|
|
|
3659
3765
|
},
|
|
3660
3766
|
displayName: "Alert__StyledAlert",
|
|
3661
3767
|
componentId: "sc-18tq5d-0"
|
|
3662
|
-
})(
|
|
3768
|
+
})(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) {
|
|
3663
3769
|
var $inline = _a.$inline;
|
|
3664
3770
|
return $inline ? 'center' : 'flex-start';
|
|
3665
3771
|
}, function (_a) {
|
|
3666
3772
|
var $inline = _a.$inline;
|
|
3667
|
-
return $inline ? semantic$
|
|
3773
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
|
|
3668
3774
|
}, function (_a) {
|
|
3669
3775
|
var $inline = _a.$inline;
|
|
3670
|
-
return $inline ? semantic$
|
|
3671
|
-
},
|
|
3776
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md;
|
|
3777
|
+
}, semantic$7.border.radius.sm, semantic$7.border.width.thin, function (_a) {
|
|
3672
3778
|
var $variant = _a.$variant;
|
|
3673
3779
|
switch ($variant) {
|
|
3674
3780
|
case 'error':
|
|
3675
|
-
return "\n background-color: ".concat(semantic$
|
|
3781
|
+
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 ");
|
|
3676
3782
|
case 'warning':
|
|
3677
|
-
return "\n background-color: ".concat(semantic$
|
|
3783
|
+
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 ");
|
|
3678
3784
|
case 'success':
|
|
3679
|
-
return "\n background-color: ".concat(semantic$
|
|
3785
|
+
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 ");
|
|
3680
3786
|
case 'info':
|
|
3681
3787
|
default:
|
|
3682
|
-
return "\n background-color: ".concat(semantic$
|
|
3788
|
+
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 ");
|
|
3683
3789
|
}
|
|
3684
|
-
},
|
|
3790
|
+
}, semantic$7.breakpoint.md, function (_a) {
|
|
3685
3791
|
var $inline = _a.$inline;
|
|
3686
|
-
return $inline ? semantic$
|
|
3792
|
+
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.lg;
|
|
3793
|
+
}, function (_a) {
|
|
3794
|
+
var $isExiting = _a.$isExiting,
|
|
3795
|
+
$reducedExit = _a.$reducedExit;
|
|
3796
|
+
return $isExiting && styled.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 ? styled.css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["", " ", " ", " forwards"], ["", " ", " ", " forwards"])), fadeOut, duration$1.fast, easing$1.easeOut) : styled.css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["", " ", "ms ", " forwards"], ["", " ", "ms ", " forwards"])), fadeThenCollapse, EXIT_MS, easing$1.easeOut));
|
|
3687
3797
|
});
|
|
3688
3798
|
var StyledIconContainer = styled__default.default.div.withConfig({
|
|
3689
3799
|
displayName: "Alert__StyledIconContainer",
|
|
3690
3800
|
componentId: "sc-18tq5d-1"
|
|
3691
|
-
})(
|
|
3801
|
+
})(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"])));
|
|
3692
3802
|
var StyledContent$1 = styled__default.default.div.withConfig({
|
|
3693
3803
|
displayName: "Alert__StyledContent",
|
|
3694
3804
|
componentId: "sc-18tq5d-2"
|
|
3695
|
-
})(
|
|
3805
|
+
})(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);
|
|
3696
3806
|
var StyledTitle = styled__default.default.span.withConfig({
|
|
3697
3807
|
displayName: "Alert__StyledTitle",
|
|
3698
3808
|
componentId: "sc-18tq5d-3"
|
|
3699
|
-
})(
|
|
3809
|
+
})(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);
|
|
3700
3810
|
var StyledMessage = styled__default.default.span.withConfig({
|
|
3701
3811
|
displayName: "Alert__StyledMessage",
|
|
3702
3812
|
componentId: "sc-18tq5d-4"
|
|
3703
|
-
})(
|
|
3813
|
+
})(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);
|
|
3704
3814
|
var StyledActions = styled__default.default.div.withConfig({
|
|
3705
3815
|
displayName: "Alert__StyledActions",
|
|
3706
3816
|
componentId: "sc-18tq5d-5"
|
|
3707
|
-
})(
|
|
3817
|
+
})(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);
|
|
3708
3818
|
var StyledDismissButton = styled__default.default(IconButton).withConfig({
|
|
3709
3819
|
displayName: "Alert__StyledDismissButton",
|
|
3710
3820
|
componentId: "sc-18tq5d-6"
|
|
3711
|
-
})(
|
|
3821
|
+
})(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);
|
|
3712
3822
|
var Alert = function Alert(_a) {
|
|
3713
3823
|
var _b = _a.variant,
|
|
3714
3824
|
variant = _b === void 0 ? 'info' : _b,
|
|
@@ -3724,16 +3834,70 @@ var Alert = function Alert(_a) {
|
|
|
3724
3834
|
ariaLive = _e === void 0 ? 'polite' : _e,
|
|
3725
3835
|
dataTestId = _a["data-testid"],
|
|
3726
3836
|
props = __rest(_a, ["variant", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
|
|
3727
|
-
var _f = React__default.default.useState(
|
|
3728
|
-
|
|
3729
|
-
|
|
3837
|
+
var _f = React__default.default.useState('visible'),
|
|
3838
|
+
phase = _f[0],
|
|
3839
|
+
setPhase = _f[1];
|
|
3840
|
+
var _g = React__default.default.useState(false),
|
|
3841
|
+
reducedExit = _g[0],
|
|
3842
|
+
setReducedExit = _g[1];
|
|
3843
|
+
var _h = React__default.default.useState(),
|
|
3844
|
+
exitStyle = _h[0],
|
|
3845
|
+
setExitStyle = _h[1];
|
|
3846
|
+
var alertRef = React__default.default.useRef(null);
|
|
3847
|
+
// While it exits, its controls leave the tab order and can't be activated
|
|
3848
|
+
useInert(alertRef, phase === 'exiting');
|
|
3849
|
+
var onDismissRef = React__default.default.useRef(onDismiss);
|
|
3850
|
+
React__default.default.useEffect(function () {
|
|
3851
|
+
onDismissRef.current = onDismiss;
|
|
3852
|
+
}, [onDismiss]);
|
|
3730
3853
|
var handleDismiss = function handleDismiss() {
|
|
3731
|
-
|
|
3732
|
-
|
|
3854
|
+
var node = alertRef.current;
|
|
3855
|
+
if (node) {
|
|
3856
|
+
var style = window.getComputedStyle(node);
|
|
3857
|
+
var paddingTop = style.paddingTop,
|
|
3858
|
+
paddingBottom = style.paddingBottom;
|
|
3859
|
+
// max-height applies to the content box unless the alert is border-box (it depends on
|
|
3860
|
+
// the consumer's reset), so measure whichever box it uses; nothing moves at the click
|
|
3861
|
+
var height = Math.max(0, style.boxSizing === 'border-box' ? node.offsetHeight : node.offsetHeight - parseFloat(paddingTop) - parseFloat(paddingBottom) - parseFloat(style.borderTopWidth) - parseFloat(style.borderBottomWidth));
|
|
3862
|
+
setExitStyle({
|
|
3863
|
+
'--alert-exit-height': "".concat(height, "px"),
|
|
3864
|
+
'--alert-exit-padding-top': paddingTop,
|
|
3865
|
+
'--alert-exit-padding-bottom': paddingBottom
|
|
3866
|
+
});
|
|
3867
|
+
}
|
|
3868
|
+
setReducedExit(typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
3869
|
+
setPhase('exiting');
|
|
3733
3870
|
};
|
|
3734
|
-
|
|
3871
|
+
React__default.default.useEffect(function () {
|
|
3872
|
+
if (phase !== 'exiting') return;
|
|
3873
|
+
var timer = setTimeout(function () {
|
|
3874
|
+
return setPhase('dismissed');
|
|
3875
|
+
}, reducedExit ? FADE_MS : EXIT_MS);
|
|
3876
|
+
return function () {
|
|
3877
|
+
return clearTimeout(timer);
|
|
3878
|
+
};
|
|
3879
|
+
}, [phase, reducedExit]);
|
|
3880
|
+
// onDismiss fires once the alert has been removed from the DOM, so a consumer that
|
|
3881
|
+
// unmounts it in onDismiss still gets the animation, and can't observe it
|
|
3882
|
+
React__default.default.useEffect(function () {
|
|
3883
|
+
var _a;
|
|
3884
|
+
if (phase === 'dismissed') (_a = onDismissRef.current) === null || _a === void 0 ? void 0 : _a.call(onDismissRef);
|
|
3885
|
+
}, [phase]);
|
|
3886
|
+
if (phase === 'dismissed') {
|
|
3735
3887
|
return null;
|
|
3736
3888
|
}
|
|
3889
|
+
var isExiting = phase === 'exiting';
|
|
3890
|
+
// Consumers can pass extra HTML attributes, including style, aria-hidden and onAnimationEnd
|
|
3891
|
+
var forwarded = props;
|
|
3892
|
+
var handleAnimationEnd = function handleAnimationEnd(event) {
|
|
3893
|
+
var _a;
|
|
3894
|
+
(_a = forwarded.onAnimationEnd) === null || _a === void 0 ? void 0 : _a.call(forwarded, event);
|
|
3895
|
+
// Only the exit itself ends the dismissal: not animations bubbling up from children,
|
|
3896
|
+
// on pseudo-elements, or other animations a consumer puts on the alert
|
|
3897
|
+
if (isExiting && event.target === event.currentTarget && !event.pseudoElement && EXIT_ANIMATION_NAMES.includes(event.animationName)) {
|
|
3898
|
+
setPhase('dismissed');
|
|
3899
|
+
}
|
|
3900
|
+
};
|
|
3737
3901
|
// Get the icon for the current variant
|
|
3738
3902
|
var iconName = variantIcons[variant];
|
|
3739
3903
|
var alertIconColor = variantIconColors[variant];
|
|
@@ -3745,8 +3909,14 @@ var Alert = function Alert(_a) {
|
|
|
3745
3909
|
"aria-live": ariaLive,
|
|
3746
3910
|
"$variant": variant,
|
|
3747
3911
|
"$inline": inline,
|
|
3912
|
+
"$isExiting": isExiting,
|
|
3913
|
+
"$reducedExit": reducedExit,
|
|
3748
3914
|
"data-testid": dataTestId
|
|
3749
3915
|
}, props, {
|
|
3916
|
+
ref: alertRef,
|
|
3917
|
+
"aria-hidden": isExiting ? true : forwarded['aria-hidden'],
|
|
3918
|
+
style: isExiting ? __assign(__assign({}, forwarded.style), exitStyle) : forwarded.style,
|
|
3919
|
+
onAnimationEnd: handleAnimationEnd,
|
|
3750
3920
|
children: [jsxRuntime.jsx(StyledIconContainer, {
|
|
3751
3921
|
"aria-hidden": "true",
|
|
3752
3922
|
children: jsxRuntime.jsx(Icon, {
|
|
@@ -3776,9 +3946,9 @@ var Alert = function Alert(_a) {
|
|
|
3776
3946
|
}));
|
|
3777
3947
|
};
|
|
3778
3948
|
Alert.displayName = 'Alert';
|
|
3779
|
-
var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6;
|
|
3949
|
+
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;
|
|
3780
3950
|
|
|
3781
|
-
var _a$3, _b$1
|
|
3951
|
+
var _a$3, _b$1;
|
|
3782
3952
|
var BreadcrumbNavStyled = styled__default.default.nav.withConfig({
|
|
3783
3953
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
3784
3954
|
componentId: "sc-7ouzg5-0"
|
|
@@ -3786,7 +3956,7 @@ var BreadcrumbNavStyled = styled__default.default.nav.withConfig({
|
|
|
3786
3956
|
var BreadcrumbStyled = styled__default.default.li.withConfig({
|
|
3787
3957
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
3788
3958
|
componentId: "sc-7ouzg5-1"
|
|
3789
|
-
})(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:
|
|
3959
|
+
})(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"])), data.tokensJson.semantic.spacing.layout.sm, data.tokensJson.semantic.spacing.layout.sm, data.tokensJson.semantic.color.text.subdued, data.tokensJson.component.breadcrumbs.item.maxWidth, data.tokensJson.semantic.color.text["default"]);
|
|
3790
3960
|
var BreadcrumbSeparator = styled__default.default.span.withConfig({
|
|
3791
3961
|
displayName: "Breadcrumbs__BreadcrumbSeparator",
|
|
3792
3962
|
componentId: "sc-7ouzg5-2"
|
|
@@ -3843,7 +4013,7 @@ var templateObject_1$n, templateObject_2$i, templateObject_3$g;
|
|
|
3843
4013
|
var CardSmallStyled = styled__default.default.div.withConfig({
|
|
3844
4014
|
displayName: "CardSmall__CardSmallStyled",
|
|
3845
4015
|
componentId: "sc-jpcqvd-0"
|
|
3846
|
-
})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n a {\n text-decoration: none;\n }\n\n img {\n border-radius: ", ";\n transition:
|
|
4016
|
+
})(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"])), data.tokensJson.semantic.border.radius.sm, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeOut, data.tokensJson.semantic.border.width.thick, data.tokensJson.semantic.color.border.strong);
|
|
3847
4017
|
var CardSmall = function CardSmall(_a) {
|
|
3848
4018
|
var title = _a.title,
|
|
3849
4019
|
picture = _a.picture,
|
|
@@ -3897,11 +4067,11 @@ var CardSmall = function CardSmall(_a) {
|
|
|
3897
4067
|
};
|
|
3898
4068
|
var templateObject_1$m;
|
|
3899
4069
|
|
|
3900
|
-
var border$4 = data.tokensJson.
|
|
4070
|
+
var border$4 = data.tokensJson.semantic.border;
|
|
3901
4071
|
var CardLargeStyled = styled__default.default.div.withConfig({
|
|
3902
4072
|
displayName: "CardLarge__CardLargeStyled",
|
|
3903
4073
|
componentId: "sc-1rfgdzl-0"
|
|
3904
|
-
})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n max-width:
|
|
4074
|
+
})(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"])), data.tokensJson.component.cardLarge.maxWidth, border$4.radius['2xl'], data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeOut);
|
|
3905
4075
|
var CardLarge = function CardLarge(_a) {
|
|
3906
4076
|
var title = _a.title,
|
|
3907
4077
|
excerpt = _a.excerpt,
|
|
@@ -3983,11 +4153,11 @@ var StyledCheckbox = styled__default.default.span.withConfig({
|
|
|
3983
4153
|
},
|
|
3984
4154
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
3985
4155
|
componentId: "sc-1ddpctx-1"
|
|
3986
|
-
})(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width:
|
|
4156
|
+
})(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"
|
|
3987
4157
|
/**
|
|
3988
4158
|
* Container for checkbox with proper spacing and alignment
|
|
3989
4159
|
* 48px min-height for touch target (8px grid aligned)
|
|
3990
|
-
*/])), data.tokensJson.component.input["default"].borderRadius, data.tokensJson.component.input["default"].borderWidth, function (props) {
|
|
4160
|
+
*/])), data.tokensJson.component.checkbox.box.size, data.tokensJson.component.checkbox.box.size, data.tokensJson.component.checkbox.box.size, data.tokensJson.component.checkbox.box.size, data.tokensJson.component.input["default"].borderRadius, data.tokensJson.component.input["default"].borderWidth, function (props) {
|
|
3991
4161
|
return props.$checked || props.$indeterminate ? data.tokensJson.semantic.color.background.inverse : data.tokensJson.component.input["default"].backgroundColor;
|
|
3992
4162
|
}, function (props) {
|
|
3993
4163
|
if (props.$state === 'error') return data.tokensJson.component.input.error.borderColor;
|
|
@@ -3995,7 +4165,7 @@ var StyledCheckbox = styled__default.default.span.withConfig({
|
|
|
3995
4165
|
return data.tokensJson.component.input["default"].borderColor;
|
|
3996
4166
|
}, function (props) {
|
|
3997
4167
|
return props.$state === 'disabled' ? 'not-allowed' : 'pointer';
|
|
3998
|
-
}, HiddenCheckboxInput, function (props) {
|
|
4168
|
+
}, data.tokensJson.semantic.motion.duration.fast, data.tokensJson.semantic.motion.easing.easeOut, HiddenCheckboxInput, function (props) {
|
|
3999
4169
|
return props.$state === 'error' ? data.tokensJson.component.input.error.hover.borderColor : props.$checked || props.$indeterminate ? data.tokensJson.semantic.border.strong : data.tokensJson.component.input.hover.borderColor;
|
|
4000
4170
|
}, HiddenCheckboxInput, data.tokensJson.component.input.focus.outline, data.tokensJson.component.input.focus.outlineOffset, function (props) {
|
|
4001
4171
|
return props.$state === 'error' ? data.tokensJson.component.input.error.focus.borderColor : data.tokensJson.component.input.focus.borderColor;
|
|
@@ -4016,12 +4186,12 @@ var StyledCheckboxContainer = styled__default.default.label.withConfig({
|
|
|
4016
4186
|
},
|
|
4017
4187
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
4018
4188
|
componentId: "sc-1ddpctx-2"
|
|
4019
|
-
})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height:
|
|
4189
|
+
})(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"
|
|
4020
4190
|
/**
|
|
4021
4191
|
* Label text with proper typography
|
|
4022
|
-
*/])), data.tokensJson.
|
|
4192
|
+
*/])), data.tokensJson.semantic.spacing.layout.md, function (props) {
|
|
4023
4193
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
4024
|
-
}, function (props) {
|
|
4194
|
+
}, data.tokensJson.component.checkbox.row.minHeight, function (props) {
|
|
4025
4195
|
return props.$labelPosition === 'left' ? 'row-reverse' : 'row';
|
|
4026
4196
|
});
|
|
4027
4197
|
/**
|
|
@@ -4041,7 +4211,7 @@ var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4
|
|
|
4041
4211
|
var StyledFieldContainer$3 = styled__default.default.div.withConfig({
|
|
4042
4212
|
displayName: "Checkbox__StyledFieldContainer",
|
|
4043
4213
|
componentId: "sc-vquz3v-0"
|
|
4044
|
-
})(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"])), data.tokensJson.
|
|
4214
|
+
})(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"])), data.tokensJson.semantic.spacing.layout.xs);
|
|
4045
4215
|
var StyledHelperText$4 = styled__default.default.span.withConfig({
|
|
4046
4216
|
displayName: "Checkbox__StyledHelperText",
|
|
4047
4217
|
componentId: "sc-vquz3v-1"
|
|
@@ -4067,9 +4237,9 @@ var StyledHelperText$4 = styled__default.default.span.withConfig({
|
|
|
4067
4237
|
* required
|
|
4068
4238
|
* />
|
|
4069
4239
|
* ```
|
|
4070
|
-
*/])), data.tokensJson.
|
|
4071
|
-
return props.$error ? data.tokensJson.
|
|
4072
|
-
}, data.tokensJson.
|
|
4240
|
+
*/])), data.tokensJson.component.field.helperText.typography, function (props) {
|
|
4241
|
+
return props.$error ? data.tokensJson.component.field.helperText.colorError : data.tokensJson.component.field.helperText.color;
|
|
4242
|
+
}, data.tokensJson.semantic.spacing.layout['5xl']);
|
|
4073
4243
|
/**
|
|
4074
4244
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
4075
4245
|
*
|
|
@@ -4194,16 +4364,16 @@ var templateObject_1$i;
|
|
|
4194
4364
|
var _a$2 = data.tokensJson.semantic,
|
|
4195
4365
|
color$2 = _a$2.color,
|
|
4196
4366
|
border$3 = _a$2.border,
|
|
4197
|
-
spacing$2 = _a$2.spacing
|
|
4198
|
-
_a$2.motion;
|
|
4367
|
+
spacing$2 = _a$2.spacing,
|
|
4368
|
+
motion$2 = _a$2.motion;
|
|
4199
4369
|
var StyledCodeBlock = styled__default.default.pre.withConfig({
|
|
4200
4370
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
4201
4371
|
componentId: "sc-1p1t0kp-0"
|
|
4202
|
-
})(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
|
|
4372
|
+
})(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, data.tokensJson.semantic.border.radius.sm, spacing$2.layout.md, data.tokensJson.component.codeBlock.fontFamily, data.tokensJson.component.codeBlock.fontSize, data.tokensJson.component.codeBlock.lineHeight, color$2.text["default"], function (_a) {
|
|
4203
4373
|
var $isExpanded = _a.$isExpanded,
|
|
4204
4374
|
$needsExpansion = _a.$needsExpansion;
|
|
4205
4375
|
return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
|
|
4206
|
-
}, spacing$2.layout.sm, function (_a) {
|
|
4376
|
+
}, spacing$2.layout.sm, motion$2.duration.slow, motion$2.easing.easeInOut, reducedMotion, function (_a) {
|
|
4207
4377
|
var $maxHeight = _a.$maxHeight,
|
|
4208
4378
|
$isExpanded = _a.$isExpanded,
|
|
4209
4379
|
$needsExpansion = _a.$needsExpansion;
|
|
@@ -4223,7 +4393,7 @@ var CopyButtonWrapper = styled__default.default.div.withConfig({
|
|
|
4223
4393
|
var ExpandButtonWrapper = styled__default.default.div.withConfig({
|
|
4224
4394
|
displayName: "CodeBlock__ExpandButtonWrapper",
|
|
4225
4395
|
componentId: "sc-1p1t0kp-3"
|
|
4226
|
-
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n padding: ", " 0;\n position: absolute;\n bottom:
|
|
4396
|
+
})(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, data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.border.width.thin, spacing$2.layout.sm, data.tokensJson.semantic.border.radius.sm, motion$2.duration.slow, motion$2.easing.easeInOut, motion$2.duration.slow, motion$2.easing.easeInOut, function (_a) {
|
|
4227
4397
|
var $hasGradient = _a.$hasGradient;
|
|
4228
4398
|
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 ";
|
|
4229
4399
|
});
|
|
@@ -4386,9 +4556,9 @@ var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4
|
|
|
4386
4556
|
var StyledHeader$1 = styled__default.default.div.withConfig({
|
|
4387
4557
|
displayName: "DateGroup__StyledHeader",
|
|
4388
4558
|
componentId: "sc-9nfm1f-0"
|
|
4389
|
-
})(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:
|
|
4559
|
+
})(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"])), data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.spacing.layout.sm, data.tokensJson.semantic.color.background["default"], data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border["default"], function (_a) {
|
|
4390
4560
|
var $sticky = _a.$sticky;
|
|
4391
|
-
return $sticky && "\n position: sticky;\n top: 0;\n z-index:
|
|
4561
|
+
return $sticky && "\n position: sticky;\n top: 0;\n z-index: ".concat(data.tokensJson.semantic.zIndex.sticky, ";\n box-shadow: ").concat(data.tokensJson.semantic.elevation.sticky, ";\n ");
|
|
4392
4562
|
});
|
|
4393
4563
|
var StyledLeftSection = styled__default.default.div.withConfig({
|
|
4394
4564
|
displayName: "DateGroup__StyledLeftSection",
|
|
@@ -4475,16 +4645,16 @@ var DateGroup = function DateGroup(_a) {
|
|
|
4475
4645
|
};
|
|
4476
4646
|
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
4477
4647
|
|
|
4478
|
-
var semantic$
|
|
4648
|
+
var semantic$6 = data.tokensJson.semantic;
|
|
4479
4649
|
var StyledContainer$1 = styled__default.default.div.withConfig({
|
|
4480
4650
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4481
4651
|
return !prop.startsWith('$');
|
|
4482
4652
|
},
|
|
4483
4653
|
displayName: "EmptyState__StyledContainer",
|
|
4484
4654
|
componentId: "sc-1u5hxh-0"
|
|
4485
|
-
})(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:
|
|
4655
|
+
})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: ", ";\n margin: 0 auto;\n padding: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: ", ";\n margin: 0 auto;\n padding: ", ";\n"])), data.tokensJson.component.emptyState.maxWidth, function (_a) {
|
|
4486
4656
|
var $size = _a.$size;
|
|
4487
|
-
return $size === 'small' ? semantic$
|
|
4657
|
+
return $size === 'small' ? semantic$6.spacing.layout['4xl'] : $size === 'large' ? semantic$6.spacing.layout['8xl'] : semantic$6.spacing.layout['6xl'];
|
|
4488
4658
|
});
|
|
4489
4659
|
var StyledIllustration = styled__default.default.div.withConfig({
|
|
4490
4660
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -4494,20 +4664,20 @@ var StyledIllustration = styled__default.default.div.withConfig({
|
|
|
4494
4664
|
componentId: "sc-1u5hxh-1"
|
|
4495
4665
|
})(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) {
|
|
4496
4666
|
var $size = _a.$size;
|
|
4497
|
-
return $size === 'small' ?
|
|
4667
|
+
return $size === 'small' ? data.tokensJson.component.emptyState.illustration.small : $size === 'large' ? data.tokensJson.component.emptyState.illustration.large : data.tokensJson.component.emptyState.illustration.medium;
|
|
4498
4668
|
}, function (_a) {
|
|
4499
4669
|
var $size = _a.$size;
|
|
4500
|
-
return $size === 'small' ?
|
|
4501
|
-
}, semantic$
|
|
4670
|
+
return $size === 'small' ? data.tokensJson.component.emptyState.illustration.small : $size === 'large' ? data.tokensJson.component.emptyState.illustration.large : data.tokensJson.component.emptyState.illustration.medium;
|
|
4671
|
+
}, semantic$6.spacing.layout['2xl'], function (_a) {
|
|
4502
4672
|
var $variant = _a.$variant;
|
|
4503
|
-
return $variant === 'error' ? semantic$
|
|
4673
|
+
return $variant === 'error' ? semantic$6.color.icon.error : $variant === 'success' ? semantic$6.color.icon.success : semantic$6.color.icon.subdued;
|
|
4504
4674
|
});
|
|
4505
4675
|
var StyledTextContainer = styled__default.default.div.withConfig({
|
|
4506
4676
|
displayName: "EmptyState__StyledTextContainer",
|
|
4507
4677
|
componentId: "sc-1u5hxh-2"
|
|
4508
|
-
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width:
|
|
4678
|
+
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width: ", ";\n margin-bottom: ", ";\n"], ["\n max-width: ", ";\n margin-bottom: ", ";\n"
|
|
4509
4679
|
// Map illustration type to icon name
|
|
4510
|
-
])), semantic$
|
|
4680
|
+
])), data.tokensJson.component.emptyState.text.maxWidth, semantic$6.spacing.layout['2xl']);
|
|
4511
4681
|
// Map illustration type to icon name
|
|
4512
4682
|
var illustrationToIcon = {
|
|
4513
4683
|
search: 'search',
|
|
@@ -4562,7 +4732,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4562
4732
|
children: title
|
|
4563
4733
|
}), jsxRuntime.jsx("div", {
|
|
4564
4734
|
style: {
|
|
4565
|
-
marginTop: semantic$
|
|
4735
|
+
marginTop: semantic$6.spacing.layout.md
|
|
4566
4736
|
},
|
|
4567
4737
|
children: jsxRuntime.jsx(Typography, {
|
|
4568
4738
|
variant: "body",
|
|
@@ -4572,7 +4742,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4572
4742
|
})]
|
|
4573
4743
|
}), (action || secondaryAction) && jsxRuntime.jsx(Box, {
|
|
4574
4744
|
width: "100%",
|
|
4575
|
-
maxWidth:
|
|
4745
|
+
maxWidth: data.tokensJson.component.emptyState.actions.maxWidth,
|
|
4576
4746
|
children: jsxRuntime.jsxs(Stack, {
|
|
4577
4747
|
direction: "column",
|
|
4578
4748
|
gap: "sm",
|
|
@@ -4594,25 +4764,25 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4594
4764
|
};
|
|
4595
4765
|
var templateObject_1$f, templateObject_2$d, templateObject_3$c;
|
|
4596
4766
|
|
|
4597
|
-
var _a$1 = data.tokensJson.
|
|
4598
|
-
spacing$1 = _a$1.spacing,
|
|
4767
|
+
var _a$1 = data.tokensJson.semantic,
|
|
4768
|
+
spacing$1 = _a$1.spacing.layout,
|
|
4599
4769
|
border$2 = _a$1.border;
|
|
4600
4770
|
var FeatureBlockStyled = styled__default.default.div.withConfig({
|
|
4601
4771
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
4602
4772
|
componentId: "sc-1mi4lso-0"
|
|
4603
|
-
})(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:
|
|
4773
|
+
})(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"])), data.tokensJson.semantic.breakpoint.md, data.tokensJson.semantic.breakpoint.lg, spacing$1['7xl'], border$2.radius['2xl'], data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeOut);
|
|
4604
4774
|
var ImageWrapper = styled__default.default.div.withConfig({
|
|
4605
4775
|
displayName: "FeatureBlock__ImageWrapper",
|
|
4606
4776
|
componentId: "sc-1mi4lso-1"
|
|
4607
|
-
})(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"])), data.tokensJson.
|
|
4777
|
+
})(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"])), data.tokensJson.semantic.breakpoint.lg);
|
|
4608
4778
|
var ContentSection = styled__default.default.div.withConfig({
|
|
4609
4779
|
displayName: "FeatureBlock__ContentSection",
|
|
4610
4780
|
componentId: "sc-1mi4lso-2"
|
|
4611
|
-
})(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[
|
|
4781
|
+
})(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'], data.tokensJson.semantic.breakpoint.lg, spacing$1['4xl'], data.tokensJson.semantic.breakpoint.xl, spacing$1['11xl']);
|
|
4612
4782
|
var ButtonWrapper = styled__default.default.div.withConfig({
|
|
4613
4783
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
4614
4784
|
componentId: "sc-1mi4lso-3"
|
|
4615
|
-
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1
|
|
4785
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1.lg);
|
|
4616
4786
|
var ContentWrapper = styled__default.default.div.withConfig({
|
|
4617
4787
|
displayName: "FeatureBlock__ContentWrapper",
|
|
4618
4788
|
componentId: "sc-1mi4lso-4"
|
|
@@ -4675,15 +4845,18 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
4675
4845
|
};
|
|
4676
4846
|
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
|
|
4677
4847
|
|
|
4678
|
-
var _a = data.tokensJson.
|
|
4679
|
-
|
|
4680
|
-
|
|
4848
|
+
var _a = data.tokensJson.semantic,
|
|
4849
|
+
color$1 = _a.color,
|
|
4850
|
+
border$1 = _a.border,
|
|
4681
4851
|
zIndex = _a.zIndex,
|
|
4682
|
-
|
|
4683
|
-
|
|
4684
|
-
|
|
4685
|
-
|
|
4686
|
-
input$1 =
|
|
4852
|
+
elevation$1 = _a.elevation,
|
|
4853
|
+
motion$1 = _a.motion,
|
|
4854
|
+
spacing = _a.spacing.layout,
|
|
4855
|
+
_b = data.tokensJson.component,
|
|
4856
|
+
input$1 = _b.input,
|
|
4857
|
+
field$3 = _b.field;
|
|
4858
|
+
var duration = motion$1.duration,
|
|
4859
|
+
easing = motion$1.easing;
|
|
4687
4860
|
var DropdownContainer = styled__default.default.div.withConfig({
|
|
4688
4861
|
displayName: "Dropdown__DropdownContainer",
|
|
4689
4862
|
componentId: "sc-kz07c4-0"
|
|
@@ -4694,10 +4867,10 @@ var DropdownTrigger = styled__default.default.button.withConfig({
|
|
|
4694
4867
|
},
|
|
4695
4868
|
displayName: "Dropdown__DropdownTrigger",
|
|
4696
4869
|
componentId: "sc-kz07c4-1"
|
|
4697
|
-
})(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
|
|
4870
|
+
})(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) {
|
|
4698
4871
|
var $hasError = _a.$hasError;
|
|
4699
4872
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
4700
|
-
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
4873
|
+
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, duration.normal, easing.easeInOut, duration.normal, easing.easeInOut, function (_a) {
|
|
4701
4874
|
var $hasError = _a.$hasError;
|
|
4702
4875
|
return $hasError ? input$1.error.hover.borderColor : input$1.hover.borderColor;
|
|
4703
4876
|
}, function (_a) {
|
|
@@ -4714,17 +4887,17 @@ var DropdownIcon = styled__default.default.div.withConfig({
|
|
|
4714
4887
|
},
|
|
4715
4888
|
displayName: "Dropdown__DropdownIcon",
|
|
4716
4889
|
componentId: "sc-kz07c4-2"
|
|
4717
|
-
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-left: ", ";\n transition: transform
|
|
4890
|
+
})(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) {
|
|
4718
4891
|
var $isOpen = _a.$isOpen;
|
|
4719
4892
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
4720
|
-
});
|
|
4893
|
+
}, reducedMotion);
|
|
4721
4894
|
var DropdownMenu = styled__default.default.div.withConfig({
|
|
4722
4895
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4723
4896
|
return !prop.startsWith('$');
|
|
4724
4897
|
},
|
|
4725
4898
|
displayName: "Dropdown__DropdownMenu",
|
|
4726
4899
|
componentId: "sc-kz07c4-3"
|
|
4727
|
-
})(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
|
|
4900
|
+
})(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) {
|
|
4728
4901
|
var $isOpen = _a.$isOpen;
|
|
4729
4902
|
return $isOpen ? 1 : 0;
|
|
4730
4903
|
}, function (_a) {
|
|
@@ -4732,28 +4905,28 @@ var DropdownMenu = styled__default.default.div.withConfig({
|
|
|
4732
4905
|
return $isOpen ? 'visible' : 'hidden';
|
|
4733
4906
|
}, function (_a) {
|
|
4734
4907
|
var $isOpen = _a.$isOpen;
|
|
4735
|
-
return $isOpen ? 'translateY(0)' :
|
|
4736
|
-
});
|
|
4908
|
+
return $isOpen ? 'translateY(0)' : "translateY(-".concat(spacing.sm, ")");
|
|
4909
|
+
}, duration.fast, easing.easeOut, data.tokensJson.semantic.size.menu.maxHeight, reducedMotion);
|
|
4737
4910
|
var DropdownOption = styled__default.default.button.withConfig({
|
|
4738
4911
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4739
4912
|
return !prop.startsWith('$');
|
|
4740
4913
|
},
|
|
4741
4914
|
displayName: "Dropdown__DropdownOption",
|
|
4742
4915
|
componentId: "sc-kz07c4-4"
|
|
4743
|
-
})(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
|
|
4916
|
+
})(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) {
|
|
4744
4917
|
var $isSelected = _a.$isSelected,
|
|
4745
4918
|
$isFocused = _a.$isFocused;
|
|
4746
4919
|
if ($isFocused) return color$1.background.surface;
|
|
4747
4920
|
if ($isSelected) return color$1.background.surface;
|
|
4748
4921
|
return 'transparent';
|
|
4749
|
-
}, input$1["default"].font, input$1["default"].textColor, color$1.background.surface, color$1.background.surface, border$1.subtle);
|
|
4922
|
+
}, input$1["default"].font, input$1["default"].textColor, duration.fast, easing.easeOut, color$1.background.surface, color$1.background.surface, border$1.subtle);
|
|
4750
4923
|
var StyledHelperText$3 = styled__default.default.div.withConfig({
|
|
4751
4924
|
displayName: "Dropdown__StyledHelperText",
|
|
4752
4925
|
componentId: "sc-kz07c4-5"
|
|
4753
|
-
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography
|
|
4926
|
+
})(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) {
|
|
4754
4927
|
var $hasError = _a.$hasError;
|
|
4755
|
-
return $hasError ?
|
|
4756
|
-
},
|
|
4928
|
+
return $hasError ? field$3.helperText.colorError : field$3.helperText.color;
|
|
4929
|
+
}, field$3.gap);
|
|
4757
4930
|
var Dropdown = function Dropdown(_a) {
|
|
4758
4931
|
var options = _a.options,
|
|
4759
4932
|
value = _a.value,
|
|
@@ -4874,7 +5047,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
4874
5047
|
htmlFor: dropdownId,
|
|
4875
5048
|
style: {
|
|
4876
5049
|
display: 'block',
|
|
4877
|
-
marginBottom:
|
|
5050
|
+
marginBottom: field$3.gap
|
|
4878
5051
|
},
|
|
4879
5052
|
children: jsxRuntime.jsx(Typography, {
|
|
4880
5053
|
variant: "label",
|
|
@@ -4929,7 +5102,7 @@ var Dropdown = function Dropdown(_a) {
|
|
|
4929
5102
|
};
|
|
4930
5103
|
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
|
|
4931
5104
|
|
|
4932
|
-
var semantic$
|
|
5105
|
+
var semantic$5 = data.tokensJson.semantic;
|
|
4933
5106
|
var StyledList = styled__default.default.ul.withConfig({
|
|
4934
5107
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4935
5108
|
return !prop.startsWith('$');
|
|
@@ -4938,7 +5111,7 @@ var StyledList = styled__default.default.ul.withConfig({
|
|
|
4938
5111
|
componentId: "sc-1irksg5-0"
|
|
4939
5112
|
})(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) {
|
|
4940
5113
|
var $dividers = _a.$dividers;
|
|
4941
|
-
return $dividers && "\n > li:not(:last-child) {\n border-bottom:
|
|
5114
|
+
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 ");
|
|
4942
5115
|
});
|
|
4943
5116
|
var List = function List(_a) {
|
|
4944
5117
|
var children = _a.children,
|
|
@@ -4962,20 +5135,19 @@ var List = function List(_a) {
|
|
|
4962
5135
|
List.displayName = 'List';
|
|
4963
5136
|
var templateObject_1$c;
|
|
4964
5137
|
|
|
4965
|
-
var semantic$
|
|
4966
|
-
|
|
4967
|
-
|
|
4968
|
-
|
|
4969
|
-
|
|
4970
|
-
|
|
4971
|
-
semantic$7.motion;
|
|
5138
|
+
var semantic$4 = data.tokensJson.semantic;
|
|
5139
|
+
var layout = semantic$4.spacing.layout,
|
|
5140
|
+
color = semantic$4.color,
|
|
5141
|
+
border = semantic$4.border,
|
|
5142
|
+
elevation = semantic$4.elevation,
|
|
5143
|
+
motion = semantic$4.motion;
|
|
4972
5144
|
// ---------------------------------------------------------------------------
|
|
4973
5145
|
// Size map
|
|
4974
5146
|
// ---------------------------------------------------------------------------
|
|
4975
5147
|
var sizeToWidth = {
|
|
4976
|
-
small:
|
|
4977
|
-
medium:
|
|
4978
|
-
large:
|
|
5148
|
+
small: data.tokensJson.semantic.size.overlay.sm,
|
|
5149
|
+
medium: data.tokensJson.semantic.size.overlay.md,
|
|
5150
|
+
large: data.tokensJson.semantic.size.overlay.lg
|
|
4979
5151
|
};
|
|
4980
5152
|
// ---------------------------------------------------------------------------
|
|
4981
5153
|
// Animations
|
|
@@ -4992,17 +5164,29 @@ var scaleIn = styled.keyframes(templateObject_2$a || (templateObject_2$a = __mak
|
|
|
4992
5164
|
var StyledOverlay$1 = styled__default.default.div.withConfig({
|
|
4993
5165
|
displayName: "Modal__StyledOverlay",
|
|
4994
5166
|
componentId: "sc-1d3g5gh-0"
|
|
4995
|
-
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color:
|
|
5167
|
+
})(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, styled.css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5168
|
+
var $isExiting = _a.$isExiting;
|
|
5169
|
+
return $isExiting && exitAnimation;
|
|
5170
|
+
}));
|
|
4996
5171
|
var StyledDialog = styled__default.default.div.withConfig({
|
|
4997
5172
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4998
5173
|
return !prop.startsWith('$');
|
|
4999
5174
|
},
|
|
5000
5175
|
displayName: "Modal__StyledDialog",
|
|
5001
5176
|
componentId: "sc-1d3g5gh-1"
|
|
5002
|
-
})(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:
|
|
5177
|
+
})(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) {
|
|
5003
5178
|
var $width = _a.$width;
|
|
5004
5179
|
return $width;
|
|
5005
|
-
}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, styled.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", "
|
|
5180
|
+
}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, styled.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), scaleIn, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5181
|
+
var $isExiting = _a.$isExiting;
|
|
5182
|
+
return $isExiting && exitAnimation;
|
|
5183
|
+
}), reducedMotion, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5184
|
+
var $isExiting = _a.$isExiting;
|
|
5185
|
+
return $isExiting && exitAnimation;
|
|
5186
|
+
}, semantic$4.breakpoint.md, fadeIn$1, motion.duration.normal, motion.easing.easeOut, function (_a) {
|
|
5187
|
+
var $isExiting = _a.$isExiting;
|
|
5188
|
+
return $isExiting && exitAnimation;
|
|
5189
|
+
});
|
|
5006
5190
|
var StyledHeader = styled__default.default.div.withConfig({
|
|
5007
5191
|
displayName: "Modal__StyledHeader",
|
|
5008
5192
|
componentId: "sc-1d3g5gh-2"
|
|
@@ -5010,7 +5194,7 @@ var StyledHeader = styled__default.default.div.withConfig({
|
|
|
5010
5194
|
var StyledBody = styled__default.default.div.withConfig({
|
|
5011
5195
|
displayName: "Modal__StyledBody",
|
|
5012
5196
|
componentId: "sc-1d3g5gh-3"
|
|
5013
|
-
})(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,
|
|
5197
|
+
})(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);
|
|
5014
5198
|
var StyledFooter = styled__default.default.div.withConfig({
|
|
5015
5199
|
displayName: "Modal__StyledFooter",
|
|
5016
5200
|
componentId: "sc-1d3g5gh-4"
|
|
@@ -5064,6 +5248,10 @@ var Modal = function Modal(_a) {
|
|
|
5064
5248
|
ariaDescribedBy = _a["aria-describedby"];
|
|
5065
5249
|
var dialogRef = React.useRef(null);
|
|
5066
5250
|
var previousFocusRef = React.useRef(null);
|
|
5251
|
+
var _e = usePresence(isOpen),
|
|
5252
|
+
isPresent = _e.isPresent,
|
|
5253
|
+
isExiting = _e.isExiting;
|
|
5254
|
+
useInert(dialogRef, isExiting);
|
|
5067
5255
|
// -----------------------------------------------------------------------
|
|
5068
5256
|
// Focus & scroll-lock management
|
|
5069
5257
|
// -----------------------------------------------------------------------
|
|
@@ -5115,19 +5303,22 @@ var Modal = function Modal(_a) {
|
|
|
5115
5303
|
// Overlay click
|
|
5116
5304
|
// -----------------------------------------------------------------------
|
|
5117
5305
|
var handleOverlayClick = function handleOverlayClick(event) {
|
|
5118
|
-
|
|
5306
|
+
// While exiting, the backdrop still catches clicks but doesn't close again
|
|
5307
|
+
if (!isExiting && closeOnOverlayClick && event.target === event.currentTarget) {
|
|
5119
5308
|
onClose();
|
|
5120
5309
|
}
|
|
5121
5310
|
};
|
|
5122
5311
|
// -----------------------------------------------------------------------
|
|
5123
5312
|
// Render
|
|
5124
5313
|
// -----------------------------------------------------------------------
|
|
5125
|
-
|
|
5314
|
+
// Stays mounted while the exit fade runs, hidden from assistive technology
|
|
5315
|
+
if (!isPresent) return null;
|
|
5126
5316
|
var titleId = dataTestId ? "".concat(dataTestId, "-title") : 'modal-title';
|
|
5127
5317
|
var width = sizeToWidth[size];
|
|
5128
5318
|
var modal = jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
5129
5319
|
children: [jsxRuntime.jsx(StyledOverlay$1, {
|
|
5130
5320
|
onClick: handleOverlayClick,
|
|
5321
|
+
"$isExiting": isExiting,
|
|
5131
5322
|
"data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'modal-overlay'
|
|
5132
5323
|
}), jsxRuntime.jsxs(StyledDialog, {
|
|
5133
5324
|
ref: dialogRef,
|
|
@@ -5136,8 +5327,10 @@ var Modal = function Modal(_a) {
|
|
|
5136
5327
|
"aria-label": ariaLabel || title,
|
|
5137
5328
|
"aria-labelledby": titleId,
|
|
5138
5329
|
"aria-describedby": ariaDescribedBy,
|
|
5330
|
+
"aria-hidden": isExiting || undefined,
|
|
5139
5331
|
tabIndex: -1,
|
|
5140
5332
|
"$width": width,
|
|
5333
|
+
"$isExiting": isExiting,
|
|
5141
5334
|
onKeyDown: handleKeyDown,
|
|
5142
5335
|
"data-testid": dataTestId,
|
|
5143
5336
|
children: [jsxRuntime.jsxs(StyledHeader, {
|
|
@@ -5192,7 +5385,7 @@ var StyledInputBase = styled__default.default.input.withConfig({
|
|
|
5192
5385
|
},
|
|
5193
5386
|
displayName: "InputBase__StyledInputBase",
|
|
5194
5387
|
componentId: "sc-1bpf4e8-0"
|
|
5195
|
-
})(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
|
|
5388
|
+
})(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"
|
|
5196
5389
|
/**
|
|
5197
5390
|
* Base styled textarea with shared styling
|
|
5198
5391
|
*/])), input["default"].font, function (_a) {
|
|
@@ -5207,7 +5400,7 @@ var StyledInputBase = styled__default.default.input.withConfig({
|
|
|
5207
5400
|
if ($disabled) return input.disabled.borderColor;
|
|
5208
5401
|
if ($hasError) return input.error.borderColor;
|
|
5209
5402
|
return input["default"].borderColor;
|
|
5210
|
-
}, input["default"].borderRadius, input.placeholder.textColor, function (_a) {
|
|
5403
|
+
}, input["default"].borderRadius, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeInOut, input.placeholder.textColor, function (_a) {
|
|
5211
5404
|
var $hasError = _a.$hasError;
|
|
5212
5405
|
return $hasError ? input.error.focus.borderColor : input.focus.borderColor;
|
|
5213
5406
|
}, input.focus.outline, input.focus.outlineOffset, function (_a) {
|
|
@@ -5223,23 +5416,22 @@ var StyledTextAreaBase = styled__default.default.textarea.withConfig({
|
|
|
5223
5416
|
},
|
|
5224
5417
|
displayName: "InputBase__StyledTextAreaBase",
|
|
5225
5418
|
componentId: "sc-1bpf4e8-1"
|
|
5226
|
-
})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height:
|
|
5419
|
+
})(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, data.tokensJson.component.input.textarea.minHeight, data.tokensJson.semantic.lineHeight.normal);
|
|
5227
5420
|
var templateObject_1$a, templateObject_2$9;
|
|
5228
5421
|
|
|
5229
|
-
var
|
|
5230
|
-
base$6 = data.tokensJson.base;
|
|
5422
|
+
var field$2 = data.tokensJson.component.field;
|
|
5231
5423
|
var StyledFieldContainer$2 = styled__default.default.div.withConfig({
|
|
5232
5424
|
displayName: "NumberInput__StyledFieldContainer",
|
|
5233
5425
|
componentId: "sc-qotc3w-0"
|
|
5234
|
-
})(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"])),
|
|
5426
|
+
})(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);
|
|
5235
5427
|
var StyledLabel$3 = styled__default.default.label.withConfig({
|
|
5236
5428
|
displayName: "NumberInput__StyledLabel",
|
|
5237
5429
|
componentId: "sc-qotc3w-1"
|
|
5238
|
-
})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n
|
|
5430
|
+
})(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);
|
|
5239
5431
|
var StyledRequiredIndicator$2 = styled__default.default.span.withConfig({
|
|
5240
5432
|
displayName: "NumberInput__StyledRequiredIndicator",
|
|
5241
5433
|
componentId: "sc-qotc3w-2"
|
|
5242
|
-
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])),
|
|
5434
|
+
})(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);
|
|
5243
5435
|
var StyledInputWrapper$2 = styled__default.default.div.withConfig({
|
|
5244
5436
|
displayName: "NumberInput__StyledInputWrapper",
|
|
5245
5437
|
componentId: "sc-qotc3w-3"
|
|
@@ -5247,11 +5439,11 @@ var StyledInputWrapper$2 = styled__default.default.div.withConfig({
|
|
|
5247
5439
|
var StyledNumberInput = styled__default.default(StyledInputBase).withConfig({
|
|
5248
5440
|
displayName: "NumberInput__StyledNumberInput",
|
|
5249
5441
|
componentId: "sc-qotc3w-4"
|
|
5250
|
-
})(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"])),
|
|
5442
|
+
})(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"])), data.tokensJson.semantic.spacing.layout['6xl']);
|
|
5251
5443
|
var StyledStepperContainer = styled__default.default.div.withConfig({
|
|
5252
5444
|
displayName: "NumberInput__StyledStepperContainer",
|
|
5253
5445
|
componentId: "sc-qotc3w-5"
|
|
5254
|
-
})(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"])),
|
|
5446
|
+
})(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"])), data.tokensJson.semantic.spacing.layout.sm, data.tokensJson.semantic.spacing.layout.sm);
|
|
5255
5447
|
var StyledHelperText$2 = styled__default.default.div.withConfig({
|
|
5256
5448
|
displayName: "NumberInput__StyledHelperText",
|
|
5257
5449
|
componentId: "sc-qotc3w-6"
|
|
@@ -5278,9 +5470,9 @@ var StyledHelperText$2 = styled__default.default.div.withConfig({
|
|
|
5278
5470
|
* onChange={(newValue) => setValue(newValue)}
|
|
5279
5471
|
* />
|
|
5280
5472
|
* ```
|
|
5281
|
-
*/])),
|
|
5473
|
+
*/])), field$2.helperText.typography, function (_a) {
|
|
5282
5474
|
var $isError = _a.$isError;
|
|
5283
|
-
return $isError ?
|
|
5475
|
+
return $isError ? field$2.helperText.colorError : field$2.helperText.color;
|
|
5284
5476
|
});
|
|
5285
5477
|
/**
|
|
5286
5478
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
@@ -5487,9 +5679,9 @@ var PageTitleStyled = styled__default.default.div.withConfig({
|
|
|
5487
5679
|
},
|
|
5488
5680
|
displayName: "PageTitle__PageTitleStyled",
|
|
5489
5681
|
componentId: "sc-16h256f-0"
|
|
5490
|
-
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), data.tokensJson.
|
|
5682
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), data.tokensJson.semantic.spacing.layout['2xl'], function (_a) {
|
|
5491
5683
|
var $hasBackButton = _a.$hasBackButton;
|
|
5492
|
-
return $hasBackButton ? data.tokensJson.
|
|
5684
|
+
return $hasBackButton ? data.tokensJson.semantic.spacing.layout.none : data.tokensJson.semantic.spacing.layout['7xl'];
|
|
5493
5685
|
});
|
|
5494
5686
|
var PageTitle = function PageTitle(_a) {
|
|
5495
5687
|
var title = _a.title,
|
|
@@ -5520,26 +5712,25 @@ var PageTitle = function PageTitle(_a) {
|
|
|
5520
5712
|
};
|
|
5521
5713
|
var templateObject_1$8;
|
|
5522
5714
|
|
|
5523
|
-
var
|
|
5524
|
-
base$5 = data.tokensJson.base;
|
|
5715
|
+
var field$1 = data.tokensJson.component.field;
|
|
5525
5716
|
var StyledFieldContainer$1 = styled__default.default.div.withConfig({
|
|
5526
5717
|
displayName: "PasswordField__StyledFieldContainer",
|
|
5527
5718
|
componentId: "sc-1p15zk0-0"
|
|
5528
|
-
})(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"])),
|
|
5719
|
+
})(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);
|
|
5529
5720
|
var StyledLabel$2 = styled__default.default.label.withConfig({
|
|
5530
5721
|
displayName: "PasswordField__StyledLabel",
|
|
5531
5722
|
componentId: "sc-1p15zk0-1"
|
|
5532
|
-
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n
|
|
5723
|
+
})(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);
|
|
5533
5724
|
var StyledRequiredIndicator$1 = styled__default.default.span.withConfig({
|
|
5534
5725
|
displayName: "PasswordField__StyledRequiredIndicator",
|
|
5535
5726
|
componentId: "sc-1p15zk0-2"
|
|
5536
|
-
})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])),
|
|
5727
|
+
})(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);
|
|
5537
5728
|
var StyledHelperText$1 = styled__default.default.div.withConfig({
|
|
5538
5729
|
displayName: "PasswordField__StyledHelperText",
|
|
5539
5730
|
componentId: "sc-1p15zk0-3"
|
|
5540
|
-
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])),
|
|
5731
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), field$1.helperText.typography, function (_a) {
|
|
5541
5732
|
var $hasError = _a.$hasError;
|
|
5542
|
-
return $hasError ?
|
|
5733
|
+
return $hasError ? field$1.helperText.colorError : field$1.helperText.color;
|
|
5543
5734
|
});
|
|
5544
5735
|
var StyledInputWrapper$1 = styled__default.default.div.withConfig({
|
|
5545
5736
|
displayName: "PasswordField__StyledInputWrapper",
|
|
@@ -5560,7 +5751,7 @@ var StyledToggleButton = styled__default.default.div.withConfig({
|
|
|
5560
5751
|
* required
|
|
5561
5752
|
* />
|
|
5562
5753
|
* ```
|
|
5563
|
-
*/])),
|
|
5754
|
+
*/])), data.tokensJson.semantic.spacing.layout.sm);
|
|
5564
5755
|
/**
|
|
5565
5756
|
* PasswordField component for secure password input with visibility toggle
|
|
5566
5757
|
*
|
|
@@ -5653,8 +5844,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
5653
5844
|
PasswordField.displayName = 'PasswordField';
|
|
5654
5845
|
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$4;
|
|
5655
5846
|
|
|
5656
|
-
var semantic$
|
|
5657
|
-
base$4 = data.tokensJson.base,
|
|
5847
|
+
var semantic$3 = data.tokensJson.semantic,
|
|
5658
5848
|
component = data.tokensJson.component;
|
|
5659
5849
|
var StyledSearchContainer = styled__default.default.div.withConfig({
|
|
5660
5850
|
displayName: "SearchField__StyledSearchContainer",
|
|
@@ -5663,7 +5853,7 @@ var StyledSearchContainer = styled__default.default.div.withConfig({
|
|
|
5663
5853
|
var StyledInputWrapper = styled__default.default.div.withConfig({
|
|
5664
5854
|
displayName: "SearchField__StyledInputWrapper",
|
|
5665
5855
|
componentId: "sc-qhz9i8-1"
|
|
5666
|
-
})(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
|
|
5856
|
+
})(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) {
|
|
5667
5857
|
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 ");
|
|
5668
5858
|
}, function (props) {
|
|
5669
5859
|
return props.$disabled && "\n background-color: ".concat(component.input.disabled.backgroundColor, ";\n border-color: ").concat(component.input.disabled.borderColor, ";\n cursor: not-allowed;\n ");
|
|
@@ -5671,15 +5861,15 @@ var StyledInputWrapper = styled__default.default.div.withConfig({
|
|
|
5671
5861
|
var StyledInput = styled__default.default.input.withConfig({
|
|
5672
5862
|
displayName: "SearchField__StyledInput",
|
|
5673
5863
|
componentId: "sc-qhz9i8-2"
|
|
5674
|
-
})(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$
|
|
5864
|
+
})(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);
|
|
5675
5865
|
var StyledSuggestionsList = styled__default.default.ul.withConfig({
|
|
5676
5866
|
displayName: "SearchField__StyledSuggestionsList",
|
|
5677
5867
|
componentId: "sc-qhz9i8-3"
|
|
5678
|
-
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height:
|
|
5868
|
+
})(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, data.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);
|
|
5679
5869
|
var StyledSectionHeader = styled__default.default.div.withConfig({
|
|
5680
5870
|
displayName: "SearchField__StyledSectionHeader",
|
|
5681
5871
|
componentId: "sc-qhz9i8-4"
|
|
5682
|
-
})(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"])),
|
|
5872
|
+
})(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, data.tokensJson.component.searchField.sectionHeader.typography, semantic$3.color.text.subdued, data.tokensJson.component.searchField.sectionHeader.letterSpacing);
|
|
5683
5873
|
var debounce = function debounce(func, wait) {
|
|
5684
5874
|
var timeout = null;
|
|
5685
5875
|
return function () {
|
|
@@ -5982,8 +6172,7 @@ var SearchField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
5982
6172
|
SearchField.displayName = 'SearchField';
|
|
5983
6173
|
var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4;
|
|
5984
6174
|
|
|
5985
|
-
var semantic$
|
|
5986
|
-
base$3 = data.tokensJson.base;
|
|
6175
|
+
var semantic$2 = data.tokensJson.semantic;
|
|
5987
6176
|
// Fade in animation for overlay
|
|
5988
6177
|
var fadeIn = styled.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"
|
|
5989
6178
|
// Slide animations for each position
|
|
@@ -5999,35 +6188,50 @@ var StyledOverlay = styled__default.default.div.withConfig({
|
|
|
5999
6188
|
},
|
|
6000
6189
|
displayName: "Sheet__StyledOverlay",
|
|
6001
6190
|
componentId: "sc-8abisx-0"
|
|
6002
|
-
})(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:
|
|
6003
|
-
var $
|
|
6004
|
-
return $
|
|
6005
|
-
});
|
|
6191
|
+
})(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, styled.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
|
|
6192
|
+
var $isExiting = _a.$isExiting;
|
|
6193
|
+
return $isExiting && exitAnimation;
|
|
6194
|
+
}));
|
|
6006
6195
|
var StyledSheet = styled__default.default.div.withConfig({
|
|
6007
6196
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6008
6197
|
return !prop.startsWith('$');
|
|
6009
6198
|
},
|
|
6010
6199
|
displayName: "Sheet__StyledSheet",
|
|
6011
6200
|
componentId: "sc-8abisx-1"
|
|
6012
|
-
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index:
|
|
6201
|
+
})(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) {
|
|
6013
6202
|
var $position = _a.$position,
|
|
6014
6203
|
$variant = _a.$variant,
|
|
6015
6204
|
$width = _a.$width,
|
|
6016
6205
|
$height = _a.$height;
|
|
6017
6206
|
var isDrawer = $variant === 'drawer';
|
|
6018
|
-
var margin = isDrawer ?
|
|
6019
|
-
var borderRadius = isDrawer ?
|
|
6207
|
+
var margin = isDrawer ? semantic$2.spacing.layout.lg : '0';
|
|
6208
|
+
var borderRadius = isDrawer ? semantic$2.border.radius.md : '0';
|
|
6020
6209
|
switch ($position) {
|
|
6021
6210
|
case 'right':
|
|
6022
|
-
return styled.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: ", "
|
|
6211
|
+
return styled.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) {
|
|
6212
|
+
var $isExiting = _a.$isExiting;
|
|
6213
|
+
return $isExiting && exitAnimation;
|
|
6214
|
+
});
|
|
6023
6215
|
case 'left':
|
|
6024
|
-
return styled.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: ", "
|
|
6216
|
+
return styled.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) {
|
|
6217
|
+
var $isExiting = _a.$isExiting;
|
|
6218
|
+
return $isExiting && exitAnimation;
|
|
6219
|
+
});
|
|
6025
6220
|
case 'top':
|
|
6026
|
-
return styled.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: ", "
|
|
6221
|
+
return styled.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) {
|
|
6222
|
+
var $isExiting = _a.$isExiting;
|
|
6223
|
+
return $isExiting && exitAnimation;
|
|
6224
|
+
});
|
|
6027
6225
|
case 'bottom':
|
|
6028
|
-
return styled.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: ", "
|
|
6226
|
+
return styled.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) {
|
|
6227
|
+
var $isExiting = _a.$isExiting;
|
|
6228
|
+
return $isExiting && exitAnimation;
|
|
6229
|
+
});
|
|
6029
6230
|
}
|
|
6030
|
-
},
|
|
6231
|
+
}, reducedMotion, fadeIn, semantic$2.motion.duration.normal, semantic$2.motion.easing.easeInOut, function (_a) {
|
|
6232
|
+
var $isExiting = _a.$isExiting;
|
|
6233
|
+
return $isExiting && exitAnimation;
|
|
6234
|
+
}, 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);
|
|
6031
6235
|
var StyledSheetContent = styled__default.default.div.withConfig({
|
|
6032
6236
|
displayName: "Sheet__StyledSheetContent",
|
|
6033
6237
|
componentId: "sc-8abisx-2"
|
|
@@ -6057,7 +6261,7 @@ var StyledSheetContent = styled__default.default.div.withConfig({
|
|
|
6057
6261
|
* <h2>Mobile Menu</h2>
|
|
6058
6262
|
* </Sheet>
|
|
6059
6263
|
* ```
|
|
6060
|
-
*/])),
|
|
6264
|
+
*/])), semantic$2.spacing.layout['2xl']);
|
|
6061
6265
|
/**
|
|
6062
6266
|
* Sheet component for side panels and drawers
|
|
6063
6267
|
*
|
|
@@ -6092,9 +6296,9 @@ var Sheet = function Sheet(_a) {
|
|
|
6092
6296
|
_c = _a.variant,
|
|
6093
6297
|
variant = _c === void 0 ? 'sheet' : _c,
|
|
6094
6298
|
_d = _a.width,
|
|
6095
|
-
width = _d === void 0 ?
|
|
6299
|
+
width = _d === void 0 ? data.tokensJson.semantic.size.overlay.sm : _d,
|
|
6096
6300
|
_e = _a.height,
|
|
6097
|
-
height = _e === void 0 ?
|
|
6301
|
+
height = _e === void 0 ? data.tokensJson.semantic.size.overlay.sm : _e,
|
|
6098
6302
|
children = _a.children,
|
|
6099
6303
|
_f = _a.closeOnOverlayClick,
|
|
6100
6304
|
closeOnOverlayClick = _f === void 0 ? true : _f,
|
|
@@ -6106,18 +6310,27 @@ var Sheet = function Sheet(_a) {
|
|
|
6106
6310
|
ariaDescribedBy = _a["aria-describedby"];
|
|
6107
6311
|
var sheetRef = React.useRef(null);
|
|
6108
6312
|
var previousFocusRef = React.useRef(null);
|
|
6313
|
+
var _h = usePresence(isOpen),
|
|
6314
|
+
isPresent = _h.isPresent,
|
|
6315
|
+
isExiting = _h.isExiting;
|
|
6316
|
+
useInert(sheetRef, isExiting);
|
|
6109
6317
|
// Focus management
|
|
6110
6318
|
React.useEffect(function () {
|
|
6111
6319
|
if (isOpen) {
|
|
6112
6320
|
// Store previous focus
|
|
6113
6321
|
previousFocusRef.current = document.activeElement;
|
|
6114
6322
|
// Focus sheet
|
|
6115
|
-
setTimeout(function () {
|
|
6323
|
+
var timer_1 = setTimeout(function () {
|
|
6116
6324
|
var _a;
|
|
6117
6325
|
(_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6118
6326
|
}, 100); // Small delay to allow animation to start
|
|
6119
6327
|
// Prevent body scroll
|
|
6120
6328
|
document.body.style.overflow = 'hidden';
|
|
6329
|
+
// A quick close cancels the pending focus, so it can't pull focus back into the exiting sheet
|
|
6330
|
+
return function () {
|
|
6331
|
+
clearTimeout(timer_1);
|
|
6332
|
+
document.body.style.overflow = '';
|
|
6333
|
+
};
|
|
6121
6334
|
} else {
|
|
6122
6335
|
// Restore previous focus
|
|
6123
6336
|
if (previousFocusRef.current) {
|
|
@@ -6154,14 +6367,16 @@ var Sheet = function Sheet(_a) {
|
|
|
6154
6367
|
};
|
|
6155
6368
|
// Overlay click handling
|
|
6156
6369
|
var handleOverlayClick = function handleOverlayClick(event) {
|
|
6157
|
-
|
|
6370
|
+
// While exiting, the backdrop still catches clicks but doesn't close again
|
|
6371
|
+
if (!isExiting && closeOnOverlayClick && event.target === event.currentTarget) {
|
|
6158
6372
|
onClose();
|
|
6159
6373
|
}
|
|
6160
6374
|
};
|
|
6161
|
-
|
|
6375
|
+
// Stays mounted while the exit fade runs, hidden from assistive technology
|
|
6376
|
+
if (!isPresent) return null;
|
|
6162
6377
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
6163
6378
|
children: [jsxRuntime.jsx(StyledOverlay, {
|
|
6164
|
-
"$
|
|
6379
|
+
"$isExiting": isExiting,
|
|
6165
6380
|
onClick: handleOverlayClick,
|
|
6166
6381
|
"data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'sheet-overlay'
|
|
6167
6382
|
}), jsxRuntime.jsx(StyledSheet, {
|
|
@@ -6170,12 +6385,13 @@ var Sheet = function Sheet(_a) {
|
|
|
6170
6385
|
"aria-modal": "true",
|
|
6171
6386
|
"aria-label": ariaLabel || title || 'Sheet dialog',
|
|
6172
6387
|
"aria-describedby": ariaDescribedBy,
|
|
6388
|
+
"aria-hidden": isExiting || undefined,
|
|
6173
6389
|
tabIndex: -1,
|
|
6174
6390
|
"$position": position,
|
|
6175
6391
|
"$variant": variant,
|
|
6176
6392
|
"$width": width,
|
|
6177
6393
|
"$height": height,
|
|
6178
|
-
"$
|
|
6394
|
+
"$isExiting": isExiting,
|
|
6179
6395
|
onKeyDown: handleKeyDown,
|
|
6180
6396
|
"data-testid": dataTestId,
|
|
6181
6397
|
children: jsxRuntime.jsx(StyledSheetContent, {
|
|
@@ -6187,8 +6403,7 @@ var Sheet = function Sheet(_a) {
|
|
|
6187
6403
|
Sheet.displayName = 'Sheet';
|
|
6188
6404
|
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;
|
|
6189
6405
|
|
|
6190
|
-
var semantic$
|
|
6191
|
-
base$2 = data.tokensJson.base;
|
|
6406
|
+
var semantic$1 = data.tokensJson.semantic;
|
|
6192
6407
|
var StyledSliderContainer = styled__default.default.div.withConfig({
|
|
6193
6408
|
displayName: "Slider__StyledSliderContainer",
|
|
6194
6409
|
componentId: "sc-6mh2d4-0"
|
|
@@ -6196,21 +6411,21 @@ var StyledSliderContainer = styled__default.default.div.withConfig({
|
|
|
6196
6411
|
var StyledLabel$1 = styled__default.default.label.withConfig({
|
|
6197
6412
|
displayName: "Slider__StyledLabel",
|
|
6198
6413
|
componentId: "sc-6mh2d4-1"
|
|
6199
|
-
})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"])), semantic$
|
|
6414
|
+
})(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) {
|
|
6200
6415
|
var $disabled = _a.$disabled;
|
|
6201
|
-
return $disabled ? semantic$
|
|
6202
|
-
}, semantic$
|
|
6416
|
+
return $disabled ? semantic$1.color.text.disabled : semantic$1.color.text["default"];
|
|
6417
|
+
}, semantic$1.spacing.layout.lg);
|
|
6203
6418
|
var StyledSliderTrackContainer = styled__default.default.div.withConfig({
|
|
6204
6419
|
displayName: "Slider__StyledSliderTrackContainer",
|
|
6205
6420
|
componentId: "sc-6mh2d4-2"
|
|
6206
|
-
})(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"])),
|
|
6421
|
+
})(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']);
|
|
6207
6422
|
var StyledTrack = styled__default.default.div.withConfig({
|
|
6208
6423
|
displayName: "Slider__StyledTrack",
|
|
6209
6424
|
componentId: "sc-6mh2d4-3"
|
|
6210
|
-
})(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"])),
|
|
6425
|
+
})(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) {
|
|
6211
6426
|
var $disabled = _a.$disabled;
|
|
6212
|
-
return $disabled ? semantic$
|
|
6213
|
-
},
|
|
6427
|
+
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.border["default"];
|
|
6428
|
+
}, semantic$1.border.radius.circle, function (_a) {
|
|
6214
6429
|
var $disabled = _a.$disabled;
|
|
6215
6430
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
6216
6431
|
});
|
|
@@ -6219,31 +6434,31 @@ var StyledTrackFill = styled__default.default.div.withConfig({
|
|
|
6219
6434
|
componentId: "sc-6mh2d4-4"
|
|
6220
6435
|
})(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) {
|
|
6221
6436
|
var $disabled = _a.$disabled;
|
|
6222
|
-
return $disabled ? semantic$
|
|
6223
|
-
},
|
|
6437
|
+
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
|
|
6438
|
+
}, semantic$1.border.radius.circle);
|
|
6224
6439
|
var StyledThumb = styled__default.default.div.withConfig({
|
|
6225
6440
|
displayName: "Slider__StyledThumb",
|
|
6226
6441
|
componentId: "sc-6mh2d4-5"
|
|
6227
|
-
})(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"])),
|
|
6442
|
+
})(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) {
|
|
6228
6443
|
var $disabled = _a.$disabled;
|
|
6229
|
-
return $disabled ? semantic$
|
|
6230
|
-
},
|
|
6444
|
+
return $disabled ? semantic$1.color.background.disabled : semantic$1.color.background.subtle;
|
|
6445
|
+
}, semantic$1.border.width.thick, function (_a) {
|
|
6231
6446
|
var $disabled = _a.$disabled;
|
|
6232
|
-
return $disabled ? semantic$
|
|
6233
|
-
},
|
|
6447
|
+
return $disabled ? semantic$1.color.border["default"] : semantic$1.color.background.emphasis;
|
|
6448
|
+
}, semantic$1.border.radius.circle, function (_a) {
|
|
6234
6449
|
var $disabled = _a.$disabled;
|
|
6235
6450
|
return $disabled ? 'not-allowed' : 'grab';
|
|
6236
|
-
}, semantic$
|
|
6451
|
+
}, semantic$1.motion.transition.fast, data.tokensJson.component.slider.thumb.shadow["default"], reducedMotion, data.tokensJson.component.slider.thumb.shadow.hover, semantic$1.border.width.thick, semantic$1.color.border.interactive, semantic$1.spacing.layout.xs, function (_a) {
|
|
6237
6452
|
var $active = _a.$active;
|
|
6238
|
-
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(
|
|
6453
|
+
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(data.tokensJson.component.slider.thumb.shadow.active, ";\n ");
|
|
6239
6454
|
});
|
|
6240
6455
|
var StyledValueLabel = styled__default.default.div.withConfig({
|
|
6241
6456
|
displayName: "Slider__StyledValueLabel",
|
|
6242
6457
|
componentId: "sc-6mh2d4-6"
|
|
6243
|
-
})(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"])),
|
|
6458
|
+
})(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) {
|
|
6244
6459
|
var $disabled = _a.$disabled;
|
|
6245
|
-
return $disabled ?
|
|
6246
|
-
},
|
|
6460
|
+
return $disabled ? semantic$1.opacity.disabled : semantic$1.opacity.full;
|
|
6461
|
+
}, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.xs, semantic$1.spacing.layout.xs, semantic$1.color.background.emphasis);
|
|
6247
6462
|
var StyledMinMaxLabels = styled__default.default.div.withConfig({
|
|
6248
6463
|
displayName: "Slider__StyledMinMaxLabels",
|
|
6249
6464
|
componentId: "sc-6mh2d4-7"
|
|
@@ -6271,7 +6486,7 @@ var StyledMinMaxLabels = styled__default.default.div.withConfig({
|
|
|
6271
6486
|
* onRangeChange={(values) => console.log(values)}
|
|
6272
6487
|
* />
|
|
6273
6488
|
* ```
|
|
6274
|
-
*/])), semantic$
|
|
6489
|
+
*/])), semantic$1.typography.body, semantic$1.color.text.subdued, semantic$1.spacing.layout.xs);
|
|
6275
6490
|
/**
|
|
6276
6491
|
* Slider component for single value or range selection
|
|
6277
6492
|
*
|
|
@@ -6593,46 +6808,45 @@ var Slider = function Slider(_a) {
|
|
|
6593
6808
|
Slider.displayName = 'Slider';
|
|
6594
6809
|
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;
|
|
6595
6810
|
|
|
6596
|
-
var semantic
|
|
6597
|
-
base$1 = data.tokensJson.base;
|
|
6811
|
+
var semantic = data.tokensJson.semantic;
|
|
6598
6812
|
var StyledTabList = styled__default.default.div.withConfig({
|
|
6599
6813
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6600
6814
|
return !prop.startsWith('$');
|
|
6601
6815
|
},
|
|
6602
6816
|
displayName: "TabBar__StyledTabList",
|
|
6603
6817
|
componentId: "sc-1g9ib0y-0"
|
|
6604
|
-
})(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:
|
|
6605
|
-
return props.$variant === 'pills' ?
|
|
6818
|
+
})(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) {
|
|
6819
|
+
return props.$variant === 'pills' ? semantic.spacing.layout.sm : '0';
|
|
6606
6820
|
}, function (props) {
|
|
6607
|
-
return props.$variant === 'underline' ? "".concat(
|
|
6608
|
-
}, semantic
|
|
6821
|
+
return props.$variant === 'underline' ? "".concat(semantic.border.width.thin, " solid ").concat(semantic.color.border.subtle) : 'none';
|
|
6822
|
+
}, data.tokensJson.component.tabBar.scrollbar.height, semantic.color.background.subtle, semantic.color.border["default"], semantic.border.radius.sm);
|
|
6609
6823
|
var StyledTab = styled__default.default.button.withConfig({
|
|
6610
6824
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6611
6825
|
return !prop.startsWith('$');
|
|
6612
6826
|
},
|
|
6613
6827
|
displayName: "TabBar__StyledTab",
|
|
6614
6828
|
componentId: "sc-1g9ib0y-1"
|
|
6615
|
-
})(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"])),
|
|
6829
|
+
})(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) {
|
|
6616
6830
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
6617
|
-
}, semantic
|
|
6831
|
+
}, semantic.motion.hover, function (props) {
|
|
6618
6832
|
if (props.$variant === 'pills') {
|
|
6619
|
-
return "\n border-radius: ".concat(
|
|
6833
|
+
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 ");
|
|
6620
6834
|
}
|
|
6621
6835
|
if (props.$variant === 'underline') {
|
|
6622
|
-
return "\n color: ".concat(props.$isActive ? semantic
|
|
6836
|
+
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 ");
|
|
6623
6837
|
}
|
|
6624
6838
|
// default variant
|
|
6625
|
-
return "\n border-radius: ".concat(
|
|
6839
|
+
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 ");
|
|
6626
6840
|
}, function (props) {
|
|
6627
6841
|
return props.$disabled ? '0.5' : '1';
|
|
6628
|
-
},
|
|
6842
|
+
}, semantic.border.width.thick, semantic.color.border.strong, semantic.spacing.layout.xs);
|
|
6629
6843
|
var StyledBadge = styled__default.default.span.withConfig({
|
|
6630
6844
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6631
6845
|
return !prop.startsWith('$');
|
|
6632
6846
|
},
|
|
6633
6847
|
displayName: "TabBar__StyledBadge",
|
|
6634
6848
|
componentId: "sc-1g9ib0y-2"
|
|
6635
|
-
})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width:
|
|
6849
|
+
})(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"
|
|
6636
6850
|
/**
|
|
6637
6851
|
* TabBar component for tabbed navigation
|
|
6638
6852
|
*
|
|
@@ -6654,13 +6868,13 @@ var StyledBadge = styled__default.default.span.withConfig({
|
|
|
6654
6868
|
* variant="pills"
|
|
6655
6869
|
* />
|
|
6656
6870
|
* ```
|
|
6657
|
-
*/])),
|
|
6871
|
+
*/])), data.tokensJson.component.tabBar.badge.size, data.tokensJson.component.tabBar.badge.size, semantic.spacing.layout.xs, data.tokensJson.component.tabBar.badge.typography, data.tokensJson.component.tabBar.badge.fontWeight, semantic.border.radius.circle, function (props) {
|
|
6658
6872
|
if (props.$variant === 'pills') {
|
|
6659
|
-
return props.$isActive ? 'rgba(255, 255, 255, 0.2)' : semantic
|
|
6873
|
+
return props.$isActive ? 'rgba(255, 255, 255, 0.2)' : semantic.color.background.interactive;
|
|
6660
6874
|
}
|
|
6661
|
-
return semantic
|
|
6875
|
+
return semantic.color.background.interactive;
|
|
6662
6876
|
}, function (props) {
|
|
6663
|
-
return props.$variant === 'pills' && props.$isActive ? semantic
|
|
6877
|
+
return props.$variant === 'pills' && props.$isActive ? semantic.color.text.inverse : semantic.color.text.inverse;
|
|
6664
6878
|
});
|
|
6665
6879
|
/**
|
|
6666
6880
|
* TabBar component for tabbed navigation
|
|
@@ -6812,20 +7026,19 @@ var TabBar = function TabBar(_a) {
|
|
|
6812
7026
|
TabBar.displayName = 'TabBar';
|
|
6813
7027
|
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
6814
7028
|
|
|
6815
|
-
var
|
|
6816
|
-
base = data.tokensJson.base;
|
|
7029
|
+
var field = data.tokensJson.component.field;
|
|
6817
7030
|
var StyledFieldContainer = styled__default.default.div.withConfig({
|
|
6818
7031
|
displayName: "TextField__StyledFieldContainer",
|
|
6819
7032
|
componentId: "sc-1ys3b0-0"
|
|
6820
|
-
})(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"])),
|
|
7033
|
+
})(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);
|
|
6821
7034
|
var StyledLabel = styled__default.default.label.withConfig({
|
|
6822
7035
|
displayName: "TextField__StyledLabel",
|
|
6823
7036
|
componentId: "sc-1ys3b0-1"
|
|
6824
|
-
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n
|
|
7037
|
+
})(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);
|
|
6825
7038
|
var StyledRequiredIndicator = styled__default.default.span.withConfig({
|
|
6826
7039
|
displayName: "TextField__StyledRequiredIndicator",
|
|
6827
7040
|
componentId: "sc-1ys3b0-2"
|
|
6828
|
-
})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])),
|
|
7041
|
+
})(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);
|
|
6829
7042
|
var StyledHelperText = styled__default.default.div.withConfig({
|
|
6830
7043
|
displayName: "TextField__StyledHelperText",
|
|
6831
7044
|
componentId: "sc-1ys3b0-3"
|
|
@@ -6842,9 +7055,9 @@ var StyledHelperText = styled__default.default.div.withConfig({
|
|
|
6842
7055
|
* required
|
|
6843
7056
|
* />
|
|
6844
7057
|
* ```
|
|
6845
|
-
*/])),
|
|
7058
|
+
*/])), field.helperText.typography, function (_a) {
|
|
6846
7059
|
var $hasError = _a.$hasError;
|
|
6847
|
-
return $hasError ?
|
|
7060
|
+
return $hasError ? field.helperText.colorError : field.helperText.color;
|
|
6848
7061
|
});
|
|
6849
7062
|
/**
|
|
6850
7063
|
* TextField component for text input with label, helper text, and error states
|
|
@@ -6918,9 +7131,9 @@ var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4
|
|
|
6918
7131
|
var StyledContainer = styled__default.default.div.withConfig({
|
|
6919
7132
|
displayName: "TransactionListItem__StyledContainer",
|
|
6920
7133
|
componentId: "sc-7yunm0-0"
|
|
6921
|
-
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-height:
|
|
7134
|
+
})(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"])), data.tokensJson.component.transactionListItem.minHeight, data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.color.background["default"], data.tokensJson.semantic.border.width.thin, data.tokensJson.semantic.color.border["default"], data.tokensJson.semantic.spacing.layout.md, data.tokensJson.semantic.motion.duration.normal, data.tokensJson.semantic.motion.easing.easeOut, function (_a) {
|
|
6922
7135
|
var $clickable = _a.$clickable;
|
|
6923
|
-
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(data.tokensJson.semantic.color.background.subtle, ";\n }\n \n &:active {\n background-color: ").concat(data.tokensJson.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline:
|
|
7136
|
+
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(data.tokensJson.semantic.color.background.subtle, ";\n }\n \n &:active {\n background-color: ").concat(data.tokensJson.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline: ").concat(data.tokensJson.semantic.border.width.thick, " solid ").concat(data.tokensJson.semantic.color.border.interactive, ";\n outline-offset: calc(-1 * ").concat(data.tokensJson.semantic.border.focusOffset, ");\n }\n ");
|
|
6924
7137
|
});
|
|
6925
7138
|
var StyledAvatarSection = styled__default.default.div.withConfig({
|
|
6926
7139
|
displayName: "TransactionListItem__StyledAvatarSection",
|
|
@@ -7128,14 +7341,18 @@ var TransactionListItem = function TransactionListItem(_a) {
|
|
|
7128
7341
|
};
|
|
7129
7342
|
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;
|
|
7130
7343
|
|
|
7344
|
+
// Exception to decision 0014: the gap props are typed as base spacing keys (public API),
|
|
7345
|
+
// so they are looked up in base.spacing until they accept semantic keys.
|
|
7346
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
7347
|
+
var gapSpacing = data.tokensJson.base.spacing;
|
|
7131
7348
|
// Breakpoints using base tokens
|
|
7132
7349
|
var breakpoints = {
|
|
7133
|
-
xs: data.tokensJson.
|
|
7134
|
-
sm: data.tokensJson.
|
|
7135
|
-
md: data.tokensJson.
|
|
7136
|
-
lg: data.tokensJson.
|
|
7137
|
-
xl: data.tokensJson.
|
|
7138
|
-
'2xl': data.tokensJson.
|
|
7350
|
+
xs: data.tokensJson.semantic.breakpoint.xs,
|
|
7351
|
+
sm: data.tokensJson.semantic.breakpoint.sm,
|
|
7352
|
+
md: data.tokensJson.semantic.breakpoint.md,
|
|
7353
|
+
lg: data.tokensJson.semantic.breakpoint.lg,
|
|
7354
|
+
xl: data.tokensJson.semantic.breakpoint.xl,
|
|
7355
|
+
'2xl': data.tokensJson.semantic.breakpoint['2xl']
|
|
7139
7356
|
};
|
|
7140
7357
|
// Media query helpers
|
|
7141
7358
|
var media = {
|
|
@@ -7171,9 +7388,9 @@ var Grid = function Grid(_a) {
|
|
|
7171
7388
|
children = _a.children;
|
|
7172
7389
|
return jsxRuntime.jsx(GridContainer, {
|
|
7173
7390
|
"$cols": cols,
|
|
7174
|
-
"$gap": gap ?
|
|
7175
|
-
"$gapX": gapX ?
|
|
7176
|
-
"$gapY": gapY ?
|
|
7391
|
+
"$gap": gap ? gapSpacing[gap] : undefined,
|
|
7392
|
+
"$gapX": gapX ? gapSpacing[gapX] : undefined,
|
|
7393
|
+
"$gapY": gapY ? gapSpacing[gapY] : undefined,
|
|
7177
7394
|
className: className,
|
|
7178
7395
|
children: children
|
|
7179
7396
|
});
|
|
@@ -7309,21 +7526,21 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
|
|
|
7309
7526
|
"$colsMd": colsMd,
|
|
7310
7527
|
"$colsLg": colsLg,
|
|
7311
7528
|
"$colsXl": colsXl,
|
|
7312
|
-
"$gap": gap ?
|
|
7313
|
-
"$gapSm": gapSm ?
|
|
7314
|
-
"$gapMd": gapMd ?
|
|
7315
|
-
"$gapLg": gapLg ?
|
|
7316
|
-
"$gapXl": gapXl ?
|
|
7317
|
-
"$gapX": gapX ?
|
|
7318
|
-
"$gapXSm": gapXSm ?
|
|
7319
|
-
"$gapXMd": gapXMd ?
|
|
7320
|
-
"$gapXLg": gapXLg ?
|
|
7321
|
-
"$gapXXl": gapXXl ?
|
|
7322
|
-
"$gapY": gapY ?
|
|
7323
|
-
"$gapYSm": gapYSm ?
|
|
7324
|
-
"$gapYMd": gapYMd ?
|
|
7325
|
-
"$gapYLg": gapYLg ?
|
|
7326
|
-
"$gapYXl": gapYXl ?
|
|
7529
|
+
"$gap": gap ? gapSpacing[gap] : undefined,
|
|
7530
|
+
"$gapSm": gapSm ? gapSpacing[gapSm] : undefined,
|
|
7531
|
+
"$gapMd": gapMd ? gapSpacing[gapMd] : undefined,
|
|
7532
|
+
"$gapLg": gapLg ? gapSpacing[gapLg] : undefined,
|
|
7533
|
+
"$gapXl": gapXl ? gapSpacing[gapXl] : undefined,
|
|
7534
|
+
"$gapX": gapX ? gapSpacing[gapX] : undefined,
|
|
7535
|
+
"$gapXSm": gapXSm ? gapSpacing[gapXSm] : undefined,
|
|
7536
|
+
"$gapXMd": gapXMd ? gapSpacing[gapXMd] : undefined,
|
|
7537
|
+
"$gapXLg": gapXLg ? gapSpacing[gapXLg] : undefined,
|
|
7538
|
+
"$gapXXl": gapXXl ? gapSpacing[gapXXl] : undefined,
|
|
7539
|
+
"$gapY": gapY ? gapSpacing[gapY] : undefined,
|
|
7540
|
+
"$gapYSm": gapYSm ? gapSpacing[gapYSm] : undefined,
|
|
7541
|
+
"$gapYMd": gapYMd ? gapSpacing[gapYMd] : undefined,
|
|
7542
|
+
"$gapYLg": gapYLg ? gapSpacing[gapYLg] : undefined,
|
|
7543
|
+
"$gapYXl": gapYXl ? gapSpacing[gapYXl] : undefined,
|
|
7327
7544
|
className: className,
|
|
7328
7545
|
children: children
|
|
7329
7546
|
});
|