@workos-inc/widgets 1.7.2 → 1.8.0

package/dist/esm/lib/user-sessions.js

@@ -15,6 +15,8 @@ import { IconPanel } from "./icon-panel.js";
 import { useState } from "react";
 import { GenericError } from "./generic-error.js";
 import { LaptopIcon, MobileIcon } from "@radix-ui/react-icons";
+import { Translation } from "./i18n/translation.js";
+import { useLocale } from "./i18n/use-locale.js";
 const UserSessions = ({
   sessionsData: sessions,
   currentSessionId,
@@ -51,8 +53,22 @@ const UserSessions = ({
         ] }),
         sessions.length > 1 && /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsxs(Flex, { gap: "2", justify: "between", align: "center", children: [
           /* @__PURE__ */ jsxs(Box, { children: [
-            /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", children: "Sign out of all other devices" }),
-            /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", as: "p", children: "Remove access from all devices except this one" })
+            /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Sign out of all other devices",
+                id: "sfkEFa",
+                description: "Heading for sign out all other devices action"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", as: "p", children: /* @__PURE__ */ jsx(
+              Translation,
+              {
+                defaultMessage: "Remove access from all devices except this one",
+                id: "LsD5BK",
+                description: "Description for sign out all other devices action"
+              }
+            ) })
           ] }),
           /* @__PURE__ */ jsx(
             Button,
@@ -61,7 +77,14 @@ const UserSessions = ({
               onClick: () => {
                 setOpenLogoutAllSessionsDialog(true);
               },
-              children: "Sign out"
+              children: /* @__PURE__ */ jsx(
+                Translation,
+                {
+                  defaultMessage: "Sign out",
+                  id: "oKQ0rm",
+                  description: "Button text to sign out of all other devices"
+                }
+              )
             }
           )
         ] }) }),
@@ -89,8 +112,22 @@ const UserSessionsLoading = (props) => {
   return /* @__PURE__ */ jsx(Card, { size: "2", ...getWidgetRootDomProps("loading", props), children: /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
     /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(IconPanel, {}) }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-      /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ jsx(Skeleton, { children: "The location" }) }),
-      /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", as: "p", children: /* @__PURE__ */ jsx(Skeleton, { children: "The location" }) })
+      /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "The location",
+          id: "+7UnNu",
+          description: "Loading placeholder text for session location"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", as: "p", children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+        Translation,
+        {
+          defaultMessage: "The location",
+          id: "+7UnNu",
+          description: "Loading placeholder text for session location"
+        }
+      ) }) })
     ] })
   ] }) });
 };
@@ -110,27 +147,49 @@ const UserSession = ({
     session.currentLocation,
     session.ipAddress
   );
+  const locale = useLocale();
   return /* @__PURE__ */ jsxs(Flex, { gap: "4", align: "center", children: [
     /* @__PURE__ */ jsx(IconPanel, { children: userAgent.isMobile ? /* @__PURE__ */ jsx(MobileIcon, {}) : /* @__PURE__ */ jsx(LaptopIcon, {}) }),
     /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
       /* @__PURE__ */ jsx(Text, { size: "2", highContrast: true, weight: "bold", as: "p", mb: "-2px", children: userAgent.pretty }),
       /* @__PURE__ */ jsxs(Flex, { gap: "1", align: "center", children: [
         /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", as: "p", children: userLocation }),
-        isCurrentSession && /* @__PURE__ */ jsx(Badge, { ml: "2", children: "This device" }),
+        isCurrentSession && /* @__PURE__ */ jsx(Badge, { ml: "2", children: /* @__PURE__ */ jsx(
+          Translation,
+          {
+            defaultMessage: "This device",
+            id: "Wz8T8u",
+            description: "Badge label indicating the current device session"
+          }
+        ) }),
         !isCurrentSession && session.lastActivityAt && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: "\u2219" }),
-          /* @__PURE__ */ jsxs(Text, { size: "2", color: "gray", children: [
-            "Last seen",
-            " ",
-            getComparativeReadableDate(
-              /* @__PURE__ */ new Date(),
-              new Date(session.lastActivityAt)
-            )
-          ] })
+          /* @__PURE__ */ jsx(Text, { size: "2", color: "gray", children: /* @__PURE__ */ jsx(
+            Translation,
+            {
+              defaultMessage: "Last seen {timeAgo}",
+              id: "gF+kUw",
+              description: "Text showing when the session was last active",
+              values: {
+                timeAgo: getComparativeReadableDate(
+                  /* @__PURE__ */ new Date(),
+                  new Date(session.lastActivityAt),
+                  { locale }
+                )
+              }
+            }
+          ) })
         ] })
       ] })
     ] }),
-    !isCurrentSession && /* @__PURE__ */ jsx(Flex, { ml: "auto", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => onSignOut?.(session), children: "Sign out" }) })
+    !isCurrentSession && /* @__PURE__ */ jsx(Flex, { ml: "auto", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => onSignOut?.(session), children: /* @__PURE__ */ jsx(
+      Translation,
+      {
+        defaultMessage: "Sign out",
+        id: "sT1L78",
+        description: "Button text to sign out of a session"
+      }
+    ) }) })
   ] });
 };
 function getWidgetRootDomProps(state, domProps) {

package/dist/esm/lib/user-sessions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/user-sessions.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Badge, Button, Skeleton } from \"./elements.js\";\nimport {\n  getComparativeReadableDate,\n  getDomProps,\n  getUserLocation,\n  parseUserAgent,\n  type WidgetRootDomProps,\n  type WidgetRootState,\n} from \"./utils.js\";\nimport { LogoutDialog } from \"./logout-dialog.js\";\nimport { LogoutAllSessionsDialog } from \"./logout-all-sessions-dialog.js\";\nimport { ActiveSession } from \"../api/endpoint.js\";\nimport * as CardList from \"./card-list.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { useState } from \"react\";\nimport { GenericError } from \"./generic-error.js\";\nimport { LaptopIcon, MobileIcon } from \"@radix-ui/react-icons\";\n\ninterface UserSessionsProps extends WidgetRootDomProps {\n  sessionsData: ActiveSession[];\n  currentSessionId: string;\n}\n\nconst UserSessions = ({\n  sessionsData: sessions,\n  currentSessionId,\n  ...domProps\n}: UserSessionsProps) => {\n  const currentSession = sessions.find(\n    (session) => session.id === currentSessionId,\n  );\n  const otherSessions = sessions.filter(\n    (session) => session.id !== currentSessionId,\n  );\n  const [openLogoutDialog, setOpenLogoutDialog] = useState(false);\n  const [sessionToSignOut, setSessionToSignOut] =\n    useState<ActiveSession | null>(null);\n  const [openLogoutAllSessionsDialog, setOpenLogoutAllSessionsDialog] =\n    useState(false);\n\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"4\"\n      {...getWidgetRootDomProps(\"resolved\", domProps)}\n    >\n      <CardList.Root>\n        {currentSession && (\n          <CardList.Item>\n            <UserSession session={currentSession} isCurrentSession />\n          </CardList.Item>\n        )}\n\n        {otherSessions.map((session) => (\n          <CardList.Item key={session.id}>\n            <UserSession\n              session={session}\n              onSignOut={() => {\n                setSessionToSignOut(session);\n                setOpenLogoutDialog(true);\n              }}\n            />\n          </CardList.Item>\n        ))}\n      </CardList.Root>\n\n      {sessions.length > 1 && (\n        <Card size=\"2\">\n          <Flex gap=\"2\" justify=\"between\" align=\"center\">\n            <Box>\n              <Text size=\"2\" highContrast weight=\"bold\" as=\"p\">\n                Sign out of all other devices\n              </Text>\n              <Text size=\"2\" color=\"gray\" as=\"p\">\n                Remove access from all devices except this one\n              </Text>\n            </Box>\n            <Button\n              variant=\"secondary\"\n              onClick={() => {\n                setOpenLogoutAllSessionsDialog(true);\n              }}\n            >\n              Sign out\n            </Button>\n          </Flex>\n        </Card>\n      )}\n\n      {sessionToSignOut && (\n        <LogoutDialog\n          session={sessionToSignOut}\n          open={openLogoutDialog}\n          onOpenChange={setOpenLogoutDialog}\n        />\n      )}\n\n      <LogoutAllSessionsDialog\n        currentSessionId={currentSessionId}\n        open={openLogoutAllSessionsDialog}\n        onOpenChange={setOpenLogoutAllSessionsDialog}\n      />\n    </Flex>\n  );\n};\n\ninterface UserSessionsLoadingProps extends WidgetRootDomProps {}\n\nconst UserSessionsLoading: React.FC<UserSessionsLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Flex gap=\"4\" align=\"center\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>The location</Skeleton>\n          </Text>\n\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            <Skeleton>The location</Skeleton>\n          </Text>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\ninterface UserSessionsErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserSessionsError: React.FC<UserSessionsErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\ninterface UserSessionProps {\n  session: ActiveSession;\n  isCurrentSession?: boolean;\n  onSignOut?: (session: ActiveSession) => void;\n}\n\nconst UserSession = ({\n  session,\n  isCurrentSession = false,\n  onSignOut,\n}: UserSessionProps) => {\n  const userAgent = parseUserAgent(session.userAgent);\n  const userLocation = getUserLocation(\n    session.currentLocation,\n    session.ipAddress,\n  );\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel>\n        {userAgent.isMobile ? <MobileIcon /> : <LaptopIcon />}\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          {userAgent.pretty}\n        </Text>\n\n        <Flex gap=\"1\" align=\"center\">\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            {userLocation}\n          </Text>\n\n          {isCurrentSession && <Badge ml=\"2\">This device</Badge>}\n\n          {!isCurrentSession && session.lastActivityAt && (\n            <>\n              <Text size=\"2\" color=\"gray\">\n                ∙\n              </Text>\n              <Text size=\"2\" color=\"gray\">\n                Last seen{\" \"}\n                {getComparativeReadableDate(\n                  new Date(),\n                  new Date(session.lastActivityAt),\n                )}\n              </Text>\n            </>\n          )}\n        </Flex>\n      </Flex>\n\n      {!isCurrentSession && (\n        <Flex ml=\"auto\">\n          <Button variant=\"secondary\" onClick={() => onSignOut?.(session)}>\n            Sign out\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-sessions\",\n    widgetState: state,\n  });\n}\n\nexport type { UserSessionsLoadingProps, UserSessionsErrorProps };\nexport { UserSessions, UserSessionsLoading, UserSessionsError };\n"],"mappings":";AAiDM,SAuIM,UApIA,KAHN;AA/CN,SAAS,KAAK,MAAM,MAAM,YAAY;AACtC,SAAS,OAAO,QAAQ,gBAAgB;AACxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AAExC,YAAY,cAAc;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,YAAY,kBAAkB;AAOvC,MAAM,eAAe,CAAC;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,iBAAiB,SAAS;AAAA,IAC9B,CAAC,YAAY,QAAQ,OAAO;AAAA,EAC9B;AACA,QAAM,gBAAgB,SAAS;AAAA,IAC7B,CAAC,YAAY,QAAQ,OAAO;AAAA,EAC9B;AACA,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,CAAC,kBAAkB,mBAAmB,IAC1C,SAA+B,IAAI;AACrC,QAAM,CAAC,6BAA6B,8BAA8B,IAChE,SAAS,KAAK;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACH,GAAG,sBAAsB,YAAY,QAAQ;AAAA,MAE9C;AAAA,6BAAC,SAAS,MAAT,EACE;AAAA,4BACC,oBAAC,SAAS,MAAT,EACC,8BAAC,eAAY,SAAS,gBAAgB,kBAAgB,MAAC,GACzD;AAAA,UAGD,cAAc,IAAI,CAAC,YAClB,oBAAC,SAAS,MAAT,EACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAW,MAAM;AACf,oCAAoB,OAAO;AAC3B,oCAAoB,IAAI;AAAA,cAC1B;AAAA;AAAA,UACF,KAPkB,QAAQ,EAQ5B,CACD;AAAA,WACH;AAAA,QAEC,SAAS,SAAS,KACjB,oBAAC,QAAK,MAAK,KACT,+BAAC,QAAK,KAAI,KAAI,SAAQ,WAAU,OAAM,UACpC;AAAA,+BAAC,OACC;AAAA,gCAAC,QAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAAI,2CAEjD;AAAA,YACA,oBAAC,QAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAAI,4DAEnC;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,MAAM;AACb,+CAA+B,IAAI;AAAA,cACrC;AAAA,cACD;AAAA;AAAA,UAED;AAAA,WACF,GACF;AAAA,QAGD,oBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,MAAM;AAAA,YACN,cAAc;AAAA;AAAA,QAChB;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM;AAAA,YACN,cAAc;AAAA;AAAA,QAChB;AAAA;AAAA;AAAA,EACF;AAEJ;AAIA,MAAM,sBAA0D,CAAC,UAAU;AACzE,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,sBAAsB,WAAW,KAAK,GACvD,+BAAC,QAAK,KAAI,KAAI,OAAM,UAClB;AAAA,wBAAC,YACC,8BAAC,aAAU,GACb;AAAA,IAEA,qBAAC,QAAK,WAAU,UACd;AAAA,0BAAC,QAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAAI,IAAG,QAClD,8BAAC,YAAS,0BAAY,GACxB;AAAA,MAEA,oBAAC,QAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAC7B,8BAAC,YAAS,0BAAY,GACxB;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAMA,MAAM,oBAAsD,CAAC;AAAA,EAC3D;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,sBAAsB,SAAS,QAAQ,GACxD,8BAAC,gBAAa,OAAc,GAC9B;AAEJ;AAQA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA,mBAAmB;AAAA,EACnB;AACF,MAAwB;AACtB,QAAM,YAAY,eAAe,QAAQ,SAAS;AAClD,QAAM,eAAe;AAAA,IACnB,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AAEA,SACE,qBAAC,QAAK,KAAI,KAAI,OAAM,UAClB;AAAA,wBAAC,aACE,oBAAU,WAAW,oBAAC,cAAW,IAAK,oBAAC,cAAW,GACrD;AAAA,IAEA,qBAAC,QAAK,WAAU,UACd;AAAA,0BAAC,QAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAAI,IAAG,QACjD,oBAAU,QACb;AAAA,MAEA,qBAAC,QAAK,KAAI,KAAI,OAAM,UAClB;AAAA,4BAAC,QAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAC5B,wBACH;AAAA,QAEC,oBAAoB,oBAAC,SAAM,IAAG,KAAI,yBAAW;AAAA,QAE7C,CAAC,oBAAoB,QAAQ,kBAC5B,iCACE;AAAA,8BAAC,QAAK,MAAK,KAAI,OAAM,QAAO,oBAE5B;AAAA,UACA,qBAAC,QAAK,MAAK,KAAI,OAAM,QAAO;AAAA;AAAA,YAChB;AAAA,YACT;AAAA,cACC,oBAAI,KAAK;AAAA,cACT,IAAI,KAAK,QAAQ,cAAc;AAAA,YACjC;AAAA,aACF;AAAA,WACF;AAAA,SAEJ;AAAA,OACF;AAAA,IAEC,CAAC,oBACA,oBAAC,QAAK,IAAG,QACP,8BAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,YAAY,OAAO,GAAG,sBAEjE,GACF;AAAA,KAEJ;AAEJ;AAEA,SAAS,sBACP,OACA,UACA;AACA,SAAO,YAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../src/lib/user-sessions.tsx"],"sourcesContent":["\"use client\";\n\nimport { Box, Card, Flex, Text } from \"@radix-ui/themes\";\nimport { Badge, Button, Skeleton } from \"./elements.js\";\nimport {\n  getComparativeReadableDate,\n  getDomProps,\n  getUserLocation,\n  parseUserAgent,\n  type WidgetRootDomProps,\n  type WidgetRootState,\n} from \"./utils.js\";\nimport { LogoutDialog } from \"./logout-dialog.js\";\nimport { LogoutAllSessionsDialog } from \"./logout-all-sessions-dialog.js\";\nimport { ActiveSession } from \"../api/endpoint.js\";\nimport * as CardList from \"./card-list.js\";\nimport { IconPanel } from \"./icon-panel.js\";\nimport { useState } from \"react\";\nimport { GenericError } from \"./generic-error.js\";\nimport { LaptopIcon, MobileIcon } from \"@radix-ui/react-icons\";\nimport { Translation } from \"./i18n/translation.js\";\nimport { useLocale } from \"./i18n/use-locale.js\";\n\ninterface UserSessionsProps extends WidgetRootDomProps {\n  sessionsData: ActiveSession[];\n  currentSessionId: string;\n}\n\nconst UserSessions = ({\n  sessionsData: sessions,\n  currentSessionId,\n  ...domProps\n}: UserSessionsProps) => {\n  const currentSession = sessions.find(\n    (session) => session.id === currentSessionId,\n  );\n  const otherSessions = sessions.filter(\n    (session) => session.id !== currentSessionId,\n  );\n  const [openLogoutDialog, setOpenLogoutDialog] = useState(false);\n  const [sessionToSignOut, setSessionToSignOut] =\n    useState<ActiveSession | null>(null);\n  const [openLogoutAllSessionsDialog, setOpenLogoutAllSessionsDialog] =\n    useState(false);\n\n  return (\n    <Flex\n      direction=\"column\"\n      gap=\"4\"\n      {...getWidgetRootDomProps(\"resolved\", domProps)}\n    >\n      <CardList.Root>\n        {currentSession && (\n          <CardList.Item>\n            <UserSession session={currentSession} isCurrentSession />\n          </CardList.Item>\n        )}\n\n        {otherSessions.map((session) => (\n          <CardList.Item key={session.id}>\n            <UserSession\n              session={session}\n              onSignOut={() => {\n                setSessionToSignOut(session);\n                setOpenLogoutDialog(true);\n              }}\n            />\n          </CardList.Item>\n        ))}\n      </CardList.Root>\n\n      {sessions.length > 1 && (\n        <Card size=\"2\">\n          <Flex gap=\"2\" justify=\"between\" align=\"center\">\n            <Box>\n              <Text size=\"2\" highContrast weight=\"bold\" as=\"p\">\n                <Translation\n                  defaultMessage=\"Sign out of all other devices\"\n                  id=\"sfkEFa\"\n                  description=\"Heading for sign out all other devices action\"\n                />\n              </Text>\n              <Text size=\"2\" color=\"gray\" as=\"p\">\n                <Translation\n                  defaultMessage=\"Remove access from all devices except this one\"\n                  id=\"LsD5BK\"\n                  description=\"Description for sign out all other devices action\"\n                />\n              </Text>\n            </Box>\n            <Button\n              variant=\"secondary\"\n              onClick={() => {\n                setOpenLogoutAllSessionsDialog(true);\n              }}\n            >\n              <Translation\n                defaultMessage=\"Sign out\"\n                id=\"oKQ0rm\"\n                description=\"Button text to sign out of all other devices\"\n              />\n            </Button>\n          </Flex>\n        </Card>\n      )}\n\n      {sessionToSignOut && (\n        <LogoutDialog\n          session={sessionToSignOut}\n          open={openLogoutDialog}\n          onOpenChange={setOpenLogoutDialog}\n        />\n      )}\n\n      <LogoutAllSessionsDialog\n        currentSessionId={currentSessionId}\n        open={openLogoutAllSessionsDialog}\n        onOpenChange={setOpenLogoutAllSessionsDialog}\n      />\n    </Flex>\n  );\n};\n\ninterface UserSessionsLoadingProps extends WidgetRootDomProps {}\n\nconst UserSessionsLoading: React.FC<UserSessionsLoadingProps> = (props) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"loading\", props)}>\n      <Flex gap=\"4\" align=\"center\">\n        <Skeleton>\n          <IconPanel />\n        </Skeleton>\n\n        <Flex direction=\"column\">\n          <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"The location\"\n                id=\"+7UnNu\"\n                description=\"Loading placeholder text for session location\"\n              />\n            </Skeleton>\n          </Text>\n\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            <Skeleton>\n              <Translation\n                defaultMessage=\"The location\"\n                id=\"+7UnNu\"\n                description=\"Loading placeholder text for session location\"\n              />\n            </Skeleton>\n          </Text>\n        </Flex>\n      </Flex>\n    </Card>\n  );\n};\n\ninterface UserSessionsErrorProps extends WidgetRootDomProps {\n  error: unknown;\n}\n\nconst UserSessionsError: React.FC<UserSessionsErrorProps> = ({\n  error,\n  ...domProps\n}) => {\n  return (\n    <Card size=\"2\" {...getWidgetRootDomProps(\"error\", domProps)}>\n      <GenericError error={error} />\n    </Card>\n  );\n};\n\ninterface UserSessionProps {\n  session: ActiveSession;\n  isCurrentSession?: boolean;\n  onSignOut?: (session: ActiveSession) => void;\n}\n\nconst UserSession = ({\n  session,\n  isCurrentSession = false,\n  onSignOut,\n}: UserSessionProps) => {\n  const userAgent = parseUserAgent(session.userAgent);\n  const userLocation = getUserLocation(\n    session.currentLocation,\n    session.ipAddress,\n  );\n  const locale = useLocale();\n\n  return (\n    <Flex gap=\"4\" align=\"center\">\n      <IconPanel>\n        {userAgent.isMobile ? <MobileIcon /> : <LaptopIcon />}\n      </IconPanel>\n\n      <Flex direction=\"column\">\n        <Text size=\"2\" highContrast weight=\"bold\" as=\"p\" mb=\"-2px\">\n          {userAgent.pretty}\n        </Text>\n\n        <Flex gap=\"1\" align=\"center\">\n          <Text size=\"2\" color=\"gray\" as=\"p\">\n            {userLocation}\n          </Text>\n\n          {isCurrentSession && (\n            <Badge ml=\"2\">\n              <Translation\n                defaultMessage=\"This device\"\n                id=\"Wz8T8u\"\n                description=\"Badge label indicating the current device session\"\n              />\n            </Badge>\n          )}\n\n          {!isCurrentSession && session.lastActivityAt && (\n            <>\n              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}\n              <Text size=\"2\" color=\"gray\">\n                ∙\n              </Text>\n              <Text size=\"2\" color=\"gray\">\n                <Translation\n                  defaultMessage=\"Last seen {timeAgo}\"\n                  id=\"gF+kUw\"\n                  description=\"Text showing when the session was last active\"\n                  values={{\n                    timeAgo: getComparativeReadableDate(\n                      new Date(),\n                      new Date(session.lastActivityAt),\n                      { locale },\n                    ),\n                  }}\n                />\n              </Text>\n            </>\n          )}\n        </Flex>\n      </Flex>\n\n      {!isCurrentSession && (\n        <Flex ml=\"auto\">\n          <Button variant=\"secondary\" onClick={() => onSignOut?.(session)}>\n            <Translation\n              defaultMessage=\"Sign out\"\n              id=\"sT1L78\"\n              description=\"Button text to sign out of a session\"\n            />\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\nfunction getWidgetRootDomProps(\n  state: WidgetRootState,\n  domProps: WidgetRootDomProps,\n) {\n  return getDomProps({\n    ...domProps,\n    isWidgetRoot: true,\n    widgetId: \"user-sessions\",\n    widgetState: state,\n  });\n}\n\nexport type { UserSessionsLoadingProps, UserSessionsErrorProps };\nexport { UserSessions, UserSessionsLoading, UserSessionsError };\n"],"mappings":";AAmDM,SAwKM,UArKA,KAHN;AAjDN,SAAS,KAAK,MAAM,MAAM,YAAY;AACtC,SAAS,OAAO,QAAQ,gBAAgB;AACxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AAExC,YAAY,cAAc;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,YAAY,kBAAkB;AACvC,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAO1B,MAAM,eAAe,CAAC;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,MAAyB;AACvB,QAAM,iBAAiB,SAAS;AAAA,IAC9B,CAAC,YAAY,QAAQ,OAAO;AAAA,EAC9B;AACA,QAAM,gBAAgB,SAAS;AAAA,IAC7B,CAAC,YAAY,QAAQ,OAAO;AAAA,EAC9B;AACA,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,CAAC,kBAAkB,mBAAmB,IAC1C,SAA+B,IAAI;AACrC,QAAM,CAAC,6BAA6B,8BAA8B,IAChE,SAAS,KAAK;AAEhB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAI;AAAA,MACH,GAAG,sBAAsB,YAAY,QAAQ;AAAA,MAE9C;AAAA,6BAAC,SAAS,MAAT,EACE;AAAA,4BACC,oBAAC,SAAS,MAAT,EACC,8BAAC,eAAY,SAAS,gBAAgB,kBAAgB,MAAC,GACzD;AAAA,UAGD,cAAc,IAAI,CAAC,YAClB,oBAAC,SAAS,MAAT,EACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,WAAW,MAAM;AACf,oCAAoB,OAAO;AAC3B,oCAAoB,IAAI;AAAA,cAC1B;AAAA;AAAA,UACF,KAPkB,QAAQ,EAQ5B,CACD;AAAA,WACH;AAAA,QAEC,SAAS,SAAS,KACjB,oBAAC,QAAK,MAAK,KACT,+BAAC,QAAK,KAAI,KAAI,SAAQ,WAAU,OAAM,UACpC;AAAA,+BAAC,OACC;AAAA,gCAAC,QAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAC3C;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,GACF;AAAA,YACA,oBAAC,QAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAC7B;AAAA,cAAC;AAAA;AAAA,gBACC,gBAAe;AAAA,gBACf,IAAG;AAAA,gBACH,aAAY;AAAA;AAAA,YACd,GACF;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS,MAAM;AACb,+CAA+B,IAAI;AAAA,cACrC;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,gBAAe;AAAA,kBACf,IAAG;AAAA,kBACH,aAAY;AAAA;AAAA,cACd;AAAA;AAAA,UACF;AAAA,WACF,GACF;AAAA,QAGD,oBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,MAAM;AAAA,YACN,cAAc;AAAA;AAAA,QAChB;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,MAAM;AAAA,YACN,cAAc;AAAA;AAAA,QAChB;AAAA;AAAA;AAAA,EACF;AAEJ;AAIA,MAAM,sBAA0D,CAAC,UAAU;AACzE,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,sBAAsB,WAAW,KAAK,GACvD,+BAAC,QAAK,KAAI,KAAI,OAAM,UAClB;AAAA,wBAAC,YACC,8BAAC,aAAU,GACb;AAAA,IAEA,qBAAC,QAAK,WAAU,UACd;AAAA,0BAAC,QAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAAI,IAAG,QAClD,8BAAC,YACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF,GACF;AAAA,MAEA,oBAAC,QAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAC7B,8BAAC,YACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAe;AAAA,UACf,IAAG;AAAA,UACH,aAAY;AAAA;AAAA,MACd,GACF,GACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AAMA,MAAM,oBAAsD,CAAC;AAAA,EAC3D;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,QAAK,MAAK,KAAK,GAAG,sBAAsB,SAAS,QAAQ,GACxD,8BAAC,gBAAa,OAAc,GAC9B;AAEJ;AAQA,MAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA,mBAAmB;AAAA,EACnB;AACF,MAAwB;AACtB,QAAM,YAAY,eAAe,QAAQ,SAAS;AAClD,QAAM,eAAe;AAAA,IACnB,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AACA,QAAM,SAAS,UAAU;AAEzB,SACE,qBAAC,QAAK,KAAI,KAAI,OAAM,UAClB;AAAA,wBAAC,aACE,oBAAU,WAAW,oBAAC,cAAW,IAAK,oBAAC,cAAW,GACrD;AAAA,IAEA,qBAAC,QAAK,WAAU,UACd;AAAA,0BAAC,QAAK,MAAK,KAAI,cAAY,MAAC,QAAO,QAAO,IAAG,KAAI,IAAG,QACjD,oBAAU,QACb;AAAA,MAEA,qBAAC,QAAK,KAAI,KAAI,OAAM,UAClB;AAAA,4BAAC,QAAK,MAAK,KAAI,OAAM,QAAO,IAAG,KAC5B,wBACH;AAAA,QAEC,oBACC,oBAAC,SAAM,IAAG,KACR;AAAA,UAAC;AAAA;AAAA,YACC,gBAAe;AAAA,YACf,IAAG;AAAA,YACH,aAAY;AAAA;AAAA,QACd,GACF;AAAA,QAGD,CAAC,oBAAoB,QAAQ,kBAC5B,iCAEE;AAAA,8BAAC,QAAK,MAAK,KAAI,OAAM,QAAO,oBAE5B;AAAA,UACA,oBAAC,QAAK,MAAK,KAAI,OAAM,QACnB;AAAA,YAAC;AAAA;AAAA,cACC,gBAAe;AAAA,cACf,IAAG;AAAA,cACH,aAAY;AAAA,cACZ,QAAQ;AAAA,gBACN,SAAS;AAAA,kBACP,oBAAI,KAAK;AAAA,kBACT,IAAI,KAAK,QAAQ,cAAc;AAAA,kBAC/B,EAAE,OAAO;AAAA,gBACX;AAAA,cACF;AAAA;AAAA,UACF,GACF;AAAA,WACF;AAAA,SAEJ;AAAA,OACF;AAAA,IAEC,CAAC,oBACA,oBAAC,QAAK,IAAG,QACP,8BAAC,UAAO,SAAQ,aAAY,SAAS,MAAM,YAAY,OAAO,GAC5D;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,IAAG;AAAA,QACH,aAAY;AAAA;AAAA,IACd,GACF,GACF;AAAA,KAEJ;AAEJ;AAEA,SAAS,sBACP,OACA,UACA;AACA,SAAO,YAAY;AAAA,IACjB,GAAG;AAAA,IACH,cAAc;AAAA,IACd,UAAU;AAAA,IACV,aAAa;AAAA,EACf,CAAC;AACH;","names":[]}