@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.js
CHANGED
|
@@ -84,6 +84,16 @@ function __generator(thisArg, body) {
|
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
+
function __spreadArray(to, from, pack) {
|
|
88
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
89
|
+
if (ar || !(i in from)) {
|
|
90
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
91
|
+
ar[i] = from[i];
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
95
|
+
}
|
|
96
|
+
|
|
87
97
|
function __makeTemplateObject(cooked, raw) {
|
|
88
98
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
89
99
|
return cooked;
|
|
@@ -93,7 +103,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
93
103
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
94
104
|
};
|
|
95
105
|
|
|
96
|
-
var base$
|
|
106
|
+
var base$c = {
|
|
97
107
|
border: {
|
|
98
108
|
radius: {
|
|
99
109
|
"1": "0.125rem",
|
|
@@ -409,7 +419,7 @@ var base$d = {
|
|
|
409
419
|
},
|
|
410
420
|
$ref: "./base/index.json"
|
|
411
421
|
};
|
|
412
|
-
var component$
|
|
422
|
+
var component$3 = {
|
|
413
423
|
button: {
|
|
414
424
|
primary: {
|
|
415
425
|
backgroundColor: "#212529",
|
|
@@ -460,6 +470,34 @@ var component$1 = {
|
|
|
460
470
|
backgroundColor: "transparent",
|
|
461
471
|
textColor: "#adb5bd"
|
|
462
472
|
}
|
|
473
|
+
},
|
|
474
|
+
emphasis: {
|
|
475
|
+
backgroundColor: "#0265DC",
|
|
476
|
+
textColor: "#ffffff",
|
|
477
|
+
hover: {
|
|
478
|
+
backgroundColor: "#0054B6"
|
|
479
|
+
},
|
|
480
|
+
active: {
|
|
481
|
+
backgroundColor: "#004491"
|
|
482
|
+
},
|
|
483
|
+
disabled: {
|
|
484
|
+
backgroundColor: "#dee2e6",
|
|
485
|
+
textColor: "#adb5bd"
|
|
486
|
+
}
|
|
487
|
+
},
|
|
488
|
+
danger: {
|
|
489
|
+
backgroundColor: "#D31510",
|
|
490
|
+
textColor: "#ffffff",
|
|
491
|
+
hover: {
|
|
492
|
+
backgroundColor: "#B40000"
|
|
493
|
+
},
|
|
494
|
+
active: {
|
|
495
|
+
backgroundColor: "#930000"
|
|
496
|
+
},
|
|
497
|
+
disabled: {
|
|
498
|
+
backgroundColor: "#dee2e6",
|
|
499
|
+
textColor: "#adb5bd"
|
|
500
|
+
}
|
|
463
501
|
}
|
|
464
502
|
},
|
|
465
503
|
sizes: {
|
|
@@ -481,22 +519,66 @@ var component$1 = {
|
|
|
481
519
|
"default": {
|
|
482
520
|
backgroundColor: "#e9ecef",
|
|
483
521
|
textColor: "#212529",
|
|
484
|
-
borderRadius: "0.
|
|
522
|
+
borderRadius: "0.75rem",
|
|
485
523
|
padding: "2px 0.5rem",
|
|
486
524
|
font: "500 0.875rem/1.25rem 'Inter', sans-serif"
|
|
487
525
|
},
|
|
526
|
+
hover: {
|
|
527
|
+
backgroundColor: "#dee2e6"
|
|
528
|
+
},
|
|
529
|
+
active: {
|
|
530
|
+
backgroundColor: "#ced4da"
|
|
531
|
+
},
|
|
532
|
+
focus: {
|
|
533
|
+
outline: "0.125rem solid #343a40",
|
|
534
|
+
outlineOffset: "2px"
|
|
535
|
+
},
|
|
536
|
+
disabled: {
|
|
537
|
+
backgroundColor: "#e9ecef",
|
|
538
|
+
textColor: "#adb5bd"
|
|
539
|
+
},
|
|
488
540
|
variants: {
|
|
489
541
|
emphasis: {
|
|
490
542
|
backgroundColor: "#212529",
|
|
491
|
-
textColor: "#ffffff"
|
|
543
|
+
textColor: "#ffffff",
|
|
544
|
+
hover: {
|
|
545
|
+
backgroundColor: "#343a40"
|
|
546
|
+
},
|
|
547
|
+
active: {
|
|
548
|
+
backgroundColor: "#16191C"
|
|
549
|
+
},
|
|
550
|
+
disabled: {
|
|
551
|
+
backgroundColor: "#dee2e6",
|
|
552
|
+
textColor: "#adb5bd"
|
|
553
|
+
}
|
|
492
554
|
},
|
|
493
555
|
subtle: {
|
|
494
556
|
backgroundColor: "#ffffff",
|
|
495
|
-
textColor: "#212529"
|
|
557
|
+
textColor: "#212529",
|
|
558
|
+
hover: {
|
|
559
|
+
backgroundColor: "#f8f9fa"
|
|
560
|
+
},
|
|
561
|
+
active: {
|
|
562
|
+
backgroundColor: "#e9ecef"
|
|
563
|
+
},
|
|
564
|
+
disabled: {
|
|
565
|
+
backgroundColor: "#ffffff",
|
|
566
|
+
textColor: "#adb5bd"
|
|
567
|
+
}
|
|
496
568
|
},
|
|
497
569
|
interactive: {
|
|
498
570
|
backgroundColor: "#0265DC",
|
|
499
|
-
textColor: "#ffffff"
|
|
571
|
+
textColor: "#ffffff",
|
|
572
|
+
hover: {
|
|
573
|
+
backgroundColor: "#0054B6"
|
|
574
|
+
},
|
|
575
|
+
active: {
|
|
576
|
+
backgroundColor: "#004491"
|
|
577
|
+
},
|
|
578
|
+
disabled: {
|
|
579
|
+
backgroundColor: "#dee2e6",
|
|
580
|
+
textColor: "#adb5bd"
|
|
581
|
+
}
|
|
500
582
|
}
|
|
501
583
|
},
|
|
502
584
|
sizes: {
|
|
@@ -673,13 +755,32 @@ var component$1 = {
|
|
|
673
755
|
},
|
|
674
756
|
$ref: "./component/index.json"
|
|
675
757
|
};
|
|
676
|
-
var semantic$
|
|
758
|
+
var semantic$j = {
|
|
759
|
+
elevation: {
|
|
760
|
+
none: "none",
|
|
761
|
+
inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
|
|
762
|
+
raised: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
|
|
763
|
+
floating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
|
764
|
+
overlay: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
765
|
+
sticky: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
|
|
766
|
+
},
|
|
677
767
|
border: {
|
|
678
768
|
"default": "0.0625rem solid #e9ecef",
|
|
679
769
|
subtle: "0.0625rem solid #dee2e6",
|
|
680
770
|
strong: "0.0625rem solid #343a40",
|
|
681
771
|
focus: "0.125rem solid #343a40",
|
|
682
|
-
tooltip: "0.125rem dotted #dee2e6"
|
|
772
|
+
tooltip: "0.125rem dotted #dee2e6",
|
|
773
|
+
radius: {
|
|
774
|
+
none: "0",
|
|
775
|
+
xs: "0.125rem",
|
|
776
|
+
sm: "0.25rem",
|
|
777
|
+
md: "0.5rem",
|
|
778
|
+
lg: "0.75rem",
|
|
779
|
+
xl: "1rem",
|
|
780
|
+
"2xl": "1.5rem",
|
|
781
|
+
"3xl": "2rem",
|
|
782
|
+
circle: "10rem"
|
|
783
|
+
}
|
|
683
784
|
},
|
|
684
785
|
size: {
|
|
685
786
|
icon: {
|
|
@@ -858,38 +959,44 @@ var semantic$g = {
|
|
|
858
959
|
$ref: "./semantic/index.json"
|
|
859
960
|
};
|
|
860
961
|
var tokensData = {
|
|
861
|
-
base: base$
|
|
862
|
-
component: component$
|
|
863
|
-
semantic: semantic$
|
|
962
|
+
base: base$c,
|
|
963
|
+
component: component$3,
|
|
964
|
+
semantic: semantic$j
|
|
864
965
|
};
|
|
865
966
|
|
|
967
|
+
// Destructure tokens
|
|
968
|
+
var semantic$i = tokensData.semantic;
|
|
969
|
+
var color$a = semantic$i.color,
|
|
970
|
+
size$1 = semantic$i.size,
|
|
971
|
+
border$a = semantic$i.border;
|
|
972
|
+
var radius$6 = border$a.radius;
|
|
866
973
|
var AvatarContainer = styled.div.withConfig({
|
|
867
974
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
868
975
|
return !prop.startsWith('$');
|
|
869
976
|
},
|
|
870
977
|
displayName: "Avatar__AvatarContainer",
|
|
871
978
|
componentId: "sc-ezn4ax-0"
|
|
872
|
-
})(templateObject_1$
|
|
979
|
+
})(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) {
|
|
873
980
|
var $size = _a.$size;
|
|
874
|
-
return
|
|
981
|
+
return size$1.avatar[$size];
|
|
875
982
|
}, function (_a) {
|
|
876
983
|
var $size = _a.$size;
|
|
877
|
-
return
|
|
878
|
-
},
|
|
984
|
+
return size$1.avatar[$size];
|
|
985
|
+
}, radius$6.circle, color$a.background.surface);
|
|
879
986
|
var AvatarImage = styled.img.withConfig({
|
|
880
987
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
881
988
|
return !prop.startsWith('$');
|
|
882
989
|
},
|
|
883
990
|
displayName: "Avatar__AvatarImage",
|
|
884
991
|
componentId: "sc-ezn4ax-1"
|
|
885
|
-
})(templateObject_2$
|
|
992
|
+
})(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);
|
|
886
993
|
var AvatarInitials = styled.span.withConfig({
|
|
887
994
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
888
995
|
return !prop.startsWith('$');
|
|
889
996
|
},
|
|
890
997
|
displayName: "Avatar__AvatarInitials",
|
|
891
998
|
componentId: "sc-ezn4ax-2"
|
|
892
|
-
})(templateObject_3$
|
|
999
|
+
})(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"
|
|
893
1000
|
// Helper function to get initials from name
|
|
894
1001
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
895
1002
|
var $size = _a.$size;
|
|
@@ -901,7 +1008,7 @@ var AvatarInitials = styled.span.withConfig({
|
|
|
901
1008
|
xl: tokensData.base.fontSize[5]
|
|
902
1009
|
};
|
|
903
1010
|
return sizeMap[$size];
|
|
904
|
-
},
|
|
1011
|
+
}, color$a.text["default"]);
|
|
905
1012
|
// Helper function to get initials from name
|
|
906
1013
|
var getInitials = function getInitials(name) {
|
|
907
1014
|
return name.split(' ').map(function (word) {
|
|
@@ -955,43 +1062,43 @@ var Avatar = function Avatar(_a) {
|
|
|
955
1062
|
})
|
|
956
1063
|
}));
|
|
957
1064
|
};
|
|
958
|
-
var templateObject_1$
|
|
1065
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$r;
|
|
959
1066
|
|
|
960
|
-
var _a$
|
|
961
|
-
typography$
|
|
962
|
-
color$
|
|
1067
|
+
var _a$8 = tokensData.semantic,
|
|
1068
|
+
typography$5 = _a$8.typography,
|
|
1069
|
+
color$9 = _a$8.color;
|
|
963
1070
|
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
964
1071
|
var styles = {
|
|
965
|
-
display: "font: ".concat(typography$
|
|
966
|
-
h1: "font: ".concat(typography$
|
|
967
|
-
h2: "font: ".concat(typography$
|
|
968
|
-
h3: "font: ".concat(typography$
|
|
969
|
-
h4: "font: ".concat(typography$
|
|
970
|
-
h5: "font: ".concat(typography$
|
|
971
|
-
h6: "font: ".concat(typography$
|
|
972
|
-
subtitle: "font: ".concat(typography$
|
|
973
|
-
body: "font: ".concat(typography$
|
|
974
|
-
small: "font: ".concat(typography$
|
|
975
|
-
overline: "font: ".concat(typography$
|
|
976
|
-
caption: "font: ".concat(typography$
|
|
977
|
-
button1: "font: ".concat(typography$
|
|
978
|
-
button2: "font: ".concat(typography$
|
|
979
|
-
button3: "font: ".concat(typography$
|
|
980
|
-
label: "font: ".concat(typography$
|
|
1072
|
+
display: "font: ".concat(typography$5.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
1073
|
+
h1: "font: ".concat(typography$5.h1, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
1074
|
+
h2: "font: ".concat(typography$5.h2, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
1075
|
+
h3: "font: ".concat(typography$5.h3, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
1076
|
+
h4: "font: ".concat(typography$5.h4, "; letter-spacing: ").concat(tokensData.base.letterSpacing[1], ";"),
|
|
1077
|
+
h5: "font: ".concat(typography$5.h5, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
1078
|
+
h6: "font: ".concat(typography$5.h6, "; letter-spacing: ").concat(tokensData.base.letterSpacing[2], ";"),
|
|
1079
|
+
subtitle: "font: ".concat(typography$5.subtitle, ";"),
|
|
1080
|
+
body: "font: ".concat(typography$5.body, ";"),
|
|
1081
|
+
small: "font: ".concat(typography$5.small, ";"),
|
|
1082
|
+
overline: "font: ".concat(typography$5.overline, ";"),
|
|
1083
|
+
caption: "font: ".concat(typography$5.caption, "; text-transform: uppercase;"),
|
|
1084
|
+
button1: "font: ".concat(typography$5.button1, ";"),
|
|
1085
|
+
button2: "font: ".concat(typography$5.button2, ";"),
|
|
1086
|
+
button3: "font: ".concat(typography$5.button3, ";"),
|
|
1087
|
+
label: "font: ".concat(typography$5.label, ";")
|
|
981
1088
|
};
|
|
982
1089
|
return styles[variant] || styles.body;
|
|
983
1090
|
};
|
|
984
1091
|
var getTextColor = function getTextColor(colorVariant) {
|
|
985
1092
|
var colorMap = {
|
|
986
|
-
"default": color$
|
|
987
|
-
emphasis: color$
|
|
988
|
-
subdued: color$
|
|
989
|
-
inverse: color$
|
|
990
|
-
disabled: color$
|
|
991
|
-
interactive: color$
|
|
992
|
-
error: color$
|
|
993
|
-
success: color$
|
|
994
|
-
warning: color$
|
|
1093
|
+
"default": color$9.text["default"],
|
|
1094
|
+
emphasis: color$9.text.emphasis,
|
|
1095
|
+
subdued: color$9.text.subdued,
|
|
1096
|
+
inverse: color$9.text.inverse,
|
|
1097
|
+
disabled: color$9.text.disabled,
|
|
1098
|
+
interactive: color$9.text.interactive,
|
|
1099
|
+
error: color$9.text.error,
|
|
1100
|
+
success: color$9.text.success,
|
|
1101
|
+
warning: color$9.text.warning
|
|
995
1102
|
};
|
|
996
1103
|
return colorMap[colorVariant] || colorMap["default"];
|
|
997
1104
|
};
|
|
@@ -1022,7 +1129,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
1022
1129
|
},
|
|
1023
1130
|
displayName: "Typography__StyledTypography",
|
|
1024
1131
|
componentId: "sc-17mqo4k-0"
|
|
1025
|
-
})(templateObject_1$
|
|
1132
|
+
})(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"
|
|
1026
1133
|
/**
|
|
1027
1134
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
1028
1135
|
*
|
|
@@ -1090,22 +1197,24 @@ var Typography = function Typography(_a) {
|
|
|
1090
1197
|
children: children
|
|
1091
1198
|
});
|
|
1092
1199
|
};
|
|
1093
|
-
var templateObject_1$
|
|
1200
|
+
var templateObject_1$I;
|
|
1094
1201
|
|
|
1095
|
-
var
|
|
1096
|
-
|
|
1097
|
-
|
|
1202
|
+
var semantic$h = tokensData.semantic;
|
|
1203
|
+
var color$8 = semantic$h.color,
|
|
1204
|
+
border$9 = semantic$h.border;
|
|
1205
|
+
var radius$5 = border$9.radius;
|
|
1206
|
+
var scaleIn$1 = styled.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"])));
|
|
1098
1207
|
var BadgeWrapper = styled.span.withConfig({
|
|
1099
1208
|
displayName: "Badge__BadgeWrapper",
|
|
1100
1209
|
componentId: "sc-tjz4pp-0"
|
|
1101
|
-
})(templateObject_2$
|
|
1210
|
+
})(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"])));
|
|
1102
1211
|
var BadgeIndicator = styled.span.withConfig({
|
|
1103
1212
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1104
1213
|
return !prop.startsWith('$');
|
|
1105
1214
|
},
|
|
1106
1215
|
displayName: "Badge__BadgeIndicator",
|
|
1107
1216
|
componentId: "sc-tjz4pp-1"
|
|
1108
|
-
})(templateObject_3$
|
|
1217
|
+
})(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) {
|
|
1109
1218
|
return props.$isVisible ? 'flex' : 'none';
|
|
1110
1219
|
}, function (props) {
|
|
1111
1220
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1113,24 +1222,24 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1113
1222
|
return props.$isDot ? '8px' : '16px';
|
|
1114
1223
|
}, function (props) {
|
|
1115
1224
|
return props.$isDot ? '0' : '0 4px';
|
|
1116
|
-
},
|
|
1225
|
+
}, radius$5.circle, color$8.background["default"], scaleIn$1, function (props) {
|
|
1117
1226
|
switch (props.$variant) {
|
|
1118
1227
|
case 'primary':
|
|
1119
|
-
return "\n background-color: ".concat(color$
|
|
1228
|
+
return "\n background-color: ".concat(color$8.background.interactive, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1120
1229
|
case 'error':
|
|
1121
|
-
return "\n background-color: ".concat(color$
|
|
1230
|
+
return "\n background-color: ".concat(color$8.background.error, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1122
1231
|
case 'warning':
|
|
1123
|
-
return "\n background-color: ".concat(color$
|
|
1232
|
+
return "\n background-color: ".concat(color$8.background.warning, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1124
1233
|
case 'success':
|
|
1125
|
-
return "\n background-color: ".concat(color$
|
|
1234
|
+
return "\n background-color: ".concat(color$8.background.success, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1126
1235
|
default:
|
|
1127
|
-
return "\n background-color: ".concat(color$
|
|
1236
|
+
return "\n background-color: ".concat(color$8.background.emphasis, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1128
1237
|
}
|
|
1129
1238
|
});
|
|
1130
1239
|
var ScreenReaderOnly$1 = styled.span.withConfig({
|
|
1131
1240
|
displayName: "Badge__ScreenReaderOnly",
|
|
1132
1241
|
componentId: "sc-tjz4pp-2"
|
|
1133
|
-
})(templateObject_4$
|
|
1242
|
+
})(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"])));
|
|
1134
1243
|
var Badge = function Badge(_a) {
|
|
1135
1244
|
var children = _a.children,
|
|
1136
1245
|
_b = _a.count,
|
|
@@ -1166,7 +1275,7 @@ var Badge = function Badge(_a) {
|
|
|
1166
1275
|
})]
|
|
1167
1276
|
});
|
|
1168
1277
|
};
|
|
1169
|
-
var templateObject_1$
|
|
1278
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l;
|
|
1170
1279
|
|
|
1171
1280
|
var StyledBox = styled.div.withConfig({
|
|
1172
1281
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1174,40 +1283,40 @@ var StyledBox = styled.div.withConfig({
|
|
|
1174
1283
|
},
|
|
1175
1284
|
displayName: "Box__StyledBox",
|
|
1176
1285
|
componentId: "sc-aj0jhd-0"
|
|
1177
|
-
})(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 //
|
|
1286
|
+
})(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"
|
|
1178
1287
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1179
1288
|
])), function (props) {
|
|
1180
|
-
return props.$display && styled.css(templateObject_1$
|
|
1289
|
+
return props.$display && styled.css(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1181
1290
|
}, function (props) {
|
|
1182
|
-
return props.$flexDirection && styled.css(templateObject_2$
|
|
1291
|
+
return props.$flexDirection && styled.css(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1183
1292
|
}, function (props) {
|
|
1184
|
-
return props.$justifyContent && styled.css(templateObject_3$
|
|
1293
|
+
return props.$justifyContent && styled.css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1185
1294
|
}, function (props) {
|
|
1186
|
-
return props.$alignItems && styled.css(templateObject_4$
|
|
1295
|
+
return props.$alignItems && styled.css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1187
1296
|
}, function (props) {
|
|
1188
|
-
return props.$flexWrap && styled.css(templateObject_5$
|
|
1297
|
+
return props.$flexWrap && styled.css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1189
1298
|
}, function (props) {
|
|
1190
|
-
return props.$gap && styled.css(templateObject_6$
|
|
1299
|
+
return props.$gap && styled.css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1191
1300
|
}, function (props) {
|
|
1192
|
-
return props.$m && styled.css(templateObject_7$
|
|
1301
|
+
return props.$m && styled.css(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1193
1302
|
}, function (props) {
|
|
1194
|
-
return props.$mt && styled.css(templateObject_8$
|
|
1303
|
+
return props.$mt && styled.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1195
1304
|
}, function (props) {
|
|
1196
1305
|
return props.$mr && styled.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
|
|
1197
1306
|
}, function (props) {
|
|
1198
1307
|
return props.$mb && styled.css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
|
|
1199
1308
|
}, function (props) {
|
|
1200
|
-
return props.$ml && styled.css(templateObject_11$
|
|
1309
|
+
return props.$ml && styled.css(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
|
|
1201
1310
|
}, function (props) {
|
|
1202
|
-
return props.$mx && styled.css(templateObject_12$
|
|
1311
|
+
return props.$mx && styled.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]);
|
|
1203
1312
|
}, function (props) {
|
|
1204
|
-
return props.$my && styled.css(templateObject_13$
|
|
1313
|
+
return props.$my && styled.css(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n margin-top: ", ";\n margin-bottom: ", ";\n "], ["\n margin-top: ", ";\n margin-bottom: ", ";\n "])), tokensData.semantic.spacing.layout[props.$my], tokensData.semantic.spacing.layout[props.$my]);
|
|
1205
1314
|
}, function (props) {
|
|
1206
|
-
return props.$p && styled.css(templateObject_14$
|
|
1315
|
+
return props.$p && styled.css(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), tokensData.semantic.spacing.layout[props.$p]);
|
|
1207
1316
|
}, function (props) {
|
|
1208
|
-
return props.$pt && styled.css(templateObject_15$
|
|
1317
|
+
return props.$pt && styled.css(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), tokensData.semantic.spacing.layout[props.$pt]);
|
|
1209
1318
|
}, function (props) {
|
|
1210
|
-
return props.$pr && styled.css(templateObject_16$
|
|
1319
|
+
return props.$pr && styled.css(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensData.semantic.spacing.layout[props.$pr]);
|
|
1211
1320
|
}, function (props) {
|
|
1212
1321
|
return props.$pb && styled.css(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$pb]);
|
|
1213
1322
|
}, function (props) {
|
|
@@ -1239,7 +1348,7 @@ var StyledBox = styled.div.withConfig({
|
|
|
1239
1348
|
}, function (props) {
|
|
1240
1349
|
return props.$left && styled.css(templateObject_31$1 || (templateObject_31$1 = __makeTemplateObject(["left: ", ";"], ["left: ", ";"])), props.$left);
|
|
1241
1350
|
}, function (props) {
|
|
1242
|
-
return props.$borderRadius && styled.css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensData.
|
|
1351
|
+
return props.$borderRadius && styled.css(templateObject_32$1 || (templateObject_32$1 = __makeTemplateObject(["border-radius: ", ";"], ["border-radius: ", ";"])), tokensData.semantic.border.radius[props.$borderRadius]);
|
|
1243
1352
|
}, function (props) {
|
|
1244
1353
|
return props.$border && styled.css(templateObject_33$1 || (templateObject_33$1 = __makeTemplateObject(["border: 1px solid ", ";"], ["border: 1px solid ", ";"])), tokensData.semantic.color.border[props.$border]);
|
|
1245
1354
|
}, function (props) {
|
|
@@ -1255,13 +1364,13 @@ var StyledBox = styled.div.withConfig({
|
|
|
1255
1364
|
}, function (props) {
|
|
1256
1365
|
return props.$color && styled.css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), tokensData.semantic.color.text[props.$color]);
|
|
1257
1366
|
}, function (props) {
|
|
1258
|
-
return props.$shadow && styled.css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.
|
|
1367
|
+
return props.$shadow && styled.css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.semantic.elevation[props.$shadow]);
|
|
1259
1368
|
}, function (props) {
|
|
1260
1369
|
return props.$cursor && styled.css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["cursor: ", ";"], ["cursor: ", ";"])), props.$cursor);
|
|
1261
1370
|
}, function (props) {
|
|
1262
1371
|
return props.$transition && styled.css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["transition: ", ";"], ["transition: ", ";"])), props.$transition);
|
|
1263
1372
|
}, function (props) {
|
|
1264
|
-
return (props.$hoverShadow || props.$hoverTransform) && styled.css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 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 && styled.css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.
|
|
1373
|
+
return (props.$hoverShadow || props.$hoverTransform) && styled.css(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n &:hover {\n ", "\n ", "\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 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 && styled.css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["box-shadow: ", ";"], ["box-shadow: ", ";"])), tokensData.semantic.elevation[props.$hoverShadow]), props.$hoverTransform && styled.css(templateObject_44 || (templateObject_44 = __makeTemplateObject(["transform: ", ";"], ["transform: ", ";"])), props.$hoverTransform), tokensData.semantic.color.border.interactive);
|
|
1265
1374
|
}, function (props) {
|
|
1266
1375
|
return props.$overflow && styled.css(templateObject_46 || (templateObject_46 = __makeTemplateObject(["overflow: ", ";"], ["overflow: ", ";"])), props.$overflow);
|
|
1267
1376
|
}, function (props) {
|
|
@@ -1401,14 +1510,14 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1401
1510
|
}));
|
|
1402
1511
|
};
|
|
1403
1512
|
var Box = BoxTransform;
|
|
1404
|
-
var templateObject_1$
|
|
1513
|
+
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;
|
|
1405
1514
|
|
|
1406
1515
|
var add = {
|
|
1407
1516
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
1408
1517
|
name: "add"
|
|
1409
1518
|
};
|
|
1410
1519
|
var addRing = {
|
|
1411
|
-
path: "
|
|
1520
|
+
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",
|
|
1412
1521
|
name: "addRing"
|
|
1413
1522
|
};
|
|
1414
1523
|
var arrowDown = {
|
|
@@ -1428,7 +1537,7 @@ var arrowRight = {
|
|
|
1428
1537
|
name: "arrowRight"
|
|
1429
1538
|
};
|
|
1430
1539
|
var bell = {
|
|
1431
|
-
path: "M12
|
|
1540
|
+
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",
|
|
1432
1541
|
name: "bell"
|
|
1433
1542
|
};
|
|
1434
1543
|
var back = {
|
|
@@ -1464,13 +1573,17 @@ var close = {
|
|
|
1464
1573
|
name: "close"
|
|
1465
1574
|
};
|
|
1466
1575
|
var crossCircle = {
|
|
1467
|
-
path: "
|
|
1576
|
+
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",
|
|
1468
1577
|
name: "crossCircle"
|
|
1469
1578
|
};
|
|
1470
1579
|
var directionRight = {
|
|
1471
1580
|
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",
|
|
1472
1581
|
name: "directionRight"
|
|
1473
1582
|
};
|
|
1583
|
+
var directionUp = {
|
|
1584
|
+
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",
|
|
1585
|
+
name: "directionUp"
|
|
1586
|
+
};
|
|
1474
1587
|
var edit = {
|
|
1475
1588
|
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",
|
|
1476
1589
|
name: "edit"
|
|
@@ -1519,6 +1632,10 @@ var message = {
|
|
|
1519
1632
|
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",
|
|
1520
1633
|
name: "message"
|
|
1521
1634
|
};
|
|
1635
|
+
var mic = {
|
|
1636
|
+
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",
|
|
1637
|
+
name: "mic"
|
|
1638
|
+
};
|
|
1522
1639
|
var copy = {
|
|
1523
1640
|
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",
|
|
1524
1641
|
name: "copy"
|
|
@@ -1589,6 +1706,7 @@ var iconsData = {
|
|
|
1589
1706
|
close: close,
|
|
1590
1707
|
crossCircle: crossCircle,
|
|
1591
1708
|
directionRight: directionRight,
|
|
1709
|
+
directionUp: directionUp,
|
|
1592
1710
|
edit: edit,
|
|
1593
1711
|
"export": {
|
|
1594
1712
|
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",
|
|
@@ -1605,6 +1723,7 @@ var iconsData = {
|
|
|
1605
1723
|
playBack: playBack,
|
|
1606
1724
|
lineOut: lineOut,
|
|
1607
1725
|
message: message,
|
|
1726
|
+
mic: mic,
|
|
1608
1727
|
copy: copy,
|
|
1609
1728
|
link: link,
|
|
1610
1729
|
order: order,
|
|
@@ -1626,7 +1745,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1626
1745
|
},
|
|
1627
1746
|
displayName: "Icon__IconStyled",
|
|
1628
1747
|
componentId: "sc-1105czq-0"
|
|
1629
|
-
})(templateObject_1$
|
|
1748
|
+
})(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) {
|
|
1630
1749
|
var $size = _a.$size;
|
|
1631
1750
|
return tokensData.semantic.size.icon[$size];
|
|
1632
1751
|
}, function (_a) {
|
|
@@ -1692,29 +1811,72 @@ var Icon = function Icon(_a) {
|
|
|
1692
1811
|
})
|
|
1693
1812
|
});
|
|
1694
1813
|
};
|
|
1695
|
-
var templateObject_1$
|
|
1814
|
+
var templateObject_1$F;
|
|
1696
1815
|
|
|
1697
|
-
var button = tokensData.component.button,
|
|
1698
|
-
semantic$
|
|
1816
|
+
var button$1 = tokensData.component.button,
|
|
1817
|
+
semantic$g = tokensData.semantic;
|
|
1699
1818
|
// Base styles shared between button and link
|
|
1700
|
-
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$
|
|
1819
|
+
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");
|
|
1701
1820
|
// Dynamic variant styles using component tokens
|
|
1702
1821
|
var getVariantStyles$1 = function getVariantStyles(_a) {
|
|
1703
1822
|
var $variant = _a.$variant;
|
|
1704
|
-
|
|
1823
|
+
var variantConfig = {
|
|
1824
|
+
primary: {
|
|
1825
|
+
bg: button$1.primary.backgroundColor,
|
|
1826
|
+
text: button$1.primary.textColor,
|
|
1827
|
+
hoverBg: button$1.hover.backgroundColor,
|
|
1828
|
+
activeBg: button$1.active.backgroundColor,
|
|
1829
|
+
disabledBg: button$1.disabled.backgroundColor,
|
|
1830
|
+
disabledText: button$1.disabled.textColor
|
|
1831
|
+
},
|
|
1832
|
+
secondary: {
|
|
1833
|
+
bg: button$1.variants.secondary.backgroundColor,
|
|
1834
|
+
text: button$1.variants.secondary.textColor,
|
|
1835
|
+
hoverBg: button$1.variants.secondary.hover.backgroundColor,
|
|
1836
|
+
activeBg: button$1.variants.secondary.active.backgroundColor,
|
|
1837
|
+
disabledBg: button$1.variants.secondary.disabled.backgroundColor,
|
|
1838
|
+
disabledText: button$1.variants.secondary.disabled.textColor
|
|
1839
|
+
},
|
|
1840
|
+
naked: {
|
|
1841
|
+
bg: button$1.variants.naked.backgroundColor,
|
|
1842
|
+
text: button$1.variants.naked.textColor,
|
|
1843
|
+
hoverBg: button$1.variants.naked.hover.backgroundColor,
|
|
1844
|
+
activeBg: button$1.variants.naked.active.backgroundColor,
|
|
1845
|
+
disabledBg: button$1.variants.naked.disabled.backgroundColor,
|
|
1846
|
+
disabledText: button$1.variants.naked.disabled.textColor
|
|
1847
|
+
},
|
|
1848
|
+
emphasis: {
|
|
1849
|
+
bg: button$1.variants.emphasis.backgroundColor,
|
|
1850
|
+
text: button$1.variants.emphasis.textColor,
|
|
1851
|
+
hoverBg: button$1.variants.emphasis.hover.backgroundColor,
|
|
1852
|
+
activeBg: button$1.variants.emphasis.active.backgroundColor,
|
|
1853
|
+
disabledBg: button$1.variants.emphasis.disabled.backgroundColor,
|
|
1854
|
+
disabledText: button$1.variants.emphasis.disabled.textColor
|
|
1855
|
+
},
|
|
1856
|
+
danger: {
|
|
1857
|
+
bg: button$1.variants.danger.backgroundColor,
|
|
1858
|
+
text: button$1.variants.danger.textColor,
|
|
1859
|
+
hoverBg: button$1.variants.danger.hover.backgroundColor,
|
|
1860
|
+
activeBg: button$1.variants.danger.active.backgroundColor,
|
|
1861
|
+
disabledBg: button$1.variants.danger.disabled.backgroundColor,
|
|
1862
|
+
disabledText: button$1.variants.danger.disabled.textColor
|
|
1863
|
+
}
|
|
1864
|
+
};
|
|
1865
|
+
var config = variantConfig[$variant];
|
|
1866
|
+
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 ");
|
|
1705
1867
|
};
|
|
1706
1868
|
// Dynamic size styles using component tokens
|
|
1707
|
-
var getSizeStyles$
|
|
1869
|
+
var getSizeStyles$1 = function getSizeStyles(_a) {
|
|
1708
1870
|
var $size = _a.$size;
|
|
1709
1871
|
switch ($size) {
|
|
1710
1872
|
case 'small':
|
|
1711
|
-
return "\n font: ".concat(button.sizes.small.font, ";\n padding: ").concat(button.sizes.small.padding, ";\n ");
|
|
1873
|
+
return "\n font: ".concat(button$1.sizes.small.font, ";\n padding: ").concat(button$1.sizes.small.padding, ";\n ");
|
|
1712
1874
|
case 'medium':
|
|
1713
|
-
return "\n font: ".concat(button.sizes.medium.font, ";\n padding: ").concat(button.sizes.medium.padding, ";\n ");
|
|
1875
|
+
return "\n font: ".concat(button$1.sizes.medium.font, ";\n padding: ").concat(button$1.sizes.medium.padding, ";\n ");
|
|
1714
1876
|
case 'large':
|
|
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
|
default:
|
|
1717
|
-
return "\n font: ".concat(button.sizes.large.font, ";\n padding: ").concat(button.sizes.large.padding, ";\n ");
|
|
1879
|
+
return "\n font: ".concat(button$1.sizes.large.font, ";\n padding: ").concat(button$1.sizes.large.padding, ";\n ");
|
|
1718
1880
|
}
|
|
1719
1881
|
};
|
|
1720
1882
|
var StyledButton = styled.button.withConfig({
|
|
@@ -1723,16 +1885,16 @@ var StyledButton = styled.button.withConfig({
|
|
|
1723
1885
|
},
|
|
1724
1886
|
displayName: "Button__StyledButton",
|
|
1725
1887
|
componentId: "sc-1eiuum9-0"
|
|
1726
|
-
})(templateObject_1$
|
|
1888
|
+
})(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);
|
|
1727
1889
|
var StyledLink = styled.a.withConfig({
|
|
1728
1890
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1729
1891
|
return !prop.startsWith('$');
|
|
1730
1892
|
},
|
|
1731
1893
|
displayName: "Button__StyledLink",
|
|
1732
1894
|
componentId: "sc-1eiuum9-1"
|
|
1733
|
-
})(templateObject_2$
|
|
1895
|
+
})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1734
1896
|
// Helper function to get icon size based on button size
|
|
1735
|
-
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles$1, getSizeStyles$
|
|
1897
|
+
])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
|
|
1736
1898
|
// Helper function to get icon size based on button size
|
|
1737
1899
|
var getIconSize = function getIconSize(buttonSize) {
|
|
1738
1900
|
switch (buttonSize) {
|
|
@@ -1831,64 +1993,30 @@ var Button = function Button(_a) {
|
|
|
1831
1993
|
children: renderButtonContent(children, iconName, size)
|
|
1832
1994
|
}));
|
|
1833
1995
|
};
|
|
1834
|
-
var templateObject_1$
|
|
1996
|
+
var templateObject_1$E, templateObject_2$r;
|
|
1835
1997
|
|
|
1836
|
-
var semantic$
|
|
1837
|
-
base$
|
|
1838
|
-
var
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
};
|
|
1846
|
-
}
|
|
1847
|
-
if (variant === 'outlined') {
|
|
1848
|
-
return {
|
|
1849
|
-
backgroundColor: 'transparent',
|
|
1850
|
-
color: semantic$e.color.category[colorKey],
|
|
1851
|
-
borderColor: semantic$e.color.category[colorKey]
|
|
1852
|
-
};
|
|
1853
|
-
}
|
|
1854
|
-
// minimal
|
|
1855
|
-
return {
|
|
1856
|
-
backgroundColor: semantic$e.color.category["".concat(colorKey, "-subtle")],
|
|
1857
|
-
color: semantic$e.color.category[colorKey],
|
|
1858
|
-
borderColor: 'transparent'
|
|
1859
|
-
};
|
|
1860
|
-
};
|
|
1861
|
-
var getSizeStyles$2 = function getSizeStyles(size) {
|
|
1862
|
-
if (size === 'small') {
|
|
1863
|
-
return {
|
|
1864
|
-
height: '24px',
|
|
1865
|
-
padding: "".concat(base$c.spacing[1], " ").concat(base$c.spacing[2]),
|
|
1866
|
-
font: semantic$e.typography.caption,
|
|
1867
|
-
gap: base$c.spacing[1],
|
|
1868
|
-
iconSize: 'xs'
|
|
1869
|
-
};
|
|
1870
|
-
}
|
|
1871
|
-
// medium
|
|
1872
|
-
return {
|
|
1873
|
-
height: '32px',
|
|
1874
|
-
padding: "".concat(base$c.spacing[2], " ").concat(base$c.spacing[3]),
|
|
1875
|
-
font: semantic$e.typography.small,
|
|
1876
|
-
gap: base$c.spacing[1],
|
|
1877
|
-
iconSize: 'sm'
|
|
1878
|
-
};
|
|
1879
|
-
};
|
|
1998
|
+
var semantic$f = tokensData.semantic,
|
|
1999
|
+
base$b = tokensData.base;
|
|
2000
|
+
var color$7 = semantic$f.color,
|
|
2001
|
+
typography$4 = semantic$f.typography,
|
|
2002
|
+
border$8 = semantic$f.border,
|
|
2003
|
+
spacing$7 = semantic$f.spacing;
|
|
2004
|
+
var category = color$7.category;
|
|
2005
|
+
var radius$4 = border$8.radius;
|
|
2006
|
+
var layout$3 = spacing$7.layout;
|
|
1880
2007
|
var StyledCategoryBadge = styled.span.withConfig({
|
|
1881
2008
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1882
2009
|
return !prop.startsWith('$');
|
|
1883
2010
|
},
|
|
1884
2011
|
displayName: "CategoryBadge__StyledCategoryBadge",
|
|
1885
2012
|
componentId: "sc-17aslpn-0"
|
|
1886
|
-
})(templateObject_1$
|
|
2013
|
+
})(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"
|
|
1887
2014
|
/**
|
|
1888
2015
|
* CategoryBadge component for displaying transaction categories
|
|
1889
2016
|
*
|
|
1890
|
-
*
|
|
1891
|
-
*
|
|
2017
|
+
* A static label for categorizing content with support for 8 color options,
|
|
2018
|
+
* 3 visual variants, and optional icons. Perfect for categorizing
|
|
2019
|
+
* financial transactions or content types.
|
|
1892
2020
|
*
|
|
1893
2021
|
* @example
|
|
1894
2022
|
* ```tsx
|
|
@@ -1896,23 +2024,51 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
1896
2024
|
* Food & Dining
|
|
1897
2025
|
* </CategoryBadge>
|
|
1898
2026
|
*
|
|
1899
|
-
* <CategoryBadge
|
|
1900
|
-
* color="blue"
|
|
1901
|
-
* variant="outlined"
|
|
1902
|
-
* size="small"
|
|
1903
|
-
* onClick={() => filterByCategory('travel')}
|
|
1904
|
-
* >
|
|
2027
|
+
* <CategoryBadge color="blue" variant="outlined" size="small">
|
|
1905
2028
|
* Travel
|
|
1906
2029
|
* </CategoryBadge>
|
|
1907
2030
|
* ```
|
|
1908
|
-
*/])),
|
|
1909
|
-
|
|
1910
|
-
|
|
2031
|
+
*/])), radius$4.circle, base$b.fontWeight[3], base$b.border.width[1], function (_a) {
|
|
2032
|
+
var $size = _a.$size;
|
|
2033
|
+
return $size === 'small' ? '24px' : '32px';
|
|
2034
|
+
}, function (_a) {
|
|
2035
|
+
var $size = _a.$size;
|
|
2036
|
+
return $size === 'small' ? "".concat(layout$3.xs, " ").concat(layout$3.sm) : "".concat(layout$3.sm, " ").concat(layout$3.md);
|
|
2037
|
+
}, function (_a) {
|
|
2038
|
+
var $size = _a.$size;
|
|
2039
|
+
return $size === 'small' ? typography$4.caption : typography$4.small;
|
|
2040
|
+
}, layout$3.xs, function (_a) {
|
|
2041
|
+
var $color = _a.$color,
|
|
2042
|
+
$variant = _a.$variant;
|
|
2043
|
+
if ($variant === 'filled') {
|
|
2044
|
+
return category["".concat($color, "-emphasis")];
|
|
2045
|
+
}
|
|
2046
|
+
if ($variant === 'outlined') {
|
|
2047
|
+
return 'transparent';
|
|
2048
|
+
}
|
|
2049
|
+
// minimal
|
|
2050
|
+
return category["".concat($color, "-subtle")];
|
|
2051
|
+
}, function (_a) {
|
|
2052
|
+
var $color = _a.$color,
|
|
2053
|
+
$variant = _a.$variant;
|
|
2054
|
+
if ($variant === 'filled') {
|
|
2055
|
+
return color$7.text.inverse;
|
|
2056
|
+
}
|
|
2057
|
+
return category[$color];
|
|
2058
|
+
}, function (_a) {
|
|
2059
|
+
var $color = _a.$color,
|
|
2060
|
+
$variant = _a.$variant;
|
|
2061
|
+
if ($variant === 'outlined') {
|
|
2062
|
+
return category[$color];
|
|
2063
|
+
}
|
|
2064
|
+
return 'transparent';
|
|
2065
|
+
});
|
|
1911
2066
|
/**
|
|
1912
2067
|
* CategoryBadge component for displaying transaction categories
|
|
1913
2068
|
*
|
|
1914
|
-
*
|
|
1915
|
-
*
|
|
2069
|
+
* A static label for categorizing content with support for 8 color options,
|
|
2070
|
+
* 3 visual variants, and optional icons. Perfect for categorizing
|
|
2071
|
+
* financial transactions or content types.
|
|
1916
2072
|
*
|
|
1917
2073
|
* @example
|
|
1918
2074
|
* ```tsx
|
|
@@ -1920,12 +2076,7 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
1920
2076
|
* Food & Dining
|
|
1921
2077
|
* </CategoryBadge>
|
|
1922
2078
|
*
|
|
1923
|
-
* <CategoryBadge
|
|
1924
|
-
* color="blue"
|
|
1925
|
-
* variant="outlined"
|
|
1926
|
-
* size="small"
|
|
1927
|
-
* onClick={() => filterByCategory('travel')}
|
|
1928
|
-
* >
|
|
2079
|
+
* <CategoryBadge color="blue" variant="outlined" size="small">
|
|
1929
2080
|
* Travel
|
|
1930
2081
|
* </CategoryBadge>
|
|
1931
2082
|
* ```
|
|
@@ -1939,85 +2090,51 @@ var CategoryBadge = function CategoryBadge(_a) {
|
|
|
1939
2090
|
_d = _a.size,
|
|
1940
2091
|
size = _d === void 0 ? 'medium' : _d,
|
|
1941
2092
|
icon = _a.icon,
|
|
1942
|
-
onClick = _a.onClick,
|
|
1943
|
-
_e = _a.disabled,
|
|
1944
|
-
disabled = _e === void 0 ? false : _e,
|
|
1945
2093
|
dataTestId = _a["data-testid"],
|
|
1946
2094
|
ariaLabel = _a["aria-label"];
|
|
1947
|
-
var
|
|
1948
|
-
var isClickable = hasClickHandler && !disabled;
|
|
1949
|
-
var colorStyles = getColorStyles(color, variant);
|
|
1950
|
-
var sizeStyles = getSizeStyles$2(size);
|
|
1951
|
-
var cssProps = {
|
|
1952
|
-
'--category-badge-bg': colorStyles.backgroundColor,
|
|
1953
|
-
'--category-badge-color': colorStyles.color,
|
|
1954
|
-
'--category-badge-border': colorStyles.borderColor,
|
|
1955
|
-
'--category-badge-height': sizeStyles.height,
|
|
1956
|
-
'--category-badge-padding': sizeStyles.padding,
|
|
1957
|
-
'--category-badge-font': sizeStyles.font,
|
|
1958
|
-
'--category-badge-gap': sizeStyles.gap,
|
|
1959
|
-
'--category-badge-opacity': disabled ? '0.6' : '1',
|
|
1960
|
-
'--category-badge-cursor': disabled ? 'not-allowed' : isClickable ? 'pointer' : 'default'
|
|
1961
|
-
};
|
|
1962
|
-
var handleClick = function handleClick() {
|
|
1963
|
-
if (isClickable) {
|
|
1964
|
-
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
1965
|
-
}
|
|
1966
|
-
};
|
|
1967
|
-
var handleKeyDown = function handleKeyDown(event) {
|
|
1968
|
-
if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
|
|
1969
|
-
event.preventDefault();
|
|
1970
|
-
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
1971
|
-
}
|
|
1972
|
-
};
|
|
2095
|
+
var iconSize = size === 'small' ? 'xs' : 'sm';
|
|
1973
2096
|
return jsxRuntime.jsxs(StyledCategoryBadge, {
|
|
1974
2097
|
"$color": color,
|
|
1975
2098
|
"$variant": variant,
|
|
1976
2099
|
"$size": size,
|
|
1977
|
-
"$clickable": isClickable,
|
|
1978
|
-
"$disabled": disabled,
|
|
1979
|
-
onClick: handleClick,
|
|
1980
|
-
onKeyDown: handleKeyDown,
|
|
1981
|
-
tabIndex: hasClickHandler ? 0 : undefined,
|
|
1982
|
-
role: hasClickHandler ? 'button' : undefined,
|
|
1983
2100
|
"aria-label": ariaLabel,
|
|
1984
|
-
"aria-disabled": disabled,
|
|
1985
2101
|
"data-testid": dataTestId,
|
|
1986
|
-
style: cssProps,
|
|
1987
2102
|
children: [icon && jsxRuntime.jsx(Icon, {
|
|
1988
2103
|
name: icon,
|
|
1989
|
-
size:
|
|
2104
|
+
size: iconSize,
|
|
1990
2105
|
iconColor: variant === 'filled' ? 'inverse' : 'inherit',
|
|
1991
2106
|
"aria-hidden": "true"
|
|
1992
2107
|
}), children]
|
|
1993
2108
|
});
|
|
1994
2109
|
};
|
|
1995
2110
|
CategoryBadge.displayName = 'CategoryBadge';
|
|
1996
|
-
var templateObject_1$
|
|
2111
|
+
var templateObject_1$D;
|
|
1997
2112
|
|
|
1998
2113
|
var chip = tokensData.component.chip;
|
|
1999
2114
|
// Helper function to get variant styles matching Button's approach
|
|
2000
2115
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
2001
2116
|
var $variant = _a.$variant,
|
|
2002
|
-
$selected = _a.$selected
|
|
2117
|
+
$selected = _a.$selected,
|
|
2118
|
+
$clickable = _a.$clickable,
|
|
2119
|
+
$disabled = _a.$disabled;
|
|
2003
2120
|
// Boolean chips with selected state get special background
|
|
2004
2121
|
if ($selected) {
|
|
2005
|
-
return "\n background-color: ".concat(tokensData.semantic.color.background['interactive-subtle'], ";\n color: ").concat(chip["default"].textColor, ";\n ");
|
|
2122
|
+
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 ");
|
|
2006
2123
|
}
|
|
2007
2124
|
switch ($variant) {
|
|
2008
2125
|
case 'emphasis':
|
|
2009
|
-
return "\n background-color: ".concat(chip.variants.emphasis.backgroundColor, ";\n color: ").concat(chip.variants.emphasis.textColor, ";\n ");
|
|
2126
|
+
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 ");
|
|
2010
2127
|
case 'subtle':
|
|
2011
|
-
return "\n background-color: ".concat(chip.variants.subtle.backgroundColor, ";\n color: ").concat(chip.variants.subtle.textColor, ";\n ");
|
|
2128
|
+
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 ");
|
|
2012
2129
|
case 'interactive':
|
|
2013
|
-
return "\n background-color: ".concat(chip.variants.interactive.backgroundColor, ";\n color: ").concat(chip.variants.interactive.textColor, ";\n ");
|
|
2130
|
+
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 ");
|
|
2014
2131
|
case 'default':
|
|
2015
2132
|
default:
|
|
2016
|
-
return "\n background-color: ".concat(chip["default"].backgroundColor, ";\n color: ").concat(chip["default"].textColor, ";\n ");
|
|
2133
|
+
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 ");
|
|
2017
2134
|
}
|
|
2018
2135
|
};
|
|
2019
2136
|
// Helper function to get size styles matching Button's approach
|
|
2020
|
-
var getSizeStyles
|
|
2137
|
+
var getSizeStyles = function getSizeStyles(_a) {
|
|
2021
2138
|
var $size = _a.$size;
|
|
2022
2139
|
switch ($size) {
|
|
2023
2140
|
case 'small':
|
|
@@ -2035,24 +2152,18 @@ var StyledChip = styled.span.withConfig({
|
|
|
2035
2152
|
},
|
|
2036
2153
|
displayName: "ChipBase__StyledChip",
|
|
2037
2154
|
componentId: "sc-moa6zc-0"
|
|
2038
|
-
})(templateObject_1$
|
|
2155
|
+
})(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"
|
|
2039
2156
|
// Icon container for selected indicator or leading icons
|
|
2040
|
-
])),
|
|
2157
|
+
])), chip["default"].borderRadius, tokensData.semantic.motion.hover, function (props) {
|
|
2041
2158
|
return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
|
|
2042
|
-
},
|
|
2043
|
-
return props.$disabled ? '0.6' : '1';
|
|
2044
|
-
}, getVariantStyles, getSizeStyles$1, function (props) {
|
|
2045
|
-
return props.$disabled ? '0.6' : props.$clickable ? '0.8' : '1';
|
|
2046
|
-
}, function (props) {
|
|
2047
|
-
return props.$disabled ? '0.6' : props.$clickable ? '0.9' : '1';
|
|
2048
|
-
}, chip.variants.interactive.backgroundColor);
|
|
2159
|
+
}, getVariantStyles, getSizeStyles, chip.focus.outline, chip.focus.outlineOffset);
|
|
2049
2160
|
// Icon container for selected indicator or leading icons
|
|
2050
2161
|
var IconContainer = styled.span.withConfig({
|
|
2051
2162
|
displayName: "ChipBase__IconContainer",
|
|
2052
2163
|
componentId: "sc-moa6zc-1"
|
|
2053
|
-
})(templateObject_2$
|
|
2164
|
+
})(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"
|
|
2054
2165
|
// Close button for dismissible chips
|
|
2055
|
-
])), tokensData.semantic.spacing.layout.
|
|
2166
|
+
])), tokensData.semantic.spacing.layout.xs);
|
|
2056
2167
|
// Close button for dismissible chips
|
|
2057
2168
|
var CloseButton = styled.button.withConfig({
|
|
2058
2169
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2060,12 +2171,10 @@ var CloseButton = styled.button.withConfig({
|
|
|
2060
2171
|
},
|
|
2061
2172
|
displayName: "ChipBase__CloseButton",
|
|
2062
2173
|
componentId: "sc-moa6zc-2"
|
|
2063
|
-
})(templateObject_3$
|
|
2174
|
+
})(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) {
|
|
2064
2175
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
2065
|
-
},
|
|
2066
|
-
|
|
2067
|
-
}, tokensData.semantic.motion.transition.fast, chip.variants.interactive.backgroundColor);
|
|
2068
|
-
var templateObject_1$B, templateObject_2$p, templateObject_3$n;
|
|
2176
|
+
}, tokensData.semantic.motion.hover, tokensData.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
|
|
2177
|
+
var templateObject_1$C, templateObject_2$q, templateObject_3$o;
|
|
2069
2178
|
|
|
2070
2179
|
/**
|
|
2071
2180
|
* Chip - Compact element for displaying tags, categories, and labels
|
|
@@ -2311,37 +2420,37 @@ var media$1 = {
|
|
|
2311
2420
|
'2xl': "@media (min-width: ".concat(breakpoints$1['2xl'], ")")
|
|
2312
2421
|
};
|
|
2313
2422
|
|
|
2314
|
-
var spacing$
|
|
2423
|
+
var spacing$6 = tokensData.semantic.spacing;
|
|
2315
2424
|
var StyledContainer$2 = styled.div.withConfig({
|
|
2316
2425
|
displayName: "Container__StyledContainer",
|
|
2317
2426
|
componentId: "sc-17dbj6n-0"
|
|
2318
|
-
})(templateObject_1$
|
|
2319
|
-
var Container = function Container(_a) {
|
|
2427
|
+
})(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']);
|
|
2428
|
+
var Container$1 = function Container(_a) {
|
|
2320
2429
|
var children = _a.children,
|
|
2321
2430
|
props = __rest(_a, ["children"]);
|
|
2322
2431
|
return jsxRuntime.jsx(StyledContainer$2, __assign({}, props, {
|
|
2323
2432
|
children: children
|
|
2324
2433
|
}));
|
|
2325
2434
|
};
|
|
2326
|
-
var templateObject_1$
|
|
2435
|
+
var templateObject_1$B;
|
|
2327
2436
|
|
|
2328
|
-
var base$
|
|
2437
|
+
var base$a = tokensData.base;
|
|
2329
2438
|
var PictureWrapper = styled.div.withConfig({
|
|
2330
2439
|
displayName: "Picture__PictureWrapper",
|
|
2331
2440
|
componentId: "sc-11d9tei-0"
|
|
2332
|
-
})(templateObject_1$
|
|
2441
|
+
})(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);
|
|
2333
2442
|
var ImageLink = styled.a.withConfig({
|
|
2334
2443
|
displayName: "Picture__ImageLink",
|
|
2335
2444
|
componentId: "sc-11d9tei-1"
|
|
2336
|
-
})(templateObject_2$
|
|
2445
|
+
})(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);
|
|
2337
2446
|
var ImageButton = styled.button.withConfig({
|
|
2338
2447
|
displayName: "Picture__ImageButton",
|
|
2339
2448
|
componentId: "sc-11d9tei-2"
|
|
2340
|
-
})(templateObject_3$
|
|
2449
|
+
})(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);
|
|
2341
2450
|
var StyledImage = styled.img.withConfig({
|
|
2342
2451
|
displayName: "Picture__StyledImage",
|
|
2343
2452
|
componentId: "sc-11d9tei-3"
|
|
2344
|
-
})(templateObject_4$
|
|
2453
|
+
})(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]);
|
|
2345
2454
|
var Picture = function Picture(_a) {
|
|
2346
2455
|
var title = _a.title,
|
|
2347
2456
|
src = _a.src,
|
|
@@ -2371,18 +2480,18 @@ var Picture = function Picture(_a) {
|
|
|
2371
2480
|
}) : image
|
|
2372
2481
|
});
|
|
2373
2482
|
};
|
|
2374
|
-
var templateObject_1$
|
|
2483
|
+
var templateObject_1$A, templateObject_2$p, templateObject_3$n, templateObject_4$j;
|
|
2375
2484
|
|
|
2376
|
-
var _a$
|
|
2377
|
-
typography$
|
|
2378
|
-
color$
|
|
2485
|
+
var _a$7 = tokensData.semantic,
|
|
2486
|
+
typography$3 = _a$7.typography,
|
|
2487
|
+
color$6 = _a$7.color;
|
|
2379
2488
|
var TimeStyled = styled.time.withConfig({
|
|
2380
2489
|
displayName: "DateFormatter__TimeStyled",
|
|
2381
2490
|
componentId: "sc-5464cc-0"
|
|
2382
|
-
})(templateObject_1$
|
|
2491
|
+
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
2383
2492
|
/**
|
|
2384
2493
|
* Formats a date with smart relative/absolute logic
|
|
2385
|
-
*/])), typography$
|
|
2494
|
+
*/])), typography$3.label, color$6.text.subdued);
|
|
2386
2495
|
/**
|
|
2387
2496
|
* Formats a date with smart relative/absolute logic
|
|
2388
2497
|
*/
|
|
@@ -2428,17 +2537,19 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
2428
2537
|
children: displayText
|
|
2429
2538
|
});
|
|
2430
2539
|
};
|
|
2431
|
-
var templateObject_1$
|
|
2540
|
+
var templateObject_1$z;
|
|
2432
2541
|
|
|
2433
|
-
var motion = tokensData.semantic.motion,
|
|
2434
|
-
|
|
2542
|
+
var motion$2 = tokensData.semantic.motion,
|
|
2543
|
+
_a$6 = tokensData.component,
|
|
2544
|
+
iconButton = _a$6.iconButton,
|
|
2545
|
+
button = _a$6.button;
|
|
2435
2546
|
var IconButtonStyled = styled.button.withConfig({
|
|
2436
2547
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2437
2548
|
return !prop.startsWith('$');
|
|
2438
2549
|
},
|
|
2439
2550
|
displayName: "IconButton__IconButtonStyled",
|
|
2440
2551
|
componentId: "sc-k8b14t-0"
|
|
2441
|
-
})(templateObject_1$
|
|
2552
|
+
})(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) {
|
|
2442
2553
|
var $variant = _a.$variant;
|
|
2443
2554
|
switch ($variant) {
|
|
2444
2555
|
case 'primary':
|
|
@@ -2450,7 +2561,19 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2450
2561
|
default:
|
|
2451
2562
|
return iconButton.primary.backgroundColor;
|
|
2452
2563
|
}
|
|
2453
|
-
},
|
|
2564
|
+
}, function (_a) {
|
|
2565
|
+
var $variant = _a.$variant;
|
|
2566
|
+
switch ($variant) {
|
|
2567
|
+
case 'primary':
|
|
2568
|
+
return button.primary.textColor;
|
|
2569
|
+
case 'secondary':
|
|
2570
|
+
return button.variants.secondary.textColor;
|
|
2571
|
+
case 'naked':
|
|
2572
|
+
return button.variants.naked.textColor;
|
|
2573
|
+
default:
|
|
2574
|
+
return button.primary.textColor;
|
|
2575
|
+
}
|
|
2576
|
+
}, iconButton.primary.borderRadius, motion$2.transition.normal, iconButton.primary.display, iconButton.primary.justifyContent, iconButton.primary.alignItems, function (_a) {
|
|
2454
2577
|
var $size = _a.$size;
|
|
2455
2578
|
return iconButton.sizes[$size].minWidth;
|
|
2456
2579
|
}, function (_a) {
|
|
@@ -2471,7 +2594,19 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2471
2594
|
default:
|
|
2472
2595
|
return iconButton.hover.backgroundColor;
|
|
2473
2596
|
}
|
|
2474
|
-
}, iconButton.active.backgroundColor, iconButton.focus.outline, iconButton.focus.outlineOffset, iconButton.disabled.backgroundColor)
|
|
2597
|
+
}, iconButton.active.backgroundColor, iconButton.focus.outline, iconButton.focus.outlineOffset, iconButton.disabled.backgroundColor, function (_a) {
|
|
2598
|
+
var $variant = _a.$variant;
|
|
2599
|
+
switch ($variant) {
|
|
2600
|
+
case 'primary':
|
|
2601
|
+
return button.disabled.textColor;
|
|
2602
|
+
case 'secondary':
|
|
2603
|
+
return button.variants.secondary.disabled.textColor;
|
|
2604
|
+
case 'naked':
|
|
2605
|
+
return button.variants.naked.disabled.textColor;
|
|
2606
|
+
default:
|
|
2607
|
+
return button.disabled.textColor;
|
|
2608
|
+
}
|
|
2609
|
+
});
|
|
2475
2610
|
var IconButton = function IconButton(_a) {
|
|
2476
2611
|
var variant = _a.variant,
|
|
2477
2612
|
_b = _a.size,
|
|
@@ -2490,13 +2625,8 @@ var IconButton = function IconButton(_a) {
|
|
|
2490
2625
|
type = _d === void 0 ? 'button' : _d,
|
|
2491
2626
|
htmlProps = __rest(_a, ["variant", "size", "url", "iconName", "onClick", 'aria-label', 'aria-describedby', 'aria-expanded', 'aria-pressed', 'data-testid', "disabled", "type"]);
|
|
2492
2627
|
var handleClick = function handleClick(event) {
|
|
2493
|
-
// Prevent default if disabled
|
|
2494
|
-
if (disabled) {
|
|
2495
|
-
event.preventDefault();
|
|
2496
|
-
return;
|
|
2497
|
-
}
|
|
2498
2628
|
if (onClick) {
|
|
2499
|
-
onClick();
|
|
2629
|
+
onClick(event);
|
|
2500
2630
|
} else if (url && url.trim() !== '') {
|
|
2501
2631
|
// Use proper navigation instead of direct href assignment
|
|
2502
2632
|
if (url.startsWith('http') || url.startsWith('//')) {
|
|
@@ -2506,52 +2636,28 @@ var IconButton = function IconButton(_a) {
|
|
|
2506
2636
|
}
|
|
2507
2637
|
}
|
|
2508
2638
|
};
|
|
2509
|
-
var handleKeyDown = function handleKeyDown(event) {
|
|
2510
|
-
// Handle keyboard activation (Enter and Space)
|
|
2511
|
-
if (disabled) return;
|
|
2512
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
2513
|
-
event.preventDefault();
|
|
2514
|
-
handleClick(event);
|
|
2515
|
-
}
|
|
2516
|
-
};
|
|
2517
2639
|
var iconSize = size === 'large' ? 'lg' : size === 'small' ? 'sm' : 'md';
|
|
2518
|
-
var getIconColor = function getIconColor(variant) {
|
|
2519
|
-
switch (variant) {
|
|
2520
|
-
case 'primary':
|
|
2521
|
-
return 'inverse';
|
|
2522
|
-
case 'secondary':
|
|
2523
|
-
return 'default';
|
|
2524
|
-
case 'naked':
|
|
2525
|
-
return 'default';
|
|
2526
|
-
default:
|
|
2527
|
-
return 'default';
|
|
2528
|
-
}
|
|
2529
|
-
};
|
|
2530
2640
|
return jsxRuntime.jsx(IconButtonStyled, __assign({
|
|
2531
2641
|
"$variant": variant,
|
|
2532
2642
|
"$size": size,
|
|
2533
2643
|
onClick: handleClick,
|
|
2534
|
-
onKeyDown: handleKeyDown,
|
|
2535
2644
|
disabled: disabled,
|
|
2536
2645
|
type: type,
|
|
2537
|
-
role: "button",
|
|
2538
2646
|
"aria-label": ariaLabel,
|
|
2539
2647
|
"aria-describedby": ariaDescribedBy,
|
|
2540
2648
|
"aria-expanded": ariaExpanded,
|
|
2541
2649
|
"aria-pressed": ariaPressed,
|
|
2542
|
-
"aria-disabled": disabled,
|
|
2543
|
-
tabIndex: disabled ? -1 : 0,
|
|
2544
2650
|
"data-testid": dataTestId
|
|
2545
2651
|
}, htmlProps, {
|
|
2546
2652
|
children: jsxRuntime.jsx(Icon, {
|
|
2547
2653
|
name: iconName,
|
|
2548
2654
|
size: iconSize,
|
|
2549
|
-
iconColor:
|
|
2655
|
+
iconColor: "inherit",
|
|
2550
2656
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2551
2657
|
})
|
|
2552
2658
|
}));
|
|
2553
2659
|
};
|
|
2554
|
-
var templateObject_1$
|
|
2660
|
+
var templateObject_1$y;
|
|
2555
2661
|
|
|
2556
2662
|
var StyledWrapper = styled.span.withConfig({
|
|
2557
2663
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2559,7 +2665,7 @@ var StyledWrapper = styled.span.withConfig({
|
|
|
2559
2665
|
},
|
|
2560
2666
|
displayName: "MoneyDisplay__StyledWrapper",
|
|
2561
2667
|
componentId: "sc-1mddej3-0"
|
|
2562
|
-
})(templateObject_1$
|
|
2668
|
+
})(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"
|
|
2563
2669
|
// Map size to Typography variant
|
|
2564
2670
|
])), function (_a) {
|
|
2565
2671
|
var $align = _a.$align;
|
|
@@ -2575,14 +2681,12 @@ var sizeToTypographyVariant = {
|
|
|
2575
2681
|
large: 'h3',
|
|
2576
2682
|
xlarge: 'h2'
|
|
2577
2683
|
};
|
|
2578
|
-
// Map
|
|
2579
|
-
var
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
// Red color for debits/expenses
|
|
2585
|
-
neutral: 'subdued' // Gray color for informational
|
|
2684
|
+
// Map size to Icon size for consistent visual alignment
|
|
2685
|
+
var sizeToIconSize = {
|
|
2686
|
+
small: 'xs',
|
|
2687
|
+
medium: 'sm',
|
|
2688
|
+
large: 'md',
|
|
2689
|
+
xlarge: 'lg'
|
|
2586
2690
|
};
|
|
2587
2691
|
/**
|
|
2588
2692
|
* Generates aria-label with spelled out amount
|
|
@@ -2631,45 +2735,61 @@ var MoneyDisplay = function MoneyDisplay(_a) {
|
|
|
2631
2735
|
maximumFractionDigits: 2
|
|
2632
2736
|
});
|
|
2633
2737
|
var formattedAmount = formatter.format(Math.abs(amount));
|
|
2634
|
-
//
|
|
2635
|
-
var
|
|
2636
|
-
|
|
2637
|
-
var signSymbol = amount > 0 ? '+' : '−'; // Using minus sign character, not hyphen
|
|
2638
|
-
displayText = signSymbol + formattedAmount;
|
|
2639
|
-
} else if (amount < 0 && !showSign) {
|
|
2640
|
-
// Still show negative sign even without showSign
|
|
2641
|
-
displayText = '−' + formattedAmount;
|
|
2642
|
-
}
|
|
2738
|
+
// Determine if we need to show a sign icon
|
|
2739
|
+
var showPositiveIcon = showSign && amount > 0 || variant === 'positive';
|
|
2740
|
+
var showNegativeIcon = amount < 0 || variant === 'negative';
|
|
2643
2741
|
// Generate accessibility label
|
|
2644
2742
|
var ariaLabel = generateAriaLabel(amount, currency, locale);
|
|
2645
|
-
// Get typography variant and
|
|
2743
|
+
// Get typography variant and icon size
|
|
2646
2744
|
var typographyVariant = sizeToTypographyVariant[size];
|
|
2647
|
-
var
|
|
2648
|
-
|
|
2745
|
+
var iconSize = sizeToIconSize[size];
|
|
2746
|
+
// Determine icon color based on variant
|
|
2747
|
+
var iconColor = variant === 'positive' || showPositiveIcon ? 'success' : variant === 'negative' || showNegativeIcon ? 'error' : variant === 'neutral' ? 'subdued' : 'default';
|
|
2748
|
+
// Amount always uses default color (except neutral which stays subdued)
|
|
2749
|
+
var amountColor = variant === 'neutral' ? 'subdued' : 'default';
|
|
2750
|
+
return jsxRuntime.jsxs(StyledWrapper, {
|
|
2649
2751
|
"$align": align,
|
|
2650
2752
|
"$weight": weight,
|
|
2651
2753
|
"aria-label": ariaLabel,
|
|
2652
2754
|
"data-testid": dataTestId,
|
|
2653
|
-
children: jsxRuntime.jsx(
|
|
2755
|
+
children: [showPositiveIcon && !showNegativeIcon && jsxRuntime.jsx(Icon, {
|
|
2756
|
+
name: "addRing",
|
|
2757
|
+
size: iconSize,
|
|
2758
|
+
iconColor: iconColor
|
|
2759
|
+
}), showNegativeIcon && jsxRuntime.jsx(Icon, {
|
|
2760
|
+
name: "remove",
|
|
2761
|
+
size: iconSize,
|
|
2762
|
+
iconColor: iconColor
|
|
2763
|
+
}), jsxRuntime.jsx(Typography, {
|
|
2654
2764
|
variant: typographyVariant,
|
|
2655
|
-
color:
|
|
2765
|
+
color: amountColor,
|
|
2656
2766
|
as: "span",
|
|
2657
|
-
children:
|
|
2658
|
-
})
|
|
2767
|
+
children: formattedAmount
|
|
2768
|
+
})]
|
|
2659
2769
|
});
|
|
2660
2770
|
};
|
|
2661
|
-
var templateObject_1$
|
|
2771
|
+
var templateObject_1$x;
|
|
2662
2772
|
|
|
2773
|
+
// Destructure tokens
|
|
2774
|
+
var semantic$e = tokensData.semantic;
|
|
2775
|
+
var _a$5 = __assign(__assign({}, semantic$e), {
|
|
2776
|
+
component: tokensData.component
|
|
2777
|
+
}),
|
|
2778
|
+
color$5 = _a$5.color,
|
|
2779
|
+
border$7 = _a$5.border,
|
|
2780
|
+
motion$1 = _a$5.motion,
|
|
2781
|
+
component$2 = _a$5.component;
|
|
2782
|
+
var radius$3 = border$7.radius;
|
|
2663
2783
|
var ProgressBarContainer = styled.div.withConfig({
|
|
2664
2784
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2665
2785
|
return !prop.startsWith('$');
|
|
2666
2786
|
},
|
|
2667
2787
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2668
2788
|
componentId: "sc-1nco33q-0"
|
|
2669
|
-
})(templateObject_3$
|
|
2670
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_1$
|
|
2789
|
+
})(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) {
|
|
2790
|
+
return props.$variant === 'horizontal' && styled.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);
|
|
2671
2791
|
}, function (props) {
|
|
2672
|
-
return props.$variant === 'vertical' && styled.css(templateObject_2$
|
|
2792
|
+
return props.$variant === 'vertical' && styled.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);
|
|
2673
2793
|
});
|
|
2674
2794
|
var ProgressBarFill = styled.div.withConfig({
|
|
2675
2795
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2677,25 +2797,25 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2677
2797
|
},
|
|
2678
2798
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2679
2799
|
componentId: "sc-1nco33q-1"
|
|
2680
|
-
})(templateObject_7$
|
|
2800
|
+
})(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) {
|
|
2681
2801
|
var backgroundColor;
|
|
2682
2802
|
switch (props.$color) {
|
|
2683
2803
|
case 'success':
|
|
2684
|
-
backgroundColor =
|
|
2804
|
+
backgroundColor = color$5.background.success;
|
|
2685
2805
|
break;
|
|
2686
2806
|
case 'error':
|
|
2687
|
-
backgroundColor =
|
|
2807
|
+
backgroundColor = color$5.background.error;
|
|
2688
2808
|
break;
|
|
2689
2809
|
case 'default':
|
|
2690
2810
|
default:
|
|
2691
|
-
backgroundColor =
|
|
2811
|
+
backgroundColor = color$5.background.interactive;
|
|
2692
2812
|
break;
|
|
2693
2813
|
}
|
|
2694
|
-
return styled.css(templateObject_4$
|
|
2814
|
+
return styled.css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2695
2815
|
}, function (props) {
|
|
2696
|
-
return props.$variant === 'horizontal' && styled.css(templateObject_5$
|
|
2816
|
+
return props.$variant === 'horizontal' && styled.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2697
2817
|
}, function (props) {
|
|
2698
|
-
return props.$variant === 'vertical' && styled.css(templateObject_6$
|
|
2818
|
+
return props.$variant === 'vertical' && styled.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)));
|
|
2699
2819
|
});
|
|
2700
2820
|
var ProgressBar = function ProgressBar(_a) {
|
|
2701
2821
|
var value = _a.value,
|
|
@@ -2722,15 +2842,18 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2722
2842
|
})
|
|
2723
2843
|
});
|
|
2724
2844
|
};
|
|
2725
|
-
var templateObject_1$
|
|
2845
|
+
var templateObject_1$w, templateObject_2$o, templateObject_3$m, templateObject_4$i, templateObject_5$e, templateObject_6$c, templateObject_7$9;
|
|
2726
2846
|
|
|
2727
|
-
|
|
2847
|
+
// Destructure tokens for cleaner access
|
|
2848
|
+
var separatorTokens = tokensData.component.separator;
|
|
2849
|
+
var separatorSpacing = tokensData.semantic.spacing.separator;
|
|
2850
|
+
var StyledDivider = styled.div.withConfig({
|
|
2728
2851
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2729
2852
|
return !prop.startsWith('$');
|
|
2730
2853
|
},
|
|
2731
2854
|
displayName: "Divider__StyledDivider",
|
|
2732
2855
|
componentId: "sc-1l0c8ja-0"
|
|
2733
|
-
})(templateObject_1$
|
|
2856
|
+
})(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"
|
|
2734
2857
|
/**
|
|
2735
2858
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2736
2859
|
*
|
|
@@ -2763,12 +2886,12 @@ var StyledDivider$1 = styled.div.withConfig({
|
|
|
2763
2886
|
var borderProperty = $orientation === 'vertical' ? 'border-left' : 'border-top';
|
|
2764
2887
|
switch ($variant) {
|
|
2765
2888
|
case 'strong':
|
|
2766
|
-
return "".concat(borderProperty, ": ").concat(
|
|
2889
|
+
return "".concat(borderProperty, ": ").concat(separatorTokens.variants.strong.border, ";");
|
|
2767
2890
|
case 'minimal':
|
|
2768
|
-
return "".concat(borderProperty, ": ").concat(
|
|
2891
|
+
return "".concat(borderProperty, ": ").concat(separatorTokens.variants.minimal.border, ";");
|
|
2769
2892
|
case 'default':
|
|
2770
2893
|
default:
|
|
2771
|
-
return "".concat(borderProperty, ": ").concat(
|
|
2894
|
+
return "".concat(borderProperty, ": ").concat(separatorTokens.variants["default"].border, ";");
|
|
2772
2895
|
}
|
|
2773
2896
|
}, function (_a) {
|
|
2774
2897
|
var _b = _a.$size,
|
|
@@ -2779,33 +2902,33 @@ var StyledDivider$1 = styled.div.withConfig({
|
|
|
2779
2902
|
$orientation = _d === void 0 ? 'horizontal' : _d;
|
|
2780
2903
|
if ($variant === 'minimal' && $orientation === 'horizontal') {
|
|
2781
2904
|
// Minimal variant always uses its predefined spacing for horizontal
|
|
2782
|
-
return "margin: ".concat(
|
|
2905
|
+
return "margin: ".concat(separatorTokens.variants.minimal.margin, ";");
|
|
2783
2906
|
}
|
|
2784
2907
|
if ($orientation === 'vertical') {
|
|
2785
2908
|
// Vertical orientation uses horizontal margins (left/right)
|
|
2786
2909
|
switch ($size) {
|
|
2787
2910
|
case 'small':
|
|
2788
|
-
return "margin: 0 ".concat(
|
|
2911
|
+
return "margin: 0 ".concat(separatorSpacing.sm, ";");
|
|
2789
2912
|
case 'medium':
|
|
2790
|
-
return "margin: 0 ".concat(
|
|
2913
|
+
return "margin: 0 ".concat(separatorSpacing.md, ";");
|
|
2791
2914
|
case 'xlarge':
|
|
2792
|
-
return "margin: 0 ".concat(
|
|
2915
|
+
return "margin: 0 ".concat(separatorSpacing.xl, ";");
|
|
2793
2916
|
case 'large':
|
|
2794
2917
|
default:
|
|
2795
|
-
return "margin: 0 ".concat(
|
|
2918
|
+
return "margin: 0 ".concat(separatorSpacing.lg, ";");
|
|
2796
2919
|
}
|
|
2797
2920
|
}
|
|
2798
2921
|
// Horizontal orientation uses vertical margins (top/bottom)
|
|
2799
2922
|
switch ($size) {
|
|
2800
2923
|
case 'small':
|
|
2801
|
-
return "margin: ".concat(
|
|
2924
|
+
return "margin: ".concat(separatorTokens.sizes.small.margin, ";");
|
|
2802
2925
|
case 'medium':
|
|
2803
|
-
return "margin: ".concat(
|
|
2926
|
+
return "margin: ".concat(separatorTokens.sizes.medium.margin, ";");
|
|
2804
2927
|
case 'xlarge':
|
|
2805
|
-
return "margin: ".concat(
|
|
2928
|
+
return "margin: ".concat(separatorTokens.sizes.xlarge.margin, ";");
|
|
2806
2929
|
case 'large':
|
|
2807
2930
|
default:
|
|
2808
|
-
return "margin: ".concat(
|
|
2931
|
+
return "margin: ".concat(separatorTokens.sizes.large.margin, ";");
|
|
2809
2932
|
}
|
|
2810
2933
|
});
|
|
2811
2934
|
/**
|
|
@@ -2834,7 +2957,7 @@ var Divider = function Divider(_a) {
|
|
|
2834
2957
|
_d = _a.orientation,
|
|
2835
2958
|
orientation = _d === void 0 ? 'horizontal' : _d,
|
|
2836
2959
|
dataTestId = _a["data-testid"];
|
|
2837
|
-
return jsxRuntime.jsx(StyledDivider
|
|
2960
|
+
return jsxRuntime.jsx(StyledDivider, {
|
|
2838
2961
|
"$variant": variant,
|
|
2839
2962
|
"$size": size,
|
|
2840
2963
|
"$orientation": orientation,
|
|
@@ -2843,7 +2966,7 @@ var Divider = function Divider(_a) {
|
|
|
2843
2966
|
"aria-orientation": orientation
|
|
2844
2967
|
});
|
|
2845
2968
|
};
|
|
2846
|
-
var templateObject_1$
|
|
2969
|
+
var templateObject_1$v;
|
|
2847
2970
|
|
|
2848
2971
|
var StyledStack = styled.div.withConfig({
|
|
2849
2972
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2851,7 +2974,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2851
2974
|
},
|
|
2852
2975
|
displayName: "Stack__StyledStack",
|
|
2853
2976
|
componentId: "sc-1ehkxgy-0"
|
|
2854
|
-
})(templateObject_1$
|
|
2977
|
+
})(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"
|
|
2855
2978
|
// Helper function to convert gap prop to CSS value
|
|
2856
2979
|
])));
|
|
2857
2980
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2890,47 +3013,51 @@ var Stack = function Stack(_a) {
|
|
|
2890
3013
|
children: children
|
|
2891
3014
|
});
|
|
2892
3015
|
};
|
|
2893
|
-
var templateObject_1$
|
|
3016
|
+
var templateObject_1$u;
|
|
2894
3017
|
|
|
2895
|
-
|
|
2896
|
-
|
|
2897
|
-
var
|
|
3018
|
+
// Destructure tokens for cleaner access
|
|
3019
|
+
var statusColors = tokensData.semantic.color.status;
|
|
3020
|
+
var spacing$5 = tokensData.semantic.spacing.layout;
|
|
3021
|
+
var radius$2 = tokensData.semantic.border.radius;
|
|
3022
|
+
var transition = tokensData.semantic.motion.transition;
|
|
3023
|
+
var typography$2 = tokensData.semantic.typography;
|
|
3024
|
+
var scaleIn = styled.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"])));
|
|
2898
3025
|
var getStatusConfig = function getStatusConfig(status) {
|
|
2899
3026
|
var configs = {
|
|
2900
3027
|
pending: {
|
|
2901
|
-
color:
|
|
2902
|
-
bgColor:
|
|
3028
|
+
color: statusColors.pending,
|
|
3029
|
+
bgColor: statusColors['pending-bg'],
|
|
2903
3030
|
icon: 'refresh',
|
|
2904
3031
|
// Fallback until 'clock' icon is added
|
|
2905
3032
|
label: 'Pending'
|
|
2906
3033
|
},
|
|
2907
3034
|
completed: {
|
|
2908
|
-
color:
|
|
2909
|
-
bgColor:
|
|
3035
|
+
color: statusColors.completed,
|
|
3036
|
+
bgColor: statusColors['completed-bg'],
|
|
2910
3037
|
icon: 'check',
|
|
2911
3038
|
label: 'Completed'
|
|
2912
3039
|
},
|
|
2913
3040
|
failed: {
|
|
2914
|
-
color:
|
|
2915
|
-
bgColor:
|
|
3041
|
+
color: statusColors.failed,
|
|
3042
|
+
bgColor: statusColors['failed-bg'],
|
|
2916
3043
|
icon: 'close',
|
|
2917
3044
|
label: 'Failed'
|
|
2918
3045
|
},
|
|
2919
3046
|
cancelled: {
|
|
2920
|
-
color:
|
|
2921
|
-
bgColor:
|
|
3047
|
+
color: statusColors.cancelled,
|
|
3048
|
+
bgColor: statusColors['cancelled-bg'],
|
|
2922
3049
|
icon: 'cancel',
|
|
2923
3050
|
label: 'Cancelled'
|
|
2924
3051
|
},
|
|
2925
3052
|
processing: {
|
|
2926
|
-
color:
|
|
2927
|
-
bgColor:
|
|
3053
|
+
color: statusColors.processing,
|
|
3054
|
+
bgColor: statusColors['processing-bg'],
|
|
2928
3055
|
icon: 'refresh',
|
|
2929
3056
|
label: 'Processing'
|
|
2930
3057
|
},
|
|
2931
3058
|
scheduled: {
|
|
2932
|
-
color:
|
|
2933
|
-
bgColor:
|
|
3059
|
+
color: statusColors.scheduled,
|
|
3060
|
+
bgColor: statusColors['scheduled-bg'],
|
|
2934
3061
|
icon: 'bell',
|
|
2935
3062
|
// Fallback until 'calendar' icon is added
|
|
2936
3063
|
label: 'Scheduled'
|
|
@@ -2938,24 +3065,22 @@ var getStatusConfig = function getStatusConfig(status) {
|
|
|
2938
3065
|
};
|
|
2939
3066
|
return configs[status];
|
|
2940
3067
|
};
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
// medium
|
|
2952
|
-
return {
|
|
3068
|
+
// Size configuration
|
|
3069
|
+
var sizeConfig = {
|
|
3070
|
+
small: {
|
|
3071
|
+
height: '20px',
|
|
3072
|
+
padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
|
|
3073
|
+
font: typography$2.caption,
|
|
3074
|
+
gap: spacing$5.xs,
|
|
3075
|
+
iconSize: 'xs'
|
|
3076
|
+
},
|
|
3077
|
+
medium: {
|
|
2953
3078
|
height: '24px',
|
|
2954
|
-
padding: "".concat(
|
|
2955
|
-
font:
|
|
2956
|
-
gap:
|
|
3079
|
+
padding: "".concat(spacing$5.xs, " ").concat(spacing$5.sm),
|
|
3080
|
+
font: typography$2.small,
|
|
3081
|
+
gap: spacing$5.xs,
|
|
2957
3082
|
iconSize: 'sm'
|
|
2958
|
-
}
|
|
3083
|
+
}
|
|
2959
3084
|
};
|
|
2960
3085
|
var StyledStatusBadge = styled.span.withConfig({
|
|
2961
3086
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2963,11 +3088,19 @@ var StyledStatusBadge = styled.span.withConfig({
|
|
|
2963
3088
|
},
|
|
2964
3089
|
displayName: "StatusBadge__StyledStatusBadge",
|
|
2965
3090
|
componentId: "sc-1paksgb-0"
|
|
2966
|
-
})(templateObject_2$
|
|
3091
|
+
})(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) {
|
|
3092
|
+
var $size = _a.$size;
|
|
3093
|
+
var size = sizeConfig[$size];
|
|
3094
|
+
return "\n height: ".concat(size.height, ";\n padding: ").concat(size.padding, ";\n font: ").concat(size.font, ";\n gap: ").concat(size.gap, ";\n ");
|
|
3095
|
+
}, function (_a) {
|
|
3096
|
+
var $status = _a.$status;
|
|
3097
|
+
var config = getStatusConfig($status);
|
|
3098
|
+
return "\n background-color: ".concat(config.bgColor, ";\n color: ").concat(config.color, ";\n ");
|
|
3099
|
+
});
|
|
2967
3100
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
2968
3101
|
displayName: "StatusBadge__ScreenReaderOnly",
|
|
2969
3102
|
componentId: "sc-1paksgb-1"
|
|
2970
|
-
})(templateObject_3$
|
|
3103
|
+
})(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"
|
|
2971
3104
|
/**
|
|
2972
3105
|
* StatusBadge component for displaying transaction or task status
|
|
2973
3106
|
*
|
|
@@ -3026,16 +3159,8 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
3026
3159
|
dataTestId = _a["data-testid"],
|
|
3027
3160
|
ariaLabel = _a["aria-label"];
|
|
3028
3161
|
var statusConfig = getStatusConfig(status);
|
|
3029
|
-
var sizeStyles =
|
|
3162
|
+
var sizeStyles = sizeConfig[size];
|
|
3030
3163
|
var displayLabel = label || statusConfig.label;
|
|
3031
|
-
var cssProps = {
|
|
3032
|
-
'--status-badge-bg': statusConfig.bgColor,
|
|
3033
|
-
'--status-badge-color': statusConfig.color,
|
|
3034
|
-
'--status-badge-height': sizeStyles.height,
|
|
3035
|
-
'--status-badge-padding': sizeStyles.padding,
|
|
3036
|
-
'--status-badge-font': sizeStyles.font,
|
|
3037
|
-
'--status-badge-gap': sizeStyles.gap
|
|
3038
|
-
};
|
|
3039
3164
|
return jsxRuntime.jsxs(StyledStatusBadge, {
|
|
3040
3165
|
"$status": status,
|
|
3041
3166
|
"$size": size,
|
|
@@ -3044,7 +3169,6 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
3044
3169
|
"aria-live": liveRegion ? 'polite' : undefined,
|
|
3045
3170
|
"aria-atomic": liveRegion ? 'true' : undefined,
|
|
3046
3171
|
"data-testid": dataTestId,
|
|
3047
|
-
style: cssProps,
|
|
3048
3172
|
children: [showIcon && jsxRuntime.jsx(Icon, {
|
|
3049
3173
|
name: statusConfig.icon,
|
|
3050
3174
|
size: sizeStyles.iconSize,
|
|
@@ -3056,52 +3180,59 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
3056
3180
|
});
|
|
3057
3181
|
};
|
|
3058
3182
|
StatusBadge.displayName = 'StatusBadge';
|
|
3059
|
-
var templateObject_1$
|
|
3183
|
+
var templateObject_1$t, templateObject_2$n, templateObject_3$l;
|
|
3060
3184
|
|
|
3061
|
-
var semantic$
|
|
3185
|
+
var semantic$d = tokensData.semantic;
|
|
3186
|
+
var color$4 = semantic$d.color,
|
|
3187
|
+
spacing$4 = semantic$d.spacing,
|
|
3188
|
+
border$6 = semantic$d.border,
|
|
3189
|
+
typography$1 = semantic$d.typography,
|
|
3190
|
+
size = semantic$d.size;
|
|
3191
|
+
var layout$2 = spacing$4.layout;
|
|
3192
|
+
var radius$1 = border$6.radius;
|
|
3062
3193
|
var StyledTag = styled.span.withConfig({
|
|
3063
3194
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3064
3195
|
return !prop.startsWith('$');
|
|
3065
3196
|
},
|
|
3066
3197
|
displayName: "Tag__StyledTag",
|
|
3067
3198
|
componentId: "sc-lzfmti-0"
|
|
3068
|
-
})(templateObject_1$
|
|
3199
|
+
})(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"
|
|
3069
3200
|
/**
|
|
3070
3201
|
* Tag component for categorizing and labeling content
|
|
3071
3202
|
*
|
|
3072
3203
|
* A static, non-interactive label used to categorize elements or objects in the UI.
|
|
3073
3204
|
* Tags help users quickly identify and understand content classification.
|
|
3074
|
-
*/])),
|
|
3205
|
+
*/])), radius$1.sm, size.icon.lg || '2rem', layout$2.xs, layout$2.sm, typography$1.button3, function (_a) {
|
|
3075
3206
|
var $variant = _a.$variant;
|
|
3076
3207
|
switch ($variant) {
|
|
3077
3208
|
case 'interactive':
|
|
3078
|
-
return
|
|
3209
|
+
return color$4.background['interactive-subtle'];
|
|
3079
3210
|
case 'success':
|
|
3080
|
-
return
|
|
3211
|
+
return color$4.background['success-subtle'];
|
|
3081
3212
|
case 'warning':
|
|
3082
|
-
return
|
|
3213
|
+
return color$4.background['warning-subtle'];
|
|
3083
3214
|
case 'error':
|
|
3084
|
-
return
|
|
3215
|
+
return color$4.background['error-subtle'];
|
|
3085
3216
|
case 'emphasis':
|
|
3086
|
-
return
|
|
3217
|
+
return color$4.background.emphasis;
|
|
3087
3218
|
default:
|
|
3088
|
-
return
|
|
3219
|
+
return color$4.background.surface;
|
|
3089
3220
|
}
|
|
3090
3221
|
}, function (_a) {
|
|
3091
3222
|
var $variant = _a.$variant;
|
|
3092
3223
|
switch ($variant) {
|
|
3093
3224
|
case 'interactive':
|
|
3094
|
-
return
|
|
3225
|
+
return color$4.text.interactive;
|
|
3095
3226
|
case 'success':
|
|
3096
|
-
return
|
|
3227
|
+
return color$4.text.success;
|
|
3097
3228
|
case 'warning':
|
|
3098
|
-
return
|
|
3229
|
+
return color$4.text.warning;
|
|
3099
3230
|
case 'error':
|
|
3100
|
-
return
|
|
3231
|
+
return color$4.text.error;
|
|
3101
3232
|
case 'emphasis':
|
|
3102
|
-
return
|
|
3233
|
+
return color$4.text.inverse;
|
|
3103
3234
|
default:
|
|
3104
|
-
return
|
|
3235
|
+
return color$4.text["default"];
|
|
3105
3236
|
}
|
|
3106
3237
|
}, function (_a) {
|
|
3107
3238
|
var $variant = _a.$variant,
|
|
@@ -3109,17 +3240,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
3109
3240
|
if (!$border) return 'none';
|
|
3110
3241
|
switch ($variant) {
|
|
3111
3242
|
case 'interactive':
|
|
3112
|
-
return "1px solid ".concat(
|
|
3243
|
+
return "1px solid ".concat(color$4.border.interactive);
|
|
3113
3244
|
case 'success':
|
|
3114
|
-
return "1px solid ".concat(
|
|
3245
|
+
return "1px solid ".concat(color$4.border.success);
|
|
3115
3246
|
case 'warning':
|
|
3116
|
-
return "1px solid ".concat(
|
|
3247
|
+
return "1px solid ".concat(color$4.border.warning);
|
|
3117
3248
|
case 'error':
|
|
3118
|
-
return "1px solid ".concat(
|
|
3249
|
+
return "1px solid ".concat(color$4.border.error);
|
|
3119
3250
|
case 'emphasis':
|
|
3120
|
-
return "1px solid ".concat(
|
|
3251
|
+
return "1px solid ".concat(color$4.background.emphasis);
|
|
3121
3252
|
default:
|
|
3122
|
-
return "1px solid ".concat(
|
|
3253
|
+
return "1px solid ".concat(color$4.border["default"]);
|
|
3123
3254
|
}
|
|
3124
3255
|
});
|
|
3125
3256
|
/**
|
|
@@ -3148,32 +3279,41 @@ var Tag = function Tag(_a) {
|
|
|
3148
3279
|
children: children
|
|
3149
3280
|
}));
|
|
3150
3281
|
};
|
|
3151
|
-
var templateObject_1$
|
|
3282
|
+
var templateObject_1$s;
|
|
3152
3283
|
|
|
3284
|
+
// Destructure tokens for cleaner access
|
|
3285
|
+
var semantic$c = tokensData.semantic;
|
|
3286
|
+
var color$3 = semantic$c.color,
|
|
3287
|
+
spacing$3 = semantic$c.spacing,
|
|
3288
|
+
border$5 = semantic$c.border;
|
|
3289
|
+
var layout$1 = spacing$3.layout;
|
|
3290
|
+
var background = color$3.background,
|
|
3291
|
+
icon = color$3.icon;
|
|
3292
|
+
var radius = border$5.radius;
|
|
3153
3293
|
var StyledHeader$2 = styled.div.withConfig({
|
|
3154
3294
|
displayName: "AccountCard__StyledHeader",
|
|
3155
3295
|
componentId: "sc-1erp7zn-0"
|
|
3156
|
-
})(templateObject_1$
|
|
3296
|
+
})(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);
|
|
3157
3297
|
var StyledIconWrapper = styled.div.withConfig({
|
|
3158
3298
|
displayName: "AccountCard__StyledIconWrapper",
|
|
3159
3299
|
componentId: "sc-1erp7zn-1"
|
|
3160
|
-
})(templateObject_2$
|
|
3300
|
+
})(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);
|
|
3161
3301
|
var StyledBalanceSection = styled.div.withConfig({
|
|
3162
3302
|
displayName: "AccountCard__StyledBalanceSection",
|
|
3163
3303
|
componentId: "sc-1erp7zn-2"
|
|
3164
|
-
})(templateObject_3$
|
|
3304
|
+
})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), layout$1.lg);
|
|
3165
3305
|
var StyledTrendSection = styled.div.withConfig({
|
|
3166
3306
|
displayName: "AccountCard__StyledTrendSection",
|
|
3167
3307
|
componentId: "sc-1erp7zn-3"
|
|
3168
|
-
})(templateObject_4$
|
|
3308
|
+
})(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);
|
|
3169
3309
|
var StyledActions$1 = styled.div.withConfig({
|
|
3170
3310
|
displayName: "AccountCard__StyledActions",
|
|
3171
3311
|
componentId: "sc-1erp7zn-4"
|
|
3172
|
-
})(templateObject_5$
|
|
3312
|
+
})(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);
|
|
3173
3313
|
var StyledStackWrapper = styled.div.withConfig({
|
|
3174
3314
|
displayName: "AccountCard__StyledStackWrapper",
|
|
3175
3315
|
componentId: "sc-1erp7zn-5"
|
|
3176
|
-
})(templateObject_6$
|
|
3316
|
+
})(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n height: 100%;\n min-height: 168px;\n"], ["\n height: 100%;\n min-height: 168px;\n"
|
|
3177
3317
|
// Map account types to icon names (using placeholders)
|
|
3178
3318
|
])));
|
|
3179
3319
|
// Map account types to icon names (using placeholders)
|
|
@@ -3239,11 +3379,10 @@ var AccountCard = function AccountCard(_a) {
|
|
|
3239
3379
|
p: "lg",
|
|
3240
3380
|
bg: "surface",
|
|
3241
3381
|
border: "default",
|
|
3242
|
-
borderRadius: "
|
|
3243
|
-
shadow: "3",
|
|
3382
|
+
borderRadius: "xl",
|
|
3244
3383
|
transition: "all 0.2s ease",
|
|
3245
3384
|
cursor: isClickable ? 'pointer' : 'default',
|
|
3246
|
-
hoverShadow: isClickable ? '
|
|
3385
|
+
hoverShadow: isClickable ? 'floating' : undefined,
|
|
3247
3386
|
hoverTransform: isClickable ? 'translateY(-2px)' : undefined,
|
|
3248
3387
|
onClick: handleClick,
|
|
3249
3388
|
onKeyDown: handleKeyDown,
|
|
@@ -3334,86 +3473,273 @@ var AccountCard = function AccountCard(_a) {
|
|
|
3334
3473
|
})
|
|
3335
3474
|
});
|
|
3336
3475
|
};
|
|
3337
|
-
var templateObject_1$
|
|
3476
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b;
|
|
3338
3477
|
|
|
3339
3478
|
var semantic$b = tokensData.semantic,
|
|
3340
3479
|
base$9 = tokensData.base;
|
|
3341
|
-
var
|
|
3342
|
-
|
|
3343
|
-
|
|
3344
|
-
|
|
3345
|
-
|
|
3346
|
-
|
|
3347
|
-
|
|
3348
|
-
|
|
3349
|
-
|
|
3350
|
-
}
|
|
3351
|
-
var
|
|
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
|
-
|
|
3415
|
-
|
|
3416
|
-
|
|
3480
|
+
var StyledListItem = styled.li.withConfig({
|
|
3481
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3482
|
+
return !prop.startsWith('$');
|
|
3483
|
+
},
|
|
3484
|
+
displayName: "ListItem__StyledListItem",
|
|
3485
|
+
componentId: "sc-1wzzt21-0"
|
|
3486
|
+
})(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) {
|
|
3487
|
+
var $interactive = _a.$interactive;
|
|
3488
|
+
return $interactive && 'user-select: none;';
|
|
3489
|
+
}, function (_a) {
|
|
3490
|
+
var $disabled = _a.$disabled;
|
|
3491
|
+
return $disabled && "\n opacity: ".concat(base$9.opacity[50], ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
3492
|
+
}, function (_a) {
|
|
3493
|
+
var $destructive = _a.$destructive,
|
|
3494
|
+
$disabled = _a.$disabled;
|
|
3495
|
+
return $destructive && !$disabled && "\n color: ".concat(semantic$b.color.text.error, ";\n ");
|
|
3496
|
+
});
|
|
3497
|
+
var StyledItemContent = styled.div.withConfig({
|
|
3498
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3499
|
+
return !prop.startsWith('$');
|
|
3500
|
+
},
|
|
3501
|
+
displayName: "ListItem__StyledItemContent",
|
|
3502
|
+
componentId: "sc-1wzzt21-1"
|
|
3503
|
+
})(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) {
|
|
3504
|
+
var $spacing = _a.$spacing;
|
|
3505
|
+
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);
|
|
3506
|
+
}, base$9.border.radius[2], function (_a) {
|
|
3507
|
+
var $selected = _a.$selected;
|
|
3508
|
+
return $selected ? semantic$b.color.background['interactive-subtle'] : 'transparent';
|
|
3509
|
+
}, function (_a) {
|
|
3510
|
+
var $interactive = _a.$interactive,
|
|
3511
|
+
$disabled = _a.$disabled;
|
|
3512
|
+
if ($disabled) return 'not-allowed';
|
|
3513
|
+
if ($interactive) return 'pointer';
|
|
3514
|
+
return 'default';
|
|
3515
|
+
}, function (_a) {
|
|
3516
|
+
var $interactive = _a.$interactive,
|
|
3517
|
+
$disabled = _a.$disabled,
|
|
3518
|
+
$selected = _a.$selected;
|
|
3519
|
+
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 ");
|
|
3520
|
+
}, semantic$b.color.border.interactive);
|
|
3521
|
+
var StyledIconContainer$1 = styled.div.withConfig({
|
|
3522
|
+
displayName: "ListItem__StyledIconContainer",
|
|
3523
|
+
componentId: "sc-1wzzt21-2"
|
|
3524
|
+
})(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"])));
|
|
3525
|
+
var StyledTextContent = styled.div.withConfig({
|
|
3526
|
+
displayName: "ListItem__StyledTextContent",
|
|
3527
|
+
componentId: "sc-1wzzt21-3"
|
|
3528
|
+
})(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);
|
|
3529
|
+
var StyledRightContent = styled.div.withConfig({
|
|
3530
|
+
displayName: "ListItem__StyledRightContent",
|
|
3531
|
+
componentId: "sc-1wzzt21-4"
|
|
3532
|
+
})(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);
|
|
3533
|
+
var StyledChevronIcon = styled.div.withConfig({
|
|
3534
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3535
|
+
return !prop.startsWith('$');
|
|
3536
|
+
},
|
|
3537
|
+
displayName: "ListItem__StyledChevronIcon",
|
|
3538
|
+
componentId: "sc-1wzzt21-5"
|
|
3539
|
+
})(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) {
|
|
3540
|
+
var $expanded = _a.$expanded;
|
|
3541
|
+
return $expanded ? '180deg' : '0deg';
|
|
3542
|
+
});
|
|
3543
|
+
var StyledExpandedContent = styled.div.withConfig({
|
|
3544
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3545
|
+
return !prop.startsWith('$');
|
|
3546
|
+
},
|
|
3547
|
+
displayName: "ListItem__StyledExpandedContent",
|
|
3548
|
+
componentId: "sc-1wzzt21-6"
|
|
3549
|
+
})(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) {
|
|
3550
|
+
var $expanded = _a.$expanded;
|
|
3551
|
+
return $expanded ? '1000px' : '0';
|
|
3552
|
+
}, function (_a) {
|
|
3553
|
+
var $expanded = _a.$expanded;
|
|
3554
|
+
return $expanded ? '1' : '0';
|
|
3555
|
+
}, function (_a) {
|
|
3556
|
+
var $expanded = _a.$expanded,
|
|
3557
|
+
$spacing = _a.$spacing;
|
|
3558
|
+
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 ");
|
|
3559
|
+
});
|
|
3560
|
+
var ListItem = function ListItem(_a) {
|
|
3561
|
+
var primary = _a.primary,
|
|
3562
|
+
secondary = _a.secondary,
|
|
3563
|
+
badge = _a.badge,
|
|
3564
|
+
icon = _a.icon,
|
|
3565
|
+
_b = _a.expandable,
|
|
3566
|
+
expandable = _b === void 0 ? false : _b,
|
|
3567
|
+
_c = _a.expanded,
|
|
3568
|
+
expanded = _c === void 0 ? false : _c,
|
|
3569
|
+
onToggle = _a.onToggle,
|
|
3570
|
+
_d = _a.interactive,
|
|
3571
|
+
interactive = _d === void 0 ? false : _d,
|
|
3572
|
+
onClick = _a.onClick,
|
|
3573
|
+
_e = _a.disabled,
|
|
3574
|
+
disabled = _e === void 0 ? false : _e,
|
|
3575
|
+
_f = _a.selected,
|
|
3576
|
+
selected = _f === void 0 ? false : _f,
|
|
3577
|
+
_g = _a.destructive,
|
|
3578
|
+
destructive = _g === void 0 ? false : _g,
|
|
3579
|
+
_h = _a.spacing,
|
|
3580
|
+
spacing = _h === void 0 ? 'comfortable' : _h,
|
|
3581
|
+
children = _a.children,
|
|
3582
|
+
className = _a.className,
|
|
3583
|
+
dataTestId = _a["data-testid"],
|
|
3584
|
+
customRole = _a.role,
|
|
3585
|
+
ariaSelected = _a["aria-selected"],
|
|
3586
|
+
id = _a.id,
|
|
3587
|
+
customTabIndex = _a.tabIndex,
|
|
3588
|
+
customOnKeyDown = _a.onKeyDown,
|
|
3589
|
+
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"]);
|
|
3590
|
+
var isInteractive = interactive || expandable || customRole === 'option';
|
|
3591
|
+
var contentRole = customRole === 'option' ? undefined : isInteractive ? 'button' : undefined;
|
|
3592
|
+
var ariaExpanded = expandable ? expanded : undefined;
|
|
3593
|
+
var ariaDisabled = disabled ? true : undefined;
|
|
3594
|
+
var ariaCurrent = selected ? 'true' : undefined;
|
|
3595
|
+
var handleClick = function handleClick() {
|
|
3596
|
+
if (disabled) return;
|
|
3597
|
+
if (expandable && onToggle) {
|
|
3598
|
+
onToggle();
|
|
3599
|
+
} else if (onClick) {
|
|
3600
|
+
onClick();
|
|
3601
|
+
}
|
|
3602
|
+
};
|
|
3603
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
3604
|
+
if (customOnKeyDown) {
|
|
3605
|
+
customOnKeyDown(event);
|
|
3606
|
+
return;
|
|
3607
|
+
}
|
|
3608
|
+
if (disabled) return;
|
|
3609
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
3610
|
+
event.preventDefault();
|
|
3611
|
+
handleClick();
|
|
3612
|
+
}
|
|
3613
|
+
};
|
|
3614
|
+
return jsxRuntime.jsxs(StyledListItem, __assign({
|
|
3615
|
+
"$interactive": isInteractive,
|
|
3616
|
+
"$disabled": disabled,
|
|
3617
|
+
"$selected": selected,
|
|
3618
|
+
"$destructive": destructive,
|
|
3619
|
+
"$spacing": spacing,
|
|
3620
|
+
className: className,
|
|
3621
|
+
"data-testid": dataTestId,
|
|
3622
|
+
role: customRole || 'listitem',
|
|
3623
|
+
id: id,
|
|
3624
|
+
"aria-selected": ariaSelected
|
|
3625
|
+
}, props, {
|
|
3626
|
+
children: [jsxRuntime.jsxs(StyledItemContent, {
|
|
3627
|
+
"$interactive": isInteractive,
|
|
3628
|
+
"$disabled": disabled,
|
|
3629
|
+
"$selected": selected,
|
|
3630
|
+
"$destructive": destructive,
|
|
3631
|
+
"$spacing": spacing,
|
|
3632
|
+
role: contentRole,
|
|
3633
|
+
"aria-expanded": ariaExpanded,
|
|
3634
|
+
"aria-disabled": ariaDisabled,
|
|
3635
|
+
"aria-current": ariaCurrent,
|
|
3636
|
+
tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
|
|
3637
|
+
onClick: handleClick,
|
|
3638
|
+
onKeyDown: handleKeyDown,
|
|
3639
|
+
children: [icon && jsxRuntime.jsx(StyledIconContainer$1, {
|
|
3640
|
+
"aria-hidden": "true",
|
|
3641
|
+
children: icon
|
|
3642
|
+
}), jsxRuntime.jsxs(StyledTextContent, {
|
|
3643
|
+
children: [jsxRuntime.jsx(Typography, {
|
|
3644
|
+
variant: "body",
|
|
3645
|
+
color: destructive ? 'error' : 'default',
|
|
3646
|
+
children: primary
|
|
3647
|
+
}), secondary && jsxRuntime.jsx(Typography, {
|
|
3648
|
+
variant: "small",
|
|
3649
|
+
color: "subdued",
|
|
3650
|
+
children: secondary
|
|
3651
|
+
})]
|
|
3652
|
+
}), jsxRuntime.jsxs(StyledRightContent, {
|
|
3653
|
+
children: [badge, expandable && jsxRuntime.jsx(StyledChevronIcon, {
|
|
3654
|
+
"$expanded": expanded,
|
|
3655
|
+
"aria-hidden": "true",
|
|
3656
|
+
children: jsxRuntime.jsx(Icon, {
|
|
3657
|
+
name: "caretDown",
|
|
3658
|
+
size: "sm"
|
|
3659
|
+
})
|
|
3660
|
+
})]
|
|
3661
|
+
})]
|
|
3662
|
+
}), expandable && children && jsxRuntime.jsx(StyledExpandedContent, {
|
|
3663
|
+
"$spacing": spacing,
|
|
3664
|
+
"$expanded": expanded,
|
|
3665
|
+
"aria-hidden": !expanded,
|
|
3666
|
+
children: children
|
|
3667
|
+
})]
|
|
3668
|
+
}));
|
|
3669
|
+
};
|
|
3670
|
+
ListItem.displayName = 'ListItem';
|
|
3671
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8;
|
|
3672
|
+
|
|
3673
|
+
var _a$4 = tokensData.semantic,
|
|
3674
|
+
color$2 = _a$4.color,
|
|
3675
|
+
border$4 = _a$4.border,
|
|
3676
|
+
layout = _a$4.spacing.layout,
|
|
3677
|
+
motion = _a$4.motion,
|
|
3678
|
+
elevation = _a$4.elevation;
|
|
3679
|
+
var slideUp = styled.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"])));
|
|
3680
|
+
var fadeIn$1 = styled.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"])));
|
|
3681
|
+
var StyledOverlay$1 = styled.div.withConfig({
|
|
3682
|
+
displayName: "ActionSheet__StyledOverlay",
|
|
3683
|
+
componentId: "sc-regbol-0"
|
|
3684
|
+
})(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);
|
|
3685
|
+
var StyledActionSheet = styled.div.withConfig({
|
|
3686
|
+
displayName: "ActionSheet__StyledActionSheet",
|
|
3687
|
+
componentId: "sc-regbol-1"
|
|
3688
|
+
})(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);
|
|
3689
|
+
var StyledHeader$1 = styled.div.withConfig({
|
|
3690
|
+
displayName: "ActionSheet__StyledHeader",
|
|
3691
|
+
componentId: "sc-regbol-2"
|
|
3692
|
+
})(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"]);
|
|
3693
|
+
var StyledHeaderContent = styled.div.withConfig({
|
|
3694
|
+
displayName: "ActionSheet__StyledHeaderContent",
|
|
3695
|
+
componentId: "sc-regbol-3"
|
|
3696
|
+
})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
3697
|
+
var StyledCloseButton = styled.button.withConfig({
|
|
3698
|
+
displayName: "ActionSheet__StyledCloseButton",
|
|
3699
|
+
componentId: "sc-regbol-4"
|
|
3700
|
+
})(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);
|
|
3701
|
+
var StyledActionsList = styled.ul.withConfig({
|
|
3702
|
+
displayName: "ActionSheet__StyledActionsList",
|
|
3703
|
+
componentId: "sc-regbol-5"
|
|
3704
|
+
})(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"
|
|
3705
|
+
/**
|
|
3706
|
+
* ActionSheet component for bottom sheet modals
|
|
3707
|
+
*
|
|
3708
|
+
* Displays a modal action sheet that slides up from the bottom,
|
|
3709
|
+
* providing a list of actions for the user to choose from.
|
|
3710
|
+
* Includes focus trapping, keyboard navigation, and accessibility features.
|
|
3711
|
+
*
|
|
3712
|
+
* @example
|
|
3713
|
+
* ```tsx
|
|
3714
|
+
* const [isOpen, setIsOpen] = useState(false)
|
|
3715
|
+
*
|
|
3716
|
+
* <ActionSheet
|
|
3717
|
+
* isOpen={isOpen}
|
|
3718
|
+
* onClose={() => setIsOpen(false)}
|
|
3719
|
+
* title="Choose an action"
|
|
3720
|
+
* actions={[
|
|
3721
|
+
* {
|
|
3722
|
+
* id: 'edit',
|
|
3723
|
+
* label: 'Edit',
|
|
3724
|
+
* icon: 'edit',
|
|
3725
|
+
* onSelect: () => console.log('Edit')
|
|
3726
|
+
* },
|
|
3727
|
+
* {
|
|
3728
|
+
* id: 'delete',
|
|
3729
|
+
* label: 'Delete',
|
|
3730
|
+
* icon: 'trash',
|
|
3731
|
+
* destructive: true,
|
|
3732
|
+
* onSelect: () => console.log('Delete')
|
|
3733
|
+
* }
|
|
3734
|
+
* ]}
|
|
3735
|
+
* />
|
|
3736
|
+
* ```
|
|
3737
|
+
*/])), layout.sm, layout.md);
|
|
3738
|
+
/**
|
|
3739
|
+
* ActionSheet component for bottom sheet modals
|
|
3740
|
+
*
|
|
3741
|
+
* Displays a modal action sheet that slides up from the bottom,
|
|
3742
|
+
* providing a list of actions for the user to choose from.
|
|
3417
3743
|
* Includes focus trapping, keyboard navigation, and accessibility features.
|
|
3418
3744
|
*
|
|
3419
3745
|
* @example
|
|
@@ -3486,11 +3812,11 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
3486
3812
|
}
|
|
3487
3813
|
};
|
|
3488
3814
|
document.addEventListener('keydown', handleKeyDown);
|
|
3489
|
-
// Focus first focusable element
|
|
3815
|
+
// Focus first focusable element (button or element with role="button")
|
|
3490
3816
|
requestAnimationFrame(function () {
|
|
3491
3817
|
var _a;
|
|
3492
|
-
var
|
|
3493
|
-
|
|
3818
|
+
var firstFocusable = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled), [role="button"][tabindex]:not([aria-disabled="true"])');
|
|
3819
|
+
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
3494
3820
|
});
|
|
3495
3821
|
// Prevent body scroll
|
|
3496
3822
|
var originalOverflow = document.body.style.overflow;
|
|
@@ -3549,49 +3875,848 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
3549
3875
|
color: "subdued",
|
|
3550
3876
|
children: description
|
|
3551
3877
|
})
|
|
3552
|
-
})]
|
|
3553
|
-
})
|
|
3554
|
-
}), showCloseButton && jsxRuntime.jsx(StyledCloseButton, {
|
|
3555
|
-
type: "button",
|
|
3556
|
-
onClick: onClose,
|
|
3557
|
-
"aria-label": "Close",
|
|
3558
|
-
children: jsxRuntime.jsx(Icon, {
|
|
3559
|
-
name: "close",
|
|
3560
|
-
size: "sm",
|
|
3561
|
-
iconColor: "subdued"
|
|
3562
|
-
})
|
|
3563
|
-
})]
|
|
3564
|
-
}), jsxRuntime.jsx(StyledActionsList, {
|
|
3565
|
-
children: actions.map(function (action, index) {
|
|
3566
|
-
return jsxRuntime.jsxs(
|
|
3567
|
-
children: [hasDestructive && index === destructiveIndex && index > 0 && jsxRuntime.jsx(
|
|
3568
|
-
|
|
3878
|
+
})]
|
|
3879
|
+
})
|
|
3880
|
+
}), showCloseButton && jsxRuntime.jsx(StyledCloseButton, {
|
|
3881
|
+
type: "button",
|
|
3882
|
+
onClick: onClose,
|
|
3883
|
+
"aria-label": "Close",
|
|
3884
|
+
children: jsxRuntime.jsx(Icon, {
|
|
3885
|
+
name: "close",
|
|
3886
|
+
size: "sm",
|
|
3887
|
+
iconColor: "subdued"
|
|
3888
|
+
})
|
|
3889
|
+
})]
|
|
3890
|
+
}), jsxRuntime.jsx(StyledActionsList, {
|
|
3891
|
+
children: actions.map(function (action, index) {
|
|
3892
|
+
return jsxRuntime.jsxs(React.Fragment, {
|
|
3893
|
+
children: [hasDestructive && index === destructiveIndex && index > 0 && jsxRuntime.jsx(Divider, {
|
|
3894
|
+
size: "small"
|
|
3895
|
+
}), jsxRuntime.jsx(ListItem, {
|
|
3896
|
+
primary: action.label,
|
|
3897
|
+
icon: action.icon && jsxRuntime.jsx(Icon, {
|
|
3898
|
+
name: action.icon,
|
|
3899
|
+
size: "md",
|
|
3900
|
+
iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
|
|
3901
|
+
}),
|
|
3902
|
+
interactive: true,
|
|
3903
|
+
onClick: function onClick() {
|
|
3904
|
+
return handleActionClick(action);
|
|
3905
|
+
},
|
|
3906
|
+
disabled: action.disabled,
|
|
3907
|
+
destructive: action.destructive,
|
|
3908
|
+
spacing: "compact"
|
|
3909
|
+
})]
|
|
3910
|
+
}, action.id);
|
|
3911
|
+
})
|
|
3912
|
+
})]
|
|
3913
|
+
})]
|
|
3914
|
+
}), document.body);
|
|
3915
|
+
};
|
|
3916
|
+
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;
|
|
3917
|
+
|
|
3918
|
+
function detectSpeechRecognitionConstructor(targetWindow) {
|
|
3919
|
+
if (!targetWindow) return null;
|
|
3920
|
+
var candidateWindow = targetWindow;
|
|
3921
|
+
if (candidateWindow.SpeechRecognition) {
|
|
3922
|
+
return candidateWindow.SpeechRecognition;
|
|
3923
|
+
}
|
|
3924
|
+
if (candidateWindow.webkitSpeechRecognition) {
|
|
3925
|
+
return candidateWindow.webkitSpeechRecognition;
|
|
3926
|
+
}
|
|
3927
|
+
return null;
|
|
3928
|
+
}
|
|
3929
|
+
function normalizeTranscript(input) {
|
|
3930
|
+
return input.replace(/\s+/g, ' ').trim();
|
|
3931
|
+
}
|
|
3932
|
+
function mapSpeechErrorCode(error) {
|
|
3933
|
+
switch (error) {
|
|
3934
|
+
case 'not-allowed':
|
|
3935
|
+
case 'service-not-allowed':
|
|
3936
|
+
return 'not-allowed';
|
|
3937
|
+
case 'no-speech':
|
|
3938
|
+
return 'no-speech';
|
|
3939
|
+
case 'audio-capture':
|
|
3940
|
+
return 'audio-capture';
|
|
3941
|
+
case 'aborted':
|
|
3942
|
+
return 'aborted';
|
|
3943
|
+
default:
|
|
3944
|
+
return 'unknown';
|
|
3945
|
+
}
|
|
3946
|
+
}
|
|
3947
|
+
function defaultVoiceErrorMessage(code) {
|
|
3948
|
+
switch (code) {
|
|
3949
|
+
case 'not-supported':
|
|
3950
|
+
return 'Voice input is not supported in this browser. Use Chrome or Edge.';
|
|
3951
|
+
case 'not-allowed':
|
|
3952
|
+
return 'Microphone permission denied. Allow access and try again.';
|
|
3953
|
+
case 'no-speech':
|
|
3954
|
+
return 'No speech detected. Try again.';
|
|
3955
|
+
case 'audio-capture':
|
|
3956
|
+
return 'No microphone device detected. Check your microphone and try again.';
|
|
3957
|
+
case 'aborted':
|
|
3958
|
+
return 'Voice input was stopped.';
|
|
3959
|
+
default:
|
|
3960
|
+
return 'Voice input failed. Try again.';
|
|
3961
|
+
}
|
|
3962
|
+
}
|
|
3963
|
+
|
|
3964
|
+
var textDrivenState = function textDrivenState(hasText) {
|
|
3965
|
+
return hasText ? 'typing' : 'idle';
|
|
3966
|
+
};
|
|
3967
|
+
function agentInputStateTransition(currentState, event) {
|
|
3968
|
+
if (currentState === 'disabled') {
|
|
3969
|
+
return 'disabled';
|
|
3970
|
+
}
|
|
3971
|
+
switch (event.type) {
|
|
3972
|
+
case 'INPUT_CHANGE':
|
|
3973
|
+
if (currentState === 'listening' || currentState === 'processingFinalTranscript' || currentState === 'submitting') {
|
|
3974
|
+
return currentState;
|
|
3975
|
+
}
|
|
3976
|
+
return textDrivenState(event.hasText);
|
|
3977
|
+
case 'MIC_START':
|
|
3978
|
+
if (currentState === 'idle' || currentState === 'typing') {
|
|
3979
|
+
return 'listening';
|
|
3980
|
+
}
|
|
3981
|
+
return currentState;
|
|
3982
|
+
case 'VOICE_INTERIM':
|
|
3983
|
+
if (currentState === 'listening') {
|
|
3984
|
+
return 'listening';
|
|
3985
|
+
}
|
|
3986
|
+
return currentState;
|
|
3987
|
+
case 'VOICE_FINAL':
|
|
3988
|
+
if (currentState === 'listening') {
|
|
3989
|
+
return 'processingFinalTranscript';
|
|
3990
|
+
}
|
|
3991
|
+
return currentState;
|
|
3992
|
+
case 'MIC_STOP':
|
|
3993
|
+
if (currentState === 'listening') {
|
|
3994
|
+
return textDrivenState(event.hasText);
|
|
3995
|
+
}
|
|
3996
|
+
return currentState;
|
|
3997
|
+
case 'SUBMIT':
|
|
3998
|
+
return 'submitting';
|
|
3999
|
+
case 'SUBMIT_SUCCESS':
|
|
4000
|
+
return 'idle';
|
|
4001
|
+
case 'SUBMIT_ERROR':
|
|
4002
|
+
return 'error';
|
|
4003
|
+
case 'VOICE_ERROR':
|
|
4004
|
+
case 'TIMEOUT_NO_SPEECH':
|
|
4005
|
+
return 'error';
|
|
4006
|
+
case 'RESET_ERROR':
|
|
4007
|
+
if (currentState === 'error') {
|
|
4008
|
+
return textDrivenState(event.hasText);
|
|
4009
|
+
}
|
|
4010
|
+
return currentState;
|
|
4011
|
+
default:
|
|
4012
|
+
return currentState;
|
|
4013
|
+
}
|
|
4014
|
+
}
|
|
4015
|
+
|
|
4016
|
+
var semantic$a = tokensData.semantic,
|
|
4017
|
+
base$8 = tokensData.base,
|
|
4018
|
+
component$1 = tokensData.component;
|
|
4019
|
+
var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
|
|
4020
|
+
var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
|
|
4021
|
+
var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
|
|
4022
|
+
var pulseRing = styled.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"])));
|
|
4023
|
+
var Container = styled.div.withConfig({
|
|
4024
|
+
displayName: "AgentInput__Container",
|
|
4025
|
+
componentId: "sc-fhl996-0"
|
|
4026
|
+
})(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]);
|
|
4027
|
+
var ControlsRow = styled.div.withConfig({
|
|
4028
|
+
displayName: "AgentInput__ControlsRow",
|
|
4029
|
+
componentId: "sc-fhl996-1"
|
|
4030
|
+
})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4031
|
+
var InputShell = styled.div.withConfig({
|
|
4032
|
+
displayName: "AgentInput__InputShell",
|
|
4033
|
+
componentId: "sc-fhl996-2"
|
|
4034
|
+
})(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);
|
|
4035
|
+
var Input = styled.input.withConfig({
|
|
4036
|
+
displayName: "AgentInput__Input",
|
|
4037
|
+
componentId: "sc-fhl996-3"
|
|
4038
|
+
})(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);
|
|
4039
|
+
var InputActions = styled.div.withConfig({
|
|
4040
|
+
displayName: "AgentInput__InputActions",
|
|
4041
|
+
componentId: "sc-fhl996-4"
|
|
4042
|
+
})(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);
|
|
4043
|
+
var CircularActionIconButton = styled(IconButton).withConfig({
|
|
4044
|
+
displayName: "AgentInput__CircularActionIconButton",
|
|
4045
|
+
componentId: "sc-fhl996-5"
|
|
4046
|
+
})(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$a.border.radius.circle);
|
|
4047
|
+
var InputWrapper = styled.div.withConfig({
|
|
4048
|
+
displayName: "AgentInput__InputWrapper",
|
|
4049
|
+
componentId: "sc-fhl996-6"
|
|
4050
|
+
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n"], ["\n flex: 1;\n min-width: 0;\n"])));
|
|
4051
|
+
var MicButtonWrapper = styled.div.withConfig({
|
|
4052
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4053
|
+
return !prop.startsWith('$');
|
|
4054
|
+
},
|
|
4055
|
+
displayName: "AgentInput__MicButtonWrapper",
|
|
4056
|
+
componentId: "sc-fhl996-7"
|
|
4057
|
+
})(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) {
|
|
4058
|
+
var $isListening = _a.$isListening,
|
|
4059
|
+
$reducedMotion = _a.$reducedMotion;
|
|
4060
|
+
return $isListening && !$reducedMotion && styled.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);
|
|
4061
|
+
});
|
|
4062
|
+
var StatusRow = styled.div.withConfig({
|
|
4063
|
+
displayName: "AgentInput__StatusRow",
|
|
4064
|
+
componentId: "sc-fhl996-8"
|
|
4065
|
+
})(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]);
|
|
4066
|
+
var StatusText = styled.div.withConfig({
|
|
4067
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4068
|
+
return !prop.startsWith('$');
|
|
4069
|
+
},
|
|
4070
|
+
displayName: "AgentInput__StatusText",
|
|
4071
|
+
componentId: "sc-fhl996-9"
|
|
4072
|
+
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\npadding-left: ", ";\n color: ", ";\n"], ["\npadding-left: ", ";\n color: ", ";\n"])), semantic$a.spacing.layout.xl, function (_a) {
|
|
4073
|
+
var $isError = _a.$isError;
|
|
4074
|
+
return $isError ? semantic$a.color.text.error : semantic$a.color.text.subdued;
|
|
4075
|
+
});
|
|
4076
|
+
var StatusAnnouncement = styled.div.withConfig({
|
|
4077
|
+
displayName: "AgentInput__StatusAnnouncement",
|
|
4078
|
+
componentId: "sc-fhl996-10"
|
|
4079
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
4080
|
+
var MeterContainer = styled.div.withConfig({
|
|
4081
|
+
displayName: "AgentInput__MeterContainer",
|
|
4082
|
+
componentId: "sc-fhl996-11"
|
|
4083
|
+
})(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]);
|
|
4084
|
+
var MeterBar = styled.div.withConfig({
|
|
4085
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4086
|
+
return !prop.startsWith('$');
|
|
4087
|
+
},
|
|
4088
|
+
displayName: "AgentInput__MeterBar",
|
|
4089
|
+
componentId: "sc-fhl996-12"
|
|
4090
|
+
})(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) {
|
|
4091
|
+
var $height = _a.$height;
|
|
4092
|
+
return "".concat($height * 100, "%");
|
|
4093
|
+
});
|
|
4094
|
+
var VisuallyHiddenLabel = styled.label.withConfig({
|
|
4095
|
+
displayName: "AgentInput__VisuallyHiddenLabel",
|
|
4096
|
+
componentId: "sc-fhl996-13"
|
|
4097
|
+
})(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"])));
|
|
4098
|
+
function getInitialState(hasText) {
|
|
4099
|
+
return hasText ? 'typing' : 'idle';
|
|
4100
|
+
}
|
|
4101
|
+
function createMeterBars(level) {
|
|
4102
|
+
var clampedLevel = Math.max(0, Math.min(level, 1));
|
|
4103
|
+
return [0.25 + clampedLevel * 0.75, 0.2 + clampedLevel * 0.6, 0.3 + clampedLevel * 0.7, 0.2 + clampedLevel * 0.5];
|
|
4104
|
+
}
|
|
4105
|
+
var AgentInput = function AgentInput(_a) {
|
|
4106
|
+
var value = _a.value,
|
|
4107
|
+
_b = _a.defaultValue,
|
|
4108
|
+
defaultValue = _b === void 0 ? '' : _b,
|
|
4109
|
+
onChange = _a.onChange,
|
|
4110
|
+
onSubmit = _a.onSubmit,
|
|
4111
|
+
_c = _a.placeholder,
|
|
4112
|
+
placeholder = _c === void 0 ? 'Ask a question' : _c,
|
|
4113
|
+
_d = _a.disabled,
|
|
4114
|
+
disabled = _d === void 0 ? false : _d,
|
|
4115
|
+
isSubmitting = _a.isSubmitting,
|
|
4116
|
+
_e = _a.enableVoice,
|
|
4117
|
+
enableVoice = _e === void 0 ? true : _e,
|
|
4118
|
+
_f = _a.autoSubmitOnVoiceFinal,
|
|
4119
|
+
autoSubmitOnVoiceFinal = _f === void 0 ? true : _f,
|
|
4120
|
+
_g = _a.voiceLanguage,
|
|
4121
|
+
voiceLanguage = _g === void 0 ? 'en-AU' : _g,
|
|
4122
|
+
_h = _a.noSpeechTimeoutMs,
|
|
4123
|
+
noSpeechTimeoutMs = _h === void 0 ? 8000 : _h,
|
|
4124
|
+
onVoiceStart = _a.onVoiceStart,
|
|
4125
|
+
onVoiceStop = _a.onVoiceStop,
|
|
4126
|
+
onVoiceInterim = _a.onVoiceInterim,
|
|
4127
|
+
onVoiceFinal = _a.onVoiceFinal,
|
|
4128
|
+
onVoiceError = _a.onVoiceError,
|
|
4129
|
+
statusMessage = _a.statusMessage,
|
|
4130
|
+
errorMessage = _a.errorMessage,
|
|
4131
|
+
_j = _a.label,
|
|
4132
|
+
label = _j === void 0 ? 'Agent input' : _j,
|
|
4133
|
+
dataTestId = _a["data-testid"];
|
|
4134
|
+
var isControlled = value !== undefined;
|
|
4135
|
+
var _k = React.useState(defaultValue),
|
|
4136
|
+
internalValue = _k[0],
|
|
4137
|
+
setInternalValue = _k[1];
|
|
4138
|
+
var _l = React.useState(getInitialState(normalizeTranscript(value !== null && value !== void 0 ? value : defaultValue).length > 0)),
|
|
4139
|
+
machineState = _l[0],
|
|
4140
|
+
setMachineState = _l[1];
|
|
4141
|
+
var _m = React.useState(''),
|
|
4142
|
+
interimTranscript = _m[0],
|
|
4143
|
+
setInterimTranscript = _m[1];
|
|
4144
|
+
var _o = React.useState(false),
|
|
4145
|
+
internalSubmitting = _o[0],
|
|
4146
|
+
setInternalSubmitting = _o[1];
|
|
4147
|
+
var _p = React.useState(undefined),
|
|
4148
|
+
internalErrorMessage = _p[0],
|
|
4149
|
+
setInternalErrorMessage = _p[1];
|
|
4150
|
+
var _q = React.useState(false),
|
|
4151
|
+
voiceSupported = _q[0],
|
|
4152
|
+
setVoiceSupported = _q[1];
|
|
4153
|
+
var _r = React.useState(false),
|
|
4154
|
+
prefersReducedMotion = _r[0],
|
|
4155
|
+
setPrefersReducedMotion = _r[1];
|
|
4156
|
+
var _s = React.useState(0),
|
|
4157
|
+
meterLevel = _s[0],
|
|
4158
|
+
setMeterLevel = _s[1];
|
|
4159
|
+
var recognitionRef = React.useRef(null);
|
|
4160
|
+
var noSpeechTimeoutRef = React.useRef(null);
|
|
4161
|
+
var isStoppingRef = React.useRef(false);
|
|
4162
|
+
var hasSubmittedVoiceFinalRef = React.useRef(false);
|
|
4163
|
+
var audioStreamRef = React.useRef(null);
|
|
4164
|
+
var audioContextRef = React.useRef(null);
|
|
4165
|
+
var meterRafRef = React.useRef(null);
|
|
4166
|
+
var inputId = React.useId();
|
|
4167
|
+
var statusId = "".concat(inputId, "-status");
|
|
4168
|
+
var currentValue = isControlled ? value !== null && value !== void 0 ? value : '' : internalValue;
|
|
4169
|
+
var hasText = normalizeTranscript(currentValue).length > 0;
|
|
4170
|
+
var effectiveSubmitting = isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : internalSubmitting;
|
|
4171
|
+
var effectiveState = disabled ? 'disabled' : machineState;
|
|
4172
|
+
var isListening = effectiveState === 'listening';
|
|
4173
|
+
var hasVoice = enableVoice && voiceSupported;
|
|
4174
|
+
var updateMachineState = React.useCallback(function (event) {
|
|
4175
|
+
setMachineState(function (previousState) {
|
|
4176
|
+
return agentInputStateTransition(previousState, event);
|
|
4177
|
+
});
|
|
4178
|
+
}, []);
|
|
4179
|
+
var updateValue = React.useCallback(function (nextValue) {
|
|
4180
|
+
if (!isControlled) {
|
|
4181
|
+
setInternalValue(nextValue);
|
|
4182
|
+
}
|
|
4183
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
|
|
4184
|
+
}, [isControlled, onChange]);
|
|
4185
|
+
var clearNoSpeechTimeout = React.useCallback(function () {
|
|
4186
|
+
if (noSpeechTimeoutRef.current) {
|
|
4187
|
+
window.clearTimeout(noSpeechTimeoutRef.current);
|
|
4188
|
+
noSpeechTimeoutRef.current = null;
|
|
4189
|
+
}
|
|
4190
|
+
}, []);
|
|
4191
|
+
var stopMeter = React.useCallback(function () {
|
|
4192
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4193
|
+
return __generator(this, function (_a) {
|
|
4194
|
+
switch (_a.label) {
|
|
4195
|
+
case 0:
|
|
4196
|
+
if (meterRafRef.current) {
|
|
4197
|
+
window.cancelAnimationFrame(meterRafRef.current);
|
|
4198
|
+
meterRafRef.current = null;
|
|
4199
|
+
}
|
|
4200
|
+
if (audioStreamRef.current) {
|
|
4201
|
+
audioStreamRef.current.getTracks().forEach(function (track) {
|
|
4202
|
+
return track.stop();
|
|
4203
|
+
});
|
|
4204
|
+
audioStreamRef.current = null;
|
|
4205
|
+
}
|
|
4206
|
+
if (!audioContextRef.current) return [3 /*break*/, 2];
|
|
4207
|
+
return [4 /*yield*/, audioContextRef.current.close()];
|
|
4208
|
+
case 1:
|
|
4209
|
+
_a.sent();
|
|
4210
|
+
audioContextRef.current = null;
|
|
4211
|
+
_a.label = 2;
|
|
4212
|
+
case 2:
|
|
4213
|
+
setMeterLevel(0);
|
|
4214
|
+
return [2 /*return*/];
|
|
4215
|
+
}
|
|
4216
|
+
});
|
|
4217
|
+
});
|
|
4218
|
+
}, []);
|
|
4219
|
+
var startMeter = React.useCallback(function () {
|
|
4220
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4221
|
+
var stream, audioContext, analyser_1, source, data_1, _loop_;
|
|
4222
|
+
var _b;
|
|
4223
|
+
return __generator(this, function (_c) {
|
|
4224
|
+
switch (_c.label) {
|
|
4225
|
+
case 0:
|
|
4226
|
+
if (prefersReducedMotion || !((_b = navigator === null || navigator === void 0 ? void 0 : navigator.mediaDevices) === null || _b === void 0 ? void 0 : _b.getUserMedia)) {
|
|
4227
|
+
return [2 /*return*/];
|
|
4228
|
+
}
|
|
4229
|
+
_c.label = 1;
|
|
4230
|
+
case 1:
|
|
4231
|
+
_c.trys.push([1, 3,, 4]);
|
|
4232
|
+
return [4 /*yield*/, navigator.mediaDevices.getUserMedia({
|
|
4233
|
+
audio: true
|
|
4234
|
+
})];
|
|
4235
|
+
case 2:
|
|
4236
|
+
stream = _c.sent();
|
|
4237
|
+
audioContext = new AudioContext();
|
|
4238
|
+
analyser_1 = audioContext.createAnalyser();
|
|
4239
|
+
analyser_1.fftSize = 256;
|
|
4240
|
+
source = audioContext.createMediaStreamSource(stream);
|
|
4241
|
+
source.connect(analyser_1);
|
|
4242
|
+
data_1 = new Uint8Array(analyser_1.frequencyBinCount);
|
|
4243
|
+
audioStreamRef.current = stream;
|
|
4244
|
+
audioContextRef.current = audioContext;
|
|
4245
|
+
_loop_ = function loop_1() {
|
|
4246
|
+
analyser_1.getByteTimeDomainData(data_1);
|
|
4247
|
+
var sum = 0;
|
|
4248
|
+
for (var index = 0; index < data_1.length; index += 1) {
|
|
4249
|
+
var centered = data_1[index] / 128 - 1;
|
|
4250
|
+
sum += centered * centered;
|
|
4251
|
+
}
|
|
4252
|
+
var rms = Math.sqrt(sum / data_1.length);
|
|
4253
|
+
var nextLevel = Math.max(0.05, Math.min(rms * 3, 1));
|
|
4254
|
+
setMeterLevel(nextLevel);
|
|
4255
|
+
meterRafRef.current = window.requestAnimationFrame(_loop_);
|
|
4256
|
+
};
|
|
4257
|
+
meterRafRef.current = window.requestAnimationFrame(_loop_);
|
|
4258
|
+
return [3 /*break*/, 4];
|
|
4259
|
+
case 3:
|
|
4260
|
+
_c.sent();
|
|
4261
|
+
setMeterLevel(0);
|
|
4262
|
+
return [3 /*break*/, 4];
|
|
4263
|
+
case 4:
|
|
4264
|
+
return [2 /*return*/];
|
|
4265
|
+
}
|
|
4266
|
+
});
|
|
4267
|
+
});
|
|
4268
|
+
}, [prefersReducedMotion]);
|
|
4269
|
+
var emitVoiceError = React.useCallback(function (code, fallback) {
|
|
4270
|
+
var message = fallback !== null && fallback !== void 0 ? fallback : defaultVoiceErrorMessage(code);
|
|
4271
|
+
setInternalErrorMessage(message);
|
|
4272
|
+
updateMachineState({
|
|
4273
|
+
type: 'VOICE_ERROR'
|
|
4274
|
+
});
|
|
4275
|
+
onVoiceError === null || onVoiceError === void 0 ? void 0 : onVoiceError({
|
|
4276
|
+
code: code,
|
|
4277
|
+
message: message
|
|
4278
|
+
});
|
|
4279
|
+
}, [onVoiceError, updateMachineState]);
|
|
4280
|
+
var submitPayload = React.useCallback(function (rawText, source) {
|
|
4281
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4282
|
+
var text;
|
|
4283
|
+
return __generator(this, function (_b) {
|
|
4284
|
+
switch (_b.label) {
|
|
4285
|
+
case 0:
|
|
4286
|
+
text = normalizeTranscript(rawText);
|
|
4287
|
+
if (!text || disabled || effectiveSubmitting) {
|
|
4288
|
+
return [2 /*return*/];
|
|
4289
|
+
}
|
|
4290
|
+
updateMachineState({
|
|
4291
|
+
type: 'SUBMIT'
|
|
4292
|
+
});
|
|
4293
|
+
setInternalErrorMessage(undefined);
|
|
4294
|
+
if (isSubmitting === undefined) {
|
|
4295
|
+
setInternalSubmitting(true);
|
|
4296
|
+
}
|
|
4297
|
+
_b.label = 1;
|
|
4298
|
+
case 1:
|
|
4299
|
+
_b.trys.push([1, 3, 4, 5]);
|
|
4300
|
+
return [4 /*yield*/, onSubmit({
|
|
4301
|
+
text: text,
|
|
4302
|
+
source: source,
|
|
4303
|
+
timestamp: new Date().toISOString()
|
|
4304
|
+
})];
|
|
4305
|
+
case 2:
|
|
4306
|
+
_b.sent();
|
|
4307
|
+
updateMachineState({
|
|
4308
|
+
type: 'SUBMIT_SUCCESS'
|
|
4309
|
+
});
|
|
4310
|
+
setInterimTranscript('');
|
|
4311
|
+
updateValue('');
|
|
4312
|
+
return [3 /*break*/, 5];
|
|
4313
|
+
case 3:
|
|
4314
|
+
_b.sent();
|
|
4315
|
+
updateMachineState({
|
|
4316
|
+
type: 'SUBMIT_ERROR'
|
|
4317
|
+
});
|
|
4318
|
+
if (source === 'voice-final') {
|
|
4319
|
+
updateValue(text);
|
|
4320
|
+
}
|
|
4321
|
+
setInternalErrorMessage('Submission failed. Please try again.');
|
|
4322
|
+
return [3 /*break*/, 5];
|
|
4323
|
+
case 4:
|
|
4324
|
+
if (isSubmitting === undefined) {
|
|
4325
|
+
setInternalSubmitting(false);
|
|
4326
|
+
}
|
|
4327
|
+
return [7 /*endfinally*/];
|
|
4328
|
+
case 5:
|
|
4329
|
+
return [2 /*return*/];
|
|
4330
|
+
}
|
|
4331
|
+
});
|
|
4332
|
+
});
|
|
4333
|
+
}, [disabled, effectiveSubmitting, isSubmitting, onSubmit, updateMachineState, updateValue]);
|
|
4334
|
+
var stopListening = React.useCallback(function (emitStopEvent_1) {
|
|
4335
|
+
var args_1 = [];
|
|
4336
|
+
for (var _i = 1; _i < arguments.length; _i++) {
|
|
4337
|
+
args_1[_i - 1] = arguments[_i];
|
|
4338
|
+
}
|
|
4339
|
+
return __awaiter(void 0, __spreadArray([emitStopEvent_1], args_1, true), void 0, function (emitStopEvent, preserveState) {
|
|
4340
|
+
if (preserveState === void 0) {
|
|
4341
|
+
preserveState = false;
|
|
4342
|
+
}
|
|
4343
|
+
return __generator(this, function (_a) {
|
|
4344
|
+
switch (_a.label) {
|
|
4345
|
+
case 0:
|
|
4346
|
+
isStoppingRef.current = true;
|
|
4347
|
+
clearNoSpeechTimeout();
|
|
4348
|
+
setInterimTranscript('');
|
|
4349
|
+
if (recognitionRef.current) {
|
|
4350
|
+
try {
|
|
4351
|
+
recognitionRef.current.stop();
|
|
4352
|
+
} catch (_b) {
|
|
4353
|
+
// no-op
|
|
4354
|
+
}
|
|
4355
|
+
}
|
|
4356
|
+
return [4 /*yield*/, stopMeter()];
|
|
4357
|
+
case 1:
|
|
4358
|
+
_a.sent();
|
|
4359
|
+
if (emitStopEvent) {
|
|
4360
|
+
onVoiceStop === null || onVoiceStop === void 0 ? void 0 : onVoiceStop();
|
|
4361
|
+
}
|
|
4362
|
+
if (!preserveState) {
|
|
4363
|
+
updateMachineState({
|
|
4364
|
+
type: 'MIC_STOP',
|
|
4365
|
+
hasText: hasText
|
|
4366
|
+
});
|
|
4367
|
+
}
|
|
4368
|
+
isStoppingRef.current = false;
|
|
4369
|
+
return [2 /*return*/];
|
|
4370
|
+
}
|
|
4371
|
+
});
|
|
4372
|
+
});
|
|
4373
|
+
}, [clearNoSpeechTimeout, hasText, onVoiceStop, stopMeter, updateMachineState]);
|
|
4374
|
+
var onNoSpeechTimeout = React.useCallback(function () {
|
|
4375
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4376
|
+
var message;
|
|
4377
|
+
return __generator(this, function (_a) {
|
|
4378
|
+
switch (_a.label) {
|
|
4379
|
+
case 0:
|
|
4380
|
+
clearNoSpeechTimeout();
|
|
4381
|
+
updateMachineState({
|
|
4382
|
+
type: 'TIMEOUT_NO_SPEECH'
|
|
4383
|
+
});
|
|
4384
|
+
message = defaultVoiceErrorMessage('no-speech');
|
|
4385
|
+
setInternalErrorMessage(message);
|
|
4386
|
+
onVoiceError === null || onVoiceError === void 0 ? void 0 : onVoiceError({
|
|
4387
|
+
code: 'no-speech',
|
|
4388
|
+
message: message
|
|
4389
|
+
});
|
|
4390
|
+
return [4 /*yield*/, stopListening(true, true)];
|
|
4391
|
+
case 1:
|
|
4392
|
+
_a.sent();
|
|
4393
|
+
return [2 /*return*/];
|
|
4394
|
+
}
|
|
4395
|
+
});
|
|
4396
|
+
});
|
|
4397
|
+
}, [clearNoSpeechTimeout, onVoiceError, stopListening, updateMachineState]);
|
|
4398
|
+
var beginListening = React.useCallback(function () {
|
|
4399
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4400
|
+
return __generator(this, function (_b) {
|
|
4401
|
+
switch (_b.label) {
|
|
4402
|
+
case 0:
|
|
4403
|
+
if (!recognitionRef.current || disabled || effectiveSubmitting) {
|
|
4404
|
+
return [2 /*return*/];
|
|
4405
|
+
}
|
|
4406
|
+
setInternalErrorMessage(undefined);
|
|
4407
|
+
hasSubmittedVoiceFinalRef.current = false;
|
|
4408
|
+
_b.label = 1;
|
|
4409
|
+
case 1:
|
|
4410
|
+
_b.trys.push([1, 3,, 4]);
|
|
4411
|
+
recognitionRef.current.start();
|
|
4412
|
+
updateMachineState({
|
|
4413
|
+
type: 'MIC_START'
|
|
4414
|
+
});
|
|
4415
|
+
onVoiceStart === null || onVoiceStart === void 0 ? void 0 : onVoiceStart();
|
|
4416
|
+
clearNoSpeechTimeout();
|
|
4417
|
+
noSpeechTimeoutRef.current = window.setTimeout(onNoSpeechTimeout, noSpeechTimeoutMs);
|
|
4418
|
+
return [4 /*yield*/, startMeter()];
|
|
4419
|
+
case 2:
|
|
4420
|
+
_b.sent();
|
|
4421
|
+
return [3 /*break*/, 4];
|
|
4422
|
+
case 3:
|
|
4423
|
+
_b.sent();
|
|
4424
|
+
emitVoiceError('unknown');
|
|
4425
|
+
return [3 /*break*/, 4];
|
|
4426
|
+
case 4:
|
|
4427
|
+
return [2 /*return*/];
|
|
4428
|
+
}
|
|
4429
|
+
});
|
|
4430
|
+
});
|
|
4431
|
+
}, [clearNoSpeechTimeout, disabled, effectiveSubmitting, emitVoiceError, noSpeechTimeoutMs, onNoSpeechTimeout, onVoiceStart, startMeter, updateMachineState]);
|
|
4432
|
+
React.useEffect(function () {
|
|
4433
|
+
var constructor = detectSpeechRecognitionConstructor(window);
|
|
4434
|
+
setVoiceSupported(Boolean(constructor));
|
|
4435
|
+
if (!enableVoice || !constructor) {
|
|
4436
|
+
return;
|
|
4437
|
+
}
|
|
4438
|
+
var recognition = new constructor();
|
|
4439
|
+
recognition.lang = voiceLanguage;
|
|
4440
|
+
recognition.interimResults = true;
|
|
4441
|
+
recognition.continuous = false;
|
|
4442
|
+
recognition.onresult = function (event) {
|
|
4443
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4444
|
+
var interim, finalText, index, result, normalizedInterim, normalizedFinal;
|
|
4445
|
+
return __generator(this, function (_a) {
|
|
4446
|
+
switch (_a.label) {
|
|
4447
|
+
case 0:
|
|
4448
|
+
clearNoSpeechTimeout();
|
|
4449
|
+
noSpeechTimeoutRef.current = window.setTimeout(onNoSpeechTimeout, noSpeechTimeoutMs);
|
|
4450
|
+
interim = '';
|
|
4451
|
+
finalText = '';
|
|
4452
|
+
for (index = event.resultIndex; index < event.results.length; index += 1) {
|
|
4453
|
+
result = event.results[index];
|
|
4454
|
+
if (!result || !result[0]) continue;
|
|
4455
|
+
if (result.isFinal) {
|
|
4456
|
+
finalText += " ".concat(result[0].transcript);
|
|
4457
|
+
} else {
|
|
4458
|
+
interim += " ".concat(result[0].transcript);
|
|
4459
|
+
}
|
|
4460
|
+
}
|
|
4461
|
+
normalizedInterim = normalizeTranscript(interim);
|
|
4462
|
+
setInterimTranscript(normalizedInterim);
|
|
4463
|
+
updateMachineState({
|
|
4464
|
+
type: 'VOICE_INTERIM'
|
|
4465
|
+
});
|
|
4466
|
+
if (normalizedInterim) {
|
|
4467
|
+
onVoiceInterim === null || onVoiceInterim === void 0 ? void 0 : onVoiceInterim(normalizedInterim);
|
|
4468
|
+
}
|
|
4469
|
+
normalizedFinal = normalizeTranscript(finalText);
|
|
4470
|
+
if (!normalizedFinal || hasSubmittedVoiceFinalRef.current) {
|
|
4471
|
+
return [2 /*return*/];
|
|
4472
|
+
}
|
|
4473
|
+
hasSubmittedVoiceFinalRef.current = true;
|
|
4474
|
+
updateMachineState({
|
|
4475
|
+
type: 'VOICE_FINAL'
|
|
4476
|
+
});
|
|
4477
|
+
setInterimTranscript('');
|
|
4478
|
+
onVoiceFinal === null || onVoiceFinal === void 0 ? void 0 : onVoiceFinal(normalizedFinal);
|
|
4479
|
+
return [4 /*yield*/, stopMeter()];
|
|
4480
|
+
case 1:
|
|
4481
|
+
_a.sent();
|
|
4482
|
+
if (!autoSubmitOnVoiceFinal) return [3 /*break*/, 3];
|
|
4483
|
+
return [4 /*yield*/, submitPayload(normalizedFinal, 'voice-final')];
|
|
4484
|
+
case 2:
|
|
4485
|
+
_a.sent();
|
|
4486
|
+
return [3 /*break*/, 4];
|
|
4487
|
+
case 3:
|
|
4488
|
+
updateValue(normalizedFinal);
|
|
4489
|
+
_a.label = 4;
|
|
4490
|
+
case 4:
|
|
4491
|
+
return [2 /*return*/];
|
|
4492
|
+
}
|
|
4493
|
+
});
|
|
4494
|
+
});
|
|
4495
|
+
};
|
|
4496
|
+
recognition.onerror = function (event) {
|
|
4497
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4498
|
+
var mappedCode;
|
|
4499
|
+
return __generator(this, function (_a) {
|
|
4500
|
+
switch (_a.label) {
|
|
4501
|
+
case 0:
|
|
4502
|
+
mappedCode = mapSpeechErrorCode(event.error);
|
|
4503
|
+
emitVoiceError(mappedCode);
|
|
4504
|
+
return [4 /*yield*/, stopListening(true, true)];
|
|
4505
|
+
case 1:
|
|
4506
|
+
_a.sent();
|
|
4507
|
+
return [2 /*return*/];
|
|
4508
|
+
}
|
|
4509
|
+
});
|
|
4510
|
+
});
|
|
4511
|
+
};
|
|
4512
|
+
recognition.onend = function () {
|
|
4513
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4514
|
+
return __generator(this, function (_a) {
|
|
4515
|
+
switch (_a.label) {
|
|
4516
|
+
case 0:
|
|
4517
|
+
if (isStoppingRef.current) return [2 /*return*/];
|
|
4518
|
+
clearNoSpeechTimeout();
|
|
4519
|
+
return [4 /*yield*/, stopMeter()];
|
|
4520
|
+
case 1:
|
|
4521
|
+
_a.sent();
|
|
4522
|
+
if (!hasSubmittedVoiceFinalRef.current) {
|
|
4523
|
+
updateMachineState({
|
|
4524
|
+
type: 'MIC_STOP',
|
|
4525
|
+
hasText: hasText
|
|
4526
|
+
});
|
|
4527
|
+
}
|
|
4528
|
+
return [2 /*return*/];
|
|
4529
|
+
}
|
|
4530
|
+
});
|
|
4531
|
+
});
|
|
4532
|
+
};
|
|
4533
|
+
recognitionRef.current = recognition;
|
|
4534
|
+
return function () {
|
|
4535
|
+
var _a;
|
|
4536
|
+
clearNoSpeechTimeout();
|
|
4537
|
+
(_a = recognitionRef.current) === null || _a === void 0 ? void 0 : _a.abort();
|
|
4538
|
+
recognitionRef.current = null;
|
|
4539
|
+
stopMeter();
|
|
4540
|
+
};
|
|
4541
|
+
}, [autoSubmitOnVoiceFinal, clearNoSpeechTimeout, emitVoiceError, enableVoice, hasText, noSpeechTimeoutMs, onNoSpeechTimeout, onVoiceFinal, onVoiceInterim, stopListening, stopMeter, submitPayload, updateMachineState, updateValue, voiceLanguage]);
|
|
4542
|
+
React.useEffect(function () {
|
|
4543
|
+
var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
4544
|
+
var sync = function sync() {
|
|
4545
|
+
return setPrefersReducedMotion(mediaQuery.matches);
|
|
4546
|
+
};
|
|
4547
|
+
sync();
|
|
4548
|
+
mediaQuery.addEventListener('change', sync);
|
|
4549
|
+
return function () {
|
|
4550
|
+
return mediaQuery.removeEventListener('change', sync);
|
|
4551
|
+
};
|
|
4552
|
+
}, []);
|
|
4553
|
+
React.useEffect(function () {
|
|
4554
|
+
if (effectiveState === 'error' && !internalErrorMessage && !errorMessage) {
|
|
4555
|
+
updateMachineState({
|
|
4556
|
+
type: 'RESET_ERROR',
|
|
4557
|
+
hasText: hasText
|
|
4558
|
+
});
|
|
4559
|
+
}
|
|
4560
|
+
}, [effectiveState, errorMessage, hasText, internalErrorMessage, updateMachineState]);
|
|
4561
|
+
React.useEffect(function () {
|
|
4562
|
+
if (!disabled && (machineState === 'idle' || machineState === 'typing')) {
|
|
4563
|
+
updateMachineState({
|
|
4564
|
+
type: 'INPUT_CHANGE',
|
|
4565
|
+
hasText: hasText
|
|
4566
|
+
});
|
|
4567
|
+
}
|
|
4568
|
+
}, [disabled, hasText, machineState, updateMachineState]);
|
|
4569
|
+
var displayedValue = React.useMemo(function () {
|
|
4570
|
+
if (!interimTranscript) {
|
|
4571
|
+
return currentValue;
|
|
4572
|
+
}
|
|
4573
|
+
return normalizeTranscript([currentValue, interimTranscript].filter(Boolean).join(' '));
|
|
4574
|
+
}, [currentValue, interimTranscript]);
|
|
4575
|
+
var onTextChange = function onTextChange(event) {
|
|
4576
|
+
updateValue(event.target.value);
|
|
4577
|
+
if (effectiveState === 'error') {
|
|
4578
|
+
setInternalErrorMessage(undefined);
|
|
4579
|
+
updateMachineState({
|
|
4580
|
+
type: 'RESET_ERROR',
|
|
4581
|
+
hasText: normalizeTranscript(event.target.value).length > 0
|
|
4582
|
+
});
|
|
4583
|
+
}
|
|
4584
|
+
};
|
|
4585
|
+
var onInputKeyDown = function onInputKeyDown(event) {
|
|
4586
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4587
|
+
return __generator(this, function (_a) {
|
|
4588
|
+
switch (_a.label) {
|
|
4589
|
+
case 0:
|
|
4590
|
+
if (!(event.key === 'Escape' && isListening)) return [3 /*break*/, 2];
|
|
4591
|
+
event.preventDefault();
|
|
4592
|
+
return [4 /*yield*/, stopListening(true)];
|
|
4593
|
+
case 1:
|
|
4594
|
+
_a.sent();
|
|
4595
|
+
return [2 /*return*/];
|
|
4596
|
+
case 2:
|
|
4597
|
+
if (!(event.key === 'Enter')) return [3 /*break*/, 4];
|
|
4598
|
+
event.preventDefault();
|
|
4599
|
+
return [4 /*yield*/, submitPayload(currentValue, 'text')];
|
|
4600
|
+
case 3:
|
|
4601
|
+
_a.sent();
|
|
4602
|
+
_a.label = 4;
|
|
4603
|
+
case 4:
|
|
4604
|
+
return [2 /*return*/];
|
|
4605
|
+
}
|
|
4606
|
+
});
|
|
4607
|
+
});
|
|
4608
|
+
};
|
|
4609
|
+
var onMicToggle = function onMicToggle() {
|
|
4610
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
4611
|
+
return __generator(this, function (_a) {
|
|
4612
|
+
switch (_a.label) {
|
|
4613
|
+
case 0:
|
|
4614
|
+
if (!hasVoice) return [2 /*return*/];
|
|
4615
|
+
if (!isListening) return [3 /*break*/, 2];
|
|
4616
|
+
return [4 /*yield*/, stopListening(true)];
|
|
4617
|
+
case 1:
|
|
4618
|
+
_a.sent();
|
|
4619
|
+
return [2 /*return*/];
|
|
4620
|
+
case 2:
|
|
4621
|
+
return [4 /*yield*/, beginListening()];
|
|
4622
|
+
case 3:
|
|
4623
|
+
_a.sent();
|
|
4624
|
+
return [2 /*return*/];
|
|
4625
|
+
}
|
|
4626
|
+
});
|
|
4627
|
+
});
|
|
4628
|
+
};
|
|
4629
|
+
var statusByState = {
|
|
4630
|
+
idle: statusMessage || DEFAULT_IDLE_HELPER,
|
|
4631
|
+
typing: statusMessage || DEFAULT_IDLE_HELPER,
|
|
4632
|
+
listening: statusMessage || DEFAULT_LISTENING_MESSAGE,
|
|
4633
|
+
processingFinalTranscript: statusMessage || DEFAULT_PROCESSING_MESSAGE,
|
|
4634
|
+
submitting: statusMessage || 'Submitting…',
|
|
4635
|
+
error: errorMessage || internalErrorMessage || 'Voice input failed. Try again.',
|
|
4636
|
+
disabled: statusMessage || DEFAULT_IDLE_HELPER
|
|
4637
|
+
};
|
|
4638
|
+
var unsupportedMessage = defaultVoiceErrorMessage('not-supported');
|
|
4639
|
+
var shouldShowUnsupported = enableVoice && !hasVoice;
|
|
4640
|
+
var resolvedStatus = shouldShowUnsupported ? unsupportedMessage : statusByState[effectiveState];
|
|
4641
|
+
var isStatusError = effectiveState === 'error' || shouldShowUnsupported;
|
|
4642
|
+
var meterBars = createMeterBars(meterLevel);
|
|
4643
|
+
var sendDisabled = disabled || effectiveSubmitting || normalizeTranscript(currentValue).length === 0;
|
|
4644
|
+
return jsxRuntime.jsxs(Container, {
|
|
4645
|
+
"data-testid": dataTestId,
|
|
4646
|
+
children: [jsxRuntime.jsx(VisuallyHiddenLabel, {
|
|
4647
|
+
htmlFor: inputId,
|
|
4648
|
+
children: label
|
|
4649
|
+
}), jsxRuntime.jsx(ControlsRow, {
|
|
4650
|
+
children: jsxRuntime.jsx(InputWrapper, {
|
|
4651
|
+
children: jsxRuntime.jsxs(InputShell, {
|
|
4652
|
+
"data-disabled": disabled || effectiveSubmitting,
|
|
4653
|
+
children: [jsxRuntime.jsx(Input, {
|
|
4654
|
+
id: inputId,
|
|
4655
|
+
type: "text",
|
|
4656
|
+
"aria-label": label,
|
|
4657
|
+
value: displayedValue,
|
|
4658
|
+
onChange: onTextChange,
|
|
4659
|
+
onKeyDown: onInputKeyDown,
|
|
4660
|
+
placeholder: placeholder,
|
|
4661
|
+
disabled: disabled || effectiveSubmitting,
|
|
4662
|
+
readOnly: isListening,
|
|
4663
|
+
"aria-describedby": statusId
|
|
4664
|
+
}), jsxRuntime.jsxs(InputActions, {
|
|
4665
|
+
children: [hasVoice && jsxRuntime.jsx(MicButtonWrapper, {
|
|
4666
|
+
"$isListening": isListening,
|
|
4667
|
+
"$reducedMotion": prefersReducedMotion,
|
|
4668
|
+
children: jsxRuntime.jsx(CircularActionIconButton, {
|
|
4669
|
+
variant: "naked",
|
|
4670
|
+
size: "medium",
|
|
4671
|
+
iconName: 'mic',
|
|
4672
|
+
onClick: onMicToggle,
|
|
4673
|
+
"aria-pressed": isListening,
|
|
4674
|
+
"aria-label": isListening ? 'Stop voice input' : 'Start voice input',
|
|
4675
|
+
disabled: disabled || effectiveSubmitting,
|
|
4676
|
+
type: "button"
|
|
4677
|
+
})
|
|
4678
|
+
}), jsxRuntime.jsx(CircularActionIconButton, {
|
|
4679
|
+
variant: "secondary",
|
|
4680
|
+
size: "medium",
|
|
4681
|
+
iconName: "directionUp",
|
|
3569
4682
|
onClick: function onClick() {
|
|
3570
|
-
return
|
|
4683
|
+
return submitPayload(currentValue, 'text');
|
|
3571
4684
|
},
|
|
3572
|
-
disabled:
|
|
3573
|
-
"
|
|
3574
|
-
"
|
|
3575
|
-
"aria-label": action.label,
|
|
3576
|
-
children: [action.icon && jsxRuntime.jsx(Icon, {
|
|
3577
|
-
name: action.icon,
|
|
3578
|
-
size: "md",
|
|
3579
|
-
iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
|
|
3580
|
-
}), jsxRuntime.jsx(Typography, {
|
|
3581
|
-
variant: "body",
|
|
3582
|
-
children: action.label
|
|
3583
|
-
})]
|
|
4685
|
+
disabled: sendDisabled,
|
|
4686
|
+
"aria-label": "Send message",
|
|
4687
|
+
type: "button"
|
|
3584
4688
|
})]
|
|
3585
|
-
}
|
|
4689
|
+
})]
|
|
4690
|
+
})
|
|
4691
|
+
})
|
|
4692
|
+
}), jsxRuntime.jsxs(StatusRow, {
|
|
4693
|
+
children: [jsxRuntime.jsx(StatusText, {
|
|
4694
|
+
"$isError": isStatusError,
|
|
4695
|
+
children: jsxRuntime.jsx(StatusAnnouncement, {
|
|
4696
|
+
id: statusId,
|
|
4697
|
+
role: "status",
|
|
4698
|
+
"aria-live": "polite",
|
|
4699
|
+
"aria-atomic": "true",
|
|
4700
|
+
children: jsxRuntime.jsx(Typography, {
|
|
4701
|
+
variant: "small",
|
|
4702
|
+
children: resolvedStatus
|
|
4703
|
+
})
|
|
4704
|
+
})
|
|
4705
|
+
}), isListening && !prefersReducedMotion && jsxRuntime.jsx(MeterContainer, {
|
|
4706
|
+
"aria-hidden": "true",
|
|
4707
|
+
children: meterBars.map(function (barHeight, index) {
|
|
4708
|
+
return jsxRuntime.jsx(MeterBar, {
|
|
4709
|
+
"$height": barHeight
|
|
4710
|
+
}, "meter-".concat(index));
|
|
3586
4711
|
})
|
|
3587
4712
|
})]
|
|
3588
4713
|
})]
|
|
3589
|
-
})
|
|
4714
|
+
});
|
|
3590
4715
|
};
|
|
3591
|
-
var templateObject_1$
|
|
4716
|
+
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;
|
|
3592
4717
|
|
|
3593
|
-
var semantic$
|
|
3594
|
-
base$
|
|
4718
|
+
var semantic$9 = tokensData.semantic,
|
|
4719
|
+
base$7 = tokensData.base;
|
|
3595
4720
|
// Default icons by variant
|
|
3596
4721
|
var variantIcons = {
|
|
3597
4722
|
error: 'crossCircle',
|
|
@@ -3619,56 +4744,56 @@ var StyledAlert = styled.div.withConfig({
|
|
|
3619
4744
|
},
|
|
3620
4745
|
displayName: "Alert__StyledAlert",
|
|
3621
4746
|
componentId: "sc-18tq5d-0"
|
|
3622
|
-
})(templateObject_1$
|
|
4747
|
+
})(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) {
|
|
3623
4748
|
var $inline = _a.$inline;
|
|
3624
4749
|
return $inline ? 'center' : 'flex-start';
|
|
3625
4750
|
}, function (_a) {
|
|
3626
4751
|
var $inline = _a.$inline;
|
|
3627
|
-
return $inline ? semantic$
|
|
4752
|
+
return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
|
|
3628
4753
|
}, function (_a) {
|
|
3629
4754
|
var $inline = _a.$inline;
|
|
3630
|
-
return $inline ? semantic$
|
|
3631
|
-
}, base$
|
|
4755
|
+
return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.md;
|
|
4756
|
+
}, base$7.border.radius[2], function (_a) {
|
|
3632
4757
|
var $variant = _a.$variant;
|
|
3633
4758
|
switch ($variant) {
|
|
3634
4759
|
case 'error':
|
|
3635
|
-
return "\n background-color: ".concat(semantic$
|
|
4760
|
+
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 ");
|
|
3636
4761
|
case 'warning':
|
|
3637
|
-
return "\n background-color: ".concat(semantic$
|
|
4762
|
+
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 ");
|
|
3638
4763
|
case 'success':
|
|
3639
|
-
return "\n background-color: ".concat(semantic$
|
|
4764
|
+
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 ");
|
|
3640
4765
|
case 'info':
|
|
3641
4766
|
default:
|
|
3642
|
-
return "\n background-color: ".concat(semantic$
|
|
4767
|
+
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 ");
|
|
3643
4768
|
}
|
|
3644
|
-
}, base$
|
|
4769
|
+
}, base$7.breakpoint.md, function (_a) {
|
|
3645
4770
|
var $inline = _a.$inline;
|
|
3646
|
-
return $inline ? semantic$
|
|
4771
|
+
return $inline ? semantic$9.spacing.layout.sm : semantic$9.spacing.layout.lg;
|
|
3647
4772
|
});
|
|
3648
|
-
var StyledIconContainer
|
|
4773
|
+
var StyledIconContainer = styled.div.withConfig({
|
|
3649
4774
|
displayName: "Alert__StyledIconContainer",
|
|
3650
4775
|
componentId: "sc-18tq5d-1"
|
|
3651
|
-
})(templateObject_2$
|
|
4776
|
+
})(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"])));
|
|
3652
4777
|
var StyledContent$1 = styled.div.withConfig({
|
|
3653
4778
|
displayName: "Alert__StyledContent",
|
|
3654
4779
|
componentId: "sc-18tq5d-2"
|
|
3655
|
-
})(templateObject_3$
|
|
4780
|
+
})(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);
|
|
3656
4781
|
var StyledTitle = styled.span.withConfig({
|
|
3657
4782
|
displayName: "Alert__StyledTitle",
|
|
3658
4783
|
componentId: "sc-18tq5d-3"
|
|
3659
|
-
})(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$
|
|
4784
|
+
})(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);
|
|
3660
4785
|
var StyledMessage = styled.span.withConfig({
|
|
3661
4786
|
displayName: "Alert__StyledMessage",
|
|
3662
4787
|
componentId: "sc-18tq5d-4"
|
|
3663
|
-
})(templateObject_5$
|
|
4788
|
+
})(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);
|
|
3664
4789
|
var StyledActions = styled.div.withConfig({
|
|
3665
4790
|
displayName: "Alert__StyledActions",
|
|
3666
4791
|
componentId: "sc-18tq5d-5"
|
|
3667
|
-
})(templateObject_6$
|
|
4792
|
+
})(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);
|
|
3668
4793
|
var StyledDismissButton = styled(IconButton).withConfig({
|
|
3669
4794
|
displayName: "Alert__StyledDismissButton",
|
|
3670
4795
|
componentId: "sc-18tq5d-6"
|
|
3671
|
-
})(templateObject_7$
|
|
4796
|
+
})(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);
|
|
3672
4797
|
var Alert = function Alert(_a) {
|
|
3673
4798
|
var _b = _a.variant,
|
|
3674
4799
|
variant = _b === void 0 ? 'info' : _b,
|
|
@@ -3707,7 +4832,7 @@ var Alert = function Alert(_a) {
|
|
|
3707
4832
|
"$inline": inline,
|
|
3708
4833
|
"data-testid": dataTestId
|
|
3709
4834
|
}, props, {
|
|
3710
|
-
children: [jsxRuntime.jsx(StyledIconContainer
|
|
4835
|
+
children: [jsxRuntime.jsx(StyledIconContainer, {
|
|
3711
4836
|
"aria-hidden": "true",
|
|
3712
4837
|
children: jsxRuntime.jsx(Icon, {
|
|
3713
4838
|
name: iconName,
|
|
@@ -3736,28 +4861,28 @@ var Alert = function Alert(_a) {
|
|
|
3736
4861
|
}));
|
|
3737
4862
|
};
|
|
3738
4863
|
Alert.displayName = 'Alert';
|
|
3739
|
-
var templateObject_1$
|
|
4864
|
+
var templateObject_1$n, templateObject_2$i, templateObject_3$g, templateObject_4$d, templateObject_5$9, templateObject_6$7, templateObject_7$5;
|
|
3740
4865
|
|
|
3741
4866
|
var _a$3, _b$1, _c, _d, _e, _f;
|
|
3742
4867
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
3743
4868
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
3744
4869
|
componentId: "sc-7ouzg5-0"
|
|
3745
|
-
})(templateObject_1$
|
|
4870
|
+
})(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');
|
|
3746
4871
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
3747
4872
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
3748
4873
|
componentId: "sc-7ouzg5-1"
|
|
3749
|
-
})(templateObject_2$
|
|
4874
|
+
})(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"]);
|
|
3750
4875
|
var BreadcrumbSeparator = styled.span.withConfig({
|
|
3751
4876
|
displayName: "Breadcrumbs__BreadcrumbSeparator",
|
|
3752
4877
|
componentId: "sc-7ouzg5-2"
|
|
3753
|
-
})(templateObject_3$
|
|
4878
|
+
})(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"])));
|
|
3754
4879
|
var isInternalUrl = function isInternalUrl(url) {
|
|
3755
4880
|
return url.startsWith('/') && !url.startsWith('http');
|
|
3756
4881
|
};
|
|
3757
4882
|
var Breadcrumbs = function Breadcrumbs(_a) {
|
|
3758
4883
|
var breadcrumbs = _a.breadcrumbs,
|
|
3759
4884
|
LinkComponent = _a.linkComponent;
|
|
3760
|
-
return jsxRuntime.jsx(Container, {
|
|
4885
|
+
return jsxRuntime.jsx(Container$1, {
|
|
3761
4886
|
children: jsxRuntime.jsx(BreadcrumbNavStyled, {
|
|
3762
4887
|
"aria-label": "breadcrumb",
|
|
3763
4888
|
children: jsxRuntime.jsx("ol", {
|
|
@@ -3798,12 +4923,12 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
3798
4923
|
})
|
|
3799
4924
|
});
|
|
3800
4925
|
};
|
|
3801
|
-
var templateObject_1$
|
|
4926
|
+
var templateObject_1$m, templateObject_2$h, templateObject_3$f;
|
|
3802
4927
|
|
|
3803
4928
|
var CardSmallStyled = styled.div.withConfig({
|
|
3804
4929
|
displayName: "CardSmall__CardSmallStyled",
|
|
3805
4930
|
componentId: "sc-jpcqvd-0"
|
|
3806
|
-
})(templateObject_1$
|
|
4931
|
+
})(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);
|
|
3807
4932
|
var CardSmall = function CardSmall(_a) {
|
|
3808
4933
|
var title = _a.title,
|
|
3809
4934
|
picture = _a.picture,
|
|
@@ -3855,13 +4980,13 @@ var CardSmall = function CardSmall(_a) {
|
|
|
3855
4980
|
})
|
|
3856
4981
|
});
|
|
3857
4982
|
};
|
|
3858
|
-
var templateObject_1$
|
|
4983
|
+
var templateObject_1$l;
|
|
3859
4984
|
|
|
3860
4985
|
var border$3 = tokensData.base.border;
|
|
3861
4986
|
var CardLargeStyled = styled.div.withConfig({
|
|
3862
4987
|
displayName: "CardLarge__CardLargeStyled",
|
|
3863
4988
|
componentId: "sc-1rfgdzl-0"
|
|
3864
|
-
})(templateObject_1$
|
|
4989
|
+
})(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]);
|
|
3865
4990
|
var CardLarge = function CardLarge(_a) {
|
|
3866
4991
|
var title = _a.title,
|
|
3867
4992
|
excerpt = _a.excerpt,
|
|
@@ -3914,7 +5039,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
3914
5039
|
})
|
|
3915
5040
|
});
|
|
3916
5041
|
};
|
|
3917
|
-
var templateObject_1$
|
|
5042
|
+
var templateObject_1$k;
|
|
3918
5043
|
|
|
3919
5044
|
/**
|
|
3920
5045
|
* Hidden native checkbox input for accessibility
|
|
@@ -3926,7 +5051,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
3926
5051
|
},
|
|
3927
5052
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
3928
5053
|
componentId: "sc-1ddpctx-0"
|
|
3929
|
-
})(templateObject_1$
|
|
5054
|
+
})(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"
|
|
3930
5055
|
/**
|
|
3931
5056
|
* Custom checkbox visual component
|
|
3932
5057
|
* 24px × 24px for 8px grid alignment
|
|
@@ -3943,7 +5068,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
3943
5068
|
},
|
|
3944
5069
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
3945
5070
|
componentId: "sc-1ddpctx-1"
|
|
3946
|
-
})(templateObject_2$
|
|
5071
|
+
})(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"
|
|
3947
5072
|
/**
|
|
3948
5073
|
* Container for checkbox with proper spacing and alignment
|
|
3949
5074
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -3976,7 +5101,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
3976
5101
|
},
|
|
3977
5102
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
3978
5103
|
componentId: "sc-1ddpctx-2"
|
|
3979
|
-
})(templateObject_3$
|
|
5104
|
+
})(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"
|
|
3980
5105
|
/**
|
|
3981
5106
|
* Label text with proper typography
|
|
3982
5107
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -3996,16 +5121,16 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
3996
5121
|
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
3997
5122
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
3998
5123
|
});
|
|
3999
|
-
var templateObject_1$
|
|
5124
|
+
var templateObject_1$j, templateObject_2$g, templateObject_3$e, templateObject_4$c;
|
|
4000
5125
|
|
|
4001
5126
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
4002
5127
|
displayName: "Checkbox__StyledFieldContainer",
|
|
4003
5128
|
componentId: "sc-vquz3v-0"
|
|
4004
|
-
})(templateObject_1$
|
|
5129
|
+
})(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]);
|
|
4005
5130
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
4006
5131
|
displayName: "Checkbox__StyledHelperText",
|
|
4007
5132
|
componentId: "sc-vquz3v-1"
|
|
4008
|
-
})(templateObject_2$
|
|
5133
|
+
})(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"
|
|
4009
5134
|
/**
|
|
4010
5135
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
4011
5136
|
*
|
|
@@ -4124,12 +5249,12 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_a, ref) {
|
|
|
4124
5249
|
});
|
|
4125
5250
|
});
|
|
4126
5251
|
Checkbox.displayName = 'Checkbox';
|
|
4127
|
-
var templateObject_1$
|
|
5252
|
+
var templateObject_1$i, templateObject_2$f;
|
|
4128
5253
|
|
|
4129
5254
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
4130
5255
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
4131
5256
|
componentId: "sc-ae049w-0"
|
|
4132
|
-
})(templateObject_1$
|
|
5257
|
+
})(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"])));
|
|
4133
5258
|
var ChipGroup = function ChipGroup(_a) {
|
|
4134
5259
|
var labels = _a.labels,
|
|
4135
5260
|
_b = _a.variant,
|
|
@@ -4149,24 +5274,44 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
4149
5274
|
})
|
|
4150
5275
|
});
|
|
4151
5276
|
};
|
|
4152
|
-
var templateObject_1$
|
|
5277
|
+
var templateObject_1$h;
|
|
4153
5278
|
|
|
4154
5279
|
var _a$2 = tokensData.semantic,
|
|
4155
5280
|
color$1 = _a$2.color,
|
|
4156
5281
|
border$2 = _a$2.border,
|
|
4157
5282
|
spacing$2 = _a$2.spacing;
|
|
5283
|
+
_a$2.motion;
|
|
4158
5284
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
4159
5285
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
4160
5286
|
componentId: "sc-1p1t0kp-0"
|
|
4161
|
-
})(templateObject_1$
|
|
5287
|
+
})(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) {
|
|
5288
|
+
var $isExpanded = _a.$isExpanded,
|
|
5289
|
+
$needsExpansion = _a.$needsExpansion;
|
|
5290
|
+
return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
|
|
5291
|
+
}, spacing$2.layout.sm, function (_a) {
|
|
5292
|
+
var $maxHeight = _a.$maxHeight,
|
|
5293
|
+
$isExpanded = _a.$isExpanded,
|
|
5294
|
+
$needsExpansion = _a.$needsExpansion;
|
|
5295
|
+
if (!$maxHeight || !$needsExpansion) return '';
|
|
5296
|
+
// Use a large value when expanded to allow smooth transition
|
|
5297
|
+
// 10000px is effectively "no limit" for most code blocks
|
|
5298
|
+
return $isExpanded ? 'max-height: 10000px;' : "max-height: ".concat($maxHeight, "px;");
|
|
5299
|
+
});
|
|
4162
5300
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
4163
5301
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
4164
5302
|
componentId: "sc-1p1t0kp-1"
|
|
4165
|
-
})(templateObject_2$
|
|
5303
|
+
})(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"])));
|
|
4166
5304
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
4167
5305
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
4168
5306
|
componentId: "sc-1p1t0kp-2"
|
|
4169
|
-
})(templateObject_3$
|
|
5307
|
+
})(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);
|
|
5308
|
+
var ExpandButtonWrapper = styled.div.withConfig({
|
|
5309
|
+
displayName: "CodeBlock__ExpandButtonWrapper",
|
|
5310
|
+
componentId: "sc-1p1t0kp-3"
|
|
5311
|
+
})(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) {
|
|
5312
|
+
var $hasGradient = _a.$hasGradient;
|
|
5313
|
+
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 ";
|
|
5314
|
+
});
|
|
4170
5315
|
var CopyButton = function CopyButton(_a) {
|
|
4171
5316
|
var text = _a.text,
|
|
4172
5317
|
onCopy = _a.onCopy;
|
|
@@ -4227,49 +5372,121 @@ var CopyButton = function CopyButton(_a) {
|
|
|
4227
5372
|
};
|
|
4228
5373
|
/**
|
|
4229
5374
|
* CodeBlock component for displaying formatted code with optional copy functionality
|
|
5375
|
+
* and expandable content for long code blocks.
|
|
4230
5376
|
*
|
|
4231
5377
|
* @param children - The code content to display
|
|
4232
5378
|
* @param showCopyButton - Whether to show the copy button (default: true)
|
|
4233
5379
|
* @param onCopy - Optional callback when code is copied
|
|
5380
|
+
* @param maxHeight - Maximum height in pixels before enabling expand/collapse
|
|
5381
|
+
* @param defaultExpanded - Initial expanded state when maxHeight is set
|
|
4234
5382
|
* @param data-testid - Test identifier for the code block
|
|
5383
|
+
*
|
|
5384
|
+
* @example
|
|
5385
|
+
* ```tsx
|
|
5386
|
+
* // Basic usage
|
|
5387
|
+
* <CodeBlock>const x = 1;</CodeBlock>
|
|
5388
|
+
*
|
|
5389
|
+
* // With max height and expand/collapse
|
|
5390
|
+
* <CodeBlock maxHeight={200}>
|
|
5391
|
+
* {longCodeString}
|
|
5392
|
+
* </CodeBlock>
|
|
5393
|
+
*
|
|
5394
|
+
* // Start expanded
|
|
5395
|
+
* <CodeBlock maxHeight={200} defaultExpanded>
|
|
5396
|
+
* {longCodeString}
|
|
5397
|
+
* </CodeBlock>
|
|
5398
|
+
* ```
|
|
4235
5399
|
*/
|
|
4236
5400
|
var CodeBlock = function CodeBlock(_a) {
|
|
4237
5401
|
var children = _a.children,
|
|
4238
5402
|
_b = _a.showCopyButton,
|
|
4239
5403
|
showCopyButton = _b === void 0 ? true : _b,
|
|
4240
5404
|
onCopy = _a.onCopy,
|
|
5405
|
+
maxHeight = _a.maxHeight,
|
|
5406
|
+
_c = _a.defaultExpanded,
|
|
5407
|
+
defaultExpanded = _c === void 0 ? false : _c,
|
|
4241
5408
|
testId = _a["data-testid"];
|
|
5409
|
+
var _d = React.useState(defaultExpanded),
|
|
5410
|
+
isExpanded = _d[0],
|
|
5411
|
+
setIsExpanded = _d[1];
|
|
5412
|
+
var _e = React.useState(false),
|
|
5413
|
+
needsExpansion = _e[0],
|
|
5414
|
+
setNeedsExpansion = _e[1];
|
|
5415
|
+
var contentRef = React.useRef(null);
|
|
5416
|
+
// Check if content exceeds maxHeight
|
|
5417
|
+
React.useEffect(function () {
|
|
5418
|
+
if (maxHeight && contentRef.current) {
|
|
5419
|
+
var scrollHeight = contentRef.current.scrollHeight;
|
|
5420
|
+
setNeedsExpansion(scrollHeight > maxHeight);
|
|
5421
|
+
}
|
|
5422
|
+
}, [children, maxHeight]);
|
|
5423
|
+
var handleToggleExpand = function handleToggleExpand() {
|
|
5424
|
+
setIsExpanded(function (prev) {
|
|
5425
|
+
return !prev;
|
|
5426
|
+
});
|
|
5427
|
+
// Announce state change to screen readers
|
|
5428
|
+
var announcement = isExpanded ? 'Code block collapsed' : 'Code block expanded';
|
|
5429
|
+
var announcer = document.createElement('div');
|
|
5430
|
+
announcer.setAttribute('aria-live', 'polite');
|
|
5431
|
+
announcer.setAttribute('aria-atomic', 'true');
|
|
5432
|
+
announcer.setAttribute('class', 'sr-only');
|
|
5433
|
+
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;';
|
|
5434
|
+
announcer.textContent = announcement;
|
|
5435
|
+
document.body.appendChild(announcer);
|
|
5436
|
+
setTimeout(function () {
|
|
5437
|
+
document.body.removeChild(announcer);
|
|
5438
|
+
}, 1000);
|
|
5439
|
+
};
|
|
5440
|
+
var showExpandButton = maxHeight && needsExpansion;
|
|
4242
5441
|
return jsxRuntime.jsxs(CodeBlockWrapper, {
|
|
4243
5442
|
children: [jsxRuntime.jsx(StyledCodeBlock, {
|
|
5443
|
+
ref: contentRef,
|
|
4244
5444
|
"data-testid": testId,
|
|
5445
|
+
"$maxHeight": maxHeight,
|
|
5446
|
+
"$isExpanded": isExpanded,
|
|
5447
|
+
"$needsExpansion": needsExpansion,
|
|
5448
|
+
"aria-expanded": showExpandButton ? isExpanded : undefined,
|
|
5449
|
+
tabIndex: 0,
|
|
4245
5450
|
children: children
|
|
5451
|
+
}), showExpandButton && jsxRuntime.jsx(ExpandButtonWrapper, {
|
|
5452
|
+
"$hasGradient": !isExpanded,
|
|
5453
|
+
children: jsxRuntime.jsx(Button, {
|
|
5454
|
+
variant: "secondary",
|
|
5455
|
+
size: "small",
|
|
5456
|
+
iconName: isExpanded ? 'caretUp' : 'caretDown',
|
|
5457
|
+
onClick: handleToggleExpand,
|
|
5458
|
+
"aria-expanded": isExpanded,
|
|
5459
|
+
"aria-controls": testId,
|
|
5460
|
+
"data-testid": "expand-button",
|
|
5461
|
+
children: isExpanded ? 'Show less' : 'Show more'
|
|
5462
|
+
})
|
|
4246
5463
|
}), showCopyButton && jsxRuntime.jsx(CopyButton, {
|
|
4247
5464
|
text: children,
|
|
4248
5465
|
onCopy: onCopy
|
|
4249
5466
|
})]
|
|
4250
5467
|
});
|
|
4251
5468
|
};
|
|
4252
|
-
var templateObject_1$
|
|
5469
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
4253
5470
|
|
|
4254
5471
|
var StyledHeader = styled.div.withConfig({
|
|
4255
5472
|
displayName: "DateGroup__StyledHeader",
|
|
4256
5473
|
componentId: "sc-9nfm1f-0"
|
|
4257
|
-
})(templateObject_1$
|
|
5474
|
+
})(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) {
|
|
4258
5475
|
var $sticky = _a.$sticky;
|
|
4259
5476
|
return $sticky && "\n position: sticky;\n top: 0;\n z-index: 10;\n box-shadow: ".concat(tokensData.base.shadow[2], ";\n ");
|
|
4260
5477
|
});
|
|
4261
5478
|
var StyledLeftSection = styled.div.withConfig({
|
|
4262
5479
|
displayName: "DateGroup__StyledLeftSection",
|
|
4263
5480
|
componentId: "sc-9nfm1f-1"
|
|
4264
|
-
})(templateObject_2$
|
|
5481
|
+
})(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);
|
|
4265
5482
|
var StyledRightSection = styled.div.withConfig({
|
|
4266
5483
|
displayName: "DateGroup__StyledRightSection",
|
|
4267
5484
|
componentId: "sc-9nfm1f-2"
|
|
4268
|
-
})(templateObject_3$
|
|
5485
|
+
})(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);
|
|
4269
5486
|
var StyledContent = styled.div.withConfig({
|
|
4270
5487
|
displayName: "DateGroup__StyledContent",
|
|
4271
5488
|
componentId: "sc-9nfm1f-3"
|
|
4272
|
-
})(templateObject_4$
|
|
5489
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n /* Content area for children */\n"], ["\n /* Content area for children */\n"
|
|
4273
5490
|
/**
|
|
4274
5491
|
* DateGroup component
|
|
4275
5492
|
*
|
|
@@ -4341,18 +5558,18 @@ var DateGroup = function DateGroup(_a) {
|
|
|
4341
5558
|
})]
|
|
4342
5559
|
});
|
|
4343
5560
|
};
|
|
4344
|
-
var templateObject_1$
|
|
5561
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c, templateObject_4$a;
|
|
4345
5562
|
|
|
4346
|
-
var semantic$
|
|
5563
|
+
var semantic$8 = tokensData.semantic;
|
|
4347
5564
|
var StyledContainer$1 = styled.div.withConfig({
|
|
4348
5565
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4349
5566
|
return !prop.startsWith('$');
|
|
4350
5567
|
},
|
|
4351
5568
|
displayName: "EmptyState__StyledContainer",
|
|
4352
5569
|
componentId: "sc-1u5hxh-0"
|
|
4353
|
-
})(templateObject_1$
|
|
5570
|
+
})(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) {
|
|
4354
5571
|
var $size = _a.$size;
|
|
4355
|
-
return $size === 'small' ? semantic$
|
|
5572
|
+
return $size === 'small' ? semantic$8.spacing.layout['4xl'] : $size === 'large' ? semantic$8.spacing.layout['8xl'] : semantic$8.spacing.layout['6xl'];
|
|
4356
5573
|
});
|
|
4357
5574
|
var StyledIllustration = styled.div.withConfig({
|
|
4358
5575
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -4360,22 +5577,22 @@ var StyledIllustration = styled.div.withConfig({
|
|
|
4360
5577
|
},
|
|
4361
5578
|
displayName: "EmptyState__StyledIllustration",
|
|
4362
5579
|
componentId: "sc-1u5hxh-1"
|
|
4363
|
-
})(templateObject_2$
|
|
5580
|
+
})(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) {
|
|
4364
5581
|
var $size = _a.$size;
|
|
4365
5582
|
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
4366
5583
|
}, function (_a) {
|
|
4367
5584
|
var $size = _a.$size;
|
|
4368
5585
|
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
4369
|
-
}, semantic$
|
|
5586
|
+
}, semantic$8.spacing.layout['2xl'], function (_a) {
|
|
4370
5587
|
var $variant = _a.$variant;
|
|
4371
|
-
return $variant === 'error' ? semantic$
|
|
5588
|
+
return $variant === 'error' ? semantic$8.color.icon.error : $variant === 'success' ? semantic$8.color.icon.success : semantic$8.color.icon.subdued;
|
|
4372
5589
|
});
|
|
4373
5590
|
var StyledTextContainer = styled.div.withConfig({
|
|
4374
5591
|
displayName: "EmptyState__StyledTextContainer",
|
|
4375
5592
|
componentId: "sc-1u5hxh-2"
|
|
4376
|
-
})(templateObject_3$
|
|
5593
|
+
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n max-width: 360px;\n margin-bottom: ", ";\n"], ["\n max-width: 360px;\n margin-bottom: ", ";\n"
|
|
4377
5594
|
// Map illustration type to icon name
|
|
4378
|
-
])), semantic$
|
|
5595
|
+
])), semantic$8.spacing.layout['2xl']);
|
|
4379
5596
|
// Map illustration type to icon name
|
|
4380
5597
|
var illustrationToIcon = {
|
|
4381
5598
|
search: 'search',
|
|
@@ -4430,7 +5647,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4430
5647
|
children: title
|
|
4431
5648
|
}), jsxRuntime.jsx("div", {
|
|
4432
5649
|
style: {
|
|
4433
|
-
marginTop: semantic$
|
|
5650
|
+
marginTop: semantic$8.spacing.layout.md
|
|
4434
5651
|
},
|
|
4435
5652
|
children: jsxRuntime.jsx(Typography, {
|
|
4436
5653
|
variant: "body",
|
|
@@ -4460,7 +5677,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
4460
5677
|
})]
|
|
4461
5678
|
});
|
|
4462
5679
|
};
|
|
4463
|
-
var templateObject_1$
|
|
5680
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b;
|
|
4464
5681
|
|
|
4465
5682
|
var _a$1 = tokensData.base,
|
|
4466
5683
|
spacing$1 = _a$1.spacing,
|
|
@@ -4468,23 +5685,23 @@ var _a$1 = tokensData.base,
|
|
|
4468
5685
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
4469
5686
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
4470
5687
|
componentId: "sc-1mi4lso-0"
|
|
4471
|
-
})(templateObject_1$
|
|
5688
|
+
})(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]);
|
|
4472
5689
|
var ImageWrapper = styled.div.withConfig({
|
|
4473
5690
|
displayName: "FeatureBlock__ImageWrapper",
|
|
4474
5691
|
componentId: "sc-1mi4lso-1"
|
|
4475
|
-
})(templateObject_2$
|
|
5692
|
+
})(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);
|
|
4476
5693
|
var ContentSection = styled.div.withConfig({
|
|
4477
5694
|
displayName: "FeatureBlock__ContentSection",
|
|
4478
5695
|
componentId: "sc-1mi4lso-2"
|
|
4479
|
-
})(templateObject_3$
|
|
5696
|
+
})(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]);
|
|
4480
5697
|
var ButtonWrapper = styled.div.withConfig({
|
|
4481
5698
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
4482
5699
|
componentId: "sc-1mi4lso-3"
|
|
4483
|
-
})(templateObject_4$
|
|
5700
|
+
})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
4484
5701
|
var ContentWrapper = styled.div.withConfig({
|
|
4485
5702
|
displayName: "FeatureBlock__ContentWrapper",
|
|
4486
5703
|
componentId: "sc-1mi4lso-4"
|
|
4487
|
-
})(templateObject_5$
|
|
5704
|
+
})(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"])));
|
|
4488
5705
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
4489
5706
|
var title = _a.title,
|
|
4490
5707
|
excerpt = _a.excerpt,
|
|
@@ -4541,7 +5758,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
4541
5758
|
}), jsxRuntime.jsx(Divider, {})]
|
|
4542
5759
|
});
|
|
4543
5760
|
};
|
|
4544
|
-
var templateObject_1$
|
|
5761
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8;
|
|
4545
5762
|
|
|
4546
5763
|
var _a = tokensData.base,
|
|
4547
5764
|
spacing = _a.spacing,
|
|
@@ -4555,14 +5772,14 @@ var _a = tokensData.base,
|
|
|
4555
5772
|
var DropdownContainer = styled.div.withConfig({
|
|
4556
5773
|
displayName: "Dropdown__DropdownContainer",
|
|
4557
5774
|
componentId: "sc-kz07c4-0"
|
|
4558
|
-
})(templateObject_1$
|
|
5775
|
+
})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
4559
5776
|
var DropdownTrigger = styled.button.withConfig({
|
|
4560
5777
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4561
5778
|
return !prop.startsWith('$');
|
|
4562
5779
|
},
|
|
4563
5780
|
displayName: "Dropdown__DropdownTrigger",
|
|
4564
5781
|
componentId: "sc-kz07c4-1"
|
|
4565
|
-
})(templateObject_2$
|
|
5782
|
+
})(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) {
|
|
4566
5783
|
var $hasError = _a.$hasError;
|
|
4567
5784
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
4568
5785
|
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
@@ -4582,7 +5799,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
4582
5799
|
},
|
|
4583
5800
|
displayName: "Dropdown__DropdownIcon",
|
|
4584
5801
|
componentId: "sc-kz07c4-2"
|
|
4585
|
-
})(templateObject_3$
|
|
5802
|
+
})(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) {
|
|
4586
5803
|
var $isOpen = _a.$isOpen;
|
|
4587
5804
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
4588
5805
|
});
|
|
@@ -4592,7 +5809,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
4592
5809
|
},
|
|
4593
5810
|
displayName: "Dropdown__DropdownMenu",
|
|
4594
5811
|
componentId: "sc-kz07c4-3"
|
|
4595
|
-
})(templateObject_4$
|
|
5812
|
+
})(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) {
|
|
4596
5813
|
var $isOpen = _a.$isOpen;
|
|
4597
5814
|
return $isOpen ? 1 : 0;
|
|
4598
5815
|
}, function (_a) {
|
|
@@ -4608,7 +5825,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
4608
5825
|
},
|
|
4609
5826
|
displayName: "Dropdown__DropdownOption",
|
|
4610
5827
|
componentId: "sc-kz07c4-4"
|
|
4611
|
-
})(templateObject_5$
|
|
5828
|
+
})(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) {
|
|
4612
5829
|
var $isSelected = _a.$isSelected,
|
|
4613
5830
|
$isFocused = _a.$isFocused;
|
|
4614
5831
|
if ($isFocused) return color.background.surface;
|
|
@@ -4618,7 +5835,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
4618
5835
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
4619
5836
|
displayName: "Dropdown__StyledHelperText",
|
|
4620
5837
|
componentId: "sc-kz07c4-5"
|
|
4621
|
-
})(templateObject_6$
|
|
5838
|
+
})(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) {
|
|
4622
5839
|
var $hasError = _a.$hasError;
|
|
4623
5840
|
return $hasError ? color.text.error : color.text.subdued;
|
|
4624
5841
|
}, spacing[2]);
|
|
@@ -4795,18 +6012,18 @@ var Dropdown = function Dropdown(_a) {
|
|
|
4795
6012
|
})]
|
|
4796
6013
|
});
|
|
4797
6014
|
};
|
|
4798
|
-
var templateObject_1$
|
|
6015
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6;
|
|
4799
6016
|
|
|
4800
|
-
var semantic$
|
|
6017
|
+
var semantic$7 = tokensData.semantic;
|
|
4801
6018
|
var StyledList = styled.ul.withConfig({
|
|
4802
6019
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4803
6020
|
return !prop.startsWith('$');
|
|
4804
6021
|
},
|
|
4805
6022
|
displayName: "List__StyledList",
|
|
4806
6023
|
componentId: "sc-1irksg5-0"
|
|
4807
|
-
})(templateObject_1$
|
|
6024
|
+
})(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) {
|
|
4808
6025
|
var $dividers = _a.$dividers;
|
|
4809
|
-
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$
|
|
6026
|
+
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$7.color.border["default"], ";\n }\n ");
|
|
4810
6027
|
});
|
|
4811
6028
|
var List = function List(_a) {
|
|
4812
6029
|
var children = _a.children,
|
|
@@ -4828,194 +6045,7 @@ var List = function List(_a) {
|
|
|
4828
6045
|
}));
|
|
4829
6046
|
};
|
|
4830
6047
|
List.displayName = 'List';
|
|
4831
|
-
var templateObject_1$
|
|
4832
|
-
|
|
4833
|
-
var semantic$7 = tokensData.semantic,
|
|
4834
|
-
base$7 = tokensData.base;
|
|
4835
|
-
var StyledListItem = styled.li.withConfig({
|
|
4836
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4837
|
-
return !prop.startsWith('$');
|
|
4838
|
-
},
|
|
4839
|
-
displayName: "ListItem__StyledListItem",
|
|
4840
|
-
componentId: "sc-1wzzt21-0"
|
|
4841
|
-
})(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) {
|
|
4842
|
-
var $interactive = _a.$interactive;
|
|
4843
|
-
return $interactive && 'user-select: none;';
|
|
4844
|
-
}, function (_a) {
|
|
4845
|
-
var $disabled = _a.$disabled;
|
|
4846
|
-
return $disabled && "\n opacity: ".concat(base$7.opacity[50], ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
4847
|
-
});
|
|
4848
|
-
var StyledItemContent = styled.div.withConfig({
|
|
4849
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4850
|
-
return !prop.startsWith('$');
|
|
4851
|
-
},
|
|
4852
|
-
displayName: "ListItem__StyledItemContent",
|
|
4853
|
-
componentId: "sc-1wzzt21-1"
|
|
4854
|
-
})(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) {
|
|
4855
|
-
var $spacing = _a.$spacing;
|
|
4856
|
-
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);
|
|
4857
|
-
}, base$7.border.radius[2], function (_a) {
|
|
4858
|
-
var $selected = _a.$selected;
|
|
4859
|
-
return $selected ? semantic$7.color.background['interactive-subtle'] : 'transparent';
|
|
4860
|
-
}, function (_a) {
|
|
4861
|
-
var $interactive = _a.$interactive,
|
|
4862
|
-
$disabled = _a.$disabled;
|
|
4863
|
-
if ($disabled) return 'not-allowed';
|
|
4864
|
-
if ($interactive) return 'pointer';
|
|
4865
|
-
return 'default';
|
|
4866
|
-
}, function (_a) {
|
|
4867
|
-
var $interactive = _a.$interactive,
|
|
4868
|
-
$disabled = _a.$disabled,
|
|
4869
|
-
$selected = _a.$selected;
|
|
4870
|
-
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 ");
|
|
4871
|
-
}, semantic$7.color.border.interactive);
|
|
4872
|
-
var StyledIconContainer = styled.div.withConfig({
|
|
4873
|
-
displayName: "ListItem__StyledIconContainer",
|
|
4874
|
-
componentId: "sc-1wzzt21-2"
|
|
4875
|
-
})(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"])));
|
|
4876
|
-
var StyledTextContent = styled.div.withConfig({
|
|
4877
|
-
displayName: "ListItem__StyledTextContent",
|
|
4878
|
-
componentId: "sc-1wzzt21-3"
|
|
4879
|
-
})(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);
|
|
4880
|
-
var StyledRightContent = styled.div.withConfig({
|
|
4881
|
-
displayName: "ListItem__StyledRightContent",
|
|
4882
|
-
componentId: "sc-1wzzt21-4"
|
|
4883
|
-
})(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);
|
|
4884
|
-
var StyledChevronIcon = styled.div.withConfig({
|
|
4885
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4886
|
-
return !prop.startsWith('$');
|
|
4887
|
-
},
|
|
4888
|
-
displayName: "ListItem__StyledChevronIcon",
|
|
4889
|
-
componentId: "sc-1wzzt21-5"
|
|
4890
|
-
})(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) {
|
|
4891
|
-
var $expanded = _a.$expanded;
|
|
4892
|
-
return $expanded ? '180deg' : '0deg';
|
|
4893
|
-
});
|
|
4894
|
-
var StyledExpandedContent = styled.div.withConfig({
|
|
4895
|
-
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4896
|
-
return !prop.startsWith('$');
|
|
4897
|
-
},
|
|
4898
|
-
displayName: "ListItem__StyledExpandedContent",
|
|
4899
|
-
componentId: "sc-1wzzt21-6"
|
|
4900
|
-
})(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) {
|
|
4901
|
-
var $expanded = _a.$expanded;
|
|
4902
|
-
return $expanded ? '1000px' : '0';
|
|
4903
|
-
}, function (_a) {
|
|
4904
|
-
var $expanded = _a.$expanded;
|
|
4905
|
-
return $expanded ? '1' : '0';
|
|
4906
|
-
}, function (_a) {
|
|
4907
|
-
var $expanded = _a.$expanded,
|
|
4908
|
-
$spacing = _a.$spacing;
|
|
4909
|
-
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 ");
|
|
4910
|
-
});
|
|
4911
|
-
var ListItem = function ListItem(_a) {
|
|
4912
|
-
var primary = _a.primary,
|
|
4913
|
-
secondary = _a.secondary,
|
|
4914
|
-
badge = _a.badge,
|
|
4915
|
-
icon = _a.icon,
|
|
4916
|
-
_b = _a.expandable,
|
|
4917
|
-
expandable = _b === void 0 ? false : _b,
|
|
4918
|
-
_c = _a.expanded,
|
|
4919
|
-
expanded = _c === void 0 ? false : _c,
|
|
4920
|
-
onToggle = _a.onToggle,
|
|
4921
|
-
_d = _a.interactive,
|
|
4922
|
-
interactive = _d === void 0 ? false : _d,
|
|
4923
|
-
onClick = _a.onClick,
|
|
4924
|
-
_e = _a.disabled,
|
|
4925
|
-
disabled = _e === void 0 ? false : _e,
|
|
4926
|
-
_f = _a.selected,
|
|
4927
|
-
selected = _f === void 0 ? false : _f,
|
|
4928
|
-
_g = _a.spacing,
|
|
4929
|
-
spacing = _g === void 0 ? 'comfortable' : _g,
|
|
4930
|
-
children = _a.children,
|
|
4931
|
-
className = _a.className,
|
|
4932
|
-
dataTestId = _a["data-testid"],
|
|
4933
|
-
customRole = _a.role,
|
|
4934
|
-
ariaSelected = _a["aria-selected"],
|
|
4935
|
-
id = _a.id,
|
|
4936
|
-
customTabIndex = _a.tabIndex,
|
|
4937
|
-
customOnKeyDown = _a.onKeyDown,
|
|
4938
|
-
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"]);
|
|
4939
|
-
var isInteractive = interactive || expandable || customRole === 'option';
|
|
4940
|
-
var contentRole = customRole === 'option' ? undefined : isInteractive ? 'button' : undefined;
|
|
4941
|
-
var ariaExpanded = expandable ? expanded : undefined;
|
|
4942
|
-
var ariaDisabled = disabled ? true : undefined;
|
|
4943
|
-
var ariaCurrent = selected ? 'true' : undefined;
|
|
4944
|
-
var handleClick = function handleClick() {
|
|
4945
|
-
if (disabled) return;
|
|
4946
|
-
if (expandable && onToggle) {
|
|
4947
|
-
onToggle();
|
|
4948
|
-
} else if (onClick) {
|
|
4949
|
-
onClick();
|
|
4950
|
-
}
|
|
4951
|
-
};
|
|
4952
|
-
var handleKeyDown = function handleKeyDown(event) {
|
|
4953
|
-
if (customOnKeyDown) {
|
|
4954
|
-
customOnKeyDown(event);
|
|
4955
|
-
return;
|
|
4956
|
-
}
|
|
4957
|
-
if (disabled) return;
|
|
4958
|
-
if (event.key === 'Enter' || event.key === ' ') {
|
|
4959
|
-
event.preventDefault();
|
|
4960
|
-
handleClick();
|
|
4961
|
-
}
|
|
4962
|
-
};
|
|
4963
|
-
return jsxRuntime.jsxs(StyledListItem, __assign({
|
|
4964
|
-
"$interactive": isInteractive,
|
|
4965
|
-
"$disabled": disabled,
|
|
4966
|
-
"$selected": selected,
|
|
4967
|
-
"$spacing": spacing,
|
|
4968
|
-
className: className,
|
|
4969
|
-
"data-testid": dataTestId,
|
|
4970
|
-
role: customRole || 'listitem',
|
|
4971
|
-
id: id,
|
|
4972
|
-
"aria-selected": ariaSelected
|
|
4973
|
-
}, props, {
|
|
4974
|
-
children: [jsxRuntime.jsxs(StyledItemContent, {
|
|
4975
|
-
"$interactive": isInteractive,
|
|
4976
|
-
"$disabled": disabled,
|
|
4977
|
-
"$selected": selected,
|
|
4978
|
-
"$spacing": spacing,
|
|
4979
|
-
role: contentRole,
|
|
4980
|
-
"aria-expanded": ariaExpanded,
|
|
4981
|
-
"aria-disabled": ariaDisabled,
|
|
4982
|
-
"aria-current": ariaCurrent,
|
|
4983
|
-
tabIndex: customTabIndex !== undefined ? customTabIndex : isInteractive && !disabled ? 0 : undefined,
|
|
4984
|
-
onClick: handleClick,
|
|
4985
|
-
onKeyDown: handleKeyDown,
|
|
4986
|
-
children: [icon && jsxRuntime.jsx(StyledIconContainer, {
|
|
4987
|
-
"aria-hidden": "true",
|
|
4988
|
-
children: icon
|
|
4989
|
-
}), jsxRuntime.jsxs(StyledTextContent, {
|
|
4990
|
-
children: [jsxRuntime.jsx(Typography, {
|
|
4991
|
-
variant: "body",
|
|
4992
|
-
color: "default",
|
|
4993
|
-
children: primary
|
|
4994
|
-
}), secondary && jsxRuntime.jsx(Typography, {
|
|
4995
|
-
variant: "small",
|
|
4996
|
-
color: "subdued",
|
|
4997
|
-
children: secondary
|
|
4998
|
-
})]
|
|
4999
|
-
}), jsxRuntime.jsxs(StyledRightContent, {
|
|
5000
|
-
children: [badge, expandable && jsxRuntime.jsx(StyledChevronIcon, {
|
|
5001
|
-
"$expanded": expanded,
|
|
5002
|
-
"aria-hidden": "true",
|
|
5003
|
-
children: jsxRuntime.jsx(Icon, {
|
|
5004
|
-
name: "caretDown",
|
|
5005
|
-
size: "sm"
|
|
5006
|
-
})
|
|
5007
|
-
})]
|
|
5008
|
-
})]
|
|
5009
|
-
}), expandable && children && jsxRuntime.jsx(StyledExpandedContent, {
|
|
5010
|
-
"$spacing": spacing,
|
|
5011
|
-
"$expanded": expanded,
|
|
5012
|
-
"aria-hidden": !expanded,
|
|
5013
|
-
children: children
|
|
5014
|
-
})]
|
|
5015
|
-
}));
|
|
5016
|
-
};
|
|
5017
|
-
ListItem.displayName = 'ListItem';
|
|
5018
|
-
var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5;
|
|
6048
|
+
var templateObject_1$b;
|
|
5019
6049
|
|
|
5020
6050
|
var input = tokensData.component.input;
|
|
5021
6051
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -7167,6 +8197,7 @@ var tokens = tokensData;
|
|
|
7167
8197
|
|
|
7168
8198
|
exports.AccountCard = AccountCard;
|
|
7169
8199
|
exports.ActionSheet = ActionSheet;
|
|
8200
|
+
exports.AgentInput = AgentInput;
|
|
7170
8201
|
exports.Alert = Alert;
|
|
7171
8202
|
exports.Avatar = Avatar;
|
|
7172
8203
|
exports.Badge = Badge;
|
|
@@ -7181,7 +8212,7 @@ exports.Checkbox = Checkbox;
|
|
|
7181
8212
|
exports.Chip = Chip;
|
|
7182
8213
|
exports.ChipGroup = ChipGroup;
|
|
7183
8214
|
exports.CodeBlock = CodeBlock;
|
|
7184
|
-
exports.Container = Container;
|
|
8215
|
+
exports.Container = Container$1;
|
|
7185
8216
|
exports.DateFormatter = DateFormatter;
|
|
7186
8217
|
exports.DateGroup = DateGroup;
|
|
7187
8218
|
exports.Divider = Divider;
|