@os-team/profile 1.2.0 → 1.2.2

package/dist/components/profile/UserAvatarAddon.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ThemeOverrider } from '@os-design/theming';
+import styled from '@emotion/styled';
+import { resetFocusStyles, transitionStyles } from '@os-design/styles';
+import UserAvatar from './UserAvatar';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Addon = styled.div`
+  width: 100%;
+  height: ${p => p.theme.navigationSideWidth}em;
+  min-height: ${p => p.theme.navigationSideWidth}em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const AVATAR_SIZE = 2.5;
+const StyledUserAvatar = styled(UserAvatar)`
+  ${resetFocusStyles};
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      opacity: 0.7;
+    }
+    ${transitionStyles('opacity')};
+  }
+`;
+const UserAvatarAddon = ({
+  onClick = () => {},
+  ...rest
+}) => /*#__PURE__*/_jsx(Addon, {
+  children: /*#__PURE__*/_jsx(ThemeOverrider, {
+    overrides: theme => ({
+      avatarOnlineColorScoop: theme.navigationColorBg
+    }),
+    children: /*#__PURE__*/_jsx(StyledUserAvatar, {
+      online: true,
+      size: `${AVATAR_SIZE}em`,
+      tabIndex: 0,
+      role: "button",
+      onClick: onClick,
+      onKeyDown: e => {
+        if (e.key === 'Enter') onClick();
+      },
+      onMouseDown: e => e.preventDefault(),
+      ...rest
+    })
+  })
+});
+export default UserAvatarAddon;

package/dist/{types/components → components}/profile/__generated__/ProfileDrawerContentSignOutMutation.graphql.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @generated SignedSource<<efa148d8abdd56447bf12fa5b041af67>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
 import { ConcreteRequest } from 'relay-runtime';
 export type ProfileDrawerContentSignOutMutation$variables = Record<PropertyKey, never>;
 export type ProfileDrawerContentSignOutMutation$data = {

package/dist/components/profile/__generated__/ProfileDrawerContentSignOutMutation.graphql.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileDrawerContentSignOutMutation.graphql.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/profile/__generated__/ProfileDrawerContentSignOutMutation.graphql.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,MAAM,MAAM,6CAA6C,GAAG,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AACvF,MAAM,MAAM,wCAAwC,GAAG;IACrD,QAAQ,CAAC,OAAO,EAAE;QAChB,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAC;KACtB,CAAC;CACH,CAAC;AACF,MAAM,MAAM,mCAAmC,GAAG;IAChD,QAAQ,EAAE,wCAAwC,CAAC;IACnD,SAAS,EAAE,6CAA6C,CAAC;CAC1D,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,eA+CR,CAAC;AAIL,eAAe,IAAI,CAAC"}

package/dist/{esm/components → components}/profile/__generated__/ProfileDrawerContentSignOutMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<e33309fd987bdd6745cb67403591410c>>
+ * @generated SignedSource<<efa148d8abdd56447bf12fa5b041af67>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -53,5 +53,4 @@ const node = function () {
   };
 }();
 node.hash = "c7ca96e9e713315606b0c22d196b6f7b";
-export default node;
-//# sourceMappingURL=ProfileDrawerContentSignOutMutation.graphql.js.map
+export default node;

package/dist/{types/components → components}/profile/__generated__/ProfileDrawerContentUpdateAvatarMutation.graphql.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @generated SignedSource<<08352a363b20a40c74d7623ce7ecf238>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
 import { ConcreteRequest } from 'relay-runtime';
 export type UpdateAvatarInput = {
     avatar?: any | null | undefined;

package/dist/components/profile/__generated__/ProfileDrawerContentUpdateAvatarMutation.graphql.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileDrawerContentUpdateAvatarMutation.graphql.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/profile/__generated__/ProfileDrawerContentUpdateAvatarMutation.graphql.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,GAAG,GAAG,IAAI,GAAG,SAAS,CAAC;CACjC,CAAC;AACF,MAAM,MAAM,kDAAkD,GAAG;IAC/D,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AACF,MAAM,MAAM,6CAA6C,GAAG;IAC1D,QAAQ,CAAC,YAAY,EAAE;QACrB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QAC3C,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;KACrB,CAAC;CACH,CAAC;AACF,MAAM,MAAM,wCAAwC,GAAG;IACrD,QAAQ,EAAE,6CAA6C,CAAC;IACxD,SAAS,EAAE,kDAAkD,CAAC;CAC/D,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,eAmER,CAAC;AAIL,eAAe,IAAI,CAAC"}

package/dist/{esm/components → components}/profile/__generated__/ProfileDrawerContentUpdateAvatarMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f226c7545c1a2047606c6dcebdb03728>>
+ * @generated SignedSource<<08352a363b20a40c74d7623ce7ecf238>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -68,5 +68,4 @@ const node = function () {
   };
 }();
 node.hash = "cf72a6314772ed0d1f182b197c858505";
-export default node;
-//# sourceMappingURL=ProfileDrawerContentUpdateAvatarMutation.graphql.js.map
+export default node;

package/dist/{types/components → components}/profile/__generated__/ProfileUpdateNameModalMutation.graphql.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @generated SignedSource<<0e663480ed80dc8424202b84f5f750a1>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
 import { ConcreteRequest } from 'relay-runtime';
 export type UpdateProfileInput = {
     firstName?: string | null | undefined;

package/dist/components/profile/__generated__/ProfileUpdateNameModalMutation.graphql.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileUpdateNameModalMutation.graphql.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/profile/__generated__/ProfileUpdateNameModalMutation.graphql.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACtC,CAAC;AACF,MAAM,MAAM,wCAAwC,GAAG;IACrD,KAAK,EAAE,kBAAkB,CAAC;CAC3B,CAAC;AACF,MAAM,MAAM,mCAAmC,GAAG;IAChD,QAAQ,CAAC,aAAa,EAAE;QACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QAC9C,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;KAC9C,CAAC;CACH,CAAC;AACF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,EAAE,mCAAmC,CAAC;IAC9C,SAAS,EAAE,wCAAwC,CAAC;CACrD,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,eA0FR,CAAC;AAIL,eAAe,IAAI,CAAC"}

package/dist/{esm/components → components}/profile/__generated__/ProfileUpdateNameModalMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<26e40d9447fce4f5b8a56a5ff2f1fc8e>>
+ * @generated SignedSource<<0e663480ed80dc8424202b84f5f750a1>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -85,5 +85,4 @@ const node = function () {
   };
 }();
 node.hash = "7264a05b6738d5417df9f1dc462486aa";
-export default node;
-//# sourceMappingURL=ProfileUpdateNameModalMutation.graphql.js.map
+export default node;

package/dist/{types/components → components}/profile/__generated__/ProfileUpdatePasswordModalMutation.graphql.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @generated SignedSource<<98f5f690dc69060f35dc48468bd2f481>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
 import { ConcreteRequest } from 'relay-runtime';
 export type UpdatePasswordInput = {
     currentPassword: string;

package/dist/components/profile/__generated__/ProfileUpdatePasswordModalMutation.graphql.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileUpdatePasswordModalMutation.graphql.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/profile/__generated__/ProfileUpdatePasswordModalMutation.graphql.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,MAAM,MAAM,mBAAmB,GAAG;IAChC,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AACF,MAAM,MAAM,4CAA4C,GAAG;IACzD,KAAK,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,uCAAuC,GAAG;IACpD,QAAQ,CAAC,cAAc,EAAE;QACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;KACrB,CAAC;CACH,CAAC;AACF,MAAM,MAAM,kCAAkC,GAAG;IAC/C,QAAQ,EAAE,uCAAuC,CAAC;IAClD,SAAS,EAAE,4CAA4C,CAAC;CACzD,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,eA4DR,CAAC;AAIL,eAAe,IAAI,CAAC"}

package/dist/{esm/components → components}/profile/__generated__/ProfileUpdatePasswordModalMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<9f61f220f29facf328ddeea77698279f>>
+ * @generated SignedSource<<98f5f690dc69060f35dc48468bd2f481>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -62,5 +62,4 @@ const node = function () {
   };
 }();
 node.hash = "efa37ccbe82fbace709f7e3992643c05";
-export default node;
-//# sourceMappingURL=ProfileUpdatePasswordModalMutation.graphql.js.map
+export default node;

package/dist/{types/components → components}/profile/__generated__/ProtectedWrapperQuery.graphql.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @generated SignedSource<<a105331072d86f186651d3270145cc53>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
 import { ConcreteRequest } from 'relay-runtime';
 export type ProtectedWrapperQuery$variables = Record<PropertyKey, never>;
 export type ProtectedWrapperQuery$data = {

package/dist/components/profile/__generated__/ProtectedWrapperQuery.graphql.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProtectedWrapperQuery.graphql.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/profile/__generated__/ProtectedWrapperQuery.graphql.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,MAAM,MAAM,+BAA+B,GAAG,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AACzE,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,OAAO,EAAE;QAChB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;QAC9C,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;QACpB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;KAC9C,CAAC;CACH,CAAC;AACF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,0BAA0B,CAAC;IACrC,SAAS,EAAE,+BAA+B,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,eA2ER,CAAC;AAIL,eAAe,IAAI,CAAC"}

package/dist/{esm/components → components}/profile/__generated__/ProtectedWrapperQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<0489a6f56dfca495d1c3633c9a224274>>
+ * @generated SignedSource<<a105331072d86f186651d3270145cc53>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -77,5 +77,4 @@ const node = function () {
   };
 }();
 node.hash = "903b234e48f53b4a44dc0b4974ebc521";
-export default node;
-//# sourceMappingURL=ProtectedWrapperQuery.graphql.js.map
+export default node;

package/dist/{types/components → components}/session/SessionDrawer.d.ts

@@ -1,4 +1,4 @@
-import { DrawerProps } from '@os-design/core';
+import { type DrawerProps } from '@os-design/core';
 import React from 'react';
 declare const SessionDrawer: React.FC<DrawerProps>;
 export default SessionDrawer;

package/dist/components/session/SessionDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionDrawer.d.ts","sourceRoot":"","sources":["../../../src/lib/components/session/SessionDrawer.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,WAAW,EAGjB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,KAAyB,MAAM,OAAO,CAAC;AAgB9C,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqBxC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/session/SessionDrawer.js

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import { Alert, Drawer, Layout, PageHeader } from '@os-design/core';
+import { useIsMinWidth } from '@os-design/media';
+import { ThemeOverrider } from '@os-design/theming';
+import React, { lazy, Suspense } from 'react';
+import { useTranslation } from 'react-i18next';
+import SessionListSkeleton from './SessionListSkeleton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LazySessionDrawerContent = /*#__PURE__*/lazy(() => import('./SessionDrawerContent'));
+const overrides = {
+  horizontalPadding: [1, 1]
+};
+const StyledPageHeader = styled(PageHeader)`
+  position: relative;
+`;
+const StyledAlert = styled(Alert)`
+  border-radius: 0;
+`;
+const SessionDrawer = props => {
+  const {
+    t
+  } = useTranslation(['profile']);
+  const isMinSm = useIsMinWidth('sm');
+  return /*#__PURE__*/_jsx(Drawer, {
+    placement: "right",
+    width: isMinSm ? '24em' : '90%',
+    ...props,
+    children: /*#__PURE__*/_jsx(ThemeOverrider, {
+      overrides: overrides,
+      children: /*#__PURE__*/_jsxs(Layout, {
+        children: [/*#__PURE__*/_jsx(StyledPageHeader, {
+          title: t('profile:sessions.title')
+        }), /*#__PURE__*/_jsx(StyledAlert, {
+          type: "info",
+          size: "small",
+          children: t('profile:sessions.description')
+        }), /*#__PURE__*/_jsx(Suspense, {
+          fallback: /*#__PURE__*/_jsx(SessionListSkeleton, {}),
+          children: /*#__PURE__*/_jsx(LazySessionDrawerContent, {})
+        })]
+      })
+    })
+  });
+};
+export default SessionDrawer;

package/dist/components/session/SessionDrawerContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionDrawerContent.d.ts","sourceRoot":"","sources":["../../../src/lib/components/session/SessionDrawerContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAyBxC,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAMjC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/{esm/components → components}/session/SessionDrawerContent.js

@@ -1,27 +1,29 @@
 var _SessionDrawerContentQuery;
 import React, { Suspense } from 'react';
-import { useLazyLoadQuery } from 'react-relay/hooks';
+import { useLazyLoadQuery } from 'react-relay';
 import { ErrorBoundary } from '@os-design/utils';
 import ErrorResult from '../shared/ErrorResult';
 import SessionList from './SessionList';
 import SessionListSkeleton from './SessionListSkeleton';
+import { jsx as _jsx } from "react/jsx-runtime";
 const SessionDrawerContentLoader = () => {
   const props = useLazyLoadQuery(_SessionDrawerContentQuery !== void 0 ? _SessionDrawerContentQuery : (_SessionDrawerContentQuery = require("./__generated__/SessionDrawerContentQuery.graphql"), _SessionDrawerContentQuery.hash && _SessionDrawerContentQuery.hash !== "1643ac6b9bd324d389dab9011e55b1ba" && console.error("The definition of 'SessionDrawerContentQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _SessionDrawerContentQuery), {}, {
     fetchPolicy: 'network-only'
   });
-  return /*#__PURE__*/React.createElement(SessionList, {
+  return /*#__PURE__*/_jsx(SessionList, {
     sessionsKey: props
   });
 };
 const errorFallback = ({
   error
-}) => /*#__PURE__*/React.createElement(ErrorResult, {
+}) => /*#__PURE__*/_jsx(ErrorResult, {
   error: error
 });
-const SessionDrawerContent = () => /*#__PURE__*/React.createElement(ErrorBoundary, {
-  fallback: errorFallback
-}, /*#__PURE__*/React.createElement(Suspense, {
-  fallback: /*#__PURE__*/React.createElement(SessionListSkeleton, null)
-}, /*#__PURE__*/React.createElement(SessionDrawerContentLoader, null)));
-export default SessionDrawerContent;
-//# sourceMappingURL=SessionDrawerContent.js.map
+const SessionDrawerContent = () => /*#__PURE__*/_jsx(ErrorBoundary, {
+  fallback: errorFallback,
+  children: /*#__PURE__*/_jsx(Suspense, {
+    fallback: /*#__PURE__*/_jsx(SessionListSkeleton, {}),
+    children: /*#__PURE__*/_jsx(SessionDrawerContentLoader, {})
+  })
+});
+export default SessionDrawerContent;

package/dist/{types/components → components}/session/SessionList.d.ts

@@ -1,15 +1,15 @@
 import React from 'react';
-import { SessionList_sessions$key } from './__generated__/SessionList_sessions.graphql';
+import { type SessionList_sessions$key } from './__generated__/SessionList_sessions.graphql';
 interface SessionListProps {
     sessionsKey: SessionList_sessions$key;
 }
 export declare const Title: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const List: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SESSION_LIST_PADDING_VERTICAL = 0.5;
 declare const SessionList: React.FC<SessionListProps>;

package/dist/components/session/SessionList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionList.d.ts","sourceRoot":"","sources":["../../../src/lib/components/session/SessionList.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAKpD,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,8CAA8C,CAAC;AAc7F,UAAU,gBAAgB;IACxB,WAAW,EAAE,wBAAwB,CAAC;CACvC;AAED,eAAO,MAAM,KAAK;;SAhBP,MAAO,WAAW;qFAmB5B,CAAC;AAEF,eAAO,MAAM,IAAI;;SArBN,MAAO,WAAW;qFAwB5B,CAAC;AAaF,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqF3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/{esm/components → components}/session/SessionList.js

@@ -4,8 +4,9 @@ import { Button, message } from '@os-design/core';
 import { clr } from '@os-design/theming';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useFragment, useMutation } from 'react-relay/hooks';
+import { useFragment, useMutation } from 'react-relay';
 import SessionListItem from './SessionListItem';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const sessionsFragment = _SessionList_sessions !== void 0 ? _SessionList_sessions : (_SessionList_sessions = require("./__generated__/SessionList_sessions.graphql"), _SessionList_sessions.hash && _SessionList_sessions.hash !== "1b21c937c7ba795f09bfcb5ada7d2510" && console.error("The definition of 'SessionList_sessions' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _SessionList_sessions);
 export const Title = styled.div`
   font-weight: 500;
@@ -56,20 +57,35 @@ const SessionList = ({
       }
     });
   }, [commitDestroyAllOtherSessions, currentSession === null || currentSession === void 0 ? void 0 : currentSession.id, t]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, currentSession && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null, t('profile:sessions.current')), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(SessionListItem, {
-    sessionKey: currentSession,
-    hideLastSeenAt: true
-  }))), otherSessions.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DestroyAllOtherSessionsButton, {
-    type: "ghost",
-    danger: true,
-    size: "small",
-    wide: "always",
-    loading: loadingDestroyAllOtherSessions,
-    onClick: destroyAllOtherSessions
-  }, t('profile:sessions.destroyAllOther')), /*#__PURE__*/React.createElement(OtherSessions, null, /*#__PURE__*/React.createElement(Title, null, t('profile:sessions.other'), " (", otherSessions.length, ")"), /*#__PURE__*/React.createElement(List, null, otherSessions.map(session => /*#__PURE__*/React.createElement(SessionListItem, {
-    key: session.id,
-    sessionKey: session
-  }))))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [currentSession && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Title, {
+        children: t('profile:sessions.current')
+      }), /*#__PURE__*/_jsx(List, {
+        children: /*#__PURE__*/_jsx(SessionListItem, {
+          sessionKey: currentSession,
+          hideLastSeenAt: true
+        })
+      })]
+    }), otherSessions.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(DestroyAllOtherSessionsButton, {
+        type: "ghost",
+        danger: true,
+        size: "small",
+        wide: "always",
+        loading: loadingDestroyAllOtherSessions,
+        onClick: destroyAllOtherSessions,
+        children: t('profile:sessions.destroyAllOther')
+      }), /*#__PURE__*/_jsxs(OtherSessions, {
+        children: [/*#__PURE__*/_jsxs(Title, {
+          children: [t('profile:sessions.other'), " (", otherSessions.length, ")"]
+        }), /*#__PURE__*/_jsx(List, {
+          children: otherSessions.map(session => /*#__PURE__*/_jsx(SessionListItem, {
+            sessionKey: session
+          }, session.id))
+        })]
+      })]
+    })]
+  });
 };
-export default SessionList;
-//# sourceMappingURL=SessionList.js.map
+export default SessionList;

package/dist/{types/components → components}/session/SessionListItem.d.ts

@@ -1,27 +1,27 @@
 import React from 'react';
-import { SessionListItem_session$key } from './__generated__/SessionListItem_session.graphql';
+import { type SessionListItem_session$key } from './__generated__/SessionListItem_session.graphql';
 interface SessionListItemProps {
     sessionKey: SessionListItem_session$key;
     hideLastSeenAt?: boolean;
 }
 export declare const Container: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Content: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 interface IconProps {
     bgColor: string;
 }
 export declare const Icon: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & IconProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const SessionListItem: React.FC<SessionListItemProps>;
 export default SessionListItem;

package/dist/components/session/SessionListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionListItem.d.ts","sourceRoot":"","sources":["../../../src/lib/components/session/SessionListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAgBpD,OAAO,EAAE,KAAK,2BAA2B,EAAE,MAAM,iDAAiD,CAAC;AA6BnG,UAAU,oBAAoB;IAC5B,UAAU,EAAE,2BAA2B,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,SAAS;;SAnClB,MAAO,WAAW;qFA6DrB,CAAC;AAOF,eAAO,MAAM,OAAO;;SApEhB,MAAO,WAAW;qFAuErB,CAAC;AAmDF,eAAO,MAAM,aAAa;;SA1HtB,MAAO,WAAW;qFA+HrB,CAAC;AAEF,UAAU,SAAS;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AACD,eAAO,MAAM,IAAI;;SAgEyB,MAAO,WACjD;iGAjDC,CAAC;AAaF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2InD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/{esm/components → components}/session/SessionListItem.js

@@ -1,6 +1,6 @@
 var _SessionListItem_session, _SessionListItemDestroySessionMutation;
 import React, { useCallback, useMemo } from 'react';
-import { useFragment, useMutation } from 'react-relay/hooks';
+import { useFragment, useMutation } from 'react-relay';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import pluralForms from '@os-team/plural-forms';
@@ -16,6 +16,7 @@ import UnknownDeviceIcon from '../shared/icons/UnknownDeviceIcon';
 import BrowserIcon from '../shared/icons/BrowserIcon';
 import AppleIcon from '../shared/icons/AppleIcon';
 import AndroidIcon from '../shared/icons/AndroidIcon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sessionListItemFragment = _SessionListItem_session !== void 0 ? _SessionListItem_session : (_SessionListItem_session = require("./__generated__/SessionListItem_session.graphql"), _SessionListItem_session.hash && _SessionListItem_session.hash !== "c73c341c5f6e75f7bef7402186ce242b" && console.error("The definition of 'SessionListItem_session' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _SessionListItem_session);
 export const Container = styled.div`
   display: flex;
@@ -165,14 +166,14 @@ const SessionListItem = ({
     })} ${t('profile:sessions.ago')}`;
   }, [i18n.language, session.lastSeenAt, t]);
   const [iconComponent, iconColor] = useMemo(() => {
-    if (browser) return [/*#__PURE__*/React.createElement(BrowserIcon, null), 'hsl(30, 60%, 50%)'];
+    if (browser) return [/*#__PURE__*/_jsx(BrowserIcon, {}, 'icon'), 'hsl(30, 60%, 50%)'];
     if (session.isApp) {
       if (session.osName === 'iOS' || session.osName === 'iPhone OS') {
-        return [/*#__PURE__*/React.createElement(AppleIcon, null), 'hsl(0, 0%, 50%)'];
+        return [/*#__PURE__*/_jsx(AppleIcon, {}, 'icon'), 'hsl(0, 0%, 50%)'];
       }
-      if (session.osName === 'Android') return [/*#__PURE__*/React.createElement(AndroidIcon, null), 'hsl(150, 60%, 50%)'];
+      if (session.osName === 'Android') return [/*#__PURE__*/_jsx(AndroidIcon, {}, 'icon'), 'hsl(150, 60%, 50%)'];
     }
-    return [/*#__PURE__*/React.createElement(UnknownDeviceIcon, null), 'hsl(5, 60%, 50%)'];
+    return [/*#__PURE__*/_jsx(UnknownDeviceIcon, {}, 'icon'), 'hsl(5, 60%, 50%)'];
   }, [browser, session.isApp, session.osName]);
   const [commitDestroySession, loadingDestroySession] = useMutation(_SessionListItemDestroySessionMutation !== void 0 ? _SessionListItemDestroySessionMutation : (_SessionListItemDestroySessionMutation = require("./__generated__/SessionListItemDestroySessionMutation.graphql"), _SessionListItemDestroySessionMutation.hash && _SessionListItemDestroySessionMutation.hash !== "ad6c0d1313a70dd63c0baccc2f7abd6e" && console.error("The definition of 'SessionListItemDestroySessionMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _SessionListItemDestroySessionMutation));
   const destroySession = useCallback(() => {
@@ -198,18 +199,35 @@ const SessionListItem = ({
       }
     });
   }, [commitDestroySession, session.id, t]);
-  return /*#__PURE__*/React.createElement(Container, handlers, /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(Icon, {
-    bgColor: iconColor
-  }, iconComponent)), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Title, null, title), deviceInfo && /*#__PURE__*/React.createElement(Info, null, deviceInfo), ip && /*#__PURE__*/React.createElement(Info, null, ip), !hideLastSeenAt && /*#__PURE__*/React.createElement(LastSeen, null, lastSeen)), /*#__PURE__*/React.createElement(Actions, {
-    hasSwipe: touchDevice,
-    opened: opened
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    wide: "never",
-    size: "small",
-    loading: loadingDestroySession,
-    onClick: destroySession
-  }, /*#__PURE__*/React.createElement(SignOut, null))));
+  return /*#__PURE__*/_jsxs(Container, {
+    ...handlers,
+    children: [/*#__PURE__*/_jsx(IconContainer, {
+      children: /*#__PURE__*/_jsx(Icon, {
+        bgColor: iconColor,
+        children: iconComponent
+      })
+    }), /*#__PURE__*/_jsxs(Content, {
+      children: [/*#__PURE__*/_jsx(Title, {
+        children: title
+      }), deviceInfo && /*#__PURE__*/_jsx(Info, {
+        children: deviceInfo
+      }), ip && /*#__PURE__*/_jsx(Info, {
+        children: ip
+      }), !hideLastSeenAt && /*#__PURE__*/_jsx(LastSeen, {
+        children: lastSeen
+      })]
+    }), /*#__PURE__*/_jsx(Actions, {
+      hasSwipe: touchDevice,
+      opened: opened,
+      children: /*#__PURE__*/_jsx(Button, {
+        type: "ghost",
+        wide: "never",
+        size: "small",
+        loading: loadingDestroySession,
+        onClick: destroySession,
+        children: /*#__PURE__*/_jsx(SignOut, {})
+      })
+    })]
+  });
 };
-export default SessionListItem;
-//# sourceMappingURL=SessionListItem.js.map
+export default SessionListItem;

package/dist/components/session/SessionListSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionListSkeleton.d.ts","sourceRoot":"","sources":["../../../src/lib/components/session/SessionListSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwB1B,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAqBhC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/session/SessionListSkeleton.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Skeleton } from '@os-design/core';
+import styled from '@emotion/styled';
+import { Container, Content, IconContainer } from './SessionListItem';
+import { Title, List } from './SessionList';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const IconSkeleton = styled(Skeleton)`
+  width: 1.82em;
+  height: 1.82em;
+`;
+const ContainerSkeleton = styled(Container)`
+  padding: 0.8em 0;
+`;
+const TitleSkeleton = styled(Skeleton)`
+  height: ${p => p.theme.sizes.small}em;
+`;
+const InfoSkeleton = styled(TitleSkeleton)`
+  margin-top: 0.3em;
+`;
+const SessionListSkeleton = () => {
+  const {
+    t
+  } = useTranslation(['profile']);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Title, {
+      children: t('profile:sessions.current')
+    }), /*#__PURE__*/_jsx(List, {
+      children: /*#__PURE__*/_jsxs(ContainerSkeleton, {
+        children: [/*#__PURE__*/_jsx(IconContainer, {
+          children: /*#__PURE__*/_jsx(IconSkeleton, {})
+        }), /*#__PURE__*/_jsxs(Content, {
+          children: [/*#__PURE__*/_jsx(TitleSkeleton, {
+            width: "50%"
+          }), /*#__PURE__*/_jsx(InfoSkeleton, {}), /*#__PURE__*/_jsx(InfoSkeleton, {
+            width: "90%"
+          })]
+        })]
+      })
+    })]
+  });
+};
+export default SessionListSkeleton;

package/dist/{types/components → components}/session/__generated__/SessionDrawerContentQuery.graphql.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @generated SignedSource<<64df87dd058f26f9e4849449241ada0f>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
 import { ConcreteRequest } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type SessionDrawerContentQuery$variables = Record<PropertyKey, never>;

package/dist/components/session/__generated__/SessionDrawerContentQuery.graphql.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionDrawerContentQuery.graphql.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/session/__generated__/SessionDrawerContentQuery.graphql.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,MAAM,MAAM,mCAAmC,GAAG,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC7E,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,CAAC,mBAAmB,EAAE,YAAY,CAAC,sBAAsB,CAAC,CAAC;CACpE,CAAC;AACF,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,8BAA8B,CAAC;IACzC,SAAS,EAAE,mCAAmC,CAAC;CAChD,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,eA2JX,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/dist/{esm/components → components}/session/__generated__/SessionDrawerContentQuery.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<d218bfec45daa388d75c95b9d58d8e97>>
+ * @generated SignedSource<<64df87dd058f26f9e4849449241ada0f>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -144,5 +144,4 @@ const node = {
   }
 };
 node.hash = "1643ac6b9bd324d389dab9011e55b1ba";
-export default node;
-//# sourceMappingURL=SessionDrawerContentQuery.graphql.js.map
+export default node;

package/dist/{types/components → components}/session/__generated__/SessionListDestroyAllOtherSessionsMutation.graphql.d.ts

@@ -1,3 +1,8 @@
+/**
+ * @generated SignedSource<<2218d8fc90b51a497af7a28a79b5b1cf>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
 import { ConcreteRequest } from 'relay-runtime';
 export type SessionListDestroyAllOtherSessionsMutation$variables = Record<PropertyKey, never>;
 export type SessionListDestroyAllOtherSessionsMutation$data = {

package/dist/components/session/__generated__/SessionListDestroyAllOtherSessionsMutation.graphql.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionListDestroyAllOtherSessionsMutation.graphql.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/session/__generated__/SessionListDestroyAllOtherSessionsMutation.graphql.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,MAAM,MAAM,oDAAoD,GAAG,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC9F,MAAM,MAAM,+CAA+C,GAAG;IAC5D,QAAQ,CAAC,uBAAuB,EAAE;QAChC,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAC;KACtB,CAAC;CACH,CAAC;AACF,MAAM,MAAM,0CAA0C,GAAG;IACvD,QAAQ,EAAE,+CAA+C,CAAC;IAC1D,SAAS,EAAE,oDAAoD,CAAC;CACjE,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,eA+CR,CAAC;AAIL,eAAe,IAAI,CAAC"}

package/dist/{esm/components → components}/session/__generated__/SessionListDestroyAllOtherSessionsMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<a64c6c324728223ca8178497d7f1a000>>
+ * @generated SignedSource<<2218d8fc90b51a497af7a28a79b5b1cf>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -53,5 +53,4 @@ const node = function () {
   };
 }();
 node.hash = "016b6b5e7ae228f7df552d97fa43bd40";
-export default node;
-//# sourceMappingURL=SessionListDestroyAllOtherSessionsMutation.graphql.js.map
+export default node;