@common-origin/design-system 2.0.1 → 2.3.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/CategoryBadge/CategoryBadge.d.ts +82 -0
- package/dist/components/atoms/CategoryBadge/index.d.ts +2 -0
- package/dist/components/atoms/Chip/shared/ChipBase.d.ts +1 -1
- package/dist/components/atoms/Chip/shared/utils.d.ts +1 -1
- package/dist/components/atoms/DateFormatter/DateFormatter.d.ts +3 -0
- package/dist/components/atoms/MoneyDisplay/MoneyDisplay.d.ts +26 -0
- package/dist/components/atoms/MoneyDisplay/index.d.ts +2 -0
- package/dist/components/atoms/StatusBadge/StatusBadge.d.ts +68 -0
- package/dist/components/atoms/StatusBadge/index.d.ts +2 -0
- package/dist/components/atoms/index.d.ts +3 -0
- package/dist/components/molecules/AccountCard/AccountCard.d.ts +44 -0
- package/dist/components/molecules/AccountCard/index.d.ts +2 -0
- package/dist/components/molecules/ActionSheet/ActionSheet.d.ts +110 -0
- package/dist/components/molecules/ActionSheet/index.d.ts +2 -0
- package/dist/components/molecules/Checkbox/SelectableInputBase.d.ts +1 -2
- package/dist/components/molecules/DateGroup/DateGroup.d.ts +34 -0
- package/dist/components/molecules/DateGroup/index.d.ts +2 -0
- package/dist/components/molecules/EmptyState/EmptyState.d.ts +32 -0
- package/dist/components/molecules/EmptyState/index.d.ts +2 -0
- package/dist/components/molecules/SearchField/SearchField.d.ts +108 -0
- package/dist/components/molecules/SearchField/index.d.ts +2 -0
- package/dist/components/molecules/TabBar/TabBar.d.ts +79 -0
- package/dist/components/molecules/TabBar/index.d.ts +2 -0
- package/dist/components/molecules/TextField/InputBase.d.ts +0 -1
- package/dist/components/molecules/TransactionListItem/TransactionListItem.d.ts +39 -0
- package/dist/components/molecules/TransactionListItem/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +7 -0
- package/dist/index.d.ts +93 -0
- package/dist/index.esm.js +2214 -335
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2221 -332
- package/dist/index.js.map +1 -1
- package/dist/styles/tokens.json +93 -0
- package/dist/tokens/index.esm.js +93 -0
- package/dist/tokens/index.esm.js.map +1 -1
- package/dist/tokens/index.js +93 -0
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/tokens.d.ts +93 -0
- package/package.json +3 -3
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import React, { useState,
|
|
1
|
+
import React, { useState, useRef, useEffect, forwardRef, useId, useCallback, useMemo } from 'react';
|
|
2
2
|
import styled, { keyframes, css } from 'styled-components';
|
|
3
|
-
import { parseISO, format } from 'date-fns';
|
|
3
|
+
import { parseISO, format, isToday, isYesterday, isThisWeek } from 'date-fns';
|
|
4
|
+
import { createPortal } from 'react-dom';
|
|
4
5
|
|
|
5
6
|
function _extends() {
|
|
6
7
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
@@ -99,7 +100,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
99
100
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
100
101
|
};
|
|
101
102
|
|
|
102
|
-
var base$
|
|
103
|
+
var base$d = {
|
|
103
104
|
border: {
|
|
104
105
|
radius: {
|
|
105
106
|
"1": "0.125rem",
|
|
@@ -267,6 +268,51 @@ var base$8 = {
|
|
|
267
268
|
"1100": "#004491",
|
|
268
269
|
"1200": "#003571",
|
|
269
270
|
"1300": "#002754"
|
|
271
|
+
},
|
|
272
|
+
purple: {
|
|
273
|
+
"100": "#F9F0FF",
|
|
274
|
+
"200": "#F4E1FF",
|
|
275
|
+
"300": "#EDD0FF",
|
|
276
|
+
"400": "#E3B8FF",
|
|
277
|
+
"500": "#D59DFF",
|
|
278
|
+
"600": "#C27EF7",
|
|
279
|
+
"700": "#AD5FE8",
|
|
280
|
+
"800": "#9644D4",
|
|
281
|
+
"900": "#7E2EBD",
|
|
282
|
+
"1000": "#67229F",
|
|
283
|
+
"1100": "#511882",
|
|
284
|
+
"1200": "#3D1066",
|
|
285
|
+
"1300": "#2B0A4D"
|
|
286
|
+
},
|
|
287
|
+
pink: {
|
|
288
|
+
"100": "#FFEFF9",
|
|
289
|
+
"200": "#FFDFF4",
|
|
290
|
+
"300": "#FFCBED",
|
|
291
|
+
"400": "#FFB0E3",
|
|
292
|
+
"500": "#FF8ED4",
|
|
293
|
+
"600": "#FF69C1",
|
|
294
|
+
"700": "#FF42AB",
|
|
295
|
+
"800": "#F31A93",
|
|
296
|
+
"900": "#DC007B",
|
|
297
|
+
"1000": "#B90064",
|
|
298
|
+
"1100": "#97004E",
|
|
299
|
+
"1200": "#78003A",
|
|
300
|
+
"1300": "#5C0029"
|
|
301
|
+
},
|
|
302
|
+
yellow: {
|
|
303
|
+
"100": "#FFF3D6",
|
|
304
|
+
"200": "#FFE9B3",
|
|
305
|
+
"300": "#FFDE8F",
|
|
306
|
+
"400": "#FFD162",
|
|
307
|
+
"500": "#FFC233",
|
|
308
|
+
"600": "#EDAD0A",
|
|
309
|
+
"700": "#D39700",
|
|
310
|
+
"800": "#B88100",
|
|
311
|
+
"900": "#9D6C00",
|
|
312
|
+
"1000": "#825800",
|
|
313
|
+
"1100": "#694600",
|
|
314
|
+
"1200": "#523600",
|
|
315
|
+
"1300": "#3D2800"
|
|
270
316
|
}
|
|
271
317
|
},
|
|
272
318
|
spacing: {
|
|
@@ -634,7 +680,7 @@ var component = {
|
|
|
634
680
|
},
|
|
635
681
|
$ref: "./component/index.json"
|
|
636
682
|
};
|
|
637
|
-
var semantic$
|
|
683
|
+
var semantic$g = {
|
|
638
684
|
border: {
|
|
639
685
|
"default": "0.0625rem solid #e9ecef",
|
|
640
686
|
subtle: "0.0625rem solid #dee2e6",
|
|
@@ -737,6 +783,54 @@ var semantic$a = {
|
|
|
737
783
|
error: "#D31510",
|
|
738
784
|
success: "#007A4D",
|
|
739
785
|
warning: "#B14C00"
|
|
786
|
+
},
|
|
787
|
+
financial: {
|
|
788
|
+
credit: "#15A46E",
|
|
789
|
+
"credit-hover": "#008F5D",
|
|
790
|
+
debit: "#D31510",
|
|
791
|
+
"debit-hover": "#B40000",
|
|
792
|
+
pending: "#F68511",
|
|
793
|
+
neutral: "#6c757d"
|
|
794
|
+
},
|
|
795
|
+
category: {
|
|
796
|
+
blue: "#3892F3",
|
|
797
|
+
"blue-emphasis": "#0265DC",
|
|
798
|
+
"blue-subtle": "#E0F2FF",
|
|
799
|
+
purple: "#AD5FE8",
|
|
800
|
+
"purple-emphasis": "#7E2EBD",
|
|
801
|
+
"purple-subtle": "#F9F0FF",
|
|
802
|
+
pink: "#FF42AB",
|
|
803
|
+
"pink-emphasis": "#DC007B",
|
|
804
|
+
"pink-subtle": "#FFEFF9",
|
|
805
|
+
yellow: "#D39700",
|
|
806
|
+
"yellow-emphasis": "#9D6C00",
|
|
807
|
+
"yellow-subtle": "#FFF3D6",
|
|
808
|
+
green: "#15A46E",
|
|
809
|
+
"green-emphasis": "#007A4D",
|
|
810
|
+
"green-subtle": "#CEF8E0",
|
|
811
|
+
red: "#F75C46",
|
|
812
|
+
"red-emphasis": "#D31510",
|
|
813
|
+
"red-subtle": "#FFEBE7",
|
|
814
|
+
orange: "#E46F00",
|
|
815
|
+
"orange-emphasis": "#B14C00",
|
|
816
|
+
"orange-subtle": "#FFECCC",
|
|
817
|
+
gray: "#495057",
|
|
818
|
+
"gray-emphasis": "#212529",
|
|
819
|
+
"gray-subtle": "#e9ecef"
|
|
820
|
+
},
|
|
821
|
+
status: {
|
|
822
|
+
pending: "#D39700",
|
|
823
|
+
"pending-bg": "#FFF3D6",
|
|
824
|
+
completed: "#007A4D",
|
|
825
|
+
"completed-bg": "#CEF8E0",
|
|
826
|
+
failed: "#D31510",
|
|
827
|
+
"failed-bg": "#FFEBE7",
|
|
828
|
+
cancelled: "#495057",
|
|
829
|
+
"cancelled-bg": "#e9ecef",
|
|
830
|
+
processing: "#0265DC",
|
|
831
|
+
"processing-bg": "#E0F2FF",
|
|
832
|
+
scheduled: "#7E2EBD",
|
|
833
|
+
"scheduled-bg": "#F9F0FF"
|
|
740
834
|
}
|
|
741
835
|
},
|
|
742
836
|
typography: {
|
|
@@ -771,9 +865,9 @@ var semantic$a = {
|
|
|
771
865
|
$ref: "./semantic/index.json"
|
|
772
866
|
};
|
|
773
867
|
var tokensData = {
|
|
774
|
-
base: base$
|
|
868
|
+
base: base$d,
|
|
775
869
|
component: component,
|
|
776
|
-
semantic: semantic$
|
|
870
|
+
semantic: semantic$g
|
|
777
871
|
};
|
|
778
872
|
|
|
779
873
|
React.createElement;
|
|
@@ -783,7 +877,7 @@ var AvatarContainer = styled.div.withConfig({
|
|
|
783
877
|
},
|
|
784
878
|
displayName: "Avatar__AvatarContainer",
|
|
785
879
|
componentId: "sc-ezn4ax-0"
|
|
786
|
-
})(templateObject_1$
|
|
880
|
+
})(templateObject_1$I || (templateObject_1$I = __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) {
|
|
787
881
|
var $size = _a.$size;
|
|
788
882
|
return tokensData.semantic.size.avatar[$size];
|
|
789
883
|
}, function (_a) {
|
|
@@ -796,14 +890,14 @@ var AvatarImage = styled.img.withConfig({
|
|
|
796
890
|
},
|
|
797
891
|
displayName: "Avatar__AvatarImage",
|
|
798
892
|
componentId: "sc-ezn4ax-1"
|
|
799
|
-
})(templateObject_2$
|
|
893
|
+
})(templateObject_2$t || (templateObject_2$t = __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"])), tokensData.base.border.radius.circle);
|
|
800
894
|
var AvatarInitials = styled.span.withConfig({
|
|
801
895
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
802
896
|
return !prop.startsWith('$');
|
|
803
897
|
},
|
|
804
898
|
displayName: "Avatar__AvatarInitials",
|
|
805
899
|
componentId: "sc-ezn4ax-2"
|
|
806
|
-
})(templateObject_3$
|
|
900
|
+
})(templateObject_3$p || (templateObject_3$p = __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"
|
|
807
901
|
// Helper function to get initials from name
|
|
808
902
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
809
903
|
var $size = _a.$size;
|
|
@@ -866,7 +960,7 @@ var Avatar = function Avatar(_a) {
|
|
|
866
960
|
"aria-hidden": "true"
|
|
867
961
|
}, initials));
|
|
868
962
|
};
|
|
869
|
-
var templateObject_1$
|
|
963
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$p;
|
|
870
964
|
|
|
871
965
|
React.createElement;
|
|
872
966
|
var _a$5 = tokensData.semantic,
|
|
@@ -934,7 +1028,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
934
1028
|
},
|
|
935
1029
|
displayName: "Typography__StyledTypography",
|
|
936
1030
|
componentId: "sc-17mqo4k-0"
|
|
937
|
-
})(templateObject_1$
|
|
1031
|
+
})(templateObject_1$H || (templateObject_1$H = __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"
|
|
938
1032
|
/**
|
|
939
1033
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
940
1034
|
*
|
|
@@ -1001,23 +1095,23 @@ var Typography = function Typography(_a) {
|
|
|
1001
1095
|
"data-testid": dataTestId
|
|
1002
1096
|
}, children);
|
|
1003
1097
|
};
|
|
1004
|
-
var templateObject_1$
|
|
1098
|
+
var templateObject_1$H;
|
|
1005
1099
|
|
|
1006
1100
|
React.createElement;
|
|
1007
1101
|
var color$3 = tokensData.semantic.color;
|
|
1008
1102
|
tokensData.base.shadow;
|
|
1009
|
-
var scaleIn = keyframes(templateObject_1$
|
|
1103
|
+
var scaleIn$1 = keyframes(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
1010
1104
|
var BadgeWrapper = styled.span.withConfig({
|
|
1011
1105
|
displayName: "Badge__BadgeWrapper",
|
|
1012
1106
|
componentId: "sc-tjz4pp-0"
|
|
1013
|
-
})(templateObject_2$
|
|
1107
|
+
})(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
1014
1108
|
var BadgeIndicator = styled.span.withConfig({
|
|
1015
1109
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1016
1110
|
return !prop.startsWith('$');
|
|
1017
1111
|
},
|
|
1018
1112
|
displayName: "Badge__BadgeIndicator",
|
|
1019
1113
|
componentId: "sc-tjz4pp-1"
|
|
1020
|
-
})(templateObject_3$
|
|
1114
|
+
})(templateObject_3$o || (templateObject_3$o = __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) {
|
|
1021
1115
|
return props.$isVisible ? 'flex' : 'none';
|
|
1022
1116
|
}, function (props) {
|
|
1023
1117
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1025,7 +1119,7 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1025
1119
|
return props.$isDot ? '8px' : '16px';
|
|
1026
1120
|
}, function (props) {
|
|
1027
1121
|
return props.$isDot ? '0' : '0 4px';
|
|
1028
|
-
}, tokensData.base.border.radius.circle, color$3.background["default"], scaleIn, function (props) {
|
|
1122
|
+
}, tokensData.base.border.radius.circle, color$3.background["default"], scaleIn$1, function (props) {
|
|
1029
1123
|
switch (props.$variant) {
|
|
1030
1124
|
case 'primary':
|
|
1031
1125
|
return "\n background-color: ".concat(color$3.background.interactive, ";\n color: ").concat(color$3.text.inverse, ";\n ");
|
|
@@ -1039,10 +1133,10 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1039
1133
|
return "\n background-color: ".concat(color$3.background.emphasis, ";\n color: ").concat(color$3.text.inverse, ";\n ");
|
|
1040
1134
|
}
|
|
1041
1135
|
});
|
|
1042
|
-
var ScreenReaderOnly = styled.span.withConfig({
|
|
1136
|
+
var ScreenReaderOnly$1 = styled.span.withConfig({
|
|
1043
1137
|
displayName: "Badge__ScreenReaderOnly",
|
|
1044
1138
|
componentId: "sc-tjz4pp-2"
|
|
1045
|
-
})(templateObject_4$
|
|
1139
|
+
})(templateObject_4$j || (templateObject_4$j = __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"])));
|
|
1046
1140
|
var Badge = function Badge(_a) {
|
|
1047
1141
|
var children = _a.children,
|
|
1048
1142
|
_b = _a.count,
|
|
@@ -1071,9 +1165,9 @@ var Badge = function Badge(_a) {
|
|
|
1071
1165
|
}, !dot && /*#__PURE__*/React.createElement(Typography, {
|
|
1072
1166
|
variant: "caption",
|
|
1073
1167
|
color: "inverse"
|
|
1074
|
-
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly, null, label)));
|
|
1168
|
+
}, displayCount), /*#__PURE__*/React.createElement(ScreenReaderOnly$1, null, label)));
|
|
1075
1169
|
};
|
|
1076
|
-
var templateObject_1$
|
|
1170
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$o, templateObject_4$j;
|
|
1077
1171
|
|
|
1078
1172
|
React.createElement;
|
|
1079
1173
|
var StyledBox = styled.div.withConfig({
|
|
@@ -1085,25 +1179,25 @@ var StyledBox = styled.div.withConfig({
|
|
|
1085
1179
|
})(templateObject_43 || (templateObject_43 = __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 // 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 // Overflow\n ", "\n ", "\n ", "\n"
|
|
1086
1180
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1087
1181
|
])), function (props) {
|
|
1088
|
-
return props.$display && css(templateObject_1$
|
|
1182
|
+
return props.$display && css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1089
1183
|
}, function (props) {
|
|
1090
|
-
return props.$flexDirection && css(templateObject_2$
|
|
1184
|
+
return props.$flexDirection && css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1091
1185
|
}, function (props) {
|
|
1092
|
-
return props.$justifyContent && css(templateObject_3$
|
|
1186
|
+
return props.$justifyContent && css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1093
1187
|
}, function (props) {
|
|
1094
|
-
return props.$alignItems && css(templateObject_4$
|
|
1188
|
+
return props.$alignItems && css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1095
1189
|
}, function (props) {
|
|
1096
|
-
return props.$flexWrap && css(templateObject_5$
|
|
1190
|
+
return props.$flexWrap && css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1097
1191
|
}, function (props) {
|
|
1098
|
-
return props.$gap && css(templateObject_6$
|
|
1192
|
+
return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1099
1193
|
}, function (props) {
|
|
1100
|
-
return props.$m && css(templateObject_7$
|
|
1194
|
+
return props.$m && css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1101
1195
|
}, function (props) {
|
|
1102
|
-
return props.$mt && css(templateObject_8$
|
|
1196
|
+
return props.$mt && css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1103
1197
|
}, function (props) {
|
|
1104
|
-
return props.$mr && css(templateObject_9$
|
|
1198
|
+
return props.$mr && css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
|
|
1105
1199
|
}, function (props) {
|
|
1106
|
-
return props.$mb && css(templateObject_10$
|
|
1200
|
+
return props.$mb && css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
|
|
1107
1201
|
}, function (props) {
|
|
1108
1202
|
return props.$ml && css(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["margin-left: ", ";"], ["margin-left: ", ";"])), tokensData.semantic.spacing.layout[props.$ml]);
|
|
1109
1203
|
}, function (props) {
|
|
@@ -1275,7 +1369,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1275
1369
|
}, rest), children);
|
|
1276
1370
|
};
|
|
1277
1371
|
var Box = BoxTransform;
|
|
1278
|
-
var templateObject_1$
|
|
1372
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$n, templateObject_4$i, templateObject_5$e, templateObject_6$d, templateObject_7$b, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, 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;
|
|
1279
1373
|
|
|
1280
1374
|
var add = {
|
|
1281
1375
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -1501,7 +1595,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
1501
1595
|
},
|
|
1502
1596
|
displayName: "Icon__IconStyled",
|
|
1503
1597
|
componentId: "sc-1105czq-0"
|
|
1504
|
-
})(templateObject_1$
|
|
1598
|
+
})(templateObject_1$E || (templateObject_1$E = __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) {
|
|
1505
1599
|
var $size = _a.$size;
|
|
1506
1600
|
return tokensData.semantic.size.icon[$size];
|
|
1507
1601
|
}, function (_a) {
|
|
@@ -1565,20 +1659,20 @@ var Icon = function Icon(_a) {
|
|
|
1565
1659
|
d: iconData.path
|
|
1566
1660
|
})));
|
|
1567
1661
|
};
|
|
1568
|
-
var templateObject_1$
|
|
1662
|
+
var templateObject_1$E;
|
|
1569
1663
|
|
|
1570
1664
|
React.createElement;
|
|
1571
1665
|
var button = tokensData.component.button,
|
|
1572
|
-
semantic$
|
|
1666
|
+
semantic$f = tokensData.semantic;
|
|
1573
1667
|
// Base styles shared between button and link
|
|
1574
|
-
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$
|
|
1668
|
+
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$f.motion.hover, ";\n white-space: nowrap;\n user-select: none;\n \n &:focus {\n outline: ").concat(button.focus.outline, ";\n outline-offset: ").concat(button.focus.outlineOffset, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n");
|
|
1575
1669
|
// Dynamic variant styles using component tokens
|
|
1576
1670
|
var getVariantStyles = function getVariantStyles(_a) {
|
|
1577
1671
|
var $variant = _a.$variant;
|
|
1578
1672
|
return "\n background-color: ".concat($variant === 'primary' ? button.primary.backgroundColor : $variant === 'secondary' ? button.variants.secondary.backgroundColor : button.variants.naked.backgroundColor, ";\n color: ").concat($variant === 'primary' ? button.primary.textColor : $variant === 'secondary' ? button.variants.secondary.textColor : button.variants.naked.textColor, ";\n \n &:hover:not(:disabled) {\n background-color: ").concat($variant === 'primary' ? button.hover.backgroundColor : $variant === 'secondary' ? button.variants.secondary.hover.backgroundColor : button.variants.naked.hover.backgroundColor, ";\n }\n\n &:active:not(:disabled) {\n background-color: ").concat($variant === 'primary' ? button.active.backgroundColor : $variant === 'secondary' ? button.variants.secondary.active.backgroundColor : button.variants.naked.active.backgroundColor, ";\n }\n\n &:disabled {\n background-color: ").concat($variant === 'primary' ? button.disabled.backgroundColor : $variant === 'secondary' ? button.variants.secondary.disabled.backgroundColor : button.variants.naked.disabled.backgroundColor, ";\n color: ").concat($variant === 'primary' ? button.disabled.textColor : $variant === 'secondary' ? button.variants.secondary.disabled.textColor : button.variants.naked.disabled.textColor, ";\n }\n");
|
|
1579
1673
|
};
|
|
1580
1674
|
// Dynamic size styles using component tokens
|
|
1581
|
-
var getSizeStyles = function getSizeStyles(_a) {
|
|
1675
|
+
var getSizeStyles$2 = function getSizeStyles(_a) {
|
|
1582
1676
|
var $size = _a.$size;
|
|
1583
1677
|
switch ($size) {
|
|
1584
1678
|
case 'small':
|
|
@@ -1597,16 +1691,16 @@ var StyledButton = styled.button.withConfig({
|
|
|
1597
1691
|
},
|
|
1598
1692
|
displayName: "Button__StyledButton",
|
|
1599
1693
|
componentId: "sc-1eiuum9-0"
|
|
1600
|
-
})(templateObject_1$
|
|
1694
|
+
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles$2);
|
|
1601
1695
|
var StyledLink = styled.a.withConfig({
|
|
1602
1696
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1603
1697
|
return !prop.startsWith('$');
|
|
1604
1698
|
},
|
|
1605
1699
|
displayName: "Button__StyledLink",
|
|
1606
1700
|
componentId: "sc-1eiuum9-1"
|
|
1607
|
-
})(templateObject_2$
|
|
1701
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
1608
1702
|
// Helper function to get icon size based on button size
|
|
1609
|
-
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles);
|
|
1703
|
+
])), baseButtonStyles, button.primary.borderRadius, getVariantStyles, getSizeStyles$2);
|
|
1610
1704
|
// Helper function to get icon size based on button size
|
|
1611
1705
|
var getIconSize = function getIconSize(buttonSize) {
|
|
1612
1706
|
switch (buttonSize) {
|
|
@@ -1696,7 +1790,168 @@ var Button = function Button(_a) {
|
|
|
1696
1790
|
"data-testid": dataTestId
|
|
1697
1791
|
}, buttonProps), renderButtonContent(children, iconName, size));
|
|
1698
1792
|
};
|
|
1699
|
-
var templateObject_1$
|
|
1793
|
+
var templateObject_1$D, templateObject_2$q;
|
|
1794
|
+
|
|
1795
|
+
React.createElement;
|
|
1796
|
+
var semantic$e = tokensData.semantic,
|
|
1797
|
+
base$c = tokensData.base;
|
|
1798
|
+
var getColorStyles = function getColorStyles(color, variant) {
|
|
1799
|
+
var colorKey = color;
|
|
1800
|
+
if (variant === 'filled') {
|
|
1801
|
+
return {
|
|
1802
|
+
backgroundColor: semantic$e.color.category["".concat(colorKey, "-emphasis")],
|
|
1803
|
+
color: semantic$e.color.text.inverse,
|
|
1804
|
+
borderColor: 'transparent'
|
|
1805
|
+
};
|
|
1806
|
+
}
|
|
1807
|
+
if (variant === 'outlined') {
|
|
1808
|
+
return {
|
|
1809
|
+
backgroundColor: 'transparent',
|
|
1810
|
+
color: semantic$e.color.category[colorKey],
|
|
1811
|
+
borderColor: semantic$e.color.category[colorKey]
|
|
1812
|
+
};
|
|
1813
|
+
}
|
|
1814
|
+
// minimal
|
|
1815
|
+
return {
|
|
1816
|
+
backgroundColor: semantic$e.color.category["".concat(colorKey, "-subtle")],
|
|
1817
|
+
color: semantic$e.color.category[colorKey],
|
|
1818
|
+
borderColor: 'transparent'
|
|
1819
|
+
};
|
|
1820
|
+
};
|
|
1821
|
+
var getSizeStyles$1 = function getSizeStyles(size) {
|
|
1822
|
+
if (size === 'small') {
|
|
1823
|
+
return {
|
|
1824
|
+
height: '24px',
|
|
1825
|
+
padding: "".concat(base$c.spacing[1], " ").concat(base$c.spacing[2]),
|
|
1826
|
+
font: semantic$e.typography.caption,
|
|
1827
|
+
gap: base$c.spacing[1],
|
|
1828
|
+
iconSize: 'xs'
|
|
1829
|
+
};
|
|
1830
|
+
}
|
|
1831
|
+
// medium
|
|
1832
|
+
return {
|
|
1833
|
+
height: '32px',
|
|
1834
|
+
padding: "".concat(base$c.spacing[2], " ").concat(base$c.spacing[3]),
|
|
1835
|
+
font: semantic$e.typography.small,
|
|
1836
|
+
gap: base$c.spacing[1],
|
|
1837
|
+
iconSize: 'sm'
|
|
1838
|
+
};
|
|
1839
|
+
};
|
|
1840
|
+
var StyledCategoryBadge = styled.span.withConfig({
|
|
1841
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1842
|
+
return !prop.startsWith('$');
|
|
1843
|
+
},
|
|
1844
|
+
displayName: "CategoryBadge__StyledCategoryBadge",
|
|
1845
|
+
componentId: "sc-17aslpn-0"
|
|
1846
|
+
})(templateObject_1$C || (templateObject_1$C = __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 transition: ", ";\n border-width: ", ";\n border-style: solid;\n \n /* Apply CSS custom properties */\n background-color: var(--category-badge-bg);\n color: var(--category-badge-color);\n border-color: var(--category-badge-border);\n height: var(--category-badge-height);\n padding: var(--category-badge-padding);\n font: var(--category-badge-font);\n gap: var(--category-badge-gap);\n opacity: var(--category-badge-opacity);\n cursor: var(--category-badge-cursor);\n \n /* Hover state for clickable badges */\n ", "\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\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 transition: ", ";\n border-width: ", ";\n border-style: solid;\n \n /* Apply CSS custom properties */\n background-color: var(--category-badge-bg);\n color: var(--category-badge-color);\n border-color: var(--category-badge-border);\n height: var(--category-badge-height);\n padding: var(--category-badge-padding);\n font: var(--category-badge-font);\n gap: var(--category-badge-gap);\n opacity: var(--category-badge-opacity);\n cursor: var(--category-badge-cursor);\n \n /* Hover state for clickable badges */\n ", "\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"
|
|
1847
|
+
/**
|
|
1848
|
+
* CategoryBadge component for displaying transaction categories
|
|
1849
|
+
*
|
|
1850
|
+
* Supports 8 color options, 3 visual variants, optional icons, and interactive behavior.
|
|
1851
|
+
* Perfect for categorizing financial transactions or content.
|
|
1852
|
+
*
|
|
1853
|
+
* @example
|
|
1854
|
+
* ```tsx
|
|
1855
|
+
* <CategoryBadge color="orange" icon="restaurant">
|
|
1856
|
+
* Food & Dining
|
|
1857
|
+
* </CategoryBadge>
|
|
1858
|
+
*
|
|
1859
|
+
* <CategoryBadge
|
|
1860
|
+
* color="blue"
|
|
1861
|
+
* variant="outlined"
|
|
1862
|
+
* size="small"
|
|
1863
|
+
* onClick={() => filterByCategory('travel')}
|
|
1864
|
+
* >
|
|
1865
|
+
* Travel
|
|
1866
|
+
* </CategoryBadge>
|
|
1867
|
+
* ```
|
|
1868
|
+
*/])), base$c.border.radius.circle, base$c.fontWeight[3], semantic$e.motion.hover, base$c.border.width[1], function (props) {
|
|
1869
|
+
return props.$clickable && !props.$disabled && "\n &:hover {\n opacity: 0.85;\n transform: translateY(-1px);\n }\n \n &:active {\n transform: translateY(0);\n opacity: 0.95;\n }\n ";
|
|
1870
|
+
}, base$c.border.width[2], semantic$e.color.border.strong, base$c.spacing[1]);
|
|
1871
|
+
/**
|
|
1872
|
+
* CategoryBadge component for displaying transaction categories
|
|
1873
|
+
*
|
|
1874
|
+
* Supports 8 color options, 3 visual variants, optional icons, and interactive behavior.
|
|
1875
|
+
* Perfect for categorizing financial transactions or content.
|
|
1876
|
+
*
|
|
1877
|
+
* @example
|
|
1878
|
+
* ```tsx
|
|
1879
|
+
* <CategoryBadge color="orange" icon="restaurant">
|
|
1880
|
+
* Food & Dining
|
|
1881
|
+
* </CategoryBadge>
|
|
1882
|
+
*
|
|
1883
|
+
* <CategoryBadge
|
|
1884
|
+
* color="blue"
|
|
1885
|
+
* variant="outlined"
|
|
1886
|
+
* size="small"
|
|
1887
|
+
* onClick={() => filterByCategory('travel')}
|
|
1888
|
+
* >
|
|
1889
|
+
* Travel
|
|
1890
|
+
* </CategoryBadge>
|
|
1891
|
+
* ```
|
|
1892
|
+
*/
|
|
1893
|
+
var CategoryBadge = function CategoryBadge(_a) {
|
|
1894
|
+
var children = _a.children,
|
|
1895
|
+
_b = _a.color,
|
|
1896
|
+
color = _b === void 0 ? 'blue' : _b,
|
|
1897
|
+
_c = _a.variant,
|
|
1898
|
+
variant = _c === void 0 ? 'filled' : _c,
|
|
1899
|
+
_d = _a.size,
|
|
1900
|
+
size = _d === void 0 ? 'medium' : _d,
|
|
1901
|
+
icon = _a.icon,
|
|
1902
|
+
onClick = _a.onClick,
|
|
1903
|
+
_e = _a.disabled,
|
|
1904
|
+
disabled = _e === void 0 ? false : _e,
|
|
1905
|
+
dataTestId = _a["data-testid"],
|
|
1906
|
+
ariaLabel = _a["aria-label"];
|
|
1907
|
+
var hasClickHandler = Boolean(onClick);
|
|
1908
|
+
var isClickable = hasClickHandler && !disabled;
|
|
1909
|
+
var colorStyles = getColorStyles(color, variant);
|
|
1910
|
+
var sizeStyles = getSizeStyles$1(size);
|
|
1911
|
+
var cssProps = {
|
|
1912
|
+
'--category-badge-bg': colorStyles.backgroundColor,
|
|
1913
|
+
'--category-badge-color': colorStyles.color,
|
|
1914
|
+
'--category-badge-border': colorStyles.borderColor,
|
|
1915
|
+
'--category-badge-height': sizeStyles.height,
|
|
1916
|
+
'--category-badge-padding': sizeStyles.padding,
|
|
1917
|
+
'--category-badge-font': sizeStyles.font,
|
|
1918
|
+
'--category-badge-gap': sizeStyles.gap,
|
|
1919
|
+
'--category-badge-opacity': disabled ? '0.6' : '1',
|
|
1920
|
+
'--category-badge-cursor': disabled ? 'not-allowed' : isClickable ? 'pointer' : 'default'
|
|
1921
|
+
};
|
|
1922
|
+
var handleClick = function handleClick() {
|
|
1923
|
+
if (isClickable) {
|
|
1924
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
1925
|
+
}
|
|
1926
|
+
};
|
|
1927
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
1928
|
+
if (isClickable && (event.key === 'Enter' || event.key === ' ')) {
|
|
1929
|
+
event.preventDefault();
|
|
1930
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
1931
|
+
}
|
|
1932
|
+
};
|
|
1933
|
+
return /*#__PURE__*/React.createElement(StyledCategoryBadge, {
|
|
1934
|
+
$color: color,
|
|
1935
|
+
$variant: variant,
|
|
1936
|
+
$size: size,
|
|
1937
|
+
$clickable: isClickable,
|
|
1938
|
+
$disabled: disabled,
|
|
1939
|
+
onClick: handleClick,
|
|
1940
|
+
onKeyDown: handleKeyDown,
|
|
1941
|
+
tabIndex: hasClickHandler ? 0 : undefined,
|
|
1942
|
+
role: hasClickHandler ? 'button' : undefined,
|
|
1943
|
+
"aria-label": ariaLabel,
|
|
1944
|
+
"aria-disabled": disabled,
|
|
1945
|
+
"data-testid": dataTestId,
|
|
1946
|
+
style: cssProps
|
|
1947
|
+
}, icon && /*#__PURE__*/React.createElement(Icon, {
|
|
1948
|
+
name: icon,
|
|
1949
|
+
size: sizeStyles.iconSize,
|
|
1950
|
+
"aria-hidden": "true"
|
|
1951
|
+
}), children);
|
|
1952
|
+
};
|
|
1953
|
+
CategoryBadge.displayName = 'CategoryBadge';
|
|
1954
|
+
var templateObject_1$C;
|
|
1700
1955
|
|
|
1701
1956
|
var chip = tokensData.component.chip;
|
|
1702
1957
|
// Helper function to get variant styles as objects for CSS custom properties
|
|
@@ -1757,14 +2012,14 @@ var BaseChipStyled = styled.span.withConfig({
|
|
|
1757
2012
|
},
|
|
1758
2013
|
displayName: "ChipBase__BaseChipStyled",
|
|
1759
2014
|
componentId: "sc-moa6zc-0"
|
|
1760
|
-
})(templateObject_1$
|
|
2015
|
+
})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: 12px;\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: width ", ";\n \n /* Use CSS custom properties set by wrapper */\n background-color: var(--chip-bg-color);\n color: var(--chip-text-color);\n font: var(--chip-font);\n padding: var(--chip-padding);\n opacity: var(--chip-opacity, 1);\n cursor: var(--chip-cursor, default);\n \n &:hover {\n opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n }\n \n &:active {\n opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\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: 12px;\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: width ", ";\n \n /* Use CSS custom properties set by wrapper */\n background-color: var(--chip-bg-color);\n color: var(--chip-text-color);\n font: var(--chip-font);\n padding: var(--chip-padding);\n opacity: var(--chip-opacity, 1);\n cursor: var(--chip-cursor, default);\n \n &:hover {\n opacity: var(--chip-hover-opacity, var(--chip-opacity, 1));\n }\n \n &:active {\n opacity: var(--chip-active-opacity, var(--chip-opacity, 1));\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n }\n"
|
|
1761
2016
|
// Icon container for selected indicator or leading icons
|
|
1762
2017
|
])), tokensData.semantic.motion.interactive, chip.variants.interactive.backgroundColor);
|
|
1763
2018
|
// Icon container for selected indicator or leading icons
|
|
1764
2019
|
var IconContainer = styled.span.withConfig({
|
|
1765
2020
|
displayName: "ChipBase__IconContainer",
|
|
1766
2021
|
componentId: "sc-moa6zc-1"
|
|
1767
|
-
})(templateObject_2$
|
|
2022
|
+
})(templateObject_2$p || (templateObject_2$p = __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"
|
|
1768
2023
|
// Close button for dismissible chips
|
|
1769
2024
|
])), tokensData.semantic.spacing.layout.sm);
|
|
1770
2025
|
// Close button for dismissible chips
|
|
@@ -1774,7 +2029,7 @@ var CloseButton = styled.button.withConfig({
|
|
|
1774
2029
|
},
|
|
1775
2030
|
displayName: "ChipBase__CloseButton",
|
|
1776
2031
|
componentId: "sc-moa6zc-2"
|
|
1777
|
-
})(templateObject_3$
|
|
2032
|
+
})(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 0;\n cursor: ", ";\n opacity: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n opacity: 0.7;\n }\n \n &:active:not(:disabled) {\n opacity: 0.9;\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: 2px;\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: 0;\n cursor: ", ";\n opacity: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n opacity: 0.7;\n }\n \n &:active:not(:disabled) {\n opacity: 0.9;\n }\n \n &:focus-visible {\n outline: 2px solid ", ";\n outline-offset: 2px;\n border-radius: 2px;\n }\n"
|
|
1778
2033
|
// Wrapper component that applies styles via CSS custom properties
|
|
1779
2034
|
])), tokensData.semantic.spacing.layout.sm, function (props) {
|
|
1780
2035
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
@@ -1809,7 +2064,7 @@ var StyledChipWrapper = function StyledChipWrapper(_a) {
|
|
|
1809
2064
|
style: __assign(__assign({}, cssProps), style)
|
|
1810
2065
|
}, htmlProps), children);
|
|
1811
2066
|
};
|
|
1812
|
-
var templateObject_1$
|
|
2067
|
+
var templateObject_1$B, templateObject_2$p, templateObject_3$m;
|
|
1813
2068
|
|
|
1814
2069
|
React.createElement;
|
|
1815
2070
|
/**
|
|
@@ -2050,35 +2305,35 @@ var media$1 = {
|
|
|
2050
2305
|
|
|
2051
2306
|
React.createElement;
|
|
2052
2307
|
var spacing$3 = tokensData.semantic.spacing;
|
|
2053
|
-
var StyledContainer = styled.div.withConfig({
|
|
2308
|
+
var StyledContainer$2 = styled.div.withConfig({
|
|
2054
2309
|
displayName: "Container__StyledContainer",
|
|
2055
2310
|
componentId: "sc-17dbj6n-0"
|
|
2056
|
-
})(templateObject_1$
|
|
2311
|
+
})(templateObject_1$A || (templateObject_1$A = __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$3.layout['2xl'], spacing$3.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
|
|
2057
2312
|
var Container = function Container(_a) {
|
|
2058
2313
|
var children = _a.children,
|
|
2059
2314
|
props = __rest(_a, ["children"]);
|
|
2060
|
-
return /*#__PURE__*/React.createElement(StyledContainer, props, children);
|
|
2315
|
+
return /*#__PURE__*/React.createElement(StyledContainer$2, props, children);
|
|
2061
2316
|
};
|
|
2062
|
-
var templateObject_1$
|
|
2317
|
+
var templateObject_1$A;
|
|
2063
2318
|
|
|
2064
2319
|
React.createElement;
|
|
2065
|
-
var base$
|
|
2320
|
+
var base$b = tokensData.base;
|
|
2066
2321
|
var PictureWrapper = styled.div.withConfig({
|
|
2067
2322
|
displayName: "Picture__PictureWrapper",
|
|
2068
2323
|
componentId: "sc-11d9tei-0"
|
|
2069
|
-
})(templateObject_1$
|
|
2324
|
+
})(templateObject_1$z || (templateObject_1$z = __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);
|
|
2070
2325
|
var ImageLink = styled.a.withConfig({
|
|
2071
2326
|
displayName: "Picture__ImageLink",
|
|
2072
2327
|
componentId: "sc-11d9tei-1"
|
|
2073
|
-
})(templateObject_2$
|
|
2328
|
+
})(templateObject_2$o || (templateObject_2$o = __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$b.duration.normal, base$b.easing.easeInOut);
|
|
2074
2329
|
var ImageButton = styled.button.withConfig({
|
|
2075
2330
|
displayName: "Picture__ImageButton",
|
|
2076
2331
|
componentId: "sc-11d9tei-2"
|
|
2077
|
-
})(templateObject_3$
|
|
2332
|
+
})(templateObject_3$l || (templateObject_3$l = __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$b.duration.normal, base$b.easing.easeInOut);
|
|
2078
2333
|
var StyledImage = styled.img.withConfig({
|
|
2079
2334
|
displayName: "Picture__StyledImage",
|
|
2080
2335
|
componentId: "sc-11d9tei-3"
|
|
2081
|
-
})(templateObject_4$
|
|
2336
|
+
})(templateObject_4$h || (templateObject_4$h = __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$b.border.radius[2]);
|
|
2082
2337
|
var Picture = function Picture(_a) {
|
|
2083
2338
|
var title = _a.title,
|
|
2084
2339
|
src = _a.src,
|
|
@@ -2105,7 +2360,7 @@ var Picture = function Picture(_a) {
|
|
|
2105
2360
|
"aria-label": "Read more about ".concat(title)
|
|
2106
2361
|
}, image) : image);
|
|
2107
2362
|
};
|
|
2108
|
-
var templateObject_1$
|
|
2363
|
+
var templateObject_1$z, templateObject_2$o, templateObject_3$l, templateObject_4$h;
|
|
2109
2364
|
|
|
2110
2365
|
React.createElement;
|
|
2111
2366
|
var _a$4 = tokensData.semantic,
|
|
@@ -2114,19 +2369,55 @@ var _a$4 = tokensData.semantic,
|
|
|
2114
2369
|
var TimeStyled = styled.time.withConfig({
|
|
2115
2370
|
displayName: "DateFormatter__TimeStyled",
|
|
2116
2371
|
componentId: "sc-5464cc-0"
|
|
2117
|
-
})(templateObject_1$
|
|
2372
|
+
})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
2373
|
+
/**
|
|
2374
|
+
* Formats a date with smart relative/absolute logic
|
|
2375
|
+
*/])), typography$1.label, color$2.text.subdued);
|
|
2376
|
+
/**
|
|
2377
|
+
* Formats a date with smart relative/absolute logic
|
|
2378
|
+
*/
|
|
2379
|
+
var formatDateSmart = function formatDateSmart(date, customFormat) {
|
|
2380
|
+
// Relative labels for recent dates
|
|
2381
|
+
if (isToday(date)) return 'Today';
|
|
2382
|
+
if (isYesterday(date)) return 'Yesterday';
|
|
2383
|
+
// Show day name for dates within this week
|
|
2384
|
+
if (isThisWeek(date, {
|
|
2385
|
+
weekStartsOn: 1
|
|
2386
|
+
})) {
|
|
2387
|
+
return format(date, 'EEEE'); // "Monday", "Tuesday", etc.
|
|
2388
|
+
}
|
|
2389
|
+
// Fall back to custom format or default full date format
|
|
2390
|
+
return format(date, customFormat || 'MMMM dd, yyyy');
|
|
2391
|
+
};
|
|
2118
2392
|
var DateFormatter = function DateFormatter(_a) {
|
|
2119
2393
|
var dateString = _a.dateString,
|
|
2120
|
-
|
|
2121
|
-
|
|
2394
|
+
formatString = _a.formatString,
|
|
2395
|
+
_b = _a.mode,
|
|
2396
|
+
mode = _b === void 0 ? 'absolute' : _b,
|
|
2122
2397
|
dataTestId = _a["data-testid"];
|
|
2123
2398
|
var date = parseISO(dateString);
|
|
2399
|
+
var displayText;
|
|
2400
|
+
switch (mode) {
|
|
2401
|
+
case 'relative':
|
|
2402
|
+
// Always use relative labels (Today/Yesterday) or fall back to day name
|
|
2403
|
+
displayText = formatDateSmart(date, formatString);
|
|
2404
|
+
break;
|
|
2405
|
+
case 'smart':
|
|
2406
|
+
// Smart mode: relative for recent, absolute for older
|
|
2407
|
+
displayText = formatDateSmart(date, formatString);
|
|
2408
|
+
break;
|
|
2409
|
+
case 'absolute':
|
|
2410
|
+
default:
|
|
2411
|
+
// Always use the format string (default 'yyyy')
|
|
2412
|
+
displayText = format(date, formatString || 'yyyy');
|
|
2413
|
+
break;
|
|
2414
|
+
}
|
|
2124
2415
|
return /*#__PURE__*/React.createElement(TimeStyled, {
|
|
2125
2416
|
dateTime: dateString,
|
|
2126
2417
|
"data-testid": dataTestId
|
|
2127
|
-
},
|
|
2418
|
+
}, displayText);
|
|
2128
2419
|
};
|
|
2129
|
-
var templateObject_1$
|
|
2420
|
+
var templateObject_1$y;
|
|
2130
2421
|
|
|
2131
2422
|
React.createElement;
|
|
2132
2423
|
var motion = tokensData.semantic.motion,
|
|
@@ -2137,7 +2428,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
2137
2428
|
},
|
|
2138
2429
|
displayName: "IconButton__IconButtonStyled",
|
|
2139
2430
|
componentId: "sc-k8b14t-0"
|
|
2140
|
-
})(templateObject_1$
|
|
2431
|
+
})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n background-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 {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-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 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 {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-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) {
|
|
2141
2432
|
var $variant = _a.$variant;
|
|
2142
2433
|
switch ($variant) {
|
|
2143
2434
|
case 'primary':
|
|
@@ -2248,7 +2539,113 @@ var IconButton = function IconButton(_a) {
|
|
|
2248
2539
|
"aria-hidden": "true" // Hide icon from screen readers since button has aria-label
|
|
2249
2540
|
}));
|
|
2250
2541
|
};
|
|
2251
|
-
var templateObject_1$
|
|
2542
|
+
var templateObject_1$x;
|
|
2543
|
+
|
|
2544
|
+
React.createElement;
|
|
2545
|
+
var StyledWrapper = styled.span.withConfig({
|
|
2546
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2547
|
+
return !prop.startsWith('$');
|
|
2548
|
+
},
|
|
2549
|
+
displayName: "MoneyDisplay__StyledWrapper",
|
|
2550
|
+
componentId: "sc-1mddej3-0"
|
|
2551
|
+
})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: inline-block;\n text-align: ", ";\n font-weight: ", ";\n"], ["\n display: inline-block;\n text-align: ", ";\n font-weight: ", ";\n"
|
|
2552
|
+
// Map size to Typography variant
|
|
2553
|
+
])), function (_a) {
|
|
2554
|
+
var $align = _a.$align;
|
|
2555
|
+
return $align;
|
|
2556
|
+
}, function (_a) {
|
|
2557
|
+
var $weight = _a.$weight;
|
|
2558
|
+
return $weight === 'regular' ? 400 : $weight === 'medium' ? 500 : 700;
|
|
2559
|
+
});
|
|
2560
|
+
// Map size to Typography variant
|
|
2561
|
+
var sizeToTypographyVariant = {
|
|
2562
|
+
small: 'caption',
|
|
2563
|
+
medium: 'body',
|
|
2564
|
+
large: 'h3',
|
|
2565
|
+
xlarge: 'h2'
|
|
2566
|
+
};
|
|
2567
|
+
// Map MoneyDisplay variant to Typography color
|
|
2568
|
+
var variantToTypographyColor = {
|
|
2569
|
+
"default": 'default',
|
|
2570
|
+
positive: 'success',
|
|
2571
|
+
// Green color for credits/income
|
|
2572
|
+
negative: 'error',
|
|
2573
|
+
// Red color for debits/expenses
|
|
2574
|
+
neutral: 'subdued' // Gray color for informational
|
|
2575
|
+
};
|
|
2576
|
+
/**
|
|
2577
|
+
* Generates aria-label with spelled out amount
|
|
2578
|
+
*/
|
|
2579
|
+
var generateAriaLabel = function generateAriaLabel(amount, currency, locale) {
|
|
2580
|
+
var _a, _b;
|
|
2581
|
+
var formatter = new Intl.NumberFormat(locale, {
|
|
2582
|
+
style: 'currency',
|
|
2583
|
+
currency: currency,
|
|
2584
|
+
minimumFractionDigits: 2,
|
|
2585
|
+
maximumFractionDigits: 2
|
|
2586
|
+
});
|
|
2587
|
+
// Get parts to spell out the amount
|
|
2588
|
+
var parts = formatter.formatToParts(Math.abs(amount));
|
|
2589
|
+
var integerPart = ((_a = parts.find(function (p) {
|
|
2590
|
+
return p.type === 'integer';
|
|
2591
|
+
})) === null || _a === void 0 ? void 0 : _a.value) || '0';
|
|
2592
|
+
var fractionPart = ((_b = parts.find(function (p) {
|
|
2593
|
+
return p.type === 'fraction';
|
|
2594
|
+
})) === null || _b === void 0 ? void 0 : _b.value) || '00';
|
|
2595
|
+
var sign = amount < 0 ? 'negative ' : '';
|
|
2596
|
+
return "".concat(sign).concat(integerPart, " dollars and ").concat(fractionPart, " cents");
|
|
2597
|
+
};
|
|
2598
|
+
var MoneyDisplay = function MoneyDisplay(_a) {
|
|
2599
|
+
var amount = _a.amount,
|
|
2600
|
+
_b = _a.currency,
|
|
2601
|
+
currency = _b === void 0 ? 'AUD' : _b,
|
|
2602
|
+
_c = _a.variant,
|
|
2603
|
+
variant = _c === void 0 ? 'default' : _c,
|
|
2604
|
+
_d = _a.showSign,
|
|
2605
|
+
showSign = _d === void 0 ? false : _d,
|
|
2606
|
+
_e = _a.size,
|
|
2607
|
+
size = _e === void 0 ? 'medium' : _e,
|
|
2608
|
+
_f = _a.weight,
|
|
2609
|
+
weight = _f === void 0 ? 'regular' : _f,
|
|
2610
|
+
_g = _a.locale,
|
|
2611
|
+
locale = _g === void 0 ? 'en-AU' : _g,
|
|
2612
|
+
_h = _a.align,
|
|
2613
|
+
align = _h === void 0 ? 'left' : _h,
|
|
2614
|
+
dataTestId = _a["data-testid"];
|
|
2615
|
+
// Format the number with Intl.NumberFormat
|
|
2616
|
+
var formatter = new Intl.NumberFormat(locale, {
|
|
2617
|
+
style: 'currency',
|
|
2618
|
+
currency: currency,
|
|
2619
|
+
minimumFractionDigits: 2,
|
|
2620
|
+
maximumFractionDigits: 2
|
|
2621
|
+
});
|
|
2622
|
+
var formattedAmount = formatter.format(Math.abs(amount));
|
|
2623
|
+
// Add sign if needed
|
|
2624
|
+
var displayText = formattedAmount;
|
|
2625
|
+
if (showSign && amount !== 0) {
|
|
2626
|
+
var signSymbol = amount > 0 ? '+' : '−'; // Using minus sign character, not hyphen
|
|
2627
|
+
displayText = signSymbol + formattedAmount;
|
|
2628
|
+
} else if (amount < 0 && !showSign) {
|
|
2629
|
+
// Still show negative sign even without showSign
|
|
2630
|
+
displayText = '−' + formattedAmount;
|
|
2631
|
+
}
|
|
2632
|
+
// Generate accessibility label
|
|
2633
|
+
var ariaLabel = generateAriaLabel(amount, currency, locale);
|
|
2634
|
+
// Get typography variant and color
|
|
2635
|
+
var typographyVariant = sizeToTypographyVariant[size];
|
|
2636
|
+
var typographyColor = variantToTypographyColor[variant];
|
|
2637
|
+
return /*#__PURE__*/React.createElement(StyledWrapper, {
|
|
2638
|
+
$align: align,
|
|
2639
|
+
$weight: weight,
|
|
2640
|
+
"aria-label": ariaLabel,
|
|
2641
|
+
"data-testid": dataTestId
|
|
2642
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
2643
|
+
variant: typographyVariant,
|
|
2644
|
+
color: typographyColor,
|
|
2645
|
+
as: "span"
|
|
2646
|
+
}, displayText));
|
|
2647
|
+
};
|
|
2648
|
+
var templateObject_1$w;
|
|
2252
2649
|
|
|
2253
2650
|
React.createElement;
|
|
2254
2651
|
var ProgressBarContainer = styled.div.withConfig({
|
|
@@ -2257,10 +2654,10 @@ var ProgressBarContainer = styled.div.withConfig({
|
|
|
2257
2654
|
},
|
|
2258
2655
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
2259
2656
|
componentId: "sc-1nco33q-0"
|
|
2260
|
-
})(templateObject_3$
|
|
2261
|
-
return props.$variant === 'horizontal' && css(templateObject_1$
|
|
2657
|
+
})(templateObject_3$k || (templateObject_3$k = __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"])), tokensData.semantic.color.background.disabled, tokensData.base.border.radius[1], function (props) {
|
|
2658
|
+
return props.$variant === 'horizontal' && css(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? tokensData.component.progressBar.sizes[props.$height].height : tokensData.component.progressBar.sizes.md.height);
|
|
2262
2659
|
}, function (props) {
|
|
2263
|
-
return props.$variant === 'vertical' && css(templateObject_2$
|
|
2660
|
+
return props.$variant === 'vertical' && css(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? tokensData.component.progressBar.sizes[props.$width].height : tokensData.component.progressBar.sizes.md.height);
|
|
2264
2661
|
});
|
|
2265
2662
|
var ProgressBarFill = styled.div.withConfig({
|
|
2266
2663
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -2268,7 +2665,7 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2268
2665
|
},
|
|
2269
2666
|
displayName: "ProgressBar__ProgressBarFill",
|
|
2270
2667
|
componentId: "sc-1nco33q-1"
|
|
2271
|
-
})(templateObject_7$
|
|
2668
|
+
})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), tokensData.semantic.motion.transition.normal, function (props) {
|
|
2272
2669
|
var backgroundColor;
|
|
2273
2670
|
switch (props.$color) {
|
|
2274
2671
|
case 'success':
|
|
@@ -2282,11 +2679,11 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
2282
2679
|
backgroundColor = tokensData.semantic.color.background.interactive;
|
|
2283
2680
|
break;
|
|
2284
2681
|
}
|
|
2285
|
-
return css(templateObject_4$
|
|
2682
|
+
return css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
2286
2683
|
}, function (props) {
|
|
2287
|
-
return props.$variant === 'horizontal' && css(templateObject_5$
|
|
2684
|
+
return props.$variant === 'horizontal' && css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2288
2685
|
}, function (props) {
|
|
2289
|
-
return props.$variant === 'vertical' && css(templateObject_6$
|
|
2686
|
+
return props.$variant === 'vertical' && css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n width: 100%;\n height: ", "%;\n "], ["\n width: 100%;\n height: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
2290
2687
|
});
|
|
2291
2688
|
var ProgressBar = function ProgressBar(_a) {
|
|
2292
2689
|
var value = _a.value,
|
|
@@ -2312,16 +2709,16 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
2312
2709
|
$color: color
|
|
2313
2710
|
}));
|
|
2314
2711
|
};
|
|
2315
|
-
var templateObject_1$
|
|
2712
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$k, templateObject_4$g, templateObject_5$d, templateObject_6$c, templateObject_7$a;
|
|
2316
2713
|
|
|
2317
2714
|
React.createElement;
|
|
2318
|
-
var StyledDivider = styled.div.withConfig({
|
|
2715
|
+
var StyledDivider$1 = styled.div.withConfig({
|
|
2319
2716
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2320
2717
|
return !prop.startsWith('$');
|
|
2321
2718
|
},
|
|
2322
2719
|
displayName: "Divider__StyledDivider",
|
|
2323
2720
|
componentId: "sc-1l0c8ja-0"
|
|
2324
|
-
})(templateObject_1$
|
|
2721
|
+
})(templateObject_1$u || (templateObject_1$u = __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"
|
|
2325
2722
|
/**
|
|
2326
2723
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
2327
2724
|
*
|
|
@@ -2425,7 +2822,7 @@ var Divider = function Divider(_a) {
|
|
|
2425
2822
|
_d = _a.orientation,
|
|
2426
2823
|
orientation = _d === void 0 ? 'horizontal' : _d,
|
|
2427
2824
|
dataTestId = _a["data-testid"];
|
|
2428
|
-
return /*#__PURE__*/React.createElement(StyledDivider, {
|
|
2825
|
+
return /*#__PURE__*/React.createElement(StyledDivider$1, {
|
|
2429
2826
|
$variant: variant,
|
|
2430
2827
|
$size: size,
|
|
2431
2828
|
$orientation: orientation,
|
|
@@ -2434,7 +2831,7 @@ var Divider = function Divider(_a) {
|
|
|
2434
2831
|
"aria-orientation": orientation
|
|
2435
2832
|
});
|
|
2436
2833
|
};
|
|
2437
|
-
var templateObject_1$
|
|
2834
|
+
var templateObject_1$u;
|
|
2438
2835
|
|
|
2439
2836
|
React.createElement;
|
|
2440
2837
|
var StyledStack = styled.div.withConfig({
|
|
@@ -2443,7 +2840,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
2443
2840
|
},
|
|
2444
2841
|
displayName: "Stack__StyledStack",
|
|
2445
2842
|
componentId: "sc-1ehkxgy-0"
|
|
2446
|
-
})(templateObject_1$
|
|
2843
|
+
})(templateObject_1$t || (templateObject_1$t = __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"
|
|
2447
2844
|
// Helper function to convert gap prop to CSS value
|
|
2448
2845
|
])));
|
|
2449
2846
|
// Helper function to convert gap prop to CSS value
|
|
@@ -2481,17 +2878,180 @@ var Stack = function Stack(_a) {
|
|
|
2481
2878
|
"data-testid": dataTestId
|
|
2482
2879
|
}, children);
|
|
2483
2880
|
};
|
|
2484
|
-
var templateObject_1$
|
|
2881
|
+
var templateObject_1$t;
|
|
2485
2882
|
|
|
2486
2883
|
React.createElement;
|
|
2487
|
-
var semantic$
|
|
2884
|
+
var semantic$d = tokensData.semantic,
|
|
2885
|
+
base$a = tokensData.base;
|
|
2886
|
+
var scaleIn = keyframes(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
2887
|
+
var getStatusConfig = function getStatusConfig(status) {
|
|
2888
|
+
var configs = {
|
|
2889
|
+
pending: {
|
|
2890
|
+
color: semantic$d.color.status.pending,
|
|
2891
|
+
bgColor: semantic$d.color.status['pending-bg'],
|
|
2892
|
+
icon: 'refresh',
|
|
2893
|
+
// Fallback until 'clock' icon is added
|
|
2894
|
+
label: 'Pending'
|
|
2895
|
+
},
|
|
2896
|
+
completed: {
|
|
2897
|
+
color: semantic$d.color.status.completed,
|
|
2898
|
+
bgColor: semantic$d.color.status['completed-bg'],
|
|
2899
|
+
icon: 'check',
|
|
2900
|
+
label: 'Completed'
|
|
2901
|
+
},
|
|
2902
|
+
failed: {
|
|
2903
|
+
color: semantic$d.color.status.failed,
|
|
2904
|
+
bgColor: semantic$d.color.status['failed-bg'],
|
|
2905
|
+
icon: 'close',
|
|
2906
|
+
label: 'Failed'
|
|
2907
|
+
},
|
|
2908
|
+
cancelled: {
|
|
2909
|
+
color: semantic$d.color.status.cancelled,
|
|
2910
|
+
bgColor: semantic$d.color.status['cancelled-bg'],
|
|
2911
|
+
icon: 'cancel',
|
|
2912
|
+
label: 'Cancelled'
|
|
2913
|
+
},
|
|
2914
|
+
processing: {
|
|
2915
|
+
color: semantic$d.color.status.processing,
|
|
2916
|
+
bgColor: semantic$d.color.status['processing-bg'],
|
|
2917
|
+
icon: 'refresh',
|
|
2918
|
+
label: 'Processing'
|
|
2919
|
+
},
|
|
2920
|
+
scheduled: {
|
|
2921
|
+
color: semantic$d.color.status.scheduled,
|
|
2922
|
+
bgColor: semantic$d.color.status['scheduled-bg'],
|
|
2923
|
+
icon: 'bell',
|
|
2924
|
+
// Fallback until 'calendar' icon is added
|
|
2925
|
+
label: 'Scheduled'
|
|
2926
|
+
}
|
|
2927
|
+
};
|
|
2928
|
+
return configs[status];
|
|
2929
|
+
};
|
|
2930
|
+
var getSizeStyles = function getSizeStyles(size) {
|
|
2931
|
+
if (size === 'small') {
|
|
2932
|
+
return {
|
|
2933
|
+
height: '20px',
|
|
2934
|
+
padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[2]),
|
|
2935
|
+
font: semantic$d.typography.caption,
|
|
2936
|
+
gap: base$a.spacing[1],
|
|
2937
|
+
iconSize: 'xs'
|
|
2938
|
+
};
|
|
2939
|
+
}
|
|
2940
|
+
// medium
|
|
2941
|
+
return {
|
|
2942
|
+
height: '24px',
|
|
2943
|
+
padding: "".concat(base$a.spacing[1], " ").concat(base$a.spacing[3]),
|
|
2944
|
+
font: semantic$d.typography.small,
|
|
2945
|
+
gap: base$a.spacing[1],
|
|
2946
|
+
iconSize: 'sm'
|
|
2947
|
+
};
|
|
2948
|
+
};
|
|
2949
|
+
var StyledStatusBadge = styled.span.withConfig({
|
|
2950
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2951
|
+
return !prop.startsWith('$');
|
|
2952
|
+
},
|
|
2953
|
+
displayName: "StatusBadge__StyledStatusBadge",
|
|
2954
|
+
componentId: "sc-1paksgb-0"
|
|
2955
|
+
})(templateObject_2$m || (templateObject_2$m = __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 animation: ", " 0.2s ease-out;\n \n /* Apply CSS custom properties */\n background-color: var(--status-badge-bg);\n color: var(--status-badge-color);\n height: var(--status-badge-height);\n padding: var(--status-badge-padding);\n font: var(--status-badge-font);\n gap: var(--status-badge-gap);\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 animation: ", " 0.2s ease-out;\n \n /* Apply CSS custom properties */\n background-color: var(--status-badge-bg);\n color: var(--status-badge-color);\n height: var(--status-badge-height);\n padding: var(--status-badge-padding);\n font: var(--status-badge-font);\n gap: var(--status-badge-gap);\n"])), base$a.border.radius.circle, base$a.fontWeight[3], scaleIn);
|
|
2956
|
+
var ScreenReaderOnly = styled.span.withConfig({
|
|
2957
|
+
displayName: "StatusBadge__ScreenReaderOnly",
|
|
2958
|
+
componentId: "sc-1paksgb-1"
|
|
2959
|
+
})(templateObject_3$j || (templateObject_3$j = __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"
|
|
2960
|
+
/**
|
|
2961
|
+
* StatusBadge component for displaying transaction or task status
|
|
2962
|
+
*
|
|
2963
|
+
* Displays status with appropriate color, icon, and supports live updates for screen readers.
|
|
2964
|
+
* Maps to 6 common status types with semantic color tokens.
|
|
2965
|
+
*
|
|
2966
|
+
* @example
|
|
2967
|
+
* ```tsx
|
|
2968
|
+
* <StatusBadge status="completed" />
|
|
2969
|
+
*
|
|
2970
|
+
* <StatusBadge
|
|
2971
|
+
* status="pending"
|
|
2972
|
+
* label="Awaiting approval"
|
|
2973
|
+
* size="small"
|
|
2974
|
+
* />
|
|
2975
|
+
*
|
|
2976
|
+
* <StatusBadge
|
|
2977
|
+
* status="failed"
|
|
2978
|
+
* showIcon={false}
|
|
2979
|
+
* liveRegion={true}
|
|
2980
|
+
* />
|
|
2981
|
+
* ```
|
|
2982
|
+
*/])));
|
|
2983
|
+
/**
|
|
2984
|
+
* StatusBadge component for displaying transaction or task status
|
|
2985
|
+
*
|
|
2986
|
+
* Displays status with appropriate color, icon, and supports live updates for screen readers.
|
|
2987
|
+
* Maps to 6 common status types with semantic color tokens.
|
|
2988
|
+
*
|
|
2989
|
+
* @example
|
|
2990
|
+
* ```tsx
|
|
2991
|
+
* <StatusBadge status="completed" />
|
|
2992
|
+
*
|
|
2993
|
+
* <StatusBadge
|
|
2994
|
+
* status="pending"
|
|
2995
|
+
* label="Awaiting approval"
|
|
2996
|
+
* size="small"
|
|
2997
|
+
* />
|
|
2998
|
+
*
|
|
2999
|
+
* <StatusBadge
|
|
3000
|
+
* status="failed"
|
|
3001
|
+
* showIcon={false}
|
|
3002
|
+
* liveRegion={true}
|
|
3003
|
+
* />
|
|
3004
|
+
* ```
|
|
3005
|
+
*/
|
|
3006
|
+
var StatusBadge = function StatusBadge(_a) {
|
|
3007
|
+
var status = _a.status,
|
|
3008
|
+
label = _a.label,
|
|
3009
|
+
_b = _a.size,
|
|
3010
|
+
size = _b === void 0 ? 'medium' : _b,
|
|
3011
|
+
_c = _a.showIcon,
|
|
3012
|
+
showIcon = _c === void 0 ? true : _c,
|
|
3013
|
+
_d = _a.liveRegion,
|
|
3014
|
+
liveRegion = _d === void 0 ? true : _d,
|
|
3015
|
+
dataTestId = _a["data-testid"],
|
|
3016
|
+
ariaLabel = _a["aria-label"];
|
|
3017
|
+
var statusConfig = getStatusConfig(status);
|
|
3018
|
+
var sizeStyles = getSizeStyles(size);
|
|
3019
|
+
var displayLabel = label || statusConfig.label;
|
|
3020
|
+
var cssProps = {
|
|
3021
|
+
'--status-badge-bg': statusConfig.bgColor,
|
|
3022
|
+
'--status-badge-color': statusConfig.color,
|
|
3023
|
+
'--status-badge-height': sizeStyles.height,
|
|
3024
|
+
'--status-badge-padding': sizeStyles.padding,
|
|
3025
|
+
'--status-badge-font': sizeStyles.font,
|
|
3026
|
+
'--status-badge-gap': sizeStyles.gap
|
|
3027
|
+
};
|
|
3028
|
+
return /*#__PURE__*/React.createElement(StyledStatusBadge, {
|
|
3029
|
+
$status: status,
|
|
3030
|
+
$size: size,
|
|
3031
|
+
role: "status",
|
|
3032
|
+
"aria-label": ariaLabel || "Status: ".concat(displayLabel),
|
|
3033
|
+
"aria-live": liveRegion ? 'polite' : undefined,
|
|
3034
|
+
"aria-atomic": liveRegion ? 'true' : undefined,
|
|
3035
|
+
"data-testid": dataTestId,
|
|
3036
|
+
style: cssProps
|
|
3037
|
+
}, showIcon && /*#__PURE__*/React.createElement(Icon, {
|
|
3038
|
+
name: statusConfig.icon,
|
|
3039
|
+
size: sizeStyles.iconSize,
|
|
3040
|
+
"aria-hidden": "true"
|
|
3041
|
+
}), displayLabel, /*#__PURE__*/React.createElement(ScreenReaderOnly, null, status, " status"));
|
|
3042
|
+
};
|
|
3043
|
+
StatusBadge.displayName = 'StatusBadge';
|
|
3044
|
+
var templateObject_1$s, templateObject_2$m, templateObject_3$j;
|
|
3045
|
+
|
|
3046
|
+
React.createElement;
|
|
3047
|
+
var semantic$c = tokensData.semantic;
|
|
2488
3048
|
var StyledTag = styled.span.withConfig({
|
|
2489
3049
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2490
3050
|
return !prop.startsWith('$');
|
|
2491
3051
|
},
|
|
2492
3052
|
displayName: "Tag__StyledTag",
|
|
2493
3053
|
componentId: "sc-lzfmti-0"
|
|
2494
|
-
})(templateObject_1$
|
|
3054
|
+
})(templateObject_1$r || (templateObject_1$r = __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"
|
|
2495
3055
|
/**
|
|
2496
3056
|
* Tag component for categorizing and labeling content
|
|
2497
3057
|
*
|
|
@@ -2501,33 +3061,33 @@ var StyledTag = styled.span.withConfig({
|
|
|
2501
3061
|
var $variant = _a.$variant;
|
|
2502
3062
|
switch ($variant) {
|
|
2503
3063
|
case 'interactive':
|
|
2504
|
-
return semantic$
|
|
3064
|
+
return semantic$c.color.background['interactive-subtle'];
|
|
2505
3065
|
case 'success':
|
|
2506
|
-
return semantic$
|
|
3066
|
+
return semantic$c.color.background['success-subtle'];
|
|
2507
3067
|
case 'warning':
|
|
2508
|
-
return semantic$
|
|
3068
|
+
return semantic$c.color.background['warning-subtle'];
|
|
2509
3069
|
case 'error':
|
|
2510
|
-
return semantic$
|
|
3070
|
+
return semantic$c.color.background['error-subtle'];
|
|
2511
3071
|
case 'emphasis':
|
|
2512
|
-
return semantic$
|
|
3072
|
+
return semantic$c.color.background.emphasis;
|
|
2513
3073
|
default:
|
|
2514
|
-
return semantic$
|
|
3074
|
+
return semantic$c.color.background.surface;
|
|
2515
3075
|
}
|
|
2516
3076
|
}, function (_a) {
|
|
2517
3077
|
var $variant = _a.$variant;
|
|
2518
3078
|
switch ($variant) {
|
|
2519
3079
|
case 'interactive':
|
|
2520
|
-
return semantic$
|
|
3080
|
+
return semantic$c.color.text.interactive;
|
|
2521
3081
|
case 'success':
|
|
2522
|
-
return semantic$
|
|
3082
|
+
return semantic$c.color.text.success;
|
|
2523
3083
|
case 'warning':
|
|
2524
|
-
return semantic$
|
|
3084
|
+
return semantic$c.color.text.warning;
|
|
2525
3085
|
case 'error':
|
|
2526
|
-
return semantic$
|
|
3086
|
+
return semantic$c.color.text.error;
|
|
2527
3087
|
case 'emphasis':
|
|
2528
|
-
return semantic$
|
|
3088
|
+
return semantic$c.color.text.inverse;
|
|
2529
3089
|
default:
|
|
2530
|
-
return semantic$
|
|
3090
|
+
return semantic$c.color.text["default"];
|
|
2531
3091
|
}
|
|
2532
3092
|
}, function (_a) {
|
|
2533
3093
|
var $variant = _a.$variant,
|
|
@@ -2535,17 +3095,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
2535
3095
|
if (!$border) return 'none';
|
|
2536
3096
|
switch ($variant) {
|
|
2537
3097
|
case 'interactive':
|
|
2538
|
-
return "1px solid ".concat(semantic$
|
|
3098
|
+
return "1px solid ".concat(semantic$c.color.border.interactive);
|
|
2539
3099
|
case 'success':
|
|
2540
|
-
return "1px solid ".concat(semantic$
|
|
3100
|
+
return "1px solid ".concat(semantic$c.color.border.success);
|
|
2541
3101
|
case 'warning':
|
|
2542
|
-
return "1px solid ".concat(semantic$
|
|
3102
|
+
return "1px solid ".concat(semantic$c.color.border.warning);
|
|
2543
3103
|
case 'error':
|
|
2544
|
-
return "1px solid ".concat(semantic$
|
|
3104
|
+
return "1px solid ".concat(semantic$c.color.border.error);
|
|
2545
3105
|
case 'emphasis':
|
|
2546
|
-
return "1px solid ".concat(semantic$
|
|
3106
|
+
return "1px solid ".concat(semantic$c.color.background.emphasis);
|
|
2547
3107
|
default:
|
|
2548
|
-
return "1px solid ".concat(semantic$
|
|
3108
|
+
return "1px solid ".concat(semantic$c.color.border["default"]);
|
|
2549
3109
|
}
|
|
2550
3110
|
});
|
|
2551
3111
|
/**
|
|
@@ -2572,113 +3132,513 @@ var Tag = function Tag(_a) {
|
|
|
2572
3132
|
"aria-label": typeof children === 'string' ? "Tag: ".concat(children) : undefined
|
|
2573
3133
|
}, props), children);
|
|
2574
3134
|
};
|
|
2575
|
-
var templateObject_1$
|
|
3135
|
+
var templateObject_1$r;
|
|
2576
3136
|
|
|
2577
3137
|
React.createElement;
|
|
2578
|
-
var
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
3138
|
+
var StyledCard = styled.div.withConfig({
|
|
3139
|
+
displayName: "AccountCard__StyledCard",
|
|
3140
|
+
componentId: "sc-1erp7zn-0"
|
|
3141
|
+
})(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n min-width: 300px;\n min-height: 200px;\n padding: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: all 0.2s ease;\n \n ", "\n"], ["\n min-width: 300px;\n min-height: 200px;\n padding: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: all 0.2s ease;\n \n ", "\n"])), tokensData.semantic.spacing.layout.lg, tokensData.semantic.color.background.surface, tokensData.semantic.color.border["default"], tokensData.base.border.radius[5], tokensData.base.shadow[3], function (_a) {
|
|
3142
|
+
var $clickable = _a.$clickable;
|
|
3143
|
+
return $clickable && "\n cursor: pointer;\n \n &:hover {\n box-shadow: ".concat(tokensData.base.shadow[4], ";\n transform: translateY(-2px);\n }\n \n &:active {\n transform: translateY(0);\n }\n \n &:focus-visible {\n outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n outline-offset: 2px;\n }\n ");
|
|
3144
|
+
});
|
|
3145
|
+
var StyledHeader$2 = styled.div.withConfig({
|
|
3146
|
+
displayName: "AccountCard__StyledHeader",
|
|
3147
|
+
componentId: "sc-1erp7zn-1"
|
|
3148
|
+
})(templateObject_2$l || (templateObject_2$l = __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"])), tokensData.semantic.spacing.layout.md);
|
|
3149
|
+
var StyledIconWrapper = styled.div.withConfig({
|
|
3150
|
+
displayName: "AccountCard__StyledIconWrapper",
|
|
3151
|
+
componentId: "sc-1erp7zn-2"
|
|
3152
|
+
})(templateObject_3$i || (templateObject_3$i = __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"])), tokensData.semantic.color.background.interactive, tokensData.base.border.radius[3], tokensData.semantic.color.icon.interactive);
|
|
3153
|
+
var StyledBalanceSection = styled.div.withConfig({
|
|
3154
|
+
displayName: "AccountCard__StyledBalanceSection",
|
|
3155
|
+
componentId: "sc-1erp7zn-3"
|
|
3156
|
+
})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), tokensData.semantic.spacing.layout.lg);
|
|
3157
|
+
var StyledTrendSection = styled.div.withConfig({
|
|
3158
|
+
displayName: "AccountCard__StyledTrendSection",
|
|
3159
|
+
componentId: "sc-1erp7zn-4"
|
|
3160
|
+
})(templateObject_5$c || (templateObject_5$c = __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"])), tokensData.semantic.spacing.layout.xs, tokensData.semantic.spacing.layout.sm);
|
|
3161
|
+
var StyledActions$1 = styled.div.withConfig({
|
|
3162
|
+
displayName: "AccountCard__StyledActions",
|
|
3163
|
+
componentId: "sc-1erp7zn-5"
|
|
3164
|
+
})(templateObject_6$b || (templateObject_6$b = __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"])), tokensData.semantic.spacing.layout.sm);
|
|
3165
|
+
var StyledStackWrapper = styled.div.withConfig({
|
|
3166
|
+
displayName: "AccountCard__StyledStackWrapper",
|
|
3167
|
+
componentId: "sc-1erp7zn-6"
|
|
3168
|
+
})(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n height: 100%;\n min-height: 168px;\n"], ["\n height: 100%;\n min-height: 168px;\n"
|
|
3169
|
+
// Map account types to icon names (using placeholders)
|
|
3170
|
+
])));
|
|
3171
|
+
// Map account types to icon names (using placeholders)
|
|
3172
|
+
var accountTypeToIcon = {
|
|
3173
|
+
checking: 'paper',
|
|
3174
|
+
// Will use bank icon
|
|
3175
|
+
savings: 'star',
|
|
3176
|
+
// Will use piggyBank icon
|
|
3177
|
+
credit: 'paper',
|
|
3178
|
+
// Will use creditCard icon
|
|
3179
|
+
investment: 'star',
|
|
3180
|
+
// Will use chartLine icon
|
|
3181
|
+
loan: 'paper' // Will use document icon
|
|
2593
3182
|
};
|
|
2594
|
-
//
|
|
2595
|
-
var
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
success: 'success'
|
|
3183
|
+
// Map trend direction to icon and color
|
|
3184
|
+
var trendToIcon = {
|
|
3185
|
+
up: 'arrowUp',
|
|
3186
|
+
down: 'arrowDown',
|
|
3187
|
+
neutral: 'arrowRight'
|
|
2600
3188
|
};
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
var
|
|
2612
|
-
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
var $variant = _a.$variant;
|
|
2618
|
-
switch ($variant) {
|
|
2619
|
-
case 'error':
|
|
2620
|
-
return "\n background-color: ".concat(semantic$7.color.background['error-subtle'], ";\n border-color: ").concat(semantic$7.color.border.error, ";\n color: ").concat(semantic$7.color.text.error, ";\n ");
|
|
2621
|
-
case 'warning':
|
|
2622
|
-
return "\n background-color: ".concat(semantic$7.color.background['warning-subtle'], ";\n border-color: ").concat(semantic$7.color.border.warning, ";\n color: ").concat(semantic$7.color.text.warning, ";\n ");
|
|
2623
|
-
case 'success':
|
|
2624
|
-
return "\n background-color: ".concat(semantic$7.color.background['success-subtle'], ";\n border-color: ").concat(semantic$7.color.border.success, ";\n color: ").concat(semantic$7.color.text.success, ";\n ");
|
|
2625
|
-
case 'info':
|
|
2626
|
-
default:
|
|
2627
|
-
return "\n background-color: ".concat(semantic$7.color.background['interactive-subtle'], ";\n border-color: ").concat(semantic$7.color.border.interactive, ";\n color: ").concat(semantic$7.color.text.interactive, ";\n ");
|
|
2628
|
-
}
|
|
2629
|
-
}, base$6.breakpoint.md, function (_a) {
|
|
2630
|
-
var $inline = _a.$inline;
|
|
2631
|
-
return $inline ? semantic$7.spacing.layout.sm : semantic$7.spacing.layout.lg;
|
|
2632
|
-
});
|
|
2633
|
-
var StyledIconContainer$1 = styled.div.withConfig({
|
|
2634
|
-
displayName: "Alert__StyledIconContainer",
|
|
2635
|
-
componentId: "sc-18tq5d-1"
|
|
2636
|
-
})(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
2637
|
-
var StyledContent = styled.div.withConfig({
|
|
2638
|
-
displayName: "Alert__StyledContent",
|
|
2639
|
-
componentId: "sc-18tq5d-2"
|
|
2640
|
-
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text wrapping */\n"])), semantic$7.spacing.layout.xs);
|
|
2641
|
-
var StyledTitle = styled.span.withConfig({
|
|
2642
|
-
displayName: "Alert__StyledTitle",
|
|
2643
|
-
componentId: "sc-18tq5d-3"
|
|
2644
|
-
})(templateObject_4$a || (templateObject_4$a = __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$7.typography.h6);
|
|
2645
|
-
var StyledMessage = styled.span.withConfig({
|
|
2646
|
-
displayName: "Alert__StyledMessage",
|
|
2647
|
-
componentId: "sc-18tq5d-4"
|
|
2648
|
-
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font: ", ";\n\tline-height: 1.25;\n"], ["\n font: ", ";\n\tline-height: 1.25;\n"])), semantic$7.typography.body);
|
|
2649
|
-
var StyledActions = styled.div.withConfig({
|
|
2650
|
-
displayName: "Alert__StyledActions",
|
|
2651
|
-
componentId: "sc-18tq5d-5"
|
|
2652
|
-
})(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$7.spacing.layout.sm);
|
|
2653
|
-
var StyledDismissButton = styled(IconButton).withConfig({
|
|
2654
|
-
displayName: "Alert__StyledDismissButton",
|
|
2655
|
-
componentId: "sc-18tq5d-6"
|
|
2656
|
-
})(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$7.spacing.layout.xs);
|
|
2657
|
-
var Alert = function Alert(_a) {
|
|
2658
|
-
var _b = _a.variant,
|
|
2659
|
-
variant = _b === void 0 ? 'info' : _b,
|
|
2660
|
-
children = _a.children,
|
|
2661
|
-
title = _a.title,
|
|
2662
|
-
_c = _a.dismissible,
|
|
2663
|
-
dismissible = _c === void 0 ? false : _c,
|
|
2664
|
-
onDismiss = _a.onDismiss,
|
|
3189
|
+
/**
|
|
3190
|
+
* AccountCard component
|
|
3191
|
+
*
|
|
3192
|
+
* Displays account information in a card format with account type icon,
|
|
3193
|
+
* name, balance, optional trend indicator, and action buttons. Minimum
|
|
3194
|
+
* 300x200px with elevation and hover effects.
|
|
3195
|
+
*
|
|
3196
|
+
* Composes: Stack, Box, Icon, Typography, MoneyDisplay, Button
|
|
3197
|
+
*/
|
|
3198
|
+
var AccountCard = function AccountCard(_a) {
|
|
3199
|
+
var accountType = _a.accountType,
|
|
3200
|
+
accountName = _a.accountName,
|
|
3201
|
+
balance = _a.balance,
|
|
3202
|
+
accountNumber = _a.accountNumber,
|
|
3203
|
+
trend = _a.trend,
|
|
3204
|
+
trendValue = _a.trendValue,
|
|
2665
3205
|
action = _a.action,
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
dataTestId = _a["data-testid"]
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
var
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
}
|
|
3206
|
+
secondaryAction = _a.secondaryAction,
|
|
3207
|
+
_b = _a.currency,
|
|
3208
|
+
currency = _b === void 0 ? 'AUD' : _b,
|
|
3209
|
+
onClick = _a.onClick,
|
|
3210
|
+
dataTestId = _a["data-testid"];
|
|
3211
|
+
var isClickable = !!onClick;
|
|
3212
|
+
// Get account type icon
|
|
3213
|
+
var accountIcon = accountTypeToIcon[accountType];
|
|
3214
|
+
// Get trend icon and color
|
|
3215
|
+
var trendIcon = trend ? trendToIcon[trend] : undefined;
|
|
3216
|
+
var trendColor = trend === 'up' ? 'success' : trend === 'down' ? 'error' : 'subdued';
|
|
3217
|
+
var handleClick = function handleClick() {
|
|
3218
|
+
if (isClickable && onClick) {
|
|
3219
|
+
onClick();
|
|
3220
|
+
}
|
|
3221
|
+
};
|
|
3222
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
3223
|
+
if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
|
|
3224
|
+
e.preventDefault();
|
|
3225
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
3226
|
+
}
|
|
3227
|
+
};
|
|
3228
|
+
return /*#__PURE__*/React.createElement(StyledCard, {
|
|
3229
|
+
$clickable: isClickable,
|
|
3230
|
+
onClick: handleClick,
|
|
3231
|
+
onKeyDown: handleKeyDown,
|
|
3232
|
+
tabIndex: isClickable ? 0 : undefined,
|
|
3233
|
+
role: isClickable ? 'button' : 'article',
|
|
3234
|
+
"aria-label": isClickable ? "".concat(accountName, " account, balance ").concat(balance) : undefined,
|
|
3235
|
+
"data-testid": dataTestId
|
|
3236
|
+
}, /*#__PURE__*/React.createElement(StyledStackWrapper, null, /*#__PURE__*/React.createElement(Stack, {
|
|
3237
|
+
direction: "column",
|
|
3238
|
+
gap: "none"
|
|
3239
|
+
}, /*#__PURE__*/React.createElement(StyledHeader$2, null, /*#__PURE__*/React.createElement(Stack, {
|
|
3240
|
+
direction: "row",
|
|
3241
|
+
gap: "md",
|
|
3242
|
+
alignItems: "center"
|
|
3243
|
+
}, /*#__PURE__*/React.createElement(StyledIconWrapper, {
|
|
3244
|
+
"aria-label": "".concat(accountType, " account"),
|
|
3245
|
+
role: "img"
|
|
3246
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
3247
|
+
name: accountIcon,
|
|
3248
|
+
size: "md"
|
|
3249
|
+
})), /*#__PURE__*/React.createElement(Stack, {
|
|
3250
|
+
direction: "column",
|
|
3251
|
+
gap: "xs"
|
|
3252
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3253
|
+
variant: "h4"
|
|
3254
|
+
}, accountName), accountNumber && /*#__PURE__*/React.createElement(Typography, {
|
|
3255
|
+
variant: "caption",
|
|
3256
|
+
color: "subdued"
|
|
3257
|
+
}, "\u2022\u2022\u2022\u2022 ", accountNumber)))), /*#__PURE__*/React.createElement(StyledBalanceSection, null, /*#__PURE__*/React.createElement(Stack, {
|
|
3258
|
+
direction: "column",
|
|
3259
|
+
gap: "xs"
|
|
3260
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3261
|
+
variant: "caption",
|
|
3262
|
+
color: "subdued"
|
|
3263
|
+
}, "Balance"), /*#__PURE__*/React.createElement(MoneyDisplay, {
|
|
3264
|
+
amount: balance,
|
|
3265
|
+
currency: currency,
|
|
3266
|
+
size: "xlarge",
|
|
3267
|
+
weight: "bold",
|
|
3268
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-balance") : undefined
|
|
3269
|
+
})), trend && trendValue && /*#__PURE__*/React.createElement(StyledTrendSection, {
|
|
3270
|
+
"aria-label": "Trend ".concat(trend),
|
|
3271
|
+
role: "img"
|
|
3272
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
3273
|
+
name: trendIcon,
|
|
3274
|
+
size: "xs",
|
|
3275
|
+
iconColor: trendColor
|
|
3276
|
+
}), /*#__PURE__*/React.createElement(Typography, {
|
|
3277
|
+
variant: "caption",
|
|
3278
|
+
color: trendColor
|
|
3279
|
+
}, trendValue))), (action || secondaryAction) && /*#__PURE__*/React.createElement(StyledActions$1, null, action && /*#__PURE__*/React.createElement(Button, {
|
|
3280
|
+
onClick: function onClick(e) {
|
|
3281
|
+
e.stopPropagation();
|
|
3282
|
+
action.onClick();
|
|
3283
|
+
},
|
|
3284
|
+
variant: action.variant || 'primary',
|
|
3285
|
+
iconName: action.icon,
|
|
3286
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-action") : undefined
|
|
3287
|
+
}, action.label), secondaryAction && /*#__PURE__*/React.createElement(Button, {
|
|
3288
|
+
onClick: function onClick(e) {
|
|
3289
|
+
e.stopPropagation();
|
|
3290
|
+
secondaryAction.onClick();
|
|
3291
|
+
},
|
|
3292
|
+
variant: secondaryAction.variant || 'naked',
|
|
3293
|
+
iconName: secondaryAction.icon,
|
|
3294
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined
|
|
3295
|
+
}, secondaryAction.label)))));
|
|
3296
|
+
};
|
|
3297
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$i, templateObject_4$f, templateObject_5$c, templateObject_6$b, templateObject_7$9;
|
|
3298
|
+
|
|
3299
|
+
React.createElement;
|
|
3300
|
+
var semantic$b = tokensData.semantic,
|
|
3301
|
+
base$9 = tokensData.base;
|
|
3302
|
+
var slideUp = keyframes(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"], ["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"])));
|
|
3303
|
+
var fadeIn$1 = keyframes(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
3304
|
+
var StyledOverlay$1 = styled.div.withConfig({
|
|
3305
|
+
displayName: "ActionSheet__StyledOverlay",
|
|
3306
|
+
componentId: "sc-regbol-0"
|
|
3307
|
+
})(templateObject_3$h || (templateObject_3$h = __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);
|
|
3308
|
+
var StyledActionSheet = styled.div.withConfig({
|
|
3309
|
+
displayName: "ActionSheet__StyledActionSheet",
|
|
3310
|
+
componentId: "sc-regbol-1"
|
|
3311
|
+
})(templateObject_4$e || (templateObject_4$e = __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"])), semantic$b.color.background.subtle, base$9.border.radius[4], base$9.border.radius[4], base$9.shadow[4], slideUp);
|
|
3312
|
+
var StyledHeader$1 = styled.div.withConfig({
|
|
3313
|
+
displayName: "ActionSheet__StyledHeader",
|
|
3314
|
+
componentId: "sc-regbol-2"
|
|
3315
|
+
})(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: ", " solid ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", " solid ", ";\n"])), base$9.spacing[4], base$9.spacing[4], base$9.spacing[3], base$9.border.width[1], semantic$b.color.border["default"]);
|
|
3316
|
+
var StyledHeaderContent = styled.div.withConfig({
|
|
3317
|
+
displayName: "ActionSheet__StyledHeaderContent",
|
|
3318
|
+
componentId: "sc-regbol-3"
|
|
3319
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
3320
|
+
var StyledCloseButton = styled.button.withConfig({
|
|
3321
|
+
displayName: "ActionSheet__StyledCloseButton",
|
|
3322
|
+
componentId: "sc-regbol-4"
|
|
3323
|
+
})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\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: ", " solid ", ";\n outline-offset: ", ";\n }\n"])), base$9.spacing[2], semantic$b.color.icon.subdued, base$9.border.radius[2], semantic$b.motion.hover, base$9.spacing[2], semantic$b.color.icon["default"], semantic$b.color.background.surface, base$9.border.width[2], semantic$b.color.border.strong, base$9.spacing[1]);
|
|
3324
|
+
var StyledActionsList = styled.div.withConfig({
|
|
3325
|
+
displayName: "ActionSheet__StyledActionsList",
|
|
3326
|
+
componentId: "sc-regbol-5"
|
|
3327
|
+
})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n padding: ", " 0;\n"], ["\n padding: ", " 0;\n"])), base$9.spacing[2]);
|
|
3328
|
+
var StyledActionButton = styled.button.withConfig({
|
|
3329
|
+
displayName: "ActionSheet__StyledActionButton",
|
|
3330
|
+
componentId: "sc-regbol-6"
|
|
3331
|
+
})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n text-align: left;\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n \n &:active:not(:disabled) {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n text-align: left;\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n \n &:active:not(:disabled) {\n background-color: ", ";\n }\n"])), base$9.spacing[3], base$9.spacing[3], base$9.spacing[4], semantic$b.typography.body, semantic$b.motion.hover, function (props) {
|
|
3332
|
+
return props.$destructive && "\n color: ".concat(semantic$b.color.text.error, ";\n ");
|
|
3333
|
+
}, function (props) {
|
|
3334
|
+
return props.$disabled && "\n color: ".concat(semantic$b.color.text.disabled, ";\n cursor: not-allowed;\n ");
|
|
3335
|
+
}, semantic$b.color.background['interactive-subtle'], base$9.border.width[2], semantic$b.color.border.strong, base$9.spacing[1], semantic$b.color.background.surface);
|
|
3336
|
+
var StyledDivider = styled.div.withConfig({
|
|
3337
|
+
displayName: "ActionSheet__StyledDivider",
|
|
3338
|
+
componentId: "sc-regbol-7"
|
|
3339
|
+
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n height: ", ";\n background-color: ", ";\n margin: ", " ", ";\n"], ["\n height: ", ";\n background-color: ", ";\n margin: ", " ", ";\n"
|
|
3340
|
+
/**
|
|
3341
|
+
* ActionSheet component for bottom sheet modals
|
|
3342
|
+
*
|
|
3343
|
+
* Displays a modal action sheet that slides up from the bottom,
|
|
3344
|
+
* providing a list of actions for the user to choose from.
|
|
3345
|
+
* Includes focus trapping, keyboard navigation, and accessibility features.
|
|
3346
|
+
*
|
|
3347
|
+
* @example
|
|
3348
|
+
* ```tsx
|
|
3349
|
+
* const [isOpen, setIsOpen] = useState(false)
|
|
3350
|
+
*
|
|
3351
|
+
* <ActionSheet
|
|
3352
|
+
* isOpen={isOpen}
|
|
3353
|
+
* onClose={() => setIsOpen(false)}
|
|
3354
|
+
* title="Choose an action"
|
|
3355
|
+
* actions={[
|
|
3356
|
+
* {
|
|
3357
|
+
* id: 'edit',
|
|
3358
|
+
* label: 'Edit',
|
|
3359
|
+
* icon: 'edit',
|
|
3360
|
+
* onSelect: () => console.log('Edit')
|
|
3361
|
+
* },
|
|
3362
|
+
* {
|
|
3363
|
+
* id: 'delete',
|
|
3364
|
+
* label: 'Delete',
|
|
3365
|
+
* icon: 'trash',
|
|
3366
|
+
* destructive: true,
|
|
3367
|
+
* onSelect: () => console.log('Delete')
|
|
3368
|
+
* }
|
|
3369
|
+
* ]}
|
|
3370
|
+
* />
|
|
3371
|
+
* ```
|
|
3372
|
+
*/])), base$9.border.width[1], semantic$b.color.border["default"], base$9.spacing[2], base$9.spacing[4]);
|
|
3373
|
+
/**
|
|
3374
|
+
* ActionSheet component for bottom sheet modals
|
|
3375
|
+
*
|
|
3376
|
+
* Displays a modal action sheet that slides up from the bottom,
|
|
3377
|
+
* providing a list of actions for the user to choose from.
|
|
3378
|
+
* Includes focus trapping, keyboard navigation, and accessibility features.
|
|
3379
|
+
*
|
|
3380
|
+
* @example
|
|
3381
|
+
* ```tsx
|
|
3382
|
+
* const [isOpen, setIsOpen] = useState(false)
|
|
3383
|
+
*
|
|
3384
|
+
* <ActionSheet
|
|
3385
|
+
* isOpen={isOpen}
|
|
3386
|
+
* onClose={() => setIsOpen(false)}
|
|
3387
|
+
* title="Choose an action"
|
|
3388
|
+
* actions={[
|
|
3389
|
+
* {
|
|
3390
|
+
* id: 'edit',
|
|
3391
|
+
* label: 'Edit',
|
|
3392
|
+
* icon: 'edit',
|
|
3393
|
+
* onSelect: () => console.log('Edit')
|
|
3394
|
+
* },
|
|
3395
|
+
* {
|
|
3396
|
+
* id: 'delete',
|
|
3397
|
+
* label: 'Delete',
|
|
3398
|
+
* icon: 'trash',
|
|
3399
|
+
* destructive: true,
|
|
3400
|
+
* onSelect: () => console.log('Delete')
|
|
3401
|
+
* }
|
|
3402
|
+
* ]}
|
|
3403
|
+
* />
|
|
3404
|
+
* ```
|
|
3405
|
+
*/
|
|
3406
|
+
var ActionSheet = function ActionSheet(_a) {
|
|
3407
|
+
var isOpen = _a.isOpen,
|
|
3408
|
+
onClose = _a.onClose,
|
|
3409
|
+
title = _a.title,
|
|
3410
|
+
description = _a.description,
|
|
3411
|
+
actions = _a.actions,
|
|
3412
|
+
_b = _a.closeOnOverlayClick,
|
|
3413
|
+
closeOnOverlayClick = _b === void 0 ? true : _b,
|
|
3414
|
+
_c = _a.closeOnEscape,
|
|
3415
|
+
closeOnEscape = _c === void 0 ? true : _c,
|
|
3416
|
+
_d = _a.showCloseButton,
|
|
3417
|
+
showCloseButton = _d === void 0 ? true : _d,
|
|
3418
|
+
dataTestId = _a["data-testid"];
|
|
3419
|
+
var sheetRef = useRef(null);
|
|
3420
|
+
var previousActiveElement = useRef(null);
|
|
3421
|
+
// Store the element that had focus when sheet opened
|
|
3422
|
+
useEffect(function () {
|
|
3423
|
+
if (isOpen) {
|
|
3424
|
+
previousActiveElement.current = document.activeElement;
|
|
3425
|
+
}
|
|
3426
|
+
}, [isOpen]);
|
|
3427
|
+
// Focus management and escape key handling
|
|
3428
|
+
useEffect(function () {
|
|
3429
|
+
if (!isOpen) return;
|
|
3430
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
3431
|
+
if (e.key === 'Escape' && closeOnEscape) {
|
|
3432
|
+
e.preventDefault();
|
|
3433
|
+
onClose();
|
|
3434
|
+
}
|
|
3435
|
+
// Focus trap
|
|
3436
|
+
if (e.key === 'Tab' && sheetRef.current) {
|
|
3437
|
+
var focusableElements = sheetRef.current.querySelectorAll('button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])');
|
|
3438
|
+
var firstElement = focusableElements[0];
|
|
3439
|
+
var lastElement = focusableElements[focusableElements.length - 1];
|
|
3440
|
+
if (e.shiftKey && document.activeElement === firstElement) {
|
|
3441
|
+
e.preventDefault();
|
|
3442
|
+
lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
|
|
3443
|
+
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
|
3444
|
+
e.preventDefault();
|
|
3445
|
+
firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
|
|
3446
|
+
}
|
|
3447
|
+
}
|
|
3448
|
+
};
|
|
3449
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
3450
|
+
// Focus first focusable element
|
|
3451
|
+
requestAnimationFrame(function () {
|
|
3452
|
+
var _a;
|
|
3453
|
+
var firstButton = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled)');
|
|
3454
|
+
firstButton === null || firstButton === void 0 ? void 0 : firstButton.focus();
|
|
3455
|
+
});
|
|
3456
|
+
// Prevent body scroll
|
|
3457
|
+
var originalOverflow = document.body.style.overflow;
|
|
3458
|
+
document.body.style.overflow = 'hidden';
|
|
3459
|
+
return function () {
|
|
3460
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
3461
|
+
document.body.style.overflow = originalOverflow;
|
|
3462
|
+
// Return focus to previous element
|
|
3463
|
+
if (previousActiveElement.current) {
|
|
3464
|
+
previousActiveElement.current.focus();
|
|
3465
|
+
}
|
|
3466
|
+
};
|
|
3467
|
+
}, [isOpen, onClose, closeOnEscape]);
|
|
3468
|
+
var handleOverlayClick = function handleOverlayClick(e) {
|
|
3469
|
+
if (closeOnOverlayClick && e.target === e.currentTarget) {
|
|
3470
|
+
onClose();
|
|
3471
|
+
}
|
|
3472
|
+
};
|
|
3473
|
+
var handleActionClick = function handleActionClick(action) {
|
|
3474
|
+
if (!action.disabled) {
|
|
3475
|
+
action.onSelect();
|
|
3476
|
+
onClose();
|
|
3477
|
+
}
|
|
3478
|
+
};
|
|
3479
|
+
if (!isOpen) return null;
|
|
3480
|
+
// Find if there are any destructive actions to add divider
|
|
3481
|
+
var destructiveIndex = actions.findIndex(function (a) {
|
|
3482
|
+
return a.destructive;
|
|
3483
|
+
});
|
|
3484
|
+
var hasDestructive = destructiveIndex >= 0;
|
|
3485
|
+
return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOverlay$1, {
|
|
3486
|
+
onClick: handleOverlayClick
|
|
3487
|
+
}), /*#__PURE__*/React.createElement(StyledActionSheet, {
|
|
3488
|
+
ref: sheetRef,
|
|
3489
|
+
role: "dialog",
|
|
3490
|
+
"aria-modal": "true",
|
|
3491
|
+
"aria-labelledby": title ? 'action-sheet-title' : undefined,
|
|
3492
|
+
"aria-describedby": description ? 'action-sheet-description' : undefined,
|
|
3493
|
+
"data-testid": dataTestId
|
|
3494
|
+
}, (title || description || showCloseButton) && /*#__PURE__*/React.createElement(StyledHeader$1, null, /*#__PURE__*/React.createElement(StyledHeaderContent, null, /*#__PURE__*/React.createElement(Stack, {
|
|
3495
|
+
direction: "column",
|
|
3496
|
+
gap: description && title ? 'xs' : 'none'
|
|
3497
|
+
}, title && /*#__PURE__*/React.createElement("div", {
|
|
3498
|
+
id: "action-sheet-title"
|
|
3499
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3500
|
+
variant: "h3"
|
|
3501
|
+
}, title)), description && /*#__PURE__*/React.createElement("div", {
|
|
3502
|
+
id: "action-sheet-description"
|
|
3503
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
3504
|
+
variant: "body",
|
|
3505
|
+
color: "subdued"
|
|
3506
|
+
}, description)))), showCloseButton && /*#__PURE__*/React.createElement(StyledCloseButton, {
|
|
3507
|
+
type: "button",
|
|
3508
|
+
onClick: onClose,
|
|
3509
|
+
"aria-label": "Close"
|
|
3510
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
3511
|
+
name: "close",
|
|
3512
|
+
size: "sm",
|
|
3513
|
+
iconColor: "subdued"
|
|
3514
|
+
}))), /*#__PURE__*/React.createElement(StyledActionsList, null, actions.map(function (action, index) {
|
|
3515
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
3516
|
+
key: action.id
|
|
3517
|
+
}, hasDestructive && index === destructiveIndex && index > 0 && /*#__PURE__*/React.createElement(StyledDivider, null), /*#__PURE__*/React.createElement(StyledActionButton, {
|
|
3518
|
+
type: "button",
|
|
3519
|
+
onClick: function onClick() {
|
|
3520
|
+
return handleActionClick(action);
|
|
3521
|
+
},
|
|
3522
|
+
disabled: action.disabled,
|
|
3523
|
+
$destructive: action.destructive || false,
|
|
3524
|
+
$disabled: action.disabled || false,
|
|
3525
|
+
"aria-label": action.label
|
|
3526
|
+
}, action.icon && /*#__PURE__*/React.createElement(Icon, {
|
|
3527
|
+
name: action.icon,
|
|
3528
|
+
size: "md",
|
|
3529
|
+
iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
|
|
3530
|
+
}), /*#__PURE__*/React.createElement(Typography, {
|
|
3531
|
+
variant: "body"
|
|
3532
|
+
}, action.label)));
|
|
3533
|
+
})))), document.body);
|
|
3534
|
+
};
|
|
3535
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$h, templateObject_4$e, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$5, templateObject_9$3, templateObject_10$2;
|
|
3536
|
+
|
|
3537
|
+
React.createElement;
|
|
3538
|
+
var semantic$a = tokensData.semantic,
|
|
3539
|
+
base$8 = tokensData.base;
|
|
3540
|
+
// Default icons by variant
|
|
3541
|
+
var variantIcons = {
|
|
3542
|
+
error: 'crossCircle',
|
|
3543
|
+
warning: 'bell',
|
|
3544
|
+
info: 'info',
|
|
3545
|
+
success: 'checkRing'
|
|
3546
|
+
};
|
|
3547
|
+
// Icon colors by variant (using semantic icon color tokens)
|
|
3548
|
+
var variantIconColors = {
|
|
3549
|
+
error: 'error',
|
|
3550
|
+
warning: 'warning',
|
|
3551
|
+
info: 'interactive',
|
|
3552
|
+
success: 'success'
|
|
3553
|
+
};
|
|
3554
|
+
// Title colors by variant (using semantic text color tokens)
|
|
3555
|
+
var variantTitleColors = {
|
|
3556
|
+
error: 'error',
|
|
3557
|
+
warning: 'warning',
|
|
3558
|
+
info: 'interactive',
|
|
3559
|
+
success: 'success'
|
|
3560
|
+
};
|
|
3561
|
+
var StyledAlert = styled.div.withConfig({
|
|
3562
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3563
|
+
return !prop.startsWith('$');
|
|
3564
|
+
},
|
|
3565
|
+
displayName: "Alert__StyledAlert",
|
|
3566
|
+
componentId: "sc-18tq5d-0"
|
|
3567
|
+
})(templateObject_1$o || (templateObject_1$o = __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) {
|
|
3568
|
+
var $inline = _a.$inline;
|
|
3569
|
+
return $inline ? 'center' : 'flex-start';
|
|
3570
|
+
}, function (_a) {
|
|
3571
|
+
var $inline = _a.$inline;
|
|
3572
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
|
|
3573
|
+
}, function (_a) {
|
|
3574
|
+
var $inline = _a.$inline;
|
|
3575
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
|
|
3576
|
+
}, base$8.border.radius[2], function (_a) {
|
|
3577
|
+
var $variant = _a.$variant;
|
|
3578
|
+
switch ($variant) {
|
|
3579
|
+
case 'error':
|
|
3580
|
+
return "\n background-color: ".concat(semantic$a.color.background['error-subtle'], ";\n border-color: ").concat(semantic$a.color.border.error, ";\n color: ").concat(semantic$a.color.text.error, ";\n ");
|
|
3581
|
+
case 'warning':
|
|
3582
|
+
return "\n background-color: ".concat(semantic$a.color.background['warning-subtle'], ";\n border-color: ").concat(semantic$a.color.border.warning, ";\n color: ").concat(semantic$a.color.text.warning, ";\n ");
|
|
3583
|
+
case 'success':
|
|
3584
|
+
return "\n background-color: ".concat(semantic$a.color.background['success-subtle'], ";\n border-color: ").concat(semantic$a.color.border.success, ";\n color: ").concat(semantic$a.color.text.success, ";\n ");
|
|
3585
|
+
case 'info':
|
|
3586
|
+
default:
|
|
3587
|
+
return "\n background-color: ".concat(semantic$a.color.background['interactive-subtle'], ";\n border-color: ").concat(semantic$a.color.border.interactive, ";\n color: ").concat(semantic$a.color.text.interactive, ";\n ");
|
|
3588
|
+
}
|
|
3589
|
+
}, base$8.breakpoint.md, function (_a) {
|
|
3590
|
+
var $inline = _a.$inline;
|
|
3591
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.lg;
|
|
3592
|
+
});
|
|
3593
|
+
var StyledIconContainer$1 = styled.div.withConfig({
|
|
3594
|
+
displayName: "Alert__StyledIconContainer",
|
|
3595
|
+
componentId: "sc-18tq5d-1"
|
|
3596
|
+
})(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
3597
|
+
var StyledContent$1 = styled.div.withConfig({
|
|
3598
|
+
displayName: "Alert__StyledContent",
|
|
3599
|
+
componentId: "sc-18tq5d-2"
|
|
3600
|
+
})(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$a.spacing.layout.xs);
|
|
3601
|
+
var StyledTitle = styled.span.withConfig({
|
|
3602
|
+
displayName: "Alert__StyledTitle",
|
|
3603
|
+
componentId: "sc-18tq5d-3"
|
|
3604
|
+
})(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$a.typography.h6);
|
|
3605
|
+
var StyledMessage = styled.span.withConfig({
|
|
3606
|
+
displayName: "Alert__StyledMessage",
|
|
3607
|
+
componentId: "sc-18tq5d-4"
|
|
3608
|
+
})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n font: ", ";\n\tline-height: 1.25;\n"], ["\n font: ", ";\n\tline-height: 1.25;\n"])), semantic$a.typography.body);
|
|
3609
|
+
var StyledActions = styled.div.withConfig({
|
|
3610
|
+
displayName: "Alert__StyledActions",
|
|
3611
|
+
componentId: "sc-18tq5d-5"
|
|
3612
|
+
})(templateObject_6$9 || (templateObject_6$9 = __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$a.spacing.layout.sm);
|
|
3613
|
+
var StyledDismissButton = styled(IconButton).withConfig({
|
|
3614
|
+
displayName: "Alert__StyledDismissButton",
|
|
3615
|
+
componentId: "sc-18tq5d-6"
|
|
3616
|
+
})(templateObject_7$7 || (templateObject_7$7 = __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$a.spacing.layout.xs);
|
|
3617
|
+
var Alert = function Alert(_a) {
|
|
3618
|
+
var _b = _a.variant,
|
|
3619
|
+
variant = _b === void 0 ? 'info' : _b,
|
|
3620
|
+
children = _a.children,
|
|
3621
|
+
title = _a.title,
|
|
3622
|
+
_c = _a.dismissible,
|
|
3623
|
+
dismissible = _c === void 0 ? false : _c,
|
|
3624
|
+
onDismiss = _a.onDismiss,
|
|
3625
|
+
action = _a.action,
|
|
3626
|
+
_d = _a.inline,
|
|
3627
|
+
inline = _d === void 0 ? false : _d,
|
|
3628
|
+
_e = _a.ariaLive,
|
|
3629
|
+
ariaLive = _e === void 0 ? 'polite' : _e,
|
|
3630
|
+
dataTestId = _a["data-testid"],
|
|
3631
|
+
props = __rest(_a, ["variant", "children", "title", "dismissible", "onDismiss", "action", "inline", "ariaLive", 'data-testid']);
|
|
3632
|
+
var _f = React.useState(true),
|
|
3633
|
+
isVisible = _f[0],
|
|
3634
|
+
setIsVisible = _f[1];
|
|
3635
|
+
var handleDismiss = function handleDismiss() {
|
|
3636
|
+
setIsVisible(false);
|
|
3637
|
+
onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
|
|
3638
|
+
};
|
|
3639
|
+
if (!isVisible) {
|
|
3640
|
+
return null;
|
|
3641
|
+
}
|
|
2682
3642
|
// Get the icon for the current variant
|
|
2683
3643
|
var iconName = variantIcons[variant];
|
|
2684
3644
|
var alertIconColor = variantIconColors[variant];
|
|
@@ -2697,7 +3657,7 @@ var Alert = function Alert(_a) {
|
|
|
2697
3657
|
name: iconName,
|
|
2698
3658
|
size: "md",
|
|
2699
3659
|
iconColor: alertIconColor
|
|
2700
|
-
})), /*#__PURE__*/React.createElement(StyledContent, null, title && /*#__PURE__*/React.createElement(StyledTitle, {
|
|
3660
|
+
})), /*#__PURE__*/React.createElement(StyledContent$1, null, title && /*#__PURE__*/React.createElement(StyledTitle, {
|
|
2701
3661
|
role: "heading",
|
|
2702
3662
|
"aria-level": 6,
|
|
2703
3663
|
color: alertTitleColor
|
|
@@ -2711,18 +3671,18 @@ var Alert = function Alert(_a) {
|
|
|
2711
3671
|
})));
|
|
2712
3672
|
};
|
|
2713
3673
|
Alert.displayName = 'Alert';
|
|
2714
|
-
var templateObject_1$
|
|
3674
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$g, templateObject_4$d, templateObject_5$a, templateObject_6$9, templateObject_7$7;
|
|
2715
3675
|
|
|
2716
3676
|
React.createElement;
|
|
2717
3677
|
var _a$3, _b$1, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
2718
3678
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
2719
3679
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
2720
3680
|
componentId: "sc-7ouzg5-0"
|
|
2721
|
-
})(templateObject_1$
|
|
3681
|
+
})(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"], ["\n border-bottom: ", ";\n\n ol {\n display: flex;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n"])), ((_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');
|
|
2722
3682
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
2723
3683
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
2724
3684
|
componentId: "sc-7ouzg5-1"
|
|
2725
|
-
})(templateObject_2$
|
|
3685
|
+
})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\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 text-decoration: underline;\n color: ", ";\n }\n"], ["\n text-transform: uppercase;\n display: inline-block;\n margin-right: ", ";\n padding: ", ";\n position: relative;\n\n &:not(:last-of-type)::before {\n content: '';\n background-image: url('/assets/icons/caret.svg');\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n background-color: transparent;\n opacity: 0.5;\n display: inline-block;\n width: ", ";\n height: ", ";\n right: -", ";\n position: absolute;\n }\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 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', ((_h = (_g = tokensData.base) === null || _g === void 0 ? void 0 : _g.spacing) === null || _h === void 0 ? void 0 : _h['4']) || '1rem', ((_k = (_j = tokensData.base) === null || _j === void 0 ? void 0 : _j.spacing) === null || _k === void 0 ? void 0 : _k['4']) || '1rem', ((_m = (_l = tokensData.base) === null || _l === void 0 ? void 0 : _l.spacing) === null || _m === void 0 ? void 0 : _m['3']) || '0.75rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
|
|
2726
3686
|
var isInternalUrl = function isInternalUrl(url) {
|
|
2727
3687
|
return url.startsWith('/') && !url.startsWith('http');
|
|
2728
3688
|
};
|
|
@@ -2750,13 +3710,13 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
2750
3710
|
}, breadcrumb.label)));
|
|
2751
3711
|
}))));
|
|
2752
3712
|
};
|
|
2753
|
-
var templateObject_1$
|
|
3713
|
+
var templateObject_1$n, templateObject_2$i;
|
|
2754
3714
|
|
|
2755
3715
|
React.createElement;
|
|
2756
3716
|
var CardSmallStyled = styled.div.withConfig({
|
|
2757
3717
|
displayName: "CardSmall__CardSmallStyled",
|
|
2758
3718
|
componentId: "sc-jpcqvd-0"
|
|
2759
|
-
})(templateObject_1$
|
|
3719
|
+
})(templateObject_1$m || (templateObject_1$m = __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);
|
|
2760
3720
|
var CardSmall = function CardSmall(_a) {
|
|
2761
3721
|
var title = _a.title,
|
|
2762
3722
|
picture = _a.picture,
|
|
@@ -2798,14 +3758,14 @@ var CardSmall = function CardSmall(_a) {
|
|
|
2798
3758
|
"aria-label": title
|
|
2799
3759
|
}, content));
|
|
2800
3760
|
};
|
|
2801
|
-
var templateObject_1$
|
|
3761
|
+
var templateObject_1$m;
|
|
2802
3762
|
|
|
2803
3763
|
React.createElement;
|
|
2804
3764
|
var border$3 = tokensData.base.border;
|
|
2805
3765
|
var CardLargeStyled = styled.div.withConfig({
|
|
2806
3766
|
displayName: "CardLarge__CardLargeStyled",
|
|
2807
3767
|
componentId: "sc-1rfgdzl-0"
|
|
2808
|
-
})(templateObject_1$
|
|
3768
|
+
})(templateObject_1$l || (templateObject_1$l = __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]);
|
|
2809
3769
|
var CardLarge = function CardLarge(_a) {
|
|
2810
3770
|
var title = _a.title,
|
|
2811
3771
|
excerpt = _a.excerpt,
|
|
@@ -2850,7 +3810,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
2850
3810
|
});
|
|
2851
3811
|
})))));
|
|
2852
3812
|
};
|
|
2853
|
-
var templateObject_1$
|
|
3813
|
+
var templateObject_1$l;
|
|
2854
3814
|
|
|
2855
3815
|
/**
|
|
2856
3816
|
* Hidden native checkbox input for accessibility
|
|
@@ -2862,7 +3822,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
2862
3822
|
},
|
|
2863
3823
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
2864
3824
|
componentId: "sc-1ddpctx-0"
|
|
2865
|
-
})(templateObject_1$
|
|
3825
|
+
})(templateObject_1$k || (templateObject_1$k = __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"
|
|
2866
3826
|
/**
|
|
2867
3827
|
* Custom checkbox visual component
|
|
2868
3828
|
* 24px × 24px for 8px grid alignment
|
|
@@ -2879,7 +3839,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
2879
3839
|
},
|
|
2880
3840
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
2881
3841
|
componentId: "sc-1ddpctx-1"
|
|
2882
|
-
})(templateObject_2$
|
|
3842
|
+
})(templateObject_2$h || (templateObject_2$h = __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"
|
|
2883
3843
|
/**
|
|
2884
3844
|
* Container for checkbox with proper spacing and alignment
|
|
2885
3845
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -2912,7 +3872,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
2912
3872
|
},
|
|
2913
3873
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
2914
3874
|
componentId: "sc-1ddpctx-2"
|
|
2915
|
-
})(templateObject_3$
|
|
3875
|
+
})(templateObject_3$f || (templateObject_3$f = __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"
|
|
2916
3876
|
/**
|
|
2917
3877
|
* Label text with proper typography
|
|
2918
3878
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -2929,20 +3889,20 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
2929
3889
|
},
|
|
2930
3890
|
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
2931
3891
|
componentId: "sc-1ddpctx-3"
|
|
2932
|
-
})(templateObject_4$
|
|
3892
|
+
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
2933
3893
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
2934
3894
|
});
|
|
2935
|
-
var templateObject_1$
|
|
3895
|
+
var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$c;
|
|
2936
3896
|
|
|
2937
3897
|
React.createElement;
|
|
2938
3898
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
2939
3899
|
displayName: "Checkbox__StyledFieldContainer",
|
|
2940
3900
|
componentId: "sc-vquz3v-0"
|
|
2941
|
-
})(templateObject_1$
|
|
3901
|
+
})(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"], ["\n display: inline-flex;\n flex-direction: column;\n gap: ", ";\n"])), tokensData.base.spacing[1]);
|
|
2942
3902
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
2943
3903
|
displayName: "Checkbox__StyledHelperText",
|
|
2944
3904
|
componentId: "sc-vquz3v-1"
|
|
2945
|
-
})(templateObject_2$
|
|
3905
|
+
})(templateObject_2$g || (templateObject_2$g = __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"
|
|
2946
3906
|
/**
|
|
2947
3907
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
2948
3908
|
*
|
|
@@ -3055,13 +4015,13 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
3055
4015
|
}, error));
|
|
3056
4016
|
});
|
|
3057
4017
|
Checkbox.displayName = 'Checkbox';
|
|
3058
|
-
var templateObject_1$
|
|
4018
|
+
var templateObject_1$j, templateObject_2$g;
|
|
3059
4019
|
|
|
3060
4020
|
React.createElement;
|
|
3061
4021
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
3062
4022
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
3063
4023
|
componentId: "sc-ae049w-0"
|
|
3064
|
-
})(templateObject_1$
|
|
4024
|
+
})(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"], ["\n > div {\n display: flex;\n flex-wrap: wrap;\n }\n"])));
|
|
3065
4025
|
var ChipGroup = function ChipGroup(_a) {
|
|
3066
4026
|
var labels = _a.labels,
|
|
3067
4027
|
_b = _a.variant,
|
|
@@ -3080,7 +4040,7 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
3080
4040
|
});
|
|
3081
4041
|
})));
|
|
3082
4042
|
};
|
|
3083
|
-
var templateObject_1$
|
|
4043
|
+
var templateObject_1$i;
|
|
3084
4044
|
|
|
3085
4045
|
React.createElement;
|
|
3086
4046
|
var _a$2 = tokensData.semantic,
|
|
@@ -3090,15 +4050,15 @@ var _a$2 = tokensData.semantic,
|
|
|
3090
4050
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
3091
4051
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
3092
4052
|
componentId: "sc-1p1t0kp-0"
|
|
3093
|
-
})(templateObject_1$
|
|
4053
|
+
})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n margin: ", " 0;\n position: relative;\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 margin: ", " 0;\n position: relative;\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"], spacing$2.layout.sm);
|
|
3094
4054
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
3095
4055
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
3096
4056
|
componentId: "sc-1p1t0kp-1"
|
|
3097
|
-
})(templateObject_2$
|
|
4057
|
+
})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n position: relative;\n display: inline-block;\n width: 100%;\n"], ["\n position: relative;\n display: inline-block;\n width: 100%;\n"])));
|
|
3098
4058
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
3099
4059
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
3100
4060
|
componentId: "sc-1p1t0kp-2"
|
|
3101
|
-
})(templateObject_3$
|
|
4061
|
+
})(templateObject_3$e || (templateObject_3$e = __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);
|
|
3102
4062
|
var CopyButton = function CopyButton(_a) {
|
|
3103
4063
|
var text = _a.text,
|
|
3104
4064
|
onCopy = _a.onCopy;
|
|
@@ -3175,7 +4135,201 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
3175
4135
|
onCopy: onCopy
|
|
3176
4136
|
}));
|
|
3177
4137
|
};
|
|
3178
|
-
var templateObject_1$
|
|
4138
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$e;
|
|
4139
|
+
|
|
4140
|
+
React.createElement;
|
|
4141
|
+
var StyledHeader = styled.div.withConfig({
|
|
4142
|
+
displayName: "DateGroup__StyledHeader",
|
|
4143
|
+
componentId: "sc-9nfm1f-0"
|
|
4144
|
+
})(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 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) {
|
|
4145
|
+
var $sticky = _a.$sticky;
|
|
4146
|
+
return $sticky && "\n position: sticky;\n top: 0;\n z-index: 10;\n box-shadow: ".concat(tokensData.base.shadow[2], ";\n ");
|
|
4147
|
+
});
|
|
4148
|
+
var StyledLeftSection = styled.div.withConfig({
|
|
4149
|
+
displayName: "DateGroup__StyledLeftSection",
|
|
4150
|
+
componentId: "sc-9nfm1f-1"
|
|
4151
|
+
})(templateObject_2$e || (templateObject_2$e = __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);
|
|
4152
|
+
var StyledRightSection = styled.div.withConfig({
|
|
4153
|
+
displayName: "DateGroup__StyledRightSection",
|
|
4154
|
+
componentId: "sc-9nfm1f-2"
|
|
4155
|
+
})(templateObject_3$d || (templateObject_3$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.md);
|
|
4156
|
+
var StyledContent = styled.div.withConfig({
|
|
4157
|
+
displayName: "DateGroup__StyledContent",
|
|
4158
|
+
componentId: "sc-9nfm1f-3"
|
|
4159
|
+
})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n /* Content area for children */\n"], ["\n /* Content area for children */\n"
|
|
4160
|
+
/**
|
|
4161
|
+
* DateGroup component
|
|
4162
|
+
*
|
|
4163
|
+
* Groups related content (typically transactions) under a formatted date header
|
|
4164
|
+
* with optional total amount and item count displays. Supports sticky headers
|
|
4165
|
+
* for scrolling lists.
|
|
4166
|
+
*
|
|
4167
|
+
* Composes: DateFormatter, MoneyDisplay, Stack, Typography
|
|
4168
|
+
*/])));
|
|
4169
|
+
/**
|
|
4170
|
+
* DateGroup component
|
|
4171
|
+
*
|
|
4172
|
+
* Groups related content (typically transactions) under a formatted date header
|
|
4173
|
+
* with optional total amount and item count displays. Supports sticky headers
|
|
4174
|
+
* for scrolling lists.
|
|
4175
|
+
*
|
|
4176
|
+
* Composes: DateFormatter, MoneyDisplay, Stack, Typography
|
|
4177
|
+
*/
|
|
4178
|
+
var DateGroup = function DateGroup(_a) {
|
|
4179
|
+
var date = _a.date,
|
|
4180
|
+
children = _a.children,
|
|
4181
|
+
_b = _a.format,
|
|
4182
|
+
format = _b === void 0 ? 'smart' : _b,
|
|
4183
|
+
_c = _a.showTotal,
|
|
4184
|
+
showTotal = _c === void 0 ? false : _c,
|
|
4185
|
+
totalAmount = _a.totalAmount,
|
|
4186
|
+
_d = _a.showCount,
|
|
4187
|
+
showCount = _d === void 0 ? false : _d,
|
|
4188
|
+
count = _a.count,
|
|
4189
|
+
_e = _a.sticky,
|
|
4190
|
+
sticky = _e === void 0 ? false : _e,
|
|
4191
|
+
_f = _a.currency,
|
|
4192
|
+
currency = _f === void 0 ? 'AUD' : _f,
|
|
4193
|
+
dataTestId = _a["data-testid"];
|
|
4194
|
+
// Determine total variant based on amount (positive = income, negative = expense)
|
|
4195
|
+
var totalVariant = totalAmount && totalAmount !== 0 ? totalAmount > 0 ? 'positive' : 'negative' : 'default';
|
|
4196
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
4197
|
+
"data-testid": dataTestId,
|
|
4198
|
+
role: "group",
|
|
4199
|
+
"aria-label": "Transactions for ".concat(date)
|
|
4200
|
+
}, /*#__PURE__*/React.createElement(StyledHeader, {
|
|
4201
|
+
$sticky: sticky,
|
|
4202
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-header") : undefined
|
|
4203
|
+
}, /*#__PURE__*/React.createElement(StyledLeftSection, null, /*#__PURE__*/React.createElement(DateFormatter, {
|
|
4204
|
+
dateString: typeof date === 'string' ? date : date.toISOString(),
|
|
4205
|
+
mode: format,
|
|
4206
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
|
|
4207
|
+
}), showCount && count !== undefined && /*#__PURE__*/React.createElement(Typography, {
|
|
4208
|
+
variant: "caption",
|
|
4209
|
+
color: "subdued",
|
|
4210
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-count") : undefined
|
|
4211
|
+
}, "(", count, " ", count === 1 ? 'item' : 'items', ")")), /*#__PURE__*/React.createElement(StyledRightSection, null, showTotal && totalAmount !== undefined && /*#__PURE__*/React.createElement(MoneyDisplay, {
|
|
4212
|
+
amount: totalAmount,
|
|
4213
|
+
currency: currency,
|
|
4214
|
+
variant: totalVariant,
|
|
4215
|
+
size: "small",
|
|
4216
|
+
weight: "medium",
|
|
4217
|
+
showSign: true,
|
|
4218
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-total") : undefined
|
|
4219
|
+
}))), /*#__PURE__*/React.createElement(StyledContent, {
|
|
4220
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-content") : undefined
|
|
4221
|
+
}, children));
|
|
4222
|
+
};
|
|
4223
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
4224
|
+
|
|
4225
|
+
React.createElement;
|
|
4226
|
+
var semantic$9 = tokensData.semantic;
|
|
4227
|
+
var StyledContainer$1 = styled.div.withConfig({
|
|
4228
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4229
|
+
return !prop.startsWith('$');
|
|
4230
|
+
},
|
|
4231
|
+
displayName: "EmptyState__StyledContainer",
|
|
4232
|
+
componentId: "sc-1u5hxh-0"
|
|
4233
|
+
})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: 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) {
|
|
4234
|
+
var $size = _a.$size;
|
|
4235
|
+
return $size === 'small' ? semantic$9.spacing.layout['4xl'] : $size === 'large' ? semantic$9.spacing.layout['8xl'] : semantic$9.spacing.layout['6xl'];
|
|
4236
|
+
});
|
|
4237
|
+
var StyledIllustration = styled.div.withConfig({
|
|
4238
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4239
|
+
return !prop.startsWith('$');
|
|
4240
|
+
},
|
|
4241
|
+
displayName: "EmptyState__StyledIllustration",
|
|
4242
|
+
componentId: "sc-1u5hxh-1"
|
|
4243
|
+
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: ", ";\n color: ", ";\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: ", ";\n color: ", ";\n"])), function (_a) {
|
|
4244
|
+
var $size = _a.$size;
|
|
4245
|
+
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
4246
|
+
}, function (_a) {
|
|
4247
|
+
var $size = _a.$size;
|
|
4248
|
+
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
4249
|
+
}, semantic$9.spacing.layout['2xl'], function (_a) {
|
|
4250
|
+
var $variant = _a.$variant;
|
|
4251
|
+
return $variant === 'error' ? semantic$9.color.icon.error : $variant === 'success' ? semantic$9.color.icon.success : semantic$9.color.icon.subdued;
|
|
4252
|
+
});
|
|
4253
|
+
var StyledTextContainer = styled.div.withConfig({
|
|
4254
|
+
displayName: "EmptyState__StyledTextContainer",
|
|
4255
|
+
componentId: "sc-1u5hxh-2"
|
|
4256
|
+
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width: 360px;\n margin-bottom: ", ";\n"], ["\n max-width: 360px;\n margin-bottom: ", ";\n"
|
|
4257
|
+
// Map illustration type to icon name
|
|
4258
|
+
])), semantic$9.spacing.layout['2xl']);
|
|
4259
|
+
// Map illustration type to icon name
|
|
4260
|
+
var illustrationToIcon = {
|
|
4261
|
+
search: 'search',
|
|
4262
|
+
transactions: 'paper',
|
|
4263
|
+
// Placeholder - will use custom icon when available
|
|
4264
|
+
notifications: 'bell',
|
|
4265
|
+
empty: 'paper',
|
|
4266
|
+
error: 'crossCircle'
|
|
4267
|
+
};
|
|
4268
|
+
var EmptyState = function EmptyState(_a) {
|
|
4269
|
+
var _b = _a.illustration,
|
|
4270
|
+
illustration = _b === void 0 ? 'empty' : _b,
|
|
4271
|
+
customIllustration = _a.customIllustration,
|
|
4272
|
+
title = _a.title,
|
|
4273
|
+
description = _a.description,
|
|
4274
|
+
action = _a.action,
|
|
4275
|
+
secondaryAction = _a.secondaryAction,
|
|
4276
|
+
_c = _a.variant,
|
|
4277
|
+
variant = _c === void 0 ? 'default' : _c,
|
|
4278
|
+
_d = _a.size,
|
|
4279
|
+
size = _d === void 0 ? 'medium' : _d,
|
|
4280
|
+
dataTestId = _a["data-testid"];
|
|
4281
|
+
// Determine what to show for illustration
|
|
4282
|
+
var renderIllustration = function renderIllustration() {
|
|
4283
|
+
if (customIllustration) {
|
|
4284
|
+
return customIllustration;
|
|
4285
|
+
}
|
|
4286
|
+
if (illustration !== 'custom') {
|
|
4287
|
+
var iconName = illustrationToIcon[illustration];
|
|
4288
|
+
return /*#__PURE__*/React.createElement(Icon, {
|
|
4289
|
+
name: iconName,
|
|
4290
|
+
size: "2xl"
|
|
4291
|
+
});
|
|
4292
|
+
}
|
|
4293
|
+
return null;
|
|
4294
|
+
};
|
|
4295
|
+
return /*#__PURE__*/React.createElement(StyledContainer$1, {
|
|
4296
|
+
$size: size,
|
|
4297
|
+
"data-testid": dataTestId,
|
|
4298
|
+
role: "status",
|
|
4299
|
+
"aria-label": "Empty state: ".concat(title)
|
|
4300
|
+
}, /*#__PURE__*/React.createElement(StyledIllustration, {
|
|
4301
|
+
$size: size,
|
|
4302
|
+
$variant: variant,
|
|
4303
|
+
"aria-hidden": "true"
|
|
4304
|
+
}, renderIllustration()), /*#__PURE__*/React.createElement(StyledTextContainer, null, /*#__PURE__*/React.createElement(Typography, {
|
|
4305
|
+
variant: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3',
|
|
4306
|
+
color: variant === 'error' ? 'error' : 'default',
|
|
4307
|
+
as: size === 'small' ? 'h4' : size === 'large' ? 'h2' : 'h3'
|
|
4308
|
+
}, title), /*#__PURE__*/React.createElement("div", {
|
|
4309
|
+
style: {
|
|
4310
|
+
marginTop: semantic$9.spacing.layout.md
|
|
4311
|
+
}
|
|
4312
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
4313
|
+
variant: "body",
|
|
4314
|
+
color: "subdued"
|
|
4315
|
+
}, description))), (action || secondaryAction) && /*#__PURE__*/React.createElement(Box, {
|
|
4316
|
+
width: "100%",
|
|
4317
|
+
maxWidth: "300px"
|
|
4318
|
+
}, /*#__PURE__*/React.createElement(Stack, {
|
|
4319
|
+
direction: "column",
|
|
4320
|
+
gap: "sm"
|
|
4321
|
+
}, action && /*#__PURE__*/React.createElement(Button, {
|
|
4322
|
+
variant: action.variant || 'primary',
|
|
4323
|
+
onClick: action.onClick,
|
|
4324
|
+
iconName: action.icon,
|
|
4325
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-primary-action") : undefined
|
|
4326
|
+
}, action.label), secondaryAction && /*#__PURE__*/React.createElement(Button, {
|
|
4327
|
+
variant: "naked",
|
|
4328
|
+
onClick: secondaryAction.onClick,
|
|
4329
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-secondary-action") : undefined
|
|
4330
|
+
}, secondaryAction.label))));
|
|
4331
|
+
};
|
|
4332
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c;
|
|
3179
4333
|
|
|
3180
4334
|
React.createElement;
|
|
3181
4335
|
var _a$1 = tokensData.base,
|
|
@@ -3184,23 +4338,23 @@ var _a$1 = tokensData.base,
|
|
|
3184
4338
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
3185
4339
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
3186
4340
|
componentId: "sc-1mi4lso-0"
|
|
3187
|
-
})(templateObject_1$
|
|
4341
|
+
})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n @media (min-width: ", ") {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n }\n\n @media (min-width: ", ") {\n gap: ", ";\n }\n\n img {\n border-radius: ", ";\n transition: 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]);
|
|
3188
4342
|
var ImageWrapper = styled.div.withConfig({
|
|
3189
4343
|
displayName: "FeatureBlock__ImageWrapper",
|
|
3190
4344
|
componentId: "sc-1mi4lso-1"
|
|
3191
|
-
})(templateObject_2$
|
|
4345
|
+
})(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n grid-column: span 12;\n\n @media (min-width: ", ") {\n grid-column: span 6;\n }\n"], ["\n grid-column: span 12;\n\n @media (min-width: ", ") {\n grid-column: span 6;\n }\n"])), tokensData.base.breakpoint.lg);
|
|
3192
4346
|
var ContentSection = styled.div.withConfig({
|
|
3193
4347
|
displayName: "FeatureBlock__ContentSection",
|
|
3194
4348
|
componentId: "sc-1mi4lso-2"
|
|
3195
|
-
})(templateObject_3$
|
|
4349
|
+
})(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n grid-column: span 12;\n margin-top: ", ";\n\n @media (min-width: ", ") {\n grid-column: span 6;\n margin-top: 0;\n padding-right: ", ";\n }\n\n @media (min-width: ", ") {\n padding-right: ", ";\n }\n"], ["\n grid-column: span 12;\n margin-top: ", ";\n\n @media (min-width: ", ") {\n grid-column: span 6;\n margin-top: 0;\n padding-right: ", ";\n }\n\n @media (min-width: ", ") {\n padding-right: ", ";\n }\n"])), spacing$1[6], tokensData.base.breakpoint.lg, spacing$1[8], tokensData.base.breakpoint.xl, spacing$1[24]);
|
|
3196
4350
|
var ButtonWrapper = styled.div.withConfig({
|
|
3197
4351
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
3198
4352
|
componentId: "sc-1mi4lso-3"
|
|
3199
|
-
})(templateObject_4$
|
|
4353
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
3200
4354
|
var ContentWrapper = styled.div.withConfig({
|
|
3201
4355
|
displayName: "FeatureBlock__ContentWrapper",
|
|
3202
4356
|
componentId: "sc-1mi4lso-4"
|
|
3203
|
-
})(templateObject_5$
|
|
4357
|
+
})(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
3204
4358
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
3205
4359
|
var title = _a.title,
|
|
3206
4360
|
excerpt = _a.excerpt,
|
|
@@ -3240,7 +4394,7 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
3240
4394
|
onClick: onReadMore
|
|
3241
4395
|
}, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
|
|
3242
4396
|
};
|
|
3243
|
-
var templateObject_1$
|
|
4397
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
|
|
3244
4398
|
|
|
3245
4399
|
React.createElement;
|
|
3246
4400
|
var _a = tokensData.base,
|
|
@@ -3255,14 +4409,14 @@ var _a = tokensData.base,
|
|
|
3255
4409
|
var DropdownContainer = styled.div.withConfig({
|
|
3256
4410
|
displayName: "Dropdown__DropdownContainer",
|
|
3257
4411
|
componentId: "sc-kz07c4-0"
|
|
3258
|
-
})(templateObject_1$
|
|
4412
|
+
})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
3259
4413
|
var DropdownTrigger = styled.button.withConfig({
|
|
3260
4414
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3261
4415
|
return !prop.startsWith('$');
|
|
3262
4416
|
},
|
|
3263
4417
|
displayName: "Dropdown__DropdownTrigger",
|
|
3264
4418
|
componentId: "sc-kz07c4-1"
|
|
3265
|
-
})(templateObject_2$
|
|
4419
|
+
})(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n font: ", ";\n color: ", ";\n cursor: pointer;\n transition: border-color 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) {
|
|
3266
4420
|
var $hasError = _a.$hasError;
|
|
3267
4421
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
3268
4422
|
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
@@ -3282,7 +4436,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
3282
4436
|
},
|
|
3283
4437
|
displayName: "Dropdown__DropdownIcon",
|
|
3284
4438
|
componentId: "sc-kz07c4-2"
|
|
3285
|
-
})(templateObject_3$
|
|
4439
|
+
})(templateObject_3$a || (templateObject_3$a = __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) {
|
|
3286
4440
|
var $isOpen = _a.$isOpen;
|
|
3287
4441
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
3288
4442
|
});
|
|
@@ -3292,7 +4446,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
3292
4446
|
},
|
|
3293
4447
|
displayName: "Dropdown__DropdownMenu",
|
|
3294
4448
|
componentId: "sc-kz07c4-3"
|
|
3295
|
-
})(templateObject_4$
|
|
4449
|
+
})(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n margin-top: ", ";\n overflow: hidden;\n opacity: ", ";\n visibility: ", ";\n transform: ", ";\n transition: all 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) {
|
|
3296
4450
|
var $isOpen = _a.$isOpen;
|
|
3297
4451
|
return $isOpen ? 1 : 0;
|
|
3298
4452
|
}, function (_a) {
|
|
@@ -3308,7 +4462,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3308
4462
|
},
|
|
3309
4463
|
displayName: "Dropdown__DropdownOption",
|
|
3310
4464
|
componentId: "sc-kz07c4-4"
|
|
3311
|
-
})(templateObject_5$
|
|
4465
|
+
})(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n width: 100%;\n display: block;\n padding: ", " ", ";\n background-color: ", ";\n border: none;\n font: ", ";\n color: ", ";\n text-align: left;\n cursor: pointer;\n transition: background-color 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) {
|
|
3312
4466
|
var $isSelected = _a.$isSelected,
|
|
3313
4467
|
$isFocused = _a.$isFocused;
|
|
3314
4468
|
if ($isFocused) return color.background.surface;
|
|
@@ -3318,7 +4472,7 @@ var DropdownOption = styled.button.withConfig({
|
|
|
3318
4472
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
3319
4473
|
displayName: "Dropdown__StyledHelperText",
|
|
3320
4474
|
componentId: "sc-kz07c4-5"
|
|
3321
|
-
})(templateObject_6$
|
|
4475
|
+
})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography.caption, function (_a) {
|
|
3322
4476
|
var $hasError = _a.$hasError;
|
|
3323
4477
|
return $hasError ? color.text.error : color.text.subdued;
|
|
3324
4478
|
}, spacing[2]);
|
|
@@ -3485,19 +4639,19 @@ var Dropdown = function Dropdown(_a) {
|
|
|
3485
4639
|
id: helperId
|
|
3486
4640
|
}, helperText));
|
|
3487
4641
|
};
|
|
3488
|
-
var templateObject_1$
|
|
4642
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$8;
|
|
3489
4643
|
|
|
3490
4644
|
React.createElement;
|
|
3491
|
-
var semantic$
|
|
4645
|
+
var semantic$8 = tokensData.semantic;
|
|
3492
4646
|
var StyledList = styled.ul.withConfig({
|
|
3493
4647
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3494
4648
|
return !prop.startsWith('$');
|
|
3495
4649
|
},
|
|
3496
4650
|
displayName: "List__StyledList",
|
|
3497
4651
|
componentId: "sc-1irksg5-0"
|
|
3498
|
-
})(templateObject_1$
|
|
4652
|
+
})(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n \n /* Divider styles */\n ", "\n"], ["\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n \n /* Divider styles */\n ", "\n"])), function (_a) {
|
|
3499
4653
|
var $dividers = _a.$dividers;
|
|
3500
|
-
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$
|
|
4654
|
+
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$8.color.border["default"], ";\n }\n ");
|
|
3501
4655
|
});
|
|
3502
4656
|
var List = function List(_a) {
|
|
3503
4657
|
var children = _a.children,
|
|
@@ -3517,23 +4671,23 @@ var List = function List(_a) {
|
|
|
3517
4671
|
}, props), children);
|
|
3518
4672
|
};
|
|
3519
4673
|
List.displayName = 'List';
|
|
3520
|
-
var templateObject_1$
|
|
4674
|
+
var templateObject_1$c;
|
|
3521
4675
|
|
|
3522
4676
|
React.createElement;
|
|
3523
|
-
var semantic$
|
|
3524
|
-
base$
|
|
4677
|
+
var semantic$7 = tokensData.semantic,
|
|
4678
|
+
base$7 = tokensData.base;
|
|
3525
4679
|
var StyledListItem = styled.li.withConfig({
|
|
3526
4680
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3527
4681
|
return !prop.startsWith('$');
|
|
3528
4682
|
},
|
|
3529
4683
|
displayName: "ListItem__StyledListItem",
|
|
3530
4684
|
componentId: "sc-1wzzt21-0"
|
|
3531
|
-
})(templateObject_1$
|
|
4685
|
+
})(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) {
|
|
3532
4686
|
var $interactive = _a.$interactive;
|
|
3533
4687
|
return $interactive && 'user-select: none;';
|
|
3534
4688
|
}, function (_a) {
|
|
3535
4689
|
var $disabled = _a.$disabled;
|
|
3536
|
-
return $disabled && "\n opacity: ".concat(base$
|
|
4690
|
+
return $disabled && "\n opacity: ".concat(base$7.opacity[50], ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
3537
4691
|
});
|
|
3538
4692
|
var StyledItemContent = styled.div.withConfig({
|
|
3539
4693
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3541,12 +4695,12 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
3541
4695
|
},
|
|
3542
4696
|
displayName: "ListItem__StyledItemContent",
|
|
3543
4697
|
componentId: "sc-1wzzt21-1"
|
|
3544
|
-
})(templateObject_2$
|
|
4698
|
+
})(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) {
|
|
3545
4699
|
var $spacing = _a.$spacing;
|
|
3546
|
-
return $spacing === 'compact' ? "".concat(semantic$
|
|
3547
|
-
}, base$
|
|
4700
|
+
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);
|
|
4701
|
+
}, base$7.border.radius[2], function (_a) {
|
|
3548
4702
|
var $selected = _a.$selected;
|
|
3549
|
-
return $selected ? semantic$
|
|
4703
|
+
return $selected ? semantic$7.color.background['interactive-subtle'] : 'transparent';
|
|
3550
4704
|
}, function (_a) {
|
|
3551
4705
|
var $interactive = _a.$interactive,
|
|
3552
4706
|
$disabled = _a.$disabled;
|
|
@@ -3558,26 +4712,26 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
3558
4712
|
$disabled = _a.$disabled,
|
|
3559
4713
|
$selected = _a.$selected;
|
|
3560
4714
|
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 ");
|
|
3561
|
-
}, semantic$
|
|
4715
|
+
}, semantic$7.color.border.interactive);
|
|
3562
4716
|
var StyledIconContainer = styled.div.withConfig({
|
|
3563
4717
|
displayName: "ListItem__StyledIconContainer",
|
|
3564
4718
|
componentId: "sc-1wzzt21-2"
|
|
3565
|
-
})(templateObject_3$
|
|
4719
|
+
})(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"])));
|
|
3566
4720
|
var StyledTextContent = styled.div.withConfig({
|
|
3567
4721
|
displayName: "ListItem__StyledTextContent",
|
|
3568
4722
|
componentId: "sc-1wzzt21-3"
|
|
3569
|
-
})(templateObject_4$
|
|
4723
|
+
})(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);
|
|
3570
4724
|
var StyledRightContent = styled.div.withConfig({
|
|
3571
4725
|
displayName: "ListItem__StyledRightContent",
|
|
3572
4726
|
componentId: "sc-1wzzt21-4"
|
|
3573
|
-
})(templateObject_5$
|
|
4727
|
+
})(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);
|
|
3574
4728
|
var StyledChevronIcon = styled.div.withConfig({
|
|
3575
4729
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3576
4730
|
return !prop.startsWith('$');
|
|
3577
4731
|
},
|
|
3578
4732
|
displayName: "ListItem__StyledChevronIcon",
|
|
3579
4733
|
componentId: "sc-1wzzt21-5"
|
|
3580
|
-
})(templateObject_6$
|
|
4734
|
+
})(templateObject_6$7 || (templateObject_6$7 = __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) {
|
|
3581
4735
|
var $expanded = _a.$expanded;
|
|
3582
4736
|
return $expanded ? '180deg' : '0deg';
|
|
3583
4737
|
});
|
|
@@ -3587,7 +4741,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
3587
4741
|
},
|
|
3588
4742
|
displayName: "ListItem__StyledExpandedContent",
|
|
3589
4743
|
componentId: "sc-1wzzt21-6"
|
|
3590
|
-
})(templateObject_7$
|
|
4744
|
+
})(templateObject_7$6 || (templateObject_7$6 = __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) {
|
|
3591
4745
|
var $expanded = _a.$expanded;
|
|
3592
4746
|
return $expanded ? '1000px' : '0';
|
|
3593
4747
|
}, function (_a) {
|
|
@@ -3596,7 +4750,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
3596
4750
|
}, function (_a) {
|
|
3597
4751
|
var $expanded = _a.$expanded,
|
|
3598
4752
|
$spacing = _a.$spacing;
|
|
3599
|
-
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$
|
|
4753
|
+
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 ");
|
|
3600
4754
|
});
|
|
3601
4755
|
var ListItem = function ListItem(_a) {
|
|
3602
4756
|
var primary = _a.primary,
|
|
@@ -3682,7 +4836,7 @@ var ListItem = function ListItem(_a) {
|
|
|
3682
4836
|
}, children));
|
|
3683
4837
|
};
|
|
3684
4838
|
ListItem.displayName = 'ListItem';
|
|
3685
|
-
var templateObject_1$
|
|
4839
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$7, templateObject_7$6;
|
|
3686
4840
|
|
|
3687
4841
|
var input = tokensData.component.input;
|
|
3688
4842
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -3691,7 +4845,7 @@ var StyledInputBase = styled.input.withConfig({
|
|
|
3691
4845
|
},
|
|
3692
4846
|
displayName: "InputBase__StyledInputBase",
|
|
3693
4847
|
componentId: "sc-1bpf4e8-0"
|
|
3694
|
-
})(templateObject_1$
|
|
4848
|
+
})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: ", ";\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"], ["\n /* Typography */\n font: ", ";\n color: ", ";\n \n /* Layout */\n width: 100%;\n padding: ", " ", ";\n \n /* Visual styling */\n background-color: ", ";\n \n border: ", " solid ", ";\n \n border-radius: ", ";\n \n /* Remove default appearance */\n appearance: none;\n outline: none;\n \n /* Transitions */\n transition: border-color 200ms ease-in-out, \n outline 200ms ease-in-out;\n \n /* Placeholder */\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n \n /* Focus state */\n &:focus {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n \n /* Hover state (only when not disabled) */\n &:hover:not(:disabled) {\n border-color: ", ";\n }\n \n /* Disabled state */\n &:disabled {\n cursor: ", ";\n }\n \n /* Remove number input spinners */\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n \n &[type='number'] {\n -moz-appearance: textfield;\n }\n"
|
|
3695
4849
|
/**
|
|
3696
4850
|
* Base styled textarea with shared styling
|
|
3697
4851
|
*/])), input["default"].font, function (_a) {
|
|
@@ -3722,40 +4876,40 @@ var StyledTextAreaBase = styled.textarea.withConfig({
|
|
|
3722
4876
|
},
|
|
3723
4877
|
displayName: "InputBase__StyledTextAreaBase",
|
|
3724
4878
|
componentId: "sc-1bpf4e8-1"
|
|
3725
|
-
})(templateObject_2$
|
|
3726
|
-
var templateObject_1$
|
|
4879
|
+
})(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"], ["\n /* Inherit all input base styles */\n ", "\n \n /* TextArea specific */\n min-height: 120px;\n resize: vertical;\n font-family: inherit;\n line-height: 1.5;\n"])), StyledInputBase);
|
|
4880
|
+
var templateObject_1$a, templateObject_2$9;
|
|
3727
4881
|
|
|
3728
4882
|
React.createElement;
|
|
3729
|
-
var semantic$
|
|
3730
|
-
base$
|
|
4883
|
+
var semantic$6 = tokensData.semantic,
|
|
4884
|
+
base$6 = tokensData.base;
|
|
3731
4885
|
var StyledFieldContainer$2 = styled.div.withConfig({
|
|
3732
4886
|
displayName: "NumberInput__StyledFieldContainer",
|
|
3733
4887
|
componentId: "sc-qotc3w-0"
|
|
3734
|
-
})(templateObject_1$
|
|
4888
|
+
})(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base$6.spacing[2]);
|
|
3735
4889
|
var StyledLabel$3 = styled.label.withConfig({
|
|
3736
4890
|
displayName: "NumberInput__StyledLabel",
|
|
3737
4891
|
componentId: "sc-qotc3w-1"
|
|
3738
|
-
})(templateObject_2$
|
|
4892
|
+
})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"])), base$6.spacing[1], semantic$6.typography.label, semantic$6.color.text["default"], semantic$6.color.text.disabled);
|
|
3739
4893
|
var StyledRequiredIndicator$2 = styled.span.withConfig({
|
|
3740
4894
|
displayName: "NumberInput__StyledRequiredIndicator",
|
|
3741
4895
|
componentId: "sc-qotc3w-2"
|
|
3742
|
-
})(templateObject_3$
|
|
3743
|
-
var StyledInputWrapper$
|
|
4896
|
+
})(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$6.color.text.error, base$6.fontWeight[5]);
|
|
4897
|
+
var StyledInputWrapper$2 = styled.div.withConfig({
|
|
3744
4898
|
displayName: "NumberInput__StyledInputWrapper",
|
|
3745
4899
|
componentId: "sc-qotc3w-3"
|
|
3746
|
-
})(templateObject_4$
|
|
4900
|
+
})(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n"])));
|
|
3747
4901
|
var StyledNumberInput = styled(StyledInputBase).withConfig({
|
|
3748
4902
|
displayName: "NumberInput__StyledNumberInput",
|
|
3749
4903
|
componentId: "sc-qotc3w-4"
|
|
3750
|
-
})(templateObject_5$
|
|
4904
|
+
})(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"], ["\n /* Add padding on the right to make room for stepper buttons */\n padding-right: ", ";\n"])), base$6.spacing[10]);
|
|
3751
4905
|
var StyledStepperContainer = styled.div.withConfig({
|
|
3752
4906
|
displayName: "NumberInput__StyledStepperContainer",
|
|
3753
4907
|
componentId: "sc-qotc3w-5"
|
|
3754
|
-
})(templateObject_6$
|
|
4908
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"], ["\n position: absolute;\n right: ", ";\n display: flex;\n flex-direction: row;\n gap: ", ";\n"])), base$6.spacing[2], base$6.spacing[2]);
|
|
3755
4909
|
var StyledHelperText$2 = styled.div.withConfig({
|
|
3756
4910
|
displayName: "NumberInput__StyledHelperText",
|
|
3757
4911
|
componentId: "sc-qotc3w-6"
|
|
3758
|
-
})(templateObject_7$
|
|
4912
|
+
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
3759
4913
|
/**
|
|
3760
4914
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
3761
4915
|
*
|
|
@@ -3778,9 +4932,9 @@ var StyledHelperText$2 = styled.div.withConfig({
|
|
|
3778
4932
|
* onChange={(newValue) => setValue(newValue)}
|
|
3779
4933
|
* />
|
|
3780
4934
|
* ```
|
|
3781
|
-
*/])), semantic$
|
|
4935
|
+
*/])), semantic$6.typography.small, function (_a) {
|
|
3782
4936
|
var $isError = _a.$isError;
|
|
3783
|
-
return $isError ? semantic$
|
|
4937
|
+
return $isError ? semantic$6.color.text.error : semantic$6.color.text.subdued;
|
|
3784
4938
|
});
|
|
3785
4939
|
/**
|
|
3786
4940
|
* NumberInput component for numeric input with stepper buttons and WCAG 2.2 AA compliance
|
|
@@ -3921,7 +5075,7 @@ var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
3921
5075
|
"data-disabled": disabled
|
|
3922
5076
|
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$2, {
|
|
3923
5077
|
"aria-label": "required"
|
|
3924
|
-
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$
|
|
5078
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$2, null, /*#__PURE__*/React.createElement(StyledNumberInput, _extends({
|
|
3925
5079
|
ref: ref,
|
|
3926
5080
|
id: id,
|
|
3927
5081
|
type: "text",
|
|
@@ -3970,7 +5124,7 @@ var NumberInput = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
3970
5124
|
}, error || helperText));
|
|
3971
5125
|
});
|
|
3972
5126
|
NumberInput.displayName = 'NumberInput';
|
|
3973
|
-
var templateObject_1$
|
|
5127
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$8, templateObject_4$7, templateObject_5$6, templateObject_6$6, templateObject_7$5;
|
|
3974
5128
|
|
|
3975
5129
|
React.createElement;
|
|
3976
5130
|
var PageTitleStyled = styled.div.withConfig({
|
|
@@ -3979,7 +5133,7 @@ var PageTitleStyled = styled.div.withConfig({
|
|
|
3979
5133
|
},
|
|
3980
5134
|
displayName: "PageTitle__PageTitleStyled",
|
|
3981
5135
|
componentId: "sc-16h256f-0"
|
|
3982
|
-
})(templateObject_1$
|
|
5136
|
+
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n margin-bottom: ", ";\n margin-top: ", ";\n"], ["\n margin-bottom: ", ";\n margin-top: ", ";\n"])), tokensData.base.spacing[6], function (_a) {
|
|
3983
5137
|
var $hasBackButton = _a.$hasBackButton;
|
|
3984
5138
|
return $hasBackButton ? tokensData.base.spacing[0] : tokensData.base.spacing[12];
|
|
3985
5139
|
});
|
|
@@ -4006,38 +5160,38 @@ var PageTitle = function PageTitle(_a) {
|
|
|
4006
5160
|
color: "subdued"
|
|
4007
5161
|
}, subtitle)));
|
|
4008
5162
|
};
|
|
4009
|
-
var templateObject_1$
|
|
5163
|
+
var templateObject_1$8;
|
|
4010
5164
|
|
|
4011
5165
|
React.createElement;
|
|
4012
|
-
var semantic$
|
|
4013
|
-
base$
|
|
5166
|
+
var semantic$5 = tokensData.semantic,
|
|
5167
|
+
base$5 = tokensData.base;
|
|
4014
5168
|
var StyledFieldContainer$1 = styled.div.withConfig({
|
|
4015
5169
|
displayName: "PasswordField__StyledFieldContainer",
|
|
4016
5170
|
componentId: "sc-1p15zk0-0"
|
|
4017
|
-
})(templateObject_1$
|
|
5171
|
+
})(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base$5.spacing[2]);
|
|
4018
5172
|
var StyledLabel$2 = styled.label.withConfig({
|
|
4019
5173
|
displayName: "PasswordField__StyledLabel",
|
|
4020
5174
|
componentId: "sc-1p15zk0-1"
|
|
4021
|
-
})(templateObject_2$
|
|
5175
|
+
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"])), base$5.spacing[1], semantic$5.typography.label, semantic$5.color.text["default"], semantic$5.color.text.disabled);
|
|
4022
5176
|
var StyledRequiredIndicator$1 = styled.span.withConfig({
|
|
4023
5177
|
displayName: "PasswordField__StyledRequiredIndicator",
|
|
4024
5178
|
componentId: "sc-1p15zk0-2"
|
|
4025
|
-
})(templateObject_3$
|
|
5179
|
+
})(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic$5.color.text.error, base$5.fontWeight[5]);
|
|
4026
5180
|
var StyledHelperText$1 = styled.div.withConfig({
|
|
4027
5181
|
displayName: "PasswordField__StyledHelperText",
|
|
4028
5182
|
componentId: "sc-1p15zk0-3"
|
|
4029
|
-
})(templateObject_4$
|
|
5183
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), semantic$5.typography.caption, function (_a) {
|
|
4030
5184
|
var $hasError = _a.$hasError;
|
|
4031
|
-
return $hasError ? semantic$
|
|
5185
|
+
return $hasError ? semantic$5.color.text.error : semantic$5.color.text.subdued;
|
|
4032
5186
|
});
|
|
4033
|
-
var StyledInputWrapper = styled.div.withConfig({
|
|
5187
|
+
var StyledInputWrapper$1 = styled.div.withConfig({
|
|
4034
5188
|
displayName: "PasswordField__StyledInputWrapper",
|
|
4035
5189
|
componentId: "sc-1p15zk0-4"
|
|
4036
|
-
})(templateObject_5$
|
|
5190
|
+
})(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
4037
5191
|
var StyledToggleButton = styled.div.withConfig({
|
|
4038
5192
|
displayName: "PasswordField__StyledToggleButton",
|
|
4039
5193
|
componentId: "sc-1p15zk0-5"
|
|
4040
|
-
})(templateObject_6$
|
|
5194
|
+
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n"], ["\n position: absolute;\n right: ", ";\n top: 50%;\n transform: translateY(-50%);\n"
|
|
4041
5195
|
/**
|
|
4042
5196
|
* PasswordField component for secure password input with visibility toggle
|
|
4043
5197
|
*
|
|
@@ -4049,7 +5203,7 @@ var StyledToggleButton = styled.div.withConfig({
|
|
|
4049
5203
|
* required
|
|
4050
5204
|
* />
|
|
4051
5205
|
* ```
|
|
4052
|
-
*/])), base$
|
|
5206
|
+
*/])), base$5.spacing[2]);
|
|
4053
5207
|
/**
|
|
4054
5208
|
* PasswordField component for secure password input with visibility toggle
|
|
4055
5209
|
*
|
|
@@ -4095,7 +5249,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
4095
5249
|
"data-disabled": disabled
|
|
4096
5250
|
}, label, required && /*#__PURE__*/React.createElement(StyledRequiredIndicator$1, {
|
|
4097
5251
|
"aria-label": "required"
|
|
4098
|
-
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper, null, /*#__PURE__*/React.createElement(StyledInputBase, _extends({
|
|
5252
|
+
}, "*")), /*#__PURE__*/React.createElement(StyledInputWrapper$1, null, /*#__PURE__*/React.createElement(StyledInputBase, _extends({
|
|
4099
5253
|
ref: ref,
|
|
4100
5254
|
id: id,
|
|
4101
5255
|
type: showPassword ? 'text' : 'password',
|
|
@@ -4130,27 +5284,364 @@ var PasswordField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
4130
5284
|
}, helperText));
|
|
4131
5285
|
});
|
|
4132
5286
|
PasswordField.displayName = 'PasswordField';
|
|
4133
|
-
var templateObject_1$
|
|
5287
|
+
var templateObject_1$7, templateObject_2$7, templateObject_3$7, templateObject_4$6, templateObject_5$5, templateObject_6$5;
|
|
4134
5288
|
|
|
4135
5289
|
React.createElement;
|
|
4136
|
-
var semantic$
|
|
4137
|
-
base$
|
|
5290
|
+
var semantic$4 = tokensData.semantic,
|
|
5291
|
+
base$4 = tokensData.base;
|
|
5292
|
+
var StyledSearchContainer = styled.div.withConfig({
|
|
5293
|
+
displayName: "SearchField__StyledSearchContainer",
|
|
5294
|
+
componentId: "sc-qhz9i8-0"
|
|
5295
|
+
})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
5296
|
+
var StyledInputWrapper = styled.div.withConfig({
|
|
5297
|
+
displayName: "SearchField__StyledInputWrapper",
|
|
5298
|
+
componentId: "sc-qhz9i8-1"
|
|
5299
|
+
})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n transition: ", ";\n \n ", "\n \n ", "\n \n &:hover:not(:disabled) {\n border-color: ", ";\n }\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], semantic$4.color.background.subtle, base$4.border.width[1], semantic$4.color.border["default"], base$4.border.radius[3], semantic$4.motion.hover, function (props) {
|
|
5300
|
+
return props.$isFocused && "\n border-color: ".concat(semantic$4.color.border.interactive, ";\n box-shadow: 0 0 0 ").concat(base$4.border.width[2], " ").concat(semantic$4.color.background['interactive-subtle'], ";\n ");
|
|
5301
|
+
}, function (props) {
|
|
5302
|
+
return props.$disabled && "\n background-color: ".concat(semantic$4.color.background.disabled, ";\n cursor: not-allowed;\n ");
|
|
5303
|
+
}, semantic$4.color.border.strong);
|
|
5304
|
+
var StyledInput = styled.input.withConfig({
|
|
5305
|
+
displayName: "SearchField__StyledInput",
|
|
5306
|
+
componentId: "sc-qhz9i8-2"
|
|
5307
|
+
})(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n flex: 1;\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n \n &::placeholder {\n color: ", ";\n }\n \n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n flex: 1;\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n \n &::placeholder {\n color: ", ";\n }\n \n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"])), semantic$4.typography.body, semantic$4.color.text["default"], semantic$4.color.text.subdued, semantic$4.color.text.disabled);
|
|
5308
|
+
var StyledClearButton = styled.button.withConfig({
|
|
5309
|
+
displayName: "SearchField__StyledClearButton",
|
|
5310
|
+
componentId: "sc-qhz9i8-3"
|
|
5311
|
+
})(templateObject_4$5 || (templateObject_4$5 = __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 \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\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 \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n"])), base$4.spacing[1], semantic$4.color.icon.subdued, base$4.border.radius[2], semantic$4.motion.hover, semantic$4.color.icon["default"], semantic$4.color.background.surface, base$4.border.width[2], semantic$4.color.border.strong, base$4.spacing[1]);
|
|
5312
|
+
var StyledSuggestionsList = styled.ul.withConfig({
|
|
5313
|
+
displayName: "SearchField__StyledSuggestionsList",
|
|
5314
|
+
componentId: "sc-qhz9i8-4"
|
|
5315
|
+
})(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: 300px;\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: 1000;\n"], ["\n position: absolute;\n top: calc(100% + ", ");\n left: 0;\n right: 0;\n max-height: 300px;\n overflow-y: auto;\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n list-style: none;\n padding: ", " 0;\n margin: 0;\n z-index: 1000;\n"])), base$4.spacing[1], semantic$4.color.background.subtle, base$4.border.width[1], semantic$4.color.border["default"], base$4.border.radius[3], base$4.shadow[3], base$4.spacing[1]);
|
|
5316
|
+
var StyledSuggestionItem = styled.li.withConfig({
|
|
5317
|
+
displayName: "SearchField__StyledSuggestionItem",
|
|
5318
|
+
componentId: "sc-qhz9i8-5"
|
|
5319
|
+
})(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n &:hover {\n background-color: ", ";\n }\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n cursor: pointer;\n transition: ", ";\n \n ", "\n \n &:hover {\n background-color: ", ";\n }\n \n ", "\n"])), base$4.spacing[2], base$4.spacing[2], base$4.spacing[3], semantic$4.motion.hover, function (props) {
|
|
5320
|
+
return props.$isHighlighted && "\n background-color: ".concat(semantic$4.color.background['interactive-subtle'], ";\n ");
|
|
5321
|
+
}, semantic$4.color.background['interactive-subtle'], function (props) {
|
|
5322
|
+
return props.$isRecent && "\n color: ".concat(semantic$4.color.text.subdued, ";\n ");
|
|
5323
|
+
});
|
|
5324
|
+
var StyledSectionHeader = styled.div.withConfig({
|
|
5325
|
+
displayName: "SearchField__StyledSectionHeader",
|
|
5326
|
+
componentId: "sc-qhz9i8-6"
|
|
5327
|
+
})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"], ["\n padding: ", " ", ";\n font: ", ";\n color: ", ";\n text-transform: uppercase;\n letter-spacing: ", ";\n"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.caption, semantic$4.color.text.subdued, base$4.letterSpacing[4]);
|
|
5328
|
+
var StyledClearRecent = styled.button.withConfig({
|
|
5329
|
+
displayName: "SearchField__StyledClearRecent",
|
|
5330
|
+
componentId: "sc-qhz9i8-7"
|
|
5331
|
+
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n cursor: pointer;\n width: 100%;\n text-align: left;\n transition: ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n"], ["\n padding: ", " ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n cursor: pointer;\n width: 100%;\n text-align: left;\n transition: ", ";\n \n &:hover {\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: -", ";\n }\n"])), base$4.spacing[2], base$4.spacing[3], semantic$4.typography.small, semantic$4.color.text.interactive, semantic$4.motion.hover, semantic$4.color.background['interactive-subtle'], base$4.border.width[2], semantic$4.color.border.strong, base$4.spacing[1]);
|
|
5332
|
+
var debounce = function debounce(func, wait) {
|
|
5333
|
+
var timeout = null;
|
|
5334
|
+
return function () {
|
|
5335
|
+
var args = [];
|
|
5336
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
5337
|
+
args[_i] = arguments[_i];
|
|
5338
|
+
}
|
|
5339
|
+
if (timeout) clearTimeout(timeout);
|
|
5340
|
+
timeout = setTimeout(function () {
|
|
5341
|
+
return func.apply(void 0, args);
|
|
5342
|
+
}, wait);
|
|
5343
|
+
};
|
|
5344
|
+
};
|
|
5345
|
+
/**
|
|
5346
|
+
* SearchField component with autocomplete and recent searches
|
|
5347
|
+
*
|
|
5348
|
+
* Provides intelligent search with debouncing, keyboard navigation,
|
|
5349
|
+
* suggestions, and recent search history. Fully accessible with ARIA.
|
|
5350
|
+
*
|
|
5351
|
+
* @example
|
|
5352
|
+
* ```tsx
|
|
5353
|
+
* const [search, setSearch] = useState('')
|
|
5354
|
+
* const [suggestions] = useState([
|
|
5355
|
+
* { id: '1', label: 'Apple', category: 'Fruit' },
|
|
5356
|
+
* { id: '2', label: 'Banana', category: 'Fruit' }
|
|
5357
|
+
* ])
|
|
5358
|
+
*
|
|
5359
|
+
* <SearchField
|
|
5360
|
+
* value={search}
|
|
5361
|
+
* onChange={setSearch}
|
|
5362
|
+
* suggestions={suggestions}
|
|
5363
|
+
* recentSearches={['coffee', 'tea']}
|
|
5364
|
+
* onSuggestionSelect={(item) => console.log('Selected:', item)}
|
|
5365
|
+
* />
|
|
5366
|
+
* ```
|
|
5367
|
+
*/
|
|
5368
|
+
var SearchField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
5369
|
+
var value = _a.value,
|
|
5370
|
+
onChange = _a.onChange,
|
|
5371
|
+
_b = _a.suggestions,
|
|
5372
|
+
suggestions = _b === void 0 ? [] : _b,
|
|
5373
|
+
_c = _a.showRecentSearches,
|
|
5374
|
+
showRecentSearches = _c === void 0 ? true : _c,
|
|
5375
|
+
_d = _a.recentSearches,
|
|
5376
|
+
recentSearches = _d === void 0 ? [] : _d,
|
|
5377
|
+
onSuggestionSelect = _a.onSuggestionSelect,
|
|
5378
|
+
onClearRecentSearches = _a.onClearRecentSearches,
|
|
5379
|
+
_e = _a.debounceMs,
|
|
5380
|
+
debounceMs = _e === void 0 ? 300 : _e,
|
|
5381
|
+
_f = _a.placeholder,
|
|
5382
|
+
placeholder = _f === void 0 ? 'Search...' : _f,
|
|
5383
|
+
_g = _a.disabled,
|
|
5384
|
+
disabled = _g === void 0 ? false : _g,
|
|
5385
|
+
_h = _a.loading,
|
|
5386
|
+
loading = _h === void 0 ? false : _h,
|
|
5387
|
+
_j = _a["aria-label"],
|
|
5388
|
+
ariaLabel = _j === void 0 ? 'Search' : _j,
|
|
5389
|
+
dataTestId = _a["data-testid"],
|
|
5390
|
+
inputProps = __rest(_a, ["value", "onChange", "suggestions", "showRecentSearches", "recentSearches", "onSuggestionSelect", "onClearRecentSearches", "debounceMs", "placeholder", "disabled", "loading", 'aria-label', 'data-testid']);
|
|
5391
|
+
var _k = useState(false),
|
|
5392
|
+
isFocused = _k[0],
|
|
5393
|
+
setIsFocused = _k[1];
|
|
5394
|
+
var _l = useState(false),
|
|
5395
|
+
showSuggestions = _l[0],
|
|
5396
|
+
setShowSuggestions = _l[1];
|
|
5397
|
+
var _m = useState(-1),
|
|
5398
|
+
highlightedIndex = _m[0],
|
|
5399
|
+
setHighlightedIndex = _m[1];
|
|
5400
|
+
var _o = useState(value);
|
|
5401
|
+
_o[0];
|
|
5402
|
+
var setDebouncedValue = _o[1];
|
|
5403
|
+
var inputRef = useRef(null);
|
|
5404
|
+
var listRef = useRef(null);
|
|
5405
|
+
// Combine refs
|
|
5406
|
+
useEffect(function () {
|
|
5407
|
+
if (ref) {
|
|
5408
|
+
if (typeof ref === 'function') {
|
|
5409
|
+
ref(inputRef.current);
|
|
5410
|
+
} else {
|
|
5411
|
+
ref.current = inputRef.current;
|
|
5412
|
+
}
|
|
5413
|
+
}
|
|
5414
|
+
}, [ref]);
|
|
5415
|
+
// Debounced search
|
|
5416
|
+
var debouncedOnChange = useMemo(function () {
|
|
5417
|
+
return debounce(function (newValue) {
|
|
5418
|
+
setDebouncedValue(newValue);
|
|
5419
|
+
}, debounceMs);
|
|
5420
|
+
}, [debounceMs]);
|
|
5421
|
+
useEffect(function () {
|
|
5422
|
+
debouncedOnChange(value);
|
|
5423
|
+
}, [value, debouncedOnChange]);
|
|
5424
|
+
// Combined list of suggestions and recent searches
|
|
5425
|
+
var displayItems = useMemo(function () {
|
|
5426
|
+
var items = [];
|
|
5427
|
+
if (value.trim()) {
|
|
5428
|
+
// Show matching suggestions
|
|
5429
|
+
suggestions.forEach(function (s) {
|
|
5430
|
+
return items.push({
|
|
5431
|
+
type: 'suggestion',
|
|
5432
|
+
data: s
|
|
5433
|
+
});
|
|
5434
|
+
});
|
|
5435
|
+
} else if (showRecentSearches && recentSearches.length > 0) {
|
|
5436
|
+
// Show recent searches when empty
|
|
5437
|
+
recentSearches.forEach(function (r) {
|
|
5438
|
+
return items.push({
|
|
5439
|
+
type: 'recent',
|
|
5440
|
+
data: r
|
|
5441
|
+
});
|
|
5442
|
+
});
|
|
5443
|
+
if (onClearRecentSearches) {
|
|
5444
|
+
items.push({
|
|
5445
|
+
type: 'clear',
|
|
5446
|
+
data: 'clear'
|
|
5447
|
+
});
|
|
5448
|
+
}
|
|
5449
|
+
}
|
|
5450
|
+
return items;
|
|
5451
|
+
}, [value, suggestions, recentSearches, showRecentSearches, onClearRecentSearches]);
|
|
5452
|
+
var handleInputChange = function handleInputChange(e) {
|
|
5453
|
+
var newValue = e.target.value;
|
|
5454
|
+
onChange(newValue);
|
|
5455
|
+
setShowSuggestions(true);
|
|
5456
|
+
setHighlightedIndex(-1);
|
|
5457
|
+
};
|
|
5458
|
+
var handleFocus = function handleFocus(e) {
|
|
5459
|
+
var _a;
|
|
5460
|
+
setIsFocused(true);
|
|
5461
|
+
setShowSuggestions(true);
|
|
5462
|
+
(_a = inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
|
|
5463
|
+
};
|
|
5464
|
+
var handleBlur = function handleBlur(e) {
|
|
5465
|
+
var _a;
|
|
5466
|
+
// Delay to allow click events on suggestions
|
|
5467
|
+
setTimeout(function () {
|
|
5468
|
+
setIsFocused(false);
|
|
5469
|
+
setShowSuggestions(false);
|
|
5470
|
+
setHighlightedIndex(-1);
|
|
5471
|
+
}, 200);
|
|
5472
|
+
(_a = inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
|
|
5473
|
+
};
|
|
5474
|
+
var handleSuggestionClick = function handleSuggestionClick(item) {
|
|
5475
|
+
var _a;
|
|
5476
|
+
if (item.type === 'clear') {
|
|
5477
|
+
onClearRecentSearches === null || onClearRecentSearches === void 0 ? void 0 : onClearRecentSearches();
|
|
5478
|
+
return;
|
|
5479
|
+
}
|
|
5480
|
+
var suggestion = item.data;
|
|
5481
|
+
if (typeof suggestion === 'string') {
|
|
5482
|
+
onChange(suggestion);
|
|
5483
|
+
onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(suggestion);
|
|
5484
|
+
} else {
|
|
5485
|
+
onChange(suggestion.label);
|
|
5486
|
+
onSuggestionSelect === null || onSuggestionSelect === void 0 ? void 0 : onSuggestionSelect(suggestion);
|
|
5487
|
+
}
|
|
5488
|
+
setShowSuggestions(false);
|
|
5489
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
5490
|
+
};
|
|
5491
|
+
var handleClear = function handleClear() {
|
|
5492
|
+
var _a;
|
|
5493
|
+
onChange('');
|
|
5494
|
+
setShowSuggestions(false);
|
|
5495
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
5496
|
+
};
|
|
5497
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
5498
|
+
var _a;
|
|
5499
|
+
if (!showSuggestions || displayItems.length === 0) return;
|
|
5500
|
+
switch (e.key) {
|
|
5501
|
+
case 'ArrowDown':
|
|
5502
|
+
e.preventDefault();
|
|
5503
|
+
setHighlightedIndex(function (prev) {
|
|
5504
|
+
return prev < displayItems.length - 1 ? prev + 1 : prev;
|
|
5505
|
+
});
|
|
5506
|
+
break;
|
|
5507
|
+
case 'ArrowUp':
|
|
5508
|
+
e.preventDefault();
|
|
5509
|
+
setHighlightedIndex(function (prev) {
|
|
5510
|
+
return prev > 0 ? prev - 1 : -1;
|
|
5511
|
+
});
|
|
5512
|
+
break;
|
|
5513
|
+
case 'Enter':
|
|
5514
|
+
e.preventDefault();
|
|
5515
|
+
if (highlightedIndex >= 0 && highlightedIndex < displayItems.length) {
|
|
5516
|
+
handleSuggestionClick(displayItems[highlightedIndex]);
|
|
5517
|
+
}
|
|
5518
|
+
break;
|
|
5519
|
+
case 'Escape':
|
|
5520
|
+
e.preventDefault();
|
|
5521
|
+
setShowSuggestions(false);
|
|
5522
|
+
setHighlightedIndex(-1);
|
|
5523
|
+
break;
|
|
5524
|
+
}
|
|
5525
|
+
(_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
|
|
5526
|
+
};
|
|
5527
|
+
// Scroll highlighted item into view
|
|
5528
|
+
useEffect(function () {
|
|
5529
|
+
var _a;
|
|
5530
|
+
if (highlightedIndex >= 0 && listRef.current) {
|
|
5531
|
+
var items = listRef.current.querySelectorAll('li');
|
|
5532
|
+
(_a = items[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
5533
|
+
block: 'nearest'
|
|
5534
|
+
});
|
|
5535
|
+
}
|
|
5536
|
+
}, [highlightedIndex]);
|
|
5537
|
+
var showClearButton = value.length > 0 && !disabled;
|
|
5538
|
+
var hasItems = displayItems.length > 0;
|
|
5539
|
+
return /*#__PURE__*/React.createElement(StyledSearchContainer, {
|
|
5540
|
+
$isFocused: isFocused,
|
|
5541
|
+
$disabled: disabled,
|
|
5542
|
+
"data-testid": dataTestId
|
|
5543
|
+
}, /*#__PURE__*/React.createElement(StyledInputWrapper, {
|
|
5544
|
+
$isFocused: isFocused,
|
|
5545
|
+
$disabled: disabled
|
|
5546
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
5547
|
+
name: "search",
|
|
5548
|
+
size: "sm",
|
|
5549
|
+
iconColor: "subdued",
|
|
5550
|
+
"aria-hidden": "true"
|
|
5551
|
+
}), /*#__PURE__*/React.createElement(StyledInput, _extends({
|
|
5552
|
+
ref: inputRef,
|
|
5553
|
+
type: "text",
|
|
5554
|
+
value: value,
|
|
5555
|
+
onChange: handleInputChange,
|
|
5556
|
+
onFocus: handleFocus,
|
|
5557
|
+
onBlur: handleBlur,
|
|
5558
|
+
onKeyDown: handleKeyDown,
|
|
5559
|
+
placeholder: placeholder,
|
|
5560
|
+
disabled: disabled,
|
|
5561
|
+
"aria-label": ariaLabel,
|
|
5562
|
+
"aria-autocomplete": "list",
|
|
5563
|
+
"aria-controls": showSuggestions && hasItems ? 'search-suggestions' : undefined,
|
|
5564
|
+
"aria-expanded": showSuggestions && hasItems,
|
|
5565
|
+
"aria-activedescendant": highlightedIndex >= 0 ? "suggestion-".concat(highlightedIndex) : undefined,
|
|
5566
|
+
role: "combobox"
|
|
5567
|
+
}, inputProps)), loading && /*#__PURE__*/React.createElement(Icon, {
|
|
5568
|
+
name: "refresh",
|
|
5569
|
+
size: "sm",
|
|
5570
|
+
iconColor: "subdued",
|
|
5571
|
+
"aria-label": "Loading"
|
|
5572
|
+
}), showClearButton && /*#__PURE__*/React.createElement(StyledClearButton, {
|
|
5573
|
+
type: "button",
|
|
5574
|
+
onClick: handleClear,
|
|
5575
|
+
"aria-label": "Clear search",
|
|
5576
|
+
tabIndex: -1
|
|
5577
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
5578
|
+
name: "close",
|
|
5579
|
+
size: "xs"
|
|
5580
|
+
}))), showSuggestions && hasItems && /*#__PURE__*/React.createElement(StyledSuggestionsList, {
|
|
5581
|
+
ref: listRef,
|
|
5582
|
+
id: "search-suggestions",
|
|
5583
|
+
role: "listbox"
|
|
5584
|
+
}, !value.trim() && showRecentSearches && recentSearches.length > 0 && /*#__PURE__*/React.createElement(StyledSectionHeader, null, "Recent Searches"), displayItems.map(function (item, index) {
|
|
5585
|
+
if (item.type === 'clear') {
|
|
5586
|
+
return /*#__PURE__*/React.createElement(StyledClearRecent, {
|
|
5587
|
+
key: "clear",
|
|
5588
|
+
type: "button",
|
|
5589
|
+
onClick: function onClick() {
|
|
5590
|
+
return handleSuggestionClick(item);
|
|
5591
|
+
}
|
|
5592
|
+
}, "Clear recent searches");
|
|
5593
|
+
}
|
|
5594
|
+
var suggestion = item.data;
|
|
5595
|
+
var isString = typeof suggestion === 'string';
|
|
5596
|
+
var label = isString ? suggestion : suggestion.label;
|
|
5597
|
+
var description = !isString ? suggestion.description : undefined;
|
|
5598
|
+
return /*#__PURE__*/React.createElement(StyledSuggestionItem, {
|
|
5599
|
+
key: isString ? suggestion : suggestion.id,
|
|
5600
|
+
id: "suggestion-".concat(index),
|
|
5601
|
+
role: "option",
|
|
5602
|
+
"aria-selected": index === highlightedIndex,
|
|
5603
|
+
$isHighlighted: index === highlightedIndex,
|
|
5604
|
+
$isRecent: item.type === 'recent',
|
|
5605
|
+
onClick: function onClick() {
|
|
5606
|
+
return handleSuggestionClick(item);
|
|
5607
|
+
}
|
|
5608
|
+
}, item.type === 'recent' && /*#__PURE__*/React.createElement(Icon, {
|
|
5609
|
+
name: "refresh",
|
|
5610
|
+
size: "xs",
|
|
5611
|
+
"aria-hidden": "true"
|
|
5612
|
+
}), /*#__PURE__*/React.createElement(Stack, {
|
|
5613
|
+
direction: "column",
|
|
5614
|
+
gap: "none"
|
|
5615
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
5616
|
+
variant: "body"
|
|
5617
|
+
}, label), description && /*#__PURE__*/React.createElement(Typography, {
|
|
5618
|
+
variant: "caption",
|
|
5619
|
+
color: "subdued"
|
|
5620
|
+
}, description)));
|
|
5621
|
+
})));
|
|
5622
|
+
});
|
|
5623
|
+
SearchField.displayName = 'SearchField';
|
|
5624
|
+
var templateObject_1$6, templateObject_2$6, templateObject_3$6, templateObject_4$5, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4;
|
|
5625
|
+
|
|
5626
|
+
React.createElement;
|
|
5627
|
+
var semantic$3 = tokensData.semantic,
|
|
5628
|
+
base$3 = tokensData.base;
|
|
4138
5629
|
// Fade in animation for overlay
|
|
4139
|
-
var fadeIn = keyframes(templateObject_1$
|
|
5630
|
+
var fadeIn = keyframes(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"
|
|
4140
5631
|
// Slide animations for each position
|
|
4141
5632
|
])));
|
|
4142
5633
|
// Slide animations for each position
|
|
4143
|
-
var slideInRight = keyframes(templateObject_2$
|
|
4144
|
-
var slideInLeft = keyframes(templateObject_3$
|
|
4145
|
-
var slideInTop = keyframes(templateObject_4$
|
|
4146
|
-
var slideInBottom = keyframes(templateObject_5$
|
|
5634
|
+
var slideInRight = keyframes(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n"], ["\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n"])));
|
|
5635
|
+
var slideInLeft = keyframes(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n"], ["\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n"])));
|
|
5636
|
+
var slideInTop = keyframes(templateObject_4$4 || (templateObject_4$4 = __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"])));
|
|
5637
|
+
var slideInBottom = keyframes(templateObject_5$3 || (templateObject_5$3 = __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"])));
|
|
4147
5638
|
var StyledOverlay = styled.div.withConfig({
|
|
4148
5639
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4149
5640
|
return !prop.startsWith('$');
|
|
4150
5641
|
},
|
|
4151
5642
|
displayName: "Sheet__StyledOverlay",
|
|
4152
5643
|
componentId: "sc-8abisx-0"
|
|
4153
|
-
})(templateObject_7$
|
|
5644
|
+
})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n ", "\n display: ", ";\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 1000;\n ", "\n display: ", ";\n"])), css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["animation: ", " 200ms ease-in-out;"], ["animation: ", " 200ms ease-in-out;"])), fadeIn), function (_a) {
|
|
4154
5645
|
var $isOpen = _a.$isOpen;
|
|
4155
5646
|
return $isOpen ? 'block' : 'none';
|
|
4156
5647
|
});
|
|
@@ -4160,25 +5651,25 @@ var StyledSheet = styled.div.withConfig({
|
|
|
4160
5651
|
},
|
|
4161
5652
|
displayName: "Sheet__StyledSheet",
|
|
4162
5653
|
componentId: "sc-8abisx-1"
|
|
4163
|
-
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"], ["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), semantic$
|
|
5654
|
+
})(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"], ["\n position: fixed;\n background-color: ", ";\n box-shadow: ", ";\n z-index: 1001;\n overflow-y: auto;\n \n /* Position-specific styles */\n ", "\n \n /* Focus trap styling */\n &:focus {\n outline: none;\n }\n \n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), semantic$3.color.background["default"], base$3.shadow[4], function (_a) {
|
|
4164
5655
|
var $position = _a.$position,
|
|
4165
5656
|
$variant = _a.$variant,
|
|
4166
5657
|
$width = _a.$width,
|
|
4167
5658
|
$height = _a.$height;
|
|
4168
5659
|
var isDrawer = $variant === 'drawer';
|
|
4169
|
-
var margin = isDrawer ? base$
|
|
4170
|
-
var borderRadius = isDrawer ? base$
|
|
5660
|
+
var margin = isDrawer ? base$3.spacing[4] : '0';
|
|
5661
|
+
var borderRadius = isDrawer ? base$3.border.radius[3] : '0';
|
|
4171
5662
|
switch ($position) {
|
|
4172
5663
|
case 'right':
|
|
4173
|
-
return css(templateObject_8$
|
|
5664
|
+
return css(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n top: ", ";\n right: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: ", " 0 0 ", ";\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n right: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: ", " 0 0 ", ";\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $width, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInRight);
|
|
4174
5665
|
case 'left':
|
|
4175
|
-
return css(templateObject_9$
|
|
5666
|
+
return css(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: 0 ", " ", " 0;\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n left: ", ";\n bottom: ", ";\n width: ", ";\n max-width: calc(100vw - ", ");\n border-radius: 0 ", " ", " 0;\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $width, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInLeft);
|
|
4176
5667
|
case 'top':
|
|
4177
|
-
return css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$
|
|
5668
|
+
return css(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "], ["\n top: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: 0 0 ", " ", ";\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInTop);
|
|
4178
5669
|
case 'bottom':
|
|
4179
|
-
return css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "], ["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$
|
|
5670
|
+
return css(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "], ["\n bottom: ", ";\n left: ", ";\n right: ", ";\n height: ", ";\n max-height: calc(100vh - ", ");\n border-radius: ", " ", " 0 0;\n animation: ", " 200ms ease-in-out;\n "])), margin, margin, margin, $height, isDrawer ? "".concat(base$3.spacing[4], " * 2") : '0px', borderRadius, borderRadius, slideInBottom);
|
|
4180
5671
|
}
|
|
4181
|
-
}, base$
|
|
5672
|
+
}, base$3.spacing[2], semantic$3.color.background.subtle, semantic$3.color.border["default"], base$3.border.radius.circle, semantic$3.color.border.strong);
|
|
4182
5673
|
var StyledSheetContent = styled.div.withConfig({
|
|
4183
5674
|
displayName: "Sheet__StyledSheetContent",
|
|
4184
5675
|
componentId: "sc-8abisx-2"
|
|
@@ -4208,7 +5699,7 @@ var StyledSheetContent = styled.div.withConfig({
|
|
|
4208
5699
|
* <h2>Mobile Menu</h2>
|
|
4209
5700
|
* </Sheet>
|
|
4210
5701
|
* ```
|
|
4211
|
-
*/])), base$
|
|
5702
|
+
*/])), base$3.spacing[6]);
|
|
4212
5703
|
/**
|
|
4213
5704
|
* Sheet component for side panels and drawers
|
|
4214
5705
|
*
|
|
@@ -4331,70 +5822,70 @@ var Sheet = function Sheet(_a) {
|
|
|
4331
5822
|
}, /*#__PURE__*/React.createElement(StyledSheetContent, null, children)));
|
|
4332
5823
|
};
|
|
4333
5824
|
Sheet.displayName = 'Sheet';
|
|
4334
|
-
var templateObject_1$
|
|
5825
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$2, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1;
|
|
4335
5826
|
|
|
4336
5827
|
React.createElement;
|
|
4337
|
-
var semantic$
|
|
4338
|
-
base$
|
|
5828
|
+
var semantic$2 = tokensData.semantic,
|
|
5829
|
+
base$2 = tokensData.base;
|
|
4339
5830
|
var StyledSliderContainer = styled.div.withConfig({
|
|
4340
5831
|
displayName: "Slider__StyledSliderContainer",
|
|
4341
5832
|
componentId: "sc-6mh2d4-0"
|
|
4342
|
-
})(templateObject_1$
|
|
5833
|
+
})(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap:0;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap:0;\n width: 100%;\n"])));
|
|
4343
5834
|
var StyledLabel$1 = styled.label.withConfig({
|
|
4344
5835
|
displayName: "Slider__StyledLabel",
|
|
4345
5836
|
componentId: "sc-6mh2d4-1"
|
|
4346
|
-
})(templateObject_2$
|
|
5837
|
+
})(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-bottom: ", ";\n"])), semantic$2.typography.label, function (_a) {
|
|
4347
5838
|
var $disabled = _a.$disabled;
|
|
4348
|
-
return $disabled ? semantic$
|
|
4349
|
-
}, semantic$
|
|
5839
|
+
return $disabled ? semantic$2.color.text.disabled : semantic$2.color.text["default"];
|
|
5840
|
+
}, semantic$2.spacing.layout.lg);
|
|
4350
5841
|
var StyledSliderTrackContainer = styled.div.withConfig({
|
|
4351
5842
|
displayName: "Slider__StyledSliderTrackContainer",
|
|
4352
5843
|
componentId: "sc-6mh2d4-2"
|
|
4353
|
-
})(templateObject_3$
|
|
5844
|
+
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"], ["\n position: relative;\n width: 100%;\n height: ", ";\n display: flex;\n align-items: center;\n"])), base$2.spacing[10]);
|
|
4354
5845
|
var StyledTrack = styled.div.withConfig({
|
|
4355
5846
|
displayName: "Slider__StyledTrack",
|
|
4356
5847
|
componentId: "sc-6mh2d4-3"
|
|
4357
|
-
})(templateObject_4$
|
|
5848
|
+
})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n cursor: ", ";\n"], ["\n position: relative;\n width: 100%;\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n cursor: ", ";\n"])), base$2.spacing[1], function (_a) {
|
|
4358
5849
|
var $disabled = _a.$disabled;
|
|
4359
|
-
return $disabled ? semantic$
|
|
4360
|
-
}, base$
|
|
5850
|
+
return $disabled ? semantic$2.color.background.disabled : semantic$2.color.border["default"];
|
|
5851
|
+
}, base$2.border.radius.circle, function (_a) {
|
|
4361
5852
|
var $disabled = _a.$disabled;
|
|
4362
5853
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
4363
5854
|
});
|
|
4364
5855
|
var StyledTrackFill = styled.div.withConfig({
|
|
4365
5856
|
displayName: "Slider__StyledTrackFill",
|
|
4366
5857
|
componentId: "sc-6mh2d4-4"
|
|
4367
|
-
})(templateObject_5$
|
|
5858
|
+
})(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"], ["\n position: absolute;\n height: 100%;\n background-color: ", ";\n border-radius: ", ";\n pointer-events: none;\n"])), function (_a) {
|
|
4368
5859
|
var $disabled = _a.$disabled;
|
|
4369
|
-
return $disabled ? semantic$
|
|
4370
|
-
}, base$
|
|
5860
|
+
return $disabled ? semantic$2.color.border["default"] : semantic$2.color.background.emphasis;
|
|
5861
|
+
}, base$2.border.radius.circle);
|
|
4371
5862
|
var StyledThumb = styled.div.withConfig({
|
|
4372
5863
|
displayName: "Slider__StyledThumb",
|
|
4373
5864
|
componentId: "sc-6mh2d4-5"
|
|
4374
|
-
})(templateObject_6$
|
|
5865
|
+
})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"], ["\n position: absolute;\n width: ", ";\n height: ", ";\n top: -", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n cursor: ", ";\n transform: translateX(-50%);\n transition: ", ";\n box-shadow: ", ";\n \n &:hover:not([aria-disabled=\"true\"]) {\n transform: translateX(-50%) scale(1.1);\n box-shadow: ", ";\n }\n \n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n }\n \n &:active:not([aria-disabled=\"true\"]) {\n cursor: grabbing;\n transform: translateX(-50%) scale(0.95);\n }\n \n ", "\n"])), base$2.spacing[5], base$2.spacing[5], semantic$2.spacing.layout.sm, function (_a) {
|
|
4375
5866
|
var $disabled = _a.$disabled;
|
|
4376
|
-
return $disabled ? semantic$
|
|
4377
|
-
}, base$
|
|
5867
|
+
return $disabled ? semantic$2.color.background.disabled : semantic$2.color.background.subtle;
|
|
5868
|
+
}, base$2.border.width[2], function (_a) {
|
|
4378
5869
|
var $disabled = _a.$disabled;
|
|
4379
|
-
return $disabled ? semantic$
|
|
4380
|
-
}, base$
|
|
5870
|
+
return $disabled ? semantic$2.color.border["default"] : semantic$2.color.background.emphasis;
|
|
5871
|
+
}, base$2.border.radius.circle, function (_a) {
|
|
4381
5872
|
var $disabled = _a.$disabled;
|
|
4382
5873
|
return $disabled ? 'not-allowed' : 'grab';
|
|
4383
|
-
}, semantic$
|
|
5874
|
+
}, semantic$2.motion.transition.fast, base$2.shadow[2], base$2.shadow[3], base$2.border.width[2], semantic$2.color.border.interactive, base$2.spacing[1], function (_a) {
|
|
4384
5875
|
var $active = _a.$active;
|
|
4385
|
-
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(base$
|
|
5876
|
+
return $active && "\n transform: translateX(-50%) scale(1.1);\n box-shadow: ".concat(base$2.shadow[4], ";\n ");
|
|
4386
5877
|
});
|
|
4387
5878
|
var StyledValueLabel = styled.div.withConfig({
|
|
4388
5879
|
displayName: "Slider__StyledValueLabel",
|
|
4389
5880
|
componentId: "sc-6mh2d4-6"
|
|
4390
|
-
})(templateObject_7$
|
|
5881
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"], ["\n position: absolute;\n top: -", ";\n left: ", ";\n transform: translateX(-50%);\n padding: ", " ", ";\n background-color: ", ";\n color: ", ";\n font: ", ";\n border-radius: ", ";\n white-space: nowrap;\n pointer-events: none;\n opacity: ", ";\n \n &::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: ", " solid transparent;\n border-right: ", " solid transparent;\n border-top: ", " solid ", ";\n }\n"])), base$2.spacing[8], semantic$2.spacing.layout.sm, base$2.spacing[1], base$2.spacing[2], semantic$2.color.background.emphasis, semantic$2.color.text.inverse, semantic$2.typography.caption, base$2.border.radius[2], function (_a) {
|
|
4391
5882
|
var $disabled = _a.$disabled;
|
|
4392
|
-
return $disabled ? base$
|
|
4393
|
-
}, base$
|
|
5883
|
+
return $disabled ? base$2.opacity[50] : base$2.opacity[100];
|
|
5884
|
+
}, base$2.spacing[1], base$2.spacing[1], base$2.spacing[1], semantic$2.color.background.emphasis);
|
|
4394
5885
|
var StyledMinMaxLabels = styled.div.withConfig({
|
|
4395
5886
|
displayName: "Slider__StyledMinMaxLabels",
|
|
4396
5887
|
componentId: "sc-6mh2d4-7"
|
|
4397
|
-
})(templateObject_8$
|
|
5888
|
+
})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"
|
|
4398
5889
|
/**
|
|
4399
5890
|
* Slider component for single value or range selection
|
|
4400
5891
|
*
|
|
@@ -4418,7 +5909,7 @@ var StyledMinMaxLabels = styled.div.withConfig({
|
|
|
4418
5909
|
* onRangeChange={(values) => console.log(values)}
|
|
4419
5910
|
* />
|
|
4420
5911
|
* ```
|
|
4421
|
-
*/])), semantic$
|
|
5912
|
+
*/])), semantic$2.typography.body, semantic$2.color.text.subdued, base$2.spacing[1]);
|
|
4422
5913
|
/**
|
|
4423
5914
|
* Slider component for single value or range selection
|
|
4424
5915
|
*
|
|
@@ -4719,7 +6210,225 @@ var Slider = function Slider(_a) {
|
|
|
4719
6210
|
}, formatValue(currentValue))))), /*#__PURE__*/React.createElement(StyledMinMaxLabels, null, /*#__PURE__*/React.createElement("span", null, formatValue(min)), /*#__PURE__*/React.createElement("span", null, formatValue(max))));
|
|
4720
6211
|
};
|
|
4721
6212
|
Slider.displayName = 'Slider';
|
|
4722
|
-
var templateObject_1$
|
|
6213
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
6214
|
+
|
|
6215
|
+
React.createElement;
|
|
6216
|
+
var semantic$1 = tokensData.semantic,
|
|
6217
|
+
base$1 = tokensData.base;
|
|
6218
|
+
var StyledTabList = styled.div.withConfig({
|
|
6219
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6220
|
+
return !prop.startsWith('$');
|
|
6221
|
+
},
|
|
6222
|
+
displayName: "TabBar__StyledTabList",
|
|
6223
|
+
componentId: "sc-1g9ib0y-0"
|
|
6224
|
+
})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n border-bottom: ", ";\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n \n &::-webkit-scrollbar {\n height: 4px;\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n border-bottom: ", ";\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n \n &::-webkit-scrollbar {\n height: 4px;\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n"])), function (props) {
|
|
6225
|
+
return props.$variant === 'pills' ? base$1.spacing[2] : '0';
|
|
6226
|
+
}, function (props) {
|
|
6227
|
+
return props.$variant === 'underline' ? "".concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border.subtle) : 'none';
|
|
6228
|
+
}, semantic$1.color.background.subtle, semantic$1.color.border["default"], base$1.border.radius[2]);
|
|
6229
|
+
var StyledTab = styled.button.withConfig({
|
|
6230
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6231
|
+
return !prop.startsWith('$');
|
|
6232
|
+
},
|
|
6233
|
+
displayName: "TabBar__StyledTab",
|
|
6234
|
+
componentId: "sc-1g9ib0y-1"
|
|
6235
|
+
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /* Variant-specific styles */\n ", "\n \n /* Disabled state */\n opacity: ", ";\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n z-index: 1;\n }\n \n /* Active/pressed state */\n &:active:not(:disabled) {\n transform: translateY(1px);\n }\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", " ", ";\n font: ", ";\n white-space: nowrap;\n cursor: ", ";\n border: none;\n background: transparent;\n transition: ", ";\n position: relative;\n \n /* Variant-specific styles */\n ", "\n \n /* Disabled state */\n opacity: ", ";\n \n /* Focus state */\n &:focus-visible {\n outline: ", " solid ", ";\n outline-offset: ", ";\n z-index: 1;\n }\n \n /* Active/pressed state */\n &:active:not(:disabled) {\n transform: translateY(1px);\n }\n"])), base$1.spacing[2], base$1.spacing[3], base$1.spacing[4], semantic$1.typography.button2, function (props) {
|
|
6236
|
+
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
6237
|
+
}, semantic$1.motion.hover, function (props) {
|
|
6238
|
+
if (props.$variant === 'pills') {
|
|
6239
|
+
return "\n border-radius: ".concat(base$1.border.radius.circle, ";\n background-color: ").concat(props.$isActive ? semantic$1.color.background.interactive : semantic$1.color.background.subtle, ";\n color: ").concat(props.$isActive ? semantic$1.color.text.inverse : semantic$1.color.text["default"], ";\n \n &:hover:not(:disabled) {\n background-color: ").concat(props.$isActive ? semantic$1.color.background['interactive-hover'] : semantic$1.color.background.surface, ";\n }\n ");
|
|
6240
|
+
}
|
|
6241
|
+
if (props.$variant === 'underline') {
|
|
6242
|
+
return "\n color: ".concat(props.$isActive ? semantic$1.color.text.interactive : semantic$1.color.text.subdued, ";\n \n &::after {\n content: '';\n position: absolute;\n bottom: -1px;\n left: 0;\n right: 0;\n height: ").concat(base$1.border.width[2], ";\n background-color: ").concat(props.$isActive ? semantic$1.color.background.interactive : 'transparent', ";\n transition: ").concat(semantic$1.motion.hover, ";\n }\n \n &:hover:not(:disabled) {\n color: ").concat(semantic$1.color.text.interactive, ";\n }\n ");
|
|
6243
|
+
}
|
|
6244
|
+
// default variant
|
|
6245
|
+
return "\n border-radius: ".concat(base$1.border.radius[2], " ").concat(base$1.border.radius[2], " 0 0;\n background-color: ").concat(props.$isActive ? semantic$1.color.background.subtle : semantic$1.color.background["default"], ";\n color: ").concat(props.$isActive ? semantic$1.color.text["default"] : semantic$1.color.text.subdued, ";\n border: ").concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border["default"], ";\n border-bottom: ").concat(props.$isActive ? 'none' : "".concat(base$1.border.width[1], " solid ").concat(semantic$1.color.border["default"]), ";\n margin-bottom: ").concat(props.$isActive ? '-1px' : '0', ";\n \n &:hover:not(:disabled) {\n background-color: ").concat(semantic$1.color.background.surface, ";\n color: ").concat(semantic$1.color.text["default"], ";\n }\n ");
|
|
6246
|
+
}, function (props) {
|
|
6247
|
+
return props.$disabled ? '0.5' : '1';
|
|
6248
|
+
}, base$1.border.width[2], semantic$1.color.border.strong, base$1.spacing[1]);
|
|
6249
|
+
var StyledBadge = styled.span.withConfig({
|
|
6250
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6251
|
+
return !prop.startsWith('$');
|
|
6252
|
+
},
|
|
6253
|
+
displayName: "TabBar__StyledBadge",
|
|
6254
|
+
componentId: "sc-1g9ib0y-2"
|
|
6255
|
+
})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 ", ";\n font: ", ";\n font-weight: ", ";\n border-radius: ", ";\n background-color: ", ";\n color: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 ", ";\n font: ", ";\n font-weight: ", ";\n border-radius: ", ";\n background-color: ", ";\n color: ", ";\n"
|
|
6256
|
+
/**
|
|
6257
|
+
* TabBar component for tabbed navigation
|
|
6258
|
+
*
|
|
6259
|
+
* Provides accessible tab navigation with 3 visual variants, keyboard support,
|
|
6260
|
+
* and optional badge counts. Follows ARIA tablist pattern.
|
|
6261
|
+
*
|
|
6262
|
+
* @example
|
|
6263
|
+
* ```tsx
|
|
6264
|
+
* const [activeTab, setActiveTab] = useState('all')
|
|
6265
|
+
*
|
|
6266
|
+
* <TabBar
|
|
6267
|
+
* tabs={[
|
|
6268
|
+
* { id: 'all', label: 'All', badge: 42 },
|
|
6269
|
+
* { id: 'pending', label: 'Pending', badge: 5 },
|
|
6270
|
+
* { id: 'completed', label: 'Completed' }
|
|
6271
|
+
* ]}
|
|
6272
|
+
* activeTab={activeTab}
|
|
6273
|
+
* onTabChange={setActiveTab}
|
|
6274
|
+
* variant="pills"
|
|
6275
|
+
* />
|
|
6276
|
+
* ```
|
|
6277
|
+
*/])), base$1.spacing[1], semantic$1.typography.caption, base$1.fontWeight[5], base$1.border.radius.circle, function (props) {
|
|
6278
|
+
if (props.$variant === 'pills') {
|
|
6279
|
+
return props.$isActive ? 'rgba(255, 255, 255, 0.2)' : semantic$1.color.background.interactive;
|
|
6280
|
+
}
|
|
6281
|
+
return semantic$1.color.background.interactive;
|
|
6282
|
+
}, function (props) {
|
|
6283
|
+
return props.$variant === 'pills' && props.$isActive ? semantic$1.color.text.inverse : semantic$1.color.text.inverse;
|
|
6284
|
+
});
|
|
6285
|
+
/**
|
|
6286
|
+
* TabBar component for tabbed navigation
|
|
6287
|
+
*
|
|
6288
|
+
* Provides accessible tab navigation with 3 visual variants, keyboard support,
|
|
6289
|
+
* and optional badge counts. Follows ARIA tablist pattern.
|
|
6290
|
+
*
|
|
6291
|
+
* @example
|
|
6292
|
+
* ```tsx
|
|
6293
|
+
* const [activeTab, setActiveTab] = useState('all')
|
|
6294
|
+
*
|
|
6295
|
+
* <TabBar
|
|
6296
|
+
* tabs={[
|
|
6297
|
+
* { id: 'all', label: 'All', badge: 42 },
|
|
6298
|
+
* { id: 'pending', label: 'Pending', badge: 5 },
|
|
6299
|
+
* { id: 'completed', label: 'Completed' }
|
|
6300
|
+
* ]}
|
|
6301
|
+
* activeTab={activeTab}
|
|
6302
|
+
* onTabChange={setActiveTab}
|
|
6303
|
+
* variant="pills"
|
|
6304
|
+
* />
|
|
6305
|
+
* ```
|
|
6306
|
+
*/
|
|
6307
|
+
var TabBar = function TabBar(_a) {
|
|
6308
|
+
var tabs = _a.tabs,
|
|
6309
|
+
activeTab = _a.activeTab,
|
|
6310
|
+
onTabChange = _a.onTabChange,
|
|
6311
|
+
_b = _a.variant,
|
|
6312
|
+
variant = _b === void 0 ? 'default' : _b,
|
|
6313
|
+
_c = _a["aria-label"],
|
|
6314
|
+
ariaLabel = _c === void 0 ? 'Tab navigation' : _c,
|
|
6315
|
+
dataTestId = _a["data-testid"];
|
|
6316
|
+
var tabRefs = useRef([]);
|
|
6317
|
+
var _d = useState(function () {
|
|
6318
|
+
return tabs.findIndex(function (tab) {
|
|
6319
|
+
return tab.id === activeTab;
|
|
6320
|
+
});
|
|
6321
|
+
}),
|
|
6322
|
+
focusedIndex = _d[0],
|
|
6323
|
+
setFocusedIndex = _d[1];
|
|
6324
|
+
// Update focused index when active tab changes externally
|
|
6325
|
+
useEffect(function () {
|
|
6326
|
+
var newIndex = tabs.findIndex(function (tab) {
|
|
6327
|
+
return tab.id === activeTab;
|
|
6328
|
+
});
|
|
6329
|
+
if (newIndex !== -1) {
|
|
6330
|
+
setFocusedIndex(newIndex);
|
|
6331
|
+
}
|
|
6332
|
+
}, [activeTab, tabs]);
|
|
6333
|
+
var handleTabClick = function handleTabClick(tab, index) {
|
|
6334
|
+
if (!tab.disabled) {
|
|
6335
|
+
onTabChange(tab.id);
|
|
6336
|
+
setFocusedIndex(index);
|
|
6337
|
+
}
|
|
6338
|
+
};
|
|
6339
|
+
var handleKeyDown = function handleKeyDown(event, index) {
|
|
6340
|
+
var _a;
|
|
6341
|
+
var newIndex = index;
|
|
6342
|
+
switch (event.key) {
|
|
6343
|
+
case 'ArrowLeft':
|
|
6344
|
+
event.preventDefault();
|
|
6345
|
+
// Find previous non-disabled tab
|
|
6346
|
+
newIndex = index - 1;
|
|
6347
|
+
while (newIndex >= 0 && tabs[newIndex].disabled) {
|
|
6348
|
+
newIndex--;
|
|
6349
|
+
}
|
|
6350
|
+
if (newIndex < 0) {
|
|
6351
|
+
// Wrap to last non-disabled tab
|
|
6352
|
+
newIndex = tabs.length - 1;
|
|
6353
|
+
while (newIndex > index && tabs[newIndex].disabled) {
|
|
6354
|
+
newIndex--;
|
|
6355
|
+
}
|
|
6356
|
+
}
|
|
6357
|
+
break;
|
|
6358
|
+
case 'ArrowRight':
|
|
6359
|
+
event.preventDefault();
|
|
6360
|
+
// Find next non-disabled tab
|
|
6361
|
+
newIndex = index + 1;
|
|
6362
|
+
while (newIndex < tabs.length && tabs[newIndex].disabled) {
|
|
6363
|
+
newIndex++;
|
|
6364
|
+
}
|
|
6365
|
+
if (newIndex >= tabs.length) {
|
|
6366
|
+
// Wrap to first non-disabled tab
|
|
6367
|
+
newIndex = 0;
|
|
6368
|
+
while (newIndex < index && tabs[newIndex].disabled) {
|
|
6369
|
+
newIndex++;
|
|
6370
|
+
}
|
|
6371
|
+
}
|
|
6372
|
+
break;
|
|
6373
|
+
case 'Home':
|
|
6374
|
+
event.preventDefault();
|
|
6375
|
+
// Focus first non-disabled tab
|
|
6376
|
+
newIndex = 0;
|
|
6377
|
+
while (newIndex < tabs.length && tabs[newIndex].disabled) {
|
|
6378
|
+
newIndex++;
|
|
6379
|
+
}
|
|
6380
|
+
break;
|
|
6381
|
+
case 'End':
|
|
6382
|
+
event.preventDefault();
|
|
6383
|
+
// Focus last non-disabled tab
|
|
6384
|
+
newIndex = tabs.length - 1;
|
|
6385
|
+
while (newIndex >= 0 && tabs[newIndex].disabled) {
|
|
6386
|
+
newIndex--;
|
|
6387
|
+
}
|
|
6388
|
+
break;
|
|
6389
|
+
default:
|
|
6390
|
+
return;
|
|
6391
|
+
}
|
|
6392
|
+
if (newIndex !== index && newIndex >= 0 && newIndex < tabs.length) {
|
|
6393
|
+
setFocusedIndex(newIndex);
|
|
6394
|
+
(_a = tabRefs.current[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6395
|
+
}
|
|
6396
|
+
};
|
|
6397
|
+
return /*#__PURE__*/React.createElement(StyledTabList, {
|
|
6398
|
+
$variant: variant,
|
|
6399
|
+
role: "tablist",
|
|
6400
|
+
"aria-label": ariaLabel,
|
|
6401
|
+
"data-testid": dataTestId
|
|
6402
|
+
}, tabs.map(function (tab, index) {
|
|
6403
|
+
return /*#__PURE__*/React.createElement(StyledTab, {
|
|
6404
|
+
key: tab.id,
|
|
6405
|
+
ref: function ref(el) {
|
|
6406
|
+
tabRefs.current[index] = el;
|
|
6407
|
+
},
|
|
6408
|
+
$variant: variant,
|
|
6409
|
+
$isActive: tab.id === activeTab,
|
|
6410
|
+
$disabled: tab.disabled || false,
|
|
6411
|
+
role: "tab",
|
|
6412
|
+
"aria-selected": tab.id === activeTab,
|
|
6413
|
+
"aria-disabled": tab.disabled || false,
|
|
6414
|
+
tabIndex: index === focusedIndex ? 0 : -1,
|
|
6415
|
+
disabled: tab.disabled,
|
|
6416
|
+
onClick: function onClick() {
|
|
6417
|
+
return handleTabClick(tab, index);
|
|
6418
|
+
},
|
|
6419
|
+
onKeyDown: function onKeyDown(e) {
|
|
6420
|
+
return handleKeyDown(e, index);
|
|
6421
|
+
},
|
|
6422
|
+
"data-testid": "".concat(dataTestId, "-tab-").concat(tab.id)
|
|
6423
|
+
}, tab.label, typeof tab.badge === 'number' && tab.badge > 0 && /*#__PURE__*/React.createElement(StyledBadge, {
|
|
6424
|
+
$variant: variant,
|
|
6425
|
+
$isActive: tab.id === activeTab,
|
|
6426
|
+
"aria-label": "".concat(tab.badge, " items")
|
|
6427
|
+
}, tab.badge > 99 ? '99+' : tab.badge));
|
|
6428
|
+
}));
|
|
6429
|
+
};
|
|
6430
|
+
TabBar.displayName = 'TabBar';
|
|
6431
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3;
|
|
4723
6432
|
|
|
4724
6433
|
React.createElement;
|
|
4725
6434
|
var semantic = tokensData.semantic,
|
|
@@ -4727,19 +6436,19 @@ var semantic = tokensData.semantic,
|
|
|
4727
6436
|
var StyledFieldContainer = styled.div.withConfig({
|
|
4728
6437
|
displayName: "TextField__StyledFieldContainer",
|
|
4729
6438
|
componentId: "sc-1ys3b0-0"
|
|
4730
|
-
})(templateObject_1$
|
|
6439
|
+
})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base.spacing[2]);
|
|
4731
6440
|
var StyledLabel = styled.label.withConfig({
|
|
4732
6441
|
displayName: "TextField__StyledLabel",
|
|
4733
6442
|
componentId: "sc-1ys3b0-1"
|
|
4734
|
-
})(templateObject_2$
|
|
6443
|
+
})(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n font: ", ";\n color: ", ";\n \n &[data-disabled='true'] {\n color: ", ";\n }\n"])), base.spacing[1], semantic.typography.label, semantic.color.text["default"], semantic.color.text.disabled);
|
|
4735
6444
|
var StyledRequiredIndicator = styled.span.withConfig({
|
|
4736
6445
|
displayName: "TextField__StyledRequiredIndicator",
|
|
4737
6446
|
componentId: "sc-1ys3b0-2"
|
|
4738
|
-
})(templateObject_3$
|
|
6447
|
+
})(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n"], ["\n color: ", ";\n font-weight: ", ";\n"])), semantic.color.text.error, base.fontWeight[5]);
|
|
4739
6448
|
var StyledHelperText = styled.div.withConfig({
|
|
4740
6449
|
displayName: "TextField__StyledHelperText",
|
|
4741
6450
|
componentId: "sc-1ys3b0-3"
|
|
4742
|
-
})(templateObject_4$
|
|
6451
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
4743
6452
|
/**
|
|
4744
6453
|
* TextField component for text input with label, helper text, and error states
|
|
4745
6454
|
*
|
|
@@ -4818,7 +6527,177 @@ var TextField = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
4818
6527
|
}, helperText));
|
|
4819
6528
|
});
|
|
4820
6529
|
TextField.displayName = 'TextField';
|
|
4821
|
-
var templateObject_1$
|
|
6530
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2;
|
|
6531
|
+
|
|
6532
|
+
React.createElement;
|
|
6533
|
+
var StyledContainer = styled.div.withConfig({
|
|
6534
|
+
displayName: "TransactionListItem__StyledContainer",
|
|
6535
|
+
componentId: "sc-7yunm0-0"
|
|
6536
|
+
})(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n min-height: 72px;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n gap: ", ";\n transition: background-color 0.2s ease;\n \n ", "\n"], ["\n display: flex;\n align-items: center;\n min-height: 72px;\n padding: ", " ", ";\n background-color: ", ";\n border-bottom: 1px solid ", ";\n gap: ", ";\n transition: background-color 0.2s ease;\n \n ", "\n"])), tokensData.semantic.spacing.layout.md, tokensData.semantic.spacing.layout.md, tokensData.semantic.color.background["default"], tokensData.semantic.color.border["default"], tokensData.semantic.spacing.layout.md, function (_a) {
|
|
6537
|
+
var $clickable = _a.$clickable;
|
|
6538
|
+
return $clickable && "\n cursor: pointer;\n \n &:hover {\n background-color: ".concat(tokensData.semantic.color.background['interactive-hover'], ";\n }\n \n &:active {\n background-color: ").concat(tokensData.semantic.color.background['interactive-active'], ";\n }\n \n &:focus-visible {\n outline: 2px solid ").concat(tokensData.semantic.color.border.interactive, ";\n outline-offset: -2px;\n }\n ");
|
|
6539
|
+
});
|
|
6540
|
+
var StyledAvatarSection = styled.div.withConfig({
|
|
6541
|
+
displayName: "TransactionListItem__StyledAvatarSection",
|
|
6542
|
+
componentId: "sc-7yunm0-1"
|
|
6543
|
+
})(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n flex-shrink: 0;\n"], ["\n flex-shrink: 0;\n"])));
|
|
6544
|
+
var StyledMainContent = styled.div.withConfig({
|
|
6545
|
+
displayName: "TransactionListItem__StyledMainContent",
|
|
6546
|
+
componentId: "sc-7yunm0-2"
|
|
6547
|
+
})(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: ", ";\n"], ["\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.xs);
|
|
6548
|
+
var StyledTopRow = styled.div.withConfig({
|
|
6549
|
+
displayName: "TransactionListItem__StyledTopRow",
|
|
6550
|
+
componentId: "sc-7yunm0-3"
|
|
6551
|
+
})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
|
|
6552
|
+
var StyledMerchantSection = styled.div.withConfig({
|
|
6553
|
+
displayName: "TransactionListItem__StyledMerchantSection",
|
|
6554
|
+
componentId: "sc-7yunm0-4"
|
|
6555
|
+
})(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n min-width: 0;\n flex: 1;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n min-width: 0;\n flex: 1;\n"])), tokensData.semantic.spacing.layout.xs);
|
|
6556
|
+
var StyledBottomRow = styled.div.withConfig({
|
|
6557
|
+
displayName: "TransactionListItem__StyledBottomRow",
|
|
6558
|
+
componentId: "sc-7yunm0-5"
|
|
6559
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n"])), tokensData.semantic.spacing.layout.sm);
|
|
6560
|
+
var StyledMetadata = styled.div.withConfig({
|
|
6561
|
+
displayName: "TransactionListItem__StyledMetadata",
|
|
6562
|
+
componentId: "sc-7yunm0-6"
|
|
6563
|
+
})(templateObject_7$1 || (templateObject_7$1 = __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);
|
|
6564
|
+
var StyledIconIndicator = styled.div.withConfig({
|
|
6565
|
+
displayName: "TransactionListItem__StyledIconIndicator",
|
|
6566
|
+
componentId: "sc-7yunm0-7"
|
|
6567
|
+
})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n color: ", ";\n"])), tokensData.semantic.spacing.layout.xs, tokensData.semantic.color.icon.subdued);
|
|
6568
|
+
var StyledTruncatedText = styled.span.withConfig({
|
|
6569
|
+
displayName: "TransactionListItem__StyledTruncatedText",
|
|
6570
|
+
componentId: "sc-7yunm0-8"
|
|
6571
|
+
})(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"], ["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"
|
|
6572
|
+
// Map categories to icon names (using placeholders until custom icons available)
|
|
6573
|
+
])));
|
|
6574
|
+
// Map categories to icon names (using placeholders until custom icons available)
|
|
6575
|
+
var categoryToIcon = {
|
|
6576
|
+
shopping: 'paper',
|
|
6577
|
+
// Will use shopping bag icon
|
|
6578
|
+
dining: 'paper',
|
|
6579
|
+
// Will use restaurant icon
|
|
6580
|
+
transport: 'paper',
|
|
6581
|
+
// Will use car icon
|
|
6582
|
+
entertainment: 'star',
|
|
6583
|
+
// Will use ticket icon
|
|
6584
|
+
bills: 'paper',
|
|
6585
|
+
// Will use document icon
|
|
6586
|
+
other: 'paper'
|
|
6587
|
+
};
|
|
6588
|
+
// Map status to badge variant
|
|
6589
|
+
var statusToBadgeVariant = {
|
|
6590
|
+
completed: 'success',
|
|
6591
|
+
pending: 'warning',
|
|
6592
|
+
failed: 'error'
|
|
6593
|
+
};
|
|
6594
|
+
/**
|
|
6595
|
+
* TransactionListItem component
|
|
6596
|
+
*
|
|
6597
|
+
* Displays a single transaction in a list with merchant info, amount, date,
|
|
6598
|
+
* status, and optional metadata (category, receipt, notes). Minimum height 72px
|
|
6599
|
+
* with interactive states for clickable items.
|
|
6600
|
+
*
|
|
6601
|
+
* Composes: Avatar, Badge, MoneyDisplay, Icon, DateFormatter, Typography, Stack
|
|
6602
|
+
*/
|
|
6603
|
+
var TransactionListItem = function TransactionListItem(_a) {
|
|
6604
|
+
var merchant = _a.merchant,
|
|
6605
|
+
amount = _a.amount,
|
|
6606
|
+
date = _a.date,
|
|
6607
|
+
_b = _a.status,
|
|
6608
|
+
status = _b === void 0 ? 'completed' : _b,
|
|
6609
|
+
category = _a.category,
|
|
6610
|
+
merchantLogo = _a.merchantLogo,
|
|
6611
|
+
description = _a.description,
|
|
6612
|
+
_c = _a.hasReceipt,
|
|
6613
|
+
hasReceipt = _c === void 0 ? false : _c,
|
|
6614
|
+
_d = _a.hasNote,
|
|
6615
|
+
hasNote = _d === void 0 ? false : _d,
|
|
6616
|
+
_e = _a.currency,
|
|
6617
|
+
currency = _e === void 0 ? 'AUD' : _e,
|
|
6618
|
+
onClick = _a.onClick,
|
|
6619
|
+
dataTestId = _a["data-testid"];
|
|
6620
|
+
var isClickable = !!onClick;
|
|
6621
|
+
// Determine amount variant
|
|
6622
|
+
var amountVariant = amount > 0 ? 'positive' : amount < 0 ? 'negative' : 'default';
|
|
6623
|
+
// Get category icon
|
|
6624
|
+
var categoryIcon = category ? categoryToIcon[category] : undefined;
|
|
6625
|
+
// Get badge variant from status
|
|
6626
|
+
var badgeVariant = statusToBadgeVariant[status];
|
|
6627
|
+
var handleClick = function handleClick() {
|
|
6628
|
+
if (isClickable && onClick) {
|
|
6629
|
+
onClick();
|
|
6630
|
+
}
|
|
6631
|
+
};
|
|
6632
|
+
var handleKeyDown = function handleKeyDown(e) {
|
|
6633
|
+
if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
|
|
6634
|
+
e.preventDefault();
|
|
6635
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
6636
|
+
}
|
|
6637
|
+
};
|
|
6638
|
+
return /*#__PURE__*/React.createElement(StyledContainer, {
|
|
6639
|
+
$clickable: isClickable,
|
|
6640
|
+
onClick: handleClick,
|
|
6641
|
+
onKeyDown: handleKeyDown,
|
|
6642
|
+
tabIndex: isClickable ? 0 : undefined,
|
|
6643
|
+
role: isClickable ? 'button' : undefined,
|
|
6644
|
+
"aria-label": isClickable ? "".concat(merchant, " transaction, ").concat(amount < 0 ? 'expense' : 'income', " of ").concat(Math.abs(amount)) : undefined,
|
|
6645
|
+
"data-testid": dataTestId
|
|
6646
|
+
}, /*#__PURE__*/React.createElement(StyledAvatarSection, null, status === 'pending' ? /*#__PURE__*/React.createElement(Badge, {
|
|
6647
|
+
variant: badgeVariant,
|
|
6648
|
+
dot: true,
|
|
6649
|
+
"aria-label": "Pending transaction"
|
|
6650
|
+
}, /*#__PURE__*/React.createElement(Avatar, {
|
|
6651
|
+
name: merchant,
|
|
6652
|
+
picture: merchantLogo,
|
|
6653
|
+
size: "md"
|
|
6654
|
+
})) : /*#__PURE__*/React.createElement(Avatar, {
|
|
6655
|
+
name: merchant,
|
|
6656
|
+
picture: merchantLogo,
|
|
6657
|
+
size: "md"
|
|
6658
|
+
})), /*#__PURE__*/React.createElement(StyledMainContent, null, /*#__PURE__*/React.createElement(StyledTopRow, null, /*#__PURE__*/React.createElement(StyledMerchantSection, null, categoryIcon && /*#__PURE__*/React.createElement("span", {
|
|
6659
|
+
"aria-label": "Category: ".concat(category),
|
|
6660
|
+
role: "img"
|
|
6661
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
6662
|
+
name: categoryIcon,
|
|
6663
|
+
size: "sm",
|
|
6664
|
+
iconColor: "subdued"
|
|
6665
|
+
})), /*#__PURE__*/React.createElement(StyledTruncatedText, null, /*#__PURE__*/React.createElement(Typography, {
|
|
6666
|
+
variant: "body"
|
|
6667
|
+
}, merchant)), status === 'failed' && /*#__PURE__*/React.createElement(Badge, {
|
|
6668
|
+
variant: "error",
|
|
6669
|
+
dot: true,
|
|
6670
|
+
"aria-label": "Failed transaction"
|
|
6671
|
+
}, /*#__PURE__*/React.createElement("span", null))), /*#__PURE__*/React.createElement(MoneyDisplay, {
|
|
6672
|
+
amount: amount,
|
|
6673
|
+
currency: currency,
|
|
6674
|
+
variant: amountVariant,
|
|
6675
|
+
size: "medium",
|
|
6676
|
+
weight: "medium",
|
|
6677
|
+
showSign: true,
|
|
6678
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-amount") : undefined
|
|
6679
|
+
})), /*#__PURE__*/React.createElement(StyledBottomRow, null, /*#__PURE__*/React.createElement(StyledMetadata, null, /*#__PURE__*/React.createElement(DateFormatter, {
|
|
6680
|
+
dateString: typeof date === 'string' ? date : date.toISOString(),
|
|
6681
|
+
mode: "smart",
|
|
6682
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-date") : undefined
|
|
6683
|
+
}), description && /*#__PURE__*/React.createElement(StyledTruncatedText, null, /*#__PURE__*/React.createElement(Typography, {
|
|
6684
|
+
variant: "caption",
|
|
6685
|
+
color: "subdued"
|
|
6686
|
+
}, "\u2022 ", description))), (hasReceipt || hasNote) && /*#__PURE__*/React.createElement(StyledIconIndicator, null, hasReceipt && /*#__PURE__*/React.createElement("span", {
|
|
6687
|
+
"aria-label": "Has receipt",
|
|
6688
|
+
role: "img"
|
|
6689
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
6690
|
+
name: "fileDocSearch",
|
|
6691
|
+
size: "xs"
|
|
6692
|
+
})), hasNote && /*#__PURE__*/React.createElement("span", {
|
|
6693
|
+
"aria-label": "Has note",
|
|
6694
|
+
role: "img"
|
|
6695
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
6696
|
+
name: "paper",
|
|
6697
|
+
size: "xs"
|
|
6698
|
+
}))))));
|
|
6699
|
+
};
|
|
6700
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1;
|
|
4822
6701
|
|
|
4823
6702
|
React.createElement;
|
|
4824
6703
|
// Breakpoints using base tokens
|
|
@@ -5023,5 +6902,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
5023
6902
|
// Main design system exports
|
|
5024
6903
|
var tokens = tokensData;
|
|
5025
6904
|
|
|
5026
|
-
export { Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, Sheet, Slider, Stack, StyledInputBase, StyledTextAreaBase, Tag, TextField, Typography, iconsData, tokens };
|
|
6905
|
+
export { AccountCard, ActionSheet, Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, CategoryBadge, Checkbox, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DateGroup, Divider, Dropdown, EmptyState, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, MoneyDisplay, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, SearchField, Sheet, Slider, Stack, StatusBadge, StyledInputBase, StyledTextAreaBase, TabBar, Tag, TextField, TransactionListItem, Typography, iconsData, tokens };
|
|
5027
6906
|
//# sourceMappingURL=index.esm.js.map
|