dmed-voice-assistant 1.1.6 → 1.1.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/dist/components/RecognitionListItem.js +51 -40
  2. package/dist/components/RecordListItem.js +159 -133
  3. package/dist/components/svgs.js +203 -167
  4. package/dist/index.js +22 -17
  5. package/dist/recognition.js +768 -531
  6. package/dist/recorder.js +389 -313
  7. package/package.json +1 -1
package/dist/recognition.js CHANGED
@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
8
8
  var _material = require("@mui/material");
9
9
  var _svgs = require("./components/svgs");
10
10
  var _RecognitionListItem = _interopRequireDefault(require("./components/RecognitionListItem"));
11
+ var _jsxRuntime = require("react/jsx-runtime");
11
12
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
13
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
13
14
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -202,544 +203,780 @@ const Recognition = _ref4 => {
202
203
  startSpeechRecognition();
203
204
  fetchAudioInputDevices();
204
205
  }, []);
205
- return /*#__PURE__*/_react.default.createElement(_material.Box, {
206
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
206
207
  className: "bg-white rounded-[5px] p-[20px] w-[440px]",
207
208
  sx: {
208
209
  border: '1px solid #D8DEE4'
209
- }
210
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
211
- className: "flex justify-between"
212
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
213
- className: "flex items-center space-x-2"
214
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
215
- className: "!font-[600] !text-[24px]",
216
- color: "#494A48"
217
- }, "Voice assistant"), /*#__PURE__*/_react.default.createElement(_material.Box, {
218
- className: "flex items-center space-x-1 px-[10px] py-[3px] h-[24px] bg-[#006FFF4D] rounded-[89.1px] cursor-pointer",
219
- sx: {
220
- border: '0.9px solid #006FFFB2'
221
- },
222
- onClick: handleModeChange
223
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.RecognitionIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
224
- className: "!font-[600] !text-[12px]",
225
- color: "#494A48"
226
- }, "Recognition mode"))), /*#__PURE__*/_react.default.createElement(_material.Box, {
227
- className: "px-[10px] py-[8px] cursor-pointer"
228
- }, /*#__PURE__*/_react.default.createElement(_svgs.CloseIcon, null))), /*#__PURE__*/_react.default.createElement(_material.Box, {
229
- className: "flex items-center justify-between py-[4.5px] mt-1"
230
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
231
- className: "flex space-x-1"
232
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.RocketIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
233
- className: "!font-400 !text-[14px]",
234
- color: "#494A48"
235
- }, "Real-time")), /*#__PURE__*/_react.default.createElement(_material.Box, {
236
- className: "flex space-x-1"
237
- }, !isStarted ? /*#__PURE__*/_react.default.createElement(_material.Box, {
238
- className: "flex items-center space-x-1 cursor-pointer rounded-[5px] px-[9px] h-[32.4px] bg-white",
239
- sx: {
240
- '&:hover': {
241
- boxShadow: '0px 0px 5px 1px #44C63380',
242
- cursor: isSteup && 'not-allowed'
243
- }
244
210
  },
245
- onClick: handleStartChange
246
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.StartIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
247
- className: "!font-400 !text-[14px]",
248
- color: "#494A48"
249
- }, "Start")) : /*#__PURE__*/_react.default.createElement(_material.Box, {
250
- className: "flex items-center justify-between space-x-4 cursor-pointer rounded-[5px] px-[9px] h-[32.4px] bg-white",
251
- sx: {
252
- border: "0.9px solid #F3151580",
253
- '&:hover': {
254
- boxShadow: '0px 0px 5px 1px #F3151580'
255
- }
256
- },
257
- onClick: handleStartChange
258
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
259
- className: "flex items-center space-x-1"
260
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.SmallPauseIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
261
- className: "!font-400 !text-[14px]",
262
- color: "#494A48"
263
- }, "Stop")), /*#__PURE__*/_react.default.createElement(_material.Box, {
264
- className: "flex items-baseline"
265
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
266
- className: "!font-[600] !text-[20px]",
267
- color: "#494847",
268
- sx: {
269
- fontFamily: "Afacad !important"
270
- }
271
- }, recordTime), /*#__PURE__*/_react.default.createElement(_material.Typography, {
272
- className: "!font-400 !text-[16px]",
273
- color: "#797974",
274
- sx: {
275
- fontFamily: "Afacad !important"
276
- }
277
- }, "s"))), /*#__PURE__*/_react.default.createElement(_material.Box, {
278
- className: "flex items-center space-x-1 cursor-pointer rounded-[5px] px-[9px] h-[32.4px] bg-white",
279
- sx: {
280
- '&:hover': {
281
- boxShadow: !isStarted ? '0px 0px 5px 1px #494A4880' : 'none',
282
- cursor: isStarted && "not-allowed"
283
- }
284
- },
285
- onClick: handleSetupChange
286
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.DarkSettingIcon, {
287
- fill: isStarted ? "#494A484D" : "#494A48"
288
- })), /*#__PURE__*/_react.default.createElement(_material.Typography, {
289
- className: "!font-400 !text-[14px]",
290
- color: isStarted ? "#494A484D" : "#494A48"
291
- }, "Setup")))), !isSteup ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
292
- className: "rounded-[5px] mt-1",
293
- sx: {
294
- border: '1px solid #D8DEE4'
295
- }
296
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
297
- className: "flex items-center justify-between p-[4.5px]"
298
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
299
- className: "px-[4.5px] py-[4px] !font-400 !text-[12px]",
300
- color: "#494A48"
301
- }, !isStarted ? '-' : result.length, " words"), /*#__PURE__*/_react.default.createElement(_material.Box, {
302
- className: "flex items-center space-x-1 px-[9px]"
303
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, !isStarted ? /*#__PURE__*/_react.default.createElement(_svgs.StopIcon, null) : /*#__PURE__*/_react.default.createElement(_svgs.RedStopIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
304
- className: "!font-[600] !text-[14px]",
305
- color: "#494A48"
306
- }, !isStarted ? 'Stop' : 'REC'))), isStarted && /*#__PURE__*/_react.default.createElement(_material.Box, {
307
- className: "flex items-center flex-wrap space-x-1 mt-1 p-[9px]",
308
- sx: {
309
- maxWidth: "387px",
310
- overflow: "hidden"
311
- }
312
- }, result.map((item, index) => {
313
- return /*#__PURE__*/_react.default.createElement(_material.Box, {
314
- className: "flex items-center",
315
- key: index
316
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
317
- className: "!font-400 !text-[16px]",
318
- color: "#494A48",
319
- sx: {
320
- fontFamily: "Space Grotesk !important"
321
- }
322
- }, item), index !== result.length - 1 && /*#__PURE__*/_react.default.createElement(_material.Typography, {
323
- className: "!font-400 !text-[16px]",
324
- color: "#494A4880",
325
- sx: {
326
- fontFamily: "Fira Sans !important"
327
- }
328
- }, ","));
329
- }))), /*#__PURE__*/_react.default.createElement(_material.Box, {
330
- className: "mt-1"
331
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
332
- className: "flex items-center justify-between py-[4.5px]"
333
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
334
- className: "flex space-x-1"
335
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.HistoryIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
336
- className: "!font-400 !text-[14px]",
337
- color: "#494A48"
338
- }, "History")), /*#__PURE__*/_react.default.createElement(_material.Button, {
339
- disabled: isStarted,
340
- color: "#494A48",
341
- sx: {
342
- border: '0.9px solid #D8DEE4',
343
- fontSize: '14px !important',
344
- fontWeight: '400 !important',
345
- fontFamily: 'Reddit Sans !important',
346
- height: '32px !important',
347
- textTransform: "none"
348
- },
349
- onClick: handlePopoverOpen
350
- }, "02.July.2024")), /*#__PURE__*/_react.default.createElement(_material.Box, {
351
- className: "flex flex-col scrollableBox mt-1",
352
- sx: {
353
- maxHeight: "160px"
354
- }
355
- }, historyList.map((history, index) => {
356
- return /*#__PURE__*/_react.default.createElement(_RecognitionListItem.default, {
357
- data: history,
358
- key: index
359
- });
360
- })), /*#__PURE__*/_react.default.createElement(_material.Box, {
361
- className: "flex items-center justify-between rounded-[5px] bg-[#FBF3DE80] px-[5px] py-[8px] mt-1 cursor-pointer",
362
- sx: {
363
- border: '1px solid #FFB90080'
364
- },
365
- onClick: handleClickOpen
366
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
367
- className: "flex items-center space-x-1"
368
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.BookIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
369
- className: "!font-[600] !text-[14px]",
370
- color: "#494A48"
371
- }, "Voice command instructions")), /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.RedirectIcon, null))))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Divider, null), /*#__PURE__*/_react.default.createElement(_material.Box, {
372
- className: "flex space-x-1 w-full mt-2"
373
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.MicIcon, {
374
- fill: "#494A48"
375
- })), /*#__PURE__*/_react.default.createElement(_material.Box, {
376
- className: "flex-1"
377
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
378
- className: "!font-[600] !text-[16px]",
379
- color: "#494A48"
380
- }, "Voice"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
381
- className: "!font-400 !text-[14px] pt-1",
382
- color: "#494A48"
383
- }, "Input device"), /*#__PURE__*/_react.default.createElement(StyledSelect, {
384
- className: "mt-1",
385
- fullWidth: true,
386
- displayEmpty: true,
387
- value: selectedVoice,
388
- onChange: handleVoiceChange,
389
- renderValue: selected => {
390
- if (selected === "") {
391
- return /*#__PURE__*/_react.default.createElement("span", {
392
- style: {
393
- fontSize: '12.6px',
394
- fontWeight: '400',
395
- lineHeight: '25.2px',
396
- color: '#494A4899'
397
- }
398
- }, "Auto-Detect");
399
- }
400
- return /*#__PURE__*/_react.default.createElement("span", {
401
- style: {
402
- fontSize: '12.6px',
403
- fontWeight: '400',
404
- lineHeight: '25.2px',
405
- color: '#494A4899'
406
- }
407
- }, voiceList[selected]);
408
- },
409
- MenuProps: {
410
- PaperProps: {
411
- sx: {
412
- marginTop: "5px",
413
- border: '0.9px solid #D8DEE4',
414
- padding: '5px',
415
- '& .MuiList-root': {
416
- padding: "unset"
211
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
212
+ className: "flex justify-between",
213
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
214
+ className: "flex items-center space-x-2",
215
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
216
+ className: "!font-[600] !text-[24px]",
217
+ color: "#494A48",
218
+ children: "Voice assistant"
219
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
220
+ className: "flex items-center space-x-1 px-[10px] py-[3px] h-[24px] bg-[#006FFF4D] rounded-[89.1px] cursor-pointer",
221
+ sx: {
222
+ border: '0.9px solid #006FFFB2'
417
223
  },
418
- '& .MuiMenuItem-root': {
419
- padding: "7.2px 9px",
420
- color: '#494A4899',
421
- fontFamily: 'Reddit Sans',
422
- fontSize: '12.6px',
423
- fontWeight: '400',
424
- lineHeight: '25.2px'
425
- }
426
- }
427
- }
428
- }
429
- }, voiceList.map((device, index) => {
430
- return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
431
- value: index,
432
- key: index
433
- }, device);
434
- })))), /*#__PURE__*/_react.default.createElement(_material.Box, {
435
- className: "flex space-x-1 w-full mt-2"
436
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.LanguageIcon, {
437
- fill: "#494A48"
438
- })), /*#__PURE__*/_react.default.createElement(_material.Box, {
439
- className: "flex-1"
440
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
441
- className: "!font-[600] !text-[16px]",
442
- color: "#494A48"
443
- }, "Language"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
444
- className: "!font-400 !text-[14px] pt-1",
445
- color: "#494A48"
446
- }, "Prefer language"), /*#__PURE__*/_react.default.createElement(StyledSelect, {
447
- className: "mt-1",
448
- fullWidth: true,
449
- displayEmpty: true,
450
- value: selectedLanguage,
451
- onChange: handleLanguageChange,
452
- renderValue: selected => {
453
- if (selected === "") {
454
- return /*#__PURE__*/_react.default.createElement("span", {
455
- style: {
456
- fontSize: '12.6px',
457
- fontWeight: '400',
458
- lineHeight: '25.2px',
459
- color: '#494A4899'
460
- }
461
- }, "Auto-Detect");
462
- }
463
- return /*#__PURE__*/_react.default.createElement("span", {
464
- style: {
465
- fontSize: '12.6px',
466
- fontWeight: '400',
467
- lineHeight: '25.2px',
468
- color: '#494A4899'
469
- }
470
- }, languageList[selected]);
471
- },
472
- MenuProps: {
473
- PaperProps: {
224
+ onClick: handleModeChange,
225
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
226
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.RecognitionIcon, {})
227
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
228
+ className: "!font-[600] !text-[12px]",
229
+ color: "#494A48",
230
+ children: "Recognition mode"
231
+ })]
232
+ })]
233
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
234
+ className: "px-[10px] py-[8px] cursor-pointer",
235
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.CloseIcon, {})
236
+ })]
237
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
238
+ className: "flex items-center justify-between py-[4.5px] mt-1",
239
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
240
+ className: "flex space-x-1",
241
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
242
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.RocketIcon, {})
243
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
244
+ className: "!font-400 !text-[14px]",
245
+ color: "#494A48",
246
+ children: "Real-time"
247
+ })]
248
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
249
+ className: "flex space-x-1",
250
+ children: [!isStarted ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
251
+ className: "flex items-center space-x-1 cursor-pointer rounded-[5px] px-[9px] h-[32.4px] bg-white",
252
+ sx: {
253
+ '&:hover': {
254
+ boxShadow: '0px 0px 5px 1px #44C63380',
255
+ cursor: isSteup && 'not-allowed'
256
+ }
257
+ },
258
+ onClick: handleStartChange,
259
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
260
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.StartIcon, {})
261
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
262
+ className: "!font-400 !text-[14px]",
263
+ color: "#494A48",
264
+ children: "Start"
265
+ })]
266
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
267
+ className: "flex items-center justify-between space-x-4 cursor-pointer rounded-[5px] px-[9px] h-[32.4px] bg-white",
268
+ sx: {
269
+ border: "0.9px solid #F3151580",
270
+ '&:hover': {
271
+ boxShadow: '0px 0px 5px 1px #F3151580'
272
+ }
273
+ },
274
+ onClick: handleStartChange,
275
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
276
+ className: "flex items-center space-x-1",
277
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
278
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.SmallPauseIcon, {})
279
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
280
+ className: "!font-400 !text-[14px]",
281
+ color: "#494A48",
282
+ children: "Stop"
283
+ })]
284
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
285
+ className: "flex items-baseline",
286
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
287
+ className: "!font-[600] !text-[20px]",
288
+ color: "#494847",
289
+ sx: {
290
+ fontFamily: "Afacad !important"
291
+ },
292
+ children: recordTime
293
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
294
+ className: "!font-400 !text-[16px]",
295
+ color: "#797974",
296
+ sx: {
297
+ fontFamily: "Afacad !important"
298
+ },
299
+ children: "s"
300
+ })]
301
+ })]
302
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
303
+ className: "flex items-center space-x-1 cursor-pointer rounded-[5px] px-[9px] h-[32.4px] bg-white",
304
+ sx: {
305
+ '&:hover': {
306
+ boxShadow: !isStarted ? '0px 0px 5px 1px #494A4880' : 'none',
307
+ cursor: isStarted && "not-allowed"
308
+ }
309
+ },
310
+ onClick: handleSetupChange,
311
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
312
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.DarkSettingIcon, {
313
+ fill: isStarted ? "#494A484D" : "#494A48"
314
+ })
315
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
316
+ className: "!font-400 !text-[14px]",
317
+ color: isStarted ? "#494A484D" : "#494A48",
318
+ children: "Setup"
319
+ })]
320
+ })]
321
+ })]
322
+ }), !isSteup ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
323
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
324
+ className: "rounded-[5px] mt-1",
474
325
  sx: {
475
- marginTop: "5px",
476
- border: '0.9px solid #D8DEE4',
477
- padding: '5px',
478
- '& .MuiList-root': {
479
- padding: "unset"
326
+ border: '1px solid #D8DEE4'
327
+ },
328
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
329
+ className: "flex items-center justify-between p-[4.5px]",
330
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
331
+ className: "px-[4.5px] py-[4px] !font-400 !text-[12px]",
332
+ color: "#494A48",
333
+ children: [!isStarted ? '-' : result.length, " words"]
334
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
335
+ className: "flex items-center space-x-1 px-[9px]",
336
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
337
+ children: !isStarted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.StopIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.RedStopIcon, {})
338
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
339
+ className: "!font-[600] !text-[14px]",
340
+ color: "#494A48",
341
+ children: !isStarted ? 'Stop' : 'REC'
342
+ })]
343
+ })]
344
+ }), isStarted && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
345
+ className: "flex items-center flex-wrap space-x-1 mt-1 p-[9px]",
346
+ sx: {
347
+ maxWidth: "387px",
348
+ overflow: "hidden"
480
349
  },
481
- '& .MuiMenuItem-root': {
482
- padding: "7.2px 9px",
483
- color: '#494A4899',
484
- fontFamily: 'Reddit Sans',
485
- fontSize: '12.6px',
486
- fontWeight: '400',
487
- lineHeight: '25.2px'
488
- }
350
+ children: result.map((item, index) => {
351
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
352
+ className: "flex items-center",
353
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
354
+ className: "!font-400 !text-[16px]",
355
+ color: "#494A48",
356
+ sx: {
357
+ fontFamily: "Space Grotesk !important"
358
+ },
359
+ children: item
360
+ }), index !== result.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
361
+ className: "!font-400 !text-[16px]",
362
+ color: "#494A4880",
363
+ sx: {
364
+ fontFamily: "Fira Sans !important"
365
+ },
366
+ children: ","
367
+ })]
368
+ }, index);
369
+ })
370
+ })]
371
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
372
+ className: "mt-1",
373
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
374
+ className: "flex items-center justify-between py-[4.5px]",
375
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
376
+ className: "flex space-x-1",
377
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
378
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.HistoryIcon, {})
379
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
380
+ className: "!font-400 !text-[14px]",
381
+ color: "#494A48",
382
+ children: "History"
383
+ })]
384
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
385
+ disabled: isStarted,
386
+ color: "#494A48",
387
+ sx: {
388
+ border: '0.9px solid #D8DEE4',
389
+ fontSize: '14px !important',
390
+ fontWeight: '400 !important',
391
+ fontFamily: 'Reddit Sans !important',
392
+ height: '32px !important',
393
+ textTransform: "none"
394
+ },
395
+ onClick: handlePopoverOpen,
396
+ children: "02.July.2024"
397
+ })]
398
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
399
+ className: "flex flex-col scrollableBox mt-1",
400
+ sx: {
401
+ maxHeight: "160px"
402
+ },
403
+ children: historyList.map((history, index) => {
404
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RecognitionListItem.default, {
405
+ data: history
406
+ }, index);
407
+ })
408
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
409
+ className: "flex items-center justify-between rounded-[5px] bg-[#FBF3DE80] px-[5px] py-[8px] mt-1 cursor-pointer",
410
+ sx: {
411
+ border: '1px solid #FFB90080'
412
+ },
413
+ onClick: handleClickOpen,
414
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
415
+ className: "flex items-center space-x-1",
416
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
417
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.BookIcon, {})
418
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
419
+ className: "!font-[600] !text-[14px]",
420
+ color: "#494A48",
421
+ children: "Voice command instructions"
422
+ })]
423
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
424
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.RedirectIcon, {})
425
+ })]
426
+ })]
427
+ })]
428
+ }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
429
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
430
+ className: "flex space-x-1 w-full mt-2",
431
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
432
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.MicIcon, {
433
+ fill: "#494A48"
434
+ })
435
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
436
+ className: "flex-1",
437
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
438
+ className: "!font-[600] !text-[16px]",
439
+ color: "#494A48",
440
+ children: "Voice"
441
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
442
+ className: "!font-400 !text-[14px] pt-1",
443
+ color: "#494A48",
444
+ children: "Input device"
445
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSelect, {
446
+ className: "mt-1",
447
+ fullWidth: true,
448
+ displayEmpty: true,
449
+ value: selectedVoice,
450
+ onChange: handleVoiceChange,
451
+ renderValue: selected => {
452
+ if (selected === "") {
453
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
454
+ style: {
455
+ fontSize: '12.6px',
456
+ fontWeight: '400',
457
+ lineHeight: '25.2px',
458
+ color: '#494A4899'
459
+ },
460
+ children: "Auto-Detect"
461
+ });
462
+ }
463
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
464
+ style: {
465
+ fontSize: '12.6px',
466
+ fontWeight: '400',
467
+ lineHeight: '25.2px',
468
+ color: '#494A4899'
469
+ },
470
+ children: voiceList[selected]
471
+ });
472
+ },
473
+ MenuProps: {
474
+ PaperProps: {
475
+ sx: {
476
+ marginTop: "5px",
477
+ border: '0.9px solid #D8DEE4',
478
+ padding: '5px',
479
+ '& .MuiList-root': {
480
+ padding: "unset"
481
+ },
482
+ '& .MuiMenuItem-root': {
483
+ padding: "7.2px 9px",
484
+ color: '#494A4899',
485
+ fontFamily: 'Reddit Sans',
486
+ fontSize: '12.6px',
487
+ fontWeight: '400',
488
+ lineHeight: '25.2px'
489
+ }
490
+ }
491
+ }
492
+ },
493
+ children: voiceList.map((device, index) => {
494
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
495
+ value: index,
496
+ children: device
497
+ }, index);
498
+ })
499
+ })]
500
+ })]
501
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
502
+ className: "flex space-x-1 w-full mt-2",
503
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
504
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.LanguageIcon, {
505
+ fill: "#494A48"
506
+ })
507
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
508
+ className: "flex-1",
509
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
510
+ className: "!font-[600] !text-[16px]",
511
+ color: "#494A48",
512
+ children: "Language"
513
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
514
+ className: "!font-400 !text-[14px] pt-1",
515
+ color: "#494A48",
516
+ children: "Prefer language"
517
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSelect, {
518
+ className: "mt-1",
519
+ fullWidth: true,
520
+ displayEmpty: true,
521
+ value: selectedLanguage,
522
+ onChange: handleLanguageChange,
523
+ renderValue: selected => {
524
+ if (selected === "") {
525
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
526
+ style: {
527
+ fontSize: '12.6px',
528
+ fontWeight: '400',
529
+ lineHeight: '25.2px',
530
+ color: '#494A4899'
531
+ },
532
+ children: "Auto-Detect"
533
+ });
534
+ }
535
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
536
+ style: {
537
+ fontSize: '12.6px',
538
+ fontWeight: '400',
539
+ lineHeight: '25.2px',
540
+ color: '#494A4899'
541
+ },
542
+ children: languageList[selected]
543
+ });
544
+ },
545
+ MenuProps: {
546
+ PaperProps: {
547
+ sx: {
548
+ marginTop: "5px",
549
+ border: '0.9px solid #D8DEE4',
550
+ padding: '5px',
551
+ '& .MuiList-root': {
552
+ padding: "unset"
553
+ },
554
+ '& .MuiMenuItem-root': {
555
+ padding: "7.2px 9px",
556
+ color: '#494A4899',
557
+ fontFamily: 'Reddit Sans',
558
+ fontSize: '12.6px',
559
+ fontWeight: '400',
560
+ lineHeight: '25.2px'
561
+ }
562
+ }
563
+ }
564
+ },
565
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
566
+ value: 0,
567
+ children: "Auto-Detect"
568
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
569
+ value: 1,
570
+ children: "English"
571
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
572
+ value: 2,
573
+ children: "Chinese (Simplified)"
574
+ })]
575
+ })]
576
+ })]
577
+ })]
578
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledDialog, {
579
+ onClose: handleClose,
580
+ "aria-labelledby": "customized-dialog-title",
581
+ open: open,
582
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
583
+ className: "flex items-center justify-between py-[8px]",
584
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
585
+ className: "flex items-center space-x-1",
586
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
587
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.BookIcon, {})
588
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
589
+ className: "!font-[600] !text-[14px]",
590
+ color: "#494A48",
591
+ children: "Voice command instructions"
592
+ })]
593
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
594
+ className: "cursor-pointer",
595
+ onClick: handleClose,
596
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.SmallCloseIcon, {})
597
+ })]
598
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
599
+ className: "py-[8px]",
600
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
601
+ className: "!font-[600] !text-[12px]",
602
+ color: "#494A48",
603
+ children: "Tooth position (FDI)"
604
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
605
+ className: "flex items-center py-[5px]",
606
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
607
+ children: "Upper"
608
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
609
+ className: "!font-400 !text-[12px]",
610
+ color: "#494A48",
611
+ children: "/"
612
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
613
+ children: "Lower"
614
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
615
+ className: "!font-400 !text-[14px]",
616
+ color: "#494A48",
617
+ children: "+"
618
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
619
+ children: "Left"
620
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
621
+ className: "!font-400 !text-[12px]",
622
+ color: "#494A48",
623
+ children: "/"
624
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
625
+ children: "Right"
626
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
627
+ className: "!font-400 !text-[14px]",
628
+ color: "#494A48",
629
+ children: "+"
630
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
631
+ children: "number"
632
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
633
+ className: "!font-400 !text-[12px] pl-2",
634
+ color: "#494A48",
635
+ children: "Tooth position (FDI)"
636
+ })]
637
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
638
+ className: "flex items-center pt-[5px]",
639
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
640
+ children: "Jump"
641
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
642
+ className: "!font-400 !text-[14px]",
643
+ color: "#494A48",
644
+ children: "+"
645
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
646
+ children: "number"
647
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
648
+ className: "!font-400 !text-[12px] pl-2",
649
+ color: "#494A48",
650
+ children: "Jump to tooth(FDI)"
651
+ })]
652
+ })]
653
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
654
+ className: "pb-[8px]",
655
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
656
+ className: "!font-[600] !text-[12px]",
657
+ color: "#494A48",
658
+ children: "Terminology"
659
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
660
+ className: "flex items-center space-x-5 py-[5px]",
661
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
662
+ className: "flex items-center space-x-2",
663
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
664
+ children: "Mobility"
665
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
666
+ className: "!font-400 !text-[12px]",
667
+ color: "#494A48",
668
+ children: "Mobility"
669
+ })]
670
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
671
+ className: "flex items-center space-x-2",
672
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
673
+ children: "Furcation"
674
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
675
+ className: "!font-400 !text-[12px]",
676
+ color: "#494A48",
677
+ children: "Furcation"
678
+ })]
679
+ })]
680
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
681
+ className: "flex items-center space-x-5 py-[5px]",
682
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
683
+ className: "flex items-center space-x-2",
684
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
685
+ children: "Bleeding"
686
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
687
+ className: "!font-400 !text-[12px]",
688
+ color: "#494A48",
689
+ children: "Bleeding of point"
690
+ })]
691
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
692
+ className: "flex items-center space-x-2",
693
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
694
+ children: "Plaque"
695
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
696
+ className: "!font-400 !text-[12px]",
697
+ color: "#494A48",
698
+ children: "Plaque of point"
699
+ })]
700
+ })]
701
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
702
+ className: "flex items-center space-x-5 py-[5px]",
703
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
704
+ className: "flex items-center space-x-2",
705
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
706
+ children: "Buccal"
707
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
708
+ className: "!font-400 !text-[12px]",
709
+ color: "#494A48",
710
+ children: "Buccal"
711
+ })]
712
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
713
+ className: "flex items-center space-x-2",
714
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
715
+ children: "Lingual"
716
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
717
+ className: "!font-400 !text-[12px]",
718
+ color: "#494A48",
719
+ children: "Lingual"
720
+ })]
721
+ })]
722
+ })]
723
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
724
+ className: "pb-[8px]",
725
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
726
+ className: "!font-[600] !text-[12px]",
727
+ color: "#494A48",
728
+ children: "Scenario 1"
729
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
730
+ className: "!font-[600] !text-[12px] px-[10px] pt-[5px]",
731
+ color: "#494A48",
732
+ children: "Measure the full mouth pocket depth, then bleeding and plaque"
733
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
734
+ className: "flex items-center space-x-2 px-[10px] py-[5px]",
735
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
736
+ className: "flex items-center space-x-1",
737
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
738
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.CommandIcon, {})
739
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
740
+ className: "!font-400 !text-[12px]",
741
+ color: "#494A48",
742
+ children: "Command:"
743
+ })]
744
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
745
+ className: "flex items-center",
746
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
747
+ children: "One"
748
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
749
+ className: "!font-400 !text-[14px]",
750
+ color: "#494A48",
751
+ children: "+"
752
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
753
+ children: "Bleeding"
754
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
755
+ className: "!font-400 !text-[14px]",
756
+ color: "#494A48",
757
+ children: "+"
758
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
759
+ children: "Plaque"
760
+ })]
761
+ })]
762
+ })]
763
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
764
+ className: "pb-[8px]",
765
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
766
+ className: "!font-[600] !text-[12px]",
767
+ color: "#494A48",
768
+ children: "Scenario 2"
769
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
770
+ className: "!font-[600] !text-[12px] px-[10px] pt-[5px]",
771
+ color: "#494A48",
772
+ children: "Jump to specific tooth position and check implant, crown, missing"
773
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
774
+ className: "flex items-center space-x-2 px-[10px] py-[5px]",
775
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
776
+ className: "flex items-center space-x-1",
777
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
778
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.CommandIcon, {})
779
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
780
+ className: "!font-400 !text-[12px]",
781
+ color: "#494A48",
782
+ children: "Command:"
783
+ })]
784
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
785
+ className: "flex items-center",
786
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
787
+ children: "Jump"
788
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
789
+ className: "!font-400 !text-[14px]",
790
+ color: "#494A48",
791
+ children: "+"
792
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
793
+ children: "Twenty-four"
794
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
795
+ className: "!font-400 !text-[14px]",
796
+ color: "#494A48",
797
+ children: "+"
798
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
799
+ children: "Implant"
800
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
801
+ className: "!font-400 !text-[12px]",
802
+ color: "#494A48",
803
+ children: "/"
804
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
805
+ children: "Crown"
806
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
807
+ className: "!font-400 !text-[12px]",
808
+ color: "#494A48",
809
+ children: "/"
810
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
811
+ children: "Missing"
812
+ })]
813
+ })]
814
+ })]
815
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
816
+ className: "pb-[8px]",
817
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
818
+ className: "!font-[600] !text-[12px]",
819
+ color: "#494A48",
820
+ children: "Scenario 3"
821
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
822
+ className: "!font-[600] !text-[12px] px-[10px] pt-[5px]",
823
+ color: "#494A48",
824
+ children: "Jump to specific tooth position and check buccal bleeding"
825
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
826
+ className: "flex items-center space-x-2 px-[10px] py-[5px]",
827
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
828
+ className: "flex items-center space-x-1",
829
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
830
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.CommandIcon, {})
831
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
832
+ className: "!font-400 !text-[12px]",
833
+ color: "#494A48",
834
+ children: "Command:"
835
+ })]
836
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
837
+ className: "flex items-center",
838
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
839
+ children: "Jump"
840
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
841
+ className: "!font-400 !text-[14px]",
842
+ color: "#494A48",
843
+ children: "+"
844
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
845
+ children: "Seventeen"
846
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
847
+ className: "!font-400 !text-[14px]",
848
+ color: "#494A48",
849
+ children: "+"
850
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
851
+ children: "Buccal"
852
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
853
+ className: "!font-400 !text-[14px]",
854
+ color: "#494A48",
855
+ children: "+"
856
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
857
+ children: "Bleeding"
858
+ })]
859
+ })]
860
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
861
+ className: "!font-[600] !text-[12px] px-[10px] pt-[5px]",
862
+ color: "#494A48",
863
+ children: "Jump to specific tooth position and check mobility II"
864
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
865
+ className: "flex items-center space-x-2 px-[10px] py-[5px]",
866
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
867
+ className: "flex items-center space-x-1",
868
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
869
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_svgs.CommandIcon, {})
870
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
871
+ className: "!font-400 !text-[12px]",
872
+ color: "#494A48",
873
+ children: "Command:"
874
+ })]
875
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
876
+ className: "flex items-center",
877
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
878
+ children: "Jump"
879
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
880
+ className: "!font-400 !text-[14px]",
881
+ color: "#494A48",
882
+ children: "+"
883
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
884
+ children: "Thirty-three"
885
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
886
+ className: "!font-400 !text-[14px]",
887
+ color: "#494A48",
888
+ children: "+"
889
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
890
+ children: "Lingual"
891
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
892
+ className: "!font-400 !text-[14px]",
893
+ color: "#494A48",
894
+ children: "+"
895
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
896
+ children: "Mobility"
897
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
898
+ className: "!font-400 !text-[14px]",
899
+ color: "#494A48",
900
+ children: "+"
901
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTypography, {
902
+ children: "Two"
903
+ })]
904
+ })]
905
+ })]
906
+ })]
907
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popover, {
908
+ open: openAnchorEl,
909
+ anchorEl: anchorEl,
910
+ onClose: handlePopoverClose,
911
+ anchorOrigin: {
912
+ vertical: 'bottom',
913
+ horizontal: 'right'
914
+ },
915
+ transformOrigin: {
916
+ vertical: 'top',
917
+ horizontal: 'right'
918
+ },
919
+ sx: {
920
+ '& .MuiPaper-root': {
921
+ boxShadow: 'none',
922
+ border: '1px solid #D8DEE4',
923
+ borderRadius: '5px',
924
+ marginTop: '5px'
489
925
  }
490
- }
491
- }
492
- }, /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
493
- value: 0
494
- }, "Auto-Detect"), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
495
- value: 1
496
- }, "English"), /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
497
- value: 2
498
- }, "Chinese (Simplified)"))))), /*#__PURE__*/_react.default.createElement(StyledDialog, {
499
- onClose: handleClose,
500
- "aria-labelledby": "customized-dialog-title",
501
- open: open
502
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
503
- className: "flex items-center justify-between py-[8px]"
504
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
505
- className: "flex items-center space-x-1"
506
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.BookIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
507
- className: "!font-[600] !text-[14px]",
508
- color: "#494A48"
509
- }, "Voice command instructions")), /*#__PURE__*/_react.default.createElement(_material.Box, {
510
- className: "cursor-pointer",
511
- onClick: handleClose
512
- }, /*#__PURE__*/_react.default.createElement(_svgs.SmallCloseIcon, null))), /*#__PURE__*/_react.default.createElement(_material.Box, {
513
- className: "py-[8px]"
514
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
515
- className: "!font-[600] !text-[12px]",
516
- color: "#494A48"
517
- }, "Tooth position (FDI)"), /*#__PURE__*/_react.default.createElement(_material.Box, {
518
- className: "flex items-center py-[5px]"
519
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Upper"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
520
- className: "!font-400 !text-[12px]",
521
- color: "#494A48"
522
- }, "/"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Lower"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
523
- className: "!font-400 !text-[14px]",
524
- color: "#494A48"
525
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Left"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
526
- className: "!font-400 !text-[12px]",
527
- color: "#494A48"
528
- }, "/"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Right"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
529
- className: "!font-400 !text-[14px]",
530
- color: "#494A48"
531
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "number"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
532
- className: "!font-400 !text-[12px] pl-2",
533
- color: "#494A48"
534
- }, "Tooth position (FDI)")), /*#__PURE__*/_react.default.createElement(_material.Box, {
535
- className: "flex items-center pt-[5px]"
536
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Jump"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
537
- className: "!font-400 !text-[14px]",
538
- color: "#494A48"
539
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "number"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
540
- className: "!font-400 !text-[12px] pl-2",
541
- color: "#494A48"
542
- }, "Jump to tooth(FDI)"))), /*#__PURE__*/_react.default.createElement(_material.Box, {
543
- className: "pb-[8px]"
544
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
545
- className: "!font-[600] !text-[12px]",
546
- color: "#494A48"
547
- }, "Terminology"), /*#__PURE__*/_react.default.createElement(_material.Box, {
548
- className: "flex items-center space-x-5 py-[5px]"
549
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
550
- className: "flex items-center space-x-2"
551
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Mobility"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
552
- className: "!font-400 !text-[12px]",
553
- color: "#494A48"
554
- }, "Mobility")), /*#__PURE__*/_react.default.createElement(_material.Box, {
555
- className: "flex items-center space-x-2"
556
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Furcation"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
557
- className: "!font-400 !text-[12px]",
558
- color: "#494A48"
559
- }, "Furcation"))), /*#__PURE__*/_react.default.createElement(_material.Box, {
560
- className: "flex items-center space-x-5 py-[5px]"
561
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
562
- className: "flex items-center space-x-2"
563
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Bleeding"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
564
- className: "!font-400 !text-[12px]",
565
- color: "#494A48"
566
- }, "Bleeding of point")), /*#__PURE__*/_react.default.createElement(_material.Box, {
567
- className: "flex items-center space-x-2"
568
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Plaque"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
569
- className: "!font-400 !text-[12px]",
570
- color: "#494A48"
571
- }, "Plaque of point"))), /*#__PURE__*/_react.default.createElement(_material.Box, {
572
- className: "flex items-center space-x-5 py-[5px]"
573
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
574
- className: "flex items-center space-x-2"
575
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Buccal"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
576
- className: "!font-400 !text-[12px]",
577
- color: "#494A48"
578
- }, "Buccal")), /*#__PURE__*/_react.default.createElement(_material.Box, {
579
- className: "flex items-center space-x-2"
580
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Lingual"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
581
- className: "!font-400 !text-[12px]",
582
- color: "#494A48"
583
- }, "Lingual")))), /*#__PURE__*/_react.default.createElement(_material.Box, {
584
- className: "pb-[8px]"
585
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
586
- className: "!font-[600] !text-[12px]",
587
- color: "#494A48"
588
- }, "Scenario 1"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
589
- className: "!font-[600] !text-[12px] px-[10px] pt-[5px]",
590
- color: "#494A48"
591
- }, "Measure the full mouth pocket depth, then bleeding and plaque"), /*#__PURE__*/_react.default.createElement(_material.Box, {
592
- className: "flex items-center space-x-2 px-[10px] py-[5px]"
593
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
594
- className: "flex items-center space-x-1"
595
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.CommandIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
596
- className: "!font-400 !text-[12px]",
597
- color: "#494A48"
598
- }, "Command:")), /*#__PURE__*/_react.default.createElement(_material.Box, {
599
- className: "flex items-center"
600
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "One"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
601
- className: "!font-400 !text-[14px]",
602
- color: "#494A48"
603
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Bleeding"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
604
- className: "!font-400 !text-[14px]",
605
- color: "#494A48"
606
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Plaque")))), /*#__PURE__*/_react.default.createElement(_material.Box, {
607
- className: "pb-[8px]"
608
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
609
- className: "!font-[600] !text-[12px]",
610
- color: "#494A48"
611
- }, "Scenario 2"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
612
- className: "!font-[600] !text-[12px] px-[10px] pt-[5px]",
613
- color: "#494A48"
614
- }, "Jump to specific tooth position and check implant, crown, missing"), /*#__PURE__*/_react.default.createElement(_material.Box, {
615
- className: "flex items-center space-x-2 px-[10px] py-[5px]"
616
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
617
- className: "flex items-center space-x-1"
618
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.CommandIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
619
- className: "!font-400 !text-[12px]",
620
- color: "#494A48"
621
- }, "Command:")), /*#__PURE__*/_react.default.createElement(_material.Box, {
622
- className: "flex items-center"
623
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Jump"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
624
- className: "!font-400 !text-[14px]",
625
- color: "#494A48"
626
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Twenty-four"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
627
- className: "!font-400 !text-[14px]",
628
- color: "#494A48"
629
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Implant"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
630
- className: "!font-400 !text-[12px]",
631
- color: "#494A48"
632
- }, "/"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Crown"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
633
- className: "!font-400 !text-[12px]",
634
- color: "#494A48"
635
- }, "/"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Missing")))), /*#__PURE__*/_react.default.createElement(_material.Box, {
636
- className: "pb-[8px]"
637
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
638
- className: "!font-[600] !text-[12px]",
639
- color: "#494A48"
640
- }, "Scenario 3"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
641
- className: "!font-[600] !text-[12px] px-[10px] pt-[5px]",
642
- color: "#494A48"
643
- }, "Jump to specific tooth position and check buccal bleeding"), /*#__PURE__*/_react.default.createElement(_material.Box, {
644
- className: "flex items-center space-x-2 px-[10px] py-[5px]"
645
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
646
- className: "flex items-center space-x-1"
647
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.CommandIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
648
- className: "!font-400 !text-[12px]",
649
- color: "#494A48"
650
- }, "Command:")), /*#__PURE__*/_react.default.createElement(_material.Box, {
651
- className: "flex items-center"
652
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Jump"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
653
- className: "!font-400 !text-[14px]",
654
- color: "#494A48"
655
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Seventeen"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
656
- className: "!font-400 !text-[14px]",
657
- color: "#494A48"
658
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Buccal"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
659
- className: "!font-400 !text-[14px]",
660
- color: "#494A48"
661
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Bleeding"))), /*#__PURE__*/_react.default.createElement(_material.Typography, {
662
- className: "!font-[600] !text-[12px] px-[10px] pt-[5px]",
663
- color: "#494A48"
664
- }, "Jump to specific tooth position and check mobility II"), /*#__PURE__*/_react.default.createElement(_material.Box, {
665
- className: "flex items-center space-x-2 px-[10px] py-[5px]"
666
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
667
- className: "flex items-center space-x-1"
668
- }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_svgs.CommandIcon, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
669
- className: "!font-400 !text-[12px]",
670
- color: "#494A48"
671
- }, "Command:")), /*#__PURE__*/_react.default.createElement(_material.Box, {
672
- className: "flex items-center"
673
- }, /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Jump"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
674
- className: "!font-400 !text-[14px]",
675
- color: "#494A48"
676
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Thirty-three"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
677
- className: "!font-400 !text-[14px]",
678
- color: "#494A48"
679
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Lingual"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
680
- className: "!font-400 !text-[14px]",
681
- color: "#494A48"
682
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Mobility"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
683
- className: "!font-400 !text-[14px]",
684
- color: "#494A48"
685
- }, "+"), /*#__PURE__*/_react.default.createElement(StyledTypography, null, "Two"))))), /*#__PURE__*/_react.default.createElement(_material.Popover, {
686
- open: openAnchorEl,
687
- anchorEl: anchorEl,
688
- onClose: handlePopoverClose,
689
- anchorOrigin: {
690
- vertical: 'bottom',
691
- horizontal: 'right'
692
- },
693
- transformOrigin: {
694
- vertical: 'top',
695
- horizontal: 'right'
696
- },
697
- sx: {
698
- '& .MuiPaper-root': {
699
- boxShadow: 'none',
700
- border: '1px solid #D8DEE4',
701
- borderRadius: '5px',
702
- marginTop: '5px'
703
- }
704
- }
705
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
706
- className: "px-[5px] py-[2.5px] w-[200px]"
707
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
708
- className: "flex items-center px-[10px] py-[3px]"
709
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
710
- className: "!font-bold !text-[14px]",
711
- color: "#494A48B2"
712
- }, "Data")), /*#__PURE__*/_react.default.createElement(_material.Box, {
713
- className: "flex items-center justify-between rounded-[5px] px-[10px] py-[3px] cursor-pointer",
714
- sx: {
715
- '&:hover': {
716
- background: '#F6F6F6'
717
- }
718
- }
719
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
720
- className: "flex items-center space-x-1"
721
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
722
- className: "!font-bold !text-[14px]",
723
- color: "#494A48"
724
- }, "7"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
725
- className: "!font-400 !text-[12px]",
726
- color: "#494A48"
727
- }, "words")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
728
- className: "!font-400 !text-[14px]",
729
- color: "#494A48"
730
- }, "02.July.2024")), /*#__PURE__*/_react.default.createElement(_material.Box, {
731
- className: "flex items-center justify-between px-[10px] py-[3px]"
732
- }, /*#__PURE__*/_react.default.createElement(_material.Box, {
733
- className: "flex items-center space-x-1"
734
- }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
735
- className: "!font-bold !text-[14px]",
736
- color: "#494A48"
737
- }, "7"), /*#__PURE__*/_react.default.createElement(_material.Typography, {
738
- className: "!font-400 !text-[12px]",
739
- color: "#494A48"
740
- }, "words")), /*#__PURE__*/_react.default.createElement(_material.Typography, {
741
- className: "!font-400 !text-[14px]",
742
- color: "#494A48"
743
- }, "02.July.2024")))));
926
+ },
927
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
928
+ className: "px-[5px] py-[2.5px] w-[200px]",
929
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
930
+ className: "flex items-center px-[10px] py-[3px]",
931
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
932
+ className: "!font-bold !text-[14px]",
933
+ color: "#494A48B2",
934
+ children: "Data"
935
+ })
936
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
937
+ className: "flex items-center justify-between rounded-[5px] px-[10px] py-[3px] cursor-pointer",
938
+ sx: {
939
+ '&:hover': {
940
+ background: '#F6F6F6'
941
+ }
942
+ },
943
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
944
+ className: "flex items-center space-x-1",
945
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
946
+ className: "!font-bold !text-[14px]",
947
+ color: "#494A48",
948
+ children: "7"
949
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
950
+ className: "!font-400 !text-[12px]",
951
+ color: "#494A48",
952
+ children: "words"
953
+ })]
954
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
955
+ className: "!font-400 !text-[14px]",
956
+ color: "#494A48",
957
+ children: "02.July.2024"
958
+ })]
959
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
960
+ className: "flex items-center justify-between px-[10px] py-[3px]",
961
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
962
+ className: "flex items-center space-x-1",
963
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
964
+ className: "!font-bold !text-[14px]",
965
+ color: "#494A48",
966
+ children: "7"
967
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
968
+ className: "!font-400 !text-[12px]",
969
+ color: "#494A48",
970
+ children: "words"
971
+ })]
972
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
973
+ className: "!font-400 !text-[14px]",
974
+ color: "#494A48",
975
+ children: "02.July.2024"
976
+ })]
977
+ })]
978
+ })
979
+ })]
980
+ });
744
981
  };
745
982
  var _default = exports.default = Recognition;