@trycourier/courier-ui-inbox 1.1.0 → 1.2.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 (8) hide show
  1. package/dist/datastore/datastore.d.ts +1 -0
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +156 -971
  5. package/dist/index.mjs.map +1 -1
  6. package/dist/types/courier-inbox-theme-manager.d.ts +17 -37
  7. package/dist/types/courier-inbox-theme.d.ts +5 -27
  8. package/package.json +9 -4
package/dist/index.mjs CHANGED
@@ -3,753 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
3
3
  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
4
  import { Courier, InboxMessageEvent } from "@trycourier/courier-js";
5
5
  import { Courier as Courier2 } from "@trycourier/courier-js";
6
- var __defProp2 = Object.defineProperty;
7
- var __typeError = (msg) => {
8
- throw TypeError(msg);
9
- };
10
- var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
11
- var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
12
- var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
13
- var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
14
- var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
15
- var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
16
- var _isInitialised;
17
- const CourierColors = {
18
- black: {
19
- 500: "#171717",
20
- 50010: "#1717171A",
21
- 50020: "#17171733"
22
- },
23
- gray: {
24
- 200: "#F5F5F5",
25
- 400: "#3A3A3A",
26
- 500: "#E5E5E5",
27
- 600: "#737373"
28
- },
29
- white: {
30
- 500: "#FFFFFF",
31
- 50010: "#FFFFFF1A",
32
- 50020: "#FFFFFF33"
33
- },
34
- blue: {
35
- 400: "#60A5FA",
36
- 500: "#2563EB"
37
- }
38
- };
39
- const theme = {
40
- light: {
41
- colors: {
42
- primary: CourierColors.black[500],
43
- secondary: CourierColors.white[500],
44
- border: CourierColors.gray[500],
45
- link: CourierColors.blue[500],
46
- icon: CourierColors.black[500]
47
- },
48
- button: {
49
- cornerRadius: "4px"
50
- }
51
- },
52
- dark: {
53
- colors: {
54
- primary: CourierColors.white[500],
55
- secondary: CourierColors.black[500],
56
- border: CourierColors.gray[400],
57
- link: CourierColors.blue[400],
58
- icon: CourierColors.white[500]
59
- },
60
- button: {
61
- cornerRadius: "4px"
62
- }
63
- }
64
- };
65
- const getSystemThemeMode = () => {
66
- if (typeof window === "undefined") {
67
- return "light";
68
- }
69
- return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
70
- };
71
- const addSystemThemeModeListener = (callback) => {
72
- if (typeof window === "undefined") {
73
- return () => {
74
- };
75
- }
76
- const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
77
- const handler = (e) => {
78
- callback(e.matches ? "dark" : "light");
79
- };
80
- mediaQuery.addEventListener("change", handler);
81
- return () => {
82
- mediaQuery.removeEventListener("change", handler);
83
- };
84
- };
85
- const HTMLElementBase = (() => {
86
- try {
87
- return typeof HTMLElement === "undefined" ? class {
88
- } : HTMLElement;
89
- } catch {
90
- return class {
91
- };
92
- }
93
- })();
94
- class CourierBaseElement extends HTMLElementBase {
95
- constructor() {
96
- super(...arguments);
97
- __privateAdd(this, _isInitialised, false);
98
- }
99
- /** Tag-name you’ll use in `customElements.define()` */
100
- static get id() {
101
- return "courier-base-element";
102
- }
103
- /* ------------------------------------------------------------------ */
104
- /* Custom-elements lifecycle hooks */
105
- /* ------------------------------------------------------------------ */
106
- connectedCallback() {
107
- var _a;
108
- if (__privateGet(this, _isInitialised)) return;
109
- __privateSet(this, _isInitialised, true);
110
- (_a = this.onComponentMounted) == null ? void 0 : _a.call(this);
111
- }
112
- disconnectedCallback() {
113
- var _a;
114
- __privateSet(this, _isInitialised, false);
115
- (_a = this.onComponentUnmounted) == null ? void 0 : _a.call(this);
116
- }
117
- /* ------------------------------------------------------------------ */
118
- /* Overridable hooks */
119
- /* ------------------------------------------------------------------ */
120
- /** Called **once** when the element first becomes part of the DOM. */
121
- // eslint-disable-next-line @typescript-eslint/no-empty-function
122
- onComponentMounted() {
123
- }
124
- /** Called when the element is removed from the DOM. */
125
- // eslint-disable-next-line @typescript-eslint/no-empty-function
126
- onComponentUnmounted() {
127
- }
128
- }
129
- _isInitialised = /* @__PURE__ */ new WeakMap();
130
- class CourierSystemThemeElement extends CourierBaseElement {
131
- constructor() {
132
- super();
133
- __publicField2(this, "_currentSystemTheme");
134
- __publicField2(this, "_systemThemeCleanup");
135
- this._currentSystemTheme = getSystemThemeMode();
136
- this._systemThemeCleanup = addSystemThemeModeListener((mode) => {
137
- this._currentSystemTheme = mode;
138
- this.onSystemThemeChange(mode);
139
- });
140
- }
141
- static get id() {
142
- return "courier-system-theme-element";
143
- }
144
- get currentSystemTheme() {
145
- return this._currentSystemTheme;
146
- }
147
- onComponentUnmounted() {
148
- var _a;
149
- (_a = this._systemThemeCleanup) == null ? void 0 : _a.call(this);
150
- super.onComponentUnmounted();
151
- }
152
- onSystemThemeChange(_) {
153
- }
154
- }
155
- const baseButtonStyles = {
156
- borderRadius: "4px",
157
- fontSize: "14px"
158
- };
159
- const CourierButtonVariants = {
160
- primary: (mode) => {
161
- return {
162
- ...baseButtonStyles,
163
- backgroundColor: theme[mode].colors.primary,
164
- textColor: theme[mode].colors.secondary,
165
- fontWeight: "500",
166
- shadow: "none"
167
- };
168
- },
169
- secondary: (mode) => {
170
- return {
171
- ...baseButtonStyles,
172
- backgroundColor: theme[mode].colors.secondary,
173
- textColor: theme[mode].colors.primary,
174
- fontWeight: "500",
175
- border: `1px solid ${theme[mode].colors.border}`,
176
- shadow: mode === "light" ? "0px 1px 2px 0px rgba(0, 0, 0, 0.06)" : "0px 1px 2px 0px rgba(255, 255, 255, 0.1)"
177
- };
178
- },
179
- tertiary: (mode) => {
180
- return {
181
- ...baseButtonStyles,
182
- backgroundColor: theme[mode].colors.border,
183
- textColor: theme[mode].colors.primary,
184
- fontWeight: "500",
185
- border: "none",
186
- shadow: "none"
187
- };
188
- }
189
- };
190
- class CourierButton extends CourierSystemThemeElement {
191
- constructor(props) {
192
- super();
193
- __publicField2(this, "_button");
194
- __publicField2(this, "_style");
195
- const shadow = this.attachShadow({ mode: "open" });
196
- this._button = document.createElement("button");
197
- this._button.setAttribute("part", "button");
198
- this._style = document.createElement("style");
199
- this._style.textContent = this.getStyles(props);
200
- shadow.appendChild(this._style);
201
- shadow.appendChild(this._button);
202
- this.updateButton(props);
203
- this._button.addEventListener("click", (e) => {
204
- e.preventDefault();
205
- e.stopPropagation();
206
- if (props.onClick) {
207
- props.onClick();
208
- }
209
- });
210
- }
211
- static get id() {
212
- return "courier-button";
213
- }
214
- getStyles(props) {
215
- const mode = props.mode === "system" ? this.currentSystemTheme : props.mode;
216
- const defaultTextColor = () => {
217
- const secondary = CourierButtonVariants.secondary(mode);
218
- return secondary.textColor;
219
- };
220
- const defaultBackgroundColor = () => {
221
- const secondary = CourierButtonVariants.secondary(mode);
222
- return secondary.backgroundColor;
223
- };
224
- const defaultBorder = () => {
225
- const secondary = CourierButtonVariants.secondary(mode);
226
- return secondary.border;
227
- };
228
- const defaultShadow = () => {
229
- const secondary = CourierButtonVariants.secondary(mode);
230
- return secondary.shadow;
231
- };
232
- const defaultBorderRadius = () => {
233
- const secondary = CourierButtonVariants.secondary(mode);
234
- return secondary.borderRadius;
235
- };
236
- const defaultFontSize = () => {
237
- const secondary = CourierButtonVariants.secondary(mode);
238
- return secondary.fontSize;
239
- };
240
- const defaultFontWeight = () => {
241
- const secondary = CourierButtonVariants.secondary(mode);
242
- return secondary.fontWeight;
243
- };
244
- return `
245
- :host {
246
- display: inline-block;
247
- }
248
-
249
- button {
250
- border: none;
251
- border-radius: ${props.borderRadius ?? defaultBorderRadius()};
252
- font-weight: ${props.fontWeight ?? defaultFontWeight()};
253
- font-family: ${props.fontFamily ?? "inherit"};
254
- font-size: ${props.fontSize ?? defaultFontSize()};
255
- padding: 6px 10px;
256
- cursor: pointer;
257
- width: 100%;
258
- height: 100%;
259
- background-color: ${props.backgroundColor ?? defaultBackgroundColor()};
260
- color: ${props.textColor ?? defaultTextColor()};
261
- border: ${props.border ?? defaultBorder()};
262
- box-shadow: ${props.shadow ?? defaultShadow()};
263
- touch-action: manipulation;
264
- }
265
-
266
- button:hover {
267
- ${props.hoverBackgroundColor ? `background-color: ${props.hoverBackgroundColor};` : "filter: brightness(0.9);"}
268
- }
269
-
270
- button:active {
271
- ${props.activeBackgroundColor ? `background-color: ${props.activeBackgroundColor};` : "filter: brightness(0.8);"}
272
- }
273
-
274
- button:disabled {
275
- opacity: 0.5;
276
- cursor: not-allowed;
277
- }
278
- `;
279
- }
280
- updateButton(props) {
281
- if (props.text) {
282
- this._button.textContent = props.text;
283
- }
284
- this._style.textContent = this.getStyles(props);
285
- }
286
- }
287
- const CourierIconSVGs = {
288
- inbox: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
289
- <path d="M5.5 14.5V17C5.5 17.2812 5.71875 17.5 6 17.5H18C18.25 17.5 18.5 17.2812 18.5 17V14.5H15.9375L15.2812 15.8125C15.0938 16.25 14.6562 16.5 14.1875 16.5H9.78125C9.3125 16.5 8.875 16.25 8.6875 15.8125L8.03125 14.5H5.5ZM18.1875 13L16.6562 6.90625C16.5938 6.65625 16.4062 6.5 16.1875 6.5H7.8125C7.5625 6.5 7.375 6.65625 7.3125 6.90625L5.78125 13H8.1875C8.65625 13 9.09375 13.2812 9.3125 13.7188L9.9375 15H14.0312L14.6875 13.7188C14.875 13.2812 15.3125 13 15.7812 13H18.1875ZM4 14.25C4 14.0938 4 13.9375 4.03125 13.7812L5.84375 6.53125C6.09375 5.625 6.875 5 7.8125 5H16.1875C17.0938 5 17.9062 5.625 18.125 6.53125L19.9375 13.7812C19.9688 13.9375 20 14.0938 20 14.25V17C20 18.125 19.0938 19 18 19H6C4.875 19 4 18.125 4 17V14.25Z" fill="currentColor"/>
290
- </svg>`,
291
- archive: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
292
- <path d="M5.5 6.5V8H18.5V6.5H5.5ZM5 5H19C19.5312 5 20 5.46875 20 6V8.5C20 9.0625 19.5312 9.5 19 9.5H5C4.4375 9.5 4 9.0625 4 8.5V6C4 5.46875 4.4375 5 5 5ZM9 11.75C9 11.3438 9.3125 11 9.75 11H14.25C14.6562 11 15 11.3438 15 11.75C15 12.1875 14.6562 12.5 14.25 12.5H9.75C9.3125 12.5 9 12.1875 9 11.75ZM5 17V10.5H6.5V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V10.5H19V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17Z" fill="currentColor"/>
293
- </svg>`,
294
- check: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
295
- <path d="M18.793 7.33203C19.0742 7.64453 19.0742 8.11328 18.793 8.39453L10.543 16.6445C10.2305 16.957 9.76172 16.957 9.48047 16.6445L5.23047 12.3945C4.91797 12.1133 4.91797 11.6445 5.23047 11.3633C5.51172 11.0508 5.98047 11.0508 6.26172 11.3633L9.98047 15.082L17.7305 7.33203C18.0117 7.05078 18.4805 7.05078 18.7617 7.33203H18.793Z" fill="currentColor"/>
296
- </svg>`,
297
- filter: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
298
- <path d="M5 7C5 6.59375 5.3125 6.25 5.75 6.25H18.25C18.6562 6.25 19 6.59375 19 7C19 7.4375 18.6562 7.75 18.25 7.75H5.75C5.3125 7.75 5 7.4375 5 7ZM7 12C7 11.5938 7.3125 11.25 7.75 11.25H16.25C16.6562 11.25 17 11.5938 17 12C17 12.4375 16.6562 12.75 16.25 12.75H7.75C7.3125 12.75 7 12.4375 7 12ZM14 17C14 17.4375 13.6562 17.75 13.25 17.75H10.75C10.3125 17.75 10 17.4375 10 17C10 16.5938 10.3125 16.25 10.75 16.25H13.25C13.6562 16.25 14 16.5938 14 17Z" fill="currentColor"/>
299
- </svg>`,
300
- overflow: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
301
- <path d="M18.5117 11.9883C18.5117 12.5508 18.1992 13.0195 17.7617 13.3008C17.293 13.582 16.6992 13.582 16.2617 13.3008C15.793 13.0195 15.5117 12.5508 15.5117 11.9883C15.5117 11.457 15.793 10.9883 16.2617 10.707C16.6992 10.4258 17.293 10.4258 17.7617 10.707C18.1992 10.9883 18.5117 11.457 18.5117 11.9883ZM13.5117 11.9883C13.5117 12.5508 13.1992 13.0195 12.7617 13.3008C12.293 13.582 11.6992 13.582 11.2617 13.3008C10.793 13.0195 10.5117 12.5508 10.5117 11.9883C10.5117 11.457 10.793 10.9883 11.2617 10.707C11.6992 10.4258 12.293 10.4258 12.7617 10.707C13.1992 10.9883 13.5117 11.457 13.5117 11.9883ZM7.01172 13.4883C6.44922 13.4883 5.98047 13.207 5.69922 12.7383C5.41797 12.3008 5.41797 11.707 5.69922 11.2383C5.98047 10.8008 6.44922 10.4883 7.01172 10.4883C7.54297 10.4883 8.01172 10.8008 8.29297 11.2383C8.57422 11.707 8.57422 12.3008 8.29297 12.7383C8.01172 13.207 7.54297 13.4883 7.01172 13.4883Z" fill="currentColor"/>
302
- </svg>`,
303
- read: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
304
- <path d="M7 6.5C6.71875 6.5 6.5 6.75 6.5 7V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V7C17.5 6.75 17.25 6.5 17 6.5H7ZM5 7C5 5.90625 5.875 5 7 5H17C18.0938 5 19 5.90625 19 7V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17V7ZM15.5312 10.5312L11.5312 14.5312C11.2188 14.8438 10.75 14.8438 10.4688 14.5312L8.46875 12.5312C8.15625 12.25 8.15625 11.7812 8.46875 11.5C8.75 11.1875 9.21875 11.1875 9.53125 11.5L11 12.9688L14.4688 9.46875C14.75 9.1875 15.2188 9.1875 15.5 9.46875C15.8125 9.78125 15.8125 10.25 15.5 10.5312H15.5312Z" fill="currentColor"/>
305
- </svg>`,
306
- archiveRead: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
307
- <path d="M7.5 6.5V15.25H16.5V6.5H7.5ZM6 15.25V6.5C6 5.6875 6.65625 5 7.5 5H16.5C17.3125 5 18 5.6875 18 6.5V15.25C18.4062 15.25 18.75 15.5938 18.75 16C18.75 16.4375 18.4062 16.75 18 16.75H6C5.5625 16.75 5.25 16.4375 5.25 16C5.25 15.5938 5.5625 15.25 6 15.25ZM5 13V14.5H4.5V17.5H19.5V14.5H19V13H19.5C20.3125 13 21 13.6875 21 14.5V17.5C21 18.3438 20.3125 19 19.5 19H4.5C3.65625 19 3 18.3438 3 17.5V14.5C3 13.6875 3.65625 13 4.5 13H5ZM15.0312 9.625L11.6875 12.9688C11.5312 13.0938 11.3438 13.1875 11.1562 13.1875C10.9375 13.1875 10.75 13.0938 10.625 12.9688L8.96875 11.2812C8.65625 11 8.65625 10.5312 8.96875 10.25C9.25 9.9375 9.71875 9.9375 10 10.25L11.1562 11.375L13.9688 8.5625C14.25 8.28125 14.7188 8.28125 15 8.5625C15.3125 8.875 15.3125 9.34375 15 9.625H15.0312Z" fill="currentColor"/>
308
- </svg>`,
309
- unread: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
310
- <path d="M17 6.5H7C6.71875 6.5 6.5 6.75 6.5 7V17C6.5 17.2812 6.71875 17.5 7 17.5H17C17.25 17.5 17.5 17.2812 17.5 17V7C17.5 6.75 17.25 6.5 17 6.5ZM7 5H17C18.0938 5 19 5.90625 19 7V17C19 18.125 18.0938 19 17 19H7C5.875 19 5 18.125 5 17V7C5 5.90625 5.875 5 7 5Z" fill="currentColor"/>
311
- </svg>`,
312
- unarchive: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
313
- <path d="M5.5 11C5.0625 11 4.75 10.6875 4.75 10.25V5.75C4.75 5.34375 5.0625 5 5.5 5C5.90625 5 6.25 5.34375 6.25 5.75V8.28125L6.875 7.53125C8.15625 6 10.0625 5 12.25 5C16.0938 5 19.25 8.15625 19.25 12C19.25 15.875 16.0938 19 12.25 19C10.6562 19 9.21875 18.5 8.03125 17.625C7.71875 17.375 7.625 16.9062 7.875 16.5625C8.125 16.2188 8.59375 16.1562 8.9375 16.4062C9.84375 17.0938 11 17.5 12.25 17.5C15.2812 17.5 17.75 15.0625 17.75 12C17.75 8.96875 15.2812 6.5 12.25 6.5C10.5312 6.5 9.03125 7.28125 8 8.5L7.15625 9.5H10C10.4062 9.5 10.75 9.84375 10.75 10.25C10.75 10.6875 10.4062 11 10 11H5.5Z" fill="currentColor"/>
314
- </svg>`
315
- };
316
- class CourierIcon extends CourierBaseElement {
317
- constructor(color, svg) {
318
- super();
319
- __publicField2(this, "_color");
320
- __publicField2(this, "_svg");
321
- __publicField2(this, "_iconContainer");
322
- __publicField2(this, "_style");
323
- this._color = color ?? CourierColors.black[500];
324
- this._svg = svg;
325
- const shadow = this.attachShadow({ mode: "open" });
326
- this._iconContainer = document.createElement("div");
327
- shadow.appendChild(this._iconContainer);
328
- this._style = document.createElement("style");
329
- this._style.textContent = this.getStyles(this._color);
330
- shadow.appendChild(this._style);
331
- this.refresh();
332
- }
333
- static get id() {
334
- return "courier-icon";
335
- }
336
- getStyles(color) {
337
- return `
338
- :host {
339
- display: inline-block;
340
- line-height: 0;
341
- display: flex;
342
- align-items: center;
343
- justify-content: center;
344
- }
345
-
346
- svg {
347
- width: 24px;
348
- height: 24px;
349
- color: ${color};
350
- }
351
- `;
352
- }
353
- refresh() {
354
- if (this._svg) {
355
- this._iconContainer.innerHTML = this._svg;
356
- }
357
- if (this._color) {
358
- this._style.textContent = this.getStyles(this._color);
359
- }
360
- }
361
- updateColor(color) {
362
- this._color = color;
363
- this.refresh();
364
- }
365
- updateSVG(svg) {
366
- this._svg = svg;
367
- this.refresh();
368
- }
369
- }
370
- class CourierLink extends CourierBaseElement {
371
- constructor() {
372
- super();
373
- __publicField2(this, "link");
374
- const shadow = this.attachShadow({ mode: "open" });
375
- this.link = document.createElement("a");
376
- this.link.setAttribute("part", "link");
377
- const style = document.createElement("style");
378
- style.textContent = `
379
- :host {
380
- display: inline-block;
381
- }
382
-
383
- a {
384
- text-decoration: none;
385
- border-radius: 4px;
386
- cursor: pointer;
387
- font-weight: 500;
388
- transition: all 0.2s ease;
389
- font-family: var(--courier-link-font-family, inherit);
390
- font-size: var(--courier-link-font-size, inherit);
391
- }
392
-
393
- /* Variants */
394
- a[data-variant="primary"][data-mode="light"] {
395
- color: var(--courier-link-color, ${theme.light.colors.link});
396
- }
397
-
398
- a[data-variant="primary"][data-mode="light"]:hover {
399
- opacity: 0.8;
400
- }
401
-
402
- a[data-variant="primary"][data-mode="light"]:active {
403
- opacity: 0.6;
404
- }
405
-
406
- a[data-variant="primary"][data-mode="dark"] {
407
- color: var(--courier-link-color, ${theme.dark.colors.link});
408
- }
409
-
410
- a[data-variant="primary"][data-mode="dark"]:hover {
411
- opacity: 0.8;
412
- }
413
-
414
- a[data-variant="primary"][data-mode="dark"]:active {
415
- opacity: 0.6;
416
- }
417
-
418
- a[data-underline="true"] {
419
- text-decoration: underline;
420
- }
421
-
422
- a:disabled {
423
- opacity: 0.6;
424
- cursor: not-allowed;
425
- pointer-events: none;
426
- }
427
- `;
428
- shadow.appendChild(style);
429
- shadow.appendChild(this.link);
430
- this.updateVariant();
431
- this.updateUnderline();
432
- this.updateMode();
433
- }
434
- static get id() {
435
- return "courier-link";
436
- }
437
- connectedCallback() {
438
- const slot = document.createElement("slot");
439
- this.link.appendChild(slot);
440
- this.updateHref();
441
- }
442
- attributeChangedCallback(name, oldValue, newValue) {
443
- if (oldValue === newValue) return;
444
- switch (name) {
445
- case "href":
446
- this.updateHref();
447
- break;
448
- case "variant":
449
- case "mode":
450
- this.updateVariant();
451
- break;
452
- case "disabled":
453
- this.link.style.pointerEvents = this.hasAttribute("disabled") ? "none" : "auto";
454
- this.link.style.opacity = this.hasAttribute("disabled") ? "0.6" : "1";
455
- break;
456
- case "color":
457
- this.updateColor();
458
- break;
459
- case "underline":
460
- this.updateUnderline();
461
- break;
462
- case "target":
463
- this.updateTarget();
464
- break;
465
- case "font-family":
466
- this.updateFontFamily();
467
- break;
468
- case "font-size":
469
- this.updateFontSize();
470
- break;
471
- }
472
- }
473
- updateHref() {
474
- const href = this.getAttribute("href");
475
- if (href) {
476
- this.link.href = href;
477
- }
478
- }
479
- updateVariant() {
480
- const variant = this.getAttribute("variant") || "primary";
481
- const mode = this.getAttribute("mode") || "light";
482
- this.link.setAttribute("data-variant", variant);
483
- this.link.setAttribute("data-mode", mode);
484
- }
485
- updateColor() {
486
- const color = this.getAttribute("color");
487
- if (color) {
488
- this.link.style.setProperty("--courier-link-color", color);
489
- } else {
490
- this.link.style.removeProperty("--courier-link-color");
491
- }
492
- }
493
- updateUnderline() {
494
- const underline = this.getAttribute("underline") === "true";
495
- this.link.setAttribute("data-underline", underline.toString());
496
- }
497
- updateMode() {
498
- const mode = this.getAttribute("mode") || "light";
499
- this.link.setAttribute("data-mode", mode);
500
- }
501
- updateTarget() {
502
- const target = this.getAttribute("target");
503
- if (target) {
504
- this.link.target = target;
505
- }
506
- }
507
- updateFontFamily() {
508
- const fontFamily = this.getAttribute("font-family");
509
- if (fontFamily) {
510
- this.link.style.setProperty("--courier-link-font-family", fontFamily);
511
- } else {
512
- this.link.style.removeProperty("--courier-link-font-family");
513
- }
514
- }
515
- updateFontSize() {
516
- const fontSize = this.getAttribute("font-size");
517
- if (fontSize) {
518
- this.link.style.setProperty("--courier-link-font-size", fontSize);
519
- } else {
520
- this.link.style.removeProperty("--courier-link-font-size");
521
- }
522
- }
523
- }
524
- __publicField2(CourierLink, "observedAttributes", [
525
- "href",
526
- "variant",
527
- "disabled",
528
- "color",
529
- "underline",
530
- "mode",
531
- "target",
532
- "font-family",
533
- "font-size"
534
- ]);
535
- class CourierFactoryElement extends CourierSystemThemeElement {
536
- constructor() {
537
- super();
538
- }
539
- // Build the element with a factory function
540
- build(newElement) {
541
- if (newElement === null) {
542
- this.replaceChildren();
543
- return;
544
- }
545
- const element = newElement ?? this.defaultElement();
546
- this.replaceChildren(element);
547
- }
548
- // Default element to be used if no factory is provided
549
- defaultElement() {
550
- const element = document.createElement("div");
551
- element.textContent = "Default Element Factory";
552
- element.style.cssText = `
553
- background-color: red;
554
- text-align: center;
555
- padding: 12px;
556
- `;
557
- return element;
558
- }
559
- }
560
- class CourierInfoState extends CourierFactoryElement {
561
- constructor(props) {
562
- super();
563
- __publicField2(this, "_props");
564
- __publicField2(this, "_title");
565
- __publicField2(this, "_button");
566
- __publicField2(this, "_style");
567
- this._props = props;
568
- }
569
- static get id() {
570
- return "courier-info-state";
571
- }
572
- defaultElement() {
573
- var _a;
574
- const container = document.createElement("div");
575
- this._title = document.createElement("h2");
576
- if ((_a = this._props.title) == null ? void 0 : _a.text) {
577
- this._title.textContent = this._props.title.text;
578
- }
579
- this._button = new CourierButton(this._props.button ?? CourierButtonVariants.secondary(this.currentSystemTheme));
580
- this._style = document.createElement("style");
581
- this._style.textContent = this.getStyles(this._props);
582
- container.className = "container";
583
- container.appendChild(this._style);
584
- container.appendChild(this._title);
585
- container.appendChild(this._button);
586
- this.appendChild(container);
587
- return container;
588
- }
589
- onSystemThemeChange(_) {
590
- this.updateStyles(this._props);
591
- }
592
- getStyles(props) {
593
- var _a, _b, _c, _d;
594
- return `
595
- :host {
596
- display: flex;
597
- align-items: center;
598
- justify-content: center;
599
- height: 100%;
600
- width: 100%;
601
- }
602
-
603
- .container {
604
- display: flex;
605
- flex-direction: column;
606
- align-items: center;
607
- justify-content: center;
608
- gap: 16px;
609
- text-align: center;
610
- padding: 24px;
611
- box-sizing: border-box;
612
- height: 100%;
613
- }
614
-
615
- .container h2 {
616
- margin: 0;
617
- color: ${((_a = props.title) == null ? void 0 : _a.textColor) ?? "red"};
618
- font-size: ${((_b = props.title) == null ? void 0 : _b.fontSize) ?? "16px"};
619
- font-weight: ${((_c = props.title) == null ? void 0 : _c.fontWeight) ?? "500"};
620
- font-family: ${((_d = props.title) == null ? void 0 : _d.fontFamily) ?? "inherit"};
621
- }
622
- `;
623
- }
624
- updateStyles(props) {
625
- this._props = props;
626
- if (this._style) {
627
- this._style.textContent = this.getStyles(props);
628
- }
629
- if (this._button) {
630
- this._button.updateButton(props.button);
631
- }
632
- }
633
- }
634
- class CourierIconButton extends CourierBaseElement {
635
- constructor(svg, color, backgroundColor, hoverBackgroundColor, activeBackgroundColor, borderRadius, height, width) {
636
- super();
637
- __publicField2(this, "_backgroundColor");
638
- __publicField2(this, "_hoverBackgroundColor");
639
- __publicField2(this, "_activeBackgroundColor");
640
- __publicField2(this, "_borderRadius");
641
- __publicField2(this, "_height");
642
- __publicField2(this, "_width");
643
- __publicField2(this, "_style");
644
- __publicField2(this, "_button");
645
- __publicField2(this, "_icon");
646
- this._borderRadius = borderRadius;
647
- this._backgroundColor = backgroundColor;
648
- this._hoverBackgroundColor = hoverBackgroundColor;
649
- this._activeBackgroundColor = activeBackgroundColor;
650
- this._height = height;
651
- this._width = width;
652
- const shadow = this.attachShadow({ mode: "open" });
653
- this._button = document.createElement("button");
654
- this._button.setAttribute("part", "button");
655
- this._icon = new CourierIcon(color, svg);
656
- this._style = document.createElement("style");
657
- this.refresh();
658
- shadow.appendChild(this._style);
659
- this._button.appendChild(this._icon);
660
- shadow.appendChild(this._button);
661
- }
662
- static get id() {
663
- return "courier-icon-button";
664
- }
665
- refresh() {
666
- this._style.textContent = this.getStyles();
667
- }
668
- getStyles() {
669
- return `
670
- :host {
671
- display: inline-block;
672
- border-radius: ${this._borderRadius ?? "50%"};
673
- }
674
-
675
- button {
676
- border: none;
677
- border-radius: ${this._borderRadius ?? "50%"};
678
- cursor: pointer;
679
- width: ${this._width ?? "36px"};
680
- height: ${this._height ?? "36px"};
681
- display: flex;
682
- align-items: center;
683
- justify-content: center;
684
- background: ${this._backgroundColor ?? "transparent"};
685
- transition: background-color 0.2s ease;
686
- touch-action: manipulation;
687
- }
688
-
689
- button:hover {
690
- background-color: ${this._hoverBackgroundColor ?? "red"};
691
- }
692
-
693
- button:active {
694
- background-color: ${this._activeBackgroundColor ?? "red"};
695
- }
696
-
697
- button:disabled {
698
- opacity: 0.6;
699
- cursor: not-allowed;
700
- }
701
-
702
- [part="icon"] {
703
- display: flex;
704
- align-items: center;
705
- justify-content: center;
706
- width: 24px;
707
- height: 24px;
708
- }
709
- `;
710
- }
711
- updateIconColor(color) {
712
- this._icon.updateColor(color);
713
- }
714
- updateIconSVG(svg) {
715
- this._icon.updateSVG(svg);
716
- }
717
- updateBackgroundColor(color) {
718
- this._backgroundColor = color;
719
- this.refresh();
720
- }
721
- updateHoverBackgroundColor(color) {
722
- this._hoverBackgroundColor = color;
723
- this.refresh();
724
- }
725
- updateActiveBackgroundColor(color) {
726
- this._activeBackgroundColor = color;
727
- this.refresh();
728
- }
729
- }
730
- function registerElement(element) {
731
- if (typeof window !== "undefined" && !customElements.get(element.id)) {
732
- customElements.define(element.id, element);
733
- }
734
- }
735
- function injectGlobalStyle(styleId, styles) {
736
- const selector = `style[data-${styleId}]`;
737
- const existingStyle = document.querySelector(selector);
738
- if (!existingStyle) {
739
- const style = document.createElement("style");
740
- style.setAttribute(`data-${styleId}`, "");
741
- style.textContent = styles;
742
- document.head.appendChild(style);
743
- return style;
744
- }
745
- return existingStyle;
746
- }
747
- registerElement(CourierButton);
748
- registerElement(CourierIcon);
749
- registerElement(CourierLink);
750
- registerElement(CourierInfoState);
751
- registerElement(CourierIconButton);
752
- registerElement(CourierSystemThemeElement);
6
+ import { registerElement, CourierBaseElement, CourierIconButton, CourierIcon, CourierButton, injectGlobalStyle, CourierFactoryElement, CourierInfoState, CourierIconSVGs, CourierColors, CourierThemeManager } from "@trycourier/courier-ui-core";
753
7
  function copyMessage(message) {
754
8
  const copy = {
755
9
  ...message
@@ -800,12 +54,12 @@ function getMessageTime(message) {
800
54
  return `${Math.floor(diffInSeconds / 31536e3)}y`;
801
55
  }
802
56
  class CourierInboxListItemMenu extends CourierBaseElement {
803
- constructor(theme2) {
57
+ constructor(theme) {
804
58
  super();
805
59
  // State
806
60
  __publicField(this, "_theme");
807
61
  __publicField(this, "_options", []);
808
- this._theme = theme2;
62
+ this._theme = theme;
809
63
  }
810
64
  static get id() {
811
65
  return "courier-inbox-list-item-menu";
@@ -815,9 +69,9 @@ class CourierInboxListItemMenu extends CourierBaseElement {
815
69
  menu.className = "menu";
816
70
  this.appendChild(menu);
817
71
  }
818
- static getStyles(theme2) {
72
+ static getStyles(theme) {
819
73
  var _a, _b, _c;
820
- const menu = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.menu;
74
+ const menu = (_c = (_b = (_a = theme.inbox) == null ? void 0 : _a.list) == null ? void 0 : _b.item) == null ? void 0 : _c.menu;
821
75
  return `
822
76
  ${CourierInboxListItemMenu.id} {
823
77
  display: none;
@@ -903,6 +157,7 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
903
157
  __publicField(this, "_archiveDataSet");
904
158
  __publicField(this, "_dataStoreListeners", []);
905
159
  __publicField(this, "_unreadCount");
160
+ __publicField(this, "_removeMessageEventListener");
906
161
  __publicField(this, "isPaginatingInbox", false);
907
162
  __publicField(this, "isPaginatingArchive", false);
908
163
  }
@@ -1008,11 +263,10 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
1008
263
  (_c = (_b = Courier.shared.client) == null ? void 0 : _b.options.logger) == null ? void 0 : _c.info("CourierInbox socket not available");
1009
264
  return;
1010
265
  }
1011
- if (socket.isConnecting || socket.isOpen) {
1012
- (_f = (_d = Courier.shared.client) == null ? void 0 : _d.options.logger) == null ? void 0 : _f.info(`Inbox socket already connecting or open for client ID: [${(_e = Courier.shared.client) == null ? void 0 : _e.options.connectionId}]`);
1013
- return;
266
+ if (this._removeMessageEventListener) {
267
+ this._removeMessageEventListener();
1014
268
  }
1015
- socket.addMessageEventListener((event) => {
269
+ this._removeMessageEventListener = socket.addMessageEventListener((event) => {
1016
270
  if (event.event === InboxMessageEvent.NewMessage) {
1017
271
  const message2 = event.data;
1018
272
  this.addMessage(message2, 0, "inbox");
@@ -1063,6 +317,10 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
1063
317
  break;
1064
318
  }
1065
319
  });
320
+ if (socket.isConnecting || socket.isOpen) {
321
+ (_f = (_d = Courier.shared.client) == null ? void 0 : _d.options.logger) == null ? void 0 : _f.info(`Inbox socket already connecting or open for client ID: [${(_e = Courier.shared.client) == null ? void 0 : _e.options.connectionId}]`);
322
+ return;
323
+ }
1066
324
  await socket.connect();
1067
325
  (_i = (_g = Courier.shared.client) == null ? void 0 : _g.options.logger) == null ? void 0 : _i.info(`Inbox socket connected for client ID: [${(_h = Courier.shared.client) == null ? void 0 : _h.options.connectionId}]`);
1068
326
  } catch (error) {
@@ -1669,9 +927,9 @@ class CourierInboxListItem extends CourierBaseElement {
1669
927
  var _a;
1670
928
  (_a = this._observer) == null ? void 0 : _a.disconnect();
1671
929
  }
1672
- static getStyles(theme2) {
930
+ static getStyles(theme) {
1673
931
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
1674
- const list = (_a = theme2.inbox) == null ? void 0 : _a.list;
932
+ const list = (_a = theme.inbox) == null ? void 0 : _a.list;
1675
933
  return `
1676
934
  ${CourierInboxListItem.id} {
1677
935
  display: flex;
@@ -1978,11 +1236,11 @@ class CourierInboxListItem extends CourierBaseElement {
1978
1236
  }
1979
1237
  registerElement(CourierInboxListItem);
1980
1238
  class CourierInboxSkeletonListItem extends CourierBaseElement {
1981
- constructor(theme2) {
1239
+ constructor(theme) {
1982
1240
  super();
1983
1241
  __publicField(this, "_theme");
1984
1242
  __publicField(this, "_style");
1985
- this._theme = theme2;
1243
+ this._theme = theme;
1986
1244
  }
1987
1245
  static get id() {
1988
1246
  return "courier-inbox-skeleton-list-item";
@@ -2030,11 +1288,11 @@ class CourierInboxSkeletonListItem extends CourierBaseElement {
2030
1288
  }
2031
1289
  registerElement(CourierInboxSkeletonListItem);
2032
1290
  class CourierSkeletonAnimatedRow extends CourierBaseElement {
2033
- constructor(theme2) {
1291
+ constructor(theme) {
2034
1292
  super();
2035
1293
  __publicField(this, "_theme");
2036
1294
  __publicField(this, "_style");
2037
- this._theme = theme2;
1295
+ this._theme = theme;
2038
1296
  }
2039
1297
  static get id() {
2040
1298
  return "courier-skeleton-animated-row";
@@ -2052,9 +1310,9 @@ class CourierSkeletonAnimatedRow extends CourierBaseElement {
2052
1310
  skeletonItem.className = "skeleton-item";
2053
1311
  this.appendChild(skeletonItem);
2054
1312
  }
2055
- static getStyles(theme2) {
1313
+ static getStyles(theme) {
2056
1314
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
2057
- const color = ((_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.animation) == null ? void 0 : _c.barColor) ?? "#000";
1315
+ const color = ((_c = (_b = (_a = theme.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.animation) == null ? void 0 : _c.barColor) ?? "#000";
2058
1316
  const hexColor = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
2059
1317
  const r = parseInt(hexColor.slice(1, 3), 16);
2060
1318
  const g = parseInt(hexColor.slice(3, 5), 16);
@@ -2071,7 +1329,7 @@ class CourierSkeletonAnimatedRow extends CourierBaseElement {
2071
1329
  }
2072
1330
 
2073
1331
  ${CourierSkeletonAnimatedRow.id} .skeleton-item {
2074
- height: ${((_f = (_e = (_d = theme2.inbox) == null ? void 0 : _d.loading) == null ? void 0 : _e.animation) == null ? void 0 : _f.barHeight) ?? "14px"};
1332
+ height: ${((_f = (_e = (_d = theme.inbox) == null ? void 0 : _d.loading) == null ? void 0 : _e.animation) == null ? void 0 : _f.barHeight) ?? "14px"};
2075
1333
  width: 100%;
2076
1334
  background: linear-gradient(
2077
1335
  90deg,
@@ -2080,8 +1338,8 @@ class CourierSkeletonAnimatedRow extends CourierBaseElement {
2080
1338
  ${colorWithAlpha80} 75%
2081
1339
  );
2082
1340
  background-size: 200% 100%;
2083
- animation: ${CourierSkeletonAnimatedRow.id}-shimmer ${((_i = (_h = (_g = theme2.inbox) == null ? void 0 : _g.loading) == null ? void 0 : _h.animation) == null ? void 0 : _i.duration) ?? "2s"} ease-in-out infinite;
2084
- border-radius: ${((_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.loading) == null ? void 0 : _k.animation) == null ? void 0 : _l.barBorderRadius) ?? "14px"};
1341
+ animation: ${CourierSkeletonAnimatedRow.id}-shimmer ${((_i = (_h = (_g = theme.inbox) == null ? void 0 : _g.loading) == null ? void 0 : _h.animation) == null ? void 0 : _i.duration) ?? "2s"} ease-in-out infinite;
1342
+ border-radius: ${((_l = (_k = (_j = theme.inbox) == null ? void 0 : _j.loading) == null ? void 0 : _k.animation) == null ? void 0 : _l.barBorderRadius) ?? "14px"};
2085
1343
  }
2086
1344
 
2087
1345
  @keyframes ${CourierSkeletonAnimatedRow.id}-shimmer {
@@ -2097,11 +1355,11 @@ class CourierSkeletonAnimatedRow extends CourierBaseElement {
2097
1355
  }
2098
1356
  registerElement(CourierSkeletonAnimatedRow);
2099
1357
  class CourierInboxSkeletonList extends CourierFactoryElement {
2100
- constructor(theme2) {
1358
+ constructor(theme) {
2101
1359
  super();
2102
1360
  __publicField(this, "_theme");
2103
1361
  __publicField(this, "_style");
2104
- this._theme = theme2;
1362
+ this._theme = theme;
2105
1363
  }
2106
1364
  static get id() {
2107
1365
  return "courier-inbox-skeleton-list";
@@ -2123,7 +1381,7 @@ class CourierInboxSkeletonList extends CourierFactoryElement {
2123
1381
  this.appendChild(list);
2124
1382
  return list;
2125
1383
  }
2126
- static getStyles(theme2) {
1384
+ static getStyles(theme) {
2127
1385
  var _a, _b, _c, _d;
2128
1386
  return `
2129
1387
  ${CourierInboxSkeletonList.id} {
@@ -2143,12 +1401,12 @@ class CourierInboxSkeletonList extends CourierFactoryElement {
2143
1401
  }
2144
1402
 
2145
1403
  ${CourierInboxSkeletonList.id} .list > * {
2146
- border-bottom: ${((_b = (_a = theme2.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) ?? "1px solid red"};
1404
+ border-bottom: ${((_b = (_a = theme.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) ?? "1px solid red"};
2147
1405
  opacity: 100%;
2148
1406
  }
2149
1407
 
2150
1408
  ${CourierInboxSkeletonList.id} .list > *:nth-child(2) {
2151
- border-bottom: ${((_d = (_c = theme2.inbox) == null ? void 0 : _c.loading) == null ? void 0 : _d.divider) ?? "1px solid red"};
1409
+ border-bottom: ${((_d = (_c = theme.inbox) == null ? void 0 : _c.loading) == null ? void 0 : _d.divider) ?? "1px solid red"};
2152
1410
  opacity: 88%;
2153
1411
  }
2154
1412
 
@@ -2304,9 +1562,9 @@ class CourierInboxList extends CourierBaseElement {
2304
1562
  setCanLongPressListItems(canLongPress) {
2305
1563
  this._canLongPressListItems = canLongPress;
2306
1564
  }
2307
- static getStyles(theme2) {
1565
+ static getStyles(theme) {
2308
1566
  var _a;
2309
- const list = (_a = theme2.inbox) == null ? void 0 : _a.list;
1567
+ const list = (_a = theme.inbox) == null ? void 0 : _a.list;
2310
1568
  return `
2311
1569
  ${CourierInboxList.id} {
2312
1570
  flex: 1;
@@ -2632,7 +1890,7 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2632
1890
  }
2633
1891
  getStyles() {
2634
1892
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa;
2635
- const theme2 = this._themeSubscription.manager.getTheme();
1893
+ const theme = this._themeSubscription.manager.getTheme();
2636
1894
  return `
2637
1895
  ${CourierInboxOptionMenu.id} {
2638
1896
  position: relative;
@@ -2644,10 +1902,10 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2644
1902
  position: absolute;
2645
1903
  top: 42px;
2646
1904
  right: -6px;
2647
- border-radius: ${((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.popup) == null ? void 0 : _d.borderRadius) ?? "6px"};
2648
- border: ${((_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.menus) == null ? void 0 : _g.popup) == null ? void 0 : _h.border) ?? "1px solid red"};
2649
- background: ${((_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.backgroundColor) ?? "red"};
2650
- box-shadow: ${((_p = (_o = (_n = (_m = theme2.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.menus) == null ? void 0 : _o.popup) == null ? void 0 : _p.shadow) ?? "0 4px 12px 0 red"};
1905
+ border-radius: ${((_d = (_c = (_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.popup) == null ? void 0 : _d.borderRadius) ?? "6px"};
1906
+ border: ${((_h = (_g = (_f = (_e = theme.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.menus) == null ? void 0 : _g.popup) == null ? void 0 : _h.border) ?? "1px solid red"};
1907
+ background: ${((_l = (_k = (_j = (_i = theme.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.backgroundColor) ?? "red"};
1908
+ box-shadow: ${((_p = (_o = (_n = (_m = theme.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.menus) == null ? void 0 : _o.popup) == null ? void 0 : _p.shadow) ?? "0 4px 12px 0 red"};
2651
1909
  z-index: 1000;
2652
1910
  min-width: 200px;
2653
1911
  overflow: hidden;
@@ -2655,7 +1913,7 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2655
1913
  }
2656
1914
 
2657
1915
  ${CourierInboxOptionMenu.id} courier-inbox-filter-menu-item {
2658
- border-bottom: ${((_u = (_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.divider) ?? "none"};
1916
+ border-bottom: ${((_u = (_t = (_s = (_r = (_q = theme.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.menus) == null ? void 0 : _s.popup) == null ? void 0 : _t.list) == null ? void 0 : _u.divider) ?? "none"};
2659
1917
  }
2660
1918
 
2661
1919
  ${CourierInboxOptionMenu.id} courier-inbox-filter-menu-item:last-child {
@@ -2670,11 +1928,11 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2670
1928
  }
2671
1929
 
2672
1930
  ${CourierInboxOptionMenuItem.id}:hover {
2673
- background-color: ${((_z = (_y = (_x = (_w = (_v = theme2.inbox) == null ? void 0 : _v.header) == null ? void 0 : _w.menus) == null ? void 0 : _x.popup) == null ? void 0 : _y.list) == null ? void 0 : _z.hoverBackgroundColor) ?? "red"};
1931
+ background-color: ${((_z = (_y = (_x = (_w = (_v = theme.inbox) == null ? void 0 : _v.header) == null ? void 0 : _w.menus) == null ? void 0 : _x.popup) == null ? void 0 : _y.list) == null ? void 0 : _z.hoverBackgroundColor) ?? "red"};
2674
1932
  }
2675
1933
 
2676
1934
  ${CourierInboxOptionMenuItem.id}:active {
2677
- background-color: ${((_E = (_D = (_C = (_B = (_A = theme2.inbox) == null ? void 0 : _A.header) == null ? void 0 : _B.menus) == null ? void 0 : _C.popup) == null ? void 0 : _D.list) == null ? void 0 : _E.activeBackgroundColor) ?? "red"};
1935
+ background-color: ${((_E = (_D = (_C = (_B = (_A = theme.inbox) == null ? void 0 : _A.header) == null ? void 0 : _B.menus) == null ? void 0 : _C.popup) == null ? void 0 : _D.list) == null ? void 0 : _E.activeBackgroundColor) ?? "red"};
2678
1936
  }
2679
1937
 
2680
1938
  ${CourierInboxOptionMenuItem.id} .menu-item {
@@ -2690,10 +1948,10 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2690
1948
 
2691
1949
  ${CourierInboxOptionMenuItem.id} p {
2692
1950
  margin: 0;
2693
- font-family: ${((_K = (_J = (_I = (_H = (_G = (_F = theme2.inbox) == null ? void 0 : _F.header) == null ? void 0 : _G.menus) == null ? void 0 : _H.popup) == null ? void 0 : _I.list) == null ? void 0 : _J.font) == null ? void 0 : _K.family) ?? "inherit"};
2694
- font-weight: ${((_Q = (_P = (_O = (_N = (_M = (_L = theme2.inbox) == null ? void 0 : _L.header) == null ? void 0 : _M.menus) == null ? void 0 : _N.popup) == null ? void 0 : _O.list) == null ? void 0 : _P.font) == null ? void 0 : _Q.weight) ?? "inherit"};
2695
- font-size: ${((_W = (_V = (_U = (_T = (_S = (_R = theme2.inbox) == null ? void 0 : _R.header) == null ? void 0 : _S.menus) == null ? void 0 : _T.popup) == null ? void 0 : _U.list) == null ? void 0 : _V.font) == null ? void 0 : _W.size) ?? "14px"};
2696
- color: ${((_aa = (_$ = (__ = (_Z = (_Y = (_X = theme2.inbox) == null ? void 0 : _X.header) == null ? void 0 : _Y.menus) == null ? void 0 : _Z.popup) == null ? void 0 : __.list) == null ? void 0 : _$.font) == null ? void 0 : _aa.color) ?? "red"};
1951
+ font-family: ${((_K = (_J = (_I = (_H = (_G = (_F = theme.inbox) == null ? void 0 : _F.header) == null ? void 0 : _G.menus) == null ? void 0 : _H.popup) == null ? void 0 : _I.list) == null ? void 0 : _J.font) == null ? void 0 : _K.family) ?? "inherit"};
1952
+ font-weight: ${((_Q = (_P = (_O = (_N = (_M = (_L = theme.inbox) == null ? void 0 : _L.header) == null ? void 0 : _M.menus) == null ? void 0 : _N.popup) == null ? void 0 : _O.list) == null ? void 0 : _P.font) == null ? void 0 : _Q.weight) ?? "inherit"};
1953
+ font-size: ${((_W = (_V = (_U = (_T = (_S = (_R = theme.inbox) == null ? void 0 : _R.header) == null ? void 0 : _S.menus) == null ? void 0 : _T.popup) == null ? void 0 : _U.list) == null ? void 0 : _V.font) == null ? void 0 : _W.size) ?? "14px"};
1954
+ color: ${((_aa = (_$ = (__ = (_Z = (_Y = (_X = theme.inbox) == null ? void 0 : _X.header) == null ? void 0 : _Y.menus) == null ? void 0 : _Z.popup) == null ? void 0 : __.list) == null ? void 0 : _$.font) == null ? void 0 : _aa.color) ?? "red"};
2697
1955
  white-space: nowrap;
2698
1956
  }
2699
1957
 
@@ -2707,8 +1965,8 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2707
1965
  if (this._style) {
2708
1966
  this._style.textContent = this.getStyles();
2709
1967
  }
2710
- const theme2 = this._themeSubscription.manager.getTheme();
2711
- const menu = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus;
1968
+ const theme = this._themeSubscription.manager.getTheme();
1969
+ const menu = (_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus;
2712
1970
  const isFilter = this._type === "filters";
2713
1971
  const buttonConfig = isFilter ? (_c = menu == null ? void 0 : menu.filters) == null ? void 0 : _c.button : (_d = menu == null ? void 0 : menu.actions) == null ? void 0 : _d.button;
2714
1972
  const defaultIcon = isFilter ? CourierIconSVGs.filter : CourierIconSVGs.overflow;
@@ -2804,7 +2062,7 @@ class CourierUnreadCountBadge extends CourierBaseElement {
2804
2062
  this._themeSubscription.unsubscribe();
2805
2063
  (_a = this._style) == null ? void 0 : _a.remove();
2806
2064
  }
2807
- static getStyles(theme2) {
2065
+ static getStyles(theme) {
2808
2066
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
2809
2067
  return `
2810
2068
  ${CourierUnreadCountBadge.id} {
@@ -2820,11 +2078,11 @@ class CourierUnreadCountBadge extends CourierBaseElement {
2820
2078
  }
2821
2079
 
2822
2080
  ${CourierUnreadCountBadge.id} .header {
2823
- background-color: ${(_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.unreadIndicator) == null ? void 0 : _d.backgroundColor};
2824
- color: ${(_i = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.unreadIndicator) == null ? void 0 : _h.font) == null ? void 0 : _i.color};
2825
- border-radius: ${(_m = (_l = (_k = (_j = theme2.inbox) == null ? void 0 : _j.header) == null ? void 0 : _k.filters) == null ? void 0 : _l.unreadIndicator) == null ? void 0 : _m.borderRadius};
2826
- font-size: ${(_r = (_q = (_p = (_o = (_n = theme2.inbox) == null ? void 0 : _n.header) == null ? void 0 : _o.filters) == null ? void 0 : _p.unreadIndicator) == null ? void 0 : _q.font) == null ? void 0 : _r.size};
2827
- padding: ${(_v = (_u = (_t = (_s = theme2.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.unreadIndicator) == null ? void 0 : _v.padding};
2081
+ background-color: ${(_d = (_c = (_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.unreadIndicator) == null ? void 0 : _d.backgroundColor};
2082
+ color: ${(_i = (_h = (_g = (_f = (_e = theme.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.unreadIndicator) == null ? void 0 : _h.font) == null ? void 0 : _i.color};
2083
+ border-radius: ${(_m = (_l = (_k = (_j = theme.inbox) == null ? void 0 : _j.header) == null ? void 0 : _k.filters) == null ? void 0 : _l.unreadIndicator) == null ? void 0 : _m.borderRadius};
2084
+ font-size: ${(_r = (_q = (_p = (_o = (_n = theme.inbox) == null ? void 0 : _n.header) == null ? void 0 : _o.filters) == null ? void 0 : _p.unreadIndicator) == null ? void 0 : _q.font) == null ? void 0 : _r.size};
2085
+ padding: ${(_v = (_u = (_t = (_s = theme.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.unreadIndicator) == null ? void 0 : _v.padding};
2828
2086
  }
2829
2087
  `;
2830
2088
  }
@@ -2872,7 +2130,7 @@ class CourierInboxHeaderTitle extends CourierBaseElement {
2872
2130
  get theme() {
2873
2131
  return this._themeSubscription.manager.getTheme();
2874
2132
  }
2875
- static getStyles(theme2) {
2133
+ static getStyles(theme) {
2876
2134
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
2877
2135
  return `
2878
2136
  ${CourierInboxHeaderTitle.id} {
@@ -2889,10 +2147,10 @@ class CourierInboxHeaderTitle extends CourierBaseElement {
2889
2147
 
2890
2148
  ${CourierInboxHeaderTitle.id} h2 {
2891
2149
  margin: 0;
2892
- font-family: ${((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.font) == null ? void 0 : _d.family) ?? "inherit"};
2893
- font-size: ${((_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.font) == null ? void 0 : _h.size) ?? "18px"};
2894
- font-weight: ${((_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.filters) == null ? void 0 : _k.font) == null ? void 0 : _l.weight) ?? "500"};
2895
- color: ${((_p = (_o = (_n = (_m = theme2.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.filters) == null ? void 0 : _o.font) == null ? void 0 : _p.color) ?? "red"};
2150
+ font-family: ${((_d = (_c = (_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.font) == null ? void 0 : _d.family) ?? "inherit"};
2151
+ font-size: ${((_h = (_g = (_f = (_e = theme.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.font) == null ? void 0 : _h.size) ?? "18px"};
2152
+ font-weight: ${((_l = (_k = (_j = (_i = theme.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.filters) == null ? void 0 : _k.font) == null ? void 0 : _l.weight) ?? "500"};
2153
+ color: ${((_p = (_o = (_n = (_m = theme.inbox) == null ? void 0 : _m.header) == null ? void 0 : _n.filters) == null ? void 0 : _o.font) == null ? void 0 : _p.color) ?? "red"};
2896
2154
  }
2897
2155
 
2898
2156
  ${CourierInboxHeaderTitle.id} courier-unread-count-badge {
@@ -2936,21 +2194,21 @@ class CourierInboxHeaderTitle extends CourierBaseElement {
2936
2194
  }
2937
2195
  updateFilter() {
2938
2196
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
2939
- const theme2 = this._themeSubscription.manager.getTheme();
2197
+ const theme = this._themeSubscription.manager.getTheme();
2940
2198
  switch (this._feedType) {
2941
2199
  case "inbox":
2942
2200
  if (this._titleElement) {
2943
- this._titleElement.textContent = ((_d = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.inbox) == null ? void 0 : _d.text) ?? "Inbox";
2201
+ this._titleElement.textContent = ((_d = (_c = (_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.filters) == null ? void 0 : _c.inbox) == null ? void 0 : _d.text) ?? "Inbox";
2944
2202
  }
2945
- (_j = this._iconElement) == null ? void 0 : _j.updateSVG(((_i = (_h = (_g = (_f = (_e = theme2.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.inbox) == null ? void 0 : _h.icon) == null ? void 0 : _i.svg) ?? CourierIconSVGs.inbox);
2946
- (_p = this._iconElement) == null ? void 0 : _p.updateColor(((_o = (_n = (_m = (_l = (_k = theme2.inbox) == null ? void 0 : _k.header) == null ? void 0 : _l.filters) == null ? void 0 : _m.inbox) == null ? void 0 : _n.icon) == null ? void 0 : _o.color) ?? "red");
2203
+ (_j = this._iconElement) == null ? void 0 : _j.updateSVG(((_i = (_h = (_g = (_f = (_e = theme.inbox) == null ? void 0 : _e.header) == null ? void 0 : _f.filters) == null ? void 0 : _g.inbox) == null ? void 0 : _h.icon) == null ? void 0 : _i.svg) ?? CourierIconSVGs.inbox);
2204
+ (_p = this._iconElement) == null ? void 0 : _p.updateColor(((_o = (_n = (_m = (_l = (_k = theme.inbox) == null ? void 0 : _k.header) == null ? void 0 : _l.filters) == null ? void 0 : _m.inbox) == null ? void 0 : _n.icon) == null ? void 0 : _o.color) ?? "red");
2947
2205
  break;
2948
2206
  case "archive":
2949
2207
  if (this._titleElement) {
2950
- this._titleElement.textContent = ((_t = (_s = (_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.filters) == null ? void 0 : _s.archive) == null ? void 0 : _t.text) ?? "Archive";
2208
+ this._titleElement.textContent = ((_t = (_s = (_r = (_q = theme.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.filters) == null ? void 0 : _s.archive) == null ? void 0 : _t.text) ?? "Archive";
2951
2209
  }
2952
- (_z = this._iconElement) == null ? void 0 : _z.updateSVG(((_y = (_x = (_w = (_v = (_u = theme2.inbox) == null ? void 0 : _u.header) == null ? void 0 : _v.filters) == null ? void 0 : _w.archive) == null ? void 0 : _x.icon) == null ? void 0 : _y.svg) ?? CourierIconSVGs.archive);
2953
- (_F = this._iconElement) == null ? void 0 : _F.updateColor(((_E = (_D = (_C = (_B = (_A = theme2.inbox) == null ? void 0 : _A.header) == null ? void 0 : _B.filters) == null ? void 0 : _C.archive) == null ? void 0 : _D.icon) == null ? void 0 : _E.color) ?? "red");
2210
+ (_z = this._iconElement) == null ? void 0 : _z.updateSVG(((_y = (_x = (_w = (_v = (_u = theme.inbox) == null ? void 0 : _u.header) == null ? void 0 : _v.filters) == null ? void 0 : _w.archive) == null ? void 0 : _x.icon) == null ? void 0 : _y.svg) ?? CourierIconSVGs.archive);
2211
+ (_F = this._iconElement) == null ? void 0 : _F.updateColor(((_E = (_D = (_C = (_B = (_A = theme.inbox) == null ? void 0 : _A.header) == null ? void 0 : _B.filters) == null ? void 0 : _C.archive) == null ? void 0 : _D.icon) == null ? void 0 : _E.color) ?? "red");
2954
2212
  break;
2955
2213
  }
2956
2214
  }
@@ -2995,8 +2253,8 @@ class CourierInboxHeader extends CourierFactoryElement {
2995
2253
  }
2996
2254
  getFilterOptions() {
2997
2255
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K;
2998
- const theme2 = this._themeSubscription.manager.getTheme();
2999
- const filterMenu = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.filters;
2256
+ const theme = this._themeSubscription.manager.getTheme();
2257
+ const filterMenu = (_c = (_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.filters;
3000
2258
  return [
3001
2259
  {
3002
2260
  id: "inbox",
@@ -3006,8 +2264,8 @@ class CourierInboxHeader extends CourierFactoryElement {
3006
2264
  svg: ((_h = (_g = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _g.icon) == null ? void 0 : _h.svg) ?? CourierIconSVGs.inbox
3007
2265
  },
3008
2266
  selectionIcon: {
3009
- color: ((_n = (_m = (_l = (_k = (_j = (_i = theme2.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.list) == null ? void 0 : _m.selectionIcon) == null ? void 0 : _n.color) ?? "red",
3010
- svg: ((_t = (_s = (_r = (_q = (_p = (_o = theme2.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.menus) == null ? void 0 : _q.popup) == null ? void 0 : _r.list) == null ? void 0 : _s.selectionIcon) == null ? void 0 : _t.svg) ?? CourierIconSVGs.check
2267
+ color: ((_n = (_m = (_l = (_k = (_j = (_i = theme.inbox) == null ? void 0 : _i.header) == null ? void 0 : _j.menus) == null ? void 0 : _k.popup) == null ? void 0 : _l.list) == null ? void 0 : _m.selectionIcon) == null ? void 0 : _n.color) ?? "red",
2268
+ svg: ((_t = (_s = (_r = (_q = (_p = (_o = theme.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.menus) == null ? void 0 : _q.popup) == null ? void 0 : _r.list) == null ? void 0 : _s.selectionIcon) == null ? void 0 : _t.svg) ?? CourierIconSVGs.check
3011
2269
  },
3012
2270
  onClick: (option) => {
3013
2271
  this.handleOptionMenuItemClick("inbox", option);
@@ -3021,8 +2279,8 @@ class CourierInboxHeader extends CourierFactoryElement {
3021
2279
  svg: ((_y = (_x = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _x.icon) == null ? void 0 : _y.svg) ?? CourierIconSVGs.archive
3022
2280
  },
3023
2281
  selectionIcon: {
3024
- color: ((_E = (_D = (_C = (_B = (_A = (_z = theme2.inbox) == null ? void 0 : _z.header) == null ? void 0 : _A.menus) == null ? void 0 : _B.popup) == null ? void 0 : _C.list) == null ? void 0 : _D.selectionIcon) == null ? void 0 : _E.color) ?? "red",
3025
- svg: ((_K = (_J = (_I = (_H = (_G = (_F = theme2.inbox) == null ? void 0 : _F.header) == null ? void 0 : _G.menus) == null ? void 0 : _H.popup) == null ? void 0 : _I.list) == null ? void 0 : _J.selectionIcon) == null ? void 0 : _K.svg) ?? CourierIconSVGs.check
2282
+ color: ((_E = (_D = (_C = (_B = (_A = (_z = theme.inbox) == null ? void 0 : _z.header) == null ? void 0 : _A.menus) == null ? void 0 : _B.popup) == null ? void 0 : _C.list) == null ? void 0 : _D.selectionIcon) == null ? void 0 : _E.color) ?? "red",
2283
+ svg: ((_K = (_J = (_I = (_H = (_G = (_F = theme.inbox) == null ? void 0 : _F.header) == null ? void 0 : _G.menus) == null ? void 0 : _H.popup) == null ? void 0 : _I.list) == null ? void 0 : _J.selectionIcon) == null ? void 0 : _K.svg) ?? CourierIconSVGs.check
3026
2284
  },
3027
2285
  onClick: (option) => {
3028
2286
  this.handleOptionMenuItemClick("archive", option);
@@ -3032,8 +2290,8 @@ class CourierInboxHeader extends CourierFactoryElement {
3032
2290
  }
3033
2291
  getActionOptions() {
3034
2292
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
3035
- const theme2 = this._themeSubscription.manager.getTheme();
3036
- const actionMenu = (_c = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.actions;
2293
+ const theme = this._themeSubscription.manager.getTheme();
2294
+ const actionMenu = (_c = (_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.actions;
3037
2295
  return [
3038
2296
  {
3039
2297
  id: "markAllRead",
@@ -3127,7 +2385,7 @@ class CourierInboxHeader extends CourierFactoryElement {
3127
2385
  headerContent.appendChild(actions);
3128
2386
  return headerContent;
3129
2387
  }
3130
- static getStyles(theme2) {
2388
+ static getStyles(theme) {
3131
2389
  var _a, _b, _c, _d;
3132
2390
  return `
3133
2391
  ${CourierInboxHeader.id} {
@@ -3138,8 +2396,8 @@ class CourierInboxHeader extends CourierFactoryElement {
3138
2396
 
3139
2397
  ${CourierInboxHeader.id} .header-content {
3140
2398
  padding: 10px 10px 10px 16px;
3141
- background-color: ${((_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.backgroundColor) ?? CourierColors.white[500]};
3142
- box-shadow: ${((_d = (_c = theme2.inbox) == null ? void 0 : _c.header) == null ? void 0 : _d.shadow) ?? `0px 1px 0px 0px red`};
2399
+ background-color: ${((_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.backgroundColor) ?? CourierColors.white[500]};
2400
+ box-shadow: ${((_d = (_c = theme.inbox) == null ? void 0 : _c.header) == null ? void 0 : _d.shadow) ?? `0px 1px 0px 0px red`};
3143
2401
  display: flex;
3144
2402
  align-items: center;
3145
2403
  justify-content: space-between;
@@ -3657,120 +2915,120 @@ const defaultDarkTheme = {
3657
2915
  }
3658
2916
  }
3659
2917
  };
3660
- const mergeTheme = (mode, theme2) => {
2918
+ const mergeTheme = (mode, theme) => {
3661
2919
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb, _fb, _gb, _hb, _ib, _jb, _kb, _lb, _mb, _nb, _ob, _pb, _qb, _rb, _sb, _tb, _ub, _vb, _wb, _xb, _yb, _zb, _Ab, _Bb, _Cb, _Db, _Eb, _Fb, _Gb, _Hb, _Ib, _Jb, _Kb, _Lb, _Mb, _Nb, _Ob, _Pb, _Qb, _Rb, _Sb, _Tb, _Ub, _Vb, _Wb, _Xb, _Yb, _Zb, __b, _$b, _ac, _bc, _cc, _dc, _ec, _fc, _gc, _hc, _ic, _jc, _kc, _lc, _mc, _nc, _oc, _pc, _qc, _rc, _sc, _tc, _uc, _vc, _wc, _xc, _yc, _zc, _Ac, _Bc, _Cc, _Dc, _Ec, _Fc, _Gc, _Hc, _Ic, _Jc, _Kc, _Lc, _Mc, _Nc, _Oc, _Pc, _Qc, _Rc, _Sc, _Tc, _Uc, _Vc, _Wc, _Xc, _Yc, _Zc, __c, _$c, _ad, _bd, _cd, _dd, _ed, _fd, _gd, _hd, _id, _jd, _kd, _ld, _md, _nd, _od, _pd, _qd, _rd, _sd, _td, _ud, _vd, _wd, _xd, _yd, _zd, _Ad, _Bd, _Cd, _Dd, _Ed, _Fd, _Gd, _Hd, _Id, _Jd, _Kd, _Ld, _Md, _Nd, _Od, _Pd;
3662
2920
  const defaultTheme = mode === "light" ? defaultLightTheme : defaultDarkTheme;
3663
2921
  return {
3664
2922
  popup: {
3665
2923
  button: {
3666
2924
  ...(_a = defaultTheme.popup) == null ? void 0 : _a.button,
3667
- ...(_b = theme2.popup) == null ? void 0 : _b.button,
2925
+ ...(_b = theme.popup) == null ? void 0 : _b.button,
3668
2926
  icon: {
3669
2927
  ...(_d = (_c = defaultTheme.popup) == null ? void 0 : _c.button) == null ? void 0 : _d.icon,
3670
- ...(_f = (_e = theme2.popup) == null ? void 0 : _e.button) == null ? void 0 : _f.icon
2928
+ ...(_f = (_e = theme.popup) == null ? void 0 : _e.button) == null ? void 0 : _f.icon
3671
2929
  },
3672
2930
  unreadDotIndicator: {
3673
2931
  ...(_h = (_g = defaultTheme.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.unreadDotIndicator,
3674
- ...(_j = (_i = theme2.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.unreadDotIndicator
2932
+ ...(_j = (_i = theme.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.unreadDotIndicator
3675
2933
  }
3676
2934
  },
3677
2935
  window: {
3678
2936
  ...(_k = defaultTheme.popup) == null ? void 0 : _k.window,
3679
- ...(_l = theme2.popup) == null ? void 0 : _l.window
2937
+ ...(_l = theme.popup) == null ? void 0 : _l.window
3680
2938
  }
3681
2939
  },
3682
2940
  inbox: {
3683
2941
  header: {
3684
2942
  ...(_m = defaultTheme.inbox) == null ? void 0 : _m.header,
3685
- ...(_n = theme2.inbox) == null ? void 0 : _n.header,
2943
+ ...(_n = theme.inbox) == null ? void 0 : _n.header,
3686
2944
  filters: {
3687
2945
  ...(_p = (_o = defaultTheme.inbox) == null ? void 0 : _o.header) == null ? void 0 : _p.filters,
3688
- ...(_r = (_q = theme2.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.filters,
2946
+ ...(_r = (_q = theme.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.filters,
3689
2947
  inbox: {
3690
2948
  ...(_u = (_t = (_s = defaultTheme.inbox) == null ? void 0 : _s.header) == null ? void 0 : _t.filters) == null ? void 0 : _u.inbox,
3691
- ...(_x = (_w = (_v = theme2.inbox) == null ? void 0 : _v.header) == null ? void 0 : _w.filters) == null ? void 0 : _x.inbox,
2949
+ ...(_x = (_w = (_v = theme.inbox) == null ? void 0 : _v.header) == null ? void 0 : _w.filters) == null ? void 0 : _x.inbox,
3692
2950
  icon: {
3693
2951
  ...(_B = (_A = (_z = (_y = defaultTheme.inbox) == null ? void 0 : _y.header) == null ? void 0 : _z.filters) == null ? void 0 : _A.inbox) == null ? void 0 : _B.icon,
3694
- ...(_F = (_E = (_D = (_C = theme2.inbox) == null ? void 0 : _C.header) == null ? void 0 : _D.filters) == null ? void 0 : _E.inbox) == null ? void 0 : _F.icon
2952
+ ...(_F = (_E = (_D = (_C = theme.inbox) == null ? void 0 : _C.header) == null ? void 0 : _D.filters) == null ? void 0 : _E.inbox) == null ? void 0 : _F.icon
3695
2953
  }
3696
2954
  },
3697
2955
  archive: {
3698
2956
  ...(_I = (_H = (_G = defaultTheme.inbox) == null ? void 0 : _G.header) == null ? void 0 : _H.filters) == null ? void 0 : _I.archive,
3699
- ...(_L = (_K = (_J = theme2.inbox) == null ? void 0 : _J.header) == null ? void 0 : _K.filters) == null ? void 0 : _L.archive,
2957
+ ...(_L = (_K = (_J = theme.inbox) == null ? void 0 : _J.header) == null ? void 0 : _K.filters) == null ? void 0 : _L.archive,
3700
2958
  icon: {
3701
2959
  ...(_P = (_O = (_N = (_M = defaultTheme.inbox) == null ? void 0 : _M.header) == null ? void 0 : _N.filters) == null ? void 0 : _O.archive) == null ? void 0 : _P.icon,
3702
- ...(_T = (_S = (_R = (_Q = theme2.inbox) == null ? void 0 : _Q.header) == null ? void 0 : _R.filters) == null ? void 0 : _S.archive) == null ? void 0 : _T.icon
2960
+ ...(_T = (_S = (_R = (_Q = theme.inbox) == null ? void 0 : _Q.header) == null ? void 0 : _R.filters) == null ? void 0 : _S.archive) == null ? void 0 : _T.icon
3703
2961
  }
3704
2962
  },
3705
2963
  unreadIndicator: {
3706
2964
  ...(_W = (_V = (_U = defaultTheme.inbox) == null ? void 0 : _U.header) == null ? void 0 : _V.filters) == null ? void 0 : _W.unreadIndicator,
3707
- ...(_Z = (_Y = (_X = theme2.inbox) == null ? void 0 : _X.header) == null ? void 0 : _Y.filters) == null ? void 0 : _Z.unreadIndicator
2965
+ ...(_Z = (_Y = (_X = theme.inbox) == null ? void 0 : _X.header) == null ? void 0 : _Y.filters) == null ? void 0 : _Z.unreadIndicator
3708
2966
  }
3709
2967
  },
3710
2968
  menus: {
3711
2969
  ...(_$ = (__ = defaultTheme.inbox) == null ? void 0 : __.header) == null ? void 0 : _$.menus,
3712
- ...(_ba = (_aa = theme2.inbox) == null ? void 0 : _aa.header) == null ? void 0 : _ba.menus,
2970
+ ...(_ba = (_aa = theme.inbox) == null ? void 0 : _aa.header) == null ? void 0 : _ba.menus,
3713
2971
  popup: {
3714
2972
  ...(_ea = (_da = (_ca = defaultTheme.inbox) == null ? void 0 : _ca.header) == null ? void 0 : _da.menus) == null ? void 0 : _ea.popup,
3715
- ...(_ha = (_ga = (_fa = theme2.inbox) == null ? void 0 : _fa.header) == null ? void 0 : _ga.menus) == null ? void 0 : _ha.popup,
2973
+ ...(_ha = (_ga = (_fa = theme.inbox) == null ? void 0 : _fa.header) == null ? void 0 : _ga.menus) == null ? void 0 : _ha.popup,
3716
2974
  list: {
3717
2975
  ...(_la = (_ka = (_ja = (_ia = defaultTheme.inbox) == null ? void 0 : _ia.header) == null ? void 0 : _ja.menus) == null ? void 0 : _ka.popup) == null ? void 0 : _la.list,
3718
- ...(_pa = (_oa = (_na = (_ma = theme2.inbox) == null ? void 0 : _ma.header) == null ? void 0 : _na.menus) == null ? void 0 : _oa.popup) == null ? void 0 : _pa.list,
2976
+ ...(_pa = (_oa = (_na = (_ma = theme.inbox) == null ? void 0 : _ma.header) == null ? void 0 : _na.menus) == null ? void 0 : _oa.popup) == null ? void 0 : _pa.list,
3719
2977
  font: {
3720
2978
  ...(_ua = (_ta = (_sa = (_ra = (_qa = defaultTheme.inbox) == null ? void 0 : _qa.header) == null ? void 0 : _ra.menus) == null ? void 0 : _sa.popup) == null ? void 0 : _ta.list) == null ? void 0 : _ua.font,
3721
- ...(_za = (_ya = (_xa = (_wa = (_va = theme2.inbox) == null ? void 0 : _va.header) == null ? void 0 : _wa.menus) == null ? void 0 : _xa.popup) == null ? void 0 : _ya.list) == null ? void 0 : _za.font
2979
+ ...(_za = (_ya = (_xa = (_wa = (_va = theme.inbox) == null ? void 0 : _va.header) == null ? void 0 : _wa.menus) == null ? void 0 : _xa.popup) == null ? void 0 : _ya.list) == null ? void 0 : _za.font
3722
2980
  },
3723
2981
  selectionIcon: {
3724
2982
  ...(_Ea = (_Da = (_Ca = (_Ba = (_Aa = defaultTheme.inbox) == null ? void 0 : _Aa.header) == null ? void 0 : _Ba.menus) == null ? void 0 : _Ca.popup) == null ? void 0 : _Da.list) == null ? void 0 : _Ea.selectionIcon,
3725
- ...(_Ja = (_Ia = (_Ha = (_Ga = (_Fa = theme2.inbox) == null ? void 0 : _Fa.header) == null ? void 0 : _Ga.menus) == null ? void 0 : _Ha.popup) == null ? void 0 : _Ia.list) == null ? void 0 : _Ja.selectionIcon
2983
+ ...(_Ja = (_Ia = (_Ha = (_Ga = (_Fa = theme.inbox) == null ? void 0 : _Fa.header) == null ? void 0 : _Ga.menus) == null ? void 0 : _Ha.popup) == null ? void 0 : _Ia.list) == null ? void 0 : _Ja.selectionIcon
3726
2984
  }
3727
2985
  }
3728
2986
  },
3729
2987
  filters: {
3730
2988
  ...(_Ma = (_La = (_Ka = defaultTheme.inbox) == null ? void 0 : _Ka.header) == null ? void 0 : _La.menus) == null ? void 0 : _Ma.filters,
3731
- ...(_Pa = (_Oa = (_Na = theme2.inbox) == null ? void 0 : _Na.header) == null ? void 0 : _Oa.menus) == null ? void 0 : _Pa.filters,
2989
+ ...(_Pa = (_Oa = (_Na = theme.inbox) == null ? void 0 : _Na.header) == null ? void 0 : _Oa.menus) == null ? void 0 : _Pa.filters,
3732
2990
  inbox: {
3733
2991
  ...(_Ta = (_Sa = (_Ra = (_Qa = defaultTheme.inbox) == null ? void 0 : _Qa.header) == null ? void 0 : _Ra.menus) == null ? void 0 : _Sa.filters) == null ? void 0 : _Ta.inbox,
3734
- ...(_Xa = (_Wa = (_Va = (_Ua = theme2.inbox) == null ? void 0 : _Ua.header) == null ? void 0 : _Va.menus) == null ? void 0 : _Wa.filters) == null ? void 0 : _Xa.inbox,
2992
+ ...(_Xa = (_Wa = (_Va = (_Ua = theme.inbox) == null ? void 0 : _Ua.header) == null ? void 0 : _Va.menus) == null ? void 0 : _Wa.filters) == null ? void 0 : _Xa.inbox,
3735
2993
  icon: {
3736
2994
  ...(_ab = (_$a = (__a = (_Za = (_Ya = defaultTheme.inbox) == null ? void 0 : _Ya.header) == null ? void 0 : _Za.menus) == null ? void 0 : __a.filters) == null ? void 0 : _$a.inbox) == null ? void 0 : _ab.icon,
3737
- ...(_fb = (_eb = (_db = (_cb = (_bb = theme2.inbox) == null ? void 0 : _bb.header) == null ? void 0 : _cb.menus) == null ? void 0 : _db.filters) == null ? void 0 : _eb.inbox) == null ? void 0 : _fb.icon
2995
+ ...(_fb = (_eb = (_db = (_cb = (_bb = theme.inbox) == null ? void 0 : _bb.header) == null ? void 0 : _cb.menus) == null ? void 0 : _db.filters) == null ? void 0 : _eb.inbox) == null ? void 0 : _fb.icon
3738
2996
  }
3739
2997
  },
3740
2998
  archive: {
3741
2999
  ...(_jb = (_ib = (_hb = (_gb = defaultTheme.inbox) == null ? void 0 : _gb.header) == null ? void 0 : _hb.menus) == null ? void 0 : _ib.filters) == null ? void 0 : _jb.archive,
3742
- ...(_nb = (_mb = (_lb = (_kb = theme2.inbox) == null ? void 0 : _kb.header) == null ? void 0 : _lb.menus) == null ? void 0 : _mb.filters) == null ? void 0 : _nb.archive,
3000
+ ...(_nb = (_mb = (_lb = (_kb = theme.inbox) == null ? void 0 : _kb.header) == null ? void 0 : _lb.menus) == null ? void 0 : _mb.filters) == null ? void 0 : _nb.archive,
3743
3001
  icon: {
3744
3002
  ...(_sb = (_rb = (_qb = (_pb = (_ob = defaultTheme.inbox) == null ? void 0 : _ob.header) == null ? void 0 : _pb.menus) == null ? void 0 : _qb.filters) == null ? void 0 : _rb.archive) == null ? void 0 : _sb.icon,
3745
- ...(_xb = (_wb = (_vb = (_ub = (_tb = theme2.inbox) == null ? void 0 : _tb.header) == null ? void 0 : _ub.menus) == null ? void 0 : _vb.filters) == null ? void 0 : _wb.archive) == null ? void 0 : _xb.icon
3003
+ ...(_xb = (_wb = (_vb = (_ub = (_tb = theme.inbox) == null ? void 0 : _tb.header) == null ? void 0 : _ub.menus) == null ? void 0 : _vb.filters) == null ? void 0 : _wb.archive) == null ? void 0 : _xb.icon
3746
3004
  }
3747
3005
  }
3748
3006
  },
3749
3007
  actions: {
3750
3008
  ...(_Ab = (_zb = (_yb = defaultTheme.inbox) == null ? void 0 : _yb.header) == null ? void 0 : _zb.menus) == null ? void 0 : _Ab.actions,
3751
- ...(_Db = (_Cb = (_Bb = theme2.inbox) == null ? void 0 : _Bb.header) == null ? void 0 : _Cb.menus) == null ? void 0 : _Db.actions,
3009
+ ...(_Db = (_Cb = (_Bb = theme.inbox) == null ? void 0 : _Bb.header) == null ? void 0 : _Cb.menus) == null ? void 0 : _Db.actions,
3752
3010
  markAllRead: {
3753
3011
  ...(_Hb = (_Gb = (_Fb = (_Eb = defaultTheme.inbox) == null ? void 0 : _Eb.header) == null ? void 0 : _Fb.menus) == null ? void 0 : _Gb.actions) == null ? void 0 : _Hb.markAllRead,
3754
- ...(_Lb = (_Kb = (_Jb = (_Ib = theme2.inbox) == null ? void 0 : _Ib.header) == null ? void 0 : _Jb.menus) == null ? void 0 : _Kb.actions) == null ? void 0 : _Lb.markAllRead,
3012
+ ...(_Lb = (_Kb = (_Jb = (_Ib = theme.inbox) == null ? void 0 : _Ib.header) == null ? void 0 : _Jb.menus) == null ? void 0 : _Kb.actions) == null ? void 0 : _Lb.markAllRead,
3755
3013
  icon: {
3756
3014
  ...(_Qb = (_Pb = (_Ob = (_Nb = (_Mb = defaultTheme.inbox) == null ? void 0 : _Mb.header) == null ? void 0 : _Nb.menus) == null ? void 0 : _Ob.actions) == null ? void 0 : _Pb.markAllRead) == null ? void 0 : _Qb.icon,
3757
- ...(_Vb = (_Ub = (_Tb = (_Sb = (_Rb = theme2.inbox) == null ? void 0 : _Rb.header) == null ? void 0 : _Sb.menus) == null ? void 0 : _Tb.actions) == null ? void 0 : _Ub.markAllRead) == null ? void 0 : _Vb.icon
3015
+ ...(_Vb = (_Ub = (_Tb = (_Sb = (_Rb = theme.inbox) == null ? void 0 : _Rb.header) == null ? void 0 : _Sb.menus) == null ? void 0 : _Tb.actions) == null ? void 0 : _Ub.markAllRead) == null ? void 0 : _Vb.icon
3758
3016
  }
3759
3017
  },
3760
3018
  archiveAll: {
3761
3019
  ...(_Zb = (_Yb = (_Xb = (_Wb = defaultTheme.inbox) == null ? void 0 : _Wb.header) == null ? void 0 : _Xb.menus) == null ? void 0 : _Yb.actions) == null ? void 0 : _Zb.archiveAll,
3762
- ...(_bc = (_ac = (_$b = (__b = theme2.inbox) == null ? void 0 : __b.header) == null ? void 0 : _$b.menus) == null ? void 0 : _ac.actions) == null ? void 0 : _bc.archiveAll,
3020
+ ...(_bc = (_ac = (_$b = (__b = theme.inbox) == null ? void 0 : __b.header) == null ? void 0 : _$b.menus) == null ? void 0 : _ac.actions) == null ? void 0 : _bc.archiveAll,
3763
3021
  icon: {
3764
3022
  ...(_gc = (_fc = (_ec = (_dc = (_cc = defaultTheme.inbox) == null ? void 0 : _cc.header) == null ? void 0 : _dc.menus) == null ? void 0 : _ec.actions) == null ? void 0 : _fc.archiveAll) == null ? void 0 : _gc.icon,
3765
- ...(_lc = (_kc = (_jc = (_ic = (_hc = theme2.inbox) == null ? void 0 : _hc.header) == null ? void 0 : _ic.menus) == null ? void 0 : _jc.actions) == null ? void 0 : _kc.archiveAll) == null ? void 0 : _lc.icon
3023
+ ...(_lc = (_kc = (_jc = (_ic = (_hc = theme.inbox) == null ? void 0 : _hc.header) == null ? void 0 : _ic.menus) == null ? void 0 : _jc.actions) == null ? void 0 : _kc.archiveAll) == null ? void 0 : _lc.icon
3766
3024
  }
3767
3025
  },
3768
3026
  archiveRead: {
3769
3027
  ...(_pc = (_oc = (_nc = (_mc = defaultTheme.inbox) == null ? void 0 : _mc.header) == null ? void 0 : _nc.menus) == null ? void 0 : _oc.actions) == null ? void 0 : _pc.archiveRead,
3770
- ...(_tc = (_sc = (_rc = (_qc = theme2.inbox) == null ? void 0 : _qc.header) == null ? void 0 : _rc.menus) == null ? void 0 : _sc.actions) == null ? void 0 : _tc.archiveRead,
3028
+ ...(_tc = (_sc = (_rc = (_qc = theme.inbox) == null ? void 0 : _qc.header) == null ? void 0 : _rc.menus) == null ? void 0 : _sc.actions) == null ? void 0 : _tc.archiveRead,
3771
3029
  icon: {
3772
3030
  ...(_yc = (_xc = (_wc = (_vc = (_uc = defaultTheme.inbox) == null ? void 0 : _uc.header) == null ? void 0 : _vc.menus) == null ? void 0 : _wc.actions) == null ? void 0 : _xc.archiveRead) == null ? void 0 : _yc.icon,
3773
- ...(_Dc = (_Cc = (_Bc = (_Ac = (_zc = theme2.inbox) == null ? void 0 : _zc.header) == null ? void 0 : _Ac.menus) == null ? void 0 : _Bc.actions) == null ? void 0 : _Cc.archiveRead) == null ? void 0 : _Dc.icon
3031
+ ...(_Dc = (_Cc = (_Bc = (_Ac = (_zc = theme.inbox) == null ? void 0 : _zc.header) == null ? void 0 : _Ac.menus) == null ? void 0 : _Bc.actions) == null ? void 0 : _Cc.archiveRead) == null ? void 0 : _Dc.icon
3774
3032
  }
3775
3033
  }
3776
3034
  }
@@ -3778,31 +3036,31 @@ const mergeTheme = (mode, theme2) => {
3778
3036
  },
3779
3037
  list: {
3780
3038
  ...(_Ec = defaultTheme.inbox) == null ? void 0 : _Ec.list,
3781
- ...(_Fc = theme2.inbox) == null ? void 0 : _Fc.list,
3039
+ ...(_Fc = theme.inbox) == null ? void 0 : _Fc.list,
3782
3040
  item: {
3783
3041
  ...(_Hc = (_Gc = defaultTheme.inbox) == null ? void 0 : _Gc.list) == null ? void 0 : _Hc.item,
3784
- ...(_Jc = (_Ic = theme2.inbox) == null ? void 0 : _Ic.list) == null ? void 0 : _Jc.item,
3042
+ ...(_Jc = (_Ic = theme.inbox) == null ? void 0 : _Ic.list) == null ? void 0 : _Jc.item,
3785
3043
  menu: {
3786
3044
  ...(_Mc = (_Lc = (_Kc = defaultTheme.inbox) == null ? void 0 : _Kc.list) == null ? void 0 : _Lc.item) == null ? void 0 : _Mc.menu,
3787
- ...(_Pc = (_Oc = (_Nc = theme2.inbox) == null ? void 0 : _Nc.list) == null ? void 0 : _Oc.item) == null ? void 0 : _Pc.menu,
3045
+ ...(_Pc = (_Oc = (_Nc = theme.inbox) == null ? void 0 : _Nc.list) == null ? void 0 : _Oc.item) == null ? void 0 : _Pc.menu,
3788
3046
  item: {
3789
3047
  ...(_Tc = (_Sc = (_Rc = (_Qc = defaultTheme.inbox) == null ? void 0 : _Qc.list) == null ? void 0 : _Rc.item) == null ? void 0 : _Sc.menu) == null ? void 0 : _Tc.item,
3790
- ...(_Xc = (_Wc = (_Vc = (_Uc = theme2.inbox) == null ? void 0 : _Uc.list) == null ? void 0 : _Vc.item) == null ? void 0 : _Wc.menu) == null ? void 0 : _Xc.item,
3048
+ ...(_Xc = (_Wc = (_Vc = (_Uc = theme.inbox) == null ? void 0 : _Uc.list) == null ? void 0 : _Vc.item) == null ? void 0 : _Wc.menu) == null ? void 0 : _Xc.item,
3791
3049
  read: {
3792
3050
  ...(_ad = (_$c = (__c = (_Zc = (_Yc = defaultTheme.inbox) == null ? void 0 : _Yc.list) == null ? void 0 : _Zc.item) == null ? void 0 : __c.menu) == null ? void 0 : _$c.item) == null ? void 0 : _ad.read,
3793
- ...(_fd = (_ed = (_dd = (_cd = (_bd = theme2.inbox) == null ? void 0 : _bd.list) == null ? void 0 : _cd.item) == null ? void 0 : _dd.menu) == null ? void 0 : _ed.item) == null ? void 0 : _fd.read
3051
+ ...(_fd = (_ed = (_dd = (_cd = (_bd = theme.inbox) == null ? void 0 : _bd.list) == null ? void 0 : _cd.item) == null ? void 0 : _dd.menu) == null ? void 0 : _ed.item) == null ? void 0 : _fd.read
3794
3052
  },
3795
3053
  unread: {
3796
3054
  ...(_kd = (_jd = (_id = (_hd = (_gd = defaultTheme.inbox) == null ? void 0 : _gd.list) == null ? void 0 : _hd.item) == null ? void 0 : _id.menu) == null ? void 0 : _jd.item) == null ? void 0 : _kd.unread,
3797
- ...(_pd = (_od = (_nd = (_md = (_ld = theme2.inbox) == null ? void 0 : _ld.list) == null ? void 0 : _md.item) == null ? void 0 : _nd.menu) == null ? void 0 : _od.item) == null ? void 0 : _pd.unread
3055
+ ...(_pd = (_od = (_nd = (_md = (_ld = theme.inbox) == null ? void 0 : _ld.list) == null ? void 0 : _md.item) == null ? void 0 : _nd.menu) == null ? void 0 : _od.item) == null ? void 0 : _pd.unread
3798
3056
  },
3799
3057
  archive: {
3800
3058
  ...(_ud = (_td = (_sd = (_rd = (_qd = defaultTheme.inbox) == null ? void 0 : _qd.list) == null ? void 0 : _rd.item) == null ? void 0 : _sd.menu) == null ? void 0 : _td.item) == null ? void 0 : _ud.archive,
3801
- ...(_zd = (_yd = (_xd = (_wd = (_vd = theme2.inbox) == null ? void 0 : _vd.list) == null ? void 0 : _wd.item) == null ? void 0 : _xd.menu) == null ? void 0 : _yd.item) == null ? void 0 : _zd.archive
3059
+ ...(_zd = (_yd = (_xd = (_wd = (_vd = theme.inbox) == null ? void 0 : _vd.list) == null ? void 0 : _wd.item) == null ? void 0 : _xd.menu) == null ? void 0 : _yd.item) == null ? void 0 : _zd.archive
3802
3060
  },
3803
3061
  unarchive: {
3804
3062
  ...(_Ed = (_Dd = (_Cd = (_Bd = (_Ad = defaultTheme.inbox) == null ? void 0 : _Ad.list) == null ? void 0 : _Bd.item) == null ? void 0 : _Cd.menu) == null ? void 0 : _Dd.item) == null ? void 0 : _Ed.unarchive,
3805
- ...(_Jd = (_Id = (_Hd = (_Gd = (_Fd = theme2.inbox) == null ? void 0 : _Fd.list) == null ? void 0 : _Gd.item) == null ? void 0 : _Hd.menu) == null ? void 0 : _Id.item) == null ? void 0 : _Jd.unarchive
3063
+ ...(_Jd = (_Id = (_Hd = (_Gd = (_Fd = theme.inbox) == null ? void 0 : _Fd.list) == null ? void 0 : _Gd.item) == null ? void 0 : _Hd.menu) == null ? void 0 : _Id.item) == null ? void 0 : _Jd.unarchive
3806
3064
  }
3807
3065
  }
3808
3066
  }
@@ -3810,129 +3068,54 @@ const mergeTheme = (mode, theme2) => {
3810
3068
  },
3811
3069
  loading: {
3812
3070
  ...(_Kd = defaultTheme.inbox) == null ? void 0 : _Kd.loading,
3813
- ...(_Ld = theme2.inbox) == null ? void 0 : _Ld.loading
3071
+ ...(_Ld = theme.inbox) == null ? void 0 : _Ld.loading
3814
3072
  },
3815
3073
  empty: {
3816
3074
  ...(_Md = defaultTheme.inbox) == null ? void 0 : _Md.empty,
3817
- ...(_Nd = theme2.inbox) == null ? void 0 : _Nd.empty
3075
+ ...(_Nd = theme.inbox) == null ? void 0 : _Nd.empty
3818
3076
  },
3819
3077
  error: {
3820
3078
  ...(_Od = defaultTheme.inbox) == null ? void 0 : _Od.error,
3821
- ...(_Pd = theme2.inbox) == null ? void 0 : _Pd.error
3079
+ ...(_Pd = theme.inbox) == null ? void 0 : _Pd.error
3822
3080
  }
3823
3081
  }
3824
3082
  };
3825
3083
  };
3826
- class CourierInboxThemeManager {
3084
+ class CourierInboxThemeManager extends CourierThemeManager {
3827
3085
  constructor(initialTheme) {
3828
- // Event IDs
3086
+ super(initialTheme);
3087
+ // Event ID for inbox theme changes
3829
3088
  __publicField(this, "THEME_CHANGE_EVENT", "courier_inbox_theme_change");
3830
- // State
3831
- __publicField(this, "_theme");
3832
- __publicField(this, "_lightTheme", defaultLightTheme);
3833
- __publicField(this, "_darkTheme", defaultDarkTheme);
3834
- __publicField(this, "_target");
3835
- __publicField(this, "_subscriptions", []);
3836
- // System theme
3837
- __publicField(this, "_userMode");
3838
- __publicField(this, "_systemMode");
3839
- __publicField(this, "_systemThemeCleanup");
3840
- this._theme = initialTheme;
3841
- this._target = new EventTarget();
3842
- this._userMode = "system";
3843
- this._systemMode = getSystemThemeMode();
3844
- this.setLightTheme(defaultLightTheme);
3845
- this.setDarkTheme(defaultDarkTheme);
3846
- this._systemThemeCleanup = addSystemThemeModeListener((mode) => {
3847
- this._systemMode = mode;
3848
- this.updateTheme();
3849
- });
3850
- }
3851
- setLightTheme(theme2) {
3852
- this._lightTheme = theme2;
3853
- if (this._systemMode === "light") {
3854
- this.updateTheme();
3855
- }
3856
- }
3857
- setDarkTheme(theme2) {
3858
- this._darkTheme = theme2;
3859
- if (this._systemMode === "dark") {
3860
- this.updateTheme();
3861
- }
3862
- }
3863
- /**
3864
- * Get the current system theme
3865
- */
3866
- get currentSystemTheme() {
3867
- return this._systemMode;
3868
3089
  }
3869
3090
  /**
3870
- * Get the current theme
3091
+ * Get the default light theme for inbox
3871
3092
  */
3872
- getTheme() {
3873
- return this._theme;
3093
+ getDefaultLightTheme() {
3094
+ return defaultLightTheme;
3874
3095
  }
3875
3096
  /**
3876
- * Update the theme
3097
+ * Get the default dark theme for inbox
3877
3098
  */
3878
- updateTheme() {
3879
- const mode = this._userMode === "system" ? this._systemMode : this._userMode;
3880
- const theme2 = mode === "light" ? this._lightTheme : this._darkTheme;
3881
- const mergedTheme = mergeTheme(mode, theme2);
3882
- this.setTheme(mergedTheme);
3099
+ getDefaultDarkTheme() {
3100
+ return defaultDarkTheme;
3883
3101
  }
3884
3102
  /**
3885
- * Set the theme and notify all listeners
3103
+ * Merge the inbox theme with defaults
3886
3104
  */
3887
- setTheme(theme2) {
3888
- if (theme2 === this._theme) return;
3889
- this._theme = theme2;
3890
- this._target.dispatchEvent(new CustomEvent(this.THEME_CHANGE_EVENT, {
3891
- detail: { theme: theme2 }
3892
- }));
3893
- }
3894
- /**
3895
- * Set the mode and notify all listeners
3896
- */
3897
- setMode(mode) {
3898
- this._userMode = mode;
3899
- this.updateTheme();
3900
- }
3901
- get mode() {
3902
- return this._userMode;
3105
+ mergeTheme(mode, theme) {
3106
+ return mergeTheme(mode, theme);
3903
3107
  }
3904
3108
  /**
3905
- * Subscribe to theme changes
3906
- * @param {Function} callback - Function to run when the theme changes
3907
- * @returns {CourierInboxThemeSubscription} - Object with remove method to stop listening
3109
+ * Subscribe to inbox theme changes
3110
+ * @param callback - Function to run when the theme changes
3111
+ * @returns Object with unsubscribe method to stop listening
3908
3112
  */
3909
3113
  subscribe(callback) {
3910
- const controller = new AbortController();
3911
- this._target.addEventListener(this.THEME_CHANGE_EVENT, (e) => {
3912
- callback(e.detail.theme);
3913
- }, { signal: controller.signal });
3914
- const subscription = {
3915
- manager: this,
3916
- unsubscribe: () => {
3917
- controller.abort();
3918
- const index = this._subscriptions.indexOf(subscription);
3919
- if (index > -1) {
3920
- this._subscriptions.splice(index, 1);
3921
- }
3922
- }
3114
+ const baseSubscription = super.subscribe(callback);
3115
+ return {
3116
+ ...baseSubscription,
3117
+ manager: this
3923
3118
  };
3924
- this._subscriptions.push(subscription);
3925
- return subscription;
3926
- }
3927
- /**
3928
- * Clean up event listeners
3929
- */
3930
- cleanup() {
3931
- if (this._systemThemeCleanup) {
3932
- this._systemThemeCleanup();
3933
- }
3934
- this._subscriptions.forEach((subscription) => subscription.unsubscribe());
3935
- this._subscriptions = [];
3936
3119
  }
3937
3120
  }
3938
3121
  class CourierInbox extends CourierBaseElement {
@@ -3980,15 +3163,15 @@ class CourierInbox extends CourierBaseElement {
3980
3163
  * Set the light theme for the inbox.
3981
3164
  * @param theme The light theme object to set.
3982
3165
  */
3983
- setLightTheme(theme2) {
3984
- this._themeManager.setLightTheme(theme2);
3166
+ setLightTheme(theme) {
3167
+ this._themeManager.setLightTheme(theme);
3985
3168
  }
3986
3169
  /**
3987
3170
  * Set the dark theme for the inbox.
3988
3171
  * @param theme The dark theme object to set.
3989
3172
  */
3990
- setDarkTheme(theme2) {
3991
- this._themeManager.setDarkTheme(theme2);
3173
+ setDarkTheme(theme) {
3174
+ this._themeManager.setDarkTheme(theme);
3992
3175
  }
3993
3176
  /**
3994
3177
  * Set the theme mode (light/dark/system).
@@ -4108,8 +3291,10 @@ class CourierInbox extends CourierBaseElement {
4108
3291
  this._themeManager.subscribe((_) => {
4109
3292
  this.refreshTheme();
4110
3293
  });
4111
- this._authListener = Courier.shared.addAuthenticationListener((_) => {
4112
- this.refresh();
3294
+ this._authListener = Courier.shared.addAuthenticationListener(async ({ userId }) => {
3295
+ if (userId) {
3296
+ await this.refresh();
3297
+ }
4113
3298
  });
4114
3299
  if (!((_a = Courier.shared.client) == null ? void 0 : _a.options.userId)) {
4115
3300
  (_b = Courier.shared.client) == null ? void 0 : _b.options.logger.error("No user signed in. Please call Courier.shared.signIn(...) to load the inbox.");
@@ -4378,7 +3563,7 @@ class CourierInboxMenuButton extends CourierFactoryElement {
4378
3563
  this.refreshTheme();
4379
3564
  return this._container;
4380
3565
  }
4381
- static getStyles(theme2) {
3566
+ static getStyles(theme) {
4382
3567
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
4383
3568
  return `
4384
3569
  ${CourierInboxMenuButton.id} .menu-button-container {
@@ -4391,10 +3576,10 @@ class CourierInboxMenuButton extends CourierFactoryElement {
4391
3576
  top: 2px;
4392
3577
  right: 2px;
4393
3578
  pointer-events: none;
4394
- width: ${((_c = (_b = (_a = theme2.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.unreadDotIndicator) == null ? void 0 : _c.height) ?? "8px"};
4395
- height: ${((_f = (_e = (_d = theme2.popup) == null ? void 0 : _d.button) == null ? void 0 : _e.unreadDotIndicator) == null ? void 0 : _f.width) ?? "8px"};
4396
- background: ${((_i = (_h = (_g = theme2.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.unreadDotIndicator) == null ? void 0 : _i.backgroundColor) ?? "red"};
4397
- border-radius: ${((_l = (_k = (_j = theme2.popup) == null ? void 0 : _j.button) == null ? void 0 : _k.unreadDotIndicator) == null ? void 0 : _l.borderRadius) ?? "50%"};
3579
+ width: ${((_c = (_b = (_a = theme.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.unreadDotIndicator) == null ? void 0 : _c.height) ?? "8px"};
3580
+ height: ${((_f = (_e = (_d = theme.popup) == null ? void 0 : _d.button) == null ? void 0 : _e.unreadDotIndicator) == null ? void 0 : _f.width) ?? "8px"};
3581
+ background: ${((_i = (_h = (_g = theme.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.unreadDotIndicator) == null ? void 0 : _i.backgroundColor) ?? "red"};
3582
+ border-radius: ${((_l = (_k = (_j = theme.popup) == null ? void 0 : _j.button) == null ? void 0 : _k.unreadDotIndicator) == null ? void 0 : _l.borderRadius) ?? "50%"};
4398
3583
  display: none;
4399
3584
  z-index: 1;
4400
3585
  }
@@ -4471,15 +3656,15 @@ class CourierInboxPopupMenu extends CourierBaseElement {
4471
3656
  * Set the light theme for the popup menu.
4472
3657
  * @param theme The light theme object to set.
4473
3658
  */
4474
- setLightTheme(theme2) {
4475
- this._themeManager.setLightTheme(theme2);
3659
+ setLightTheme(theme) {
3660
+ this._themeManager.setLightTheme(theme);
4476
3661
  }
4477
3662
  /**
4478
3663
  * Set the dark theme for the popup menu.
4479
3664
  * @param theme The dark theme object to set.
4480
3665
  */
4481
- setDarkTheme(theme2) {
4482
- this._themeManager.setDarkTheme(theme2);
3666
+ setDarkTheme(theme) {
3667
+ this._themeManager.setDarkTheme(theme);
4483
3668
  }
4484
3669
  /**
4485
3670
  * Set the theme mode (light/dark/system).
@@ -4520,7 +3705,7 @@ class CourierInboxPopupMenu extends CourierBaseElement {
4520
3705
  this._style.textContent = CourierInboxPopupMenu.getStyles(this.theme, this._width, this._height);
4521
3706
  }
4522
3707
  }
4523
- static getStyles(theme2, width, height) {
3708
+ static getStyles(theme, width, height) {
4524
3709
  var _a, _b, _c, _d, _e, _f, _g, _h;
4525
3710
  return `
4526
3711
  ${CourierInboxPopupMenu.id} {
@@ -4536,10 +3721,10 @@ class CourierInboxPopupMenu extends CourierBaseElement {
4536
3721
  ${CourierInboxPopupMenu.id} .popup {
4537
3722
  display: none;
4538
3723
  position: absolute;
4539
- background: ${((_b = (_a = theme2.popup) == null ? void 0 : _a.window) == null ? void 0 : _b.backgroundColor) ?? "red"};
4540
- border-radius: ${((_d = (_c = theme2.popup) == null ? void 0 : _c.window) == null ? void 0 : _d.borderRadius) ?? "8px"};
4541
- border: ${((_f = (_e = theme2.popup) == null ? void 0 : _e.window) == null ? void 0 : _f.border) ?? `1px solid red`};
4542
- box-shadow: ${((_h = (_g = theme2.popup) == null ? void 0 : _g.window) == null ? void 0 : _h.shadow) ?? `0px 8px 16px -4px red`};
3724
+ background: ${((_b = (_a = theme.popup) == null ? void 0 : _a.window) == null ? void 0 : _b.backgroundColor) ?? "red"};
3725
+ border-radius: ${((_d = (_c = theme.popup) == null ? void 0 : _c.window) == null ? void 0 : _d.borderRadius) ?? "8px"};
3726
+ border: ${((_f = (_e = theme.popup) == null ? void 0 : _e.window) == null ? void 0 : _f.border) ?? `1px solid red`};
3727
+ box-shadow: ${((_h = (_g = theme.popup) == null ? void 0 : _g.window) == null ? void 0 : _h.shadow) ?? `0px 8px 16px -4px red`};
4543
3728
  z-index: 1000;
4544
3729
  width: ${width};
4545
3730
  height: ${height};
@@ -4876,7 +4061,7 @@ class CourierInboxDatastoreEvents {
4876
4061
  }
4877
4062
  }
4878
4063
  Courier.shared.courierUserAgentName = "courier-ui-inbox";
4879
- Courier.shared.courierUserAgentVersion = "1.1.0";
4064
+ Courier.shared.courierUserAgentVersion = "1.2.1";
4880
4065
  export {
4881
4066
  Courier2 as Courier,
4882
4067
  CourierInbox,