@wistia/ui 0.14.37 → 0.14.39
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 +1007 -596
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +23 -6
- package/dist/index.d.ts +23 -6
- package/dist/index.mjs +723 -312
- 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.39
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -200,7 +200,7 @@ var import_react_tooltip = require("@radix-ui/react-tooltip");
|
|
|
200
200
|
var import_react3 = require("react");
|
|
201
201
|
|
|
202
202
|
// src/css/GlobalStyle.tsx
|
|
203
|
-
var
|
|
203
|
+
var import_styled_components13 = require("styled-components");
|
|
204
204
|
|
|
205
205
|
// src/css/globalStyleAdjustmentsCss.tsx
|
|
206
206
|
var import_styled_components = require("styled-components");
|
|
@@ -337,7 +337,7 @@ var globalStyleAdjustmentsCss = import_styled_components.css`
|
|
|
337
337
|
`;
|
|
338
338
|
|
|
339
339
|
// src/css/designTokens/index.tsx
|
|
340
|
-
var
|
|
340
|
+
var import_styled_components11 = require("styled-components");
|
|
341
341
|
|
|
342
342
|
// src/css/designTokens/colorGlobal.tsx
|
|
343
343
|
var import_styled_components2 = require("styled-components");
|
|
@@ -1005,38 +1005,535 @@ var darkGlobalTokens = import_styled_components2.css`
|
|
|
1005
1005
|
`;
|
|
1006
1006
|
|
|
1007
1007
|
// src/css/designTokens/colorAlias.tsx
|
|
1008
|
+
var import_styled_components4 = require("styled-components");
|
|
1009
|
+
|
|
1010
|
+
// src/css/designTokens/colorSchemes.tsx
|
|
1008
1011
|
var import_styled_components3 = require("styled-components");
|
|
1009
|
-
var
|
|
1010
|
-
--wui-color-
|
|
1012
|
+
var defaultColorScheme = import_styled_components3.css`
|
|
1013
|
+
--wui-color-base-1: var(--wui-gray-1);
|
|
1014
|
+
--wui-color-base-2: var(--wui-gray-2);
|
|
1015
|
+
--wui-color-base-3: var(--wui-gray-3);
|
|
1016
|
+
--wui-color-base-4: var(--wui-gray-4);
|
|
1017
|
+
--wui-color-base-5: var(--wui-gray-5);
|
|
1018
|
+
--wui-color-base-6: var(--wui-gray-6);
|
|
1019
|
+
--wui-color-base-7: var(--wui-gray-7);
|
|
1020
|
+
--wui-color-base-8: var(--wui-gray-8);
|
|
1021
|
+
--wui-color-base-9: var(--wui-gray-9);
|
|
1022
|
+
--wui-color-base-10: var(--wui-gray-10);
|
|
1023
|
+
--wui-color-base-11: var(--wui-gray-11);
|
|
1024
|
+
--wui-color-base-12: var(--wui-gray-12);
|
|
1025
|
+
--wui-color-base-contrast: var(--wui-gray-contrast);
|
|
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
|
+
--wui-color-surface-token: var(--wui-gray-1);
|
|
1040
|
+
--wui-color-text-button-token: var(--wui-gray-12);
|
|
1041
|
+
`;
|
|
1042
|
+
var blueColorScheme = import_styled_components3.css`
|
|
1043
|
+
--wui-color-base-1: var(--wui-blue-1);
|
|
1044
|
+
--wui-color-base-2: var(--wui-blue-2);
|
|
1045
|
+
--wui-color-base-3: var(--wui-blue-3);
|
|
1046
|
+
--wui-color-base-4: var(--wui-blue-4);
|
|
1047
|
+
--wui-color-base-5: var(--wui-blue-5);
|
|
1048
|
+
--wui-color-base-6: var(--wui-blue-6);
|
|
1049
|
+
--wui-color-base-7: var(--wui-blue-7);
|
|
1050
|
+
--wui-color-base-8: var(--wui-blue-8);
|
|
1051
|
+
--wui-color-base-9: var(--wui-blue-9);
|
|
1052
|
+
--wui-color-base-10: var(--wui-blue-10);
|
|
1053
|
+
--wui-color-base-11: var(--wui-blue-11);
|
|
1054
|
+
--wui-color-base-12: var(--wui-blue-12);
|
|
1055
|
+
--wui-color-base-contrast: var(--wui-blue-contrast);
|
|
1056
|
+
--wui-color-accent-1: var(--wui-blue-1);
|
|
1057
|
+
--wui-color-accent-2: var(--wui-blue-2);
|
|
1058
|
+
--wui-color-accent-3: var(--wui-blue-3);
|
|
1059
|
+
--wui-color-accent-4: var(--wui-blue-4);
|
|
1060
|
+
--wui-color-accent-5: var(--wui-blue-5);
|
|
1061
|
+
--wui-color-accent-6: var(--wui-blue-6);
|
|
1062
|
+
--wui-color-accent-7: var(--wui-blue-7);
|
|
1063
|
+
--wui-color-accent-8: var(--wui-blue-8);
|
|
1064
|
+
--wui-color-accent-9: var(--wui-blue-9);
|
|
1065
|
+
--wui-color-accent-10: var(--wui-blue-10);
|
|
1066
|
+
--wui-color-accent-11: var(--wui-blue-11);
|
|
1067
|
+
--wui-color-accent-12: var(--wui-blue-12);
|
|
1068
|
+
--wui-color-accent-contrast: var(--wui-blue-contrast);
|
|
1069
|
+
--wui-color-surface-token: var(--wui-blue-2);
|
|
1070
|
+
--wui-color-text-button-token: var(--wui-blue-12);
|
|
1071
|
+
`;
|
|
1072
|
+
var greenColorScheme = import_styled_components3.css`
|
|
1073
|
+
--wui-color-base-1: var(--wui-green-1);
|
|
1074
|
+
--wui-color-base-2: var(--wui-green-2);
|
|
1075
|
+
--wui-color-base-3: var(--wui-green-3);
|
|
1076
|
+
--wui-color-base-4: var(--wui-green-4);
|
|
1077
|
+
--wui-color-base-5: var(--wui-green-5);
|
|
1078
|
+
--wui-color-base-6: var(--wui-green-6);
|
|
1079
|
+
--wui-color-base-7: var(--wui-green-7);
|
|
1080
|
+
--wui-color-base-8: var(--wui-green-8);
|
|
1081
|
+
--wui-color-base-9: var(--wui-green-9);
|
|
1082
|
+
--wui-color-base-10: var(--wui-green-10);
|
|
1083
|
+
--wui-color-base-11: var(--wui-green-11);
|
|
1084
|
+
--wui-color-base-12: var(--wui-green-12);
|
|
1085
|
+
--wui-color-base-contrast: var(--wui-green-contrast);
|
|
1086
|
+
--wui-color-accent-1: var(--wui-green-1);
|
|
1087
|
+
--wui-color-accent-2: var(--wui-green-2);
|
|
1088
|
+
--wui-color-accent-3: var(--wui-green-3);
|
|
1089
|
+
--wui-color-accent-4: var(--wui-green-4);
|
|
1090
|
+
--wui-color-accent-5: var(--wui-green-5);
|
|
1091
|
+
--wui-color-accent-6: var(--wui-green-6);
|
|
1092
|
+
--wui-color-accent-7: var(--wui-green-7);
|
|
1093
|
+
--wui-color-accent-8: var(--wui-green-8);
|
|
1094
|
+
--wui-color-accent-9: var(--wui-green-9);
|
|
1095
|
+
--wui-color-accent-10: var(--wui-green-10);
|
|
1096
|
+
--wui-color-accent-11: var(--wui-green-11);
|
|
1097
|
+
--wui-color-accent-12: var(--wui-green-12);
|
|
1098
|
+
--wui-color-accent-contrast: var(--wui-green-contrast);
|
|
1099
|
+
--wui-color-surface-token: var(--wui-green-2);
|
|
1100
|
+
--wui-color-text-button-token: var(--wui-green-11);
|
|
1101
|
+
`;
|
|
1102
|
+
var orangeColorScheme = import_styled_components3.css`
|
|
1103
|
+
--wui-color-base-1: var(--wui-orange-1);
|
|
1104
|
+
--wui-color-base-2: var(--wui-orange-2);
|
|
1105
|
+
--wui-color-base-3: var(--wui-orange-3);
|
|
1106
|
+
--wui-color-base-4: var(--wui-orange-4);
|
|
1107
|
+
--wui-color-base-5: var(--wui-orange-5);
|
|
1108
|
+
--wui-color-base-6: var(--wui-orange-6);
|
|
1109
|
+
--wui-color-base-7: var(--wui-orange-7);
|
|
1110
|
+
--wui-color-base-8: var(--wui-orange-8);
|
|
1111
|
+
--wui-color-base-9: var(--wui-orange-9);
|
|
1112
|
+
--wui-color-base-10: var(--wui-orange-10);
|
|
1113
|
+
--wui-color-base-11: var(--wui-orange-11);
|
|
1114
|
+
--wui-color-base-12: var(--wui-orange-12);
|
|
1115
|
+
--wui-color-base-contrast: var(--wui-orange-contrast);
|
|
1116
|
+
--wui-color-accent-1: var(--wui-orange-1);
|
|
1117
|
+
--wui-color-accent-2: var(--wui-orange-2);
|
|
1118
|
+
--wui-color-accent-3: var(--wui-orange-3);
|
|
1119
|
+
--wui-color-accent-4: var(--wui-orange-4);
|
|
1120
|
+
--wui-color-accent-5: var(--wui-orange-5);
|
|
1121
|
+
--wui-color-accent-6: var(--wui-orange-6);
|
|
1122
|
+
--wui-color-accent-7: var(--wui-orange-7);
|
|
1123
|
+
--wui-color-accent-8: var(--wui-orange-8);
|
|
1124
|
+
--wui-color-accent-9: var(--wui-orange-9);
|
|
1125
|
+
--wui-color-accent-10: var(--wui-orange-10);
|
|
1126
|
+
--wui-color-accent-11: var(--wui-orange-11);
|
|
1127
|
+
--wui-color-accent-12: var(--wui-orange-12);
|
|
1128
|
+
--wui-color-accent-contrast: var(--wui-orange-contrast);
|
|
1129
|
+
--wui-color-surface-token: var(--wui-orange-2);
|
|
1130
|
+
--wui-color-text-button-token: var(--wui-orange-11);
|
|
1131
|
+
`;
|
|
1132
|
+
var pinkColorScheme = import_styled_components3.css`
|
|
1133
|
+
--wui-color-base-1: var(--wui-pink-1);
|
|
1134
|
+
--wui-color-base-2: var(--wui-pink-2);
|
|
1135
|
+
--wui-color-base-3: var(--wui-pink-3);
|
|
1136
|
+
--wui-color-base-4: var(--wui-pink-4);
|
|
1137
|
+
--wui-color-base-5: var(--wui-pink-5);
|
|
1138
|
+
--wui-color-base-6: var(--wui-pink-6);
|
|
1139
|
+
--wui-color-base-7: var(--wui-pink-7);
|
|
1140
|
+
--wui-color-base-8: var(--wui-pink-8);
|
|
1141
|
+
--wui-color-base-9: var(--wui-pink-9);
|
|
1142
|
+
--wui-color-base-10: var(--wui-pink-10);
|
|
1143
|
+
--wui-color-base-11: var(--wui-pink-11);
|
|
1144
|
+
--wui-color-base-12: var(--wui-pink-12);
|
|
1145
|
+
--wui-color-base-contrast: var(--wui-pink-contrast);
|
|
1146
|
+
--wui-color-accent-1: var(--wui-pink-1);
|
|
1147
|
+
--wui-color-accent-2: var(--wui-pink-2);
|
|
1148
|
+
--wui-color-accent-3: var(--wui-pink-3);
|
|
1149
|
+
--wui-color-accent-4: var(--wui-pink-4);
|
|
1150
|
+
--wui-color-accent-5: var(--wui-pink-5);
|
|
1151
|
+
--wui-color-accent-6: var(--wui-pink-6);
|
|
1152
|
+
--wui-color-accent-7: var(--wui-pink-7);
|
|
1153
|
+
--wui-color-accent-8: var(--wui-pink-8);
|
|
1154
|
+
--wui-color-accent-9: var(--wui-pink-9);
|
|
1155
|
+
--wui-color-accent-10: var(--wui-pink-10);
|
|
1156
|
+
--wui-color-accent-11: var(--wui-pink-11);
|
|
1157
|
+
--wui-color-accent-12: var(--wui-pink-12);
|
|
1158
|
+
--wui-color-accent-contrast: var(--wui-pink-contrast);
|
|
1159
|
+
--wui-color-surface-token: var(--wui-pink-2);
|
|
1160
|
+
--wui-color-text-button-token: var(--wui-pink-11);
|
|
1161
|
+
`;
|
|
1162
|
+
var purpleColorScheme = import_styled_components3.css`
|
|
1163
|
+
--wui-color-base-1: var(--wui-purple-1);
|
|
1164
|
+
--wui-color-base-2: var(--wui-purple-2);
|
|
1165
|
+
--wui-color-base-3: var(--wui-purple-3);
|
|
1166
|
+
--wui-color-base-4: var(--wui-purple-4);
|
|
1167
|
+
--wui-color-base-5: var(--wui-purple-5);
|
|
1168
|
+
--wui-color-base-6: var(--wui-purple-6);
|
|
1169
|
+
--wui-color-base-7: var(--wui-purple-7);
|
|
1170
|
+
--wui-color-base-8: var(--wui-purple-8);
|
|
1171
|
+
--wui-color-base-9: var(--wui-purple-9);
|
|
1172
|
+
--wui-color-base-10: var(--wui-purple-10);
|
|
1173
|
+
--wui-color-base-11: var(--wui-purple-11);
|
|
1174
|
+
--wui-color-base-12: var(--wui-purple-12);
|
|
1175
|
+
--wui-color-base-contrast: var(--wui-purple-contrast);
|
|
1176
|
+
--wui-color-accent-1: var(--wui-purple-1);
|
|
1177
|
+
--wui-color-accent-2: var(--wui-purple-2);
|
|
1178
|
+
--wui-color-accent-3: var(--wui-purple-3);
|
|
1179
|
+
--wui-color-accent-4: var(--wui-purple-4);
|
|
1180
|
+
--wui-color-accent-5: var(--wui-purple-5);
|
|
1181
|
+
--wui-color-accent-6: var(--wui-purple-6);
|
|
1182
|
+
--wui-color-accent-7: var(--wui-purple-7);
|
|
1183
|
+
--wui-color-accent-8: var(--wui-purple-8);
|
|
1184
|
+
--wui-color-accent-9: var(--wui-purple-9);
|
|
1185
|
+
--wui-color-accent-10: var(--wui-purple-10);
|
|
1186
|
+
--wui-color-accent-11: var(--wui-purple-11);
|
|
1187
|
+
--wui-color-accent-12: var(--wui-purple-12);
|
|
1188
|
+
--wui-color-accent-contrast: var(--wui-purple-contrast);
|
|
1189
|
+
--wui-color-surface-token: var(--wui-purple-2);
|
|
1190
|
+
--wui-color-text-button-token: var(--wui-purple-11);
|
|
1191
|
+
`;
|
|
1192
|
+
var redColorScheme = import_styled_components3.css`
|
|
1193
|
+
--wui-color-base-1: var(--wui-red-1);
|
|
1194
|
+
--wui-color-base-2: var(--wui-red-2);
|
|
1195
|
+
--wui-color-base-3: var(--wui-red-3);
|
|
1196
|
+
--wui-color-base-4: var(--wui-red-4);
|
|
1197
|
+
--wui-color-base-5: var(--wui-red-5);
|
|
1198
|
+
--wui-color-base-6: var(--wui-red-6);
|
|
1199
|
+
--wui-color-base-7: var(--wui-red-7);
|
|
1200
|
+
--wui-color-base-8: var(--wui-red-8);
|
|
1201
|
+
--wui-color-base-9: var(--wui-red-9);
|
|
1202
|
+
--wui-color-base-10: var(--wui-red-10);
|
|
1203
|
+
--wui-color-base-11: var(--wui-red-11);
|
|
1204
|
+
--wui-color-base-12: var(--wui-red-12);
|
|
1205
|
+
--wui-color-base-contrast: var(--wui-red-contrast);
|
|
1206
|
+
--wui-color-accent-1: var(--wui-red-1);
|
|
1207
|
+
--wui-color-accent-2: var(--wui-red-2);
|
|
1208
|
+
--wui-color-accent-3: var(--wui-red-3);
|
|
1209
|
+
--wui-color-accent-4: var(--wui-red-4);
|
|
1210
|
+
--wui-color-accent-5: var(--wui-red-5);
|
|
1211
|
+
--wui-color-accent-6: var(--wui-red-6);
|
|
1212
|
+
--wui-color-accent-7: var(--wui-red-7);
|
|
1213
|
+
--wui-color-accent-8: var(--wui-red-8);
|
|
1214
|
+
--wui-color-accent-9: var(--wui-red-9);
|
|
1215
|
+
--wui-color-accent-10: var(--wui-red-10);
|
|
1216
|
+
--wui-color-accent-11: var(--wui-red-11);
|
|
1217
|
+
--wui-color-accent-12: var(--wui-red-12);
|
|
1218
|
+
--wui-color-accent-contrast: var(--wui-red-contrast);
|
|
1219
|
+
--wui-color-surface-token: var(--wui-red-2);
|
|
1220
|
+
--wui-color-text-button-token: var(--wui-red-11);
|
|
1221
|
+
`;
|
|
1222
|
+
var yellowColorScheme = import_styled_components3.css`
|
|
1223
|
+
--wui-color-base-1: var(--wui-yellow-1);
|
|
1224
|
+
--wui-color-base-2: var(--wui-yellow-2);
|
|
1225
|
+
--wui-color-base-3: var(--wui-yellow-3);
|
|
1226
|
+
--wui-color-base-4: var(--wui-yellow-4);
|
|
1227
|
+
--wui-color-base-5: var(--wui-yellow-5);
|
|
1228
|
+
--wui-color-base-6: var(--wui-yellow-6);
|
|
1229
|
+
--wui-color-base-7: var(--wui-yellow-7);
|
|
1230
|
+
--wui-color-base-8: var(--wui-yellow-8);
|
|
1231
|
+
--wui-color-base-9: var(--wui-yellow-9);
|
|
1232
|
+
--wui-color-base-10: var(--wui-yellow-10);
|
|
1233
|
+
--wui-color-base-11: var(--wui-yellow-11);
|
|
1234
|
+
--wui-color-base-12: var(--wui-yellow-12);
|
|
1235
|
+
--wui-color-base-contrast: var(--wui-yellow-contrast);
|
|
1236
|
+
--wui-color-accent-1: var(--wui-yellow-1);
|
|
1237
|
+
--wui-color-accent-2: var(--wui-yellow-2);
|
|
1238
|
+
--wui-color-accent-3: var(--wui-yellow-3);
|
|
1239
|
+
--wui-color-accent-4: var(--wui-yellow-4);
|
|
1240
|
+
--wui-color-accent-5: var(--wui-yellow-5);
|
|
1241
|
+
--wui-color-accent-6: var(--wui-yellow-6);
|
|
1242
|
+
--wui-color-accent-7: var(--wui-yellow-7);
|
|
1243
|
+
--wui-color-accent-8: var(--wui-yellow-8);
|
|
1244
|
+
--wui-color-accent-9: var(--wui-yellow-9);
|
|
1245
|
+
--wui-color-accent-10: var(--wui-yellow-10);
|
|
1246
|
+
--wui-color-accent-11: var(--wui-yellow-11);
|
|
1247
|
+
--wui-color-accent-12: var(--wui-yellow-12);
|
|
1248
|
+
--wui-color-accent-contrast: var(--wui-yellow-contrast);
|
|
1249
|
+
--wui-color-surface-token: var(--wui-yellow-2);
|
|
1250
|
+
--wui-color-text-button-token: var(--wui-yellow-11);
|
|
1251
|
+
`;
|
|
1252
|
+
var errorColorScheme = import_styled_components3.css`
|
|
1253
|
+
--wui-color-base-1: var(--wui-error-1);
|
|
1254
|
+
--wui-color-base-2: var(--wui-error-2);
|
|
1255
|
+
--wui-color-base-3: var(--wui-error-3);
|
|
1256
|
+
--wui-color-base-4: var(--wui-error-4);
|
|
1257
|
+
--wui-color-base-5: var(--wui-error-5);
|
|
1258
|
+
--wui-color-base-6: var(--wui-error-6);
|
|
1259
|
+
--wui-color-base-7: var(--wui-error-7);
|
|
1260
|
+
--wui-color-base-8: var(--wui-error-8);
|
|
1261
|
+
--wui-color-base-9: var(--wui-error-9);
|
|
1262
|
+
--wui-color-base-10: var(--wui-error-10);
|
|
1263
|
+
--wui-color-base-11: var(--wui-error-11);
|
|
1264
|
+
--wui-color-base-12: var(--wui-error-12);
|
|
1265
|
+
--wui-color-base-contrast: var(--wui-error-contrast);
|
|
1266
|
+
--wui-color-accent-1: var(--wui-error-1);
|
|
1267
|
+
--wui-color-accent-2: var(--wui-error-2);
|
|
1268
|
+
--wui-color-accent-3: var(--wui-error-3);
|
|
1269
|
+
--wui-color-accent-4: var(--wui-error-4);
|
|
1270
|
+
--wui-color-accent-5: var(--wui-error-5);
|
|
1271
|
+
--wui-color-accent-6: var(--wui-error-6);
|
|
1272
|
+
--wui-color-accent-7: var(--wui-error-7);
|
|
1273
|
+
--wui-color-accent-8: var(--wui-error-8);
|
|
1274
|
+
--wui-color-accent-9: var(--wui-error-9);
|
|
1275
|
+
--wui-color-accent-10: var(--wui-error-10);
|
|
1276
|
+
--wui-color-accent-11: var(--wui-error-11);
|
|
1277
|
+
--wui-color-accent-12: var(--wui-error-12);
|
|
1278
|
+
--wui-color-accent-contrast: var(--wui-error-contrast);
|
|
1279
|
+
--wui-color-surface-token: var(--wui-error-2);
|
|
1280
|
+
--wui-color-text-button-token: var(--wui-error-11);
|
|
1281
|
+
`;
|
|
1282
|
+
var infoColorScheme = import_styled_components3.css`
|
|
1283
|
+
--wui-color-base-1: var(--wui-blue-1);
|
|
1284
|
+
--wui-color-base-2: var(--wui-blue-2);
|
|
1285
|
+
--wui-color-base-3: var(--wui-blue-3);
|
|
1286
|
+
--wui-color-base-4: var(--wui-blue-4);
|
|
1287
|
+
--wui-color-base-5: var(--wui-blue-5);
|
|
1288
|
+
--wui-color-base-6: var(--wui-blue-6);
|
|
1289
|
+
--wui-color-base-7: var(--wui-blue-7);
|
|
1290
|
+
--wui-color-base-8: var(--wui-blue-8);
|
|
1291
|
+
--wui-color-base-9: var(--wui-blue-9);
|
|
1292
|
+
--wui-color-base-10: var(--wui-blue-10);
|
|
1293
|
+
--wui-color-base-11: var(--wui-blue-11);
|
|
1294
|
+
--wui-color-base-12: var(--wui-blue-12);
|
|
1295
|
+
--wui-color-base-contrast: var(--wui-blue-contrast);
|
|
1296
|
+
--wui-color-accent-1: var(--wui-blue-1);
|
|
1297
|
+
--wui-color-accent-2: var(--wui-blue-2);
|
|
1298
|
+
--wui-color-accent-3: var(--wui-blue-3);
|
|
1299
|
+
--wui-color-accent-4: var(--wui-blue-4);
|
|
1300
|
+
--wui-color-accent-5: var(--wui-blue-5);
|
|
1301
|
+
--wui-color-accent-6: var(--wui-blue-6);
|
|
1302
|
+
--wui-color-accent-7: var(--wui-blue-7);
|
|
1303
|
+
--wui-color-accent-8: var(--wui-blue-8);
|
|
1304
|
+
--wui-color-accent-9: var(--wui-blue-9);
|
|
1305
|
+
--wui-color-accent-10: var(--wui-blue-10);
|
|
1306
|
+
--wui-color-accent-11: var(--wui-blue-11);
|
|
1307
|
+
--wui-color-accent-12: var(--wui-blue-12);
|
|
1308
|
+
--wui-color-accent-contrast: var(--wui-blue-contrast);
|
|
1309
|
+
--wui-color-surface-token: var(--wui-blue-2);
|
|
1310
|
+
--wui-color-text-button-token: var(--wui-blue-11);
|
|
1311
|
+
`;
|
|
1312
|
+
var successColorScheme = import_styled_components3.css`
|
|
1313
|
+
--wui-color-base-1: var(--wui-success-1);
|
|
1314
|
+
--wui-color-base-2: var(--wui-success-2);
|
|
1315
|
+
--wui-color-base-3: var(--wui-success-3);
|
|
1316
|
+
--wui-color-base-4: var(--wui-success-4);
|
|
1317
|
+
--wui-color-base-5: var(--wui-success-5);
|
|
1318
|
+
--wui-color-base-6: var(--wui-success-6);
|
|
1319
|
+
--wui-color-base-7: var(--wui-success-7);
|
|
1320
|
+
--wui-color-base-8: var(--wui-success-8);
|
|
1321
|
+
--wui-color-base-9: var(--wui-success-9);
|
|
1322
|
+
--wui-color-base-10: var(--wui-success-10);
|
|
1323
|
+
--wui-color-base-11: var(--wui-success-11);
|
|
1324
|
+
--wui-color-base-12: var(--wui-success-12);
|
|
1325
|
+
--wui-color-base-contrast: var(--wui-success-contrast);
|
|
1326
|
+
--wui-color-accent-1: var(--wui-success-1);
|
|
1327
|
+
--wui-color-accent-2: var(--wui-success-2);
|
|
1328
|
+
--wui-color-accent-3: var(--wui-success-3);
|
|
1329
|
+
--wui-color-accent-4: var(--wui-success-4);
|
|
1330
|
+
--wui-color-accent-5: var(--wui-success-5);
|
|
1331
|
+
--wui-color-accent-6: var(--wui-success-6);
|
|
1332
|
+
--wui-color-accent-7: var(--wui-success-7);
|
|
1333
|
+
--wui-color-accent-8: var(--wui-success-8);
|
|
1334
|
+
--wui-color-accent-9: var(--wui-success-9);
|
|
1335
|
+
--wui-color-accent-10: var(--wui-success-10);
|
|
1336
|
+
--wui-color-accent-11: var(--wui-success-11);
|
|
1337
|
+
--wui-color-accent-12: var(--wui-success-12);
|
|
1338
|
+
--wui-color-accent-contrast: var(--wui-success-contrast);
|
|
1339
|
+
--wui-color-surface-token: var(--wui-success-2);
|
|
1340
|
+
--wui-color-text-button-token: var(--wui-success-11);
|
|
1341
|
+
`;
|
|
1342
|
+
var warningColorScheme = import_styled_components3.css`
|
|
1343
|
+
--wui-color-base-1: var(--wui-warning-1);
|
|
1344
|
+
--wui-color-base-2: var(--wui-warning-2);
|
|
1345
|
+
--wui-color-base-3: var(--wui-warning-3);
|
|
1346
|
+
--wui-color-base-4: var(--wui-warning-4);
|
|
1347
|
+
--wui-color-base-5: var(--wui-warning-5);
|
|
1348
|
+
--wui-color-base-6: var(--wui-warning-6);
|
|
1349
|
+
--wui-color-base-7: var(--wui-warning-7);
|
|
1350
|
+
--wui-color-base-8: var(--wui-warning-8);
|
|
1351
|
+
--wui-color-base-9: var(--wui-warning-9);
|
|
1352
|
+
--wui-color-base-10: var(--wui-warning-10);
|
|
1353
|
+
--wui-color-base-11: var(--wui-warning-11);
|
|
1354
|
+
--wui-color-base-12: var(--wui-warning-12);
|
|
1355
|
+
--wui-color-base-contrast: var(--wui-warning-contrast);
|
|
1356
|
+
--wui-color-accent-1: var(--wui-warning-1);
|
|
1357
|
+
--wui-color-accent-2: var(--wui-warning-2);
|
|
1358
|
+
--wui-color-accent-3: var(--wui-warning-3);
|
|
1359
|
+
--wui-color-accent-4: var(--wui-warning-4);
|
|
1360
|
+
--wui-color-accent-5: var(--wui-warning-5);
|
|
1361
|
+
--wui-color-accent-6: var(--wui-warning-6);
|
|
1362
|
+
--wui-color-accent-7: var(--wui-warning-7);
|
|
1363
|
+
--wui-color-accent-8: var(--wui-warning-8);
|
|
1364
|
+
--wui-color-accent-9: var(--wui-warning-9);
|
|
1365
|
+
--wui-color-accent-10: var(--wui-warning-10);
|
|
1366
|
+
--wui-color-accent-11: var(--wui-warning-11);
|
|
1367
|
+
--wui-color-accent-12: var(--wui-warning-12);
|
|
1368
|
+
--wui-color-accent-contrast: var(--wui-warning-contrast);
|
|
1369
|
+
--wui-color-surface-token: var(--wui-warning-2);
|
|
1370
|
+
--wui-color-text-button-token: var(--wui-warning-11);
|
|
1371
|
+
`;
|
|
1372
|
+
var vendorHubspotColorScheme = import_styled_components3.css`
|
|
1373
|
+
--wui-color-base-1: var(--wui-vendor-hubspot-1);
|
|
1374
|
+
--wui-color-base-2: var(--wui-vendor-hubspot-2);
|
|
1375
|
+
--wui-color-base-3: var(--wui-vendor-hubspot-3);
|
|
1376
|
+
--wui-color-base-4: var(--wui-vendor-hubspot-4);
|
|
1377
|
+
--wui-color-base-5: var(--wui-vendor-hubspot-5);
|
|
1378
|
+
--wui-color-base-6: var(--wui-vendor-hubspot-6);
|
|
1379
|
+
--wui-color-base-7: var(--wui-vendor-hubspot-7);
|
|
1380
|
+
--wui-color-base-8: var(--wui-vendor-hubspot-8);
|
|
1381
|
+
--wui-color-base-9: var(--wui-vendor-hubspot-9);
|
|
1382
|
+
--wui-color-base-10: var(--wui-vendor-hubspot-10);
|
|
1383
|
+
--wui-color-base-11: var(--wui-vendor-hubspot-11);
|
|
1384
|
+
--wui-color-base-12: var(--wui-vendor-hubspot-12);
|
|
1385
|
+
--wui-color-base-contrast: var(--wui-vendor-hubspot-contrast);
|
|
1386
|
+
--wui-color-accent-1: var(--wui-vendor-hubspot-1);
|
|
1387
|
+
--wui-color-accent-2: var(--wui-vendor-hubspot-2);
|
|
1388
|
+
--wui-color-accent-3: var(--wui-vendor-hubspot-3);
|
|
1389
|
+
--wui-color-accent-4: var(--wui-vendor-hubspot-4);
|
|
1390
|
+
--wui-color-accent-5: var(--wui-vendor-hubspot-5);
|
|
1391
|
+
--wui-color-accent-6: var(--wui-vendor-hubspot-6);
|
|
1392
|
+
--wui-color-accent-7: var(--wui-vendor-hubspot-7);
|
|
1393
|
+
--wui-color-accent-8: var(--wui-vendor-hubspot-8);
|
|
1394
|
+
--wui-color-accent-9: var(--wui-vendor-hubspot-9);
|
|
1395
|
+
--wui-color-accent-10: var(--wui-vendor-hubspot-10);
|
|
1396
|
+
--wui-color-accent-11: var(--wui-vendor-hubspot-11);
|
|
1397
|
+
--wui-color-accent-12: var(--wui-vendor-hubspot-12);
|
|
1398
|
+
--wui-color-accent-contrast: var(--wui-vendor-hubspot-contrast);
|
|
1399
|
+
--wui-color-surface-token: var(--wui-vendor-hubspot-2);
|
|
1400
|
+
--wui-color-text-button-token: var(--wui-vendor-hubspot-11);
|
|
1401
|
+
`;
|
|
1402
|
+
var vendorMarketoColorScheme = import_styled_components3.css`
|
|
1403
|
+
--wui-color-base-1: var(--wui-vendor-marketo-1);
|
|
1404
|
+
--wui-color-base-2: var(--wui-vendor-marketo-2);
|
|
1405
|
+
--wui-color-base-3: var(--wui-vendor-marketo-3);
|
|
1406
|
+
--wui-color-base-4: var(--wui-vendor-marketo-4);
|
|
1407
|
+
--wui-color-base-5: var(--wui-vendor-marketo-5);
|
|
1408
|
+
--wui-color-base-6: var(--wui-vendor-marketo-6);
|
|
1409
|
+
--wui-color-base-7: var(--wui-vendor-marketo-7);
|
|
1410
|
+
--wui-color-base-8: var(--wui-vendor-marketo-8);
|
|
1411
|
+
--wui-color-base-9: var(--wui-vendor-marketo-9);
|
|
1412
|
+
--wui-color-base-10: var(--wui-vendor-marketo-10);
|
|
1413
|
+
--wui-color-base-11: var(--wui-vendor-marketo-11);
|
|
1414
|
+
--wui-color-base-12: var(--wui-vendor-marketo-12);
|
|
1415
|
+
--wui-color-base-contrast: var(--wui-vendor-marketo-contrast);
|
|
1416
|
+
--wui-color-accent-1: var(--wui-vendor-marketo-1);
|
|
1417
|
+
--wui-color-accent-2: var(--wui-vendor-marketo-2);
|
|
1418
|
+
--wui-color-accent-3: var(--wui-vendor-marketo-3);
|
|
1419
|
+
--wui-color-accent-4: var(--wui-vendor-marketo-4);
|
|
1420
|
+
--wui-color-accent-5: var(--wui-vendor-marketo-5);
|
|
1421
|
+
--wui-color-accent-6: var(--wui-vendor-marketo-6);
|
|
1422
|
+
--wui-color-accent-7: var(--wui-vendor-marketo-7);
|
|
1423
|
+
--wui-color-accent-8: var(--wui-vendor-marketo-8);
|
|
1424
|
+
--wui-color-accent-9: var(--wui-vendor-marketo-9);
|
|
1425
|
+
--wui-color-accent-10: var(--wui-vendor-marketo-10);
|
|
1426
|
+
--wui-color-accent-11: var(--wui-vendor-marketo-11);
|
|
1427
|
+
--wui-color-accent-12: var(--wui-vendor-marketo-12);
|
|
1428
|
+
--wui-color-accent-contrast: var(--wui-vendor-marketo-contrast);
|
|
1429
|
+
--wui-color-surface-token: var(--wui-vendor-marketo-2);
|
|
1430
|
+
--wui-color-text-button-token: var(--wui-vendor-marketo-11);
|
|
1431
|
+
`;
|
|
1432
|
+
var vendorPardotColorScheme = import_styled_components3.css`
|
|
1433
|
+
--wui-color-base-1: var(--wui-vendor-pardot-1);
|
|
1434
|
+
--wui-color-base-2: var(--wui-vendor-pardot-2);
|
|
1435
|
+
--wui-color-base-3: var(--wui-vendor-pardot-3);
|
|
1436
|
+
--wui-color-base-4: var(--wui-vendor-pardot-4);
|
|
1437
|
+
--wui-color-base-5: var(--wui-vendor-pardot-5);
|
|
1438
|
+
--wui-color-base-6: var(--wui-vendor-pardot-6);
|
|
1439
|
+
--wui-color-base-7: var(--wui-vendor-pardot-7);
|
|
1440
|
+
--wui-color-base-8: var(--wui-vendor-pardot-8);
|
|
1441
|
+
--wui-color-base-9: var(--wui-vendor-pardot-9);
|
|
1442
|
+
--wui-color-base-10: var(--wui-vendor-pardot-10);
|
|
1443
|
+
--wui-color-base-11: var(--wui-vendor-pardot-11);
|
|
1444
|
+
--wui-color-base-12: var(--wui-vendor-pardot-12);
|
|
1445
|
+
--wui-color-base-contrast: var(--wui-vendor-pardot-contrast);
|
|
1446
|
+
--wui-color-accent-1: var(--wui-vendor-pardot-1);
|
|
1447
|
+
--wui-color-accent-2: var(--wui-vendor-pardot-2);
|
|
1448
|
+
--wui-color-accent-3: var(--wui-vendor-pardot-3);
|
|
1449
|
+
--wui-color-accent-4: var(--wui-vendor-pardot-4);
|
|
1450
|
+
--wui-color-accent-5: var(--wui-vendor-pardot-5);
|
|
1451
|
+
--wui-color-accent-6: var(--wui-vendor-pardot-6);
|
|
1452
|
+
--wui-color-accent-7: var(--wui-vendor-pardot-7);
|
|
1453
|
+
--wui-color-accent-8: var(--wui-vendor-pardot-8);
|
|
1454
|
+
--wui-color-accent-9: var(--wui-vendor-pardot-9);
|
|
1455
|
+
--wui-color-accent-10: var(--wui-vendor-pardot-10);
|
|
1456
|
+
--wui-color-accent-11: var(--wui-vendor-pardot-11);
|
|
1457
|
+
--wui-color-accent-12: var(--wui-vendor-pardot-12);
|
|
1458
|
+
--wui-color-accent-contrast: var(--wui-vendor-pardot-contrast);
|
|
1459
|
+
--wui-color-surface-token: var(--wui-vendor-pardot-2);
|
|
1460
|
+
--wui-color-text-button-token: var(--wui-vendor-pardot-11);
|
|
1461
|
+
`;
|
|
1462
|
+
var navColorScheme = import_styled_components3.css`
|
|
1463
|
+
--wui-color-bg-app: #1e3399;
|
|
1464
|
+
--wui-color-bg-fill: var(--wui-blue-1);
|
|
1465
|
+
--wui-color-bg-fill-hover: #e7e9f4;
|
|
1466
|
+
--wui-color-bg-fill-active: #dcdfef;
|
|
1467
|
+
--wui-color-bg-surface: transparent;
|
|
1468
|
+
--wui-color-bg-surface-hover: #15267b;
|
|
1469
|
+
--wui-color-bg-surface-active: #122271;
|
|
1470
|
+
--wui-color-bg-surface-secondary: #15267b;
|
|
1471
|
+
--wui-color-bg-surface-secondary-hover: #122271;
|
|
1472
|
+
--wui-color-bg-surface-secondary-active: #101e67;
|
|
1473
|
+
--wui-color-bg-surface-tertiary: #0d1a5c;
|
|
1474
|
+
--wui-color-border-secondary: #101e67;
|
|
1475
|
+
--wui-color-border-hover-secondary: #0e1c61;
|
|
1476
|
+
--wui-color-border-active-secondary: #0d1a5c;
|
|
1477
|
+
--wui-color-border: var(--wui-color-bg-fill);
|
|
1478
|
+
--wui-color-border-hover: var(--wui-color-bg-fill-hover);
|
|
1479
|
+
--wui-color-border-active: var(--wui-color-bg-fill-active);
|
|
1480
|
+
--wui-color-icon: var(--wui-blue-1);
|
|
1481
|
+
--wui-color-icon-on-fill: var(--wui-color-bg-app);
|
|
1482
|
+
--wui-color-text: var(--wui-blue-1);
|
|
1483
|
+
--wui-color-text-on-fill: var(--wui-color-bg-app);
|
|
1484
|
+
--wui-color-text-link: var(--wui-blue-4);
|
|
1485
|
+
--wui-color-text-secondary: var(--wui-blue-6);
|
|
1486
|
+
--wui-color-text-button: var(--wui-blue-1);
|
|
1487
|
+
--wui-color-focus-ring: var(--wui-blue-1);
|
|
1011
1488
|
|
|
1012
|
-
/*
|
|
1013
|
-
--wui-color-bg-
|
|
1014
|
-
--wui-color-
|
|
1015
|
-
--wui-color-
|
|
1016
|
-
--wui-color-bg-surface: var(--wui-gray-1);
|
|
1017
|
-
--wui-color-bg-surface-active: var(--wui-gray-4);
|
|
1018
|
-
--wui-color-bg-surface-hover: var(--wui-gray-3);
|
|
1019
|
-
--wui-color-bg-surface-secondary: var(--wui-gray-3);
|
|
1020
|
-
--wui-color-bg-surface-secondary-active: var(--wui-gray-5);
|
|
1021
|
-
--wui-color-bg-surface-secondary-hover: var(--wui-gray-4);
|
|
1022
|
-
--wui-color-bg-surface-tertiary: var(--wui-gray-5);
|
|
1023
|
-
--wui-color-border: var(--wui-gray-6);
|
|
1024
|
-
--wui-color-border-hover: var(--wui-gray-8);
|
|
1025
|
-
--wui-color-border-active: var(--wui-gray-9);
|
|
1026
|
-
--wui-color-border-secondary: var(--wui-gray-8);
|
|
1027
|
-
--wui-color-border-secondary-hover: var(--wui-gray-10);
|
|
1028
|
-
--wui-color-border-secondary-active: var(--wui-gray-11);
|
|
1029
|
-
--wui-color-icon: var(--wui-gray-11);
|
|
1030
|
-
--wui-color-icon-on-fill: var(--wui-gray-contrast);
|
|
1031
|
-
--wui-color-text: var(--wui-gray-12);
|
|
1032
|
-
--wui-color-text-button: var(--wui-gray-12);
|
|
1033
|
-
--wui-color-text-link: var(--wui-blue-9);
|
|
1034
|
-
--wui-color-text-on-fill: var(--wui-gray-contrast);
|
|
1035
|
-
--wui-color-text-secondary: var(--wui-gray-11);
|
|
1036
|
-
--wui-color-focus-ring: var(--wui-blue-9);
|
|
1489
|
+
/* Nav - Disabled */
|
|
1490
|
+
--wui-color-bg-surface-disabled: transparent;
|
|
1491
|
+
--wui-color-icon-disabled: var(--wui-blue-8);
|
|
1492
|
+
--wui-color-text-disabled: var(--wui-blue-8);
|
|
1037
1493
|
|
|
1038
|
-
/*
|
|
1494
|
+
/* Nav - Selected */
|
|
1495
|
+
--wui-color-bg-surface-selected: var(--wui-color-bg-fill);
|
|
1496
|
+
--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);
|
|
1497
|
+
--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);
|
|
1498
|
+
--wui-color-icon-selected: var(--wui-color-bg-app);
|
|
1499
|
+
--wui-color-text-selected: var(--wui-color-bg-app);
|
|
1500
|
+
--wui-color-border-selected: transparent;
|
|
1501
|
+
--wui-color-border-hover-selected: transparent;
|
|
1502
|
+
--wui-color-border-active-selected: transparent;
|
|
1503
|
+
`;
|
|
1039
1504
|
|
|
1505
|
+
// src/css/designTokens/colorAlias.tsx
|
|
1506
|
+
var baseAliasTokens = import_styled_components4.css`
|
|
1507
|
+
--wui-color-bg-fill: var(--wui-color-accent-9);
|
|
1508
|
+
--wui-color-bg-fill-active: var(--wui-color-accent-11);
|
|
1509
|
+
--wui-color-bg-fill-hover: var(--wui-color-accent-10);
|
|
1510
|
+
--wui-color-bg-surface: var(--wui-color-surface-token);
|
|
1511
|
+
--wui-color-bg-surface-active: var(--wui-color-base-4);
|
|
1512
|
+
--wui-color-bg-surface-hover: var(--wui-color-base-3);
|
|
1513
|
+
--wui-color-bg-surface-secondary: var(--wui-color-base-3);
|
|
1514
|
+
--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);
|
|
1515
|
+
--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);
|
|
1516
|
+
--wui-color-bg-surface-tertiary: var(--wui-color-base-5);
|
|
1517
|
+
--wui-color-border: var(--wui-color-base-6);
|
|
1518
|
+
--wui-color-border-hover: var(--wui-color-base-8);
|
|
1519
|
+
--wui-color-border-active: var(--wui-color-base-9);
|
|
1520
|
+
--wui-color-border-secondary: var(--wui-color-base-8);
|
|
1521
|
+
--wui-color-border-secondary-hover: var(--wui-color-base-10);
|
|
1522
|
+
--wui-color-border-secondary-active: var(--wui-color-base-11);
|
|
1523
|
+
--wui-color-icon: var(--wui-color-base-11);
|
|
1524
|
+
--wui-color-icon-on-fill: var(--wui-color-accent-contrast);
|
|
1525
|
+
--wui-color-text: var(--wui-color-base-12);
|
|
1526
|
+
--wui-color-text-button: var(--wui-color-text-button-token);
|
|
1527
|
+
--wui-color-text-link: var(--wui-color-accent-9);
|
|
1528
|
+
--wui-color-text-on-fill: var(--wui-color-accent-contrast);
|
|
1529
|
+
--wui-color-text-secondary: var(--wui-color-base-11);
|
|
1530
|
+
--wui-color-focus-ring: var(--wui-color-accent-9);
|
|
1531
|
+
`;
|
|
1532
|
+
var colorAliasTokens = import_styled_components4.css`
|
|
1533
|
+
--wui-color-bg-app: var(--wui-app-background);
|
|
1534
|
+
${defaultColorScheme}
|
|
1535
|
+
${baseAliasTokens}
|
|
1536
|
+
/* --- Semantic --- */
|
|
1040
1537
|
/* Error */
|
|
1041
1538
|
--wui-color-bg-fill-active-error: var(--wui-error-11);
|
|
1042
1539
|
--wui-color-bg-fill-error: var(--wui-error-9);
|
|
@@ -1331,8 +1828,8 @@ var colorAliasTokens = import_styled_components3.css`
|
|
|
1331
1828
|
`;
|
|
1332
1829
|
|
|
1333
1830
|
// src/css/designTokens/borderRadius.tsx
|
|
1334
|
-
var
|
|
1335
|
-
var borderRadiusTokens =
|
|
1831
|
+
var import_styled_components5 = require("styled-components");
|
|
1832
|
+
var borderRadiusTokens = import_styled_components5.css`
|
|
1336
1833
|
--wui-border-radius-00: 0;
|
|
1337
1834
|
--wui-border-radius-01: 4px;
|
|
1338
1835
|
--wui-border-radius-02: 8px;
|
|
@@ -1343,8 +1840,8 @@ var borderRadiusTokens = import_styled_components4.css`
|
|
|
1343
1840
|
`;
|
|
1344
1841
|
|
|
1345
1842
|
// src/css/designTokens/spacing.tsx
|
|
1346
|
-
var
|
|
1347
|
-
var spacingTokens =
|
|
1843
|
+
var import_styled_components6 = require("styled-components");
|
|
1844
|
+
var spacingTokens = import_styled_components6.css`
|
|
1348
1845
|
--wui-space-00: 0px;
|
|
1349
1846
|
--wui-space-01: 4px;
|
|
1350
1847
|
--wui-space-02: 8px;
|
|
@@ -1358,8 +1855,8 @@ var spacingTokens = import_styled_components5.css`
|
|
|
1358
1855
|
`;
|
|
1359
1856
|
|
|
1360
1857
|
// src/css/designTokens/typography.tsx
|
|
1361
|
-
var
|
|
1362
|
-
var typographyTokens =
|
|
1858
|
+
var import_styled_components7 = require("styled-components");
|
|
1859
|
+
var typographyTokens = import_styled_components7.css`
|
|
1363
1860
|
--wui-typography-family-default: intervariable, sans-serif;
|
|
1364
1861
|
--wui-typography-family-brand: 'GT Walsheim', sans-serif;
|
|
1365
1862
|
--wui-typography-family-mono: 'IBM Plex Mono', monospace;
|
|
@@ -1472,8 +1969,8 @@ var typographyTokens = import_styled_components6.css`
|
|
|
1472
1969
|
`;
|
|
1473
1970
|
|
|
1474
1971
|
// src/css/designTokens/zIndex.tsx
|
|
1475
|
-
var
|
|
1476
|
-
var zIndexTokens =
|
|
1972
|
+
var import_styled_components8 = require("styled-components");
|
|
1973
|
+
var zIndexTokens = import_styled_components8.css`
|
|
1477
1974
|
--wui-zindex-under: -1;
|
|
1478
1975
|
--wui-zindex-backdrop: 500;
|
|
1479
1976
|
--wui-zindex-menu: 500;
|
|
@@ -1484,15 +1981,15 @@ var zIndexTokens = import_styled_components7.css`
|
|
|
1484
1981
|
`;
|
|
1485
1982
|
|
|
1486
1983
|
// src/css/designTokens/elevation.tsx
|
|
1487
|
-
var
|
|
1488
|
-
var elevationTokens =
|
|
1984
|
+
var import_styled_components9 = require("styled-components");
|
|
1985
|
+
var elevationTokens = import_styled_components9.css`
|
|
1489
1986
|
--wui-elevation-01: 0px 4px 8px 0px var(--wui-color-drop-shadow);
|
|
1490
1987
|
--wui-elevation-02: 0px 4px 24px 0px var(--wui-color-drop-shadow);
|
|
1491
1988
|
`;
|
|
1492
1989
|
|
|
1493
1990
|
// src/css/designTokens/motion.tsx
|
|
1494
|
-
var
|
|
1495
|
-
var motionTokens =
|
|
1991
|
+
var import_styled_components10 = require("styled-components");
|
|
1992
|
+
var motionTokens = import_styled_components10.css`
|
|
1496
1993
|
/* Durations */
|
|
1497
1994
|
--wui-motion-duration-01: 70ms;
|
|
1498
1995
|
--wui-motion-duration-02: 110ms;
|
|
@@ -1521,7 +2018,7 @@ var motionTokens = import_styled_components9.css`
|
|
|
1521
2018
|
`;
|
|
1522
2019
|
|
|
1523
2020
|
// src/css/designTokens/index.tsx
|
|
1524
|
-
var colorTokens =
|
|
2021
|
+
var colorTokens = import_styled_components11.css`
|
|
1525
2022
|
${lightGlobalTokens}
|
|
1526
2023
|
/* Dark mode is disabled until we have a more robust plan for supporting it */
|
|
1527
2024
|
|
|
@@ -1530,7 +2027,7 @@ var colorTokens = import_styled_components10.css`
|
|
|
1530
2027
|
} */
|
|
1531
2028
|
${colorAliasTokens}
|
|
1532
2029
|
`;
|
|
1533
|
-
var designTokens =
|
|
2030
|
+
var designTokens = import_styled_components11.css`
|
|
1534
2031
|
:root {
|
|
1535
2032
|
${borderRadiusTokens}
|
|
1536
2033
|
${colorTokens}
|
|
@@ -1543,8 +2040,8 @@ var designTokens = import_styled_components10.css`
|
|
|
1543
2040
|
`;
|
|
1544
2041
|
|
|
1545
2042
|
// src/components/ClickRegion/globalStyles.tsx
|
|
1546
|
-
var
|
|
1547
|
-
var clickRegionGlobalStyles =
|
|
2043
|
+
var import_styled_components12 = require("styled-components");
|
|
2044
|
+
var clickRegionGlobalStyles = import_styled_components12.css`
|
|
1548
2045
|
[data-click-region] {
|
|
1549
2046
|
position: relative;
|
|
1550
2047
|
cursor: pointer;
|
|
@@ -1570,7 +2067,7 @@ var clickRegionGlobalStyles = import_styled_components11.css`
|
|
|
1570
2067
|
`;
|
|
1571
2068
|
|
|
1572
2069
|
// src/css/GlobalStyle.tsx
|
|
1573
|
-
var GlobalStyle =
|
|
2070
|
+
var GlobalStyle = import_styled_components13.createGlobalStyle`
|
|
1574
2071
|
${globalStyleAdjustmentsCss}
|
|
1575
2072
|
${designTokens}
|
|
1576
2073
|
${clickRegionGlobalStyles}
|
|
@@ -2739,16 +3236,16 @@ var import_sonner2 = require("sonner");
|
|
|
2739
3236
|
|
|
2740
3237
|
// src/private/components/Toast/Toast.tsx
|
|
2741
3238
|
var import_react19 = require("react");
|
|
2742
|
-
var
|
|
3239
|
+
var import_styled_components17 = __toESM(require("styled-components"));
|
|
2743
3240
|
var import_type_guards11 = require("@wistia/type-guards");
|
|
2744
3241
|
|
|
2745
3242
|
// src/components/Ellipsis/Ellipsis.tsx
|
|
2746
3243
|
var import_type_guards10 = require("@wistia/type-guards");
|
|
2747
|
-
var
|
|
3244
|
+
var import_styled_components15 = __toESM(require("styled-components"));
|
|
2748
3245
|
|
|
2749
3246
|
// src/css/lineClampCss.tsx
|
|
2750
|
-
var
|
|
2751
|
-
var lineClampCss = ($lines = 1) =>
|
|
3247
|
+
var import_styled_components14 = require("styled-components");
|
|
3248
|
+
var lineClampCss = ($lines = 1) => import_styled_components14.css`
|
|
2752
3249
|
-webkit-box-orient: vertical;
|
|
2753
3250
|
-webkit-line-clamp: ${$lines};
|
|
2754
3251
|
display: -webkit-box !important;
|
|
@@ -2757,7 +3254,7 @@ var lineClampCss = ($lines = 1) => import_styled_components13.css`
|
|
|
2757
3254
|
|
|
2758
3255
|
// src/components/Ellipsis/Ellipsis.tsx
|
|
2759
3256
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
2760
|
-
var ellipsisStyle =
|
|
3257
|
+
var ellipsisStyle = import_styled_components15.css`
|
|
2761
3258
|
overflow: hidden;
|
|
2762
3259
|
text-overflow: ellipsis;
|
|
2763
3260
|
white-space: nowrap;
|
|
@@ -2782,7 +3279,7 @@ var ellipsisStyle = import_styled_components14.css`
|
|
|
2782
3279
|
}
|
|
2783
3280
|
}
|
|
2784
3281
|
`;
|
|
2785
|
-
var EllipsisComponent =
|
|
3282
|
+
var EllipsisComponent = import_styled_components15.default.span`
|
|
2786
3283
|
${ellipsisStyle};
|
|
2787
3284
|
${({ $lines }) => {
|
|
2788
3285
|
if ((0, import_type_guards10.isNotNil)($lines)) {
|
|
@@ -2802,137 +3299,50 @@ var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ (0, import_jsx
|
|
|
2802
3299
|
Ellipsis.displayName = "Ellipsis_UI";
|
|
2803
3300
|
|
|
2804
3301
|
// src/private/helpers/getColorScheme/getColorScheme.ts
|
|
2805
|
-
var
|
|
2806
|
-
var
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
{ token: "border-active", step: "9" },
|
|
2825
|
-
{ token: "border-secondary", step: "8" },
|
|
2826
|
-
{ token: "border-secondary-hover", step: "10" },
|
|
2827
|
-
{ token: "border-secondary-active", step: "11" },
|
|
2828
|
-
{ token: "icon", step: "11" },
|
|
2829
|
-
{ token: "icon-on-fill", step: "contrast" },
|
|
2830
|
-
{ token: "focus-ring", step: "9" }
|
|
2831
|
-
];
|
|
2832
|
-
var defaultScheme = import_styled_components15.css`
|
|
2833
|
-
--wui-color-bg-surface: var(--wui-gray-1);
|
|
2834
|
-
--wui-color-bg-surface-hover: var(--wui-gray-3);
|
|
2835
|
-
--wui-color-bg-surface-active: var(--wui-gray-4);
|
|
2836
|
-
--wui-color-bg-surface-secondary: var(--wui-gray-3);
|
|
2837
|
-
--wui-color-bg-surface-secondary-hover: var(--wui-gray-4);
|
|
2838
|
-
--wui-color-bg-surface-secondary-active: var(--wui-gray-5);
|
|
2839
|
-
--wui-color-bg-surface-tertiary: var(--wui-gray-5);
|
|
2840
|
-
--wui-color-bg-fill: var(--wui-blue-9);
|
|
2841
|
-
--wui-color-bg-fill-hover: var(--wui-blue-10);
|
|
2842
|
-
--wui-color-bg-fill-active: var(--wui-blue-11);
|
|
2843
|
-
--wui-color-text: var(--wui-gray-12);
|
|
2844
|
-
--wui-color-text-button: var(--wui-gray-12);
|
|
2845
|
-
--wui-color-text-link: var(--wui-blue-9);
|
|
2846
|
-
--wui-color-text-secondary: var(--wui-gray-11);
|
|
2847
|
-
--wui-color-text-on-fill: var(--wui-gray-contrast);
|
|
2848
|
-
--wui-color-border: var(--wui-gray-6);
|
|
2849
|
-
--wui-color-border-hover: var(--wui-gray-8);
|
|
2850
|
-
--wui-color-border-active: var(--wui-gray-9);
|
|
2851
|
-
--wui-color-border-secondary: var(--wui-gray-8);
|
|
2852
|
-
--wui-color-border-secondary-hover: var(--wui-gray-10);
|
|
2853
|
-
--wui-color-border-secondary-active: var(--wui-gray-11);
|
|
2854
|
-
--wui-color-icon: var(--wui-gray-11);
|
|
2855
|
-
--wui-color-icon-on-fill: var(--wui-gray-contrast);
|
|
2856
|
-
--wui-color-focus-ring: var(--wui-blue-9);
|
|
2857
|
-
`;
|
|
2858
|
-
var navScheme = import_styled_components15.css`
|
|
2859
|
-
--wui-color-bg-app: #1e3399;
|
|
2860
|
-
|
|
2861
|
-
--wui-color-bg-fill: var(--wui-blue-1);
|
|
2862
|
-
--wui-color-bg-fill-hover: #e7e9f4;
|
|
2863
|
-
--wui-color-bg-fill-active: #dcdfef;
|
|
2864
|
-
|
|
2865
|
-
--wui-color-bg-surface: transparent;
|
|
2866
|
-
--wui-color-bg-surface-hover: #15267b;
|
|
2867
|
-
--wui-color-bg-surface-active: #122271;
|
|
2868
|
-
|
|
2869
|
-
--wui-color-bg-surface-secondary: #15267b;
|
|
2870
|
-
--wui-color-bg-surface-secondary-hover: #122271;
|
|
2871
|
-
--wui-color-bg-surface-secondary-active: #101e67;
|
|
2872
|
-
|
|
2873
|
-
--wui-color-bg-surface-tertiary: #0d1a5c;
|
|
2874
|
-
|
|
2875
|
-
--wui-color-border-secondary: #101e67;
|
|
2876
|
-
--wui-color-border-hover-secondary: #0e1c61;
|
|
2877
|
-
--wui-color-border-active-secondary: #0d1a5c;
|
|
2878
|
-
|
|
2879
|
-
--wui-color-border: var(--wui-color-bg-fill);
|
|
2880
|
-
--wui-color-border-hover: var(--wui-color-bg-fill-hover);
|
|
2881
|
-
--wui-color-border-active: var(--wui-color-bg-fill-active);
|
|
2882
|
-
|
|
2883
|
-
--wui-color-icon: var(--wui-blue-1);
|
|
2884
|
-
--wui-color-icon-on-fill: var(--wui-color-bg-app);
|
|
2885
|
-
|
|
2886
|
-
--wui-color-text: var(--wui-blue-1);
|
|
2887
|
-
--wui-color-text-on-fill: var(--wui-color-bg-app);
|
|
2888
|
-
--wui-color-text-link: var(--wui-blue-4);
|
|
2889
|
-
--wui-color-text-secondary: var(--wui-blue-6);
|
|
2890
|
-
--wui-color-text-button: var(--wui-blue-1);
|
|
2891
|
-
|
|
2892
|
-
--wui-color-focus-ring: var(--wui-blue-1);
|
|
2893
|
-
|
|
2894
|
-
/* Nav - Disabled */
|
|
2895
|
-
--wui-color-bg-surface-disabled: transparent;
|
|
2896
|
-
--wui-color-icon-disabled: var(--wui-blue-8);
|
|
2897
|
-
--wui-color-text-disabled: var(--wui-blue-8);
|
|
2898
|
-
|
|
2899
|
-
/* Nav - Selected */
|
|
2900
|
-
--wui-color-bg-surface-selected: var(--wui-color-bg-fill);
|
|
2901
|
-
--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);
|
|
2902
|
-
--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);
|
|
2903
|
-
--wui-color-icon-selected: var(--wui-color-bg-app);
|
|
2904
|
-
--wui-color-text-selected: var(--wui-color-bg-app);
|
|
2905
|
-
--wui-color-border-selected: transparent;
|
|
2906
|
-
--wui-color-border-hover-selected: transparent;
|
|
2907
|
-
--wui-color-border-active-selected: transparent;
|
|
2908
|
-
`;
|
|
3302
|
+
var import_styled_components16 = require("styled-components");
|
|
3303
|
+
var colorSchemes = {
|
|
3304
|
+
default: defaultColorScheme,
|
|
3305
|
+
blue: blueColorScheme,
|
|
3306
|
+
green: greenColorScheme,
|
|
3307
|
+
red: redColorScheme,
|
|
3308
|
+
yellow: yellowColorScheme,
|
|
3309
|
+
purple: purpleColorScheme,
|
|
3310
|
+
orange: orangeColorScheme,
|
|
3311
|
+
pink: pinkColorScheme,
|
|
3312
|
+
error: errorColorScheme,
|
|
3313
|
+
info: infoColorScheme,
|
|
3314
|
+
success: successColorScheme,
|
|
3315
|
+
warning: warningColorScheme,
|
|
3316
|
+
"vendor-hubspot": vendorHubspotColorScheme,
|
|
3317
|
+
"vendor-marketo": vendorMarketoColorScheme,
|
|
3318
|
+
"vendor-pardot": vendorPardotColorScheme,
|
|
3319
|
+
nav: navColorScheme
|
|
3320
|
+
};
|
|
2909
3321
|
var getColorScheme = (colorScheme) => {
|
|
2910
|
-
if (colorScheme === "nav") {
|
|
2911
|
-
return navScheme;
|
|
2912
|
-
}
|
|
2913
3322
|
if (colorScheme === "inherit") {
|
|
2914
3323
|
return null;
|
|
2915
3324
|
}
|
|
2916
|
-
if (colorScheme === "
|
|
2917
|
-
return
|
|
3325
|
+
if (colorScheme === "nav") {
|
|
3326
|
+
return import_styled_components16.css`
|
|
3327
|
+
${navColorScheme}
|
|
3328
|
+
`;
|
|
2918
3329
|
}
|
|
2919
|
-
return
|
|
2920
|
-
${
|
|
2921
|
-
|
|
2922
|
-
}).join("")}
|
|
3330
|
+
return import_styled_components16.css`
|
|
3331
|
+
${colorSchemes[colorScheme]}
|
|
3332
|
+
${baseAliasTokens}
|
|
2923
3333
|
`;
|
|
2924
3334
|
};
|
|
2925
3335
|
|
|
2926
3336
|
// src/private/components/Toast/Toast.tsx
|
|
2927
3337
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
2928
|
-
var Message = (0,
|
|
3338
|
+
var Message = (0, import_styled_components17.default)(Ellipsis)`
|
|
2929
3339
|
line-height: 1.3;
|
|
2930
3340
|
font-size: var(--wui-typography-label-3-size);
|
|
2931
3341
|
font-weight: var(--wui-typography-label-3-weight);
|
|
2932
3342
|
${lineClampCss(3)}
|
|
2933
3343
|
word-break: normal;
|
|
2934
3344
|
`;
|
|
2935
|
-
var MessageWrapper =
|
|
3345
|
+
var MessageWrapper = import_styled_components17.default.div`
|
|
2936
3346
|
display: flex;
|
|
2937
3347
|
flex-grow: 1;
|
|
2938
3348
|
flex-shrink: 1;
|
|
@@ -2945,13 +3355,13 @@ var MessageWrapper = import_styled_components16.default.div`
|
|
|
2945
3355
|
margin-right: var(--wui-space-02); /* space between icon & message */
|
|
2946
3356
|
}
|
|
2947
3357
|
`;
|
|
2948
|
-
var ActionWrapper =
|
|
3358
|
+
var ActionWrapper = import_styled_components17.default.div`
|
|
2949
3359
|
flex-grow: 0;
|
|
2950
3360
|
flex-shrink: 0;
|
|
2951
3361
|
flex-basis: auto;
|
|
2952
3362
|
margin-right: var(--wui-space-03);
|
|
2953
3363
|
`;
|
|
2954
|
-
var StyledToast =
|
|
3364
|
+
var StyledToast = import_styled_components17.default.div`
|
|
2955
3365
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
2956
3366
|
display: flex;
|
|
2957
3367
|
align-items: center;
|
|
@@ -3035,16 +3445,16 @@ var useToast = () => {
|
|
|
3035
3445
|
|
|
3036
3446
|
// src/components/ActionButton/ActionButton.tsx
|
|
3037
3447
|
var import_react24 = require("react");
|
|
3038
|
-
var
|
|
3448
|
+
var import_styled_components23 = __toESM(require("styled-components"));
|
|
3039
3449
|
|
|
3040
3450
|
// src/components/Button/Button.tsx
|
|
3041
3451
|
var import_react23 = require("react");
|
|
3042
|
-
var
|
|
3452
|
+
var import_styled_components22 = __toESM(require("styled-components"));
|
|
3043
3453
|
var import_type_guards15 = require("@wistia/type-guards");
|
|
3044
3454
|
|
|
3045
3455
|
// src/css/buttonResetCss.tsx
|
|
3046
|
-
var
|
|
3047
|
-
var buttonResetCss =
|
|
3456
|
+
var import_styled_components18 = require("styled-components");
|
|
3457
|
+
var buttonResetCss = import_styled_components18.css`
|
|
3048
3458
|
align-items: center;
|
|
3049
3459
|
background-color: transparent;
|
|
3050
3460
|
background-image: none;
|
|
@@ -3088,8 +3498,8 @@ var buttonResetCss = import_styled_components17.css`
|
|
|
3088
3498
|
`;
|
|
3089
3499
|
|
|
3090
3500
|
// src/components/Button/buttonStyles.tsx
|
|
3091
|
-
var
|
|
3092
|
-
var buttonSmallStyles =
|
|
3501
|
+
var import_styled_components19 = require("styled-components");
|
|
3502
|
+
var buttonSmallStyles = import_styled_components19.css`
|
|
3093
3503
|
--button-padding-vertical: var(--wui-space-01);
|
|
3094
3504
|
--button-padding-horizontal: var(--wui-space-02);
|
|
3095
3505
|
--button-label-padding-horizontal: var(--wui-space-01);
|
|
@@ -3100,7 +3510,7 @@ var buttonSmallStyles = import_styled_components18.css`
|
|
|
3100
3510
|
--button-icon-size: 12px;
|
|
3101
3511
|
--button-label-gap: 4px;
|
|
3102
3512
|
`;
|
|
3103
|
-
var buttonMediumStyles =
|
|
3513
|
+
var buttonMediumStyles = import_styled_components19.css`
|
|
3104
3514
|
--button-padding-vertical: var(--wui-space-02);
|
|
3105
3515
|
--button-padding-horizontal: var(--wui-space-02);
|
|
3106
3516
|
--button-label-padding-horizontal: 6px;
|
|
@@ -3111,7 +3521,7 @@ var buttonMediumStyles = import_styled_components18.css`
|
|
|
3111
3521
|
--button-icon-size: 16px;
|
|
3112
3522
|
--button-label-gap: 6px;
|
|
3113
3523
|
`;
|
|
3114
|
-
var buttonLargeStyles =
|
|
3524
|
+
var buttonLargeStyles = import_styled_components19.css`
|
|
3115
3525
|
--button-padding-vertical: var(--wui-space-02);
|
|
3116
3526
|
--button-padding-horizontal: var(--wui-space-02);
|
|
3117
3527
|
--button-label-padding-horizontal: var(--wui-space-02);
|
|
@@ -3122,7 +3532,7 @@ var buttonLargeStyles = import_styled_components18.css`
|
|
|
3122
3532
|
--button-icon-size: 24px;
|
|
3123
3533
|
--button-label-gap: 8px;
|
|
3124
3534
|
`;
|
|
3125
|
-
var buttonExtraLargeStyles =
|
|
3535
|
+
var buttonExtraLargeStyles = import_styled_components19.css`
|
|
3126
3536
|
--button-padding-vertical: var(--wui-space-03);
|
|
3127
3537
|
--button-padding-horizontal: var(--wui-space-03);
|
|
3128
3538
|
--button-label-padding-horizontal: var(--wui-space-02);
|
|
@@ -3133,34 +3543,34 @@ var buttonExtraLargeStyles = import_styled_components18.css`
|
|
|
3133
3543
|
--button-icon-size: 24px;
|
|
3134
3544
|
--button-label-gap: 8px;
|
|
3135
3545
|
`;
|
|
3136
|
-
var ghostButtonVariant =
|
|
3546
|
+
var ghostButtonVariant = import_styled_components19.css`
|
|
3137
3547
|
--button-color-bg-override: transparent;
|
|
3138
3548
|
--button-color-bg-hover: var(--wui-color-bg-surface-hover);
|
|
3139
3549
|
--button-color-bg-active: var(--wui-color-bg-surface-active);
|
|
3140
3550
|
--button-color-text: var(--wui-color-text-button);
|
|
3141
3551
|
--button-color-icon: var(--wui-color-icon);
|
|
3142
3552
|
`;
|
|
3143
|
-
var outlineButtonVariant =
|
|
3553
|
+
var outlineButtonVariant = import_styled_components19.css`
|
|
3144
3554
|
${ghostButtonVariant};
|
|
3145
3555
|
--button-color-border: var(--wui-color-border);
|
|
3146
3556
|
|
|
3147
3557
|
box-shadow: 0 0 0 2px var(--button-color-border) inset;
|
|
3148
3558
|
`;
|
|
3149
|
-
var softButtonVariant =
|
|
3559
|
+
var softButtonVariant = import_styled_components19.css`
|
|
3150
3560
|
--button-color-bg: var(--wui-color-bg-surface-secondary);
|
|
3151
3561
|
--button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
|
|
3152
3562
|
--button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
|
|
3153
3563
|
--button-color-text: var(--wui-color-text-button);
|
|
3154
3564
|
--button-color-icon: var(--wui-color-icon);
|
|
3155
3565
|
`;
|
|
3156
|
-
var solidButtonVariant =
|
|
3566
|
+
var solidButtonVariant = import_styled_components19.css`
|
|
3157
3567
|
--button-color-bg: var(--wui-color-bg-fill);
|
|
3158
3568
|
--button-color-bg-hover: var(--wui-color-bg-fill-hover);
|
|
3159
3569
|
--button-color-bg-active: var(--wui-color-bg-fill-active);
|
|
3160
3570
|
--button-color-text: var(--wui-color-text-on-fill);
|
|
3161
3571
|
--button-color-icon: var(--wui-color-icon-on-fill);
|
|
3162
3572
|
`;
|
|
3163
|
-
var disabledButtonVariant =
|
|
3573
|
+
var disabledButtonVariant = import_styled_components19.css`
|
|
3164
3574
|
--button-color-bg: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
|
|
3165
3575
|
--button-color-bg-hover: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
|
|
3166
3576
|
--button-color-bg-active: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
|
|
@@ -3168,7 +3578,7 @@ var disabledButtonVariant = import_styled_components18.css`
|
|
|
3168
3578
|
--button-color-icon: var(--wui-color-icon-disabled);
|
|
3169
3579
|
--button-color-border: var(--wui-color-border-disabled);
|
|
3170
3580
|
`;
|
|
3171
|
-
var pressedButtonVariant =
|
|
3581
|
+
var pressedButtonVariant = import_styled_components19.css`
|
|
3172
3582
|
--button-color-bg: var(--wui-color-bg-surface-selected);
|
|
3173
3583
|
--button-color-bg-hover: var(--wui-color-bg-surface-selected-hover);
|
|
3174
3584
|
--button-color-bg-active: var(--wui-color-bg-surface-selected-active);
|
|
@@ -3176,7 +3586,7 @@ var pressedButtonVariant = import_styled_components18.css`
|
|
|
3176
3586
|
--button-color-icon: var(--wui-color-icon-selected);
|
|
3177
3587
|
--button-color-border: var(--wui-color-border-selected);
|
|
3178
3588
|
`;
|
|
3179
|
-
var buttonBaseStyles =
|
|
3589
|
+
var buttonBaseStyles = import_styled_components19.css`
|
|
3180
3590
|
border-radius: var(--wui-border-radius-rounded);
|
|
3181
3591
|
font-family: var(--button-typography-family);
|
|
3182
3592
|
font-size: var(--button-typography-size);
|
|
@@ -3245,7 +3655,7 @@ var buttonSizeStyles = {
|
|
|
3245
3655
|
|
|
3246
3656
|
// src/components/Icon/Icon.tsx
|
|
3247
3657
|
var import_type_guards13 = require("@wistia/type-guards");
|
|
3248
|
-
var
|
|
3658
|
+
var import_styled_components20 = __toESM(require("styled-components"));
|
|
3249
3659
|
|
|
3250
3660
|
// src/components/Icon/icons/AbTestIcon.tsx
|
|
3251
3661
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
@@ -7227,7 +7637,7 @@ var iconSizeMap = {
|
|
|
7227
7637
|
xl: "32",
|
|
7228
7638
|
xxl: "48"
|
|
7229
7639
|
};
|
|
7230
|
-
var iconInlineStyle =
|
|
7640
|
+
var iconInlineStyle = import_styled_components20.css`
|
|
7231
7641
|
[data-wui-icon-inline] {
|
|
7232
7642
|
--wui-icon-inline-size: 0.8em;
|
|
7233
7643
|
--wui-icon-inline-offset: 0.05em;
|
|
@@ -7237,7 +7647,7 @@ var iconInlineStyle = import_styled_components19.css`
|
|
|
7237
7647
|
position: relative;
|
|
7238
7648
|
}
|
|
7239
7649
|
`;
|
|
7240
|
-
var StyledIcon =
|
|
7650
|
+
var StyledIcon = import_styled_components20.default.svg`
|
|
7241
7651
|
${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
|
|
7242
7652
|
--wui-icon-size: var(--wui-icon-inline-size, ${({ $height }) => $height}px);
|
|
7243
7653
|
--wui-icon-vertical-align: middle;
|
|
@@ -7295,7 +7705,7 @@ Icon.displayName = "Icon_UI";
|
|
|
7295
7705
|
|
|
7296
7706
|
// src/components/Link/Link.tsx
|
|
7297
7707
|
var import_react22 = require("react");
|
|
7298
|
-
var
|
|
7708
|
+
var import_styled_components21 = __toESM(require("styled-components"));
|
|
7299
7709
|
var import_react_router_dom = require("react-router-dom");
|
|
7300
7710
|
var import_type_guards14 = require("@wistia/type-guards");
|
|
7301
7711
|
var import_jsx_runtime197 = require("react/jsx-runtime");
|
|
@@ -7314,7 +7724,7 @@ var generateHref = (href, type, disabled) => {
|
|
|
7314
7724
|
};
|
|
7315
7725
|
var isButton = (props) => (0, import_type_guards14.isUndefined)(props.href);
|
|
7316
7726
|
var isLink = (props) => (0, import_type_guards14.isNotUndefined)(props.href);
|
|
7317
|
-
var StyledLink =
|
|
7727
|
+
var StyledLink = import_styled_components21.default.a`
|
|
7318
7728
|
${({ href }) => (0, import_type_guards14.isNil)(href) && buttonResetCss};
|
|
7319
7729
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
7320
7730
|
cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
|
|
@@ -7437,7 +7847,7 @@ Link.displayName = "Link_UI";
|
|
|
7437
7847
|
// src/components/Button/Button.tsx
|
|
7438
7848
|
var import_jsx_runtime198 = require("react/jsx-runtime");
|
|
7439
7849
|
var isLink2 = (props) => (0, import_type_guards15.isNotUndefined)(props.href);
|
|
7440
|
-
var StyledButton =
|
|
7850
|
+
var StyledButton = import_styled_components22.default.button`
|
|
7441
7851
|
${buttonResetCss}
|
|
7442
7852
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
7443
7853
|
${({ $size }) => buttonSizeStyles[$size]}
|
|
@@ -7446,7 +7856,7 @@ var StyledButton = import_styled_components21.default.button`
|
|
|
7446
7856
|
${({ $fullWidth }) => $fullWidth && "width: 100%;"}
|
|
7447
7857
|
text-align: center;
|
|
7448
7858
|
`;
|
|
7449
|
-
var StyledButtonContent =
|
|
7859
|
+
var StyledButtonContent = import_styled_components22.default.div`
|
|
7450
7860
|
align-items: center;
|
|
7451
7861
|
display: inline-flex;
|
|
7452
7862
|
flex-grow: 1;
|
|
@@ -7458,10 +7868,10 @@ var StyledButtonContent = import_styled_components21.default.div`
|
|
|
7458
7868
|
${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
|
|
7459
7869
|
${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
|
|
7460
7870
|
`;
|
|
7461
|
-
var StyledButtonContentLabel =
|
|
7871
|
+
var StyledButtonContentLabel = import_styled_components22.default.span`
|
|
7462
7872
|
flex: ${({ $fullWidth }) => $fullWidth ? "initial" : "1"};
|
|
7463
7873
|
`;
|
|
7464
|
-
var StyledButtonLoading =
|
|
7874
|
+
var StyledButtonLoading = import_styled_components22.default.div`
|
|
7465
7875
|
position: absolute;
|
|
7466
7876
|
display: flex;
|
|
7467
7877
|
`;
|
|
@@ -7579,7 +7989,7 @@ Button.displayName = "Button_UI";
|
|
|
7579
7989
|
|
|
7580
7990
|
// src/components/ActionButton/ActionButton.tsx
|
|
7581
7991
|
var import_jsx_runtime199 = require("react/jsx-runtime");
|
|
7582
|
-
var StyledActionButton = (0,
|
|
7992
|
+
var StyledActionButton = (0, import_styled_components23.default)(Button)`
|
|
7583
7993
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7584
7994
|
display: grid;
|
|
7585
7995
|
grid-template-columns: 24px 1fr;
|
|
@@ -7624,7 +8034,7 @@ var StyledActionButton = (0, import_styled_components22.default)(Button)`
|
|
|
7624
8034
|
}
|
|
7625
8035
|
}
|
|
7626
8036
|
`;
|
|
7627
|
-
var StyledMainIcon =
|
|
8037
|
+
var StyledMainIcon = import_styled_components23.default.div`
|
|
7628
8038
|
grid-column: 1;
|
|
7629
8039
|
grid-row: 1;
|
|
7630
8040
|
width: 24px;
|
|
@@ -7639,7 +8049,7 @@ var StyledMainIcon = import_styled_components22.default.div`
|
|
|
7639
8049
|
}
|
|
7640
8050
|
}
|
|
7641
8051
|
`;
|
|
7642
|
-
var StyledSecondaryIcon =
|
|
8052
|
+
var StyledSecondaryIcon = import_styled_components23.default.div`
|
|
7643
8053
|
grid-column: 2;
|
|
7644
8054
|
grid-row: 1;
|
|
7645
8055
|
width: 100%;
|
|
@@ -7647,7 +8057,7 @@ var StyledSecondaryIcon = import_styled_components22.default.div`
|
|
|
7647
8057
|
justify-content: flex-end;
|
|
7648
8058
|
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-out);
|
|
7649
8059
|
|
|
7650
|
-
${({ $hideUntilHover }) => $hideUntilHover &&
|
|
8060
|
+
${({ $hideUntilHover }) => $hideUntilHover && import_styled_components23.css`
|
|
7651
8061
|
will-change: transform;
|
|
7652
8062
|
opacity: 0;
|
|
7653
8063
|
transform: translateX(-16px);
|
|
@@ -7666,7 +8076,7 @@ var StyledSecondaryIcon = import_styled_components22.default.div`
|
|
|
7666
8076
|
}
|
|
7667
8077
|
}
|
|
7668
8078
|
`;
|
|
7669
|
-
var StyledLabel =
|
|
8079
|
+
var StyledLabel = import_styled_components23.default.span`
|
|
7670
8080
|
font-family: var(--wui-typography-heading-4-family);
|
|
7671
8081
|
font-size: var(--wui-typography-heading-4-size);
|
|
7672
8082
|
font-weight: var(--wui-typography-heading-4-weight);
|
|
@@ -7722,7 +8132,7 @@ ActionButton.displayName = "ActionButton_UI";
|
|
|
7722
8132
|
// src/components/Avatar/Avatar.tsx
|
|
7723
8133
|
var import_react25 = require("react");
|
|
7724
8134
|
var import_type_guards18 = require("@wistia/type-guards");
|
|
7725
|
-
var
|
|
8135
|
+
var import_styled_components26 = __toESM(require("styled-components"));
|
|
7726
8136
|
|
|
7727
8137
|
// src/components/Avatar/formatNameForDisplay.tsx
|
|
7728
8138
|
var import_type_guards16 = require("@wistia/type-guards");
|
|
@@ -7739,7 +8149,7 @@ var formatNameForDisplay = (name) => {
|
|
|
7739
8149
|
};
|
|
7740
8150
|
|
|
7741
8151
|
// src/components/Image/Image.tsx
|
|
7742
|
-
var
|
|
8152
|
+
var import_styled_components24 = __toESM(require("styled-components"));
|
|
7743
8153
|
var import_type_guards17 = require("@wistia/type-guards");
|
|
7744
8154
|
var import_jsx_runtime200 = require("react/jsx-runtime");
|
|
7745
8155
|
var getFillStyle = (fillContainer) => {
|
|
@@ -7757,7 +8167,7 @@ var getFillStyle = (fillContainer) => {
|
|
|
7757
8167
|
}
|
|
7758
8168
|
return void 0;
|
|
7759
8169
|
};
|
|
7760
|
-
var StyledImage =
|
|
8170
|
+
var StyledImage = import_styled_components24.default.img`
|
|
7761
8171
|
border-radius: ${({ $borderRadius }) => (0, import_type_guards17.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
|
|
7762
8172
|
${({ $fillContainer }) => getFillStyle($fillContainer)};
|
|
7763
8173
|
object-fit: ${({ $objFit }) => $objFit};
|
|
@@ -7792,7 +8202,7 @@ var Image = ({
|
|
|
7792
8202
|
Image.displayName = "Image_UI";
|
|
7793
8203
|
|
|
7794
8204
|
// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
|
|
7795
|
-
var
|
|
8205
|
+
var import_styled_components25 = __toESM(require("styled-components"));
|
|
7796
8206
|
var import_jsx_runtime201 = require("react/jsx-runtime");
|
|
7797
8207
|
var defaultColorSchemeOptions = ["default", "inherit"];
|
|
7798
8208
|
var semanticColorSchemeOptions = ["error", "info", "success", "warning"];
|
|
@@ -7802,6 +8212,7 @@ var brandColorSchemeOptions = [
|
|
|
7802
8212
|
"orange",
|
|
7803
8213
|
"pink",
|
|
7804
8214
|
"purple",
|
|
8215
|
+
"red",
|
|
7805
8216
|
"yellow"
|
|
7806
8217
|
];
|
|
7807
8218
|
var vendorColorSchemeOptions = [
|
|
@@ -7815,7 +8226,7 @@ var colorSchemeOptions = [
|
|
|
7815
8226
|
...brandColorSchemeOptions,
|
|
7816
8227
|
...vendorColorSchemeOptions
|
|
7817
8228
|
];
|
|
7818
|
-
var StyledColorSchemeWrapper =
|
|
8229
|
+
var StyledColorSchemeWrapper = import_styled_components25.default.div`
|
|
7819
8230
|
${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
|
|
7820
8231
|
`;
|
|
7821
8232
|
var ColorSchemeWrapper = ({
|
|
@@ -7871,7 +8282,7 @@ var Initial = ({ initial }) => /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
|
|
|
7871
8282
|
]
|
|
7872
8283
|
}
|
|
7873
8284
|
);
|
|
7874
|
-
var AvatarWrapper =
|
|
8285
|
+
var AvatarWrapper = import_styled_components26.default.div`
|
|
7875
8286
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7876
8287
|
width: ${({ $heightAndWidth }) => $heightAndWidth}px;
|
|
7877
8288
|
height: ${({ $heightAndWidth }) => $heightAndWidth}px;
|
|
@@ -7973,10 +8384,10 @@ Avatar.displayName = "Avatar_UI";
|
|
|
7973
8384
|
|
|
7974
8385
|
// src/components/Badge/Badge.tsx
|
|
7975
8386
|
var import_react26 = require("react");
|
|
7976
|
-
var
|
|
8387
|
+
var import_styled_components27 = __toESM(require("styled-components"));
|
|
7977
8388
|
var import_type_guards19 = require("@wistia/type-guards");
|
|
7978
8389
|
var import_jsx_runtime203 = require("react/jsx-runtime");
|
|
7979
|
-
var StyledBadge =
|
|
8390
|
+
var StyledBadge = import_styled_components27.default.div`
|
|
7980
8391
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7981
8392
|
align-items: center;
|
|
7982
8393
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -8025,12 +8436,12 @@ Badge.displayName = "Badge_UI";
|
|
|
8025
8436
|
|
|
8026
8437
|
// src/components/Banner/Banner.tsx
|
|
8027
8438
|
var import_react31 = require("react");
|
|
8028
|
-
var
|
|
8439
|
+
var import_styled_components33 = __toESM(require("styled-components"));
|
|
8029
8440
|
var import_type_guards24 = require("@wistia/type-guards");
|
|
8030
8441
|
|
|
8031
8442
|
// src/components/Box/Box.tsx
|
|
8032
8443
|
var import_react27 = require("react");
|
|
8033
|
-
var
|
|
8444
|
+
var import_styled_components28 = __toESM(require("styled-components"));
|
|
8034
8445
|
var import_type_guards20 = require("@wistia/type-guards");
|
|
8035
8446
|
|
|
8036
8447
|
// src/private/helpers/makePolymorphic/makePolymorphic.tsx
|
|
@@ -8086,34 +8497,34 @@ var getFlexStyle = (flexMode) => {
|
|
|
8086
8497
|
switch (flexMode) {
|
|
8087
8498
|
// grows to fill space, won't shrink, starts at 0
|
|
8088
8499
|
case "grow":
|
|
8089
|
-
return
|
|
8500
|
+
return import_styled_components28.css`
|
|
8090
8501
|
flex: 1 0 0;
|
|
8091
8502
|
`;
|
|
8092
8503
|
// default behavior, can shrink but won't grow
|
|
8093
8504
|
case "initial":
|
|
8094
|
-
return
|
|
8505
|
+
return import_styled_components28.css`
|
|
8095
8506
|
flex: 0 1 auto;
|
|
8096
8507
|
`;
|
|
8097
8508
|
// equal distribution of space
|
|
8098
8509
|
case "equal":
|
|
8099
|
-
return
|
|
8510
|
+
return import_styled_components28.css`
|
|
8100
8511
|
flex: 1;
|
|
8101
8512
|
`;
|
|
8102
8513
|
// won't grow or shrink
|
|
8103
8514
|
case "rigid":
|
|
8104
|
-
return
|
|
8515
|
+
return import_styled_components28.css`
|
|
8105
8516
|
flex: 0 0 auto;
|
|
8106
8517
|
`;
|
|
8107
8518
|
// can grow and shrink from content size
|
|
8108
8519
|
case "fluid":
|
|
8109
|
-
return
|
|
8520
|
+
return import_styled_components28.css`
|
|
8110
8521
|
flex: 1 1 auto;
|
|
8111
8522
|
`;
|
|
8112
8523
|
default:
|
|
8113
8524
|
return null;
|
|
8114
8525
|
}
|
|
8115
8526
|
};
|
|
8116
|
-
var StyledBoxComponent =
|
|
8527
|
+
var StyledBoxComponent = import_styled_components28.default.div`
|
|
8117
8528
|
/* properties meant for Box parent (flex container) */
|
|
8118
8529
|
align-content: ${({ $alignContent }) => $alignContent};
|
|
8119
8530
|
align-items: ${({ $alignItems }) => $alignItems};
|
|
@@ -8227,46 +8638,46 @@ var Box = makePolymorphic(BoxComponent);
|
|
|
8227
8638
|
|
|
8228
8639
|
// src/components/Heading/Heading.tsx
|
|
8229
8640
|
var import_react28 = require("react");
|
|
8230
|
-
var
|
|
8641
|
+
var import_styled_components29 = __toESM(require("styled-components"));
|
|
8231
8642
|
var import_type_guards21 = require("@wistia/type-guards");
|
|
8232
8643
|
var import_jsx_runtime205 = require("react/jsx-runtime");
|
|
8233
|
-
var heroStyle =
|
|
8644
|
+
var heroStyle = import_styled_components29.css`
|
|
8234
8645
|
--font-family: var(--wui-typography-heading-hero-family);
|
|
8235
8646
|
--font-size: var(--wui-typography-heading-hero-size);
|
|
8236
8647
|
--font-weight: var(--wui-typography-heading-hero-weight);
|
|
8237
8648
|
--line-height: var(--wui-typography-heading-hero-line-height);
|
|
8238
8649
|
`;
|
|
8239
|
-
var heading1TextStyle =
|
|
8650
|
+
var heading1TextStyle = import_styled_components29.css`
|
|
8240
8651
|
--font-family: var(--wui-typography-heading-1-family);
|
|
8241
8652
|
--font-size: var(--wui-typography-heading-1-size);
|
|
8242
8653
|
--font-weight: var(--wui-typography-heading-1-weight);
|
|
8243
8654
|
--line-height: var(--wui-typography-heading-1-line-height);
|
|
8244
8655
|
`;
|
|
8245
|
-
var heading2TextStyle =
|
|
8656
|
+
var heading2TextStyle = import_styled_components29.css`
|
|
8246
8657
|
--font-family: var(--wui-typography-heading-2-family);
|
|
8247
8658
|
--font-size: var(--wui-typography-heading-2-size);
|
|
8248
8659
|
--font-weight: var(--wui-typography-heading-2-weight);
|
|
8249
8660
|
--line-height: var(--wui-typography-heading-2-line-height);
|
|
8250
8661
|
`;
|
|
8251
|
-
var heading3TextStyle =
|
|
8662
|
+
var heading3TextStyle = import_styled_components29.css`
|
|
8252
8663
|
--font-family: var(--wui-typography-heading-3-family);
|
|
8253
8664
|
--font-size: var(--wui-typography-heading-3-size);
|
|
8254
8665
|
--font-weight: var(--wui-typography-heading-3-weight);
|
|
8255
8666
|
--line-height: var(--wui-typography-heading-3-line-height);
|
|
8256
8667
|
`;
|
|
8257
|
-
var heading4TextStyle =
|
|
8668
|
+
var heading4TextStyle = import_styled_components29.css`
|
|
8258
8669
|
--font-family: var(--wui-typography-heading-4-family);
|
|
8259
8670
|
--font-size: var(--wui-typography-heading-4-size);
|
|
8260
8671
|
--font-weight: var(--wui-typography-heading-4-weight);
|
|
8261
8672
|
--line-height: var(--wui-typography-heading-4-line-height);
|
|
8262
8673
|
`;
|
|
8263
|
-
var heading5TextStyle =
|
|
8674
|
+
var heading5TextStyle = import_styled_components29.css`
|
|
8264
8675
|
--font-family: var(--wui-typography-heading-5-family);
|
|
8265
8676
|
--font-size: var(--wui-typography-heading-5-size);
|
|
8266
8677
|
--font-weight: var(--wui-typography-heading-5-weight);
|
|
8267
8678
|
--line-height: var(--wui-typography-heading-5-line-height);
|
|
8268
8679
|
`;
|
|
8269
|
-
var heading6TextStyle =
|
|
8680
|
+
var heading6TextStyle = import_styled_components29.css`
|
|
8270
8681
|
--font-family: var(--wui-typography-heading-6-family);
|
|
8271
8682
|
--font-size: var(--wui-typography-heading-6-size);
|
|
8272
8683
|
--font-weight: var(--wui-typography-heading-6-weight);
|
|
@@ -8282,7 +8693,7 @@ var variantStyleMap = {
|
|
|
8282
8693
|
heading6: heading6TextStyle
|
|
8283
8694
|
};
|
|
8284
8695
|
var DEFAULT_ELEMENT2 = "h1";
|
|
8285
|
-
var StyledHeading =
|
|
8696
|
+
var StyledHeading = import_styled_components29.default.div`
|
|
8286
8697
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8287
8698
|
--text-color: ${({ $prominence, $disabled }) => {
|
|
8288
8699
|
if ($disabled) {
|
|
@@ -8305,20 +8716,20 @@ var StyledHeading = import_styled_components28.default.div`
|
|
|
8305
8716
|
${({ $variant }) => variantStyleMap[$variant]}
|
|
8306
8717
|
${({ $truncate }) => {
|
|
8307
8718
|
if ((0, import_type_guards21.isNotNil)($truncate)) {
|
|
8308
|
-
return
|
|
8719
|
+
return import_styled_components29.css`
|
|
8309
8720
|
${ellipsisStyle};
|
|
8310
8721
|
${lineClampCss($truncate)};
|
|
8311
8722
|
`;
|
|
8312
8723
|
}
|
|
8313
8724
|
return void 0;
|
|
8314
8725
|
}}
|
|
8315
|
-
${({ $inline }) => $inline &&
|
|
8726
|
+
${({ $inline }) => $inline && import_styled_components29.css`
|
|
8316
8727
|
display: inline-block;
|
|
8317
8728
|
`}
|
|
8318
|
-
${({ $preventUserSelect }) => $preventUserSelect &&
|
|
8729
|
+
${({ $preventUserSelect }) => $preventUserSelect && import_styled_components29.css`
|
|
8319
8730
|
user-select: none;
|
|
8320
8731
|
`}
|
|
8321
|
-
${({ $align }) =>
|
|
8732
|
+
${({ $align }) => import_styled_components29.css`
|
|
8322
8733
|
text-align: ${$align};
|
|
8323
8734
|
`}
|
|
8324
8735
|
margin: 0;
|
|
@@ -8368,10 +8779,10 @@ var Heading = makePolymorphic(HeadingComponent);
|
|
|
8368
8779
|
|
|
8369
8780
|
// src/components/Text/Text.tsx
|
|
8370
8781
|
var import_react29 = require("react");
|
|
8371
|
-
var
|
|
8782
|
+
var import_styled_components30 = __toESM(require("styled-components"));
|
|
8372
8783
|
var import_type_guards22 = require("@wistia/type-guards");
|
|
8373
8784
|
var import_jsx_runtime206 = require("react/jsx-runtime");
|
|
8374
|
-
var sharedBodyStyle =
|
|
8785
|
+
var sharedBodyStyle = import_styled_components30.css`
|
|
8375
8786
|
> strong,
|
|
8376
8787
|
b {
|
|
8377
8788
|
font-weight: var(--wui-typography-weight-body-bold);
|
|
@@ -8381,7 +8792,7 @@ var sharedBodyStyle = import_styled_components29.css`
|
|
|
8381
8792
|
font-weight: var(--wui-typography-weight-body-mark);
|
|
8382
8793
|
}
|
|
8383
8794
|
`;
|
|
8384
|
-
var labelBoldStyles =
|
|
8795
|
+
var labelBoldStyles = import_styled_components30.css`
|
|
8385
8796
|
> strong,
|
|
8386
8797
|
b {
|
|
8387
8798
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
@@ -8391,7 +8802,7 @@ var labelBoldStyles = import_styled_components29.css`
|
|
|
8391
8802
|
font-weight: var(--wui-typography-weight-label-mark);
|
|
8392
8803
|
}
|
|
8393
8804
|
`;
|
|
8394
|
-
var body1TextStyle =
|
|
8805
|
+
var body1TextStyle = import_styled_components30.css`
|
|
8395
8806
|
--font-family: var(--wui-typography-body-1-family);
|
|
8396
8807
|
--font-size: var(--wui-typography-body-1-size);
|
|
8397
8808
|
--font-weight: var(--wui-typography-body-1-weight);
|
|
@@ -8399,7 +8810,7 @@ var body1TextStyle = import_styled_components29.css`
|
|
|
8399
8810
|
--paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
|
|
8400
8811
|
${sharedBodyStyle}
|
|
8401
8812
|
`;
|
|
8402
|
-
var body2TextStyle =
|
|
8813
|
+
var body2TextStyle = import_styled_components30.css`
|
|
8403
8814
|
--font-family: var(--wui-typography-body-2-family);
|
|
8404
8815
|
--font-size: var(--wui-typography-body-2-size);
|
|
8405
8816
|
--font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -8407,7 +8818,7 @@ var body2TextStyle = import_styled_components29.css`
|
|
|
8407
8818
|
--paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
|
|
8408
8819
|
${sharedBodyStyle}
|
|
8409
8820
|
`;
|
|
8410
|
-
var body3TextStyle =
|
|
8821
|
+
var body3TextStyle = import_styled_components30.css`
|
|
8411
8822
|
--font-family: var(--wui-typography-body-3-family);
|
|
8412
8823
|
--font-size: var(--wui-typography-body-3-size);
|
|
8413
8824
|
--font-weight: var(--wui-typography-body-3-weight);
|
|
@@ -8415,7 +8826,7 @@ var body3TextStyle = import_styled_components29.css`
|
|
|
8415
8826
|
--paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
|
|
8416
8827
|
${sharedBodyStyle}
|
|
8417
8828
|
`;
|
|
8418
|
-
var body4TextStyle =
|
|
8829
|
+
var body4TextStyle = import_styled_components30.css`
|
|
8419
8830
|
--font-family: var(--wui-typography-body-4-family);
|
|
8420
8831
|
--font-size: var(--wui-typography-body-4-size);
|
|
8421
8832
|
--font-weight: var(--wui-typography-body-4-weight);
|
|
@@ -8423,47 +8834,47 @@ var body4TextStyle = import_styled_components29.css`
|
|
|
8423
8834
|
--paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
|
|
8424
8835
|
${sharedBodyStyle}
|
|
8425
8836
|
`;
|
|
8426
|
-
var label1TextStyle =
|
|
8837
|
+
var label1TextStyle = import_styled_components30.css`
|
|
8427
8838
|
--font-family: var(--wui-typography-label-1-family);
|
|
8428
8839
|
--font-size: var(--wui-typography-label-1-size);
|
|
8429
8840
|
--font-weight: var(--wui-typography-label-1-weight);
|
|
8430
8841
|
--line-height: var(--wui-typography-label-1-line-height);
|
|
8431
8842
|
${labelBoldStyles}
|
|
8432
8843
|
`;
|
|
8433
|
-
var label2TextStyle =
|
|
8844
|
+
var label2TextStyle = import_styled_components30.css`
|
|
8434
8845
|
--font-family: var(--wui-typography-label-2-family);
|
|
8435
8846
|
--font-size: var(--wui-typography-label-2-size);
|
|
8436
8847
|
--font-weight: var(--wui-typography-label-2-weight);
|
|
8437
8848
|
--line-height: var(--wui-typography-label-2-line-height);
|
|
8438
8849
|
${labelBoldStyles}
|
|
8439
8850
|
`;
|
|
8440
|
-
var label3TextStyle =
|
|
8851
|
+
var label3TextStyle = import_styled_components30.css`
|
|
8441
8852
|
--font-family: var(--wui-typography-label-3-family);
|
|
8442
8853
|
--font-size: var(--wui-typography-label-3-size);
|
|
8443
8854
|
--font-weight: var(--wui-typography-label-3-weight);
|
|
8444
8855
|
--line-height: var(--wui-typography-label-3-line-height);
|
|
8445
8856
|
${labelBoldStyles}
|
|
8446
8857
|
`;
|
|
8447
|
-
var label4TextStyle =
|
|
8858
|
+
var label4TextStyle = import_styled_components30.css`
|
|
8448
8859
|
--font-family: var(--wui-typography-label-4-family);
|
|
8449
8860
|
--font-size: var(--wui-typography-label-4-size);
|
|
8450
8861
|
--font-weight: var(--wui-typography-label-4-weight);
|
|
8451
8862
|
--line-height: var(--wui-typography-label-4-line-height);
|
|
8452
8863
|
${labelBoldStyles}
|
|
8453
8864
|
`;
|
|
8454
|
-
var body1MonoTextStyle =
|
|
8865
|
+
var body1MonoTextStyle = import_styled_components30.css`
|
|
8455
8866
|
${body1TextStyle};
|
|
8456
8867
|
--font-family: var(--wui-typography-family-mono);
|
|
8457
8868
|
`;
|
|
8458
|
-
var body2MonoTextStyle =
|
|
8869
|
+
var body2MonoTextStyle = import_styled_components30.css`
|
|
8459
8870
|
${body2TextStyle};
|
|
8460
8871
|
--font-family: var(--wui-typography-family-mono);
|
|
8461
8872
|
`;
|
|
8462
|
-
var body3MonoTextStyle =
|
|
8873
|
+
var body3MonoTextStyle = import_styled_components30.css`
|
|
8463
8874
|
${body3TextStyle};
|
|
8464
8875
|
--font-family: var(--wui-typography-family-mono);
|
|
8465
8876
|
`;
|
|
8466
|
-
var body4MonoTextStyle =
|
|
8877
|
+
var body4MonoTextStyle = import_styled_components30.css`
|
|
8467
8878
|
${body4TextStyle};
|
|
8468
8879
|
--font-family: var(--wui-typography-family-mono);
|
|
8469
8880
|
`;
|
|
@@ -8498,7 +8909,7 @@ var variantElementMap2 = {
|
|
|
8498
8909
|
label3: labelElement,
|
|
8499
8910
|
label4: labelElement
|
|
8500
8911
|
};
|
|
8501
|
-
var StyledText =
|
|
8912
|
+
var StyledText = import_styled_components30.default.div`
|
|
8502
8913
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8503
8914
|
--text-color: ${({ $prominence, $disabled }) => {
|
|
8504
8915
|
if ($disabled) {
|
|
@@ -8524,26 +8935,26 @@ var StyledText = import_styled_components29.default.div`
|
|
|
8524
8935
|
${({ $variant }) => variantStyleMap2[$variant]}
|
|
8525
8936
|
${({ $truncate }) => {
|
|
8526
8937
|
if ((0, import_type_guards22.isNotNil)($truncate)) {
|
|
8527
|
-
return
|
|
8938
|
+
return import_styled_components30.css`
|
|
8528
8939
|
${ellipsisStyle};
|
|
8529
8940
|
${lineClampCss($truncate)};
|
|
8530
8941
|
`;
|
|
8531
8942
|
}
|
|
8532
8943
|
return void 0;
|
|
8533
8944
|
}}
|
|
8534
|
-
${({ $inline }) => $inline &&
|
|
8945
|
+
${({ $inline }) => $inline && import_styled_components30.css`
|
|
8535
8946
|
display: inline-block;
|
|
8536
8947
|
`}
|
|
8537
|
-
${({ $disabled }) => $disabled &&
|
|
8948
|
+
${({ $disabled }) => $disabled && import_styled_components30.css`
|
|
8538
8949
|
--text-color: var(--wui-color-text-disabled);
|
|
8539
8950
|
`}
|
|
8540
|
-
${({ $preventUserSelect }) => $preventUserSelect &&
|
|
8951
|
+
${({ $preventUserSelect }) => $preventUserSelect && import_styled_components30.css`
|
|
8541
8952
|
user-select: none;
|
|
8542
8953
|
`}
|
|
8543
|
-
${({ $align }) =>
|
|
8954
|
+
${({ $align }) => import_styled_components30.css`
|
|
8544
8955
|
text-align: ${$align};
|
|
8545
8956
|
`}
|
|
8546
|
-
${({ as }) => as === "p" &&
|
|
8957
|
+
${({ as }) => as === "p" && import_styled_components30.css`
|
|
8547
8958
|
display: block;
|
|
8548
8959
|
|
|
8549
8960
|
+ p {
|
|
@@ -8586,7 +8997,7 @@ TextComponent.displayName = "Text_UI";
|
|
|
8586
8997
|
var Text = makePolymorphic(TextComponent);
|
|
8587
8998
|
|
|
8588
8999
|
// src/components/ButtonGroup/ButtonGroup.tsx
|
|
8589
|
-
var
|
|
9000
|
+
var import_styled_components31 = __toESM(require("styled-components"));
|
|
8590
9001
|
var import_type_guards23 = require("@wistia/type-guards");
|
|
8591
9002
|
var import_jsx_runtime207 = require("react/jsx-runtime");
|
|
8592
9003
|
var getAlignment = (align) => {
|
|
@@ -8601,7 +9012,7 @@ var getAlignment = (align) => {
|
|
|
8601
9012
|
}
|
|
8602
9013
|
return "flex-start";
|
|
8603
9014
|
};
|
|
8604
|
-
var ButtonGroupComponent =
|
|
9015
|
+
var ButtonGroupComponent = import_styled_components31.default.div`
|
|
8605
9016
|
display: flex;
|
|
8606
9017
|
|
|
8607
9018
|
/* this helps ensure that primary buttons appear at the top of the column */
|
|
@@ -8626,7 +9037,7 @@ var ButtonGroupComponent = import_styled_components30.default.div`
|
|
|
8626
9037
|
}
|
|
8627
9038
|
}
|
|
8628
9039
|
|
|
8629
|
-
${({ $buttonSize }) => $buttonSize !== "natural" &&
|
|
9040
|
+
${({ $buttonSize }) => $buttonSize !== "natural" && import_styled_components31.css`
|
|
8630
9041
|
button,
|
|
8631
9042
|
a {
|
|
8632
9043
|
${buttonSizeStyles[$buttonSize]}
|
|
@@ -8666,9 +9077,9 @@ ButtonGroup.displayName = "ButtonGroup_UI";
|
|
|
8666
9077
|
|
|
8667
9078
|
// src/components/IconButton/IconButton.tsx
|
|
8668
9079
|
var import_react30 = require("react");
|
|
8669
|
-
var
|
|
9080
|
+
var import_styled_components32 = __toESM(require("styled-components"));
|
|
8670
9081
|
var import_jsx_runtime208 = require("react/jsx-runtime");
|
|
8671
|
-
var StyledButton2 = (0,
|
|
9082
|
+
var StyledButton2 = (0, import_styled_components32.default)(Button)`
|
|
8672
9083
|
--icon-button-size-sm: 24px;
|
|
8673
9084
|
--icon-button-size-md: 32px;
|
|
8674
9085
|
--icon-button-size-lg: 40px;
|
|
@@ -8707,7 +9118,7 @@ var import_jsx_runtime209 = require("react/jsx-runtime");
|
|
|
8707
9118
|
var BREAKPOINT_WIDTH = 600;
|
|
8708
9119
|
var VERTICAL_BREAKPOINT_WIDTH = 284;
|
|
8709
9120
|
var MIN_IMAGE_WIDTH = 400;
|
|
8710
|
-
var StyledBanner =
|
|
9121
|
+
var StyledBanner = import_styled_components33.default.div`
|
|
8711
9122
|
--wui-banner-padding: var(--wui-space-04);
|
|
8712
9123
|
--wui-banner-content-height: ${({ $contentHeight }) => $contentHeight}px;
|
|
8713
9124
|
|
|
@@ -8867,9 +9278,9 @@ Banner.displayName = "Banner_UI";
|
|
|
8867
9278
|
|
|
8868
9279
|
// src/components/Breadcrumbs/Breadcrumbs.tsx
|
|
8869
9280
|
var import_react32 = require("react");
|
|
8870
|
-
var
|
|
9281
|
+
var import_styled_components34 = __toESM(require("styled-components"));
|
|
8871
9282
|
var import_jsx_runtime210 = require("react/jsx-runtime");
|
|
8872
|
-
var StyledBreadcrumbs =
|
|
9283
|
+
var StyledBreadcrumbs = import_styled_components34.default.nav`
|
|
8873
9284
|
display: flex;
|
|
8874
9285
|
align-items: center;
|
|
8875
9286
|
gap: var(--wui-space-01);
|
|
@@ -8914,9 +9325,9 @@ var Breadcrumbs = ({ children, ...props }) => {
|
|
|
8914
9325
|
Breadcrumbs.displayName = "Breadcrumbs_UI";
|
|
8915
9326
|
|
|
8916
9327
|
// src/components/Breadcrumbs/Breadcrumb.tsx
|
|
8917
|
-
var
|
|
9328
|
+
var import_styled_components35 = __toESM(require("styled-components"));
|
|
8918
9329
|
var import_jsx_runtime211 = require("react/jsx-runtime");
|
|
8919
|
-
var BreadcrumbContent =
|
|
9330
|
+
var BreadcrumbContent = import_styled_components35.default.span`
|
|
8920
9331
|
overflow: hidden;
|
|
8921
9332
|
white-space: nowrap;
|
|
8922
9333
|
display: block;
|
|
@@ -8948,9 +9359,9 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
|
|
|
8948
9359
|
};
|
|
8949
9360
|
|
|
8950
9361
|
// src/components/Card/Card.tsx
|
|
8951
|
-
var
|
|
9362
|
+
var import_styled_components36 = __toESM(require("styled-components"));
|
|
8952
9363
|
var import_jsx_runtime212 = require("react/jsx-runtime");
|
|
8953
|
-
var StyledCard = (0,
|
|
9364
|
+
var StyledCard = (0, import_styled_components36.default)(Box)`
|
|
8954
9365
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8955
9366
|
box-sizing: border-box;
|
|
8956
9367
|
padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
|
|
@@ -9008,9 +9419,9 @@ Card.displayName = "Card_UI";
|
|
|
9008
9419
|
|
|
9009
9420
|
// src/components/Center/Center.tsx
|
|
9010
9421
|
var import_react33 = require("react");
|
|
9011
|
-
var
|
|
9422
|
+
var import_styled_components37 = __toESM(require("styled-components"));
|
|
9012
9423
|
var import_jsx_runtime213 = require("react/jsx-runtime");
|
|
9013
|
-
var StyledCenter =
|
|
9424
|
+
var StyledCenter = import_styled_components37.default.div`
|
|
9014
9425
|
box-sizing: border-box;
|
|
9015
9426
|
margin-left: auto;
|
|
9016
9427
|
margin-right: auto;
|
|
@@ -9040,18 +9451,18 @@ Center.displayName = "Center_UI";
|
|
|
9040
9451
|
// src/components/Checkbox/Checkbox.tsx
|
|
9041
9452
|
var import_type_guards31 = require("@wistia/type-guards");
|
|
9042
9453
|
var import_react38 = require("react");
|
|
9043
|
-
var
|
|
9454
|
+
var import_styled_components44 = __toESM(require("styled-components"));
|
|
9044
9455
|
|
|
9045
9456
|
// src/private/components/FormControlLabel/FormControlLabel.tsx
|
|
9046
9457
|
var import_type_guards27 = require("@wistia/type-guards");
|
|
9047
|
-
var
|
|
9458
|
+
var import_styled_components40 = __toESM(require("styled-components"));
|
|
9048
9459
|
|
|
9049
9460
|
// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
|
|
9050
|
-
var
|
|
9461
|
+
var import_styled_components38 = __toESM(require("styled-components"));
|
|
9051
9462
|
var import_type_guards25 = require("@wistia/type-guards");
|
|
9052
9463
|
var import_jsx_runtime214 = require("react/jsx-runtime");
|
|
9053
|
-
var VisuallyHidden =
|
|
9054
|
-
var VisuallyHiddenButFocusable =
|
|
9464
|
+
var VisuallyHidden = import_styled_components38.default.div({ ...visuallyHiddenStyle });
|
|
9465
|
+
var VisuallyHiddenButFocusable = import_styled_components38.default.div({
|
|
9055
9466
|
"&:not(:focus-within)": visuallyHiddenStyle
|
|
9056
9467
|
});
|
|
9057
9468
|
var ScreenReaderOnly = ({
|
|
@@ -9069,13 +9480,13 @@ var ScreenReaderOnly = ({
|
|
|
9069
9480
|
ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
|
|
9070
9481
|
|
|
9071
9482
|
// src/private/components/FormControlLabel/FormControlLabelDescription.tsx
|
|
9072
|
-
var
|
|
9483
|
+
var import_styled_components39 = __toESM(require("styled-components"));
|
|
9073
9484
|
var import_type_guards26 = require("@wistia/type-guards");
|
|
9074
9485
|
var import_jsx_runtime215 = require("react/jsx-runtime");
|
|
9075
|
-
var disabledStyle =
|
|
9486
|
+
var disabledStyle = import_styled_components39.css`
|
|
9076
9487
|
color: var(--wui-color-text-disabled);
|
|
9077
9488
|
`;
|
|
9078
|
-
var StyledFormControlLabelDescription =
|
|
9489
|
+
var StyledFormControlLabelDescription = import_styled_components39.default.div`
|
|
9079
9490
|
color: var(--wui-color-text-secondary);
|
|
9080
9491
|
display: block;
|
|
9081
9492
|
font-size: var(--wui-typography-body-4-size);
|
|
@@ -9105,15 +9516,15 @@ FormControlLabelDescription.displayName = "FormControlLabelDescription";
|
|
|
9105
9516
|
|
|
9106
9517
|
// src/private/components/FormControlLabel/FormControlLabel.tsx
|
|
9107
9518
|
var import_jsx_runtime216 = require("react/jsx-runtime");
|
|
9108
|
-
var disabledStyle2 =
|
|
9519
|
+
var disabledStyle2 = import_styled_components40.css`
|
|
9109
9520
|
cursor: not-allowed;
|
|
9110
9521
|
color: var(--wui-color-text-disabled);
|
|
9111
9522
|
`;
|
|
9112
|
-
var StyledLabelWrapper =
|
|
9523
|
+
var StyledLabelWrapper = import_styled_components40.default.div`
|
|
9113
9524
|
display: flex;
|
|
9114
9525
|
flex-direction: column;
|
|
9115
9526
|
`;
|
|
9116
|
-
var StyledFormControlLabel =
|
|
9527
|
+
var StyledFormControlLabel = import_styled_components40.default.label`
|
|
9117
9528
|
cursor: pointer;
|
|
9118
9529
|
display: flex;
|
|
9119
9530
|
align-items: flex-start;
|
|
@@ -9166,16 +9577,16 @@ var import_react37 = require("react");
|
|
|
9166
9577
|
var import_type_guards30 = require("@wistia/type-guards");
|
|
9167
9578
|
|
|
9168
9579
|
// src/components/FormGroup/FormGroup.tsx
|
|
9169
|
-
var
|
|
9580
|
+
var import_styled_components42 = __toESM(require("styled-components"));
|
|
9170
9581
|
var import_react35 = require("react");
|
|
9171
9582
|
var import_type_guards28 = require("@wistia/type-guards");
|
|
9172
9583
|
|
|
9173
9584
|
// src/components/Stack/Stack.tsx
|
|
9174
9585
|
var import_react34 = require("react");
|
|
9175
|
-
var
|
|
9586
|
+
var import_styled_components41 = __toESM(require("styled-components"));
|
|
9176
9587
|
var import_jsx_runtime217 = require("react/jsx-runtime");
|
|
9177
9588
|
var DEFAULT_ELEMENT4 = "div";
|
|
9178
|
-
var StyledStack =
|
|
9589
|
+
var StyledStack = import_styled_components41.default.div`
|
|
9179
9590
|
display: flex;
|
|
9180
9591
|
flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
|
|
9181
9592
|
gap: ${({ $gap }) => `var(--wui-${$gap})`};
|
|
@@ -9204,12 +9615,12 @@ var Stack = makePolymorphic(StackComponent);
|
|
|
9204
9615
|
|
|
9205
9616
|
// src/components/FormGroup/FormGroup.tsx
|
|
9206
9617
|
var import_jsx_runtime218 = require("react/jsx-runtime");
|
|
9207
|
-
var StyledFieldset =
|
|
9618
|
+
var StyledFieldset = import_styled_components42.default.fieldset`
|
|
9208
9619
|
padding: 0;
|
|
9209
9620
|
margin: 0;
|
|
9210
9621
|
border: 0;
|
|
9211
9622
|
`;
|
|
9212
|
-
var StyledLegend =
|
|
9623
|
+
var StyledLegend = import_styled_components42.default.legend`
|
|
9213
9624
|
padding-inline: 0;
|
|
9214
9625
|
display: flex;
|
|
9215
9626
|
flex-direction: column;
|
|
@@ -9261,7 +9672,7 @@ FormGroup.displayName = "FormGroup_UI";
|
|
|
9261
9672
|
|
|
9262
9673
|
// src/components/Form/Form.tsx
|
|
9263
9674
|
var import_react36 = require("react");
|
|
9264
|
-
var
|
|
9675
|
+
var import_styled_components43 = __toESM(require("styled-components"));
|
|
9265
9676
|
var import_type_guards29 = require("@wistia/type-guards");
|
|
9266
9677
|
|
|
9267
9678
|
// src/components/Form/serializeFormData.tsx
|
|
@@ -9281,7 +9692,7 @@ var serializeFormData = (formData) => {
|
|
|
9281
9692
|
|
|
9282
9693
|
// src/components/Form/Form.tsx
|
|
9283
9694
|
var import_jsx_runtime219 = require("react/jsx-runtime");
|
|
9284
|
-
var StyledForm =
|
|
9695
|
+
var StyledForm = import_styled_components43.default.form`
|
|
9285
9696
|
--form-default-width: 690px;
|
|
9286
9697
|
|
|
9287
9698
|
max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
|
|
@@ -9425,15 +9836,15 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
|
|
|
9425
9836
|
)
|
|
9426
9837
|
}
|
|
9427
9838
|
);
|
|
9428
|
-
var sizeSmall =
|
|
9839
|
+
var sizeSmall = import_styled_components44.css`
|
|
9429
9840
|
--wui-checkbox-size: 14px;
|
|
9430
9841
|
--wui-checkbox-icon-size: 7px;
|
|
9431
9842
|
`;
|
|
9432
|
-
var sizeMedium =
|
|
9843
|
+
var sizeMedium = import_styled_components44.css`
|
|
9433
9844
|
--wui-checkbox-size: 16px;
|
|
9434
9845
|
--wui-checkbox-icon-size: 9px;
|
|
9435
9846
|
`;
|
|
9436
|
-
var sizeLarge =
|
|
9847
|
+
var sizeLarge = import_styled_components44.css`
|
|
9437
9848
|
--wui-checkbox-size: 20px;
|
|
9438
9849
|
--wui-checkbox-icon-size: 11px;
|
|
9439
9850
|
`;
|
|
@@ -9442,7 +9853,7 @@ var getSizeCss = (size) => {
|
|
|
9442
9853
|
if (size === "lg") return sizeLarge;
|
|
9443
9854
|
return sizeMedium;
|
|
9444
9855
|
};
|
|
9445
|
-
var StyledCheckboxWrapper =
|
|
9856
|
+
var StyledCheckboxWrapper = import_styled_components44.default.div`
|
|
9446
9857
|
--wui-checkbox-background-color: var(--wui-color-bg-surface);
|
|
9447
9858
|
--wui-checkbox-border-color: var(--wui-color-border-secondary);
|
|
9448
9859
|
--wui-checkbox-icon-color: transparent;
|
|
@@ -9479,7 +9890,7 @@ var StyledCheckboxWrapper = import_styled_components43.default.div`
|
|
|
9479
9890
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
9480
9891
|
user-select: none;
|
|
9481
9892
|
`;
|
|
9482
|
-
var StyledCheckboxInput =
|
|
9893
|
+
var StyledCheckboxInput = import_styled_components44.default.div`
|
|
9483
9894
|
${({ $size }) => getSizeCss($size)}
|
|
9484
9895
|
margin: 0;
|
|
9485
9896
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -9506,7 +9917,7 @@ var StyledCheckboxInput = import_styled_components43.default.div`
|
|
|
9506
9917
|
height: var(--wui-checkbox-icon-size);
|
|
9507
9918
|
}
|
|
9508
9919
|
`;
|
|
9509
|
-
var StyledHiddenCheckboxInput =
|
|
9920
|
+
var StyledHiddenCheckboxInput = import_styled_components44.default.input`
|
|
9510
9921
|
${visuallyHiddenStyle}
|
|
9511
9922
|
position: relative;
|
|
9512
9923
|
`;
|
|
@@ -9627,9 +10038,9 @@ ClickRegion.displayName = "ClickRegion_UI";
|
|
|
9627
10038
|
// src/components/Collapsible/Collapsible.tsx
|
|
9628
10039
|
var import_react_collapsible = require("@radix-ui/react-collapsible");
|
|
9629
10040
|
var import_type_guards32 = require("@wistia/type-guards");
|
|
9630
|
-
var
|
|
10041
|
+
var import_styled_components45 = __toESM(require("styled-components"));
|
|
9631
10042
|
var import_jsx_runtime222 = require("react/jsx-runtime");
|
|
9632
|
-
var StyledRoot = (0,
|
|
10043
|
+
var StyledRoot = (0, import_styled_components45.default)(import_react_collapsible.Root)`
|
|
9633
10044
|
&[data-state='closed'] [data-wui-collapsible-content] {
|
|
9634
10045
|
display: -webkit-box;
|
|
9635
10046
|
-webkit-box-orient: vertical;
|
|
@@ -9652,9 +10063,9 @@ Collapsible.displayName = "Collapsible_UI";
|
|
|
9652
10063
|
// src/components/Collapsible/CollapsibleTrigger.tsx
|
|
9653
10064
|
var import_react40 = require("react");
|
|
9654
10065
|
var import_react_collapsible2 = require("@radix-ui/react-collapsible");
|
|
9655
|
-
var
|
|
10066
|
+
var import_styled_components46 = __toESM(require("styled-components"));
|
|
9656
10067
|
var import_jsx_runtime223 = require("react/jsx-runtime");
|
|
9657
|
-
var StyledTrigger = (0,
|
|
10068
|
+
var StyledTrigger = (0, import_styled_components46.default)(import_react_collapsible2.Trigger)`
|
|
9658
10069
|
[data-wui-collapsible-icon] {
|
|
9659
10070
|
transition: transform var(--wui-motion-duration-03) ease-in-out;
|
|
9660
10071
|
}
|
|
@@ -9703,11 +10114,11 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
|
|
|
9703
10114
|
CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
|
|
9704
10115
|
|
|
9705
10116
|
// src/components/Collapsible/CollapsibleContent.tsx
|
|
9706
|
-
var
|
|
10117
|
+
var import_styled_components47 = __toESM(require("styled-components"));
|
|
9707
10118
|
var import_react_collapsible3 = require("@radix-ui/react-collapsible");
|
|
9708
10119
|
var import_type_guards33 = require("@wistia/type-guards");
|
|
9709
10120
|
var import_jsx_runtime225 = require("react/jsx-runtime");
|
|
9710
|
-
var ClampedContent =
|
|
10121
|
+
var ClampedContent = import_styled_components47.default.div`
|
|
9711
10122
|
--wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
|
|
9712
10123
|
`;
|
|
9713
10124
|
var CollapsibleContent = ({ clamp, children }) => {
|
|
@@ -9729,7 +10140,7 @@ var CollapsibleContent = ({ clamp, children }) => {
|
|
|
9729
10140
|
|
|
9730
10141
|
// src/components/ColorPicker/ColorGrid.tsx
|
|
9731
10142
|
var import_react42 = require("react");
|
|
9732
|
-
var
|
|
10143
|
+
var import_styled_components49 = __toESM(require("styled-components"));
|
|
9733
10144
|
var import_react_radio_group = require("@radix-ui/react-radio-group");
|
|
9734
10145
|
|
|
9735
10146
|
// src/components/ColorPicker/ColorPickerContext.tsx
|
|
@@ -10273,9 +10684,9 @@ var useColorPickerState = () => {
|
|
|
10273
10684
|
};
|
|
10274
10685
|
|
|
10275
10686
|
// src/components/Label/Label.tsx
|
|
10276
|
-
var
|
|
10687
|
+
var import_styled_components48 = __toESM(require("styled-components"));
|
|
10277
10688
|
var import_jsx_runtime227 = require("react/jsx-runtime");
|
|
10278
|
-
var requiredStyle =
|
|
10689
|
+
var requiredStyle = import_styled_components48.css`
|
|
10279
10690
|
&::after {
|
|
10280
10691
|
color: var(--wui-color-text-error);
|
|
10281
10692
|
display: inline;
|
|
@@ -10283,10 +10694,10 @@ var requiredStyle = import_styled_components47.css`
|
|
|
10283
10694
|
content: '*';
|
|
10284
10695
|
}
|
|
10285
10696
|
`;
|
|
10286
|
-
var disabledStyle3 =
|
|
10697
|
+
var disabledStyle3 = import_styled_components48.css`
|
|
10287
10698
|
color: var(--wui-color-text-disabled);
|
|
10288
10699
|
`;
|
|
10289
|
-
var StyledLabel2 =
|
|
10700
|
+
var StyledLabel2 = import_styled_components48.default.label`
|
|
10290
10701
|
display: block;
|
|
10291
10702
|
width: 100%;
|
|
10292
10703
|
color: var(--wui-color-text);
|
|
@@ -10334,15 +10745,15 @@ Label.displayName = "Label_UI";
|
|
|
10334
10745
|
|
|
10335
10746
|
// src/components/ColorPicker/ColorGrid.tsx
|
|
10336
10747
|
var import_jsx_runtime228 = require("react/jsx-runtime");
|
|
10337
|
-
var Container =
|
|
10748
|
+
var Container = import_styled_components49.default.div`
|
|
10338
10749
|
display: grid;
|
|
10339
10750
|
gap: var(--wui-space-01);
|
|
10340
10751
|
grid-template-columns: minmax(0, 1fr);
|
|
10341
10752
|
`;
|
|
10342
|
-
var LabelContainer =
|
|
10753
|
+
var LabelContainer = import_styled_components49.default.div`
|
|
10343
10754
|
padding-top: var(--wui-space-01);
|
|
10344
10755
|
`;
|
|
10345
|
-
var ItemsContainer = (0,
|
|
10756
|
+
var ItemsContainer = (0, import_styled_components49.default)(import_react_radio_group.Root)`
|
|
10346
10757
|
display: flex;
|
|
10347
10758
|
flex-wrap: wrap;
|
|
10348
10759
|
align-items: center;
|
|
@@ -10374,14 +10785,14 @@ var ColorGrid = ({ children, label }) => {
|
|
|
10374
10785
|
ColorGrid.displayName = "ColorGrid_UI";
|
|
10375
10786
|
|
|
10376
10787
|
// src/components/ColorPicker/ColorGridOption.tsx
|
|
10377
|
-
var
|
|
10788
|
+
var import_styled_components52 = __toESM(require("styled-components"));
|
|
10378
10789
|
var import_react_radio_group2 = require("@radix-ui/react-radio-group");
|
|
10379
10790
|
var import_fn5 = require("culori/fn");
|
|
10380
10791
|
|
|
10381
10792
|
// src/components/ColorPicker/ColorSwatch.tsx
|
|
10382
|
-
var
|
|
10793
|
+
var import_styled_components50 = __toESM(require("styled-components"));
|
|
10383
10794
|
var import_jsx_runtime229 = require("react/jsx-runtime");
|
|
10384
|
-
var ColorSwatchDiv =
|
|
10795
|
+
var ColorSwatchDiv = import_styled_components50.default.div`
|
|
10385
10796
|
aspect-ratio: 1;
|
|
10386
10797
|
width: ${({ $diameterPx }) => `${$diameterPx}px`};
|
|
10387
10798
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -10400,7 +10811,7 @@ var ColorSwatchDiv = import_styled_components49.default.div`
|
|
|
10400
10811
|
outline-offset: 2px;
|
|
10401
10812
|
transform: ${({ $selected }) => $selected ? "scale(0.9)" : "scale(1)"};
|
|
10402
10813
|
`;
|
|
10403
|
-
var DerivativeHalfCircle =
|
|
10814
|
+
var DerivativeHalfCircle = import_styled_components50.default.div`
|
|
10404
10815
|
position: absolute;
|
|
10405
10816
|
right: 0;
|
|
10406
10817
|
top: 0;
|
|
@@ -10437,9 +10848,9 @@ var ColorSwatch = ({
|
|
|
10437
10848
|
|
|
10438
10849
|
// src/components/Tooltip/Tooltip.tsx
|
|
10439
10850
|
var import_react_tooltip2 = require("@radix-ui/react-tooltip");
|
|
10440
|
-
var
|
|
10851
|
+
var import_styled_components51 = __toESM(require("styled-components"));
|
|
10441
10852
|
var import_jsx_runtime230 = require("react/jsx-runtime");
|
|
10442
|
-
var hide =
|
|
10853
|
+
var hide = import_styled_components51.keyframes`
|
|
10443
10854
|
from {
|
|
10444
10855
|
opacity: 1;
|
|
10445
10856
|
}
|
|
@@ -10447,7 +10858,7 @@ var hide = import_styled_components50.keyframes`
|
|
|
10447
10858
|
opacity: 0;
|
|
10448
10859
|
}
|
|
10449
10860
|
`;
|
|
10450
|
-
var slideDownAndFade =
|
|
10861
|
+
var slideDownAndFade = import_styled_components51.keyframes`
|
|
10451
10862
|
from {
|
|
10452
10863
|
opacity: 0;
|
|
10453
10864
|
transform: translateY(-6px);
|
|
@@ -10457,7 +10868,7 @@ var slideDownAndFade = import_styled_components50.keyframes`
|
|
|
10457
10868
|
transform: translateY(0);
|
|
10458
10869
|
}
|
|
10459
10870
|
`;
|
|
10460
|
-
var slideLeftAndFade =
|
|
10871
|
+
var slideLeftAndFade = import_styled_components51.keyframes`
|
|
10461
10872
|
from {
|
|
10462
10873
|
opacity: 0;
|
|
10463
10874
|
transform: translateX(6px);
|
|
@@ -10467,7 +10878,7 @@ var slideLeftAndFade = import_styled_components50.keyframes`
|
|
|
10467
10878
|
transform: translateX(0);
|
|
10468
10879
|
}
|
|
10469
10880
|
`;
|
|
10470
|
-
var slideUpAndFade =
|
|
10881
|
+
var slideUpAndFade = import_styled_components51.keyframes`
|
|
10471
10882
|
from {
|
|
10472
10883
|
opacity: 0;
|
|
10473
10884
|
transform: translateY(6px);
|
|
@@ -10477,7 +10888,7 @@ var slideUpAndFade = import_styled_components50.keyframes`
|
|
|
10477
10888
|
transform: translateY(0);
|
|
10478
10889
|
}
|
|
10479
10890
|
`;
|
|
10480
|
-
var slideRightAndFade =
|
|
10891
|
+
var slideRightAndFade = import_styled_components51.keyframes`
|
|
10481
10892
|
from {
|
|
10482
10893
|
opacity: 0;
|
|
10483
10894
|
transform: translateX(-6px);
|
|
@@ -10487,7 +10898,7 @@ var slideRightAndFade = import_styled_components50.keyframes`
|
|
|
10487
10898
|
transform: translateX(0);
|
|
10488
10899
|
}
|
|
10489
10900
|
`;
|
|
10490
|
-
var StyledContent = (0,
|
|
10901
|
+
var StyledContent = (0, import_styled_components51.default)(import_react_tooltip2.Content)`
|
|
10491
10902
|
--tooltip-font-family: var(--wui-typography-family-default);
|
|
10492
10903
|
--tooltip-border-radius: var(--wui-border-radius-05);
|
|
10493
10904
|
--tooltip-bg: var(--wui-color-bg-tooltip);
|
|
@@ -10587,7 +10998,7 @@ Tooltip.displayName = "Tooltip_UI";
|
|
|
10587
10998
|
|
|
10588
10999
|
// src/components/ColorPicker/ColorGridOption.tsx
|
|
10589
11000
|
var import_jsx_runtime231 = require("react/jsx-runtime");
|
|
10590
|
-
var Container2 = (0,
|
|
11001
|
+
var Container2 = (0, import_styled_components52.default)(import_react_radio_group2.Item)`
|
|
10591
11002
|
border: none;
|
|
10592
11003
|
appearance: none;
|
|
10593
11004
|
outline: none;
|
|
@@ -10632,10 +11043,10 @@ ColorGridOption.displayName = "ColorGridOption_UI";
|
|
|
10632
11043
|
|
|
10633
11044
|
// src/components/ColorPicker/ColorList.tsx
|
|
10634
11045
|
var import_react43 = require("react");
|
|
10635
|
-
var
|
|
11046
|
+
var import_styled_components53 = __toESM(require("styled-components"));
|
|
10636
11047
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
10637
11048
|
var import_jsx_runtime232 = require("react/jsx-runtime");
|
|
10638
|
-
var Container3 = (0,
|
|
11049
|
+
var Container3 = (0, import_styled_components53.default)(import_react_toggle_group.Root)`
|
|
10639
11050
|
display: grid;
|
|
10640
11051
|
grid-template-columns: minmax(0, 1fr);
|
|
10641
11052
|
`;
|
|
@@ -10664,18 +11075,18 @@ var ColorList = ({ children }) => {
|
|
|
10664
11075
|
ColorList.displayName = "ColorList_UI";
|
|
10665
11076
|
|
|
10666
11077
|
// src/components/ColorPicker/ColorListGroup.tsx
|
|
10667
|
-
var
|
|
11078
|
+
var import_styled_components54 = __toESM(require("styled-components"));
|
|
10668
11079
|
var import_jsx_runtime233 = require("react/jsx-runtime");
|
|
10669
|
-
var Container4 =
|
|
11080
|
+
var Container4 = import_styled_components54.default.div`
|
|
10670
11081
|
display: grid;
|
|
10671
11082
|
gap: var(--wui-space-01);
|
|
10672
11083
|
grid-template-columns: minmax(0, 1fr);
|
|
10673
11084
|
`;
|
|
10674
|
-
var ItemsContainer2 =
|
|
11085
|
+
var ItemsContainer2 = import_styled_components54.default.div`
|
|
10675
11086
|
display: flex;
|
|
10676
11087
|
flex-direction: column;
|
|
10677
11088
|
`;
|
|
10678
|
-
var LabelContainer2 =
|
|
11089
|
+
var LabelContainer2 = import_styled_components54.default.div`
|
|
10679
11090
|
padding-top: var(--wui-space-01);
|
|
10680
11091
|
`;
|
|
10681
11092
|
var ColorListGroup = ({ label, children }) => {
|
|
@@ -10694,7 +11105,7 @@ var ColorListGroup = ({ label, children }) => {
|
|
|
10694
11105
|
ColorListGroup.displayName = "ColorListGroup_UI";
|
|
10695
11106
|
|
|
10696
11107
|
// src/components/ColorPicker/ColorListOption.tsx
|
|
10697
|
-
var
|
|
11108
|
+
var import_styled_components55 = __toESM(require("styled-components"));
|
|
10698
11109
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
10699
11110
|
var import_fn6 = require("culori/fn");
|
|
10700
11111
|
|
|
@@ -10733,7 +11144,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
|
|
|
10733
11144
|
|
|
10734
11145
|
// src/components/ColorPicker/ColorListOption.tsx
|
|
10735
11146
|
var import_jsx_runtime235 = require("react/jsx-runtime");
|
|
10736
|
-
var Container5 = (0,
|
|
11147
|
+
var Container5 = (0, import_styled_components55.default)(import_react_toggle_group2.Item)`
|
|
10737
11148
|
border: none;
|
|
10738
11149
|
appearance: none;
|
|
10739
11150
|
outline: none;
|
|
@@ -10818,9 +11229,9 @@ ColorPicker.displayName = "ColorPicker_UI";
|
|
|
10818
11229
|
|
|
10819
11230
|
// src/components/ColorPicker/ColorPickerPopoverContent.tsx
|
|
10820
11231
|
var import_react_popover2 = require("@radix-ui/react-popover");
|
|
10821
|
-
var
|
|
11232
|
+
var import_styled_components56 = __toESM(require("styled-components"));
|
|
10822
11233
|
var import_jsx_runtime237 = require("react/jsx-runtime");
|
|
10823
|
-
var StyledPopoverContent = (0,
|
|
11234
|
+
var StyledPopoverContent = (0, import_styled_components56.default)(import_react_popover2.Content)`
|
|
10824
11235
|
background-color: var(--wui-color-bg-surface);
|
|
10825
11236
|
border-radius: var(--wui-border-radius-02);
|
|
10826
11237
|
border: 1px solid var(--wui-color-border);
|
|
@@ -10847,9 +11258,9 @@ var ColorPickerPopoverContent = ({
|
|
|
10847
11258
|
ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
|
|
10848
11259
|
|
|
10849
11260
|
// src/components/ColorPicker/ColorPickerSection.tsx
|
|
10850
|
-
var
|
|
11261
|
+
var import_styled_components57 = __toESM(require("styled-components"));
|
|
10851
11262
|
var import_jsx_runtime238 = require("react/jsx-runtime");
|
|
10852
|
-
var Container6 =
|
|
11263
|
+
var Container6 = import_styled_components57.default.div`
|
|
10853
11264
|
padding: var(--wui-space-02);
|
|
10854
11265
|
`;
|
|
10855
11266
|
var ColorPickerSection = ({ children }) => {
|
|
@@ -10860,7 +11271,7 @@ ColorPickerSection.displayName = "ColorPickerSection_UI";
|
|
|
10860
11271
|
// src/components/ColorPicker/ColorPickerTrigger.tsx
|
|
10861
11272
|
var import_react44 = require("react");
|
|
10862
11273
|
var import_react_popover3 = require("@radix-ui/react-popover");
|
|
10863
|
-
var
|
|
11274
|
+
var import_styled_components58 = __toESM(require("styled-components"));
|
|
10864
11275
|
|
|
10865
11276
|
// src/components/ColorPicker/ValueSwatch.tsx
|
|
10866
11277
|
var import_jsx_runtime239 = require("react/jsx-runtime");
|
|
@@ -10880,7 +11291,7 @@ ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
|
|
|
10880
11291
|
|
|
10881
11292
|
// src/components/ColorPicker/ColorPickerTrigger.tsx
|
|
10882
11293
|
var import_jsx_runtime241 = require("react/jsx-runtime");
|
|
10883
|
-
var StyledPopoverTrigger = (0,
|
|
11294
|
+
var StyledPopoverTrigger = (0, import_styled_components58.default)(import_react_popover3.Trigger)`
|
|
10884
11295
|
background-color: var(--wui-color-bg-surface);
|
|
10885
11296
|
border-radius: var(--wui-border-radius-rounded);
|
|
10886
11297
|
border: 1px solid var(--wui-color-border);
|
|
@@ -10891,7 +11302,7 @@ var StyledPopoverTrigger = (0, import_styled_components57.default)(import_react_
|
|
|
10891
11302
|
background-color: var(--wui-color-bg-surface-hover);
|
|
10892
11303
|
}
|
|
10893
11304
|
`;
|
|
10894
|
-
var DefaultTriggerContentContainer =
|
|
11305
|
+
var DefaultTriggerContentContainer = import_styled_components58.default.div`
|
|
10895
11306
|
align-items: center;
|
|
10896
11307
|
display: flex;
|
|
10897
11308
|
flex-direction: row;
|
|
@@ -10919,9 +11330,9 @@ var ColorPickerTrigger = (0, import_react44.forwardRef)(
|
|
|
10919
11330
|
ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
|
|
10920
11331
|
|
|
10921
11332
|
// src/components/ColorPicker/ContrastIndicator.tsx
|
|
10922
|
-
var
|
|
11333
|
+
var import_styled_components59 = __toESM(require("styled-components"));
|
|
10923
11334
|
var import_jsx_runtime242 = require("react/jsx-runtime");
|
|
10924
|
-
var Container7 =
|
|
11335
|
+
var Container7 = import_styled_components59.default.div`
|
|
10925
11336
|
display: flex;
|
|
10926
11337
|
flex-direction: row;
|
|
10927
11338
|
justify-content: end;
|
|
@@ -10979,7 +11390,7 @@ var import_react46 = require("react");
|
|
|
10979
11390
|
|
|
10980
11391
|
// src/components/Switch/Switch.tsx
|
|
10981
11392
|
var import_react45 = require("react");
|
|
10982
|
-
var
|
|
11393
|
+
var import_styled_components60 = __toESM(require("styled-components"));
|
|
10983
11394
|
var import_type_guards34 = require("@wistia/type-guards");
|
|
10984
11395
|
var import_jsx_runtime243 = require("react/jsx-runtime");
|
|
10985
11396
|
var switchHeightMap = {
|
|
@@ -10987,10 +11398,10 @@ var switchHeightMap = {
|
|
|
10987
11398
|
md: 20,
|
|
10988
11399
|
lg: 24
|
|
10989
11400
|
};
|
|
10990
|
-
var getSizeCss2 = (size) =>
|
|
11401
|
+
var getSizeCss2 = (size) => import_styled_components60.css`
|
|
10991
11402
|
--wui-switch-height: ${switchHeightMap[size]}px;
|
|
10992
11403
|
`;
|
|
10993
|
-
var StyledSwitchWrapper =
|
|
11404
|
+
var StyledSwitchWrapper = import_styled_components60.default.div`
|
|
10994
11405
|
${({ $size }) => getSizeCss2($size)}
|
|
10995
11406
|
--wui-switch-border-offset: 2px;
|
|
10996
11407
|
--wui-switch-background-color: var(--wui-color-bg-surface-tertiary);
|
|
@@ -11024,7 +11435,7 @@ var StyledSwitchWrapper = import_styled_components59.default.div`
|
|
|
11024
11435
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
11025
11436
|
user-select: none;
|
|
11026
11437
|
`;
|
|
11027
|
-
var StyledSwitchTrack =
|
|
11438
|
+
var StyledSwitchTrack = import_styled_components60.default.div`
|
|
11028
11439
|
width: var(--wui-switch-width);
|
|
11029
11440
|
height: var(--wui-switch-height);
|
|
11030
11441
|
min-width: var(--wui-switch-width);
|
|
@@ -11042,7 +11453,7 @@ var StyledSwitchTrack = import_styled_components59.default.div`
|
|
|
11042
11453
|
background-color: var(--wui-switch-background-color);
|
|
11043
11454
|
margin-top: calc(calc(1lh - var(--wui-switch-height)) / 2);
|
|
11044
11455
|
`;
|
|
11045
|
-
var StyledSwitchThumb =
|
|
11456
|
+
var StyledSwitchThumb = import_styled_components60.default.div`
|
|
11046
11457
|
border-radius: var(--wui-border-radius-rounded);
|
|
11047
11458
|
background-color: var(--wui-switch-thumb-color);
|
|
11048
11459
|
transition:
|
|
@@ -11052,7 +11463,7 @@ var StyledSwitchThumb = import_styled_components59.default.div`
|
|
|
11052
11463
|
height: var(--wui-switch-thumb-size);
|
|
11053
11464
|
margin-left: var(--wui-switch-thumb-position);
|
|
11054
11465
|
`;
|
|
11055
|
-
var StyledHiddenSwitchInput =
|
|
11466
|
+
var StyledHiddenSwitchInput = import_styled_components60.default.input`
|
|
11056
11467
|
${visuallyHiddenStyle}
|
|
11057
11468
|
`;
|
|
11058
11469
|
var Switch = (0, import_react45.forwardRef)(
|
|
@@ -11190,12 +11601,12 @@ var import_fn7 = require("culori/fn");
|
|
|
11190
11601
|
|
|
11191
11602
|
// src/components/Input/Input.tsx
|
|
11192
11603
|
var import_react47 = require("react");
|
|
11193
|
-
var
|
|
11604
|
+
var import_styled_components62 = __toESM(require("styled-components"));
|
|
11194
11605
|
var import_type_guards35 = require("@wistia/type-guards");
|
|
11195
11606
|
|
|
11196
11607
|
// src/css/inputCss.ts
|
|
11197
|
-
var
|
|
11198
|
-
var inputCss =
|
|
11608
|
+
var import_styled_components61 = require("styled-components");
|
|
11609
|
+
var inputCss = import_styled_components61.css`
|
|
11199
11610
|
/* Colors */
|
|
11200
11611
|
--wui-input-color-bg: var(--wui-color-bg-surface);
|
|
11201
11612
|
--wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
@@ -11222,7 +11633,7 @@ var inputCss = import_styled_components60.css`
|
|
|
11222
11633
|
|
|
11223
11634
|
// src/components/Input/Input.tsx
|
|
11224
11635
|
var import_jsx_runtime247 = require("react/jsx-runtime");
|
|
11225
|
-
var inputStyles =
|
|
11636
|
+
var inputStyles = import_styled_components62.css`
|
|
11226
11637
|
${inputCss}
|
|
11227
11638
|
input,
|
|
11228
11639
|
textarea {
|
|
@@ -11262,7 +11673,7 @@ var inputStyles = import_styled_components61.css`
|
|
|
11262
11673
|
}
|
|
11263
11674
|
}
|
|
11264
11675
|
`;
|
|
11265
|
-
var StyledInputContainer =
|
|
11676
|
+
var StyledInputContainer = import_styled_components62.default.div`
|
|
11266
11677
|
display: inline-flex;
|
|
11267
11678
|
position: relative;
|
|
11268
11679
|
${inputStyles};
|
|
@@ -11566,15 +11977,15 @@ HexColorInput.displayName = "HexColorInput_UI";
|
|
|
11566
11977
|
// src/components/ColorPicker/HueSlider.tsx
|
|
11567
11978
|
var import_react50 = require("react");
|
|
11568
11979
|
var import_react_slider = require("@radix-ui/react-slider");
|
|
11569
|
-
var
|
|
11980
|
+
var import_styled_components64 = __toESM(require("styled-components"));
|
|
11570
11981
|
var import_fn9 = require("culori/fn");
|
|
11571
11982
|
|
|
11572
11983
|
// src/components/ColorPicker/HSVHueCanvas.tsx
|
|
11573
11984
|
var import_react49 = require("react");
|
|
11574
|
-
var
|
|
11985
|
+
var import_styled_components63 = __toESM(require("styled-components"));
|
|
11575
11986
|
var import_fn8 = require("culori/fn");
|
|
11576
11987
|
var import_jsx_runtime249 = require("react/jsx-runtime");
|
|
11577
|
-
var Canvas =
|
|
11988
|
+
var Canvas = import_styled_components63.default.canvas`
|
|
11578
11989
|
display: block;
|
|
11579
11990
|
height: 100%;
|
|
11580
11991
|
width: 100%;
|
|
@@ -11614,7 +12025,7 @@ var HSVHueCanvas = ({ hsv }) => {
|
|
|
11614
12025
|
// src/components/ColorPicker/HueSlider.tsx
|
|
11615
12026
|
var import_jsx_runtime250 = require("react/jsx-runtime");
|
|
11616
12027
|
var TWENTY_FOUR = 24;
|
|
11617
|
-
var Container8 =
|
|
12028
|
+
var Container8 = import_styled_components64.default.div`
|
|
11618
12029
|
border-radius: var(--wui-border-radius-rounded);
|
|
11619
12030
|
border: 1px solid var(--wui-color-border);
|
|
11620
12031
|
height: ${TWENTY_FOUR}px;
|
|
@@ -11622,7 +12033,7 @@ var Container8 = import_styled_components63.default.div`
|
|
|
11622
12033
|
padding: 0 var(--wui-space-03);
|
|
11623
12034
|
position: relative;
|
|
11624
12035
|
`;
|
|
11625
|
-
var Root = (0,
|
|
12036
|
+
var Root = (0, import_styled_components64.default)(import_react_slider.Root)`
|
|
11626
12037
|
align-items: center;
|
|
11627
12038
|
display: flex;
|
|
11628
12039
|
position: absolute;
|
|
@@ -11631,11 +12042,11 @@ var Root = (0, import_styled_components63.default)(import_react_slider.Root)`
|
|
|
11631
12042
|
width: calc(100% - var(--wui-space-05));
|
|
11632
12043
|
height: 16px;
|
|
11633
12044
|
`;
|
|
11634
|
-
var Track = (0,
|
|
12045
|
+
var Track = (0, import_styled_components64.default)(import_react_slider.Track)`
|
|
11635
12046
|
width: 100%;
|
|
11636
12047
|
`;
|
|
11637
|
-
var Thumb = (0,
|
|
11638
|
-
var ThumbInner =
|
|
12048
|
+
var Thumb = (0, import_styled_components64.default)(import_react_slider.Thumb)``;
|
|
12049
|
+
var ThumbInner = import_styled_components64.default.div`
|
|
11639
12050
|
cursor: pointer;
|
|
11640
12051
|
display: block;
|
|
11641
12052
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -11702,11 +12113,11 @@ HueSlider.displayName = "HueSlider_UI";
|
|
|
11702
12113
|
|
|
11703
12114
|
// src/components/ColorPicker/SaturationAndValuePicker.tsx
|
|
11704
12115
|
var import_react52 = require("react");
|
|
11705
|
-
var
|
|
12116
|
+
var import_styled_components66 = __toESM(require("styled-components"));
|
|
11706
12117
|
|
|
11707
12118
|
// src/components/ColorPicker/HSVSaturationValueCanvas.tsx
|
|
11708
12119
|
var import_react51 = require("react");
|
|
11709
|
-
var
|
|
12120
|
+
var import_styled_components65 = __toESM(require("styled-components"));
|
|
11710
12121
|
|
|
11711
12122
|
// src/components/ColorPicker/canvas-utils.ts
|
|
11712
12123
|
var drawSmoothCurve = (context, points) => {
|
|
@@ -11736,7 +12147,7 @@ var drawSmoothCurve = (context, points) => {
|
|
|
11736
12147
|
|
|
11737
12148
|
// src/components/ColorPicker/HSVSaturationValueCanvas.tsx
|
|
11738
12149
|
var import_jsx_runtime251 = require("react/jsx-runtime");
|
|
11739
|
-
var Canvas2 =
|
|
12150
|
+
var Canvas2 = import_styled_components65.default.canvas`
|
|
11740
12151
|
display: block;
|
|
11741
12152
|
width: 100%;
|
|
11742
12153
|
`;
|
|
@@ -11857,13 +12268,13 @@ var HSVSaturationValueCanvas = ({
|
|
|
11857
12268
|
var import_jsx_runtime252 = require("react/jsx-runtime");
|
|
11858
12269
|
var SATURATION_NUDGE = 0.02;
|
|
11859
12270
|
var VALUE_NUDGE = 0.02;
|
|
11860
|
-
var Container9 =
|
|
12271
|
+
var Container9 = import_styled_components66.default.div`
|
|
11861
12272
|
border-radius: var(--wui-border-radius-02);
|
|
11862
12273
|
box-shadow: 0 0 0 1px var(--wui-color-border);
|
|
11863
12274
|
overflow: hidden;
|
|
11864
12275
|
position: relative;
|
|
11865
12276
|
`;
|
|
11866
|
-
var Thumb2 =
|
|
12277
|
+
var Thumb2 = import_styled_components66.default.button.attrs({ type: "button" })`
|
|
11867
12278
|
appearance: none;
|
|
11868
12279
|
border-radius: var(--wui-border-radius-rounded);
|
|
11869
12280
|
border: none;
|
|
@@ -12077,14 +12488,14 @@ SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
|
|
|
12077
12488
|
var Ariakit = __toESM(require("@ariakit/react"));
|
|
12078
12489
|
var import_react54 = require("react");
|
|
12079
12490
|
var import_match_sorter = require("match-sorter");
|
|
12080
|
-
var
|
|
12491
|
+
var import_styled_components69 = __toESM(require("styled-components"));
|
|
12081
12492
|
|
|
12082
12493
|
// src/components/Tag/Tag.tsx
|
|
12083
12494
|
var import_react53 = require("react");
|
|
12084
|
-
var
|
|
12495
|
+
var import_styled_components67 = __toESM(require("styled-components"));
|
|
12085
12496
|
var import_type_guards36 = require("@wistia/type-guards");
|
|
12086
12497
|
var import_jsx_runtime253 = require("react/jsx-runtime");
|
|
12087
|
-
var TagLabel =
|
|
12498
|
+
var TagLabel = import_styled_components67.default.a`
|
|
12088
12499
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12089
12500
|
font-size: var(--wui-typography-label-4-size);
|
|
12090
12501
|
font-weight: var(--wui-typography-label-4-weight);
|
|
@@ -12120,14 +12531,14 @@ var TagLabel = import_styled_components66.default.a`
|
|
|
12120
12531
|
background: var(--wui-color-bg-surface-secondary-active);
|
|
12121
12532
|
}
|
|
12122
12533
|
`;
|
|
12123
|
-
var TagDivider =
|
|
12534
|
+
var TagDivider = import_styled_components67.default.div`
|
|
12124
12535
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12125
12536
|
border-left: 1px solid var(--wui-color-border);
|
|
12126
12537
|
display: flex;
|
|
12127
12538
|
height: 14px;
|
|
12128
12539
|
width: 1px;
|
|
12129
12540
|
`;
|
|
12130
|
-
var StyledRemoveButton =
|
|
12541
|
+
var StyledRemoveButton = import_styled_components67.default.button`
|
|
12131
12542
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12132
12543
|
all: unset;
|
|
12133
12544
|
cursor: pointer;
|
|
@@ -12155,7 +12566,7 @@ var StyledRemoveButton = import_styled_components66.default.button`
|
|
|
12155
12566
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
12156
12567
|
}
|
|
12157
12568
|
`;
|
|
12158
|
-
var StyledTag =
|
|
12569
|
+
var StyledTag = import_styled_components67.default.div`
|
|
12159
12570
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12160
12571
|
align-items: center;
|
|
12161
12572
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -12236,10 +12647,10 @@ var Tag = (0, import_react53.forwardRef)(
|
|
|
12236
12647
|
Tag.displayName = "Tag_UI";
|
|
12237
12648
|
|
|
12238
12649
|
// src/private/helpers/getTypographicStyles/getTypographicStyles.ts
|
|
12239
|
-
var
|
|
12650
|
+
var import_styled_components68 = require("styled-components");
|
|
12240
12651
|
var typographicVariantStyleMap = { ...variantStyleMap2, ...variantStyleMap };
|
|
12241
12652
|
var getTypographicStyles = (variant) => {
|
|
12242
|
-
return
|
|
12653
|
+
return import_styled_components68.css`
|
|
12243
12654
|
${typographicVariantStyleMap[variant]}
|
|
12244
12655
|
font-family: var(--font-family);
|
|
12245
12656
|
font-size: var(--font-size);
|
|
@@ -12254,7 +12665,7 @@ var getDefaultTypographicElement = (variant) => {
|
|
|
12254
12665
|
|
|
12255
12666
|
// src/components/Combobox/Combobox.tsx
|
|
12256
12667
|
var import_jsx_runtime254 = require("react/jsx-runtime");
|
|
12257
|
-
var ComboboxWrapper =
|
|
12668
|
+
var ComboboxWrapper = import_styled_components69.default.div`
|
|
12258
12669
|
${inputCss};
|
|
12259
12670
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
12260
12671
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -12303,7 +12714,7 @@ var ComboboxWrapper = import_styled_components68.default.div`
|
|
|
12303
12714
|
}
|
|
12304
12715
|
}
|
|
12305
12716
|
`;
|
|
12306
|
-
var ComboboxInput = (0,
|
|
12717
|
+
var ComboboxInput = (0, import_styled_components69.default)(Ariakit.Combobox)`
|
|
12307
12718
|
appearance: none;
|
|
12308
12719
|
padding: 0;
|
|
12309
12720
|
width: 100%;
|
|
@@ -12318,7 +12729,7 @@ var ComboboxInput = (0, import_styled_components68.default)(Ariakit.Combobox)`
|
|
|
12318
12729
|
outline-width: 2px;
|
|
12319
12730
|
}
|
|
12320
12731
|
`;
|
|
12321
|
-
var ComboboxPopover2 = (0,
|
|
12732
|
+
var ComboboxPopover2 = (0, import_styled_components69.default)(Ariakit.ComboboxPopover)`
|
|
12322
12733
|
--wui-combobox-content-border: var(--wui-color-border);
|
|
12323
12734
|
--wui-combobox-content-bg: var(--wui-color-bg-surface);
|
|
12324
12735
|
--wui-combobox-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -12344,7 +12755,7 @@ var ComboboxPopover2 = (0, import_styled_components68.default)(Ariakit.ComboboxP
|
|
|
12344
12755
|
--item-opacity: 0.5;
|
|
12345
12756
|
}
|
|
12346
12757
|
`;
|
|
12347
|
-
var ComboboxItem2 = (0,
|
|
12758
|
+
var ComboboxItem2 = (0, import_styled_components69.default)(Ariakit.ComboboxItem)`
|
|
12348
12759
|
${getTypographicStyles("body3")};
|
|
12349
12760
|
display: flex;
|
|
12350
12761
|
padding: var(--wui-combobox-option-padding);
|
|
@@ -12372,7 +12783,7 @@ var ComboboxItem2 = (0, import_styled_components68.default)(Ariakit.ComboboxItem
|
|
|
12372
12783
|
background-color: transparent;
|
|
12373
12784
|
}
|
|
12374
12785
|
`;
|
|
12375
|
-
var NoResults =
|
|
12786
|
+
var NoResults = import_styled_components69.default.div`
|
|
12376
12787
|
gap: var(--wui-space-02);
|
|
12377
12788
|
`;
|
|
12378
12789
|
var POPOVER_WIDTH_OFFSET = 20;
|
|
@@ -12519,7 +12930,7 @@ var import_react61 = require("react");
|
|
|
12519
12930
|
var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
|
|
12520
12931
|
var import_type_guards37 = require("@wistia/type-guards");
|
|
12521
12932
|
var import_react56 = require("react");
|
|
12522
|
-
var
|
|
12933
|
+
var import_styled_components70 = __toESM(require("styled-components"));
|
|
12523
12934
|
|
|
12524
12935
|
// src/components/Menu/MenuContext.tsx
|
|
12525
12936
|
var import_react55 = require("react");
|
|
@@ -12528,7 +12939,7 @@ var useMenuContext = () => (0, import_react55.useContext)(MenuContext);
|
|
|
12528
12939
|
|
|
12529
12940
|
// src/components/Menu/Menu.tsx
|
|
12530
12941
|
var import_jsx_runtime255 = require("react/jsx-runtime");
|
|
12531
|
-
var open =
|
|
12942
|
+
var open = import_styled_components70.keyframes`
|
|
12532
12943
|
from {
|
|
12533
12944
|
opacity: 0;
|
|
12534
12945
|
transform: scale(.97) translateY(-8px);
|
|
@@ -12538,7 +12949,7 @@ var open = import_styled_components69.keyframes`
|
|
|
12538
12949
|
transform: scale(1);
|
|
12539
12950
|
}
|
|
12540
12951
|
`;
|
|
12541
|
-
var close =
|
|
12952
|
+
var close = import_styled_components70.keyframes`
|
|
12542
12953
|
from {
|
|
12543
12954
|
opacity: 1;
|
|
12544
12955
|
transform: scale(1);
|
|
@@ -12548,7 +12959,7 @@ var close = import_styled_components69.keyframes`
|
|
|
12548
12959
|
transform: scale(.97) translateY(-8px);
|
|
12549
12960
|
}
|
|
12550
12961
|
`;
|
|
12551
|
-
var menuItemCss =
|
|
12962
|
+
var menuItemCss = import_styled_components70.css`
|
|
12552
12963
|
--menu-label-description-gap: var(--wui-space-01);
|
|
12553
12964
|
--menu-item-inner-gap: var(--wui-space-03);
|
|
12554
12965
|
--menu-item-left-icon-size: 24px;
|
|
@@ -12559,7 +12970,7 @@ var menuItemCss = import_styled_components69.css`
|
|
|
12559
12970
|
--menu-label-line-height: var(--wui-typography-label-3-line-height);
|
|
12560
12971
|
--menu-divider-margin: var(--wui-space-02);
|
|
12561
12972
|
`;
|
|
12562
|
-
var compactMenuItemCss =
|
|
12973
|
+
var compactMenuItemCss = import_styled_components70.css`
|
|
12563
12974
|
--menu-label-description-gap: 0;
|
|
12564
12975
|
--menu-item-inner-gap: var(--wui-space-02);
|
|
12565
12976
|
--menu-item-left-icon-size: 16px;
|
|
@@ -12570,7 +12981,7 @@ var compactMenuItemCss = import_styled_components69.css`
|
|
|
12570
12981
|
--menu-label-line-height: var(--wui-typography-label-4-line-height);
|
|
12571
12982
|
--menu-divider-margin: var(--wui-space-01);
|
|
12572
12983
|
`;
|
|
12573
|
-
var menuContentCss =
|
|
12984
|
+
var menuContentCss = import_styled_components70.css`
|
|
12574
12985
|
--menu-font-family: var(--wui-typography-family-default);
|
|
12575
12986
|
--menu-bg: var(--wui-color-bg-surface);
|
|
12576
12987
|
--menu-shadow: var(--wui-elevation-01);
|
|
@@ -12612,7 +13023,7 @@ var menuContentCss = import_styled_components69.css`
|
|
|
12612
13023
|
margin: var(--menu-divider-margin) 0;
|
|
12613
13024
|
}
|
|
12614
13025
|
`;
|
|
12615
|
-
var MenuContent = (0,
|
|
13026
|
+
var MenuContent = (0, import_styled_components70.default)(import_react_dropdown_menu.DropdownMenuContent)`
|
|
12616
13027
|
${menuContentCss}
|
|
12617
13028
|
min-width: var(--radix-dropdown-menu-trigger-width);
|
|
12618
13029
|
`;
|
|
@@ -12682,10 +13093,10 @@ Menu.displayName = "Menu_UI";
|
|
|
12682
13093
|
Menu.displayName = "Menu_UI";
|
|
12683
13094
|
|
|
12684
13095
|
// src/components/Menu/MenuLabel.tsx
|
|
12685
|
-
var
|
|
13096
|
+
var import_styled_components71 = __toESM(require("styled-components"));
|
|
12686
13097
|
var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
|
|
12687
13098
|
var import_jsx_runtime256 = require("react/jsx-runtime");
|
|
12688
|
-
var StyledMenuLabel = (0,
|
|
13099
|
+
var StyledMenuLabel = (0, import_styled_components71.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
|
|
12689
13100
|
padding: var(--wui-space-02);
|
|
12690
13101
|
`;
|
|
12691
13102
|
var MenuLabel = ({ children, ...props }) => {
|
|
@@ -12710,16 +13121,16 @@ MenuLabel.displayName = "MenuLabel_UI";
|
|
|
12710
13121
|
|
|
12711
13122
|
// src/components/Menu/SubMenu.tsx
|
|
12712
13123
|
var import_react58 = require("react");
|
|
12713
|
-
var
|
|
13124
|
+
var import_styled_components74 = __toESM(require("styled-components"));
|
|
12714
13125
|
var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
|
|
12715
13126
|
var import_type_guards39 = require("@wistia/type-guards");
|
|
12716
13127
|
|
|
12717
13128
|
// src/components/Menu/MenuItemButton.tsx
|
|
12718
13129
|
var import_react57 = require("react");
|
|
12719
|
-
var
|
|
13130
|
+
var import_styled_components72 = __toESM(require("styled-components"));
|
|
12720
13131
|
var import_type_guards38 = require("@wistia/type-guards");
|
|
12721
13132
|
var import_jsx_runtime257 = require("react/jsx-runtime");
|
|
12722
|
-
var StyledButton3 = (0,
|
|
13133
|
+
var StyledButton3 = (0, import_styled_components72.default)(Button)`
|
|
12723
13134
|
${({ colorScheme }) => getColorScheme(colorScheme)};
|
|
12724
13135
|
|
|
12725
13136
|
display: flex;
|
|
@@ -12758,7 +13169,7 @@ var StyledButton3 = (0, import_styled_components71.default)(Button)`
|
|
|
12758
13169
|
padding-left: var(--wui-space-04);
|
|
12759
13170
|
}
|
|
12760
13171
|
`;
|
|
12761
|
-
var StyledLeftIconContainer =
|
|
13172
|
+
var StyledLeftIconContainer = import_styled_components72.default.div`
|
|
12762
13173
|
height: var(--menu-item-left-icon-size);
|
|
12763
13174
|
width: var(--menu-item-left-icon-size);
|
|
12764
13175
|
|
|
@@ -12770,7 +13181,7 @@ var StyledLeftIconContainer = import_styled_components71.default.div`
|
|
|
12770
13181
|
}
|
|
12771
13182
|
}
|
|
12772
13183
|
`;
|
|
12773
|
-
var StyledRightIconContainer =
|
|
13184
|
+
var StyledRightIconContainer = import_styled_components72.default.div`
|
|
12774
13185
|
height: var(--menu-item-right-icon-size);
|
|
12775
13186
|
width: var(--menu-item-right-icon-size);
|
|
12776
13187
|
|
|
@@ -12782,13 +13193,13 @@ var StyledRightIconContainer = import_styled_components71.default.div`
|
|
|
12782
13193
|
}
|
|
12783
13194
|
}
|
|
12784
13195
|
`;
|
|
12785
|
-
var StyledLabelAndDescriptionContainer =
|
|
13196
|
+
var StyledLabelAndDescriptionContainer = import_styled_components72.default.div`
|
|
12786
13197
|
display: flex;
|
|
12787
13198
|
flex-direction: column;
|
|
12788
13199
|
gap: var(--menu-label-description-gap);
|
|
12789
13200
|
flex-basis: 100%;
|
|
12790
13201
|
`;
|
|
12791
|
-
var StyledBadgeContainer =
|
|
13202
|
+
var StyledBadgeContainer = import_styled_components72.default.div`
|
|
12792
13203
|
align-self: start;
|
|
12793
13204
|
justify-self: end;
|
|
12794
13205
|
font-size: var(--wui-typography-label-4-size);
|
|
@@ -12836,10 +13247,10 @@ var MenuItemButton = (0, import_react57.forwardRef)(({ children, appearance, com
|
|
|
12836
13247
|
MenuItemButton.displayName = "MenuItemButton_UI";
|
|
12837
13248
|
|
|
12838
13249
|
// src/components/Menu/MenuItemLabelDescription.tsx
|
|
12839
|
-
var
|
|
13250
|
+
var import_styled_components73 = __toESM(require("styled-components"));
|
|
12840
13251
|
var import_jsx_runtime258 = require("react/jsx-runtime");
|
|
12841
|
-
var StyledMenuItemLabel =
|
|
12842
|
-
var StyledMenuItemDescription = (0,
|
|
13252
|
+
var StyledMenuItemLabel = import_styled_components73.default.span``;
|
|
13253
|
+
var StyledMenuItemDescription = (0, import_styled_components73.default)(Text)``;
|
|
12843
13254
|
var MenuItemLabel = ({ children }) => {
|
|
12844
13255
|
return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(StyledMenuItemLabel, { children });
|
|
12845
13256
|
};
|
|
@@ -12856,17 +13267,17 @@ var MenuItemDescription = ({ children }) => {
|
|
|
12856
13267
|
|
|
12857
13268
|
// src/components/Menu/SubMenu.tsx
|
|
12858
13269
|
var import_jsx_runtime259 = require("react/jsx-runtime");
|
|
12859
|
-
var SubMenuContent = (0,
|
|
13270
|
+
var SubMenuContent = (0, import_styled_components74.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
|
|
12860
13271
|
${menuContentCss}
|
|
12861
13272
|
|
|
12862
13273
|
${mq.smAndDown} {
|
|
12863
13274
|
transform: translateX(-100%) !important;
|
|
12864
13275
|
}
|
|
12865
13276
|
`;
|
|
12866
|
-
var StyledMobileSubMenuItems =
|
|
13277
|
+
var StyledMobileSubMenuItems = import_styled_components74.default.div`
|
|
12867
13278
|
margin-left: var(--wui-space-04);
|
|
12868
13279
|
`;
|
|
12869
|
-
var StyledSubTrigger = (0,
|
|
13280
|
+
var StyledSubTrigger = (0, import_styled_components74.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
|
|
12870
13281
|
outline: none;
|
|
12871
13282
|
|
|
12872
13283
|
&[data-state='open'],
|
|
@@ -13236,10 +13647,10 @@ var ContextMenu = ({
|
|
|
13236
13647
|
|
|
13237
13648
|
// src/components/DataCards/DataCard.tsx
|
|
13238
13649
|
var import_react62 = require("react");
|
|
13239
|
-
var
|
|
13650
|
+
var import_styled_components75 = __toESM(require("styled-components"));
|
|
13240
13651
|
var import_type_guards42 = require("@wistia/type-guards");
|
|
13241
13652
|
var import_jsx_runtime266 = require("react/jsx-runtime");
|
|
13242
|
-
var StyledDataCard =
|
|
13653
|
+
var StyledDataCard = import_styled_components75.default.div`
|
|
13243
13654
|
--wui-data-card-text: var(--wui-color-text-button);
|
|
13244
13655
|
--wui-color-text: var(--wui-data-card-text);
|
|
13245
13656
|
--wui-data-card-background: var(--wui-color-bg-surface-secondary);
|
|
@@ -13313,7 +13724,7 @@ var StyledDataCard = import_styled_components74.default.div`
|
|
|
13313
13724
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
13314
13725
|
}
|
|
13315
13726
|
`;
|
|
13316
|
-
var shimmer =
|
|
13727
|
+
var shimmer = import_styled_components75.keyframes`
|
|
13317
13728
|
0% {
|
|
13318
13729
|
background-position: 200% 0;
|
|
13319
13730
|
}
|
|
@@ -13321,7 +13732,7 @@ var shimmer = import_styled_components74.keyframes`
|
|
|
13321
13732
|
background-position: -200% 0;
|
|
13322
13733
|
}
|
|
13323
13734
|
`;
|
|
13324
|
-
var LoadingBackground =
|
|
13735
|
+
var LoadingBackground = import_styled_components75.default.div`
|
|
13325
13736
|
background: linear-gradient(
|
|
13326
13737
|
90deg,
|
|
13327
13738
|
var(--wui-color-bg-surface-tertiary) 25%,
|
|
@@ -13332,32 +13743,32 @@ var LoadingBackground = import_styled_components74.default.div`
|
|
|
13332
13743
|
animation: ${shimmer} 1.5s infinite;
|
|
13333
13744
|
border-radius: var(--wui-border-radius-01);
|
|
13334
13745
|
`;
|
|
13335
|
-
var StyledLoadingLabel = (0,
|
|
13746
|
+
var StyledLoadingLabel = (0, import_styled_components75.default)(LoadingBackground)`
|
|
13336
13747
|
width: 80px;
|
|
13337
13748
|
height: var(--wui-typography-heading-6-line-height);
|
|
13338
13749
|
`;
|
|
13339
|
-
var StyledLoadingValue = (0,
|
|
13750
|
+
var StyledLoadingValue = (0, import_styled_components75.default)(LoadingBackground)`
|
|
13340
13751
|
width: 90%;
|
|
13341
13752
|
height: var(--wui-typography-heading-3-line-height);
|
|
13342
13753
|
`;
|
|
13343
|
-
var StyledLabel3 = (0,
|
|
13754
|
+
var StyledLabel3 = (0, import_styled_components75.default)(Heading)`
|
|
13344
13755
|
grid-area: label;
|
|
13345
13756
|
`;
|
|
13346
|
-
var StyledValue = (0,
|
|
13757
|
+
var StyledValue = (0, import_styled_components75.default)(Heading)`
|
|
13347
13758
|
grid-area: value;
|
|
13348
13759
|
`;
|
|
13349
|
-
var StyledSlot =
|
|
13760
|
+
var StyledSlot = import_styled_components75.default.div`
|
|
13350
13761
|
display: flex;
|
|
13351
13762
|
justify-content: flex-end;
|
|
13352
13763
|
grid-area: slot;
|
|
13353
13764
|
align-self: center;
|
|
13354
13765
|
`;
|
|
13355
|
-
var StyledDataCardTrendContainer =
|
|
13766
|
+
var StyledDataCardTrendContainer = import_styled_components75.default.div`
|
|
13356
13767
|
position: absolute;
|
|
13357
13768
|
bottom: var(--wui-space-01);
|
|
13358
13769
|
right: var(--wui-space-01);
|
|
13359
13770
|
`;
|
|
13360
|
-
var StyledSubtitle = (0,
|
|
13771
|
+
var StyledSubtitle = (0, import_styled_components75.default)(Text)`
|
|
13361
13772
|
grid-area: subtitle;
|
|
13362
13773
|
`;
|
|
13363
13774
|
var DataCardInner = ({
|
|
@@ -13435,9 +13846,9 @@ var DataCard = (props) => {
|
|
|
13435
13846
|
DataCard.displayName = "DataCard_UI";
|
|
13436
13847
|
|
|
13437
13848
|
// src/components/DataCards/DataCards.tsx
|
|
13438
|
-
var
|
|
13849
|
+
var import_styled_components76 = __toESM(require("styled-components"));
|
|
13439
13850
|
var import_jsx_runtime267 = require("react/jsx-runtime");
|
|
13440
|
-
var StyledDataCards = (0,
|
|
13851
|
+
var StyledDataCards = (0, import_styled_components76.default)(Box)`
|
|
13441
13852
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
13442
13853
|
|
|
13443
13854
|
> * {
|
|
@@ -13470,9 +13881,9 @@ var DataCards = ({
|
|
|
13470
13881
|
DataCards.displayName = "DataCards_UI";
|
|
13471
13882
|
|
|
13472
13883
|
// src/components/DataCards/DataCardTrend.tsx
|
|
13473
|
-
var
|
|
13884
|
+
var import_styled_components77 = __toESM(require("styled-components"));
|
|
13474
13885
|
var import_jsx_runtime268 = require("react/jsx-runtime");
|
|
13475
|
-
var StyledDataCardTrend =
|
|
13886
|
+
var StyledDataCardTrend = import_styled_components77.default.div`
|
|
13476
13887
|
${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
|
|
13477
13888
|
background: var(--wui-color-bg-app);
|
|
13478
13889
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -13508,9 +13919,9 @@ var DataCardTrend = ({
|
|
|
13508
13919
|
};
|
|
13509
13920
|
|
|
13510
13921
|
// src/components/DataCards/DataCardHoverArrow.tsx
|
|
13511
|
-
var
|
|
13922
|
+
var import_styled_components78 = __toESM(require("styled-components"));
|
|
13512
13923
|
var import_jsx_runtime269 = require("react/jsx-runtime");
|
|
13513
|
-
var StyledIconContainer =
|
|
13924
|
+
var StyledIconContainer = import_styled_components78.default.div`
|
|
13514
13925
|
display: flex;
|
|
13515
13926
|
align-items: center;
|
|
13516
13927
|
align-self: center;
|
|
@@ -13526,9 +13937,9 @@ var DataCardHoverArrow = () => /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(St
|
|
|
13526
13937
|
DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
|
|
13527
13938
|
|
|
13528
13939
|
// src/components/DataList/DataList.tsx
|
|
13529
|
-
var
|
|
13940
|
+
var import_styled_components79 = __toESM(require("styled-components"));
|
|
13530
13941
|
var import_jsx_runtime270 = require("react/jsx-runtime");
|
|
13531
|
-
var StyledDataList =
|
|
13942
|
+
var StyledDataList = import_styled_components79.default.dl`
|
|
13532
13943
|
display: grid;
|
|
13533
13944
|
grid-template-columns: auto 1fr;
|
|
13534
13945
|
column-gap: var(--wui-space-02);
|
|
@@ -13607,22 +14018,22 @@ var DataListItemValue = (props) => {
|
|
|
13607
14018
|
DataListItemValue.displayName = "DataListItemValue_UI";
|
|
13608
14019
|
|
|
13609
14020
|
// src/components/Divider/Divider.tsx
|
|
13610
|
-
var
|
|
14021
|
+
var import_styled_components80 = __toESM(require("styled-components"));
|
|
13611
14022
|
var import_jsx_runtime273 = require("react/jsx-runtime");
|
|
13612
|
-
var horizontalBorderCss =
|
|
14023
|
+
var horizontalBorderCss = import_styled_components80.css`
|
|
13613
14024
|
border-top-color: var(--wui-color-border);
|
|
13614
14025
|
border-top-style: solid;
|
|
13615
14026
|
border-top-width: 1px;
|
|
13616
14027
|
clear: both; /* for horizontal dividers, ensure it clears any floats */
|
|
13617
14028
|
height: 0;
|
|
13618
14029
|
`;
|
|
13619
|
-
var verticalBorderCss =
|
|
14030
|
+
var verticalBorderCss = import_styled_components80.css`
|
|
13620
14031
|
background-color: var(--wui-color-border);
|
|
13621
14032
|
max-width: 1px;
|
|
13622
14033
|
min-height: 100%;
|
|
13623
14034
|
width: 1px;
|
|
13624
14035
|
`;
|
|
13625
|
-
var DividerComponent =
|
|
14036
|
+
var DividerComponent = import_styled_components80.default.div`
|
|
13626
14037
|
${({ $orientation }) => {
|
|
13627
14038
|
switch ($orientation) {
|
|
13628
14039
|
case "vertical":
|
|
@@ -13648,10 +14059,10 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
|
|
|
13648
14059
|
Divider.displayName = "Divider_UI";
|
|
13649
14060
|
|
|
13650
14061
|
// src/components/EditableHeading/EditableHeading.tsx
|
|
13651
|
-
var
|
|
14062
|
+
var import_styled_components81 = __toESM(require("styled-components"));
|
|
13652
14063
|
var import_react63 = require("react");
|
|
13653
14064
|
var import_jsx_runtime274 = require("react/jsx-runtime");
|
|
13654
|
-
var StyledInput = (0,
|
|
14065
|
+
var StyledInput = (0, import_styled_components81.default)(Input)`
|
|
13655
14066
|
&:not([rows]) {
|
|
13656
14067
|
min-height: unset;
|
|
13657
14068
|
}
|
|
@@ -13672,7 +14083,7 @@ var StyledInput = (0, import_styled_components80.default)(Input)`
|
|
|
13672
14083
|
resize: none;
|
|
13673
14084
|
}
|
|
13674
14085
|
`;
|
|
13675
|
-
var editableStyles =
|
|
14086
|
+
var editableStyles = import_styled_components81.css`
|
|
13676
14087
|
&:has(+ :focus-within) {
|
|
13677
14088
|
background: var(--wui-color-bg-surface-hover);
|
|
13678
14089
|
}
|
|
@@ -13682,7 +14093,7 @@ var editableStyles = import_styled_components80.css`
|
|
|
13682
14093
|
cursor: pointer;
|
|
13683
14094
|
}
|
|
13684
14095
|
`;
|
|
13685
|
-
var StyledHeading2 = (0,
|
|
14096
|
+
var StyledHeading2 = (0, import_styled_components81.default)(Heading)`
|
|
13686
14097
|
width: 100%;
|
|
13687
14098
|
border-radius: var(--wui-border-radius-02);
|
|
13688
14099
|
padding: var(--wui-space-02);
|
|
@@ -13785,15 +14196,15 @@ var EditableHeading = ({
|
|
|
13785
14196
|
|
|
13786
14197
|
// src/components/EditableText/EditableTextDisplay.tsx
|
|
13787
14198
|
var import_react65 = require("react");
|
|
13788
|
-
var
|
|
14199
|
+
var import_styled_components83 = __toESM(require("styled-components"));
|
|
13789
14200
|
var import_type_guards44 = require("@wistia/type-guards");
|
|
13790
14201
|
|
|
13791
14202
|
// src/components/EditableText/EditableTextRoot.tsx
|
|
13792
14203
|
var import_react64 = require("react");
|
|
13793
14204
|
var import_type_guards43 = require("@wistia/type-guards");
|
|
13794
|
-
var
|
|
14205
|
+
var import_styled_components82 = __toESM(require("styled-components"));
|
|
13795
14206
|
var import_jsx_runtime275 = require("react/jsx-runtime");
|
|
13796
|
-
var StyledEditableTextRoot =
|
|
14207
|
+
var StyledEditableTextRoot = import_styled_components82.default.div`
|
|
13797
14208
|
display: contents;
|
|
13798
14209
|
|
|
13799
14210
|
--wui-editable-text-padding: var(--wui-space-01);
|
|
@@ -13905,7 +14316,7 @@ var EditableTextRoot = ({
|
|
|
13905
14316
|
|
|
13906
14317
|
// src/components/EditableText/EditableTextDisplay.tsx
|
|
13907
14318
|
var import_jsx_runtime276 = require("react/jsx-runtime");
|
|
13908
|
-
var StyledEditableTextDisplay =
|
|
14319
|
+
var StyledEditableTextDisplay = import_styled_components83.default.div`
|
|
13909
14320
|
${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
|
|
13910
14321
|
padding: var(--wui-editable-text-padding);
|
|
13911
14322
|
border-radius: var(--wui-editable-text-border-radius);
|
|
@@ -13913,14 +14324,14 @@ var StyledEditableTextDisplay = import_styled_components82.default.div`
|
|
|
13913
14324
|
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
|
|
13914
14325
|
${({ $maxLines }) => {
|
|
13915
14326
|
if ((0, import_type_guards44.isNotNil)($maxLines)) {
|
|
13916
|
-
return
|
|
14327
|
+
return import_styled_components83.css`
|
|
13917
14328
|
${ellipsisStyle};
|
|
13918
14329
|
${lineClampCss($maxLines)};
|
|
13919
14330
|
`;
|
|
13920
14331
|
}
|
|
13921
14332
|
return void 0;
|
|
13922
14333
|
}}
|
|
13923
|
-
${({ $minLines }) => (0, import_type_guards44.isNotNil)($minLines) &&
|
|
14334
|
+
${({ $minLines }) => (0, import_type_guards44.isNotNil)($minLines) && import_styled_components83.css`
|
|
13924
14335
|
min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
|
|
13925
14336
|
`}
|
|
13926
14337
|
word-break: break-word;
|
|
@@ -14006,10 +14417,10 @@ var EditableTextDisplay = makePolymorphic(
|
|
|
14006
14417
|
|
|
14007
14418
|
// src/components/EditableText/EditableTextInput.tsx
|
|
14008
14419
|
var import_react66 = require("react");
|
|
14009
|
-
var
|
|
14420
|
+
var import_styled_components84 = __toESM(require("styled-components"));
|
|
14010
14421
|
var import_type_guards45 = require("@wistia/type-guards");
|
|
14011
14422
|
var import_jsx_runtime277 = require("react/jsx-runtime");
|
|
14012
|
-
var StyledInput2 = (0,
|
|
14423
|
+
var StyledInput2 = (0, import_styled_components84.default)(Input)`
|
|
14013
14424
|
&& {
|
|
14014
14425
|
${({ $minLines }) => (0, import_type_guards45.isNotNil)($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
|
|
14015
14426
|
${({ $maxLines }) => (0, import_type_guards45.isNotNil)($maxLines) && `max-height: calc(${$maxLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
|
|
@@ -14307,10 +14718,10 @@ var FormErrorSummary = ({ description }) => {
|
|
|
14307
14718
|
|
|
14308
14719
|
// src/components/FormField/FormField.tsx
|
|
14309
14720
|
var import_react73 = require("react");
|
|
14310
|
-
var
|
|
14721
|
+
var import_styled_components85 = __toESM(require("styled-components"));
|
|
14311
14722
|
var import_type_guards47 = require("@wistia/type-guards");
|
|
14312
14723
|
var import_jsx_runtime281 = require("react/jsx-runtime");
|
|
14313
|
-
var StyledFormField =
|
|
14724
|
+
var StyledFormField = import_styled_components85.default.div`
|
|
14314
14725
|
--form-field-spacing: var(--wui-space-01);
|
|
14315
14726
|
--form-field-spacing-inline: var(--wui-space-02);
|
|
14316
14727
|
--form-field-error-color: var(--wui-color-text-secondary-error);
|
|
@@ -14340,7 +14751,7 @@ var StyledFormField = import_styled_components84.default.div`
|
|
|
14340
14751
|
grid-template-rows: 1fr;
|
|
14341
14752
|
}
|
|
14342
14753
|
`;
|
|
14343
|
-
var StyledErrorList =
|
|
14754
|
+
var StyledErrorList = import_styled_components85.default.ul`
|
|
14344
14755
|
margin: 0;
|
|
14345
14756
|
padding: 0;
|
|
14346
14757
|
padding-left: var(--wui-space-04);
|
|
@@ -14495,24 +14906,24 @@ RadioGroup.displayName = "RadioGroup_UI";
|
|
|
14495
14906
|
|
|
14496
14907
|
// src/components/Grid/Grid.tsx
|
|
14497
14908
|
var import_react75 = require("react");
|
|
14498
|
-
var
|
|
14909
|
+
var import_styled_components86 = __toESM(require("styled-components"));
|
|
14499
14910
|
var import_type_guards48 = require("@wistia/type-guards");
|
|
14500
14911
|
var import_jsx_runtime283 = require("react/jsx-runtime");
|
|
14501
14912
|
var DEFAULT_ELEMENT5 = "div";
|
|
14502
14913
|
var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
|
|
14503
14914
|
if (minChildWidth === "auto" && maxColumns === "auto") {
|
|
14504
|
-
return
|
|
14915
|
+
return import_styled_components86.css`
|
|
14505
14916
|
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
14506
14917
|
`;
|
|
14507
14918
|
}
|
|
14508
14919
|
const gridMode = expandItems ? "auto-fit" : "auto-fill";
|
|
14509
14920
|
const minChildWidthValue = minChildWidth === "auto" ? 0 : minChildWidth;
|
|
14510
14921
|
if (maxColumns === "auto") {
|
|
14511
|
-
return
|
|
14922
|
+
return import_styled_components86.css`
|
|
14512
14923
|
grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
|
|
14513
14924
|
`;
|
|
14514
14925
|
}
|
|
14515
|
-
return
|
|
14926
|
+
return import_styled_components86.css`
|
|
14516
14927
|
/* Adapted from https://9elements.com/blog/building-a-rock-solid-auto-grid/ */
|
|
14517
14928
|
--wui-grid-total-column-gap-width: calc(${maxColumns - 1} * var(--wui-grid-column-gap));
|
|
14518
14929
|
--wui-grid-max-column-width: calc(
|
|
@@ -14525,7 +14936,7 @@ var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
|
|
|
14525
14936
|
);
|
|
14526
14937
|
`;
|
|
14527
14938
|
};
|
|
14528
|
-
var StyledGrid =
|
|
14939
|
+
var StyledGrid = import_styled_components86.default.div`
|
|
14529
14940
|
--wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
|
|
14530
14941
|
--wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
|
|
14531
14942
|
|
|
@@ -14569,11 +14980,11 @@ GridComponent.displayName = "Grid_UI";
|
|
|
14569
14980
|
var Grid = makePolymorphic(GridComponent);
|
|
14570
14981
|
|
|
14571
14982
|
// src/components/InputClickToCopy/InputClickToCopy.tsx
|
|
14572
|
-
var
|
|
14983
|
+
var import_styled_components87 = __toESM(require("styled-components"));
|
|
14573
14984
|
var import_react76 = require("react");
|
|
14574
14985
|
var import_type_guards49 = require("@wistia/type-guards");
|
|
14575
14986
|
var import_jsx_runtime284 = require("react/jsx-runtime");
|
|
14576
|
-
var StyledIconButton = (0,
|
|
14987
|
+
var StyledIconButton = (0, import_styled_components87.default)(IconButton)`
|
|
14577
14988
|
/* override size for icon button since prop gets changed by Input */
|
|
14578
14989
|
height: var(--icon-button-size-sm);
|
|
14579
14990
|
width: var(--icon-button-size-sm);
|
|
@@ -14639,11 +15050,11 @@ var InputClickToCopy = (0, import_react76.forwardRef)(
|
|
|
14639
15050
|
InputClickToCopy.displayName = "InputClickToCopy_UI";
|
|
14640
15051
|
|
|
14641
15052
|
// src/components/InputPassword/InputPassword.tsx
|
|
14642
|
-
var
|
|
15053
|
+
var import_styled_components88 = __toESM(require("styled-components"));
|
|
14643
15054
|
var import_react77 = require("react");
|
|
14644
15055
|
var import_type_guards50 = require("@wistia/type-guards");
|
|
14645
15056
|
var import_jsx_runtime285 = require("react/jsx-runtime");
|
|
14646
|
-
var StyledIconButton2 = (0,
|
|
15057
|
+
var StyledIconButton2 = (0, import_styled_components88.default)(IconButton)`
|
|
14647
15058
|
/* override size for icon button since prop gets changed by Input */
|
|
14648
15059
|
height: var(--icon-button-size-sm);
|
|
14649
15060
|
width: var(--icon-button-size-sm);
|
|
@@ -14686,16 +15097,16 @@ var InputPassword = (0, import_react77.forwardRef)(
|
|
|
14686
15097
|
InputPassword.displayName = "InputPassword_UI";
|
|
14687
15098
|
|
|
14688
15099
|
// src/components/KeyboardShortcut/KeyboardShortcut.tsx
|
|
14689
|
-
var
|
|
15100
|
+
var import_styled_components89 = __toESM(require("styled-components"));
|
|
14690
15101
|
var import_type_guards51 = require("@wistia/type-guards");
|
|
14691
15102
|
var import_jsx_runtime286 = require("react/jsx-runtime");
|
|
14692
|
-
var StyledKeyboardShortcut =
|
|
15103
|
+
var StyledKeyboardShortcut = import_styled_components89.default.div`
|
|
14693
15104
|
align-items: center;
|
|
14694
15105
|
display: flex;
|
|
14695
15106
|
gap: var(--wui-space-02);
|
|
14696
15107
|
${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
|
|
14697
15108
|
`;
|
|
14698
|
-
var StyledKey =
|
|
15109
|
+
var StyledKey = import_styled_components89.default.kbd`
|
|
14699
15110
|
align-items: center;
|
|
14700
15111
|
background: var(--wui-color-bg-surface-secondary);
|
|
14701
15112
|
border-bottom: 1px solid var(--wui-color-border-secondary);
|
|
@@ -14718,11 +15129,11 @@ var StyledKey = import_styled_components88.default.kbd`
|
|
|
14718
15129
|
min-width: 20px;
|
|
14719
15130
|
padding: 0 var(--wui-space-01);
|
|
14720
15131
|
`;
|
|
14721
|
-
var Label2 =
|
|
15132
|
+
var Label2 = import_styled_components89.default.span`
|
|
14722
15133
|
color: var(--wui-color-text);
|
|
14723
15134
|
font-size: 12px;
|
|
14724
15135
|
`;
|
|
14725
|
-
var KeysContainer =
|
|
15136
|
+
var KeysContainer = import_styled_components89.default.div`
|
|
14726
15137
|
display: flex;
|
|
14727
15138
|
gap: var(--wui-space-01);
|
|
14728
15139
|
`;
|
|
@@ -14796,13 +15207,13 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
|
|
|
14796
15207
|
|
|
14797
15208
|
// src/components/List/List.tsx
|
|
14798
15209
|
var import_type_guards53 = require("@wistia/type-guards");
|
|
14799
|
-
var
|
|
15210
|
+
var import_styled_components91 = __toESM(require("styled-components"));
|
|
14800
15211
|
|
|
14801
15212
|
// src/components/List/ListItem.tsx
|
|
14802
|
-
var
|
|
15213
|
+
var import_styled_components90 = __toESM(require("styled-components"));
|
|
14803
15214
|
var import_type_guards52 = require("@wistia/type-guards");
|
|
14804
15215
|
var import_jsx_runtime287 = require("react/jsx-runtime");
|
|
14805
|
-
var ListItemComponent =
|
|
15216
|
+
var ListItemComponent = import_styled_components90.default.li`
|
|
14806
15217
|
margin-bottom: var(--wui-space-02);
|
|
14807
15218
|
`;
|
|
14808
15219
|
var ListItem = ({ children }) => {
|
|
@@ -14815,7 +15226,7 @@ ListItem.displayName = "ListItem_UI";
|
|
|
14815
15226
|
|
|
14816
15227
|
// src/components/List/List.tsx
|
|
14817
15228
|
var import_jsx_runtime288 = require("react/jsx-runtime");
|
|
14818
|
-
var spacesStyle =
|
|
15229
|
+
var spacesStyle = import_styled_components91.css`
|
|
14819
15230
|
overflow: hidden;
|
|
14820
15231
|
padding-left: 0;
|
|
14821
15232
|
vertical-align: bottom;
|
|
@@ -14837,7 +15248,7 @@ var spacesStyle = import_styled_components90.css`
|
|
|
14837
15248
|
}
|
|
14838
15249
|
}
|
|
14839
15250
|
`;
|
|
14840
|
-
var commasStyle =
|
|
15251
|
+
var commasStyle = import_styled_components91.css`
|
|
14841
15252
|
${spacesStyle};
|
|
14842
15253
|
|
|
14843
15254
|
li {
|
|
@@ -14847,7 +15258,7 @@ var commasStyle = import_styled_components90.css`
|
|
|
14847
15258
|
}
|
|
14848
15259
|
}
|
|
14849
15260
|
`;
|
|
14850
|
-
var slashesStyle =
|
|
15261
|
+
var slashesStyle = import_styled_components91.css`
|
|
14851
15262
|
${spacesStyle};
|
|
14852
15263
|
|
|
14853
15264
|
li {
|
|
@@ -14858,7 +15269,7 @@ var slashesStyle = import_styled_components90.css`
|
|
|
14858
15269
|
}
|
|
14859
15270
|
}
|
|
14860
15271
|
`;
|
|
14861
|
-
var breadcrumbsStyle =
|
|
15272
|
+
var breadcrumbsStyle = import_styled_components91.css`
|
|
14862
15273
|
${spacesStyle};
|
|
14863
15274
|
|
|
14864
15275
|
li {
|
|
@@ -14869,11 +15280,11 @@ var breadcrumbsStyle = import_styled_components90.css`
|
|
|
14869
15280
|
}
|
|
14870
15281
|
}
|
|
14871
15282
|
`;
|
|
14872
|
-
var unbulletedStyle =
|
|
15283
|
+
var unbulletedStyle = import_styled_components91.css`
|
|
14873
15284
|
list-style: none;
|
|
14874
15285
|
padding-left: 0;
|
|
14875
15286
|
`;
|
|
14876
|
-
var ListComponent =
|
|
15287
|
+
var ListComponent = import_styled_components91.default.ul`
|
|
14877
15288
|
list-style-position: outside;
|
|
14878
15289
|
margin: 0 0 var(--wui-space-01);
|
|
14879
15290
|
padding: 0 0 0 var(--wui-space-04);
|
|
@@ -14953,9 +15364,9 @@ var List = ({
|
|
|
14953
15364
|
List.displayName = "List_UI";
|
|
14954
15365
|
|
|
14955
15366
|
// src/components/Mark/Mark.tsx
|
|
14956
|
-
var
|
|
15367
|
+
var import_styled_components92 = __toESM(require("styled-components"));
|
|
14957
15368
|
var import_jsx_runtime289 = require("react/jsx-runtime");
|
|
14958
|
-
var StyledMark =
|
|
15369
|
+
var StyledMark = import_styled_components92.default.mark`
|
|
14959
15370
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
14960
15371
|
background-color: var(--wui-color-bg-surface-tertiary);
|
|
14961
15372
|
color: var(--wui-color-text);
|
|
@@ -14975,19 +15386,19 @@ Mark.displayName = "Mark_UI";
|
|
|
14975
15386
|
|
|
14976
15387
|
// src/components/Modal/Modal.tsx
|
|
14977
15388
|
var import_react80 = require("react");
|
|
14978
|
-
var
|
|
15389
|
+
var import_styled_components97 = __toESM(require("styled-components"));
|
|
14979
15390
|
var import_react_dialog5 = require("@radix-ui/react-dialog");
|
|
14980
15391
|
var import_type_guards55 = require("@wistia/type-guards");
|
|
14981
15392
|
|
|
14982
15393
|
// src/components/Modal/ModalHeader.tsx
|
|
14983
|
-
var
|
|
15394
|
+
var import_styled_components94 = __toESM(require("styled-components"));
|
|
14984
15395
|
var import_react_dialog2 = require("@radix-ui/react-dialog");
|
|
14985
15396
|
|
|
14986
15397
|
// src/components/Modal/ModalCloseButton.tsx
|
|
14987
|
-
var
|
|
15398
|
+
var import_styled_components93 = __toESM(require("styled-components"));
|
|
14988
15399
|
var import_react_dialog = require("@radix-ui/react-dialog");
|
|
14989
15400
|
var import_jsx_runtime290 = require("react/jsx-runtime");
|
|
14990
|
-
var CloseButton = (0,
|
|
15401
|
+
var CloseButton = (0, import_styled_components93.default)(import_react_dialog.Close)`
|
|
14991
15402
|
align-self: start;
|
|
14992
15403
|
`;
|
|
14993
15404
|
var ModalCloseButton = () => {
|
|
@@ -15004,7 +15415,7 @@ var ModalCloseButton = () => {
|
|
|
15004
15415
|
|
|
15005
15416
|
// src/components/Modal/ModalHeader.tsx
|
|
15006
15417
|
var import_jsx_runtime291 = require("react/jsx-runtime");
|
|
15007
|
-
var Header =
|
|
15418
|
+
var Header = import_styled_components94.default.header`
|
|
15008
15419
|
display: flex;
|
|
15009
15420
|
order: 1;
|
|
15010
15421
|
gap: var(--wui-space-01);
|
|
@@ -15022,7 +15433,7 @@ var Header = import_styled_components93.default.header`
|
|
|
15022
15433
|
top: var(--wui-space-03);
|
|
15023
15434
|
}
|
|
15024
15435
|
`;
|
|
15025
|
-
var Title = (0,
|
|
15436
|
+
var Title = (0, import_styled_components94.default)(import_react_dialog2.Title)`
|
|
15026
15437
|
font-family: var(--wui-typography-heading-2-family);
|
|
15027
15438
|
line-height: var(--wui-typography-heading-2-line-height);
|
|
15028
15439
|
font-size: var(--wui-typography-heading-2-size);
|
|
@@ -15049,7 +15460,7 @@ var ModalHeader = ({
|
|
|
15049
15460
|
|
|
15050
15461
|
// src/components/Modal/ModalContent.tsx
|
|
15051
15462
|
var import_react79 = require("react");
|
|
15052
|
-
var
|
|
15463
|
+
var import_styled_components95 = __toESM(require("styled-components"));
|
|
15053
15464
|
var import_react_dialog3 = require("@radix-ui/react-dialog");
|
|
15054
15465
|
|
|
15055
15466
|
// src/private/hooks/useFocusRestore/useFocusRestore.ts
|
|
@@ -15073,7 +15484,7 @@ var useFocusRestore = () => {
|
|
|
15073
15484
|
|
|
15074
15485
|
// src/components/Modal/ModalContent.tsx
|
|
15075
15486
|
var import_jsx_runtime292 = require("react/jsx-runtime");
|
|
15076
|
-
var modalEnter =
|
|
15487
|
+
var modalEnter = import_styled_components95.keyframes`
|
|
15077
15488
|
from {
|
|
15078
15489
|
opacity: 0;
|
|
15079
15490
|
transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
|
|
@@ -15084,7 +15495,7 @@ var modalEnter = import_styled_components94.keyframes`
|
|
|
15084
15495
|
transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
|
|
15085
15496
|
}
|
|
15086
15497
|
`;
|
|
15087
|
-
var modalExit =
|
|
15498
|
+
var modalExit = import_styled_components95.keyframes`
|
|
15088
15499
|
from {
|
|
15089
15500
|
opacity: 1;
|
|
15090
15501
|
transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
|
|
@@ -15095,7 +15506,7 @@ var modalExit = import_styled_components94.keyframes`
|
|
|
15095
15506
|
transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
|
|
15096
15507
|
}
|
|
15097
15508
|
`;
|
|
15098
|
-
var centeredModalStyles =
|
|
15509
|
+
var centeredModalStyles = import_styled_components95.css`
|
|
15099
15510
|
--wui-modal-screen-offset: var(--wui-space-05);
|
|
15100
15511
|
--wui-modal-translate-y: -50%;
|
|
15101
15512
|
|
|
@@ -15111,7 +15522,7 @@ var centeredModalStyles = import_styled_components94.css`
|
|
|
15111
15522
|
animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
15112
15523
|
}
|
|
15113
15524
|
`;
|
|
15114
|
-
var fixedTopModalStyles =
|
|
15525
|
+
var fixedTopModalStyles = import_styled_components95.css`
|
|
15115
15526
|
--wui-modal-screen-offset-top: 15vh;
|
|
15116
15527
|
--wui-modal-screen-offset-bottom: 5vh;
|
|
15117
15528
|
--wui-modal-translate-y: 0%;
|
|
@@ -15130,7 +15541,7 @@ var fixedTopModalStyles = import_styled_components94.css`
|
|
|
15130
15541
|
animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
15131
15542
|
}
|
|
15132
15543
|
`;
|
|
15133
|
-
var slideInRight =
|
|
15544
|
+
var slideInRight = import_styled_components95.keyframes`
|
|
15134
15545
|
from {
|
|
15135
15546
|
opacity: 0;
|
|
15136
15547
|
transform: translateX(100%);
|
|
@@ -15141,7 +15552,7 @@ var slideInRight = import_styled_components94.keyframes`
|
|
|
15141
15552
|
transform: translateX(0);
|
|
15142
15553
|
}
|
|
15143
15554
|
`;
|
|
15144
|
-
var slideOutRight =
|
|
15555
|
+
var slideOutRight = import_styled_components95.keyframes`
|
|
15145
15556
|
from {
|
|
15146
15557
|
opacity: 1;
|
|
15147
15558
|
transform: translateX(0);
|
|
@@ -15152,7 +15563,7 @@ var slideOutRight = import_styled_components94.keyframes`
|
|
|
15152
15563
|
transform: translateX(100%);
|
|
15153
15564
|
}
|
|
15154
15565
|
`;
|
|
15155
|
-
var rightSidePanelModalStyles =
|
|
15566
|
+
var rightSidePanelModalStyles = import_styled_components95.css`
|
|
15156
15567
|
--wui-modal-screen-offset: var(--wui-space-05);
|
|
15157
15568
|
|
|
15158
15569
|
height: calc(100vh - var(--wui-modal-screen-offset) * 2);
|
|
@@ -15170,7 +15581,7 @@ var positionStyleMap = {
|
|
|
15170
15581
|
"fixed-top": fixedTopModalStyles,
|
|
15171
15582
|
"right-side-panel": rightSidePanelModalStyles
|
|
15172
15583
|
};
|
|
15173
|
-
var StyledModalContent = (0,
|
|
15584
|
+
var StyledModalContent = (0, import_styled_components95.default)(import_react_dialog3.Content)`
|
|
15174
15585
|
position: fixed;
|
|
15175
15586
|
display: flex;
|
|
15176
15587
|
flex-direction: column;
|
|
@@ -15217,8 +15628,8 @@ var ModalContent = (0, import_react79.forwardRef)(
|
|
|
15217
15628
|
|
|
15218
15629
|
// src/components/Modal/ModalOverlay.tsx
|
|
15219
15630
|
var import_react_dialog4 = require("@radix-ui/react-dialog");
|
|
15220
|
-
var
|
|
15221
|
-
var backdropShow =
|
|
15631
|
+
var import_styled_components96 = __toESM(require("styled-components"));
|
|
15632
|
+
var backdropShow = import_styled_components96.keyframes`
|
|
15222
15633
|
from {
|
|
15223
15634
|
opacity: 0;
|
|
15224
15635
|
}
|
|
@@ -15227,7 +15638,7 @@ var backdropShow = import_styled_components95.keyframes`
|
|
|
15227
15638
|
opacity: 1;
|
|
15228
15639
|
}
|
|
15229
15640
|
`;
|
|
15230
|
-
var backdropHide =
|
|
15641
|
+
var backdropHide = import_styled_components96.keyframes`
|
|
15231
15642
|
from {
|
|
15232
15643
|
opacity: 1;
|
|
15233
15644
|
}
|
|
@@ -15236,7 +15647,7 @@ var backdropHide = import_styled_components95.keyframes`
|
|
|
15236
15647
|
opacity: 0;
|
|
15237
15648
|
}
|
|
15238
15649
|
`;
|
|
15239
|
-
var ModalOverlay = (0,
|
|
15650
|
+
var ModalOverlay = (0, import_styled_components96.default)(import_react_dialog4.DialogOverlay)`
|
|
15240
15651
|
animation: ${backdropShow} var(--wui-motion-duration-02);
|
|
15241
15652
|
background: var(--wui-color-backdrop);
|
|
15242
15653
|
inset: 0;
|
|
@@ -15251,7 +15662,7 @@ var ModalOverlay = (0, import_styled_components95.default)(import_react_dialog4.
|
|
|
15251
15662
|
// src/components/Modal/Modal.tsx
|
|
15252
15663
|
var import_jsx_runtime293 = require("react/jsx-runtime");
|
|
15253
15664
|
var DEFAULT_MODAL_WIDTH = "532px";
|
|
15254
|
-
var ModalBody =
|
|
15665
|
+
var ModalBody = import_styled_components97.default.div`
|
|
15255
15666
|
flex-direction: column;
|
|
15256
15667
|
display: flex;
|
|
15257
15668
|
flex: 1 0 0;
|
|
@@ -15318,7 +15729,7 @@ Modal.displayName = "Modal_UI";
|
|
|
15318
15729
|
|
|
15319
15730
|
// src/components/Popover/Popover.tsx
|
|
15320
15731
|
var import_react_popover5 = require("@radix-ui/react-popover");
|
|
15321
|
-
var
|
|
15732
|
+
var import_styled_components99 = __toESM(require("styled-components"));
|
|
15322
15733
|
|
|
15323
15734
|
// src/private/helpers/getControls/getControlProps.tsx
|
|
15324
15735
|
var import_type_guards56 = require("@wistia/type-guards");
|
|
@@ -15328,12 +15739,12 @@ var getControlProps = (isOpen, onOpenChange) => {
|
|
|
15328
15739
|
|
|
15329
15740
|
// src/components/Popover/PopoverArrow.tsx
|
|
15330
15741
|
var import_react_popover4 = require("@radix-ui/react-popover");
|
|
15331
|
-
var
|
|
15742
|
+
var import_styled_components98 = __toESM(require("styled-components"));
|
|
15332
15743
|
var import_jsx_runtime294 = require("react/jsx-runtime");
|
|
15333
|
-
var StyledPath =
|
|
15744
|
+
var StyledPath = import_styled_components98.default.path`
|
|
15334
15745
|
fill: var(--wui-color-border-secondary);
|
|
15335
15746
|
`;
|
|
15336
|
-
var circleAnimation =
|
|
15747
|
+
var circleAnimation = import_styled_components98.keyframes`
|
|
15337
15748
|
0% {
|
|
15338
15749
|
opacity: var(--wui-popover-arrow-circle-starting-opacity);
|
|
15339
15750
|
}
|
|
@@ -15341,7 +15752,7 @@ var circleAnimation = import_styled_components97.keyframes`
|
|
|
15341
15752
|
opacity: 0;
|
|
15342
15753
|
}
|
|
15343
15754
|
`;
|
|
15344
|
-
var StyledCircle =
|
|
15755
|
+
var StyledCircle = import_styled_components98.default.circle`
|
|
15345
15756
|
stroke: var(--wui-color-border-active);
|
|
15346
15757
|
animation-duration: 2s;
|
|
15347
15758
|
animation-iteration-count: infinite;
|
|
@@ -15362,7 +15773,7 @@ var StyledCircle = import_styled_components97.default.circle`
|
|
|
15362
15773
|
}
|
|
15363
15774
|
|
|
15364
15775
|
@media (prefers-reduced-motion: no-preference) {
|
|
15365
|
-
${({ $isAnimated }) => $isAnimated &&
|
|
15776
|
+
${({ $isAnimated }) => $isAnimated && import_styled_components98.css`
|
|
15366
15777
|
animation-name: ${circleAnimation};
|
|
15367
15778
|
`}
|
|
15368
15779
|
}
|
|
@@ -15408,10 +15819,10 @@ PopoverArrow.displayName = "PopoverArrow_UI";
|
|
|
15408
15819
|
|
|
15409
15820
|
// src/components/Popover/Popover.tsx
|
|
15410
15821
|
var import_jsx_runtime295 = require("react/jsx-runtime");
|
|
15411
|
-
var StyledContent2 = (0,
|
|
15822
|
+
var StyledContent2 = (0, import_styled_components99.default)(import_react_popover5.Content)`
|
|
15412
15823
|
z-index: var(--wui-zindex-popover);
|
|
15413
15824
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
15414
|
-
${({ $unstyled }) => !$unstyled &&
|
|
15825
|
+
${({ $unstyled }) => !$unstyled && import_styled_components99.css`
|
|
15415
15826
|
border-radius: var(--wui-border-radius-02);
|
|
15416
15827
|
padding: var(--wui-space-04);
|
|
15417
15828
|
max-width: var(--wui-popover-max-width, 320px);
|
|
@@ -15477,11 +15888,11 @@ var Popover = ({
|
|
|
15477
15888
|
Popover.displayName = "Popover_UI";
|
|
15478
15889
|
|
|
15479
15890
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
15480
|
-
var
|
|
15891
|
+
var import_styled_components100 = __toESM(require("styled-components"));
|
|
15481
15892
|
var import_react_progress = require("@radix-ui/react-progress");
|
|
15482
15893
|
var import_type_guards57 = require("@wistia/type-guards");
|
|
15483
15894
|
var import_jsx_runtime296 = require("react/jsx-runtime");
|
|
15484
|
-
var ProgressBarWrapper =
|
|
15895
|
+
var ProgressBarWrapper = import_styled_components100.default.div`
|
|
15485
15896
|
--progress-bar-height: 8px;
|
|
15486
15897
|
|
|
15487
15898
|
display: flex;
|
|
@@ -15495,7 +15906,7 @@ var getTranslateValue = (progress, max) => {
|
|
|
15495
15906
|
const progressPercentage = progress / max * 100;
|
|
15496
15907
|
return `translateX(-${100 - progressPercentage}%)`;
|
|
15497
15908
|
};
|
|
15498
|
-
var ProgressBarLabel =
|
|
15909
|
+
var ProgressBarLabel = import_styled_components100.default.div`
|
|
15499
15910
|
display: flex;
|
|
15500
15911
|
line-height: var(--wui-typography-label-3-line-height);
|
|
15501
15912
|
font-size: var(--wui-typography-label-3-size);
|
|
@@ -15503,7 +15914,7 @@ var ProgressBarLabel = import_styled_components99.default.div`
|
|
|
15503
15914
|
color: var(--wui-color-text-secondary);
|
|
15504
15915
|
flex-shrink: 0;
|
|
15505
15916
|
`;
|
|
15506
|
-
var StyledProgressIndicator = (0,
|
|
15917
|
+
var StyledProgressIndicator = (0, import_styled_components100.default)(import_react_progress.Indicator)`
|
|
15507
15918
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
15508
15919
|
background-color: var(--wui-color-bg-fill);
|
|
15509
15920
|
width: 100%;
|
|
@@ -15513,7 +15924,7 @@ var StyledProgressIndicator = (0, import_styled_components99.default)(import_rea
|
|
|
15513
15924
|
transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
|
|
15514
15925
|
transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
|
|
15515
15926
|
`;
|
|
15516
|
-
var StyledProgressBar = (0,
|
|
15927
|
+
var StyledProgressBar = (0, import_styled_components100.default)(import_react_progress.Root)`
|
|
15517
15928
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
15518
15929
|
position: relative;
|
|
15519
15930
|
overflow: hidden;
|
|
@@ -15561,17 +15972,17 @@ ProgressBar.displayName = "ProgressBar_UI";
|
|
|
15561
15972
|
// src/components/Radio/Radio.tsx
|
|
15562
15973
|
var import_type_guards58 = require("@wistia/type-guards");
|
|
15563
15974
|
var import_react81 = require("react");
|
|
15564
|
-
var
|
|
15975
|
+
var import_styled_components101 = __toESM(require("styled-components"));
|
|
15565
15976
|
var import_jsx_runtime297 = require("react/jsx-runtime");
|
|
15566
|
-
var sizeSmall2 =
|
|
15977
|
+
var sizeSmall2 = import_styled_components101.css`
|
|
15567
15978
|
--wui-radio-size: 14px;
|
|
15568
15979
|
--wui-radio-icon-size: 7px;
|
|
15569
15980
|
`;
|
|
15570
|
-
var sizeMedium2 =
|
|
15981
|
+
var sizeMedium2 = import_styled_components101.css`
|
|
15571
15982
|
--wui-radio-size: 16px;
|
|
15572
15983
|
--wui-radio-icon-size: 8px;
|
|
15573
15984
|
`;
|
|
15574
|
-
var sizeLarge2 =
|
|
15985
|
+
var sizeLarge2 = import_styled_components101.css`
|
|
15575
15986
|
--wui-radio-size: 20px;
|
|
15576
15987
|
--wui-radio-icon-size: 10px;
|
|
15577
15988
|
`;
|
|
@@ -15580,7 +15991,7 @@ var getSizeCss3 = (size) => {
|
|
|
15580
15991
|
if (size === "lg") return sizeLarge2;
|
|
15581
15992
|
return sizeMedium2;
|
|
15582
15993
|
};
|
|
15583
|
-
var StyledRadioWrapper =
|
|
15994
|
+
var StyledRadioWrapper = import_styled_components101.default.div`
|
|
15584
15995
|
--wui-radio-background-color: var(--wui-color-bg-surface);
|
|
15585
15996
|
--wui-radio-border-color: var(--wui-color-border-secondary);
|
|
15586
15997
|
--wui-radio-icon-color: transparent;
|
|
@@ -15614,7 +16025,7 @@ var StyledRadioWrapper = import_styled_components100.default.div`
|
|
|
15614
16025
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
15615
16026
|
user-select: none;
|
|
15616
16027
|
`;
|
|
15617
|
-
var StyledRadioInput =
|
|
16028
|
+
var StyledRadioInput = import_styled_components101.default.div`
|
|
15618
16029
|
${({ $size }) => getSizeCss3($size)}
|
|
15619
16030
|
width: var(--wui-radio-size);
|
|
15620
16031
|
height: var(--wui-radio-size);
|
|
@@ -15640,7 +16051,7 @@ var StyledRadioInput = import_styled_components100.default.div`
|
|
|
15640
16051
|
transform: translate(-50%, -50%);
|
|
15641
16052
|
}
|
|
15642
16053
|
`;
|
|
15643
|
-
var StyledHiddenRadioInput =
|
|
16054
|
+
var StyledHiddenRadioInput = import_styled_components101.default.input`
|
|
15644
16055
|
${visuallyHiddenStyle}
|
|
15645
16056
|
`;
|
|
15646
16057
|
var Radio = (0, import_react81.forwardRef)(
|
|
@@ -15712,17 +16123,17 @@ var import_react83 = require("react");
|
|
|
15712
16123
|
|
|
15713
16124
|
// src/components/RadioCard/RadioCardRoot.tsx
|
|
15714
16125
|
var import_react82 = require("react");
|
|
15715
|
-
var
|
|
16126
|
+
var import_styled_components102 = __toESM(require("styled-components"));
|
|
15716
16127
|
var import_type_guards59 = require("@wistia/type-guards");
|
|
15717
16128
|
var import_jsx_runtime298 = require("react/jsx-runtime");
|
|
15718
|
-
var checkedStyles =
|
|
16129
|
+
var checkedStyles = import_styled_components102.css`
|
|
15719
16130
|
--wui-radio-card-border-color: var(--wui-color-focus-ring);
|
|
15720
16131
|
--wui-color-icon: var(--wui-color-icon-selected);
|
|
15721
16132
|
--wui-radio-card-background-color: var(--wui-color-bg-surface-info);
|
|
15722
16133
|
--wui-color-text: var(--wui-color-text-info);
|
|
15723
16134
|
--wui-color-text-secondary: var(--wui-color-text-info);
|
|
15724
16135
|
`;
|
|
15725
|
-
var disabledStyles =
|
|
16136
|
+
var disabledStyles = import_styled_components102.css`
|
|
15726
16137
|
--wui-radio-card-border-color: var(--wui-color-border-disabled);
|
|
15727
16138
|
--wui-radio-card-background-color: var(--wui-color-bg-surface-disabled);
|
|
15728
16139
|
--wui-radio-card-cursor: not-allowed;
|
|
@@ -15730,10 +16141,10 @@ var disabledStyles = import_styled_components101.css`
|
|
|
15730
16141
|
--wui-color-text: var(--wui-color-text-disabled);
|
|
15731
16142
|
--wui-color-text-secondary: var(--wui-color-text-disabled);
|
|
15732
16143
|
`;
|
|
15733
|
-
var focusStyles =
|
|
16144
|
+
var focusStyles = import_styled_components102.css`
|
|
15734
16145
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
15735
16146
|
`;
|
|
15736
|
-
var imageCoverStyles =
|
|
16147
|
+
var imageCoverStyles = import_styled_components102.css`
|
|
15737
16148
|
--wui-radio-card-image-inset: 0px;
|
|
15738
16149
|
--wui-radio-card-border-width: 0px;
|
|
15739
16150
|
--wui-inset-shadow-width: 1px;
|
|
@@ -15764,7 +16175,7 @@ var imageCoverStyles = import_styled_components101.css`
|
|
|
15764
16175
|
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
|
|
15765
16176
|
}
|
|
15766
16177
|
`;
|
|
15767
|
-
var StyledCard2 =
|
|
16178
|
+
var StyledCard2 = import_styled_components102.default.label`
|
|
15768
16179
|
--wui-radio-card-border-color: var(--wui-color-border-secondary);
|
|
15769
16180
|
--wui-radio-card-background-color: var(--wui-color-bg-surface);
|
|
15770
16181
|
--wui-radio-card-cursor: pointer;
|
|
@@ -15818,7 +16229,7 @@ var StyledCard2 = import_styled_components101.default.label`
|
|
|
15818
16229
|
}
|
|
15819
16230
|
}
|
|
15820
16231
|
`;
|
|
15821
|
-
var StyledHiddenInput =
|
|
16232
|
+
var StyledHiddenInput = import_styled_components102.default.input`
|
|
15822
16233
|
${visuallyHiddenStyle}
|
|
15823
16234
|
`;
|
|
15824
16235
|
var RadioCardRoot = (0, import_react82.forwardRef)(
|
|
@@ -15873,12 +16284,12 @@ var RadioCardRoot = (0, import_react82.forwardRef)(
|
|
|
15873
16284
|
RadioCardRoot.displayName = "RadioCardRoot_UI";
|
|
15874
16285
|
|
|
15875
16286
|
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
15876
|
-
var
|
|
16287
|
+
var import_styled_components104 = __toESM(require("styled-components"));
|
|
15877
16288
|
var import_type_guards60 = require("@wistia/type-guards");
|
|
15878
16289
|
|
|
15879
16290
|
// src/components/RadioCard/RadioCardIndicator.tsx
|
|
15880
|
-
var
|
|
15881
|
-
var RadioCardIndicator =
|
|
16291
|
+
var import_styled_components103 = __toESM(require("styled-components"));
|
|
16292
|
+
var RadioCardIndicator = import_styled_components103.default.div`
|
|
15882
16293
|
--wui-radio-card-indicator-size: 14px;
|
|
15883
16294
|
--wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
|
|
15884
16295
|
--wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
|
|
@@ -15928,15 +16339,15 @@ RadioCardIndicator.displayName = "RadioCardIndicator_UI";
|
|
|
15928
16339
|
|
|
15929
16340
|
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
15930
16341
|
var import_jsx_runtime299 = require("react/jsx-runtime");
|
|
15931
|
-
var StyledCardContent =
|
|
16342
|
+
var StyledCardContent = import_styled_components104.default.div`
|
|
15932
16343
|
display: grid;
|
|
15933
16344
|
grid-auto-flow: column;
|
|
15934
16345
|
gap: var(--wui-space-02);
|
|
15935
16346
|
`;
|
|
15936
|
-
var StyledCardIcon =
|
|
16347
|
+
var StyledCardIcon = import_styled_components104.default.div`
|
|
15937
16348
|
display: contents;
|
|
15938
16349
|
`;
|
|
15939
|
-
var StyledIndicatorContainer =
|
|
16350
|
+
var StyledIndicatorContainer = import_styled_components104.default.div`
|
|
15940
16351
|
height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
|
|
15941
16352
|
display: flex;
|
|
15942
16353
|
align-items: center;
|
|
@@ -15975,8 +16386,8 @@ var RadioCardDefaultLayout = ({
|
|
|
15975
16386
|
RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
|
|
15976
16387
|
|
|
15977
16388
|
// src/components/RadioCard/RadioCardChildrenContainer.tsx
|
|
15978
|
-
var
|
|
15979
|
-
var RadioCardChildrenContainer =
|
|
16389
|
+
var import_styled_components105 = __toESM(require("styled-components"));
|
|
16390
|
+
var RadioCardChildrenContainer = import_styled_components105.default.div`
|
|
15980
16391
|
flex: 1 1 auto;
|
|
15981
16392
|
`;
|
|
15982
16393
|
|
|
@@ -16035,49 +16446,49 @@ RadioCardImage.displayName = "RadioCardImage_UI";
|
|
|
16035
16446
|
|
|
16036
16447
|
// src/components/ScrollArea/ScrollArea.tsx
|
|
16037
16448
|
var import_react85 = require("react");
|
|
16038
|
-
var
|
|
16449
|
+
var import_styled_components106 = __toESM(require("styled-components"));
|
|
16039
16450
|
var import_throttle_debounce2 = require("throttle-debounce");
|
|
16040
16451
|
var import_jsx_runtime302 = require("react/jsx-runtime");
|
|
16041
16452
|
var SHADOW_SIZE_PX = 8;
|
|
16042
|
-
var Container10 =
|
|
16453
|
+
var Container10 = import_styled_components106.default.div`
|
|
16043
16454
|
overflow: hidden;
|
|
16044
16455
|
position: relative;
|
|
16045
16456
|
flex: 1 1 auto;
|
|
16046
16457
|
`;
|
|
16047
|
-
var ScrollContainer =
|
|
16458
|
+
var ScrollContainer = import_styled_components106.default.div`
|
|
16048
16459
|
overflow: auto;
|
|
16049
16460
|
height: 100%;
|
|
16050
16461
|
width: 100%;
|
|
16051
16462
|
`;
|
|
16052
|
-
var Shadow =
|
|
16463
|
+
var Shadow = import_styled_components106.default.div`
|
|
16053
16464
|
pointer-events: none;
|
|
16054
16465
|
position: absolute;
|
|
16055
16466
|
transition: box-shadow var(--wui-motion-duration-04) var(--wui-motion-ease);
|
|
16056
16467
|
box-shadow: ${({ $isVisible }) => $isVisible ? `0 0 ${SHADOW_SIZE_PX}px ${SHADOW_SIZE_PX}px var(--wui-color-drop-shadow)` : "none"};
|
|
16057
16468
|
z-index: 1;
|
|
16058
16469
|
`;
|
|
16059
|
-
var ShadowAtTop = (0,
|
|
16470
|
+
var ShadowAtTop = (0, import_styled_components106.default)(Shadow)`
|
|
16060
16471
|
transform: translateY(-${SHADOW_SIZE_PX}px);
|
|
16061
16472
|
height: 0;
|
|
16062
16473
|
left: 0;
|
|
16063
16474
|
right: 0;
|
|
16064
16475
|
top: 0;
|
|
16065
16476
|
`;
|
|
16066
|
-
var ShadowAtBottom = (0,
|
|
16477
|
+
var ShadowAtBottom = (0, import_styled_components106.default)(Shadow)`
|
|
16067
16478
|
transform: translateY(${SHADOW_SIZE_PX}px);
|
|
16068
16479
|
bottom: 0;
|
|
16069
16480
|
height: 0;
|
|
16070
16481
|
left: 0;
|
|
16071
16482
|
right: 0;
|
|
16072
16483
|
`;
|
|
16073
|
-
var ShadowAtLeft = (0,
|
|
16484
|
+
var ShadowAtLeft = (0, import_styled_components106.default)(Shadow)`
|
|
16074
16485
|
transform: translateX(-${SHADOW_SIZE_PX}px);
|
|
16075
16486
|
bottom: 0;
|
|
16076
16487
|
left: 0;
|
|
16077
16488
|
top: 0;
|
|
16078
16489
|
width: 0;
|
|
16079
16490
|
`;
|
|
16080
|
-
var ShadowAtRight = (0,
|
|
16491
|
+
var ShadowAtRight = (0, import_styled_components106.default)(Shadow)`
|
|
16081
16492
|
transform: translateX(${SHADOW_SIZE_PX}px);
|
|
16082
16493
|
bottom: 0;
|
|
16083
16494
|
right: 0;
|
|
@@ -16138,7 +16549,7 @@ ScrollArea.displayName = "ScrollArea_UI";
|
|
|
16138
16549
|
|
|
16139
16550
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
16140
16551
|
var import_react88 = require("react");
|
|
16141
|
-
var
|
|
16552
|
+
var import_styled_components108 = __toESM(require("styled-components"));
|
|
16142
16553
|
var import_react_toggle_group3 = require("@radix-ui/react-toggle-group");
|
|
16143
16554
|
var import_type_guards62 = require("@wistia/type-guards");
|
|
16144
16555
|
|
|
@@ -16176,7 +16587,7 @@ var useSelectedItemStyle = () => {
|
|
|
16176
16587
|
};
|
|
16177
16588
|
|
|
16178
16589
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
16179
|
-
var
|
|
16590
|
+
var import_styled_components107 = __toESM(require("styled-components"));
|
|
16180
16591
|
var import_type_guards61 = require("@wistia/type-guards");
|
|
16181
16592
|
|
|
16182
16593
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
@@ -16193,12 +16604,12 @@ var useSegmentedControlValue = () => {
|
|
|
16193
16604
|
|
|
16194
16605
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
16195
16606
|
var import_jsx_runtime304 = require("react/jsx-runtime");
|
|
16196
|
-
var selectedItemIndicatorStyles =
|
|
16607
|
+
var selectedItemIndicatorStyles = import_styled_components107.css`
|
|
16197
16608
|
background-color: var(--wui-color-bg-fill-white);
|
|
16198
16609
|
border-radius: var(--wui-border-radius-rounded);
|
|
16199
16610
|
box-shadow: var(--wui-elevation-01);
|
|
16200
16611
|
`;
|
|
16201
|
-
var SelectedItemIndicatorDiv =
|
|
16612
|
+
var SelectedItemIndicatorDiv = import_styled_components107.default.div`
|
|
16202
16613
|
${selectedItemIndicatorStyles}
|
|
16203
16614
|
left: 0;
|
|
16204
16615
|
position: absolute;
|
|
@@ -16225,7 +16636,7 @@ var SelectedItemIndicator = () => {
|
|
|
16225
16636
|
|
|
16226
16637
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
16227
16638
|
var import_jsx_runtime305 = require("react/jsx-runtime");
|
|
16228
|
-
var segmentedControlStyles =
|
|
16639
|
+
var segmentedControlStyles = import_styled_components108.css`
|
|
16229
16640
|
display: inline-flex;
|
|
16230
16641
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
16231
16642
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -16236,7 +16647,7 @@ var segmentedControlStyles = import_styled_components107.css`
|
|
|
16236
16647
|
position: relative;
|
|
16237
16648
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
16238
16649
|
`;
|
|
16239
|
-
var StyledSegmentedControl = (0,
|
|
16650
|
+
var StyledSegmentedControl = (0, import_styled_components108.default)(import_react_toggle_group3.Root)`
|
|
16240
16651
|
${segmentedControlStyles}
|
|
16241
16652
|
`;
|
|
16242
16653
|
var SegmentedControl = (0, import_react88.forwardRef)(
|
|
@@ -16275,11 +16686,11 @@ SegmentedControl.displayName = "SegmentedControl_UI";
|
|
|
16275
16686
|
|
|
16276
16687
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
16277
16688
|
var import_react89 = require("react");
|
|
16278
|
-
var
|
|
16689
|
+
var import_styled_components109 = __toESM(require("styled-components"));
|
|
16279
16690
|
var import_react_toggle_group4 = require("@radix-ui/react-toggle-group");
|
|
16280
16691
|
var import_type_guards63 = require("@wistia/type-guards");
|
|
16281
16692
|
var import_jsx_runtime306 = require("react/jsx-runtime");
|
|
16282
|
-
var segmentedControlItemStyles =
|
|
16693
|
+
var segmentedControlItemStyles = import_styled_components109.css`
|
|
16283
16694
|
all: unset; /* ToggleGroupItem is a button element */
|
|
16284
16695
|
align-items: center;
|
|
16285
16696
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -16347,7 +16758,7 @@ var segmentedControlItemStyles = import_styled_components108.css`
|
|
|
16347
16758
|
}
|
|
16348
16759
|
}
|
|
16349
16760
|
`;
|
|
16350
|
-
var StyledSegmentedControlItem = (0,
|
|
16761
|
+
var StyledSegmentedControlItem = (0, import_styled_components109.default)(import_react_toggle_group4.Item)`
|
|
16351
16762
|
${segmentedControlItemStyles}
|
|
16352
16763
|
`;
|
|
16353
16764
|
var SegmentedControlItem = (0, import_react89.forwardRef)(
|
|
@@ -16411,9 +16822,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem_UI";
|
|
|
16411
16822
|
// src/components/Select/Select.tsx
|
|
16412
16823
|
var import_react_select = require("@radix-ui/react-select");
|
|
16413
16824
|
var import_react90 = require("react");
|
|
16414
|
-
var
|
|
16825
|
+
var import_styled_components110 = __toESM(require("styled-components"));
|
|
16415
16826
|
var import_jsx_runtime307 = require("react/jsx-runtime");
|
|
16416
|
-
var StyledTrigger2 = (0,
|
|
16827
|
+
var StyledTrigger2 = (0, import_styled_components110.default)(import_react_select.Trigger)`
|
|
16417
16828
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
16418
16829
|
${inputCss};
|
|
16419
16830
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -16458,7 +16869,7 @@ var StyledTrigger2 = (0, import_styled_components109.default)(import_react_selec
|
|
|
16458
16869
|
color: var(--wui-input-placeholder);
|
|
16459
16870
|
}
|
|
16460
16871
|
`;
|
|
16461
|
-
var StyledContent3 = (0,
|
|
16872
|
+
var StyledContent3 = (0, import_styled_components110.default)(import_react_select.Content)`
|
|
16462
16873
|
--wui-select-content-border: var(--wui-color-border);
|
|
16463
16874
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
16464
16875
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -16532,10 +16943,10 @@ Select.displayName = "Select_UI";
|
|
|
16532
16943
|
// src/components/Select/SelectOption.tsx
|
|
16533
16944
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
16534
16945
|
var import_react91 = require("react");
|
|
16535
|
-
var
|
|
16946
|
+
var import_styled_components111 = __toESM(require("styled-components"));
|
|
16536
16947
|
var import_type_guards64 = require("@wistia/type-guards");
|
|
16537
16948
|
var import_jsx_runtime308 = require("react/jsx-runtime");
|
|
16538
|
-
var StyledItem = (0,
|
|
16949
|
+
var StyledItem = (0, import_styled_components111.default)(import_react_select2.Item)`
|
|
16539
16950
|
${getTypographicStyles("label3")}
|
|
16540
16951
|
display: flex;
|
|
16541
16952
|
padding: var(--wui-select-option-padding);
|
|
@@ -16587,9 +16998,9 @@ SelectOption.displayName = "SelectOption_UI";
|
|
|
16587
16998
|
|
|
16588
16999
|
// src/components/Select/SelectOptionGroup.tsx
|
|
16589
17000
|
var import_react_select3 = require("@radix-ui/react-select");
|
|
16590
|
-
var
|
|
17001
|
+
var import_styled_components112 = __toESM(require("styled-components"));
|
|
16591
17002
|
var import_jsx_runtime309 = require("react/jsx-runtime");
|
|
16592
|
-
var StyledLabel4 = (0,
|
|
17003
|
+
var StyledLabel4 = (0, import_styled_components112.default)(import_react_select3.Label)`
|
|
16593
17004
|
padding: var(--wui-select-option-padding);
|
|
16594
17005
|
`;
|
|
16595
17006
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
@@ -16608,10 +17019,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
16608
17019
|
|
|
16609
17020
|
// src/components/Slider/Slider.tsx
|
|
16610
17021
|
var import_react_slider2 = require("@radix-ui/react-slider");
|
|
16611
|
-
var
|
|
17022
|
+
var import_styled_components113 = __toESM(require("styled-components"));
|
|
16612
17023
|
var import_type_guards65 = require("@wistia/type-guards");
|
|
16613
17024
|
var import_jsx_runtime310 = require("react/jsx-runtime");
|
|
16614
|
-
var SliderContainer =
|
|
17025
|
+
var SliderContainer = import_styled_components113.default.div`
|
|
16615
17026
|
--wui-slider-track-color: var(--wui-gray-6);
|
|
16616
17027
|
--wui-slider-track-border-radius: var(--wui-border-radius-rounded);
|
|
16617
17028
|
--wui-slider-range-color: var(--wui-color-bg-fill);
|
|
@@ -16627,7 +17038,7 @@ var SliderContainer = import_styled_components112.default.div`
|
|
|
16627
17038
|
pointer-events: none;
|
|
16628
17039
|
}
|
|
16629
17040
|
`;
|
|
16630
|
-
var StyledSliderRoot = (0,
|
|
17041
|
+
var StyledSliderRoot = (0, import_styled_components113.default)(import_react_slider2.Root)`
|
|
16631
17042
|
position: relative;
|
|
16632
17043
|
display: flex;
|
|
16633
17044
|
align-items: center;
|
|
@@ -16635,20 +17046,20 @@ var StyledSliderRoot = (0, import_styled_components112.default)(import_react_sli
|
|
|
16635
17046
|
touch-action: none;
|
|
16636
17047
|
width: 100%;
|
|
16637
17048
|
`;
|
|
16638
|
-
var StyledSliderTrack = (0,
|
|
17049
|
+
var StyledSliderTrack = (0, import_styled_components113.default)(import_react_slider2.Track)`
|
|
16639
17050
|
background-color: var(--wui-slider-track-color);
|
|
16640
17051
|
border-radius: var(--wui-slider-track-border-radius);
|
|
16641
17052
|
flex-grow: 1;
|
|
16642
17053
|
height: 6px;
|
|
16643
17054
|
position: relative;
|
|
16644
17055
|
`;
|
|
16645
|
-
var StyledSliderRange = (0,
|
|
17056
|
+
var StyledSliderRange = (0, import_styled_components113.default)(import_react_slider2.Range)`
|
|
16646
17057
|
background-color: var(--wui-slider-range-color);
|
|
16647
17058
|
border-radius: var(--wui-slider-track-border-radius);
|
|
16648
17059
|
height: 100%;
|
|
16649
17060
|
position: absolute;
|
|
16650
17061
|
`;
|
|
16651
|
-
var StyledSliderThumb = (0,
|
|
17062
|
+
var StyledSliderThumb = (0, import_styled_components113.default)(import_react_slider2.Thumb)`
|
|
16652
17063
|
background-color: var(--wui-slider-thumb-color);
|
|
16653
17064
|
border-radius: var(--wui-border-radius-rounded);
|
|
16654
17065
|
cursor: grab;
|
|
@@ -16734,25 +17145,25 @@ var Slider = ({
|
|
|
16734
17145
|
Slider.displayName = "Slider_UI";
|
|
16735
17146
|
|
|
16736
17147
|
// src/components/Table/Table.tsx
|
|
16737
|
-
var
|
|
17148
|
+
var import_styled_components114 = __toESM(require("styled-components"));
|
|
16738
17149
|
var import_jsx_runtime311 = require("react/jsx-runtime");
|
|
16739
|
-
var StyledTable =
|
|
17150
|
+
var StyledTable = import_styled_components114.default.table`
|
|
16740
17151
|
width: 100%;
|
|
16741
17152
|
border-collapse: collapse;
|
|
16742
17153
|
|
|
16743
|
-
${({ $divided }) => $divided &&
|
|
17154
|
+
${({ $divided }) => $divided && import_styled_components114.css`
|
|
16744
17155
|
tr {
|
|
16745
17156
|
border-bottom: 1px solid var(--wui-color-border);
|
|
16746
17157
|
}
|
|
16747
17158
|
`}
|
|
16748
17159
|
|
|
16749
|
-
${({ $striped }) => $striped &&
|
|
17160
|
+
${({ $striped }) => $striped && import_styled_components114.css`
|
|
16750
17161
|
tbody tr:nth-child(even) {
|
|
16751
17162
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
16752
17163
|
}
|
|
16753
17164
|
`}
|
|
16754
17165
|
|
|
16755
|
-
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader &&
|
|
17166
|
+
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && import_styled_components114.css`
|
|
16756
17167
|
thead {
|
|
16757
17168
|
${visuallyHiddenStyle}
|
|
16758
17169
|
}
|
|
@@ -16779,7 +17190,7 @@ var Table = ({
|
|
|
16779
17190
|
|
|
16780
17191
|
// src/components/Table/TableBody.tsx
|
|
16781
17192
|
var import_react93 = require("react");
|
|
16782
|
-
var
|
|
17193
|
+
var import_styled_components115 = __toESM(require("styled-components"));
|
|
16783
17194
|
|
|
16784
17195
|
// src/components/Table/TableSectionContext.ts
|
|
16785
17196
|
var import_react92 = require("react");
|
|
@@ -16787,27 +17198,27 @@ var TableSectionContext = (0, import_react92.createContext)(null);
|
|
|
16787
17198
|
|
|
16788
17199
|
// src/components/Table/TableBody.tsx
|
|
16789
17200
|
var import_jsx_runtime312 = require("react/jsx-runtime");
|
|
16790
|
-
var StyledTableBody =
|
|
17201
|
+
var StyledTableBody = import_styled_components115.default.tbody``;
|
|
16791
17202
|
var TableBody = ({ children, ...props }) => {
|
|
16792
17203
|
return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(StyledTableBody, { ...props, children }) });
|
|
16793
17204
|
};
|
|
16794
17205
|
|
|
16795
17206
|
// src/components/Table/TableCell.tsx
|
|
16796
17207
|
var import_react94 = require("react");
|
|
16797
|
-
var
|
|
17208
|
+
var import_styled_components116 = __toESM(require("styled-components"));
|
|
16798
17209
|
var import_jsx_runtime313 = require("react/jsx-runtime");
|
|
16799
|
-
var sharedStyles =
|
|
17210
|
+
var sharedStyles = import_styled_components116.css`
|
|
16800
17211
|
color: var(--wui-color-text);
|
|
16801
17212
|
padding: var(--wui-space-02);
|
|
16802
17213
|
text-align: left;
|
|
16803
17214
|
`;
|
|
16804
|
-
var StyledTh =
|
|
17215
|
+
var StyledTh = import_styled_components116.default.th`
|
|
16805
17216
|
${sharedStyles}
|
|
16806
17217
|
font-size: var(--wui-typography-body-4-size);
|
|
16807
17218
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
16808
17219
|
line-height: var(--wui-typography-body-4-line-height);
|
|
16809
17220
|
`;
|
|
16810
|
-
var StyledTd =
|
|
17221
|
+
var StyledTd = import_styled_components116.default.td`
|
|
16811
17222
|
${sharedStyles}
|
|
16812
17223
|
font-size: var(--wui-typography-body-2-size);
|
|
16813
17224
|
font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -16823,26 +17234,26 @@ var TableCell = ({ children, ...props }) => {
|
|
|
16823
17234
|
|
|
16824
17235
|
// src/components/Table/TableFoot.tsx
|
|
16825
17236
|
var import_react95 = require("react");
|
|
16826
|
-
var
|
|
17237
|
+
var import_styled_components117 = __toESM(require("styled-components"));
|
|
16827
17238
|
var import_jsx_runtime314 = require("react/jsx-runtime");
|
|
16828
|
-
var StyledTableFoot =
|
|
17239
|
+
var StyledTableFoot = import_styled_components117.default.tfoot``;
|
|
16829
17240
|
var TableFoot = ({ children, ...props }) => {
|
|
16830
17241
|
return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(StyledTableFoot, { ...props, children }) });
|
|
16831
17242
|
};
|
|
16832
17243
|
|
|
16833
17244
|
// src/components/Table/TableHead.tsx
|
|
16834
17245
|
var import_react96 = require("react");
|
|
16835
|
-
var
|
|
17246
|
+
var import_styled_components118 = __toESM(require("styled-components"));
|
|
16836
17247
|
var import_jsx_runtime315 = require("react/jsx-runtime");
|
|
16837
|
-
var StyledThead =
|
|
17248
|
+
var StyledThead = import_styled_components118.default.thead``;
|
|
16838
17249
|
var TableHead = ({ children, ...props }) => {
|
|
16839
17250
|
return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(StyledThead, { ...props, children }) });
|
|
16840
17251
|
};
|
|
16841
17252
|
|
|
16842
17253
|
// src/components/Table/TableRow.tsx
|
|
16843
|
-
var
|
|
17254
|
+
var import_styled_components119 = __toESM(require("styled-components"));
|
|
16844
17255
|
var import_jsx_runtime316 = require("react/jsx-runtime");
|
|
16845
|
-
var StyledTableRow =
|
|
17256
|
+
var StyledTableRow = import_styled_components119.default.tr``;
|
|
16846
17257
|
var TableRow = ({ children, ...props }) => {
|
|
16847
17258
|
return /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(StyledTableRow, { ...props, children });
|
|
16848
17259
|
};
|
|
@@ -16907,14 +17318,14 @@ TabsContent.displayName = "TabsContent_UI";
|
|
|
16907
17318
|
|
|
16908
17319
|
// src/components/Tabs/TabsList.tsx
|
|
16909
17320
|
var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
16910
|
-
var
|
|
17321
|
+
var import_styled_components121 = __toESM(require("styled-components"));
|
|
16911
17322
|
|
|
16912
17323
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
16913
17324
|
var import_type_guards67 = require("@wistia/type-guards");
|
|
16914
17325
|
|
|
16915
17326
|
// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
|
|
16916
|
-
var
|
|
16917
|
-
var TabsSelectedItemIndicatorDiv = (0,
|
|
17327
|
+
var import_styled_components120 = __toESM(require("styled-components"));
|
|
17328
|
+
var TabsSelectedItemIndicatorDiv = (0, import_styled_components120.default)(SelectedItemIndicatorDiv)`
|
|
16918
17329
|
&:has(~ button[role='tab']:focus-visible) {
|
|
16919
17330
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
16920
17331
|
}
|
|
@@ -16939,7 +17350,7 @@ var SelectedTabIndicator = () => {
|
|
|
16939
17350
|
|
|
16940
17351
|
// src/components/Tabs/TabsList.tsx
|
|
16941
17352
|
var import_jsx_runtime320 = require("react/jsx-runtime");
|
|
16942
|
-
var StyledRadixTabsList = (0,
|
|
17353
|
+
var StyledRadixTabsList = (0, import_styled_components121.default)(import_react_tabs3.List)`
|
|
16943
17354
|
${segmentedControlStyles}
|
|
16944
17355
|
`;
|
|
16945
17356
|
var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
@@ -16962,9 +17373,9 @@ var import_react99 = require("react");
|
|
|
16962
17373
|
var import_type_guards68 = require("@wistia/type-guards");
|
|
16963
17374
|
|
|
16964
17375
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
16965
|
-
var
|
|
17376
|
+
var import_styled_components122 = __toESM(require("styled-components"));
|
|
16966
17377
|
var import_react_tabs4 = require("@radix-ui/react-tabs");
|
|
16967
|
-
var StyledRadixTabsTrigger = (0,
|
|
17378
|
+
var StyledRadixTabsTrigger = (0, import_styled_components122.default)(import_react_tabs4.Trigger)`
|
|
16968
17379
|
${segmentedControlItemStyles}
|
|
16969
17380
|
|
|
16970
17381
|
&:focus-visible {
|
|
@@ -17025,10 +17436,10 @@ var TabsTrigger = (0, import_react99.forwardRef)(
|
|
|
17025
17436
|
TabsTrigger.displayName = "TabsTrigger_UI";
|
|
17026
17437
|
|
|
17027
17438
|
// src/components/Thumbnail/ThumbnailBadge.tsx
|
|
17028
|
-
var
|
|
17439
|
+
var import_styled_components123 = __toESM(require("styled-components"));
|
|
17029
17440
|
var import_type_guards69 = require("@wistia/type-guards");
|
|
17030
17441
|
var import_jsx_runtime322 = require("react/jsx-runtime");
|
|
17031
|
-
var StyledThumbnailBadge =
|
|
17442
|
+
var StyledThumbnailBadge = import_styled_components123.default.div`
|
|
17032
17443
|
align-items: center;
|
|
17033
17444
|
background-color: rgb(0 0 0 / 50%);
|
|
17034
17445
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -17063,14 +17474,14 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
|
|
|
17063
17474
|
|
|
17064
17475
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
17065
17476
|
var import_react100 = require("react");
|
|
17066
|
-
var
|
|
17477
|
+
var import_styled_components126 = __toESM(require("styled-components"));
|
|
17067
17478
|
var import_type_guards72 = require("@wistia/type-guards");
|
|
17068
17479
|
|
|
17069
17480
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
17070
17481
|
var import_type_guards70 = require("@wistia/type-guards");
|
|
17071
|
-
var
|
|
17482
|
+
var import_styled_components124 = require("styled-components");
|
|
17072
17483
|
var gradients = {
|
|
17073
|
-
defaultDarkOne:
|
|
17484
|
+
defaultDarkOne: import_styled_components124.css`
|
|
17074
17485
|
background-color: #222d66;
|
|
17075
17486
|
background-image:
|
|
17076
17487
|
radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
|
|
@@ -17078,7 +17489,7 @@ var gradients = {
|
|
|
17078
17489
|
radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
|
|
17079
17490
|
radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
|
|
17080
17491
|
`,
|
|
17081
|
-
defaultDarkTwo:
|
|
17492
|
+
defaultDarkTwo: import_styled_components124.css`
|
|
17082
17493
|
background-color: #222d66;
|
|
17083
17494
|
background-image:
|
|
17084
17495
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
|
|
@@ -17086,7 +17497,7 @@ var gradients = {
|
|
|
17086
17497
|
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
17087
17498
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
17088
17499
|
`,
|
|
17089
|
-
defaultLightOne:
|
|
17500
|
+
defaultLightOne: import_styled_components124.css`
|
|
17090
17501
|
background-color: #ccd5ff;
|
|
17091
17502
|
background-image:
|
|
17092
17503
|
radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
|
|
@@ -17094,13 +17505,13 @@ var gradients = {
|
|
|
17094
17505
|
radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
|
|
17095
17506
|
radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
|
|
17096
17507
|
`,
|
|
17097
|
-
defaultLightTwo:
|
|
17508
|
+
defaultLightTwo: import_styled_components124.css`
|
|
17098
17509
|
background-color: #ccd5ff;
|
|
17099
17510
|
background-image:
|
|
17100
17511
|
radial-gradient(ellipse at top, #ccd5ff, transparent),
|
|
17101
17512
|
radial-gradient(ellipse at bottom, #6b84ff, transparent);
|
|
17102
17513
|
`,
|
|
17103
|
-
defaultMidOne:
|
|
17514
|
+
defaultMidOne: import_styled_components124.css`
|
|
17104
17515
|
background-color: #6b84ff;
|
|
17105
17516
|
background-image:
|
|
17106
17517
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
|
|
@@ -17108,13 +17519,13 @@ var gradients = {
|
|
|
17108
17519
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
|
|
17109
17520
|
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
|
|
17110
17521
|
`,
|
|
17111
|
-
defaultMidTwo:
|
|
17522
|
+
defaultMidTwo: import_styled_components124.css`
|
|
17112
17523
|
background-color: #6b84ff;
|
|
17113
17524
|
background-image:
|
|
17114
17525
|
radial-gradient(ellipse at top, #2949e5, transparent),
|
|
17115
17526
|
radial-gradient(ellipse at bottom, #ccd5ff, transparent);
|
|
17116
17527
|
`,
|
|
17117
|
-
green:
|
|
17528
|
+
green: import_styled_components124.css`
|
|
17118
17529
|
background-color: #fafffa;
|
|
17119
17530
|
background-image:
|
|
17120
17531
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -17122,7 +17533,7 @@ var gradients = {
|
|
|
17122
17533
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
17123
17534
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
17124
17535
|
`,
|
|
17125
|
-
greenWithPop:
|
|
17536
|
+
greenWithPop: import_styled_components124.css`
|
|
17126
17537
|
background-color: #fafffa;
|
|
17127
17538
|
background-image:
|
|
17128
17539
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -17130,7 +17541,7 @@ var gradients = {
|
|
|
17130
17541
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
17131
17542
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
17132
17543
|
`,
|
|
17133
|
-
pink:
|
|
17544
|
+
pink: import_styled_components124.css`
|
|
17134
17545
|
background-color: #fffff0;
|
|
17135
17546
|
background-image:
|
|
17136
17547
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
|
|
@@ -17138,7 +17549,7 @@ var gradients = {
|
|
|
17138
17549
|
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
17139
17550
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
|
|
17140
17551
|
`,
|
|
17141
|
-
pinkWithPop:
|
|
17552
|
+
pinkWithPop: import_styled_components124.css`
|
|
17142
17553
|
background-color: #fffff0;
|
|
17143
17554
|
background-image:
|
|
17144
17555
|
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
@@ -17146,7 +17557,7 @@ var gradients = {
|
|
|
17146
17557
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
|
|
17147
17558
|
radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
|
|
17148
17559
|
`,
|
|
17149
|
-
playfulGradientOne:
|
|
17560
|
+
playfulGradientOne: import_styled_components124.css`
|
|
17150
17561
|
background-color: #f7f8ff;
|
|
17151
17562
|
background-image:
|
|
17152
17563
|
radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
|
|
@@ -17154,7 +17565,7 @@ var gradients = {
|
|
|
17154
17565
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
|
|
17155
17566
|
radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
|
|
17156
17567
|
`,
|
|
17157
|
-
playfulGradientTwo:
|
|
17568
|
+
playfulGradientTwo: import_styled_components124.css`
|
|
17158
17569
|
background-color: #f7f8ff;
|
|
17159
17570
|
background-image:
|
|
17160
17571
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
|
|
@@ -17162,13 +17573,13 @@ var gradients = {
|
|
|
17162
17573
|
radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
|
|
17163
17574
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
17164
17575
|
`,
|
|
17165
|
-
purple:
|
|
17576
|
+
purple: import_styled_components124.css`
|
|
17166
17577
|
background-color: #f2caff;
|
|
17167
17578
|
background-image:
|
|
17168
17579
|
radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
|
|
17169
17580
|
radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
|
|
17170
17581
|
`,
|
|
17171
|
-
purpleWithPop:
|
|
17582
|
+
purpleWithPop: import_styled_components124.css`
|
|
17172
17583
|
background-color: #f2caff;
|
|
17173
17584
|
background-image:
|
|
17174
17585
|
radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
|
|
@@ -17176,7 +17587,7 @@ var gradients = {
|
|
|
17176
17587
|
radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
|
|
17177
17588
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
17178
17589
|
`,
|
|
17179
|
-
yellow:
|
|
17590
|
+
yellow: import_styled_components124.css`
|
|
17180
17591
|
background-color: #fffff0;
|
|
17181
17592
|
background-image:
|
|
17182
17593
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -17184,7 +17595,7 @@ var gradients = {
|
|
|
17184
17595
|
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
17185
17596
|
radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
|
|
17186
17597
|
`,
|
|
17187
|
-
yellowWithPop:
|
|
17598
|
+
yellowWithPop: import_styled_components124.css`
|
|
17188
17599
|
background-color: #fffff0;
|
|
17189
17600
|
background-image:
|
|
17190
17601
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -17199,10 +17610,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
|
|
|
17199
17610
|
};
|
|
17200
17611
|
|
|
17201
17612
|
// src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
|
|
17202
|
-
var
|
|
17613
|
+
var import_styled_components125 = __toESM(require("styled-components"));
|
|
17203
17614
|
var import_type_guards71 = require("@wistia/type-guards");
|
|
17204
17615
|
var import_jsx_runtime323 = require("react/jsx-runtime");
|
|
17205
|
-
var ScrubLine =
|
|
17616
|
+
var ScrubLine = import_styled_components125.default.div`
|
|
17206
17617
|
position: absolute;
|
|
17207
17618
|
top: 0;
|
|
17208
17619
|
height: 100%;
|
|
@@ -17335,12 +17746,12 @@ var ThumbnailStoryboardViewer = ({
|
|
|
17335
17746
|
|
|
17336
17747
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
17337
17748
|
var import_jsx_runtime324 = require("react/jsx-runtime");
|
|
17338
|
-
var WideThumbnailImage =
|
|
17749
|
+
var WideThumbnailImage = import_styled_components126.default.img`
|
|
17339
17750
|
height: 100%;
|
|
17340
17751
|
object-fit: cover;
|
|
17341
17752
|
width: 100%;
|
|
17342
17753
|
`;
|
|
17343
|
-
var SquareThumbnailImage =
|
|
17754
|
+
var SquareThumbnailImage = import_styled_components126.default.img`
|
|
17344
17755
|
backdrop-filter: blur(8px);
|
|
17345
17756
|
object-fit: contain;
|
|
17346
17757
|
width: 100%;
|
|
@@ -17365,7 +17776,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
17365
17776
|
}
|
|
17366
17777
|
);
|
|
17367
17778
|
};
|
|
17368
|
-
var StyledThumbnail =
|
|
17779
|
+
var StyledThumbnail = import_styled_components126.default.div`
|
|
17369
17780
|
background-image: ${({ $backgroundUrl }) => (0, import_type_guards72.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
|
|
17370
17781
|
${({ $backgroundUrl, $gradientBackground }) => (
|
|
17371
17782
|
// if we don't have $backgroundUrl show a gradient
|
|
@@ -17514,13 +17925,13 @@ Thumbnail.displayName = "Thumbnail_UI";
|
|
|
17514
17925
|
|
|
17515
17926
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
17516
17927
|
var import_react101 = __toESM(require("react"));
|
|
17517
|
-
var
|
|
17928
|
+
var import_styled_components127 = __toESM(require("styled-components"));
|
|
17518
17929
|
var import_type_guards73 = require("@wistia/type-guards");
|
|
17519
17930
|
var import_jsx_runtime325 = (
|
|
17520
17931
|
// ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
|
|
17521
17932
|
require("react/jsx-runtime")
|
|
17522
17933
|
);
|
|
17523
|
-
var StyledThumbnailCollage =
|
|
17934
|
+
var StyledThumbnailCollage = import_styled_components127.default.div`
|
|
17524
17935
|
display: grid;
|
|
17525
17936
|
gap: var(--wui-space-01);
|
|
17526
17937
|
width: 100%;
|
|
@@ -17622,7 +18033,7 @@ var ThumbnailCollage = ({
|
|
|
17622
18033
|
};
|
|
17623
18034
|
|
|
17624
18035
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
17625
|
-
var
|
|
18036
|
+
var import_styled_components128 = __toESM(require("styled-components"));
|
|
17626
18037
|
var import_type_guards74 = require("@wistia/type-guards");
|
|
17627
18038
|
var import_jsx_runtime326 = require("react/jsx-runtime");
|
|
17628
18039
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
@@ -17664,7 +18075,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
17664
18075
|
}
|
|
17665
18076
|
return "0 0 144 31.47";
|
|
17666
18077
|
};
|
|
17667
|
-
var WistiaLogoComponent =
|
|
18078
|
+
var WistiaLogoComponent = import_styled_components128.default.svg`
|
|
17668
18079
|
height: ${({ height }) => `${height}px`};
|
|
17669
18080
|
|
|
17670
18081
|
/* ensure it will always fit on mobile */
|
|
@@ -17680,12 +18091,12 @@ var WistiaLogoComponent = import_styled_components127.default.svg`
|
|
|
17680
18091
|
${({ $opticallyCentered, $iconOnly }) => {
|
|
17681
18092
|
if ($opticallyCentered) {
|
|
17682
18093
|
if ($iconOnly) {
|
|
17683
|
-
return
|
|
18094
|
+
return import_styled_components128.css`
|
|
17684
18095
|
aspect-ratio: 1;
|
|
17685
18096
|
padding: 11.85% 3.12% 13.91%;
|
|
17686
18097
|
`;
|
|
17687
18098
|
}
|
|
17688
|
-
return
|
|
18099
|
+
return import_styled_components128.css`
|
|
17689
18100
|
aspect-ratio: 127 / 32;
|
|
17690
18101
|
`;
|
|
17691
18102
|
}
|
|
@@ -17747,10 +18158,10 @@ var WistiaLogo = ({
|
|
|
17747
18158
|
WistiaLogo.displayName = "WistiaLogo_UI";
|
|
17748
18159
|
|
|
17749
18160
|
// src/components/SplitButton/SplitButton.tsx
|
|
17750
|
-
var
|
|
18161
|
+
var import_styled_components129 = __toESM(require("styled-components"));
|
|
17751
18162
|
var import_type_guards75 = require("@wistia/type-guards");
|
|
17752
18163
|
var import_jsx_runtime327 = require("react/jsx-runtime");
|
|
17753
|
-
var StyledSplitButton =
|
|
18164
|
+
var StyledSplitButton = import_styled_components129.default.span`
|
|
17754
18165
|
white-space: nowrap;
|
|
17755
18166
|
|
|
17756
18167
|
> [data-wui-button='true']:first-child {
|