@seamapi/react 0.15.1 → 0.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/index.css +110 -3
  2. package/index.css.map +1 -1
  3. package/index.min.css +1 -1
  4. package/index.min.css.map +1 -1
  5. package/lib/SeamProvider.d.ts +14 -6
  6. package/lib/SeamProvider.js +62 -16
  7. package/lib/SeamProvider.js.map +1 -1
  8. package/lib/seam/use-seam-client.js +28 -10
  9. package/lib/seam/use-seam-client.js.map +1 -1
  10. package/lib/ui/AccessCodeTable/AccessCodeTableContent.d.ts +6 -0
  11. package/lib/ui/AccessCodeTable/AccessCodeTableContent.js +15 -0
  12. package/lib/ui/AccessCodeTable/AccessCodeTableContent.js.map +1 -0
  13. package/lib/ui/DeviceDetails/DeviceDetails.js +2 -1
  14. package/lib/ui/DeviceDetails/DeviceDetails.js.map +1 -1
  15. package/package.json +6 -5
  16. package/src/lib/SeamProvider.tsx +102 -30
  17. package/src/lib/seam/use-seam-client.ts +37 -10
  18. package/src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx +61 -0
  19. package/src/lib/ui/DeviceDetails/DeviceDetails.tsx +2 -1
  20. package/src/styles/_device-details.scss +8 -0
  21. package/src/styles/_layout.scss +0 -1
  22. package/src/styles/_main.scss +2 -2
  23. package/src/styles/_reset.scss +114 -0
package/index.css CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * CSS Reset heavily inspired by Fraser Boag's reset.
3
+ * Source: https://www.boag.online/blog/css-reset
4
+ */
1
5
  .seam-components {
2
6
  font-family: "Source Sans Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
3
7
  --primary: #007afc;
@@ -8,8 +12,105 @@
8
12
  --bg-a: #f1f3f4;
9
13
  --status-red-alert: #e36857;
10
14
  --item-hover-bg: #f4f6f8;
11
- /* stylelint-disable */
12
- @import 'the-new-css-reset/css/reset.css';
15
+ }
16
+ .seam-components *,
17
+ .seam-components *::before,
18
+ .seam-components *::after {
19
+ box-sizing: border-box;
20
+ }
21
+ .seam-components html,
22
+ .seam-components body,
23
+ .seam-components div,
24
+ .seam-components span,
25
+ .seam-components object,
26
+ .seam-components iframe,
27
+ .seam-components figure,
28
+ .seam-components h1,
29
+ .seam-components h2,
30
+ .seam-components h3,
31
+ .seam-components h4,
32
+ .seam-components h5,
33
+ .seam-components h6,
34
+ .seam-components p,
35
+ .seam-components blockquote,
36
+ .seam-components pre,
37
+ .seam-components a,
38
+ .seam-components code,
39
+ .seam-components em,
40
+ .seam-components img,
41
+ .seam-components small,
42
+ .seam-components strike,
43
+ .seam-components strong,
44
+ .seam-components sub,
45
+ .seam-components sup,
46
+ .seam-components tt,
47
+ .seam-components b,
48
+ .seam-components u,
49
+ .seam-components i,
50
+ .seam-components ol,
51
+ .seam-components ul,
52
+ .seam-components li,
53
+ .seam-components fieldset,
54
+ .seam-components form,
55
+ .seam-components label,
56
+ .seam-components table,
57
+ .seam-components caption,
58
+ .seam-components tbody,
59
+ .seam-components tfoot,
60
+ .seam-components thead,
61
+ .seam-components tr,
62
+ .seam-components th,
63
+ .seam-components td,
64
+ .seam-components main,
65
+ .seam-components canvas,
66
+ .seam-components embed,
67
+ .seam-components footer,
68
+ .seam-components header,
69
+ .seam-components nav,
70
+ .seam-components section,
71
+ .seam-components video {
72
+ margin: 0;
73
+ padding: 0;
74
+ border: 0;
75
+ font-size: 100%;
76
+ font-family: inherit;
77
+ vertical-align: baseline;
78
+ text-rendering: optimizelegibility;
79
+ -webkit-font-smoothing: antialiased;
80
+ text-size-adjust: none;
81
+ }
82
+ .seam-components footer,
83
+ .seam-components header,
84
+ .seam-components nav,
85
+ .seam-components section,
86
+ .seam-components main {
87
+ display: block;
88
+ }
89
+ .seam-components body {
90
+ line-height: 1;
91
+ }
92
+ .seam-components ol,
93
+ .seam-components ul {
94
+ list-style: none;
95
+ }
96
+ .seam-components blockquote,
97
+ .seam-components q {
98
+ quotes: none;
99
+ }
100
+ .seam-components blockquote::before,
101
+ .seam-components blockquote::after,
102
+ .seam-components q::before,
103
+ .seam-components q::after {
104
+ content: "";
105
+ content: none;
106
+ }
107
+ .seam-components table {
108
+ border-collapse: collapse;
109
+ border-spacing: 0;
110
+ }
111
+ .seam-components input {
112
+ appearance: none;
113
+ border-radius: 0;
13
114
  }
14
115
  .seam-components h1,
15
116
  .seam-components h2,
@@ -80,7 +181,6 @@
80
181
  align-items: center;
81
182
  position: relative;
82
183
  justify-content: center;
83
- width: 100%;
84
184
  }
85
185
  .seam-components .seam-content-header .seam-back-icon {
86
186
  position: absolute;
@@ -194,6 +294,13 @@
194
294
  .seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image img {
195
295
  max-width: 100%;
196
296
  }
297
+ .seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info > .seam-label {
298
+ color: var(--text-gray-1);
299
+ font-weight: 600;
300
+ font-size: 14px;
301
+ line-height: 134%;
302
+ margin-bottom: 4px;
303
+ }
197
304
  .seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-device-name {
198
305
  margin-bottom: 16px;
199
306
  font-weight: 600;
package/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["src/styles/_main.scss","src/styles/_typography.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_access-code-table.scss","src/styles/_device-details.scss"],"names":[],"mappings":"AAQA;EACE;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAGA;EACQ;;ACvBR;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAKF;EACE;;AAKF;EACE;;AClBF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAMJ;EACE;EACA;EACA;;ACtCF;EACE;EACA;EACA;EACA;;ACJF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;ACXN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;ACjBF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;ACjDJ;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAOV;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["src/styles/_reset.scss","src/styles/_main.scss","src/styles/_typography.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_access-code-table.scss","src/styles/_device-details.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACSA;EACE;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADfA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAmDE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AE9GF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAKF;EACE;;AAKF;EACE;;AClBF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAMJ;EACE;EACA;EACA;;ACtCF;EACE;EACA;EACA;EACA;;ACJF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;ACXN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AChBF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;;ACjDJ;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAOV;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA","file":"index.css"}
package/index.min.css CHANGED
@@ -1 +1 @@
1
- .seam-components{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;--primary: #007afc;--text-gray-1: #6e7179;--text-gray-2: #9da1a9;--text-gray-3: #d5d8dc;--input-border: #d5d8dc;--bg-a: #f1f3f4;--status-red-alert: #e36857;--item-hover-bg: #f4f6f8;@import'the-new-css-reset/css/reset.css'}.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6{font-weight:600}.seam-components .seam-caption{color:var(--text-gray-2)}.seam-components .seam-text-danger{color:var(--status-red-alert)}.seam-components .seam-table-header{display:flex;justify-content:space-between;align-items:center}.seam-components .seam-table-title{font-size:21px;line-height:132%}.seam-components .seam-table-title .seam-caption{font-size:16px;line-height:134%}.seam-components .seam-table-row{display:flex;padding:4px;height:72px}.seam-components .seam-table-row:hover{background:#f4f6f8}.seam-components .seam-table-row .seam-title{font-weight:600;font-size:18px}.seam-components .seam-table-cell{display:flex;align-items:center;padding:4px}.seam-components .seam-text-field{padding:0 8px;height:40px;border:1px solid var(--input-border);border-radius:8px}.seam-components .seam-button{border-radius:6px;border:1px solid rgba(0,122,252,.5);cursor:pointer}.seam-components .seam-button.seam-icon-button{background:#fff;padding:6px;line-height:0}.seam-components .seam-button.seam-icon-button:hover{background:rgba(0,122,252,.08)}.seam-components .seam-content-header{height:56px;display:flex;align-items:center;position:relative;justify-content:center;width:100%}.seam-components .seam-content-header .seam-back-icon{position:absolute;top:50%;transform:translate(0, -25%);left:0;cursor:pointer}.seam-components .seam-content-header .seam-title{font-size:16px;line-height:134%}.seam-components .seam-access-code-table .seam-content-header{margin:0 16px}.seam-components .seam-access-code-table .seam-table-header{margin-bottom:16px;height:56px;padding:0 16px}.seam-components .seam-access-code-table .seam-icon-cell{flex:0;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-name-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-access-code-table .seam-name-cell .seam-access-code-details{font-size:14px;line-height:134%;color:var(--text-gray-1)}.seam-components .seam-access-code-table .seam-name-cell .seam-access-code-details .seam-dot-divider{margin:0 4px;color:var(--text-gray-3)}.seam-components .seam-access-code-table .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details{padding:0 24px 24px}.seam-components .seam-device-details .seam-body{display:flex;flex-direction:column;gap:16px}.seam-components .seam-device-details .seam-body .seam-box{border:1px solid var(--input-border);border-radius:8px}.seam-components .seam-device-details .seam-body .seam-box .seam-content{padding:12px 12px 12px 16px}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes{padding:12px 8px 12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes:hover{background:var(--item-hover-bg)}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-code-length{border-top:1px solid var(--input-border)}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-label{font-size:14px;line-height:134%;color:var(--text-gray-1)}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-value{display:block;font-weight:600;font-size:16px;line-height:134%}.seam-components .seam-device-details .seam-body .seam-summary{padding:24px 16px;border-radius:16px;background:var(--bg-a)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content{display:flex;align-items:center;gap:20px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image{width:100px;height:100px;display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image img{max-width:100%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-device-name{margin-bottom:16px;font-weight:600;font-size:21px;line-height:132%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties{display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:1fr;font-size:14px;line-height:134%;row-gap:4px;column-gap:28px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-label{color:var(--text-gray-2)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-status-text{color:var(--text-gray-1)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties svg{scale:.75;margin-right:8px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties>*{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-icon-cell{flex:0;margin-left:8px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-name-cell{flex:1}.seam-components .seam-device-details .seam-body .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}/*# sourceMappingURL=index.min.css.map */
1
+ .seam-components{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;--primary: #007afc;--text-gray-1: #6e7179;--text-gray-2: #9da1a9;--text-gray-3: #d5d8dc;--input-border: #d5d8dc;--bg-a: #f1f3f4;--status-red-alert: #e36857;--item-hover-bg: #f4f6f8}.seam-components *,.seam-components *::before,.seam-components *::after{box-sizing:border-box}.seam-components html,.seam-components body,.seam-components div,.seam-components span,.seam-components object,.seam-components iframe,.seam-components figure,.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6,.seam-components p,.seam-components blockquote,.seam-components pre,.seam-components a,.seam-components code,.seam-components em,.seam-components img,.seam-components small,.seam-components strike,.seam-components strong,.seam-components sub,.seam-components sup,.seam-components tt,.seam-components b,.seam-components u,.seam-components i,.seam-components ol,.seam-components ul,.seam-components li,.seam-components fieldset,.seam-components form,.seam-components label,.seam-components table,.seam-components caption,.seam-components tbody,.seam-components tfoot,.seam-components thead,.seam-components tr,.seam-components th,.seam-components td,.seam-components main,.seam-components canvas,.seam-components embed,.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components video{margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;text-size-adjust:none}.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components main{display:block}.seam-components body{line-height:1}.seam-components ol,.seam-components ul{list-style:none}.seam-components blockquote,.seam-components q{quotes:none}.seam-components blockquote::before,.seam-components blockquote::after,.seam-components q::before,.seam-components q::after{content:"";content:none}.seam-components table{border-collapse:collapse;border-spacing:0}.seam-components input{appearance:none;border-radius:0}.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6{font-weight:600}.seam-components .seam-caption{color:var(--text-gray-2)}.seam-components .seam-text-danger{color:var(--status-red-alert)}.seam-components .seam-table-header{display:flex;justify-content:space-between;align-items:center}.seam-components .seam-table-title{font-size:21px;line-height:132%}.seam-components .seam-table-title .seam-caption{font-size:16px;line-height:134%}.seam-components .seam-table-row{display:flex;padding:4px;height:72px}.seam-components .seam-table-row:hover{background:#f4f6f8}.seam-components .seam-table-row .seam-title{font-weight:600;font-size:18px}.seam-components .seam-table-cell{display:flex;align-items:center;padding:4px}.seam-components .seam-text-field{padding:0 8px;height:40px;border:1px solid var(--input-border);border-radius:8px}.seam-components .seam-button{border-radius:6px;border:1px solid rgba(0,122,252,.5);cursor:pointer}.seam-components .seam-button.seam-icon-button{background:#fff;padding:6px;line-height:0}.seam-components .seam-button.seam-icon-button:hover{background:rgba(0,122,252,.08)}.seam-components .seam-content-header{height:56px;display:flex;align-items:center;position:relative;justify-content:center}.seam-components .seam-content-header .seam-back-icon{position:absolute;top:50%;transform:translate(0, -25%);left:0;cursor:pointer}.seam-components .seam-content-header .seam-title{font-size:16px;line-height:134%}.seam-components .seam-access-code-table .seam-content-header{margin:0 16px}.seam-components .seam-access-code-table .seam-table-header{margin-bottom:16px;height:56px;padding:0 16px}.seam-components .seam-access-code-table .seam-icon-cell{flex:0;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-name-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-access-code-table .seam-name-cell .seam-access-code-details{font-size:14px;line-height:134%;color:var(--text-gray-1)}.seam-components .seam-access-code-table .seam-name-cell .seam-access-code-details .seam-dot-divider{margin:0 4px;color:var(--text-gray-3)}.seam-components .seam-access-code-table .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details{padding:0 24px 24px}.seam-components .seam-device-details .seam-body{display:flex;flex-direction:column;gap:16px}.seam-components .seam-device-details .seam-body .seam-box{border:1px solid var(--input-border);border-radius:8px}.seam-components .seam-device-details .seam-body .seam-box .seam-content{padding:12px 12px 12px 16px}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes{padding:12px 8px 12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes:hover{background:var(--item-hover-bg)}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-code-length{border-top:1px solid var(--input-border)}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-label{font-size:14px;line-height:134%;color:var(--text-gray-1)}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-value{display:block;font-weight:600;font-size:16px;line-height:134%}.seam-components .seam-device-details .seam-body .seam-summary{padding:24px 16px;border-radius:16px;background:var(--bg-a)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content{display:flex;align-items:center;gap:20px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image{width:100px;height:100px;display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image img{max-width:100%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info>.seam-label{color:var(--text-gray-1);font-weight:600;font-size:14px;line-height:134%;margin-bottom:4px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-device-name{margin-bottom:16px;font-weight:600;font-size:21px;line-height:132%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties{display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:1fr;font-size:14px;line-height:134%;row-gap:4px;column-gap:28px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-label{color:var(--text-gray-2)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-status-text{color:var(--text-gray-1)}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties svg{scale:.75;margin-right:8px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties>*{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-icon-cell{flex:0;margin-left:8px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-name-cell{flex:1}.seam-components .seam-device-details .seam-body .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}/*# sourceMappingURL=index.min.css.map */
package/index.min.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["src/styles/_main.scss","src/styles/_typography.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_access-code-table.scss","src/styles/_device-details.scss"],"names":[],"mappings":"AAQA,iBACE,2JAIA,mBACA,uBACA,uBACA,uBACA,wBACA,gBACA,4BACA,yBAIQ,yCCvBR,wHAME,gBAKF,+BACE,yBAKF,mCACE,8BClBF,oCACE,aACA,8BACA,mBAGF,mCACE,eACA,iBAEA,iDACE,eACA,iBAMJ,iCACE,aACA,YACA,YAEA,uCACE,mBAGF,6CACE,gBACA,eAMJ,kCACE,aACA,mBACA,YCtCF,kCACE,cACA,YACA,qCACA,kBCJF,8BACE,kBACA,oCACA,eAEA,+CACE,gBACA,YACA,cAEA,qDACE,+BCXN,sCACE,YACA,aACA,mBACA,kBACA,uBACA,WAEA,sDACE,kBACA,QACA,6BACA,OACA,eAGF,kDACE,eACA,iBCjBF,8DACE,cAGF,4DACE,mBACA,YACA,eAGF,yDACE,OACA,aACA,mBACA,uBAEA,6DACE,WACA,YACA,aACA,mBACA,uBAIJ,yDACE,OACA,sBACA,uBACA,uBACA,QAEA,mFACE,eACA,iBACA,yBAEA,qGACE,aACA,yBAKN,2DACE,kBACA,aACA,mBACA,uBCjDJ,sCACE,oBAEA,iDACE,aACA,sBACA,SAEA,2DACE,qCACA,kBAEA,yEACE,4BAEA,2FACE,2BACA,aACA,mBACA,8BACA,eAEA,iGACE,gCAIJ,iGACE,yCAGF,qFACE,eACA,iBACA,yBAGF,qFACE,cACA,gBACA,eACA,iBAKN,+DACE,kBACA,mBACA,uBAEA,6EACE,aACA,mBACA,SAEA,yFACE,YACA,aACA,aACA,mBAEA,6FACE,eAKF,0GACE,mBACA,gBACA,eACA,iBAGF,yGACE,aACA,sCACA,mBACA,eACA,iBACA,YACA,gBAEA,qHACE,yBAGF,2HACE,yBAGF,6GACE,UACA,iBAGF,2GACE,aACA,mBAOV,iEACE,OACA,gBACA,aACA,mBACA,uBAEA,qEACE,WACA,YACA,aACA,mBACA,uBAIJ,iEACE,OAGF,mEACE,kBACA,aACA,mBACA","file":"index.min.css"}
1
+ {"version":3,"sourceRoot":"","sources":["src/styles/_main.scss","src/styles/_reset.scss","src/styles/_typography.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_access-code-table.scss","src/styles/_device-details.scss"],"names":[],"mappings":"AASA,iBACE,2JAIA,mBACA,uBACA,uBACA,uBACA,wBACA,gBACA,4BACA,yBCfA,wEAGE,sBAGF,ylCAmDE,SACA,UACA,SACA,eACA,oBACA,wBACA,kCACA,mCACA,sBAGF,oHAKE,cAGF,sBACE,cAGF,wCAEE,gBAGF,+CAEE,YAGF,4HAIE,WACA,aAGF,uBACE,yBACA,iBAGF,uBACE,gBACA,gBC9GF,wHAME,gBAKF,+BACE,yBAKF,mCACE,8BClBF,oCACE,aACA,8BACA,mBAGF,mCACE,eACA,iBAEA,iDACE,eACA,iBAMJ,iCACE,aACA,YACA,YAEA,uCACE,mBAGF,6CACE,gBACA,eAMJ,kCACE,aACA,mBACA,YCtCF,kCACE,cACA,YACA,qCACA,kBCJF,8BACE,kBACA,oCACA,eAEA,+CACE,gBACA,YACA,cAEA,qDACE,+BCXN,sCACE,YACA,aACA,mBACA,kBACA,uBAEA,sDACE,kBACA,QACA,6BACA,OACA,eAGF,kDACE,eACA,iBChBF,8DACE,cAGF,4DACE,mBACA,YACA,eAGF,yDACE,OACA,aACA,mBACA,uBAEA,6DACE,WACA,YACA,aACA,mBACA,uBAIJ,yDACE,OACA,sBACA,uBACA,uBACA,QAEA,mFACE,eACA,iBACA,yBAEA,qGACE,aACA,yBAKN,2DACE,kBACA,aACA,mBACA,uBCjDJ,sCACE,oBAEA,iDACE,aACA,sBACA,SAEA,2DACE,qCACA,kBAEA,yEACE,4BAEA,2FACE,2BACA,aACA,mBACA,8BACA,eAEA,iGACE,gCAIJ,iGACE,yCAGF,qFACE,eACA,iBACA,yBAGF,qFACE,cACA,gBACA,eACA,iBAKN,+DACE,kBACA,mBACA,uBAEA,6EACE,aACA,mBACA,SAEA,yFACE,YACA,aACA,aACA,mBAEA,6FACE,eAKF,oGACE,yBACA,gBACA,eACA,iBACA,kBAGF,0GACE,mBACA,gBACA,eACA,iBAGF,yGACE,aACA,sCACA,mBACA,eACA,iBACA,YACA,gBAEA,qHACE,yBAGF,2HACE,yBAGF,6GACE,UACA,iBAGF,2GACE,aACA,mBAOV,iEACE,OACA,gBACA,aACA,mBACA,uBAEA,qEACE,WACA,YACA,aACA,mBACA,uBAIJ,iEACE,OAGF,mEACE,kBACA,aACA,mBACA","file":"index.min.css"}
package/lib/SeamProvider.d.ts CHANGED
@@ -1,20 +1,28 @@
1
1
  import { type PropsWithChildren } from 'react';
2
2
  import type { Seam, SeamClientOptions } from 'seamapi';
3
3
  declare global {
4
- var seam: Omit<SeamProviderProps, 'children'> | undefined;
4
+ var seam: SeamProviderProps | undefined;
5
5
  }
6
6
  export interface SeamContext {
7
7
  client: Seam | null;
8
- clientOptions?: SeamClientOptions | undefined;
8
+ clientOptions?: AllowedSeamClientOptions | undefined;
9
9
  publishableKey?: string | undefined;
10
10
  userIdentifierKey?: string | undefined;
11
+ clientSessionToken?: string | undefined;
11
12
  }
12
- export interface SeamProviderProps {
13
- client?: Seam;
14
- publishableKey?: string;
13
+ type SeamProviderProps = SeamProviderPropsWithClient | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions) | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions);
14
+ interface SeamProviderPropsWithClient {
15
+ client: Seam;
16
+ }
17
+ interface SeamProviderPropsWithPublishableKey {
18
+ publishableKey: string;
15
19
  userIdentifierKey?: string;
16
- endpoint?: string;
17
20
  }
21
+ interface SeamProviderPropsWithClientSessionToken {
22
+ clientSessionToken: string;
23
+ }
24
+ type AllowedSeamClientOptions = Pick<SeamClientOptions, 'endpoint'>;
18
25
  export declare function SeamProvider({ children, ...props }: PropsWithChildren<SeamProviderProps>): JSX.Element;
19
26
  export declare const seamContext: import("react").Context<SeamContext>;
20
27
  export declare function useSeamContext(): SeamContext;
28
+ export {};
package/lib/SeamProvider.js CHANGED
@@ -17,8 +17,7 @@ export function SeamProvider({ children, ...props }) {
17
17
  return (_jsx("div", { className: 'seam-components', children: _jsx(QueryClientProvider, { client: queryClientRef.current, children: _jsx(Provider, { value: { ...contextRef.current }, children: children }) }) }));
18
18
  }
19
19
  const createDefaultSeamContextValue = () => {
20
- if (globalThis.seam?.client == null &&
21
- globalThis.seam?.publishableKey == null) {
20
+ if (globalThis.seam == null) {
22
21
  return { client: null };
23
22
  }
24
23
  try {
@@ -30,23 +29,28 @@ const createDefaultSeamContextValue = () => {
30
29
  return { client: null };
31
30
  }
32
31
  };
33
- const createSeamContextValue = ({ client, ...options }) => {
34
- if (client == null && Object.keys(options).length === 0) {
35
- return { client: null };
32
+ const createSeamContextValue = (options) => {
33
+ if (isSeamProviderPropsWithClient(options)) {
34
+ return options;
36
35
  }
37
- if (client != null && Object.values(options).some((v) => v == null)) {
38
- throw new Error('Cannot provide both a Seam client along with other options.');
36
+ if (isSeamProviderPropsWithClientSessionToken(options)) {
37
+ const { clientSessionToken, ...clientOptions } = options;
38
+ return {
39
+ clientSessionToken,
40
+ clientOptions,
41
+ client: null,
42
+ };
39
43
  }
40
- const { publishableKey, userIdentifierKey, ...clientOptions } = options;
41
- if (client != null) {
42
- return { client };
44
+ if (isSeamProviderPropsWithPublishableKey(options)) {
45
+ const { publishableKey, userIdentifierKey, ...clientOptions } = options;
46
+ return {
47
+ publishableKey,
48
+ userIdentifierKey,
49
+ clientOptions,
50
+ client: null,
51
+ };
43
52
  }
44
- return {
45
- client: null,
46
- publishableKey,
47
- userIdentifierKey,
48
- clientOptions,
49
- };
53
+ throw new Error('Invalid SeamProvider options');
50
54
  };
51
55
  const defaultSeamContextValue = createDefaultSeamContextValue();
52
56
  export const seamContext = createContext(defaultSeamContextValue);
@@ -57,4 +61,46 @@ export function useSeamContext() {
57
61
  }
58
62
  return context;
59
63
  }
64
+ const isSeamProviderPropsWithClient = (props) => {
65
+ if (!('client' in props))
66
+ return false;
67
+ const { client } = props;
68
+ if (client == null)
69
+ return false;
70
+ if (Object.values(props).some((v) => v == null)) {
71
+ throw new Error('Cannot provide a Seam client along with other options.');
72
+ }
73
+ return true;
74
+ };
75
+ const isSeamProviderPropsWithPublishableKey = (props) => {
76
+ if (!('publishableKey' in props))
77
+ return false;
78
+ const { publishableKey } = props;
79
+ if (publishableKey == null)
80
+ return false;
81
+ if ('client' in props && props.client != null) {
82
+ throw new Error('Cannot provide a Seam client along with other options.');
83
+ }
84
+ if ('clientSessionToken' in props && props.clientSessionToken != null) {
85
+ throw new Error('Cannot provide both a publishableKey and a clientSessionToken.');
86
+ }
87
+ return true;
88
+ };
89
+ const isSeamProviderPropsWithClientSessionToken = (props) => {
90
+ if (!('clientSessionToken' in props))
91
+ return false;
92
+ const { clientSessionToken } = props;
93
+ if (clientSessionToken == null)
94
+ return false;
95
+ if ('client' in props && props.client != null) {
96
+ throw new Error('Cannot provide a Seam client along with other options.');
97
+ }
98
+ if ('publishableKey' in props && props.publishableKey != null) {
99
+ throw new Error('Cannot provide both a clientSessionToken and a publishableKey .');
100
+ }
101
+ if ('userIdentifierKey' in props && props.userIdentifierKey != null) {
102
+ throw new Error('Cannot use a userIdentifierKey with a clientSessionToken.');
103
+ }
104
+ return true;
105
+ };
60
106
  //# sourceMappingURL=SeamProvider.js.map
package/lib/SeamProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"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"}
package/lib/seam/use-seam-client.js CHANGED
@@ -1,17 +1,33 @@
1
1
  import { useQuery } from '@tanstack/react-query';
2
+ import { useEffect } from 'react';
2
3
  import { Seam } from 'seamapi';
3
4
  import { v4 as uuidv4 } from 'uuid';
4
5
  import { useSeamContext } from '../../lib/SeamProvider.js';
5
6
  export function useSeamClient() {
6
- const { client, clientOptions, publishableKey, ...context } = useSeamContext();
7
- const userIdentifierKey = useUserIdentifierKeyOrFingerprint(context.userIdentifierKey);
7
+ const { client, clientOptions, publishableKey, clientSessionToken, ...context } = useSeamContext();
8
+ const userIdentifierKey = useUserIdentifierKeyOrFingerprint(clientSessionToken != null ? '' : context.userIdentifierKey);
8
9
  const { isLoading, isError, error, data } = useQuery({
9
- queryKey: ['client', { client, userIdentifierKey }],
10
+ queryKey: [
11
+ 'client',
12
+ {
13
+ client,
14
+ clientOptions,
15
+ publishableKey,
16
+ userIdentifierKey,
17
+ clientSessionToken,
18
+ },
19
+ ],
10
20
  queryFn: async () => {
11
21
  if (client != null)
12
22
  return client;
23
+ if (clientSessionToken != null) {
24
+ return new Seam({
25
+ ...clientOptions,
26
+ clientSessionToken,
27
+ });
28
+ }
13
29
  if (publishableKey == null) {
14
- throw new Error('Missing publishableKey');
30
+ throw new Error('Missing either a client, publishableKey, or clientSessionToken');
15
31
  }
16
32
  const res = await Seam.getClientSessionToken({
17
33
  ...clientOptions,
@@ -29,13 +45,15 @@ export function useSeamClient() {
29
45
  });
30
46
  return { client: data ?? null, isLoading, isError, error };
31
47
  }
32
- /**
33
- * You'll almost always want to supply a user identifier key, but if you don't
34
- * we'll automatically pick a fingerprint for this user. The user interface
35
- * will show warnings when you use a fingerprint because this client session
36
- * is bound to this machine, and is effectively ephemeral.
37
- */
38
48
  function useUserIdentifierKeyOrFingerprint(userIdentifierKey) {
49
+ useEffect(() => {
50
+ if (userIdentifierKey != null)
51
+ return;
52
+ // eslint-disable-next-line no-console
53
+ console.warn(`Using an automatically generated fingerprint for the SeamProvider userIdentifierKey!
54
+ The user interface will show warnings when using a fingerprint.
55
+ This is not recommended because the client session is now bound to this machine and is effectively ephemeral.`);
56
+ }, [userIdentifierKey]);
39
57
  if (userIdentifierKey != null) {
40
58
  return userIdentifierKey;
41
59
  }
package/lib/seam/use-seam-client.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-seam-client.js","sourceRoot":"","sources":["../../src/lib/seam/use-seam-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAA;AAEnC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,MAAM,UAAU,aAAa;IAM3B,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,OAAO,EAAE,GAAG,cAAc,EAAE,CAAA;IAC9E,MAAM,iBAAiB,GAAG,iCAAiC,CACzD,OAAO,CAAC,iBAAiB,CAC1B,CAAA;IAED,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAO;QACzD,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC;QACnD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,MAAM,CAAA;YAEjC,IAAI,cAAc,IAAI,IAAI,EAAE;gBAC1B,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAA;aAC1C;YAED,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,qBAAqB,CAAC;gBAC3C,GAAG,aAAa;gBAChB,cAAc;gBACd,iBAAiB;aAClB,CAAC,CAAA;YAEF,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,cAAc,EAAE,KAAK,IAAI,IAAI,EAAE;gBAChD,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;aACrD;YAED,OAAO,IAAI,IAAI,CAAC;gBACd,GAAG,aAAa;gBAChB,kBAAkB,EAAE,GAAG,CAAC,cAAc,CAAC,KAAK;aAC7C,CAAC,CAAA;QACJ,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,MAAM,EAAE,IAAI,IAAI,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;AAC5D,CAAC;AAED;;;;;GAKG;AACH,SAAS,iCAAiC,CACxC,iBAAqC;IAErC,IAAI,iBAAiB,IAAI,IAAI,EAAE;QAC7B,OAAO,iBAAiB,CAAA;KACzB;IAED,MAAM,gBAAgB,GACpB,UAAU,EAAE,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAAC;QAC1D,eAAe,MAAM,EAAE,EAAE,CAAA;IAE3B,UAAU,EAAE,YAAY,EAAE,OAAO,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,CAAA;IAE5E,OAAO,gBAAgB,CAAA;AACzB,CAAC"}
1
+ {"version":3,"file":"use-seam-client.js","sourceRoot":"","sources":["../../src/lib/seam/use-seam-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAA;AAEnC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,MAAM,UAAU,aAAa;IAM3B,MAAM,EACJ,MAAM,EACN,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,GAAG,OAAO,EACX,GAAG,cAAc,EAAE,CAAA;IACpB,MAAM,iBAAiB,GAAG,iCAAiC,CACzD,kBAAkB,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAC5D,CAAA;IAED,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAO;QACzD,QAAQ,EAAE;YACR,QAAQ;YACR;gBACE,MAAM;gBACN,aAAa;gBACb,cAAc;gBACd,iBAAiB;gBACjB,kBAAkB;aACnB;SACF;QACD,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,MAAM,CAAA;YAEjC,IAAI,kBAAkB,IAAI,IAAI,EAAE;gBAC9B,OAAO,IAAI,IAAI,CAAC;oBACd,GAAG,aAAa;oBAChB,kBAAkB;iBACnB,CAAC,CAAA;aACH;YAED,IAAI,cAAc,IAAI,IAAI,EAAE;gBAC1B,MAAM,IAAI,KAAK,CACb,gEAAgE,CACjE,CAAA;aACF;YAED,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,qBAAqB,CAAC;gBAC3C,GAAG,aAAa;gBAChB,cAAc;gBACd,iBAAiB;aAClB,CAAC,CAAA;YAEF,IAAI,CAAC,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,cAAc,EAAE,KAAK,IAAI,IAAI,EAAE;gBAChD,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;aACrD;YAED,OAAO,IAAI,IAAI,CAAC;gBACd,GAAG,aAAa;gBAChB,kBAAkB,EAAE,GAAG,CAAC,cAAc,CAAC,KAAK;aAC7C,CAAC,CAAA;QACJ,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,MAAM,EAAE,IAAI,IAAI,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;AAC5D,CAAC;AAED,SAAS,iCAAiC,CACxC,iBAAqC;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB,IAAI,IAAI;YAAE,OAAM;QACrC,sCAAsC;QACtC,OAAO,CAAC,IAAI,CAAC;;8GAE6F,CAAC,CAAA;IAC7G,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAEvB,IAAI,iBAAiB,IAAI,IAAI,EAAE;QAC7B,OAAO,iBAAiB,CAAA;KACzB;IAED,MAAM,gBAAgB,GACpB,UAAU,EAAE,YAAY,EAAE,OAAO,CAAC,uBAAuB,CAAC;QAC1D,eAAe,MAAM,EAAE,EAAE,CAAA;IAE3B,UAAU,EAAE,YAAY,EAAE,OAAO,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,CAAA;IAE5E,OAAO,gBAAgB,CAAA;AACzB,CAAC"}
package/lib/ui/AccessCodeTable/AccessCodeTableContent.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { AccessCode } from 'seamapi';
2
+ export interface AccessCodeTableContentProps {
3
+ accessCodes: AccessCode[];
4
+ onClickBack?: () => void;
5
+ }
6
+ export declare function AccessCodeTableContent(props: AccessCodeTableContentProps): JSX.Element;
package/lib/ui/AccessCodeTable/AccessCodeTableContent.js ADDED
@@ -0,0 +1,15 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { TableBody, TableCell, TableHeader, TableRow, TableTitle, } from '../../../lib/ui/Table/index.js';
3
+ import { AccessCodeKeyIcon } from '../../../lib/icons/AccessCodeKey.js';
4
+ import { CodeDetails } from '../../../lib/ui/AccessCodeTable/CodeDetails.js';
5
+ import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
6
+ import { Caption } from '../../../lib/ui/typography/Caption.js';
7
+ import { Title } from '../../../lib/ui/typography/Title.js';
8
+ export function AccessCodeTableContent(props) {
9
+ const { accessCodes, onClickBack } = props;
10
+ return (_jsxs("div", { className: 'seam-access-code-table', children: [_jsx(ContentHeader, { onClickBack: onClickBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", accessCodes.length, ")"] })] }) }), _jsx(TableBody, { children: accessCodes.map((code) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: 'seam-icon-cell', children: _jsx("div", { children: _jsx(AccessCodeKeyIcon, {}) }) }), _jsxs(TableCell, { className: 'seam-name-cell', children: [_jsx(Title, { children: code.name }), _jsx(CodeDetails, { accessCode: code })] }), _jsx(TableCell, { className: 'seam-action-cell' })] }, code.access_code_id))) })] }));
11
+ }
12
+ const t = {
13
+ accessCodes: 'Access Codes',
14
+ };
15
+ //# sourceMappingURL=AccessCodeTableContent.js.map
package/lib/ui/AccessCodeTable/AccessCodeTableContent.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AccessCodeTableContent.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,UAAU,GACX,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAOlD,MAAM,UAAU,sBAAsB,CACpC,KAAkC;IAElC,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IAE1C,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,aAAa,IAAC,WAAW,EAAE,WAAW,GAAI,EAC3C,KAAC,WAAW,cACV,MAAC,UAAU,eACR,CAAC,CAAC,WAAW,OAAE,MAAC,OAAO,oBAAG,WAAW,CAAC,MAAM,SAAY,IAC9C,GACD,EACd,KAAC,SAAS,cACP,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,MAAC,QAAQ,eACP,KAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,YACnC,wBACE,KAAC,iBAAiB,KAAG,GACjB,GACI,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,aACnC,KAAC,KAAK,cAAE,IAAI,CAAC,IAAI,GAAS,EAC1B,KAAC,WAAW,IAAC,UAAU,EAAE,IAAI,GAAI,IACvB,EACZ,KAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,GAI3B,KAdC,IAAI,CAAC,cAAc,CAevB,CACZ,CAAC,GACQ,IACR,CACP,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,WAAW,EAAE,cAAc;CAC5B,CAAA"}
package/lib/ui/DeviceDetails/DeviceDetails.js CHANGED
@@ -16,7 +16,7 @@ export function DeviceDetails(props) {
16
16
  if (showingAccessCodes) {
17
17
  return (_jsx(AccessCodeTable, { deviceId: device.device_id, onClickBack: toggleAccessCodes }));
18
18
  }
19
- return (_jsxs("div", { className: 'seam-device-details', children: [_jsx(ContentHeader, { title: 'Device' }), _jsxs("div", { className: 'seam-body', children: [_jsx("div", { className: 'seam-summary', children: _jsxs("div", { className: 'seam-content', children: [_jsx("div", { className: 'seam-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-info', children: [_jsx("h4", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-properties', children: [_jsx(OnlineStatus, { device: device }), _jsx(BatteryStatus, { device: device }), _jsx(ModelStatus, { device: device })] })] })] }) }), _jsx("div", { className: 'seam-box', children: _jsxs("div", { className: 'seam-content seam-access-codes', onClick: toggleAccessCodes, children: [_jsxs("span", { className: 'seam-value', children: ["49 ", t.accessCodes] }), _jsx(ChevronRightIcon, {})] }) }), _jsxs("div", { className: 'seam-box', children: [_jsxs("div", { className: 'seam-content', children: [_jsx("span", { className: 'seam-label', children: t.lockStatus }), _jsx("span", { className: 'seam-value', children: lockStatus })] }), _jsx(AccessCodeLength, { accessCodeLength: accessCodeLength })] })] })] }));
19
+ return (_jsxs("div", { className: 'seam-device-details', children: [_jsx(ContentHeader, { title: 'Device' }), _jsxs("div", { className: 'seam-body', children: [_jsx("div", { className: 'seam-summary', children: _jsxs("div", { className: 'seam-content', children: [_jsx("div", { className: 'seam-image', children: _jsx(DeviceImage, { device: device }) }), _jsxs("div", { className: 'seam-info', children: [_jsx("span", { className: 'seam-label', children: t.device }), _jsx("h4", { className: 'seam-device-name', children: device.properties.name }), _jsxs("div", { className: 'seam-properties', children: [_jsx(OnlineStatus, { device: device }), _jsx(BatteryStatus, { device: device }), _jsx(ModelStatus, { device: device })] })] })] }) }), _jsx("div", { className: 'seam-box', children: _jsxs("div", { className: 'seam-content seam-access-codes', onClick: toggleAccessCodes, children: [_jsxs("span", { className: 'seam-value', children: ["49 ", t.accessCodes] }), _jsx(ChevronRightIcon, {})] }) }), _jsxs("div", { className: 'seam-box', children: [_jsxs("div", { className: 'seam-content', children: [_jsx("span", { className: 'seam-label', children: t.lockStatus }), _jsx("span", { className: 'seam-value', children: lockStatus })] }), _jsx(AccessCodeLength, { accessCodeLength: accessCodeLength })] })] })] }));
20
20
  }
21
21
  function AccessCodeLength(props) {
22
22
  const { accessCodeLength } = props;
@@ -26,6 +26,7 @@ function AccessCodeLength(props) {
26
26
  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] })] }));
27
27
  }
28
28
  const t = {
29
+ device: 'Device',
29
30
  locked: 'Locked',
30
31
  unlocked: 'Unlocked',
31
32
  accessCodes: 'access codes',
package/lib/ui/DeviceDetails/DeviceDetails.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DeviceDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceDetails/DeviceDetails.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seamapi/react",
3
- "version": "0.15.1",
3
+ "version": "0.16.1",
4
4
  "description": "Seam React component library.",
5
5
  "type": "module",
6
6
  "main": "index.js",
@@ -44,7 +44,8 @@
44
44
  "!src/stories"
45
45
  ],
46
46
  "scripts": {
47
- "start": "concurrently --raw --kill-others npm:examples npm:storybook",
47
+ "start": "concurrently --raw --kill-others npm:examples:storybook npm:storybook",
48
+ "dev": "npm run start",
48
49
  "build": "npm run build:js",
49
50
  "prebuild": "del 'index.*' lib",
50
51
  "postbuild": "node ./index.js",
@@ -53,7 +54,7 @@
53
54
  "postbuild:js": "tsc-alias --project tsconfig.build.json",
54
55
  "build:css": "sass --load-path=node_modules src/index.scss:index.css",
55
56
  "postbuild:css": "sass --style=compressed --load-path=node_modules src/index.scss:index.min.css",
56
- "docs:start": "concurrently --raw --kill-others npm:examples npm:storybook:docs",
57
+ "docs:start": "concurrently --raw --kill-others npm:examples:storybook npm:storybook:docs",
57
58
  "docs:build": "storybook build --docs --output-dir docs",
58
59
  "predocs:build": "npm run examples:build",
59
60
  "typecheck": "tsc",
@@ -70,9 +71,10 @@
70
71
  "storybook:docs": "storybook dev --docs --port 6007",
71
72
  "storybook:build": "storybook build",
72
73
  "prestorybook:build": "vite build examples",
73
- "examples": "vite examples --host --clearScreen false",
74
+ "examples": "vite examples",
74
75
  "examples:build": "vite build examples",
75
76
  "examples:preview": "vite preview examples",
77
+ "examples:storybook": "vite examples --host --clearScreen false --mode storybook",
76
78
  "preexamples:preview": "npm run examples:build",
77
79
  "generate": "svgr --out-dir src/lib/icons -- src/icons",
78
80
  "pregenerate": "del src/lib/icons",
@@ -147,7 +149,6 @@
147
149
  "storybook-addon-designs": "^7.0.0-beta.2",
148
150
  "stylelint": "^15.6.0",
149
151
  "stylelint-config-standard-scss": "^9.0.0",
150
- "the-new-css-reset": "^1.8.4",
151
152
  "ts-jest": "^29.1.0",
152
153
  "tsc-alias": "^1.8.5",
153
154
  "tsconfig-paths-webpack-plugin": "^4.0.1",
package/src/lib/SeamProvider.tsx CHANGED
@@ -11,23 +11,37 @@ import type { Seam, SeamClientOptions } from 'seamapi'
11
11
 
12
12
  declare global {
13
13
  // eslint-disable-next-line no-var
14
- var seam: Omit<SeamProviderProps, 'children'> | undefined
14
+ var seam: SeamProviderProps | undefined
15
15
  }
16
16
 
17
17
  export interface SeamContext {
18
18
  client: Seam | null
19
- clientOptions?: SeamClientOptions | undefined
19
+ clientOptions?: AllowedSeamClientOptions | undefined
20
20
  publishableKey?: string | undefined
21
21
  userIdentifierKey?: string | undefined
22
+ clientSessionToken?: string | undefined
22
23
  }
23
24
 
24
- export interface SeamProviderProps {
25
- client?: Seam
26
- publishableKey?: string
25
+ type SeamProviderProps =
26
+ | SeamProviderPropsWithClient
27
+ | (SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions)
28
+ | (SeamProviderPropsWithClientSessionToken & AllowedSeamClientOptions)
29
+
30
+ interface SeamProviderPropsWithClient {
31
+ client: Seam
32
+ }
33
+
34
+ interface SeamProviderPropsWithPublishableKey {
35
+ publishableKey: string
27
36
  userIdentifierKey?: string
28
- endpoint?: string
29
37
  }
30
38
 
39
+ interface SeamProviderPropsWithClientSessionToken {
40
+ clientSessionToken: string
41
+ }
42
+
43
+ type AllowedSeamClientOptions = Pick<SeamClientOptions, 'endpoint'>
44
+
31
45
  export function SeamProvider({
32
46
  children,
33
47
  ...props
@@ -61,10 +75,7 @@ export function SeamProvider({
61
75
  }
62
76
 
63
77
  const createDefaultSeamContextValue = (): SeamContext => {
64
- if (
65
- globalThis.seam?.client == null &&
66
- globalThis.seam?.publishableKey == null
67
- ) {
78
+ if (globalThis.seam == null) {
68
79
  return { client: null }
69
80
  }
70
81
 
@@ -77,32 +88,31 @@ const createDefaultSeamContextValue = (): SeamContext => {
77
88
  }
78
89
  }
79
90
 
80
- const createSeamContextValue = ({
81
- client,
82
- ...options
83
- }: Omit<SeamProviderProps, 'children'>): SeamContext => {
84
- if (client == null && Object.keys(options).length === 0) {
85
- return { client: null }
91
+ const createSeamContextValue = (options: SeamProviderProps): SeamContext => {
92
+ if (isSeamProviderPropsWithClient(options)) {
93
+ return options
86
94
  }
87
95
 
88
- if (client != null && Object.values(options).some((v) => v == null)) {
89
- throw new Error(
90
- 'Cannot provide both a Seam client along with other options.'
91
- )
96
+ if (isSeamProviderPropsWithClientSessionToken(options)) {
97
+ const { clientSessionToken, ...clientOptions } = options
98
+ return {
99
+ clientSessionToken,
100
+ clientOptions,
101
+ client: null,
102
+ }
92
103
  }
93
104
 
94
- const { publishableKey, userIdentifierKey, ...clientOptions } = options
95
-
96
- if (client != null) {
97
- return { client }
105
+ if (isSeamProviderPropsWithPublishableKey(options)) {
106
+ const { publishableKey, userIdentifierKey, ...clientOptions } = options
107
+ return {
108
+ publishableKey,
109
+ userIdentifierKey,
110
+ clientOptions,
111
+ client: null,
112
+ }
98
113
  }
99
114
 
100
- return {
101
- client: null,
102
- publishableKey,
103
- userIdentifierKey,
104
- clientOptions,
105
- }
115
+ throw new Error('Invalid SeamProvider options')
106
116
  }
107
117
 
108
118
  const defaultSeamContextValue = createDefaultSeamContextValue()
@@ -118,3 +128,65 @@ export function useSeamContext(): SeamContext {
118
128
 
119
129
  return context
120
130
  }
131
+
132
+ const isSeamProviderPropsWithClient = (
133
+ props: SeamProviderProps
134
+ ): props is SeamProviderPropsWithClient => {
135
+ if (!('client' in props)) return false
136
+
137
+ const { client } = props
138
+ if (client == null) return false
139
+
140
+ if (Object.values(props).some((v) => v == null)) {
141
+ throw new Error('Cannot provide a Seam client along with other options.')
142
+ }
143
+
144
+ return true
145
+ }
146
+
147
+ const isSeamProviderPropsWithPublishableKey = (
148
+ props: SeamProviderProps
149
+ ): props is SeamProviderPropsWithPublishableKey & AllowedSeamClientOptions => {
150
+ if (!('publishableKey' in props)) return false
151
+
152
+ const { publishableKey } = props
153
+ if (publishableKey == null) return false
154
+
155
+ if ('client' in props && props.client != null) {
156
+ throw new Error('Cannot provide a Seam client along with other options.')
157
+ }
158
+
159
+ if ('clientSessionToken' in props && props.clientSessionToken != null) {
160
+ throw new Error(
161
+ 'Cannot provide both a publishableKey and a clientSessionToken.'
162
+ )
163
+ }
164
+
165
+ return true
166
+ }
167
+
168
+ const isSeamProviderPropsWithClientSessionToken = (
169
+ props: SeamProviderProps
170
+ ): props is SeamProviderPropsWithClientSessionToken &
171
+ AllowedSeamClientOptions => {
172
+ if (!('clientSessionToken' in props)) return false
173
+
174
+ const { clientSessionToken } = props
175
+ if (clientSessionToken == null) return false
176
+
177
+ if ('client' in props && props.client != null) {
178
+ throw new Error('Cannot provide a Seam client along with other options.')
179
+ }
180
+
181
+ if ('publishableKey' in props && props.publishableKey != null) {
182
+ throw new Error(
183
+ 'Cannot provide both a clientSessionToken and a publishableKey .'
184
+ )
185
+ }
186
+
187
+ if ('userIdentifierKey' in props && props.userIdentifierKey != null) {
188
+ throw new Error('Cannot use a userIdentifierKey with a clientSessionToken.')
189
+ }
190
+
191
+ return true
192
+ }
package/src/lib/seam/use-seam-client.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { useQuery } from '@tanstack/react-query'
2
+ import { useEffect } from 'react'
2
3
  import { Seam } from 'seamapi'
3
4
  import { v4 as uuidv4 } from 'uuid'
4
5
 
@@ -10,18 +11,42 @@ export function useSeamClient(): {
10
11
  isError: boolean
11
12
  error: unknown
12
13
  } {
13
- const { client, clientOptions, publishableKey, ...context } = useSeamContext()
14
+ const {
15
+ client,
16
+ clientOptions,
17
+ publishableKey,
18
+ clientSessionToken,
19
+ ...context
20
+ } = useSeamContext()
14
21
  const userIdentifierKey = useUserIdentifierKeyOrFingerprint(
15
- context.userIdentifierKey
22
+ clientSessionToken != null ? '' : context.userIdentifierKey
16
23
  )
17
24
 
18
25
  const { isLoading, isError, error, data } = useQuery<Seam>({
19
- queryKey: ['client', { client, userIdentifierKey }],
26
+ queryKey: [
27
+ 'client',
28
+ {
29
+ client,
30
+ clientOptions,
31
+ publishableKey,
32
+ userIdentifierKey,
33
+ clientSessionToken,
34
+ },
35
+ ],
20
36
  queryFn: async () => {
21
37
  if (client != null) return client
22
38
 
39
+ if (clientSessionToken != null) {
40
+ return new Seam({
41
+ ...clientOptions,
42
+ clientSessionToken,
43
+ })
44
+ }
45
+
23
46
  if (publishableKey == null) {
24
- throw new Error('Missing publishableKey')
47
+ throw new Error(
48
+ 'Missing either a client, publishableKey, or clientSessionToken'
49
+ )
25
50
  }
26
51
 
27
52
  const res = await Seam.getClientSessionToken({
@@ -44,15 +69,17 @@ export function useSeamClient(): {
44
69
  return { client: data ?? null, isLoading, isError, error }
45
70
  }
46
71
 
47
- /**
48
- * You'll almost always want to supply a user identifier key, but if you don't
49
- * we'll automatically pick a fingerprint for this user. The user interface
50
- * will show warnings when you use a fingerprint because this client session
51
- * is bound to this machine, and is effectively ephemeral.
52
- */
53
72
  function useUserIdentifierKeyOrFingerprint(
54
73
  userIdentifierKey: string | undefined
55
74
  ): string {
75
+ useEffect(() => {
76
+ if (userIdentifierKey != null) return
77
+ // eslint-disable-next-line no-console
78
+ console.warn(`Using an automatically generated fingerprint for the SeamProvider userIdentifierKey!
79
+ The user interface will show warnings when using a fingerprint.
80
+ This is not recommended because the client session is now bound to this machine and is effectively ephemeral.`)
81
+ }, [userIdentifierKey])
82
+
56
83
  if (userIdentifierKey != null) {
57
84
  return userIdentifierKey
58
85
  }
package/src/lib/ui/AccessCodeTable/AccessCodeTableContent.tsx ADDED
@@ -0,0 +1,61 @@
1
+ import type { AccessCode } from 'seamapi'
2
+
3
+ import {
4
+ TableBody,
5
+ TableCell,
6
+ TableHeader,
7
+ TableRow,
8
+ TableTitle,
9
+ } from 'lib/ui/Table/index.js'
10
+
11
+ import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
12
+ import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
13
+ import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
14
+ import { Caption } from 'lib/ui/typography/Caption.js'
15
+ import { Title } from 'lib/ui/typography/Title.js'
16
+
17
+ export interface AccessCodeTableContentProps {
18
+ accessCodes: AccessCode[]
19
+ onClickBack?: () => void
20
+ }
21
+
22
+ export function AccessCodeTableContent(
23
+ props: AccessCodeTableContentProps
24
+ ): JSX.Element {
25
+ const { accessCodes, onClickBack } = props
26
+
27
+ return (
28
+ <div className='seam-access-code-table'>
29
+ <ContentHeader onClickBack={onClickBack} />
30
+ <TableHeader>
31
+ <TableTitle>
32
+ {t.accessCodes} <Caption>({accessCodes.length})</Caption>
33
+ </TableTitle>
34
+ </TableHeader>
35
+ <TableBody>
36
+ {accessCodes.map((code) => (
37
+ <TableRow key={code.access_code_id}>
38
+ <TableCell className='seam-icon-cell'>
39
+ <div>
40
+ <AccessCodeKeyIcon />
41
+ </div>
42
+ </TableCell>
43
+ <TableCell className='seam-name-cell'>
44
+ <Title>{code.name}</Title>
45
+ <CodeDetails accessCode={code} />
46
+ </TableCell>
47
+ <TableCell className='seam-action-cell'>
48
+ {/* <IconButton>
49
+ <DotsEllipsisMoreIcon />
50
+ </IconButton> */}
51
+ </TableCell>
52
+ </TableRow>
53
+ ))}
54
+ </TableBody>
55
+ </div>
56
+ )
57
+ }
58
+
59
+ const t = {
60
+ accessCodes: 'Access Codes',
61
+ }
package/src/lib/ui/DeviceDetails/DeviceDetails.tsx CHANGED
@@ -41,8 +41,8 @@ export function DeviceDetails(props: DeviceDetailsProps): JSX.Element {
41
41
  <div className='seam-image'>
42
42
  <DeviceImage device={device} />
43
43
  </div>
44
-
45
44
  <div className='seam-info'>
45
+ <span className='seam-label'>{t.device}</span>
46
46
  <h4 className='seam-device-name'>{device.properties.name}</h4>
47
47
  <div className='seam-properties'>
48
48
  <OnlineStatus device={device} />
@@ -93,6 +93,7 @@ function AccessCodeLength(props: {
93
93
  }
94
94
 
95
95
  const t = {
96
+ device: 'Device',
96
97
  locked: 'Locked',
97
98
  unlocked: 'Unlocked',
98
99
  accessCodes: 'access codes',
package/src/styles/_device-details.scss CHANGED
@@ -67,6 +67,14 @@
67
67
  }
68
68
 
69
69
  .seam-info {
70
+ > .seam-label {
71
+ color: var(--text-gray-1);
72
+ font-weight: 600;
73
+ font-size: 14px;
74
+ line-height: 134%;
75
+ margin-bottom: 4px;
76
+ }
77
+
70
78
  .seam-device-name {
71
79
  margin-bottom: 16px;
72
80
  font-weight: 600;
package/src/styles/_layout.scss CHANGED
@@ -5,7 +5,6 @@
5
5
  align-items: center;
6
6
  position: relative;
7
7
  justify-content: center;
8
- width: 100%;
9
8
 
10
9
  .seam-back-icon {
11
10
  position: absolute;
package/src/styles/_main.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use './reset';
1
2
  @use './typography';
2
3
  @use './tables';
3
4
  @use './inputs';
@@ -21,8 +22,7 @@
21
22
  --item-hover-bg: #f4f6f8;
22
23
 
23
24
  // Reset
24
- /* stylelint-disable */
25
- @import 'the-new-css-reset/css/reset.css';
25
+ @include reset.all;
26
26
 
27
27
  // Globals
28
28
  @include typography.all;
package/src/styles/_reset.scss ADDED
@@ -0,0 +1,114 @@
1
+ /**
2
+ * CSS Reset heavily inspired by Fraser Boag's reset.
3
+ * Source: https://www.boag.online/blog/css-reset
4
+ */
5
+
6
+ @mixin all {
7
+ *,
8
+ *::before,
9
+ *::after {
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ html,
14
+ body,
15
+ div,
16
+ span,
17
+ object,
18
+ iframe,
19
+ figure,
20
+ h1,
21
+ h2,
22
+ h3,
23
+ h4,
24
+ h5,
25
+ h6,
26
+ p,
27
+ blockquote,
28
+ pre,
29
+ a,
30
+ code,
31
+ em,
32
+ img,
33
+ small,
34
+ strike,
35
+ strong,
36
+ sub,
37
+ sup,
38
+ tt,
39
+ b,
40
+ u,
41
+ i,
42
+ ol,
43
+ ul,
44
+ li,
45
+ fieldset,
46
+ form,
47
+ label,
48
+ table,
49
+ caption,
50
+ tbody,
51
+ tfoot,
52
+ thead,
53
+ tr,
54
+ th,
55
+ td,
56
+ main,
57
+ canvas,
58
+ embed,
59
+ footer,
60
+ header,
61
+ nav,
62
+ section,
63
+ video {
64
+ margin: 0;
65
+ padding: 0;
66
+ border: 0;
67
+ font-size: 100%;
68
+ font-family: inherit;
69
+ vertical-align: baseline;
70
+ text-rendering: optimizelegibility;
71
+ -webkit-font-smoothing: antialiased;
72
+ text-size-adjust: none;
73
+ }
74
+
75
+ footer,
76
+ header,
77
+ nav,
78
+ section,
79
+ main {
80
+ display: block;
81
+ }
82
+
83
+ body {
84
+ line-height: 1;
85
+ }
86
+
87
+ ol,
88
+ ul {
89
+ list-style: none;
90
+ }
91
+
92
+ blockquote,
93
+ q {
94
+ quotes: none;
95
+ }
96
+
97
+ blockquote::before,
98
+ blockquote::after,
99
+ q::before,
100
+ q::after {
101
+ content: '';
102
+ content: none;
103
+ }
104
+
105
+ table {
106
+ border-collapse: collapse;
107
+ border-spacing: 0;
108
+ }
109
+
110
+ input {
111
+ appearance: none;
112
+ border-radius: 0;
113
+ }
114
+ }