@seamapi/react 0.12.0 → 0.14.0

package/README.md

@@ -34,10 +34,10 @@ $ npm install @seamapi/react
 3. Drop in Seam components.
 
 ```ts
-import { SeamProvider, DeviceManager } from '@seamapi/react'
-
 import '@seamapi/react/index.css'
 
+import { SeamProvider, DeviceManager } from '@seamapi/react'
+
 export const App = () => {
   return (
     <SeamProvider publishableKey='your_publishable_key'>
@@ -66,6 +66,27 @@ Load the font from Google Fonts by placing the following in the `<head>` tag:
 
 [Source Sans Pro]: https://fonts.google.com/specimen/Source+Sans+Pro
 
+### Content Security Policy (CSP)
+
+By self hosting the recommended fonts (or choosing not to use them),
+and proxying the Seam endpoint, the components are compatible with the strictest CSP:
+
+```
+default-src 'self'
+```
+
+When using the default endpoint:
+
+```
+default-src 'self'; connect-src https://connect.getseam.com
+```
+
+When serving the fonts from Google Fonts:
+
+```
+default-src 'self'; font-src 'self' https://fonts.gstatic.com; style-src 'self' https://fonts.googleapis.com
+```
+
 ## Development and Testing
 
 ### Quickstart

package/lib/SeamProvider.js

@@ -52,7 +52,7 @@ const defaultSeamContextValue = createDefaultSeamContextValue();
 export const seamContext = createContext(defaultSeamContextValue);
 export function useSeamContext() {
     const context = useContext(seamContext);
-    if (context === undefined) {
+    if (context == null) {
         throw new Error('useSeamContext must be used inside a <SeamProvider/>');
     }
     return context;

package/lib/SeamProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"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"}

package/lib/icons/index.d.ts

@@ -1,13 +1,2 @@
-export { AccessCodeKeyIcon } from './AccessCodeKey.js';
-export { ArrowBackIcon } from './ArrowBack.js';
-export { BatteryLevelCriticalIcon } from './BatteryLevelCritical.js';
-export { BatteryLevelFullIcon } from './BatteryLevelFull.js';
-export { BatteryLevelHighIcon } from './BatteryLevelHigh.js';
-export { BatteryLevelLowIcon } from './BatteryLevelLow.js';
-export { BatteryLevelWiredIcon } from './BatteryLevelWired.js';
-export { ChevronRightIcon } from './ChevronRight.js';
-export { DotsEllipsisMoreIcon } from './DotsEllipsisMore.js';
-export { OnlineStatusAccountOfflineIcon } from './OnlineStatusAccountOffline.js';
-export { OnlineStatusDeviceOfflineIcon } from './OnlineStatusDeviceOffline.js';
-export { OnlineStatusOnlineIcon } from './OnlineStatusOnline.js';
-export { SeamIcon } from './Seam.js';
+declare const _default: null;
+export default _default;

package/lib/icons/index.js

@@ -1,14 +1,2 @@
-export { AccessCodeKeyIcon } from './AccessCodeKey.js';
-export { ArrowBackIcon } from './ArrowBack.js';
-export { BatteryLevelCriticalIcon } from './BatteryLevelCritical.js';
-export { BatteryLevelFullIcon } from './BatteryLevelFull.js';
-export { BatteryLevelHighIcon } from './BatteryLevelHigh.js';
-export { BatteryLevelLowIcon } from './BatteryLevelLow.js';
-export { BatteryLevelWiredIcon } from './BatteryLevelWired.js';
-export { ChevronRightIcon } from './ChevronRight.js';
-export { DotsEllipsisMoreIcon } from './DotsEllipsisMore.js';
-export { OnlineStatusAccountOfflineIcon } from './OnlineStatusAccountOffline.js';
-export { OnlineStatusDeviceOfflineIcon } from './OnlineStatusDeviceOffline.js';
-export { OnlineStatusOnlineIcon } from './OnlineStatusOnline.js';
-export { SeamIcon } from './Seam.js';
+export default null;
 //# sourceMappingURL=index.js.map

package/lib/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/icons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,8BAA8B,EAAE,MAAM,iCAAiC,CAAA;AAChF,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAA;AAC9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/icons/index.ts"],"names":[],"mappings":"AAAA,eAAe,IAAI,CAAA"}

package/lib/ui/AccessCodeTable/CodeDetails.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import dayjs from 'dayjs';
+import { DateTime } from 'luxon';
 import { DotDivider } from '../../../lib/ui/layout/DotDivider.js';
 export function CodeDetails(props) {
     const { accessCode } = props;
@@ -8,21 +8,24 @@ export function CodeDetails(props) {
 function Duration(props) {
     const { accessCode } = props;
     if (accessCode.type === 'ongoing') {
-        return _jsxs("span", { children: [t.ends, ": Never"] });
+        return (_jsxs("span", { children: [t.ends, ": ", t.never] }));
     }
     const hasStarted = new Date(accessCode.starts_at).valueOf() < Date.now();
     if (hasStarted) {
         return (_jsxs("span", { children: [t.ends, ": ", formatDate(accessCode.ends_at), ' '] }));
     }
-    // is in future
     return (_jsxs("span", { children: [t.starts, ": ", formatDate(accessCode.starts_at)] }));
 }
 function formatDate(date) {
-    return dayjs(date).format('MMM D');
+    return DateTime.fromISO(date).toLocaleString({
+        month: 'long',
+        day: 'numeric',
+    });
 }
 const t = {
     code: 'Code',
     starts: 'Starts',
     ends: 'Ends',
+    never: 'Never',
 };
 //# sourceMappingURL=CodeDetails.js.map

package/lib/ui/AccessCodeTable/CodeDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/CodeDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAExD,MAAM,UAAU,WAAW,CAAC,KAAiC;IAC3D,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAE5B,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,yBAEvC,KAAC,UAAU,KAAG,EACd,KAAC,QAAQ,IAAC,UAAU,EAAE,UAAU,GAAI,EACpC,KAAC,UAAU,KAAG,EACb,CAAC,CAAC,IAAI,QAAI,UAAU,CAAC,IAAI,IACtB,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAAiC;IACjD,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAC5B,IAAI,UAAU,CAAC,IAAI,KAAK,SAAS,EAAE;QACjC,OAAO,2BAAO,CAAC,CAAC,IAAI,eAAe,CAAA;KACpC;IAED,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAA;IACxE,IAAI,UAAU,EAAE;QACd,OAAO,CACL,2BACG,CAAC,CAAC,IAAI,QAAI,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,GAAG,IACzC,CACR,CAAA;KACF;IAED,eAAe;IACf,OAAO,CACL,2BACG,CAAC,CAAC,MAAM,QAAI,UAAU,CAAC,UAAU,CAAC,SAAS,CAAC,IACxC,CACR,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,IAAY;IAC9B,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;AACpC,CAAC;AAED,MAAM,CAAC,GAAG;IACR,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;CACb,CAAA"}
+{"version":3,"file":"CodeDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/CodeDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGhC,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAExD,MAAM,UAAU,WAAW,CAAC,KAAiC;IAC3D,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAE5B,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,yBAEvC,KAAC,UAAU,KAAG,EACd,KAAC,QAAQ,IAAC,UAAU,EAAE,UAAU,GAAI,EACpC,KAAC,UAAU,KAAG,EACb,CAAC,CAAC,IAAI,QAAI,UAAU,CAAC,IAAI,IACtB,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAAiC;IACjD,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAC5B,IAAI,UAAU,CAAC,IAAI,KAAK,SAAS,EAAE;QACjC,OAAO,CACL,2BACG,CAAC,CAAC,IAAI,QAAI,CAAC,CAAC,KAAK,IACb,CACR,CAAA;KACF;IAED,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAA;IACxE,IAAI,UAAU,EAAE;QACd,OAAO,CACL,2BACG,CAAC,CAAC,IAAI,QAAI,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,GAAG,IACzC,CACR,CAAA;KACF;IAED,OAAO,CACL,2BACG,CAAC,CAAC,MAAM,QAAI,UAAU,CAAC,UAAU,CAAC,SAAS,CAAC,IACxC,CACR,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,IAAY;IAC9B,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC;QAC3C,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,SAAS;KACf,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,CAAC,GAAG;IACR,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAA"}

package/lib/ui/DeviceDetails/BatteryStatus.js

@@ -3,34 +3,31 @@ import { BatteryLevelCriticalIcon } from '../../../lib/icons/BatteryLevelCritica
 import { BatteryLevelFullIcon } from '../../../lib/icons/BatteryLevelFull.js';
 import { BatteryLevelHighIcon } from '../../../lib/icons/BatteryLevelHigh.js';
 import { BatteryLevelLowIcon } from '../../../lib/icons/BatteryLevelLow.js';
-/**
- * Thresholds to determine the battery status
- */
-const BATTERY_LEVEL = {
-    FULL: 0.85,
-    HIGH: 0.6,
-    LOW: 0.3,
-};
 export function BatteryStatus(props) {
     const { device: { properties: { battery_level: batteryLevel }, }, } = props;
-    if (batteryLevel === undefined) {
+    if (batteryLevel == null) {
         return null;
     }
     return (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'seam-label', children: [t.power, ":"] }), ' ', _jsx("div", { className: 'seam-battery-status', children: _jsx(Status, { batteryLevel: batteryLevel }) })] }));
 }
 function Status(props) {
     const { batteryLevel } = props;
-    if (batteryLevel > BATTERY_LEVEL.FULL) {
+    if (batteryLevel > batteryThreshold.full) {
         return (_jsxs(_Fragment, { children: [_jsx(BatteryLevelFullIcon, {}), _jsx("span", { className: 'seam-status-text', children: t.full })] }));
     }
-    if (batteryLevel > BATTERY_LEVEL.HIGH) {
+    if (batteryLevel > batteryThreshold.high) {
         return (_jsxs(_Fragment, { children: [_jsx(BatteryLevelHighIcon, {}), _jsx("span", { className: 'seam-status-text', children: t.high })] }));
     }
-    if (batteryLevel > BATTERY_LEVEL.LOW) {
+    if (batteryLevel > batteryThreshold.low) {
         return (_jsxs(_Fragment, { children: [_jsx(BatteryLevelLowIcon, {}), _jsx("span", { className: 'seam-status-text', children: t.low })] }));
     }
     return (_jsxs(_Fragment, { children: [_jsx(BatteryLevelCriticalIcon, {}), _jsx("span", { className: 'seam-text-danger', children: t.critical })] }));
 }
+const batteryThreshold = {
+    full: 0.85,
+    high: 0.6,
+    low: 0.3,
+};
 const t = {
     power: 'Power',
     full: 'Good',

package/lib/ui/DeviceDetails/BatteryStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"BatteryStatus.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/BatteryStatus.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAA;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAElE;;GAEG;AACH,MAAM,aAAa,GAAG;IACpB,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,GAAG;IACT,GAAG,EAAE,GAAG;CACT,CAAA;AACD,MAAM,UAAU,aAAa,CAAC,KAA6B;IACzD,MAAM,EACJ,MAAM,EAAE,EACN,UAAU,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,GAC5C,GACF,GAAG,KAAK,CAAA;IAET,IAAI,YAAY,KAAK,SAAS,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,8BACE,gBAAM,SAAS,EAAC,YAAY,aAAE,CAAC,CAAC,KAAK,SAAS,EAAC,GAAG,EAClD,cAAK,SAAS,EAAC,qBAAqB,YAClC,KAAC,MAAM,IAAC,YAAY,EAAE,YAAY,GAAI,GAClC,IACL,CACJ,CAAA;AACH,CAAC;AAED,SAAS,MAAM,CAAC,KAA+B;IAC7C,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAA;IAE9B,IAAI,YAAY,GAAG,aAAa,CAAC,IAAI,EAAE;QACrC,OAAO,CACL,8BACE,KAAC,oBAAoB,KAAG,EACxB,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,IAAI,GAAQ,IACjD,CACJ,CAAA;KACF;IAED,IAAI,YAAY,GAAG,aAAa,CAAC,IAAI,EAAE;QACrC,OAAO,CACL,8BACE,KAAC,oBAAoB,KAAG,EACxB,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,IAAI,GAAQ,IACjD,CACJ,CAAA;KACF;IAED,IAAI,YAAY,GAAG,aAAa,CAAC,GAAG,EAAE;QACpC,OAAO,CACL,8BACE,KAAC,mBAAmB,KAAG,EACvB,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,GAAG,GAAQ,IAChD,CACJ,CAAA;KACF;IAED,OAAO,CACL,8BACE,KAAC,wBAAwB,KAAG,EAC5B,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,QAAQ,GAAQ,IACrD,CACJ,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;IACV,QAAQ,EAAE,MAAM;CACjB,CAAA"}
+{"version":3,"file":"BatteryStatus.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/BatteryStatus.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAA;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAA;AAElE,MAAM,UAAU,aAAa,CAAC,KAE7B;IACC,MAAM,EACJ,MAAM,EAAE,EACN,UAAU,EAAE,EAAE,aAAa,EAAE,YAAY,EAAE,GAC5C,GACF,GAAG,KAAK,CAAA;IAET,IAAI,YAAY,IAAI,IAAI,EAAE;QACxB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,8BACE,gBAAM,SAAS,EAAC,YAAY,aAAE,CAAC,CAAC,KAAK,SAAS,EAAC,GAAG,EAClD,cAAK,SAAS,EAAC,qBAAqB,YAClC,KAAC,MAAM,IAAC,YAAY,EAAE,YAAY,GAAI,GAClC,IACL,CACJ,CAAA;AACH,CAAC;AAED,SAAS,MAAM,CAAC,KAA+B;IAC7C,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAA;IAE9B,IAAI,YAAY,GAAG,gBAAgB,CAAC,IAAI,EAAE;QACxC,OAAO,CACL,8BACE,KAAC,oBAAoB,KAAG,EACxB,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,IAAI,GAAQ,IACjD,CACJ,CAAA;KACF;IAED,IAAI,YAAY,GAAG,gBAAgB,CAAC,IAAI,EAAE;QACxC,OAAO,CACL,8BACE,KAAC,oBAAoB,KAAG,EACxB,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,IAAI,GAAQ,IACjD,CACJ,CAAA;KACF;IAED,IAAI,YAAY,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACvC,OAAO,CACL,8BACE,KAAC,mBAAmB,KAAG,EACvB,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,GAAG,GAAQ,IAChD,CACJ,CAAA;KACF;IAED,OAAO,CACL,8BACE,KAAC,wBAAwB,KAAG,EAC5B,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,QAAQ,GAAQ,IACrD,CACJ,CAAA;AACH,CAAC;AAED,MAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,GAAG;IACT,GAAG,EAAE,GAAG;CACT,CAAA;AAED,MAAM,CAAC,GAAG;IACR,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;IACV,QAAQ,EAAE,MAAM;CACjB,CAAA"}

package/lib/ui/DeviceDetails/DeviceDetails.js

@@ -11,7 +11,7 @@ import useToggle from '../../../lib/use-toggle.js';
 export function DeviceDetails(props) {
     const { device } = props;
     const lockStatus = device.properties.locked ? t.locked : t.unlocked;
-    const accessCodeLength = device.properties?.schlage_metadata?.access_code_length ?? null;
+    const accessCodeLength = device.properties?.schlage_metadata?.access_code_length;
     // TODO : Fetch access codes
     const accessCodes = [];
     const [showingAccessCodes, toggleAccessCodes] = useToggle();
@@ -22,7 +22,7 @@ export function DeviceDetails(props) {
 }
 function AccessCodeLength(props) {
     const { accessCodeLength } = props;
-    if (accessCodeLength === null) {
+    if (accessCodeLength == null) {
         return null;
     }
     return (_jsxs("div", { className: 'seam-content seam-access-code-length', children: [_jsx("span", { className: 'seam-label', children: t.codeLength }), _jsxs("span", { className: 'seam-value', children: [accessCodeLength, " ", t.digits] })] }));
@@ -33,6 +33,6 @@ const t = {
     accessCodes: 'access codes',
     codeLength: 'Code length',
     digits: 'digits',
-    lockStatus: 'lockStatus',
+    lockStatus: 'Lock status',
 };
 //# sourceMappingURL=DeviceDetails.js.map

package/lib/ui/DeviceDetails/DeviceDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":"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"}

package/lib/ui/DeviceDetails/DeviceImage.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-const FALLBACK_IMAGE_URL = 'https://connect.getseam.com/assets/images/devices/unknown-lock.png';
 export function DeviceImage(props) {
     const { device } = props;
-    const url = device.properties.image_url ?? FALLBACK_IMAGE_URL;
+    const url = device.properties.image_url ?? fallbackImageUrl;
     return _jsx("img", { src: url, alt: device.properties.name });
 }
+const fallbackImageUrl = 'https://connect.getseam.com/assets/images/devices/unknown-lock.png';
 //# sourceMappingURL=DeviceImage.js.map

package/lib/ui/DeviceDetails/DeviceImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceImage.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceImage.tsx"],"names":[],"mappings":";AAEA,MAAM,kBAAkB,GACtB,oEAAoE,CAAA;AAEtE,MAAM,UAAU,WAAW,CAAC,KAA6B;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAExB,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,IAAI,kBAAkB,CAAA;IAE7D,OAAO,cAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI,GAAI,CAAA;AACvD,CAAC"}
+{"version":3,"file":"DeviceImage.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceImage.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,WAAW,CAAC,KAA6B;IACvD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAExB,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,IAAI,gBAAgB,CAAA;IAE3D,OAAO,cAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,UAAU,CAAC,IAAI,GAAI,CAAA;AACvD,CAAC;AAED,MAAM,gBAAgB,GACpB,oEAAoE,CAAA"}

package/lib/ui/DeviceDetails/ModelStatus.js

@@ -1,10 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 export function ModelStatus(props) {
     const { device: { properties }, } = props;
-    const model = properties?.august_metadata?.model ??
-        properties?.schlage_metadata?.model ??
-        null;
-    if (model === null) {
+    const model = properties?.august_metadata?.model ?? properties?.schlage_metadata?.model;
+    if (model == null) {
         return null;
     }
     return (_jsxs(_Fragment, { children: [_jsxs("span", { className: 'seam-label', children: [t.model, ":"] }), ' ', _jsx("div", { className: 'seam-device-model', children: model })] }));

package/lib/ui/DeviceDetails/ModelStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelStatus.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/ModelStatus.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,WAAW,CAAC,KAA6B;IACvD,MAAM,EACJ,MAAM,EAAE,EAAE,UAAU,EAAE,GACvB,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GACT,UAAU,EAAE,eAAe,EAAE,KAAK;QAClC,UAAU,EAAE,gBAAgB,EAAE,KAAK;QACnC,IAAI,CAAA;IAEN,IAAI,KAAK,KAAK,IAAI,EAAE;QAClB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,8BACE,gBAAM,SAAS,EAAC,YAAY,aAAE,CAAC,CAAC,KAAK,SAAS,EAAC,GAAG,EAClD,cAAK,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAO,IAC/C,CACJ,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,KAAK,EAAE,OAAO;CACf,CAAA"}
+{"version":3,"file":"ModelStatus.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/ModelStatus.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,WAAW,CAAC,KAA6B;IACvD,MAAM,EACJ,MAAM,EAAE,EAAE,UAAU,EAAE,GACvB,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GACT,UAAU,EAAE,eAAe,EAAE,KAAK,IAAI,UAAU,EAAE,gBAAgB,EAAE,KAAK,CAAA;IAE3E,IAAI,KAAK,IAAI,IAAI,EAAE;QACjB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,8BACE,gBAAM,SAAS,EAAC,YAAY,aAAE,CAAC,CAAC,KAAK,SAAS,EAAC,GAAG,EAClD,cAAK,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAO,IAC/C,CACJ,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,KAAK,EAAE,OAAO;CACf,CAAA"}

package/lib/ui/Table/TableBody.d.ts

@@ -1,4 +1,2 @@
-import type { ReactNode } from 'react';
-export declare function TableBody(props: {
-    children: ReactNode;
-}): JSX.Element;
+import type { PropsWithChildren } from 'react';
+export declare function TableBody({ children }: PropsWithChildren): JSX.Element;

package/lib/ui/Table/TableBody.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function TableBody(props) {
-    return _jsx("div", { className: 'seam-table-body', children: props.children });
+export function TableBody({ children }) {
+    return _jsx("div", { className: 'seam-table-body', children: children });
 }
 //# sourceMappingURL=TableBody.js.map

package/lib/ui/Table/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/TableBody.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,SAAS,CAAC,KAA8B;IACtD,OAAO,cAAK,SAAS,EAAC,iBAAiB,YAAE,KAAK,CAAC,QAAQ,GAAO,CAAA;AAChE,CAAC"}
+{"version":3,"file":"TableBody.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/TableBody.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAqB;IACvD,OAAO,cAAK,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAO,CAAA;AAC1D,CAAC"}

package/lib/ui/Table/TableHeader.d.ts

@@ -1,4 +1,2 @@
-import type { ReactNode } from 'react';
-export declare function TableHeader(props: {
-    children: ReactNode;
-}): JSX.Element;
+import type { PropsWithChildren } from 'react';
+export declare function TableHeader({ children }: PropsWithChildren): JSX.Element;

package/lib/ui/Table/TableHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function TableHeader(props) {
-    return _jsx("div", { className: 'seam-table-header', children: props.children });
+export function TableHeader({ children }) {
+    return _jsx("div", { className: 'seam-table-header', children: children });
 }
 //# sourceMappingURL=TableHeader.js.map

package/lib/ui/Table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/TableHeader.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,WAAW,CAAC,KAA8B;IACxD,OAAO,cAAK,SAAS,EAAC,mBAAmB,YAAE,KAAK,CAAC,QAAQ,GAAO,CAAA;AAClE,CAAC"}
+{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/TableHeader.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAqB;IACzD,OAAO,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,CAAA;AAC5D,CAAC"}

package/lib/ui/Table/TableTitle.d.ts

@@ -1,4 +1,2 @@
-import type { ReactNode } from 'react';
-export declare function TableTitle(props: {
-    children: ReactNode;
-}): JSX.Element;
+import type { PropsWithChildren } from 'react';
+export declare function TableTitle({ children }: PropsWithChildren): JSX.Element;

package/lib/ui/Table/TableTitle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function TableTitle(props) {
-    return _jsx("h5", { className: 'seam-table-title', children: props.children });
+export function TableTitle({ children }) {
+    return _jsx("h5", { className: 'seam-table-title', children: children });
 }
 //# sourceMappingURL=TableTitle.js.map

package/lib/ui/Table/TableTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableTitle.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/TableTitle.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,UAAU,CAAC,KAA8B;IACvD,OAAO,aAAI,SAAS,EAAC,kBAAkB,YAAE,KAAK,CAAC,QAAQ,GAAM,CAAA;AAC/D,CAAC"}
+{"version":3,"file":"TableTitle.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/TableTitle.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAqB;IACxD,OAAO,aAAI,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAM,CAAA;AACzD,CAAC"}

package/lib/ui/TextField/SearchTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchTextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/SearchTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,SAAS,EAAuB,MAAM,2BAA2B,CAAA;AAE1E,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,UAAU,EAAkB;IAC1E,OAAO,CACL,KAAC,SAAS,OACJ,UAAU,EACd,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,wBAAwB,CAAC,GAC1D,CACH,CAAA;AACH,CAAC"}
+{"version":3,"file":"SearchTextField.js","sourceRoot":"","sources":["../../../src/lib/ui/TextField/SearchTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAEnC,OAAO,EAAE,SAAS,EAAuB,MAAM,2BAA2B,CAAA;AAE1E,MAAM,UAAU,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,UAAU,EACE;IACf,OAAO,CACL,KAAC,SAAS,OACJ,UAAU,EACd,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,wBAAwB,CAAC,GAC1D,CACH,CAAA;AACH,CAAC"}

package/lib/ui/layout/ContentHeader.js

@@ -4,7 +4,7 @@ export function ContentHeader(props) {
     return (_jsxs("div", { className: 'seam-content-header', children: [_jsx(BackIcon, { onClick: props.onClickBack }), _jsx("span", { className: 'seam-title', children: props.title })] }));
 }
 function BackIcon(props) {
-    if (props.onClick === undefined) {
+    if (props.onClick == null) {
         return null;
     }
     return _jsx(ArrowBackIcon, { className: 'seam-back-icon', onClick: props.onClick });

package/lib/ui/layout/ContentHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/ContentHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEtD,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,OAAO,EAAE,KAAK,CAAC,WAAW,GAAI,EACxC,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,CAAC,KAAK,GAAQ,IAC7C,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAA+B;IAC/C,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE;QAC/B,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAC,aAAa,IAAC,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAA;AAC7E,CAAC"}
+{"version":3,"file":"ContentHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/ContentHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEtD,MAAM,UAAU,aAAa,CAAC,KAG7B;IACC,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,QAAQ,IAAC,OAAO,EAAE,KAAK,CAAC,WAAW,GAAI,EACxC,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,CAAC,KAAK,GAAQ,IAC7C,CACP,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAA+B;IAC/C,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,EAAE;QACzB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,KAAC,aAAa,IAAC,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,CAAA;AAC7E,CAAC"}

package/lib/ui/typography/Caption.d.ts

@@ -1,4 +1,2 @@
-import type { ReactNode } from 'react';
-export declare function Caption(props: {
-    children: ReactNode;
-}): JSX.Element;
+import type { PropsWithChildren } from 'react';
+export declare function Caption({ children }: PropsWithChildren): JSX.Element;

package/lib/ui/typography/Caption.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function Caption(props) {
-    return _jsx("span", { className: 'seam-caption', children: props.children });
+export function Caption({ children }) {
+    return _jsx("span", { className: 'seam-caption', children: children });
 }
 //# sourceMappingURL=Caption.js.map

package/lib/ui/typography/Caption.js.map

@@ -1 +1 @@
-{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../src/lib/ui/typography/Caption.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,OAAO,CAAC,KAA8B;IACpD,OAAO,eAAM,SAAS,EAAC,cAAc,YAAE,KAAK,CAAC,QAAQ,GAAQ,CAAA;AAC/D,CAAC"}
+{"version":3,"file":"Caption.js","sourceRoot":"","sources":["../../../src/lib/ui/typography/Caption.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAqB;IACrD,OAAO,eAAM,SAAS,EAAC,cAAc,YAAE,QAAQ,GAAQ,CAAA;AACzD,CAAC"}

package/lib/ui/typography/Title.d.ts

@@ -1,4 +1,2 @@
-import type { ReactNode } from 'react';
-export declare function Title(props: {
-    children: ReactNode;
-}): JSX.Element;
+import type { PropsWithChildren } from 'react';
+export declare function Title({ children }: PropsWithChildren): JSX.Element;

package/lib/ui/typography/Title.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function Title(props) {
-    return _jsx("span", { className: 'seam-title', children: props.children });
+export function Title({ children }) {
+    return _jsx("span", { className: 'seam-title', children: children });
 }
 //# sourceMappingURL=Title.js.map

package/lib/ui/typography/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../../src/lib/ui/typography/Title.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,KAAK,CAAC,KAA8B;IAClD,OAAO,eAAM,SAAS,EAAC,YAAY,YAAE,KAAK,CAAC,QAAQ,GAAQ,CAAA;AAC7D,CAAC"}
+{"version":3,"file":"Title.js","sourceRoot":"","sources":["../../../src/lib/ui/typography/Title.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAqB;IACnD,OAAO,eAAM,SAAS,EAAC,YAAY,YAAE,QAAQ,GAAQ,CAAA;AACvD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Seam React component library.",
   "type": "module",
   "main": "index.js",
@@ -91,9 +91,9 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^4.28.0",
-    "seamapi": "^5.19.0-alpha.2",
     "classnames": "^2.3.2",
-    "dayjs": "^1.11.7",
+    "luxon": "^3.3.0",
+    "seamapi": "^5.19.0-alpha.2",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -115,7 +115,7 @@
     "@svgr/cli": "^7.0.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.0",
-    "@types/ms": "^0.7.31",
+    "@types/luxon": "^3.3.0",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
@@ -134,11 +134,9 @@
     "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-unused-imports": "^2.0.0",
     "fast-glob": "^3.2.12",
-    "get-port": "^6.1.2",
     "http-proxy-middleware": "^2.0.6",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "ms": "^2.1.3",
     "prettier": "^2.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

package/src/lib/SeamProvider.tsx

@@ -109,10 +109,10 @@ const defaultSeamContextValue = createDefaultSeamContextValue()
 
 export const seamContext = createContext<SeamContext>(defaultSeamContextValue)
 
-export function useSeamContext() {
+export function useSeamContext(): SeamContext {
   const context = useContext(seamContext)
 
-  if (context === undefined) {
+  if (context == null) {
     throw new Error('useSeamContext must be used inside a <SeamProvider/>')
   }
 

package/src/lib/icons/index.ts

@@ -1,13 +1 @@
-export { AccessCodeKeyIcon } from './AccessCodeKey.js'
-export { ArrowBackIcon } from './ArrowBack.js'
-export { BatteryLevelCriticalIcon } from './BatteryLevelCritical.js'
-export { BatteryLevelFullIcon } from './BatteryLevelFull.js'
-export { BatteryLevelHighIcon } from './BatteryLevelHigh.js'
-export { BatteryLevelLowIcon } from './BatteryLevelLow.js'
-export { BatteryLevelWiredIcon } from './BatteryLevelWired.js'
-export { ChevronRightIcon } from './ChevronRight.js'
-export { DotsEllipsisMoreIcon } from './DotsEllipsisMore.js'
-export { OnlineStatusAccountOfflineIcon } from './OnlineStatusAccountOffline.js'
-export { OnlineStatusDeviceOfflineIcon } from './OnlineStatusDeviceOffline.js'
-export { OnlineStatusOnlineIcon } from './OnlineStatusOnline.js'
-export { SeamIcon } from './Seam.js'
+export default null

package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -17,7 +17,7 @@ import { Title } from 'lib/ui/typography/Title.js'
 export function AccessCodeTable(props: {
   accessCodes: AccessCode[]
   onClickBack?: () => void
-}) {
+}): JSX.Element {
   const { accessCodes, onClickBack } = props
 
   return (

package/src/lib/ui/AccessCodeTable/CodeDetails.tsx

@@ -1,9 +1,9 @@
-import dayjs from 'dayjs'
+import { DateTime } from 'luxon'
 import type { AccessCode } from 'seamapi'
 
 import { DotDivider } from 'lib/ui/layout/DotDivider.js'
 
-export function CodeDetails(props: { accessCode: AccessCode }) {
+export function CodeDetails(props: { accessCode: AccessCode }): JSX.Element {
   const { accessCode } = props
 
   return (
@@ -17,10 +17,14 @@ export function CodeDetails(props: { accessCode: AccessCode }) {
   )
 }
 
-function Duration(props: { accessCode: AccessCode }) {
+function Duration(props: { accessCode: AccessCode }): JSX.Element {
   const { accessCode } = props
   if (accessCode.type === 'ongoing') {
-    return <span>{t.ends}: Never</span>
+    return (
+      <span>
+        {t.ends}: {t.never}
+      </span>
+    )
   }
 
   const hasStarted = new Date(accessCode.starts_at).valueOf() < Date.now()
@@ -32,7 +36,6 @@ function Duration(props: { accessCode: AccessCode }) {
     )
   }
 
-  // is in future
   return (
     <span>
       {t.starts}: {formatDate(accessCode.starts_at)}
@@ -40,12 +43,16 @@ function Duration(props: { accessCode: AccessCode }) {
   )
 }
 
-function formatDate(date: string) {
-  return dayjs(date).format('MMM D')
+function formatDate(date: string): string {
+  return DateTime.fromISO(date).toLocaleString({
+    month: 'long',
+    day: 'numeric',
+  })
 }
 
 const t = {
   code: 'Code',
   starts: 'Starts',
   ends: 'Ends',
+  never: 'Never',
 }

package/src/lib/ui/DeviceDetails/BatteryStatus.tsx

@@ -5,22 +5,16 @@ import { BatteryLevelFullIcon } from 'lib/icons/BatteryLevelFull.js'
 import { BatteryLevelHighIcon } from 'lib/icons/BatteryLevelHigh.js'
 import { BatteryLevelLowIcon } from 'lib/icons/BatteryLevelLow.js'
 
-/**
- * Thresholds to determine the battery status
- */
-const BATTERY_LEVEL = {
-  FULL: 0.85,
-  HIGH: 0.6,
-  LOW: 0.3,
-}
-export function BatteryStatus(props: { device: LockDevice }) {
+export function BatteryStatus(props: {
+  device: LockDevice
+}): JSX.Element | null {
   const {
     device: {
       properties: { battery_level: batteryLevel },
     },
   } = props
 
-  if (batteryLevel === undefined) {
+  if (batteryLevel == null) {
     return null
   }
 
@@ -34,10 +28,10 @@ export function BatteryStatus(props: { device: LockDevice }) {
   )
 }
 
-function Status(props: { batteryLevel: number }) {
+function Status(props: { batteryLevel: number }): JSX.Element {
   const { batteryLevel } = props
 
-  if (batteryLevel > BATTERY_LEVEL.FULL) {
+  if (batteryLevel > batteryThreshold.full) {
     return (
       <>
         <BatteryLevelFullIcon />
@@ -46,7 +40,7 @@ function Status(props: { batteryLevel: number }) {
     )
   }
 
-  if (batteryLevel > BATTERY_LEVEL.HIGH) {
+  if (batteryLevel > batteryThreshold.high) {
     return (
       <>
         <BatteryLevelHighIcon />
@@ -55,7 +49,7 @@ function Status(props: { batteryLevel: number }) {
     )
   }
 
-  if (batteryLevel > BATTERY_LEVEL.LOW) {
+  if (batteryLevel > batteryThreshold.low) {
     return (
       <>
         <BatteryLevelLowIcon />
@@ -72,6 +66,12 @@ function Status(props: { batteryLevel: number }) {
   )
 }
 
+const batteryThreshold = {
+  full: 0.85,
+  high: 0.6,
+  low: 0.3,
+}
+
 const t = {
   power: 'Power',
   full: 'Good',

package/src/lib/ui/DeviceDetails/DeviceDetails.tsx

@@ -9,13 +9,13 @@ import { OnlineStatus } from 'lib/ui/DeviceDetails/OnlineStatus.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import useToggle from 'lib/use-toggle.js'
 
-export function DeviceDetails(props: { device: LockDevice }) {
+export function DeviceDetails(props: { device: LockDevice }): JSX.Element {
   const { device } = props
 
   const lockStatus = device.properties.locked ? t.locked : t.unlocked
 
   const accessCodeLength =
-    device.properties?.schlage_metadata?.access_code_length ?? null
+    device.properties?.schlage_metadata?.access_code_length
 
   // TODO : Fetch access codes
   const accessCodes: AccessCode[] = []
@@ -73,9 +73,11 @@ export function DeviceDetails(props: { device: LockDevice }) {
   )
 }
 
-function AccessCodeLength(props: { accessCodeLength: number | null }) {
+function AccessCodeLength(props: {
+  accessCodeLength: number | null | undefined
+}): JSX.Element | null {
   const { accessCodeLength } = props
-  if (accessCodeLength === null) {
+  if (accessCodeLength == null) {
     return null
   }
 
@@ -95,5 +97,5 @@ const t = {
   accessCodes: 'access codes',
   codeLength: 'Code length',
   digits: 'digits',
-  lockStatus: 'lockStatus',
+  lockStatus: 'Lock status',
 }

package/src/lib/ui/DeviceDetails/DeviceImage.tsx

@@ -1,12 +1,12 @@
 import type { LockDevice } from 'seamapi'
 
-const FALLBACK_IMAGE_URL =
-  'https://connect.getseam.com/assets/images/devices/unknown-lock.png'
-
-export function DeviceImage(props: { device: LockDevice }) {
+export function DeviceImage(props: { device: LockDevice }): JSX.Element {
   const { device } = props
 
-  const url = device.properties.image_url ?? FALLBACK_IMAGE_URL
+  const url = device.properties.image_url ?? fallbackImageUrl
 
   return <img src={url} alt={device.properties.name} />
 }
+
+const fallbackImageUrl =
+  'https://connect.getseam.com/assets/images/devices/unknown-lock.png'

package/src/lib/ui/DeviceDetails/ModelStatus.tsx

@@ -1,16 +1,14 @@
 import type { LockDevice } from 'seamapi'
 
-export function ModelStatus(props: { device: LockDevice }) {
+export function ModelStatus(props: { device: LockDevice }): JSX.Element | null {
   const {
     device: { properties },
   } = props
 
   const model =
-    properties?.august_metadata?.model ??
-    properties?.schlage_metadata?.model ??
-    null
+    properties?.august_metadata?.model ?? properties?.schlage_metadata?.model
 
-  if (model === null) {
+  if (model == null) {
     return null
   }
 

package/src/lib/ui/DeviceDetails/OnlineStatus.tsx

@@ -3,7 +3,7 @@ import type { LockDevice } from 'seamapi'
 import { OnlineStatusDeviceOfflineIcon } from 'lib/icons/OnlineStatusDeviceOffline.js'
 import { OnlineStatusOnlineIcon } from 'lib/icons/OnlineStatusOnline.js'
 
-export function OnlineStatus(props: { device: LockDevice }) {
+export function OnlineStatus(props: { device: LockDevice }): JSX.Element {
   const { device } = props
   return (
     <>
@@ -15,7 +15,7 @@ export function OnlineStatus(props: { device: LockDevice }) {
   )
 }
 
-function Status(props: { isOnline: boolean }) {
+function Status(props: { isOnline: boolean }): JSX.Element {
   const { isOnline } = props
 
   if (isOnline) {

package/src/lib/ui/IconButton.tsx

@@ -1,5 +1,5 @@
 import type { ButtonProps } from 'lib/ui/types.js'
 
-export function IconButton(props: ButtonProps) {
+export function IconButton(props: ButtonProps): JSX.Element {
   return <button {...props} className='seam-button seam-icon-button' />
 }

package/src/lib/ui/Table/TableBody.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react'
+import type { PropsWithChildren } from 'react'
 
-export function TableBody(props: { children: ReactNode }) {
-  return <div className='seam-table-body'>{props.children}</div>
+export function TableBody({ children }: PropsWithChildren): JSX.Element {
+  return <div className='seam-table-body'>{children}</div>
 }

package/src/lib/ui/Table/TableCell.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames'
 
 import type { DivProps } from 'lib/ui/types.js'
 
-export function TableCell({ className, ...otherProps }: DivProps) {
+export function TableCell({ className, ...otherProps }: DivProps): JSX.Element {
   return (
     <div className={classNames('seam-table-cell', className)} {...otherProps} />
   )

package/src/lib/ui/Table/TableHeader.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react'
+import type { PropsWithChildren } from 'react'
 
-export function TableHeader(props: { children: ReactNode }) {
-  return <div className='seam-table-header'>{props.children}</div>
+export function TableHeader({ children }: PropsWithChildren): JSX.Element {
+  return <div className='seam-table-header'>{children}</div>
 }

package/src/lib/ui/Table/TableRow.tsx

@@ -1,5 +1,5 @@
 import type { DivProps } from 'lib/ui/types.js'
 
-export function TableRow(props: DivProps) {
+export function TableRow(props: DivProps): JSX.Element {
   return <div className='seam-table-row'>{props.children}</div>
 }

package/src/lib/ui/Table/TableTitle.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react'
+import type { PropsWithChildren } from 'react'
 
-export function TableTitle(props: { children: ReactNode }) {
-  return <h5 className='seam-table-title'>{props.children}</h5>
+export function TableTitle({ children }: PropsWithChildren): JSX.Element {
+  return <h5 className='seam-table-title'>{children}</h5>
 }

package/src/lib/ui/TextField/SearchTextField.tsx

@@ -2,7 +2,10 @@ import classNames from 'classnames'
 
 import { TextField, type TextFieldProps } from 'lib/ui/TextField/index.js'
 
-export function SearchTextField({ className, ...otherProps }: TextFieldProps) {
+export function SearchTextField({
+  className,
+  ...otherProps
+}: TextFieldProps): JSX.Element {
   return (
     <TextField
       {...otherProps}

package/src/lib/ui/TextField/TextField.tsx

@@ -6,7 +6,7 @@ export type TextFieldProps = {
   onChange: (value: string) => void
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>
 
-export function TextField(props: TextFieldProps) {
+export function TextField(props: TextFieldProps): JSX.Element {
   const { value, onChange, className, ...inputProps } = props
   return (
     <input

package/src/lib/ui/layout/ContentHeader.tsx

@@ -3,7 +3,7 @@ import { ArrowBackIcon } from 'lib/icons/ArrowBack.js'
 export function ContentHeader(props: {
   title?: string
   onClickBack?: () => void
-}) {
+}): JSX.Element {
   return (
     <div className='seam-content-header'>
       <BackIcon onClick={props.onClickBack} />
@@ -12,8 +12,8 @@ export function ContentHeader(props: {
   )
 }
 
-function BackIcon(props: { onClick?: () => void }) {
-  if (props.onClick === undefined) {
+function BackIcon(props: { onClick?: () => void }): JSX.Element | null {
+  if (props.onClick == null) {
     return null
   }
 

package/src/lib/ui/layout/DotDivider.tsx

@@ -1,3 +1,3 @@
-export function DotDivider() {
+export function DotDivider(): JSX.Element {
   return <span className='seam-dot-divider'>•</span>
 }

package/src/lib/ui/typography/Caption.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react'
+import type { PropsWithChildren } from 'react'
 
-export function Caption(props: { children: ReactNode }) {
-  return <span className='seam-caption'>{props.children}</span>
+export function Caption({ children }: PropsWithChildren): JSX.Element {
+  return <span className='seam-caption'>{children}</span>
 }

package/src/lib/ui/typography/Title.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react'
+import type { PropsWithChildren } from 'react'
 
-export function Title(props: { children: ReactNode }) {
-  return <span className='seam-title'>{props.children}</span>
+export function Title({ children }: PropsWithChildren): JSX.Element {
+  return <span className='seam-title'>{children}</span>
 }