@usefy/screen-recorder 0.1.5 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +1 -19
  2. package/dist/index.d.ts +1 -19
  3. package/dist/index.js +1484 -1279
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1474 -1278
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +1275 -991
  8. package/package.json +3 -4
package/dist/index.js CHANGED
@@ -1,8 +1,10 @@
1
1
  "use client";
2
2
  "use strict";
3
+ var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
4
5
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
6
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
6
8
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
9
  var __export = (target, all) => {
8
10
  for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
16
18
  }
17
19
  return to;
18
20
  };
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
19
29
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
30
 
21
31
  // src/index.ts
@@ -47,7 +57,6 @@ __export(index_exports, {
47
57
  VideoPlayer: () => VideoPlayer,
48
58
  WarningIcon: () => WarningIcon,
49
59
  checkBrowserSupport: () => checkBrowserSupport,
50
- cn: () => cn,
51
60
  downloadBlob: () => downloadBlob,
52
61
  formatBytes: () => formatBytes,
53
62
  formatTime: () => formatTime,
@@ -65,6 +74,7 @@ module.exports = __toCommonJS(index_exports);
65
74
  // src/ScreenRecorder.tsx
66
75
  var import_react9 = require("react");
67
76
  var import_react_dom2 = require("react-dom");
77
+ var import_clsx9 = __toESM(require("clsx"));
68
78
 
69
79
  // src/constants.ts
70
80
  var QUALITY_PRESETS = {
@@ -165,12 +175,6 @@ var CSS_CLASSES = {
165
175
  status: `${BASE_CLASS}__status`,
166
176
  error: `${BASE_CLASS}__error`
167
177
  };
168
- var POSITION_CLASSES = {
169
- "top-left": "top-4 left-4",
170
- "top-right": "top-4 right-4",
171
- "bottom-left": "bottom-4 left-4",
172
- "bottom-right": "bottom-4 right-4"
173
- };
174
178
 
175
179
  // src/useScreenRecorder.ts
176
180
  var import_react6 = require("react");
@@ -888,12 +892,8 @@ function useScreenRecorder(options = {}) {
888
892
  };
889
893
  }
890
894
 
891
- // src/utils/cn.ts
892
- var import_clsx = require("clsx");
893
- var import_tailwind_merge = require("tailwind-merge");
894
- function cn(...inputs) {
895
- return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
896
- }
895
+ // src/components/Trigger/Trigger.tsx
896
+ var import_clsx = __toESM(require("clsx"));
897
897
 
898
898
  // src/components/Trigger/TriggerIcon.tsx
899
899
  var import_jsx_runtime = require("react/jsx-runtime");
@@ -1073,8 +1073,17 @@ var WarningIcon = ({ className }) => {
1073
1073
  );
1074
1074
  };
1075
1075
 
1076
+ // scss-module:/home/runner/work/usefy/usefy/packages/kits/screen-recorder/src/components/Trigger/Trigger.module.scss
1077
+ var Trigger_module_default = { "trigger": "Trigger_trigger__dtqfb", "topLeft": "Trigger_topLeft__dtqfb", "topRight": "Trigger_topRight__dtqfb", "bottomLeft": "Trigger_bottomLeft__dtqfb", "bottomRight": "Trigger_bottomRight__dtqfb", "icon": "Trigger_icon__dtqfb" };
1078
+
1076
1079
  // src/components/Trigger/Trigger.tsx
1077
1080
  var import_jsx_runtime2 = require("react/jsx-runtime");
1081
+ var POSITION_STYLES = {
1082
+ "top-left": Trigger_module_default.topLeft,
1083
+ "top-right": Trigger_module_default.topRight,
1084
+ "bottom-left": Trigger_module_default.bottomLeft,
1085
+ "bottom-right": Trigger_module_default.bottomRight
1086
+ };
1078
1087
  var Trigger = ({
1079
1088
  position = "bottom-right",
1080
1089
  children,
@@ -1090,33 +1099,26 @@ var Trigger = ({
1090
1099
  onClick,
1091
1100
  disabled,
1092
1101
  "aria-label": ARIA_LABELS.triggerButton,
1093
- className: cn(
1094
- // Base styles
1095
- "fixed flex items-center gap-2 px-4 py-2.5 rounded-full",
1096
- "font-medium text-sm shadow-lg",
1097
- // Colors
1098
- "bg-red-600 text-white",
1099
- "hover:bg-red-700 active:bg-red-800",
1100
- // Focus styles
1101
- "focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2",
1102
- // Disabled styles
1103
- "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-600",
1104
- // Transitions
1105
- "transition-all duration-200 ease-out",
1106
- "hover:scale-105 active:scale-95",
1107
- // Position
1108
- POSITION_CLASSES[position],
1102
+ className: (0, import_clsx.default)(
1103
+ Trigger_module_default.trigger,
1104
+ POSITION_STYLES[position],
1109
1105
  className
1110
1106
  ),
1111
1107
  style: { zIndex },
1112
1108
  children: children ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
1113
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TriggerIcon, { className: "w-5 h-5" }),
1109
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TriggerIcon, { className: Trigger_module_default.icon }),
1114
1110
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Record" })
1115
1111
  ] })
1116
1112
  }
1117
1113
  );
1118
1114
  };
1119
1115
 
1116
+ // src/components/Controls/Timer.tsx
1117
+ var import_clsx2 = __toESM(require("clsx"));
1118
+
1119
+ // scss-module:/home/runner/work/usefy/usefy/packages/kits/screen-recorder/src/components/Controls/Timer.module.scss
1120
+ var Timer_module_default = { "timer": "Timer_timer__qru97", "colorDefault": "Timer_colorDefault__qru97", "colorPaused": "Timer_colorPaused__qru97", "colorWarning": "Timer_colorWarning__qru97", "colorCritical": "Timer_colorCritical__qru97", "maxDuration": "Timer_maxDuration__qru97" };
1121
+
1120
1122
  // src/components/Controls/Timer.tsx
1121
1123
  var import_jsx_runtime3 = require("react/jsx-runtime");
1122
1124
  var Timer = ({
@@ -1127,19 +1129,19 @@ var Timer = ({
1127
1129
  isPaused = false,
1128
1130
  className
1129
1131
  }) => {
1130
- const getTimerColor = () => {
1132
+ const getTimerColorClass = () => {
1131
1133
  if (isPaused) {
1132
- return "text-amber-600 dark:text-amber-400";
1134
+ return Timer_module_default.colorPaused;
1133
1135
  }
1134
1136
  if (remaining != null) {
1135
1137
  if (remaining <= TIMER_CRITICAL_THRESHOLD) {
1136
- return "text-red-600 dark:text-red-400";
1138
+ return Timer_module_default.colorCritical;
1137
1139
  }
1138
1140
  if (remaining <= TIMER_WARNING_THRESHOLD) {
1139
- return "text-amber-600 dark:text-amber-400";
1141
+ return Timer_module_default.colorWarning;
1140
1142
  }
1141
1143
  }
1142
- return "text-gray-700 dark:text-gray-300";
1144
+ return Timer_module_default.colorDefault;
1143
1145
  };
1144
1146
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
1145
1147
  "div",
@@ -1147,14 +1149,14 @@ var Timer = ({
1147
1149
  role: "timer",
1148
1150
  "aria-live": "polite",
1149
1151
  "aria-label": `${ARIA_LABELS.timer}: ${elapsedFormatted}`,
1150
- className: cn(
1151
- "font-mono text-sm font-medium tabular-nums",
1152
- getTimerColor(),
1152
+ className: (0, import_clsx2.default)(
1153
+ Timer_module_default.timer,
1154
+ getTimerColorClass(),
1153
1155
  className
1154
1156
  ),
1155
1157
  children: [
1156
1158
  elapsedFormatted,
1157
- maxDuration != null && isFinite(maxDuration) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-gray-400 dark:text-gray-500", children: [
1159
+ maxDuration != null && isFinite(maxDuration) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: Timer_module_default.maxDuration, children: [
1158
1160
  " / ",
1159
1161
  formatDuration(maxDuration)
1160
1162
  ] })
@@ -1168,8 +1170,20 @@ function formatDuration(seconds) {
1168
1170
  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
1169
1171
  }
1170
1172
 
1173
+ // src/components/Controls/RecordingControls.tsx
1174
+ var import_clsx3 = __toESM(require("clsx"));
1175
+
1176
+ // scss-module:/home/runner/work/usefy/usefy/packages/kits/screen-recorder/src/components/Controls/RecordingControls.module.scss
1177
+ var RecordingControls_module_default = { "controls": "RecordingControls_controls__aqrrv", "topLeft": "RecordingControls_topLeft__aqrrv", "topRight": "RecordingControls_topRight__aqrrv", "bottomLeft": "RecordingControls_bottomLeft__aqrrv", "bottomRight": "RecordingControls_bottomRight__aqrrv", "statusSection": "RecordingControls_statusSection__aqrrv", "statusIndicator": "RecordingControls_statusIndicator__aqrrv", "statusRecording": "RecordingControls_statusRecording__aqrrv", "statusPaused": "RecordingControls_statusPaused__aqrrv", "recordingIcon": "RecordingControls_recordingIcon__aqrrv", "pauseIconSmall": "RecordingControls_pauseIconSmall__aqrrv", "statusLabel": "RecordingControls_statusLabel__aqrrv", "buttonGroup": "RecordingControls_buttonGroup__aqrrv", "controlButton": "RecordingControls_controlButton__aqrrv", "stopButton": "RecordingControls_stopButton__aqrrv", "buttonIcon": "RecordingControls_buttonIcon__aqrrv", "stopIcon": "RecordingControls_stopIcon__aqrrv" };
1178
+
1171
1179
  // src/components/Controls/RecordingControls.tsx
1172
1180
  var import_jsx_runtime4 = require("react/jsx-runtime");
1181
+ var POSITION_STYLES2 = {
1182
+ "top-left": RecordingControls_module_default.topLeft,
1183
+ "top-right": RecordingControls_module_default.topRight,
1184
+ "bottom-left": RecordingControls_module_default.bottomLeft,
1185
+ "bottom-right": RecordingControls_module_default.bottomRight
1186
+ };
1173
1187
  var RecordingControls = ({
1174
1188
  elapsed,
1175
1189
  elapsedFormatted,
@@ -1187,31 +1201,26 @@ var RecordingControls = ({
1187
1201
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
1188
1202
  "div",
1189
1203
  {
1190
- className: cn(
1191
- // Base styles
1192
- "fixed flex items-center gap-3 px-4 py-2.5 rounded-full",
1193
- "bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700",
1194
- // Animation
1195
- "animate-slide-up",
1196
- // Position
1197
- POSITION_CLASSES[position],
1204
+ className: (0, import_clsx3.default)(
1205
+ RecordingControls_module_default.controls,
1206
+ POSITION_STYLES2[position],
1198
1207
  className
1199
1208
  ),
1200
1209
  style: { zIndex },
1201
1210
  children: [
1202
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1211
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: RecordingControls_module_default.statusSection, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1203
1212
  "div",
1204
1213
  {
1205
- className: cn(
1206
- "flex items-center gap-1.5",
1207
- isPaused ? "text-amber-500" : "text-red-500"
1214
+ className: (0, import_clsx3.default)(
1215
+ RecordingControls_module_default.statusIndicator,
1216
+ isPaused ? RecordingControls_module_default.statusPaused : RecordingControls_module_default.statusRecording
1208
1217
  ),
1209
1218
  children: isPaused ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
1210
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PauseIcon, { className: "w-3 h-3" }),
1211
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs font-semibold uppercase", children: "Paused" })
1219
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PauseIcon, { className: RecordingControls_module_default.pauseIconSmall }),
1220
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: RecordingControls_module_default.statusLabel, children: "Paused" })
1212
1221
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
1213
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RecordingIcon, { className: "w-3 h-3 animate-pulse-record" }),
1214
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-xs font-semibold uppercase", children: "Rec" })
1222
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RecordingIcon, { className: RecordingControls_module_default.recordingIcon }),
1223
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: RecordingControls_module_default.statusLabel, children: "Rec" })
1215
1224
  ] })
1216
1225
  }
1217
1226
  ) }),
@@ -1225,19 +1234,15 @@ var RecordingControls = ({
1225
1234
  isPaused
1226
1235
  }
1227
1236
  ),
1228
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1 ml-2", children: [
1237
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: RecordingControls_module_default.buttonGroup, children: [
1229
1238
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1230
1239
  "button",
1231
1240
  {
1232
1241
  type: "button",
1233
1242
  onClick: isPaused ? onResume : onPause,
1234
1243
  "aria-label": isPaused ? ARIA_LABELS.resumeButton : ARIA_LABELS.pauseButton,
1235
- className: cn(
1236
- "p-2 rounded-full transition-colors",
1237
- "hover:bg-gray-100 dark:hover:bg-gray-700",
1238
- "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
1239
- ),
1240
- children: isPaused ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PlayIcon, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PauseIcon, { className: "w-4 h-4 text-gray-600 dark:text-gray-300" })
1244
+ className: RecordingControls_module_default.controlButton,
1245
+ children: isPaused ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PlayIcon, { className: RecordingControls_module_default.buttonIcon }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PauseIcon, { className: RecordingControls_module_default.buttonIcon })
1241
1246
  }
1242
1247
  ),
1243
1248
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1246,12 +1251,8 @@ var RecordingControls = ({
1246
1251
  type: "button",
1247
1252
  onClick: onStop,
1248
1253
  "aria-label": ARIA_LABELS.stopButton,
1249
- className: cn(
1250
- "p-2 rounded-full transition-colors",
1251
- "hover:bg-red-100 dark:hover:bg-red-900/30",
1252
- "focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
1253
- ),
1254
- children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StopIcon, { className: "w-4 h-4 text-red-600 dark:text-red-400" })
1254
+ className: RecordingControls_module_default.stopButton,
1255
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StopIcon, { className: RecordingControls_module_default.stopIcon })
1255
1256
  }
1256
1257
  )
1257
1258
  ] })
@@ -1260,6 +1261,12 @@ var RecordingControls = ({
1260
1261
  );
1261
1262
  };
1262
1263
 
1264
+ // src/components/Countdown/Countdown.tsx
1265
+ var import_clsx4 = __toESM(require("clsx"));
1266
+
1267
+ // scss-module:/home/runner/work/usefy/usefy/packages/kits/screen-recorder/src/components/Countdown/Countdown.module.scss
1268
+ var Countdown_module_default = { "overlay": "Countdown_overlay__cif1q", "countdownCircle": "Countdown_countdownCircle__cif1q", "message": "Countdown_message__cif1q", "cancelButton": "Countdown_cancelButton__cif1q" };
1269
+
1263
1270
  // src/components/Countdown/Countdown.tsx
1264
1271
  var import_jsx_runtime5 = require("react/jsx-runtime");
1265
1272
  var Countdown = ({
@@ -1271,45 +1278,20 @@ var Countdown = ({
1271
1278
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
1272
1279
  "div",
1273
1280
  {
1274
- className: cn(
1275
- // Fullscreen overlay
1276
- "fixed inset-0 flex flex-col items-center justify-center",
1277
- "bg-black/50 backdrop-blur-sm",
1278
- "animate-fade-in",
1279
- className
1280
- ),
1281
+ className: (0, import_clsx4.default)(Countdown_module_default.overlay, className),
1281
1282
  style: { zIndex },
1282
1283
  role: "alert",
1283
1284
  "aria-live": "assertive",
1284
1285
  "aria-label": `${ARIA_LABELS.countdown} ${value}`,
1285
1286
  children: [
1286
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1287
- "div",
1288
- {
1289
- className: cn(
1290
- "flex items-center justify-center",
1291
- "w-32 h-32 rounded-full",
1292
- "bg-white/10 border-4 border-white/30",
1293
- "text-white text-7xl font-bold",
1294
- "animate-countdown-scale"
1295
- ),
1296
- children: value
1297
- },
1298
- value
1299
- ),
1300
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mt-6 text-white/80 text-lg font-medium", children: "Recording starts in..." }),
1287
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: Countdown_module_default.countdownCircle, children: value }, value),
1288
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: Countdown_module_default.message, children: "Recording starts in..." }),
1301
1289
  onCancel && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1302
1290
  "button",
1303
1291
  {
1304
1292
  type: "button",
1305
1293
  onClick: onCancel,
1306
- className: cn(
1307
- "mt-8 px-6 py-2 rounded-full",
1308
- "bg-white/10 hover:bg-white/20",
1309
- "text-white text-sm font-medium",
1310
- "transition-colors duration-200",
1311
- "focus:outline-none focus:ring-2 focus:ring-white/50"
1312
- ),
1294
+ className: Countdown_module_default.cancelButton,
1313
1295
  children: "Cancel"
1314
1296
  }
1315
1297
  )
@@ -1320,6 +1302,12 @@ var Countdown = ({
1320
1302
 
1321
1303
  // src/components/Preview/VideoPlayer.tsx
1322
1304
  var import_react7 = require("react");
1305
+ var import_clsx5 = __toESM(require("clsx"));
1306
+
1307
+ // scss-module:/home/runner/work/usefy/usefy/packages/kits/screen-recorder/src/components/Preview/VideoPlayer.module.scss
1308
+ var VideoPlayer_module_default = { "container": "VideoPlayer_container__4wok5", "video": "VideoPlayer_video__4wok5", "controlsOverlay": "VideoPlayer_controlsOverlay__4wok5", "progressWrapper": "VideoPlayer_progressWrapper__4wok5", "progressSlider": "VideoPlayer_progressSlider__4wok5", "bottomControls": "VideoPlayer_bottomControls__4wok5", "leftControls": "VideoPlayer_leftControls__4wok5", "playButton": "VideoPlayer_playButton__4wok5", "playIcon": "VideoPlayer_playIcon__4wok5", "timeDisplay": "VideoPlayer_timeDisplay__4wok5" };
1309
+
1310
+ // src/components/Preview/VideoPlayer.tsx
1323
1311
  var import_jsx_runtime6 = require("react/jsx-runtime");
1324
1312
  var VideoPlayer = (0, import_react7.forwardRef)(
1325
1313
  ({ src, className, showControls = true, autoPlay = false, knownDuration }, ref) => {
@@ -1394,13 +1382,13 @@ var VideoPlayer = (0, import_react7.forwardRef)(
1394
1382
  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
1395
1383
  };
1396
1384
  const effectiveDuration = isFinite(duration) && duration > 0 ? duration : knownDuration || 0;
1397
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("relative bg-black rounded-lg overflow-hidden", className), children: [
1385
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx5.default)(VideoPlayer_module_default.container, className), children: [
1398
1386
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1399
1387
  "video",
1400
1388
  {
1401
1389
  ref: videoRef,
1402
1390
  src,
1403
- className: "w-full h-auto",
1391
+ className: VideoPlayer_module_default.video,
1404
1392
  onPlay: handlePlay,
1405
1393
  onPause: handlePause,
1406
1394
  onEnded: handleEnded,
@@ -1412,58 +1400,37 @@ var VideoPlayer = (0, import_react7.forwardRef)(
1412
1400
  "aria-label": ARIA_LABELS.videoPlayer
1413
1401
  }
1414
1402
  ),
1415
- showControls && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1416
- "div",
1417
- {
1418
- className: cn(
1419
- "absolute bottom-0 left-0 right-0",
1420
- "bg-gradient-to-t from-black/80 to-transparent",
1421
- "p-3"
1403
+ showControls && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: VideoPlayer_module_default.controlsOverlay, children: [
1404
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: VideoPlayer_module_default.progressWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1405
+ "input",
1406
+ {
1407
+ type: "range",
1408
+ min: 0,
1409
+ max: effectiveDuration || 100,
1410
+ value: currentTime,
1411
+ onChange: handleSeek,
1412
+ className: VideoPlayer_module_default.progressSlider,
1413
+ "aria-label": "Video progress"
1414
+ }
1415
+ ) }),
1416
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: VideoPlayer_module_default.bottomControls, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: VideoPlayer_module_default.leftControls, children: [
1417
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1418
+ "button",
1419
+ {
1420
+ type: "button",
1421
+ onClick: togglePlay,
1422
+ className: VideoPlayer_module_default.playButton,
1423
+ "aria-label": isPlaying ? "Pause" : "Play",
1424
+ children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PauseIcon, { className: VideoPlayer_module_default.playIcon }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlayIcon, { className: VideoPlayer_module_default.playIcon })
1425
+ }
1422
1426
  ),
1423
- children: [
1424
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center gap-2 mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1425
- "input",
1426
- {
1427
- type: "range",
1428
- min: 0,
1429
- max: effectiveDuration || 100,
1430
- value: currentTime,
1431
- onChange: handleSeek,
1432
- className: cn(
1433
- "flex-1 h-1 rounded-full appearance-none cursor-pointer",
1434
- "bg-white/30",
1435
- "[&::-webkit-slider-thumb]:appearance-none",
1436
- "[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3",
1437
- "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white"
1438
- ),
1439
- "aria-label": "Video progress"
1440
- }
1441
- ) }),
1442
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
1443
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1444
- "button",
1445
- {
1446
- type: "button",
1447
- onClick: togglePlay,
1448
- className: cn(
1449
- "p-1.5 rounded-full",
1450
- "hover:bg-white/20",
1451
- "transition-colors duration-150",
1452
- "focus:outline-none focus:ring-2 focus:ring-white/50"
1453
- ),
1454
- "aria-label": isPlaying ? "Pause" : "Play",
1455
- children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PauseIcon, { className: "w-4 h-4 text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PlayIcon, { className: "w-4 h-4 text-white" })
1456
- }
1457
- ),
1458
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "text-white/80 text-xs font-mono tabular-nums", children: [
1459
- formatTime3(currentTime),
1460
- " / ",
1461
- formatTime3(effectiveDuration)
1462
- ] })
1463
- ] }) })
1464
- ]
1465
- }
1466
- )
1427
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: VideoPlayer_module_default.timeDisplay, children: [
1428
+ formatTime3(currentTime),
1429
+ " / ",
1430
+ formatTime3(effectiveDuration)
1431
+ ] })
1432
+ ] }) })
1433
+ ] })
1467
1434
  ] });
1468
1435
  }
1469
1436
  );
@@ -1472,6 +1439,7 @@ VideoPlayer.displayName = "VideoPlayer";
1472
1439
  // src/components/Preview/PreviewModal.tsx
1473
1440
  var import_react8 = require("react");
1474
1441
  var import_react_dom = require("react-dom");
1442
+ var import_clsx6 = __toESM(require("clsx"));
1475
1443
 
1476
1444
  // src/utils/downloadBlob.ts
1477
1445
  function downloadBlob(blob, filename) {
@@ -1509,6 +1477,9 @@ function formatBytes(bytes, decimals = 2) {
1509
1477
  return `${parseFloat((bytes / Math.pow(k, index)).toFixed(dm))} ${sizes[index]}`;
1510
1478
  }
1511
1479
 
1480
+ // scss-module:/home/runner/work/usefy/usefy/packages/kits/screen-recorder/src/components/Preview/PreviewModal.module.scss
1481
+ var PreviewModal_module_default = { "overlay": "PreviewModal_overlay__va989", "modal": "PreviewModal_modal__va989", "header": "PreviewModal_header__va989", "title": "PreviewModal_title__va989", "closeButton": "PreviewModal_closeButton__va989", "closeIcon": "PreviewModal_closeIcon__va989", "content": "PreviewModal_content__va989", "videoWrapper": "PreviewModal_videoWrapper__va989", "recordingInfo": "PreviewModal_recordingInfo__va989", "actions": "PreviewModal_actions__va989", "actionButton": "PreviewModal_actionButton__va989", "doneButton": "PreviewModal_doneButton__va989", "reRecordButton": "PreviewModal_reRecordButton__va989", "downloadButton": "PreviewModal_downloadButton__va989", "buttonIcon": "PreviewModal_buttonIcon__va989" };
1482
+
1512
1483
  // src/components/Preview/PreviewModal.tsx
1513
1484
  var import_jsx_runtime7 = require("react/jsx-runtime");
1514
1485
  var PreviewModal = ({
@@ -1546,13 +1517,9 @@ var PreviewModal = ({
1546
1517
  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1547
1518
  "div",
1548
1519
  {
1549
- className: cn(
1550
- // Dark mode wrapper for portal
1520
+ className: (0, import_clsx6.default)(
1521
+ PreviewModal_module_default.overlay,
1551
1522
  isDark && "dark",
1552
- // Fullscreen overlay
1553
- "fixed inset-0 flex items-center justify-center p-4",
1554
- "bg-black/60 backdrop-blur-sm",
1555
- "animate-fade-in",
1556
1523
  className
1557
1524
  ),
1558
1525
  style: { zIndex },
@@ -1569,85 +1536,53 @@ var PreviewModal = ({
1569
1536
  "div",
1570
1537
  {
1571
1538
  ref: modalRef,
1572
- className: cn(
1573
- // Modal container
1574
- "relative w-full max-w-2xl",
1575
- "bg-white dark:bg-gray-800 rounded-xl shadow-2xl",
1576
- "animate-slide-up",
1577
- "focus:outline-none"
1578
- ),
1539
+ className: PreviewModal_module_default.modal,
1579
1540
  tabIndex: -1,
1580
1541
  children: [
1581
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: [
1582
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1583
- "h2",
1584
- {
1585
- id: "preview-title",
1586
- className: "text-lg font-semibold text-gray-900 dark:text-white",
1587
- children: "Recording Complete"
1588
- }
1589
- ),
1542
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: PreviewModal_module_default.header, children: [
1543
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { id: "preview-title", className: PreviewModal_module_default.title, children: "Recording Complete" }),
1590
1544
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1591
1545
  "button",
1592
1546
  {
1593
1547
  type: "button",
1594
1548
  onClick: onClose,
1595
1549
  "aria-label": ARIA_LABELS.closePreview,
1596
- className: cn(
1597
- "p-2 rounded-full",
1598
- "hover:bg-gray-100 dark:hover:bg-gray-700",
1599
- "transition-colors duration-150",
1600
- "focus:outline-none focus:ring-2 focus:ring-blue-500"
1601
- ),
1602
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, { className: "w-5 h-5 text-gray-500 dark:text-gray-400" })
1550
+ className: PreviewModal_module_default.closeButton,
1551
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, { className: PreviewModal_module_default.closeIcon })
1603
1552
  }
1604
1553
  )
1605
1554
  ] }),
1606
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "p-6", children: [
1555
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: PreviewModal_module_default.content, children: [
1607
1556
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1608
1557
  VideoPlayer,
1609
1558
  {
1610
1559
  src: result.url,
1611
- className: "w-full aspect-video",
1560
+ className: PreviewModal_module_default.videoWrapper,
1612
1561
  showControls: true,
1613
1562
  knownDuration: result.duration
1614
1563
  }
1615
1564
  ),
1616
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
1617
- "p",
1618
- {
1619
- id: "preview-description",
1620
- className: "mt-4 text-sm text-gray-500 dark:text-gray-400 text-center",
1621
- children: [
1622
- "Duration: ",
1623
- formatDuration2(result.duration),
1624
- " \u2022 Size:",
1625
- " ",
1626
- formatBytes(result.size),
1627
- " \u2022 ",
1628
- getFormatLabel(result.mimeType),
1629
- result.hasAudio && " \u2022 With audio"
1630
- ]
1631
- }
1632
- )
1565
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { id: "preview-description", className: PreviewModal_module_default.recordingInfo, children: [
1566
+ "Duration: ",
1567
+ formatDuration2(result.duration),
1568
+ " \u2022 Size:",
1569
+ " ",
1570
+ formatBytes(result.size),
1571
+ " \u2022 ",
1572
+ getFormatLabel(result.mimeType),
1573
+ result.hasAudio && " \u2022 With audio"
1574
+ ] })
1633
1575
  ] }),
1634
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-center gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700", children: [
1576
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: PreviewModal_module_default.actions, children: [
1635
1577
  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
1636
1578
  "button",
1637
1579
  {
1638
1580
  type: "button",
1639
1581
  onClick: onDownload,
1640
1582
  "aria-label": ARIA_LABELS.downloadButton,
1641
- className: cn(
1642
- "flex items-center gap-2 px-4 py-2 rounded-lg",
1643
- "bg-blue-600 hover:bg-blue-700 text-white",
1644
- "font-medium text-sm",
1645
- "transition-colors duration-150",
1646
- "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
1647
- "dark:focus:ring-offset-gray-800"
1648
- ),
1583
+ className: PreviewModal_module_default.downloadButton,
1649
1584
  children: [
1650
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DownloadIcon, { className: "w-4 h-4" }),
1585
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DownloadIcon, { className: PreviewModal_module_default.buttonIcon }),
1651
1586
  "Download"
1652
1587
  ]
1653
1588
  }
@@ -1658,17 +1593,9 @@ var PreviewModal = ({
1658
1593
  type: "button",
1659
1594
  onClick: onReRecord,
1660
1595
  "aria-label": ARIA_LABELS.reRecordButton,
1661
- className: cn(
1662
- "flex items-center gap-2 px-4 py-2 rounded-lg",
1663
- "bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600",
1664
- "text-gray-700 dark:text-gray-300",
1665
- "font-medium text-sm",
1666
- "transition-colors duration-150",
1667
- "focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2",
1668
- "dark:focus:ring-offset-gray-800"
1669
- ),
1596
+ className: PreviewModal_module_default.reRecordButton,
1670
1597
  children: [
1671
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RefreshIcon, { className: "w-4 h-4" }),
1598
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RefreshIcon, { className: PreviewModal_module_default.buttonIcon }),
1672
1599
  "Re-record"
1673
1600
  ]
1674
1601
  }
@@ -1678,16 +1605,9 @@ var PreviewModal = ({
1678
1605
  {
1679
1606
  type: "button",
1680
1607
  onClick: onClose,
1681
- className: cn(
1682
- "flex items-center gap-2 px-4 py-2 rounded-lg",
1683
- "bg-green-600 hover:bg-green-700 text-white",
1684
- "font-medium text-sm",
1685
- "transition-colors duration-150",
1686
- "focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2",
1687
- "dark:focus:ring-offset-gray-800"
1688
- ),
1608
+ className: PreviewModal_module_default.doneButton,
1689
1609
  children: [
1690
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckIcon, { className: "w-4 h-4" }),
1610
+ /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckIcon, { className: PreviewModal_module_default.buttonIcon }),
1691
1611
  "Done"
1692
1612
  ]
1693
1613
  }
@@ -1714,6 +1634,12 @@ function getFormatLabel(mimeType) {
1714
1634
  return "Video";
1715
1635
  }
1716
1636
 
1637
+ // src/components/Status/StatusBadge.tsx
1638
+ var import_clsx7 = __toESM(require("clsx"));
1639
+
1640
+ // scss-module:/home/runner/work/usefy/usefy/packages/kits/screen-recorder/src/components/Status/StatusBadge.module.scss
1641
+ var StatusBadge_module_default = { "badge": "StatusBadge_badge__o3pyl", "dot": "StatusBadge_dot__o3pyl", "label": "StatusBadge_label__o3pyl", "stateRecording": "StatusBadge_stateRecording__o3pyl", "dotRecording": "StatusBadge_dotRecording__o3pyl", "labelRecording": "StatusBadge_labelRecording__o3pyl", "statePaused": "StatusBadge_statePaused__o3pyl", "dotPaused": "StatusBadge_dotPaused__o3pyl", "labelPaused": "StatusBadge_labelPaused__o3pyl", "stateRequesting": "StatusBadge_stateRequesting__o3pyl", "dotRequesting": "StatusBadge_dotRequesting__o3pyl", "labelRequesting": "StatusBadge_labelRequesting__o3pyl", "stateCountdown": "StatusBadge_stateCountdown__o3pyl", "dotCountdown": "StatusBadge_dotCountdown__o3pyl", "labelCountdown": "StatusBadge_labelCountdown__o3pyl", "stateStopped": "StatusBadge_stateStopped__o3pyl", "dotStopped": "StatusBadge_dotStopped__o3pyl", "labelStopped": "StatusBadge_labelStopped__o3pyl", "stateError": "StatusBadge_stateError__o3pyl", "dotError": "StatusBadge_dotError__o3pyl", "labelError": "StatusBadge_labelError__o3pyl", "stateIdle": "StatusBadge_stateIdle__o3pyl", "dotIdle": "StatusBadge_dotIdle__o3pyl", "labelIdle": "StatusBadge_labelIdle__o3pyl" };
1642
+
1717
1643
  // src/components/Status/StatusBadge.tsx
1718
1644
  var import_jsx_runtime8 = require("react/jsx-runtime");
1719
1645
  var StatusBadge = ({ state, className }) => {
@@ -1722,51 +1648,51 @@ var StatusBadge = ({ state, className }) => {
1722
1648
  case "recording":
1723
1649
  return {
1724
1650
  label: "REC",
1725
- dotClass: "bg-red-500 animate-pulse-record",
1726
- textClass: "text-red-600 dark:text-red-400",
1727
- bgClass: "bg-red-50 dark:bg-red-900/20"
1651
+ badgeClass: StatusBadge_module_default.stateRecording,
1652
+ dotClass: StatusBadge_module_default.dotRecording,
1653
+ labelClass: StatusBadge_module_default.labelRecording
1728
1654
  };
1729
1655
  case "paused":
1730
1656
  return {
1731
1657
  label: "PAUSED",
1732
- dotClass: "bg-amber-500",
1733
- textClass: "text-amber-600 dark:text-amber-400",
1734
- bgClass: "bg-amber-50 dark:bg-amber-900/20"
1658
+ badgeClass: StatusBadge_module_default.statePaused,
1659
+ dotClass: StatusBadge_module_default.dotPaused,
1660
+ labelClass: StatusBadge_module_default.labelPaused
1735
1661
  };
1736
1662
  case "requesting":
1737
1663
  return {
1738
1664
  label: "REQUESTING",
1739
- dotClass: "bg-blue-500 animate-pulse",
1740
- textClass: "text-blue-600 dark:text-blue-400",
1741
- bgClass: "bg-blue-50 dark:bg-blue-900/20"
1665
+ badgeClass: StatusBadge_module_default.stateRequesting,
1666
+ dotClass: StatusBadge_module_default.dotRequesting,
1667
+ labelClass: StatusBadge_module_default.labelRequesting
1742
1668
  };
1743
1669
  case "countdown":
1744
1670
  return {
1745
1671
  label: "STARTING",
1746
- dotClass: "bg-amber-500 animate-pulse",
1747
- textClass: "text-amber-600 dark:text-amber-400",
1748
- bgClass: "bg-amber-50 dark:bg-amber-900/20"
1672
+ badgeClass: StatusBadge_module_default.stateCountdown,
1673
+ dotClass: StatusBadge_module_default.dotCountdown,
1674
+ labelClass: StatusBadge_module_default.labelCountdown
1749
1675
  };
1750
1676
  case "stopped":
1751
1677
  return {
1752
1678
  label: "STOPPED",
1753
- dotClass: "bg-gray-500",
1754
- textClass: "text-gray-600 dark:text-gray-400",
1755
- bgClass: "bg-gray-50 dark:bg-gray-800"
1679
+ badgeClass: StatusBadge_module_default.stateStopped,
1680
+ dotClass: StatusBadge_module_default.dotStopped,
1681
+ labelClass: StatusBadge_module_default.labelStopped
1756
1682
  };
1757
1683
  case "error":
1758
1684
  return {
1759
1685
  label: "ERROR",
1760
- dotClass: "bg-red-500",
1761
- textClass: "text-red-600 dark:text-red-400",
1762
- bgClass: "bg-red-50 dark:bg-red-900/20"
1686
+ badgeClass: StatusBadge_module_default.stateError,
1687
+ dotClass: StatusBadge_module_default.dotError,
1688
+ labelClass: StatusBadge_module_default.labelError
1763
1689
  };
1764
1690
  default:
1765
1691
  return {
1766
1692
  label: "IDLE",
1767
- dotClass: "bg-gray-400",
1768
- textClass: "text-gray-500 dark:text-gray-400",
1769
- bgClass: "bg-gray-50 dark:bg-gray-800"
1693
+ badgeClass: StatusBadge_module_default.stateIdle,
1694
+ dotClass: StatusBadge_module_default.dotIdle,
1695
+ labelClass: StatusBadge_module_default.labelIdle
1770
1696
  };
1771
1697
  }
1772
1698
  };
@@ -1774,23 +1700,31 @@ var StatusBadge = ({ state, className }) => {
1774
1700
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
1775
1701
  "div",
1776
1702
  {
1777
- className: cn(
1778
- "inline-flex items-center gap-1.5 px-2 py-1 rounded-full",
1779
- config.bgClass,
1780
- className
1781
- ),
1703
+ className: (0, import_clsx7.default)(StatusBadge_module_default.badge, config.badgeClass, className),
1782
1704
  role: "status",
1783
1705
  "aria-live": "polite",
1784
1706
  children: [
1785
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("w-2 h-2 rounded-full", config.dotClass) }),
1786
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("text-xs font-semibold uppercase", config.textClass), children: config.label })
1707
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: (0, import_clsx7.default)(StatusBadge_module_default.dot, config.dotClass) }),
1708
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: (0, import_clsx7.default)(StatusBadge_module_default.label, config.labelClass), children: config.label })
1787
1709
  ]
1788
1710
  }
1789
1711
  );
1790
1712
  };
1791
1713
 
1714
+ // src/components/Status/ErrorMessage.tsx
1715
+ var import_clsx8 = __toESM(require("clsx"));
1716
+
1717
+ // scss-module:/home/runner/work/usefy/usefy/packages/kits/screen-recorder/src/components/Status/ErrorMessage.module.scss
1718
+ var ErrorMessage_module_default = { "container": "ErrorMessage_container__m4xi6", "topLeft": "ErrorMessage_topLeft__m4xi6", "topRight": "ErrorMessage_topRight__m4xi6", "bottomLeft": "ErrorMessage_bottomLeft__m4xi6", "bottomRight": "ErrorMessage_bottomRight__m4xi6", "header": "ErrorMessage_header__m4xi6", "warningIcon": "ErrorMessage_warningIcon__m4xi6", "content": "ErrorMessage_content__m4xi6", "title": "ErrorMessage_title__m4xi6", "message": "ErrorMessage_message__m4xi6", "dismissButton": "ErrorMessage_dismissButton__m4xi6", "dismissIcon": "ErrorMessage_dismissIcon__m4xi6", "retryButton": "ErrorMessage_retryButton__m4xi6" };
1719
+
1792
1720
  // src/components/Status/ErrorMessage.tsx
1793
1721
  var import_jsx_runtime9 = require("react/jsx-runtime");
1722
+ var POSITION_STYLES3 = {
1723
+ "top-left": ErrorMessage_module_default.topLeft,
1724
+ "top-right": ErrorMessage_module_default.topRight,
1725
+ "bottom-left": ErrorMessage_module_default.bottomLeft,
1726
+ "bottom-right": ErrorMessage_module_default.bottomRight
1727
+ };
1794
1728
  var ErrorMessage = ({
1795
1729
  error,
1796
1730
  onRetry,
@@ -1802,38 +1736,29 @@ var ErrorMessage = ({
1802
1736
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
1803
1737
  "div",
1804
1738
  {
1805
- className: cn(
1806
- // Base styles
1807
- "fixed flex flex-col gap-3 p-4 max-w-sm rounded-lg shadow-lg",
1808
- "bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800",
1809
- "animate-slide-up",
1810
- // Position
1811
- POSITION_CLASSES[position],
1739
+ className: (0, import_clsx8.default)(
1740
+ ErrorMessage_module_default.container,
1741
+ POSITION_STYLES3[position],
1812
1742
  className
1813
1743
  ),
1814
1744
  style: { zIndex },
1815
1745
  role: "alert",
1816
1746
  "aria-live": "assertive",
1817
1747
  children: [
1818
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start gap-3", children: [
1819
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WarningIcon, { className: "w-5 h-5 text-red-500 dark:text-red-400 flex-shrink-0 mt-0.5" }),
1820
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1", children: [
1821
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "font-semibold text-red-800 dark:text-red-200", children: getErrorTitle(error.code) }),
1822
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-300", children: error.message })
1748
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: ErrorMessage_module_default.header, children: [
1749
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(WarningIcon, { className: ErrorMessage_module_default.warningIcon }),
1750
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: ErrorMessage_module_default.content, children: [
1751
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: ErrorMessage_module_default.title, children: getErrorTitle(error.code) }),
1752
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: ErrorMessage_module_default.message, children: error.message })
1823
1753
  ] }),
1824
1754
  onDismiss && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1825
1755
  "button",
1826
1756
  {
1827
1757
  type: "button",
1828
1758
  onClick: onDismiss,
1829
- className: cn(
1830
- "p-1 rounded-full",
1831
- "hover:bg-red-100 dark:hover:bg-red-800/50",
1832
- "transition-colors duration-150",
1833
- "focus:outline-none focus:ring-2 focus:ring-red-500"
1834
- ),
1759
+ className: ErrorMessage_module_default.dismissButton,
1835
1760
  "aria-label": "Dismiss error",
1836
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon, { className: "w-4 h-4 text-red-500 dark:text-red-400" })
1761
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseIcon, { className: ErrorMessage_module_default.dismissIcon })
1837
1762
  }
1838
1763
  )
1839
1764
  ] }),
@@ -1842,13 +1767,7 @@ var ErrorMessage = ({
1842
1767
  {
1843
1768
  type: "button",
1844
1769
  onClick: onRetry,
1845
- className: cn(
1846
- "w-full py-2 rounded-md",
1847
- "bg-red-100 dark:bg-red-800/50 hover:bg-red-200 dark:hover:bg-red-800",
1848
- "text-red-700 dark:text-red-200 font-medium text-sm",
1849
- "transition-colors duration-150",
1850
- "focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
1851
- ),
1770
+ className: ErrorMessage_module_default.retryButton,
1852
1771
  children: "Try Again"
1853
1772
  }
1854
1773
  )
@@ -1875,6 +1794,9 @@ function getErrorTitle(code) {
1875
1794
  }
1876
1795
  }
1877
1796
 
1797
+ // scss-module:/home/runner/work/usefy/usefy/packages/kits/screen-recorder/src/ScreenRecorder.module.scss
1798
+ var ScreenRecorder_module_default = { "spinner": "ScreenRecorder_spinner__l636w", "spinnerTrack": "ScreenRecorder_spinnerTrack__l636w", "spinnerHead": "ScreenRecorder_spinnerHead__l636w", "requestingContent": "ScreenRecorder_requestingContent__l636w", "opacityReduced": "ScreenRecorder_opacityReduced__l636w" };
1799
+
1878
1800
  // src/ScreenRecorder.tsx
1879
1801
  var import_jsx_runtime10 = require("react/jsx-runtime");
1880
1802
  var ScreenRecorder = (0, import_react9.forwardRef)(
@@ -2088,19 +2010,19 @@ var ScreenRecorder = (0, import_react9.forwardRef)(
2088
2010
  position,
2089
2011
  disabled: true,
2090
2012
  zIndex,
2091
- className: cn("opacity-75", className),
2092
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex items-center gap-2", children: [
2013
+ className: (0, import_clsx9.default)(ScreenRecorder_module_default.opacityReduced, className),
2014
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: ScreenRecorder_module_default.requestingContent, children: [
2093
2015
  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
2094
2016
  "svg",
2095
2017
  {
2096
- className: "animate-spin h-4 w-4",
2018
+ className: ScreenRecorder_module_default.spinner,
2097
2019
  fill: "none",
2098
2020
  viewBox: "0 0 24 24",
2099
2021
  children: [
2100
2022
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2101
2023
  "circle",
2102
2024
  {
2103
- className: "opacity-25",
2025
+ className: ScreenRecorder_module_default.spinnerTrack,
2104
2026
  cx: "12",
2105
2027
  cy: "12",
2106
2028
  r: "10",
@@ -2111,7 +2033,7 @@ var ScreenRecorder = (0, import_react9.forwardRef)(
2111
2033
  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
2112
2034
  "path",
2113
2035
  {
2114
- className: "opacity-75",
2036
+ className: ScreenRecorder_module_default.spinnerHead,
2115
2037
  fill: "currentColor",
2116
2038
  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
2117
2039
  }
@@ -2141,7 +2063,7 @@ var ScreenRecorder = (0, import_react9.forwardRef)(
2141
2063
  "div",
2142
2064
  {
2143
2065
  ref,
2144
- className: cn("usefy-screen-recorder", theme === "dark" && "dark"),
2066
+ className: (0, import_clsx9.default)(ScreenRecorder_module_default.root, "usefy-screen-recorder", theme === "dark" && "dark"),
2145
2067
  "data-state": recorder.state,
2146
2068
  children: content
2147
2069
  }
@@ -2181,7 +2103,6 @@ ScreenRecorder.displayName = "ScreenRecorder";
2181
2103
  VideoPlayer,
2182
2104
  WarningIcon,
2183
2105
  checkBrowserSupport,
2184
- cn,
2185
2106
  downloadBlob,
2186
2107
  formatBytes,
2187
2108
  formatTime,
@@ -2201,1273 +2122,1557 @@ ScreenRecorder.displayName = "ScreenRecorder";
2201
2122
  if (document.getElementById(id)) return;
2202
2123
  var style = document.createElement('style');
2203
2124
  style.id = id;
2204
- style.textContent = `*, ::before, ::after {
2205
- --tw-border-spacing-x: 0;
2206
- --tw-border-spacing-y: 0;
2207
- --tw-translate-x: 0;
2208
- --tw-translate-y: 0;
2209
- --tw-rotate: 0;
2210
- --tw-skew-x: 0;
2211
- --tw-skew-y: 0;
2212
- --tw-scale-x: 1;
2213
- --tw-scale-y: 1;
2214
- --tw-pan-x: ;
2215
- --tw-pan-y: ;
2216
- --tw-pinch-zoom: ;
2217
- --tw-scroll-snap-strictness: proximity;
2218
- --tw-gradient-from-position: ;
2219
- --tw-gradient-via-position: ;
2220
- --tw-gradient-to-position: ;
2221
- --tw-ordinal: ;
2222
- --tw-slashed-zero: ;
2223
- --tw-numeric-figure: ;
2224
- --tw-numeric-spacing: ;
2225
- --tw-numeric-fraction: ;
2226
- --tw-ring-inset: ;
2227
- --tw-ring-offset-width: 0px;
2228
- --tw-ring-offset-color: #fff;
2229
- --tw-ring-color: rgb(59 130 246 / 0.5);
2230
- --tw-ring-offset-shadow: 0 0 #0000;
2231
- --tw-ring-shadow: 0 0 #0000;
2232
- --tw-shadow: 0 0 #0000;
2233
- --tw-shadow-colored: 0 0 #0000;
2234
- --tw-blur: ;
2235
- --tw-brightness: ;
2236
- --tw-contrast: ;
2237
- --tw-grayscale: ;
2238
- --tw-hue-rotate: ;
2239
- --tw-invert: ;
2240
- --tw-saturate: ;
2241
- --tw-sepia: ;
2242
- --tw-drop-shadow: ;
2243
- --tw-backdrop-blur: ;
2244
- --tw-backdrop-brightness: ;
2245
- --tw-backdrop-contrast: ;
2246
- --tw-backdrop-grayscale: ;
2247
- --tw-backdrop-hue-rotate: ;
2248
- --tw-backdrop-invert: ;
2249
- --tw-backdrop-opacity: ;
2250
- --tw-backdrop-saturate: ;
2251
- --tw-backdrop-sepia: ;
2252
- --tw-contain-size: ;
2253
- --tw-contain-layout: ;
2254
- --tw-contain-paint: ;
2255
- --tw-contain-style: ;
2256
- }
2257
-
2258
- ::backdrop {
2259
- --tw-border-spacing-x: 0;
2260
- --tw-border-spacing-y: 0;
2261
- --tw-translate-x: 0;
2262
- --tw-translate-y: 0;
2263
- --tw-rotate: 0;
2264
- --tw-skew-x: 0;
2265
- --tw-skew-y: 0;
2266
- --tw-scale-x: 1;
2267
- --tw-scale-y: 1;
2268
- --tw-pan-x: ;
2269
- --tw-pan-y: ;
2270
- --tw-pinch-zoom: ;
2271
- --tw-scroll-snap-strictness: proximity;
2272
- --tw-gradient-from-position: ;
2273
- --tw-gradient-via-position: ;
2274
- --tw-gradient-to-position: ;
2275
- --tw-ordinal: ;
2276
- --tw-slashed-zero: ;
2277
- --tw-numeric-figure: ;
2278
- --tw-numeric-spacing: ;
2279
- --tw-numeric-fraction: ;
2280
- --tw-ring-inset: ;
2281
- --tw-ring-offset-width: 0px;
2282
- --tw-ring-offset-color: #fff;
2283
- --tw-ring-color: rgb(59 130 246 / 0.5);
2284
- --tw-ring-offset-shadow: 0 0 #0000;
2285
- --tw-ring-shadow: 0 0 #0000;
2286
- --tw-shadow: 0 0 #0000;
2287
- --tw-shadow-colored: 0 0 #0000;
2288
- --tw-blur: ;
2289
- --tw-brightness: ;
2290
- --tw-contrast: ;
2291
- --tw-grayscale: ;
2292
- --tw-hue-rotate: ;
2293
- --tw-invert: ;
2294
- --tw-saturate: ;
2295
- --tw-sepia: ;
2296
- --tw-drop-shadow: ;
2297
- --tw-backdrop-blur: ;
2298
- --tw-backdrop-brightness: ;
2299
- --tw-backdrop-contrast: ;
2300
- --tw-backdrop-grayscale: ;
2301
- --tw-backdrop-hue-rotate: ;
2302
- --tw-backdrop-invert: ;
2303
- --tw-backdrop-opacity: ;
2304
- --tw-backdrop-saturate: ;
2305
- --tw-backdrop-sepia: ;
2306
- --tw-contain-size: ;
2307
- --tw-contain-layout: ;
2308
- --tw-contain-paint: ;
2309
- --tw-contain-style: ;
2310
- }/*
2311
- ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
2312
- *//*
2313
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2314
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
2315
- */
2316
-
2317
- *,
2318
- ::before,
2319
- ::after {
2320
- box-sizing: border-box; /* 1 */
2321
- border-width: 0; /* 2 */
2322
- border-style: solid; /* 2 */
2323
- border-color: #e5e7eb; /* 2 */
2324
- }
2325
-
2326
- ::before,
2327
- ::after {
2328
- --tw-content: '';
2329
- }
2330
-
2331
- /*
2332
- 1. Use a consistent sensible line-height in all browsers.
2333
- 2. Prevent adjustments of font size after orientation changes in iOS.
2334
- 3. Use a more readable tab size.
2335
- 4. Use the user's configured \`sans\` font-family by default.
2336
- 5. Use the user's configured \`sans\` font-feature-settings by default.
2337
- 6. Use the user's configured \`sans\` font-variation-settings by default.
2338
- 7. Disable tap highlights on iOS
2339
- */
2340
-
2341
- html,
2342
- :host {
2343
- line-height: 1.5; /* 1 */
2344
- -webkit-text-size-adjust: 100%; /* 2 */
2345
- -moz-tab-size: 4; /* 3 */
2346
- -o-tab-size: 4;
2347
- tab-size: 4; /* 3 */
2348
- font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
2349
- font-feature-settings: normal; /* 5 */
2350
- font-variation-settings: normal; /* 6 */
2351
- -webkit-tap-highlight-color: transparent; /* 7 */
2352
- }
2353
-
2354
- /*
2355
- 1. Remove the margin in all browsers.
2356
- 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element.
2357
- */
2358
-
2359
- body {
2360
- margin: 0; /* 1 */
2361
- line-height: inherit; /* 2 */
2362
- }
2363
-
2364
- /*
2365
- 1. Add the correct height in Firefox.
2366
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
2367
- 3. Ensure horizontal rules are visible by default.
2368
- */
2369
-
2370
- hr {
2371
- height: 0; /* 1 */
2372
- color: inherit; /* 2 */
2373
- border-top-width: 1px; /* 3 */
2374
- }
2375
-
2376
- /*
2377
- Add the correct text decoration in Chrome, Edge, and Safari.
2378
- */
2379
-
2380
- abbr:where([title]) {
2381
- -webkit-text-decoration: underline dotted;
2382
- text-decoration: underline dotted;
2383
- }
2384
-
2385
- /*
2386
- Remove the default font size and weight for headings.
2387
- */
2388
-
2389
- h1,
2390
- h2,
2391
- h3,
2392
- h4,
2393
- h5,
2394
- h6 {
2395
- font-size: inherit;
2396
- font-weight: inherit;
2397
- }
2398
-
2399
- /*
2400
- Reset links to optimize for opt-in styling instead of opt-out.
2401
- */
2402
-
2403
- a {
2404
- color: inherit;
2405
- text-decoration: inherit;
2125
+ style.textContent = `/* components/Countdown/Countdown.module.scss */
2126
+ @keyframes pulse {
2127
+ 0%, 100% {
2128
+ opacity: 1;
2129
+ }
2130
+ 50% {
2131
+ opacity: 0.5;
2132
+ }
2406
2133
  }
2407
-
2408
- /*
2409
- Add the correct font weight in Edge and Safari.
2410
- */
2411
-
2412
- b,
2413
- strong {
2414
- font-weight: bolder;
2134
+ @keyframes pulse-record {
2135
+ 0%, 100% {
2136
+ opacity: 1;
2137
+ }
2138
+ 50% {
2139
+ opacity: 0.5;
2140
+ }
2415
2141
  }
2416
-
2417
- /*
2418
- 1. Use the user's configured \`mono\` font-family by default.
2419
- 2. Use the user's configured \`mono\` font-feature-settings by default.
2420
- 3. Use the user's configured \`mono\` font-variation-settings by default.
2421
- 4. Correct the odd \`em\` font sizing in all browsers.
2422
- */
2423
-
2424
- code,
2425
- kbd,
2426
- samp,
2427
- pre {
2428
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
2429
- font-feature-settings: normal; /* 2 */
2430
- font-variation-settings: normal; /* 3 */
2431
- font-size: 1em; /* 4 */
2142
+ @keyframes spin {
2143
+ from {
2144
+ transform: rotate(0deg);
2145
+ }
2146
+ to {
2147
+ transform: rotate(360deg);
2148
+ }
2432
2149
  }
2433
-
2434
- /*
2435
- Add the correct font size in all browsers.
2436
- */
2437
-
2438
- small {
2439
- font-size: 80%;
2150
+ @keyframes fade-in {
2151
+ 0% {
2152
+ opacity: 0;
2153
+ }
2154
+ 100% {
2155
+ opacity: 1;
2156
+ }
2157
+ }
2158
+ @keyframes slide-up {
2159
+ 0% {
2160
+ transform: translateY(10px);
2161
+ opacity: 0;
2162
+ }
2163
+ 100% {
2164
+ transform: translateY(0);
2165
+ opacity: 1;
2166
+ }
2167
+ }
2168
+ @keyframes countdown-scale {
2169
+ 0% {
2170
+ transform: scale(0.5);
2171
+ opacity: 0;
2172
+ }
2173
+ 50% {
2174
+ transform: scale(1.2);
2175
+ opacity: 1;
2176
+ }
2177
+ 100% {
2178
+ transform: scale(1);
2179
+ opacity: 1;
2180
+ }
2181
+ }
2182
+ .Countdown_overlay__cif1q {
2183
+ position: fixed;
2184
+ top: 0;
2185
+ right: 0;
2186
+ bottom: 0;
2187
+ left: 0;
2188
+ display: flex;
2189
+ flex-direction: column;
2190
+ align-items: center;
2191
+ justify-content: center;
2192
+ background-color: rgba(0, 0, 0, 0.5);
2193
+ backdrop-filter: blur(4px);
2194
+ -webkit-backdrop-filter: blur(4px);
2195
+ animation: fade-in 200ms ease-out;
2440
2196
  }
2441
2197
 
2442
- /*
2443
- Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
2444
- */
2198
+ .Countdown_countdownCircle__cif1q {
2199
+ display: flex;
2200
+ align-items: center;
2201
+ justify-content: center;
2202
+ width: 8rem;
2203
+ height: 8rem;
2204
+ border-radius: 9999px;
2205
+ background-color: rgba(255, 255, 255, 0.1);
2206
+ border: 4px solid rgba(255, 255, 255, 0.3);
2207
+ color: white;
2208
+ font-size: 4.5rem;
2209
+ font-weight: 700;
2210
+ animation: countdown-scale 500ms ease-out;
2211
+ }
2445
2212
 
2446
- sub,
2447
- sup {
2448
- font-size: 75%;
2449
- line-height: 0;
2450
- position: relative;
2451
- vertical-align: baseline;
2213
+ .Countdown_message__cif1q {
2214
+ margin-top: 1.5rem;
2215
+ color: rgba(255, 255, 255, 0.8);
2216
+ font-size: 1.125rem;
2217
+ line-height: 1.25;
2218
+ font-weight: 500;
2452
2219
  }
2453
2220
 
2454
- sub {
2455
- bottom: -0.25em;
2221
+ .Countdown_cancelButton__cif1q {
2222
+ -webkit-appearance: none;
2223
+ -moz-appearance: none;
2224
+ appearance: none;
2225
+ background: none;
2226
+ border: none;
2227
+ padding: 0;
2228
+ margin: 0;
2229
+ font: inherit;
2230
+ color: inherit;
2231
+ cursor: pointer;
2232
+ }
2233
+ .Countdown_cancelButton__cif1q:disabled {
2234
+ cursor: not-allowed;
2235
+ }
2236
+ .Countdown_cancelButton__cif1q {
2237
+ margin-top: 2rem;
2238
+ padding: 0.5rem 1.5rem;
2239
+ border-radius: 9999px;
2240
+ background-color: rgba(255, 255, 255, 0.1);
2241
+ color: white;
2242
+ font-size: 0.875rem;
2243
+ line-height: 1.5;
2244
+ font-weight: 500;
2245
+ transition-property: color, background-color, border-color;
2246
+ transition-duration: 200ms;
2247
+ transition-timing-function: ease-out;
2248
+ }
2249
+ .Countdown_cancelButton__cif1q:hover {
2250
+ background-color: rgba(255, 255, 255, 0.2);
2251
+ }
2252
+ .Countdown_cancelButton__cif1q:focus {
2253
+ outline: none;
2254
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
2456
2255
  }
2457
2256
 
2458
- sup {
2459
- top: -0.5em;
2257
+ /* components/Status/StatusBadge.module.scss */
2258
+ @keyframes pulse {
2259
+ 0%, 100% {
2260
+ opacity: 1;
2261
+ }
2262
+ 50% {
2263
+ opacity: 0.5;
2264
+ }
2265
+ }
2266
+ @keyframes pulse-record {
2267
+ 0%, 100% {
2268
+ opacity: 1;
2269
+ }
2270
+ 50% {
2271
+ opacity: 0.5;
2272
+ }
2273
+ }
2274
+ @keyframes spin {
2275
+ from {
2276
+ transform: rotate(0deg);
2277
+ }
2278
+ to {
2279
+ transform: rotate(360deg);
2280
+ }
2281
+ }
2282
+ @keyframes fade-in {
2283
+ 0% {
2284
+ opacity: 0;
2285
+ }
2286
+ 100% {
2287
+ opacity: 1;
2288
+ }
2289
+ }
2290
+ @keyframes slide-up {
2291
+ 0% {
2292
+ transform: translateY(10px);
2293
+ opacity: 0;
2294
+ }
2295
+ 100% {
2296
+ transform: translateY(0);
2297
+ opacity: 1;
2298
+ }
2299
+ }
2300
+ @keyframes countdown-scale {
2301
+ 0% {
2302
+ transform: scale(0.5);
2303
+ opacity: 0;
2304
+ }
2305
+ 50% {
2306
+ transform: scale(1.2);
2307
+ opacity: 1;
2308
+ }
2309
+ 100% {
2310
+ transform: scale(1);
2311
+ opacity: 1;
2312
+ }
2313
+ }
2314
+ .StatusBadge_badge__o3pyl {
2315
+ display: inline-flex;
2316
+ align-items: center;
2317
+ gap: 0.375rem;
2318
+ padding: 0.25rem 0.5rem;
2319
+ border-radius: 9999px;
2460
2320
  }
2461
2321
 
2462
- /*
2463
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2464
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
2465
- 3. Remove gaps between table borders by default.
2466
- */
2322
+ .StatusBadge_dot__o3pyl {
2323
+ width: 0.5rem;
2324
+ height: 0.5rem;
2325
+ border-radius: 9999px;
2326
+ }
2467
2327
 
2468
- table {
2469
- text-indent: 0; /* 1 */
2470
- border-color: inherit; /* 2 */
2471
- border-collapse: collapse; /* 3 */
2328
+ .StatusBadge_label__o3pyl {
2329
+ font-size: 0.75rem;
2330
+ line-height: 1.5;
2331
+ font-weight: 600;
2332
+ text-transform: uppercase;
2472
2333
  }
2473
2334
 
2474
- /*
2475
- 1. Change the font styles in all browsers.
2476
- 2. Remove the margin in Firefox and Safari.
2477
- 3. Remove default padding in all browsers.
2478
- */
2335
+ .StatusBadge_stateRecording__o3pyl {
2336
+ background-color: #fef2f2;
2337
+ }
2338
+ .dark .StatusBadge_stateRecording__o3pyl {
2339
+ background-color: rgba(127, 29, 29, 0.2);
2340
+ }
2479
2341
 
2480
- button,
2481
- input,
2482
- optgroup,
2483
- select,
2484
- textarea {
2485
- font-family: inherit; /* 1 */
2486
- font-feature-settings: inherit; /* 1 */
2487
- font-variation-settings: inherit; /* 1 */
2488
- font-size: 100%; /* 1 */
2489
- font-weight: inherit; /* 1 */
2490
- line-height: inherit; /* 1 */
2491
- letter-spacing: inherit; /* 1 */
2492
- color: inherit; /* 1 */
2493
- margin: 0; /* 2 */
2494
- padding: 0; /* 3 */
2342
+ .StatusBadge_dotRecording__o3pyl {
2343
+ background-color: #ef4444;
2344
+ animation: pulse-record 1s ease-in-out infinite;
2495
2345
  }
2496
2346
 
2497
- /*
2498
- Remove the inheritance of text transform in Edge and Firefox.
2499
- */
2347
+ .StatusBadge_labelRecording__o3pyl {
2348
+ color: #dc2626;
2349
+ }
2350
+ .dark .StatusBadge_labelRecording__o3pyl {
2351
+ color: #f87171;
2352
+ }
2500
2353
 
2501
- button,
2502
- select {
2503
- text-transform: none;
2354
+ .StatusBadge_statePaused__o3pyl {
2355
+ background-color: #fffbeb;
2356
+ }
2357
+ .dark .StatusBadge_statePaused__o3pyl {
2358
+ background-color: rgba(120, 53, 15, 0.2);
2504
2359
  }
2505
2360
 
2506
- /*
2507
- 1. Correct the inability to style clickable types in iOS and Safari.
2508
- 2. Remove default button styles.
2509
- */
2361
+ .StatusBadge_dotPaused__o3pyl {
2362
+ background-color: #f59e0b;
2363
+ }
2510
2364
 
2511
- button,
2512
- input:where([type='button']),
2513
- input:where([type='reset']),
2514
- input:where([type='submit']) {
2515
- -webkit-appearance: button; /* 1 */
2516
- background-color: transparent; /* 2 */
2517
- background-image: none; /* 2 */
2365
+ .StatusBadge_labelPaused__o3pyl {
2366
+ color: #d97706;
2367
+ }
2368
+ .dark .StatusBadge_labelPaused__o3pyl {
2369
+ color: #fbbf24;
2518
2370
  }
2519
2371
 
2520
- /*
2521
- Use the modern Firefox focus style for all focusable elements.
2522
- */
2372
+ .StatusBadge_stateRequesting__o3pyl {
2373
+ background-color: #eff6ff;
2374
+ }
2375
+ .dark .StatusBadge_stateRequesting__o3pyl {
2376
+ background-color: rgba(29, 78, 216, 0.2);
2377
+ }
2523
2378
 
2524
- :-moz-focusring {
2525
- outline: auto;
2379
+ .StatusBadge_dotRequesting__o3pyl {
2380
+ background-color: #3b82f6;
2381
+ animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
2526
2382
  }
2527
2383
 
2528
- /*
2529
- Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
2530
- */
2384
+ .StatusBadge_labelRequesting__o3pyl {
2385
+ color: #2563eb;
2386
+ }
2387
+ .dark .StatusBadge_labelRequesting__o3pyl {
2388
+ color: #60a5fa;
2389
+ }
2531
2390
 
2532
- :-moz-ui-invalid {
2533
- box-shadow: none;
2391
+ .StatusBadge_stateCountdown__o3pyl {
2392
+ background-color: #fffbeb;
2393
+ }
2394
+ .dark .StatusBadge_stateCountdown__o3pyl {
2395
+ background-color: rgba(120, 53, 15, 0.2);
2534
2396
  }
2535
2397
 
2536
- /*
2537
- Add the correct vertical alignment in Chrome and Firefox.
2538
- */
2398
+ .StatusBadge_dotCountdown__o3pyl {
2399
+ background-color: #f59e0b;
2400
+ animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
2401
+ }
2539
2402
 
2540
- progress {
2541
- vertical-align: baseline;
2403
+ .StatusBadge_labelCountdown__o3pyl {
2404
+ color: #d97706;
2405
+ }
2406
+ .dark .StatusBadge_labelCountdown__o3pyl {
2407
+ color: #fbbf24;
2542
2408
  }
2543
2409
 
2544
- /*
2545
- Correct the cursor style of increment and decrement buttons in Safari.
2546
- */
2410
+ .StatusBadge_stateStopped__o3pyl {
2411
+ background-color: #f9fafb;
2412
+ }
2413
+ .dark .StatusBadge_stateStopped__o3pyl {
2414
+ background-color: #1f2937;
2415
+ }
2547
2416
 
2548
- ::-webkit-inner-spin-button,
2549
- ::-webkit-outer-spin-button {
2550
- height: auto;
2417
+ .StatusBadge_dotStopped__o3pyl {
2418
+ background-color: #6b7280;
2551
2419
  }
2552
2420
 
2553
- /*
2554
- 1. Correct the odd appearance in Chrome and Safari.
2555
- 2. Correct the outline style in Safari.
2556
- */
2421
+ .StatusBadge_labelStopped__o3pyl {
2422
+ color: #4b5563;
2423
+ }
2424
+ .dark .StatusBadge_labelStopped__o3pyl {
2425
+ color: #9ca3af;
2426
+ }
2557
2427
 
2558
- [type='search'] {
2559
- -webkit-appearance: textfield; /* 1 */
2560
- outline-offset: -2px; /* 2 */
2428
+ .StatusBadge_stateError__o3pyl {
2429
+ background-color: #fef2f2;
2430
+ }
2431
+ .dark .StatusBadge_stateError__o3pyl {
2432
+ background-color: rgba(127, 29, 29, 0.2);
2561
2433
  }
2562
2434
 
2563
- /*
2564
- Remove the inner padding in Chrome and Safari on macOS.
2565
- */
2435
+ .StatusBadge_dotError__o3pyl {
2436
+ background-color: #ef4444;
2437
+ }
2566
2438
 
2567
- ::-webkit-search-decoration {
2568
- -webkit-appearance: none;
2439
+ .StatusBadge_labelError__o3pyl {
2440
+ color: #dc2626;
2441
+ }
2442
+ .dark .StatusBadge_labelError__o3pyl {
2443
+ color: #f87171;
2569
2444
  }
2570
2445
 
2571
- /*
2572
- 1. Correct the inability to style clickable types in iOS and Safari.
2573
- 2. Change font properties to \`inherit\` in Safari.
2574
- */
2446
+ .StatusBadge_stateIdle__o3pyl {
2447
+ background-color: #f9fafb;
2448
+ }
2449
+ .dark .StatusBadge_stateIdle__o3pyl {
2450
+ background-color: #1f2937;
2451
+ }
2575
2452
 
2576
- ::-webkit-file-upload-button {
2577
- -webkit-appearance: button; /* 1 */
2578
- font: inherit; /* 2 */
2453
+ .StatusBadge_dotIdle__o3pyl {
2454
+ background-color: #9ca3af;
2579
2455
  }
2580
2456
 
2581
- /*
2582
- Add the correct display in Chrome and Safari.
2583
- */
2584
-
2585
- summary {
2586
- display: list-item;
2457
+ .StatusBadge_labelIdle__o3pyl {
2458
+ color: #6b7280;
2587
2459
  }
2588
-
2589
- /*
2590
- Removes the default spacing and border for appropriate elements.
2591
- */
2592
-
2593
- blockquote,
2594
- dl,
2595
- dd,
2596
- h1,
2597
- h2,
2598
- h3,
2599
- h4,
2600
- h5,
2601
- h6,
2602
- hr,
2603
- figure,
2604
- p,
2605
- pre {
2606
- margin: 0;
2460
+ .dark .StatusBadge_labelIdle__o3pyl {
2461
+ color: #9ca3af;
2607
2462
  }
2608
2463
 
2609
- fieldset {
2610
- margin: 0;
2611
- padding: 0;
2464
+ /* components/Status/ErrorMessage.module.scss */
2465
+ @keyframes pulse {
2466
+ 0%, 100% {
2467
+ opacity: 1;
2468
+ }
2469
+ 50% {
2470
+ opacity: 0.5;
2471
+ }
2472
+ }
2473
+ @keyframes pulse-record {
2474
+ 0%, 100% {
2475
+ opacity: 1;
2476
+ }
2477
+ 50% {
2478
+ opacity: 0.5;
2479
+ }
2480
+ }
2481
+ @keyframes spin {
2482
+ from {
2483
+ transform: rotate(0deg);
2484
+ }
2485
+ to {
2486
+ transform: rotate(360deg);
2487
+ }
2488
+ }
2489
+ @keyframes fade-in {
2490
+ 0% {
2491
+ opacity: 0;
2492
+ }
2493
+ 100% {
2494
+ opacity: 1;
2495
+ }
2496
+ }
2497
+ @keyframes slide-up {
2498
+ 0% {
2499
+ transform: translateY(10px);
2500
+ opacity: 0;
2501
+ }
2502
+ 100% {
2503
+ transform: translateY(0);
2504
+ opacity: 1;
2505
+ }
2506
+ }
2507
+ @keyframes countdown-scale {
2508
+ 0% {
2509
+ transform: scale(0.5);
2510
+ opacity: 0;
2511
+ }
2512
+ 50% {
2513
+ transform: scale(1.2);
2514
+ opacity: 1;
2515
+ }
2516
+ 100% {
2517
+ transform: scale(1);
2518
+ opacity: 1;
2519
+ }
2520
+ }
2521
+ .ErrorMessage_container__m4xi6 {
2522
+ position: fixed;
2523
+ display: flex;
2524
+ flex-direction: column;
2525
+ gap: 0.75rem;
2526
+ padding: 1rem;
2527
+ max-width: 24rem;
2528
+ border-radius: 0.5rem;
2529
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
2530
+ background-color: #fef2f2;
2531
+ border: 1px solid #fecaca;
2532
+ animation: slide-up 300ms ease-out;
2533
+ }
2534
+ .dark .ErrorMessage_container__m4xi6 {
2535
+ background-color: rgba(127, 29, 29, 0.3);
2536
+ border-color: #991b1b;
2612
2537
  }
2613
2538
 
2614
- legend {
2615
- padding: 0;
2539
+ .ErrorMessage_topLeft__m4xi6 {
2540
+ top: 1rem;
2541
+ left: 1rem;
2616
2542
  }
2617
2543
 
2618
- ol,
2619
- ul,
2620
- menu {
2621
- list-style: none;
2622
- margin: 0;
2623
- padding: 0;
2544
+ .ErrorMessage_topRight__m4xi6 {
2545
+ top: 1rem;
2546
+ right: 1rem;
2624
2547
  }
2625
2548
 
2626
- /*
2627
- Reset default styling for dialogs.
2628
- */
2629
- dialog {
2630
- padding: 0;
2549
+ .ErrorMessage_bottomLeft__m4xi6 {
2550
+ bottom: 1rem;
2551
+ left: 1rem;
2631
2552
  }
2632
2553
 
2633
- /*
2634
- Prevent resizing textareas horizontally by default.
2635
- */
2554
+ .ErrorMessage_bottomRight__m4xi6 {
2555
+ bottom: 1rem;
2556
+ right: 1rem;
2557
+ }
2636
2558
 
2637
- textarea {
2638
- resize: vertical;
2559
+ .ErrorMessage_header__m4xi6 {
2560
+ display: flex;
2561
+ align-items: center;
2562
+ justify-content: flex-start;
2563
+ gap: 0.75rem;
2639
2564
  }
2640
2565
 
2641
- /*
2642
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2643
- 2. Set the default placeholder color to the user's configured gray 400 color.
2644
- */
2566
+ .ErrorMessage_warningIcon__m4xi6 {
2567
+ width: 1.25rem;
2568
+ height: 1.25rem;
2569
+ color: #ef4444;
2570
+ flex-shrink: 0;
2571
+ margin-top: 0.125rem;
2572
+ }
2573
+ .dark .ErrorMessage_warningIcon__m4xi6 {
2574
+ color: #f87171;
2575
+ }
2645
2576
 
2646
- input::-moz-placeholder, textarea::-moz-placeholder {
2647
- opacity: 1; /* 1 */
2648
- color: #9ca3af; /* 2 */
2577
+ .ErrorMessage_content__m4xi6 {
2578
+ flex: 1;
2649
2579
  }
2650
2580
 
2651
- input::placeholder,
2652
- textarea::placeholder {
2653
- opacity: 1; /* 1 */
2654
- color: #9ca3af; /* 2 */
2581
+ .ErrorMessage_title__m4xi6 {
2582
+ font-weight: 600;
2583
+ color: #991b1b;
2584
+ }
2585
+ .dark .ErrorMessage_title__m4xi6 {
2586
+ color: #fecaca;
2655
2587
  }
2656
2588
 
2657
- /*
2658
- Set the default cursor for buttons.
2659
- */
2589
+ .ErrorMessage_message__m4xi6 {
2590
+ margin-top: 0.25rem;
2591
+ font-size: 0.875rem;
2592
+ line-height: 1.5;
2593
+ color: #dc2626;
2594
+ }
2595
+ .dark .ErrorMessage_message__m4xi6 {
2596
+ color: #fca5a5;
2597
+ }
2660
2598
 
2661
- button,
2662
- [role="button"] {
2599
+ .ErrorMessage_dismissButton__m4xi6 {
2600
+ -webkit-appearance: none;
2601
+ -moz-appearance: none;
2602
+ appearance: none;
2603
+ background: none;
2604
+ border: none;
2605
+ padding: 0;
2606
+ margin: 0;
2607
+ font: inherit;
2608
+ color: inherit;
2663
2609
  cursor: pointer;
2664
2610
  }
2665
-
2666
- /*
2667
- Make sure disabled buttons don't get the pointer cursor.
2668
- */
2669
- :disabled {
2670
- cursor: default;
2611
+ .ErrorMessage_dismissButton__m4xi6:disabled {
2612
+ cursor: not-allowed;
2671
2613
  }
2672
-
2673
- /*
2674
- 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2675
- 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
2676
- This can trigger a poorly considered lint error in some tools but is included by design.
2677
- */
2678
-
2679
- img,
2680
- svg,
2681
- video,
2682
- canvas,
2683
- audio,
2684
- iframe,
2685
- embed,
2686
- object {
2687
- display: block; /* 1 */
2688
- vertical-align: middle; /* 2 */
2614
+ .ErrorMessage_dismissButton__m4xi6 {
2615
+ padding: 0.25rem;
2616
+ border-radius: 9999px;
2617
+ transition-property: color, background-color, border-color;
2618
+ transition-duration: 200ms;
2619
+ transition-timing-function: ease-out;
2620
+ }
2621
+ .ErrorMessage_dismissButton__m4xi6:hover {
2622
+ background-color: #fee2e2;
2623
+ }
2624
+ .ErrorMessage_dismissButton__m4xi6:focus {
2625
+ outline: none;
2626
+ box-shadow: 0 0 0 2px #ef4444;
2627
+ }
2628
+ .dark .ErrorMessage_dismissButton__m4xi6:hover {
2629
+ background-color: rgba(153, 27, 27, 0.5);
2689
2630
  }
2690
2631
 
2691
- /*
2692
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
2693
- */
2694
-
2695
- img,
2696
- video {
2697
- max-width: 100%;
2698
- height: auto;
2632
+ .ErrorMessage_dismissIcon__m4xi6 {
2633
+ width: 1rem;
2634
+ height: 1rem;
2635
+ color: #ef4444;
2636
+ }
2637
+ .dark .ErrorMessage_dismissIcon__m4xi6 {
2638
+ color: #f87171;
2699
2639
  }
2700
2640
 
2701
- /* Make elements with the HTML hidden attribute stay hidden by default */
2702
- [hidden]:where(:not([hidden="until-found"])) {
2703
- display: none;
2641
+ .ErrorMessage_retryButton__m4xi6 {
2642
+ -webkit-appearance: none;
2643
+ -moz-appearance: none;
2644
+ appearance: none;
2645
+ background: none;
2646
+ border: none;
2647
+ padding: 0;
2648
+ margin: 0;
2649
+ font: inherit;
2650
+ color: inherit;
2651
+ cursor: pointer;
2704
2652
  }
2705
- .container {
2653
+ .ErrorMessage_retryButton__m4xi6:disabled {
2654
+ cursor: not-allowed;
2655
+ }
2656
+ .ErrorMessage_retryButton__m4xi6 {
2706
2657
  width: 100%;
2658
+ padding: 0.5rem;
2659
+ border-radius: 0.375rem;
2660
+ background-color: #fee2e2;
2661
+ color: #b91c1c;
2662
+ font-weight: 500;
2663
+ font-size: 0.875rem;
2664
+ line-height: 1.5;
2665
+ transition-property: color, background-color, border-color;
2666
+ transition-duration: 200ms;
2667
+ transition-timing-function: ease-out;
2707
2668
  }
2708
- @media (min-width: 640px) {
2709
-
2710
- .container {
2711
- max-width: 640px;
2712
- }
2669
+ .ErrorMessage_retryButton__m4xi6:hover {
2670
+ background-color: #fecaca;
2671
+ }
2672
+ .ErrorMessage_retryButton__m4xi6:focus {
2673
+ outline: none;
2674
+ box-shadow: 0 0 0 2px white, 0 0 0 4px #ef4444;
2675
+ }
2676
+ .dark .ErrorMessage_retryButton__m4xi6 {
2677
+ background-color: rgba(153, 27, 27, 0.5);
2678
+ color: #fecaca;
2679
+ }
2680
+ .dark .ErrorMessage_retryButton__m4xi6:hover {
2681
+ background-color: #991b1b;
2713
2682
  }
2714
- @media (min-width: 768px) {
2715
2683
 
2716
- .container {
2717
- max-width: 768px;
2684
+ /* components/Trigger/Trigger.module.scss */
2685
+ @keyframes pulse {
2686
+ 0%, 100% {
2687
+ opacity: 1;
2688
+ }
2689
+ 50% {
2690
+ opacity: 0.5;
2718
2691
  }
2719
2692
  }
2720
- @media (min-width: 1024px) {
2721
-
2722
- .container {
2723
- max-width: 1024px;
2693
+ @keyframes pulse-record {
2694
+ 0%, 100% {
2695
+ opacity: 1;
2696
+ }
2697
+ 50% {
2698
+ opacity: 0.5;
2724
2699
  }
2725
2700
  }
2726
- @media (min-width: 1280px) {
2727
-
2728
- .container {
2729
- max-width: 1280px;
2701
+ @keyframes spin {
2702
+ from {
2703
+ transform: rotate(0deg);
2704
+ }
2705
+ to {
2706
+ transform: rotate(360deg);
2730
2707
  }
2731
2708
  }
2732
- @media (min-width: 1536px) {
2733
-
2734
- .container {
2735
- max-width: 1536px;
2709
+ @keyframes fade-in {
2710
+ 0% {
2711
+ opacity: 0;
2712
+ }
2713
+ 100% {
2714
+ opacity: 1;
2736
2715
  }
2737
2716
  }
2738
- .fixed {
2739
- position: fixed;
2717
+ @keyframes slide-up {
2718
+ 0% {
2719
+ transform: translateY(10px);
2720
+ opacity: 0;
2721
+ }
2722
+ 100% {
2723
+ transform: translateY(0);
2724
+ opacity: 1;
2725
+ }
2740
2726
  }
2741
- .absolute {
2742
- position: absolute;
2727
+ @keyframes countdown-scale {
2728
+ 0% {
2729
+ transform: scale(0.5);
2730
+ opacity: 0;
2731
+ }
2732
+ 50% {
2733
+ transform: scale(1.2);
2734
+ opacity: 1;
2735
+ }
2736
+ 100% {
2737
+ transform: scale(1);
2738
+ opacity: 1;
2739
+ }
2743
2740
  }
2744
- .relative {
2745
- position: relative;
2741
+ .Trigger_trigger__dtqfb {
2742
+ -webkit-appearance: none;
2743
+ -moz-appearance: none;
2744
+ appearance: none;
2745
+ background: none;
2746
+ border: none;
2747
+ padding: 0;
2748
+ margin: 0;
2749
+ font: inherit;
2750
+ color: inherit;
2751
+ cursor: pointer;
2746
2752
  }
2747
- .inset-0 {
2748
- inset: 0px;
2753
+ .Trigger_trigger__dtqfb:disabled {
2754
+ cursor: not-allowed;
2749
2755
  }
2750
- .bottom-0 {
2751
- bottom: 0px;
2756
+ .Trigger_trigger__dtqfb {
2757
+ position: fixed;
2758
+ display: flex;
2759
+ align-items: center;
2760
+ justify-content: center;
2761
+ gap: 0.5rem;
2762
+ padding: 0.625rem 1rem;
2763
+ border-radius: 9999px;
2764
+ font-weight: 500;
2765
+ font-size: 0.875rem;
2766
+ line-height: 1.5;
2767
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
2768
+ background-color: #dc2626;
2769
+ color: white;
2770
+ transition-property: all;
2771
+ transition-duration: 200ms;
2772
+ transition-timing-function: ease-out;
2752
2773
  }
2753
- .bottom-4 {
2754
- bottom: 1rem;
2774
+ .Trigger_trigger__dtqfb:hover:not(:disabled) {
2775
+ background-color: #b91c1c;
2776
+ transform: scale(1.05);
2755
2777
  }
2756
- .left-0 {
2757
- left: 0px;
2778
+ .Trigger_trigger__dtqfb:active:not(:disabled) {
2779
+ background-color: #991b1b;
2780
+ transform: scale(0.95);
2758
2781
  }
2759
- .left-4 {
2760
- left: 1rem;
2782
+ .Trigger_trigger__dtqfb:focus {
2783
+ outline: none;
2784
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 0 0 2px white, 0 0 0 4px #ef4444;
2761
2785
  }
2762
- .right-0 {
2763
- right: 0px;
2786
+ .Trigger_trigger__dtqfb:disabled {
2787
+ opacity: 0.5;
2788
+ cursor: not-allowed;
2764
2789
  }
2765
- .right-4 {
2766
- right: 1rem;
2790
+ .Trigger_trigger__dtqfb:disabled:hover {
2791
+ background-color: #dc2626;
2792
+ transform: none;
2767
2793
  }
2768
- .top-4 {
2794
+
2795
+ .Trigger_topLeft__dtqfb {
2769
2796
  top: 1rem;
2797
+ left: 1rem;
2770
2798
  }
2771
- .mb-2 {
2772
- margin-bottom: 0.5rem;
2773
- }
2774
- .ml-2 {
2775
- margin-left: 0.5rem;
2776
- }
2777
- .mt-0\\.5 {
2778
- margin-top: 0.125rem;
2799
+
2800
+ .Trigger_topRight__dtqfb {
2801
+ top: 1rem;
2802
+ right: 1rem;
2779
2803
  }
2780
- .mt-1 {
2781
- margin-top: 0.25rem;
2804
+
2805
+ .Trigger_bottomLeft__dtqfb {
2806
+ bottom: 1rem;
2807
+ left: 1rem;
2782
2808
  }
2783
- .mt-4 {
2784
- margin-top: 1rem;
2809
+
2810
+ .Trigger_bottomRight__dtqfb {
2811
+ bottom: 1rem;
2812
+ right: 1rem;
2785
2813
  }
2786
- .mt-6 {
2787
- margin-top: 1.5rem;
2814
+
2815
+ .Trigger_icon__dtqfb {
2816
+ width: 1.25rem;
2817
+ height: 1.25rem;
2788
2818
  }
2789
- .mt-8 {
2790
- margin-top: 2rem;
2819
+
2820
+ /* components/Controls/Timer.module.scss */
2821
+ @keyframes pulse {
2822
+ 0%, 100% {
2823
+ opacity: 1;
2824
+ }
2825
+ 50% {
2826
+ opacity: 0.5;
2827
+ }
2791
2828
  }
2792
- .inline {
2793
- display: inline;
2829
+ @keyframes pulse-record {
2830
+ 0%, 100% {
2831
+ opacity: 1;
2832
+ }
2833
+ 50% {
2834
+ opacity: 0.5;
2835
+ }
2794
2836
  }
2795
- .flex {
2796
- display: flex;
2837
+ @keyframes spin {
2838
+ from {
2839
+ transform: rotate(0deg);
2840
+ }
2841
+ to {
2842
+ transform: rotate(360deg);
2843
+ }
2797
2844
  }
2798
- .inline-flex {
2799
- display: inline-flex;
2845
+ @keyframes fade-in {
2846
+ 0% {
2847
+ opacity: 0;
2848
+ }
2849
+ 100% {
2850
+ opacity: 1;
2851
+ }
2800
2852
  }
2801
- .aspect-video {
2802
- aspect-ratio: 16 / 9;
2853
+ @keyframes slide-up {
2854
+ 0% {
2855
+ transform: translateY(10px);
2856
+ opacity: 0;
2857
+ }
2858
+ 100% {
2859
+ transform: translateY(0);
2860
+ opacity: 1;
2861
+ }
2803
2862
  }
2804
- .h-1 {
2805
- height: 0.25rem;
2863
+ @keyframes countdown-scale {
2864
+ 0% {
2865
+ transform: scale(0.5);
2866
+ opacity: 0;
2867
+ }
2868
+ 50% {
2869
+ transform: scale(1.2);
2870
+ opacity: 1;
2871
+ }
2872
+ 100% {
2873
+ transform: scale(1);
2874
+ opacity: 1;
2875
+ }
2806
2876
  }
2807
- .h-2 {
2808
- height: 0.5rem;
2877
+ .Timer_timer__qru97 {
2878
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
2879
+ font-size: 0.875rem;
2880
+ line-height: 1.5;
2881
+ font-weight: 500;
2882
+ font-variant-numeric: tabular-nums;
2809
2883
  }
2810
- .h-3 {
2811
- height: 0.75rem;
2884
+
2885
+ .Timer_colorDefault__qru97 {
2886
+ color: #374151;
2812
2887
  }
2813
- .h-32 {
2814
- height: 8rem;
2888
+ .dark .Timer_colorDefault__qru97 {
2889
+ color: #d1d5db;
2815
2890
  }
2816
- .h-4 {
2817
- height: 1rem;
2891
+
2892
+ .Timer_colorPaused__qru97 {
2893
+ color: #d97706;
2818
2894
  }
2819
- .h-5 {
2820
- height: 1.25rem;
2895
+ .dark .Timer_colorPaused__qru97 {
2896
+ color: #fbbf24;
2821
2897
  }
2822
- .h-auto {
2823
- height: auto;
2898
+
2899
+ .Timer_colorWarning__qru97 {
2900
+ color: #d97706;
2824
2901
  }
2825
- .w-2 {
2826
- width: 0.5rem;
2902
+ .dark .Timer_colorWarning__qru97 {
2903
+ color: #fbbf24;
2827
2904
  }
2828
- .w-3 {
2829
- width: 0.75rem;
2905
+
2906
+ .Timer_colorCritical__qru97 {
2907
+ color: #dc2626;
2830
2908
  }
2831
- .w-32 {
2832
- width: 8rem;
2909
+ .dark .Timer_colorCritical__qru97 {
2910
+ color: #f87171;
2833
2911
  }
2834
- .w-4 {
2835
- width: 1rem;
2912
+
2913
+ .Timer_maxDuration__qru97 {
2914
+ color: #9ca3af;
2836
2915
  }
2837
- .w-5 {
2838
- width: 1.25rem;
2916
+ .dark .Timer_maxDuration__qru97 {
2917
+ color: #6b7280;
2839
2918
  }
2840
- .w-full {
2841
- width: 100%;
2919
+
2920
+ /* ScreenRecorder.module.scss */
2921
+ @keyframes pulse {
2922
+ 0%, 100% {
2923
+ opacity: 1;
2924
+ }
2925
+ 50% {
2926
+ opacity: 0.5;
2927
+ }
2842
2928
  }
2843
- .max-w-2xl {
2844
- max-width: 42rem;
2929
+ @keyframes pulse-record {
2930
+ 0%, 100% {
2931
+ opacity: 1;
2932
+ }
2933
+ 50% {
2934
+ opacity: 0.5;
2935
+ }
2845
2936
  }
2846
- .max-w-sm {
2847
- max-width: 24rem;
2937
+ @keyframes spin {
2938
+ from {
2939
+ transform: rotate(0deg);
2940
+ }
2941
+ to {
2942
+ transform: rotate(360deg);
2943
+ }
2848
2944
  }
2849
- .flex-1 {
2850
- flex: 1 1 0%;
2945
+ @keyframes fade-in {
2946
+ 0% {
2947
+ opacity: 0;
2948
+ }
2949
+ 100% {
2950
+ opacity: 1;
2951
+ }
2851
2952
  }
2852
- .flex-shrink-0 {
2853
- flex-shrink: 0;
2953
+ @keyframes slide-up {
2954
+ 0% {
2955
+ transform: translateY(10px);
2956
+ opacity: 0;
2957
+ }
2958
+ 100% {
2959
+ transform: translateY(0);
2960
+ opacity: 1;
2961
+ }
2854
2962
  }
2855
2963
  @keyframes countdown-scale {
2856
-
2857
2964
  0% {
2858
2965
  transform: scale(0.5);
2859
2966
  opacity: 0;
2860
2967
  }
2861
-
2862
2968
  50% {
2863
2969
  transform: scale(1.2);
2864
2970
  opacity: 1;
2865
2971
  }
2866
-
2867
2972
  100% {
2868
2973
  transform: scale(1);
2869
2974
  opacity: 1;
2870
2975
  }
2871
2976
  }
2872
- .animate-countdown-scale {
2873
- animation: countdown-scale 0.5s ease-out;
2977
+ .ScreenRecorder_spinner__l636w {
2978
+ animation: spin 1s linear infinite;
2979
+ width: 1rem;
2980
+ height: 1rem;
2874
2981
  }
2875
- @keyframes fade-in {
2876
2982
 
2877
- 0% {
2878
- opacity: 0;
2879
- }
2983
+ .ScreenRecorder_spinnerTrack__l636w {
2984
+ opacity: 0.25;
2985
+ }
2880
2986
 
2881
- 100% {
2882
- opacity: 1;
2883
- }
2987
+ .ScreenRecorder_spinnerHead__l636w {
2988
+ opacity: 0.75;
2989
+ }
2990
+
2991
+ .ScreenRecorder_requestingContent__l636w {
2992
+ display: flex;
2993
+ align-items: center;
2994
+ justify-content: center;
2995
+ gap: 0.5rem;
2884
2996
  }
2885
- .animate-fade-in {
2886
- animation: fade-in 0.2s ease-out;
2997
+
2998
+ .ScreenRecorder_opacityReduced__l636w {
2999
+ opacity: 0.75;
2887
3000
  }
2888
- @keyframes pulse {
2889
3001
 
3002
+ /* components/Preview/VideoPlayer.module.scss */
3003
+ @keyframes pulse {
3004
+ 0%, 100% {
3005
+ opacity: 1;
3006
+ }
2890
3007
  50% {
2891
- opacity: .5;
3008
+ opacity: 0.5;
2892
3009
  }
2893
3010
  }
2894
- .animate-pulse {
2895
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
2896
- }
2897
3011
  @keyframes pulse-record {
2898
-
2899
3012
  0%, 100% {
2900
3013
  opacity: 1;
2901
3014
  }
2902
-
2903
3015
  50% {
2904
3016
  opacity: 0.5;
2905
3017
  }
2906
3018
  }
2907
- .animate-pulse-record {
2908
- animation: pulse-record 1s ease-in-out infinite;
3019
+ @keyframes spin {
3020
+ from {
3021
+ transform: rotate(0deg);
3022
+ }
3023
+ to {
3024
+ transform: rotate(360deg);
3025
+ }
3026
+ }
3027
+ @keyframes fade-in {
3028
+ 0% {
3029
+ opacity: 0;
3030
+ }
3031
+ 100% {
3032
+ opacity: 1;
3033
+ }
2909
3034
  }
2910
3035
  @keyframes slide-up {
2911
-
2912
3036
  0% {
2913
3037
  transform: translateY(10px);
2914
3038
  opacity: 0;
2915
3039
  }
2916
-
2917
3040
  100% {
2918
3041
  transform: translateY(0);
2919
3042
  opacity: 1;
2920
3043
  }
2921
3044
  }
2922
- .animate-slide-up {
2923
- animation: slide-up 0.3s ease-out;
3045
+ @keyframes countdown-scale {
3046
+ 0% {
3047
+ transform: scale(0.5);
3048
+ opacity: 0;
3049
+ }
3050
+ 50% {
3051
+ transform: scale(1.2);
3052
+ opacity: 1;
3053
+ }
3054
+ 100% {
3055
+ transform: scale(1);
3056
+ opacity: 1;
3057
+ }
3058
+ }
3059
+ .VideoPlayer_container__4wok5 {
3060
+ position: relative;
3061
+ background-color: black;
3062
+ border-radius: 0.5rem;
3063
+ overflow: hidden;
2924
3064
  }
2925
- @keyframes spin {
2926
3065
 
2927
- to {
2928
- transform: rotate(360deg);
2929
- }
3066
+ .VideoPlayer_video__4wok5 {
3067
+ width: 100%;
3068
+ height: auto;
2930
3069
  }
2931
- .animate-spin {
2932
- animation: spin 1s linear infinite;
3070
+
3071
+ .VideoPlayer_controlsOverlay__4wok5 {
3072
+ position: absolute;
3073
+ bottom: 0;
3074
+ left: 0;
3075
+ right: 0;
3076
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
3077
+ padding: 0.75rem;
2933
3078
  }
2934
- .cursor-pointer {
2935
- cursor: pointer;
3079
+
3080
+ .VideoPlayer_progressWrapper__4wok5 {
3081
+ display: flex;
3082
+ align-items: center;
3083
+ justify-content: center;
3084
+ gap: 0.5rem;
3085
+ margin-bottom: 0.5rem;
2936
3086
  }
2937
- .appearance-none {
3087
+
3088
+ .VideoPlayer_progressSlider__4wok5 {
3089
+ flex: 1;
3090
+ height: 0.25rem;
3091
+ border-radius: 9999px;
2938
3092
  -webkit-appearance: none;
2939
3093
  -moz-appearance: none;
2940
3094
  appearance: none;
3095
+ cursor: pointer;
3096
+ background-color: rgba(255, 255, 255, 0.3);
2941
3097
  }
2942
- .flex-col {
2943
- flex-direction: column;
3098
+ .VideoPlayer_progressSlider__4wok5::-webkit-slider-thumb {
3099
+ -webkit-appearance: none;
3100
+ appearance: none;
3101
+ width: 0.75rem;
3102
+ height: 0.75rem;
3103
+ border-radius: 9999px;
3104
+ background-color: white;
2944
3105
  }
2945
- .items-start {
2946
- align-items: flex-start;
3106
+ .VideoPlayer_progressSlider__4wok5::-moz-range-thumb {
3107
+ width: 0.75rem;
3108
+ height: 0.75rem;
3109
+ border-radius: 9999px;
3110
+ background-color: white;
3111
+ border: none;
2947
3112
  }
2948
- .items-center {
3113
+
3114
+ .VideoPlayer_bottomControls__4wok5 {
3115
+ display: flex;
2949
3116
  align-items: center;
2950
- }
2951
- .justify-center {
2952
- justify-content: center;
2953
- }
2954
- .justify-between {
2955
3117
  justify-content: space-between;
2956
3118
  }
2957
- .gap-1 {
2958
- gap: 0.25rem;
2959
- }
2960
- .gap-1\\.5 {
2961
- gap: 0.375rem;
2962
- }
2963
- .gap-2 {
3119
+
3120
+ .VideoPlayer_leftControls__4wok5 {
3121
+ display: flex;
3122
+ align-items: center;
3123
+ justify-content: center;
2964
3124
  gap: 0.5rem;
2965
3125
  }
2966
- .gap-3 {
2967
- gap: 0.75rem;
3126
+
3127
+ .VideoPlayer_playButton__4wok5 {
3128
+ -webkit-appearance: none;
3129
+ -moz-appearance: none;
3130
+ appearance: none;
3131
+ background: none;
3132
+ border: none;
3133
+ padding: 0;
3134
+ margin: 0;
3135
+ font: inherit;
3136
+ color: inherit;
3137
+ cursor: pointer;
2968
3138
  }
2969
- .overflow-hidden {
2970
- overflow: hidden;
3139
+ .VideoPlayer_playButton__4wok5:disabled {
3140
+ cursor: not-allowed;
2971
3141
  }
2972
- .rounded-full {
3142
+ .VideoPlayer_playButton__4wok5 {
3143
+ padding: 0.375rem;
2973
3144
  border-radius: 9999px;
3145
+ transition-property: color, background-color, border-color;
3146
+ transition-duration: 200ms;
3147
+ transition-timing-function: ease-out;
2974
3148
  }
2975
- .rounded-lg {
2976
- border-radius: 0.5rem;
2977
- }
2978
- .rounded-md {
2979
- border-radius: 0.375rem;
2980
- }
2981
- .rounded-xl {
2982
- border-radius: 0.75rem;
2983
- }
2984
- .border {
2985
- border-width: 1px;
2986
- }
2987
- .border-4 {
2988
- border-width: 4px;
2989
- }
2990
- .border-b {
2991
- border-bottom-width: 1px;
2992
- }
2993
- .border-t {
2994
- border-top-width: 1px;
2995
- }
2996
- .border-gray-200 {
2997
- --tw-border-opacity: 1;
2998
- border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
2999
- }
3000
- .border-red-200 {
3001
- --tw-border-opacity: 1;
3002
- border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
3003
- }
3004
- .border-white\\/30 {
3005
- border-color: rgb(255 255 255 / 0.3);
3006
- }
3007
- .bg-amber-50 {
3008
- --tw-bg-opacity: 1;
3009
- background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
3010
- }
3011
- .bg-amber-500 {
3012
- --tw-bg-opacity: 1;
3013
- background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
3014
- }
3015
- .bg-black {
3016
- --tw-bg-opacity: 1;
3017
- background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
3018
- }
3019
- .bg-black\\/50 {
3020
- background-color: rgb(0 0 0 / 0.5);
3021
- }
3022
- .bg-black\\/60 {
3023
- background-color: rgb(0 0 0 / 0.6);
3024
- }
3025
- .bg-blue-50 {
3026
- --tw-bg-opacity: 1;
3027
- background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
3028
- }
3029
- .bg-blue-500 {
3030
- --tw-bg-opacity: 1;
3031
- background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
3032
- }
3033
- .bg-blue-600 {
3034
- --tw-bg-opacity: 1;
3035
- background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
3036
- }
3037
- .bg-gray-100 {
3038
- --tw-bg-opacity: 1;
3039
- background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
3040
- }
3041
- .bg-gray-400 {
3042
- --tw-bg-opacity: 1;
3043
- background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
3044
- }
3045
- .bg-gray-50 {
3046
- --tw-bg-opacity: 1;
3047
- background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
3048
- }
3049
- .bg-gray-500 {
3050
- --tw-bg-opacity: 1;
3051
- background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
3052
- }
3053
- .bg-green-600 {
3054
- --tw-bg-opacity: 1;
3055
- background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
3056
- }
3057
- .bg-red-100 {
3058
- --tw-bg-opacity: 1;
3059
- background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
3060
- }
3061
- .bg-red-50 {
3062
- --tw-bg-opacity: 1;
3063
- background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
3064
- }
3065
- .bg-red-500 {
3066
- --tw-bg-opacity: 1;
3067
- background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
3068
- }
3069
- .bg-red-600 {
3070
- --tw-bg-opacity: 1;
3071
- background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
3072
- }
3073
- .bg-white {
3074
- --tw-bg-opacity: 1;
3075
- background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
3076
- }
3077
- .bg-white\\/10 {
3078
- background-color: rgb(255 255 255 / 0.1);
3079
- }
3080
- .bg-white\\/30 {
3081
- background-color: rgb(255 255 255 / 0.3);
3082
- }
3083
- .bg-gradient-to-t {
3084
- background-image: linear-gradient(to top, var(--tw-gradient-stops));
3085
- }
3086
- .from-black\\/80 {
3087
- --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
3088
- --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
3089
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
3090
- }
3091
- .to-transparent {
3092
- --tw-gradient-to: transparent var(--tw-gradient-to-position);
3149
+ .VideoPlayer_playButton__4wok5:hover {
3150
+ background-color: rgba(255, 255, 255, 0.2);
3093
3151
  }
3094
- .p-1 {
3095
- padding: 0.25rem;
3152
+ .VideoPlayer_playButton__4wok5:focus {
3153
+ outline: none;
3154
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
3096
3155
  }
3097
- .p-1\\.5 {
3098
- padding: 0.375rem;
3156
+
3157
+ .VideoPlayer_playIcon__4wok5 {
3158
+ width: 1rem;
3159
+ height: 1rem;
3160
+ color: white;
3099
3161
  }
3100
- .p-2 {
3101
- padding: 0.5rem;
3162
+
3163
+ .VideoPlayer_timeDisplay__4wok5 {
3164
+ color: rgba(255, 255, 255, 0.8);
3165
+ font-size: 0.75rem;
3166
+ line-height: 1.5;
3167
+ font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
3168
+ font-variant-numeric: tabular-nums;
3102
3169
  }
3103
- .p-3 {
3104
- padding: 0.75rem;
3170
+
3171
+ /* components/Controls/RecordingControls.module.scss */
3172
+ @keyframes pulse {
3173
+ 0%, 100% {
3174
+ opacity: 1;
3175
+ }
3176
+ 50% {
3177
+ opacity: 0.5;
3178
+ }
3105
3179
  }
3106
- .p-4 {
3107
- padding: 1rem;
3180
+ @keyframes pulse-record {
3181
+ 0%, 100% {
3182
+ opacity: 1;
3183
+ }
3184
+ 50% {
3185
+ opacity: 0.5;
3186
+ }
3108
3187
  }
3109
- .p-6 {
3110
- padding: 1.5rem;
3188
+ @keyframes spin {
3189
+ from {
3190
+ transform: rotate(0deg);
3191
+ }
3192
+ to {
3193
+ transform: rotate(360deg);
3194
+ }
3111
3195
  }
3112
- .px-2 {
3113
- padding-left: 0.5rem;
3114
- padding-right: 0.5rem;
3196
+ @keyframes fade-in {
3197
+ 0% {
3198
+ opacity: 0;
3199
+ }
3200
+ 100% {
3201
+ opacity: 1;
3202
+ }
3115
3203
  }
3116
- .px-4 {
3117
- padding-left: 1rem;
3118
- padding-right: 1rem;
3204
+ @keyframes slide-up {
3205
+ 0% {
3206
+ transform: translateY(10px);
3207
+ opacity: 0;
3208
+ }
3209
+ 100% {
3210
+ transform: translateY(0);
3211
+ opacity: 1;
3212
+ }
3119
3213
  }
3120
- .px-6 {
3121
- padding-left: 1.5rem;
3122
- padding-right: 1.5rem;
3214
+ @keyframes countdown-scale {
3215
+ 0% {
3216
+ transform: scale(0.5);
3217
+ opacity: 0;
3218
+ }
3219
+ 50% {
3220
+ transform: scale(1.2);
3221
+ opacity: 1;
3222
+ }
3223
+ 100% {
3224
+ transform: scale(1);
3225
+ opacity: 1;
3226
+ }
3123
3227
  }
3124
- .py-1 {
3125
- padding-top: 0.25rem;
3126
- padding-bottom: 0.25rem;
3228
+ .RecordingControls_controls__aqrrv {
3229
+ position: fixed;
3230
+ display: flex;
3231
+ align-items: center;
3232
+ justify-content: center;
3233
+ gap: 0.75rem;
3234
+ padding: 0.625rem 1rem;
3235
+ border-radius: 9999px;
3236
+ background-color: white;
3237
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
3238
+ border: 1px solid #e5e7eb;
3239
+ animation: slide-up 300ms ease-out;
3127
3240
  }
3128
- .py-2 {
3129
- padding-top: 0.5rem;
3130
- padding-bottom: 0.5rem;
3241
+ .dark .RecordingControls_controls__aqrrv {
3242
+ background-color: #1f2937;
3243
+ border-color: #374151;
3131
3244
  }
3132
- .py-2\\.5 {
3133
- padding-top: 0.625rem;
3134
- padding-bottom: 0.625rem;
3245
+
3246
+ .RecordingControls_topLeft__aqrrv {
3247
+ top: 1rem;
3248
+ left: 1rem;
3135
3249
  }
3136
- .py-4 {
3137
- padding-top: 1rem;
3138
- padding-bottom: 1rem;
3250
+
3251
+ .RecordingControls_topRight__aqrrv {
3252
+ top: 1rem;
3253
+ right: 1rem;
3139
3254
  }
3140
- .text-center {
3141
- text-align: center;
3255
+
3256
+ .RecordingControls_bottomLeft__aqrrv {
3257
+ bottom: 1rem;
3258
+ left: 1rem;
3142
3259
  }
3143
- .font-mono {
3144
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
3260
+
3261
+ .RecordingControls_bottomRight__aqrrv {
3262
+ bottom: 1rem;
3263
+ right: 1rem;
3145
3264
  }
3146
- .text-7xl {
3147
- font-size: 4.5rem;
3148
- line-height: 1;
3265
+
3266
+ .RecordingControls_statusSection__aqrrv {
3267
+ display: flex;
3268
+ align-items: center;
3269
+ justify-content: center;
3270
+ gap: 0.5rem;
3149
3271
  }
3150
- .text-lg {
3151
- font-size: 1.125rem;
3152
- line-height: 1.75rem;
3272
+
3273
+ .RecordingControls_statusIndicator__aqrrv {
3274
+ display: flex;
3275
+ align-items: center;
3276
+ justify-content: center;
3277
+ gap: 0.375rem;
3153
3278
  }
3154
- .text-sm {
3155
- font-size: 0.875rem;
3156
- line-height: 1.25rem;
3279
+
3280
+ .RecordingControls_statusRecording__aqrrv {
3281
+ color: #ef4444;
3157
3282
  }
3158
- .text-xs {
3159
- font-size: 0.75rem;
3160
- line-height: 1rem;
3283
+
3284
+ .RecordingControls_statusPaused__aqrrv {
3285
+ color: #f59e0b;
3161
3286
  }
3162
- .font-bold {
3163
- font-weight: 700;
3287
+
3288
+ .RecordingControls_recordingIcon__aqrrv {
3289
+ width: 0.75rem;
3290
+ height: 0.75rem;
3291
+ animation: pulse-record 1s ease-in-out infinite;
3164
3292
  }
3165
- .font-medium {
3166
- font-weight: 500;
3293
+
3294
+ .RecordingControls_pauseIconSmall__aqrrv {
3295
+ width: 0.75rem;
3296
+ height: 0.75rem;
3167
3297
  }
3168
- .font-semibold {
3298
+
3299
+ .RecordingControls_statusLabel__aqrrv {
3300
+ font-size: 0.75rem;
3301
+ line-height: 1.5;
3169
3302
  font-weight: 600;
3170
- }
3171
- .uppercase {
3172
3303
  text-transform: uppercase;
3173
3304
  }
3174
- .tabular-nums {
3175
- --tw-numeric-spacing: tabular-nums;
3176
- font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
3305
+
3306
+ .RecordingControls_buttonGroup__aqrrv {
3307
+ display: flex;
3308
+ align-items: center;
3309
+ justify-content: center;
3310
+ gap: 0.25rem;
3311
+ margin-left: 0.5rem;
3177
3312
  }
3178
- .text-amber-500 {
3179
- --tw-text-opacity: 1;
3180
- color: rgb(245 158 11 / var(--tw-text-opacity, 1));
3313
+
3314
+ .RecordingControls_controlButton__aqrrv {
3315
+ -webkit-appearance: none;
3316
+ -moz-appearance: none;
3317
+ appearance: none;
3318
+ background: none;
3319
+ border: none;
3320
+ padding: 0;
3321
+ margin: 0;
3322
+ font: inherit;
3323
+ color: inherit;
3324
+ cursor: pointer;
3181
3325
  }
3182
- .text-amber-600 {
3183
- --tw-text-opacity: 1;
3184
- color: rgb(217 119 6 / var(--tw-text-opacity, 1));
3326
+ .RecordingControls_controlButton__aqrrv:disabled {
3327
+ cursor: not-allowed;
3185
3328
  }
3186
- .text-blue-600 {
3187
- --tw-text-opacity: 1;
3188
- color: rgb(37 99 235 / var(--tw-text-opacity, 1));
3329
+ .RecordingControls_controlButton__aqrrv {
3330
+ padding: 0.5rem;
3331
+ border-radius: 9999px;
3332
+ transition-property: color, background-color, border-color;
3333
+ transition-duration: 200ms;
3334
+ transition-timing-function: ease-out;
3189
3335
  }
3190
- .text-gray-400 {
3191
- --tw-text-opacity: 1;
3192
- color: rgb(156 163 175 / var(--tw-text-opacity, 1));
3336
+ .RecordingControls_controlButton__aqrrv:hover:not(:disabled) {
3337
+ background-color: #f3f4f6;
3193
3338
  }
3194
- .text-gray-500 {
3195
- --tw-text-opacity: 1;
3196
- color: rgb(107 114 128 / var(--tw-text-opacity, 1));
3339
+ .RecordingControls_controlButton__aqrrv:focus {
3340
+ outline: none;
3341
+ box-shadow: 0 0 0 2px white, 0 0 0 4px #3b82f6;
3197
3342
  }
3198
- .text-gray-600 {
3199
- --tw-text-opacity: 1;
3200
- color: rgb(75 85 99 / var(--tw-text-opacity, 1));
3343
+ .dark .RecordingControls_controlButton__aqrrv:hover:not(:disabled) {
3344
+ background-color: #374151;
3201
3345
  }
3202
- .text-gray-700 {
3203
- --tw-text-opacity: 1;
3204
- color: rgb(55 65 81 / var(--tw-text-opacity, 1));
3346
+
3347
+ .RecordingControls_stopButton__aqrrv {
3348
+ -webkit-appearance: none;
3349
+ -moz-appearance: none;
3350
+ appearance: none;
3351
+ background: none;
3352
+ border: none;
3353
+ padding: 0;
3354
+ margin: 0;
3355
+ font: inherit;
3356
+ color: inherit;
3357
+ cursor: pointer;
3205
3358
  }
3206
- .text-gray-900 {
3207
- --tw-text-opacity: 1;
3208
- color: rgb(17 24 39 / var(--tw-text-opacity, 1));
3359
+ .RecordingControls_stopButton__aqrrv:disabled {
3360
+ cursor: not-allowed;
3209
3361
  }
3210
- .text-red-500 {
3211
- --tw-text-opacity: 1;
3212
- color: rgb(239 68 68 / var(--tw-text-opacity, 1));
3362
+ .RecordingControls_stopButton__aqrrv {
3363
+ padding: 0.5rem;
3364
+ border-radius: 9999px;
3365
+ transition-property: color, background-color, border-color;
3366
+ transition-duration: 200ms;
3367
+ transition-timing-function: ease-out;
3213
3368
  }
3214
- .text-red-600 {
3215
- --tw-text-opacity: 1;
3216
- color: rgb(220 38 38 / var(--tw-text-opacity, 1));
3369
+ .RecordingControls_stopButton__aqrrv:hover:not(:disabled) {
3370
+ background-color: #fee2e2;
3217
3371
  }
3218
- .text-red-700 {
3219
- --tw-text-opacity: 1;
3220
- color: rgb(185 28 28 / var(--tw-text-opacity, 1));
3372
+ .RecordingControls_stopButton__aqrrv:focus {
3373
+ outline: none;
3374
+ box-shadow: 0 0 0 2px white, 0 0 0 4px #ef4444;
3221
3375
  }
3222
- .text-red-800 {
3223
- --tw-text-opacity: 1;
3224
- color: rgb(153 27 27 / var(--tw-text-opacity, 1));
3376
+ .dark .RecordingControls_stopButton__aqrrv:hover:not(:disabled) {
3377
+ background-color: rgba(127, 29, 29, 0.3);
3225
3378
  }
3226
- .text-white {
3227
- --tw-text-opacity: 1;
3228
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
3379
+
3380
+ .RecordingControls_buttonIcon__aqrrv {
3381
+ width: 1rem;
3382
+ height: 1rem;
3383
+ color: #4b5563;
3229
3384
  }
3230
- .text-white\\/80 {
3231
- color: rgb(255 255 255 / 0.8);
3385
+ .dark .RecordingControls_buttonIcon__aqrrv {
3386
+ color: #d1d5db;
3232
3387
  }
3233
- .opacity-25 {
3234
- opacity: 0.25;
3388
+
3389
+ .RecordingControls_stopIcon__aqrrv {
3390
+ width: 1rem;
3391
+ height: 1rem;
3392
+ color: #dc2626;
3235
3393
  }
3236
- .opacity-75 {
3237
- opacity: 0.75;
3394
+ .dark .RecordingControls_stopIcon__aqrrv {
3395
+ color: #f87171;
3238
3396
  }
3239
- .shadow-2xl {
3240
- --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
3241
- --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
3242
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3397
+
3398
+ /* components/Preview/PreviewModal.module.scss */
3399
+ @keyframes pulse {
3400
+ 0%, 100% {
3401
+ opacity: 1;
3402
+ }
3403
+ 50% {
3404
+ opacity: 0.5;
3405
+ }
3243
3406
  }
3244
- .shadow-lg {
3245
- --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
3246
- --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
3247
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3407
+ @keyframes pulse-record {
3408
+ 0%, 100% {
3409
+ opacity: 1;
3410
+ }
3411
+ 50% {
3412
+ opacity: 0.5;
3413
+ }
3248
3414
  }
3249
- .filter {
3250
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
3415
+ @keyframes spin {
3416
+ from {
3417
+ transform: rotate(0deg);
3418
+ }
3419
+ to {
3420
+ transform: rotate(360deg);
3421
+ }
3251
3422
  }
3252
- .backdrop-blur-sm {
3253
- --tw-backdrop-blur: blur(4px);
3254
- backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
3423
+ @keyframes fade-in {
3424
+ 0% {
3425
+ opacity: 0;
3426
+ }
3427
+ 100% {
3428
+ opacity: 1;
3429
+ }
3255
3430
  }
3256
- .transition {
3257
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
3258
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3259
- transition-duration: 150ms;
3431
+ @keyframes slide-up {
3432
+ 0% {
3433
+ transform: translateY(10px);
3434
+ opacity: 0;
3435
+ }
3436
+ 100% {
3437
+ transform: translateY(0);
3438
+ opacity: 1;
3439
+ }
3260
3440
  }
3261
- .transition-all {
3262
- transition-property: all;
3263
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3264
- transition-duration: 150ms;
3441
+ @keyframes countdown-scale {
3442
+ 0% {
3443
+ transform: scale(0.5);
3444
+ opacity: 0;
3445
+ }
3446
+ 50% {
3447
+ transform: scale(1.2);
3448
+ opacity: 1;
3449
+ }
3450
+ 100% {
3451
+ transform: scale(1);
3452
+ opacity: 1;
3453
+ }
3265
3454
  }
3266
- .transition-colors {
3267
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
3268
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
3269
- transition-duration: 150ms;
3455
+ .PreviewModal_overlay__va989 {
3456
+ position: fixed;
3457
+ top: 0;
3458
+ right: 0;
3459
+ bottom: 0;
3460
+ left: 0;
3461
+ display: flex;
3462
+ align-items: center;
3463
+ justify-content: center;
3464
+ padding: 1rem;
3465
+ background-color: rgba(0, 0, 0, 0.6);
3466
+ backdrop-filter: blur(4px);
3467
+ -webkit-backdrop-filter: blur(4px);
3468
+ animation: fade-in 200ms ease-out;
3270
3469
  }
3271
- .duration-150 {
3272
- transition-duration: 150ms;
3470
+
3471
+ .PreviewModal_modal__va989 {
3472
+ position: relative;
3473
+ width: 100%;
3474
+ max-width: 42rem;
3475
+ background-color: white;
3476
+ border-radius: 0.75rem;
3477
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
3478
+ animation: slide-up 300ms ease-out;
3273
3479
  }
3274
- .duration-200 {
3275
- transition-duration: 200ms;
3480
+ .PreviewModal_modal__va989:focus {
3481
+ outline: none;
3276
3482
  }
3277
- .ease-out {
3278
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
3483
+ .dark .PreviewModal_modal__va989 {
3484
+ background-color: #1f2937;
3279
3485
  }
3280
- .hover\\:scale-105:hover {
3281
- --tw-scale-x: 1.05;
3282
- --tw-scale-y: 1.05;
3283
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3486
+
3487
+ .PreviewModal_header__va989 {
3488
+ display: flex;
3489
+ align-items: center;
3490
+ justify-content: space-between;
3491
+ padding: 1rem 1.5rem;
3492
+ border-bottom: 1px solid #e5e7eb;
3284
3493
  }
3285
- .hover\\:bg-blue-700:hover {
3286
- --tw-bg-opacity: 1;
3287
- background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
3494
+ .dark .PreviewModal_header__va989 {
3495
+ border-color: #374151;
3288
3496
  }
3289
- .hover\\:bg-gray-100:hover {
3290
- --tw-bg-opacity: 1;
3291
- background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
3497
+
3498
+ .PreviewModal_title__va989 {
3499
+ font-size: 1.125rem;
3500
+ line-height: 1.25;
3501
+ font-weight: 600;
3502
+ color: #111827;
3292
3503
  }
3293
- .hover\\:bg-gray-200:hover {
3294
- --tw-bg-opacity: 1;
3295
- background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
3504
+ .dark .PreviewModal_title__va989 {
3505
+ color: white;
3296
3506
  }
3297
- .hover\\:bg-green-700:hover {
3298
- --tw-bg-opacity: 1;
3299
- background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
3507
+
3508
+ .PreviewModal_closeButton__va989 {
3509
+ -webkit-appearance: none;
3510
+ -moz-appearance: none;
3511
+ appearance: none;
3512
+ background: none;
3513
+ border: none;
3514
+ padding: 0;
3515
+ margin: 0;
3516
+ font: inherit;
3517
+ color: inherit;
3518
+ cursor: pointer;
3300
3519
  }
3301
- .hover\\:bg-red-100:hover {
3302
- --tw-bg-opacity: 1;
3303
- background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
3520
+ .PreviewModal_closeButton__va989:disabled {
3521
+ cursor: not-allowed;
3304
3522
  }
3305
- .hover\\:bg-red-200:hover {
3306
- --tw-bg-opacity: 1;
3307
- background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
3523
+ .PreviewModal_closeButton__va989 {
3524
+ padding: 0.5rem;
3525
+ border-radius: 9999px;
3526
+ transition-property: color, background-color, border-color;
3527
+ transition-duration: 200ms;
3528
+ transition-timing-function: ease-out;
3308
3529
  }
3309
- .hover\\:bg-red-700:hover {
3310
- --tw-bg-opacity: 1;
3311
- background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
3530
+ .PreviewModal_closeButton__va989:hover {
3531
+ background-color: #f3f4f6;
3312
3532
  }
3313
- .hover\\:bg-white\\/20:hover {
3314
- background-color: rgb(255 255 255 / 0.2);
3533
+ .PreviewModal_closeButton__va989:focus {
3534
+ outline: none;
3535
+ box-shadow: 0 0 0 2px #3b82f6;
3315
3536
  }
3316
- .focus\\:outline-none:focus {
3317
- outline: 2px solid transparent;
3318
- outline-offset: 2px;
3537
+ .dark .PreviewModal_closeButton__va989:hover {
3538
+ background-color: #374151;
3319
3539
  }
3320
- .focus\\:ring-2:focus {
3321
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3322
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3323
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
3540
+
3541
+ .PreviewModal_closeIcon__va989 {
3542
+ width: 1.25rem;
3543
+ height: 1.25rem;
3544
+ color: #6b7280;
3324
3545
  }
3325
- .focus\\:ring-blue-500:focus {
3326
- --tw-ring-opacity: 1;
3327
- --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
3546
+ .dark .PreviewModal_closeIcon__va989 {
3547
+ color: #9ca3af;
3328
3548
  }
3329
- .focus\\:ring-gray-500:focus {
3330
- --tw-ring-opacity: 1;
3331
- --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity, 1));
3549
+
3550
+ .PreviewModal_content__va989 {
3551
+ padding: 1.5rem;
3332
3552
  }
3333
- .focus\\:ring-green-500:focus {
3334
- --tw-ring-opacity: 1;
3335
- --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1));
3553
+
3554
+ .PreviewModal_videoWrapper__va989 {
3555
+ width: 100%;
3556
+ aspect-ratio: 16/9;
3336
3557
  }
3337
- .focus\\:ring-red-500:focus {
3338
- --tw-ring-opacity: 1;
3339
- --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
3558
+
3559
+ .PreviewModal_recordingInfo__va989 {
3560
+ margin-top: 1rem;
3561
+ font-size: 0.875rem;
3562
+ line-height: 1.5;
3563
+ color: #6b7280;
3564
+ text-align: center;
3340
3565
  }
3341
- .focus\\:ring-white\\/50:focus {
3342
- --tw-ring-color: rgb(255 255 255 / 0.5);
3566
+ .dark .PreviewModal_recordingInfo__va989 {
3567
+ color: #9ca3af;
3343
3568
  }
3344
- .focus\\:ring-offset-2:focus {
3345
- --tw-ring-offset-width: 2px;
3569
+
3570
+ .PreviewModal_actions__va989 {
3571
+ display: flex;
3572
+ align-items: center;
3573
+ justify-content: center;
3574
+ gap: 0.75rem;
3575
+ padding: 1rem 1.5rem;
3576
+ border-top: 1px solid #e5e7eb;
3346
3577
  }
3347
- .active\\:scale-95:active {
3348
- --tw-scale-x: .95;
3349
- --tw-scale-y: .95;
3350
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3578
+ .dark .PreviewModal_actions__va989 {
3579
+ border-color: #374151;
3351
3580
  }
3352
- .active\\:bg-red-800:active {
3353
- --tw-bg-opacity: 1;
3354
- background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
3581
+
3582
+ .PreviewModal_actionButton__va989, .PreviewModal_doneButton__va989, .PreviewModal_reRecordButton__va989, .PreviewModal_downloadButton__va989 {
3583
+ -webkit-appearance: none;
3584
+ -moz-appearance: none;
3585
+ appearance: none;
3586
+ background: none;
3587
+ border: none;
3588
+ padding: 0;
3589
+ margin: 0;
3590
+ font: inherit;
3591
+ color: inherit;
3592
+ cursor: pointer;
3355
3593
  }
3356
- .disabled\\:cursor-not-allowed:disabled {
3594
+ .PreviewModal_actionButton__va989:disabled, .PreviewModal_doneButton__va989:disabled, .PreviewModal_reRecordButton__va989:disabled, .PreviewModal_downloadButton__va989:disabled {
3357
3595
  cursor: not-allowed;
3358
3596
  }
3359
- .disabled\\:opacity-50:disabled {
3360
- opacity: 0.5;
3361
- }
3362
- .disabled\\:hover\\:bg-red-600:hover:disabled {
3363
- --tw-bg-opacity: 1;
3364
- background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
3365
- }
3366
- .dark\\:border-gray-700:is(.dark *) {
3367
- --tw-border-opacity: 1;
3368
- border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
3369
- }
3370
- .dark\\:border-red-800:is(.dark *) {
3371
- --tw-border-opacity: 1;
3372
- border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
3373
- }
3374
- .dark\\:bg-amber-900\\/20:is(.dark *) {
3375
- background-color: rgb(120 53 15 / 0.2);
3376
- }
3377
- .dark\\:bg-blue-900\\/20:is(.dark *) {
3378
- background-color: rgb(30 58 138 / 0.2);
3379
- }
3380
- .dark\\:bg-gray-700:is(.dark *) {
3381
- --tw-bg-opacity: 1;
3382
- background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
3383
- }
3384
- .dark\\:bg-gray-800:is(.dark *) {
3385
- --tw-bg-opacity: 1;
3386
- background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
3387
- }
3388
- .dark\\:bg-red-800\\/50:is(.dark *) {
3389
- background-color: rgb(153 27 27 / 0.5);
3390
- }
3391
- .dark\\:bg-red-900\\/20:is(.dark *) {
3392
- background-color: rgb(127 29 29 / 0.2);
3393
- }
3394
- .dark\\:bg-red-900\\/30:is(.dark *) {
3395
- background-color: rgb(127 29 29 / 0.3);
3396
- }
3397
- .dark\\:text-amber-400:is(.dark *) {
3398
- --tw-text-opacity: 1;
3399
- color: rgb(251 191 36 / var(--tw-text-opacity, 1));
3400
- }
3401
- .dark\\:text-blue-400:is(.dark *) {
3402
- --tw-text-opacity: 1;
3403
- color: rgb(96 165 250 / var(--tw-text-opacity, 1));
3404
- }
3405
- .dark\\:text-gray-300:is(.dark *) {
3406
- --tw-text-opacity: 1;
3407
- color: rgb(209 213 219 / var(--tw-text-opacity, 1));
3597
+ .PreviewModal_actionButton__va989, .PreviewModal_doneButton__va989, .PreviewModal_reRecordButton__va989, .PreviewModal_downloadButton__va989 {
3598
+ display: flex;
3599
+ align-items: center;
3600
+ justify-content: center;
3601
+ gap: 0.5rem;
3602
+ padding: 0.5rem 1rem;
3603
+ border-radius: 0.5rem;
3604
+ font-weight: 500;
3605
+ font-size: 0.875rem;
3606
+ line-height: 1.5;
3607
+ transition-property: all;
3608
+ transition-duration: 200ms;
3609
+ transition-timing-function: ease-out;
3408
3610
  }
3409
- .dark\\:text-gray-400:is(.dark *) {
3410
- --tw-text-opacity: 1;
3411
- color: rgb(156 163 175 / var(--tw-text-opacity, 1));
3611
+ .PreviewModal_actionButton__va989:disabled, .PreviewModal_doneButton__va989:disabled, .PreviewModal_reRecordButton__va989:disabled, .PreviewModal_downloadButton__va989:disabled {
3612
+ opacity: 0.5;
3613
+ pointer-events: none;
3412
3614
  }
3413
- .dark\\:text-gray-500:is(.dark *) {
3414
- --tw-text-opacity: 1;
3415
- color: rgb(107 114 128 / var(--tw-text-opacity, 1));
3615
+ .PreviewModal_actionButton__va989, .PreviewModal_doneButton__va989, .PreviewModal_reRecordButton__va989, .PreviewModal_downloadButton__va989 {
3616
+ gap: 0.5rem;
3416
3617
  }
3417
- .dark\\:text-red-200:is(.dark *) {
3418
- --tw-text-opacity: 1;
3419
- color: rgb(254 202 202 / var(--tw-text-opacity, 1));
3618
+
3619
+ .PreviewModal_downloadButton__va989 {
3620
+ background-color: #2563eb;
3621
+ color: white;
3420
3622
  }
3421
- .dark\\:text-red-300:is(.dark *) {
3422
- --tw-text-opacity: 1;
3423
- color: rgb(252 165 165 / var(--tw-text-opacity, 1));
3623
+ .PreviewModal_downloadButton__va989:hover:not(:disabled) {
3624
+ background-color: #1d4ed8;
3424
3625
  }
3425
- .dark\\:text-red-400:is(.dark *) {
3426
- --tw-text-opacity: 1;
3427
- color: rgb(248 113 113 / var(--tw-text-opacity, 1));
3626
+ .PreviewModal_downloadButton__va989:focus {
3627
+ outline: none;
3628
+ box-shadow: 0 0 0 2px white, 0 0 0 4px #3b82f6;
3428
3629
  }
3429
- .dark\\:text-white:is(.dark *) {
3430
- --tw-text-opacity: 1;
3431
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
3630
+ .dark .PreviewModal_downloadButton__va989:focus {
3631
+ box-shadow: 0 0 0 2px #1f2937, 0 0 0 4px #3b82f6;
3432
3632
  }
3433
- .dark\\:hover\\:bg-gray-600:hover:is(.dark *) {
3434
- --tw-bg-opacity: 1;
3435
- background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
3633
+
3634
+ .PreviewModal_reRecordButton__va989 {
3635
+ background-color: #f3f4f6;
3636
+ color: #374151;
3436
3637
  }
3437
- .dark\\:hover\\:bg-gray-700:hover:is(.dark *) {
3438
- --tw-bg-opacity: 1;
3439
- background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
3638
+ .PreviewModal_reRecordButton__va989:hover:not(:disabled) {
3639
+ background-color: #e5e7eb;
3440
3640
  }
3441
- .dark\\:hover\\:bg-red-800:hover:is(.dark *) {
3442
- --tw-bg-opacity: 1;
3443
- background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1));
3641
+ .PreviewModal_reRecordButton__va989:focus {
3642
+ outline: none;
3643
+ box-shadow: 0 0 0 2px white, 0 0 0 4px #6b7280;
3444
3644
  }
3445
- .dark\\:hover\\:bg-red-800\\/50:hover:is(.dark *) {
3446
- background-color: rgb(153 27 27 / 0.5);
3645
+ .dark .PreviewModal_reRecordButton__va989 {
3646
+ background-color: #374151;
3647
+ color: #d1d5db;
3447
3648
  }
3448
- .dark\\:hover\\:bg-red-900\\/30:hover:is(.dark *) {
3449
- background-color: rgb(127 29 29 / 0.3);
3649
+ .dark .PreviewModal_reRecordButton__va989:hover:not(:disabled) {
3650
+ background-color: #4b5563;
3450
3651
  }
3451
- .dark\\:focus\\:ring-offset-gray-800:focus:is(.dark *) {
3452
- --tw-ring-offset-color: #1f2937;
3652
+ .dark .PreviewModal_reRecordButton__va989:focus {
3653
+ box-shadow: 0 0 0 2px #1f2937, 0 0 0 4px #6b7280;
3453
3654
  }
3454
- .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-3::-webkit-slider-thumb {
3455
- height: 0.75rem;
3655
+
3656
+ .PreviewModal_doneButton__va989 {
3657
+ background-color: #16a34a;
3658
+ color: white;
3456
3659
  }
3457
- .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-3::-webkit-slider-thumb {
3458
- width: 0.75rem;
3660
+ .PreviewModal_doneButton__va989:hover:not(:disabled) {
3661
+ background-color: #15803d;
3459
3662
  }
3460
- .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none::-webkit-slider-thumb {
3461
- -webkit-appearance: none;
3462
- appearance: none;
3663
+ .PreviewModal_doneButton__va989:focus {
3664
+ outline: none;
3665
+ box-shadow: 0 0 0 2px white, 0 0 0 4px #22c55e;
3463
3666
  }
3464
- .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full::-webkit-slider-thumb {
3465
- border-radius: 9999px;
3667
+ .dark .PreviewModal_doneButton__va989:focus {
3668
+ box-shadow: 0 0 0 2px #1f2937, 0 0 0 4px #22c55e;
3466
3669
  }
3467
- .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white::-webkit-slider-thumb {
3468
- --tw-bg-opacity: 1;
3469
- background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
3670
+
3671
+ .PreviewModal_buttonIcon__va989 {
3672
+ width: 1rem;
3673
+ height: 1rem;
3470
3674
  }
3675
+
3471
3676
  `;
3472
3677
  document.head.appendChild(style);
3473
3678
  })();