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