@remoteoss/remote-flows 0.0.0 → 0.0.2
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.
- package/README.md +455 -51
- package/dist/{chunk-J2GLSJLO.js → chunk-CSSMQNJ3.js} +2 -2
- package/dist/{chunk-J2GLSJLO.js.map → chunk-CSSMQNJ3.js.map} +1 -1
- package/dist/{chunk-XSTVWDTD.js → chunk-GINTASQ6.js} +2 -2
- package/dist/{chunk-ZII4VJ3N.js → chunk-MTKRHEZC.js} +2 -2
- package/dist/{chunk-BRK6MUQS.js → chunk-P7TWGOSX.js} +2 -2
- package/dist/{chunk-7ZBXCVHC.js → chunk-UXRLSYGD.js} +2 -2
- package/dist/chunk-W6M5VZ2B.js +2 -0
- package/dist/chunk-W6M5VZ2B.js.map +1 -0
- package/dist/flows/CostCalculator/CostCalculator.js +1 -1
- package/dist/flows/CostCalculator/Disclaimer/Disclaimer.js +1 -1
- package/dist/flows/CostCalculator/Disclaimer/index.js +1 -1
- package/dist/flows/CostCalculator/Results/CostCalculatorBenefitsBreakdown.js +1 -1
- package/dist/flows/CostCalculator/Results/CostCalculatorContributionsBreakdown.js +1 -1
- package/dist/flows/CostCalculator/Results/CostCalculatorResults.js +1 -1
- package/dist/flows/CostCalculator/index.js +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +3 -3
- package/dist/chunk-V7QTPQZS.js +0 -2
- package/dist/chunk-V7QTPQZS.js.map +0 -1
- /package/dist/{chunk-XSTVWDTD.js.map → chunk-GINTASQ6.js.map} +0 -0
- /package/dist/{chunk-ZII4VJ3N.js.map → chunk-MTKRHEZC.js.map} +0 -0
- /package/dist/{chunk-BRK6MUQS.js.map → chunk-P7TWGOSX.js.map} +0 -0
- /package/dist/{chunk-7ZBXCVHC.js.map → chunk-UXRLSYGD.js.map} +0 -0
package/README.md
CHANGED
|
@@ -1,13 +1,31 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @remoteoss/remote-flows
|
|
2
2
|
|
|
3
3
|
## Overview
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
##
|
|
8
|
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
5
|
+
Welcome to the `@remoteoss/remote-flows` package, a React library that provides components for Remote's embbeded solution.
|
|
6
|
+
|
|
7
|
+
## Table of Contents
|
|
8
|
+
|
|
9
|
+
- [Overview](#overview)
|
|
10
|
+
- [Installation](#installation)
|
|
11
|
+
- [Getting Started](#getting-started)
|
|
12
|
+
- [Basic Setup](#basic-setup)
|
|
13
|
+
- [Simple Cost calculator](#simple-cost-calculator)
|
|
14
|
+
- [Cost Calculator with default values and a custom disclaimer label](#cost-calculator-with-default-values-and-a-custom-disclaimer-label)
|
|
15
|
+
- [Cost calculator with results](#cost-calculator-with-results)
|
|
16
|
+
- [Cost calculator with button that exports results to pdf](#cost-calculator-with-button-that-exports-results-to-pdf)
|
|
17
|
+
- [Components API](#components-api)
|
|
18
|
+
- [RemoteFlows](#remoteflows)
|
|
19
|
+
- [CostCalculator](#costcalculator)
|
|
20
|
+
- [CostCalculatorResults](#costcalculatorresults)
|
|
21
|
+
- [Authentication](#authentication)
|
|
22
|
+
- [Styling Options](#styling-options)
|
|
23
|
+
- [Using Default Styles](#using-default-styles)
|
|
24
|
+
- [Theme Customization](#theme-customization)
|
|
25
|
+
- [CSS Overrides](#css-overrides)
|
|
26
|
+
- [Advanced Usage](#advanced-usage)
|
|
27
|
+
- [Custom Implementation](#custom-implementation)
|
|
28
|
+
- [Example](#example)
|
|
11
29
|
|
|
12
30
|
## Installation
|
|
13
31
|
|
|
@@ -15,79 +33,465 @@ This project provides a client SDK for interacting with the Remote API, by provi
|
|
|
15
33
|
npm install @remoteoss/remote-flows
|
|
16
34
|
```
|
|
17
35
|
|
|
18
|
-
##
|
|
19
|
-
|
|
20
|
-
### Development Mode
|
|
36
|
+
## Getting Started
|
|
21
37
|
|
|
22
|
-
|
|
38
|
+
After installation, import the main CSS file in your application:
|
|
23
39
|
|
|
24
|
-
```
|
|
25
|
-
|
|
40
|
+
```css
|
|
41
|
+
@import '@remoteoss/remote-flows/index.css';
|
|
26
42
|
```
|
|
27
43
|
|
|
28
|
-
|
|
44
|
+
### Basic Setup
|
|
45
|
+
|
|
46
|
+
#### Simple Cost calculator
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { CostCalculator, RemoteFlows } from '@remoteoss/remote-flows';
|
|
50
|
+
import './App.css';
|
|
51
|
+
|
|
52
|
+
const estimationOptions = {
|
|
53
|
+
title: 'Estimate for a new company',
|
|
54
|
+
includeBenefits: true,
|
|
55
|
+
includeCostBreakdowns: true,
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
function CostCalculatorForm() {
|
|
59
|
+
return (
|
|
60
|
+
<CostCalculator
|
|
61
|
+
estimationOptions={estimationOptions}
|
|
62
|
+
defaultValues={{
|
|
63
|
+
countryRegionSlug: 'a1aea868-0e0a-4cd7-9b73-9941d92e5bbe',
|
|
64
|
+
currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
|
|
65
|
+
salary: '50000',
|
|
66
|
+
}}
|
|
67
|
+
params={{
|
|
68
|
+
disclaimer: {
|
|
69
|
+
label: 'Remote Disclaimer',
|
|
70
|
+
},
|
|
71
|
+
}}
|
|
72
|
+
onSuccess={(response) => console.log({ response })}
|
|
73
|
+
/>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
export function BasicCostCalculator() {
|
|
78
|
+
const fetchToken = () => {
|
|
79
|
+
return fetch('/api/token')
|
|
80
|
+
.then((res) => res.json())
|
|
81
|
+
.then((data) => ({
|
|
82
|
+
accessToken: data.access_token,
|
|
83
|
+
expiresIn: data.expires_in,
|
|
84
|
+
}))
|
|
85
|
+
.catch((error) => {
|
|
86
|
+
console.error({ error });
|
|
87
|
+
throw error;
|
|
88
|
+
});
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
return (
|
|
92
|
+
<RemoteFlows auth={() => fetchToken()}>
|
|
93
|
+
<CostCalculatorForm />
|
|
94
|
+
</RemoteFlows>
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
29
98
|
|
|
30
|
-
|
|
99
|
+
#### Cost Calculator with default values and a custom disclaimer label
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
import { CostCalculator, RemoteFlows } from '@remoteoss/remote-flows';
|
|
103
|
+
import './App.css';
|
|
104
|
+
|
|
105
|
+
const estimationOptions = {
|
|
106
|
+
title: 'Estimate for a new company',
|
|
107
|
+
includeBenefits: true,
|
|
108
|
+
includeCostBreakdowns: true,
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
function CostCalculatorForm() {
|
|
112
|
+
return (
|
|
113
|
+
<CostCalculator
|
|
114
|
+
defaultValues={{
|
|
115
|
+
countryRegionSlug: 'a1aea868-0e0a-4cd7-9b73-9941d92e5bbe',
|
|
116
|
+
currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
|
|
117
|
+
salary: '50000',
|
|
118
|
+
}}
|
|
119
|
+
params={{
|
|
120
|
+
disclaimer: {
|
|
121
|
+
label: 'Remote Disclaimer',
|
|
122
|
+
},
|
|
123
|
+
}}
|
|
124
|
+
estimationOptions={estimationOptions}
|
|
125
|
+
onSuccess={(response) => console.log({ response })}
|
|
126
|
+
/>
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
export function BasicCostCalculatorWithDefaultValues() {
|
|
131
|
+
const fetchToken = () => {
|
|
132
|
+
return fetch('/api/token')
|
|
133
|
+
.then((res) => res.json())
|
|
134
|
+
.then((data) => ({
|
|
135
|
+
accessToken: data.access_token,
|
|
136
|
+
expiresIn: data.expires_in,
|
|
137
|
+
}))
|
|
138
|
+
.catch((error) => {
|
|
139
|
+
console.error({ error });
|
|
140
|
+
throw error;
|
|
141
|
+
});
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
return (
|
|
145
|
+
<RemoteFlows auth={() => fetchToken()}>
|
|
146
|
+
<CostCalculatorForm />
|
|
147
|
+
</RemoteFlows>
|
|
148
|
+
);
|
|
149
|
+
}
|
|
150
|
+
```
|
|
31
151
|
|
|
32
|
-
|
|
152
|
+
#### Cost calculator with results
|
|
153
|
+
|
|
154
|
+
```tsx
|
|
155
|
+
import type { CostCalculatorEstimateResponse } from '@remoteoss/remote-flows';
|
|
156
|
+
import {
|
|
157
|
+
CostCalculator,
|
|
158
|
+
CostCalculatorResults,
|
|
159
|
+
RemoteFlows,
|
|
160
|
+
} from '@remoteoss/remote-flows';
|
|
161
|
+
import { useState } from 'react';
|
|
162
|
+
import './App.css';
|
|
163
|
+
|
|
164
|
+
function CostCalculatorForm() {
|
|
165
|
+
const [estimations, setEstimations] =
|
|
166
|
+
useState<CostCalculatorEstimateResponse | null>(null);
|
|
167
|
+
|
|
168
|
+
const estimationOptions = {
|
|
169
|
+
title: 'Estimate for a new company',
|
|
170
|
+
includeBenefits: true,
|
|
171
|
+
includeCostBreakdowns: true,
|
|
172
|
+
};
|
|
173
|
+
|
|
174
|
+
return (
|
|
175
|
+
<>
|
|
176
|
+
<CostCalculator
|
|
177
|
+
estimationOptions={estimationOptions}
|
|
178
|
+
defaultValues={{
|
|
179
|
+
countryRegionSlug: 'bf098ccf-7457-4556-b2a8-80c48f67cca4',
|
|
180
|
+
currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
|
|
181
|
+
salary: '50000',
|
|
182
|
+
}}
|
|
183
|
+
params={{
|
|
184
|
+
disclaimer: {
|
|
185
|
+
label: 'Remote Disclaimer',
|
|
186
|
+
},
|
|
187
|
+
}}
|
|
188
|
+
onSuccess={(response) => {
|
|
189
|
+
setEstimations(response);
|
|
190
|
+
}}
|
|
191
|
+
/>
|
|
192
|
+
{estimations && (
|
|
193
|
+
<CostCalculatorResults employmentData={estimations.data} />
|
|
194
|
+
)}
|
|
195
|
+
</>
|
|
196
|
+
);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
export function CostCalculatoWithResults() {
|
|
200
|
+
const fetchToken = () => {
|
|
201
|
+
return fetch('/api/token')
|
|
202
|
+
.then((res) => res.json())
|
|
203
|
+
.then((data) => ({
|
|
204
|
+
accessToken: data.access_token,
|
|
205
|
+
expiresIn: data.expires_in,
|
|
206
|
+
}))
|
|
207
|
+
.catch((error) => {
|
|
208
|
+
console.error({ error });
|
|
209
|
+
throw error;
|
|
210
|
+
});
|
|
211
|
+
};
|
|
212
|
+
|
|
213
|
+
return (
|
|
214
|
+
<RemoteFlows auth={() => fetchToken()}>
|
|
215
|
+
<CostCalculatorForm />
|
|
216
|
+
</RemoteFlows>
|
|
217
|
+
);
|
|
218
|
+
}
|
|
219
|
+
```
|
|
33
220
|
|
|
34
|
-
|
|
35
|
-
|
|
221
|
+
#### Cost calculator with button that exports results to pdf
|
|
222
|
+
|
|
223
|
+
```tsx
|
|
224
|
+
import type {
|
|
225
|
+
CostCalculatorEstimateResponse,
|
|
226
|
+
CostCalculatorEstimationFormValues,
|
|
227
|
+
} from '@remoteoss/remote-flows';
|
|
228
|
+
import {
|
|
229
|
+
buildCostCalculatorEstimationPayload,
|
|
230
|
+
CostCalculator,
|
|
231
|
+
RemoteFlows,
|
|
232
|
+
useCostCalculatorEstimationPdf,
|
|
233
|
+
} from '@remoteoss/remote-flows';
|
|
234
|
+
import { useState } from 'react';
|
|
235
|
+
import './App.css';
|
|
236
|
+
|
|
237
|
+
function CostCalculatorForm() {
|
|
238
|
+
const [estimations, setEstimations] =
|
|
239
|
+
useState<CostCalculatorEstimateResponse | null>(null);
|
|
240
|
+
const [payload, setPayload] =
|
|
241
|
+
useState<CostCalculatorEstimationFormValues | null>(null);
|
|
242
|
+
|
|
243
|
+
const estimationOptions = {
|
|
244
|
+
title: 'Estimate for a new company',
|
|
245
|
+
includeBenefits: true,
|
|
246
|
+
includeCostBreakdowns: true,
|
|
247
|
+
};
|
|
248
|
+
|
|
249
|
+
const exportPdfMutation = useCostCalculatorEstimationPdf();
|
|
250
|
+
|
|
251
|
+
const handleExportPdf = () => {
|
|
252
|
+
if (payload) {
|
|
253
|
+
exportPdfMutation.mutate(buildCostCalculatorEstimationPayload(payload), {
|
|
254
|
+
onSuccess: (response) => {
|
|
255
|
+
if (response?.data?.data?.content !== undefined) {
|
|
256
|
+
const a = document.createElement('a');
|
|
257
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
258
|
+
a.href = response.data.data.content as any;
|
|
259
|
+
a.download = 'estimation.pdf';
|
|
260
|
+
document.body.appendChild(a);
|
|
261
|
+
a.click();
|
|
262
|
+
document.body.removeChild(a);
|
|
263
|
+
}
|
|
264
|
+
},
|
|
265
|
+
onError: (error) => {
|
|
266
|
+
console.error({ error });
|
|
267
|
+
},
|
|
268
|
+
});
|
|
269
|
+
}
|
|
270
|
+
};
|
|
271
|
+
|
|
272
|
+
return (
|
|
273
|
+
<>
|
|
274
|
+
<CostCalculator
|
|
275
|
+
estimationOptions={estimationOptions}
|
|
276
|
+
defaultValues={{
|
|
277
|
+
countryRegionSlug: 'bf098ccf-7457-4556-b2a8-80c48f67cca4',
|
|
278
|
+
currencySlug: 'eur-acf7d6b5-654a-449f-873f-aca61a280eba',
|
|
279
|
+
salary: '50000',
|
|
280
|
+
}}
|
|
281
|
+
params={{
|
|
282
|
+
disclaimer: {
|
|
283
|
+
label: 'Remote Disclaimer',
|
|
284
|
+
},
|
|
285
|
+
}}
|
|
286
|
+
onSubmit={(payload) => setPayload(payload)}
|
|
287
|
+
onSuccess={(response) => {
|
|
288
|
+
setEstimations(response);
|
|
289
|
+
}}
|
|
290
|
+
/>
|
|
291
|
+
{estimations && <button onClick={handleExportPdf}>Export as PDF</button>}
|
|
292
|
+
</>
|
|
293
|
+
);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
export function CostCalculatorWithExportPdf() {
|
|
297
|
+
const fetchToken = () => {
|
|
298
|
+
return fetch('/api/token')
|
|
299
|
+
.then((res) => res.json())
|
|
300
|
+
.then((data) => ({
|
|
301
|
+
accessToken: data.access_token,
|
|
302
|
+
expiresIn: data.expires_in,
|
|
303
|
+
}))
|
|
304
|
+
.catch((error) => {
|
|
305
|
+
console.error({ error });
|
|
306
|
+
throw error;
|
|
307
|
+
});
|
|
308
|
+
};
|
|
309
|
+
|
|
310
|
+
return (
|
|
311
|
+
<RemoteFlows auth={() => fetchToken()}>
|
|
312
|
+
<CostCalculatorForm />
|
|
313
|
+
</RemoteFlows>
|
|
314
|
+
);
|
|
315
|
+
}
|
|
36
316
|
```
|
|
37
317
|
|
|
38
|
-
|
|
318
|
+
## Components API
|
|
39
319
|
|
|
40
|
-
|
|
320
|
+
### RemoteFlows
|
|
41
321
|
|
|
42
|
-
|
|
43
|
-
npm link remote-flows
|
|
44
|
-
```
|
|
322
|
+
The `RemoteFlows` component serves as a provider for authentication and theming.
|
|
45
323
|
|
|
46
|
-
|
|
324
|
+
| Prop | Type | Required | Description |
|
|
325
|
+
| --------------- | ----------------------------------------------------------- | -------- | ------------------------------------------------------------------ |
|
|
326
|
+
| `auth` | `() => Promise<{ accessToken: string, expiresIn: number }>` | Yes | Function to fetch authentication token |
|
|
327
|
+
| `isTestingProp` | `boolean` | No | When `true`, connects to sandbox environment instead of production |
|
|
328
|
+
| `theme` | `ThemeOptions` | No | Custom theme configuration |
|
|
47
329
|
|
|
48
|
-
|
|
330
|
+
### CostCalculator
|
|
49
331
|
|
|
50
|
-
|
|
332
|
+
The `CostCalculator` component renders a form for calculating employment costs.
|
|
51
333
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
334
|
+
| Prop | Type | Required | Description |
|
|
335
|
+
| ------------------ | ---------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------- |
|
|
336
|
+
| `estimationParams` | object | No | Customization for the estimation response (see table below) |
|
|
337
|
+
| `defaultValues` | object | No | Predefined form values (see table below) |
|
|
338
|
+
| `params` | `{ disclaimer?: { label?: string } }` | No | Additional configuration parameters |
|
|
339
|
+
| `onSubmit` | `(payload: CostCalculatorEstimateParams) => void` | No | Callback with the form payload sent to Remote API. Runs before submitting the form to Remote |
|
|
340
|
+
| `onSuccess` | `(response: CostCalculatorEstimateResponse) => void` | No | Callback with the successful estimation data |
|
|
341
|
+
| `onError` | `(error: Error) => void` | No | Error handling callback |
|
|
55
342
|
|
|
56
|
-
|
|
57
|
-
npm unlink
|
|
343
|
+
#### estimationParams Properties
|
|
58
344
|
|
|
59
|
-
|
|
345
|
+
| Property | Type | Description |
|
|
346
|
+
| ----------------------- | --------- | ------------------------------------------------------------ |
|
|
347
|
+
| `title` | `string` | Custom title for the estimation report |
|
|
348
|
+
| `includeBenefits` | `boolean` | If `true`, includes benefits information in the response |
|
|
349
|
+
| `includeCostBreakdowns` | `boolean` | If `true`, includes detailed cost breakdowns in the response |
|
|
60
350
|
|
|
61
|
-
|
|
62
|
-
npm run build
|
|
63
|
-
```
|
|
351
|
+
#### defaultValues Properties
|
|
64
352
|
|
|
65
|
-
|
|
353
|
+
| Property | Type | Description |
|
|
354
|
+
| ------------------- | -------- | --------------------------- |
|
|
355
|
+
| `countryRegionSlug` | `string` | Pre-selected country/region |
|
|
356
|
+
| `currencySlug` | `string` | Pre-selected currency |
|
|
357
|
+
| `salary` | `string` | Pre-filled salary amount |
|
|
66
358
|
|
|
67
|
-
|
|
359
|
+
### CostCalculatorResults
|
|
68
360
|
|
|
69
|
-
|
|
70
|
-
npm run openapi-ts
|
|
71
|
-
```
|
|
361
|
+
A component to display cost calculation results.
|
|
72
362
|
|
|
73
|
-
|
|
363
|
+
| Prop | Type | Required | Description |
|
|
364
|
+
| ---------------- | ------------------------------------ | -------- | ---------------------------- |
|
|
365
|
+
| `employmentData` | `CostCalculatorEstimateResponseData` | Yes | The estimation response data |
|
|
74
366
|
|
|
75
|
-
##
|
|
367
|
+
## Authentication
|
|
76
368
|
|
|
77
|
-
|
|
369
|
+
You need to implement a server endpoint to securely handle authentication with Remote. This prevents exposing client credentials in your frontend code.
|
|
78
370
|
|
|
79
|
-
|
|
80
|
-
|
|
371
|
+
Your server should:
|
|
372
|
+
|
|
373
|
+
1. Store your client credentials securely
|
|
374
|
+
2. Implement an endpoint that exchanges these credentials for an access token
|
|
375
|
+
3. Return `access_token` and `expires_in` to the frontend application
|
|
376
|
+
|
|
377
|
+
For a complete implementation, check our [example server implementation](https://github.com/remoteoss/remote-flows/blob/main/example/server.js).
|
|
378
|
+
|
|
379
|
+
### API Gateway Endpoints
|
|
380
|
+
|
|
381
|
+
- **Development/Testing**: `https://gateway.partners.remote-sandbox.com`
|
|
382
|
+
- **Production**: `https://gateway.remote.com/`
|
|
383
|
+
|
|
384
|
+
## Styling Options
|
|
385
|
+
|
|
386
|
+
### Using Default Styles
|
|
387
|
+
|
|
388
|
+
Import the CSS file in your application:
|
|
389
|
+
|
|
390
|
+
```css
|
|
391
|
+
@import '@remoteoss/remote-flows/index.css';
|
|
81
392
|
```
|
|
82
393
|
|
|
83
|
-
|
|
394
|
+
### Theme Customization
|
|
395
|
+
|
|
396
|
+
```tsx
|
|
397
|
+
<RemoteFlows
|
|
398
|
+
theme={{
|
|
399
|
+
spacing: '0.25rem',
|
|
400
|
+
borderRadius: '0px',
|
|
401
|
+
colors: {
|
|
402
|
+
primaryBackground: '#ffffff',
|
|
403
|
+
primaryForeground: '#364452',
|
|
404
|
+
accentBackground: '#e3e9ef',
|
|
405
|
+
accentForeground: '#0f1419',
|
|
406
|
+
danger: '#d92020',
|
|
407
|
+
borderInput: '#cccccc',
|
|
408
|
+
},
|
|
409
|
+
}}
|
|
410
|
+
>
|
|
411
|
+
{/* Your components */}
|
|
412
|
+
</RemoteFlows>
|
|
413
|
+
```
|
|
84
414
|
|
|
85
|
-
|
|
415
|
+
| **Token** | **Description** |
|
|
416
|
+
| -------------------------- | ----------------------------------------------------------------------------------------------------- |
|
|
417
|
+
| `colors.borderInput` | Border color for input fields. |
|
|
418
|
+
| `colors.primaryBackground` | Background used for the popover options |
|
|
419
|
+
| `colors.primaryForeground` | Color text for the input and options |
|
|
420
|
+
| `colors.accentBackground` | Used in the option selected and hover. |
|
|
421
|
+
| `colors.accentForeground` | Color text for the select options |
|
|
422
|
+
| `colors.danger` | Red color used for danger states. |
|
|
423
|
+
| `spacing` | Consistent scale for whitespace (margin, padding, gap). |
|
|
424
|
+
| `borderRadius` | The main border radius value (default: 0.625rem). This is the foundation for all other radius values. |
|
|
425
|
+
| `font.fontSizeBase` | The main font size value (default: 1rem). Controls the base text size of the component. |
|
|
426
|
+
|
|
427
|
+
### Custom CSS
|
|
428
|
+
|
|
429
|
+
All components expose CSS classes with the prefix `RemoteFlows__` that you can target for custom styling. This approach gives you fine-grained control over specific elements without having to rebuild the components.
|
|
430
|
+
|
|
431
|
+
For example, let's say you want to render the currency field next to the salary field. You can achieve this with the following CSS:
|
|
432
|
+
|
|
433
|
+
```css
|
|
434
|
+
.RemoteFlows__CostCalculatorForm {
|
|
435
|
+
display: grid;
|
|
436
|
+
grid-template-columns: 1fr 1fr;
|
|
437
|
+
gap: 1rem;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.RemoteFlows__SelectField__Item__country {
|
|
441
|
+
grid-column: span 2;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.RemoteFlows__CostCalculatorForm .RemoteFlows__Button {
|
|
445
|
+
grid-column: span 2;
|
|
446
|
+
}
|
|
447
|
+
```
|
|
86
448
|
|
|
87
|
-
|
|
88
|
-
|
|
449
|
+
## Advanced Usage
|
|
450
|
+
|
|
451
|
+
### Custom Implementation
|
|
452
|
+
|
|
453
|
+
`remote-flows` provides opinionated components but your application might require more extensive customization than what theme tokens allow. For these cases, we expose several hooks that give you complete control over rendering while handling the complex business logic for you.
|
|
454
|
+
|
|
455
|
+
Here's how to create a fully custom implementation using our hooks:
|
|
456
|
+
|
|
457
|
+
```tsx
|
|
458
|
+
function CustomCostCalculator() {
|
|
459
|
+
const {
|
|
460
|
+
onSubmit: submitCostCalculator,
|
|
461
|
+
fields, // fields is a list of field objects returned by json-schema-form. Read more at https://github.com/remoteoss/json-schema-form
|
|
462
|
+
validationSchema,
|
|
463
|
+
} = useCostCalculator();
|
|
464
|
+
|
|
465
|
+
// Build your custom form using the provided fields and validation schema
|
|
466
|
+
|
|
467
|
+
function handleSubmit(data) {
|
|
468
|
+
submitCostCalculator(data); // submitCostCalculator validates form fields before posting to Remote API
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
return (
|
|
472
|
+
<Form onSubmit={handleSubmit}>{/* Your custom form implementation */}</Form>
|
|
473
|
+
);
|
|
474
|
+
}
|
|
475
|
+
```
|
|
476
|
+
|
|
477
|
+
```tsx
|
|
478
|
+
function CustomCostCalculator() {
|
|
479
|
+
const {
|
|
480
|
+
onSubmit: submitCostCalculator,
|
|
481
|
+
fields, // fields is a list of field objects returned by json-schema-form. Read more at https://github.com/remoteoss/json-schema-form
|
|
482
|
+
validationSchema,
|
|
483
|
+
} = useCostCalculator();
|
|
484
|
+
|
|
485
|
+
// Build your custom form using the provided fields and validation schema
|
|
486
|
+
|
|
487
|
+
return (
|
|
488
|
+
<form onSubmit={handleSubmit((data) => submitCostCalculator(data))}>
|
|
489
|
+
{/* Your custom form implementation */}
|
|
490
|
+
</form>
|
|
491
|
+
);
|
|
492
|
+
}
|
|
89
493
|
```
|
|
90
494
|
|
|
91
|
-
|
|
495
|
+
## Example
|
|
92
496
|
|
|
93
|
-
|
|
497
|
+
For a complete implementation example, refer to our [example application](https://github.com/remoteoss/remote-flows/blob/main/example/src/App.tsx).
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as e}from"./chunk-ATKR5HCM.js";import{a as t}from"./chunk-AYDF3IFZ.js";import
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a as e}from"./chunk-ATKR5HCM.js";import{a as t}from"./chunk-AYDF3IFZ.js";import{Slot as d}from"@radix-ui/react-slot";import{cva as u}from"class-variance-authority";import*as o from"react";var c=u("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 aria-invalid:border-destructive",{variants:{variant:{default:"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",destructive:"bg-destructive text-white shadow-xs hover:bg-destructive/90",outline:"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-link-button-primary underline-offset-4 hover:underline button-link"},size:{default:"h-9 px-4 py-7 has-[>svg]:px-3",sm:"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",lg:"h-10 rounded-md px-6 has-[>svg]:px-4",icon:"size-9",link:"px-0"}},defaultVariants:{variant:"default",size:"default"}});function h({className:r,variant:n,size:a,asChild:s=!1,...i}){return o.createElement(s?d:"button",{"data-slot":"button",className:e(c({variant:n,size:a,className:r}),"RemoteFlows__Button"),...i})}t(h,"Button");export{h as a};
|
|
2
|
+
//# sourceMappingURL=chunk-CSSMQNJ3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ui/button.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../src/components/ui/button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/src/lib/utils';\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default:\n 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',\n destructive:\n 'bg-destructive text-white shadow-xs hover:bg-destructive/90',\n outline:\n 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-link-button-primary underline-offset-4 hover:underline button-link',\n },\n size: {\n default: 'h-9 px-4 py-7 has-[>svg]:px-3',\n sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',\n lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n icon: 'size-9',\n link: 'px-0',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n },\n);\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n ...props\n}: React.ComponentProps<'button'> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean;\n }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"button\"\n className={cn(\n buttonVariants({ variant, size, className }),\n 'RemoteFlows__Button',\n )}\n {...props}\n />\n );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":"gFAAA,OAAS,QAAAA,MAAY,uBACrB,OAAS,OAAAC,MAA8B,2BACvC,UAAYC,MAAW,QAIvB,IAAMC,EAAiBC,EACrB,yVACA,CACE,SAAU,CACR,QAAS,CACP,QACE,mEACF,YACE,8DACF,QACE,2FACF,UACE,yEACF,MAAO,+CACP,KAAM,yEACR,EACA,KAAM,CACJ,QAAS,gCACT,GAAI,gDACJ,GAAI,uCACJ,KAAM,SACN,KAAM,MACR,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,SACR,CACF,CACF,EAEA,SAASC,EAAO,CACd,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EAAU,GACV,GAAGC,CACL,EAGK,CAGH,OACE,gBAHWD,EAAUE,EAAO,SAG3B,CACC,YAAU,SACV,UAAWC,EACTT,EAAe,CAAE,QAAAI,EAAS,KAAAC,EAAM,UAAAF,CAAU,CAAC,EAC3C,qBACF,EACC,GAAGI,EACN,CAEJ,CAtBSG,EAAAR,EAAA","names":["Slot","cva","React","buttonVariants","cva","Button","className","variant","size","asChild","props","Slot","cn","__name"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a,b as m,c as p,d}from"./chunk-Z5SEXEAZ.js";import{a as l}from"./chunk-DE6ICD4X.js";import{a as i}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a,b as m,c as p,d}from"./chunk-Z5SEXEAZ.js";import{a as l}from"./chunk-DE6ICD4X.js";import{a as i}from"./chunk-CSSMQNJ3.js";import{b as s}from"./chunk-ATKR5HCM.js";import{a as t}from"./chunk-AYDF3IFZ.js";import{Info as g}from"lucide-react";import o from"react";function y({contributionsTotal:u,currency:e,contributionsBreakdown:n}){return o.createElement("div",null,o.createElement("div",{className:"flex justify-between items-center mb-2"},o.createElement("h3",{className:"font-medium text-primary-foreground"},"Employer Contributions"),o.createElement("span",{className:"font-semibold text-lg"},s(u,e))),n?o.createElement(o.Fragment,null,o.createElement(l,{className:"mb-3"}),o.createElement("div",{className:"space-y-3 pl-2"},n.map((r,f)=>o.createElement("div",{key:f,className:"flex justify-between items-start text-sm"},o.createElement("div",{className:"flex items-start gap-2"},o.createElement("span",null,r.name),o.createElement(a,null,o.createElement(m,null,o.createElement(p,{asChild:!0},o.createElement(i,{variant:"ghost",size:"icon",className:"h-4 w-4 p-0"},o.createElement(g,{className:"h-3 w-3 text-gray-400"}),o.createElement("span",{className:"sr-only"},"Info"))),o.createElement(d,null,o.createElement("p",{className:"max-w-xs"},r.description),r.zendesk_article_url&&o.createElement("a",{href:r.zendesk_article_url,target:"_blank",rel:"noopener noreferrer",className:"text-blue-500 hover:underline block mt-1 text-xs"},"Learn more"))))),o.createElement("span",null,s(r.amount,e)))))):null)}t(y,"CostCalculatorContributionsBreakdown");export{y as a};
|
|
2
|
+
//# sourceMappingURL=chunk-GINTASQ6.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a,b as m,c as p,d as l}from"./chunk-Z5SEXEAZ.js";import{a as e}from"./chunk-DE6ICD4X.js";import{a as n}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a,b as m,c as p,d as l}from"./chunk-Z5SEXEAZ.js";import{a as e}from"./chunk-DE6ICD4X.js";import{a as n}from"./chunk-CSSMQNJ3.js";import{b as i}from"./chunk-ATKR5HCM.js";import{a as t}from"./chunk-AYDF3IFZ.js";import{Info as v}from"lucide-react";import o from"react";function w({benefitsTotal:d,benefitsBreakdown:f,currency:r}){return o.createElement("div",null,o.createElement("div",{className:"flex justify-between items-center mb-2"},o.createElement("h3",{className:"font-medium text-primary-foreground-800"},"Benefits"),o.createElement("span",{className:"font-semibold text-lg"},i(d,r))),o.createElement(e,{className:"mb-3"}),o.createElement("div",{className:"space-y-3 pl-2"},f.map((s,u)=>o.createElement("div",{key:u,className:"flex justify-between items-start text-sm"},o.createElement("div",{className:"flex items-start gap-2"},o.createElement("span",null,s.name),o.createElement(a,null,o.createElement(m,null,o.createElement(p,{asChild:!0},o.createElement(n,{variant:"ghost",size:"icon",className:"h-4 w-4 p-0"},o.createElement(v,{className:"h-3 w-3 text-gray-400"}),o.createElement("span",{className:"sr-only"},"Info"))),o.createElement(l,null,o.createElement("p",{className:"max-w-xs"},s.description))))),o.createElement("span",null,i(s.amount,r))))))}t(w,"CostCalculatorBenefitsBreakdown");export{w as a};
|
|
2
|
+
//# sourceMappingURL=chunk-MTKRHEZC.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as x}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a as x}from"./chunk-MTKRHEZC.js";import{a as T}from"./chunk-GINTASQ6.js";import{a as P}from"./chunk-Q2ZB5MOF.js";import{a as y,b as v,c as h,d as _,e as w}from"./chunk-JEULWBZA.js";import{a as k}from"./chunk-BIWKEH5R.js";import{a as n}from"./chunk-ATKR5HCM.js";import{a as s}from"./chunk-AYDF3IFZ.js";import{Euro as H}from"lucide-react";import t,{lazy as G,useState as A}from"react";import*as N from"react";import{Slot as z}from"@radix-ui/react-slot";import{cva as F}from"class-variance-authority";var E=F("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",{variants:{variant:{default:"border-transparent bg-badge text-badge-foreground rounded-full [a&]:hover:bg-primary/90",secondary:"border-transparent bg-secondary text-secondary-foreground rounded-full [a&]:hover:bg-secondary/90",destructive:"border-transparent bg-destructive text-white rounded-full [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",outline:"text-foreground rounded-full [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"}},defaultVariants:{variant:"default"}});function B({className:a,variant:o,asChild:r=!1,...u}){return N.createElement(r?z:"span",{"data-slot":"badge",className:n(E({variant:o}),a),...u})}s(B,"Badge");import*as m from"react";import*as i from"@radix-ui/react-tabs";function S({className:a,...o}){return m.createElement(i.Root,{"data-slot":"tabs",className:n("flex flex-col gap-2",a),...o})}s(S,"Tabs");function V({className:a,...o}){return m.createElement(i.List,{"data-slot":"tabs-list",className:n("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1",a),...o})}s(V,"TabsList");function b({className:a,...o}){return m.createElement(i.Trigger,{"data-slot":"tabs-trigger",className:n("data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",a),...o})}s(b,"TabsTrigger");var M=G(()=>import("./flows/CostCalculator/Results/CostCalculatorResultsChart.js"));function st({employmentData:a,options:o}){let[r,u]=A("monthly"),l=a.employments?.[0];if(!l)return null;let e=l.employer_currency_costs,c=e.currency.symbol,f=r==="monthly"?e.monthly_gross_salary:e.annual_gross_salary,p=r==="monthly"?e.monthly_benefits_total:e.annual_benefits_total,g=r==="monthly"?e.monthly_contributions_total:e.annual_contributions_total,D=r==="monthly"?e.monthly_total:e.annual_total,d=r==="monthly"?e.monthly_benefits_breakdown:e.annual_benefits_breakdown,L=r==="monthly"?e.monthly_contributions_breakdown:e.annual_contributions_breakdown,C=[{name:"Gross Salary",value:f,color:o?.chartColors?.grossSalary??"#3b82f6"},{name:"Contributions",value:g,color:o?.chartColors?.contributions??"#f59e0b"}];return d&&C.push({name:"Benefits",value:p??0,color:o?.chartColors?.benefits??"#10b981"}),t.createElement(t.Fragment,null,t.createElement("div",{className:"flex flex-col md:flex-row gap-4 md:items-center justify-between mb-6 RemoteFlows__CostCalculatorResults"},t.createElement("div",{className:"RemoteFlows__CostCalculatorResults__Header"},t.createElement("h2",{className:"text-xl font-semibold flex items-center gap-2"},t.createElement("span",{className:"flex items-center gap-1"},t.createElement(H,{className:"h-5 w-5 text-gray-600"}),o?.title??"Cost Calculator"),t.createElement(B,{className:"ml-2"},l.country.name)),t.createElement("p",{className:"text-primary-foreground font-medium mt-1"},o?.description??`Total cost of employment in ${l.country.name}`)),t.createElement(S,{value:r,onValueChange:j=>u(j),className:"w-full md:w-auto RemoteFlows__CostCalculatorResults__Tabs"},t.createElement(V,{className:"grid w-full md:w-[200px] grid-cols-2"},t.createElement(b,{value:"monthly"},"Monthly"),t.createElement(b,{value:"annual"},"Annual")))),t.createElement("div",{className:n("grid grid-cols-1 gap-6",o?.showChart?"md:grid-cols-3":"","RemoteFlows__CostCalculatorResults_CostBreakdown")},t.createElement(y,{className:"md:col-span-2 rounded-lg"},t.createElement(v,{className:"pb-2"},t.createElement(h,null,"Cost Breakdown"),t.createElement(_,null,"Detailed breakdown of all employer costs")),t.createElement(w,null,t.createElement("div",{className:"space-y-6"},t.createElement(P,{grossSalary:f,currency:c}),d?t.createElement(x,{benefitsBreakdown:d,benefitsTotal:p,currency:c}):null,t.createElement(T,{contributionsBreakdown:L,contributionsTotal:g,currency:c}),t.createElement(k,{totalCost:D,currency:c})))),o?.showChart&&t.createElement(M,{chartData:C,currency:c})))}s(st,"CostCalculatorResults");export{st as a};
|
|
2
|
+
//# sourceMappingURL=chunk-P7TWGOSX.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as p}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a as p}from"./chunk-CSSMQNJ3.js";import{g}from"./chunk-7EZH5DCX.js";import{a as s}from"./chunk-ATKR5HCM.js";import{a as m}from"./chunk-AYDF3IFZ.js";import o from"react";import*as a from"react";import{Drawer as l}from"vaul";var d=m(({shouldScaleBackground:e=!0,...r})=>a.createElement(l.Root,{shouldScaleBackground:e,...r}),"Drawer");d.displayName="Drawer";var y=l.Trigger,h=l.Portal,P=l.Close,N=a.forwardRef(({className:e,...r},i)=>a.createElement(l.Overlay,{ref:i,className:s("fixed inset-0 z-50 bg-black/80",e),...r}));N.displayName=l.Overlay.displayName;var f=a.forwardRef(({className:e,children:r,...i},c)=>a.createElement(h,null,a.createElement(N,null),a.createElement(l.Content,{ref:c,className:s("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",e),...i},a.createElement("div",{className:"mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"}),r)));f.displayName="DrawerContent";var D=m(({className:e,...r})=>a.createElement("div",{className:s("grid gap-1.5 p-4 text-center sm:text-left",e),...r}),"DrawerHeader");D.displayName="DrawerHeader";var S=m(({className:e,...r})=>a.createElement("div",{className:s("mt-auto flex flex-col gap-2 p-4",e),...r}),"DrawerFooter");S.displayName="DrawerFooter";var w=a.forwardRef(({className:e,...r},i)=>a.createElement(l.Title,{ref:i,className:s("text-lg font-semibold leading-none tracking-tight",e),...r}));w.displayName=l.Title.displayName;var u=a.forwardRef(({className:e,...r},i)=>a.createElement(l.Description,{ref:i,className:s("text-sm text-muted-foreground",e),...r}));u.displayName=l.Description.displayName;import*as n from"react";import*as t from"@radix-ui/react-scroll-area";var v=n.forwardRef(({className:e,children:r,...i},c)=>n.createElement(t.Root,{ref:c,className:s("relative overflow-hidden",e),...i},n.createElement(t.Viewport,{className:"h-full w-full rounded-[inherit]"},r),n.createElement(b,null),n.createElement(t.Corner,null)));v.displayName=t.Root.displayName;var b=n.forwardRef(({className:e,orientation:r="vertical",...i},c)=>n.createElement(t.ScrollAreaScrollbar,{ref:c,orientation:r,className:s("flex touch-none select-none transition-colors",r==="vertical"&&"h-full w-2.5 border-l border-l-transparent p-[1px]",r==="horizontal"&&"h-2.5 flex-col border-t border-t-transparent p-[1px]",e),...i},n.createElement(t.ScrollAreaThumb,{className:"relative flex-1 rounded-full bg-border"})));b.displayName=t.ScrollAreaScrollbar.displayName;import{X as x}from"lucide-react";var O=m(({label:e="Disclaimer"})=>{let{data:r}=g();return o.createElement(d,null,o.createElement(y,{asChild:!0},o.createElement(p,{variant:"link",size:"link"},e)),o.createElement(f,null,o.createElement(D,null,o.createElement(P,{className:"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"},o.createElement(x,{className:"h-4 w-4"}),o.createElement("span",{className:"sr-only"},"Close")),o.createElement(w,null,r?.data.title),o.createElement(u,null,"For more details read our"," ",o.createElement(p,{variant:"link",size:"link",asChild:!0},o.createElement("a",{href:r?.data.html_url,target:"_blank",rel:"noopener noreferrer"},"Disclaimer")))),o.createElement(v,{className:"px-4 pb-4 overflow-y-auto max-h-[calc(80vh-120px)] cost-calculator-disclaimer-drawer-scroll-area"},o.createElement("div",{className:"cost-calculator-disclaimer-drawer-body",dangerouslySetInnerHTML:{__html:r?.data.body??""}}))))},"Disclaimer");export{O as a};
|
|
2
|
+
//# sourceMappingURL=chunk-UXRLSYGD.js.map
|