flintn-checkout 0.0.6 → 0.0.8

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 (10) hide show
  1. package/README.md +50 -5
  2. package/dist/index.d.mts +14 -2
  3. package/dist/index.d.ts +14 -2
  4. package/dist/index.js +14 -2
  5. package/dist/index.mjs +13 -2
  6. package/dist/react.d.mts +14 -2
  7. package/dist/react.d.ts +14 -2
  8. package/dist/react.js +14 -2
  9. package/dist/react.mjs +13 -2
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -32,7 +32,7 @@ function Checkout() {
32
32
 
33
33
  return (
34
34
  <div style={{ display: 'flex', justifyContent: 'center' }}>
35
- <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
35
+ <div ref={containerRef} style={{ width: '100%', maxWidth: 440 }} />
36
36
  </div>
37
37
  );
38
38
  }
@@ -76,7 +76,7 @@ payment.unmount();
76
76
  <title>FlintN Checkout</title>
77
77
  </head>
78
78
  <body>
79
- <div id="payment-container" style="max-width: 440px; height: 600px; margin: 0 auto;"></div>
79
+ <div id="payment-container" style="max-width: 440px; margin: 0 auto;"></div>
80
80
 
81
81
  <script type="module">
82
82
  import { FlintNPayment } from 'flintn-checkout';
@@ -96,6 +96,16 @@ payment.unmount();
96
96
  </html>
97
97
  ```
98
98
 
99
+ ## Container Sizing
100
+
101
+ The widget auto-sizes to fit its content — you only need to set a width on the container. Height is managed by the SDK and updates automatically as the form changes state (loading, express view, card form, success).
102
+
103
+ ```tsx
104
+ <div ref={containerRef} style={{ width: '100%', maxWidth: 440 }} />
105
+ ```
106
+
107
+ Do **not** set a fixed `height` on the container — it will leave empty space below the widget when content is shorter than your hardcoded value, and the iframe never scrolls internally.
108
+
99
109
  ## Configuration
100
110
 
101
111
  | Option | Type | Required | Default | Description |
@@ -150,8 +160,9 @@ interface PaymentError {
150
160
  ### FormFields
151
161
  ```typescript
152
162
  interface FormFields {
153
- isEmailVisible?: boolean;
154
- isCardholderNameRequired?: boolean;
163
+ isEmailVisible?: boolean; // Primer only
164
+ isCardholderNameRequired?: boolean; // Primer only
165
+ formVariant?: 'DEFAULT' | 'LIST';
155
166
  }
156
167
  ```
157
168
 
@@ -159,8 +170,10 @@ interface FormFields {
159
170
  ```typescript
160
171
  interface FormStyles {
161
172
  loaderColor?: string;
162
- inputBorderRadius?: string;
173
+ backgroundColor?: string;
163
174
  expressButtonsSpacing?: string;
175
+ inputBackgroundColor?: string;
176
+ inputBorderRadius?: string;
164
177
  inputBorderColor?: string;
165
178
  inputBorderHoverColor?: string;
166
179
  inputBorderFocusColor?: string;
@@ -170,9 +183,41 @@ interface FormStyles {
170
183
  buttonHoverColor?: string;
171
184
  buttonBorderRadius?: string;
172
185
  buttonText?: string;
186
+ cardButtonColor?: string;
187
+ cardButtonHoverColor?: string;
188
+ cardButtonText?: string;
173
189
  }
174
190
  ```
175
191
 
192
+ ### FormStyles Reference
193
+
194
+ | Property | Description |
195
+ |----------|-------------|
196
+ | `loaderColor` | Color of the loading spinner |
197
+ | `backgroundColor` | Background color of the checkout form |
198
+ | `expressButtonsSpacing` | Spacing between express payment buttons (Apple Pay, Google Pay, PayPal) |
199
+ | `inputBackgroundColor` | Background color of input fields |
200
+ | `inputBorderRadius` | Border radius of input fields |
201
+ | `inputBorderColor` | Default border color of input fields |
202
+ | `inputBorderHoverColor` | Border color of input fields on hover |
203
+ | `inputBorderFocusColor` | Border color of input fields on focus |
204
+ | `inputBorderErrorColor` | Border color of input fields in error state |
205
+ | `errorMessageColor` | Color of error messages below inputs |
206
+ | `buttonColor` | Background color of the submit button |
207
+ | `buttonHoverColor` | Background color of the submit button on hover/active |
208
+ | `buttonBorderRadius` | Border radius of the submit button |
209
+ | `buttonText` | Custom text for the submit button (overrides default "Pay $X.XX") |
210
+ | `cardButtonColor` | Background color of the "Credit or Debit Card" button (LIST variant only) |
211
+ | `cardButtonHoverColor` | Hover/active color of the card button (LIST variant only) |
212
+ | `cardButtonText` | Custom text for the card button (LIST variant only) |
213
+
214
+ ## Form Variants
215
+
216
+ The checkout form supports two layout variants via `formFields.formVariant`:
217
+
218
+ - **DEFAULT** — Express payment methods shown above the card form with dividers
219
+ - **LIST** — Express payment methods shown as a list with a "Credit or Debit Card" button; clicking it navigates to the card form with a back arrow
220
+
176
221
  ## Supported Payment Methods
177
222
 
178
223
  - 💳 Credit/Debit Cards (Visa, Mastercard, Amex, Discover)
package/dist/index.d.mts CHANGED
@@ -7,16 +7,25 @@ declare const EventType: {
7
7
  readonly PAYMENT_ERROR: "PAYMENT_ERROR";
8
8
  readonly PAYMENT_CANCELLED: "PAYMENT_CANCELLED";
9
9
  readonly REDIRECT: "REDIRECT";
10
+ readonly RESIZE: "RESIZE";
10
11
  };
11
12
  type TEventType = (typeof EventType)[keyof typeof EventType];
13
+ declare const CheckoutFormVariant: {
14
+ readonly DEFAULT: "DEFAULT";
15
+ readonly LIST: "LIST";
16
+ };
17
+ type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
12
18
  interface FormFields {
13
19
  isEmailVisible?: boolean;
14
20
  isCardholderNameRequired?: boolean;
21
+ formVariant?: TCheckoutFormVariant;
15
22
  }
16
23
  interface FormStyles {
17
24
  loaderColor?: string;
18
- inputBorderRadius?: string;
25
+ backgroundColor?: string;
19
26
  expressButtonsSpacing?: string;
27
+ inputBackgroundColor?: string;
28
+ inputBorderRadius?: string;
20
29
  inputBorderColor?: string;
21
30
  inputBorderHoverColor?: string;
22
31
  inputBorderFocusColor?: string;
@@ -26,6 +35,9 @@ interface FormStyles {
26
35
  buttonHoverColor?: string;
27
36
  buttonBorderRadius?: string;
28
37
  buttonText?: string;
38
+ cardButtonColor?: string;
39
+ cardButtonHoverColor?: string;
40
+ cardButtonText?: string;
29
41
  }
30
42
  interface FlintNConfig {
31
43
  clientSessionId: string;
@@ -81,4 +93,4 @@ declare const validateConfig: (config: {
81
93
  }) => void;
82
94
  declare const sanitizeToken: (token: string) => string;
83
95
 
84
- export { EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };
96
+ export { CheckoutFormVariant, EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TCheckoutFormVariant, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };
package/dist/index.d.ts CHANGED
@@ -7,16 +7,25 @@ declare const EventType: {
7
7
  readonly PAYMENT_ERROR: "PAYMENT_ERROR";
8
8
  readonly PAYMENT_CANCELLED: "PAYMENT_CANCELLED";
9
9
  readonly REDIRECT: "REDIRECT";
10
+ readonly RESIZE: "RESIZE";
10
11
  };
11
12
  type TEventType = (typeof EventType)[keyof typeof EventType];
13
+ declare const CheckoutFormVariant: {
14
+ readonly DEFAULT: "DEFAULT";
15
+ readonly LIST: "LIST";
16
+ };
17
+ type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
12
18
  interface FormFields {
13
19
  isEmailVisible?: boolean;
14
20
  isCardholderNameRequired?: boolean;
21
+ formVariant?: TCheckoutFormVariant;
15
22
  }
16
23
  interface FormStyles {
17
24
  loaderColor?: string;
18
- inputBorderRadius?: string;
25
+ backgroundColor?: string;
19
26
  expressButtonsSpacing?: string;
27
+ inputBackgroundColor?: string;
28
+ inputBorderRadius?: string;
20
29
  inputBorderColor?: string;
21
30
  inputBorderHoverColor?: string;
22
31
  inputBorderFocusColor?: string;
@@ -26,6 +35,9 @@ interface FormStyles {
26
35
  buttonHoverColor?: string;
27
36
  buttonBorderRadius?: string;
28
37
  buttonText?: string;
38
+ cardButtonColor?: string;
39
+ cardButtonHoverColor?: string;
40
+ cardButtonText?: string;
29
41
  }
30
42
  interface FlintNConfig {
31
43
  clientSessionId: string;
@@ -81,4 +93,4 @@ declare const validateConfig: (config: {
81
93
  }) => void;
82
94
  declare const sanitizeToken: (token: string) => string;
83
95
 
84
- export { EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };
96
+ export { CheckoutFormVariant, EventType, type FlintNConfig, FlintNPayment, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TCheckoutFormVariant, type TEventType, buildIframeSrc, createIframeElement, parseOrigin, sanitizeToken, validateConfig };
package/dist/index.js CHANGED
@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  // src/index.ts
21
21
  var index_exports = {};
22
22
  __export(index_exports, {
23
+ CheckoutFormVariant: () => CheckoutFormVariant,
23
24
  EventType: () => EventType,
24
25
  FlintNPayment: () => FlintNPayment,
25
26
  buildIframeSrc: () => buildIframeSrc,
@@ -39,7 +40,12 @@ var EventType = {
39
40
  PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
40
41
  PAYMENT_ERROR: "PAYMENT_ERROR",
41
42
  PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
42
- REDIRECT: "REDIRECT"
43
+ REDIRECT: "REDIRECT",
44
+ RESIZE: "RESIZE"
45
+ };
46
+ var CheckoutFormVariant = {
47
+ DEFAULT: "DEFAULT",
48
+ LIST: "LIST"
43
49
  };
44
50
 
45
51
  // src/utils.ts
@@ -64,7 +70,7 @@ var createIframeElement = (src) => {
64
70
  const iframe = document.createElement("iframe");
65
71
  iframe.src = src;
66
72
  iframe.title = "FlintN Checkout";
67
- iframe.style.cssText = "width: 100%; height: 100%; border: none;";
73
+ iframe.style.cssText = "width: 100%; height: 60px; border: none; display: block;";
68
74
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
69
75
  iframe.setAttribute("allow", "payment *; clipboard-write");
70
76
  return iframe;
@@ -141,6 +147,11 @@ var FlintNPayment = class {
141
147
  window.location.href = payload.url;
142
148
  }
143
149
  break;
150
+ case EventType.RESIZE:
151
+ if (this.iframe && typeof payload?.height === "number") {
152
+ this.iframe.style.height = `${payload.height}px`;
153
+ }
154
+ break;
144
155
  }
145
156
  }
146
157
  isValidRedirectUrl(url) {
@@ -190,6 +201,7 @@ var FlintNPayment = class {
190
201
  };
191
202
  // Annotate the CommonJS export names for ESM import in node:
192
203
  0 && (module.exports = {
204
+ CheckoutFormVariant,
193
205
  EventType,
194
206
  FlintNPayment,
195
207
  buildIframeSrc,
package/dist/index.mjs CHANGED
@@ -7,7 +7,12 @@ var EventType = {
7
7
  PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
8
8
  PAYMENT_ERROR: "PAYMENT_ERROR",
9
9
  PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
10
- REDIRECT: "REDIRECT"
10
+ REDIRECT: "REDIRECT",
11
+ RESIZE: "RESIZE"
12
+ };
13
+ var CheckoutFormVariant = {
14
+ DEFAULT: "DEFAULT",
15
+ LIST: "LIST"
11
16
  };
12
17
 
13
18
  // src/utils.ts
@@ -32,7 +37,7 @@ var createIframeElement = (src) => {
32
37
  const iframe = document.createElement("iframe");
33
38
  iframe.src = src;
34
39
  iframe.title = "FlintN Checkout";
35
- iframe.style.cssText = "width: 100%; height: 100%; border: none;";
40
+ iframe.style.cssText = "width: 100%; height: 60px; border: none; display: block;";
36
41
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
37
42
  iframe.setAttribute("allow", "payment *; clipboard-write");
38
43
  return iframe;
@@ -109,6 +114,11 @@ var FlintNPayment = class {
109
114
  window.location.href = payload.url;
110
115
  }
111
116
  break;
117
+ case EventType.RESIZE:
118
+ if (this.iframe && typeof payload?.height === "number") {
119
+ this.iframe.style.height = `${payload.height}px`;
120
+ }
121
+ break;
112
122
  }
113
123
  }
114
124
  isValidRedirectUrl(url) {
@@ -157,6 +167,7 @@ var FlintNPayment = class {
157
167
  }
158
168
  };
159
169
  export {
170
+ CheckoutFormVariant,
160
171
  EventType,
161
172
  FlintNPayment,
162
173
  buildIframeSrc,
package/dist/react.d.mts CHANGED
@@ -7,16 +7,25 @@ declare const EventType: {
7
7
  readonly PAYMENT_ERROR: "PAYMENT_ERROR";
8
8
  readonly PAYMENT_CANCELLED: "PAYMENT_CANCELLED";
9
9
  readonly REDIRECT: "REDIRECT";
10
+ readonly RESIZE: "RESIZE";
10
11
  };
11
12
  type TEventType = (typeof EventType)[keyof typeof EventType];
13
+ declare const CheckoutFormVariant: {
14
+ readonly DEFAULT: "DEFAULT";
15
+ readonly LIST: "LIST";
16
+ };
17
+ type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
12
18
  interface FormFields {
13
19
  isEmailVisible?: boolean;
14
20
  isCardholderNameRequired?: boolean;
21
+ formVariant?: TCheckoutFormVariant;
15
22
  }
16
23
  interface FormStyles {
17
24
  loaderColor?: string;
18
- inputBorderRadius?: string;
25
+ backgroundColor?: string;
19
26
  expressButtonsSpacing?: string;
27
+ inputBackgroundColor?: string;
28
+ inputBorderRadius?: string;
20
29
  inputBorderColor?: string;
21
30
  inputBorderHoverColor?: string;
22
31
  inputBorderFocusColor?: string;
@@ -26,6 +35,9 @@ interface FormStyles {
26
35
  buttonHoverColor?: string;
27
36
  buttonBorderRadius?: string;
28
37
  buttonText?: string;
38
+ cardButtonColor?: string;
39
+ cardButtonHoverColor?: string;
40
+ cardButtonText?: string;
29
41
  }
30
42
  interface FlintNConfig {
31
43
  clientSessionId: string;
@@ -75,4 +87,4 @@ interface UseFlintNPaymentReturn {
75
87
  }
76
88
  declare function useFlintNPayment(options: UseFlintNPaymentOptions): UseFlintNPaymentReturn;
77
89
 
78
- export { EventType, type FlintNConfig, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };
90
+ export { CheckoutFormVariant, EventType, type FlintNConfig, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TCheckoutFormVariant, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };
package/dist/react.d.ts CHANGED
@@ -7,16 +7,25 @@ declare const EventType: {
7
7
  readonly PAYMENT_ERROR: "PAYMENT_ERROR";
8
8
  readonly PAYMENT_CANCELLED: "PAYMENT_CANCELLED";
9
9
  readonly REDIRECT: "REDIRECT";
10
+ readonly RESIZE: "RESIZE";
10
11
  };
11
12
  type TEventType = (typeof EventType)[keyof typeof EventType];
13
+ declare const CheckoutFormVariant: {
14
+ readonly DEFAULT: "DEFAULT";
15
+ readonly LIST: "LIST";
16
+ };
17
+ type TCheckoutFormVariant = (typeof CheckoutFormVariant)[keyof typeof CheckoutFormVariant];
12
18
  interface FormFields {
13
19
  isEmailVisible?: boolean;
14
20
  isCardholderNameRequired?: boolean;
21
+ formVariant?: TCheckoutFormVariant;
15
22
  }
16
23
  interface FormStyles {
17
24
  loaderColor?: string;
18
- inputBorderRadius?: string;
25
+ backgroundColor?: string;
19
26
  expressButtonsSpacing?: string;
27
+ inputBackgroundColor?: string;
28
+ inputBorderRadius?: string;
20
29
  inputBorderColor?: string;
21
30
  inputBorderHoverColor?: string;
22
31
  inputBorderFocusColor?: string;
@@ -26,6 +35,9 @@ interface FormStyles {
26
35
  buttonHoverColor?: string;
27
36
  buttonBorderRadius?: string;
28
37
  buttonText?: string;
38
+ cardButtonColor?: string;
39
+ cardButtonHoverColor?: string;
40
+ cardButtonText?: string;
29
41
  }
30
42
  interface FlintNConfig {
31
43
  clientSessionId: string;
@@ -75,4 +87,4 @@ interface UseFlintNPaymentReturn {
75
87
  }
76
88
  declare function useFlintNPayment(options: UseFlintNPaymentOptions): UseFlintNPaymentReturn;
77
89
 
78
- export { EventType, type FlintNConfig, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };
90
+ export { CheckoutFormVariant, EventType, type FlintNConfig, type FlintNPaymentOptions, type FormFields, type FormStyles, type PaymentError, type PaymentResult, type TCheckoutFormVariant, type TEventType, type UseFlintNPaymentOptions, type UseFlintNPaymentReturn, useFlintNPayment };
package/dist/react.js CHANGED
@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  // src/react/index.ts
21
21
  var react_exports = {};
22
22
  __export(react_exports, {
23
+ CheckoutFormVariant: () => CheckoutFormVariant,
23
24
  EventType: () => EventType,
24
25
  useFlintNPayment: () => useFlintNPayment
25
26
  });
@@ -37,7 +38,12 @@ var EventType = {
37
38
  PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
38
39
  PAYMENT_ERROR: "PAYMENT_ERROR",
39
40
  PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
40
- REDIRECT: "REDIRECT"
41
+ REDIRECT: "REDIRECT",
42
+ RESIZE: "RESIZE"
43
+ };
44
+ var CheckoutFormVariant = {
45
+ DEFAULT: "DEFAULT",
46
+ LIST: "LIST"
41
47
  };
42
48
 
43
49
  // src/utils.ts
@@ -62,7 +68,7 @@ var createIframeElement = (src) => {
62
68
  const iframe = document.createElement("iframe");
63
69
  iframe.src = src;
64
70
  iframe.title = "FlintN Checkout";
65
- iframe.style.cssText = "width: 100%; height: 100%; border: none;";
71
+ iframe.style.cssText = "width: 100%; height: 60px; border: none; display: block;";
66
72
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
67
73
  iframe.setAttribute("allow", "payment *; clipboard-write");
68
74
  return iframe;
@@ -139,6 +145,11 @@ var FlintNPayment = class {
139
145
  window.location.href = payload.url;
140
146
  }
141
147
  break;
148
+ case EventType.RESIZE:
149
+ if (this.iframe && typeof payload?.height === "number") {
150
+ this.iframe.style.height = `${payload.height}px`;
151
+ }
152
+ break;
142
153
  }
143
154
  }
144
155
  isValidRedirectUrl(url) {
@@ -249,6 +260,7 @@ function useFlintNPayment(options) {
249
260
  }
250
261
  // Annotate the CommonJS export names for ESM import in node:
251
262
  0 && (module.exports = {
263
+ CheckoutFormVariant,
252
264
  EventType,
253
265
  useFlintNPayment
254
266
  });
package/dist/react.mjs CHANGED
@@ -10,7 +10,12 @@ var EventType = {
10
10
  PAYMENT_SUCCESS: "PAYMENT_SUCCESS",
11
11
  PAYMENT_ERROR: "PAYMENT_ERROR",
12
12
  PAYMENT_CANCELLED: "PAYMENT_CANCELLED",
13
- REDIRECT: "REDIRECT"
13
+ REDIRECT: "REDIRECT",
14
+ RESIZE: "RESIZE"
15
+ };
16
+ var CheckoutFormVariant = {
17
+ DEFAULT: "DEFAULT",
18
+ LIST: "LIST"
14
19
  };
15
20
 
16
21
  // src/utils.ts
@@ -35,7 +40,7 @@ var createIframeElement = (src) => {
35
40
  const iframe = document.createElement("iframe");
36
41
  iframe.src = src;
37
42
  iframe.title = "FlintN Checkout";
38
- iframe.style.cssText = "width: 100%; height: 100%; border: none;";
43
+ iframe.style.cssText = "width: 100%; height: 60px; border: none; display: block;";
39
44
  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-popups allow-same-origin");
40
45
  iframe.setAttribute("allow", "payment *; clipboard-write");
41
46
  return iframe;
@@ -112,6 +117,11 @@ var FlintNPayment = class {
112
117
  window.location.href = payload.url;
113
118
  }
114
119
  break;
120
+ case EventType.RESIZE:
121
+ if (this.iframe && typeof payload?.height === "number") {
122
+ this.iframe.style.height = `${payload.height}px`;
123
+ }
124
+ break;
115
125
  }
116
126
  }
117
127
  isValidRedirectUrl(url) {
@@ -221,6 +231,7 @@ function useFlintNPayment(options) {
221
231
  };
222
232
  }
223
233
  export {
234
+ CheckoutFormVariant,
224
235
  EventType,
225
236
  useFlintNPayment
226
237
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flintn-checkout",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "description": "FlintN Payment SDK — drop-in iframe checkout for card payments and wallets with localization and theming.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",