@discourser/design-system 0.24.0 → 0.25.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 (105) hide show
  1. package/dist/{chunk-KIJKNZ73.cjs → chunk-QNCZYFUJ.cjs} +46 -11
  2. package/dist/chunk-QNCZYFUJ.cjs.map +1 -0
  3. package/dist/{chunk-VOH2QELR.cjs → chunk-TBLDQATQ.cjs} +377 -12
  4. package/dist/chunk-TBLDQATQ.cjs.map +1 -0
  5. package/dist/{chunk-VN2QX6S7.js → chunk-UHSL4N44.js} +378 -14
  6. package/dist/chunk-UHSL4N44.js.map +1 -0
  7. package/dist/{chunk-HN2IHIMR.js → chunk-ZPECW4N2.js} +46 -11
  8. package/dist/chunk-ZPECW4N2.js.map +1 -0
  9. package/dist/components/Badge.figma.d.ts +2 -0
  10. package/dist/components/Badge.figma.d.ts.map +1 -0
  11. package/dist/components/Button.figma.d.ts +2 -0
  12. package/dist/components/Button.figma.d.ts.map +1 -0
  13. package/dist/components/Card.figma.d.ts +2 -0
  14. package/dist/components/Card.figma.d.ts.map +1 -0
  15. package/dist/components/Icons/AudienceIcon.d.ts.map +1 -1
  16. package/dist/components/Input.figma.d.ts +2 -0
  17. package/dist/components/Input.figma.d.ts.map +1 -0
  18. package/dist/components/RadioGroup.figma.d.ts +2 -0
  19. package/dist/components/RadioGroup.figma.d.ts.map +1 -0
  20. package/dist/components/SettingsPopover/SettingsPopover.figma.d.ts +2 -0
  21. package/dist/components/SettingsPopover/SettingsPopover.figma.d.ts.map +1 -0
  22. package/dist/components/Slider.figma.d.ts +2 -0
  23. package/dist/components/Slider.figma.d.ts.map +1 -0
  24. package/dist/components/Stepper/Stepper.figma.d.ts +2 -0
  25. package/dist/components/Stepper/Stepper.figma.d.ts.map +1 -0
  26. package/dist/components/StudioControls/StudioControls.d.ts +3 -0
  27. package/dist/components/StudioControls/StudioControls.d.ts.map +1 -0
  28. package/dist/components/StudioControls/StudioControls.figma.d.ts +2 -0
  29. package/dist/components/StudioControls/StudioControls.figma.d.ts.map +1 -0
  30. package/dist/components/StudioControls/index.d.ts +3 -0
  31. package/dist/components/StudioControls/index.d.ts.map +1 -0
  32. package/dist/components/StudioControls/types.d.ts +17 -0
  33. package/dist/components/StudioControls/types.d.ts.map +1 -0
  34. package/dist/components/Switch.figma.d.ts +2 -0
  35. package/dist/components/Switch.figma.d.ts.map +1 -0
  36. package/dist/components/index.cjs +78 -74
  37. package/dist/components/index.d.ts +1 -0
  38. package/dist/components/index.d.ts.map +1 -1
  39. package/dist/components/index.js +1 -1
  40. package/dist/figma-codex/parser.d.ts +2 -0
  41. package/dist/figma-codex/parser.d.ts.map +1 -1
  42. package/dist/figma-codex/resolver.d.ts.map +1 -1
  43. package/dist/figma-codex/schema.d.ts +7 -0
  44. package/dist/figma-codex/schema.d.ts.map +1 -1
  45. package/dist/figma-codex.json +420 -2
  46. package/dist/index.cjs +82 -78
  47. package/dist/index.js +2 -2
  48. package/dist/preset/index.cjs +2 -2
  49. package/dist/preset/index.js +1 -1
  50. package/dist/preset/recipes/badge.d.ts.map +1 -1
  51. package/dist/preset/recipes/index.d.ts +1 -0
  52. package/dist/preset/recipes/index.d.ts.map +1 -1
  53. package/dist/preset/recipes/studio-controls.d.ts +2 -0
  54. package/dist/preset/recipes/studio-controls.d.ts.map +1 -0
  55. package/dist/preset/recipes/switch.d.ts.map +1 -1
  56. package/docs/figma-mcp-return/card-audit.json +31 -0
  57. package/docs/figma-mcp-return/conversation-prelaunch-audit.json +51 -0
  58. package/docs/figma-mcp-return/conversation_lobby-design-context.md +359 -0
  59. package/docs/figma-mcp-return/conversation_lobby-metadata.xml +1 -0
  60. package/docs/figma-mcp-return/discourser-accordion-audit.json +264 -0
  61. package/docs/figma-mcp-return/discourser-accordion-design-context-v2.tsx +350 -0
  62. package/docs/figma-mcp-return/discourser-accordion-design-context.tsx +130 -0
  63. package/docs/figma-mcp-return/discourser-accordion-metadata-v2.xml +1 -0
  64. package/docs/figma-mcp-return/discourser-accordion-metadata.xml +1 -0
  65. package/docs/figma-mcp-return/kai-resolution-simulation.md +181 -0
  66. package/docs/figma-mcp-return/prelaunch-comparison-analysis.md +126 -0
  67. package/docs/figma-mcp-return/prelaunch-get-design-context.md +982 -0
  68. package/docs/figma-mcp-return/prelaunch-get-metadata.md +7 -0
  69. package/docs/figma-mcp-return/prelaunch-get-metadata.xml +3 -0
  70. package/docs/figma-mcp-return/prelaunch-post-component-update.md +791 -0
  71. package/docs/figma-mcp-return/prelaunch-post-rebind-design-context.md +969 -0
  72. package/docs/figma-mcp-return/radio-group-audit.json +23 -0
  73. package/docs/figma-mcp-return/switch-audit.json +38 -0
  74. package/docs/session-summary-2026-03-29.md +98 -0
  75. package/package.json +2 -1
  76. package/src/components/Badge.figma.tsx +39 -0
  77. package/src/components/Button.figma.tsx +18 -0
  78. package/src/components/Card.figma.tsx +33 -0
  79. package/src/components/Icons/AudienceIcon.tsx +3 -1
  80. package/src/components/Icons/AudioSpeakerIcon.tsx +1 -1
  81. package/src/components/Icons/MicrophoneIcon.tsx +3 -3
  82. package/src/components/Icons/RecordIcon.tsx +4 -4
  83. package/src/components/Icons/TimerIcon.tsx +1 -1
  84. package/src/components/Input.figma.tsx +17 -0
  85. package/src/components/RadioGroup.figma.tsx +61 -0
  86. package/src/components/SettingsPopover/SettingsPopover.figma.tsx +17 -0
  87. package/src/components/Slider.figma.tsx +66 -0
  88. package/src/components/Stepper/Stepper.figma.tsx +19 -0
  89. package/src/components/StudioControls/StudioControls.figma.tsx +25 -0
  90. package/src/components/StudioControls/StudioControls.tsx +381 -0
  91. package/src/components/StudioControls/index.ts +2 -0
  92. package/src/components/StudioControls/types.ts +17 -0
  93. package/src/components/Switch.figma.tsx +49 -0
  94. package/src/components/index.ts +5 -0
  95. package/src/figma-codex/parser.ts +55 -0
  96. package/src/figma-codex/resolver.ts +1 -0
  97. package/src/figma-codex/schema.ts +9 -0
  98. package/src/preset/recipes/badge.ts +41 -7
  99. package/src/preset/recipes/index.ts +1 -0
  100. package/src/preset/recipes/studio-controls.ts +252 -0
  101. package/src/preset/recipes/switch.ts +5 -4
  102. package/dist/chunk-HN2IHIMR.js.map +0 -1
  103. package/dist/chunk-KIJKNZ73.cjs.map +0 -1
  104. package/dist/chunk-VN2QX6S7.js.map +0 -1
  105. package/dist/chunk-VOH2QELR.cjs.map +0 -1
package/docs/figma-mcp-return/prelaunch-post-component-update.md ADDED
@@ -0,0 +1,791 @@
1
+ # get_design_context — node 66:2739 (Conversation Prelaunch)
2
+
3
+ Captured: 2026-03-30
4
+ Tool: `mcp__figma-remote__get_design_context`
5
+ Parameters: `nodeId: "66:2739"`, `fileKey: "GaHmFfmvO4loUzuZS4TgEz"`, `clientFrameworks: "react"`, `clientLanguages: "typescript"`
6
+
7
+ > **Note:** The MCP tool returned a truncation notice: `[OUTPUT TRUNCATED - exceeded 25000 token limit]`. The code block below contains the full returned output up to that truncation point.
8
+
9
+ ```tsx
10
+ const imgSvgRepoIconCarrier = "https://www.figma.com/api/mcp/asset/621c2057-67c0-4ccc-87ff-a4f4b1bc7121";
11
+ const imgSvgRepoIconCarrier1 = "https://www.figma.com/api/mcp/asset/45791d1a-e36d-43bf-a5f9-62cbd81ebf58";
12
+ const imgImage1 = "https://www.figma.com/api/mcp/asset/b06b426f-140b-4ad5-a5a8-8e035b727694";
13
+ const imgIon = "https://www.figma.com/api/mcp/asset/4466b147-7ffe-43fd-8a90-bbc5ce803a3d";
14
+ const imgDiscourser = "https://www.figma.com/api/mcp/asset/0e681baf-bce6-4783-9ec6-93f32ed57a9e";
15
+ const imgVector = "https://www.figma.com/api/mcp/asset/f5545370-cc66-4d50-848e-5dc681cb9b69";
16
+ const imgVector1 = "https://www.figma.com/api/mcp/asset/a69f1fef-9654-4bca-baca-350a860ab959";
17
+ const imgVector2 = "https://www.figma.com/api/mcp/asset/b17a8ede-3c51-4b33-900a-243c6f123be7";
18
+ const imgVector3 = "https://www.figma.com/api/mcp/asset/b15e7b5b-76bf-4d84-b135-b0dc249fcdb3";
19
+ const imgVector4 = "https://www.figma.com/api/mcp/asset/175a4da8-e252-4fd7-9b4d-40a3f0583ce6";
20
+ const imgVector5 = "https://www.figma.com/api/mcp/asset/dab1a624-7f62-454d-bda0-35d4b770ce6e";
21
+ const imgVector6 = "https://www.figma.com/api/mcp/asset/47792dd6-208c-4652-af05-daf045fb1191";
22
+ const imgGroup4890 = "https://www.figma.com/api/mcp/asset/f44ab35b-e016-4ff4-b172-5a1ef267dac9";
23
+ const imgVector7 = "https://www.figma.com/api/mcp/asset/024e9f42-806f-4d64-9095-c65697d85309";
24
+ const imgGroup4891 = "https://www.figma.com/api/mcp/asset/97bff702-dcfb-4b76-a84c-d376dfff568e";
25
+ const imgLucideIconsIterationCcw = "https://www.figma.com/api/mcp/asset/728a091f-f412-4588-8fd5-e11b45597d54";
26
+ const imgVector8 = "https://www.figma.com/api/mcp/asset/fd513619-f3a6-4ff5-b379-67309df0a655";
27
+ const imgSlash = "https://www.figma.com/api/mcp/asset/eedfe6f0-e773-45f7-a376-4097ec6c089d";
28
+ const imgSlash1 = "https://www.figma.com/api/mcp/asset/8cfeb10f-2c1f-4f78-a0e1-3b3534351ebb";
29
+ const imgVector9 = "https://www.figma.com/api/mcp/asset/eaa83e2d-bc8f-4c85-87b7-4598bac9c942";
30
+ const imgFrame4892 = "https://www.figma.com/api/mcp/asset/ef2481c0-e964-4494-849b-b535f85b3eaf";
31
+ const imgVector10 = "https://www.figma.com/api/mcp/asset/67c422d4-939f-4348-8634-7c59852a422e";
32
+ const imgIcon = "https://www.figma.com/api/mcp/asset/23fc87de-cea3-4016-a8c8-bbccfd48cbfd";
33
+ const imgIcon1 = "https://www.figma.com/api/mcp/asset/63bec460-3c95-46b6-a699-16d1238c202f";
34
+ const imgVector11 = "https://www.figma.com/api/mcp/asset/7a9154be-93c1-4ecc-82c2-aac27caccb42";
35
+ const imgOutPutEq = "https://www.figma.com/api/mcp/asset/45214c95-56a9-4f0d-9d12-0ce56420fe85";
36
+ const imgSvgRepoIconCarrier2 = "https://www.figma.com/api/mcp/asset/42ddeaaf-6bc4-407b-af55-b64cdb3a8d12";
37
+ const imgVector12 = "https://www.figma.com/api/mcp/asset/3d782029-fe64-4de3-95e6-b7211a4a7941";
38
+ const imgSvgRepoIconCarrier3 = "https://www.figma.com/api/mcp/asset/44ebe83c-357d-4c67-a039-9192c4d09a60";
39
+ const imgSwitch = "https://www.figma.com/api/mcp/asset/80650420-56cf-4db6-a1a4-33a2c558c28d";
40
+ const imgSvgRepoIconCarrier4 = "https://www.figma.com/api/mcp/asset/e4c5839a-55ec-4a59-b167-9879d4400fb9";
41
+ const imgSwitch1 = "https://www.figma.com/api/mcp/asset/1c50cf61-6192-4e41-a51e-16729da02ac5";
42
+ type SettingsPopoverProps = {
43
+ className?: string;
44
+ property1?: "Default";
45
+ };
46
+
47
+ function SettingsPopover({ className, property1 = "Default" }: SettingsPopoverProps) {
48
+ return (
49
+ <div className={className || "bg-[var(--neutral\\/90,#e3e3db)] border-[var(--neutral\\/90,#e3e3db)] border-solid border-t-[length:var(--border\\/thin,1px)] content-stretch flex flex-col items-start justify-center overflow-clip py-[6px] relative w-[285px]"} data-node-id="810:5397">
50
+ <div className="content-stretch flex gap-[12px] h-[55px] items-center px-[10px] relative shrink-0 w-[283px]" data-node-id="810:5385">
51
+ <div className="bg-[var(--neutral\/90,#e3e3db)] overflow-clip relative rounded-[9999px] shrink-0 size-[44.154px]" data-name="LoggedInAvatar" data-node-id="810:5369">
52
+ <div className="absolute flex h-[43.349px] items-center justify-center left-[5.89px] top-[3.13px] w-[41.785px]">
53
+ <div className="flex-none rotate-[-13.92deg]">
54
+ <div className="h-[36.215px] overflow-clip relative w-[34.072px]" data-name="Layer_1" data-node-id="I810:5369;810:5345">
55
+ <div className="absolute inset-[0_14.63%]" data-name="SVGRepo_iconCarrier" data-node-id="I810:5369;810:5346">
56
+ <img alt="" className="absolute block max-w-none size-full" src={imgSvgRepoIconCarrier} />
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ <div className="content-stretch flex flex-col items-start leading-[0] not-italic relative shrink-0 w-[161px]" data-node-id="810:5387">
63
+ <div className="flex flex-col font-['Poppins:Medium',sans-serif] justify-center relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-full" data-node-id="810:5384">
64
+ <p className="leading-[normal]">Will Streeter</p>
65
+ </div>
66
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-center relative shrink-0 text-[14px] text-[color:var(--neutral\/40,#5e5f59)] w-full" data-node-id="810:5386">
67
+ <p className="leading-[normal]">Free Trial</p>
68
+ </div>
69
+ </div>
70
+ <div className="overflow-clip relative shrink-0 size-[40px]" data-name="PopOver" data-node-id="810:5393">
71
+ <div className="absolute inset-[12.96%_17.82%]" data-name="SVGRepo_iconCarrier" data-node-id="I810:5393;810:5389">
72
+ <img alt="" className="absolute block max-w-none size-full" src={imgSvgRepoIconCarrier1} />
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ );
78
+ }
79
+
80
+ export default function ScenarioStudioConversationPrelaunch({ className }: { className?: string }) {
81
+ return (
82
+ <div className={className || "bg-[var(--neutral\\/100,white)] h-[1239px] overflow-clip relative w-[1728px]"} data-name="Scenario/Studio Conversation/ Prelaunch" data-node-id="66:2739">
83
+ <div className="absolute content-stretch flex h-[1239px] items-start left-0 overflow-clip top-0 w-[1728px]" data-name="Grid" data-node-id="38:3427">
84
+ <div className="bg-[var(--surface\/container\/high,#e8e9de)] border-[var(--neutral\/90,#e3e3db)] border-r border-solid content-stretch flex flex-col h-[1095px] items-start overflow-clip relative shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] shrink-0 w-[285px]" data-name="Left Side Nav" data-node-id="573:7508">
85
+ <div className="content-stretch flex h-[92px] items-center justify-center py-[15px] relative shrink-0 w-full" data-name="Logo Holder" data-node-id="573:7509">
86
+ <div className="content-stretch flex h-[45.252px] items-center py-[3.771px] relative shrink-0 w-[262.46px]" data-name="DiscourserLogo" data-node-id="573:7510">
87
+ <div className="h-[33.939px] relative shrink-0 w-[18.855px]" data-name="ion" data-node-id="I573:7510;489:4928">
88
+ <div className="absolute inset-[0_-1.26%_0_0]">
89
+ <img alt="" className="block max-w-none size-full" src={imgIon} />
90
+ </div>
91
+ </div>
92
+ <div className="h-[34.367px] relative shrink-0 w-[235.252px]" data-name="Discourser" data-node-id="I573:7510;489:4932">
93
+ <img alt="" className="absolute block max-w-none size-full" src={imgDiscourser} />
94
+ </div>
95
+ </div>
96
+ </div>
97
+ <div className="content-stretch cursor-pointer flex flex-col h-[1091px] items-start overflow-clip relative shrink-0 w-[283px]" data-name="Navigation Menu" data-node-id="573:7511">
98
+ <button className="content-stretch flex flex-col h-[58px] items-start overflow-clip p-[10px] relative shrink-0 w-full" data-name="ListItem" data-node-id="I573:7511;38:8486">
99
+ <div className="content-stretch flex items-center justify-between p-[5px] relative rounded-[8px] shrink-0 w-full" data-name="Expandable List Item" data-node-id="I573:7511;38:8486;340:4002">
100
+ <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8486;340:4003">
101
+ <div className="grid grid-cols-[repeat(1,minmax(0,1fr))] grid-rows-[repeat(1,minmax(0,1fr))] overflow-clip p-[2px] relative shrink-0 size-[24px]" data-name="icon-Front" data-node-id="I573:7511;38:8486;340:4004">
102
+ <div className="col-1 overflow-clip relative row-1 shrink-0 size-[20px]" data-name="Icon" data-node-id="I573:7511;38:8486;340:4005">
103
+ <div className="absolute inset-[12.5%]" data-name="Vector" data-node-id="I573:7511;38:8486;340:4005;2706:15477">
104
+ <div className="absolute inset-[-4.43%]">
105
+ <img alt="" className="block max-w-none size-full" src={imgVector} />
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[165.952px]" data-node-id="I573:7511;38:8486;340:4006">
111
+ <p className="leading-[normal]">Dashboard</p>
112
+ </div>
113
+ </div>
114
+ <div className="relative shrink-0 size-[24px]" data-name="icon-Back" data-node-id="I573:7511;38:8486;340:4007">
115
+ <div className="absolute left-0 overflow-clip size-[24px] top-0" data-name="Chevron Icon" data-node-id="I573:7511;38:8486;340:4008">
116
+ <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I573:7511;38:8486;340:4008;330:4497">
117
+ <div className="absolute inset-[-9.17%_-18.33%]">
118
+ <img alt="" className="block max-w-none size-full" src={imgVector1} />
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </button>
125
+ <button className="content-stretch flex flex-col h-[58px] items-start overflow-clip p-[10px] relative shrink-0 w-full" data-name="ListItem" data-node-id="I573:7511;38:8487">
126
+ <div className="content-stretch flex items-center justify-between p-[5px] relative rounded-[8px] shrink-0 w-full" data-name="Expandable List Item" data-node-id="I573:7511;38:8487;340:4002">
127
+ <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8487;340:4003">
128
+ <div className="grid grid-cols-[repeat(1,minmax(0,1fr))] grid-rows-[repeat(1,minmax(0,1fr))] overflow-clip p-[2px] relative shrink-0 size-[24px]" data-name="icon-Front" data-node-id="I573:7511;38:8487;340:4004">
129
+ <div className="col-1 overflow-clip relative row-1 shrink-0 size-[20px]" data-name="Icon" data-node-id="I573:7511;38:8487;340:4005">
130
+ <div className="absolute inset-[12.5%_8.33%]" data-name="Vector" data-node-id="I573:7511;38:8487;340:4005;2706:14271">
131
+ <div className="absolute inset-[-4.43%_-3.99%]">
132
+ <img alt="" className="block max-w-none size-full" src={imgVector2} />
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[165.952px]" data-node-id="I573:7511;38:8487;340:4006">
138
+ <p className="leading-[normal]">MyNotebook</p>
139
+ </div>
140
+ </div>
141
+ <div className="relative shrink-0 size-[24px]" data-name="icon-Back" data-node-id="I573:7511;38:8487;340:4007">
142
+ <div className="absolute left-0 overflow-clip size-[24px] top-0" data-name="Chevron Icon" data-node-id="I573:7511;38:8487;340:4008">
143
+ <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I573:7511;38:8487;340:4008;330:4497">
144
+ <div className="absolute inset-[-9.17%_-18.33%]">
145
+ <img alt="" className="block max-w-none size-full" src={imgVector1} />
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </button>
152
+ <button className="content-stretch flex flex-col gap-[10px] items-start overflow-clip p-[10px] relative shrink-0 w-full" data-name="ListItem" data-node-id="I573:7511;38:8488">
153
+ <div className="bg-[var(--neutral\/95,#f2f1e9)] content-stretch flex items-center justify-between p-[5px] relative rounded-[8px] shrink-0 w-full" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7931">
154
+ <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7932">
155
+ <div className="grid grid-cols-[repeat(1,minmax(0,1fr))] grid-rows-[repeat(1,minmax(0,1fr))] overflow-clip p-[2px] relative shrink-0 size-[24px]" data-name="icon-Front" data-node-id="I573:7511;38:8488;38:7933">
156
+ <div className="col-1 overflow-clip relative row-1 shrink-0 size-[20px]" data-name="Icon" data-node-id="I573:7511;38:8488;38:7934">
157
+ <div className="absolute inset-[12.5%]" data-name="Vector" data-node-id="I573:7511;38:8488;38:7934;2706:15657">
158
+ <div className="absolute inset-[-4.43%]">
159
+ <img alt="" className="block max-w-none size-full" src={imgVector3} />
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div className="flex flex-col font-['Poppins:Medium',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[165.952px]" data-node-id="I573:7511;38:8488;38:7935">
165
+ <p className="leading-[normal]">Scenarios</p>
166
+ </div>
167
+ </div>
168
+ <div className="flex items-center justify-center relative shrink-0 size-[24.056px]">
169
+ <div className="flex-none rotate-[90.13deg]">
170
+ <div className="relative size-[24px]" data-name="icon-Back" data-node-id="I573:7511;38:8488;38:7936">
171
+ <div className="absolute left-0 overflow-clip size-[24px] top-0" data-name="Chevron Icon" data-node-id="I573:7511;38:8488;38:7937">
172
+ <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I573:7511;38:8488;38:7937;330:4497">
173
+ <div className="absolute inset-[-9.17%_-18.33%]">
174
+ <img alt="" className="block max-w-none size-full" src={imgVector1} />
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ <div className="content-stretch flex items-center justify-end pl-[30px] pr-[5px] py-[5px] relative rounded-[8px] shrink-0 w-[241px]" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7938" role="button" tabIndex="0">
183
+ <div className="content-stretch flex items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7938;782:3202">
184
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[191.565px]" data-node-id="I573:7511;38:8488;38:7938;782:3203">
185
+ <p className="leading-[normal]">MyQueue</p>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ <div className="bg-[var(--secondary\/80,#bbcda1)] content-stretch flex items-center justify-end pl-[30px] pr-[5px] py-[5px] relative rounded-[8px] shrink-0 w-[241px]" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7939" role="button" tabIndex="0">
190
+ <div className="content-stretch flex items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7939;38:7772">
191
+ <div className="flex flex-col font-['Poppins:Medium',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[0px] text-[color:var(--neutral\/20,#30312c)] text-left w-[162.403px]" data-node-id="I573:7511;38:8488;38:7939;38:7773">
192
+ <p className="leading-[normal] text-[14px]">Conversation Studio</p>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ <div className="content-stretch flex items-center justify-end pl-[30px] pr-[5px] py-[5px] relative rounded-[8px] shrink-0 w-[241px]" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7940" role="button" tabIndex="0">
197
+ <div className="content-stretch flex items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7940;38:7784">
198
+ <p className="font-['Poppins:Regular',sans-serif] h-[18.049px] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[162.403px]" data-node-id="I573:7511;38:8488;38:7940;38:7785">
199
+ Studio Setup
200
+ </p>
201
+ </div>
202
+ </div>
203
+ <div className="content-stretch flex items-center justify-end pl-[30px] pr-[5px] py-[5px] relative rounded-[8px] shrink-0 w-[241px]" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7941" role="button" tabIndex="0">
204
+ <div className="content-stretch flex items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7941;38:7796">
205
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[162.403px]" data-node-id="I573:7511;38:8488;38:7941;38:7797">
206
+ <p className="leading-[normal]">By Level</p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div className="content-stretch flex items-center justify-end pl-[30px] pr-[5px] py-[5px] relative rounded-[8px] shrink-0 w-[241px]" data-name="Expandable List Item" data-node-id="I573:7511;38:8488;38:7942" role="button" tabIndex="0">
211
+ <div className="content-stretch flex items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8488;38:7942;38:7745">
212
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[162.403px]" data-node-id="I573:7511;38:8488;38:7942;38:7746">
213
+ <p className="leading-[normal] whitespace-pre-wrap">{`By Skill`}</p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </button>
218
+ <button className="content-stretch flex flex-col h-[58px] items-start overflow-clip p-[10px] relative shrink-0 w-full" data-name="ListItem" data-node-id="I573:7511;38:8489">
219
+ <div className="content-stretch flex items-center justify-between p-[5px] relative rounded-[8px] shrink-0 w-full" data-name="Expandable List Item" data-node-id="I573:7511;38:8489;340:4002">
220
+ <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8489;340:4003">
221
+ <div className="grid grid-cols-[repeat(1,minmax(0,1fr))] grid-rows-[repeat(1,minmax(0,1fr))] overflow-clip p-[2px] relative shrink-0 size-[24px]" data-name="icon-Front" data-node-id="I573:7511;38:8489;340:4004">
222
+ <div className="col-1 overflow-clip relative row-1 shrink-0 size-[20px]" data-name="Icon" data-node-id="I573:7511;38:8489;340:4005">
223
+ <div className="absolute inset-[28.93%_8.22%_20.83%_8.33%]" data-name="Vector" data-node-id="I573:7511;38:8489;340:4005;2706:15321">
224
+ <div className="absolute inset-[-6.62%_-3.98%]">
225
+ <img alt="" className="block max-w-none size-full" src={imgVector4} />
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[165.952px]" data-node-id="I573:7511;38:8489;340:4006">
231
+ <p className="leading-[normal]">Help</p>
232
+ </div>
233
+ </div>
234
+ <div className="relative shrink-0 size-[24px]" data-name="icon-Back" data-node-id="I573:7511;38:8489;340:4007">
235
+ <div className="absolute left-0 overflow-clip size-[24px] top-0" data-name="Chevron Icon" data-node-id="I573:7511;38:8489;340:4008">
236
+ <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I573:7511;38:8489;340:4008;330:4497">
237
+ <div className="absolute inset-[-9.17%_-18.33%]">
238
+ <img alt="" className="block max-w-none size-full" src={imgVector1} />
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </button>
245
+ <button className="content-stretch flex flex-col h-[58px] items-start overflow-clip p-[10px] relative shrink-0 w-full" data-name="ListItem" data-node-id="I573:7511;38:8490">
246
+ <div className="content-stretch flex items-center justify-between p-[5px] relative rounded-[8px] shrink-0 w-full" data-name="Expandable List Item" data-node-id="I573:7511;38:8490;340:4002">
247
+ <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[217px]" data-name="Icon Link Name" data-node-id="I573:7511;38:8490;340:4003">
248
+ <div className="grid grid-cols-[repeat(1,minmax(0,1fr))] grid-rows-[repeat(1,minmax(0,1fr))] overflow-clip p-[2px] relative shrink-0 size-[24px]" data-name="icon-Front" data-node-id="I573:7511;38:8490;340:4004">
249
+ <div className="col-1 overflow-clip relative row-1 shrink-0 size-[20px]" data-name="Icon" data-node-id="I573:7511;38:8490;340:4005">
250
+ <div className="absolute inset-[12.5%_16.67%]" data-name="Vector" data-node-id="I573:7511;38:8490;340:4005;2706:16360">
251
+ <div className="absolute inset-[-4.43%_-4.99%]">
252
+ <img alt="" className="block max-w-none size-full" src={imgVector5} />
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[18.049px] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[165.952px]" data-node-id="I573:7511;38:8490;340:4006">
258
+ <p className="leading-[normal]">Account</p>
259
+ </div>
260
+ </div>
261
+ <div className="relative shrink-0 size-[24px]" data-name="icon-Back" data-node-id="I573:7511;38:8490;340:4007">
262
+ <div className="absolute left-0 overflow-clip size-[24px] top-0" data-name="Chevron Icon" data-node-id="I573:7511;38:8490;340:4008">
263
+ <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I573:7511;38:8490;340:4008;330:4497">
264
+ <div className="absolute inset-[-9.17%_-18.33%]">
265
+ <img alt="" className="block max-w-none size-full" src={imgVector1} />
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </button>
272
+ </div>
273
+ <SettingsPopover className="absolute bg-[var(--neutral\/90,#e3e3db)] border-[var(--neutral\/90,#e3e3db)] border-solid border-t-[length:var(--border\/thin,1px)] content-stretch flex flex-col items-start justify-center left-0 overflow-clip py-[6px] top-[1028px] w-[285px]" />
274
+ </div>
275
+ <div className="bg-[var(--neutral\/100,white)] content-stretch flex flex-col gap-[10px] h-[1276px] items-start overflow-clip pb-[10px] pt-[100px] px-[100px] relative shrink-0 w-[1089px]" data-name="Stage" data-node-id="38:3432">
276
+ <div className="absolute bg-[var(--neutral\/0,black)] h-[1095px] left-[-284px] top-0 w-[1723px]" data-name="image backgournd" data-node-id="38:3433">
277
+ <div className="absolute h-[1164.836px] left-0 opacity-0 top-[-45.64px] w-[1732.233px]" data-name="image 1" data-node-id="38:3434">
278
+ <img alt="" className="absolute inset-0 max-w-none object-cover pointer-events-none size-full" src={imgImage1} />
279
+ </div>
280
+ <div className="-translate-x-1/2 -translate-y-1/2 absolute bg-[var(--neutral\/99,#fdfcf5)] border-[length:var(--border\/thin,1px)] border-[var(--neutral\/70,#abaca5)] border-solid content-stretch flex flex-col gap-[var(--spacing\/xl,32px)] items-center left-[calc(50%-28.72px)] overflow-clip px-[var(--spacing\/xl,32px)] py-[var(--spacing\/xxl,48px)] rounded-[var(--radii\/large,16px)] top-[calc(50%+21.5px)]" data-name="Instructions Container" data-node-id="38:3435">
281
+ <div className="content-stretch flex flex-col gap-[var(--spacing\/lg,24px)] h-[254px] items-start px-[var(--spacing\/sm,8px)] py-[var(--spacing\/md,16px)] relative shrink-0" data-name="List" data-node-id="38:3436">
282
+ <div className="content-stretch flex items-start overflow-clip p-[5px] relative shrink-0" data-name="List Topic" data-node-id="38:3437">
283
+ <p className="font-['Fraunces:Regular',sans-serif] font-normal leading-[0] relative shrink-0 text-[0px] text-[color:var(--neutral\/0,black)] whitespace-nowrap" data-node-id="38:3438" style={{ fontVariationSettings: "'SOFT' 0, 'WONK' 1" }}>
284
+ <span className="leading-[normal] text-[#1b1c18] text-[28px]" style={{ fontVariationSettings: "'SOFT' 0, 'WONK' 1" }}>
285
+ Before You Start:
286
+ </span>
287
+ <span className="leading-[normal] text-[28px]" style={{ fontVariationSettings: "'SOFT' 0, 'WONK' 1" }}>{` `}</span>
288
+ </p>
289
+ </div>
290
+ <div className="content-stretch flex flex-col gap-[var(--spacing\/md,16px)] h-[177px] items-start px-[10px] relative shrink-0 w-[826px]" data-name="List Items" data-node-id="38:3439">
291
+ <div className="content-stretch flex gap-[10px] items-center p-[4px] relative shrink-0" data-name="List Item" data-node-id="38:3440">
292
+ <div className="relative shrink-0 size-[11.667px]" data-name="Vector" data-node-id="926:5106">
293
+ <div className="absolute inset-[-8.57%]">
294
+ <img alt="" className="block max-w-none size-full" src={imgVector6} />
295
+ </div>
296
+ </div>
297
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-[394.447px]" data-node-id="38:3441">
298
+ <p className="leading-[normal] whitespace-pre-wrap">{`Find a quiet space `}</p>
299
+ </div>
300
+ </div>
301
+ <div className="content-stretch flex gap-[10px] items-center p-[4px] relative shrink-0" data-name="List Item" data-node-id="38:3442">
302
+ <div className="relative shrink-0 size-[11.667px]" data-name="Vector" data-node-id="926:5108">
303
+ <div className="absolute inset-[-8.57%]">
304
+ <img alt="" className="block max-w-none size-full" src={imgVector6} />
305
+ </div>
306
+ </div>
307
+ <p className="font-['Poppins:Regular',sans-serif] leading-[normal] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-[711.254px]" data-node-id="38:3443">{`Speak at normal volume and use headphones for best quality. `}</p>
308
+ </div>
309
+ <div className="content-stretch flex gap-[10px] items-center p-[4px] relative shrink-0" data-name="List Item" data-node-id="38:3444">
310
+ <div className="relative shrink-0 size-[11.667px]" data-name="Vector" data-node-id="926:5110">
311
+ <div className="absolute inset-[-8.57%]">
312
+ <img alt="" className="block max-w-none size-full" src={imgVector6} />
313
+ </div>
314
+ </div>
315
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] h-[47.572px] justify-center leading-[0] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-[791px]" data-node-id="38:3445">
316
+ <p className="leading-[normal] whitespace-pre-wrap">{`If you have not set up the audio output and microphone input, use the right panel to do so before you start`}</p>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ <div className="content-stretch flex flex-col gap-[40px] h-[309px] items-start relative shrink-0 w-full" data-name="List" data-node-id="38:3446">
322
+ <div className="content-stretch flex items-start overflow-clip p-[5px] relative shrink-0" data-name="List Topic" data-node-id="38:3447">
323
+ <p className="font-['Fraunces:Regular',sans-serif] font-normal leading-[normal] relative shrink-0 text-[28px] text-[color:var(--neutral\/10,#1b1c18)] whitespace-nowrap" data-node-id="38:3448" style={{ fontVariationSettings: "'SOFT' 0, 'WONK' 1" }}>
324
+ Once the Conversation Starts:
325
+ </p>
326
+ </div>
327
+ <div className="content-stretch flex flex-col gap-[30px] items-start px-[10px] relative shrink-0 w-full" data-name="List Items" data-node-id="38:3449">
328
+ <div className="content-stretch flex gap-[10px] items-center relative shrink-0 w-[856px]" data-name="List Item" data-node-id="38:3450">
329
+ <div className="bg-[var(--secondary\/50,#6c7d56)] content-stretch flex items-center justify-center p-[9.404px] relative rounded-[50px] shrink-0 size-[47.02px]" data-name="audio- Pause Button Small" data-node-id="875:6109">
330
+ <div className="relative shrink-0 size-[28.212px]" data-name="icon pause frame" data-node-id="I875:6109;38:8371">
331
+ <div className="absolute left-0 size-[28.58px] top-0" data-node-id="I875:6109;38:8371;38:9850">
332
+ <img alt="" className="absolute block max-w-none size-full" src={imgGroup4890} />
333
+ </div>
334
+ <div className="absolute left-[8.89px] overflow-clip size-[10.804px] top-[8.89px]" data-name="Lucide Icons / stretch-vertical" data-node-id="I875:6109;38:8371;38:9852">
335
+ <div className="absolute inset-[8.33%_16.67%]" data-name="Vector" data-node-id="I875:6109;38:8371;38:9852;2706:14933">
336
+ <div className="absolute inset-[-5.25%_-6.56%]">
337
+ <img alt="" className="block max-w-none size-full" src={imgVector7} />
338
+ </div>
339
+ </div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-end leading-[0] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] whitespace-nowrap" data-node-id="38:3452">
344
+ <p className="leading-[normal]">{` Tap pause on the bottom right panel if you feel compelled to stop for a moment `}</p>
345
+ </div>
346
+ </div>
347
+ <div className="content-stretch flex items-center relative shrink-0" data-name="List Item" data-node-id="38:3453">
348
+ <div className="bg-[var(--secondary\/50,#6c7d56)] content-stretch flex flex-col items-center justify-center relative rounded-[50px] shrink-0 size-[47.018px]" data-name="audio- ExitButtonMajor small" data-node-id="573:7610">
349
+ <div className="relative shrink-0 size-[27.994px]" data-name="icon- exist" data-node-id="I573:7610;881:7413">
350
+ <div className="-translate-x-1/2 -translate-y-1/2 absolute left-[calc(50%+0.11px)] size-[28.211px] top-[calc(50%+0.11px)]" data-node-id="I573:7610;881:7413;880:7299">
351
+ <img alt="" className="absolute block max-w-none size-full" src={imgGroup4891} />
352
+ </div>
353
+ </div>
354
+ </div>
355
+ <p className="font-['Poppins:Regular',sans-serif] h-[19.621px] leading-[normal] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-[586.352px] whitespace-pre-wrap" data-node-id="38:3455">{` Use the exit button to leave the conversation abruptly`}</p>
356
+ </div>
357
+ <div className="content-stretch flex items-center relative shrink-0" data-name="List Item" data-node-id="38:3456">
358
+ <button className="bg-[var(--secondary\/50,#6c7d56)] block cursor-pointer relative rounded-[50px] shrink-0 size-[47.018px]" data-name="audio- Rewind small" data-node-id="573:7606">
359
+ <div className="-translate-x-1/2 -translate-y-1/2 absolute flex h-[37.614px] items-center justify-center left-[calc(50%-0.47px)] top-[calc(50%-0.47px)] w-[43.257px]">
360
+ <div className="flex-none rotate-180">
361
+ <div className="h-[37.614px] relative w-[43.257px]" data-name="Lucide Icons / iteration-ccw" data-node-id="I573:7606;709:12364">
362
+ <img alt="" className="absolute block max-w-none size-full" src={imgLucideIconsIterationCcw} />
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </button>
367
+ <p className="font-['Poppins:Regular',sans-serif] leading-[normal] not-italic relative shrink-0 text-[18px] text-[color:var(--neutral\/20,#30312c)] w-[781px] whitespace-pre-wrap" data-node-id="38:3458">
368
+ {` Use replay on the bottom right to hear the previous statement from your `}
369
+ <br aria-hidden="true" />
370
+ {` conversation partner`}
371
+ </p>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ <a className="bg-[var(--secondary\/50,#6c7d56)] content-stretch cursor-pointer flex gap-[var(--p-2,8px)] h-[52px] items-center justify-center px-[var(--p-4,16px)] py-[var(--p-2,8px)] relative rounded-[var(--calc(var(--radius)-2px),8px)] shadow-[var(--shadow\/2xs\/layer-1\/x,0px)_var(--shadow\/2xs\/layer-1\/y,1px)_var(--shadow\/2xs\/layer-1\/blur,2px)_0px_var(--shadow,black)] shrink-0 w-[352px]" data-name="Discourser Button" data-node-id="875:6042">
376
+ <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[18px] text-[color:var(--surface,#f9faef)] text-left whitespace-pre" data-node-id="I875:6042;534:3729">{`Start Scenario Conversation `}</p>
377
+ <div className="overflow-clip relative shrink-0 size-[20px]" data-name="Lucide Icons / arrow-right" data-node-id="I875:6042;534:3731">
378
+ <div className="absolute inset-[20.83%]" data-name="Vector" data-node-id="I875:6042;534:3731;2706:13911">
379
+ <div className="absolute inset-[-8.57%]">
380
+ <img alt="" className="block max-w-none size-full" src={imgVector8} />
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </a>
385
+ </div>
386
+ </div>
387
+ <div className="absolute bg-[var(--neutral\/30,#464742)] border border-[var(--neutral\/80,#c7c7c0)] border-solid content-stretch flex flex-col items-start left-[28.5px] p-[20px] rounded-[var(--radii\/medium,12px)] top-[20px]" data-name="masthead container" data-node-id="38:3459">
388
+ <div className="content-stretch flex flex-col gap-[10px] items-start justify-center relative shrink-0 w-[417px]" data-name="Breadcrumb" data-node-id="697:5275">
389
+ <div className="content-stretch flex items-start overflow-clip relative shrink-0 w-[466px]" data-name="Static Section" data-node-id="I697:5275;697:5215">
390
+ <div className="content-stretch flex gap-[6px] items-center pl-[6px] relative shrink-0" data-name="Static Crumb" data-node-id="I697:5275;697:5232">
391
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/95,#f2f1e9)] whitespace-nowrap" data-node-id="I697:5275;697:5219">
392
+ <p className="leading-[normal]">Scenarios</p>
393
+ </div>
394
+ <div className="h-[11.591px] relative shrink-0 w-[3.908px]" data-name="slash" data-node-id="I697:5275;697:5227">
395
+ <div className="absolute inset-[-8.63%_-5.07%_-8.63%_-25.6%]">
396
+ <img alt="" className="block max-w-none size-full" src={imgSlash} />
397
+ </div>
398
+ </div>
399
+ </div>
400
+ <div className="content-stretch flex gap-[6px] items-center px-[6px] relative shrink-0" data-name="Static Crumb" data-node-id="I697:5275;697:5237">
401
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/99,#fdfcf5)] whitespace-nowrap" data-node-id="I697:5275;697:5238">
402
+ <p className="leading-[normal]">{`Conversation Studio `}</p>
403
+ </div>
404
+ <div className="h-[11.591px] relative shrink-0 w-[3.908px]" data-name="slash" data-node-id="I697:5275;697:5239">
405
+ <div className="absolute inset-[-8.63%_-5.07%_-8.63%_-25.6%]">
406
+ <img alt="" className="block max-w-none size-full" src={imgSlash1} />
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ <div className="content-stretch flex items-center overflow-clip relative shrink-0" data-name="DynmicSection" data-node-id="I697:5275;697:5198">
412
+ <div className="content-stretch flex gap-[2px] h-[36px] items-center pl-[6px] py-[6px] relative rounded-[4px] shrink-0" data-name="button / android / small / outline / default / with-icon / Roboto" data-node-id="I697:5275;38:7979">
413
+ <div className="flex flex-col font-[family-name:var(--typography\/family\/body,'Poppins:SemiBold',sans-serif)] justify-center leading-[0] not-italic relative shrink-0 text-[color:var(--primary\/80,#97d945)] text-[length:var(--typography\/size\/xl,18px)] whitespace-nowrap" data-node-id="I697:5275;38:7980">
414
+ <p className="leading-[normal]">Level Setting</p>
415
+ </div>
416
+ <div className="flex items-center justify-center relative shrink-0">
417
+ <div className="-scale-y-100 flex-none">
418
+ <div className="overflow-clip relative size-[18px]" data-name="icon-cheveron-left" data-node-id="I697:5275;38:7982">
419
+ <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I697:5275;38:7982;685:5159">
420
+ <div className="absolute inset-[-12.22%_-24.44%]">
421
+ <img alt="" className="block max-w-none size-full" src={imgVector9} />
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ <div className="content-stretch flex gap-[2px] h-[36px] items-center p-[6px] relative rounded-[4px] shrink-0" data-name="button / android / small / outline / default / with-icon / Roboto" data-node-id="I697:5275;38:7984">
429
+ <div className="flex flex-col font-[family-name:var(--typography\/family\/body,'Poppins:SemiBold',sans-serif)] justify-center leading-[0] not-italic relative shrink-0 text-[color:var(--primary\/80,#97d945)] text-[length:var(--typography\/size\/xl,18px)] whitespace-nowrap" data-node-id="I697:5275;38:7984">
430
+ <p className="leading-[normal]">Lobby</p>
431
+ </div>
432
+ <div className="h-[11px] shrink-0 w-[4px]" data-name="spacer" data-node-id="I697:5275;38:7986" />
433
+ <div className="flex items-center justify-center relative shrink-0">
434
+ <div className="-scale-y-100 flex-none">
435
+ <div className="overflow-clip relative size-[18px]" data-name="icon-cheveron-left" data-node-id="I697:5275;38:7987">
436
+ <div className="absolute bottom-1/4 left-[37.5%] right-[37.5%] top-1/4" data-name="Vector" data-node-id="I697:5275;38:7987;685:5159">
437
+ <div className="absolute inset-[-12.22%_-24.44%]">
438
+ <img alt="" className="block max-w-none size-full" src={imgVector9} />
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ <div className="content-stretch flex gap-[2px] h-[36px] items-center pl-[6px] py-[6px] relative rounded-[4px] shrink-0" data-name="button / android / small / outline / default / with-icon / Roboto" data-node-id="I697:5275;685:5135">
446
+ <div className="flex flex-col font-[family-name:var(--typography\/family\/body,'Poppins:SemiBold',sans-serif)] justify-center leading-[0] not-italic relative shrink-0 text-[color:var(--primary\/99,#f9ffe9)] text-[length:var(--typography\/size\/xl,18px)] whitespace-nowrap" data-node-id="I697:5275;685:5136">
447
+ <p className="leading-[normal]">Pre-conversation</p>
448
+ </div>
449
+ <div className="h-[11px] shrink-0 w-[4px]" data-name="spacer" data-node-id="I697:5275;685:5137" />
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ <div className="absolute bg-[var(--primary\/10,#102000)] border border-[var(--primary\/20,#1f3700)] border-solid content-stretch flex items-center justify-center left-[950.04px] overflow-clip px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] rounded-[12px] top-[1000px]" data-name="Clock" data-node-id="38:3464">
455
+ <div className="flex flex-col font-['Poppins:SemiBold',sans-serif] h-[41.521px] justify-center leading-[0] not-italic relative shrink-0 text-[18px] text-[color:var(--primary\/80,#97d945)] text-center w-[89.476px]" data-node-id="38:3465">
456
+ <p className="leading-[normal]">15:00</p>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ <a className="bg-[var(--neutral\/99,#fdfcf5)] border-[#e5e7eb] border-l border-solid content-stretch cursor-pointer flex flex-col h-[1319px] items-start overflow-clip pl-px relative rounded-[8px] shrink-0 w-[354px]" data-name="RightControlPanel" data-node-id="38:3466">
461
+ <div className="border-[var(--neutral\/99,#fdfcf5)] border-b border-solid h-[78px] shrink-0 sticky top-0 w-[353px]" data-name="Container" data-node-id="38:3467">
462
+ <div className="bg-clip-padding border-0 border-[transparent] border-solid content-stretch flex items-center justify-between pb-px px-[24px] relative size-full">
463
+ <div className="h-[27px] relative shrink-0 w-[187px]" data-name="Heading 2" data-node-id="38:3468">
464
+ <div className="bg-clip-padding border-0 border-[transparent] border-solid relative size-full">
465
+ <div className="-translate-y-full absolute flex flex-col font-['Fraunces:Regular',sans-serif] font-normal justify-end leading-[0] left-[calc(50%-93.5px)] text-[28px] text-[color:var(--neutral\/20,#30312c)] text-left top-[29px] w-[239.96px]" data-node-id="38:3469" style={{ fontVariationSettings: "'SOFT' 0, 'WONK' 1" }}>
466
+ <p className="leading-[normal]">Studio Controls</p>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ <div className="bg-[var(--neutral\/99,#fdfcf5)] h-[1695px] relative shrink-0 w-[353px]" data-name="StudioControlsMenu" data-node-id="875:5855">
473
+ <div className="bg-clip-padding border-0 border-[transparent] border-solid content-stretch cursor-pointer flex flex-col items-start relative size-full">
474
+ <div className="border-[var(--neutral\/95,#f2f1e9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-center justify-center relative shrink-0 w-full" data-name="Discourse Accordion Item (Info Panel)" data-node-id="I875:5855;38:8233" role="button" tabIndex="0">
475
+ <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;38:8233;38:8141">
476
+ <div className="content-stretch flex flex-col items-center justify-center overflow-clip relative shrink-0" data-name="icon- Configure Settings" data-node-id="I875:5855;38:8233;38:8142">
477
+ <div className="h-[40.5px] relative shrink-0 w-[26.667px]" data-node-id="I875:5855;38:8233;38:8142;925:12548">
478
+ <img alt="" className="absolute block max-w-none size-full" src={imgFrame4892} />
479
+ </div>
480
+ </div>
481
+ <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Poppins:Medium',sans-serif)] leading-[normal] min-h-px min-w-px not-italic overflow-hidden relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;38:8233;38:8143">
482
+ Scenario Settings
483
+ </p>
484
+ <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;38:8233;38:8144">
485
+ <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;38:8233;38:8144;2706:13883">
486
+ <div className="absolute inset-[-20.83%_-10.42%]">
487
+ <img alt="" className="block max-w-none size-full" src={imgVector10} />
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ <div className="bg-[#fffdfa] border border-[#e5e7eb] border-solid content-stretch flex flex-col gap-[10px] items-start p-[20px] relative rounded-[6px] shrink-0 w-[324px]" data-name="panel- Information Slot Contents" data-node-id="I875:5855;38:8233;38:8145">
493
+ <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Scenarios type" data-node-id="I875:5855;38:8233;38:8145;939:5894">
494
+ <div className="flex flex-col font-['Poppins:SemiBold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[16px] text-[color:var(--neutral\/20,#30312c)] text-left w-[207px]" data-node-id="I875:5855;38:8233;38:8145;939:5895">
495
+ <p className="leading-[normal]">UX Interview Practice</p>
496
+ </div>
497
+ <div className="content-stretch flex flex-col h-[33px] items-start relative shrink-0" data-name="List" data-node-id="I875:5855;38:8233;38:8145;939:5896">
498
+ <div className="content-stretch flex flex-col items-start relative shrink-0 w-[275px]" data-name="List Item" data-node-id="I875:5855;38:8233;38:8145;939:5897">
499
+ <p className="font-['Inter:Regular',sans-serif] font-normal leading-[0] not-italic relative shrink-0 text-[#4a5565] text-[0px] text-left w-[293px]" data-node-id="I875:5855;38:8233;38:8145;939:5898">
500
+ <span className="font-['Poppins:Medium',sans-serif] leading-[30px] text-[#263515] text-[14px]">Focus</span>
501
+ <span className="font-['Poppins:Regular',sans-serif] leading-[30px] text-[#30312c] text-[14px]">:</span>
502
+ <span className="leading-[30px] text-[#30312c] text-[18px]">{` `}</span>
503
+ <span className="font-['Poppins:Regular',sans-serif] leading-[30px] text-[#30312c] text-[14px]">Technical Communication</span>
504
+ </p>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ <div className="content-stretch flex flex-col gap-[8px] items-start relative shrink-0 w-full" data-name="Ai Settings" data-node-id="I875:5855;38:8233;38:8145;939:5899">
509
+ <div className="h-[23px] relative shrink-0 w-[284px]" data-name="Heading 5" data-node-id="I875:5855;38:8233;38:8145;939:5900">
510
+ <p className="absolute font-['Poppins:Medium',sans-serif] leading-[normal] left-0 not-italic text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left top-[-1px] whitespace-pre" data-node-id="I875:5855;38:8233;38:8145;939:5901">{`Scenario Settings`}</p>
511
+ </div>
512
+ <div className="bg-[var(--neutral\/90,#e3e3db)] content-stretch flex flex-col items-center p-[var(--spacing\/md,16px)] relative rounded-[8px] shrink-0 w-full" data-name="Interviewer Settings" data-node-id="I875:5855;38:8233;38:8145;939:5902">
513
+ <div className="content-stretch flex flex-col gap-[10px] items-start p-[var(--spacing\/sm,8px)] relative shrink-0" data-name="List" data-node-id="I875:5855;38:8233;38:8145;939:5903">
514
+ <div className="content-stretch flex gap-[2px] items-center relative shrink-0 w-full" data-name="List Item" data-node-id="I875:5855;38:8233;38:8145;939:5904">
515
+ <p className="flex-[1_0_0] font-['Poppins:Medium',sans-serif] leading-[normal] min-h-px min-w-px not-italic relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left whitespace-pre-wrap" data-node-id="I875:5855;38:8233;38:8145;939:5905">{`Conversation Flow: `}</p>
516
+ <div className="bg-[rgba(81,133,0,0.35)] content-stretch flex h-[29px] items-center justify-center px-[10px] py-[4px] relative rounded-[4px] shrink-0" data-name="Badge" data-node-id="I875:5855;38:8233;38:8145;939:5906">
517
+ <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--secondary\/40,#54643f)] text-left whitespace-nowrap" data-node-id="I875:5855;38:8233;38:8145;939:5906;930:1723">
518
+ Beginner
519
+ </p>
520
+ </div>
521
+ </div>
522
+ <div className="content-stretch flex items-center justify-between relative shrink-0 w-[244px]" data-name="List Item" data-node-id="I875:5855;38:8233;38:8145;939:5907">
523
+ <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left whitespace-pre" data-node-id="I875:5855;38:8233;38:8145;939:5908">{`Question Complexity: `}</p>
524
+ <div className="bg-[rgba(81,133,0,0.35)] content-stretch flex items-center justify-center px-[var(--p-2\,5,10px)] py-[4px] relative rounded-[4px] shrink-0" data-name="Badge" data-node-id="I875:5855;38:8233;38:8145;939:5909">
525
+ <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--secondary\/40,#54643f)] text-left whitespace-nowrap" data-node-id="I875:5855;38:8233;38:8145;939:5909;930:1723">
526
+ Beginner
527
+ </p>
528
+ </div>
529
+ </div>
530
+ <div className="content-stretch flex items-center justify-between relative shrink-0 w-full" data-name="List Item" data-node-id="I875:5855;38:8233;38:8145;939:5910">
531
+ <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[143.956px] whitespace-pre-wrap" data-node-id="I875:5855;38:8233;38:8145;939:5911">{`Response Pacing: `}</p>
532
+ <div className="bg-[rgba(81,133,0,0.35)] content-stretch flex items-center px-[10px] py-[4px] relative rounded-[4px] shrink-0" data-name="Badge" data-node-id="I875:5855;38:8233;38:8145;939:5912">
533
+ <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--secondary\/40,#54643f)] text-left whitespace-nowrap" data-node-id="I875:5855;38:8233;38:8145;939:5912;930:1723">
534
+ Beginner
535
+ </p>
536
+ </div>
537
+ </div>
538
+ <div className="content-stretch flex items-center justify-between relative shrink-0 w-full" data-name="List Item" data-node-id="I875:5855;38:8233;38:8145;939:5913">
539
+ <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left whitespace-pre" data-node-id="I875:5855;38:8233;38:8145;939:5914">{`Interview Tone: `}</p>
540
+ <div className="bg-[rgba(81,133,0,0.35)] content-stretch flex h-[29px] items-center justify-between px-[10px] py-[4px] relative rounded-[4px] shrink-0 w-[83px]" data-name="Badge" data-node-id="I875:5855;38:8233;38:8145;939:5915">
541
+ <p className="font-['Poppins:Medium',sans-serif] leading-[normal] not-italic relative shrink-0 text-[14px] text-[color:var(--secondary\/40,#54643f)] text-left whitespace-nowrap" data-node-id="I875:5855;38:8233;38:8145;939:5915;930:1723">
542
+ Beginner
543
+ </p>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ <div className="border-[var(--secondary\/95,#e5f7c9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-center justify-center relative shrink-0 w-full" data-name="Discourse Accordion Item ( Audio Output Panel)" data-node-id="I875:5855;38:8234" role="button" tabIndex="0">
552
+ <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;38:8234;38:8153">
553
+ <div className="content-stretch flex flex-col items-center justify-center relative shrink-0" data-name="icon- Audio Output" data-node-id="I875:5855;38:8234;38:8154">
554
+ <div className="flex items-center justify-center relative shrink-0">
555
+ <div className="-scale-y-100 flex-none rotate-180">
556
+ <div className="relative size-[35px]" data-name="Icon" data-node-id="I875:5855;38:8234;38:8154;38:9813">
557
+ <img alt="" className="absolute block max-w-none size-full" src={imgIcon} />
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Poppins:Medium',sans-serif)] leading-[normal] min-h-px min-w-px not-italic overflow-hidden relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;38:8234;38:8155">
563
+ Audio Output
564
+ </p>
565
+ <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;38:8234;38:8156">
566
+ <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;38:8234;38:8156;2706:13883">
567
+ <div className="absolute inset-[-20.83%_-10.42%]">
568
+ <img alt="" className="block max-w-none size-full" src={imgVector10} />
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ <div className="content-stretch flex flex-col gap-[var(--spacing\/lg,0px)] items-center justify-center p-[var(--spacing\/md,16px)] relative shrink-0" data-name="panel- Audio Output controls" data-node-id="I875:5855;38:8234;38:8157">
574
+ <div className="content-stretch flex flex-col h-[66px] items-center justify-between px-[20px] py-[40px] relative shrink-0 w-[354px]" data-name="Audio Output Controls Container" data-node-id="I875:5855;38:8234;38:8157;38:8308">
575
+ <div className="content-stretch flex flex-col items-start relative shrink-0 w-full" data-name="audio output slider" data-node-id="I875:5855;38:8234;38:8157;38:8309">
576
+ <div className="h-[6px] relative shrink-0 w-[314px]" data-name="slide container" data-node-id="I875:5855;38:8234;38:8157;38:8310">
577
+ <div className="absolute bg-[var(--neutral\/95,#f2f1e9)] content-stretch flex gap-[var(--p-0,0px)] items-center left-[5px] p-[var(--p-0,0px)] rounded-[var(--radius\/rounded-full,9999px)] top-0 w-[290px]" data-name="Slider" data-node-id="I875:5855;38:8234;38:8157;38:8311">
578
+ <div className="bg-[var(--secondary\/70,#a0b187)] h-[6px] rounded-[var(--radius\/rounded-full,9999px)] shrink-0 w-[201px]" data-name="Range" data-node-id="I875:5855;38:8234;38:8157;38:8311;38:7989" />
579
+ <div className="absolute h-[21px] left-[191px] top-[-10.5px] w-[20px]" data-name="Slider Button" data-node-id="I875:5855;38:8234;38:8157;38:8311;38:7990">
580
+ <div className="-translate-x-1/2 absolute bg-[var(--neutral\/99,#fdfcf5)] border-2 border-[var(--secondary\/50,#6c7d56)] border-solid h-[24.706px] left-1/2 rounded-[var(--rounded-full,9999px)] shadow-[var(--shadow\/md\/layer-1\/x,0px)_var(--shadow\/md\/layer-1\/y,2px)_var(--shadow\/md\/layer-1\/blur,4px)_var(--shadow\/md\/layer-1\/spread,-2px)_var(--shadow,black),var(--shadow\/md\/layer-2\/x,0px)_var(--shadow\/md\/layer-2\/y,4px)_var(--shadow\/md\/layer-2\/blur,6px)_var(--shadow\/md\/layer-2\/spread,-1px)_var(--shadow,black)] top-0 w-[24px]" data-name=".Slider Item" data-node-id="I875:5855;38:8234;38:8157;38:8311;38:7991" />
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ <div className="border-[var(--neutral\/95,#f2f1e9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-start relative shrink-0 w-[353px]" data-name="Discourse Accordion Item ( EQ & Slider container" data-node-id="I875:5855;38:8235" role="button" tabIndex="0">
589
+ <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;38:8235;38:8165">
590
+ <div className="content-stretch flex flex-col items-start pt-[4px] relative shrink-0 size-[40px]" data-name="icon- Microphone" data-node-id="I875:5855;38:8235;38:8166">
591
+ <div className="relative shrink-0 size-[40px]" data-name="Icon" data-node-id="I875:5855;38:8235;38:8166;38:9821">
592
+ <img alt="" className="absolute block max-w-none size-full" src={imgIcon1} />
593
+ </div>
594
+ </div>
595
+ <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Poppins:Medium',sans-serif)] leading-[normal] min-h-px min-w-px not-italic overflow-hidden relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;38:8235;38:8167">
596
+ Microphone Output
597
+ </p>
598
+ <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;38:8235;38:8168">
599
+ <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;38:8235;38:8168;2706:13883">
600
+ <div className="absolute inset-[-20.83%_-10.42%]">
601
+ <img alt="" className="block max-w-none size-full" src={imgVector11} />
602
+ </div>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ <div className="content-stretch flex flex-col gap-[var(--spacing\/lg,24px)] items-center p-[var(--spacing\/md,16px)] relative shrink-0" data-name="panel- Eq & Slide container" data-node-id="I875:5855;38:8235;38:8169">
607
+ <div className="h-[24px] relative shrink-0 w-[289px]" data-name="Out.put Eq" data-node-id="I875:5855;38:8235;38:8169;38:8315">
608
+ <div className="absolute inset-[-7.73%_-0.8%_-7.71%_-0.64%]">
609
+ <img alt="" className="block max-w-none size-full" src={imgOutPutEq} />
610
+ </div>
611
+ </div>
612
+ <div className="content-stretch flex flex-col h-[48px] items-center justify-center relative shrink-0 w-[305px]" data-name="Slide output container" data-node-id="I875:5855;38:8235;38:8169;38:8317">
613
+ <div className="content-stretch flex flex-col items-start relative shrink-0 w-full" data-name="microphone output slide" data-node-id="I875:5855;38:8235;38:8169;38:8318">
614
+ <div className="h-[6px] relative shrink-0 w-[314px]" data-name="Mic Input Gain Control" data-node-id="I875:5855;38:8235;38:8169;38:8319">
615
+ <div className="absolute bg-[var(--neutral\/95,#f2f1e9)] content-stretch flex gap-[var(--p-0,0px)] items-center left-[5px] p-[var(--p-0,0px)] rounded-[var(--radius\/rounded-full,9999px)] top-0 w-[290px]" data-name="Slider" data-node-id="I875:5855;38:8235;38:8169;38:8320">
616
+ <div className="bg-[var(--secondary\/70,#a0b187)] h-[6px] rounded-[var(--radius\/rounded-full,9999px)] shrink-0 w-[201px]" data-name="Range" data-node-id="I875:5855;38:8235;38:8169;38:8320;38:7989" />
617
+ <div className="absolute h-[21px] left-[191px] top-[-10.5px] w-[20px]" data-name="Slider Button" data-node-id="I875:5855;38:8235;38:8169;38:8320;38:7990">
618
+ <div className="-translate-x-1/2 absolute bg-[var(--neutral\/99,#fdfcf5)] border-2 border-[var(--secondary\/50,#6c7d56)] border-solid h-[24.706px] left-1/2 rounded-[var(--rounded-full,9999px)] shadow-[var(--shadow\/md\/layer-1\/x,0px)_var(--shadow\/md\/layer-1\/y,2px)_var(--shadow\/md\/layer-1\/blur,4px)_var(--shadow\/md\/layer-1\/spread,-2px)_var(--shadow,black),var(--shadow\/md\/layer-2\/x,0px)_var(--shadow\/md\/layer-2\/y,4px)_var(--shadow\/md\/layer-2\/blur,6px)_var(--shadow\/md\/layer-2\/spread,-1px)_var(--shadow,black)] top-0 w-[24px]" data-name=".Slider Item" data-node-id="I875:5855;38:8235;38:8169;38:8320;38:7991" />
619
+ </div>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ </div>
625
+ </div>
626
+ <div className="border-[var(--neutral\/95,#f2f1e9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-center justify-center relative shrink-0 w-full" data-name="Discourse Accordion Item ( A/V Record )" data-node-id="I875:5855;855:5501" role="button" tabIndex="0">
627
+ <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;855:5501;38:8177">
628
+ <div className="content-stretch flex flex-col h-[40px] items-center justify-center p-[3px] relative shrink-0" data-name="icon- Record" data-node-id="I875:5855;855:5501;38:8178">
629
+ <div className="relative shrink-0 size-[29.167px]" data-name="SVGRepo_iconCarrier" data-node-id="I875:5855;855:5501;38:8178;38:9844">
630
+ <div className="absolute inset-[-3.43%]">
631
+ <img alt="" className="block max-w-none size-full" src={imgSvgRepoIconCarrier2} />
632
+ </div>
633
+ </div>
634
+ </div>
635
+ <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Poppins:Medium',sans-serif)] leading-[normal] min-h-px min-w-px not-italic overflow-hidden relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;855:5501;38:8179">
636
+ A/V Recording
637
+ </p>
638
+ <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;855:5501;38:8180">
639
+ <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;855:5501;38:8180;2706:13883">
640
+ <div className="absolute inset-[-20.83%_-10.42%]">
641
+ <img alt="" className="block max-w-none size-full" src={imgVector12} />
642
+ </div>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ <div className="content-stretch flex flex-col gap-[var(--spacing\/lg,0px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="panel- A/V radio selection" data-node-id="I875:5855;855:5501;38:8181">
647
+ <div className="content-stretch cursor-pointer flex flex-col gap-[var(--p-3,12px)] items-start max-w-[576px] min-w-[144px] p-[var(--p-0,0px)] relative shrink-0 w-[280px]" data-name="Radio Group" data-node-id="I875:5855;855:5501;38:8181;38:8324">
648
+ <div className="content-stretch flex gap-[var(--p-2,8px)] items-start p-[var(--p-0,0px)] relative shrink-0 w-full" data-name=".Radio Group Item" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51111" role="button" tabIndex="0">
649
+ <div className="content-stretch flex flex-[1_0_0] flex-col gap-[var(--p-1\,5,6px)] items-start min-h-px min-w-px pb-[var(--p-0,0px)] pt-px px-[var(--p-0,0px)] relative" data-name="Content" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51111;7095:70573">
650
+ <p className="font-[family-name:var(--font\/family\/font-sans,'Poppins:Regular',sans-serif)] leading-[normal] not-italic relative shrink-0 text-[color:var(--neutral\/20,#30312c)] text-[length:var(--text-sm,14px)] text-left w-full whitespace-pre-wrap" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51111;7095:70574">{`Record just audio `}</p>
651
+ </div>
652
+ <div className="relative shadow-[var(--shadow\/xs\/layer-1\/x,0px)_var(--shadow\/xs\/layer-1\/y,1px)_var(--shadow\/xs\/layer-1\/blur,2px)_0px_var(--shadow,black)] shrink-0 size-[16px]" data-name=".Radio Group Radio Toggle" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51111;7095:70576">
653
+ <div className="absolute border-3 border-[var(--secondary\/70,#a0b187)] border-solid left-0 rounded-[var(--radius\/rounded-full,9999px)] size-[var(--width\/w-4,16px)] top-0" data-name="base" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51111;7095:70576;2780:51100" />
654
+ </div>
655
+ </div>
656
+ <div className="content-stretch flex gap-[var(--p-2,8px)] items-start p-[var(--p-0,0px)] relative shrink-0 w-full" data-name=".Radio Group Item" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51112" role="button" tabIndex="0">
657
+ <div className="content-stretch flex flex-[1_0_0] flex-col gap-[var(--p-1\,5,6px)] items-start min-h-px min-w-px pb-[var(--p-0,0px)] pt-px px-[var(--p-0,0px)] relative" data-name="Content" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51112;7095:70573">
658
+ <p className="font-[family-name:var(--font\/family\/font-sans,'Poppins:Regular',sans-serif)] leading-[normal] not-italic relative shrink-0 text-[color:var(--neutral\/20,#30312c)] text-[length:var(--text-sm,14px)] text-left w-full whitespace-pre-wrap" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51112;7095:70574">{`Record video & audio `}</p>
659
+ </div>
660
+ <div className="relative shadow-[var(--shadow\/xs\/layer-1\/x,0px)_var(--shadow\/xs\/layer-1\/y,1px)_var(--shadow\/xs\/layer-1\/blur,2px)_0px_var(--shadow,black)] shrink-0 size-[16px]" data-name=".Radio Group Radio Toggle" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51112;7095:70576">
661
+ <div className="absolute bg-[var(--secondary\/50,#6c7d56)] border-[length:var(--border-width\/w-100,1px)] border-[var(--secondary\/80,#bbcda1)] border-solid left-0 rounded-[var(--radius\/rounded-full,9999px)] size-[var(--width\/w-4,16px)] top-0" data-name="base" data-node-id="I875:5855;855:5501;38:8181;38:8324;2780:51112;7095:70576;2780:51100" />
662
+ </div>
663
+ </div>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ <div className="border-[var(--neutral\/95,#f2f1e9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-start relative shrink-0 w-full" data-name="Discourse Accordion Item ( Show Timer )" data-node-id="I875:5855;38:8237" role="button" tabIndex="0">
668
+ <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;38:8237;38:8190">
669
+ <div className="content-stretch flex flex-col items-center justify-center overflow-clip p-[5px] relative shrink-0 size-[40px]" data-name="icon- Timer" data-node-id="I875:5855;38:8237;38:8191">
670
+ <div className="relative shrink-0 size-[27px]" data-name="SVGRepo_iconCarrier" data-node-id="I875:5855;38:8237;38:8191;38:9818">
671
+ <div className="absolute inset-[-4.63%]">
672
+ <img alt="" className="block max-w-none size-full" src={imgSvgRepoIconCarrier3} />
673
+ </div>
674
+ </div>
675
+ </div>
676
+ <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Poppins:Medium',sans-serif)] leading-[normal] min-h-px min-w-px not-italic overflow-hidden relative text-[14px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;38:8237;38:8192">
677
+ Display timer
678
+ </p>
679
+ <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;38:8237;38:8193">
680
+ <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;38:8237;38:8193;2706:13883">
681
+ <div className="absolute inset-[-20.83%_-10.42%]">
682
+ <img alt="" className="block max-w-none size-full" src={imgVector10} />
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ <div className="content-stretch flex items-center justify-between px-[var(--spacing\/xl,32px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="panel- clock display" data-node-id="I875:5855;38:8237;38:8194">
688
+ <div className="flex flex-col font-['Poppins:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left whitespace-nowrap" data-node-id="I875:5855;38:8237;38:8194;38:8326">
689
+ <p className="leading-[normal] mb-0 whitespace-pre">{`Hide timer to create more `}</p>
690
+ <p className="leading-[normal] whitespace-pre">realistic interview</p>
691
+ </div>
692
+ <div className="bg-[var(--neutral\/90,#e3e3db)] content-stretch flex h-[20px] items-center p-[var(--p-0\,5,2px)] relative rounded-[var(--radius\/rounded-full,9999px)] shadow-[var(--shadow\/2xs\/layer-1\/x,0px)_var(--shadow\/2xs\/layer-1\/y,1px)_var(--shadow\/2xs\/layer-1\/blur,2px)_0px_var(--shadow,black)] shrink-0 w-[36px]" data-name="Discourser AI Switch Toggle" data-node-id="I875:5855;38:8237;38:8194;38:8327">
693
+ <div className="relative shrink-0 size-[16px]" data-name="Switch" data-node-id="I875:5855;38:8237;38:8194;38:8327;38:8123">
694
+ <div className="absolute inset-[-6.25%_-12.5%_-18.75%_-12.5%]">
695
+ <img alt="" className="block max-w-none size-full" src={imgSwitch} />
696
+ </div>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </div>
701
+ <div className="border-[var(--neutral\/95,#f2f1e9)] border-b border-solid content-stretch flex flex-col gap-[var(--p-0,0px)] items-center justify-center relative shrink-0 w-full" data-name="Discourse Accordion Item ( Hide Interview )" data-node-id="I875:5855;38:8238" role="button" tabIndex="0">
702
+ <div className="content-stretch flex gap-[var(--p-4,16px)] items-center justify-center px-[var(--spacing\/md,16px)] py-[var(--spacing\/sm,8px)] relative shrink-0 w-full" data-name="AccordionTrigger" data-node-id="I875:5855;38:8238;38:8202">
703
+ <div className="content-stretch flex flex-col items-center justify-center overflow-clip p-px relative shrink-0 size-[40px]" data-name="icon- ScreenView" data-node-id="I875:5855;38:8238;38:8203">
704
+ <div className="relative shrink-0 size-[24.891px]" data-name="SVGRepo_iconCarrier" data-node-id="I875:5855;38:8238;38:8203;38:9826">
705
+ <img alt="" className="absolute block max-w-none size-full" src={imgSvgRepoIconCarrier4} />
706
+ </div>
707
+ </div>
708
+ <p className="flex-[1_0_0] font-[family-name:var(--font\/family\/font-sans,'Inter:Medium',sans-serif)] font-[var(--font\/weight\/font-medium,500)] leading-[0] min-h-px min-w-px not-italic overflow-hidden relative text-[20px] text-[color:var(--neutral\/20,#30312c)] text-ellipsis text-left whitespace-nowrap" data-node-id="I875:5855;38:8238;38:8204">
709
+ <span className="font-['Poppins:Medium',sans-serif] leading-[normal] text-[#30312c] text-[14px]">Hide</span>
710
+ <span className="leading-[normal]">{` `}</span>
711
+ <span className="font-['Poppins:Medium',sans-serif] leading-[normal] text-[14px]">Interviewers</span>
712
+ </p>
713
+ <div className="overflow-clip relative shrink-0 size-[24px]" data-name="Lucide Icons / chevron-down" data-node-id="I875:5855;38:8238;38:8205">
714
+ <div className="absolute bottom-[37.5%] left-1/4 right-1/4 top-[37.5%]" data-name="Vector" data-node-id="I875:5855;38:8238;38:8205;2706:13883">
715
+ <div className="absolute inset-[-20.83%_-10.42%]">
716
+ <img alt="" className="block max-w-none size-full" src={imgVector11} />
717
+ </div>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ <div className="content-stretch flex items-center justify-between py-[var(--spacing\/sm,8px)] relative shrink-0 w-[290.007px]" data-name="panel- hide interview video" data-node-id="I875:5855;38:8238;38:8206">
722
+ <div className="font-['Poppins:Regular',sans-serif] leading-[0] not-italic relative shrink-0 text-[14px] text-[color:var(--neutral\/20,#30312c)] text-left w-[244.007px] whitespace-pre-wrap" data-node-id="I875:5855;38:8238;38:8206;38:8329">
723
+ <p className="leading-[normal] mb-0">{`Switch to off to hide video of interviewers if it is too `}</p>
724
+ <p className="leading-[normal]">distracting</p>
725
+ </div>
726
+ <div className="bg-[var(--secondary\/80,#bbcda1)] content-stretch flex h-[20px] items-center justify-end p-[var(--p-0\,5,2px)] relative rounded-[var(--radius\/rounded-full,9999px)] shadow-[var(--shadow\/2xs\/layer-1\/x,0px)_var(--shadow\/2xs\/layer-1\/y,1px)_var(--shadow\/2xs\/layer-1\/blur,2px)_0px_var(--shadow,black)] shrink-0 w-[36px]" data-name="Discourser AI Switch Toggle" data-node-id="I875:5855;38:8238;38:8206;38:8330">
727
+ <div className="relative shrink-0 size-[16px]" data-name="Switch" data-node-id="I875:5855;38:8238;38:8206;38:8330;38:8127">
728
+ <div className="absolute inset-[-6.25%_-12.5%_-18.75%_-12.5%]">
729
+ <img alt="" className="block max-w-none size-full" src={imgSwitch1} />
730
+ </div>
731
+ </div>
732
+ </div>
733
+ </div>
734
+ </div>
735
+ </div>
736
+ </div>
737
+ </a>
738
+ </div>
739
+ </div>
740
+ );
741
+ }
742
+ ```
743
+
744
+ ---
745
+
746
+ ## Tool metadata (appended by figma-remote)
747
+
748
+ ```
749
+ SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
750
+ 1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
751
+ 2. Convert React syntax to the target framework/library
752
+ 3. Transform all Tailwind classes to the target styling system while preserving exact visual design
753
+ 4. Follow the project's existing patterns and conventions
754
+ DO NOT install any Tailwind as a dependency unless the user instructs you to do so.
755
+
756
+ Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.
757
+
758
+ These styles are contained in the design: bodyMdmReg: Font(family: "Poppins", style: Regular, size: 14, weight: 400, lineHeight: 100, letterSpacing: 0), bodyMdmMed: Font(family: "Poppins", style: Medium, size: 14, weight: 500, lineHeight: 100, letterSpacing: 0), bodyLrg: Font(family: "Poppins", style: Medium, size: 18, weight: 500, lineHeight: 100, letterSpacing: 0), headlineMedium: Font(family: "Fraunces", style: Regular, size: 28, weight: 400, lineHeight: 100, letterSpacing: 0), bodyLrgReg: Font(family: "Poppins", style: Regular, size: 18, weight: 400, lineHeight: 100, letterSpacing: 0), bodyLrgSmBld: Font(family: "Poppins", style: SemiBold, size: 18, weight: 600, lineHeight: 100, letterSpacing: 0), titleMedium: Font(family: "Poppins", style: SemiBold, size: 16, weight: 600, lineHeight: 100, letterSpacing: 0), Dsktp/Inter/Button/Regular/18: Font(family: "Inter", style: Regular, size: 18, weight: 400, lineHeight: 30, letterSpacing: 0), Primary/700: #6B7A1F, Dsktp/Inter/BodyP/Medium/20: Font(family: "Inter", style: Medium, size: 20, weight: 500, lineHeight: 100, letterSpacing: 0).
759
+
760
+ Images and SVGs will be stored as constants. Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.
761
+ ```
762
+
763
+ ## Component descriptions (from Figma)
764
+
765
+ | Component | Node ID | Documentation |
766
+ |-----------|---------|---------------|
767
+ | Lucide Icons / layout-dashboard | 38:217 | https://lucide.dev/icons/ |
768
+ | Lucide Icons / book-open-text | 38:256 | https://lucide.dev/icons/ |
769
+ | Lucide Icons / message-square | 38:30 | https://lucide.dev/icons/ |
770
+ | Lucide Icons / hand-helping | 38:26 | https://lucide.dev/icons/ |
771
+ | Lucide Icons / user-round | 38:28 | https://lucide.dev/icons/ |
772
+ | Lucide Icons / stretch-vertical | 38:289 | https://lucide.dev/icons/ |
773
+ | Lucide Icons / arrow-right | 38:375 | https://lucide.dev/icons/ |
774
+ | Discourse Accordion Item (Info Panel) | 38:8134 | https://ui.shadcn.com/docs/components/accordion |
775
+ | Lucide Icons / chevron-down | 38:610 | https://lucide.dev/icons/ |
776
+ | **Badge** | **930:1972** | DDS Badge component — recipe: badge · Variants: solid \| surface \| subtle \| outline \| rating · Sizes: sm \| md \| lg \| xl \| 2xl · Color palettes: primary \| secondary \| tertiary \| neutral \| error · Docs: https://storybook.discourser-design-system.com/?path=/docs/components-badge--docs |
777
+ | Discourse Accordion Item ( Audio Output Panel) | 38:8146 | https://ui.shadcn.com/docs/components/accordion |
778
+ | Discourse Accordion Item ( EQ & Slider container | 38:8158 | https://ui.shadcn.com/docs/components/accordion |
779
+ | Discourse Accordion Item ( A/V Record ) | 38:8170 | https://ui.shadcn.com/docs/components/accordion |
780
+ | Radio Group | 38:929 | https://ui.shadcn.com/docs/components/radio-group |
781
+ | .Radio Group Item | 38:806 | https://ui.shadcn.com/docs/components/radio-group |
782
+ | .Radio Group Radio Toggle | 38:778 | https://ui.shadcn.com/docs/components/radio-group |
783
+ | Discourse Accordion Item ( Show Timer ) | 38:8182 | https://ui.shadcn.com/docs/components/accordion |
784
+ | Discourse Accordion Item ( Hide Interview ) | 38:8195 | https://ui.shadcn.com/docs/components/accordion |
785
+
786
+ ## Key observations
787
+
788
+ - **Badge node 930:1972** description is live in Figma — confirms the DDS component set was created successfully and the description update propagated
789
+ - **4 Badge instances** on page (nodes 939:5906, 939:5909, 939:5912, 939:5915) still render as raw frames with `bg-[rgba(81,133,0,0.35)]` and `text-[color:var(--secondary/40,#54643f)]` — these are pre-existing page instances not yet linked to the new component set
790
+ - Asset URLs use `figma.com/api/mcp/asset/` (7-day expiry) replacing previous `localhost:3845` URLs from figma-desktop
791
+ - The MCP output was truncated at 25000 tokens; the component code above is complete up to that point