@wistia/ui 0.14.35 → 0.14.36-beta.1401cf37.9dbd450
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 +1057 -647
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +142 -137
- package/dist/index.d.ts +142 -137
- package/dist/index.mjs +778 -368
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.14.
|
|
3
|
+
* @license @wistia/ui v0.14.36-beta.1401cf37.9dbd450
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -199,7 +199,7 @@ var import_react_tooltip = require("@radix-ui/react-tooltip");
|
|
|
199
199
|
var import_react3 = require("react");
|
|
200
200
|
|
|
201
201
|
// src/css/GlobalStyle.tsx
|
|
202
|
-
var
|
|
202
|
+
var import_styled_components13 = require("styled-components");
|
|
203
203
|
|
|
204
204
|
// src/css/globalStyleAdjustmentsCss.tsx
|
|
205
205
|
var import_styled_components = require("styled-components");
|
|
@@ -336,7 +336,7 @@ var globalStyleAdjustmentsCss = import_styled_components.css`
|
|
|
336
336
|
`;
|
|
337
337
|
|
|
338
338
|
// src/css/designTokens/index.tsx
|
|
339
|
-
var
|
|
339
|
+
var import_styled_components11 = require("styled-components");
|
|
340
340
|
|
|
341
341
|
// src/css/designTokens/colorGlobal.tsx
|
|
342
342
|
var import_styled_components2 = require("styled-components");
|
|
@@ -1004,38 +1004,535 @@ var darkGlobalTokens = import_styled_components2.css`
|
|
|
1004
1004
|
`;
|
|
1005
1005
|
|
|
1006
1006
|
// src/css/designTokens/colorAlias.tsx
|
|
1007
|
+
var import_styled_components4 = require("styled-components");
|
|
1008
|
+
|
|
1009
|
+
// src/css/designTokens/colorSchemes.tsx
|
|
1007
1010
|
var import_styled_components3 = require("styled-components");
|
|
1008
|
-
var
|
|
1009
|
-
--wui-color-
|
|
1011
|
+
var defaultColorScheme = import_styled_components3.css`
|
|
1012
|
+
--wui-color-base-1: var(--wui-gray-1);
|
|
1013
|
+
--wui-color-base-2: var(--wui-gray-2);
|
|
1014
|
+
--wui-color-base-3: var(--wui-gray-3);
|
|
1015
|
+
--wui-color-base-4: var(--wui-gray-4);
|
|
1016
|
+
--wui-color-base-5: var(--wui-gray-5);
|
|
1017
|
+
--wui-color-base-6: var(--wui-gray-6);
|
|
1018
|
+
--wui-color-base-7: var(--wui-gray-7);
|
|
1019
|
+
--wui-color-base-8: var(--wui-gray-8);
|
|
1020
|
+
--wui-color-base-9: var(--wui-gray-9);
|
|
1021
|
+
--wui-color-base-10: var(--wui-gray-10);
|
|
1022
|
+
--wui-color-base-11: var(--wui-gray-11);
|
|
1023
|
+
--wui-color-base-12: var(--wui-gray-12);
|
|
1024
|
+
--wui-color-base-contrast: var(--wui-gray-contrast);
|
|
1025
|
+
--wui-color-accent-1: var(--wui-blue-1);
|
|
1026
|
+
--wui-color-accent-2: var(--wui-blue-2);
|
|
1027
|
+
--wui-color-accent-3: var(--wui-blue-3);
|
|
1028
|
+
--wui-color-accent-4: var(--wui-blue-4);
|
|
1029
|
+
--wui-color-accent-5: var(--wui-blue-5);
|
|
1030
|
+
--wui-color-accent-6: var(--wui-blue-6);
|
|
1031
|
+
--wui-color-accent-7: var(--wui-blue-7);
|
|
1032
|
+
--wui-color-accent-8: var(--wui-blue-8);
|
|
1033
|
+
--wui-color-accent-9: var(--wui-blue-9);
|
|
1034
|
+
--wui-color-accent-10: var(--wui-blue-10);
|
|
1035
|
+
--wui-color-accent-11: var(--wui-blue-11);
|
|
1036
|
+
--wui-color-accent-12: var(--wui-blue-12);
|
|
1037
|
+
--wui-color-accent-contrast: var(--wui-blue-contrast);
|
|
1038
|
+
--wui-color-surface-token: var(--wui-gray-1);
|
|
1039
|
+
--wui-color-text-button-token: var(--wui-gray-12);
|
|
1040
|
+
`;
|
|
1041
|
+
var blueColorScheme = import_styled_components3.css`
|
|
1042
|
+
--wui-color-base-1: var(--wui-blue-1);
|
|
1043
|
+
--wui-color-base-2: var(--wui-blue-2);
|
|
1044
|
+
--wui-color-base-3: var(--wui-blue-3);
|
|
1045
|
+
--wui-color-base-4: var(--wui-blue-4);
|
|
1046
|
+
--wui-color-base-5: var(--wui-blue-5);
|
|
1047
|
+
--wui-color-base-6: var(--wui-blue-6);
|
|
1048
|
+
--wui-color-base-7: var(--wui-blue-7);
|
|
1049
|
+
--wui-color-base-8: var(--wui-blue-8);
|
|
1050
|
+
--wui-color-base-9: var(--wui-blue-9);
|
|
1051
|
+
--wui-color-base-10: var(--wui-blue-10);
|
|
1052
|
+
--wui-color-base-11: var(--wui-blue-11);
|
|
1053
|
+
--wui-color-base-12: var(--wui-blue-12);
|
|
1054
|
+
--wui-color-base-contrast: var(--wui-blue-contrast);
|
|
1055
|
+
--wui-color-accent-1: var(--wui-blue-1);
|
|
1056
|
+
--wui-color-accent-2: var(--wui-blue-2);
|
|
1057
|
+
--wui-color-accent-3: var(--wui-blue-3);
|
|
1058
|
+
--wui-color-accent-4: var(--wui-blue-4);
|
|
1059
|
+
--wui-color-accent-5: var(--wui-blue-5);
|
|
1060
|
+
--wui-color-accent-6: var(--wui-blue-6);
|
|
1061
|
+
--wui-color-accent-7: var(--wui-blue-7);
|
|
1062
|
+
--wui-color-accent-8: var(--wui-blue-8);
|
|
1063
|
+
--wui-color-accent-9: var(--wui-blue-9);
|
|
1064
|
+
--wui-color-accent-10: var(--wui-blue-10);
|
|
1065
|
+
--wui-color-accent-11: var(--wui-blue-11);
|
|
1066
|
+
--wui-color-accent-12: var(--wui-blue-12);
|
|
1067
|
+
--wui-color-accent-contrast: var(--wui-blue-contrast);
|
|
1068
|
+
--wui-color-surface-token: var(--wui-blue-2);
|
|
1069
|
+
--wui-color-text-button-token: var(--wui-blue-12);
|
|
1070
|
+
`;
|
|
1071
|
+
var greenColorScheme = import_styled_components3.css`
|
|
1072
|
+
--wui-color-base-1: var(--wui-green-1);
|
|
1073
|
+
--wui-color-base-2: var(--wui-green-2);
|
|
1074
|
+
--wui-color-base-3: var(--wui-green-3);
|
|
1075
|
+
--wui-color-base-4: var(--wui-green-4);
|
|
1076
|
+
--wui-color-base-5: var(--wui-green-5);
|
|
1077
|
+
--wui-color-base-6: var(--wui-green-6);
|
|
1078
|
+
--wui-color-base-7: var(--wui-green-7);
|
|
1079
|
+
--wui-color-base-8: var(--wui-green-8);
|
|
1080
|
+
--wui-color-base-9: var(--wui-green-9);
|
|
1081
|
+
--wui-color-base-10: var(--wui-green-10);
|
|
1082
|
+
--wui-color-base-11: var(--wui-green-11);
|
|
1083
|
+
--wui-color-base-12: var(--wui-green-12);
|
|
1084
|
+
--wui-color-base-contrast: var(--wui-green-contrast);
|
|
1085
|
+
--wui-color-accent-1: var(--wui-green-1);
|
|
1086
|
+
--wui-color-accent-2: var(--wui-green-2);
|
|
1087
|
+
--wui-color-accent-3: var(--wui-green-3);
|
|
1088
|
+
--wui-color-accent-4: var(--wui-green-4);
|
|
1089
|
+
--wui-color-accent-5: var(--wui-green-5);
|
|
1090
|
+
--wui-color-accent-6: var(--wui-green-6);
|
|
1091
|
+
--wui-color-accent-7: var(--wui-green-7);
|
|
1092
|
+
--wui-color-accent-8: var(--wui-green-8);
|
|
1093
|
+
--wui-color-accent-9: var(--wui-green-9);
|
|
1094
|
+
--wui-color-accent-10: var(--wui-green-10);
|
|
1095
|
+
--wui-color-accent-11: var(--wui-green-11);
|
|
1096
|
+
--wui-color-accent-12: var(--wui-green-12);
|
|
1097
|
+
--wui-color-accent-contrast: var(--wui-green-contrast);
|
|
1098
|
+
--wui-color-surface-token: var(--wui-green-2);
|
|
1099
|
+
--wui-color-text-button-token: var(--wui-green-11);
|
|
1100
|
+
`;
|
|
1101
|
+
var orangeColorScheme = import_styled_components3.css`
|
|
1102
|
+
--wui-color-base-1: var(--wui-orange-1);
|
|
1103
|
+
--wui-color-base-2: var(--wui-orange-2);
|
|
1104
|
+
--wui-color-base-3: var(--wui-orange-3);
|
|
1105
|
+
--wui-color-base-4: var(--wui-orange-4);
|
|
1106
|
+
--wui-color-base-5: var(--wui-orange-5);
|
|
1107
|
+
--wui-color-base-6: var(--wui-orange-6);
|
|
1108
|
+
--wui-color-base-7: var(--wui-orange-7);
|
|
1109
|
+
--wui-color-base-8: var(--wui-orange-8);
|
|
1110
|
+
--wui-color-base-9: var(--wui-orange-9);
|
|
1111
|
+
--wui-color-base-10: var(--wui-orange-10);
|
|
1112
|
+
--wui-color-base-11: var(--wui-orange-11);
|
|
1113
|
+
--wui-color-base-12: var(--wui-orange-12);
|
|
1114
|
+
--wui-color-base-contrast: var(--wui-orange-contrast);
|
|
1115
|
+
--wui-color-accent-1: var(--wui-orange-1);
|
|
1116
|
+
--wui-color-accent-2: var(--wui-orange-2);
|
|
1117
|
+
--wui-color-accent-3: var(--wui-orange-3);
|
|
1118
|
+
--wui-color-accent-4: var(--wui-orange-4);
|
|
1119
|
+
--wui-color-accent-5: var(--wui-orange-5);
|
|
1120
|
+
--wui-color-accent-6: var(--wui-orange-6);
|
|
1121
|
+
--wui-color-accent-7: var(--wui-orange-7);
|
|
1122
|
+
--wui-color-accent-8: var(--wui-orange-8);
|
|
1123
|
+
--wui-color-accent-9: var(--wui-orange-9);
|
|
1124
|
+
--wui-color-accent-10: var(--wui-orange-10);
|
|
1125
|
+
--wui-color-accent-11: var(--wui-orange-11);
|
|
1126
|
+
--wui-color-accent-12: var(--wui-orange-12);
|
|
1127
|
+
--wui-color-accent-contrast: var(--wui-orange-contrast);
|
|
1128
|
+
--wui-color-surface-token: var(--wui-orange-2);
|
|
1129
|
+
--wui-color-text-button-token: var(--wui-orange-11);
|
|
1130
|
+
`;
|
|
1131
|
+
var pinkColorScheme = import_styled_components3.css`
|
|
1132
|
+
--wui-color-base-1: var(--wui-pink-1);
|
|
1133
|
+
--wui-color-base-2: var(--wui-pink-2);
|
|
1134
|
+
--wui-color-base-3: var(--wui-pink-3);
|
|
1135
|
+
--wui-color-base-4: var(--wui-pink-4);
|
|
1136
|
+
--wui-color-base-5: var(--wui-pink-5);
|
|
1137
|
+
--wui-color-base-6: var(--wui-pink-6);
|
|
1138
|
+
--wui-color-base-7: var(--wui-pink-7);
|
|
1139
|
+
--wui-color-base-8: var(--wui-pink-8);
|
|
1140
|
+
--wui-color-base-9: var(--wui-pink-9);
|
|
1141
|
+
--wui-color-base-10: var(--wui-pink-10);
|
|
1142
|
+
--wui-color-base-11: var(--wui-pink-11);
|
|
1143
|
+
--wui-color-base-12: var(--wui-pink-12);
|
|
1144
|
+
--wui-color-base-contrast: var(--wui-pink-contrast);
|
|
1145
|
+
--wui-color-accent-1: var(--wui-pink-1);
|
|
1146
|
+
--wui-color-accent-2: var(--wui-pink-2);
|
|
1147
|
+
--wui-color-accent-3: var(--wui-pink-3);
|
|
1148
|
+
--wui-color-accent-4: var(--wui-pink-4);
|
|
1149
|
+
--wui-color-accent-5: var(--wui-pink-5);
|
|
1150
|
+
--wui-color-accent-6: var(--wui-pink-6);
|
|
1151
|
+
--wui-color-accent-7: var(--wui-pink-7);
|
|
1152
|
+
--wui-color-accent-8: var(--wui-pink-8);
|
|
1153
|
+
--wui-color-accent-9: var(--wui-pink-9);
|
|
1154
|
+
--wui-color-accent-10: var(--wui-pink-10);
|
|
1155
|
+
--wui-color-accent-11: var(--wui-pink-11);
|
|
1156
|
+
--wui-color-accent-12: var(--wui-pink-12);
|
|
1157
|
+
--wui-color-accent-contrast: var(--wui-pink-contrast);
|
|
1158
|
+
--wui-color-surface-token: var(--wui-pink-2);
|
|
1159
|
+
--wui-color-text-button-token: var(--wui-pink-11);
|
|
1160
|
+
`;
|
|
1161
|
+
var purpleColorScheme = import_styled_components3.css`
|
|
1162
|
+
--wui-color-base-1: var(--wui-purple-1);
|
|
1163
|
+
--wui-color-base-2: var(--wui-purple-2);
|
|
1164
|
+
--wui-color-base-3: var(--wui-purple-3);
|
|
1165
|
+
--wui-color-base-4: var(--wui-purple-4);
|
|
1166
|
+
--wui-color-base-5: var(--wui-purple-5);
|
|
1167
|
+
--wui-color-base-6: var(--wui-purple-6);
|
|
1168
|
+
--wui-color-base-7: var(--wui-purple-7);
|
|
1169
|
+
--wui-color-base-8: var(--wui-purple-8);
|
|
1170
|
+
--wui-color-base-9: var(--wui-purple-9);
|
|
1171
|
+
--wui-color-base-10: var(--wui-purple-10);
|
|
1172
|
+
--wui-color-base-11: var(--wui-purple-11);
|
|
1173
|
+
--wui-color-base-12: var(--wui-purple-12);
|
|
1174
|
+
--wui-color-base-contrast: var(--wui-purple-contrast);
|
|
1175
|
+
--wui-color-accent-1: var(--wui-purple-1);
|
|
1176
|
+
--wui-color-accent-2: var(--wui-purple-2);
|
|
1177
|
+
--wui-color-accent-3: var(--wui-purple-3);
|
|
1178
|
+
--wui-color-accent-4: var(--wui-purple-4);
|
|
1179
|
+
--wui-color-accent-5: var(--wui-purple-5);
|
|
1180
|
+
--wui-color-accent-6: var(--wui-purple-6);
|
|
1181
|
+
--wui-color-accent-7: var(--wui-purple-7);
|
|
1182
|
+
--wui-color-accent-8: var(--wui-purple-8);
|
|
1183
|
+
--wui-color-accent-9: var(--wui-purple-9);
|
|
1184
|
+
--wui-color-accent-10: var(--wui-purple-10);
|
|
1185
|
+
--wui-color-accent-11: var(--wui-purple-11);
|
|
1186
|
+
--wui-color-accent-12: var(--wui-purple-12);
|
|
1187
|
+
--wui-color-accent-contrast: var(--wui-purple-contrast);
|
|
1188
|
+
--wui-color-surface-token: var(--wui-purple-2);
|
|
1189
|
+
--wui-color-text-button-token: var(--wui-purple-11);
|
|
1190
|
+
`;
|
|
1191
|
+
var redColorScheme = import_styled_components3.css`
|
|
1192
|
+
--wui-color-base-1: var(--wui-red-1);
|
|
1193
|
+
--wui-color-base-2: var(--wui-red-2);
|
|
1194
|
+
--wui-color-base-3: var(--wui-red-3);
|
|
1195
|
+
--wui-color-base-4: var(--wui-red-4);
|
|
1196
|
+
--wui-color-base-5: var(--wui-red-5);
|
|
1197
|
+
--wui-color-base-6: var(--wui-red-6);
|
|
1198
|
+
--wui-color-base-7: var(--wui-red-7);
|
|
1199
|
+
--wui-color-base-8: var(--wui-red-8);
|
|
1200
|
+
--wui-color-base-9: var(--wui-red-9);
|
|
1201
|
+
--wui-color-base-10: var(--wui-red-10);
|
|
1202
|
+
--wui-color-base-11: var(--wui-red-11);
|
|
1203
|
+
--wui-color-base-12: var(--wui-red-12);
|
|
1204
|
+
--wui-color-base-contrast: var(--wui-red-contrast);
|
|
1205
|
+
--wui-color-accent-1: var(--wui-red-1);
|
|
1206
|
+
--wui-color-accent-2: var(--wui-red-2);
|
|
1207
|
+
--wui-color-accent-3: var(--wui-red-3);
|
|
1208
|
+
--wui-color-accent-4: var(--wui-red-4);
|
|
1209
|
+
--wui-color-accent-5: var(--wui-red-5);
|
|
1210
|
+
--wui-color-accent-6: var(--wui-red-6);
|
|
1211
|
+
--wui-color-accent-7: var(--wui-red-7);
|
|
1212
|
+
--wui-color-accent-8: var(--wui-red-8);
|
|
1213
|
+
--wui-color-accent-9: var(--wui-red-9);
|
|
1214
|
+
--wui-color-accent-10: var(--wui-red-10);
|
|
1215
|
+
--wui-color-accent-11: var(--wui-red-11);
|
|
1216
|
+
--wui-color-accent-12: var(--wui-red-12);
|
|
1217
|
+
--wui-color-accent-contrast: var(--wui-red-contrast);
|
|
1218
|
+
--wui-color-surface-token: var(--wui-red-2);
|
|
1219
|
+
--wui-color-text-button-token: var(--wui-red-11);
|
|
1220
|
+
`;
|
|
1221
|
+
var yellowColorScheme = import_styled_components3.css`
|
|
1222
|
+
--wui-color-base-1: var(--wui-yellow-1);
|
|
1223
|
+
--wui-color-base-2: var(--wui-yellow-2);
|
|
1224
|
+
--wui-color-base-3: var(--wui-yellow-3);
|
|
1225
|
+
--wui-color-base-4: var(--wui-yellow-4);
|
|
1226
|
+
--wui-color-base-5: var(--wui-yellow-5);
|
|
1227
|
+
--wui-color-base-6: var(--wui-yellow-6);
|
|
1228
|
+
--wui-color-base-7: var(--wui-yellow-7);
|
|
1229
|
+
--wui-color-base-8: var(--wui-yellow-8);
|
|
1230
|
+
--wui-color-base-9: var(--wui-yellow-9);
|
|
1231
|
+
--wui-color-base-10: var(--wui-yellow-10);
|
|
1232
|
+
--wui-color-base-11: var(--wui-yellow-11);
|
|
1233
|
+
--wui-color-base-12: var(--wui-yellow-12);
|
|
1234
|
+
--wui-color-base-contrast: var(--wui-yellow-contrast);
|
|
1235
|
+
--wui-color-accent-1: var(--wui-yellow-1);
|
|
1236
|
+
--wui-color-accent-2: var(--wui-yellow-2);
|
|
1237
|
+
--wui-color-accent-3: var(--wui-yellow-3);
|
|
1238
|
+
--wui-color-accent-4: var(--wui-yellow-4);
|
|
1239
|
+
--wui-color-accent-5: var(--wui-yellow-5);
|
|
1240
|
+
--wui-color-accent-6: var(--wui-yellow-6);
|
|
1241
|
+
--wui-color-accent-7: var(--wui-yellow-7);
|
|
1242
|
+
--wui-color-accent-8: var(--wui-yellow-8);
|
|
1243
|
+
--wui-color-accent-9: var(--wui-yellow-9);
|
|
1244
|
+
--wui-color-accent-10: var(--wui-yellow-10);
|
|
1245
|
+
--wui-color-accent-11: var(--wui-yellow-11);
|
|
1246
|
+
--wui-color-accent-12: var(--wui-yellow-12);
|
|
1247
|
+
--wui-color-accent-contrast: var(--wui-yellow-contrast);
|
|
1248
|
+
--wui-color-surface-token: var(--wui-yellow-2);
|
|
1249
|
+
--wui-color-text-button-token: var(--wui-yellow-11);
|
|
1250
|
+
`;
|
|
1251
|
+
var errorColorScheme = import_styled_components3.css`
|
|
1252
|
+
--wui-color-base-1: var(--wui-error-1);
|
|
1253
|
+
--wui-color-base-2: var(--wui-error-2);
|
|
1254
|
+
--wui-color-base-3: var(--wui-error-3);
|
|
1255
|
+
--wui-color-base-4: var(--wui-error-4);
|
|
1256
|
+
--wui-color-base-5: var(--wui-error-5);
|
|
1257
|
+
--wui-color-base-6: var(--wui-error-6);
|
|
1258
|
+
--wui-color-base-7: var(--wui-error-7);
|
|
1259
|
+
--wui-color-base-8: var(--wui-error-8);
|
|
1260
|
+
--wui-color-base-9: var(--wui-error-9);
|
|
1261
|
+
--wui-color-base-10: var(--wui-error-10);
|
|
1262
|
+
--wui-color-base-11: var(--wui-error-11);
|
|
1263
|
+
--wui-color-base-12: var(--wui-error-12);
|
|
1264
|
+
--wui-color-base-contrast: var(--wui-error-contrast);
|
|
1265
|
+
--wui-color-accent-1: var(--wui-error-1);
|
|
1266
|
+
--wui-color-accent-2: var(--wui-error-2);
|
|
1267
|
+
--wui-color-accent-3: var(--wui-error-3);
|
|
1268
|
+
--wui-color-accent-4: var(--wui-error-4);
|
|
1269
|
+
--wui-color-accent-5: var(--wui-error-5);
|
|
1270
|
+
--wui-color-accent-6: var(--wui-error-6);
|
|
1271
|
+
--wui-color-accent-7: var(--wui-error-7);
|
|
1272
|
+
--wui-color-accent-8: var(--wui-error-8);
|
|
1273
|
+
--wui-color-accent-9: var(--wui-error-9);
|
|
1274
|
+
--wui-color-accent-10: var(--wui-error-10);
|
|
1275
|
+
--wui-color-accent-11: var(--wui-error-11);
|
|
1276
|
+
--wui-color-accent-12: var(--wui-error-12);
|
|
1277
|
+
--wui-color-accent-contrast: var(--wui-error-contrast);
|
|
1278
|
+
--wui-color-surface-token: var(--wui-error-2);
|
|
1279
|
+
--wui-color-text-button-token: var(--wui-error-11);
|
|
1280
|
+
`;
|
|
1281
|
+
var infoColorScheme = import_styled_components3.css`
|
|
1282
|
+
--wui-color-base-1: var(--wui-blue-1);
|
|
1283
|
+
--wui-color-base-2: var(--wui-blue-2);
|
|
1284
|
+
--wui-color-base-3: var(--wui-blue-3);
|
|
1285
|
+
--wui-color-base-4: var(--wui-blue-4);
|
|
1286
|
+
--wui-color-base-5: var(--wui-blue-5);
|
|
1287
|
+
--wui-color-base-6: var(--wui-blue-6);
|
|
1288
|
+
--wui-color-base-7: var(--wui-blue-7);
|
|
1289
|
+
--wui-color-base-8: var(--wui-blue-8);
|
|
1290
|
+
--wui-color-base-9: var(--wui-blue-9);
|
|
1291
|
+
--wui-color-base-10: var(--wui-blue-10);
|
|
1292
|
+
--wui-color-base-11: var(--wui-blue-11);
|
|
1293
|
+
--wui-color-base-12: var(--wui-blue-12);
|
|
1294
|
+
--wui-color-base-contrast: var(--wui-blue-contrast);
|
|
1295
|
+
--wui-color-accent-1: var(--wui-blue-1);
|
|
1296
|
+
--wui-color-accent-2: var(--wui-blue-2);
|
|
1297
|
+
--wui-color-accent-3: var(--wui-blue-3);
|
|
1298
|
+
--wui-color-accent-4: var(--wui-blue-4);
|
|
1299
|
+
--wui-color-accent-5: var(--wui-blue-5);
|
|
1300
|
+
--wui-color-accent-6: var(--wui-blue-6);
|
|
1301
|
+
--wui-color-accent-7: var(--wui-blue-7);
|
|
1302
|
+
--wui-color-accent-8: var(--wui-blue-8);
|
|
1303
|
+
--wui-color-accent-9: var(--wui-blue-9);
|
|
1304
|
+
--wui-color-accent-10: var(--wui-blue-10);
|
|
1305
|
+
--wui-color-accent-11: var(--wui-blue-11);
|
|
1306
|
+
--wui-color-accent-12: var(--wui-blue-12);
|
|
1307
|
+
--wui-color-accent-contrast: var(--wui-blue-contrast);
|
|
1308
|
+
--wui-color-surface-token: var(--wui-blue-2);
|
|
1309
|
+
--wui-color-text-button-token: var(--wui-blue-11);
|
|
1310
|
+
`;
|
|
1311
|
+
var successColorScheme = import_styled_components3.css`
|
|
1312
|
+
--wui-color-base-1: var(--wui-success-1);
|
|
1313
|
+
--wui-color-base-2: var(--wui-success-2);
|
|
1314
|
+
--wui-color-base-3: var(--wui-success-3);
|
|
1315
|
+
--wui-color-base-4: var(--wui-success-4);
|
|
1316
|
+
--wui-color-base-5: var(--wui-success-5);
|
|
1317
|
+
--wui-color-base-6: var(--wui-success-6);
|
|
1318
|
+
--wui-color-base-7: var(--wui-success-7);
|
|
1319
|
+
--wui-color-base-8: var(--wui-success-8);
|
|
1320
|
+
--wui-color-base-9: var(--wui-success-9);
|
|
1321
|
+
--wui-color-base-10: var(--wui-success-10);
|
|
1322
|
+
--wui-color-base-11: var(--wui-success-11);
|
|
1323
|
+
--wui-color-base-12: var(--wui-success-12);
|
|
1324
|
+
--wui-color-base-contrast: var(--wui-success-contrast);
|
|
1325
|
+
--wui-color-accent-1: var(--wui-success-1);
|
|
1326
|
+
--wui-color-accent-2: var(--wui-success-2);
|
|
1327
|
+
--wui-color-accent-3: var(--wui-success-3);
|
|
1328
|
+
--wui-color-accent-4: var(--wui-success-4);
|
|
1329
|
+
--wui-color-accent-5: var(--wui-success-5);
|
|
1330
|
+
--wui-color-accent-6: var(--wui-success-6);
|
|
1331
|
+
--wui-color-accent-7: var(--wui-success-7);
|
|
1332
|
+
--wui-color-accent-8: var(--wui-success-8);
|
|
1333
|
+
--wui-color-accent-9: var(--wui-success-9);
|
|
1334
|
+
--wui-color-accent-10: var(--wui-success-10);
|
|
1335
|
+
--wui-color-accent-11: var(--wui-success-11);
|
|
1336
|
+
--wui-color-accent-12: var(--wui-success-12);
|
|
1337
|
+
--wui-color-accent-contrast: var(--wui-success-contrast);
|
|
1338
|
+
--wui-color-surface-token: var(--wui-success-2);
|
|
1339
|
+
--wui-color-text-button-token: var(--wui-success-11);
|
|
1340
|
+
`;
|
|
1341
|
+
var warningColorScheme = import_styled_components3.css`
|
|
1342
|
+
--wui-color-base-1: var(--wui-warning-1);
|
|
1343
|
+
--wui-color-base-2: var(--wui-warning-2);
|
|
1344
|
+
--wui-color-base-3: var(--wui-warning-3);
|
|
1345
|
+
--wui-color-base-4: var(--wui-warning-4);
|
|
1346
|
+
--wui-color-base-5: var(--wui-warning-5);
|
|
1347
|
+
--wui-color-base-6: var(--wui-warning-6);
|
|
1348
|
+
--wui-color-base-7: var(--wui-warning-7);
|
|
1349
|
+
--wui-color-base-8: var(--wui-warning-8);
|
|
1350
|
+
--wui-color-base-9: var(--wui-warning-9);
|
|
1351
|
+
--wui-color-base-10: var(--wui-warning-10);
|
|
1352
|
+
--wui-color-base-11: var(--wui-warning-11);
|
|
1353
|
+
--wui-color-base-12: var(--wui-warning-12);
|
|
1354
|
+
--wui-color-base-contrast: var(--wui-warning-contrast);
|
|
1355
|
+
--wui-color-accent-1: var(--wui-warning-1);
|
|
1356
|
+
--wui-color-accent-2: var(--wui-warning-2);
|
|
1357
|
+
--wui-color-accent-3: var(--wui-warning-3);
|
|
1358
|
+
--wui-color-accent-4: var(--wui-warning-4);
|
|
1359
|
+
--wui-color-accent-5: var(--wui-warning-5);
|
|
1360
|
+
--wui-color-accent-6: var(--wui-warning-6);
|
|
1361
|
+
--wui-color-accent-7: var(--wui-warning-7);
|
|
1362
|
+
--wui-color-accent-8: var(--wui-warning-8);
|
|
1363
|
+
--wui-color-accent-9: var(--wui-warning-9);
|
|
1364
|
+
--wui-color-accent-10: var(--wui-warning-10);
|
|
1365
|
+
--wui-color-accent-11: var(--wui-warning-11);
|
|
1366
|
+
--wui-color-accent-12: var(--wui-warning-12);
|
|
1367
|
+
--wui-color-accent-contrast: var(--wui-warning-contrast);
|
|
1368
|
+
--wui-color-surface-token: var(--wui-warning-2);
|
|
1369
|
+
--wui-color-text-button-token: var(--wui-warning-11);
|
|
1370
|
+
`;
|
|
1371
|
+
var vendorHubspotColorScheme = import_styled_components3.css`
|
|
1372
|
+
--wui-color-base-1: var(--wui-vendor-hubspot-1);
|
|
1373
|
+
--wui-color-base-2: var(--wui-vendor-hubspot-2);
|
|
1374
|
+
--wui-color-base-3: var(--wui-vendor-hubspot-3);
|
|
1375
|
+
--wui-color-base-4: var(--wui-vendor-hubspot-4);
|
|
1376
|
+
--wui-color-base-5: var(--wui-vendor-hubspot-5);
|
|
1377
|
+
--wui-color-base-6: var(--wui-vendor-hubspot-6);
|
|
1378
|
+
--wui-color-base-7: var(--wui-vendor-hubspot-7);
|
|
1379
|
+
--wui-color-base-8: var(--wui-vendor-hubspot-8);
|
|
1380
|
+
--wui-color-base-9: var(--wui-vendor-hubspot-9);
|
|
1381
|
+
--wui-color-base-10: var(--wui-vendor-hubspot-10);
|
|
1382
|
+
--wui-color-base-11: var(--wui-vendor-hubspot-11);
|
|
1383
|
+
--wui-color-base-12: var(--wui-vendor-hubspot-12);
|
|
1384
|
+
--wui-color-base-contrast: var(--wui-vendor-hubspot-contrast);
|
|
1385
|
+
--wui-color-accent-1: var(--wui-vendor-hubspot-1);
|
|
1386
|
+
--wui-color-accent-2: var(--wui-vendor-hubspot-2);
|
|
1387
|
+
--wui-color-accent-3: var(--wui-vendor-hubspot-3);
|
|
1388
|
+
--wui-color-accent-4: var(--wui-vendor-hubspot-4);
|
|
1389
|
+
--wui-color-accent-5: var(--wui-vendor-hubspot-5);
|
|
1390
|
+
--wui-color-accent-6: var(--wui-vendor-hubspot-6);
|
|
1391
|
+
--wui-color-accent-7: var(--wui-vendor-hubspot-7);
|
|
1392
|
+
--wui-color-accent-8: var(--wui-vendor-hubspot-8);
|
|
1393
|
+
--wui-color-accent-9: var(--wui-vendor-hubspot-9);
|
|
1394
|
+
--wui-color-accent-10: var(--wui-vendor-hubspot-10);
|
|
1395
|
+
--wui-color-accent-11: var(--wui-vendor-hubspot-11);
|
|
1396
|
+
--wui-color-accent-12: var(--wui-vendor-hubspot-12);
|
|
1397
|
+
--wui-color-accent-contrast: var(--wui-vendor-hubspot-contrast);
|
|
1398
|
+
--wui-color-surface-token: var(--wui-vendor-hubspot-2);
|
|
1399
|
+
--wui-color-text-button-token: var(--wui-vendor-hubspot-11);
|
|
1400
|
+
`;
|
|
1401
|
+
var vendorMarketoColorScheme = import_styled_components3.css`
|
|
1402
|
+
--wui-color-base-1: var(--wui-vendor-marketo-1);
|
|
1403
|
+
--wui-color-base-2: var(--wui-vendor-marketo-2);
|
|
1404
|
+
--wui-color-base-3: var(--wui-vendor-marketo-3);
|
|
1405
|
+
--wui-color-base-4: var(--wui-vendor-marketo-4);
|
|
1406
|
+
--wui-color-base-5: var(--wui-vendor-marketo-5);
|
|
1407
|
+
--wui-color-base-6: var(--wui-vendor-marketo-6);
|
|
1408
|
+
--wui-color-base-7: var(--wui-vendor-marketo-7);
|
|
1409
|
+
--wui-color-base-8: var(--wui-vendor-marketo-8);
|
|
1410
|
+
--wui-color-base-9: var(--wui-vendor-marketo-9);
|
|
1411
|
+
--wui-color-base-10: var(--wui-vendor-marketo-10);
|
|
1412
|
+
--wui-color-base-11: var(--wui-vendor-marketo-11);
|
|
1413
|
+
--wui-color-base-12: var(--wui-vendor-marketo-12);
|
|
1414
|
+
--wui-color-base-contrast: var(--wui-vendor-marketo-contrast);
|
|
1415
|
+
--wui-color-accent-1: var(--wui-vendor-marketo-1);
|
|
1416
|
+
--wui-color-accent-2: var(--wui-vendor-marketo-2);
|
|
1417
|
+
--wui-color-accent-3: var(--wui-vendor-marketo-3);
|
|
1418
|
+
--wui-color-accent-4: var(--wui-vendor-marketo-4);
|
|
1419
|
+
--wui-color-accent-5: var(--wui-vendor-marketo-5);
|
|
1420
|
+
--wui-color-accent-6: var(--wui-vendor-marketo-6);
|
|
1421
|
+
--wui-color-accent-7: var(--wui-vendor-marketo-7);
|
|
1422
|
+
--wui-color-accent-8: var(--wui-vendor-marketo-8);
|
|
1423
|
+
--wui-color-accent-9: var(--wui-vendor-marketo-9);
|
|
1424
|
+
--wui-color-accent-10: var(--wui-vendor-marketo-10);
|
|
1425
|
+
--wui-color-accent-11: var(--wui-vendor-marketo-11);
|
|
1426
|
+
--wui-color-accent-12: var(--wui-vendor-marketo-12);
|
|
1427
|
+
--wui-color-accent-contrast: var(--wui-vendor-marketo-contrast);
|
|
1428
|
+
--wui-color-surface-token: var(--wui-vendor-marketo-2);
|
|
1429
|
+
--wui-color-text-button-token: var(--wui-vendor-marketo-11);
|
|
1430
|
+
`;
|
|
1431
|
+
var vendorPardotColorScheme = import_styled_components3.css`
|
|
1432
|
+
--wui-color-base-1: var(--wui-vendor-pardot-1);
|
|
1433
|
+
--wui-color-base-2: var(--wui-vendor-pardot-2);
|
|
1434
|
+
--wui-color-base-3: var(--wui-vendor-pardot-3);
|
|
1435
|
+
--wui-color-base-4: var(--wui-vendor-pardot-4);
|
|
1436
|
+
--wui-color-base-5: var(--wui-vendor-pardot-5);
|
|
1437
|
+
--wui-color-base-6: var(--wui-vendor-pardot-6);
|
|
1438
|
+
--wui-color-base-7: var(--wui-vendor-pardot-7);
|
|
1439
|
+
--wui-color-base-8: var(--wui-vendor-pardot-8);
|
|
1440
|
+
--wui-color-base-9: var(--wui-vendor-pardot-9);
|
|
1441
|
+
--wui-color-base-10: var(--wui-vendor-pardot-10);
|
|
1442
|
+
--wui-color-base-11: var(--wui-vendor-pardot-11);
|
|
1443
|
+
--wui-color-base-12: var(--wui-vendor-pardot-12);
|
|
1444
|
+
--wui-color-base-contrast: var(--wui-vendor-pardot-contrast);
|
|
1445
|
+
--wui-color-accent-1: var(--wui-vendor-pardot-1);
|
|
1446
|
+
--wui-color-accent-2: var(--wui-vendor-pardot-2);
|
|
1447
|
+
--wui-color-accent-3: var(--wui-vendor-pardot-3);
|
|
1448
|
+
--wui-color-accent-4: var(--wui-vendor-pardot-4);
|
|
1449
|
+
--wui-color-accent-5: var(--wui-vendor-pardot-5);
|
|
1450
|
+
--wui-color-accent-6: var(--wui-vendor-pardot-6);
|
|
1451
|
+
--wui-color-accent-7: var(--wui-vendor-pardot-7);
|
|
1452
|
+
--wui-color-accent-8: var(--wui-vendor-pardot-8);
|
|
1453
|
+
--wui-color-accent-9: var(--wui-vendor-pardot-9);
|
|
1454
|
+
--wui-color-accent-10: var(--wui-vendor-pardot-10);
|
|
1455
|
+
--wui-color-accent-11: var(--wui-vendor-pardot-11);
|
|
1456
|
+
--wui-color-accent-12: var(--wui-vendor-pardot-12);
|
|
1457
|
+
--wui-color-accent-contrast: var(--wui-vendor-pardot-contrast);
|
|
1458
|
+
--wui-color-surface-token: var(--wui-vendor-pardot-2);
|
|
1459
|
+
--wui-color-text-button-token: var(--wui-vendor-pardot-11);
|
|
1460
|
+
`;
|
|
1461
|
+
var navColorScheme = import_styled_components3.css`
|
|
1462
|
+
--wui-color-bg-app: #1e3399;
|
|
1463
|
+
--wui-color-bg-fill: var(--wui-blue-1);
|
|
1464
|
+
--wui-color-bg-fill-hover: #e7e9f4;
|
|
1465
|
+
--wui-color-bg-fill-active: #dcdfef;
|
|
1466
|
+
--wui-color-bg-surface: transparent;
|
|
1467
|
+
--wui-color-bg-surface-hover: #15267b;
|
|
1468
|
+
--wui-color-bg-surface-active: #122271;
|
|
1469
|
+
--wui-color-bg-surface-secondary: #15267b;
|
|
1470
|
+
--wui-color-bg-surface-secondary-hover: #122271;
|
|
1471
|
+
--wui-color-bg-surface-secondary-active: #101e67;
|
|
1472
|
+
--wui-color-bg-surface-tertiary: #0d1a5c;
|
|
1473
|
+
--wui-color-border-secondary: #101e67;
|
|
1474
|
+
--wui-color-border-hover-secondary: #0e1c61;
|
|
1475
|
+
--wui-color-border-active-secondary: #0d1a5c;
|
|
1476
|
+
--wui-color-border: var(--wui-color-bg-fill);
|
|
1477
|
+
--wui-color-border-hover: var(--wui-color-bg-fill-hover);
|
|
1478
|
+
--wui-color-border-active: var(--wui-color-bg-fill-active);
|
|
1479
|
+
--wui-color-icon: var(--wui-blue-1);
|
|
1480
|
+
--wui-color-icon-on-fill: var(--wui-color-bg-app);
|
|
1481
|
+
--wui-color-text: var(--wui-blue-1);
|
|
1482
|
+
--wui-color-text-on-fill: var(--wui-color-bg-app);
|
|
1483
|
+
--wui-color-text-link: var(--wui-blue-4);
|
|
1484
|
+
--wui-color-text-secondary: var(--wui-blue-6);
|
|
1485
|
+
--wui-color-text-button: var(--wui-blue-1);
|
|
1486
|
+
--wui-color-focus-ring: var(--wui-blue-1);
|
|
1010
1487
|
|
|
1011
|
-
/*
|
|
1012
|
-
--wui-color-bg-
|
|
1013
|
-
--wui-color-
|
|
1014
|
-
--wui-color-
|
|
1015
|
-
--wui-color-bg-surface: var(--wui-gray-1);
|
|
1016
|
-
--wui-color-bg-surface-active: var(--wui-gray-4);
|
|
1017
|
-
--wui-color-bg-surface-hover: var(--wui-gray-3);
|
|
1018
|
-
--wui-color-bg-surface-secondary: var(--wui-gray-3);
|
|
1019
|
-
--wui-color-bg-surface-secondary-active: var(--wui-gray-5);
|
|
1020
|
-
--wui-color-bg-surface-secondary-hover: var(--wui-gray-4);
|
|
1021
|
-
--wui-color-bg-surface-tertiary: var(--wui-gray-5);
|
|
1022
|
-
--wui-color-border: var(--wui-gray-6);
|
|
1023
|
-
--wui-color-border-hover: var(--wui-gray-8);
|
|
1024
|
-
--wui-color-border-active: var(--wui-gray-9);
|
|
1025
|
-
--wui-color-border-secondary: var(--wui-gray-8);
|
|
1026
|
-
--wui-color-border-secondary-hover: var(--wui-gray-10);
|
|
1027
|
-
--wui-color-border-secondary-active: var(--wui-gray-11);
|
|
1028
|
-
--wui-color-icon: var(--wui-gray-11);
|
|
1029
|
-
--wui-color-icon-on-fill: var(--wui-gray-contrast);
|
|
1030
|
-
--wui-color-text: var(--wui-gray-12);
|
|
1031
|
-
--wui-color-text-button: var(--wui-gray-12);
|
|
1032
|
-
--wui-color-text-link: var(--wui-blue-9);
|
|
1033
|
-
--wui-color-text-on-fill: var(--wui-gray-contrast);
|
|
1034
|
-
--wui-color-text-secondary: var(--wui-gray-11);
|
|
1035
|
-
--wui-color-focus-ring: var(--wui-blue-9);
|
|
1488
|
+
/* Nav - Disabled */
|
|
1489
|
+
--wui-color-bg-surface-disabled: transparent;
|
|
1490
|
+
--wui-color-icon-disabled: var(--wui-blue-8);
|
|
1491
|
+
--wui-color-text-disabled: var(--wui-blue-8);
|
|
1036
1492
|
|
|
1037
|
-
/*
|
|
1493
|
+
/* Nav - Selected */
|
|
1494
|
+
--wui-color-bg-surface-selected: var(--wui-color-bg-fill);
|
|
1495
|
+
--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);
|
|
1496
|
+
--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);
|
|
1497
|
+
--wui-color-icon-selected: var(--wui-color-bg-app);
|
|
1498
|
+
--wui-color-text-selected: var(--wui-color-bg-app);
|
|
1499
|
+
--wui-color-border-selected: transparent;
|
|
1500
|
+
--wui-color-border-hover-selected: transparent;
|
|
1501
|
+
--wui-color-border-active-selected: transparent;
|
|
1502
|
+
`;
|
|
1038
1503
|
|
|
1504
|
+
// src/css/designTokens/colorAlias.tsx
|
|
1505
|
+
var baseAliasTokens = import_styled_components4.css`
|
|
1506
|
+
--wui-color-bg-fill: var(--wui-color-accent-9);
|
|
1507
|
+
--wui-color-bg-fill-active: var(--wui-color-accent-11);
|
|
1508
|
+
--wui-color-bg-fill-hover: var(--wui-color-accent-10);
|
|
1509
|
+
--wui-color-bg-surface: var(--wui-color-surface-token);
|
|
1510
|
+
--wui-color-bg-surface-active: var(--wui-color-base-4);
|
|
1511
|
+
--wui-color-bg-surface-hover: var(--wui-color-base-3);
|
|
1512
|
+
--wui-color-bg-surface-secondary: var(--wui-color-base-3);
|
|
1513
|
+
--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);
|
|
1514
|
+
--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);
|
|
1515
|
+
--wui-color-bg-surface-tertiary: var(--wui-color-base-5);
|
|
1516
|
+
--wui-color-border: var(--wui-color-base-6);
|
|
1517
|
+
--wui-color-border-hover: var(--wui-color-base-8);
|
|
1518
|
+
--wui-color-border-active: var(--wui-color-base-9);
|
|
1519
|
+
--wui-color-border-secondary: var(--wui-color-base-8);
|
|
1520
|
+
--wui-color-border-secondary-hover: var(--wui-color-base-10);
|
|
1521
|
+
--wui-color-border-secondary-active: var(--wui-color-base-11);
|
|
1522
|
+
--wui-color-icon: var(--wui-color-base-11);
|
|
1523
|
+
--wui-color-icon-on-fill: var(--wui-color-accent-contrast);
|
|
1524
|
+
--wui-color-text: var(--wui-color-base-12);
|
|
1525
|
+
--wui-color-text-button: var(--wui-color-text-button-token);
|
|
1526
|
+
--wui-color-text-link: var(--wui-color-accent-9);
|
|
1527
|
+
--wui-color-text-on-fill: var(--wui-color-accent-contrast);
|
|
1528
|
+
--wui-color-text-secondary: var(--wui-color-base-11);
|
|
1529
|
+
--wui-color-focus-ring: var(--wui-color-accent-9);
|
|
1530
|
+
`;
|
|
1531
|
+
var colorAliasTokens = import_styled_components4.css`
|
|
1532
|
+
--wui-color-bg-app: var(--wui-app-background);
|
|
1533
|
+
${defaultColorScheme}
|
|
1534
|
+
${baseAliasTokens}
|
|
1535
|
+
/* --- Semantic --- */
|
|
1039
1536
|
/* Error */
|
|
1040
1537
|
--wui-color-bg-fill-active-error: var(--wui-error-11);
|
|
1041
1538
|
--wui-color-bg-fill-error: var(--wui-error-9);
|
|
@@ -1330,8 +1827,8 @@ var colorAliasTokens = import_styled_components3.css`
|
|
|
1330
1827
|
`;
|
|
1331
1828
|
|
|
1332
1829
|
// src/css/designTokens/borderRadius.tsx
|
|
1333
|
-
var
|
|
1334
|
-
var borderRadiusTokens =
|
|
1830
|
+
var import_styled_components5 = require("styled-components");
|
|
1831
|
+
var borderRadiusTokens = import_styled_components5.css`
|
|
1335
1832
|
--wui-border-radius-00: 0;
|
|
1336
1833
|
--wui-border-radius-01: 4px;
|
|
1337
1834
|
--wui-border-radius-02: 8px;
|
|
@@ -1342,8 +1839,8 @@ var borderRadiusTokens = import_styled_components4.css`
|
|
|
1342
1839
|
`;
|
|
1343
1840
|
|
|
1344
1841
|
// src/css/designTokens/spacing.tsx
|
|
1345
|
-
var
|
|
1346
|
-
var spacingTokens =
|
|
1842
|
+
var import_styled_components6 = require("styled-components");
|
|
1843
|
+
var spacingTokens = import_styled_components6.css`
|
|
1347
1844
|
--wui-space-00: 0px;
|
|
1348
1845
|
--wui-space-01: 4px;
|
|
1349
1846
|
--wui-space-02: 8px;
|
|
@@ -1357,8 +1854,8 @@ var spacingTokens = import_styled_components5.css`
|
|
|
1357
1854
|
`;
|
|
1358
1855
|
|
|
1359
1856
|
// src/css/designTokens/typography.tsx
|
|
1360
|
-
var
|
|
1361
|
-
var typographyTokens =
|
|
1857
|
+
var import_styled_components7 = require("styled-components");
|
|
1858
|
+
var typographyTokens = import_styled_components7.css`
|
|
1362
1859
|
--wui-typography-family-default: intervariable, sans-serif;
|
|
1363
1860
|
--wui-typography-family-brand: 'GT Walsheim', sans-serif;
|
|
1364
1861
|
--wui-typography-family-mono: 'IBM Plex Mono', monospace;
|
|
@@ -1471,8 +1968,8 @@ var typographyTokens = import_styled_components6.css`
|
|
|
1471
1968
|
`;
|
|
1472
1969
|
|
|
1473
1970
|
// src/css/designTokens/zIndex.tsx
|
|
1474
|
-
var
|
|
1475
|
-
var zIndexTokens =
|
|
1971
|
+
var import_styled_components8 = require("styled-components");
|
|
1972
|
+
var zIndexTokens = import_styled_components8.css`
|
|
1476
1973
|
--wui-zindex-under: -1;
|
|
1477
1974
|
--wui-zindex-backdrop: 500;
|
|
1478
1975
|
--wui-zindex-menu: 500;
|
|
@@ -1483,15 +1980,15 @@ var zIndexTokens = import_styled_components7.css`
|
|
|
1483
1980
|
`;
|
|
1484
1981
|
|
|
1485
1982
|
// src/css/designTokens/elevation.tsx
|
|
1486
|
-
var
|
|
1487
|
-
var elevationTokens =
|
|
1983
|
+
var import_styled_components9 = require("styled-components");
|
|
1984
|
+
var elevationTokens = import_styled_components9.css`
|
|
1488
1985
|
--wui-elevation-01: 0px 4px 8px 0px var(--wui-color-drop-shadow);
|
|
1489
1986
|
--wui-elevation-02: 0px 4px 24px 0px var(--wui-color-drop-shadow);
|
|
1490
1987
|
`;
|
|
1491
1988
|
|
|
1492
1989
|
// src/css/designTokens/motion.tsx
|
|
1493
|
-
var
|
|
1494
|
-
var motionTokens =
|
|
1990
|
+
var import_styled_components10 = require("styled-components");
|
|
1991
|
+
var motionTokens = import_styled_components10.css`
|
|
1495
1992
|
/* Durations */
|
|
1496
1993
|
--wui-motion-duration-01: 70ms;
|
|
1497
1994
|
--wui-motion-duration-02: 110ms;
|
|
@@ -1520,7 +2017,7 @@ var motionTokens = import_styled_components9.css`
|
|
|
1520
2017
|
`;
|
|
1521
2018
|
|
|
1522
2019
|
// src/css/designTokens/index.tsx
|
|
1523
|
-
var colorTokens =
|
|
2020
|
+
var colorTokens = import_styled_components11.css`
|
|
1524
2021
|
${lightGlobalTokens}
|
|
1525
2022
|
/* Dark mode is disabled until we have a more robust plan for supporting it */
|
|
1526
2023
|
|
|
@@ -1529,7 +2026,7 @@ var colorTokens = import_styled_components10.css`
|
|
|
1529
2026
|
} */
|
|
1530
2027
|
${colorAliasTokens}
|
|
1531
2028
|
`;
|
|
1532
|
-
var designTokens =
|
|
2029
|
+
var designTokens = import_styled_components11.css`
|
|
1533
2030
|
:root {
|
|
1534
2031
|
${borderRadiusTokens}
|
|
1535
2032
|
${colorTokens}
|
|
@@ -1542,8 +2039,8 @@ var designTokens = import_styled_components10.css`
|
|
|
1542
2039
|
`;
|
|
1543
2040
|
|
|
1544
2041
|
// src/components/ClickRegion/globalStyles.tsx
|
|
1545
|
-
var
|
|
1546
|
-
var clickRegionGlobalStyles =
|
|
2042
|
+
var import_styled_components12 = require("styled-components");
|
|
2043
|
+
var clickRegionGlobalStyles = import_styled_components12.css`
|
|
1547
2044
|
[data-click-region] {
|
|
1548
2045
|
position: relative;
|
|
1549
2046
|
cursor: pointer;
|
|
@@ -1569,7 +2066,7 @@ var clickRegionGlobalStyles = import_styled_components11.css`
|
|
|
1569
2066
|
`;
|
|
1570
2067
|
|
|
1571
2068
|
// src/css/GlobalStyle.tsx
|
|
1572
|
-
var GlobalStyle =
|
|
2069
|
+
var GlobalStyle = import_styled_components13.createGlobalStyle`
|
|
1573
2070
|
${globalStyleAdjustmentsCss}
|
|
1574
2071
|
${designTokens}
|
|
1575
2072
|
${clickRegionGlobalStyles}
|
|
@@ -2738,16 +3235,16 @@ var import_sonner2 = require("sonner");
|
|
|
2738
3235
|
|
|
2739
3236
|
// src/private/components/Toast/Toast.tsx
|
|
2740
3237
|
var import_react19 = require("react");
|
|
2741
|
-
var
|
|
3238
|
+
var import_styled_components17 = __toESM(require("styled-components"));
|
|
2742
3239
|
var import_type_guards11 = require("@wistia/type-guards");
|
|
2743
3240
|
|
|
2744
3241
|
// src/components/Ellipsis/Ellipsis.tsx
|
|
2745
3242
|
var import_type_guards10 = require("@wistia/type-guards");
|
|
2746
|
-
var
|
|
3243
|
+
var import_styled_components15 = __toESM(require("styled-components"));
|
|
2747
3244
|
|
|
2748
3245
|
// src/css/lineClampCss.tsx
|
|
2749
|
-
var
|
|
2750
|
-
var lineClampCss = ($lines = 1) =>
|
|
3246
|
+
var import_styled_components14 = require("styled-components");
|
|
3247
|
+
var lineClampCss = ($lines = 1) => import_styled_components14.css`
|
|
2751
3248
|
-webkit-box-orient: vertical;
|
|
2752
3249
|
-webkit-line-clamp: ${$lines};
|
|
2753
3250
|
display: -webkit-box !important;
|
|
@@ -2756,7 +3253,7 @@ var lineClampCss = ($lines = 1) => import_styled_components13.css`
|
|
|
2756
3253
|
|
|
2757
3254
|
// src/components/Ellipsis/Ellipsis.tsx
|
|
2758
3255
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
2759
|
-
var ellipsisStyle =
|
|
3256
|
+
var ellipsisStyle = import_styled_components15.css`
|
|
2760
3257
|
overflow: hidden;
|
|
2761
3258
|
text-overflow: ellipsis;
|
|
2762
3259
|
white-space: nowrap;
|
|
@@ -2781,7 +3278,7 @@ var ellipsisStyle = import_styled_components14.css`
|
|
|
2781
3278
|
}
|
|
2782
3279
|
}
|
|
2783
3280
|
`;
|
|
2784
|
-
var EllipsisComponent =
|
|
3281
|
+
var EllipsisComponent = import_styled_components15.default.span`
|
|
2785
3282
|
${ellipsisStyle};
|
|
2786
3283
|
${({ $lines }) => {
|
|
2787
3284
|
if ((0, import_type_guards10.isNotNil)($lines)) {
|
|
@@ -2801,137 +3298,45 @@ var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ (0, import_jsx
|
|
|
2801
3298
|
Ellipsis.displayName = "Ellipsis_UI";
|
|
2802
3299
|
|
|
2803
3300
|
// src/private/helpers/getColorScheme/getColorScheme.ts
|
|
2804
|
-
var
|
|
2805
|
-
var
|
|
2806
|
-
|
|
2807
|
-
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
|
|
2817
|
-
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
{ token: "border-active", step: "9" },
|
|
2824
|
-
{ token: "border-secondary", step: "8" },
|
|
2825
|
-
{ token: "border-secondary-hover", step: "10" },
|
|
2826
|
-
{ token: "border-secondary-active", step: "11" },
|
|
2827
|
-
{ token: "icon", step: "11" },
|
|
2828
|
-
{ token: "icon-on-fill", step: "contrast" },
|
|
2829
|
-
{ token: "focus-ring", step: "9" }
|
|
2830
|
-
];
|
|
2831
|
-
var defaultScheme = import_styled_components15.css`
|
|
2832
|
-
--wui-color-bg-surface: var(--wui-gray-1);
|
|
2833
|
-
--wui-color-bg-surface-hover: var(--wui-gray-3);
|
|
2834
|
-
--wui-color-bg-surface-active: var(--wui-gray-4);
|
|
2835
|
-
--wui-color-bg-surface-secondary: var(--wui-gray-3);
|
|
2836
|
-
--wui-color-bg-surface-secondary-hover: var(--wui-gray-4);
|
|
2837
|
-
--wui-color-bg-surface-secondary-active: var(--wui-gray-5);
|
|
2838
|
-
--wui-color-bg-surface-tertiary: var(--wui-gray-5);
|
|
2839
|
-
--wui-color-bg-fill: var(--wui-blue-9);
|
|
2840
|
-
--wui-color-bg-fill-hover: var(--wui-blue-10);
|
|
2841
|
-
--wui-color-bg-fill-active: var(--wui-blue-11);
|
|
2842
|
-
--wui-color-text: var(--wui-gray-12);
|
|
2843
|
-
--wui-color-text-button: var(--wui-gray-12);
|
|
2844
|
-
--wui-color-text-link: var(--wui-blue-9);
|
|
2845
|
-
--wui-color-text-secondary: var(--wui-gray-11);
|
|
2846
|
-
--wui-color-text-on-fill: var(--wui-gray-contrast);
|
|
2847
|
-
--wui-color-border: var(--wui-gray-6);
|
|
2848
|
-
--wui-color-border-hover: var(--wui-gray-8);
|
|
2849
|
-
--wui-color-border-active: var(--wui-gray-9);
|
|
2850
|
-
--wui-color-border-secondary: var(--wui-gray-8);
|
|
2851
|
-
--wui-color-border-secondary-hover: var(--wui-gray-10);
|
|
2852
|
-
--wui-color-border-secondary-active: var(--wui-gray-11);
|
|
2853
|
-
--wui-color-icon: var(--wui-gray-11);
|
|
2854
|
-
--wui-color-icon-on-fill: var(--wui-gray-contrast);
|
|
2855
|
-
--wui-color-focus-ring: var(--wui-blue-9);
|
|
2856
|
-
`;
|
|
2857
|
-
var navScheme = import_styled_components15.css`
|
|
2858
|
-
--wui-color-bg-app: #1e3399;
|
|
2859
|
-
|
|
2860
|
-
--wui-color-bg-fill: var(--wui-blue-1);
|
|
2861
|
-
--wui-color-bg-fill-hover: #e7e9f4;
|
|
2862
|
-
--wui-color-bg-fill-active: #dcdfef;
|
|
2863
|
-
|
|
2864
|
-
--wui-color-bg-surface: transparent;
|
|
2865
|
-
--wui-color-bg-surface-hover: #15267b;
|
|
2866
|
-
--wui-color-bg-surface-active: #122271;
|
|
2867
|
-
|
|
2868
|
-
--wui-color-bg-surface-secondary: #15267b;
|
|
2869
|
-
--wui-color-bg-surface-secondary-hover: #122271;
|
|
2870
|
-
--wui-color-bg-surface-secondary-active: #101e67;
|
|
2871
|
-
|
|
2872
|
-
--wui-color-bg-surface-tertiary: #0d1a5c;
|
|
2873
|
-
|
|
2874
|
-
--wui-color-border-secondary: #101e67;
|
|
2875
|
-
--wui-color-border-hover-secondary: #0e1c61;
|
|
2876
|
-
--wui-color-border-active-secondary: #0d1a5c;
|
|
2877
|
-
|
|
2878
|
-
--wui-color-border: var(--wui-color-bg-fill);
|
|
2879
|
-
--wui-color-border-hover: var(--wui-color-bg-fill-hover);
|
|
2880
|
-
--wui-color-border-active: var(--wui-color-bg-fill-active);
|
|
2881
|
-
|
|
2882
|
-
--wui-color-icon: var(--wui-blue-1);
|
|
2883
|
-
--wui-color-icon-on-fill: var(--wui-color-bg-app);
|
|
2884
|
-
|
|
2885
|
-
--wui-color-text: var(--wui-blue-1);
|
|
2886
|
-
--wui-color-text-on-fill: var(--wui-color-bg-app);
|
|
2887
|
-
--wui-color-text-link: var(--wui-blue-4);
|
|
2888
|
-
--wui-color-text-secondary: var(--wui-blue-6);
|
|
2889
|
-
--wui-color-text-button: var(--wui-blue-1);
|
|
2890
|
-
|
|
2891
|
-
--wui-color-focus-ring: var(--wui-blue-1);
|
|
2892
|
-
|
|
2893
|
-
/* Nav - Disabled */
|
|
2894
|
-
--wui-color-bg-surface-disabled: transparent;
|
|
2895
|
-
--wui-color-icon-disabled: var(--wui-blue-8);
|
|
2896
|
-
--wui-color-text-disabled: var(--wui-blue-8);
|
|
2897
|
-
|
|
2898
|
-
/* Nav - Selected */
|
|
2899
|
-
--wui-color-bg-surface-selected: var(--wui-color-bg-fill);
|
|
2900
|
-
--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);
|
|
2901
|
-
--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);
|
|
2902
|
-
--wui-color-icon-selected: var(--wui-color-bg-app);
|
|
2903
|
-
--wui-color-text-selected: var(--wui-color-bg-app);
|
|
2904
|
-
--wui-color-border-selected: transparent;
|
|
2905
|
-
--wui-color-border-hover-selected: transparent;
|
|
2906
|
-
--wui-color-border-active-selected: transparent;
|
|
2907
|
-
`;
|
|
3301
|
+
var import_styled_components16 = require("styled-components");
|
|
3302
|
+
var colorSchemes = {
|
|
3303
|
+
default: defaultColorScheme,
|
|
3304
|
+
blue: blueColorScheme,
|
|
3305
|
+
green: greenColorScheme,
|
|
3306
|
+
red: redColorScheme,
|
|
3307
|
+
yellow: yellowColorScheme,
|
|
3308
|
+
purple: purpleColorScheme,
|
|
3309
|
+
orange: orangeColorScheme,
|
|
3310
|
+
pink: pinkColorScheme,
|
|
3311
|
+
error: errorColorScheme,
|
|
3312
|
+
info: infoColorScheme,
|
|
3313
|
+
success: successColorScheme,
|
|
3314
|
+
warning: warningColorScheme,
|
|
3315
|
+
"vendor-hubspot": vendorHubspotColorScheme,
|
|
3316
|
+
"vendor-marketo": vendorMarketoColorScheme,
|
|
3317
|
+
"vendor-pardot": vendorPardotColorScheme,
|
|
3318
|
+
nav: navColorScheme
|
|
3319
|
+
};
|
|
2908
3320
|
var getColorScheme = (colorScheme) => {
|
|
2909
|
-
if (colorScheme === "nav") {
|
|
2910
|
-
return navScheme;
|
|
2911
|
-
}
|
|
2912
3321
|
if (colorScheme === "inherit") {
|
|
2913
3322
|
return null;
|
|
2914
3323
|
}
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
return import_styled_components15.css`
|
|
2919
|
-
${colorSchemeSchema.map(({ token, step }) => {
|
|
2920
|
-
return `--wui-color-${token}: var(--wui-${colorScheme === "info" ? "blue" : colorScheme}-${step});`;
|
|
2921
|
-
}).join("")}
|
|
3324
|
+
return import_styled_components16.css`
|
|
3325
|
+
${colorSchemes[colorScheme]}
|
|
3326
|
+
${baseAliasTokens}
|
|
2922
3327
|
`;
|
|
2923
3328
|
};
|
|
2924
3329
|
|
|
2925
3330
|
// src/private/components/Toast/Toast.tsx
|
|
2926
3331
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
2927
|
-
var Message = (0,
|
|
3332
|
+
var Message = (0, import_styled_components17.default)(Ellipsis)`
|
|
2928
3333
|
line-height: 1.3;
|
|
2929
3334
|
font-size: var(--wui-typography-label-3-size);
|
|
2930
3335
|
font-weight: var(--wui-typography-label-3-weight);
|
|
2931
3336
|
${lineClampCss(3)}
|
|
2932
3337
|
word-break: normal;
|
|
2933
3338
|
`;
|
|
2934
|
-
var MessageWrapper =
|
|
3339
|
+
var MessageWrapper = import_styled_components17.default.div`
|
|
2935
3340
|
display: flex;
|
|
2936
3341
|
flex-grow: 1;
|
|
2937
3342
|
flex-shrink: 1;
|
|
@@ -2944,13 +3349,13 @@ var MessageWrapper = import_styled_components16.default.div`
|
|
|
2944
3349
|
margin-right: var(--wui-space-02); /* space between icon & message */
|
|
2945
3350
|
}
|
|
2946
3351
|
`;
|
|
2947
|
-
var ActionWrapper =
|
|
3352
|
+
var ActionWrapper = import_styled_components17.default.div`
|
|
2948
3353
|
flex-grow: 0;
|
|
2949
3354
|
flex-shrink: 0;
|
|
2950
3355
|
flex-basis: auto;
|
|
2951
3356
|
margin-right: var(--wui-space-03);
|
|
2952
3357
|
`;
|
|
2953
|
-
var StyledToast =
|
|
3358
|
+
var StyledToast = import_styled_components17.default.div`
|
|
2954
3359
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
2955
3360
|
display: flex;
|
|
2956
3361
|
align-items: center;
|
|
@@ -3034,16 +3439,16 @@ var useToast = () => {
|
|
|
3034
3439
|
|
|
3035
3440
|
// src/components/ActionButton/ActionButton.tsx
|
|
3036
3441
|
var import_react24 = require("react");
|
|
3037
|
-
var
|
|
3442
|
+
var import_styled_components23 = __toESM(require("styled-components"));
|
|
3038
3443
|
|
|
3039
3444
|
// src/components/Button/Button.tsx
|
|
3040
3445
|
var import_react23 = require("react");
|
|
3041
|
-
var
|
|
3446
|
+
var import_styled_components22 = __toESM(require("styled-components"));
|
|
3042
3447
|
var import_type_guards15 = require("@wistia/type-guards");
|
|
3043
3448
|
|
|
3044
3449
|
// src/css/buttonResetCss.tsx
|
|
3045
|
-
var
|
|
3046
|
-
var buttonResetCss =
|
|
3450
|
+
var import_styled_components18 = require("styled-components");
|
|
3451
|
+
var buttonResetCss = import_styled_components18.css`
|
|
3047
3452
|
align-items: center;
|
|
3048
3453
|
background-color: transparent;
|
|
3049
3454
|
background-image: none;
|
|
@@ -3087,8 +3492,8 @@ var buttonResetCss = import_styled_components17.css`
|
|
|
3087
3492
|
`;
|
|
3088
3493
|
|
|
3089
3494
|
// src/components/Button/buttonStyles.tsx
|
|
3090
|
-
var
|
|
3091
|
-
var buttonSmallStyles =
|
|
3495
|
+
var import_styled_components19 = require("styled-components");
|
|
3496
|
+
var buttonSmallStyles = import_styled_components19.css`
|
|
3092
3497
|
--button-padding-vertical: var(--wui-space-01);
|
|
3093
3498
|
--button-padding-horizontal: var(--wui-space-02);
|
|
3094
3499
|
--button-label-padding-horizontal: var(--wui-space-01);
|
|
@@ -3099,7 +3504,7 @@ var buttonSmallStyles = import_styled_components18.css`
|
|
|
3099
3504
|
--button-icon-size: 12px;
|
|
3100
3505
|
--button-label-gap: 4px;
|
|
3101
3506
|
`;
|
|
3102
|
-
var buttonMediumStyles =
|
|
3507
|
+
var buttonMediumStyles = import_styled_components19.css`
|
|
3103
3508
|
--button-padding-vertical: var(--wui-space-02);
|
|
3104
3509
|
--button-padding-horizontal: var(--wui-space-02);
|
|
3105
3510
|
--button-label-padding-horizontal: 6px;
|
|
@@ -3110,7 +3515,7 @@ var buttonMediumStyles = import_styled_components18.css`
|
|
|
3110
3515
|
--button-icon-size: 16px;
|
|
3111
3516
|
--button-label-gap: 6px;
|
|
3112
3517
|
`;
|
|
3113
|
-
var buttonLargeStyles =
|
|
3518
|
+
var buttonLargeStyles = import_styled_components19.css`
|
|
3114
3519
|
--button-padding-vertical: var(--wui-space-02);
|
|
3115
3520
|
--button-padding-horizontal: var(--wui-space-02);
|
|
3116
3521
|
--button-label-padding-horizontal: var(--wui-space-02);
|
|
@@ -3121,7 +3526,7 @@ var buttonLargeStyles = import_styled_components18.css`
|
|
|
3121
3526
|
--button-icon-size: 24px;
|
|
3122
3527
|
--button-label-gap: 8px;
|
|
3123
3528
|
`;
|
|
3124
|
-
var buttonExtraLargeStyles =
|
|
3529
|
+
var buttonExtraLargeStyles = import_styled_components19.css`
|
|
3125
3530
|
--button-padding-vertical: var(--wui-space-03);
|
|
3126
3531
|
--button-padding-horizontal: var(--wui-space-03);
|
|
3127
3532
|
--button-label-padding-horizontal: var(--wui-space-02);
|
|
@@ -3132,34 +3537,34 @@ var buttonExtraLargeStyles = import_styled_components18.css`
|
|
|
3132
3537
|
--button-icon-size: 24px;
|
|
3133
3538
|
--button-label-gap: 8px;
|
|
3134
3539
|
`;
|
|
3135
|
-
var ghostButtonVariant =
|
|
3540
|
+
var ghostButtonVariant = import_styled_components19.css`
|
|
3136
3541
|
--button-color-bg-override: transparent;
|
|
3137
3542
|
--button-color-bg-hover: var(--wui-color-bg-surface-hover);
|
|
3138
3543
|
--button-color-bg-active: var(--wui-color-bg-surface-active);
|
|
3139
3544
|
--button-color-text: var(--wui-color-text-button);
|
|
3140
3545
|
--button-color-icon: var(--wui-color-icon);
|
|
3141
3546
|
`;
|
|
3142
|
-
var outlineButtonVariant =
|
|
3547
|
+
var outlineButtonVariant = import_styled_components19.css`
|
|
3143
3548
|
${ghostButtonVariant};
|
|
3144
3549
|
--button-color-border: var(--wui-color-border);
|
|
3145
3550
|
|
|
3146
3551
|
box-shadow: 0 0 0 2px var(--button-color-border) inset;
|
|
3147
3552
|
`;
|
|
3148
|
-
var softButtonVariant =
|
|
3553
|
+
var softButtonVariant = import_styled_components19.css`
|
|
3149
3554
|
--button-color-bg: var(--wui-color-bg-surface-secondary);
|
|
3150
3555
|
--button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
|
|
3151
3556
|
--button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
|
|
3152
3557
|
--button-color-text: var(--wui-color-text-button);
|
|
3153
3558
|
--button-color-icon: var(--wui-color-icon);
|
|
3154
3559
|
`;
|
|
3155
|
-
var solidButtonVariant =
|
|
3560
|
+
var solidButtonVariant = import_styled_components19.css`
|
|
3156
3561
|
--button-color-bg: var(--wui-color-bg-fill);
|
|
3157
3562
|
--button-color-bg-hover: var(--wui-color-bg-fill-hover);
|
|
3158
3563
|
--button-color-bg-active: var(--wui-color-bg-fill-active);
|
|
3159
3564
|
--button-color-text: var(--wui-color-text-on-fill);
|
|
3160
3565
|
--button-color-icon: var(--wui-color-icon-on-fill);
|
|
3161
3566
|
`;
|
|
3162
|
-
var disabledButtonVariant =
|
|
3567
|
+
var disabledButtonVariant = import_styled_components19.css`
|
|
3163
3568
|
--button-color-bg: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
|
|
3164
3569
|
--button-color-bg-hover: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
|
|
3165
3570
|
--button-color-bg-active: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
|
|
@@ -3167,7 +3572,7 @@ var disabledButtonVariant = import_styled_components18.css`
|
|
|
3167
3572
|
--button-color-icon: var(--wui-color-icon-disabled);
|
|
3168
3573
|
--button-color-border: var(--wui-color-border-disabled);
|
|
3169
3574
|
`;
|
|
3170
|
-
var pressedButtonVariant =
|
|
3575
|
+
var pressedButtonVariant = import_styled_components19.css`
|
|
3171
3576
|
--button-color-bg: var(--wui-color-bg-surface-selected);
|
|
3172
3577
|
--button-color-bg-hover: var(--wui-color-bg-surface-selected-hover);
|
|
3173
3578
|
--button-color-bg-active: var(--wui-color-bg-surface-selected-active);
|
|
@@ -3175,7 +3580,7 @@ var pressedButtonVariant = import_styled_components18.css`
|
|
|
3175
3580
|
--button-color-icon: var(--wui-color-icon-selected);
|
|
3176
3581
|
--button-color-border: var(--wui-color-border-selected);
|
|
3177
3582
|
`;
|
|
3178
|
-
var buttonBaseStyles =
|
|
3583
|
+
var buttonBaseStyles = import_styled_components19.css`
|
|
3179
3584
|
border-radius: var(--wui-border-radius-rounded);
|
|
3180
3585
|
font-family: var(--button-typography-family);
|
|
3181
3586
|
font-size: var(--button-typography-size);
|
|
@@ -3244,7 +3649,7 @@ var buttonSizeStyles = {
|
|
|
3244
3649
|
|
|
3245
3650
|
// src/components/Icon/Icon.tsx
|
|
3246
3651
|
var import_type_guards13 = require("@wistia/type-guards");
|
|
3247
|
-
var
|
|
3652
|
+
var import_styled_components20 = __toESM(require("styled-components"));
|
|
3248
3653
|
|
|
3249
3654
|
// src/components/Icon/icons/AbTestIcon.tsx
|
|
3250
3655
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
@@ -7226,7 +7631,7 @@ var iconSizeMap = {
|
|
|
7226
7631
|
xl: "32",
|
|
7227
7632
|
xxl: "48"
|
|
7228
7633
|
};
|
|
7229
|
-
var iconInlineStyle =
|
|
7634
|
+
var iconInlineStyle = import_styled_components20.css`
|
|
7230
7635
|
[data-wui-icon-inline] {
|
|
7231
7636
|
--wui-icon-inline-size: 0.8em;
|
|
7232
7637
|
--wui-icon-inline-offset: 0.05em;
|
|
@@ -7236,7 +7641,7 @@ var iconInlineStyle = import_styled_components19.css`
|
|
|
7236
7641
|
position: relative;
|
|
7237
7642
|
}
|
|
7238
7643
|
`;
|
|
7239
|
-
var StyledIcon =
|
|
7644
|
+
var StyledIcon = import_styled_components20.default.svg`
|
|
7240
7645
|
${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
|
|
7241
7646
|
--wui-icon-size: var(--wui-icon-inline-size, ${({ $height }) => $height}px);
|
|
7242
7647
|
--wui-icon-vertical-align: middle;
|
|
@@ -7294,7 +7699,7 @@ Icon.displayName = "Icon_UI";
|
|
|
7294
7699
|
|
|
7295
7700
|
// src/components/Link/Link.tsx
|
|
7296
7701
|
var import_react22 = require("react");
|
|
7297
|
-
var
|
|
7702
|
+
var import_styled_components21 = __toESM(require("styled-components"));
|
|
7298
7703
|
var import_react_router_dom = require("react-router-dom");
|
|
7299
7704
|
var import_type_guards14 = require("@wistia/type-guards");
|
|
7300
7705
|
var import_jsx_runtime197 = require("react/jsx-runtime");
|
|
@@ -7313,7 +7718,7 @@ var generateHref = (href, type, disabled) => {
|
|
|
7313
7718
|
};
|
|
7314
7719
|
var isButton = (props) => (0, import_type_guards14.isUndefined)(props.href);
|
|
7315
7720
|
var isLink = (props) => (0, import_type_guards14.isNotUndefined)(props.href);
|
|
7316
|
-
var StyledLink =
|
|
7721
|
+
var StyledLink = import_styled_components21.default.a`
|
|
7317
7722
|
${({ href }) => (0, import_type_guards14.isNil)(href) && buttonResetCss};
|
|
7318
7723
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
7319
7724
|
cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
|
|
@@ -7436,7 +7841,7 @@ Link.displayName = "Link_UI";
|
|
|
7436
7841
|
// src/components/Button/Button.tsx
|
|
7437
7842
|
var import_jsx_runtime198 = require("react/jsx-runtime");
|
|
7438
7843
|
var isLink2 = (props) => (0, import_type_guards15.isNotUndefined)(props.href);
|
|
7439
|
-
var StyledButton =
|
|
7844
|
+
var StyledButton = import_styled_components22.default.button`
|
|
7440
7845
|
${buttonResetCss}
|
|
7441
7846
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
7442
7847
|
${({ $size }) => buttonSizeStyles[$size]}
|
|
@@ -7445,7 +7850,7 @@ var StyledButton = import_styled_components21.default.button`
|
|
|
7445
7850
|
${({ $fullWidth }) => $fullWidth && "width: 100%;"}
|
|
7446
7851
|
text-align: center;
|
|
7447
7852
|
`;
|
|
7448
|
-
var StyledButtonContent =
|
|
7853
|
+
var StyledButtonContent = import_styled_components22.default.div`
|
|
7449
7854
|
align-items: center;
|
|
7450
7855
|
display: inline-flex;
|
|
7451
7856
|
flex-grow: 1;
|
|
@@ -7457,10 +7862,10 @@ var StyledButtonContent = import_styled_components21.default.div`
|
|
|
7457
7862
|
${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
|
|
7458
7863
|
${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
|
|
7459
7864
|
`;
|
|
7460
|
-
var StyledButtonContentLabel =
|
|
7865
|
+
var StyledButtonContentLabel = import_styled_components22.default.span`
|
|
7461
7866
|
flex: ${({ $fullWidth }) => $fullWidth ? "initial" : "1"};
|
|
7462
7867
|
`;
|
|
7463
|
-
var StyledButtonLoading =
|
|
7868
|
+
var StyledButtonLoading = import_styled_components22.default.div`
|
|
7464
7869
|
position: absolute;
|
|
7465
7870
|
display: flex;
|
|
7466
7871
|
`;
|
|
@@ -7577,7 +7982,7 @@ Button.displayName = "Button_UI";
|
|
|
7577
7982
|
|
|
7578
7983
|
// src/components/ActionButton/ActionButton.tsx
|
|
7579
7984
|
var import_jsx_runtime199 = require("react/jsx-runtime");
|
|
7580
|
-
var StyledActionButton = (0,
|
|
7985
|
+
var StyledActionButton = (0, import_styled_components23.default)(Button)`
|
|
7581
7986
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7582
7987
|
display: grid;
|
|
7583
7988
|
grid-template-columns: 24px 1fr;
|
|
@@ -7622,7 +8027,7 @@ var StyledActionButton = (0, import_styled_components22.default)(Button)`
|
|
|
7622
8027
|
}
|
|
7623
8028
|
}
|
|
7624
8029
|
`;
|
|
7625
|
-
var StyledMainIcon =
|
|
8030
|
+
var StyledMainIcon = import_styled_components23.default.div`
|
|
7626
8031
|
grid-column: 1;
|
|
7627
8032
|
grid-row: 1;
|
|
7628
8033
|
width: 24px;
|
|
@@ -7637,7 +8042,7 @@ var StyledMainIcon = import_styled_components22.default.div`
|
|
|
7637
8042
|
}
|
|
7638
8043
|
}
|
|
7639
8044
|
`;
|
|
7640
|
-
var StyledSecondaryIcon =
|
|
8045
|
+
var StyledSecondaryIcon = import_styled_components23.default.div`
|
|
7641
8046
|
grid-column: 2;
|
|
7642
8047
|
grid-row: 1;
|
|
7643
8048
|
width: 100%;
|
|
@@ -7645,7 +8050,7 @@ var StyledSecondaryIcon = import_styled_components22.default.div`
|
|
|
7645
8050
|
justify-content: flex-end;
|
|
7646
8051
|
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-out);
|
|
7647
8052
|
|
|
7648
|
-
${({ $hideUntilHover }) => $hideUntilHover &&
|
|
8053
|
+
${({ $hideUntilHover }) => $hideUntilHover && import_styled_components23.css`
|
|
7649
8054
|
will-change: transform;
|
|
7650
8055
|
opacity: 0;
|
|
7651
8056
|
transform: translateX(-16px);
|
|
@@ -7664,7 +8069,7 @@ var StyledSecondaryIcon = import_styled_components22.default.div`
|
|
|
7664
8069
|
}
|
|
7665
8070
|
}
|
|
7666
8071
|
`;
|
|
7667
|
-
var StyledLabel =
|
|
8072
|
+
var StyledLabel = import_styled_components23.default.span`
|
|
7668
8073
|
font-family: var(--wui-typography-heading-4-family);
|
|
7669
8074
|
font-size: var(--wui-typography-heading-4-size);
|
|
7670
8075
|
font-weight: var(--wui-typography-heading-4-weight);
|
|
@@ -7720,7 +8125,7 @@ ActionButton.displayName = "ActionButton_UI";
|
|
|
7720
8125
|
// src/components/Avatar/Avatar.tsx
|
|
7721
8126
|
var import_react25 = require("react");
|
|
7722
8127
|
var import_type_guards18 = require("@wistia/type-guards");
|
|
7723
|
-
var
|
|
8128
|
+
var import_styled_components26 = __toESM(require("styled-components"));
|
|
7724
8129
|
|
|
7725
8130
|
// src/components/Avatar/formatNameForDisplay.tsx
|
|
7726
8131
|
var import_type_guards16 = require("@wistia/type-guards");
|
|
@@ -7737,7 +8142,7 @@ var formatNameForDisplay = (name) => {
|
|
|
7737
8142
|
};
|
|
7738
8143
|
|
|
7739
8144
|
// src/components/Image/Image.tsx
|
|
7740
|
-
var
|
|
8145
|
+
var import_styled_components24 = __toESM(require("styled-components"));
|
|
7741
8146
|
var import_type_guards17 = require("@wistia/type-guards");
|
|
7742
8147
|
var import_jsx_runtime200 = require("react/jsx-runtime");
|
|
7743
8148
|
var getFillStyle = (fillContainer) => {
|
|
@@ -7755,7 +8160,7 @@ var getFillStyle = (fillContainer) => {
|
|
|
7755
8160
|
}
|
|
7756
8161
|
return void 0;
|
|
7757
8162
|
};
|
|
7758
|
-
var StyledImage =
|
|
8163
|
+
var StyledImage = import_styled_components24.default.img`
|
|
7759
8164
|
border-radius: ${({ $borderRadius }) => (0, import_type_guards17.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
|
|
7760
8165
|
${({ $fillContainer }) => getFillStyle($fillContainer)};
|
|
7761
8166
|
object-fit: ${({ $objFit }) => $objFit};
|
|
@@ -7790,7 +8195,7 @@ var Image = ({
|
|
|
7790
8195
|
Image.displayName = "Image_UI";
|
|
7791
8196
|
|
|
7792
8197
|
// src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
|
|
7793
|
-
var
|
|
8198
|
+
var import_styled_components25 = __toESM(require("styled-components"));
|
|
7794
8199
|
var import_jsx_runtime201 = require("react/jsx-runtime");
|
|
7795
8200
|
var defaultColorSchemeOptions = ["default", "inherit"];
|
|
7796
8201
|
var semanticColorSchemeOptions = ["error", "info", "success", "warning"];
|
|
@@ -7800,6 +8205,7 @@ var brandColorSchemeOptions = [
|
|
|
7800
8205
|
"orange",
|
|
7801
8206
|
"pink",
|
|
7802
8207
|
"purple",
|
|
8208
|
+
"red",
|
|
7803
8209
|
"yellow"
|
|
7804
8210
|
];
|
|
7805
8211
|
var vendorColorSchemeOptions = [
|
|
@@ -7813,7 +8219,7 @@ var colorSchemeOptions = [
|
|
|
7813
8219
|
...brandColorSchemeOptions,
|
|
7814
8220
|
...vendorColorSchemeOptions
|
|
7815
8221
|
];
|
|
7816
|
-
var StyledColorSchemeWrapper =
|
|
8222
|
+
var StyledColorSchemeWrapper = import_styled_components25.default.div`
|
|
7817
8223
|
${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
|
|
7818
8224
|
`;
|
|
7819
8225
|
var ColorSchemeWrapper = ({
|
|
@@ -7869,7 +8275,7 @@ var Initial = ({ initial }) => /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
|
|
|
7869
8275
|
]
|
|
7870
8276
|
}
|
|
7871
8277
|
);
|
|
7872
|
-
var AvatarWrapper =
|
|
8278
|
+
var AvatarWrapper = import_styled_components26.default.div`
|
|
7873
8279
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7874
8280
|
width: ${({ $heightAndWidth }) => $heightAndWidth}px;
|
|
7875
8281
|
height: ${({ $heightAndWidth }) => $heightAndWidth}px;
|
|
@@ -7971,10 +8377,10 @@ Avatar.displayName = "Avatar_UI";
|
|
|
7971
8377
|
|
|
7972
8378
|
// src/components/Badge/Badge.tsx
|
|
7973
8379
|
var import_react26 = require("react");
|
|
7974
|
-
var
|
|
8380
|
+
var import_styled_components27 = __toESM(require("styled-components"));
|
|
7975
8381
|
var import_type_guards19 = require("@wistia/type-guards");
|
|
7976
8382
|
var import_jsx_runtime203 = require("react/jsx-runtime");
|
|
7977
|
-
var StyledBadge =
|
|
8383
|
+
var StyledBadge = import_styled_components27.default.div`
|
|
7978
8384
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
7979
8385
|
align-items: center;
|
|
7980
8386
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -8023,12 +8429,12 @@ Badge.displayName = "Badge_UI";
|
|
|
8023
8429
|
|
|
8024
8430
|
// src/components/Banner/Banner.tsx
|
|
8025
8431
|
var import_react31 = require("react");
|
|
8026
|
-
var
|
|
8432
|
+
var import_styled_components33 = __toESM(require("styled-components"));
|
|
8027
8433
|
var import_type_guards24 = require("@wistia/type-guards");
|
|
8028
8434
|
|
|
8029
8435
|
// src/components/Box/Box.tsx
|
|
8030
8436
|
var import_react27 = require("react");
|
|
8031
|
-
var
|
|
8437
|
+
var import_styled_components28 = __toESM(require("styled-components"));
|
|
8032
8438
|
var import_type_guards20 = require("@wistia/type-guards");
|
|
8033
8439
|
|
|
8034
8440
|
// src/private/helpers/makePolymorphic/makePolymorphic.tsx
|
|
@@ -8084,34 +8490,34 @@ var getFlexStyle = (flexMode) => {
|
|
|
8084
8490
|
switch (flexMode) {
|
|
8085
8491
|
// grows to fill space, won't shrink, starts at 0
|
|
8086
8492
|
case "grow":
|
|
8087
|
-
return
|
|
8493
|
+
return import_styled_components28.css`
|
|
8088
8494
|
flex: 1 0 0;
|
|
8089
8495
|
`;
|
|
8090
8496
|
// default behavior, can shrink but won't grow
|
|
8091
8497
|
case "initial":
|
|
8092
|
-
return
|
|
8498
|
+
return import_styled_components28.css`
|
|
8093
8499
|
flex: 0 1 auto;
|
|
8094
8500
|
`;
|
|
8095
8501
|
// equal distribution of space
|
|
8096
8502
|
case "equal":
|
|
8097
|
-
return
|
|
8503
|
+
return import_styled_components28.css`
|
|
8098
8504
|
flex: 1;
|
|
8099
8505
|
`;
|
|
8100
8506
|
// won't grow or shrink
|
|
8101
8507
|
case "rigid":
|
|
8102
|
-
return
|
|
8508
|
+
return import_styled_components28.css`
|
|
8103
8509
|
flex: 0 0 auto;
|
|
8104
8510
|
`;
|
|
8105
8511
|
// can grow and shrink from content size
|
|
8106
8512
|
case "fluid":
|
|
8107
|
-
return
|
|
8513
|
+
return import_styled_components28.css`
|
|
8108
8514
|
flex: 1 1 auto;
|
|
8109
8515
|
`;
|
|
8110
8516
|
default:
|
|
8111
8517
|
return null;
|
|
8112
8518
|
}
|
|
8113
8519
|
};
|
|
8114
|
-
var StyledBoxComponent =
|
|
8520
|
+
var StyledBoxComponent = import_styled_components28.default.div`
|
|
8115
8521
|
/* properties meant for Box parent (flex container) */
|
|
8116
8522
|
align-content: ${({ $alignContent }) => $alignContent};
|
|
8117
8523
|
align-items: ${({ $alignItems }) => $alignItems};
|
|
@@ -8225,46 +8631,46 @@ var Box = makePolymorphic(BoxComponent);
|
|
|
8225
8631
|
|
|
8226
8632
|
// src/components/Heading/Heading.tsx
|
|
8227
8633
|
var import_react28 = require("react");
|
|
8228
|
-
var
|
|
8634
|
+
var import_styled_components29 = __toESM(require("styled-components"));
|
|
8229
8635
|
var import_type_guards21 = require("@wistia/type-guards");
|
|
8230
8636
|
var import_jsx_runtime205 = require("react/jsx-runtime");
|
|
8231
|
-
var heroStyle =
|
|
8637
|
+
var heroStyle = import_styled_components29.css`
|
|
8232
8638
|
--font-family: var(--wui-typography-heading-hero-family);
|
|
8233
8639
|
--font-size: var(--wui-typography-heading-hero-size);
|
|
8234
8640
|
--font-weight: var(--wui-typography-heading-hero-weight);
|
|
8235
8641
|
--line-height: var(--wui-typography-heading-hero-line-height);
|
|
8236
8642
|
`;
|
|
8237
|
-
var heading1TextStyle =
|
|
8643
|
+
var heading1TextStyle = import_styled_components29.css`
|
|
8238
8644
|
--font-family: var(--wui-typography-heading-1-family);
|
|
8239
8645
|
--font-size: var(--wui-typography-heading-1-size);
|
|
8240
8646
|
--font-weight: var(--wui-typography-heading-1-weight);
|
|
8241
8647
|
--line-height: var(--wui-typography-heading-1-line-height);
|
|
8242
8648
|
`;
|
|
8243
|
-
var heading2TextStyle =
|
|
8649
|
+
var heading2TextStyle = import_styled_components29.css`
|
|
8244
8650
|
--font-family: var(--wui-typography-heading-2-family);
|
|
8245
8651
|
--font-size: var(--wui-typography-heading-2-size);
|
|
8246
8652
|
--font-weight: var(--wui-typography-heading-2-weight);
|
|
8247
8653
|
--line-height: var(--wui-typography-heading-2-line-height);
|
|
8248
8654
|
`;
|
|
8249
|
-
var heading3TextStyle =
|
|
8655
|
+
var heading3TextStyle = import_styled_components29.css`
|
|
8250
8656
|
--font-family: var(--wui-typography-heading-3-family);
|
|
8251
8657
|
--font-size: var(--wui-typography-heading-3-size);
|
|
8252
8658
|
--font-weight: var(--wui-typography-heading-3-weight);
|
|
8253
8659
|
--line-height: var(--wui-typography-heading-3-line-height);
|
|
8254
8660
|
`;
|
|
8255
|
-
var heading4TextStyle =
|
|
8661
|
+
var heading4TextStyle = import_styled_components29.css`
|
|
8256
8662
|
--font-family: var(--wui-typography-heading-4-family);
|
|
8257
8663
|
--font-size: var(--wui-typography-heading-4-size);
|
|
8258
8664
|
--font-weight: var(--wui-typography-heading-4-weight);
|
|
8259
8665
|
--line-height: var(--wui-typography-heading-4-line-height);
|
|
8260
8666
|
`;
|
|
8261
|
-
var heading5TextStyle =
|
|
8667
|
+
var heading5TextStyle = import_styled_components29.css`
|
|
8262
8668
|
--font-family: var(--wui-typography-heading-5-family);
|
|
8263
8669
|
--font-size: var(--wui-typography-heading-5-size);
|
|
8264
8670
|
--font-weight: var(--wui-typography-heading-5-weight);
|
|
8265
8671
|
--line-height: var(--wui-typography-heading-5-line-height);
|
|
8266
8672
|
`;
|
|
8267
|
-
var heading6TextStyle =
|
|
8673
|
+
var heading6TextStyle = import_styled_components29.css`
|
|
8268
8674
|
--font-family: var(--wui-typography-heading-6-family);
|
|
8269
8675
|
--font-size: var(--wui-typography-heading-6-size);
|
|
8270
8676
|
--font-weight: var(--wui-typography-heading-6-weight);
|
|
@@ -8280,7 +8686,7 @@ var variantStyleMap = {
|
|
|
8280
8686
|
heading6: heading6TextStyle
|
|
8281
8687
|
};
|
|
8282
8688
|
var DEFAULT_ELEMENT2 = "h1";
|
|
8283
|
-
var StyledHeading =
|
|
8689
|
+
var StyledHeading = import_styled_components29.default.div`
|
|
8284
8690
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8285
8691
|
--text-color: ${({ $prominence, $disabled }) => {
|
|
8286
8692
|
if ($disabled) {
|
|
@@ -8303,20 +8709,20 @@ var StyledHeading = import_styled_components28.default.div`
|
|
|
8303
8709
|
${({ $variant }) => variantStyleMap[$variant]}
|
|
8304
8710
|
${({ $truncate }) => {
|
|
8305
8711
|
if ((0, import_type_guards21.isNotNil)($truncate)) {
|
|
8306
|
-
return
|
|
8712
|
+
return import_styled_components29.css`
|
|
8307
8713
|
${ellipsisStyle};
|
|
8308
8714
|
${lineClampCss($truncate)};
|
|
8309
8715
|
`;
|
|
8310
8716
|
}
|
|
8311
8717
|
return void 0;
|
|
8312
8718
|
}}
|
|
8313
|
-
${({ $inline }) => $inline &&
|
|
8719
|
+
${({ $inline }) => $inline && import_styled_components29.css`
|
|
8314
8720
|
display: inline-block;
|
|
8315
8721
|
`}
|
|
8316
|
-
${({ $preventUserSelect }) => $preventUserSelect &&
|
|
8722
|
+
${({ $preventUserSelect }) => $preventUserSelect && import_styled_components29.css`
|
|
8317
8723
|
user-select: none;
|
|
8318
8724
|
`}
|
|
8319
|
-
${({ $align }) =>
|
|
8725
|
+
${({ $align }) => import_styled_components29.css`
|
|
8320
8726
|
text-align: ${$align};
|
|
8321
8727
|
`}
|
|
8322
8728
|
margin: 0;
|
|
@@ -8366,10 +8772,10 @@ var Heading = makePolymorphic(HeadingComponent);
|
|
|
8366
8772
|
|
|
8367
8773
|
// src/components/Text/Text.tsx
|
|
8368
8774
|
var import_react29 = require("react");
|
|
8369
|
-
var
|
|
8775
|
+
var import_styled_components30 = __toESM(require("styled-components"));
|
|
8370
8776
|
var import_type_guards22 = require("@wistia/type-guards");
|
|
8371
8777
|
var import_jsx_runtime206 = require("react/jsx-runtime");
|
|
8372
|
-
var sharedBodyStyle =
|
|
8778
|
+
var sharedBodyStyle = import_styled_components30.css`
|
|
8373
8779
|
> strong,
|
|
8374
8780
|
b {
|
|
8375
8781
|
font-weight: var(--wui-typography-weight-body-bold);
|
|
@@ -8379,7 +8785,7 @@ var sharedBodyStyle = import_styled_components29.css`
|
|
|
8379
8785
|
font-weight: var(--wui-typography-weight-body-mark);
|
|
8380
8786
|
}
|
|
8381
8787
|
`;
|
|
8382
|
-
var labelBoldStyles =
|
|
8788
|
+
var labelBoldStyles = import_styled_components30.css`
|
|
8383
8789
|
> strong,
|
|
8384
8790
|
b {
|
|
8385
8791
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
@@ -8389,7 +8795,7 @@ var labelBoldStyles = import_styled_components29.css`
|
|
|
8389
8795
|
font-weight: var(--wui-typography-weight-label-mark);
|
|
8390
8796
|
}
|
|
8391
8797
|
`;
|
|
8392
|
-
var body1TextStyle =
|
|
8798
|
+
var body1TextStyle = import_styled_components30.css`
|
|
8393
8799
|
--font-family: var(--wui-typography-body-1-family);
|
|
8394
8800
|
--font-size: var(--wui-typography-body-1-size);
|
|
8395
8801
|
--font-weight: var(--wui-typography-body-1-weight);
|
|
@@ -8397,7 +8803,7 @@ var body1TextStyle = import_styled_components29.css`
|
|
|
8397
8803
|
--paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
|
|
8398
8804
|
${sharedBodyStyle}
|
|
8399
8805
|
`;
|
|
8400
|
-
var body2TextStyle =
|
|
8806
|
+
var body2TextStyle = import_styled_components30.css`
|
|
8401
8807
|
--font-family: var(--wui-typography-body-2-family);
|
|
8402
8808
|
--font-size: var(--wui-typography-body-2-size);
|
|
8403
8809
|
--font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -8405,7 +8811,7 @@ var body2TextStyle = import_styled_components29.css`
|
|
|
8405
8811
|
--paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
|
|
8406
8812
|
${sharedBodyStyle}
|
|
8407
8813
|
`;
|
|
8408
|
-
var body3TextStyle =
|
|
8814
|
+
var body3TextStyle = import_styled_components30.css`
|
|
8409
8815
|
--font-family: var(--wui-typography-body-3-family);
|
|
8410
8816
|
--font-size: var(--wui-typography-body-3-size);
|
|
8411
8817
|
--font-weight: var(--wui-typography-body-3-weight);
|
|
@@ -8413,7 +8819,7 @@ var body3TextStyle = import_styled_components29.css`
|
|
|
8413
8819
|
--paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
|
|
8414
8820
|
${sharedBodyStyle}
|
|
8415
8821
|
`;
|
|
8416
|
-
var body4TextStyle =
|
|
8822
|
+
var body4TextStyle = import_styled_components30.css`
|
|
8417
8823
|
--font-family: var(--wui-typography-body-4-family);
|
|
8418
8824
|
--font-size: var(--wui-typography-body-4-size);
|
|
8419
8825
|
--font-weight: var(--wui-typography-body-4-weight);
|
|
@@ -8421,47 +8827,47 @@ var body4TextStyle = import_styled_components29.css`
|
|
|
8421
8827
|
--paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
|
|
8422
8828
|
${sharedBodyStyle}
|
|
8423
8829
|
`;
|
|
8424
|
-
var label1TextStyle =
|
|
8830
|
+
var label1TextStyle = import_styled_components30.css`
|
|
8425
8831
|
--font-family: var(--wui-typography-label-1-family);
|
|
8426
8832
|
--font-size: var(--wui-typography-label-1-size);
|
|
8427
8833
|
--font-weight: var(--wui-typography-label-1-weight);
|
|
8428
8834
|
--line-height: var(--wui-typography-label-1-line-height);
|
|
8429
8835
|
${labelBoldStyles}
|
|
8430
8836
|
`;
|
|
8431
|
-
var label2TextStyle =
|
|
8837
|
+
var label2TextStyle = import_styled_components30.css`
|
|
8432
8838
|
--font-family: var(--wui-typography-label-2-family);
|
|
8433
8839
|
--font-size: var(--wui-typography-label-2-size);
|
|
8434
8840
|
--font-weight: var(--wui-typography-label-2-weight);
|
|
8435
8841
|
--line-height: var(--wui-typography-label-2-line-height);
|
|
8436
8842
|
${labelBoldStyles}
|
|
8437
8843
|
`;
|
|
8438
|
-
var label3TextStyle =
|
|
8844
|
+
var label3TextStyle = import_styled_components30.css`
|
|
8439
8845
|
--font-family: var(--wui-typography-label-3-family);
|
|
8440
8846
|
--font-size: var(--wui-typography-label-3-size);
|
|
8441
8847
|
--font-weight: var(--wui-typography-label-3-weight);
|
|
8442
8848
|
--line-height: var(--wui-typography-label-3-line-height);
|
|
8443
8849
|
${labelBoldStyles}
|
|
8444
8850
|
`;
|
|
8445
|
-
var label4TextStyle =
|
|
8851
|
+
var label4TextStyle = import_styled_components30.css`
|
|
8446
8852
|
--font-family: var(--wui-typography-label-4-family);
|
|
8447
8853
|
--font-size: var(--wui-typography-label-4-size);
|
|
8448
8854
|
--font-weight: var(--wui-typography-label-4-weight);
|
|
8449
8855
|
--line-height: var(--wui-typography-label-4-line-height);
|
|
8450
8856
|
${labelBoldStyles}
|
|
8451
8857
|
`;
|
|
8452
|
-
var body1MonoTextStyle =
|
|
8858
|
+
var body1MonoTextStyle = import_styled_components30.css`
|
|
8453
8859
|
${body1TextStyle};
|
|
8454
8860
|
--font-family: var(--wui-typography-family-mono);
|
|
8455
8861
|
`;
|
|
8456
|
-
var body2MonoTextStyle =
|
|
8862
|
+
var body2MonoTextStyle = import_styled_components30.css`
|
|
8457
8863
|
${body2TextStyle};
|
|
8458
8864
|
--font-family: var(--wui-typography-family-mono);
|
|
8459
8865
|
`;
|
|
8460
|
-
var body3MonoTextStyle =
|
|
8866
|
+
var body3MonoTextStyle = import_styled_components30.css`
|
|
8461
8867
|
${body3TextStyle};
|
|
8462
8868
|
--font-family: var(--wui-typography-family-mono);
|
|
8463
8869
|
`;
|
|
8464
|
-
var body4MonoTextStyle =
|
|
8870
|
+
var body4MonoTextStyle = import_styled_components30.css`
|
|
8465
8871
|
${body4TextStyle};
|
|
8466
8872
|
--font-family: var(--wui-typography-family-mono);
|
|
8467
8873
|
`;
|
|
@@ -8496,7 +8902,7 @@ var variantElementMap2 = {
|
|
|
8496
8902
|
label3: labelElement,
|
|
8497
8903
|
label4: labelElement
|
|
8498
8904
|
};
|
|
8499
|
-
var StyledText =
|
|
8905
|
+
var StyledText = import_styled_components30.default.div`
|
|
8500
8906
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8501
8907
|
--text-color: ${({ $prominence, $disabled }) => {
|
|
8502
8908
|
if ($disabled) {
|
|
@@ -8522,26 +8928,26 @@ var StyledText = import_styled_components29.default.div`
|
|
|
8522
8928
|
${({ $variant }) => variantStyleMap2[$variant]}
|
|
8523
8929
|
${({ $truncate }) => {
|
|
8524
8930
|
if ((0, import_type_guards22.isNotNil)($truncate)) {
|
|
8525
|
-
return
|
|
8931
|
+
return import_styled_components30.css`
|
|
8526
8932
|
${ellipsisStyle};
|
|
8527
8933
|
${lineClampCss($truncate)};
|
|
8528
8934
|
`;
|
|
8529
8935
|
}
|
|
8530
8936
|
return void 0;
|
|
8531
8937
|
}}
|
|
8532
|
-
${({ $inline }) => $inline &&
|
|
8938
|
+
${({ $inline }) => $inline && import_styled_components30.css`
|
|
8533
8939
|
display: inline-block;
|
|
8534
8940
|
`}
|
|
8535
|
-
${({ $disabled }) => $disabled &&
|
|
8941
|
+
${({ $disabled }) => $disabled && import_styled_components30.css`
|
|
8536
8942
|
--text-color: var(--wui-color-text-disabled);
|
|
8537
8943
|
`}
|
|
8538
|
-
${({ $preventUserSelect }) => $preventUserSelect &&
|
|
8944
|
+
${({ $preventUserSelect }) => $preventUserSelect && import_styled_components30.css`
|
|
8539
8945
|
user-select: none;
|
|
8540
8946
|
`}
|
|
8541
|
-
${({ $align }) =>
|
|
8947
|
+
${({ $align }) => import_styled_components30.css`
|
|
8542
8948
|
text-align: ${$align};
|
|
8543
8949
|
`}
|
|
8544
|
-
${({ as }) => as === "p" &&
|
|
8950
|
+
${({ as }) => as === "p" && import_styled_components30.css`
|
|
8545
8951
|
display: block;
|
|
8546
8952
|
|
|
8547
8953
|
+ p {
|
|
@@ -8584,7 +8990,7 @@ TextComponent.displayName = "Text_UI";
|
|
|
8584
8990
|
var Text = makePolymorphic(TextComponent);
|
|
8585
8991
|
|
|
8586
8992
|
// src/components/ButtonGroup/ButtonGroup.tsx
|
|
8587
|
-
var
|
|
8993
|
+
var import_styled_components31 = __toESM(require("styled-components"));
|
|
8588
8994
|
var import_type_guards23 = require("@wistia/type-guards");
|
|
8589
8995
|
var import_jsx_runtime207 = require("react/jsx-runtime");
|
|
8590
8996
|
var getAlignment = (align) => {
|
|
@@ -8599,7 +9005,7 @@ var getAlignment = (align) => {
|
|
|
8599
9005
|
}
|
|
8600
9006
|
return "flex-start";
|
|
8601
9007
|
};
|
|
8602
|
-
var ButtonGroupComponent =
|
|
9008
|
+
var ButtonGroupComponent = import_styled_components31.default.div`
|
|
8603
9009
|
display: flex;
|
|
8604
9010
|
|
|
8605
9011
|
/* this helps ensure that primary buttons appear at the top of the column */
|
|
@@ -8624,7 +9030,7 @@ var ButtonGroupComponent = import_styled_components30.default.div`
|
|
|
8624
9030
|
}
|
|
8625
9031
|
}
|
|
8626
9032
|
|
|
8627
|
-
${({ $buttonSize }) => $buttonSize !== "natural" &&
|
|
9033
|
+
${({ $buttonSize }) => $buttonSize !== "natural" && import_styled_components31.css`
|
|
8628
9034
|
button,
|
|
8629
9035
|
a {
|
|
8630
9036
|
${buttonSizeStyles[$buttonSize]}
|
|
@@ -8664,9 +9070,9 @@ ButtonGroup.displayName = "ButtonGroup_UI";
|
|
|
8664
9070
|
|
|
8665
9071
|
// src/components/IconButton/IconButton.tsx
|
|
8666
9072
|
var import_react30 = require("react");
|
|
8667
|
-
var
|
|
9073
|
+
var import_styled_components32 = __toESM(require("styled-components"));
|
|
8668
9074
|
var import_jsx_runtime208 = require("react/jsx-runtime");
|
|
8669
|
-
var StyledButton2 = (0,
|
|
9075
|
+
var StyledButton2 = (0, import_styled_components32.default)(Button)`
|
|
8670
9076
|
--icon-button-size-sm: 24px;
|
|
8671
9077
|
--icon-button-size-md: 32px;
|
|
8672
9078
|
--icon-button-size-lg: 40px;
|
|
@@ -8705,7 +9111,7 @@ var import_jsx_runtime209 = require("react/jsx-runtime");
|
|
|
8705
9111
|
var BREAKPOINT_WIDTH = 600;
|
|
8706
9112
|
var VERTICAL_BREAKPOINT_WIDTH = 284;
|
|
8707
9113
|
var MIN_IMAGE_WIDTH = 400;
|
|
8708
|
-
var StyledBanner =
|
|
9114
|
+
var StyledBanner = import_styled_components33.default.div`
|
|
8709
9115
|
--wui-banner-padding: var(--wui-space-04);
|
|
8710
9116
|
--wui-banner-content-height: ${({ $contentHeight }) => $contentHeight}px;
|
|
8711
9117
|
|
|
@@ -8865,9 +9271,9 @@ Banner.displayName = "Banner_UI";
|
|
|
8865
9271
|
|
|
8866
9272
|
// src/components/Breadcrumbs/Breadcrumbs.tsx
|
|
8867
9273
|
var import_react32 = require("react");
|
|
8868
|
-
var
|
|
9274
|
+
var import_styled_components34 = __toESM(require("styled-components"));
|
|
8869
9275
|
var import_jsx_runtime210 = require("react/jsx-runtime");
|
|
8870
|
-
var StyledBreadcrumbs =
|
|
9276
|
+
var StyledBreadcrumbs = import_styled_components34.default.nav`
|
|
8871
9277
|
display: flex;
|
|
8872
9278
|
align-items: center;
|
|
8873
9279
|
gap: var(--wui-space-01);
|
|
@@ -8912,9 +9318,9 @@ var Breadcrumbs = ({ children, ...props }) => {
|
|
|
8912
9318
|
Breadcrumbs.displayName = "Breadcrumbs_UI";
|
|
8913
9319
|
|
|
8914
9320
|
// src/components/Breadcrumbs/Breadcrumb.tsx
|
|
8915
|
-
var
|
|
9321
|
+
var import_styled_components35 = __toESM(require("styled-components"));
|
|
8916
9322
|
var import_jsx_runtime211 = require("react/jsx-runtime");
|
|
8917
|
-
var BreadcrumbContent =
|
|
9323
|
+
var BreadcrumbContent = import_styled_components35.default.span`
|
|
8918
9324
|
overflow: hidden;
|
|
8919
9325
|
white-space: nowrap;
|
|
8920
9326
|
display: block;
|
|
@@ -8946,9 +9352,9 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
|
|
|
8946
9352
|
};
|
|
8947
9353
|
|
|
8948
9354
|
// src/components/Card/Card.tsx
|
|
8949
|
-
var
|
|
9355
|
+
var import_styled_components36 = __toESM(require("styled-components"));
|
|
8950
9356
|
var import_jsx_runtime212 = require("react/jsx-runtime");
|
|
8951
|
-
var StyledCard = (0,
|
|
9357
|
+
var StyledCard = (0, import_styled_components36.default)(Box)`
|
|
8952
9358
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
8953
9359
|
box-sizing: border-box;
|
|
8954
9360
|
padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
|
|
@@ -9006,9 +9412,9 @@ Card.displayName = "Card_UI";
|
|
|
9006
9412
|
|
|
9007
9413
|
// src/components/Center/Center.tsx
|
|
9008
9414
|
var import_react33 = require("react");
|
|
9009
|
-
var
|
|
9415
|
+
var import_styled_components37 = __toESM(require("styled-components"));
|
|
9010
9416
|
var import_jsx_runtime213 = require("react/jsx-runtime");
|
|
9011
|
-
var StyledCenter =
|
|
9417
|
+
var StyledCenter = import_styled_components37.default.div`
|
|
9012
9418
|
box-sizing: border-box;
|
|
9013
9419
|
margin-left: auto;
|
|
9014
9420
|
margin-right: auto;
|
|
@@ -9038,18 +9444,18 @@ Center.displayName = "Center_UI";
|
|
|
9038
9444
|
// src/components/Checkbox/Checkbox.tsx
|
|
9039
9445
|
var import_type_guards31 = require("@wistia/type-guards");
|
|
9040
9446
|
var import_react38 = require("react");
|
|
9041
|
-
var
|
|
9447
|
+
var import_styled_components44 = __toESM(require("styled-components"));
|
|
9042
9448
|
|
|
9043
9449
|
// src/private/components/FormControlLabel/FormControlLabel.tsx
|
|
9044
9450
|
var import_type_guards27 = require("@wistia/type-guards");
|
|
9045
|
-
var
|
|
9451
|
+
var import_styled_components40 = __toESM(require("styled-components"));
|
|
9046
9452
|
|
|
9047
9453
|
// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
|
|
9048
|
-
var
|
|
9454
|
+
var import_styled_components38 = __toESM(require("styled-components"));
|
|
9049
9455
|
var import_type_guards25 = require("@wistia/type-guards");
|
|
9050
9456
|
var import_jsx_runtime214 = require("react/jsx-runtime");
|
|
9051
|
-
var VisuallyHidden =
|
|
9052
|
-
var VisuallyHiddenButFocusable =
|
|
9457
|
+
var VisuallyHidden = import_styled_components38.default.div({ ...visuallyHiddenStyle });
|
|
9458
|
+
var VisuallyHiddenButFocusable = import_styled_components38.default.div({
|
|
9053
9459
|
"&:not(:focus-within)": visuallyHiddenStyle
|
|
9054
9460
|
});
|
|
9055
9461
|
var ScreenReaderOnly = ({
|
|
@@ -9067,13 +9473,13 @@ var ScreenReaderOnly = ({
|
|
|
9067
9473
|
ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
|
|
9068
9474
|
|
|
9069
9475
|
// src/private/components/FormControlLabel/FormControlLabelDescription.tsx
|
|
9070
|
-
var
|
|
9476
|
+
var import_styled_components39 = __toESM(require("styled-components"));
|
|
9071
9477
|
var import_type_guards26 = require("@wistia/type-guards");
|
|
9072
9478
|
var import_jsx_runtime215 = require("react/jsx-runtime");
|
|
9073
|
-
var disabledStyle =
|
|
9479
|
+
var disabledStyle = import_styled_components39.css`
|
|
9074
9480
|
color: var(--wui-color-text-disabled);
|
|
9075
9481
|
`;
|
|
9076
|
-
var StyledFormControlLabelDescription =
|
|
9482
|
+
var StyledFormControlLabelDescription = import_styled_components39.default.div`
|
|
9077
9483
|
color: var(--wui-color-text-secondary);
|
|
9078
9484
|
display: block;
|
|
9079
9485
|
font-size: var(--wui-typography-body-4-size);
|
|
@@ -9103,15 +9509,15 @@ FormControlLabelDescription.displayName = "FormControlLabelDescription";
|
|
|
9103
9509
|
|
|
9104
9510
|
// src/private/components/FormControlLabel/FormControlLabel.tsx
|
|
9105
9511
|
var import_jsx_runtime216 = require("react/jsx-runtime");
|
|
9106
|
-
var disabledStyle2 =
|
|
9512
|
+
var disabledStyle2 = import_styled_components40.css`
|
|
9107
9513
|
cursor: not-allowed;
|
|
9108
9514
|
color: var(--wui-color-text-disabled);
|
|
9109
9515
|
`;
|
|
9110
|
-
var StyledLabelWrapper =
|
|
9516
|
+
var StyledLabelWrapper = import_styled_components40.default.div`
|
|
9111
9517
|
display: flex;
|
|
9112
9518
|
flex-direction: column;
|
|
9113
9519
|
`;
|
|
9114
|
-
var StyledFormControlLabel =
|
|
9520
|
+
var StyledFormControlLabel = import_styled_components40.default.label`
|
|
9115
9521
|
cursor: pointer;
|
|
9116
9522
|
display: flex;
|
|
9117
9523
|
align-items: flex-start;
|
|
@@ -9164,16 +9570,16 @@ var import_react37 = require("react");
|
|
|
9164
9570
|
var import_type_guards30 = require("@wistia/type-guards");
|
|
9165
9571
|
|
|
9166
9572
|
// src/components/FormGroup/FormGroup.tsx
|
|
9167
|
-
var
|
|
9573
|
+
var import_styled_components42 = __toESM(require("styled-components"));
|
|
9168
9574
|
var import_react35 = require("react");
|
|
9169
9575
|
var import_type_guards28 = require("@wistia/type-guards");
|
|
9170
9576
|
|
|
9171
9577
|
// src/components/Stack/Stack.tsx
|
|
9172
9578
|
var import_react34 = require("react");
|
|
9173
|
-
var
|
|
9579
|
+
var import_styled_components41 = __toESM(require("styled-components"));
|
|
9174
9580
|
var import_jsx_runtime217 = require("react/jsx-runtime");
|
|
9175
9581
|
var DEFAULT_ELEMENT4 = "div";
|
|
9176
|
-
var StyledStack =
|
|
9582
|
+
var StyledStack = import_styled_components41.default.div`
|
|
9177
9583
|
display: flex;
|
|
9178
9584
|
flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
|
|
9179
9585
|
gap: ${({ $gap }) => `var(--wui-${$gap})`};
|
|
@@ -9202,12 +9608,12 @@ var Stack = makePolymorphic(StackComponent);
|
|
|
9202
9608
|
|
|
9203
9609
|
// src/components/FormGroup/FormGroup.tsx
|
|
9204
9610
|
var import_jsx_runtime218 = require("react/jsx-runtime");
|
|
9205
|
-
var StyledFieldset =
|
|
9611
|
+
var StyledFieldset = import_styled_components42.default.fieldset`
|
|
9206
9612
|
padding: 0;
|
|
9207
9613
|
margin: 0;
|
|
9208
9614
|
border: 0;
|
|
9209
9615
|
`;
|
|
9210
|
-
var StyledLegend =
|
|
9616
|
+
var StyledLegend = import_styled_components42.default.legend`
|
|
9211
9617
|
padding-inline: 0;
|
|
9212
9618
|
display: flex;
|
|
9213
9619
|
flex-direction: column;
|
|
@@ -9259,7 +9665,7 @@ FormGroup.displayName = "FormGroup_UI";
|
|
|
9259
9665
|
|
|
9260
9666
|
// src/components/Form/Form.tsx
|
|
9261
9667
|
var import_react36 = require("react");
|
|
9262
|
-
var
|
|
9668
|
+
var import_styled_components43 = __toESM(require("styled-components"));
|
|
9263
9669
|
var import_type_guards29 = require("@wistia/type-guards");
|
|
9264
9670
|
|
|
9265
9671
|
// src/components/Form/serializeFormData.tsx
|
|
@@ -9279,7 +9685,7 @@ var serializeFormData = (formData) => {
|
|
|
9279
9685
|
|
|
9280
9686
|
// src/components/Form/Form.tsx
|
|
9281
9687
|
var import_jsx_runtime219 = require("react/jsx-runtime");
|
|
9282
|
-
var StyledForm =
|
|
9688
|
+
var StyledForm = import_styled_components43.default.form`
|
|
9283
9689
|
--form-default-width: 690px;
|
|
9284
9690
|
|
|
9285
9691
|
max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
|
|
@@ -9423,15 +9829,15 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
|
|
|
9423
9829
|
)
|
|
9424
9830
|
}
|
|
9425
9831
|
);
|
|
9426
|
-
var sizeSmall =
|
|
9832
|
+
var sizeSmall = import_styled_components44.css`
|
|
9427
9833
|
--wui-checkbox-size: 14px;
|
|
9428
9834
|
--wui-checkbox-icon-size: 7px;
|
|
9429
9835
|
`;
|
|
9430
|
-
var sizeMedium =
|
|
9836
|
+
var sizeMedium = import_styled_components44.css`
|
|
9431
9837
|
--wui-checkbox-size: 16px;
|
|
9432
9838
|
--wui-checkbox-icon-size: 9px;
|
|
9433
9839
|
`;
|
|
9434
|
-
var sizeLarge =
|
|
9840
|
+
var sizeLarge = import_styled_components44.css`
|
|
9435
9841
|
--wui-checkbox-size: 20px;
|
|
9436
9842
|
--wui-checkbox-icon-size: 11px;
|
|
9437
9843
|
`;
|
|
@@ -9440,7 +9846,7 @@ var getSizeCss = (size) => {
|
|
|
9440
9846
|
if (size === "lg") return sizeLarge;
|
|
9441
9847
|
return sizeMedium;
|
|
9442
9848
|
};
|
|
9443
|
-
var StyledCheckboxWrapper =
|
|
9849
|
+
var StyledCheckboxWrapper = import_styled_components44.default.div`
|
|
9444
9850
|
--wui-checkbox-background-color: var(--wui-color-bg-surface);
|
|
9445
9851
|
--wui-checkbox-border-color: var(--wui-color-border-secondary);
|
|
9446
9852
|
--wui-checkbox-icon-color: transparent;
|
|
@@ -9477,7 +9883,7 @@ var StyledCheckboxWrapper = import_styled_components43.default.div`
|
|
|
9477
9883
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
9478
9884
|
user-select: none;
|
|
9479
9885
|
`;
|
|
9480
|
-
var StyledCheckboxInput =
|
|
9886
|
+
var StyledCheckboxInput = import_styled_components44.default.div`
|
|
9481
9887
|
${({ $size }) => getSizeCss($size)}
|
|
9482
9888
|
margin: 0;
|
|
9483
9889
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -9504,7 +9910,7 @@ var StyledCheckboxInput = import_styled_components43.default.div`
|
|
|
9504
9910
|
height: var(--wui-checkbox-icon-size);
|
|
9505
9911
|
}
|
|
9506
9912
|
`;
|
|
9507
|
-
var StyledHiddenCheckboxInput =
|
|
9913
|
+
var StyledHiddenCheckboxInput = import_styled_components44.default.input`
|
|
9508
9914
|
${visuallyHiddenStyle}
|
|
9509
9915
|
position: relative;
|
|
9510
9916
|
`;
|
|
@@ -9625,9 +10031,9 @@ ClickRegion.displayName = "ClickRegion_UI";
|
|
|
9625
10031
|
// src/components/Collapsible/Collapsible.tsx
|
|
9626
10032
|
var import_react_collapsible = require("@radix-ui/react-collapsible");
|
|
9627
10033
|
var import_type_guards32 = require("@wistia/type-guards");
|
|
9628
|
-
var
|
|
10034
|
+
var import_styled_components45 = __toESM(require("styled-components"));
|
|
9629
10035
|
var import_jsx_runtime222 = require("react/jsx-runtime");
|
|
9630
|
-
var StyledRoot = (0,
|
|
10036
|
+
var StyledRoot = (0, import_styled_components45.default)(import_react_collapsible.Root)`
|
|
9631
10037
|
&[data-state='closed'] [data-wui-collapsible-content] {
|
|
9632
10038
|
display: -webkit-box;
|
|
9633
10039
|
-webkit-box-orient: vertical;
|
|
@@ -9650,9 +10056,9 @@ Collapsible.displayName = "Collapsible_UI";
|
|
|
9650
10056
|
// src/components/Collapsible/CollapsibleTrigger.tsx
|
|
9651
10057
|
var import_react40 = require("react");
|
|
9652
10058
|
var import_react_collapsible2 = require("@radix-ui/react-collapsible");
|
|
9653
|
-
var
|
|
10059
|
+
var import_styled_components46 = __toESM(require("styled-components"));
|
|
9654
10060
|
var import_jsx_runtime223 = require("react/jsx-runtime");
|
|
9655
|
-
var StyledTrigger = (0,
|
|
10061
|
+
var StyledTrigger = (0, import_styled_components46.default)(import_react_collapsible2.Trigger)`
|
|
9656
10062
|
[data-wui-collapsible-icon] {
|
|
9657
10063
|
transition: transform var(--wui-motion-duration-03) ease-in-out;
|
|
9658
10064
|
}
|
|
@@ -9701,11 +10107,11 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
|
|
|
9701
10107
|
CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
|
|
9702
10108
|
|
|
9703
10109
|
// src/components/Collapsible/CollapsibleContent.tsx
|
|
9704
|
-
var
|
|
10110
|
+
var import_styled_components47 = __toESM(require("styled-components"));
|
|
9705
10111
|
var import_react_collapsible3 = require("@radix-ui/react-collapsible");
|
|
9706
10112
|
var import_type_guards33 = require("@wistia/type-guards");
|
|
9707
10113
|
var import_jsx_runtime225 = require("react/jsx-runtime");
|
|
9708
|
-
var ClampedContent =
|
|
10114
|
+
var ClampedContent = import_styled_components47.default.div`
|
|
9709
10115
|
--wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
|
|
9710
10116
|
`;
|
|
9711
10117
|
var CollapsibleContent = ({ clamp, children }) => {
|
|
@@ -9727,7 +10133,7 @@ var CollapsibleContent = ({ clamp, children }) => {
|
|
|
9727
10133
|
|
|
9728
10134
|
// src/components/ColorPicker/ColorGrid.tsx
|
|
9729
10135
|
var import_react42 = require("react");
|
|
9730
|
-
var
|
|
10136
|
+
var import_styled_components49 = __toESM(require("styled-components"));
|
|
9731
10137
|
var import_react_radio_group = require("@radix-ui/react-radio-group");
|
|
9732
10138
|
|
|
9733
10139
|
// src/components/ColorPicker/ColorPickerContext.tsx
|
|
@@ -10271,9 +10677,9 @@ var useColorPickerState = () => {
|
|
|
10271
10677
|
};
|
|
10272
10678
|
|
|
10273
10679
|
// src/components/Label/Label.tsx
|
|
10274
|
-
var
|
|
10680
|
+
var import_styled_components48 = __toESM(require("styled-components"));
|
|
10275
10681
|
var import_jsx_runtime227 = require("react/jsx-runtime");
|
|
10276
|
-
var requiredStyle =
|
|
10682
|
+
var requiredStyle = import_styled_components48.css`
|
|
10277
10683
|
&::after {
|
|
10278
10684
|
color: var(--wui-color-text-error);
|
|
10279
10685
|
display: inline;
|
|
@@ -10281,10 +10687,10 @@ var requiredStyle = import_styled_components47.css`
|
|
|
10281
10687
|
content: '*';
|
|
10282
10688
|
}
|
|
10283
10689
|
`;
|
|
10284
|
-
var disabledStyle3 =
|
|
10690
|
+
var disabledStyle3 = import_styled_components48.css`
|
|
10285
10691
|
color: var(--wui-color-text-disabled);
|
|
10286
10692
|
`;
|
|
10287
|
-
var StyledLabel2 =
|
|
10693
|
+
var StyledLabel2 = import_styled_components48.default.label`
|
|
10288
10694
|
display: block;
|
|
10289
10695
|
width: 100%;
|
|
10290
10696
|
color: var(--wui-color-text);
|
|
@@ -10332,15 +10738,15 @@ Label.displayName = "Label_UI";
|
|
|
10332
10738
|
|
|
10333
10739
|
// src/components/ColorPicker/ColorGrid.tsx
|
|
10334
10740
|
var import_jsx_runtime228 = require("react/jsx-runtime");
|
|
10335
|
-
var Container =
|
|
10741
|
+
var Container = import_styled_components49.default.div`
|
|
10336
10742
|
display: grid;
|
|
10337
10743
|
gap: var(--wui-space-01);
|
|
10338
10744
|
grid-template-columns: minmax(0, 1fr);
|
|
10339
10745
|
`;
|
|
10340
|
-
var LabelContainer =
|
|
10746
|
+
var LabelContainer = import_styled_components49.default.div`
|
|
10341
10747
|
padding-top: var(--wui-space-01);
|
|
10342
10748
|
`;
|
|
10343
|
-
var ItemsContainer = (0,
|
|
10749
|
+
var ItemsContainer = (0, import_styled_components49.default)(import_react_radio_group.Root)`
|
|
10344
10750
|
display: flex;
|
|
10345
10751
|
flex-wrap: wrap;
|
|
10346
10752
|
align-items: center;
|
|
@@ -10372,14 +10778,14 @@ var ColorGrid = ({ children, label }) => {
|
|
|
10372
10778
|
ColorGrid.displayName = "ColorGrid_UI";
|
|
10373
10779
|
|
|
10374
10780
|
// src/components/ColorPicker/ColorGridOption.tsx
|
|
10375
|
-
var
|
|
10781
|
+
var import_styled_components52 = __toESM(require("styled-components"));
|
|
10376
10782
|
var import_react_radio_group2 = require("@radix-ui/react-radio-group");
|
|
10377
10783
|
var import_fn5 = require("culori/fn");
|
|
10378
10784
|
|
|
10379
10785
|
// src/components/ColorPicker/ColorSwatch.tsx
|
|
10380
|
-
var
|
|
10786
|
+
var import_styled_components50 = __toESM(require("styled-components"));
|
|
10381
10787
|
var import_jsx_runtime229 = require("react/jsx-runtime");
|
|
10382
|
-
var ColorSwatchDiv =
|
|
10788
|
+
var ColorSwatchDiv = import_styled_components50.default.div`
|
|
10383
10789
|
aspect-ratio: 1;
|
|
10384
10790
|
width: ${({ $diameterPx }) => `${$diameterPx}px`};
|
|
10385
10791
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -10398,7 +10804,7 @@ var ColorSwatchDiv = import_styled_components49.default.div`
|
|
|
10398
10804
|
outline-offset: 2px;
|
|
10399
10805
|
transform: ${({ $selected }) => $selected ? "scale(0.9)" : "scale(1)"};
|
|
10400
10806
|
`;
|
|
10401
|
-
var DerivativeHalfCircle =
|
|
10807
|
+
var DerivativeHalfCircle = import_styled_components50.default.div`
|
|
10402
10808
|
position: absolute;
|
|
10403
10809
|
right: 0;
|
|
10404
10810
|
top: 0;
|
|
@@ -10435,9 +10841,9 @@ var ColorSwatch = ({
|
|
|
10435
10841
|
|
|
10436
10842
|
// src/components/Tooltip/Tooltip.tsx
|
|
10437
10843
|
var import_react_tooltip2 = require("@radix-ui/react-tooltip");
|
|
10438
|
-
var
|
|
10844
|
+
var import_styled_components51 = __toESM(require("styled-components"));
|
|
10439
10845
|
var import_jsx_runtime230 = require("react/jsx-runtime");
|
|
10440
|
-
var hide =
|
|
10846
|
+
var hide = import_styled_components51.keyframes`
|
|
10441
10847
|
from {
|
|
10442
10848
|
opacity: 1;
|
|
10443
10849
|
}
|
|
@@ -10445,7 +10851,7 @@ var hide = import_styled_components50.keyframes`
|
|
|
10445
10851
|
opacity: 0;
|
|
10446
10852
|
}
|
|
10447
10853
|
`;
|
|
10448
|
-
var slideDownAndFade =
|
|
10854
|
+
var slideDownAndFade = import_styled_components51.keyframes`
|
|
10449
10855
|
from {
|
|
10450
10856
|
opacity: 0;
|
|
10451
10857
|
transform: translateY(-6px);
|
|
@@ -10455,7 +10861,7 @@ var slideDownAndFade = import_styled_components50.keyframes`
|
|
|
10455
10861
|
transform: translateY(0);
|
|
10456
10862
|
}
|
|
10457
10863
|
`;
|
|
10458
|
-
var slideLeftAndFade =
|
|
10864
|
+
var slideLeftAndFade = import_styled_components51.keyframes`
|
|
10459
10865
|
from {
|
|
10460
10866
|
opacity: 0;
|
|
10461
10867
|
transform: translateX(6px);
|
|
@@ -10465,7 +10871,7 @@ var slideLeftAndFade = import_styled_components50.keyframes`
|
|
|
10465
10871
|
transform: translateX(0);
|
|
10466
10872
|
}
|
|
10467
10873
|
`;
|
|
10468
|
-
var slideUpAndFade =
|
|
10874
|
+
var slideUpAndFade = import_styled_components51.keyframes`
|
|
10469
10875
|
from {
|
|
10470
10876
|
opacity: 0;
|
|
10471
10877
|
transform: translateY(6px);
|
|
@@ -10475,7 +10881,7 @@ var slideUpAndFade = import_styled_components50.keyframes`
|
|
|
10475
10881
|
transform: translateY(0);
|
|
10476
10882
|
}
|
|
10477
10883
|
`;
|
|
10478
|
-
var slideRightAndFade =
|
|
10884
|
+
var slideRightAndFade = import_styled_components51.keyframes`
|
|
10479
10885
|
from {
|
|
10480
10886
|
opacity: 0;
|
|
10481
10887
|
transform: translateX(-6px);
|
|
@@ -10485,7 +10891,7 @@ var slideRightAndFade = import_styled_components50.keyframes`
|
|
|
10485
10891
|
transform: translateX(0);
|
|
10486
10892
|
}
|
|
10487
10893
|
`;
|
|
10488
|
-
var StyledContent = (0,
|
|
10894
|
+
var StyledContent = (0, import_styled_components51.default)(import_react_tooltip2.Content)`
|
|
10489
10895
|
--tooltip-font-family: var(--wui-typography-family-default);
|
|
10490
10896
|
--tooltip-border-radius: var(--wui-border-radius-05);
|
|
10491
10897
|
--tooltip-bg: var(--wui-color-bg-tooltip);
|
|
@@ -10585,7 +10991,7 @@ Tooltip.displayName = "Tooltip_UI";
|
|
|
10585
10991
|
|
|
10586
10992
|
// src/components/ColorPicker/ColorGridOption.tsx
|
|
10587
10993
|
var import_jsx_runtime231 = require("react/jsx-runtime");
|
|
10588
|
-
var Container2 = (0,
|
|
10994
|
+
var Container2 = (0, import_styled_components52.default)(import_react_radio_group2.Item)`
|
|
10589
10995
|
border: none;
|
|
10590
10996
|
appearance: none;
|
|
10591
10997
|
outline: none;
|
|
@@ -10630,10 +11036,10 @@ ColorGridOption.displayName = "ColorGridOption_UI";
|
|
|
10630
11036
|
|
|
10631
11037
|
// src/components/ColorPicker/ColorList.tsx
|
|
10632
11038
|
var import_react43 = require("react");
|
|
10633
|
-
var
|
|
11039
|
+
var import_styled_components53 = __toESM(require("styled-components"));
|
|
10634
11040
|
var import_react_toggle_group = require("@radix-ui/react-toggle-group");
|
|
10635
11041
|
var import_jsx_runtime232 = require("react/jsx-runtime");
|
|
10636
|
-
var Container3 = (0,
|
|
11042
|
+
var Container3 = (0, import_styled_components53.default)(import_react_toggle_group.Root)`
|
|
10637
11043
|
display: grid;
|
|
10638
11044
|
grid-template-columns: minmax(0, 1fr);
|
|
10639
11045
|
`;
|
|
@@ -10662,18 +11068,18 @@ var ColorList = ({ children }) => {
|
|
|
10662
11068
|
ColorList.displayName = "ColorList_UI";
|
|
10663
11069
|
|
|
10664
11070
|
// src/components/ColorPicker/ColorListGroup.tsx
|
|
10665
|
-
var
|
|
11071
|
+
var import_styled_components54 = __toESM(require("styled-components"));
|
|
10666
11072
|
var import_jsx_runtime233 = require("react/jsx-runtime");
|
|
10667
|
-
var Container4 =
|
|
11073
|
+
var Container4 = import_styled_components54.default.div`
|
|
10668
11074
|
display: grid;
|
|
10669
11075
|
gap: var(--wui-space-01);
|
|
10670
11076
|
grid-template-columns: minmax(0, 1fr);
|
|
10671
11077
|
`;
|
|
10672
|
-
var ItemsContainer2 =
|
|
11078
|
+
var ItemsContainer2 = import_styled_components54.default.div`
|
|
10673
11079
|
display: flex;
|
|
10674
11080
|
flex-direction: column;
|
|
10675
11081
|
`;
|
|
10676
|
-
var LabelContainer2 =
|
|
11082
|
+
var LabelContainer2 = import_styled_components54.default.div`
|
|
10677
11083
|
padding-top: var(--wui-space-01);
|
|
10678
11084
|
`;
|
|
10679
11085
|
var ColorListGroup = ({ label, children }) => {
|
|
@@ -10692,7 +11098,7 @@ var ColorListGroup = ({ label, children }) => {
|
|
|
10692
11098
|
ColorListGroup.displayName = "ColorListGroup_UI";
|
|
10693
11099
|
|
|
10694
11100
|
// src/components/ColorPicker/ColorListOption.tsx
|
|
10695
|
-
var
|
|
11101
|
+
var import_styled_components55 = __toESM(require("styled-components"));
|
|
10696
11102
|
var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
|
|
10697
11103
|
var import_fn6 = require("culori/fn");
|
|
10698
11104
|
|
|
@@ -10731,7 +11137,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
|
|
|
10731
11137
|
|
|
10732
11138
|
// src/components/ColorPicker/ColorListOption.tsx
|
|
10733
11139
|
var import_jsx_runtime235 = require("react/jsx-runtime");
|
|
10734
|
-
var Container5 = (0,
|
|
11140
|
+
var Container5 = (0, import_styled_components55.default)(import_react_toggle_group2.Item)`
|
|
10735
11141
|
border: none;
|
|
10736
11142
|
appearance: none;
|
|
10737
11143
|
outline: none;
|
|
@@ -10816,9 +11222,9 @@ ColorPicker.displayName = "ColorPicker_UI";
|
|
|
10816
11222
|
|
|
10817
11223
|
// src/components/ColorPicker/ColorPickerPopoverContent.tsx
|
|
10818
11224
|
var import_react_popover2 = require("@radix-ui/react-popover");
|
|
10819
|
-
var
|
|
11225
|
+
var import_styled_components56 = __toESM(require("styled-components"));
|
|
10820
11226
|
var import_jsx_runtime237 = require("react/jsx-runtime");
|
|
10821
|
-
var StyledPopoverContent = (0,
|
|
11227
|
+
var StyledPopoverContent = (0, import_styled_components56.default)(import_react_popover2.Content)`
|
|
10822
11228
|
background-color: var(--wui-color-bg-surface);
|
|
10823
11229
|
border-radius: var(--wui-border-radius-02);
|
|
10824
11230
|
border: 1px solid var(--wui-color-border);
|
|
@@ -10845,9 +11251,9 @@ var ColorPickerPopoverContent = ({
|
|
|
10845
11251
|
ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
|
|
10846
11252
|
|
|
10847
11253
|
// src/components/ColorPicker/ColorPickerSection.tsx
|
|
10848
|
-
var
|
|
11254
|
+
var import_styled_components57 = __toESM(require("styled-components"));
|
|
10849
11255
|
var import_jsx_runtime238 = require("react/jsx-runtime");
|
|
10850
|
-
var Container6 =
|
|
11256
|
+
var Container6 = import_styled_components57.default.div`
|
|
10851
11257
|
padding: var(--wui-space-02);
|
|
10852
11258
|
`;
|
|
10853
11259
|
var ColorPickerSection = ({ children }) => {
|
|
@@ -10858,7 +11264,7 @@ ColorPickerSection.displayName = "ColorPickerSection_UI";
|
|
|
10858
11264
|
// src/components/ColorPicker/ColorPickerTrigger.tsx
|
|
10859
11265
|
var import_react44 = require("react");
|
|
10860
11266
|
var import_react_popover3 = require("@radix-ui/react-popover");
|
|
10861
|
-
var
|
|
11267
|
+
var import_styled_components58 = __toESM(require("styled-components"));
|
|
10862
11268
|
|
|
10863
11269
|
// src/components/ColorPicker/ValueSwatch.tsx
|
|
10864
11270
|
var import_jsx_runtime239 = require("react/jsx-runtime");
|
|
@@ -10878,7 +11284,7 @@ ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
|
|
|
10878
11284
|
|
|
10879
11285
|
// src/components/ColorPicker/ColorPickerTrigger.tsx
|
|
10880
11286
|
var import_jsx_runtime241 = require("react/jsx-runtime");
|
|
10881
|
-
var StyledPopoverTrigger = (0,
|
|
11287
|
+
var StyledPopoverTrigger = (0, import_styled_components58.default)(import_react_popover3.Trigger)`
|
|
10882
11288
|
background-color: var(--wui-color-bg-surface);
|
|
10883
11289
|
border-radius: var(--wui-border-radius-rounded);
|
|
10884
11290
|
border: 1px solid var(--wui-color-border);
|
|
@@ -10889,7 +11295,7 @@ var StyledPopoverTrigger = (0, import_styled_components57.default)(import_react_
|
|
|
10889
11295
|
background-color: var(--wui-color-bg-surface-hover);
|
|
10890
11296
|
}
|
|
10891
11297
|
`;
|
|
10892
|
-
var DefaultTriggerContentContainer =
|
|
11298
|
+
var DefaultTriggerContentContainer = import_styled_components58.default.div`
|
|
10893
11299
|
align-items: center;
|
|
10894
11300
|
display: flex;
|
|
10895
11301
|
flex-direction: row;
|
|
@@ -10917,9 +11323,9 @@ var ColorPickerTrigger = (0, import_react44.forwardRef)(
|
|
|
10917
11323
|
ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
|
|
10918
11324
|
|
|
10919
11325
|
// src/components/ColorPicker/ContrastIndicator.tsx
|
|
10920
|
-
var
|
|
11326
|
+
var import_styled_components59 = __toESM(require("styled-components"));
|
|
10921
11327
|
var import_jsx_runtime242 = require("react/jsx-runtime");
|
|
10922
|
-
var Container7 =
|
|
11328
|
+
var Container7 = import_styled_components59.default.div`
|
|
10923
11329
|
display: flex;
|
|
10924
11330
|
flex-direction: row;
|
|
10925
11331
|
justify-content: end;
|
|
@@ -10977,7 +11383,7 @@ var import_react46 = require("react");
|
|
|
10977
11383
|
|
|
10978
11384
|
// src/components/Switch/Switch.tsx
|
|
10979
11385
|
var import_react45 = require("react");
|
|
10980
|
-
var
|
|
11386
|
+
var import_styled_components60 = __toESM(require("styled-components"));
|
|
10981
11387
|
var import_type_guards34 = require("@wistia/type-guards");
|
|
10982
11388
|
var import_jsx_runtime243 = require("react/jsx-runtime");
|
|
10983
11389
|
var switchHeightMap = {
|
|
@@ -10985,10 +11391,10 @@ var switchHeightMap = {
|
|
|
10985
11391
|
md: 20,
|
|
10986
11392
|
lg: 24
|
|
10987
11393
|
};
|
|
10988
|
-
var getSizeCss2 = (size) =>
|
|
11394
|
+
var getSizeCss2 = (size) => import_styled_components60.css`
|
|
10989
11395
|
--wui-switch-height: ${switchHeightMap[size]}px;
|
|
10990
11396
|
`;
|
|
10991
|
-
var StyledSwitchWrapper =
|
|
11397
|
+
var StyledSwitchWrapper = import_styled_components60.default.div`
|
|
10992
11398
|
${({ $size }) => getSizeCss2($size)}
|
|
10993
11399
|
--wui-switch-border-offset: 2px;
|
|
10994
11400
|
--wui-switch-background-color: var(--wui-color-bg-surface-tertiary);
|
|
@@ -11022,7 +11428,7 @@ var StyledSwitchWrapper = import_styled_components59.default.div`
|
|
|
11022
11428
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
11023
11429
|
user-select: none;
|
|
11024
11430
|
`;
|
|
11025
|
-
var StyledSwitchTrack =
|
|
11431
|
+
var StyledSwitchTrack = import_styled_components60.default.div`
|
|
11026
11432
|
width: var(--wui-switch-width);
|
|
11027
11433
|
height: var(--wui-switch-height);
|
|
11028
11434
|
min-width: var(--wui-switch-width);
|
|
@@ -11040,7 +11446,7 @@ var StyledSwitchTrack = import_styled_components59.default.div`
|
|
|
11040
11446
|
background-color: var(--wui-switch-background-color);
|
|
11041
11447
|
margin-top: calc(calc(1lh - var(--wui-switch-height)) / 2);
|
|
11042
11448
|
`;
|
|
11043
|
-
var StyledSwitchThumb =
|
|
11449
|
+
var StyledSwitchThumb = import_styled_components60.default.div`
|
|
11044
11450
|
border-radius: var(--wui-border-radius-rounded);
|
|
11045
11451
|
background-color: var(--wui-switch-thumb-color);
|
|
11046
11452
|
transition:
|
|
@@ -11050,7 +11456,7 @@ var StyledSwitchThumb = import_styled_components59.default.div`
|
|
|
11050
11456
|
height: var(--wui-switch-thumb-size);
|
|
11051
11457
|
margin-left: var(--wui-switch-thumb-position);
|
|
11052
11458
|
`;
|
|
11053
|
-
var StyledHiddenSwitchInput =
|
|
11459
|
+
var StyledHiddenSwitchInput = import_styled_components60.default.input`
|
|
11054
11460
|
${visuallyHiddenStyle}
|
|
11055
11461
|
`;
|
|
11056
11462
|
var Switch = (0, import_react45.forwardRef)(
|
|
@@ -11188,12 +11594,12 @@ var import_fn7 = require("culori/fn");
|
|
|
11188
11594
|
|
|
11189
11595
|
// src/components/Input/Input.tsx
|
|
11190
11596
|
var import_react47 = require("react");
|
|
11191
|
-
var
|
|
11597
|
+
var import_styled_components62 = __toESM(require("styled-components"));
|
|
11192
11598
|
var import_type_guards35 = require("@wistia/type-guards");
|
|
11193
11599
|
|
|
11194
11600
|
// src/css/inputCss.ts
|
|
11195
|
-
var
|
|
11196
|
-
var inputCss =
|
|
11601
|
+
var import_styled_components61 = require("styled-components");
|
|
11602
|
+
var inputCss = import_styled_components61.css`
|
|
11197
11603
|
/* Colors */
|
|
11198
11604
|
--wui-input-color-bg: var(--wui-color-bg-surface);
|
|
11199
11605
|
--wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
|
|
@@ -11220,7 +11626,7 @@ var inputCss = import_styled_components60.css`
|
|
|
11220
11626
|
|
|
11221
11627
|
// src/components/Input/Input.tsx
|
|
11222
11628
|
var import_jsx_runtime247 = require("react/jsx-runtime");
|
|
11223
|
-
var inputStyles =
|
|
11629
|
+
var inputStyles = import_styled_components62.css`
|
|
11224
11630
|
${inputCss}
|
|
11225
11631
|
input,
|
|
11226
11632
|
textarea {
|
|
@@ -11260,7 +11666,7 @@ var inputStyles = import_styled_components61.css`
|
|
|
11260
11666
|
}
|
|
11261
11667
|
}
|
|
11262
11668
|
`;
|
|
11263
|
-
var StyledInputContainer =
|
|
11669
|
+
var StyledInputContainer = import_styled_components62.default.div`
|
|
11264
11670
|
display: inline-flex;
|
|
11265
11671
|
position: relative;
|
|
11266
11672
|
${inputStyles};
|
|
@@ -11343,14 +11749,14 @@ var Input = (0, import_react47.forwardRef)(
|
|
|
11343
11749
|
if ((0, import_type_guards35.isNil)(leftIcon) && type === "search") {
|
|
11344
11750
|
leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(Icon, { type: "search" });
|
|
11345
11751
|
}
|
|
11346
|
-
if ((0, import_type_guards35.isNotNil)(leftIconToDisplay)) {
|
|
11752
|
+
if ((0, import_type_guards35.isNotNil)(leftIconToDisplay) && (0, import_react47.isValidElement)(leftIconToDisplay)) {
|
|
11347
11753
|
leftIconToDisplay = (0, import_react47.cloneElement)(leftIconToDisplay, {
|
|
11348
11754
|
size: "md",
|
|
11349
11755
|
className: "wui-input-left-icon"
|
|
11350
11756
|
});
|
|
11351
11757
|
}
|
|
11352
11758
|
let rightIconToDisplay = rightIcon;
|
|
11353
|
-
if ((0, import_type_guards35.isNotNil)(rightIconToDisplay)) {
|
|
11759
|
+
if ((0, import_type_guards35.isNotNil)(rightIconToDisplay) && (0, import_react47.isValidElement)(rightIconToDisplay)) {
|
|
11354
11760
|
rightIconToDisplay = (0, import_react47.cloneElement)(rightIconToDisplay, {
|
|
11355
11761
|
size: "md",
|
|
11356
11762
|
className: "wui-input-right-icon"
|
|
@@ -11564,15 +11970,15 @@ HexColorInput.displayName = "HexColorInput_UI";
|
|
|
11564
11970
|
// src/components/ColorPicker/HueSlider.tsx
|
|
11565
11971
|
var import_react50 = require("react");
|
|
11566
11972
|
var import_react_slider = require("@radix-ui/react-slider");
|
|
11567
|
-
var
|
|
11973
|
+
var import_styled_components64 = __toESM(require("styled-components"));
|
|
11568
11974
|
var import_fn9 = require("culori/fn");
|
|
11569
11975
|
|
|
11570
11976
|
// src/components/ColorPicker/HSVHueCanvas.tsx
|
|
11571
11977
|
var import_react49 = require("react");
|
|
11572
|
-
var
|
|
11978
|
+
var import_styled_components63 = __toESM(require("styled-components"));
|
|
11573
11979
|
var import_fn8 = require("culori/fn");
|
|
11574
11980
|
var import_jsx_runtime249 = require("react/jsx-runtime");
|
|
11575
|
-
var Canvas =
|
|
11981
|
+
var Canvas = import_styled_components63.default.canvas`
|
|
11576
11982
|
display: block;
|
|
11577
11983
|
height: 100%;
|
|
11578
11984
|
width: 100%;
|
|
@@ -11612,7 +12018,7 @@ var HSVHueCanvas = ({ hsv }) => {
|
|
|
11612
12018
|
// src/components/ColorPicker/HueSlider.tsx
|
|
11613
12019
|
var import_jsx_runtime250 = require("react/jsx-runtime");
|
|
11614
12020
|
var TWENTY_FOUR = 24;
|
|
11615
|
-
var Container8 =
|
|
12021
|
+
var Container8 = import_styled_components64.default.div`
|
|
11616
12022
|
border-radius: var(--wui-border-radius-rounded);
|
|
11617
12023
|
border: 1px solid var(--wui-color-border);
|
|
11618
12024
|
height: ${TWENTY_FOUR}px;
|
|
@@ -11620,7 +12026,7 @@ var Container8 = import_styled_components63.default.div`
|
|
|
11620
12026
|
padding: 0 var(--wui-space-03);
|
|
11621
12027
|
position: relative;
|
|
11622
12028
|
`;
|
|
11623
|
-
var Root = (0,
|
|
12029
|
+
var Root = (0, import_styled_components64.default)(import_react_slider.Root)`
|
|
11624
12030
|
align-items: center;
|
|
11625
12031
|
display: flex;
|
|
11626
12032
|
position: absolute;
|
|
@@ -11629,11 +12035,11 @@ var Root = (0, import_styled_components63.default)(import_react_slider.Root)`
|
|
|
11629
12035
|
width: calc(100% - var(--wui-space-05));
|
|
11630
12036
|
height: 16px;
|
|
11631
12037
|
`;
|
|
11632
|
-
var Track = (0,
|
|
12038
|
+
var Track = (0, import_styled_components64.default)(import_react_slider.Track)`
|
|
11633
12039
|
width: 100%;
|
|
11634
12040
|
`;
|
|
11635
|
-
var Thumb = (0,
|
|
11636
|
-
var ThumbInner =
|
|
12041
|
+
var Thumb = (0, import_styled_components64.default)(import_react_slider.Thumb)``;
|
|
12042
|
+
var ThumbInner = import_styled_components64.default.div`
|
|
11637
12043
|
cursor: pointer;
|
|
11638
12044
|
display: block;
|
|
11639
12045
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -11700,11 +12106,11 @@ HueSlider.displayName = "HueSlider_UI";
|
|
|
11700
12106
|
|
|
11701
12107
|
// src/components/ColorPicker/SaturationAndValuePicker.tsx
|
|
11702
12108
|
var import_react52 = require("react");
|
|
11703
|
-
var
|
|
12109
|
+
var import_styled_components66 = __toESM(require("styled-components"));
|
|
11704
12110
|
|
|
11705
12111
|
// src/components/ColorPicker/HSVSaturationValueCanvas.tsx
|
|
11706
12112
|
var import_react51 = require("react");
|
|
11707
|
-
var
|
|
12113
|
+
var import_styled_components65 = __toESM(require("styled-components"));
|
|
11708
12114
|
|
|
11709
12115
|
// src/components/ColorPicker/canvas-utils.ts
|
|
11710
12116
|
var drawSmoothCurve = (context, points) => {
|
|
@@ -11734,7 +12140,7 @@ var drawSmoothCurve = (context, points) => {
|
|
|
11734
12140
|
|
|
11735
12141
|
// src/components/ColorPicker/HSVSaturationValueCanvas.tsx
|
|
11736
12142
|
var import_jsx_runtime251 = require("react/jsx-runtime");
|
|
11737
|
-
var Canvas2 =
|
|
12143
|
+
var Canvas2 = import_styled_components65.default.canvas`
|
|
11738
12144
|
display: block;
|
|
11739
12145
|
width: 100%;
|
|
11740
12146
|
`;
|
|
@@ -11855,13 +12261,13 @@ var HSVSaturationValueCanvas = ({
|
|
|
11855
12261
|
var import_jsx_runtime252 = require("react/jsx-runtime");
|
|
11856
12262
|
var SATURATION_NUDGE = 0.02;
|
|
11857
12263
|
var VALUE_NUDGE = 0.02;
|
|
11858
|
-
var Container9 =
|
|
12264
|
+
var Container9 = import_styled_components66.default.div`
|
|
11859
12265
|
border-radius: var(--wui-border-radius-02);
|
|
11860
12266
|
box-shadow: 0 0 0 1px var(--wui-color-border);
|
|
11861
12267
|
overflow: hidden;
|
|
11862
12268
|
position: relative;
|
|
11863
12269
|
`;
|
|
11864
|
-
var Thumb2 =
|
|
12270
|
+
var Thumb2 = import_styled_components66.default.button.attrs({ type: "button" })`
|
|
11865
12271
|
appearance: none;
|
|
11866
12272
|
border-radius: var(--wui-border-radius-rounded);
|
|
11867
12273
|
border: none;
|
|
@@ -12075,14 +12481,14 @@ SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
|
|
|
12075
12481
|
var Ariakit = __toESM(require("@ariakit/react"));
|
|
12076
12482
|
var import_react54 = require("react");
|
|
12077
12483
|
var import_match_sorter = require("match-sorter");
|
|
12078
|
-
var
|
|
12484
|
+
var import_styled_components69 = __toESM(require("styled-components"));
|
|
12079
12485
|
|
|
12080
12486
|
// src/components/Tag/Tag.tsx
|
|
12081
12487
|
var import_react53 = require("react");
|
|
12082
|
-
var
|
|
12488
|
+
var import_styled_components67 = __toESM(require("styled-components"));
|
|
12083
12489
|
var import_type_guards36 = require("@wistia/type-guards");
|
|
12084
12490
|
var import_jsx_runtime253 = require("react/jsx-runtime");
|
|
12085
|
-
var TagLabel =
|
|
12491
|
+
var TagLabel = import_styled_components67.default.a`
|
|
12086
12492
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12087
12493
|
font-size: var(--wui-typography-label-4-size);
|
|
12088
12494
|
font-weight: var(--wui-typography-label-4-weight);
|
|
@@ -12118,14 +12524,14 @@ var TagLabel = import_styled_components66.default.a`
|
|
|
12118
12524
|
background: var(--wui-color-bg-surface-secondary-active);
|
|
12119
12525
|
}
|
|
12120
12526
|
`;
|
|
12121
|
-
var TagDivider =
|
|
12527
|
+
var TagDivider = import_styled_components67.default.div`
|
|
12122
12528
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12123
12529
|
border-left: 1px solid var(--wui-color-border);
|
|
12124
12530
|
display: flex;
|
|
12125
12531
|
height: 14px;
|
|
12126
12532
|
width: 1px;
|
|
12127
12533
|
`;
|
|
12128
|
-
var StyledRemoveButton =
|
|
12534
|
+
var StyledRemoveButton = import_styled_components67.default.button`
|
|
12129
12535
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12130
12536
|
all: unset;
|
|
12131
12537
|
cursor: pointer;
|
|
@@ -12153,7 +12559,7 @@ var StyledRemoveButton = import_styled_components66.default.button`
|
|
|
12153
12559
|
box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
|
|
12154
12560
|
}
|
|
12155
12561
|
`;
|
|
12156
|
-
var StyledTag =
|
|
12562
|
+
var StyledTag = import_styled_components67.default.div`
|
|
12157
12563
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
12158
12564
|
align-items: center;
|
|
12159
12565
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
@@ -12234,10 +12640,10 @@ var Tag = (0, import_react53.forwardRef)(
|
|
|
12234
12640
|
Tag.displayName = "Tag_UI";
|
|
12235
12641
|
|
|
12236
12642
|
// src/private/helpers/getTypographicStyles/getTypographicStyles.ts
|
|
12237
|
-
var
|
|
12643
|
+
var import_styled_components68 = require("styled-components");
|
|
12238
12644
|
var typographicVariantStyleMap = { ...variantStyleMap2, ...variantStyleMap };
|
|
12239
12645
|
var getTypographicStyles = (variant) => {
|
|
12240
|
-
return
|
|
12646
|
+
return import_styled_components68.css`
|
|
12241
12647
|
${typographicVariantStyleMap[variant]}
|
|
12242
12648
|
font-family: var(--font-family);
|
|
12243
12649
|
font-size: var(--font-size);
|
|
@@ -12252,7 +12658,7 @@ var getDefaultTypographicElement = (variant) => {
|
|
|
12252
12658
|
|
|
12253
12659
|
// src/components/Combobox/Combobox.tsx
|
|
12254
12660
|
var import_jsx_runtime254 = require("react/jsx-runtime");
|
|
12255
|
-
var ComboboxWrapper =
|
|
12661
|
+
var ComboboxWrapper = import_styled_components69.default.div`
|
|
12256
12662
|
${inputCss};
|
|
12257
12663
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
12258
12664
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -12301,7 +12707,7 @@ var ComboboxWrapper = import_styled_components68.default.div`
|
|
|
12301
12707
|
}
|
|
12302
12708
|
}
|
|
12303
12709
|
`;
|
|
12304
|
-
var ComboboxInput = (0,
|
|
12710
|
+
var ComboboxInput = (0, import_styled_components69.default)(Ariakit.Combobox)`
|
|
12305
12711
|
appearance: none;
|
|
12306
12712
|
padding: 0;
|
|
12307
12713
|
width: 100%;
|
|
@@ -12316,7 +12722,7 @@ var ComboboxInput = (0, import_styled_components68.default)(Ariakit.Combobox)`
|
|
|
12316
12722
|
outline-width: 2px;
|
|
12317
12723
|
}
|
|
12318
12724
|
`;
|
|
12319
|
-
var ComboboxPopover2 = (0,
|
|
12725
|
+
var ComboboxPopover2 = (0, import_styled_components69.default)(Ariakit.ComboboxPopover)`
|
|
12320
12726
|
--wui-combobox-content-border: var(--wui-color-border);
|
|
12321
12727
|
--wui-combobox-content-bg: var(--wui-color-bg-surface);
|
|
12322
12728
|
--wui-combobox-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -12342,7 +12748,7 @@ var ComboboxPopover2 = (0, import_styled_components68.default)(Ariakit.ComboboxP
|
|
|
12342
12748
|
--item-opacity: 0.5;
|
|
12343
12749
|
}
|
|
12344
12750
|
`;
|
|
12345
|
-
var ComboboxItem2 = (0,
|
|
12751
|
+
var ComboboxItem2 = (0, import_styled_components69.default)(Ariakit.ComboboxItem)`
|
|
12346
12752
|
${getTypographicStyles("body3")};
|
|
12347
12753
|
display: flex;
|
|
12348
12754
|
padding: var(--wui-combobox-option-padding);
|
|
@@ -12370,7 +12776,7 @@ var ComboboxItem2 = (0, import_styled_components68.default)(Ariakit.ComboboxItem
|
|
|
12370
12776
|
background-color: transparent;
|
|
12371
12777
|
}
|
|
12372
12778
|
`;
|
|
12373
|
-
var NoResults =
|
|
12779
|
+
var NoResults = import_styled_components69.default.div`
|
|
12374
12780
|
gap: var(--wui-space-02);
|
|
12375
12781
|
`;
|
|
12376
12782
|
var POPOVER_WIDTH_OFFSET = 20;
|
|
@@ -12517,7 +12923,7 @@ var import_react61 = require("react");
|
|
|
12517
12923
|
var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
|
|
12518
12924
|
var import_type_guards37 = require("@wistia/type-guards");
|
|
12519
12925
|
var import_react56 = require("react");
|
|
12520
|
-
var
|
|
12926
|
+
var import_styled_components70 = __toESM(require("styled-components"));
|
|
12521
12927
|
|
|
12522
12928
|
// src/components/Menu/MenuContext.tsx
|
|
12523
12929
|
var import_react55 = require("react");
|
|
@@ -12526,7 +12932,7 @@ var useMenuContext = () => (0, import_react55.useContext)(MenuContext);
|
|
|
12526
12932
|
|
|
12527
12933
|
// src/components/Menu/Menu.tsx
|
|
12528
12934
|
var import_jsx_runtime255 = require("react/jsx-runtime");
|
|
12529
|
-
var open =
|
|
12935
|
+
var open = import_styled_components70.keyframes`
|
|
12530
12936
|
from {
|
|
12531
12937
|
opacity: 0;
|
|
12532
12938
|
transform: scale(.97) translateY(-8px);
|
|
@@ -12536,7 +12942,7 @@ var open = import_styled_components69.keyframes`
|
|
|
12536
12942
|
transform: scale(1);
|
|
12537
12943
|
}
|
|
12538
12944
|
`;
|
|
12539
|
-
var close =
|
|
12945
|
+
var close = import_styled_components70.keyframes`
|
|
12540
12946
|
from {
|
|
12541
12947
|
opacity: 1;
|
|
12542
12948
|
transform: scale(1);
|
|
@@ -12546,7 +12952,7 @@ var close = import_styled_components69.keyframes`
|
|
|
12546
12952
|
transform: scale(.97) translateY(-8px);
|
|
12547
12953
|
}
|
|
12548
12954
|
`;
|
|
12549
|
-
var menuItemCss =
|
|
12955
|
+
var menuItemCss = import_styled_components70.css`
|
|
12550
12956
|
--menu-label-description-gap: var(--wui-space-01);
|
|
12551
12957
|
--menu-item-inner-gap: var(--wui-space-03);
|
|
12552
12958
|
--menu-item-left-icon-size: 24px;
|
|
@@ -12557,7 +12963,7 @@ var menuItemCss = import_styled_components69.css`
|
|
|
12557
12963
|
--menu-label-line-height: var(--wui-typography-label-3-line-height);
|
|
12558
12964
|
--menu-divider-margin: var(--wui-space-02);
|
|
12559
12965
|
`;
|
|
12560
|
-
var compactMenuItemCss =
|
|
12966
|
+
var compactMenuItemCss = import_styled_components70.css`
|
|
12561
12967
|
--menu-label-description-gap: 0;
|
|
12562
12968
|
--menu-item-inner-gap: var(--wui-space-02);
|
|
12563
12969
|
--menu-item-left-icon-size: 16px;
|
|
@@ -12568,7 +12974,7 @@ var compactMenuItemCss = import_styled_components69.css`
|
|
|
12568
12974
|
--menu-label-line-height: var(--wui-typography-label-4-line-height);
|
|
12569
12975
|
--menu-divider-margin: var(--wui-space-01);
|
|
12570
12976
|
`;
|
|
12571
|
-
var menuContentCss =
|
|
12977
|
+
var menuContentCss = import_styled_components70.css`
|
|
12572
12978
|
--menu-font-family: var(--wui-typography-family-default);
|
|
12573
12979
|
--menu-bg: var(--wui-color-bg-surface);
|
|
12574
12980
|
--menu-shadow: var(--wui-elevation-01);
|
|
@@ -12610,7 +13016,7 @@ var menuContentCss = import_styled_components69.css`
|
|
|
12610
13016
|
margin: var(--menu-divider-margin) 0;
|
|
12611
13017
|
}
|
|
12612
13018
|
`;
|
|
12613
|
-
var MenuContent = (0,
|
|
13019
|
+
var MenuContent = (0, import_styled_components70.default)(import_react_dropdown_menu.DropdownMenuContent)`
|
|
12614
13020
|
${menuContentCss}
|
|
12615
13021
|
min-width: var(--radix-dropdown-menu-trigger-width);
|
|
12616
13022
|
`;
|
|
@@ -12680,10 +13086,10 @@ Menu.displayName = "Menu_UI";
|
|
|
12680
13086
|
Menu.displayName = "Menu_UI";
|
|
12681
13087
|
|
|
12682
13088
|
// src/components/Menu/MenuLabel.tsx
|
|
12683
|
-
var
|
|
13089
|
+
var import_styled_components71 = __toESM(require("styled-components"));
|
|
12684
13090
|
var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
|
|
12685
13091
|
var import_jsx_runtime256 = require("react/jsx-runtime");
|
|
12686
|
-
var StyledMenuLabel = (0,
|
|
13092
|
+
var StyledMenuLabel = (0, import_styled_components71.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
|
|
12687
13093
|
padding: var(--wui-space-02);
|
|
12688
13094
|
`;
|
|
12689
13095
|
var MenuLabel = ({ children, ...props }) => {
|
|
@@ -12708,16 +13114,16 @@ MenuLabel.displayName = "MenuLabel_UI";
|
|
|
12708
13114
|
|
|
12709
13115
|
// src/components/Menu/SubMenu.tsx
|
|
12710
13116
|
var import_react58 = require("react");
|
|
12711
|
-
var
|
|
13117
|
+
var import_styled_components74 = __toESM(require("styled-components"));
|
|
12712
13118
|
var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
|
|
12713
13119
|
var import_type_guards39 = require("@wistia/type-guards");
|
|
12714
13120
|
|
|
12715
13121
|
// src/components/Menu/MenuItemButton.tsx
|
|
12716
13122
|
var import_react57 = require("react");
|
|
12717
|
-
var
|
|
13123
|
+
var import_styled_components72 = __toESM(require("styled-components"));
|
|
12718
13124
|
var import_type_guards38 = require("@wistia/type-guards");
|
|
12719
13125
|
var import_jsx_runtime257 = require("react/jsx-runtime");
|
|
12720
|
-
var StyledButton3 = (0,
|
|
13126
|
+
var StyledButton3 = (0, import_styled_components72.default)(Button)`
|
|
12721
13127
|
${({ colorScheme }) => getColorScheme(colorScheme)};
|
|
12722
13128
|
|
|
12723
13129
|
display: flex;
|
|
@@ -12756,7 +13162,7 @@ var StyledButton3 = (0, import_styled_components71.default)(Button)`
|
|
|
12756
13162
|
padding-left: var(--wui-space-04);
|
|
12757
13163
|
}
|
|
12758
13164
|
`;
|
|
12759
|
-
var StyledLeftIconContainer =
|
|
13165
|
+
var StyledLeftIconContainer = import_styled_components72.default.div`
|
|
12760
13166
|
height: var(--menu-item-left-icon-size);
|
|
12761
13167
|
width: var(--menu-item-left-icon-size);
|
|
12762
13168
|
|
|
@@ -12768,7 +13174,7 @@ var StyledLeftIconContainer = import_styled_components71.default.div`
|
|
|
12768
13174
|
}
|
|
12769
13175
|
}
|
|
12770
13176
|
`;
|
|
12771
|
-
var StyledRightIconContainer =
|
|
13177
|
+
var StyledRightIconContainer = import_styled_components72.default.div`
|
|
12772
13178
|
height: var(--menu-item-right-icon-size);
|
|
12773
13179
|
width: var(--menu-item-right-icon-size);
|
|
12774
13180
|
|
|
@@ -12780,13 +13186,13 @@ var StyledRightIconContainer = import_styled_components71.default.div`
|
|
|
12780
13186
|
}
|
|
12781
13187
|
}
|
|
12782
13188
|
`;
|
|
12783
|
-
var StyledLabelAndDescriptionContainer =
|
|
13189
|
+
var StyledLabelAndDescriptionContainer = import_styled_components72.default.div`
|
|
12784
13190
|
display: flex;
|
|
12785
13191
|
flex-direction: column;
|
|
12786
13192
|
gap: var(--menu-label-description-gap);
|
|
12787
13193
|
flex-basis: 100%;
|
|
12788
13194
|
`;
|
|
12789
|
-
var StyledBadgeContainer =
|
|
13195
|
+
var StyledBadgeContainer = import_styled_components72.default.div`
|
|
12790
13196
|
align-self: start;
|
|
12791
13197
|
justify-self: end;
|
|
12792
13198
|
font-size: var(--wui-typography-label-4-size);
|
|
@@ -12823,10 +13229,10 @@ var MenuItemButton = (0, import_react57.forwardRef)(({ children, appearance, com
|
|
|
12823
13229
|
fullWidth: true,
|
|
12824
13230
|
unstyled: true,
|
|
12825
13231
|
children: [
|
|
12826
|
-
props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
|
|
13232
|
+
(0, import_type_guards38.isNotNil)(props.leftIcon) ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
|
|
12827
13233
|
/* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledLabelAndDescriptionContainer, { children }),
|
|
12828
13234
|
(0, import_type_guards38.isNotNil)(badge) || (0, import_type_guards38.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
|
|
12829
|
-
props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
|
|
13235
|
+
(0, import_type_guards38.isNotNil)(props.rightIcon) ? /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
|
|
12830
13236
|
]
|
|
12831
13237
|
}
|
|
12832
13238
|
);
|
|
@@ -12834,10 +13240,10 @@ var MenuItemButton = (0, import_react57.forwardRef)(({ children, appearance, com
|
|
|
12834
13240
|
MenuItemButton.displayName = "MenuItemButton_UI";
|
|
12835
13241
|
|
|
12836
13242
|
// src/components/Menu/MenuItemLabelDescription.tsx
|
|
12837
|
-
var
|
|
13243
|
+
var import_styled_components73 = __toESM(require("styled-components"));
|
|
12838
13244
|
var import_jsx_runtime258 = require("react/jsx-runtime");
|
|
12839
|
-
var StyledMenuItemLabel =
|
|
12840
|
-
var StyledMenuItemDescription = (0,
|
|
13245
|
+
var StyledMenuItemLabel = import_styled_components73.default.span``;
|
|
13246
|
+
var StyledMenuItemDescription = (0, import_styled_components73.default)(Text)``;
|
|
12841
13247
|
var MenuItemLabel = ({ children }) => {
|
|
12842
13248
|
return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(StyledMenuItemLabel, { children });
|
|
12843
13249
|
};
|
|
@@ -12854,17 +13260,17 @@ var MenuItemDescription = ({ children }) => {
|
|
|
12854
13260
|
|
|
12855
13261
|
// src/components/Menu/SubMenu.tsx
|
|
12856
13262
|
var import_jsx_runtime259 = require("react/jsx-runtime");
|
|
12857
|
-
var SubMenuContent = (0,
|
|
13263
|
+
var SubMenuContent = (0, import_styled_components74.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
|
|
12858
13264
|
${menuContentCss}
|
|
12859
13265
|
|
|
12860
13266
|
${mq.smAndDown} {
|
|
12861
13267
|
transform: translateX(-100%) !important;
|
|
12862
13268
|
}
|
|
12863
13269
|
`;
|
|
12864
|
-
var StyledMobileSubMenuItems =
|
|
13270
|
+
var StyledMobileSubMenuItems = import_styled_components74.default.div`
|
|
12865
13271
|
margin-left: var(--wui-space-04);
|
|
12866
13272
|
`;
|
|
12867
|
-
var StyledSubTrigger = (0,
|
|
13273
|
+
var StyledSubTrigger = (0, import_styled_components74.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
|
|
12868
13274
|
outline: none;
|
|
12869
13275
|
|
|
12870
13276
|
&[data-state='open'],
|
|
@@ -13234,10 +13640,10 @@ var ContextMenu = ({
|
|
|
13234
13640
|
|
|
13235
13641
|
// src/components/DataCards/DataCard.tsx
|
|
13236
13642
|
var import_react62 = require("react");
|
|
13237
|
-
var
|
|
13643
|
+
var import_styled_components75 = __toESM(require("styled-components"));
|
|
13238
13644
|
var import_type_guards42 = require("@wistia/type-guards");
|
|
13239
13645
|
var import_jsx_runtime266 = require("react/jsx-runtime");
|
|
13240
|
-
var StyledDataCard =
|
|
13646
|
+
var StyledDataCard = import_styled_components75.default.div`
|
|
13241
13647
|
--wui-data-card-text: var(--wui-color-text-button);
|
|
13242
13648
|
--wui-color-text: var(--wui-data-card-text);
|
|
13243
13649
|
--wui-data-card-background: var(--wui-color-bg-surface-secondary);
|
|
@@ -13311,7 +13717,7 @@ var StyledDataCard = import_styled_components74.default.div`
|
|
|
13311
13717
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
13312
13718
|
}
|
|
13313
13719
|
`;
|
|
13314
|
-
var shimmer =
|
|
13720
|
+
var shimmer = import_styled_components75.keyframes`
|
|
13315
13721
|
0% {
|
|
13316
13722
|
background-position: 200% 0;
|
|
13317
13723
|
}
|
|
@@ -13319,7 +13725,7 @@ var shimmer = import_styled_components74.keyframes`
|
|
|
13319
13725
|
background-position: -200% 0;
|
|
13320
13726
|
}
|
|
13321
13727
|
`;
|
|
13322
|
-
var LoadingBackground =
|
|
13728
|
+
var LoadingBackground = import_styled_components75.default.div`
|
|
13323
13729
|
background: linear-gradient(
|
|
13324
13730
|
90deg,
|
|
13325
13731
|
var(--wui-color-bg-surface-tertiary) 25%,
|
|
@@ -13330,32 +13736,32 @@ var LoadingBackground = import_styled_components74.default.div`
|
|
|
13330
13736
|
animation: ${shimmer} 1.5s infinite;
|
|
13331
13737
|
border-radius: var(--wui-border-radius-01);
|
|
13332
13738
|
`;
|
|
13333
|
-
var StyledLoadingLabel = (0,
|
|
13739
|
+
var StyledLoadingLabel = (0, import_styled_components75.default)(LoadingBackground)`
|
|
13334
13740
|
width: 80px;
|
|
13335
13741
|
height: var(--wui-typography-heading-6-line-height);
|
|
13336
13742
|
`;
|
|
13337
|
-
var StyledLoadingValue = (0,
|
|
13743
|
+
var StyledLoadingValue = (0, import_styled_components75.default)(LoadingBackground)`
|
|
13338
13744
|
width: 90%;
|
|
13339
13745
|
height: var(--wui-typography-heading-3-line-height);
|
|
13340
13746
|
`;
|
|
13341
|
-
var StyledLabel3 = (0,
|
|
13747
|
+
var StyledLabel3 = (0, import_styled_components75.default)(Heading)`
|
|
13342
13748
|
grid-area: label;
|
|
13343
13749
|
`;
|
|
13344
|
-
var StyledValue = (0,
|
|
13750
|
+
var StyledValue = (0, import_styled_components75.default)(Heading)`
|
|
13345
13751
|
grid-area: value;
|
|
13346
13752
|
`;
|
|
13347
|
-
var StyledSlot =
|
|
13753
|
+
var StyledSlot = import_styled_components75.default.div`
|
|
13348
13754
|
display: flex;
|
|
13349
13755
|
justify-content: flex-end;
|
|
13350
13756
|
grid-area: slot;
|
|
13351
13757
|
align-self: center;
|
|
13352
13758
|
`;
|
|
13353
|
-
var StyledDataCardTrendContainer =
|
|
13759
|
+
var StyledDataCardTrendContainer = import_styled_components75.default.div`
|
|
13354
13760
|
position: absolute;
|
|
13355
13761
|
bottom: var(--wui-space-01);
|
|
13356
13762
|
right: var(--wui-space-01);
|
|
13357
13763
|
`;
|
|
13358
|
-
var StyledSubtitle = (0,
|
|
13764
|
+
var StyledSubtitle = (0, import_styled_components75.default)(Text)`
|
|
13359
13765
|
grid-area: subtitle;
|
|
13360
13766
|
`;
|
|
13361
13767
|
var DataCardInner = ({
|
|
@@ -13433,9 +13839,9 @@ var DataCard = (props) => {
|
|
|
13433
13839
|
DataCard.displayName = "DataCard_UI";
|
|
13434
13840
|
|
|
13435
13841
|
// src/components/DataCards/DataCards.tsx
|
|
13436
|
-
var
|
|
13842
|
+
var import_styled_components76 = __toESM(require("styled-components"));
|
|
13437
13843
|
var import_jsx_runtime267 = require("react/jsx-runtime");
|
|
13438
|
-
var StyledDataCards = (0,
|
|
13844
|
+
var StyledDataCards = (0, import_styled_components76.default)(Box)`
|
|
13439
13845
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
13440
13846
|
|
|
13441
13847
|
> * {
|
|
@@ -13468,9 +13874,9 @@ var DataCards = ({
|
|
|
13468
13874
|
DataCards.displayName = "DataCards_UI";
|
|
13469
13875
|
|
|
13470
13876
|
// src/components/DataCards/DataCardTrend.tsx
|
|
13471
|
-
var
|
|
13877
|
+
var import_styled_components77 = __toESM(require("styled-components"));
|
|
13472
13878
|
var import_jsx_runtime268 = require("react/jsx-runtime");
|
|
13473
|
-
var StyledDataCardTrend =
|
|
13879
|
+
var StyledDataCardTrend = import_styled_components77.default.div`
|
|
13474
13880
|
${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
|
|
13475
13881
|
background: var(--wui-color-bg-app);
|
|
13476
13882
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -13506,9 +13912,9 @@ var DataCardTrend = ({
|
|
|
13506
13912
|
};
|
|
13507
13913
|
|
|
13508
13914
|
// src/components/DataCards/DataCardHoverArrow.tsx
|
|
13509
|
-
var
|
|
13915
|
+
var import_styled_components78 = __toESM(require("styled-components"));
|
|
13510
13916
|
var import_jsx_runtime269 = require("react/jsx-runtime");
|
|
13511
|
-
var StyledIconContainer =
|
|
13917
|
+
var StyledIconContainer = import_styled_components78.default.div`
|
|
13512
13918
|
display: flex;
|
|
13513
13919
|
align-items: center;
|
|
13514
13920
|
align-self: center;
|
|
@@ -13524,9 +13930,9 @@ var DataCardHoverArrow = () => /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(St
|
|
|
13524
13930
|
DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
|
|
13525
13931
|
|
|
13526
13932
|
// src/components/DataList/DataList.tsx
|
|
13527
|
-
var
|
|
13933
|
+
var import_styled_components79 = __toESM(require("styled-components"));
|
|
13528
13934
|
var import_jsx_runtime270 = require("react/jsx-runtime");
|
|
13529
|
-
var StyledDataList =
|
|
13935
|
+
var StyledDataList = import_styled_components79.default.dl`
|
|
13530
13936
|
display: grid;
|
|
13531
13937
|
grid-template-columns: auto 1fr;
|
|
13532
13938
|
column-gap: var(--wui-space-02);
|
|
@@ -13605,22 +14011,22 @@ var DataListItemValue = (props) => {
|
|
|
13605
14011
|
DataListItemValue.displayName = "DataListItemValue_UI";
|
|
13606
14012
|
|
|
13607
14013
|
// src/components/Divider/Divider.tsx
|
|
13608
|
-
var
|
|
14014
|
+
var import_styled_components80 = __toESM(require("styled-components"));
|
|
13609
14015
|
var import_jsx_runtime273 = require("react/jsx-runtime");
|
|
13610
|
-
var horizontalBorderCss =
|
|
14016
|
+
var horizontalBorderCss = import_styled_components80.css`
|
|
13611
14017
|
border-top-color: var(--wui-color-border);
|
|
13612
14018
|
border-top-style: solid;
|
|
13613
14019
|
border-top-width: 1px;
|
|
13614
14020
|
clear: both; /* for horizontal dividers, ensure it clears any floats */
|
|
13615
14021
|
height: 0;
|
|
13616
14022
|
`;
|
|
13617
|
-
var verticalBorderCss =
|
|
14023
|
+
var verticalBorderCss = import_styled_components80.css`
|
|
13618
14024
|
background-color: var(--wui-color-border);
|
|
13619
14025
|
max-width: 1px;
|
|
13620
14026
|
min-height: 100%;
|
|
13621
14027
|
width: 1px;
|
|
13622
14028
|
`;
|
|
13623
|
-
var DividerComponent =
|
|
14029
|
+
var DividerComponent = import_styled_components80.default.div`
|
|
13624
14030
|
${({ $orientation }) => {
|
|
13625
14031
|
switch ($orientation) {
|
|
13626
14032
|
case "vertical":
|
|
@@ -13646,10 +14052,10 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
|
|
|
13646
14052
|
Divider.displayName = "Divider_UI";
|
|
13647
14053
|
|
|
13648
14054
|
// src/components/EditableHeading/EditableHeading.tsx
|
|
13649
|
-
var
|
|
14055
|
+
var import_styled_components81 = __toESM(require("styled-components"));
|
|
13650
14056
|
var import_react63 = require("react");
|
|
13651
14057
|
var import_jsx_runtime274 = require("react/jsx-runtime");
|
|
13652
|
-
var StyledInput = (0,
|
|
14058
|
+
var StyledInput = (0, import_styled_components81.default)(Input)`
|
|
13653
14059
|
&:not([rows]) {
|
|
13654
14060
|
min-height: unset;
|
|
13655
14061
|
}
|
|
@@ -13670,7 +14076,7 @@ var StyledInput = (0, import_styled_components80.default)(Input)`
|
|
|
13670
14076
|
resize: none;
|
|
13671
14077
|
}
|
|
13672
14078
|
`;
|
|
13673
|
-
var editableStyles =
|
|
14079
|
+
var editableStyles = import_styled_components81.css`
|
|
13674
14080
|
&:has(+ :focus-within) {
|
|
13675
14081
|
background: var(--wui-color-bg-surface-hover);
|
|
13676
14082
|
}
|
|
@@ -13680,7 +14086,7 @@ var editableStyles = import_styled_components80.css`
|
|
|
13680
14086
|
cursor: pointer;
|
|
13681
14087
|
}
|
|
13682
14088
|
`;
|
|
13683
|
-
var StyledHeading2 = (0,
|
|
14089
|
+
var StyledHeading2 = (0, import_styled_components81.default)(Heading)`
|
|
13684
14090
|
width: 100%;
|
|
13685
14091
|
border-radius: var(--wui-border-radius-02);
|
|
13686
14092
|
padding: var(--wui-space-02);
|
|
@@ -13783,15 +14189,15 @@ var EditableHeading = ({
|
|
|
13783
14189
|
|
|
13784
14190
|
// src/components/EditableText/EditableTextDisplay.tsx
|
|
13785
14191
|
var import_react65 = require("react");
|
|
13786
|
-
var
|
|
14192
|
+
var import_styled_components83 = __toESM(require("styled-components"));
|
|
13787
14193
|
var import_type_guards44 = require("@wistia/type-guards");
|
|
13788
14194
|
|
|
13789
14195
|
// src/components/EditableText/EditableTextRoot.tsx
|
|
13790
14196
|
var import_react64 = require("react");
|
|
13791
14197
|
var import_type_guards43 = require("@wistia/type-guards");
|
|
13792
|
-
var
|
|
14198
|
+
var import_styled_components82 = __toESM(require("styled-components"));
|
|
13793
14199
|
var import_jsx_runtime275 = require("react/jsx-runtime");
|
|
13794
|
-
var StyledEditableTextRoot =
|
|
14200
|
+
var StyledEditableTextRoot = import_styled_components82.default.div`
|
|
13795
14201
|
display: contents;
|
|
13796
14202
|
|
|
13797
14203
|
--wui-editable-text-padding: var(--wui-space-01);
|
|
@@ -13903,7 +14309,7 @@ var EditableTextRoot = ({
|
|
|
13903
14309
|
|
|
13904
14310
|
// src/components/EditableText/EditableTextDisplay.tsx
|
|
13905
14311
|
var import_jsx_runtime276 = require("react/jsx-runtime");
|
|
13906
|
-
var StyledEditableTextDisplay =
|
|
14312
|
+
var StyledEditableTextDisplay = import_styled_components83.default.div`
|
|
13907
14313
|
${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
|
|
13908
14314
|
padding: var(--wui-editable-text-padding);
|
|
13909
14315
|
border-radius: var(--wui-editable-text-border-radius);
|
|
@@ -13911,14 +14317,14 @@ var StyledEditableTextDisplay = import_styled_components82.default.div`
|
|
|
13911
14317
|
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
|
|
13912
14318
|
${({ $maxLines }) => {
|
|
13913
14319
|
if ((0, import_type_guards44.isNotNil)($maxLines)) {
|
|
13914
|
-
return
|
|
14320
|
+
return import_styled_components83.css`
|
|
13915
14321
|
${ellipsisStyle};
|
|
13916
14322
|
${lineClampCss($maxLines)};
|
|
13917
14323
|
`;
|
|
13918
14324
|
}
|
|
13919
14325
|
return void 0;
|
|
13920
14326
|
}}
|
|
13921
|
-
${({ $minLines }) => (0, import_type_guards44.isNotNil)($minLines) &&
|
|
14327
|
+
${({ $minLines }) => (0, import_type_guards44.isNotNil)($minLines) && import_styled_components83.css`
|
|
13922
14328
|
min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
|
|
13923
14329
|
`}
|
|
13924
14330
|
word-break: break-word;
|
|
@@ -14004,10 +14410,10 @@ var EditableTextDisplay = makePolymorphic(
|
|
|
14004
14410
|
|
|
14005
14411
|
// src/components/EditableText/EditableTextInput.tsx
|
|
14006
14412
|
var import_react66 = require("react");
|
|
14007
|
-
var
|
|
14413
|
+
var import_styled_components84 = __toESM(require("styled-components"));
|
|
14008
14414
|
var import_type_guards45 = require("@wistia/type-guards");
|
|
14009
14415
|
var import_jsx_runtime277 = require("react/jsx-runtime");
|
|
14010
|
-
var StyledInput2 = (0,
|
|
14416
|
+
var StyledInput2 = (0, import_styled_components84.default)(Input)`
|
|
14011
14417
|
&& {
|
|
14012
14418
|
${({ $minLines }) => (0, import_type_guards45.isNotNil)($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
|
|
14013
14419
|
${({ $maxLines }) => (0, import_type_guards45.isNotNil)($maxLines) && `max-height: calc(${$maxLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
|
|
@@ -14305,10 +14711,10 @@ var FormErrorSummary = ({ description }) => {
|
|
|
14305
14711
|
|
|
14306
14712
|
// src/components/FormField/FormField.tsx
|
|
14307
14713
|
var import_react73 = require("react");
|
|
14308
|
-
var
|
|
14714
|
+
var import_styled_components85 = __toESM(require("styled-components"));
|
|
14309
14715
|
var import_type_guards47 = require("@wistia/type-guards");
|
|
14310
14716
|
var import_jsx_runtime281 = require("react/jsx-runtime");
|
|
14311
|
-
var StyledFormField =
|
|
14717
|
+
var StyledFormField = import_styled_components85.default.div`
|
|
14312
14718
|
--form-field-spacing: var(--wui-space-01);
|
|
14313
14719
|
--form-field-spacing-inline: var(--wui-space-02);
|
|
14314
14720
|
--form-field-error-color: var(--wui-color-text-secondary-error);
|
|
@@ -14338,7 +14744,7 @@ var StyledFormField = import_styled_components84.default.div`
|
|
|
14338
14744
|
grid-template-rows: 1fr;
|
|
14339
14745
|
}
|
|
14340
14746
|
`;
|
|
14341
|
-
var StyledErrorList =
|
|
14747
|
+
var StyledErrorList = import_styled_components85.default.ul`
|
|
14342
14748
|
margin: 0;
|
|
14343
14749
|
padding: 0;
|
|
14344
14750
|
padding-left: var(--wui-space-04);
|
|
@@ -14493,24 +14899,24 @@ RadioGroup.displayName = "RadioGroup_UI";
|
|
|
14493
14899
|
|
|
14494
14900
|
// src/components/Grid/Grid.tsx
|
|
14495
14901
|
var import_react75 = require("react");
|
|
14496
|
-
var
|
|
14902
|
+
var import_styled_components86 = __toESM(require("styled-components"));
|
|
14497
14903
|
var import_type_guards48 = require("@wistia/type-guards");
|
|
14498
14904
|
var import_jsx_runtime283 = require("react/jsx-runtime");
|
|
14499
14905
|
var DEFAULT_ELEMENT5 = "div";
|
|
14500
14906
|
var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
|
|
14501
14907
|
if (minChildWidth === "auto" && maxColumns === "auto") {
|
|
14502
|
-
return
|
|
14908
|
+
return import_styled_components86.css`
|
|
14503
14909
|
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
14504
14910
|
`;
|
|
14505
14911
|
}
|
|
14506
14912
|
const gridMode = expandItems ? "auto-fit" : "auto-fill";
|
|
14507
14913
|
const minChildWidthValue = minChildWidth === "auto" ? 0 : minChildWidth;
|
|
14508
14914
|
if (maxColumns === "auto") {
|
|
14509
|
-
return
|
|
14915
|
+
return import_styled_components86.css`
|
|
14510
14916
|
grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
|
|
14511
14917
|
`;
|
|
14512
14918
|
}
|
|
14513
|
-
return
|
|
14919
|
+
return import_styled_components86.css`
|
|
14514
14920
|
/* Adapted from https://9elements.com/blog/building-a-rock-solid-auto-grid/ */
|
|
14515
14921
|
--wui-grid-total-column-gap-width: calc(${maxColumns - 1} * var(--wui-grid-column-gap));
|
|
14516
14922
|
--wui-grid-max-column-width: calc(
|
|
@@ -14523,7 +14929,7 @@ var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
|
|
|
14523
14929
|
);
|
|
14524
14930
|
`;
|
|
14525
14931
|
};
|
|
14526
|
-
var StyledGrid =
|
|
14932
|
+
var StyledGrid = import_styled_components86.default.div`
|
|
14527
14933
|
--wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
|
|
14528
14934
|
--wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
|
|
14529
14935
|
|
|
@@ -14567,11 +14973,11 @@ GridComponent.displayName = "Grid_UI";
|
|
|
14567
14973
|
var Grid = makePolymorphic(GridComponent);
|
|
14568
14974
|
|
|
14569
14975
|
// src/components/InputClickToCopy/InputClickToCopy.tsx
|
|
14570
|
-
var
|
|
14976
|
+
var import_styled_components87 = __toESM(require("styled-components"));
|
|
14571
14977
|
var import_react76 = require("react");
|
|
14572
14978
|
var import_type_guards49 = require("@wistia/type-guards");
|
|
14573
14979
|
var import_jsx_runtime284 = require("react/jsx-runtime");
|
|
14574
|
-
var StyledIconButton = (0,
|
|
14980
|
+
var StyledIconButton = (0, import_styled_components87.default)(IconButton)`
|
|
14575
14981
|
/* override size for icon button since prop gets changed by Input */
|
|
14576
14982
|
height: var(--icon-button-size-sm);
|
|
14577
14983
|
width: var(--icon-button-size-sm);
|
|
@@ -14637,11 +15043,11 @@ var InputClickToCopy = (0, import_react76.forwardRef)(
|
|
|
14637
15043
|
InputClickToCopy.displayName = "InputClickToCopy_UI";
|
|
14638
15044
|
|
|
14639
15045
|
// src/components/InputPassword/InputPassword.tsx
|
|
14640
|
-
var
|
|
15046
|
+
var import_styled_components88 = __toESM(require("styled-components"));
|
|
14641
15047
|
var import_react77 = require("react");
|
|
14642
15048
|
var import_type_guards50 = require("@wistia/type-guards");
|
|
14643
15049
|
var import_jsx_runtime285 = require("react/jsx-runtime");
|
|
14644
|
-
var StyledIconButton2 = (0,
|
|
15050
|
+
var StyledIconButton2 = (0, import_styled_components88.default)(IconButton)`
|
|
14645
15051
|
/* override size for icon button since prop gets changed by Input */
|
|
14646
15052
|
height: var(--icon-button-size-sm);
|
|
14647
15053
|
width: var(--icon-button-size-sm);
|
|
@@ -14684,16 +15090,16 @@ var InputPassword = (0, import_react77.forwardRef)(
|
|
|
14684
15090
|
InputPassword.displayName = "InputPassword_UI";
|
|
14685
15091
|
|
|
14686
15092
|
// src/components/KeyboardShortcut/KeyboardShortcut.tsx
|
|
14687
|
-
var
|
|
15093
|
+
var import_styled_components89 = __toESM(require("styled-components"));
|
|
14688
15094
|
var import_type_guards51 = require("@wistia/type-guards");
|
|
14689
15095
|
var import_jsx_runtime286 = require("react/jsx-runtime");
|
|
14690
|
-
var StyledKeyboardShortcut =
|
|
15096
|
+
var StyledKeyboardShortcut = import_styled_components89.default.div`
|
|
14691
15097
|
align-items: center;
|
|
14692
15098
|
display: flex;
|
|
14693
15099
|
gap: var(--wui-space-02);
|
|
14694
15100
|
${({ $fullWidth }) => $fullWidth && "width: 100%; justify-content: space-between;"}
|
|
14695
15101
|
`;
|
|
14696
|
-
var StyledKey =
|
|
15102
|
+
var StyledKey = import_styled_components89.default.kbd`
|
|
14697
15103
|
align-items: center;
|
|
14698
15104
|
background: var(--wui-color-bg-surface-secondary);
|
|
14699
15105
|
border-bottom: 1px solid var(--wui-color-border-secondary);
|
|
@@ -14716,11 +15122,11 @@ var StyledKey = import_styled_components88.default.kbd`
|
|
|
14716
15122
|
min-width: 20px;
|
|
14717
15123
|
padding: 0 var(--wui-space-01);
|
|
14718
15124
|
`;
|
|
14719
|
-
var Label2 =
|
|
15125
|
+
var Label2 = import_styled_components89.default.span`
|
|
14720
15126
|
color: var(--wui-color-text);
|
|
14721
15127
|
font-size: 12px;
|
|
14722
15128
|
`;
|
|
14723
|
-
var KeysContainer =
|
|
15129
|
+
var KeysContainer = import_styled_components89.default.div`
|
|
14724
15130
|
display: flex;
|
|
14725
15131
|
gap: var(--wui-space-01);
|
|
14726
15132
|
`;
|
|
@@ -14794,13 +15200,13 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
|
|
|
14794
15200
|
|
|
14795
15201
|
// src/components/List/List.tsx
|
|
14796
15202
|
var import_type_guards53 = require("@wistia/type-guards");
|
|
14797
|
-
var
|
|
15203
|
+
var import_styled_components91 = __toESM(require("styled-components"));
|
|
14798
15204
|
|
|
14799
15205
|
// src/components/List/ListItem.tsx
|
|
14800
|
-
var
|
|
15206
|
+
var import_styled_components90 = __toESM(require("styled-components"));
|
|
14801
15207
|
var import_type_guards52 = require("@wistia/type-guards");
|
|
14802
15208
|
var import_jsx_runtime287 = require("react/jsx-runtime");
|
|
14803
|
-
var ListItemComponent =
|
|
15209
|
+
var ListItemComponent = import_styled_components90.default.li`
|
|
14804
15210
|
margin-bottom: var(--wui-space-02);
|
|
14805
15211
|
`;
|
|
14806
15212
|
var ListItem = ({ children }) => {
|
|
@@ -14813,7 +15219,7 @@ ListItem.displayName = "ListItem_UI";
|
|
|
14813
15219
|
|
|
14814
15220
|
// src/components/List/List.tsx
|
|
14815
15221
|
var import_jsx_runtime288 = require("react/jsx-runtime");
|
|
14816
|
-
var spacesStyle =
|
|
15222
|
+
var spacesStyle = import_styled_components91.css`
|
|
14817
15223
|
overflow: hidden;
|
|
14818
15224
|
padding-left: 0;
|
|
14819
15225
|
vertical-align: bottom;
|
|
@@ -14835,7 +15241,7 @@ var spacesStyle = import_styled_components90.css`
|
|
|
14835
15241
|
}
|
|
14836
15242
|
}
|
|
14837
15243
|
`;
|
|
14838
|
-
var commasStyle =
|
|
15244
|
+
var commasStyle = import_styled_components91.css`
|
|
14839
15245
|
${spacesStyle};
|
|
14840
15246
|
|
|
14841
15247
|
li {
|
|
@@ -14845,7 +15251,7 @@ var commasStyle = import_styled_components90.css`
|
|
|
14845
15251
|
}
|
|
14846
15252
|
}
|
|
14847
15253
|
`;
|
|
14848
|
-
var slashesStyle =
|
|
15254
|
+
var slashesStyle = import_styled_components91.css`
|
|
14849
15255
|
${spacesStyle};
|
|
14850
15256
|
|
|
14851
15257
|
li {
|
|
@@ -14856,7 +15262,7 @@ var slashesStyle = import_styled_components90.css`
|
|
|
14856
15262
|
}
|
|
14857
15263
|
}
|
|
14858
15264
|
`;
|
|
14859
|
-
var breadcrumbsStyle =
|
|
15265
|
+
var breadcrumbsStyle = import_styled_components91.css`
|
|
14860
15266
|
${spacesStyle};
|
|
14861
15267
|
|
|
14862
15268
|
li {
|
|
@@ -14867,11 +15273,11 @@ var breadcrumbsStyle = import_styled_components90.css`
|
|
|
14867
15273
|
}
|
|
14868
15274
|
}
|
|
14869
15275
|
`;
|
|
14870
|
-
var unbulletedStyle =
|
|
15276
|
+
var unbulletedStyle = import_styled_components91.css`
|
|
14871
15277
|
list-style: none;
|
|
14872
15278
|
padding-left: 0;
|
|
14873
15279
|
`;
|
|
14874
|
-
var ListComponent =
|
|
15280
|
+
var ListComponent = import_styled_components91.default.ul`
|
|
14875
15281
|
list-style-position: outside;
|
|
14876
15282
|
margin: 0 0 var(--wui-space-01);
|
|
14877
15283
|
padding: 0 0 0 var(--wui-space-04);
|
|
@@ -14951,9 +15357,9 @@ var List = ({
|
|
|
14951
15357
|
List.displayName = "List_UI";
|
|
14952
15358
|
|
|
14953
15359
|
// src/components/Mark/Mark.tsx
|
|
14954
|
-
var
|
|
15360
|
+
var import_styled_components92 = __toESM(require("styled-components"));
|
|
14955
15361
|
var import_jsx_runtime289 = require("react/jsx-runtime");
|
|
14956
|
-
var StyledMark =
|
|
15362
|
+
var StyledMark = import_styled_components92.default.mark`
|
|
14957
15363
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
14958
15364
|
background-color: var(--wui-color-bg-surface-tertiary);
|
|
14959
15365
|
color: var(--wui-color-text);
|
|
@@ -14973,19 +15379,19 @@ Mark.displayName = "Mark_UI";
|
|
|
14973
15379
|
|
|
14974
15380
|
// src/components/Modal/Modal.tsx
|
|
14975
15381
|
var import_react80 = require("react");
|
|
14976
|
-
var
|
|
15382
|
+
var import_styled_components97 = __toESM(require("styled-components"));
|
|
14977
15383
|
var import_react_dialog5 = require("@radix-ui/react-dialog");
|
|
14978
15384
|
var import_type_guards55 = require("@wistia/type-guards");
|
|
14979
15385
|
|
|
14980
15386
|
// src/components/Modal/ModalHeader.tsx
|
|
14981
|
-
var
|
|
15387
|
+
var import_styled_components94 = __toESM(require("styled-components"));
|
|
14982
15388
|
var import_react_dialog2 = require("@radix-ui/react-dialog");
|
|
14983
15389
|
|
|
14984
15390
|
// src/components/Modal/ModalCloseButton.tsx
|
|
14985
|
-
var
|
|
15391
|
+
var import_styled_components93 = __toESM(require("styled-components"));
|
|
14986
15392
|
var import_react_dialog = require("@radix-ui/react-dialog");
|
|
14987
15393
|
var import_jsx_runtime290 = require("react/jsx-runtime");
|
|
14988
|
-
var CloseButton = (0,
|
|
15394
|
+
var CloseButton = (0, import_styled_components93.default)(import_react_dialog.Close)`
|
|
14989
15395
|
align-self: start;
|
|
14990
15396
|
`;
|
|
14991
15397
|
var ModalCloseButton = () => {
|
|
@@ -15002,7 +15408,7 @@ var ModalCloseButton = () => {
|
|
|
15002
15408
|
|
|
15003
15409
|
// src/components/Modal/ModalHeader.tsx
|
|
15004
15410
|
var import_jsx_runtime291 = require("react/jsx-runtime");
|
|
15005
|
-
var Header =
|
|
15411
|
+
var Header = import_styled_components94.default.header`
|
|
15006
15412
|
display: flex;
|
|
15007
15413
|
order: 1;
|
|
15008
15414
|
gap: var(--wui-space-01);
|
|
@@ -15020,7 +15426,7 @@ var Header = import_styled_components93.default.header`
|
|
|
15020
15426
|
top: var(--wui-space-03);
|
|
15021
15427
|
}
|
|
15022
15428
|
`;
|
|
15023
|
-
var Title = (0,
|
|
15429
|
+
var Title = (0, import_styled_components94.default)(import_react_dialog2.Title)`
|
|
15024
15430
|
font-family: var(--wui-typography-heading-2-family);
|
|
15025
15431
|
line-height: var(--wui-typography-heading-2-line-height);
|
|
15026
15432
|
font-size: var(--wui-typography-heading-2-size);
|
|
@@ -15047,7 +15453,7 @@ var ModalHeader = ({
|
|
|
15047
15453
|
|
|
15048
15454
|
// src/components/Modal/ModalContent.tsx
|
|
15049
15455
|
var import_react79 = require("react");
|
|
15050
|
-
var
|
|
15456
|
+
var import_styled_components95 = __toESM(require("styled-components"));
|
|
15051
15457
|
var import_react_dialog3 = require("@radix-ui/react-dialog");
|
|
15052
15458
|
|
|
15053
15459
|
// src/private/hooks/useFocusRestore/useFocusRestore.ts
|
|
@@ -15071,7 +15477,7 @@ var useFocusRestore = () => {
|
|
|
15071
15477
|
|
|
15072
15478
|
// src/components/Modal/ModalContent.tsx
|
|
15073
15479
|
var import_jsx_runtime292 = require("react/jsx-runtime");
|
|
15074
|
-
var modalEnter =
|
|
15480
|
+
var modalEnter = import_styled_components95.keyframes`
|
|
15075
15481
|
from {
|
|
15076
15482
|
opacity: 0;
|
|
15077
15483
|
transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
|
|
@@ -15082,7 +15488,7 @@ var modalEnter = import_styled_components94.keyframes`
|
|
|
15082
15488
|
transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
|
|
15083
15489
|
}
|
|
15084
15490
|
`;
|
|
15085
|
-
var modalExit =
|
|
15491
|
+
var modalExit = import_styled_components95.keyframes`
|
|
15086
15492
|
from {
|
|
15087
15493
|
opacity: 1;
|
|
15088
15494
|
transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
|
|
@@ -15093,7 +15499,7 @@ var modalExit = import_styled_components94.keyframes`
|
|
|
15093
15499
|
transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
|
|
15094
15500
|
}
|
|
15095
15501
|
`;
|
|
15096
|
-
var centeredModalStyles =
|
|
15502
|
+
var centeredModalStyles = import_styled_components95.css`
|
|
15097
15503
|
--wui-modal-screen-offset: var(--wui-space-05);
|
|
15098
15504
|
--wui-modal-translate-y: -50%;
|
|
15099
15505
|
|
|
@@ -15109,7 +15515,7 @@ var centeredModalStyles = import_styled_components94.css`
|
|
|
15109
15515
|
animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
15110
15516
|
}
|
|
15111
15517
|
`;
|
|
15112
|
-
var fixedTopModalStyles =
|
|
15518
|
+
var fixedTopModalStyles = import_styled_components95.css`
|
|
15113
15519
|
--wui-modal-screen-offset-top: 15vh;
|
|
15114
15520
|
--wui-modal-screen-offset-bottom: 5vh;
|
|
15115
15521
|
--wui-modal-translate-y: 0%;
|
|
@@ -15128,7 +15534,7 @@ var fixedTopModalStyles = import_styled_components94.css`
|
|
|
15128
15534
|
animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
|
|
15129
15535
|
}
|
|
15130
15536
|
`;
|
|
15131
|
-
var slideInRight =
|
|
15537
|
+
var slideInRight = import_styled_components95.keyframes`
|
|
15132
15538
|
from {
|
|
15133
15539
|
opacity: 0;
|
|
15134
15540
|
transform: translateX(100%);
|
|
@@ -15139,7 +15545,7 @@ var slideInRight = import_styled_components94.keyframes`
|
|
|
15139
15545
|
transform: translateX(0);
|
|
15140
15546
|
}
|
|
15141
15547
|
`;
|
|
15142
|
-
var slideOutRight =
|
|
15548
|
+
var slideOutRight = import_styled_components95.keyframes`
|
|
15143
15549
|
from {
|
|
15144
15550
|
opacity: 1;
|
|
15145
15551
|
transform: translateX(0);
|
|
@@ -15150,7 +15556,7 @@ var slideOutRight = import_styled_components94.keyframes`
|
|
|
15150
15556
|
transform: translateX(100%);
|
|
15151
15557
|
}
|
|
15152
15558
|
`;
|
|
15153
|
-
var rightSidePanelModalStyles =
|
|
15559
|
+
var rightSidePanelModalStyles = import_styled_components95.css`
|
|
15154
15560
|
--wui-modal-screen-offset: var(--wui-space-05);
|
|
15155
15561
|
|
|
15156
15562
|
height: calc(100vh - var(--wui-modal-screen-offset) * 2);
|
|
@@ -15168,7 +15574,7 @@ var positionStyleMap = {
|
|
|
15168
15574
|
"fixed-top": fixedTopModalStyles,
|
|
15169
15575
|
"right-side-panel": rightSidePanelModalStyles
|
|
15170
15576
|
};
|
|
15171
|
-
var StyledModalContent = (0,
|
|
15577
|
+
var StyledModalContent = (0, import_styled_components95.default)(import_react_dialog3.Content)`
|
|
15172
15578
|
position: fixed;
|
|
15173
15579
|
display: flex;
|
|
15174
15580
|
flex-direction: column;
|
|
@@ -15215,8 +15621,8 @@ var ModalContent = (0, import_react79.forwardRef)(
|
|
|
15215
15621
|
|
|
15216
15622
|
// src/components/Modal/ModalOverlay.tsx
|
|
15217
15623
|
var import_react_dialog4 = require("@radix-ui/react-dialog");
|
|
15218
|
-
var
|
|
15219
|
-
var backdropShow =
|
|
15624
|
+
var import_styled_components96 = __toESM(require("styled-components"));
|
|
15625
|
+
var backdropShow = import_styled_components96.keyframes`
|
|
15220
15626
|
from {
|
|
15221
15627
|
opacity: 0;
|
|
15222
15628
|
}
|
|
@@ -15225,7 +15631,7 @@ var backdropShow = import_styled_components95.keyframes`
|
|
|
15225
15631
|
opacity: 1;
|
|
15226
15632
|
}
|
|
15227
15633
|
`;
|
|
15228
|
-
var backdropHide =
|
|
15634
|
+
var backdropHide = import_styled_components96.keyframes`
|
|
15229
15635
|
from {
|
|
15230
15636
|
opacity: 1;
|
|
15231
15637
|
}
|
|
@@ -15234,7 +15640,7 @@ var backdropHide = import_styled_components95.keyframes`
|
|
|
15234
15640
|
opacity: 0;
|
|
15235
15641
|
}
|
|
15236
15642
|
`;
|
|
15237
|
-
var ModalOverlay = (0,
|
|
15643
|
+
var ModalOverlay = (0, import_styled_components96.default)(import_react_dialog4.DialogOverlay)`
|
|
15238
15644
|
animation: ${backdropShow} var(--wui-motion-duration-02);
|
|
15239
15645
|
background: var(--wui-color-backdrop);
|
|
15240
15646
|
inset: 0;
|
|
@@ -15249,7 +15655,7 @@ var ModalOverlay = (0, import_styled_components95.default)(import_react_dialog4.
|
|
|
15249
15655
|
// src/components/Modal/Modal.tsx
|
|
15250
15656
|
var import_jsx_runtime293 = require("react/jsx-runtime");
|
|
15251
15657
|
var DEFAULT_MODAL_WIDTH = "532px";
|
|
15252
|
-
var ModalBody =
|
|
15658
|
+
var ModalBody = import_styled_components97.default.div`
|
|
15253
15659
|
flex-direction: column;
|
|
15254
15660
|
display: flex;
|
|
15255
15661
|
flex: 1 0 0;
|
|
@@ -15316,7 +15722,7 @@ Modal.displayName = "Modal_UI";
|
|
|
15316
15722
|
|
|
15317
15723
|
// src/components/Popover/Popover.tsx
|
|
15318
15724
|
var import_react_popover5 = require("@radix-ui/react-popover");
|
|
15319
|
-
var
|
|
15725
|
+
var import_styled_components99 = __toESM(require("styled-components"));
|
|
15320
15726
|
|
|
15321
15727
|
// src/private/helpers/getControls/getControlProps.tsx
|
|
15322
15728
|
var import_type_guards56 = require("@wistia/type-guards");
|
|
@@ -15326,12 +15732,12 @@ var getControlProps = (isOpen, onOpenChange) => {
|
|
|
15326
15732
|
|
|
15327
15733
|
// src/components/Popover/PopoverArrow.tsx
|
|
15328
15734
|
var import_react_popover4 = require("@radix-ui/react-popover");
|
|
15329
|
-
var
|
|
15735
|
+
var import_styled_components98 = __toESM(require("styled-components"));
|
|
15330
15736
|
var import_jsx_runtime294 = require("react/jsx-runtime");
|
|
15331
|
-
var StyledPath =
|
|
15737
|
+
var StyledPath = import_styled_components98.default.path`
|
|
15332
15738
|
fill: var(--wui-color-border-secondary);
|
|
15333
15739
|
`;
|
|
15334
|
-
var circleAnimation =
|
|
15740
|
+
var circleAnimation = import_styled_components98.keyframes`
|
|
15335
15741
|
0% {
|
|
15336
15742
|
opacity: var(--wui-popover-arrow-circle-starting-opacity);
|
|
15337
15743
|
}
|
|
@@ -15339,7 +15745,7 @@ var circleAnimation = import_styled_components97.keyframes`
|
|
|
15339
15745
|
opacity: 0;
|
|
15340
15746
|
}
|
|
15341
15747
|
`;
|
|
15342
|
-
var StyledCircle =
|
|
15748
|
+
var StyledCircle = import_styled_components98.default.circle`
|
|
15343
15749
|
stroke: var(--wui-color-border-active);
|
|
15344
15750
|
animation-duration: 2s;
|
|
15345
15751
|
animation-iteration-count: infinite;
|
|
@@ -15360,7 +15766,7 @@ var StyledCircle = import_styled_components97.default.circle`
|
|
|
15360
15766
|
}
|
|
15361
15767
|
|
|
15362
15768
|
@media (prefers-reduced-motion: no-preference) {
|
|
15363
|
-
${({ $isAnimated }) => $isAnimated &&
|
|
15769
|
+
${({ $isAnimated }) => $isAnimated && import_styled_components98.css`
|
|
15364
15770
|
animation-name: ${circleAnimation};
|
|
15365
15771
|
`}
|
|
15366
15772
|
}
|
|
@@ -15406,10 +15812,10 @@ PopoverArrow.displayName = "PopoverArrow_UI";
|
|
|
15406
15812
|
|
|
15407
15813
|
// src/components/Popover/Popover.tsx
|
|
15408
15814
|
var import_jsx_runtime295 = require("react/jsx-runtime");
|
|
15409
|
-
var StyledContent2 = (0,
|
|
15815
|
+
var StyledContent2 = (0, import_styled_components99.default)(import_react_popover5.Content)`
|
|
15410
15816
|
z-index: var(--wui-zindex-popover);
|
|
15411
15817
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
15412
|
-
${({ $unstyled }) => !$unstyled &&
|
|
15818
|
+
${({ $unstyled }) => !$unstyled && import_styled_components99.css`
|
|
15413
15819
|
border-radius: var(--wui-border-radius-02);
|
|
15414
15820
|
padding: var(--wui-space-04);
|
|
15415
15821
|
max-width: var(--wui-popover-max-width, 320px);
|
|
@@ -15475,11 +15881,11 @@ var Popover = ({
|
|
|
15475
15881
|
Popover.displayName = "Popover_UI";
|
|
15476
15882
|
|
|
15477
15883
|
// src/components/ProgressBar/ProgressBar.tsx
|
|
15478
|
-
var
|
|
15884
|
+
var import_styled_components100 = __toESM(require("styled-components"));
|
|
15479
15885
|
var import_react_progress = require("@radix-ui/react-progress");
|
|
15480
15886
|
var import_type_guards57 = require("@wistia/type-guards");
|
|
15481
15887
|
var import_jsx_runtime296 = require("react/jsx-runtime");
|
|
15482
|
-
var ProgressBarWrapper =
|
|
15888
|
+
var ProgressBarWrapper = import_styled_components100.default.div`
|
|
15483
15889
|
--progress-bar-height: 8px;
|
|
15484
15890
|
|
|
15485
15891
|
display: flex;
|
|
@@ -15493,7 +15899,7 @@ var getTranslateValue = (progress, max) => {
|
|
|
15493
15899
|
const progressPercentage = progress / max * 100;
|
|
15494
15900
|
return `translateX(-${100 - progressPercentage}%)`;
|
|
15495
15901
|
};
|
|
15496
|
-
var ProgressBarLabel =
|
|
15902
|
+
var ProgressBarLabel = import_styled_components100.default.div`
|
|
15497
15903
|
display: flex;
|
|
15498
15904
|
line-height: var(--wui-typography-label-3-line-height);
|
|
15499
15905
|
font-size: var(--wui-typography-label-3-size);
|
|
@@ -15501,7 +15907,7 @@ var ProgressBarLabel = import_styled_components99.default.div`
|
|
|
15501
15907
|
color: var(--wui-color-text-secondary);
|
|
15502
15908
|
flex-shrink: 0;
|
|
15503
15909
|
`;
|
|
15504
|
-
var StyledProgressIndicator = (0,
|
|
15910
|
+
var StyledProgressIndicator = (0, import_styled_components100.default)(import_react_progress.Indicator)`
|
|
15505
15911
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
15506
15912
|
background-color: var(--wui-color-bg-fill);
|
|
15507
15913
|
width: 100%;
|
|
@@ -15511,7 +15917,7 @@ var StyledProgressIndicator = (0, import_styled_components99.default)(import_rea
|
|
|
15511
15917
|
transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
|
|
15512
15918
|
transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
|
|
15513
15919
|
`;
|
|
15514
|
-
var StyledProgressBar = (0,
|
|
15920
|
+
var StyledProgressBar = (0, import_styled_components100.default)(import_react_progress.Root)`
|
|
15515
15921
|
${({ $colorScheme }) => getColorScheme($colorScheme)}
|
|
15516
15922
|
position: relative;
|
|
15517
15923
|
overflow: hidden;
|
|
@@ -15559,17 +15965,17 @@ ProgressBar.displayName = "ProgressBar_UI";
|
|
|
15559
15965
|
// src/components/Radio/Radio.tsx
|
|
15560
15966
|
var import_type_guards58 = require("@wistia/type-guards");
|
|
15561
15967
|
var import_react81 = require("react");
|
|
15562
|
-
var
|
|
15968
|
+
var import_styled_components101 = __toESM(require("styled-components"));
|
|
15563
15969
|
var import_jsx_runtime297 = require("react/jsx-runtime");
|
|
15564
|
-
var sizeSmall2 =
|
|
15970
|
+
var sizeSmall2 = import_styled_components101.css`
|
|
15565
15971
|
--wui-radio-size: 14px;
|
|
15566
15972
|
--wui-radio-icon-size: 7px;
|
|
15567
15973
|
`;
|
|
15568
|
-
var sizeMedium2 =
|
|
15974
|
+
var sizeMedium2 = import_styled_components101.css`
|
|
15569
15975
|
--wui-radio-size: 16px;
|
|
15570
15976
|
--wui-radio-icon-size: 8px;
|
|
15571
15977
|
`;
|
|
15572
|
-
var sizeLarge2 =
|
|
15978
|
+
var sizeLarge2 = import_styled_components101.css`
|
|
15573
15979
|
--wui-radio-size: 20px;
|
|
15574
15980
|
--wui-radio-icon-size: 10px;
|
|
15575
15981
|
`;
|
|
@@ -15578,7 +15984,7 @@ var getSizeCss3 = (size) => {
|
|
|
15578
15984
|
if (size === "lg") return sizeLarge2;
|
|
15579
15985
|
return sizeMedium2;
|
|
15580
15986
|
};
|
|
15581
|
-
var StyledRadioWrapper =
|
|
15987
|
+
var StyledRadioWrapper = import_styled_components101.default.div`
|
|
15582
15988
|
--wui-radio-background-color: var(--wui-color-bg-surface);
|
|
15583
15989
|
--wui-radio-border-color: var(--wui-color-border-secondary);
|
|
15584
15990
|
--wui-radio-icon-color: transparent;
|
|
@@ -15612,7 +16018,7 @@ var StyledRadioWrapper = import_styled_components100.default.div`
|
|
|
15612
16018
|
/* TODO this solves a problem but potentially causes and a11y issue */
|
|
15613
16019
|
user-select: none;
|
|
15614
16020
|
`;
|
|
15615
|
-
var StyledRadioInput =
|
|
16021
|
+
var StyledRadioInput = import_styled_components101.default.div`
|
|
15616
16022
|
${({ $size }) => getSizeCss3($size)}
|
|
15617
16023
|
width: var(--wui-radio-size);
|
|
15618
16024
|
height: var(--wui-radio-size);
|
|
@@ -15638,7 +16044,7 @@ var StyledRadioInput = import_styled_components100.default.div`
|
|
|
15638
16044
|
transform: translate(-50%, -50%);
|
|
15639
16045
|
}
|
|
15640
16046
|
`;
|
|
15641
|
-
var StyledHiddenRadioInput =
|
|
16047
|
+
var StyledHiddenRadioInput = import_styled_components101.default.input`
|
|
15642
16048
|
${visuallyHiddenStyle}
|
|
15643
16049
|
`;
|
|
15644
16050
|
var Radio = (0, import_react81.forwardRef)(
|
|
@@ -15710,17 +16116,17 @@ var import_react83 = require("react");
|
|
|
15710
16116
|
|
|
15711
16117
|
// src/components/RadioCard/RadioCardRoot.tsx
|
|
15712
16118
|
var import_react82 = require("react");
|
|
15713
|
-
var
|
|
16119
|
+
var import_styled_components102 = __toESM(require("styled-components"));
|
|
15714
16120
|
var import_type_guards59 = require("@wistia/type-guards");
|
|
15715
16121
|
var import_jsx_runtime298 = require("react/jsx-runtime");
|
|
15716
|
-
var checkedStyles =
|
|
16122
|
+
var checkedStyles = import_styled_components102.css`
|
|
15717
16123
|
--wui-radio-card-border-color: var(--wui-color-focus-ring);
|
|
15718
16124
|
--wui-color-icon: var(--wui-color-icon-selected);
|
|
15719
16125
|
--wui-radio-card-background-color: var(--wui-color-bg-surface-info);
|
|
15720
16126
|
--wui-color-text: var(--wui-color-text-info);
|
|
15721
16127
|
--wui-color-text-secondary: var(--wui-color-text-info);
|
|
15722
16128
|
`;
|
|
15723
|
-
var disabledStyles =
|
|
16129
|
+
var disabledStyles = import_styled_components102.css`
|
|
15724
16130
|
--wui-radio-card-border-color: var(--wui-color-border-disabled);
|
|
15725
16131
|
--wui-radio-card-background-color: var(--wui-color-bg-surface-disabled);
|
|
15726
16132
|
--wui-radio-card-cursor: not-allowed;
|
|
@@ -15728,10 +16134,10 @@ var disabledStyles = import_styled_components101.css`
|
|
|
15728
16134
|
--wui-color-text: var(--wui-color-text-disabled);
|
|
15729
16135
|
--wui-color-text-secondary: var(--wui-color-text-disabled);
|
|
15730
16136
|
`;
|
|
15731
|
-
var focusStyles =
|
|
16137
|
+
var focusStyles = import_styled_components102.css`
|
|
15732
16138
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
15733
16139
|
`;
|
|
15734
|
-
var imageCoverStyles =
|
|
16140
|
+
var imageCoverStyles = import_styled_components102.css`
|
|
15735
16141
|
--wui-radio-card-image-inset: 0px;
|
|
15736
16142
|
--wui-radio-card-border-width: 0px;
|
|
15737
16143
|
--wui-inset-shadow-width: 1px;
|
|
@@ -15762,7 +16168,7 @@ var imageCoverStyles = import_styled_components101.css`
|
|
|
15762
16168
|
transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
|
|
15763
16169
|
}
|
|
15764
16170
|
`;
|
|
15765
|
-
var StyledCard2 =
|
|
16171
|
+
var StyledCard2 = import_styled_components102.default.label`
|
|
15766
16172
|
--wui-radio-card-border-color: var(--wui-color-border-secondary);
|
|
15767
16173
|
--wui-radio-card-background-color: var(--wui-color-bg-surface);
|
|
15768
16174
|
--wui-radio-card-cursor: pointer;
|
|
@@ -15816,7 +16222,7 @@ var StyledCard2 = import_styled_components101.default.label`
|
|
|
15816
16222
|
}
|
|
15817
16223
|
}
|
|
15818
16224
|
`;
|
|
15819
|
-
var StyledHiddenInput =
|
|
16225
|
+
var StyledHiddenInput = import_styled_components102.default.input`
|
|
15820
16226
|
${visuallyHiddenStyle}
|
|
15821
16227
|
`;
|
|
15822
16228
|
var RadioCardRoot = (0, import_react82.forwardRef)(
|
|
@@ -15871,12 +16277,12 @@ var RadioCardRoot = (0, import_react82.forwardRef)(
|
|
|
15871
16277
|
RadioCardRoot.displayName = "RadioCardRoot_UI";
|
|
15872
16278
|
|
|
15873
16279
|
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
15874
|
-
var
|
|
16280
|
+
var import_styled_components104 = __toESM(require("styled-components"));
|
|
15875
16281
|
var import_type_guards60 = require("@wistia/type-guards");
|
|
15876
16282
|
|
|
15877
16283
|
// src/components/RadioCard/RadioCardIndicator.tsx
|
|
15878
|
-
var
|
|
15879
|
-
var RadioCardIndicator =
|
|
16284
|
+
var import_styled_components103 = __toESM(require("styled-components"));
|
|
16285
|
+
var RadioCardIndicator = import_styled_components103.default.div`
|
|
15880
16286
|
--wui-radio-card-indicator-size: 14px;
|
|
15881
16287
|
--wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
|
|
15882
16288
|
--wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
|
|
@@ -15926,15 +16332,15 @@ RadioCardIndicator.displayName = "RadioCardIndicator_UI";
|
|
|
15926
16332
|
|
|
15927
16333
|
// src/components/RadioCard/RadioCardDefaultLayout.tsx
|
|
15928
16334
|
var import_jsx_runtime299 = require("react/jsx-runtime");
|
|
15929
|
-
var StyledCardContent =
|
|
16335
|
+
var StyledCardContent = import_styled_components104.default.div`
|
|
15930
16336
|
display: grid;
|
|
15931
16337
|
grid-auto-flow: column;
|
|
15932
16338
|
gap: var(--wui-space-02);
|
|
15933
16339
|
`;
|
|
15934
|
-
var StyledCardIcon =
|
|
16340
|
+
var StyledCardIcon = import_styled_components104.default.div`
|
|
15935
16341
|
display: contents;
|
|
15936
16342
|
`;
|
|
15937
|
-
var StyledIndicatorContainer =
|
|
16343
|
+
var StyledIndicatorContainer = import_styled_components104.default.div`
|
|
15938
16344
|
height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
|
|
15939
16345
|
display: flex;
|
|
15940
16346
|
align-items: center;
|
|
@@ -15973,8 +16379,8 @@ var RadioCardDefaultLayout = ({
|
|
|
15973
16379
|
RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
|
|
15974
16380
|
|
|
15975
16381
|
// src/components/RadioCard/RadioCardChildrenContainer.tsx
|
|
15976
|
-
var
|
|
15977
|
-
var RadioCardChildrenContainer =
|
|
16382
|
+
var import_styled_components105 = __toESM(require("styled-components"));
|
|
16383
|
+
var RadioCardChildrenContainer = import_styled_components105.default.div`
|
|
15978
16384
|
flex: 1 1 auto;
|
|
15979
16385
|
`;
|
|
15980
16386
|
|
|
@@ -16033,49 +16439,49 @@ RadioCardImage.displayName = "RadioCardImage_UI";
|
|
|
16033
16439
|
|
|
16034
16440
|
// src/components/ScrollArea/ScrollArea.tsx
|
|
16035
16441
|
var import_react85 = require("react");
|
|
16036
|
-
var
|
|
16442
|
+
var import_styled_components106 = __toESM(require("styled-components"));
|
|
16037
16443
|
var import_throttle_debounce2 = require("throttle-debounce");
|
|
16038
16444
|
var import_jsx_runtime302 = require("react/jsx-runtime");
|
|
16039
16445
|
var SHADOW_SIZE_PX = 8;
|
|
16040
|
-
var Container10 =
|
|
16446
|
+
var Container10 = import_styled_components106.default.div`
|
|
16041
16447
|
overflow: hidden;
|
|
16042
16448
|
position: relative;
|
|
16043
16449
|
flex: 1 1 auto;
|
|
16044
16450
|
`;
|
|
16045
|
-
var ScrollContainer =
|
|
16451
|
+
var ScrollContainer = import_styled_components106.default.div`
|
|
16046
16452
|
overflow: auto;
|
|
16047
16453
|
height: 100%;
|
|
16048
16454
|
width: 100%;
|
|
16049
16455
|
`;
|
|
16050
|
-
var Shadow =
|
|
16456
|
+
var Shadow = import_styled_components106.default.div`
|
|
16051
16457
|
pointer-events: none;
|
|
16052
16458
|
position: absolute;
|
|
16053
16459
|
transition: box-shadow var(--wui-motion-duration-04) var(--wui-motion-ease);
|
|
16054
16460
|
box-shadow: ${({ $isVisible }) => $isVisible ? `0 0 ${SHADOW_SIZE_PX}px ${SHADOW_SIZE_PX}px var(--wui-color-drop-shadow)` : "none"};
|
|
16055
16461
|
z-index: 1;
|
|
16056
16462
|
`;
|
|
16057
|
-
var ShadowAtTop = (0,
|
|
16463
|
+
var ShadowAtTop = (0, import_styled_components106.default)(Shadow)`
|
|
16058
16464
|
transform: translateY(-${SHADOW_SIZE_PX}px);
|
|
16059
16465
|
height: 0;
|
|
16060
16466
|
left: 0;
|
|
16061
16467
|
right: 0;
|
|
16062
16468
|
top: 0;
|
|
16063
16469
|
`;
|
|
16064
|
-
var ShadowAtBottom = (0,
|
|
16470
|
+
var ShadowAtBottom = (0, import_styled_components106.default)(Shadow)`
|
|
16065
16471
|
transform: translateY(${SHADOW_SIZE_PX}px);
|
|
16066
16472
|
bottom: 0;
|
|
16067
16473
|
height: 0;
|
|
16068
16474
|
left: 0;
|
|
16069
16475
|
right: 0;
|
|
16070
16476
|
`;
|
|
16071
|
-
var ShadowAtLeft = (0,
|
|
16477
|
+
var ShadowAtLeft = (0, import_styled_components106.default)(Shadow)`
|
|
16072
16478
|
transform: translateX(-${SHADOW_SIZE_PX}px);
|
|
16073
16479
|
bottom: 0;
|
|
16074
16480
|
left: 0;
|
|
16075
16481
|
top: 0;
|
|
16076
16482
|
width: 0;
|
|
16077
16483
|
`;
|
|
16078
|
-
var ShadowAtRight = (0,
|
|
16484
|
+
var ShadowAtRight = (0, import_styled_components106.default)(Shadow)`
|
|
16079
16485
|
transform: translateX(${SHADOW_SIZE_PX}px);
|
|
16080
16486
|
bottom: 0;
|
|
16081
16487
|
right: 0;
|
|
@@ -16136,7 +16542,7 @@ ScrollArea.displayName = "ScrollArea_UI";
|
|
|
16136
16542
|
|
|
16137
16543
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
16138
16544
|
var import_react88 = require("react");
|
|
16139
|
-
var
|
|
16545
|
+
var import_styled_components108 = __toESM(require("styled-components"));
|
|
16140
16546
|
var import_react_toggle_group3 = require("@radix-ui/react-toggle-group");
|
|
16141
16547
|
var import_type_guards62 = require("@wistia/type-guards");
|
|
16142
16548
|
|
|
@@ -16174,7 +16580,7 @@ var useSelectedItemStyle = () => {
|
|
|
16174
16580
|
};
|
|
16175
16581
|
|
|
16176
16582
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
16177
|
-
var
|
|
16583
|
+
var import_styled_components107 = __toESM(require("styled-components"));
|
|
16178
16584
|
var import_type_guards61 = require("@wistia/type-guards");
|
|
16179
16585
|
|
|
16180
16586
|
// src/components/SegmentedControl/useSegmentedControlValue.tsx
|
|
@@ -16191,12 +16597,12 @@ var useSegmentedControlValue = () => {
|
|
|
16191
16597
|
|
|
16192
16598
|
// src/components/SegmentedControl/SelectedItemIndicator.tsx
|
|
16193
16599
|
var import_jsx_runtime304 = require("react/jsx-runtime");
|
|
16194
|
-
var selectedItemIndicatorStyles =
|
|
16600
|
+
var selectedItemIndicatorStyles = import_styled_components107.css`
|
|
16195
16601
|
background-color: var(--wui-color-bg-fill-white);
|
|
16196
16602
|
border-radius: var(--wui-border-radius-rounded);
|
|
16197
16603
|
box-shadow: var(--wui-elevation-01);
|
|
16198
16604
|
`;
|
|
16199
|
-
var SelectedItemIndicatorDiv =
|
|
16605
|
+
var SelectedItemIndicatorDiv = import_styled_components107.default.div`
|
|
16200
16606
|
${selectedItemIndicatorStyles}
|
|
16201
16607
|
left: 0;
|
|
16202
16608
|
position: absolute;
|
|
@@ -16223,7 +16629,7 @@ var SelectedItemIndicator = () => {
|
|
|
16223
16629
|
|
|
16224
16630
|
// src/components/SegmentedControl/SegmentedControl.tsx
|
|
16225
16631
|
var import_jsx_runtime305 = require("react/jsx-runtime");
|
|
16226
|
-
var segmentedControlStyles =
|
|
16632
|
+
var segmentedControlStyles = import_styled_components108.css`
|
|
16227
16633
|
display: inline-flex;
|
|
16228
16634
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
16229
16635
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -16234,7 +16640,7 @@ var segmentedControlStyles = import_styled_components107.css`
|
|
|
16234
16640
|
position: relative;
|
|
16235
16641
|
width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
|
|
16236
16642
|
`;
|
|
16237
|
-
var StyledSegmentedControl = (0,
|
|
16643
|
+
var StyledSegmentedControl = (0, import_styled_components108.default)(import_react_toggle_group3.Root)`
|
|
16238
16644
|
${segmentedControlStyles}
|
|
16239
16645
|
`;
|
|
16240
16646
|
var SegmentedControl = (0, import_react88.forwardRef)(
|
|
@@ -16273,11 +16679,11 @@ SegmentedControl.displayName = "SegmentedControl_UI";
|
|
|
16273
16679
|
|
|
16274
16680
|
// src/components/SegmentedControl/SegmentedControlItem.tsx
|
|
16275
16681
|
var import_react89 = require("react");
|
|
16276
|
-
var
|
|
16682
|
+
var import_styled_components109 = __toESM(require("styled-components"));
|
|
16277
16683
|
var import_react_toggle_group4 = require("@radix-ui/react-toggle-group");
|
|
16278
16684
|
var import_type_guards63 = require("@wistia/type-guards");
|
|
16279
16685
|
var import_jsx_runtime306 = require("react/jsx-runtime");
|
|
16280
|
-
var segmentedControlItemStyles =
|
|
16686
|
+
var segmentedControlItemStyles = import_styled_components109.css`
|
|
16281
16687
|
all: unset; /* ToggleGroupItem is a button element */
|
|
16282
16688
|
align-items: center;
|
|
16283
16689
|
border-radius: var(--wui-border-radius-rounded);
|
|
@@ -16345,7 +16751,7 @@ var segmentedControlItemStyles = import_styled_components108.css`
|
|
|
16345
16751
|
}
|
|
16346
16752
|
}
|
|
16347
16753
|
`;
|
|
16348
|
-
var StyledSegmentedControlItem = (0,
|
|
16754
|
+
var StyledSegmentedControlItem = (0, import_styled_components109.default)(import_react_toggle_group4.Item)`
|
|
16349
16755
|
${segmentedControlItemStyles}
|
|
16350
16756
|
`;
|
|
16351
16757
|
var SegmentedControlItem = (0, import_react89.forwardRef)(
|
|
@@ -16409,9 +16815,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem_UI";
|
|
|
16409
16815
|
// src/components/Select/Select.tsx
|
|
16410
16816
|
var import_react_select = require("@radix-ui/react-select");
|
|
16411
16817
|
var import_react90 = require("react");
|
|
16412
|
-
var
|
|
16818
|
+
var import_styled_components110 = __toESM(require("styled-components"));
|
|
16413
16819
|
var import_jsx_runtime307 = require("react/jsx-runtime");
|
|
16414
|
-
var StyledTrigger2 = (0,
|
|
16820
|
+
var StyledTrigger2 = (0, import_styled_components110.default)(import_react_select.Trigger)`
|
|
16415
16821
|
${({ $colorScheme }) => getColorScheme($colorScheme)};
|
|
16416
16822
|
${inputCss};
|
|
16417
16823
|
padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
|
|
@@ -16449,13 +16855,14 @@ var StyledTrigger2 = (0, import_styled_components109.default)(import_react_selec
|
|
|
16449
16855
|
&:disabled {
|
|
16450
16856
|
outline-color: var(--wui-color-border-disabled);
|
|
16451
16857
|
background-color: var(--wui-color-bg-surface-disabled);
|
|
16858
|
+
cursor: not-allowed;
|
|
16452
16859
|
}
|
|
16453
16860
|
|
|
16454
16861
|
&[data-placeholder] {
|
|
16455
16862
|
color: var(--wui-input-placeholder);
|
|
16456
16863
|
}
|
|
16457
16864
|
`;
|
|
16458
|
-
var StyledContent3 = (0,
|
|
16865
|
+
var StyledContent3 = (0, import_styled_components110.default)(import_react_select.Content)`
|
|
16459
16866
|
--wui-select-content-border: var(--wui-color-border);
|
|
16460
16867
|
--wui-select-content-bg: var(--wui-color-bg-surface);
|
|
16461
16868
|
--wui-select-content-border-radius: var(--wui-border-radius-02);
|
|
@@ -16468,10 +16875,15 @@ var StyledContent3 = (0, import_styled_components109.default)(import_react_selec
|
|
|
16468
16875
|
background-color: var(--wui-select-content-bg);
|
|
16469
16876
|
border: 1px solid var(--wui-select-content-border);
|
|
16470
16877
|
border-radius: var(--wui-select-content-border-radius);
|
|
16878
|
+
box-shadow: var(--wui-elevation-01);
|
|
16471
16879
|
padding: var(--wui-select-option-padding);
|
|
16472
16880
|
min-width: var(--radix-select-trigger-width);
|
|
16473
16881
|
max-height: var(--radix-select-content-available-height);
|
|
16474
16882
|
z-index: var(--wui-zindex-select);
|
|
16883
|
+
|
|
16884
|
+
[role='separator'] {
|
|
16885
|
+
margin: var(--wui-space-02) 0;
|
|
16886
|
+
}
|
|
16475
16887
|
`;
|
|
16476
16888
|
var Select = (0, import_react90.forwardRef)(
|
|
16477
16889
|
({
|
|
@@ -16480,42 +16892,43 @@ var Select = (0, import_react90.forwardRef)(
|
|
|
16480
16892
|
onChange = () => null,
|
|
16481
16893
|
placeholder = "Select...",
|
|
16482
16894
|
fullWidth = false,
|
|
16895
|
+
forceOpen = false,
|
|
16483
16896
|
...props
|
|
16484
16897
|
}, forwardedRef) => {
|
|
16485
16898
|
const responsiveFullWidth = useResponsiveProp(fullWidth);
|
|
16486
|
-
|
|
16487
|
-
|
|
16488
|
-
|
|
16489
|
-
|
|
16490
|
-
|
|
16491
|
-
|
|
16492
|
-
|
|
16493
|
-
|
|
16494
|
-
|
|
16495
|
-
|
|
16496
|
-
|
|
16497
|
-
|
|
16498
|
-
|
|
16499
|
-
|
|
16500
|
-
|
|
16501
|
-
|
|
16502
|
-
|
|
16503
|
-
|
|
16504
|
-
|
|
16505
|
-
|
|
16506
|
-
|
|
16507
|
-
|
|
16508
|
-
|
|
16509
|
-
|
|
16510
|
-
|
|
16511
|
-
|
|
16512
|
-
|
|
16513
|
-
|
|
16514
|
-
|
|
16515
|
-
|
|
16516
|
-
|
|
16517
|
-
}
|
|
16518
|
-
);
|
|
16899
|
+
const rootProps = {
|
|
16900
|
+
...props,
|
|
16901
|
+
onValueChange: onChange
|
|
16902
|
+
};
|
|
16903
|
+
if (forceOpen) {
|
|
16904
|
+
rootProps["open"] = true;
|
|
16905
|
+
}
|
|
16906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(import_react_select.Root, { ...rootProps, children: [
|
|
16907
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
|
|
16908
|
+
StyledTrigger2,
|
|
16909
|
+
{
|
|
16910
|
+
ref: forwardedRef,
|
|
16911
|
+
$colorScheme: colorScheme,
|
|
16912
|
+
$fullWidth: responsiveFullWidth,
|
|
16913
|
+
...props,
|
|
16914
|
+
children: [
|
|
16915
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Value, { placeholder }),
|
|
16916
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
|
|
16917
|
+
Icon,
|
|
16918
|
+
{
|
|
16919
|
+
size: "md",
|
|
16920
|
+
type: "caret-down"
|
|
16921
|
+
}
|
|
16922
|
+
)
|
|
16923
|
+
]
|
|
16924
|
+
}
|
|
16925
|
+
),
|
|
16926
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(StyledContent3, { position: "popper", children: [
|
|
16927
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-up" }) }),
|
|
16928
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Viewport, { children }),
|
|
16929
|
+
/* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-down" }) })
|
|
16930
|
+
] }) })
|
|
16931
|
+
] });
|
|
16519
16932
|
}
|
|
16520
16933
|
);
|
|
16521
16934
|
Select.displayName = "Select_UI";
|
|
@@ -16523,14 +16936,14 @@ Select.displayName = "Select_UI";
|
|
|
16523
16936
|
// src/components/Select/SelectOption.tsx
|
|
16524
16937
|
var import_react_select2 = require("@radix-ui/react-select");
|
|
16525
16938
|
var import_react91 = require("react");
|
|
16526
|
-
var
|
|
16939
|
+
var import_styled_components111 = __toESM(require("styled-components"));
|
|
16527
16940
|
var import_type_guards64 = require("@wistia/type-guards");
|
|
16528
16941
|
var import_jsx_runtime308 = require("react/jsx-runtime");
|
|
16529
|
-
var StyledItem = (0,
|
|
16530
|
-
${
|
|
16942
|
+
var StyledItem = (0, import_styled_components111.default)(import_react_select2.Item)`
|
|
16943
|
+
${getTypographicStyles("label3")}
|
|
16531
16944
|
display: flex;
|
|
16532
16945
|
padding: var(--wui-select-option-padding);
|
|
16533
|
-
|
|
16946
|
+
justify-content: space-between;
|
|
16534
16947
|
font-size: var(--font-size);
|
|
16535
16948
|
font-weight: var(--font-weight);
|
|
16536
16949
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -16550,9 +16963,6 @@ var StyledItem = (0, import_styled_components110.default)(import_react_select2.I
|
|
|
16550
16963
|
background-color: transparent;
|
|
16551
16964
|
}
|
|
16552
16965
|
`;
|
|
16553
|
-
var StyledIconContainer2 = import_styled_components110.default.span`
|
|
16554
|
-
width: 12px;
|
|
16555
|
-
`;
|
|
16556
16966
|
var SelectOption = (0, import_react91.forwardRef)(
|
|
16557
16967
|
({ children, selectedDisplayValue, ...props }, forwardedRef) => {
|
|
16558
16968
|
return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
|
|
@@ -16561,17 +16971,17 @@ var SelectOption = (0, import_react91.forwardRef)(
|
|
|
16561
16971
|
...props,
|
|
16562
16972
|
ref: forwardedRef,
|
|
16563
16973
|
children: [
|
|
16564
|
-
|
|
16974
|
+
(0, import_type_guards64.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { children: [
|
|
16975
|
+
children,
|
|
16976
|
+
/* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
|
|
16977
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children }),
|
|
16978
|
+
/* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
|
|
16565
16979
|
Icon,
|
|
16566
16980
|
{
|
|
16567
|
-
size: "
|
|
16981
|
+
size: "md",
|
|
16568
16982
|
type: "checkmark"
|
|
16569
16983
|
}
|
|
16570
|
-
) })
|
|
16571
|
-
(0, import_type_guards64.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { children: [
|
|
16572
|
-
children,
|
|
16573
|
-
/* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
|
|
16574
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(import_react_select2.ItemText, { children })
|
|
16984
|
+
) })
|
|
16575
16985
|
]
|
|
16576
16986
|
}
|
|
16577
16987
|
);
|
|
@@ -16581,18 +16991,18 @@ SelectOption.displayName = "SelectOption_UI";
|
|
|
16581
16991
|
|
|
16582
16992
|
// src/components/Select/SelectOptionGroup.tsx
|
|
16583
16993
|
var import_react_select3 = require("@radix-ui/react-select");
|
|
16584
|
-
var
|
|
16994
|
+
var import_styled_components112 = __toESM(require("styled-components"));
|
|
16585
16995
|
var import_jsx_runtime309 = require("react/jsx-runtime");
|
|
16586
|
-
var StyledLabel4 = (0,
|
|
16996
|
+
var StyledLabel4 = (0, import_styled_components112.default)(import_react_select3.Label)`
|
|
16587
16997
|
padding: var(--wui-select-option-padding);
|
|
16588
16998
|
`;
|
|
16589
16999
|
var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
16590
17000
|
return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(import_react_select3.Group, { ...props, children: [
|
|
16591
17001
|
/* @__PURE__ */ (0, import_jsx_runtime309.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
|
|
16592
|
-
|
|
17002
|
+
Heading,
|
|
16593
17003
|
{
|
|
16594
|
-
|
|
16595
|
-
variant: "
|
|
17004
|
+
renderAs: "span",
|
|
17005
|
+
variant: "heading6",
|
|
16596
17006
|
children: label
|
|
16597
17007
|
}
|
|
16598
17008
|
) }),
|
|
@@ -16602,10 +17012,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
|
|
|
16602
17012
|
|
|
16603
17013
|
// src/components/Slider/Slider.tsx
|
|
16604
17014
|
var import_react_slider2 = require("@radix-ui/react-slider");
|
|
16605
|
-
var
|
|
17015
|
+
var import_styled_components113 = __toESM(require("styled-components"));
|
|
16606
17016
|
var import_type_guards65 = require("@wistia/type-guards");
|
|
16607
17017
|
var import_jsx_runtime310 = require("react/jsx-runtime");
|
|
16608
|
-
var SliderContainer =
|
|
17018
|
+
var SliderContainer = import_styled_components113.default.div`
|
|
16609
17019
|
--wui-slider-track-color: var(--wui-gray-6);
|
|
16610
17020
|
--wui-slider-track-border-radius: var(--wui-border-radius-rounded);
|
|
16611
17021
|
--wui-slider-range-color: var(--wui-color-bg-fill);
|
|
@@ -16621,7 +17031,7 @@ var SliderContainer = import_styled_components112.default.div`
|
|
|
16621
17031
|
pointer-events: none;
|
|
16622
17032
|
}
|
|
16623
17033
|
`;
|
|
16624
|
-
var StyledSliderRoot = (0,
|
|
17034
|
+
var StyledSliderRoot = (0, import_styled_components113.default)(import_react_slider2.Root)`
|
|
16625
17035
|
position: relative;
|
|
16626
17036
|
display: flex;
|
|
16627
17037
|
align-items: center;
|
|
@@ -16629,20 +17039,20 @@ var StyledSliderRoot = (0, import_styled_components112.default)(import_react_sli
|
|
|
16629
17039
|
touch-action: none;
|
|
16630
17040
|
width: 100%;
|
|
16631
17041
|
`;
|
|
16632
|
-
var StyledSliderTrack = (0,
|
|
17042
|
+
var StyledSliderTrack = (0, import_styled_components113.default)(import_react_slider2.Track)`
|
|
16633
17043
|
background-color: var(--wui-slider-track-color);
|
|
16634
17044
|
border-radius: var(--wui-slider-track-border-radius);
|
|
16635
17045
|
flex-grow: 1;
|
|
16636
17046
|
height: 6px;
|
|
16637
17047
|
position: relative;
|
|
16638
17048
|
`;
|
|
16639
|
-
var StyledSliderRange = (0,
|
|
17049
|
+
var StyledSliderRange = (0, import_styled_components113.default)(import_react_slider2.Range)`
|
|
16640
17050
|
background-color: var(--wui-slider-range-color);
|
|
16641
17051
|
border-radius: var(--wui-slider-track-border-radius);
|
|
16642
17052
|
height: 100%;
|
|
16643
17053
|
position: absolute;
|
|
16644
17054
|
`;
|
|
16645
|
-
var StyledSliderThumb = (0,
|
|
17055
|
+
var StyledSliderThumb = (0, import_styled_components113.default)(import_react_slider2.Thumb)`
|
|
16646
17056
|
background-color: var(--wui-slider-thumb-color);
|
|
16647
17057
|
border-radius: var(--wui-border-radius-rounded);
|
|
16648
17058
|
cursor: grab;
|
|
@@ -16728,25 +17138,25 @@ var Slider = ({
|
|
|
16728
17138
|
Slider.displayName = "Slider_UI";
|
|
16729
17139
|
|
|
16730
17140
|
// src/components/Table/Table.tsx
|
|
16731
|
-
var
|
|
17141
|
+
var import_styled_components114 = __toESM(require("styled-components"));
|
|
16732
17142
|
var import_jsx_runtime311 = require("react/jsx-runtime");
|
|
16733
|
-
var StyledTable =
|
|
17143
|
+
var StyledTable = import_styled_components114.default.table`
|
|
16734
17144
|
width: 100%;
|
|
16735
17145
|
border-collapse: collapse;
|
|
16736
17146
|
|
|
16737
|
-
${({ $divided }) => $divided &&
|
|
17147
|
+
${({ $divided }) => $divided && import_styled_components114.css`
|
|
16738
17148
|
tr {
|
|
16739
17149
|
border-bottom: 1px solid var(--wui-color-border);
|
|
16740
17150
|
}
|
|
16741
17151
|
`}
|
|
16742
17152
|
|
|
16743
|
-
${({ $striped }) => $striped &&
|
|
17153
|
+
${({ $striped }) => $striped && import_styled_components114.css`
|
|
16744
17154
|
tbody tr:nth-child(even) {
|
|
16745
17155
|
background-color: var(--wui-color-bg-surface-secondary);
|
|
16746
17156
|
}
|
|
16747
17157
|
`}
|
|
16748
17158
|
|
|
16749
|
-
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader &&
|
|
17159
|
+
${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && import_styled_components114.css`
|
|
16750
17160
|
thead {
|
|
16751
17161
|
${visuallyHiddenStyle}
|
|
16752
17162
|
}
|
|
@@ -16773,7 +17183,7 @@ var Table = ({
|
|
|
16773
17183
|
|
|
16774
17184
|
// src/components/Table/TableBody.tsx
|
|
16775
17185
|
var import_react93 = require("react");
|
|
16776
|
-
var
|
|
17186
|
+
var import_styled_components115 = __toESM(require("styled-components"));
|
|
16777
17187
|
|
|
16778
17188
|
// src/components/Table/TableSectionContext.ts
|
|
16779
17189
|
var import_react92 = require("react");
|
|
@@ -16781,27 +17191,27 @@ var TableSectionContext = (0, import_react92.createContext)(null);
|
|
|
16781
17191
|
|
|
16782
17192
|
// src/components/Table/TableBody.tsx
|
|
16783
17193
|
var import_jsx_runtime312 = require("react/jsx-runtime");
|
|
16784
|
-
var StyledTableBody =
|
|
17194
|
+
var StyledTableBody = import_styled_components115.default.tbody``;
|
|
16785
17195
|
var TableBody = ({ children, ...props }) => {
|
|
16786
17196
|
return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(StyledTableBody, { ...props, children }) });
|
|
16787
17197
|
};
|
|
16788
17198
|
|
|
16789
17199
|
// src/components/Table/TableCell.tsx
|
|
16790
17200
|
var import_react94 = require("react");
|
|
16791
|
-
var
|
|
17201
|
+
var import_styled_components116 = __toESM(require("styled-components"));
|
|
16792
17202
|
var import_jsx_runtime313 = require("react/jsx-runtime");
|
|
16793
|
-
var sharedStyles =
|
|
17203
|
+
var sharedStyles = import_styled_components116.css`
|
|
16794
17204
|
color: var(--wui-color-text);
|
|
16795
17205
|
padding: var(--wui-space-02);
|
|
16796
17206
|
text-align: left;
|
|
16797
17207
|
`;
|
|
16798
|
-
var StyledTh =
|
|
17208
|
+
var StyledTh = import_styled_components116.default.th`
|
|
16799
17209
|
${sharedStyles}
|
|
16800
17210
|
font-size: var(--wui-typography-body-4-size);
|
|
16801
17211
|
font-weight: var(--wui-typography-weight-label-bold);
|
|
16802
17212
|
line-height: var(--wui-typography-body-4-line-height);
|
|
16803
17213
|
`;
|
|
16804
|
-
var StyledTd =
|
|
17214
|
+
var StyledTd = import_styled_components116.default.td`
|
|
16805
17215
|
${sharedStyles}
|
|
16806
17216
|
font-size: var(--wui-typography-body-2-size);
|
|
16807
17217
|
font-weight: var(--wui-typography-body-2-weight);
|
|
@@ -16817,26 +17227,26 @@ var TableCell = ({ children, ...props }) => {
|
|
|
16817
17227
|
|
|
16818
17228
|
// src/components/Table/TableFoot.tsx
|
|
16819
17229
|
var import_react95 = require("react");
|
|
16820
|
-
var
|
|
17230
|
+
var import_styled_components117 = __toESM(require("styled-components"));
|
|
16821
17231
|
var import_jsx_runtime314 = require("react/jsx-runtime");
|
|
16822
|
-
var StyledTableFoot =
|
|
17232
|
+
var StyledTableFoot = import_styled_components117.default.tfoot``;
|
|
16823
17233
|
var TableFoot = ({ children, ...props }) => {
|
|
16824
17234
|
return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(StyledTableFoot, { ...props, children }) });
|
|
16825
17235
|
};
|
|
16826
17236
|
|
|
16827
17237
|
// src/components/Table/TableHead.tsx
|
|
16828
17238
|
var import_react96 = require("react");
|
|
16829
|
-
var
|
|
17239
|
+
var import_styled_components118 = __toESM(require("styled-components"));
|
|
16830
17240
|
var import_jsx_runtime315 = require("react/jsx-runtime");
|
|
16831
|
-
var StyledThead =
|
|
17241
|
+
var StyledThead = import_styled_components118.default.thead``;
|
|
16832
17242
|
var TableHead = ({ children, ...props }) => {
|
|
16833
17243
|
return /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(StyledThead, { ...props, children }) });
|
|
16834
17244
|
};
|
|
16835
17245
|
|
|
16836
17246
|
// src/components/Table/TableRow.tsx
|
|
16837
|
-
var
|
|
17247
|
+
var import_styled_components119 = __toESM(require("styled-components"));
|
|
16838
17248
|
var import_jsx_runtime316 = require("react/jsx-runtime");
|
|
16839
|
-
var StyledTableRow =
|
|
17249
|
+
var StyledTableRow = import_styled_components119.default.tr``;
|
|
16840
17250
|
var TableRow = ({ children, ...props }) => {
|
|
16841
17251
|
return /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(StyledTableRow, { ...props, children });
|
|
16842
17252
|
};
|
|
@@ -16901,14 +17311,14 @@ TabsContent.displayName = "TabsContent_UI";
|
|
|
16901
17311
|
|
|
16902
17312
|
// src/components/Tabs/TabsList.tsx
|
|
16903
17313
|
var import_react_tabs3 = require("@radix-ui/react-tabs");
|
|
16904
|
-
var
|
|
17314
|
+
var import_styled_components121 = __toESM(require("styled-components"));
|
|
16905
17315
|
|
|
16906
17316
|
// src/components/Tabs/SelectedTabIndicator.tsx
|
|
16907
17317
|
var import_type_guards67 = require("@wistia/type-guards");
|
|
16908
17318
|
|
|
16909
17319
|
// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
|
|
16910
|
-
var
|
|
16911
|
-
var TabsSelectedItemIndicatorDiv = (0,
|
|
17320
|
+
var import_styled_components120 = __toESM(require("styled-components"));
|
|
17321
|
+
var TabsSelectedItemIndicatorDiv = (0, import_styled_components120.default)(SelectedItemIndicatorDiv)`
|
|
16912
17322
|
&:has(~ button[role='tab']:focus-visible) {
|
|
16913
17323
|
outline: 2px solid var(--wui-color-focus-ring);
|
|
16914
17324
|
}
|
|
@@ -16933,7 +17343,7 @@ var SelectedTabIndicator = () => {
|
|
|
16933
17343
|
|
|
16934
17344
|
// src/components/Tabs/TabsList.tsx
|
|
16935
17345
|
var import_jsx_runtime320 = require("react/jsx-runtime");
|
|
16936
|
-
var StyledRadixTabsList = (0,
|
|
17346
|
+
var StyledRadixTabsList = (0, import_styled_components121.default)(import_react_tabs3.List)`
|
|
16937
17347
|
${segmentedControlStyles}
|
|
16938
17348
|
`;
|
|
16939
17349
|
var TabsList = ({ children, fullWidth = true, ...props }) => {
|
|
@@ -16956,9 +17366,9 @@ var import_react99 = require("react");
|
|
|
16956
17366
|
var import_type_guards68 = require("@wistia/type-guards");
|
|
16957
17367
|
|
|
16958
17368
|
// src/components/Tabs/StyledRadixTabsTrigger.tsx
|
|
16959
|
-
var
|
|
17369
|
+
var import_styled_components122 = __toESM(require("styled-components"));
|
|
16960
17370
|
var import_react_tabs4 = require("@radix-ui/react-tabs");
|
|
16961
|
-
var StyledRadixTabsTrigger = (0,
|
|
17371
|
+
var StyledRadixTabsTrigger = (0, import_styled_components122.default)(import_react_tabs4.Trigger)`
|
|
16962
17372
|
${segmentedControlItemStyles}
|
|
16963
17373
|
|
|
16964
17374
|
&:focus-visible {
|
|
@@ -17019,10 +17429,10 @@ var TabsTrigger = (0, import_react99.forwardRef)(
|
|
|
17019
17429
|
TabsTrigger.displayName = "TabsTrigger_UI";
|
|
17020
17430
|
|
|
17021
17431
|
// src/components/Thumbnail/ThumbnailBadge.tsx
|
|
17022
|
-
var
|
|
17432
|
+
var import_styled_components123 = __toESM(require("styled-components"));
|
|
17023
17433
|
var import_type_guards69 = require("@wistia/type-guards");
|
|
17024
17434
|
var import_jsx_runtime322 = require("react/jsx-runtime");
|
|
17025
|
-
var StyledThumbnailBadge =
|
|
17435
|
+
var StyledThumbnailBadge = import_styled_components123.default.div`
|
|
17026
17436
|
align-items: center;
|
|
17027
17437
|
background-color: rgb(0 0 0 / 50%);
|
|
17028
17438
|
border-radius: var(--wui-border-radius-01);
|
|
@@ -17057,14 +17467,14 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
|
|
|
17057
17467
|
|
|
17058
17468
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
17059
17469
|
var import_react100 = require("react");
|
|
17060
|
-
var
|
|
17470
|
+
var import_styled_components126 = __toESM(require("styled-components"));
|
|
17061
17471
|
var import_type_guards72 = require("@wistia/type-guards");
|
|
17062
17472
|
|
|
17063
17473
|
// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
|
|
17064
17474
|
var import_type_guards70 = require("@wistia/type-guards");
|
|
17065
|
-
var
|
|
17475
|
+
var import_styled_components124 = require("styled-components");
|
|
17066
17476
|
var gradients = {
|
|
17067
|
-
defaultDarkOne:
|
|
17477
|
+
defaultDarkOne: import_styled_components124.css`
|
|
17068
17478
|
background-color: #222d66;
|
|
17069
17479
|
background-image:
|
|
17070
17480
|
radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
|
|
@@ -17072,7 +17482,7 @@ var gradients = {
|
|
|
17072
17482
|
radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
|
|
17073
17483
|
radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
|
|
17074
17484
|
`,
|
|
17075
|
-
defaultDarkTwo:
|
|
17485
|
+
defaultDarkTwo: import_styled_components124.css`
|
|
17076
17486
|
background-color: #222d66;
|
|
17077
17487
|
background-image:
|
|
17078
17488
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
|
|
@@ -17080,7 +17490,7 @@ var gradients = {
|
|
|
17080
17490
|
radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
|
|
17081
17491
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
17082
17492
|
`,
|
|
17083
|
-
defaultLightOne:
|
|
17493
|
+
defaultLightOne: import_styled_components124.css`
|
|
17084
17494
|
background-color: #ccd5ff;
|
|
17085
17495
|
background-image:
|
|
17086
17496
|
radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
|
|
@@ -17088,13 +17498,13 @@ var gradients = {
|
|
|
17088
17498
|
radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
|
|
17089
17499
|
radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
|
|
17090
17500
|
`,
|
|
17091
|
-
defaultLightTwo:
|
|
17501
|
+
defaultLightTwo: import_styled_components124.css`
|
|
17092
17502
|
background-color: #ccd5ff;
|
|
17093
17503
|
background-image:
|
|
17094
17504
|
radial-gradient(ellipse at top, #ccd5ff, transparent),
|
|
17095
17505
|
radial-gradient(ellipse at bottom, #6b84ff, transparent);
|
|
17096
17506
|
`,
|
|
17097
|
-
defaultMidOne:
|
|
17507
|
+
defaultMidOne: import_styled_components124.css`
|
|
17098
17508
|
background-color: #6b84ff;
|
|
17099
17509
|
background-image:
|
|
17100
17510
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
|
|
@@ -17102,13 +17512,13 @@ var gradients = {
|
|
|
17102
17512
|
radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
|
|
17103
17513
|
radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
|
|
17104
17514
|
`,
|
|
17105
|
-
defaultMidTwo:
|
|
17515
|
+
defaultMidTwo: import_styled_components124.css`
|
|
17106
17516
|
background-color: #6b84ff;
|
|
17107
17517
|
background-image:
|
|
17108
17518
|
radial-gradient(ellipse at top, #2949e5, transparent),
|
|
17109
17519
|
radial-gradient(ellipse at bottom, #ccd5ff, transparent);
|
|
17110
17520
|
`,
|
|
17111
|
-
green:
|
|
17521
|
+
green: import_styled_components124.css`
|
|
17112
17522
|
background-color: #fafffa;
|
|
17113
17523
|
background-image:
|
|
17114
17524
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -17116,7 +17526,7 @@ var gradients = {
|
|
|
17116
17526
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
17117
17527
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
17118
17528
|
`,
|
|
17119
|
-
greenWithPop:
|
|
17529
|
+
greenWithPop: import_styled_components124.css`
|
|
17120
17530
|
background-color: #fafffa;
|
|
17121
17531
|
background-image:
|
|
17122
17532
|
radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
|
|
@@ -17124,7 +17534,7 @@ var gradients = {
|
|
|
17124
17534
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
|
|
17125
17535
|
radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
|
|
17126
17536
|
`,
|
|
17127
|
-
pink:
|
|
17537
|
+
pink: import_styled_components124.css`
|
|
17128
17538
|
background-color: #fffff0;
|
|
17129
17539
|
background-image:
|
|
17130
17540
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
|
|
@@ -17132,7 +17542,7 @@ var gradients = {
|
|
|
17132
17542
|
radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
|
|
17133
17543
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
|
|
17134
17544
|
`,
|
|
17135
|
-
pinkWithPop:
|
|
17545
|
+
pinkWithPop: import_styled_components124.css`
|
|
17136
17546
|
background-color: #fffff0;
|
|
17137
17547
|
background-image:
|
|
17138
17548
|
radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
|
|
@@ -17140,7 +17550,7 @@ var gradients = {
|
|
|
17140
17550
|
radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
|
|
17141
17551
|
radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
|
|
17142
17552
|
`,
|
|
17143
|
-
playfulGradientOne:
|
|
17553
|
+
playfulGradientOne: import_styled_components124.css`
|
|
17144
17554
|
background-color: #f7f8ff;
|
|
17145
17555
|
background-image:
|
|
17146
17556
|
radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
|
|
@@ -17148,7 +17558,7 @@ var gradients = {
|
|
|
17148
17558
|
radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
|
|
17149
17559
|
radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
|
|
17150
17560
|
`,
|
|
17151
|
-
playfulGradientTwo:
|
|
17561
|
+
playfulGradientTwo: import_styled_components124.css`
|
|
17152
17562
|
background-color: #f7f8ff;
|
|
17153
17563
|
background-image:
|
|
17154
17564
|
radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
|
|
@@ -17156,13 +17566,13 @@ var gradients = {
|
|
|
17156
17566
|
radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
|
|
17157
17567
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
17158
17568
|
`,
|
|
17159
|
-
purple:
|
|
17569
|
+
purple: import_styled_components124.css`
|
|
17160
17570
|
background-color: #f2caff;
|
|
17161
17571
|
background-image:
|
|
17162
17572
|
radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
|
|
17163
17573
|
radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
|
|
17164
17574
|
`,
|
|
17165
|
-
purpleWithPop:
|
|
17575
|
+
purpleWithPop: import_styled_components124.css`
|
|
17166
17576
|
background-color: #f2caff;
|
|
17167
17577
|
background-image:
|
|
17168
17578
|
radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
|
|
@@ -17170,7 +17580,7 @@ var gradients = {
|
|
|
17170
17580
|
radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
|
|
17171
17581
|
radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
|
|
17172
17582
|
`,
|
|
17173
|
-
yellow:
|
|
17583
|
+
yellow: import_styled_components124.css`
|
|
17174
17584
|
background-color: #fffff0;
|
|
17175
17585
|
background-image:
|
|
17176
17586
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -17178,7 +17588,7 @@ var gradients = {
|
|
|
17178
17588
|
radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
|
|
17179
17589
|
radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
|
|
17180
17590
|
`,
|
|
17181
|
-
yellowWithPop:
|
|
17591
|
+
yellowWithPop: import_styled_components124.css`
|
|
17182
17592
|
background-color: #fffff0;
|
|
17183
17593
|
background-image:
|
|
17184
17594
|
radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
|
|
@@ -17193,10 +17603,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
|
|
|
17193
17603
|
};
|
|
17194
17604
|
|
|
17195
17605
|
// src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
|
|
17196
|
-
var
|
|
17606
|
+
var import_styled_components125 = __toESM(require("styled-components"));
|
|
17197
17607
|
var import_type_guards71 = require("@wistia/type-guards");
|
|
17198
17608
|
var import_jsx_runtime323 = require("react/jsx-runtime");
|
|
17199
|
-
var ScrubLine =
|
|
17609
|
+
var ScrubLine = import_styled_components125.default.div`
|
|
17200
17610
|
position: absolute;
|
|
17201
17611
|
top: 0;
|
|
17202
17612
|
height: 100%;
|
|
@@ -17329,12 +17739,12 @@ var ThumbnailStoryboardViewer = ({
|
|
|
17329
17739
|
|
|
17330
17740
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
17331
17741
|
var import_jsx_runtime324 = require("react/jsx-runtime");
|
|
17332
|
-
var WideThumbnailImage =
|
|
17742
|
+
var WideThumbnailImage = import_styled_components126.default.img`
|
|
17333
17743
|
height: 100%;
|
|
17334
17744
|
object-fit: cover;
|
|
17335
17745
|
width: 100%;
|
|
17336
17746
|
`;
|
|
17337
|
-
var SquareThumbnailImage =
|
|
17747
|
+
var SquareThumbnailImage = import_styled_components126.default.img`
|
|
17338
17748
|
backdrop-filter: blur(8px);
|
|
17339
17749
|
object-fit: contain;
|
|
17340
17750
|
width: 100%;
|
|
@@ -17359,7 +17769,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
|
|
|
17359
17769
|
}
|
|
17360
17770
|
);
|
|
17361
17771
|
};
|
|
17362
|
-
var StyledThumbnail =
|
|
17772
|
+
var StyledThumbnail = import_styled_components126.default.div`
|
|
17363
17773
|
background-image: ${({ $backgroundUrl }) => (0, import_type_guards72.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
|
|
17364
17774
|
${({ $backgroundUrl, $gradientBackground }) => (
|
|
17365
17775
|
// if we don't have $backgroundUrl show a gradient
|
|
@@ -17508,13 +17918,13 @@ Thumbnail.displayName = "Thumbnail_UI";
|
|
|
17508
17918
|
|
|
17509
17919
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
17510
17920
|
var import_react101 = __toESM(require("react"));
|
|
17511
|
-
var
|
|
17921
|
+
var import_styled_components127 = __toESM(require("styled-components"));
|
|
17512
17922
|
var import_type_guards73 = require("@wistia/type-guards");
|
|
17513
17923
|
var import_jsx_runtime325 = (
|
|
17514
17924
|
// ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
|
|
17515
17925
|
require("react/jsx-runtime")
|
|
17516
17926
|
);
|
|
17517
|
-
var StyledThumbnailCollage =
|
|
17927
|
+
var StyledThumbnailCollage = import_styled_components127.default.div`
|
|
17518
17928
|
display: grid;
|
|
17519
17929
|
gap: var(--wui-space-01);
|
|
17520
17930
|
width: 100%;
|
|
@@ -17616,7 +18026,7 @@ var ThumbnailCollage = ({
|
|
|
17616
18026
|
};
|
|
17617
18027
|
|
|
17618
18028
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
17619
|
-
var
|
|
18029
|
+
var import_styled_components128 = __toESM(require("styled-components"));
|
|
17620
18030
|
var import_type_guards74 = require("@wistia/type-guards");
|
|
17621
18031
|
var import_jsx_runtime326 = require("react/jsx-runtime");
|
|
17622
18032
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
@@ -17658,7 +18068,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
17658
18068
|
}
|
|
17659
18069
|
return "0 0 144 31.47";
|
|
17660
18070
|
};
|
|
17661
|
-
var WistiaLogoComponent =
|
|
18071
|
+
var WistiaLogoComponent = import_styled_components128.default.svg`
|
|
17662
18072
|
height: ${({ height }) => `${height}px`};
|
|
17663
18073
|
|
|
17664
18074
|
/* ensure it will always fit on mobile */
|
|
@@ -17674,12 +18084,12 @@ var WistiaLogoComponent = import_styled_components127.default.svg`
|
|
|
17674
18084
|
${({ $opticallyCentered, $iconOnly }) => {
|
|
17675
18085
|
if ($opticallyCentered) {
|
|
17676
18086
|
if ($iconOnly) {
|
|
17677
|
-
return
|
|
18087
|
+
return import_styled_components128.css`
|
|
17678
18088
|
aspect-ratio: 1;
|
|
17679
18089
|
padding: 11.85% 3.12% 13.91%;
|
|
17680
18090
|
`;
|
|
17681
18091
|
}
|
|
17682
|
-
return
|
|
18092
|
+
return import_styled_components128.css`
|
|
17683
18093
|
aspect-ratio: 127 / 32;
|
|
17684
18094
|
`;
|
|
17685
18095
|
}
|