@trycourier/courier-ui-inbox 1.1.0 → 1.2.0

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 (7) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +148 -969
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/types/courier-inbox-theme-manager.d.ts +17 -37
  6. package/dist/types/courier-inbox-theme.d.ts +5 -27
  7. package/package.json +5 -3
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;
@@ -1008,10 +262,6 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
1008
262
  (_c = (_b = Courier.shared.client) == null ? void 0 : _b.options.logger) == null ? void 0 : _c.info("CourierInbox socket not available");
1009
263
  return;
1010
264
  }
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;
1014
- }
1015
265
  socket.addMessageEventListener((event) => {
1016
266
  if (event.event === InboxMessageEvent.NewMessage) {
1017
267
  const message2 = event.data;
@@ -1063,6 +313,10 @@ const _CourierInboxDatastore = class _CourierInboxDatastore {
1063
313
  break;
1064
314
  }
1065
315
  });
316
+ if (socket.isConnecting || socket.isOpen) {
317
+ (_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}]`);
318
+ return;
319
+ }
1066
320
  await socket.connect();
1067
321
  (_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
322
  } catch (error) {
@@ -1669,9 +923,9 @@ class CourierInboxListItem extends CourierBaseElement {
1669
923
  var _a;
1670
924
  (_a = this._observer) == null ? void 0 : _a.disconnect();
1671
925
  }
1672
- static getStyles(theme2) {
926
+ static getStyles(theme) {
1673
927
  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;
928
+ const list = (_a = theme.inbox) == null ? void 0 : _a.list;
1675
929
  return `
1676
930
  ${CourierInboxListItem.id} {
1677
931
  display: flex;
@@ -1978,11 +1232,11 @@ class CourierInboxListItem extends CourierBaseElement {
1978
1232
  }
1979
1233
  registerElement(CourierInboxListItem);
1980
1234
  class CourierInboxSkeletonListItem extends CourierBaseElement {
1981
- constructor(theme2) {
1235
+ constructor(theme) {
1982
1236
  super();
1983
1237
  __publicField(this, "_theme");
1984
1238
  __publicField(this, "_style");
1985
- this._theme = theme2;
1239
+ this._theme = theme;
1986
1240
  }
1987
1241
  static get id() {
1988
1242
  return "courier-inbox-skeleton-list-item";
@@ -2030,11 +1284,11 @@ class CourierInboxSkeletonListItem extends CourierBaseElement {
2030
1284
  }
2031
1285
  registerElement(CourierInboxSkeletonListItem);
2032
1286
  class CourierSkeletonAnimatedRow extends CourierBaseElement {
2033
- constructor(theme2) {
1287
+ constructor(theme) {
2034
1288
  super();
2035
1289
  __publicField(this, "_theme");
2036
1290
  __publicField(this, "_style");
2037
- this._theme = theme2;
1291
+ this._theme = theme;
2038
1292
  }
2039
1293
  static get id() {
2040
1294
  return "courier-skeleton-animated-row";
@@ -2052,9 +1306,9 @@ class CourierSkeletonAnimatedRow extends CourierBaseElement {
2052
1306
  skeletonItem.className = "skeleton-item";
2053
1307
  this.appendChild(skeletonItem);
2054
1308
  }
2055
- static getStyles(theme2) {
1309
+ static getStyles(theme) {
2056
1310
  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";
1311
+ const color = ((_c = (_b = (_a = theme.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.animation) == null ? void 0 : _c.barColor) ?? "#000";
2058
1312
  const hexColor = color.length === 4 ? `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}` : color;
2059
1313
  const r = parseInt(hexColor.slice(1, 3), 16);
2060
1314
  const g = parseInt(hexColor.slice(3, 5), 16);
@@ -2071,7 +1325,7 @@ class CourierSkeletonAnimatedRow extends CourierBaseElement {
2071
1325
  }
2072
1326
 
2073
1327
  ${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"};
1328
+ height: ${((_f = (_e = (_d = theme.inbox) == null ? void 0 : _d.loading) == null ? void 0 : _e.animation) == null ? void 0 : _f.barHeight) ?? "14px"};
2075
1329
  width: 100%;
2076
1330
  background: linear-gradient(
2077
1331
  90deg,
@@ -2080,8 +1334,8 @@ class CourierSkeletonAnimatedRow extends CourierBaseElement {
2080
1334
  ${colorWithAlpha80} 75%
2081
1335
  );
2082
1336
  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"};
1337
+ 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;
1338
+ border-radius: ${((_l = (_k = (_j = theme.inbox) == null ? void 0 : _j.loading) == null ? void 0 : _k.animation) == null ? void 0 : _l.barBorderRadius) ?? "14px"};
2085
1339
  }
2086
1340
 
2087
1341
  @keyframes ${CourierSkeletonAnimatedRow.id}-shimmer {
@@ -2097,11 +1351,11 @@ class CourierSkeletonAnimatedRow extends CourierBaseElement {
2097
1351
  }
2098
1352
  registerElement(CourierSkeletonAnimatedRow);
2099
1353
  class CourierInboxSkeletonList extends CourierFactoryElement {
2100
- constructor(theme2) {
1354
+ constructor(theme) {
2101
1355
  super();
2102
1356
  __publicField(this, "_theme");
2103
1357
  __publicField(this, "_style");
2104
- this._theme = theme2;
1358
+ this._theme = theme;
2105
1359
  }
2106
1360
  static get id() {
2107
1361
  return "courier-inbox-skeleton-list";
@@ -2123,7 +1377,7 @@ class CourierInboxSkeletonList extends CourierFactoryElement {
2123
1377
  this.appendChild(list);
2124
1378
  return list;
2125
1379
  }
2126
- static getStyles(theme2) {
1380
+ static getStyles(theme) {
2127
1381
  var _a, _b, _c, _d;
2128
1382
  return `
2129
1383
  ${CourierInboxSkeletonList.id} {
@@ -2143,12 +1397,12 @@ class CourierInboxSkeletonList extends CourierFactoryElement {
2143
1397
  }
2144
1398
 
2145
1399
  ${CourierInboxSkeletonList.id} .list > * {
2146
- border-bottom: ${((_b = (_a = theme2.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) ?? "1px solid red"};
1400
+ border-bottom: ${((_b = (_a = theme.inbox) == null ? void 0 : _a.loading) == null ? void 0 : _b.divider) ?? "1px solid red"};
2147
1401
  opacity: 100%;
2148
1402
  }
2149
1403
 
2150
1404
  ${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"};
1405
+ border-bottom: ${((_d = (_c = theme.inbox) == null ? void 0 : _c.loading) == null ? void 0 : _d.divider) ?? "1px solid red"};
2152
1406
  opacity: 88%;
2153
1407
  }
2154
1408
 
@@ -2304,9 +1558,9 @@ class CourierInboxList extends CourierBaseElement {
2304
1558
  setCanLongPressListItems(canLongPress) {
2305
1559
  this._canLongPressListItems = canLongPress;
2306
1560
  }
2307
- static getStyles(theme2) {
1561
+ static getStyles(theme) {
2308
1562
  var _a;
2309
- const list = (_a = theme2.inbox) == null ? void 0 : _a.list;
1563
+ const list = (_a = theme.inbox) == null ? void 0 : _a.list;
2310
1564
  return `
2311
1565
  ${CourierInboxList.id} {
2312
1566
  flex: 1;
@@ -2632,7 +1886,7 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2632
1886
  }
2633
1887
  getStyles() {
2634
1888
  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();
1889
+ const theme = this._themeSubscription.manager.getTheme();
2636
1890
  return `
2637
1891
  ${CourierInboxOptionMenu.id} {
2638
1892
  position: relative;
@@ -2644,10 +1898,10 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2644
1898
  position: absolute;
2645
1899
  top: 42px;
2646
1900
  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"};
1901
+ 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"};
1902
+ 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"};
1903
+ 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"};
1904
+ 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
1905
  z-index: 1000;
2652
1906
  min-width: 200px;
2653
1907
  overflow: hidden;
@@ -2655,7 +1909,7 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2655
1909
  }
2656
1910
 
2657
1911
  ${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"};
1912
+ 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
1913
  }
2660
1914
 
2661
1915
  ${CourierInboxOptionMenu.id} courier-inbox-filter-menu-item:last-child {
@@ -2670,11 +1924,11 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2670
1924
  }
2671
1925
 
2672
1926
  ${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"};
1927
+ 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
1928
  }
2675
1929
 
2676
1930
  ${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"};
1931
+ 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
1932
  }
2679
1933
 
2680
1934
  ${CourierInboxOptionMenuItem.id} .menu-item {
@@ -2690,10 +1944,10 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2690
1944
 
2691
1945
  ${CourierInboxOptionMenuItem.id} p {
2692
1946
  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"};
1947
+ 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"};
1948
+ 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"};
1949
+ 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"};
1950
+ 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
1951
  white-space: nowrap;
2698
1952
  }
2699
1953
 
@@ -2707,8 +1961,8 @@ class CourierInboxOptionMenu extends CourierBaseElement {
2707
1961
  if (this._style) {
2708
1962
  this._style.textContent = this.getStyles();
2709
1963
  }
2710
- const theme2 = this._themeSubscription.manager.getTheme();
2711
- const menu = (_b = (_a = theme2.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus;
1964
+ const theme = this._themeSubscription.manager.getTheme();
1965
+ const menu = (_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus;
2712
1966
  const isFilter = this._type === "filters";
2713
1967
  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
1968
  const defaultIcon = isFilter ? CourierIconSVGs.filter : CourierIconSVGs.overflow;
@@ -2804,7 +2058,7 @@ class CourierUnreadCountBadge extends CourierBaseElement {
2804
2058
  this._themeSubscription.unsubscribe();
2805
2059
  (_a = this._style) == null ? void 0 : _a.remove();
2806
2060
  }
2807
- static getStyles(theme2) {
2061
+ static getStyles(theme) {
2808
2062
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
2809
2063
  return `
2810
2064
  ${CourierUnreadCountBadge.id} {
@@ -2820,11 +2074,11 @@ class CourierUnreadCountBadge extends CourierBaseElement {
2820
2074
  }
2821
2075
 
2822
2076
  ${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};
2077
+ 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};
2078
+ 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};
2079
+ 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};
2080
+ 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};
2081
+ 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
2082
  }
2829
2083
  `;
2830
2084
  }
@@ -2872,7 +2126,7 @@ class CourierInboxHeaderTitle extends CourierBaseElement {
2872
2126
  get theme() {
2873
2127
  return this._themeSubscription.manager.getTheme();
2874
2128
  }
2875
- static getStyles(theme2) {
2129
+ static getStyles(theme) {
2876
2130
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
2877
2131
  return `
2878
2132
  ${CourierInboxHeaderTitle.id} {
@@ -2889,10 +2143,10 @@ class CourierInboxHeaderTitle extends CourierBaseElement {
2889
2143
 
2890
2144
  ${CourierInboxHeaderTitle.id} h2 {
2891
2145
  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"};
2146
+ 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"};
2147
+ 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"};
2148
+ 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"};
2149
+ 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
2150
  }
2897
2151
 
2898
2152
  ${CourierInboxHeaderTitle.id} courier-unread-count-badge {
@@ -2936,21 +2190,21 @@ class CourierInboxHeaderTitle extends CourierBaseElement {
2936
2190
  }
2937
2191
  updateFilter() {
2938
2192
  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();
2193
+ const theme = this._themeSubscription.manager.getTheme();
2940
2194
  switch (this._feedType) {
2941
2195
  case "inbox":
2942
2196
  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";
2197
+ 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
2198
  }
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");
2199
+ (_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);
2200
+ (_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
2201
  break;
2948
2202
  case "archive":
2949
2203
  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";
2204
+ 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
2205
  }
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");
2206
+ (_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);
2207
+ (_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
2208
  break;
2955
2209
  }
2956
2210
  }
@@ -2995,8 +2249,8 @@ class CourierInboxHeader extends CourierFactoryElement {
2995
2249
  }
2996
2250
  getFilterOptions() {
2997
2251
  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;
2252
+ const theme = this._themeSubscription.manager.getTheme();
2253
+ const filterMenu = (_c = (_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.filters;
3000
2254
  return [
3001
2255
  {
3002
2256
  id: "inbox",
@@ -3006,8 +2260,8 @@ class CourierInboxHeader extends CourierFactoryElement {
3006
2260
  svg: ((_h = (_g = filterMenu == null ? void 0 : filterMenu.inbox) == null ? void 0 : _g.icon) == null ? void 0 : _h.svg) ?? CourierIconSVGs.inbox
3007
2261
  },
3008
2262
  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
2263
+ 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",
2264
+ 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
2265
  },
3012
2266
  onClick: (option) => {
3013
2267
  this.handleOptionMenuItemClick("inbox", option);
@@ -3021,8 +2275,8 @@ class CourierInboxHeader extends CourierFactoryElement {
3021
2275
  svg: ((_y = (_x = filterMenu == null ? void 0 : filterMenu.archive) == null ? void 0 : _x.icon) == null ? void 0 : _y.svg) ?? CourierIconSVGs.archive
3022
2276
  },
3023
2277
  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
2278
+ 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",
2279
+ 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
2280
  },
3027
2281
  onClick: (option) => {
3028
2282
  this.handleOptionMenuItemClick("archive", option);
@@ -3032,8 +2286,8 @@ class CourierInboxHeader extends CourierFactoryElement {
3032
2286
  }
3033
2287
  getActionOptions() {
3034
2288
  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;
2289
+ const theme = this._themeSubscription.manager.getTheme();
2290
+ const actionMenu = (_c = (_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.menus) == null ? void 0 : _c.actions;
3037
2291
  return [
3038
2292
  {
3039
2293
  id: "markAllRead",
@@ -3127,7 +2381,7 @@ class CourierInboxHeader extends CourierFactoryElement {
3127
2381
  headerContent.appendChild(actions);
3128
2382
  return headerContent;
3129
2383
  }
3130
- static getStyles(theme2) {
2384
+ static getStyles(theme) {
3131
2385
  var _a, _b, _c, _d;
3132
2386
  return `
3133
2387
  ${CourierInboxHeader.id} {
@@ -3138,8 +2392,8 @@ class CourierInboxHeader extends CourierFactoryElement {
3138
2392
 
3139
2393
  ${CourierInboxHeader.id} .header-content {
3140
2394
  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`};
2395
+ background-color: ${((_b = (_a = theme.inbox) == null ? void 0 : _a.header) == null ? void 0 : _b.backgroundColor) ?? CourierColors.white[500]};
2396
+ box-shadow: ${((_d = (_c = theme.inbox) == null ? void 0 : _c.header) == null ? void 0 : _d.shadow) ?? `0px 1px 0px 0px red`};
3143
2397
  display: flex;
3144
2398
  align-items: center;
3145
2399
  justify-content: space-between;
@@ -3657,120 +2911,120 @@ const defaultDarkTheme = {
3657
2911
  }
3658
2912
  }
3659
2913
  };
3660
- const mergeTheme = (mode, theme2) => {
2914
+ const mergeTheme = (mode, theme) => {
3661
2915
  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
2916
  const defaultTheme = mode === "light" ? defaultLightTheme : defaultDarkTheme;
3663
2917
  return {
3664
2918
  popup: {
3665
2919
  button: {
3666
2920
  ...(_a = defaultTheme.popup) == null ? void 0 : _a.button,
3667
- ...(_b = theme2.popup) == null ? void 0 : _b.button,
2921
+ ...(_b = theme.popup) == null ? void 0 : _b.button,
3668
2922
  icon: {
3669
2923
  ...(_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
2924
+ ...(_f = (_e = theme.popup) == null ? void 0 : _e.button) == null ? void 0 : _f.icon
3671
2925
  },
3672
2926
  unreadDotIndicator: {
3673
2927
  ...(_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
2928
+ ...(_j = (_i = theme.popup) == null ? void 0 : _i.button) == null ? void 0 : _j.unreadDotIndicator
3675
2929
  }
3676
2930
  },
3677
2931
  window: {
3678
2932
  ...(_k = defaultTheme.popup) == null ? void 0 : _k.window,
3679
- ...(_l = theme2.popup) == null ? void 0 : _l.window
2933
+ ...(_l = theme.popup) == null ? void 0 : _l.window
3680
2934
  }
3681
2935
  },
3682
2936
  inbox: {
3683
2937
  header: {
3684
2938
  ...(_m = defaultTheme.inbox) == null ? void 0 : _m.header,
3685
- ...(_n = theme2.inbox) == null ? void 0 : _n.header,
2939
+ ...(_n = theme.inbox) == null ? void 0 : _n.header,
3686
2940
  filters: {
3687
2941
  ...(_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,
2942
+ ...(_r = (_q = theme.inbox) == null ? void 0 : _q.header) == null ? void 0 : _r.filters,
3689
2943
  inbox: {
3690
2944
  ...(_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,
2945
+ ...(_x = (_w = (_v = theme.inbox) == null ? void 0 : _v.header) == null ? void 0 : _w.filters) == null ? void 0 : _x.inbox,
3692
2946
  icon: {
3693
2947
  ...(_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
2948
+ ...(_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
2949
  }
3696
2950
  },
3697
2951
  archive: {
3698
2952
  ...(_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,
2953
+ ...(_L = (_K = (_J = theme.inbox) == null ? void 0 : _J.header) == null ? void 0 : _K.filters) == null ? void 0 : _L.archive,
3700
2954
  icon: {
3701
2955
  ...(_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
2956
+ ...(_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
2957
  }
3704
2958
  },
3705
2959
  unreadIndicator: {
3706
2960
  ...(_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
2961
+ ...(_Z = (_Y = (_X = theme.inbox) == null ? void 0 : _X.header) == null ? void 0 : _Y.filters) == null ? void 0 : _Z.unreadIndicator
3708
2962
  }
3709
2963
  },
3710
2964
  menus: {
3711
2965
  ...(_$ = (__ = 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,
2966
+ ...(_ba = (_aa = theme.inbox) == null ? void 0 : _aa.header) == null ? void 0 : _ba.menus,
3713
2967
  popup: {
3714
2968
  ...(_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,
2969
+ ...(_ha = (_ga = (_fa = theme.inbox) == null ? void 0 : _fa.header) == null ? void 0 : _ga.menus) == null ? void 0 : _ha.popup,
3716
2970
  list: {
3717
2971
  ...(_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,
2972
+ ...(_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
2973
  font: {
3720
2974
  ...(_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
2975
+ ...(_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
2976
  },
3723
2977
  selectionIcon: {
3724
2978
  ...(_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
2979
+ ...(_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
2980
  }
3727
2981
  }
3728
2982
  },
3729
2983
  filters: {
3730
2984
  ...(_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,
2985
+ ...(_Pa = (_Oa = (_Na = theme.inbox) == null ? void 0 : _Na.header) == null ? void 0 : _Oa.menus) == null ? void 0 : _Pa.filters,
3732
2986
  inbox: {
3733
2987
  ...(_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,
2988
+ ...(_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
2989
  icon: {
3736
2990
  ...(_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
2991
+ ...(_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
2992
  }
3739
2993
  },
3740
2994
  archive: {
3741
2995
  ...(_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,
2996
+ ...(_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
2997
  icon: {
3744
2998
  ...(_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
2999
+ ...(_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
3000
  }
3747
3001
  }
3748
3002
  },
3749
3003
  actions: {
3750
3004
  ...(_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,
3005
+ ...(_Db = (_Cb = (_Bb = theme.inbox) == null ? void 0 : _Bb.header) == null ? void 0 : _Cb.menus) == null ? void 0 : _Db.actions,
3752
3006
  markAllRead: {
3753
3007
  ...(_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,
3008
+ ...(_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
3009
  icon: {
3756
3010
  ...(_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
3011
+ ...(_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
3012
  }
3759
3013
  },
3760
3014
  archiveAll: {
3761
3015
  ...(_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,
3016
+ ...(_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
3017
  icon: {
3764
3018
  ...(_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
3019
+ ...(_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
3020
  }
3767
3021
  },
3768
3022
  archiveRead: {
3769
3023
  ...(_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,
3024
+ ...(_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
3025
  icon: {
3772
3026
  ...(_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
3027
+ ...(_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
3028
  }
3775
3029
  }
3776
3030
  }
@@ -3778,31 +3032,31 @@ const mergeTheme = (mode, theme2) => {
3778
3032
  },
3779
3033
  list: {
3780
3034
  ...(_Ec = defaultTheme.inbox) == null ? void 0 : _Ec.list,
3781
- ...(_Fc = theme2.inbox) == null ? void 0 : _Fc.list,
3035
+ ...(_Fc = theme.inbox) == null ? void 0 : _Fc.list,
3782
3036
  item: {
3783
3037
  ...(_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,
3038
+ ...(_Jc = (_Ic = theme.inbox) == null ? void 0 : _Ic.list) == null ? void 0 : _Jc.item,
3785
3039
  menu: {
3786
3040
  ...(_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,
3041
+ ...(_Pc = (_Oc = (_Nc = theme.inbox) == null ? void 0 : _Nc.list) == null ? void 0 : _Oc.item) == null ? void 0 : _Pc.menu,
3788
3042
  item: {
3789
3043
  ...(_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,
3044
+ ...(_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
3045
  read: {
3792
3046
  ...(_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
3047
+ ...(_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
3048
  },
3795
3049
  unread: {
3796
3050
  ...(_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
3051
+ ...(_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
3052
  },
3799
3053
  archive: {
3800
3054
  ...(_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
3055
+ ...(_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
3056
  },
3803
3057
  unarchive: {
3804
3058
  ...(_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
3059
+ ...(_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
3060
  }
3807
3061
  }
3808
3062
  }
@@ -3810,129 +3064,54 @@ const mergeTheme = (mode, theme2) => {
3810
3064
  },
3811
3065
  loading: {
3812
3066
  ...(_Kd = defaultTheme.inbox) == null ? void 0 : _Kd.loading,
3813
- ...(_Ld = theme2.inbox) == null ? void 0 : _Ld.loading
3067
+ ...(_Ld = theme.inbox) == null ? void 0 : _Ld.loading
3814
3068
  },
3815
3069
  empty: {
3816
3070
  ...(_Md = defaultTheme.inbox) == null ? void 0 : _Md.empty,
3817
- ...(_Nd = theme2.inbox) == null ? void 0 : _Nd.empty
3071
+ ...(_Nd = theme.inbox) == null ? void 0 : _Nd.empty
3818
3072
  },
3819
3073
  error: {
3820
3074
  ...(_Od = defaultTheme.inbox) == null ? void 0 : _Od.error,
3821
- ...(_Pd = theme2.inbox) == null ? void 0 : _Pd.error
3075
+ ...(_Pd = theme.inbox) == null ? void 0 : _Pd.error
3822
3076
  }
3823
3077
  }
3824
3078
  };
3825
3079
  };
3826
- class CourierInboxThemeManager {
3080
+ class CourierInboxThemeManager extends CourierThemeManager {
3827
3081
  constructor(initialTheme) {
3828
- // Event IDs
3082
+ super(initialTheme);
3083
+ // Event ID for inbox theme changes
3829
3084
  __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
- }
3869
- /**
3870
- * Get the current theme
3871
- */
3872
- getTheme() {
3873
- return this._theme;
3874
3085
  }
3875
3086
  /**
3876
- * Update the theme
3087
+ * Get the default light theme for inbox
3877
3088
  */
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);
3089
+ getDefaultLightTheme() {
3090
+ return defaultLightTheme;
3883
3091
  }
3884
3092
  /**
3885
- * Set the theme and notify all listeners
3093
+ * Get the default dark theme for inbox
3886
3094
  */
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
- }));
3095
+ getDefaultDarkTheme() {
3096
+ return defaultDarkTheme;
3893
3097
  }
3894
3098
  /**
3895
- * Set the mode and notify all listeners
3099
+ * Merge the inbox theme with defaults
3896
3100
  */
3897
- setMode(mode) {
3898
- this._userMode = mode;
3899
- this.updateTheme();
3900
- }
3901
- get mode() {
3902
- return this._userMode;
3101
+ mergeTheme(mode, theme) {
3102
+ return mergeTheme(mode, theme);
3903
3103
  }
3904
3104
  /**
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
3105
+ * Subscribe to inbox theme changes
3106
+ * @param callback - Function to run when the theme changes
3107
+ * @returns Object with unsubscribe method to stop listening
3908
3108
  */
3909
3109
  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
- }
3110
+ const baseSubscription = super.subscribe(callback);
3111
+ return {
3112
+ ...baseSubscription,
3113
+ manager: this
3923
3114
  };
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
3115
  }
3937
3116
  }
3938
3117
  class CourierInbox extends CourierBaseElement {
@@ -3980,15 +3159,15 @@ class CourierInbox extends CourierBaseElement {
3980
3159
  * Set the light theme for the inbox.
3981
3160
  * @param theme The light theme object to set.
3982
3161
  */
3983
- setLightTheme(theme2) {
3984
- this._themeManager.setLightTheme(theme2);
3162
+ setLightTheme(theme) {
3163
+ this._themeManager.setLightTheme(theme);
3985
3164
  }
3986
3165
  /**
3987
3166
  * Set the dark theme for the inbox.
3988
3167
  * @param theme The dark theme object to set.
3989
3168
  */
3990
- setDarkTheme(theme2) {
3991
- this._themeManager.setDarkTheme(theme2);
3169
+ setDarkTheme(theme) {
3170
+ this._themeManager.setDarkTheme(theme);
3992
3171
  }
3993
3172
  /**
3994
3173
  * Set the theme mode (light/dark/system).
@@ -4378,7 +3557,7 @@ class CourierInboxMenuButton extends CourierFactoryElement {
4378
3557
  this.refreshTheme();
4379
3558
  return this._container;
4380
3559
  }
4381
- static getStyles(theme2) {
3560
+ static getStyles(theme) {
4382
3561
  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
4383
3562
  return `
4384
3563
  ${CourierInboxMenuButton.id} .menu-button-container {
@@ -4391,10 +3570,10 @@ class CourierInboxMenuButton extends CourierFactoryElement {
4391
3570
  top: 2px;
4392
3571
  right: 2px;
4393
3572
  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%"};
3573
+ width: ${((_c = (_b = (_a = theme.popup) == null ? void 0 : _a.button) == null ? void 0 : _b.unreadDotIndicator) == null ? void 0 : _c.height) ?? "8px"};
3574
+ height: ${((_f = (_e = (_d = theme.popup) == null ? void 0 : _d.button) == null ? void 0 : _e.unreadDotIndicator) == null ? void 0 : _f.width) ?? "8px"};
3575
+ background: ${((_i = (_h = (_g = theme.popup) == null ? void 0 : _g.button) == null ? void 0 : _h.unreadDotIndicator) == null ? void 0 : _i.backgroundColor) ?? "red"};
3576
+ border-radius: ${((_l = (_k = (_j = theme.popup) == null ? void 0 : _j.button) == null ? void 0 : _k.unreadDotIndicator) == null ? void 0 : _l.borderRadius) ?? "50%"};
4398
3577
  display: none;
4399
3578
  z-index: 1;
4400
3579
  }
@@ -4471,15 +3650,15 @@ class CourierInboxPopupMenu extends CourierBaseElement {
4471
3650
  * Set the light theme for the popup menu.
4472
3651
  * @param theme The light theme object to set.
4473
3652
  */
4474
- setLightTheme(theme2) {
4475
- this._themeManager.setLightTheme(theme2);
3653
+ setLightTheme(theme) {
3654
+ this._themeManager.setLightTheme(theme);
4476
3655
  }
4477
3656
  /**
4478
3657
  * Set the dark theme for the popup menu.
4479
3658
  * @param theme The dark theme object to set.
4480
3659
  */
4481
- setDarkTheme(theme2) {
4482
- this._themeManager.setDarkTheme(theme2);
3660
+ setDarkTheme(theme) {
3661
+ this._themeManager.setDarkTheme(theme);
4483
3662
  }
4484
3663
  /**
4485
3664
  * Set the theme mode (light/dark/system).
@@ -4520,7 +3699,7 @@ class CourierInboxPopupMenu extends CourierBaseElement {
4520
3699
  this._style.textContent = CourierInboxPopupMenu.getStyles(this.theme, this._width, this._height);
4521
3700
  }
4522
3701
  }
4523
- static getStyles(theme2, width, height) {
3702
+ static getStyles(theme, width, height) {
4524
3703
  var _a, _b, _c, _d, _e, _f, _g, _h;
4525
3704
  return `
4526
3705
  ${CourierInboxPopupMenu.id} {
@@ -4536,10 +3715,10 @@ class CourierInboxPopupMenu extends CourierBaseElement {
4536
3715
  ${CourierInboxPopupMenu.id} .popup {
4537
3716
  display: none;
4538
3717
  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`};
3718
+ background: ${((_b = (_a = theme.popup) == null ? void 0 : _a.window) == null ? void 0 : _b.backgroundColor) ?? "red"};
3719
+ border-radius: ${((_d = (_c = theme.popup) == null ? void 0 : _c.window) == null ? void 0 : _d.borderRadius) ?? "8px"};
3720
+ border: ${((_f = (_e = theme.popup) == null ? void 0 : _e.window) == null ? void 0 : _f.border) ?? `1px solid red`};
3721
+ box-shadow: ${((_h = (_g = theme.popup) == null ? void 0 : _g.window) == null ? void 0 : _h.shadow) ?? `0px 8px 16px -4px red`};
4543
3722
  z-index: 1000;
4544
3723
  width: ${width};
4545
3724
  height: ${height};
@@ -4876,7 +4055,7 @@ class CourierInboxDatastoreEvents {
4876
4055
  }
4877
4056
  }
4878
4057
  Courier.shared.courierUserAgentName = "courier-ui-inbox";
4879
- Courier.shared.courierUserAgentVersion = "1.1.0";
4058
+ Courier.shared.courierUserAgentVersion = "1.2.0";
4880
4059
  export {
4881
4060
  Courier2 as Courier,
4882
4061
  CourierInbox,