@wistia/ui 0.14.35 → 0.14.36-beta.f7aa2892.6f64065
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/index.cjs +1097 -645
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +142 -137
- package/dist/index.d.ts +142 -137
- package/dist/index.mjs +818 -366
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.14.
|
|
3
|
+
* @license @wistia/ui v0.14.36-beta.f7aa2892.6f64065
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -199,7 +199,7 @@ var import_react_tooltip = require("@radix-ui/react-tooltip");
|
|
|
199
199
|
var import_react3 = require("react");
|
|
200
200
|
|
|
201
201
|
// src/css/GlobalStyle.tsx
|
|
202
|
-
var
|
|
202
|
+
var import_styled_components13 = require("styled-components");
|
|
203
203
|
|
|
204
204
|
// src/css/globalStyleAdjustmentsCss.tsx
|
|
205
205
|
var import_styled_components = require("styled-components");
|
|
@@ -336,7 +336,7 @@ var globalStyleAdjustmentsCss = import_styled_components.css`
|
|
|
336
336
|
`;
|
|
337
337
|
|
|
338
338
|
// src/css/designTokens/index.tsx
|
|
339
|
-
var
|
|
339
|
+
var import_styled_components11 = require("styled-components");
|
|
340
340
|
|
|
341
341
|
// src/css/designTokens/colorGlobal.tsx
|
|
342
342
|
var import_styled_components2 = require("styled-components");
|
|
@@ -1004,35 +1004,574 @@ var darkGlobalTokens = import_styled_components2.css`
|
|
|
1004
1004
|
`;
|
|
1005
1005
|
|
|
1006
1006
|
// src/css/designTokens/colorAlias.tsx
|
|
1007
|
+
var import_styled_components4 = require("styled-components");
|
|
1008
|
+
|
|
1009
|
+
// src/css/designTokens/colorSchemes.tsx
|
|
1007
1010
|
var import_styled_components3 = require("styled-components");
|
|
1008
|
-
var
|
|
1011
|
+
var defaultColorScheme = import_styled_components3.css`
|
|
1012
|
+
--wui-color-base-1: var(--wui-gray-1);
|
|
1013
|
+
--wui-color-base-2: var(--wui-gray-2);
|
|
1014
|
+
--wui-color-base-3: var(--wui-gray-3);
|
|
1015
|
+
--wui-color-base-4: var(--wui-gray-4);
|
|
1016
|
+
--wui-color-base-5: var(--wui-gray-5);
|
|
1017
|
+
--wui-color-base-6: var(--wui-gray-6);
|
|
1018
|
+
--wui-color-base-7: var(--wui-gray-7);
|
|
1019
|
+
--wui-color-base-8: var(--wui-gray-8);
|
|
1020
|
+
--wui-color-base-9: var(--wui-gray-9);
|
|
1021
|
+
--wui-color-base-10: var(--wui-gray-10);
|
|
1022
|
+
--wui-color-base-11: var(--wui-gray-11);
|
|
1023
|
+
--wui-color-base-12: var(--wui-gray-12);
|
|
1024
|
+
--wui-color-base-contrast: var(--wui-gray-contrast);
|
|
1025
|
+
|
|
1026
|
+
--wui-color-accent-1: var(--wui-blue-1);
|
|
1027
|
+
--wui-color-accent-2: var(--wui-blue-2);
|
|
1028
|
+
--wui-color-accent-3: var(--wui-blue-3);
|
|
1029
|
+
--wui-color-accent-4: var(--wui-blue-4);
|
|
1030
|
+
--wui-color-accent-5: var(--wui-blue-5);
|
|
1031
|
+
--wui-color-accent-6: var(--wui-blue-6);
|
|
1032
|
+
--wui-color-accent-7: var(--wui-blue-7);
|
|
1033
|
+
--wui-color-accent-8: var(--wui-blue-8);
|
|
1034
|
+
--wui-color-accent-9: var(--wui-blue-9);
|
|
1035
|
+
--wui-color-accent-10: var(--wui-blue-10);
|
|
1036
|
+
--wui-color-accent-11: var(--wui-blue-11);
|
|
1037
|
+
--wui-color-accent-12: var(--wui-blue-12);
|
|
1038
|
+
--wui-color-accent-contrast: var(--wui-blue-contrast);
|
|
1039
|
+
|
|
1040
|
+
--wui-color-surface-token: var(--wui-gray-1);
|
|
1041
|
+
--wui-color-button-text-token: var(--wui-gray-12);
|
|
1042
|
+
`;
|
|
1043
|
+
var blueColorScheme = import_styled_components3.css`
|
|
1044
|
+
--wui-color-base-1: var(--wui-blue-1);
|
|
1045
|
+
--wui-color-base-2: var(--wui-blue-2);
|
|
1046
|
+
--wui-color-base-3: var(--wui-blue-3);
|
|
1047
|
+
--wui-color-base-4: var(--wui-blue-4);
|
|
1048
|
+
--wui-color-base-5: var(--wui-blue-5);
|
|
1049
|
+
--wui-color-base-6: var(--wui-blue-6);
|
|
1050
|
+
--wui-color-base-7: var(--wui-blue-7);
|
|
1051
|
+
--wui-color-base-8: var(--wui-blue-8);
|
|
1052
|
+
--wui-color-base-9: var(--wui-blue-9);
|
|
1053
|
+
--wui-color-base-10: var(--wui-blue-10);
|
|
1054
|
+
--wui-color-base-11: var(--wui-blue-11);
|
|
1055
|
+
--wui-color-base-12: var(--wui-blue-12);
|
|
1056
|
+
--wui-color-base-contrast: var(--wui-blue-contrast);
|
|
1057
|
+
|
|
1058
|
+
--wui-color-accent-1: var(--wui-blue-1);
|
|
1059
|
+
--wui-color-accent-2: var(--wui-blue-2);
|
|
1060
|
+
--wui-color-accent-3: var(--wui-blue-3);
|
|
1061
|
+
--wui-color-accent-4: var(--wui-blue-4);
|
|
1062
|
+
--wui-color-accent-5: var(--wui-blue-5);
|
|
1063
|
+
--wui-color-accent-6: var(--wui-blue-6);
|
|
1064
|
+
--wui-color-accent-7: var(--wui-blue-7);
|
|
1065
|
+
--wui-color-accent-8: var(--wui-blue-8);
|
|
1066
|
+
--wui-color-accent-9: var(--wui-blue-9);
|
|
1067
|
+
--wui-color-accent-10: var(--wui-blue-10);
|
|
1068
|
+
--wui-color-accent-11: var(--wui-blue-11);
|
|
1069
|
+
--wui-color-accent-12: var(--wui-blue-12);
|
|
1070
|
+
--wui-color-accent-contrast: var(--wui-blue-contrast);
|
|
1071
|
+
|
|
1072
|
+
--wui-color-surface-token: var(--wui-blue-2);
|
|
1073
|
+
--wui-color-button-text-token: var(--wui-blue-12);
|
|
1074
|
+
`;
|
|
1075
|
+
var greenColorScheme = import_styled_components3.css`
|
|
1076
|
+
--wui-color-base-1: var(--wui-green-1);
|
|
1077
|
+
--wui-color-base-2: var(--wui-green-2);
|
|
1078
|
+
--wui-color-base-3: var(--wui-green-3);
|
|
1079
|
+
--wui-color-base-4: var(--wui-green-4);
|
|
1080
|
+
--wui-color-base-5: var(--wui-green-5);
|
|
1081
|
+
--wui-color-base-6: var(--wui-green-6);
|
|
1082
|
+
--wui-color-base-7: var(--wui-green-7);
|
|
1083
|
+
--wui-color-base-8: var(--wui-green-8);
|
|
1084
|
+
--wui-color-base-9: var(--wui-green-9);
|
|
1085
|
+
--wui-color-base-10: var(--wui-green-10);
|
|
1086
|
+
--wui-color-base-11: var(--wui-green-11);
|
|
1087
|
+
--wui-color-base-12: var(--wui-green-12);
|
|
1088
|
+
--wui-color-base-contrast: var(--wui-green-contrast);
|
|
1089
|
+
|
|
1090
|
+
--wui-color-accent-1: var(--wui-green-1);
|
|
1091
|
+
--wui-color-accent-2: var(--wui-green-2);
|
|
1092
|
+
--wui-color-accent-3: var(--wui-green-3);
|
|
1093
|
+
--wui-color-accent-4: var(--wui-green-4);
|
|
1094
|
+
--wui-color-accent-5: var(--wui-green-5);
|
|
1095
|
+
--wui-color-accent-6: var(--wui-green-6);
|
|
1096
|
+
--wui-color-accent-7: var(--wui-green-7);
|
|
1097
|
+
--wui-color-accent-8: var(--wui-green-8);
|
|
1098
|
+
--wui-color-accent-9: var(--wui-green-9);
|
|
1099
|
+
--wui-color-accent-10: var(--wui-green-10);
|
|
1100
|
+
--wui-color-accent-11: var(--wui-green-11);
|
|
1101
|
+
--wui-color-accent-12: var(--wui-green-12);
|
|
1102
|
+
--wui-color-accent-contrast: var(--wui-green-contrast);
|
|
1103
|
+
|
|
1104
|
+
--wui-color-surface-token: var(--wui-green-2);
|
|
1105
|
+
--wui-color-text-button-token: var(--wui-green-11);
|
|
1106
|
+
`;
|
|
1107
|
+
var orangeColorScheme = import_styled_components3.css`
|
|
1108
|
+
--wui-color-base-1: var(--wui-orange-1);
|
|
1109
|
+
--wui-color-base-2: var(--wui-orange-2);
|
|
1110
|
+
--wui-color-base-3: var(--wui-orange-3);
|
|
1111
|
+
--wui-color-base-4: var(--wui-orange-4);
|
|
1112
|
+
--wui-color-base-5: var(--wui-orange-5);
|
|
1113
|
+
--wui-color-base-6: var(--wui-orange-6);
|
|
1114
|
+
--wui-color-base-7: var(--wui-orange-7);
|
|
1115
|
+
--wui-color-base-8: var(--wui-orange-8);
|
|
1116
|
+
--wui-color-base-9: var(--wui-orange-9);
|
|
1117
|
+
--wui-color-base-10: var(--wui-orange-10);
|
|
1118
|
+
--wui-color-base-11: var(--wui-orange-11);
|
|
1119
|
+
--wui-color-base-12: var(--wui-orange-12);
|
|
1120
|
+
--wui-color-base-contrast: var(--wui-orange-contrast);
|
|
1121
|
+
|
|
1122
|
+
--wui-color-accent-1: var(--wui-orange-1);
|
|
1123
|
+
--wui-color-accent-2: var(--wui-orange-2);
|
|
1124
|
+
--wui-color-accent-3: var(--wui-orange-3);
|
|
1125
|
+
--wui-color-accent-4: var(--wui-orange-4);
|
|
1126
|
+
--wui-color-accent-5: var(--wui-orange-5);
|
|
1127
|
+
--wui-color-accent-6: var(--wui-orange-6);
|
|
1128
|
+
--wui-color-accent-7: var(--wui-orange-7);
|
|
1129
|
+
--wui-color-accent-8: var(--wui-orange-8);
|
|
1130
|
+
--wui-color-accent-9: var(--wui-orange-9);
|
|
1131
|
+
--wui-color-accent-10: var(--wui-orange-10);
|
|
1132
|
+
--wui-color-accent-11: var(--wui-orange-11);
|
|
1133
|
+
--wui-color-accent-12: var(--wui-orange-12);
|
|
1134
|
+
--wui-color-accent-contrast: var(--wui-orange-contrast);
|
|
1135
|
+
|
|
1136
|
+
--wui-color-surface-token: var(--wui-orange-2);
|
|
1137
|
+
--wui-color-text-button-token: var(--wui-orange-11);
|
|
1138
|
+
`;
|
|
1139
|
+
var pinkColorScheme = import_styled_components3.css`
|
|
1140
|
+
--wui-color-base-1: var(--wui-pink-1);
|
|
1141
|
+
--wui-color-base-2: var(--wui-pink-2);
|
|
1142
|
+
--wui-color-base-3: var(--wui-pink-3);
|
|
1143
|
+
--wui-color-base-4: var(--wui-pink-4);
|
|
1144
|
+
--wui-color-base-5: var(--wui-pink-5);
|
|
1145
|
+
--wui-color-base-6: var(--wui-pink-6);
|
|
1146
|
+
--wui-color-base-7: var(--wui-pink-7);
|
|
1147
|
+
--wui-color-base-8: var(--wui-pink-8);
|
|
1148
|
+
--wui-color-base-9: var(--wui-pink-9);
|
|
1149
|
+
--wui-color-base-10: var(--wui-pink-10);
|
|
1150
|
+
--wui-color-base-11: var(--wui-pink-11);
|
|
1151
|
+
--wui-color-base-12: var(--wui-pink-12);
|
|
1152
|
+
--wui-color-base-contrast: var(--wui-pink-contrast);
|
|
1153
|
+
|
|
1154
|
+
--wui-color-accent-1: var(--wui-pink-1);
|
|
1155
|
+
--wui-color-accent-2: var(--wui-pink-2);
|
|
1156
|
+
--wui-color-accent-3: var(--wui-pink-3);
|
|
1157
|
+
--wui-color-accent-4: var(--wui-pink-4);
|
|
1158
|
+
--wui-color-accent-5: var(--wui-pink-5);
|
|
1159
|
+
--wui-color-accent-6: var(--wui-pink-6);
|
|
1160
|
+
--wui-color-accent-7: var(--wui-pink-7);
|
|
1161
|
+
--wui-color-accent-8: var(--wui-pink-8);
|
|
1162
|
+
--wui-color-accent-9: var(--wui-pink-9);
|
|
1163
|
+
--wui-color-accent-10: var(--wui-pink-10);
|
|
1164
|
+
--wui-color-accent-11: var(--wui-pink-11);
|
|
1165
|
+
--wui-color-accent-12: var(--wui-pink-12);
|
|
1166
|
+
--wui-color-accent-contrast: var(--wui-pink-contrast);
|
|
1167
|
+
|
|
1168
|
+
--wui-color-surface-token: var(--wui-pink-2);
|
|
1169
|
+
--wui-color-text-button-token: var(--wui-pink-11);
|
|
1170
|
+
`;
|
|
1171
|
+
var purpleColorScheme = import_styled_components3.css`
|
|
1172
|
+
--wui-color-base-1: var(--wui-purple-1);
|
|
1173
|
+
--wui-color-base-2: var(--wui-purple-2);
|
|
1174
|
+
--wui-color-base-3: var(--wui-purple-3);
|
|
1175
|
+
--wui-color-base-4: var(--wui-purple-4);
|
|
1176
|
+
--wui-color-base-5: var(--wui-purple-5);
|
|
1177
|
+
--wui-color-base-6: var(--wui-purple-6);
|
|
1178
|
+
--wui-color-base-7: var(--wui-purple-7);
|
|
1179
|
+
--wui-color-base-8: var(--wui-purple-8);
|
|
1180
|
+
--wui-color-base-9: var(--wui-purple-9);
|
|
1181
|
+
--wui-color-base-10: var(--wui-purple-10);
|
|
1182
|
+
--wui-color-base-11: var(--wui-purple-11);
|
|
1183
|
+
--wui-color-base-12: var(--wui-purple-12);
|
|
1184
|
+
--wui-color-base-contrast: var(--wui-purple-contrast);
|
|
1185
|
+
|
|
1186
|
+
--wui-color-accent-1: var(--wui-purple-1);
|
|
1187
|
+
--wui-color-accent-2: var(--wui-purple-2);
|
|
1188
|
+
--wui-color-accent-3: var(--wui-purple-3);
|
|
1189
|
+
--wui-color-accent-4: var(--wui-purple-4);
|
|
1190
|
+
--wui-color-accent-5: var(--wui-purple-5);
|
|
1191
|
+
--wui-color-accent-6: var(--wui-purple-6);
|
|
1192
|
+
--wui-color-accent-7: var(--wui-purple-7);
|
|
1193
|
+
--wui-color-accent-8: var(--wui-purple-8);
|
|
1194
|
+
--wui-color-accent-9: var(--wui-purple-9);
|
|
1195
|
+
--wui-color-accent-10: var(--wui-purple-10);
|
|
1196
|
+
--wui-color-accent-11: var(--wui-purple-11);
|
|
1197
|
+
--wui-color-accent-12: var(--wui-purple-12);
|
|
1198
|
+
--wui-color-accent-contrast: var(--wui-purple-contrast);
|
|
1199
|
+
|
|
1200
|
+
--wui-color-surface-token: var(--wui-purple-2);
|
|
1201
|
+
--wui-color-text-button-token: var(--wui-purple-11);
|
|
1202
|
+
`;
|
|
1203
|
+
var redColorScheme = import_styled_components3.css`
|
|
1204
|
+
--wui-color-base-1: var(--wui-red-1);
|
|
1205
|
+
--wui-color-base-2: var(--wui-red-2);
|
|
1206
|
+
--wui-color-base-3: var(--wui-red-3);
|
|
1207
|
+
--wui-color-base-4: var(--wui-red-4);
|
|
1208
|
+
--wui-color-base-5: var(--wui-red-5);
|
|
1209
|
+
--wui-color-base-6: var(--wui-red-6);
|
|
1210
|
+
--wui-color-base-7: var(--wui-red-7);
|
|
1211
|
+
--wui-color-base-8: var(--wui-red-8);
|
|
1212
|
+
--wui-color-base-9: var(--wui-red-9);
|
|
1213
|
+
--wui-color-base-10: var(--wui-red-10);
|
|
1214
|
+
--wui-color-base-11: var(--wui-red-11);
|
|
1215
|
+
--wui-color-base-12: var(--wui-red-12);
|
|
1216
|
+
--wui-color-base-contrast: var(--wui-red-contrast);
|
|
1217
|
+
|
|
1218
|
+
--wui-color-accent-1: var(--wui-red-1);
|
|
1219
|
+
--wui-color-accent-2: var(--wui-red-2);
|
|
1220
|
+
--wui-color-accent-3: var(--wui-red-3);
|
|
1221
|
+
--wui-color-accent-4: var(--wui-red-4);
|
|
1222
|
+
--wui-color-accent-5: var(--wui-red-5);
|
|
1223
|
+
--wui-color-accent-6: var(--wui-red-6);
|
|
1224
|
+
--wui-color-accent-7: var(--wui-red-7);
|
|
1225
|
+
--wui-color-accent-8: var(--wui-red-8);
|
|
1226
|
+
--wui-color-accent-9: var(--wui-red-9);
|
|
1227
|
+
--wui-color-accent-10: var(--wui-red-10);
|
|
1228
|
+
--wui-color-accent-11: var(--wui-red-11);
|
|
1229
|
+
--wui-color-accent-12: var(--wui-red-12);
|
|
1230
|
+
--wui-color-accent-contrast: var(--wui-red-contrast);
|
|
1231
|
+
|
|
1232
|
+
--wui-color-surface-token: var(--wui-red-2);
|
|
1233
|
+
--wui-color-text-button-token: var(--wui-red-11);
|
|
1234
|
+
`;
|
|
1235
|
+
var yellowColorScheme = import_styled_components3.css`
|
|
1236
|
+
--wui-color-base-1: var(--wui-yellow-1);
|
|
1237
|
+
--wui-color-base-2: var(--wui-yellow-2);
|
|
1238
|
+
--wui-color-base-3: var(--wui-yellow-3);
|
|
1239
|
+
--wui-color-base-4: var(--wui-yellow-4);
|
|
1240
|
+
--wui-color-base-5: var(--wui-yellow-5);
|
|
1241
|
+
--wui-color-base-6: var(--wui-yellow-6);
|
|
1242
|
+
--wui-color-base-7: var(--wui-yellow-7);
|
|
1243
|
+
--wui-color-base-8: var(--wui-yellow-8);
|
|
1244
|
+
--wui-color-base-9: var(--wui-yellow-9);
|
|
1245
|
+
--wui-color-base-10: var(--wui-yellow-10);
|
|
1246
|
+
--wui-color-base-11: var(--wui-yellow-11);
|
|
1247
|
+
--wui-color-base-12: var(--wui-yellow-12);
|
|
1248
|
+
--wui-color-base-contrast: var(--wui-yellow-contrast);
|
|
1249
|
+
|
|
1250
|
+
--wui-color-accent-1: var(--wui-yellow-1);
|
|
1251
|
+
--wui-color-accent-2: var(--wui-yellow-2);
|
|
1252
|
+
--wui-color-accent-3: var(--wui-yellow-3);
|
|
1253
|
+
--wui-color-accent-4: var(--wui-yellow-4);
|
|
1254
|
+
--wui-color-accent-5: var(--wui-yellow-5);
|
|
1255
|
+
--wui-color-accent-6: var(--wui-yellow-6);
|
|
1256
|
+
--wui-color-accent-7: var(--wui-yellow-7);
|
|
1257
|
+
--wui-color-accent-8: var(--wui-yellow-8);
|
|
1258
|
+
--wui-color-accent-9: var(--wui-yellow-9);
|
|
1259
|
+
--wui-color-accent-10: var(--wui-yellow-10);
|
|
1260
|
+
--wui-color-accent-11: var(--wui-yellow-11);
|
|
1261
|
+
--wui-color-accent-12: var(--wui-yellow-12);
|
|
1262
|
+
--wui-color-accent-contrast: var(--wui-yellow-contrast);
|
|
1263
|
+
|
|
1264
|
+
--wui-color-surface-token: var(--wui-yellow-2);
|
|
1265
|
+
--wui-color-text-button-token: var(--wui-yellow-11);
|
|
1266
|
+
`;
|
|
1267
|
+
var errorColorScheme = import_styled_components3.css`
|
|
1268
|
+
--wui-color-base-1: var(--wui-error-1);
|
|
1269
|
+
--wui-color-base-2: var(--wui-error-2);
|
|
1270
|
+
--wui-color-base-3: var(--wui-error-3);
|
|
1271
|
+
--wui-color-base-4: var(--wui-error-4);
|
|
1272
|
+
--wui-color-base-5: var(--wui-error-5);
|
|
1273
|
+
--wui-color-base-6: var(--wui-error-6);
|
|
1274
|
+
--wui-color-base-7: var(--wui-error-7);
|
|
1275
|
+
--wui-color-base-8: var(--wui-error-8);
|
|
1276
|
+
--wui-color-base-9: var(--wui-error-9);
|
|
1277
|
+
--wui-color-base-10: var(--wui-error-10);
|
|
1278
|
+
--wui-color-base-11: var(--wui-error-11);
|
|
1279
|
+
--wui-color-base-12: var(--wui-error-12);
|
|
1280
|
+
--wui-color-base-contrast: var(--wui-error-contrast);
|
|
1281
|
+
|
|
1282
|
+
--wui-color-accent-1: var(--wui-error-1);
|
|
1283
|
+
--wui-color-accent-2: var(--wui-error-2);
|
|
1284
|
+
--wui-color-accent-3: var(--wui-error-3);
|
|
1285
|
+
--wui-color-accent-4: var(--wui-error-4);
|
|
1286
|
+
--wui-color-accent-5: var(--wui-error-5);
|
|
1287
|
+
--wui-color-accent-6: var(--wui-error-6);
|
|
1288
|
+
--wui-color-accent-7: var(--wui-error-7);
|
|
1289
|
+
--wui-color-accent-8: var(--wui-error-8);
|
|
1290
|
+
--wui-color-accent-9: var(--wui-error-9);
|
|
1291
|
+
--wui-color-accent-10: var(--wui-error-10);
|
|
1292
|
+
--wui-color-accent-11: var(--wui-error-11);
|
|
1293
|
+
--wui-color-accent-12: var(--wui-error-12);
|
|
1294
|
+
--wui-color-accent-contrast: var(--wui-error-contrast);
|
|
1295
|
+
|
|
1296
|
+
--wui-color-surface-token: var(--wui-error-2);
|
|
1297
|
+
--wui-color-text-button-token: var(--wui-error-11);
|
|
1298
|
+
`;
|
|
1299
|
+
var infoColorScheme = import_styled_components3.css`
|
|
1300
|
+
--wui-color-base-1: var(--wui-blue-1);
|
|
1301
|
+
--wui-color-base-2: var(--wui-blue-2);
|
|
1302
|
+
--wui-color-base-3: var(--wui-blue-3);
|
|
1303
|
+
--wui-color-base-4: var(--wui-blue-4);
|
|
1304
|
+
--wui-color-base-5: var(--wui-blue-5);
|
|
1305
|
+
--wui-color-base-6: var(--wui-blue-6);
|
|
1306
|
+
--wui-color-base-7: var(--wui-blue-7);
|
|
1307
|
+
--wui-color-base-8: var(--wui-blue-8);
|
|
1308
|
+
--wui-color-base-9: var(--wui-blue-9);
|
|
1309
|
+
--wui-color-base-10: var(--wui-blue-10);
|
|
1310
|
+
--wui-color-base-11: var(--wui-blue-11);
|
|
1311
|
+
--wui-color-base-12: var(--wui-blue-12);
|
|
1312
|
+
--wui-color-base-contrast: var(--wui-blue-contrast);
|
|
1313
|
+
|
|
1314
|
+
--wui-color-accent-1: var(--wui-blue-1);
|
|
1315
|
+
--wui-color-accent-2: var(--wui-blue-2);
|
|
1316
|
+
--wui-color-accent-3: var(--wui-blue-3);
|
|
1317
|
+
--wui-color-accent-4: var(--wui-blue-4);
|
|
1318
|
+
--wui-color-accent-5: var(--wui-blue-5);
|
|
1319
|
+
--wui-color-accent-6: var(--wui-blue-6);
|
|
1320
|
+
--wui-color-accent-7: var(--wui-blue-7);
|
|
1321
|
+
--wui-color-accent-8: var(--wui-blue-8);
|
|
1322
|
+
--wui-color-accent-9: var(--wui-blue-9);
|
|
1323
|
+
--wui-color-accent-10: var(--wui-blue-10);
|
|
1324
|
+
--wui-color-accent-11: var(--wui-blue-11);
|
|
1325
|
+
--wui-color-accent-12: var(--wui-blue-12);
|
|
1326
|
+
--wui-color-accent-contrast: var(--wui-blue-contrast);
|
|
1327
|
+
|
|
1328
|
+
--wui-color-surface-token: var(--wui-blue-2);
|
|
1329
|
+
--wui-color-text-button-token: var(--wui-blue-11);
|
|
1330
|
+
`;
|
|
1331
|
+
var successColorScheme = import_styled_components3.css`
|
|
1332
|
+
--wui-color-base-1: var(--wui-success-1);
|
|
1333
|
+
--wui-color-base-2: var(--wui-success-2);
|
|
1334
|
+
--wui-color-base-3: var(--wui-success-3);
|
|
1335
|
+
--wui-color-base-4: var(--wui-success-4);
|
|
1336
|
+
--wui-color-base-5: var(--wui-success-5);
|
|
1337
|
+
--wui-color-base-6: var(--wui-success-6);
|
|
1338
|
+
--wui-color-base-7: var(--wui-success-7);
|
|
1339
|
+
--wui-color-base-8: var(--wui-success-8);
|
|
1340
|
+
--wui-color-base-9: var(--wui-success-9);
|
|
1341
|
+
--wui-color-base-10: var(--wui-success-10);
|
|
1342
|
+
--wui-color-base-11: var(--wui-success-11);
|
|
1343
|
+
--wui-color-base-12: var(--wui-success-12);
|
|
1344
|
+
--wui-color-base-contrast: var(--wui-success-contrast);
|
|
1345
|
+
|
|
1346
|
+
--wui-color-accent-1: var(--wui-success-1);
|
|
1347
|
+
--wui-color-accent-2: var(--wui-success-2);
|
|
1348
|
+
--wui-color-accent-3: var(--wui-success-3);
|
|
1349
|
+
--wui-color-accent-4: var(--wui-success-4);
|
|
1350
|
+
--wui-color-accent-5: var(--wui-success-5);
|
|
1351
|
+
--wui-color-accent-6: var(--wui-success-6);
|
|
1352
|
+
--wui-color-accent-7: var(--wui-success-7);
|
|
1353
|
+
--wui-color-accent-8: var(--wui-success-8);
|
|
1354
|
+
--wui-color-accent-9: var(--wui-success-9);
|
|
1355
|
+
--wui-color-accent-10: var(--wui-success-10);
|
|
1356
|
+
--wui-color-accent-11: var(--wui-success-11);
|
|
1357
|
+
--wui-color-accent-12: var(--wui-success-12);
|
|
1358
|
+
--wui-color-accent-contrast: var(--wui-success-contrast);
|
|
1359
|
+
|
|
1360
|
+
--wui-color-surface-token: var(--wui-success-2);
|
|
1361
|
+
--wui-color-text-button-token: var(--wui-success-11);
|
|
1362
|
+
`;
|
|
1363
|
+
var warningColorScheme = import_styled_components3.css`
|
|
1364
|
+
--wui-color-base-1: var(--wui-warning-1);
|
|
1365
|
+
--wui-color-base-2: var(--wui-warning-2);
|
|
1366
|
+
--wui-color-base-3: var(--wui-warning-3);
|
|
1367
|
+
--wui-color-base-4: var(--wui-warning-4);
|
|
1368
|
+
--wui-color-base-5: var(--wui-warning-5);
|
|
1369
|
+
--wui-color-base-6: var(--wui-warning-6);
|
|
1370
|
+
--wui-color-base-7: var(--wui-warning-7);
|
|
1371
|
+
--wui-color-base-8: var(--wui-warning-8);
|
|
1372
|
+
--wui-color-base-9: var(--wui-warning-9);
|
|
1373
|
+
--wui-color-base-10: var(--wui-warning-10);
|
|
1374
|
+
--wui-color-base-11: var(--wui-warning-11);
|
|
1375
|
+
--wui-color-base-12: var(--wui-warning-12);
|
|
1376
|
+
--wui-color-base-contrast: var(--wui-warning-contrast);
|
|
1377
|
+
|
|
1378
|
+
--wui-color-accent-1: var(--wui-warning-1);
|
|
1379
|
+
--wui-color-accent-2: var(--wui-warning-2);
|
|
1380
|
+
--wui-color-accent-3: var(--wui-warning-3);
|
|
1381
|
+
--wui-color-accent-4: var(--wui-warning-4);
|
|
1382
|
+
--wui-color-accent-5: var(--wui-warning-5);
|
|
1383
|
+
--wui-color-accent-6: var(--wui-warning-6);
|
|
1384
|
+
--wui-color-accent-7: var(--wui-warning-7);
|
|
1385
|
+
--wui-color-accent-8: var(--wui-warning-8);
|
|
1386
|
+
--wui-color-accent-9: var(--wui-warning-9);
|
|
1387
|
+
--wui-color-accent-10: var(--wui-warning-10);
|
|
1388
|
+
--wui-color-accent-11: var(--wui-warning-11);
|
|
1389
|
+
--wui-color-accent-12: var(--wui-warning-12);
|
|
1390
|
+
--wui-color-accent-contrast: var(--wui-warning-contrast);
|
|
1391
|
+
|
|
1392
|
+
--wui-color-surface-token: var(--wui-warning-2);
|
|
1393
|
+
--wui-color-text-button-token: var(--wui-warning-11);
|
|
1394
|
+
`;
|
|
1395
|
+
var vendorHubspotColorScheme = import_styled_components3.css`
|
|
1396
|
+
--wui-color-base-1: var(--wui-vendor-hubspot-1);
|
|
1397
|
+
--wui-color-base-2: var(--wui-vendor-hubspot-2);
|
|
1398
|
+
--wui-color-base-3: var(--wui-vendor-hubspot-3);
|
|
1399
|
+
--wui-color-base-4: var(--wui-vendor-hubspot-4);
|
|
1400
|
+
--wui-color-base-5: var(--wui-vendor-hubspot-5);
|
|
1401
|
+
--wui-color-base-6: var(--wui-vendor-hubspot-6);
|
|
1402
|
+
--wui-color-base-7: var(--wui-vendor-hubspot-7);
|
|
1403
|
+
--wui-color-base-8: var(--wui-vendor-hubspot-8);
|
|
1404
|
+
--wui-color-base-9: var(--wui-vendor-hubspot-9);
|
|
1405
|
+
--wui-color-base-10: var(--wui-vendor-hubspot-10);
|
|
1406
|
+
--wui-color-base-11: var(--wui-vendor-hubspot-11);
|
|
1407
|
+
--wui-color-base-12: var(--wui-vendor-hubspot-12);
|
|
1408
|
+
--wui-color-base-contrast: var(--wui-vendor-hubspot-contrast);
|
|
1409
|
+
|
|
1410
|
+
--wui-color-accent-1: var(--wui-vendor-hubspot-1);
|
|
1411
|
+
--wui-color-accent-2: var(--wui-vendor-hubspot-2);
|
|
1412
|
+
--wui-color-accent-3: var(--wui-vendor-hubspot-3);
|
|
1413
|
+
--wui-color-accent-4: var(--wui-vendor-hubspot-4);
|
|
1414
|
+
--wui-color-accent-5: var(--wui-vendor-hubspot-5);
|
|
1415
|
+
--wui-color-accent-6: var(--wui-vendor-hubspot-6);
|
|
1416
|
+
--wui-color-accent-7: var(--wui-vendor-hubspot-7);
|
|
1417
|
+
--wui-color-accent-8: var(--wui-vendor-hubspot-8);
|
|
1418
|
+
--wui-color-accent-9: var(--wui-vendor-hubspot-9);
|
|
1419
|
+
--wui-color-accent-10: var(--wui-vendor-hubspot-10);
|
|
1420
|
+
--wui-color-accent-11: var(--wui-vendor-hubspot-11);
|
|
1421
|
+
--wui-color-accent-12: var(--wui-vendor-hubspot-12);
|
|
1422
|
+
--wui-color-accent-contrast: var(--wui-vendor-hubspot-contrast);
|
|
1423
|
+
|
|
1424
|
+
--wui-color-surface-token: var(--wui-vendor-hubspot-2);
|
|
1425
|
+
--wui-color-text-button-token: var(--wui-vendor-hubspot-11);
|
|
1426
|
+
`;
|
|
1427
|
+
var vendorMarketoColorScheme = import_styled_components3.css`
|
|
1428
|
+
--wui-color-base-1: var(--wui-vendor-marketo-1);
|
|
1429
|
+
--wui-color-base-2: var(--wui-vendor-marketo-2);
|
|
1430
|
+
--wui-color-base-3: var(--wui-vendor-marketo-3);
|
|
1431
|
+
--wui-color-base-4: var(--wui-vendor-marketo-4);
|
|
1432
|
+
--wui-color-base-5: var(--wui-vendor-marketo-5);
|
|
1433
|
+
--wui-color-base-6: var(--wui-vendor-marketo-6);
|
|
1434
|
+
--wui-color-base-7: var(--wui-vendor-marketo-7);
|
|
1435
|
+
--wui-color-base-8: var(--wui-vendor-marketo-8);
|
|
1436
|
+
--wui-color-base-9: var(--wui-vendor-marketo-9);
|
|
1437
|
+
--wui-color-base-10: var(--wui-vendor-marketo-10);
|
|
1438
|
+
--wui-color-base-11: var(--wui-vendor-marketo-11);
|
|
1439
|
+
--wui-color-base-12: var(--wui-vendor-marketo-12);
|
|
1440
|
+
--wui-color-base-contrast: var(--wui-vendor-marketo-contrast);
|
|
1441
|
+
|
|
1442
|
+
--wui-color-accent-1: var(--wui-vendor-marketo-1);
|
|
1443
|
+
--wui-color-accent-2: var(--wui-vendor-marketo-2);
|
|
1444
|
+
--wui-color-accent-3: var(--wui-vendor-marketo-3);
|
|
1445
|
+
--wui-color-accent-4: var(--wui-vendor-marketo-4);
|
|
1446
|
+
--wui-color-accent-5: var(--wui-vendor-marketo-5);
|
|
1447
|
+
--wui-color-accent-6: var(--wui-vendor-marketo-6);
|
|
1448
|
+
--wui-color-accent-7: var(--wui-vendor-marketo-7);
|
|
1449
|
+
--wui-color-accent-8: var(--wui-vendor-marketo-8);
|
|
1450
|
+
--wui-color-accent-9: var(--wui-vendor-marketo-9);
|
|
1451
|
+
--wui-color-accent-10: var(--wui-vendor-marketo-10);
|
|
1452
|
+
--wui-color-accent-11: var(--wui-vendor-marketo-11);
|
|
1453
|
+
--wui-color-accent-12: var(--wui-vendor-marketo-12);
|
|
1454
|
+
--wui-color-accent-contrast: var(--wui-vendor-marketo-contrast);
|
|
1455
|
+
|
|
1456
|
+
--wui-color-surface-token: var(--wui-vendor-marketo-2);
|
|
1457
|
+
--wui-color-text-button-token: var(--wui-vendor-marketo-11);
|
|
1458
|
+
`;
|
|
1459
|
+
var vendorPardotColorScheme = import_styled_components3.css`
|
|
1460
|
+
--wui-color-base-1: var(--wui-vendor-pardot-1);
|
|
1461
|
+
--wui-color-base-2: var(--wui-vendor-pardot-2);
|
|
1462
|
+
--wui-color-base-3: var(--wui-vendor-pardot-3);
|
|
1463
|
+
--wui-color-base-4: var(--wui-vendor-pardot-4);
|
|
1464
|
+
--wui-color-base-5: var(--wui-vendor-pardot-5);
|
|
1465
|
+
--wui-color-base-6: var(--wui-vendor-pardot-6);
|
|
1466
|
+
--wui-color-base-7: var(--wui-vendor-pardot-7);
|
|
1467
|
+
--wui-color-base-8: var(--wui-vendor-pardot-8);
|
|
1468
|
+
--wui-color-base-9: var(--wui-vendor-pardot-9);
|
|
1469
|
+
--wui-color-base-10: var(--wui-vendor-pardot-10);
|
|
1470
|
+
--wui-color-base-11: var(--wui-vendor-pardot-11);
|
|
1471
|
+
--wui-color-base-12: var(--wui-vendor-pardot-12);
|
|
1472
|
+
--wui-color-base-contrast: var(--wui-vendor-pardot-contrast);
|
|
1473
|
+
|
|
1474
|
+
--wui-color-accent-1: var(--wui-vendor-pardot-1);
|
|
1475
|
+
--wui-color-accent-2: var(--wui-vendor-pardot-2);
|
|
1476
|
+
--wui-color-accent-3: var(--wui-vendor-pardot-3);
|
|
1477
|
+
--wui-color-accent-4: var(--wui-vendor-pardot-4);
|
|
1478
|
+
--wui-color-accent-5: var(--wui-vendor-pardot-5);
|
|
1479
|
+
--wui-color-accent-6: var(--wui-vendor-pardot-6);
|
|
1480
|
+
--wui-color-accent-7: var(--wui-vendor-pardot-7);
|
|
1481
|
+
--wui-color-accent-8: var(--wui-vendor-pardot-8);
|
|
1482
|
+
--wui-color-accent-9: var(--wui-vendor-pardot-9);
|
|
1483
|
+
--wui-color-accent-10: var(--wui-vendor-pardot-10);
|
|
1484
|
+
--wui-color-accent-11: var(--wui-vendor-pardot-11);
|
|
1485
|
+
--wui-color-accent-12: var(--wui-vendor-pardot-12);
|
|
1486
|
+
--wui-color-accent-contrast: var(--wui-vendor-pardot-contrast);
|
|
1487
|
+
|
|
1488
|
+
--wui-color-surface-token: var(--wui-vendor-pardot-2);
|
|
1489
|
+
--wui-color-text-button-token: var(--wui-vendor-pardot-11);
|
|
1490
|
+
`;
|
|
1491
|
+
var navColorScheme = import_styled_components3.css`
|
|
1492
|
+
--wui-color-bg-app: #1e3399;
|
|
1493
|
+
|
|
1494
|
+
--wui-color-bg-fill: var(--wui-blue-1);
|
|
1495
|
+
--wui-color-bg-fill-hover: #e7e9f4;
|
|
1496
|
+
--wui-color-bg-fill-active: #dcdfef;
|
|
1497
|
+
|
|
1498
|
+
--wui-color-bg-surface: transparent;
|
|
1499
|
+
--wui-color-bg-surface-hover: #15267b;
|
|
1500
|
+
--wui-color-bg-surface-active: #122271;
|
|
1501
|
+
|
|
1502
|
+
--wui-color-bg-surface-secondary: #15267b;
|
|
1503
|
+
--wui-color-bg-surface-secondary-hover: #122271;
|
|
1504
|
+
--wui-color-bg-surface-secondary-active: #101e67;
|
|
1505
|
+
|
|
1506
|
+
--wui-color-bg-surface-tertiary: #0d1a5c;
|
|
1507
|
+
|
|
1508
|
+
--wui-color-border-secondary: #101e67;
|
|
1509
|
+
--wui-color-border-hover-secondary: #0e1c61;
|
|
1510
|
+
--wui-color-border-active-secondary: #0d1a5c;
|
|
1511
|
+
|
|
1512
|
+
--wui-color-border: var(--wui-color-bg-fill);
|
|
1513
|
+
--wui-color-border-hover: var(--wui-color-bg-fill-hover);
|
|
1514
|
+
--wui-color-border-active: var(--wui-color-bg-fill-active);
|
|
1515
|
+
|
|
1516
|
+
--wui-color-icon: var(--wui-blue-1);
|
|
1517
|
+
--wui-color-icon-on-fill: var(--wui-color-bg-app);
|
|
1518
|
+
|
|
1519
|
+
--wui-color-text: var(--wui-blue-1);
|
|
1520
|
+
--wui-color-text-on-fill: var(--wui-color-bg-app);
|
|
1521
|
+
--wui-color-text-link: var(--wui-blue-4);
|
|
1522
|
+
--wui-color-text-secondary: var(--wui-blue-6);
|
|
1523
|
+
--wui-color-text-button: var(--wui-blue-1);
|
|
1524
|
+
|
|
1525
|
+
--wui-color-focus-ring: var(--wui-blue-1);
|
|
1526
|
+
|
|
1527
|
+
/* Nav - Disabled */
|
|
1528
|
+
--wui-color-bg-surface-disabled: transparent;
|
|
1529
|
+
--wui-color-icon-disabled: var(--wui-blue-8);
|
|
1530
|
+
--wui-color-text-disabled: var(--wui-blue-8);
|
|
1531
|
+
|
|
1532
|
+
/* Nav - Selected */
|
|
1533
|
+
--wui-color-bg-surface-selected: var(--wui-color-bg-fill);
|
|
1534
|
+
--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);
|
|
1535
|
+
--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);
|
|
1536
|
+
--wui-color-icon-selected: var(--wui-color-bg-app);
|
|
1537
|
+
--wui-color-text-selected: var(--wui-color-bg-app);
|
|
1538
|
+
--wui-color-border-selected: transparent;
|
|
1539
|
+
--wui-color-border-hover-selected: transparent;
|
|
1540
|
+
--wui-color-border-active-selected: transparent;
|
|
1541
|
+
`;
|
|
1542
|
+
|
|
1543
|
+
// src/css/designTokens/colorAlias.tsx
|
|
1544
|
+
var baseAliasTokens = import_styled_components4.css`
|
|
1545
|
+
--wui-color-bg-fill: var(--wui-color-accent-9);
|
|
1546
|
+
--wui-color-bg-fill-active: var(--wui-color-accent-11);
|
|
1547
|
+
--wui-color-bg-fill-hover: var(--wui-color-accent-10);
|
|
1548
|
+
--wui-color-bg-surface: var(--wui-color-surface-token);
|
|
1549
|
+
--wui-color-bg-surface-active: var(--wui-color-base-4);
|
|
1550
|
+
--wui-color-bg-surface-hover: var(--wui-color-base-3);
|
|
1551
|
+
--wui-color-bg-surface-secondary: var(--wui-color-base-3);
|
|
1552
|
+
--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);
|
|
1553
|
+
--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);
|
|
1554
|
+
--wui-color-bg-surface-tertiary: var(--wui-color-base-5);
|
|
1555
|
+
--wui-color-border: var(--wui-color-base-6);
|
|
1556
|
+
--wui-color-border-hover: var(--wui-color-base-8);
|
|
1557
|
+
--wui-color-border-active: var(--wui-color-base-9);
|
|
1558
|
+
--wui-color-border-secondary: var(--wui-color-base-8);
|
|
1559
|
+
--wui-color-border-secondary-hover: var(--wui-color-base-10);
|
|
1560
|
+
--wui-color-border-secondary-active: var(--wui-color-base-11);
|
|
1561
|
+
--wui-color-icon: var(--wui-color-base-11);
|
|
1562
|
+
--wui-color-icon-on-fill: var(--wui-color-accent-contrast);
|
|
1563
|
+
--wui-color-text: var(--wui-color-base-12);
|
|
1564
|
+
--wui-color-text-button: var(--wui-color-text-button-token);
|
|
1565
|
+
--wui-color-text-link: var(--wui-color-accent-9);
|
|
1566
|
+
--wui-color-text-on-fill: var(--wui-color-accent-contrast);
|
|
1567
|
+
--wui-color-text-secondary: var(--wui-color-base-11);
|
|
1568
|
+
--wui-color-focus-ring: var(--wui-color-accent-9);
|
|
1569
|
+
`;
|
|
1570
|
+
var colorAliasTokens = import_styled_components4.css`
|
|
1009
1571
|
--wui-color-bg-app: var(--wui-app-background);
|
|
1010
1572
|
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
--wui-color-bg-fill-active: var(--wui-blue-11);
|
|
1014
|
-
--wui-color-bg-fill-hover: var(--wui-blue-10);
|
|
1015
|
-
--wui-color-bg-surface: var(--wui-gray-1);
|
|
1016
|
-
--wui-color-bg-surface-active: var(--wui-gray-4);
|
|
1017
|
-
--wui-color-bg-surface-hover: var(--wui-gray-3);
|
|
1018
|
-
--wui-color-bg-surface-secondary: var(--wui-gray-3);
|
|
1019
|
-
--wui-color-bg-surface-secondary-active: var(--wui-gray-5);
|
|
1020
|
-
--wui-color-bg-surface-secondary-hover: var(--wui-gray-4);
|
|
1021
|
-
--wui-color-bg-surface-tertiary: var(--wui-gray-5);
|
|
1022
|
-
--wui-color-border: var(--wui-gray-6);
|
|
1023
|
-
--wui-color-border-hover: var(--wui-gray-8);
|
|
1024
|
-
--wui-color-border-active: var(--wui-gray-9);
|
|
1025
|
-
--wui-color-border-secondary: var(--wui-gray-8);
|
|
1026
|
-
--wui-color-border-secondary-hover: var(--wui-gray-10);
|
|
1027
|
-
--wui-color-border-secondary-active: var(--wui-gray-11);
|
|
1028
|
-
--wui-color-icon: var(--wui-gray-11);
|
|
1029
|
-
--wui-color-icon-on-fill: var(--wui-gray-contrast);
|
|
1030
|
-
--wui-color-text: var(--wui-gray-12);
|
|
1031
|
-
--wui-color-text-button: var(--wui-gray-12);
|
|
1032
|
-
--wui-color-text-link: var(--wui-blue-9);
|
|
1033
|
-
--wui-color-text-on-fill: var(--wui-gray-contrast);
|
|
1034
|
-
--wui-color-text-secondary: var(--wui-gray-11);
|
|
1035
|
-
--wui-color-focus-ring: var(--wui-blue-9);
|
|
1573
|
+
${defaultColorScheme}
|
|
1574
|
+
${baseAliasTokens}
|
|
1036
1575
|
|
|
1037
1576
|
/* --- Semantic --- */
|
|
1038
1577
|
|
|
@@ -1330,8 +1869,8 @@ var colorAliasTokens = import_styled_components3.css`
|
|
|
1330
1869
|
`;
|
|
1331
1870
|
|
|
1332
1871
|
// src/css/designTokens/borderRadius.tsx
|
|
1333
|
-
var
|
|
1334
|
-
var borderRadiusTokens =
|
|
1872
|
+
var import_styled_components5 = require("styled-components");
|
|
1873
|
+
var borderRadiusTokens = import_styled_components5.css`
|
|
1335
1874
|
--wui-border-radius-00: 0;
|
|
1336
1875
|
--wui-border-radius-01: 4px;
|
|
1337
1876
|
--wui-border-radius-02: 8px;
|
|
@@ -1342,8 +1881,8 @@ var borderRadiusTokens = import_styled_components4.css`
|
|
|
1342
1881
|
`;
|
|
1343
1882
|
|
|
1344
1883
|
// src/css/designTokens/spacing.tsx
|
|
1345
|
-
var
|
|
1346
|
-
var spacingTokens =
|
|
1884
|
+
var import_styled_components6 = require("styled-components");
|
|
1885
|
+
var spacingTokens = import_styled_components6.css`
|
|
1347
1886
|
--wui-space-00: 0px;
|
|
1348
1887
|
--wui-space-01: 4px;
|
|
1349
1888
|
--wui-space-02: 8px;
|
|
@@ -1357,8 +1896,8 @@ var spacingTokens = import_styled_components5.css`
|
|
|
1357
1896
|
`;
|
|
1358
1897
|
|
|
1359
1898
|
// src/css/designTokens/typography.tsx
|
|
1360
|
-
var
|
|
1361
|
-
var typographyTokens =
|
|
1899
|
+
var import_styled_components7 = require("styled-components");
|
|
1900
|
+
var typographyTokens = import_styled_components7.css`
|
|
1362
1901
|
--wui-typography-family-default: intervariable, sans-serif;
|
|
1363
1902
|
--wui-typography-family-brand: 'GT Walsheim', sans-serif;
|
|
1364
1903
|
--wui-typography-family-mono: 'IBM Plex Mono', monospace;
|
|
@@ -1471,8 +2010,8 @@ var typographyTokens = import_styled_components6.css`
|
|
|
1471
2010
|
`;
|
|
1472
2011
|
|
|
1473
2012
|
// src/css/designTokens/zIndex.tsx
|
|
1474
|
-
var
|
|
1475
|
-
var zIndexTokens =
|
|
2013
|
+
var import_styled_components8 = require("styled-components");
|
|
2014
|
+
var zIndexTokens = import_styled_components8.css`
|
|
1476
2015
|
--wui-zindex-under: -1;
|
|
1477
2016
|
--wui-zindex-backdrop: 500;
|
|
1478
2017
|
--wui-zindex-menu: 500;
|
|
@@ -1483,15 +2022,15 @@ var zIndexTokens = import_styled_components7.css`
|
|
|
1483
2022
|
`;
|
|
1484
2023
|
|
|
1485
2024
|
// src/css/designTokens/elevation.tsx
|
|
1486
|
-
var
|
|
1487
|
-
var elevationTokens =
|
|
2025
|
+
var import_styled_components9 = require("styled-components");
|
|
2026
|
+
var elevationTokens = import_styled_components9.css`
|
|
1488
2027
|
--wui-elevation-01: 0px 4px 8px 0px var(--wui-color-drop-shadow);
|
|
1489
2028
|
--wui-elevation-02: 0px 4px 24px 0px var(--wui-color-drop-shadow);
|
|
1490
2029
|
`;
|
|
1491
2030
|
|
|
1492
2031
|
// src/css/designTokens/motion.tsx
|
|
1493
|
-
var
|
|
1494
|
-
var motionTokens =
|
|
2032
|
+
var import_styled_components10 = require("styled-components");
|
|
2033
|
+
var motionTokens = import_styled_components10.css`
|
|
1495
2034
|
/* Durations */
|
|
1496
2035
|
--wui-motion-duration-01: 70ms;
|
|
1497
2036
|
--wui-motion-duration-02: 110ms;
|
|
@@ -1520,7 +2059,7 @@ var motionTokens = import_styled_components9.css`
|
|
|
1520
2059
|
`;
|
|
1521
2060
|
|
|
1522
2061
|
// src/css/designTokens/index.tsx
|
|
1523
|
-
var colorTokens =
|
|
2062
|
+
var colorTokens = import_styled_components11.css`
|
|
1524
2063
|
${lightGlobalTokens}
|
|
1525
2064
|
/* Dark mode is disabled until we have a more robust plan for supporting it */
|
|
1526
2065
|
|
|
@@ -1529,7 +2068,7 @@ var colorTokens = import_styled_components10.css`
|
|
|
1529
2068
|
} */
|
|
1530
2069
|
${colorAliasTokens}
|
|
1531
2070
|
`;
|
|
1532
|
-
var designTokens =
|
|
2071
|
+
var designTokens = import_styled_components11.css`
|
|
1533
2072
|
:root {
|
|
1534
2073
|
${borderRadiusTokens}
|
|
1535
2074
|
${colorTokens}
|
|
@@ -1542,8 +2081,8 @@ var designTokens = import_styled_components10.css`
|
|
|
1542
2081
|
`;
|
|
1543
2082
|
|
|
1544
2083
|
// src/components/ClickRegion/globalStyles.tsx
|
|
1545
|
-
var
|
|
1546
|
-
var clickRegionGlobalStyles =
|
|
2084
|
+
var import_styled_components12 = require("styled-components");
|
|
2085
|
+
var clickRegionGlobalStyles = import_styled_components12.css`
|
|
1547
2086
|
[data-click-region] {
|
|
1548
2087
|
position: relative;
|
|
1549
2088
|
cursor: pointer;
|
|
@@ -1569,7 +2108,7 @@ var clickRegionGlobalStyles = import_styled_components11.css`
|
|
|
1569
2108
|
`;
|
|
1570
2109
|
|
|
1571
2110
|
// src/css/GlobalStyle.tsx
|
|
1572
|
-
var GlobalStyle =
|
|
2111
|
+
var GlobalStyle = import_styled_components13.createGlobalStyle`
|
|
1573
2112
|
${globalStyleAdjustmentsCss}
|
|
1574
2113
|
${designTokens}
|
|
1575
2114
|
${clickRegionGlobalStyles}
|
|
@@ -2738,16 +3277,16 @@ var import_sonner2 = require("sonner");
|
|
|
2738
3277
|
|
|
2739
3278
|
// src/private/components/Toast/Toast.tsx
|
|
2740
3279
|
var import_react19 = require("react");
|
|
2741
|
-
var
|
|
3280
|
+
var import_styled_components17 = __toESM(require("styled-components"));
|
|
2742
3281
|
var import_type_guards11 = require("@wistia/type-guards");
|
|
2743
3282
|
|
|
2744
3283
|
// src/components/Ellipsis/Ellipsis.tsx
|
|
2745
3284
|
var import_type_guards10 = require("@wistia/type-guards");
|
|
2746
|
-
var
|
|
3285
|
+
var import_styled_components15 = __toESM(require("styled-components"));
|
|
2747
3286
|
|
|
2748
3287
|
// src/css/lineClampCss.tsx
|
|
2749
|
-
var
|
|
2750
|
-
var lineClampCss = ($lines = 1) =>
|
|
3288
|
+
var import_styled_components14 = require("styled-components");
|
|
3289
|
+
var lineClampCss = ($lines = 1) => import_styled_components14.css`
|
|
2751
3290
|
-webkit-box-orient: vertical;
|
|
2752
3291
|
-webkit-line-clamp: ${$lines};
|
|
2753
3292
|
display: -webkit-box !important;
|
|
@@ -2756,7 +3295,7 @@ var lineClampCss = ($lines = 1) => import_styled_components13.css`
|
|
|
2756
3295
|
|
|
2757
3296
|
// src/components/Ellipsis/Ellipsis.tsx
|
|
2758
3297
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
2759
|
-
var ellipsisStyle =
|
|
3298
|
+
var ellipsisStyle = import_styled_components15.css`
|
|
2760
3299
|
overflow: hidden;
|
|
2761
3300
|
text-overflow: ellipsis;
|
|
2762
3301
|
white-space: nowrap;
|
|
@@ -2781,7 +3320,7 @@ var ellipsisStyle = import_styled_components14.css`
|
|
|
2781
3320
|
}
|
|
2782
3321
|
}
|
|
2783
3322
|
`;
|
|
2784
|
-
var EllipsisComponent =
|
|
3323
|
+
var EllipsisComponent = import_styled_components15.default.span`
|
|
2785
3324
|
${ellipsisStyle};
|
|
2786
3325
|
${({ $lines }) => {
|
|
2787
3326
|
if ((0, import_type_guards10.isNotNil)($lines)) {
|
|
@@ -2801,137 +3340,45 @@ var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ (0, import_jsx
|
|
|
2801
3340
|
Ellipsis.displayName = "Ellipsis_UI";
|
|
2802
3341
|
|
|
2803
3342
|
// src/private/helpers/getColorScheme/getColorScheme.ts
|
|
2804
|
-
var
|
|
2805
|
-
var
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
{ token: "border-active", step: "9" },
|
|
2824
|
-
{ token: "border-secondary", step: "8" },
|
|
2825
|
-
{ token: "border-secondary-hover", step: "10" },
|
|
2826
|
-
{ token: "border-secondary-active", step: "11" },
|
|
2827
|
-
{ token: "icon", step: "11" },
|
|
2828
|
-
{ token: "icon-on-fill", step: "contrast" },
|
|
2829
|
-
{ token: "focus-ring", step: "9" }
|
|
2830
|
-
];
|
|
2831
|
-
var defaultScheme = import_styled_components15.css`
|
|
2832
|
-
--wui-color-bg-surface: var(--wui-gray-1);
|
|
2833
|
-
--wui-color-bg-surface-hover: var(--wui-gray-3);
|
|
2834
|
-
--wui-color-bg-surface-active: var(--wui-gray-4);
|
|
2835
|
-
--wui-color-bg-surface-secondary: var(--wui-gray-3);
|
|
2836
|
-
--wui-color-bg-surface-secondary-hover: var(--wui-gray-4);
|
|
2837
|
-
--wui-color-bg-surface-secondary-active: var(--wui-gray-5);
|
|
2838
|
-
--wui-color-bg-surface-tertiary: var(--wui-gray-5);
|
|
2839
|
-
--wui-color-bg-fill: var(--wui-blue-9);
|
|
2840
|
-
--wui-color-bg-fill-hover: var(--wui-blue-10);
|
|
2841
|
-
--wui-color-bg-fill-active: var(--wui-blue-11);
|
|
2842
|
-
--wui-color-text: var(--wui-gray-12);
|
|
2843
|
-
--wui-color-text-button: var(--wui-gray-12);
|
|
2844
|
-
--wui-color-text-link: var(--wui-blue-9);
|
|
2845
|
-
--wui-color-text-secondary: var(--wui-gray-11);
|
|
2846
|
-
--wui-color-text-on-fill: var(--wui-gray-contrast);
|
|
2847
|
-
--wui-color-border: var(--wui-gray-6);
|
|
2848
|
-
--wui-color-border-hover: var(--wui-gray-8);
|
|
2849
|
-
--wui-color-border-active: var(--wui-gray-9);
|
|
2850
|
-
--wui-color-border-secondary: var(--wui-gray-8);
|
|
2851
|
-
--wui-color-border-secondary-hover: var(--wui-gray-10);
|
|
2852
|
-
--wui-color-border-secondary-active: var(--wui-gray-11);
|
|
2853
|
-
--wui-color-icon: var(--wui-gray-11);
|
|
2854
|
-
--wui-color-icon-on-fill: var(--wui-gray-contrast);
|
|
2855
|
-
--wui-color-focus-ring: var(--wui-blue-9);
|
|
2856
|
-
`;
|
|
2857
|
-
var navScheme = import_styled_components15.css`
|
|
2858
|
-
--wui-color-bg-app: #1e3399;
|
|
2859
|
-
|
|
2860
|
-
--wui-color-bg-fill: var(--wui-blue-1);
|
|
2861
|
-
--wui-color-bg-fill-hover: #e7e9f4;
|
|
2862
|
-
--wui-color-bg-fill-active: #dcdfef;
|
|
2863
|
-
|
|
2864
|
-
--wui-color-bg-surface: transparent;
|
|
2865
|
-
--wui-color-bg-surface-hover: #15267b;
|
|
2866
|
-
--wui-color-bg-surface-active: #122271;
|
|
2867
|
-
|
|
2868
|
-
--wui-color-bg-surface-secondary: #15267b;
|
|
2869
|
-
--wui-color-bg-surface-secondary-hover: #122271;
|
|
2870
|
-
--wui-color-bg-surface-secondary-active: #101e67;
|
|
2871
|
-
|
|
2872
|
-
--wui-color-bg-surface-tertiary: #0d1a5c;
|
|
2873
|
-
|
|
2874
|
-
--wui-color-border-secondary: #101e67;
|
|
2875
|
-
--wui-color-border-hover-secondary: #0e1c61;
|
|
2876
|
-
--wui-color-border-active-secondary: #0d1a5c;
|
|
2877
|
-
|
|
2878
|
-
--wui-color-border: var(--wui-color-bg-fill);
|
|
2879
|
-
--wui-color-border-hover: var(--wui-color-bg-fill-hover);
|
|
2880
|
-
--wui-color-border-active: var(--wui-color-bg-fill-active);
|
|
2881
|
-
|
|
2882
|
-
--wui-color-icon: var(--wui-blue-1);
|
|
2883
|
-
--wui-color-icon-on-fill: var(--wui-color-bg-app);
|
|
2884
|
-
|
|
2885
|
-
--wui-color-text: var(--wui-blue-1);
|
|
2886
|
-
--wui-color-text-on-fill: var(--wui-color-bg-app);
|
|
2887
|
-
--wui-color-text-link: var(--wui-blue-4);
|
|
2888
|
-
--wui-color-text-secondary: var(--wui-blue-6);
|
|
2889
|
-
--wui-color-text-button: var(--wui-blue-1);
|
|
2890
|
-
|
|
2891
|
-
--wui-color-focus-ring: var(--wui-blue-1);
|
|
2892
|
-
|
|
2893
|
-
/* Nav - Disabled */
|
|
2894
|
-
--wui-color-bg-surface-disabled: transparent;
|
|
2895
|
-
--wui-color-icon-disabled: var(--wui-blue-8);
|
|
2896
|
-
--wui-color-text-disabled: var(--wui-blue-8);
|
|
2897
|
-
|
|
2898
|
-
/* Nav - Selected */
|
|
2899
|
-
--wui-color-bg-surface-selected: var(--wui-color-bg-fill);
|
|
2900
|
-
--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);
|
|
2901
|
-
--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);
|
|
2902
|
-
--wui-color-icon-selected: var(--wui-color-bg-app);
|
|
2903
|
-
--wui-color-text-selected: var(--wui-color-bg-app);
|
|
2904
|
-
--wui-color-border-selected: transparent;
|
|
2905
|
-
--wui-color-border-hover-selected: transparent;
|
|
2906
|
-
--wui-color-border-active-selected: transparent;
|
|
2907
|
-
`;
|
|
3343
|
+
var import_styled_components16 = require("styled-components");
|
|
3344
|
+
var colorSchemes = {
|
|
3345
|
+
default: defaultColorScheme,
|
|
3346
|
+
blue: blueColorScheme,
|
|
3347
|
+
green: greenColorScheme,
|
|
3348
|
+
red: redColorScheme,
|
|
3349
|
+
yellow: yellowColorScheme,
|
|
3350
|
+
purple: purpleColorScheme,
|
|
3351
|
+
orange: orangeColorScheme,
|
|
3352
|
+
pink: pinkColorScheme,
|
|
3353
|
+
error: errorColorScheme,
|
|
3354
|
+
info: infoColorScheme,
|
|
3355
|
+
success: successColorScheme,
|
|
3356
|
+
warning: warningColorScheme,
|
|
3357
|
+
"vendor-hubspot": vendorHubspotColorScheme,
|
|
3358
|
+
"vendor-marketo": vendorMarketoColorScheme,
|
|
3359
|
+
"vendor-pardot": vendorPardotColorScheme,
|
|
3360
|
+
nav: navColorScheme
|
|
3361
|
+
};
|
|
2908
3362
|
var getColorScheme = (colorScheme) => {
|
|
2909
|
-
if (colorScheme === "nav") {
|
|
2910
|
-
return navScheme;
|
|
2911
|
-
}
|
|
2912
3363
|
if (colorScheme === "inherit") {
|
|
2913
3364
|
return null;
|
|
2914
3365
|
}
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
return import_styled_components15.css`
|
|
2919
|
-
${colorSchemeSchema.map(({ token, step }) => {
|
|
2920
|
-
return `--wui-color-${token}: var(--wui-${colorScheme === "info" ? "blue" : colorScheme}-${step});`;
|
|
2921
|
-
}).join("")}
|
|
3366
|
+
return import_styled_components16.css`
|
|
3367
|
+
${colorSchemes[colorScheme]}
|
|
3368
|
+
${baseAliasTokens}
|
|
2922
3369
|
`;
|
|
2923
3370
|
};
|
|
2924
3371
|
|
|
2925
3372
|
// src/private/components/Toast/Toast.tsx
|
|
2926
3373
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
2927
|
-
var Message = (0,
|
|
3374
|
+
var Message = (0, import_styled_components17.default)(Ellipsis)`
|
|
2928
3375
|
line-height: 1.3;
|
|
2929
3376
|
font-size: var(--wui-typography-label-3-size);
|
|
2930
3377
|
font-weight: var(--wui-typography-label-3-weight);
|
|
2931
3378
|
${lineClampCss(3)}
|
|
2932
3379
|
word-break: normal;
|
|
2933
3380
|
`;
|
|
2934
|
-
var MessageWrapper =
|
|
3381
|
+
var MessageWrapper = import_styled_components17.default.div`
|
|
2935
3382
|
display: flex;
|
|
2936
3383
|
flex-grow: 1;
|
|
2937
3384
|
flex-shrink: 1;
|
|
@@ -2944,13 +3391,13 @@ var MessageWrapper = import_styled_components16.default.div`
|
|
|
2944
3391
|
margin-right: var(--wui-space-02); /* space between icon & message */
|
|
2945
3392
|
}
|
|
2946
3393
|
`;
|
|
2947
|
-
var ActionWrapper =
|
|
3394
|
+
var ActionWrapper = import_styled_components17.default.div`
|
|
2948
3395
|
flex-grow: 0;
|
|
2949
3396
|
flex-shrink: 0;
|
|
2950
3397
|
flex-basis: auto;
|
|
2951
3398
|
margin-right: var(--wui-space-03);
|
|
2952
3399
|
`;
|
|
2953
|
-
var StyledToast =
|
|
3400
|
+
var StyledToast = import_styled_components17.default.div`
|
|
2954
3401
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
2955
3402
|
display: flex;
|
|
2956
3403
|
align-items: center;
|
|
@@ -3034,16 +3481,16 @@ var useToast = () => {
|
|
|
3034
3481
|
|
|
3035
3482
|
// src/components/ActionButton/ActionButton.tsx
|
|
3036
3483
|
var import_react24 = require("react");
|
|
3037
|
-
var
|
|
3484
|
+
var import_styled_components23 = __toESM(require("styled-components"));
|
|
3038
3485
|
|
|
3039
3486
|
// src/components/Button/Button.tsx
|
|
3040
3487
|
var import_react23 = require("react");
|
|
3041
|
-
var
|
|
3488
|
+
var import_styled_components22 = __toESM(require("styled-components"));
|
|
3042
3489
|
var import_type_guards15 = require("@wistia/type-guards");
|
|
3043
3490
|
|
|
3044
3491
|
// src/css/buttonResetCss.tsx
|
|
3045
|
-
var
|
|
3046
|
-
var buttonResetCss =
|
|
3492
|
+
var import_styled_components18 = require("styled-components");
|
|
3493
|
+
var buttonResetCss = import_styled_components18.css`
|
|
3047
3494
|
align-items: center;
|
|
3048
3495
|
background-color: transparent;
|
|
3049
3496
|
background-image: none;
|
|
@@ -3087,8 +3534,8 @@ var buttonResetCss = import_styled_components17.css`
|
|
|
3087
3534
|
`;
|
|
3088
3535
|
|
|
3089
3536
|
// src/components/Button/buttonStyles.tsx
|
|
3090
|
-
var
|
|
3091
|
-
var buttonSmallStyles =
|
|
3537
|
+
var import_styled_components19 = require("styled-components");
|
|
3538
|
+
var buttonSmallStyles = import_styled_components19.css`
|
|
3092
3539
|
--button-padding-vertical: var(--wui-space-01);
|
|
3093
3540
|
--button-padding-horizontal: var(--wui-space-02);
|
|
3094
3541
|
--button-label-padding-horizontal: var(--wui-space-01);
|
|
@@ -3099,7 +3546,7 @@ var buttonSmallStyles = import_styled_components18.css`
|
|
|
3099
3546
|
--button-icon-size: 12px;
|
|
3100
3547
|
--button-label-gap: 4px;
|
|
3101
3548
|
`;
|
|
3102
|
-
var buttonMediumStyles =
|
|
3549
|
+
var buttonMediumStyles = import_styled_components19.css`
|
|
3103
3550
|
--button-padding-vertical: var(--wui-space-02);
|
|
3104
3551
|
--button-padding-horizontal: var(--wui-space-02);
|
|
3105
3552
|
--button-label-padding-horizontal: 6px;
|
|
@@ -3110,7 +3557,7 @@ var buttonMediumStyles = import_styled_components18.css`
|
|
|
3110
3557
|
--button-icon-size: 16px;
|
|
3111
3558
|
--button-label-gap: 6px;
|
|
3112
3559
|
`;
|
|
3113
|
-
var buttonLargeStyles =
|
|
3560
|
+
var buttonLargeStyles = import_styled_components19.css`
|
|
3114
3561
|
--button-padding-vertical: var(--wui-space-02);
|
|
3115
3562
|
--button-padding-horizontal: var(--wui-space-02);
|
|
3116
3563
|
--button-label-padding-horizontal: var(--wui-space-02);
|
|
@@ -3121,7 +3568,7 @@ var buttonLargeStyles = import_styled_components18.css`
|
|
|
3121
3568
|
--button-icon-size: 24px;
|
|
3122
3569
|
--button-label-gap: 8px;
|
|
3123
3570
|
`;
|
|
3124
|
-
var buttonExtraLargeStyles =
|
|
3571
|
+
var buttonExtraLargeStyles = import_styled_components19.css`
|
|
3125
3572
|
--button-padding-vertical: var(--wui-space-03);
|
|
3126
3573
|
--button-padding-horizontal: var(--wui-space-03);
|
|
3127
3574
|
--button-label-padding-horizontal: var(--wui-space-02);
|
|
@@ -3132,34 +3579,34 @@ var buttonExtraLargeStyles = import_styled_components18.css`
|
|
|
3132
3579
|
--button-icon-size: 24px;
|
|
3133
3580
|
--button-label-gap: 8px;
|
|
3134
3581
|
`;
|
|
3135
|
-
var ghostButtonVariant =
|
|
3582
|
+
var ghostButtonVariant = import_styled_components19.css`
|
|
3136
3583
|
--button-color-bg-override: transparent;
|
|
3137
3584
|
--button-color-bg-hover: var(--wui-color-bg-surface-hover);
|
|
3138
3585
|
--button-color-bg-active: var(--wui-color-bg-surface-active);
|
|
3139
3586
|
--button-color-text: var(--wui-color-text-button);
|
|
3140
3587
|
--button-color-icon: var(--wui-color-icon);
|
|
3141
3588
|
`;
|
|
3142
|
-
var outlineButtonVariant =
|
|
3589
|
+
var outlineButtonVariant = import_styled_components19.css`
|
|
3143
3590
|
${ghostButtonVariant};
|
|
3144
3591
|
--button-color-border: var(--wui-color-border);
|
|
3145
3592
|
|
|
3146
3593
|
box-shadow: 0 0 0 2px var(--button-color-border) inset;
|
|
3147
3594
|
`;
|
|
3148
|
-
var softButtonVariant =
|
|
3595
|
+
var softButtonVariant = import_styled_components19.css`
|
|
3149
3596
|
--button-color-bg: var(--wui-color-bg-surface-secondary);
|
|
3150
3597
|
--button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
|
|
3151
3598
|
--button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
|
|
3152
3599
|
--button-color-text: var(--wui-color-text-button);
|
|
3153
3600
|
--button-color-icon: var(--wui-color-icon);
|
|
3154
3601
|
`;
|
|
3155
|
-
var solidButtonVariant =
|
|
3602
|
+
var solidButtonVariant = import_styled_components19.css`
|
|
3156
3603
|
--button-color-bg: var(--wui-color-bg-fill);
|
|
3157
3604
|
--button-color-bg-hover: var(--wui-color-bg-fill-hover);
|
|
3158
3605
|
--button-color-bg-active: var(--wui-color-bg-fill-active);
|
|
3159
3606
|
--button-color-text: var(--wui-color-text-on-fill);
|
|
3160
3607
|
--button-color-icon: var(--wui-color-icon-on-fill);
|
|
3161
3608
|
`;
|
|
3162
|
-
var disabledButtonVariant =
|
|
3609
|
+
var disabledButtonVariant = import_styled_components19.css`
|
|
3163
3610
|
--button-color-bg: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
|
|
3164
3611
|
--button-color-bg-hover: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
|
|
3165
3612
|
--button-color-bg-active: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
|
|
@@ -3167,7 +3614,7 @@ var disabledButtonVariant = import_styled_components18.css`
|
|
|
3167
3614
|
--button-color-icon: var(--wui-color-icon-disabled);
|
|
3168
3615
|
--button-color-border: var(--wui-color-border-disabled);
|
|
3169
3616
|
`;
|
|
3170
|
-
var pressedButtonVariant =
|
|
3617
|
+
var pressedButtonVariant = import_styled_components19.css`
|
|
3171
3618
|
--button-color-bg: var(--wui-color-bg-surface-selected);
|
|
3172
3619
|
--button-color-bg-hover: var(--wui-color-bg-surface-selected-hover);
|
|
3173
3620
|
--button-color-bg-active: var(--wui-color-bg-surface-selected-active);
|
|
@@ -3175,7 +3622,7 @@ var pressedButtonVariant = import_styled_components18.css`
|
|
|
3175
3622
|
--button-color-icon: var(--wui-color-icon-selected);
|
|
3176
3623
|
--button-color-border: var(--wui-color-border-selected);
|
|
3177
3624
|
`;
|
|
3178
|
-
var buttonBaseStyles =
|
|
3625
|
+
var buttonBaseStyles = import_styled_components19.css`
|
|
3179
3626
|
border-radius: var(--wui-border-radius-rounded);
|
|
3180
3627
|
font-family: var(--button-typography-family);
|
|
3181
3628
|
font-size: var(--button-typography-size);
|
|
@@ -3244,7 +3691,7 @@ var buttonSizeStyles = {
|
|
|
3244
3691
|
|
|
3245
3692
|
// src/components/Icon/Icon.tsx
|
|
3246
3693
|
var import_type_guards13 = require("@wistia/type-guards");
|
|
3247
|
-
var
|
|
3694
|
+
var import_styled_components20 = __toESM(require("styled-components"));
|
|
3248
3695
|
|
|
3249
3696
|
// src/components/Icon/icons/AbTestIcon.tsx
|
|
3250
3697
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
@@ -7226,7 +7673,7 @@ var iconSizeMap = {
|
|
|
7226
7673
|
xl: "32",
|
|
7227
7674
|
xxl: "48"
|
|
7228
7675
|
};
|
|
7229
|
-
var iconInlineStyle =
|
|
7676
|
+
var iconInlineStyle = import_styled_components20.css`
|
|
7230
7677
|
[data-wui-icon-inline] {
|
|
7231
7678
|
--wui-icon-inline-size: 0.8em;
|
|
7232
7679
|
--wui-icon-inline-offset: 0.05em;
|
|
@@ -7236,7 +7683,7 @@ var iconInlineStyle = import_styled_components19.css`
|
|
|
7236
7683
|
position: relative;
|
|
7237
7684
|
}
|
|
7238
7685
|
`;
|
|
7239
|
-
var StyledIcon =
|
|
7686
|
+
var StyledIcon = import_styled_components20.default.svg`
|
|
7240
7687
|
${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
|
|
7241
7688
|
--wui-icon-size: var(--wui-icon-inline-size, ${({ $height }) => $height}px);
|
|
7242
7689
|
--wui-icon-vertical-align: middle;
|
|
@@ -7294,7 +7741,7 @@ Icon.displayName = "Icon_UI";
|
|
|
7294
7741
|
|
|
7295
7742
|
// src/components/Link/Link.tsx
|
|
7296
7743
|
var import_react22 = require("react");
|
|
7297
|
-
var
|
|
7744
|
+
var import_styled_components21 = __toESM(require("styled-components"));
|
|
7298
7745
|
var import_react_router_dom = require("react-router-dom");
|
|
7299
7746
|
var import_type_guards14 = require("@wistia/type-guards");
|
|
7300
7747
|
var import_jsx_runtime197 = require("react/jsx-runtime");
|
|
@@ -7313,7 +7760,7 @@ var generateHref = (href, type, disabled) => {
|
|
|
7313
7760
|
};
|
|
7314
7761
|
var isButton = (props) => (0, import_type_guards14.isUndefined)(props.href);
|
|
7315
7762
|
var isLink = (props) => (0, import_type_guards14.isNotUndefined)(props.href);
|
|
7316
|
-
var StyledLink =
|
|
7763
|
+
var StyledLink = import_styled_components21.default.a`
|
|
7317
7764
|
${({ href }) => (0, import_type_guards14.isNil)(href) && buttonResetCss};
|
|
7318
7765
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
7319
7766
|
cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
|
|
@@ -7436,7 +7883,7 @@ Link.displayName = "Link_UI";
|
|
|
7436
7883
|
// src/components/Button/Button.tsx
|
|
7437
7884
|
var import_jsx_runtime198 = require("react/jsx-runtime");
|
|
7438
7885
|
var isLink2 = (props) => (0, import_type_guards15.isNotUndefined)(props.href);
|
|
7439
|
-
var StyledButton =
|
|
7886
|
+
var StyledButton = import_styled_components22.default.button`
|
|
7440
7887
|
${buttonResetCss}
|
|
7441
7888
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
7442
7889
|
${({ $size }) => buttonSizeStyles[$size]}
|
|
@@ -7445,7 +7892,7 @@ var StyledButton = import_styled_components21.default.button`
|
|
|
7445
7892
|
${({ $fullWidth }) => $fullWidth && "width: 100%;"}
|
|
7446
7893
|
text-align: center;
|
|
7447
7894
|
`;
|
|
7448
|
-
var StyledButtonContent =
|
|
7895
|
+
var StyledButtonContent = import_styled_components22.default.div`
|
|
7449
7896
|
align-items: center;
|
|
7450
7897
|
display: inline-flex;
|
|
7451
7898
|
flex-grow: 1;
|
|
@@ -7457,10 +7904,10 @@ var StyledButtonContent = import_styled_components21.default.div`
|
|
|
7457
7904
|
${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
|
|
7458
7905
|
${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
|
|
7459
7906
|
`;
|
|
7460
|
-
var StyledButtonContentLabel =
|
|
7907
|
+
var StyledButtonContentLabel = import_styled_components22.default.span`
|
|
7461
7908
|
flex: ${({ $fullWidth }) => $fullWidth ? "initial" : "1"};
|
|
7462
7909
|
`;
|
|
7463
|
-
var StyledButtonLoading =
|
|
7910
|
+
var StyledButtonLoading = import_styled_components22.default.div`
|
|
7464
7911
|
position: absolute;
|
|
7465
7912
|
display: flex;
|
|
7466
7913
|
`;
|
|
@@ -7577,7 +8024,7 @@ Button.displayName = "Button_UI";
|
|
|
7577
8024
|
|
|
7578
8025
|
// src/components/ActionButton/ActionButton.tsx
|
|
7579
8026
|
var import_jsx_runtime199 = require("react/jsx-runtime");
|
|
7580
|
-
var StyledActionButton = (0,
|
|
8027
|
+
var StyledActionButton = (0, import_styled_components23.default)(Button)`
|
|
7581
8028
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7582
8029
|
display: grid;
|
|
7583
8030
|
grid-template-columns: 24px 1fr;
|
|
@@ -7622,7 +8069,7 @@ var StyledActionButton = (0, import_styled_components22.default)(Button)`
|
|
|
7622
8069
|
}
|
|
7623
8070
|
}
|
|
7624
8071
|
`;
|
|
7625
|
-
var StyledMainIcon =
|
|
8072
|
+
var StyledMainIcon = import_styled_components23.default.div`
|
|
7626
8073
|
grid-column: 1;
|
|
7627
8074
|
grid-row: 1;
|
|
7628
8075
|
width: 24px;
|
|
@@ -7637,7 +8084,7 @@ var StyledMainIcon = import_styled_components22.default.div`
|
|
|
7637
8084
|
}
|
|
7638
8085
|
}
|
|
7639
8086
|
`;
|
|
7640
|
-
var StyledSecondaryIcon =
|
|
8087
|
+
var StyledSecondaryIcon = import_styled_components23.default.div`
|
|
7641
8088
|
grid-column: 2;
|
|
7642
8089
|
grid-row: 1;
|
|
7643
8090
|
width: 100%;
|
|
@@ -7645,7 +8092,7 @@ var StyledSecondaryIcon = import_styled_components22.default.div`
|
|
|
7645
8092
|
justify-content: flex-end;
|
|
7646
8093
|
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-out);
|
|
7647
8094
|
|
|
7648
|
-
${({ $hideUntilHover }) => $hideUntilHover &&
|
|
8095
|
+
${({ $hideUntilHover }) => $hideUntilHover && import_styled_components23.css`
|
|
7649
8096
|
will-change: transform;
|
|
7650
8097
|
opacity: 0;
|
|
7651
8098
|
transform: translateX(-16px);
|
|
@@ -7664,7 +8111,7 @@ var StyledSecondaryIcon = import_styled_components22.default.div`
|
|
|
7664
8111
|
}
|
|
7665
8112
|
}
|
|
7666
8113
|
`;
|
|
7667
|
-
var StyledLabel =
|
|
8114
|
+
var StyledLabel = import_styled_components23.default.span`
|
|
7668
8115
|
font-family: var(--wui-typography-heading-4-family);
|
|
7669
8116
|
font-size: var(--wui-typography-heading-4-size);
|
|
7670
8117
|
font-weight: var(--wui-typography-heading-4-weight);
|
|
@@ -7720,7 +8167,7 @@ ActionButton.displayName = "ActionButton_UI";
|
|
|
7720
8167
|
// src/components/Avatar/Avatar.tsx
|
|
7721
8168
|
var import_react25 = require("react");
|
|
7722
8169
|
var import_type_guards18 = require("@wistia/type-guards");
|
|
7723
|
-
var
|
|
8170
|
+
var import_styled_components26 = __toESM(require("styled-components"));
|
|
7724
8171
|
|
|
7725
8172
|
// src/components/Avatar/formatNameForDisplay.tsx
|
|
7726
8173
|
var import_type_guards16 = require("@wistia/type-guards");
|
|
@@ -7737,7 +8184,7 @@ var formatNameForDisplay = (name) => {
|
|
|
7737
8184
|
};
|
|
7738
8185
|
|
|
7739
8186
|
// src/components/Image/Image.tsx
|
|
7740
|
-
var
|
|
8187
|
+
var import_styled_components24 = __toESM(require("styled-components"));
|
|
7741
8188
|
var import_type_guards17 = require("@wistia/type-guards");
|
|
7742
8189
|
var import_jsx_runtime200 = require("react/jsx-runtime");
|
|
7743
8190
|
var getFillStyle = (fillContainer) => {
|
|
@@ -7755,7 +8202,7 @@ var getFillStyle = (fillContainer) => {
|
|
|
7755
8202
|
}
|
|
7756
8203
|
return void 0;
|
|
7757
8204
|
};
|
|
7758
|
-
var StyledImage =
|
|
8205
|
+
var StyledImage = import_styled_components24.default.img`
|
|
7759
8206
|
border-radius: ${({ $borderRadius }) => (0, import_type_guards17.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
|
|
7760
8207
|
${({ $fillContainer }) => getFillStyle($fillContainer)};
|
|
7761
8208
|
object-fit: ${({ $objFit }) => $objFit};
|
|
@@ -7790,7 +8237,7 @@ var Image = ({
|
|
|
7790
8237
|
Image.displayName = "Image_UI";
|
|
7791
8238
|
|
|
7792
8239
|
// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
|
|
7793
|
-
var
|
|
8240
|
+
var import_styled_components25 = __toESM(require("styled-components"));
|
|
7794
8241
|
var import_jsx_runtime201 = require("react/jsx-runtime");
|
|
7795
8242
|
var defaultColorSchemeOptions = ["default", "inherit"];
|
|
7796
8243
|
var semanticColorSchemeOptions = ["error", "info", "success", "warning"];
|
|
@@ -7800,6 +8247,7 @@ var brandColorSchemeOptions = [
|
|
|
7800
8247
|
"orange",
|
|
7801
8248
|
"pink",
|
|
7802
8249
|
"purple",
|
|
8250
|
+
"red",
|
|
7803
8251
|
"yellow"
|
|
7804
8252
|
];
|
|
7805
8253
|
var vendorColorSchemeOptions = [
|
|
@@ -7813,7 +8261,7 @@ var colorSchemeOptions = [
|
|
|
7813
8261
|
...brandColorSchemeOptions,
|
|
7814
8262
|
...vendorColorSchemeOptions
|
|
7815
8263
|
];
|
|
7816
|
-
var StyledColorSchemeWrapper =
|
|
8264
|
+
var StyledColorSchemeWrapper = import_styled_components25.default.div`
|
|
7817
8265
|
${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
|
|
7818
8266
|
`;
|
|
7819
8267
|
var ColorSchemeWrapper = ({
|
|
@@ -7869,7 +8317,7 @@ var Initial = ({ initial }) => /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
|
|
|
7869
8317
|
]
|
|
7870
8318
|
}
|
|
7871
8319
|
);
|
|
7872
|
-
var AvatarWrapper =
|
|
8320
|
+
var AvatarWrapper = import_styled_components26.default.div`
|
|
7873
8321
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7874
8322
|
width: ${({ $heightAndWidth }) => $heightAndWidth}px;
|
|
7875
8323
|
height: ${({ $heightAndWidth }) => $heightAndWidth}px;
|
|
@@ -7971,10 +8419,10 @@ Avatar.displayName = "Avatar_UI";
|
|
|
7971
8419
|
|
|
7972
8420
|
// src/components/Badge/Badge.tsx
|
|
7973
8421
|
var import_react26 = require("react");
|
|
7974
|
-
var
|
|
8422
|
+
var import_styled_components27 = __toESM(require("styled-components"));
|
|
7975
8423
|
var import_type_guards19 = require("@wistia/type-guards");
|
|
7976
8424
|
var import_jsx_runtime203 = require("react/jsx-runtime");
|
|
7977
|
-
var StyledBadge =
|
|
8425
|
+
var StyledBadge = import_styled_components27.default.div`
|
|
7978
8426
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7979
8427
|
align-items: center;
|
|
7980
8428
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -8023,12 +8471,12 @@ Badge.displayName = "Badge_UI";
|
|
|
8023
8471
|
|
|
8024
8472
|
// src/components/Banner/Banner.tsx
|
|
8025
8473
|
var import_react31 = require("react");
|
|
8026
|
-
var
|
|
8474
|
+
var import_styled_components33 = __toESM(require("styled-components"));
|
|
8027
8475
|
var import_type_guards24 = require("@wistia/type-guards");
|
|
8028
8476
|
|
|
8029
8477
|
// src/components/Box/Box.tsx
|
|
8030
8478
|
var import_react27 = require("react");
|
|
8031
|
-
var
|
|
8479
|
+
var import_styled_components28 = __toESM(require("styled-components"));
|
|
8032
8480
|
var import_type_guards20 = require("@wistia/type-guards");
|
|
8033
8481
|
|
|
8034
8482
|
// src/private/helpers/makePolymorphic/makePolymorphic.tsx
|
|
@@ -8084,34 +8532,34 @@ var getFlexStyle = (flexMode) => {
|
|
|
8084
8532
|
switch (flexMode) {
|
|
8085
8533
|
// grows to fill space, won't shrink, starts at 0
|
|
8086
8534
|
case "grow":
|
|
8087
|
-
return
|
|
8535
|
+
return import_styled_components28.css`
|
|
8088
8536
|
flex: 1 0 0;
|
|
8089
8537
|
`;
|
|
8090
8538
|
// default behavior, can shrink but won't grow
|
|
8091
8539
|
case "initial":
|
|
8092
|
-
return
|
|
8540
|
+
return import_styled_components28.css`
|
|
8093
8541
|
flex: 0 1 auto;
|
|
8094
8542
|
`;
|
|
8095
8543
|
// equal distribution of space
|
|
8096
8544
|
case "equal":
|
|
8097
|
-
return
|
|
8545
|
+
return import_styled_components28.css`
|
|
8098
8546
|
flex: 1;
|
|
8099
8547
|
`;
|
|
8100
8548
|
// won't grow or shrink
|
|
8101
8549
|
case "rigid":
|
|
8102
|
-
return
|
|
8550
|
+
return import_styled_components28.css`
|
|
8103
8551
|
flex: 0 0 auto;
|
|
8104
8552
|
`;
|
|
8105
8553
|
// can grow and shrink from content size
|
|
8106
8554
|
case "fluid":
|
|
8107
|
-
return
|
|
8555
|
+
return import_styled_components28.css`
|
|
8108
8556
|
flex: 1 1 auto;
|
|
8109
8557
|
`;
|
|
8110
8558
|
default:
|
|
8111
8559
|
return null;
|
|
8112
8560
|
}
|
|
8113
8561
|
};
|
|
8114
|
-
var StyledBoxComponent =
|
|
8562
|
+
var StyledBoxComponent = import_styled_components28.default.div`
|
|
8115
8563
|
/* properties meant for Box parent (flex container) */
|
|
8116
8564
|
align-content: ${({ $alignContent }) => $alignContent};
|
|
8117
8565
|
align-items: ${({ $alignItems }) => $alignItems};
|
|
@@ -8225,46 +8673,46 @@ var Box = makePolymorphic(BoxComponent);
|
|
|
8225
8673
|
|
|
8226
8674
|
// src/components/Heading/Heading.tsx
|
|
8227
8675
|
var import_react28 = require("react");
|
|
8228
|
-
var
|
|
8676
|
+
var import_styled_components29 = __toESM(require("styled-components"));
|
|
8229
8677
|
var import_type_guards21 = require("@wistia/type-guards");
|
|
8230
8678
|
var import_jsx_runtime205 = require("react/jsx-runtime");
|
|
8231
|
-
var heroStyle =
|
|
8679
|
+
var heroStyle = import_styled_components29.css`
|
|
8232
8680
|
--font-family: var(--wui-typography-heading-hero-family);
|
|
8233
8681
|
--font-size: var(--wui-typography-heading-hero-size);
|
|
8234
8682
|
--font-weight: var(--wui-typography-heading-hero-weight);
|
|
8235
8683
|
--line-height: var(--wui-typography-heading-hero-line-height);
|
|
8236
8684
|
`;
|
|
8237
|
-
var heading1TextStyle =
|
|
8685
|
+
var heading1TextStyle = import_styled_components29.css`
|
|
8238
8686
|
--font-family: var(--wui-typography-heading-1-family);
|
|
8239
8687
|
--font-size: var(--wui-typography-heading-1-size);
|
|
8240
8688
|
--font-weight: var(--wui-typography-heading-1-weight);
|
|
8241
8689
|
--line-height: var(--wui-typography-heading-1-line-height);
|
|
8242
8690
|
`;
|
|
8243
|
-
var heading2TextStyle =
|
|
8691
|
+
var heading2TextStyle = import_styled_components29.css`
|
|
8244
8692
|
--font-family: var(--wui-typography-heading-2-family);
|
|
8245
8693
|
--font-size: var(--wui-typography-heading-2-size);
|
|
8246
8694
|
--font-weight: var(--wui-typography-heading-2-weight);
|
|
8247
8695
|
--line-height: var(--wui-typography-heading-2-line-height);
|
|
8248
8696
|
`;
|
|
8249
|
-
var heading3TextStyle =
|
|
8697
|
+
var heading3TextStyle = import_styled_components29.css`
|
|
8250
8698
|
--font-family: var(--wui-typography-heading-3-family);
|
|
8251
8699
|
--font-size: var(--wui-typography-heading-3-size);
|
|
8252
8700
|
--font-weight: var(--wui-typography-heading-3-weight);
|
|
8253
8701
|
--line-height: var(--wui-typography-heading-3-line-height);
|
|
8254
8702
|
`;
|
|
8255
|
-
var heading4TextStyle =
|
|
8703
|
+
var heading4TextStyle = import_styled_components29.css`
|
|
8256
8704
|
--font-family: var(--wui-typography-heading-4-family);
|
|
8257
8705
|
--font-size: var(--wui-typography-heading-4-size);
|
|
8258
8706
|
--font-weight: var(--wui-typography-heading-4-weight);
|
|
8259
8707
|
--line-height: var(--wui-typography-heading-4-line-height);
|
|
8260
8708
|
`;
|
|
8261
|
-
var heading5TextStyle =
|
|
8709
|
+
var heading5TextStyle = import_styled_components29.css`
|
|
8262
8710
|
--font-family: var(--wui-typography-heading-5-family);
|
|
8263
8711
|
--font-size: var(--wui-typography-heading-5-size);
|
|
8264
8712
|
--font-weight: var(--wui-typography-heading-5-weight);
|
|
8265
8713
|
--line-height: var(--wui-typography-heading-5-line-height);
|
|
8266
8714
|
`;
|
|
8267
|
-
var heading6TextStyle =
|
|
8715
|
+
var heading6TextStyle = import_styled_components29.css`
|
|
8268
8716
|
--font-family: var(--wui-typography-heading-6-family);
|
|
8269
8717
|
--font-size: var(--wui-typography-heading-6-size);
|
|
8270
8718
|
--font-weight: var(--wui-typography-heading-6-weight);
|
|
@@ -8280,7 +8728,7 @@ var variantStyleMap = {
|
|
|
8280
8728
|
heading6: heading6TextStyle
|
|
8281
8729
|
};
|
|
8282
8730
|
var DEFAULT_ELEMENT2 = "h1";
|
|
8283
|
-
var StyledHeading =
|
|
8731
|
+
var StyledHeading = import_styled_components29.default.div`
|
|
8284
8732
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8285
8733
|
--text-color: ${({ $prominence, $disabled }) => {
|
|
8286
8734
|
if ($disabled) {
|
|
@@ -8303,20 +8751,20 @@ var StyledHeading = import_styled_components28.default.div`
|
|
|
8303
8751
|
${({ $variant }) => variantStyleMap[$variant]}
|
|
8304
8752
|
${({ $truncate }) => {
|
|
8305
8753
|
if ((0, import_type_guards21.isNotNil)($truncate)) {
|
|
8306
|
-
return
|
|
8754
|
+
return import_styled_components29.css`
|
|
8307
8755
|
${ellipsisStyle};
|
|
8308
8756
|
${lineClampCss($truncate)};
|
|
8309
8757
|
`;
|
|
8310
8758
|
}
|
|
8311
8759
|
return void 0;
|
|
8312
8760
|
}}
|
|
8313
|
-
${({ $inline }) => $inline &&
|
|
8761
|
+
${({ $inline }) => $inline && import_styled_components29.css`
|
|
8314
8762
|
display: inline-block;
|
|
8315
8763
|
`}
|
|
8316
|
-
${({ $preventUserSelect }) => $preventUserSelect &&
|
|
8764
|
+
${({ $preventUserSelect }) => $preventUserSelect && import_styled_components29.css`
|
|
8317
8765
|
user-select: none;
|
|
8318
8766
|
`}
|
|
8319
|
-
${({ $align }) =>
|
|
8767
|
+
${({ $align }) => import_styled_components29.css`
|
|
8320
8768
|
text-align: ${$align};
|
|
8321
8769
|
`}
|
|
8322
8770
|
margin: 0;
|
|
@@ -8366,10 +8814,10 @@ var Heading = makePolymorphic(HeadingComponent);
|
|
|
8366
8814
|
|
|
8367
8815
|
// src/components/Text/Text.tsx
|
|
8368
8816
|
var import_react29 = require("react");
|
|
8369
|
-
var
|
|
8817
|
+
var import_styled_components30 = __toESM(require("styled-components"));
|
|
8370
8818
|
var import_type_guards22 = require("@wistia/type-guards");
|
|
8371
8819
|
var import_jsx_runtime206 = require("react/jsx-runtime");
|
|
8372
|
-
var sharedBodyStyle =
|
|
8820
|
+
var sharedBodyStyle = import_styled_components30.css`
|
|
8373
8821
|
> strong,
|
|
8374
8822
|
b {
|
|
8375
8823
|
font-weight: var(--wui-typography-weight-body-bold);
|
|
@@ -8379,7 +8827,7 @@ var sharedBodyStyle = import_styled_components29.css`
|
|
|
8379
8827
|
font-weight: var(--wui-typography-weight-body-mark);
|
|
8380
8828
|
}
|
|
8381
8829
|
`;
|
|
8382
|
-
var labelBoldStyles =
|
|
8830
|
+
var labelBoldStyles = import_styled_components30.css`
|
|
8383
8831
|
> strong,
|
|
8384
8832
|
b {
|
|
8385
8833
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
@@ -8389,7 +8837,7 @@ var labelBoldStyles = import_styled_components29.css`
|
|
|
8389
8837
|
font-weight: var(--wui-typography-weight-label-mark);
|
|
8390
8838
|
}
|
|
8391
8839
|
`;
|
|
8392
|
-
var body1TextStyle =
|
|
8840
|
+
var body1TextStyle = import_styled_components30.css`
|
|
8393
8841
|
--font-family: var(--wui-typography-body-1-family);
|
|
8394
8842
|
--font-size: var(--wui-typography-body-1-size);
|
|
8395
8843
|
--font-weight: var(--wui-typography-body-1-weight);
|
|
@@ -8397,7 +8845,7 @@ var body1TextStyle = import_styled_components29.css`
|
|
|
8397
8845
|
--paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
|
|
8398
8846
|
${sharedBodyStyle}
|
|
8399
8847
|
`;
|
|
8400
|
-
var body2TextStyle =
|
|
8848
|
+
var body2TextStyle = import_styled_components30.css`
|
|
8401
8849
|
--font-family: var(--wui-typography-body-2-family);
|
|
8402
8850
|
--font-size: var(--wui-typography-body-2-size);
|
|
8403
8851
|
--font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -8405,7 +8853,7 @@ var body2TextStyle = import_styled_components29.css`
|
|
|
8405
8853
|
--paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
|
|
8406
8854
|
${sharedBodyStyle}
|
|
8407
8855
|
`;
|
|
8408
|
-
var body3TextStyle =
|
|
8856
|
+
var body3TextStyle = import_styled_components30.css`
|
|
8409
8857
|
--font-family: var(--wui-typography-body-3-family);
|
|
8410
8858
|
--font-size: var(--wui-typography-body-3-size);
|
|
8411
8859
|
--font-weight: var(--wui-typography-body-3-weight);
|
|
@@ -8413,7 +8861,7 @@ var body3TextStyle = import_styled_components29.css`
|
|
|
8413
8861
|
--paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
|
|
8414
8862
|
${sharedBodyStyle}
|
|
8415
8863
|
`;
|
|
8416
|
-
var body4TextStyle =
|
|
8864
|
+
var body4TextStyle = import_styled_components30.css`
|
|
8417
8865
|
--font-family: var(--wui-typography-body-4-family);
|
|
8418
8866
|
--font-size: var(--wui-typography-body-4-size);
|
|
8419
8867
|
--font-weight: var(--wui-typography-body-4-weight);
|
|
@@ -8421,47 +8869,47 @@ var body4TextStyle = import_styled_components29.css`
|
|
|
8421
8869
|
--paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
|
|
8422
8870
|
${sharedBodyStyle}
|
|
8423
8871
|
`;
|
|
8424
|
-
var label1TextStyle =
|
|
8872
|
+
var label1TextStyle = import_styled_components30.css`
|
|
8425
8873
|
--font-family: var(--wui-typography-label-1-family);
|
|
8426
8874
|
--font-size: var(--wui-typography-label-1-size);
|
|
8427
8875
|
--font-weight: var(--wui-typography-label-1-weight);
|
|
8428
8876
|
--line-height: var(--wui-typography-label-1-line-height);
|
|
8429
8877
|
${labelBoldStyles}
|
|
8430
8878
|
`;
|
|
8431
|
-
var label2TextStyle =
|
|
8879
|
+
var label2TextStyle = import_styled_components30.css`
|
|
8432
8880
|
--font-family: var(--wui-typography-label-2-family);
|
|
8433
8881
|
--font-size: var(--wui-typography-label-2-size);
|
|
8434
8882
|
--font-weight: var(--wui-typography-label-2-weight);
|
|
8435
8883
|
--line-height: var(--wui-typography-label-2-line-height);
|
|
8436
8884
|
${labelBoldStyles}
|
|
8437
8885
|
`;
|
|
8438
|
-
var label3TextStyle =
|
|
8886
|
+
var label3TextStyle = import_styled_components30.css`
|
|
8439
8887
|
--font-family: var(--wui-typography-label-3-family);
|
|
8440
8888
|
--font-size: var(--wui-typography-label-3-size);
|
|
8441
8889
|
--font-weight: var(--wui-typography-label-3-weight);
|
|
8442
8890
|
--line-height: var(--wui-typography-label-3-line-height);
|
|
8443
8891
|
${labelBoldStyles}
|
|
8444
8892
|
`;
|
|
8445
|
-
var label4TextStyle =
|
|
8893
|
+
var label4TextStyle = import_styled_components30.css`
|
|
8446
8894
|
--font-family: var(--wui-typography-label-4-family);
|
|
8447
8895
|
--font-size: var(--wui-typography-label-4-size);
|
|
8448
8896
|
--font-weight: var(--wui-typography-label-4-weight);
|
|
8449
8897
|
--line-height: var(--wui-typography-label-4-line-height);
|
|
8450
8898
|
${labelBoldStyles}
|
|
8451
8899
|
`;
|
|
8452
|
-
var body1MonoTextStyle =
|
|
8900
|
+
var body1MonoTextStyle = import_styled_components30.css`
|
|
8453
8901
|
${body1TextStyle};
|
|
8454
8902
|
--font-family: var(--wui-typography-family-mono);
|
|
8455
8903
|
`;
|
|
8456
|
-
var body2MonoTextStyle =
|
|
8904
|
+
var body2MonoTextStyle = import_styled_components30.css`
|
|
8457
8905
|
${body2TextStyle};
|
|
8458
8906
|
--font-family: var(--wui-typography-family-mono);
|
|
8459
8907
|
`;
|
|
8460
|
-
var body3MonoTextStyle =
|
|
8908
|
+
var body3MonoTextStyle = import_styled_components30.css`
|
|
8461
8909
|
${body3TextStyle};
|
|
8462
8910
|
--font-family: var(--wui-typography-family-mono);
|
|
8463
8911
|
`;
|
|
8464
|
-
var body4MonoTextStyle =
|
|
8912
|
+
var body4MonoTextStyle = import_styled_components30.css`
|
|
8465
8913
|
${body4TextStyle};
|
|
8466
8914
|
--font-family: var(--wui-typography-family-mono);
|
|
8467
8915
|
`;
|
|
@@ -8496,7 +8944,7 @@ var variantElementMap2 = {
|
|
|
8496
8944
|
label3: labelElement,
|
|
8497
8945
|
label4: labelElement
|
|
8498
8946
|
};
|
|
8499
|
-
var StyledText =
|
|
8947
|
+
var StyledText = import_styled_components30.default.div`
|
|
8500
8948
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8501
8949
|
--text-color: ${({ $prominence, $disabled }) => {
|
|
8502
8950
|
if ($disabled) {
|
|
@@ -8522,26 +8970,26 @@ var StyledText = import_styled_components29.default.div`
|
|
|
8522
8970
|
${({ $variant }) => variantStyleMap2[$variant]}
|
|
8523
8971
|
${({ $truncate }) => {
|
|
8524
8972
|
if ((0, import_type_guards22.isNotNil)($truncate)) {
|
|
8525
|
-
return
|
|
8973
|
+
return import_styled_components30.css`
|
|
8526
8974
|
${ellipsisStyle};
|
|
8527
8975
|
${lineClampCss($truncate)};
|
|
8528
8976
|
`;
|
|
8529
8977
|
}
|
|
8530
8978
|
return void 0;
|
|
8531
8979
|
}}
|
|
8532
|
-
${({ $inline }) => $inline &&
|
|
8980
|
+
${({ $inline }) => $inline && import_styled_components30.css`
|
|
8533
8981
|
display: inline-block;
|
|
8534
8982
|
`}
|
|
8535
|
-
${({ $disabled }) => $disabled &&
|
|
8983
|
+
${({ $disabled }) => $disabled && import_styled_components30.css`
|
|
8536
8984
|
--text-color: var(--wui-color-text-disabled);
|
|
8537
8985
|
`}
|
|
8538
|
-
${({ $preventUserSelect }) => $preventUserSelect &&
|
|
8986
|
+
${({ $preventUserSelect }) => $preventUserSelect && import_styled_components30.css`
|
|
8539
8987
|
user-select: none;
|
|
8540
8988
|
`}
|
|
8541
|
-
${({ $align }) =>
|
|
8989
|
+
${({ $align }) => import_styled_components30.css`
|
|
8542
8990
|
text-align: ${$align};
|
|
8543
8991
|
`}
|
|
8544
|
-
${({ as }) => as === "p" &&
|
|
8992
|
+
${({ as }) => as === "p" && import_styled_components30.css`
|
|
8545
8993
|
display: block;
|
|
8546
8994
|
|
|
8547
8995
|
+ p {
|
|
@@ -8584,7 +9032,7 @@ TextComponent.displayName = "Text_UI";
|
|
|
8584
9032
|
var Text = makePolymorphic(TextComponent);
|
|
8585
9033
|
|
|
8586
9034
|
// src/components/ButtonGroup/ButtonGroup.tsx
|
|
8587
|
-
var
|
|
9035
|
+
var import_styled_components31 = __toESM(require("styled-components"));
|
|
8588
9036
|
var import_type_guards23 = require("@wistia/type-guards");
|
|
8589
9037
|
var import_jsx_runtime207 = require("react/jsx-runtime");
|
|
8590
9038
|
var getAlignment = (align) => {
|
|
@@ -8599,7 +9047,7 @@ var getAlignment = (align) => {
|
|
|
8599
9047
|
}
|
|
8600
9048
|
return "flex-start";
|
|
8601
9049
|
};
|
|
8602
|
-
var ButtonGroupComponent =
|
|
9050
|
+
var ButtonGroupComponent = import_styled_components31.default.div`
|
|
8603
9051
|
display: flex;
|
|
8604
9052
|
|
|
8605
9053
|
/* this helps ensure that primary buttons appear at the top of the column */
|
|
@@ -8624,7 +9072,7 @@ var ButtonGroupComponent = import_styled_components30.default.div`
|
|
|
8624
9072
|
}
|
|
8625
9073
|
}
|
|
8626
9074
|
|
|
8627
|
-
${({ $buttonSize }) => $buttonSize !== "natural" &&
|
|
9075
|
+
${({ $buttonSize }) => $buttonSize !== "natural" && import_styled_components31.css`
|
|
8628
9076
|
button,
|
|
8629
9077
|
a {
|
|
8630
9078
|
${buttonSizeStyles[$buttonSize]}
|
|
@@ -8664,9 +9112,9 @@ ButtonGroup.displayName = "ButtonGroup_UI";
|
|
|
8664
9112
|
|
|
8665
9113
|
// src/components/IconButton/IconButton.tsx
|
|
8666
9114
|
var import_react30 = require("react");
|
|
8667
|
-
var
|
|
9115
|
+
var import_styled_components32 = __toESM(require("styled-components"));
|
|
8668
9116
|
var import_jsx_runtime208 = require("react/jsx-runtime");
|
|
8669
|
-
var StyledButton2 = (0,
|
|
9117
|
+
var StyledButton2 = (0, import_styled_components32.default)(Button)`
|
|
8670
9118
|
--icon-button-size-sm: 24px;
|
|
8671
9119
|
--icon-button-size-md: 32px;
|
|
8672
9120
|
--icon-button-size-lg: 40px;
|
|
@@ -8705,7 +9153,7 @@ var import_jsx_runtime209 = require("react/jsx-runtime");
|
|
|
8705
9153
|
var BREAKPOINT_WIDTH = 600;
|
|
8706
9154
|
var VERTICAL_BREAKPOINT_WIDTH = 284;
|
|
8707
9155
|
var MIN_IMAGE_WIDTH = 400;
|
|
8708
|
-
var StyledBanner =
|
|
9156
|
+
var StyledBanner = import_styled_components33.default.div`
|
|
8709
9157
|
--wui-banner-padding: var(--wui-space-04);
|
|
8710
9158
|
--wui-banner-content-height: ${({ $contentHeight }) => $contentHeight}px;
|
|
8711
9159
|
|
|
@@ -8865,9 +9313,9 @@ Banner.displayName = "Banner_UI";
|
|
|
8865
9313
|
|
|
8866
9314
|
// src/components/Breadcrumbs/Breadcrumbs.tsx
|
|
8867
9315
|
var import_react32 = require("react");
|
|
8868
|
-
var
|
|
9316
|
+
var import_styled_components34 = __toESM(require("styled-components"));
|
|
8869
9317
|
var import_jsx_runtime210 = require("react/jsx-runtime");
|
|
8870
|
-
var StyledBreadcrumbs =
|
|
9318
|
+
var StyledBreadcrumbs = import_styled_components34.default.nav`
|
|
8871
9319
|
display: flex;
|
|
8872
9320
|
align-items: center;
|
|
8873
9321
|
gap: var(--wui-space-01);
|
|
@@ -8912,9 +9360,9 @@ var Breadcrumbs = ({ children, ...props }) => {
|
|
|
8912
9360
|
Breadcrumbs.displayName = "Breadcrumbs_UI";
|
|
8913
9361
|
|
|
8914
9362
|
// src/components/Breadcrumbs/Breadcrumb.tsx
|
|
8915
|
-
var
|
|
9363
|
+
var import_styled_components35 = __toESM(require("styled-components"));
|
|
8916
9364
|
var import_jsx_runtime211 = require("react/jsx-runtime");
|
|
8917
|
-
var BreadcrumbContent =
|
|
9365
|
+
var BreadcrumbContent = import_styled_components35.default.span`
|
|
8918
9366
|
overflow: hidden;
|
|
8919
9367
|
white-space: nowrap;
|
|
8920
9368
|
display: block;
|
|
@@ -8946,9 +9394,9 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
|
|
|
8946
9394
|
};
|
|
8947
9395
|
|
|
8948
9396
|
// src/components/Card/Card.tsx
|
|
8949
|
-
var
|
|
9397
|
+
var import_styled_components36 = __toESM(require("styled-components"));
|
|
8950
9398
|
var import_jsx_runtime212 = require("react/jsx-runtime");
|
|
8951
|
-
var StyledCard = (0,
|
|
9399
|
+
var StyledCard = (0, import_styled_components36.default)(Box)`
|
|
8952
9400
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8953
9401
|
box-sizing: border-box;
|
|
8954
9402
|
padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
|
|
@@ -9006,9 +9454,9 @@ Card.displayName = "Card_UI";
|
|
|
9006
9454
|
|
|
9007
9455
|
// src/components/Center/Center.tsx
|
|
9008
9456
|
var import_react33 = require("react");
|
|
9009
|
-
var
|
|
9457
|
+
var import_styled_components37 = __toESM(require("styled-components"));
|
|
9010
9458
|
var import_jsx_runtime213 = require("react/jsx-runtime");
|
|
9011
|
-
var StyledCenter =
|
|
9459
|
+
var StyledCenter = import_styled_components37.default.div`
|
|
9012
9460
|
box-sizing: border-box;
|
|
9013
9461
|
margin-left: auto;
|
|
9014
9462
|
margin-right: auto;
|
|
@@ -9038,18 +9486,18 @@ Center.displayName = "Center_UI";
|
|
|
9038
9486
|
// src/components/Checkbox/Checkbox.tsx
|
|
9039
9487
|
var import_type_guards31 = require("@wistia/type-guards");
|
|
9040
9488
|
var import_react38 = require("react");
|
|
9041
|
-
var
|
|
9489
|
+
var import_styled_components44 = __toESM(require("styled-components"));
|
|
9042
9490
|
|
|
9043
9491
|
// src/private/components/FormControlLabel/FormControlLabel.tsx
|
|
9044
9492
|
var import_type_guards27 = require("@wistia/type-guards");
|
|
9045
|
-
var
|
|
9493
|
+
var import_styled_components40 = __toESM(require("styled-components"));
|
|
9046
9494
|
|
|
9047
9495
|
// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
|
|
9048
|
-
var
|
|
9496
|
+
var import_styled_components38 = __toESM(require("styled-components"));
|
|
9049
9497
|
var import_type_guards25 = require("@wistia/type-guards");
|
|
9050
9498
|
var import_jsx_runtime214 = require("react/jsx-runtime");
|
|
9051
|
-
var VisuallyHidden =
|
|
9052
|
-
var VisuallyHiddenButFocusable =
|
|
9499
|
+
var VisuallyHidden = import_styled_components38.default.div({ ...visuallyHiddenStyle });
|
|
9500
|
+
var VisuallyHiddenButFocusable = import_styled_components38.default.div({
|
|
9053
9501
|
"&:not(:focus-within)": visuallyHiddenStyle
|
|
9054
9502
|
});
|
|
9055
9503
|
var ScreenReaderOnly = ({
|
|
@@ -9067,13 +9515,13 @@ var ScreenReaderOnly = ({
|
|
|
9067
9515
|
ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
|
|
9068
9516
|
|
|
9069
9517
|
// src/private/components/FormControlLabel/FormControlLabelDescription.tsx
|
|
9070
|
-
var
|
|
9518
|
+
var import_styled_components39 = __toESM(require("styled-components"));
|
|
9071
9519
|
var import_type_guards26 = require("@wistia/type-guards");
|
|
9072
9520
|
var import_jsx_runtime215 = require("react/jsx-runtime");
|
|
9073
|
-
var disabledStyle =
|
|
9521
|
+
var disabledStyle = import_styled_components39.css`
|
|
9074
9522
|
color: var(--wui-color-text-disabled);
|
|
9075
9523
|
`;
|
|
9076
|
-
var StyledFormControlLabelDescription =
|
|
9524
|
+
var StyledFormControlLabelDescription = import_styled_components39.default.div`
|
|
9077
9525
|
color: var(--wui-color-text-secondary);
|
|
9078
9526
|
display: block;
|
|
9079
9527
|
font-size: var(--wui-typography-body-4-size);
|
|
@@ -9103,15 +9551,15 @@ FormControlLabelDescription.displayName = "FormControlLabelDescription";
|
|
|
9103
9551
|
|
|
9104
9552
|
// src/private/components/FormControlLabel/FormControlLabel.tsx
|
|
9105
9553
|
var import_jsx_runtime216 = require("react/jsx-runtime");
|
|
9106
|
-
var disabledStyle2 =
|
|
9554
|
+
var disabledStyle2 = import_styled_components40.css`
|
|
9107
9555
|
cursor: not-allowed;
|
|
9108
9556
|
color: var(--wui-color-text-disabled);
|
|
9109
9557
|
`;
|
|
9110
|
-
var StyledLabelWrapper =
|
|
9558
|
+
var StyledLabelWrapper = import_styled_components40.default.div`
|
|
9111
9559
|
display: flex;
|
|
9112
9560
|
flex-direction: column;
|
|
9113
9561
|
`;
|
|
9114
|
-
var StyledFormControlLabel =
|
|
9562
|
+
var StyledFormControlLabel = import_styled_components40.default.label`
|
|
9115
9563
|
cursor: pointer;
|
|
9116
9564
|
display: flex;
|
|
9117
9565
|
align-items: flex-start;
|
|
@@ -9164,16 +9612,16 @@ var import_react37 = require("react");
|
|
|
9164
9612
|
var import_type_guards30 = require("@wistia/type-guards");
|
|
9165
9613
|
|
|
9166
9614
|
// src/components/FormGroup/FormGroup.tsx
|
|
9167
|
-
var
|
|
9615
|
+
var import_styled_components42 = __toESM(require("styled-components"));
|
|
9168
9616
|
var import_react35 = require("react");
|
|
9169
9617
|
var import_type_guards28 = require("@wistia/type-guards");
|
|
9170
9618
|
|
|
9171
9619
|
// src/components/Stack/Stack.tsx
|
|
9172
9620
|
var import_react34 = require("react");
|
|
9173
|
-
var
|
|
9621
|
+
var import_styled_components41 = __toESM(require("styled-components"));
|
|
9174
9622
|
var import_jsx_runtime217 = require("react/jsx-runtime");
|
|
9175
9623
|
var DEFAULT_ELEMENT4 = "div";
|
|
9176
|
-
var StyledStack =
|
|
9624
|
+
var StyledStack = import_styled_components41.default.div`
|
|
9177
9625
|
display: flex;
|
|
9178
9626
|
flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
|
|
9179
9627
|
gap: ${({ $gap }) => `var(--wui-${$gap})`};
|
|
@@ -9202,12 +9650,12 @@ var Stack = makePolymorphic(StackComponent);
|
|
|
9202
9650
|
|
|
9203
9651
|
// src/components/FormGroup/FormGroup.tsx
|
|
9204
9652
|
var import_jsx_runtime218 = require("react/jsx-runtime");
|
|
9205
|
-
var StyledFieldset =
|
|
9653
|
+
var StyledFieldset = import_styled_components42.default.fieldset`
|
|
9206
9654
|
padding: 0;
|
|
9207
9655
|
margin: 0;
|
|
9208
9656
|
border: 0;
|
|
9209
9657
|
`;
|
|
9210
|
-
var StyledLegend =
|
|
9658
|
+
var StyledLegend = import_styled_components42.default.legend`
|
|
9211
9659
|
padding-inline: 0;
|
|
9212
9660
|
display: flex;
|
|
9213
9661
|
flex-direction: column;
|
|
@@ -9259,7 +9707,7 @@ FormGroup.displayName = "FormGroup_UI";
|
|
|
9259
9707
|
|
|
9260
9708
|
// src/components/Form/Form.tsx
|
|
9261
9709
|
var import_react36 = require("react");
|
|
9262
|
-
var
|
|
9710
|
+
var import_styled_components43 = __toESM(require("styled-components"));
|
|
9263
9711
|
var import_type_guards29 = require("@wistia/type-guards");
|
|
9264
9712
|
|
|
9265
9713
|
// src/components/Form/serializeFormData.tsx
|
|
@@ -9279,7 +9727,7 @@ var serializeFormData = (formData) => {
|
|
|
9279
9727
|
|
|
9280
9728
|
// src/components/Form/Form.tsx
|
|
9281
9729
|
var import_jsx_runtime219 = require("react/jsx-runtime");
|
|
9282
|
-
var StyledForm =
|
|
9730
|
+
var StyledForm = import_styled_components43.default.form`
|
|
9283
9731
|
--form-default-width: 690px;
|
|
9284
9732
|
|
|
9285
9733
|
max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
|
|
@@ -9423,15 +9871,15 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
|
|
|
9423
9871
|
)
|
|
9424
9872
|
}
|
|
9425
9873
|
);
|
|
9426
|
-
var sizeSmall =
|
|
9874
|
+
var sizeSmall = import_styled_components44.css`
|
|
9427
9875
|
--wui-checkbox-size: 14px;
|
|
9428
9876
|
--wui-checkbox-icon-size: 7px;
|
|
9429
9877
|
`;
|
|
9430
|
-
var sizeMedium =
|
|
9878
|
+
var sizeMedium = import_styled_components44.css`
|
|
9431
9879
|
--wui-checkbox-size: 16px;
|
|
9432
9880
|
--wui-checkbox-icon-size: 9px;
|
|
9433
9881
|
`;
|
|
9434
|
-
var sizeLarge =
|
|
9882
|
+
var sizeLarge = import_styled_components44.css`
|
|
9435
9883
|
--wui-checkbox-size: 20px;
|
|
9436
9884
|
--wui-checkbox-icon-size: 11px;
|
|
9437
9885
|
`;
|
|
@@ -9440,7 +9888,7 @@ var getSizeCss = (size) => {
|
|
|
9440
9888
|
if (size === "lg") return sizeLarge;
|
|
9441
9889
|
return sizeMedium;
|
|
9442
9890
|
};
|
|
9443
|
-
var StyledCheckboxWrapper =
|
|
9891
|
+
var StyledCheckboxWrapper = import_styled_components44.default.div`
|
|
9444
9892
|
--wui-checkbox-background-color: var(--wui-color-bg-surface);
|
|
9445
9893
|
--wui-checkbox-border-color: var(--wui-color-border-secondary);
|
|
9446
9894
|
--wui-checkbox-icon-color: transparent;
|
|
@@ -9477,7 +9925,7 @@ var StyledCheckboxWrapper = import_styled_components43.default.div`
|
|
|
9477
9925
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
9478
9926
|
user-select: none;
|
|
9479
9927
|
`;
|
|
9480
|
-
var StyledCheckboxInput =
|
|
9928
|
+
var StyledCheckboxInput = import_styled_components44.default.div`
|
|
9481
9929
|
${({ $size }) => getSizeCss($size)}
|
|
9482
9930
|
margin: 0;
|
|
9483
9931
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -9504,7 +9952,7 @@ var StyledCheckboxInput = import_styled_components43.default.div`
|
|
|
9504
9952
|
height: var(--wui-checkbox-icon-size);
|
|
9505
9953
|
}
|
|
9506
9954
|
`;
|
|
9507
|
-
var StyledHiddenCheckboxInput =
|
|
9955
|
+
var StyledHiddenCheckboxInput = import_styled_components44.default.input`
|
|
9508
9956
|
${visuallyHiddenStyle}
|
|
9509
9957
|
position: relative;
|
|
9510
9958
|
`;
|
|
@@ -9625,9 +10073,9 @@ ClickRegion.displayName = "ClickRegion_UI";
|
|
|
9625
10073
|
// src/components/Collapsible/Collapsible.tsx
|
|
9626
10074
|
var import_react_collapsible = require("@radix-ui/react-collapsible");
|
|
9627
10075
|
var import_type_guards32 = require("@wistia/type-guards");
|
|
9628
|
-
var
|
|
10076
|
+
var import_styled_components45 = __toESM(require("styled-components"));
|
|
9629
10077
|
var import_jsx_runtime222 = require("react/jsx-runtime");
|
|
9630
|
-
var StyledRoot = (0,
|
|
10078
|
+
var StyledRoot = (0, import_styled_components45.default)(import_react_collapsible.Root)`
|
|
9631
10079
|
&[data-state='closed'] [data-wui-collapsible-content] {
|
|
9632
10080
|
display: -webkit-box;
|
|
9633
10081
|
-webkit-box-orient: vertical;
|
|
@@ -9650,9 +10098,9 @@ Collapsible.displayName = "Collapsible_UI";
|
|
|
9650
10098
|
// src/components/Collapsible/CollapsibleTrigger.tsx
|
|
9651
10099
|
var import_react40 = require("react");
|
|
9652
10100
|
var import_react_collapsible2 = require("@radix-ui/react-collapsible");
|
|
9653
|
-
var
|
|
10101
|
+
var import_styled_components46 = __toESM(require("styled-components"));
|
|
9654
10102
|
var import_jsx_runtime223 = require("react/jsx-runtime");
|
|
9655
|
-
var StyledTrigger = (0,
|
|
10103
|
+
var StyledTrigger = (0, import_styled_components46.default)(import_react_collapsible2.Trigger)`
|
|
9656
10104
|
[data-wui-collapsible-icon] {
|
|
9657
10105
|
transition: transform var(--wui-motion-duration-03) ease-in-out;
|
|
9658
10106
|
}
|
|
@@ -9701,11 +10149,11 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
|
|
|
9701
10149
|
CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
|
|
9702
10150
|
|
|
9703
10151
|
// src/components/Collapsible/CollapsibleContent.tsx
|
|
9704
|
-
var
|
|
10152
|
+
var import_styled_components47 = __toESM(require("styled-components"));
|
|
9705
10153
|
var import_react_collapsible3 = require("@radix-ui/react-collapsible");
|
|
9706
10154
|
var import_type_guards33 = require("@wistia/type-guards");
|
|
9707
10155
|
var import_jsx_runtime225 = require("react/jsx-runtime");
|
|
9708
|
-
var ClampedContent =
|
|
10156
|
+
var ClampedContent = import_styled_components47.default.div`
|
|
9709
10157
|
--wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
|
|
9710
10158
|
`;
|
|
9711
10159
|
var CollapsibleContent = ({ clamp, children }) => {
|
|
@@ -9727,7 +10175,7 @@ var CollapsibleContent = ({ clamp, children }) => {
|
|
|
9727
10175
|
|
|
9728
10176
|
// src/components/ColorPicker/ColorGrid.tsx
|
|
9729
10177
|
var import_react42 = require("react");
|
|
9730
|
-
var
|
|
10178
|
+
var import_styled_components49 = __toESM(require("styled-components"));
|
|
9731
10179
|
var import_react_radio_group = require("@radix-ui/react-radio-group");
|
|
9732
10180
|
|
|
9733
10181
|
// src/components/ColorPicker/ColorPickerContext.tsx
|
|
@@ -10271,9 +10719,9 @@ var useColorPickerState = () => {
|
|
|
10271
10719
|
};
|
|
10272
10720
|
|
|
10273
10721
|
// src/components/Label/Label.tsx
|
|
10274
|
-
var
|
|
10722
|
+
var import_styled_components48 = __toESM(require("styled-components"));
|
|
10275
10723
|
var import_jsx_runtime227 = require("react/jsx-runtime");
|
|
10276
|
-
var requiredStyle =
|
|
10724
|
+
var requiredStyle = import_styled_components48.css`
|
|
10277
10725
|
&::after {
|
|
10278
10726
|
color: var(--wui-color-text-error);
|
|
10279
10727
|
display: inline;
|
|
@@ -10281,10 +10729,10 @@ var requiredStyle = import_styled_components47.css`
|
|
|
10281
10729
|
content: '*';
|
|
10282
10730
|
}
|
|
10283
10731
|
`;
|
|
10284
|
-
var disabledStyle3 =
|
|
10732
|
+
var disabledStyle3 = import_styled_components48.css`
|
|
10285
10733
|
color: var(--wui-color-text-disabled);
|
|
10286
10734
|
`;
|
|
10287
|
-
var StyledLabel2 =
|
|
10735
|
+
var StyledLabel2 = import_styled_components48.default.label`
|
|
10288
10736
|
display: block;
|
|
10289
10737
|
width: 100%;
|
|
10290
10738
|
color: var(--wui-color-text);
|
|
@@ -10332,15 +10780,15 @@ Label.displayName = "Label_UI";
|
|
|
10332
10780
|
|
|
10333
10781
|
// src/components/ColorPicker/ColorGrid.tsx
|
|
10334
10782
|
var import_jsx_runtime228 = require("react/jsx-runtime");
|
|
10335
|
-
var Container =
|
|
10783
|
+
var Container = import_styled_components49.default.div`
|
|
10336
10784
|
display: grid;
|
|
10337
10785
|
gap: var(--wui-space-01);
|
|
10338
10786
|
grid-template-columns: minmax(0, 1fr);
|
|
10339
10787
|
`;
|
|
10340
|
-
var LabelContainer =
|
|
10788
|
+
var LabelContainer = import_styled_components49.default.div`
|
|
10341
10789
|
padding-top: var(--wui-space-01);
|
|
10342
10790
|
`;
|
|
10343
|
-
var ItemsContainer = (0,
|
|
10791
|
+
var ItemsContainer = (0, import_styled_components49.default)(import_react_radio_group.Root)`
|
|
10344
10792
|
display: flex;
|
|
10345
10793
|
flex-wrap: wrap;
|
|
10346
10794
|
align-items: center;
|
|
@@ -10372,14 +10820,14 @@ var ColorGrid = ({ children, label }) => {
|
|
|
10372
10820
|
ColorGrid.displayName = "ColorGrid_UI";
|
|
10373
10821
|
|
|
10374
10822
|
// src/components/ColorPicker/ColorGridOption.tsx
|
|
10375
|
-
var
|
|
10823
|
+
var import_styled_components52 = __toESM(require("styled-components"));
|
|
10376
10824
|
var import_react_radio_group2 = require("@radix-ui/react-radio-group");
|
|
10377
10825
|
var import_fn5 = require("culori/fn");
|
|
10378
10826
|
|
|
10379
10827
|
// src/components/ColorPicker/ColorSwatch.tsx
|
|
10380
|
-
var
|
|
10828
|
+
var import_styled_components50 = __toESM(require("styled-components"));
|
|
10381
10829
|
var import_jsx_runtime229 = require("react/jsx-runtime");
|
|
10382
|
-
var ColorSwatchDiv =
|
|
10830
|
+
var ColorSwatchDiv = import_styled_components50.default.div`
|
|
10383
10831
|
aspect-ratio: 1;
|
|
10384
10832
|
width: ${({ $diameterPx }) => `${$diameterPx}px`};
|
|
10385
10833
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -10398,7 +10846,7 @@ var ColorSwatchDiv = import_styled_components49.default.div`
|
|
|
10398
10846
|
outline-offset: 2px;
|
|
10399
10847
|
transform: ${({ $selected }) => $selected ? "scale(0.9)" : "scale(1)"};
|
|
10400
10848
|
`;
|
|
10401
|
-
var DerivativeHalfCircle =
|
|
10849
|
+
var DerivativeHalfCircle = import_styled_components50.default.div`
|
|
10402
10850
|
position: absolute;
|
|
10403
10851
|
right: 0;
|
|
10404
10852
|
top: 0;
|
|
@@ -10435,9 +10883,9 @@ var ColorSwatch = ({
|
|
|
10435
10883
|
|
|
10436
10884
|
// src/components/Tooltip/Tooltip.tsx
|
|
10437
10885
|
var import_react_tooltip2 = require("@radix-ui/react-tooltip");
|
|
10438
|
-
var
|
|
10886
|
+
var import_styled_components51 = __toESM(require("styled-components"));
|
|
10439
10887
|
var import_jsx_runtime230 = require("react/jsx-runtime");
|
|
10440
|
-
var hide =
|
|
10888
|
+
var hide = import_styled_components51.keyframes`
|
|
10441
10889
|
from {
|
|
10442
10890
|
opacity: 1;
|
|
10443
10891
|
}
|
|
@@ -10445,7 +10893,7 @@ var hide = import_styled_components50.keyframes`
|
|
|
10445
10893
|
opacity: 0;
|
|
10446
10894
|
}
|
|
10447
10895
|
`;
|
|
10448
|
-
var slideDownAndFade =
|
|
10896
|
+
var slideDownAndFade = import_styled_components51.keyframes`
|
|
10449
10897
|
from {
|
|
10450
10898
|
opacity: 0;
|
|
10451
10899
|
transform: translateY(-6px);
|
|
@@ -10455,7 +10903,7 @@ var slideDownAndFade = import_styled_components50.keyframes`
|
|
|
10455
10903
|
transform: translateY(0);
|
|
10456
10904
|
}
|
|
10457
10905
|
`;
|
|
10458
|
-
var slideLeftAndFade =
|
|
10906
|
+
var slideLeftAndFade = import_styled_components51.keyframes`
|
|
10459
10907
|
from {
|
|
10460
10908
|
opacity: 0;
|
|
10461
10909
|
transform: translateX(6px);
|
|
@@ -10465,7 +10913,7 @@ var slideLeftAndFade = import_styled_components50.keyframes`
|
|
|
10465
10913
|
transform: translateX(0);
|
|
10466
10914
|
}
|
|
10467
10915
|
`;
|
|
10468
|
-
var slideUpAndFade =
|
|
10916
|
+
var slideUpAndFade = import_styled_components51.keyframes`
|
|
10469
10917
|
from {
|
|
10470
10918
|
opacity: 0;
|
|
10471
10919
|
transform: translateY(6px);
|
|
@@ -10475,7 +10923,7 @@ var slideUpAndFade = import_styled_components50.keyframes`
|
|
|
10475
10923
|
transform: translateY(0);
|
|
10476
10924
|
}
|
|
10477
10925
|
`;
|
|
10478
|
-
var slideRightAndFade =
|
|
10926
|
+
var slideRightAndFade = import_styled_components51.keyframes`
|
|
10479
10927
|
from {
|
|
10480
10928
|
opacity: 0;
|
|
10481
10929
|
transform: translateX(-6px);
|
|
@@ -10485,7 +10933,7 @@ var slideRightAndFade = import_styled_components50.keyframes`
|
|
|
10485
10933
|
transform: translateX(0);
|
|
10486
10934
|
}
|
|
10487
10935
|
`;
|
|
10488
|
-
var StyledContent = (0,
|
|
10936
|
+
var StyledContent = (0, import_styled_components51.default)(import_react_tooltip2.Content)`
|
|
10489
10937
|
--tooltip-font-family: var(--wui-typography-family-default);
|
|
10490
10938
|
--tooltip-border-radius: var(--wui-border-radius-05);
|
|
10491
10939
|
--tooltip-bg: var(--wui-color-bg-tooltip);
|
|
@@ -10585,7 +11033,7 @@ Tooltip.displayName = "Tooltip_UI";
|
|
|
10585
11033
|
|
|
10586
11034
|
// src/components/ColorPicker/ColorGridOption.tsx
|
|
10587
11035
|
var import_jsx_runtime231 = require("react/jsx-runtime");
|
|
10588
|
-
var Container2 = (0,
|
|
11036
|
+
var Container2 = (0, import_styled_components52.default)(import_react_radio_group2.Item)`
|
|
10589
11037
|
border: none;
|
|
10590
11038
|
appearance: none;
|
|
10591
11039
|
outline: none;
|
|
@@ -10630,10 +11078,10 @@ ColorGridOption.displayName = "ColorGridOption_UI";
|
|
|
10630
11078
|
|
|
10631
11079
|
// src/components/ColorPicker/ColorList.tsx
|
|
10632
11080
|
var import_react43 = require("react");
|
|
10633
|
-
var
|
|
11081
|
+
var import_styled_components53 = __toESM(require("styled-components"));
|
|
10634
11082
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
10635
11083
|
var import_jsx_runtime232 = require("react/jsx-runtime");
|
|
10636
|
-
var Container3 = (0,
|
|
11084
|
+
var Container3 = (0, import_styled_components53.default)(import_react_toggle_group.Root)`
|
|
10637
11085
|
display: grid;
|
|
10638
11086
|
grid-template-columns: minmax(0, 1fr);
|
|
10639
11087
|
`;
|
|
@@ -10662,18 +11110,18 @@ var ColorList = ({ children }) => {
|
|
|
10662
11110
|
ColorList.displayName = "ColorList_UI";
|
|
10663
11111
|
|
|
10664
11112
|
// src/components/ColorPicker/ColorListGroup.tsx
|
|
10665
|
-
var
|
|
11113
|
+
var import_styled_components54 = __toESM(require("styled-components"));
|
|
10666
11114
|
var import_jsx_runtime233 = require("react/jsx-runtime");
|
|
10667
|
-
var Container4 =
|
|
11115
|
+
var Container4 = import_styled_components54.default.div`
|
|
10668
11116
|
display: grid;
|
|
10669
11117
|
gap: var(--wui-space-01);
|
|
10670
11118
|
grid-template-columns: minmax(0, 1fr);
|
|
10671
11119
|
`;
|
|
10672
|
-
var ItemsContainer2 =
|
|
11120
|
+
var ItemsContainer2 = import_styled_components54.default.div`
|
|
10673
11121
|
display: flex;
|
|
10674
11122
|
flex-direction: column;
|
|
10675
11123
|
`;
|
|
10676
|
-
var LabelContainer2 =
|
|
11124
|
+
var LabelContainer2 = import_styled_components54.default.div`
|
|
10677
11125
|
padding-top: var(--wui-space-01);
|
|
10678
11126
|
`;
|
|
10679
11127
|
var ColorListGroup = ({ label, children }) => {
|
|
@@ -10692,7 +11140,7 @@ var ColorListGroup = ({ label, children }) => {
|
|
|
10692
11140
|
ColorListGroup.displayName = "ColorListGroup_UI";
|
|
10693
11141
|
|
|
10694
11142
|
// src/components/ColorPicker/ColorListOption.tsx
|
|
10695
|
-
var
|
|
11143
|
+
var import_styled_components55 = __toESM(require("styled-components"));
|
|
10696
11144
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
10697
11145
|
var import_fn6 = require("culori/fn");
|
|
10698
11146
|
|
|
@@ -10731,7 +11179,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
|
|
|
10731
11179
|
|
|
10732
11180
|
// src/components/ColorPicker/ColorListOption.tsx
|
|
10733
11181
|
var import_jsx_runtime235 = require("react/jsx-runtime");
|
|
10734
|
-
var Container5 = (0,
|
|
11182
|
+
var Container5 = (0, import_styled_components55.default)(import_react_toggle_group2.Item)`
|
|
10735
11183
|
border: none;
|
|
10736
11184
|
appearance: none;
|
|
10737
11185
|
outline: none;
|
|
@@ -10816,9 +11264,9 @@ ColorPicker.displayName = "ColorPicker_UI";
|
|
|
10816
11264
|
|
|
10817
11265
|
// src/components/ColorPicker/ColorPickerPopoverContent.tsx
|
|
10818
11266
|
var import_react_popover2 = require("@radix-ui/react-popover");
|
|
10819
|
-
var
|
|
11267
|
+
var import_styled_components56 = __toESM(require("styled-components"));
|
|
10820
11268
|
var import_jsx_runtime237 = require("react/jsx-runtime");
|
|
10821
|
-
var StyledPopoverContent = (0,
|
|
11269
|
+
var StyledPopoverContent = (0, import_styled_components56.default)(import_react_popover2.Content)`
|
|
10822
11270
|
background-color: var(--wui-color-bg-surface);
|
|
10823
11271
|
border-radius: var(--wui-border-radius-02);
|
|
10824
11272
|
border: 1px solid var(--wui-color-border);
|
|
@@ -10845,9 +11293,9 @@ var ColorPickerPopoverContent = ({
|
|
|
10845
11293
|
ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
|
|
10846
11294
|
|
|
10847
11295
|
// src/components/ColorPicker/ColorPickerSection.tsx
|
|
10848
|
-
var
|
|
11296
|
+
var import_styled_components57 = __toESM(require("styled-components"));
|
|
10849
11297
|
var import_jsx_runtime238 = require("react/jsx-runtime");
|
|
10850
|
-
var Container6 =
|
|
11298
|
+
var Container6 = import_styled_components57.default.div`
|
|
10851
11299
|
padding: var(--wui-space-02);
|
|
10852
11300
|
`;
|
|
10853
11301
|
var ColorPickerSection = ({ children }) => {
|
|
@@ -10858,7 +11306,7 @@ ColorPickerSection.displayName = "ColorPickerSection_UI";
|
|
|
10858
11306
|
// src/components/ColorPicker/ColorPickerTrigger.tsx
|
|
10859
11307
|
var import_react44 = require("react");
|
|
10860
11308
|
var import_react_popover3 = require("@radix-ui/react-popover");
|
|
10861
|
-
var
|
|
11309
|
+
var import_styled_components58 = __toESM(require("styled-components"));
|
|
10862
11310
|
|
|
10863
11311
|
// src/components/ColorPicker/ValueSwatch.tsx
|
|
10864
11312
|
var import_jsx_runtime239 = require("react/jsx-runtime");
|
|
@@ -10878,7 +11326,7 @@ ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
|
|
|
10878
11326
|
|
|
10879
11327
|
// src/components/ColorPicker/ColorPickerTrigger.tsx
|
|
10880
11328
|
var import_jsx_runtime241 = require("react/jsx-runtime");
|
|
10881
|
-
var StyledPopoverTrigger = (0,
|
|
11329
|
+
var StyledPopoverTrigger = (0, import_styled_components58.default)(import_react_popover3.Trigger)`
|
|
10882
11330
|
background-color: var(--wui-color-bg-surface);
|
|
10883
11331
|
border-radius: var(--wui-border-radius-rounded);
|
|
10884
11332
|
border: 1px solid var(--wui-color-border);
|
|
@@ -10889,7 +11337,7 @@ var StyledPopoverTrigger = (0, import_styled_components57.default)(import_react_
|
|
|
10889
11337
|
background-color: var(--wui-color-bg-surface-hover);
|
|
10890
11338
|
}
|
|
10891
11339
|
`;
|
|
10892
|
-
var DefaultTriggerContentContainer =
|
|
11340
|
+
var DefaultTriggerContentContainer = import_styled_components58.default.div`
|
|
10893
11341
|
align-items: center;
|
|
10894
11342
|
display: flex;
|
|
10895
11343
|
flex-direction: row;
|
|
@@ -10917,9 +11365,9 @@ var ColorPickerTrigger = (0, import_react44.forwardRef)(
|
|
|
10917
11365
|
ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
|
|
10918
11366
|
|
|
10919
11367
|
// src/components/ColorPicker/ContrastIndicator.tsx
|
|
10920
|
-
var
|
|
11368
|
+
var import_styled_components59 = __toESM(require("styled-components"));
|
|
10921
11369
|
var import_jsx_runtime242 = require("react/jsx-runtime");
|
|
10922
|
-
var Container7 =
|
|
11370
|
+
var Container7 = import_styled_components59.default.div`
|
|
10923
11371
|
display: flex;
|
|
10924
11372
|
flex-direction: row;
|
|
10925
11373
|
justify-content: end;
|
|
@@ -10977,7 +11425,7 @@ var import_react46 = require("react");
|
|
|
10977
11425
|
|
|
10978
11426
|
// src/components/Switch/Switch.tsx
|
|
10979
11427
|
var import_react45 = require("react");
|
|
10980
|
-
var
|
|
11428
|
+
var import_styled_components60 = __toESM(require("styled-components"));
|
|
10981
11429
|
var import_type_guards34 = require("@wistia/type-guards");
|
|
10982
11430
|
var import_jsx_runtime243 = require("react/jsx-runtime");
|
|
10983
11431
|
var switchHeightMap = {
|
|
@@ -10985,10 +11433,10 @@ var switchHeightMap = {
|
|
|
10985
11433
|
md: 20,
|
|
10986
11434
|
lg: 24
|
|
10987
11435
|
};
|
|
10988
|
-
var getSizeCss2 = (size) =>
|
|
11436
|
+
var getSizeCss2 = (size) => import_styled_components60.css`
|
|
10989
11437
|
--wui-switch-height: ${switchHeightMap[size]}px;
|
|
10990
11438
|
`;
|
|
10991
|
-
var StyledSwitchWrapper =
|
|
11439
|
+
var StyledSwitchWrapper = import_styled_components60.default.div`
|
|
10992
11440
|
${({ $size }) => getSizeCss2($size)}
|
|
10993
11441
|
--wui-switch-border-offset: 2px;
|
|
10994
11442
|
--wui-switch-background-color: var(--wui-color-bg-surface-tertiary);
|
|
@@ -11022,7 +11470,7 @@ var StyledSwitchWrapper = import_styled_components59.default.div`
|
|
|
11022
11470
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
11023
11471
|
user-select: none;
|
|
11024
11472
|
`;
|
|
11025
|
-
var StyledSwitchTrack =
|
|
11473
|
+
var StyledSwitchTrack = import_styled_components60.default.div`
|
|
11026
11474
|
width: var(--wui-switch-width);
|
|
11027
11475
|
height: var(--wui-switch-height);
|
|
11028
11476
|
min-width: var(--wui-switch-width);
|
|
@@ -11040,7 +11488,7 @@ var StyledSwitchTrack = import_styled_components59.default.div`
|
|
|
11040
11488
|
background-color: var(--wui-switch-background-color);
|
|
11041
11489
|
margin-top: calc(calc(1lh - var(--wui-switch-height)) / 2);
|
|
11042
11490
|
`;
|
|
11043
|
-
var StyledSwitchThumb =
|
|
11491
|
+
var StyledSwitchThumb = import_styled_components60.default.div`
|
|
11044
11492
|
border-radius: var(--wui-border-radius-rounded);
|
|
11045
11493
|
background-color: var(--wui-switch-thumb-color);
|
|
11046
11494
|
transition:
|
|
@@ -11050,7 +11498,7 @@ var StyledSwitchThumb = import_styled_components59.default.div`
|
|
|
11050
11498
|
height: var(--wui-switch-thumb-size);
|
|
11051
11499
|
margin-left: var(--wui-switch-thumb-position);
|
|
11052
11500
|
`;
|
|
11053
|
-
var StyledHiddenSwitchInput =
|
|
11501
|
+
var StyledHiddenSwitchInput = import_styled_components60.default.input`
|
|
11054
11502
|
${visuallyHiddenStyle}
|
|
11055
11503
|
`;
|
|
11056
11504
|
var Switch = (0, import_react45.forwardRef)(
|
|
@@ -11188,12 +11636,12 @@ var import_fn7 = require("culori/fn");
|
|
|
11188
11636
|
|
|
11189
11637
|
// src/components/Input/Input.tsx
|
|
11190
11638
|
var import_react47 = require("react");
|
|
11191
|
-
var
|
|
11639
|
+
var import_styled_components62 = __toESM(require("styled-components"));
|
|
11192
11640
|
var import_type_guards35 = require("@wistia/type-guards");
|
|
11193
11641
|
|
|
11194
11642
|
// src/css/inputCss.ts
|
|
11195
|
-
var
|
|
11196
|
-
var inputCss =
|
|
11643
|
+
var import_styled_components61 = require("styled-components");
|
|
11644
|
+
var inputCss = import_styled_components61.css`
|
|
11197
11645
|
/* Colors */
|
|
11198
11646
|
--wui-input-color-bg: var(--wui-color-bg-surface);
|
|
11199
11647
|
--wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
@@ -11220,7 +11668,7 @@ var inputCss = import_styled_components60.css`
|
|
|
11220
11668
|
|
|
11221
11669
|
// src/components/Input/Input.tsx
|
|
11222
11670
|
var import_jsx_runtime247 = require("react/jsx-runtime");
|
|
11223
|
-
var inputStyles =
|
|
11671
|
+
var inputStyles = import_styled_components62.css`
|
|
11224
11672
|
${inputCss}
|
|
11225
11673
|
input,
|
|
11226
11674
|
textarea {
|
|
@@ -11260,7 +11708,7 @@ var inputStyles = import_styled_components61.css`
|
|
|
11260
11708
|
}
|
|
11261
11709
|
}
|
|
11262
11710
|
`;
|
|
11263
|
-
var StyledInputContainer =
|
|
11711
|
+
var StyledInputContainer = import_styled_components62.default.div`
|
|
11264
11712
|
display: inline-flex;
|
|
11265
11713
|
position: relative;
|
|
11266
11714
|
${inputStyles};
|
|
@@ -11343,14 +11791,14 @@ var Input = (0, import_react47.forwardRef)(
|
|
|
11343
11791
|
if ((0, import_type_guards35.isNil)(leftIcon) && type === "search") {
|
|
11344
11792
|
leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Icon, { type: "search" });
|
|
11345
11793
|
}
|
|
11346
|
-
if ((0, import_type_guards35.isNotNil)(leftIconToDisplay)) {
|
|
11794
|
+
if ((0, import_type_guards35.isNotNil)(leftIconToDisplay) && (0, import_react47.isValidElement)(leftIconToDisplay)) {
|
|
11347
11795
|
leftIconToDisplay = (0, import_react47.cloneElement)(leftIconToDisplay, {
|
|
11348
11796
|
size: "md",
|
|
11349
11797
|
className: "wui-input-left-icon"
|
|
11350
11798
|
});
|
|
11351
11799
|
}
|
|
11352
11800
|
let rightIconToDisplay = rightIcon;
|
|
11353
|
-
if ((0, import_type_guards35.isNotNil)(rightIconToDisplay)) {
|
|
11801
|
+
if ((0, import_type_guards35.isNotNil)(rightIconToDisplay) && (0, import_react47.isValidElement)(rightIconToDisplay)) {
|
|
11354
11802
|
rightIconToDisplay = (0, import_react47.cloneElement)(rightIconToDisplay, {
|
|
11355
11803
|
size: "md",
|
|
11356
11804
|
className: "wui-input-right-icon"
|
|
@@ -11564,15 +12012,15 @@ HexColorInput.displayName = "HexColorInput_UI";
|
|
|
11564
12012
|
// src/components/ColorPicker/HueSlider.tsx
|
|
11565
12013
|
var import_react50 = require("react");
|
|
11566
12014
|
var import_react_slider = require("@radix-ui/react-slider");
|
|
11567
|
-
var
|
|
12015
|
+
var import_styled_components64 = __toESM(require("styled-components"));
|
|
11568
12016
|
var import_fn9 = require("culori/fn");
|
|
11569
12017
|
|
|
11570
12018
|
// src/components/ColorPicker/HSVHueCanvas.tsx
|
|
11571
12019
|
var import_react49 = require("react");
|
|
11572
|
-
var
|
|
12020
|
+
var import_styled_components63 = __toESM(require("styled-components"));
|
|
11573
12021
|
var import_fn8 = require("culori/fn");
|
|
11574
12022
|
var import_jsx_runtime249 = require("react/jsx-runtime");
|
|
11575
|
-
var Canvas =
|
|
12023
|
+
var Canvas = import_styled_components63.default.canvas`
|
|
11576
12024
|
display: block;
|
|
11577
12025
|
height: 100%;
|
|
11578
12026
|
width: 100%;
|
|
@@ -11612,7 +12060,7 @@ var HSVHueCanvas = ({ hsv }) => {
|
|
|
11612
12060
|
// src/components/ColorPicker/HueSlider.tsx
|
|
11613
12061
|
var import_jsx_runtime250 = require("react/jsx-runtime");
|
|
11614
12062
|
var TWENTY_FOUR = 24;
|
|
11615
|
-
var Container8 =
|
|
12063
|
+
var Container8 = import_styled_components64.default.div`
|
|
11616
12064
|
border-radius: var(--wui-border-radius-rounded);
|
|
11617
12065
|
border: 1px solid var(--wui-color-border);
|
|
11618
12066
|
height: ${TWENTY_FOUR}px;
|
|
@@ -11620,7 +12068,7 @@ var Container8 = import_styled_components63.default.div`
|
|
|
11620
12068
|
padding: 0 var(--wui-space-03);
|
|
11621
12069
|
position: relative;
|
|
11622
12070
|
`;
|
|
11623
|
-
var Root = (0,
|
|
12071
|
+
var Root = (0, import_styled_components64.default)(import_react_slider.Root)`
|
|
11624
12072
|
align-items: center;
|
|
11625
12073
|
display: flex;
|
|
11626
12074
|
position: absolute;
|
|
@@ -11629,11 +12077,11 @@ var Root = (0, import_styled_components63.default)(import_react_slider.Root)`
|
|
|
11629
12077
|
width: calc(100% - var(--wui-space-05));
|
|
11630
12078
|
height: 16px;
|
|
11631
12079
|
`;
|
|
11632
|
-
var Track = (0,
|
|
12080
|
+
var Track = (0, import_styled_components64.default)(import_react_slider.Track)`
|
|
11633
12081
|
width: 100%;
|
|
11634
12082
|
`;
|
|
11635
|
-
var Thumb = (0,
|
|
11636
|
-
var ThumbInner =
|
|
12083
|
+
var Thumb = (0, import_styled_components64.default)(import_react_slider.Thumb)``;
|
|
12084
|
+
var ThumbInner = import_styled_components64.default.div`
|
|
11637
12085
|
cursor: pointer;
|
|
11638
12086
|
display: block;
|
|
11639
12087
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -11700,11 +12148,11 @@ HueSlider.displayName = "HueSlider_UI";
|
|
|
11700
12148
|
|
|
11701
12149
|
// src/components/ColorPicker/SaturationAndValuePicker.tsx
|
|
11702
12150
|
var import_react52 = require("react");
|
|
11703
|
-
var
|
|
12151
|
+
var import_styled_components66 = __toESM(require("styled-components"));
|
|
11704
12152
|
|
|
11705
12153
|
// src/components/ColorPicker/HSVSaturationValueCanvas.tsx
|
|
11706
12154
|
var import_react51 = require("react");
|
|
11707
|
-
var
|
|
12155
|
+
var import_styled_components65 = __toESM(require("styled-components"));
|
|
11708
12156
|
|
|
11709
12157
|
// src/components/ColorPicker/canvas-utils.ts
|
|
11710
12158
|
var drawSmoothCurve = (context, points) => {
|
|
@@ -11734,7 +12182,7 @@ var drawSmoothCurve = (context, points) => {
|
|
|
11734
12182
|
|
|
11735
12183
|
// src/components/ColorPicker/HSVSaturationValueCanvas.tsx
|
|
11736
12184
|
var import_jsx_runtime251 = require("react/jsx-runtime");
|
|
11737
|
-
var Canvas2 =
|
|
12185
|
+
var Canvas2 = import_styled_components65.default.canvas`
|
|
11738
12186
|
display: block;
|
|
11739
12187
|
width: 100%;
|
|
11740
12188
|
`;
|
|
@@ -11855,13 +12303,13 @@ var HSVSaturationValueCanvas = ({
|
|
|
11855
12303
|
var import_jsx_runtime252 = require("react/jsx-runtime");
|
|
11856
12304
|
var SATURATION_NUDGE = 0.02;
|
|
11857
12305
|
var VALUE_NUDGE = 0.02;
|
|
11858
|
-
var Container9 =
|
|
12306
|
+
var Container9 = import_styled_components66.default.div`
|
|
11859
12307
|
border-radius: var(--wui-border-radius-02);
|
|
11860
12308
|
box-shadow: 0 0 0 1px var(--wui-color-border);
|
|
11861
12309
|
overflow: hidden;
|
|
11862
12310
|
position: relative;
|
|
11863
12311
|
`;
|
|
11864
|
-
var Thumb2 =
|
|
12312
|
+
var Thumb2 = import_styled_components66.default.button.attrs({ type: "button" })`
|
|
11865
12313
|
appearance: none;
|
|
11866
12314
|
border-radius: var(--wui-border-radius-rounded);
|
|
11867
12315
|
border: none;
|
|
@@ -12075,14 +12523,14 @@ SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
|
|
|
12075
12523
|
var Ariakit = __toESM(require("@ariakit/react"));
|
|
12076
12524
|
var import_react54 = require("react");
|
|
12077
12525
|
var import_match_sorter = require("match-sorter");
|
|
12078
|
-
var
|
|
12526
|
+
var import_styled_components69 = __toESM(require("styled-components"));
|
|
12079
12527
|
|
|
12080
12528
|
// src/components/Tag/Tag.tsx
|
|
12081
12529
|
var import_react53 = require("react");
|
|
12082
|
-
var
|
|
12530
|
+
var import_styled_components67 = __toESM(require("styled-components"));
|
|
12083
12531
|
var import_type_guards36 = require("@wistia/type-guards");
|
|
12084
12532
|
var import_jsx_runtime253 = require("react/jsx-runtime");
|
|
12085
|
-
var TagLabel =
|
|
12533
|
+
var TagLabel = import_styled_components67.default.a`
|
|
12086
12534
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12087
12535
|
font-size: var(--wui-typography-label-4-size);
|
|
12088
12536
|
font-weight: var(--wui-typography-label-4-weight);
|
|
@@ -12118,14 +12566,14 @@ var TagLabel = import_styled_components66.default.a`
|
|
|
12118
12566
|
background: var(--wui-color-bg-surface-secondary-active);
|
|
12119
12567
|
}
|
|
12120
12568
|
`;
|
|
12121
|
-
var TagDivider =
|
|
12569
|
+
var TagDivider = import_styled_components67.default.div`
|
|
12122
12570
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12123
12571
|
border-left: 1px solid var(--wui-color-border);
|
|
12124
12572
|
display: flex;
|
|
12125
12573
|
height: 14px;
|
|
12126
12574
|
width: 1px;
|
|
12127
12575
|
`;
|
|
12128
|
-
var StyledRemoveButton =
|
|
12576
|
+
var StyledRemoveButton = import_styled_components67.default.button`
|
|
12129
12577
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12130
12578
|
all: unset;
|
|
12131
12579
|
cursor: pointer;
|
|
@@ -12153,7 +12601,7 @@ var StyledRemoveButton = import_styled_components66.default.button`
|
|
|
12153
12601
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
12154
12602
|
}
|
|
12155
12603
|
`;
|
|
12156
|
-
var StyledTag =
|
|
12604
|
+
var StyledTag = import_styled_components67.default.div`
|
|
12157
12605
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12158
12606
|
align-items: center;
|
|
12159
12607
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -12234,10 +12682,10 @@ var Tag = (0, import_react53.forwardRef)(
|
|
|
12234
12682
|
Tag.displayName = "Tag_UI";
|
|
12235
12683
|
|
|
12236
12684
|
// src/private/helpers/getTypographicStyles/getTypographicStyles.ts
|
|
12237
|
-
var
|
|
12685
|
+
var import_styled_components68 = require("styled-components");
|
|
12238
12686
|
var typographicVariantStyleMap = { ...variantStyleMap2, ...variantStyleMap };
|
|
12239
12687
|
var getTypographicStyles = (variant) => {
|
|
12240
|
-
return
|
|
12688
|
+
return import_styled_components68.css`
|
|
12241
12689
|
${typographicVariantStyleMap[variant]}
|
|
12242
12690
|
font-family: var(--font-family);
|
|
12243
12691
|
font-size: var(--font-size);
|
|
@@ -12252,7 +12700,7 @@ var getDefaultTypographicElement = (variant) => {
|
|
|
12252
12700
|
|
|
12253
12701
|
// src/components/Combobox/Combobox.tsx
|
|
12254
12702
|
var import_jsx_runtime254 = require("react/jsx-runtime");
|
|
12255
|
-
var ComboboxWrapper =
|
|
12703
|
+
var ComboboxWrapper = import_styled_components69.default.div`
|
|
12256
12704
|
${inputCss};
|
|
12257
12705
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
12258
12706
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -12301,7 +12749,7 @@ var ComboboxWrapper = import_styled_components68.default.div`
|
|
|
12301
12749
|
}
|
|
12302
12750
|
}
|
|
12303
12751
|
`;
|
|
12304
|
-
var ComboboxInput = (0,
|
|
12752
|
+
var ComboboxInput = (0, import_styled_components69.default)(Ariakit.Combobox)`
|
|
12305
12753
|
appearance: none;
|
|
12306
12754
|
padding: 0;
|
|
12307
12755
|
width: 100%;
|
|
@@ -12316,7 +12764,7 @@ var ComboboxInput = (0, import_styled_components68.default)(Ariakit.Combobox)`
|
|
|
12316
12764
|
outline-width: 2px;
|
|
12317
12765
|
}
|
|
12318
12766
|
`;
|
|
12319
|
-
var ComboboxPopover2 = (0,
|
|
12767
|
+
var ComboboxPopover2 = (0, import_styled_components69.default)(Ariakit.ComboboxPopover)`
|
|
12320
12768
|
--wui-combobox-content-border: var(--wui-color-border);
|
|
12321
12769
|
--wui-combobox-content-bg: var(--wui-color-bg-surface);
|
|
12322
12770
|
--wui-combobox-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -12342,7 +12790,7 @@ var ComboboxPopover2 = (0, import_styled_components68.default)(Ariakit.ComboboxP
|
|
|
12342
12790
|
--item-opacity: 0.5;
|
|
12343
12791
|
}
|
|
12344
12792
|
`;
|
|
12345
|
-
var ComboboxItem2 = (0,
|
|
12793
|
+
var ComboboxItem2 = (0, import_styled_components69.default)(Ariakit.ComboboxItem)`
|
|
12346
12794
|
${getTypographicStyles("body3")};
|
|
12347
12795
|
display: flex;
|
|
12348
12796
|
padding: var(--wui-combobox-option-padding);
|
|
@@ -12370,7 +12818,7 @@ var ComboboxItem2 = (0, import_styled_components68.default)(Ariakit.ComboboxItem
|
|
|
12370
12818
|
background-color: transparent;
|
|
12371
12819
|
}
|
|
12372
12820
|
`;
|
|
12373
|
-
var NoResults =
|
|
12821
|
+
var NoResults = import_styled_components69.default.div`
|
|
12374
12822
|
gap: var(--wui-space-02);
|
|
12375
12823
|
`;
|
|
12376
12824
|
var POPOVER_WIDTH_OFFSET = 20;
|
|
@@ -12517,7 +12965,7 @@ var import_react61 = require("react");
|
|
|
12517
12965
|
var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
|
|
12518
12966
|
var import_type_guards37 = require("@wistia/type-guards");
|
|
12519
12967
|
var import_react56 = require("react");
|
|
12520
|
-
var
|
|
12968
|
+
var import_styled_components70 = __toESM(require("styled-components"));
|
|
12521
12969
|
|
|
12522
12970
|
// src/components/Menu/MenuContext.tsx
|
|
12523
12971
|
var import_react55 = require("react");
|
|
@@ -12526,7 +12974,7 @@ var useMenuContext = () => (0, import_react55.useContext)(MenuContext);
|
|
|
12526
12974
|
|
|
12527
12975
|
// src/components/Menu/Menu.tsx
|
|
12528
12976
|
var import_jsx_runtime255 = require("react/jsx-runtime");
|
|
12529
|
-
var open =
|
|
12977
|
+
var open = import_styled_components70.keyframes`
|
|
12530
12978
|
from {
|
|
12531
12979
|
opacity: 0;
|
|
12532
12980
|
transform: scale(.97) translateY(-8px);
|
|
@@ -12536,7 +12984,7 @@ var open = import_styled_components69.keyframes`
|
|
|
12536
12984
|
transform: scale(1);
|
|
12537
12985
|
}
|
|
12538
12986
|
`;
|
|
12539
|
-
var close =
|
|
12987
|
+
var close = import_styled_components70.keyframes`
|
|
12540
12988
|
from {
|
|
12541
12989
|
opacity: 1;
|
|
12542
12990
|
transform: scale(1);
|
|
@@ -12546,7 +12994,7 @@ var close = import_styled_components69.keyframes`
|
|
|
12546
12994
|
transform: scale(.97) translateY(-8px);
|
|
12547
12995
|
}
|
|
12548
12996
|
`;
|
|
12549
|
-
var menuItemCss =
|
|
12997
|
+
var menuItemCss = import_styled_components70.css`
|
|
12550
12998
|
--menu-label-description-gap: var(--wui-space-01);
|
|
12551
12999
|
--menu-item-inner-gap: var(--wui-space-03);
|
|
12552
13000
|
--menu-item-left-icon-size: 24px;
|
|
@@ -12557,7 +13005,7 @@ var menuItemCss = import_styled_components69.css`
|
|
|
12557
13005
|
--menu-label-line-height: var(--wui-typography-label-3-line-height);
|
|
12558
13006
|
--menu-divider-margin: var(--wui-space-02);
|
|
12559
13007
|
`;
|
|
12560
|
-
var compactMenuItemCss =
|
|
13008
|
+
var compactMenuItemCss = import_styled_components70.css`
|
|
12561
13009
|
--menu-label-description-gap: 0;
|
|
12562
13010
|
--menu-item-inner-gap: var(--wui-space-02);
|
|
12563
13011
|
--menu-item-left-icon-size: 16px;
|
|
@@ -12568,7 +13016,7 @@ var compactMenuItemCss = import_styled_components69.css`
|
|
|
12568
13016
|
--menu-label-line-height: var(--wui-typography-label-4-line-height);
|
|
12569
13017
|
--menu-divider-margin: var(--wui-space-01);
|
|
12570
13018
|
`;
|
|
12571
|
-
var menuContentCss =
|
|
13019
|
+
var menuContentCss = import_styled_components70.css`
|
|
12572
13020
|
--menu-font-family: var(--wui-typography-family-default);
|
|
12573
13021
|
--menu-bg: var(--wui-color-bg-surface);
|
|
12574
13022
|
--menu-shadow: var(--wui-elevation-01);
|
|
@@ -12610,7 +13058,7 @@ var menuContentCss = import_styled_components69.css`
|
|
|
12610
13058
|
margin: var(--menu-divider-margin) 0;
|
|
12611
13059
|
}
|
|
12612
13060
|
`;
|
|
12613
|
-
var MenuContent = (0,
|
|
13061
|
+
var MenuContent = (0, import_styled_components70.default)(import_react_dropdown_menu.DropdownMenuContent)`
|
|
12614
13062
|
${menuContentCss}
|
|
12615
13063
|
min-width: var(--radix-dropdown-menu-trigger-width);
|
|
12616
13064
|
`;
|
|
@@ -12680,10 +13128,10 @@ Menu.displayName = "Menu_UI";
|
|
|
12680
13128
|
Menu.displayName = "Menu_UI";
|
|
12681
13129
|
|
|
12682
13130
|
// src/components/Menu/MenuLabel.tsx
|
|
12683
|
-
var
|
|
13131
|
+
var import_styled_components71 = __toESM(require("styled-components"));
|
|
12684
13132
|
var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
|
|
12685
13133
|
var import_jsx_runtime256 = require("react/jsx-runtime");
|
|
12686
|
-
var StyledMenuLabel = (0,
|
|
13134
|
+
var StyledMenuLabel = (0, import_styled_components71.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
|
|
12687
13135
|
padding: var(--wui-space-02);
|
|
12688
13136
|
`;
|
|
12689
13137
|
var MenuLabel = ({ children, ...props }) => {
|
|
@@ -12708,16 +13156,16 @@ MenuLabel.displayName = "MenuLabel_UI";
|
|
|
12708
13156
|
|
|
12709
13157
|
// src/components/Menu/SubMenu.tsx
|
|
12710
13158
|
var import_react58 = require("react");
|
|
12711
|
-
var
|
|
13159
|
+
var import_styled_components74 = __toESM(require("styled-components"));
|
|
12712
13160
|
var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
|
|
12713
13161
|
var import_type_guards39 = require("@wistia/type-guards");
|
|
12714
13162
|
|
|
12715
13163
|
// src/components/Menu/MenuItemButton.tsx
|
|
12716
13164
|
var import_react57 = require("react");
|
|
12717
|
-
var
|
|
13165
|
+
var import_styled_components72 = __toESM(require("styled-components"));
|
|
12718
13166
|
var import_type_guards38 = require("@wistia/type-guards");
|
|
12719
13167
|
var import_jsx_runtime257 = require("react/jsx-runtime");
|
|
12720
|
-
var StyledButton3 = (0,
|
|
13168
|
+
var StyledButton3 = (0, import_styled_components72.default)(Button)`
|
|
12721
13169
|
${({ colorScheme }) => getColorScheme(colorScheme)};
|
|
12722
13170
|
|
|
12723
13171
|
display: flex;
|
|
@@ -12756,7 +13204,7 @@ var StyledButton3 = (0, import_styled_components71.default)(Button)`
|
|
|
12756
13204
|
padding-left: var(--wui-space-04);
|
|
12757
13205
|
}
|
|
12758
13206
|
`;
|
|
12759
|
-
var StyledLeftIconContainer =
|
|
13207
|
+
var StyledLeftIconContainer = import_styled_components72.default.div`
|
|
12760
13208
|
height: var(--menu-item-left-icon-size);
|
|
12761
13209
|
width: var(--menu-item-left-icon-size);
|
|
12762
13210
|
|
|
@@ -12768,7 +13216,7 @@ var StyledLeftIconContainer = import_styled_components71.default.div`
|
|
|
12768
13216
|
}
|
|
12769
13217
|
}
|
|
12770
13218
|
`;
|
|
12771
|
-
var StyledRightIconContainer =
|
|
13219
|
+
var StyledRightIconContainer = import_styled_components72.default.div`
|
|
12772
13220
|
height: var(--menu-item-right-icon-size);
|
|
12773
13221
|
width: var(--menu-item-right-icon-size);
|
|
12774
13222
|
|
|
@@ -12780,13 +13228,13 @@ var StyledRightIconContainer = import_styled_components71.default.div`
|
|
|
12780
13228
|
}
|
|
12781
13229
|
}
|
|
12782
13230
|
`;
|
|
12783
|
-
var StyledLabelAndDescriptionContainer =
|
|
13231
|
+
var StyledLabelAndDescriptionContainer = import_styled_components72.default.div`
|
|
12784
13232
|
display: flex;
|
|
12785
13233
|
flex-direction: column;
|
|
12786
13234
|
gap: var(--menu-label-description-gap);
|
|
12787
13235
|
flex-basis: 100%;
|
|
12788
13236
|
`;
|
|
12789
|
-
var StyledBadgeContainer =
|
|
13237
|
+
var StyledBadgeContainer = import_styled_components72.default.div`
|
|
12790
13238
|
align-self: start;
|
|
12791
13239
|
justify-self: end;
|
|
12792
13240
|
font-size: var(--wui-typography-label-4-size);
|
|
@@ -12823,10 +13271,10 @@ var MenuItemButton = (0, import_react57.forwardRef)(({ children, appearance, com
|
|
|
12823
13271
|
fullWidth: true,
|
|
12824
13272
|
unstyled: true,
|
|
12825
13273
|
children: [
|
|
12826
|
-
props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
|
|
13274
|
+
(0, import_type_guards38.isNotNil)(props.leftIcon) ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
|
|
12827
13275
|
/* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledLabelAndDescriptionContainer, { children }),
|
|
12828
13276
|
(0, import_type_guards38.isNotNil)(badge) || (0, import_type_guards38.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
|
|
12829
|
-
props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
|
|
13277
|
+
(0, import_type_guards38.isNotNil)(props.rightIcon) ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
|
|
12830
13278
|
]
|
|
12831
13279
|
}
|
|
12832
13280
|
);
|
|
@@ -12834,10 +13282,10 @@ var MenuItemButton = (0, import_react57.forwardRef)(({ children, appearance, com
|
|
|
12834
13282
|
MenuItemButton.displayName = "MenuItemButton_UI";
|
|
12835
13283
|
|
|
12836
13284
|
// src/components/Menu/MenuItemLabelDescription.tsx
|
|
12837
|
-
var
|
|
13285
|
+
var import_styled_components73 = __toESM(require("styled-components"));
|
|
12838
13286
|
var import_jsx_runtime258 = require("react/jsx-runtime");
|
|
12839
|
-
var StyledMenuItemLabel =
|
|
12840
|
-
var StyledMenuItemDescription = (0,
|
|
13287
|
+
var StyledMenuItemLabel = import_styled_components73.default.span``;
|
|
13288
|
+
var StyledMenuItemDescription = (0, import_styled_components73.default)(Text)``;
|
|
12841
13289
|
var MenuItemLabel = ({ children }) => {
|
|
12842
13290
|
return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(StyledMenuItemLabel, { children });
|
|
12843
13291
|
};
|
|
@@ -12854,17 +13302,17 @@ var MenuItemDescription = ({ children }) => {
|
|
|
12854
13302
|
|
|
12855
13303
|
// src/components/Menu/SubMenu.tsx
|
|
12856
13304
|
var import_jsx_runtime259 = require("react/jsx-runtime");
|
|
12857
|
-
var SubMenuContent = (0,
|
|
13305
|
+
var SubMenuContent = (0, import_styled_components74.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
|
|
12858
13306
|
${menuContentCss}
|
|
12859
13307
|
|
|
12860
13308
|
${mq.smAndDown} {
|
|
12861
13309
|
transform: translateX(-100%) !important;
|
|
12862
13310
|
}
|
|
12863
13311
|
`;
|
|
12864
|
-
var StyledMobileSubMenuItems =
|
|
13312
|
+
var StyledMobileSubMenuItems = import_styled_components74.default.div`
|
|
12865
13313
|
margin-left: var(--wui-space-04);
|
|
12866
13314
|
`;
|
|
12867
|
-
var StyledSubTrigger = (0,
|
|
13315
|
+
var StyledSubTrigger = (0, import_styled_components74.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
|
|
12868
13316
|
outline: none;
|
|
12869
13317
|
|
|
12870
13318
|
&[data-state='open'],
|
|
@@ -13234,10 +13682,10 @@ var ContextMenu = ({
|
|
|
13234
13682
|
|
|
13235
13683
|
// src/components/DataCards/DataCard.tsx
|
|
13236
13684
|
var import_react62 = require("react");
|
|
13237
|
-
var
|
|
13685
|
+
var import_styled_components75 = __toESM(require("styled-components"));
|
|
13238
13686
|
var import_type_guards42 = require("@wistia/type-guards");
|
|
13239
13687
|
var import_jsx_runtime266 = require("react/jsx-runtime");
|
|
13240
|
-
var StyledDataCard =
|
|
13688
|
+
var StyledDataCard = import_styled_components75.default.div`
|
|
13241
13689
|
--wui-data-card-text: var(--wui-color-text-button);
|
|
13242
13690
|
--wui-color-text: var(--wui-data-card-text);
|
|
13243
13691
|
--wui-data-card-background: var(--wui-color-bg-surface-secondary);
|
|
@@ -13311,7 +13759,7 @@ var StyledDataCard = import_styled_components74.default.div`
|
|
|
13311
13759
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
13312
13760
|
}
|
|
13313
13761
|
`;
|
|
13314
|
-
var shimmer =
|
|
13762
|
+
var shimmer = import_styled_components75.keyframes`
|
|
13315
13763
|
0% {
|
|
13316
13764
|
background-position: 200% 0;
|
|
13317
13765
|
}
|
|
@@ -13319,7 +13767,7 @@ var shimmer = import_styled_components74.keyframes`
|
|
|
13319
13767
|
background-position: -200% 0;
|
|
13320
13768
|
}
|
|
13321
13769
|
`;
|
|
13322
|
-
var LoadingBackground =
|
|
13770
|
+
var LoadingBackground = import_styled_components75.default.div`
|
|
13323
13771
|
background: linear-gradient(
|
|
13324
13772
|
90deg,
|
|
13325
13773
|
var(--wui-color-bg-surface-tertiary) 25%,
|
|
@@ -13330,32 +13778,32 @@ var LoadingBackground = import_styled_components74.default.div`
|
|
|
13330
13778
|
animation: ${shimmer} 1.5s infinite;
|
|
13331
13779
|
border-radius: var(--wui-border-radius-01);
|
|
13332
13780
|
`;
|
|
13333
|
-
var StyledLoadingLabel = (0,
|
|
13781
|
+
var StyledLoadingLabel = (0, import_styled_components75.default)(LoadingBackground)`
|
|
13334
13782
|
width: 80px;
|
|
13335
13783
|
height: var(--wui-typography-heading-6-line-height);
|
|
13336
13784
|
`;
|
|
13337
|
-
var StyledLoadingValue = (0,
|
|
13785
|
+
var StyledLoadingValue = (0, import_styled_components75.default)(LoadingBackground)`
|
|
13338
13786
|
width: 90%;
|
|
13339
13787
|
height: var(--wui-typography-heading-3-line-height);
|
|
13340
13788
|
`;
|
|
13341
|
-
var StyledLabel3 = (0,
|
|
13789
|
+
var StyledLabel3 = (0, import_styled_components75.default)(Heading)`
|
|
13342
13790
|
grid-area: label;
|
|
13343
13791
|
`;
|
|
13344
|
-
var StyledValue = (0,
|
|
13792
|
+
var StyledValue = (0, import_styled_components75.default)(Heading)`
|
|
13345
13793
|
grid-area: value;
|
|
13346
13794
|
`;
|
|
13347
|
-
var StyledSlot =
|
|
13795
|
+
var StyledSlot = import_styled_components75.default.div`
|
|
13348
13796
|
display: flex;
|
|
13349
13797
|
justify-content: flex-end;
|
|
13350
13798
|
grid-area: slot;
|
|
13351
13799
|
align-self: center;
|
|
13352
13800
|
`;
|
|
13353
|
-
var StyledDataCardTrendContainer =
|
|
13801
|
+
var StyledDataCardTrendContainer = import_styled_components75.default.div`
|
|
13354
13802
|
position: absolute;
|
|
13355
13803
|
bottom: var(--wui-space-01);
|
|
13356
13804
|
right: var(--wui-space-01);
|
|
13357
13805
|
`;
|
|
13358
|
-
var StyledSubtitle = (0,
|
|
13806
|
+
var StyledSubtitle = (0, import_styled_components75.default)(Text)`
|
|
13359
13807
|
grid-area: subtitle;
|
|
13360
13808
|
`;
|
|
13361
13809
|
var DataCardInner = ({
|
|
@@ -13433,9 +13881,9 @@ var DataCard = (props) => {
|
|
|
13433
13881
|
DataCard.displayName = "DataCard_UI";
|
|
13434
13882
|
|
|
13435
13883
|
// src/components/DataCards/DataCards.tsx
|
|
13436
|
-
var
|
|
13884
|
+
var import_styled_components76 = __toESM(require("styled-components"));
|
|
13437
13885
|
var import_jsx_runtime267 = require("react/jsx-runtime");
|
|
13438
|
-
var StyledDataCards = (0,
|
|
13886
|
+
var StyledDataCards = (0, import_styled_components76.default)(Box)`
|
|
13439
13887
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
13440
13888
|
|
|
13441
13889
|
> * {
|
|
@@ -13468,9 +13916,9 @@ var DataCards = ({
|
|
|
13468
13916
|
DataCards.displayName = "DataCards_UI";
|
|
13469
13917
|
|
|
13470
13918
|
// src/components/DataCards/DataCardTrend.tsx
|
|
13471
|
-
var
|
|
13919
|
+
var import_styled_components77 = __toESM(require("styled-components"));
|
|
13472
13920
|
var import_jsx_runtime268 = require("react/jsx-runtime");
|
|
13473
|
-
var StyledDataCardTrend =
|
|
13921
|
+
var StyledDataCardTrend = import_styled_components77.default.div`
|
|
13474
13922
|
${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
|
|
13475
13923
|
background: var(--wui-color-bg-app);
|
|
13476
13924
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -13506,9 +13954,9 @@ var DataCardTrend = ({
|
|
|
13506
13954
|
};
|
|
13507
13955
|
|
|
13508
13956
|
// src/components/DataCards/DataCardHoverArrow.tsx
|
|
13509
|
-
var
|
|
13957
|
+
var import_styled_components78 = __toESM(require("styled-components"));
|
|
13510
13958
|
var import_jsx_runtime269 = require("react/jsx-runtime");
|
|
13511
|
-
var StyledIconContainer =
|
|
13959
|
+
var StyledIconContainer = import_styled_components78.default.div`
|
|
13512
13960
|
display: flex;
|
|
13513
13961
|
align-items: center;
|
|
13514
13962
|
align-self: center;
|
|
@@ -13524,9 +13972,9 @@ var DataCardHoverArrow = () => /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(St
|
|
|
13524
13972
|
DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
|
|
13525
13973
|
|
|
13526
13974
|
// src/components/DataList/DataList.tsx
|
|
13527
|
-
var
|
|
13975
|
+
var import_styled_components79 = __toESM(require("styled-components"));
|
|
13528
13976
|
var import_jsx_runtime270 = require("react/jsx-runtime");
|
|
13529
|
-
var StyledDataList =
|
|
13977
|
+
var StyledDataList = import_styled_components79.default.dl`
|
|
13530
13978
|
display: grid;
|
|
13531
13979
|
grid-template-columns: auto 1fr;
|
|
13532
13980
|
column-gap: var(--wui-space-02);
|
|
@@ -13605,22 +14053,22 @@ var DataListItemValue = (props) => {
|
|
|
13605
14053
|
DataListItemValue.displayName = "DataListItemValue_UI";
|
|
13606
14054
|
|
|
13607
14055
|
// src/components/Divider/Divider.tsx
|
|
13608
|
-
var
|
|
14056
|
+
var import_styled_components80 = __toESM(require("styled-components"));
|
|
13609
14057
|
var import_jsx_runtime273 = require("react/jsx-runtime");
|
|
13610
|
-
var horizontalBorderCss =
|
|
14058
|
+
var horizontalBorderCss = import_styled_components80.css`
|
|
13611
14059
|
border-top-color: var(--wui-color-border);
|
|
13612
14060
|
border-top-style: solid;
|
|
13613
14061
|
border-top-width: 1px;
|
|
13614
14062
|
clear: both; /* for horizontal dividers, ensure it clears any floats */
|
|
13615
14063
|
height: 0;
|
|
13616
14064
|
`;
|
|
13617
|
-
var verticalBorderCss =
|
|
14065
|
+
var verticalBorderCss = import_styled_components80.css`
|
|
13618
14066
|
background-color: var(--wui-color-border);
|
|
13619
14067
|
max-width: 1px;
|
|
13620
14068
|
min-height: 100%;
|
|
13621
14069
|
width: 1px;
|
|
13622
14070
|
`;
|
|
13623
|
-
var DividerComponent =
|
|
14071
|
+
var DividerComponent = import_styled_components80.default.div`
|
|
13624
14072
|
${({ $orientation }) => {
|
|
13625
14073
|
switch ($orientation) {
|
|
13626
14074
|
case "vertical":
|
|
@@ -13646,10 +14094,10 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
|
|
|
13646
14094
|
Divider.displayName = "Divider_UI";
|
|
13647
14095
|
|
|
13648
14096
|
// src/components/EditableHeading/EditableHeading.tsx
|
|
13649
|
-
var
|
|
14097
|
+
var import_styled_components81 = __toESM(require("styled-components"));
|
|
13650
14098
|
var import_react63 = require("react");
|
|
13651
14099
|
var import_jsx_runtime274 = require("react/jsx-runtime");
|
|
13652
|
-
var StyledInput = (0,
|
|
14100
|
+
var StyledInput = (0, import_styled_components81.default)(Input)`
|
|
13653
14101
|
&:not([rows]) {
|
|
13654
14102
|
min-height: unset;
|
|
13655
14103
|
}
|
|
@@ -13670,7 +14118,7 @@ var StyledInput = (0, import_styled_components80.default)(Input)`
|
|
|
13670
14118
|
resize: none;
|
|
13671
14119
|
}
|
|
13672
14120
|
`;
|
|
13673
|
-
var editableStyles =
|
|
14121
|
+
var editableStyles = import_styled_components81.css`
|
|
13674
14122
|
&:has(+ :focus-within) {
|
|
13675
14123
|
background: var(--wui-color-bg-surface-hover);
|
|
13676
14124
|
}
|
|
@@ -13680,7 +14128,7 @@ var editableStyles = import_styled_components80.css`
|
|
|
13680
14128
|
cursor: pointer;
|
|
13681
14129
|
}
|
|
13682
14130
|
`;
|
|
13683
|
-
var StyledHeading2 = (0,
|
|
14131
|
+
var StyledHeading2 = (0, import_styled_components81.default)(Heading)`
|
|
13684
14132
|
width: 100%;
|
|
13685
14133
|
border-radius: var(--wui-border-radius-02);
|
|
13686
14134
|
padding: var(--wui-space-02);
|
|
@@ -13783,15 +14231,15 @@ var EditableHeading = ({
|
|
|
13783
14231
|
|
|
13784
14232
|
// src/components/EditableText/EditableTextDisplay.tsx
|
|
13785
14233
|
var import_react65 = require("react");
|
|
13786
|
-
var
|
|
14234
|
+
var import_styled_components83 = __toESM(require("styled-components"));
|
|
13787
14235
|
var import_type_guards44 = require("@wistia/type-guards");
|
|
13788
14236
|
|
|
13789
14237
|
// src/components/EditableText/EditableTextRoot.tsx
|
|
13790
14238
|
var import_react64 = require("react");
|
|
13791
14239
|
var import_type_guards43 = require("@wistia/type-guards");
|
|
13792
|
-
var
|
|
14240
|
+
var import_styled_components82 = __toESM(require("styled-components"));
|
|
13793
14241
|
var import_jsx_runtime275 = require("react/jsx-runtime");
|
|
13794
|
-
var StyledEditableTextRoot =
|
|
14242
|
+
var StyledEditableTextRoot = import_styled_components82.default.div`
|
|
13795
14243
|
display: contents;
|
|
13796
14244
|
|
|
13797
14245
|
--wui-editable-text-padding: var(--wui-space-01);
|
|
@@ -13903,7 +14351,7 @@ var EditableTextRoot = ({
|
|
|
13903
14351
|
|
|
13904
14352
|
// src/components/EditableText/EditableTextDisplay.tsx
|
|
13905
14353
|
var import_jsx_runtime276 = require("react/jsx-runtime");
|
|
13906
|
-
var StyledEditableTextDisplay =
|
|
14354
|
+
var StyledEditableTextDisplay = import_styled_components83.default.div`
|
|
13907
14355
|
${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
|
|
13908
14356
|
padding: var(--wui-editable-text-padding);
|
|
13909
14357
|
border-radius: var(--wui-editable-text-border-radius);
|
|
@@ -13911,14 +14359,14 @@ var StyledEditableTextDisplay = import_styled_components82.default.div`
|
|
|
13911
14359
|
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
|
|
13912
14360
|
${({ $maxLines }) => {
|
|
13913
14361
|
if ((0, import_type_guards44.isNotNil)($maxLines)) {
|
|
13914
|
-
return
|
|
14362
|
+
return import_styled_components83.css`
|
|
13915
14363
|
${ellipsisStyle};
|
|
13916
14364
|
${lineClampCss($maxLines)};
|
|
13917
14365
|
`;
|
|
13918
14366
|
}
|
|
13919
14367
|
return void 0;
|
|
13920
14368
|
}}
|
|
13921
|
-
${({ $minLines }) => (0, import_type_guards44.isNotNil)($minLines) &&
|
|
14369
|
+
${({ $minLines }) => (0, import_type_guards44.isNotNil)($minLines) && import_styled_components83.css`
|
|
13922
14370
|
min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
|
|
13923
14371
|
`}
|
|
13924
14372
|
word-break: break-word;
|
|
@@ -14004,10 +14452,10 @@ var EditableTextDisplay = makePolymorphic(
|
|
|
14004
14452
|
|
|
14005
14453
|
// src/components/EditableText/EditableTextInput.tsx
|
|
14006
14454
|
var import_react66 = require("react");
|
|
14007
|
-
var
|
|
14455
|
+
var import_styled_components84 = __toESM(require("styled-components"));
|
|
14008
14456
|
var import_type_guards45 = require("@wistia/type-guards");
|
|
14009
14457
|
var import_jsx_runtime277 = require("react/jsx-runtime");
|
|
14010
|
-
var StyledInput2 = (0,
|
|
14458
|
+
var StyledInput2 = (0, import_styled_components84.default)(Input)`
|
|
14011
14459
|
&& {
|
|
14012
14460
|
${({ $minLines }) => (0, import_type_guards45.isNotNil)($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
|
|
14013
14461
|
${({ $maxLines }) => (0, import_type_guards45.isNotNil)($maxLines) && `max-height: calc(${$maxLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
|
|
@@ -14305,10 +14753,10 @@ var FormErrorSummary = ({ description }) => {
|
|
|
14305
14753
|
|
|
14306
14754
|
// src/components/FormField/FormField.tsx
|
|
14307
14755
|
var import_react73 = require("react");
|
|
14308
|
-
var
|
|
14756
|
+
var import_styled_components85 = __toESM(require("styled-components"));
|
|
14309
14757
|
var import_type_guards47 = require("@wistia/type-guards");
|
|
14310
14758
|
var import_jsx_runtime281 = require("react/jsx-runtime");
|
|
14311
|
-
var StyledFormField =
|
|
14759
|
+
var StyledFormField = import_styled_components85.default.div`
|
|
14312
14760
|
--form-field-spacing: var(--wui-space-01);
|
|
14313
14761
|
--form-field-spacing-inline: var(--wui-space-02);
|
|
14314
14762
|
--form-field-error-color: var(--wui-color-text-secondary-error);
|
|
@@ -14338,7 +14786,7 @@ var StyledFormField = import_styled_components84.default.div`
|
|
|
14338
14786
|
grid-template-rows: 1fr;
|
|
14339
14787
|
}
|
|
14340
14788
|
`;
|
|
14341
|
-
var StyledErrorList =
|
|
14789
|
+
var StyledErrorList = import_styled_components85.default.ul`
|
|
14342
14790
|
margin: 0;
|
|
14343
14791
|
padding: 0;
|
|
14344
14792
|
padding-left: var(--wui-space-04);
|
|
@@ -14493,24 +14941,24 @@ RadioGroup.displayName = "RadioGroup_UI";
|
|
|
14493
14941
|
|
|
14494
14942
|
// src/components/Grid/Grid.tsx
|
|
14495
14943
|
var import_react75 = require("react");
|
|
14496
|
-
var
|
|
14944
|
+
var import_styled_components86 = __toESM(require("styled-components"));
|
|
14497
14945
|
var import_type_guards48 = require("@wistia/type-guards");
|
|
14498
14946
|
var import_jsx_runtime283 = require("react/jsx-runtime");
|
|
14499
14947
|
var DEFAULT_ELEMENT5 = "div";
|
|
14500
14948
|
var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
|
|
14501
14949
|
if (minChildWidth === "auto" && maxColumns === "auto") {
|
|
14502
|
-
return
|
|
14950
|
+
return import_styled_components86.css`
|
|
14503
14951
|
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
14504
14952
|
`;
|
|
14505
14953
|
}
|
|
14506
14954
|
const gridMode = expandItems ? "auto-fit" : "auto-fill";
|
|
14507
14955
|
const minChildWidthValue = minChildWidth === "auto" ? 0 : minChildWidth;
|
|
14508
14956
|
if (maxColumns === "auto") {
|
|
14509
|
-
return
|
|
14957
|
+
return import_styled_components86.css`
|
|
14510
14958
|
grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
|
|
14511
14959
|
`;
|
|
14512
14960
|
}
|
|
14513
|
-
return
|
|
14961
|
+
return import_styled_components86.css`
|
|
14514
14962
|
/* Adapted from https://9elements.com/blog/building-a-rock-solid-auto-grid/ */
|
|
14515
14963
|
--wui-grid-total-column-gap-width: calc(${maxColumns - 1} * var(--wui-grid-column-gap));
|
|
14516
14964
|
--wui-grid-max-column-width: calc(
|
|
@@ -14523,7 +14971,7 @@ var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
|
|
|
14523
14971
|
);
|
|
14524
14972
|
`;
|
|
14525
14973
|
};
|
|
14526
|
-
var StyledGrid =
|
|
14974
|
+
var StyledGrid = import_styled_components86.default.div`
|
|
14527
14975
|
--wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
|
|
14528
14976
|
--wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
|
|
14529
14977
|
|
|
@@ -14567,11 +15015,11 @@ GridComponent.displayName = "Grid_UI";
|
|
|
14567
15015
|
var Grid = makePolymorphic(GridComponent);
|
|
14568
15016
|
|
|
14569
15017
|
// src/components/InputClickToCopy/InputClickToCopy.tsx
|
|
14570
|
-
var
|
|
15018
|
+
var import_styled_components87 = __toESM(require("styled-components"));
|
|
14571
15019
|
var import_react76 = require("react");
|
|
14572
15020
|
var import_type_guards49 = require("@wistia/type-guards");
|
|
14573
15021
|
var import_jsx_runtime284 = require("react/jsx-runtime");
|
|
14574
|
-
var StyledIconButton = (0,
|
|
15022
|
+
var StyledIconButton = (0, import_styled_components87.default)(IconButton)`
|
|
14575
15023
|
/* override size for icon button since prop gets changed by Input */
|
|
14576
15024
|
height: var(--icon-button-size-sm);
|
|
14577
15025
|
width: var(--icon-button-size-sm);
|
|
@@ -14637,11 +15085,11 @@ var InputClickToCopy = (0, import_react76.forwardRef)(
|
|
|
14637
15085
|
InputClickToCopy.displayName = "InputClickToCopy_UI";
|
|
14638
15086
|
|
|
14639
15087
|
// src/components/InputPassword/InputPassword.tsx
|
|
14640
|
-
var
|
|
15088
|
+
var import_styled_components88 = __toESM(require("styled-components"));
|
|
14641
15089
|
var import_react77 = require("react");
|
|
14642
15090
|
var import_type_guards50 = require("@wistia/type-guards");
|
|
14643
15091
|
var import_jsx_runtime285 = require("react/jsx-runtime");
|
|
14644
|
-
var StyledIconButton2 = (0,
|
|
15092
|
+
var StyledIconButton2 = (0, import_styled_components88.default)(IconButton)`
|
|
14645
15093
|
/* override size for icon button since prop gets changed by Input */
|
|
14646
15094
|
height: var(--icon-button-size-sm);
|
|
14647
15095
|
width: var(--icon-button-size-sm);
|
|
@@ -14684,16 +15132,16 @@ var InputPassword = (0, import_react77.forwardRef)(
|
|
|
14684
15132
|
InputPassword.displayName = "InputPassword_UI";
|
|
14685
15133
|
|
|
14686
15134
|
// src/components/KeyboardShortcut/KeyboardShortcut.tsx
|
|
14687
|
-
var
|
|
15135
|
+
var import_styled_components89 = __toESM(require("styled-components"));
|
|
14688
15136
|
var import_type_guards51 = require("@wistia/type-guards");
|
|
14689
15137
|
var import_jsx_runtime286 = require("react/jsx-runtime");
|
|
14690
|
-
var StyledKeyboardShortcut =
|
|
15138
|
+
var StyledKeyboardShortcut = import_styled_components89.default.div`
|
|
14691
15139
|
align-items: center;
|
|
14692
15140
|
display: flex;
|
|
14693
15141
|
gap: var(--wui-space-02);
|
|
14694
15142
|
${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
|
|
14695
15143
|
`;
|
|
14696
|
-
var StyledKey =
|
|
15144
|
+
var StyledKey = import_styled_components89.default.kbd`
|
|
14697
15145
|
align-items: center;
|
|
14698
15146
|
background: var(--wui-color-bg-surface-secondary);
|
|
14699
15147
|
border-bottom: 1px solid var(--wui-color-border-secondary);
|
|
@@ -14716,11 +15164,11 @@ var StyledKey = import_styled_components88.default.kbd`
|
|
|
14716
15164
|
min-width: 20px;
|
|
14717
15165
|
padding: 0 var(--wui-space-01);
|
|
14718
15166
|
`;
|
|
14719
|
-
var Label2 =
|
|
15167
|
+
var Label2 = import_styled_components89.default.span`
|
|
14720
15168
|
color: var(--wui-color-text);
|
|
14721
15169
|
font-size: 12px;
|
|
14722
15170
|
`;
|
|
14723
|
-
var KeysContainer =
|
|
15171
|
+
var KeysContainer = import_styled_components89.default.div`
|
|
14724
15172
|
display: flex;
|
|
14725
15173
|
gap: var(--wui-space-01);
|
|
14726
15174
|
`;
|
|
@@ -14794,13 +15242,13 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
|
|
|
14794
15242
|
|
|
14795
15243
|
// src/components/List/List.tsx
|
|
14796
15244
|
var import_type_guards53 = require("@wistia/type-guards");
|
|
14797
|
-
var
|
|
15245
|
+
var import_styled_components91 = __toESM(require("styled-components"));
|
|
14798
15246
|
|
|
14799
15247
|
// src/components/List/ListItem.tsx
|
|
14800
|
-
var
|
|
15248
|
+
var import_styled_components90 = __toESM(require("styled-components"));
|
|
14801
15249
|
var import_type_guards52 = require("@wistia/type-guards");
|
|
14802
15250
|
var import_jsx_runtime287 = require("react/jsx-runtime");
|
|
14803
|
-
var ListItemComponent =
|
|
15251
|
+
var ListItemComponent = import_styled_components90.default.li`
|
|
14804
15252
|
margin-bottom: var(--wui-space-02);
|
|
14805
15253
|
`;
|
|
14806
15254
|
var ListItem = ({ children }) => {
|
|
@@ -14813,7 +15261,7 @@ ListItem.displayName = "ListItem_UI";
|
|
|
14813
15261
|
|
|
14814
15262
|
// src/components/List/List.tsx
|
|
14815
15263
|
var import_jsx_runtime288 = require("react/jsx-runtime");
|
|
14816
|
-
var spacesStyle =
|
|
15264
|
+
var spacesStyle = import_styled_components91.css`
|
|
14817
15265
|
overflow: hidden;
|
|
14818
15266
|
padding-left: 0;
|
|
14819
15267
|
vertical-align: bottom;
|
|
@@ -14835,7 +15283,7 @@ var spacesStyle = import_styled_components90.css`
|
|
|
14835
15283
|
}
|
|
14836
15284
|
}
|
|
14837
15285
|
`;
|
|
14838
|
-
var commasStyle =
|
|
15286
|
+
var commasStyle = import_styled_components91.css`
|
|
14839
15287
|
${spacesStyle};
|
|
14840
15288
|
|
|
14841
15289
|
li {
|
|
@@ -14845,7 +15293,7 @@ var commasStyle = import_styled_components90.css`
|
|
|
14845
15293
|
}
|
|
14846
15294
|
}
|
|
14847
15295
|
`;
|
|
14848
|
-
var slashesStyle =
|
|
15296
|
+
var slashesStyle = import_styled_components91.css`
|
|
14849
15297
|
${spacesStyle};
|
|
14850
15298
|
|
|
14851
15299
|
li {
|
|
@@ -14856,7 +15304,7 @@ var slashesStyle = import_styled_components90.css`
|
|
|
14856
15304
|
}
|
|
14857
15305
|
}
|
|
14858
15306
|
`;
|
|
14859
|
-
var breadcrumbsStyle =
|
|
15307
|
+
var breadcrumbsStyle = import_styled_components91.css`
|
|
14860
15308
|
${spacesStyle};
|
|
14861
15309
|
|
|
14862
15310
|
li {
|
|
@@ -14867,11 +15315,11 @@ var breadcrumbsStyle = import_styled_components90.css`
|
|
|
14867
15315
|
}
|
|
14868
15316
|
}
|
|
14869
15317
|
`;
|
|
14870
|
-
var unbulletedStyle =
|
|
15318
|
+
var unbulletedStyle = import_styled_components91.css`
|
|
14871
15319
|
list-style: none;
|
|
14872
15320
|
padding-left: 0;
|
|
14873
15321
|
`;
|
|
14874
|
-
var ListComponent =
|
|
15322
|
+
var ListComponent = import_styled_components91.default.ul`
|
|
14875
15323
|
list-style-position: outside;
|
|
14876
15324
|
margin: 0 0 var(--wui-space-01);
|
|
14877
15325
|
padding: 0 0 0 var(--wui-space-04);
|
|
@@ -14951,9 +15399,9 @@ var List = ({
|
|
|
14951
15399
|
List.displayName = "List_UI";
|
|
14952
15400
|
|
|
14953
15401
|
// src/components/Mark/Mark.tsx
|
|
14954
|
-
var
|
|
15402
|
+
var import_styled_components92 = __toESM(require("styled-components"));
|
|
14955
15403
|
var import_jsx_runtime289 = require("react/jsx-runtime");
|
|
14956
|
-
var StyledMark =
|
|
15404
|
+
var StyledMark = import_styled_components92.default.mark`
|
|
14957
15405
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
14958
15406
|
background-color: var(--wui-color-bg-surface-tertiary);
|
|
14959
15407
|
color: var(--wui-color-text);
|
|
@@ -14973,19 +15421,19 @@ Mark.displayName = "Mark_UI";
|
|
|
14973
15421
|
|
|
14974
15422
|
// src/components/Modal/Modal.tsx
|
|
14975
15423
|
var import_react80 = require("react");
|
|
14976
|
-
var
|
|
15424
|
+
var import_styled_components97 = __toESM(require("styled-components"));
|
|
14977
15425
|
var import_react_dialog5 = require("@radix-ui/react-dialog");
|
|
14978
15426
|
var import_type_guards55 = require("@wistia/type-guards");
|
|
14979
15427
|
|
|
14980
15428
|
// src/components/Modal/ModalHeader.tsx
|
|
14981
|
-
var
|
|
15429
|
+
var import_styled_components94 = __toESM(require("styled-components"));
|
|
14982
15430
|
var import_react_dialog2 = require("@radix-ui/react-dialog");
|
|
14983
15431
|
|
|
14984
15432
|
// src/components/Modal/ModalCloseButton.tsx
|
|
14985
|
-
var
|
|
15433
|
+
var import_styled_components93 = __toESM(require("styled-components"));
|
|
14986
15434
|
var import_react_dialog = require("@radix-ui/react-dialog");
|
|
14987
15435
|
var import_jsx_runtime290 = require("react/jsx-runtime");
|
|
14988
|
-
var CloseButton = (0,
|
|
15436
|
+
var CloseButton = (0, import_styled_components93.default)(import_react_dialog.Close)`
|
|
14989
15437
|
align-self: start;
|
|
14990
15438
|
`;
|
|
14991
15439
|
var ModalCloseButton = () => {
|
|
@@ -15002,7 +15450,7 @@ var ModalCloseButton = () => {
|
|
|
15002
15450
|
|
|
15003
15451
|
// src/components/Modal/ModalHeader.tsx
|
|
15004
15452
|
var import_jsx_runtime291 = require("react/jsx-runtime");
|
|
15005
|
-
var Header =
|
|
15453
|
+
var Header = import_styled_components94.default.header`
|
|
15006
15454
|
display: flex;
|
|
15007
15455
|
order: 1;
|
|
15008
15456
|
gap: var(--wui-space-01);
|
|
@@ -15020,7 +15468,7 @@ var Header = import_styled_components93.default.header`
|
|
|
15020
15468
|
top: var(--wui-space-03);
|
|
15021
15469
|
}
|
|
15022
15470
|
`;
|
|
15023
|
-
var Title = (0,
|
|
15471
|
+
var Title = (0, import_styled_components94.default)(import_react_dialog2.Title)`
|
|
15024
15472
|
font-family: var(--wui-typography-heading-2-family);
|
|
15025
15473
|
line-height: var(--wui-typography-heading-2-line-height);
|
|
15026
15474
|
font-size: var(--wui-typography-heading-2-size);
|
|
@@ -15047,7 +15495,7 @@ var ModalHeader = ({
|
|
|
15047
15495
|
|
|
15048
15496
|
// src/components/Modal/ModalContent.tsx
|
|
15049
15497
|
var import_react79 = require("react");
|
|
15050
|
-
var
|
|
15498
|
+
var import_styled_components95 = __toESM(require("styled-components"));
|
|
15051
15499
|
var import_react_dialog3 = require("@radix-ui/react-dialog");
|
|
15052
15500
|
|
|
15053
15501
|
// src/private/hooks/useFocusRestore/useFocusRestore.ts
|
|
@@ -15071,7 +15519,7 @@ var useFocusRestore = () => {
|
|
|
15071
15519
|
|
|
15072
15520
|
// src/components/Modal/ModalContent.tsx
|
|
15073
15521
|
var import_jsx_runtime292 = require("react/jsx-runtime");
|
|
15074
|
-
var modalEnter =
|
|
15522
|
+
var modalEnter = import_styled_components95.keyframes`
|
|
15075
15523
|
from {
|
|
15076
15524
|
opacity: 0;
|
|
15077
15525
|
transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
|
|
@@ -15082,7 +15530,7 @@ var modalEnter = import_styled_components94.keyframes`
|
|
|
15082
15530
|
transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
|
|
15083
15531
|
}
|
|
15084
15532
|
`;
|
|
15085
|
-
var modalExit =
|
|
15533
|
+
var modalExit = import_styled_components95.keyframes`
|
|
15086
15534
|
from {
|
|
15087
15535
|
opacity: 1;
|
|
15088
15536
|
transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
|
|
@@ -15093,7 +15541,7 @@ var modalExit = import_styled_components94.keyframes`
|
|
|
15093
15541
|
transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
|
|
15094
15542
|
}
|
|
15095
15543
|
`;
|
|
15096
|
-
var centeredModalStyles =
|
|
15544
|
+
var centeredModalStyles = import_styled_components95.css`
|
|
15097
15545
|
--wui-modal-screen-offset: var(--wui-space-05);
|
|
15098
15546
|
--wui-modal-translate-y: -50%;
|
|
15099
15547
|
|
|
@@ -15109,7 +15557,7 @@ var centeredModalStyles = import_styled_components94.css`
|
|
|
15109
15557
|
animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
15110
15558
|
}
|
|
15111
15559
|
`;
|
|
15112
|
-
var fixedTopModalStyles =
|
|
15560
|
+
var fixedTopModalStyles = import_styled_components95.css`
|
|
15113
15561
|
--wui-modal-screen-offset-top: 15vh;
|
|
15114
15562
|
--wui-modal-screen-offset-bottom: 5vh;
|
|
15115
15563
|
--wui-modal-translate-y: 0%;
|
|
@@ -15128,7 +15576,7 @@ var fixedTopModalStyles = import_styled_components94.css`
|
|
|
15128
15576
|
animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
15129
15577
|
}
|
|
15130
15578
|
`;
|
|
15131
|
-
var slideInRight =
|
|
15579
|
+
var slideInRight = import_styled_components95.keyframes`
|
|
15132
15580
|
from {
|
|
15133
15581
|
opacity: 0;
|
|
15134
15582
|
transform: translateX(100%);
|
|
@@ -15139,7 +15587,7 @@ var slideInRight = import_styled_components94.keyframes`
|
|
|
15139
15587
|
transform: translateX(0);
|
|
15140
15588
|
}
|
|
15141
15589
|
`;
|
|
15142
|
-
var slideOutRight =
|
|
15590
|
+
var slideOutRight = import_styled_components95.keyframes`
|
|
15143
15591
|
from {
|
|
15144
15592
|
opacity: 1;
|
|
15145
15593
|
transform: translateX(0);
|
|
@@ -15150,7 +15598,7 @@ var slideOutRight = import_styled_components94.keyframes`
|
|
|
15150
15598
|
transform: translateX(100%);
|
|
15151
15599
|
}
|
|
15152
15600
|
`;
|
|
15153
|
-
var rightSidePanelModalStyles =
|
|
15601
|
+
var rightSidePanelModalStyles = import_styled_components95.css`
|
|
15154
15602
|
--wui-modal-screen-offset: var(--wui-space-05);
|
|
15155
15603
|
|
|
15156
15604
|
height: calc(100vh - var(--wui-modal-screen-offset) * 2);
|
|
@@ -15168,7 +15616,7 @@ var positionStyleMap = {
|
|
|
15168
15616
|
"fixed-top": fixedTopModalStyles,
|
|
15169
15617
|
"right-side-panel": rightSidePanelModalStyles
|
|
15170
15618
|
};
|
|
15171
|
-
var StyledModalContent = (0,
|
|
15619
|
+
var StyledModalContent = (0, import_styled_components95.default)(import_react_dialog3.Content)`
|
|
15172
15620
|
position: fixed;
|
|
15173
15621
|
display: flex;
|
|
15174
15622
|
flex-direction: column;
|
|
@@ -15215,8 +15663,8 @@ var ModalContent = (0, import_react79.forwardRef)(
|
|
|
15215
15663
|
|
|
15216
15664
|
// src/components/Modal/ModalOverlay.tsx
|
|
15217
15665
|
var import_react_dialog4 = require("@radix-ui/react-dialog");
|
|
15218
|
-
var
|
|
15219
|
-
var backdropShow =
|
|
15666
|
+
var import_styled_components96 = __toESM(require("styled-components"));
|
|
15667
|
+
var backdropShow = import_styled_components96.keyframes`
|
|
15220
15668
|
from {
|
|
15221
15669
|
opacity: 0;
|
|
15222
15670
|
}
|
|
@@ -15225,7 +15673,7 @@ var backdropShow = import_styled_components95.keyframes`
|
|
|
15225
15673
|
opacity: 1;
|
|
15226
15674
|
}
|
|
15227
15675
|
`;
|
|
15228
|
-
var backdropHide =
|
|
15676
|
+
var backdropHide = import_styled_components96.keyframes`
|
|
15229
15677
|
from {
|
|
15230
15678
|
opacity: 1;
|
|
15231
15679
|
}
|
|
@@ -15234,7 +15682,7 @@ var backdropHide = import_styled_components95.keyframes`
|
|
|
15234
15682
|
opacity: 0;
|
|
15235
15683
|
}
|
|
15236
15684
|
`;
|
|
15237
|
-
var ModalOverlay = (0,
|
|
15685
|
+
var ModalOverlay = (0, import_styled_components96.default)(import_react_dialog4.DialogOverlay)`
|
|
15238
15686
|
animation: ${backdropShow} var(--wui-motion-duration-02);
|
|
15239
15687
|
background: var(--wui-color-backdrop);
|
|
15240
15688
|
inset: 0;
|
|
@@ -15249,7 +15697,7 @@ var ModalOverlay = (0, import_styled_components95.default)(import_react_dialog4.
|
|
|
15249
15697
|
// src/components/Modal/Modal.tsx
|
|
15250
15698
|
var import_jsx_runtime293 = require("react/jsx-runtime");
|
|
15251
15699
|
var DEFAULT_MODAL_WIDTH = "532px";
|
|
15252
|
-
var ModalBody =
|
|
15700
|
+
var ModalBody = import_styled_components97.default.div`
|
|
15253
15701
|
flex-direction: column;
|
|
15254
15702
|
display: flex;
|
|
15255
15703
|
flex: 1 0 0;
|
|
@@ -15316,7 +15764,7 @@ Modal.displayName = "Modal_UI";
|
|
|
15316
15764
|
|
|
15317
15765
|
// src/components/Popover/Popover.tsx
|
|
15318
15766
|
var import_react_popover5 = require("@radix-ui/react-popover");
|
|
15319
|
-
var
|
|
15767
|
+
var import_styled_components99 = __toESM(require("styled-components"));
|
|
15320
15768
|
|
|
15321
15769
|
// src/private/helpers/getControls/getControlProps.tsx
|
|
15322
15770
|
var import_type_guards56 = require("@wistia/type-guards");
|
|
@@ -15326,12 +15774,12 @@ var getControlProps = (isOpen, onOpenChange) => {
|
|
|
15326
15774
|
|
|
15327
15775
|
// src/components/Popover/PopoverArrow.tsx
|
|
15328
15776
|
var import_react_popover4 = require("@radix-ui/react-popover");
|
|
15329
|
-
var
|
|
15777
|
+
var import_styled_components98 = __toESM(require("styled-components"));
|
|
15330
15778
|
var import_jsx_runtime294 = require("react/jsx-runtime");
|
|
15331
|
-
var StyledPath =
|
|
15779
|
+
var StyledPath = import_styled_components98.default.path`
|
|
15332
15780
|
fill: var(--wui-color-border-secondary);
|
|
15333
15781
|
`;
|
|
15334
|
-
var circleAnimation =
|
|
15782
|
+
var circleAnimation = import_styled_components98.keyframes`
|
|
15335
15783
|
0% {
|
|
15336
15784
|
opacity: var(--wui-popover-arrow-circle-starting-opacity);
|
|
15337
15785
|
}
|
|
@@ -15339,7 +15787,7 @@ var circleAnimation = import_styled_components97.keyframes`
|
|
|
15339
15787
|
opacity: 0;
|
|
15340
15788
|
}
|
|
15341
15789
|
`;
|
|
15342
|
-
var StyledCircle =
|
|
15790
|
+
var StyledCircle = import_styled_components98.default.circle`
|
|
15343
15791
|
stroke: var(--wui-color-border-active);
|
|
15344
15792
|
animation-duration: 2s;
|
|
15345
15793
|
animation-iteration-count: infinite;
|
|
@@ -15360,7 +15808,7 @@ var StyledCircle = import_styled_components97.default.circle`
|
|
|
15360
15808
|
}
|
|
15361
15809
|
|
|
15362
15810
|
@media (prefers-reduced-motion: no-preference) {
|
|
15363
|
-
${({ $isAnimated }) => $isAnimated &&
|
|
15811
|
+
${({ $isAnimated }) => $isAnimated && import_styled_components98.css`
|
|
15364
15812
|
animation-name: ${circleAnimation};
|
|
15365
15813
|
`}
|
|
15366
15814
|
}
|
|
@@ -15406,10 +15854,10 @@ PopoverArrow.displayName = "PopoverArrow_UI";
|
|
|
15406
15854
|
|
|
15407
15855
|
// src/components/Popover/Popover.tsx
|
|
15408
15856
|
var import_jsx_runtime295 = require("react/jsx-runtime");
|
|
15409
|
-
var StyledContent2 = (0,
|
|
15857
|
+
var StyledContent2 = (0, import_styled_components99.default)(import_react_popover5.Content)`
|
|
15410
15858
|
z-index: var(--wui-zindex-popover);
|
|
15411
15859
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
15412
|
-
${({ $unstyled }) => !$unstyled &&
|
|
15860
|
+
${({ $unstyled }) => !$unstyled && import_styled_components99.css`
|
|
15413
15861
|
border-radius: var(--wui-border-radius-02);
|
|
15414
15862
|
padding: var(--wui-space-04);
|
|
15415
15863
|
max-width: var(--wui-popover-max-width, 320px);
|
|
@@ -15475,11 +15923,11 @@ var Popover = ({
|
|
|
15475
15923
|
Popover.displayName = "Popover_UI";
|
|
15476
15924
|
|
|
15477
15925
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
15478
|
-
var
|
|
15926
|
+
var import_styled_components100 = __toESM(require("styled-components"));
|
|
15479
15927
|
var import_react_progress = require("@radix-ui/react-progress");
|
|
15480
15928
|
var import_type_guards57 = require("@wistia/type-guards");
|
|
15481
15929
|
var import_jsx_runtime296 = require("react/jsx-runtime");
|
|
15482
|
-
var ProgressBarWrapper =
|
|
15930
|
+
var ProgressBarWrapper = import_styled_components100.default.div`
|
|
15483
15931
|
--progress-bar-height: 8px;
|
|
15484
15932
|
|
|
15485
15933
|
display: flex;
|
|
@@ -15493,7 +15941,7 @@ var getTranslateValue = (progress, max) => {
|
|
|
15493
15941
|
const progressPercentage = progress / max * 100;
|
|
15494
15942
|
return `translateX(-${100 - progressPercentage}%)`;
|
|
15495
15943
|
};
|
|
15496
|
-
var ProgressBarLabel =
|
|
15944
|
+
var ProgressBarLabel = import_styled_components100.default.div`
|
|
15497
15945
|
display: flex;
|
|
15498
15946
|
line-height: var(--wui-typography-label-3-line-height);
|
|
15499
15947
|
font-size: var(--wui-typography-label-3-size);
|
|
@@ -15501,7 +15949,7 @@ var ProgressBarLabel = import_styled_components99.default.div`
|
|
|
15501
15949
|
color: var(--wui-color-text-secondary);
|
|
15502
15950
|
flex-shrink: 0;
|
|
15503
15951
|
`;
|
|
15504
|
-
var StyledProgressIndicator = (0,
|
|
15952
|
+
var StyledProgressIndicator = (0, import_styled_components100.default)(import_react_progress.Indicator)`
|
|
15505
15953
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
15506
15954
|
background-color: var(--wui-color-bg-fill);
|
|
15507
15955
|
width: 100%;
|
|
@@ -15511,7 +15959,7 @@ var StyledProgressIndicator = (0, import_styled_components99.default)(import_rea
|
|
|
15511
15959
|
transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
|
|
15512
15960
|
transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
|
|
15513
15961
|
`;
|
|
15514
|
-
var StyledProgressBar = (0,
|
|
15962
|
+
var StyledProgressBar = (0, import_styled_components100.default)(import_react_progress.Root)`
|
|
15515
15963
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
15516
15964
|
position: relative;
|
|
15517
15965
|
overflow: hidden;
|
|
@@ -15559,17 +16007,17 @@ ProgressBar.displayName = "ProgressBar_UI";
|
|
|
15559
16007
|
// src/components/Radio/Radio.tsx
|
|
15560
16008
|
var import_type_guards58 = require("@wistia/type-guards");
|
|
15561
16009
|
var import_react81 = require("react");
|
|
15562
|
-
var
|
|
16010
|
+
var import_styled_components101 = __toESM(require("styled-components"));
|
|
15563
16011
|
var import_jsx_runtime297 = require("react/jsx-runtime");
|
|
15564
|
-
var sizeSmall2 =
|
|
16012
|
+
var sizeSmall2 = import_styled_components101.css`
|
|
15565
16013
|
--wui-radio-size: 14px;
|
|
15566
16014
|
--wui-radio-icon-size: 7px;
|
|
15567
16015
|
`;
|
|
15568
|
-
var sizeMedium2 =
|
|
16016
|
+
var sizeMedium2 = import_styled_components101.css`
|
|
15569
16017
|
--wui-radio-size: 16px;
|
|
15570
16018
|
--wui-radio-icon-size: 8px;
|
|
15571
16019
|
`;
|
|
15572
|
-
var sizeLarge2 =
|
|
16020
|
+
var sizeLarge2 = import_styled_components101.css`
|
|
15573
16021
|
--wui-radio-size: 20px;
|
|
15574
16022
|
--wui-radio-icon-size: 10px;
|
|
15575
16023
|
`;
|
|
@@ -15578,7 +16026,7 @@ var getSizeCss3 = (size) => {
|
|
|
15578
16026
|
if (size === "lg") return sizeLarge2;
|
|
15579
16027
|
return sizeMedium2;
|
|
15580
16028
|
};
|
|
15581
|
-
var StyledRadioWrapper =
|
|
16029
|
+
var StyledRadioWrapper = import_styled_components101.default.div`
|
|
15582
16030
|
--wui-radio-background-color: var(--wui-color-bg-surface);
|
|
15583
16031
|
--wui-radio-border-color: var(--wui-color-border-secondary);
|
|
15584
16032
|
--wui-radio-icon-color: transparent;
|
|
@@ -15612,7 +16060,7 @@ var StyledRadioWrapper = import_styled_components100.default.div`
|
|
|
15612
16060
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
15613
16061
|
user-select: none;
|
|
15614
16062
|
`;
|
|
15615
|
-
var StyledRadioInput =
|
|
16063
|
+
var StyledRadioInput = import_styled_components101.default.div`
|
|
15616
16064
|
${({ $size }) => getSizeCss3($size)}
|
|
15617
16065
|
width: var(--wui-radio-size);
|
|
15618
16066
|
height: var(--wui-radio-size);
|
|
@@ -15638,7 +16086,7 @@ var StyledRadioInput = import_styled_components100.default.div`
|
|
|
15638
16086
|
transform: translate(-50%, -50%);
|
|
15639
16087
|
}
|
|
15640
16088
|
`;
|
|
15641
|
-
var StyledHiddenRadioInput =
|
|
16089
|
+
var StyledHiddenRadioInput = import_styled_components101.default.input`
|
|
15642
16090
|
${visuallyHiddenStyle}
|
|
15643
16091
|
`;
|
|
15644
16092
|
var Radio = (0, import_react81.forwardRef)(
|
|
@@ -15710,17 +16158,17 @@ var import_react83 = require("react");
|
|
|
15710
16158
|
|
|
15711
16159
|
// src/components/RadioCard/RadioCardRoot.tsx
|
|
15712
16160
|
var import_react82 = require("react");
|
|
15713
|
-
var
|
|
16161
|
+
var import_styled_components102 = __toESM(require("styled-components"));
|
|
15714
16162
|
var import_type_guards59 = require("@wistia/type-guards");
|
|
15715
16163
|
var import_jsx_runtime298 = require("react/jsx-runtime");
|
|
15716
|
-
var checkedStyles =
|
|
16164
|
+
var checkedStyles = import_styled_components102.css`
|
|
15717
16165
|
--wui-radio-card-border-color: var(--wui-color-focus-ring);
|
|
15718
16166
|
--wui-color-icon: var(--wui-color-icon-selected);
|
|
15719
16167
|
--wui-radio-card-background-color: var(--wui-color-bg-surface-info);
|
|
15720
16168
|
--wui-color-text: var(--wui-color-text-info);
|
|
15721
16169
|
--wui-color-text-secondary: var(--wui-color-text-info);
|
|
15722
16170
|
`;
|
|
15723
|
-
var disabledStyles =
|
|
16171
|
+
var disabledStyles = import_styled_components102.css`
|
|
15724
16172
|
--wui-radio-card-border-color: var(--wui-color-border-disabled);
|
|
15725
16173
|
--wui-radio-card-background-color: var(--wui-color-bg-surface-disabled);
|
|
15726
16174
|
--wui-radio-card-cursor: not-allowed;
|
|
@@ -15728,10 +16176,10 @@ var disabledStyles = import_styled_components101.css`
|
|
|
15728
16176
|
--wui-color-text: var(--wui-color-text-disabled);
|
|
15729
16177
|
--wui-color-text-secondary: var(--wui-color-text-disabled);
|
|
15730
16178
|
`;
|
|
15731
|
-
var focusStyles =
|
|
16179
|
+
var focusStyles = import_styled_components102.css`
|
|
15732
16180
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
15733
16181
|
`;
|
|
15734
|
-
var imageCoverStyles =
|
|
16182
|
+
var imageCoverStyles = import_styled_components102.css`
|
|
15735
16183
|
--wui-radio-card-image-inset: 0px;
|
|
15736
16184
|
--wui-radio-card-border-width: 0px;
|
|
15737
16185
|
--wui-inset-shadow-width: 1px;
|
|
@@ -15762,7 +16210,7 @@ var imageCoverStyles = import_styled_components101.css`
|
|
|
15762
16210
|
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
|
|
15763
16211
|
}
|
|
15764
16212
|
`;
|
|
15765
|
-
var StyledCard2 =
|
|
16213
|
+
var StyledCard2 = import_styled_components102.default.label`
|
|
15766
16214
|
--wui-radio-card-border-color: var(--wui-color-border-secondary);
|
|
15767
16215
|
--wui-radio-card-background-color: var(--wui-color-bg-surface);
|
|
15768
16216
|
--wui-radio-card-cursor: pointer;
|
|
@@ -15816,7 +16264,7 @@ var StyledCard2 = import_styled_components101.default.label`
|
|
|
15816
16264
|
}
|
|
15817
16265
|
}
|
|
15818
16266
|
`;
|
|
15819
|
-
var StyledHiddenInput =
|
|
16267
|
+
var StyledHiddenInput = import_styled_components102.default.input`
|
|
15820
16268
|
${visuallyHiddenStyle}
|
|
15821
16269
|
`;
|
|
15822
16270
|
var RadioCardRoot = (0, import_react82.forwardRef)(
|
|
@@ -15871,12 +16319,12 @@ var RadioCardRoot = (0, import_react82.forwardRef)(
|
|
|
15871
16319
|
RadioCardRoot.displayName = "RadioCardRoot_UI";
|
|
15872
16320
|
|
|
15873
16321
|
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
15874
|
-
var
|
|
16322
|
+
var import_styled_components104 = __toESM(require("styled-components"));
|
|
15875
16323
|
var import_type_guards60 = require("@wistia/type-guards");
|
|
15876
16324
|
|
|
15877
16325
|
// src/components/RadioCard/RadioCardIndicator.tsx
|
|
15878
|
-
var
|
|
15879
|
-
var RadioCardIndicator =
|
|
16326
|
+
var import_styled_components103 = __toESM(require("styled-components"));
|
|
16327
|
+
var RadioCardIndicator = import_styled_components103.default.div`
|
|
15880
16328
|
--wui-radio-card-indicator-size: 14px;
|
|
15881
16329
|
--wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
|
|
15882
16330
|
--wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
|
|
@@ -15926,15 +16374,15 @@ RadioCardIndicator.displayName = "RadioCardIndicator_UI";
|
|
|
15926
16374
|
|
|
15927
16375
|
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
15928
16376
|
var import_jsx_runtime299 = require("react/jsx-runtime");
|
|
15929
|
-
var StyledCardContent =
|
|
16377
|
+
var StyledCardContent = import_styled_components104.default.div`
|
|
15930
16378
|
display: grid;
|
|
15931
16379
|
grid-auto-flow: column;
|
|
15932
16380
|
gap: var(--wui-space-02);
|
|
15933
16381
|
`;
|
|
15934
|
-
var StyledCardIcon =
|
|
16382
|
+
var StyledCardIcon = import_styled_components104.default.div`
|
|
15935
16383
|
display: contents;
|
|
15936
16384
|
`;
|
|
15937
|
-
var StyledIndicatorContainer =
|
|
16385
|
+
var StyledIndicatorContainer = import_styled_components104.default.div`
|
|
15938
16386
|
height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
|
|
15939
16387
|
display: flex;
|
|
15940
16388
|
align-items: center;
|
|
@@ -15973,8 +16421,8 @@ var RadioCardDefaultLayout = ({
|
|
|
15973
16421
|
RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
|
|
15974
16422
|
|
|
15975
16423
|
// src/components/RadioCard/RadioCardChildrenContainer.tsx
|
|
15976
|
-
var
|
|
15977
|
-
var RadioCardChildrenContainer =
|
|
16424
|
+
var import_styled_components105 = __toESM(require("styled-components"));
|
|
16425
|
+
var RadioCardChildrenContainer = import_styled_components105.default.div`
|
|
15978
16426
|
flex: 1 1 auto;
|
|
15979
16427
|
`;
|
|
15980
16428
|
|
|
@@ -16033,49 +16481,49 @@ RadioCardImage.displayName = "RadioCardImage_UI";
|
|
|
16033
16481
|
|
|
16034
16482
|
// src/components/ScrollArea/ScrollArea.tsx
|
|
16035
16483
|
var import_react85 = require("react");
|
|
16036
|
-
var
|
|
16484
|
+
var import_styled_components106 = __toESM(require("styled-components"));
|
|
16037
16485
|
var import_throttle_debounce2 = require("throttle-debounce");
|
|
16038
16486
|
var import_jsx_runtime302 = require("react/jsx-runtime");
|
|
16039
16487
|
var SHADOW_SIZE_PX = 8;
|
|
16040
|
-
var Container10 =
|
|
16488
|
+
var Container10 = import_styled_components106.default.div`
|
|
16041
16489
|
overflow: hidden;
|
|
16042
16490
|
position: relative;
|
|
16043
16491
|
flex: 1 1 auto;
|
|
16044
16492
|
`;
|
|
16045
|
-
var ScrollContainer =
|
|
16493
|
+
var ScrollContainer = import_styled_components106.default.div`
|
|
16046
16494
|
overflow: auto;
|
|
16047
16495
|
height: 100%;
|
|
16048
16496
|
width: 100%;
|
|
16049
16497
|
`;
|
|
16050
|
-
var Shadow =
|
|
16498
|
+
var Shadow = import_styled_components106.default.div`
|
|
16051
16499
|
pointer-events: none;
|
|
16052
16500
|
position: absolute;
|
|
16053
16501
|
transition: box-shadow var(--wui-motion-duration-04) var(--wui-motion-ease);
|
|
16054
16502
|
box-shadow: ${({ $isVisible }) => $isVisible ? `0 0 ${SHADOW_SIZE_PX}px ${SHADOW_SIZE_PX}px var(--wui-color-drop-shadow)` : "none"};
|
|
16055
16503
|
z-index: 1;
|
|
16056
16504
|
`;
|
|
16057
|
-
var ShadowAtTop = (0,
|
|
16505
|
+
var ShadowAtTop = (0, import_styled_components106.default)(Shadow)`
|
|
16058
16506
|
transform: translateY(-${SHADOW_SIZE_PX}px);
|
|
16059
16507
|
height: 0;
|
|
16060
16508
|
left: 0;
|
|
16061
16509
|
right: 0;
|
|
16062
16510
|
top: 0;
|
|
16063
16511
|
`;
|
|
16064
|
-
var ShadowAtBottom = (0,
|
|
16512
|
+
var ShadowAtBottom = (0, import_styled_components106.default)(Shadow)`
|
|
16065
16513
|
transform: translateY(${SHADOW_SIZE_PX}px);
|
|
16066
16514
|
bottom: 0;
|
|
16067
16515
|
height: 0;
|
|
16068
16516
|
left: 0;
|
|
16069
16517
|
right: 0;
|
|
16070
16518
|
`;
|
|
16071
|
-
var ShadowAtLeft = (0,
|
|
16519
|
+
var ShadowAtLeft = (0, import_styled_components106.default)(Shadow)`
|
|
16072
16520
|
transform: translateX(-${SHADOW_SIZE_PX}px);
|
|
16073
16521
|
bottom: 0;
|
|
16074
16522
|
left: 0;
|
|
16075
16523
|
top: 0;
|
|
16076
16524
|
width: 0;
|
|
16077
16525
|
`;
|
|
16078
|
-
var ShadowAtRight = (0,
|
|
16526
|
+
var ShadowAtRight = (0, import_styled_components106.default)(Shadow)`
|
|
16079
16527
|
transform: translateX(${SHADOW_SIZE_PX}px);
|
|
16080
16528
|
bottom: 0;
|
|
16081
16529
|
right: 0;
|
|
@@ -16136,7 +16584,7 @@ ScrollArea.displayName = "ScrollArea_UI";
|
|
|
16136
16584
|
|
|
16137
16585
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
16138
16586
|
var import_react88 = require("react");
|
|
16139
|
-
var
|
|
16587
|
+
var import_styled_components108 = __toESM(require("styled-components"));
|
|
16140
16588
|
var import_react_toggle_group3 = require("@radix-ui/react-toggle-group");
|
|
16141
16589
|
var import_type_guards62 = require("@wistia/type-guards");
|
|
16142
16590
|
|
|
@@ -16174,7 +16622,7 @@ var useSelectedItemStyle = () => {
|
|
|
16174
16622
|
};
|
|
16175
16623
|
|
|
16176
16624
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
16177
|
-
var
|
|
16625
|
+
var import_styled_components107 = __toESM(require("styled-components"));
|
|
16178
16626
|
var import_type_guards61 = require("@wistia/type-guards");
|
|
16179
16627
|
|
|
16180
16628
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
@@ -16191,12 +16639,12 @@ var useSegmentedControlValue = () => {
|
|
|
16191
16639
|
|
|
16192
16640
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
16193
16641
|
var import_jsx_runtime304 = require("react/jsx-runtime");
|
|
16194
|
-
var selectedItemIndicatorStyles =
|
|
16642
|
+
var selectedItemIndicatorStyles = import_styled_components107.css`
|
|
16195
16643
|
background-color: var(--wui-color-bg-fill-white);
|
|
16196
16644
|
border-radius: var(--wui-border-radius-rounded);
|
|
16197
16645
|
box-shadow: var(--wui-elevation-01);
|
|
16198
16646
|
`;
|
|
16199
|
-
var SelectedItemIndicatorDiv =
|
|
16647
|
+
var SelectedItemIndicatorDiv = import_styled_components107.default.div`
|
|
16200
16648
|
${selectedItemIndicatorStyles}
|
|
16201
16649
|
left: 0;
|
|
16202
16650
|
position: absolute;
|
|
@@ -16223,7 +16671,7 @@ var SelectedItemIndicator = () => {
|
|
|
16223
16671
|
|
|
16224
16672
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
16225
16673
|
var import_jsx_runtime305 = require("react/jsx-runtime");
|
|
16226
|
-
var segmentedControlStyles =
|
|
16674
|
+
var segmentedControlStyles = import_styled_components108.css`
|
|
16227
16675
|
display: inline-flex;
|
|
16228
16676
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
16229
16677
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -16234,7 +16682,7 @@ var segmentedControlStyles = import_styled_components107.css`
|
|
|
16234
16682
|
position: relative;
|
|
16235
16683
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
16236
16684
|
`;
|
|
16237
|
-
var StyledSegmentedControl = (0,
|
|
16685
|
+
var StyledSegmentedControl = (0, import_styled_components108.default)(import_react_toggle_group3.Root)`
|
|
16238
16686
|
${segmentedControlStyles}
|
|
16239
16687
|
`;
|
|
16240
16688
|
var SegmentedControl = (0, import_react88.forwardRef)(
|
|
@@ -16273,11 +16721,11 @@ SegmentedControl.displayName = "SegmentedControl_UI";
|
|
|
16273
16721
|
|
|
16274
16722
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
16275
16723
|
var import_react89 = require("react");
|
|
16276
|
-
var
|
|
16724
|
+
var import_styled_components109 = __toESM(require("styled-components"));
|
|
16277
16725
|
var import_react_toggle_group4 = require("@radix-ui/react-toggle-group");
|
|
16278
16726
|
var import_type_guards63 = require("@wistia/type-guards");
|
|
16279
16727
|
var import_jsx_runtime306 = require("react/jsx-runtime");
|
|
16280
|
-
var segmentedControlItemStyles =
|
|
16728
|
+
var segmentedControlItemStyles = import_styled_components109.css`
|
|
16281
16729
|
all: unset; /* ToggleGroupItem is a button element */
|
|
16282
16730
|
align-items: center;
|
|
16283
16731
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -16345,7 +16793,7 @@ var segmentedControlItemStyles = import_styled_components108.css`
|
|
|
16345
16793
|
}
|
|
16346
16794
|
}
|
|
16347
16795
|
`;
|
|
16348
|
-
var StyledSegmentedControlItem = (0,
|
|
16796
|
+
var StyledSegmentedControlItem = (0, import_styled_components109.default)(import_react_toggle_group4.Item)`
|
|
16349
16797
|
${segmentedControlItemStyles}
|
|
16350
16798
|
`;
|
|
16351
16799
|
var SegmentedControlItem = (0, import_react89.forwardRef)(
|
|
@@ -16409,9 +16857,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem_UI";
|
|
|
16409
16857
|
// src/components/Select/Select.tsx
|
|
16410
16858
|
var import_react_select = require("@radix-ui/react-select");
|
|
16411
16859
|
var import_react90 = require("react");
|
|
16412
|
-
var
|
|
16860
|
+
var import_styled_components110 = __toESM(require("styled-components"));
|
|
16413
16861
|
var import_jsx_runtime307 = require("react/jsx-runtime");
|
|
16414
|
-
var StyledTrigger2 = (0,
|
|
16862
|
+
var StyledTrigger2 = (0, import_styled_components110.default)(import_react_select.Trigger)`
|
|
16415
16863
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
16416
16864
|
${inputCss};
|
|
16417
16865
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -16449,13 +16897,14 @@ var StyledTrigger2 = (0, import_styled_components109.default)(import_react_selec
|
|
|
16449
16897
|
&:disabled {
|
|
16450
16898
|
outline-color: var(--wui-color-border-disabled);
|
|
16451
16899
|
background-color: var(--wui-color-bg-surface-disabled);
|
|
16900
|
+
cursor: not-allowed;
|
|
16452
16901
|
}
|
|
16453
16902
|
|
|
16454
16903
|
&[data-placeholder] {
|
|
16455
16904
|
color: var(--wui-input-placeholder);
|
|
16456
16905
|
}
|
|
16457
16906
|
`;
|
|
16458
|
-
var StyledContent3 = (0,
|
|
16907
|
+
var StyledContent3 = (0, import_styled_components110.default)(import_react_select.Content)`
|
|
16459
16908
|
--wui-select-content-border: var(--wui-color-border);
|
|
16460
16909
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
16461
16910
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -16468,10 +16917,15 @@ var StyledContent3 = (0, import_styled_components109.default)(import_react_selec
|
|
|
16468
16917
|
background-color: var(--wui-select-content-bg);
|
|
16469
16918
|
border: 1px solid var(--wui-select-content-border);
|
|
16470
16919
|
border-radius: var(--wui-select-content-border-radius);
|
|
16920
|
+
box-shadow: var(--wui-elevation-01);
|
|
16471
16921
|
padding: var(--wui-select-option-padding);
|
|
16472
16922
|
min-width: var(--radix-select-trigger-width);
|
|
16473
16923
|
max-height: var(--radix-select-content-available-height);
|
|
16474
16924
|
z-index: var(--wui-zindex-select);
|
|
16925
|
+
|
|
16926
|
+
[role='separator'] {
|
|
16927
|
+
margin: var(--wui-space-02) 0;
|
|
16928
|
+
}
|
|
16475
16929
|
`;
|
|
16476
16930
|
var Select = (0, import_react90.forwardRef)(
|
|
16477
16931
|
({
|
|
@@ -16480,42 +16934,43 @@ var Select = (0, import_react90.forwardRef)(
|
|
|
16480
16934
|
onChange = () => null,
|
|
16481
16935
|
placeholder = "Select...",
|
|
16482
16936
|
fullWidth = false,
|
|
16937
|
+
forceOpen = false,
|
|
16483
16938
|
...props
|
|
16484
16939
|
}, forwardedRef) => {
|
|
16485
16940
|
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
16486
|
-
|
|
16487
|
-
|
|
16488
|
-
|
|
16489
|
-
|
|
16490
|
-
|
|
16491
|
-
|
|
16492
|
-
|
|
16493
|
-
|
|
16494
|
-
|
|
16495
|
-
|
|
16496
|
-
|
|
16497
|
-
|
|
16498
|
-
|
|
16499
|
-
|
|
16500
|
-
|
|
16501
|
-
|
|
16502
|
-
|
|
16503
|
-
|
|
16504
|
-
|
|
16505
|
-
|
|
16506
|
-
|
|
16507
|
-
|
|
16508
|
-
|
|
16509
|
-
|
|
16510
|
-
|
|
16511
|
-
|
|
16512
|
-
|
|
16513
|
-
|
|
16514
|
-
|
|
16515
|
-
|
|
16516
|
-
|
|
16517
|
-
}
|
|
16518
|
-
);
|
|
16941
|
+
const rootProps = {
|
|
16942
|
+
...props,
|
|
16943
|
+
onValueChange: onChange
|
|
16944
|
+
};
|
|
16945
|
+
if (forceOpen) {
|
|
16946
|
+
rootProps["open"] = true;
|
|
16947
|
+
}
|
|
16948
|
+
return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(import_react_select.Root, { ...rootProps, children: [
|
|
16949
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
|
|
16950
|
+
StyledTrigger2,
|
|
16951
|
+
{
|
|
16952
|
+
ref: forwardedRef,
|
|
16953
|
+
$colorScheme: colorScheme,
|
|
16954
|
+
$fullWidth: responsiveFullWidth,
|
|
16955
|
+
...props,
|
|
16956
|
+
children: [
|
|
16957
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Value, { placeholder }),
|
|
16958
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
|
|
16959
|
+
Icon,
|
|
16960
|
+
{
|
|
16961
|
+
size: "md",
|
|
16962
|
+
type: "caret-down"
|
|
16963
|
+
}
|
|
16964
|
+
)
|
|
16965
|
+
]
|
|
16966
|
+
}
|
|
16967
|
+
),
|
|
16968
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(StyledContent3, { position: "popper", children: [
|
|
16969
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-up" }) }),
|
|
16970
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Viewport, { children }),
|
|
16971
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-down" }) })
|
|
16972
|
+
] }) })
|
|
16973
|
+
] });
|
|
16519
16974
|
}
|
|
16520
16975
|
);
|
|
16521
16976
|
Select.displayName = "Select_UI";
|
|
@@ -16523,14 +16978,14 @@ Select.displayName = "Select_UI";
|
|
|
16523
16978
|
// src/components/Select/SelectOption.tsx
|
|
16524
16979
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
16525
16980
|
var import_react91 = require("react");
|
|
16526
|
-
var
|
|
16981
|
+
var import_styled_components111 = __toESM(require("styled-components"));
|
|
16527
16982
|
var import_type_guards64 = require("@wistia/type-guards");
|
|
16528
16983
|
var import_jsx_runtime308 = require("react/jsx-runtime");
|
|
16529
|
-
var StyledItem = (0,
|
|
16530
|
-
${
|
|
16984
|
+
var StyledItem = (0, import_styled_components111.default)(import_react_select2.Item)`
|
|
16985
|
+
${getTypographicStyles("label3")}
|
|
16531
16986
|
display: flex;
|
|
16532
16987
|
padding: var(--wui-select-option-padding);
|
|
16533
|
-
|
|
16988
|
+
justify-content: space-between;
|
|
16534
16989
|
font-size: var(--font-size);
|
|
16535
16990
|
font-weight: var(--font-weight);
|
|
16536
16991
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -16550,9 +17005,6 @@ var StyledItem = (0, import_styled_components110.default)(import_react_select2.I
|
|
|
16550
17005
|
background-color: transparent;
|
|
16551
17006
|
}
|
|
16552
17007
|
`;
|
|
16553
|
-
var StyledIconContainer2 = import_styled_components110.default.span`
|
|
16554
|
-
width: 12px;
|
|
16555
|
-
`;
|
|
16556
17008
|
var SelectOption = (0, import_react91.forwardRef)(
|
|
16557
17009
|
({ children, selectedDisplayValue, ...props }, forwardedRef) => {
|
|
16558
17010
|
return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
|
|
@@ -16561,17 +17013,17 @@ var SelectOption = (0, import_react91.forwardRef)(
|
|
|
16561
17013
|
...props,
|
|
16562
17014
|
ref: forwardedRef,
|
|
16563
17015
|
children: [
|
|
16564
|
-
|
|
17016
|
+
(0, import_type_guards64.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { children: [
|
|
17017
|
+
children,
|
|
17018
|
+
/* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
|
|
17019
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children }),
|
|
17020
|
+
/* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
|
|
16565
17021
|
Icon,
|
|
16566
17022
|
{
|
|
16567
|
-
size: "
|
|
17023
|
+
size: "md",
|
|
16568
17024
|
type: "checkmark"
|
|
16569
17025
|
}
|
|
16570
|
-
) })
|
|
16571
|
-
(0, import_type_guards64.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { children: [
|
|
16572
|
-
children,
|
|
16573
|
-
/* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
|
|
16574
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children })
|
|
17026
|
+
) })
|
|
16575
17027
|
]
|
|
16576
17028
|
}
|
|
16577
17029
|
);
|
|
@@ -16581,18 +17033,18 @@ SelectOption.displayName = "SelectOption_UI";
|
|
|
16581
17033
|
|
|
16582
17034
|
// src/components/Select/SelectOptionGroup.tsx
|
|
16583
17035
|
var import_react_select3 = require("@radix-ui/react-select");
|
|
16584
|
-
var
|
|
17036
|
+
var import_styled_components112 = __toESM(require("styled-components"));
|
|
16585
17037
|
var import_jsx_runtime309 = require("react/jsx-runtime");
|
|
16586
|
-
var StyledLabel4 = (0,
|
|
17038
|
+
var StyledLabel4 = (0, import_styled_components112.default)(import_react_select3.Label)`
|
|
16587
17039
|
padding: var(--wui-select-option-padding);
|
|
16588
17040
|
`;
|
|
16589
17041
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
16590
17042
|
return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
16591
17043
|
/* @__PURE__ */ (0, import_jsx_runtime309.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
|
|
16592
|
-
|
|
17044
|
+
Heading,
|
|
16593
17045
|
{
|
|
16594
|
-
|
|
16595
|
-
variant: "
|
|
17046
|
+
renderAs: "span",
|
|
17047
|
+
variant: "heading6",
|
|
16596
17048
|
children: label
|
|
16597
17049
|
}
|
|
16598
17050
|
) }),
|
|
@@ -16602,10 +17054,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
16602
17054
|
|
|
16603
17055
|
// src/components/Slider/Slider.tsx
|
|
16604
17056
|
var import_react_slider2 = require("@radix-ui/react-slider");
|
|
16605
|
-
var
|
|
17057
|
+
var import_styled_components113 = __toESM(require("styled-components"));
|
|
16606
17058
|
var import_type_guards65 = require("@wistia/type-guards");
|
|
16607
17059
|
var import_jsx_runtime310 = require("react/jsx-runtime");
|
|
16608
|
-
var SliderContainer =
|
|
17060
|
+
var SliderContainer = import_styled_components113.default.div`
|
|
16609
17061
|
--wui-slider-track-color: var(--wui-gray-6);
|
|
16610
17062
|
--wui-slider-track-border-radius: var(--wui-border-radius-rounded);
|
|
16611
17063
|
--wui-slider-range-color: var(--wui-color-bg-fill);
|
|
@@ -16621,7 +17073,7 @@ var SliderContainer = import_styled_components112.default.div`
|
|
|
16621
17073
|
pointer-events: none;
|
|
16622
17074
|
}
|
|
16623
17075
|
`;
|
|
16624
|
-
var StyledSliderRoot = (0,
|
|
17076
|
+
var StyledSliderRoot = (0, import_styled_components113.default)(import_react_slider2.Root)`
|
|
16625
17077
|
position: relative;
|
|
16626
17078
|
display: flex;
|
|
16627
17079
|
align-items: center;
|
|
@@ -16629,20 +17081,20 @@ var StyledSliderRoot = (0, import_styled_components112.default)(import_react_sli
|
|
|
16629
17081
|
touch-action: none;
|
|
16630
17082
|
width: 100%;
|
|
16631
17083
|
`;
|
|
16632
|
-
var StyledSliderTrack = (0,
|
|
17084
|
+
var StyledSliderTrack = (0, import_styled_components113.default)(import_react_slider2.Track)`
|
|
16633
17085
|
background-color: var(--wui-slider-track-color);
|
|
16634
17086
|
border-radius: var(--wui-slider-track-border-radius);
|
|
16635
17087
|
flex-grow: 1;
|
|
16636
17088
|
height: 6px;
|
|
16637
17089
|
position: relative;
|
|
16638
17090
|
`;
|
|
16639
|
-
var StyledSliderRange = (0,
|
|
17091
|
+
var StyledSliderRange = (0, import_styled_components113.default)(import_react_slider2.Range)`
|
|
16640
17092
|
background-color: var(--wui-slider-range-color);
|
|
16641
17093
|
border-radius: var(--wui-slider-track-border-radius);
|
|
16642
17094
|
height: 100%;
|
|
16643
17095
|
position: absolute;
|
|
16644
17096
|
`;
|
|
16645
|
-
var StyledSliderThumb = (0,
|
|
17097
|
+
var StyledSliderThumb = (0, import_styled_components113.default)(import_react_slider2.Thumb)`
|
|
16646
17098
|
background-color: var(--wui-slider-thumb-color);
|
|
16647
17099
|
border-radius: var(--wui-border-radius-rounded);
|
|
16648
17100
|
cursor: grab;
|
|
@@ -16728,25 +17180,25 @@ var Slider = ({
|
|
|
16728
17180
|
Slider.displayName = "Slider_UI";
|
|
16729
17181
|
|
|
16730
17182
|
// src/components/Table/Table.tsx
|
|
16731
|
-
var
|
|
17183
|
+
var import_styled_components114 = __toESM(require("styled-components"));
|
|
16732
17184
|
var import_jsx_runtime311 = require("react/jsx-runtime");
|
|
16733
|
-
var StyledTable =
|
|
17185
|
+
var StyledTable = import_styled_components114.default.table`
|
|
16734
17186
|
width: 100%;
|
|
16735
17187
|
border-collapse: collapse;
|
|
16736
17188
|
|
|
16737
|
-
${({ $divided }) => $divided &&
|
|
17189
|
+
${({ $divided }) => $divided && import_styled_components114.css`
|
|
16738
17190
|
tr {
|
|
16739
17191
|
border-bottom: 1px solid var(--wui-color-border);
|
|
16740
17192
|
}
|
|
16741
17193
|
`}
|
|
16742
17194
|
|
|
16743
|
-
${({ $striped }) => $striped &&
|
|
17195
|
+
${({ $striped }) => $striped && import_styled_components114.css`
|
|
16744
17196
|
tbody tr:nth-child(even) {
|
|
16745
17197
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
16746
17198
|
}
|
|
16747
17199
|
`}
|
|
16748
17200
|
|
|
16749
|
-
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader &&
|
|
17201
|
+
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && import_styled_components114.css`
|
|
16750
17202
|
thead {
|
|
16751
17203
|
${visuallyHiddenStyle}
|
|
16752
17204
|
}
|
|
@@ -16773,7 +17225,7 @@ var Table = ({
|
|
|
16773
17225
|
|
|
16774
17226
|
// src/components/Table/TableBody.tsx
|
|
16775
17227
|
var import_react93 = require("react");
|
|
16776
|
-
var
|
|
17228
|
+
var import_styled_components115 = __toESM(require("styled-components"));
|
|
16777
17229
|
|
|
16778
17230
|
// src/components/Table/TableSectionContext.ts
|
|
16779
17231
|
var import_react92 = require("react");
|
|
@@ -16781,27 +17233,27 @@ var TableSectionContext = (0, import_react92.createContext)(null);
|
|
|
16781
17233
|
|
|
16782
17234
|
// src/components/Table/TableBody.tsx
|
|
16783
17235
|
var import_jsx_runtime312 = require("react/jsx-runtime");
|
|
16784
|
-
var StyledTableBody =
|
|
17236
|
+
var StyledTableBody = import_styled_components115.default.tbody``;
|
|
16785
17237
|
var TableBody = ({ children, ...props }) => {
|
|
16786
17238
|
return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(StyledTableBody, { ...props, children }) });
|
|
16787
17239
|
};
|
|
16788
17240
|
|
|
16789
17241
|
// src/components/Table/TableCell.tsx
|
|
16790
17242
|
var import_react94 = require("react");
|
|
16791
|
-
var
|
|
17243
|
+
var import_styled_components116 = __toESM(require("styled-components"));
|
|
16792
17244
|
var import_jsx_runtime313 = require("react/jsx-runtime");
|
|
16793
|
-
var sharedStyles =
|
|
17245
|
+
var sharedStyles = import_styled_components116.css`
|
|
16794
17246
|
color: var(--wui-color-text);
|
|
16795
17247
|
padding: var(--wui-space-02);
|
|
16796
17248
|
text-align: left;
|
|
16797
17249
|
`;
|
|
16798
|
-
var StyledTh =
|
|
17250
|
+
var StyledTh = import_styled_components116.default.th`
|
|
16799
17251
|
${sharedStyles}
|
|
16800
17252
|
font-size: var(--wui-typography-body-4-size);
|
|
16801
17253
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
16802
17254
|
line-height: var(--wui-typography-body-4-line-height);
|
|
16803
17255
|
`;
|
|
16804
|
-
var StyledTd =
|
|
17256
|
+
var StyledTd = import_styled_components116.default.td`
|
|
16805
17257
|
${sharedStyles}
|
|
16806
17258
|
font-size: var(--wui-typography-body-2-size);
|
|
16807
17259
|
font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -16817,26 +17269,26 @@ var TableCell = ({ children, ...props }) => {
|
|
|
16817
17269
|
|
|
16818
17270
|
// src/components/Table/TableFoot.tsx
|
|
16819
17271
|
var import_react95 = require("react");
|
|
16820
|
-
var
|
|
17272
|
+
var import_styled_components117 = __toESM(require("styled-components"));
|
|
16821
17273
|
var import_jsx_runtime314 = require("react/jsx-runtime");
|
|
16822
|
-
var StyledTableFoot =
|
|
17274
|
+
var StyledTableFoot = import_styled_components117.default.tfoot``;
|
|
16823
17275
|
var TableFoot = ({ children, ...props }) => {
|
|
16824
17276
|
return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(StyledTableFoot, { ...props, children }) });
|
|
16825
17277
|
};
|
|
16826
17278
|
|
|
16827
17279
|
// src/components/Table/TableHead.tsx
|
|
16828
17280
|
var import_react96 = require("react");
|
|
16829
|
-
var
|
|
17281
|
+
var import_styled_components118 = __toESM(require("styled-components"));
|
|
16830
17282
|
var import_jsx_runtime315 = require("react/jsx-runtime");
|
|
16831
|
-
var StyledThead =
|
|
17283
|
+
var StyledThead = import_styled_components118.default.thead``;
|
|
16832
17284
|
var TableHead = ({ children, ...props }) => {
|
|
16833
17285
|
return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(StyledThead, { ...props, children }) });
|
|
16834
17286
|
};
|
|
16835
17287
|
|
|
16836
17288
|
// src/components/Table/TableRow.tsx
|
|
16837
|
-
var
|
|
17289
|
+
var import_styled_components119 = __toESM(require("styled-components"));
|
|
16838
17290
|
var import_jsx_runtime316 = require("react/jsx-runtime");
|
|
16839
|
-
var StyledTableRow =
|
|
17291
|
+
var StyledTableRow = import_styled_components119.default.tr``;
|
|
16840
17292
|
var TableRow = ({ children, ...props }) => {
|
|
16841
17293
|
return /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(StyledTableRow, { ...props, children });
|
|
16842
17294
|
};
|
|
@@ -16901,14 +17353,14 @@ TabsContent.displayName = "TabsContent_UI";
|
|
|
16901
17353
|
|
|
16902
17354
|
// src/components/Tabs/TabsList.tsx
|
|
16903
17355
|
var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
16904
|
-
var
|
|
17356
|
+
var import_styled_components121 = __toESM(require("styled-components"));
|
|
16905
17357
|
|
|
16906
17358
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
16907
17359
|
var import_type_guards67 = require("@wistia/type-guards");
|
|
16908
17360
|
|
|
16909
17361
|
// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
|
|
16910
|
-
var
|
|
16911
|
-
var TabsSelectedItemIndicatorDiv = (0,
|
|
17362
|
+
var import_styled_components120 = __toESM(require("styled-components"));
|
|
17363
|
+
var TabsSelectedItemIndicatorDiv = (0, import_styled_components120.default)(SelectedItemIndicatorDiv)`
|
|
16912
17364
|
&:has(~ button[role='tab']:focus-visible) {
|
|
16913
17365
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
16914
17366
|
}
|
|
@@ -16933,7 +17385,7 @@ var SelectedTabIndicator = () => {
|
|
|
16933
17385
|
|
|
16934
17386
|
// src/components/Tabs/TabsList.tsx
|
|
16935
17387
|
var import_jsx_runtime320 = require("react/jsx-runtime");
|
|
16936
|
-
var StyledRadixTabsList = (0,
|
|
17388
|
+
var StyledRadixTabsList = (0, import_styled_components121.default)(import_react_tabs3.List)`
|
|
16937
17389
|
${segmentedControlStyles}
|
|
16938
17390
|
`;
|
|
16939
17391
|
var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
@@ -16956,9 +17408,9 @@ var import_react99 = require("react");
|
|
|
16956
17408
|
var import_type_guards68 = require("@wistia/type-guards");
|
|
16957
17409
|
|
|
16958
17410
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
16959
|
-
var
|
|
17411
|
+
var import_styled_components122 = __toESM(require("styled-components"));
|
|
16960
17412
|
var import_react_tabs4 = require("@radix-ui/react-tabs");
|
|
16961
|
-
var StyledRadixTabsTrigger = (0,
|
|
17413
|
+
var StyledRadixTabsTrigger = (0, import_styled_components122.default)(import_react_tabs4.Trigger)`
|
|
16962
17414
|
${segmentedControlItemStyles}
|
|
16963
17415
|
|
|
16964
17416
|
&:focus-visible {
|
|
@@ -17019,10 +17471,10 @@ var TabsTrigger = (0, import_react99.forwardRef)(
|
|
|
17019
17471
|
TabsTrigger.displayName = "TabsTrigger_UI";
|
|
17020
17472
|
|
|
17021
17473
|
// src/components/Thumbnail/ThumbnailBadge.tsx
|
|
17022
|
-
var
|
|
17474
|
+
var import_styled_components123 = __toESM(require("styled-components"));
|
|
17023
17475
|
var import_type_guards69 = require("@wistia/type-guards");
|
|
17024
17476
|
var import_jsx_runtime322 = require("react/jsx-runtime");
|
|
17025
|
-
var StyledThumbnailBadge =
|
|
17477
|
+
var StyledThumbnailBadge = import_styled_components123.default.div`
|
|
17026
17478
|
align-items: center;
|
|
17027
17479
|
background-color: rgb(0 0 0 / 50%);
|
|
17028
17480
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -17057,14 +17509,14 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
|
|
|
17057
17509
|
|
|
17058
17510
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
17059
17511
|
var import_react100 = require("react");
|
|
17060
|
-
var
|
|
17512
|
+
var import_styled_components126 = __toESM(require("styled-components"));
|
|
17061
17513
|
var import_type_guards72 = require("@wistia/type-guards");
|
|
17062
17514
|
|
|
17063
17515
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
17064
17516
|
var import_type_guards70 = require("@wistia/type-guards");
|
|
17065
|
-
var
|
|
17517
|
+
var import_styled_components124 = require("styled-components");
|
|
17066
17518
|
var gradients = {
|
|
17067
|
-
defaultDarkOne:
|
|
17519
|
+
defaultDarkOne: import_styled_components124.css`
|
|
17068
17520
|
background-color: #222d66;
|
|
17069
17521
|
background-image:
|
|
17070
17522
|
radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
|
|
@@ -17072,7 +17524,7 @@ var gradients = {
|
|
|
17072
17524
|
radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
|
|
17073
17525
|
radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
|
|
17074
17526
|
`,
|
|
17075
|
-
defaultDarkTwo:
|
|
17527
|
+
defaultDarkTwo: import_styled_components124.css`
|
|
17076
17528
|
background-color: #222d66;
|
|
17077
17529
|
background-image:
|
|
17078
17530
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
|
|
@@ -17080,7 +17532,7 @@ var gradients = {
|
|
|
17080
17532
|
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
17081
17533
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
17082
17534
|
`,
|
|
17083
|
-
defaultLightOne:
|
|
17535
|
+
defaultLightOne: import_styled_components124.css`
|
|
17084
17536
|
background-color: #ccd5ff;
|
|
17085
17537
|
background-image:
|
|
17086
17538
|
radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
|
|
@@ -17088,13 +17540,13 @@ var gradients = {
|
|
|
17088
17540
|
radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
|
|
17089
17541
|
radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
|
|
17090
17542
|
`,
|
|
17091
|
-
defaultLightTwo:
|
|
17543
|
+
defaultLightTwo: import_styled_components124.css`
|
|
17092
17544
|
background-color: #ccd5ff;
|
|
17093
17545
|
background-image:
|
|
17094
17546
|
radial-gradient(ellipse at top, #ccd5ff, transparent),
|
|
17095
17547
|
radial-gradient(ellipse at bottom, #6b84ff, transparent);
|
|
17096
17548
|
`,
|
|
17097
|
-
defaultMidOne:
|
|
17549
|
+
defaultMidOne: import_styled_components124.css`
|
|
17098
17550
|
background-color: #6b84ff;
|
|
17099
17551
|
background-image:
|
|
17100
17552
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
|
|
@@ -17102,13 +17554,13 @@ var gradients = {
|
|
|
17102
17554
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
|
|
17103
17555
|
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
|
|
17104
17556
|
`,
|
|
17105
|
-
defaultMidTwo:
|
|
17557
|
+
defaultMidTwo: import_styled_components124.css`
|
|
17106
17558
|
background-color: #6b84ff;
|
|
17107
17559
|
background-image:
|
|
17108
17560
|
radial-gradient(ellipse at top, #2949e5, transparent),
|
|
17109
17561
|
radial-gradient(ellipse at bottom, #ccd5ff, transparent);
|
|
17110
17562
|
`,
|
|
17111
|
-
green:
|
|
17563
|
+
green: import_styled_components124.css`
|
|
17112
17564
|
background-color: #fafffa;
|
|
17113
17565
|
background-image:
|
|
17114
17566
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -17116,7 +17568,7 @@ var gradients = {
|
|
|
17116
17568
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
17117
17569
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
17118
17570
|
`,
|
|
17119
|
-
greenWithPop:
|
|
17571
|
+
greenWithPop: import_styled_components124.css`
|
|
17120
17572
|
background-color: #fafffa;
|
|
17121
17573
|
background-image:
|
|
17122
17574
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -17124,7 +17576,7 @@ var gradients = {
|
|
|
17124
17576
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
17125
17577
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
17126
17578
|
`,
|
|
17127
|
-
pink:
|
|
17579
|
+
pink: import_styled_components124.css`
|
|
17128
17580
|
background-color: #fffff0;
|
|
17129
17581
|
background-image:
|
|
17130
17582
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
|
|
@@ -17132,7 +17584,7 @@ var gradients = {
|
|
|
17132
17584
|
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
17133
17585
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
|
|
17134
17586
|
`,
|
|
17135
|
-
pinkWithPop:
|
|
17587
|
+
pinkWithPop: import_styled_components124.css`
|
|
17136
17588
|
background-color: #fffff0;
|
|
17137
17589
|
background-image:
|
|
17138
17590
|
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
@@ -17140,7 +17592,7 @@ var gradients = {
|
|
|
17140
17592
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
|
|
17141
17593
|
radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
|
|
17142
17594
|
`,
|
|
17143
|
-
playfulGradientOne:
|
|
17595
|
+
playfulGradientOne: import_styled_components124.css`
|
|
17144
17596
|
background-color: #f7f8ff;
|
|
17145
17597
|
background-image:
|
|
17146
17598
|
radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
|
|
@@ -17148,7 +17600,7 @@ var gradients = {
|
|
|
17148
17600
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
|
|
17149
17601
|
radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
|
|
17150
17602
|
`,
|
|
17151
|
-
playfulGradientTwo:
|
|
17603
|
+
playfulGradientTwo: import_styled_components124.css`
|
|
17152
17604
|
background-color: #f7f8ff;
|
|
17153
17605
|
background-image:
|
|
17154
17606
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
|
|
@@ -17156,13 +17608,13 @@ var gradients = {
|
|
|
17156
17608
|
radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
|
|
17157
17609
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
17158
17610
|
`,
|
|
17159
|
-
purple:
|
|
17611
|
+
purple: import_styled_components124.css`
|
|
17160
17612
|
background-color: #f2caff;
|
|
17161
17613
|
background-image:
|
|
17162
17614
|
radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
|
|
17163
17615
|
radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
|
|
17164
17616
|
`,
|
|
17165
|
-
purpleWithPop:
|
|
17617
|
+
purpleWithPop: import_styled_components124.css`
|
|
17166
17618
|
background-color: #f2caff;
|
|
17167
17619
|
background-image:
|
|
17168
17620
|
radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
|
|
@@ -17170,7 +17622,7 @@ var gradients = {
|
|
|
17170
17622
|
radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
|
|
17171
17623
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
17172
17624
|
`,
|
|
17173
|
-
yellow:
|
|
17625
|
+
yellow: import_styled_components124.css`
|
|
17174
17626
|
background-color: #fffff0;
|
|
17175
17627
|
background-image:
|
|
17176
17628
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -17178,7 +17630,7 @@ var gradients = {
|
|
|
17178
17630
|
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
17179
17631
|
radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
|
|
17180
17632
|
`,
|
|
17181
|
-
yellowWithPop:
|
|
17633
|
+
yellowWithPop: import_styled_components124.css`
|
|
17182
17634
|
background-color: #fffff0;
|
|
17183
17635
|
background-image:
|
|
17184
17636
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -17193,10 +17645,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
|
|
|
17193
17645
|
};
|
|
17194
17646
|
|
|
17195
17647
|
// src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
|
|
17196
|
-
var
|
|
17648
|
+
var import_styled_components125 = __toESM(require("styled-components"));
|
|
17197
17649
|
var import_type_guards71 = require("@wistia/type-guards");
|
|
17198
17650
|
var import_jsx_runtime323 = require("react/jsx-runtime");
|
|
17199
|
-
var ScrubLine =
|
|
17651
|
+
var ScrubLine = import_styled_components125.default.div`
|
|
17200
17652
|
position: absolute;
|
|
17201
17653
|
top: 0;
|
|
17202
17654
|
height: 100%;
|
|
@@ -17329,12 +17781,12 @@ var ThumbnailStoryboardViewer = ({
|
|
|
17329
17781
|
|
|
17330
17782
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
17331
17783
|
var import_jsx_runtime324 = require("react/jsx-runtime");
|
|
17332
|
-
var WideThumbnailImage =
|
|
17784
|
+
var WideThumbnailImage = import_styled_components126.default.img`
|
|
17333
17785
|
height: 100%;
|
|
17334
17786
|
object-fit: cover;
|
|
17335
17787
|
width: 100%;
|
|
17336
17788
|
`;
|
|
17337
|
-
var SquareThumbnailImage =
|
|
17789
|
+
var SquareThumbnailImage = import_styled_components126.default.img`
|
|
17338
17790
|
backdrop-filter: blur(8px);
|
|
17339
17791
|
object-fit: contain;
|
|
17340
17792
|
width: 100%;
|
|
@@ -17359,7 +17811,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
17359
17811
|
}
|
|
17360
17812
|
);
|
|
17361
17813
|
};
|
|
17362
|
-
var StyledThumbnail =
|
|
17814
|
+
var StyledThumbnail = import_styled_components126.default.div`
|
|
17363
17815
|
background-image: ${({ $backgroundUrl }) => (0, import_type_guards72.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
|
|
17364
17816
|
${({ $backgroundUrl, $gradientBackground }) => (
|
|
17365
17817
|
// if we don't have $backgroundUrl show a gradient
|
|
@@ -17508,13 +17960,13 @@ Thumbnail.displayName = "Thumbnail_UI";
|
|
|
17508
17960
|
|
|
17509
17961
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
17510
17962
|
var import_react101 = __toESM(require("react"));
|
|
17511
|
-
var
|
|
17963
|
+
var import_styled_components127 = __toESM(require("styled-components"));
|
|
17512
17964
|
var import_type_guards73 = require("@wistia/type-guards");
|
|
17513
17965
|
var import_jsx_runtime325 = (
|
|
17514
17966
|
// ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
|
|
17515
17967
|
require("react/jsx-runtime")
|
|
17516
17968
|
);
|
|
17517
|
-
var StyledThumbnailCollage =
|
|
17969
|
+
var StyledThumbnailCollage = import_styled_components127.default.div`
|
|
17518
17970
|
display: grid;
|
|
17519
17971
|
gap: var(--wui-space-01);
|
|
17520
17972
|
width: 100%;
|
|
@@ -17616,7 +18068,7 @@ var ThumbnailCollage = ({
|
|
|
17616
18068
|
};
|
|
17617
18069
|
|
|
17618
18070
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
17619
|
-
var
|
|
18071
|
+
var import_styled_components128 = __toESM(require("styled-components"));
|
|
17620
18072
|
var import_type_guards74 = require("@wistia/type-guards");
|
|
17621
18073
|
var import_jsx_runtime326 = require("react/jsx-runtime");
|
|
17622
18074
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
@@ -17658,7 +18110,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
17658
18110
|
}
|
|
17659
18111
|
return "0 0 144 31.47";
|
|
17660
18112
|
};
|
|
17661
|
-
var WistiaLogoComponent =
|
|
18113
|
+
var WistiaLogoComponent = import_styled_components128.default.svg`
|
|
17662
18114
|
height: ${({ height }) => `${height}px`};
|
|
17663
18115
|
|
|
17664
18116
|
/* ensure it will always fit on mobile */
|
|
@@ -17674,12 +18126,12 @@ var WistiaLogoComponent = import_styled_components127.default.svg`
|
|
|
17674
18126
|
${({ $opticallyCentered, $iconOnly }) => {
|
|
17675
18127
|
if ($opticallyCentered) {
|
|
17676
18128
|
if ($iconOnly) {
|
|
17677
|
-
return
|
|
18129
|
+
return import_styled_components128.css`
|
|
17678
18130
|
aspect-ratio: 1;
|
|
17679
18131
|
padding: 11.85% 3.12% 13.91%;
|
|
17680
18132
|
`;
|
|
17681
18133
|
}
|
|
17682
|
-
return
|
|
18134
|
+
return import_styled_components128.css`
|
|
17683
18135
|
aspect-ratio: 127 / 32;
|
|
17684
18136
|
`;
|
|
17685
18137
|
}
|