mppx 0.5.5 → 0.5.7

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 (60) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/Html.d.ts +11 -0
  3. package/dist/Html.d.ts.map +1 -0
  4. package/dist/Html.js +41 -0
  5. package/dist/Html.js.map +1 -0
  6. package/dist/server/Mppx.d.ts +1 -28
  7. package/dist/server/Mppx.d.ts.map +1 -1
  8. package/dist/server/Mppx.js +101 -30
  9. package/dist/server/Mppx.js.map +1 -1
  10. package/dist/server/Transport.d.ts.map +1 -1
  11. package/dist/server/Transport.js +18 -46
  12. package/dist/server/Transport.js.map +1 -1
  13. package/dist/server/internal/html/compose.main.gen.d.ts +2 -0
  14. package/dist/server/internal/html/compose.main.gen.d.ts.map +1 -0
  15. package/dist/server/internal/html/compose.main.gen.js +3 -0
  16. package/dist/server/internal/html/compose.main.gen.js.map +1 -0
  17. package/dist/server/internal/html/config.d.ts +50 -49
  18. package/dist/server/internal/html/config.d.ts.map +1 -1
  19. package/dist/server/internal/html/config.js +323 -117
  20. package/dist/server/internal/html/config.js.map +1 -1
  21. package/dist/server/internal/html/constants.d.ts +26 -0
  22. package/dist/server/internal/html/constants.d.ts.map +1 -0
  23. package/dist/server/internal/html/constants.js +26 -0
  24. package/dist/server/internal/html/constants.js.map +1 -0
  25. package/dist/server/internal/html/serviceWorker.client.d.ts +2 -0
  26. package/dist/server/internal/html/serviceWorker.client.d.ts.map +1 -0
  27. package/dist/server/internal/html/serviceWorker.client.js +26 -0
  28. package/dist/server/internal/html/serviceWorker.client.js.map +1 -0
  29. package/dist/stripe/server/Charge.d.ts +2 -4
  30. package/dist/stripe/server/Charge.d.ts.map +1 -1
  31. package/dist/stripe/server/Charge.js.map +1 -1
  32. package/dist/stripe/server/internal/html.gen.d.ts +1 -1
  33. package/dist/stripe/server/internal/html.gen.d.ts.map +1 -1
  34. package/dist/stripe/server/internal/html.gen.js +1 -1
  35. package/dist/stripe/server/internal/html.gen.js.map +1 -1
  36. package/dist/tempo/server/Charge.d.ts +1 -4
  37. package/dist/tempo/server/Charge.d.ts.map +1 -1
  38. package/dist/tempo/server/Charge.js.map +1 -1
  39. package/dist/tempo/server/internal/html.gen.d.ts +1 -1
  40. package/dist/tempo/server/internal/html.gen.d.ts.map +1 -1
  41. package/dist/tempo/server/internal/html.gen.js +1 -1
  42. package/dist/tempo/server/internal/html.gen.js.map +1 -1
  43. package/package.json +6 -1
  44. package/src/Html.ts +67 -0
  45. package/src/server/Mppx.test.ts +203 -0
  46. package/src/server/Mppx.ts +118 -3
  47. package/src/server/Transport.test.ts +5 -2
  48. package/src/server/Transport.ts +21 -54
  49. package/src/server/internal/html/compose.main.gen.ts +2 -0
  50. package/src/server/internal/html/compose.main.ts +88 -0
  51. package/src/server/internal/html/config.ts +427 -177
  52. package/src/server/internal/html/constants.ts +28 -0
  53. package/src/server/internal/html/serviceWorker.client.ts +2 -2
  54. package/src/server/internal/html/tsconfig.compose.json +8 -0
  55. package/src/stripe/server/Charge.ts +2 -4
  56. package/src/stripe/server/internal/html/main.ts +44 -53
  57. package/src/stripe/server/internal/html.gen.ts +1 -1
  58. package/src/tempo/server/Charge.ts +1 -7
  59. package/src/tempo/server/internal/html/main.ts +26 -28
  60. package/src/tempo/server/internal/html.gen.ts +1 -1
@@ -8,6 +8,9 @@ export type Options = {
8
8
  theme: Theme | undefined;
9
9
  };
10
10
  export type Data<method extends Method.Method = Method.Method, config extends Record<string, unknown> = {}> = {
11
+ label: string;
12
+ rootId: string;
13
+ formattedAmount: string;
11
14
  config: config;
12
15
  challenge: Challenge.FromMethods<[method]>;
13
16
  text: {
@@ -17,25 +20,7 @@ export type Data<method extends Method.Method = Method.Method, config extends Re
17
20
  [k in keyof Omit<Theme, 'favicon' | 'fontUrl' | 'logo'>]-?: NonNullable<Theme[k]>;
18
21
  };
19
22
  };
20
- export declare const dataId = "__MPPX_DATA__";
21
- export declare const errorId = "root_error";
22
- export declare const rootId = "root";
23
- export declare const serviceWorkerParam = "__mppx_worker";
24
- export declare const classNames: {
25
- error: string;
26
- header: string;
27
- logo: string;
28
- logoColorScheme: (colorScheme: string) => string | undefined;
29
- summary: string;
30
- summaryAmount: string;
31
- summaryDescription: string;
32
- summaryExpires: string;
33
- };
34
- export declare function sanitize(str: string): string;
35
- export declare function sanitizeRecord<type extends Record<string, string>>(record: type): type;
36
- export declare const html: (template: {
37
- raw: readonly string[] | ArrayLike<string>;
38
- }, ...substitutions: any[]) => string;
23
+ export { attrs, classNames, ids, params } from './constants.js';
39
24
  declare class CssVar {
40
25
  readonly name: string;
41
26
  constructor(token: string);
@@ -55,13 +40,12 @@ export declare const vars: {
55
40
  readonly radius: CssVar;
56
41
  readonly spacingUnit: CssVar;
57
42
  };
58
- export declare function font(theme: Theme): string;
59
- export declare function style(theme: {
60
- [k in keyof Omit<Theme, 'favicon' | 'fontUrl' | 'logo'>]-?: NonNullable<Theme[k]>;
61
- }): string;
62
- export declare function showError(message: string): void;
63
- export declare function favicon(theme: Theme, realm: string): string;
64
- export declare function logo(value: Theme): string;
43
+ export declare const defaultText: {
44
+ readonly expires: "Expires at";
45
+ readonly pay: "Pay";
46
+ readonly paymentRequired: "Payment Required";
47
+ readonly title: "Payment Required";
48
+ };
65
49
  export type Text = {
66
50
  /** Prefix for the expiry line. @default 'Expires at' */
67
51
  expires?: string | undefined;
@@ -72,11 +56,20 @@ export type Text = {
72
56
  /** Page title. @default text.paymentRequired */
73
57
  title?: string | undefined;
74
58
  };
75
- export declare const defaultText: {
76
- readonly expires: "Expires at";
77
- readonly pay: "Pay";
78
- readonly paymentRequired: "Payment Required";
79
- readonly title: "Payment Required";
59
+ export declare const defaultTheme: {
60
+ readonly colorScheme: "light dark";
61
+ readonly fontFamily: "system-ui, -apple-system, sans-serif";
62
+ readonly fontSizeBase: "16px";
63
+ readonly radius: "6px";
64
+ readonly spacingUnit: "2px";
65
+ readonly accent: readonly ["#171717", "#ededed"];
66
+ readonly background: readonly ["#ffffff", "#0a0a0a"];
67
+ readonly border: readonly ["#e5e5e5", "#2e2e2e"];
68
+ readonly foreground: readonly ["#0a0a0a", "#ededed"];
69
+ readonly muted: readonly ["#666666", "#a1a1a1"];
70
+ readonly negative: readonly ["#e5484d", "#e5484d"];
71
+ readonly positive: readonly ["#30a46c", "#30a46c"];
72
+ readonly surface: readonly ["#f5f5f5", "#1a1a1a"];
80
73
  };
81
74
  export type Theme = {
82
75
  /** Color scheme. @default 'light dark' */
@@ -118,27 +111,35 @@ export type Theme = {
118
111
  /** Input/card surface. @default ['#f5f5f5', '#1a1a1a'] */
119
112
  surface?: LightDark | undefined;
120
113
  };
121
- export type LightDark = string | readonly [light: string, dark: string];
122
- export declare const defaultTheme: {
123
- readonly colorScheme: "light dark";
124
- readonly fontFamily: "system-ui, -apple-system, sans-serif";
125
- readonly fontSizeBase: "16px";
126
- readonly radius: "6px";
127
- readonly spacingUnit: "2px";
128
- readonly accent: readonly ["#171717", "#ededed"];
129
- readonly background: readonly ["#ffffff", "#0a0a0a"];
130
- readonly border: readonly ["#e5e5e5", "#2e2e2e"];
131
- readonly foreground: readonly ["#0a0a0a", "#ededed"];
132
- readonly muted: readonly ["#666666", "#a1a1a1"];
133
- readonly negative: readonly ["#e5484d", "#e5484d"];
134
- readonly positive: readonly ["#30a46c", "#30a46c"];
135
- readonly surface: readonly ["#f5f5f5", "#1a1a1a"];
114
+ export type Config = {
115
+ text?: Text | undefined;
116
+ theme?: Theme | undefined;
117
+ };
118
+ type LightDark = string | readonly [light: string, dark: string];
119
+ export declare function resolveOptions(options: Options): {
120
+ theme: ResolvedTheme;
121
+ text: ResolvedText;
136
122
  };
137
- export declare const colorTokens: readonly ["accent", "negative", "positive", "background", "foreground", "muted", "surface", "border"];
138
- export declare function resolveColor(value: Theme[(typeof colorTokens)[number]] | undefined, fallback: readonly [string, string]): readonly [light: string, dark: string];
123
+ type ResolvedTheme = {
124
+ [k in keyof Omit<Theme, 'favicon' | 'fontUrl' | 'logo'>]-?: NonNullable<Theme[k]>;
125
+ } & Pick<Theme, 'favicon' | 'fontUrl' | 'logo'>;
126
+ type ResolvedText = {
127
+ [k in keyof Text]-?: NonNullable<Text[k]>;
128
+ };
129
+ export declare function render(options: {
130
+ entries: readonly {
131
+ challenge: Challenge.Challenge;
132
+ content: string;
133
+ }[];
134
+ dataMap: Record<string, Data>;
135
+ formattedAmount: string;
136
+ /** Whether to render panel wrappers around each entry. @default entries.length > 1 */
137
+ panels?: boolean | undefined;
138
+ text: ResolvedText;
139
+ theme: ResolvedTheme;
140
+ }): string;
139
141
  export declare function mergeDefined<type>(defaults: type, value: DeepPartial<type> | undefined): type;
140
142
  type DeepPartial<type> = {
141
143
  [key in keyof type]?: type[key] extends readonly unknown[] ? type[key] | undefined : type[key] extends object ? DeepPartial<type[key]> | undefined : type[key] | undefined;
142
144
  };
143
- export {};
144
145
  //# sourceMappingURL=config.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/server/internal/html/config.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/server/internal/html/config.ts"],"names":[],"mappings":"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"}
@@ -1,31 +1,12 @@
1
- export const dataId = '__MPPX_DATA__';
2
- export const errorId = 'root_error';
3
- export const rootId = 'root';
4
- export const serviceWorkerParam = '__mppx_worker';
5
- export const classNames = {
6
- error: 'mppx-error',
7
- header: 'mppx-header',
8
- logo: 'mppx-logo',
9
- logoColorScheme: (colorScheme) => colorScheme === 'dark' || colorScheme === 'light'
1
+ import { Json } from 'ox';
2
+ import { tabScript } from './compose.main.gen.js';
3
+ export { attrs, classNames, ids, params } from './constants.js';
4
+ import { attrs, classNames, ids } from './constants.js';
5
+ function logoColorScheme(colorScheme) {
6
+ return colorScheme === 'dark' || colorScheme === 'light'
10
7
  ? `${classNames.logo}--${colorScheme}`
11
- : undefined,
12
- summary: 'mppx-summary',
13
- summaryAmount: 'mppx-summary-amount',
14
- summaryDescription: 'mppx-summary-description',
15
- summaryExpires: 'mppx-summary-expires',
16
- };
17
- export function sanitize(str) {
18
- return str
19
- .replace(/&/g, '&amp;')
20
- .replace(/</g, '&lt;')
21
- .replace(/>/g, '&gt;')
22
- .replace(/"/g, '&quot;')
23
- .replace(/'/g, '&#39;');
24
- }
25
- export function sanitizeRecord(record) {
26
- return Object.fromEntries(Object.entries(record).map(([key, value]) => [key, sanitize(value)]));
8
+ : undefined;
27
9
  }
28
- export const html = String.raw;
29
10
  class CssVar {
30
11
  name;
31
12
  constructor(token) {
@@ -49,17 +30,141 @@ export const vars = {
49
30
  radius: new CssVar('radius'),
50
31
  spacingUnit: new CssVar('spacing-unit'),
51
32
  };
52
- export function font(theme) {
53
- if (!theme.fontUrl)
54
- return '';
55
- return html `<link
56
- rel="preconnect"
57
- href="${sanitize(new URL(theme.fontUrl).origin)}"
58
- crossorigin
59
- />
60
- <link rel="stylesheet" href="${sanitize(theme.fontUrl)}" />`;
33
+ export const defaultText = {
34
+ expires: 'Expires at',
35
+ pay: 'Pay',
36
+ paymentRequired: 'Payment Required',
37
+ title: 'Payment Required',
38
+ };
39
+ export const defaultTheme = {
40
+ colorScheme: 'light dark',
41
+ fontFamily: 'system-ui, -apple-system, sans-serif',
42
+ fontSizeBase: '16px',
43
+ radius: '6px',
44
+ spacingUnit: '2px',
45
+ accent: ['#171717', '#ededed'],
46
+ background: ['#ffffff', '#0a0a0a'],
47
+ border: ['#e5e5e5', '#2e2e2e'],
48
+ foreground: ['#0a0a0a', '#ededed'],
49
+ muted: ['#666666', '#a1a1a1'],
50
+ negative: ['#e5484d', '#e5484d'],
51
+ positive: ['#30a46c', '#30a46c'],
52
+ surface: ['#f5f5f5', '#1a1a1a'],
53
+ };
54
+ function resolveColor(value, fallback) {
55
+ if (!value)
56
+ return fallback;
57
+ if (typeof value === 'string')
58
+ return [value, value];
59
+ return value;
61
60
  }
62
- export function style(theme) {
61
+ const colorTokens = [
62
+ 'accent',
63
+ 'negative',
64
+ 'positive',
65
+ 'background',
66
+ 'foreground',
67
+ 'muted',
68
+ 'surface',
69
+ 'border',
70
+ ];
71
+ export function resolveOptions(options) {
72
+ const theme = mergeDefined({
73
+ favicon: undefined,
74
+ fontUrl: undefined,
75
+ logo: undefined,
76
+ ...defaultTheme,
77
+ }, options.theme ?? {});
78
+ const text = sanitizeRecord(mergeDefined(defaultText, options.text ?? {}));
79
+ return { theme, text };
80
+ }
81
+ const html = String.raw;
82
+ export function render(options) {
83
+ const { entries, dataMap, formattedAmount, text, theme } = options;
84
+ const firstChallenge = entries[0].challenge;
85
+ const hasTabs = entries.length > 1;
86
+ const hasPanels = options.panels ?? hasTabs;
87
+ const dataValues = Object.values(dataMap);
88
+ const tabListHtml = hasTabs
89
+ ? html `<nav class="${classNames.tabList}" role="tablist" aria-label="Payment methods">
90
+ ${dataValues
91
+ .map((data, i) => html `<button
92
+ class="${classNames.tab}"
93
+ role="tab"
94
+ id="mppx-tab-${i}"
95
+ aria-selected="${i === 0 ? 'true' : 'false'}"
96
+ aria-controls="mppx-panel-${i}"
97
+ ${i !== 0 ? 'tabindex="-1"' : ''}
98
+ data-amount="${sanitize(data.formattedAmount)}"
99
+ ${data.challenge.description
100
+ ? `data-description="${sanitize(data.challenge.description)}"`
101
+ : ''}
102
+ ${data.challenge.expires
103
+ ? `data-expires="${sanitize(data.challenge.expires)}"`
104
+ : ''}
105
+ ${data.challenge.expires ? `data-expires-label="${sanitize(text.expires)}"` : ''}
106
+ >
107
+ ${sanitize(data.label)}
108
+ </button>`)
109
+ .join('')}
110
+ </nav>`
111
+ : '';
112
+ const panelsHtml = hasPanels
113
+ ? entries
114
+ .map((_entry, i) => html `<div
115
+ ${hasTabs ? `role="tabpanel" aria-labelledby="mppx-tab-${i}"` : ''}
116
+ id="mppx-panel-${i}"
117
+ ${i !== 0 ? 'hidden' : ''}
118
+ >
119
+ <div id="${ids.root}-${i}" aria-label="Payment form"></div>
120
+ </div>`)
121
+ .join('')
122
+ : html `<div id="${ids.root}" aria-label="Payment form"></div>`;
123
+ const contentScripts = hasTabs
124
+ ? entries
125
+ .map((entry) => entry.content.replace('<script>', `<script ${attrs.challengeId}="${sanitize(entry.challenge.id)}">`))
126
+ .join('\n')
127
+ : entries[0].content;
128
+ return html `<!doctype html>
129
+ <html lang="en">
130
+ <head>
131
+ <meta charset="UTF-8" />
132
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
133
+ <meta name="robots" content="noindex" />
134
+ <meta name="color-scheme" content="${theme.colorScheme}" />
135
+ <title>${text.title}</title>
136
+ ${preflight} ${favicon(theme, firstChallenge.realm)} ${font(theme)} ${style(theme)}
137
+ ${hasTabs ? tabStyle() : ''}
138
+ </head>
139
+ <body>
140
+ <main>
141
+ <header class="${classNames.header}">
142
+ ${logo(theme)}
143
+ <span>${text.paymentRequired}</span>
144
+ </header>
145
+ <section class="${classNames.summary}" aria-label="Payment summary">
146
+ <h1 class="${classNames.summaryAmount}">${sanitize(formattedAmount)}</h1>
147
+ ${firstChallenge.description
148
+ ? `<p class="${classNames.summaryDescription}">${sanitize(firstChallenge.description)}</p>`
149
+ : ''}
150
+ ${firstChallenge.expires
151
+ ? `<p class="${classNames.summaryExpires}">${text.expires} <time datetime="${new Date(firstChallenge.expires).toISOString()}">${new Date(firstChallenge.expires).toLocaleString()}</time></p>`
152
+ : ''}
153
+ </section>
154
+ ${tabListHtml} ${panelsHtml}
155
+ <script
156
+ id="${ids.data}"
157
+ type="application/json"
158
+ ${entries.length > 1 ? ` ${attrs.remaining}="${entries.length}"` : ''}
159
+ >
160
+ ${Json.stringify(dataMap).replace(/</g, '\\u003c')}
161
+ </script>
162
+ ${contentScripts} ${hasTabs ? tabScript : ''}
163
+ </main>
164
+ </body>
165
+ </html>`;
166
+ }
167
+ function style(theme) {
63
168
  const colors = Object.fromEntries(colorTokens.map((name) => [name, resolveColor(theme[name], defaultTheme[name])]));
64
169
  const lightVars = colorTokens
65
170
  .map((token) => `${vars[token].name}: ${colors[token][0]};`)
@@ -75,7 +180,6 @@ export function style(theme) {
75
180
  : '';
76
181
  return html `
77
182
  <style>
78
- ${reset}
79
183
  :root {
80
184
  color-scheme: ${theme.colorScheme};
81
185
  ${vars.fontFamily.name}: ${theme.fontFamily};
@@ -126,12 +230,12 @@ export function style(theme) {
126
230
  .${classNames.logo} {
127
231
  max-height: 1.75rem;
128
232
  }
129
- .${classNames.logoColorScheme('dark')} {
233
+ .${logoColorScheme('dark')} {
130
234
  @media (prefers-color-scheme: light) {
131
235
  display: none;
132
236
  }
133
237
  }
134
- .${classNames.logoColorScheme('light')} {
238
+ .${logoColorScheme('light')} {
135
239
  @media (prefers-color-scheme: dark) {
136
240
  display: none;
137
241
  }
@@ -166,20 +270,7 @@ export function style(theme) {
166
270
  </style>
167
271
  `;
168
272
  }
169
- export function showError(message) {
170
- const existing = document.getElementById(errorId);
171
- if (existing) {
172
- existing.textContent = message;
173
- return;
174
- }
175
- const el = document.createElement('p');
176
- el.id = errorId;
177
- el.className = classNames.error;
178
- el.role = 'alert';
179
- el.textContent = message;
180
- document.getElementById(rootId)?.after(el);
181
- }
182
- export function favicon(theme, realm) {
273
+ function favicon(theme, realm) {
183
274
  if (typeof theme.favicon === 'string')
184
275
  return html `<link rel="icon" href="${sanitize(theme.favicon)}" />`;
185
276
  if (typeof theme.favicon === 'object') {
@@ -206,7 +297,17 @@ export function favicon(theme, realm) {
206
297
  return '';
207
298
  }
208
299
  }
209
- export function logo(value) {
300
+ function font(theme) {
301
+ if (!theme.fontUrl)
302
+ return '';
303
+ return html `<link
304
+ rel="preconnect"
305
+ href="${sanitize(new URL(theme.fontUrl).origin)}"
306
+ crossorigin
307
+ />
308
+ <link rel="stylesheet" href="${sanitize(theme.fontUrl)}" />`;
309
+ }
310
+ function logo(value) {
210
311
  if (typeof value.logo === 'undefined')
211
312
  return '';
212
313
  if (typeof value.logo === 'string')
@@ -214,57 +315,185 @@ export function logo(value) {
214
315
  return Object.entries(value.logo)
215
316
  .map((entry) => html `<img
216
317
  alt=""
217
- class="${classNames.logo} ${classNames.logoColorScheme(entry[0])}"
318
+ class="${classNames.logo} ${logoColorScheme(entry[0])}"
218
319
  src="${sanitize(entry[1])}"
219
320
  />`)
220
321
  .join('\n');
221
322
  }
222
- export const defaultText = {
223
- expires: 'Expires at',
224
- pay: 'Pay',
225
- paymentRequired: 'Payment Required',
226
- title: 'Payment Required',
227
- };
228
- export const defaultTheme = {
229
- colorScheme: 'light dark',
230
- fontFamily: 'system-ui, -apple-system, sans-serif',
231
- fontSizeBase: '16px',
232
- radius: '6px',
233
- spacingUnit: '2px',
234
- accent: ['#171717', '#ededed'],
235
- background: ['#ffffff', '#0a0a0a'],
236
- border: ['#e5e5e5', '#2e2e2e'],
237
- foreground: ['#0a0a0a', '#ededed'],
238
- muted: ['#666666', '#a1a1a1'],
239
- negative: ['#e5484d', '#e5484d'],
240
- positive: ['#30a46c', '#30a46c'],
241
- surface: ['#f5f5f5', '#1a1a1a'],
242
- };
243
- export const colorTokens = [
244
- 'accent',
245
- 'negative',
246
- 'positive',
247
- 'background',
248
- 'foreground',
249
- 'muted',
250
- 'surface',
251
- 'border',
252
- ];
253
- export function resolveColor(value, fallback) {
254
- if (!value)
255
- return fallback;
256
- if (typeof value === 'string')
257
- return [value, value];
258
- return value;
323
+ function tabStyle() {
324
+ return html `
325
+ <style>
326
+ .${classNames.tabList} {
327
+ display: flex;
328
+ gap: calc(${vars.spacingUnit} * 2);
329
+ border-bottom: 1px solid ${vars.border};
330
+ }
331
+ .${classNames.tab} {
332
+ background: none !important;
333
+ border: none !important;
334
+ border-bottom: 1px solid transparent !important;
335
+ border-radius: 0 !important;
336
+ color: ${vars.muted} !important;
337
+ cursor: pointer;
338
+ font-size: 0.875rem;
339
+ font-weight: 500;
340
+ margin-bottom: -1px !important;
341
+ padding: calc(${vars.spacingUnit} * 2) calc(${vars.spacingUnit} * 4) !important;
342
+ text-transform: capitalize;
343
+ width: auto !important;
344
+ }
345
+ .${classNames.tab}[aria-selected='true'] {
346
+ border-bottom-color: ${vars.foreground} !important;
347
+ color: ${vars.foreground} !important;
348
+ }
349
+ .${classNames.tab}:hover:not([aria-selected='true']) {
350
+ color: ${vars.foreground} !important;
351
+ }
352
+ .${classNames.tabPanel}[hidden] {
353
+ display: none;
354
+ }
355
+ </style>
356
+ `;
357
+ }
358
+ // Slimmed down Tailwind preflight
359
+ // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css
360
+ const preflight = html `<style>
361
+ *,
362
+ ::after,
363
+ ::before,
364
+ ::backdrop,
365
+ ::file-selector-button {
366
+ box-sizing: border-box;
367
+ margin: 0;
368
+ padding: 0;
369
+ border: 0 solid;
370
+ border-color: ${vars.border};
371
+ }
372
+ html,
373
+ :host {
374
+ line-height: 1.5;
375
+ -webkit-text-size-adjust: 100%;
376
+ tab-size: 4;
377
+ -webkit-tap-highlight-color: transparent;
378
+ }
379
+ h1,
380
+ h2,
381
+ h3,
382
+ h4,
383
+ h5,
384
+ h6 {
385
+ font-size: inherit;
386
+ font-weight: inherit;
387
+ }
388
+ a {
389
+ color: inherit;
390
+ -webkit-text-decoration: inherit;
391
+ text-decoration: inherit;
392
+ }
393
+ b,
394
+ strong {
395
+ font-weight: bolder;
396
+ }
397
+ code,
398
+ kbd,
399
+ samp,
400
+ pre {
401
+ font-family:
402
+ ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
403
+ monospace;
404
+ font-size: 1em;
405
+ }
406
+ small {
407
+ font-size: 80%;
408
+ }
409
+ ol,
410
+ ul,
411
+ menu {
412
+ list-style: none;
413
+ }
414
+ img,
415
+ svg,
416
+ video,
417
+ canvas,
418
+ audio,
419
+ iframe,
420
+ embed,
421
+ object {
422
+ display: block;
423
+ vertical-align: middle;
424
+ }
425
+ img,
426
+ video {
427
+ max-width: 100%;
428
+ height: auto;
429
+ }
430
+ button,
431
+ input,
432
+ select,
433
+ optgroup,
434
+ textarea,
435
+ ::file-selector-button {
436
+ font: inherit;
437
+ font-feature-settings: inherit;
438
+ font-variation-settings: inherit;
439
+ letter-spacing: inherit;
440
+ color: inherit;
441
+ border-radius: 0;
442
+ background-color: transparent;
443
+ opacity: 1;
444
+ }
445
+ ::file-selector-button {
446
+ margin-inline-end: 4px;
447
+ }
448
+ ::placeholder {
449
+ opacity: 1;
450
+ }
451
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
452
+ ::placeholder {
453
+ color: color-mix(in oklab, currentcolor 50%, transparent);
454
+ }
455
+ }
456
+ textarea {
457
+ resize: vertical;
458
+ }
459
+ ::-webkit-search-decoration {
460
+ -webkit-appearance: none;
461
+ }
462
+ :-moz-ui-invalid {
463
+ box-shadow: none;
464
+ }
465
+ button,
466
+ input:where([type='button'], [type='reset'], [type='submit']),
467
+ ::file-selector-button {
468
+ appearance: button;
469
+ }
470
+ ::-webkit-inner-spin-button,
471
+ ::-webkit-outer-spin-button {
472
+ height: auto;
473
+ }
474
+ [hidden]:where(:not([hidden='until-found'])) {
475
+ display: none !important;
476
+ }
477
+ </style>`;
478
+ function sanitize(str) {
479
+ return str
480
+ .replace(/&/g, '&amp;')
481
+ .replace(/</g, '&lt;')
482
+ .replace(/>/g, '&gt;')
483
+ .replace(/"/g, '&quot;')
484
+ .replace(/'/g, '&#39;');
485
+ }
486
+ function sanitizeRecord(record) {
487
+ return Object.fromEntries(Object.entries(record).map(([key, value]) => [key, sanitize(value)]));
259
488
  }
260
489
  export function mergeDefined(defaults, value) {
261
- if (value === undefined)
490
+ if (value === undefined || value === null)
262
491
  return defaults;
263
492
  if (!isPlainObject(defaults) || !isPlainObject(value))
264
493
  return (value ?? defaults);
265
494
  const result = { ...defaults };
266
495
  for (const [key, nextValue] of Object.entries(value)) {
267
- if (nextValue === undefined)
496
+ if (nextValue === undefined || nextValue === null || nextValue === '')
268
497
  continue;
269
498
  const currentValue = result[key];
270
499
  result[key] =
@@ -277,27 +506,4 @@ export function mergeDefined(defaults, value) {
277
506
  function isPlainObject(value) {
278
507
  return typeof value === 'object' && value !== null && !Array.isArray(value);
279
508
  }
280
- // Slimmed down Tailwind preflight
281
- // https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/preflight.css
282
- const reset = html `
283
- *, ::after, ::before, ::backdrop, ::file-selector-button { box-sizing: border-box; margin: 0;
284
- padding: 0; border: 0 solid; border-color: ${vars.border}; } html, :host { line-height: 1.5;
285
- -webkit-text-size-adjust: 100%; tab-size: 4; -webkit-tap-highlight-color: transparent; } h1, h2,
286
- h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit;
287
- -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; }
288
- code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
289
- 'Liberation Mono', 'Courier New', monospace; font-size: 1em; } small { font-size: 80%; } ol, ul,
290
- menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block;
291
- vertical-align: middle; } img, video { max-width: 100%; height: auto; } button, input, select,
292
- optgroup, textarea, ::file-selector-button { font: inherit; font-feature-settings: inherit;
293
- font-variation-settings: inherit; letter-spacing: inherit; color: inherit; border-radius: 0;
294
- background-color: transparent; opacity: 1; } ::file-selector-button { margin-inline-end: 4px; }
295
- ::placeholder { opacity: 1; } @supports (not (-webkit-appearance: -apple-pay-button)) or
296
- (contain-intrinsic-size: 1px) { ::placeholder { color: color-mix(in oklab, currentcolor 50%,
297
- transparent); } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance:
298
- none; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type='button'],
299
- [type='reset'], [type='submit']), ::file-selector-button { appearance: button; }
300
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
301
- [hidden]:where(:not([hidden='until-found'])) { display: none !important; }
302
- `;
303
509
  //# sourceMappingURL=config.js.map