@seamapi/react 1.47.0 → 1.48.1

package/lib/ui/thermostat/ClimateSettingStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClimateSettingStatus.js","sourceRoot":"","sources":["../../../src/lib/ui/thermostat/ClimateSettingStatus.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAQ9D,MAAM,UAAU,oBAAoB,CAAC,EACnC,cAAc,EACd,eAAe,GAAG,YAAY,EAC9B,aAAa,GAAG,MAAM,GACI;IAC1B,OAAO,CACL,eAAK,SAAS,EAAC,6BAA6B,aACzC,aAAa,KAAK,MAAM,IAAI,CAC3B,KAAC,kBAAkB,IAAC,IAAI,EAAE,cAAc,CAAC,iBAAiB,GAAI,CAC/D,EACD,KAAC,OAAO,IACN,IAAI,EAAE,cAAc,CAAC,iBAAiB,EACtC,eAAe,EACb,eAAe,KAAK,YAAY;oBAC9B,CAAC,CAAC,cAAc,CAAC,4BAA4B;oBAC7C,CAAC,CAAC,cAAc,CAAC,yBAAyB,EAE9C,eAAe,EACb,eAAe,KAAK,YAAY;oBAC9B,CAAC,CAAC,cAAc,CAAC,4BAA4B;oBAC7C,CAAC,CAAC,cAAc,CAAC,yBAAyB,EAE9C,eAAe,EAAE,eAAe,GAChC,EACD,aAAa,KAAK,OAAO,IAAI,CAC5B,KAAC,kBAAkB,IAAC,IAAI,EAAE,cAAc,CAAC,iBAAiB,GAAI,CAC/D,IACG,CACP,CAAA;AACH,CAAC;AAED,SAAS,kBAAkB,CAAC,KAE3B;IACC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IAEtB,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC9C,IAAI,KAAK,MAAM,IAAI,KAAC,kBAAkB,KAAG,EACzC,IAAI,KAAK,MAAM,IAAI,KAAC,kBAAkB,KAAG,EACzC,IAAI,KAAK,UAAU,IAAI,KAAC,sBAAsB,KAAG,EACjD,IAAI,KAAK,KAAK,IAAI,KAAC,iBAAiB,KAAG,IACpC,CACP,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,KAShB;IACC,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,KAAK,CAAA;IACzE,MAAM,kBAAkB,GAAG,eAAe,KAAK,SAAS,CAAA;IACxD,MAAM,kBAAkB,GAAG,eAAe,KAAK,SAAS,CAAA;IACxD,MAAM,IAAI,GACR,eAAe,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAA;IAEzE,IAAI,IAAI,KAAK,MAAM,IAAI,kBAAkB;QACvC,OAAO,yBAAO,GAAG,eAAe,GAAG,IAAI,EAAE,GAAQ,CAAA;IAEnD,IAAI,IAAI,KAAK,MAAM,IAAI,kBAAkB;QACvC,OAAO,yBAAO,GAAG,eAAe,GAAG,IAAI,EAAE,GAAQ,CAAA;IAEnD,IAAI,IAAI,KAAK,UAAU,IAAI,kBAAkB,IAAI,kBAAkB;QACjE,OAAO,CACL,yBAAO,GAAG,eAAe,GAAG,IAAI,MAAM,eAAe,GAAG,IAAI,EAAE,GAAQ,CACvE,CAAA;IAEH,IAAI,IAAI,KAAK,KAAK;QAAE,OAAO,yBAAO,CAAC,CAAC,GAAG,GAAQ,CAAA;IAE/C,OAAO,IAAI,CAAA;AACb,CAAC;AAED,MAAM,CAAC,GAAG;IACR,gBAAgB,EAAE,IAAI;IACtB,aAAa,EAAE,IAAI;IACnB,GAAG,EAAE,KAAK;CACX,CAAA"}
+{"version":3,"file":"ClimateSettingStatus.js","sourceRoot":"","sources":["../../../src/lib/ui/thermostat/ClimateSettingStatus.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAQ9D,MAAM,UAAU,oBAAoB,CAAC,EACnC,cAAc,EACd,eAAe,GAAG,YAAY,EAC9B,aAAa,GAAG,MAAM,GACI;IAC1B,OAAO,CACL,eAAK,SAAS,EAAC,6BAA6B,aACzC,aAAa,KAAK,MAAM,IAAI,CAC3B,KAAC,kBAAkB,IAAC,IAAI,EAAE,cAAc,CAAC,iBAAiB,GAAI,CAC/D,EACD,KAAC,OAAO,IACN,IAAI,EAAE,cAAc,CAAC,iBAAiB,EACtC,eAAe,EAAE,sBAAsB,CACrC,eAAe,KAAK,YAAY;oBAC9B,CAAC,CAAC,cAAc,CAAC,4BAA4B;oBAC7C,CAAC,CAAC,cAAc,CAAC,yBAAyB,CAC7C,EACD,eAAe,EAAE,sBAAsB,CACrC,eAAe,KAAK,YAAY;oBAC9B,CAAC,CAAC,cAAc,CAAC,4BAA4B;oBAC7C,CAAC,CAAC,cAAc,CAAC,yBAAyB,CAC7C,EACD,eAAe,EAAE,eAAe,GAChC,EACD,aAAa,KAAK,OAAO,IAAI,CAC5B,KAAC,kBAAkB,IAAC,IAAI,EAAE,cAAc,CAAC,iBAAiB,GAAI,CAC/D,IACG,CACP,CAAA;AACH,CAAC;AAED,SAAS,kBAAkB,CAAC,KAE3B;IACC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IAEtB,OAAO,CACL,eAAK,SAAS,EAAC,kCAAkC,aAC9C,IAAI,KAAK,MAAM,IAAI,KAAC,kBAAkB,KAAG,EACzC,IAAI,KAAK,MAAM,IAAI,KAAC,kBAAkB,KAAG,EACzC,IAAI,KAAK,UAAU,IAAI,KAAC,sBAAsB,KAAG,EACjD,IAAI,KAAK,KAAK,IAAI,KAAC,iBAAiB,KAAG,IACpC,CACP,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,KAKhB;IACC,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,KAAK,CAAA;IACzE,MAAM,kBAAkB,GAAG,eAAe,KAAK,SAAS,CAAA;IACxD,MAAM,kBAAkB,GAAG,eAAe,KAAK,SAAS,CAAA;IACxD,MAAM,IAAI,GACR,eAAe,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAA;IAEzE,IAAI,IAAI,KAAK,MAAM,IAAI,kBAAkB;QACvC,OAAO,yBAAO,GAAG,eAAe,GAAG,IAAI,EAAE,GAAQ,CAAA;IAEnD,IAAI,IAAI,KAAK,MAAM,IAAI,kBAAkB;QACvC,OAAO,yBAAO,GAAG,eAAe,GAAG,IAAI,EAAE,GAAQ,CAAA;IAEnD,IAAI,IAAI,KAAK,UAAU,IAAI,kBAAkB,IAAI,kBAAkB;QACjE,OAAO,CACL,yBAAO,GAAG,eAAe,GAAG,IAAI,MAAM,eAAe,GAAG,IAAI,EAAE,GAAQ,CACvE,CAAA;IAEH,IAAI,IAAI,KAAK,KAAK;QAAE,OAAO,yBAAO,CAAC,CAAC,GAAG,GAAQ,CAAA;IAE/C,OAAO,IAAI,CAAA;AACb,CAAC;AAED,MAAM,sBAAsB,GAAG,CAAC,KAAyB,EAAU,EAAE;IACnE,IAAI,KAAK,IAAI,IAAI;QAAE,OAAO,GAAG,CAAA;IAC7B,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC,OAAO,EAAE,CAAA;IACnD,OAAO,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,GAAG;IACR,gBAAgB,EAAE,IAAI;IACtB,aAAa,EAAE,IAAI;IACnB,GAAG,EAAE,KAAK;CACX,CAAA"}

package/lib/ui/thermostat/TemperatureControl.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface TemperatureControlProps {
+    variant: 'heat' | 'cool';
+    value: number;
+    onChange: (temperature: number) => void;
+    min?: number;
+    max?: number;
+    unit?: 'fahrenheit' | 'celsius';
+}
+export declare function TemperatureControl({ variant, value, onChange, min, max, unit, }: TemperatureControlProps): JSX.Element;
+export {};

package/lib/ui/thermostat/TemperatureControl.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { TemperatureAddIcon } from '../../../lib/icons/TemperatureAdd.js';
+import { TemperatureSubtractIcon } from '../../../lib/icons/TemperatureSubtract.js';
+export function TemperatureControl({ variant, value, onChange, min = 50, max = 90, unit = 'fahrenheit', }) {
+    const increment = () => {
+        onChange(Math.min(value + 1, max));
+    };
+    const decrement = () => {
+        onChange(Math.max(value - 1, min));
+    };
+    return (_jsxs("div", { className: 'seam-temperature-control', children: [_jsx("button", { className: 'seam-temperature-stepper-button', onClick: decrement, children: _jsx(TemperatureSubtractIcon, {}) }), _jsx(RangeSlider, { variant: variant, min: min, max: max, value: value, onChange: (temperature) => {
+                    onChange(temperature);
+                }, unit: unit }), _jsx("button", { className: 'seam-temperature-stepper-button', onClick: increment, children: _jsx(TemperatureAddIcon, {}) })] }));
+}
+function RangeSlider({ variant, value, onChange, min, max, unit, }) {
+    const wrapRef = useRef(null);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (wrapRef.current == null || inputRef.current == null)
+            return;
+        const wrap = wrapRef.current;
+        const input = inputRef.current;
+        wrap.style.setProperty('--temperature-current', input.value);
+        wrap.style.setProperty('--temperature-min', input.min);
+        wrap.style.setProperty('--temperature-max', input.max);
+    }, [value]);
+    const handleRangeChange = (event) => {
+        const wrap = wrapRef.current;
+        if (wrap == null)
+            return;
+        const temperature = event.target.value;
+        wrap.style.setProperty('--temperature-current', temperature);
+        onChange(Number(temperature));
+    };
+    return (_jsxs("div", { ref: wrapRef, className: 'seam-temperature-range-wrap', children: [_jsx("input", { ref: inputRef, type: 'range', min: min, max: max, value: value, onChange: handleRangeChange, className: 'seam-temperature-range', "data-variant": variant }), _jsxs("div", { className: 'seam-floating-temperature', children: [_jsx("span", { className: 'seam-floating-temperature-value', children: value }), _jsx("span", { className: 'seam-floating-temperature-unit', children: unit === 'fahrenheit' ? t.degreeFahrenheit : t.degreeCelsius })] })] }));
+}
+const t = {
+    degreeFahrenheit: 'ºF',
+    degreeCelsius: 'ºC',
+};
+//# sourceMappingURL=TemperatureControl.js.map

package/lib/ui/thermostat/TemperatureControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemperatureControl.js","sourceRoot":"","sources":["../../../src/lib/ui/thermostat/TemperatureControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA2B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAElE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAA;AAW1E,MAAM,UAAU,kBAAkB,CAAC,EACjC,OAAO,EACP,KAAK,EACL,QAAQ,EACR,GAAG,GAAG,EAAE,EACR,GAAG,GAAG,EAAE,EACR,IAAI,GAAG,YAAY,GACK;IACxB,MAAM,SAAS,GAAG,GAAS,EAAE;QAC3B,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAA;IACpC,CAAC,CAAA;IAED,MAAM,SAAS,GAAG,GAAS,EAAE;QAC3B,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAA;IACpC,CAAC,CAAA;IAED,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,aACvC,iBAAQ,SAAS,EAAC,iCAAiC,EAAC,OAAO,EAAE,SAAS,YACpE,KAAC,uBAAuB,KAAG,GACpB,EACT,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,WAAW,EAAE,EAAE;oBACxB,QAAQ,CAAC,WAAW,CAAC,CAAA;gBACvB,CAAC,EACD,IAAI,EAAE,IAAI,GACV,EACF,iBAAQ,SAAS,EAAC,iCAAiC,EAAC,OAAO,EAAE,SAAS,YACpE,KAAC,kBAAkB,KAAG,GACf,IACL,CACP,CAAA;AACH,CAAC;AAWD,SAAS,WAAW,CAAC,EACnB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,EACH,IAAI,GACa;IACjB,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,OAAO,IAAI,IAAI,IAAI,QAAQ,CAAC,OAAO,IAAI,IAAI;YAAE,OAAM;QAE/D,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAA;QAE9B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;QAC5D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;QACtD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,CAAA;IACxD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,iBAAiB,GAAyC,CAC9D,KAAK,EACC,EAAE;QACR,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAE5B,IAAI,IAAI,IAAI,IAAI;YAAE,OAAM;QACxB,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;QACtC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,WAAW,CAAC,CAAA;QAC5D,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAA;IAC/B,CAAC,CAAA;IAED,OAAO,CACL,eAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,6BAA6B,aACxD,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAC,wBAAwB,kBACpB,OAAO,GACrB,EAEF,eAAK,SAAS,EAAC,2BAA2B,aACxC,eAAM,SAAS,EAAC,iCAAiC,YAAE,KAAK,GAAQ,EAChE,eAAM,SAAS,EAAC,gCAAgC,YAC7C,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,GACxD,IACH,IACF,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,gBAAgB,EAAE,IAAI;IACtB,aAAa,EAAE,IAAI;CACpB,CAAA"}

package/lib/ui/use-current-time.d.ts

@@ -0,0 +1,2 @@
+import { DateTime } from 'luxon';
+export declare function useCurrentTime(): DateTime;

package/lib/ui/use-current-time.js

@@ -0,0 +1,12 @@
+import { DateTime } from 'luxon';
+import { useCallback, useState } from 'react';
+import { useInterval } from '../../lib/ui/use-interval.js';
+export function useCurrentTime() {
+    const [date, setDate] = useState(DateTime.now());
+    const update = useCallback(() => {
+        setDate(DateTime.now());
+    }, [setDate]);
+    useInterval(update);
+    return date;
+}
+//# sourceMappingURL=use-current-time.js.map

package/lib/ui/use-current-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-current-time.js","sourceRoot":"","sources":["../../src/lib/ui/use-current-time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEpD,MAAM,UAAU,cAAc;IAC5B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAW,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAA;IAE1D,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAA;IACzB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,WAAW,CAAC,MAAM,CAAC,CAAA;IAEnB,OAAO,IAAI,CAAA;AACb,CAAC"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "1.47.0";
+declare const seamapiReactVersion = "1.48.1";
 export default seamapiReactVersion;

package/lib/version.js

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.47.0';
+const seamapiReactVersion = '1.48.1';
 export default seamapiReactVersion;
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "1.47.0",
+  "version": "1.48.1",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -122,7 +122,7 @@
     "@tanstack/react-query": "^4.28.0",
     "classnames": "^2.3.2",
     "luxon": "^3.3.0",
-    "seamapi": "^8.6.0",
+    "seamapi": "^8.9.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -133,7 +133,7 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.2",
     "@rxfork/r2wc-react-to-web-component": "^2.3.0",
-    "@seamapi/fake-seam-connect": "^1.6.0",
+    "@seamapi/fake-seam-connect": "^1.9.0",
     "@storybook/addon-designs": "^7.0.1",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",
@@ -159,11 +159,11 @@
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-jsx": "^11.0.0",
     "eslint-config-standard-react": "^13.0.0",
-    "eslint-config-standard-with-typescript": "^37.0.0",
+    "eslint-config-standard-with-typescript": "^39.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.11",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "execa": "^7.1.1",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "execa": "^8.0.1",
     "fast-glob": "^3.2.12",
     "http-proxy-middleware": "^2.0.6",
     "isomorphic-fetch": "^3.0.0",
@@ -182,7 +182,7 @@
     "tsc-alias": "^1.8.5",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "tsx": "^3.12.7",
-    "typescript": "^5.1.0",
+    "typescript": "~5.1.0",
     "vite": "^4.2.1",
     "vite-tsconfig-paths": "^4.0.8",
     "zustand-hoist": "^1.0.0"

package/src/lib/dates.ts

@@ -138,3 +138,20 @@ export const createIsoDate = (date: string, timezone: string): string => {
  */
 export const getTimezoneFromIsoDate = (date: string): string | null =>
   DateTime.fromISO(date).zoneName
+
+/**
+ * Takes an ISO datetime string (2023-07-20T00:00:00.000-07:00) and returns a string like
+ * (Jul 20, 12:00 AM PDT).
+ *
+ * @param date
+ * @returns string
+ *
+ */
+export const formatDateAndTime = (date: string): string =>
+  DateTime.fromISO(date).toLocaleString({
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    timeZoneName: 'short',
+  })

package/src/lib/element.tsx

@@ -28,8 +28,10 @@ export type ElementProps<T> = Record<
   'string' | 'number' | 'boolean' | 'array' | 'function' | 'json' | 'object'
 >
 
-type ProviderProps = SeamProviderPropsWithPublishableKey &
-  SeamProviderPropsWithClientSessionToken
+type ProviderProps = Omit<
+  SeamProviderPropsWithPublishableKey & SeamProviderPropsWithClientSessionToken,
+  'children'
+>
 
 const providerProps: ElementProps<ProviderProps> = {
   publishableKey: 'string',
@@ -53,7 +55,7 @@ export const defineCustomElement = ({
       ...providerProps,
     },
   })
-  globalThis?.customElements?.define(name, element)
+  globalThis.customElements?.define(name, element)
 }
 
 function withProvider<P extends JSX.IntrinsicAttributes>(
@@ -82,7 +84,7 @@ function withProvider<P extends JSX.IntrinsicAttributes>(
         disableFontInjection={
           disableFontInjection ?? globalThis.disableSeamFontInjection
         }
-        unminifiyCss={unminifiyCss ?? globalThis?.unminifiySeamCss}
+        unminifiyCss={unminifiyCss ?? globalThis.unminifiySeamCss}
       >
         <Component {...(props as P)} />
       </SeamProvider>

package/src/lib/icons/ArrowRight.tsx

@@ -0,0 +1,36 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function ArrowRightIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={18}
+      height={19}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='arrow-right_svg__a'
+        width={18}
+        height={19}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M0 .5h18v18H0z' />
+      </mask>
+      <g mask='url(#arrow-right_svg__a)'>
+        <path
+          fill='#B9BEC5'
+          d='m10.5 14-1.05-1.088 2.663-2.662H3v-1.5h9.113L9.45 6.088 10.5 5 15 9.5 10.5 14Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/Info.tsx

@@ -0,0 +1,36 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function InfoIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={18}
+      height={19}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='info_svg__a'
+        width={18}
+        height={19}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M0 .5h18v18H0z' />
+      </mask>
+      <g mask='url(#info_svg__a)'>
+        <path
+          fill='#D5D8DC'
+          d='M8.25 13.25h1.5v-4.5h-1.5v4.5Zm.75-6c.213 0 .39-.072.535-.216A.725.725 0 0 0 9.75 6.5a.728.728 0 0 0-.215-.535A.728.728 0 0 0 9 5.75a.725.725 0 0 0-.534.215.726.726 0 0 0-.216.535c0 .213.072.39.216.534A.724.724 0 0 0 9 7.25ZM9 17a7.3 7.3 0 0 1-2.925-.591 7.569 7.569 0 0 1-2.381-1.603 7.569 7.569 0 0 1-1.603-2.381A7.3 7.3 0 0 1 1.5 9.5a7.3 7.3 0 0 1 .591-2.925 7.569 7.569 0 0 1 1.603-2.381A7.58 7.58 0 0 1 6.075 2.59 7.307 7.307 0 0 1 9 2c1.037 0 2.012.197 2.925.59a7.58 7.58 0 0 1 2.381 1.604 7.569 7.569 0 0 1 1.603 2.381A7.3 7.3 0 0 1 16.5 9.5a7.3 7.3 0 0 1-.591 2.925 7.569 7.569 0 0 1-1.603 2.381 7.569 7.569 0 0 1-2.381 1.603A7.3 7.3 0 0 1 9 17Zm0-1.5c1.675 0 3.094-.581 4.256-1.744C14.42 12.594 15 11.175 15 9.5c0-1.675-.581-3.094-1.744-4.256C12.094 4.08 10.675 3.5 9 3.5c-1.675 0-3.094.581-4.256 1.744C3.58 6.406 3 7.825 3 9.5c0 1.675.581 3.094 1.744 4.256C5.906 14.92 7.325 15.5 9 15.5Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/InfoDark.tsx

@@ -0,0 +1,37 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function InfoDarkIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={19}
+      height={19}
+      fill='none'
+      {...props}
+    >
+      <circle cx={9.755} cy={9.416} r={6.655} fill='#E9EDEF' />
+      <mask
+        id='info-dark_svg__a'
+        width={19}
+        height={19}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#D9D9D9' d='M.755.416h18v18h-18z' />
+      </mask>
+      <g mask='url(#info-dark_svg__a)'>
+        <path
+          fill='#9DA1A9'
+          d='M9.005 13.166h1.5v-4.5h-1.5v4.5Zm.75-6c.213 0 .391-.072.535-.216a.725.725 0 0 0 .215-.534.728.728 0 0 0-.215-.534.728.728 0 0 0-.535-.216.725.725 0 0 0-.534.216.726.726 0 0 0-.216.534c0 .213.072.39.216.534a.724.724 0 0 0 .534.216Zm0 9.75a7.3 7.3 0 0 1-2.925-.59 7.569 7.569 0 0 1-2.38-1.603 7.568 7.568 0 0 1-1.604-2.382 7.3 7.3 0 0 1-.59-2.925 7.3 7.3 0 0 1 .59-2.925 7.569 7.569 0 0 1 1.603-2.38A7.58 7.58 0 0 1 6.83 2.506a7.307 7.307 0 0 1 2.925-.59c1.038 0 2.013.196 2.925.59a7.579 7.579 0 0 1 2.382 1.603 7.569 7.569 0 0 1 1.602 2.381 7.3 7.3 0 0 1 .591 2.925 7.3 7.3 0 0 1-.59 2.925 7.569 7.569 0 0 1-1.603 2.382 7.569 7.569 0 0 1-2.382 1.602 7.3 7.3 0 0 1-2.925.591Zm0-1.5c1.675 0 3.094-.58 4.257-1.743 1.162-1.163 1.743-2.582 1.743-4.257 0-1.675-.58-3.093-1.743-4.256-1.163-1.162-2.582-1.744-4.257-1.744-1.675 0-3.093.582-4.256 1.744-1.162 1.163-1.744 2.581-1.744 4.256 0 1.675.582 3.094 1.744 4.257 1.163 1.162 2.581 1.743 4.256 1.743Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/TemperatureAdd.tsx

@@ -0,0 +1,38 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function TemperatureAddIcon(
+  props: SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={18}
+      height={18}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='temperature-add_svg__a'
+        width={18}
+        height={18}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#2196F3' d='M0 0h18v18H0z' />
+      </mask>
+      <g mask='url(#temperature-add_svg__a)'>
+        <path
+          fill='#9DA1A9'
+          d='M8.25 14.25v-4.5h-4.5v-1.5h4.5v-4.5h1.5v4.5h4.5v1.5h-4.5v4.5h-1.5Z'
+        />
+      </g>
+    </svg>
+  )
+}

package/src/lib/icons/TemperatureSubtract.tsx

@@ -0,0 +1,35 @@
+/*
+ * Automaically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function TemperatureSubtractIcon(
+  props: SVGProps<SVGSVGElement>
+): JSX.Element {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={18}
+      height={18}
+      fill='none'
+      {...props}
+    >
+      <mask
+        id='temperature-subtract_svg__a'
+        width={18}
+        height={18}
+        x={0}
+        y={0}
+        maskUnits='userSpaceOnUse'
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path fill='#2196F3' d='M0 0h18v18H0z' />
+      </mask>
+      <g mask='url(#temperature-subtract_svg__a)'>
+        <path fill='#9DA1A9' d='M3.75 9.75v-1.5h10.5v1.5H3.75Z' />
+      </g>
+    </svg>
+  )
+}

package/src/lib/seam/SeamProvider.tsx

@@ -25,11 +25,10 @@ export interface SeamContext {
   clientSessionToken?: string | undefined
 }
 
-export type SeamProviderProps = PropsWithChildren<
+export type SeamProviderProps =
   | SeamProviderPropsWithClient
   | SeamProviderPropsWithPublishableKey
   | SeamProviderPropsWithClientSessionToken
->
 
 export interface SeamProviderPropsWithClient extends SeamProviderBaseProps {
   client: Seam
@@ -48,7 +47,7 @@ export interface SeamProviderPropsWithClientSessionToken
   clientSessionToken: string
 }
 
-interface SeamProviderBaseProps {
+interface SeamProviderBaseProps extends PropsWithChildren {
   disableCssInjection?: boolean | undefined
   disableFontInjection?: boolean | undefined
   unminifiyCss?: boolean | undefined

package/src/lib/seam/access-codes/use-generate-access-code-code.ts

@@ -0,0 +1,38 @@
+import { useMutation, type UseMutationResult } from '@tanstack/react-query'
+import type {
+  AccessCode,
+  AccessCodeGenerateCodeRequest,
+  AccessCodeGenerateCodeResponse,
+  SeamError,
+} from 'seamapi'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseGenerateAccessCodeCodeParams = never
+export type UseGenerateAccessCodeCodeData = Pick<
+  AccessCode,
+  'code' | 'device_id'
+>
+export type UseGenerateAccessCodeCodeMutationParams =
+  AccessCodeGenerateCodeRequest
+
+export function useGenerateAccessCodeCode(): UseMutationResult<
+  UseGenerateAccessCodeCodeData,
+  SeamError,
+  UseGenerateAccessCodeCodeMutationParams
+> {
+  const { client } = useSeamClient()
+
+  return useMutation<
+    AccessCodeGenerateCodeResponse['generated_code'],
+    SeamError,
+    AccessCodeGenerateCodeRequest
+  >({
+    mutationFn: async (
+      mutationParams: UseGenerateAccessCodeCodeMutationParams
+    ) => {
+      if (client === null) throw new NullSeamClientError()
+      return await client.accessCodes.generateCode(mutationParams)
+    },
+  })
+}

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx

@@ -87,9 +87,7 @@ export function AccessCodeDetails({
             <Duration accessCode={accessCode} />
           </div>
         </div>
-
         <Alerts alerts={alerts} className='seam-alerts-padded' />
-
         <AccessCodeDevice
           deviceId={accessCode.device_id}
           disableLockUnlock={disableLockUnlock}

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDevice.tsx

@@ -56,10 +56,7 @@ function Content(props: {
         <DeviceImage device={device} />
       </div>
       <div className='seam-body'>
-        <div className='seam-model'>
-          {device.properties.model.manufacturer_display_name}{' '}
-          {device.properties.model.display_name}
-        </div>
+        <div>{device.properties.name}</div>
         <TextButton
           onClick={() => {
             onSelectDevice(device.device_id)

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleCard.tsx

@@ -0,0 +1,101 @@
+import { DateTime } from 'luxon'
+import type { ClimateSettingSchedule } from 'seamapi'
+
+import { formatDateAndTime } from 'lib/dates.js'
+import { ClimateSettingScheduleIcon } from 'lib/icons/ClimateSettingSchedule.js'
+import { useClimateSettingSchedule } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedule.js'
+import { DotDivider } from 'lib/ui/layout/DotDivider.js'
+import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
+import { useCurrentTime } from 'lib/ui/use-current-time.js'
+
+import { ClimateSettingScheduleDeviceBar } from './ClimateSettingScheduleDeviceBar.js'
+
+interface ClimateSettingScheduleCardProps {
+  climateSettingScheduleId: string
+}
+
+export function ClimateSettingScheduleCard({
+  climateSettingScheduleId,
+}: ClimateSettingScheduleCardProps): JSX.Element {
+  return (
+    <div className='seam-climate-setting-schedule-card'>
+      <Content climateSettingScheduleId={climateSettingScheduleId} />
+    </div>
+  )
+}
+
+function Content(props: {
+  climateSettingScheduleId: string
+}): JSX.Element | null {
+  const { climateSettingScheduleId } = props
+
+  const { climateSettingSchedule } = useClimateSettingSchedule(
+    climateSettingScheduleId
+  )
+
+  if (climateSettingSchedule == null) {
+    return null
+  }
+
+  const name = climateSettingSchedule.name ?? t.fallbackName
+
+  return (
+    <div className='seam-climate-setting-schedule-content'>
+      <div className='seam-climate-setting-schedule-summary-container'>
+        <div className='seam-climate-setting-schedule-icon-block'>
+          <ClimateSettingScheduleIcon />
+        </div>
+        <div className='seam-climate-setting-schedule-summary'>
+          <h5 className='seam-climate-setting-schedule-heading'>{name}</h5>
+          <div className='seam-climate-setting-schedule-subheading'>
+            <ClimateSettingStatus climateSetting={climateSettingSchedule} />
+            <DotDivider />
+            <ClimateSettingScheduleTiming
+              climateSettingSchedule={climateSettingSchedule}
+            />
+          </div>
+        </div>
+      </div>
+      <ClimateSettingScheduleDeviceBar
+        deviceId={climateSettingSchedule.device_id}
+      />
+    </div>
+  )
+}
+
+function ClimateSettingScheduleTiming(props: {
+  climateSettingSchedule: ClimateSettingSchedule
+}): JSX.Element | null {
+  const { climateSettingSchedule } = props
+
+  const currentTime = useCurrentTime()
+
+  if (currentTime === null) return null
+
+  const startTime = DateTime.fromISO(climateSettingSchedule.schedule_starts_at)
+  const endTime = DateTime.fromISO(climateSettingSchedule.schedule_ends_at)
+
+  if (currentTime < startTime)
+    return (
+      <span>
+        {t.starts}{' '}
+        {formatDateAndTime(climateSettingSchedule.schedule_starts_at)}
+      </span>
+    )
+
+  if (startTime <= currentTime && currentTime <= endTime)
+    return (
+      <span>
+        {t.ends} {formatDateAndTime(climateSettingSchedule.schedule_starts_at)}
+      </span>
+    )
+
+  return <span>{t.expired}</span>
+}
+
+const t = {
+  starts: 'Starts',
+  ends: 'Ends',
+  expired: 'Expired',
+  fallbackName: 'Climate Setting Schedule',
+}

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDeviceBar.tsx

@@ -0,0 +1,58 @@
+import { isThermostatDevice, type ThermostatDevice } from 'seamapi'
+
+import { ChevronRightIcon } from 'lib/icons/ChevronRight.js'
+import { useDevice } from 'lib/seam/devices/use-device.js'
+import { DeviceImage } from 'lib/ui/device/DeviceImage.js'
+import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
+
+export function ClimateSettingScheduleDeviceBar({
+  deviceId,
+}: {
+  deviceId: string
+}): JSX.Element | null {
+  const { isLoading, device } = useDevice({
+    device_id: deviceId,
+  })
+
+  if (isLoading) {
+    return null
+  }
+
+  if (device == null) {
+    return null
+  }
+
+  if (!isThermostatDevice(device)) {
+    return null
+  }
+
+  return <Content device={device} />
+}
+
+function Content(props: { device: ThermostatDevice }): JSX.Element {
+  const { device } = props
+
+  return (
+    <div className='seam-climate-setting-schedule-device-bar'>
+      <div className='seam-climate-setting-schedule-device-content'>
+        <div className='seam-device-image'>
+          <DeviceImage device={device} />
+        </div>
+        <div className='seam-climate-setting-schedule-device-details'>
+          <div className='seam-device-name'>{device.properties.name}</div>
+          <div className='seam-device-current-climate-setting'>
+            {t.currentClimate}:
+            <ClimateSettingStatus
+              climateSetting={device.properties.current_climate_setting}
+            />
+          </div>
+        </div>
+      </div>
+      <ChevronRightIcon />
+    </div>
+  )
+}
+
+const t = {
+  currentClimate: 'Current climate',
+}