@discourser/design-system 0.23.0 → 0.24.0

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

@@ -1783,6 +1783,161 @@ var SpeechIcon = (props) => /* @__PURE__ */ jsx(
     )
   }
 );
+var StyledSvg28 = styled(ark$1.svg);
+var ChevronUpDownIcon = (props) => /* @__PURE__ */ jsx(
+  StyledSvg28,
+  {
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M20.0001 5.18457C19.6318 5.18457 19.2635 5.33521 18.8617 5.67007L7.57822 14.8274C7.29365 15.0786 7.12622 15.4301 7.12622 15.9324C7.12622 16.8029 7.77908 17.4558 8.66636 17.4558C9.01794 17.4558 9.38622 17.3219 9.77129 17.0205L20.0001 8.68343L30.2289 17.0205C30.6139 17.3219 30.9822 17.4558 31.3505 17.4558C32.2211 17.4558 32.8739 16.8029 32.8739 15.9324C32.8739 15.4301 32.7065 15.0786 32.4219 14.8274L21.1384 5.65328C20.7366 5.33521 20.3851 5.18457 20.0001 5.18457ZM20.0001 34.8163C20.3851 34.8163 20.7366 34.6656 21.1384 34.3475L32.4219 25.1734C32.7065 24.9223 32.8739 24.5707 32.8739 24.0685C32.8739 23.1979 32.2211 22.5284 31.3505 22.5284C30.9822 22.5284 30.6139 22.679 30.2289 22.9803L20.0001 31.3174L9.77129 22.9803C9.38622 22.679 9.01794 22.5284 8.66636 22.5284C7.77908 22.5284 7.12622 23.1979 7.12622 24.0685C7.12622 24.5707 7.29365 24.9223 7.57822 25.1734L18.8617 34.3308C19.2635 34.6656 19.6318 34.8163 20.0001 34.8163Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var StyledSvg29 = styled(ark$1.svg);
+var LogoutIcon = (props) => /* @__PURE__ */ jsxs(
+  StyledSvg29,
+  {
+    viewBox: "0 0 40 40",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M29.0664 24.3673L33.3331 20.1007L29.0664 15.834",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeMiterlimit: "10",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M16.2666 20.1006H33.2166",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeMiterlimit: "10",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M19.5999 33.3337C12.2333 33.3337 6.2666 28.3337 6.2666 20.0003C6.2666 11.667 12.2333 6.66699 19.5999 6.66699",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeMiterlimit: "10",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+var StyledSvg30 = styled(ark$1.svg);
+var LoginIcon = (props) => /* @__PURE__ */ jsxs(
+  StyledSvg30,
+  {
+    viewBox: "0 0 60 60",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "60",
+    height: "60",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_810_5359)", children: [
+        /* @__PURE__ */ jsx("rect", { width: "60", height: "60", rx: "30", fill: "#EFF2E3" }),
+        /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip1_810_5359)", children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M58.2074 53.6551C56.0505 44.955 51.9734 48.5287 50.1618 45.9222C48.3501 43.3156 53.7632 40.7681 51.3115 36.8336C48.8599 32.8992 45.8286 36.1732 43.959 33.3333C42.0895 30.4934 47.2004 25.9235 44.3253 23.4153C41.4503 20.9072 38.9964 25.3685 37.0151 22.3911C35.0338 19.4137 39.2784 15.2232 35.3633 13.2207C33.1782 12.103 31.2507 13.8852 30.3548 15.5812C29.7402 16.7448 28.16 16.7995 27.4091 15.686C25.9125 13.4667 23.7114 11.0403 21.7122 12.0628C15.9463 15.0114 24.5391 21.2722 20.2401 23.9896C15.9411 26.707 18.9131 31.1731 21.298 31.0775C23.6828 30.9819 26.8853 33.2435 24.8134 36.4825C22.133 40.6728 24.0309 43.3075 26.2838 44.2939C28.16 45.1155 30.2028 46.6258 27.4648 50.9382C24.3066 55.9124 33.0268 59.8973 33.0268 59.8973L58.2072 53.655L58.2073 53.6552L58.2074 53.6551Z",
+              fill: "#7DBD2A"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M32.9312 36.9196C33.4259 36.6468 33.8985 36.398 34.3502 36.1698L37.0204 34.9296C40.1757 33.5796 42.31 32.9121 43.631 30.9425C44.1434 28.3406 46.4826 25.2977 44.3253 23.4155C43.3785 22.5895 42.4773 22.5195 41.6236 22.6907C40.2876 25.2942 37.3929 26.8556 33.1812 28.6978L30.2087 30.1009C27.8446 31.4474 26.3406 33.0908 25.4743 34.2766C25.5158 34.938 25.3266 35.6803 24.8133 36.4826C22.1329 40.6729 24.0308 43.3076 26.2837 44.2941C26.4246 44.3557 26.5663 44.4214 26.7069 44.4917C26.8141 43.6459 27.5836 39.8694 32.9312 36.9196Z",
+              fill: "#518500"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M27.1679 24.0775C31.9037 21.4652 34.7207 21.4528 36.4723 19.9778C36.6491 17.451 38.2974 14.7215 35.3634 13.2209C33.1783 12.1033 31.2508 13.8854 30.3549 15.5814C29.7403 16.745 28.1601 16.7997 27.4092 15.6862C25.9126 13.4668 23.7116 11.0405 21.7123 12.0628C15.9464 15.0114 24.5392 21.2722 20.2403 23.9897C16.3791 26.4305 18.3834 30.2811 20.5597 30.9708C21.0906 29.6569 22.7542 26.5122 27.1679 24.0775Z",
+              fill: "#518500"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M40.5293 50.4103L43.3352 49.0129C46.7426 47.7798 48.6584 46.7792 49.8901 45.3951C49.0453 42.9657 53.5978 40.5027 51.3115 36.8335C50.6611 35.7898 49.97 35.2535 49.2706 34.9756C47.8093 38.0239 45.7211 39.0062 40.7542 41.1786L37.2123 43.0869C32.8389 45.5777 28.9853 54.4251 28.1756 56.3789C29.6569 58.1014 31.8897 59.3273 32.7096 59.7423C33.4884 58.184 36.15 53.3516 40.5293 50.4103Z",
+              fill: "#518500"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M56.3507 49.2182C55.5853 51.1704 51.7999 54.3341 48.5698 56.0444L58.2074 53.6552C57.6822 51.5369 57.043 50.1476 56.3507 49.2182Z",
+              fill: "#518500"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M42.2323 57.6155C42.2257 57.5769 41.6356 53.4276 39.6494 47.8693C37.8238 42.7603 34.4792 35.1364 28.9141 27.8296C28.3993 27.1539 28.4895 26.1809 29.1154 25.6566C29.7414 25.1324 30.6663 25.2553 31.181 25.9312C37.0197 33.5972 40.5161 41.5821 42.4209 46.9308C44.4909 52.7426 45.1734 56.7133 45.2015 56.8795L42.2323 57.6156L42.2323 57.6155Z",
+              fill: "#6C7D56"
+            }
+          ),
+          /* @__PURE__ */ jsxs("g", { opacity: "0.19", children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M20.3146 17.4446C21.0655 18.5581 22.6456 18.5034 23.2603 17.3398C23.8897 16.1482 25.0286 14.9157 26.408 14.6746C24.9812 12.8344 23.1604 11.2612 21.4818 12.1197C19.3214 13.2244 19.1769 14.7944 19.6147 16.4685C19.8611 16.7906 20.0956 17.1197 20.3146 17.4446Z",
+                fill: "#6C7D56"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M49.9311 45.9789C48.1194 43.3723 53.5325 40.8249 51.0808 36.8904C48.6292 32.9559 45.5979 36.23 43.7283 33.3901C41.8588 30.5502 46.9697 25.9803 44.0947 23.4721C41.2196 20.964 38.7657 25.4253 36.7844 22.4479C34.8031 19.4705 39.0477 15.2799 35.1326 13.2775C32.9475 12.1599 31.02 13.942 30.1241 15.638C29.9997 15.8733 29.8355 16.0625 29.6471 16.2066C30.8936 18.4046 28.2842 21.6906 29.9204 24.1495C31.9017 27.1269 34.3556 22.6656 37.2307 25.1737C40.1057 27.6819 34.9948 32.2517 36.8644 35.0917C38.7339 37.9316 41.7652 34.6576 44.2168 38.592C46.6684 42.5264 41.2554 45.074 43.0671 47.6806C44.8788 50.2872 48.9559 46.7134 51.1127 55.4136L57.9767 53.7119C55.8198 45.0117 51.7427 48.5854 49.9311 45.9789Z",
+                fill: "#6C7D56"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("clipPath", { id: "clip0_810_5359", children: /* @__PURE__ */ jsx("rect", { width: "60", height: "60", rx: "30", fill: "white" }) }),
+        /* @__PURE__ */ jsx("clipPath", { id: "clip1_810_5359", children: /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "46.2988",
+            height: "49.2114",
+            fill: "white",
+            transform: "translate(8 15.4004) rotate(-13.9232)"
+          }
+        ) })
+      ] })
+    ]
+  }
+);
 
 // src/components/Breadcrumb.tsx
 var Breadcrumb_exports = {};
@@ -2098,6 +2253,158 @@ function NavigationMenu({
     }
   ) });
 }
+function SettingsPopover({
+  userName,
+  userTier,
+  userEmail,
+  avatarFallback,
+  avatarSrc,
+  actions,
+  placement = "top",
+  ariaLabel = "User settings"
+}) {
+  return /* @__PURE__ */ jsxs(Root15, { positioning: { placement, overflowPadding: 0 }, children: [
+    /* @__PURE__ */ jsx(Trigger5, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: css({
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          w: "full",
+          px: "3",
+          py: "3",
+          bg: "surface.container",
+          border: "none",
+          borderTopWidth: "1px",
+          borderTopStyle: "solid",
+          borderTopColor: "neutral.3",
+          borderRadius: "0",
+          boxShadow: "0px -1px 2px rgba(0, 0, 0, 0.3), 0px -2px 6px 2px rgba(0, 0, 0, 0.15)",
+          cursor: "pointer",
+          transition: "background 0.2s",
+          _hover: {
+            bg: "surface.containerHighest"
+          }
+        }),
+        "aria-label": ariaLabel,
+        children: [
+          /* @__PURE__ */ jsxs(HStack, { gap: "3", children: [
+            /* @__PURE__ */ jsxs(Root13, { size: "sm", children: [
+              avatarSrc ? /* @__PURE__ */ jsx(Image, { src: avatarSrc, alt: userName }) : null,
+              /* @__PURE__ */ jsx(Fallback, { children: avatarFallback ?? /* @__PURE__ */ jsx(LoginIcon, { width: "100%", height: "100%" }) })
+            ] }),
+            /* @__PURE__ */ jsxs(VStack, { gap: "0", alignItems: "flex-start", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: css({
+                    fontSize: "sm",
+                    fontWeight: "medium",
+                    color: "onSurface",
+                    lineHeight: "tight"
+                  }),
+                  children: userName
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: css({
+                    fontSize: "xs",
+                    color: "fg.muted",
+                    lineHeight: "tight"
+                  }),
+                  children: userTier
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronUpDownIcon, { w: "5", h: "5", color: "primary.50", flexShrink: 0 })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Positioner4, { children: /* @__PURE__ */ jsxs(
+      Content5,
+      {
+        "aria-label": ariaLabel,
+        className: css({
+          p: "0",
+          w: "275px",
+          borderRadius: "l3",
+          boxShadow: "level2",
+          overflow: "hidden"
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: css({
+                px: "4",
+                pt: "3",
+                pb: "2",
+                fontSize: "bodyMedium",
+                color: "neutral.7",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                borderBottom: "1px solid",
+                borderColor: "border"
+              }),
+              children: userEmail
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: css({
+                py: "1"
+              }),
+              children: actions.map((action) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: action.onClick,
+                  className: css({
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "3",
+                    w: "full",
+                    px: "4",
+                    py: "2.5",
+                    bg: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    fontSize: "sm",
+                    color: "onSurface",
+                    transition: "background 0.15s",
+                    _hover: {
+                      bg: "surface.container"
+                    }
+                  }),
+                  children: [
+                    action.icon && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: css({
+                          display: "flex",
+                          alignItems: "center",
+                          color: "primary.50"
+                        }),
+                        children: action.icon
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { children: action.label })
+                  ]
+                },
+                action.key
+              ))
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
 var INFO_SECTIONS = [
   {
     id: "conversation-flow",
@@ -2809,6 +3116,6 @@ function ScenarioQueue({
   ] });
 }
 
-export { AbsoluteCenter_exports, Accordion_exports, AccountIcon, AddScenarioDialog, AudienceIcon, AudioSpeakerIcon, Avatar_exports, Badge, BookmarkPlusIcon, Breadcrumb_exports, Button, ButtonGroup, Card_exports, Checkbox_exports, 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, MicrophoneIcon, NavigationMenu, NotebookIcon, NotebookPenIcon, PausePlayIcon, PlayIcon, Popover_exports, Progress_exports, RadioGroup_exports, RecordIcon, RepeatQuestionIcon, RightArrowIcon, ScenarioCard, ScenarioIcon, ScenarioQueue, ScenarioSettings, ScrollTextIcon, Select_exports, Skeleton_exports, Slider_exports, SparklesIcon, SpeechIcon, Spinner, Stepper, StopPlayIcon, Switch_exports, Tabs_exports, Textarea, TimerIcon, Toaster, Tooltip_exports, UserProfileIcon, difficultyColorMap, difficultyLabel, toaster };
-//# sourceMappingURL=chunk-KQOHRIUP.js.map
-//# sourceMappingURL=chunk-KQOHRIUP.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, Switch_exports, Tabs_exports, Textarea, TimerIcon, Toaster, Tooltip_exports, UserProfileIcon, difficultyColorMap, difficultyLabel, toaster };
+//# sourceMappingURL=chunk-VN2QX6S7.js.map
+//# sourceMappingURL=chunk-VN2QX6S7.js.map