@common-origin/design-system 2.4.2 → 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/Box/Box.d.ts +3 -3
- package/dist/components/atoms/Button/Button.d.ts +1 -1
- package/dist/components/atoms/CategoryBadge/CategoryBadge.d.ts +4 -17
- package/dist/components/atoms/Chip/shared/utils.d.ts +45 -1
- package/dist/components/atoms/IconButton/IconButton.d.ts +1 -2
- package/dist/components/atoms/StatusBadge/StatusBadge.d.ts +1 -0
- package/dist/components/molecules/ActionSheet/ActionSheet.d.ts +2 -1
- package/dist/components/molecules/AgentInput/AgentInput.d.ts +30 -0
- package/dist/components/molecules/AgentInput/agentInputSpeech.d.ts +43 -0
- package/dist/components/molecules/AgentInput/agentInputStateMachine.d.ts +29 -0
- package/dist/components/molecules/AgentInput/index.d.ts +3 -0
- package/dist/components/molecules/CodeBlock/CodeBlock.d.ts +29 -0
- package/dist/components/molecules/List/ListItem.d.ts +7 -1
- package/dist/components/molecules/index.d.ts +1 -0
- package/dist/index.d.ts +91 -0
- package/dist/index.esm.js +1815 -785
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1815 -784
- package/dist/index.js.map +1 -1
- package/dist/styles/icons.json +11 -3
- package/dist/styles/tokens.json +96 -5
- package/dist/tokens/index.esm.js +96 -5
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +96 -5
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/tokens.d.ts +91 -0
- package/dist/types/icons.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import React, { useState, useRef, useEffect,
|
|
2
|
+
import React, { useState, useRef, useEffect, useId, useCallback, useMemo, forwardRef } from 'react';
|
|
3
3
|
import styled, { keyframes, css } from 'styled-components';
|
|
4
4
|
import { parseISO, format, isToday, isYesterday, isThisWeek } from 'date-fns';
|
|
5
5
|
import { createPortal } from 'react-dom';
|
|
@@ -82,6 +82,16 @@ function __generator(thisArg, body) {
|
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
+
function __spreadArray(to, from, pack) {
|
|
86
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
87
|
+
if (ar || !(i in from)) {
|
|
88
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
89
|
+
ar[i] = from[i];
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
93
|
+
}
|
|
94
|
+
|
|
85
95
|
function __makeTemplateObject(cooked, raw) {
|
|
86
96
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
87
97
|
return cooked;
|
|
@@ -91,7 +101,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
91
101
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
92
102
|
};
|
|
93
103
|
|
|
94
|
-
var base$
|
|
104
|
+
var base$c = {
|
|
95
105
|
border: {
|
|
96
106
|
radius: {
|
|
97
107
|
"1": "0.125rem",
|
|
@@ -407,7 +417,7 @@ var base$d = {
|
|
|
407
417
|
},
|
|
408
418
|
$ref: "./base/index.json"
|
|
409
419
|
};
|
|
410
|
-
var component$
|
|
420
|
+
var component$3 = {
|
|
411
421
|
button: {
|
|
412
422
|
primary: {
|
|
413
423
|
backgroundColor: "#212529",
|
|
@@ -458,6 +468,34 @@ var component$1 = {
|
|
|
458
468
|
backgroundColor: "transparent",
|
|
459
469
|
textColor: "#adb5bd"
|
|
460
470
|
}
|
|
471
|
+
},
|
|
472
|
+
emphasis: {
|
|
473
|
+
backgroundColor: "#0265DC",
|
|
474
|
+
textColor: "#ffffff",
|
|
475
|
+
hover: {
|
|
476
|
+
backgroundColor: "#0054B6"
|
|
477
|
+
},
|
|
478
|
+
active: {
|
|
479
|
+
backgroundColor: "#004491"
|
|
480
|
+
},
|
|
481
|
+
disabled: {
|
|
482
|
+
backgroundColor: "#dee2e6",
|
|
483
|
+
textColor: "#adb5bd"
|
|
484
|
+
}
|
|
485
|
+
},
|
|
486
|
+
danger: {
|
|
487
|
+
backgroundColor: "#D31510",
|
|
488
|
+
textColor: "#ffffff",
|
|
489
|
+
hover: {
|
|
490
|
+
backgroundColor: "#B40000"
|
|
491
|
+
},
|
|
492
|
+
active: {
|
|
493
|
+
backgroundColor: "#930000"
|
|
494
|
+
},
|
|
495
|
+
disabled: {
|
|
496
|
+
backgroundColor: "#dee2e6",
|
|
497
|
+
textColor: "#adb5bd"
|
|
498
|
+
}
|
|
461
499
|
}
|
|
462
500
|
},
|
|
463
501
|
sizes: {
|
|
@@ -479,22 +517,66 @@ var component$1 = {
|
|
|
479
517
|
"default": {
|
|
480
518
|
backgroundColor: "#e9ecef",
|
|
481
519
|
textColor: "#212529",
|
|
482
|
-
borderRadius: "0.
|
|
520
|
+
borderRadius: "0.75rem",
|
|
483
521
|
padding: "2px 0.5rem",
|
|
484
522
|
font: "500 0.875rem/1.25rem 'Inter', sans-serif"
|
|
485
523
|
},
|
|
524
|
+
hover: {
|
|
525
|
+
backgroundColor: "#dee2e6"
|
|
526
|
+
},
|
|
527
|
+
active: {
|
|
528
|
+
backgroundColor: "#ced4da"
|
|
529
|
+
},
|
|
530
|
+
focus: {
|
|
531
|
+
outline: "0.125rem solid #343a40",
|
|
532
|
+
outlineOffset: "2px"
|
|
533
|
+
},
|
|
534
|
+
disabled: {
|
|
535
|
+
backgroundColor: "#e9ecef",
|
|
536
|
+
textColor: "#adb5bd"
|
|
537
|
+
},
|
|
486
538
|
variants: {
|
|
487
539
|
emphasis: {
|
|
488
540
|
backgroundColor: "#212529",
|
|
489
|
-
textColor: "#ffffff"
|
|
541
|
+
textColor: "#ffffff",
|
|
542
|
+
hover: {
|
|
543
|
+
backgroundColor: "#343a40"
|
|
544
|
+
},
|
|
545
|
+
active: {
|
|
546
|
+
backgroundColor: "#16191C"
|
|
547
|
+
},
|
|
548
|
+
disabled: {
|
|
549
|
+
backgroundColor: "#dee2e6",
|
|
550
|
+
textColor: "#adb5bd"
|
|
551
|
+
}
|
|
490
552
|
},
|
|
491
553
|
subtle: {
|
|
492
554
|
backgroundColor: "#ffffff",
|
|
493
|
-
textColor: "#212529"
|
|
555
|
+
textColor: "#212529",
|
|
556
|
+
hover: {
|
|
557
|
+
backgroundColor: "#f8f9fa"
|
|
558
|
+
},
|
|
559
|
+
active: {
|
|
560
|
+
backgroundColor: "#e9ecef"
|
|
561
|
+
},
|
|
562
|
+
disabled: {
|
|
563
|
+
backgroundColor: "#ffffff",
|
|
564
|
+
textColor: "#adb5bd"
|
|
565
|
+
}
|
|
494
566
|
},
|
|
495
567
|
interactive: {
|
|
496
568
|
backgroundColor: "#0265DC",
|
|
497
|
-
textColor: "#ffffff"
|
|
569
|
+
textColor: "#ffffff",
|
|
570
|
+
hover: {
|
|
571
|
+
backgroundColor: "#0054B6"
|
|
572
|
+
},
|
|
573
|
+
active: {
|
|
574
|
+
backgroundColor: "#004491"
|
|
575
|
+
},
|
|
576
|
+
disabled: {
|
|
577
|
+
backgroundColor: "#dee2e6",
|
|
578
|
+
textColor: "#adb5bd"
|
|
579
|
+
}
|
|
498
580
|
}
|
|
499
581
|
},
|
|
500
582
|
sizes: {
|
|
@@ -671,13 +753,32 @@ var component$1 = {
|
|
|
671
753
|
},
|
|
672
754
|
$ref: "./component/index.json"
|
|
673
755
|
};
|
|
674
|
-
var semantic$
|
|
756
|
+
var semantic$j = {
|
|
757
|
+
elevation: {
|
|
758
|
+
none: "none",
|
|
759
|
+
inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
|
|
760
|
+
raised: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
|
|
761
|
+
floating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
|
762
|
+
overlay: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
763
|
+
sticky: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
|
|
764
|
+
},
|
|
675
765
|
border: {
|
|
676
766
|
"default": "0.0625rem solid #e9ecef",
|
|
677
767
|
subtle: "0.0625rem solid #dee2e6",
|
|
678
768
|
strong: "0.0625rem solid #343a40",
|
|
679
769
|
focus: "0.125rem solid #343a40",
|
|
680
|
-
tooltip: "0.125rem dotted #dee2e6"
|
|
770
|
+
tooltip: "0.125rem dotted #dee2e6",
|
|
771
|
+
radius: {
|
|
772
|
+
none: "0",
|
|
773
|
+
xs: "0.125rem",
|
|
774
|
+
sm: "0.25rem",
|
|
775
|
+
md: "0.5rem",
|
|
776
|
+
lg: "0.75rem",
|
|
777
|
+
xl: "1rem",
|
|
778
|
+
"2xl": "1.5rem",
|
|
779
|
+
"3xl": "2rem",
|
|
780
|
+
circle: "10rem"
|
|
781
|
+
}
|
|
681
782
|
},
|
|
682
783
|
size: {
|
|
683
784
|
icon: {
|
|
@@ -856,38 +957,44 @@ var semantic$g = {
|
|
|
856
957
|
$ref: "./semantic/index.json"
|
|
857
958
|
};
|
|
858
959
|
var tokensData = {
|
|
859
|
-
base: base$
|
|
860
|
-
component: component$
|
|
861
|
-
semantic: semantic$
|
|
960
|
+
base: base$c,
|
|
961
|
+
component: component$3,
|
|
962
|
+
semantic: semantic$j
|
|
862
963
|
};
|
|
863
964
|
|
|
965
|
+
// Destructure tokens
|
|
966
|
+
var semantic$i = tokensData.semantic;
|
|
967
|
+
var color$a = semantic$i.color,
|
|
968
|
+
size$1 = semantic$i.size,
|
|
969
|
+
border$a = semantic$i.border;
|
|
970
|
+
var radius$6 = border$a.radius;
|
|
864
971
|
var AvatarContainer = styled.div.withConfig({
|
|
865
972
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
866
973
|
return !prop.startsWith('$');
|
|
867
974
|
},
|
|
868
975
|
displayName: "Avatar__AvatarContainer",
|
|
869
976
|
componentId: "sc-ezn4ax-0"
|
|
870
|
-
})(templateObject_1$
|
|
977
|
+
})(templateObject_1$J || (templateObject_1$J = __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) {
|
|
871
978
|
var $size = _a.$size;
|
|
872
|
-
return
|
|
979
|
+
return size$1.avatar[$size];
|
|
873
980
|
}, function (_a) {
|
|
874
981
|
var $size = _a.$size;
|
|
875
|
-
return
|
|
876
|
-
},
|
|
982
|
+
return size$1.avatar[$size];
|
|
983
|
+
}, radius$6.circle, color$a.background.surface);
|
|
877
984
|
var AvatarImage = styled.img.withConfig({
|
|
878
985
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
879
986
|
return !prop.startsWith('$');
|
|
880
987
|
},
|
|
881
988
|
displayName: "Avatar__AvatarImage",
|
|
882
989
|
componentId: "sc-ezn4ax-1"
|
|
883
|
-
})(templateObject_2$
|
|
990
|
+
})(templateObject_2$u || (templateObject_2$u = __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$6.circle);
|
|
884
991
|
var AvatarInitials = styled.span.withConfig({
|
|
885
992
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
886
993
|
return !prop.startsWith('$');
|
|
887
994
|
},
|
|
888
995
|
displayName: "Avatar__AvatarInitials",
|
|
889
996
|
componentId: "sc-ezn4ax-2"
|
|
890
|
-
})(templateObject_3$
|
|
997
|
+
})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n color: ", ";\n line-height: 1;\n text-transform: uppercase;\n user-select: none;\n"], ["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n color: ", ";\n line-height: 1;\n text-transform: uppercase;\n user-select: none;\n"
|
|
891
998
|
// Helper function to get initials from name
|
|
892
999
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
893
1000
|
var $size = _a.$size;
|
|
@@ -899,7 +1006,7 @@ var AvatarInitials = styled.span.withConfig({
|
|
|
899
1006
|
xl: tokensData.base.fontSize[5]
|
|
900
1007
|
};
|
|
901
1008
|
return sizeMap[$size];
|
|
902
|
-
},
|
|
1009
|
+
}, color$a.text["default"]);
|
|
903
1010
|
// Helper function to get initials from name
|
|
904
1011
|
var getInitials = function getInitials(name) {
|
|
905
1012
|
return name.split(' ').map(function (word) {
|
|
@@ -953,43 +1060,43 @@ var Avatar = function Avatar(_a) {
|
|
|
953
1060
|
})
|
|
954
1061
|
}));
|
|
955
1062
|
};
|
|
956
|
-
var templateObject_1$
|
|
1063
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$r;
|
|
957
1064
|
|
|
958
|
-
var _a$
|
|
959
|
-
typography$
|
|
960
|
-
color$
|
|
1065
|
+
var _a$8 = tokensData.semantic,
|
|
1066
|
+
typography$5 = _a$8.typography,
|
|
1067
|
+
color$9 = _a$8.color;
|
|
961
1068
|
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
962
1069
|
var styles = {
|
|
963
|
-
display: "font: ".concat(typography$
|
|
964
|
-
h1: "font: ".concat(typography$
|
|
965
|
-
h2: "font: ".concat(typography$
|
|
966
|
-
h3: "font: ".concat(typography$
|
|
967
|
-
h4: "font: ".concat(typography$
|
|
968
|
-
h5: "font: ".concat(typography$
|
|
969
|
-
h6: "font: ".concat(typography$
|
|
970
|
-
subtitle: "font: ".concat(typography$
|
|
971
|
-
body: "font: ".concat(typography$
|
|
972
|
-
small: "font: ".concat(typography$
|
|
973
|
-
overline: "font: ".concat(typography$
|
|
974
|
-
caption: "font: ".concat(typography$
|
|
975
|
-
button1: "font: ".concat(typography$
|
|
976
|
-
button2: "font: ".concat(typography$
|
|
977
|
-
button3: "font: ".concat(typography$
|
|
978
|
-
label: "font: ".concat(typography$
|
|
1070
|
+
display: "font: ".concat(typography$5.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
1071
|
+
h1: "font: ".concat(typography$5.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
1072
|
+
h2: "font: ".concat(typography$5.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
1073
|
+
h3: "font: ".concat(typography$5.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
1074
|
+
h4: "font: ".concat(typography$5.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
1075
|
+
h5: "font: ".concat(typography$5.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
1076
|
+
h6: "font: ".concat(typography$5.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
1077
|
+
subtitle: "font: ".concat(typography$5.subtitle, ";"),
|
|
1078
|
+
body: "font: ".concat(typography$5.body, ";"),
|
|
1079
|
+
small: "font: ".concat(typography$5.small, ";"),
|
|
1080
|
+
overline: "font: ".concat(typography$5.overline, ";"),
|
|
1081
|
+
caption: "font: ".concat(typography$5.caption, "; text-transform: uppercase;"),
|
|
1082
|
+
button1: "font: ".concat(typography$5.button1, ";"),
|
|
1083
|
+
button2: "font: ".concat(typography$5.button2, ";"),
|
|
1084
|
+
button3: "font: ".concat(typography$5.button3, ";"),
|
|
1085
|
+
label: "font: ".concat(typography$5.label, ";")
|
|
979
1086
|
};
|
|
980
1087
|
return styles[variant] || styles.body;
|
|
981
1088
|
};
|
|
982
1089
|
var getTextColor = function getTextColor(colorVariant) {
|
|
983
1090
|
var colorMap = {
|
|
984
|
-
"default": color$
|
|
985
|
-
emphasis: color$
|
|
986
|
-
subdued: color$
|
|
987
|
-
inverse: color$
|
|
988
|
-
disabled: color$
|
|
989
|
-
interactive: color$
|
|
990
|
-
error: color$
|
|
991
|
-
success: color$
|
|
992
|
-
warning: color$
|
|
1091
|
+
"default": color$9.text["default"],
|
|
1092
|
+
emphasis: color$9.text.emphasis,
|
|
1093
|
+
subdued: color$9.text.subdued,
|
|
1094
|
+
inverse: color$9.text.inverse,
|
|
1095
|
+
disabled: color$9.text.disabled,
|
|
1096
|
+
interactive: color$9.text.interactive,
|
|
1097
|
+
error: color$9.text.error,
|
|
1098
|
+
success: color$9.text.success,
|
|
1099
|
+
warning: color$9.text.warning
|
|
993
1100
|
};
|
|
994
1101
|
return colorMap[colorVariant] || colorMap["default"];
|
|
995
1102
|
};
|
|
@@ -1020,7 +1127,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
1020
1127
|
},
|
|
1021
1128
|
displayName: "Typography__StyledTypography",
|
|
1022
1129
|
componentId: "sc-17mqo4k-0"
|
|
1023
|
-
})(templateObject_1$
|
|
1130
|
+
})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n color: ", ";\n margin: 0;\n \n /* Ensure proper line height for readability */\n ", "\n"], ["\n ", "\n color: ", ";\n margin: 0;\n \n /* Ensure proper line height for readability */\n ", "\n"
|
|
1024
1131
|
/**
|
|
1025
1132
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
1026
1133
|
*
|
|
@@ -1088,22 +1195,24 @@ var Typography = function Typography(_a) {
|
|
|
1088
1195
|
children: children
|
|
1089
1196
|
});
|
|
1090
1197
|
};
|
|
1091
|
-
var templateObject_1$
|
|
1198
|
+
var templateObject_1$I;
|
|
1092
1199
|
|
|
1093
|
-
var
|
|
1094
|
-
|
|
1095
|
-
|
|
1200
|
+
var semantic$h = tokensData.semantic;
|
|
1201
|
+
var color$8 = semantic$h.color,
|
|
1202
|
+
border$9 = semantic$h.border;
|
|
1203
|
+
var radius$5 = border$9.radius;
|
|
1204
|
+
var scaleIn$1 = keyframes(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
1096
1205
|
var BadgeWrapper = styled.span.withConfig({
|
|
1097
1206
|
displayName: "Badge__BadgeWrapper",
|
|
1098
1207
|
componentId: "sc-tjz4pp-0"
|
|
1099
|
-
})(templateObject_2$
|
|
1208
|
+
})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n flex-shrink: 0;\n"], ["\n position: relative;\n display: inline-flex;\n vertical-align: middle;\n flex-shrink: 0;\n"])));
|
|
1100
1209
|
var BadgeIndicator = styled.span.withConfig({
|
|
1101
1210
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1102
1211
|
return !prop.startsWith('$');
|
|
1103
1212
|
},
|
|
1104
1213
|
displayName: "Badge__BadgeIndicator",
|
|
1105
1214
|
componentId: "sc-tjz4pp-1"
|
|
1106
|
-
})(templateObject_3$
|
|
1215
|
+
})(templateObject_3$q || (templateObject_3$q = __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: 1;\n white-space: nowrap;\n box-shadow: 0 0 0 2px ", ";\n animation: ", " 0.2s ease-out;\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: 1;\n white-space: nowrap;\n box-shadow: 0 0 0 2px ", ";\n animation: ", " 0.2s ease-out;\n \n ", "\n"])), function (props) {
|
|
1107
1216
|
return props.$isVisible ? 'flex' : 'none';
|
|
1108
1217
|
}, function (props) {
|
|
1109
1218
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1111,24 +1220,24 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1111
1220
|
return props.$isDot ? '8px' : '16px';
|
|
1112
1221
|
}, function (props) {
|
|
1113
1222
|
return props.$isDot ? '0' : '0 4px';
|
|
1114
|
-
},
|
|
1223
|
+
}, radius$5.circle, color$8.background["default"], scaleIn$1, function (props) {
|
|
1115
1224
|
switch (props.$variant) {
|
|
1116
1225
|
case 'primary':
|
|
1117
|
-
return "\n background-color: ".concat(color$
|
|
1226
|
+
return "\n background-color: ".concat(color$8.background.interactive, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1118
1227
|
case 'error':
|
|
1119
|
-
return "\n background-color: ".concat(color$
|
|
1228
|
+
return "\n background-color: ".concat(color$8.background.error, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1120
1229
|
case 'warning':
|
|
1121
|
-
return "\n background-color: ".concat(color$
|
|
1230
|
+
return "\n background-color: ".concat(color$8.background.warning, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1122
1231
|
case 'success':
|
|
1123
|
-
return "\n background-color: ".concat(color$
|
|
1232
|
+
return "\n background-color: ".concat(color$8.background.success, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1124
1233
|
default:
|
|
1125
|
-
return "\n background-color: ".concat(color$
|
|
1234
|
+
return "\n background-color: ".concat(color$8.background.emphasis, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1126
1235
|
}
|
|
1127
1236
|
});
|
|
1128
1237
|
var ScreenReaderOnly$1 = styled.span.withConfig({
|
|
1129
1238
|
displayName: "Badge__ScreenReaderOnly",
|
|
1130
1239
|
componentId: "sc-tjz4pp-2"
|
|
1131
|
-
})(templateObject_4$
|
|
1240
|
+
})(templateObject_4$l || (templateObject_4$l = __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-width: 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-width: 0;\n"])));
|
|
1132
1241
|
var Badge = function Badge(_a) {
|
|
1133
1242
|
var children = _a.children,
|
|
1134
1243
|
_b = _a.count,
|
|
@@ -1164,7 +1273,7 @@ var Badge = function Badge(_a) {
|
|
|
1164
1273
|
})]
|
|
1165
1274
|
});
|
|
1166
1275
|
};
|
|
1167
|
-
var templateObject_1$
|
|
1276
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l;
|
|
1168
1277
|
|
|
1169
1278
|
var StyledBox = styled.div.withConfig({
|
|
1170
1279
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1172,40 +1281,40 @@ var StyledBox = styled.div.withConfig({
|
|
|
1172
1281
|
},
|
|
1173
1282
|
displayName: "Box__StyledBox",
|
|
1174
1283
|
componentId: "sc-aj0jhd-0"
|
|
1175
|
-
})(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n //
|
|
1284
|
+
})(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Elevation (shadow)\n ", "\n \n // Cursor\n ", "\n \n // Transition\n ", "\n \n // Hover states\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"], ["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Elevation (shadow)\n ", "\n \n // Cursor\n ", "\n \n // Transition\n ", "\n \n // Hover states\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"
|
|
1176
1285
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1177
1286
|
])), function (props) {
|
|
1178
|
-
return props.$display && css(templateObject_1$
|
|
1287
|
+
return props.$display && css(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1179
1288
|
}, function (props) {
|
|
1180
|
-
return props.$flexDirection && css(templateObject_2$
|
|
1289
|
+
return props.$flexDirection && css(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1181
1290
|
}, function (props) {
|
|
1182
|
-
return props.$justifyContent && css(templateObject_3$
|
|
1291
|
+
return props.$justifyContent && css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1183
1292
|
}, function (props) {
|
|
1184
|
-
return props.$alignItems && css(templateObject_4$
|
|
1293
|
+
return props.$alignItems && css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1185
1294
|
}, function (props) {
|
|
1186
|
-
return props.$flexWrap && css(templateObject_5$
|
|
1295
|
+
return props.$flexWrap && css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1187
1296
|
}, function (props) {
|
|
1188
|
-
return props.$gap && css(templateObject_6$
|
|
1297
|
+
return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1189
1298
|
}, function (props) {
|
|
1190
|
-
return props.$m && css(templateObject_7$
|
|
1299
|
+
return props.$m && css(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1191
1300
|
}, function (props) {
|
|
1192
|
-
return props.$mt && css(templateObject_8$
|
|
1301
|
+
return props.$mt && css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1193
1302
|
}, function (props) {
|
|
1194
1303
|
return props.$mr && css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
|
|
1195
1304
|
}, function (props) {
|
|
1196
1305
|
return props.$mb && css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
|
|
1197
1306
|
}, function (props) {
|
|
1198
|
-
return props.$ml && css(templateObject_11$
|
|
1307
|
+
return props.$ml && css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
|
|
1199
1308
|
}, function (props) {
|
|
1200
|
-
return props.$mx && css(templateObject_12$
|
|
1309
|
+
return props.$mx && css(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n margin-left: ", ";\n margin-right: ", ";\n "], ["\n margin-left: ", ";\n margin-right: ", ";\n "])), tokensData.semantic.spacing.layout[props.$mx], tokensData.semantic.spacing.layout[props.$mx]);
|
|
1201
1310
|
}, function (props) {
|
|
1202
|
-
return props.$my && css(templateObject_13$
|
|
1311
|
+
return props.$my && css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), tokensData.semantic.spacing.layout[props.$my], tokensData.semantic.spacing.layout[props.$my]);
|
|
1203
1312
|
}, function (props) {
|
|
1204
|
-
return props.$p && css(templateObject_14$
|
|
1313
|
+
return props.$p && css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensData.semantic.spacing.layout[props.$p]);
|
|
1205
1314
|
}, function (props) {
|
|
1206
|
-
return props.$pt && css(templateObject_15$
|
|
1315
|
+
return props.$pt && css(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokensData.semantic.spacing.layout[props.$pt]);
|
|
1207
1316
|
}, function (props) {
|
|
1208
|
-
return props.$pr && css(templateObject_16$
|
|
1317
|
+
return props.$pr && css(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensData.semantic.spacing.layout[props.$pr]);
|
|
1209
1318
|
}, function (props) {
|
|
1210
1319
|
return props.$pb && css(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$pb]);
|
|
1211
1320
|
}, function (props) {
|
|
@@ -1237,7 +1346,7 @@ var StyledBox = styled.div.withConfig({
|
|
|
1237
1346
|
}, function (props) {
|
|
1238
1347
|
return props.$left && css(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
|
|
1239
1348
|
}, function (props) {
|
|
1240
|
-
return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensData.
|
|
1349
|
+
return props.$borderRadius && css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensData.semantic.border.radius[props.$borderRadius]);
|
|
1241
1350
|
}, function (props) {
|
|
1242
1351
|
return props.$border && css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokensData.semantic.color.border[props.$border]);
|
|
1243
1352
|
}, function (props) {
|
|
@@ -1253,13 +1362,13 @@ var StyledBox = styled.div.withConfig({
|
|
|
1253
1362
|
}, function (props) {
|
|
1254
1363
|
return props.$color && css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokensData.semantic.color.text[props.$color]);
|
|
1255
1364
|
}, function (props) {
|
|
1256
|
-
return props.$shadow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.
|
|
1365
|
+
return props.$shadow && css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.semantic.elevation[props.$shadow]);
|
|
1257
1366
|
}, function (props) {
|
|
1258
1367
|
return props.$cursor && css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["cursor: ", ";"], ["cursor: ", ";"])), props.$cursor);
|
|
1259
1368
|
}, function (props) {
|
|
1260
1369
|
return props.$transition && css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
|
|
1261
1370
|
}, function (props) {
|
|
1262
|
-
return (props.$hoverShadow || props.$hoverTransform) && css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n "], ["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n "])), props.$hoverShadow && css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.
|
|
1371
|
+
return (props.$hoverShadow || props.$hoverTransform) && css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n "], ["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n "])), props.$hoverShadow && css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensData.semantic.color.border.interactive);
|
|
1263
1372
|
}, function (props) {
|
|
1264
1373
|
return props.$overflow && css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
|
|
1265
1374
|
}, function (props) {
|
|
@@ -1399,14 +1508,14 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1399
1508
|
}));
|
|
1400
1509
|
};
|
|
1401
1510
|
var Box = BoxTransform;
|
|
1402
|
-
var templateObject_1$
|
|
1511
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$k, templateObject_5$f, templateObject_6$d, templateObject_7$a, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
|
|
1403
1512
|
|
|
1404
1513
|
var add = {
|
|
1405
1514
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
1406
1515
|
name: "add"
|
|
1407
1516
|
};
|
|
1408
1517
|
var addRing = {
|
|
1409
|
-
path: "
|
|
1518
|
+
path: "M13 11H16V13H13V16H11V13H8V11H11V8H13V11Z M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z",
|
|
1410
1519
|
name: "addRing"
|
|
1411
1520
|
};
|
|
1412
1521
|
var arrowDown = {
|
|
@@ -1426,7 +1535,7 @@ var arrowRight = {
|
|
|
1426
1535
|
name: "arrowRight"
|
|
1427
1536
|
};
|
|
1428
1537
|
var bell = {
|
|
1429
|
-
path: "M12
|
|
1538
|
+
path: "M12.0001 2C15.3561 2 18.1753 4.52384 18.546 7.85938L18.7979 10.125C18.8012 10.1546 18.8024 10.1676 18.8038 10.1797C18.9166 11.1628 19.2372 12.1106 19.7432 12.9609C19.7494 12.9714 19.7553 12.9824 19.7706 13.0078L20.3487 13.9707C20.5997 14.3891 20.829 14.7681 20.9795 15.0879C21.1276 15.4024 21.2852 15.8285 21.209 16.3115C21.1337 16.789 20.8882 17.2229 20.5176 17.5332C20.1426 17.8471 19.6956 17.931 19.3497 17.9658C18.998 18.0012 18.5554 18 18.0674 18H5.93268C5.44476 18 5.00211 18.0012 4.65045 17.9658C4.30456 17.931 3.85755 17.8471 3.48248 17.5332C3.1119 17.2229 2.86641 16.789 2.79107 16.3115C2.7149 15.8285 2.87247 15.4024 3.02057 15.0879C3.17116 14.7681 3.40038 14.3891 3.65143 13.9707L4.22955 13.0078C4.24481 12.9824 4.25068 12.9714 4.25689 12.9609C4.76296 12.1106 5.08348 11.1628 5.19635 10.1797C5.19773 10.1676 5.19892 10.1546 5.20221 10.125L5.45416 7.85938C5.82477 4.52384 8.644 2 12.0001 2ZM12.0001 4C9.6631 4 7.69954 5.75741 7.44146 8.08008L7.18951 10.3457C7.18638 10.3739 7.18457 10.3907 7.18268 10.4072C7.03761 11.6714 6.62638 12.8909 5.97564 13.9844C5.96724 13.9985 5.95885 14.013 5.94439 14.0371L5.36627 15C5.09277 15.4558 4.92766 15.7334 4.83014 15.9404C4.82533 15.9506 4.82155 15.9606 4.81744 15.9697C4.82787 15.971 4.83877 15.9744 4.85064 15.9756C5.07838 15.9985 5.40111 16 5.93268 16H18.0674C18.599 16 18.9217 15.9985 19.1495 15.9756C19.161 15.9744 19.1716 15.9709 19.1817 15.9697C19.1776 15.9607 19.1747 15.9505 19.17 15.9404C19.0725 15.7334 18.9074 15.4558 18.6338 15L18.0557 14.0371C18.0413 14.013 18.0329 13.9985 18.0245 13.9844C17.3737 12.8909 16.9625 11.6714 16.8174 10.4072C16.8155 10.3907 16.8137 10.3739 16.8106 10.3457L16.5587 8.08008C16.3006 5.75741 14.337 4 12.0001 4Z M12.0001 22C10.9897 22 10.0894 21.4972 9.419 20.7256C8.75348 19.9595 8.31404 18.9367 8.11822 17.8408C8.0211 17.2971 8.38314 16.7778 8.92682 16.6807C9.47038 16.5837 9.98987 16.9457 10.087 17.4893C10.233 18.3066 10.5467 18.9742 10.9288 19.4141C11.3063 19.8486 11.6896 20 12.0001 20C12.3106 20 12.6938 19.8486 13.0713 19.4141C13.4535 18.9742 13.7671 18.3066 13.9131 17.4893C14.0102 16.9457 14.5297 16.5837 15.0733 16.6807C15.617 16.7778 15.979 17.2971 15.8819 17.8408C15.6861 18.9367 15.2466 19.9595 14.5811 20.7256C13.9108 21.4972 13.0104 22 12.0001 22Z",
|
|
1430
1539
|
name: "bell"
|
|
1431
1540
|
};
|
|
1432
1541
|
var back = {
|
|
@@ -1462,13 +1571,17 @@ var close = {
|
|
|
1462
1571
|
name: "close"
|
|
1463
1572
|
};
|
|
1464
1573
|
var crossCircle = {
|
|
1465
|
-
path: "
|
|
1574
|
+
path: "M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM15.707 9.70703L13.4141 12L15.707 14.293L14.293 15.707L12 13.4141L9.70703 15.707L8.29297 14.293L10.5859 12L8.29297 9.70703L9.70703 8.29297L12 10.5859L14.293 8.29297L15.707 9.70703Z",
|
|
1466
1575
|
name: "crossCircle"
|
|
1467
1576
|
};
|
|
1468
1577
|
var directionRight = {
|
|
1469
1578
|
path: "M20 12L20.7071 11.2929L21.4142 12L20.7071 12.7071L20 12ZM5 13C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11V13ZM14 6L14.7071 5.29289L20.7071 11.2929L20 12L19.2929 12.7071L13.2929 6.70711L14 6ZM20 12L20.7071 12.7071L14.7071 18.7071L14 18L13.2929 17.2929L19.2929 11.2929L20 12ZM20 12V13H5V12V11H20V12Z",
|
|
1470
1579
|
name: "directionRight"
|
|
1471
1580
|
};
|
|
1581
|
+
var directionUp = {
|
|
1582
|
+
path: "M6.70703 10.707L11 6.41406L11 19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19L13 6.41406L17.293 10.707L18.707 9.29297L12 2.58594L5.29297 9.29297L6.70703 10.707Z",
|
|
1583
|
+
name: "directionUp"
|
|
1584
|
+
};
|
|
1472
1585
|
var edit = {
|
|
1473
1586
|
path: "M17.5859 9C17.5859 8.6893 17.3985 8.42381 17.0234 8.0293L16.5859 7.58594L16.414 7.41406C15.7475 6.7475 15.4141 6.41406 15 6.41406C14.5858 6.41406 14.2525 6.7475 13.5859 7.41406L6.39156 14.6084L6.16402 14.8418C6.10705 14.9052 6.06663 14.9595 6.03316 15.0186C5.9662 15.1368 5.93192 15.2702 5.86519 15.5371L5.20211 18.1914L5.14449 18.4297C5.09834 18.6377 5.09184 18.7579 5.16695 18.833C5.24206 18.9081 5.36228 18.9016 5.57027 18.8555L5.80855 18.7979L8.46285 18.1348C8.72977 18.068 8.86314 18.0338 8.9814 17.9668C9.04047 17.9333 9.09478 17.8929 9.15816 17.8359L9.39156 17.6084L16.5859 10.4141C17.2106 9.78933 17.5428 9.45735 17.582 9.07715L17.5859 9ZM19.5859 9C19.5859 9.82006 19.2281 10.4288 18.9257 10.8252C18.6586 11.1753 18.2933 11.5348 18 11.8281L10.8056 19.0225C10.686 19.1421 10.3758 19.4764 9.96675 19.708C9.55767 19.9396 9.11125 20.0332 8.94722 20.0742L6.38277 20.7158L6.38082 20.7168L6.2939 20.7383C6.17868 20.7671 5.87067 20.8489 5.58492 20.877C5.2743 20.9073 4.44039 20.9346 3.75289 20.2471C3.06538 19.5596 3.09262 18.7257 3.123 18.415C3.15102 18.1293 3.23287 17.8213 3.26168 17.7061L3.92574 15.0527L4.03707 14.6348C4.09472 14.4516 4.17615 14.2378 4.29195 14.0332L4.38375 13.8848C4.6044 13.5498 4.87279 13.299 4.9775 13.1943L12.1718 6C12.4652 5.70667 12.8246 5.34136 13.1748 5.07422C13.5711 4.77185 14.1799 4.41406 15 4.41406L15.1513 4.41797C15.8954 4.45836 16.4536 4.79076 16.8252 5.07422C17.1753 5.34136 17.5348 5.70667 17.8281 6L18 6.17188L18.4726 6.65137C18.6341 6.82169 18.7921 6.99964 18.9257 7.1748C19.2281 7.57116 19.5859 8.17994 19.5859 9Z M12.5 7.5L15.5 5.5L18.5 8.5L16.5 11.5L12.5 7.5Z",
|
|
1474
1587
|
name: "edit"
|
|
@@ -1517,6 +1630,10 @@ var message = {
|
|
|
1517
1630
|
path: "M16 5.00001C16.9145 5.00001 17.7014 4.99777 18.3281 5.08204C18.9835 5.17019 19.6115 5.36934 20.1211 5.87891C20.6307 6.38849 20.8298 7.01648 20.918 7.67188C21.0022 8.29863 21 9.08547 21 10V14C21 14.9145 21.0022 15.7014 20.918 16.3281C20.8298 16.9835 20.6307 17.6115 20.1211 18.1211C19.6115 18.6307 18.9835 18.8298 18.3281 18.918C17.7014 19.0022 16.9145 19 16 19H8.00001C7.08547 19 6.29863 19.0022 5.67188 18.918C5.01648 18.8298 4.38849 18.6307 3.87891 18.1211C3.36934 17.6115 3.17019 16.9835 3.08204 16.3281C2.99777 15.7014 3.00001 14.9145 3.00001 14V10C3.00001 9.08547 2.99777 8.29863 3.08204 7.67188C3.17019 7.01648 3.36933 6.38849 3.87891 5.87891C4.38849 5.36933 5.01648 5.17019 5.67188 5.08204C6.29863 4.99777 7.08547 5.00001 8.00001 5.00001H16ZM13.3418 13.4473C12.4972 13.8696 11.5028 13.8696 10.6582 13.4473L5.00001 10.6182V14C5.00001 14.9711 5.00228 15.599 5.06446 16.0615C5.12277 16.4951 5.21687 16.6309 5.29297 16.707C5.36908 16.7831 5.50495 16.8772 5.93848 16.9356C6.40099 16.9977 7.02893 17 8.00001 17H16C16.9711 17 17.599 16.9977 18.0615 16.9356C18.4951 16.8772 18.6309 16.7831 18.707 16.707C18.7831 16.6309 18.8772 16.4951 18.9356 16.0615C18.9977 15.599 19 14.9711 19 14V10.6182L13.3418 13.4473ZM8.00001 7.00001C7.02893 7.00001 6.40099 7.00228 5.93848 7.06446C5.50494 7.12278 5.36908 7.21687 5.29297 7.29297C5.21686 7.36908 5.12278 7.50494 5.06446 7.93848C5.04619 8.07437 5.03381 8.2246 5.02442 8.39356L11.5527 11.6582C11.8343 11.799 12.1657 11.799 12.4473 11.6582L18.9746 8.39356C18.9652 8.22462 18.9538 8.07436 18.9356 7.93848C18.8772 7.50495 18.7831 7.36908 18.707 7.29297C18.6309 7.21687 18.4951 7.12277 18.0615 7.06446C17.599 7.00228 16.9711 7.00001 16 7.00001H8.00001Z",
|
|
1518
1631
|
name: "message"
|
|
1519
1632
|
};
|
|
1633
|
+
var mic = {
|
|
1634
|
+
path: "M12 2C14.2091 2 16 3.79086 16 6V11C16 13.2091 14.2091 15 12 15C9.79086 15 8 13.2091 8 11V6C8 3.79086 9.79086 2 12 2ZM12 4C10.8954 4 10 4.89543 10 6V11C10 12.1046 10.8954 13 12 13C13.1046 13 14 12.1046 14 11V6C14 4.89543 13.1046 4 12 4Z M19 10C19.5523 10 20 10.4477 20 11C20 13.1217 19.1575 15.1569 17.6572 16.6572C16.3938 17.9207 14.7505 18.7145 12.9961 18.9346C12.9975 18.9562 13 18.978 13 19V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V19C11 18.978 11.0015 18.9562 11.0029 18.9346C9.24888 18.7143 7.60602 17.9205 6.34277 16.6572C4.84248 15.1569 4 13.1217 4 11C4 10.4477 4.44772 10 5 10C5.55228 10 6 10.4477 6 11C6 12.5913 6.63259 14.117 7.75781 15.2422C8.88303 16.3674 10.4087 17 12 17C13.5913 17 15.117 16.3674 16.2422 15.2422C17.3674 14.117 18 12.5913 18 11C18 10.4477 18.4477 10 19 10Z",
|
|
1635
|
+
name: "mic"
|
|
1636
|
+
};
|
|
1520
1637
|
var copy = {
|
|
1521
1638
|
path: "M16 9.00001C16.9145 9.00001 17.7014 8.99777 18.3281 9.08204C18.9835 9.17019 19.6115 9.36934 20.1211 9.87891C20.6307 10.3885 20.8298 11.0165 20.918 11.6719C21.0022 12.2986 21 13.0855 21 14V16C21 16.9145 21.0022 17.7014 20.918 18.3281C20.8298 18.9835 20.6307 19.6115 20.1211 20.1211C19.6115 20.6307 18.9835 20.8298 18.3281 20.918C17.7014 21.0022 16.9145 21 16 21H14C13.0855 21 12.2986 21.0022 11.6719 20.918C11.0165 20.8298 10.3885 20.6307 9.87891 20.1211C9.36934 19.6115 9.17019 18.9835 9.08204 18.3281C8.99777 17.7014 9.00001 16.9145 9.00001 16V14C9.00001 13.0855 8.99777 12.2986 9.08204 11.6719C9.17019 11.0165 9.36933 10.3885 9.87891 9.87891C10.3885 9.36933 11.0165 9.17019 11.6719 9.08204C12.2986 8.99777 13.0855 9.00001 14 9.00001H16ZM14 11C13.0289 11 12.401 11.0023 11.9385 11.0645C11.5049 11.1228 11.3691 11.2169 11.293 11.293C11.2169 11.3691 11.1228 11.5049 11.0645 11.9385C11.0023 12.401 11 13.0289 11 14V16C11 16.9711 11.0023 17.599 11.0645 18.0615C11.1228 18.4951 11.2169 18.6309 11.293 18.707C11.3691 18.7831 11.5049 18.8772 11.9385 18.9356C12.401 18.9977 13.0289 19 14 19H16C16.9711 19 17.599 18.9977 18.0615 18.9356C18.4951 18.8772 18.6309 18.7831 18.707 18.707C18.7831 18.6309 18.8772 18.4951 18.9356 18.0615C18.9977 17.599 19 16.9711 19 16V14C19 13.0289 18.9977 12.401 18.9356 11.9385C18.8772 11.5049 18.7831 11.3691 18.707 11.293C18.6309 11.2169 18.4951 11.1228 18.0615 11.0645C17.599 11.0023 16.9711 11 16 11H14Z M11 3.00001C11.4521 3.00001 11.8413 2.99962 12.1621 3.02149C12.4919 3.04399 12.8225 3.09352 13.1484 3.22852C13.8832 3.53299 14.467 4.1168 14.7715 4.85157C14.9065 5.17749 14.956 5.50807 14.9785 5.8379C15.0004 6.15869 15 6.54787 15 7.00001H13C13 6.52039 12.9996 6.21062 12.9834 5.97364C12.9678 5.74574 12.9411 5.6588 12.9238 5.61719C12.8223 5.37227 12.6277 5.17767 12.3828 5.07618C12.3412 5.05894 12.2543 5.03216 12.0264 5.01661C11.7894 5.00044 11.4796 5.00001 11 5.00001H8.00001C7.02893 5.00001 6.40099 5.00228 5.93848 5.06446C5.50494 5.12278 5.36908 5.21687 5.29297 5.29297C5.21686 5.36908 5.12278 5.50494 5.06446 5.93848C5.00228 6.40099 5.00001 7.02893 5.00001 8.00001V11C5.00001 11.4796 5.00044 11.7894 5.01661 12.0264C5.03216 12.2543 5.05894 12.3412 5.07618 12.3828C5.17767 12.6277 5.37227 12.8223 5.61719 12.9238C5.6588 12.9411 5.74574 12.9678 5.97364 12.9834C6.21062 12.9996 6.52039 13 7.00001 13V15C6.54787 15 6.15869 15.0004 5.8379 14.9785C5.50807 14.956 5.17749 14.9065 4.85157 14.7715C4.1168 14.467 3.53299 13.8832 3.22852 13.1484C3.09352 12.8225 3.04399 12.4919 3.02149 12.1621C2.99962 11.8413 3.00001 11.4521 3.00001 11V8.00001C3.00001 7.08547 2.99777 6.29863 3.08204 5.67188C3.17019 5.01648 3.36933 4.38849 3.87891 3.87891C4.38849 3.36933 5.01648 3.17019 5.67188 3.08204C6.29863 2.99777 7.08547 3.00001 8.00001 3.00001H11Z",
|
|
1522
1639
|
name: "copy"
|
|
@@ -1587,6 +1704,7 @@ var iconsData = {
|
|
|
1587
1704
|
close: close,
|
|
1588
1705
|
crossCircle: crossCircle,
|
|
1589
1706
|
directionRight: directionRight,
|
|
1707
|
+
directionUp: directionUp,
|
|
1590
1708
|
edit: edit,
|
|
1591
1709
|
"export": {
|
|
1592
1710
|
path: "M7.70703 10.707L11 7.41406L11 14C11 14.5523 11.4477 15 12 15C12.5523 15 13 14.5523 13 14V7.41406L16.293 10.707L17.707 9.29297L12 3.58594L6.29297 9.29297L7.70703 10.707Z M4 17V16H6V17C6 17.5523 6.44772 18 7 18H17C17.5523 18 18 17.5523 18 17V16H20V17C20 18.6051 18.7394 19.9158 17.1543 19.9961L17 20H7C5.34315 20 4 18.6569 4 17Z",
|
|
@@ -1603,6 +1721,7 @@ var iconsData = {
|
|
|
1603
1721
|
playBack: playBack,
|
|
1604
1722
|
lineOut: lineOut,
|
|
1605
1723
|
message: message,
|
|
1724
|
+
mic: mic,
|
|
1606
1725
|
copy: copy,
|
|
1607
1726
|
link: link,
|
|
1608
1727
|
order: order,
|
|
@@ -1624,7 +1743,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1624
1743
|
},
|
|
1625
1744
|
displayName: "Icon__IconStyled",
|
|
1626
1745
|
componentId: "sc-1105czq-0"
|
|
1627
|
-
})(templateObject_1$
|
|
1746
|
+
})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n \n svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n \n /* Use semantic icon colors */\n color: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n \n svg {\n width: 100%;\n height: 100%;\n display: block;\n }\n \n /* Use semantic icon colors */\n color: ", ";\n"])), function (_a) {
|
|
1628
1747
|
var $size = _a.$size;
|
|
1629
1748
|
return tokensData.semantic.size.icon[$size];
|
|
1630
1749
|
}, function (_a) {
|
|
@@ -1690,29 +1809,72 @@ var Icon = function Icon(_a) {
|
|
|
1690
1809
|
})
|
|
1691
1810
|
});
|
|
1692
1811
|
};
|
|
1693
|
-
var templateObject_1$
|
|
1812
|
+
var templateObject_1$F;
|
|
1694
1813
|
|
|
1695
|
-
var button = tokensData.component.button,
|
|
1696
|
-
semantic$
|
|
1814
|
+
var button$1 = tokensData.component.button,
|
|
1815
|
+
semantic$g = tokensData.semantic;
|
|
1697
1816
|
// Base styles shared between button and link
|
|
1698
|
-
var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(tokensData.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic$
|
|
1817
|
+
var baseButtonStyles = "\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: ".concat(tokensData.semantic.spacing.layout.xs, ";\n height: max-content;\n cursor: pointer;\n border: none;\n text-decoration: none;\n transition: ").concat(semantic$g.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");
|
|
1699
1818
|
// Dynamic variant styles using component tokens
|
|
1700
1819
|
var getVariantStyles$1 = function getVariantStyles(_a) {
|
|
1701
1820
|
var $variant = _a.$variant;
|
|
1702
|
-
|
|
1821
|
+
var variantConfig = {
|
|
1822
|
+
primary: {
|
|
1823
|
+
bg: button$1.primary.backgroundColor,
|
|
1824
|
+
text: button$1.primary.textColor,
|
|
1825
|
+
hoverBg: button$1.hover.backgroundColor,
|
|
1826
|
+
activeBg: button$1.active.backgroundColor,
|
|
1827
|
+
disabledBg: button$1.disabled.backgroundColor,
|
|
1828
|
+
disabledText: button$1.disabled.textColor
|
|
1829
|
+
},
|
|
1830
|
+
secondary: {
|
|
1831
|
+
bg: button$1.variants.secondary.backgroundColor,
|
|
1832
|
+
text: button$1.variants.secondary.textColor,
|
|
1833
|
+
hoverBg: button$1.variants.secondary.hover.backgroundColor,
|
|
1834
|
+
activeBg: button$1.variants.secondary.active.backgroundColor,
|
|
1835
|
+
disabledBg: button$1.variants.secondary.disabled.backgroundColor,
|
|
1836
|
+
disabledText: button$1.variants.secondary.disabled.textColor
|
|
1837
|
+
},
|
|
1838
|
+
naked: {
|
|
1839
|
+
bg: button$1.variants.naked.backgroundColor,
|
|
1840
|
+
text: button$1.variants.naked.textColor,
|
|
1841
|
+
hoverBg: button$1.variants.naked.hover.backgroundColor,
|
|
1842
|
+
activeBg: button$1.variants.naked.active.backgroundColor,
|
|
1843
|
+
disabledBg: button$1.variants.naked.disabled.backgroundColor,
|
|
1844
|
+
disabledText: button$1.variants.naked.disabled.textColor
|
|
1845
|
+
},
|
|
1846
|
+
emphasis: {
|
|
1847
|
+
bg: button$1.variants.emphasis.backgroundColor,
|
|
1848
|
+
text: button$1.variants.emphasis.textColor,
|
|
1849
|
+
hoverBg: button$1.variants.emphasis.hover.backgroundColor,
|
|
1850
|
+
activeBg: button$1.variants.emphasis.active.backgroundColor,
|
|
1851
|
+
disabledBg: button$1.variants.emphasis.disabled.backgroundColor,
|
|
1852
|
+
disabledText: button$1.variants.emphasis.disabled.textColor
|
|
1853
|
+
},
|
|
1854
|
+
danger: {
|
|
1855
|
+
bg: button$1.variants.danger.backgroundColor,
|
|
1856
|
+
text: button$1.variants.danger.textColor,
|
|
1857
|
+
hoverBg: button$1.variants.danger.hover.backgroundColor,
|
|
1858
|
+
activeBg: button$1.variants.danger.active.backgroundColor,
|
|
1859
|
+
disabledBg: button$1.variants.danger.disabled.backgroundColor,
|
|
1860
|
+
disabledText: button$1.variants.danger.disabled.textColor
|
|
1861
|
+
}
|
|
1862
|
+
};
|
|
1863
|
+
var config = variantConfig[$variant];
|
|
1864
|
+
return "\n background-color: ".concat(config.bg, ";\n color: ").concat(config.text, ";\n \n &:hover:not(:disabled) {\n background-color: ").concat(config.hoverBg, ";\n }\n\n &:active:not(:disabled) {\n background-color: ").concat(config.activeBg, ";\n }\n\n &:disabled {\n background-color: ").concat(config.disabledBg, ";\n color: ").concat(config.disabledText, ";\n }\n ");
|
|
1703
1865
|
};
|
|
1704
1866
|
// Dynamic size styles using component tokens
|
|
1705
|
-
var getSizeStyles$
|
|
1867
|
+
var getSizeStyles$1 = function getSizeStyles(_a) {
|
|
1706
1868
|
var $size = _a.$size;
|
|
1707
1869
|
switch ($size) {
|
|
1708
1870
|
case 'small':
|
|
1709
|
-
return "\n font: ".concat(button.sizes.small.font, ";\n padding: ").concat(button.sizes.small.padding, ";\n ");
|
|
1871
|
+
return "\n font: ".concat(button$1.sizes.small.font, ";\n padding: ").concat(button$1.sizes.small.padding, ";\n ");
|
|
1710
1872
|
case 'medium':
|
|
1711
|
-
return "\n font: ".concat(button.sizes.medium.font, ";\n padding: ").concat(button.sizes.medium.padding, ";\n ");
|
|
1873
|
+
return "\n font: ".concat(button$1.sizes.medium.font, ";\n padding: ").concat(button$1.sizes.medium.padding, ";\n ");
|
|
1712
1874
|
case 'large':
|
|
1713
|
-
return "\n font: ".concat(button.sizes.large.font, ";\n padding: ").concat(button.sizes.large.padding, ";\n ");
|
|
1875
|
+
return "\n font: ".concat(button$1.sizes.large.font, ";\n padding: ").concat(button$1.sizes.large.padding, ";\n ");
|
|
1714
1876
|
default:
|
|
1715
|
-
return "\n font: ".concat(button.sizes.large.font, ";\n padding: ").concat(button.sizes.large.padding, ";\n ");
|
|
1877
|
+
return "\n font: ".concat(button$1.sizes.large.font, ";\n padding: ").concat(button$1.sizes.large.padding, ";\n ");
|
|
1716
1878
|
}
|
|
1717
1879
|
};
|
|
1718
1880
|
var StyledButton = styled.button.withConfig({
|
|
@@ -1721,16 +1883,16 @@ var StyledButton = styled.button.withConfig({
|
|
|
1721
1883
|
},
|
|
1722
1884
|
displayName: "Button__StyledButton",
|
|
1723
1885
|
componentId: "sc-1eiuum9-0"
|
|
1724
|
-
})(templateObject_1$
|
|
1886
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
|
|
1725
1887
|
var StyledLink = styled.a.withConfig({
|
|
1726
1888
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1727
1889
|
return !prop.startsWith('$');
|
|
1728
1890
|
},
|
|
1729
1891
|
displayName: "Button__StyledLink",
|
|
1730
1892
|
componentId: "sc-1eiuum9-1"
|
|
1731
|
-
})(templateObject_2$
|
|
1893
|
+
})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1732
1894
|
// Helper function to get icon size based on button size
|
|
1733
|
-
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles$1, getSizeStyles$
|
|
1895
|
+
])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
|
|
1734
1896
|
// Helper function to get icon size based on button size
|
|
1735
1897
|
var getIconSize = function getIconSize(buttonSize) {
|
|
1736
1898
|
switch (buttonSize) {
|
|
@@ -1829,64 +1991,30 @@ var Button = function Button(_a) {
|
|
|
1829
1991
|
children: renderButtonContent(children, iconName, size)
|
|
1830
1992
|
}));
|
|
1831
1993
|
};
|
|
1832
|
-
var templateObject_1$
|
|
1994
|
+
var templateObject_1$E, templateObject_2$r;
|
|
1833
1995
|
|
|
1834
|
-
var semantic$
|
|
1835
|
-
base$
|
|
1836
|
-
var
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
};
|
|
1844
|
-
}
|
|
1845
|
-
if (variant === 'outlined') {
|
|
1846
|
-
return {
|
|
1847
|
-
backgroundColor: 'transparent',
|
|
1848
|
-
color: semantic$e.color.category[colorKey],
|
|
1849
|
-
borderColor: semantic$e.color.category[colorKey]
|
|
1850
|
-
};
|
|
1851
|
-
}
|
|
1852
|
-
// minimal
|
|
1853
|
-
return {
|
|
1854
|
-
backgroundColor: semantic$e.color.category["".concat(colorKey, "-subtle")],
|
|
1855
|
-
color: semantic$e.color.category[colorKey],
|
|
1856
|
-
borderColor: 'transparent'
|
|
1857
|
-
};
|
|
1858
|
-
};
|
|
1859
|
-
var getSizeStyles$2 = function getSizeStyles(size) {
|
|
1860
|
-
if (size === 'small') {
|
|
1861
|
-
return {
|
|
1862
|
-
height: '24px',
|
|
1863
|
-
padding: "".concat(base$c.spacing[1], " ").concat(base$c.spacing[2]),
|
|
1864
|
-
font: semantic$e.typography.caption,
|
|
1865
|
-
gap: base$c.spacing[1],
|
|
1866
|
-
iconSize: 'xs'
|
|
1867
|
-
};
|
|
1868
|
-
}
|
|
1869
|
-
// medium
|
|
1870
|
-
return {
|
|
1871
|
-
height: '32px',
|
|
1872
|
-
padding: "".concat(base$c.spacing[2], " ").concat(base$c.spacing[3]),
|
|
1873
|
-
font: semantic$e.typography.small,
|
|
1874
|
-
gap: base$c.spacing[1],
|
|
1875
|
-
iconSize: 'sm'
|
|
1876
|
-
};
|
|
1877
|
-
};
|
|
1996
|
+
var semantic$f = tokensData.semantic,
|
|
1997
|
+
base$b = tokensData.base;
|
|
1998
|
+
var color$7 = semantic$f.color,
|
|
1999
|
+
typography$4 = semantic$f.typography,
|
|
2000
|
+
border$8 = semantic$f.border,
|
|
2001
|
+
spacing$7 = semantic$f.spacing;
|
|
2002
|
+
var category = color$7.category;
|
|
2003
|
+
var radius$4 = border$8.radius;
|
|
2004
|
+
var layout$3 = spacing$7.layout;
|
|
1878
2005
|
var StyledCategoryBadge = styled.span.withConfig({
|
|
1879
2006
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1880
2007
|
return !prop.startsWith('$');
|
|
1881
2008
|
},
|
|
1882
2009
|
displayName: "CategoryBadge__StyledCategoryBadge",
|
|
1883
2010
|
componentId: "sc-17aslpn-0"
|
|
1884
|
-
})(templateObject_1$
|
|
2011
|
+
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: ", ";\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 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 font-weight: ", ";\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 gap: ", ";\n \n /* Variant + Color styles */\n background-color: ", ";\n \n color: ", ";\n \n border-color: ", ";\n"
|
|
1885
2012
|
/**
|
|
1886
2013
|
* CategoryBadge component for displaying transaction categories
|
|
1887
2014
|
*
|
|
1888
|
-
*
|
|
1889
|
-
*
|
|
2015
|
+
* A static label for categorizing content with support for 8 color options,
|
|
2016
|
+
* 3 visual variants, and optional icons. Perfect for categorizing
|
|
2017
|
+
* financial transactions or content types.
|
|
1890
2018
|
*
|
|
1891
2019
|
* @example
|
|
1892
2020
|
* ```tsx
|
|
@@ -1894,23 +2022,51 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
1894
2022
|
* Food & Dining
|
|
1895
2023
|
* </CategoryBadge>
|
|
1896
2024
|
*
|
|
1897
|
-
* <CategoryBadge
|
|
1898
|
-
* color="blue"
|
|
1899
|
-
* variant="outlined"
|
|
1900
|
-
* size="small"
|
|
1901
|
-
* onClick={() => filterByCategory('travel')}
|
|
1902
|
-
* >
|
|
2025
|
+
* <CategoryBadge color="blue" variant="outlined" size="small">
|
|
1903
2026
|
* Travel
|
|
1904
2027
|
* </CategoryBadge>
|
|
1905
2028
|
* ```
|
|
1906
|
-
*/])),
|
|
1907
|
-
|
|
1908
|
-
|
|
2029
|
+
*/])), radius$4.circle, base$b.fontWeight[3], base$b.border.width[1], function (_a) {
|
|
2030
|
+
var $size = _a.$size;
|
|
2031
|
+
return $size === 'small' ? '24px' : '32px';
|
|
2032
|
+
}, function (_a) {
|
|
2033
|
+
var $size = _a.$size;
|
|
2034
|
+
return $size === 'small' ? "".concat(layout$3.xs, " ").concat(layout$3.sm) : "".concat(layout$3.sm, " ").concat(layout$3.md);
|
|
2035
|
+
}, function (_a) {
|
|
2036
|
+
var $size = _a.$size;
|
|
2037
|
+
return $size === 'small' ? typography$4.caption : typography$4.small;
|
|
2038
|
+
}, layout$3.xs, function (_a) {
|
|
2039
|
+
var $color = _a.$color,
|
|
2040
|
+
$variant = _a.$variant;
|
|
2041
|
+
if ($variant === 'filled') {
|
|
2042
|
+
return category["".concat($color, "-emphasis")];
|
|
2043
|
+
}
|
|
2044
|
+
if ($variant === 'outlined') {
|
|
2045
|
+
return 'transparent';
|
|
2046
|
+
}
|
|
2047
|
+
// minimal
|
|
2048
|
+
return category["".concat($color, "-subtle")];
|
|
2049
|
+
}, function (_a) {
|
|
2050
|
+
var $color = _a.$color,
|
|
2051
|
+
$variant = _a.$variant;
|
|
2052
|
+
if ($variant === 'filled') {
|
|
2053
|
+
return color$7.text.inverse;
|
|
2054
|
+
}
|
|
2055
|
+
return category[$color];
|
|
2056
|
+
}, function (_a) {
|
|
2057
|
+
var $color = _a.$color,
|
|
2058
|
+
$variant = _a.$variant;
|
|
2059
|
+
if ($variant === 'outlined') {
|
|
2060
|
+
return category[$color];
|
|
2061
|
+
}
|
|
2062
|
+
return 'transparent';
|
|
2063
|
+
});
|
|
1909
2064
|
/**
|
|
1910
2065
|
* CategoryBadge component for displaying transaction categories
|
|
1911
2066
|
*
|
|
1912
|
-
*
|
|
1913
|
-
*
|
|
2067
|
+
* A static label for categorizing content with support for 8 color options,
|
|
2068
|
+
* 3 visual variants, and optional icons. Perfect for categorizing
|
|
2069
|
+
* financial transactions or content types.
|
|
1914
2070
|
*
|
|
1915
2071
|
* @example
|
|
1916
2072
|
* ```tsx
|
|
@@ -1918,12 +2074,7 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
1918
2074
|
* Food & Dining
|
|
1919
2075
|
* </CategoryBadge>
|
|
1920
2076
|
*
|
|
1921
|
-
* <CategoryBadge
|
|
1922
|
-
* color="blue"
|
|
1923
|
-
* variant="outlined"
|
|
1924
|
-
* size="small"
|
|
1925
|
-
* onClick={() => filterByCategory('travel')}
|
|
1926
|
-
* >
|
|
2077
|
+
* <CategoryBadge color="blue" variant="outlined" size="small">
|
|
1927
2078
|
* Travel
|
|
1928
2079
|
* </CategoryBadge>
|
|
1929
2080
|
* ```
|
|
@@ -1937,85 +2088,51 @@ var CategoryBadge = function CategoryBadge(_a) {
|
|
|
1937
2088
|
_d = _a.size,
|
|
1938
2089
|
size = _d === void 0 ? 'medium' : _d,
|
|
1939
2090
|
icon = _a.icon,
|
|
1940
|
-
onClick = _a.onClick,
|
|
1941
|
-
_e = _a.disabled,
|
|
1942
|
-
disabled = _e === void 0 ? false : _e,
|
|
1943
2091
|
dataTestId = _a["data-testid"],
|
|
1944
2092
|
ariaLabel = _a["aria-label"];
|
|
1945
|
-
var
|
|
1946
|
-
var isClickable = hasClickHandler && !disabled;
|
|
1947
|
-
var colorStyles = getColorStyles(color, variant);
|
|
1948
|
-
var sizeStyles = getSizeStyles$2(size);
|
|
1949
|
-
var cssProps = {
|
|
1950
|
-
'--category-badge-bg': colorStyles.backgroundColor,
|
|
1951
|
-
'--category-badge-color': colorStyles.color,
|
|
1952
|
-
'--category-badge-border': colorStyles.borderColor,
|
|
1953
|
-
'--category-badge-height': sizeStyles.height,
|
|
1954
|
-
'--category-badge-padding': sizeStyles.padding,
|
|
1955
|
-
'--category-badge-font': sizeStyles.font,
|
|
1956
|
-
'--category-badge-gap': sizeStyles.gap,
|
|
1957
|
-
'--category-badge-opacity': disabled ? '0.6' : '1',
|
|
1958
|
-
'--category-badge-cursor': disabled ? 'not-allowed' : isClickable ? 'pointer' : 'default'
|
|
1959
|
-
};
|
|
1960
|
-
var handleClick = function handleClick() {
|
|
1961
|
-
if (isClickable) {
|
|
1962
|
-
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
1963
|
-
}
|
|
1964
|
-
};
|
|
1965
|
-
var handleKeyDown = function handleKeyDown(event) {
|
|
1966
|
-
if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
|
|
1967
|
-
event.preventDefault();
|
|
1968
|
-
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
1969
|
-
}
|
|
1970
|
-
};
|
|
2093
|
+
var iconSize = size === 'small' ? 'xs' : 'sm';
|
|
1971
2094
|
return jsxs(StyledCategoryBadge, {
|
|
1972
2095
|
"$color": color,
|
|
1973
2096
|
"$variant": variant,
|
|
1974
2097
|
"$size": size,
|
|
1975
|
-
"$clickable": isClickable,
|
|
1976
|
-
"$disabled": disabled,
|
|
1977
|
-
onClick: handleClick,
|
|
1978
|
-
onKeyDown: handleKeyDown,
|
|
1979
|
-
tabIndex: hasClickHandler ? 0 : undefined,
|
|
1980
|
-
role: hasClickHandler ? 'button' : undefined,
|
|
1981
2098
|
"aria-label": ariaLabel,
|
|
1982
|
-
"aria-disabled": disabled,
|
|
1983
2099
|
"data-testid": dataTestId,
|
|
1984
|
-
style: cssProps,
|
|
1985
2100
|
children: [icon && jsx(Icon, {
|
|
1986
2101
|
name: icon,
|
|
1987
|
-
size:
|
|
2102
|
+
size: iconSize,
|
|
1988
2103
|
iconColor: variant === 'filled' ? 'inverse' : 'inherit',
|
|
1989
2104
|
"aria-hidden": "true"
|
|
1990
2105
|
}), children]
|
|
1991
2106
|
});
|
|
1992
2107
|
};
|
|
1993
2108
|
CategoryBadge.displayName = 'CategoryBadge';
|
|
1994
|
-
var templateObject_1$
|
|
2109
|
+
var templateObject_1$D;
|
|
1995
2110
|
|
|
1996
2111
|
var chip = tokensData.component.chip;
|
|
1997
2112
|
// Helper function to get variant styles matching Button's approach
|
|
1998
2113
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1999
2114
|
var $variant = _a.$variant,
|
|
2000
|
-
$selected = _a.$selected
|
|
2115
|
+
$selected = _a.$selected,
|
|
2116
|
+
$clickable = _a.$clickable,
|
|
2117
|
+
$disabled = _a.$disabled;
|
|
2001
2118
|
// Boolean chips with selected state get special background
|
|
2002
2119
|
if ($selected) {
|
|
2003
|
-
return "\n background-color: ".concat(tokensData.semantic.color.background['interactive-subtle'], ";\n color: ").concat(chip["default"].textColor, ";\n ");
|
|
2120
|
+
return "\n background-color: ".concat(tokensData.semantic.color.background['interactive-subtle'], ";\n color: ").concat(chip["default"].textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? tokensData.semantic.color.background['interactive-subtle'] : $clickable ? '#CAE8FF' : tokensData.semantic.color.background['interactive-subtle'], ";\n }\n \n &:active {\n background-color: ").concat($disabled ? tokensData.semantic.color.background['interactive-subtle'] : $clickable ? '#B5DEFF' : tokensData.semantic.color.background['interactive-subtle'], ";\n }\n ");
|
|
2004
2121
|
}
|
|
2005
2122
|
switch ($variant) {
|
|
2006
2123
|
case 'emphasis':
|
|
2007
|
-
return "\n background-color: ".concat(chip.variants.emphasis.backgroundColor, ";\n color: ").concat(chip.variants.emphasis.textColor, ";\n ");
|
|
2124
|
+
return "\n background-color: ".concat(chip.variants.emphasis.backgroundColor, ";\n color: ").concat(chip.variants.emphasis.textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip.variants.emphasis.disabled.backgroundColor : $clickable ? chip.variants.emphasis.hover.backgroundColor : chip.variants.emphasis.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip.variants.emphasis.disabled.backgroundColor : $clickable ? chip.variants.emphasis.active.backgroundColor : chip.variants.emphasis.backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip.variants.emphasis.disabled.backgroundColor, ";\n color: ").concat(chip.variants.emphasis.disabled.textColor, ";\n ") : '', "\n ");
|
|
2008
2125
|
case 'subtle':
|
|
2009
|
-
return "\n background-color: ".concat(chip.variants.subtle.backgroundColor, ";\n color: ").concat(chip.variants.subtle.textColor, ";\n ");
|
|
2126
|
+
return "\n background-color: ".concat(chip.variants.subtle.backgroundColor, ";\n color: ").concat(chip.variants.subtle.textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip.variants.subtle.disabled.backgroundColor : $clickable ? chip.variants.subtle.hover.backgroundColor : chip.variants.subtle.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip.variants.subtle.disabled.backgroundColor : $clickable ? chip.variants.subtle.active.backgroundColor : chip.variants.subtle.backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip.variants.subtle.disabled.backgroundColor, ";\n color: ").concat(chip.variants.subtle.disabled.textColor, ";\n ") : '', "\n ");
|
|
2010
2127
|
case 'interactive':
|
|
2011
|
-
return "\n background-color: ".concat(chip.variants.interactive.backgroundColor, ";\n color: ").concat(chip.variants.interactive.textColor, ";\n ");
|
|
2128
|
+
return "\n background-color: ".concat(chip.variants.interactive.backgroundColor, ";\n color: ").concat(chip.variants.interactive.textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip.variants.interactive.disabled.backgroundColor : $clickable ? chip.variants.interactive.hover.backgroundColor : chip.variants.interactive.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip.variants.interactive.disabled.backgroundColor : $clickable ? chip.variants.interactive.active.backgroundColor : chip.variants.interactive.backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip.variants.interactive.disabled.backgroundColor, ";\n color: ").concat(chip.variants.interactive.disabled.textColor, ";\n ") : '', "\n ");
|
|
2012
2129
|
case 'default':
|
|
2013
2130
|
default:
|
|
2014
|
-
return "\n background-color: ".concat(chip["default"].backgroundColor, ";\n color: ").concat(chip["default"].textColor, ";\n ");
|
|
2131
|
+
return "\n background-color: ".concat(chip["default"].backgroundColor, ";\n color: ").concat(chip["default"].textColor, ";\n \n &:hover {\n background-color: ").concat($disabled ? chip.disabled.backgroundColor : $clickable ? chip.hover.backgroundColor : chip["default"].backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat($disabled ? chip.disabled.backgroundColor : $clickable ? chip.active.backgroundColor : chip["default"].backgroundColor, ";\n }\n \n ").concat($disabled ? "\n background-color: ".concat(chip.disabled.backgroundColor, ";\n color: ").concat(chip.disabled.textColor, ";\n ") : '', "\n ");
|
|
2015
2132
|
}
|
|
2016
2133
|
};
|
|
2017
2134
|
// Helper function to get size styles matching Button's approach
|
|
2018
|
-
var getSizeStyles
|
|
2135
|
+
var getSizeStyles = function getSizeStyles(_a) {
|
|
2019
2136
|
var $size = _a.$size;
|
|
2020
2137
|
switch ($size) {
|
|
2021
2138
|
case 'small':
|
|
@@ -2033,24 +2150,18 @@ var StyledChip = styled.span.withConfig({
|
|
|
2033
2150
|
},
|
|
2034
2151
|
displayName: "ChipBase__StyledChip",
|
|
2035
2152
|
componentId: "sc-moa6zc-0"
|
|
2036
|
-
})(templateObject_1$
|
|
2153
|
+
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: ", ";\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: ", ";\n cursor: ", ";\n \n ", "\n ", "\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: ", ";\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: ", ";\n cursor: ", ";\n \n ", "\n ", "\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"
|
|
2037
2154
|
// Icon container for selected indicator or leading icons
|
|
2038
|
-
])),
|
|
2155
|
+
])), chip["default"].borderRadius, tokensData.semantic.motion.hover, function (props) {
|
|
2039
2156
|
return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
|
|
2040
|
-
},
|
|
2041
|
-
return props.$disabled ? '0.6' : '1';
|
|
2042
|
-
}, getVariantStyles, getSizeStyles$1, function (props) {
|
|
2043
|
-
return props.$disabled ? '0.6' : props.$clickable ? '0.8' : '1';
|
|
2044
|
-
}, function (props) {
|
|
2045
|
-
return props.$disabled ? '0.6' : props.$clickable ? '0.9' : '1';
|
|
2046
|
-
}, chip.variants.interactive.backgroundColor);
|
|
2157
|
+
}, getVariantStyles, getSizeStyles, chip.focus.outline, chip.focus.outlineOffset);
|
|
2047
2158
|
// Icon container for selected indicator or leading icons
|
|
2048
2159
|
var IconContainer = styled.span.withConfig({
|
|
2049
2160
|
displayName: "ChipBase__IconContainer",
|
|
2050
2161
|
componentId: "sc-moa6zc-1"
|
|
2051
|
-
})(templateObject_2$
|
|
2162
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n margin-right: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n margin-right: ", ";\n"
|
|
2052
2163
|
// Close button for dismissible chips
|
|
2053
|
-
])), tokensData.semantic.spacing.layout.
|
|
2164
|
+
])), tokensData.semantic.spacing.layout.xs);
|
|
2054
2165
|
// Close button for dismissible chips
|
|
2055
2166
|
var CloseButton = styled.button.withConfig({
|
|
2056
2167
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2058,12 +2169,10 @@ var CloseButton = styled.button.withConfig({
|
|
|
2058
2169
|
},
|
|
2059
2170
|
displayName: "ChipBase__CloseButton",
|
|
2060
2171
|
componentId: "sc-moa6zc-2"
|
|
2061
|
-
})(templateObject_3$
|
|
2172
|
+
})(templateObject_3$o || (templateObject_3$o = __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: rgba(0, 0, 0, 0.1);\n }\n \n &:active:not(:disabled) {\n background-color: rgba(0, 0, 0, 0.15);\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: rgba(0, 0, 0, 0.1);\n }\n \n &:active:not(:disabled) {\n background-color: rgba(0, 0, 0, 0.15);\n }\n \n &:disabled {\n color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n border-radius: ", ";\n }\n"])), tokensData.semantic.spacing.layout.sm, tokensData.semantic.border.radius.xs, function (props) {
|
|
2062
2173
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
2063
|
-
},
|
|
2064
|
-
|
|
2065
|
-
}, tokensData.semantic.motion.transition.fast, chip.variants.interactive.backgroundColor);
|
|
2066
|
-
var templateObject_1$B, templateObject_2$p, templateObject_3$n;
|
|
2174
|
+
}, tokensData.semantic.motion.hover, tokensData.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
|
|
2175
|
+
var templateObject_1$C, templateObject_2$q, templateObject_3$o;
|
|
2067
2176
|
|
|
2068
2177
|
/**
|
|
2069
2178
|
* Chip - Compact element for displaying tags, categories, and labels
|
|
@@ -2309,37 +2418,37 @@ var media$1 = {
|
|
|
2309
2418
|
'2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
|
|
2310
2419
|
};
|
|
2311
2420
|
|
|
2312
|
-
var spacing$
|
|
2421
|
+
var spacing$6 = tokensData.semantic.spacing;
|
|
2313
2422
|
var StyledContainer$2 = styled.div.withConfig({
|
|
2314
2423
|
displayName: "Container__StyledContainer",
|
|
2315
2424
|
componentId: "sc-17dbj6n-0"
|
|
2316
|
-
})(templateObject_1$
|
|
2317
|
-
var Container = function Container(_a) {
|
|
2425
|
+
})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: ", ";\n padding-right: ", ";\n \n ", " {\n max-width: 640px;\n }\n \n ", " {\n max-width: 768px;\n }\n \n ", " {\n max-width: 1024px;\n }\n \n ", " {\n max-width: 1280px;\n }\n \n ", " {\n max-width: 1536px;\n }\n"], ["\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: ", ";\n padding-right: ", ";\n \n ", " {\n max-width: 640px;\n }\n \n ", " {\n max-width: 768px;\n }\n \n ", " {\n max-width: 1024px;\n }\n \n ", " {\n max-width: 1280px;\n }\n \n ", " {\n max-width: 1536px;\n }\n"])), spacing$6.layout['2xl'], spacing$6.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
|
|
2426
|
+
var Container$1 = function Container(_a) {
|
|
2318
2427
|
var children = _a.children,
|
|
2319
2428
|
props = __rest(_a, ["children"]);
|
|
2320
2429
|
return jsx(StyledContainer$2, __assign({}, props, {
|
|
2321
2430
|
children: children
|
|
2322
2431
|
}));
|
|
2323
2432
|
};
|
|
2324
|
-
var templateObject_1$
|
|
2433
|
+
var templateObject_1$B;
|
|
2325
2434
|
|
|
2326
|
-
var base$
|
|
2435
|
+
var base$a = tokensData.base;
|
|
2327
2436
|
var PictureWrapper = styled.div.withConfig({
|
|
2328
2437
|
displayName: "Picture__PictureWrapper",
|
|
2329
2438
|
componentId: "sc-11d9tei-0"
|
|
2330
|
-
})(templateObject_1$
|
|
2439
|
+
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n margin: 0 auto;\n \n ", " {\n margin-left: 0;\n margin-right: 0;\n }\n"], ["\n margin: 0 auto;\n \n ", " {\n margin-left: 0;\n margin-right: 0;\n }\n"])), media$1.sm);
|
|
2331
2440
|
var ImageLink = styled.a.withConfig({
|
|
2332
2441
|
displayName: "Picture__ImageLink",
|
|
2333
2442
|
componentId: "sc-11d9tei-1"
|
|
2334
|
-
})(templateObject_2$
|
|
2443
|
+
})(templateObject_2$p || (templateObject_2$p = __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"])), base$a.duration.normal, base$a.easing.easeInOut);
|
|
2335
2444
|
var ImageButton = styled.button.withConfig({
|
|
2336
2445
|
displayName: "Picture__ImageButton",
|
|
2337
2446
|
componentId: "sc-11d9tei-2"
|
|
2338
|
-
})(templateObject_3$
|
|
2447
|
+
})(templateObject_3$n || (templateObject_3$n = __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"])), base$a.duration.normal, base$a.easing.easeInOut);
|
|
2339
2448
|
var StyledImage = styled.img.withConfig({
|
|
2340
2449
|
displayName: "Picture__StyledImage",
|
|
2341
2450
|
componentId: "sc-11d9tei-3"
|
|
2342
|
-
})(templateObject_4$
|
|
2451
|
+
})(templateObject_4$j || (templateObject_4$j = __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"])), base$a.border.radius[2]);
|
|
2343
2452
|
var Picture = function Picture(_a) {
|
|
2344
2453
|
var title = _a.title,
|
|
2345
2454
|
src = _a.src,
|
|
@@ -2369,18 +2478,18 @@ var Picture = function Picture(_a) {
|
|
|
2369
2478
|
}) : image
|
|
2370
2479
|
});
|
|
2371
2480
|
};
|
|
2372
|
-
var templateObject_1$
|
|
2481
|
+
var templateObject_1$A, templateObject_2$p, templateObject_3$n, templateObject_4$j;
|
|
2373
2482
|
|
|
2374
|
-
var _a$
|
|
2375
|
-
typography$
|
|
2376
|
-
color$
|
|
2483
|
+
var _a$7 = tokensData.semantic,
|
|
2484
|
+
typography$3 = _a$7.typography,
|
|
2485
|
+
color$6 = _a$7.color;
|
|
2377
2486
|
var TimeStyled = styled.time.withConfig({
|
|
2378
2487
|
displayName: "DateFormatter__TimeStyled",
|
|
2379
2488
|
componentId: "sc-5464cc-0"
|
|
2380
|
-
})(templateObject_1$
|
|
2489
|
+
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
2381
2490
|
/**
|
|
2382
2491
|
* Formats a date with smart relative/absolute logic
|
|
2383
|
-
*/])), typography$
|
|
2492
|
+
*/])), typography$3.label, color$6.text.subdued);
|
|
2384
2493
|
/**
|
|
2385
2494
|
* Formats a date with smart relative/absolute logic
|
|
2386
2495
|
*/
|
|
@@ -2426,17 +2535,19 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
2426
2535
|
children: displayText
|
|
2427
2536
|
});
|
|
2428
2537
|
};
|
|
2429
|
-
var templateObject_1$
|
|
2538
|
+
var templateObject_1$z;
|
|
2430
2539
|
|
|
2431
|
-
var motion = tokensData.semantic.motion,
|
|
2432
|
-
|
|
2540
|
+
var motion$2 = tokensData.semantic.motion,
|
|
2541
|
+
_a$6 = tokensData.component,
|
|
2542
|
+
iconButton = _a$6.iconButton,
|
|
2543
|
+
button = _a$6.button;
|
|
2433
2544
|
var IconButtonStyled = styled.button.withConfig({
|
|
2434
2545
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2435
2546
|
return !prop.startsWith('$');
|
|
2436
2547
|
},
|
|
2437
2548
|
displayName: "IconButton__IconButtonStyled",
|
|
2438
2549
|
componentId: "sc-k8b14t-0"
|
|
2439
|
-
})(templateObject_1$
|
|
2550
|
+
})(templateObject_1$y || (templateObject_1$y = __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: 1px 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: 1px solid;\n }\n\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n"])), function (_a) {
|
|
2440
2551
|
var $variant = _a.$variant;
|
|
2441
2552
|
switch ($variant) {
|
|
2442
2553
|
case 'primary':
|
|
@@ -2448,7 +2559,19 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2448
2559
|
default:
|
|
2449
2560
|
return iconButton.primary.backgroundColor;
|
|
2450
2561
|
}
|
|
2451
|
-
},
|
|
2562
|
+
}, function (_a) {
|
|
2563
|
+
var $variant = _a.$variant;
|
|
2564
|
+
switch ($variant) {
|
|
2565
|
+
case 'primary':
|
|
2566
|
+
return button.primary.textColor;
|
|
2567
|
+
case 'secondary':
|
|
2568
|
+
return button.variants.secondary.textColor;
|
|
2569
|
+
case 'naked':
|
|
2570
|
+
return button.variants.naked.textColor;
|
|
2571
|
+
default:
|
|
2572
|
+
return button.primary.textColor;
|
|
2573
|
+
}
|
|
2574
|
+
}, iconButton.primary.borderRadius, motion$2.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
|
|
2452
2575
|
var $size = _a.$size;
|
|
2453
2576
|
return iconButton.sizes[$size].minWidth;
|
|
2454
2577
|
}, function (_a) {
|
|
@@ -2469,7 +2592,19 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2469
2592
|
default:
|
|
2470
2593
|
return iconButton.hover.backgroundColor;
|
|
2471
2594
|
}
|
|
2472
|
-
}, iconButton.active.backgroundColor, iconButton.focus.outline, iconButton.focus.outlineOffset, iconButton.disabled.backgroundColor)
|
|
2595
|
+
}, iconButton.active.backgroundColor, iconButton.focus.outline, iconButton.focus.outlineOffset, iconButton.disabled.backgroundColor, function (_a) {
|
|
2596
|
+
var $variant = _a.$variant;
|
|
2597
|
+
switch ($variant) {
|
|
2598
|
+
case 'primary':
|
|
2599
|
+
return button.disabled.textColor;
|
|
2600
|
+
case 'secondary':
|
|
2601
|
+
return button.variants.secondary.disabled.textColor;
|
|
2602
|
+
case 'naked':
|
|
2603
|
+
return button.variants.naked.disabled.textColor;
|
|
2604
|
+
default:
|
|
2605
|
+
return button.disabled.textColor;
|
|
2606
|
+
}
|
|
2607
|
+
});
|
|
2473
2608
|
var IconButton = function IconButton(_a) {
|
|
2474
2609
|
var variant = _a.variant,
|
|
2475
2610
|
_b = _a.size,
|
|
@@ -2488,13 +2623,8 @@ var IconButton = function IconButton(_a) {
|
|
|
2488
2623
|
type = _d === void 0 ? 'button' : _d,
|
|
2489
2624
|
htmlProps = __rest(_a, ["variant", "size", "url", "iconName", "onClick", 'aria-label', 'aria-describedby', 'aria-expanded', 'aria-pressed', 'data-testid', "disabled", "type"]);
|
|
2490
2625
|
var handleClick = function handleClick(event) {
|
|
2491
|
-
// Prevent default if disabled
|
|
2492
|
-
if (disabled) {
|
|
2493
|
-
event.preventDefault();
|
|
2494
|
-
return;
|
|
2495
|
-
}
|
|
2496
2626
|
if (onClick) {
|
|
2497
|
-
onClick();
|
|
2627
|
+
onClick(event);
|
|
2498
2628
|
} else if (url && url.trim() !== '') {
|
|
2499
2629
|
// Use proper navigation instead of direct href assignment
|
|
2500
2630
|
if (url.startsWith('http') || url.startsWith('//')) {
|
|
@@ -2504,52 +2634,28 @@ var IconButton = function IconButton(_a) {
|
|
|
2504
2634
|
}
|
|
2505
2635
|
}
|
|
2506
2636
|
};
|
|
2507
|
-
var handleKeyDown = function handleKeyDown(event) {
|
|
2508
|
-
// Handle keyboard activation (Enter and Space)
|
|
2509
|
-
if (disabled) return;
|
|
2510
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
2511
|
-
event.preventDefault();
|
|
2512
|
-
handleClick(event);
|
|
2513
|
-
}
|
|
2514
|
-
};
|
|
2515
2637
|
var iconSize = size === 'large' ? 'lg' : size === 'small' ? 'sm' : 'md';
|
|
2516
|
-
var getIconColor = function getIconColor(variant) {
|
|
2517
|
-
switch (variant) {
|
|
2518
|
-
case 'primary':
|
|
2519
|
-
return 'inverse';
|
|
2520
|
-
case 'secondary':
|
|
2521
|
-
return 'default';
|
|
2522
|
-
case 'naked':
|
|
2523
|
-
return 'default';
|
|
2524
|
-
default:
|
|
2525
|
-
return 'default';
|
|
2526
|
-
}
|
|
2527
|
-
};
|
|
2528
2638
|
return jsx(IconButtonStyled, __assign({
|
|
2529
2639
|
"$variant": variant,
|
|
2530
2640
|
"$size": size,
|
|
2531
2641
|
onClick: handleClick,
|
|
2532
|
-
onKeyDown: handleKeyDown,
|
|
2533
2642
|
disabled: disabled,
|
|
2534
2643
|
type: type,
|
|
2535
|
-
role: "button",
|
|
2536
2644
|
"aria-label": ariaLabel,
|
|
2537
2645
|
"aria-describedby": ariaDescribedBy,
|
|
2538
2646
|
"aria-expanded": ariaExpanded,
|
|
2539
2647
|
"aria-pressed": ariaPressed,
|
|
2540
|
-
"aria-disabled": disabled,
|
|
2541
|
-
tabIndex: disabled ? -1 : 0,
|
|
2542
2648
|
"data-testid": dataTestId
|
|
2543
2649
|
}, htmlProps, {
|
|
2544
2650
|
children: jsx(Icon, {
|
|
2545
2651
|
name: iconName,
|
|
2546
2652
|
size: iconSize,
|
|
2547
|
-
iconColor:
|
|
2653
|
+
iconColor: "inherit",
|
|
2548
2654
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2549
2655
|
})
|
|
2550
2656
|
}));
|
|
2551
2657
|
};
|
|
2552
|
-
var templateObject_1$
|
|
2658
|
+
var templateObject_1$y;
|
|
2553
2659
|
|
|
2554
2660
|
var StyledWrapper = styled.span.withConfig({
|
|
2555
2661
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2557,7 +2663,7 @@ var StyledWrapper = styled.span.withConfig({
|
|
|
2557
2663
|
},
|
|
2558
2664
|
displayName: "MoneyDisplay__StyledWrapper",
|
|
2559
2665
|
componentId: "sc-1mddej3-0"
|
|
2560
|
-
})(templateObject_1$
|
|
2666
|
+
})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n text-align: ", ";\n font-weight: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n text-align: ", ";\n font-weight: ", ";\n"
|
|
2561
2667
|
// Map size to Typography variant
|
|
2562
2668
|
])), function (_a) {
|
|
2563
2669
|
var $align = _a.$align;
|
|
@@ -2573,14 +2679,12 @@ var sizeToTypographyVariant = {
|
|
|
2573
2679
|
large: 'h3',
|
|
2574
2680
|
xlarge: 'h2'
|
|
2575
2681
|
};
|
|
2576
|
-
// Map
|
|
2577
|
-
var
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
// Red color for debits/expenses
|
|
2583
|
-
neutral: 'subdued' // Gray color for informational
|
|
2682
|
+
// Map size to Icon size for consistent visual alignment
|
|
2683
|
+
var sizeToIconSize = {
|
|
2684
|
+
small: 'xs',
|
|
2685
|
+
medium: 'sm',
|
|
2686
|
+
large: 'md',
|
|
2687
|
+
xlarge: 'lg'
|
|
2584
2688
|
};
|
|
2585
2689
|
/**
|
|
2586
2690
|
* Generates aria-label with spelled out amount
|
|
@@ -2629,45 +2733,61 @@ var MoneyDisplay = function MoneyDisplay(_a) {
|
|
|
2629
2733
|
maximumFractionDigits: 2
|
|
2630
2734
|
});
|
|
2631
2735
|
var formattedAmount = formatter.format(Math.abs(amount));
|
|
2632
|
-
//
|
|
2633
|
-
var
|
|
2634
|
-
|
|
2635
|
-
var signSymbol = amount > 0 ? '+' : '−'; // Using minus sign character, not hyphen
|
|
2636
|
-
displayText = signSymbol + formattedAmount;
|
|
2637
|
-
} else if (amount < 0 && !showSign) {
|
|
2638
|
-
// Still show negative sign even without showSign
|
|
2639
|
-
displayText = '−' + formattedAmount;
|
|
2640
|
-
}
|
|
2736
|
+
// Determine if we need to show a sign icon
|
|
2737
|
+
var showPositiveIcon = showSign && amount > 0 || variant === 'positive';
|
|
2738
|
+
var showNegativeIcon = amount < 0 || variant === 'negative';
|
|
2641
2739
|
// Generate accessibility label
|
|
2642
2740
|
var ariaLabel = generateAriaLabel(amount, currency, locale);
|
|
2643
|
-
// Get typography variant and
|
|
2741
|
+
// Get typography variant and icon size
|
|
2644
2742
|
var typographyVariant = sizeToTypographyVariant[size];
|
|
2645
|
-
var
|
|
2646
|
-
|
|
2743
|
+
var iconSize = sizeToIconSize[size];
|
|
2744
|
+
// Determine icon color based on variant
|
|
2745
|
+
var iconColor = variant === 'positive' || showPositiveIcon ? 'success' : variant === 'negative' || showNegativeIcon ? 'error' : variant === 'neutral' ? 'subdued' : 'default';
|
|
2746
|
+
// Amount always uses default color (except neutral which stays subdued)
|
|
2747
|
+
var amountColor = variant === 'neutral' ? 'subdued' : 'default';
|
|
2748
|
+
return jsxs(StyledWrapper, {
|
|
2647
2749
|
"$align": align,
|
|
2648
2750
|
"$weight": weight,
|
|
2649
2751
|
"aria-label": ariaLabel,
|
|
2650
2752
|
"data-testid": dataTestId,
|
|
2651
|
-
children: jsx(
|
|
2753
|
+
children: [showPositiveIcon && !showNegativeIcon && jsx(Icon, {
|
|
2754
|
+
name: "addRing",
|
|
2755
|
+
size: iconSize,
|
|
2756
|
+
iconColor: iconColor
|
|
2757
|
+
}), showNegativeIcon && jsx(Icon, {
|
|
2758
|
+
name: "remove",
|
|
2759
|
+
size: iconSize,
|
|
2760
|
+
iconColor: iconColor
|
|
2761
|
+
}), jsx(Typography, {
|
|
2652
2762
|
variant: typographyVariant,
|
|
2653
|
-
color:
|
|
2763
|
+
color: amountColor,
|
|
2654
2764
|
as: "span",
|
|
2655
|
-
children:
|
|
2656
|
-
})
|
|
2765
|
+
children: formattedAmount
|
|
2766
|
+
})]
|
|
2657
2767
|
});
|
|
2658
2768
|
};
|
|
2659
|
-
var templateObject_1$
|
|
2769
|
+
var templateObject_1$x;
|
|
2660
2770
|
|
|
2771
|
+
// Destructure tokens
|
|
2772
|
+
var semantic$e = tokensData.semantic;
|
|
2773
|
+
var _a$5 = __assign(__assign({}, semantic$e), {
|
|
2774
|
+
component: tokensData.component
|
|
2775
|
+
}),
|
|
2776
|
+
color$5 = _a$5.color,
|
|
2777
|
+
border$7 = _a$5.border,
|
|
2778
|
+
motion$1 = _a$5.motion,
|
|
2779
|
+
component$2 = _a$5.component;
|
|
2780
|
+
var radius$3 = border$7.radius;
|
|
2661
2781
|
var ProgressBarContainer = styled.div.withConfig({
|
|
2662
2782
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2663
2783
|
return !prop.startsWith('$');
|
|
2664
2784
|
},
|
|
2665
2785
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2666
2786
|
componentId: "sc-1nco33q-0"
|
|
2667
|
-
})(templateObject_3$
|
|
2668
|
-
return props.$variant === 'horizontal' && css(templateObject_1$
|
|
2787
|
+
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"])), color$5.background.disabled, radius$3.xs, function (props) {
|
|
2788
|
+
return props.$variant === 'horizontal' && css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
|
|
2669
2789
|
}, function (props) {
|
|
2670
|
-
return props.$variant === 'vertical' && css(templateObject_2$
|
|
2790
|
+
return props.$variant === 'vertical' && css(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
|
|
2671
2791
|
});
|
|
2672
2792
|
var ProgressBarFill = styled.div.withConfig({
|
|
2673
2793
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2675,25 +2795,25 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2675
2795
|
},
|
|
2676
2796
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2677
2797
|
componentId: "sc-1nco33q-1"
|
|
2678
|
-
})(templateObject_7$
|
|
2798
|
+
})(templateObject_7$9 || (templateObject_7$9 = __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$1.transition.normal, function (props) {
|
|
2679
2799
|
var backgroundColor;
|
|
2680
2800
|
switch (props.$color) {
|
|
2681
2801
|
case 'success':
|
|
2682
|
-
backgroundColor =
|
|
2802
|
+
backgroundColor = color$5.background.success;
|
|
2683
2803
|
break;
|
|
2684
2804
|
case 'error':
|
|
2685
|
-
backgroundColor =
|
|
2805
|
+
backgroundColor = color$5.background.error;
|
|
2686
2806
|
break;
|
|
2687
2807
|
case 'default':
|
|
2688
2808
|
default:
|
|
2689
|
-
backgroundColor =
|
|
2809
|
+
backgroundColor = color$5.background.interactive;
|
|
2690
2810
|
break;
|
|
2691
2811
|
}
|
|
2692
|
-
return css(templateObject_4$
|
|
2812
|
+
return css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2693
2813
|
}, function (props) {
|
|
2694
|
-
return props.$variant === 'horizontal' && css(templateObject_5$
|
|
2814
|
+
return props.$variant === 'horizontal' && css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2695
2815
|
}, function (props) {
|
|
2696
|
-
return props.$variant === 'vertical' && css(templateObject_6$
|
|
2816
|
+
return props.$variant === 'vertical' && css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2697
2817
|
});
|
|
2698
2818
|
var ProgressBar = function ProgressBar(_a) {
|
|
2699
2819
|
var value = _a.value,
|
|
@@ -2720,15 +2840,18 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2720
2840
|
})
|
|
2721
2841
|
});
|
|
2722
2842
|
};
|
|
2723
|
-
var templateObject_1$
|
|
2843
|
+
var templateObject_1$w, templateObject_2$o, templateObject_3$m, templateObject_4$i, templateObject_5$e, templateObject_6$c, templateObject_7$9;
|
|
2724
2844
|
|
|
2725
|
-
|
|
2845
|
+
// Destructure tokens for cleaner access
|
|
2846
|
+
var separatorTokens = tokensData.component.separator;
|
|
2847
|
+
var separatorSpacing = tokensData.semantic.spacing.separator;
|
|
2848
|
+
var StyledDivider = styled.div.withConfig({
|
|
2726
2849
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2727
2850
|
return !prop.startsWith('$');
|
|
2728
2851
|
},
|
|
2729
2852
|
displayName: "Divider__StyledDivider",
|
|
2730
2853
|
componentId: "sc-1l0c8ja-0"
|
|
2731
|
-
})(templateObject_1$
|
|
2854
|
+
})(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n border: none;\n \n /* Apply orientation */\n ", "\n \n /* Apply variant styles */\n ", "\n \n /* Apply size styles (spacing) */\n ", "\n"], ["\n border: none;\n \n /* Apply orientation */\n ", "\n \n /* Apply variant styles */\n ", "\n \n /* Apply size styles (spacing) */\n ", "\n"
|
|
2732
2855
|
/**
|
|
2733
2856
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2734
2857
|
*
|
|
@@ -2761,12 +2884,12 @@ var StyledDivider$1 = styled.div.withConfig({
|
|
|
2761
2884
|
var borderProperty = $orientation === 'vertical' ? 'border-left' : 'border-top';
|
|
2762
2885
|
switch ($variant) {
|
|
2763
2886
|
case 'strong':
|
|
2764
|
-
return "".concat(borderProperty, ": ").concat(
|
|
2887
|
+
return "".concat(borderProperty, ": ").concat(separatorTokens.variants.strong.border, ";");
|
|
2765
2888
|
case 'minimal':
|
|
2766
|
-
return "".concat(borderProperty, ": ").concat(
|
|
2889
|
+
return "".concat(borderProperty, ": ").concat(separatorTokens.variants.minimal.border, ";");
|
|
2767
2890
|
case 'default':
|
|
2768
2891
|
default:
|
|
2769
|
-
return "".concat(borderProperty, ": ").concat(
|
|
2892
|
+
return "".concat(borderProperty, ": ").concat(separatorTokens.variants["default"].border, ";");
|
|
2770
2893
|
}
|
|
2771
2894
|
}, function (_a) {
|
|
2772
2895
|
var _b = _a.$size,
|
|
@@ -2777,33 +2900,33 @@ var StyledDivider$1 = styled.div.withConfig({
|
|
|
2777
2900
|
$orientation = _d === void 0 ? 'horizontal' : _d;
|
|
2778
2901
|
if ($variant === 'minimal' && $orientation === 'horizontal') {
|
|
2779
2902
|
// Minimal variant always uses its predefined spacing for horizontal
|
|
2780
|
-
return "margin: ".concat(
|
|
2903
|
+
return "margin: ".concat(separatorTokens.variants.minimal.margin, ";");
|
|
2781
2904
|
}
|
|
2782
2905
|
if ($orientation === 'vertical') {
|
|
2783
2906
|
// Vertical orientation uses horizontal margins (left/right)
|
|
2784
2907
|
switch ($size) {
|
|
2785
2908
|
case 'small':
|
|
2786
|
-
return "margin: 0 ".concat(
|
|
2909
|
+
return "margin: 0 ".concat(separatorSpacing.sm, ";");
|
|
2787
2910
|
case 'medium':
|
|
2788
|
-
return "margin: 0 ".concat(
|
|
2911
|
+
return "margin: 0 ".concat(separatorSpacing.md, ";");
|
|
2789
2912
|
case 'xlarge':
|
|
2790
|
-
return "margin: 0 ".concat(
|
|
2913
|
+
return "margin: 0 ".concat(separatorSpacing.xl, ";");
|
|
2791
2914
|
case 'large':
|
|
2792
2915
|
default:
|
|
2793
|
-
return "margin: 0 ".concat(
|
|
2916
|
+
return "margin: 0 ".concat(separatorSpacing.lg, ";");
|
|
2794
2917
|
}
|
|
2795
2918
|
}
|
|
2796
2919
|
// Horizontal orientation uses vertical margins (top/bottom)
|
|
2797
2920
|
switch ($size) {
|
|
2798
2921
|
case 'small':
|
|
2799
|
-
return "margin: ".concat(
|
|
2922
|
+
return "margin: ".concat(separatorTokens.sizes.small.margin, ";");
|
|
2800
2923
|
case 'medium':
|
|
2801
|
-
return "margin: ".concat(
|
|
2924
|
+
return "margin: ".concat(separatorTokens.sizes.medium.margin, ";");
|
|
2802
2925
|
case 'xlarge':
|
|
2803
|
-
return "margin: ".concat(
|
|
2926
|
+
return "margin: ".concat(separatorTokens.sizes.xlarge.margin, ";");
|
|
2804
2927
|
case 'large':
|
|
2805
2928
|
default:
|
|
2806
|
-
return "margin: ".concat(
|
|
2929
|
+
return "margin: ".concat(separatorTokens.sizes.large.margin, ";");
|
|
2807
2930
|
}
|
|
2808
2931
|
});
|
|
2809
2932
|
/**
|
|
@@ -2832,7 +2955,7 @@ var Divider = function Divider(_a) {
|
|
|
2832
2955
|
_d = _a.orientation,
|
|
2833
2956
|
orientation = _d === void 0 ? 'horizontal' : _d,
|
|
2834
2957
|
dataTestId = _a["data-testid"];
|
|
2835
|
-
return jsx(StyledDivider
|
|
2958
|
+
return jsx(StyledDivider, {
|
|
2836
2959
|
"$variant": variant,
|
|
2837
2960
|
"$size": size,
|
|
2838
2961
|
"$orientation": orientation,
|
|
@@ -2841,7 +2964,7 @@ var Divider = function Divider(_a) {
|
|
|
2841
2964
|
"aria-orientation": orientation
|
|
2842
2965
|
});
|
|
2843
2966
|
};
|
|
2844
|
-
var templateObject_1$
|
|
2967
|
+
var templateObject_1$v;
|
|
2845
2968
|
|
|
2846
2969
|
var StyledStack = styled.div.withConfig({
|
|
2847
2970
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2849,7 +2972,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2849
2972
|
},
|
|
2850
2973
|
displayName: "Stack__StyledStack",
|
|
2851
2974
|
componentId: "sc-1ehkxgy-0"
|
|
2852
|
-
})(templateObject_1$
|
|
2975
|
+
})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n flex-direction: var(--stack-direction);\n align-items: var(--stack-align-items);\n justify-content: var(--stack-justify-content);\n gap: var(--stack-gap);\n flex-wrap: var(--stack-wrap);\n"], ["\n display: flex;\n flex-direction: var(--stack-direction);\n align-items: var(--stack-align-items);\n justify-content: var(--stack-justify-content);\n gap: var(--stack-gap);\n flex-wrap: var(--stack-wrap);\n"
|
|
2853
2976
|
// Helper function to convert gap prop to CSS value
|
|
2854
2977
|
])));
|
|
2855
2978
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2888,47 +3011,51 @@ var Stack = function Stack(_a) {
|
|
|
2888
3011
|
children: children
|
|
2889
3012
|
});
|
|
2890
3013
|
};
|
|
2891
|
-
var templateObject_1$
|
|
3014
|
+
var templateObject_1$u;
|
|
2892
3015
|
|
|
2893
|
-
|
|
2894
|
-
|
|
2895
|
-
var
|
|
3016
|
+
// Destructure tokens for cleaner access
|
|
3017
|
+
var statusColors = tokensData.semantic.color.status;
|
|
3018
|
+
var spacing$5 = tokensData.semantic.spacing.layout;
|
|
3019
|
+
var radius$2 = tokensData.semantic.border.radius;
|
|
3020
|
+
var transition = tokensData.semantic.motion.transition;
|
|
3021
|
+
var typography$2 = tokensData.semantic.typography;
|
|
3022
|
+
var scaleIn = keyframes(templateObject_1$t || (templateObject_1$t = __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"])));
|
|
2896
3023
|
var getStatusConfig = function getStatusConfig(status) {
|
|
2897
3024
|
var configs = {
|
|
2898
3025
|
pending: {
|
|
2899
|
-
color:
|
|
2900
|
-
bgColor:
|
|
3026
|
+
color: statusColors.pending,
|
|
3027
|
+
bgColor: statusColors['pending-bg'],
|
|
2901
3028
|
icon: 'refresh',
|
|
2902
3029
|
// Fallback until 'clock' icon is added
|
|
2903
3030
|
label: 'Pending'
|
|
2904
3031
|
},
|
|
2905
3032
|
completed: {
|
|
2906
|
-
color:
|
|
2907
|
-
bgColor:
|
|
3033
|
+
color: statusColors.completed,
|
|
3034
|
+
bgColor: statusColors['completed-bg'],
|
|
2908
3035
|
icon: 'check',
|
|
2909
3036
|
label: 'Completed'
|
|
2910
3037
|
},
|
|
2911
3038
|
failed: {
|
|
2912
|
-
color:
|
|
2913
|
-
bgColor:
|
|
3039
|
+
color: statusColors.failed,
|
|
3040
|
+
bgColor: statusColors['failed-bg'],
|
|
2914
3041
|
icon: 'close',
|
|
2915
3042
|
label: 'Failed'
|
|
2916
3043
|
},
|
|
2917
3044
|
cancelled: {
|
|
2918
|
-
color:
|
|
2919
|
-
bgColor:
|
|
3045
|
+
color: statusColors.cancelled,
|
|
3046
|
+
bgColor: statusColors['cancelled-bg'],
|
|
2920
3047
|
icon: 'cancel',
|
|
2921
3048
|
label: 'Cancelled'
|
|
2922
3049
|
},
|
|
2923
3050
|
processing: {
|
|
2924
|
-
color:
|
|
2925
|
-
bgColor:
|
|
3051
|
+
color: statusColors.processing,
|
|
3052
|
+
bgColor: statusColors['processing-bg'],
|
|
2926
3053
|
icon: 'refresh',
|
|
2927
3054
|
label: 'Processing'
|
|
2928
3055
|
},
|
|
2929
3056
|
scheduled: {
|
|
2930
|
-
color:
|
|
2931
|
-
bgColor:
|
|
3057
|
+
color: statusColors.scheduled,
|
|
3058
|
+
bgColor: statusColors['scheduled-bg'],
|
|
2932
3059
|
icon: 'bell',
|
|
2933
3060
|
// Fallback until 'calendar' icon is added
|
|
2934
3061
|
label: 'Scheduled'
|
|
@@ -2936,24 +3063,22 @@ var getStatusConfig = function getStatusConfig(status) {
|
|
|
2936
3063
|
};
|
|
2937
3064
|
return configs[status];
|
|
2938
3065
|
};
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
// medium
|
|
2950
|
-
return {
|
|
3066
|
+
// Size configuration
|
|
3067
|
+
var sizeConfig = {
|
|
3068
|
+
small: {
|
|
3069
|
+
height: '20px',
|
|
3070
|
+
padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
|
|
3071
|
+
font: typography$2.caption,
|
|
3072
|
+
gap: spacing$5.xs,
|
|
3073
|
+
iconSize: 'xs'
|
|
3074
|
+
},
|
|
3075
|
+
medium: {
|
|
2951
3076
|
height: '24px',
|
|
2952
|
-
padding: "".concat(
|
|
2953
|
-
font:
|
|
2954
|
-
gap:
|
|
3077
|
+
padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
|
|
3078
|
+
font: typography$2.small,
|
|
3079
|
+
gap: spacing$5.xs,
|
|
2955
3080
|
iconSize: 'sm'
|
|
2956
|
-
}
|
|
3081
|
+
}
|
|
2957
3082
|
};
|
|
2958
3083
|
var StyledStatusBadge = styled.span.withConfig({
|
|
2959
3084
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2961,11 +3086,19 @@ var StyledStatusBadge = styled.span.withConfig({
|
|
|
2961
3086
|
},
|
|
2962
3087
|
displayName: "StatusBadge__StyledStatusBadge",
|
|
2963
3088
|
componentId: "sc-1paksgb-0"
|
|
2964
|
-
})(templateObject_2$
|
|
3089
|
+
})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: 500;\n white-space: nowrap;\n user-select: none;\n animation: ", " 0.2s ease-out;\n transition: ", ";\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 font-weight: 500;\n white-space: nowrap;\n user-select: none;\n animation: ", " 0.2s ease-out;\n transition: ", ";\n \n /* Size styles */\n ", "\n \n /* Status color styles */\n ", "\n"])), radius$2.circle, scaleIn, transition.fast, function (_a) {
|
|
3090
|
+
var $size = _a.$size;
|
|
3091
|
+
var size = sizeConfig[$size];
|
|
3092
|
+
return "\n height: ".concat(size.height, ";\n padding: ").concat(size.padding, ";\n font: ").concat(size.font, ";\n gap: ").concat(size.gap, ";\n ");
|
|
3093
|
+
}, function (_a) {
|
|
3094
|
+
var $status = _a.$status;
|
|
3095
|
+
var config = getStatusConfig($status);
|
|
3096
|
+
return "\n background-color: ".concat(config.bgColor, ";\n color: ").concat(config.color, ";\n ");
|
|
3097
|
+
});
|
|
2965
3098
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
2966
3099
|
displayName: "StatusBadge__ScreenReaderOnly",
|
|
2967
3100
|
componentId: "sc-1paksgb-1"
|
|
2968
|
-
})(templateObject_3$
|
|
3101
|
+
})(templateObject_3$l || (templateObject_3$l = __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-width: 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-width: 0;\n"
|
|
2969
3102
|
/**
|
|
2970
3103
|
* StatusBadge component for displaying transaction or task status
|
|
2971
3104
|
*
|
|
@@ -3024,16 +3157,8 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
3024
3157
|
dataTestId = _a["data-testid"],
|
|
3025
3158
|
ariaLabel = _a["aria-label"];
|
|
3026
3159
|
var statusConfig = getStatusConfig(status);
|
|
3027
|
-
var sizeStyles =
|
|
3160
|
+
var sizeStyles = sizeConfig[size];
|
|
3028
3161
|
var displayLabel = label || statusConfig.label;
|
|
3029
|
-
var cssProps = {
|
|
3030
|
-
'--status-badge-bg': statusConfig.bgColor,
|
|
3031
|
-
'--status-badge-color': statusConfig.color,
|
|
3032
|
-
'--status-badge-height': sizeStyles.height,
|
|
3033
|
-
'--status-badge-padding': sizeStyles.padding,
|
|
3034
|
-
'--status-badge-font': sizeStyles.font,
|
|
3035
|
-
'--status-badge-gap': sizeStyles.gap
|
|
3036
|
-
};
|
|
3037
3162
|
return jsxs(StyledStatusBadge, {
|
|
3038
3163
|
"$status": status,
|
|
3039
3164
|
"$size": size,
|
|
@@ -3042,7 +3167,6 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
3042
3167
|
"aria-live": liveRegion ? 'polite' : undefined,
|
|
3043
3168
|
"aria-atomic": liveRegion ? 'true' : undefined,
|
|
3044
3169
|
"data-testid": dataTestId,
|
|
3045
|
-
style: cssProps,
|
|
3046
3170
|
children: [showIcon && jsx(Icon, {
|
|
3047
3171
|
name: statusConfig.icon,
|
|
3048
3172
|
size: sizeStyles.iconSize,
|
|
@@ -3054,52 +3178,59 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
3054
3178
|
});
|
|
3055
3179
|
};
|
|
3056
3180
|
StatusBadge.displayName = 'StatusBadge';
|
|
3057
|
-
var templateObject_1$
|
|
3181
|
+
var templateObject_1$t, templateObject_2$n, templateObject_3$l;
|
|
3058
3182
|
|
|
3059
|
-
var semantic$
|
|
3183
|
+
var semantic$d = tokensData.semantic;
|
|
3184
|
+
var color$4 = semantic$d.color,
|
|
3185
|
+
spacing$4 = semantic$d.spacing,
|
|
3186
|
+
border$6 = semantic$d.border,
|
|
3187
|
+
typography$1 = semantic$d.typography,
|
|
3188
|
+
size = semantic$d.size;
|
|
3189
|
+
var layout$2 = spacing$4.layout;
|
|
3190
|
+
var radius$1 = border$6.radius;
|
|
3060
3191
|
var StyledTag = styled.span.withConfig({
|
|
3061
3192
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3062
3193
|
return !prop.startsWith('$');
|
|
3063
3194
|
},
|
|
3064
3195
|
displayName: "Tag__StyledTag",
|
|
3065
3196
|
componentId: "sc-lzfmti-0"
|
|
3066
|
-
})(templateObject_1$
|
|
3197
|
+
})(templateObject_1$s || (templateObject_1$s = __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"
|
|
3067
3198
|
/**
|
|
3068
3199
|
* Tag component for categorizing and labeling content
|
|
3069
3200
|
*
|
|
3070
3201
|
* A static, non-interactive label used to categorize elements or objects in the UI.
|
|
3071
3202
|
* Tags help users quickly identify and understand content classification.
|
|
3072
|
-
*/])),
|
|
3203
|
+
*/])), radius$1.sm, size.icon.lg || '2rem', layout$2.xs, layout$2.sm, typography$1.button3, function (_a) {
|
|
3073
3204
|
var $variant = _a.$variant;
|
|
3074
3205
|
switch ($variant) {
|
|
3075
3206
|
case 'interactive':
|
|
3076
|
-
return
|
|
3207
|
+
return color$4.background['interactive-subtle'];
|
|
3077
3208
|
case 'success':
|
|
3078
|
-
return
|
|
3209
|
+
return color$4.background['success-subtle'];
|
|
3079
3210
|
case 'warning':
|
|
3080
|
-
return
|
|
3211
|
+
return color$4.background['warning-subtle'];
|
|
3081
3212
|
case 'error':
|
|
3082
|
-
return
|
|
3213
|
+
return color$4.background['error-subtle'];
|
|
3083
3214
|
case 'emphasis':
|
|
3084
|
-
return
|
|
3215
|
+
return color$4.background.emphasis;
|
|
3085
3216
|
default:
|
|
3086
|
-
return
|
|
3217
|
+
return color$4.background.surface;
|
|
3087
3218
|
}
|
|
3088
3219
|
}, function (_a) {
|
|
3089
3220
|
var $variant = _a.$variant;
|
|
3090
3221
|
switch ($variant) {
|
|
3091
3222
|
case 'interactive':
|
|
3092
|
-
return
|
|
3223
|
+
return color$4.text.interactive;
|
|
3093
3224
|
case 'success':
|
|
3094
|
-
return
|
|
3225
|
+
return color$4.text.success;
|
|
3095
3226
|
case 'warning':
|
|
3096
|
-
return
|
|
3227
|
+
return color$4.text.warning;
|
|
3097
3228
|
case 'error':
|
|
3098
|
-
return
|
|
3229
|
+
return color$4.text.error;
|
|
3099
3230
|
case 'emphasis':
|
|
3100
|
-
return
|
|
3231
|
+
return color$4.text.inverse;
|
|
3101
3232
|
default:
|
|
3102
|
-
return
|
|
3233
|
+
return color$4.text["default"];
|
|
3103
3234
|
}
|
|
3104
3235
|
}, function (_a) {
|
|
3105
3236
|
var $variant = _a.$variant,
|
|
@@ -3107,17 +3238,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
3107
3238
|
if (!$border) return 'none';
|
|
3108
3239
|
switch ($variant) {
|
|
3109
3240
|
case 'interactive':
|
|
3110
|
-
return "1px solid ".concat(
|
|
3241
|
+
return "1px solid ".concat(color$4.border.interactive);
|
|
3111
3242
|
case 'success':
|
|
3112
|
-
return "1px solid ".concat(
|
|
3243
|
+
return "1px solid ".concat(color$4.border.success);
|
|
3113
3244
|
case 'warning':
|
|
3114
|
-
return "1px solid ".concat(
|
|
3245
|
+
return "1px solid ".concat(color$4.border.warning);
|
|
3115
3246
|
case 'error':
|
|
3116
|
-
return "1px solid ".concat(
|
|
3247
|
+
return "1px solid ".concat(color$4.border.error);
|
|
3117
3248
|
case 'emphasis':
|
|
3118
|
-
return "1px solid ".concat(
|
|
3249
|
+
return "1px solid ".concat(color$4.background.emphasis);
|
|
3119
3250
|
default:
|
|
3120
|
-
return "1px solid ".concat(
|
|
3251
|
+
return "1px solid ".concat(color$4.border["default"]);
|
|
3121
3252
|
}
|
|
3122
3253
|
});
|
|
3123
3254
|
/**
|
|
@@ -3146,32 +3277,41 @@ var Tag = function Tag(_a) {
|
|
|
3146
3277
|
children: children
|
|
3147
3278
|
}));
|
|
3148
3279
|
};
|
|
3149
|
-
var templateObject_1$
|
|
3280
|
+
var templateObject_1$s;
|
|
3150
3281
|
|
|
3282
|
+
// Destructure tokens for cleaner access
|
|
3283
|
+
var semantic$c = tokensData.semantic;
|
|
3284
|
+
var color$3 = semantic$c.color,
|
|
3285
|
+
spacing$3 = semantic$c.spacing,
|
|
3286
|
+
border$5 = semantic$c.border;
|
|
3287
|
+
var layout$1 = spacing$3.layout;
|
|
3288
|
+
var background = color$3.background,
|
|
3289
|
+
icon = color$3.icon;
|
|
3290
|
+
var radius = border$5.radius;
|
|
3151
3291
|
var StyledHeader$2 = styled.div.withConfig({
|
|
3152
3292
|
displayName: "AccountCard__StyledHeader",
|
|
3153
3293
|
componentId: "sc-1erp7zn-0"
|
|
3154
|
-
})(templateObject_1$
|
|
3294
|
+
})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: ", ";\n"])), layout$1.md);
|
|
3155
3295
|
var StyledIconWrapper = styled.div.withConfig({
|
|
3156
3296
|
displayName: "AccountCard__StyledIconWrapper",
|
|
3157
3297
|
componentId: "sc-1erp7zn-1"
|
|
3158
|
-
})(templateObject_2$
|
|
3298
|
+
})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: ", ";\n color: ", ";\n"], ["\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border-radius: ", ";\n color: ", ";\n"])), background.inverse, radius.md, icon.interactive);
|
|
3159
3299
|
var StyledBalanceSection = styled.div.withConfig({
|
|
3160
3300
|
displayName: "AccountCard__StyledBalanceSection",
|
|
3161
3301
|
componentId: "sc-1erp7zn-2"
|
|
3162
|
-
})(templateObject_3$
|
|
3302
|
+
})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), layout$1.lg);
|
|
3163
3303
|
var StyledTrendSection = styled.div.withConfig({
|
|
3164
3304
|
displayName: "AccountCard__StyledTrendSection",
|
|
3165
3305
|
componentId: "sc-1erp7zn-3"
|
|
3166
|
-
})(templateObject_4$
|
|
3306
|
+
})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n margin-top: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n margin-top: ", ";\n"])), layout$1.xs, layout$1.sm);
|
|
3167
3307
|
var StyledActions$1 = styled.div.withConfig({
|
|
3168
3308
|
displayName: "AccountCard__StyledActions",
|
|
3169
3309
|
componentId: "sc-1erp7zn-4"
|
|
3170
|
-
})(templateObject_5$
|
|
3310
|
+
})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n margin-top: auto;\n \n & > * {\n flex: 1;\n }\n"], ["\n display: flex;\n gap: ", ";\n margin-top: auto;\n \n & > * {\n flex: 1;\n }\n"])), layout$1.sm);
|
|
3171
3311
|
var StyledStackWrapper = styled.div.withConfig({
|
|
3172
3312
|
displayName: "AccountCard__StyledStackWrapper",
|
|
3173
3313
|
componentId: "sc-1erp7zn-5"
|
|
3174
|
-
})(templateObject_6$
|
|
3314
|
+
})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n height: 100%;\n min-height: 168px;\n"], ["\n height: 100%;\n min-height: 168px;\n"
|
|
3175
3315
|
// Map account types to icon names (using placeholders)
|
|
3176
3316
|
])));
|
|
3177
3317
|
// Map account types to icon names (using placeholders)
|
|
@@ -3237,11 +3377,10 @@ var AccountCard = function AccountCard(_a) {
|
|
|
3237
3377
|
p: "lg",
|
|
3238
3378
|
bg: "surface",
|
|
3239
3379
|
border: "default",
|
|
3240
|
-
borderRadius: "
|
|
3241
|
-
shadow: "3",
|
|
3380
|
+
borderRadius: "xl",
|
|
3242
3381
|
transition: "all 0.2s ease",
|
|
3243
3382
|
cursor: isClickable ? 'pointer' : 'default',
|
|
3244
|
-
hoverShadow: isClickable ? '
|
|
3383
|
+
hoverShadow: isClickable ? 'floating' : undefined,
|
|
3245
3384
|
hoverTransform: isClickable ? 'translateY(-2px)' : undefined,
|
|
3246
3385
|
onClick: handleClick,
|
|
3247
3386
|
onKeyDown: handleKeyDown,
|
|
@@ -3332,86 +3471,273 @@ var AccountCard = function AccountCard(_a) {
|
|
|
3332
3471
|
})
|
|
3333
3472
|
});
|
|
3334
3473
|
};
|
|
3335
|
-
var templateObject_1$
|
|
3474
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b;
|
|
3336
3475
|
|
|
3337
3476
|
var semantic$b = tokensData.semantic,
|
|
3338
3477
|
base$9 = tokensData.base;
|
|
3339
|
-
var
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
|
|
3344
|
-
|
|
3345
|
-
|
|
3346
|
-
|
|
3347
|
-
|
|
3348
|
-
}
|
|
3349
|
-
var
|
|
3350
|
-
|
|
3351
|
-
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
|
|
3359
|
-
|
|
3360
|
-
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
|
|
3368
|
-
}
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
|
|
3391
|
-
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
|
|
3411
|
-
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
|
|
3478
|
+
var StyledListItem = styled.li.withConfig({
|
|
3479
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3480
|
+
return !prop.startsWith('$');
|
|
3481
|
+
},
|
|
3482
|
+
displayName: "ListItem__StyledListItem",
|
|
3483
|
+
componentId: "sc-1wzzt21-0"
|
|
3484
|
+
})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\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: 44px; /* Touch target minimum */\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"])), function (_a) {
|
|
3485
|
+
var $interactive = _a.$interactive;
|
|
3486
|
+
return $interactive && 'user-select: none;';
|
|
3487
|
+
}, function (_a) {
|
|
3488
|
+
var $disabled = _a.$disabled;
|
|
3489
|
+
return $disabled && "\n opacity: ".concat(base$9.opacity[50], ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
3490
|
+
}, function (_a) {
|
|
3491
|
+
var $destructive = _a.$destructive,
|
|
3492
|
+
$disabled = _a.$disabled;
|
|
3493
|
+
return $destructive && !$disabled && "\n color: ".concat(semantic$b.color.text.error, ";\n ");
|
|
3494
|
+
});
|
|
3495
|
+
var StyledItemContent = styled.div.withConfig({
|
|
3496
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3497
|
+
return !prop.startsWith('$');
|
|
3498
|
+
},
|
|
3499
|
+
displayName: "ListItem__StyledItemContent",
|
|
3500
|
+
componentId: "sc-1wzzt21-1"
|
|
3501
|
+
})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color 150ms ease;\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"], ["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color 150ms ease;\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"])), semantic$b.spacing.layout.md, function (_a) {
|
|
3502
|
+
var $spacing = _a.$spacing;
|
|
3503
|
+
return $spacing === 'compact' ? "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.md) : "".concat(semantic$b.spacing.layout.md, " ").concat(semantic$b.spacing.layout.lg);
|
|
3504
|
+
}, base$9.border.radius[2], function (_a) {
|
|
3505
|
+
var $selected = _a.$selected;
|
|
3506
|
+
return $selected ? semantic$b.color.background['interactive-subtle'] : 'transparent';
|
|
3507
|
+
}, function (_a) {
|
|
3508
|
+
var $interactive = _a.$interactive,
|
|
3509
|
+
$disabled = _a.$disabled;
|
|
3510
|
+
if ($disabled) return 'not-allowed';
|
|
3511
|
+
if ($interactive) return 'pointer';
|
|
3512
|
+
return 'default';
|
|
3513
|
+
}, function (_a) {
|
|
3514
|
+
var $interactive = _a.$interactive,
|
|
3515
|
+
$disabled = _a.$disabled,
|
|
3516
|
+
$selected = _a.$selected;
|
|
3517
|
+
return !$disabled && $interactive && "\n &:hover {\n background-color: ".concat($selected ? tokensData.component.button.variants.secondary.backgroundColor : tokensData.component.button.variants.secondary.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat(tokensData.component.button.variants.naked.backgroundColor, ";\n }\n ");
|
|
3518
|
+
}, semantic$b.color.border.interactive);
|
|
3519
|
+
var StyledIconContainer$1 = styled.div.withConfig({
|
|
3520
|
+
displayName: "ListItem__StyledIconContainer",
|
|
3521
|
+
componentId: "sc-1wzzt21-2"
|
|
3522
|
+
})(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n"])));
|
|
3523
|
+
var StyledTextContent = styled.div.withConfig({
|
|
3524
|
+
displayName: "ListItem__StyledTextContent",
|
|
3525
|
+
componentId: "sc-1wzzt21-3"
|
|
3526
|
+
})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"])), semantic$b.spacing.layout.xs);
|
|
3527
|
+
var StyledRightContent = styled.div.withConfig({
|
|
3528
|
+
displayName: "ListItem__StyledRightContent",
|
|
3529
|
+
componentId: "sc-1wzzt21-4"
|
|
3530
|
+
})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"])), semantic$b.spacing.layout.sm);
|
|
3531
|
+
var StyledChevronIcon = styled.div.withConfig({
|
|
3532
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3533
|
+
return !prop.startsWith('$');
|
|
3534
|
+
},
|
|
3535
|
+
displayName: "ListItem__StyledChevronIcon",
|
|
3536
|
+
componentId: "sc-1wzzt21-5"
|
|
3537
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"])), semantic$b.color.icon.subdued, function (_a) {
|
|
3538
|
+
var $expanded = _a.$expanded;
|
|
3539
|
+
return $expanded ? '180deg' : '0deg';
|
|
3540
|
+
});
|
|
3541
|
+
var StyledExpandedContent = styled.div.withConfig({
|
|
3542
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3543
|
+
return !prop.startsWith('$');
|
|
3544
|
+
},
|
|
3545
|
+
displayName: "ListItem__StyledExpandedContent",
|
|
3546
|
+
componentId: "sc-1wzzt21-6"
|
|
3547
|
+
})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"], ["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"])), function (_a) {
|
|
3548
|
+
var $expanded = _a.$expanded;
|
|
3549
|
+
return $expanded ? '1000px' : '0';
|
|
3550
|
+
}, function (_a) {
|
|
3551
|
+
var $expanded = _a.$expanded;
|
|
3552
|
+
return $expanded ? '1' : '0';
|
|
3553
|
+
}, function (_a) {
|
|
3554
|
+
var $expanded = _a.$expanded,
|
|
3555
|
+
$spacing = _a.$spacing;
|
|
3556
|
+
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.md, " ").concat(semantic$b.spacing.layout.sm, " 48px") : "".concat(semantic$b.spacing.layout.sm, " ").concat(semantic$b.spacing.layout.lg, " ").concat(semantic$b.spacing.layout.md, " 60px"), ";\n background-color: ").concat(semantic$b.color.background['subtle'], ";\n border-radius: ").concat(base$9.border.radius[2], ";\n margin: 0 ").concat($spacing === 'compact' ? semantic$b.spacing.layout.md : semantic$b.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$b.spacing.layout.sm : semantic$b.spacing.layout.md, ";\n ");
|
|
3557
|
+
});
|
|
3558
|
+
var ListItem = function ListItem(_a) {
|
|
3559
|
+
var primary = _a.primary,
|
|
3560
|
+
secondary = _a.secondary,
|
|
3561
|
+
badge = _a.badge,
|
|
3562
|
+
icon = _a.icon,
|
|
3563
|
+
_b = _a.expandable,
|
|
3564
|
+
expandable = _b === void 0 ? false : _b,
|
|
3565
|
+
_c = _a.expanded,
|
|
3566
|
+
expanded = _c === void 0 ? false : _c,
|
|
3567
|
+
onToggle = _a.onToggle,
|
|
3568
|
+
_d = _a.interactive,
|
|
3569
|
+
interactive = _d === void 0 ? false : _d,
|
|
3570
|
+
onClick = _a.onClick,
|
|
3571
|
+
_e = _a.disabled,
|
|
3572
|
+
disabled = _e === void 0 ? false : _e,
|
|
3573
|
+
_f = _a.selected,
|
|
3574
|
+
selected = _f === void 0 ? false : _f,
|
|
3575
|
+
_g = _a.destructive,
|
|
3576
|
+
destructive = _g === void 0 ? false : _g,
|
|
3577
|
+
_h = _a.spacing,
|
|
3578
|
+
spacing = _h === void 0 ? 'comfortable' : _h,
|
|
3579
|
+
children = _a.children,
|
|
3580
|
+
className = _a.className,
|
|
3581
|
+
dataTestId = _a["data-testid"],
|
|
3582
|
+
customRole = _a.role,
|
|
3583
|
+
ariaSelected = _a["aria-selected"],
|
|
3584
|
+
id = _a.id,
|
|
3585
|
+
customTabIndex = _a.tabIndex,
|
|
3586
|
+
customOnKeyDown = _a.onKeyDown,
|
|
3587
|
+
props = __rest(_a, ["primary", "secondary", "badge", "icon", "expandable", "expanded", "onToggle", "interactive", "onClick", "disabled", "selected", "destructive", "spacing", "children", "className", 'data-testid', "role", 'aria-selected', "id", "tabIndex", "onKeyDown"]);
|
|
3588
|
+
var isInteractive = interactive || expandable || customRole === 'option';
|
|
3589
|
+
var contentRole = customRole === 'option' ? undefined : isInteractive ? 'button' : undefined;
|
|
3590
|
+
var ariaExpanded = expandable ? expanded : undefined;
|
|
3591
|
+
var ariaDisabled = disabled ? true : undefined;
|
|
3592
|
+
var ariaCurrent = selected ? 'true' : undefined;
|
|
3593
|
+
var handleClick = function handleClick() {
|
|
3594
|
+
if (disabled) return;
|
|
3595
|
+
if (expandable && onToggle) {
|
|
3596
|
+
onToggle();
|
|
3597
|
+
} else if (onClick) {
|
|
3598
|
+
onClick();
|
|
3599
|
+
}
|
|
3600
|
+
};
|
|
3601
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
3602
|
+
if (customOnKeyDown) {
|
|
3603
|
+
customOnKeyDown(event);
|
|
3604
|
+
return;
|
|
3605
|
+
}
|
|
3606
|
+
if (disabled) return;
|
|
3607
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
3608
|
+
event.preventDefault();
|
|
3609
|
+
handleClick();
|
|
3610
|
+
}
|
|
3611
|
+
};
|
|
3612
|
+
return jsxs(StyledListItem, __assign({
|
|
3613
|
+
"$interactive": isInteractive,
|
|
3614
|
+
"$disabled": disabled,
|
|
3615
|
+
"$selected": selected,
|
|
3616
|
+
"$destructive": destructive,
|
|
3617
|
+
"$spacing": spacing,
|
|
3618
|
+
className: className,
|
|
3619
|
+
"data-testid": dataTestId,
|
|
3620
|
+
role: customRole || 'listitem',
|
|
3621
|
+
id: id,
|
|
3622
|
+
"aria-selected": ariaSelected
|
|
3623
|
+
}, props, {
|
|
3624
|
+
children: [jsxs(StyledItemContent, {
|
|
3625
|
+
"$interactive": isInteractive,
|
|
3626
|
+
"$disabled": disabled,
|
|
3627
|
+
"$selected": selected,
|
|
3628
|
+
"$destructive": destructive,
|
|
3629
|
+
"$spacing": spacing,
|
|
3630
|
+
role: contentRole,
|
|
3631
|
+
"aria-expanded": ariaExpanded,
|
|
3632
|
+
"aria-disabled": ariaDisabled,
|
|
3633
|
+
"aria-current": ariaCurrent,
|
|
3634
|
+
tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
|
|
3635
|
+
onClick: handleClick,
|
|
3636
|
+
onKeyDown: handleKeyDown,
|
|
3637
|
+
children: [icon && jsx(StyledIconContainer$1, {
|
|
3638
|
+
"aria-hidden": "true",
|
|
3639
|
+
children: icon
|
|
3640
|
+
}), jsxs(StyledTextContent, {
|
|
3641
|
+
children: [jsx(Typography, {
|
|
3642
|
+
variant: "body",
|
|
3643
|
+
color: destructive ? 'error' : 'default',
|
|
3644
|
+
children: primary
|
|
3645
|
+
}), secondary && jsx(Typography, {
|
|
3646
|
+
variant: "small",
|
|
3647
|
+
color: "subdued",
|
|
3648
|
+
children: secondary
|
|
3649
|
+
})]
|
|
3650
|
+
}), jsxs(StyledRightContent, {
|
|
3651
|
+
children: [badge, expandable && jsx(StyledChevronIcon, {
|
|
3652
|
+
"$expanded": expanded,
|
|
3653
|
+
"aria-hidden": "true",
|
|
3654
|
+
children: jsx(Icon, {
|
|
3655
|
+
name: "caretDown",
|
|
3656
|
+
size: "sm"
|
|
3657
|
+
})
|
|
3658
|
+
})]
|
|
3659
|
+
})]
|
|
3660
|
+
}), expandable && children && jsx(StyledExpandedContent, {
|
|
3661
|
+
"$spacing": spacing,
|
|
3662
|
+
"$expanded": expanded,
|
|
3663
|
+
"aria-hidden": !expanded,
|
|
3664
|
+
children: children
|
|
3665
|
+
})]
|
|
3666
|
+
}));
|
|
3667
|
+
};
|
|
3668
|
+
ListItem.displayName = 'ListItem';
|
|
3669
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8;
|
|
3670
|
+
|
|
3671
|
+
var _a$4 = tokensData.semantic,
|
|
3672
|
+
color$2 = _a$4.color,
|
|
3673
|
+
border$4 = _a$4.border,
|
|
3674
|
+
layout = _a$4.spacing.layout,
|
|
3675
|
+
motion = _a$4.motion,
|
|
3676
|
+
elevation = _a$4.elevation;
|
|
3677
|
+
var slideUp = keyframes(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"], ["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"])));
|
|
3678
|
+
var fadeIn$1 = keyframes(templateObject_2$k || (templateObject_2$k = __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"])));
|
|
3679
|
+
var StyledOverlay$1 = styled.div.withConfig({
|
|
3680
|
+
displayName: "ActionSheet__StyledOverlay",
|
|
3681
|
+
componentId: "sc-regbol-0"
|
|
3682
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9999;\n animation: ", " 0.2s ease-out;\n"], ["\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9999;\n animation: ", " 0.2s ease-out;\n"])), fadeIn$1);
|
|
3683
|
+
var StyledActionSheet = styled.div.withConfig({
|
|
3684
|
+
displayName: "ActionSheet__StyledActionSheet",
|
|
3685
|
+
componentId: "sc-regbol-1"
|
|
3686
|
+
})(templateObject_4$f || (templateObject_4$f = __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: 10000;\n animation: ", " 0.3s ease-out;\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: 10000;\n animation: ", " 0.3s ease-out;\n"])), color$2.background.subtle, border$4.radius.lg, border$4.radius.lg, elevation.overlay, slideUp);
|
|
3687
|
+
var StyledHeader$1 = styled.div.withConfig({
|
|
3688
|
+
displayName: "ActionSheet__StyledHeader",
|
|
3689
|
+
componentId: "sc-regbol-2"
|
|
3690
|
+
})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", ";\n"])), layout.lg, layout.lg, layout.md, border$4["default"]);
|
|
3691
|
+
var StyledHeaderContent = styled.div.withConfig({
|
|
3692
|
+
displayName: "ActionSheet__StyledHeaderContent",
|
|
3693
|
+
componentId: "sc-regbol-3"
|
|
3694
|
+
})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
3695
|
+
var StyledCloseButton = styled.button.withConfig({
|
|
3696
|
+
displayName: "ActionSheet__StyledCloseButton",
|
|
3697
|
+
componentId: "sc-regbol-4"
|
|
3698
|
+
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\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.sm, color$2.icon.subdued, border$4.radius.sm, motion.hover, layout.sm, color$2.icon["default"], color$2.background.surface, border$4.focus, layout.xs);
|
|
3699
|
+
var StyledActionsList = styled.ul.withConfig({
|
|
3700
|
+
displayName: "ActionSheet__StyledActionsList",
|
|
3701
|
+
componentId: "sc-regbol-5"
|
|
3702
|
+
})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n padding: ", " ", ";\n margin: 0;\n list-style: none;\n"], ["\n padding: ", " ", ";\n margin: 0;\n list-style: none;\n"
|
|
3703
|
+
/**
|
|
3704
|
+
* ActionSheet component for bottom sheet modals
|
|
3705
|
+
*
|
|
3706
|
+
* Displays a modal action sheet that slides up from the bottom,
|
|
3707
|
+
* providing a list of actions for the user to choose from.
|
|
3708
|
+
* Includes focus trapping, keyboard navigation, and accessibility features.
|
|
3709
|
+
*
|
|
3710
|
+
* @example
|
|
3711
|
+
* ```tsx
|
|
3712
|
+
* const [isOpen, setIsOpen] = useState(false)
|
|
3713
|
+
*
|
|
3714
|
+
* <ActionSheet
|
|
3715
|
+
* isOpen={isOpen}
|
|
3716
|
+
* onClose={() => setIsOpen(false)}
|
|
3717
|
+
* title="Choose an action"
|
|
3718
|
+
* actions={[
|
|
3719
|
+
* {
|
|
3720
|
+
* id: 'edit',
|
|
3721
|
+
* label: 'Edit',
|
|
3722
|
+
* icon: 'edit',
|
|
3723
|
+
* onSelect: () => console.log('Edit')
|
|
3724
|
+
* },
|
|
3725
|
+
* {
|
|
3726
|
+
* id: 'delete',
|
|
3727
|
+
* label: 'Delete',
|
|
3728
|
+
* icon: 'trash',
|
|
3729
|
+
* destructive: true,
|
|
3730
|
+
* onSelect: () => console.log('Delete')
|
|
3731
|
+
* }
|
|
3732
|
+
* ]}
|
|
3733
|
+
* />
|
|
3734
|
+
* ```
|
|
3735
|
+
*/])), layout.sm, layout.md);
|
|
3736
|
+
/**
|
|
3737
|
+
* ActionSheet component for bottom sheet modals
|
|
3738
|
+
*
|
|
3739
|
+
* Displays a modal action sheet that slides up from the bottom,
|
|
3740
|
+
* providing a list of actions for the user to choose from.
|
|
3415
3741
|
* Includes focus trapping, keyboard navigation, and accessibility features.
|
|
3416
3742
|
*
|
|
3417
3743
|
* @example
|
|
@@ -3484,11 +3810,11 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
3484
3810
|
}
|
|
3485
3811
|
};
|
|
3486
3812
|
document.addEventListener('keydown', handleKeyDown);
|
|
3487
|
-
// Focus first focusable element
|
|
3813
|
+
// Focus first focusable element (button or element with role="button")
|
|
3488
3814
|
requestAnimationFrame(function () {
|
|
3489
3815
|
var _a;
|
|
3490
|
-
var
|
|
3491
|
-
|
|
3816
|
+
var firstFocusable = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled), [role="button"][tabindex]:not([aria-disabled="true"])');
|
|
3817
|
+
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
3492
3818
|
});
|
|
3493
3819
|
// Prevent body scroll
|
|
3494
3820
|
var originalOverflow = document.body.style.overflow;
|
|
@@ -3547,49 +3873,848 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
3547
3873
|
color: "subdued",
|
|
3548
3874
|
children: description
|
|
3549
3875
|
})
|
|
3550
|
-
})]
|
|
3551
|
-
})
|
|
3552
|
-
}), showCloseButton && jsx(StyledCloseButton, {
|
|
3553
|
-
type: "button",
|
|
3554
|
-
onClick: onClose,
|
|
3555
|
-
"aria-label": "Close",
|
|
3556
|
-
children: jsx(Icon, {
|
|
3557
|
-
name: "close",
|
|
3558
|
-
size: "sm",
|
|
3559
|
-
iconColor: "subdued"
|
|
3560
|
-
})
|
|
3561
|
-
})]
|
|
3562
|
-
}), jsx(StyledActionsList, {
|
|
3563
|
-
children: actions.map(function (action, index) {
|
|
3564
|
-
return jsxs(
|
|
3565
|
-
children: [hasDestructive && index === destructiveIndex && index > 0 && jsx(
|
|
3566
|
-
|
|
3876
|
+
})]
|
|
3877
|
+
})
|
|
3878
|
+
}), showCloseButton && jsx(StyledCloseButton, {
|
|
3879
|
+
type: "button",
|
|
3880
|
+
onClick: onClose,
|
|
3881
|
+
"aria-label": "Close",
|
|
3882
|
+
children: jsx(Icon, {
|
|
3883
|
+
name: "close",
|
|
3884
|
+
size: "sm",
|
|
3885
|
+
iconColor: "subdued"
|
|
3886
|
+
})
|
|
3887
|
+
})]
|
|
3888
|
+
}), jsx(StyledActionsList, {
|
|
3889
|
+
children: actions.map(function (action, index) {
|
|
3890
|
+
return jsxs(React.Fragment, {
|
|
3891
|
+
children: [hasDestructive && index === destructiveIndex && index > 0 && jsx(Divider, {
|
|
3892
|
+
size: "small"
|
|
3893
|
+
}), jsx(ListItem, {
|
|
3894
|
+
primary: action.label,
|
|
3895
|
+
icon: action.icon && jsx(Icon, {
|
|
3896
|
+
name: action.icon,
|
|
3897
|
+
size: "md",
|
|
3898
|
+
iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
|
|
3899
|
+
}),
|
|
3900
|
+
interactive: true,
|
|
3901
|
+
onClick: function onClick() {
|
|
3902
|
+
return handleActionClick(action);
|
|
3903
|
+
},
|
|
3904
|
+
disabled: action.disabled,
|
|
3905
|
+
destructive: action.destructive,
|
|
3906
|
+
spacing: "compact"
|
|
3907
|
+
})]
|
|
3908
|
+
}, action.id);
|
|
3909
|
+
})
|
|
3910
|
+
})]
|
|
3911
|
+
})]
|
|
3912
|
+
}), document.body);
|
|
3913
|
+
};
|
|
3914
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$5;
|
|
3915
|
+
|
|
3916
|
+
function detectSpeechRecognitionConstructor(targetWindow) {
|
|
3917
|
+
if (!targetWindow) return null;
|
|
3918
|
+
var candidateWindow = targetWindow;
|
|
3919
|
+
if (candidateWindow.SpeechRecognition) {
|
|
3920
|
+
return candidateWindow.SpeechRecognition;
|
|
3921
|
+
}
|
|
3922
|
+
if (candidateWindow.webkitSpeechRecognition) {
|
|
3923
|
+
return candidateWindow.webkitSpeechRecognition;
|
|
3924
|
+
}
|
|
3925
|
+
return null;
|
|
3926
|
+
}
|
|
3927
|
+
function normalizeTranscript(input) {
|
|
3928
|
+
return input.replace(/\s+/g, ' ').trim();
|
|
3929
|
+
}
|
|
3930
|
+
function mapSpeechErrorCode(error) {
|
|
3931
|
+
switch (error) {
|
|
3932
|
+
case 'not-allowed':
|
|
3933
|
+
case 'service-not-allowed':
|
|
3934
|
+
return 'not-allowed';
|
|
3935
|
+
case 'no-speech':
|
|
3936
|
+
return 'no-speech';
|
|
3937
|
+
case 'audio-capture':
|
|
3938
|
+
return 'audio-capture';
|
|
3939
|
+
case 'aborted':
|
|
3940
|
+
return 'aborted';
|
|
3941
|
+
default:
|
|
3942
|
+
return 'unknown';
|
|
3943
|
+
}
|
|
3944
|
+
}
|
|
3945
|
+
function defaultVoiceErrorMessage(code) {
|
|
3946
|
+
switch (code) {
|
|
3947
|
+
case 'not-supported':
|
|
3948
|
+
return 'Voice input is not supported in this browser. Use Chrome or Edge.';
|
|
3949
|
+
case 'not-allowed':
|
|
3950
|
+
return 'Microphone permission denied. Allow access and try again.';
|
|
3951
|
+
case 'no-speech':
|
|
3952
|
+
return 'No speech detected. Try again.';
|
|
3953
|
+
case 'audio-capture':
|
|
3954
|
+
return 'No microphone device detected. Check your microphone and try again.';
|
|
3955
|
+
case 'aborted':
|
|
3956
|
+
return 'Voice input was stopped.';
|
|
3957
|
+
default:
|
|
3958
|
+
return 'Voice input failed. Try again.';
|
|
3959
|
+
}
|
|
3960
|
+
}
|
|
3961
|
+
|
|
3962
|
+
var textDrivenState = function textDrivenState(hasText) {
|
|
3963
|
+
return hasText ? 'typing' : 'idle';
|
|
3964
|
+
};
|
|
3965
|
+
function agentInputStateTransition(currentState, event) {
|
|
3966
|
+
if (currentState === 'disabled') {
|
|
3967
|
+
return 'disabled';
|
|
3968
|
+
}
|
|
3969
|
+
switch (event.type) {
|
|
3970
|
+
case 'INPUT_CHANGE':
|
|
3971
|
+
if (currentState === 'listening' || currentState === 'processingFinalTranscript' || currentState === 'submitting') {
|
|
3972
|
+
return currentState;
|
|
3973
|
+
}
|
|
3974
|
+
return textDrivenState(event.hasText);
|
|
3975
|
+
case 'MIC_START':
|
|
3976
|
+
if (currentState === 'idle' || currentState === 'typing') {
|
|
3977
|
+
return 'listening';
|
|
3978
|
+
}
|
|
3979
|
+
return currentState;
|
|
3980
|
+
case 'VOICE_INTERIM':
|
|
3981
|
+
if (currentState === 'listening') {
|
|
3982
|
+
return 'listening';
|
|
3983
|
+
}
|
|
3984
|
+
return currentState;
|
|
3985
|
+
case 'VOICE_FINAL':
|
|
3986
|
+
if (currentState === 'listening') {
|
|
3987
|
+
return 'processingFinalTranscript';
|
|
3988
|
+
}
|
|
3989
|
+
return currentState;
|
|
3990
|
+
case 'MIC_STOP':
|
|
3991
|
+
if (currentState === 'listening') {
|
|
3992
|
+
return textDrivenState(event.hasText);
|
|
3993
|
+
}
|
|
3994
|
+
return currentState;
|
|
3995
|
+
case 'SUBMIT':
|
|
3996
|
+
return 'submitting';
|
|
3997
|
+
case 'SUBMIT_SUCCESS':
|
|
3998
|
+
return 'idle';
|
|
3999
|
+
case 'SUBMIT_ERROR':
|
|
4000
|
+
return 'error';
|
|
4001
|
+
case 'VOICE_ERROR':
|
|
4002
|
+
case 'TIMEOUT_NO_SPEECH':
|
|
4003
|
+
return 'error';
|
|
4004
|
+
case 'RESET_ERROR':
|
|
4005
|
+
if (currentState === 'error') {
|
|
4006
|
+
return textDrivenState(event.hasText);
|
|
4007
|
+
}
|
|
4008
|
+
return currentState;
|
|
4009
|
+
default:
|
|
4010
|
+
return currentState;
|
|
4011
|
+
}
|
|
4012
|
+
}
|
|
4013
|
+
|
|
4014
|
+
var semantic$a = tokensData.semantic,
|
|
4015
|
+
base$8 = tokensData.base,
|
|
4016
|
+
component$1 = tokensData.component;
|
|
4017
|
+
var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
|
|
4018
|
+
var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
|
|
4019
|
+
var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
|
|
4020
|
+
var pulseRing = keyframes(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n 0% {\n transform: scale(1);\n opacity: 0.4;\n }\n 70% {\n transform: scale(1.08);\n opacity: 0;\n }\n 100% {\n transform: scale(1.08);\n opacity: 0;\n }\n"], ["\n 0% {\n transform: scale(1);\n opacity: 0.4;\n }\n 70% {\n transform: scale(1.08);\n opacity: 0;\n }\n 100% {\n transform: scale(1.08);\n opacity: 0;\n }\n"])));
|
|
4021
|
+
var Container = styled.div.withConfig({
|
|
4022
|
+
displayName: "AgentInput__Container",
|
|
4023
|
+
componentId: "sc-fhl996-0"
|
|
4024
|
+
})(templateObject_2$j || (templateObject_2$j = __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"])), base$8.spacing[2]);
|
|
4025
|
+
var ControlsRow = styled.div.withConfig({
|
|
4026
|
+
displayName: "AgentInput__ControlsRow",
|
|
4027
|
+
componentId: "sc-fhl996-1"
|
|
4028
|
+
})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4029
|
+
var InputShell = styled.div.withConfig({
|
|
4030
|
+
displayName: "AgentInput__InputShell",
|
|
4031
|
+
componentId: "sc-fhl996-2"
|
|
4032
|
+
})(templateObject_4$e || (templateObject_4$e = __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 200ms ease-in-out, outline 200ms ease-in-out;\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 200ms ease-in-out, outline 200ms ease-in-out;\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"])), base$8.spacing[2], semantic$a.spacing.layout.xs, semantic$a.spacing.layout.sm, semantic$a.spacing.layout.xs, component$1.input["default"].paddingX, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$a.border.radius['3xl'], semantic$a.elevation.raised, 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);
|
|
4033
|
+
var Input = styled.input.withConfig({
|
|
4034
|
+
displayName: "AgentInput__Input",
|
|
4035
|
+
componentId: "sc-fhl996-3"
|
|
4036
|
+
})(templateObject_5$a || (templateObject_5$a = __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"])), base$8.spacing[12], semantic$a.typography.body, semantic$a.color.text["default"], semantic$a.color.text.subdued, semantic$a.color.text.disabled);
|
|
4037
|
+
var InputActions = styled.div.withConfig({
|
|
4038
|
+
displayName: "AgentInput__InputActions",
|
|
4039
|
+
componentId: "sc-fhl996-4"
|
|
4040
|
+
})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"])), semantic$a.spacing.layout.xs);
|
|
4041
|
+
var CircularActionIconButton = styled(IconButton).withConfig({
|
|
4042
|
+
displayName: "AgentInput__CircularActionIconButton",
|
|
4043
|
+
componentId: "sc-fhl996-5"
|
|
4044
|
+
})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$a.border.radius.circle);
|
|
4045
|
+
var InputWrapper = styled.div.withConfig({
|
|
4046
|
+
displayName: "AgentInput__InputWrapper",
|
|
4047
|
+
componentId: "sc-fhl996-6"
|
|
4048
|
+
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n"], ["\n flex: 1;\n min-width: 0;\n"])));
|
|
4049
|
+
var MicButtonWrapper = styled.div.withConfig({
|
|
4050
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4051
|
+
return !prop.startsWith('$');
|
|
4052
|
+
},
|
|
4053
|
+
displayName: "AgentInput__MicButtonWrapper",
|
|
4054
|
+
componentId: "sc-fhl996-7"
|
|
4055
|
+
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n &::before {\n animation: none;\n }\n }\n"], ["\n position: relative;\n display: inline-flex;\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n &::before {\n animation: none;\n }\n }\n"])), function (_a) {
|
|
4056
|
+
var $isListening = _a.$isListening,
|
|
4057
|
+
$reducedMotion = _a.$reducedMotion;
|
|
4058
|
+
return $isListening && !$reducedMotion && css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n &::before {\n content: '';\n position: absolute;\n inset: -", ";\n border: ", " solid ", ";\n border-radius: ", ";\n animation: ", " 1400ms ease-out infinite;\n pointer-events: none;\n }\n "], ["\n &::before {\n content: '';\n position: absolute;\n inset: -", ";\n border: ", " solid ", ";\n border-radius: ", ";\n animation: ", " 1400ms ease-out infinite;\n pointer-events: none;\n }\n "])), base$8.spacing[1], base$8.border.width[1], semantic$a.color.border.interactive, base$8.border.radius[4], pulseRing);
|
|
4059
|
+
});
|
|
4060
|
+
var StatusRow = styled.div.withConfig({
|
|
4061
|
+
displayName: "AgentInput__StatusRow",
|
|
4062
|
+
componentId: "sc-fhl996-8"
|
|
4063
|
+
})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"])), base$8.spacing[3], base$8.spacing[6]);
|
|
4064
|
+
var StatusText = styled.div.withConfig({
|
|
4065
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4066
|
+
return !prop.startsWith('$');
|
|
4067
|
+
},
|
|
4068
|
+
displayName: "AgentInput__StatusText",
|
|
4069
|
+
componentId: "sc-fhl996-9"
|
|
4070
|
+
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\npadding-left: ", ";\n color: ", ";\n"], ["\npadding-left: ", ";\n color: ", ";\n"])), semantic$a.spacing.layout.xl, function (_a) {
|
|
4071
|
+
var $isError = _a.$isError;
|
|
4072
|
+
return $isError ? semantic$a.color.text.error : semantic$a.color.text.subdued;
|
|
4073
|
+
});
|
|
4074
|
+
var StatusAnnouncement = styled.div.withConfig({
|
|
4075
|
+
displayName: "AgentInput__StatusAnnouncement",
|
|
4076
|
+
componentId: "sc-fhl996-10"
|
|
4077
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
4078
|
+
var MeterContainer = styled.div.withConfig({
|
|
4079
|
+
displayName: "AgentInput__MeterContainer",
|
|
4080
|
+
componentId: "sc-fhl996-11"
|
|
4081
|
+
})(templateObject_14$1 || (templateObject_14$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"])), base$8.spacing[1], base$8.spacing[4]);
|
|
4082
|
+
var MeterBar = styled.div.withConfig({
|
|
4083
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4084
|
+
return !prop.startsWith('$');
|
|
4085
|
+
},
|
|
4086
|
+
displayName: "AgentInput__MeterBar",
|
|
4087
|
+
componentId: "sc-fhl996-12"
|
|
4088
|
+
})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"], ["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"])), base$8.spacing[1], base$8.border.radius[1], semantic$a.color.background.interactive, function (_a) {
|
|
4089
|
+
var $height = _a.$height;
|
|
4090
|
+
return "".concat($height * 100, "%");
|
|
4091
|
+
});
|
|
4092
|
+
var VisuallyHiddenLabel = styled.label.withConfig({
|
|
4093
|
+
displayName: "AgentInput__VisuallyHiddenLabel",
|
|
4094
|
+
componentId: "sc-fhl996-13"
|
|
4095
|
+
})(templateObject_16$1 || (templateObject_16$1 = __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"])));
|
|
4096
|
+
function getInitialState(hasText) {
|
|
4097
|
+
return hasText ? 'typing' : 'idle';
|
|
4098
|
+
}
|
|
4099
|
+
function createMeterBars(level) {
|
|
4100
|
+
var clampedLevel = Math.max(0, Math.min(level, 1));
|
|
4101
|
+
return [0.25 + clampedLevel * 0.75, 0.2 + clampedLevel * 0.6, 0.3 + clampedLevel * 0.7, 0.2 + clampedLevel * 0.5];
|
|
4102
|
+
}
|
|
4103
|
+
var AgentInput = function AgentInput(_a) {
|
|
4104
|
+
var value = _a.value,
|
|
4105
|
+
_b = _a.defaultValue,
|
|
4106
|
+
defaultValue = _b === void 0 ? '' : _b,
|
|
4107
|
+
onChange = _a.onChange,
|
|
4108
|
+
onSubmit = _a.onSubmit,
|
|
4109
|
+
_c = _a.placeholder,
|
|
4110
|
+
placeholder = _c === void 0 ? 'Ask a question' : _c,
|
|
4111
|
+
_d = _a.disabled,
|
|
4112
|
+
disabled = _d === void 0 ? false : _d,
|
|
4113
|
+
isSubmitting = _a.isSubmitting,
|
|
4114
|
+
_e = _a.enableVoice,
|
|
4115
|
+
enableVoice = _e === void 0 ? true : _e,
|
|
4116
|
+
_f = _a.autoSubmitOnVoiceFinal,
|
|
4117
|
+
autoSubmitOnVoiceFinal = _f === void 0 ? true : _f,
|
|
4118
|
+
_g = _a.voiceLanguage,
|
|
4119
|
+
voiceLanguage = _g === void 0 ? 'en-AU' : _g,
|
|
4120
|
+
_h = _a.noSpeechTimeoutMs,
|
|
4121
|
+
noSpeechTimeoutMs = _h === void 0 ? 8000 : _h,
|
|
4122
|
+
onVoiceStart = _a.onVoiceStart,
|
|
4123
|
+
onVoiceStop = _a.onVoiceStop,
|
|
4124
|
+
onVoiceInterim = _a.onVoiceInterim,
|
|
4125
|
+
onVoiceFinal = _a.onVoiceFinal,
|
|
4126
|
+
onVoiceError = _a.onVoiceError,
|
|
4127
|
+
statusMessage = _a.statusMessage,
|
|
4128
|
+
errorMessage = _a.errorMessage,
|
|
4129
|
+
_j = _a.label,
|
|
4130
|
+
label = _j === void 0 ? 'Agent input' : _j,
|
|
4131
|
+
dataTestId = _a["data-testid"];
|
|
4132
|
+
var isControlled = value !== undefined;
|
|
4133
|
+
var _k = useState(defaultValue),
|
|
4134
|
+
internalValue = _k[0],
|
|
4135
|
+
setInternalValue = _k[1];
|
|
4136
|
+
var _l = useState(getInitialState(normalizeTranscript(value !== null && value !== void 0 ? value : defaultValue).length > 0)),
|
|
4137
|
+
machineState = _l[0],
|
|
4138
|
+
setMachineState = _l[1];
|
|
4139
|
+
var _m = useState(''),
|
|
4140
|
+
interimTranscript = _m[0],
|
|
4141
|
+
setInterimTranscript = _m[1];
|
|
4142
|
+
var _o = useState(false),
|
|
4143
|
+
internalSubmitting = _o[0],
|
|
4144
|
+
setInternalSubmitting = _o[1];
|
|
4145
|
+
var _p = useState(undefined),
|
|
4146
|
+
internalErrorMessage = _p[0],
|
|
4147
|
+
setInternalErrorMessage = _p[1];
|
|
4148
|
+
var _q = useState(false),
|
|
4149
|
+
voiceSupported = _q[0],
|
|
4150
|
+
setVoiceSupported = _q[1];
|
|
4151
|
+
var _r = useState(false),
|
|
4152
|
+
prefersReducedMotion = _r[0],
|
|
4153
|
+
setPrefersReducedMotion = _r[1];
|
|
4154
|
+
var _s = useState(0),
|
|
4155
|
+
meterLevel = _s[0],
|
|
4156
|
+
setMeterLevel = _s[1];
|
|
4157
|
+
var recognitionRef = useRef(null);
|
|
4158
|
+
var noSpeechTimeoutRef = useRef(null);
|
|
4159
|
+
var isStoppingRef = useRef(false);
|
|
4160
|
+
var hasSubmittedVoiceFinalRef = useRef(false);
|
|
4161
|
+
var audioStreamRef = useRef(null);
|
|
4162
|
+
var audioContextRef = useRef(null);
|
|
4163
|
+
var meterRafRef = useRef(null);
|
|
4164
|
+
var inputId = useId();
|
|
4165
|
+
var statusId = "".concat(inputId, "-status");
|
|
4166
|
+
var currentValue = isControlled ? value !== null && value !== void 0 ? value : '' : internalValue;
|
|
4167
|
+
var hasText = normalizeTranscript(currentValue).length > 0;
|
|
4168
|
+
var effectiveSubmitting = isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : internalSubmitting;
|
|
4169
|
+
var effectiveState = disabled ? 'disabled' : machineState;
|
|
4170
|
+
var isListening = effectiveState === 'listening';
|
|
4171
|
+
var hasVoice = enableVoice && voiceSupported;
|
|
4172
|
+
var updateMachineState = useCallback(function (event) {
|
|
4173
|
+
setMachineState(function (previousState) {
|
|
4174
|
+
return agentInputStateTransition(previousState, event);
|
|
4175
|
+
});
|
|
4176
|
+
}, []);
|
|
4177
|
+
var updateValue = useCallback(function (nextValue) {
|
|
4178
|
+
if (!isControlled) {
|
|
4179
|
+
setInternalValue(nextValue);
|
|
4180
|
+
}
|
|
4181
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
|
|
4182
|
+
}, [isControlled, onChange]);
|
|
4183
|
+
var clearNoSpeechTimeout = useCallback(function () {
|
|
4184
|
+
if (noSpeechTimeoutRef.current) {
|
|
4185
|
+
window.clearTimeout(noSpeechTimeoutRef.current);
|
|
4186
|
+
noSpeechTimeoutRef.current = null;
|
|
4187
|
+
}
|
|
4188
|
+
}, []);
|
|
4189
|
+
var stopMeter = useCallback(function () {
|
|
4190
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4191
|
+
return __generator(this, function (_a) {
|
|
4192
|
+
switch (_a.label) {
|
|
4193
|
+
case 0:
|
|
4194
|
+
if (meterRafRef.current) {
|
|
4195
|
+
window.cancelAnimationFrame(meterRafRef.current);
|
|
4196
|
+
meterRafRef.current = null;
|
|
4197
|
+
}
|
|
4198
|
+
if (audioStreamRef.current) {
|
|
4199
|
+
audioStreamRef.current.getTracks().forEach(function (track) {
|
|
4200
|
+
return track.stop();
|
|
4201
|
+
});
|
|
4202
|
+
audioStreamRef.current = null;
|
|
4203
|
+
}
|
|
4204
|
+
if (!audioContextRef.current) return [3 /*break*/, 2];
|
|
4205
|
+
return [4 /*yield*/, audioContextRef.current.close()];
|
|
4206
|
+
case 1:
|
|
4207
|
+
_a.sent();
|
|
4208
|
+
audioContextRef.current = null;
|
|
4209
|
+
_a.label = 2;
|
|
4210
|
+
case 2:
|
|
4211
|
+
setMeterLevel(0);
|
|
4212
|
+
return [2 /*return*/];
|
|
4213
|
+
}
|
|
4214
|
+
});
|
|
4215
|
+
});
|
|
4216
|
+
}, []);
|
|
4217
|
+
var startMeter = useCallback(function () {
|
|
4218
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4219
|
+
var stream, audioContext, analyser_1, source, data_1, _loop_;
|
|
4220
|
+
var _b;
|
|
4221
|
+
return __generator(this, function (_c) {
|
|
4222
|
+
switch (_c.label) {
|
|
4223
|
+
case 0:
|
|
4224
|
+
if (prefersReducedMotion || !((_b = navigator === null || navigator === void 0 ? void 0 : navigator.mediaDevices) === null || _b === void 0 ? void 0 : _b.getUserMedia)) {
|
|
4225
|
+
return [2 /*return*/];
|
|
4226
|
+
}
|
|
4227
|
+
_c.label = 1;
|
|
4228
|
+
case 1:
|
|
4229
|
+
_c.trys.push([1, 3,, 4]);
|
|
4230
|
+
return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
|
|
4231
|
+
audio: true
|
|
4232
|
+
})];
|
|
4233
|
+
case 2:
|
|
4234
|
+
stream = _c.sent();
|
|
4235
|
+
audioContext = new AudioContext();
|
|
4236
|
+
analyser_1 = audioContext.createAnalyser();
|
|
4237
|
+
analyser_1.fftSize = 256;
|
|
4238
|
+
source = audioContext.createMediaStreamSource(stream);
|
|
4239
|
+
source.connect(analyser_1);
|
|
4240
|
+
data_1 = new Uint8Array(analyser_1.frequencyBinCount);
|
|
4241
|
+
audioStreamRef.current = stream;
|
|
4242
|
+
audioContextRef.current = audioContext;
|
|
4243
|
+
_loop_ = function loop_1() {
|
|
4244
|
+
analyser_1.getByteTimeDomainData(data_1);
|
|
4245
|
+
var sum = 0;
|
|
4246
|
+
for (var index = 0; index < data_1.length; index += 1) {
|
|
4247
|
+
var centered = data_1[index] / 128 - 1;
|
|
4248
|
+
sum += centered * centered;
|
|
4249
|
+
}
|
|
4250
|
+
var rms = Math.sqrt(sum / data_1.length);
|
|
4251
|
+
var nextLevel = Math.max(0.05, Math.min(rms * 3, 1));
|
|
4252
|
+
setMeterLevel(nextLevel);
|
|
4253
|
+
meterRafRef.current = window.requestAnimationFrame(_loop_);
|
|
4254
|
+
};
|
|
4255
|
+
meterRafRef.current = window.requestAnimationFrame(_loop_);
|
|
4256
|
+
return [3 /*break*/, 4];
|
|
4257
|
+
case 3:
|
|
4258
|
+
_c.sent();
|
|
4259
|
+
setMeterLevel(0);
|
|
4260
|
+
return [3 /*break*/, 4];
|
|
4261
|
+
case 4:
|
|
4262
|
+
return [2 /*return*/];
|
|
4263
|
+
}
|
|
4264
|
+
});
|
|
4265
|
+
});
|
|
4266
|
+
}, [prefersReducedMotion]);
|
|
4267
|
+
var emitVoiceError = useCallback(function (code, fallback) {
|
|
4268
|
+
var message = fallback !== null && fallback !== void 0 ? fallback : defaultVoiceErrorMessage(code);
|
|
4269
|
+
setInternalErrorMessage(message);
|
|
4270
|
+
updateMachineState({
|
|
4271
|
+
type: 'VOICE_ERROR'
|
|
4272
|
+
});
|
|
4273
|
+
onVoiceError === null || onVoiceError === void 0 ? void 0 : onVoiceError({
|
|
4274
|
+
code: code,
|
|
4275
|
+
message: message
|
|
4276
|
+
});
|
|
4277
|
+
}, [onVoiceError, updateMachineState]);
|
|
4278
|
+
var submitPayload = useCallback(function (rawText, source) {
|
|
4279
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4280
|
+
var text;
|
|
4281
|
+
return __generator(this, function (_b) {
|
|
4282
|
+
switch (_b.label) {
|
|
4283
|
+
case 0:
|
|
4284
|
+
text = normalizeTranscript(rawText);
|
|
4285
|
+
if (!text || disabled || effectiveSubmitting) {
|
|
4286
|
+
return [2 /*return*/];
|
|
4287
|
+
}
|
|
4288
|
+
updateMachineState({
|
|
4289
|
+
type: 'SUBMIT'
|
|
4290
|
+
});
|
|
4291
|
+
setInternalErrorMessage(undefined);
|
|
4292
|
+
if (isSubmitting === undefined) {
|
|
4293
|
+
setInternalSubmitting(true);
|
|
4294
|
+
}
|
|
4295
|
+
_b.label = 1;
|
|
4296
|
+
case 1:
|
|
4297
|
+
_b.trys.push([1, 3, 4, 5]);
|
|
4298
|
+
return [4 /*yield*/, onSubmit({
|
|
4299
|
+
text: text,
|
|
4300
|
+
source: source,
|
|
4301
|
+
timestamp: new Date().toISOString()
|
|
4302
|
+
})];
|
|
4303
|
+
case 2:
|
|
4304
|
+
_b.sent();
|
|
4305
|
+
updateMachineState({
|
|
4306
|
+
type: 'SUBMIT_SUCCESS'
|
|
4307
|
+
});
|
|
4308
|
+
setInterimTranscript('');
|
|
4309
|
+
updateValue('');
|
|
4310
|
+
return [3 /*break*/, 5];
|
|
4311
|
+
case 3:
|
|
4312
|
+
_b.sent();
|
|
4313
|
+
updateMachineState({
|
|
4314
|
+
type: 'SUBMIT_ERROR'
|
|
4315
|
+
});
|
|
4316
|
+
if (source === 'voice-final') {
|
|
4317
|
+
updateValue(text);
|
|
4318
|
+
}
|
|
4319
|
+
setInternalErrorMessage('Submission failed. Please try again.');
|
|
4320
|
+
return [3 /*break*/, 5];
|
|
4321
|
+
case 4:
|
|
4322
|
+
if (isSubmitting === undefined) {
|
|
4323
|
+
setInternalSubmitting(false);
|
|
4324
|
+
}
|
|
4325
|
+
return [7 /*endfinally*/];
|
|
4326
|
+
case 5:
|
|
4327
|
+
return [2 /*return*/];
|
|
4328
|
+
}
|
|
4329
|
+
});
|
|
4330
|
+
});
|
|
4331
|
+
}, [disabled, effectiveSubmitting, isSubmitting, onSubmit, updateMachineState, updateValue]);
|
|
4332
|
+
var stopListening = useCallback(function (emitStopEvent_1) {
|
|
4333
|
+
var args_1 = [];
|
|
4334
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
4335
|
+
args_1[_i - 1] = arguments[_i];
|
|
4336
|
+
}
|
|
4337
|
+
return __awaiter(void 0, __spreadArray([emitStopEvent_1], args_1, true), void 0, function (emitStopEvent, preserveState) {
|
|
4338
|
+
if (preserveState === void 0) {
|
|
4339
|
+
preserveState = false;
|
|
4340
|
+
}
|
|
4341
|
+
return __generator(this, function (_a) {
|
|
4342
|
+
switch (_a.label) {
|
|
4343
|
+
case 0:
|
|
4344
|
+
isStoppingRef.current = true;
|
|
4345
|
+
clearNoSpeechTimeout();
|
|
4346
|
+
setInterimTranscript('');
|
|
4347
|
+
if (recognitionRef.current) {
|
|
4348
|
+
try {
|
|
4349
|
+
recognitionRef.current.stop();
|
|
4350
|
+
} catch (_b) {
|
|
4351
|
+
// no-op
|
|
4352
|
+
}
|
|
4353
|
+
}
|
|
4354
|
+
return [4 /*yield*/, stopMeter()];
|
|
4355
|
+
case 1:
|
|
4356
|
+
_a.sent();
|
|
4357
|
+
if (emitStopEvent) {
|
|
4358
|
+
onVoiceStop === null || onVoiceStop === void 0 ? void 0 : onVoiceStop();
|
|
4359
|
+
}
|
|
4360
|
+
if (!preserveState) {
|
|
4361
|
+
updateMachineState({
|
|
4362
|
+
type: 'MIC_STOP',
|
|
4363
|
+
hasText: hasText
|
|
4364
|
+
});
|
|
4365
|
+
}
|
|
4366
|
+
isStoppingRef.current = false;
|
|
4367
|
+
return [2 /*return*/];
|
|
4368
|
+
}
|
|
4369
|
+
});
|
|
4370
|
+
});
|
|
4371
|
+
}, [clearNoSpeechTimeout, hasText, onVoiceStop, stopMeter, updateMachineState]);
|
|
4372
|
+
var onNoSpeechTimeout = useCallback(function () {
|
|
4373
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4374
|
+
var message;
|
|
4375
|
+
return __generator(this, function (_a) {
|
|
4376
|
+
switch (_a.label) {
|
|
4377
|
+
case 0:
|
|
4378
|
+
clearNoSpeechTimeout();
|
|
4379
|
+
updateMachineState({
|
|
4380
|
+
type: 'TIMEOUT_NO_SPEECH'
|
|
4381
|
+
});
|
|
4382
|
+
message = defaultVoiceErrorMessage('no-speech');
|
|
4383
|
+
setInternalErrorMessage(message);
|
|
4384
|
+
onVoiceError === null || onVoiceError === void 0 ? void 0 : onVoiceError({
|
|
4385
|
+
code: 'no-speech',
|
|
4386
|
+
message: message
|
|
4387
|
+
});
|
|
4388
|
+
return [4 /*yield*/, stopListening(true, true)];
|
|
4389
|
+
case 1:
|
|
4390
|
+
_a.sent();
|
|
4391
|
+
return [2 /*return*/];
|
|
4392
|
+
}
|
|
4393
|
+
});
|
|
4394
|
+
});
|
|
4395
|
+
}, [clearNoSpeechTimeout, onVoiceError, stopListening, updateMachineState]);
|
|
4396
|
+
var beginListening = useCallback(function () {
|
|
4397
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4398
|
+
return __generator(this, function (_b) {
|
|
4399
|
+
switch (_b.label) {
|
|
4400
|
+
case 0:
|
|
4401
|
+
if (!recognitionRef.current || disabled || effectiveSubmitting) {
|
|
4402
|
+
return [2 /*return*/];
|
|
4403
|
+
}
|
|
4404
|
+
setInternalErrorMessage(undefined);
|
|
4405
|
+
hasSubmittedVoiceFinalRef.current = false;
|
|
4406
|
+
_b.label = 1;
|
|
4407
|
+
case 1:
|
|
4408
|
+
_b.trys.push([1, 3,, 4]);
|
|
4409
|
+
recognitionRef.current.start();
|
|
4410
|
+
updateMachineState({
|
|
4411
|
+
type: 'MIC_START'
|
|
4412
|
+
});
|
|
4413
|
+
onVoiceStart === null || onVoiceStart === void 0 ? void 0 : onVoiceStart();
|
|
4414
|
+
clearNoSpeechTimeout();
|
|
4415
|
+
noSpeechTimeoutRef.current = window.setTimeout(onNoSpeechTimeout, noSpeechTimeoutMs);
|
|
4416
|
+
return [4 /*yield*/, startMeter()];
|
|
4417
|
+
case 2:
|
|
4418
|
+
_b.sent();
|
|
4419
|
+
return [3 /*break*/, 4];
|
|
4420
|
+
case 3:
|
|
4421
|
+
_b.sent();
|
|
4422
|
+
emitVoiceError('unknown');
|
|
4423
|
+
return [3 /*break*/, 4];
|
|
4424
|
+
case 4:
|
|
4425
|
+
return [2 /*return*/];
|
|
4426
|
+
}
|
|
4427
|
+
});
|
|
4428
|
+
});
|
|
4429
|
+
}, [clearNoSpeechTimeout, disabled, effectiveSubmitting, emitVoiceError, noSpeechTimeoutMs, onNoSpeechTimeout, onVoiceStart, startMeter, updateMachineState]);
|
|
4430
|
+
useEffect(function () {
|
|
4431
|
+
var constructor = detectSpeechRecognitionConstructor(window);
|
|
4432
|
+
setVoiceSupported(Boolean(constructor));
|
|
4433
|
+
if (!enableVoice || !constructor) {
|
|
4434
|
+
return;
|
|
4435
|
+
}
|
|
4436
|
+
var recognition = new constructor();
|
|
4437
|
+
recognition.lang = voiceLanguage;
|
|
4438
|
+
recognition.interimResults = true;
|
|
4439
|
+
recognition.continuous = false;
|
|
4440
|
+
recognition.onresult = function (event) {
|
|
4441
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4442
|
+
var interim, finalText, index, result, normalizedInterim, normalizedFinal;
|
|
4443
|
+
return __generator(this, function (_a) {
|
|
4444
|
+
switch (_a.label) {
|
|
4445
|
+
case 0:
|
|
4446
|
+
clearNoSpeechTimeout();
|
|
4447
|
+
noSpeechTimeoutRef.current = window.setTimeout(onNoSpeechTimeout, noSpeechTimeoutMs);
|
|
4448
|
+
interim = '';
|
|
4449
|
+
finalText = '';
|
|
4450
|
+
for (index = event.resultIndex; index < event.results.length; index += 1) {
|
|
4451
|
+
result = event.results[index];
|
|
4452
|
+
if (!result || !result[0]) continue;
|
|
4453
|
+
if (result.isFinal) {
|
|
4454
|
+
finalText += " ".concat(result[0].transcript);
|
|
4455
|
+
} else {
|
|
4456
|
+
interim += " ".concat(result[0].transcript);
|
|
4457
|
+
}
|
|
4458
|
+
}
|
|
4459
|
+
normalizedInterim = normalizeTranscript(interim);
|
|
4460
|
+
setInterimTranscript(normalizedInterim);
|
|
4461
|
+
updateMachineState({
|
|
4462
|
+
type: 'VOICE_INTERIM'
|
|
4463
|
+
});
|
|
4464
|
+
if (normalizedInterim) {
|
|
4465
|
+
onVoiceInterim === null || onVoiceInterim === void 0 ? void 0 : onVoiceInterim(normalizedInterim);
|
|
4466
|
+
}
|
|
4467
|
+
normalizedFinal = normalizeTranscript(finalText);
|
|
4468
|
+
if (!normalizedFinal || hasSubmittedVoiceFinalRef.current) {
|
|
4469
|
+
return [2 /*return*/];
|
|
4470
|
+
}
|
|
4471
|
+
hasSubmittedVoiceFinalRef.current = true;
|
|
4472
|
+
updateMachineState({
|
|
4473
|
+
type: 'VOICE_FINAL'
|
|
4474
|
+
});
|
|
4475
|
+
setInterimTranscript('');
|
|
4476
|
+
onVoiceFinal === null || onVoiceFinal === void 0 ? void 0 : onVoiceFinal(normalizedFinal);
|
|
4477
|
+
return [4 /*yield*/, stopMeter()];
|
|
4478
|
+
case 1:
|
|
4479
|
+
_a.sent();
|
|
4480
|
+
if (!autoSubmitOnVoiceFinal) return [3 /*break*/, 3];
|
|
4481
|
+
return [4 /*yield*/, submitPayload(normalizedFinal, 'voice-final')];
|
|
4482
|
+
case 2:
|
|
4483
|
+
_a.sent();
|
|
4484
|
+
return [3 /*break*/, 4];
|
|
4485
|
+
case 3:
|
|
4486
|
+
updateValue(normalizedFinal);
|
|
4487
|
+
_a.label = 4;
|
|
4488
|
+
case 4:
|
|
4489
|
+
return [2 /*return*/];
|
|
4490
|
+
}
|
|
4491
|
+
});
|
|
4492
|
+
});
|
|
4493
|
+
};
|
|
4494
|
+
recognition.onerror = function (event) {
|
|
4495
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4496
|
+
var mappedCode;
|
|
4497
|
+
return __generator(this, function (_a) {
|
|
4498
|
+
switch (_a.label) {
|
|
4499
|
+
case 0:
|
|
4500
|
+
mappedCode = mapSpeechErrorCode(event.error);
|
|
4501
|
+
emitVoiceError(mappedCode);
|
|
4502
|
+
return [4 /*yield*/, stopListening(true, true)];
|
|
4503
|
+
case 1:
|
|
4504
|
+
_a.sent();
|
|
4505
|
+
return [2 /*return*/];
|
|
4506
|
+
}
|
|
4507
|
+
});
|
|
4508
|
+
});
|
|
4509
|
+
};
|
|
4510
|
+
recognition.onend = function () {
|
|
4511
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4512
|
+
return __generator(this, function (_a) {
|
|
4513
|
+
switch (_a.label) {
|
|
4514
|
+
case 0:
|
|
4515
|
+
if (isStoppingRef.current) return [2 /*return*/];
|
|
4516
|
+
clearNoSpeechTimeout();
|
|
4517
|
+
return [4 /*yield*/, stopMeter()];
|
|
4518
|
+
case 1:
|
|
4519
|
+
_a.sent();
|
|
4520
|
+
if (!hasSubmittedVoiceFinalRef.current) {
|
|
4521
|
+
updateMachineState({
|
|
4522
|
+
type: 'MIC_STOP',
|
|
4523
|
+
hasText: hasText
|
|
4524
|
+
});
|
|
4525
|
+
}
|
|
4526
|
+
return [2 /*return*/];
|
|
4527
|
+
}
|
|
4528
|
+
});
|
|
4529
|
+
});
|
|
4530
|
+
};
|
|
4531
|
+
recognitionRef.current = recognition;
|
|
4532
|
+
return function () {
|
|
4533
|
+
var _a;
|
|
4534
|
+
clearNoSpeechTimeout();
|
|
4535
|
+
(_a = recognitionRef.current) === null || _a === void 0 ? void 0 : _a.abort();
|
|
4536
|
+
recognitionRef.current = null;
|
|
4537
|
+
stopMeter();
|
|
4538
|
+
};
|
|
4539
|
+
}, [autoSubmitOnVoiceFinal, clearNoSpeechTimeout, emitVoiceError, enableVoice, hasText, noSpeechTimeoutMs, onNoSpeechTimeout, onVoiceFinal, onVoiceInterim, stopListening, stopMeter, submitPayload, updateMachineState, updateValue, voiceLanguage]);
|
|
4540
|
+
useEffect(function () {
|
|
4541
|
+
var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
4542
|
+
var sync = function sync() {
|
|
4543
|
+
return setPrefersReducedMotion(mediaQuery.matches);
|
|
4544
|
+
};
|
|
4545
|
+
sync();
|
|
4546
|
+
mediaQuery.addEventListener('change', sync);
|
|
4547
|
+
return function () {
|
|
4548
|
+
return mediaQuery.removeEventListener('change', sync);
|
|
4549
|
+
};
|
|
4550
|
+
}, []);
|
|
4551
|
+
useEffect(function () {
|
|
4552
|
+
if (effectiveState === 'error' && !internalErrorMessage && !errorMessage) {
|
|
4553
|
+
updateMachineState({
|
|
4554
|
+
type: 'RESET_ERROR',
|
|
4555
|
+
hasText: hasText
|
|
4556
|
+
});
|
|
4557
|
+
}
|
|
4558
|
+
}, [effectiveState, errorMessage, hasText, internalErrorMessage, updateMachineState]);
|
|
4559
|
+
useEffect(function () {
|
|
4560
|
+
if (!disabled && (machineState === 'idle' || machineState === 'typing')) {
|
|
4561
|
+
updateMachineState({
|
|
4562
|
+
type: 'INPUT_CHANGE',
|
|
4563
|
+
hasText: hasText
|
|
4564
|
+
});
|
|
4565
|
+
}
|
|
4566
|
+
}, [disabled, hasText, machineState, updateMachineState]);
|
|
4567
|
+
var displayedValue = useMemo(function () {
|
|
4568
|
+
if (!interimTranscript) {
|
|
4569
|
+
return currentValue;
|
|
4570
|
+
}
|
|
4571
|
+
return normalizeTranscript([currentValue, interimTranscript].filter(Boolean).join(' '));
|
|
4572
|
+
}, [currentValue, interimTranscript]);
|
|
4573
|
+
var onTextChange = function onTextChange(event) {
|
|
4574
|
+
updateValue(event.target.value);
|
|
4575
|
+
if (effectiveState === 'error') {
|
|
4576
|
+
setInternalErrorMessage(undefined);
|
|
4577
|
+
updateMachineState({
|
|
4578
|
+
type: 'RESET_ERROR',
|
|
4579
|
+
hasText: normalizeTranscript(event.target.value).length > 0
|
|
4580
|
+
});
|
|
4581
|
+
}
|
|
4582
|
+
};
|
|
4583
|
+
var onInputKeyDown = function onInputKeyDown(event) {
|
|
4584
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4585
|
+
return __generator(this, function (_a) {
|
|
4586
|
+
switch (_a.label) {
|
|
4587
|
+
case 0:
|
|
4588
|
+
if (!(event.key === 'Escape' && isListening)) return [3 /*break*/, 2];
|
|
4589
|
+
event.preventDefault();
|
|
4590
|
+
return [4 /*yield*/, stopListening(true)];
|
|
4591
|
+
case 1:
|
|
4592
|
+
_a.sent();
|
|
4593
|
+
return [2 /*return*/];
|
|
4594
|
+
case 2:
|
|
4595
|
+
if (!(event.key === 'Enter')) return [3 /*break*/, 4];
|
|
4596
|
+
event.preventDefault();
|
|
4597
|
+
return [4 /*yield*/, submitPayload(currentValue, 'text')];
|
|
4598
|
+
case 3:
|
|
4599
|
+
_a.sent();
|
|
4600
|
+
_a.label = 4;
|
|
4601
|
+
case 4:
|
|
4602
|
+
return [2 /*return*/];
|
|
4603
|
+
}
|
|
4604
|
+
});
|
|
4605
|
+
});
|
|
4606
|
+
};
|
|
4607
|
+
var onMicToggle = function onMicToggle() {
|
|
4608
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4609
|
+
return __generator(this, function (_a) {
|
|
4610
|
+
switch (_a.label) {
|
|
4611
|
+
case 0:
|
|
4612
|
+
if (!hasVoice) return [2 /*return*/];
|
|
4613
|
+
if (!isListening) return [3 /*break*/, 2];
|
|
4614
|
+
return [4 /*yield*/, stopListening(true)];
|
|
4615
|
+
case 1:
|
|
4616
|
+
_a.sent();
|
|
4617
|
+
return [2 /*return*/];
|
|
4618
|
+
case 2:
|
|
4619
|
+
return [4 /*yield*/, beginListening()];
|
|
4620
|
+
case 3:
|
|
4621
|
+
_a.sent();
|
|
4622
|
+
return [2 /*return*/];
|
|
4623
|
+
}
|
|
4624
|
+
});
|
|
4625
|
+
});
|
|
4626
|
+
};
|
|
4627
|
+
var statusByState = {
|
|
4628
|
+
idle: statusMessage || DEFAULT_IDLE_HELPER,
|
|
4629
|
+
typing: statusMessage || DEFAULT_IDLE_HELPER,
|
|
4630
|
+
listening: statusMessage || DEFAULT_LISTENING_MESSAGE,
|
|
4631
|
+
processingFinalTranscript: statusMessage || DEFAULT_PROCESSING_MESSAGE,
|
|
4632
|
+
submitting: statusMessage || 'Submitting…',
|
|
4633
|
+
error: errorMessage || internalErrorMessage || 'Voice input failed. Try again.',
|
|
4634
|
+
disabled: statusMessage || DEFAULT_IDLE_HELPER
|
|
4635
|
+
};
|
|
4636
|
+
var unsupportedMessage = defaultVoiceErrorMessage('not-supported');
|
|
4637
|
+
var shouldShowUnsupported = enableVoice && !hasVoice;
|
|
4638
|
+
var resolvedStatus = shouldShowUnsupported ? unsupportedMessage : statusByState[effectiveState];
|
|
4639
|
+
var isStatusError = effectiveState === 'error' || shouldShowUnsupported;
|
|
4640
|
+
var meterBars = createMeterBars(meterLevel);
|
|
4641
|
+
var sendDisabled = disabled || effectiveSubmitting || normalizeTranscript(currentValue).length === 0;
|
|
4642
|
+
return jsxs(Container, {
|
|
4643
|
+
"data-testid": dataTestId,
|
|
4644
|
+
children: [jsx(VisuallyHiddenLabel, {
|
|
4645
|
+
htmlFor: inputId,
|
|
4646
|
+
children: label
|
|
4647
|
+
}), jsx(ControlsRow, {
|
|
4648
|
+
children: jsx(InputWrapper, {
|
|
4649
|
+
children: jsxs(InputShell, {
|
|
4650
|
+
"data-disabled": disabled || effectiveSubmitting,
|
|
4651
|
+
children: [jsx(Input, {
|
|
4652
|
+
id: inputId,
|
|
4653
|
+
type: "text",
|
|
4654
|
+
"aria-label": label,
|
|
4655
|
+
value: displayedValue,
|
|
4656
|
+
onChange: onTextChange,
|
|
4657
|
+
onKeyDown: onInputKeyDown,
|
|
4658
|
+
placeholder: placeholder,
|
|
4659
|
+
disabled: disabled || effectiveSubmitting,
|
|
4660
|
+
readOnly: isListening,
|
|
4661
|
+
"aria-describedby": statusId
|
|
4662
|
+
}), jsxs(InputActions, {
|
|
4663
|
+
children: [hasVoice && jsx(MicButtonWrapper, {
|
|
4664
|
+
"$isListening": isListening,
|
|
4665
|
+
"$reducedMotion": prefersReducedMotion,
|
|
4666
|
+
children: jsx(CircularActionIconButton, {
|
|
4667
|
+
variant: "naked",
|
|
4668
|
+
size: "medium",
|
|
4669
|
+
iconName: 'mic',
|
|
4670
|
+
onClick: onMicToggle,
|
|
4671
|
+
"aria-pressed": isListening,
|
|
4672
|
+
"aria-label": isListening ? 'Stop voice input' : 'Start voice input',
|
|
4673
|
+
disabled: disabled || effectiveSubmitting,
|
|
4674
|
+
type: "button"
|
|
4675
|
+
})
|
|
4676
|
+
}), jsx(CircularActionIconButton, {
|
|
4677
|
+
variant: "secondary",
|
|
4678
|
+
size: "medium",
|
|
4679
|
+
iconName: "directionUp",
|
|
3567
4680
|
onClick: function onClick() {
|
|
3568
|
-
return
|
|
4681
|
+
return submitPayload(currentValue, 'text');
|
|
3569
4682
|
},
|
|
3570
|
-
disabled:
|
|
3571
|
-
"
|
|
3572
|
-
"
|
|
3573
|
-
"aria-label": action.label,
|
|
3574
|
-
children: [action.icon && jsx(Icon, {
|
|
3575
|
-
name: action.icon,
|
|
3576
|
-
size: "md",
|
|
3577
|
-
iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
|
|
3578
|
-
}), jsx(Typography, {
|
|
3579
|
-
variant: "body",
|
|
3580
|
-
children: action.label
|
|
3581
|
-
})]
|
|
4683
|
+
disabled: sendDisabled,
|
|
4684
|
+
"aria-label": "Send message",
|
|
4685
|
+
type: "button"
|
|
3582
4686
|
})]
|
|
3583
|
-
}
|
|
4687
|
+
})]
|
|
4688
|
+
})
|
|
4689
|
+
})
|
|
4690
|
+
}), jsxs(StatusRow, {
|
|
4691
|
+
children: [jsx(StatusText, {
|
|
4692
|
+
"$isError": isStatusError,
|
|
4693
|
+
children: jsx(StatusAnnouncement, {
|
|
4694
|
+
id: statusId,
|
|
4695
|
+
role: "status",
|
|
4696
|
+
"aria-live": "polite",
|
|
4697
|
+
"aria-atomic": "true",
|
|
4698
|
+
children: jsx(Typography, {
|
|
4699
|
+
variant: "small",
|
|
4700
|
+
children: resolvedStatus
|
|
4701
|
+
})
|
|
4702
|
+
})
|
|
4703
|
+
}), isListening && !prefersReducedMotion && jsx(MeterContainer, {
|
|
4704
|
+
"aria-hidden": "true",
|
|
4705
|
+
children: meterBars.map(function (barHeight, index) {
|
|
4706
|
+
return jsx(MeterBar, {
|
|
4707
|
+
"$height": barHeight
|
|
4708
|
+
}, "meter-".concat(index));
|
|
3584
4709
|
})
|
|
3585
4710
|
})]
|
|
3586
4711
|
})]
|
|
3587
|
-
})
|
|
4712
|
+
});
|
|
3588
4713
|
};
|
|
3589
|
-
var templateObject_1$
|
|
4714
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1;
|
|
3590
4715
|
|
|
3591
|
-
var semantic$
|
|
3592
|
-
base$
|
|
4716
|
+
var semantic$9 = tokensData.semantic,
|
|
4717
|
+
base$7 = tokensData.base;
|
|
3593
4718
|
// Default icons by variant
|
|
3594
4719
|
var variantIcons = {
|
|
3595
4720
|
error: 'crossCircle',
|
|
@@ -3617,56 +4742,56 @@ var StyledAlert = styled.div.withConfig({
|
|
|
3617
4742
|
},
|
|
3618
4743
|
displayName: "Alert__StyledAlert",
|
|
3619
4744
|
componentId: "sc-18tq5d-0"
|
|
3620
|
-
})(templateObject_1$
|
|
4745
|
+
})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n align-items: ", ";\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: 1px 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 display: flex;\n align-items: ", ";\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n border: 1px 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"])), function (_a) {
|
|
3621
4746
|
var $inline = _a.$inline;
|
|
3622
4747
|
return $inline ? 'center' : 'flex-start';
|
|
3623
4748
|
}, function (_a) {
|
|
3624
4749
|
var $inline = _a.$inline;
|
|
3625
|
-
return $inline ? semantic$
|
|
4750
|
+
return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
|
|
3626
4751
|
}, function (_a) {
|
|
3627
4752
|
var $inline = _a.$inline;
|
|
3628
|
-
return $inline ? semantic$
|
|
3629
|
-
}, base$
|
|
4753
|
+
return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
|
|
4754
|
+
}, base$7.border.radius[2], function (_a) {
|
|
3630
4755
|
var $variant = _a.$variant;
|
|
3631
4756
|
switch ($variant) {
|
|
3632
4757
|
case 'error':
|
|
3633
|
-
return "\n background-color: ".concat(semantic$
|
|
4758
|
+
return "\n background-color: ".concat(semantic$9.color.background['error-subtle'], ";\n border-color: ").concat(semantic$9.color.border.error, ";\n color: ").concat(semantic$9.color.text.error, ";\n ");
|
|
3634
4759
|
case 'warning':
|
|
3635
|
-
return "\n background-color: ".concat(semantic$
|
|
4760
|
+
return "\n background-color: ".concat(semantic$9.color.background['warning-subtle'], ";\n border-color: ").concat(semantic$9.color.border.warning, ";\n color: ").concat(semantic$9.color.text.warning, ";\n ");
|
|
3636
4761
|
case 'success':
|
|
3637
|
-
return "\n background-color: ".concat(semantic$
|
|
4762
|
+
return "\n background-color: ".concat(semantic$9.color.background['success-subtle'], ";\n border-color: ").concat(semantic$9.color.border.success, ";\n color: ").concat(semantic$9.color.text.success, ";\n ");
|
|
3638
4763
|
case 'info':
|
|
3639
4764
|
default:
|
|
3640
|
-
return "\n background-color: ".concat(semantic$
|
|
4765
|
+
return "\n background-color: ".concat(semantic$9.color.background['interactive-subtle'], ";\n border-color: ").concat(semantic$9.color.border.interactive, ";\n color: ").concat(semantic$9.color.text.interactive, ";\n ");
|
|
3641
4766
|
}
|
|
3642
|
-
}, base$
|
|
4767
|
+
}, base$7.breakpoint.md, function (_a) {
|
|
3643
4768
|
var $inline = _a.$inline;
|
|
3644
|
-
return $inline ? semantic$
|
|
4769
|
+
return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.lg;
|
|
3645
4770
|
});
|
|
3646
|
-
var StyledIconContainer
|
|
4771
|
+
var StyledIconContainer = styled.div.withConfig({
|
|
3647
4772
|
displayName: "Alert__StyledIconContainer",
|
|
3648
4773
|
componentId: "sc-18tq5d-1"
|
|
3649
|
-
})(templateObject_2$
|
|
4774
|
+
})(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
3650
4775
|
var StyledContent$1 = styled.div.withConfig({
|
|
3651
4776
|
displayName: "Alert__StyledContent",
|
|
3652
4777
|
componentId: "sc-18tq5d-2"
|
|
3653
|
-
})(templateObject_3$
|
|
4778
|
+
})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"])), semantic$9.spacing.layout.xs);
|
|
3654
4779
|
var StyledTitle = styled.span.withConfig({
|
|
3655
4780
|
displayName: "Alert__StyledTitle",
|
|
3656
4781
|
componentId: "sc-18tq5d-3"
|
|
3657
|
-
})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font: ", ";\n font-weight: 600 !important;\n margin: 0;\n\tline-height: 1.125;\n"], ["\n font: ", ";\n font-weight: 600 !important;\n margin: 0;\n\tline-height: 1.125;\n"])), semantic$
|
|
4782
|
+
})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font: ", ";\n font-weight: 600 !important;\n margin: 0;\n\tline-height: 1.125;\n"], ["\n font: ", ";\n font-weight: 600 !important;\n margin: 0;\n\tline-height: 1.125;\n"])), semantic$9.typography.h6);
|
|
3658
4783
|
var StyledMessage = styled.span.withConfig({
|
|
3659
4784
|
displayName: "Alert__StyledMessage",
|
|
3660
4785
|
componentId: "sc-18tq5d-4"
|
|
3661
|
-
})(templateObject_5$
|
|
4786
|
+
})(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n font: ", ";\n\tline-height: 1.25;\n"], ["\n font: ", ";\n\tline-height: 1.25;\n"])), semantic$9.typography.body);
|
|
3662
4787
|
var StyledActions = styled.div.withConfig({
|
|
3663
4788
|
displayName: "Alert__StyledActions",
|
|
3664
4789
|
componentId: "sc-18tq5d-5"
|
|
3665
|
-
})(templateObject_6$
|
|
4790
|
+
})(templateObject_6$7 || (templateObject_6$7 = __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);
|
|
3666
4791
|
var StyledDismissButton = styled(IconButton).withConfig({
|
|
3667
4792
|
displayName: "Alert__StyledDismissButton",
|
|
3668
4793
|
componentId: "sc-18tq5d-6"
|
|
3669
|
-
})(templateObject_7$
|
|
4794
|
+
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"], ["\n margin-left: ", ";\n\tposition: absolute;\n\tright: 8px;\n\ttop: 10px;\n"])), semantic$9.spacing.layout.xs);
|
|
3670
4795
|
var Alert = function Alert(_a) {
|
|
3671
4796
|
var _b = _a.variant,
|
|
3672
4797
|
variant = _b === void 0 ? 'info' : _b,
|
|
@@ -3705,7 +4830,7 @@ var Alert = function Alert(_a) {
|
|
|
3705
4830
|
"$inline": inline,
|
|
3706
4831
|
"data-testid": dataTestId
|
|
3707
4832
|
}, props, {
|
|
3708
|
-
children: [jsx(StyledIconContainer
|
|
4833
|
+
children: [jsx(StyledIconContainer, {
|
|
3709
4834
|
"aria-hidden": "true",
|
|
3710
4835
|
children: jsx(Icon, {
|
|
3711
4836
|
name: iconName,
|
|
@@ -3734,28 +4859,28 @@ var Alert = function Alert(_a) {
|
|
|
3734
4859
|
}));
|
|
3735
4860
|
};
|
|
3736
4861
|
Alert.displayName = 'Alert';
|
|
3737
|
-
var templateObject_1$
|
|
4862
|
+
var templateObject_1$n, templateObject_2$i, templateObject_3$g, templateObject_4$d, templateObject_5$9, templateObject_6$7, templateObject_7$5;
|
|
3738
4863
|
|
|
3739
4864
|
var _a$3, _b$1, _c, _d, _e, _f;
|
|
3740
4865
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
3741
4866
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
3742
4867
|
componentId: "sc-7ouzg5-0"
|
|
3743
|
-
})(templateObject_1$
|
|
4868
|
+
})(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"], ["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"])), ((_b$1 = (_a$3 = tokensData.semantic) === null || _a$3 === void 0 ? void 0 : _a$3.border) === null || _b$1 === void 0 ? void 0 : _b$1["default"]) || '0.0625rem solid #e9ecef');
|
|
3744
4869
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
3745
4870
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
3746
4871
|
componentId: "sc-7ouzg5-1"
|
|
3747
|
-
})(templateObject_2$
|
|
4872
|
+
})(templateObject_2$h || (templateObject_2$h = __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: 180px;\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: 180px;\n }\n\n > a {\n display: inline-flex;\n align-items: center;\n text-decoration: underline;\n color: ", ";\n }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
|
|
3748
4873
|
var BreadcrumbSeparator = styled.span.withConfig({
|
|
3749
4874
|
displayName: "Breadcrumbs__BreadcrumbSeparator",
|
|
3750
4875
|
componentId: "sc-7ouzg5-2"
|
|
3751
|
-
})(templateObject_3$
|
|
4876
|
+
})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n opacity: 0.5;\n"], ["\n display: inline-flex;\n align-items: center;\n opacity: 0.5;\n"])));
|
|
3752
4877
|
var isInternalUrl = function isInternalUrl(url) {
|
|
3753
4878
|
return url.startsWith('/') && !url.startsWith('http');
|
|
3754
4879
|
};
|
|
3755
4880
|
var Breadcrumbs = function Breadcrumbs(_a) {
|
|
3756
4881
|
var breadcrumbs = _a.breadcrumbs,
|
|
3757
4882
|
LinkComponent = _a.linkComponent;
|
|
3758
|
-
return jsx(Container, {
|
|
4883
|
+
return jsx(Container$1, {
|
|
3759
4884
|
children: jsx(BreadcrumbNavStyled, {
|
|
3760
4885
|
"aria-label": "breadcrumb",
|
|
3761
4886
|
children: jsx("ol", {
|
|
@@ -3796,12 +4921,12 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
3796
4921
|
})
|
|
3797
4922
|
});
|
|
3798
4923
|
};
|
|
3799
|
-
var templateObject_1$
|
|
4924
|
+
var templateObject_1$m, templateObject_2$h, templateObject_3$f;
|
|
3800
4925
|
|
|
3801
4926
|
var CardSmallStyled = styled.div.withConfig({
|
|
3802
4927
|
displayName: "CardSmall__CardSmallStyled",
|
|
3803
4928
|
componentId: "sc-jpcqvd-0"
|
|
3804
|
-
})(templateObject_1$
|
|
4929
|
+
})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n a {\n text-decoration: none;\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\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 2px ", ";\n }\n"], ["\n a {\n text-decoration: none;\n }\n\n img {\n border-radius: ", ";\n transition: ease opacity 0.2s;\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 2px ", ";\n }\n"])), tokensData.base.border.radius[2], tokensData.semantic.color.border.strong);
|
|
3805
4930
|
var CardSmall = function CardSmall(_a) {
|
|
3806
4931
|
var title = _a.title,
|
|
3807
4932
|
picture = _a.picture,
|
|
@@ -3853,13 +4978,13 @@ var CardSmall = function CardSmall(_a) {
|
|
|
3853
4978
|
})
|
|
3854
4979
|
});
|
|
3855
4980
|
};
|
|
3856
|
-
var templateObject_1$
|
|
4981
|
+
var templateObject_1$l;
|
|
3857
4982
|
|
|
3858
4983
|
var border$3 = tokensData.base.border;
|
|
3859
4984
|
var CardLargeStyled = styled.div.withConfig({
|
|
3860
4985
|
displayName: "CardLarge__CardLargeStyled",
|
|
3861
4986
|
componentId: "sc-1rfgdzl-0"
|
|
3862
|
-
})(templateObject_1$
|
|
4987
|
+
})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n max-width: 768px;\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: ease opacity 0.2s;\n width: 100%;\n }\n"], ["\n max-width: 768px;\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: ease opacity 0.2s;\n width: 100%;\n }\n"])), border$3.radius[6]);
|
|
3863
4988
|
var CardLarge = function CardLarge(_a) {
|
|
3864
4989
|
var title = _a.title,
|
|
3865
4990
|
excerpt = _a.excerpt,
|
|
@@ -3912,7 +5037,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
3912
5037
|
})
|
|
3913
5038
|
});
|
|
3914
5039
|
};
|
|
3915
|
-
var templateObject_1$
|
|
5040
|
+
var templateObject_1$k;
|
|
3916
5041
|
|
|
3917
5042
|
/**
|
|
3918
5043
|
* Hidden native checkbox input for accessibility
|
|
@@ -3924,7 +5049,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
3924
5049
|
},
|
|
3925
5050
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
3926
5051
|
componentId: "sc-1ddpctx-0"
|
|
3927
|
-
})(templateObject_1$
|
|
5052
|
+
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n pointer-events: none;\n"], ["\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n pointer-events: none;\n"
|
|
3928
5053
|
/**
|
|
3929
5054
|
* Custom checkbox visual component
|
|
3930
5055
|
* 24px × 24px for 8px grid alignment
|
|
@@ -3941,7 +5066,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
3941
5066
|
},
|
|
3942
5067
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
3943
5068
|
componentId: "sc-1ddpctx-1"
|
|
3944
|
-
})(templateObject_2$
|
|
5069
|
+
})(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n min-width: 20px;\n min-height: 20px;\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all 150ms ease-out;\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: 20px;\n height: 20px;\n min-width: 20px;\n min-height: 20px;\n border-radius: ", ";\n border: ", " solid;\n background-color: ", ";\n border-color: ", ";\n cursor: ", ";\n transition: all 150ms ease-out;\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"
|
|
3945
5070
|
/**
|
|
3946
5071
|
* Container for checkbox with proper spacing and alignment
|
|
3947
5072
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -3974,7 +5099,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
3974
5099
|
},
|
|
3975
5100
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
3976
5101
|
componentId: "sc-1ddpctx-2"
|
|
3977
|
-
})(templateObject_3$
|
|
5102
|
+
})(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 32px;\n flex-direction: ", ";\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n cursor: ", ";\n min-height: 32px;\n flex-direction: ", ";\n user-select: none;\n"
|
|
3978
5103
|
/**
|
|
3979
5104
|
* Label text with proper typography
|
|
3980
5105
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -3994,16 +5119,16 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
3994
5119
|
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
3995
5120
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
3996
5121
|
});
|
|
3997
|
-
var templateObject_1$
|
|
5122
|
+
var templateObject_1$j, templateObject_2$g, templateObject_3$e, templateObject_4$c;
|
|
3998
5123
|
|
|
3999
5124
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
4000
5125
|
displayName: "Checkbox__StyledFieldContainer",
|
|
4001
5126
|
componentId: "sc-vquz3v-0"
|
|
4002
|
-
})(templateObject_1$
|
|
5127
|
+
})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"], ["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"])), tokensData.base.spacing[1]);
|
|
4003
5128
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
4004
5129
|
displayName: "Checkbox__StyledHelperText",
|
|
4005
5130
|
componentId: "sc-vquz3v-1"
|
|
4006
|
-
})(templateObject_2$
|
|
5131
|
+
})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-left: ", "; /* Align with label text after checkbox */\n display: block;\n"], ["\n font: ", ";\n color: ", ";\n margin-left: ", "; /* Align with label text after checkbox */\n display: block;\n"
|
|
4007
5132
|
/**
|
|
4008
5133
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
4009
5134
|
*
|
|
@@ -4122,12 +5247,12 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
4122
5247
|
});
|
|
4123
5248
|
});
|
|
4124
5249
|
Checkbox.displayName = 'Checkbox';
|
|
4125
|
-
var templateObject_1$
|
|
5250
|
+
var templateObject_1$i, templateObject_2$f;
|
|
4126
5251
|
|
|
4127
5252
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
4128
5253
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
4129
5254
|
componentId: "sc-ae049w-0"
|
|
4130
|
-
})(templateObject_1$
|
|
5255
|
+
})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"], ["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"])));
|
|
4131
5256
|
var ChipGroup = function ChipGroup(_a) {
|
|
4132
5257
|
var labels = _a.labels,
|
|
4133
5258
|
_b = _a.variant,
|
|
@@ -4147,24 +5272,44 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
4147
5272
|
})
|
|
4148
5273
|
});
|
|
4149
5274
|
};
|
|
4150
|
-
var templateObject_1$
|
|
5275
|
+
var templateObject_1$h;
|
|
4151
5276
|
|
|
4152
5277
|
var _a$2 = tokensData.semantic,
|
|
4153
5278
|
color$1 = _a$2.color,
|
|
4154
5279
|
border$2 = _a$2.border,
|
|
4155
5280
|
spacing$2 = _a$2.spacing;
|
|
5281
|
+
_a$2.motion;
|
|
4156
5282
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
4157
5283
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
4158
5284
|
componentId: "sc-1p1t0kp-0"
|
|
4159
|
-
})(templateObject_1$
|
|
5285
|
+
})(templateObject_1$g || (templateObject_1$g = __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 300ms ease-in-out;\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 300ms ease-in-out;\n \n ", "\n"])), color$1.background.subtle, border$2.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$1.text["default"], function (_a) {
|
|
5286
|
+
var $isExpanded = _a.$isExpanded,
|
|
5287
|
+
$needsExpansion = _a.$needsExpansion;
|
|
5288
|
+
return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
|
|
5289
|
+
}, spacing$2.layout.sm, function (_a) {
|
|
5290
|
+
var $maxHeight = _a.$maxHeight,
|
|
5291
|
+
$isExpanded = _a.$isExpanded,
|
|
5292
|
+
$needsExpansion = _a.$needsExpansion;
|
|
5293
|
+
if (!$maxHeight || !$needsExpansion) return '';
|
|
5294
|
+
// Use a large value when expanded to allow smooth transition
|
|
5295
|
+
// 10000px is effectively "no limit" for most code blocks
|
|
5296
|
+
return $isExpanded ? 'max-height: 10000px;' : "max-height: ".concat($maxHeight, "px;");
|
|
5297
|
+
});
|
|
4160
5298
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
4161
5299
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
4162
5300
|
componentId: "sc-1p1t0kp-1"
|
|
4163
|
-
})(templateObject_2$
|
|
5301
|
+
})(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n width: 100%;\n"], ["\n position: relative;\n display: inline-block;\n width: 100%;\n"])));
|
|
4164
5302
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
4165
5303
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
4166
5304
|
componentId: "sc-1p1t0kp-2"
|
|
4167
|
-
})(templateObject_3$
|
|
5305
|
+
})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n position: absolute;\n bottom: ", ";\n right: ", ";\n"], ["\n position: absolute;\n bottom: ", ";\n right: ", ";\n"])), spacing$2.layout.lg, spacing$2.layout.sm);
|
|
5306
|
+
var ExpandButtonWrapper = styled.div.withConfig({
|
|
5307
|
+
displayName: "CodeBlock__ExpandButtonWrapper",
|
|
5308
|
+
componentId: "sc-1p1t0kp-3"
|
|
5309
|
+
})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n padding: ", " 0;\n position: absolute;\n bottom: 1px;\n left: 1px;\n right: 1px;\n width: calc(100% - 2px);\n margin-bottom: ", ";\n border-radius: ", ";\n transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n \n ", "\n"], ["\n display: flex;\n justify-content: center;\n padding: ", " 0;\n position: absolute;\n bottom: 1px;\n left: 1px;\n right: 1px;\n width: calc(100% - 2px);\n margin-bottom: ", ";\n border-radius: ", ";\n transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n \n ", "\n"])), spacing$2.layout.sm, spacing$2.layout.sm, tokensData.base.border.radius[2], function (_a) {
|
|
5310
|
+
var $hasGradient = _a.$hasGradient;
|
|
5311
|
+
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$1.background.subtle, " 60%\n );\n ") : "\n background: transparent;\n ";
|
|
5312
|
+
});
|
|
4168
5313
|
var CopyButton = function CopyButton(_a) {
|
|
4169
5314
|
var text = _a.text,
|
|
4170
5315
|
onCopy = _a.onCopy;
|
|
@@ -4225,49 +5370,121 @@ var CopyButton = function CopyButton(_a) {
|
|
|
4225
5370
|
};
|
|
4226
5371
|
/**
|
|
4227
5372
|
* CodeBlock component for displaying formatted code with optional copy functionality
|
|
5373
|
+
* and expandable content for long code blocks.
|
|
4228
5374
|
*
|
|
4229
5375
|
* @param children - The code content to display
|
|
4230
5376
|
* @param showCopyButton - Whether to show the copy button (default: true)
|
|
4231
5377
|
* @param onCopy - Optional callback when code is copied
|
|
5378
|
+
* @param maxHeight - Maximum height in pixels before enabling expand/collapse
|
|
5379
|
+
* @param defaultExpanded - Initial expanded state when maxHeight is set
|
|
4232
5380
|
* @param data-testid - Test identifier for the code block
|
|
5381
|
+
*
|
|
5382
|
+
* @example
|
|
5383
|
+
* ```tsx
|
|
5384
|
+
* // Basic usage
|
|
5385
|
+
* <CodeBlock>const x = 1;</CodeBlock>
|
|
5386
|
+
*
|
|
5387
|
+
* // With max height and expand/collapse
|
|
5388
|
+
* <CodeBlock maxHeight={200}>
|
|
5389
|
+
* {longCodeString}
|
|
5390
|
+
* </CodeBlock>
|
|
5391
|
+
*
|
|
5392
|
+
* // Start expanded
|
|
5393
|
+
* <CodeBlock maxHeight={200} defaultExpanded>
|
|
5394
|
+
* {longCodeString}
|
|
5395
|
+
* </CodeBlock>
|
|
5396
|
+
* ```
|
|
4233
5397
|
*/
|
|
4234
5398
|
var CodeBlock = function CodeBlock(_a) {
|
|
4235
5399
|
var children = _a.children,
|
|
4236
5400
|
_b = _a.showCopyButton,
|
|
4237
5401
|
showCopyButton = _b === void 0 ? true : _b,
|
|
4238
5402
|
onCopy = _a.onCopy,
|
|
5403
|
+
maxHeight = _a.maxHeight,
|
|
5404
|
+
_c = _a.defaultExpanded,
|
|
5405
|
+
defaultExpanded = _c === void 0 ? false : _c,
|
|
4239
5406
|
testId = _a["data-testid"];
|
|
5407
|
+
var _d = useState(defaultExpanded),
|
|
5408
|
+
isExpanded = _d[0],
|
|
5409
|
+
setIsExpanded = _d[1];
|
|
5410
|
+
var _e = useState(false),
|
|
5411
|
+
needsExpansion = _e[0],
|
|
5412
|
+
setNeedsExpansion = _e[1];
|
|
5413
|
+
var contentRef = useRef(null);
|
|
5414
|
+
// Check if content exceeds maxHeight
|
|
5415
|
+
useEffect(function () {
|
|
5416
|
+
if (maxHeight && contentRef.current) {
|
|
5417
|
+
var scrollHeight = contentRef.current.scrollHeight;
|
|
5418
|
+
setNeedsExpansion(scrollHeight > maxHeight);
|
|
5419
|
+
}
|
|
5420
|
+
}, [children, maxHeight]);
|
|
5421
|
+
var handleToggleExpand = function handleToggleExpand() {
|
|
5422
|
+
setIsExpanded(function (prev) {
|
|
5423
|
+
return !prev;
|
|
5424
|
+
});
|
|
5425
|
+
// Announce state change to screen readers
|
|
5426
|
+
var announcement = isExpanded ? 'Code block collapsed' : 'Code block expanded';
|
|
5427
|
+
var announcer = document.createElement('div');
|
|
5428
|
+
announcer.setAttribute('aria-live', 'polite');
|
|
5429
|
+
announcer.setAttribute('aria-atomic', 'true');
|
|
5430
|
+
announcer.setAttribute('class', 'sr-only');
|
|
5431
|
+
announcer.style.cssText = 'position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;';
|
|
5432
|
+
announcer.textContent = announcement;
|
|
5433
|
+
document.body.appendChild(announcer);
|
|
5434
|
+
setTimeout(function () {
|
|
5435
|
+
document.body.removeChild(announcer);
|
|
5436
|
+
}, 1000);
|
|
5437
|
+
};
|
|
5438
|
+
var showExpandButton = maxHeight && needsExpansion;
|
|
4240
5439
|
return jsxs(CodeBlockWrapper, {
|
|
4241
5440
|
children: [jsx(StyledCodeBlock, {
|
|
5441
|
+
ref: contentRef,
|
|
4242
5442
|
"data-testid": testId,
|
|
5443
|
+
"$maxHeight": maxHeight,
|
|
5444
|
+
"$isExpanded": isExpanded,
|
|
5445
|
+
"$needsExpansion": needsExpansion,
|
|
5446
|
+
"aria-expanded": showExpandButton ? isExpanded : undefined,
|
|
5447
|
+
tabIndex: 0,
|
|
4243
5448
|
children: children
|
|
5449
|
+
}), showExpandButton && jsx(ExpandButtonWrapper, {
|
|
5450
|
+
"$hasGradient": !isExpanded,
|
|
5451
|
+
children: jsx(Button, {
|
|
5452
|
+
variant: "secondary",
|
|
5453
|
+
size: "small",
|
|
5454
|
+
iconName: isExpanded ? 'caretUp' : 'caretDown',
|
|
5455
|
+
onClick: handleToggleExpand,
|
|
5456
|
+
"aria-expanded": isExpanded,
|
|
5457
|
+
"aria-controls": testId,
|
|
5458
|
+
"data-testid": "expand-button",
|
|
5459
|
+
children: isExpanded ? 'Show less' : 'Show more'
|
|
5460
|
+
})
|
|
4244
5461
|
}), showCopyButton && jsx(CopyButton, {
|
|
4245
5462
|
text: children,
|
|
4246
5463
|
onCopy: onCopy
|
|
4247
5464
|
})]
|
|
4248
5465
|
});
|
|
4249
5466
|
};
|
|
4250
|
-
var templateObject_1$
|
|
5467
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
4251
5468
|
|
|
4252
5469
|
var StyledHeader = styled.div.withConfig({
|
|
4253
5470
|
displayName: "DateGroup__StyledHeader",
|
|
4254
5471
|
componentId: "sc-9nfm1f-0"
|
|
4255
|
-
})(templateObject_1$
|
|
5472
|
+
})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n \n ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.sm, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], function (_a) {
|
|
4256
5473
|
var $sticky = _a.$sticky;
|
|
4257
5474
|
return $sticky && "\n position: sticky;\n top: 0;\n z-index: 10;\n box-shadow: ".concat(tokensData.base.shadow[2], ";\n ");
|
|
4258
5475
|
});
|
|
4259
5476
|
var StyledLeftSection = styled.div.withConfig({
|
|
4260
5477
|
displayName: "DateGroup__StyledLeftSection",
|
|
4261
5478
|
componentId: "sc-9nfm1f-1"
|
|
4262
|
-
})(templateObject_2$
|
|
5479
|
+
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
|
|
4263
5480
|
var StyledRightSection = styled.div.withConfig({
|
|
4264
5481
|
displayName: "DateGroup__StyledRightSection",
|
|
4265
5482
|
componentId: "sc-9nfm1f-2"
|
|
4266
|
-
})(templateObject_3$
|
|
5483
|
+
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.md);
|
|
4267
5484
|
var StyledContent = styled.div.withConfig({
|
|
4268
5485
|
displayName: "DateGroup__StyledContent",
|
|
4269
5486
|
componentId: "sc-9nfm1f-3"
|
|
4270
|
-
})(templateObject_4$
|
|
5487
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n /* Content area for children */\n"], ["\n /* Content area for children */\n"
|
|
4271
5488
|
/**
|
|
4272
5489
|
* DateGroup component
|
|
4273
5490
|
*
|
|
@@ -4339,18 +5556,18 @@ var DateGroup = function DateGroup(_a) {
|
|
|
4339
5556
|
})]
|
|
4340
5557
|
});
|
|
4341
5558
|
};
|
|
4342
|
-
var templateObject_1$
|
|
5559
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c, templateObject_4$a;
|
|
4343
5560
|
|
|
4344
|
-
var semantic$
|
|
5561
|
+
var semantic$8 = tokensData.semantic;
|
|
4345
5562
|
var StyledContainer$1 = styled.div.withConfig({
|
|
4346
5563
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4347
5564
|
return !prop.startsWith('$');
|
|
4348
5565
|
},
|
|
4349
5566
|
displayName: "EmptyState__StyledContainer",
|
|
4350
5567
|
componentId: "sc-1u5hxh-0"
|
|
4351
|
-
})(templateObject_1$
|
|
5568
|
+
})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: 400px;\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: 400px;\n margin: 0 auto;\n padding: ", ";\n"])), function (_a) {
|
|
4352
5569
|
var $size = _a.$size;
|
|
4353
|
-
return $size === 'small' ? semantic$
|
|
5570
|
+
return $size === 'small' ? semantic$8.spacing.layout['4xl'] : $size === 'large' ? semantic$8.spacing.layout['8xl'] : semantic$8.spacing.layout['6xl'];
|
|
4354
5571
|
});
|
|
4355
5572
|
var StyledIllustration = styled.div.withConfig({
|
|
4356
5573
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -4358,22 +5575,22 @@ var StyledIllustration = styled.div.withConfig({
|
|
|
4358
5575
|
},
|
|
4359
5576
|
displayName: "EmptyState__StyledIllustration",
|
|
4360
5577
|
componentId: "sc-1u5hxh-1"
|
|
4361
|
-
})(templateObject_2$
|
|
5578
|
+
})(templateObject_2$c || (templateObject_2$c = __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) {
|
|
4362
5579
|
var $size = _a.$size;
|
|
4363
5580
|
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
4364
5581
|
}, function (_a) {
|
|
4365
5582
|
var $size = _a.$size;
|
|
4366
5583
|
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
4367
|
-
}, semantic$
|
|
5584
|
+
}, semantic$8.spacing.layout['2xl'], function (_a) {
|
|
4368
5585
|
var $variant = _a.$variant;
|
|
4369
|
-
return $variant === 'error' ? semantic$
|
|
5586
|
+
return $variant === 'error' ? semantic$8.color.icon.error : $variant === 'success' ? semantic$8.color.icon.success : semantic$8.color.icon.subdued;
|
|
4370
5587
|
});
|
|
4371
5588
|
var StyledTextContainer = styled.div.withConfig({
|
|
4372
5589
|
displayName: "EmptyState__StyledTextContainer",
|
|
4373
5590
|
componentId: "sc-1u5hxh-2"
|
|
4374
|
-
})(templateObject_3$
|
|
5591
|
+
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n max-width: 360px;\n margin-bottom: ", ";\n"], ["\n max-width: 360px;\n margin-bottom: ", ";\n"
|
|
4375
5592
|
// Map illustration type to icon name
|
|
4376
|
-
])), semantic$
|
|
5593
|
+
])), semantic$8.spacing.layout['2xl']);
|
|
4377
5594
|
// Map illustration type to icon name
|
|
4378
5595
|
var illustrationToIcon = {
|
|
4379
5596
|
search: 'search',
|
|
@@ -4428,7 +5645,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4428
5645
|
children: title
|
|
4429
5646
|
}), jsx("div", {
|
|
4430
5647
|
style: {
|
|
4431
|
-
marginTop: semantic$
|
|
5648
|
+
marginTop: semantic$8.spacing.layout.md
|
|
4432
5649
|
},
|
|
4433
5650
|
children: jsx(Typography, {
|
|
4434
5651
|
variant: "body",
|
|
@@ -4458,7 +5675,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4458
5675
|
})]
|
|
4459
5676
|
});
|
|
4460
5677
|
};
|
|
4461
|
-
var templateObject_1$
|
|
5678
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b;
|
|
4462
5679
|
|
|
4463
5680
|
var _a$1 = tokensData.base,
|
|
4464
5681
|
spacing$1 = _a$1.spacing,
|
|
@@ -4466,23 +5683,23 @@ var _a$1 = tokensData.base,
|
|
|
4466
5683
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
4467
5684
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
4468
5685
|
componentId: "sc-1mi4lso-0"
|
|
4469
|
-
})(templateObject_1$
|
|
5686
|
+
})(templateObject_1$d || (templateObject_1$d = __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: ease opacity 0.2s;\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: ease opacity 0.2s;\n\n &:hover {\n opacity: 0.8;\n }\n }\n\n a {\n text-decoration: none;\n }\n"])), tokensData.base.breakpoint.md, tokensData.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
|
|
4470
5687
|
var ImageWrapper = styled.div.withConfig({
|
|
4471
5688
|
displayName: "FeatureBlock__ImageWrapper",
|
|
4472
5689
|
componentId: "sc-1mi4lso-1"
|
|
4473
|
-
})(templateObject_2$
|
|
5690
|
+
})(templateObject_2$b || (templateObject_2$b = __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"])), tokensData.base.breakpoint.lg);
|
|
4474
5691
|
var ContentSection = styled.div.withConfig({
|
|
4475
5692
|
displayName: "FeatureBlock__ContentSection",
|
|
4476
5693
|
componentId: "sc-1mi4lso-2"
|
|
4477
|
-
})(templateObject_3$
|
|
5694
|
+
})(templateObject_3$a || (templateObject_3$a = __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[6], tokensData.base.breakpoint.lg, spacing$1[8], tokensData.base.breakpoint.xl, spacing$1[24]);
|
|
4478
5695
|
var ButtonWrapper = styled.div.withConfig({
|
|
4479
5696
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
4480
5697
|
componentId: "sc-1mi4lso-3"
|
|
4481
|
-
})(templateObject_4$
|
|
5698
|
+
})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
4482
5699
|
var ContentWrapper = styled.div.withConfig({
|
|
4483
5700
|
displayName: "FeatureBlock__ContentWrapper",
|
|
4484
5701
|
componentId: "sc-1mi4lso-4"
|
|
4485
|
-
})(templateObject_5$
|
|
5702
|
+
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: 100%;\n"])));
|
|
4486
5703
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
4487
5704
|
var title = _a.title,
|
|
4488
5705
|
excerpt = _a.excerpt,
|
|
@@ -4539,7 +5756,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
4539
5756
|
}), jsx(Divider, {})]
|
|
4540
5757
|
});
|
|
4541
5758
|
};
|
|
4542
|
-
var templateObject_1$
|
|
5759
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8;
|
|
4543
5760
|
|
|
4544
5761
|
var _a = tokensData.base,
|
|
4545
5762
|
spacing = _a.spacing,
|
|
@@ -4553,14 +5770,14 @@ var _a = tokensData.base,
|
|
|
4553
5770
|
var DropdownContainer = styled.div.withConfig({
|
|
4554
5771
|
displayName: "Dropdown__DropdownContainer",
|
|
4555
5772
|
componentId: "sc-kz07c4-0"
|
|
4556
|
-
})(templateObject_1$
|
|
5773
|
+
})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
4557
5774
|
var DropdownTrigger = styled.button.withConfig({
|
|
4558
5775
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4559
5776
|
return !prop.startsWith('$');
|
|
4560
5777
|
},
|
|
4561
5778
|
displayName: "Dropdown__DropdownTrigger",
|
|
4562
5779
|
componentId: "sc-kz07c4-1"
|
|
4563
|
-
})(templateObject_2$
|
|
5780
|
+
})(templateObject_2$a || (templateObject_2$a = __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 200ms ease-in-out, \n outline 200ms ease-in-out;\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 200ms ease-in-out, \n outline 200ms ease-in-out;\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) {
|
|
4564
5781
|
var $hasError = _a.$hasError;
|
|
4565
5782
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
4566
5783
|
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
@@ -4580,7 +5797,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
4580
5797
|
},
|
|
4581
5798
|
displayName: "Dropdown__DropdownIcon",
|
|
4582
5799
|
componentId: "sc-kz07c4-2"
|
|
4583
|
-
})(templateObject_3$
|
|
5800
|
+
})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-left: ", ";\n transition: transform 0.15s ease;\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n margin-left: ", ";\n transition: transform 0.15s ease;\n \n ", "\n"])), spacing[2], function (_a) {
|
|
4584
5801
|
var $isOpen = _a.$isOpen;
|
|
4585
5802
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
4586
5803
|
});
|
|
@@ -4590,7 +5807,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
4590
5807
|
},
|
|
4591
5808
|
displayName: "Dropdown__DropdownMenu",
|
|
4592
5809
|
componentId: "sc-kz07c4-3"
|
|
4593
|
-
})(templateObject_4$
|
|
5810
|
+
})(templateObject_4$8 || (templateObject_4$8 = __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 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\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 0.15s ease;\n max-height: 300px;\n overflow-y: auto;\n"])), zIndex[3], input$1["default"].backgroundColor, input$1["default"].borderWidth, input$1["default"].borderColor, input$1["default"].borderRadius, shadow[3], spacing[1], function (_a) {
|
|
4594
5811
|
var $isOpen = _a.$isOpen;
|
|
4595
5812
|
return $isOpen ? 1 : 0;
|
|
4596
5813
|
}, function (_a) {
|
|
@@ -4606,7 +5823,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
4606
5823
|
},
|
|
4607
5824
|
displayName: "Dropdown__DropdownOption",
|
|
4608
5825
|
componentId: "sc-kz07c4-4"
|
|
4609
|
-
})(templateObject_5$
|
|
5826
|
+
})(templateObject_5$7 || (templateObject_5$7 = __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 0.15s ease;\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 0.15s ease;\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) {
|
|
4610
5827
|
var $isSelected = _a.$isSelected,
|
|
4611
5828
|
$isFocused = _a.$isFocused;
|
|
4612
5829
|
if ($isFocused) return color.background.surface;
|
|
@@ -4616,7 +5833,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
4616
5833
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
4617
5834
|
displayName: "Dropdown__StyledHelperText",
|
|
4618
5835
|
componentId: "sc-kz07c4-5"
|
|
4619
|
-
})(templateObject_6$
|
|
5836
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography.caption, function (_a) {
|
|
4620
5837
|
var $hasError = _a.$hasError;
|
|
4621
5838
|
return $hasError ? color.text.error : color.text.subdued;
|
|
4622
5839
|
}, spacing[2]);
|
|
@@ -4793,18 +6010,18 @@ var Dropdown = function Dropdown(_a) {
|
|
|
4793
6010
|
})]
|
|
4794
6011
|
});
|
|
4795
6012
|
};
|
|
4796
|
-
var templateObject_1$
|
|
6013
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6;
|
|
4797
6014
|
|
|
4798
|
-
var semantic$
|
|
6015
|
+
var semantic$7 = tokensData.semantic;
|
|
4799
6016
|
var StyledList = styled.ul.withConfig({
|
|
4800
6017
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4801
6018
|
return !prop.startsWith('$');
|
|
4802
6019
|
},
|
|
4803
6020
|
displayName: "List__StyledList",
|
|
4804
6021
|
componentId: "sc-1irksg5-0"
|
|
4805
|
-
})(templateObject_1$
|
|
6022
|
+
})(templateObject_1$b || (templateObject_1$b = __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) {
|
|
4806
6023
|
var $dividers = _a.$dividers;
|
|
4807
|
-
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$
|
|
6024
|
+
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$7.color.border["default"], ";\n }\n ");
|
|
4808
6025
|
});
|
|
4809
6026
|
var List = function List(_a) {
|
|
4810
6027
|
var children = _a.children,
|
|
@@ -4826,194 +6043,7 @@ var List = function List(_a) {
|
|
|
4826
6043
|
}));
|
|
4827
6044
|
};
|
|
4828
6045
|
List.displayName = 'List';
|
|
4829
|
-
var templateObject_1$
|
|
4830
|
-
|
|
4831
|
-
var semantic$7 = tokensData.semantic,
|
|
4832
|
-
base$7 = tokensData.base;
|
|
4833
|
-
var StyledListItem = styled.li.withConfig({
|
|
4834
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4835
|
-
return !prop.startsWith('$');
|
|
4836
|
-
},
|
|
4837
|
-
displayName: "ListItem__StyledListItem",
|
|
4838
|
-
componentId: "sc-1wzzt21-0"
|
|
4839
|
-
})(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n"])), function (_a) {
|
|
4840
|
-
var $interactive = _a.$interactive;
|
|
4841
|
-
return $interactive && 'user-select: none;';
|
|
4842
|
-
}, function (_a) {
|
|
4843
|
-
var $disabled = _a.$disabled;
|
|
4844
|
-
return $disabled && "\n opacity: ".concat(base$7.opacity[50], ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
4845
|
-
});
|
|
4846
|
-
var StyledItemContent = styled.div.withConfig({
|
|
4847
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4848
|
-
return !prop.startsWith('$');
|
|
4849
|
-
},
|
|
4850
|
-
displayName: "ListItem__StyledItemContent",
|
|
4851
|
-
componentId: "sc-1wzzt21-1"
|
|
4852
|
-
})(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color 150ms ease;\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"], ["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color 150ms ease;\n cursor: ", ";\n \n /* Interactive hover states */\n ", "\n \n /* Focus visible */\n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"])), semantic$7.spacing.layout.md, function (_a) {
|
|
4853
|
-
var $spacing = _a.$spacing;
|
|
4854
|
-
return $spacing === 'compact' ? "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.md) : "".concat(semantic$7.spacing.layout.md, " ").concat(semantic$7.spacing.layout.lg);
|
|
4855
|
-
}, base$7.border.radius[2], function (_a) {
|
|
4856
|
-
var $selected = _a.$selected;
|
|
4857
|
-
return $selected ? semantic$7.color.background['interactive-subtle'] : 'transparent';
|
|
4858
|
-
}, function (_a) {
|
|
4859
|
-
var $interactive = _a.$interactive,
|
|
4860
|
-
$disabled = _a.$disabled;
|
|
4861
|
-
if ($disabled) return 'not-allowed';
|
|
4862
|
-
if ($interactive) return 'pointer';
|
|
4863
|
-
return 'default';
|
|
4864
|
-
}, function (_a) {
|
|
4865
|
-
var $interactive = _a.$interactive,
|
|
4866
|
-
$disabled = _a.$disabled,
|
|
4867
|
-
$selected = _a.$selected;
|
|
4868
|
-
return !$disabled && $interactive && "\n &:hover {\n background-color: ".concat($selected ? tokensData.component.button.variants.secondary.backgroundColor : tokensData.component.button.variants.secondary.backgroundColor, ";\n }\n \n &:active {\n background-color: ").concat(tokensData.component.button.variants.naked.backgroundColor, ";\n }\n ");
|
|
4869
|
-
}, semantic$7.color.border.interactive);
|
|
4870
|
-
var StyledIconContainer = styled.div.withConfig({
|
|
4871
|
-
displayName: "ListItem__StyledIconContainer",
|
|
4872
|
-
componentId: "sc-1wzzt21-2"
|
|
4873
|
-
})(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n"], ["\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n"])));
|
|
4874
|
-
var StyledTextContent = styled.div.withConfig({
|
|
4875
|
-
displayName: "ListItem__StyledTextContent",
|
|
4876
|
-
componentId: "sc-1wzzt21-3"
|
|
4877
|
-
})(templateObject_4$8 || (templateObject_4$8 = __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$7.spacing.layout.xs);
|
|
4878
|
-
var StyledRightContent = styled.div.withConfig({
|
|
4879
|
-
displayName: "ListItem__StyledRightContent",
|
|
4880
|
-
componentId: "sc-1wzzt21-4"
|
|
4881
|
-
})(templateObject_5$7 || (templateObject_5$7 = __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);
|
|
4882
|
-
var StyledChevronIcon = styled.div.withConfig({
|
|
4883
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4884
|
-
return !prop.startsWith('$');
|
|
4885
|
-
},
|
|
4886
|
-
displayName: "ListItem__StyledChevronIcon",
|
|
4887
|
-
componentId: "sc-1wzzt21-5"
|
|
4888
|
-
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: ", ";\n transition: transform 200ms ease;\n transform: rotate(", ");\n pointer-events: none;\n"])), semantic$7.color.icon.subdued, function (_a) {
|
|
4889
|
-
var $expanded = _a.$expanded;
|
|
4890
|
-
return $expanded ? '180deg' : '0deg';
|
|
4891
|
-
});
|
|
4892
|
-
var StyledExpandedContent = styled.div.withConfig({
|
|
4893
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4894
|
-
return !prop.startsWith('$');
|
|
4895
|
-
},
|
|
4896
|
-
displayName: "ListItem__StyledExpandedContent",
|
|
4897
|
-
componentId: "sc-1wzzt21-6"
|
|
4898
|
-
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"], ["\n overflow: hidden;\n transition: max-height 200ms ease-out, opacity 200ms ease-out;\n max-height: ", ";\n opacity: ", ";\n \n ", "\n"])), function (_a) {
|
|
4899
|
-
var $expanded = _a.$expanded;
|
|
4900
|
-
return $expanded ? '1000px' : '0';
|
|
4901
|
-
}, function (_a) {
|
|
4902
|
-
var $expanded = _a.$expanded;
|
|
4903
|
-
return $expanded ? '1' : '0';
|
|
4904
|
-
}, function (_a) {
|
|
4905
|
-
var $expanded = _a.$expanded,
|
|
4906
|
-
$spacing = _a.$spacing;
|
|
4907
|
-
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.md, " ").concat(semantic$7.spacing.layout.sm, " 48px") : "".concat(semantic$7.spacing.layout.sm, " ").concat(semantic$7.spacing.layout.lg, " ").concat(semantic$7.spacing.layout.md, " 60px"), ";\n background-color: ").concat(semantic$7.color.background['subtle'], ";\n border-radius: ").concat(base$7.border.radius[2], ";\n margin: 0 ").concat($spacing === 'compact' ? semantic$7.spacing.layout.md : semantic$7.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.md, ";\n ");
|
|
4908
|
-
});
|
|
4909
|
-
var ListItem = function ListItem(_a) {
|
|
4910
|
-
var primary = _a.primary,
|
|
4911
|
-
secondary = _a.secondary,
|
|
4912
|
-
badge = _a.badge,
|
|
4913
|
-
icon = _a.icon,
|
|
4914
|
-
_b = _a.expandable,
|
|
4915
|
-
expandable = _b === void 0 ? false : _b,
|
|
4916
|
-
_c = _a.expanded,
|
|
4917
|
-
expanded = _c === void 0 ? false : _c,
|
|
4918
|
-
onToggle = _a.onToggle,
|
|
4919
|
-
_d = _a.interactive,
|
|
4920
|
-
interactive = _d === void 0 ? false : _d,
|
|
4921
|
-
onClick = _a.onClick,
|
|
4922
|
-
_e = _a.disabled,
|
|
4923
|
-
disabled = _e === void 0 ? false : _e,
|
|
4924
|
-
_f = _a.selected,
|
|
4925
|
-
selected = _f === void 0 ? false : _f,
|
|
4926
|
-
_g = _a.spacing,
|
|
4927
|
-
spacing = _g === void 0 ? 'comfortable' : _g,
|
|
4928
|
-
children = _a.children,
|
|
4929
|
-
className = _a.className,
|
|
4930
|
-
dataTestId = _a["data-testid"],
|
|
4931
|
-
customRole = _a.role,
|
|
4932
|
-
ariaSelected = _a["aria-selected"],
|
|
4933
|
-
id = _a.id,
|
|
4934
|
-
customTabIndex = _a.tabIndex,
|
|
4935
|
-
customOnKeyDown = _a.onKeyDown,
|
|
4936
|
-
props = __rest(_a, ["primary", "secondary", "badge", "icon", "expandable", "expanded", "onToggle", "interactive", "onClick", "disabled", "selected", "spacing", "children", "className", 'data-testid', "role", 'aria-selected', "id", "tabIndex", "onKeyDown"]);
|
|
4937
|
-
var isInteractive = interactive || expandable || customRole === 'option';
|
|
4938
|
-
var contentRole = customRole === 'option' ? undefined : isInteractive ? 'button' : undefined;
|
|
4939
|
-
var ariaExpanded = expandable ? expanded : undefined;
|
|
4940
|
-
var ariaDisabled = disabled ? true : undefined;
|
|
4941
|
-
var ariaCurrent = selected ? 'true' : undefined;
|
|
4942
|
-
var handleClick = function handleClick() {
|
|
4943
|
-
if (disabled) return;
|
|
4944
|
-
if (expandable && onToggle) {
|
|
4945
|
-
onToggle();
|
|
4946
|
-
} else if (onClick) {
|
|
4947
|
-
onClick();
|
|
4948
|
-
}
|
|
4949
|
-
};
|
|
4950
|
-
var handleKeyDown = function handleKeyDown(event) {
|
|
4951
|
-
if (customOnKeyDown) {
|
|
4952
|
-
customOnKeyDown(event);
|
|
4953
|
-
return;
|
|
4954
|
-
}
|
|
4955
|
-
if (disabled) return;
|
|
4956
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
4957
|
-
event.preventDefault();
|
|
4958
|
-
handleClick();
|
|
4959
|
-
}
|
|
4960
|
-
};
|
|
4961
|
-
return jsxs(StyledListItem, __assign({
|
|
4962
|
-
"$interactive": isInteractive,
|
|
4963
|
-
"$disabled": disabled,
|
|
4964
|
-
"$selected": selected,
|
|
4965
|
-
"$spacing": spacing,
|
|
4966
|
-
className: className,
|
|
4967
|
-
"data-testid": dataTestId,
|
|
4968
|
-
role: customRole || 'listitem',
|
|
4969
|
-
id: id,
|
|
4970
|
-
"aria-selected": ariaSelected
|
|
4971
|
-
}, props, {
|
|
4972
|
-
children: [jsxs(StyledItemContent, {
|
|
4973
|
-
"$interactive": isInteractive,
|
|
4974
|
-
"$disabled": disabled,
|
|
4975
|
-
"$selected": selected,
|
|
4976
|
-
"$spacing": spacing,
|
|
4977
|
-
role: contentRole,
|
|
4978
|
-
"aria-expanded": ariaExpanded,
|
|
4979
|
-
"aria-disabled": ariaDisabled,
|
|
4980
|
-
"aria-current": ariaCurrent,
|
|
4981
|
-
tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
|
|
4982
|
-
onClick: handleClick,
|
|
4983
|
-
onKeyDown: handleKeyDown,
|
|
4984
|
-
children: [icon && jsx(StyledIconContainer, {
|
|
4985
|
-
"aria-hidden": "true",
|
|
4986
|
-
children: icon
|
|
4987
|
-
}), jsxs(StyledTextContent, {
|
|
4988
|
-
children: [jsx(Typography, {
|
|
4989
|
-
variant: "body",
|
|
4990
|
-
color: "default",
|
|
4991
|
-
children: primary
|
|
4992
|
-
}), secondary && jsx(Typography, {
|
|
4993
|
-
variant: "small",
|
|
4994
|
-
color: "subdued",
|
|
4995
|
-
children: secondary
|
|
4996
|
-
})]
|
|
4997
|
-
}), jsxs(StyledRightContent, {
|
|
4998
|
-
children: [badge, expandable && jsx(StyledChevronIcon, {
|
|
4999
|
-
"$expanded": expanded,
|
|
5000
|
-
"aria-hidden": "true",
|
|
5001
|
-
children: jsx(Icon, {
|
|
5002
|
-
name: "caretDown",
|
|
5003
|
-
size: "sm"
|
|
5004
|
-
})
|
|
5005
|
-
})]
|
|
5006
|
-
})]
|
|
5007
|
-
}), expandable && children && jsx(StyledExpandedContent, {
|
|
5008
|
-
"$spacing": spacing,
|
|
5009
|
-
"$expanded": expanded,
|
|
5010
|
-
"aria-hidden": !expanded,
|
|
5011
|
-
children: children
|
|
5012
|
-
})]
|
|
5013
|
-
}));
|
|
5014
|
-
};
|
|
5015
|
-
ListItem.displayName = 'ListItem';
|
|
5016
|
-
var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5;
|
|
6046
|
+
var templateObject_1$b;
|
|
5017
6047
|
|
|
5018
6048
|
var input = tokensData.component.input;
|
|
5019
6049
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -7163,5 +8193,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
7163
8193
|
// Main design system exports
|
|
7164
8194
|
var tokens = tokensData;
|
|
7165
8195
|
|
|
7166
|
-
export { AccountCard, ActionSheet, Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, CategoryBadge, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DateGroup, Divider, Dropdown, EmptyState, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, MoneyDisplay, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, SearchField, Sheet, Slider, Stack, StatusBadge, StyledInputBase, StyledTextAreaBase, TabBar, Tag, TextField, TransactionListItem, Typography, iconsData, tokens };
|
|
8196
|
+
export { AccountCard, ActionSheet, AgentInput, Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, CategoryBadge, Checkbox, Chip, ChipGroup, CodeBlock, Container$1 as Container, DateFormatter, DateGroup, Divider, Dropdown, EmptyState, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, MoneyDisplay, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, SearchField, Sheet, Slider, Stack, StatusBadge, StyledInputBase, StyledTextAreaBase, TabBar, Tag, TextField, TransactionListItem, Typography, iconsData, tokens };
|
|
7167
8197
|
//# sourceMappingURL=index.esm.js.map
|