property-practice-ui 0.3.1 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/Button-DSs1nCzw.d.cts +22 -0
  3. package/dist/Button-DSs1nCzw.d.ts +22 -0
  4. package/dist/{FileButton-zPIyC3gQ.d.ts → FileButton-C5ihIfp2.d.ts} +1 -1
  5. package/dist/{FileButton-C_ITD9MA.d.cts → FileButton-zG8s-td_.d.cts} +1 -1
  6. package/dist/{Textarea-COarrHSa.d.ts → Textarea-BALpKeZd.d.ts} +1 -1
  7. package/dist/{Textarea-DP0HgLAn.d.cts → Textarea-BSdiNkgw.d.cts} +1 -1
  8. package/dist/atoms.d.cts +4 -3
  9. package/dist/atoms.d.ts +4 -3
  10. package/dist/colors-CSsV0X7j.d.cts +8 -0
  11. package/dist/colors-CSsV0X7j.d.ts +8 -0
  12. package/dist/index.cjs +249 -788
  13. package/dist/index.cjs.map +1 -1
  14. package/dist/index.d.cts +6 -124
  15. package/dist/index.d.ts +6 -124
  16. package/dist/index.js +251 -781
  17. package/dist/index.js.map +1 -1
  18. package/dist/molecules.d.cts +5 -3
  19. package/dist/molecules.d.ts +5 -3
  20. package/dist/organisms.cjs +2859 -0
  21. package/dist/organisms.cjs.map +1 -0
  22. package/dist/organisms.d.cts +127 -0
  23. package/dist/organisms.d.ts +127 -0
  24. package/dist/organisms.js +2845 -0
  25. package/dist/organisms.js.map +1 -0
  26. package/dist/{toast-CvZfLJrO.d.cts → tableListItem-irbfqxnQ.d.cts} +1 -3
  27. package/dist/{toast-CvZfLJrO.d.ts → tableListItem-irbfqxnQ.d.ts} +1 -3
  28. package/dist/toast-JPCqJveR.d.cts +3 -0
  29. package/dist/toast-JPCqJveR.d.ts +3 -0
  30. package/dist/types-CkS-Mlp9.d.cts +19 -0
  31. package/dist/types-CkS-Mlp9.d.ts +19 -0
  32. package/dist/types.d.cts +2 -1
  33. package/dist/types.d.ts +2 -1
  34. package/package.json +5 -5
  35. package/src/index.ts +0 -1
  36. package/src/molecules/ContentCard/ContentCard.tsx +1 -1
  37. package/src/molecules/SideNav/SideNav.tsx +1 -1
  38. package/src/organisms/FeatureCarousel/FeatureCarousel.tsx +3 -1
  39. package/src/organisms/Header/Header.tsx +27 -2
  40. package/tsup.config.ts +1 -0
  41. package/dist/Button-BT32YGe5.d.cts +0 -46
  42. package/dist/Button-BT32YGe5.d.ts +0 -46
@@ -0,0 +1,2859 @@
1
+ 'use strict';
2
+
3
+ var styled41 = require('styled-components');
4
+ var hi2 = require('react-icons/hi2');
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var fa = require('react-icons/fa');
7
+ var react = require('react');
8
+ var fa6 = require('react-icons/fa6');
9
+ require('react-icons/hi');
10
+ var tailwindVariants = require('tailwind-variants');
11
+
12
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
13
+
14
+ var styled41__default = /*#__PURE__*/_interopDefault(styled41);
15
+
16
+ // src/organisms/ContactForm/ContactForm.tsx
17
+
18
+ // src/tokens/colors.ts
19
+ var colors = {
20
+ background: {
21
+ primary: "#FFFFFF",
22
+ secondary: "#EEF1F5",
23
+ tertiary: "#1E4384",
24
+ subtle: "rgba(102, 153, 153, 1)",
25
+ blue: "#36b8e7",
26
+ brand: "#1D3C77",
27
+ success: "#00ab3fff",
28
+ error: "#F87171",
29
+ light: "#cacbcc"
30
+ },
31
+ border: {
32
+ primary: "#669999",
33
+ secondary: "rgba(30, 67, 132, 0.2)",
34
+ hover: "#cacbcc",
35
+ active: "#828282",
36
+ error: "#F87171",
37
+ focus: "#3B82F6",
38
+ brand: "#1D3C77",
39
+ light: "#f3f3f3"
40
+ },
41
+ text: {
42
+ brand: "#1D3C77",
43
+ primary: "#262626",
44
+ secondary: "#FFFFFF",
45
+ tertiary: "#669999",
46
+ subtle: "#919EB0",
47
+ light: "#b5b6b8ff",
48
+ error: "#F87171",
49
+ blue: "#3B82F6"
50
+ },
51
+ button: {
52
+ primary: "rgba(30, 67, 132, 0.2)",
53
+ hover: "rgba(30, 67, 132, 0.5)",
54
+ active: "rgba(30, 67, 132, 0.8)",
55
+ secondary: "rgba(30, 67, 132, 1)"
56
+ }
57
+ };
58
+ var variants = ["brand", "teal", "blue"];
59
+ var StyledContainer = styled41__default.default.button`
60
+ padding: 0.75rem;
61
+ ${(props) => props.as === "button" ? `
62
+ width: 2.5rem;
63
+ height: 2.5rem;
64
+ ` : ""}
65
+ flex-shrink: 0;
66
+ background-color: ${(props) => {
67
+ switch (props.variant) {
68
+ case "brand":
69
+ return colors.background.brand;
70
+ case "teal":
71
+ return colors.background.subtle;
72
+ case "blue":
73
+ return colors.background.blue;
74
+ default:
75
+ return colors.background.brand;
76
+ }
77
+ }};
78
+ transition: all 0.2s;
79
+ border: none;
80
+ cursor: pointer;
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+
85
+ &:hover svg {
86
+ transform: rotate(45deg);
87
+ }
88
+ `;
89
+ var StyledIcon = styled41__default.default(hi2.HiArrowUpRight)`
90
+ width: 1rem;
91
+ height: 1rem;
92
+ color: ${colors.text.secondary};
93
+ transition: transform 0.2s;
94
+ `;
95
+ var ArrowButton = ({
96
+ onClick,
97
+ asChild = false,
98
+ variant = "brand"
99
+ }) => {
100
+ return /* @__PURE__ */ jsxRuntime.jsx(
101
+ StyledContainer,
102
+ {
103
+ as: asChild ? "div" : "button",
104
+ onClick,
105
+ variant,
106
+ children: /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { "aria-hidden": true })
107
+ }
108
+ );
109
+ };
110
+ ArrowButton.variants = variants;
111
+
112
+ // src/tokens/radii.ts
113
+ var radii = {
114
+ sm: "4px",
115
+ md: "8px",
116
+ lg: "10px",
117
+ xl: "16px"
118
+ };
119
+
120
+ // src/tokens/spaces.ts
121
+ var spaces = {
122
+ 0: "0px",
123
+ 0.5: "2px",
124
+ 1: "4px",
125
+ 1.5: "6px",
126
+ 2: "8px",
127
+ 2.5: "10px",
128
+ 3: "12px",
129
+ 3.5: "14px",
130
+ 4: "16px",
131
+ 4.5: "18px",
132
+ 5: "20px",
133
+ 5.5: "22px",
134
+ 6: "24px",
135
+ 6.5: "28px",
136
+ 7: "34px",
137
+ 7.5: "38px",
138
+ 8: "44px",
139
+ 9: "56px",
140
+ 20: "150px"
141
+ };
142
+ var spin = styled41.keyframes`
143
+ to { transform: rotate(360deg); }
144
+ `;
145
+ var Ring = styled41__default.default.span`
146
+ display: inline-block;
147
+ width: ${({ size }) => typeof size === "number" ? `${size}px` : size};
148
+ height: ${({ size }) => typeof size === "number" ? `${size}px` : size};
149
+ border-radius: 50%;
150
+ box-sizing: border-box;
151
+
152
+ border: ${({ thickness }) => thickness}px solid ${colors.background.brand};
153
+
154
+ border-top-color: ${colors.border.active};
155
+
156
+ animation: ${spin} ${({ speed }) => speed} linear infinite;
157
+
158
+ @media (prefers-reduced-motion: reduce) {
159
+ animation: none;
160
+ border-top-color: ${colors.border.active};
161
+ }
162
+ `;
163
+ var Loader = ({
164
+ size = 32,
165
+ thickness = 3,
166
+ speed = "0.8s"
167
+ }) => {
168
+ return /* @__PURE__ */ jsxRuntime.jsx(
169
+ Ring,
170
+ {
171
+ role: "status",
172
+ "aria-live": "polite",
173
+ size,
174
+ thickness,
175
+ speed
176
+ }
177
+ );
178
+ };
179
+ var ButtonTypes = ["submit", "reset", "button"];
180
+ var StyledButton = styled41__default.default.button`
181
+ padding: ${spaces[2]} ${spaces[4]};
182
+ background-color: ${(props) => props.variant === "light" ? colors.button.primary : colors.button.secondary};
183
+ border-radius: ${radii.lg};
184
+ color: ${(props) => props.variant === "light" ? colors.text.primary : colors.text.secondary};
185
+ display: flex;
186
+ align-items: center;
187
+ justify-content: center;
188
+ gap: ${spaces[2]};
189
+ max-height: 34px;
190
+
191
+ &:hover {
192
+ background-color: ${colors.button.hover};
193
+ cursor: pointer;
194
+ }
195
+
196
+ &:active {
197
+ background-color: ${colors.button.active};
198
+ color: ${colors.text.secondary};
199
+ }
200
+
201
+ &:disabled {
202
+ background-color: ${colors.button.primary};
203
+ cursor: not-allowed;
204
+ color: ${colors.text.primary};
205
+ }
206
+ `;
207
+ var ButtonText = styled41__default.default.span`
208
+ font-size: 12px;
209
+ font-weight: 700;
210
+ `;
211
+ var Button = ({
212
+ onClick,
213
+ text,
214
+ type = "button",
215
+ disabled,
216
+ icon = void 0,
217
+ variant = "light",
218
+ isLoading
219
+ }) => {
220
+ return /* @__PURE__ */ jsxRuntime.jsx(
221
+ StyledButton,
222
+ {
223
+ type,
224
+ onClick,
225
+ disabled: disabled || isLoading,
226
+ variant,
227
+ children: !isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
228
+ typeof icon !== "undefined" && icon,
229
+ /* @__PURE__ */ jsxRuntime.jsx(ButtonText, { children: text })
230
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx(Loader, { size: "20px" })
231
+ }
232
+ );
233
+ };
234
+ Button.types = ButtonTypes;
235
+ var variants2 = ["primary", "secondary", "subtle", "error"];
236
+ var StyledDescription = styled41__default.default.p`
237
+ margin: 0;
238
+ font-size: 1rem;
239
+ line-height: 1.6;
240
+ color: ${(props) => {
241
+ switch (props.variant) {
242
+ case "primary":
243
+ return colors.text.primary;
244
+ case "secondary":
245
+ return colors.text.secondary;
246
+ case "subtle":
247
+ return colors.text.subtle;
248
+ case "error":
249
+ return colors.text.error;
250
+ default:
251
+ return colors.text.primary;
252
+ }
253
+ }};
254
+ `;
255
+ var Description = ({
256
+ children,
257
+ variant = "primary"
258
+ }) => {
259
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledDescription, { variant, children });
260
+ };
261
+ Description.variants = variants2;
262
+ var StyledButton2 = styled41__default.default.button`
263
+ display: flex;
264
+ align-items: center;
265
+ height: 2.5rem;
266
+ border: none;
267
+ cursor: pointer;
268
+ transition: opacity 0.2s;
269
+ padding: 0;
270
+ background: transparent;
271
+
272
+ &:hover {
273
+ opacity: 0.9;
274
+ }
275
+ `;
276
+ var ExtendedButton = ({
277
+ text,
278
+ onClick,
279
+ arrowVariant = "teal",
280
+ textBgVariant = "brand",
281
+ textVariant = "secondary"
282
+ }) => {
283
+ return /* @__PURE__ */ jsxRuntime.jsxs(StyledButton2, { onClick, children: [
284
+ /* @__PURE__ */ jsxRuntime.jsx(ArrowButton, { asChild: true, variant: arrowVariant }),
285
+ /* @__PURE__ */ jsxRuntime.jsx(TextButton, { asChild: true, text, bgVariant: textBgVariant, textVariant, uppercase: false })
286
+ ] });
287
+ };
288
+ styled41__default.default.div`
289
+ display: flex;
290
+ gap: 1rem;
291
+ background-color: transparent;
292
+ `;
293
+ styled41__default.default.div`
294
+ width: ${(props) => props.$size || "3rem"};
295
+ height: ${(props) => props.$size || "3rem"};
296
+ border-radius: 50%;
297
+ background-color: ${(props) => colors.background[props.thumbnailBgColor]};
298
+ display: flex;
299
+ align-items: center;
300
+ justify-content: center;
301
+ flex-shrink: 0;
302
+ `;
303
+ styled41__default.default.div`
304
+ display: flex;
305
+ flex-direction: column;
306
+ gap: 0.25rem;
307
+ `;
308
+ styled41__default.default.h3`
309
+ margin: 0;
310
+ font-size: 1rem;
311
+ font-weight: 600;
312
+ color: ${(props) => colors.text[props.titleColor]};
313
+ `;
314
+ styled41__default.default.p`
315
+ margin: 0;
316
+ font-size: 0.875rem;
317
+ line-height: 1.5;
318
+ color: ${(props) => colors.text[props.descriptionColor]};
319
+ `;
320
+
321
+ // src/tokens/breakpoints.ts
322
+ var breakpoints = {
323
+ sm: "640px",
324
+ lg: "1024px"};
325
+ styled41__default.default.div`
326
+ width: 100%;
327
+ display: flex;
328
+ justify-content: center;
329
+ `;
330
+ styled41__default.default.div`
331
+ display: flex;
332
+ flex-direction: column;
333
+ padding: ${spaces[4]};
334
+ width: 100%;
335
+ max-width: ${breakpoints.lg};
336
+ gap: ${(props) => spaces[props.space]};
337
+ `;
338
+ var variants3 = {
339
+ h1: {
340
+ fontSize: "24px",
341
+ fontWeight: 700,
342
+ letterSpacing: "0.6px",
343
+ lineHeight: "32px"
344
+ },
345
+ h2: {
346
+ fontSize: "20px",
347
+ fontWeight: 700,
348
+ lineHeight: "28px",
349
+ letterSpacing: "0.4px"
350
+ },
351
+ h3: {
352
+ fontSize: "18px",
353
+ fontWeight: 600,
354
+ lineHeight: "28px",
355
+ letterSpacing: "0.2px"
356
+ }
357
+ };
358
+ var StyledText = styled41__default.default.h1`
359
+ color: ${(props) => colors.text[props?.color]};
360
+ font-size: ${(props) => variants3[props.variant].fontSize};
361
+ font-weight: ${(props) => variants3[props.variant].fontWeight};
362
+ letter-spacing: ${(props) => variants3[props.variant].letterSpacing};
363
+ line-height: ${(props) => variants3[props.variant].lineHeight};
364
+ `;
365
+ var Header = ({
366
+ children,
367
+ variant = "h1",
368
+ color = "primary"
369
+ }) => {
370
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledText, { variant, color, children });
371
+ };
372
+ styled41__default.default.input`
373
+ display: block;
374
+ height: 100%;
375
+ width: 100%;
376
+ outline: none;
377
+ background-color: transparent;
378
+ color: ${colors.text.subtle};
379
+ font-weight: 600;
380
+ `;
381
+
382
+ // src/tokens/sizes.ts
383
+ var sizes = {
384
+ sm: "12px",
385
+ lg: "18px",
386
+ xl: "24px",
387
+ 0: "1px"};
388
+ var StyledLabel = styled41__default.default.span`
389
+ color: ${(props) => colors.text[props?.color]};
390
+ font-size: ${sizes.sm};
391
+ font-weight: ${(props) => props.fontWeight};
392
+ `;
393
+ styled41__default.default(StyledLabel)`
394
+ position: absolute;
395
+ left: 0;
396
+ bottom: 100%;
397
+ margin-left: ${spaces[3]};
398
+ margin-bottom: -${spaces[2.5]};
399
+ transform: translateY(-${spaces[0.5]});
400
+ background-color: ${colors.background.primary};
401
+ padding: 0 ${spaces[1]};
402
+ `;
403
+ var Label = ({
404
+ value,
405
+ color = "subtle",
406
+ fontWeight = "500"
407
+ }) => {
408
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { color, fontWeight, children: value });
409
+ };
410
+ styled41__default.default.span`
411
+ display: inline-block;
412
+ padding: 0.5rem 1rem;
413
+ border-radius: 9999px;
414
+ font-size: 0.75rem;
415
+ font-weight: 600;
416
+ background-color: ${(props) => {
417
+ if (props.$inverse) return "transparent";
418
+ switch (props.variant) {
419
+ case "primary":
420
+ return colors.text.brand;
421
+ case "secondary":
422
+ return colors.text.blue;
423
+ case "subtle":
424
+ return colors.text.subtle;
425
+ case "error":
426
+ return colors.text.error;
427
+ default:
428
+ return colors.text.brand;
429
+ }
430
+ }};
431
+ color: ${(props) => {
432
+ if (props.$inverse) {
433
+ switch (props.variant) {
434
+ case "primary":
435
+ return colors.text.brand;
436
+ case "secondary":
437
+ return colors.text.blue;
438
+ case "subtle":
439
+ return colors.text.subtle;
440
+ case "error":
441
+ return colors.text.error;
442
+ default:
443
+ return colors.text.brand;
444
+ }
445
+ }
446
+ return colors.text.secondary;
447
+ }};
448
+ border: ${(props) => {
449
+ if (!props.$inverse) return "none";
450
+ switch (props.variant) {
451
+ case "primary":
452
+ return `1px solid ${colors.text.brand}`;
453
+ case "secondary":
454
+ return `1px solid ${colors.text.blue}`;
455
+ case "subtle":
456
+ return `1px solid ${colors.text.subtle}`;
457
+ case "error":
458
+ return `1px solid ${colors.text.error}`;
459
+ default:
460
+ return `1px solid ${colors.text.brand}`;
461
+ }
462
+ }};
463
+ `;
464
+ styled41__default.default.div`
465
+ border-radius: ${radii.md};
466
+ padding: ${spaces["3"]};
467
+ display: flex;
468
+ flex: 1;
469
+ gap: ${spaces[2]};
470
+ background-color: white;
471
+ align-items: center;
472
+ justify-content: center;
473
+ border-width: 1px;
474
+ border-color: ${colors.border.active};
475
+ transition:
476
+ background-color 0.25s ease,
477
+ box-shadow 0.35s ease,
478
+ transform 0.25s ease;
479
+
480
+ &:hover {
481
+ background-color: rgba(255, 255, 255, 0.96);
482
+ border-color: ${colors.border.hover};
483
+ cursor: pointer;
484
+ }
485
+
486
+ &:active {
487
+ background-color: rgba(255, 255, 255, 0.92);
488
+ }
489
+ `;
490
+ styled41__default.default.span`
491
+ font-size: 16px;
492
+ font-weight: ${(props) => props.isSelected ? "800" : "400"};
493
+ text-align: center;
494
+ `;
495
+ var Container4 = styled41__default.default.div`
496
+ width: 100%;
497
+ `;
498
+ var Label3 = styled41__default.default.label`
499
+ display: block;
500
+ font-size: 13px;
501
+ font-weight: 600;
502
+ color: ${(props) => props.$color ? colors.text[props.$color] : colors.text.primary};
503
+ opacity: 0.8;
504
+ margin-bottom: 0.5rem;
505
+ `;
506
+ var StyledInput2 = styled41__default.default.input`
507
+ box-sizing: border-box;
508
+ height: 2.75rem;
509
+ width: 100%;
510
+ border-radius: 6px;
511
+ border: 1px solid ${(props) => props.$borderColor || "#d1d5db"};
512
+ background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.secondary};
513
+ padding: 0 0.75rem;
514
+ font-size: 15px;
515
+ color: ${(props) => props.$textColor ? colors.text[props.$textColor] : colors.text.primary};
516
+ outline: none;
517
+
518
+ &::placeholder {
519
+ color: ${(props) => props.$placeholderColor ? colors.text[props.$placeholderColor] : colors.text.secondary};
520
+ }
521
+
522
+ &:focus {
523
+ box-shadow: 0 0 0 2px ${(props) => {
524
+ const color = props.$focusRingColor ? colors.text[props.$focusRingColor] : colors.text.primary;
525
+ return `${color}33`;
526
+ }};
527
+ }
528
+ `;
529
+ var StyledTextArea = styled41__default.default.textarea`
530
+ box-sizing: border-box;
531
+ width: 100%;
532
+ border-radius: 6px;
533
+ border: 1px solid ${(props) => props.$borderColor || "#d1d5db"};
534
+ background-color: ${(props) => props.$bgColor ? colors.background[props.$bgColor] : colors.background?.secondary};
535
+ padding: 0.75rem;
536
+ font-size: 15px;
537
+ color: ${(props) => props.$textColor ? colors.text[props.$textColor] : colors.text.primary};
538
+ outline: none;
539
+
540
+ &::placeholder {
541
+ color: ${(props) => props.$placeholderColor ? colors.text[props.$placeholderColor] : colors.text.secondary};
542
+ }
543
+
544
+ &:focus {
545
+ box-shadow: 0 0 0 2px ${(props) => {
546
+ const color = props.$focusRingColor ? colors.text[props.$focusRingColor] : colors.text.primary;
547
+ return `${color}33`;
548
+ }};
549
+ }
550
+ `;
551
+ var SecondaryInput = ({
552
+ label,
553
+ isTextArea = false,
554
+ labelColor = "brand",
555
+ inputTextColor = "primary",
556
+ placeholderColor = "subtle",
557
+ backgroundColor = "secondary",
558
+ borderColor = "#d1d5db",
559
+ focusRingColor = "brand",
560
+ ...rest
561
+ }) => {
562
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container4, { children: [
563
+ typeof label === "string" && /* @__PURE__ */ jsxRuntime.jsx(Label3, { $color: labelColor, children: label }),
564
+ isTextArea ? /* @__PURE__ */ jsxRuntime.jsx(
565
+ StyledTextArea,
566
+ {
567
+ ...rest,
568
+ rows: 5,
569
+ $textColor: inputTextColor,
570
+ $placeholderColor: placeholderColor,
571
+ $bgColor: backgroundColor,
572
+ $borderColor: borderColor,
573
+ $focusRingColor: focusRingColor
574
+ }
575
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
576
+ StyledInput2,
577
+ {
578
+ ...rest,
579
+ $textColor: inputTextColor,
580
+ $placeholderColor: placeholderColor,
581
+ $bgColor: backgroundColor,
582
+ $borderColor: borderColor,
583
+ $focusRingColor: focusRingColor
584
+ }
585
+ )
586
+ ] });
587
+ };
588
+ var variants5 = ["primary", "secondary", "inverse", "filled"];
589
+ var StyledButton3 = styled41__default.default.button`
590
+ width: 2.5rem;
591
+ height: 2.5rem;
592
+ display: flex;
593
+ align-items: center;
594
+ justify-content: center;
595
+ border-radius: 4px;
596
+ background-color: ${(props) => {
597
+ switch (props.variant) {
598
+ case "filled":
599
+ return colors.background.brand;
600
+ case "primary":
601
+ case "secondary":
602
+ case "inverse":
603
+ default:
604
+ return "transparent";
605
+ }
606
+ }};
607
+ border: 2px solid ${(props) => {
608
+ switch (props.variant) {
609
+ case "primary":
610
+ return colors.text.brand;
611
+ case "secondary":
612
+ return colors.text.blue;
613
+ case "inverse":
614
+ return colors.text.secondary;
615
+ case "filled":
616
+ return colors.background.brand;
617
+ default:
618
+ return colors.text.brand;
619
+ }
620
+ }};
621
+ color: ${(props) => {
622
+ switch (props.variant) {
623
+ case "primary":
624
+ return colors.text.brand;
625
+ case "secondary":
626
+ return colors.text.blue;
627
+ case "inverse":
628
+ return colors.text.secondary;
629
+ case "filled":
630
+ return colors.text.secondary;
631
+ default:
632
+ return colors.text.brand;
633
+ }
634
+ }};
635
+ cursor: pointer;
636
+ transition: all 0.2s;
637
+
638
+ &:hover {
639
+ opacity: 0.8;
640
+ }
641
+
642
+ svg {
643
+ width: 1.25rem;
644
+ height: 1.25rem;
645
+ }
646
+ `;
647
+ var SocialButton = ({
648
+ icon,
649
+ onClick,
650
+ variant = "primary",
651
+ ariaLabel
652
+ }) => {
653
+ return /* @__PURE__ */ jsxRuntime.jsx(
654
+ StyledButton3,
655
+ {
656
+ onClick,
657
+ variant,
658
+ "aria-label": ariaLabel,
659
+ children: icon
660
+ }
661
+ );
662
+ };
663
+ SocialButton.variants = variants5;
664
+ styled41__default.default.label`
665
+ display: flex;
666
+ align-items: flex-start;
667
+ gap: 0.75rem;
668
+ cursor: pointer;
669
+ font-size: 0.875rem;
670
+ line-height: 1.5;
671
+ `;
672
+ styled41__default.default.input.attrs({ type: "checkbox" })`
673
+ position: absolute;
674
+ opacity: 0;
675
+ cursor: pointer;
676
+ `;
677
+ styled41__default.default.div`
678
+ width: 1.25rem;
679
+ height: 1.25rem;
680
+ border: 2px solid ${(props) => {
681
+ if (props.$checked) {
682
+ switch (props.variant) {
683
+ case "primary":
684
+ return colors.text.brand;
685
+ case "secondary":
686
+ return colors.text.blue;
687
+ case "subtle":
688
+ return colors.text.subtle;
689
+ default:
690
+ return colors.text.brand;
691
+ }
692
+ }
693
+ return colors.text.subtle;
694
+ }};
695
+ border-radius: 4px;
696
+ background-color: ${(props) => {
697
+ if (props.$checked) {
698
+ switch (props.variant) {
699
+ case "primary":
700
+ return colors.text.brand;
701
+ case "secondary":
702
+ return colors.text.blue;
703
+ case "subtle":
704
+ return colors.text.subtle;
705
+ default:
706
+ return colors.text.brand;
707
+ }
708
+ }
709
+ return "transparent";
710
+ }};
711
+ display: flex;
712
+ align-items: center;
713
+ justify-content: center;
714
+ flex-shrink: 0;
715
+ transition: all 0.2s;
716
+
717
+ &::after {
718
+ content: '✓';
719
+ color: ${colors.text.secondary}; // white checkmark
720
+ font-size: 0.875rem;
721
+ font-weight: bold;
722
+ display: ${(props) => props.$checked ? "block" : "none"};
723
+ }
724
+ `;
725
+ styled41__default.default.span`
726
+ color: ${(props) => {
727
+ switch (props.variant) {
728
+ case "primary":
729
+ return colors.text.primary;
730
+ case "secondary":
731
+ return colors.text.blue;
732
+ case "subtle":
733
+ return colors.text.subtle;
734
+ default:
735
+ return colors.text.primary;
736
+ }
737
+ }};
738
+ `;
739
+ styled41__default.default.a`
740
+ color: ${(props) => {
741
+ switch (props.variant) {
742
+ case "primary":
743
+ return colors.text.brand;
744
+ case "secondary":
745
+ return colors.text.blue;
746
+ case "subtle":
747
+ return colors.text.subtle;
748
+ default:
749
+ return colors.text.brand;
750
+ }
751
+ }};
752
+ font-weight: 700;
753
+ text-decoration: underline;
754
+ cursor: pointer;
755
+
756
+ &:hover {
757
+ opacity: 0.8;
758
+ }
759
+ `;
760
+ var sizes2 = ["sm", "md", "lg"];
761
+ var variants7 = {
762
+ sm: {
763
+ fontSize: "14px",
764
+ fontWeight: 500
765
+ },
766
+ md: {
767
+ fontSize: "16px",
768
+ fontWeight: 500
769
+ },
770
+ lg: {
771
+ fontSize: "18px",
772
+ fontWeight: 500
773
+ }
774
+ };
775
+ var StyledText2 = styled41__default.default.h1`
776
+ color: ${(props) => colors.text[props?.color]};
777
+ font-size: ${(props) => variants7[props.variant].fontSize};
778
+ font-weight: ${(props) => variants7[props.variant].fontWeight};
779
+ `;
780
+ var Text2 = ({
781
+ children,
782
+ color = "primary",
783
+ variant = "md"
784
+ }) => {
785
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledText2, { color, variant, children });
786
+ };
787
+ Text2.variants = sizes2;
788
+ styled41__default.default.textarea`
789
+ display: block;
790
+ width: 100%;
791
+ height: 100%;
792
+ outline: none;
793
+ background-color: transparent;
794
+ color: ${colors.text.subtle};
795
+ font-weight: 600;
796
+ resize: vertical;
797
+ `;
798
+ var bgVariants = ["primary", "secondary", "tertiary", "subtle", "blue", "brand", "light", "transparent"];
799
+ var textVariants = ["brand", "primary", "secondary", "tertiary", "subtle", "light", "error", "blue"];
800
+ var StyledContainer2 = styled41__default.default.button`
801
+ padding: 0 1rem;
802
+ height: 2.5rem;
803
+ display: flex;
804
+ align-items: center;
805
+ flex-shrink:0;
806
+ white-space: nowrap;
807
+ background-color: ${(props) => {
808
+ if (props.bgVariant === "transparent") return "transparent";
809
+ return colors.background[props.bgVariant];
810
+ }};
811
+ transition: all 0.2s;
812
+ border: none;
813
+ cursor: pointer;
814
+
815
+ &:hover {
816
+ opacity: 0.9;
817
+ }
818
+ `;
819
+ var StyledText3 = styled41__default.default.span`
820
+ color: ${(props) => colors.text[props.textVariant]};
821
+ font-size: 0.75rem;
822
+ letter-spacing: 0.05em;
823
+ text-transform: ${(props) => props.$uppercase ? "uppercase" : "none"};
824
+ font-weight: ${(props) => props.$bold ? 700 : 600};
825
+ `;
826
+ var TextButton = ({
827
+ text,
828
+ onClick,
829
+ asChild = false,
830
+ bgVariant = "brand",
831
+ textVariant = "secondary",
832
+ uppercase = true,
833
+ bold = false
834
+ }) => {
835
+ return /* @__PURE__ */ jsxRuntime.jsx(
836
+ StyledContainer2,
837
+ {
838
+ as: asChild ? "div" : "button",
839
+ onClick,
840
+ bgVariant,
841
+ children: /* @__PURE__ */ jsxRuntime.jsx(StyledText3, { textVariant, $uppercase: uppercase, $bold: bold, children: text })
842
+ }
843
+ );
844
+ };
845
+ TextButton.bgVariants = bgVariants;
846
+ TextButton.textVariants = textVariants;
847
+ styled41__default.default.div`
848
+ display: inline-flex;
849
+ background-color: ${(props) => {
850
+ switch (props.variant) {
851
+ case "primary":
852
+ return colors.background.secondary;
853
+ case "secondary":
854
+ return colors.background.light;
855
+ case "subtle":
856
+ return colors.background.subtle;
857
+ default:
858
+ return colors.background.secondary;
859
+ }
860
+ }};
861
+ border-radius: 9999px;
862
+ padding: 0.25rem;
863
+ gap: 0.25rem;
864
+ `;
865
+ styled41__default.default.button`
866
+ padding: 0.5rem 1.5rem;
867
+ border-radius: 9999px;
868
+ border: none;
869
+ font-size: 0.875rem;
870
+ font-weight: 600;
871
+ cursor: pointer;
872
+ transition: all 0.2s;
873
+ text-transform: uppercase;
874
+ letter-spacing: 0.05em;
875
+
876
+ background-color: ${(props) => {
877
+ if (!props.$isActive) return "transparent";
878
+ switch (props.variant) {
879
+ case "primary":
880
+ return colors.background.brand;
881
+ case "secondary":
882
+ return colors.background.blue;
883
+ case "subtle":
884
+ return colors.background.subtle;
885
+ default:
886
+ return colors.background.brand;
887
+ }
888
+ }};
889
+
890
+ color: ${(props) => {
891
+ if (props.$isActive) {
892
+ return colors.text.secondary;
893
+ }
894
+ switch (props.variant) {
895
+ case "primary":
896
+ return colors.text.brand;
897
+ case "secondary":
898
+ return colors.text.blue;
899
+ case "subtle":
900
+ return colors.text.subtle;
901
+ default:
902
+ return colors.text.brand;
903
+ }
904
+ }};
905
+
906
+ &:hover {
907
+ opacity: ${(props) => props.$isActive ? 1 : 0.7};
908
+ }
909
+ `;
910
+ var Container5 = styled41__default.default.div`
911
+ display: flex;
912
+ flex-direction: column;
913
+ gap: ${spaces[4]};
914
+ width: 100%;
915
+
916
+ @media (max-width: ${breakpoints.sm}) {
917
+ gap: ${spaces[2]};
918
+ }
919
+ `;
920
+ var NameContainer = styled41__default.default.div`
921
+ display: flex;
922
+ gap: ${spaces[4]};
923
+ flex: 1;
924
+ min-width: 0;
925
+
926
+ @media (max-width: ${breakpoints.sm}) {
927
+ flex-direction: column;
928
+ gap: ${spaces[2]};
929
+ }
930
+
931
+ & > * {
932
+ flex: 1;
933
+ min-width: 0;
934
+ }
935
+ `;
936
+ var ContactForm = ({}) => {
937
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container5, { children: [
938
+ /* @__PURE__ */ jsxRuntime.jsxs(NameContainer, { children: [
939
+ /* @__PURE__ */ jsxRuntime.jsx(
940
+ SecondaryInput,
941
+ {
942
+ name: "firstName",
943
+ label: "First name",
944
+ required: true,
945
+ placeholder: "First name"
946
+ }
947
+ ),
948
+ /* @__PURE__ */ jsxRuntime.jsx(
949
+ SecondaryInput,
950
+ {
951
+ name: "lastName",
952
+ label: "Last name",
953
+ required: true,
954
+ placeholder: "Last name"
955
+ }
956
+ )
957
+ ] }),
958
+ /* @__PURE__ */ jsxRuntime.jsx(SecondaryInput, { name: "company", label: "Company", placeholder: "Company" }),
959
+ /* @__PURE__ */ jsxRuntime.jsx(SecondaryInput, { name: "email", label: "Email", placeholder: "Email", required: true }),
960
+ /* @__PURE__ */ jsxRuntime.jsx(SecondaryInput, { name: "phone", label: "Phone number", placeholder: "Phone number" }),
961
+ /* @__PURE__ */ jsxRuntime.jsx(
962
+ SecondaryInput,
963
+ {
964
+ name: "message",
965
+ label: "Message",
966
+ placeholder: "Message",
967
+ required: true,
968
+ isTextArea: true
969
+ }
970
+ )
971
+ ] });
972
+ };
973
+ var Container6 = styled41__default.default.div`
974
+ width: 100%;
975
+ padding: ${spaces[4]};
976
+ `;
977
+ var AccordionContent = ({ children }) => {
978
+ return /* @__PURE__ */ jsxRuntime.jsx(Container6, { children });
979
+ };
980
+ var Container7 = styled41__default.default.div`
981
+ display: flex;
982
+ align-items: center;
983
+ justify-content: space-between;
984
+ width: 100%;
985
+ `;
986
+ var HeaderContainer = styled41__default.default.div`
987
+ display: flex;
988
+ align-items: center;
989
+ gap: ${spaces[2]};
990
+
991
+ &:hover {
992
+ cursor: pointer;
993
+ }
994
+ `;
995
+ var AccordionHeader = ({
996
+ title,
997
+ isOpen,
998
+ buttonText,
999
+ onAccordionPress,
1000
+ onButtonPress,
1001
+ rightElement
1002
+ }) => {
1003
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container7, { children: [
1004
+ /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { onClick: onAccordionPress, children: [
1005
+ /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(fa.FaMinus, { color: colors.text.primary, size: sizes.lg }) : /* @__PURE__ */ jsxRuntime.jsx(fa.FaPlus, { color: colors.text.primary, size: sizes.lg }) }),
1006
+ /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: "h2", children: title })
1007
+ ] }),
1008
+ rightElement ? rightElement : /* @__PURE__ */ jsxRuntime.jsx(
1009
+ Button,
1010
+ {
1011
+ text: buttonText,
1012
+ icon: /* @__PURE__ */ jsxRuntime.jsx(fa6.FaPlus, { fontSize: "10px" }),
1013
+ onClick: onButtonPress
1014
+ }
1015
+ )
1016
+ ] });
1017
+ };
1018
+ var Container8 = styled41__default.default.div`
1019
+ border-radius: ${radii.lg};
1020
+ background-color: ${colors.background.secondary};
1021
+ padding: ${spaces[4]};
1022
+ `;
1023
+ var Accordion = ({
1024
+ buttonText,
1025
+ onButtonPress,
1026
+ title,
1027
+ children,
1028
+ rightElement
1029
+ }) => {
1030
+ const [isOpen, setIsOpen] = react.useState(false);
1031
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container8, { children: [
1032
+ /* @__PURE__ */ jsxRuntime.jsx(
1033
+ AccordionHeader,
1034
+ {
1035
+ isOpen,
1036
+ buttonText,
1037
+ onButtonPress,
1038
+ onAccordionPress: () => setIsOpen((previousState) => !previousState),
1039
+ title,
1040
+ rightElement
1041
+ }
1042
+ ),
1043
+ isOpen && /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children })
1044
+ ] });
1045
+ };
1046
+ var variants9 = ["primary", "inverse", "subtle"];
1047
+ var AddressContainer = styled41__default.default.div`
1048
+ display: flex;
1049
+ flex-direction: column;
1050
+ background-color: transparent;
1051
+ padding: 2rem;
1052
+
1053
+ /* Desktop: normal spacing */
1054
+ @media (min-width: 768px) {
1055
+ gap: 1rem;
1056
+ }
1057
+
1058
+ /* Mobile: no gap, handled by collapse */
1059
+ @media (max-width: 767px) {
1060
+ padding: 1rem;
1061
+ gap: 0;
1062
+ }
1063
+ `;
1064
+ var HeaderWrapper = styled41__default.default.div`
1065
+ display: flex;
1066
+ justify-content: space-between;
1067
+ align-items: center;
1068
+
1069
+ /* Desktop: not clickable */
1070
+ @media (min-width: 768px) {
1071
+ cursor: default;
1072
+ }
1073
+
1074
+ /* Mobile: clickable */
1075
+ @media (max-width: 767px) {
1076
+ cursor: ${(props) => props.$isClickable ? "pointer" : "default"};
1077
+ padding: 0.5rem 0;
1078
+ user-select: none;
1079
+ }
1080
+ `;
1081
+ var ToggleIcon = styled41__default.default.div`
1082
+ display: none;
1083
+
1084
+ /* Only show on mobile */
1085
+ @media (max-width: 767px) {
1086
+ display: flex;
1087
+ align-items: center;
1088
+ font-size: 1.5rem;
1089
+
1090
+ color: ${(props) => {
1091
+ switch (props.variant) {
1092
+ case "primary":
1093
+ return colors.text.primary;
1094
+ case "inverse":
1095
+ return colors.text.secondary;
1096
+ case "subtle":
1097
+ return colors.text.subtle;
1098
+ default:
1099
+ return colors.text.primary;
1100
+ }
1101
+ }};
1102
+ }
1103
+ `;
1104
+ var CollapseContent = styled41__default.default.div`
1105
+ display: flex;
1106
+ flex-direction: column;
1107
+ gap: 1rem;
1108
+
1109
+ /* Desktop: always visible */
1110
+ @media (min-width: 768px) {
1111
+ display: flex;
1112
+ }
1113
+
1114
+ /* Mobile: collapsible */
1115
+ @media (max-width: 767px) {
1116
+ max-height: ${(props) => props.$isOpen ? "500px" : "0"};
1117
+ opacity: ${(props) => props.$isOpen ? "1" : "0"};
1118
+ overflow: hidden;
1119
+ transition: max-height 0.3s ease, opacity 0.3s ease;
1120
+ padding-top: ${(props) => props.$isOpen ? "1rem" : "0"};
1121
+ }
1122
+ `;
1123
+ var InfoSection = styled41__default.default.div`
1124
+ display: flex;
1125
+ flex-direction: column;
1126
+ gap: 0.5rem;
1127
+ `;
1128
+ var InfoText = styled41__default.default.p`
1129
+ margin: 0;
1130
+ font-size: 0.875rem;
1131
+ line-height: 1.6;
1132
+ color: ${(props) => {
1133
+ switch (props.variant) {
1134
+ case "primary":
1135
+ return colors.text.primary;
1136
+ case "inverse":
1137
+ return colors.text.secondary;
1138
+ case "subtle":
1139
+ return colors.text.subtle;
1140
+ default:
1141
+ return colors.text.primary;
1142
+ }
1143
+ }};
1144
+ font-weight: ${(props) => props.$bold ? 600 : 400};
1145
+ `;
1146
+ var ButtonWrapper = styled41__default.default.div`
1147
+ margin-top: 0.5rem;
1148
+ `;
1149
+ var Address = ({
1150
+ title,
1151
+ phone,
1152
+ email,
1153
+ addressLines,
1154
+ directionsText = "GET DIRECTIONS",
1155
+ onDirectionsClick,
1156
+ variant = "primary"
1157
+ }) => {
1158
+ const [isOpen, setIsOpen] = react.useState(false);
1159
+ const handleDirectionsClick = () => {
1160
+ if (onDirectionsClick) {
1161
+ onDirectionsClick();
1162
+ } else {
1163
+ const fullAddress = addressLines.join(", ");
1164
+ const encodedAddress = encodeURIComponent(fullAddress);
1165
+ const mapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
1166
+ window.open(mapsUrl, "_blank");
1167
+ }
1168
+ };
1169
+ const getHeaderVariant = () => {
1170
+ switch (variant) {
1171
+ case "primary":
1172
+ return "primary";
1173
+ case "inverse":
1174
+ return "secondary";
1175
+ case "subtle":
1176
+ return "subtle";
1177
+ default:
1178
+ return "primary";
1179
+ }
1180
+ };
1181
+ const getButtonBgVariant = () => {
1182
+ return "transparent";
1183
+ };
1184
+ const getButtonTextVariant = () => {
1185
+ switch (variant) {
1186
+ case "primary":
1187
+ return "primary";
1188
+ case "inverse":
1189
+ return "secondary";
1190
+ case "subtle":
1191
+ return "subtle";
1192
+ default:
1193
+ return "primary";
1194
+ }
1195
+ };
1196
+ return /* @__PURE__ */ jsxRuntime.jsxs(AddressContainer, { children: [
1197
+ /* @__PURE__ */ jsxRuntime.jsxs(
1198
+ HeaderWrapper,
1199
+ {
1200
+ $isClickable: true,
1201
+ onClick: () => setIsOpen(!isOpen),
1202
+ children: [
1203
+ /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: "h1", color: getHeaderVariant(), children: title }),
1204
+ /* @__PURE__ */ jsxRuntime.jsx(ToggleIcon, { variant, children: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(hi2.HiMinus, {}) : /* @__PURE__ */ jsxRuntime.jsx(hi2.HiPlus, {}) })
1205
+ ]
1206
+ }
1207
+ ),
1208
+ /* @__PURE__ */ jsxRuntime.jsxs(CollapseContent, { $isOpen: isOpen, children: [
1209
+ /* @__PURE__ */ jsxRuntime.jsxs(InfoSection, { children: [
1210
+ phone && /* @__PURE__ */ jsxRuntime.jsx(InfoText, { variant, children: phone }),
1211
+ email && /* @__PURE__ */ jsxRuntime.jsx(InfoText, { variant, $bold: true, children: email.toUpperCase() }),
1212
+ addressLines.map((line, index) => /* @__PURE__ */ jsxRuntime.jsx(InfoText, { variant, children: line }, index))
1213
+ ] }),
1214
+ /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
1215
+ TextButton,
1216
+ {
1217
+ text: directionsText,
1218
+ onClick: handleDirectionsClick,
1219
+ bgVariant: getButtonBgVariant(),
1220
+ textVariant: getButtonTextVariant(),
1221
+ uppercase: true
1222
+ }
1223
+ ) })
1224
+ ] })
1225
+ ] });
1226
+ };
1227
+ Address.variants = variants9;
1228
+ styled41__default.default.label`
1229
+ display: flex;
1230
+ align-items: center;
1231
+ gap: ${spaces[2]};
1232
+ cursor: pointer;
1233
+ font-size: 16px;
1234
+ color: ${colors.text.subtle};
1235
+ `;
1236
+ styled41__default.default.input.attrs({ type: "checkbox" })`
1237
+ display: none;
1238
+ `;
1239
+ styled41__default.default.span`
1240
+ width: ${sizes.lg};
1241
+ height: ${sizes.lg};
1242
+ border: 1.5px solid ${colors.background.tertiary};
1243
+ border-radius: ${radii.md};
1244
+ background-color: ${({ checked }) => checked ? colors.background.tertiary : "transparent"};
1245
+ transition: all 0.2s ease-in-out;
1246
+ `;
1247
+ styled41__default.default.div`
1248
+ display: flex;
1249
+ flex-direction: column;
1250
+ `;
1251
+ styled41__default.default.div`
1252
+ display: flex;
1253
+ gap: ${spaces[4]};
1254
+ `;
1255
+ var Container10 = styled41__default.default.div`
1256
+ display: flex;
1257
+ flex-direction: column;
1258
+ gap: 1rem;
1259
+ background-color: #ffffff;
1260
+ width: 284px;
1261
+ height: 482px;
1262
+ padding: 1.5rem;
1263
+ border-radius: 8px;
1264
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
1265
+ flex-shrink: 0;
1266
+
1267
+ @media (max-width: 767px) {
1268
+ width: 70vw;
1269
+ }
1270
+ `;
1271
+ var ThumbnailWrapper2 = styled41__default.default.div`
1272
+ width: 180px;
1273
+ height: 180px;
1274
+ border-radius: 50%;
1275
+ background-color: ${(props) => colors.background[props.thumbnailBgColor]};
1276
+ display: flex;
1277
+ align-items: center;
1278
+ justify-content: center;
1279
+ flex-shrink: 0;
1280
+ align-self: center;
1281
+ `;
1282
+ var ButtonWrapper2 = styled41__default.default.div`
1283
+ display: flex;
1284
+ justify-content: flex-start;
1285
+ margin-top: auto;
1286
+ `;
1287
+ var ContentCard = ({
1288
+ thumbnail,
1289
+ title,
1290
+ description,
1291
+ onArrowClick,
1292
+ headerVariant = "h2",
1293
+ titleColor = "brand",
1294
+ descriptionVariant = "subtle",
1295
+ arrowVariant = "teal",
1296
+ thumbnailBgColor = "brand"
1297
+ }) => {
1298
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container10, { children: [
1299
+ /* @__PURE__ */ jsxRuntime.jsx(ThumbnailWrapper2, { thumbnailBgColor, children: thumbnail }),
1300
+ /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: headerVariant, color: titleColor, children: title }),
1301
+ /* @__PURE__ */ jsxRuntime.jsx(Description, { variant: descriptionVariant, children: description }),
1302
+ /* @__PURE__ */ jsxRuntime.jsx(ButtonWrapper2, { children: /* @__PURE__ */ jsxRuntime.jsx(
1303
+ ArrowButton,
1304
+ {
1305
+ onClick: onArrowClick,
1306
+ variant: arrowVariant
1307
+ }
1308
+ ) })
1309
+ ] });
1310
+ };
1311
+ styled41__default.default.div`
1312
+ display: flex;
1313
+ flex-direction: column;
1314
+ gap: 1.5rem;
1315
+ padding: 3rem 2rem;
1316
+ max-width: 500px;
1317
+
1318
+ /* Mobile adjustments */
1319
+ @media (max-width: 767px) {
1320
+ padding: 2rem 1rem;
1321
+ max-width: 100%;
1322
+ }
1323
+ `;
1324
+ styled41__default.default.h1`
1325
+ margin: 0;
1326
+ font-size: 2.5rem;
1327
+ font-weight: 700;
1328
+ line-height: 1.2;
1329
+ color: ${(props) => colors.text[props.textColor]};
1330
+
1331
+ /* Responsive font size */
1332
+ @media (max-width: 767px) {
1333
+ font-size: 2rem;
1334
+ }
1335
+
1336
+ @media (max-width: 480px) {
1337
+ font-size: 1.75rem;
1338
+ }
1339
+ `;
1340
+ styled41__default.default.p`
1341
+ margin: 0;
1342
+ font-size: 1.125rem;
1343
+ line-height: 1.6;
1344
+ color: ${(props) => colors.text[props.textColor]};
1345
+
1346
+ /* Responsive font size */
1347
+ @media (max-width: 767px) {
1348
+ font-size: 1rem;
1349
+ }
1350
+ `;
1351
+ styled41__default.default.div`
1352
+ display: flex;
1353
+ gap: 1rem;
1354
+ align-items: center;
1355
+
1356
+ /* Stack vertically on mobile */
1357
+ @media (max-width: 767px) {
1358
+ flex-direction: column;
1359
+ align-items: stretch;
1360
+ width: 100%;
1361
+ }
1362
+ `;
1363
+ styled41__default.default.div`
1364
+ width: 100%;
1365
+ `;
1366
+ styled41__default.default.div`
1367
+ position: relative;
1368
+ width: 100%;
1369
+ min-height: 58px;
1370
+ display: flex;
1371
+ align-items: center;
1372
+
1373
+ border-style: solid;
1374
+ border-width: ${(props) => props?.variant === "outline" ? sizes[0] : "0px"};
1375
+ border-color: ${(props) => props?.error ? colors.border.error : colors.border.active};
1376
+ border-radius: ${radii.lg};
1377
+
1378
+ padding: ${spaces[3]} ${spaces[3]} ${spaces[2]};
1379
+
1380
+ &:hover {
1381
+ border-color: ${colors.border.hover};
1382
+ cursor: text;
1383
+ }
1384
+
1385
+ &:focus-within {
1386
+ border-color: ${colors.border.focus};
1387
+ }
1388
+ `;
1389
+ styled41__default.default.select`
1390
+ width: 100%;
1391
+ color: ${colors.text.subtle};
1392
+ background: transparent;
1393
+ font-weight: 600;
1394
+ border: none;
1395
+ outline: none;
1396
+ padding: 0;
1397
+ margin: 0;
1398
+
1399
+ &:focus,
1400
+ &:active,
1401
+ &:hover {
1402
+ border: none;
1403
+ outline: none;
1404
+ box-shadow: none;
1405
+ }
1406
+
1407
+ &:invalid {
1408
+ color: ${colors.text.subtle};
1409
+ }
1410
+ `;
1411
+ styled41__default.default.option`
1412
+ color: ${(props) => props.disabled ? colors.text.light : colors.text.subtle};
1413
+ `;
1414
+ styled41__default.default.div`
1415
+ border-bottom: 1px solid ${colors.text.light};
1416
+ padding: 1.5rem 0;
1417
+ `;
1418
+ styled41__default.default.button`
1419
+ width: 100%;
1420
+ display: flex;
1421
+ align-items: center;
1422
+ gap: 1rem;
1423
+ background: none;
1424
+ border: none;
1425
+ cursor: pointer;
1426
+ text-align: left;
1427
+ padding: 0;
1428
+ `;
1429
+ styled41__default.default.span`
1430
+ font-size: 1rem;
1431
+ font-weight: 600;
1432
+ color: ${(props) => colors.text[props.numberColor]};
1433
+ flex-shrink: 0;
1434
+ `;
1435
+ styled41__default.default.div`
1436
+ flex-grow: 1;
1437
+ `;
1438
+ styled41__default.default.div`
1439
+ color: ${(props) => colors.text[props.iconColor]};
1440
+ flex-shrink: 0;
1441
+ display: flex;
1442
+ align-items: center;
1443
+ justify-content: center;
1444
+ `;
1445
+ styled41__default.default.div`
1446
+ max-height: ${(props) => props.$isOpen ? "1000px" : "0"};
1447
+ overflow: hidden;
1448
+ transition: max-height 0.3s ease-in-out;
1449
+ padding-left: 2.5rem;
1450
+ margin-top: ${(props) => props.$isOpen ? "1rem" : "0"};
1451
+ `;
1452
+ styled41__default.default.div`
1453
+ display: flex;
1454
+ flex-direction: column;
1455
+ `;
1456
+ styled41__default.default.div`
1457
+ padding: 1rem 0;
1458
+ border-bottom: 1px solid #e5e7eb;
1459
+
1460
+ &:last-child {
1461
+ border-bottom: none;
1462
+ }
1463
+ `;
1464
+ var FileButton = ({
1465
+ onFileSelect,
1466
+ accept = [".pdf"],
1467
+ multiple = false,
1468
+ ...rest
1469
+ }) => {
1470
+ const fileInputRef = react.useRef(null);
1471
+ const handleClick = () => {
1472
+ if (fileInputRef.current) {
1473
+ fileInputRef.current.click();
1474
+ }
1475
+ };
1476
+ const handleFileChange = (event) => {
1477
+ const files = event.target.files;
1478
+ if (files && files.length > 0 && onFileSelect) {
1479
+ Array.from(files).forEach((file) => onFileSelect(file));
1480
+ }
1481
+ };
1482
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1483
+ /* @__PURE__ */ jsxRuntime.jsx(
1484
+ Button,
1485
+ {
1486
+ ...rest,
1487
+ icon: /* @__PURE__ */ jsxRuntime.jsx(fa6.FaPlus, { fontSize: "10px" }),
1488
+ onClick: handleClick
1489
+ }
1490
+ ),
1491
+ /* @__PURE__ */ jsxRuntime.jsx(
1492
+ "input",
1493
+ {
1494
+ type: "file",
1495
+ ref: fileInputRef,
1496
+ style: { display: "none" },
1497
+ onChange: handleFileChange,
1498
+ accept: accept?.map((item) => item).join(","),
1499
+ multiple
1500
+ }
1501
+ )
1502
+ ] });
1503
+ };
1504
+ var fadeIn = styled41.keyframes`
1505
+ from { opacity: 0 }
1506
+ to { opacity: 1 }
1507
+ `;
1508
+ styled41.keyframes`
1509
+ from { transform: translateY(8px) scale(.98); opacity: 0 }
1510
+ to { transform: translateY(0) scale(1); opacity: 1 }
1511
+ `;
1512
+ styled41__default.default.div`
1513
+ height: 100vh;
1514
+ width: 100vw;
1515
+ background-color: rgba(0, 0, 0, 0.4);
1516
+ position: fixed;
1517
+ inset: 0;
1518
+ z-index: 1000;
1519
+ display: flex;
1520
+ align-items: ${(props) => props.contentPosition === "center" ? "center" : props.contentPosition === "bottom" ? "flex-end" : "flex-start"};
1521
+ justify-content: center;
1522
+ animation: ${fadeIn} 160ms ease-out;
1523
+ `;
1524
+ styled41__default.default.div`
1525
+ position: relative;
1526
+ width: min(${breakpoints.sm}, 92vw);
1527
+ max-height: 86vh;
1528
+ overflow: auto;
1529
+ border-radius: ${radii.xl};
1530
+ padding: ${spaces[6]};
1531
+ background-color: ${colors.background.primary};
1532
+ `;
1533
+ var Container14 = styled41__default.default.div`
1534
+ display: flex;
1535
+ align-items: center ;
1536
+ justify-content: space-between;
1537
+ padding: ${spaces[2]} ${spaces[3]};
1538
+ background-color: ${(props) => props.isComplete ? colors.background.blue : colors.background.light};
1539
+ border-radius: ${radii.sm};
1540
+ `;
1541
+ var Row = styled41__default.default.div`
1542
+ display: flex;
1543
+ align-items: center;
1544
+ gap: ${spaces[2]};
1545
+ `;
1546
+ var OverviewRowItem = ({ isComplete, isMainHeader, title }) => {
1547
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container14, { isComplete, children: [
1548
+ /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: isMainHeader ? "h2" : "h3", color: isComplete ? "secondary" : "primary", children: title }),
1549
+ /* @__PURE__ */ jsxRuntime.jsxs(Row, { children: [
1550
+ /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: "h3", color: isComplete ? "secondary" : "primary", children: isComplete ? "Complete" : "Information Outstanding" }),
1551
+ isComplete ? /* @__PURE__ */ jsxRuntime.jsx(fa6.FaCircleCheck, { color: colors.background.success }) : /* @__PURE__ */ jsxRuntime.jsx(fa6.FaCircleExclamation, { color: colors.background.error })
1552
+ ] })
1553
+ ] });
1554
+ };
1555
+ styled41__default.default.div`
1556
+ width: '100%';
1557
+ min-height: '100vh';
1558
+ padding-bottom: ${spaces[9]};
1559
+ `;
1560
+ styled41__default.default.div`
1561
+ padding: ${spaces[4.5]} ${spaces[6]};
1562
+ display: flex;
1563
+ align-items: center;
1564
+ justify-content: space-between;
1565
+ `;
1566
+ styled41__default.default.div`
1567
+ border-top: 1px solid ${colors.border.hover};
1568
+ `;
1569
+ styled41__default.default.div`
1570
+ display: flex;
1571
+ width: 100%;
1572
+ padding: ${spaces[6]};
1573
+ align-items: center;
1574
+ justify-content: center;
1575
+ `;
1576
+ var variants11 = ["documents", "properties"];
1577
+ var Container16 = styled41__default.default.div`
1578
+ display: flex;
1579
+ flex-direction: column;
1580
+ align-items: center;
1581
+ justify-content: center;
1582
+ flex: 1;
1583
+ gap: ${spaces[4]};
1584
+ padding: ${spaces[8]};
1585
+ `;
1586
+ var EmptyState = ({ variant, message }) => {
1587
+ const size = sizes.xl;
1588
+ const color = colors.text.primary;
1589
+ const Icon = react.useMemo(() => {
1590
+ switch (variant) {
1591
+ case "documents":
1592
+ return /* @__PURE__ */ jsxRuntime.jsx(fa6.FaRegFolderOpen, { size, color });
1593
+ case "properties":
1594
+ return /* @__PURE__ */ jsxRuntime.jsx(fa6.FaHouse, { size, color });
1595
+ }
1596
+ }, [variant]);
1597
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container16, { children: [
1598
+ Icon,
1599
+ /* @__PURE__ */ jsxRuntime.jsx(Header, { variant: "h3", children: message })
1600
+ ] });
1601
+ };
1602
+ EmptyState.variants = variants11;
1603
+ styled41__default.default.div`
1604
+ width: 100%;
1605
+ height: 100%;
1606
+ `;
1607
+ styled41__default.default.div`
1608
+ display: flex;
1609
+ gap: 1.5rem;
1610
+ align-items: center;
1611
+ max-width: 600px;
1612
+
1613
+ /* Mobile: stack vertically */
1614
+ @media (max-width: 767px) {
1615
+ flex-direction: column;
1616
+ align-items: flex-start;
1617
+ max-width: 100%;
1618
+ }
1619
+ `;
1620
+ styled41__default.default.div`
1621
+ flex-shrink: 0;
1622
+ width: 180px;
1623
+ height: 180px;
1624
+ border-radius: 8px;
1625
+ overflow: hidden;
1626
+
1627
+ img {
1628
+ width: 100%;
1629
+ height: 100%;
1630
+ object-fit: cover;
1631
+ }
1632
+
1633
+ /* Mobile: full width */
1634
+ @media (max-width: 767px) {
1635
+ width: 100%;
1636
+ height: 200px;
1637
+ }
1638
+ `;
1639
+ styled41__default.default.div`
1640
+ display: flex;
1641
+ flex-direction: column;
1642
+ gap: 1rem;
1643
+
1644
+ /* Mobile: full width */
1645
+ @media (max-width: 767px) {
1646
+ width: 100%;
1647
+ }
1648
+ `;
1649
+ styled41__default.default.div`
1650
+ max-width: 200px;
1651
+
1652
+ img {
1653
+ width: 100%;
1654
+ height: auto;
1655
+ }
1656
+ `;
1657
+ styled41__default.default.div``;
1658
+ styled41__default.default.div`
1659
+ margin-top: ${spaces[2]};
1660
+ display: flex;
1661
+ flex-direction: row;
1662
+ flex: 1;
1663
+ gap: ${spaces[2]};
1664
+ `;
1665
+ styled41__default.default.div`
1666
+ padding-left: ${spaces[1]};
1667
+ `;
1668
+ styled41__default.default.div`
1669
+ position: fixed;
1670
+ top: 0;
1671
+ left: 0;
1672
+ right: 0;
1673
+ bottom: 0;
1674
+ background-color: rgba(0, 0, 0, 0.5);
1675
+ display: flex;
1676
+ align-items: center;
1677
+ justify-content: center;
1678
+ z-index: 1000;
1679
+ `;
1680
+ styled41__default.default.div`
1681
+ background-color: #ffffff;
1682
+ border-radius: 8px;
1683
+ padding: 2rem;
1684
+ max-width: 400px;
1685
+ width: 90%;
1686
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
1687
+ `;
1688
+ styled41__default.default.div`
1689
+ display: flex;
1690
+ justify-content: space-between;
1691
+ align-items: center;
1692
+ margin-bottom: 1.5rem;
1693
+ `;
1694
+ styled41__default.default.button`
1695
+ background-color: ${(props) => {
1696
+ switch (props.variant) {
1697
+ case "primary":
1698
+ return colors.background.brand;
1699
+ case "secondary":
1700
+ return colors.background.blue;
1701
+ case "subtle":
1702
+ return colors.background.subtle;
1703
+ default:
1704
+ return colors.background.brand;
1705
+ }
1706
+ }};
1707
+ color: #ffffff;
1708
+ border: none;
1709
+ border-radius: 4px;
1710
+ width: 2rem;
1711
+ height: 2rem;
1712
+ display: flex;
1713
+ align-items: center;
1714
+ justify-content: center;
1715
+ cursor: pointer;
1716
+ transition: opacity 0.2s;
1717
+
1718
+ &:hover {
1719
+ opacity: 0.8;
1720
+ }
1721
+ `;
1722
+ styled41__default.default.table`
1723
+ width: 100%;
1724
+ border-collapse: collapse;
1725
+ `;
1726
+ styled41__default.default.thead`
1727
+ border-bottom: 2px solid #e5e7eb;
1728
+ `;
1729
+ styled41__default.default.th`
1730
+ text-align: left;
1731
+ padding: 0.75rem 0;
1732
+ font-size: 0.875rem;
1733
+ font-weight: 700;
1734
+ text-transform: uppercase;
1735
+ color: ${(props) => {
1736
+ switch (props.variant) {
1737
+ case "primary":
1738
+ return colors.text.brand;
1739
+ case "secondary":
1740
+ return colors.text.blue;
1741
+ case "subtle":
1742
+ return colors.text.subtle;
1743
+ default:
1744
+ return colors.text.brand;
1745
+ }
1746
+ }};
1747
+ `;
1748
+ styled41__default.default.tbody``;
1749
+ styled41__default.default.tr`
1750
+ border-bottom: 1px solid #f3f4f6;
1751
+
1752
+ &:last-child {
1753
+ border-bottom: none;
1754
+ }
1755
+ `;
1756
+ styled41__default.default.td`
1757
+ padding: 0.75rem 0;
1758
+ font-size: 0.875rem;
1759
+ color: ${(props) => {
1760
+ switch (props.variant) {
1761
+ case "primary":
1762
+ case "secondary":
1763
+ return colors.text.primary;
1764
+ case "subtle":
1765
+ return colors.text.subtle;
1766
+ default:
1767
+ return colors.text.primary;
1768
+ }
1769
+ }};
1770
+ `;
1771
+ styled41__default.default.div`
1772
+ display: none;
1773
+
1774
+ @media (max-width: 767px) {
1775
+ display: ${(props) => props.$isOpen ? "block" : "none"};
1776
+ position: fixed;
1777
+ top: 0;
1778
+ left: 0;
1779
+ right: 0;
1780
+ bottom: 0;
1781
+ background-color: rgba(0, 0, 0, 0.5);
1782
+ z-index: 9998;
1783
+ }
1784
+ `;
1785
+ styled41__default.default.div`
1786
+ @media (max-width: 767px) {
1787
+ display: none;
1788
+ }
1789
+ `;
1790
+ styled41__default.default.nav`
1791
+ width: 195px;
1792
+ display: flex;
1793
+ flex-direction: column;
1794
+ min-height: 500px;
1795
+ height: 100vh;
1796
+ padding-bottom: 15px;
1797
+
1798
+ @media (min-width: 768px) {
1799
+ position: relative;
1800
+ background-color: #ffffff;
1801
+ border-right: 1px solid #e5e7eb;
1802
+ }
1803
+
1804
+ @media (max-width: 767px) {
1805
+ position: fixed;
1806
+ top: 0;
1807
+ left: 0;
1808
+ width: 100%;
1809
+ z-index: 9999;
1810
+ background-color: ${(props) => colors.background[props.$mobileBgVariant]};
1811
+ border-right: 1px solid ${(props) => colors.border[props.$borderVariant]};
1812
+ transform: translateX(${(props) => props.$isOpen ? "0" : "-100%"});
1813
+ transition: transform 0.3s ease-in-out;
1814
+ box-shadow: ${(props) => props.$isOpen ? "2px 0 8px rgba(0, 0, 0, 0.15)" : "none"};
1815
+ }
1816
+ `;
1817
+ styled41__default.default.button`
1818
+ background: none;
1819
+ border: none;
1820
+ font-size: 1.5rem;
1821
+ cursor: pointer;
1822
+ padding: 0.5rem;
1823
+ color: ${(props) => colors.border[props.$textVariant]};
1824
+
1825
+ &:hover {
1826
+ opacity: 0.7;
1827
+ }
1828
+ `;
1829
+ styled41__default.default.div`
1830
+ display: none;
1831
+
1832
+ @media (max-width: 767px) {
1833
+ display: flex;
1834
+ justify-content: space-between;
1835
+ align-items: center;
1836
+ padding: 1rem;
1837
+ }
1838
+ `;
1839
+ var NavList = styled41__default.default.ul`
1840
+ display: flex;
1841
+ flex-direction: column;
1842
+ list-style: none;
1843
+ margin: 0;
1844
+ padding: 0;
1845
+ `;
1846
+ styled41__default.default(NavList)`
1847
+ @media (max-width: 767px) {
1848
+ display: none;
1849
+ }
1850
+ `;
1851
+ styled41__default.default(NavList)`
1852
+ display: none;
1853
+
1854
+ @media (max-width: 767px) {
1855
+ display: flex;
1856
+ }
1857
+ `;
1858
+ styled41__default.default.li`
1859
+ display: flex;
1860
+ `;
1861
+ styled41__default.default.a`
1862
+ display: flex;
1863
+ align-items: center;
1864
+ text-decoration: none;
1865
+ width: 100%;
1866
+ padding-left: 0.5rem;
1867
+
1868
+ ${(props) => !props.$isActive && `
1869
+ &:hover {
1870
+ font-weight: 100;
1871
+ }
1872
+ `}
1873
+ `;
1874
+ styled41__default.default.div`
1875
+ width: 0;
1876
+ height: 0;
1877
+ border-top: 4px solid transparent;
1878
+ border-left: 6px solid ${(props) => colors.border[props.triangleColor]};
1879
+ border-bottom: 4px solid transparent;
1880
+ flex-shrink: 0;
1881
+ margin-left: 1.5rem;
1882
+ `;
1883
+ styled41__default.default.span`
1884
+ width: 6px;
1885
+ margin-right: 0.5rem;
1886
+ flex-shrink: 0;
1887
+ `;
1888
+ styled41__default.default.div`
1889
+ height: 1px;
1890
+ background-color: ${(props) => colors.border[props.dividerColor]};
1891
+ margin: 1rem;
1892
+ `;
1893
+ var Spacer = styled41__default.default.div`
1894
+ flex-grow: 1;
1895
+ `;
1896
+ styled41__default.default(Spacer)`
1897
+ @media (max-width: 767px) {
1898
+ display: none;
1899
+ }
1900
+ `;
1901
+ styled41__default.default.div`
1902
+ display: none;
1903
+
1904
+ @media (max-width: 767px) {
1905
+ display: flex;
1906
+ flex-direction: row;
1907
+ gap: 0.5rem;
1908
+ padding: 0 1rem;
1909
+ margin-top: auto;
1910
+ margin-bottom: 20px;
1911
+ }
1912
+ `;
1913
+ styled41__default.default.div`
1914
+ position: fixed;
1915
+ top: 0;
1916
+ left: 0;
1917
+ right: 0;
1918
+ bottom: 0;
1919
+ background-color: rgba(0, 0, 0, 0.5);
1920
+ display: ${(props) => props.$isOpen ? "flex" : "none"};
1921
+ justify-content: flex-end;
1922
+ z-index: 1000;
1923
+ `;
1924
+ styled41__default.default.div`
1925
+ background-color: #ffffff;
1926
+ width: 100%;
1927
+ max-width: 400px;
1928
+ height: 100vh;
1929
+ padding: 3rem 2rem;
1930
+ box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
1931
+ display: flex;
1932
+ flex-direction: column;
1933
+ gap: 2rem;
1934
+ transform: ${(props) => props.$isOpen ? "translateX(0)" : "translateX(100%)"};
1935
+ transition: transform 0.3s ease-in-out;
1936
+ overflow-y: auto;
1937
+ `;
1938
+ styled41__default.default.button`
1939
+ position: absolute;
1940
+ top: 1.5rem;
1941
+ right: 1.5rem;
1942
+ background-color: ${(props) => colors.background[props.closeButtonBgColor]};
1943
+ color: #ffffff;
1944
+ border: none;
1945
+ border-radius: 4px;
1946
+ width: 2.5rem;
1947
+ height: 2.5rem;
1948
+ display: flex;
1949
+ align-items: center;
1950
+ justify-content: center;
1951
+ cursor: pointer;
1952
+ transition: opacity 0.2s;
1953
+ z-index: 10;
1954
+
1955
+ &:hover {
1956
+ opacity: 0.8;
1957
+ }
1958
+ `;
1959
+ styled41__default.default.div`
1960
+ width: 100%;
1961
+ display: flex;
1962
+ justify-content: center;
1963
+ margin-bottom: 1rem;
1964
+
1965
+ svg {
1966
+ width: 150px;
1967
+ height: 150px;
1968
+ }
1969
+
1970
+ img {
1971
+ width: 150px;
1972
+ height: 150px;
1973
+ object-fit: contain;
1974
+ }
1975
+ `;
1976
+ styled41__default.default.div`
1977
+ display: flex;
1978
+ flex-direction: column;
1979
+ gap: 1.5rem;
1980
+ `;
1981
+ styled41__default.default.div`
1982
+ width: 100%;
1983
+ background-color: ${(props) => props.isSelected ? colors.background.blue : colors.background.primary};
1984
+ border: 1px solid ${colors.background.blue};
1985
+ border-radius: ${radii.lg};
1986
+ display: flex;
1987
+ justify-content: center;
1988
+ align-items: center;
1989
+ padding: ${spaces[2]} ${spaces[3]};
1990
+ cursor: pointer;
1991
+ `;
1992
+ styled41__default.default.span`
1993
+ color: ${(props) => props.isSelected ? colors.text.secondary : colors.text.blue};
1994
+ font-size: ${sizes.sm};
1995
+ font-weight: 700;
1996
+ `;
1997
+ var Container21 = styled41__default.default.div`
1998
+ display: flex;
1999
+ width: ${`${100 / 4}%`};
2000
+ overflow: scroll;
2001
+ align-items: center;
2002
+ gap: 5px;
2003
+ cursor: ${(props) => props.onClick ? "pointer" : "auto"};
2004
+
2005
+ /* Hide scrollbar for Chrome, Safari and Opera */
2006
+ &::-webkit-scrollbar {
2007
+ display: none;
2008
+ }
2009
+
2010
+ /* Hide scrollbar for IE, Edge and Firefox */
2011
+ -ms-overflow-style: none;
2012
+ scrollbar-width: none;
2013
+ `;
2014
+ var IconContainer = styled41__default.default.div`
2015
+ display: flex;
2016
+ flex-direction: column;
2017
+ align-items: center;
2018
+ justify-content: center;
2019
+ `;
2020
+ var DocumentAccordionHeader = ({
2021
+ onClick,
2022
+ title
2023
+ }) => {
2024
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container21, { onClick, children: [
2025
+ /* @__PURE__ */ jsxRuntime.jsx(Text2, { children: title }),
2026
+ onClick && /* @__PURE__ */ jsxRuntime.jsxs(IconContainer, { children: [
2027
+ /* @__PURE__ */ jsxRuntime.jsx(fa6.FaCaretUp, { size: 10 }),
2028
+ /* @__PURE__ */ jsxRuntime.jsx(fa6.FaCaretDown, { size: 10 })
2029
+ ] })
2030
+ ] });
2031
+ };
2032
+ var ItemContainer = styled41__default.default.div`
2033
+ display: flex;
2034
+ align-items: center;
2035
+ cursor: ${(props) => props?.onClick ? "pointer" : "auto"};
2036
+ width: ${`${100 / 4}%`};
2037
+ overflow: scroll;
2038
+ text-overflow: ellipsis;
2039
+
2040
+ /* Hide scrollbar for Chrome, Safari and Opera */
2041
+ &::-webkit-scrollbar {
2042
+ display: none;
2043
+ }
2044
+
2045
+ /* Hide scrollbar for IE, Edge and Firefox */
2046
+ -ms-overflow-style: none;
2047
+ scrollbar-width: none;
2048
+ `;
2049
+ var DocumentAccordionRow = ({
2050
+ file,
2051
+ onViewDetail
2052
+ }) => {
2053
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2054
+ /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Label, { value: file.name, color: "brand" }) }),
2055
+ /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Label, { value: file.sourceFile, color: "primary" }) }),
2056
+ /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
2057
+ Label,
2058
+ {
2059
+ value: typeof file.status === "string" ? file.status : "-",
2060
+ color: "primary",
2061
+ fontWeight: "700"
2062
+ }
2063
+ ) }),
2064
+ /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
2065
+ Label,
2066
+ {
2067
+ value: typeof file.createdAt === "string" ? file.createdAt : "-",
2068
+ color: "primary",
2069
+ fontWeight: "700"
2070
+ }
2071
+ ) }),
2072
+ /* @__PURE__ */ jsxRuntime.jsx(ItemContainer, { onClick: onViewDetail, children: /* @__PURE__ */ jsxRuntime.jsx(Label, { value: "View Details", color: "brand", fontWeight: "700" }) })
2073
+ ] });
2074
+ };
2075
+ var HeadersContainer = styled41__default.default.div`
2076
+ width: 100%;
2077
+ display: flex;
2078
+ flex-direction: row;
2079
+ align-items: center;
2080
+ gap: ${spaces[6]};
2081
+ `;
2082
+ var Container22 = styled41__default.default.div`
2083
+ display: flex;
2084
+ flex-direction: column;
2085
+ gap: ${spaces[3]};
2086
+ `;
2087
+ var DocumentListAccordion = ({
2088
+ title,
2089
+ files,
2090
+ onSortBy,
2091
+ onViewDetail,
2092
+ accept,
2093
+ onFileSelect
2094
+ }) => {
2095
+ const onClick = (accessor) => {
2096
+ onSortBy && onSortBy(accessor);
2097
+ };
2098
+ return /* @__PURE__ */ jsxRuntime.jsx(
2099
+ Accordion,
2100
+ {
2101
+ rightElement: /* @__PURE__ */ jsxRuntime.jsx(
2102
+ FileButton,
2103
+ {
2104
+ onFileSelect,
2105
+ text: "Add File",
2106
+ accept
2107
+ }
2108
+ ),
2109
+ title,
2110
+ children: /* @__PURE__ */ jsxRuntime.jsxs(Container22, { children: [
2111
+ /* @__PURE__ */ jsxRuntime.jsxs(HeadersContainer, { children: [
2112
+ /* @__PURE__ */ jsxRuntime.jsx(
2113
+ DocumentAccordionHeader,
2114
+ {
2115
+ title: "File Name",
2116
+ onClick: () => onClick("name")
2117
+ }
2118
+ ),
2119
+ /* @__PURE__ */ jsxRuntime.jsx(
2120
+ DocumentAccordionHeader,
2121
+ {
2122
+ title: "Source File Name",
2123
+ onClick: () => onClick("status")
2124
+ }
2125
+ ),
2126
+ /* @__PURE__ */ jsxRuntime.jsx(
2127
+ DocumentAccordionHeader,
2128
+ {
2129
+ title: "File Status",
2130
+ onClick: () => onClick("status")
2131
+ }
2132
+ ),
2133
+ /* @__PURE__ */ jsxRuntime.jsx(
2134
+ DocumentAccordionHeader,
2135
+ {
2136
+ title: "Date Created",
2137
+ onClick: () => onClick("createdAt")
2138
+ }
2139
+ ),
2140
+ /* @__PURE__ */ jsxRuntime.jsx(DocumentAccordionHeader, { title: "File Options" })
2141
+ ] }),
2142
+ files?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(
2143
+ EmptyState,
2144
+ {
2145
+ message: "No documents have been added to this record",
2146
+ variant: "documents"
2147
+ }
2148
+ ),
2149
+ files?.length > 0 && files.map((file) => /* @__PURE__ */ jsxRuntime.jsx(HeadersContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
2150
+ DocumentAccordionRow,
2151
+ {
2152
+ file,
2153
+ onViewDetail: () => onViewDetail(file.id)
2154
+ }
2155
+ ) }, file.id))
2156
+ ] })
2157
+ }
2158
+ );
2159
+ };
2160
+ var CarouselContainer = styled41__default.default.div`
2161
+ width: 100%;
2162
+ overflow: hidden;
2163
+ position: relative;
2164
+ `;
2165
+ var CardsWrapper = styled41__default.default.div`
2166
+ display: flex;
2167
+ gap: 1.5rem;
2168
+ padding: 1rem 0;
2169
+
2170
+ /* Desktop: controlled by JS */
2171
+ @media (min-width: 768px) {
2172
+ overflow-x: hidden;
2173
+ }
2174
+
2175
+ /* Mobile: native scroll with snap */
2176
+ @media (max-width: 767px) {
2177
+ overflow-x: auto;
2178
+ scroll-snap-type: x mandatory;
2179
+ -webkit-overflow-scrolling: touch;
2180
+ scrollbar-width: none;
2181
+
2182
+ &::-webkit-scrollbar {
2183
+ display: none;
2184
+ }
2185
+ }
2186
+ `;
2187
+ var CardContainer = styled41__default.default.div`
2188
+ display: flex;
2189
+ gap: 1.5rem;
2190
+
2191
+ /* Desktop: transform animation */
2192
+ @media (min-width: 768px) {
2193
+ transform: translateX(${(props) => props.$translateX}px);
2194
+ transition: transform 0.3s ease-in-out;
2195
+ }
2196
+
2197
+ /* Mobile: natural flow */
2198
+ @media (max-width: 767px) {
2199
+ transform: none;
2200
+
2201
+ & > * {
2202
+ scroll-snap-align: center;
2203
+ flex-shrink: 0;
2204
+ }
2205
+ }
2206
+ `;
2207
+ var NavigationWrapper = styled41__default.default.div`
2208
+ display: flex;
2209
+ justify-content: left;
2210
+ align-items: center;
2211
+ gap: 1rem;
2212
+ margin-top: 1.5rem;
2213
+ `;
2214
+ var NavButton = styled41__default.default.button`
2215
+ width: 2.5rem;
2216
+ height: 2.5rem;
2217
+ border-radius: 50%;
2218
+ background-color: transparent;
2219
+ color: ${(props) => props.$disabled ? colors.text.subtle : colors.text[props.navColor]};
2220
+ border: none;
2221
+ cursor: ${(props) => props.$disabled ? "not-allowed" : "pointer"};
2222
+ display: flex;
2223
+ align-items: center;
2224
+ justify-content: center;
2225
+ transition: all 0.2s;
2226
+
2227
+ @media (max-width: 767px) {
2228
+ display: none;
2229
+ }
2230
+
2231
+ &:hover {
2232
+ opacity: ${(props) => props.$disabled ? 1 : 0.8};
2233
+ }
2234
+ `;
2235
+ var Indicators = styled41__default.default.div`
2236
+ display: flex;
2237
+ gap: 0.5rem;
2238
+ `;
2239
+ var Indicator = styled41__default.default.div`
2240
+ width: 0.5rem;
2241
+ height: 0.5rem;
2242
+ border-radius: 50%;
2243
+ background-color: ${(props) => props.$active ? colors.text[props.indicatorColor] : colors.text.subtle};
2244
+ transition: background-color 0.2s;
2245
+ `;
2246
+ var FeatureCarousel = ({
2247
+ cards,
2248
+ cardTitleColor = "brand",
2249
+ cardDescriptionVariant = "primary",
2250
+ cardArrowVariant = "teal",
2251
+ cardThumbnailBgColor = "brand",
2252
+ navButtonColor = "brand",
2253
+ indicatorColor = "brand"
2254
+ }) => {
2255
+ const [currentIndex, setCurrentIndex] = react.useState(0);
2256
+ const [cardsToShow, setCardsToShow] = react.useState(3);
2257
+ const [cardWidth, setCardWidth] = react.useState(284);
2258
+ const containerRef = react.useRef(null);
2259
+ const touchStartX = react.useRef(0);
2260
+ const touchEndX = react.useRef(0);
2261
+ const gap = 24;
2262
+ react.useEffect(() => {
2263
+ const observer = new ResizeObserver((entries) => {
2264
+ const entry = entries[0];
2265
+ if (!entry) return;
2266
+ const containerWidth = entry.contentRect.width;
2267
+ const count = Math.floor((containerWidth + gap) / (284 + gap));
2268
+ const clamped = Math.max(1, count);
2269
+ if (clamped === 1) {
2270
+ setCardWidth(containerWidth);
2271
+ } else {
2272
+ setCardWidth(284);
2273
+ }
2274
+ setCardsToShow(clamped);
2275
+ });
2276
+ if (containerRef.current) observer.observe(containerRef.current);
2277
+ return () => observer.disconnect();
2278
+ }, []);
2279
+ const needsCarousel = cards.length > cardsToShow;
2280
+ const maxIndex = Math.max(0, cards.length - cardsToShow);
2281
+ const translateX = -currentIndex * (cardsToShow === 1 ? cardWidth : cardWidth + gap);
2282
+ const handlePrev = () => setCurrentIndex((prev) => Math.max(0, prev - 1));
2283
+ const handleNext = () => setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
2284
+ const handleTouchStart = (e) => {
2285
+ if (!e.touches[0]) return;
2286
+ touchStartX.current = e.touches[0].clientX;
2287
+ };
2288
+ const handleTouchEnd = (e) => {
2289
+ if (!e.changedTouches[0]) return;
2290
+ touchEndX.current = e.changedTouches[0].clientX;
2291
+ const diff = touchStartX.current - touchEndX.current;
2292
+ if (Math.abs(diff) < 50) return;
2293
+ if (diff > 0) {
2294
+ handleNext();
2295
+ } else {
2296
+ handlePrev();
2297
+ }
2298
+ };
2299
+ return /* @__PURE__ */ jsxRuntime.jsxs(
2300
+ CarouselContainer,
2301
+ {
2302
+ ref: containerRef,
2303
+ onTouchStart: handleTouchStart,
2304
+ onTouchEnd: handleTouchEnd,
2305
+ children: [
2306
+ /* @__PURE__ */ jsxRuntime.jsx(CardsWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(CardContainer, { $translateX: needsCarousel ? translateX : 0, children: cards.map((card, index) => /* @__PURE__ */ jsxRuntime.jsx(
2307
+ ContentCard,
2308
+ {
2309
+ thumbnail: card.thumbnail,
2310
+ title: card.title,
2311
+ description: card.description,
2312
+ onArrowClick: card.onArrowClick,
2313
+ titleColor: cardTitleColor,
2314
+ descriptionVariant: cardDescriptionVariant,
2315
+ arrowVariant: cardArrowVariant,
2316
+ thumbnailBgColor: cardThumbnailBgColor
2317
+ },
2318
+ index
2319
+ )) }) }),
2320
+ needsCarousel && /* @__PURE__ */ jsxRuntime.jsxs(NavigationWrapper, { children: [
2321
+ /* @__PURE__ */ jsxRuntime.jsx(
2322
+ NavButton,
2323
+ {
2324
+ onClick: handlePrev,
2325
+ $disabled: currentIndex === 0,
2326
+ navColor: navButtonColor,
2327
+ children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiArrowLeft, { size: 24 })
2328
+ }
2329
+ ),
2330
+ /* @__PURE__ */ jsxRuntime.jsx(Indicators, { children: Array.from({ length: maxIndex + 1 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
2331
+ Indicator,
2332
+ {
2333
+ $active: index === currentIndex,
2334
+ indicatorColor
2335
+ },
2336
+ index
2337
+ )) }),
2338
+ /* @__PURE__ */ jsxRuntime.jsx(
2339
+ NavButton,
2340
+ {
2341
+ onClick: handleNext,
2342
+ $disabled: currentIndex === maxIndex,
2343
+ navColor: navButtonColor,
2344
+ children: /* @__PURE__ */ jsxRuntime.jsx(hi2.HiArrowRight, { size: 24 })
2345
+ }
2346
+ )
2347
+ ] })
2348
+ ]
2349
+ }
2350
+ );
2351
+ };
2352
+ var variants13 = ["primary", "secondary"];
2353
+ var FooterContainer = styled41__default.default.footer`
2354
+ background-color: ${(props) => {
2355
+ switch (props.variant) {
2356
+ case "primary":
2357
+ return "#1e40af";
2358
+ case "secondary":
2359
+ return "#1D3C77";
2360
+ default:
2361
+ return "#1e40af";
2362
+ }
2363
+ }};
2364
+ padding: 3rem 2rem 2rem;
2365
+ color: #ffffff;
2366
+ `;
2367
+ var TopSection = styled41__default.default.div`
2368
+ display: flex;
2369
+ justify-content: space-between;
2370
+ align-items: center;
2371
+ margin-bottom: 3rem;
2372
+ padding-bottom: 2rem;
2373
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
2374
+
2375
+ @media (max-width: 768px) {
2376
+ flex-direction: column;
2377
+ gap: 2rem;
2378
+ align-items: flex-start;
2379
+ }
2380
+ `;
2381
+ var LogoWrapper2 = styled41__default.default.div`
2382
+ img {
2383
+ height: 100px;
2384
+ width: auto;
2385
+ }
2386
+ `;
2387
+ var ButtonGroup2 = styled41__default.default.div`
2388
+ display: flex;
2389
+ gap: 1rem;
2390
+ align-items: center;
2391
+ `;
2392
+ var MiddleSection = styled41__default.default.div`
2393
+ display: grid;
2394
+ grid-template-columns: 1fr 1fr auto;
2395
+ gap: 3rem;
2396
+ margin-bottom: 3rem;
2397
+ align-items: start;
2398
+
2399
+ @media (max-width: 1024px) {
2400
+ grid-template-columns: 1fr 1fr;
2401
+ }
2402
+
2403
+ @media (max-width: 768px) {
2404
+ grid-template-columns: 1fr;
2405
+ }
2406
+ `;
2407
+ var SocialButtonGroup = styled41__default.default.div`
2408
+ display: flex;
2409
+ gap: 1rem;
2410
+ flex-wrap: wrap;
2411
+ `;
2412
+ var BottomSection = styled41__default.default.div`
2413
+ display: flex;
2414
+ justify-content: space-between;
2415
+ align-items: center;
2416
+ padding-top: 2rem;
2417
+ border-top: 1px solid rgba(255, 255, 255, 0.2);
2418
+
2419
+ @media (max-width: 768px) {
2420
+ flex-direction: column;
2421
+ gap: 1rem;
2422
+ align-items: flex-start;
2423
+ }
2424
+ `;
2425
+ var LegalLinks = styled41__default.default.div`
2426
+ display: flex;
2427
+ gap: 2rem;
2428
+
2429
+ @media (max-width: 768px) {
2430
+ flex-direction: column;
2431
+ gap: 0.5rem;
2432
+ }
2433
+ `;
2434
+ var LegalLink = styled41__default.default.a`
2435
+ color: #ffffff;
2436
+ text-decoration: none;
2437
+ font-size: 0.875rem;
2438
+ text-transform: uppercase;
2439
+ font-weight: 600;
2440
+ letter-spacing: 0.05em;
2441
+
2442
+ &:hover {
2443
+ opacity: 0.8;
2444
+ }
2445
+ `;
2446
+ var Copyright = styled41__default.default.p`
2447
+ margin: 0;
2448
+ font-size: 0.875rem;
2449
+ color: rgba(255, 255, 255, 0.8);
2450
+ `;
2451
+ var Footer = ({
2452
+ logo,
2453
+ primaryButtonText,
2454
+ secondaryButtonText,
2455
+ onPrimaryClick,
2456
+ onSecondaryClick,
2457
+ addresses,
2458
+ socialLinks,
2459
+ legalLinks,
2460
+ copyrightText,
2461
+ variant = "primary",
2462
+ primaryArrowVariant = "blue",
2463
+ primaryTextBgVariant = "secondary",
2464
+ primaryTextVariant = "brand",
2465
+ secondaryBgVariant = "transparent",
2466
+ secondaryTextVariant = "secondary"
2467
+ }) => {
2468
+ return /* @__PURE__ */ jsxRuntime.jsxs(FooterContainer, { variant, children: [
2469
+ /* @__PURE__ */ jsxRuntime.jsxs(TopSection, { children: [
2470
+ /* @__PURE__ */ jsxRuntime.jsx(LogoWrapper2, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "Logo" }) }),
2471
+ /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup2, { children: [
2472
+ /* @__PURE__ */ jsxRuntime.jsx(
2473
+ ExtendedButton,
2474
+ {
2475
+ text: primaryButtonText,
2476
+ onClick: onPrimaryClick,
2477
+ arrowVariant: primaryArrowVariant,
2478
+ textBgVariant: primaryTextBgVariant,
2479
+ textVariant: primaryTextVariant
2480
+ }
2481
+ ),
2482
+ /* @__PURE__ */ jsxRuntime.jsx(
2483
+ TextButton,
2484
+ {
2485
+ text: secondaryButtonText,
2486
+ onClick: onSecondaryClick,
2487
+ bgVariant: secondaryBgVariant,
2488
+ textVariant: secondaryTextVariant,
2489
+ uppercase: true
2490
+ }
2491
+ )
2492
+ ] })
2493
+ ] }),
2494
+ /* @__PURE__ */ jsxRuntime.jsxs(MiddleSection, { children: [
2495
+ addresses.map((address, index) => /* @__PURE__ */ jsxRuntime.jsx(
2496
+ Address,
2497
+ {
2498
+ title: address.title,
2499
+ phone: address.phone,
2500
+ email: address.email,
2501
+ addressLines: address.addressLines,
2502
+ variant: "inverse"
2503
+ },
2504
+ index
2505
+ )),
2506
+ /* @__PURE__ */ jsxRuntime.jsx(SocialButtonGroup, { children: socialLinks.map((social, index) => /* @__PURE__ */ jsxRuntime.jsx(
2507
+ SocialButton,
2508
+ {
2509
+ icon: social.icon,
2510
+ onClick: () => window.open(social.url, "_blank"),
2511
+ variant: "inverse",
2512
+ ariaLabel: social.ariaLabel
2513
+ },
2514
+ index
2515
+ )) })
2516
+ ] }),
2517
+ /* @__PURE__ */ jsxRuntime.jsxs(BottomSection, { children: [
2518
+ /* @__PURE__ */ jsxRuntime.jsx(LegalLinks, { children: legalLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(LegalLink, { href: link.url, children: link.text }, index)) }),
2519
+ /* @__PURE__ */ jsxRuntime.jsx(Copyright, { children: copyrightText })
2520
+ ] })
2521
+ ] });
2522
+ };
2523
+ Footer.variants = variants13;
2524
+ var HeaderContainer3 = styled41__default.default.header`
2525
+ display: flex;
2526
+ justify-content: space-between;
2527
+ align-items: center;
2528
+ background-color: #ffffff;
2529
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
2530
+ padding: 0 1rem;
2531
+ `;
2532
+ var LogoWrapper3 = styled41__default.default.div`
2533
+ display: flex;
2534
+ align-items: center;
2535
+
2536
+ img {
2537
+ height: 60px;
2538
+ width: auto;
2539
+ }
2540
+ `;
2541
+ var ButtonGroup3 = styled41__default.default.div`
2542
+ display: flex;
2543
+ gap: 1rem;
2544
+ align-items: center;
2545
+
2546
+ /* Hide on mobile */
2547
+ @media (max-width: 767px) {
2548
+ display: none;
2549
+ }
2550
+ `;
2551
+ var BurgerButton = styled41__default.default.button`
2552
+ display: none;
2553
+
2554
+ /* Show only on mobile */
2555
+ @media (max-width: 767px) {
2556
+ display: flex;
2557
+ flex-direction: column;
2558
+ justify-content: space-around;
2559
+ width: 2rem;
2560
+ height: 2rem;
2561
+ background: transparent;
2562
+ border: none;
2563
+ cursor: pointer;
2564
+ padding: 0;
2565
+
2566
+ &:focus {
2567
+ outline: none;
2568
+ }
2569
+ }
2570
+ `;
2571
+ var BurgerLine = styled41__default.default.div`
2572
+ width: 2rem;
2573
+ height: 0.25rem;
2574
+ background-color: ${(props) => colors.border[props.$burgerVariant]};
2575
+ border-radius: 10px;
2576
+ transition: all 0.3s linear;
2577
+ position: relative;
2578
+ transform-origin: 1px;
2579
+
2580
+ &:first-child {
2581
+ transform: ${({ $isOpen }) => $isOpen ? "rotate(45deg)" : "rotate(0)"};
2582
+ }
2583
+
2584
+ &:nth-child(2) {
2585
+ opacity: ${({ $isOpen }) => $isOpen ? "0" : "1"};
2586
+ transform: ${({ $isOpen }) => $isOpen ? "translateX(20px)" : "translateX(0)"};
2587
+ }
2588
+
2589
+ &:nth-child(3) {
2590
+ transform: ${({ $isOpen }) => $isOpen ? "rotate(-45deg)" : "rotate(0)"};
2591
+ }
2592
+ `;
2593
+ var Header3 = ({
2594
+ logo,
2595
+ primaryButtonText,
2596
+ secondaryButtonText,
2597
+ onPrimaryClick,
2598
+ onSecondaryClick,
2599
+ isMobileMenuOpen = false,
2600
+ onMobileMenuToggle,
2601
+ burgerVariant = "primary",
2602
+ primaryArrowVariant = "blue",
2603
+ primaryTextBgVariant = "brand",
2604
+ primaryTextVariant = "secondary",
2605
+ secondaryBgVariant = "transparent",
2606
+ secondaryTextVariant = "brand"
2607
+ }) => {
2608
+ return /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer3, { children: [
2609
+ /* @__PURE__ */ jsxRuntime.jsx(LogoWrapper3, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: "Logo" }) }),
2610
+ /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup3, { children: [
2611
+ /* @__PURE__ */ jsxRuntime.jsx(
2612
+ ExtendedButton,
2613
+ {
2614
+ text: primaryButtonText,
2615
+ onClick: onPrimaryClick,
2616
+ arrowVariant: primaryArrowVariant,
2617
+ textBgVariant: primaryTextBgVariant,
2618
+ textVariant: primaryTextVariant
2619
+ }
2620
+ ),
2621
+ /* @__PURE__ */ jsxRuntime.jsx(
2622
+ TextButton,
2623
+ {
2624
+ text: secondaryButtonText,
2625
+ onClick: onSecondaryClick,
2626
+ bgVariant: secondaryBgVariant,
2627
+ textVariant: secondaryTextVariant,
2628
+ uppercase: true
2629
+ }
2630
+ )
2631
+ ] }),
2632
+ /* @__PURE__ */ jsxRuntime.jsxs(BurgerButton, { onClick: onMobileMenuToggle, $burgerVariant: burgerVariant, children: [
2633
+ /* @__PURE__ */ jsxRuntime.jsx(BurgerLine, { $isOpen: isMobileMenuOpen, $burgerVariant: burgerVariant }),
2634
+ /* @__PURE__ */ jsxRuntime.jsx(BurgerLine, { $isOpen: isMobileMenuOpen, $burgerVariant: burgerVariant }),
2635
+ /* @__PURE__ */ jsxRuntime.jsx(BurgerLine, { $isOpen: isMobileMenuOpen, $burgerVariant: burgerVariant })
2636
+ ] })
2637
+ ] });
2638
+ };
2639
+ var Container23 = styled41__default.default.div`
2640
+ display: flex;
2641
+ flex-direction: column;
2642
+ gap: ${spaces[2]};
2643
+ `;
2644
+ styled41__default.default.div`
2645
+ display: flex;
2646
+ flex-direction: column;
2647
+ gap: ${spaces[2]};
2648
+ padding: 0 ${spaces[4]};
2649
+ `;
2650
+ var OverviewList = ({ overviews }) => {
2651
+ function isAllCompleted(overviewItems) {
2652
+ let isCompleted = true;
2653
+ overviewItems.forEach((overview) => {
2654
+ if (overview.isComplete === false) {
2655
+ isCompleted = false;
2656
+ }
2657
+ });
2658
+ return isCompleted;
2659
+ }
2660
+ return /* @__PURE__ */ jsxRuntime.jsx(Container23, { children: overviews.map((overview) => /* @__PURE__ */ jsxRuntime.jsx(Container23, { children: /* @__PURE__ */ jsxRuntime.jsx(OverviewRowItem, { title: overview.header, isMainHeader: true, isComplete: isAllCompleted(overview.overviewItems) }) }, overview.header)) });
2661
+ };
2662
+ var toastVariants = tailwindVariants.tv({
2663
+ base: "z-[100] fixed left-0 bottom-0 p-4 transition-all duration-500 transform",
2664
+ variants: {
2665
+ show: {
2666
+ true: "translate-x-0",
2667
+ false: "-translate-x-full"
2668
+ }
2669
+ }
2670
+ });
2671
+ var containerVariants = tailwindVariants.tv({
2672
+ base: "rounded-lg shadow overflow-hidden p-2",
2673
+ variants: {
2674
+ type: {
2675
+ Default: "bg-gray-700",
2676
+ Success: "bg-green-700",
2677
+ Warning: "bg-yellow-700",
2678
+ Error: "bg-red-700",
2679
+ Message: "bg-blue-700"
2680
+ }
2681
+ }
2682
+ });
2683
+ var iconVariants = tailwindVariants.tv({
2684
+ base: "flex-shrink-0 self-start inline-flex items-center justify-center w-10 h-10 mr-3 rounded-xl bg-opacity-20",
2685
+ variants: {
2686
+ type: {
2687
+ Success: "bg-green-500",
2688
+ Warning: "bg-yellow-500",
2689
+ Error: "bg-red-500",
2690
+ Message: "bg-blue-500",
2691
+ Default: "bg-gray-500"
2692
+ }
2693
+ }
2694
+ });
2695
+ function Toast({
2696
+ type,
2697
+ message,
2698
+ visible,
2699
+ setVisible,
2700
+ duration = 5e3,
2701
+ onClear
2702
+ }) {
2703
+ react.useEffect(() => {
2704
+ if (duration && visible) {
2705
+ const timer = setTimeout(() => {
2706
+ setVisible && setVisible(false);
2707
+ onClear && onClear();
2708
+ }, duration);
2709
+ return () => clearTimeout(timer);
2710
+ }
2711
+ }, [duration, visible]);
2712
+ const icon = () => {
2713
+ switch (type) {
2714
+ case "Success":
2715
+ return /* @__PURE__ */ jsxRuntime.jsx(
2716
+ "svg",
2717
+ {
2718
+ width: "20",
2719
+ height: "20",
2720
+ viewBox: "0 0 20 20",
2721
+ fill: "none",
2722
+ stroke: "#a1a1a1",
2723
+ xmlns: "http://www.w3.org/2000/svg",
2724
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2725
+ "path",
2726
+ {
2727
+ fillRule: "evenodd",
2728
+ clipRule: "evenodd",
2729
+ d: "M0 10C0 4.47715 4.47715 0 10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM9.73 13.61L14.3 7.61V7.58C14.5179 7.29419 14.5668 6.91382 14.4283 6.58218C14.2897 6.25054 13.9848 6.01801 13.6283 5.97218C13.2718 5.92635 12.9179 6.07419 12.7 6.36L8.92 11.36L7.29 9.28C7.07028 8.99776 6.71668 8.85418 6.36239 8.90334C6.00811 8.9525 5.70696 9.18694 5.57239 9.51834C5.43783 9.84974 5.49028 10.2278 5.71 10.51L8.15 13.62C8.34082 13.8615 8.63222 14.0017 8.94 14C9.2495 13.9993 9.54121 13.8552 9.73 13.61Z",
2730
+ fill: "#54D62C"
2731
+ }
2732
+ )
2733
+ }
2734
+ );
2735
+ case "Warning":
2736
+ return /* @__PURE__ */ jsxRuntime.jsx(
2737
+ "svg",
2738
+ {
2739
+ width: "24",
2740
+ height: "20",
2741
+ viewBox: "0 0 24 21",
2742
+ fill: "none",
2743
+ stroke: "#a1a1a1",
2744
+ xmlns: "http://www.w3.org/2000/svg",
2745
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2746
+ "path",
2747
+ {
2748
+ d: "M12.0005 15C11.8027 15 11.6093 15.0586 11.4449 15.1685C11.2804 15.2784 11.1523 15.4346 11.0766 15.6173C11.0009 15.8 10.9811 16.0011 11.0197 16.1951C11.0583 16.3891 11.1535 16.5673 11.2933 16.7071C11.4332 16.847 11.6114 16.9422 11.8054 16.9808C11.9993 17.0194 12.2004 16.9996 12.3831 16.9239C12.5659 16.8482 12.722 16.72 12.8319 16.5556C12.9418 16.3911 13.0005 16.1978 13.0005 16C13.0005 15.7348 12.8951 15.4804 12.7076 15.2929C12.52 15.1054 12.2657 15 12.0005 15ZM22.6705 16.47L14.6205 2.47C14.3603 2.00351 13.9802 1.61495 13.5196 1.34447C13.0591 1.07398 12.5346 0.931366 12.0005 0.931366C11.4663 0.931366 10.9419 1.07398 10.4813 1.34447C10.0207 1.61495 9.64065 2.00351 9.38046 2.47L1.38046 16.47C1.11125 16.924 0.966598 17.441 0.9611 17.9688C0.955602 18.4966 1.08945 19.0165 1.34914 19.476C1.60883 19.9356 1.98516 20.3185 2.44014 20.586C2.89512 20.8536 3.41264 20.9964 3.94046 21H20.0605C20.5925 21.0052 21.1164 20.8689 21.5784 20.6049C22.0403 20.3409 22.4238 19.9588 22.6894 19.4978C22.9551 19.0368 23.0933 18.5134 23.09 17.9813C23.0866 17.4493 22.9418 16.9277 22.6705 16.47ZM20.9405 18.47C20.8528 18.6259 20.7249 18.7555 20.5701 18.8452C20.4154 18.9349 20.2393 18.9815 20.0605 18.98H3.94046C3.76157 18.9815 3.58556 18.9349 3.43077 18.8452C3.27599 18.7555 3.14811 18.6259 3.06046 18.47C2.97269 18.318 2.92648 18.1455 2.92648 17.97C2.92648 17.7945 2.97269 17.622 3.06046 17.47L11.0605 3.47C11.1444 3.3062 11.2719 3.16873 11.4289 3.07274C11.5859 2.97675 11.7664 2.92596 11.9505 2.92596C12.1345 2.92596 12.315 2.97675 12.472 3.07274C12.629 3.16873 12.7565 3.3062 12.8405 3.47L20.8905 17.47C20.9897 17.6198 21.0467 17.7936 21.0555 17.9731C21.0643 18.1526 21.0245 18.3312 20.9405 18.49V18.47ZM12.0005 7C11.7352 7 11.4809 7.10535 11.2933 7.29289C11.1058 7.48043 11.0005 7.73478 11.0005 8V12C11.0005 12.2652 11.1058 12.5196 11.2933 12.7071C11.4809 12.8946 11.7352 13 12.0005 13C12.2657 13 12.52 12.8946 12.7076 12.7071C12.8951 12.5196 13.0005 12.2652 13.0005 12V8C13.0005 7.73478 12.8951 7.48043 12.7076 7.29289C12.52 7.10535 12.2657 7 12.0005 7Z",
2749
+ fill: "#FFC107"
2750
+ }
2751
+ )
2752
+ }
2753
+ );
2754
+ case "Error":
2755
+ return /* @__PURE__ */ jsxRuntime.jsx(
2756
+ "svg",
2757
+ {
2758
+ width: "20",
2759
+ height: "20",
2760
+ viewBox: "0 0 20 20",
2761
+ fill: "none",
2762
+ stroke: "#a1a1a1",
2763
+ xmlns: "http://www.w3.org/2000/svg",
2764
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2765
+ "path",
2766
+ {
2767
+ d: "M10 12C9.75278 12 9.5111 12.0733 9.30554 12.2107C9.09998 12.348 8.93976 12.5432 8.84516 12.7716C8.75055 13.0001 8.72579 13.2514 8.77402 13.4939C8.82225 13.7363 8.94131 13.9591 9.11612 14.1339C9.29094 14.3087 9.51367 14.4277 9.75614 14.476C9.99862 14.5242 10.25 14.4995 10.4784 14.4049C10.7068 14.3102 10.902 14.15 11.0393 13.9445C11.1767 13.7389 11.25 13.4972 11.25 13.25C11.25 12.9185 11.1183 12.6005 10.8839 12.3661C10.6495 12.1317 10.3315 12 10 12ZM10 10.5C10.2652 10.5 10.5196 10.3946 10.7071 10.2071C10.8946 10.0196 11 9.76522 11 9.5V6.5C11 6.23478 10.8946 5.98043 10.7071 5.79289C10.5196 5.60536 10.2652 5.5 10 5.5C9.73479 5.5 9.48043 5.60536 9.2929 5.79289C9.10536 5.98043 9 6.23478 9 6.5V9.5C9 9.76522 9.10536 10.0196 9.2929 10.2071C9.48043 10.3946 9.73479 10.5 10 10.5ZM10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34874 18.9425 4.80691 17.0678 2.93219C15.1931 1.05746 12.6513 0.00294858 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C17.9976 12.121 17.1539 14.1544 15.6542 15.6542C14.1544 17.1539 12.121 17.9976 10 18Z",
2768
+ fill: "#FF4842"
2769
+ }
2770
+ )
2771
+ }
2772
+ );
2773
+ case "Message":
2774
+ return /* @__PURE__ */ jsxRuntime.jsx(
2775
+ "svg",
2776
+ {
2777
+ width: "20",
2778
+ height: "20",
2779
+ viewBox: "0 0 20 20",
2780
+ fill: "none",
2781
+ stroke: "#a1a1a1",
2782
+ xmlns: "http://www.w3.org/2000/svg",
2783
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2784
+ "path",
2785
+ {
2786
+ fillRule: "evenodd",
2787
+ clipRule: "evenodd",
2788
+ d: "M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 7.34784 18.9464 4.8043 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0ZM11 14C11 14.5523 10.5523 15 10 15C9.44771 15 9 14.5523 9 14V9C9 8.44771 9.44771 8 10 8C10.5523 8 11 8.44771 11 9V14ZM9 6C9 6.55228 9.44771 7 10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44771 5 9 5.44772 9 6Z",
2789
+ fill: "#1890FF"
2790
+ }
2791
+ )
2792
+ }
2793
+ );
2794
+ default:
2795
+ return null;
2796
+ }
2797
+ };
2798
+ const toast = () => {
2799
+ switch (type) {
2800
+ case "Default":
2801
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap w-full h-full items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full sm:w-auto px-4 py-4 sm:py-0 border-b border-gray-400 sm:border-transparent", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm leading-5 text-gray-200 font-semibold", children: message }) }) });
2802
+ default:
2803
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap w-full h-full items-center justify-between", children: [
2804
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full sm:w-auto px-4 py-4 sm:py-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center pr-6", children: [
2805
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconVariants({ type }), children: icon() }),
2806
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm leading-5 text-gray-200", children: message })
2807
+ ] }) }),
2808
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-16 border-l border-gray-800", children: /* @__PURE__ */ jsxRuntime.jsx(
2809
+ "button",
2810
+ {
2811
+ onClick: () => {
2812
+ setVisible && setVisible(false);
2813
+ onClear && onClear();
2814
+ },
2815
+ className: "flex w-full h-full items-center justify-center text-center text-lg px-2 text-gray-50",
2816
+ children: "X"
2817
+ }
2818
+ ) })
2819
+ ] });
2820
+ }
2821
+ };
2822
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: toastVariants({ show: visible }), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerVariants({ type }), children: toast() }) });
2823
+ }
2824
+ var ToastContext = react.createContext({ showToast: () => {
2825
+ } });
2826
+ var useToast = () => react.useContext(ToastContext);
2827
+ var ToastProvider = ({ children }) => {
2828
+ const [toast, setToast] = react.useState();
2829
+ function showToast({ message, type = "Success" }) {
2830
+ setToast({ message, type });
2831
+ }
2832
+ return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast }, children: [
2833
+ /* @__PURE__ */ jsxRuntime.jsx(
2834
+ Toast,
2835
+ {
2836
+ type: toast?.type ?? "Success",
2837
+ message: toast?.message,
2838
+ visible: typeof toast?.message === "string",
2839
+ onClear: () => setToast(void 0)
2840
+ }
2841
+ ),
2842
+ children
2843
+ ] });
2844
+ };
2845
+ var VersionLabel = ({ versionNumber }) => {
2846
+ return /* @__PURE__ */ jsxRuntime.jsx(Label, { value: `V${versionNumber}` });
2847
+ };
2848
+
2849
+ exports.ContactForm = ContactForm;
2850
+ exports.DocumentListAccordion = DocumentListAccordion;
2851
+ exports.FeatureCarousel = FeatureCarousel;
2852
+ exports.Footer = Footer;
2853
+ exports.Header = Header3;
2854
+ exports.OverviewList = OverviewList;
2855
+ exports.ToastProvider = ToastProvider;
2856
+ exports.VersionLabel = VersionLabel;
2857
+ exports.useToast = useToast;
2858
+ //# sourceMappingURL=organisms.cjs.map
2859
+ //# sourceMappingURL=organisms.cjs.map