@common-origin/design-system 2.9.0 → 2.10.1
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/molecules/Modal/Modal.d.ts +65 -0
- package/dist/components/molecules/Modal/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +1 -0
- package/dist/index.esm.js +523 -300
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +523 -299
- package/dist/index.js.map +1 -1
- package/dist/styles/tokens.json +3 -3
- package/dist/tokens/index.esm.js +3 -3
- package/dist/tokens/index.js +3 -3
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -101,7 +101,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
101
101
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
102
102
|
};
|
|
103
103
|
|
|
104
|
-
var base$
|
|
104
|
+
var base$d = {
|
|
105
105
|
border: {
|
|
106
106
|
radius: {
|
|
107
107
|
"1": "0.125rem",
|
|
@@ -519,7 +519,7 @@ var component$3 = {
|
|
|
519
519
|
textColor: "#212529",
|
|
520
520
|
borderRadius: "0.75rem",
|
|
521
521
|
padding: "2px 0.5rem",
|
|
522
|
-
font: "
|
|
522
|
+
font: "600 0.875rem/1.25rem 'Inter', sans-serif"
|
|
523
523
|
},
|
|
524
524
|
hover: {
|
|
525
525
|
backgroundColor: "#dee2e6"
|
|
@@ -586,7 +586,7 @@ var component$3 = {
|
|
|
586
586
|
},
|
|
587
587
|
medium: {
|
|
588
588
|
padding: "2px 0.5rem",
|
|
589
|
-
font: "
|
|
589
|
+
font: "600 0.875rem/1.25rem 'Inter', sans-serif"
|
|
590
590
|
},
|
|
591
591
|
large: {
|
|
592
592
|
padding: "0.5rem 0.75rem",
|
|
@@ -753,7 +753,7 @@ var component$3 = {
|
|
|
753
753
|
},
|
|
754
754
|
$ref: "./component/index.json"
|
|
755
755
|
};
|
|
756
|
-
var semantic$
|
|
756
|
+
var semantic$k = {
|
|
757
757
|
elevation: {
|
|
758
758
|
none: "none",
|
|
759
759
|
inset: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
|
|
@@ -941,7 +941,7 @@ var semantic$j = {
|
|
|
941
941
|
button1: "500 1rem/1.5rem 'Inter', sans-serif",
|
|
942
942
|
button2: "500 0.875rem/1.5rem 'Inter', sans-serif",
|
|
943
943
|
button3: "500 0.75rem/1rem 'Inter', sans-serif",
|
|
944
|
-
label: "
|
|
944
|
+
label: "600 0.875rem/1.25rem 'Inter', sans-serif",
|
|
945
945
|
breadcrumb: "400 0.75rem/1.125rem 'Inter', sans-serif"
|
|
946
946
|
},
|
|
947
947
|
motion: {
|
|
@@ -957,44 +957,44 @@ var semantic$j = {
|
|
|
957
957
|
$ref: "./semantic/index.json"
|
|
958
958
|
};
|
|
959
959
|
var tokensData = {
|
|
960
|
-
base: base$
|
|
960
|
+
base: base$d,
|
|
961
961
|
component: component$3,
|
|
962
|
-
semantic: semantic$
|
|
962
|
+
semantic: semantic$k
|
|
963
963
|
};
|
|
964
964
|
|
|
965
965
|
// Destructure tokens
|
|
966
|
-
var semantic$
|
|
967
|
-
var color$
|
|
968
|
-
size$1 = semantic$
|
|
969
|
-
border$
|
|
970
|
-
var radius$5 = border$
|
|
966
|
+
var semantic$j = tokensData.semantic;
|
|
967
|
+
var color$a = semantic$j.color,
|
|
968
|
+
size$1 = semantic$j.size,
|
|
969
|
+
border$a = semantic$j.border;
|
|
970
|
+
var radius$5 = border$a.radius;
|
|
971
971
|
var AvatarContainer = styled.div.withConfig({
|
|
972
972
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
973
973
|
return !prop.startsWith('$');
|
|
974
974
|
},
|
|
975
975
|
displayName: "Avatar__AvatarContainer",
|
|
976
976
|
componentId: "sc-ezn4ax-0"
|
|
977
|
-
})(templateObject_1$
|
|
977
|
+
})(templateObject_1$K || (templateObject_1$K = __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) {
|
|
978
978
|
var $size = _a.$size;
|
|
979
979
|
return size$1.avatar[$size];
|
|
980
980
|
}, function (_a) {
|
|
981
981
|
var $size = _a.$size;
|
|
982
982
|
return size$1.avatar[$size];
|
|
983
|
-
}, radius$5.circle, color$
|
|
983
|
+
}, radius$5.circle, color$a.background.surface);
|
|
984
984
|
var AvatarImage = styled.img.withConfig({
|
|
985
985
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
986
986
|
return !prop.startsWith('$');
|
|
987
987
|
},
|
|
988
988
|
displayName: "Avatar__AvatarImage",
|
|
989
989
|
componentId: "sc-ezn4ax-1"
|
|
990
|
-
})(templateObject_2$
|
|
990
|
+
})(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"], ["\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: ", ";\n /* Remove the img role since the container already has role=\"img\" */\n"])), radius$5.circle);
|
|
991
991
|
var AvatarInitials = styled.span.withConfig({
|
|
992
992
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
993
993
|
return !prop.startsWith('$');
|
|
994
994
|
},
|
|
995
995
|
displayName: "Avatar__AvatarInitials",
|
|
996
996
|
componentId: "sc-ezn4ax-2"
|
|
997
|
-
})(templateObject_3$
|
|
997
|
+
})(templateObject_3$s || (templateObject_3$s = __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"
|
|
998
998
|
// Helper function to get initials from name
|
|
999
999
|
])), tokensData.base.fontFamily.body, tokensData.base.fontWeight[3], function (_a) {
|
|
1000
1000
|
var $size = _a.$size;
|
|
@@ -1006,7 +1006,7 @@ var AvatarInitials = styled.span.withConfig({
|
|
|
1006
1006
|
xl: tokensData.base.fontSize[5]
|
|
1007
1007
|
};
|
|
1008
1008
|
return sizeMap[$size];
|
|
1009
|
-
}, color$
|
|
1009
|
+
}, color$a.text["default"]);
|
|
1010
1010
|
// Helper function to get initials from name
|
|
1011
1011
|
var getInitials = function getInitials(name) {
|
|
1012
1012
|
return name.split(' ').map(function (word) {
|
|
@@ -1060,11 +1060,11 @@ var Avatar = function Avatar(_a) {
|
|
|
1060
1060
|
})
|
|
1061
1061
|
}));
|
|
1062
1062
|
};
|
|
1063
|
-
var templateObject_1$
|
|
1063
|
+
var templateObject_1$K, templateObject_2$v, templateObject_3$s;
|
|
1064
1064
|
|
|
1065
1065
|
var _a$8 = tokensData.semantic,
|
|
1066
1066
|
typography$5 = _a$8.typography,
|
|
1067
|
-
color$
|
|
1067
|
+
color$9 = _a$8.color;
|
|
1068
1068
|
var getTypographyStyles = function getTypographyStyles(variant) {
|
|
1069
1069
|
var styles = {
|
|
1070
1070
|
display: "font: ".concat(typography$5.display, "; letter-spacing: ").concat(tokensData.base.letterSpacing[0], ";"),
|
|
@@ -1088,15 +1088,15 @@ var getTypographyStyles = function getTypographyStyles(variant) {
|
|
|
1088
1088
|
};
|
|
1089
1089
|
var getTextColor = function getTextColor(colorVariant) {
|
|
1090
1090
|
var colorMap = {
|
|
1091
|
-
"default": color$
|
|
1092
|
-
emphasis: color$
|
|
1093
|
-
subdued: color$
|
|
1094
|
-
inverse: color$
|
|
1095
|
-
disabled: color$
|
|
1096
|
-
interactive: color$
|
|
1097
|
-
error: color$
|
|
1098
|
-
success: color$
|
|
1099
|
-
warning: color$
|
|
1091
|
+
"default": color$9.text["default"],
|
|
1092
|
+
emphasis: color$9.text.emphasis,
|
|
1093
|
+
subdued: color$9.text.subdued,
|
|
1094
|
+
inverse: color$9.text.inverse,
|
|
1095
|
+
disabled: color$9.text.disabled,
|
|
1096
|
+
interactive: color$9.text.interactive,
|
|
1097
|
+
error: color$9.text.error,
|
|
1098
|
+
success: color$9.text.success,
|
|
1099
|
+
warning: color$9.text.warning
|
|
1100
1100
|
};
|
|
1101
1101
|
return colorMap[colorVariant] || colorMap["default"];
|
|
1102
1102
|
};
|
|
@@ -1127,7 +1127,7 @@ var StyledTypography = styled.span.withConfig({
|
|
|
1127
1127
|
},
|
|
1128
1128
|
displayName: "Typography__StyledTypography",
|
|
1129
1129
|
componentId: "sc-17mqo4k-0"
|
|
1130
|
-
})(templateObject_1$
|
|
1130
|
+
})(templateObject_1$J || (templateObject_1$J = __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"
|
|
1131
1131
|
/**
|
|
1132
1132
|
* Typography is an atomic component for rendering text with semantic meaning and consistent styling.
|
|
1133
1133
|
*
|
|
@@ -1195,24 +1195,24 @@ var Typography = function Typography(_a) {
|
|
|
1195
1195
|
children: children
|
|
1196
1196
|
});
|
|
1197
1197
|
};
|
|
1198
|
-
var templateObject_1$
|
|
1198
|
+
var templateObject_1$J;
|
|
1199
1199
|
|
|
1200
|
-
var semantic$
|
|
1201
|
-
var color$
|
|
1202
|
-
border$
|
|
1203
|
-
var radius$4 = border$
|
|
1204
|
-
var scaleIn$
|
|
1200
|
+
var semantic$i = tokensData.semantic;
|
|
1201
|
+
var color$8 = semantic$i.color,
|
|
1202
|
+
border$9 = semantic$i.border;
|
|
1203
|
+
var radius$4 = border$9.radius;
|
|
1204
|
+
var scaleIn$2 = keyframes(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n from {\n transform: scale(0.8);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n"], ["\n from {\n transform: scale(0.8);\n opacity: 0;\n }\n to {\n transform: scale(1);\n opacity: 1;\n }\n"])));
|
|
1205
1205
|
var BadgeWrapper = styled.span.withConfig({
|
|
1206
1206
|
displayName: "Badge__BadgeWrapper",
|
|
1207
1207
|
componentId: "sc-tjz4pp-0"
|
|
1208
|
-
})(templateObject_2$
|
|
1208
|
+
})(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
1209
1209
|
var BadgeIndicator = styled.span.withConfig({
|
|
1210
1210
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
1211
1211
|
return !prop.startsWith('$');
|
|
1212
1212
|
},
|
|
1213
1213
|
displayName: "Badge__BadgeIndicator",
|
|
1214
1214
|
componentId: "sc-tjz4pp-1"
|
|
1215
|
-
})(templateObject_3$
|
|
1215
|
+
})(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: ", ";\n align-items: center;\n justify-content: center;\n min-width: ", ";\n height: ", ";\n padding: ", ";\n border-radius: ", ";\n line-height: 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) {
|
|
1216
1216
|
return props.$isVisible ? 'flex' : 'none';
|
|
1217
1217
|
}, function (props) {
|
|
1218
1218
|
return props.$isDot ? '8px' : '16px';
|
|
@@ -1220,24 +1220,24 @@ var BadgeIndicator = styled.span.withConfig({
|
|
|
1220
1220
|
return props.$isDot ? '8px' : '16px';
|
|
1221
1221
|
}, function (props) {
|
|
1222
1222
|
return props.$isDot ? '0' : '0 4px';
|
|
1223
|
-
}, radius$4.circle, color$
|
|
1223
|
+
}, radius$4.circle, color$8.background["default"], scaleIn$2, function (props) {
|
|
1224
1224
|
switch (props.$variant) {
|
|
1225
1225
|
case 'primary':
|
|
1226
|
-
return "\n background-color: ".concat(color$
|
|
1226
|
+
return "\n background-color: ".concat(color$8.background.interactive, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1227
1227
|
case 'error':
|
|
1228
|
-
return "\n background-color: ".concat(color$
|
|
1228
|
+
return "\n background-color: ".concat(color$8.background.error, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1229
1229
|
case 'warning':
|
|
1230
|
-
return "\n background-color: ".concat(color$
|
|
1230
|
+
return "\n background-color: ".concat(color$8.background.warning, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1231
1231
|
case 'success':
|
|
1232
|
-
return "\n background-color: ".concat(color$
|
|
1232
|
+
return "\n background-color: ".concat(color$8.background.success, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1233
1233
|
default:
|
|
1234
|
-
return "\n background-color: ".concat(color$
|
|
1234
|
+
return "\n background-color: ".concat(color$8.background.emphasis, ";\n color: ").concat(color$8.text.inverse, ";\n ");
|
|
1235
1235
|
}
|
|
1236
1236
|
});
|
|
1237
1237
|
var ScreenReaderOnly$1 = styled.span.withConfig({
|
|
1238
1238
|
displayName: "Badge__ScreenReaderOnly",
|
|
1239
1239
|
componentId: "sc-tjz4pp-2"
|
|
1240
|
-
})(templateObject_4$
|
|
1240
|
+
})(templateObject_4$m || (templateObject_4$m = __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"])));
|
|
1241
1241
|
var Badge = function Badge(_a) {
|
|
1242
1242
|
var children = _a.children,
|
|
1243
1243
|
_b = _a.count,
|
|
@@ -1273,7 +1273,7 @@ var Badge = function Badge(_a) {
|
|
|
1273
1273
|
})]
|
|
1274
1274
|
});
|
|
1275
1275
|
};
|
|
1276
|
-
var templateObject_1$
|
|
1276
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$r, templateObject_4$m;
|
|
1277
1277
|
|
|
1278
1278
|
var StyledBox = styled.div.withConfig({
|
|
1279
1279
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -1284,23 +1284,23 @@ var StyledBox = styled.div.withConfig({
|
|
|
1284
1284
|
})(templateObject_49 || (templateObject_49 = __makeTemplateObject(["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Elevation (shadow)\n ", "\n \n // Cursor\n ", "\n \n // Transition\n ", "\n \n // Hover states\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"], ["\n ", "\n \n // Flexbox\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Margin\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Padding\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Size\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Position\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Borders\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n // Background & Color\n ", "\n ", "\n \n // Elevation (shadow)\n ", "\n \n // Cursor\n ", "\n \n // Transition\n ", "\n \n // Hover states\n ", "\n \n // Overflow\n ", "\n ", "\n ", "\n"
|
|
1285
1285
|
// Transform component that maps clean props to $-prefixed props for styled-components
|
|
1286
1286
|
])), function (props) {
|
|
1287
|
-
return props.$display && css(templateObject_1$
|
|
1287
|
+
return props.$display && css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["display: ", ";"], ["display: ", ";"])), props.$display);
|
|
1288
1288
|
}, function (props) {
|
|
1289
|
-
return props.$flexDirection && css(templateObject_2$
|
|
1289
|
+
return props.$flexDirection && css(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["flex-direction: ", ";"], ["flex-direction: ", ";"])), props.$flexDirection);
|
|
1290
1290
|
}, function (props) {
|
|
1291
|
-
return props.$justifyContent && css(templateObject_3$
|
|
1291
|
+
return props.$justifyContent && css(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), props.$justifyContent);
|
|
1292
1292
|
}, function (props) {
|
|
1293
|
-
return props.$alignItems && css(templateObject_4$
|
|
1293
|
+
return props.$alignItems && css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), props.$alignItems);
|
|
1294
1294
|
}, function (props) {
|
|
1295
|
-
return props.$flexWrap && css(templateObject_5$
|
|
1295
|
+
return props.$flexWrap && css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["flex-wrap: ", ";"], ["flex-wrap: ", ";"])), props.$flexWrap);
|
|
1296
1296
|
}, function (props) {
|
|
1297
|
-
return props.$gap && css(templateObject_6$
|
|
1297
|
+
return props.$gap && css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["gap: ", ";"], ["gap: ", ";"])), tokensData.semantic.spacing.layout[props.$gap]);
|
|
1298
1298
|
}, function (props) {
|
|
1299
|
-
return props.$m && css(templateObject_7$
|
|
1299
|
+
return props.$m && css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), tokensData.semantic.spacing.layout[props.$m]);
|
|
1300
1300
|
}, function (props) {
|
|
1301
|
-
return props.$mt && css(templateObject_8$
|
|
1301
|
+
return props.$mt && css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["margin-top: ", ";"], ["margin-top: ", ";"])), tokensData.semantic.spacing.layout[props.$mt]);
|
|
1302
1302
|
}, function (props) {
|
|
1303
|
-
return props.$mr && css(templateObject_9$
|
|
1303
|
+
return props.$mr && css(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["margin-right: ", ";"], ["margin-right: ", ";"])), tokensData.semantic.spacing.layout[props.$mr]);
|
|
1304
1304
|
}, function (props) {
|
|
1305
1305
|
return props.$mb && css(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["margin-bottom: ", ";"], ["margin-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$mb]);
|
|
1306
1306
|
}, function (props) {
|
|
@@ -1508,7 +1508,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1508
1508
|
}));
|
|
1509
1509
|
};
|
|
1510
1510
|
var Box = BoxTransform;
|
|
1511
|
-
var templateObject_1$
|
|
1511
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$l, templateObject_5$g, templateObject_6$d, templateObject_7$b, templateObject_8$7, templateObject_9$5, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
|
|
1512
1512
|
|
|
1513
1513
|
var add = {
|
|
1514
1514
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -2228,7 +2228,7 @@ var IconStyled = styled.span.withConfig({
|
|
|
2228
2228
|
},
|
|
2229
2229
|
displayName: "Icon__IconStyled",
|
|
2230
2230
|
componentId: "sc-1105czq-0"
|
|
2231
|
-
})(templateObject_1$
|
|
2231
|
+
})(templateObject_1$G || (templateObject_1$G = __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) {
|
|
2232
2232
|
var $size = _a.$size;
|
|
2233
2233
|
return tokensData.semantic.size.icon[$size];
|
|
2234
2234
|
}, function (_a) {
|
|
@@ -2294,12 +2294,12 @@ var Icon = function Icon(_a) {
|
|
|
2294
2294
|
})
|
|
2295
2295
|
});
|
|
2296
2296
|
};
|
|
2297
|
-
var templateObject_1$
|
|
2297
|
+
var templateObject_1$G;
|
|
2298
2298
|
|
|
2299
2299
|
var button$1 = tokensData.component.button,
|
|
2300
|
-
semantic$
|
|
2300
|
+
semantic$h = tokensData.semantic;
|
|
2301
2301
|
// Base styles shared between button and link
|
|
2302
|
-
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$
|
|
2302
|
+
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$h.motion.hover, ";\n white-space: nowrap;\n user-select: none;\n \n &:focus {\n outline: ").concat(button$1.focus.outline, ";\n outline-offset: ").concat(button$1.focus.outlineOffset, ";\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n");
|
|
2303
2303
|
// Dynamic variant styles using component tokens
|
|
2304
2304
|
var getVariantStyles$1 = function getVariantStyles(_a) {
|
|
2305
2305
|
var $variant = _a.$variant;
|
|
@@ -2368,14 +2368,14 @@ var StyledButton = styled.button.withConfig({
|
|
|
2368
2368
|
},
|
|
2369
2369
|
displayName: "Button__StyledButton",
|
|
2370
2370
|
componentId: "sc-1eiuum9-0"
|
|
2371
|
-
})(templateObject_1$
|
|
2371
|
+
})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
|
|
2372
2372
|
var StyledLink = styled.a.withConfig({
|
|
2373
2373
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2374
2374
|
return !prop.startsWith('$');
|
|
2375
2375
|
},
|
|
2376
2376
|
displayName: "Button__StyledLink",
|
|
2377
2377
|
componentId: "sc-1eiuum9-1"
|
|
2378
|
-
})(templateObject_2$
|
|
2378
|
+
})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"], ["\n ", "\n border-radius: ", ";\n \n ", "\n ", "\n"
|
|
2379
2379
|
// Helper function to get icon size based on button size
|
|
2380
2380
|
])), baseButtonStyles, button$1.primary.borderRadius, getVariantStyles$1, getSizeStyles$1);
|
|
2381
2381
|
// Helper function to get icon size based on button size
|
|
@@ -2476,24 +2476,24 @@ var Button = function Button(_a) {
|
|
|
2476
2476
|
children: renderButtonContent(children, iconName, size)
|
|
2477
2477
|
}));
|
|
2478
2478
|
};
|
|
2479
|
-
var templateObject_1$
|
|
2479
|
+
var templateObject_1$F, templateObject_2$s;
|
|
2480
2480
|
|
|
2481
|
-
var semantic$
|
|
2482
|
-
base$
|
|
2483
|
-
var color$
|
|
2484
|
-
typography$4 = semantic$
|
|
2485
|
-
border$
|
|
2486
|
-
spacing$7 = semantic$
|
|
2487
|
-
var category = color$
|
|
2488
|
-
var radius$3 = border$
|
|
2489
|
-
var layout$
|
|
2481
|
+
var semantic$g = tokensData.semantic,
|
|
2482
|
+
base$c = tokensData.base;
|
|
2483
|
+
var color$7 = semantic$g.color,
|
|
2484
|
+
typography$4 = semantic$g.typography,
|
|
2485
|
+
border$8 = semantic$g.border,
|
|
2486
|
+
spacing$7 = semantic$g.spacing;
|
|
2487
|
+
var category = color$7.category;
|
|
2488
|
+
var radius$3 = border$8.radius;
|
|
2489
|
+
var layout$4 = spacing$7.layout;
|
|
2490
2490
|
var StyledCategoryBadge = styled.span.withConfig({
|
|
2491
2491
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
2492
2492
|
return !prop.startsWith('$');
|
|
2493
2493
|
},
|
|
2494
2494
|
displayName: "CategoryBadge__StyledCategoryBadge",
|
|
2495
2495
|
componentId: "sc-17aslpn-0"
|
|
2496
|
-
})(templateObject_1$
|
|
2496
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: ", ";\n white-space: nowrap;\n user-select: none;\n border-style: solid;\n border-width: ", ";\n \n /* Size styles */\n height: ", ";\n padding: ", ";\n font: ", ";\n gap: ", ";\n \n /* Variant + Color styles */\n background-color: ", ";\n \n color: ", ";\n \n border-color: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: ", ";\n white-space: nowrap;\n user-select: none;\n border-style: solid;\n border-width: ", ";\n \n /* Size styles */\n height: ", ";\n padding: ", ";\n font: ", ";\n gap: ", ";\n \n /* Variant + Color styles */\n background-color: ", ";\n \n color: ", ";\n \n border-color: ", ";\n"
|
|
2497
2497
|
/**
|
|
2498
2498
|
* CategoryBadge component for displaying transaction categories
|
|
2499
2499
|
*
|
|
@@ -2511,16 +2511,16 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
2511
2511
|
* Travel
|
|
2512
2512
|
* </CategoryBadge>
|
|
2513
2513
|
* ```
|
|
2514
|
-
*/])), radius$3.circle, base$
|
|
2514
|
+
*/])), radius$3.circle, base$c.fontWeight[3], base$c.border.width[1], function (_a) {
|
|
2515
2515
|
var $size = _a.$size;
|
|
2516
2516
|
return $size === 'small' ? '24px' : '32px';
|
|
2517
2517
|
}, function (_a) {
|
|
2518
2518
|
var $size = _a.$size;
|
|
2519
|
-
return $size === 'small' ? "".concat(layout$
|
|
2519
|
+
return $size === 'small' ? "".concat(layout$4.xs, " ").concat(layout$4.sm) : "".concat(layout$4.sm, " ").concat(layout$4.md);
|
|
2520
2520
|
}, function (_a) {
|
|
2521
2521
|
var $size = _a.$size;
|
|
2522
2522
|
return $size === 'small' ? typography$4.caption : typography$4.small;
|
|
2523
|
-
}, layout$
|
|
2523
|
+
}, layout$4.xs, function (_a) {
|
|
2524
2524
|
var $color = _a.$color,
|
|
2525
2525
|
$variant = _a.$variant;
|
|
2526
2526
|
if ($variant === 'filled') {
|
|
@@ -2535,7 +2535,7 @@ var StyledCategoryBadge = styled.span.withConfig({
|
|
|
2535
2535
|
var $color = _a.$color,
|
|
2536
2536
|
$variant = _a.$variant;
|
|
2537
2537
|
if ($variant === 'filled') {
|
|
2538
|
-
return color$
|
|
2538
|
+
return color$7.text.inverse;
|
|
2539
2539
|
}
|
|
2540
2540
|
return category[$color];
|
|
2541
2541
|
}, function (_a) {
|
|
@@ -2591,7 +2591,7 @@ var CategoryBadge = function CategoryBadge(_a) {
|
|
|
2591
2591
|
});
|
|
2592
2592
|
};
|
|
2593
2593
|
CategoryBadge.displayName = 'CategoryBadge';
|
|
2594
|
-
var templateObject_1$
|
|
2594
|
+
var templateObject_1$E;
|
|
2595
2595
|
|
|
2596
2596
|
var chip = tokensData.component.chip;
|
|
2597
2597
|
// Helper function to get variant styles matching Button's approach
|
|
@@ -2635,7 +2635,7 @@ var StyledChip = styled.span.withConfig({
|
|
|
2635
2635
|
},
|
|
2636
2636
|
displayName: "ChipBase__StyledChip",
|
|
2637
2637
|
componentId: "sc-moa6zc-0"
|
|
2638
|
-
})(templateObject_1$
|
|
2638
|
+
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: ", ";\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: ", ";\n cursor: ", ";\n \n ", "\n ", "\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n height: max-content;\n border-radius: ", ";\n box-sizing: border-box;\n user-select: none;\n white-space: nowrap;\n transition: ", ";\n cursor: ", ";\n \n ", "\n ", "\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"
|
|
2639
2639
|
// Icon container for selected indicator or leading icons
|
|
2640
2640
|
])), chip["default"].borderRadius, tokensData.semantic.motion.hover, function (props) {
|
|
2641
2641
|
return props.$disabled ? 'not-allowed' : props.$clickable ? 'pointer' : 'default';
|
|
@@ -2644,7 +2644,7 @@ var StyledChip = styled.span.withConfig({
|
|
|
2644
2644
|
var IconContainer = styled.span.withConfig({
|
|
2645
2645
|
displayName: "ChipBase__IconContainer",
|
|
2646
2646
|
componentId: "sc-moa6zc-1"
|
|
2647
|
-
})(templateObject_2$
|
|
2647
|
+
})(templateObject_2$r || (templateObject_2$r = __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"
|
|
2648
2648
|
// Close button for dismissible chips
|
|
2649
2649
|
])), tokensData.semantic.spacing.layout.xs);
|
|
2650
2650
|
// Close button for dismissible chips
|
|
@@ -2654,10 +2654,10 @@ var CloseButton = styled.button.withConfig({
|
|
|
2654
2654
|
},
|
|
2655
2655
|
displayName: "ChipBase__CloseButton",
|
|
2656
2656
|
componentId: "sc-moa6zc-2"
|
|
2657
|
-
})(templateObject_3$
|
|
2657
|
+
})(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 2px;\n border-radius: ", ";\n cursor: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n background-color: rgba(0, 0, 0, 0.1);\n }\n \n &:active:not(:disabled) {\n background-color: rgba(0, 0, 0, 0.15);\n }\n \n &:disabled {\n color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n border-radius: ", ";\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-left: ", ";\n background: transparent;\n border: none;\n padding: 2px;\n border-radius: ", ";\n cursor: ", ";\n color: inherit;\n transition: ", ";\n \n &:hover:not(:disabled) {\n background-color: rgba(0, 0, 0, 0.1);\n }\n \n &:active:not(:disabled) {\n background-color: rgba(0, 0, 0, 0.15);\n }\n \n &:disabled {\n color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n border-radius: ", ";\n }\n"])), tokensData.semantic.spacing.layout.sm, tokensData.semantic.border.radius.xs, function (props) {
|
|
2658
2658
|
return props.$disabled ? 'not-allowed' : 'pointer';
|
|
2659
2659
|
}, tokensData.semantic.motion.hover, tokensData.semantic.color.text.disabled, chip.focus.outline, chip.focus.outlineOffset, chip["default"].borderRadius);
|
|
2660
|
-
var templateObject_1$
|
|
2660
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$p;
|
|
2661
2661
|
|
|
2662
2662
|
/**
|
|
2663
2663
|
* Chip - Compact element for displaying tags, categories, and labels
|
|
@@ -2907,7 +2907,7 @@ var spacing$6 = tokensData.semantic.spacing;
|
|
|
2907
2907
|
var StyledContainer$2 = styled.div.withConfig({
|
|
2908
2908
|
displayName: "Container__StyledContainer",
|
|
2909
2909
|
componentId: "sc-17dbj6n-0"
|
|
2910
|
-
})(templateObject_1$
|
|
2910
|
+
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: ", ";\n padding-right: ", ";\n \n ", " {\n max-width: 640px;\n }\n \n ", " {\n max-width: 768px;\n }\n \n ", " {\n max-width: 1024px;\n }\n \n ", " {\n max-width: 1280px;\n }\n \n ", " {\n max-width: 1536px;\n }\n"], ["\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: ", ";\n padding-right: ", ";\n \n ", " {\n max-width: 640px;\n }\n \n ", " {\n max-width: 768px;\n }\n \n ", " {\n max-width: 1024px;\n }\n \n ", " {\n max-width: 1280px;\n }\n \n ", " {\n max-width: 1536px;\n }\n"])), spacing$6.layout['2xl'], spacing$6.layout['2xl'], media$1.sm, media$1.md, media$1.lg, media$1.xl, media$1['2xl']);
|
|
2911
2911
|
var Container$1 = function Container(_a) {
|
|
2912
2912
|
var children = _a.children,
|
|
2913
2913
|
props = __rest(_a, ["children"]);
|
|
@@ -2915,25 +2915,25 @@ var Container$1 = function Container(_a) {
|
|
|
2915
2915
|
children: children
|
|
2916
2916
|
}));
|
|
2917
2917
|
};
|
|
2918
|
-
var templateObject_1$
|
|
2918
|
+
var templateObject_1$C;
|
|
2919
2919
|
|
|
2920
|
-
var base$
|
|
2920
|
+
var base$b = tokensData.base;
|
|
2921
2921
|
var PictureWrapper = styled.div.withConfig({
|
|
2922
2922
|
displayName: "Picture__PictureWrapper",
|
|
2923
2923
|
componentId: "sc-11d9tei-0"
|
|
2924
|
-
})(templateObject_1$
|
|
2924
|
+
})(templateObject_1$B || (templateObject_1$B = __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);
|
|
2925
2925
|
var ImageLink = styled.a.withConfig({
|
|
2926
2926
|
displayName: "Picture__ImageLink",
|
|
2927
2927
|
componentId: "sc-11d9tei-1"
|
|
2928
|
-
})(templateObject_2$
|
|
2928
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n display: block;\n cursor: pointer;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"], ["\n display: block;\n cursor: pointer;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"])), base$b.duration.normal, base$b.easing.easeInOut);
|
|
2929
2929
|
var ImageButton = styled.button.withConfig({
|
|
2930
2930
|
displayName: "Picture__ImageButton",
|
|
2931
2931
|
componentId: "sc-11d9tei-2"
|
|
2932
|
-
})(templateObject_3$
|
|
2932
|
+
})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n display: block;\n width: 100%;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"], ["\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n display: block;\n width: 100%;\n transition: opacity ", " ", ";\n \n &:hover {\n opacity: 0.8;\n }\n"])), base$b.duration.normal, base$b.easing.easeInOut);
|
|
2933
2933
|
var StyledImage = styled.img.withConfig({
|
|
2934
2934
|
displayName: "Picture__StyledImage",
|
|
2935
2935
|
componentId: "sc-11d9tei-3"
|
|
2936
|
-
})(templateObject_4$
|
|
2936
|
+
})(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n width: 100%;\n height: auto;\n border-radius: ", ";\n display: block;\n"], ["\n width: 100%;\n height: auto;\n border-radius: ", ";\n display: block;\n"])), base$b.border.radius[2]);
|
|
2937
2937
|
var Picture = function Picture(_a) {
|
|
2938
2938
|
var title = _a.title,
|
|
2939
2939
|
src = _a.src,
|
|
@@ -2963,18 +2963,18 @@ var Picture = function Picture(_a) {
|
|
|
2963
2963
|
}) : image
|
|
2964
2964
|
});
|
|
2965
2965
|
};
|
|
2966
|
-
var templateObject_1$
|
|
2966
|
+
var templateObject_1$B, templateObject_2$q, templateObject_3$o, templateObject_4$k;
|
|
2967
2967
|
|
|
2968
2968
|
var _a$7 = tokensData.semantic,
|
|
2969
2969
|
typography$3 = _a$7.typography,
|
|
2970
|
-
color$
|
|
2970
|
+
color$6 = _a$7.color;
|
|
2971
2971
|
var TimeStyled = styled.time.withConfig({
|
|
2972
2972
|
displayName: "DateFormatter__TimeStyled",
|
|
2973
2973
|
componentId: "sc-5464cc-0"
|
|
2974
|
-
})(templateObject_1$
|
|
2974
|
+
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"
|
|
2975
2975
|
/**
|
|
2976
2976
|
* Formats a date with smart relative/absolute logic
|
|
2977
|
-
*/])), typography$3.label, color$
|
|
2977
|
+
*/])), typography$3.label, color$6.text.subdued);
|
|
2978
2978
|
/**
|
|
2979
2979
|
* Formats a date with smart relative/absolute logic
|
|
2980
2980
|
*/
|
|
@@ -3020,7 +3020,7 @@ var DateFormatter = function DateFormatter(_a) {
|
|
|
3020
3020
|
children: displayText
|
|
3021
3021
|
});
|
|
3022
3022
|
};
|
|
3023
|
-
var templateObject_1$
|
|
3023
|
+
var templateObject_1$A;
|
|
3024
3024
|
|
|
3025
3025
|
var motion$2 = tokensData.semantic.motion,
|
|
3026
3026
|
_a$6 = tokensData.component,
|
|
@@ -3032,7 +3032,7 @@ var IconButtonStyled = styled.button.withConfig({
|
|
|
3032
3032
|
},
|
|
3033
3033
|
displayName: "IconButton__IconButtonStyled",
|
|
3034
3034
|
componentId: "sc-k8b14t-0"
|
|
3035
|
-
})(templateObject_1$
|
|
3035
|
+
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n border: none;\n border-radius: ", ";\n transition: ", ";\n box-sizing: border-box;\n display: ", ";\n justify-content: ", ";\n align-items: ", ";\n height: max-content;\n cursor: pointer;\n position: relative;\n\n /* Size-specific dimensions from component tokens */\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n\n &:hover:not(:disabled) {\n background-color: ", ";\n }\n\n &:active:not(:disabled) {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n border: 1px solid;\n }\n\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n"], ["\n background-color: ", ";\n color: ", ";\n border: none;\n border-radius: ", ";\n transition: ", ";\n box-sizing: border-box;\n display: ", ";\n justify-content: ", ";\n align-items: ", ";\n height: max-content;\n cursor: pointer;\n position: relative;\n\n /* Size-specific dimensions from component tokens */\n min-width: ", ";\n min-height: ", ";\n padding: ", ";\n\n &:hover:not(:disabled) {\n background-color: ", ";\n }\n\n &:active:not(:disabled) {\n background-color: ", ";\n }\n\n &:focus {\n outline: ", ";\n outline-offset: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n border: 1px solid;\n }\n\n /* Reduced motion support */\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n"])), function (_a) {
|
|
3036
3036
|
var $variant = _a.$variant;
|
|
3037
3037
|
switch ($variant) {
|
|
3038
3038
|
case 'primary':
|
|
@@ -3140,7 +3140,7 @@ var IconButton = function IconButton(_a) {
|
|
|
3140
3140
|
})
|
|
3141
3141
|
}));
|
|
3142
3142
|
};
|
|
3143
|
-
var templateObject_1$
|
|
3143
|
+
var templateObject_1$z;
|
|
3144
3144
|
|
|
3145
3145
|
var StyledWrapper = styled.span.withConfig({
|
|
3146
3146
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3148,7 +3148,7 @@ var StyledWrapper = styled.span.withConfig({
|
|
|
3148
3148
|
},
|
|
3149
3149
|
displayName: "MoneyDisplay__StyledWrapper",
|
|
3150
3150
|
componentId: "sc-1mddej3-0"
|
|
3151
|
-
})(templateObject_1$
|
|
3151
|
+
})(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n text-align: ", ";\n font-weight: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n text-align: ", ";\n font-weight: ", ";\n"
|
|
3152
3152
|
// Map size to Typography variant
|
|
3153
3153
|
])), function (_a) {
|
|
3154
3154
|
var $align = _a.$align;
|
|
@@ -3251,28 +3251,28 @@ var MoneyDisplay = function MoneyDisplay(_a) {
|
|
|
3251
3251
|
})]
|
|
3252
3252
|
});
|
|
3253
3253
|
};
|
|
3254
|
-
var templateObject_1$
|
|
3254
|
+
var templateObject_1$y;
|
|
3255
3255
|
|
|
3256
3256
|
// Destructure tokens
|
|
3257
|
-
var semantic$
|
|
3258
|
-
var _a$5 = __assign(__assign({}, semantic$
|
|
3257
|
+
var semantic$f = tokensData.semantic;
|
|
3258
|
+
var _a$5 = __assign(__assign({}, semantic$f), {
|
|
3259
3259
|
component: tokensData.component
|
|
3260
3260
|
}),
|
|
3261
|
-
color$
|
|
3262
|
-
border$
|
|
3261
|
+
color$5 = _a$5.color,
|
|
3262
|
+
border$7 = _a$5.border,
|
|
3263
3263
|
motion$1 = _a$5.motion,
|
|
3264
3264
|
component$2 = _a$5.component;
|
|
3265
|
-
var radius$2 = border$
|
|
3265
|
+
var radius$2 = border$7.radius;
|
|
3266
3266
|
var ProgressBarContainer = styled.div.withConfig({
|
|
3267
3267
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3268
3268
|
return !prop.startsWith('$');
|
|
3269
3269
|
},
|
|
3270
3270
|
displayName: "ProgressBar__ProgressBarContainer",
|
|
3271
3271
|
componentId: "sc-1nco33q-0"
|
|
3272
|
-
})(templateObject_3$
|
|
3273
|
-
return props.$variant === 'horizontal' && css(templateObject_1$
|
|
3272
|
+
})(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"], ["\n background-color: ", ";\n border-radius: ", ";\n overflow: hidden;\n\n ", "\n\n ", "\n"])), color$5.background.disabled, radius$2.xs, function (props) {
|
|
3273
|
+
return props.$variant === 'horizontal' && css(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n width: 100%;\n height: ", ";\n "], ["\n width: 100%;\n height: ", ";\n "])), props.$height ? component$2.progressBar.sizes[props.$height].height : component$2.progressBar.sizes.md.height);
|
|
3274
3274
|
}, function (props) {
|
|
3275
|
-
return props.$variant === 'vertical' && css(templateObject_2$
|
|
3275
|
+
return props.$variant === 'vertical' && css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n "], ["\n width: ", ";\n height: 100%;\n "])), props.$width ? component$2.progressBar.sizes[props.$width].height : component$2.progressBar.sizes.md.height);
|
|
3276
3276
|
});
|
|
3277
3277
|
var ProgressBarFill = styled.div.withConfig({
|
|
3278
3278
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3280,25 +3280,25 @@ var ProgressBarFill = styled.div.withConfig({
|
|
|
3280
3280
|
},
|
|
3281
3281
|
displayName: "ProgressBar__ProgressBarFill",
|
|
3282
3282
|
componentId: "sc-1nco33q-1"
|
|
3283
|
-
})(templateObject_7$
|
|
3283
|
+
})(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"], ["\n height: 100%;\n transition: ", ";\n\n ", "\n\n ", "\n\n ", "\n"])), motion$1.transition.normal, function (props) {
|
|
3284
3284
|
var backgroundColor;
|
|
3285
3285
|
switch (props.$color) {
|
|
3286
3286
|
case 'success':
|
|
3287
|
-
backgroundColor = color$
|
|
3287
|
+
backgroundColor = color$5.background.success;
|
|
3288
3288
|
break;
|
|
3289
3289
|
case 'error':
|
|
3290
|
-
backgroundColor = color$
|
|
3290
|
+
backgroundColor = color$5.background.error;
|
|
3291
3291
|
break;
|
|
3292
3292
|
case 'default':
|
|
3293
3293
|
default:
|
|
3294
|
-
backgroundColor = color$
|
|
3294
|
+
backgroundColor = color$5.background.interactive;
|
|
3295
3295
|
break;
|
|
3296
3296
|
}
|
|
3297
|
-
return css(templateObject_4$
|
|
3297
|
+
return css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), backgroundColor);
|
|
3298
3298
|
}, function (props) {
|
|
3299
|
-
return props.$variant === 'horizontal' && css(templateObject_5$
|
|
3299
|
+
return props.$variant === 'horizontal' && css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n width: ", "%;\n "], ["\n width: ", "%;\n "])), Math.min(100, Math.max(0, props.$value)));
|
|
3300
3300
|
}, function (props) {
|
|
3301
|
-
return props.$variant === 'vertical' && css(templateObject_6$
|
|
3301
|
+
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)));
|
|
3302
3302
|
});
|
|
3303
3303
|
var ProgressBar = function ProgressBar(_a) {
|
|
3304
3304
|
var value = _a.value,
|
|
@@ -3325,7 +3325,7 @@ var ProgressBar = function ProgressBar(_a) {
|
|
|
3325
3325
|
})
|
|
3326
3326
|
});
|
|
3327
3327
|
};
|
|
3328
|
-
var templateObject_1$
|
|
3328
|
+
var templateObject_1$x, templateObject_2$p, templateObject_3$n, templateObject_4$j, templateObject_5$f, templateObject_6$c, templateObject_7$a;
|
|
3329
3329
|
|
|
3330
3330
|
// Destructure tokens for cleaner access
|
|
3331
3331
|
var separatorTokens = tokensData.component.separator;
|
|
@@ -3336,7 +3336,7 @@ var StyledDivider = styled.div.withConfig({
|
|
|
3336
3336
|
},
|
|
3337
3337
|
displayName: "Divider__StyledDivider",
|
|
3338
3338
|
componentId: "sc-1l0c8ja-0"
|
|
3339
|
-
})(templateObject_1$
|
|
3339
|
+
})(templateObject_1$w || (templateObject_1$w = __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"
|
|
3340
3340
|
/**
|
|
3341
3341
|
* Divider is an atomic component that provides visual separation between content sections.
|
|
3342
3342
|
*
|
|
@@ -3449,7 +3449,7 @@ var Divider = function Divider(_a) {
|
|
|
3449
3449
|
"aria-orientation": orientation
|
|
3450
3450
|
});
|
|
3451
3451
|
};
|
|
3452
|
-
var templateObject_1$
|
|
3452
|
+
var templateObject_1$w;
|
|
3453
3453
|
|
|
3454
3454
|
var StyledStack = styled.div.withConfig({
|
|
3455
3455
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3457,7 +3457,7 @@ var StyledStack = styled.div.withConfig({
|
|
|
3457
3457
|
},
|
|
3458
3458
|
displayName: "Stack__StyledStack",
|
|
3459
3459
|
componentId: "sc-1ehkxgy-0"
|
|
3460
|
-
})(templateObject_1$
|
|
3460
|
+
})(templateObject_1$v || (templateObject_1$v = __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"
|
|
3461
3461
|
// Helper function to convert gap prop to CSS value
|
|
3462
3462
|
])));
|
|
3463
3463
|
// Helper function to convert gap prop to CSS value
|
|
@@ -3496,7 +3496,7 @@ var Stack = function Stack(_a) {
|
|
|
3496
3496
|
children: children
|
|
3497
3497
|
});
|
|
3498
3498
|
};
|
|
3499
|
-
var templateObject_1$
|
|
3499
|
+
var templateObject_1$v;
|
|
3500
3500
|
|
|
3501
3501
|
// Destructure tokens for cleaner access
|
|
3502
3502
|
var statusColors = tokensData.semantic.color.status;
|
|
@@ -3504,7 +3504,7 @@ var spacing$5 = tokensData.semantic.spacing.layout;
|
|
|
3504
3504
|
var radius$1 = tokensData.semantic.border.radius;
|
|
3505
3505
|
var transition = tokensData.semantic.motion.transition;
|
|
3506
3506
|
var typography$2 = tokensData.semantic.typography;
|
|
3507
|
-
var scaleIn = keyframes(templateObject_1$
|
|
3507
|
+
var scaleIn$1 = keyframes(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n"], ["\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n"])));
|
|
3508
3508
|
var getStatusConfig = function getStatusConfig(status) {
|
|
3509
3509
|
var configs = {
|
|
3510
3510
|
pending: {
|
|
@@ -3571,7 +3571,7 @@ var StyledStatusBadge = styled.span.withConfig({
|
|
|
3571
3571
|
},
|
|
3572
3572
|
displayName: "StatusBadge__StyledStatusBadge",
|
|
3573
3573
|
componentId: "sc-1paksgb-0"
|
|
3574
|
-
})(templateObject_2$
|
|
3574
|
+
})(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: 500;\n white-space: nowrap;\n user-select: none;\n animation: ", " 0.2s ease-out;\n transition: ", ";\n \n /* Size styles */\n ", "\n \n /* Status color styles */\n ", "\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n font-weight: 500;\n white-space: nowrap;\n user-select: none;\n animation: ", " 0.2s ease-out;\n transition: ", ";\n \n /* Size styles */\n ", "\n \n /* Status color styles */\n ", "\n"])), radius$1.circle, scaleIn$1, transition.fast, function (_a) {
|
|
3575
3575
|
var $size = _a.$size;
|
|
3576
3576
|
var size = sizeConfig[$size];
|
|
3577
3577
|
return "\n height: ".concat(size.height, ";\n padding: ").concat(size.padding, ";\n font: ").concat(size.font, ";\n gap: ").concat(size.gap, ";\n ");
|
|
@@ -3583,7 +3583,7 @@ var StyledStatusBadge = styled.span.withConfig({
|
|
|
3583
3583
|
var ScreenReaderOnly = styled.span.withConfig({
|
|
3584
3584
|
displayName: "StatusBadge__ScreenReaderOnly",
|
|
3585
3585
|
componentId: "sc-1paksgb-1"
|
|
3586
|
-
})(templateObject_3$
|
|
3586
|
+
})(templateObject_3$m || (templateObject_3$m = __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"
|
|
3587
3587
|
/**
|
|
3588
3588
|
* StatusBadge component for displaying transaction or task status
|
|
3589
3589
|
*
|
|
@@ -3663,59 +3663,59 @@ var StatusBadge = function StatusBadge(_a) {
|
|
|
3663
3663
|
});
|
|
3664
3664
|
};
|
|
3665
3665
|
StatusBadge.displayName = 'StatusBadge';
|
|
3666
|
-
var templateObject_1$
|
|
3666
|
+
var templateObject_1$u, templateObject_2$o, templateObject_3$m;
|
|
3667
3667
|
|
|
3668
|
-
var semantic$
|
|
3669
|
-
var color$
|
|
3670
|
-
spacing$4 = semantic$
|
|
3671
|
-
border$
|
|
3672
|
-
typography$1 = semantic$
|
|
3673
|
-
size = semantic$
|
|
3674
|
-
var layout$
|
|
3675
|
-
var radius = border$
|
|
3668
|
+
var semantic$e = tokensData.semantic;
|
|
3669
|
+
var color$4 = semantic$e.color,
|
|
3670
|
+
spacing$4 = semantic$e.spacing,
|
|
3671
|
+
border$6 = semantic$e.border,
|
|
3672
|
+
typography$1 = semantic$e.typography,
|
|
3673
|
+
size = semantic$e.size;
|
|
3674
|
+
var layout$3 = spacing$4.layout;
|
|
3675
|
+
var radius = border$6.radius;
|
|
3676
3676
|
var StyledTag = styled.span.withConfig({
|
|
3677
3677
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3678
3678
|
return !prop.startsWith('$');
|
|
3679
3679
|
},
|
|
3680
3680
|
displayName: "Tag__StyledTag",
|
|
3681
3681
|
componentId: "sc-lzfmti-0"
|
|
3682
|
-
})(templateObject_1$
|
|
3682
|
+
})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n user-select: none;\n white-space: nowrap;\n max-height: ", ";\n \n /* Size - fixed to small */\n padding: ", " ", ";\n font: ", ";\n \n /* Variant styles */\n background-color: ", ";\n \n color: ", ";\n \n border: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: ", ";\n user-select: none;\n white-space: nowrap;\n max-height: ", ";\n \n /* Size - fixed to small */\n padding: ", " ", ";\n font: ", ";\n \n /* Variant styles */\n background-color: ", ";\n \n color: ", ";\n \n border: ", ";\n"
|
|
3683
3683
|
/**
|
|
3684
3684
|
* Tag component for categorizing and labeling content
|
|
3685
3685
|
*
|
|
3686
3686
|
* A static, non-interactive label used to categorize elements or objects in the UI.
|
|
3687
3687
|
* Tags help users quickly identify and understand content classification.
|
|
3688
|
-
*/])), radius.sm, size.icon.lg || '2rem', layout$
|
|
3688
|
+
*/])), radius.sm, size.icon.lg || '2rem', layout$3.xs, layout$3.sm, typography$1.button3, function (_a) {
|
|
3689
3689
|
var $variant = _a.$variant;
|
|
3690
3690
|
switch ($variant) {
|
|
3691
3691
|
case 'interactive':
|
|
3692
|
-
return color$
|
|
3692
|
+
return color$4.background['interactive-subtle'];
|
|
3693
3693
|
case 'success':
|
|
3694
|
-
return color$
|
|
3694
|
+
return color$4.background['success-subtle'];
|
|
3695
3695
|
case 'warning':
|
|
3696
|
-
return color$
|
|
3696
|
+
return color$4.background['warning-subtle'];
|
|
3697
3697
|
case 'error':
|
|
3698
|
-
return color$
|
|
3698
|
+
return color$4.background['error-subtle'];
|
|
3699
3699
|
case 'emphasis':
|
|
3700
|
-
return color$
|
|
3700
|
+
return color$4.background.emphasis;
|
|
3701
3701
|
default:
|
|
3702
|
-
return color$
|
|
3702
|
+
return color$4.background.surface;
|
|
3703
3703
|
}
|
|
3704
3704
|
}, function (_a) {
|
|
3705
3705
|
var $variant = _a.$variant;
|
|
3706
3706
|
switch ($variant) {
|
|
3707
3707
|
case 'interactive':
|
|
3708
|
-
return color$
|
|
3708
|
+
return color$4.text.interactive;
|
|
3709
3709
|
case 'success':
|
|
3710
|
-
return color$
|
|
3710
|
+
return color$4.text.success;
|
|
3711
3711
|
case 'warning':
|
|
3712
|
-
return color$
|
|
3712
|
+
return color$4.text.warning;
|
|
3713
3713
|
case 'error':
|
|
3714
|
-
return color$
|
|
3714
|
+
return color$4.text.error;
|
|
3715
3715
|
case 'emphasis':
|
|
3716
|
-
return color$
|
|
3716
|
+
return color$4.text.inverse;
|
|
3717
3717
|
default:
|
|
3718
|
-
return color$
|
|
3718
|
+
return color$4.text["default"];
|
|
3719
3719
|
}
|
|
3720
3720
|
}, function (_a) {
|
|
3721
3721
|
var $variant = _a.$variant,
|
|
@@ -3723,17 +3723,17 @@ var StyledTag = styled.span.withConfig({
|
|
|
3723
3723
|
if (!$border) return 'none';
|
|
3724
3724
|
switch ($variant) {
|
|
3725
3725
|
case 'interactive':
|
|
3726
|
-
return "1px solid ".concat(color$
|
|
3726
|
+
return "1px solid ".concat(color$4.border.interactive);
|
|
3727
3727
|
case 'success':
|
|
3728
|
-
return "1px solid ".concat(color$
|
|
3728
|
+
return "1px solid ".concat(color$4.border.success);
|
|
3729
3729
|
case 'warning':
|
|
3730
|
-
return "1px solid ".concat(color$
|
|
3730
|
+
return "1px solid ".concat(color$4.border.warning);
|
|
3731
3731
|
case 'error':
|
|
3732
|
-
return "1px solid ".concat(color$
|
|
3732
|
+
return "1px solid ".concat(color$4.border.error);
|
|
3733
3733
|
case 'emphasis':
|
|
3734
|
-
return "1px solid ".concat(color$
|
|
3734
|
+
return "1px solid ".concat(color$4.background.emphasis);
|
|
3735
3735
|
default:
|
|
3736
|
-
return "1px solid ".concat(color$
|
|
3736
|
+
return "1px solid ".concat(color$4.border["default"]);
|
|
3737
3737
|
}
|
|
3738
3738
|
});
|
|
3739
3739
|
/**
|
|
@@ -3762,34 +3762,34 @@ var Tag = function Tag(_a) {
|
|
|
3762
3762
|
children: children
|
|
3763
3763
|
}));
|
|
3764
3764
|
};
|
|
3765
|
-
var templateObject_1$
|
|
3765
|
+
var templateObject_1$t;
|
|
3766
3766
|
|
|
3767
3767
|
// Destructure tokens for cleaner access
|
|
3768
|
-
var semantic$
|
|
3769
|
-
var spacing$3 = semantic$
|
|
3770
|
-
var layout$
|
|
3768
|
+
var semantic$d = tokensData.semantic;
|
|
3769
|
+
var spacing$3 = semantic$d.spacing;
|
|
3770
|
+
var layout$2 = spacing$3.layout;
|
|
3771
3771
|
var StyledBalanceSection = styled.div.withConfig({
|
|
3772
3772
|
displayName: "AccountCard__StyledBalanceSection",
|
|
3773
3773
|
componentId: "sc-1erp7zn-0"
|
|
3774
|
-
})(templateObject_1$
|
|
3774
|
+
})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n margin-bottom: ", ";\n"], ["\n margin-bottom: ", ";\n"])), layout$2.lg);
|
|
3775
3775
|
var StyledTrendSection = styled.div.withConfig({
|
|
3776
3776
|
displayName: "AccountCard__StyledTrendSection",
|
|
3777
3777
|
componentId: "sc-1erp7zn-1"
|
|
3778
|
-
})(templateObject_2$
|
|
3778
|
+
})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n"])), layout$2.xs);
|
|
3779
3779
|
styled.div.withConfig({
|
|
3780
3780
|
displayName: "AccountCard__StyledActions",
|
|
3781
3781
|
componentId: "sc-1erp7zn-2"
|
|
3782
|
-
})(templateObject_3$
|
|
3782
|
+
})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n gap: ", ";\n margin-top: auto;\n"], ["\n display: flex;\n gap: ", ";\n margin-top: auto;\n"])), layout$2.sm);
|
|
3783
3783
|
var StyledStackWrapper = styled.div.withConfig({
|
|
3784
3784
|
displayName: "AccountCard__StyledStackWrapper",
|
|
3785
3785
|
componentId: "sc-1erp7zn-3"
|
|
3786
|
-
})(templateObject_4$
|
|
3786
|
+
})(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
3787
3787
|
var StyledHeaderWrapper = styled.div.withConfig({
|
|
3788
3788
|
displayName: "AccountCard__StyledHeaderWrapper",
|
|
3789
3789
|
componentId: "sc-1erp7zn-4"
|
|
3790
|
-
})(templateObject_5$
|
|
3790
|
+
})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n min-height: 48px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: ", ";\n\n & > span {\n margin-top: -", ";\n }\n"], ["\n min-height: 48px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: ", ";\n\n & > span {\n margin-top: -", ";\n }\n"
|
|
3791
3791
|
// Map trend direction to icon and color
|
|
3792
|
-
])), layout$
|
|
3792
|
+
])), layout$2.none, layout$2.xs);
|
|
3793
3793
|
// Map trend direction to icon and color
|
|
3794
3794
|
var trendToIcon = {
|
|
3795
3795
|
up: 'arrowUp',
|
|
@@ -3939,26 +3939,26 @@ var AccountCard = function AccountCard(_a) {
|
|
|
3939
3939
|
})
|
|
3940
3940
|
});
|
|
3941
3941
|
};
|
|
3942
|
-
var templateObject_1$
|
|
3942
|
+
var templateObject_1$s, templateObject_2$n, templateObject_3$l, templateObject_4$i, templateObject_5$e;
|
|
3943
3943
|
|
|
3944
|
-
var semantic$
|
|
3945
|
-
base$
|
|
3944
|
+
var semantic$c = tokensData.semantic,
|
|
3945
|
+
base$a = tokensData.base;
|
|
3946
3946
|
var StyledListItem = styled.li.withConfig({
|
|
3947
3947
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
3948
3948
|
return !prop.startsWith('$');
|
|
3949
3949
|
},
|
|
3950
3950
|
displayName: "ListItem__StyledListItem",
|
|
3951
3951
|
componentId: "sc-1wzzt21-0"
|
|
3952
|
-
})(templateObject_1$
|
|
3952
|
+
})(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n \n /* Destructive state - apply error color to text */\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n min-height: 44px; /* Touch target minimum */\n position: relative;\n \n /* Disable user selection for interactive items */\n ", "\n \n /* Disabled state */\n ", "\n \n /* Destructive state - apply error color to text */\n ", "\n"])), function (_a) {
|
|
3953
3953
|
var $interactive = _a.$interactive;
|
|
3954
3954
|
return $interactive && 'user-select: none;';
|
|
3955
3955
|
}, function (_a) {
|
|
3956
3956
|
var $disabled = _a.$disabled;
|
|
3957
|
-
return $disabled && "\n opacity: ".concat(base$
|
|
3957
|
+
return $disabled && "\n opacity: ".concat(base$a.opacity[50], ";\n cursor: not-allowed;\n pointer-events: none;\n ");
|
|
3958
3958
|
}, function (_a) {
|
|
3959
3959
|
var $destructive = _a.$destructive,
|
|
3960
3960
|
$disabled = _a.$disabled;
|
|
3961
|
-
return $destructive && !$disabled && "\n color: ".concat(semantic$
|
|
3961
|
+
return $destructive && !$disabled && "\n color: ".concat(semantic$c.color.text.error, ";\n ");
|
|
3962
3962
|
});
|
|
3963
3963
|
var StyledItemContent = styled.div.withConfig({
|
|
3964
3964
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -3966,12 +3966,12 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
3966
3966
|
},
|
|
3967
3967
|
displayName: "ListItem__StyledItemContent",
|
|
3968
3968
|
componentId: "sc-1wzzt21-1"
|
|
3969
|
-
})(templateObject_2$
|
|
3969
|
+
})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n gap: ", ";\n padding: ", ";\n border-radius: ", ";\n background-color: ", ";\n transition: background-color 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$c.spacing.layout.md, function (_a) {
|
|
3970
3970
|
var $spacing = _a.$spacing;
|
|
3971
|
-
return $spacing === 'compact' ? "".concat(semantic$
|
|
3972
|
-
}, base$
|
|
3971
|
+
return $spacing === 'compact' ? "".concat(semantic$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.md) : "".concat(semantic$c.spacing.layout.md, " ").concat(semantic$c.spacing.layout.lg);
|
|
3972
|
+
}, base$a.border.radius[2], function (_a) {
|
|
3973
3973
|
var $selected = _a.$selected;
|
|
3974
|
-
return $selected ? semantic$
|
|
3974
|
+
return $selected ? semantic$c.color.background['interactive-subtle'] : 'transparent';
|
|
3975
3975
|
}, function (_a) {
|
|
3976
3976
|
var $interactive = _a.$interactive,
|
|
3977
3977
|
$disabled = _a.$disabled;
|
|
@@ -3983,26 +3983,26 @@ var StyledItemContent = styled.div.withConfig({
|
|
|
3983
3983
|
$disabled = _a.$disabled,
|
|
3984
3984
|
$selected = _a.$selected;
|
|
3985
3985
|
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 ");
|
|
3986
|
-
}, semantic$
|
|
3986
|
+
}, semantic$c.color.border.interactive);
|
|
3987
3987
|
var StyledIconContainer$1 = styled.div.withConfig({
|
|
3988
3988
|
displayName: "ListItem__StyledIconContainer",
|
|
3989
3989
|
componentId: "sc-1wzzt21-2"
|
|
3990
|
-
})(templateObject_3$
|
|
3990
|
+
})(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
3991
3991
|
var StyledTextContent = styled.div.withConfig({
|
|
3992
3992
|
displayName: "ListItem__StyledTextContent",
|
|
3993
3993
|
componentId: "sc-1wzzt21-3"
|
|
3994
|
-
})(templateObject_4$
|
|
3994
|
+
})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: ", ";\n min-width: 0; /* Allow text truncation */\n"])), semantic$c.spacing.layout.xs);
|
|
3995
3995
|
var StyledRightContent = styled.div.withConfig({
|
|
3996
3996
|
displayName: "ListItem__StyledRightContent",
|
|
3997
3997
|
componentId: "sc-1wzzt21-4"
|
|
3998
|
-
})(templateObject_5$
|
|
3998
|
+
})(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n flex-shrink: 0;\n margin-left: auto;\n"])), semantic$c.spacing.layout.sm);
|
|
3999
3999
|
var StyledChevronIcon = styled.div.withConfig({
|
|
4000
4000
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4001
4001
|
return !prop.startsWith('$');
|
|
4002
4002
|
},
|
|
4003
4003
|
displayName: "ListItem__StyledChevronIcon",
|
|
4004
4004
|
componentId: "sc-1wzzt21-5"
|
|
4005
|
-
})(templateObject_6$
|
|
4005
|
+
})(templateObject_6$b || (templateObject_6$b = __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$c.color.icon.subdued, function (_a) {
|
|
4006
4006
|
var $expanded = _a.$expanded;
|
|
4007
4007
|
return $expanded ? '180deg' : '0deg';
|
|
4008
4008
|
});
|
|
@@ -4012,7 +4012,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
4012
4012
|
},
|
|
4013
4013
|
displayName: "ListItem__StyledExpandedContent",
|
|
4014
4014
|
componentId: "sc-1wzzt21-6"
|
|
4015
|
-
})(templateObject_7$
|
|
4015
|
+
})(templateObject_7$9 || (templateObject_7$9 = __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) {
|
|
4016
4016
|
var $expanded = _a.$expanded;
|
|
4017
4017
|
return $expanded ? '1000px' : '0';
|
|
4018
4018
|
}, function (_a) {
|
|
@@ -4021,7 +4021,7 @@ var StyledExpandedContent = styled.div.withConfig({
|
|
|
4021
4021
|
}, function (_a) {
|
|
4022
4022
|
var $expanded = _a.$expanded,
|
|
4023
4023
|
$spacing = _a.$spacing;
|
|
4024
|
-
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$
|
|
4024
|
+
return $expanded && "\n padding: ".concat($spacing === 'compact' ? "".concat(semantic$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.md, " ").concat(semantic$c.spacing.layout.sm, " 48px") : "".concat(semantic$c.spacing.layout.sm, " ").concat(semantic$c.spacing.layout.lg, " ").concat(semantic$c.spacing.layout.md, " 60px"), ";\n background-color: ").concat(semantic$c.color.background['subtle'], ";\n border-radius: ").concat(base$a.border.radius[2], ";\n margin: 0 ").concat($spacing === 'compact' ? semantic$c.spacing.layout.md : semantic$c.spacing.layout.lg, " ").concat($spacing === 'compact' ? semantic$c.spacing.layout.sm : semantic$c.spacing.layout.md, ";\n ");
|
|
4025
4025
|
});
|
|
4026
4026
|
var ListItem = function ListItem(_a) {
|
|
4027
4027
|
var primary = _a.primary,
|
|
@@ -4134,40 +4134,40 @@ var ListItem = function ListItem(_a) {
|
|
|
4134
4134
|
}));
|
|
4135
4135
|
};
|
|
4136
4136
|
ListItem.displayName = 'ListItem';
|
|
4137
|
-
var templateObject_1$
|
|
4137
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$k, templateObject_4$h, templateObject_5$d, templateObject_6$b, templateObject_7$9;
|
|
4138
4138
|
|
|
4139
4139
|
var _a$4 = tokensData.semantic,
|
|
4140
|
-
color$
|
|
4141
|
-
border$
|
|
4142
|
-
layout = _a$4.spacing.layout,
|
|
4140
|
+
color$3 = _a$4.color,
|
|
4141
|
+
border$5 = _a$4.border,
|
|
4142
|
+
layout$1 = _a$4.spacing.layout,
|
|
4143
4143
|
motion = _a$4.motion,
|
|
4144
|
-
elevation = _a$4.elevation;
|
|
4145
|
-
var slideUp = keyframes(templateObject_1$
|
|
4146
|
-
var fadeIn$
|
|
4147
|
-
var StyledOverlay$
|
|
4144
|
+
elevation$1 = _a$4.elevation;
|
|
4145
|
+
var slideUp = keyframes(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"], ["\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n"])));
|
|
4146
|
+
var fadeIn$2 = keyframes(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
4147
|
+
var StyledOverlay$2 = styled.div.withConfig({
|
|
4148
4148
|
displayName: "ActionSheet__StyledOverlay",
|
|
4149
4149
|
componentId: "sc-regbol-0"
|
|
4150
|
-
})(templateObject_3$
|
|
4150
|
+
})(templateObject_3$j || (templateObject_3$j = __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$2);
|
|
4151
4151
|
var StyledActionSheet = styled.div.withConfig({
|
|
4152
4152
|
displayName: "ActionSheet__StyledActionSheet",
|
|
4153
4153
|
componentId: "sc-regbol-1"
|
|
4154
|
-
})(templateObject_4$
|
|
4155
|
-
var StyledHeader$
|
|
4154
|
+
})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n box-shadow: ", ";\n max-height: 90vh;\n overflow-y: auto;\n z-index: 10000;\n animation: ", " 0.3s ease-out;\n"], ["\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: ", ";\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n box-shadow: ", ";\n max-height: 90vh;\n overflow-y: auto;\n z-index: 10000;\n animation: ", " 0.3s ease-out;\n"])), color$3.background.subtle, border$5.radius.lg, border$5.radius.lg, elevation$1.overlay, slideUp);
|
|
4155
|
+
var StyledHeader$2 = styled.div.withConfig({
|
|
4156
4156
|
displayName: "ActionSheet__StyledHeader",
|
|
4157
4157
|
componentId: "sc-regbol-2"
|
|
4158
|
-
})(templateObject_5$
|
|
4158
|
+
})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", ";\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: ", " ", " ", ";\n border-bottom: ", ";\n"])), layout$1.lg, layout$1.lg, layout$1.md, border$5["default"]);
|
|
4159
4159
|
var StyledHeaderContent = styled.div.withConfig({
|
|
4160
4160
|
displayName: "ActionSheet__StyledHeaderContent",
|
|
4161
4161
|
componentId: "sc-regbol-3"
|
|
4162
|
-
})(templateObject_6$
|
|
4162
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
4163
4163
|
var StyledCloseButton = styled.button.withConfig({
|
|
4164
4164
|
displayName: "ActionSheet__StyledCloseButton",
|
|
4165
4165
|
componentId: "sc-regbol-4"
|
|
4166
|
-
})(templateObject_7$
|
|
4166
|
+
})(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border: none;\n background: transparent;\n color: ", ";\n cursor: pointer;\n border-radius: ", ";\n transition: ", ";\n margin-left: ", ";\n \n &:hover {\n color: ", ";\n background-color: ", ";\n }\n \n &:focus-visible {\n outline: ", ";\n outline-offset: ", ";\n }\n"])), layout$1.sm, color$3.icon.subdued, border$5.radius.sm, motion.hover, layout$1.sm, color$3.icon["default"], color$3.background.surface, border$5.focus, layout$1.xs);
|
|
4167
4167
|
var StyledActionsList = styled.ul.withConfig({
|
|
4168
4168
|
displayName: "ActionSheet__StyledActionsList",
|
|
4169
4169
|
componentId: "sc-regbol-5"
|
|
4170
|
-
})(templateObject_8$
|
|
4170
|
+
})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n padding: ", " ", ";\n margin: 0;\n list-style: none;\n"], ["\n padding: ", " ", ";\n margin: 0;\n list-style: none;\n"
|
|
4171
4171
|
/**
|
|
4172
4172
|
* ActionSheet component for bottom sheet modals
|
|
4173
4173
|
*
|
|
@@ -4200,7 +4200,7 @@ var StyledActionsList = styled.ul.withConfig({
|
|
|
4200
4200
|
* ]}
|
|
4201
4201
|
* />
|
|
4202
4202
|
* ```
|
|
4203
|
-
*/])), layout.sm, layout.md);
|
|
4203
|
+
*/])), layout$1.sm, layout$1.md);
|
|
4204
4204
|
/**
|
|
4205
4205
|
* ActionSheet component for bottom sheet modals
|
|
4206
4206
|
*
|
|
@@ -4314,7 +4314,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
4314
4314
|
});
|
|
4315
4315
|
var hasDestructive = destructiveIndex >= 0;
|
|
4316
4316
|
return /*#__PURE__*/createPortal(jsxs(Fragment, {
|
|
4317
|
-
children: [jsx(StyledOverlay$
|
|
4317
|
+
children: [jsx(StyledOverlay$2, {
|
|
4318
4318
|
onClick: handleOverlayClick
|
|
4319
4319
|
}), jsxs(StyledActionSheet, {
|
|
4320
4320
|
ref: sheetRef,
|
|
@@ -4323,7 +4323,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
4323
4323
|
"aria-labelledby": title ? 'action-sheet-title' : undefined,
|
|
4324
4324
|
"aria-describedby": description ? 'action-sheet-description' : undefined,
|
|
4325
4325
|
"data-testid": dataTestId,
|
|
4326
|
-
children: [(title || description || showCloseButton) && jsxs(StyledHeader$
|
|
4326
|
+
children: [(title || description || showCloseButton) && jsxs(StyledHeader$2, {
|
|
4327
4327
|
children: [jsx(StyledHeaderContent, {
|
|
4328
4328
|
children: jsxs(Stack, {
|
|
4329
4329
|
direction: "column",
|
|
@@ -4379,7 +4379,7 @@ var ActionSheet = function ActionSheet(_a) {
|
|
|
4379
4379
|
})]
|
|
4380
4380
|
}), document.body);
|
|
4381
4381
|
};
|
|
4382
|
-
var templateObject_1$
|
|
4382
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$j, templateObject_4$g, templateObject_5$c, templateObject_6$a, templateObject_7$8, templateObject_8$6;
|
|
4383
4383
|
|
|
4384
4384
|
function detectSpeechRecognitionConstructor(targetWindow) {
|
|
4385
4385
|
if (!targetWindow) return null;
|
|
@@ -4479,69 +4479,69 @@ function agentInputStateTransition(currentState, event) {
|
|
|
4479
4479
|
}
|
|
4480
4480
|
}
|
|
4481
4481
|
|
|
4482
|
-
var semantic$
|
|
4483
|
-
base$
|
|
4482
|
+
var semantic$b = tokensData.semantic,
|
|
4483
|
+
base$9 = tokensData.base,
|
|
4484
4484
|
component$1 = tokensData.component;
|
|
4485
4485
|
var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
|
|
4486
4486
|
var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
|
|
4487
4487
|
var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
|
|
4488
|
-
var rotateRing = keyframes(templateObject_1$
|
|
4488
|
+
var rotateRing = keyframes(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"], ["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"])));
|
|
4489
4489
|
var Container = styled.div.withConfig({
|
|
4490
4490
|
displayName: "AgentInput__Container",
|
|
4491
4491
|
componentId: "sc-fhl996-0"
|
|
4492
|
-
})(templateObject_2$
|
|
4492
|
+
})(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n width: 100%;\n"])), base$9.spacing[2]);
|
|
4493
4493
|
var ControlsRow = styled.div.withConfig({
|
|
4494
4494
|
displayName: "AgentInput__ControlsRow",
|
|
4495
4495
|
componentId: "sc-fhl996-1"
|
|
4496
|
-
})(templateObject_3$
|
|
4496
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4497
4497
|
var InputShell = styled.div.withConfig({
|
|
4498
4498
|
displayName: "AgentInput__InputShell",
|
|
4499
4499
|
componentId: "sc-fhl996-2"
|
|
4500
|
-
})(templateObject_4$
|
|
4500
|
+
})(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", " ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n\n &:focus-within {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n\n &[data-disabled='true'] {\n background-color: ", ";\n border-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n gap: ", ";\n width: 100%;\n padding: ", " ", " ", " ", ";\n background-color: ", ";\n border: ", " solid ", ";\n border-radius: ", ";\n box-shadow: ", ";\n transition: border-color 200ms ease-in-out, outline 200ms ease-in-out;\n\n &:focus-within {\n border-color: ", ";\n outline: ", ";\n outline-offset: ", ";\n }\n\n &[data-disabled='true'] {\n background-color: ", ";\n border-color: ", ";\n }\n"])), base$9.spacing[2], semantic$b.spacing.layout.xs, semantic$b.spacing.layout.sm, semantic$b.spacing.layout.xs, component$1.input["default"].paddingX, component$1.input["default"].backgroundColor, component$1.input["default"].borderWidth, component$1.input["default"].borderColor, semantic$b.border.radius['3xl'], semantic$b.elevation.raised, component$1.input.focus.borderColor, component$1.input.focus.outline, component$1.input.focus.outlineOffset, component$1.input.disabled.backgroundColor, component$1.input.disabled.borderColor);
|
|
4501
4501
|
var Input = styled.input.withConfig({
|
|
4502
4502
|
displayName: "AgentInput__Input",
|
|
4503
4503
|
componentId: "sc-fhl996-3"
|
|
4504
|
-
})(templateObject_5$
|
|
4504
|
+
})(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n min-height: ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"], ["\n flex: 1;\n min-width: 0;\n min-height: ", ";\n border: none;\n background: transparent;\n font: ", ";\n color: ", ";\n outline: none;\n\n &::placeholder {\n color: ", ";\n }\n\n &:disabled {\n color: ", ";\n cursor: not-allowed;\n }\n"])), base$9.spacing[12], semantic$b.typography.body, semantic$b.color.text["default"], semantic$b.color.text.subdued, semantic$b.color.text.disabled);
|
|
4505
4505
|
var InputActions = styled.div.withConfig({
|
|
4506
4506
|
displayName: "AgentInput__InputActions",
|
|
4507
4507
|
componentId: "sc-fhl996-4"
|
|
4508
|
-
})(templateObject_6$
|
|
4508
|
+
})(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"])), semantic$b.spacing.layout.sm);
|
|
4509
4509
|
var CircularActionIconButton = styled(IconButton).withConfig({
|
|
4510
4510
|
displayName: "AgentInput__CircularActionIconButton",
|
|
4511
4511
|
componentId: "sc-fhl996-5"
|
|
4512
|
-
})(templateObject_7$
|
|
4512
|
+
})(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), semantic$b.border.radius.circle);
|
|
4513
4513
|
var InputWrapper = styled.div.withConfig({
|
|
4514
4514
|
displayName: "AgentInput__InputWrapper",
|
|
4515
4515
|
componentId: "sc-fhl996-6"
|
|
4516
|
-
})(templateObject_8$
|
|
4516
|
+
})(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n flex: 1;\n min-width: 0;\n"], ["\n flex: 1;\n min-width: 0;\n"])));
|
|
4517
4517
|
var MicButtonWrapper = styled.div.withConfig({
|
|
4518
4518
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4519
4519
|
return !prop.startsWith('$');
|
|
4520
4520
|
},
|
|
4521
4521
|
displayName: "AgentInput__MicButtonWrapper",
|
|
4522
4522
|
componentId: "sc-fhl996-7"
|
|
4523
|
-
})(templateObject_9$
|
|
4523
|
+
})(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n border-radius: ", ";\n\n & > button {\n position: relative;\n z-index: 1;\n }\n"], ["\n position: relative;\n display: inline-flex;\n border-radius: ", ";\n\n & > button {\n position: relative;\n z-index: 1;\n }\n"])), semantic$b.border.radius.circle);
|
|
4524
4524
|
var MicListeningRing = styled.span.withConfig({
|
|
4525
4525
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4526
4526
|
return !prop.startsWith('$');
|
|
4527
4527
|
},
|
|
4528
4528
|
displayName: "AgentInput__MicListeningRing",
|
|
4529
4529
|
componentId: "sc-fhl996-8"
|
|
4530
|
-
})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"], ["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"])), base$
|
|
4530
|
+
})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"], ["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"])), base$9.border.width[2], base$9.spacing[1], component$1.iconButton.focus.outlineOffset, semantic$b.border.radius.circle, semantic$b.color.background['interactive-subtle'], semantic$b.color.background.interactive, semantic$b.color.background['interactive-hover'], semantic$b.color.background.interactive, semantic$b.color.background['interactive-subtle'], function (_a) {
|
|
4531
4531
|
var $reducedMotion = _a.$reducedMotion;
|
|
4532
4532
|
return !$reducedMotion && css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n animation: ", " 1300ms linear infinite;\n "], ["\n animation: ", " 1300ms linear infinite;\n "])), rotateRing);
|
|
4533
4533
|
});
|
|
4534
4534
|
var StatusRow = styled.div.withConfig({
|
|
4535
4535
|
displayName: "AgentInput__StatusRow",
|
|
4536
4536
|
componentId: "sc-fhl996-9"
|
|
4537
|
-
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"])), base$
|
|
4537
|
+
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"])), base$9.spacing[3], base$9.spacing[6]);
|
|
4538
4538
|
var StatusText = styled.div.withConfig({
|
|
4539
4539
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4540
4540
|
return !prop.startsWith('$');
|
|
4541
4541
|
},
|
|
4542
4542
|
displayName: "AgentInput__StatusText",
|
|
4543
4543
|
componentId: "sc-fhl996-10"
|
|
4544
|
-
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$
|
|
4544
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$b.spacing.layout.xl);
|
|
4545
4545
|
var StatusAnnouncement = styled.div.withConfig({
|
|
4546
4546
|
displayName: "AgentInput__StatusAnnouncement",
|
|
4547
4547
|
componentId: "sc-fhl996-11"
|
|
@@ -4549,14 +4549,14 @@ var StatusAnnouncement = styled.div.withConfig({
|
|
|
4549
4549
|
var MeterContainer = styled.div.withConfig({
|
|
4550
4550
|
displayName: "AgentInput__MeterContainer",
|
|
4551
4551
|
componentId: "sc-fhl996-12"
|
|
4552
|
-
})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"], ["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"])), base$
|
|
4552
|
+
})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"], ["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"])), base$9.spacing[1], base$9.spacing[4]);
|
|
4553
4553
|
var MeterBar = styled.div.withConfig({
|
|
4554
4554
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4555
4555
|
return !prop.startsWith('$');
|
|
4556
4556
|
},
|
|
4557
4557
|
displayName: "AgentInput__MeterBar",
|
|
4558
4558
|
componentId: "sc-fhl996-13"
|
|
4559
|
-
})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"], ["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"])), base$
|
|
4559
|
+
})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"], ["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"])), base$9.spacing[1], base$9.border.radius[1], semantic$b.color.background.interactive, function (_a) {
|
|
4560
4560
|
var $height = _a.$height;
|
|
4561
4561
|
return "".concat($height * 100, "%");
|
|
4562
4562
|
});
|
|
@@ -5192,10 +5192,10 @@ var AgentInput = function AgentInput(_a) {
|
|
|
5192
5192
|
})]
|
|
5193
5193
|
});
|
|
5194
5194
|
};
|
|
5195
|
-
var templateObject_1$
|
|
5195
|
+
var templateObject_1$p, templateObject_2$k, templateObject_3$i, templateObject_4$f, templateObject_5$b, templateObject_6$9, templateObject_7$7, templateObject_8$5, templateObject_9$4, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1;
|
|
5196
5196
|
|
|
5197
|
-
var semantic$
|
|
5198
|
-
base$
|
|
5197
|
+
var semantic$a = tokensData.semantic,
|
|
5198
|
+
base$8 = tokensData.base;
|
|
5199
5199
|
// Default icons by variant
|
|
5200
5200
|
var variantIcons = {
|
|
5201
5201
|
error: 'crossCircle',
|
|
@@ -5223,56 +5223,56 @@ var StyledAlert = styled.div.withConfig({
|
|
|
5223
5223
|
},
|
|
5224
5224
|
displayName: "Alert__StyledAlert",
|
|
5225
5225
|
componentId: "sc-18tq5d-0"
|
|
5226
|
-
})(templateObject_1$
|
|
5226
|
+
})(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) {
|
|
5227
5227
|
var $inline = _a.$inline;
|
|
5228
5228
|
return $inline ? 'center' : 'flex-start';
|
|
5229
5229
|
}, function (_a) {
|
|
5230
5230
|
var $inline = _a.$inline;
|
|
5231
|
-
return $inline ? semantic$
|
|
5231
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
|
|
5232
5232
|
}, function (_a) {
|
|
5233
5233
|
var $inline = _a.$inline;
|
|
5234
|
-
return $inline ? semantic$
|
|
5235
|
-
}, base$
|
|
5234
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.md;
|
|
5235
|
+
}, base$8.border.radius[2], function (_a) {
|
|
5236
5236
|
var $variant = _a.$variant;
|
|
5237
5237
|
switch ($variant) {
|
|
5238
5238
|
case 'error':
|
|
5239
|
-
return "\n background-color: ".concat(semantic$
|
|
5239
|
+
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 ");
|
|
5240
5240
|
case 'warning':
|
|
5241
|
-
return "\n background-color: ".concat(semantic$
|
|
5241
|
+
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 ");
|
|
5242
5242
|
case 'success':
|
|
5243
|
-
return "\n background-color: ".concat(semantic$
|
|
5243
|
+
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 ");
|
|
5244
5244
|
case 'info':
|
|
5245
5245
|
default:
|
|
5246
|
-
return "\n background-color: ".concat(semantic$
|
|
5246
|
+
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 ");
|
|
5247
5247
|
}
|
|
5248
|
-
}, base$
|
|
5248
|
+
}, base$8.breakpoint.md, function (_a) {
|
|
5249
5249
|
var $inline = _a.$inline;
|
|
5250
|
-
return $inline ? semantic$
|
|
5250
|
+
return $inline ? semantic$a.spacing.layout.sm : semantic$a.spacing.layout.lg;
|
|
5251
5251
|
});
|
|
5252
5252
|
var StyledIconContainer = styled.div.withConfig({
|
|
5253
5253
|
displayName: "Alert__StyledIconContainer",
|
|
5254
5254
|
componentId: "sc-18tq5d-1"
|
|
5255
|
-
})(templateObject_2$
|
|
5255
|
+
})(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"])));
|
|
5256
5256
|
var StyledContent$1 = styled.div.withConfig({
|
|
5257
5257
|
displayName: "Alert__StyledContent",
|
|
5258
5258
|
componentId: "sc-18tq5d-2"
|
|
5259
|
-
})(templateObject_3$
|
|
5259
|
+
})(templateObject_3$h || (templateObject_3$h = __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);
|
|
5260
5260
|
var StyledTitle = styled.span.withConfig({
|
|
5261
5261
|
displayName: "Alert__StyledTitle",
|
|
5262
5262
|
componentId: "sc-18tq5d-3"
|
|
5263
|
-
})(templateObject_4$
|
|
5263
|
+
})(templateObject_4$e || (templateObject_4$e = __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);
|
|
5264
5264
|
var StyledMessage = styled.span.withConfig({
|
|
5265
5265
|
displayName: "Alert__StyledMessage",
|
|
5266
5266
|
componentId: "sc-18tq5d-4"
|
|
5267
|
-
})(templateObject_5$
|
|
5267
|
+
})(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);
|
|
5268
5268
|
var StyledActions = styled.div.withConfig({
|
|
5269
5269
|
displayName: "Alert__StyledActions",
|
|
5270
5270
|
componentId: "sc-18tq5d-5"
|
|
5271
|
-
})(templateObject_6$
|
|
5271
|
+
})(templateObject_6$8 || (templateObject_6$8 = __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);
|
|
5272
5272
|
var StyledDismissButton = styled(IconButton).withConfig({
|
|
5273
5273
|
displayName: "Alert__StyledDismissButton",
|
|
5274
5274
|
componentId: "sc-18tq5d-6"
|
|
5275
|
-
})(templateObject_7$
|
|
5275
|
+
})(templateObject_7$6 || (templateObject_7$6 = __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);
|
|
5276
5276
|
var Alert = function Alert(_a) {
|
|
5277
5277
|
var _b = _a.variant,
|
|
5278
5278
|
variant = _b === void 0 ? 'info' : _b,
|
|
@@ -5340,21 +5340,21 @@ var Alert = function Alert(_a) {
|
|
|
5340
5340
|
}));
|
|
5341
5341
|
};
|
|
5342
5342
|
Alert.displayName = 'Alert';
|
|
5343
|
-
var templateObject_1$
|
|
5343
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6;
|
|
5344
5344
|
|
|
5345
5345
|
var _a$3, _b$1, _c, _d, _e, _f;
|
|
5346
5346
|
var BreadcrumbNavStyled = styled.nav.withConfig({
|
|
5347
5347
|
displayName: "Breadcrumbs__BreadcrumbNavStyled",
|
|
5348
5348
|
componentId: "sc-7ouzg5-0"
|
|
5349
|
-
})(templateObject_1$
|
|
5349
|
+
})(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');
|
|
5350
5350
|
var BreadcrumbStyled = styled.li.withConfig({
|
|
5351
5351
|
displayName: "Breadcrumbs__BreadcrumbStyled",
|
|
5352
5352
|
componentId: "sc-7ouzg5-1"
|
|
5353
|
-
})(templateObject_2$
|
|
5353
|
+
})(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n text-transform: uppercase;\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", ";\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n display: inline-flex;\n align-items: center;\n text-decoration: underline;\n color: ", ";\n }\n"], ["\n text-transform: uppercase;\n display: inline-flex;\n align-items: center;\n gap: ", ";\n padding: ", ";\n\n &:last-of-type a {\n text-decoration: none;\n color: ", ";\n }\n\n &:last-of-type p {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 180px;\n }\n\n > a {\n display: inline-flex;\n align-items: center;\n text-decoration: underline;\n color: ", ";\n }\n"])), ((_d = (_c = tokensData.base) === null || _c === void 0 ? void 0 : _c.spacing) === null || _d === void 0 ? void 0 : _d['2']) || '0.5rem', ((_f = (_e = tokensData.base) === null || _e === void 0 ? void 0 : _e.spacing) === null || _f === void 0 ? void 0 : _f['2']) || '0.5rem', tokensData.semantic.color.text.subdued, tokensData.semantic.color.text["default"]);
|
|
5354
5354
|
var BreadcrumbSeparator = styled.span.withConfig({
|
|
5355
5355
|
displayName: "Breadcrumbs__BreadcrumbSeparator",
|
|
5356
5356
|
componentId: "sc-7ouzg5-2"
|
|
5357
|
-
})(templateObject_3$
|
|
5357
|
+
})(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n opacity: 0.5;\n"], ["\n display: inline-flex;\n align-items: center;\n opacity: 0.5;\n"])));
|
|
5358
5358
|
var isInternalUrl = function isInternalUrl(url) {
|
|
5359
5359
|
return url.startsWith('/') && !url.startsWith('http');
|
|
5360
5360
|
};
|
|
@@ -5402,12 +5402,12 @@ var Breadcrumbs = function Breadcrumbs(_a) {
|
|
|
5402
5402
|
})
|
|
5403
5403
|
});
|
|
5404
5404
|
};
|
|
5405
|
-
var templateObject_1$
|
|
5405
|
+
var templateObject_1$n, templateObject_2$i, templateObject_3$g;
|
|
5406
5406
|
|
|
5407
5407
|
var CardSmallStyled = styled.div.withConfig({
|
|
5408
5408
|
displayName: "CardSmall__CardSmallStyled",
|
|
5409
5409
|
componentId: "sc-jpcqvd-0"
|
|
5410
|
-
})(templateObject_1$
|
|
5410
|
+
})(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);
|
|
5411
5411
|
var CardSmall = function CardSmall(_a) {
|
|
5412
5412
|
var title = _a.title,
|
|
5413
5413
|
picture = _a.picture,
|
|
@@ -5459,13 +5459,13 @@ var CardSmall = function CardSmall(_a) {
|
|
|
5459
5459
|
})
|
|
5460
5460
|
});
|
|
5461
5461
|
};
|
|
5462
|
-
var templateObject_1$
|
|
5462
|
+
var templateObject_1$m;
|
|
5463
5463
|
|
|
5464
|
-
var border$
|
|
5464
|
+
var border$4 = tokensData.base.border;
|
|
5465
5465
|
var CardLargeStyled = styled.div.withConfig({
|
|
5466
5466
|
displayName: "CardLarge__CardLargeStyled",
|
|
5467
5467
|
componentId: "sc-1rfgdzl-0"
|
|
5468
|
-
})(templateObject_1$
|
|
5468
|
+
})(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$4.radius[6]);
|
|
5469
5469
|
var CardLarge = function CardLarge(_a) {
|
|
5470
5470
|
var title = _a.title,
|
|
5471
5471
|
excerpt = _a.excerpt,
|
|
@@ -5518,7 +5518,7 @@ var CardLarge = function CardLarge(_a) {
|
|
|
5518
5518
|
})
|
|
5519
5519
|
});
|
|
5520
5520
|
};
|
|
5521
|
-
var templateObject_1$
|
|
5521
|
+
var templateObject_1$l;
|
|
5522
5522
|
|
|
5523
5523
|
/**
|
|
5524
5524
|
* Hidden native checkbox input for accessibility
|
|
@@ -5530,7 +5530,7 @@ var HiddenCheckboxInput = styled.input.withConfig({
|
|
|
5530
5530
|
},
|
|
5531
5531
|
displayName: "SelectableInputBase__HiddenCheckboxInput",
|
|
5532
5532
|
componentId: "sc-1ddpctx-0"
|
|
5533
|
-
})(templateObject_1$
|
|
5533
|
+
})(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"
|
|
5534
5534
|
/**
|
|
5535
5535
|
* Custom checkbox visual component
|
|
5536
5536
|
* 24px × 24px for 8px grid alignment
|
|
@@ -5547,7 +5547,7 @@ var StyledCheckbox = styled.span.withConfig({
|
|
|
5547
5547
|
},
|
|
5548
5548
|
displayName: "SelectableInputBase__StyledCheckbox",
|
|
5549
5549
|
componentId: "sc-1ddpctx-1"
|
|
5550
|
-
})(templateObject_2$
|
|
5550
|
+
})(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"
|
|
5551
5551
|
/**
|
|
5552
5552
|
* Container for checkbox with proper spacing and alignment
|
|
5553
5553
|
* 48px min-height for touch target (8px grid aligned)
|
|
@@ -5580,7 +5580,7 @@ var StyledCheckboxContainer = styled.label.withConfig({
|
|
|
5580
5580
|
},
|
|
5581
5581
|
displayName: "SelectableInputBase__StyledCheckboxContainer",
|
|
5582
5582
|
componentId: "sc-1ddpctx-2"
|
|
5583
|
-
})(templateObject_3$
|
|
5583
|
+
})(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"
|
|
5584
5584
|
/**
|
|
5585
5585
|
* Label text with proper typography
|
|
5586
5586
|
*/])), tokensData.base.spacing[3], function (props) {
|
|
@@ -5597,19 +5597,19 @@ var StyledCheckboxLabel = styled.span.withConfig({
|
|
|
5597
5597
|
},
|
|
5598
5598
|
displayName: "SelectableInputBase__StyledCheckboxLabel",
|
|
5599
5599
|
componentId: "sc-1ddpctx-3"
|
|
5600
|
-
})(templateObject_4$
|
|
5600
|
+
})(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n"], ["\n font: ", ";\n color: ", ";\n"])), tokensData.component.input["default"].font, function (props) {
|
|
5601
5601
|
return props.$disabled ? tokensData.component.input.disabled.textColor : tokensData.component.input["default"].textColor;
|
|
5602
5602
|
});
|
|
5603
|
-
var templateObject_1$
|
|
5603
|
+
var templateObject_1$k, templateObject_2$h, templateObject_3$f, templateObject_4$d;
|
|
5604
5604
|
|
|
5605
5605
|
var StyledFieldContainer$3 = styled.div.withConfig({
|
|
5606
5606
|
displayName: "Checkbox__StyledFieldContainer",
|
|
5607
5607
|
componentId: "sc-vquz3v-0"
|
|
5608
|
-
})(templateObject_1$
|
|
5608
|
+
})(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]);
|
|
5609
5609
|
var StyledHelperText$4 = styled.span.withConfig({
|
|
5610
5610
|
displayName: "Checkbox__StyledHelperText",
|
|
5611
5611
|
componentId: "sc-vquz3v-1"
|
|
5612
|
-
})(templateObject_2$
|
|
5612
|
+
})(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"
|
|
5613
5613
|
/**
|
|
5614
5614
|
* Checkbox component for binary selection with WCAG 2.2 AA compliance
|
|
5615
5615
|
*
|
|
@@ -5728,12 +5728,12 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
|
|
|
5728
5728
|
});
|
|
5729
5729
|
});
|
|
5730
5730
|
Checkbox.displayName = 'Checkbox';
|
|
5731
|
-
var templateObject_1$
|
|
5731
|
+
var templateObject_1$j, templateObject_2$g;
|
|
5732
5732
|
|
|
5733
5733
|
var ChipGroupWrapper = styled.div.withConfig({
|
|
5734
5734
|
displayName: "ChipGroup__ChipGroupWrapper",
|
|
5735
5735
|
componentId: "sc-ae049w-0"
|
|
5736
|
-
})(templateObject_1$
|
|
5736
|
+
})(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"])));
|
|
5737
5737
|
var ChipGroup = function ChipGroup(_a) {
|
|
5738
5738
|
var labels = _a.labels,
|
|
5739
5739
|
_b = _a.variant,
|
|
@@ -5753,17 +5753,17 @@ var ChipGroup = function ChipGroup(_a) {
|
|
|
5753
5753
|
})
|
|
5754
5754
|
});
|
|
5755
5755
|
};
|
|
5756
|
-
var templateObject_1$
|
|
5756
|
+
var templateObject_1$i;
|
|
5757
5757
|
|
|
5758
5758
|
var _a$2 = tokensData.semantic,
|
|
5759
|
-
color$
|
|
5760
|
-
border$
|
|
5759
|
+
color$2 = _a$2.color,
|
|
5760
|
+
border$3 = _a$2.border,
|
|
5761
5761
|
spacing$2 = _a$2.spacing;
|
|
5762
5762
|
_a$2.motion;
|
|
5763
5763
|
var StyledCodeBlock = styled.pre.withConfig({
|
|
5764
5764
|
displayName: "CodeBlock__StyledCodeBlock",
|
|
5765
5765
|
componentId: "sc-1p1t0kp-0"
|
|
5766
|
-
})(templateObject_1$
|
|
5766
|
+
})(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n overflow-y: ", ";\n margin: ", " 0;\n position: relative;\n transition: max-height 300ms ease-in-out;\n \n ", "\n"], ["\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n overflow-x: auto;\n overflow-y: ", ";\n margin: ", " 0;\n position: relative;\n transition: max-height 300ms ease-in-out;\n \n ", "\n"])), color$2.background.subtle, border$3.subtle, tokensData.base.border.radius[2], spacing$2.layout.md, tokensData.base.fontFamily.monospace, tokensData.base.fontSize[1], tokensData.base.lineHeight[3], color$2.text["default"], function (_a) {
|
|
5767
5767
|
var $isExpanded = _a.$isExpanded,
|
|
5768
5768
|
$needsExpansion = _a.$needsExpansion;
|
|
5769
5769
|
return $needsExpansion && !$isExpanded ? 'hidden' : 'auto';
|
|
@@ -5779,17 +5779,17 @@ var StyledCodeBlock = styled.pre.withConfig({
|
|
|
5779
5779
|
var CodeBlockWrapper = styled.div.withConfig({
|
|
5780
5780
|
displayName: "CodeBlock__CodeBlockWrapper",
|
|
5781
5781
|
componentId: "sc-1p1t0kp-1"
|
|
5782
|
-
})(templateObject_2$
|
|
5782
|
+
})(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"])));
|
|
5783
5783
|
var CopyButtonWrapper = styled.div.withConfig({
|
|
5784
5784
|
displayName: "CodeBlock__CopyButtonWrapper",
|
|
5785
5785
|
componentId: "sc-1p1t0kp-2"
|
|
5786
|
-
})(templateObject_3$
|
|
5786
|
+
})(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);
|
|
5787
5787
|
var ExpandButtonWrapper = styled.div.withConfig({
|
|
5788
5788
|
displayName: "CodeBlock__ExpandButtonWrapper",
|
|
5789
5789
|
componentId: "sc-1p1t0kp-3"
|
|
5790
|
-
})(templateObject_4$
|
|
5790
|
+
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n padding: ", " 0;\n position: absolute;\n bottom: 1px;\n left: 1px;\n right: 1px;\n width: calc(100% - 2px);\n margin-bottom: ", ";\n border-radius: ", ";\n transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n \n ", "\n"], ["\n display: flex;\n justify-content: center;\n padding: ", " 0;\n position: absolute;\n bottom: 1px;\n left: 1px;\n right: 1px;\n width: calc(100% - 2px);\n margin-bottom: ", ";\n border-radius: ", ";\n transition: opacity 300ms ease-in-out, background 300ms ease-in-out;\n \n ", "\n"])), spacing$2.layout.sm, spacing$2.layout.sm, tokensData.base.border.radius[2], function (_a) {
|
|
5791
5791
|
var $hasGradient = _a.$hasGradient;
|
|
5792
|
-
return $hasGradient ? "\n margin-top: -".concat(spacing$2.layout['4xl'], ";\n padding-top: ").concat(spacing$2.layout['4xl'], ";\n background: linear-gradient(\n to bottom,\n transparent 0%,\n ").concat(color$
|
|
5792
|
+
return $hasGradient ? "\n margin-top: -".concat(spacing$2.layout['4xl'], ";\n padding-top: ").concat(spacing$2.layout['4xl'], ";\n background: linear-gradient(\n to bottom,\n transparent 0%,\n ").concat(color$2.background.subtle, " 60%\n );\n ") : "\n background: transparent;\n ";
|
|
5793
5793
|
});
|
|
5794
5794
|
var CopyButton = function CopyButton(_a) {
|
|
5795
5795
|
var text = _a.text,
|
|
@@ -5945,27 +5945,27 @@ var CodeBlock = function CodeBlock(_a) {
|
|
|
5945
5945
|
})]
|
|
5946
5946
|
});
|
|
5947
5947
|
};
|
|
5948
|
-
var templateObject_1$
|
|
5948
|
+
var templateObject_1$h, templateObject_2$f, templateObject_3$e, templateObject_4$c;
|
|
5949
5949
|
|
|
5950
|
-
var StyledHeader = styled.div.withConfig({
|
|
5950
|
+
var StyledHeader$1 = styled.div.withConfig({
|
|
5951
5951
|
displayName: "DateGroup__StyledHeader",
|
|
5952
5952
|
componentId: "sc-9nfm1f-0"
|
|
5953
|
-
})(templateObject_1$
|
|
5953
|
+
})(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) {
|
|
5954
5954
|
var $sticky = _a.$sticky;
|
|
5955
5955
|
return $sticky && "\n position: sticky;\n top: 0;\n z-index: 10;\n box-shadow: ".concat(tokensData.base.shadow[2], ";\n ");
|
|
5956
5956
|
});
|
|
5957
5957
|
var StyledLeftSection = styled.div.withConfig({
|
|
5958
5958
|
displayName: "DateGroup__StyledLeftSection",
|
|
5959
5959
|
componentId: "sc-9nfm1f-1"
|
|
5960
|
-
})(templateObject_2$
|
|
5960
|
+
})(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);
|
|
5961
5961
|
var StyledRightSection = styled.div.withConfig({
|
|
5962
5962
|
displayName: "DateGroup__StyledRightSection",
|
|
5963
5963
|
componentId: "sc-9nfm1f-2"
|
|
5964
|
-
})(templateObject_3$
|
|
5964
|
+
})(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);
|
|
5965
5965
|
var StyledContent = styled.div.withConfig({
|
|
5966
5966
|
displayName: "DateGroup__StyledContent",
|
|
5967
5967
|
componentId: "sc-9nfm1f-3"
|
|
5968
|
-
})(templateObject_4$
|
|
5968
|
+
})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n /* Content area for children */\n"], ["\n /* Content area for children */\n"
|
|
5969
5969
|
/**
|
|
5970
5970
|
* DateGroup component
|
|
5971
5971
|
*
|
|
@@ -6006,7 +6006,7 @@ var DateGroup = function DateGroup(_a) {
|
|
|
6006
6006
|
"data-testid": dataTestId,
|
|
6007
6007
|
role: "group",
|
|
6008
6008
|
"aria-label": "Transactions for ".concat(date),
|
|
6009
|
-
children: [jsxs(StyledHeader, {
|
|
6009
|
+
children: [jsxs(StyledHeader$1, {
|
|
6010
6010
|
"$sticky": sticky,
|
|
6011
6011
|
"data-testid": dataTestId ? "".concat(dataTestId, "-header") : undefined,
|
|
6012
6012
|
children: [jsxs(StyledLeftSection, {
|
|
@@ -6037,18 +6037,18 @@ var DateGroup = function DateGroup(_a) {
|
|
|
6037
6037
|
})]
|
|
6038
6038
|
});
|
|
6039
6039
|
};
|
|
6040
|
-
var templateObject_1$
|
|
6040
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$d, templateObject_4$b;
|
|
6041
6041
|
|
|
6042
|
-
var semantic$
|
|
6042
|
+
var semantic$9 = tokensData.semantic;
|
|
6043
6043
|
var StyledContainer$1 = styled.div.withConfig({
|
|
6044
6044
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6045
6045
|
return !prop.startsWith('$');
|
|
6046
6046
|
},
|
|
6047
6047
|
displayName: "EmptyState__StyledContainer",
|
|
6048
6048
|
componentId: "sc-1u5hxh-0"
|
|
6049
|
-
})(templateObject_1$
|
|
6049
|
+
})(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) {
|
|
6050
6050
|
var $size = _a.$size;
|
|
6051
|
-
return $size === 'small' ? semantic$
|
|
6051
|
+
return $size === 'small' ? semantic$9.spacing.layout['4xl'] : $size === 'large' ? semantic$9.spacing.layout['8xl'] : semantic$9.spacing.layout['6xl'];
|
|
6052
6052
|
});
|
|
6053
6053
|
var StyledIllustration = styled.div.withConfig({
|
|
6054
6054
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
@@ -6056,22 +6056,22 @@ var StyledIllustration = styled.div.withConfig({
|
|
|
6056
6056
|
},
|
|
6057
6057
|
displayName: "EmptyState__StyledIllustration",
|
|
6058
6058
|
componentId: "sc-1u5hxh-1"
|
|
6059
|
-
})(templateObject_2$
|
|
6059
|
+
})(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) {
|
|
6060
6060
|
var $size = _a.$size;
|
|
6061
6061
|
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
6062
6062
|
}, function (_a) {
|
|
6063
6063
|
var $size = _a.$size;
|
|
6064
6064
|
return $size === 'small' ? '80px' : $size === 'large' ? '200px' : '120px';
|
|
6065
|
-
}, semantic$
|
|
6065
|
+
}, semantic$9.spacing.layout['2xl'], function (_a) {
|
|
6066
6066
|
var $variant = _a.$variant;
|
|
6067
|
-
return $variant === 'error' ? semantic$
|
|
6067
|
+
return $variant === 'error' ? semantic$9.color.icon.error : $variant === 'success' ? semantic$9.color.icon.success : semantic$9.color.icon.subdued;
|
|
6068
6068
|
});
|
|
6069
6069
|
var StyledTextContainer = styled.div.withConfig({
|
|
6070
6070
|
displayName: "EmptyState__StyledTextContainer",
|
|
6071
6071
|
componentId: "sc-1u5hxh-2"
|
|
6072
|
-
})(templateObject_3$
|
|
6072
|
+
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n max-width: 360px;\n margin-bottom: ", ";\n"], ["\n max-width: 360px;\n margin-bottom: ", ";\n"
|
|
6073
6073
|
// Map illustration type to icon name
|
|
6074
|
-
])), semantic$
|
|
6074
|
+
])), semantic$9.spacing.layout['2xl']);
|
|
6075
6075
|
// Map illustration type to icon name
|
|
6076
6076
|
var illustrationToIcon = {
|
|
6077
6077
|
search: 'search',
|
|
@@ -6126,7 +6126,7 @@ var EmptyState = function EmptyState(_a) {
|
|
|
6126
6126
|
children: title
|
|
6127
6127
|
}), jsx("div", {
|
|
6128
6128
|
style: {
|
|
6129
|
-
marginTop: semantic$
|
|
6129
|
+
marginTop: semantic$9.spacing.layout.md
|
|
6130
6130
|
},
|
|
6131
6131
|
children: jsx(Typography, {
|
|
6132
6132
|
variant: "body",
|
|
@@ -6156,31 +6156,31 @@ var EmptyState = function EmptyState(_a) {
|
|
|
6156
6156
|
})]
|
|
6157
6157
|
});
|
|
6158
6158
|
};
|
|
6159
|
-
var templateObject_1$
|
|
6159
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$c;
|
|
6160
6160
|
|
|
6161
6161
|
var _a$1 = tokensData.base,
|
|
6162
6162
|
spacing$1 = _a$1.spacing,
|
|
6163
|
-
border$
|
|
6163
|
+
border$2 = _a$1.border;
|
|
6164
6164
|
var FeatureBlockStyled = styled.div.withConfig({
|
|
6165
6165
|
displayName: "FeatureBlock__FeatureBlockStyled",
|
|
6166
6166
|
componentId: "sc-1mi4lso-0"
|
|
6167
|
-
})(templateObject_1$
|
|
6167
|
+
})(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$2.radius[6]);
|
|
6168
6168
|
var ImageWrapper = styled.div.withConfig({
|
|
6169
6169
|
displayName: "FeatureBlock__ImageWrapper",
|
|
6170
6170
|
componentId: "sc-1mi4lso-1"
|
|
6171
|
-
})(templateObject_2$
|
|
6171
|
+
})(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);
|
|
6172
6172
|
var ContentSection = styled.div.withConfig({
|
|
6173
6173
|
displayName: "FeatureBlock__ContentSection",
|
|
6174
6174
|
componentId: "sc-1mi4lso-2"
|
|
6175
|
-
})(templateObject_3$
|
|
6175
|
+
})(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]);
|
|
6176
6176
|
var ButtonWrapper = styled.div.withConfig({
|
|
6177
6177
|
displayName: "FeatureBlock__ButtonWrapper",
|
|
6178
6178
|
componentId: "sc-1mi4lso-3"
|
|
6179
|
-
})(templateObject_4$
|
|
6179
|
+
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n button {\n margin-top: ", ";\n }\n"], ["\n button {\n margin-top: ", ";\n }\n"])), spacing$1[4]);
|
|
6180
6180
|
var ContentWrapper = styled.div.withConfig({
|
|
6181
6181
|
displayName: "FeatureBlock__ContentWrapper",
|
|
6182
6182
|
componentId: "sc-1mi4lso-4"
|
|
6183
|
-
})(templateObject_5$
|
|
6183
|
+
})(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"])));
|
|
6184
6184
|
var FeatureBlock = function FeatureBlock(_a) {
|
|
6185
6185
|
var title = _a.title,
|
|
6186
6186
|
excerpt = _a.excerpt,
|
|
@@ -6237,28 +6237,28 @@ var FeatureBlock = function FeatureBlock(_a) {
|
|
|
6237
6237
|
}), jsx(Divider, {})]
|
|
6238
6238
|
});
|
|
6239
6239
|
};
|
|
6240
|
-
var templateObject_1$
|
|
6240
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$a, templateObject_5$9;
|
|
6241
6241
|
|
|
6242
6242
|
var _a = tokensData.base,
|
|
6243
6243
|
spacing = _a.spacing,
|
|
6244
6244
|
shadow = _a.shadow,
|
|
6245
6245
|
zIndex = _a.zIndex,
|
|
6246
6246
|
_b = tokensData.semantic,
|
|
6247
|
-
color = _b.color,
|
|
6247
|
+
color$1 = _b.color,
|
|
6248
6248
|
typography = _b.typography,
|
|
6249
|
-
border = _b.border,
|
|
6249
|
+
border$1 = _b.border,
|
|
6250
6250
|
input$1 = tokensData.component.input;
|
|
6251
6251
|
var DropdownContainer = styled.div.withConfig({
|
|
6252
6252
|
displayName: "Dropdown__DropdownContainer",
|
|
6253
6253
|
componentId: "sc-kz07c4-0"
|
|
6254
|
-
})(templateObject_1$
|
|
6254
|
+
})(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n position: relative;\n width: 100%;\n"], ["\n position: relative;\n width: 100%;\n"])));
|
|
6255
6255
|
var DropdownTrigger = styled.button.withConfig({
|
|
6256
6256
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6257
6257
|
return !prop.startsWith('$');
|
|
6258
6258
|
},
|
|
6259
6259
|
displayName: "Dropdown__DropdownTrigger",
|
|
6260
6260
|
componentId: "sc-kz07c4-1"
|
|
6261
|
-
})(templateObject_2$
|
|
6261
|
+
})(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) {
|
|
6262
6262
|
var $hasError = _a.$hasError;
|
|
6263
6263
|
return $hasError ? input$1.error.borderColor : input$1["default"].borderColor;
|
|
6264
6264
|
}, input$1["default"].borderRadius, input$1["default"].font, input$1["default"].textColor, function (_a) {
|
|
@@ -6278,7 +6278,7 @@ var DropdownIcon = styled.div.withConfig({
|
|
|
6278
6278
|
},
|
|
6279
6279
|
displayName: "Dropdown__DropdownIcon",
|
|
6280
6280
|
componentId: "sc-kz07c4-2"
|
|
6281
|
-
})(templateObject_3$
|
|
6281
|
+
})(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) {
|
|
6282
6282
|
var $isOpen = _a.$isOpen;
|
|
6283
6283
|
return $isOpen && "\n transform: rotate(180deg);\n ";
|
|
6284
6284
|
});
|
|
@@ -6288,7 +6288,7 @@ var DropdownMenu = styled.div.withConfig({
|
|
|
6288
6288
|
},
|
|
6289
6289
|
displayName: "Dropdown__DropdownMenu",
|
|
6290
6290
|
componentId: "sc-kz07c4-3"
|
|
6291
|
-
})(templateObject_4$
|
|
6291
|
+
})(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) {
|
|
6292
6292
|
var $isOpen = _a.$isOpen;
|
|
6293
6293
|
return $isOpen ? 1 : 0;
|
|
6294
6294
|
}, function (_a) {
|
|
@@ -6304,19 +6304,19 @@ var DropdownOption = styled.button.withConfig({
|
|
|
6304
6304
|
},
|
|
6305
6305
|
displayName: "Dropdown__DropdownOption",
|
|
6306
6306
|
componentId: "sc-kz07c4-4"
|
|
6307
|
-
})(templateObject_5$
|
|
6307
|
+
})(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) {
|
|
6308
6308
|
var $isSelected = _a.$isSelected,
|
|
6309
6309
|
$isFocused = _a.$isFocused;
|
|
6310
|
-
if ($isFocused) return color.background.surface;
|
|
6311
|
-
if ($isSelected) return color.background.surface;
|
|
6310
|
+
if ($isFocused) return color$1.background.surface;
|
|
6311
|
+
if ($isSelected) return color$1.background.surface;
|
|
6312
6312
|
return 'transparent';
|
|
6313
|
-
}, input$1["default"].font, input$1["default"].textColor, color.background.surface, color.background.surface, border.subtle);
|
|
6313
|
+
}, input$1["default"].font, input$1["default"].textColor, color$1.background.surface, color$1.background.surface, border$1.subtle);
|
|
6314
6314
|
var StyledHelperText$3 = styled.div.withConfig({
|
|
6315
6315
|
displayName: "Dropdown__StyledHelperText",
|
|
6316
6316
|
componentId: "sc-kz07c4-5"
|
|
6317
|
-
})(templateObject_6$
|
|
6317
|
+
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"], ["\n font: ", ";\n color: ", ";\n margin-top: ", ";\n"])), typography.caption, function (_a) {
|
|
6318
6318
|
var $hasError = _a.$hasError;
|
|
6319
|
-
return $hasError ? color.text.error : color.text.subdued;
|
|
6319
|
+
return $hasError ? color$1.text.error : color$1.text.subdued;
|
|
6320
6320
|
}, spacing[2]);
|
|
6321
6321
|
var Dropdown = function Dropdown(_a) {
|
|
6322
6322
|
var options = _a.options,
|
|
@@ -6491,18 +6491,18 @@ var Dropdown = function Dropdown(_a) {
|
|
|
6491
6491
|
})]
|
|
6492
6492
|
});
|
|
6493
6493
|
};
|
|
6494
|
-
var templateObject_1$
|
|
6494
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$9, templateObject_5$8, templateObject_6$7;
|
|
6495
6495
|
|
|
6496
|
-
var semantic$
|
|
6496
|
+
var semantic$8 = tokensData.semantic;
|
|
6497
6497
|
var StyledList = styled.ul.withConfig({
|
|
6498
6498
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6499
6499
|
return !prop.startsWith('$');
|
|
6500
6500
|
},
|
|
6501
6501
|
displayName: "List__StyledList",
|
|
6502
6502
|
componentId: "sc-1irksg5-0"
|
|
6503
|
-
})(templateObject_1$
|
|
6503
|
+
})(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) {
|
|
6504
6504
|
var $dividers = _a.$dividers;
|
|
6505
|
-
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$
|
|
6505
|
+
return $dividers && "\n > li:not(:last-child) {\n border-bottom: 1px solid ".concat(semantic$8.color.border["default"], ";\n }\n ");
|
|
6506
6506
|
});
|
|
6507
6507
|
var List = function List(_a) {
|
|
6508
6508
|
var children = _a.children,
|
|
@@ -6524,7 +6524,230 @@ var List = function List(_a) {
|
|
|
6524
6524
|
}));
|
|
6525
6525
|
};
|
|
6526
6526
|
List.displayName = 'List';
|
|
6527
|
-
var templateObject_1$
|
|
6527
|
+
var templateObject_1$c;
|
|
6528
|
+
|
|
6529
|
+
var semantic$7 = tokensData.semantic,
|
|
6530
|
+
base$7 = tokensData.base;
|
|
6531
|
+
var layout = semantic$7.spacing.layout,
|
|
6532
|
+
color = semantic$7.color,
|
|
6533
|
+
border = semantic$7.border,
|
|
6534
|
+
elevation = semantic$7.elevation;
|
|
6535
|
+
semantic$7.motion;
|
|
6536
|
+
// ---------------------------------------------------------------------------
|
|
6537
|
+
// Size map
|
|
6538
|
+
// ---------------------------------------------------------------------------
|
|
6539
|
+
var sizeToWidth = {
|
|
6540
|
+
small: '400px',
|
|
6541
|
+
medium: '560px',
|
|
6542
|
+
large: '720px'
|
|
6543
|
+
};
|
|
6544
|
+
// ---------------------------------------------------------------------------
|
|
6545
|
+
// Animations
|
|
6546
|
+
// ---------------------------------------------------------------------------
|
|
6547
|
+
var fadeIn$1 = keyframes(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n from { opacity: 0; }\n to { opacity: 1; }\n"], ["\n from { opacity: 0; }\n to { opacity: 1; }\n"])));
|
|
6548
|
+
var scaleIn = keyframes(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n from {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n"], ["\n from {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n"
|
|
6549
|
+
// ---------------------------------------------------------------------------
|
|
6550
|
+
// Styled components
|
|
6551
|
+
// ---------------------------------------------------------------------------
|
|
6552
|
+
])));
|
|
6553
|
+
// ---------------------------------------------------------------------------
|
|
6554
|
+
// Styled components
|
|
6555
|
+
// ---------------------------------------------------------------------------
|
|
6556
|
+
var StyledOverlay$1 = styled.div.withConfig({
|
|
6557
|
+
displayName: "Modal__StyledOverlay",
|
|
6558
|
+
componentId: "sc-1d3g5gh-0"
|
|
6559
|
+
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9999;\n ", "\n"], ["\n position: fixed;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 9999;\n ", "\n"])), css(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["animation: ", " 200ms ease-out;"], ["animation: ", " 200ms ease-out;"])), fadeIn$1));
|
|
6560
|
+
var StyledDialog = styled.div.withConfig({
|
|
6561
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
6562
|
+
return !prop.startsWith('$');
|
|
6563
|
+
},
|
|
6564
|
+
displayName: "Modal__StyledDialog",
|
|
6565
|
+
componentId: "sc-1d3g5gh-1"
|
|
6566
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(1);\n z-index: 10000;\n\n width: ", ";\n max-width: calc(100vw - ", " * 2);\n max-height: calc(100vh - ", " * 2);\n\n display: flex;\n flex-direction: column;\n\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n overflow: hidden;\n\n ", "\n\n /* Auto-fullscreen below md breakpoint (768px) */\n @media (max-width: ", ") {\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n border-radius: 0;\n top: 0;\n left: 0;\n transform: none;\n animation: ", " 200ms ease-out;\n }\n\n &:focus {\n outline: none;\n }\n"], ["\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(1);\n z-index: 10000;\n\n width: ", ";\n max-width: calc(100vw - ", " * 2);\n max-height: calc(100vh - ", " * 2);\n\n display: flex;\n flex-direction: column;\n\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n overflow: hidden;\n\n ", "\n\n /* Auto-fullscreen below md breakpoint (768px) */\n @media (max-width: ", ") {\n width: 100vw;\n height: 100vh;\n max-width: 100vw;\n max-height: 100vh;\n border-radius: 0;\n top: 0;\n left: 0;\n transform: none;\n animation: ", " 200ms ease-out;\n }\n\n &:focus {\n outline: none;\n }\n"])), function (_a) {
|
|
6567
|
+
var $width = _a.$width;
|
|
6568
|
+
return $width;
|
|
6569
|
+
}, layout.lg, layout.lg, color.background.subtle, border.radius.xl, elevation.overlay, css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["animation: ", " 200ms ease-out;"], ["animation: ", " 200ms ease-out;"])), scaleIn), base$7.breakpoint.md, fadeIn$1);
|
|
6570
|
+
var StyledHeader = styled.div.withConfig({
|
|
6571
|
+
displayName: "Modal__StyledHeader",
|
|
6572
|
+
componentId: "sc-1d3g5gh-2"
|
|
6573
|
+
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", " 0;\n flex-shrink: 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", " ", " 0;\n flex-shrink: 0;\n"])), layout.lg, layout.lg);
|
|
6574
|
+
var StyledBody = styled.div.withConfig({
|
|
6575
|
+
displayName: "Modal__StyledBody",
|
|
6576
|
+
componentId: "sc-1d3g5gh-3"
|
|
6577
|
+
})(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n flex: 1 1 auto;\n overflow-y: auto;\n padding: ", " ", ";\n\n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"], ["\n flex: 1 1 auto;\n overflow-y: auto;\n padding: ", " ", ";\n\n /* Scrollbar styling */\n &::-webkit-scrollbar {\n width: ", ";\n }\n &::-webkit-scrollbar-track {\n background: ", ";\n }\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: ", ";\n }\n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), layout.md, layout.lg, base$7.spacing[2], color.background.surface, color.border["default"], border.radius.circle, color.border.strong);
|
|
6578
|
+
var StyledFooter = styled.div.withConfig({
|
|
6579
|
+
displayName: "Modal__StyledFooter",
|
|
6580
|
+
componentId: "sc-1d3g5gh-4"
|
|
6581
|
+
})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n gap: ", ";\n padding: 0 ", " ", ";\n flex-shrink: 0;\n"], ["\n display: flex;\n justify-content: flex-end;\n gap: ", ";\n padding: 0 ", " ", ";\n flex-shrink: 0;\n"
|
|
6582
|
+
// ---------------------------------------------------------------------------
|
|
6583
|
+
// Component
|
|
6584
|
+
// ---------------------------------------------------------------------------
|
|
6585
|
+
/**
|
|
6586
|
+
* Modal component
|
|
6587
|
+
*
|
|
6588
|
+
* A centred dialog overlay with a title, close button (IconButton), scrollable
|
|
6589
|
+
* body content, and an optional footer with structured action buttons.
|
|
6590
|
+
*
|
|
6591
|
+
* - Renders via `createPortal` to avoid z-index / overflow issues.
|
|
6592
|
+
* - Auto-fullscreen on viewports narrower than 768 px.
|
|
6593
|
+
* - Focus trap, Escape-to-close, overlay-click-to-close.
|
|
6594
|
+
* - Locks body scroll while open.
|
|
6595
|
+
*
|
|
6596
|
+
* Composes: IconButton, Button, Typography, Stack, Divider
|
|
6597
|
+
*/])), layout.sm, layout.lg, layout.lg);
|
|
6598
|
+
// ---------------------------------------------------------------------------
|
|
6599
|
+
// Component
|
|
6600
|
+
// ---------------------------------------------------------------------------
|
|
6601
|
+
/**
|
|
6602
|
+
* Modal component
|
|
6603
|
+
*
|
|
6604
|
+
* A centred dialog overlay with a title, close button (IconButton), scrollable
|
|
6605
|
+
* body content, and an optional footer with structured action buttons.
|
|
6606
|
+
*
|
|
6607
|
+
* - Renders via `createPortal` to avoid z-index / overflow issues.
|
|
6608
|
+
* - Auto-fullscreen on viewports narrower than 768 px.
|
|
6609
|
+
* - Focus trap, Escape-to-close, overlay-click-to-close.
|
|
6610
|
+
* - Locks body scroll while open.
|
|
6611
|
+
*
|
|
6612
|
+
* Composes: IconButton, Button, Typography, Stack, Divider
|
|
6613
|
+
*/
|
|
6614
|
+
var Modal = function Modal(_a) {
|
|
6615
|
+
var isOpen = _a.isOpen,
|
|
6616
|
+
onClose = _a.onClose,
|
|
6617
|
+
title = _a.title,
|
|
6618
|
+
children = _a.children,
|
|
6619
|
+
_b = _a.size,
|
|
6620
|
+
size = _b === void 0 ? 'medium' : _b,
|
|
6621
|
+
actions = _a.actions,
|
|
6622
|
+
_c = _a.closeOnOverlayClick,
|
|
6623
|
+
closeOnOverlayClick = _c === void 0 ? true : _c,
|
|
6624
|
+
_d = _a.closeOnEscape,
|
|
6625
|
+
closeOnEscape = _d === void 0 ? true : _d,
|
|
6626
|
+
dataTestId = _a["data-testid"],
|
|
6627
|
+
ariaLabel = _a["aria-label"],
|
|
6628
|
+
ariaDescribedBy = _a["aria-describedby"];
|
|
6629
|
+
var dialogRef = useRef(null);
|
|
6630
|
+
var previousFocusRef = useRef(null);
|
|
6631
|
+
// -----------------------------------------------------------------------
|
|
6632
|
+
// Focus & scroll-lock management
|
|
6633
|
+
// -----------------------------------------------------------------------
|
|
6634
|
+
useEffect(function () {
|
|
6635
|
+
var _a;
|
|
6636
|
+
if (isOpen) {
|
|
6637
|
+
previousFocusRef.current = document.activeElement;
|
|
6638
|
+
// Short delay so the animation can start before we shift focus
|
|
6639
|
+
var timer_1 = setTimeout(function () {
|
|
6640
|
+
var _a;
|
|
6641
|
+
return (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6642
|
+
}, 100);
|
|
6643
|
+
document.body.style.overflow = 'hidden';
|
|
6644
|
+
return function () {
|
|
6645
|
+
clearTimeout(timer_1);
|
|
6646
|
+
};
|
|
6647
|
+
} else {
|
|
6648
|
+
(_a = previousFocusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
6649
|
+
document.body.style.overflow = '';
|
|
6650
|
+
}
|
|
6651
|
+
return function () {
|
|
6652
|
+
document.body.style.overflow = '';
|
|
6653
|
+
};
|
|
6654
|
+
}, [isOpen]);
|
|
6655
|
+
// -----------------------------------------------------------------------
|
|
6656
|
+
// Keyboard handling (Escape + focus trap)
|
|
6657
|
+
// -----------------------------------------------------------------------
|
|
6658
|
+
var handleKeyDown = function handleKeyDown(event) {
|
|
6659
|
+
var _a;
|
|
6660
|
+
if (closeOnEscape && event.key === 'Escape') {
|
|
6661
|
+
event.preventDefault();
|
|
6662
|
+
onClose();
|
|
6663
|
+
}
|
|
6664
|
+
if (event.key === 'Tab') {
|
|
6665
|
+
var focusableElements = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
6666
|
+
if (!focusableElements || focusableElements.length === 0) return;
|
|
6667
|
+
var first = focusableElements[0];
|
|
6668
|
+
var last = focusableElements[focusableElements.length - 1];
|
|
6669
|
+
if (event.shiftKey && document.activeElement === first) {
|
|
6670
|
+
event.preventDefault();
|
|
6671
|
+
last.focus();
|
|
6672
|
+
} else if (!event.shiftKey && document.activeElement === last) {
|
|
6673
|
+
event.preventDefault();
|
|
6674
|
+
first.focus();
|
|
6675
|
+
}
|
|
6676
|
+
}
|
|
6677
|
+
};
|
|
6678
|
+
// -----------------------------------------------------------------------
|
|
6679
|
+
// Overlay click
|
|
6680
|
+
// -----------------------------------------------------------------------
|
|
6681
|
+
var handleOverlayClick = function handleOverlayClick(event) {
|
|
6682
|
+
if (closeOnOverlayClick && event.target === event.currentTarget) {
|
|
6683
|
+
onClose();
|
|
6684
|
+
}
|
|
6685
|
+
};
|
|
6686
|
+
// -----------------------------------------------------------------------
|
|
6687
|
+
// Render
|
|
6688
|
+
// -----------------------------------------------------------------------
|
|
6689
|
+
if (!isOpen) return null;
|
|
6690
|
+
var titleId = dataTestId ? "".concat(dataTestId, "-title") : 'modal-title';
|
|
6691
|
+
var width = sizeToWidth[size];
|
|
6692
|
+
var modal = jsxs(Fragment, {
|
|
6693
|
+
children: [jsx(StyledOverlay$1, {
|
|
6694
|
+
onClick: handleOverlayClick,
|
|
6695
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'modal-overlay'
|
|
6696
|
+
}), jsxs(StyledDialog, {
|
|
6697
|
+
ref: dialogRef,
|
|
6698
|
+
role: "dialog",
|
|
6699
|
+
"aria-modal": "true",
|
|
6700
|
+
"aria-label": ariaLabel || title,
|
|
6701
|
+
"aria-labelledby": titleId,
|
|
6702
|
+
"aria-describedby": ariaDescribedBy,
|
|
6703
|
+
tabIndex: -1,
|
|
6704
|
+
"$width": width,
|
|
6705
|
+
onKeyDown: handleKeyDown,
|
|
6706
|
+
"data-testid": dataTestId,
|
|
6707
|
+
children: [jsxs(StyledHeader, {
|
|
6708
|
+
children: [jsx("span", {
|
|
6709
|
+
id: titleId,
|
|
6710
|
+
children: jsx(Typography, {
|
|
6711
|
+
variant: "h3",
|
|
6712
|
+
children: title
|
|
6713
|
+
})
|
|
6714
|
+
}), jsx(IconButton, {
|
|
6715
|
+
variant: "naked",
|
|
6716
|
+
iconName: "close",
|
|
6717
|
+
"aria-label": "Close modal",
|
|
6718
|
+
onClick: onClose,
|
|
6719
|
+
size: "medium",
|
|
6720
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-close") : 'modal-close'
|
|
6721
|
+
})]
|
|
6722
|
+
}), jsx(Divider, {
|
|
6723
|
+
size: "small"
|
|
6724
|
+
}), jsx(StyledBody, {
|
|
6725
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-body") : 'modal-body',
|
|
6726
|
+
children: children
|
|
6727
|
+
}), actions && actions.length > 0 && jsxs(Fragment, {
|
|
6728
|
+
children: [jsx(Divider, {
|
|
6729
|
+
size: "small"
|
|
6730
|
+
}), jsx(StyledFooter, {
|
|
6731
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-footer") : 'modal-footer',
|
|
6732
|
+
children: actions.map(function (action, index) {
|
|
6733
|
+
return jsx(Button, {
|
|
6734
|
+
onClick: action.onClick,
|
|
6735
|
+
variant: action.variant || 'secondary',
|
|
6736
|
+
iconName: action.icon,
|
|
6737
|
+
disabled: action.disabled,
|
|
6738
|
+
size: "medium",
|
|
6739
|
+
"data-testid": dataTestId ? "".concat(dataTestId, "-action-").concat(index) : "modal-action-".concat(index),
|
|
6740
|
+
children: action.label
|
|
6741
|
+
}, "".concat(action.label, "-").concat(index));
|
|
6742
|
+
})
|
|
6743
|
+
})]
|
|
6744
|
+
})]
|
|
6745
|
+
})]
|
|
6746
|
+
});
|
|
6747
|
+
return /*#__PURE__*/createPortal(modal, document.body);
|
|
6748
|
+
};
|
|
6749
|
+
Modal.displayName = 'Modal';
|
|
6750
|
+
var templateObject_1$b, templateObject_2$a, templateObject_3$9, templateObject_4$8, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3;
|
|
6528
6751
|
|
|
6529
6752
|
var input = tokensData.component.input;
|
|
6530
6753
|
var StyledInputBase = styled.input.withConfig({
|
|
@@ -8674,5 +8897,5 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
8674
8897
|
// Main design system exports
|
|
8675
8898
|
var tokens = tokensData;
|
|
8676
8899
|
|
|
8677
|
-
export { AccountCard, ActionSheet, AgentInput, Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, CategoryBadge, Checkbox, Chip, ChipGroup, CodeBlock, Container$1 as Container, DateFormatter, DateGroup, Divider, Dropdown, EmptyState, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, MoneyDisplay, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, SearchField, Sheet, Slider, Stack, StatusBadge, StyledInputBase, StyledTextAreaBase, TabBar, Tag, TextField, TransactionListItem, Typography, iconsData, tokens };
|
|
8900
|
+
export { AccountCard, ActionSheet, AgentInput, Alert, Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, CategoryBadge, Checkbox, Chip, ChipGroup, CodeBlock, Container$1 as Container, DateFormatter, DateGroup, Divider, Dropdown, EmptyState, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, List, ListItem, Modal, MoneyDisplay, NumberInput, PageTitle, PasswordField, Picture, ProgressBar, ResponsiveGrid, SearchField, Sheet, Slider, Stack, StatusBadge, StyledInputBase, StyledTextAreaBase, TabBar, Tag, TextField, TransactionListItem, Typography, iconsData, tokens };
|
|
8678
8901
|
//# sourceMappingURL=index.esm.js.map
|