@discourser/design-system 0.24.0 → 0.25.0

package/dist/{chunk-VN2QX6S7.js → chunk-UHSL4N44.js}

@@ -3,7 +3,7 @@ import { ark as ark$1 } from '@ark-ui/react/factory';
 import { mergeProps, createContext } from '@ark-ui/react/utils';
 import { forwardRef, useMemo, createContext as createContext$1, useContext, Fragment as Fragment$1, useState, useEffect } from 'react';
 import { styled, createStyleContext, Stack, VStack, HStack, Box, Circle as Circle$1, Center } from 'styled-system/jsx';
-import { group, absoluteCenter, spinner, button, input, inputAddon, inputGroup, textarea, heading, badge, toast, card, dialog, switchComponent, accordion, drawer, tabs, checkbox, radioGroup, select, slider, avatar, progress, skeleton, popover, tooltip, breadcrumb, contentCard, stepper, scenarioCard, navigationMenu, scenarioSettings, scenarioQueue } from 'styled-system/recipes';
+import { group, absoluteCenter, spinner, button, input, inputAddon, inputGroup, textarea, heading, badge, toast, card, dialog, switchComponent, accordion, drawer, tabs, checkbox, radioGroup, select, slider, avatar, progress, skeleton, popover, tooltip, breadcrumb, contentCard, stepper, scenarioCard, navigationMenu, scenarioSettings, studioControls, scenarioQueue } from 'styled-system/recipes';
 import { ark } from '@ark-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Field } from '@ark-ui/react/field';
@@ -1271,7 +1271,7 @@ var TimerIcon = (props) => /* @__PURE__ */ jsx(
       {
         d: "M6.27333 12C4.83741 14.1451 4 16.7248 4 19.5C4 26.9559 10.0442 33 17.5 33C24.9559 33 31 26.9559 31 19.5C31 12.0442 24.9559 6 17.5 6V10.5M17.5 19.5L11.5 13.5",
         stroke: "currentColor",
-        strokeWidth: "2",
+        strokeWidth: "3",
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
@@ -1368,7 +1368,7 @@ var MicrophoneIcon = (props) => /* @__PURE__ */ jsxs(
         {
           d: "M20 35.6665V40.6665",
           stroke: "currentColor",
-          strokeWidth: "2",
+          strokeWidth: "3",
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
@@ -1378,7 +1378,7 @@ var MicrophoneIcon = (props) => /* @__PURE__ */ jsxs(
         {
           d: "M31.6666 20.6665V23.9998C31.6666 27.094 30.4374 30.0615 28.2495 32.2494C26.0616 34.4373 23.0941 35.6665 19.9999 35.6665C16.9057 35.6665 13.9383 34.4373 11.7503 32.2494C9.56242 30.0615 8.33325 27.094 8.33325 23.9998V20.6665",
           stroke: "currentColor",
-          strokeWidth: "2",
+          strokeWidth: "3",
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
@@ -1388,7 +1388,7 @@ var MicrophoneIcon = (props) => /* @__PURE__ */ jsxs(
         {
           d: "M25 12.3335C25 9.57207 22.7614 7.3335 20 7.3335C17.2386 7.3335 15 9.57207 15 12.3335V24.0002C15 26.7616 17.2386 29.0002 20 29.0002C22.7614 29.0002 25 26.7616 25 24.0002V12.3335Z",
           stroke: "currentColor",
-          strokeWidth: "2",
+          strokeWidth: "3",
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
@@ -1400,8 +1400,10 @@ var StyledSvg14 = styled(ark$1.svg);
 var AudienceIcon = (props) => /* @__PURE__ */ jsx(
   StyledSvg14,
   {
-    viewBox: "0 0 40 44",
+    viewBox: "3.5 9.5 29 25",
     fill: "currentColor",
+    stroke: "currentColor",
+    strokeWidth: "0.5",
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
     height: "1em",
@@ -1425,7 +1427,7 @@ var RecordIcon = (props) => /* @__PURE__ */ jsxs(
         {
           d: "M27.0624 19.4998C27.0624 21.5134 25.4301 23.1457 23.4166 23.1457C21.4031 23.1457 19.7708 21.5134 19.7708 19.4998C19.7708 17.4863 21.4031 15.854 23.4166 15.854C25.4301 15.854 27.0624 17.4863 27.0624 19.4998Z",
           stroke: "currentColor",
-          strokeWidth: "2"
+          strokeWidth: "3"
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1433,7 +1435,7 @@ var RecordIcon = (props) => /* @__PURE__ */ jsxs(
         {
           d: "M15.3959 19.4998C15.3959 21.5134 13.7636 23.1457 11.7501 23.1457C9.73655 23.1457 8.10425 21.5134 8.10425 19.4998C8.10425 17.4863 9.73655 15.854 11.7501 15.854C13.7636 15.854 15.3959 17.4863 15.3959 19.4998Z",
           stroke: "currentColor",
-          strokeWidth: "2"
+          strokeWidth: "3"
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1441,7 +1443,7 @@ var RecordIcon = (props) => /* @__PURE__ */ jsxs(
         {
           d: "M11.75 23.1455H23.4167",
           stroke: "currentColor",
-          strokeWidth: "2",
+          strokeWidth: "3",
           strokeLinecap: "round"
         }
       ),
@@ -1450,7 +1452,7 @@ var RecordIcon = (props) => /* @__PURE__ */ jsxs(
         {
           d: "M32.1667 19.4998C32.1667 26.3744 32.1667 29.8119 30.0309 31.9474C27.8954 34.0832 24.4579 34.0832 17.5833 34.0832C10.7087 34.0832 7.27136 34.0832 5.13569 31.9474C3 29.8119 3 26.3744 3 19.4998C3 12.6252 3 9.18786 5.13569 7.05219C7.27136 4.9165 10.7087 4.9165 17.5833 4.9165C24.4579 4.9165 27.8954 4.9165 30.0309 7.05219C31.4511 8.47223 31.9269 10.4677 32.0863 13.6665",
           stroke: "currentColor",
-          strokeWidth: "2",
+          strokeWidth: "3",
           strokeLinecap: "round"
         }
       )
@@ -1687,7 +1689,7 @@ var StyledSvg24 = styled(ark$1.svg);
 var AudioSpeakerIcon = (props) => /* @__PURE__ */ jsx(
   StyledSvg24,
   {
-    viewBox: "0 0 40 28",
+    viewBox: "-10 -3 50 34",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     width: "1em",
@@ -2773,6 +2775,368 @@ function ScenarioSettings({
     }
   ) });
 }
+var SETTING_BADGES = [
+  { id: "conversation-flow", label: "Conversation Flow" },
+  { id: "question-complexity", label: "Question Complexity" },
+  { id: "response-pacing", label: "Response Pacing" },
+  { id: "interview-tone", label: "Interview Tone" }
+];
+var RECORDING_OPTIONS = [
+  { value: "no-recording", label: "No Recording" },
+  { value: "audio-only", label: "Record just audio" },
+  { value: "video-audio", label: "Record video & audio" }
+];
+var LEVEL_COLOR_PALETTE = {
+  beginner: "primary",
+  intermediate: "secondary",
+  advanced: "tertiary"
+};
+var ALL_SECTION_IDS2 = [
+  "scenario-settings",
+  "audio-output",
+  "mic-input",
+  "av-recording",
+  "display-timer",
+  "hide-interviewers"
+];
+function StudioControls({
+  scenarioName,
+  scenarioFocus,
+  scenarioLevel,
+  defaultAudioLevel = 75,
+  defaultMicLevel = 75,
+  defaultRecordingMode = "no-recording",
+  defaultShowTimer = true,
+  defaultHideInterviewers = false,
+  onAudioLevelChange,
+  onMicLevelChange,
+  onRecordingModeChange,
+  onTimerChange,
+  onInterviewersChange
+}) {
+  const styles = studioControls();
+  const [audioLevel, setAudioLevel] = useState(defaultAudioLevel);
+  const [micLevel, setMicLevel] = useState(defaultMicLevel);
+  const levelLabel = scenarioLevel.charAt(0).toUpperCase() + scenarioLevel.slice(1);
+  return /* @__PURE__ */ jsx("div", { className: styles.root, children: /* @__PURE__ */ jsxs(Root6, { defaultValue: ALL_SECTION_IDS2, multiple: true, variant: "plain", children: [
+    /* @__PURE__ */ jsxs(Item, { value: "scenario-settings", className: styles.section, children: [
+      /* @__PURE__ */ jsxs(
+        ItemTrigger,
+        {
+          className: styles.sectionTrigger,
+          css: {
+            fontSize: "lg",
+            fontWeight: "medium",
+            borderRadius: "0",
+            py: "4",
+            bg: "neutral.1",
+            color: "onSurface"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: /* @__PURE__ */ jsx(ScenarioIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: styles.triggerLabel, children: "Scenario Settings" }),
+            /* @__PURE__ */ jsx(
+              ItemIndicator,
+              {
+                className: styles.sectionIndicator,
+                css: { color: "primary.7" }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ItemContent, { className: styles.sectionContent, children: /* @__PURE__ */ jsxs("div", { className: styles.infoPanel, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.scenarioMeta, children: [
+          /* @__PURE__ */ jsx("p", { className: styles.scenarioName, children: scenarioName }),
+          /* @__PURE__ */ jsxs("p", { className: styles.scenarioFocus, children: [
+            /* @__PURE__ */ jsx("strong", { children: "Focus" }),
+            ": ",
+            scenarioFocus
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.settingsCard, children: [
+          /* @__PURE__ */ jsx("p", { className: styles.settingsCardHeading, children: "Scenario Settings" }),
+          /* @__PURE__ */ jsx("div", { className: styles.settingsList, children: SETTING_BADGES.map((badge2) => /* @__PURE__ */ jsxs("div", { className: styles.settingsRow, children: [
+            /* @__PURE__ */ jsxs("span", { className: styles.settingsRowLabel, children: [
+              badge2.label,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "rating",
+                colorPalette: LEVEL_COLOR_PALETTE[scenarioLevel],
+                size: "md",
+                children: levelLabel
+              }
+            )
+          ] }, badge2.id)) })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Item, { value: "audio-output", className: styles.section, children: [
+      /* @__PURE__ */ jsxs(
+        ItemTrigger,
+        {
+          className: styles.sectionTrigger,
+          css: {
+            fontSize: "lg",
+            fontWeight: "medium",
+            borderRadius: "0",
+            py: "4",
+            bg: "neutral.1",
+            color: "onSurface"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: /* @__PURE__ */ jsx(AudioSpeakerIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: styles.triggerLabel, children: "Audio Output" }),
+            /* @__PURE__ */ jsx(
+              ItemIndicator,
+              {
+                className: styles.sectionIndicator,
+                css: { color: "primary.7" }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ItemContent, { className: styles.sectionContent, children: /* @__PURE__ */ jsxs("div", { className: styles.sliderPanel, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.sliderLabel, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.sliderLabelText, children: "Volume" }),
+          /* @__PURE__ */ jsxs("span", { className: styles.levelBadge, children: [
+            audioLevel,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Root12,
+          {
+            min: 0,
+            max: 100,
+            value: [audioLevel],
+            colorPalette: "tertiary",
+            onValueChange: ({ value }) => {
+              const next = value[0] ?? audioLevel;
+              setAudioLevel(next);
+              onAudioLevelChange?.(next);
+            },
+            children: /* @__PURE__ */ jsxs(Control4, { className: styles.sliderTrack, children: [
+              /* @__PURE__ */ jsx(Track, { children: /* @__PURE__ */ jsx(Range, {}) }),
+              /* @__PURE__ */ jsx(Thumbs, {})
+            ] })
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Item, { value: "mic-input", className: styles.section, children: [
+      /* @__PURE__ */ jsxs(
+        ItemTrigger,
+        {
+          className: styles.sectionTrigger,
+          css: {
+            fontSize: "lg",
+            fontWeight: "medium",
+            borderRadius: "0",
+            py: "4",
+            bg: "neutral.1",
+            color: "onSurface"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: /* @__PURE__ */ jsx(MicrophoneIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: styles.triggerLabel, children: "Microphone Input" }),
+            /* @__PURE__ */ jsx(
+              ItemIndicator,
+              {
+                className: styles.sectionIndicator,
+                css: { color: "primary.7" }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ItemContent, { className: styles.sectionContent, children: /* @__PURE__ */ jsxs("div", { className: styles.sliderPanel, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.sliderLabel, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.sliderLabelText, children: "Mic Gain" }),
+          /* @__PURE__ */ jsxs("span", { className: styles.levelBadge, children: [
+            micLevel,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Root12,
+          {
+            min: 0,
+            max: 100,
+            value: [micLevel],
+            colorPalette: "tertiary",
+            onValueChange: ({ value }) => {
+              const next = value[0] ?? micLevel;
+              setMicLevel(next);
+              onMicLevelChange?.(next);
+            },
+            children: /* @__PURE__ */ jsxs(Control4, { className: styles.sliderTrack, children: [
+              /* @__PURE__ */ jsx(Track, { children: /* @__PURE__ */ jsx(Range, {}) }),
+              /* @__PURE__ */ jsx(Thumbs, {})
+            ] })
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Item, { value: "av-recording", className: styles.section, children: [
+      /* @__PURE__ */ jsxs(
+        ItemTrigger,
+        {
+          className: styles.sectionTrigger,
+          css: {
+            fontSize: "lg",
+            fontWeight: "medium",
+            borderRadius: "0",
+            py: "4",
+            bg: "neutral.1",
+            color: "onSurface"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: /* @__PURE__ */ jsx(RecordIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: styles.triggerLabel, children: "A/V Recording" }),
+            /* @__PURE__ */ jsx(
+              ItemIndicator,
+              {
+                className: styles.sectionIndicator,
+                css: { color: "primary.7" }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ItemContent, { className: styles.sectionContent, children: /* @__PURE__ */ jsx("div", { className: styles.radioPanel, children: /* @__PURE__ */ jsx(
+        Root10,
+        {
+          defaultValue: defaultRecordingMode,
+          colorPalette: "primary",
+          onValueChange: ({ value }) => {
+            if (!value) return;
+            onRecordingModeChange?.(value);
+          },
+          css: { gap: "3" },
+          children: RECORDING_OPTIONS.map((option) => /* @__PURE__ */ jsxs(Item2, { value: option.value, children: [
+            /* @__PURE__ */ jsx(
+              ItemControl,
+              {
+                css: {
+                  boxShadow: "none",
+                  borderWidth: "1px",
+                  borderStyle: "solid",
+                  borderColor: "primary.7",
+                  _checked: {
+                    bg: "m3Primary.container",
+                    borderColor: "primary.7",
+                    _after: { bg: "primary.7" }
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ItemText,
+              {
+                css: { fontSize: "md", fontWeight: "medium" },
+                children: option.label
+              }
+            ),
+            /* @__PURE__ */ jsx(ItemHiddenInput, {})
+          ] }, option.value))
+        }
+      ) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Item, { value: "display-timer", className: styles.section, children: [
+      /* @__PURE__ */ jsxs(
+        ItemTrigger,
+        {
+          className: styles.sectionTrigger,
+          css: {
+            fontSize: "lg",
+            fontWeight: "medium",
+            borderRadius: "0",
+            py: "4",
+            bg: "neutral.1",
+            color: "onSurface"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: /* @__PURE__ */ jsx(TimerIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: styles.triggerLabel, children: "Display Timer" }),
+            /* @__PURE__ */ jsx(
+              ItemIndicator,
+              {
+                className: styles.sectionIndicator,
+                css: { color: "primary.7" }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ItemContent, { className: styles.sectionContent, children: /* @__PURE__ */ jsxs("div", { className: styles.togglePanel, children: [
+        /* @__PURE__ */ jsx("p", { className: styles.toggleDescription, children: "Hide timer to create more realistic interview" }),
+        /* @__PURE__ */ jsxs(
+          Root5,
+          {
+            colorPalette: "primary",
+            defaultChecked: defaultShowTimer,
+            onCheckedChange: ({ checked }) => {
+              onTimerChange?.(checked);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Control, {}),
+              /* @__PURE__ */ jsx(HiddenInput, {})
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Item, { value: "hide-interviewers", className: styles.section, children: [
+      /* @__PURE__ */ jsxs(
+        ItemTrigger,
+        {
+          className: styles.sectionTrigger,
+          css: {
+            fontSize: "lg",
+            fontWeight: "medium",
+            borderRadius: "0",
+            py: "4",
+            bg: "neutral.1",
+            color: "onSurface"
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: /* @__PURE__ */ jsx(AudienceIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: styles.triggerLabel, children: "Hide Interviewers" }),
+            /* @__PURE__ */ jsx(
+              ItemIndicator,
+              {
+                className: styles.sectionIndicator,
+                css: { color: "primary.7" }
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ItemContent, { className: styles.sectionContent, children: /* @__PURE__ */ jsxs("div", { className: styles.togglePanel, children: [
+        /* @__PURE__ */ jsx("p", { className: styles.toggleDescription, children: "Switch off to hide video of interviewers if it is too distracting" }),
+        /* @__PURE__ */ jsxs(
+          Root5,
+          {
+            colorPalette: "primary",
+            defaultChecked: defaultHideInterviewers,
+            onCheckedChange: ({ checked }) => {
+              onInterviewersChange?.(checked);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Control, {}),
+              /* @__PURE__ */ jsx(HiddenInput, {})
+            ]
+          }
+        )
+      ] }) })
+    ] })
+  ] }) });
+}
 var dialogContentClass = css({
   width: "full",
   maxWidth: "560px",
@@ -3116,6 +3480,6 @@ function ScenarioQueue({
   ] });
 }
 
-export { AbsoluteCenter_exports, Accordion_exports, AccountIcon, AddScenarioDialog, AudienceIcon, AudioSpeakerIcon, Avatar_exports, Badge, BookmarkPlusIcon, Breadcrumb_exports, Button, ButtonGroup, Card_exports, Checkbox_exports, ChevronUpDownIcon, ChevronUpIcon, ClipBoardIcon, ClockIcon, CloseButton_exports, ContentCard_exports, DashboardIcon, Dialog_exports, DiscourserLogo, Divider, Drawer_exports, ExitStudioIcon, GripDotsVerticalIcon, Group_exports, Header, HelpIcon, IconButton, Icon_exports, Input, InputAddon, InputGroup2 as InputGroup, LoginIcon, LogoutIcon, MicrophoneIcon, NavigationMenu, NotebookIcon, NotebookPenIcon, PausePlayIcon, PlayIcon, Popover_exports, Progress_exports, RadioGroup_exports, RecordIcon, RepeatQuestionIcon, RightArrowIcon, ScenarioCard, ScenarioIcon, ScenarioQueue, ScenarioSettings, ScrollTextIcon, Select_exports, SettingsPopover, Skeleton_exports, Slider_exports, SparklesIcon, SpeechIcon, Spinner, Stepper, StopPlayIcon, Switch_exports, Tabs_exports, Textarea, TimerIcon, Toaster, Tooltip_exports, UserProfileIcon, difficultyColorMap, difficultyLabel, toaster };
-//# sourceMappingURL=chunk-VN2QX6S7.js.map
-//# sourceMappingURL=chunk-VN2QX6S7.js.map
+export { AbsoluteCenter_exports, Accordion_exports, AccountIcon, AddScenarioDialog, AudienceIcon, AudioSpeakerIcon, Avatar_exports, Badge, BookmarkPlusIcon, Breadcrumb_exports, Button, ButtonGroup, Card_exports, Checkbox_exports, ChevronUpDownIcon, ChevronUpIcon, ClipBoardIcon, ClockIcon, CloseButton_exports, ContentCard_exports, DashboardIcon, Dialog_exports, DiscourserLogo, Divider, Drawer_exports, ExitStudioIcon, GripDotsVerticalIcon, Group_exports, Header, HelpIcon, IconButton, Icon_exports, Input, InputAddon, InputGroup2 as InputGroup, LoginIcon, LogoutIcon, MicrophoneIcon, NavigationMenu, NotebookIcon, NotebookPenIcon, PausePlayIcon, PlayIcon, Popover_exports, Progress_exports, RadioGroup_exports, RecordIcon, RepeatQuestionIcon, RightArrowIcon, ScenarioCard, ScenarioIcon, ScenarioQueue, ScenarioSettings, ScrollTextIcon, Select_exports, SettingsPopover, Skeleton_exports, Slider_exports, SparklesIcon, SpeechIcon, Spinner, Stepper, StopPlayIcon, StudioControls, Switch_exports, Tabs_exports, Textarea, TimerIcon, Toaster, Tooltip_exports, UserProfileIcon, difficultyColorMap, difficultyLabel, toaster };
+//# sourceMappingURL=chunk-UHSL4N44.js.map
+//# sourceMappingURL=chunk-UHSL4N44.js.map